/* 0x13D issues site. Generated into 0x13d.com by hexcore/site/build.mjs; edit here, not there.
 *
 * Light by default, dark on the reader's choice (0x13D brand theme; see the token block below).
 * Fonts are the portal's self-hosted IBM Plex (../fonts/).
 * Colour jobs: violet is OUR research (claims per 1,000 ingested); side colours say who acted;
 * the four fidelity codes are the only warm status colours and always travel with a glyph + label.
 */

@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("../fonts/IBMPlexSerif-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* ── 0x13D brand tokens — copied from _community/0x13d/brand/theme.css (the source of truth;
   change values there first). Light is the default; html[data-theme="dark"] is the reader's choice. */
:root {
  color-scheme: light;

  /* paper and surfaces */
  --bg: #faf7f1;          /* paper */
  --bg-soft: #f3eee4;     /* paper-soft: side columns, bands */
  --surface: #fffdf8;     /* cards, panels, inputs */
  --surface-2: #f3eee4;   /* raised or hovered surface */
  --banner: #b7beaf;      /* the sage banner (workbook .page-banner) */
  --banner-ink: #11120f;
  --header-bg: #b7beaf;
  --header-ink: #11120f;
  --header-shadow: 0px 0px 25px 0px;

  /* ink */
  --ink: #11120f;         /* headings, primary text */
  --ink-2: #2b2a26;       /* body text */
  --ink-soft: #5d5b54;    /* secondary text (≥ 4.5:1 on --bg) */
  --ink-faint: #6b6860;   /* micro labels, captions (≥ 4.5:1 on --bg and --bg-soft) */
  --rule: #e2ddd2;        /* hairlines */
  --rule-strong: #c9c2b4; /* control borders */

  /* accents */
  --accent: #3a3a3a;      /* charcoal: primary buttons, selected state */
  --accent-ink: #faf7f1;  /* text on --accent */
  --brass: #8a6d3b;       /* the one warm accent: focus, emphasis */
  --link: #6f5528;        /* brass, darkened for text contrast */
  --link-hover: #11120f;
  --focus: #8a6d3b;

  /* the footer is constant across themes (portfolio web standard) */
  --footer-bg: #3a3a3a;
  --footer-ink: #faf7f1;
  --footer-accent: #cbb88f;

  /* status (fact-check and fidelity codes) — always with a glyph or label */
  --good: #3f7a3a;
  --warn: #b07a1a;
  --bad: #b8412c;
  --neutral: #8e8b82;

  /* data: who acted (categorical, validated on --surface), and our own research */
  --side-gop: #c94f4f;
  --side-dem: #2f6fc4;
  --side-courts: #157d59;
  --side-agency: #b07a1a;
  --side-foreign: #a2479a;
  --research: #6a5fd0;
  --hatch: #d9d3c6;
  --contested-ink: #8a5f12; /* --warn darkened for 12px text (5.5:1 on --card) */

  --shadow: 0 1px 12px rgba(17, 18, 15, 0.06);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #14130f;
  --bg-soft: #1b1a16;
  --surface: #201f1a;
  --surface-2: #28271f;
  --banner: #3a4036;
  --banner-ink: #ece8de;
  --header-bg: #3a4036;
  --header-ink: #ece8de;
  --header-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.6);

  --ink: #ece8de;
  --ink-2: #d6d1c5;
  --ink-soft: #aba699;
  --ink-faint: #908b7f;
  --rule: #2e2c26;
  --rule-strong: #46433a;

  --accent: #e6e0d2;
  --accent-ink: #14130f;
  --brass: #c9a86a;
  --link: #d8bc84;
  --link-hover: #ece8de;
  --focus: #c9a86a;

  --footer-bg: #3a3a3a;
  --footer-ink: #faf7f1;
  --footer-accent: #cbb88f;

  --good: #6fae63;
  --warn: #d9a441;
  --bad: #e2694f;
  --neutral: #8a8579;

  --side-gop: #e66767;
  --side-dem: #3987e5;
  --side-courts: #199e70;
  --side-agency: #b8801c;
  --side-foreign: #c15fb0;
  --research: #9085e9;
  --hatch: #3a3831;
  --contested-ink: #d9a441;

  --shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* Fact-check labels and source stances, copied from the claims archive's stylesheet
   (its verdict and stance colours) so a label looks the same here as on its permalink. Keyed by the PUBLIC label. Every label also carries its two-letter code, its
   words and its evidence tally, so colour is never the only signal. */
:root {
  --label-supported: #007370;
  --label-mostly-supported: #33724c;
  --label-conflicting: #6b578f;
  --label-mixed: #755914;
  --label-mostly-refuted: #934e1e;
  --label-refuted: #963e35;
  --label-unresolved: #62626f;
  --stance-supports: #2b7351;
  --stance-refutes: #964a2f;
  --stance-context: #62626f;
}
html[data-theme="dark"] {
  --label-supported: oklch(0.78 0.085 192);
  --label-mostly-supported: oklch(0.80 0.075 165);
  --label-conflicting: oklch(0.72 0.075 285);
  --label-mixed: oklch(0.82 0.075 96);
  --label-mostly-refuted: oklch(0.77 0.085 52);
  --label-refuted: oklch(0.70 0.085 28);
  --label-unresolved: oklch(0.64 0.018 285);
  --stance-supports: oklch(0.76 0.08 165);
  --stance-refutes: oklch(0.74 0.09 40);
  --stance-context: oklch(0.68 0.02 285);
}


/* ── this site's names for the brand tokens, plus type and layout */
:root {
  --canvas: var(--bg);
  --card: var(--surface);
  --card-2: var(--surface-2);
  --line: var(--rule);
  --line-2: var(--rule-strong);
  --line-3: var(--rule);
  --ink-3: var(--ink-soft);
  --body: var(--ink-2);
  --muted: var(--ink-soft);
  --faint: var(--ink-faint);
  --changed: var(--bad);
  --contested: var(--warn);
  --added: var(--neutral);
  --faithful: var(--ink);
  --dim: color-mix(in srgb, var(--ink-faint) 45%, transparent);
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --gutter: clamp(16px, 4.5vw, 64px);
  --label-col: 260px;
  --right-col: 190px;
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--body); font: 400 15px/1.55 var(--sans); }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2 { font-family: var(--serif); font-weight: 400; color: var(--ink); margin: 0; text-wrap: balance; }
.wrap { max-width: 1440px; margin: 0 auto; padding-inline: var(--gutter); }
.micro { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
b { font-weight: 600; }

/* ── masthead ─────────────────────────────────────────────────────────── */
/* The shared 0x13d::Research bar: brand/brand.css, copied from _community/0x13d/brand/web by
   scripts/sync-brand.mjs. Only what this site needs on top of it lives here. */
html { scroll-padding-top: calc(var(--x13-sticky, 64px) + 12px); }
.x13-bar { top: env(safe-area-inset-top, 0px); }

/* ── landing ──────────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; padding-block: clamp(40px, 7vw, 72px) 48px; }
.hero__copy { display: flex; flex-direction: column; gap: 22px; }
.hero h1 { font-size: clamp(38px, 5.2vw, 62px); line-height: 1.04; letter-spacing: -0.01em; }
.lede { margin: 0; max-width: 60ch; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--ink-3); }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--ink); font-size: 15px; }
.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn--primary:hover { color: var(--accent-ink); filter: brightness(1.12); }

.story { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 2.4vw, 28px); border-radius: 10px; background: var(--card); border: 1px solid var(--line); color: var(--body); }
.story:hover { border-color: var(--line-2); color: var(--body); }
.story__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.story__title { font: 400 clamp(20px, 2vw, 26px)/1.25 var(--serif); color: var(--ink); }
.story__beats { display: flex; flex-direction: column; }
.beat { display: grid; grid-template-columns: 58px 16px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.beat__date { font: 12px var(--mono); color: var(--muted); padding-top: 2px; }
.beat__text { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.story__cta { font-size: 14px; color: var(--link); }

.dot { width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; display: inline-block; flex: none; }
.dot--changed { background: var(--changed); }
.dot--contested { background: var(--contested); }
.dot--added { background: var(--added); }
.dot--faithful { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faithful); }

.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.section-head h2 { font-size: 30px; }
.issues { padding-block: 8px 48px; }
.issue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; align-items: start; }
.issue-card { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 10px; background: var(--card); border: 1px solid var(--line-2); color: var(--body); }
a.issue-card:hover { border-color: var(--ink-3); color: var(--body); }
.issue-card--seeding { background: var(--bg-soft); border-style: dashed; }
.issue-card__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.issue-card__name { font-size: 21px; font-weight: 600; color: var(--ink); }
.issue-card--seeding .issue-card__name { color: var(--ink-3); }
.tag { font: 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 3px 7px; border-radius: 3px; border: 1px solid var(--line-2); }
.tag--live { color: var(--bg); background: var(--research); border-color: var(--research); }
.issue-card__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.issue-card__stats span, .stats span { display: flex; flex-direction: column; gap: 2px; }
.issue-card__stats b { font: 400 24px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.issue-card__stats i, .stats i { font: normal 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.issue-card__spark { display: flex; flex-direction: column; gap: 6px; }
.spark { width: 100%; height: 56px; display: block; border-bottom: 1px solid var(--line-2); }
.issue-card__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.issue-card--seeding .issue-card__foot { color: var(--muted); }
.seed-meter { height: 6px; border-radius: 3px; background: var(--line-3); overflow: hidden; }
.seed-meter i { display: block; height: 100%; background: var(--research); opacity: 0.7; }

.method { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-block: 32px 48px; border-top: 1px solid var(--line); }
.step { display: flex; flex-direction: column; gap: 6px; }
.step b { font-size: 16px; color: var(--ink); }
.step p, .fine p { margin: 0; font-size: 14px; line-height: 1.55; }
.fine { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.fine b { color: var(--ink-2); }

.foot { background: var(--footer-bg); color: var(--footer-ink); }
.foot .micro { color: color-mix(in srgb, var(--footer-ink) 70%, transparent); }
.foot a { color: var(--footer-accent); }
.foot a:hover { color: var(--footer-ink); }
.foot__in { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 20px 28px; }
.foot__links { display: flex; gap: 20px; font-size: 14px; }

/* ── issue page ───────────────────────────────────────────────────────── */
.issue { padding-block: 28px 48px; display: flex; flex-direction: column; gap: 16px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.issue__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.issue h1 { font-size: clamp(34px, 4vw, 44px); }
.sub { margin: 6px 0 0; font-size: 15px; color: var(--ink-3); max-width: 70ch; }
.stats { display: flex; gap: 12px 36px; flex-wrap: wrap; padding: 14px 0; border-block: 1px solid var(--line); }
.stats span { flex-direction: row; align-items: baseline; gap: 8px; }
.stats b { font: 400 20px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }

.zoom { display: flex; flex-direction: column; gap: 10px; }
.zoom__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zoom__readout { font-size: 15px; color: var(--ink); margin-right: auto; }
.zoom__presets { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { min-height: 32px; padding: 0 12px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); font: 12px var(--mono); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.dual { position: relative; height: 88px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); overflow: hidden; touch-action: none; }
.dual__bars { position: absolute; left: 0; right: 0; top: 8px; height: 56px; display: flex; align-items: flex-end; gap: 1px; padding: 0 2px; }
.dual__bars span { flex: 1 1 0; min-width: 0; }
.dual__marks { position: absolute; left: 0; right: 0; top: 70px; height: 10px; }
.dual__shade { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--bg) 72%, transparent); pointer-events: none; }
.dual__shade--l { left: 0; }
.dual__shade--r { right: 0; }
.dual__sel { position: absolute; top: 0; bottom: 0; box-shadow: inset 0 0 0 1px var(--focus); pointer-events: none; }
.dual input[type="range"] { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; pointer-events: none; }
.dual input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 14px; height: 84px; border-radius: 3px; background: var(--ink); border: 2px solid var(--canvas); cursor: ew-resize; }
.dual input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 12px; height: 80px; border-radius: 3px; background: var(--ink); border: 2px solid var(--canvas); cursor: ew-resize; }
.dual input[type="range"]::-moz-range-track { background: transparent; }
.dual input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--focus); outline-offset: 2px; }
.zoom__ends { display: flex; justify-content: space-between; gap: 12px; text-transform: none; letter-spacing: 0; color: var(--faint); }
.hatch { background: repeating-linear-gradient(135deg, var(--hatch) 0 2px, transparent 2px 5px); }
.diamond { position: absolute; width: 9px; height: 9px; margin-left: -4.5px; transform: rotate(45deg); border: 1px solid var(--canvas); }
.diamond--up { background: var(--canvas) !important; border: 1.5px solid var(--ink-3); }

/* The timeline only scrolls sideways on narrow screens; on wide ones it must not be a scroll
   container, or the drawer's sticky panel would stick to it instead of the page. */
.tl-scroll { overflow: visible; }
.tl { min-width: 640px; }
.tl__axis, .tl__row, .tl__group { display: grid; grid-template-columns: var(--label-col) minmax(0, 1fr) var(--right-col); align-items: center; }
.tl__axis { height: 34px; align-items: end; border-bottom: 1px solid var(--line-2); }
.tl__axis .micro { padding: 0 0 8px; }
.tl__axis .micro:last-child { padding-left: 16px; }
.tl__months { position: relative; height: 34px; }
.tl__months span { position: absolute; bottom: 8px; font: 11px var(--mono); color: var(--muted); padding-left: 4px; border-left: 1px solid var(--line-2); white-space: nowrap; }
.tl__group { min-height: 44px; border-bottom: 1px solid var(--line); background: var(--card); }
.tl__toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--ink); font: 600 14px var(--sans); text-align: left; cursor: pointer; }
.tl__toggle svg { transition: transform 0.15s; flex: none; }
.tl__toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.tl__row { min-height: 36px; border-bottom: 1px solid var(--line-3); }
.tl__label { padding: 6px 12px 6px 34px; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl__expand { display: flex; align-items: center; gap: 8px; width: calc(100% + 20px); min-height: 28px; margin-left: -20px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tl__expand:focus-visible { outline-offset: -2px; }
.tl__expand svg { flex: none; color: var(--muted); transition: transform 0.15s; }
.tl__expand[aria-expanded="true"] svg { transform: rotate(90deg); color: var(--ink); }
.tl__expandtext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl__expand:hover .tl__expandtext { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.tl__row.is-open { background: var(--bg-soft); }
.tl__row.is-open .tl__expandtext { color: var(--ink); font-weight: 600; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tl__right { padding-left: 16px; font: 11px var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl__group .tl__right { color: var(--ink-3); }
.tl__plot { position: relative; height: 36px; }
.tl__group .tl__plot { height: 44px; }
.tl__plot > * { position: absolute; }
.tl__bar { bottom: 6px; border-radius: 1px 1px 0 0; }
.tl__bar.is-on { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 3.5px var(--ink); }
.tl__edge { top: 10px; font: 11px var(--mono); color: var(--muted); white-space: nowrap; pointer-events: none; }
.tl__edge--l { left: 4px; }
.tl__edge--r { right: 4px; }
.tl__tag { flex: none; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--line-2); font: 10px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tl__gap { top: 4px; bottom: 4px; }
.tl__span { top: 17px; height: 2px; opacity: 0.55; }
.tl__plot .diamond { top: 13px; width: 10px; height: 10px; margin-left: -5px; }
.tl__group .tl__plot .diamond { top: 17px; }
.tl__now, .tl__mark { top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--line-2); pointer-events: none; }
.tl__now { border-left-color: var(--muted); }
.hit { position: absolute; background: transparent; border: 0; padding: 0; cursor: pointer; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 16px; font-size: 13px; color: var(--ink-3); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.sw { display: inline-block; width: 12px; height: 12px; }
.sw--bar { width: 4px; background: var(--research); }
.sw--hatch { width: 18px; }
.sw--diamond { width: 9px; height: 9px; transform: rotate(45deg); }

.tip { position: fixed; z-index: 40; max-width: min(380px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 8px; background: var(--card-2); border: 1px solid var(--line-2); box-shadow: 0 12px 32px color-mix(in srgb, var(--ink) 18%, transparent); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.tip b { color: var(--ink); }
.tip .micro { display: block; margin-bottom: 4px; }
.tip p { margin: 6px 0 0; }
.tip a { display: inline-block; margin-top: 8px; }
.tip .tip__ep { margin-top: 2px; color: var(--muted); font-size: 12px; }
.tip__claim { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.tip__claim .micro { margin: 0; }
.tip__claim q { color: var(--ink); }
.tip__code { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.tip .lbl__chip { background: var(--card); }
.tip__none { font-size: 12px; color: var(--muted); }
.tip .tip__hint { margin-top: 10px; font-size: 12px; color: var(--muted); }

/* ── a row, opened: lanes on the timeline's axis, then the claims ─────── */
.drawer { display: flex; flex-direction: column; gap: 12px; padding: 14px 0 18px; background: var(--bg-soft); border-bottom: 1px solid var(--line-2); box-shadow: inset 3px 0 0 var(--research); }
.drawer--e { box-shadow: inset 3px 0 0 var(--ink-3); }
.drawer > :not(.drawer__lanes) { margin-inline: 34px 16px; }
.drawer__msg { margin: 0; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.drawer__sum { margin: 0; font-size: 14px; color: var(--ink-2); }
.drawer__sum b { color: var(--ink); }
.drawer__recs, .drawer__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip--rec { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.chip--rec span { max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer__tools { margin: 8px 16px 0 34px; }
.drawer .drift__key { padding: 8px 0; font-size: 12px; }
.drawer .drift__key span { gap: 6px; }
.drawer__lanes { display: flex; flex-direction: column; border-block: 1px solid var(--line); background: var(--card); }
.tl__lane { min-height: 28px; border-bottom: 1px solid var(--line-3); }
.tl__lane:last-of-type { border-bottom: 0; }
.tl__lane .tl__plot { height: 28px; }
.lane__name { padding: 4px 12px 4px 34px; font: 11px var(--mono); color: var(--ink-3); }
.ln__empty { position: static !important; display: flex; align-items: center; height: 100%; padding-left: 8px; font-size: 12px; color: var(--muted); }
.ln__band { top: 0; bottom: 0; background: color-mix(in srgb, var(--research) 16%, transparent); }
.ln__mark { top: 0; bottom: 0; width: 0; border-left: 1px dashed; opacity: 0.7; pointer-events: none; }
.drawer__note { font-size: 12px; color: var(--muted); }

/* A lane's dot is one episode. Size: how many claims. Each code has its own shape as well as its
   colour (solid, half, square, ring, tick), and its label in the key, tooltip and accessible name. */
.ld { position: absolute; top: 50%; width: var(--d, 9px); height: var(--d, 9px); margin: calc(var(--d, 9px) / -2) 0 0 calc(var(--d, 9px) / -2); padding: 0; border: 0; border-radius: 50%; cursor: pointer; }
.ld::before { content: ""; position: absolute; inset: calc((24px - var(--d, 9px)) / -2); border-radius: 50%; }
.ld--checked { background: var(--research); }
.ld--open { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--research); }
.ld--changed { background: var(--changed); }
.ld--contested { background: linear-gradient(90deg, var(--contested) 50%, var(--card) 50%); box-shadow: inset 0 0 0 1.5px var(--contested); }
.ld--added { background: var(--added); border-radius: 2px; }
.ld--faithful { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--faithful); }
.ld--named { width: 3px; height: 12px; margin: -6px 0 0 -1.5px; border-radius: 1px; background: var(--faint); }
.ld--named::before { inset: -6px -10.5px; border-radius: 0; }
.ld.is-dim { opacity: 0.14; }
.ld.is-on { outline: 2px solid var(--ink); outline-offset: 2px; z-index: 2; }
.ld:hover { z-index: 3; }
.ld.is-dim:hover, .ld.is-dim:focus-visible, .ld.is-dim.is-on { opacity: 1; }
.ld:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; z-index: 6; }
.hit:focus-visible { z-index: 6; }
.ld--key { position: static; display: inline-block; flex: none; width: 10px; height: 10px; margin: 0; cursor: default; vertical-align: middle; }
.ld--key::before { content: none; }
.ld--key.ld--named { width: 3px; height: 12px; margin: 0 3px; }

.ms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ms li { display: grid; grid-template-columns: 96px 12px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; line-height: 1.5; }
.ms__date { font: 12px var(--mono); color: var(--muted); padding-top: 1px; }
.ms .sw--diamond { margin-top: 5px; }
.ms .sw--diamond.is-up { background: var(--canvas) !important; border: 1.5px solid var(--ink-3); }
.ms__what { color: var(--ink); }
.ms__meta { display: block; font-size: 12px; color: var(--muted); }
.ms__note summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.ms__note p { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); max-width: 90ch; }

.drawer__body { display: block; }
/* The claims panel is first in the document; on wide screens it sits in the right column. */
.drawer__body--record { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.drawer__body--record > .drawer__aside { grid-column: 2; grid-row: 1; }
.drawer__body--record > .record { grid-column: 1; grid-row: 1; }
.drawer__aside { position: sticky; top: calc(var(--x13-sticky, 64px) + 12px); max-height: calc(100vh - var(--x13-sticky, 64px) - 24px); overflow: auto; overscroll-behavior: contain; }
.drawer:focus { outline: none; }
.drawer:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.cc:focus, .panel:focus { outline: none; }
.panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
/* The side panel scrolls, so a ring outside its box would be clipped: draw it inside. */
.drawer__aside .panel:focus-visible, .drawer__aside .cc:focus-visible { outline-offset: -2px; }
.cc:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.record__title { margin: 0 0 6px; font: 400 17px/1.35 var(--serif); color: var(--ink); }
.record .note { margin-top: 14px; }
.panel { display: flex; flex-direction: column; gap: 12px; }
.panel__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; color: var(--ink); font-weight: 600; }
.panel__close { flex: none; width: 30px; height: 30px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); font-size: 18px; line-height: 1; cursor: pointer; }
.panel__hint { margin: 0; font-size: 13px; color: var(--muted); }
.panel__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 12px; align-items: start; }
.drawer__aside .panel__cards { grid-template-columns: minmax(0, 1fr); }
.panel > .chip { align-self: flex-start; }

/* one claim, in full */
.cc { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 8px; background: var(--card); border: 1px solid var(--line-2); min-width: 0; max-width: 760px; }
.cc__src { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cc__src b { color: var(--ink); font-size: 14px; }
.cc__src .micro { white-space: nowrap; }
.cc__ep { margin-top: -6px; font-size: 12px; color: var(--muted); }
.cc__q { margin: 0; font: 400 16px/1.45 var(--serif); color: var(--ink); }
.cc__q cite { display: block; margin-top: 4px; font: normal 11px var(--mono); color: var(--muted); }
.cc__pos { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--ink-2); }
.cc__block { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.cc__line { display: flex; flex-direction: column; gap: 3px; padding-left: 10px; border-left: 2px solid; }
.cc__line q { color: var(--ink); font-size: 13px; }
.cc__line span { font-size: 12px; color: var(--body); }
.cc__drift { font-size: 12px; color: var(--contested-ink); }
.cc__claim { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.cc__claim span { color: var(--muted); }
.cc__sum summary { cursor: pointer; font-size: 12px; color: var(--link); }
.cc__sum p { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.cc__ev { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cc__ev li { display: flex; flex-direction: column; gap: 1px; padding-left: 8px; border-left: 2px solid var(--stance-context); font-size: 12px; line-height: 1.4; }
.cc__ev li .micro { font-size: 10px; }
.cc__ev--supports { border-color: var(--stance-supports) !important; }
.cc__ev--refutes { border-color: var(--stance-refutes) !important; }
.cc__link { align-self: flex-start; font-size: 13px; font-weight: 600; }
.cc__none { margin: 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }

/* the archive's label: a chip with its two-letter code, and always its tally beside it */
.lbl { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lbl__chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 7px; border: 1px solid var(--c); border-radius: 4px; color: var(--c); font-size: 12px; }
.lbl__chip b { font: 600 11px var(--mono); letter-spacing: 0.04em; }
.lbl--lead .lbl__chip { font-size: 13px; }
.lbl__tally { font: 11px var(--mono); color: var(--muted); }

/* ── the record, line by line (inside an action's drawer) ───────────────── */
.drift__key { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px 0; border-block: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.drift__key span { display: inline-flex; align-items: center; gap: 8px; }
.drift__key .dot { margin-top: 0; }
.drift__key em { font-style: normal; color: var(--muted); }
.record__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; flex-wrap: wrap; }
.line { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }
.line__top { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 12px; }
.line__title { font-size: 15px; font-weight: 600; color: var(--ink); }
.line__text { font-size: 13px; line-height: 1.5; color: var(--body); }
.line__basis { font: 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-left: 6px; font-weight: 400; }
.meter { display: flex; width: 120px; height: 8px; gap: 1px; border-radius: 2px; overflow: hidden; background: var(--line-3); }
.tally { font: 11px var(--mono); color: var(--muted); text-align: right; margin-top: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sig { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 10px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: 12px var(--sans); cursor: pointer; text-align: left; }
.sig[aria-pressed="true"] { background: var(--surface-2); border-color: var(--ink); }
.sig .ld--key { width: 9px; height: 9px; }
.sig em { font-style: normal; color: var(--body); }
.note { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
.note b { color: var(--ink); }

@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .method, .fine { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* One column: the claims panel comes right under the lanes, before the record's lines. */
  .drawer__body--record { grid-template-columns: minmax(0, 1fr); }
  .drawer__body--record > .drawer__aside, .drawer__body--record > .record { grid-column: auto; grid-row: auto; }
  .drawer__aside { position: static; max-height: none; overflow: visible; }
  :root { --label-col: 180px; --right-col: 150px; }
  .tl-scroll { overflow-x: auto; }
  .tl__axishint { display: none; }
}
@media (max-width: 700px) {
  /* Here the timeline is wider than the screen and scrolls sideways. The drawer's prose stays
     pinned to the visible part at screen width, and every row and lane keeps its name in view. */
  .tl-scroll { container-type: inline-size; scroll-padding-inline-start: calc(var(--label-col) + 8px); }
  .drawer > :not(.drawer__lanes), .drawer__tools { position: sticky; left: 16px; max-width: calc(100cqw - 50px); }
  .tl__label { position: sticky; left: 0; z-index: 5; background: var(--canvas); }
  .tl__row.is-open > .tl__label { background: var(--bg-soft); }
  .drawer__lanes .tl__label { background: var(--card); }
  .tl__group .tl__toggle { position: sticky; left: 0; z-index: 5; background: var(--card); }
}
@media (max-width: 640px) {
  :root { --label-col: 132px; --right-col: 0px; }
  .tl__right { display: none; }
  .tl__label { padding-left: 22px; }
  .drawer > :not(.drawer__lanes) { margin-inline: 16px 12px; }
  .drawer__tools { margin-inline: 16px 12px; }
  .drawer > :not(.drawer__lanes), .drawer__tools { max-width: calc(100cqw - 28px); }
  .tl__tag { display: none; }
  .lane__name { padding-left: 16px; }
  .ms li { grid-template-columns: 84px 12px minmax(0, 1fr); }
  .zoom__hint { display: none; }
  .tl__toggle { font-size: 12px; padding: 0 6px; gap: 6px; }
  .stats { gap: 10px 20px; }
}
@media (prefers-reduced-motion: reduce) { .tl__toggle svg, .tl__expand svg { transition: none; } }
.hit.diamond { border: 1px solid var(--canvas); }
.hit.diamond--up { border: 1.5px solid var(--ink-3); }

/* ── theme toggle (brand markup; theme.js wires it) */
/* The toggle: one button, the same on every surface. Markup:
 *   <button type="button" class="theme-toggle" data-theme-toggle aria-label="Switch to dark theme">
 *     <span class="theme-toggle__icon" aria-hidden="true"></span><span class="theme-toggle__label">Dark</span>
 *   </button>
 * theme.js keeps aria-label, aria-pressed and the label in sync. */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 10px; border-radius: 6px;
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 12px; cursor: pointer;
}
.theme-toggle:hover { border-color: var(--ink-soft); color: var(--ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.theme-toggle__icon { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }

.bar .theme-toggle { margin-left: 4px; }