/* /docs /proof /pools /404 only. Requires tokens.css + site.css. Reuses their variables and components; nothing here redefines a token. */

.page { padding: var(--s6) 0 0; }
.page__head { padding-bottom: var(--s5); border-bottom: var(--rule); margin-bottom: var(--s6); }
.page__head h1 { font-size: var(--fs-xl); font-weight: 500; line-height: var(--lh-tight); letter-spacing: -0.01em; font-variation-settings: "opsz" 144; margin: var(--s2) 0 var(--s3); }
.page__head .dek { max-width: 52ch; margin: 0; }
.status { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin-top: var(--s4); }

/* ---------- docs: toc + prose ---------- */
.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6) var(--col-gap); }
@media (min-width: 900px) { .doc { grid-template-columns: 200px minmax(0, 1fr); } }
.toc { font-family: var(--mono); font-size: var(--fs-sm); }
@media (min-width: 900px) { .toc { position: sticky; top: var(--s5); align-self: start; border-right: var(--rule-soft); padding-right: var(--s4); } }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
@media (min-width: 900px) { .toc ol { display: block; } .toc li { padding: 4px 0; } }
.toc a { text-decoration: none; color: var(--ink-2); }
.toc a:hover { color: var(--accent); text-decoration: underline; }
.prose { max-width: 70ch; min-width: 0; }
.prose section { padding-bottom: var(--s6); scroll-margin-top: var(--s4); }
.prose h2 { font-size: var(--fs-lg); font-weight: 600; font-variation-settings: "opsz" 72; border-top: var(--rule); padding-top: var(--s2); margin-bottom: var(--s4); }
.prose h3 { font-size: var(--fs-md); font-weight: 600; margin: var(--s5) 0 var(--s2); }
.prose p, .prose li { max-width: 68ch; }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 var(--s3); }
.prose li { margin-bottom: var(--s1); }
.prose .pre { margin: var(--s3) 0; }
.prose .ledger { margin: var(--s3) 0; }
.prose .ledger td, .prose .ledger th { padding-right: var(--s3); }
.prose figure { margin: var(--s4) 0; }
.prose figcaption { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--s2); }
.callout { border: var(--rule); background: var(--paper-hi); padding: var(--s3) var(--s4); margin: var(--s4) 0; font-size: 0.9375rem; }
.callout--warn { border-color: var(--accent); }
.callout b { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; }
.diagram text { font-family: var(--mono); font-size: 12px; fill: var(--ink); }
.diagram .dim { fill: var(--ink-3); }
.diagram .box { fill: var(--paper-hi); stroke: var(--ink); stroke-width: 1; }
.diagram .box--acc { stroke: var(--accent); }
.diagram .line { stroke: var(--ink); stroke-width: 1; fill: none; }
.diagram .arrow { fill: var(--ink); }
.qbox { border: var(--rule); background: var(--paper-hi); padding: var(--s4); margin: var(--s4) 0; }
.qbox .field { max-width: 320px; }
.qbox .field input { font-size: 1.125rem; }

/* ---------- pools + proof ---------- */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6) var(--col-gap); }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card { border-top: var(--rule); padding-top: var(--s3); min-width: 0; }
.card h2 { font-size: var(--fs-lg); font-weight: 600; font-variation-settings: "opsz" 72; margin: var(--s1) 0 var(--s3); }
.card .big { font-family: var(--serif); font-size: clamp(3rem, 2rem + 5vw, 5.5rem); line-height: 0.9; font-variation-settings: "opsz" 144; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; margin: var(--s2) 0; }
.card .big small { font-size: var(--fs-md); font-style: italic; color: var(--ink-2); letter-spacing: 0; }
.card .rows { margin: var(--s3) 0 var(--s4); }
.card .empty { padding: var(--s6) 0; color: var(--ink-2); font-style: italic; }
.feed td.dim, .feed tr.is-dim td { color: var(--ink-3); }
.feed tr.is-dim a { color: var(--ink-3); }
.mini-strip { display: grid; grid-template-columns: repeat(42, minmax(0, 1fr)); gap: 2px; margin: var(--s3) 0; }
.mini-strip i { display: block; aspect-ratio: 1; border: 1px solid var(--ink-ghost); }
.mini-strip i.on { background: var(--ink); border-color: var(--ink); }
.mini-strip i.last { border-color: var(--accent); }
.mini-strip i.last.on { background: var(--accent); }
@media (max-width: 599px) { .mini-strip { grid-template-columns: repeat(21, minmax(0, 1fr)); } }
.proof-list { display: grid; gap: var(--s6); }
.proof-block { border-top: var(--rule); padding-top: var(--s3); min-width: 0; }
.proof-block h2 { font-size: var(--fs-lg); font-weight: 600; font-variation-settings: "opsz" 72; margin: var(--s1) 0 var(--s3); }
.check { font-family: var(--mono); font-size: var(--fs-sm); }
.check .ok { color: var(--ink); } .check .no { color: var(--accent); }
.tablewrap { overflow-x: auto; }
.notfound { padding: var(--s8) 0; text-align: left; }
.notfound .big { font-size: var(--fs-giant); line-height: 0.8; font-variation-settings: "opsz" 144; font-weight: 400; }

/* proof harvest table: keep "Caller%s 1%" and "Called by" apart */
#h-table th:nth-child(6), #h-table td:nth-child(6) { padding-left: 1.5em; }