:root {
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #5a5a5a;
  --accent: #1d4ed8;
  --accent-bg: #dbeafe;
  --eq-bg: #ede9fe;
  --eq-fg: #4c1d95;
  --fig-bg: #e6f4ea;
  --fig-fg: #1e4620;
  --current: #fff7d6;
  --border: #d0d0d0;
  /* Table-only colors (kept separate from --eq-* which is shared with code blocks). Solid deep-violet
     header with white text = max hue+luminance separation (8.98:1 AAA); the grid border is a violet that
     clears the 3:1 UI-component threshold (5.70:1) so cells actually read as separated. */
  --tbl-th-bg: #5b21b6; --tbl-th-fg: #ffffff; --tbl-border: #7c3aed;
  --h1-bg: #f1f4f9; --h2-bg: #f6f8fb; --h3-bg: #fafbfd; --nav-bg: #f7f8fa;
  --orient-bg: #e6f6f8; --orient-bar: #0e7490; --orient-bd: #b9e4ec;
}
/* Dark palette. Applies (a) when the OS prefers dark — UNLESS the user forced light via the in-app
   toggle — and (b) whenever the toggle sets data-theme="dark" on a light OS. Both branches carry the
   same values so the toggle recolors the WHOLE page (chrome + reading pane), not just the chrome.
   (klaro-design.css already keys its chrome off data-theme; this brings the transcript in line.) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15161a; --fg: #f1f1f1; --muted: #b5b5b5; --accent: #93c5fd; --accent-bg: #1e3a8a;
    --eq-bg: #3b2a6b; --eq-fg: #e9d5ff; --fig-bg: #1e3a24; --fig-fg: #c8e6c9; --current: #4a431f; --border: #3a3b40;
    --tbl-th-bg: #6d28d9; --tbl-th-fg: #ffffff; --tbl-border: #8b76d9; /* white-on-violet 7.10:1 AAA; border 4.90:1 (UI ok) */
    --h1-bg: #20283a; --h2-bg: #1c2230; --h3-bg: #191c24; --nav-bg: #1b1d24;
    --orient-bg: #112a30; --orient-bar: #5fc7d8; --orient-bd: #244a52;
  }
}
:root[data-theme="dark"] {
  --bg: #15161a; --fg: #f1f1f1; --muted: #b5b5b5; --accent: #93c5fd; --accent-bg: #1e3a8a;
  --eq-bg: #3b2a6b; --eq-fg: #e9d5ff; --fig-bg: #1e3a24; --fig-fg: #c8e6c9; --current: #4a431f; --border: #3a3b40;
  --tbl-th-bg: #6d28d9; --tbl-th-fg: #ffffff; --tbl-border: #8b76d9;
  --h1-bg: #20283a; --h2-bg: #1c2230; --h3-bg: #191c24; --nav-bg: #1b1d24;
  --orient-bg: #112a30; --orient-bar: #5fc7d8; --orient-bd: #244a52;
}

* { box-sizing: border-box; }
body {
  font-family: "Times New Roman", Times, serif;
  font-size: 18px; line-height: 1.7; color: var(--fg); background: var(--bg);
  margin: 0 auto; max-width: 1100px; padding: 1.5rem;
  --gutter: max(0px, calc((100vw - 1100px) / 2)); /* the empty left/right margin when the window is wider than the body */
  --nav-inset: 28px; /* keep the full-bleed sidebar a little off the window edge, not flush against it */
}
main { max-width: 820px; }                          /* keep the reading column a comfortable width */
.doc-layout:not(.with-nav) main { margin: 0 auto; } /* center it when there is no sidebar */
h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .5rem; }
.meta, .hint { color: var(--muted); font-size: .95rem; }
.hint { margin-top: 0; }
.brand { color: var(--muted); font-size: .95rem; margin: 0 0 .4rem; }
.brand a { color: var(--accent); text-decoration: none; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--accent-bg); padding: .5rem 1rem; border-radius: 6px; z-index: 10; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.status { min-height: 1.5rem; color: var(--muted); font-size: .95rem; }

/* keep the control panel compact so buttons wrap to fill it, instead of clustering left in a
   full-width box that leaves a big empty panel ("unused sidebar") on the right on wide windows */
#controls { border: 1px solid var(--border); border-radius: 12px; padding: 1rem; margin: .5rem auto 1rem; max-width: 600px; }
.row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
button {
  font: inherit; font-size: 1rem; padding: .7rem 1rem; min-height: 48px;
  border: 2px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--fg);
  cursor: pointer; display: inline-flex; align-items: center; gap: .5rem;
}
button:hover { border-color: var(--accent); }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#play { background: var(--accent-bg); border-color: var(--accent); font-weight: 600; }
kbd {
  font-family: "Times New Roman", Times, serif; font-size: .75rem; color: var(--muted);
  border: 1px solid var(--border); border-radius: 4px; padding: 0 .3rem;
}

.progress { height: 10px; background: var(--border); border-radius: 6px; overflow: hidden; margin-top: .5rem; }
#bar { height: 100%; width: 0; background: var(--accent); transition: width .1s linear; }
.time { color: var(--muted); font-variant-numeric: tabular-nums; margin: .35rem 0 0; }

#transcript { font-size: 1.15rem; }
.seg { padding: .35rem .5rem; border-radius: 8px; cursor: pointer; border: 2px solid transparent; }
.seg:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.seg.current { background: var(--current); border-color: var(--accent); }
/* headings: shaded by level (subtle tint bg + an accent left bar) with full-contrast text. The
   document's own H1 reads as a title block, H2/H3 as a hierarchy. */
.seg.heading { font-weight: 700; margin-top: 1.2rem; font-size: 1.3rem; color: var(--fg); border-radius: 7px; padding: .3rem .6rem; border-left: 3px solid var(--accent); }
.seg.heading.hlvl1 { font-size: 1.8rem; background: var(--h1-bg); padding: .5rem .7rem; margin-top: .5rem; }
.seg.heading.hlvl2 { font-size: 1.35rem; background: var(--h2-bg); }
.seg.heading.hlvl3 { font-size: 1.15rem; background: var(--h3-bg); border-left-width: 2px; }
.seg.heading.hlvl4, .seg.heading.hlvl5, .seg.heading.hlvl6 { font-size: 1.05rem; background: var(--h3-bg); border-left-width: 2px; }
.seg.heading.current { background: var(--current); } /* the heading being read still highlights clearly */

/* left-sidebar outline: navigate the document's contents while reading (docs with >= 3 headings) */
/* sidebar width: a window-responsive default (clamp) the user can override by dragging the divider */
.doc-layout.with-nav { display: grid; grid-template-columns: var(--sidebar-w, clamp(170px, 22%, 340px)) 10px minmax(0, 1fr); gap: 0; align-items: start; }
.doc-layout.with-nav main { padding-left: 1.1rem; }
/* on a wide window the centered body leaves an empty left margin -> let the Contents sidebar bleed into
   it (out toward the window edge) and use that space, while the reading column stays centered/in place. */
.doc-layout.with-nav .doc-nav { --nav-bleed: max(0px, calc(var(--gutter) - var(--nav-inset))); margin-left: calc(-1 * var(--nav-bleed)); width: calc(100% + var(--nav-bleed)); }
.nav-resizer { position: sticky; top: 1rem; height: calc(100vh - 2rem); cursor: col-resize; border-radius: 3px; background: transparent; align-self: start; }
.nav-resizer:hover, .nav-resizer:focus-visible { background: var(--accent); outline: none; }
.doc-layout:not(.with-nav) .nav-resizer { display: none; }
@media (max-width: 820px) { .nav-resizer { display: none; } }
.doc-nav { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; background: var(--nav-bg); border: 1px solid var(--border); border-radius: 10px; padding: .8rem .9rem; }
.doc-nav[hidden] { display: none; }
.doc-nav .nav-title { font-size: 1rem; margin: 0 0 .5rem; }
.doc-nav ul { list-style: none; padding: 0; margin: 0; }
.doc-nav li { margin: .12rem 0; }
.doc-nav a { color: var(--accent); text-decoration: none; display: block; padding: .18rem .4rem; border-radius: 5px; line-height: 1.3; }
.doc-nav a:hover, .doc-nav a:focus-visible { background: var(--accent-bg); outline: none; }
.doc-nav a.nav-active { background: var(--accent-bg); font-weight: 700; } /* the entry just read / jumped to */
.nav-l2 { padding-left: .8rem; } .nav-l3 { padding-left: 1.6rem; } .nav-l4, .nav-l5, .nav-l6 { padding-left: 2.2rem; }
@media (max-width: 820px) { .doc-layout.with-nav { display: block; } .doc-nav { position: static; max-height: 14rem; margin-bottom: 1rem; } }
/* the opening "Orientation message" gets its own labelled, distinctly-colored (teal) box */
.seg.announcement { font-style: italic; color: var(--fg); background: var(--orient-bg); border: 1px solid var(--orient-bd); border-left: 4px solid var(--orient-bar); border-radius: 8px; padding: .55rem .8rem; margin-bottom: 1.1rem; }
.orient-tag { display: block; font-style: normal; font-weight: 700; font-size: .8em; color: var(--orient-bar); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem; }
/* paragraph-aware rendering: prose sentences of one paragraph flow INLINE within a <p>; only the
   paragraph breaks show as gaps. The current sentence is highlighted inline (no block box). */
.para { margin: .7rem 0; }
.para .seg { display: inline; padding: 0; border: 0; border-radius: 3px; }
.para .seg.current { background: var(--current); box-shadow: 0 0 0 3px var(--current); }
.para .seg:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Equations render as plain KaTeX with NO always-on shading — a short formula no longer sits in a heavy
   purple block. The equation still highlights when it's the one being READ (.seg.current) or keyboard-
   FOCUSED (.seg:focus-visible), and "Equation N:" + the spoken "press Alt E" hint mark it as explorable. */
.seg.equation { font-family: "Times New Roman", Times, serif; }
.eq-tag { font-weight: 700; }
.seg.figure { background: var(--fig-bg); color: var(--fig-fg); }
.fig-tag { font-weight: 700; }
.eq-visual { font-size: 1.25rem; margin: .3rem 0; overflow-x: auto; }
.eq-visual .katex-display { text-align: left; margin: 0; }
.fig-img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; margin: .4rem 0; background: #fff; }
.read-as { font-size: .78rem; color: var(--muted); margin: .15rem 0 .1rem; font-family: "Times New Roman", Times, serif; font-style: italic; }
.tbl-tag { font-weight: 700; }
.seg.table table { border-collapse: collapse; margin: .4rem 0; font-size: .95rem; font-family: "Times New Roman", Times, serif; }
.seg.table td .katex, .seg.table th .katex { font-size: 1em; }
.seg.table th, .seg.table td { border: 1px solid var(--tbl-border); padding: .25rem .6rem; text-align: left; }
.seg.table th { background: var(--tbl-th-bg); color: var(--tbl-th-fg); font-weight: 700; }
.seg.table caption { caption-side: top; font-weight: 700; padding: .2rem 0; text-align: left; }
.seg.table .table-note, .seg.figure .figure-note { font-size: .9rem; color: var(--muted); margin: .35rem 0 .2rem; line-height: 1.45; }
.seg.table .table-note::before { content: "Table note: "; font-weight: 700; color: var(--fg); }
.seg.figure .figure-note::before { content: "Figure note: "; font-weight: 700; color: var(--fg); }
/* Selected cell (Alt+T table mode): override the header's white text with the theme body color so it stays
   readable on the pale --current highlight (white-on-#fff7d6 would be 1.07:1; --fg gives 16.18:1 / 8.80:1). */
.seg.table td.current, .seg.table th.current { outline: 3px solid var(--accent); outline-offset: -1px; background: var(--current); color: var(--fg); }
.code-tag { font-weight: 700; }
.seg.code pre.code-block { margin: .4rem 0; padding: .4rem .2rem; background: var(--eq-bg); color: var(--eq-fg); border-radius: 8px; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; line-height: 1.4; }
.code-line { display: flex; min-height: 1.3em; padding: 0 .4rem; }
.code-line.current { background: var(--current); outline: 2px solid var(--accent); outline-offset: -2px; }
.code-ln { display: inline-block; min-width: 2.2em; text-align: right; margin-right: .8rem; color: var(--muted); user-select: none; flex: 0 0 auto; }
.code-src { white-space: pre-wrap; word-break: break-word; }
/* Hide the "read aloud as:" spoken-text preview under media segments (equation / figure / table / code):
   it duplicates what the audio already voices and clutters the reading view. Scoped per-kind so prose
   sentences (which share class .word) are untouched. Audio, segment-level highlight, seek, and each seg's
   aria-label are unaffected — the word spans still build into wordEls for index alignment, just hidden. */
.seg.equation .read-as, .seg.equation .word,
.seg.figure   .read-as, .seg.figure   .word,
.seg.table    .read-as, .seg.table    .word,
.seg.code     .read-as, .seg.code     .word { display: none; }
.bullet-mark { font-weight: 700; color: var(--muted); }
.bullet-mark.lvl2 { margin-left: 1.4rem; }
/* The active (currently-spoken) word: text takes the PAGE-background color so it always contrasts with the
   accent fill in BOTH themes — white-on-#1d4ed8 (6.70:1) in light, dark-on-#93c5fd (10.03:1) in dark. (A
   fixed #fff was only 1.80:1 on the lighter dark-mode accent.) */
.word.active { background: var(--accent); color: var(--bg); border-radius: 4px; }
/* HTML hyperlinks preserved from the source: clickable, keyboard-focusable, clearly a link */
.klaro-link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; font-weight: 600; cursor: pointer; }
.klaro-link:hover { background: var(--accent-bg); border-radius: 3px; }
.klaro-link.active { color: var(--bg); } /* stay legible on the accent fill in both themes during playback */
.klaro-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
/* equation step-mode: the display equation broken into numbered, navigable pieces (line/term) */
.eq-pieces { margin: .5rem 0 .25rem; border-left: 3px solid var(--accent); padding-left: .6rem; display: flex; flex-direction: column; gap: .15rem; }
.eq-piece { display: flex; align-items: baseline; gap: .6rem; padding: .15rem .4rem; border-radius: 5px; }
.eq-piece-num { color: var(--muted); font-size: .8em; min-width: 1.6em; text-align: right; white-space: nowrap; }
.eq-piece.current { background: var(--current); outline: 2px solid var(--accent); }
.eq-piece.has-kids { cursor: pointer; } /* the ▸ in the number marks a step you can drill into (right arrow) */
.eq-piece.has-kids .eq-piece-num { color: var(--accent); font-weight: 700; }
.eq-crumb { color: var(--muted); font-size: .8em; margin-bottom: .2rem; }

.eq-hint { font-size: .8rem; color: var(--muted); margin: .5rem 0 .25rem; font-family: "Times New Roman", Times, serif; }
.parts { display: flex; flex-direction: column; gap: .25rem; margin-top: .25rem; }
.part {
  text-align: left; font-size: .95rem; padding: .35rem .6rem; min-height: 0;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--fg);
  font-family: "Times New Roman", Times, serif; cursor: pointer; width: fit-content; max-width: 100%;
}
.part:hover { border-color: var(--accent); }
.part.part-active { background: var(--accent); color: #fff; border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  #bar { transition: none; }
  .seg { scroll-behavior: auto; }
}
/* High-contrast overrides follow the EFFECTIVE theme (data-theme), not just the OS — otherwise toggling
   theme on a high-contrast device drops the reinforcement (or puts a dark-page grid on a light table). */
@media (prefers-contrast: more) {
  :root:not([data-theme="dark"]) { --border: #000; --muted: #333; --tbl-border: #000; } /* effective light: black grid line = 21:1 */
  .word.active { outline: 2px solid #000; }
}
/* effective dark: keep a bright (not black) grid line visible on the dark page — two branches mirror the
   palette: OS-dark unless forced light, and toggle-forced dark on any OS. */
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --tbl-border: #c9bdf2; }
}
@media (prefers-contrast: more) {
  :root[data-theme="dark"] { --tbl-border: #c9bdf2; }
}