/* Layout, type and base components. Layering by weight and tone, not boxes. */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.55;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 1.5em 0 0.5em;
  overflow-wrap: break-word;
}
h1 { font-size: var(--step-4); margin-top: 0.75em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p, ul, ol, dl, figure, table { margin: 0 0 1em; }
small, .small { font-size: var(--step--1); color: var(--ink-3); }

a { color: inherit; text-decoration-color: var(--ink-3); text-underline-offset: 0.15em; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

img, svg, video { max-width: 100%; height: auto; }
code { font-size: 0.9em; }
/* Long unbroken strings (URLs, ids) in page prose must not force horizontal scroll. */
main :is(p, li, dd, dt, td, th, figcaption, blockquote, code) { overflow-wrap: anywhere; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link { position: absolute; left: var(--gutter); top: -100px; padding: 0.5em 1em; background: var(--paper); color: var(--ink); z-index: 10; }
.skip-link:focus { top: 0; }

/* Shell */
.masthead, main, .site-footer {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
@media (min-width: 60em) {
  .masthead, main, .site-footer { max-width: 72rem; }
  main > * { max-width: var(--measure); }
  main > .wide { max-width: none; }
}

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1rem;
  padding-top: 0.5rem;
  border-bottom: 1px solid var(--rule);
}
.wordmark {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-right: auto;
}
.site-nav { flex-basis: 100%; }
.site-nav ul, .site-footer ul { list-style: none; padding: 0; margin: 0 0 0 -0.5rem; display: flex; flex-wrap: wrap; gap: 0 0.25rem; }
.site-nav a, .site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 0.5rem;
  color: var(--ink-2);
  text-decoration: none;
}
.site-nav a:hover, .site-footer a:hover { color: var(--ink); text-decoration: underline; }
.site-nav a[aria-current="page"], .site-footer a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.theme-toggle {
  min-height: var(--tap);
  padding: 0 0.75rem;
  font: inherit;
  font-size: var(--step--1);
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 4px;
  cursor: pointer;
}
.theme-toggle[hidden] { display: none; }

main { padding-top: 0.5rem; padding-bottom: 3rem; }

.site-footer {
  border-top: 1px solid var(--rule);
  padding-top: 0.5rem;
  padding-bottom: 2rem;
  font-size: var(--step--1);
  color: var(--ink-3);
}
.site-footer .data-version { margin: 0.5rem 0 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===================================================================================
   Components — direction A, Broadsheet (Task 2; docs/superpowers/design/2026-11-07-directions.md).
   Hierarchy by size, weight and tone; whitespace separates; a rule appears only where a table
   needs one. Descriptors sit in a margin column beside the prose they annotate (Tufte sidenotes)
   from 60em up and inline after it below. Nothing hides behind hover; every control has a border
   or an underline at rest.
   =================================================================================== */

/* Numbers line up where they are compared: amount cells, headline fact values and figures.
   Prose keeps proportional figures. */
td.n, th.n, .facts .v, figure { font-variant-numeric: tabular-nums; }

/* Display serif: Fraunces at its large optical size, no "soft" or "wonky" alternates. */
h1, h2, h3, .promise, .dek, .wordmark { font-variation-settings: "SOFT" 0, "WONK" 0; }

/* On an entity page the finding (.dek) is the headline; the entity's name is a smaller h1 above it. */
h1.entity-name { font-size: var(--step-2); margin: 0 0 0.25rem; line-height: 1.1; }

/* --- Page heads ------------------------------------------------------------------- */
.kicker { margin: 2.5rem 0 0.5rem; font-size: var(--step--1); line-height: 1.5rem; color: var(--ink-3); }
.kicker a { color: var(--ink-2); }
.dek {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.25;
  max-width: 30em;
  margin: 0 0 1.5rem;
  overflow-wrap: break-word;
}
/* "Nothing confirmed" rows: the sweep in one line under the dek. */
.sweep { margin: -0.75rem 0 1.5rem; max-width: var(--measure); color: var(--ink-2); }
.promise {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.2;
  max-width: 22em;
  margin: 2rem 0 1.5rem;
  color: var(--ink-2);
}
@media (min-width: 60em) {
  .kicker { margin-top: 4rem; }
  .dek { font-size: var(--step-3); line-height: 1.2; }
  h1.entity-name { font-size: var(--step-3); }
  .promise { font-size: var(--step-3); }
}

/* --- Sidenote layout: prose column + margin column ----------------------------------
   One .with-notes per annotated passage: its first child is the prose (a paragraph, or a wrapper
   holding a heading and its paragraph), and the .note that annotates it follows immediately in the
   DOM. From 60em the pair is one grid row, the note in the margin beside its own paragraph; below
   60em the note falls inline straight after that paragraph. Passages without a note stay outside. */
.with-notes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2.5rem; }
.with-notes > :first-child { max-width: var(--measure); }
.with-notes > :first-child > :last-child { margin-bottom: 1em; }
.note { margin: 0 0 1.25rem; font-size: var(--step--1); line-height: 1.45; color: var(--ink-2); }
.note > b, .note > strong { display: block; color: var(--ink); font-weight: 600; }
@media (min-width: 60em) {
  main .with-notes { max-width: none; }
  .with-notes { grid-template-columns: minmax(0, var(--measure)) minmax(14rem, 18rem); align-items: start; }
  .with-notes > .note { grid-column: 2; margin-top: 0.2rem; }
}
/* A heading-led passage moves the heading's top space onto the row, so the note starts level
   with the heading instead of above it. */
.with-notes > :first-child > :is(h2, h3, h4):first-child { margin-top: 0; }
.with-notes:has(> :first-child > :is(h2, h3, h4):first-child) { margin-top: 2rem; }

/* Headline facts: label small and grey, value at reading size in ink. */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.facts > * { font-size: var(--step--1); color: var(--ink-3); }
.facts .v { display: block; font-size: var(--step-0); font-weight: 500; color: var(--ink); }
@media (min-width: 40em) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- Tables (the Ledger's contribution: evidence and source vault) ------------------
   Every data table uses class="stack" and gives each cell after the first a data-label, so on
   phones it reads as labelled rows instead of squeezed columns that break words mid-word. */
/* The small size goes on the cells, not the table, so the table's 68ch measure resolves at body size
   and matches the prose column. */
table { border-collapse: collapse; width: 100%; }
th, td { font-size: var(--step--1); }
td { line-height: 1.5rem; }
th { text-align: left; font-weight: 500; color: var(--ink-3); padding: 0.4rem 0.75rem 0.4rem 0; border-bottom: 1px solid var(--rule); vertical-align: bottom; }
td { padding: 0.55rem 0.75rem 0.55rem 0; vertical-align: top; border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent); }
td.n, th.n { text-align: right; white-space: nowrap; }
td.n svg { margin-left: 0.25rem; }
td.nowrap { white-space: nowrap; }
/* Short status words wrap at spaces only, never mid-word (overrides the page-wide overflow-wrap). */
main td.words { overflow-wrap: normal; min-width: 9em; }
/* The long first column is bounded so the short columns keep their room. */
table.stack td:first-child { max-width: 32rem; }
/* Phones: a table collapses to labelled rows; each cell carries data-label. */
@media (max-width: 40em) {
  table.stack thead { display: none; }
  table.stack tr { display: block; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
  table.stack td { display: block; border: 0; padding: 0.1rem 0; }
  table.stack td[data-label]::before { content: attr(data-label) " "; color: var(--ink-3); }
  table.stack td.n { text-align: left; }
  /* A word-sized bar beside an amount wraps under the figure instead of overrunning. */
  td.n { white-space: normal; }
  td.n svg { display: block; margin: 0.2rem 0 0 auto; }
  table.stack td.n svg { margin-left: 0; }
}
.quote { font-family: var(--font-display); font-style: italic; }
.st-ok { color: var(--ok); }
.st-warn { color: var(--warn); }
.st-bad { color: var(--bad); }
.st-none, .muted { color: var(--ink-3); }

/* --- Figures: every descriptor is a figure with a text equivalent --------------------- */
figure { margin: 0 0 1.25rem; }
figure svg { display: block; overflow: visible; }
figcaption { margin-top: 0.35rem; font-size: var(--step--1); line-height: 1.5rem; color: var(--ink-2); }
figcaption b { color: var(--ink); font-weight: 600; }

/* Word-sized descriptors: set inline at x-height, never taller than the line. */
.ladder, .ring, .trail, .sparkline, .fresh-mark, .tier svg {
  display: inline-block;
  height: 0.85em;
  width: auto;
  vertical-align: -0.05em;
  overflow: visible;
}
.ring { height: 1em; vertical-align: -0.15em; }
.sparkline { height: 1em; vertical-align: -0.15em; stroke: var(--ink-2); fill: none; }

/* Figure-sized descriptors: block, full column width, capped. */
.window, .chain, .radius, .fresh { display: block; width: 100%; height: auto; max-width: 28rem; }
.radius { max-width: 40rem; }

/* Evidence tier badge: glyph shape + label; colour is never the only signal. */
.tier { display: inline-flex; align-items: baseline; gap: 0.35em; font-size: var(--step--1); font-weight: 500; color: var(--ink); white-space: nowrap; --tier-c: var(--tier-unassigned); }
.tier svg { color: var(--tier-c); }
.tier[data-tier="adjudicated"] { --tier-c: var(--tier-adjudicated); }
.tier[data-tier="settled_with_findings"] { --tier-c: var(--tier-settled-findings); }
.tier[data-tier="settled"] { --tier-c: var(--tier-settled); }
.tier[data-tier="procedural"] { --tier-c: var(--tier-procedural); }
.tier[data-tier="alleged"] { --tier-c: var(--tier-alleged); }

/* Severity ladder: unlit rungs are --ink-3 outlines; lit rungs are filled with --sev-N from data-sev
   on the svg, so lit differs from unlit by form, not colour alone. An unverified row (spec 5.4)
   omits data-sev, so lit rungs fall back to --sev-none (and carry a hatch drawn in the svg). */
.ladder [data-rung] { fill: none; stroke: var(--ink-3); }
.ladder [data-rung][data-lit] { fill: var(--rung-c, var(--sev-none)); stroke: var(--rung-c, var(--sev-none)); }
.ladder[data-sev="1"] { --rung-c: var(--sev-1); }
.ladder[data-sev="2"] { --rung-c: var(--sev-2); }
.ladder[data-sev="3"] { --rung-c: var(--sev-3); }
.ladder[data-sev="4"] { --rung-c: var(--sev-4); }
.ladder[data-sev="5"] { --rung-c: var(--sev-5); }

/* Paper trail and freshness read their state from a data attribute. */
.trail[data-level="none"] { color: var(--bad); }
.fresh[data-stale="true"] { color: var(--warn); }
.fresh-mark { color: var(--ink-2); }
.fresh-mark[data-stale="true"] { color: var(--warn); }

/* Honesty band (spec 5.4): a full-width tone, not a box. */
.band-unverified {
  margin: 0 0 1.5rem;
  padding: 0.6rem var(--gutter);
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  background: color-mix(in srgb, var(--warn) 12%, var(--paper));
  color: var(--ink);
  font-size: var(--step--1);
}
.band-unverified strong { font-weight: 600; }

/* Small multiples: same scale, same size, side by side. */
.small-multiples { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1.25rem 1.5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.small-multiples > * { margin: 0; font-size: var(--step--1); color: var(--ink-2); }
.small-multiples svg { display: block; width: 100%; height: auto; }

/* --- Lists and cards --------------------------------------------------------------- */
/* A card is a block separated by space and a hairline above, not a box. The title is the link
   and is underlined at rest; the whole card is a target through the stretched ::after. */
.card { position: relative; padding: 1rem 0 1.25rem; border-top: 1px solid var(--rule); }
.card h3, .card .title { margin: 0 0 0.35rem; font-size: var(--step-1); }
.card a.title-link::after { content: ""; position: absolute; inset: 0; }
.card a.title-link:focus-visible { outline: none; }
.card:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; }
.card p { margin: 0.25rem 0 0; color: var(--ink-2); }

.list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 1rem;
  align-items: baseline;
  min-height: var(--tap);
  padding: 0.6rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent);
}
.list-row .meta { grid-column: 1 / -1; font-size: var(--step--1); color: var(--ink-3); }
@media (min-width: 40em) {
  .list-row { grid-template-columns: minmax(0, 1fr) 6rem 9rem 6rem; }
  .list-row .meta { grid-column: auto; }
}

/* --- Forms ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 1rem;
  font: inherit;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink-3);
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { border-color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn-primary { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn[disabled], .btn[aria-disabled="true"] { color: var(--ink-3); border-color: var(--rule); background: transparent; cursor: not-allowed; }

.field { display: flex; flex-direction: column; gap: 0.3rem; margin: 0 0 1rem; }
.field label, .field .label { font-size: var(--step--1); font-weight: 500; color: var(--ink-2); }
.field input, .field select, .field textarea {
  min-height: var(--tap);
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink-3);
  border-radius: 4px;
  max-width: 100%;
}
.field textarea { min-height: 6rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--ink); }
.field .hint { font-size: var(--step--1); color: var(--ink-3); }
.field .error, .field [role="alert"] { font-size: var(--step--1); color: var(--bad); }
.field [aria-invalid="true"] { border-color: var(--bad); }

.search { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: var(--measure); margin: 0 0 1.5rem; }
.search input[type="search"] {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: var(--tap);
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: var(--step-1);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink-3);
  border-radius: 4px;
}

.facets { margin: 0 0 1.5rem; padding: 0; border: 0; }
.facets fieldset { margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
.facets legend { padding: 0; margin-bottom: 0.25rem; font-size: var(--step--1); font-weight: 600; color: var(--ink); }
.facets label { display: flex; align-items: center; gap: 0.5rem; min-height: var(--tap); color: var(--ink-2); cursor: pointer; }
.facets input[type="checkbox"], .facets input[type="radio"] { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--ink); }
.facets .count { margin-left: auto; font-size: var(--step--1); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Masthead: the DOM order is the visual order at every width (wordmark, search, theme toggle,
   nav); no `order`. Phones: the search takes its own row under the wordmark, then the toggle, then
   the nav (a nav squeezed beside the toggle wrapped to three lines for the same height). From
   40em the search sits beside the wordmark and the nav has its own row. Every
   part can shrink to a 320px viewport (min-width: 0, the input's zero basis). The listbox drops
   below the input as a tone, not a box. */
.masthead .search { position: relative; flex: 1 1 100%; flex-wrap: nowrap; min-width: 0; max-width: none; margin: 0 0 0.25rem; }
.masthead .search input[type="search"] { flex: 1 1 0; width: 0; min-width: 0; font-size: var(--step-0); }
.search input::placeholder { color: var(--ink-3); opacity: 1; }
@media (max-width: 39.99em) {
  .masthead .theme-toggle { margin: 0.25rem 0; }
}
@media (min-width: 40em) {
  .masthead .search { flex: 0 1 22rem; margin: 0; }
}
.search-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  margin: 2px 0 0; padding: 0.25rem 0; list-style: none;
  background: var(--paper); border-top: 2px solid var(--ink);
  box-shadow: 0 1px 0 var(--rule);
  max-height: 22rem; overflow-y: auto;
}
.search-list [role="option"] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; min-height: var(--tap); padding: 0.4rem 0.75rem; cursor: pointer; }
.search-list [role="option"][aria-selected="true"], .search-list [role="option"]:hover { background: color-mix(in srgb, var(--ink) 8%, var(--paper)); }
.search-list [role="option"][aria-selected="true"] .search-name { text-decoration: underline; text-decoration-color: var(--accent); }
.search-list .search-name { color: var(--ink); font-weight: 500; }
.search-list .search-tab { font-size: var(--step--1); color: var(--ink-3); }

/* --- Explorer (/companies) ------------------------------------------------------------ */
.lead { color: var(--ink-2); }
.explorer-facets .facets { display: block; }
.explorer-facets .field { margin-bottom: 0.75rem; min-width: 0; gap: 0.2rem; }
.explorer-facets .field label { min-height: 0; color: var(--ink-2); cursor: default; }
.explorer-facets .field select, .explorer-facets .field input { width: 100%; }
.explorer-facets .check { align-self: end; margin-bottom: 0.75rem; line-height: 1.25; font-size: var(--step--1); }
.facet-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.result-count { margin: 0 0 0.5rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
/* More filters: a disclosure on phones (open when a filter is set); from 60em always shown where
   the browser can style ::details-content, else the summary stays and still opens it. */
.more-filters { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.more-filters > summary {
  display: flex; align-items: center; gap: 0.5rem; min-height: var(--tap); cursor: pointer;
  font-weight: 600; color: var(--ink); list-style: none;
}
.more-filters > summary::-webkit-details-marker { display: none; }
.more-filters > summary::before { content: "+"; display: inline-block; width: 1em; font-weight: 400; color: var(--ink-3); }
.more-filters[open] > summary::before { content: "\2212"; }
.more-filters-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.75rem; padding: 0.25rem 0 0.25rem; }

.explorer-row {
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas: "main main main" "sev fresh tier";
  gap: 0.35rem 1.25rem;
  padding: 0.85rem 0;
}
.explorer-row .row-main { grid-area: main; min-width: 0; }
.explorer-row .row-sev { grid-area: sev; }
.explorer-row .row-fresh { grid-area: fresh; }
.explorer-row .row-tier { grid-area: tier; }
/* Under 360px the three marks do not fit one line: the tier badge takes its own. */
@media (max-width: 22.49em) {
  .explorer-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "main main" "sev fresh" "tier tier"; }
}
.row-name { margin: 0; font-size: var(--step-1); line-height: 1.25; }
.row-name a { display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; text-decoration-color: var(--rule); }
.row-name a:hover { text-decoration-color: var(--accent); }
.row-meta { margin: 0.1rem 0 0; font-size: var(--step--1); color: var(--ink-3); }
.unverified-mark { color: var(--warn); font-weight: 500; }
.row-lede { margin: 0.3rem 0 0; color: var(--ink-2); }
.row-sev, .row-fresh { white-space: nowrap; }
.list-head { display: none; }
@media (min-width: 40em) {
  .explorer-row, .list-head { grid-template-columns: minmax(0, 1fr) 6.5rem 9rem 7.5rem; grid-template-areas: "main sev fresh tier"; }
  .list-head { display: grid; gap: 0 1.25rem; padding: 0.5rem 0 0.35rem; border-bottom: 1px solid var(--ink); font-size: var(--step--1); font-weight: 600; color: var(--ink-2); }
  .explorer-row .row-sev, .explorer-row .row-fresh, .explorer-row .row-tier { padding-top: 0.3rem; }
}
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1.5rem 0 0; }
.pager[hidden] { display: none; }
.pager-at { font-size: var(--step--1); color: var(--ink-3); }
@media (min-width: 60em) {
  .explorer { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 0 2.5rem; align-items: start; }
  .more-filters-body { grid-template-columns: minmax(0, 1fr); }
}
@supports selector(::details-content) {
  @media (min-width: 60em) {
    .more-filters { border: 0; }
    .more-filters > summary { display: none; }
    .more-filters::details-content { content-visibility: visible; display: contents; }
  }
}

/* --- Act (/act): letter generator, print-ready ----------------------------------------- */
.letter-types { max-width: var(--measure); margin: 0 0 1.5rem; }
.letter-types dt { margin-top: 1rem; font-weight: 600; color: var(--ink); }
.letter-types dd { margin: 0.2rem 0 0; color: var(--ink-2); }
.act-form { max-width: var(--measure); margin: 0 0 1.5rem; }
.act-company { position: relative; }
.act-company input { width: 100%; }
.act-types label { min-height: var(--tap); }
.act-signup input[type="date"] { max-width: 14rem; }
.optout-status, .optout-none { margin: 0.25rem 0 0; color: var(--ink-2); }
.optout-none { margin: 0 0 1rem; }
.optout-terms { margin: 0 0 0.75rem; color: var(--ink-2); }
.act-company-status { margin: 0; min-height: 0; font-size: var(--step--1); color: var(--ink-2); }
.sender { max-width: var(--measure); margin: 0 0 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.sender[hidden] { display: none; }
.sender .field input, .sender .field textarea { width: 100%; }
.addr-block { max-width: var(--measure); margin: 0 0 1rem; }
.addr-block h2 { margin: 1.5rem 0 0.5rem; font-size: var(--step-1); }
.addr-block .addr { margin: 0 0 0.5rem; font-weight: 500; color: var(--ink); }
.addr-block .confidence { margin: 0 0 0.5rem; padding-left: 0.75rem; border-left: 3px solid var(--ink-3); color: var(--ink-2); }
.addr-block .confidence strong { color: var(--ink); }
.addr-block[data-confidence="verified"] .confidence { border-left-color: var(--ok); }
.addr-block[data-confidence="unverified"] .confidence { border-left-color: var(--warn); }
.addr-block[data-confidence="none"] .confidence { border-left-color: var(--bad); }
.letter {
  max-width: var(--measure); margin: 1rem 0 1.5rem; padding: 1.5rem 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-family: var(--font-text); font-size: var(--step-0); line-height: 1.6; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.act-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.act-actions .btn { text-decoration: none; }
.act-actions [hidden] { display: none; }
@media print {
  .masthead, .site-nav, .site-footer, .skip-link, .theme-toggle, .no-print, .btn, form, .facets, .search, .sender { display: none !important; }
  body { background: #fff; color: #000; }
  main { max-width: none; padding: 0; }
  .letter { border: 0; margin: 0; padding: 0; max-width: none; font-size: 12pt; color: #000; }
  a { text-decoration: none; }
}

/* --- Follow-through kit (/act/follow, /pass) --------------------------------------------- */
.kit-offer { max-width: var(--measure); margin: 1.5rem 0; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--ink-2); }
.kit-offer .btn { margin-top: 0.5rem; }
.pass-reason { max-width: var(--measure); margin: 0 0 1rem; padding-left: 0.75rem; border-left: 3px solid var(--warn); color: var(--ink); }
.pass-reminder[hidden] { display: none; }
.kit-contents { max-width: var(--measure); padding-left: 1.25rem; }
.kit-contents li { margin: 0 0 0.5rem; }
.kit-contents strong { color: var(--ink); }
ul.plain { margin: 0; padding: 0; list-style: none; }
ul.plain li + li { margin-top: 0.15rem; }
table.coverage q { color: var(--ink-2); }
.kit-buy { margin: 1.5rem 0; }
.kit-buy .btn, .not-for-sale { font-size: var(--step-0); }
.not-for-sale { font-weight: 500; color: var(--ink); }
.pass-link { overflow-wrap: anywhere; font-size: var(--step--1); }
.small, .pass-link { line-height: 1.5rem; }
.kit-form .field input[type="date"], .kit-form select { min-height: var(--tap); }
.kit-noclock { max-width: var(--measure); color: var(--ink); }
table.timeline { max-width: var(--measure); }
table.timeline tr.past td:first-child { color: var(--ink); }
table.timeline tr:not(.past) td { color: var(--ink-2); }
.kit-today { max-width: var(--measure); }
.kit-complain { max-width: var(--measure); }
@media print {
  .kit-next { break-before: page; }
}

/* --- Home (/) ------------------------------------------------------------------------ */
.home-hero .promise { margin: 1.25rem 0 0.5rem; color: var(--ink); }
.home-hero .lead { margin-bottom: 0; }
.home-start h2, .home-toxic h2, .home-strip h2 { margin-top: 2rem; font-size: var(--step-2); }
.home-start h2 { margin-top: 1.25rem; }
.home-start .lead, .home-toxic .lead, .home-strip .lead { margin-top: 0; }
.pickers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem 1.5rem; }
@media (min-width: 40em) { .pickers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .pickers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.picker { display: flex; align-items: flex-end; gap: 0.5rem; margin: 0 0 0.75rem; min-width: 0; }
.picker .field { flex: 1 1 auto; min-width: 0; margin: 0; }
.picker select { width: 100%; }
.picker [data-go][hidden] { display: none; }

.toxic { list-style: none; padding: 0; margin: 0 0 1rem; border-top: 1px solid var(--ink); }
.toxic-row {
  grid-template-columns: 2rem auto minmax(0, 1fr);
  grid-template-areas: "rank main main" ". sev tier";
  gap: 0.35rem 1.25rem;
  padding: 0.85rem 0;
}
.toxic-row .rank { grid-area: rank; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.toxic-row .row-main { grid-area: main; min-width: 0; }
.toxic-row .row-sev { grid-area: sev; }
.toxic-row .row-tier { grid-area: tier; }
.toxic-row figure { margin: 0; }
@media (min-width: 40em) {
  .toxic-row { grid-template-columns: 2.5rem minmax(0, 1fr) 6.5rem 9rem; grid-template-areas: "rank main sev tier"; }
  .toxic-row .row-sev, .toxic-row .row-tier { padding-top: 0.3rem; }
}

.strip { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1.5rem; border-top: 1px solid var(--rule); }
@media (min-width: 40em) { .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.strip li { padding: 0; border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent); min-width: 0; }
.strip a { display: flex; gap: 0.6rem; align-items: baseline; min-height: var(--tap); padding: 0.55rem 0; text-decoration: none; }
.strip a:hover .strip-title { text-decoration: underline; text-decoration-color: var(--accent); }
.strip-n { flex: 0 0 1.5rem; font-family: var(--font-display); color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
.strip-title { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.15em; }
.strip .touch { display: block; margin: -0.4rem 0 0 2.1rem; padding-bottom: 0.55rem; font-size: var(--step--1); color: var(--ink-3); font-variant-numeric: tabular-nums; }

.status-line { margin: 2.5rem 0 0; font-size: var(--step--1); line-height: 1.5rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.status-line a { color: var(--ink-2); }

/* --- Findings (/findings, /findings/:n) -------------------------------------------------
   Patterns, not per-row claims: no severity colour anywhere on these pages. */
.finding-index { border-top: 1px solid var(--rule); }
.finding-item { padding: 1rem 0 0.25rem; border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent); }
.finding-item h2 { display: flex; gap: 0.6rem; align-items: baseline; margin: 0 0 0.35rem; font-size: var(--step-1); line-height: 1.25; }
.finding-item h2 a { display: inline-block; min-height: var(--tap); padding: 0.4rem 0; margin: -0.4rem 0; text-decoration-color: var(--rule); }
.finding-item h2 a:hover { text-decoration-color: var(--accent); }
.finding-item p { margin: 0 0 0.75rem 2.1rem; }
.finding-n { flex: 0 0 1.5rem; font-family: var(--font-display); color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; font-weight: 400; }
.finding-dek { color: var(--ink-2); font-style: italic; }
.finding-item .finding-dek { margin-bottom: 0.35rem; }
.finding-title { margin-bottom: 0.4rem; }
h1.finding-title + .finding-dek { margin-top: 0; font-size: var(--step-1); line-height: 1.35; }
.finding-diagram figure { margin: 0 0 1.5rem; }
.finding-diagram figcaption { margin-top: 0.4rem; font-size: var(--step--1); line-height: 1.5rem; color: var(--ink-2); max-width: var(--measure); }
.finding-diagram figcaption b { color: var(--ink); font-weight: 600; }
@media (min-width: 60em) {
  .finding-diagram.wide > :not(.vendors) { max-width: var(--measure); }
  .vendors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; align-items: start; }
}
.vendor .radius { margin: 0 auto; }
.perimeter-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2rem; }
@media (min-width: 30em) { .perimeter-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.perimeter-h { margin: 0 0 0.25rem; font-weight: 600; color: var(--ink); }
.tab-list, .window-list { list-style: none; padding: 0; margin: 0 0 1rem; border-top: 1px solid var(--rule); }
.tab-list li, .window-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.4rem; min-height: var(--tap); padding: 0.3rem 0; border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent); }
.window-list .act-link { margin-left: auto; font-size: var(--step--1); color: var(--ink-2); min-height: var(--tap); display: inline-flex; align-items: center; }
.finding-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: var(--step--1); }
.finding-pager a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* --- Status (/status) and content pages (/methodology, /about, /privacy) ------------------
   Counts sit in Ledger tables with one word-sized bar per row (viz.inlineBar): every bar in a
   table shares the fixed viewBox, so lengths compare down the column. */
.inline-bar { display: inline-block; margin-left: 0.4em; height: 1.2em; width: auto; vertical-align: -0.15em; color: var(--ink-2); overflow: visible; }
td.bar { white-space: nowrap; width: 12rem; }
.bar-fig, .ladder-fig { margin: 0; display: inline-block; }
.bar-fig svg, .ladder-fig svg { display: inline-block; }
table.counts td:first-child { min-width: 8rem; }
@media (max-width: 40em) { td.bar { width: auto; } }
.facts-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem 1.5rem; margin: 0 0 1rem; }
@media (min-width: 40em) { .facts-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.facts-list dt { font-size: var(--step--1); color: var(--ink-3); }
.facts-list dd { margin: 0; font-variant-numeric: tabular-nums; }
.hash-list, .work-list { padding-left: 1.25rem; font-variant-numeric: tabular-nums; }
.tier-list { margin: 0 0 1rem; }
.tier-list > div { padding: 0.6rem 0; border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent); }
.tier-list dt figure { margin: 0 0 0.2rem; }
.tier-list dd { margin: 0; }
table.rubric td:first-child { width: 6rem; }
/* Change-feed company links are row targets on phones: full tap height, not inline prose. */
table.changes td a { display: inline-block; padding: 0.8rem 0; margin: -0.8rem 0; }
/* Hashes: the 12-character prefix is a disclosure; open, the full hash wraps under it. */
details.hash { display: inline-block; }
details.hash summary { cursor: pointer; display: list-item; padding-block: 0.75rem; }
details.hash .hash-full { display: block; overflow-wrap: anywhere; font-size: var(--step--1); }

/* Status page: the count tables span the shell so the shared-scale bars have room; prose keeps the measure. */
main > section.wide > p, main > section.wide > h2 { max-width: var(--measure); }
@media (min-width: 60em) {
  table.counts { width: 100%; max-width: 64rem; }
  table.counts td.bar { width: 22rem; }
  table.counts .inline-bar { height: 1.6em; }
}
/* The theme toggle's label is fixed; its pressed state must be visible, not only aria-pressed. */
.theme-toggle[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }