/* ============================================================================
   Targeting Tracker — editorial theme.

   Implements the Targeting Tracker redesign in the restorethe1st.com design
   language: parchment ground, ink type, one accent red, Fraunces display over
   Inter body over a mono numeric face. Square corners, hairline rules, no
   drop shadows on content — the page should read as a printed record, not a
   dashboard.

   Tokens below are lifted verbatim from the design, not eyeballed. The app's
   own variable names (--bg, --surface, --s1..--s5, sector colours) are kept
   and re-pointed at the editorial palette, because app.js resolves several of
   them at runtime via getComputedStyle and the D3 views would otherwise go on
   drawing in the old scheme.

   Fonts are self-hosted in assets/fonts/. CSP is font-src 'self'; a webfont
   CDN would also leak every reader's IP, which on a First-Amendment page is
   not an acceptable trade.
   ========================================================================== */

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/Fraunces144pt-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('assets/fonts/Fraunces144pt-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap; src: url('assets/fonts/Fraunces144pt-Italic.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 600 700; font-display: swap; src: url('assets/fonts/Fraunces144pt-BoldItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/Inter-Bold.woff2') format('woff2'); }

:root {
  /* --- design tokens, verbatim from the redesign ------------------------- */
  --parchment: #f5eddc;
  --parchment-2: #efe4cc;
  --parchment-90: rgba(245, 237, 220, 0.9);
  --parchment-70: rgba(245, 237, 220, 0.7);
  --parchment-20: rgba(245, 237, 220, 0.2);
  --ink: #0b1220;
  --ink-2: #171f31;
  --ink-3: #2a3346;
  --accent: #b93124;
  --accent-hover: #9c2418;
  --accent-soft: #f9c9c1;
  --accent-bright: #ff6b56;
  --accent-highlight: rgba(185, 49, 36, 0.1);
  --positive: #1b6e40;
  --divider: #d9cfb8;

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --content: 1200px;
  --content-wide: 1360px;
  --radius-sm: 0px;      /* the design is square-cornered throughout */
  --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- app aliases ------------------------------------------------------- */
  --font: var(--font-body);
  --mono: var(--font-mono);
  --xs: 0.74rem; --sm: 0.86rem; --base: 0.95rem; --lg: 1.15rem;
}

/* Parchment is the design. It is the default and the only state the redesign
   specifies; the ink variant below exists because the tracker shipped with a
   working theme toggle and readers who chose dark should keep it. */
[data-theme="light"] {
  --bg: var(--parchment);
  --surface: #faf3e2;
  --surface2: var(--parchment-2);
  --line: var(--divider);
  --text: var(--ink);
  --muted: #4a5061;
  --faint: #7b7869;
  /* severity ramp, verbatim from the design: sand -> drab -> slate -> accent
     -> oxblood. It climbs in weight, not in hue noise. */
  --s1: #c7b996; --s2: #94896f; --s3: #4a5061; --s4: #b93124; --s5: #5e140c;
  --monitor: #3f6797; --media: #1f7a6e; --academic: #6f4fae; --government: #6c7230;
  --platform: #a3477a; --reference: #7a766e; --funder: #a8730f; --legal: #94582c;
  --counter: #1b6e40; --impact: #3d6f9e;
  --headband: var(--ink);
  --headband-text: var(--parchment);
}
[data-theme="dark"] {
  --bg: var(--ink);
  --surface: var(--ink-2);
  --surface2: var(--ink-3);
  --line: rgba(245, 237, 220, 0.18);
  --text: var(--parchment);
  --muted: rgba(245, 237, 220, 0.72);
  --faint: rgba(245, 237, 220, 0.46);
  --s1: #8d856f; --s2: #b3a888; --s3: #9aa6bf; --s4: #e0574a; --s5: #ff6b56;
  --monitor: #8fb0d8; --media: #4fb3a5; --academic: #a68ad6; --government: #b7bd72;
  --platform: #d38bb0; --reference: #9a958b; --funder: #d8a24a; --legal: #c98a5e;
  --counter: #5fc38c; --impact: #8fb4d9;
  --headband: #060b14;
  --headband-text: var(--parchment);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: var(--base);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
[data-theme="dark"] a { color: var(--accent-bright); }

button {
  font: inherit; color: inherit; background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 6px 11px; cursor: pointer; font-size: var(--sm);
  transition: background var(--transition), border-color var(--transition);
}
button:hover { border-color: var(--text); }
button.ghost { background: transparent; }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; }
h1 { font-size: var(--lg); letter-spacing: -0.015em; }
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: var(--content-wide); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2.5rem); }

/* ============================================================ site chrome */
/* The tracker is a page of restorethe1st.com and now says so. It carried no
   site header at all before, which made the strongest page on the site look
   like a detached third-party dashboard. */

.site-header {
  background: var(--bg); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; min-height: 66px; padding-block: 0.5rem; }
.rt1-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text); flex: none; }
.rt1-brand .logo { color: var(--text); flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1; font-family: var(--font-display); }
.brand-line { font-size: 0.95rem; letter-spacing: 0.01em; }
.brand-line-heavy { font-weight: 700; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; flex: 1; font-size: 0.92rem; }
.site-nav a { color: var(--text); text-decoration: none; padding-block: 2px; border-bottom: 1.5px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--accent); color: var(--text); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--accent); font-weight: 600; }
.header-cta { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.4rem; min-height: 40px; padding: 0.55rem 1.1rem;
  font: 600 0.9rem/1 var(--font-body); text-decoration: none;
  border: 1px solid var(--text); color: var(--text); background: transparent;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.btn:hover { background: var(--text); color: var(--bg); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-lg { min-height: 48px; padding: 0.75rem 1.5rem; font-size: 1rem; }
.btn-onink { border-color: var(--parchment-70); color: var(--parchment); }
.btn-onink:hover { background: var(--parchment); color: var(--ink); }

/* ===================================================================== hero */
/* § the masthead: ink band, display headline with an accent-soft clause, and
   the plaintiff disclosure sitting *beside* it rather than under it. The
   disclosure is load-bearing credibility, so it gets hero real estate. */

.masthead {
  background: var(--headband); color: var(--headband-text);
  border-top: 3px solid var(--accent);
  padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.masthead-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(2rem, 5vw, 4.5rem); align-items: end;
}
.kicker {
  margin: 0 0 1rem; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.kicker.light { color: var(--accent-soft); }
.masthead h1 {
  margin: 0 0 1.25rem; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.25rem, 1rem + 4.5vw, 5rem); line-height: 0.99;
  letter-spacing: -0.025em; color: var(--parchment);
}
.masthead h1 em { color: var(--accent-soft); font-weight: 400; }
.masthead-deck {
  margin: 0 0 1.75rem; font-size: var(--text-lg); line-height: 1.5;
  color: rgba(245, 237, 220, 0.88); max-width: 46ch;
}
.masthead-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.disclosure-aside {
  border: 1px solid var(--parchment-20); padding: clamp(1.25rem, 2.5vw, 2rem);
  display: flex; flex-direction: column; gap: 0.9rem; min-width: 0;
}
.disclosure-aside .dtag {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-soft);
}
.disclosure-aside .dlede {
  margin: 0; font-family: var(--font-display); font-size: 1.3rem;
  line-height: 1.35; color: var(--parchment);
}
.disclosure-aside p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: rgba(245, 237, 220, 0.75); }
.disclosure-aside .dpull { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--parchment); }
.disclosure-aside a, .disclosure-aside button {
  font-size: 0.9rem; font-weight: 600; color: var(--accent-bright);
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
}

/* ============================================================== stat band */

.statband { background: var(--parchment-2); border-bottom: 1px solid var(--line); padding: clamp(1.75rem, 4vw, 3rem) 0; }
[data-theme="dark"] .statband { background: var(--surface); }
.statband-inner { display: flex; flex-direction: column; gap: 1.25rem; }
.statband-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; }
.status-live { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.statband .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1rem; overflow: visible; }
.kpi { display: flex; flex-direction: column; gap: 0.3rem; padding: 0; border: 0; border-top: 3px solid var(--ink); padding-top: 0.85rem; min-width: 0; }
[data-theme="dark"] .kpi { border-top-color: var(--parchment-70); }
.kpi.hot { border-top-color: var(--accent); }
.kv { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.kpi.hot .kv { color: var(--accent); }
.kl { font-size: 0.88rem; color: var(--muted); line-height: 1.45; }

/* ========================================================= standard of proof */

.proofs { padding: clamp(2.5rem, 5vw, 4rem) 0; border-bottom: 1px solid var(--line); }
.proofs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.proof { display: flex; flex-direction: column; gap: 0.6rem; border-top: 3px solid var(--text); padding-top: 1.25rem; }
.proof.accent { border-top-color: var(--accent); }
.proof .pn { margin: 0; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
.proof.accent .pn { color: var(--accent); }
.proof h3 { margin: 0; font-size: 1.5rem; line-height: 1.2; font-weight: 500; }
.proof p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 0.95rem; }

/* ===================================================== visualization dashboard */
/* Full-bleed band between the proof cards and the record. These two charts are
   the only things on the page that genuinely need horizontal room: the timeline
   spreads 14 years across sector lanes, and the influence map is a force
   simulation over 123 nodes. Boxed into the record column they were 628px wide
   and unreadable, so they get the whole content width and sit first. */

.vizband { background: var(--surface); border-bottom: 1px solid var(--line); padding: clamp(2.5rem, 5vw, 4rem) 0; }
[data-theme="dark"] .vizband { background: var(--surface); }
.viz-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; margin-bottom: 1.5rem; }
.viz-title {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.05;
  letter-spacing: -0.02em;
}
.viz-hint { margin: 0; font-size: 0.9rem; color: var(--muted); max-width: 46ch; line-height: 1.5; }

/* Controls sit directly above the charts they drive, as a horizontal rail. */
.vizctl {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1rem 1.75rem; padding: 1.25rem 0 1.5rem;
  border-top: 1px solid var(--line); border-bottom: 1.5px solid var(--text);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.vizctl-g { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.vizctl-g .flab { min-width: 0; padding-top: 0; }
.vizctl-sectors { grid-column: span 2; }
.vizctl-sectors .checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 0 1.25rem; }
@media (max-width: 760px) { .vizctl-sectors { grid-column: auto; } }

/* The charts themselves: taller now that they are wider, so the aspect ratio
   stays readable rather than letterboxed. */
.card.viz { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.card.viz:last-child { margin-bottom: 0; }
.card.viz .timeline { height: clamp(420px, 44vw, 620px); }
.card.viz .network { height: clamp(500px, 52vw, 760px); min-height: 500px; }
.card.viz .sevkey { grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: 0.35rem 1.5rem; margin-top: 1rem; }
@media (max-width: 980px) { .card.viz .sevkey { grid-auto-flow: row; grid-template-rows: none; } }

/* ================================================================= app shell */
/* Three columns become an editorial spread: the filter rail and the detail
   pane stick while the record column scrolls with the document. The old build
   locked the whole page at 100dvh with three independently scrolling panes,
   which is a dashboard gesture and fought the long-read structure. */

.app { max-width: var(--content-wide); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2.5rem); display: grid; grid-template-columns: 250px minmax(0, 1fr) 330px; gap: clamp(1.25rem, 2.5vw, 2.5rem); align-items: start; }
.side, .main, .detail { min-width: 0; }
.side {
  position: sticky; top: 82px; max-height: calc(100dvh - 100px); overflow-y: auto;
  overscroll-behavior: contain; display: flex; flex-direction: column; gap: 1.5rem;
  padding: 1.75rem 1.25rem 1.75rem 0; border-right: 1px solid var(--line);
}
.side section { display: flex; flex-direction: column; gap: 0.5rem; }
.side h2 { font-family: var(--font-body); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); font-weight: 700; }
.main { padding: clamp(1.5rem, 3vw, 2.5rem) 0 4rem; display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.5rem); }
.detail { position: sticky; top: 82px; max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain; padding: 1.75rem 0 1.75rem 1.25rem; border-left: 1px solid var(--line); }

/* Section heads: § nn kicker over a display title. This is the single most
   recognisable element of the redesign and it is what turns a stack of
   dashboard cards back into a numbered record. */
.card { background: transparent; border: 0; border-radius: 0; padding: 0; min-width: 0; max-width: 100%; }
/* `min-width: 0` on the flex children matters: without it the header row's
   min-content width (969px, driven by the long mono meta strings) propagates up
   through .card -> .main and widens the whole document to 985px at a 390px
   viewport. A flex item defaults to min-width:auto, which refuses to shrink
   below its content, and a header is the last thing that should set page width. */
.cardhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; padding-bottom: 0.75rem; border-bottom: 1.5px solid var(--text); min-width: 0; }
.cardhead > * { min-width: 0; overflow-wrap: anywhere; }
.cardhead h2, .card > h3 {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); line-height: 1.08;
  text-transform: none; color: var(--text);
}
.card > h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; padding-bottom: 0.75rem; margin-bottom: 1rem; border-bottom: 1.5px solid var(--text); }
.card[data-sec]::before {
  content: "§ " attr(data-sec) "\00a0\00a0" attr(data-sectitle);
  display: block; margin-bottom: 0.5rem;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}
.meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none; }
.foot { font-size: 0.86rem; color: var(--muted); margin: 0.75rem 0 0; line-height: 1.55; }
.card .sub { color: var(--muted); font-size: var(--text-base); line-height: 1.55; margin: 0 0 1.25rem; max-width: 72ch; }

/* charts */
.timeline { height: 470px; position: relative; }
.timeline svg, .network svg { width: 100%; height: 100%; display: block; }
.network { height: min(64dvh, 620px); min-height: 480px; }
.edgekey { display: flex; flex-wrap: wrap; gap: 0.75rem; font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); }
.edgekey span { display: inline-flex; align-items: center; gap: 0.4rem; }
.edgekey i { width: 20px; height: 0; border-top: 2px solid; display: inline-block; }

/* controls */
.checks label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; cursor: pointer; padding: 2px 0; }
.checks input { accent-color: var(--accent); }
.checks .ct { margin-left: auto; font-family: var(--font-mono); font-size: 0.74rem; color: var(--faint); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.sq { width: 10px; height: 10px; display: inline-block; flex: none; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.seg button { padding: 5px 9px; font-size: 0.76rem; border-radius: var(--radius-sm); }
.seg button.on { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }
.sevkey { list-style: none; padding: 0; margin: 0.4rem 0 0; display: grid; gap: 0.4rem; font-size: 0.78rem; color: var(--muted); }
.sevkey li { display: flex; gap: 0.5rem; align-items: flex-start; line-height: 1.4; }
.sevkey .dot { margin-top: 3px; border-radius: 0; width: 12px; height: 12px; }
.toggle { display: flex; gap: 0.5rem; align-items: center; font-size: 0.86rem; cursor: pointer; }
.toggle input { accent-color: var(--accent); }
#search, #brSearch { font: inherit; font-size: 0.86rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; color: var(--text); }
#brSearch { min-width: 220px; }
.note p { margin: 0; font-size: 0.8rem; color: var(--muted); line-height: 1.6; }
.topbtns { display: flex; gap: 0.5rem; align-items: center; flex: none; }
.theme { padding: 8px; display: grid; place-items: center; }

/* ===================================================================== tables */
/* Mono uppercase column heads over a 1.5px ink rule, hairline rows, display
   serif for the row's subject. Straight from the redesign's two tables. */

.tablewrap { overflow-x: auto; border-top: 1.5px solid var(--text); }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th {
  text-align: left; font-family: var(--font-body); font-weight: 700;
  color: var(--muted); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.12em; padding: 0.8rem 0.75rem;
  border-bottom: 1px solid var(--line); cursor: pointer; white-space: nowrap;
}
th.num, td.num { text-align: right; }
td { padding: 0.85rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
td.mono { white-space: nowrap; font-family: var(--font-mono); }
tbody tr { cursor: pointer; }
tbody tr:hover, tbody tr.sel { background: var(--surface); }
tbody tr.sel { box-shadow: inset 3px 0 0 var(--accent); }
#players tbody th, #players td:first-child, #events td:nth-child(2) { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; }
#events td:first-child, #funding td:first-child { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
td .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; color: var(--muted); white-space: nowrap; }
.pager { display: flex; gap: 0.4rem; align-items: center; justify-content: flex-end; margin-top: 0.75rem; font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); }

/* Name tags and severity chips: mono, boxed, square — the design's own. */
.nm { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; padding: 2px 6px; border-radius: 0; border: 1px solid var(--muted); margin-right: 3px; color: var(--muted); }
.nm.SJ { border-color: var(--accent); color: var(--accent); }
.nm.GMI { border-color: var(--text); color: var(--text); }
.sevb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; font-family: var(--font-mono); font-size: 0.85rem;
  font-weight: 500; border-radius: 0; color: var(--ink); padding: 0;
}

/* ================================================================== findings */
/* Findings keep their card form — they are discrete records — but lose the
   rounded surface and gain the design's hairline-and-rule treatment. */

.findings { display: grid; gap: 0.9rem; grid-template-columns: minmax(0, 1fr); }
/* The explicit `minmax(0, 1fr)` is load-bearing. An implicit grid column
   defaults to `auto` = minmax(min-content, max-content), so the column sizes
   itself to the widest finding's min-content and overflows its own container:
   #gatesList computed a 560px column inside a 358px card and scrolled the whole
   document sideways on a phone. `minmax(0, …)` lets the column shrink. */
.finding { border: 1px solid var(--line); border-radius: 0; padding: 1.1rem 1.25rem; background: var(--surface); min-width: 0; }
/* Source links and provenance lines carry URLs and long unbroken tokens; let
   them break rather than set the width of the page. */
.finding .srcs a, .finding .prov, .finding .fhead { overflow-wrap: anywhere; }
.finding.research { border-style: dashed; border-color: var(--accent); }
.finding h4 { margin: 0 0 0.4rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; line-height: 1.25; }
.finding p { margin: 0.45rem 0; font-size: 0.92rem; line-height: 1.6; color: var(--muted); }
.finding p.bodytext { color: var(--text); }
.finding .fhead { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.4rem; }
.finding .srcs { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.6rem; font-size: 0.8rem; }
.finding .prov { font-size: 0.76rem; color: var(--faint); margin-top: 0.5rem; font-family: var(--font-mono); }
.findings.neg .finding { background: transparent; }
.findings.chain .finding { border-left: 3px solid var(--accent); }
.finding.solo { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.finding.lifetime { opacity: 0.92; border-style: dashed; }

/* Badges: mono, square, hairline-bordered. One shape, many meanings. */
.grade, .cls, .jur, .ev, .tierb, .directb, .listb, .outcome, .stepn, .corrorigin {
  display: inline-block; font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.05em; padding: 2px 6px; border-radius: 0;
  white-space: nowrap; border: 1px solid var(--line); color: var(--muted);
}
.grade, .outcome, .stepn { text-transform: uppercase; }
.grade.verified { color: var(--positive); border-color: var(--positive); }
[data-theme="dark"] .grade.verified { color: var(--counter); border-color: var(--counter); }
.grade.inference { color: var(--accent); border-color: var(--accent); border-style: dashed; }
.grade.partial { color: var(--muted); border-color: var(--muted); border-style: dashed; }
.jur { background: var(--text); color: var(--bg); border-color: var(--text); }
/* Claim-class labels are whole sentences ("Funded an organisation that named
   Sayer Ji, GreenMedInfo or the Dozen"), not short tags, so they must wrap.
   Left nowrap they measured 518px and pushed a 390px viewport to 555px. */
.cls { background: var(--bg); white-space: normal; }
.stepn { background: var(--accent); color: #fff; border-color: var(--accent); }
.directb { border-color: var(--accent); color: var(--accent); }
.tierb { border-style: dashed; border-color: var(--accent); color: var(--accent); }
.ev.filed, .ev.grant_db { border-color: var(--positive); color: var(--positive); }
[data-theme="dark"] .ev.filed, [data-theme="dark"] .ev.grant_db { border-color: var(--counter); color: var(--counter); }
.ev.publisher { border-color: var(--monitor); color: var(--monitor); }
.ev.secondary, .ev.reported { border-color: var(--funder); color: var(--funder); }
.ev.metadata { color: var(--muted); }
.ev.refuted { border-color: var(--accent); color: var(--accent); }
.ev.not_found { border-style: dashed; color: var(--muted); }
.outcome { border-color: var(--accent); color: var(--accent); }
.outcome.declined, .outcome.injunction_entered { border-color: var(--positive); color: var(--positive); }
.outcome.pending { border-color: var(--funder); color: var(--funder); }
.conf-verified { color: var(--positive); } .conf-partial { color: var(--funder); } .conf-lead { color: var(--muted); border-style: dashed; }
.bridgetag { display: inline-block; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--funder); margin-top: 2px; }
.arch { color: var(--positive); }

/* A negative finding is the headline, not a footnote: ink block, accent rule. */
.negheadline {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 500;
  line-height: 1.3; margin: 0 0 1.25rem; padding: 1.25rem 1.4rem;
  background: var(--headband); color: var(--parchment);
  border-top: 4px solid var(--accent); border-radius: 0; max-width: 80ch;
}
.negheadline b { color: var(--accent-soft); font-weight: 600; }
.caveat { border-left: 3px solid var(--accent); padding: 0.6rem 1rem; background: var(--bg); border-radius: 0; }
.caveat.hard { border-left-color: var(--accent); }
.prov.warnprov { color: var(--accent); font-family: var(--font-body); line-height: 1.5; }
.escal { margin: 0.75rem 0 0; padding: 0.7rem 1rem; border-left: 2px solid var(--divider); background: var(--bg); border-radius: 0; }
.escal b { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.escal ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.escal li { font-size: 0.88rem; line-height: 1.5; margin: 2px 0; }

/* Counted-separately blocks and funding subtotals take the design's
   display-serif figure treatment. */
.classcounts { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0 0 1.25rem; }
.classcounts div { display: flex; flex-direction: column; min-width: 90px; }
.classcounts b { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; line-height: 1; }
.classcounts span { font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
.subtotals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1rem; margin: 0 0 1.25rem; }
.subtotals div { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.1rem 1.25rem; background: var(--headband); color: var(--parchment); }
.subtotals b { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); font-weight: 600; line-height: 1; }
.subtotals span { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-soft); }

.tracktabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.tracktabs button { padding: 0.5rem 0.9rem; font-size: 0.8rem; }
.tracktabs button.on { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }
.trackblurb { font-size: 0.86rem; color: var(--muted); line-height: 1.6; margin: 0 0 1rem; padding: 0.75rem 1rem; border-left: 3px solid var(--line); background: var(--surface); border-radius: 0; max-width: 88ch; }
.trackblurb.warn { border-left-color: var(--accent); }
.trackblurb.good { border-left-color: var(--positive); }
.fundfilters { display: grid; gap: 0.6rem; margin-bottom: 1rem; }
.fundfilters > div { display: flex; gap: 0.75rem; align-items: flex-start; }
.flab { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); min-width: 92px; padding-top: 7px; }
td.amt { white-space: nowrap; font-family: var(--font-mono); }

.ixlabel { font-size: 0.84rem; color: var(--muted); margin: 1rem 0 0.5rem; }
.findingindex { display: flex; flex-direction: column; gap: 2px; margin-bottom: 1.25rem; border: 1px solid var(--line); border-radius: 0; padding: 0.4rem; background: var(--surface); }
.findingindex button { display: flex; align-items: baseline; gap: 0.5rem; width: 100%; text-align: left; background: none; border: 0; border-radius: 0; padding: 0.4rem 0.5rem; cursor: pointer; font: inherit; font-size: 0.86rem; color: var(--text); line-height: 1.4; }
.findingindex button:hover { background: var(--bg); }
.findingindex button.on { background: var(--bg); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
.findingindex .ixn { flex: 0 0 18px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.permalink { margin-left: auto; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); text-decoration: none; opacity: 0.65; }
.permalink:hover { opacity: 1; text-decoration: underline; }
.subh { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 1.75rem 0 0.6rem; }

/* ============================================================ mode + research */

.modeswitch { display: flex; gap: 0; border: 1px solid var(--text); border-radius: 0; overflow: hidden; flex: none; }
.modeswitch button { border: 0; border-radius: 0; background: transparent; padding: 7px 12px; font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.modeswitch button.on { background: var(--accent); color: #fff; }
.modeswitch button.on[data-m="public"] { background: var(--text); color: var(--bg); }
.researchbar { display: none; align-items: center; gap: 0.75rem; padding: 0.6rem 0; background: var(--accent); color: #fff; font-size: 0.86rem; }
[data-mode="research"] .researchbar { display: block; }
[data-mode="research"] .researchbar .wrap { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.researchbar b { font-weight: 700; }
.researchbar button { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); color: #fff; margin-left: auto; }

/* ================================================================= detail pane */

.detail h2 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; text-transform: none; letter-spacing: -0.01em; color: var(--text); }
.detail .empty p { color: var(--muted); font-size: 0.9rem; line-height: 1.6; margin: 0.6rem 0 1rem; }
.startlist { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.startlist button { font-size: 0.76rem; padding: 5px 9px; }
.detail h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; line-height: 1.3; margin: 0.5rem 0 0.25rem; }
.detail .kind { font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); display: flex; gap: 0.4rem; align-items: center; margin-top: 0.9rem; }
.detail .row { display: flex; gap: 1rem; margin: 0.9rem 0; }
.detail .row div { display: flex; flex-direction: column; }
.detail .row b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1; }
.detail .row span { font-size: 0.74rem; color: var(--muted); }
.detail p { font-size: 0.9rem; line-height: 1.65; margin: 0.7rem 0; }
.detail blockquote { margin: 0.9rem 0; padding: 0.75rem 1rem; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0; font-family: var(--font-display); font-size: 1rem; line-height: 1.5; }
.detail .lab { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-top: 1.25rem; }
.detail ul.evs { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; gap: 4px; }
.detail ul.evs li { padding: 0.5rem 0.6rem; background: var(--surface); border-radius: 0; font-size: 0.78rem; line-height: 1.45; cursor: pointer; display: grid; grid-template-columns: 62px 1fr; gap: 0.4rem; }
.detail ul.evs li .d { font-family: var(--font-mono); color: var(--muted); }
.detail .warn { font-size: 0.74rem; border: 1px dashed var(--muted); color: var(--muted); padding: 2px 7px; border-radius: 0; display: inline-block; }
.detail .action { border: 1px solid var(--line); border-radius: 0; padding: 0.7rem 0.9rem; font-size: 0.88rem; line-height: 1.5; margin-top: 0.6rem; }
.detail .stat { font-size: 0.72rem; font-family: var(--font-mono); white-space: nowrap; }

.tip { position: fixed; pointer-events: none; background: var(--headband); color: var(--parchment); border: 1px solid var(--accent); border-radius: 0; padding: 0.4rem 0.6rem; font-family: var(--font-mono); font-size: 0.74rem; max-width: 300px; opacity: 0; transition: opacity .12s; z-index: 60; line-height: 1.45; }
.lane-label { font-size: 10.5px; fill: var(--muted); font-family: var(--font-body); }
.axis text { fill: var(--muted); font-family: var(--font-mono); font-size: 10px; }
.axis line, .axis path { stroke: var(--line); }
.node-label { font-size: 10px; fill: var(--text); pointer-events: none; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; font-family: var(--font-body); }
.ann { font-size: 10px; fill: var(--muted); font-family: var(--font-mono); }

/* ================================================================ methodology */

.methodology { font-size: 0.95rem; line-height: 1.7; color: var(--muted); max-width: 76ch; }
.methodology h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: var(--text); margin: 1.5rem 0 0.4rem; }
.methodology p { margin: 0.6rem 0; }
.methodology ul { margin: 0.6rem 0; padding-left: 1.25rem; }
.methodology li { margin: 0.35rem 0; }
.methodology code { font-family: var(--font-mono); font-size: 0.82rem; background: var(--surface); padding: 1px 5px; }
.methodology strong { color: var(--text); font-weight: 600; }
details.meth > summary { cursor: pointer; font-family: var(--font-display); font-size: 1.2rem; min-height: 44px; display: flex; align-items: center; color: var(--text); text-transform: none; letter-spacing: 0; }

/* ==================================================================== footer */

.site-footer { background: var(--headband); color: var(--parchment); margin-top: 3rem; padding: clamp(2.5rem, 5vw, 4rem) 0 2rem; }
.footer-inner { display: grid; gap: 2rem; }
.footer-brand { display: flex; flex-direction: column; gap: 0.9rem; max-width: 46ch; }
.footer-brand .rt1-brand { color: var(--parchment); }
.footer-brand .logo { color: var(--parchment); }
.footer-blurb { margin: 0; font-size: 0.92rem; line-height: 1.6; color: rgba(245, 237, 220, 0.75); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; font-size: 0.9rem; }
.footer-nav a { color: var(--parchment); text-decoration: none; }
.footer-nav a:hover { color: var(--accent-soft); text-decoration: underline; }
.footer-legal { font-size: 0.8rem; color: rgba(245, 237, 220, 0.55); border-top: 1px solid var(--parchment-20); padding-top: 1.25rem; }
.footer-social-link { color: var(--accent-soft); text-decoration: none; font-family: var(--font-mono); font-size: 0.86rem; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--accent); color: #fff; padding: 0.6rem 1rem; }

/* =================================================================== responsive */

@media (max-width: 1200px) {
  .app { grid-template-columns: 230px minmax(0, 1fr); }
  .detail {
    position: fixed; top: 0; right: 0; bottom: 0; width: 350px; max-height: none;
    z-index: 70; transform: translateX(100%); transition: transform .2s;
    background: var(--bg); border-left: 1px solid var(--line);
    box-shadow: -8px 0 28px rgba(11, 18, 32, 0.22); padding: 1.5rem;
  }
  .detail.open { transform: none; }
}
@media (max-width: 860px) {
  /* nav before the calls to action: the reader came for the record, not the ask */
  .site-nav { order: 3; flex: 1 0 100%; }
  .header-cta { order: 4; }
  .masthead-grid { align-items: start; }
  .disclosure-aside .dlede { font-size: 1.15rem; }
}
@media (max-width: 760px) {
  /* `align-items: start` is right for the three-column spread (sticky rail at
     the top of its cell) but wrong once .app becomes a column flex container:
     start sizes each child to its own content width, so the widest card's
     min-content (969px, from the Funding header) became the page width and the
     whole document scrolled sideways at 390px. Stretch pins them to the column. */
  .app { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .side { position: static; max-height: none; order: 2; border-right: 0; border-top: 1px solid var(--line); padding: 1.5rem 0; }
  .main { order: 1; padding-bottom: 2rem; }
  .detail { width: 100%; }
  .timeline { height: 420px; }
  .network { height: 520px; }
  .statband .kpis { grid-template-columns: 1fr 1fr; }
}


/* Named-target selector: thirteen buttons, so this seg wraps rather than
   scrolling off the rail. Zero-coverage targets stay visible but disabled --
   the control must show that eleven of the twelve are thinly indexed instead of
   presenting a filter that silently returns nothing. */
.segwrap {
  flex-wrap: wrap;
  max-width: 780px;
}
.segwrap button { flex: 0 0 auto; }
.segwrap button .ct {
  margin-left: 0.35em;
  font-family: var(--font-mono);
  font-size: 0.72em;
  opacity: 0.62;
}
.segwrap button.empty {
  opacity: 0.38;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.segwrap button.empty:hover { background: none; }
.ctlnote {
  margin: 0.5rem 0 0;
  max-width: 780px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}
.vizctl-targets { min-width: 0; }


/* Section index: sticky under the header, horizontally scrollable on narrow
   screens. Kept visually quiet -- it is a utility, not a feature, and the page
   already carries enough that competes for attention. */
.secnav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.5rem 1.25rem;
  margin: 0;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: thin;
}
.secnav-lab {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 0.5rem;
}
.secnav a {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 0.3rem;
  align-items: baseline;
  padding: 0.28rem 0.5rem;
  border-radius: 2px;
  font-size: 0.74rem;
  line-height: 1.2;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.secnav a b { font-family: var(--font-mono); font-size: 0.68rem; opacity: 0.7; }
.secnav a:hover { color: var(--text); background: var(--surface); }
.secnav a.on { color: var(--text); background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
@media (max-width: 760px) { .secnav { padding: 0.4rem 0.75rem; } .secnav-lab { display: none; } }

/* ---------------------------------------------------------------- embed view (?embed=map) */
html.embed-map body { background: var(--bg); }
html.embed-map .site-header, html.embed-map .researchbar, html.embed-map .masthead, html.embed-map .statband,
html.embed-map .proofs, html.embed-map .secnav, html.embed-map .site-footer, html.embed-map .disclosure-aside,
html.embed-map .viz-head, html.embed-map .card.viz[data-sec="01"], html.embed-map .app > .side, html.embed-map .app > .main,
html.embed-map .vizctl-g:not(:has(#fundSeg)) { display: none !important; }
html.embed-map .vizband { padding: 0.5rem 0 0; margin: 0; }
html.embed-map .vizband .wrap { max-width: none; padding: 0 0.75rem; }
html.embed-map .vizctl { margin: 0 0 0.5rem; padding: 0; border: 0; }
html.embed-map .card.viz { margin: 0; }
html.embed-map .card.viz .network { height: calc(100vh - 210px); min-height: 420px; }
html.embed-map .app { display: block; }
html.embed-map .detail { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); max-height: none;
  background: var(--bg); z-index: 60; padding: 1.25rem; border-left: 1px solid var(--line); box-shadow: -12px 0 30px rgba(0,0,0,.18); }
html.embed-map .detail.open { display: block; }