/* Components. Ordered as they appear: hero, ledger, bands, figures, close. */

/* ── Hero ──────────────────────────────────────────────────────────────────────
 * The blueprint grid is confined to the hero and fades out downward. Tiling it
 * over the whole page would turn a texture into wallpaper.
 */

.hero {
  position: relative;
  padding: clamp(var(--sp-7), 8vw, var(--sp-9)) var(--sp-5) var(--sp-8);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ink) 7%, transparent) 0 1px, transparent 1px 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 7%, transparent) 0 1px, transparent 1px 100%),
    linear-gradient(to right, color-mix(in srgb, var(--ink) 3.5%, transparent) 0 1px, transparent 1px 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 3.5%, transparent) 0 1px, transparent 1px 100%);
  background-size: 96px 96px, 96px 96px, 12px 12px, 12px 12px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 92%);
  pointer-events: none;
}
.hero__inner { position: relative; max-width: var(--shell); margin: 0 auto; }

/* ── The ledger: the one thing this page is remembered by ──────────────────── */

.ledger {
  margin-top: clamp(var(--sp-6), 5vw, var(--sp-8));
  background: var(--sheet);
  border-radius: var(--radius);
  box-shadow: var(--lift-high);
}

.ledger__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--sp-5) clamp(var(--sp-4), 3vw, var(--sp-6));
  border-bottom: 1px solid var(--rule);
}
.ledger__who { font-weight: 500; letter-spacing: -0.01em; margin-top: var(--sp-2); }

.tally { display: flex; gap: clamp(var(--sp-4), 3vw, var(--sp-6)); }
.tally__cell dt {
  font: 400 var(--fs-micro)/1 var(--type-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tally__cell dd {
  font: 400 1.65rem/1 var(--type-mono);
  font-variant-numeric: tabular-nums;
  margin-top: var(--sp-2);
}
.tally__cell--pencil dd { color: var(--pencil); }

.ledger__summary {
  font-family: var(--type-doc);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-soft);
  padding: var(--sp-5) clamp(var(--sp-4), 3vw, var(--sp-6)) 0;
  max-width: 62ch;
}

/* A slip is one claim. Left: its number. Middle: the sentence, in the document
 * face. Right: four cells, one per check. Failures are struck and annotated. */

.slips { padding: var(--sp-5) 0 0; }

.slip {
  display: grid;
  grid-template-columns: 3.25rem 1fr auto;
  gap: 0 var(--sp-4);
  align-items: start;
  padding: var(--sp-4) clamp(var(--sp-4), 3vw, var(--sp-6));
  border-top: 1px solid var(--rule-soft);
}
.slip:first-child { border-top: 0; }

.slip__n {
  font: 400 var(--fs-mono)/1.7 var(--type-mono);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.slip__text {
  position: relative;
  font-family: var(--type-doc);
  font-size: 1.0625rem;
  line-height: 1.5;
  text-decoration-color: var(--pencil);
  text-decoration-thickness: 1.5px;
  text-decoration-skip-ink: none;
}

/* Struck with `text-decoration` rather than a drawn stroke. A single SVG line across
 * the block struck only the first line of any claim that wrapped — which on a phone is
 * every claim — and read as a rendering fault. The hand-made mark moved to the stamp
 * below, where it is a fixed-size object and cannot be broken by reflow. */
.slip[data-verdict="withheld"] .slip__text { color: var(--ink-faint); }
.slip[data-verdict="withheld"][data-resolved="1"] .slip__text { text-decoration-line: line-through; }

/* The margin note is the auditor's hand: only present when something failed, and
 * it shows the arithmetic rather than the word "error". */
.slip__margin {
  grid-column: 2;
  display: none;
  margin-top: var(--sp-3);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--pencil);
  font: 400 var(--fs-mono)/1.6 var(--type-mono);
  font-variant-numeric: tabular-nums;
  color: var(--pencil);
  opacity: 0;
  transition: opacity 300ms var(--ease) 380ms;
}
.slip[data-verdict="withheld"] .slip__margin { display: block; }
.slip[data-verdict="withheld"][data-resolved="1"] .slip__margin { opacity: 1; }
.slip__margin b { font-weight: 500; color: var(--ink); }
.slip__fault {
  display: block;
  margin-top: var(--sp-1);
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

/* The one hand-made mark on the page, and the audit vernacular the whole design is
 * borrowing from: a document that failed a check gets stamped. Fixed size, so unlike a
 * drawn strike it survives any reflow. */
.stamp {
  float: right;
  margin: -2px 0 var(--sp-2) var(--sp-4);
  padding: 0.28rem 0.5rem;
  border: 1.5px solid var(--pencil);
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px var(--sheet), inset 0 0 0 2.5px var(--pencil);
  font: 500 var(--fs-micro)/1 var(--type-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pencil);
  transform: rotate(-1.6deg) scale(0.86);
  opacity: 0;
  transition: transform 240ms var(--ease) 300ms, opacity 200ms var(--ease) 300ms;
}
.slip[data-resolved="1"] .stamp { transform: rotate(-1.6deg) scale(1); opacity: 1; }

.slip__cite {
  grid-column: 2;
  margin-top: var(--sp-3);
  font: 400 var(--fs-micro)/1.6 var(--type-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.slip__cite span {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-right: var(--sp-2);
}

/* Four cells, one per check. Empty until the check has run — the resolve is the
 * animation, so the page shows work being done rather than a result already in. */
.gutter { display: flex; gap: 3px; padding-top: 2px; }

.cell {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  background: var(--sheet-edge);
  font: 500 var(--fs-micro)/1 var(--type-mono);
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
.cell[data-state="pass"] { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.cell[data-state="fail"] { background: var(--pencil-wash); border-color: var(--pencil); color: var(--pencil); }
.cell[data-state="skip"] { border-style: dashed; }

.ledger__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: flex-start;
  justify-content: space-between;
  margin-top: var(--sp-5);
  padding: var(--sp-5) clamp(var(--sp-4), 3vw, var(--sp-6));
  border-top: 1px solid var(--rule);
  background: var(--sheet-edge);
}
.ledger__note {
  font-size: var(--fs-body);
  color: var(--ink-soft);
  max-width: 46ch;
}
.ledger__note b { color: var(--ink); }

.controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.controls__label {
  font: 400 var(--fs-micro)/1 var(--type-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: var(--sp-2);
}

.chip {
  appearance: none;
  padding: 0.44rem 0.7rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font: 500 var(--fs-mono)/1 var(--type-mono);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.chip:hover { border-color: var(--ink-soft); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--sheet);
}

@media (max-width: 44rem) {
  .slip { grid-template-columns: 2.25rem 1fr; }
  .gutter { grid-column: 2; padding-top: var(--sp-3); }
  .slip__margin, .slip__cite { grid-column: 2; }
}

/* ── Bands ─────────────────────────────────────────────────────────────────── */

.band { padding: clamp(var(--sp-7), 7vw, var(--sp-9)) var(--sp-5); }
.band--well { background: var(--well); border-block: 1px solid var(--rule); }
.band__inner { max-width: var(--shell); margin: 0 auto; }
.band__head { max-width: 52rem; }
.band__head .h2 { margin-top: var(--sp-4); }

/* ── The four checks. A definition list, not cards: they are one apparatus. ── */

.checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  margin-top: var(--sp-7);
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.check { background: var(--sheet); padding: var(--sp-5); }
.check--sharp { background: var(--sheet-edge); box-shadow: inset 3px 0 0 var(--pencil); }

.check__id {
  font: 500 1.1rem/1 var(--type-mono);
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.check__name {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.012em;
  margin-top: var(--sp-3);
}
.check__q {
  font-family: var(--type-doc);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: var(--sp-2);
}
.check__n {
  font: 400 var(--fs-mono)/1 var(--type-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule-soft);
}
.check__n b { font-size: 1.35rem; letter-spacing: 0; color: var(--ink); }
.check--sharp .check__n b { color: var(--pencil); }
.check__note { color: var(--ink-faint); margin-top: var(--sp-3); }

/* ── Stages. Numbered because the order carries real information: each agent can
 * only run on the previous one's schema output, and the gate is between 3 and 4. */

.stages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
.stage {
  position: relative;
  background: var(--sheet);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
}
.stage--gate { box-shadow: var(--lift-high); background: var(--sheet-edge); }
.stage--gate::before {
  content: "verification gate";
  position: absolute;
  top: 0;
  left: var(--sp-5);
  transform: translateY(-50%);
  padding: 0.2rem 0.5rem;
  background: var(--ink);
  color: var(--sheet);
  font: 500 var(--fs-micro)/1.4 var(--type-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stage__n {
  font: 400 var(--fs-micro)/1 var(--type-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.stage__name {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.012em;
  margin-top: var(--sp-2);
}
.stage__body { color: var(--ink-soft); margin-top: var(--sp-3); }

.seam {
  margin-top: auto;
  padding-top: var(--sp-4);
  font: 400 var(--fs-micro)/1.5 var(--type-mono);
  color: var(--ink-faint);
}
.seam span { letter-spacing: 0.12em; text-transform: uppercase; }
.seam code { display: block; margin-top: 2px; font-size: var(--fs-mono); color: var(--ink); }

.boundary {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border-left: 2px solid var(--ink);
  background: var(--sheet);
  color: var(--ink-soft);
  max-width: 56rem;
}

/* ── Readouts. One headline figure with its qualifying rows underneath, because a
 * number quoted without its denominator is the thing this project exists to fix. */

.readouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
.readout {
  background: var(--sheet);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  padding: var(--sp-5);
}
.readout__label {
  font: 500 var(--fs-micro)/1 var(--type-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.readout__fig {
  font: 400 clamp(2.1rem, 3.4vw, 2.7rem)/1 var(--type-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin-top: var(--sp-3);
}
.readout__unit {
  display: block;
  margin-top: var(--sp-2);
  font: 400 var(--fs-micro)/1.4 var(--type-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.readout__rows { margin-top: var(--sp-4); border-top: 1px solid var(--rule-soft); }
.readout__rows li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: var(--fs-body);
  color: var(--ink-soft);
}
.readout__rows b {
  font-family: var(--type-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  color: var(--ink);
}
.readout__note { color: var(--ink-faint); margin-top: var(--sp-4); }
.readout__note.is-weak { box-shadow: inset 2px 0 0 var(--ochre); padding-left: var(--sp-3); }

/* ── Figures ───────────────────────────────────────────────────────────────── */

.calib {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-7);
  align-items: start;
}
@media (max-width: 62rem) { .calib { grid-template-columns: minmax(0, 1fr); } }

.fig {
  background: var(--sheet);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  padding: var(--sp-5);
}
.fig--wide { margin-top: var(--sp-5); }
.fig__cap { display: flex; flex-direction: column; gap: var(--sp-2); }
.fig__title { font-weight: 600; letter-spacing: -0.012em; }
.fig__sub {
  font: 400 var(--fs-micro)/1.5 var(--type-mono);
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.fig__plot { margin-top: var(--sp-5); }
.fig__note { color: var(--ink-faint); margin-top: var(--sp-4); max-width: 54ch; }

.fig__legend { display: flex; gap: var(--sp-4); margin-top: var(--sp-4); }
.key {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font: 400 var(--fs-micro)/1 var(--type-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.key__mark { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.key__mark--dot { background: var(--ink); }
.key__mark--ring { border: 1.5px solid var(--ink-faint); }

/* Chart internals are styled here rather than inline so the palette stays in one
 * place. Only one hue carries data; the second series is distinguished by SHAPE,
 * which keeps identity legible without colour vision and adds no new colour. */
.plot { display: block; width: 100%; height: auto; overflow: visible; }
.plot__axis { stroke: var(--rule); stroke-width: 1; }
.plot__chance { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.plot__gap { stroke: var(--sheet); stroke-width: 4; }
.plot__link { stroke: var(--rule); stroke-width: 1.5; }
.plot__bar { fill: var(--ink); }
.plot__dot { fill: var(--ink); }
.plot__ring { fill: var(--sheet); stroke: var(--ink-faint); stroke-width: 1.5; }
.plot__label { font: 400 var(--fs-micro) var(--type-mono); fill: var(--ink-soft); }
.plot__value { font: 400 var(--fs-mono) var(--type-mono); fill: var(--ink); font-variant-numeric: tabular-nums; }
.plot__row:hover .plot__bar { fill: var(--pencil); }
.plot__row:hover .plot__dot { fill: var(--pencil); }

/* ── The negative result. Set as a document, in the serif, because it is an
 * argument being made rather than a value being displayed. */

.finding {
  background: var(--sheet-edge);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  padding: clamp(var(--sp-5), 3vw, var(--sp-6));
}
.finding__head {
  font-family: var(--type-doc);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-top: var(--sp-3);
  text-wrap: balance;
}
.finding__body {
  font-family: var(--type-doc);
  font-size: 1.0625rem;
  line-height: 1.58;
  color: var(--ink-soft);
  margin-top: var(--sp-4);
}
.finding__body b { color: var(--ink); font-weight: 500; }
.finding__body em { color: var(--ink); }
.finding__body--last {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule-soft);
  font-size: 1rem;
  color: var(--ink-faint);
}

/* ── Close ─────────────────────────────────────────────────────────────────── */

.todo { margin-top: var(--sp-6); max-width: 56rem; }
.todo li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
}
.todo li:last-child { border-bottom: 1px solid var(--rule); }
.todo__state {
  font: 500 var(--fs-micro)/1 var(--type-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.todo__state--now { color: var(--ink); }

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.btn {
  display: inline-block;
  padding: 0.72rem 1.15rem;
  background: var(--ink);
  color: var(--sheet);
  border-radius: var(--radius);
  font: 500 var(--fs-mono)/1 var(--type-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 160ms var(--ease);
}
.btn:hover { background: var(--pencil); }
.cta__note {
  font: 400 var(--fs-micro)/1.4 var(--type-mono);
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.foot {
  padding: var(--sp-6) var(--sp-5);
  border-top: 1px solid var(--rule);
  background: var(--desk-deep);
}
.foot__inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  justify-content: space-between;
  align-items: flex-start;
}
.foot__mark { font-weight: 600; letter-spacing: -0.02em; }
.foot__mark span {
  display: block;
  margin-top: var(--sp-2);
  font: 400 var(--fs-micro)/1.5 var(--type-mono);
  letter-spacing: 0.05em;
  font-weight: 400;
  color: var(--ink-faint);
  max-width: 34ch;
}
.foot__meta { color: var(--ink-faint); max-width: 42ch; font-size: var(--fs-body); }

/* ── Reveal. One device, used once per band, on the way in only. ───────────── */

.reveal { opacity: 0; transform: translateY(10px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .slip__margin { transition: none; }
  .stamp { transition: none; }
  .cell { transition: none; }
  .conn[data-mode="live"] .conn__dot { animation: none; }
}