/* ───────────────────────────────────────────────────────────────────────────
   Censorship & moderation — Chapter 1 interactive page
   Aesthetic adapted from edekeulenaar.github.io/ai-alignment-actors
   Background: off-white. Two-column layout: fixed sidebar + scrolling main.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Self-hosted fonts ──────────────────────────────────────────────────
   Body prose (incl. beeswarm hover-card quotations): Adobe Caslon Pro.
   Headings, sidebar, table cells, figure UI: Test National. */
@font-face {
  font-family: "ACaslon Pro";
  src: url("fonts/ACaslonPro-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ACaslon Pro";
  src: url("fonts/ACaslonPro-Italic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "ACaslon Pro";
  src: url("fonts/ACaslonPro-Semibold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ACaslon Pro";
  src: url("fonts/ACaslonPro-SemiboldItalic.otf") format("opentype");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "ACaslon Pro";
  src: url("fonts/ACaslonPro-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ACaslon Pro";
  src: url("fonts/ACaslonPro-BoldItalic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Test National";
  src: url("fonts/TestNational-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Test National";
  src: url("fonts/TestNational-BookItalic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Test National";
  src: url("fonts/TestNational-Semibold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Test National";
  src: url("fonts/TestNational-Semibold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Test National Book";
  src: url("fonts/TestNational-Book.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Test National Medium";
  src: url("fonts/TestNational-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* Aesthetic ported from edekeulenaar.github.io/ai-alignment-actors —
   warm-paper editorial palette, Iowan Old Style serif, italic side nav
   with terracotta active state, uppercase tracked side-block headers. */
:root {
  --ink:        #1c1a18;
  --ink-soft:   #3c3934;
  --paper:      #faf7f2;            /* off-white (kept from earlier palette) */
  --paper-alt:  #f3efe8;            /* soft off-white for panels / sidebar */
  --muted:      #6c655c;
  --border:     #ddd6c9;            /* lighter, cooler than reference */
  --rule:       #c4bcad;
  --accent:     #c0431f;            /* terracotta from the reference */
  --accent-soft:#f5dccf;
  --link:       #1c1a18;            /* links are inked, underlined */

  /* aliases retained for existing rules */
  --bg:         var(--paper);
  --bg-soft:    var(--paper-alt);

  --side-w:     250px;
  --right-w:    232px;           /* right rail: figure key + resources */
  --content-w:  46rem;
  --prose-w:    65rem;            /* prose + 17rem margin-cites column */
  --serif:      "ACaslon Pro", "Adobe Caslon Pro", "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --sans:       "Test National", "Helvetica Neue", Inter, "Segoe UI", Arial, sans-serif;
  --mono:       ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs:         16.5px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { background: var(--paper); }
body {
  font-family: var(--serif);
  color: var(--ink);
  background: var(--paper);
  font-size: var(--fs);
  line-height: 1.55;            /* original web-comfortable line-height */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(28, 26, 24, 0.18);
}
a:hover { color: var(--accent); border-bottom-color: var(--accent); }
code, pre { font-family: var(--mono); font-size: 0.93em; }

/* ─── Sidebar (paper-alt panel, italic TOC) ──────────────────────────── */

#sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--side-w);
  padding: 1.5rem 1.2rem;
  background: var(--paper-alt);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  font-family: var(--sans);    /* Test National for the whole sidebar */
  font-size: 13px;
  line-height: 1.5;
}
.sb-title {
  display: block;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin: 0 0 0.35em 0;
  border-bottom: none;
  text-decoration: none;
}
.sb-title:hover { color: var(--accent); }
.sb-sub {
  font-family: var(--sans);
  font-style: normal;          /* no italic on sidebar headings */
  color: var(--muted);
  font-size: 11.5px;
  margin: 0 0 1.4rem 0;
  letter-spacing: 0;
}
.toc {
  list-style: none;
  padding: 0; margin: 0 0 1.6rem 0;
  display: flex; flex-direction: column;
}
.toc li { margin: 0; padding: 0; }
.toc a {
  display: block;
  text-decoration: none;
  padding: 0.25em 0;
  padding-left: 0.6rem; margin-left: -0.6rem;
  font-style: normal;          /* no italic on sidebar headings */
  color: var(--muted);
  border: none;
  border-left: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}
.toc a:hover  { color: var(--ink); }
.toc a.is-active {
  color: var(--ink);
  border-left-color: var(--accent);
  font-weight: 600;
}
/* Reference's side-nav hierarchy: H1 top-level, H2/H3 indented + smaller. */
.toc .lvl-1 a { font-size: 13px; }
.toc .lvl-2 a { font-size: 12px; padding-left: 1.4rem; margin-left: -0.6rem; }
.toc .lvl-3 a { font-size: 11.5px; padding-left: 2.2rem; margin-left: -0.6rem; }

/* ── Global thesis TOC (parts → chapters) in the sidebar ──────────────── */
/* Cover, Part dividers, Conclusion and References are structural — bold,
   black, uppercase. Front matter (Acknowledgments / Abstract / Introduction)
   is italic-muted; chapters are plain and slightly indented. */
.toc .toc-section a,
.toc .toc-part a {
  font-family: var(--sans);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink);
  margin-top: 0.9rem;
}
/* Front matter (Acknowledgments / Abstract / Introduction) reads like a
   chapter entry — plain, not italic. */
.toc .toc-front a,
.toc .toc-ch a    { font-size: 12.5px; padding-left: 0.9rem; color: var(--muted); }
.toc .chapter-subnav.folded { display: none; }   /* second click folds */
/* (Per-chapter section nav moved to the right rail — see #chapter-nav.) */

/* ── Cover / landing view ─────────────────────────────────────────────── */
#landing .cover {
  margin: 2rem 0 2.6rem; padding-bottom: 0;   /* no rule under the author */
}
#landing .cover-title {
  margin: 0 0 0.5rem; color: var(--ink);
}
#landing .cover-title .ct-main {
  display: block;
  font-family: "Test National Medium", var(--sans); font-weight: 500;
  font-size: 2.7rem; line-height: 1.1; letter-spacing: -0.01em;
}
#landing .cover-title .ct-desc {
  display: block;
  font-family: "Test National Book", var(--sans); font-weight: 400;
  font-size: 1.65rem; line-height: 1.18; letter-spacing: 0;
  color: var(--ink-soft); margin-top: 0.3rem;
}
#landing .cover-sub {
  font-family: var(--sans); font-weight: 400;
  font-size: 1rem; line-height: 1.25; color: var(--muted);
  margin: 0.5rem 0 1.4rem;
}
#landing .cover-author {
  font-family: var(--sans); font-size: 0.95rem;
  letter-spacing: 0.04em; color: var(--muted); margin: 0;
}
/* Section headers (Abstract / Contents) — big, bold, black; no rule. */
#landing .cover-abstract h2,
#landing .cover-ack h2,
#landing .cover-toc h2 {
  font-family: var(--sans);
  font-size: 1.5rem; font-weight: 700; letter-spacing: 0;
  text-transform: none; color: var(--ink);
  margin: 2.4rem 0 1rem; padding-bottom: 0; border-bottom: none;
}
#landing .cover-abstract p { text-align: left; }   /* normal paragraph spacing */

/* PDF download button — sits at the far right of the cover title row. */
.pdf-btn {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.4em 0.85em;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.02em;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--border); border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.pdf-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
#landing .cover { position: relative; }
#landing .cover .cover-pdf-btn { position: absolute; top: 0; right: 0; }

/* Chapter-selection modal. */
#pdf-panel {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(28, 26, 24, 0.34);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
}
#pdf-panel[hidden] { display: none; }
#pdf-panel .pdf-panel-inner {
  position: relative;
  width: min(34rem, 100%); max-height: 80vh; overflow-y: auto;
  background: var(--paper); border: 1px solid var(--border);
  border-radius: 5px; padding: 1.5rem 1.6rem;
  box-shadow: 0 18px 50px rgba(28, 26, 24, 0.28);
}
#pdf-panel h2 {
  font-family: var(--sans); font-size: 1.1rem; font-weight: 700;
  margin: 0 0 0.3rem;
}
#pdf-panel .pdf-help { color: var(--muted); font-size: 0.9rem; margin: 0 0 1rem; }
#pdf-panel .pdf-checks { display: flex; flex-direction: column; gap: 0.1rem; }
#pdf-panel .pdf-check {
  display: flex; align-items: flex-start; gap: 0.55em;
  padding: 0.18em 0; font-size: 0.92rem; cursor: pointer;
}
/* Download links list. */
#pdf-panel .pdf-downloads { display: flex; flex-direction: column; gap: 0.1rem; }
#pdf-panel .pdf-dl {
  display: block; padding: 0.4em 0.2em;
  font-size: 0.95rem; color: var(--ink);
  border-bottom: 1px solid var(--rule); text-decoration: none;
}
#pdf-panel .pdf-dl:last-child { border-bottom: none; }
#pdf-panel .pdf-dl:hover { color: var(--accent); }
#pdf-panel .pdf-dl-full {
  font-family: var(--sans); font-weight: 700; color: var(--ink);
  margin-bottom: 0.4rem;
}
#pdf-panel .pdf-dl-part { font-family: var(--sans); font-weight: 700; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.03em; }
#pdf-panel .pdf-dl-chapter { padding-left: 0.9rem; }
#pdf-panel .pdf-close {
  position: absolute; top: 0.6rem; right: 0.7rem;
  width: 1.6rem; height: 1.6rem; border: none; background: none;
  font-size: 1.3rem; line-height: 1; color: var(--muted); cursor: pointer;
}
#pdf-panel .pdf-close:hover { color: var(--ink); }

/* Off-screen print assembly root — only visible to the print renderer. */
#print-root { display: none; }

/* Inline video embeds (`![](clip.mp4)`). */
.prose .embed-video {
  display: block; max-width: 100%; height: auto;
  margin: 1.2em auto; border-radius: 3px;
  background: #000;
}
#landing .land-toc {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.1rem;
}
#landing .land-toc a {
  border-bottom: none; color: var(--ink); display: inline-block;
  padding: 0.18em 0;
}
#landing .land-toc a:hover { color: var(--accent); }
#landing .land-part a {
  font-family: var(--sans); font-weight: 700; font-size: 0.92rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-top: 1.1rem; color: var(--ink);
}
#landing .land-front a { font-style: italic; color: var(--muted); }
#landing .land-ch a { padding-left: 1.1rem; }
.ref-count { color: var(--muted); font-style: italic; margin-bottom: 1.4rem; }

/* Lives at the END of the sidebar's scroll flow — only visible when the
   reader has scrolled past every TOC entry + the figure-key. Never sticky,
   so it never sits on top of anything. */
.sb-foot {
  margin-top: 2.4rem;
  padding: 0.9rem 0 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: 11.5px;
  font-style: italic;
  color: var(--muted);
  background: transparent;
}
.sb-foot a { color: var(--muted); border-bottom: none; }
.sb-foot a:hover { color: var(--accent); }

/* ─── Main ────────────────────────────────────────────────────────────── */

#content {
  margin-left: var(--side-w);
  margin-right: var(--right-w);
  /* Reference uses 1.5rem top, 3rem sides — matches sidebar's top padding. */
  padding: 1.5rem 3rem 6rem;
  max-width: calc(100vw - var(--side-w) - var(--right-w));
}

/* ── Right rail: figure key + future per-chapter resources ────────────── */
#right-rail {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--right-w);
  padding: 1.5rem 1.1rem;
  overflow-y: auto;
  border-left: 1px solid var(--border);
  background: var(--paper);
  font-family: var(--sans);
}
/* Right-rail section headers (On this page / Key / Resources). */
.rr-h {
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--muted);
  margin: 0 0 0.55rem 0; padding-bottom: 0;
  border-bottom: none;
}
#right-rail > nav + #fig-key,
#right-rail > #fig-key + nav,
#right-rail > nav + nav { margin-top: 1.6rem; }

/* "On this page" — chapter section nav, indented by heading level. */
#chapter-nav[hidden], #chapter-resources[hidden] { display: none; }
#chapter-nav-list, #chapter-resources-list { list-style: none; margin: 0; padding: 0; }
#chapter-nav-list a {
  display: block; font-size: 12px; line-height: 1.35; color: var(--muted);
  padding: 0.18em 0; border-left: 2px solid transparent;
  border-bottom: none;            /* no rules between items */
  text-decoration: none;
}
#chapter-nav-list .cn-lvl-2 a { padding-left: 0.8rem; }
#chapter-nav-list .cn-lvl-3 a { padding-left: 1.6rem; font-size: 11.5px; }
#chapter-nav-list .cn-lvl-4 a { padding-left: 2.4rem; font-size: 11.5px; font-style: italic; }
#chapter-nav-list a:hover { color: var(--ink); }
#chapter-nav-list a.is-active { color: var(--ink); border-left-color: var(--accent); }
#chapter-resources-list a {
  display: block; font-size: 12px; padding: 0.2em 0; color: var(--ink);
  border-bottom: 1px dotted rgba(28,26,24,0.18);
}
#chapter-resources-list a:hover { color: var(--accent); }

/* Comments rail summary. */
#chapter-comments[hidden] { display: none; }
#chapter-comments-list { list-style: none; margin: 0; padding: 0; }
#chapter-comments-list .cmt-rail-count { font-size: 11px; color: var(--muted); margin-bottom: 0.4rem; }
#chapter-comments-list .cmt-rail-item {
  font-size: 11.5px; color: var(--ink-soft); line-height: 1.35;
  padding: 0.2em 0; border-top: 1px solid var(--rule);
}
#chapter-comments-list .cmt-rail-who { font-weight: 700; color: var(--ink); }
#chapter-comments-list .cmt-rail-ch {
  display: block; font-size: 10px; color: var(--accent); font-style: italic;
}
#chapter-comments-list .cmt-rail-ch.stale { color: #b00; font-style: normal; }
#chapter-comments-list .cmt-rail-item { position: relative; padding-right: 1.1rem; }
#chapter-comments-list .cmt-rail-del {
  position: absolute; top: 0.2em; right: 0; width: 1.1em; height: 1.1em;
  border: none; background: none; color: var(--muted); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0; opacity: 0; transition: opacity .12s;
}
#chapter-comments-list .cmt-rail-item:hover .cmt-rail-del { opacity: 1; }
#chapter-comments-list .cmt-rail-del:hover { color: #b00; }
.cmt-export {
  margin-top: 0.6rem; font-family: var(--sans); font-size: 11px;
  padding: 0.35em 0.6em; background: var(--paper);
  border: 1px solid var(--border); border-radius: 3px; color: var(--ink);
  cursor: pointer;
}
.cmt-export:hover { background: var(--ink); color: var(--paper); }

/* ── Image lightbox (click a static figure to enlarge) ──────────────────── */
#manuscript img { cursor: zoom-in; }
#img-lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(28, 26, 24, 0.86);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out; padding: 3vh 3vw;
}
#img-lightbox[hidden] { display: none; }
#img-lightbox img {
  max-width: 94vw; max-height: 94vh; cursor: zoom-out;
  box-shadow: 0 10px 50px rgba(0,0,0,0.5); background: #fff; border-radius: 3px;
}
#img-lightbox .lb-close {
  position: absolute; top: 1.2rem; right: 1.5rem;
  width: 2.2rem; height: 2.2rem; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.15); color: #fff; font-size: 1.5rem;
  line-height: 1; cursor: pointer;
}
#img-lightbox .lb-close:hover { background: rgba(255,255,255,0.3); }

/* ── Reader comments — "+" button, popover, highlight ───────────────────── */
.cmt-plus {
  position: absolute; z-index: 150;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: none; background: var(--accent); color: var(--paper);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgba(28,26,24,0.3);
}
.cmt-plus[hidden] { display: none; }
.cmt-plus:hover { filter: brightness(1.08); }

.cmt-pop {
  position: absolute; z-index: 160;
  width: 22rem; max-width: calc(100vw - 1.5rem);
  background: var(--paper); border: 1px solid var(--border);
  border-radius: 5px; padding: 0.9rem 1rem;
  box-shadow: 0 12px 34px rgba(28,26,24,0.22);
  font-family: var(--sans);
}
.cmt-pop .cmt-quote {
  font-family: var(--serif); font-style: italic; font-size: 0.9rem;
  color: var(--ink-soft); border-left: 2px solid var(--accent);
  padding-left: 0.55rem; margin-bottom: 0.65rem; line-height: 1.4;
}
.cmt-pop .cmt-name, .cmt-pop .cmt-text {
  width: 100%; box-sizing: border-box; font-family: var(--sans);
  font-size: 0.9rem; padding: 0.45em 0.55em; margin-bottom: 0.55rem;
  border: 1px solid var(--border); border-radius: 3px; background: var(--paper);
  color: var(--ink); resize: vertical;
}
.cmt-pop .cmt-name:focus, .cmt-pop .cmt-text:focus { outline: none; border-color: var(--ink); }
.cmt-pop .cmt-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.cmt-pop .cmt-cancel {
  font-family: var(--sans); font-size: 12px; padding: 0.4em 0.8em;
  background: var(--paper); border: 1px solid var(--border);
  border-radius: 3px; color: var(--muted); cursor: pointer;
}
.cmt-pop .cmt-cancel:hover { color: var(--ink); }
.cmt-pop .cmt-save {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  padding: 0.4em 0.9em; background: var(--accent); color: var(--paper);
  border: 1px solid var(--accent); border-radius: 3px; cursor: pointer;
}
.cmt-pop.cmt-view .cmt-entry { margin-bottom: 0.7rem; }
.cmt-pop .cmt-meta { display: flex; gap: 0.5rem; align-items: baseline; margin-bottom: 0.25rem; }
.cmt-pop .cmt-who { font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.cmt-pop .cmt-when { font-size: 11px; color: var(--muted); }
.cmt-pop .cmt-body {
  font-family: var(--serif); font-size: 0.95rem; line-height: 1.45;
  color: var(--ink); margin-bottom: 0.35rem;
}
.cmt-pop .cmt-del {
  font-family: var(--sans); font-size: 11px; padding: 0.2em 0.5em;
  background: none; border: none; color: var(--accent); cursor: pointer;
  text-decoration: underline;
}
/* The highlighted passage itself. */
mark.cmt {
  background: rgba(255, 214, 0, 0.34);
  border-bottom: 1px solid rgba(192, 67, 31, 0.5);
  cursor: pointer; padding: 0.02em 0;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
mark.cmt:hover { background: rgba(255, 214, 0, 0.55); }
mark.cmt.flash { animation: cmt-flash 1.6s ease-out 1; }
@keyframes cmt-flash {
  0%, 30% { background: rgba(192, 67, 31, 0.45); }
  100%    { background: rgba(255, 214, 0, 0.34); }
}
/* Rail comment items are clickable → jump to the highlight. */
#chapter-comments-list .cmt-rail-item { cursor: pointer; }
#chapter-comments-list .cmt-rail-item:hover { color: var(--ink); }
#chapter-comments-list .cmt-rail-item:hover .cmt-rail-who { color: var(--accent); }

/* Single-cell tables (`| text |`) are callout / prompt boxes — render their
   text as flowing Test National Book, not an uppercase table header. */
.prose table.single-cell { border-collapse: separate; }
.prose table.single-cell th,
.prose table.single-cell td {
  font-family: "Test National Book", "Helvetica Neue", sans-serif !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  font-size: 0.95rem; line-height: 1.55;
  color: var(--ink);
  background: var(--paper-alt) !important;
  border: 1px solid var(--border) !important;
  padding: 0.95em 1.15em !important;
}
.prose table.single-cell a { color: var(--accent); }
/* In its foldable wrapper, drop the misleading "· 0 rows" row count. */
.prose details.foldable.has-single-cell > summary .meta { font-size: 12.5px; }
/* Hidden analysis templates (Chapter 1 figure sources) never show in flow;
   mountChapter1Analysis() toggles display while figures render. */
#analysis { display: none; }

.prose { max-width: var(--content-w); margin-left: auto; margin-right: auto; }
/* Headings — Test National (sans). Original site spacing/sizes kept;
   only the typeface changed from serif to sans. */
.prose h1, .prose h2, .prose h3 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.2;
}
.prose h1 { font-size: 1.95rem; margin: 3rem 0 1.2rem; }
.prose h2 { font-size: 1.40rem; margin: 2.4rem 0 0.9rem; }
.prose h3 { font-size: 1.12rem; margin: 2.4rem 0 0.9rem; color: var(--ink); }
.prose h1:first-child { margin-top: 0; font-size: 1.95rem; }
/* Title block: a "Chapter N" h1 immediately followed by the chapter-name h1.
   "Chapter N" reads as a thin eyebrow line; the chapter NAME is the real
   title — slightly bigger and bolder than ordinary H1s. */
.prose h1:first-child,
.prose h1:first-child strong {
  font-weight: 300;
  letter-spacing: 0.04em;
  font-size: 1.35rem;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.prose h1 + h1 {
  margin-top: 0.2rem;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.25;
}
.prose p { margin: 0 0 1.1em; }
/* In-prose links — internal or external — are terracotta with a dotted
   underline, matching the .wiki-link aesthetic so they stand out clearly. */
.prose a {
  color: var(--accent);
  border-bottom: 1px dotted rgba(192, 67, 31, 0.45);
}
.prose a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.prose p { margin: 0 0 0.95em; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose blockquote {
  margin: 2.2em 0;
  padding: 0.3em 0 0.3em 1em;
  border-left: 2px solid var(--rule);
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.55;
}
.prose hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 2.2em 0;
}
.prose .loading { color: var(--muted); font-style: italic; }

/* Epigraph block at the top of a section. Generated by the renderer from
   consecutive right-aligned <div>s in the source markdown — a single
   wrapper so the whole quote-and-attribution reads as one unit. */
.prose .epigraph {
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.86em;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 3rem 0 3.2rem;
  letter-spacing: -0.005em;
}
.prose .epigraph > div { margin: 0.15em 0; }
.prose .epigraph > div + div {
  /* tighten spacing between the quote and its attribution */
  margin-top: 0.55em;
  font-size: 0.92em;
  color: var(--muted);
}

/* Obsidian `==highlight==` passages flag prose the author still wants to
   revisit. Yellow background highlight (the same canary Obsidian uses) +
   a small terracotta "to be edited" badge to the right of the passage. */
.prose mark.edit-me {
  background: rgba(255, 224, 0, 0.42);
  color: inherit;
  padding: 0.05em 0.15em;
  border-radius: 2px;
  cursor: help;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.prose mark.edit-me::after {
  content: " ✎ to be edited";
  display: inline-block;
  margin-left: 0.4em;
  padding: 0 0.45em;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 0.72em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: 0.18em;
  background: var(--accent);
  color: var(--paper);
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}
.prose mark.edit-me:hover { background: rgba(255, 224, 0, 0.65); }

/* Prose tables (markdown GFM). Test National, uppercase tracked header on
   warm-grey, zebra rows white / off-white. Original web spacing kept. */
.prose table {
  border-collapse: collapse;
  margin: 1.4em 0;
  font-family: var(--sans);
  font-size: 0.92em;
  line-height: 1.45;
  width: 100%;
  max-width: 100%;
}
.prose thead th {
  font-family: var(--sans);
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: #EFEDE6;
  border: 0.5px solid #B0B0B0;
  padding: 0.45em 0.7em;
}
.prose tbody td {
  font-family: var(--sans);
  border: 0.5px solid #B0B0B0;
  padding: 0.35em 0.7em;
  vertical-align: top;
}
.prose tbody tr:nth-child(odd)  td { background: #FFFFFF; }
.prose tbody tr:nth-child(even) td { background: #FAF9F6; }

/* Obsidian-style wikilinks: rendered as terracotta anchors in the prose. */
.prose a.wiki {
  color: var(--accent);
  border-bottom: 1px dotted rgba(192, 67, 31, 0.40);
  text-decoration: none;
}
.prose a.wiki:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.prose .wiki { font-style: italic; }   /* fallback span when no anchor exists */

/* Inline code (single backticks): paper-alt chip, monospace, no line break. */
.prose code {
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--paper-alt);
  padding: 0.08em 0.32em;
  border-radius: 3px;
  border: 1px solid var(--rule);
  white-space: nowrap;
}
/* Fenced code blocks (triple backticks): paper-alt panel with language pill. */
.prose pre {
  position: relative;
  margin: 1.4em 0;
  background: var(--paper-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.05em 1.1em 0.95em;
  overflow-x: auto;
  font-size: 0.86em;
  line-height: 1.5;
}
.prose pre > code {
  background: transparent;
  border: none;
  padding: 0;
  white-space: pre;
  display: block;
}
/* Highlight.js — Atom One Light (the theme Obsidian uses by default). */
.prose pre code                    { color: #383a42; }
.prose pre code .hljs-comment,
.prose pre code .hljs-quote        { color: #a0a1a7; font-style: italic; }
.prose pre code .hljs-doctag,
.prose pre code .hljs-keyword,
.prose pre code .hljs-formula,
.prose pre code .hljs-selector-tag,
.prose pre code .hljs-subst        { color: #a626a4; }                  /* purple */
.prose pre code .hljs-section,
.prose pre code .hljs-name         { color: #e45649; }                  /* red */
.prose pre code .hljs-literal,
.prose pre code .hljs-number,
.prose pre code .hljs-meta,
.prose pre code .hljs-link         { color: #986801; }                  /* orange */
.prose pre code .hljs-string,
.prose pre code .hljs-regexp,
.prose pre code .hljs-addition,
.prose pre code .hljs-attribute    { color: #50a14f; }                  /* green */
.prose pre code .hljs-built_in,
.prose pre code .hljs-class .hljs-title,
.prose pre code .hljs-title.class_,
.prose pre code .hljs-type         { color: #c18401; }                  /* yellow-brown */
.prose pre code .hljs-attr,
.prose pre code .hljs-variable,
.prose pre code .hljs-template-variable,
.prose pre code .hljs-selector-attr,
.prose pre code .hljs-selector-class,
.prose pre code .hljs-selector-pseudo { color: #986801; }
.prose pre code .hljs-title,
.prose pre code .hljs-title.function_,
.prose pre code .hljs-symbol,
.prose pre code .hljs-bullet,
.prose pre code .hljs-emphasis     { color: #4078f2; }                  /* blue */
.prose pre code .hljs-strong       { font-weight: 700; }
.prose pre code .hljs-emphasis     { font-style: italic; }
.prose pre code .hljs-deletion     { color: #e45649; background: #ffeef0; }

/* Language pill in the top-right corner, matching Obsidian. */
.prose pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 0.4em; right: 0.7em;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Collapsible wrappers around long code blocks and tables. The <summary>
   shows a chevron, language/caption, and line/row count; clicking toggles. */
.prose details.foldable {
  margin: 1.4em 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--paper-alt);
  overflow: hidden;
}
.prose details.foldable > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 0.55em 0.95em;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--paper-alt);
  border-bottom: 1px solid transparent;
  display: flex;
  /* Baseline-align so the TABLE/PROMPT label sits on the FIRST line of the
     wrapped caption, not centred against the whole multi-line block. */
  align-items: baseline;
  gap: 0.55em;
}
.prose details.foldable[open] > summary {
  border-bottom-color: var(--rule);
}
.prose details.foldable > summary::-webkit-details-marker { display: none; }
.prose details.foldable > summary::marker { content: ""; }
.prose details.foldable > summary::before {
  content: "▸";
  font-size: 11px;
  color: var(--muted);
  transition: transform 0.15s;
  transform-origin: 50% 55%;
  display: inline-block;
}
.prose details.foldable[open] > summary::before { transform: rotate(90deg); }
.prose details.foldable > summary .lbl {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11.5px;
  color: var(--ink);
  white-space: nowrap;     /* keep "TABLE 3" together on one line */
  flex: 0 0 auto;
}
.prose details.foldable > summary .meta {
  color: var(--muted);
  font-size: 12.5px;
  flex: 1 1 auto;
  min-width: 0;
}
.prose details.foldable > summary:hover { background: rgba(0,0,0,0.025); }

/* When a fenced-code block sits inside the wrapper, the inner <pre>'s
   own border/background would double up — strip them. */
.prose details.foldable > pre {
  margin: 0;
  border: none;
  border-radius: 0;
  background: var(--paper-alt);
}
.prose details.foldable > pre[data-lang]::before { display: none; }

/* Wrapped tables: keep horizontal scroll if rows are wider than the column. */
.prose details.foldable > .table-wrap {
  overflow-x: auto;
  background: var(--paper);
}
.prose details.foldable > .table-wrap > table {
  margin: 0;
}

/* Caption paragraph nested inside the table wrapper (when present). */
.prose details.foldable > .table-cap {
  margin: 0;
  padding: 0.55em 1em 0.7em;
  font-size: 0.9em;
  color: var(--ink-soft);
  background: var(--paper);
  border-top: 1px solid var(--rule);
}

/* Browsers DO open ancestor <details> on URL-fragment navigation in
   modern engines, but make sure the soft-flash still shows. */
.prose details.foldable[open] > * { animation: none; }

/* Static figure screenshots in the manuscript (only when there's no matching
   live `<figure id="fig-…">` to swap in — typically figures that aren't on
   this site, or while the page is still loading). */
.prose p > img,
.prose figure img,
.prose img.inline-fig-placeholder {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.4em auto 0.2em;
  border-radius: 3px;
  background: var(--paper-alt);
  padding: 0.4em;
  box-shadow: 0 1px 3px rgba(28, 26, 24, 0.06);
}

/* ── Inline formula images ───────────────────────────────────────────────────
   Several chapters carry their equations as small pasted images rather than
   LaTeX (Chapter 14's Community Notes weighting, for one). Where such an image
   sits in a paragraph WITH text — "• [img] = Number of occurrences of [img]." —
   the block rule above puts each one on its own centred line and blows it up,
   which breaks the sentence into fragments. Keep those inline at text size; a
   paragraph whose only child is an image is a real display equation and stays
   centred. */
.prose p:not(:has(> img:only-child)) > img {
  display: inline !important;
  vertical-align: -0.28em;
  max-height: 1.5em;
  width: auto;
  margin: 0 0.12em !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  cursor: text;
}

/* A lone image in its own paragraph: display equation / figure — centred, and
   not stretched beyond its natural size (these snippets are only 18px tall). */
.prose p > img:only-child {
  max-width: 100%;
}

/* When the live figure is moved INTO the manuscript flow it BREAKS OUT
   of the prose column SYMMETRICALLY around the centred prose, so the
   figure stays aligned with the centre of the page and never spills
   under the sidebar. The 6 rem subtracted from viewport width leaves
   3 rem of breathing room on each side of the centred figure. */
.prose figure.fig.fig-live-mounted {
  position: relative;
  width: min(calc(100vw - var(--side-w) - var(--right-w) - 6rem), 1200px);
  max-width: none;
  left: 50%;
  transform: translateX(-50%);
  margin: 2.2em 0 2.4em;
  padding: 1rem 1.2rem 0.9rem;
  background: var(--paper-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.prose figure.fig.fig-live-mounted > .fig-cap   { margin-bottom: 0.6em; }
.prose figure.fig.fig-live-mounted > .fig-body  { width: 100%; }
/* The .fig-foot block carries the template's Download-CSV link and the
 * long descriptive `.alt` paragraph. Neither is sourced from manuscript.md,
 * so we hide the whole footer on figures mounted in the prose flow.
 * (The Analysis section, where the templates live, is itself hidden.) */
.prose figure.fig.fig-live-mounted > .fig-foot  { display: none; }
@media (max-width: 900px) {
  .prose figure.fig.fig-live-mounted {
    width: 100%; left: 0; transform: none;
  }
}

/* Soft flash when an in-text link jumps to its target block (^slug anchor). */
.prose .anchored:target {
  background: rgba(192, 67, 31, 0.10);
  box-shadow: -4px 0 0 var(--accent);
  border-radius: 2px;
  scroll-margin-top: 1.5rem;
  animation: anchor-flash 1.6s ease-out 1;
}
@keyframes anchor-flash {
  0%   { background: rgba(192, 67, 31, 0.32); }
  100% { background: rgba(192, 67, 31, 0.10); }
}

/* Inline cite group, e.g. "(Allan, 2016; Smith, 2020)". Each name inside
   is a `<a class="cite-link">` that jumps to the matching References entry.
   Hover surfaces the full reference in the floating #data-card. */
.cite-grp {
  font-variant-numeric: oldstyle-nums;
  font-size: 0.92em;
  white-space: normal;
  color: var(--ink-soft);
}
/* "[cit]" = author's not-yet-done citation reminder: muted, but still visible. */
#manuscript .cit-todo { color: var(--muted); opacity: 0.65; }
.cite-link {
  color: var(--accent);
  border-bottom: 1px dotted rgba(192, 67, 31, 0.30);
  text-decoration: none;
}
.cite-link, a.cite-link, .cite-grp { cursor: pointer; }
.cite-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* References section: hanging indent (APA convention) + a soft flash when
   the reader jumps to a specific entry via an in-text citation link. */
.prose .ref-entry {
  padding-left: 1.4em;
  text-indent: -1.4em;
  margin: 0 0 0.6em;
  font-size: 0.95em;
  line-height: 1.5;
  scroll-margin-top: 1.5rem;
}
.prose .ref-entry:target,
.prose .ref-entry.flash {
  background: rgba(192, 67, 31, 0.10);
  box-shadow: -4px 0 0 var(--accent), 0 0 0 4px rgba(192, 67, 31, 0.10);
  border-radius: 2px;
  animation: ref-flash 1.6s ease-out 1;
}
@keyframes ref-flash {
  0%   { background: rgba(192, 67, 31, 0.32); }
  100% { background: rgba(192, 67, 31, 0.10); }
}

/* The right-margin Harvard reference list was removed — full references
   now appear in the shared hover-card (#data-card) instead. The `.dc-cite`
   styling for that card lives in the "Data hover-card" section below. */

/* Harvard reference inside the hover #data-card. */
#data-card .dc-cite {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
  padding: 0.45em 0 0.45em;
  border-top: 1px solid var(--rule);
}
#data-card .dc-cite:first-child { border-top: none; padding-top: 0; }
#data-card .dc-cite em { font-style: italic; }
#data-card .dc-cite .ext {
  display: inline-block;
  margin-left: 0.35em;
  color: var(--accent);
  font-size: 11px;
  border-bottom: 1px dotted rgba(192, 67, 31, 0.4);
  white-space: nowrap;
}
#data-card .dc-cite .ext:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

#cite-card {
  position: absolute;
  z-index: 50;
  max-width: 22rem;
  padding: 0.65rem 0.8rem;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: 0 6px 20px rgba(28, 26, 24, 0.10);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  pointer-events: none;
}
#cite-card .ck { color: var(--accent); font-family: var(--mono); font-size: 11.5px; }
#cite-card .hint { color: var(--muted); display: block; margin-top: 0.35rem; font-size: 11.5px; font-style: italic; }

/* ─── Analysis section ────────────────────────────────────────────────── */

.analysis {
  max-width: calc(100vw - var(--side-w) - 6rem);
  margin: 4rem auto 0;             /* centred within #content */
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.analysis-head h1 {
  font-family: var(--sans); font-size: 1.85rem; font-weight: 600;
  letter-spacing: 0; line-height: 1.5;
  margin: 0 0 0.5rem;
}
.analysis-head .lede {
  font-style: italic; color: var(--muted);
  max-width: var(--content-w); margin: 0 0 2rem;
  font-size: 15px; line-height: 1.55;
}
/* Section heads mirror the reference's .side-block h4: uppercase, tracked,
   muted, with a rule line underneath. */
.analysis h2 {
  font-family: var(--sans);
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--muted);
  margin: 3rem 0 1rem; padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--rule);
}

/* Figure row: the figure CARD on the left + a notes pane on the right —
   the notes live OUTSIDE the figure box (per #1). */
.fig-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  column-gap: 1.6rem;
  align-items: stretch;
  margin: 0 0 2.4rem;
}
.fig {
  margin: 0;
  padding: 1rem 1.1rem 0.9rem;
  background: var(--paper-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.fig.pending { background: var(--paper-alt); border-style: dashed; }

.fig-notes-pane {
  align-self: stretch;
  display: flex;
}
.fig-notes-pane .fig-notes {
  flex: 1;
  margin: 0;
  background: transparent;
  border: 1px dashed var(--rule);
  border-radius: 6px;
  min-height: 100%;
}

@media (max-width: 1100px) {
  .fig-row { grid-template-columns: 1fr; row-gap: 0.7rem; }
  .fig-notes-pane .fig-notes { min-height: 4rem; }
}

.fig-cap {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 0.9rem;
}
.fig-num { color: var(--accent); font-weight: 700; margin-right: 0.35rem; }
.fig-cap .phase {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.05em 0.5em;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 2px;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.fig-body { min-height: 4rem; margin: 0.4rem 0 0.6rem; overflow-x: auto;
            background: var(--paper); border-radius: 3px; padding: 0.4rem; }
.placeholder {
  display: flex; align-items: center; justify-content: center;
  height: 9rem;
  color: var(--muted);
  font-family: var(--sans); font-style: italic;
  border: 1px dashed var(--border);
  border-radius: 3px;
  background: var(--paper);
}

.fig-foot {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem;
  align-items: baseline;
  padding-top: 0.6rem;
  border-top: 1px dotted var(--rule);
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
}
.dl {
  color: var(--ink); font-weight: 600;
  border-bottom: 1px solid rgba(28,26,24,0.18);
}
.dl:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* PNG / SVG download buttons match the visual weight of the CSV link. */
button.dl {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(28,26,24,0.18);
  padding: 0;
  font: inherit;
  cursor: pointer;
}
button.dl:hover { color: var(--accent); border-bottom-color: var(--accent); }
.alt { flex: 1 1 18rem; min-width: 0; font-style: italic; }

.page-foot {
  margin-top: 2rem; padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans); font-style: italic;
  font-size: 12px;
  color: var(--muted);
}

/* ─── Summary table ──────────────────────────────────────────────────── */

#summary-table table {
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 14px;
}
#summary-table td {
  padding: 0.35rem 1.4rem 0.35rem 0;
  border-bottom: 1px dotted var(--border);
}
#summary-table td:first-child { color: var(--ink); }
#summary-table td:last-child  { font-variant-numeric: tabular-nums;
                                font-weight: 700; text-align: right;
                                color: var(--accent); }

/* ─── Sankey ─────────────────────────────────────────────────────────── */

/* All Sankeys are rendered as RawGraphs-style ALLUVIAL diagrams:
   white nodes with thin dark outline, uppercase sans-serif labels
   (two lines: NAME + count), italic stage headers, pastel ribbons
   with a visible gap between rect and ribbon. */
.sankey {
  font-family: "Test National", "Helvetica Neue", Inter, "Segoe UI", Arial, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 13px; color: var(--ink);
}
.sankey .node rect {
  fill: #ffffff;
  stroke: #2a2724;
  stroke-width: 0.8px;
  cursor: pointer;
}
.sankey .node rect:hover { fill: #f5efe2; }
.sankey .node text { fill: var(--ink); pointer-events: none; }

.sankey .node-label { font-size: 13px; }
.sankey .lbl-name {
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  fill: var(--ink);
}
.sankey .lbl-count {
  font-size: 11.5px; font-weight: 400; fill: var(--muted);
  font-variant-numeric: tabular-nums;
}

.sankey .stage-headers text {
  font-size: 12px; font-style: italic; font-weight: 400;
  fill: var(--muted);
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

.sankey .link {
  fill: none;
  stroke-opacity: 0.70;          /* pastel ribbons read at this opacity */
  mix-blend-mode: normal;
  transition: stroke-opacity 0.15s;
  cursor: pointer;
}
.sankey .link:hover { stroke-opacity: 0.90; }
.sankey .link.dim, .sankey .node.dim rect, .sankey .node.dim text {
  stroke-opacity: 0.05; opacity: 0.18;
}
.sankey .link.hi  { stroke-opacity: 0.65; }
.sankey .node.hi rect { stroke: var(--accent); stroke-width: 1.4px; }

/* ─── Figure-key panel: lives in the right rail, swaps on scroll ──────── */

#fig-key {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink);
}
#fig-key .fk-h {
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--muted);
  margin: 0 0 0.55rem 0; padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--rule);
}
#fig-key[hidden] { display: none; }
#fig-key .fk-h {
  font-weight: 700;
  color: var(--muted);
  font-size: var(--fs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}
#fig-key .fk-item {
  display: flex; align-items: center; gap: 0.55em;
  padding: 0.15em 0.25em;
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
}
#fig-key .fk-item:hover  { background: rgba(0,0,0,0.04); }
#fig-key .fk-item.active { background: var(--ink); color: var(--paper); }
#fig-key .fk-sw {
  width: 12px; height: 12px;
  border: 1px solid var(--border); border-radius: 2px;
  flex: 0 0 12px;
}
#fig-key .fk-lab {
  flex: 1 1 auto;
  min-width: 0;
  /* Underscored slugs like "communication_media_studies" have no natural
     break opportunities, so flex:1 alone won't shrink them — they overflow
     into the count chip. Allow breaking anywhere as a last resort, with
     normal word-wrap preferred when whitespace is available. */
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.3;
}
#fig-key .fk-cit {
  font-size: 10.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-left: 0.4em;
  white-space: nowrap;
  flex: 0 0 auto;
  margin-left: auto;
}
#fig-key .fk-item.active .fk-cit { color: var(--paper); opacity: 0.7; }
/* Size-encoding section: "Citations" with three example bubbles
   scaled by the same rScale the chart uses. Sits below the colour
   legend, separated by a thin rule. */
#fig-key .fk-sizes {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--rule);
}
#fig-key .fk-sub-h {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
#fig-key .fk-size-row {
  display: flex; align-items: center; gap: 0.55em;
  padding: 0.12em 0.25em;
  font-size: 12px;
}
#fig-key .fk-size-dot {
  display: inline-block;
  background: var(--ink-soft);
  border-radius: 50%;
  border: 1px solid var(--border);
  flex: 0 0 auto;
  /* dot is centred in a 24px column so different sizes align horizontally */
  margin: 0 calc(12px - 0.5 * var(--w, 12px));
}
#fig-key .fk-size-lab {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
#fig-key .fk-item.active .fk-sw { outline: 1px solid var(--paper); }
#fig-key .fk-clear {
  margin-top: 0.5rem;
  font-size: 11.5px; font-style: italic;
  color: var(--muted);
  cursor: pointer;
}
#fig-key .fk-clear:hover { color: var(--ink); }

/* ─── Year-range filter + bump-toggle (.fig-controls extensions) ──────── */

.fig-controls .year-range {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--fs);
}
.fig-controls .year-range input[type="number"] { width: 5.2rem; }

/* ─── Per-figure notes textarea + download bar ───────────────────────── */

.fig-notes {
  display: block;
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.6rem 0.75rem;
  background: var(--paper);
  border: 1px dashed var(--border);
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  resize: vertical;
  min-height: 2.4rem;
}
.fig-notes::placeholder { color: var(--muted); font-style: italic; }
.fig-notes:focus { outline: none; border-color: var(--ink); border-style: solid; }

.notes-bar {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0.4rem 0 1.8rem;
  font-family: var(--sans); font-style: italic;
  font-size: 12.5px;
  color: var(--muted);
}
.notes-bar button {
  font-family: var(--sans); font-style: normal; font-weight: 600;
  font-size: 13px;
  padding: 0.4em 0.85em;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--border); border-radius: 3px;
  cursor: pointer;
}
.notes-bar button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ─── Figure controls (selectors + tabs) ──────────────────────────────── */

.fig-controls {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem;
  align-items: center;
  margin: 0.4rem 0 0.8rem;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
}
.fig-controls label { display: inline-flex; align-items: center; gap: 0.4rem; }

/* When a URL pins a control's value (Topic/Type on the inline-spawned
 * beeswarms), the corresponding label drops out of the layout entirely —
 * the scoped figure no longer needs a chooser for the dimension it's
 * already fixed to. */
.fig-controls label.fig-control-fixed { display: none; }
/* Controls that only make sense in Bump view (e.g. the topic / sub-topic
   filter for Fig 5) are hidden by default; the JS adds `view-bump` to the
   parent `.fig` to reveal them when Bump is the active view. */
.fig-controls .bump-only { display: none; }
.fig.view-bump .fig-controls .bump-only { display: inline-flex; }
.fig-controls input[type="search"] {
  font-family: var(--sans); font: inherit; font-size: 12.5px;
  padding: 0.3em 0.55em;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 3px;
  width: 14rem;
}
.fig-controls input[type="search"]::placeholder { color: var(--muted); }
.fig-controls select,
.fig-controls input[type="number"] {
  font-family: var(--sans); font: inherit; font-size: 12.5px;
  padding: 0.3em 0.55em;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.fig-controls input[type="number"] { width: 5rem; }
.fig-controls .spacer { flex: 1; }
.fig-controls .seg { display: inline-flex; gap: 0; }
.fig-controls .tab,
.tab {
  font-family: var(--sans);
  font-size: 12px;
  padding: 0.3em 0.7em;
  background: var(--paper);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.fig-controls .seg .tab { border-radius: 0; }
.fig-controls .seg .tab:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.fig-controls .seg .tab:last-child  { border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-left: none; }
.tab:hover { color: var(--ink); }
.tab.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 600;
}

/* ─── Chart axes / labels (D3) ────────────────────────────────────────── */

/* Charts fill the figure column at full width; their height is computed by
   the SVG viewBox aspect ratio (very tall in Fig 7 Matrix view — that's fine,
   scrolling is normal). DO NOT add `max-height`: it makes preserveAspectRatio
   shrink the width to fit, squeezing the chart into a thin strip. */
.chart {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  width: 100%;
  height: auto;
  display: block;
}
/* Uniform editorial label style across ALL chart text:
   Test National Semibold, uppercase, slight tracking. */
.chart text {
  font-family: "Test National", "Helvetica Neue", Inter, "Segoe UI", Arial, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.chart .axis text       { font-size: 11.5px; font-weight: 600; }
.chart .y-labels text   { font-size: 11px;   font-weight: 600; }
.chart .axis path, .chart .axis line { stroke: var(--rule); }
.chart .axis text { fill: var(--ink-soft); }
.chart .y-labels text { fill: var(--ink); }
.chart .legend text { font-size: 12.5px; font-weight: 600; }
.chart .rowguides line { stroke: var(--rule); stroke-dasharray: 2 3; }
.chart .legend text { fill: var(--ink-soft); font-size: 13px; }
.chart circle { stroke: rgba(30, 29, 28, 0.18); stroke-width: 0.4px;
                transition: opacity 0.15s; }
.chart circle.dim { opacity: 0.10; }
.chart circle.hi  { stroke: var(--ink); stroke-width: 1px; }
/* "Selected" via click: matches a pinned data-card on a beeswarm dot. */
.chart circle.selected {
  stroke: var(--accent); stroke-width: 2.4px;
  filter: drop-shadow(0 0 6px rgba(177, 103, 68, 0.55));
}
/* Static-PNG-style network: clear labels, click → highlight neighbours. */
.chart.network .node-label    {
  fill: var(--ink); font-weight: 600;
  font-size: 11.5px; letter-spacing: 0.03em;
}
.chart.network circle         { transition: opacity 0.15s, r 0.15s; }
.chart.network circle.hi      { stroke: var(--ink); stroke-width: 1.5px; }
.chart.network circle.dim     { opacity: 0.08; }
.chart.network line.dim       { stroke-opacity: 0.03; }
.chart.network line.hi        { stroke: var(--accent); stroke-opacity: 0.85; }
.chart.network text.node-label     { transition: opacity 0.15s; }
.chart.network text.node-label.dim { opacity: 0.18; }
/* Bump chart (#10): thin, clean lines à la rawgraphs/bumpchart; no scatter dots. */
.chart.bump .series         { transition: opacity 0.15s; cursor: pointer; }
.chart.bump .series.dim     { opacity: 0.08; }
.chart.bump .series.hi      { opacity: 1; }
.chart.bump .series path.hit { pointer-events: stroke; }   /* widen hit area */
.chart.bump .series path:not(.hit) { stroke-width: 1.6px; fill: none; opacity: 0.95; }
.chart.bump .series.hi path:not(.hit) { stroke-width: 3px; opacity: 1; }
.chart.bump .series circle  { r: 1.6; opacity: 0; }   /* hover targets only */
.chart.bump .series.hi circle,
.chart.bump .series:hover circle { opacity: 1; }
.chart.bump .series .label  {
  font-size: 12.5px; font-weight: 600;
  fill: var(--ink); letter-spacing: 0.04em;
}
.chart.bump .series.hi .label {
  font-size: 14px; font-weight: 700;
  paint-order: stroke;                            /* halo for legibility */
  stroke: var(--paper); stroke-width: 3px;
}

/* ─── Figure 14: radial convergence map (terms) ───────────────────────── */

/* Term rows read as text, not chart labels: Caslon, lowercase, no tracking. */
.chart.termsmap text.term {
  font-family: var(--serif);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 13.5px;
  fill: var(--ink);
}
.chart.termsmap .tm-head {
  font-size: 11.5px;
  font-weight: 600;
  fill: var(--ink);
}
.chart.termsmap .tm-card { transition: opacity 0.15s; }
.chart.termsmap .tm-card.dim { opacity: 0.15; }
/* Pair-overlap boxes: smaller, denser term rows than the category cards. */
.chart.termsmap text.tm-pair-term { font-size: 12px; fill: var(--ink-soft); }
.chart.termsmap .tm-pair .tm-head { font-size: 10px; fill: var(--muted); }

/* Venn variant (Figure 14): translucent set circles + region keyword lists.
   Sizes are generous — the SVG renders at ~0.75× its 1500px viewBox. */
.chart.termsmap.venn .vn-circle { transition: opacity 0.15s; }
.chart.termsmap.venn .vn-circle.dim { opacity: 0.12; }
.chart.termsmap.venn .vn-name {
  font-size: 22px;
  letter-spacing: 0.05em;
}
.chart.termsmap.venn text.vn-excl   { font-size: 18px; }
.chart.termsmap.venn text.vn-pair   {
  font-size: 15.5px;
  fill: var(--ink-soft);
  font-style: italic;
}
.chart.termsmap.venn text.vn-triple {
  font-size: 14px;
  fill: var(--ink-soft);
  font-style: italic;
}
.chart.termsmap.venn text.vn-center { font-size: 18px; font-weight: 600; }

/* ─── Data hover-card (chart elements) ────────────────────────────────── */

#data-card {
  position: absolute;
  z-index: 60;
  max-width: 28rem;
  padding: 0.7rem 0.9rem;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(28, 26, 24, 0.10);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  /* Interactive: user can move into the card to click links (DOI / URL).
     The dataCard helper delays hide() by 280 ms after the source mouseleaves. */
  pointer-events: auto;
}
/* Pinned (click-to-pin from a beeswarm dot, #4): selectable, larger,
   shows the FULL Abstract Note (no line-clamp), with a close button. */
#data-card.pinned {
  pointer-events: auto;
  max-width: 32rem;
  padding: 0.95rem 1.1rem 1.05rem;
  box-shadow: 0 14px 38px rgba(30, 29, 28, 0.22);
}
#data-card .dc-close {
  position: absolute;
  top: 0.35rem; right: 0.45rem;
  width: 1.4rem; height: 1.4rem;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
#data-card .dc-close:hover { color: var(--ink); }
#data-card .dc-abs.full { -webkit-line-clamp: unset; max-height: 60vh;
                           overflow-y: auto; }
#data-card .dc-q {
  /* The MENTIONED ITEM is the focus of every beeswarm hover (per #14). */
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs);
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding-left: 0.5rem;
  margin-bottom: 0.5rem;
}
#data-card .dc-t {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.32;
}
#data-card .dc-t a { color: var(--accent); border-bottom: 1px solid rgba(192, 67, 31, 0.45); }
#data-card .dc-t a:hover { color: var(--ink); border-bottom-color: var(--ink); }
#data-card .dc-t a.ext::after { content: ""; }
#data-card .dc-meta { color: var(--muted); font-size: var(--fs);
                      margin: 0.35rem 0 1.0rem; }   /* more space below title (#3) */
#data-card .dc-rows { margin-top: 0.8rem; }
#data-card .dc-pdf  {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
  word-break: break-all;
  user-select: all;          /* one click and ⌘+C to copy the path */
}
#data-card .dc-row    { display: grid; grid-template-columns: 7rem 1fr; gap: 0.4rem; padding: 0.06rem 0; font-size: var(--fs); }
#data-card .dc-row span { color: var(--muted); }
/* Abstract Note (#1): italic block, line-clamped so long abstracts don't blow
   out the card. Truncated visually; the full text stays in the hover element. */
#data-card .dc-abs {
  max-width: 24rem;
  margin-top: 0.45rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: var(--fs);
  font-style: italic;
  line-height: 1.38;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 880px) {
  :root { --side-w: 0px; --right-w: 0px; }
  #sidebar {
    position: static;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding: 1rem 1.2rem;
  }
  #right-rail { display: none; }   /* key/resources hidden on narrow screens */
  #content { margin-left: 0; margin-right: 0; padding: 1.4rem 1.2rem 3rem; }
}
/* Below a comfortable two-rail width, drop the right rail before the left. */
@media (max-width: 1180px) and (min-width: 881px) {
  :root { --right-w: 0px; }
  #right-rail { display: none; }
}

/* PDF download status line in the panel. */
#pdf-panel .pdf-status {
  margin: 0.9rem 0 0; font-family: var(--sans); font-size: 12px;
  color: var(--muted);
}
#pdf-panel .pdf-status[hidden] { display: none; }

/* ─── Print fallback (accidental Ctrl+P) ──────────────────────────────────
   Downloads use the author's Obsidian-exported PDFs (merged client-side), so
   browser printing is no longer the export path. If the reader prints anyway,
   hide the chrome and print just the open chapter, sensibly. */
@media print {
  @page { size: A4; margin: 2.5cm; }
  #sidebar, #right-rail, #analysis, #cite-card, #data-card,
  .pdf-btn, #pdf-panel, .fig-foot, .fig-controls { display: none !important; }
  #content { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .prose { max-width: none !important; }
  .prose a { color: #1c1a18 !important; text-decoration: none !important; }
  .prose figure, .prose table, .prose img {
    break-inside: avoid; page-break-inside: avoid;
  }
}