/* ========================================================================
   ChapterNavigator — card-stacked study sidebar (light + dark).
   Loads AFTER theme-dark.css / theme-light.css so it owns the navigator
   skin. Tokens are scoped to the rail + drawer; theme switching rides the
   existing html.theme-light / html.theme-dark mechanism.

   Contract kept intact for JS in noteviewer-sidebar.js / theme-toggle.js:
   #nv-rail, #nv-rail-nav, #nv-rail-trigger, #nv-rail-backdrop,
   #nv-rail-drawer, #nv-rail-drawer-close, #theme-toggle,
   .sidebar-toggle/.open, .sidebar-children/.collapsed, .sidebar-link/.is-active.
   (The scroll-progress card was removed 2026-06-25.)
   ======================================================================== */

/* ── Frame width (spec: 340px, floor 300px) ──────────────────────────────
   Scoped on .nv-canvas as well as :root because a custom property set on a
   closer ancestor wins — this is the operative width knob for the layout
   docking math in noteviewer-left-rail.css. */
:root,
.nv-canvas:has(.nv-rail) {
  --nv-rail-w: 290px;
}

@media (max-width: 1240px) {
  :root,
  .nv-canvas:has(.nv-rail) {
    --nv-rail-w: 280px;
  }
}

@media (min-width: 861px) and (max-width: 1080px) {
  :root,
  .nv-canvas:has(.nv-rail) {
    --nv-rail-w: 270px;
  }
}

/* ── Tokens: light ─────────────────────────────────────────────────────── */
html.theme-light .nv-rail,
html.theme-light .nv-rail-drawer {
  --cn-bg-page: #EDEFF3;
  --cn-bg-card: #FFFFFF;
  --cn-bg-card-nested: #FFFFFF;
  --cn-border-subtle: rgba(15, 23, 42, 0.06);
  --cn-border-card: rgba(15, 23, 42, 0.08);
  --cn-text-primary: #1E293B;
  --cn-text-secondary: #64748B;
  --cn-text-muted: #94A3B8;
  --cn-ring-from: #1D4ED8;
  --cn-ring-to: #60A5FA;
  --cn-bar-fill: #2563EB;
  --cn-track: #E5E9F0;
  --cn-green: #059669;
  --cn-green-text: #047857;
  --cn-green-bg: #ECFDF5;
  --cn-green-border: #A7F3D0;
  /* spec premiumFg #D97706 fails AA (2.9:1) on #FEF6E0 at 12px — nudged to
     amber-700 for 4.6:1, same hue family */
  --cn-premium-fg: #B45309;
  --cn-premium-bg: #FEF6E0;
  --cn-premium-border: #FBD888;
  --cn-lock: #94A3B8;
  --cn-timeline-line: #E2E8F0;
  --cn-node-idle-ring: #CBD5E1;
  --cn-node-idle-fill: #FFFFFF;
  --cn-node-done-fill: #94A3B8;
  --cn-node-active-fill: #3B52D0;
  --cn-node-active-ring: rgba(59, 82, 208, 0.18);
  --cn-active-row-border: transparent;
  --cn-active-bg: rgba(59, 82, 208, 0.07);
  --cn-active-text: #2F43BE;
  --cn-btn-flash-fg: #2563EB;
  --cn-btn-flash-border: #BFD7FF;
  /* spec btnQuestFg #059669 is 3.8:1 on white at 15px — nudged to the spec's
     own brandGreenText #047857 for 5.5:1 */
  --cn-btn-quest-fg: #2563EB;
  --cn-btn-quest-border: #BFD7FF;
  --cn-row-hover: rgba(15, 23, 42, 0.03);
  --cn-focus: #2563EB;
  --cn-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --cn-glow-node: 0 0 0 0 transparent;
  /* labels sit on bgPage, where textSecondary #64748B is only ~4.1:1 —
     nudged darker for AA at 11-13px */
  --cn-text-label: #5B6779;
}

/* ── Tokens: dark ──────────────────────────────────────────────────────── */
html.theme-dark .nv-rail,
html.theme-dark .nv-rail-drawer {
  --cn-bg-page: #0B0F1A;
  --cn-bg-card: rgba(255, 255, 255, 0.02);
  --cn-bg-card-nested: #0B121B;
  --cn-border-subtle: rgba(148, 163, 184, 0.10);
  --cn-border-card: rgba(148, 163, 184, 0.08);
  --cn-text-primary: #F1F5F9;
  --cn-text-secondary: #94A3B8;
  --cn-text-muted: #64748B;
  --cn-ring-from: #3B82F6;
  --cn-ring-to: #60A5FA; /* recolored from indigo to blue (royal-blue lock) */
  --cn-bar-fill: #3B82F6;
  --cn-track: rgba(255, 255, 255, 0.08);
  --cn-green: #34D399;
  --cn-green-text: #6EE7B7;
  --cn-green-bg: rgba(16, 185, 129, 0.12);
  --cn-green-border: rgba(52, 211, 153, 0.40);
  --cn-premium-fg: #FBBF24;
  --cn-premium-bg: rgba(251, 191, 36, 0.10);
  --cn-premium-border: rgba(251, 191, 36, 0.30);
  --cn-lock: #64748B;
  --cn-timeline-line: #1E2A38;
  --cn-node-idle-ring: #3A4757;
  --cn-node-idle-fill: #0E1620;
  --cn-node-done-fill: #475569;
  --cn-node-active-fill: #5B8CFF;
  --cn-node-active-ring: rgba(91, 140, 255, 0.28);
  --cn-active-row-border: rgba(91, 140, 255, 0.32);
  --cn-active-bg: rgba(91, 140, 255, 0.13);
  --cn-active-text: #84B6FF;
  --cn-btn-flash-fg: #60A5FA;
  --cn-btn-flash-border: rgba(96, 165, 250, 0.30);
  --cn-btn-quest-fg: #60A5FA;
  --cn-btn-quest-border: rgba(96, 165, 250, 0.30);
  --cn-row-hover: rgba(255, 255, 255, 0.04);
  --cn-focus: #22D3EE;
  --cn-text-label: #94A3B8;
  /* border-as-elevation: no drop shadows in dark */
  --cn-shadow-card: none;
  --cn-glow-node: 0 0 10px rgba(91, 140, 255, 0.55);
}

/* ── Premium badge + lock reused on the Notes Overview index ───────────────
   topic_landing.html shares the rail's .cn-badge / .cn-lock markup (via the
   noteviewer/cn_lock_badge.html partial) so locked chapters there match the
   sidebar 1:1. Those global rules read tokens the rail scopes to .nv-rail;
   re-expose the IDENTICAL values on .tlo-page (no new colours) so light, dark
   and contrast all match the sidebar. */
html.theme-light .tlo-page {
  --cn-premium-fg: #B45309;
  --cn-premium-bg: #FEF6E0;
  --cn-premium-border: #FBD888;
  --cn-lock: #94A3B8;
  --cn-text-secondary: #64748B;
}

html.theme-dark .tlo-page {
  --cn-premium-fg: #FBBF24;
  --cn-premium-bg: rgba(251, 191, 36, 0.10);
  --cn-premium-border: rgba(251, 191, 36, 0.30);
  --cn-lock: #64748B;
  --cn-text-secondary: #94A3B8;
}

/* ── Tier accent — the premium flag drives ring, bar, banner and focus.
   Non-premium = blue, premium (.cn-premium on the rail/drawer) = cyan/teal. */
html.theme-light .nv-rail,
html.theme-light .nv-rail-drawer {
  --cn-accent: #3B52D0;
  --cn-focus: #3B52D0;
  --cn-tier-bg: rgba(59, 82, 208, 0.07);
  --cn-tier-bg-hover: rgba(59, 82, 208, 0.13);
  --cn-tier-border: rgba(59, 82, 208, 0.28);
  --cn-tier-title: #2F43BE;
}

html.theme-light .nv-rail.cn-premium,
html.theme-light .nv-rail-drawer.cn-premium {
  --cn-accent: #3B52D0;
  --cn-focus: #3B52D0;
  --cn-ring-from: #3B52D0;
  --cn-ring-to: #5B8CFF;
  --cn-bar-fill: #3B52D0;
  --cn-tier-bg: rgba(59, 82, 208, 0.07);
  --cn-tier-bg-hover: rgba(59, 82, 208, 0.13);
  --cn-tier-border: rgba(59, 82, 208, 0.28);
  --cn-tier-title: #2F43BE;
}

html.theme-dark .nv-rail,
html.theme-dark .nv-rail-drawer {
  --cn-accent: #5B8CFF;
  --cn-focus: #5B8CFF;
  --cn-tier-bg: rgba(91, 140, 255, 0.10);
  --cn-tier-bg-hover: rgba(91, 140, 255, 0.16);
  --cn-tier-border: rgba(91, 140, 255, 0.24);
  --cn-tier-title: #84B6FF;
}

html.theme-dark .nv-rail.cn-premium,
html.theme-dark .nv-rail-drawer.cn-premium {
  --cn-accent: #5B8CFF;
  --cn-focus: #5B8CFF;
  --cn-ring-from: #5B8CFF;
  --cn-ring-to: #84B6FF;
  --cn-bar-fill: #5B8CFF;
  --cn-tier-bg: rgba(91, 140, 255, 0.10);
  --cn-tier-bg-hover: rgba(91, 140, 255, 0.16);
  --cn-tier-border: rgba(91, 140, 255, 0.24);
  --cn-tier-title: #84B6FF;
}

/* ── Rail frame (structure: width/sticky come from noteviewer-left-rail) ── */
.nv-rail,
.nv-rail-drawer {
  /* system sans for labels/numbers + the exam-paper serif for titles, so the
     rail reads as the same product as the Notes/TQ/MCQ pages */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --cn-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  color: var(--cn-text-primary);
}

.nv-rail *,
.nv-rail *::before,
.nv-rail *::after,
.nv-rail-drawer *,
.nv-rail-drawer *::before,
.nv-rail-drawer *::after {
  box-sizing: border-box;
}

html.theme-light .nv-rail,
html.theme-dark .nv-rail {
  background: var(--cn-bg-page);
  border-right: 1px solid var(--cn-border-subtle);
  box-shadow: none;
}

.cn-shell {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

/* ── Tier status banner (accent follows the premium flag) ─────────────── */
.cn-tier {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 12px 14px;
  border: 1px solid var(--cn-tier-border);
  border-radius: 12px;
  background: var(--cn-tier-bg);
  text-decoration: none;
  transition: background-color 140ms ease;
}

.cn-tier-icon {
  flex: 0 0 auto;
  color: var(--cn-tier-title);
}

.cn-tier-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cn-tier-title);
  white-space: nowrap;
}

.cn-tier-sub {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--cn-text-secondary);
  text-align: right;
}

/* AA: tier sub-line on the light tier pill (#dbe7ea) -- was --cn-text-secondary 3.77:1 */
html.theme-light .cn-tier-sub { color: #475569; }

@media (hover: hover) {
a.cn-tier:hover {
  background: var(--cn-tier-bg-hover);
}
}

a.cn-tier:focus-visible {
  outline: 2px solid var(--cn-focus);
  outline-offset: 2px;
}

.nv-rail-drawer .cn-tier {
  margin-bottom: 12px;
}

/* ── Section label ─────────────────────────────────────────────────────── */
.cn-section-label {
  margin: 0 0 -4px 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--cn-text-label);
}

/* ── Scroll region + chapter list ──────────────────────────────────────── */
.cn-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--cn-node-idle-ring) transparent;
  padding-bottom: 2px;
}

.cn-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Chapter card ──────────────────────────────────────────────────────── */
.nv-rail .sidebar-tree .cn-chapter,
.nv-rail-drawer .sidebar-tree .cn-chapter {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}
/* flat tree: a hairline separates chapters instead of per-card borders */
.nv-rail .sidebar-tree .cn-chapter + .cn-chapter,
.nv-rail-drawer .sidebar-tree .cn-chapter + .cn-chapter {
  border-top: 1px solid var(--cn-border-subtle);
}

.nv-rail .sidebar-toggle.cn-chapter-head,
.nv-rail-drawer .sidebar-toggle.cn-chapter-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cn-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.nv-rail .sidebar-toggle.cn-chapter-head::before,
.nv-rail .sidebar-toggle.cn-chapter-head::after,
.nv-rail-drawer .sidebar-toggle.cn-chapter-head::before,
.nv-rail-drawer .sidebar-toggle.cn-chapter-head::after {
  content: none;
}

@media (hover: hover) {
.nv-rail .sidebar-toggle.cn-chapter-head:hover,
.nv-rail-drawer .sidebar-toggle.cn-chapter-head:hover {
  background: var(--cn-row-hover);
}
}

.nv-rail .sidebar-toggle.cn-chapter-head:focus-visible,
.nv-rail-drawer .sidebar-toggle.cn-chapter-head:focus-visible {
  outline: 2px solid var(--cn-focus);
  outline-offset: -2px;
}

.cn-chip {
  width: 28px;
  height: 28px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.cn-chip svg {
  width: 16px;
  height: 16px;
}

.cn-glyph {
  display: block;
}

/* Numbered chip: chapters whose glyph would be a repeating subject/book
   fallback show their number here instead (set in sidebar_node.html). Colour +
   tint come from the .cn-tint-N class; bold >=14px clears the tint's contrast. */
.cn-chip--num {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em;
}

.cn-chapter-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--cn-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: var(--cn-text-primary);
  /* never truncate — wrap to as many lines as the title needs, in any
     subject; the trailing cluster (flex:0 0 auto) can't steal its width */
  white-space: normal;
  overflow: visible;
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: balance;
}

/* At the 300px rail floor (861–1080px window) the longest single word
   ("Communication") is wider than the title column; a small type nudge keeps
   it wrapping at spaces instead of mid-word. Full 15px stays at 320/340px. */
@media (min-width: 861px) and (max-width: 1080px) {
  .nv-rail .cn-chapter-title {
    font-size: 0.875rem;
  }
}

/* "{number} – " quiet index prefix: muted secondary tone (same as lesson
   numbers), lighter than the bold name; the number + en-dash stay together
   (no orphaned dash) while the name wraps freely after it. */
.cn-chapter-num {
  flex: 0 0 auto;
  min-width: 14px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--cn-text-secondary);
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

/* "Premium" pill — locked rows only (never rendered for premium users).
   Kept deliberately slim: every px here is stolen from the title column at
   the 300-340px rail, and long words must never break mid-word. */
.cn-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border: 1px solid var(--cn-premium-border);
  border-radius: 6px;
  background: var(--cn-premium-bg);
  color: var(--cn-premium-fg);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.cn-badge-icon {
  display: block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
}

.cn-lock {
  flex: 0 0 auto;
  margin-left: -2px;
  color: var(--cn-lock);
}

/* In the narrow rail the amber "Premium" pill (flex:0 0 auto, ~60px that can't
   shrink) starves the flex title column, crushing long chapter names into
   mid-word breaks ("Quantit ative…"). The grey lock + dimmed title already
   signal the locked/premium state, so hide the pill HERE — locked rows then get
   the same title width as a premium user's unlocked rows, so logged-out and
   logged-in read identically. The roomy Notes-Overview index (.tlo-page) keeps
   the full pill. */
.nv-rail .cn-badge,
.nv-rail-drawer .cn-badge {
  display: none;
}

/* Locked rows: dimmed title, lock replaces the chevron. */
.cn-chapter--locked .cn-chapter-title,
.cn-subgroup--locked .cn-subgroup-title {
  color: var(--cn-text-secondary);
}

.nv-rail .cn-chapter--locked .cn-chapter-head .cn-chevron,
.nv-rail-drawer .cn-chapter--locked .cn-chapter-head .cn-chevron {
  display: none;
}

.cn-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  margin-left: -2px;
  color: var(--cn-text-muted);
  transition: transform 180ms ease;
}

.cn-chevron svg {
  width: 16px;
  height: 16px;
}

.nv-rail .sidebar-toggle.open .cn-chevron,
.nv-rail-drawer .sidebar-toggle.open .cn-chevron {
  transform: rotate(-90deg);
}

/* ── Chip tints (slug-keyed icon map; book = fallback) ─────────────────── */
html.theme-light .nv-rail .cn-chip--flask,
html.theme-light .nv-rail-drawer .cn-chip--flask,
html.theme-light .tlo-page .cn-chip--flask { background: #FFEDD5; color: #EA580C; }
html.theme-light .nv-rail .cn-chip--leaf,
html.theme-light .nv-rail-drawer .cn-chip--leaf,
html.theme-light .tlo-page .cn-chip--leaf { background: #DCFCE7; color: #16A34A; }
html.theme-light .nv-rail .cn-chip--microbe,
html.theme-light .nv-rail-drawer .cn-chip--microbe,
html.theme-light .tlo-page .cn-chip--microbe { background: #E0F2FE; color: #0369A1; }
html.theme-light .nv-rail .cn-chip--bolt,
html.theme-light .nv-rail-drawer .cn-chip--bolt,
html.theme-light .tlo-page .cn-chip--bolt { background: #DBEAFE; color: #2563EB; }
html.theme-light .nv-rail .cn-chip--chat,
html.theme-light .nv-rail-drawer .cn-chip--chat,
html.theme-light .tlo-page .cn-chip--chat { background: #E0F2FE; color: #0369A1; } /* recolored from purple to sky (royal-blue lock) */
html.theme-light .nv-rail .cn-chip--dna,
html.theme-light .nv-rail-drawer .cn-chip--dna,
html.theme-light .tlo-page .cn-chip--dna { background: #FEF3C7; color: #D97706; }
html.theme-light .nv-rail .cn-chip--dna-helix,
html.theme-light .nv-rail-drawer .cn-chip--dna-helix,
html.theme-light .tlo-page .cn-chip--dna-helix { background: #CCFBF1; color: #0D9488; }
html.theme-light .nv-rail .cn-chip--mountain,
html.theme-light .nv-rail-drawer .cn-chip--mountain,
html.theme-light .tlo-page .cn-chip--mountain { background: #DBEAFE; color: #1D4ED8; } /* recolored from indigo to royal blue */
html.theme-light .nv-rail .cn-chip--book,
html.theme-light .nv-rail-drawer .cn-chip--book,
html.theme-light .tlo-page .cn-chip--book { background: #E2E8F0; color: #475569; }

html.theme-dark .nv-rail .cn-chip--flask,
html.theme-dark .nv-rail-drawer .cn-chip--flask,
html.theme-dark .tlo-page .cn-chip--flask { background: rgba(249, 115, 22, 0.16); color: #FB923C; }
html.theme-dark .nv-rail .cn-chip--leaf,
html.theme-dark .nv-rail-drawer .cn-chip--leaf,
html.theme-dark .tlo-page .cn-chip--leaf { background: rgba(34, 197, 94, 0.16); color: #4ADE80; }
html.theme-dark .nv-rail .cn-chip--microbe,
html.theme-dark .nv-rail-drawer .cn-chip--microbe,
html.theme-dark .tlo-page .cn-chip--microbe { background: rgba(56, 189, 248, 0.14); color: #38BDF8; }
html.theme-dark .nv-rail .cn-chip--bolt,
html.theme-dark .nv-rail-drawer .cn-chip--bolt,
html.theme-dark .tlo-page .cn-chip--bolt { background: rgba(59, 130, 246, 0.16); color: #60A5FA; }
html.theme-dark .nv-rail .cn-chip--chat,
html.theme-dark .nv-rail-drawer .cn-chip--chat,
html.theme-dark .tlo-page .cn-chip--chat { background: rgba(56, 189, 248, 0.16); color: #38BDF8; } /* recolored from purple to sky */
html.theme-dark .nv-rail .cn-chip--dna,
html.theme-dark .nv-rail-drawer .cn-chip--dna,
html.theme-dark .tlo-page .cn-chip--dna { background: rgba(217, 119, 6, 0.16); color: #FBBF24; }
html.theme-dark .nv-rail .cn-chip--dna-helix,
html.theme-dark .nv-rail-drawer .cn-chip--dna-helix,
html.theme-dark .tlo-page .cn-chip--dna-helix { background: rgba(13, 148, 136, 0.16); color: #2DD4BF; }
html.theme-dark .nv-rail .cn-chip--mountain,
html.theme-dark .nv-rail-drawer .cn-chip--mountain,
html.theme-dark .tlo-page .cn-chip--mountain { background: rgba(59, 130, 246, 0.16); color: #60A5FA; } /* recolored from indigo to blue */
html.theme-dark .nv-rail .cn-chip--book,
html.theme-dark .nv-rail-drawer .cn-chip--book,
html.theme-dark .tlo-page .cn-chip--book { background: rgba(148, 163, 184, 0.16); color: #94A3B8; }

/* ── Deterministic chip tints (cn-tint-0..9) ───────────────────────────────
   Applied to glyphs resolved by keyword/subject/fallback (layers b/c/d).
   hash(slug) -> index, so the same chapter is always the same colour and
   adjacent same-glyph chapters still read as distinct chips. Light fg is
   700-level on 100-level bg (>=4.5:1); dark fg is 400-level on a 0.16 tint. */
html.theme-light .nv-rail .cn-tint-0,
html.theme-light .nv-rail-drawer .cn-tint-0,
html.theme-light .tlo-page .cn-tint-0 { background: #FFEDD5; color: #C2410C; }
html.theme-light .nv-rail .cn-tint-1,
html.theme-light .nv-rail-drawer .cn-tint-1,
html.theme-light .tlo-page .cn-tint-1 { background: #DCFCE7; color: #15803D; }
html.theme-light .nv-rail .cn-tint-2,
html.theme-light .nv-rail-drawer .cn-tint-2,
html.theme-light .tlo-page .cn-tint-2 { background: #EBF0FF; color: #3B52D0; }
html.theme-light .nv-rail .cn-tint-3,
html.theme-light .nv-rail-drawer .cn-tint-3,
html.theme-light .tlo-page .cn-tint-3 { background: #DBEAFE; color: #1D4ED8; }
html.theme-light .nv-rail .cn-tint-4,
html.theme-light .nv-rail-drawer .cn-tint-4,
html.theme-light .tlo-page .cn-tint-4 { background: #FCE7F3; color: #BE185D; }
html.theme-light .nv-rail .cn-tint-5,
html.theme-light .nv-rail-drawer .cn-tint-5,
html.theme-light .tlo-page .cn-tint-5 { background: #FEF3C7; color: #B45309; }
html.theme-light .nv-rail .cn-tint-6,
html.theme-light .nv-rail-drawer .cn-tint-6,
html.theme-light .tlo-page .cn-tint-6 { background: #CCFBF1; color: #0F766E; }
html.theme-light .nv-rail .cn-tint-7,
html.theme-light .nv-rail-drawer .cn-tint-7,
html.theme-light .tlo-page .cn-tint-7 { background: #CFFAFE; color: #0E7490; }
html.theme-light .nv-rail .cn-tint-8,
html.theme-light .nv-rail-drawer .cn-tint-8,
html.theme-light .tlo-page .cn-tint-8 { background: #FFE4E6; color: #BE123C; }
html.theme-light .nv-rail .cn-tint-9,
html.theme-light .nv-rail-drawer .cn-tint-9,
html.theme-light .tlo-page .cn-tint-9 { background: #E2E8F0; color: #475569; }

html.theme-dark .nv-rail .cn-tint-0,
html.theme-dark .nv-rail-drawer .cn-tint-0,
html.theme-dark .tlo-page .cn-tint-0 { background: rgba(249, 115, 22, 0.16); color: #FB923C; }
html.theme-dark .nv-rail .cn-tint-1,
html.theme-dark .nv-rail-drawer .cn-tint-1,
html.theme-dark .tlo-page .cn-tint-1 { background: rgba(34, 197, 94, 0.16); color: #4ADE80; }
html.theme-dark .nv-rail .cn-tint-2,
html.theme-dark .nv-rail-drawer .cn-tint-2,
html.theme-dark .tlo-page .cn-tint-2 { background: rgba(91, 140, 255, 0.16); color: #84B6FF; }
html.theme-dark .nv-rail .cn-tint-3,
html.theme-dark .nv-rail-drawer .cn-tint-3,
html.theme-dark .tlo-page .cn-tint-3 { background: rgba(59, 130, 246, 0.16); color: #60A5FA; }
html.theme-dark .nv-rail .cn-tint-4,
html.theme-dark .nv-rail-drawer .cn-tint-4,
html.theme-dark .tlo-page .cn-tint-4 { background: rgba(236, 72, 153, 0.16); color: #F472B6; }
html.theme-dark .nv-rail .cn-tint-5,
html.theme-dark .nv-rail-drawer .cn-tint-5,
html.theme-dark .tlo-page .cn-tint-5 { background: rgba(217, 119, 6, 0.16); color: #FBBF24; }
html.theme-dark .nv-rail .cn-tint-6,
html.theme-dark .nv-rail-drawer .cn-tint-6,
html.theme-dark .tlo-page .cn-tint-6 { background: rgba(20, 184, 166, 0.16); color: #2DD4BF; }
html.theme-dark .nv-rail .cn-tint-7,
html.theme-dark .nv-rail-drawer .cn-tint-7,
html.theme-dark .tlo-page .cn-tint-7 { background: rgba(6, 182, 212, 0.16); color: #22D3EE; }
html.theme-dark .nv-rail .cn-tint-8,
html.theme-dark .nv-rail-drawer .cn-tint-8,
html.theme-dark .tlo-page .cn-tint-8 { background: rgba(244, 63, 94, 0.16); color: #FB7185; }
html.theme-dark .nv-rail .cn-tint-9,
html.theme-dark .nv-rail-drawer .cn-tint-9,
html.theme-dark .tlo-page .cn-tint-9 { background: rgba(148, 163, 184, 0.16); color: #94A3B8; }

/* Exam-paper cohesion: the rail uses ONE quiet periwinkle chip tint instead of
   the rainbow per-slug palette above (which still serves the .tlo-page index).
   This retires the green/teal chips so the rail matches the Notes/TQ/MCQ skin.
   Scoped to .nv-rail/.nv-rail-drawer; .tlo-page keeps its varied tints. */
html.theme-dark .nv-rail .cn-chip,
html.theme-dark .nv-rail-drawer .cn-chip {
  background: rgba(91, 140, 255, 0.13);
  color: #84B6FF;
}
html.theme-light .nv-rail .cn-chip,
html.theme-light .nv-rail-drawer .cn-chip {
  background: rgba(59, 82, 208, 0.08);
  color: #3B52D0;
}

/* ── Expand / collapse (height animates; .collapsed is the JS contract) ── */
.nv-rail .sidebar-children,
.nv-rail-drawer .sidebar-children {
  display: grid;
  grid-template-rows: 1fr;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  transition: grid-template-rows 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nv-rail .sidebar-children.collapsed,
.nv-rail-drawer .sidebar-children.collapsed {
  display: grid;
  grid-template-rows: 0fr;
}

.cn-timeline {
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding: 2px 14px 12px 16px;
}

.nv-rail .sidebar-children.collapsed > .cn-timeline,
.nv-rail-drawer .sidebar-children.collapsed > .cn-timeline {
  visibility: hidden;
  transition: visibility 0s 200ms;
}

.cn-timeline::before {
  content: "";
  position: absolute;
  /* centred on the lesson dots: a dot sits at 37px from the timeline edge
     (.cn-lesson padding-box 16px + .cn-node centre 21px), so the 2px line's
     centre must land there too — left 36 + width/2 = 37. */
  left: 36px;
  top: 0;
  bottom: 22px;
  width: 2px;
  background: var(--cn-timeline-line);
}

.cn-timeline--nested {
  padding: 0 0 4px 12px;
}

.cn-timeline--nested::before {
  content: none;
}

/* ── Lesson rows ───────────────────────────────────────────────────────── */
.cn-lesson-row {
  margin: 0;
}

.nv-rail .sidebar-link.cn-lesson,
.nv-rail-drawer .sidebar-link.cn-lesson {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: 10px 10px 10px 40px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--cn-text-primary);
  font: inherit;
  text-decoration: none;
  transition: background-color 140ms ease;
}

.nv-rail .sidebar-link.cn-lesson::before,
.nv-rail .sidebar-link.cn-lesson::after,
.nv-rail-drawer .sidebar-link.cn-lesson::before,
.nv-rail-drawer .sidebar-link.cn-lesson::after {
  content: none;
}

@media (hover: hover) {
.nv-rail .sidebar-link.cn-lesson:hover,
.nv-rail-drawer .sidebar-link.cn-lesson:hover {
  background: var(--cn-row-hover);
}
}

.nv-rail .sidebar-link.cn-lesson:focus-visible,
.nv-rail-drawer .sidebar-link.cn-lesson:focus-visible {
  outline: 2px solid var(--cn-focus);
  outline-offset: -2px;
}

.cn-node {
  position: absolute;
  left: 20px;
  top: 20px;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  /* a quiet wayfinding bullet, not an empty "step to complete" ring */
  background: var(--cn-node-idle-ring);
  border: 0;
  z-index: 1;
}

.cn-lesson-num {
  flex: none;
  width: 34px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--cn-text-secondary);
  font-variant-numeric: tabular-nums;
}

.nv-rail .sidebar-link .cn-lesson-title,
.nv-rail-drawer .sidebar-link .cn-lesson-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--cn-serif);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--cn-text-primary);
  /* never truncate — wrap fully; the optional lesson lock is flex:0 0 auto */
  white-space: normal;
  overflow: visible;
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: balance;
}

.cn-lock--lesson {
  margin: 3px 0 0 8px;
}

/* done state (no completion data is wired today; kept for parity with the
   design system so future data lights it up without CSS work) */
.nv-rail .sidebar-link.is-done .cn-node,
.nv-rail-drawer .sidebar-link.is-done .cn-node {
  background: var(--cn-node-done-fill);
  border-color: var(--cn-node-done-fill);
}

/* active lesson */
.nv-rail .sidebar-link.cn-lesson.is-active,
.nv-rail-drawer .sidebar-link.cn-lesson.is-active {
  background: var(--cn-active-bg);
  border-color: var(--cn-active-row-border);
}

@media (hover: hover) {
.nv-rail .sidebar-link.cn-lesson.is-active:hover,
.nv-rail-drawer .sidebar-link.cn-lesson.is-active:hover {
  background: var(--cn-active-bg);
}
}

.nv-rail .sidebar-link.cn-lesson.is-active .cn-lesson-num,
.nv-rail-drawer .sidebar-link.cn-lesson.is-active .cn-lesson-num {
  color: var(--cn-active-text);
  font-weight: 600;
}

.nv-rail .sidebar-link.cn-lesson.is-active .cn-lesson-title,
.nv-rail-drawer .sidebar-link.cn-lesson.is-active .cn-lesson-title {
  color: var(--cn-active-text);
  font-weight: 600;
}

.nv-rail .sidebar-link.cn-lesson.is-active .cn-node,
.nv-rail-drawer .sidebar-link.cn-lesson.is-active .cn-node {
  width: 16px;
  height: 16px;
  border: 0;
  background: var(--cn-node-active-fill);
  box-shadow: 0 0 0 3px var(--cn-node-active-ring), var(--cn-glow-node);
}

/* ── Nested sub-groups (3+ level content; rare) ────────────────────────── */
.cn-subgroup {
  margin: 2px 0;
}

.nv-rail .sidebar-toggle.cn-subgroup-head,
.nv-rail-drawer .sidebar-toggle.cn-subgroup-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 8px 10px 8px 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--cn-text-primary);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease;
}

@media (hover: hover) {
.nv-rail .sidebar-toggle.cn-subgroup-head:hover,
.nv-rail-drawer .sidebar-toggle.cn-subgroup-head:hover {
  background: var(--cn-row-hover);
}
}

.nv-rail .sidebar-toggle.cn-subgroup-head:focus-visible,
.nv-rail-drawer .sidebar-toggle.cn-subgroup-head:focus-visible {
  outline: 2px solid var(--cn-focus);
  outline-offset: -2px;
}

.cn-subgroup-title {
  flex: 1;
  min-width: 0;
}

/* ── Action buttons ────────────────────────────────────────────────────── */
.cn-actions {
  display: flex;
  gap: 10px;
  flex: none;
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--cn-border-card);
}

.nv-rail .cn-btn,
.nv-rail-drawer .cn-btn {
  flex: 1;
  min-width: 0;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--cn-border-card);
  border-radius: 12px;
  background: var(--cn-bg-card);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.nv-rail .cn-btn--flashcards,
.nv-rail .cn-btn--notes,
.nv-rail-drawer .cn-btn--flashcards,
.nv-rail-drawer .cn-btn--notes {
  color: var(--cn-btn-flash-fg);
  border-color: var(--cn-btn-flash-border);
}

.nv-rail .cn-btn--questions,
.nv-rail-drawer .cn-btn--questions {
  color: var(--cn-btn-quest-fg);
  border-color: var(--cn-btn-quest-border);
}

@media (hover: hover) {
.nv-rail .cn-btn:hover,
.nv-rail-drawer .cn-btn:hover {
  background: linear-gradient(var(--cn-row-hover), var(--cn-row-hover)), var(--cn-bg-card);
}
}

.nv-rail .cn-btn:focus-visible,
.nv-rail-drawer .cn-btn:focus-visible {
  outline: 2px solid var(--cn-focus);
  outline-offset: 2px;
}

.cn-btn-icon {
  flex: none;
}

/* ── "Practice whole chapter" row — last item in a chapter's timeline ──── */
.cn-practice-row {
  margin: 4px 0 2px;
}

.nv-rail .sidebar-link.cn-practice-all,
.nv-rail-drawer .sidebar-link.cn-practice-all {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 10px 8px 38px;
  border: 1px solid var(--cn-border-subtle);
  border-radius: 12px;
  background: transparent;
  color: var(--cn-btn-quest-fg);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease;
}

@media (hover: hover) {
.nv-rail .sidebar-link.cn-practice-all:hover,
.nv-rail-drawer .sidebar-link.cn-practice-all:hover {
  background: var(--cn-row-hover);
  border-color: var(--cn-border-card);
}
}

.nv-rail .sidebar-link.cn-practice-all:focus-visible,
.nv-rail-drawer .sidebar-link.cn-practice-all:focus-visible {
  outline: 2px solid var(--cn-focus);
  outline-offset: -2px;
}

.cn-practice-icon {
  flex: none;
}

/* ── Mobile trigger / backdrop / drawer reskin (machinery untouched) ───── */
html.theme-light .nv-rail-trigger {
  border: 1px solid #BFD7FF;
  background: rgba(255, 255, 255, 0.95);
  color: #2563EB;
  font-weight: 600;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14);
}

html.theme-dark .nv-rail-trigger {
  border: 1px solid rgba(34, 211, 238, 0.35);
  background: rgba(14, 22, 32, 0.95);
  color: #22D3EE;
  font-weight: 600;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}

html.theme-light .nv-rail-drawer,
html.theme-dark .nv-rail-drawer {
  background: var(--cn-bg-page);
  border-right: 1px solid var(--cn-border-subtle);
  /* clears site chrome; ladder ported from the retired themed layer */
  z-index: 5000;
}

html.theme-light .nv-rail-backdrop,
html.theme-dark .nv-rail-backdrop {
  z-index: 4990;
}

html.theme-dark .nv-rail-backdrop {
  background: rgba(2, 6, 12, 0.6);
}

@media (max-width: 860px) {
  html.theme-light .nv-rail-drawer,
  html.theme-dark .nv-rail-drawer {
    width: min(calc(100vw - 24px), 420px);
    max-width: 420px;
    border-radius: 0 22px 22px 0;
  }

  /* 44px touch targets in the drawer */
  .nv-rail-drawer .sidebar-toggle,
  .nv-rail-drawer .sidebar-link {
    min-height: 44px;
  }
}

.cn-drawer-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--cn-border-subtle);
  background: var(--cn-bg-card);
}

.cn-drawer-head .cn-section-label {
  margin: 0;
}

.cn-drawer-title {
  margin: 4px 0 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cn-text-primary);
}

.cn-drawer-close {
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--cn-border-card);
  border-radius: 10px;
  background: var(--cn-bg-card);
  color: var(--cn-text-primary);
  cursor: pointer;
}

.cn-drawer-close svg {
  flex: none;
  width: 15px;
  height: 15px;
}

.cn-drawer-close:focus-visible {
  outline: 2px solid var(--cn-focus);
  outline-offset: 2px;
}

.cn-drawer-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 14px max(14px, env(safe-area-inset-bottom));
  scrollbar-width: thin;
  scrollbar-color: var(--cn-node-idle-ring) transparent;
}

.cn-scroll::-webkit-scrollbar,
.cn-drawer-scroll::-webkit-scrollbar {
  width: 6px;
}

.cn-scroll::-webkit-scrollbar-track,
.cn-drawer-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.cn-scroll::-webkit-scrollbar-thumb,
.cn-drawer-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--cn-node-idle-ring);
  background-clip: padding-box;
}

.cn-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Screen-reader-only helper ─────────────────────────────────────────── */
.cn-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   "Now" block — per-topic resource switcher, pinned at the top of the rail
   with a hairline separator below it. Collapses only if the switcher resolves
   no segments, which never happens on a real leaf page (the current view is
   always one segment). Renders identically across notes / cards / TQ / MCQ.
   ══════════════════════════════════════════════════════════════════════════ */
.cn-now {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cn-border-subtle);
}
.cn-now:not(:has(.cn-seg)) { display: none; }

/* Per-topic resource switcher — a segmented control (Notes / Cards /
   Questions / MCQ). Segments that aren't the current view and aren't a
   trustworthy sibling are omitted server-side, so 2–4 segments render. */
.cn-switch {
  position: relative; /* anchors the sliding .cn-switch-indicator */
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 11px;
  background: var(--cn-row-hover);
  border: 1px solid var(--cn-border-subtle);
}
.cn-switch:empty { display: none; }
.nv-rail .cn-switch .cn-seg,
.nv-rail-drawer .cn-switch .cn-seg {
  flex: 1 1 0;
  min-width: 0;
  position: relative; /* sit above the sliding indicator */
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 5px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--cn-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease,
              transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .nv-rail .cn-switch a.cn-seg:hover,
  .nv-rail-drawer .cn-switch a.cn-seg:hover {
    color: var(--cn-text-primary);
    background: var(--cn-bg-card);
  }
}
.nv-rail .cn-switch .cn-seg:focus-visible,
.nv-rail-drawer .cn-switch .cn-seg:focus-visible {
  outline: 2px solid var(--cn-focus);
  outline-offset: -2px;
}
.nv-rail .cn-switch .cn-seg.is-active,
.nv-rail-drawer .cn-switch .cn-seg.is-active {
  color: var(--cn-active-text);
  background: var(--cn-active-bg);
  box-shadow: inset 0 0 0 1px var(--cn-active-row-border);
  cursor: default;
}

/* Sliding indicator — mirrors the .questions-mode-tabs glide. cn-switch-
   indicator.js inserts .cn-switch-indicator, adds .has-indicator, and slides
   its left/width on entrance; the active segment's own pill is then suppressed
   so the slider is the only highlight. (Reduced motion keeps the static pill.) */
.cn-switch-indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  border-radius: 8px;
  background: var(--cn-active-bg);
  box-shadow: inset 0 0 0 1px var(--cn-active-row-border);
  pointer-events: none;
  z-index: 0;
  will-change: left, width;
}
.cn-switch.has-indicator .cn-seg.is-active {
  background: transparent;
  box-shadow: none;
}

/* Tactile press — pure CSS, transform-only, matching the mode switcher. */
@media (prefers-reduced-motion: no-preference) {
  .nv-rail .cn-switch a.cn-seg:active,
  .nv-rail-drawer .cn-switch a.cn-seg:active { transform: scale(0.97); }
}

/* (The "On this page" scroll-spy outline was removed — the rail now shows the
   resource switcher + chapter tree only, consistent across every study page.) */

/* ══════════════════════════════════════════════════════════════════════════
   Focus mode — collapse the rail smoothly instead of the instant display:none
   in noteviewer.css. Loads AFTER noteviewer.css (base.html order) at equal
   specificity, so it wins by source order: the rail stays in flow but animates
   its width to 0 (its overflow:hidden clips the 290px content) while the reading
   column expands into the freed space. The display:none rule stays in
   noteviewer.css (FocusModeAssetTests asserts it). Reverses on exit.
   ══════════════════════════════════════════════════════════════════════════ */
.nv-rail {
  transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1),
              min-width 360ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 240ms ease;
}
html.note-focus-mode .nv-rail {
  display: block !important;
  width: 0 !important;
  min-width: 0 !important;
  opacity: 0;
  pointer-events: none;
}
/* noteviewer.css switches the canvas to display:block in focus mode (it assumed
   the rail was display:none). Now that the rail stays in flow to animate, keep
   the canvas flex so the 0-width rail sits inline and the content fills the row
   instead of being pushed below a full-height block rail. */
html.note-focus-mode .nv-canvas {
  display: flex !important;
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nv-rail,
  .cn-chevron,
  .cn-tier,
  .nv-rail .sidebar-children,
  .nv-rail-drawer .sidebar-children,
  .nv-rail .sidebar-toggle.cn-chapter-head,
  .nv-rail .sidebar-link.cn-lesson,
  .nv-rail .cn-btn {
    transition: none !important;
  }
}