/* Cross-document view transitions. Chrome (126+) tweens between same-origin
   page navigations instead of hard-cutting: the topbar and day-scrubber stay
   put (named below) while the transcript body cross-fades. Falls back to
   normal navigation in browsers without support. */
@view-transition { navigation: auto }

/* Persistent UI chrome — same element on every day page. Naming them keeps
   them in-place across the transition instead of cross-fading. The day badge
   is intentionally NOT named: a JS roll-in (reader.js) ticks the number from
   the previous day to the new one and works regardless of whether
   cross-document view-transitions fire (they don't on file:// in Chrome). */
.topbar       { view-transition-name: site-topbar }
.scrubber     { view-transition-name: day-scrubber }
.scrubber .d.cur { view-transition-name: cur-day }

/* Day-badge roll state (set by JS while ticking through the intermediate
   day numbers). A small color shift signals the animation. */
header.orient .num b#dayNum.rolling {
  color: var(--red);
  transition: color .12s;
}

/* Default cross-fade pacing. Slightly tightened so the transition reads as a
   roll rather than a wipe. Honour reduced-motion. */
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation-duration: 220ms; animation-timing-function: cubic-bezier(.4,0,.2,1) }
::view-transition-group(cur-day) { animation-duration: 320ms }
::view-transition-group(day-badge) { animation-duration: 280ms }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation-duration: 0.01ms }
}

:root{
    --paper:#fdfcf9;
    --paper-2:#f5f1e8;
    --paper-3:#ece5d3;
    --ink:#15130f;
    --ink-2:#3a342a;
    --ink-3:#7a7363;
    --ink-4:#75705f;          /* "whisper" tier — previously #a39c8c (failed WCAG AA at 2.65:1 on paper). Now ~4.91:1. Hierarchy below --ink-3 lives in size/weight, not lightness. */
    --rule:#1a1814;
    --rule-soft:#d8d2c4;
    --rule-softer:#ebe5d3;
    --red:#5C1A2B;            /* law-binding burgundy — deeper, bluer than brick */
    --ink-blue:#2A3B52;       /* cool note: links/hover where red shouldn't carry the load */
    --serif:'Spectral', 'Times New Roman', serif;
    --mono:'JetBrains Mono', ui-monospace, monospace;
    /* Sticky-header geometry. Both .topbar and .scrubber are position:sticky
       and stack — encoding their heights as variables keeps .scrubber's `top`,
       .pane's `top`, and main's min-height in lockstep with the topbar's
       actual rendered height. Previously these were hard-coded (43px / 85px)
       which caused the day-strip to slip behind the topbar whenever the
       topbar grew (mobile wrap, slightly larger fonts). */
    --topbar-h:56px;
    --scrubber-h:42px;       /* was 35px — bumped with the day cells from 22→28px */
  }
  *{box-sizing:border-box}
  html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif)}
  body{font-size:16px;line-height:1.55}
  ::selection{background:#fdecc8}
  a, a *{color:inherit;cursor:pointer !important}
  /* Prevent text I-beam from overriding pointer cursor inside links on macOS */
  a{user-select:none}

  /* --- Top bar: minimal, factual --- */
  .topbar{
    border-bottom:1px solid var(--rule);
    display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;
    padding:14px 28px;background:var(--paper);
    position:sticky;top:0;z-index:50;
    min-height:var(--topbar-h);box-sizing:border-box;
    font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-2);text-transform:uppercase;
  }
  .topbar .crest b{color:var(--ink);font-family:var(--serif);font-weight:600;font-size:14px;letter-spacing:0;text-transform:none;margin-right:8px}
  .topbar nav{display:flex;gap:16px;justify-self:center;font-size:10.5px}
  .topbar nav a{text-decoration:none;color:var(--ink-3);padding:6px 4px;border-bottom:1px solid transparent;cursor:pointer}
  .topbar nav a.cur{color:var(--ink);border-bottom-color:var(--ink)}
  .topbar nav a:hover{color:var(--ink);background:var(--paper-2);border-radius:3px}
  .topbar .right{font-size:10.5px;color:var(--ink-3);display:flex;align-items:center;gap:14px}
  .topbar .right b{color:var(--ink)}

  /* Reader / Researcher toggle. Two segments, ink ring, no red. */
  .vmode{display:inline-flex;border:1px solid var(--rule);border-radius:99px;padding:1px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;background:var(--paper)}
  .vmode button{background:transparent;border:0;padding:5px 10px;color:var(--ink-3);font:inherit;letter-spacing:inherit;cursor:pointer;border-radius:99px;transition:background .15s,color .15s}
  .vmode button:hover{color:var(--ink-2)}
  .vmode button.cur{background:var(--ink);color:var(--paper)}
  .vmode .lbl{padding:5px 8px 5px 4px;color:var(--ink-3);font-size:8.5px;letter-spacing:.18em;display:inline-flex;align-items:center}

  /* --- Day scrubber --- */
  .scrubber{padding:6px 28px;border-bottom:1px solid var(--rule-soft);background:var(--paper-2);display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink-2);text-transform:uppercase;overflow-x:auto;white-space:nowrap;position:sticky;top:var(--topbar-h);min-height:var(--scrubber-h);box-sizing:border-box;z-index:49}
  .scrubber .lbl{flex:0 0 auto;padding-right:6px;font-size:10.5px;color:var(--ink-3);letter-spacing:.14em}
  .scrubber .days{display:flex;gap:0;flex:1 1 auto}
  .scrubber .d{flex:1;min-width:28px;height:28px;border-right:1px solid var(--rule-softer);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-3);position:relative;text-decoration:none;font-size:12.5px;font-weight:500;transition:color .12s,box-shadow .12s}
  /* Hover: a 2px burgundy underline, no background fill — sits cleanly next to
     the .cur tile without the beige hover colliding visually with the dark fill. */
  .scrubber .d:hover{color:var(--ink);box-shadow:inset 0 -2px 0 var(--red)}
  /* Current-day tile. Border-right matches the fill so the dark block reads
     as one solid shape rather than a dark cell with a faint right hairline. */
  .scrubber .d.cur{background:var(--ink);color:var(--paper);font-weight:600;border-right-color:var(--ink)}
  /* Days lower-numbered than the current day used to carry an underline marker
     ("done"). Removed 2026-05-19: it tracks numeric ordering, not actual visit
     state, and reads as a hyperlink-underline mismatch (all day cells are
     links, but only earlier-numbered ones were underlined). The boxed current
     day already carries the "where you are" signal cleanly.
     The .done class is still set in reader.js renderScrubber() for future use. */

  /* --- Two-pane layout --- */
  main{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);min-height:calc(100vh - var(--topbar-h) - var(--scrubber-h))}
  @media (max-width:1100px){main{grid-template-columns:1fr}}

  /* === LEFT: TRANSCRIPT === */
  .transcript{padding:32px 36px 120px;border-right:1px solid var(--rule-soft);max-width:none;min-width:0}

  /* Orientation: factual labels only. No dek, no pull-quote. */
  .orient{display:grid;grid-template-columns:80px 1fr;gap:24px;padding-bottom:18px;margin-bottom:18px}
  /* (Removed 2026-05-20: .orient's bottom border. It was stacking against the
     folio's top border immediately below, drawing two parallel rules with
     only 18px of margin between them. The folio's top border alone now marks
     the seam between the day-orient block and the transcript grid.) */
  .orient .num{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;line-height:1.2}
  .orient .num b{display:block;font-family:var(--serif);font-size:54px;font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:1;margin-top:2px;text-transform:none}
  .orient .head h1{margin:0 0 8px;font-family:var(--serif);font-size:22px;font-weight:500;line-height:1.25;letter-spacing:-.005em}
  .orient .head h1 .quiet{color:var(--ink-3);font-weight:400}
  /* Day summary — runs in the same h1 slot but reads as prose, not a title.
     Smaller and looser than a headline; carries the actual narrative weight of the day. */
  .orient .head h1 .day-summary{font-family:var(--serif);font-size:16.5px;font-weight:400;line-height:1.55;color:var(--ink-2);letter-spacing:0;display:block;text-wrap:pretty;max-width:62ch}
  .orient .head .facts{font-family:var(--mono);font-size:11px;line-height:1.85;color:var(--ink-2);letter-spacing:.04em;display:grid;grid-template-columns:auto 1fr;gap:0 24px;max-width:54ch}
  .orient .head .facts dt{color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em;font-size:9.5px;padding-top:3px}
  .orient .head .facts dd{margin:0;padding:0;color:var(--ink)}
  .orient .head .facts dd em{color:var(--ink-3);font-style:normal}

  /* Search — now lives at the top of the right pane */
  .pane-search{padding:10px 14px 8px;border-bottom:1px solid var(--rule-soft)}
  .pane-search form{display:flex;align-items:center;gap:6px}
  .pane-search input{flex:1;border:1px solid var(--rule-soft);border-radius:3px;padding:6px 9px;font-family:var(--mono);font-size:11px;background:var(--paper);color:var(--ink);outline:none;min-width:0}
  .pane-search input:focus{border-color:var(--ink-3)}
  .pane-search input::placeholder{color:var(--ink-3)}
  .pane-search-all{flex:0 0 auto;font-family:var(--mono);font-size:9.5px;color:var(--ink-3);text-decoration:none;letter-spacing:.04em;white-space:nowrap}
  .pane-search-all:hover{color:var(--ink-blue)}

  /* ============== RESEARCHER MODE OVERRIDES ==============
     Triggered by body.mode-researcher. Strips the reader chrome: chapter
     interpretations, glossary tooltip underlines, day-plan descriptions,
     speaker-change typographic rule. Tightens the prose to a folio measure.
     Keeps line numbers, exhibit badges, anchors, search, filter. */
  body.mode-researcher .folio .chap .t{font-style:normal;font-weight:400;color:var(--ink-3);font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;border-bottom:1px dotted var(--rule-soft)}
  body.mode-researcher .folio .chap .t::before{content:"— ";color:var(--ink-3)}
  body.mode-researcher .gloss{border-bottom:0;cursor:text;text-decoration:none}
  body.mode-researcher .gloss:hover{background:transparent}
  /* Prose: tighter measure, slightly tighter leading. Keep Spectral — swapping
     to a mono would over-claim. The point is folio measure, not typewriter. */
  body.mode-researcher .folio .tx{font-size:15.5px;line-height:1.5}
  body.mode-researcher .folio .tx p em{font-style:normal;color:var(--ink-3)}
  /* Line numbers: always prominent, always present. */
  body.mode-researcher .folio .ln{color:var(--ink);font-weight:500}
  /* Speaker-change rule (the little ink bar) is reader ornament — hide. */
  body.mode-researcher .folio .row.change > .sp::before{display:none}
  /* Day plan in pane: descriptions hidden, list-as-bundle-index. */
  body.mode-researcher .pane-default .day-plan dd em{display:none}
  body.mode-researcher .pane-default p{display:none}  /* drop the intro lede */
  body.mode-researcher .pane-default .day-plan{margin-top:0;border-top:0;padding-top:0}
  /* Orient header: drop the editorial title with its grayed continuation, keep the facts dl. */
  body.mode-researcher .orient .head h1{font-size:14px;font-family:var(--mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
  body.mode-researcher .orient .head h1 .quiet{display:none}
  /* (Removed 2026-05-20: the on-hover "COPY" pseudo-label below each line
     overlapped the next row's prose. Click-the-line-number still copies the
     citation in Researcher mode — the gesture just isn't advertised visually
     anymore. Right-click → Copy link works in both modes.) */

  /* === The transcript folio === */
  .folio{display:grid;grid-template-columns:60px 130px 1fr;column-gap:22px;row-gap:0;border-top:1px solid var(--rule)}
  .folio .row{display:contents}
  /* scroll-margin-top so scrollIntoView (used by chap-link clicks) lands the row
     below the sticky topbar instead of behind it. */
  .folio .row > *{padding:14px 0 14px;border-bottom:1px dotted var(--rule-soft);scroll-margin-top:60px}
  /* Rows are clickable (pin handler) — show it via cursor only.
     No hover-background — the scroll-driven .active highlight already conveys
     "where you are" and a mouse-hover competing with it was noisy. */
  .folio .row:not(.active):not(.fade) > .ln,
  .folio .row:not(.active):not(.fade) > .sp,
  .folio .row:not(.active):not(.fade) > .tx{cursor:pointer}
  .folio .row.fade > *{opacity:.18}
  /* Active row: no visual highlight — the scroll-spy class is kept so the
     pane (chapter, exhibits) still tracks position, but we don't mark the
     row itself. */
  /* Brief flash when arrived at via a chap-link click — fades back to active state. */
  .folio .row.chap-target > .ln,
  .folio .row.chap-target > .sp,
  .folio .row.chap-target > .tx{animation:chap-flash 1.2s ease-out}
  @keyframes chap-flash{
    0%{box-shadow:inset 0 0 0 2px var(--red);background:#f3e5cf}
    100%{box-shadow:none;background:transparent}
  }
  /* Bookmarked row — small ★ in the gutter of the .ln cell so it's visible while scrolling. */
  .folio .row.bookmarked > .ln{position:relative}
  .folio .row.bookmarked > .ln::before{
    content:"★";position:absolute;left:-14px;top:14px;
    font-size:10px;color:var(--red);line-height:1;pointer-events:none;
  }
  /* Scope band: rows that share the active row's artefact get a subtle
     left-edge tick on their .ln cell, implying "still in scope." Decays
     visually without claiming hard ownership. */
  .folio .row.in-scope > .ln{box-shadow:inset 3px 0 0 0 var(--red)}

  .folio .ln{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;padding:18px 0 14px 8px;font-variant:tabular-nums}
  .folio .ln a{color:inherit;text-decoration:none}
  .folio .ln a:hover{color:var(--ink-blue)}

  .folio .sp{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);font-weight:600;padding-top:18px;display:flex;flex-direction:column;gap:2px;line-height:1.3}
  .folio .sp .role{font-family:var(--serif);font-size:11.5px;letter-spacing:.02em;text-transform:none;color:var(--ink-3);font-style:italic;font-weight:400}

  .folio .tx{font-size:17px;line-height:1.6;color:var(--ink);padding-top:16px;text-wrap:pretty;min-width:0}
  .folio .tx p{margin:0}
  .folio .tx p + p{margin-top:8px}

  /* Speaker-change rule */
  /* Speaker-change marker (14×1px bar above the speaker name on rows where the
     speaker differs from the previous row) removed 2026-05-19. Redundant: the
     speaker name itself already shows when the speaker changes. The .change
     class is still set in reader.js for any future use (scroll-spy, etc.). */

  /* Glossary hover */
  .gloss{border-bottom:1px dotted var(--red);cursor:help;text-decoration:none;color:inherit}
  .gloss:hover{background:#fdecc8}

  /* Exhibit reference badge — opens right pane */
  .exhibit{
    display:inline-flex;align-items:center;gap:5px;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
    color:var(--red);border:1px solid var(--red);padding:1px 7px;margin:0 1px;border-radius:2px;
    text-decoration:none;cursor:pointer;font-weight:500;vertical-align:1px;
  }
  .exhibit:hover{background:var(--red);color:var(--paper)}
  .exhibit::before{content:"§";font-family:var(--serif);font-style:italic;font-weight:600;letter-spacing:0;font-size:12px;line-height:1}

  /* Chapter rule */
  .folio .chap{grid-column:1/-1;display:grid;grid-template-columns:60px 130px 1fr;column-gap:22px;padding:20px 0 6px;border-bottom:0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
  /* chap-head: single flex row — toggle | folio | title (flex:1) | turns */
  .folio .chap .chap-head{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
  .folio .chap .chap-head .lbl{flex:0 0 auto;color:var(--ink-3)}
  .folio .chap .chap-toggle{
    flex:0 0 auto;
    background:transparent;border:1px solid var(--rule-soft);
    width:22px;height:22px;border-radius:3px;
    color:var(--ink-3);cursor:pointer;font:inherit;font-size:13px;line-height:1;
    display:flex;align-items:center;justify-content:center;
    transition:background .12s,color .12s,border-color .12s;padding:0;
  }
  .folio .chap .chap-toggle:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .folio .chap .chap-count{
    flex:0 0 auto;
    font-family:var(--mono);font-size:9px;color:var(--ink-4);
    letter-spacing:.08em;text-transform:uppercase;
  }
  .folio .chap .t{flex:1;min-width:0;color:var(--ink);font-family:var(--serif);font-size:13.5px;letter-spacing:0;text-transform:none;font-style:italic;font-weight:500;cursor:pointer}
  .folio .chap .t:hover{color:var(--ink-blue)}
  /* Subtitle + summary teasers — hidden by default, shown when chapter is collapsed. */
  .folio .chap .sub,
  .folio .chap .sm{grid-column:2/-1;display:none;font-family:var(--serif);text-transform:none;letter-spacing:0;text-wrap:pretty}
  .folio .chap .sub{font-size:12.5px;color:var(--ink-3);font-style:italic;margin-top:6px;padding-top:6px;border-top:0}
  .folio .chap .sm{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.55}

  /* Collapsed state */
  .folio .chap.collapsed .chap-toggle{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .folio .chap.collapsed .chap-toggle::before{content:"+"}
  .folio .chap.collapsed .chap-toggle{font-size:0}
  .folio .chap.collapsed .chap-toggle::before{font-size:14px;line-height:1}
  .folio .chap.collapsed .chap-head{padding-bottom:4px;border-bottom-style:dotted}
  .folio .chap.collapsed .sub,
  .folio .chap.collapsed .sm{display:block}
  .folio .row.collapsed{display:none}

  /* End rule */
  .end{margin-top:24px;text-align:center;font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.16em;text-transform:uppercase}

  /* === RIGHT: ARTEFACT PANE === */
  .pane{position:sticky;top:calc(var(--topbar-h) + var(--scrubber-h));align-self:start;height:calc(100vh - var(--topbar-h) - var(--scrubber-h));overflow-y:auto;background:var(--paper-2);padding:28px 28px 32px}
  .pane-head{display:flex;align-items:baseline;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--rule-soft)}
  .pane-head .what b{color:var(--ink);font-family:var(--serif);font-style:italic;font-size:14px;letter-spacing:0;text-transform:none;font-weight:500;margin-right:6px}
  .pane-head .nav{display:flex;gap:6px}
  .pane-head .nav button{background:transparent;border:1px solid var(--rule-soft);color:var(--ink-3);width:24px;height:22px;border-radius:3px;cursor:pointer;font:inherit;font-size:11px;letter-spacing:0}
  .pane-head .nav button:hover{color:var(--ink);border-color:var(--ink)}

  .artefact{display:none;margin-bottom:24px}
  .artefact.cur{display:block}
  .artefact.cur + .artefact.cur{padding-top:18px;border-top:1px dashed var(--rule-soft)}
  .artefact.cur.fade-in{animation:fade .25s ease both}
  @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

  .art-meta{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase;margin-bottom:6px;display:flex;justify-content:space-between}
  .art-meta b{color:var(--ink-2);letter-spacing:.04em;font-weight:500}
  .art-title{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.012em;line-height:1.2;margin:0 0 14px;color:var(--ink)}
  .art-title em{font-style:italic;color:var(--ink-2);font-weight:500}

  /* Document-scan look */
  .scan{
    background:linear-gradient(180deg,#fbf6e6 0%,#f5efd9 100%);
    border:1px solid #c8bd9a;
    box-shadow:0 1px 0 #ece3c2 inset, 0 6px 14px rgba(60,40,10,0.10);
    padding:20px 22px;border-radius:1px;position:relative;
    font-family:var(--serif);font-size:13.5px;line-height:1.55;color:#231f15;
  }
  .scan::before{content:"";position:absolute;left:14px;top:6px;right:14px;height:1px;background:repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,.08) 6px 7px)}
  .scan::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18px;background:linear-gradient(180deg,transparent,rgba(120,100,40,0.08))}
  .scan .stamp{position:absolute;top:8px;right:14px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#8b6e2a;border:1px solid #8b6e2a;padding:1px 6px;border-radius:2px;transform:rotate(-2deg);background:rgba(255,250,230,0.6)}
  .scan h5{margin:0 0 8px;font-family:var(--serif);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;font-variant:small-caps;color:#5a4a1f}
  .scan p{margin:0 0 8px}
  .scan p:last-child{margin-bottom:0}
  .scan .ger{font-style:italic;color:#3a3220}
  .scan ol{margin:0 0 0 18px;padding:0}
  .scan ol li{margin-bottom:4px}
  .scan .underline{text-decoration:underline;text-underline-offset:2px}
  .scan .blot{display:inline-block;height:1em;background:#231f15;width:5em;vertical-align:-2px;border-radius:1px;opacity:.85}

  /* Filmstrip preview — used only for low-sensitivity public-record footage */
  .filmstrip{
    background:#1a1a18;border-radius:3px;padding:8px;position:relative;
    display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
  }
  .filmstrip::before,.filmstrip::after{content:"";position:absolute;left:0;right:0;height:14px;background:repeating-linear-gradient(90deg,#1a1a18 0 8px,#0d0d0c 8px 9px,#1a1a18 9px 18px,#000 18px 26px,#1a1a18 26px 36px)}
  .filmstrip::before{top:-14px}
  .filmstrip::after{bottom:-14px}
  .filmstrip .frame{aspect-ratio:4/3;background:linear-gradient(135deg,#2a2823,#3a342a);border:1px solid rgba(255,255,255,.08);display:flex;align-items:flex-end;padding:4px 6px;font-family:var(--mono);font-size:8.5px;color:rgba(255,255,255,.45);letter-spacing:.08em;text-transform:uppercase}
  .filmstrip .frame.poster{background:radial-gradient(circle at 50% 40%, #5a4a2a, #1f1810)}
  .filmstrip-cap{margin-top:22px;font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.06em;text-align:center;text-transform:uppercase}

  /* Poster-with-content-note — used when frames may contain sensitive content
     and we don't want to render them inline. The reader makes a deliberate
     click to view. */
  .film-gate{position:relative;background:#1a1a18;border-radius:3px;padding:36px 22px;color:rgba(255,255,255,.85);font-family:var(--serif);text-align:center;overflow:hidden}
  .film-gate::before{content:"\25B6";position:absolute;left:0;right:0;top:14px;font-size:32px;color:rgba(255,255,255,.18);font-family:var(--serif)}
  .film-gate .note{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#d6b265;margin-bottom:14px;display:block}
  .film-gate .desc{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.78);margin:0 0 16px;font-style:italic}
  .film-gate .gate-btn{display:inline-block;border:1px solid rgba(214,178,101,0.6);color:#d6b265;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;border-radius:2px;cursor:pointer;text-decoration:none}
  .film-gate .gate-btn:hover{background:#d6b265;color:#1a1a18}

  /* Metadata-only card — used when no preview is available (rights, print not
     yet sourced). Honest about absence; surfaces what IS known. */
  .film-meta{background:var(--paper);border:1px solid var(--rule-soft);padding:14px 16px;font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--ink-2);letter-spacing:.02em}
  .film-meta .none{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--ink-3);margin:0 0 10px;letter-spacing:0;line-height:1.4}
  .film-meta dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px}
  .film-meta dt{color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em;font-size:9.5px;padding-top:2px}
  .film-meta dd{margin:0;color:var(--ink)}

  /* Witness photo placeholder */
  .witness-card{background:var(--paper);border:1px solid var(--rule-soft);padding:14px;display:grid;grid-template-columns:90px 1fr;gap:14px;align-items:start}
  .witness-card .ph{aspect-ratio:3/4;background:linear-gradient(135deg,#d4ccb6,#a89c7e);position:relative;display:flex;align-items:flex-end;padding:6px;font-family:var(--mono);font-size:8.5px;color:rgba(0,0,0,.5);letter-spacing:.06em;text-transform:uppercase}
  .witness-card .ph::before{content:"";position:absolute;left:14px;top:14px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.06)}
  .witness-card .info b{font-family:var(--serif);font-size:14px;font-weight:600;letter-spacing:-.005em;display:block;margin-bottom:2px}
  .witness-card .info .role{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
  .witness-card .info p{margin:0;font-family:var(--serif);font-size:12.5px;line-height:1.45;color:var(--ink-2)}

  /* Cross-link list */
  .links{margin-top:14px;display:flex;flex-direction:column;gap:0}
  .links a{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-top:1px dotted var(--rule-soft);font-family:var(--mono);font-size:10.5px;color:var(--ink-2);text-decoration:none;letter-spacing:.06em;text-transform:uppercase}
  .links a:first-child{border-top:0}
  .links a:hover{color:var(--ink-blue)}
  .links a b{font-family:var(--serif);font-size:13.5px;color:var(--ink);font-weight:500;letter-spacing:0;text-transform:none}
  .links a .at{color:var(--ink-3)}

  /* Default pane (when no exhibit in scope) */
  .pane-default{font-family:var(--serif);font-size:13.5px;line-height:1.55;color:var(--ink-2)}
  .pane-default .day-plan{margin:14px 0 0;border-top:1px solid var(--rule-soft);padding-top:14px}
  .pane-default .day-plan dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding-top:8px;border-top:1px dotted var(--rule-soft);font-weight:500}
  .pane-default .day-plan dt:first-of-type{border-top:0;padding-top:0}
  .pane-default .day-plan dd{margin:2px 0 8px;font-family:var(--serif);font-size:14px;color:var(--ink);line-height:1.4}
  .pane-default .day-plan dd em{color:var(--ink-3);font-style:italic;font-size:12px;display:block;margin-top:2px}

  /* === Pane mode indicator (chapter vs. artefact) === */
  /* Both pill states are ink-toned now — the red is reserved for navigation
     (§Exh badges), so the pane state read-out doesn't fight them. */
  .pane-head .mode{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--rule-soft);padding:2px 6px;border-radius:2px;margin-left:8px;vertical-align:1px;display:inline-block}
  .pane-head .mode.is-chapter{color:var(--ink-3)}
  .pane-head .mode.is-artefact{color:var(--paper);background:var(--ink);border-color:var(--ink)}

  /* === "About this view" footer block === */
  .about{margin-top:48px;padding:18px 0 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(3,1fr);gap:24px;font-family:var(--mono);font-size:10.5px;line-height:1.55;color:var(--ink-3);letter-spacing:.02em}
  .about h6{margin:0 0 6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
  .about p{margin:0 0 6px;font-family:var(--serif);font-size:12.5px;line-height:1.5;color:var(--ink-2);letter-spacing:0}
  .about code{font-family:var(--mono);font-size:10.5px;background:var(--paper-2);padding:0 4px;border-radius:2px;color:var(--ink)}
  .about .q{font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--ink-3);margin-top:4px}
  .about .open{color:var(--red);font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase}

  /* JS-off behaviour: the pane stops being sticky and the artefacts become
     proper endnotes at the end of the folio. No "kilometre of cards" —
     the heading makes the intent explicit, and the dense print of the
     scans + filmstrips collapses inline. */
  .nojs-banner{display:none;background:#fef4d0;border-bottom:1px solid #e0c878;padding:10px 28px;font-family:var(--mono);font-size:11px;color:#5a4a1f;letter-spacing:.04em}
  html:not(.js-on) .nojs-banner{display:block}
  html:not(.js-on) main{display:block}
  html:not(.js-on) .transcript{border-right:0}
  html:not(.js-on) .pane{position:static;height:auto;padding:36px 36px 60px;background:var(--paper);border-top:1px solid var(--rule);max-width:none}
  html:not(.js-on) .pane-head{display:none}
  html:not(.js-on) .pane::before{content:"Exhibits filed in folios 001\2013023";display:block;font-family:var(--serif);font-size:28px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0 0 8px}
  html:not(.js-on) .pane::after{content:"Without JavaScript, exhibits are listed here as endnotes. With JavaScript, they swap into a sticky right pane keyed to whichever line is currently in scope.";display:block;font-family:var(--serif);font-style:italic;font-size:13.5px;line-height:1.5;color:var(--ink-3);max-width:60ch;margin:0 0 22px;padding-bottom:14px;border-bottom:1px solid var(--rule-soft)}
  html:not(.js-on) .artefact{display:block;margin-bottom:28px;padding-bottom:22px;border-bottom:1px dotted var(--rule-soft)}
  html:not(.js-on) #art-default{display:none}
  html:not(.js-on) .pane-nav{display:none}

  /* === Day-nav arrows in the orient header ============================== */
  .orient .num{position:relative}
  .day-nav-btns{display:flex;gap:4px;margin-top:8px}
  .day-nav{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--rule-soft);border-radius:50%;color:var(--ink-2);text-decoration:none;font-size:13px;line-height:1;transition:background .12s,border-color .12s,color .12s}
  .day-nav:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .day-nav.off{opacity:.25;pointer-events:none}

  /* === Chapter outline (right pane) ====================================== */
  .chapter-outline{font-family:var(--serif)}
  .chapter-outline > h6{margin:18px 0 10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
  .chapter-outline > h6:first-child{margin-top:0}

  /* Evidence inventory — exhibits filed today, surfaced in the pane default state
     so the reader can browse evidence without having to scroll into the transcript. */
  .pane-evidence{margin-bottom:6px}
  .pane-evidence .evidence-list{list-style:none;margin:0;padding:0}
  .pane-evidence .evidence-list li{margin:0;padding:0;border-top:1px dotted var(--rule-soft)}
  .pane-evidence .evidence-list li:first-child{border-top:0}
  .pane-evidence .evidence-link{
    display:grid;grid-template-columns:auto 1fr auto;gap:10px;
    padding:9px 8px 9px 0;text-decoration:none;color:inherit;font-family:var(--serif);
    transition:background .12s;align-items:baseline;
  }
  .pane-evidence .evidence-link:hover{background:var(--paper-2)}
  .pane-evidence .evidence-link .eid{
    font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-blue);
    font-weight:600;text-transform:uppercase;padding-top:2px;
  }
  .pane-evidence .evidence-link .elab{
    font-size:12.5px;line-height:1.3;color:var(--ink-2);text-wrap:pretty;min-width:0;
  }
  .pane-evidence .evidence-link .eat{
    font-family:var(--mono);font-size:9px;color:var(--ink-4);letter-spacing:.04em;padding-top:3px;
  }
  /* Scan-availability indicator on each evidence row.
     "local" = on the local archive, "web" = institutional URL, "missing" = looked, not found. */
  .pane-evidence .evidence-list li{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center}
  .pane-evidence .scan-link{
    display:inline-flex;align-items:center;gap:4px;
    padding:4px 8px;margin-left:6px;
    font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
    text-decoration:none;color:var(--ink-4);
    border:1px dotted var(--rule-soft);border-radius:2px;
    transition:color .12s,border-color .12s,background .12s;
    flex:0 0 auto;
  }
  .pane-evidence .scan-link.scan-local{color:var(--ink-blue);border-color:var(--rule-soft)}
  .pane-evidence .scan-link.scan-web{color:var(--ink-blue);border-color:var(--rule-soft)}
  .pane-evidence .scan-link.scan-missing{color:var(--ink-4);border-style:dotted}
  .pane-evidence .scan-link:hover{border-color:var(--ink-blue);background:var(--paper-2)}
  .pane-evidence .scan-link.scan-missing:hover{border-color:var(--rule-soft);background:transparent;cursor:default}
  .pane-evidence .scan-link .scan-sym{font-size:10px;line-height:1}
  .pane-evidence .scan-link .scan-src{font-size:8.5px}
  .chap-list{list-style:none;margin:0;padding:0;counter-reset:chap}
  .chap-list li{margin:0;padding:0;position:relative}
  .chap-link{display:grid;grid-template-columns:24px 1fr auto;gap:10px;padding:9px 10px 9px 0;border-top:1px dotted var(--rule-soft);text-decoration:none;color:inherit;font-family:var(--serif);transition:background .22s ease}
  .chap-list li:first-child .chap-link{border-top:0}
  .chap-link:hover{background:var(--paper-3);transition:background .12s ease}
  .chap-link .idx{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);letter-spacing:.04em;padding-top:3px;text-align:right}
  .chap-link .body{min-width:0}
  .chap-link .t{display:block;font-family:var(--serif);font-size:13.5px;line-height:1.3;color:var(--ink-2);font-weight:500;text-wrap:pretty}
  .chap-link .s{display:block;font-family:var(--serif);font-size:11.5px;line-height:1.4;color:var(--ink-3);font-style:italic;margin-top:1px;text-wrap:pretty}
  /* Chapter summary — hidden by default to keep the outline scannable.
     Revealed only for the current chapter (auto-shown via .cur from scroll-spy)
     or on hover (preview while considering a click). Animates open. */
  .chap-link .sm{
    display:block;font-family:var(--serif);font-size:11.5px;line-height:1.5;
    color:var(--ink-3);margin-top:0;text-wrap:pretty;
    max-height:0;overflow:hidden;opacity:0;
    /* Collapse: ease-in-out so it closes gently rather than snapping shut. */
    transition:
      max-height .7s ease-in-out,
      opacity   .5s ease-in-out 80ms,
      margin-top .5s ease-in-out;
  }
  /* Current-chapter (scroll-spy): expands without delay so the read marker
     is responsive to scrolling. */
  .chap-list li.cur .chap-link .sm{
    max-height:240px;opacity:1;margin-top:6px;
  }
  /* Hover preview: 280ms pause so cursor sweeps don't strobe.
     ease-in-out on expand so it accelerates gently into the open —
     no fast initial lunge. Duration long enough that it reads as
     deliberate rather than snappy. */
  .chap-list li:hover .chap-link .sm{
    max-height:240px;opacity:1;margin-top:6px;
    transition:
      max-height 1.0s ease-in-out 280ms,
      opacity    .7s ease-in-out  400ms,
      margin-top .7s ease-in-out  280ms;
  }
  .chap-link .fol{font-family:var(--mono);font-size:9px;color:var(--ink-3);letter-spacing:.06em;padding-top:5px}

  /* Pane day-summary — sets the narrative anchor at the top of the chapter outline.
     Sits above the evidence inventory and the chapter list. */
  .pane-day-summary{margin:0 0 18px;padding:14px 0 16px;border-bottom:1px solid var(--rule-soft)}
  .pane-day-summary p{margin:0;font-family:var(--serif);font-size:13.5px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
  .chap-list li.cur .chap-link{background:#fbf3d5;border-color:#fbe48a}
  .chap-list li.cur .chap-link .t{color:var(--ink);font-weight:600}
  .chap-list li.cur .chap-link .idx{color:var(--ink);font-weight:600}
  .chap-list li.cur::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:2px;background:var(--red)}

  /* Speakers list in pane */
  .pane-speakers{margin-top:22px;padding-top:14px;border-top:1px solid var(--rule-soft)}
  .pane-speakers > h6{margin:0 0 8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
  /* Each speaker is a button (.pane-sp) that toggles an inline expanded body
     (.pane-sp-body) holding the speaker's avatar, role, bio, and links —
     including the original profile-page navigation as a deliberate action,
     not a side-effect of clicking the name. */
  .pane-sp-item{margin:0;border-bottom:1px dotted transparent;transition:border-color .15s}
  .pane-sp-item.is-open{border-bottom-color:var(--rule-soft);padding-bottom:8px;margin-bottom:6px}
  button.pane-sp{
    display:flex;align-items:center;gap:8px;width:100%;
    padding:4px 0;background:transparent;border:0;cursor:pointer;
    font-family:var(--serif);font-size:12.5px;color:var(--ink-2);text-align:left;
    transition:color .12s;letter-spacing:0;
  }
  button.pane-sp:hover{color:var(--ink-blue)}
  button.pane-sp .ind{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
  button.pane-sp .n{flex:1 1 auto;min-width:0;border-bottom:1px dotted transparent}
  button.pane-sp:hover .n{border-bottom-color:var(--ink-blue)}
  button.pane-sp .ct{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.04em}
  button.pane-sp .caret{
    font-size:9px;color:var(--ink-3);margin-left:4px;
    transition:transform .15s;display:inline-block;line-height:1;
  }
  .pane-sp-item.is-open button.pane-sp .caret{transform:rotate(-180deg);color:var(--ink-2)}
  .pane-sp-item.is-focused button.pane-sp .n{color:var(--red);font-weight:500}
  .pane-sp-item.is-focused button.pane-sp .ind{box-shadow:0 0 0 2px rgba(92,26,43,0.25)}

  .pane-sp-body{
    display:none;padding:10px 0 6px 0;
    animation:pane-sp-open 180ms ease;
  }
  .pane-sp-item.is-open .pane-sp-body{display:block}
  @keyframes pane-sp-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

  .pane-sp-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
  .pane-sp-avatar{
    width:42px;height:42px;flex:0 0 auto;border-radius:50%;
    background:var(--avatar-color,#3a342a);color:var(--paper);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.05em;
    overflow:hidden;position:relative;
  }
  .pane-sp-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
  .pane-sp-initials{position:relative;z-index:0}
  .pane-sp-meta{min-width:0;flex:1 1 auto;padding-top:2px}
  .pane-sp-name{
    display:block;font-family:var(--serif);font-weight:600;font-size:14px;
    line-height:1.25;color:var(--ink);margin-bottom:2px;
  }
  .pane-sp-role{
    font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  }
  .pane-sp-bio{
    margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--ink-2);font-family:var(--serif);
  }
  .pane-sp-actions{
    display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
    padding-top:6px;border-top:1px dotted var(--rule-softer);
  }
  .pane-sp-profile{
    font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--ink-3);
  }
  .pane-sp-profile:hover{border-bottom-color:var(--red);color:var(--red)}
  button.pane-sp-focus{
    background:transparent;border:1px solid var(--rule-soft);border-radius:2px;
    padding:4px 8px;font:inherit;cursor:pointer;
    font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  }
  button.pane-sp-focus:hover{background:var(--paper-3);color:var(--ink);border-color:var(--ink-3)}
  .pane-sp-item.is-focused button.pane-sp-focus{background:var(--red);color:var(--paper);border-color:var(--red)}

  /* Speaker name — plain text, clickable for focus toggle. Subtle pointer
     cursor and hover tint signal interactivity without implying navigation.
     Profile link lives in the hover card. */
  .folio .sp .sp-name{cursor:pointer;border-radius:2px;transition:background .12s,color .12s;display:block;padding:0 2px;margin:0 -2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .folio .sp .sp-name:hover{background:rgba(0,0,0,0.07)}

  /* Role colour — text colour on .sp-name, keyed from data-role on the real .sp box.
     .sp is never display:contents so attribute selectors work reliably here. */
  .folio .sp[data-role="judge"] .sp-name,
  .folio .sp[data-role="judge-self-reference"] .sp-name { color:#3a3a3a }
  .folio .sp[data-role="claimant"] .sp-name { color:#8a3a1f }
  .folio .sp[data-role="counsel-defendant"] .sp-name,
  .folio .sp[data-role="counsel-defendant-junior"] .sp-name,
  .folio .sp[data-role="solicitor-defendant"] .sp-name { color:#1f4a55 }
  .folio .sp[data-role="expert-witness"] .sp-name,
  .folio .sp[data-role="witness"] .sp-name { color:#3e6b3a }
  .folio .sp[data-role="interpreter"] .sp-name { color:#7a5b22 }

  /* Quieten the "in-scope" red band — keep but de-emphasise */
  .folio .row.in-scope > .ln{box-shadow:inset 2px 0 0 0 rgba(163,38,28,0.45) !important}

  /* === Auto-seeded annotations: lighter than hand-authored ones ========= */
  .gloss[data-auto]{border-bottom:0;background:none;cursor:help;border-bottom:1px dotted var(--rule-soft)}
  .gloss[data-auto]:hover{background:#f5f1e8;border-bottom-color:var(--ink-3)}
  .exhibit[data-auto]{border-color:var(--ink-3);color:var(--ink-3);background:transparent}
  .exhibit[data-auto]:hover{background:var(--ink-3);color:var(--paper);border-color:var(--ink-3)}
  .exhibit[data-auto]::before{color:inherit}

  /* === Mode-toggle hint (subtle title-attr-driven cursor) ================ */
  .vmode button{cursor:pointer}


  /* === Mobile pass ====================================================== */
  @media (max-width:1100px){
    /* !important here defends against cached desktop main{display:grid}
       leaking through on first paint, and against any later rule rebuilding
       the grid via JS-injected styles. */
    main{display:block !important}
    .transcript{border-right:0;width:100%;max-width:100%;box-sizing:border-box}
    .pane{position:static;height:auto;width:100%;max-width:100%;box-sizing:border-box;padding:24px 28px 60px;border-top:1px solid var(--rule);background:var(--paper)}
  }
  /* Phone width: hide the pane entirely. The hamburger menu mirrors the
     chapter list, so the pane has no unique affordance below ~480px and
     was rendering as a leftover empty right-side column in the iPhone
     emulator viewport. */
  @media (max-width:480px){
    .pane{display:none}
  }
  @media (max-width:760px){
    /* Narrow viewport: topbar wraps to a 2-line crest (title above,
       case-number below) — encode that taller bar in the variable so the
       day-strip's sticky `top` and the pane's `top` track with it.        */
    :root{--topbar-h:50px;--scrubber-h:38px}
    .topbar{grid-template-columns:1fr auto;gap:10px;padding:7px 16px}
    .topbar nav{display:none}
    .topbar .right{font-size:9.5px}
    .topbar .right .lbl{display:none}                 /* drop "View" label on narrow screens */
    .topbar .crest{display:flex;flex-direction:column;line-height:1.15;gap:1px}
    .topbar .crest b{font-size:12.5px;margin-right:0}
    .topbar .crest span{font-size:8.5px;letter-spacing:.08em}
    .scrubber{padding:6px 14px}
    /* Active-row highlight: the desktop look paints the .ln cell yellow with a 22px
       box-shadow extending to the right (used to bridge the wide column gap). On a
       380px viewport that paints ~18% of the screen yellow on whichever row is "in
       view," which reads as a giant rail. Drop the extension — the in-cell tint stays
       so you can still see which row is current. */
    .transcript{padding:24px 14px 80px}
    .orient{grid-template-columns:60px 1fr;gap:14px}
    .orient .head h1{font-size:18px}

    /* Stacked rows: rather than the three-column grid (which forced
       "Claimant, in person" to wrap to three lines in an 88px gutter and
       left whitespace in the .tx column), put the line-number and speaker
       name inline on one compact line at the top of each row and let the
       utterance flow underneath at the full container width. */
    .folio{display:block;border-top:1px solid var(--rule);column-gap:0;row-gap:0}
    .folio .row{display:block;padding:10px 0 12px;border-bottom:1px dotted var(--rule-soft);scroll-margin-top:calc(var(--topbar-h) + var(--scrubber-h) + 12px)}
    .folio .row > *{padding:0;border-bottom:0;box-shadow:none;background:transparent}
    .folio .row > .ln{display:inline-block;font-size:9.5px;color:var(--ink-3);margin-right:10px;vertical-align:baseline}
    .folio .row > .sp{display:inline-flex;flex-direction:row;gap:8px;align-items:baseline;padding-top:0}
    .folio .row > .sp .role{font-size:9.5px;line-height:1.2;display:inline}
    /* Hide the role on the smallest viewports — the name carries the signal
       and the role text ("Claimant, in person" et al.) was the main source
       of the wraparound that produced the empty bands on each row. */
    .folio .row > .sp .role{display:none}
    .folio .row > .tx{display:block;margin-top:6px;font-size:15.5px;line-height:1.55}
    .folio .row > .tx p{margin:0}
    .folio .row.fade > .ln,
    .folio .row.fade > .sp,
    .folio .row.fade > .tx{opacity:1}                /* let row-level opacity handle fade now */
    .folio .row.fade{opacity:.32}
    /* Active highlight: tint the whole row rather than per-cell, so it doesn't
       look like three disconnected coloured rectangles. */
    .pane{padding:20px 18px 60px}
  }
  /* Show role at very narrow but slightly wider than the smallest phones —
     inline next to the name as a tiny mono cap. */
  @media (min-width:430px) and (max-width:760px){
    .folio .row > .sp .role{display:inline;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--ink-3)}
    .folio .row > .sp .role::before{content:"· "}
  }

  .tooltip{position:fixed;max-width:280px;background:var(--ink);color:var(--paper);padding:10px 12px;border-radius:3px;font-family:var(--serif);font-size:13px;line-height:1.45;z-index:90;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;box-shadow:0 8px 24px rgba(0,0,0,.22)}
  .tooltip.on{opacity:1;transform:translateY(0)}
  .tooltip b{color:#f5d68a;letter-spacing:.14em;text-transform:uppercase;font-size:10px;font-family:var(--mono);font-weight:600;display:block;margin-bottom:4px}

  /* === Speaker hover card ============================================== */
  /* Floats next to a hovered speaker name (.sp-link). Stays interactive
     (pointer-events:auto) so the "View profile →" link is clickable; the
     JS reschedules the hide on mouseenter to prevent flicker. */
  .spk-card{
    position:absolute;
    width:280px;
    background:var(--paper);
    border:1px solid var(--rule-soft);
    border-radius:3px;
    box-shadow:0 12px 32px rgba(0,0,0,.18);
    padding:14px 14px 12px;
    z-index:120;
    font-family:var(--serif);
    color:var(--ink);
  }
  .spk-card[hidden]{display:none}
  .spk-card .spk-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
  .spk-card .spk-avatar{
    width:42px;height:42px;flex:0 0 auto;
    border-radius:50%;background:var(--avatar-color,#3a342a);color:var(--paper);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.05em;
    overflow:hidden;position:relative;
  }
  .spk-card .spk-photo{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;display:block;
  }
  .spk-card .spk-initials{position:relative;z-index:0}
  .spk-card .spk-photo{z-index:1}
  .spk-card .spk-meta{min-width:0;flex:1 1 auto}
  .spk-card .spk-name{
    display:block;font-family:var(--serif);font-weight:600;font-size:15px;
    letter-spacing:0;line-height:1.25;color:var(--ink);margin-bottom:2px;
  }
  .spk-card .spk-role{
    font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-3);
  }
  .spk-card .spk-bio{
    margin:0 0 10px;font-size:13px;line-height:1.5;color:var(--ink-2);
  }
  .spk-card .spk-actions{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding-top:8px;border-top:1px dotted var(--rule-softer);
  }
  .spk-card .spk-profile{
    font-family:var(--mono);font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink);text-decoration:none;
    border-bottom:1px dotted var(--ink-3);
  }
  .spk-card .spk-profile:hover{border-bottom-color:var(--red);color:var(--red)}
  .spk-card .spk-hint{
    font-family:var(--mono);font-size:9px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-3);text-align:right;
  }
  .spk-card .spk-hint b{color:var(--red);font-weight:600}

  /* === Speaker focus mode ============================================== */
  /* When body.has-speaker-focus is set, faded rows already get opacity:.18
     from the .row.fade rule. Add a subtle ring + dot to the focused
     speaker's name itself so the user can see at a glance which speakers
     are in the focus set. */
  /* When a speaker is focused, colour their name dot red so it stands out
     from the faded-out rows at a glance. */
  body.has-speaker-focus .folio .row:not(.fade) > .sp .sp-name{
    color:var(--red);
  }
  /* Filter chip cue when its speaker is in the focus set */
  /* (Duplicate-defended rules from earlier — kept for backward compatibility;
     primary styling lives above near the .chip declaration.) */

  /* Print */
  @media print {
    .topbar,.scrubber,.pane,.pane-search,.tooltip,.spk-card{display:none !important}
    main{display:block}
    .transcript{border:0;padding:0}
    .folio .row > *{break-inside:avoid}
  }
  /* Moment quick-jump link in the meta row */
  .moment .m-meta .m-jump{color:inherit;text-decoration:none;border-bottom:1px dotted var(--rule-soft);font-style:italic;font-family:var(--serif)}
  .moment .m-meta .m-jump:hover{color:var(--ink-blue);border-bottom-color:var(--ink-blue)}

  /* === Additions for data-driven render === */
  .folio .row.hide > *{display:none}
  /* In-transcript search highlight */
  mark.sh{background:#fbe48a;color:var(--ink);padding:0 1px;border-radius:1px;font-weight:500}
  .anchor-link{color:inherit;text-decoration:none;border-bottom:1px dotted var(--rule-soft)}
  .anchor-link:hover{color:var(--ink-blue);border-bottom-color:var(--ink-blue)}
  .art-note{font-family:var(--serif);font-size:13px;line-height:1.55;color:var(--ink-2);margin:12px 0 0;white-space:pre-line}
  /* The default pane's day plan: anchor links should be quieter */
  .pane-default .day-plan dt .anchor-link{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--ink-3);border-bottom:0}
  .pane-default .day-plan dt .anchor-link:hover{color:var(--ink-blue)}

  /* === Moments — cross-day narrative units in the default pane === */
  .moments-section{margin-top:32px;padding-top:18px;border-top:1px solid var(--rule)}
  .moments-section > h6{margin:0 0 4px;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
  .moments-section > .blurb{margin:0 0 14px;font-family:var(--serif);font-style:italic;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
  .moment{border:1px solid var(--rule-soft);background:var(--paper);padding:14px 16px;margin-bottom:10px;font-family:var(--serif);position:relative;transition:border-color .12s,box-shadow .12s}
  .moment:hover{border-color:var(--ink-3)}
  .moment.redacted{border-left:3px solid var(--red);padding-left:13px}
  .moment .m-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px}
  .moment .m-title{margin:0;font-family:var(--serif);font-weight:600;font-size:14.5px;line-height:1.3;letter-spacing:-.005em;color:var(--ink);flex:1 1 auto}
  .moment .m-status{flex:0 0 auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--rule-soft);padding:2px 6px;border-radius:2px;white-space:nowrap}
  .moment.redacted .m-status{color:var(--paper);background:var(--red);border-color:var(--red)}
  .moment .m-sub{margin:0 0 10px;font-family:var(--serif);font-size:12.5px;line-height:1.45;color:var(--ink-2);font-style:italic}
  .moment .m-meta{display:flex;flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--ink-3);text-transform:uppercase;margin-bottom:8px}
  .moment .m-meta b{color:var(--ink-2);font-weight:500;text-transform:none;letter-spacing:0;font-family:var(--serif);font-size:12px;font-style:italic}
  .moment .m-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
  .moment .m-tags span{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--ink-3);background:var(--paper-2);padding:2px 6px;border-radius:2px;text-transform:lowercase}
  .moment .m-toggle{display:block;width:100%;margin-top:10px;padding:6px 8px;background:transparent;border:1px dotted var(--rule-soft);color:var(--ink-3);font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border-radius:2px;text-align:center}
  .moment .m-toggle:hover{border-color:var(--ink-3);color:var(--ink)}
  .moment .m-body{display:none;margin-top:12px;padding-top:12px;border-top:1px dotted var(--rule-soft)}
  .moment.open .m-body{display:block}
  .moment.open .m-toggle{border-style:solid}
  .moment .m-passage{margin-bottom:14px}
  .moment .m-passage h5{margin:0 0 4px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
  .moment .m-line{display:grid;grid-template-columns:54px 1fr;gap:10px;margin-bottom:4px;font-family:var(--serif);font-size:12.5px;line-height:1.5;color:var(--ink-2)}
  .moment .m-line .l{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);padding-top:2px;letter-spacing:.04em}
  .moment .m-line .l a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--rule-soft)}
  .moment .m-line .l a:hover{color:var(--red);border-bottom-color:var(--red)}
  .moment .m-line .t b{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:600;margin-right:6px}
  .moment .m-redaction{background:#fef4d0;border:1px solid #e0c878;padding:12px 14px;border-radius:2px;margin-top:12px;font-family:var(--serif);font-size:12.5px;line-height:1.55;color:#5a4a1f}
  .moment .m-redaction h5{margin:0 0 6px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#8a3a1f;font-weight:600}
  .moment .m-redaction blockquote{margin:8px 0 6px;padding:0 0 0 12px;border-left:2px solid #c8993a;font-style:italic;color:#3a3220}
/* (Removed 2026-05-20: the ⎘ ln-copy button + the Researcher-mode "COPY"
   pseudo-label were visual noise on hover and overlapped neighbouring rows.
   Citation still works via right-click → Copy link on the line-number anchor,
   and Researcher mode keeps its click-the-line-to-copy gesture.) */

/* ── Performance + animation polish ────────────────── */
/* Smooth the active-row background highlight so it fades rather than jumping */
.folio .row > .ln,
.folio .row > .sp,
.folio .row > .tx { transition: background .15s, box-shadow .15s; }

/* Tell the browser the sticky pane will scroll independently so it gets
   its own compositor layer — avoids re-painting the main content on pane scroll */
.pane { will-change: scroll-position; }

/* ── UX simplification pass ─────────────────────── */
/* Hide the Reader/Researcher mode toggle — too confusing for general use */
#vmode { display: none !important; }

/* Trim pane header: hide the redundant mode-badge ("Chapter view" / "Artefact in scope") */
#paneMode { display: none !important; }

/* Make pane sub-line quieter — it says "no exhibit in scope" by default */
#paneSubLine { display: none !important; }

/* Give the pane header a little breathing room without the extra labels */
.pane-head { padding-bottom: 8px; }

/* Make day-grid cells taller so the title/subtitle is actually readable */
.day-grid .d { min-height: 148px; }
.day-grid .d .what { font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Day-continue footer */
.day-continue {
  display: flex;
  justify-content: flex-end;
  padding: 48px 24px 64px;
  border-top: 1px solid var(--rule-soft);
  margin-top: 48px;
}
.day-continue-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  padding: 10px 20px;
  border: 1.5px solid var(--rule-soft);
  border-radius: 4px;
  transition: border-color .15s, color .15s, background .15s;
}
.day-continue-link:hover {
  border-color: var(--ink-2);
  color: var(--red);
  background: var(--paper-2);
}

/* Resume-reading toast — bottom-left of viewport on day pages. Appears once
   per load if v7-position has a line within the current day and the user
   didn't deep-link to it. Two buttons (jump back / dismiss); auto-dismisses
   in 12 seconds. */
.resume-toast {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 80;
  background: var(--paper, #fdfcf9);
  border: 1px solid var(--ink-3, #7a7363);
  border-left: 3px solid var(--ink-blue, #2A3B52);
  padding: 14px 18px;
  max-width: 280px;
  box-shadow: 0 6px 24px rgba(21,19,15,0.12);
  font-family: var(--serif);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s;
  pointer-events: auto;
}
.resume-toast.rt-visible {
  opacity: 1;
  transform: translateY(0);
}
.resume-toast .rt-kicker {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-blue, #2A3B52);
  font-weight: 600;
  margin-bottom: 6px;
}
.resume-toast .rt-body {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink, #15130f);
  margin-bottom: 12px;
}
.resume-toast .rt-body b {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-2, #3a342a);
  font-weight: 600;
  letter-spacing: .04em;
}
.resume-toast .rt-actions {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.resume-toast .rt-jump,
.resume-toast .rt-dismiss {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 2px;
  cursor: pointer;
  font-weight: 600;
  transition: background .12s, color .12s, border-color .12s;
}
.resume-toast .rt-jump {
  background: var(--ink, #15130f);
  color: var(--paper, #fdfcf9);
  border: 1px solid var(--ink, #15130f);
}
.resume-toast .rt-jump:hover {
  background: var(--red, #5C1A2B);
  border-color: var(--red, #5C1A2B);
}
.resume-toast .rt-dismiss {
  background: transparent;
  color: var(--ink-3, #7a7363);
  border: 1px solid var(--rule-soft, #d8d2c4);
}
.resume-toast .rt-dismiss:hover {
  color: var(--ink, #15130f);
  border-color: var(--ink-3, #7a7363);
}
@media print {
  .resume-toast { display: none !important; }
}
@media (max-width: 540px) {
  .resume-toast {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
}

/* --- Reading-progress indicator ---
   Thin 2px hairline pinned just under the sticky topbar+scrubber stack, plus
   a tiny mono readout ("L0234 / L1270 · 18%") at the right end. The bar is
   driven by transform: scaleX(N) — cheap, GPU-composited, no layout. The
   readout shows the active row's L-ID (semantic position) and a scroll
   percent. Both are updated from the existing syncFromScroll loop, so no new
   scroll listener is added. */
.day-progress {
  position: fixed;
  top: calc(var(--topbar-h) + var(--scrubber-h));
  left: 0;
  right: 0;
  height: 0;
  z-index: 48;            /* below the sticky topbar (50) + scrubber (49) */
  pointer-events: none;
  font-family: var(--mono);
}
.day-progress-track {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--rule-softer);
  overflow: hidden;
}
.day-progress-fill {
  height: 100%;
  width: 100%;
  background: var(--ink-blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .08s linear;
  will-change: transform;
}
/* Numeric readout sits inside the pane head — between the "Day plan" title
   on the left and the ‹ › exhibit-nav buttons on the right. margin-left:auto
   pushes it past the title to butt against the nav buttons, even though the
   pane head uses justify-content:space-between. Naturally hidden on phones
   because the pane itself is display:none below 480px. */
.pane-progress {
  display: inline;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--rule-soft);
  user-select: none;
  font-variant-numeric: tabular-nums;
  vertical-align: baseline;
}
.pane-progress b {
  color: var(--ink-2);
  font-weight: 500;
}
.pane-progress .sep {
  color: var(--ink-4);
  margin: 0 4px;
}
.pane-progress .pct {
  color: var(--ink-3);
}
@media print {
  .day-progress, .pane-progress { display: none !important; }
}