/* One stylesheet, no inline styles (the security policy forbids them). Design pass 3, "Field",
   made calmer (docs/design/2026-10-03-field-brief.md, and the operator's approved calmer mock):
   pleasant to read first, impressive second. One raised surface, the verdict; everything else
   is separated by spacing and hairlines.

   Colour, by role and nothing else:
   - gold is money and the primary action, plus one dot of "you are here" in the nav and the
     brand mark beside the name;
   - steel carries information: the offline status, the reasons' meters, links and focus;
   - severity is a small dot (red High, amber Medium), always beside its word in body colour;
   - neutrals are warm in the dark theme, Stripe's navy and slate in the light one.
   Every text colour passes WCAG AA (4.5:1) on every surface it sits on, in both themes; the
   ratios are beside the tokens, worked out from the hex values.

   Type: Cabinet Grotesk for the verdict and headings, Satoshi for text, JetBrains Mono for
   figures, ids and the small labels. Six sizes, each a token (--text-*). All three fonts are
   served from web/fonts/, unmodified, each beside its licence (web/NOTICES.txt).

   Motion: one entrance when results arrive (the verdict, then Why: 280ms, 120ms apart, on
   transform and opacity, ease-out-quart); an exception opens on its height where the browser can
   animate a <details>. Reduced motion turns every animation and transition off. */

@font-face {
  font-family: "Cabinet Grotesk";
  src: url("fonts/CabinetGrotesk-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens: the dark theme, where every visit starts ---------- */

:root {
  color-scheme: dark;

  --canvas: #0a0b0d;
  --raised: #101215; /* the verdict panel */
  --hover: #14171b;
  --pressed: #1a1d22;
  --line: #1c1f23;
  --line-2: #262a30;

  --ink: #f2efe9; /* headings and figures: 17.2 on the canvas, 16.4 raised */
  --body: #d8d4cc; /* 13.3 / 12.7 */
  --muted: #a8a59d; /* 8.0 on the canvas, 6.9 on --pressed */
  --faint: #888b92; /* 5.8 on the canvas, 5.3 on --hover, 4.95 on --pressed */
  --disabled: #63666c; /* disabled controls only (exempt) */

  --gold: #d6a650; /* 8.8 / 8.4 */
  --gold-hi: #e0b469;
  --gold-press: #c4923c;
  --gold-ink: #15100a; /* 8.5 on --gold */
  /* The primary button's fill: the gold itself in the dark. */
  --gold-fill: var(--gold);
  --gold-fill-hi: var(--gold-hi);
  --gold-fill-press: var(--gold-press);
  --gold-fill-ink: var(--gold-ink);
  --gold-fill-edge: var(--gold);
  --steel: #7f9cb9; /* 6.9 / 6.6 */
  --link: #a9bfd6; /* 10.4 / 9.9 */
  --focus: #8fb0cf;
  --crit: #e46b5d;
  --warn: #d9a54a;

  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' \
width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' \
numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' \
filter='url(%23n)'/></svg>");
  --grain-o: 0.16;
  --hero-wash: radial-gradient(90% 120% at 0% 0%, rgba(214, 166, 80, 0.07), transparent 60%);
  --lift: none; /* the verdict panel's shadow: none in the dark, depth is its surface */
  --button-shadow: none;

  --display: "Cabinet Grotesk", "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* The six sizes. */
  --text-xs: 0.8125rem; /* mono labels, the meta line, notes, the footer */
  --text-sm: 0.875rem; /* the list, tables, secondary text */
  --text-base: 1rem; /* body */
  --text-lg: 1.1875rem; /* the money line, the welcome's lead */
  --text-xl: 1.375rem; /* the page heading and the section headings */
  --text-hero: 2.75rem; /* the verdict and the welcome */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --space-7: 4rem;

  --bar-h: 3.5rem;
  --nav-w: 13.5rem;
  --prose: 68ch;
  --column: 62rem; /* the one right edge every block shares; prose inside keeps --prose */
  --target: 2.75rem; /* 44px */
  --radius: 9px; /* buttons, fields */
  --radius-lg: 16px; /* the verdict and welcome panels */
  --radius-md: 8px; /* the theme switch */
  --radius-sm: 6px; /* the switch's halves, the nav's links */
  --radius-xs: 3px; /* the meter */
  /* What sticks at the top while she scrolls: the bar here; the bar and the nav strip below
     60rem; the strip alone below 40rem. Every jump target lands below it. */
  --stick: var(--bar-h);
  --ease: cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */

  font-family: var(--sans);
  font-size: 100%;
  font-kerning: normal;
  font-synthesis: none;
  line-height: 1.6;
  color: var(--body);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- The light theme: a cool canvas, tinted panels, one Stripe shadow ---------- */

:root[data-theme="light"] {
  color-scheme: light;

  --canvas: #f7f8fa;
  --raised: #fbfcfd;
  --hover: #eef1f5;
  --pressed: #e5e9ef;
  --line: #e6e9ee;
  --line-2: #d8dde5;

  --ink: #0b1b2e; /* 16.3 / 16.9 */
  --body: #33445c; /* 9.3 / 9.6 */
  --muted: #4a586d; /* 6.8 on the canvas, 5.9 on --pressed */
  --faint: #5a6679; /* 5.5 on the canvas, 5.1 on --hover, 4.8 on --pressed */
  --disabled: #9aa3b1;

  --gold: #8f6312; /* gold text: 5.0 / 5.2 */
  --gold-hi: #7d560f;
  --gold-press: #6c4a0c;
  --gold-ink: #ffffff;
  /* The primary button in daylight: a brighter gold under navy text (6.5:1), not brown. */
  --gold-fill: #c9952f;
  --gold-fill-hi: #d4a240;
  --gold-fill-press: #b9862a;
  --gold-fill-ink: var(--ink);
  --gold-fill-edge: #b0801f; /* a hair darker, so the button has an edge on the pale canvas */
  --steel: #4c6a88; /* 5.3 / 5.5 */
  --link: #2f4b6e; /* 8.4 / 8.7 */
  --focus: #2f4b6e;
  --crit: #c8443a;
  --warn: #a8721a;

  --grain-o: 0;
  --hero-wash: none;
  --lift: 0 1px 2px rgba(11, 27, 46, 0.05), 0 8px 24px -14px rgba(50, 50, 93, 0.25);
  --button-shadow: 0 1px 1px rgba(11, 27, 46, 0.05);
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: calc(var(--stick) + var(--space-4));
}

/* Every jump target lands below whatever sticks. */
.completeness,
.welcome,
.stopped,
.records,
.privacy,
.headline section[id] {
  scroll-margin-top: calc(var(--stick) + var(--space-4));
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--body);
  font-size: var(--text-base);
}

p,
li,
h1,
h2,
h3,
h4,
caption {
  max-width: var(--prose);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
  transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease);
}

a:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* A link's ring follows its text; a button keeps its own corners. */
a:focus-visible {
  border-radius: 2px;
}

/* A screen's heading takes focus when the screen is drawn (so a screen reader starts there); it
   is not a control, so it draws no ring. */
h2[tabindex="-1"]:focus {
  outline: none;
}

/* Visually hidden, still read aloud. */
.sep {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[hidden] {
  display: none !important;
}

/* Figures line up wherever they appear. */
table,
.money,
.meta,
.requests,
.gains,
.effect,
.reasons,
.section-count {
  font-variant-numeric: tabular-nums lining-nums;
}

.skip {
  position: absolute;
  left: -100rem;
  z-index: 40;
}

.skip:focus {
  left: var(--space-4);
  top: var(--space-2);
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding: 0 var(--space-4);
  border-radius: var(--radius);
  background: var(--raised);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line-2);
}

/* ---------- The top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--bar-h);
  padding: 0 var(--space-5);
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}

.mark {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--gold);
}

.crumb {
  min-width: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The offline status: a steel dot and its word, quiet. It breathes while work goes on. */
.pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.pill-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--steel);
}

.pill[data-state="failed"] .pill-dot {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--faint);
}

/* Dark | Light, its state visible: the pressed half is lifted. */
.theme-switch {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
}

/* One rule for every state of the switch's halves (no hover leak from the base button); the 44px
   target reaches beyond the drawn 32px. */
.theme-switch button,
.theme-switch button:hover,
.theme-switch button:active {
  position: relative;
  min-height: 2rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 500;
  transform: none;
  /* The state changes at once: no fade to read as half on. */
  transition: none;
}

.theme-switch button:hover {
  color: var(--ink);
}

.theme-switch button[aria-pressed="true"] {
  background: var(--hover);
  color: var(--ink);
}

.theme-switch button::after {
  content: "";
  position: absolute;
  inset: -6px -1px;
}

/* ---------- The shell: the nav beside the content ---------- */

.shell {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  min-height: calc(100vh - var(--bar-h));
}

.sections {
  position: sticky;
  top: var(--bar-h);
  align-self: start;
  height: calc(100vh - var(--bar-h));
  overflow-y: auto;
  padding: var(--space-6) var(--space-3);
}

.sections-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.section-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}

.section-link::before {
  content: "";
  flex: none;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: transparent;
}

.section-link:hover {
  background: var(--hover);
  color: var(--ink);
}

.section-link:active {
  background: var(--pressed);
}

.section-link[aria-current="location"] {
  color: var(--ink);
}

.section-link[aria-current="location"]::before {
  background: var(--gold);
}

.section-count {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--faint);
}

.content {
  min-width: 0;
  padding: var(--space-6) var(--space-6) var(--space-7);
}

.status {
  max-width: var(--prose);
  margin-bottom: var(--space-5);
  color: var(--faint);
  font-size: var(--text-xs);
}

/* ---------- Controls ---------- */

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  min-height: var(--target);
  padding: 0 1.125rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  box-shadow: var(--button-shadow);
  cursor: pointer;
  text-align: left;
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    color 160ms var(--ease),
    transform 120ms var(--ease);
}

button:hover {
  background: var(--hover);
  border-color: var(--faint);
}

button:active {
  background: var(--pressed);
  transform: translateY(1px);
}

button.primary {
  background: var(--gold-fill);
  border-color: var(--gold-fill-edge);
  color: var(--gold-fill-ink);
}

button.primary:hover {
  background: var(--gold-fill-hi);
  border-color: var(--gold-fill-hi);
}

button.primary:active {
  background: var(--gold-fill-press);
  border-color: var(--gold-fill-press);
}

button:disabled,
button:disabled:hover,
button:disabled:active,
button.primary:disabled {
  cursor: not-allowed;
  transform: none;
  border-color: var(--line);
  background: transparent;
  box-shadow: none;
  color: var(--disabled);
}

textarea {
  font: inherit;
  font-family: var(--mono);
  font-size: var(--text-xs);
  width: 100%;
  max-width: var(--column);
  padding: var(--space-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--raised);
  color: var(--ink);
}

.note {
  color: var(--muted);
  font-size: var(--text-sm);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--column);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.actions .note,
.actions textarea {
  flex-basis: 100%;
  margin: 0;
}

/* ---------- Headings ---------- */

.headline > h2,
.headline section > h3,
.privacy > h2,
.privacy-collapsed > summary h2,
.records > summary h3 {
  font-family: var(--display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* The gold full stop. */
.stop {
  color: var(--gold);
}

.welcome h2::after {
  content: ".";
  color: var(--gold);
}

/* ---------- The welcome: one clear panel ---------- */

.welcome {
  position: relative;
  display: grid;
  gap: var(--space-4);
  max-width: var(--column);
  padding: 3rem var(--space-6) 2.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--hero-wash), var(--raised);
  box-shadow: var(--lift);
  overflow: hidden;
  isolation: isolate;
}

.welcome h2 {
  font-family: var(--display);
  font-size: var(--text-hero);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.welcome .intro {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--body);
  max-width: 46ch;
}

.welcome > p:not(.intro) {
  color: var(--muted);
}

.start {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.start button.primary {
  min-height: 3rem;
  padding: 0 var(--space-5);
  font-size: var(--text-base);
}

/* What this version leaves out: faint, under the button, out of the way. */
.welcome > p.not-yet {
  margin-top: var(--space-2);
  color: var(--faint);
  font-size: var(--text-xs);
}

/* ---------- The results ---------- */

.headline {
  display: grid;
  justify-items: start;
}

.headline > * {
  width: 100%;
  max-width: var(--column);
}

.headline > h2 {
  overflow-wrap: anywhere;
}

/* The meta line: period, rows read and when, in small mono. */
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  max-width: none;
  margin-top: var(--space-2);
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--faint);
}

.headline > .warnings {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-2);
}

.warnings h3 {
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}

.warnings ul {
  margin: 0;
  padding-left: var(--space-5);
}

/* The verdict panel: the page's one raised surface. */
.completeness {
  position: relative;
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding: 2.25rem var(--space-6) 2.125rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--hero-wash), var(--raised);
  box-shadow: var(--lift);
  overflow: hidden;
  isolation: isolate;
}

/* Film grain, the dark theme only, on the verdict and the welcome. */
.completeness::before,
.welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: var(--grain-o);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.verdict-state {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--muted);
}

/* Not confirmed: an open steel ring; confirmed: a filled one. Never red: red is High. */
.state-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--steel);
}

.completeness[data-confirmed="true"] .state-dot {
  background: var(--steel);
}

.completeness .verdict-status {
  font-family: var(--display);
  font-size: var(--text-hero);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.at-stake {
  font-size: var(--text-lg);
  line-height: 1.5;
  max-width: 46ch;
}

/* The money: gold, Satoshi at 600 in tabular figures; "about" stays in body colour. */
.money {
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
}

.at-stake-note {
  margin-top: calc(-1 * var(--space-3));
  color: var(--muted);
  font-size: var(--text-sm);
}

.effect {
  color: var(--muted);
  font-size: var(--text-sm);
}

.actions.deliverables {
  margin-top: var(--space-1);
  padding-top: 0;
  border-top: 0;
}

.actions.deliverables .note {
  flex: 1 1 14rem;
  font-size: var(--text-xs);
  color: var(--faint);
}

/* ---------- Sections below the verdict ---------- */

/* Zero specificity, so Why's own margin below wins. */
.headline > :where(section:not(.completeness)),
.headline > .records {
  margin-top: var(--space-7);
}

.headline > .why {
  margin-top: var(--space-6);
}

.headline section > h3 {
  margin-bottom: var(--space-2);
}

.headline section > .note {
  max-width: var(--prose);
}

.headline section > .note + .note {
  margin-top: var(--space-1);
}

.changes ul {
  padding-left: var(--space-5);
}

/* Why: the reasons as a short ledger, then the engine's sentence one click away. */
.why-count {
  color: var(--muted);
}

.reasons {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.reasons li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem 2.5rem;
  gap: var(--space-4);
  align-items: center;
  max-width: none;
  min-height: 3.125rem;
  padding: var(--space-2) 2px;
  border-bottom: 1px solid var(--line);
}

.reasons a {
  display: flex;
  align-items: center;
  min-height: var(--target);
  color: var(--ink);
  text-decoration: none;
}

.reasons a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* The meter: eight steps, the engine's meter_step for each reason, the largest reason full. */
.meter {
  height: 6px;
  border-radius: var(--radius-xs);
  background: var(--line);
  overflow: hidden;
}

.meter i {
  display: block;
  height: 100%;
  border-radius: var(--radius-xs);
  background: var(--steel);
  opacity: 0.75;
}

.meter-1 i { width: 12.5%; }
.meter-2 i { width: 25%; }
.meter-3 i { width: 37.5%; }
.meter-4 i { width: 50%; }
.meter-5 i { width: 62.5%; }
.meter-6 i { width: 75%; }
.meter-7 i { width: 87.5%; }
.meter-8 i { width: 100%; }

.reason {
  display: grid;
  min-width: 0;
}

.listed-under {
  margin-top: calc(-1 * var(--space-2));
  padding-bottom: var(--space-2);
  font-size: var(--text-xs);
  color: var(--faint);
}

.reasons .n {
  font-size: var(--text-sm);
  color: var(--ink);
  text-align: right;
}

.full-statement {
  margin-top: var(--space-3);
  color: var(--muted);
}

/* What the records show, under an exception's plain line: closed, one click away. */
.seen > .statement {
  margin-top: var(--space-1);
}

.full-statement > summary,
.seen > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target);
  cursor: pointer;
  list-style: none;
  color: var(--muted);
  font-size: var(--text-sm);
}

.full-statement > summary::-webkit-details-marker,
.seen > summary::-webkit-details-marker {
  display: none;
}



.full-statement > summary:hover,
.seen > summary:hover {
  color: var(--ink);
}

.full-statement .verdict {
  font-size: var(--text-sm);
  line-height: 1.65;
}

/* Exception ids in prose, set in mono and never broken across lines. */
.full-statement .verdict a,
.exception-body a,
.letter a,
.changes a,
.effect a {
  font-family: var(--mono);
  font-size: var(--text-xs);
  white-space: nowrap;
}

/* ---------- Exceptions: rows, no frame, quiet severity ---------- */

.headline > .exceptions {
  max-width: var(--column);
}

.exception-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.exception-group h4 {
  padding: 1.375rem 4px var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.25rem;
  max-width: none;
  color: var(--muted);
}

.group-count {
  padding: 1.375rem 4px var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Open all and Close all, quiet, above the column headings. */
.list-tools {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.list-tools button {
  min-height: 2rem;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  position: relative;
}

.list-tools button::after {
  content: "";
  position: absolute;
  inset: -6px 0;
}

/* Its own stacking layer below the sticky headings, so nothing in it shows through them. */
.exception-list {
  position: relative;
  z-index: 0;
  grid-column: 1 / -1;
  list-style: none;
  padding: 0;
  margin: 0;
}

.exception-list > li {
  max-width: none;
  border-bottom: 1px solid var(--line);
  /* A linked line lands below the sticky bar and the sticky column headings: the bar is 3.5rem;
     the headings one row of 1.25rem text, 0.5rem of padding above and 0.625rem below, and a 1px
     rule (about 2.4rem). Below 60rem the nav strip (2.75rem) sits under the bar; below 40rem the
     bar scrolls away and the headings are hidden: see the media queries. */
  scroll-margin-top: 6.25rem;
}

.exception-list > li:first-child {
  border-top: 1px solid var(--line);
}

.exception-columns,
.exception > details > summary {
  display: grid;
  /* Every track a fixed size or a share of what is left, so a long value wraps in its own
     column and never moves the account or the asset. The account is capped, so the asset sits
     beside it and the sterling takes the rest. */
  grid-template-columns: 1.2rem 5rem 6rem minmax(0, 16rem) 6.5rem minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: center;
  padding: 0 4px;
}

/* The column headings: one hairline row, kept in view below the bar while the list scrolls. */
.exception-columns {
  position: sticky;
  top: var(--bar-h);
  /* Above every row and its open body (whose height animates in its own layer). */
  z-index: 15;
  isolation: isolate;
  margin-top: var(--space-5);
  padding-top: var(--space-2);
  padding-bottom: 0.625rem;
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: 1.25rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums lining-nums;
  background: var(--canvas);
  border-bottom: 1px solid var(--line-2);
}

.exception > details > summary {
  font-variant-numeric: tabular-nums lining-nums;
  min-height: 3.125rem;
  padding-block: var(--space-1);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-sm);
  transition: background-color 160ms var(--ease);
}

.exception > details > summary::-webkit-details-marker {
  display: none;
}

.x-id {
  grid-column: 2;
  font-family: var(--mono);
  color: var(--ink);
}

.x-severity {
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  color: var(--body);
}

.exception-columns .x-severity {
  font-weight: 400;
  color: inherit;
}

.sev-dot {
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--faint);
}

/* Most rows are High: its dot is quieter (smaller, softer) and the word carries the meaning. */
.x-severity.high .sev-dot {
  width: 0.375rem;
  height: 0.375rem;
  background: var(--crit);
  opacity: 0.8;
}

.x-severity.medium .sev-dot {
  background: var(--warn);
}

.x-account {
  grid-column: 4;
  overflow-wrap: anywhere;
}

.x-asset {
  grid-column: 5;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--muted);
}

.x-value {
  grid-column: 6;
  text-align: right;
  font-family: var(--mono);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.exception-columns .x-id,
.exception-columns .x-asset,
.exception-columns .x-value {
  font-family: var(--sans);
  font-size: inherit;
  color: inherit;
}

.none,
.counted {
  color: var(--faint);
}

/* The words beside a figure ("about", "a loss of", ", plus 2 items with no price") are words:
   the text face, faint, so the figure itself reads first. */
.x-value .word,
td.num .word {
  font-family: var(--sans);
  color: var(--faint);
}

/* "No asset given" and its kind are words, not ids: Satoshi, so they fit their track. */
.x-asset .none,
.x-value .none {
  font-family: var(--sans);
}

.counted-in {
  display: block;
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--faint);
}

.exception.resolved > details > summary {
  color: var(--faint);
}

.exception > details > summary:hover,
.records > summary:hover,
.privacy-collapsed > summary:hover {
  background: var(--hover);
}

.exception > details > summary:active,
.records > summary:active,
.privacy-collapsed > summary:active {
  background: var(--pressed);
}

.exception > details > summary:focus-visible,
.records > summary:focus-visible,
.privacy-collapsed > summary:focus-visible {
  outline-offset: -2px;
}

/* A drawn chevron: right when closed, down when open. */
/* One drawn chevron for every disclosure on the page: right when closed, down when open. */
.exception > details > summary::before,
.records > summary::before,
.privacy-collapsed > summary::before,
.letter-group > summary::before,
.full-statement > summary::before,
.seen > summary::before,
.technical > summary::before {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  border-right: 1.5px solid var(--faint);
  border-bottom: 1.5px solid var(--faint);
  transform: rotate(-45deg);
  transition: transform 200ms var(--ease);
}

.exception > details > summary::before {
  grid-column: 1;
  justify-self: center;
}

.exception > details[open] > summary::before,
.records[open] > summary::before,
.privacy-collapsed[open] > summary::before,
.letter-group[open] > summary::before,
.full-statement[open] > summary::before,
.seen[open] > summary::before,
.technical[open] > summary::before {
  transform: translateY(-0.125rem) rotate(45deg);
}

.exception-body {
  display: grid;
  gap: var(--space-2);
  max-width: calc(var(--prose) + 12rem);
  padding: var(--space-1) var(--space-4) var(--space-5) calc(4px + 1.2rem + 5rem + 2 * var(--space-3));
  font-size: var(--text-sm);
  color: var(--muted);
}

.exception-body p {
  overflow-wrap: anywhere;
}

.exception-body .plain {
  color: var(--body);
  font-size: var(--text-base);
}

.label {
  font-weight: 600;
  color: var(--body);
}

.show-rows {
  justify-self: start;
  margin-top: var(--space-2);
}

.back {
  margin-top: var(--space-3);
}

.back a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  font-size: var(--text-sm);
}

/* ---------- Tables: hairlines, a mono header, numbers to the right ---------- */

.rows {
  overflow-x: auto;
  margin-top: var(--space-2);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  color: var(--body);
}

caption {
  text-align: left;
  color: var(--muted);
  padding-bottom: var(--space-2);
  font-size: var(--text-xs);
}

th,
td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

thead th {
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--faint);
  border-bottom-color: var(--line-2);
  white-space: nowrap;
}

tbody th {
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

td.num,
th.num {
  text-align: right;
  white-space: nowrap;
}

/* Sterling and amounts in mono; times and dates in tabular Satoshi. */
td.num {
  font-family: var(--mono);
  font-size: var(--text-xs);
}

td.time,
td.date {
  white-space: nowrap;
  color: var(--muted);
}

/* ---------- The evidence request, the gains, the records ---------- */

.evidence > p:not(.note) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* The evidence request: a hairline list like the exceptions, one group per holder (the
   engine's own headings, kept as written: they are names), each opening, with its count. */
.letter {
  margin-top: var(--space-5);
}

.letter-group > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target);
  padding: var(--space-3) 4px var(--space-2);
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid var(--line-2);
  transition: background-color 160ms var(--ease);
}

.letter-group > summary::-webkit-details-marker {
  display: none;
}

.letter-group > summary:hover {
  background: var(--hover);
}

.letter-group > summary:focus-visible {
  outline-offset: -2px;
}

.letter-heading {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
}

.letter-count {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--faint);
  font-variant-numeric: tabular-nums lining-nums;
}

.letter-items {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.letter,
.records-body .note,
.warnings li,
.changes li,
.headline h2 {
  overflow-wrap: anywhere;
}

/* Each item: its number in the gutter, the engine's words, the exceptions it closes at the right. */
.letter .item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: baseline;
  max-width: none;
  padding: var(--space-3) 4px;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--body);
}

.item-n {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--faint);
  text-align: right;
}

.item-words {
  max-width: var(--prose);
}

.item-ids {
  text-align: right;
  white-space: nowrap;
}

.gains > p {
  margin-top: var(--space-2);
  color: var(--muted);
}

.gains > .gains-result {
  margin-top: 0;
  color: var(--ink);
  font-size: var(--text-lg);
  font-weight: 500;
}

.gains table {
  width: auto;
  min-width: 18rem;
  margin: var(--space-4) 0;
}

.records {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.records > summary,
.privacy-collapsed > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.5rem;
  padding: 0 4px;
  cursor: pointer;
  list-style: none;
  transition: background-color 160ms var(--ease);
}

.records > summary::-webkit-details-marker,
.privacy-collapsed > summary::-webkit-details-marker {
  display: none;
}

.records > summary h3 {
  margin: 0;
  padding: 0;
}

.records > summary::before,
.privacy-collapsed > summary::before {
  margin: 0 0.3rem;
}

.records-body {
  overflow-x: auto;
  padding-bottom: var(--space-4);
}

.records-body .note {
  padding-top: var(--space-3);
}

.disclaimer {
  margin-top: var(--space-5);
  color: var(--faint);
  font-size: var(--text-sm);
}

/* ---------- A stop ---------- */

.stopped {
  display: grid;
  gap: var(--space-4);
  max-width: var(--column);
}

.stopped h2 {
  font-family: var(--display);
  font-size: var(--text-hero);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.stopped .advice {
  font-size: var(--text-lg);
}

.details {
  padding-left: var(--space-3);
  font-size: var(--text-xs);
  color: var(--muted);
  box-shadow: inset 1px 0 0 var(--line-2);
  overflow-wrap: anywhere;
}

.technical > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  min-height: var(--target);
  cursor: pointer;
  color: var(--muted);
  font-size: var(--text-sm);
}

.technical > summary::-webkit-details-marker {
  display: none;
}

.full-statement > summary::before,
.seen > summary::before,
.technical > summary::before,
.letter-group > summary::before {
  margin: 0 0.3rem;
}

.technical > summary:hover {
  color: var(--ink);
}

.details strong {
  font-family: var(--sans);
  color: var(--ink);
}

.stopped .actions {
  margin-top: var(--space-2);
  padding-top: 0;
  border-top: 0;
}

/* ---------- The privacy statement, beneath every screen: plain text ---------- */

.privacy {
  max-width: var(--column);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.privacy > h2 {
  margin-bottom: var(--space-4);
}

.privacy p + p,
.privacy-body > p + p {
  margin-top: var(--space-3);
}

.privacy h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
}

.privacy ol {
  margin: 0;
  padding-left: var(--space-5);
}

.privacy li + li {
  margin-top: var(--space-2);
}

.privacy-collapsed {
  padding-top: 0;
  border-bottom: 1px solid var(--line);
}

.privacy-body {
  padding: 0 4px var(--space-5);
}

.usage-list {
  margin: var(--space-2) 0 var(--space-3);
  padding-left: var(--space-5);
}

.usage-list li + li {
  margin-top: var(--space-1);
}

.usage {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target);
  margin: var(--space-3) 0 var(--space-1);
}

.usage input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--steel);
  cursor: pointer;
}

.usage label {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

/* ---------- The update note and the footer ---------- */

.update-slot:empty {
  display: none;
}

.update-slot {
  max-width: var(--column);
  margin-bottom: var(--space-5);
}

.update {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  max-width: none;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  color: var(--body);
  font-size: var(--text-sm);
}

.update button {
  margin-left: auto;
}

/* The trust line: a steel dot, the request counter in full, then the links. */
footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-5);
  max-width: var(--column);
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: var(--text-xs);
}

footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  color: var(--muted);
}

.requests {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 100%;
  max-width: none;
  padding: var(--space-2) 0;
  color: var(--body);
  font-size: var(--text-sm);
}

.requests::before {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--steel);
}

.maker {
  margin-left: auto;
}

/* Send feedback: the email link, and the address to select or copy for a laptop with no mail
   app. In the footer it sits on the trust line's row; on a stop it follows the advice. */
.feedback-slot {
  flex: 1 1 100%;
}

.feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  max-width: none;
  color: var(--faint);
  font-size: var(--text-sm);
}

.feedback-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  font-weight: 600;
}

.feedback-address {
  font-size: var(--text-xs);
  color: var(--body);
  user-select: all;
}

.feedback-copy {
  min-height: 2rem;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  position: relative;
}

/* The 44px target, beyond the drawn 32px. */
.feedback-copy::after {
  content: "";
  position: absolute;
  inset: -6px 0;
}

.feedback .note,
.feedback textarea {
  flex-basis: 100%;
}

.feedback .note:empty {
  display: none;
}

.stopped .feedback {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

/* ---------- Motion ---------- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes open-body {
  from {
    opacity: 0;
  }
}

@keyframes breathe {
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* The one entrance, as the results arrive: the verdict, then Why, 120ms apart. */
  .headline[data-enter] > .completeness,
  .headline[data-enter] > .why {
    animation: rise 280ms var(--ease) both;
  }

  .headline[data-enter] > .why {
    animation-delay: 120ms;
  }

  :root {
    interpolate-size: allow-keywords;
  }

  .exception > details::details-content {
    block-size: 0;
    overflow: hidden;
    /* Only the height: its contents are there to Tab to the moment it opens. */
    transition: block-size 260ms var(--ease);
  }

  .exception > details[open]::details-content {
    block-size: auto;
  }

  .exception > details[open] .exception-body {
    animation: open-body 260ms var(--ease) both;
  }

  .pill[data-state="loading"] .pill-dot,
  .pill[data-state="running"] .pill-dot,
  .pill[data-state="saving"] .pill-dot {
    animation: breathe 1.6s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Narrower screens ---------- */

/* Below 60rem the nav becomes a strip of anchors under the bar, scrolling sideways, its ends
   fading so a cut-off link reads as more to come. */
@media (max-width: 60rem) {
  .shell {
    display: block;
  }

  .sections {
    position: sticky;
    top: var(--bar-h);
    z-index: 20;
    height: auto;
    overflow: visible;
    padding: 0;
    border-bottom: 1px solid var(--line);
    background: var(--canvas);
  }

  /* The links scroll; the strip itself does not, so its fade stays at the edge and never covers
     anything outside it. */
  /* Positioned, so the read-aloud counts (.sep, absolutely placed) are clipped with the links
     instead of reaching past the page's edge. */
  .sections-list {
    position: relative;
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    padding: 0 var(--space-6) 0 var(--space-4);
    scrollbar-width: none;
  }

  .sections::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--space-6);
    background: linear-gradient(90deg, transparent, var(--canvas));
    pointer-events: none;
  }

  .section-link {
    white-space: nowrap;
  }

  .content {
    padding: var(--space-5) var(--space-5) var(--space-7);
  }

  :root {
    --stick: calc(var(--bar-h) + 2.75rem);
  }

  .exception-columns {
    top: calc(var(--bar-h) + 2.75rem);
  }

  /* The bar (3.5rem), the nav strip (2.75rem) and one row of headings (about 2.4rem). */
  .exception-list > li {
    scroll-margin-top: 9rem;
  }

  /* Narrower tracks for the account and asset, so the sterling keeps its room. */
  .exception-columns,
  .exception > details > summary {
    grid-template-columns: 1.2rem 5rem 6rem minmax(0, 11rem) 4.5rem minmax(0, 1fr);
  }
}

/* On a narrow screen an exception's line takes two rows: id, severity and value, then the
   account and asset. The id and severity tracks are fixed and wide enough for "E-0000" and
   "Medium"; the value takes what is left and wraps, so at 320px nothing runs off the side. The
   column headings are hidden: each line reads its own labels aloud. The top bar scrolls away
   (it may wrap), and only the nav strip stays. */
@media (max-width: 40rem) {
  :root {
    --text-hero: 2rem;
    --text-xl: 1.25rem;
    --stick: 2.75rem;
  }

  .topbar {
    position: static;
    flex-wrap: wrap;
    height: auto;
    min-height: var(--bar-h);
    gap: var(--space-2) var(--space-4);
    padding: var(--space-2) var(--space-4);
  }

  .crumb {
    display: none;
  }

  /* The brand and the switch on the first row, the status word under them. */
  .theme-switch {
    margin-left: auto;
  }

  .pill {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
  }

  .sections {
    top: 0;
  }

  .actions.deliverables button.primary {
    flex: 1 1 100%;
    justify-content: center;
    text-align: center;
    text-wrap: balance;
    padding-block: var(--space-2);
  }

  /* The nav strip (2.75rem) and room to breathe; there are no sticky headings here. */
  .exception-list > li {
    scroll-margin-top: 3.75rem;
  }

  .content {
    padding: var(--space-5) var(--space-4) var(--space-7);
  }

  .welcome,
  .completeness {
    padding: var(--space-5);
  }

  .reasons li {
    grid-template-columns: minmax(0, 1fr) 2.5rem;
  }

  .reasons .meter {
    display: none;
  }

  .exception-columns {
    display: none;
  }

  .exception > details > summary {
    grid-template-columns: 1rem 4rem 4.5rem minmax(0, 1fr);
    column-gap: var(--space-2);
    row-gap: 2px;
    padding-left: var(--space-1);
    padding-right: var(--space-3);
    padding-block: var(--space-2);
  }

  .x-id {
    grid-column: 2;
    grid-row: 1;
  }

  .x-severity {
    grid-column: 3;
    grid-row: 1;
  }

  .x-value {
    grid-column: 4;
    grid-row: 1;
  }

  .x-account {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  .x-asset {
    grid-column: 4;
    grid-row: 2;
    text-align: right;
  }

  .exception-body {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .gains table {
    min-width: 0;
    width: 100%;
  }

  /* An evidence item's exceptions on their own line under its words. */
  .letter .item {
    grid-template-columns: 2rem minmax(0, 1fr);
    row-gap: var(--space-1);
  }

  .item-ids {
    grid-column: 2;
    text-align: left;
    white-space: normal;
  }
}

/* ---------- Print: the light theme, the work only ---------- */

@media print {
  :root {
    color-scheme: light;
    --canvas: #ffffff;
    --line: #d8dde5;
    --line-2: #c4ccd8;
    --ink: #0b1b2e;
    --body: #33445c;
    --raised: #fafbfc;
    --muted: #4a586d;
    --faint: #5a6679;
    --gold: #8f6312;
    --link: #2f4b6e;
    --steel: #4c6a88;
    --crit: #c8443a;
    --warn: #a8721a;
    --focus: #2f4b6e;
    --grain-o: 0;
    --hero-wash: none;
    --lift: none;
  }

  .topbar,
  .sections,
  .skip,
  .update-slot,
  .actions,
  .show-rows,
  .list-tools {
    display: none !important;
  }

  /* A printout is the page at rest: no entrance or opening is half played when it is taken. */
  *,
  *::before,
  *::after,
  ::details-content {
    animation: none !important;
    transition: none !important;
  }

  details[open]::details-content {
    block-size: auto !important;
  }

  .shell {
    display: block;
  }

  .content {
    padding: 0;
  }

  .exception-columns {
    position: static;
  }
}