@import "https://assets.elements.dev/assets/app/shared/ui-catalog/catalog/style.c38e1d7304920e3.css";

.nav-demo-grid {
  display:               grid;
  gap:                   var(--space-1);
  width:                 var(--container-sm);
  max-width:             calc(100vw - 2 * var(--space-6));
  margin:                0;
  padding:               0;
  list-style:            none;
}

.nav-demo-grid.is-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width:                 var(--container-lg);
}

.nav-demo-grid.is-home {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  width:                 var(--container-md);
}

.nav-demo-grid.is-narrow {
  width: var(--space-48);
}

@media (max-width: 40rem) {
  .nav-demo-grid.is-two,
  .nav-demo-grid.is-home {
    grid-template-columns: minmax(0, 1fr);
  }
}

.nav-demo-grid > li {
  margin: 0;
}

.nav-demo-featured {
  grid-row:        span 3;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
  height:          100%;
  box-sizing:      border-box;
  padding:         var(--space-4);
  background:      var(--bg-muted);
  border-radius:   var(--radius-item);
}

.nav-demo-featured-title {
  margin-bottom: var(--space-2);
  font-family:   var(--font-heading);
  font-size:     var(--text-title);
  font-weight:   var(--weight-strong);
}

.nav-demo-title {
  font-weight: var(--weight-strong);
  line-height: var(--leading-none);
}

.nav-demo-desc {
  margin:    0;
  color:     var(--ink-dim);
  font-size: var(--text-ui);
  line-height: var(--leading-snug);
}

.nav-demo-icon-link {
  flex-direction: row;
  align-items:    center;
  gap:            var(--space-2);
}

.nav-demo-log {
  font-family: var(--font-mono);
  font-size:   var(--text-xs);
  color:       var(--ink-dim);
  text-align:  center;
}

.nav-demo-row {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     flex-start;
  justify-content: center;
  gap:             var(--space-3);
}

.nav-demo-sub {
  width: var(--container-md);
  max-width: calc(100vw - 2 * var(--space-6));
}

.nav-demo-flyout {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-4);
}

/* collisionBoundary: a narrow box, the menu at its end. */
.nav-demo-boundary {
  display:         flex;
  justify-content: flex-end;
  width:           var(--space-64);
  max-width:       100%;
  padding:         var(--space-2);
  border:          var(--control-border-width) dashed var(--control-border);
  border-radius:   var(--radius-surface);
}

/* data-anchor-hidden and sticky: lists that scroll out of their box. */
.nav-demo-scroll {
  display:         flex;
  flex-direction:  column;
  gap:             var(--space-2);
  width:           var(--space-64);
  max-width:       100%;
  height:          var(--space-24);
  overflow:        auto;
  padding:         var(--space-2);
  border:          var(--control-border-width) dashed var(--control-border);
  border-radius:   var(--radius-surface);
  /* A trigger focused into view keeps room for its outer focus ring. */
  scroll-padding:  var(--space-2);
}

.nav-demo-scroll-spacer {
  flex: none;
  height: var(--space-64);
}

/* A header box wider and taller than its list: the anchored viewport opens
   under the box's bottom edge, at its start. */
.nav-demo-anchor {
  display:       flex;
  width:         var(--space-64);
  max-width:     100%;
  padding:       var(--space-4) var(--space-6);
  border:        var(--control-border-width) dashed var(--control-border);
  border-radius: var(--radius-surface);
}

/* The padded menu sits at the end of the row, so its panel meets the
   screen's edge on a phone. */
.nav-demo-edge {
  display:         flex;
  justify-content: flex-end;
  width:           100%;
}

/* An echo line takes its own full-width line under the controls and
   reserves its lines, so a longer or wrapping echo never moves a control or
   grows the demo (1280, 390, rtl). */
.demo-stage > .nav-demo-log[data-testid],
.nav-demo-row > .nav-demo-log[data-testid] {
  align-self: stretch;
  min-height: 2lh;
  text-align: center;
}

.demo-stage:not(.is-column) > .nav-demo-log[data-testid],
.nav-demo-row > .nav-demo-log[data-testid] {
  flex-basis: 100%;
}

.nav-demo-log[data-testid].is-long {
  min-height: 3lh;
}

.nav-demo-log[data-testid].is-longer {
  min-height: 4lh;
}