/* elm-web3 proofs page — classic-style document, zero JS.
   Same token family as the elm-web3-ui gallery so the two pages read as kin. */

:root {
  --bg: #0b0e11;
  --panel: #12161b;
  --line: #232a33;
  --text: #d7dde4;
  --muted: #8b96a3;
  --accent: #37e08d;
  --accent-dim: #1d7a4f;
  --warn: #ffb454;
  --danger: #ff5d6c;
  --blue: #6ab7ff;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serifish: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(1100px 480px at 85% -8%, #12331f22, transparent), var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.65;
}

.page { max-width: 820px; margin: 0 auto; padding: 56px 24px 110px; }

/* ─── hero ─── */
.hero__kicker {
  color: var(--accent); font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; margin: 0 0 6px;
}
.hero h1 { font-size: 34px; letter-spacing: -0.5px; margin: 0 0 14px; line-height: 1.15; }
.hero__lead { color: var(--muted); font-size: 16.5px; max-width: 64ch; margin: 0; }
.hero__links { margin-top: 18px; display: flex; gap: 18px; flex-wrap: wrap; }
.hero__links a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent-dim); font-size: 13px; }
.hero__links a:hover { border-bottom-style: solid; }

/* ─── sections & prose ─── */
.sec { margin-top: 64px; }
.sec h2 {
  font-size: 21px; margin: 0 0 12px; letter-spacing: -0.3px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.sec p { max-width: 70ch; }
.sec a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent-dim); }
.sec a:hover { border-bottom-style: solid; }
.sec em { font-style: normal; color: var(--text); background: #37e08d14; padding: 0 3px; border-radius: 3px; }
.sec code {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px; font-size: 13px;
}

/* ─── figures ─── */
.fig {
  margin: 26px 0 8px; padding: 20px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.fig h3 { margin: 0 0 14px; font-size: 15px; }
.fig__file { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 10px; }
.fig svg { display: block; width: 100%; height: auto; }
.fig figcaption {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
  color: var(--muted); font-size: 13px; line-height: 1.6;
}
.fig figcaption em { color: var(--text); background: none; padding: 0; }

/* ─── stack diagram ─── */
.stacknode rect { fill: #171c23; stroke: var(--line); }
.stacknode text { fill: var(--text); font-size: 14px; text-anchor: middle; font-family: var(--mono); }
.stacknode .sub { fill: var(--muted); font-size: 10px; }
.wire { stroke: #3a4552; stroke-width: 1.4; }
.ledger rect { fill: #0f1f17; stroke: var(--accent-dim); }
.ledger text { fill: var(--accent); font-size: 11px; text-anchor: middle; font-family: var(--mono); }

/* ─── coverage bars ─── */
.bar rect { rx: 4; }
.bar__label { fill: var(--muted); font-size: 12px; font-family: var(--mono); }
.bar__n { fill: var(--text); font-size: 13px; font-family: var(--mono); font-weight: 700; }
.bar--proved rect { fill: var(--accent); }
.bar--tlc rect    { fill: #2bb3a3; }
.bar--fuzz rect   { fill: var(--blue); }
.bar--auth rect   { fill: #56616e; }
.bar--sorry rect  { fill: #3a4552; }

/* ─── state machine diagrams ─── */
.st rect { fill: #171c23; stroke: #3a4552; stroke-width: 1.3; }
.st text { fill: var(--text); font-size: 13px; text-anchor: middle; font-family: var(--mono); }
.st--rest rect { stroke: var(--muted); stroke-dasharray: 4 3; }
.st--ok rect   { stroke: var(--accent); }
.st--warn rect { stroke: var(--warn); }
.st--bad rect  { stroke: var(--danger); }
.e { fill: none; stroke: #5a6572; stroke-width: 1.4; }
.e--loop { stroke: var(--accent-dim); }
.el { fill: var(--muted); font-size: 10.5px; font-family: var(--mono); text-anchor: middle; }
.el--r { fill: #b9836a; }

/* ─── corrections ledger ─── */
.sec--ledger { }
.ledgerlist { padding-left: 22px; max-width: 72ch; }
.ledgerlist li { margin-bottom: 16px; color: var(--muted); }
.ledgerlist li strong { color: var(--text); display: block; margin-bottom: 2px; }
.ledgerlist code { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: 12.5px; }

/* ─── footer ─── */
.foot { margin-top: 72px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.foot a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent-dim); }
.foot__made { font-size: 12px; }

@media (max-width: 640px) {
  .hero h1 { font-size: 26px; }
  .page { padding-top: 36px; }
}

.hero__version { font-size: 10px; color: var(--bg); background: var(--accent); border-radius: 999px; padding: 2px 8px; font-weight: 700; letter-spacing: 0; vertical-align: middle; }