/* 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 */
/* Three-colour semantic palette — the only accents on the site. Used as
left bars on speaker cards, transcript turn bars, day-grid phase stripes.
Brief §2.4: a reader who learns these once should read them everywhere
without re-explanation. Do not add a fourth hue for a new feature. */
--accent-claimant:#8b3a2f; /* warm brick — claimant side (Irving + his witnesses) */
--accent-defence:#2f5d6b; /* slate teal — defence side (Rampton, Rogers, defence experts) */
--accent-bench:#6b5b2f; /* olive — bench (Mr Justice Gray) and other court roles */
--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 */
--scrubber-w:44px; /* Phase 3: vertical day rail on the left edge */
}
*{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}
/* "?" help button sitting beside the .vmode pill. Reveals .vmode-help-card
on hover/focus — explains what Reader vs Researcher mode actually do so
the pill doesn't read as opaque jargon. Wired in reader.js. */
.vmode-help{
position:relative;display:inline-flex;align-items:center;justify-content:center;
width:20px;height:20px;border-radius:50%;border:1px solid var(--rule-soft);
background:var(--paper);color:var(--ink-3);font:inherit;font-family:var(--mono);
font-size:10px;line-height:1;letter-spacing:0;cursor:pointer;padding:0;
transition:color .15s,border-color .15s,background .15s;
}
.vmode-help:hover,
.vmode-help:focus-visible{color:var(--ink);border-color:var(--ink);outline:none}
.vmode-help-card{
position:absolute;top:calc(100% + 8px);right:0;
width:300px;background:var(--paper);
border:1px solid var(--rule-soft);border-radius:3px;
box-shadow:0 12px 32px rgba(0,0,0,.18);
padding:14px 16px 12px;z-index:120;
font-family:var(--serif);font-size:13px;line-height:1.5;color:var(--ink-2);
text-transform:none;letter-spacing:0;text-align:left;
}
.vmode-help-card[hidden]{display:none}
.vmode-help-card h6{
margin:0 0 8px;font-family:var(--mono);font-size:10px;
letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600;
}
.vmode-help-card p{margin:0 0 8px;text-wrap:pretty}
.vmode-help-card p:last-child{margin-bottom:0}
.vmode-help-card b{color:var(--ink);font-weight:600}
/* The .right wrapper anchors the popover so right:0 aligns it to the
toggle. Make it position:relative for that anchor to work. */
.topbar .right{position:relative}
/* --- Day scrubber: vertical rail (Phase 3) ----------------------------
Replaces the horizontal full-width strip. Position fixed on the left
edge, full viewport height under the topbar. Each day stacks vertically
as a small numbered cell; current day filled, hover gets a burgundy
left-edge mark. Captures "where am I in the trial" the way a book
spine does, and frees the top of the page for reading. Hidden on
narrow viewports (hamburger menu carries the day list). */
.scrubber{
position:fixed;left:0;top:var(--topbar-h);bottom:0;
width:var(--scrubber-w);box-sizing:border-box;
display:flex;flex-direction:column;align-items:stretch;
padding:0;background:var(--paper-2);
border-right:1px solid var(--rule-soft);border-bottom:0;
font-family:var(--mono);font-size:10px;letter-spacing:.08em;
color:var(--ink-2);text-transform:uppercase;
overflow-y:auto;overflow-x:hidden;
z-index:49;
}
.scrubber .lbl{
flex:0 0 auto;
padding:8px 0;text-align:center;
font-size:8.5px;color:var(--ink-3);letter-spacing:.18em;
border-bottom:1px solid var(--rule-soft);
}
.scrubber .days{
display:flex;flex-direction:column;flex:1 1 auto;gap:0;
}
.scrubber .d{
display:flex;align-items:center;justify-content:center;
width:100%;height:24px;flex:0 0 auto;
border-bottom:1px solid var(--rule-softer);border-right:0;
text-decoration:none;color:var(--ink-3);
font-size:11px;font-weight:500;letter-spacing:.04em;
position:relative;cursor:pointer;
transition:color .12s,box-shadow .12s,background .12s;
}
/* Hover: a 2px burgundy bar on the left edge, 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 2px 0 0 var(--red)}
/* Current-day tile. */
.scrubber .d.cur{background:var(--ink);color:var(--paper);font-weight:600}
/* 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))}
/* When the vertical day rail is present (day pages), shift main right so
it doesn't sit under the rail. Other pages (about, after, moments, etc.)
don't have a .scrubber and keep their full-width layout. */
.scrubber ~ main{margin-left:var(--scrubber-w)}
@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}
/* Single-line metadata under the title. Replaced the old four-row dt/dd
grid (Sitting / Court / Folios / Exhibits) — same facts at a fraction
of the vertical cost, so the first turn sits ~120px higher. */
.orient .head .facts-line{
margin:6px 0 14px;font-family:var(--mono);font-size:10.5px;
color:var(--ink-2);letter-spacing:.04em;line-height:1.6;max-width:none;
}
.orient .head .facts-line em{color:var(--ink-3);font-style:normal}
/* Mini-TOC — the day's chapters as a flowing list of clickable chips.
Gives the orient block a real job (orient the reader to the shape of
the day) instead of just stacking metadata. */
.orient .head .day-toc{
display:flex;flex-wrap:wrap;gap:6px 8px;align-items:baseline;
margin-top:4px;
}
.orient .head .day-toc-lbl{
font-family:var(--mono);font-size:9.5px;color:var(--ink-3);
letter-spacing:.14em;text-transform:uppercase;
padding-right:4px;
}
.orient .head .day-toc-chip{
display:inline-flex;align-items:baseline;gap:6px;
padding:4px 9px 5px;
border:1px solid var(--rule-soft);background:var(--paper);
text-decoration:none;color:var(--ink);
font-family:var(--serif);font-size:13px;line-height:1.3;
text-wrap:pretty;max-width:36ch;
transition:border-color .12s,background .12s,color .12s;
}
.orient .head .day-toc-chip:hover{border-color:var(--ink);background:var(--paper-2)}
.orient .head .day-toc-chip .day-toc-idx{
font-family:var(--mono);font-size:9px;color:var(--ink-3);
letter-spacing:.08em;font-weight:500;flex:0 0 auto;
}
.orient .head .day-toc-chip .day-toc-t{font-weight:500}
/* Researcher mode hides the mini-TOC — it's reader orientation, not
verbatim record. */
body.mode-researcher .orient .head .day-toc{display:none}
/* 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)}
/* Speaker label — italic-serif treatment per brief §2.1 (replaces the
earlier tracked-mono caps, which the brief calls out as "louder,
harder to read at small sizes, and tonally wrong"). Colour-coded by
data-role using the three-colour palette. */
.folio .sp{font-family:var(--serif);font-style:italic;font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:500;padding-top:16px;display:flex;flex-direction:column;gap:1px;line-height:1.25}
.folio .sp .role{font-family:var(--serif);font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--ink-3);font-style:italic;font-weight:400}
/* On continuation rows (same speaker as previous), suppress the redundant
speaker label so each speaker's run reads as one breath. The colored
left bar on .tx carries identity. Brief §3.4: "Two-state speaker
treatment." */
.folio .row:not(.change) > .sp{visibility:hidden}
/* Colored 2px left bar on every turn — encodes speaker identity through
both the change-row state and the continuation state. Three-colour
palette from brief §2.4. */
.folio .row > .tx{box-shadow:inset 2px 0 0 0 var(--rule-softer);padding-left:14px}
.folio .row[data-role="judge"] > .tx{box-shadow:inset 2px 0 0 0 var(--accent-bench)}
.folio .row[data-role="claimant"] > .tx,
.folio .row[data-role="witness-claimant"] > .tx,
.folio .row[data-role="expert-claimant"] > .tx{box-shadow:inset 2px 0 0 0 var(--accent-claimant)}
.folio .row[data-role="counsel-defendants"] > .tx,
.folio .row[data-role="counsel-defence"] > .tx,
.folio .row[data-role="witness-defendants"] > .tx,
.folio .row[data-role="expert-defendants"] > .tx,
.folio .row[data-role="expert-defence"] > .tx,
.folio .row[data-role="defendant-author"] > .tx{box-shadow:inset 2px 0 0 0 var(--accent-defence)}
.folio .row[data-role="court-interpreter"] > .tx,
.folio .row[data-role="usher"] > .tx{box-shadow:inset 2px 0 0 0 var(--accent-bench)}
.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}
/* Hide intro plates inside any collapsed chapter, same as the rows. */
.folio .chap.collapsed ~ .sp-intro,
.folio .chap.collapsed .sp-intro{display:none}
/* Speaker intro — rendered once per speaker per day, the first time they
take the floor. Reader-mode ornament; Researcher hides it.
Banner-style plate keyed to the speaker's role color with a top→bottom
dark gradient. Name + role render in white over the gradient.
No portrait background — the wide landscape format cropped headshots
badly when we tried that. */
.folio .sp-intro{
grid-column:1/-1;
position:relative;
min-height:80px;
padding:0 16px 14px;
margin-top:6px;
border-radius:3px;
background-color:var(--avatar-color,#2a2a2a);
background-image:linear-gradient(
to top,
rgba(0,0,0,.45) 0%,
rgba(0,0,0,.20) 32%,
rgba(0,0,0,.05) 60%,
rgba(0,0,0,0) 100%
);
color:rgba(255,255,255,.98);
display:flex;align-items:flex-end;
overflow:hidden;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
}
/* The ![]()
tag is no longer used. */
.folio .sp-intro-photo{display:none}
/* Initials sit top-right as a low-key watermark. */
.folio .sp-intro-initials{
position:absolute;top:8px;right:14px;
font-family:var(--serif);font-size:22px;font-weight:500;
color:rgba(255,255,255,.32);letter-spacing:-.02em;
pointer-events:none;
}
/* Old circular avatar element is hidden (the plate replaces it). */
.folio .sp-intro-avatar{display:none}
.folio .sp-intro-meta{
position:relative;z-index:1;
display:flex;flex-direction:column;gap:3px;
padding-top:14px;
}
.folio .sp-intro-name{
font-family:var(--serif);font-weight:600;font-size:20px;
color:#fff;letter-spacing:-.01em;line-height:1.15;
text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.folio .sp-intro-role{
font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
color:rgba(255,255,255,.82);
text-shadow:0 1px 2px rgba(0,0,0,.45);
}
/* When the intro is the very first thing under a chapter head, tighten
the top padding so it doesn't double-pad with the chapter rule. */
.folio .chap + .sp-intro{margin-top:0;padding-top:6px}
/* Researcher mode hides speaker intros — they're a Reader narrative aid. */
body.mode-researcher .folio .sp-intro{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}
/* === Lipstadt "How she tells this day" — pane section ================= */
/* Lives inside the right pane as a sibling of .pane-evidence /
.chap-list / .pane-speakers, surfaced once data/lipstadt_pages.js
loads. Eyewitness companion drawn from Lipstadt's _History on Trial_
(2005). Visual register intentionally matches the surrounding pane
sections (h6 + rule-soft top border + same gutter) so it reads as part
of the same surface, not as a foreign object. Shown in both Reader
and Researcher modes — the book is primary source. */
.pane-lipstadt-slot:empty{display:none}
.pane-lipstadt{
margin-top:22px;padding-top:14px;
border-top:1px solid var(--rule-soft);
}
.pane-lipstadt > 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;
}
.pane-lipstadt .lp-blurb{
margin:0 0 12px;font-family:var(--serif);font-style:italic;
font-size:13px;line-height:1.55;color:var(--ink-3);text-wrap:pretty;
}
.pane-lipstadt .lp-passages{display:grid;gap:12px}
/* Passage card (Phase 2: quote-first). The italic pullquote leads; the
page-range chip and inline thumbs sit beneath. Topic title + gloss
dropped — the quote IS the preview, and the thumbs ARE the
navigation. Paper bg, soft border, ink-blue 3px left rule. */
.lp-passage{
padding:12px 14px 10px;background:var(--paper);
border:1px solid var(--rule-soft);border-left:3px solid var(--ink-blue);
}
.lp-passage .lp-p-quote{
margin:0 0 10px;padding:0;border:0;
font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink);
line-height:1.5;text-wrap:pretty;
}
.lp-passage .lp-p-topic-fallback{
margin:0 0 10px;font-family:var(--serif);font-size:13.5px;font-weight:500;
color:var(--ink);line-height:1.4;text-wrap:pretty;
}
.lp-passage .lp-p-foot{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding-top:6px;border-top:1px dotted var(--rule-soft);
}
.lp-passage .lp-p-range{
font-family:var(--mono);font-size:9.5px;color:var(--ink-3);
letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;flex:0 0 auto;
}
.lp-passage .lp-p-foot .lp-thumbs{margin:0}
/* Thumb strip — 70px page thumbs sized for the narrower pane. */
.lp-thumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lp-thumb{
position:relative;display:block;width:70px;
border:1px solid var(--rule);background:#fff;
text-decoration:none;color:inherit;line-height:0;
}
.lp-thumb img{width:100%;height:auto;display:block}
.lp-thumb .lp-thumb-label{
position:absolute;bottom:0;left:0;right:0;
padding:1px 4px;background:rgba(20,16,12,.7);color:var(--paper);
font-family:var(--mono);font-size:8.5px;letter-spacing:.04em;text-align:center;
line-height:1.4;
}
.lp-thumb:hover{outline:2px solid var(--red)}
.lp-thumb.missing{
display:inline-flex;align-items:center;justify-content:center;
width:54px;height:74px;background:var(--paper-2);color:var(--ink-4);
font-family:var(--mono);font-size:9px;border-style:dashed;line-height:1.2;
}
/* Mobile — pane stacks below the transcript on narrow viewports; bump the
thumbs back up since horizontal space is no longer cramped. */
@media (max-width:1100px){
.lp-thumb{width:90px}
.lp-thumb.missing{width:64px;height:88px}
}
/* === RIGHT: ARTEFACT PANE === */
.pane{position:sticky;top:var(--topbar-h);align-self:start;height:calc(100vh - var(--topbar-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}
/* Inline scan preview attached to each evidence row. Collapsed by default;
expands automatically when the scroll position is inside the exhibit's
introduced_at..discussed_through range (li gets .cur). Mirrors the
chapter-summary auto-expand pattern. */
.pane-evidence .ev-preview{
grid-column:1 / -1;
max-height:0;overflow:hidden;opacity:0;
transition:max-height .35s ease, opacity .25s ease, padding .25s ease, margin .25s ease;
padding:0 8px;margin:0;
}
.pane-evidence .evidence-list li.cur{
background:var(--paper-2);
box-shadow:inset 3px 0 0 var(--ink-blue);
}
.pane-evidence .evidence-list li.cur .ev-preview{
max-height:520px;opacity:1;
padding:6px 8px 12px;margin-top:2px;
}
.pane-evidence .evidence-list li.cur .evidence-link .eid{color:var(--ink)}
.pane-evidence .ev-preview .sv-card{margin:0}
.pane-evidence .ev-preview .sv-tile-img{max-height:200px}
.pane-evidence .ev-preview-note{
margin:8px 0 0;font-family:var(--serif);font-size:12.5px;line-height:1.5;
color:var(--ink-2);font-style:italic;
}
.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. */
/* Speaker-name colour by role — three-colour palette from brief §2.4.
Bench olive, claimant-side brick, defence-side teal. */
.folio .sp[data-role="judge"] .sp-name,
.folio .sp[data-role="judge-self-reference"] .sp-name,
.folio .sp[data-role="interpreter"] .sp-name,
.folio .sp[data-role="usher"] .sp-name { color:var(--accent-bench) }
.folio .sp[data-role="claimant"] .sp-name,
.folio .sp[data-role="witness-claimant"] .sp-name,
.folio .sp[data-role="expert-claimant"] .sp-name { color:var(--accent-claimant) }
.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,
.folio .sp[data-role="expert-witness"] .sp-name,
.folio .sp[data-role="witness"] .sp-name,
.folio .sp[data-role="witness-defendant"] .sp-name,
.folio .sp[data-role="defendant-author"] .sp-name { color:var(--accent-defence) }
/* Mirror the same palette onto the row's .tx left bar — the bar carries
speaker identity through both change and continuation states. */
.folio .row[data-role="judge"] > .tx,
.folio .row[data-role="judge-self-reference"] > .tx,
.folio .row[data-role="interpreter"] > .tx,
.folio .row[data-role="usher"] > .tx{box-shadow:inset 2px 0 0 0 var(--accent-bench)}
.folio .row[data-role="claimant"] > .tx,
.folio .row[data-role="witness-claimant"] > .tx,
.folio .row[data-role="expert-claimant"] > .tx{box-shadow:inset 2px 0 0 0 var(--accent-claimant)}
.folio .row[data-role="counsel-defendant"] > .tx,
.folio .row[data-role="counsel-defendant-junior"] > .tx,
.folio .row[data-role="solicitor-defendant"] > .tx,
.folio .row[data-role="expert-witness"] > .tx,
.folio .row[data-role="witness"] > .tx,
.folio .row[data-role="witness-defendant"] > .tx,
.folio .row[data-role="defendant-author"] > .tx{box-shadow:inset 2px 0 0 0 var(--accent-defence)}
/* 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
pane's `top` tracks with it. */
:root{--topbar-h:50px;--scrubber-h:0px;--scrubber-w:0px}
/* Hide the vertical day rail on narrow viewports — the hamburger menu
carries day nav. Also zero out the rail-width offset on main + the
day-progress hairline so they reclaim the full width. */
.scrubber{display:none}
.scrubber ~ main{margin-left:0}
.day-progress{left:0}
.topbar{grid-template-columns:1fr auto;gap:10px;padding:7px 16px}
.topbar nav{display:none}
/* Hide the inline mode toggle on narrow screens — the hamburger menu's
View section (utils.js .mmenu-vmode) carries a clone of the same
buttons. Leaving .right in the layout caused it to wrap onto a second
row beneath the topbar (three children in a 1fr/auto grid). The
.vmode DOM stays present so the menu clone can still query it. */
.topbar .right{display:none}
.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}
/* Flatten the orient block on mobile. Desktop's 80px/1fr grid with the
54px "09" digit ate too much horizontal space on phones — the title
and metadata wrapped awkwardly in a narrow right column. Mobile gets
a single-column stack: tiny day pill on top, title, then metadata. */
.orient{display:block;grid-template-columns:none;gap:0;padding-bottom:14px;margin-bottom:14px}
.orient .num{
display:flex;align-items:center;gap:10px;
font-family:var(--mono);font-size:10px;letter-spacing:.12em;
color:var(--ink-3);text-transform:uppercase;line-height:1;
margin-bottom:12px;
}
.orient .num b{
display:inline;font-family:var(--mono);font-size:11px;font-weight:600;
color:var(--ink);letter-spacing:.06em;line-height:1;margin:0;
text-transform:none;
}
.orient .num b::before{content:"· "}
.orient .num .day-nav-btns{margin-left:auto;display:flex;gap:6px}
.orient .head h1{font-size:19px;line-height:1.3;margin-bottom:10px}
.orient .head h1 .day-summary{font-size:16px;line-height:1.45}
.orient .head .facts-line{
font-size:11px;line-height:1.55;letter-spacing:.02em;
color:var(--ink-3);
}
/* Hide the mini-TOC chips on narrow viewports — each chip wraps to its own row
(max-width:36ch), so 10 chapters becomes 10 rows of vertical real estate before
the transcript even starts. The hamburger menu's chapter list (.mmenu-chapters)
already covers this affordance on small screens. */
.orient .head .day-toc{display:none}
/* 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}
/* Speaker intro on mobile — same banner architecture, full-bleed to
viewport edges. */
.folio .sp-intro{
min-height:92px;
margin:14px -14px 0;
border-radius:0;
padding:0 16px 14px;
}
.folio .sp-intro-name{font-size:18px}
.folio .sp-intro-role{font-size:9px;letter-spacing:.16em}
.folio .sp-intro-initials{font-size:24px;top:10px;right:16px}
.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}
/* Per-speaker row tint — very low-alpha background by role so the eye
can track who's speaking at a glance without reading the mono header.
Colors mirror speakerColor() in reader.js. Alpha ~0.05 keeps it as a
wash rather than a label. Rows are full-bleed on mobile to match the
speaker plate above. */
.folio .row[data-role]{
margin-left:-14px;margin-right:-14px;
padding-left:14px;padding-right:14px;
}
.folio .row[data-role="judge"],
.folio .row[data-role="judge-self-reference"]{
background:rgba(58,58,58,.10);
}
.folio .row[data-role="claimant"]{
background:rgba(138,58,31,.13);
}
.folio .row[data-role="counsel-defendant"],
.folio .row[data-role="counsel-defendant-junior"],
.folio .row[data-role="solicitor-defendant"]{
background:rgba(31,74,85,.13);
}
.folio .row[data-role="expert-witness"],
.folio .row[data-role="witness"]{
background:rgba(62,107,58,.13);
}
.folio .row[data-role="interpreter"]{
background:rgba(122,91,34,.13);
}
.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 ─────────────────────── */
/* The Reader/Researcher mode toggle is visible — paired with a "?" help
popover (see .vmode-help below) that explains the two modes on hover/
focus, so it doesn't read as opaque jargon. */
/* 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: var(--topbar-h);
left: var(--scrubber-w); /* clear the vertical day rail on the left */
right: 0;
height: 0;
z-index: 48; /* below the sticky topbar (50) + scrubber rail (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; }
}
/* Reading-time badge — injected by assets/reading-time.js into .doc-hero .kicker
on long doc-body pages (reports, witnesses, closing, appeal, claims, judgment).
Inherits typography from the parent kicker/by, only tweaks colour + cursor. */
.doc-hero .kicker .reading-time,
.doc-hero .by .reading-time {
color: var(--ink-3);
font-weight: 500;
white-space: nowrap;
cursor: default; /* signals the title tooltip with word count */
text-decoration: none;
border-bottom: 1px dotted transparent;
transition: color .12s, border-color .12s;
}
.doc-hero .kicker .reading-time:hover,
.doc-hero .by .reading-time:hover {
color: var(--ink);
border-bottom-color: var(--rule-soft);
}
/* Day-transcript reading-time chip — lives inside .facts-line in the orient block,
inserted by assets/reader.js. Same typographic register as the surrounding facts. */
.orient .facts-line .reading-time {
color: var(--ink-3);
font-weight: 500;
white-space: nowrap;
cursor: default;
}
/* Running-head badge — mirrors the kicker badge so the reading-time stays
visible as the reader scrolls past the hero. Inherits the running-head's
own monospace+caps register; just needs colour + a subtle prefix glyph.
!important here because the report pages carry an inline