/* ============================================================
   Graph Theory: From Zero to Diestel — course stylesheet
   ============================================================ */

/* Palette note: ink is deliberately held short of black-on-white. Body text sits
   near 8:1 against the page rather than the 15:1 of #000 on #fff, which is well
   clear of the 4.5:1 floor while reducing the glare that makes dense mathematics
   tiring to read for long stretches. */

:root {
  --paper:      #fbf9f3;
  --panel:      #fefdfa;
  --ink:        #423d35;   /* soft dark brown-grey, not black */
  --ink-soft:   #6f6a5f;
  --line:       #e7e1d3;
  --accent:     #6d4bc4;   /* muted violet — links, highlights */
  --accent-soft:#efeafb;
  --gold:       #9a7115;
  --gold-soft:  #f8f2e0;
  --green:      #2c7355;
  --green-soft: #e8f2ec;
  --red:        #a34a3e;
  --red-soft:   #f8ece9;
  --blue:       #2d5f96;
  --blue-soft:  #eaf1f8;
  --code-bg:    #f3efe5;
  --shadow:     0 1px 2px rgba(66,61,53,.05), 0 6px 20px rgba(66,61,53,.04);
  /* SVG figure tokens */
  --v-fill:     #fefdfa;
  --v-stroke:   #4d483f;
  --e-stroke:   #837c6f;
  --hl:         #6d4bc4;
  --hl2:        #9a7115;
  --hl3:        #2c7355;
}

[data-theme="dark"] {
  --paper:      #1b1926;
  --panel:      #232030;
  --ink:        #cac4b8;   /* warm off-white, dimmed to cut halation */
  --ink-soft:   #948e82;
  --line:       #383349;
  --accent:     #b6a0f0;
  --accent-soft:#2c2743;
  --gold:       #c9a04a;
  --gold-soft:  #2c2618;
  --green:      #6ab894;
  --green-soft: #1a2a22;
  --red:        #d98d80;
  --red-soft:   #2f1e1b;
  --blue:       #85b0e0;
  --blue-soft:  #1a2431;
  --code-bg:    #282436;
  --shadow:     0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.22);
  --v-fill:     #232030;
  --v-stroke:   #b8b2a6;
  --e-stroke:   #7d776b;
  --hl:         #b6a0f0;
  --hl2:        #c9a04a;
  --hl3:        #6ab894;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Crimson Pro is the closest widely-hosted face to Latin Modern, the font LaTeX
   sets by default; MathJax renders formulas in its own TeX fonts, so the body
   text is chosen to sit beside those without clashing. Weight 380 keeps the page
   light: 400 reads heavy at this size against a warm ground. */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Crimson Pro", "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 1.19rem;
  font-weight: 380;
  line-height: 1.78;
  letter-spacing: 0.004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-theme="dark"] body { font-weight: 350; }   /* light text blooms; thin it back */

h1, h2, h3, h4, .sans {
  font-family: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.3;
  letter-spacing: -0.012em;
  font-weight: 560;
}

h1 { font-size: 1.95rem; margin: 0.4em 0 0.5em; font-weight: 600; }
h2 { font-size: 1.38rem; margin: 2.2em 0 0.6em; padding-top: 0.7em; border-top: 1px solid var(--line); }
h3 { font-size: 1.1rem;  margin: 1.8em 0 0.5em; }
h4 { margin: 1.4em 0 0.4em; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .07em; font-size: .82rem; font-weight: 600; }

p { margin: 0.95em 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.15em; }

strong { font-weight: 600; }
em { font-style: italic; }

/* Formulas inherit the softened ink. Crimson Pro has a small x-height, so
   MathJax's TeX faces read oversized next to it at their natural size; trimming
   them slightly makes the two sit on the same optical line. The page config also
   applies a 1.02 scale, so the effective size lands just under the body text. */
mjx-container { font-size: 0.955em; }
mjx-container[display="true"] { margin: 1.15em 0 !important; }

code, pre {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.88em;
  background: var(--code-bg);
  border-radius: 5px;
}
code { padding: 0.12em 0.35em; }
pre  { padding: 0.9em 1.1em; overflow-x: auto; line-height: 1.55; }
pre code { background: none; padding: 0; }

/* ---------- layout ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  font-family: "Inter", -apple-system, sans-serif;
}
.site-header .bar {
  max-width: 860px;
  margin: 0 auto;
  padding: 0.55em 1.2rem;
  display: flex;
  align-items: center;
  gap: 1em;
}
.site-header .home {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
  white-space: nowrap;
}
.site-header .home:hover { text-decoration: none; color: var(--accent); }
.site-header .chapter-label {
  flex: 1;
  font-size: 0.85rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.site-header .navbtns { display: flex; gap: 0.4em; }
.site-header .navbtns a, .site-header .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2em;
  height: 2em;
  padding: 0 0.55em;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font-size: 0.85rem;
  cursor: pointer;
}
.site-header .navbtns a:hover, .site-header .theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}
.site-header .navbtns a.disabled { opacity: 0.35; pointer-events: none; }
.theme-toggle { font-family: inherit; }

/* ~68 characters per line at the body size: the range where long-form reading
   is most comfortable. Figures and wide tables scale down to fit rather than
   breaking out of the measure. */
main {
  max-width: 47rem;
  margin: 0 auto;
  padding: 1.5rem 1.2rem 4rem;
}

.chapter-kicker {
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 1.5em;
}

.lede {
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0.2em 0 1.4em;
}

/* auto-generated in-page TOC */
.page-toc {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.9em 1.3em;
  margin: 1.6em 0 2.4em;
  font-family: "Inter", sans-serif;
  font-size: 0.88rem;
  box-shadow: var(--shadow);
}
.page-toc .toc-title {
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: 0.5em;
}
.page-toc ol { margin: 0; padding-left: 1.3em; }
.page-toc li { margin: 0.28em 0; }

/* keeps inline math glued to the punctuation that follows it (see course.js) */
.math-nobreak { white-space: nowrap; }

/* ---------- content boxes ---------- */

.definition, .theorem, .example, .intuition, .pitfall, .real-world, .notation-block {
  border-radius: 10px;
  padding: 1.05em 1.4em;
  margin: 1.6em 0;
  border: 1px solid var(--line);
  border-left-width: 3px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.definition   { border-left-color: var(--blue); }
.theorem      { border-left-color: var(--accent); }
.example      { border-left-color: var(--green); }
.intuition    { border-left-color: var(--gold); background: var(--gold-soft); box-shadow: none; }
.pitfall      { border-left-color: var(--red);  background: var(--red-soft);  box-shadow: none; }
.real-world   { border-left-color: var(--green); background: var(--green-soft); box-shadow: none; }
.notation-block { border-left-color: var(--ink-soft); }

.definition > .box-tag, .theorem > .box-tag, .example > .box-tag,
.intuition > .box-tag, .pitfall > .box-tag, .real-world > .box-tag {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.35em;
}
.definition > .box-tag { color: var(--blue); }
.theorem    > .box-tag { color: var(--accent); }
.example    > .box-tag { color: var(--green); }
.intuition  > .box-tag { color: var(--gold); }
.pitfall    > .box-tag { color: var(--red); }
.real-world > .box-tag { color: var(--green); }

.definition p:last-child, .theorem p:last-child, .example p:last-child,
.intuition p:last-child, .pitfall p:last-child, .real-world p:last-child { margin-bottom: 0.2em; }

/* a short numbered list inside a boxed note, tightened up so it reads as a
   checklist rather than as prose */
ol.traps { margin: .5em 0 .1em; padding-left: 1.3em; }
ol.traps li { margin: .45em 0; }

/* ---------- notation table ---------- */

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.4em 0;
  font-size: 0.95em;
}
.table-wrap { overflow-x: auto; margin: 1.4em 0; }
.table-wrap table { margin: 0; }
th, td {
  border: 1px solid var(--line);
  padding: 0.5em 0.8em;
  text-align: left;
  vertical-align: top;
}
th {
  background: var(--accent-soft);
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--panel) 60%, var(--paper)); }

/* ---------- figures ---------- */

figure {
  margin: 1.8em 0;
  text-align: center;
}
figure svg {
  max-width: 100%;
  height: auto;
}
figcaption {
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.6em;
  text-align: center;
}
figcaption .fig-num { font-weight: 700; color: var(--ink); }

/* ---------- plates: photographs, engravings, original paper figures ----------
   Diagrams are drawn as inline SVG and numbered "Figure 1.N". Sourced images are
   numbered "Plate 1.A" in a separate series, so adding one never renumbers a
   figure that other chapters link to. Every plate carries a credit line; the
   validator refuses a page where one does not. */

figure.plate { margin: 2em 0; }
figure.plate img {
  max-width: 100%;
  max-height: 470px;
  width: auto;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}
[data-theme="dark"] figure.plate img {
  /* Scanned engravings and old photographs are bright white-on-black rectangles
     against a dark page. Taking a little off the top stops them glaring. */
  filter: brightness(.9) contrast(1.02);
}
figure.plate figcaption { max-width: 42rem; margin-left: auto; margin-right: auto; }
figcaption .credit {
  display: block;
  margin-top: .45em;
  font-size: .78rem;
  color: var(--ink-soft);
  opacity: .85;
}
figcaption .credit a { color: inherit; text-decoration-color: var(--line); }
figcaption .credit a:hover { color: var(--accent); }

/* two plates side by side, for a before-and-after or a pair of maps */
.plate-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2em;
  justify-content: center;
  align-items: flex-start;
  margin: 2em 0;
}
.plate-pair figure.plate { flex: 1 1 300px; margin: 0; }
.plate-pair figure.plate img { max-height: 330px; }

@media print {
  figure.plate img { box-shadow: none; max-height: 300px; }
}

/* SVG conventions (writers use these classes inside inline SVGs) */
svg .gv  { fill: var(--v-fill); stroke: var(--v-stroke); stroke-width: 2; }
svg .ge  { stroke: var(--e-stroke); stroke-width: 2; fill: none; }
svg .gl  { fill: var(--ink); font-family: "Inter", sans-serif; font-size: 14px; }
svg .gl-math { font-style: italic; font-family: Georgia, serif; }
svg .hl  { stroke: var(--hl); }
svg .hl-fill { fill: var(--hl); }
svg .hl2 { stroke: var(--hl2); }
svg .hl2-fill { fill: var(--hl2); }
svg .hl3 { stroke: var(--hl3); }
svg .hl3-fill { fill: var(--hl3); }
/* highlight ring drawn over an existing vertex: no fill, so the label
   underneath stays visible and is not duplicated per animation step */
svg .gv-ring { fill: none; }
svg .thick { stroke-width: 3.5; }
svg .dashed { stroke-dasharray: 6 5; }
svg .soft { opacity: 0.35; }

/* ---------- section reader ---------- */

.sec[hidden] { display: none; }
.sec > h2:first-child,
.sec-intro + h2 { border-top: none; padding-top: 0; margin-top: 0.2em; }
.sec-intro { margin-bottom: 0.5em; }

.reader-bar {
  position: sticky;
  top: 3.1rem;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.55em 0;
  margin-bottom: 1.6em;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  font-family: "Inter", sans-serif;
}
.reader-meter { display: flex; align-items: center; gap: 0.7em; flex: 1; min-width: 0; }
.reader-dots { display: flex; gap: 4px; flex-wrap: wrap; }
.reader-dots .dot {
  width: 9px; height: 9px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.reader-dots .dot:hover { transform: scale(1.35); border-color: var(--accent); }
.reader-dots .dot.seen { background: color-mix(in srgb, var(--accent) 35%, transparent); border-color: transparent; }
.reader-dots .dot.on   { background: var(--accent); border-color: var(--accent); transform: scale(1.25); }
.reader-count { font-size: 0.78rem; color: var(--ink-soft); white-space: nowrap; }

.reader-allbtn {
  font-family: inherit;
  font-size: 0.76rem;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0.35em 0.7em;
  cursor: pointer;
  white-space: nowrap;
}
.reader-allbtn:hover { border-color: var(--accent); color: var(--accent); }
.reader-allbtn.on { border-color: var(--accent); color: var(--accent); }

.reader-nav {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  margin-top: 2.8em;
  padding-top: 1.4em;
  border-top: 1px solid var(--line);
  font-family: "Inter", sans-serif;
}
.reader-nav button {
  flex: 1;
  max-width: 48%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.75em 1.05em;
  background: var(--panel);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.reader-nav button:hover:not(:disabled) { border-color: var(--accent); }
.reader-nav button:disabled { opacity: 0.3; cursor: default; }
.reader-nav .reader-next { text-align: right; margin-left: auto; }
.reader-nav .dir {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: 0.2em;
}
.reader-nav .lbl { display: block; line-height: 1.35; }

main.reading-all .sec { border-bottom: 1px dashed var(--line); padding-bottom: 1.5em; }
main.reading-all .sec:last-of-type { border-bottom: none; }

/* ---------- checkpoints (inline questions between sections) ---------- */

.checkpoint {
  margin: 2.2em 0 1.2em;
  padding: 1.1em 1.35em 1.2em;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--paper));
}
.checkpoint::before {
  content: "Checkpoint";
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6em;
}
.checkpoint .quiz-q {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.checkpoint .quiz-q + .quiz-q {
  margin-top: 1.4em;
  padding-top: 1.3em;
  border-top: 1px solid var(--line);
}

/* ---------- quiz ---------- */

.quiz {
  margin-top: 3em;
  border-top: 2px solid var(--accent);
  padding-top: 0.5em;
}
.quiz-q {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.1em 1.3em;
  margin: 1.3em 0;
  box-shadow: var(--shadow);
}
.quiz-q .quiz-question { font-weight: 600; margin-top: 0; }
.quiz-q .qnum {
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
}
.quiz-options { list-style: none; padding: 0; margin: 0.8em 0 0; }
.quiz-options li { margin: 0.45em 0; }
.quiz-options button {
  display: flex;
  gap: 0.7em;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 0.97em;
  line-height: 1.5;
  padding: 0.55em 0.9em;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.quiz-options button:hover:not(:disabled) { border-color: var(--accent); }
.quiz-options button:disabled { cursor: default; }
.quiz-options .opt-letter {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  color: var(--ink-soft);
  flex: 0 0 auto;
}
.quiz-options button.correct {
  border-color: var(--green);
  background: var(--green-soft);
}
.quiz-options button.correct .opt-letter { color: var(--green); }
.quiz-options button.wrong {
  border-color: var(--red);
  background: var(--red-soft);
}
.quiz-options button.wrong .opt-letter { color: var(--red); }
.quiz-explain {
  display: none;
  margin-top: 0.9em;
  padding: 0.7em 1em;
  border-radius: 8px;
  background: var(--blue-soft);
  border-left: 3px solid var(--blue);
  font-size: 0.95em;
}
.quiz-q.answered .quiz-explain { display: block; }
.quiz-score {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  text-align: center;
  padding: 1em;
  margin: 1.5em 0;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--ink);
  display: none;
}
.quiz-score.visible { display: block; }

/* ---------- references / citations ---------- */

.refs {
  margin-top: 3em;
  padding-top: 1em;
  font-size: 0.92em;
}
.refs ol { padding-left: 1.5em; }
.refs li { margin: 0.55em 0; }
sup.cite { font-size: 0.72em; }
sup.cite a { font-family: "Inter", sans-serif; font-weight: 600; }

/* ---------- prev/next footer ---------- */

.chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  margin-top: 3.5em;
  padding-top: 1.5em;
  border-top: 1px solid var(--line);
  font-family: "Inter", sans-serif;
}
.chapter-nav a {
  flex: 1;
  max-width: 48%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.8em 1.1em;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.chapter-nav a:hover { border-color: var(--accent); text-decoration: none; }
.chapter-nav .dir {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: 0.25em;
}
.chapter-nav .next { text-align: right; margin-left: auto; }

/* ---------- index page cards ---------- */

.chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1em;
  margin: 2em 0;
}
.chapter-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.1em 1.2em;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform .12s, border-color .12s;
}
.chapter-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  text-decoration: none;
}
.chapter-card .num {
  font-family: "Inter", sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.chapter-card h3 { margin: 0.25em 0 0.35em; font-size: 1.05rem; }
.chapter-card p { margin: 0; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; }
.part-label {
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 2.5em 0 0.8em;
}

@media (max-width: 640px) {
  body { font-size: 1.09rem; line-height: 1.72; }
  h1 { font-size: 1.55rem; }
  .site-header .chapter-label { display: none; }
  .chapter-nav { flex-direction: column; }
  .chapter-nav a { max-width: 100%; }
  /* figures stop breaking out of the measure once the measure is the screen */
  figure, .table-wrap { width: 100%; margin-left: 0; transform: none; }
  .reader-bar { flex-wrap: wrap; gap: 0.5em; }
  .reader-allbtn { font-size: 0.72rem; }
  .reader-dots .dot { width: 7px; height: 7px; }
  .reader-nav { flex-direction: column; }
  .reader-nav button { max-width: 100%; }
  .reader-nav .reader-next { text-align: left; }
}

@media (max-width: 640px) {
  figure svg { width: 100%; height: auto; }
}

@media print {
  .site-header, .chapter-nav, .theme-toggle,
  .reader-bar, .reader-nav { display: none; }
  /* the reader hides all but the current section on screen; printing wants the
     whole chapter, so override the inline hidden state */
  .sec[hidden] { display: block !important; }
  .sec { break-inside: auto; }
  h2 { break-after: avoid; }
  figure, .definition, .theorem, .checkpoint { break-inside: avoid; }
  .quiz-explain { display: block !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
}

/* ============================================================
   Narration, synced animation, and read/watch modes
   ============================================================ */

.narrator {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin: 1.2em 0 1.8em;
  padding: 0.6em 0.9em;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  font-family: "Inter", sans-serif;
  box-shadow: var(--shadow);
}
.nr-play {
  flex: 0 0 auto;
  width: 2.3em; height: 2.3em;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
}
.nr-play:hover:not(:disabled) { background: var(--accent); color: var(--panel); }
.nr-play:disabled { opacity: 0.4; cursor: default; }
.nr-play.playing { background: var(--accent); color: var(--panel); }
.nr-scrub {
  flex: 1;
  accent-color: var(--accent);
  height: 3px;
  cursor: pointer;
}
.nr-time, .nr-who {
  font-size: 0.74rem;
  color: var(--ink-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.nr-who { border-left: 1px solid var(--line); padding-left: 0.75em; }

/* while a section is being narrated, quiet the surrounding chrome slightly */
.sec.narrating .checkpoint { opacity: 0.5; transition: opacity .4s; }

/* ---------- stepped reveal ---------- */
/* Anything carrying data-step starts hidden only once JS confirms it can drive
   the sequence; without JS every step stays visible (see .no-anim below). */
[data-step] {
  opacity: 1;
  transition: opacity .45s ease, filter .45s ease;
}
.has-narration [data-step]:not(.step-shown) {
  opacity: 0.08;
  filter: saturate(0.2);
}
.has-narration [data-step].step-shown { opacity: 1; filter: none; }
.has-narration [data-step].step-current {
  animation: step-pop .5s ease;
}
@keyframes step-pop {
  0%   { filter: brightness(1); }
  35%  { filter: brightness(1.45); }
  100% { filter: brightness(1); }
}

/* boxes light up while the narrator is on them */
.definition.anim-active, .theorem.anim-active,
.example.anim-active, .intuition.anim-active {
  border-left-width: 5px;
  box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow);
  transition: box-shadow .35s ease, border-left-width .35s ease;
}

/* formula term reveal: inline spans that build an equation piece by piece */
.eq-term { transition: opacity .4s ease; }
.has-narration .eq-term:not(.step-shown) { opacity: 0.15; }
.has-narration .eq-term.step-current { color: var(--accent); }

/* ---------- read vs watch ---------- */
.transcript { display: none; }
.transcript p { margin: 0.95em 0; }

:root[data-mode="read"] .narrator { display: none; }
:root[data-mode="read"] .transcript { display: block; }
:root[data-mode="read"] .condensed { display: none; }
:root[data-mode="read"] .has-narration [data-step] { opacity: 1 !important; filter: none !important; }

:root[data-mode="watch"] .transcript { display: none; }

.mode-toggle {
  font-family: "Inter", sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0 0.7em;
  height: 2em;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink-soft);
  cursor: pointer;
}
.mode-toggle:hover { border-color: var(--accent); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  [data-step], .eq-term { transition: none; }
  .has-narration [data-step]:not(.step-shown) { opacity: 1; filter: none; }
  .has-narration [data-step].step-current { animation: none; }
}

@media print {
  .narrator, .mode-toggle { display: none; }
  [data-step] { opacity: 1 !important; filter: none !important; }
  .transcript { display: none; }
}

/* switcher shown when a section has more than one recorded take */
.take-picker {
  display: flex;
  gap: 0.4em;
  margin: 1.2em 0 0.6em;
  font-family: "Inter", sans-serif;
}
.take-picker .take {
  font-family: inherit;
  font-size: 0.74rem;
  padding: 0.35em 0.8em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-soft);
  cursor: pointer;
}
.take-picker .take:hover { border-color: var(--accent); color: var(--accent); }
.take-picker .take.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
:root[data-mode="read"] .take-picker { display: flex; }

/* ============================================================
   Königsberg bridges game
   ------------------------------------------------------------
   The map carries its own palette rather than the page's figure tokens:
   a chart of a city wants paper, water and timber, not the black-on-cream
   of the diagrams. Everything else — panel, buttons, prose — stays on the
   page tokens so the box still belongs to the chapter.
   ============================================================ */

.bridges {
  --kb-water:      #cadcec;
  --kb-water-line: #a3c1da;
  --kb-shore:      #8aa7c0;
  --kb-land:       #f4ecda;
  --kb-land-edge:  #c9b894;
  --kb-land-hi:    #fbf3e0;
  --kb-deck:       #a97f3d;
  --kb-deck-dark:  #6f5324;
  --kb-open:       #d29a2e;
  --kb-spent:      #9d9689;
  --kb-map-ink:    #5a5142;
  --kb-map-faint:  #8b7f6a;

  margin: 2.2em 0;
  padding: 1.15em 1.25em 1.35em;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
[data-theme="dark"] .bridges {
  --kb-water:      #101d2b;
  --kb-water-line: #22384e;
  --kb-shore:      #47637f;
  --kb-land:       #393345;
  --kb-land-edge:  #544c69;
  --kb-land-hi:    #443c58;
  --kb-deck:       #9d7a41;
  --kb-deck-dark:  #d8b273;
  --kb-open:       #e0b055;
  --kb-spent:      #5d5768;
  --kb-map-ink:    #cfc7b6;
  --kb-map-faint:  #9a907c;
}

.bridges svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 9px;
  border: 1px solid var(--kb-land-edge);
}

/* ---------- water ---------- */
.kb-water { fill: var(--kb-water); }
.kb-wave  { fill: none; stroke: var(--kb-water-line); stroke-width: 1.1; }

/* ---------- land ---------- */
.kb-land {
  fill: var(--kb-land);
  stroke: var(--kb-shore);
  stroke-width: 1.6;
  transition: fill .22s, stroke .22s;
}
.kb-land.kb-pickable { cursor: pointer; }
.kb-land.kb-pickable:hover,
.kb-land.kb-pickable:focus-visible { fill: var(--kb-land-hi); stroke: var(--accent); stroke-width: 2.4; }
.kb-land:focus { outline: none; }
.kb-land.kb-here {
  fill: color-mix(in srgb, var(--accent-soft) 26%, var(--kb-land));
  stroke: var(--accent);
  stroke-width: 2.8;
}
.kb-land.kb-start { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 7 5; }

/* ---------- bridges ---------- */
.kb-bridge { cursor: pointer; }
.kb-deck-hit   { fill: none; stroke: transparent; stroke-width: 30; }
.kb-deck-under { fill: none; stroke: var(--kb-deck-dark); stroke-width: 11; stroke-linecap: round; }
.kb-deck {
  fill: none;
  stroke: var(--kb-deck);
  stroke-width: 7;
  stroke-linecap: round;
  opacity: .78;
  transition: stroke .22s, stroke-width .22s, opacity .22s;
}
.kb-bridge.kb-open .kb-deck-under { stroke: color-mix(in srgb, var(--kb-open) 55%, #000); }
.kb-bridge.kb-open .kb-deck {
  stroke: var(--kb-open);
  stroke-width: 8.5;
  opacity: 1;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--kb-open) 60%, transparent));
}
.kb-bridge.kb-open:hover .kb-deck,
.kb-bridge.kb-open:focus .kb-deck { stroke-width: 11; }
.kb-bridge:focus { outline: none; }
.kb-bridge:focus .kb-pin { stroke-width: 3; }
.kb-bridge.kb-used .kb-deck-under { stroke: var(--kb-spent); opacity: .35; }
.kb-bridge.kb-used .kb-deck { stroke: var(--kb-spent); stroke-dasharray: 4 5; opacity: .8; }
.kb-bridge.kb-used { cursor: default; }

.kb-pin {
  fill: var(--kb-land);
  stroke: var(--kb-deck-dark);
  stroke-width: 1.6;
  transition: fill .22s, stroke .22s;
}
.kb-pin-n {
  fill: var(--kb-map-ink);
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}
.kb-bridge.kb-open .kb-pin { fill: var(--kb-open); stroke: var(--kb-deck-dark); stroke-width: 2; }
.kb-bridge.kb-used .kb-pin { fill: var(--kb-spent); stroke: var(--kb-spent); opacity: .55; }
.kb-bridge.kb-used .kb-pin-n { fill: var(--kb-land); }

.kb-tip {
  fill: var(--kb-map-ink);
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--kb-land);
  stroke-width: 3.5;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .18s;
  pointer-events: none;
}
.kb-bridge:hover .kb-tip,
.kb-bridge:focus .kb-tip { opacity: 1; }

/* ---------- the walk taken so far ---------- */
.kb-trace {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1.5 7;
  opacity: .5;
  pointer-events: none;
}

/* ---------- map lettering ---------- */
.kb-label {
  fill: var(--kb-map-ink);
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .06em;
  paint-order: stroke;
  stroke: var(--kb-land);
  stroke-width: 4;
  stroke-linejoin: round;
  pointer-events: none;
}
.kb-sub {
  fill: var(--kb-map-faint);
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  paint-order: stroke;
  stroke: var(--kb-land);
  stroke-width: 3;
  stroke-linejoin: round;
  pointer-events: none;
}
.kb-deg {
  fill: var(--red);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  transition: opacity .45s;
  paint-order: stroke;
  stroke: var(--kb-land);
  stroke-width: 3.5;
  stroke-linejoin: round;
  pointer-events: none;
}
.kb-show-degrees .kb-deg { opacity: 1; }
.kb-you {
  fill: var(--accent);
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  opacity: 0;
  transition: opacity .3s;
  paint-order: stroke;
  stroke: var(--kb-land);
  stroke-width: 3.5;
  stroke-linejoin: round;
  pointer-events: none;
}
.kb-you.on { opacity: 1; }
.kb-show-degrees .kb-you { opacity: 0; }
/* Once the argument is on screen, the map should be about the counts, not about
   where this particular walk happened to stall. */
.kb-show-degrees .kb-land.kb-here,
.kb-show-degrees .kb-land.kb-start {
  fill: var(--kb-land);
  stroke: var(--kb-shore);
  stroke-width: 1.6;
  stroke-dasharray: none;
}
.kb-show-degrees .kb-trace { opacity: .22; }

/* ---------- compass and cartouche ---------- */
.kb-rose { pointer-events: none; }
.kb-rose-ring { fill: none; stroke: var(--kb-map-faint); stroke-width: 1; opacity: .8; }
.kb-rose-pt   { fill: var(--kb-land); stroke: var(--kb-map-faint); stroke-width: 1; }
.kb-rose-dim  { opacity: .8; }
.kb-rose-n    { fill: var(--kb-map-ink); opacity: .85; }
.kb-rose-lab {
  fill: var(--kb-map-ink);
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}
.kb-cartouche { pointer-events: none; }
.kb-cart-plate {
  fill: var(--kb-land);
  stroke: var(--kb-map-faint);
  stroke-width: 1;
  opacity: .92;
}
.kb-cart-t {
  fill: var(--kb-map-ink);
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .17em;
}
.kb-cart-s {
  fill: var(--kb-map-faint);
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  letter-spacing: .01em;
}

.kb-blocks { pointer-events: none; }
.kb-block {
  fill: var(--kb-land-edge);
  opacity: .34;
}

/* ---------- chrome above the map ---------- */
.kb-head {
  display: flex;
  align-items: center;
  gap: .7em;
  margin-bottom: .75em;
}
.kb-title {
  font-family: "Inter", sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.kb-pips { display: flex; gap: 5px; margin-left: auto; }
.kb-pip {
  width: 15px;
  height: 5px;
  border-radius: 3px;
  background: var(--line);
  transition: background .25s;
}
.kb-pip.on { background: var(--accent); }
.kb-count {
  font-family: "Inter", sans-serif;
  font-size: .76rem;
  font-weight: 600;
  color: var(--ink-soft);
  min-width: 5.6em;
  text-align: right;
}

/* ---------- the key ---------- */
.kb-key {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4em;
  margin: .85em 0 0;
  padding: 0;
}
.kb-key-item {
  display: inline-flex;
  align-items: center;
  gap: .42em;
  padding: .22em .6em .22em .3em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: "Inter", sans-serif;
  font-size: .74rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .2s, color .2s, opacity .2s;
}
.kb-key-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--code-bg);
  font-size: .68rem;
  font-weight: 700;
  color: var(--ink);
}
.kb-key-item.kb-key-open { border-color: var(--kb-open); color: var(--ink); }
.kb-key-item.kb-key-open .kb-key-n { background: var(--kb-open); color: #2b2410; }
.kb-key-item.kb-key-used { cursor: default; border-style: dashed; }
.kb-key-item.kb-key-used .kb-key-n { background: var(--line); color: var(--ink-soft); }
.kb-key-item.kb-key-used .kb-key-name { text-decoration: line-through; opacity: .5; }
.kb-key-ord:not(:empty) {
  margin-left: .1em;
  padding-left: .45em;
  border-left: 1px solid var(--line);
  font-size: .68rem;
  font-variant: small-caps;
  letter-spacing: .03em;
  color: var(--accent);
}

/* ---------- status and controls ---------- */
.kb-status {
  font-size: 1rem;
  margin: .9em 0 .9em;
  min-height: 3em;
  color: var(--ink);
}
.kb-status.kb-stuck { color: var(--red); }
.kb-status.kb-nope  { color: var(--gold); }
.kb-status.kb-win   { color: var(--green); }

.kb-controls { display: flex; gap: .5em; }
.kb-btn {
  font-family: "Inter", sans-serif;
  font-size: .8rem;
  padding: .45em .95em;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.kb-btn:hover { border-color: var(--accent); color: var(--accent); }
.kb-why { border-color: var(--accent); color: var(--accent); font-weight: 600; }

.kb-proof {
  margin-top: 1.25em;
  padding-top: 1em;
  border-top: 1px solid var(--line);
}
.kb-proof p { margin: .8em 0; }
.kb-fade { animation: kb-in .5s ease both; }
@keyframes kb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .bridges { padding: .9em .8em 1.1em; }
  .kb-key-item { font-size: .7rem; }
  .kb-title { font-size: .7rem; letter-spacing: .07em; }
}
@media (prefers-reduced-motion: reduce) {
  .kb-fade { animation: none; }
  .kb-land, .kb-deck, .kb-pin, .kb-deg, .kb-tip, .kb-pip { transition: none; }
}
@media print {
  .bridges .kb-controls, .bridges .kb-pips { display: none; }
}

.fig-lead { font-size: 0.97em; color: var(--ink-soft); margin-top: 0.8em; }