/* ─────────────────────────────────────────────────────────────
   nav-rail.css — "progress spine" left-gutter section rail for the
   explainer pages. Pairs with nav-rail.js, which generates the whole
   thing from the page's own tab buttons — there is no per-page markup.

   Ported from reference/workshop-finance/nav-rail.css and re-themed to
   Synapxe purple. Two deliberate differences from the source:

   1. The source forces `body > .container { max-width:960px !important }`
      so the gutter is always wide enough. We do NOT — narrowing every
      explainer's reading column is a visible regression to impose for a
      nav affordance. Instead the rail measures the live gutter and simply
      stays hidden when there isn't room.
   2. `body.rail-active` is set ONLY when the rail is actually on screen,
      so the tab bar keeps working on narrower windows. Never two section
      menus at once, and never zero.

   All colours come from the host page's custom properties with literal
   fallbacks, because tokenizer-explainer.html carries its own slimmer
   :root and does not load style.css.
   ───────────────────────────────────────────────────────────── */

.nav-rail { display: none; }

/* `.nr-fits` is added by JS once the gutter is measured and wide enough;
   `.is-visible` is the scroll-reveal once the hero is out of view. `left`
   is set inline by JS so the rail hugs the content column. */
.nav-rail.nr-fits {
  display: block;
  position: fixed;
  top: 92px;
  width: 168px;
  max-height: calc(100vh - 124px);
  overflow-y: auto;
  /* Below the drawer (400) and its overlay (500) so the menu always wins,
     above page content. The drawer's toggle sits at top 10–50px; the rail
     starts at 92px, so they never overlap. */
  z-index: 40;
  padding: 2px 4px 2px 2px;
  font-family: 'DM Sans', system-ui, sans-serif;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-6px);
  transition: opacity .4s var(--ease, cubic-bezier(.4,0,.2,1)),
              transform .4s var(--ease, cubic-bezier(.4,0,.2,1)),
              visibility .4s;
  scrollbar-width: thin;
}
.nav-rail.nr-fits.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

/* ── Header: the Day · Module locator. The rail owns navigation, the top
      strip owns the title + progress, so this stays deliberately lean. ── */
.nr-head { margin-bottom: 16px; }
.nr-day {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brand-bright, #A78BFA);
  display: block;
}

/* ── Stepper ── */
.nr-steps { position: relative; padding: 4px 0; }

/* The spine: a faint full-length track plus a purple fill down to the
   active node. Both are positioned by JS from measured node centres, so
   they stay correct when a label wraps to two lines. */
.nr-track, .nr-track-fill {
  position: absolute;
  left: 11px;               /* centre of the 22px node column */
  width: 2px;
  border-radius: 2px;
  transform: translateX(-50%);
  pointer-events: none;
}
.nr-track { background: var(--border, #E8E5F0); }
.nr-track-fill {
  background: linear-gradient(180deg, var(--brand, #5B21B6), var(--brand-magenta, #D946EF));
  height: 0;
  transition: height .45s var(--ease, cubic-bezier(.4,0,.2,1)),
              top .45s var(--ease, cubic-bezier(.4,0,.2,1));
}

.nr-step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 8px 8px 0;
  cursor: pointer;
  font-family: inherit;
  border-radius: 8px;
  transition: background .2s ease;
}
.nr-step:hover { background: var(--brand-glow, rgba(91,33,182,.08)); }
.nr-step:focus-visible { outline: 2px solid var(--brand, #5B21B6); outline-offset: 2px; }

.nr-node {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border, #E8E5F0);
  background: var(--bg-white, #fff);
  color: var(--text-dim, #94A3B8);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s var(--ease, cubic-bezier(.4,0,.2,1));
  margin-top: 1px;
}
.nr-label {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-muted, #64748B);
  transition: color .2s ease;
  padding-top: 2px;
}
.nr-step:hover .nr-label { color: var(--brand, #5B21B6); }
.nr-step:hover .nr-node { border-color: var(--brand-light, #7C3AED); color: var(--brand, #5B21B6); }

/* Sections already visited */
.nr-step.is-done .nr-node {
  background: var(--brand-light, #7C3AED);
  border-color: var(--brand-light, #7C3AED);
  color: #fff;
}
.nr-step.is-done .nr-label { color: var(--text-body, #334155); }

/* The section you're on */
.nr-step.is-active .nr-node {
  background: var(--brand, #5B21B6);
  border-color: var(--brand, #5B21B6);
  color: #fff;
  box-shadow: 0 0 0 4px var(--brand-glow, rgba(91,33,182,.12)), 0 2px 8px rgba(91,33,182,.28);
}
.nr-step.is-active .nr-label {
  color: var(--text, #1E1B2E);
  font-weight: 700;
}

/* ── Previous / next page, derived from the drawer's own page order ── */
.nr-nav {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #E8E5F0);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nr-nav a {
  display: block;
  text-decoration: none;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--text-muted, #64748B);
  transition: background .2s ease, color .2s ease;
  overflow: hidden;
}
.nr-nav a:hover { background: var(--brand-glow, rgba(91,33,182,.08)); color: var(--brand, #5B21B6); }
.nr-nav .nr-dir {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim, #94A3B8);
  margin-bottom: 2px;
}
.nr-nav .nr-dest {
  display: block;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────────────────────
   Top-strip repurpose. Once the rail is carrying navigation, the now
   duplicate tab buttons crossfade into a quiet breadcrumb + progress
   readout. The crumb is appended into the nav container itself; both
   .tab-nav and .section-nav are `position:sticky`, which is a positioned
   ancestor, so `inset:0` resolves against them.
   ───────────────────────────────────────────────────────────── */
.nr-crumb {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s var(--ease, cubic-bezier(.4,0,.2,1)), visibility .35s;
}
.nr-crumb-title {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--text, #1E1B2E);
  text-align: center;
  max-width: 720px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(720px, 68vw);
}
.nr-crumb-sub { display: flex; align-items: center; gap: 9px; }
.nr-cb-cur { font-size: 12px; font-weight: 700; color: var(--brand, #5B21B6); }
.nr-cb-dot { color: var(--text-dim, #94A3B8); font-size: 12px; }
.nr-cb-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted, #64748B);
}
.nr-cb-bar {
  width: 120px;
  height: 4px;
  border-radius: 3px;
  background: var(--border, #E8E5F0);
  overflow: hidden;
}
.nr-cb-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand, #5B21B6), var(--brand-magenta, #D946EF));
  transition: width .45s var(--ease, cubic-bezier(.4,0,.2,1));
}

/* Only ever true while the rail is genuinely on screen. */
body.rail-active .tab-nav button,
body.rail-active .section-nav button {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}
/* .tab-nav is `overflow-x:auto`; with the buttons faded out there is nothing
   to scroll to, and clamping it stops a stray scroll offset dragging the
   absolutely-positioned crumb sideways. */
body.rail-active .tab-nav { overflow: hidden; }
body.rail-active .nr-crumb {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .nav-rail, .nr-track-fill, .nr-node, .nr-step, .nr-label,
  .nr-crumb, .nr-cb-bar-fill { transition: none !important; }
}