@import url('./tokens-uniflection.css');

/* Economics Textbook — Shared Stylesheet
 * Typography + chrome colors come from tokens-uniflection.css (imported above).
 * The legacy --color-bg / --color-text / --color-heading / --color-accent / --color-border /
 * --font-heading / --font-body names are aliased to the new tokens below so existing
 * selectors keep working without touching every rule.
 * Semantic graph colors (--color-demand, --color-supply, --color-equilibrium, etc.) are
 * UNCHANGED — those are discipline conventions across 155+ Plotly graphs.
 *
 * 2026-05-04 — dropped Manrope+Sora @import; fonts now loaded via tokens-uniflection.css.
 */

:root {
  /* Typography aliases → Uniflection tokens */
  /* (--font-heading, --font-body, --font-ui defined in tokens-uniflection.css) */

  /* Semantic graph colors (unchanged across themes) */
  --color-demand: #2563eb;
  --color-supply: #dc2626;
  --color-msc: #991b1b;
  --color-equilibrium: #16a34a;
  --color-surplus-cs: rgba(37, 99, 235, 0.15);
  --color-surplus-ps: rgba(220, 38, 38, 0.15);
  --color-dwl: rgba(250, 204, 21, 0.25);
  --color-tax: rgba(139, 92, 246, 0.15);

  /* Light theme (default) — aliased to Uniflection tokens */
  --color-bg: var(--color-page);            /* #fcfbf8 */
  --color-bg-alt: var(--color-card-surface); /* slight darkening of page */
  --color-text: var(--color-ink);            /* #0a0a08 */
  --color-text-secondary: var(--color-ink-secondary); /* #2a2a26 */
  --color-heading: var(--color-ink);         /* no separate heading color */
  /* --color-accent inherited from tokens-uniflection.css (#a82828 vermillion) */
  --color-border: var(--color-rule);         /* hairline vermillion */

  /* Difficulty/seniority levels — monochrome ramp + vermillion at the top step.
   * Replaces the green/amber/red triplet to align with v10 Bound-Book Editorial. */
  --color-practice:  var(--color-ink-3);          /* most muted   */
  --color-apply:     var(--color-ink-secondary);  /* mid          */
  --color-challenge: var(--color-accent);         /* top urgency  */

  /* Component colors — mapped to v10 per-object accent library + card-surface.
   * Definition is locked vermillion (tokens.md §6.13). Example/thread/summary
   * use forest/rust/hairline-rule per DECISION_LOG 2026-05-08. */
  --color-definition-bg:     var(--color-card-surface);
  --color-definition-border: var(--color-accent);
  --color-example-bg:        var(--color-card-surface);
  --color-example-border:    var(--c-forest);
  --color-thread-bg:         var(--color-card-surface);
  --color-thread-border:     var(--c-rust);
  --color-thread-heading:    var(--c-rust);
  --color-summary-bg:        var(--color-card-surface);
  --color-summary-border:    var(--color-rule);
  --color-equation-bg:       var(--color-card-surface);
  --color-eq-label:          var(--color-ink-secondary);

  /* Graph colors — UNCHANGED (tokens.md §9 marks Plotly chrome out of scope) */
  --graph-bg: #ffffff;
  --graph-grid: #e2e8f0;
  --graph-text: #1a1a2e;

  /* Slider colors */
  --color-slider-track: var(--color-rule-dark);
  --color-slider-thumb: var(--color-accent);

  /* Table colors */
  --color-table-header-bg: var(--color-card-surface);
  --color-table-hover:     var(--color-card-surface);

  /* Exercise badge backgrounds — neutral wash + vermillion hint at top step */
  --color-practice-badge-bg:  rgba(10, 10, 8, 0.04);
  --color-apply-badge-bg:     rgba(10, 10, 8, 0.07);
  --color-challenge-badge-bg: rgba(168, 40, 40, 0.10);

  /* Nav hover */
  --color-nav-hover: var(--color-card-surface);

  /* Eq readout — semantic "good outcome" → forest */
  --color-eq-readout-bg:     var(--color-card-surface);
  --color-eq-readout-border: var(--c-forest);
  --color-eq-readout-strong: var(--c-forest);

  /* Figure container — tokens.md §6.14 locks 1px solid --color-rule-dark */
  --color-figure-border: var(--color-rule-dark);
  --color-figure-shadow: rgba(0,0,0,0.05);
}

/* Dark theme — most chrome/component aliases auto-adapt because the tokens they
 * reference (--color-accent, --color-card-surface, --c-forest, --c-rust, --color-ink-3)
 * are dark-overridden in tokens-uniflection.css. Only the few that genuinely differ
 * in dark mode (badge backgrounds, graph internals, semantic graph colors) live here.
 */
html[data-theme="dark"] {
  /* Levels — light-cream practice step needs an alpha that's not just ink-3 lifted */
  --color-practice: rgba(252, 251, 248, 0.55);

  /* Graph colors — Plotly chrome out of scope per tokens.md §9, but the dark
   * background needs different bg/grid/text for legibility */
  --graph-bg: #0f172a;
  --graph-grid: #334155;
  --graph-text: #e2e8f0;

  /* Exercise badge backgrounds in dark — flip to light-on-dark wash */
  --color-practice-badge-bg:  rgba(252, 251, 248, 0.04);
  --color-apply-badge-bg:     rgba(252, 251, 248, 0.07);
  --color-challenge-badge-bg: rgba(214, 96, 74, 0.15);

  --color-figure-shadow: rgba(0,0,0,0.3);

  /* Adjust semantic graph colors for dark background legibility — UNCHANGED */
  --color-demand: #60a5fa;
  --color-supply: #f87171;
  --color-msc: #fca5a5;
  --color-equilibrium: #4ade80;
  --color-surplus-cs: rgba(96, 165, 250, 0.2);
  --color-surplus-ps: rgba(248, 113, 113, 0.2);
  --color-dwl: rgba(250, 204, 21, 0.2);
  --color-tax: rgba(167, 139, 250, 0.2);
}

/* Reading theme dropped 2026-05-04 — superseded by editorial light theme (tokens-uniflection.css). */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Surface around the floating sheet — same color as the sheet so the surface
   reads as continuous; depth comes from the sheet's box-shadow alone. */
html {
  background: var(--color-bg);
}

body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  max-width: 820px;
  margin: 0 auto;
  /* padding-top: 0 — topnav owns the top edge as the page's sticky
   * chrome. Horizontal + bottom padding kept for non-shell pages
   * (atlas, explorer landing) that still rely on body framing. */
  padding: 0 30px 80px;
  /* Floating-sheet effect: sheet sits on a same-color surface, depth from a
     directional shadow stack (light from upper-left). Tight close shadow
     defines the edges where the directional shadow doesn't reach. */
  border-radius: 1px;
  box-shadow:
    0 1px 2px rgba(20, 15, 8, 0.09),
    0 4px 10px rgba(20, 15, 8, 0.07),
    10px 18px 36px rgba(20, 15, 8, 0.10),
    28px 48px 80px rgba(20, 15, 8, 0.08);
}

/* Pages that should NOT float as a sheet (timelines, atlases, full-bleed
   canvases) — add `class="canvas-page"` to body to opt out. */
body.canvas-page {
  max-width: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* Headings */
h1 {
  font-family: var(--font-heading);
  font-size: 2.2em;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-heading);
  margin: 0 0 8px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--color-accent);
}

h1 .chapter-num {
  display: block;
  font-size: 0.45em;
  font-weight: 400;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

h2 {
  font-family: var(--font-heading);
  font-size: 1.5em;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  margin: 48px 0 16px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}

h3 {
  font-family: var(--font-heading);
  font-size: 1.2em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-heading);
  margin: 32px 0 12px;
}

h4 {
  font-family: var(--font-heading);
  font-size: 1.05em;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 24px 0 8px;
}

/* Paragraphs */
p { margin: 0 0 16px; }

/* Links */
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Definition terms */
.definition {
  margin: 20px 0;
  padding: 16px 20px;
  background: var(--color-definition-bg);
  border-left: 4px solid var(--color-definition-border);
  border-radius: 0 4px 4px 0;
}

.definition strong { color: var(--color-heading); }

/* Equations — numbered */
.equation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 24px 0;
  padding: 12px 20px;
  background: var(--color-equation-bg);
  border-radius: 4px;
}

.equation .eq-label {
  font-family: var(--font-body);
  font-size: 0.85em;
  color: var(--color-eq-label);
  white-space: nowrap;
  margin-left: 20px;
}

/* Figures / Graphs */
.figure-container {
  margin: 32px 0;
  padding: 12px;
  border: 1px solid var(--color-figure-border);
  border-radius: 6px;
  box-shadow: 0 1px 4px var(--color-figure-shadow);
}

.figure-container .plotly-graph-div {
  margin: 0 auto;
}

/* Prevent Plotly containers from collapsing to 0 height on Plotly.react() re-render */
.figure-container .js-plotly-plot {
  min-height: 400px;
}

.figure-caption {
  font-family: var(--font-body);
  font-size: 0.9em;
  color: var(--color-text-secondary);
  margin-top: 8px;
  padding: 0 12px;
  line-height: 1.5;
}

.figure-caption strong {
  color: var(--color-heading);
}

/* Placeholder shown when a figure asset is pending production */
.wt-figure-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  border: 2px dashed var(--color-figure-border);
  border-radius: 6px;
  padding: 24px;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 0.9em;
  font-style: italic;
  text-align: center;
  background: transparent;
}

/* ── Interactive Components (shared across chapters) ────────────────── */

/* Slider containers */
.slider-container {
  margin: 16px 0 8px;
  padding: 16px 20px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font-body);
}

.slider-container label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 0.95em;
  color: var(--color-heading);
}

.slider-container input[type="range"] {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-slider-track);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.slider-container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-slider-thumb);
  cursor: grab;
  border: 2px solid var(--color-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.slider-container input[type="range"]::-webkit-slider-thumb:active {
  cursor: grabbing;
  background: var(--color-accent);
}

.slider-readout {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.85em;
  color: var(--color-text-secondary);
}

.slider-value {
  font-size: 1.1em;
  font-weight: 700;
  color: var(--color-accent);
}

.slider-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}

.slider-group .slider-container {
  margin: 8px 0;
}

/* Equation readout */
.eq-readout {
  margin: 12px 0 4px;
  padding: 12px 16px;
  background: var(--color-example-bg);
  border-radius: 6px;
  border: 1px solid var(--color-example-border);
  font-family: var(--font-body);
  font-size: 0.95em;
  line-height: 1.8;
}

.eq-readout strong {
  color: var(--color-practice);
}

/* Toggle buttons (used in Ch4, 7, 12, 15, 18) */
.toggle-container {
  display: flex;
  gap: 8px;
  margin: 12px 0;
  flex-wrap: wrap;
  align-items: center;
}

.toggle-container label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95em;
  color: var(--color-heading);
}

.toggle-btn,
.toggle-container button {
  padding: 6px 16px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.88em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.toggle-btn:hover,
.toggle-container button:hover {
  background: var(--color-border);
}

.toggle-btn.active,
.toggle-container button.active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

/* Interactive sections (used in Ch9, 11, 16, 17, 18) */
.interactive-section {
  margin: 24px 0;
  padding: 20px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.interactive-section:last-of-type {
  margin-bottom: 32px;
}

.interactive-section h3 {
  margin-top: 0;
}

/* Multi-panel layouts */
.dual-panel,
.two-panel,
.side-by-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0;
}

.dual-panel > div,
.two-panel > div,
.side-by-side > div {
  min-width: 0;
}

.three-panel {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin: 16px 0;
}

.dual-panel > .figure-container {
  margin: 0;
}

/* Panel labels (Ch8, 13) */
.panel-label {
  font-family: var(--font-body);
  font-size: 0.85em;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 8px;
}

.panel-label.fiscal {
  background: var(--color-summary-bg);
  color: var(--color-accent);
}

.panel-label.monetary {
  background: var(--color-card-surface);
  color: var(--color-accent);
}

/* Warning readouts (Ch14, 15) */
.warning-readout {
  margin: 12px 0 4px;
  padding: 12px 16px;
  background: var(--color-thread-bg);
  border: 1px solid var(--color-thread-border);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.95em;
}

/* Click hints */
.click-hint {
  font-family: var(--font-body);
  font-size: 0.85em;
  color: var(--color-text-secondary);
  font-style: italic;
  margin: 4px 0 8px;
}

/* Interactive buttons (Ch11, 17) */
.btn {
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9em;
  cursor: pointer;
  transition: background 0.15s;
}

.btn:hover {
  background: var(--color-bg-alt);
}

.btn.active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.btn.run {
  background: var(--color-practice);
  color: #fff;
  border-color: var(--color-practice);
}

.btn.run:hover {
  opacity: 0.9;
}

@media (max-width: 600px) {
  .dual-panel, .two-panel, .side-by-side {
    grid-template-columns: 1fr;
  }
  .three-panel {
    grid-template-columns: 1fr;
  }
  .slider-grid {
    grid-template-columns: 1fr;
  }
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.95em;
}

th {
  background: var(--color-table-header-bg);
  font-family: var(--font-body);
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 2px solid var(--color-border);
}

td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--color-border);
}

tr:hover { background: var(--color-table-hover); }

/* Examples */
.example {
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--color-example-bg);
  border-left: 4px solid var(--color-example-border);
  border-radius: 0 4px 4px 0;
}

.example-title {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-practice);
  margin-bottom: 8px;
}

/* Thread examples */
.thread-example {
  margin: 32px 0;
  padding: 24px;
  background: var(--color-thread-bg);
  border: 1px solid var(--color-thread-border);
  border-radius: 6px;
}

.thread-example h3 {
  font-family: var(--font-body);
  color: var(--color-thread-heading);
  margin-top: 0;
}

/* Exercises */
.exercises { margin-top: 48px; }

.exercises h3 {
  font-family: var(--font-body);
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 1em;
  margin-bottom: 16px;
}

.exercises h3.practice { background: var(--color-practice-badge-bg); color: var(--color-practice); }
.exercises h3.apply { background: var(--color-apply-badge-bg); color: var(--color-apply); }
.exercises h3.challenge { background: var(--color-challenge-badge-bg); color: var(--color-challenge); }

.exercises ol { padding-left: 24px; }
.exercises li { margin-bottom: 16px; }

/* Key equations summary table */
.key-equations table {
  font-size: 0.9em;
}

.key-equations td:first-child {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-accent);
}

/* Summary box */
.summary {
  margin: 40px 0;
  padding: 24px;
  background: var(--color-summary-bg);
  border-radius: 6px;
  border: 1px solid var(--color-summary-border);
}

.summary h2 { border-bottom: none; margin-top: 0; color: var(--color-accent); }
.summary ul { padding-left: 20px; }
.summary li { margin-bottom: 10px; }

/* Learning objectives */
.objectives {
  margin: 20px 0 32px;
  padding: 16px 24px;
  background: var(--color-bg-alt);
  border-radius: 6px;
}

.objectives ol { padding-left: 20px; }
.objectives li { margin-bottom: 6px; font-size: 0.95em; }

/* Navigation */
.nav {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
  padding-top: 20px;
  border-top: 2px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 0.9em;
}

.nav a {
  padding: 8px 16px;
  background: var(--color-bg-alt);
  border-radius: 4px;
  border: 1px solid var(--color-border);
}

.nav a:hover {
  background: var(--color-nav-hover);
  text-decoration: none;
}

/* MathJax overrides */
mjx-container[display="true"] { margin: 16px 0 !important; }
mjx-container { color: var(--color-text) !important; }

/* Theme toggle component */
.theme-toggle {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 10000;
  display: flex;
  gap: 2px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 3px;
  font-family: var(--font-body);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.theme-toggle button {
  border: none;
  background: transparent;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text-secondary);
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}

.theme-toggle button:hover {
  background: var(--color-border);
}

.theme-toggle button.active {
  background: var(--color-accent);
  color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════════
   Navigation System
   ═══════════════════════════════════════════════════════════════════════ */

/* Reading progress bar — thin bar at very top of viewport */
.nav-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background: var(--color-accent);
  z-index: 1100;
  pointer-events: none;
  transition: none;
}

/* ── Site-wide header (site-header.js) ──────────────────────────────── */
.site-header {
  position: sticky;
  top: 50px; /* below the 50px-tall .topnav above it */
  height: 48px;
  z-index: 49; /* one less than .topnav's z-index 50 so topnav layers over */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 0.85em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.site-header-left,
.site-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.site-header-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 4px;
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  transition: background 0.15s;
}
.site-header-home:hover { background: var(--color-bg-alt); }
.site-header-home img { vertical-align: middle; }
.site-header-nav-slot { display: flex; align-items: center; gap: 4px; }
.site-header-title {
  flex: 1;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 12px;
  color: var(--color-text);
}
.site-header-extra-slot { display: flex; align-items: center; gap: 8px; }
.nav-hamburger-slot { display: flex; align-items: center; }

/* Narrow viewport: collapse header chrome so Sign in stays visible */
@media (max-width: 520px) {
  .site-header { padding: 0 8px; }
  .site-header-left, .site-header-right { gap: 4px; }
  .site-header-home { padding: 6px 4px; }
  .site-header-brand { display: none; }
  .lang-selector .lang-selector-label { display: none; }
  .nav-theme-slot .theme-btn-label { display: none; }
}

/* ── Legacy nav-header (kept for navigation.js compat) ─────────────── */
.nav-header {
  position: fixed;
  top: 4px;
  left: 0;
  right: 0;
  height: 48px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 0.85em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.nav-header-left,
.nav-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Header links */
.nav-home,
.nav-prev,
.nav-next {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 4px;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  min-height: 36px;
  transition: background 0.15s;
}

.nav-home:hover,
.nav-prev:hover,
.nav-next:hover {
  background: var(--color-bg-alt);
  text-decoration: none;
}

.nav-home-logo {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
}

.nav-home .nav-home-text {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.nav-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Chapter title in header */
.nav-title {
  font-weight: 600;
  color: var(--color-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  text-align: center;
  padding: 0 8px;
  min-width: 0;
}

/* Placeholder slots for mode toggle, theme toggle, and language selector */
.nav-mode-slot,
.nav-theme-slot,
.nav-lang-slot {
  display: flex;
  align-items: center;
}

/* Sidebar toggle (hamburger) button */
.nav-sidebar-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-sidebar-toggle:hover {
  background: var(--color-bg-alt);
}

.hamburger-line {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-text);
  border-radius: 1px;
}

/* ── Chapter overlay panel (slide-in from left, opened by hamburger) ─── */
.nav-sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 380px;
  max-width: 86vw;
  z-index: 1000;
  background: var(--color-bg);
  border-right: 2px solid var(--color-text);
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.25, 1);
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
}
.nav-sidebar.open { transform: translateX(0); }

.nav-overlay-head {
  padding: 22px 28px 16px;
  border-bottom: 1px solid var(--color-rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-shrink: 0;
}
.nav-overlay-meta {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 6px;
}
.nav-overlay-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--color-ink);
}
.nav-overlay-title .em {
  color: var(--color-accent);
  font-style: italic;
  font-weight: 500;
}
.nav-overlay-close {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-ink-secondary);
  padding: 6px 8px;
}
.nav-overlay-close:hover { color: var(--color-accent); }

.nav-overlay-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 28px 32px;
}

.nav-vol {
  margin-top: 22px;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-ink-3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-rule);
}
.nav-vol:first-child { margin-top: 0; }

.nav-toc {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.nav-toc li { margin: 0; }
.nav-toc a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px dotted var(--color-rule-dark);
  transition: color 0.15s;
}
.nav-toc li:last-child a { border-bottom: none; }
.nav-toc a:hover { color: var(--color-accent); }
.nav-toc a.current {
  color: var(--color-accent);
  font-weight: 600;
}
.nav-toc a .num {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  width: 32px;
  flex-shrink: 0;
}
.nav-toc a .ti {
  font-size: 15px;
  line-height: 1.35;
}

.nav-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 8, 0.42);
  z-index: 999;
}
.nav-sidebar-overlay.visible { display: block; }

/* ── Desktop (>= 768px) ────────────────────────────────────────────── */
@media (min-width: 768px) {
  .nav-prev .nav-link-text,
  .nav-next .nav-link-text {
    display: inline;
  }
}

/* ── Mobile (< 768px) ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .nav-header {
    padding: 0 8px;
  }

  /* Hide text labels on prev/next */
  .nav-link-text {
    display: none;
  }

  .nav-home-text {
    display: none;
  }

  /* Ensure touch targets are 44x44 */
  .nav-home,
  .nav-prev,
  .nav-next,
  .nav-sidebar-toggle {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  /* Overlay panel takes full width on small screens */
  .nav-sidebar { width: 100%; max-width: 100vw; }

  .nav-title {
    font-size: 0.8em;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Media Player System
   ═══════════════════════════════════════════════════════════════════════ */

/* Container — card style matching figure-container */
.media-player {
  margin: 32px 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  overflow: hidden;
  background: var(--color-bg);
  font-family: var(--font-body);
}

/* Title bar (label + minimize button) */
.media-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.85em;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.media-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Shared button reset */
.media-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-text);
  border-radius: 4px;
  padding: 4px;
  transition: background 0.15s;
}

.media-btn:hover {
  background: var(--color-border);
}

/* Controls bar (shared audio + video) */
.media-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}

/* Play button */
.media-play-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-accent);
  color: #ffffff;
}

.media-play-btn:hover {
  background: var(--color-accent);
  opacity: 0.85;
}

/* Progress bar */
.media-progress-wrap {
  flex: 1;
  height: 8px;
  background: var(--color-border);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  min-width: 60px;
}

.media-progress-bar {
  height: 100%;
  background: var(--color-accent);
  border-radius: 4px;
  width: 0%;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* Section markers on progress bar */
.media-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-heading);
  border: 2px solid var(--color-bg);
  cursor: pointer;
  z-index: 2;
}

.media-marker:hover {
  transform: translate(-50%, -50%) scale(1.3);
}

/* Time display */
.media-time {
  font-size: 0.8em;
  color: var(--color-text-secondary);
  white-space: nowrap;
  min-width: 80px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Speed selector */
.media-speed {
  font-size: 0.8em;
  padding: 3px 6px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  font-family: inherit;
}

.media-speed:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

/* Minimize button */
.media-minimize-btn {
  color: var(--color-text-secondary);
}

/* Audio minimized state (when floating) */
.media-audio-minimized .media-controls {
  opacity: 0.4;
  pointer-events: none;
}

.media-audio-minimized::after {
  content: 'Playing in mini-player';
  display: block;
  text-align: center;
  padding: 8px;
  font-size: 0.8em;
  color: var(--color-text-secondary);
  font-style: italic;
}

/* ── Video player ────────────────────────────────────────────────────── */

.media-video-wrap {
  position: relative;
  background: #000;
}

.media-video-wrap video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}

.media-video-controls {
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  opacity: 0;
  transition: opacity 0.25s;
}

.media-video-wrap:hover .media-video-controls,
.media-video-wrap:focus-within .media-video-controls {
  opacity: 1;
}

.media-video-controls .media-play-btn {
  width: 28px;
  height: 28px;
}

.media-video-controls .media-time {
  color: rgba(255,255,255,0.8);
  font-size: 0.75em;
  min-width: 70px;
}

.media-video-controls .media-progress-wrap {
  height: 5px;
}

.media-video-controls .media-progress-bar {
  background: var(--color-accent);
}

/* Volume slider */
.media-vol-btn {
  color: #fff;
}

.media-vol-slider {
  width: 60px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.media-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
}

.media-vol-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  cursor: pointer;
}

/* Subtitle selector */
.media-sub-selector {
  position: relative;
}

.media-sub-btn {
  color: #fff;
}

.media-sub-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  overflow: hidden;
  min-width: 80px;
  z-index: 10;
}

.media-sub-option {
  border: none;
  background: transparent;
  padding: 6px 14px;
  text-align: left;
  cursor: pointer;
  font-size: 0.8em;
  font-family: inherit;
  color: var(--color-text);
}

.media-sub-option:hover {
  background: var(--color-bg-alt);
}

/* Fullscreen button */
.media-fs-btn {
  color: #fff;
}

/* ── Floating mini-player ────────────────────────────────────────────── */

.media-mini-player {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 950;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  font-family: var(--font-body);
  max-width: 320px;
  min-width: 240px;
}

.media-mini-player .mini-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  color: #ffffff;
  cursor: pointer;
  padding: 0;
}

.media-mini-player .mini-play-btn:hover {
  opacity: 0.85;
}

.mini-progress-wrap {
  flex: 1;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  min-width: 50px;
}

.mini-progress-bar {
  height: 100%;
  background: var(--color-accent);
  border-radius: 2px;
  width: 0%;
  pointer-events: none;
}

.mini-time {
  font-size: 0.75em;
  color: var(--color-text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 32px;
}

.mini-restore-btn,
.mini-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-secondary);
  border-radius: 4px;
  padding: 0;
}

.mini-restore-btn:hover,
.mini-close-btn:hover {
  background: var(--color-border);
}

/* ── "Coming soon" placeholder ───────────────────────────────────────── */

.media-placeholder {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 20px;
  background: var(--color-bg-alt);
  border-radius: 6px;
  color: var(--color-text-secondary);
}

.media-placeholder-icon {
  flex-shrink: 0;
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-placeholder-icon svg {
  stroke: currentColor;
}

.media-placeholder-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.media-placeholder-text strong {
  font-size: 0.95em;
  color: var(--color-text);
}

.media-placeholder-text span {
  font-size: 0.85em;
  font-style: italic;
}

/* ── Media player responsive ─────────────────────────────────────────── */

@media (max-width: 600px) {
  .media-controls {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
  }

  .media-time {
    font-size: 0.7em;
    min-width: 60px;
  }

  .media-mini-player {
    right: 8px;
    bottom: 8px;
    max-width: 280px;
    min-width: 200px;
    padding: 8px 10px;
  }

  .media-vol-slider {
    width: 40px;
  }
}

/* ── Site Footer ──────────────────────────────────────────────────────── */

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 20px 32px;
  margin-top: 64px;
  border-top: 1px solid var(--color-border);
}

.site-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--color-heading);
  transition: opacity 0.15s;
}

.site-footer-brand:hover {
  opacity: 0.7;
  text-decoration: none;
}

.site-footer-logo {
  width: 24px;
  height: 24px;
  border-radius: 5px;
}

.site-footer-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: -0.02em;
}

.site-footer-tagline {
  font-size: 0.82em;
  color: var(--color-text-secondary);
}

.site-footer-copyright {
  font-size: 0.75em;
  color: var(--color-text-secondary);
  opacity: 0.7;
  margin-left: 12px;
}

/* ── Media player print hide ─────────────────────────────────────────── */

@media print {
  .media-player,
  .media-mini-player {
    display: none;
  }
}

/* Print styles — inherit v10 light tokens (no color override block; the editorial
 * identity prints exactly as it ships on screen). Dark mode is force-overridden
 * back to light via attribute reset, then layout adjustments only. */
@media print {
  [data-theme="dark"] {
    --color-page: #fcfbf8;
    --color-accent: #a82828;
    --color-accent-grad-end: #601515;
    --color-ink: #0a0a08;
    --color-ink-secondary: #2a2a26;
    --color-ink-3: #6a655c;
    --color-rule: rgba(168, 40, 40, 0.22);
    --color-rule-dark: rgba(10, 10, 8, 0.15);
    --color-card-surface: rgba(0, 0, 0, 0.025);
    --c-vermillion: #a82828;
    --c-navy:       #1a2d4a;
    --c-rust:       #8a3a1a;
    --c-forest:     #2d4a32;
    --c-plum:       #5a2a4a;
    /* Restore semantic graph colors to light variants for print legibility */
    --color-demand: #2563eb;
    --color-supply: #dc2626;
    --color-msc: #991b1b;
    --color-equilibrium: #16a34a;
  }

  body { max-width: none; padding: 20px; font-size: 12pt; }
  .nav { display: none; }
  .nav-header, .nav-sidebar, .nav-progress-bar, .nav-sidebar-overlay, .site-footer { display: none; }
  body.nav-sidebar-visible { margin-left: 0; }
  .theme-toggle { display: none; }
  .plotly-graph-div { break-inside: avoid; }
  h2 { break-after: avoid; }
}

/* Responsive */
@media (max-width: 600px) {
  body { padding: 16px; font-size: 16px; }
  h1 { font-size: 1.6em; }
  h2 { font-size: 1.3em; }
  .theme-toggle { top: 8px; right: 8px; }
  .theme-toggle button { padding: 4px 8px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TAKE CARDS AND ANALYSIS
   ═══════════════════════════════════════════════════════════════════════ */

.take-card {
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  border-radius: 6px;
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.take-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 2px 8px var(--color-figure-shadow);
}

.take-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-accent);
  margin-bottom: 6px;
}

.take-card-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1em;
  color: var(--color-heading);
  margin-bottom: 8px;
}

.take-card-hook {
  color: var(--color-text);
  font-size: 0.95em;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.take-card-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72em;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 12px;
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.take-card-badge.intro {
  background: var(--color-practice-badge-bg);
  color: var(--color-practice);
}

.take-card-badge.intermediate {
  background: var(--color-apply-badge-bg);
  color: var(--color-apply);
}

.take-card-badge.advanced {
  background: var(--color-challenge-badge-bg);
  color: var(--color-challenge);
}

.take-card-row {
  display: flex;
  gap: 16px;
  margin: 16px 0;
}

.take-card-row .take-card {
  flex: 1;
  min-width: 0;
}

.take-expand {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 0.9em;
  color: var(--color-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.take-expand:hover {
  text-decoration: underline;
}

.take-analysis {
  display: none;
  margin-top: 16px;
  padding: 24px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.take-analysis.visible {
  display: block;
}

.take-section {
  margin-bottom: 20px;
}

.take-section:last-child {
  margin-bottom: 0;
}

.take-section[data-section="judgment"] {
  border-left: 4px solid var(--color-accent);
  padding-left: 16px;
  background: var(--color-summary-bg);
  padding: 16px 20px;
  border-radius: 0 4px 4px 0;
}

.take-resources {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.take-resources {
  margin-top: 1.5em;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.take-resources-header {
  font-size: 1em;
  margin: 0 0 0.3em 0;
  color: var(--color-text-secondary);
}

.resource-group-header {
  font-family: var(--font-body);
  font-size: 0.82em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-secondary);
  margin: 16px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px dotted var(--color-border);
}

.resource-group-header:first-of-type {
  margin-top: 8px;
}

.resource-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
}

.resource-card-meta {
  line-height: 1.5;
}

.resource-card-link {
  align-self: flex-end;
  font-size: 0.88em;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}

.resource-card-link:hover {
  text-decoration: underline;
}

.resource-tier-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.resource-tier-excellent {
  background: var(--color-practice-badge-bg);
  color: var(--color-practice);
}

.resource-tier-useful {
  background: var(--color-summary-bg);
  color: var(--color-accent);
}

.resource-tier-flawed {
  background: var(--color-apply-badge-bg);
  color: var(--color-apply);
}

.resource-tier-bad_take_worth_dissecting {
  background: var(--color-challenge-badge-bg);
  color: var(--color-challenge);
}

.resource-card-annotation {
  font-size: 0.88em;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

@media (max-width: 600px) {
  .take-card-row {
    flex-direction: column;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   TAKE MEDIA SLOT
   ═══════════════════════════════════════════════════════════════════════ */

.take-media-slot {
  margin-bottom: 0.75rem;
  border-radius: 6px;
  overflow: hidden;
}

.take-media-slot .yt-lazy {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
  cursor: pointer;
  max-width: 320px;
}

.take-media-slot .yt-lazy img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.take-media-slot .yt-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s;
  width: 68px;
  height: 48px;
  padding: 0;
}

.take-media-slot .yt-play-btn:hover {
  opacity: 1;
}

.take-source-quote {
  font-size: 1.05em;
  font-style: italic;
  border-left: 4px solid var(--color-accent);
  padding: 0.75rem 1rem;
  margin: 0;
  background: var(--color-card-surface);
  border-radius: 0 4px 4px 0;
  max-height: 4.5em;
  overflow: hidden;
}

.take-source-quote cite {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 600;
  color: var(--color-ink-secondary);
}

.provocation-context {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-ink-secondary);
  margin-top: 0.5rem;
}

.take-media-slot audio {
  width: 100%;
  max-width: 320px;
}

/* ── Walkthrough context: larger media ─────────────────────── */

.take-card-walkthrough {
  padding: 1.5rem;
  border-left: 4px solid var(--color-accent);
}

.take-card-walkthrough .take-card-hook {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.take-card-walkthrough .take-media-slot .yt-lazy {
  max-width: 560px;
}

.take-card-walkthrough .take-media-slot .take-source-quote {
  max-height: none;
  font-size: 1.15em;
}

.take-card-walkthrough .take-media-slot audio {
  max-width: 560px;
}

.take-chapter-link {
  font-size: 0.85rem;
  margin-top: 1rem;
  color: var(--color-ink-secondary);
}

/* ── Take media responsive ────────────────────────────────── */

@media (max-width: 768px) {
  .take-media-slot .yt-lazy,
  .take-card-walkthrough .take-media-slot .yt-lazy {
    max-width: 100%;
  }
  .take-media-slot audio,
  .take-card-walkthrough .take-media-slot audio {
    max-width: 100%;
  }
  .take-source-quote {
    font-size: 0.95em;
    max-height: 3em;
  }
  .take-card-walkthrough .take-media-slot .take-source-quote {
    max-height: none;
  }
}

@media (max-width: 480px) {
  .take-source-quote {
    font-size: 0.9em;
    padding: 0.5rem 0.75rem;
  }
  .take-media-slot .yt-play-btn {
    width: 48px;
    height: 34px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   INTUITION MODE
   ═══════════════════════════════════════════════════════════════════════ */

/* Formal mode is default — hide intuition content */
[data-mode="intuition"] {
  display: none;
}

/* When body has intuition-mode class, swap visibility */
body.intuition-mode [data-mode="formal"] {
  display: none;
}

body.intuition-mode [data-mode="intuition"] {
  display: block;
}

/* Intuition callout box */
.intuition-box {
  margin: 16px 0;
  padding: 14px 18px;
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 4px 4px 0;
  font-size: 0.95em;
  line-height: 1.65;
  color: var(--color-text);
}

/* Graph-specific intuition guidance */
.graph-intuition {
  margin: 12px 0;
  padding: 12px 16px;
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 4px 4px 0;
  font-size: 0.9em;
  font-style: italic;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Mode toggle button — consistent with theme toggle */
#mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.85em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

#mode-toggle:hover {
  background: var(--color-nav-hover);
}

#mode-toggle.active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

/* ═══════════════════════════════════════════════════════════════════════
   MULTI-VIEW INDEX
   ═══════════════════════════════════════════════════════════════════════ */

.index-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 24px;
  font-family: var(--font-body);
}

.index-tab {
  padding: 10px 20px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.index-tab:hover {
  color: var(--color-text);
}

.index-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.index-view {
  display: none;
}

.index-view.active {
  display: block;
}

/* Chapter cards */
.chapter-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  margin-bottom: 10px;
  background: var(--color-bg);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.15s, background 0.15s;
}

.chapter-card:hover {
  border-color: var(--color-accent);
  background: var(--color-bg-alt);
  text-decoration: none;
}

.chapter-card .ch-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.chapter-card .ch-graph-count {
  font-family: var(--font-body);
  font-size: 0.8em;
  color: var(--color-text-secondary);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Track pipeline */
.track-pipeline {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding: 16px 0;
}

.track-node {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 8px 14px;
  border: 2px solid var(--color-border);
  border-radius: 24px;
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: 0.85em;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}

.track-node:hover {
  border-color: var(--color-accent);
  background: var(--color-bg-alt);
  text-decoration: none;
}

.track-arrow {
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
  font-size: 1.1em;
  padding: 0 4px;
  flex-shrink: 0;
}

.track-cross-arrow {
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
  font-size: 1.1em;
  padding: 0 4px;
  flex-shrink: 0;
  border-bottom: 2px dotted var(--color-border);
}

/* WT cards on index */
.wt-card {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 12px;
  background: var(--color-bg);
  cursor: pointer;
  transition: border-color 0.15s;
}

.wt-card:hover {
  border-color: var(--color-accent);
}

.wt-card.expanded {
  background: var(--color-bg-alt);
  border-color: var(--color-accent);
}

.wt-card .wt-path-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.wt-path-pills span {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--color-summary-bg);
  color: var(--color-accent);
}

/* Featured Takes */
.featured-takes {
  margin: 32px 0;
}

.featured-takes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 768px) {
  .featured-takes-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .featured-takes-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Progress indicators */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0;
}

.progress-bar > div {
  height: 100%;
  background: var(--color-accent);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  font-size: 0.75em;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.progress-ring.complete {
  border-color: var(--color-practice);
  color: var(--color-practice);
  background: var(--color-practice-badge-bg);
}

/* ═══════════════════════════════════════════════════════════════════════
   SEARCH
   ═══════════════════════════════════════════════════════════════════════ */

.search-bar {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  padding: 0 12px;
  position: relative;
  font-family: var(--font-body);
  transition: border-color 0.15s;
}

.search-bar:focus-within {
  border-color: var(--color-accent);
}

.search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 8px;
  font-size: 0.95em;
  font-family: inherit;
  color: var(--color-text);
  outline: none;
}

.search-bar input::placeholder {
  color: var(--color-text-secondary);
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 400px;
  overflow-y: auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px var(--color-figure-shadow);
  z-index: 100;
}

.search-result-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-text);
  transition: background 0.1s;
}

.search-result-item:hover {
  background: var(--color-bg-alt);
}

.search-result-item + .search-result-item {
  border-top: 1px solid var(--color-border);
}

.search-result-type-icon {
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  font-size: 1em;
}

.search-result-title {
  font-weight: 700;
  font-size: 0.92em;
  color: var(--color-heading);
}

.search-result-snippet {
  font-size: 0.85em;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-top: 2px;
}

.search-result-snippet mark {
  background: var(--color-apply-badge-bg);
  color: var(--color-apply);
  border-radius: 2px;
  padding: 0 2px;
}

.search-filter-bar {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.search-filter-btn {
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 0.78em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.search-filter-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
}

.search-filter-btn.active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

/* ═══════════════════════════════════════════════════════════════════════
   PART TRANSITION CARDS
   ═══════════════════════════════════════════════════════════════════════ */

.part-transition {
  margin: 56px 0 40px;
  padding: 32px 28px;
  background: var(--color-bg-alt);
  border: 2px solid var(--color-accent);
  border-radius: 8px;
  position: relative;
}

.part-transition::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-accent);
  border-radius: 6px 6px 0 0;
}

.part-transition-content h3 {
  font-family: var(--font-body);
  font-size: 1.25em;
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.part-transition-can-evaluate,
.part-transition-wts,
.part-transition-preview {
  margin-bottom: 16px;
}

.part-transition-can-evaluate h4,
.part-transition-wts h4 {
  font-family: var(--font-body);
  font-size: 0.9em;
  font-weight: 600;
  color: var(--color-heading);
  margin: 0 0 8px;
}

.part-transition-can-evaluate ul,
.part-transition-wts ul {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}

.part-transition-can-evaluate li,
.part-transition-wts li {
  font-size: 0.95em;
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: 4px;
}

.part-transition-preview {
  margin-bottom: 0;
}

.part-transition-preview p {
  font-style: italic;
  color: var(--color-text-secondary);
  font-size: 0.95em;
  line-height: 1.6;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   SEARCH
   ═══════════════════════════════════════════════════════════════════════ */

.search-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  background: var(--color-bg);
  padding: 16px;
  overflow-y: auto;
}

.search-overlay.visible {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════
   WT NAVIGATION — Juncture collapse/expand, sidebar, teasers, summary
   ═══════════════════════════════════════════════════════════════════════ */

/* ── WT teaser link (inline prose cross-link to a walkthrough) ──────── */
/* The teaser BLOCKS were removed with the in-chapter walkthrough layer; this
   inline-link utility survives because a few chapters use it for a plain prose
   "explore this walkthrough →" link / button (e.g. ch.21 labor, hoet ch.05). */
.wt-teaser-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.88em;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  transition: opacity 0.15s;
}

.wt-teaser-link:hover {
  opacity: 0.8;
  text-decoration: none;
}

/* ── WT Chapter Summary Card ───────────────────────────────────────── */

.wt-chapter-summary {
  margin: 32px 0;
  padding: 20px 24px;
  background: var(--color-summary-bg);
  border: 1px solid var(--color-summary-border);
  border-radius: 6px;
}

.wt-chapter-summary h3 {
  font-family: var(--font-body);
  font-size: 1.05em;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 12px;
}

.wt-chapter-summary ul {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}

.wt-chapter-summary li {
  font-size: 0.93em;
  line-height: 1.6;
  margin-bottom: 4px;
  color: var(--color-text);
}

.wt-chapter-summary li a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
}

.wt-chapter-summary li a:hover {
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════
   TRACK-MODE SIDEBAR — Topic track navigation (View 2)
   ═══════════════════════════════════════════════════════════════════════ */

.track-sidebar {
  position: fixed;
  top: 60px;
  right: 16px;
  width: 260px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  z-index: 900;
  font-family: var(--font-body);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.track-sidebar.hidden {
  transform: translateX(calc(100% + 20px));
  opacity: 0;
  pointer-events: none;
}

.track-sidebar-header {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

.track-sidebar-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  font-size: 1.3em;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}

.track-sidebar-close:hover {
  background: var(--color-nav-hover);
  color: var(--color-text);
}

.track-sidebar-title {
  font-size: 0.95em;
  font-weight: 600;
  color: var(--color-heading);
  padding-right: 24px;
}

.track-sidebar-subtitle {
  font-size: 0.78em;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* Progress bar */
.track-sidebar-progress {
  height: 3px;
  background: var(--color-border);
  margin: 0;
}

.track-sidebar-progress-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 0 2px 2px 0;
  transition: width 0.3s ease;
}

.track-sidebar-progress-text {
  padding: 6px 16px 4px;
  font-size: 0.75em;
  color: var(--color-text-secondary);
  font-weight: 600;
}

/* Stop list */
.track-sidebar-stops {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  counter-reset: track-stop;
}

.track-sidebar-stop {
  counter-increment: track-stop;
  padding: 0;
}

.track-sidebar-stop a {
  display: block;
  padding: 8px 16px 8px 40px;
  font-size: 0.85em;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.4;
  position: relative;
  transition: background 0.15s;
}

.track-sidebar-stop a::before {
  content: counter(track-stop);
  position: absolute;
  left: 16px;
  top: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.72em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.track-sidebar-stop a:hover {
  background: var(--color-nav-hover);
  text-decoration: none;
}

.track-sidebar-stop.current a {
  background: var(--color-summary-bg);
  font-weight: 600;
  color: var(--color-accent);
}

.track-sidebar-stop.current a::before {
  background: var(--color-accent);
  color: var(--color-bg);
}

.track-sidebar-stop.visited a::before {
  background: var(--color-practice);
  color: var(--color-bg);
}

/* Level jump divider in sidebar */
.track-sidebar-level-jump {
  padding: 6px 16px;
  font-size: 0.7em;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  border-top: 1px dashed var(--color-border);
  border-bottom: 1px dashed var(--color-border);
  margin: 4px 0;
  text-align: center;
  list-style: none;
}

/* Exit track mode link */
.track-sidebar-exit {
  display: block;
  padding: 12px 16px;
  font-size: 0.82em;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-top: 1px solid var(--color-border);
  text-align: center;
  transition: color 0.15s, background 0.15s;
}

.track-sidebar-exit:hover {
  color: var(--color-text);
  background: var(--color-nav-hover);
  text-decoration: none;
}

/* Show button (when sidebar is closed) */
.track-sidebar-show {
  position: fixed;
  top: 68px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: 0.8em;
  font-weight: 700;
  cursor: pointer;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.track-sidebar-show:hover {
  border-color: var(--color-accent);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

/* ── Track bridge content (injected at level jumps) ──────────────── */

.track-bridge {
  background: var(--color-summary-bg);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin: 24px 0;
  font-size: 0.93em;
  line-height: 1.6;
}

.track-bridge-label {
  display: block;
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.track-bridge p {
  margin: 0;
  color: var(--color-text);
}

/* ── Responsive: Track sidebar ───────────────────────────────────── */

@media (max-width: 1100px) {
  .track-sidebar {
    width: 220px;
    right: 8px;
  }
}

@media (max-width: 768px) {
  .track-sidebar {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 40vh;
    border-radius: 12px 12px 0 0;
    border-bottom: none;
  }

  .track-sidebar.hidden {
    transform: translateY(100%);
  }

  .track-sidebar-show {
    top: auto;
    bottom: 16px;
    right: 16px;
  }
}

/* ── Track mode: Take curation ───────────────────────────────────── */

body.track-mode-active .take-card:not([data-track-relevant]),
body.track-mode-active .take-analysis:not([data-track-relevant]) {
  opacity: 0.45;
  transition: opacity 0.2s ease;
}
body.track-mode-active .take-card:not([data-track-relevant]):hover,
body.track-mode-active .take-analysis:not([data-track-relevant]):hover {
  opacity: 0.85;
}

/* ── Track bridge: prerequisite links ───────────────────────────── */

.track-bridge-prereqs {
  display: flex;
  gap: 1rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.track-prereq-link {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  color: var(--color-accent);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.2s, color 0.2s;
}
.track-prereq-link:hover {
  background: var(--color-accent);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════
   INTUITION MODE — Toggle between full (formal) and intuition views
   ═══════════════════════════════════════════════════════════════════════ */

/* Default: intuition-only content hidden */
[data-mode="intuition"] {
  display: none;
}

/* In intuition mode: hide formal, show intuition */
body.intuition-mode [data-mode="formal"] {
  display: none !important;
}

body.intuition-mode [data-mode="intuition"] {
  display: block !important;
}

/* Elements tagged as both are always visible (no special rule needed) */

/* ── Intuition Box Styling ────────────────────────────────────────── */

.intuition-box {
  margin: 16px 0;
  padding: 16px 20px;
  background: var(--color-card-surface);
  border-left: 4px solid var(--c-plum);
  border-radius: 0 6px 6px 0;
  font-style: italic;
  line-height: 1.7;
  color: var(--color-text);
}

.intuition-box strong {
  font-style: normal;
  color: var(--color-heading);
}

.intuition-box .intuition-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--c-plum);
  margin-bottom: 6px;
  font-style: normal;
}

.intuition-box .see-formal {
  display: block;
  margin-top: 8px;
  font-size: 0.85em;
  color: var(--color-text-secondary);
  font-style: normal;
}

/* ── Graph Intuition Caption ──────────────────────────────────────── */

.graph-intuition {
  margin: 8px 0 16px;
  padding: 12px 16px;
  background: var(--color-example-bg);
  border: 1px solid var(--color-example-border);
  border-radius: 4px;
  font-size: 0.9em;
  line-height: 1.6;
  color: var(--color-text);
}

/* ── Mode Toggle Button ───────────────────────────────────────────── */

.mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  padding: 4px 12px;
  font-family: var(--font-body);
  font-size: 0.82em;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}

.mode-toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.mode-toggle.active {
  background: var(--c-plum);
  border-color: var(--c-plum);
  color: var(--color-page);
}

.mode-toggle-icon {
  font-size: 1.1em;
}

@media print {
  .mode-toggle {
    display: none;
  }
  /* Show all content in print regardless of mode */
  [data-mode="formal"],
  [data-mode="intuition"] {
    display: block !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   WT WALKTHROUGHS — standalone reading experience for View 3
   ══════════════════════════════════════════════════════════════════ */

/* Override body width for walkthrough pages — wider, more reading-focused */
body.wt-walkthrough-page {
  max-width: 900px;
  padding: 0 30px 80px;
}

/* ── Walkthrough header ────────────────────────────────────────── */
.wt-walkthrough-header {
  text-align: center;
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 48px;
}

.wt-walkthrough-header .wt-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.82em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-accent);
  margin-bottom: 12px;
}

.wt-walkthrough-header h1 {
  font-size: 2.4em;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 12px;
}

.wt-walkthrough-subtitle {
  font-family: var(--font-body);
  font-size: 1.05em;
  color: var(--color-text-secondary);
  font-style: italic;
  margin: 0 auto 20px;
  max-width: 640px;
}

.wt-walkthrough-meta {
  display: flex;
  justify-content: center;
  gap: 24px;
  font-family: var(--font-body);
  font-size: 0.85em;
  color: var(--color-text-secondary);
  margin-bottom: 28px;
}

.wt-walkthrough-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wt-walkthrough-meta .meta-icon {
  font-size: 1.1em;
}

/* ── Stage TOC ─────────────────────────────────────────────────── */
.wt-walkthrough-toc {
  display: inline-block;
  text-align: left;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px 28px;
}

.wt-walkthrough-toc ol {
  list-style: none;
  counter-reset: stage-counter;
  padding: 0;
  margin: 0;
}

.wt-walkthrough-toc li {
  counter-increment: stage-counter;
  margin: 8px 0;
  font-family: var(--font-body);
  font-size: 0.95em;
}

.wt-walkthrough-toc li::before {
  content: counter(stage-counter) ".";
  font-weight: 700;
  color: var(--color-accent);
  margin-right: 8px;
  display: inline-block;
  width: 24px;
}

.wt-walkthrough-toc a {
  color: var(--color-text);
  text-decoration: none;
}

.wt-walkthrough-toc a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ── Stage sections ────────────────────────────────────────────── */
.wt-stage {
  margin-bottom: 56px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--color-border);
  scroll-margin-top: 24px;
}

.wt-stage:last-of-type {
  border-bottom: none;
}

.stage-header {
  margin-bottom: 24px;
}

.stage-header .stage-number {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-accent);
  margin-bottom: 4px;
}

.stage-header h2 {
  margin-top: 0;
  border-bottom: none;
  padding-bottom: 0;
}

/* Setup paragraph — italic lead-in */
.stage-setup {
  font-style: italic;
  color: var(--color-text-secondary);
  margin-bottom: 24px;
  font-size: 1.02em;
  line-height: 1.8;
}

/* Concepts section */
.stage-concepts {
  margin-bottom: 28px;
}

.stage-concepts h3 {
  font-size: 1.1em;
  margin-bottom: 12px;
}

/* Debate section */
.stage-debate {
  margin-bottom: 28px;
}

.debate-prediction,
.debate-counter,
.debate-response,
.debate-judgment {
  margin-bottom: 20px;
}

.debate-prediction {
  padding: 16px 20px;
  background: var(--color-definition-bg);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 8px 8px 0;
}

.debate-counter {
  padding: 16px 20px;
  background: var(--color-thread-bg);
  border-left: 4px solid var(--color-thread-border);
  border-radius: 0 8px 8px 0;
}

.debate-response {
  padding: 16px 20px;
  background: var(--color-example-bg);
  border-left: 4px solid var(--color-example-border);
  border-radius: 0 8px 8px 0;
}

.debate-judgment {
  padding: 16px 20px;
  background: var(--color-summary-bg);
  border-left: 4px solid var(--color-summary-border);
  border-radius: 0 8px 8px 0;
}

.debate-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}

.debate-prediction .debate-label { color: var(--color-accent); }
.debate-counter .debate-label { color: var(--color-thread-heading); }
.debate-response .debate-label { color: var(--color-example-border); }
.debate-judgment .debate-label { color: var(--color-accent); }

/* ── Go deeper links ──────────────────────────────────────────── */
.stage-deeper {
  margin: 28px 0;
  padding: 16px 20px;
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
  border-radius: 8px;
}

.stage-deeper h3 {
  font-family: var(--font-body);
  font-size: 0.9em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-secondary);
  margin: 0 0 10px;
}

.stage-deeper ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.stage-deeper li {
  margin: 6px 0;
  padding-left: 20px;
  position: relative;
  font-family: var(--font-body);
  font-size: 0.92em;
}

.stage-deeper li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

.stage-deeper a {
  color: var(--color-accent);
  font-weight: 600;
}

/* ── Transition ───────────────────────────────────────────────── */
.stage-transition {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px dotted var(--color-border);
  font-style: italic;
  color: var(--color-text-secondary);
  line-height: 1.8;
}

/* ── Walkthrough conclusion ───────────────────────────────────── */
.wt-walkthrough-conclusion {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 3px solid var(--color-accent);
}

.wt-walkthrough-conclusion h2 {
  text-align: center;
  border-bottom: none;
}

.wt-walkthrough-conclusion ol {
  padding-left: 24px;
  margin: 20px 0;
}

.wt-walkthrough-conclusion li {
  margin: 12px 0;
  line-height: 1.7;
}

.related-takes,
.related-resources {
  margin-top: 32px;
}

.related-takes h3,
.related-resources h3 {
  font-size: 1em;
  margin-bottom: 12px;
}

/* ── Walkthrough back link ────────────────────────────────────── */
.wt-walkthrough-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.88em;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  margin: 20px 0 0;
}

.wt-walkthrough-back:hover {
  text-decoration: underline;
}

/* ── WT-mode crosslink from walkthrough ───────────────────────── */
.wt-mode-crosslink {
  margin-top: 32px;
  padding: 16px 20px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.92em;
  text-align: center;
}

.wt-mode-crosslink a {
  font-weight: 600;
}

/* ── Sticky stage sidebar (desktop) ───────────────────────────── */
.wt-walkthrough-sidebar {
  display: none;
}

@media (min-width: 1200px) {
  body.wt-walkthrough-page {
    max-width: 960px;
    margin-left: calc(50% - 480px + 60px);
  }

  .wt-walkthrough-sidebar {
    display: block;
    position: fixed;
    left: max(16px, calc(50% - 580px));
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    font-family: var(--font-body);
    font-size: 0.78em;
    z-index: 50;
  }

  .wt-walkthrough-sidebar ol {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .wt-walkthrough-sidebar li {
    margin: 6px 0;
    padding: 6px 10px;
    border-left: 3px solid var(--color-border);
    color: var(--color-text-secondary);
    transition: border-color 0.3s, color 0.3s;
  }

  .wt-walkthrough-sidebar li.active {
    border-left-color: var(--color-accent);
    color: var(--color-accent);
    font-weight: 700;
  }

  .wt-walkthrough-sidebar a {
    color: inherit;
    text-decoration: none;
  }

  .wt-walkthrough-sidebar a:hover {
    color: var(--color-accent);
  }
}

/* ── Mobile: top progress bar ─────────────────────────────────── */
.wt-walkthrough-progress-bar {
  display: none;
}

@media (max-width: 1199px) {
  .wt-walkthrough-progress-bar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: 10px 16px;
    gap: 4px;
    justify-content: center;
  }

  .wt-walkthrough-progress-bar .progress-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-border);
    transition: background 0.3s;
  }

  .wt-walkthrough-progress-bar .progress-dot.active {
    background: var(--color-accent);
  }

  .wt-walkthrough-progress-bar .progress-connector {
    width: 24px;
    height: 2px;
    background: var(--color-border);
    align-self: center;
  }
}

/* ── Walkthrough mobile adjustments ───────────────────────────── */
@media (max-width: 600px) {
  body.wt-walkthrough-page {
    padding: 0 16px 60px;
  }

  .wt-walkthrough-header {
    padding: 32px 0 24px;
  }

  .wt-walkthrough-header h1 {
    font-size: 1.6em;
  }

  .wt-walkthrough-toc {
    padding: 14px 18px;
  }

  .wt-walkthrough-meta {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }

  .wt-stage {
    margin-bottom: 36px;
    padding-bottom: 32px;
  }

  .debate-prediction,
  .debate-counter,
  .debate-response,
  .debate-judgment {
    padding: 12px 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   WALKTHROUGH V2: PROVOCATION-FIRST STAGES
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Provocation block ────────────────────────────────────── */

.stage-provocation {
  border-left: 4px solid var(--color-accent);
  background: var(--color-card-surface);
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 0 6px 6px 0;
}

.provocation-media {
  max-width: 640px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
}

.provocation-media .yt-lazy {
  position: relative;
  padding-top: 56.25%;
  background: #000;
  cursor: pointer;
}

.provocation-media .yt-lazy img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.provocation-media .yt-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s;
  width: 68px;
  height: 48px;
  padding: 0;
}

.provocation-media .yt-play-btn:hover {
  opacity: 1;
}

.provocation-media audio {
  width: 100%;
  max-width: 640px;
  border-radius: 4px;
}

.provocation-quote {
  font-size: 1.15em;
  font-style: italic;
  border-left: 4px solid var(--color-accent);
  padding: 0.75rem 1.25rem;
  margin: 0;
  background: var(--color-card-surface);
  border-radius: 0 4px 4px 0;
}

.provocation-quote cite {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 600;
}

.provocation-quote.tweet cite {
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 0.8rem;
}

.provocation-quote.speech cite {
  font-variant: small-caps;
  font-size: 0.85rem;
}

/* ── Theory block (replaces .stage-concepts in v2) ─────────── */

.stage-theory {
  margin-bottom: 28px;
}

/* ── Inline Take in walkthrough ────────────────────────────── */

.stage-take {
  width: 100%;
  margin: 2rem 0;
  clear: both;
}

/* ── Debate voices ─────────────────────────────────────────── */

.debate-voice {
  margin-bottom: 1.5rem;
}

.debate-voice .debate-analysis {
  margin-top: 0.75rem;
  font-size: 0.95rem;
}

/* ── Judgment ──────────────────────────────────────────────── */

.stage-judgment {
  border-left: 4px solid var(--color-accent);
  padding-left: 1.25rem;
  font-weight: 500;
  margin: 2rem 0;
}

/* ── Hook (tension for next stage) ─────────────────────────── */

.stage-hook {
  font-style: italic;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--color-rule-dark);
}

/* ── Walkthrough v2 responsive ─────────────────────────────── */

@media (max-width: 320px) {
  .provocation-media,
  .provocation-media .yt-lazy { max-width: 100%; }
  .provocation-quote { font-size: 0.95em; }
  .stage-theory { padding: 0.75rem; }
  .provocation-context { font-size: 0.8rem; }
}

@media (max-width: 768px) {
  .provocation-media,
  .provocation-media .yt-lazy { max-width: 100%; }
  .provocation-media audio { max-width: 100%; }
}

@media (min-width: 1024px) {
  .provocation-media { max-width: 640px; margin: 0 auto; }
}

/* ════════════════════════════════════════════════════════════════
   WT Walkthrough System (wt_mode_integration spec)
   ════════════════════════════════════════════════════════════════ */

/* ── Walkthrough Container ─────────────────────────────────── */
.wt-walkthrough {
  max-width: 780px;
  margin: 0 auto;
  padding: 80px 24px 48px;
}

/* ── Hero Section ──────────────────────────────────────────── */
.wt-hero {
  text-align: center;
  padding: 48px 0 36px;
  border-bottom: 1px solid var(--color-border);
}

.wt-hero-title {
  font-size: 2em;
  font-weight: 800;
  color: var(--color-heading);
  margin: 12px 0 8px;
}

.wt-hero-hook {
  font-size: 1.1em;
  color: var(--color-text-secondary);
  font-style: italic;
  max-width: 600px;
  margin: 0 auto;
}

/* ── Stage Sections ────────────────────────────────────────── */
.wt-stage {
  padding: 48px 0 24px;
  border-bottom: 1px solid var(--color-border);
}

.wt-stage:last-of-type {
  border-bottom: none;
}

.wt-stage-header {
  margin-bottom: 24px;
}

.wt-stage-counter {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-accent);
  margin-bottom: 6px;
}

.wt-stage-title {
  font-size: 1.5em;
  color: var(--color-heading);
}

/* ── Provocation Beat ──────────────────────────────────────── */
.wt-provocation {
  margin: 0 0 24px;
  padding: 20px;
  background: var(--color-bg-alt);
  border-radius: 8px;
}

.wt-provocation-quote {
  font-size: 1.15em;
  line-height: 1.6;
  border-left: 4px solid var(--color-accent);
  padding: 16px 20px;
  margin: 0;
  background: none;
}

.wt-provocation-quote cite {
  display: block;
  margin-top: 8px;
  font-size: 0.88em;
  color: var(--color-text-secondary);
  font-style: normal;
}

.wt-media-embed {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

/* ── Theory Beat ───────────────────────────────────────────── */
.wt-theory {
  margin: 24px 0;
}

/* ── Debate Beat ───────────────────────────────────────────── */
.wt-debate {
  margin: 24px 0;
}

.wt-voice {
  padding: 16px 20px;
  margin-bottom: 12px;
  border-radius: 4px;
}

.wt-voice[data-position="for"] {
  background: var(--color-summary-bg);
  border-left: 3px solid var(--color-accent);
}

.wt-voice[data-position="against"] {
  background: var(--color-thread-bg);
  border-left: 3px solid var(--color-thread-border);
}

/* ── Judgment Beat ─────────────────────────────────────────── */
.wt-judgment {
  margin: 24px 0;
  padding: 20px;
  border-left: 4px solid var(--color-accent);
  background: var(--color-summary-bg);
  border-radius: 0 6px 6px 0;
}

/* ── Forward Hook ──────────────────────────────────────────── */
.wt-hook-forward {
  margin: 24px 0 16px;
  font-style: italic;
  color: var(--color-text-secondary);
}

/* ── Take Slot ─────────────────────────────────────────────── */
.wt-take-slot {
  margin: 32px 0;
}

.take-card-walkthrough {
  padding: 24px;
}

.take-card-walkthrough .take-media-slot {
  margin-bottom: 16px;
}

.take-card-walkthrough .take-card-title {
  font-size: 1.2em;
}

.take-card-walkthrough .take-card-hook {
  font-size: 1em;
  line-height: 1.7;
}

.take-media-inline {
  display: block;
}

/* ── Chapter-Peek Trigger ──────────────────────────────────── */
.chapter-peek-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  margin: 16px 0;
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.92em;
  font-weight: 600;
  color: var(--color-accent);
  transition: border-color 0.15s, background 0.15s;
}

.chapter-peek-trigger:hover {
  border-color: var(--color-accent);
  background: var(--color-summary-bg);
}

.chapter-peek-trigger[aria-expanded="true"] {
  border-style: solid;
  border-color: var(--color-accent);
  background: var(--color-summary-bg);
}

.peek-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.peek-icon::before {
  content: "\1F4D6";
}

.peek-label {
  flex: 1;
}

/* ── Chapter-Peek Panel ────────────────────────────────────── */
.chapter-peek-panel {
  margin: 0 0 24px;
  padding: 0;
  border: 2px solid var(--color-accent);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-bg);
}

.chapter-peek-panel[hidden] {
  display: none;
}

.chapter-peek-panel:not([hidden]) {
  animation: peek-reveal 0.35s ease-out;
  transform-origin: top center;
}

@keyframes peek-reveal {
  from {
    opacity: 0;
    transform: scaleY(0.92) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scaleY(1) translateY(0);
  }
}

.chapter-peek-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}

.chapter-peek-source {
  font-family: var(--font-body);
  font-size: 0.82em;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.chapter-peek-close {
  background: none;
  border: none;
  font-size: 1.4em;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.chapter-peek-close:hover {
  color: var(--color-text);
}

.chapter-peek-content {
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
}

.chapter-peek-panel.peek-mode-artifact .chapter-peek-content {
  padding: 0;
  max-height: none;
  overflow: hidden;
}

.chapter-peek-fullpage {
  margin-right: 12px;
  font-family: var(--font-body);
  font-size: 0.82em;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.chapter-peek-fullpage:hover {
  text-decoration: underline;
}

.chapter-peek-panel.peek-mode-artifact .chapter-peek-content iframe {
  display: block;
  width: 100%;
  height: 70vh;
  min-height: 480px;
  border: 0;
  background: var(--color-bg);
}

/* ── Walkthrough Footer ────────────────────────────────────── */
.wt-walkthrough-footer {
  padding: 36px 0;
  text-align: center;
}

.wt-back-to-index {
  display: inline-block;
  margin-bottom: 24px;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}

.wt-back-to-index:hover {
  text-decoration: underline;
}

/* Sequential navigation for a multi-part series: a reader who finishes one part needs the next
   one without going back through the index. */
.series-nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 28px;
  text-align: left;
}

.series-nav a {
  flex: 1 1 0;
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
}

.series-nav a:hover {
  text-decoration: underline;
}

.series-nav .series-nav-next {
  text-align: right;
}

.series-nav .series-nav-label {
  display: block;
  font-weight: 400;
  font-size: 0.85em;
  opacity: 0.7;
}

@media (max-width: 600px) {
  .series-nav {
    flex-direction: column;
    gap: 14px;
  }
  .series-nav .series-nav-next {
    text-align: left;
  }
}

.wt-related {
  margin-top: 16px;
}

.wt-related-list {
  list-style: none;
  padding: 0;
}

.wt-related-list li {
  margin: 8px 0;
}

.wt-related-list a {
  color: var(--color-accent);
  text-decoration: none;
}

.wt-related-list a:hover {
  text-decoration: underline;
}

/* ── Index Page WT Section ─────────────────────────────────── */
.index-wt-section {
  padding: 48px 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.index-section-title {
  font-size: 1.8em;
  color: var(--color-heading);
  margin-bottom: 8px;
}

.index-section-subtitle {
  font-size: 1.05em;
  color: var(--color-text-secondary);
  margin-bottom: 32px;
}

.index-wt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.index-wt-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 8px 8px 0;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.index-wt-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 4px 12px var(--color-figure-shadow);
}

.index-wt-card-title {
  font-size: 1.15em;
  font-weight: 700;
  color: var(--color-heading);
  margin: 8px 0;
}

.index-wt-card-hook {
  font-size: 0.92em;
  color: var(--color-text-secondary);
  line-height: 1.5;
  flex: 1;
  margin: 0 0 12px;
}

.index-wt-card-cta {
  font-size: 0.88em;
  font-weight: 600;
  color: var(--color-accent);
}

/* ── WT Walkthrough Responsive ─────────────────────────────── */
@media (max-width: 767px) {
  .wt-walkthrough {
    padding: 80px 16px 48px;
  }
  .wt-hero-title {
    font-size: 1.5em;
  }
  .wt-stage-title {
    font-size: 1.25em;
  }
  .chapter-peek-content {
    max-height: 60vh;
    font-size: 0.95em;
  }
  .chapter-peek-close {
    min-width: 44px;
    min-height: 44px;
  }
  .take-card-walkthrough {
    padding: 16px;
  }
  .index-wt-card {
    padding: 20px;
  }
}

/* ============================================================
   Multi-mode thought-graph chapter embed + WT toggle
   Spec: specs/multi_mode_thought_graph/design.md §3.4 + §3.5 + §8. Task: T-2.6.
   Embed CSS lives here so chapter and walkthrough pages pick it up via
   their existing textbook.css bundle without loading timeline.css.
   ============================================================ */

.graph-embed {
  position: relative;
  width: 100%;
  height: 360px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
  overflow: hidden;
  margin: 16px 0;
}

@media (max-width: 1023px) {
  .graph-embed { height: 320px; }
}
@media (max-width: 767px) {
  .graph-embed { height: 240px; }
}

.graph-chapter-root {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.graph-chapter-svg { display: block; width: 100%; height: 100%; }

.graph-chapter-era-divider {
  stroke: var(--color-border);
  stroke-width: 1;
  opacity: 0.5;
}

.graph-chapter-era-label {
  font-family: var(--font-heading, inherit);
  font-size: 11px;
  font-weight: 600;
  fill: var(--color-text);
}

.graph-chapter-era-period {
  font-size: 10px;
  fill: var(--color-text-secondary);
}

.graph-chapter-node-label {
  font-family: var(--font-body, inherit);
  font-size: 10px;
  fill: var(--color-text);
  pointer-events: none;
}

.graph-chapter-node:hover circle {
  stroke-width: 2.4;
}

.graph-chapter-empty {
  padding: 24px;
  color: var(--color-text-secondary);
  text-align: center;
}

.graph-chapter-peek {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 280px;
  max-width: calc(100% - 24px);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 12px 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 10;
}

.graph-chapter-peek[hidden] { display: none; }

.graph-chapter-peek-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: 0;
  color: var(--color-text-secondary);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}

.graph-chapter-peek-title {
  font-family: var(--font-heading, inherit);
  font-size: 1rem;
  margin: 0 22px 4px 0;
  color: var(--color-text);
}

.graph-chapter-peek-dates {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin: 0 0 8px;
}

.graph-chapter-peek-body {
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.5;
  color: var(--color-text);
}

.graph-embed-caption {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: 6px;
}

/* WT walkthrough toggle to debate-graph view */
.wt-graph-toggle {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 14px;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--color-accent);
  text-decoration: none;
  background: transparent;
  transition: background 0.12s, color 0.12s;
}

.wt-graph-toggle:hover {
  background: var(--color-accent);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════
   v10 CHAPTER CHROME — appended 2026-05-04
   Component patterns from tokens.md §6, applied to chapter & walkthrough
   pages via the .chapter-shell class added by chapter-shell.js.
   Visual spec: claude_design/projects/uniflection_redesign/pages/chapter.html
   ═══════════════════════════════════════════════════════════════════════ */

/* Per-book accent override hook. Vermillion is default; override for other books. */
body[data-book-accent="navy"]   { --color-accent: var(--c-navy);   --color-rule: rgba(26, 45, 74, 0.22); }
body[data-book-accent="rust"]   { --color-accent: var(--c-rust);   --color-rule: rgba(138, 58, 26, 0.22); }
body[data-book-accent="forest"] { --color-accent: var(--c-forest); --color-rule: rgba(45, 74, 50, 0.22); }
body[data-book-accent="plum"]   { --color-accent: var(--c-plum);   --color-rule: rgba(90, 42, 74, 0.22); }

/* When the shell is active, the body becomes the page-wide grid host. */
body.chapter-shell {
  max-width: var(--width-content);
  padding-left: var(--padding-page);
  padding-right: var(--padding-page);
}

/* Chapter masthead row — vermillion ALL CAPS left, italic right.
   Sticky directly below the topnav (50px). Holds prev/next chapter links,
   chapter title (left), and currently-reading section indicator (right). */
.chapter-shell .chapmast {
  position: sticky;
  top: 65px; /* below the topnav — 65px on chapter/WT (hamburger pushes flex height) */
  z-index: 48;
  margin: 0 0 36px;
  padding: 10px 16px 10px;
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-bg);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-ui);
  gap: 16px;
  flex-wrap: wrap;
}
.chapter-shell .chapmast .chapmast-prev,
.chapter-shell .chapmast .chapmast-next {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.chapter-shell .chapmast .chapmast-prev a,
.chapter-shell .chapmast .chapmast-next a {
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
}
.chapter-shell .chapmast .chapmast-prev a:hover,
.chapter-shell .chapmast .chapmast-next a:hover {
  color: var(--color-accent);
}
.chapter-shell .chapmast .chapmast-prev a.nav-disabled,
.chapter-shell .chapmast .chapmast-next a.nav-disabled {
  color: var(--color-rule-dark);
  pointer-events: none;
}
.chapter-shell .chapmast .chapmast-left {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent);
}
.chapter-shell .chapmast .chapmast-right {
  font-style: italic;
  font-size: 12.5px;
  color: var(--color-text-secondary);
}

/* ── Walkthrough Return Bar ─────────────────────────────────────────────
   The round-trip chrome a chapter shows while crumb-scoped (reached from a
   walkthrough page). Mounted by wt-return.js as a sibling of .chapmast. It is
   the walkthrough's own navigator — accent-tinted to read as "you are inside a
   walkthrough" — distinct from the chapter's neutral .chapmast. Themed via
   --color-accent / existing tokens; no new color literals. (design C.3) */
/* ── Walkthrough Return affordance ─────────────────────────────────────────
   The reader arrived at this chapter FROM a walkthrough (a `wtr` crumb is in
   the URL). ONE job: a clear, worded "Back to the walkthrough" control that
   returns them to the exact spot they left. A walkthrough is stage-organized,
   not a chapter sequence — so there is NO position counter and NO prev/next.
   Placement: a fixed pill in the LEFT margin, vertically centred (the agreed
   left-rail position) — eye-level, always visible regardless of scroll, and in
   the gutter so it never overlaps the reading column. The whole pill is the
   Back link. Narrow viewports (gutter too thin) fall back to bottom-left. */
.wt-return-bar {
  position: fixed;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 206px;
  padding: 11px 14px;
  border: 1px solid var(--color-accent);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--color-summary-bg);
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.20);
  font-family: var(--font-ui);
  text-decoration: none;
  transition: box-shadow 0.15s, transform 0.15s;
}
.wt-return-bar:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  transform: translateY(-50%) translateX(2px);
}
.wt-return-glyph {
  flex: 0 0 auto;
  color: var(--color-accent);
  font-size: 1.25em;
  line-height: 1;
}
.wt-return-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
  line-height: 1.25;
}
.wt-return-lead {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.wt-return-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Narrow viewports: the left gutter is too thin for a margin pill (the
   two-column grid itself collapses at 1079px), so dock it bottom-left where it
   can't overlap the reading column. */
@media (max-width: 1199px) {
  .wt-return-bar {
    top: auto;
    bottom: 18px;
    transform: none;
    max-width: min(340px, calc(100vw - 36px));
  }
  .wt-return-bar:hover {
    transform: translateY(-1px);
  }
  .wt-return-name {
    -webkit-line-clamp: 1;
  }
}
/* Mobile: lift above the bottom mobile-audio-bar so neither is occluded. */
@media (max-width: 768px) {
  .wt-return-bar {
    bottom: 76px;
    left: 12px;
  }
}

/* Two-column grid: reading column + sticky right sidebar. */
.chapter-shell .chapter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  align-items: start;
}
.chapter-shell .chapter-article {
  max-width: var(--width-reading);
  width: 100%;
  margin: 0;
}
@media (max-width: 1079px) {
  .chapter-shell .chapter-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .chapter-shell .chapter-article {
    max-width: 100%;
    margin: 0;
  }
}

/* Chapter h1 — drop legacy underline; v10 uses display weight + colored eyebrow. */
.chapter-shell h1 {
  border-bottom: none;
  padding-bottom: 0;
  margin: 0 0 8px;
  font-size: clamp(30px, 7.2vw, 64px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.032em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}
.chapter-shell h1 .chapter-num {
  display: block;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-accent);
  margin-bottom: 14px;
}

/* Chapter h2 — drop legacy underline. */
.chapter-shell .chapter-article > h2 {
  border-bottom: none;
  padding-bottom: 0;
  margin: 48px 0 18px;
  font-size: clamp(22px, 4.6vw, 36px);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.022em;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Anchor-scroll offset — section TOC links jump to a heading via #id, but
 * topnav (65px) + chapmast (~50px) are sticky at the top of the viewport
 * and would otherwise cover the heading. scroll-margin-top reserves clear
 * space below the sticky stack. h3 included because the chapter TOC
 * indexes both h2 sections and h3 subsections. */
.chapter-shell .chapter-article > h2[id],
.chapter-shell .chapter-article h3[id] {
  scroll-margin-top: 132px;
}
/* In-app (Capacitor Android) adds the mobile audio bar (44px) into the
 * sticky stack, plus the system status-bar safe-area inset. */
body.is-app.chapter-shell .chapter-article > h2[id],
body.is-app.chapter-shell .chapter-article h3[id] {
  scroll-margin-top: calc(180px + env(safe-area-inset-top, 0px));
}

/* Editorial lede — first <p> after first h2 (Introduction). Drop cap floats. */
.chapter-shell .chapter-article > h2:first-of-type + p {
  margin: 0 0 22px;
  font-size: 21px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--color-text);
}
.chapter-shell .chapter-article > h2:first-of-type + p::first-letter {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 64px;
  float: left;
  line-height: 0.85;
  margin: 6px 10px 0 0;
  color: var(--color-accent);
}

/* Definition — v10: 3px vermillion left + card surface + ALL CAPS label. */
.chapter-shell .definition {
  margin: 26px 0 24px;
  padding: 18px 22px 16px;
  background: var(--color-card-surface);
  border-left: 3px solid var(--color-accent);
  border-radius: 0;
}
.chapter-shell .definition strong {
  display: block;
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10.5px;
  color: var(--color-accent);
  margin-bottom: 8px;
}

/* Example — same family as definition, but FOREST left border (per-object accent). */
.chapter-shell .example {
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--color-card-surface);
  border-left: 3px solid var(--color-example-border);
  border-radius: 0;
}
.chapter-shell .example-title {
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10.5px;
  color: var(--color-example-border);
  margin-bottom: 8px;
}

/* Intuition box — PLUM left border (per-object accent), dotted to distinguish from definition. */
.chapter-shell .intuition-box {
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--color-card-surface);
  border-left: 3px dotted var(--c-plum);
  border-radius: 0;
  border-top: none;
  border-right: none;
  border-bottom: none;
}
.chapter-shell .intuition-box .intuition-label {
  display: block;
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10.5px;
  color: var(--c-plum);
  margin-bottom: 8px;
  background: none;
  padding: 0;
}

/* Thread example — RUST left border (per-object accent). */
.chapter-shell .thread-example {
  margin: 32px 0;
  padding: 22px 24px;
  background: var(--color-card-surface);
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--color-thread-border);
  border-radius: 0;
}
.chapter-shell .thread-example h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: var(--color-thread-heading);
  margin-top: 0;
  margin-bottom: 10px;
}

/* Summary — v10: italic-led, no border, slightly heavier card surface. */
.chapter-shell .summary {
  margin: 48px 0 24px;
  padding: 24px 28px;
  background: var(--color-card-surface);
  border: none;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  border-radius: 0;
}
.chapter-shell .summary h2 {
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: var(--color-accent);
  margin-top: 0;
  margin-bottom: 14px;
  border-bottom: none;
  padding-bottom: 0;
}

/* Objectives — match the same callout family for visual consistency. */
.chapter-shell .objectives {
  margin: 22px 0 32px;
  padding: 18px 22px;
  background: var(--color-card-surface);
  border: none;
  border-left: 3px solid var(--color-accent);
  border-radius: 0;
}
.chapter-shell .objectives strong {
  display: block;
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10.5px;
  color: var(--color-accent);
  margin-bottom: 10px;
}

/* Figure — v10 plate: hairline frame, dotted divider, FIG. plate label. */
.chapter-shell .figure-container {
  margin: 32px 0 28px;
  padding: 18px;
  border: 1px solid var(--color-rule-dark);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: none;
}
[data-theme="dark"] .chapter-shell .figure-container {
  background: rgba(252, 251, 248, 0.03);
}
.chapter-shell .figure-caption {
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px dotted var(--color-rule-dark);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.chapter-shell .figure-caption strong {
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 10.5px;
  color: var(--color-accent);
  margin-right: 8px;
}

/* Equation — v10: tighter, dotted hairline frame, monospace eq label. */
.chapter-shell .equation {
  margin: 22px 0;
  padding: 14px 20px;
  background: var(--color-card-surface);
  border: none;
  border-top: 1px dotted var(--color-rule-dark);
  border-bottom: 1px dotted var(--color-rule-dark);
  border-radius: 0;
}
.chapter-shell .equation .eq-label {
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10px;
  color: var(--color-accent);
}

/* End-of-chapter nav — v10: minimal hairline rule, italic links. */
.chapter-shell .nav {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-ui);
}
.chapter-shell .nav a {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  color: var(--color-accent);
  font-style: italic;
  font-family: var(--font-body);
  font-size: 14px;
}
.chapter-shell .nav a:hover {
  text-decoration: underline;
}

/* Section divider ticker — between subsections (Communion pattern). */
.section-band {
  margin: 48px 0 32px;
  padding: 9px 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  background: rgba(0, 0, 0, 0.012);
  overflow: hidden;
  position: relative;
}
[data-theme="dark"] .section-band {
  background: rgba(255, 255, 255, 0.02);
}
.section-band .track {
  display: flex;
  gap: 28px;
  white-space: nowrap;
  width: max-content;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-text-secondary);
  animation: section-band-scroll 70s linear infinite;
}
.section-band .track .item .num {
  color: var(--color-accent);
  margin-right: 6px;
}
@keyframes section-band-scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .section-band .track { animation: none; }
}

/* ── Sticky right sidebar (audio + TOC + supporting materials) ───────
   Top offset clears the 50px topnav + ~50px chapmast sticky stack
   plus a small breathing margin. */
.chapter-sidebar {
  position: sticky;
  top: 131px; /* topnav 65 + chapmast ~66 */
  max-height: calc(100vh - 147px);
  overflow-y: auto;
  align-self: start;
  font-family: var(--font-ui);
}
.chapter-sidebar .sidebar-block {
  border: 1px solid var(--color-rule);
  background: rgba(255, 255, 255, 0.45);
  padding: 18px;
  margin-bottom: 16px;
}
[data-theme="dark"] .chapter-sidebar .sidebar-block {
  background: rgba(252, 251, 248, 0.03);
}
.chapter-sidebar .sidebar-block.accent {
  border-left: 3px solid var(--color-accent);
}
.chapter-sidebar .sb-lbl {
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 9.5px;
  color: var(--color-accent);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-rule);
}
@media (max-width: 1079px) {
  .chapter-sidebar { position: static; top: auto; }
}

/* Audio block */
.chapter-sidebar .audio { display: flex; align-items: center; gap: 12px; }
.chapter-sidebar .play-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--color-accent);
  color: var(--color-page);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer;
}
.chapter-sidebar .play-btn svg { width: 14px; height: 14px; fill: currentColor; margin-left: 2px; }
.chapter-sidebar .audio-meta { flex: 1; min-width: 0; }
.chapter-sidebar .narrator {
  font-size: 10.5px;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  margin-bottom: 4px;
}
.chapter-sidebar .audio-bar {
  height: 3px;
  background: var(--color-rule);
  position: relative;
  margin-bottom: 4px;
}
.chapter-sidebar .audio-bar::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--audio-progress, 0%);
  background: var(--color-accent);
}
.chapter-sidebar .audio-time {
  font-style: italic;
  font-size: 11px;
  color: var(--color-text-secondary);
}

/* TOC block — built from in-page h2/h3 by chapter-shell.js */
.chapter-sidebar .toc { font-family: var(--font-ui); }
.chapter-sidebar .toc-top {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-text);
  margin: 0 0 8px;
}
.chapter-sidebar .toc-list { list-style: none; padding: 0; margin: 0; }
.chapter-sidebar .toc-list li { margin: 0; }
.chapter-sidebar .toc-item {
  display: flex;
  gap: 8px;
  padding: 4px 8px 4px 0;
  font-size: 11.5px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.chapter-sidebar .toc-item:hover { background: rgba(168, 40, 40, 0.06); color: var(--color-text); }
.chapter-sidebar .toc-item.current {
  background: rgba(168, 40, 40, 0.08);
  color: var(--color-accent);
  font-weight: 600;
}
.chapter-sidebar .toc-item .num {
  color: var(--color-accent);
  width: 32px;
  flex-shrink: 0;
}
.chapter-sidebar .toc-item.sub {
  padding-left: 30px;
  font-size: 11px;
  color: var(--color-ink-3, var(--color-text-secondary));
}

/* Reading progress under TOC */
.chapter-sidebar .progress {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-rule);
}
.chapter-sidebar .pbar {
  height: 4px;
  background: var(--color-rule);
  margin-bottom: 6px;
  position: relative;
}
.chapter-sidebar .pbar::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--read-progress, 0%);
  background: var(--color-accent);
  transition: width 0.15s ease;
}
.chapter-sidebar .ptext {
  display: flex;
  justify-content: space-between;
  font-style: italic;
  font-size: 11px;
  color: var(--color-text-secondary);
}

/* Supporting materials block */
.chapter-sidebar .support .group { margin-bottom: 14px; }
.chapter-sidebar .support .group:last-child { margin-bottom: 0; }
.chapter-sidebar .support .gtitle {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 9px;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
.chapter-sidebar .support a {
  display: block;
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-text);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px dotted var(--color-rule-dark);
}
.chapter-sidebar .support a:last-child { border-bottom: none; }
.chapter-sidebar .support a:hover { color: var(--color-accent); }
.chapter-sidebar .support a .arr {
  color: var(--color-accent);
  margin-left: 4px;
  opacity: 0.7;
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE PHASE-6 RULES — appended 2026-05-06
   T-6.4 reading line measure + symmetric gutters at <768px.
   Math (mjx-container) overflow guard so wide displayed equations become
   horizontally scrollable rather than spilling past the viewport.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* T-6.4 — chapter shell uses 16px gutters at mobile so reading column =
     viewport - 32. At 390 viewport → 358px content (~92vw), the spec target. */
  body.chapter-shell {
    padding-left: 16px;
    padding-right: 16px;
    /* Defensive overflow guard — any single oversized child (long URL, wide
       iframe, unbroken token in i18n) would otherwise stretch <body> past the
       viewport and clip h1/subtitle/pills on the right. Cap the body to the
       viewport and let the offending child overflow internally. */
    max-width: 100vw;
    overflow-x: hidden;
  }
  .chapter-shell .chapter-grid,
  .chapter-shell .chapter-article,
  .chapter-shell .wt-walkthrough,
  .chapter-shell .wt-hero {
    min-width: 0;
    max-width: 100%;
  }
  .chapter-shell .chapmast {
    padding-left: 16px;
    padding-right: 16px;
    margin-left: -16px;
    margin-right: -16px;
  }

  /* Math overflow guard — keep wide displayed equations inside the viewport
     by allowing horizontal scroll on the container rather than overflowing
     the page. Inline math (no display attr) stays unaffected. */
  mjx-container[display="true"],
  mjx-container.MJX-Display,
  mjx-container.MJXc-Display {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Body baseline — already 16px from textbook.css base, but ensure the
     iOS zoom-dodge holds even on chapter pages. */
  body.chapter-shell { font-size: 16px; line-height: 1.65; }
}

/* T-6.3 — Right-rail bottom-sheet at <1024px.
   At desktop (≥1024px) the chapter-sidebar lives in the chapter-grid
   right column. Below the breakpoint we lift it out of flow into a
   fixed bottom-sheet revealed by a "Sections" pill in the bottom-right.
   Audio + sections + progress + sources all live inside the sheet. */
@media (max-width: 1023px) {
  .chapter-shell .chapter-sidebar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    max-width: 100vw;
    background: var(--color-bg, #fcfbf8);
    color: var(--color-text);
    border-top: 1px solid var(--color-rule, rgba(168, 40, 40, 0.22));
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
    border-radius: 16px 16px 0 0;
    transform: translateY(calc(100% + 24px));
    transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 1100;
    max-height: 78vh;
    overflow-y: auto;
    padding: 18px 20px 28px;
    margin: 0;
  }
  body.sections-sheet-open .chapter-sidebar {
    transform: translateY(0);
  }

  /* Sheet header: drag handle + title + close button. Injected by
     chapter-shell.js when the sheet is created. */
  .sections-sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--color-rule-dark, rgba(0, 0, 0, 0.18));
    border-radius: 2px;
    margin: 0 auto 12px;
  }
  .sections-sheet-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sections-sheet-close:hover { background: rgba(0, 0, 0, 0.06); }
  .sections-sheet-close svg { width: 18px; height: 18px; }

  /* Pill button — fixed bottom-right, only on chapter-shell pages. */
  .sections-pill {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 1010;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    background: var(--color-accent);
    color: white;
    font-family: 'Newsreader', serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 16px rgba(168, 40, 40, 0.25);
    cursor: pointer;
    min-height: 44px;
    transition: opacity 0.18s ease-out, transform 0.18s ease-out;
  }
  .sections-pill svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
  }
  body.sections-sheet-open .sections-pill {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
  }

  /* Backdrop overlay. */
  .sections-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 1090;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
  }
  body.sections-sheet-open .sections-sheet-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Shift the ask-bubble up so it doesn't collide with the Sections pill. */
  body.chapter-shell .ask-bubble,
  body.chapter-shell #ask-bubble {
    bottom: 80px !important;
  }
}

/* Desktop (≥1024px) — sidebar lives in the chapter-grid right column,
 * so the bottom-sheet UI is hidden. chapter-shell.js creates the pill +
 * backdrop unconditionally; without this rule they fall back to default
 * button rendering and leak into the page flow as a stray "Sections"
 * button at the bottom of every chapter. */
@media (min-width: 1024px) {
  .sections-pill,
  .sections-sheet-backdrop,
  .sections-sheet-handle,
  .sections-sheet-close {
    display: none !important;
  }
}

/* T-7.6 — Capacitor app safe-area inset for bottom-pinned UI. When
 * body.is-app is set (Android app), the Sections pill and ask-bubble
 * shift up by the system gesture-bar / home-indicator height so they
 * don't sit underneath system chrome. env() value is 0 on the web. */
body.is-app .sections-pill {
  bottom: calc(16px + var(--app-tabbar-h, 0px) + env(safe-area-inset-bottom, 0px));
}
body.is-app.chapter-shell .ask-bubble,
body.is-app.chapter-shell #ask-bubble {
  bottom: calc(80px + var(--app-tabbar-h, 0px) + env(safe-area-inset-bottom, 0px)) !important;
}
body.is-app:not(.chapter-shell) .ask-bubble,
body.is-app:not(.chapter-shell) #ask-bubble {
  bottom: calc(16px + var(--app-tabbar-h, 0px) + env(safe-area-inset-bottom, 0px)) !important;
}

/* Stack offsets shift down by the status-bar inset when in-app, so the
 * mobile audio bar and chapmast don't sit underneath the system status. */
@media (max-width: 768px) {
  body.is-app .mobile-audio-bar {
    top: calc(65px + env(safe-area-inset-top, 0px));
  }
  body.is-app.chapter-shell .chapmast {
    top: calc(109px + env(safe-area-inset-top, 0px));
  }
}

/* On chapter pages with the bottom-sheet active, suppress page scroll while
   the sheet is open so the underlying article doesn't drift. */
body.sections-sheet-open { overflow: hidden; }

/* T-6.5 — Mobile pinned audio bar. Below topnav, full-width, 44px tall.
   Hidden on desktop (sidebar audio block handles it there).
   Stacked sticky offset: topnav 65px → mab 44px → chapmast 65 + 44 = 109px.
   Audio: hidden HTML5 element wired via chapter-shell.js wireAudio. */
.mobile-audio-bar { display: none; }
.mobile-audio-bar .chapter-audio-source { display: none; }
@media (max-width: 768px) {
  .mobile-audio-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 65px;
    z-index: 49;
    height: 44px;
    padding: 0 16px;
    background: var(--color-bg, #fcfbf8);
    border-bottom: 1px solid var(--color-rule, rgba(168, 40, 40, 0.22));
    font-family: 'Newsreader', serif;
    font-size: 12.5px;
    color: var(--color-text-secondary, #2a2a26);
    /* Match the topnav 100vw breakout so the bar spans full width when
       body has padding. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
  .mobile-audio-bar .mab-play {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--color-accent, #a82828);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }
  .mobile-audio-bar .mab-play svg {
    width: 12px;
    height: 14px;
    fill: currentColor;
  }
  .mobile-audio-bar .mab-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
  }
  .mobile-audio-bar .mab-time {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary, #2a2a26);
    font-size: 11.5px;
  }

  /* Chapmast was sticky at top:65 (just below topnav). With the audio bar
     occupying y=65..109, push chapmast down so it doesn't sit underneath. */
  body.chapter-shell .chapmast { top: 109px; }

  /* Hide the desktop audio block from the sidebar/sheet on mobile —
     the pinned bar is the canonical mobile UI. */
  body.chapter-shell .chapter-sidebar .sidebar-block.accent { display: none; }
}

/* T-6.6a — Chapter slider touch targets at <768px. Expand thumb hit area to
   44×44 (was 20×20) so finger taps register on first try. */
@media (max-width: 768px) {
  .slider-container input[type="range"] {
    height: 44px;
    background: transparent;
  }
  .slider-container input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: var(--color-slider-track);
    border-radius: 3px;
  }
  .slider-container input[type="range"]::-moz-range-track {
    height: 6px;
    background: var(--color-slider-track);
    border-radius: 3px;
  }
  .slider-container input[type="range"]::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
    margin-top: -11px;
    box-shadow: 0 0 0 8px transparent;
  }
  .slider-container input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
  }
}