/**
 * The motion navbar — a sticky rail that condenses into a glass pill.
 * See visual/motion-navbar.md. Copy alongside tokens.css.
 *
 * TWO TRACKS, OUT OF STEP ON PURPOSE. Geometry commits on the UI spring's
 * budget; the material follows one --lx-dur-fast behind it. The bar arrives,
 * then thickens.
 *
 * One spring for all of it is what produces a header that looks finished at
 * 400ms and is still resolving a backdrop-filter a second later.
 */

.lx-navbar {
  position: sticky;
  top: 0;
  z-index: var(--lx-z-header);
  /* A COLUMN, so the ribbon can sit beneath the bar. As a row the ribbon
     becomes a sibling flex item, takes half the line and squeezes the bar —
     which is exactly what it did before 2026-09-08. */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: var(--lx-space-4);
}

/* The rail never animates. Everything that moves is on the bar. */
.lx-navbar__bar {
  /* Four fifths of --lx-container: far enough to read as a change, not so far
     that six destinations wrap. */
  --lx-navbar-w: var(--lx-container);
  --lx-navbar-drop: 0px;

  display: flex;
  align-items: center;
  gap: var(--lx-space-4);
  width: 100%;
  max-width: var(--lx-navbar-w);
  min-height: var(--lx-header-h);
  padding-inline: var(--lx-space-4);
  border: 1px solid transparent;
  border-radius: 0;
  background-color: transparent;
  transform: translateY(var(--lx-navbar-drop));

  transition:
    max-width var(--lx-spring-ui-dur) var(--lx-ease),
    transform var(--lx-spring-ui-dur) var(--lx-ease),
    border-radius var(--lx-spring-ui-dur) var(--lx-ease),
    background-color var(--lx-dur) var(--lx-ease) var(--lx-dur-fast),
    backdrop-filter var(--lx-dur) var(--lx-ease) var(--lx-dur-fast),
    border-color var(--lx-dur) var(--lx-ease) var(--lx-dur-fast),
    box-shadow var(--lx-dur) var(--lx-ease) var(--lx-dur-fast);
}

.lx-navbar[data-condensed='true'] .lx-navbar__bar {
  --lx-navbar-w: 960px;
  --lx-navbar-drop: var(--lx-space-3);

  border-radius: var(--lx-radius-pill);
  border-color: var(--lx-glass-line);
  background-color: var(--lx-glass);
  backdrop-filter: var(--lx-blur);
  /* The hairline ring and the inset specular edge are what make a pane read as
     a pane and not a dark rectangle. Both name --lx-glass-line, so reduced
     transparency and high contrast already answer for them. */
  box-shadow:
    var(--lx-shadow-2),
    inset 0 1px 0 var(--lx-glass-line);
}

/* --- the destinations ----------------------------------------------------- */

.lx-navbar__nav {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--lx-space-1);
}

.lx-navbar__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--lx-tap);
  padding-inline: var(--lx-space-3);
  border-radius: var(--lx-radius-sm);
  color: var(--lx-text-soft);
  font: var(--lx-sm);
  letter-spacing: var(--lx-sm-track);
  text-decoration: none;
  transition:
    color var(--lx-dur-fast) var(--lx-ease),
    transform var(--lx-dur-press) var(--lx-ease),
    font-weight var(--lx-dur) var(--lx-ease) var(--lx-dur-fast),
    letter-spacing var(--lx-dur) var(--lx-ease) var(--lx-dur-fast);
}

.lx-navbar__link:hover,
.lx-navbar__link[aria-current] {
  color: var(--lx-text);
}

/* Feedback on pointerdown, not on release. On the element, not a wrapper. */
.lx-navbar__link:active {
  transform: scale(0.97);
}

/* Text on glass takes weight and a small positive tracking bump — material.md
   §3. Both reflow the row; six destinations on one line is cheap, but a longer
   bar should step rather than interpolate. */
.lx-navbar[data-condensed='true'] .lx-navbar__link {
  font-weight: 500;
  letter-spacing: calc(var(--lx-sm-track) + 0.01em);
}

/* The product owns whatever sits here — a theme control, a locale select, a
   sign-in. The floor is not negotiable, so the component asserts it rather
   than hoping each product remembers. */
.lx-navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--lx-space-2);
  /* The destinations carry flex:1 and push this to the edge — until they are
     hidden below 768, when the slot would otherwise sit against the mark. */
  margin-inline-start: auto;
}

.lx-navbar__actions > * {
  min-block-size: var(--lx-tap);
  min-inline-size: var(--lx-tap);
}

/* --- the language control ------------------------------------------------- */

/* Shows the language you would switch TO, not the one you are in — one control,
   no menu, and it reads as an offer rather than a status. The full word on the
   rail; a globe once the bar condenses or the viewport stops having room for
   it, because that is where the spacing actually binds. */
.lx-navbar__lang {
  display: inline-flex;
  align-items: center;
  gap: var(--lx-space-2);
  min-height: var(--lx-tap);
  padding-inline: var(--lx-space-3);
  border: 1px solid var(--lx-control-line);
  border-radius: var(--lx-radius-pill);
  background-color: transparent;
  color: var(--lx-text-soft);
  font: var(--lx-sm);
  letter-spacing: var(--lx-sm-track);
  text-decoration: none;
  cursor: pointer;
  transition:
    color var(--lx-dur-fast) var(--lx-ease),
    background-color var(--lx-dur-fast) var(--lx-ease);
}

.lx-navbar__lang:hover { color: var(--lx-text); }
.lx-navbar__lang:active { transform: scale(0.97); }

.lx-navbar__lang svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* An unavailable language says why. A control that is merely dimmed is a
   defect — product/assistive-interface. */
.lx-navbar__lang[aria-disabled='true'] {
  cursor: default;
  color: var(--lx-text-faint);
}

.lx-navbar__lang[aria-disabled='true']:hover { color: var(--lx-text-faint); }

.lx-navbar__lang sup {
  font-size: 0.62em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lx-navbar[data-condensed='true'] .lx-navbar__lang-label {
  display: none;
}

@media (max-width: 1023px) {
  .lx-navbar__lang-label {
    display: none;
  }
}

/* --- the small-screen menu ------------------------------------------------ */

/* Under 768 the destinations leave the bar. Two ways out, and which one you
   get depends on whether scripting reached the page:
     - scripting ran  -> a four-dot button opens a sheet holding everything
     - it did not     -> the ribbon below, every destination visible
   The sheet HIDES content to reveal it later, so it is gated on [data-motion]
   and the ribbon is the ungated fallback — motion.md §6. */

.lx-navbar__menu { display: none; }

.lx-navbar__menu-icon {
  width: 20px;
  height: 20px;
}

.lx-navbar__ribbon { display: none; }

.lx-navbar__sheet {
  position: absolute;
  top: calc(var(--lx-header-h) + var(--lx-space-2));
  left: var(--lx-space-4);
  right: var(--lx-space-4);
  display: grid;
  gap: var(--lx-space-2);
  padding: var(--lx-space-3);
  border: 1px solid var(--lx-glass-line);
  border-radius: var(--lx-radius-lg);
  background-color: var(--lx-glass-heavy);
  backdrop-filter: var(--lx-blur-heavy);
  box-shadow: var(--lx-shadow-3);
}

.lx-navbar__sheet[hidden] { display: none; }

.lx-navbar__sheet .lx-navbar__link {
  justify-content: flex-start;
  padding-inline: var(--lx-space-4);
}

.lx-navbar__sheet-foot {
  display: flex;
  padding-top: var(--lx-space-2);
  border-top: 1px solid var(--lx-line);
}

@media (max-width: 767px) {
  /* MATERIAL ONLY down here. The drop is a transform, so it moves the bar
     without moving the ribbon underneath it — the bar lands on top of the
     destinations. Above 768 there is no ribbon to land on. */
  .lx-navbar[data-condensed='true'] .lx-navbar__bar {
    --lx-navbar-drop: 0px;
  }

  .lx-navbar__ribbon {
    display: flex;
    gap: var(--lx-space-1);
    width: 100%;
    max-width: var(--lx-container);
    overflow-x: auto;
    padding-inline: var(--lx-space-2);
    padding-block-end: var(--lx-space-2);
    border: 1px solid transparent;
    border-radius: var(--lx-radius-pill);
    scrollbar-width: none;
    transition:
      background-color var(--lx-dur) var(--lx-ease) var(--lx-dur-fast),
      backdrop-filter var(--lx-dur) var(--lx-ease) var(--lx-dur-fast),
      border-color var(--lx-dur) var(--lx-ease) var(--lx-dur-fast);
  }

  .lx-navbar__ribbon::-webkit-scrollbar { display: none; }
  .lx-navbar__ribbon .lx-navbar__link { white-space: nowrap; }

  /* The ribbon takes the same glass as the bar once condensed, or page content
     scrolls through the destinations. */
  .lx-navbar[data-condensed='true'] .lx-navbar__ribbon {
    border-color: var(--lx-glass-line);
    background-color: var(--lx-glass);
    backdrop-filter: var(--lx-blur);
  }

  html[data-motion='on'] .lx-navbar__menu {
    display: inline-grid;
    place-items: center;
    min-width: var(--lx-tap);
    min-height: var(--lx-tap);
    border: 1px solid var(--lx-control-line);
    border-radius: var(--lx-radius-pill);
    background-color: transparent;
    color: var(--lx-text-soft);
    cursor: pointer;
  }

  html[data-motion='on'] .lx-navbar__menu:hover { color: var(--lx-text); }
  html[data-motion='on'] .lx-navbar__ribbon { display: none; }

  /* The language control moves into the sheet with everything else. In the
     sheet there is room for the word, so the globe-only rule does not apply. */
  html[data-motion='on'] .lx-navbar__actions .lx-navbar__lang { display: none; }
  .lx-navbar__sheet .lx-navbar__lang-label { display: inline; }
}

@media (min-width: 768px) {
  .lx-navbar__sheet { display: none; }
}

/* --- the skip link -------------------------------------------------------- */

/* Hidden until focused, and brought back by :focus-visible alone — so it needs
   no [data-motion] gate: a page without scripting still reveals it. */
.lx-navbar__skip {
  position: absolute;
  top: var(--lx-space-2);
  left: var(--lx-space-4);
  z-index: var(--lx-z-header);
  min-height: var(--lx-tap);
  padding: var(--lx-space-2) var(--lx-space-4);
  border-radius: var(--lx-radius-sm);
  background-color: var(--lx-surface-raised);
  box-shadow: var(--lx-shadow-2);
  color: var(--lx-text);
  font: var(--lx-sm);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--lx-space-4)));
}

.lx-navbar__skip:focus-visible {
  transform: none;
}

/* --- below the container -------------------------------------------------- */

/* The gutter already binds under ~1024px, so the width change is invisible
   there and the condense is material-and-drop only. A deliberate divergence,
   written down rather than discovered — layout.md §2. Below 768 the ribbon
   takes the destinations entirely, layout.md §3. */
@media (max-width: 767px) {
  .lx-navbar__nav {
    display: none; /* the ribbon above has them */
  }
}