/* =============================================================================
Paperclip Index · design system (pi.css)
-----------------------------------------------------------------------------
Evolved from the approved v2 mockup (docs/paperclip-index/mockups/v2/pi.css).
Shared by every page of the site. Load with:
...
And, first thing in , restore the saved theme before paint:
Contents (search for the numbered banners):
01 Tokens: light theme (bare :root) 02 Tokens: dark theme
03 Base + type scale 04 Layout primitives
05 Test-site banner 06 Masthead, dateline, nav, theme toggle, index ticker
07 Section heads, kickers, rules 08 Stamps (severity, setting, verification, attribution)
09 Chips, switches, buttons, badges 10 Story blocks (lead, teasers, headline strip, callout)
11 The count column: index card + meters 12 Figures and chart text
13 Tooltip 14 Table view (chart fallback) + data tables
15 Ladder (what the number means) 16 Incident log
17 Misquote Field Lab panel 18 Methodology teaser, newsletter, footer
19 Site pages (log, filters, teasers) 20 Utilities, motion, print
Color rules
- Ink and warm-neutral greys carry all text. Chart marks carry meaning colors;
text next to a mark stays in ink (identity comes from the swatch, not the text).
- Cobalt (--accent) is the brand accent: wordmark glyph, focus ring, one key
link per block. It doubles as the "Real world" setting color on purpose.
- --danger-1..5 is ONE scale shared by severity 1-5 and the index bands
Calm..Critical. Revised 30 Sep 2026 (owner's pick, "Slate to signal"):
Calm and Guarded are quiet steel greys, and color arrives only at Elevated
(ochre), turning vermilion and then crimson at the top, so ordinary weeks
look sober and red keeps its force. It replaces the all-warm marigold ->
crimson ramp. It is a status scale rather than a one-hue ramp, which is safe
only because every chip, stamp and tile also prints the level's number and
name. Validated with dataviz validate_palette.py --ordinal in both themes:
lightness falls monotonically, adjacent dL >= .06, the light end clears 2:1
on white; adjacent CVD separation 8.2 light / 6.8 dark (labels required, and
present). The greys are held near neutral (chroma <= .03) so they stay apart
from the cobalt setting scale; the nearest pair, level 1 against
"Controlled test", is never confused because test is always hatched.
Text on a fill uses --on-danger-N (>= 4.5:1). scripts/palette_options.py
shows the alternatives that were considered.
light on #ffffff danger #aab6c2 #8594a4 #ad7000 #b13500 #890024 (light end 2.06:1)
dark on #131312 danger #d0dce9 #b0c0d1 #da993e #e56636 #c34652 (dark end 3.82:1)
- --set-real / --set-lab / --set-test: one-hue cobalt ordinal ramp (validated),
test is always drawn hatched (.sw--test / PI.hatch(svg)).
- --ver-1..4: neutral ordinal ramp for verification strength (validated);
unverified always also gets a dotted edge.
- Validation (dataviz validate_palette.js --ordinal), all PASS in both themes:
setting light #1844b9 #5d83d4 #94aee1 · dark #81a9fd #5277c7 #38538d
verification light #2f2c28 #5f5a52 #8a847a #b5afa3 · dark #ece9e2 #b5b0a6 #827d74 #5a5751
- --mq-*: Misquote Field Lab teal, only inside Field Lab surfaces.
========================================================================== */
/* ---------------------------------------------------------------------------
01 Tokens: light theme
------------------------------------------------------------------------ */
:root {
color-scheme: light;
/* Paper and ink (warm neutrals) */
--paper: #ffffff; /* page */
--paper-2: #f6f5f2; /* quiet panels, table stripes */
--paper-3: #ebe9e4; /* tracks, pressed states */
--ink: #121212; /* headlines, values */
--ink-2: #3d3a35; /* body copy, secondary labels */
--ink-3: #69655d; /* meta, axis text (5.6:1 on paper) */
--ink-4: #99948a; /* decorative only, never text */
--rule: #e3e0da; /* hairlines */
--rule-strong: #bdb8ae; /* control borders, axis baselines */
--grid: #ebe8e3; /* chart gridlines */
--on-ink: #ffffff;
/* Brand accent: cobalt, used sparingly */
--accent: #1844b9;
--accent-ink: #1844b9; /* accent as text (7.6:1) */
--focus: #1844b9;
/* Danger ramp: severity 1-5 = bands Calm, Guarded, Elevated, High, Critical */
--danger-1: #aab6c2; /* pale slate L .77 */
--danger-2: #8594a4; /* slate L .66 */
--danger-3: #ad7000; /* ochre L .60 */
--danger-4: #b13500; /* vermilion L .51 */
--danger-5: #890024; /* crimson L .40 */
--on-danger-1: #121212;
--on-danger-2: #121212;
--on-danger-3: #121212; /* 4.5:1 */
--on-danger-4: #ffffff;
--on-danger-5: #ffffff;
--ctl-band: #4a4a9e; /* control failures only (readings 2-5): its own hue, never the harm ramp */
--on-ctl-band: #ffffff;
--band-tint: .13; /* opacity of band shading behind charts */
/* Setting scale: real world strongest, lab mid, test hatched */
--set-real: #1844b9;
--on-real: #ffffff;
--set-lab: #5d83d4;
--set-test: #94aee1;
--set-test-bg: #dfe6f6; /* hatch ground */
/* Verification ramp (neutral ink, strongest = darkest) */
--ver-1: #2f2c28; /* developer confirmed */
--ver-2: #5f5a52; /* multiple credible sources */
--ver-3: #8a847a; /* single source */
--ver-4: #b5afa3; /* unverified claim (always with dotted edge) */
/* Misquote Field Lab teal */
--mq: #0b7268;
--mq-strong: #075a53;
--mq-bg: #eef6f4;
--mq-surface: #ffffff;
--mq-line: #bcdcd5;
--mq-grid: rgba(11, 114, 104, .08);
--mq-track: #d3e8e3;
/* Bands and overlays */
--nl-bg: #121212;
--nl-ink: #ffffff;
--nl-muted: #c9c5bc;
--tip-bg: #ffffff;
--shadow-tip: 0 1px 2px rgba(18, 18, 18, .08), 0 8px 24px rgba(18, 18, 18, .14);
--shadow-bar: 0 2px 12px rgba(18, 18, 18, .16);
/* Type families (every family has a real fallback stack) */
--f-serif: "Newsreader", "Source Serif 4", "Source Serif Pro", Georgia, Cambria, "Times New Roman", serif;
--f-sans: "Libre Franklin", "Franklin Gothic Medium", "Franklin Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
--f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
/* Type scale (px at desktop; clamp() keeps phone sizes legible) */
--fs-display: clamp(34px, 4.3vw, 60px); /* lead headline */
--fs-h1: clamp(28px, 3.1vw, 42px); /* headline strip, page titles */
--fs-h2: clamp(25px, 2.4vw, 34px); /* section heads (serif) */
--fs-h3: clamp(18px, 1.5vw, 21px); /* chart titles, card heads (sans bold) */
--fs-h4: 18px; /* teasers, log entries (serif) */
--fs-dek: clamp(18px, 1.55vw, 21px); /* deks (serif) */
--fs-body: 18px; /* reading copy (serif) */
--fs-ui: 15px; /* UI and chart subtitles (sans) */
--fs-sm: 14px; /* meta, table cells */
--fs-xs: 13px; /* labels, sources, chart annotations */
--fs-kicker: 12px; /* uppercase kickers, axis ticks */
--fs-figure: clamp(76px, 8vw, 104px); /* the index number (sans, proportional) */
/* Spacing scale */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
--sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 88px;
/* Layout */
--maxw: 1240px;
--gutter: clamp(16px, 3vw, 40px);
--col-count: 372px; /* width of The count column */
--radius: 2px;
}
/* ---------------------------------------------------------------------------
02 Tokens: dark theme (OS preference unless the reader chose light, and the
explicit toggle). Keep the two blocks identical.
------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--paper: #131312; --paper-2: #1b1b1a; --paper-3: #262624;
--ink: #f1efea; --ink-2: #cdc9c0; --ink-3: #a09b91; --ink-4: #6d6962;
--rule: #2c2b28; --rule-strong: #4a4843; --grid: #242422; --on-ink: #131312;
--accent: #81a9fd; --accent-ink: #9dbcff; --focus: #9dbcff;
--danger-1: #d0dce9; --danger-2: #b0c0d1; --danger-3: #da993e; --danger-4: #e56636; --danger-5: #c34652;
--on-danger-1: #131312; --on-danger-2: #131312; --on-danger-3: #131312; --on-danger-4: #131312; --on-danger-5: #ffffff;
--ctl-band: #a3a2ec; --on-ctl-band: #131312;
--band-tint: .13;
--set-real: #81a9fd; --on-real: #131312; --set-lab: #5277c7; --set-test: #38538d; --set-test-bg: #1d2640;
--ver-1: #ece9e2; --ver-2: #b5b0a6; --ver-3: #827d74; --ver-4: #5a5751;
--mq: #5cc2b3; --mq-strong: #8fdccf; --mq-bg: #10262a; --mq-surface: #152f33; --mq-line: #24504f; --mq-grid: rgba(92, 194, 179, .07); --mq-track: #1d3d40;
--nl-bg: #202b45; --nl-ink: #f1efea; --nl-muted: #b9c2d6;
--tip-bg: #222220;
--shadow-tip: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .5);
--shadow-bar: 0 2px 14px rgba(0, 0, 0, .55);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--paper: #131312; --paper-2: #1b1b1a; --paper-3: #262624;
--ink: #f1efea; --ink-2: #cdc9c0; --ink-3: #a09b91; --ink-4: #6d6962;
--rule: #2c2b28; --rule-strong: #4a4843; --grid: #242422; --on-ink: #131312;
--accent: #81a9fd; --accent-ink: #9dbcff; --focus: #9dbcff;
--danger-1: #d0dce9; --danger-2: #b0c0d1; --danger-3: #da993e; --danger-4: #e56636; --danger-5: #c34652;
--on-danger-1: #131312; --on-danger-2: #131312; --on-danger-3: #131312; --on-danger-4: #131312; --on-danger-5: #ffffff;
--ctl-band: #a3a2ec; --on-ctl-band: #131312;
--band-tint: .13;
--set-real: #81a9fd; --on-real: #131312; --set-lab: #5277c7; --set-test: #38538d; --set-test-bg: #1d2640;
--ver-1: #ece9e2; --ver-2: #b5b0a6; --ver-3: #827d74; --ver-4: #5a5751;
--mq: #5cc2b3; --mq-strong: #8fdccf; --mq-bg: #10262a; --mq-surface: #152f33; --mq-line: #24504f; --mq-grid: rgba(92, 194, 179, .07); --mq-track: #1d3d40;
--nl-bg: #202b45; --nl-ink: #f1efea; --nl-muted: #b9c2d6;
--tip-bg: #222220;
--shadow-tip: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .5);
--shadow-bar: 0 2px 14px rgba(0, 0, 0, .55);
}
/* ---------------------------------------------------------------------------
03 Base + type scale
------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
margin: 0; background: var(--paper); color: var(--ink);
font-family: var(--f-sans); font-size: var(--fs-ui); line-height: 1.5;
font-variant-numeric: tabular-nums lining-nums;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 1px; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
::selection { background: var(--set-test); color: var(--ink); }
/* Type roles. Serif = headlines + reading copy. Sans = labels, UI, charts, figures. Mono = incident IDs only. */
.t-display { font-family: var(--f-serif); font-size: var(--fs-display); font-weight: 600; line-height: 1.03; letter-spacing: -.015em; font-optical-sizing: auto; text-wrap: balance; }
.t-h1 { font-family: var(--f-serif); font-size: var(--fs-h1); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
.t-h2 { font-family: var(--f-serif); font-size: var(--fs-h2); font-weight: 600; line-height: 1.12; letter-spacing: -.008em; text-wrap: balance; }
.t-h3 { font-family: var(--f-sans); font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; letter-spacing: -.006em; text-wrap: balance; }
.t-dek { font-family: var(--f-serif); font-size: var(--fs-dek); line-height: 1.42; color: var(--ink-2); font-weight: 400; }
.t-body { font-family: var(--f-serif); font-size: var(--fs-body); line-height: 1.55; color: var(--ink-2); }
.t-meta { font-size: var(--fs-sm); color: var(--ink-3); }
.t-meta b { color: var(--ink-2); font-weight: 600; }
.kicker { font-family: var(--f-sans); font-size: var(--fs-kicker); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); line-height: 1.3; }
.kicker--muted { color: var(--ink-3); }
.kicker--accent { color: var(--accent-ink); }
.id { font-family: var(--f-mono); font-size: .92em; font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.num-prop { font-variant-numeric: proportional-nums lining-nums; }
.timestamp { font-size: var(--fs-xs); color: var(--ink-3); }
.timestamp b { color: var(--ink-2); font-weight: 600; }
.more-link { font-family: var(--f-sans); font-weight: 700; font-size: var(--fs-sm); color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--accent); padding-bottom: 1px; }
.more-link:hover { border-bottom-width: 3px; }
/* ---------------------------------------------------------------------------
04 Layout primitives
------------------------------------------------------------------------ */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.sec { margin-top: var(--sp-9); }
.sec--tight { margin-top: var(--sp-7); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-7); }
.grid-main-rail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-6) clamp(28px, 4vw, 56px); align-items: start; }
.stack > * + * { margin-top: var(--sp-4); }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.rule--ink { border-top-color: var(--ink); }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
@media (max-width: 1040px) {
.grid-main-rail { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
.grid-2 { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
.sec { margin-top: var(--sp-8); }
}
/* ---------------------------------------------------------------------------
05 Test-site banner (every page): slim, calm, one line on desktop
------------------------------------------------------------------------ */
.notices { background: var(--paper-2); border-bottom: 1px solid var(--rule); color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.45; }
.testbar { color: var(--ink-2); font-size: var(--fs-xs); }
.testbar .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding-block: 7px 0; }
.testbar__tag { font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.testbar__items span + span::before { content: "·"; margin: 0 7px; color: var(--ink-4); }
.testbar__items span { white-space: nowrap; }
.testbar__items { display: inline-flex; flex-wrap: wrap; row-gap: 1px; }
.testbar--fixture .testbar__tag { color: var(--danger-4); }
@media (max-width: 520px) {
.notices { font-size: 12px; }
.testbar__items span:nth-child(n+2) { display: none; }
.testbar__items span { white-space: normal; }
}
/* ---------------------------------------------------------------------------
06 Masthead, dateline, nav, theme toggle
------------------------------------------------------------------------ */
.masthead { border-bottom: 1px solid var(--ink); }
.masthead__top { display: flex; justify-content: space-between; align-items: baseline; gap: 2px 18px; flex-wrap: wrap; padding-block: 10px 0; font-size: var(--fs-xs); line-height: 1.4; color: var(--ink-3); }
.masthead__top b { color: var(--ink); font-weight: 700; }
.masthead__row { display: flex; align-items: center; gap: 10px 28px; flex-wrap: wrap; padding-block: 12px 14px; }
.masthead__tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* Wordmark: gem-clip glyph (one wire, two loops) + "Paperclip Index" in the news serif */
.pc { display: block; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; overflow: visible; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.wordmark .pc { width: 16px; height: 32px; color: var(--accent); transform: rotate(-9deg); }
.wordmark__name { font-family: var(--f-serif); font-size: 31px; font-weight: 700; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.wordmark__name span { font-weight: 400; }
.wordmark:hover .wordmark__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.wordmark--sm .pc { width: 10px; height: 20px; stroke-width: 2.2; }
.wordmark--sm .wordmark__name { font-size: 20px; }
.nav { display: flex; flex-wrap: wrap; gap: 0 2px; margin: 0; padding: 0; list-style: none; }
.nav a { display: block; padding: 8px 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; border-radius: var(--radius); }
.nav a:hover { color: var(--ink); background: var(--paper-2); }
.nav a[aria-current="page"], .nav a.is-current { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); border-radius: 0; }
.btn { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: transparent; color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--paper-2); border-color: var(--ink-3); }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn-solid, .btn-line { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1px solid var(--ink); border-radius: var(--radius); font-size: 14px; font-weight: 700; text-decoration: none; }
.btn-solid { background: var(--ink); color: var(--on-ink); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-solid:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn-line:hover { background: var(--paper-2); border-color: var(--ink-3); }
.theme-toggle .theme-toggle__label { min-width: 3.2em; text-align: left; }
@media (max-width: 960px) {
.masthead__row nav { order: 3; flex: 1 0 100%; border-top: 1px solid var(--rule); padding-top: 4px; }
.nav { margin-inline: -10px; }
}
@media (max-width: 520px) {
.masthead__top { padding-top: 8px; font-size: 12px; }
.masthead__row { padding-block: 8px 10px; }
.wordmark__name { font-size: 26px; }
.wordmark .pc { width: 14px; height: 28px; }
.nav { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; }
.nav a { padding: 8px 10px; font-size: 13.5px; }
}
/* Index ticker: one-line current reading under the masthead (any page).
Paperclip Index62
High▲ 4 from last week
Add .ticker--phone to show it only below 900px (the front page shows the full index card instead). */
.ticker { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.ticker .band-chip { margin-top: 0; font-size: 11px; padding: 3px 7px 2px; }
.ticker__num { font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: proportional-nums lining-nums; }
.ticker__delta { font-size: 13px; color: var(--ink-2); }
.ticker__more { margin-left: auto; font-size: 13px; font-weight: 700; border-bottom: 1.5px solid var(--accent); }
@media (min-width: 901px) { .ticker--phone { display: none; } }
@media (max-width: 440px) { .ticker__more { display: none; } }
@media (max-width: 520px) { .ticker__what { display: none; } .ticker__delta { flex: 1 0 100%; } }
/* ---------------------------------------------------------------------------
07 Section heads, kickers, rules
------------------------------------------------------------------------ */
.sec-head { border-top: 1px solid var(--ink); padding-top: 12px; margin-bottom: var(--sp-5); display: grid; gap: 6px; }
.sec-head--thick { border-top-width: 3px; padding-top: 14px; }
.sec-head .t-h2 { max-width: 30ch; }
.sec-head__dek { font-family: var(--f-serif); font-size: 18px; line-height: 1.45; color: var(--ink-2); max-width: 64ch; }
.label-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
/* ---------------------------------------------------------------------------
08 Stamps. Grammar:
- FILL means real world (only the Real world setting stamp is filled).
- BORDER STYLE means verification strength: double = developer confirmed,
solid = multiple credible sources, dashed = single source, dotted = unverified.
- Severity is a level tile on the danger ramp plus the level name (no border).
- Attribution is plain text ("Initiated by Model").
Markup (PI.stamps() writes this):
4Severe
Real world
Developer confirmed
Initiated by Model
------------------------------------------------------------------------ */
.stamps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.stamp {
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
font-family: var(--f-sans); font-size: 11.5px; font-weight: 700; line-height: 1; letter-spacing: .065em; text-transform: uppercase;
padding: 5px 7px 4px; border: 1.5px solid transparent; border-radius: var(--radius); color: var(--ink-2); background: transparent;
}
.stamp--sev { padding-left: 0; padding-right: 2px; color: var(--ink); gap: 7px; }
.stamp__lvl { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-block: -4px -3px; border-radius: var(--radius); font-size: 12px; letter-spacing: 0; font-weight: 800; }
.stamp--sev[data-sev="1"] .stamp__lvl { background: var(--danger-1); color: var(--on-danger-1); }
.stamp--sev[data-sev="2"] .stamp__lvl { background: var(--danger-2); color: var(--on-danger-2); }
.stamp--sev[data-sev="3"] .stamp__lvl { background: var(--danger-3); color: var(--on-danger-3); }
.stamp--sev[data-sev="4"] .stamp__lvl { background: var(--danger-4); color: var(--on-danger-4); }
.stamp--sev[data-sev="5"] .stamp__lvl { background: var(--danger-5); color: var(--on-danger-5); }
.stamp--real { background: var(--set-real); border-color: var(--set-real); color: var(--on-real); }
.stamp--lab { border-color: var(--set-lab); color: var(--ink-2); }
.stamp--test { border-color: var(--set-test); color: var(--ink-3); }
.stamp--v1 { border-style: double; border-width: 4px; padding: 3px 6px 2px; border-color: var(--ink-2); color: var(--ink); }
.stamp--v2 { border-style: solid; border-color: var(--ink-2); color: var(--ink); }
.stamp--v3 { border-style: dashed; border-color: var(--ink-3); color: var(--ink-2); }
.stamp--v4 { border-style: dotted; border-width: 2px; border-color: var(--ink-3); color: var(--ink-3); }
.stamp--attr { padding-inline: 2px; color: var(--ink-3); }
.stamp--attr b { color: var(--ink); font-weight: 800; }
.stamp--note { padding-inline: 2px; color: var(--ink-3); font-weight: 600; letter-spacing: .03em; text-transform: none; font-size: 12.5px; }
/* Swatches (legend keys, stamp keys). Test is always hatched. */
.sw { display: inline-block; width: 11px; height: 11px; flex: none; border-radius: 1px; vertical-align: -1px; }
.sw--real { background: var(--set-real); }
.sw--lab { background: var(--set-lab); }
.sw--test, .hatch-test { background: repeating-linear-gradient(135deg, var(--set-test-bg) 0 2px, var(--set-test) 2px 4px); }
.sw--d1 { background: var(--danger-1); } .sw--d2 { background: var(--danger-2); } .sw--d3 { background: var(--danger-3); }
.sw--d4 { background: var(--danger-4); } .sw--d5 { background: var(--danger-5); }
.sw--v1 { background: var(--ver-1); } .sw--v2 { background: var(--ver-2); } .sw--v3 { background: var(--ver-3); }
.sw--v4 { background: var(--ver-4); outline: 1.5px dotted var(--ink-3); outline-offset: -1.5px; }
.sw--other { background: var(--paper-3); outline: 1px solid var(--rule-strong); outline-offset: -1px; }
.sw--line { width: 16px; height: 2px; border-radius: 1px; vertical-align: 3px; background: var(--ink); }
/* ---------------------------------------------------------------------------
09 Chips, switches, buttons, badges
------------------------------------------------------------------------ */
/* Behavior chip (a label, not a control) */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: 3px 8px; white-space: nowrap; line-height: 1.3; }
/* Filter chip (a toggle button) */
.chip-btn { display: inline-flex; align-items: baseline; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 6px 10px; cursor: pointer; min-height: 34px; }
.chip-btn .n { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.chip-btn:hover { border-color: var(--ink-2); color: var(--ink); }
.chip-btn[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.chip-btn[aria-pressed="true"] .n { color: inherit; opacity: .75; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
/* Segmented toggle (two or three options) */
.seg { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 2px; gap: 2px; background: var(--paper); }
.seg button { border: 0; background: transparent; padding: 5px 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; border-radius: 1px; min-height: 30px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
/* Switch (role="switch") */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; background: none; border: 0; padding: 4px 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.switch__track { width: 38px; height: 22px; border-radius: 11px; background: var(--rule-strong); position: relative; flex: none; transition: background .15s; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.switch[aria-checked="true"] .switch__track { background: var(--set-real); }
.switch[aria-checked="true"] .switch__track::after { transform: translateX(16px); }
/* Quotes-checked badge (Misquote teal) */
.qbadge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--mq-strong); background: var(--mq-bg); border: 1px solid var(--mq-line); padding: 3px 9px 3px 7px; border-radius: var(--radius); white-space: nowrap; text-decoration: none; line-height: 1.4; }
.qbadge svg { width: 14px; height: 14px; flex: none; }
.qbadge--no { color: var(--ink-3); background: transparent; border-color: var(--rule); font-weight: 500; }
/* Counted / not counted note */
.counted { font-size: 12.5px; color: var(--ink-3); display: inline-flex; gap: 6px; align-items: baseline; }
.counted b { color: var(--ink); font-weight: 700; }
.counted--no { font-style: italic; }
/* ---------------------------------------------------------------------------
10 Story blocks: lead, teasers, headline strip, "What this means" callout
------------------------------------------------------------------------ */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) var(--col-count); gap: var(--sp-6) clamp(28px, 4vw, 60px); padding-top: var(--sp-6); align-items: start; }
.lead { min-width: 0; }
.lead__kicker { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 14px; }
.lead__kicker .t-meta { font-size: 13px; }
.lead h1 a { text-decoration: none; }
.lead h1 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.lead .t-dek { margin: 16px 0 18px; max-width: 60ch; }
.lead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; font-size: var(--fs-sm); color: var(--ink-3); }
.lead__meta b { color: var(--ink-2); font-weight: 600; }
/* Why-severity box: the two rating axes, the higher one wins */
.axes { margin-top: 20px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.axes > div { padding: 12px 16px 13px 0; min-width: 0; }
.axes > div + div { padding-left: 16px; border-left: 1px solid var(--rule); }
.axes dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.axes dd { margin-top: 5px; font-family: var(--f-serif); font-size: 16.5px; line-height: 1.42; color: var(--ink-2); }
.axes .is-decisive dt { color: var(--ink); }
.axes .is-decisive dd { color: var(--ink); }
.axes__verdict { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding: 10px 0 11px !important; border-left: 0 !important; font-size: 14px; color: var(--ink-2); }
.axes__verdict b { color: var(--ink); }
@media (max-width: 560px) {
.axes { grid-template-columns: minmax(0, 1fr); }
.axes > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
}
.also { margin-top: var(--sp-6); border-top: 1px solid var(--ink); padding-top: 10px; }
.also__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin-top: 12px; }
.teaser { min-width: 0; padding-right: 4px; }
.teaser + .teaser { border-left: 1px solid var(--rule); padding-left: 20px; }
.teaser h3 { font-family: var(--f-serif); font-size: var(--fs-h4); font-weight: 600; line-height: 1.25; margin: 6px 0 10px; text-wrap: pretty; }
.teaser h3 a { text-decoration: none; }
.teaser h3 a:hover { text-decoration: underline; }
@media (max-width: 1100px) {
.hero { grid-template-columns: minmax(0, 1fr) 340px; }
.also__grid { grid-template-columns: minmax(0, 1fr); }
.teaser { padding-block: 12px; }
.teaser + .teaser { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 900px) {
.hero { grid-template-columns: minmax(0, 1fr); }
}
/* Headline strip: the week's computed news line, full width */
.strip { margin-top: var(--sp-8); border-top: 3px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 16px 0 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px clamp(24px, 4vw, 56px); align-items: end; }
.strip .t-h1 { max-width: 22ch; margin-top: 8px; }
.strip .t-dek { font-size: 19px; }
.strip .timestamp { margin-top: 10px; display: block; }
@media (max-width: 900px) { .strip { grid-template-columns: minmax(0, 1fr); } }
/* "What this means" callout: a quiet boxed note beside or under a chart */
.callout { background: var(--paper-2); border-top: 2px solid var(--ink); padding: 14px 18px 16px; }
.callout .kicker { margin-bottom: 6px; }
.callout p:not(.kicker) { font-family: var(--f-serif); font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.callout p + p { margin-top: 8px; }
.callout b { color: var(--ink); font-weight: 600; }
/* ---------------------------------------------------------------------------
11 The count column: index card + meters
------------------------------------------------------------------------ */
.count { min-width: 0; border-top: 3px solid var(--ink); }
.count__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 0 10px; border-bottom: 1px solid var(--rule); }
.count__head h2 { font-family: var(--f-serif); font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.count__head span { font-size: 12.5px; color: var(--ink-3); text-align: right; line-height: 1.35; }
/* Index card: the overall summary indicator */
.index-card { padding: 16px 0 18px; border-bottom: 1px solid var(--ink); }
.index-card__label { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.gauge { display: block; width: 100%; max-width: 360px; height: auto; margin: 6px auto 0; overflow: visible; }
.gauge .g-tick { font-family: var(--f-sans); font-size: 11px; fill: var(--ink-3); }
.gauge .g-needle { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.gauge .g-hub { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
.gauge .g-ghost { stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; }
.gauge .g-ghost-t { font-family: var(--f-sans); font-size: 11px; fill: var(--ink-3); }
.index-card__readout { display: flex; flex-direction: column; align-items: center; margin-top: -8px; }
.index-card__num { font-family: var(--f-sans); font-size: var(--fs-figure); font-weight: 800; line-height: .9; letter-spacing: -.045em; font-variant-numeric: proportional-nums lining-nums; color: var(--ink); }
.band-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px 3px; border-radius: var(--radius); }
.band-chip[data-band="0"] { background: var(--danger-1); color: var(--on-danger-1); }
.band-chip[data-band="1"] { background: var(--danger-2); color: var(--on-danger-2); }
.band-chip[data-band="2"] { background: var(--danger-3); color: var(--on-danger-3); }
.band-chip[data-band="3"] { background: var(--danger-4); color: var(--on-danger-4); }
.band-chip[data-band="4"], .band-chip[data-band="5"] { background: var(--danger-5); color: var(--on-danger-5); }
.band-chip[data-band="c"] { background: var(--ctl-band); color: var(--on-ctl-band); }
.index-card__delta { margin-top: 12px; text-align: center; font-size: 15px; color: var(--ink-2); }
.index-card__delta b { color: var(--ink); font-weight: 700; }
.index-card__driver { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); font-family: var(--f-serif); font-size: 16.5px; line-height: 1.45; color: var(--ink-2); }
.index-card__driver b { color: var(--ink); font-weight: 600; }
.index-card__more { margin-top: 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
/* Meter: label, big value, small unit, a chart (spark/bar), footnote */
.meter { padding: 14px 0 15px; border-bottom: 1px solid var(--rule); }
.meter__label { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.meter__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: end; }
.meter__value { display: flex; flex-direction: column; line-height: 1; }
.meter__value b { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: .95; font-variant-numeric: proportional-nums lining-nums; }
.meter__value span { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; white-space: nowrap; }
.meter__foot { margin-top: 8px; font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.meter__foot b { color: var(--ink-2); font-weight: 700; }
.meter__legend { display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: 12.5px; color: var(--ink-3); margin-top: 8px; }
.meter__legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.meter__legend b { font-weight: 700; color: var(--ink); }
.meter__note { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--ink-2); padding: 7px 9px; background: var(--paper-2); border-left: 2px dotted var(--ink-3); }
.meter__note .id { font-size: 12px; }
.track { position: relative; height: 10px; background: var(--paper-3); display: flex; gap: 2px; margin-top: 10px; }
.track > i { display: block; height: 100%; }
.track > i:last-child { border-radius: 0 2px 2px 0; }
.cmp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 5px 10px; align-items: center; font-size: 12.5px; color: var(--ink-3); }
.cmp__bar { height: 9px; background: var(--ink-4); border-radius: 0 2px 2px 0; }
.cmp__bar--now { background: var(--ink); }
.cmp b { font-weight: 700; color: var(--ink); text-align: right; }
.count__foot { padding: 12px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.45; }
/* Sparkline (PI.sparkline) */
.spark { display: block; overflow: visible; }
.spark .sp-bar { fill: var(--ink-4); }
.spark .sp-bar.is-now { fill: var(--ink); }
.spark .sp-line { fill: none; stroke: var(--ink-3); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.spark .sp-dot { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
.spark .sp-t { font-family: var(--f-sans); font-size: 11px; fill: var(--ink-3); }
.spark .sp-hit { fill: transparent; }
.spark .sp-base { stroke: var(--rule-strong); stroke-width: 1; }
.spark .sp-hit:hover + .sp-bar, .spark .sp-hit:focus + .sp-bar { fill: var(--ink-2); }
/* ---------------------------------------------------------------------------
12 Figures and chart text
...
Finding as a sentence
What is plotted, units, window
...
Source: ...
...
------------------------------------------------------------------------ */
.fig { min-width: 0; }
.fig__title { margin-top: 4px; max-width: 46ch; }
.fig__sub { margin-top: 6px; font-size: var(--fs-ui); line-height: 1.45; color: var(--ink-2); max-width: 62ch; }
.fig__controls { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 14px; }
.fig__source { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Line key for the reading charts: the reading is a solid ink line, the 30-day average a thinner dashed muted one. */
.legend--lines { margin: 10px 0 0; }
.legend .lg { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--ink); }
.legend .lg--avg { border-top: 1.5px dashed var(--ink-3); }
.chart { position: relative; margin-top: 14px; min-width: 0; }
.chart svg { display: block; overflow: visible; font-family: var(--f-sans); }
.chart .c-grid { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart .c-base { stroke: var(--rule-strong); stroke-width: 1; shape-rendering: crispEdges; }
.chart .c-ax { font-size: 12px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart .c-ax--strong { fill: var(--ink-2); font-weight: 600; }
.chart .c-band-t { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; fill: var(--ink-3); }
.chart .c-band-t.is-now { fill: var(--ink); }
.chart .c-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .c-dot { stroke: var(--paper); stroke-width: 2; }
/* The 30-day average: context only, clearly under the reading line (thinner, dashed, muted, no markers). */
.chart .c-avg { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 5 4; stroke-linejoin: round; stroke-linecap: butt; pointer-events: none; }
.chart .c-anno { font-size: 13px; fill: var(--ink-2); }
/* Annotation text gets a paper halo so it stays legible where it crosses a line or band */
.chart .c-anno, .chart .c-anno-b, .chart .c-anno-big { paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.chart .c-anno-b { font-size: 13px; font-weight: 700; fill: var(--ink); }
.chart .c-anno-big { font-size: 22px; font-weight: 800; fill: var(--ink); letter-spacing: -.02em; }
.chart .c-leader { stroke: var(--ink-3); stroke-width: 1; fill: none; }
.chart .c-marker { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.chart .c-marker-t { font-size: 11px; font-weight: 800; fill: var(--ink); }
.chart .c-cross { stroke: var(--ink-3); stroke-width: 1; shape-rendering: crispEdges; pointer-events: none; }
.chart .c-hit { fill: transparent; cursor: default; }
.chart .c-mark { transition: opacity .12s; }
.chart .is-dim .c-mark, .chart .c-mark.is-dim { opacity: .35; }
.chart .c-focus { fill: none; stroke: var(--focus); stroke-width: 2; }
.chart .c-inlabel { font-size: 12px; font-weight: 700; }
.chart [tabindex]:focus { outline: none; }
.chart [tabindex]:focus-visible .c-hit, .chart .c-hit:focus-visible { stroke: var(--focus); stroke-width: 2; }
.chart-keys { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); counter-reset: none; }
.chart-keys li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; line-height: 1.4; }
.chart-keys .mk { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ink); font-size: 11px; font-weight: 800; color: var(--ink); background: var(--paper); }
.chart-keys b { color: var(--ink); font-weight: 700; }
/* ---------------------------------------------------------------------------
13 Tooltip (one per page, created by PI.tip). Values lead, labels follow.
------------------------------------------------------------------------ */
.pi-tip { position: fixed; z-index: 60; left: 0; top: 0; pointer-events: none; min-width: 180px; max-width: min(300px, calc(100vw - 24px));
background: var(--tip-bg); color: var(--ink); border: 1px solid var(--rule-strong); box-shadow: var(--shadow-tip);
padding: 10px 12px 11px; font-size: 13px; line-height: 1.35; opacity: 0; transform: translateY(3px); transition: opacity .1s, transform .1s; }
.pi-tip.is-on { opacity: 1; transform: none; }
.pi-tip__title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.pi-tip__big { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.pi-tip__big small { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-left: 6px; color: var(--ink-2); }
.pi-tip table { border-collapse: collapse; width: 100%; margin-top: 4px; }
.pi-tip td { padding: 2px 0; color: var(--ink-3); vertical-align: baseline; }
.pi-tip td.v { text-align: right; font-weight: 700; color: var(--ink); padding-left: 14px; white-space: nowrap; }
.pi-tip .k { display: inline-block; width: 12px; height: 3px; border-radius: 1px; vertical-align: middle; margin-right: 7px; }
.pi-tip__note { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--rule); color: var(--ink-2); }
/* ---------------------------------------------------------------------------
14 Table view (every chart's accessible twin) + data tables
------------------------------------------------------------------------ */
details.table-view { margin-top: 12px; font-size: 14px; }
details.table-view > summary { cursor: pointer; font-weight: 700; color: var(--ink); width: max-content; max-width: 100%; list-style: none; display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; }
details.table-view > summary::-webkit-details-marker { display: none; }
details.table-view > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-right: 2px; }
details.table-view[open] > summary::before { transform: rotate(45deg); }
/* Disclosure: a plain with a chevron, for notes and long tables */
details.disclosure > summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--ink); }
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-right: 2px; }
details.disclosure[open] > summary::before { transform: rotate(45deg); }
.dtable { border-collapse: collapse; width: 100%; font-size: 13.5px; margin-top: 8px; }
.dtable caption { text-align: left; font-size: 12.5px; color: var(--ink-3); padding-bottom: 6px; }
.dtable th, .dtable td { padding: 7px 12px 7px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: baseline; }
.dtable th { font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; border-bottom-color: var(--ink); white-space: nowrap; }
.dtable :where(tbody) th[scope="row"] { font-size: inherit; font-weight: 600; color: var(--ink); letter-spacing: 0; white-space: normal; border-bottom-color: var(--rule); }
.dtable td.r, .dtable th.r { text-align: right; }
.dtable td.num { text-align: right; font-weight: 600; white-space: nowrap; }
.dtable tr.total td { border-top: 1px solid var(--ink); border-bottom: 0; font-weight: 700; color: var(--ink); }
.dtable--compact td, .dtable--compact th { padding-block: 5px; }
.dtable tbody tr:hover td { background: var(--paper-2); }
/* ---------------------------------------------------------------------------
15 Ladder: what the number means (vertical 0-100 scale with anchors)
------------------------------------------------------------------------ */
/* Markup:
PI.ladder() draws the 0-100 bar in the left gutter and connects each row to its value. */
.ladder { position: relative; padding-left: 132px; }
.ladder__svg { position: absolute; left: 0; top: 0; width: 132px; height: 100%; overflow: visible; pointer-events: none; }
.ladder__svg .l-t { font-family: var(--f-sans); font-size: 11.5px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.ladder__svg .l-band { font-family: var(--f-sans); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; fill: var(--ink-2); }
.ladder__svg .l-conn { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.ladder__svg .l-conn--here { stroke: var(--ink); stroke-width: 1.5; }
.ladder__svg .l-here { fill: var(--ink); }
.ladder__rows { list-style: none; margin: 0; padding: 0; }
.ladder__row { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.ladder__row:first-child { border-top: 0; }
.ladder__v { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: proportional-nums lining-nums; }
.ladder__v small { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.ladder__meaning { font-family: var(--f-serif); font-size: 18px; line-height: 1.35; color: var(--ink); font-weight: 600; }
.ladder__example { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.ladder__row--here { background: var(--paper-2); border-top: 2px solid var(--ink); padding-inline: 12px 0; margin-inline: -12px 0; }
.ladder__row--here .ladder__v { color: var(--ink); }
.ladder__here-tag { display: inline-block; font-family: var(--f-sans); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: var(--on-ink); padding: 3px 7px 2px; border-radius: var(--radius); margin-bottom: 6px; }
@media (max-width: 760px) {
.ladder { padding-left: 58px; }
.ladder__svg { width: 58px; }
.ladder__row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 0; }
.ladder__row--here { padding-inline: 10px 0; margin-inline: -10px 0; }
.ladder__v { font-size: 24px; display: flex; align-items: baseline; gap: 8px; }
.ladder__v small { margin-top: 0; }
.ladder__meaning { font-size: 17px; }
}
/* ---------------------------------------------------------------------------
16 Incident log (day-grouped)
------------------------------------------------------------------------ */
.log-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; padding: 12px 0 14px; border-bottom: 1px solid var(--rule); }
.log-controls__status { font-size: 13.5px; color: var(--ink-3); }
.log-controls__status b { color: var(--ink); }
.day { margin-top: 26px; }
.day__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
.day__head h3 { font-size: 13px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.day__head span { font-size: 12.5px; color: var(--ink-3); }
.entries { list-style: none; margin: 0; padding: 0; }
.entry { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 4px 18px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.entry__time { font-size: 13px; color: var(--ink-3); padding-top: 3px; }
.entry__body { min-width: 0; display: grid; gap: 8px; justify-items: start; }
.entry__line { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 13px; color: var(--ink-3); }
.entry h4, .entry__h { font-family: var(--f-serif); font-size: 19px; font-weight: 600; line-height: 1.28; text-wrap: pretty; }
.entry h4 a, .entry__h a { text-decoration: none; }
.entry h4 a:hover, .entry__h a:hover { text-decoration: underline; }
.entry__summary { font-family: var(--f-serif); font-size: 16.5px; line-height: 1.5; color: var(--ink-2); max-width: 66ch; }
.entry__pts { text-align: right; min-width: 88px; padding-top: 3px; }
.entry__pts b { display: block; font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.entry__pts span { display: block; font-size: 11.5px; color: var(--ink-3); line-height: 1.3; }
.entry--muted h4 { color: var(--ink-2); font-weight: 500; }
.entry--muted .entry__pts b { color: var(--ink-3); font-weight: 600; font-size: 14px; }
.log-more { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
@media (max-width: 640px) {
.entry { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
.entry__time { grid-column: 1; grid-row: 1; padding: 0; min-height: 1em; }
.entry__pts { grid-column: 2; grid-row: 1; min-width: 0; padding: 0; display: flex; gap: 6px; align-items: baseline; }
.entry__pts b { display: inline; font-size: 14px; }
.entry__pts span { display: inline; }
.entry__body { grid-column: 1 / -1; grid-row: 2; }
}
/* Stamp key (rail) */
.key { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.key li { display: grid; gap: 4px; font-size: 13.5px; line-height: 1.35; color: var(--ink-2); justify-items: start; }
.key__grp { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }
.rail-block { border-top: 2px solid var(--ink); padding-top: 10px; }
.rail-block + .rail-block { margin-top: 28px; }
.rail-block h3 { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.rail-block > p { font-size: 13px; color: var(--ink-3); margin-bottom: 10px; }
/* ---------------------------------------------------------------------------
17 Misquote Field Lab panel (teal graph paper)
------------------------------------------------------------------------ */
.fl { background-color: var(--mq-bg); background-image: linear-gradient(var(--mq-grid) 1px, transparent 1px), linear-gradient(90deg, var(--mq-grid) 1px, transparent 1px); background-size: 14px 14px; border: 1px solid var(--mq-line); }
.fl__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 11px 22px; border-bottom: 1px solid var(--mq-line); background: var(--mq-bg); }
.fl__mark { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--mq-strong); }
.fl__live { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.fl__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--mq); }
.fl__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--mq); opacity: 0; animation: pi-ping 2.4s cubic-bezier(.2, .6, .3, 1) infinite; }
@keyframes pi-ping { 0% { transform: scale(.5); opacity: .9; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
.fl__body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px 36px; padding: 22px; }
.fl__intro h2 { margin-bottom: 10px; }
.fl__intro p { font-family: var(--f-serif); font-size: 17px; line-height: 1.5; color: var(--ink-2); margin-bottom: 14px; }
.fl__link { font-weight: 700; color: var(--mq-strong); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; font-size: 14.5px; }
.fl__link:hover { border-bottom-width: 3px; }
.fl__stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--mq-surface); border: 1px solid var(--mq-line); align-self: start; }
.fl__stat { padding: 14px 16px 16px; border-left: 1px solid var(--mq-line); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fl__stat:first-child { border-left: 0; }
.fl__stat:first-child .fl__k { min-height: 0; }
.fl__k { font-size: 13.5px; font-weight: 600; color: var(--ink-2); line-height: 1.3; min-height: 2.6em; }
.fl__v { font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--ink); font-variant-numeric: proportional-nums lining-nums; }
.fl__n { font-size: 12.5px; color: var(--ink-3); line-height: 1.38; margin-top: auto; }
.fl__meter { position: relative; height: 7px; background: var(--mq-track); }
.fl__meter i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--mq); border-radius: 0 2px 2px 0; }
.fl .spark .sp-line { stroke: var(--mq); stroke-width: 2; }
.fl .spark .sp-dot { fill: var(--mq-strong); stroke: var(--mq-surface); }
.fl .spark .sp-t { fill: var(--ink-3); }
.fl__foot { padding: 0 22px 16px; font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 1180px) { .fl__body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
.fl__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fl__stat { border-left: 0; border-top: 1px solid var(--mq-line); }
.fl__stat:first-child { grid-column: 1 / -1; border-top: 0; }
.fl__stat:nth-child(odd):not(:first-child) { border-left: 1px solid var(--mq-line); }
}
@media (max-width: 640px) {
.fl__head, .fl__body { padding-inline: 14px; }
.fl__foot { padding-inline: 14px; }
.fl__stat { padding: 12px 12px 14px; }
.fl__v { font-size: 27px; }
}
/* ---------------------------------------------------------------------------
18 Methodology teaser, newsletter band, footer
------------------------------------------------------------------------ */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); counter-reset: step; }
.step { padding: 16px 22px 18px 0; min-width: 0; }
.step + .step { padding-left: 22px; border-left: 1px solid var(--rule); }
.step__n { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.step h3 { font-family: var(--f-serif); font-size: 21px; font-weight: 600; line-height: 1.2; margin: 6px 0 8px; }
.step p { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.formula { margin-top: 10px; font-size: 13.5px; background: var(--paper-2); padding: 9px 11px; color: var(--ink); line-height: 1.5; border-left: 2px solid var(--rule-strong); }
.formula b { font-weight: 800; }
@media (max-width: 900px) {
.steps { grid-template-columns: minmax(0, 1fr); }
.step + .step { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
}
.nl { background: var(--nl-bg); color: var(--nl-ink); margin-top: var(--sp-9); }
.nl .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 64px; padding-block: 44px 46px; align-items: center; }
.nl h2 { font-family: var(--f-serif); font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -.012em; line-height: 1.05; margin-bottom: 10px; }
.nl p:not(.nl__note) { font-family: var(--f-serif); font-size: 19px; line-height: 1.45; max-width: 46ch; color: var(--nl-ink); }
.nl form { display: grid; gap: 8px; }
.nl label { font-size: 14px; font-weight: 700; }
.nl .nl__row { display: flex; gap: 8px; flex-wrap: wrap; }
.nl input { flex: 1 1 14rem; min-width: 0; font-size: 16px; padding: 12px 14px; border: 2px solid transparent; border-radius: var(--radius); background: #ffffff; color: #121212; }
.nl input::placeholder { color: #69655d; }
.nl button { font-weight: 800; font-size: 15px; padding: 12px 20px; border-radius: var(--radius); border: 2px solid var(--nl-ink); background: var(--nl-ink); color: var(--nl-bg); cursor: pointer; }
.nl button:hover { background: transparent; color: var(--nl-ink); }
.nl .nl__note { font-size: 13.5px; color: var(--nl-muted); min-height: 1.4em; }
.nl :focus-visible { outline-color: var(--nl-ink); }
.nl__links { display: flex; flex-wrap: wrap; gap: 10px; justify-self: end; }
.nl__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border: 2px solid var(--nl-ink); border-radius: var(--radius); color: var(--nl-ink); font-size: 15px; font-weight: 800; text-decoration: none; }
.nl__links a:hover { background: var(--nl-ink); color: var(--nl-bg); }
@media (max-width: 900px) { .nl .wrap { grid-template-columns: minmax(0, 1fr); } .nl__links { justify-self: start; } }
.site-foot { border-top: 1px solid var(--ink); padding: 32px 0 40px; font-size: 14px; color: var(--ink-3); }
.site-foot .wrap { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
.site-foot h4 { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-foot a { color: var(--ink-2); }
.site-foot p { margin: 10px 0 0; max-width: 46ch; }
.site-foot .site-foot__links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.site-foot .tagline { font-family: var(--f-serif); font-style: italic; font-size: 17px; color: var(--ink-2); }
.site-foot__fine { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; font-size: 12.5px; }
@media (max-width: 900px) { .site-foot .wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-foot .wrap { grid-template-columns: minmax(0, 1fr); } }
/* ---------------------------------------------------------------------------
19 Site pages: page heads, breadcrumbs, teaser cards, compact log, filters,
editorial flags, empty states, Field Lab placeholder, newsletter placeholder
------------------------------------------------------------------------ */
.page-head { padding-top: var(--sp-7); padding-bottom: var(--sp-6); /* rule spans the text column, not the wrap padding */ background: linear-gradient(var(--ink), var(--ink)) 50% 100% / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.page-head .t-display { max-width: 20ch; margin-top: 10px; }
.page-head .t-dek { max-width: 62ch; margin-top: 16px; }
.page-head__meta { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font-size: 13.5px; color: var(--ink-3); }
.page-head__meta b { color: var(--ink); }
.crumb { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; margin: 22px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-3); }
.crumb li + li::before { content: "/"; margin-right: 8px; color: var(--ink-4); }
.crumb a { color: var(--ink-2); text-decoration-color: var(--rule-strong); }
.crumb a:hover { color: var(--ink); text-decoration-color: currentColor; }
.crumb [aria-current] { color: var(--ink); font-weight: 600; }
/* Teaser cards (front page): three plain columns divided by rules, not boxed cards */
.tcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 3px solid var(--ink); }
.tcard { padding: 14px 22px 20px 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tcard + .tcard { padding-left: 22px; border-left: 1px solid var(--rule); }
.tcard h3 { font-family: var(--f-serif); font-size: 23px; font-weight: 600; line-height: 1.18; }
.tcard h3 a { text-decoration: none; }
.tcard h3 a:hover { text-decoration: underline; }
.tcard p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.tcard .more-link { align-self: flex-start; margin-top: auto; }
.tcard__viz { min-height: 56px; }
@media (max-width: 900px) {
.tcards { grid-template-columns: minmax(0, 1fr); }
.tcard, .tcard + .tcard { padding: 14px 0 18px; border-left: 0; }
.tcard + .tcard { border-top: 1px solid var(--rule); }
}
/* Compact latest list (front page) */
.loglist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.loglist li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.loglist__when { font-size: 13px; color: var(--ink-3); }
.loglist__main { min-width: 0; display: grid; gap: 5px; }
.loglist__title { font-family: var(--f-serif); font-size: 17px; line-height: 1.32; color: var(--ink); text-wrap: pretty; }
.loglist__title a { text-decoration: none; }
.loglist__title a:hover { text-decoration: underline; }
.loglist__line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; color: var(--ink-3); }
.loglist__pts { font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; text-align: right; }
.loglist__pts span { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
@media (max-width: 640px) {
.loglist li { grid-template-columns: minmax(0, 1fr) auto; }
.loglist__when { grid-column: 1; grid-row: 1; }
.loglist__pts { grid-column: 2; grid-row: 1; }
.loglist__pts span { display: inline; margin-left: 4px; }
.loglist__main { grid-column: 1 / -1; }
}
/* Editorial flags: a small outlined label, never a color on its own */
.flag { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; line-height: 1.2; padding: 3px 7px 2px; border: 1.5px solid var(--rule-strong); border-radius: var(--radius); color: var(--ink-2); white-space: nowrap; }
.flag--strong { border-color: var(--danger-5); color: var(--ink); }
.flag--dotted { border-style: dotted; border-color: var(--ink-3); }
.flag--mq { border-color: var(--mq-line); background: var(--mq-bg); color: var(--mq-strong); }
.flags { display: flex; flex-wrap: wrap; gap: 6px; }
/* Filters (incidents page) */
.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px; padding: 14px 0 16px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--rule); align-items: end; }
.field { display: grid; gap: 4px; min-width: 0; }
.field > span { font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; }
.field select, .field input[type="search"] { min-height: 38px; width: 100%; min-width: 0; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper); padding: 6px 8px; font-size: 14.5px; color: var(--ink); }
.field input[type="search"]::placeholder { color: var(--ink-3); }
.field--search { grid-column: span 2; }
.filters__row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; justify-content: space-between; }
@media (max-width: 520px) { .filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .field--search { grid-column: 1 / -1; } }
.month-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 28px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
.month-head h2 { font-size: 13px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.month-head span { font-size: 12.5px; color: var(--ink-3); }
.pager { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
/* Empty and small-number states: said in words, never an empty chart */
.empty-note { margin-top: 14px; padding: 14px 16px; background: var(--paper-2); border-left: 2px solid var(--rule-strong); font-family: var(--f-serif); font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 66ch; }
.empty-note b { color: var(--ink); font-weight: 600; }
/* Field Lab placeholder (teal graph paper, no numbers until Misquote is live) */
.fl--soon .fl__body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.fl__status { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.fl__status i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--mq); display: inline-block; }
.fl__list { list-style: none; margin: 0; padding: 0; background: var(--mq-surface); border: 1px solid var(--mq-line); }
.fl__list li { padding: 12px 16px; border-top: 1px solid var(--mq-line); font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.fl__list li:first-child { border-top: 0; }
.fl__list b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 2px; }
@media (max-width: 900px) { .fl--soon .fl__body { grid-template-columns: minmax(0, 1fr); } }
/* Newsletter placeholder: the band stays, the form waits for launch */
.nl__soon { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; padding: 12px 18px; border: 2px dashed var(--nl-muted); border-radius: var(--radius); color: var(--nl-ink); }
/* ---------------------------------------------------------------------------
19b Recent events (bottom of The count) and the Signals desk
Beads use the danger ramp (severity) with a 2px paper halo where they sit on
the line. Signals carry no hue: category is a shape plus its text label, so the
warm ramp stays reserved for severity and cobalt for the real-world setting.
The timeline is still until someone points at it or focuses a mark.
------------------------------------------------------------------------ */
.monitor { margin-top: 18px; padding-top: 12px; border-top: 3px solid var(--ink); }
.mon__head { display: flex; align-items: center; gap: 8px; }
.mon__head .timestamp { margin-left: auto; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--danger-3); flex: none; }
.band-chip--sm { margin-top: 0; font-size: 10.5px; padding: 2px 6px 1px; letter-spacing: .1em; vertical-align: 1px; }
.mon__fresh { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 600;
padding: 8px 10px; background: var(--paper-2); border-left: 2px solid var(--accent); }
.btn--sm { min-height: 30px; padding: 4px 10px; font-size: 13px; }
/* Signal category marks: shape, not color */
.sig__dot { display: inline-block; width: 8px; height: 8px; background: var(--ink-2); flex: none; }
.sig__dot[data-cat="Frontier release"] { border-radius: 50%; }
.sig__dot[data-cat="Safety practice"] { transform: rotate(45deg) scale(.9); }
.sig__dot[data-cat="Policy"] { clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 9px; }
.chip-btn[aria-pressed="true"] .sig__dot { background: var(--on-ink); }
.sig__cat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.sig__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; color: var(--ink-3); }
.sig__meta time { font-weight: 600; color: var(--ink-2); }
/* Front page: signal cards */
.sig-cards { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); }
.sig-card { border-top: 3px solid var(--ink); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.sig-card h3 { font-family: var(--f-serif); font-size: 19px; font-weight: 600; line-height: 1.22; }
.sig-card h3 a { text-decoration: none; }
.sig-card h3 a:hover { text-decoration: underline; }
.sig-card__why { font-family: var(--f-serif); font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.sig-card__why b { font-family: var(--f-sans); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
@media (max-width: 1100px) { .sig-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .sig-cards { grid-template-columns: minmax(0, 1fr); } }
/* Signals page */
.sig-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px; margin: 0 0 var(--sp-5); }
.sig-legend dt { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; }
.sig-legend dd { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-3); line-height: 1.4; }
@media (max-width: 900px) { .sig-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sig-empty { margin-top: 14px; color: var(--ink-3); }
.sig-wrap { margin-top: var(--sp-6); }
.sig-month + .sig-month { margin-top: var(--sp-7); }
.sig-month__h { font-family: var(--f-sans); font-size: var(--fs-kicker); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 3px solid var(--ink); }
.siglist { list-style: none; margin: 0; padding: 0; }
.sig { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px 32px; padding: 22px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 16px; }
.sig:target { background: linear-gradient(90deg, var(--paper-2), transparent 70%); }
.sig .sig__meta { flex-direction: column; align-items: flex-start; gap: 6px; }
.sig__who { font-weight: 600; color: var(--ink-2); }
.sig__id { color: var(--ink-3); text-decoration: none; font-size: 12px; }
.sig__title { font-family: var(--f-serif); font-size: clamp(21px, 1.9vw, 25px); font-weight: 600; line-height: 1.18; max-width: 40ch; }
.sig__sum { margin-top: 8px; font-family: var(--f-serif); font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 70ch; }
.sig__why { margin-top: 14px; padding: 12px 14px; background: var(--paper-2); border-left: 2px solid var(--ink); max-width: 70ch; }
.sig__why p { margin-top: 4px; font-family: var(--f-serif); font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.sig__rel { margin-top: 12px; font-size: 14px; }
.sig__rel ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.sig__rel a { text-decoration: none; color: var(--ink); }
.sig__rel a:hover { text-decoration: underline; }
.sig__rel .id { color: var(--ink-3); margin-right: 4px; }
.sig__src { margin-top: 12px; font-size: 13.5px; }
.sig__src summary { cursor: pointer; font-weight: 700; color: var(--ink-2); }
.sig__src ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.sig__src .who { display: block; color: var(--ink-3); font-size: 12.5px; }
@media (max-width: 760px) { .sig { grid-template-columns: minmax(0, 1fr); } .sig .sig__meta { flex-direction: row; align-items: center; } }
.note-box { padding: 18px 20px; background: var(--paper-2); border-top: 3px solid var(--ink); max-width: 80ch; }
.note-box p { margin-top: 8px; font-family: var(--f-serif); font-size: 17px; line-height: 1.55; color: var(--ink-2); }
/* ---------------------------------------------------------------------------
20 Utilities, motion, print
------------------------------------------------------------------------ */
[hidden] { display: none !important; }
/* Notes for the editor (open decisions, drafts) show in preview builds only. */
body[data-stage="live"] .editor-note { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--ink-3); }
.nowrap { white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--ink); color: var(--on-ink); padding: 8px 12px; z-index: 70; }
.skip:focus { top: 8px; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--on-ink); font-size: 14px; padding: 10px 16px; border-radius: 3px; max-width: calc(100vw - 32px); z-index: 70; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.fl__dot::after { opacity: .5; transform: scale(1.2); }
}
@media (forced-colors: active) {
.stamp__lvl, .band-chip, .sw { forced-color-adjust: none; }
}
@media print {
.nl, .theme-toggle, .filters { display: none !important; }
details.table-view { display: block; }
}
/* Recent-event targets stay still while the background trace animates. */
.mon__all { margin-top: 10px; font-size: 13px; }
.mon__all summary { cursor: pointer; min-height: 44px; padding: 13px 0; font-weight: 600; }
/* ---------------- Harm and control kept apart ----------------
Harm stamps use the shared --danger scale; control stamps are ink-only so the two never read as one
severity. Statuses with no documented harm are hollow; alleged harm is dotted. */
.stamp--ctl { padding-left: 0; padding-right: 2px; color: var(--ink-2); gap: 7px; border-color: transparent; }
.stamp--ctl .stamp__lvl { width: auto; min-width: 24px; padding: 0 3px; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.stamp--ctl[data-ctl="4"] .stamp__lvl, .stamp--ctl[data-ctl="5"] .stamp__lvl { background: var(--ink); color: var(--paper); }
.stamp--noharm { border-color: var(--rule-strong); color: var(--ink-3); }
.stamp--unknown { border-style: dashed; color: var(--ink-2); }
.stamp--alleged { border-style: dotted; border-width: 2px; border-color: var(--ink-3); color: var(--ink-2); }
.band-chip[data-band="-1"] { background: var(--paper-3); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.ticker__what { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.mon__groups { margin: 0 0 8px; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.mon__table { margin-top: 4px; }
.ladderbar { display: block; overflow: visible; }
.ladderbar .lb-lvl { font-size: 11px; font-weight: 700; fill: var(--ink-2); }
.ladderbar .lb-num { font-size: 10px; fill: var(--ink-3); }
.ladderbar .lb-tick { stroke: var(--ink); stroke-width: 2px; }
.ladderbar .lb-mark { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5px; }
@media (forced-colors: active) { .stamp--ctl .stamp__lvl { forced-color-adjust: none; } }
.mon__table th[scope="row"] { white-space: normal; min-width: 14rem; font-weight: 500; }
.mon__table td { white-space: normal; min-width: 6rem; }
/* Impact bar (PI.impactBar): one block per record in a window, width = harm level; no counted harm = minimum width. */
.ibar { --ibar-h: 34px; }
.ibar__track { display: flex; gap: 2px; height: var(--ibar-h); }
.ibar__seg { flex: 1 1 0; min-width: 5px; padding: 0; border: 0; border-radius: 0; cursor: pointer; background: var(--paper-3); position: relative; }
.ibar__seg.is-zero { background: repeating-linear-gradient(135deg, var(--paper-3) 0 3px, var(--paper-2) 3px 6px); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.ibar__seg.is-driver { box-shadow: inset 0 -4px 0 var(--ink); }
.ibar__seg:hover, .ibar__seg:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; z-index: 1; }
.ibar__groups { display: flex; gap: 2px; margin-top: 6px; }
.ibar__group { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.3; color: var(--ink-3); border-top: 1px solid var(--rule-strong); padding-top: 4px; }
.ibar__group.is-driver { color: var(--ink); font-weight: 700; border-top: 2px solid var(--ink); padding-top: 3px; }
@media (prefers-reduced-motion: no-preference) { .ibar__seg { transition: transform .12s; } .ibar__seg:hover { transform: translateY(-3px); } }
.ibar__seg.is-marked::before { content: ""; position: absolute; left: 50%; top: -9px; transform: translateX(-50%); border: 5px solid transparent; border-bottom: 0; border-top: 6px solid var(--ink); }
.ibar:has(.is-marked) { padding-top: 9px; }
/* Stamp tiers. The assessment row: harm and control share one form, a level tile plus a label.
The context row: origin, verification and attribution as quiet metadata, no boxes. */
.stamps { flex-direction: column; align-items: flex-start; gap: 7px; }
.stamps__key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.stamps__key .stamp { padding: 0; border: 0; gap: 7px; color: var(--ink); background: none; }
.stamps__key .stamp--noharm, .stamps__key .stamp--alleged { color: var(--ink-2); }
.stamp--noharm .stamp__lvl, .stamp--alleged .stamp__lvl { background: none; color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--rule-strong); }
.stamp--alleged .stamp__lvl { box-shadow: none; outline: 1.5px dotted var(--ink-3); outline-offset: -1.5px; }
.stamps__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: 12.5px; line-height: 1.35; color: var(--ink-3); }
.stamps__meta .stamp { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; font-weight: 500; letter-spacing: 0; text-transform: none; gap: 6px; }
.stamps__meta .stamp + .stamp::before { content: "·"; margin: 0 7px; color: var(--ink-3); font-weight: 700; }
.stamps__meta .stamp--v1, .stamps__meta .stamp--v2 { color: var(--ink-2); }
.stamps__meta .stamp--attr b { font-weight: 600; color: var(--ink-2); }
.stamps__meta .sw { width: 9px; height: 9px; vertical-align: 0; }
/* Evidence beside a reading: compact totals with inspectable records. */
.reading-context, .status-watch { margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.reading-context > p, .status-watch p { margin: 0 0 7px; }
.reading-context b { color: var(--ink); }
.reading-context__counts { margin: 8px 0; display: flex; flex-wrap: wrap; gap: 3px 16px; }
.reading-context__counts > div { display: flex; gap: 6px; align-items: baseline; }
.reading-context__counts dt { color: var(--ink-3); }
.reading-context__counts dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.reading-context summary, .status-watch summary { cursor: pointer; padding: 7px 0; min-height: 32px; color: var(--ink); font-weight: 600; }
.reading-context ul, .status-watch ul { list-style: none; padding: 0; margin: 4px 0 10px; }
.reading-context li, .status-watch li { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.reading-context li a, .status-watch li a { display: block; min-height: 24px; }
.reading-context small, .status-watch small { display: block; color: var(--ink-3); font-size: 12px; }
.scale-zero { flex-wrap: wrap; }
.idx-now { flex-wrap: wrap; }
/* Rating pending: stands in for the harm and control stamps until an editor has rated the record. */
.stamp--pending { border-style: dashed; border-width: 1.5px; border-color: var(--ink-3); color: var(--ink-2); font-weight: 700; }
.stamp--pending .stamp__lvl { background: none; color: var(--ink-3); box-shadow: none; outline: 1.5px dashed var(--ink-3); outline-offset: -1.5px; }
.stamps__key .stamp--pending { color: var(--ink-2); border: 0; }
.axis--pending { border-style: dashed; }
.reading-context__pending { color: var(--ink-2); }
.site-foot .site-foot__ratings { grid-column: 1 / -1; max-width: none; margin: 0; font-size: 13.5px; color: var(--ink-2); }
/* ---- Record groups and the control floor (methodology v0.6) ---------------------------------------------------- */
.group-badge { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 14px 0 8px; padding: 9px 12px 9px 14px; border-left: 4px solid var(--ink-3); background: var(--paper-2); }
.group-badge__label { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.group-badge__desc { font-size: 14.5px; line-height: 1.4; color: var(--ink-2); flex: 1 1 24ch; }
.group-badge--counts { border-left-color: var(--danger-4); }
.group-badge--watch { border-left-style: dashed; border-left-color: var(--ink-3); }
.group-badge--court { border-left-style: dotted; border-left-color: var(--ink-2); }
.group-badge--control { border-left-color: var(--ctl-band); }
.group-badge--separate { border-left-color: var(--ink-4); }
.inc-lines { margin: 8px 0 6px; display: grid; gap: 6px; }
.inc-lines > div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.inc-lines dt { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.inc-lines dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.inc-lines dd > span { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.group-chip { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px 1px; border: 1px solid var(--rule-strong); border-radius: var(--radius); color: var(--ink-2); margin-left: 6px; vertical-align: 1px; }
.group-chip--counts { border-color: var(--danger-4); color: var(--ink); }
.group-chip--control { border-color: var(--ctl-band); }
.group-chip--watch { border-style: dashed; }
.group-chip--court { border-style: dotted; }
.group-filter { margin-bottom: 16px; }
.reading-context__groups { margin-top: 6px; }
.scale-band--control .scale-range { color: var(--ctl-band); }
.group-list { margin: 12px 0 0; display: grid; gap: 0; }
.group-list > div { padding: 10px 0; border-top: 1px solid var(--rule); }
.group-list dt { font-size: 15px; font-weight: 700; color: var(--ink); }
.group-list dd { margin: 3px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.try__ctl { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; }
.try__ctl select { font: inherit; padding: 4px 6px; background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: var(--radius); }