/* The main nav bar — scaffolding for tests/nav.html.

   Six ways to group the five section links and mark the current one. Each bar
   is shown on both grounds the live page runs it over, because the marker has
   to survive a dark hero and a white How we work. Static, not sticky: these
   are for comparing, not for scrolling. Does not ship with the live page. */

.navdemo { display: grid; gap: var(--s-6); }

/* the two grounds. --bg/--fg are re-declared locally so everything inside a
   frame — including the real .btn — resolves against that frame's ground
   rather than the page's */
.navdemo__frame {
  --bg: #130F0C;
  --fg: #FFFFFF;
  background: var(--bg);
  color: var(--fg);
  border-radius: var(--r-md);
  padding: var(--s-6) var(--s-4);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.navdemo__frame--light {
  --bg: #FFFFFF;
  --fg: #130F0C;
}

/* ── The bar itself, shared ─────────────────────────────────────────────── */

/* Every option except 04 sits inside the live page's floating bar, because
   that is the thing being compared: what the row looks like *in* the bar. 04
   is the one that takes the bar away, which is only a real difference if the
   others actually have one. */
.nb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  box-shadow:
    inset 0 1px 0 0 color-mix(in srgb, var(--fg) 10%, transparent),
    0 6px 30px 0 rgba(0, 0, 0, .10);
}
.nb__brand { display: inline-flex; align-items: center; color: var(--fg); }
.nb__brand .logo { height: 30px; width: calc(30px * 351.4 / 92.3); fill: currentColor; }
.nb__cta { flex: none; }

/* ── 01 / 02 / 06 · the segmented track ─────────────────────────────────
   The point of this one is the ratio: the capsule's padding is 3px, so the
   marker inside it is nearly the full height of the track. That is what makes
   it read as a control with a position rather than as five separate links. */
.seg {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 6%, transparent);
}
.seg__link {
  position: relative;
  padding: var(--s-2) var(--s-5);
  border-radius: var(--r-pill);
  font-size: var(--t-body);
  line-height: 24px;
  color: color-mix(in srgb, var(--fg) 55%, transparent);
  white-space: nowrap;
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.seg__link:hover { color: var(--fg); }
.seg__link.is-on {
  color: var(--fg);
  /* the marker sits on a lighter surface than the track, the way a raised key
     does — the track is the recess, the marker is the thing in it */
  background: color-mix(in srgb, var(--fg) 12%, transparent);
  box-shadow:
    inset 0 1px 0 0 color-mix(in srgb, var(--fg) 14%, transparent),
    0 1px 2px 0 rgba(0, 0, 0, .18);
}

/* 02 · the marker at full contrast instead of a tint */
.nb--solid .seg__link.is-on {
  background: var(--fg);
  color: var(--bg);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .22);
}

/* 06 · the marker fills as the section is read. The fill is a pseudo-element
   under the label so the type never sits on a moving edge. */
.nb--prog .seg__link.is-on { background: color-mix(in srgb, var(--fg) 9%, transparent); overflow: hidden; }
.nb--prog .seg__link.is-on::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--fg) 18%, transparent);
  transform: scaleX(var(--read, 0));
  transform-origin: left center;
}
.nb--prog .seg__link.is-on { z-index: 0; }
.nb--prog .seg__link.is-on::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--read, 0) * 100%);
  width: 1px;
  background: color-mix(in srgb, var(--fg) 45%, transparent);
}

/* ── 03 · rule under the current section ────────────────────────────────── */

.ruleset { display: flex; align-items: center; gap: var(--s-6); }
.ruleset__link {
  position: relative;
  padding-block: var(--s-2);
  font-size: var(--t-body);
  line-height: 24px;
  color: color-mix(in srgb, var(--fg) 55%, transparent);
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.ruleset__link:hover { color: var(--fg); }
.ruleset__link.is-on { color: var(--fg); }
.ruleset__link.is-on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--fg);
}

/* ── 04 · the track floats on its own ───────────────────────────────────── */

/* .nb always paints the floating bar; 04 has to undo that or it is just 01
   with different track tint — which is what made them read as duplicates. */
.nb--float {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.seg--float {
  background: color-mix(in srgb, var(--fg) 9%, transparent);
  backdrop-filter: blur(20px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 0 color-mix(in srgb, var(--fg) 12%, transparent),
    0 6px 30px 0 rgba(0, 0, 0, .10);
}

/* ── 05 · left-aligned and numbered ─────────────────────────────────────── */

.nb--left { justify-content: flex-start; gap: var(--s-12); }
.nb--left .nb__cta { margin-left: auto; }
.toc { display: flex; align-items: baseline; gap: var(--s-6); }
.toc__link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--t-body);
  line-height: 24px;
  color: color-mix(in srgb, var(--fg) 55%, transparent);
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.toc__link span {
  font-size: var(--t-micro);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--fg) 35%, transparent);
}
.toc__link:hover { color: var(--fg); }
.toc__link.is-on { color: var(--fg); }
.toc__link.is-on span { color: var(--fg); }

/* ── 07 · the bar as it was ─────────────────────────────────────────────
   An exact copy of the live .stepper before the segmented track replaced it,
   kept so the previous version is still comparable rather than only in git. */

.was { display: flex; align-items: center; gap: var(--s-2); }
.was__link {
  font-size: var(--t-body);
  line-height: 24px;
  color: color-mix(in srgb, var(--fg) 52%, transparent);
  /* the 1px trim is optical: this face's ink sits low in its line box */
  padding: calc(var(--s-2) - 1px) var(--s-4) calc(var(--s-2) + 1px);
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.was__link:hover { color: var(--fg); }
.was__link.is-on {
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 7%, transparent);
}

/* ── Narrow ─────────────────────────────────────────────────────────────── */

@media (max-width: 899px) {
  /* the tracks would run off the frame at this width; wrapping them keeps the
     comparison honest rather than showing a broken bar */
  .nb { flex-wrap: wrap; gap: var(--s-4); }
  .seg, .ruleset, .toc, .was { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar, .ruleset::-webkit-scrollbar,
  .toc::-webkit-scrollbar, .was::-webkit-scrollbar { display: none; }
  .nb--left { gap: var(--s-4); }
}