/* ─────────────────────────────────────────────────────────────
   nav-rail.css — "Progress Spine" left-gutter rail for explainers
   Auto-generated by nav-rail.js from the page's existing section
   tabs + the shared side-nav order. Floats in the empty left
   gutter on wide screens; hidden below 1440px (top tabs remain).
   Uses the host page's CSS variables (with safe fallbacks) so it
   inherits light/dark theming automatically.
   ───────────────────────────────────────────────────────────── */

/* The rail is shown only when JS confirms the content column leaves enough
   left-gutter room (.nr-fits) — it measures the live content width so it
   adapts to 900 / 960 / 1060px pages. `left` is set inline by JS to hug the
   content column. `.is-visible` handles the scroll-reveal. */
/* Normalize the top-level content column across rail pages so the rail
   appears at a consistent window width everywhere (some pages set a wider
   .container inline / via style.css). Scoped to body's direct .container
   child, so nested full-width containers are untouched. Only loads on
   rail-enabled pages. */
body > .container { max-width: 960px !important; }

.nav-rail { display: none; }
.nav-rail.nr-fits {
  display: block;
  position: fixed;
  top: 96px;
  width: 176px;
  max-height: calc(100vh - 128px);
  overflow-y: auto;
  z-index: 40;
  padding: 2px 4px 2px 2px;
  font-family: 'Open 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: day overline + module title + progress count ── */
.nr-head { margin-bottom: 18px; }
.nr-day {
  font-family: 'JetBrains Mono', ui-monospace, Monaco, Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim, #94A3B8);
  display: block;
  margin-bottom: 6px;
}
.nr-title {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text, #0F172A);
  letter-spacing: -.01em;
}
.nr-count {
  font-family: 'JetBrains Mono', ui-monospace, Monaco, Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted, #64748B);
  margin-top: 8px;
  display: inline-block;
}

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

/* the spine: a faint full-length track + an emerald fill to the active node */
.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, #E2E8F0); }
.nr-track-fill {
  background: linear-gradient(180deg, var(--green, #059669), var(--green-light, #10B981));
  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: 12px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 9px 8px 9px 0;
  cursor: pointer;
  font-family: inherit;
  border-radius: 8px;
  transition: background .2s ease;
}
.nr-step:hover { background: var(--emerald-50, #ECFDF5); }
.nr-step:focus-visible { outline: 2px solid var(--green, #059669); outline-offset: 2px; }

.nr-node {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border, #E2E8F0);
  background: var(--bg-white, #fff);
  color: var(--text-dim, #94A3B8);
  font-family: 'JetBrains Mono', ui-monospace, Monaco, Menlo, Consolas, monospace;
  font-size: 11px;
  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: 13px;
  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(--green, #059669); }
.nr-step:hover .nr-node { border-color: var(--green-light, #10B981); color: var(--green, #059669); }

/* completed steps */
.nr-step.is-done .nr-node {
  background: var(--green, #059669);
  border-color: var(--green, #059669);
  color: #fff;
}
.nr-step.is-done .nr-label { color: var(--text-body, #334155); }

/* active step */
.nr-step.is-active .nr-node {
  background: var(--green, #059669);
  border-color: var(--green, #059669);
  color: #fff;
  box-shadow: 0 0 0 4px var(--green-glow, rgba(5,150,105,.12)), 0 2px 8px rgba(5,150,105,.25);
}
.nr-step.is-active .nr-label {
  color: var(--text, #0F172A);
  font-weight: 700;
}

/* ── Prev / Next footer ── */
.nr-nav {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border, #E2E8F0);
  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(--emerald-50, #ECFDF5); color: var(--green, #059669); }
.nr-nav .nr-dir {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, Monaco, Menlo, Consolas, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim, #94A3B8);
  margin-bottom: 2px;
}
.nr-nav .nr-dest {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* ─────────────────────────────────────────────────────────────
   Top-bar repurpose: when the rail takes over on wide screens, the
   duplicate section tabs crossfade into a quiet breadcrumb + progress
   strip (Day › Module › current section · n/total). One prominent
   section menu at a time — never two.
   ───────────────────────────────────────────────────────────── */
.nr-crumb {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  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: 'Open Sans', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--text, #0F172A);
  text-align: center;
  max-width: 720px;
}
.nr-crumb-sub { display: flex; align-items: center; gap: 9px; }
.nr-cb-cur { font-size: 12.5px; font-weight: 600; color: var(--green, #059669); }
.nr-cb-dot { color: var(--text-dim, #94A3B8); font-size: 12px; }
.nr-cb-count {
  font-family: 'JetBrains Mono', ui-monospace, Monaco, Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted, #64748B);
}
.nr-cb-bar {
  width: 130px;
  height: 4px;
  border-radius: 3px;
  background: var(--border, #E2E8F0);
  overflow: hidden;
}
.nr-cb-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--green, #059669), var(--green-light, #10B981));
  transition: width .45s var(--ease, cubic-bezier(.4,0,.2,1));
}

/* When the rail is active (JS sets body.rail-active only when the rail
   actually shows), the duplicate section tabs give way to the breadcrumb. */
body.rail-active .section-nav button {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}
body.rail-active .nr-crumb {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

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