:root{
--bg:#060606;
--panel:#0c0c0c;
--sunken:#000;
--chip:#15181c;
--line:#212429;
--line-soft:#17191d;
--header-bg:#000;
--ink:#efefeb;
--dim:#b3b3b3;
--accent:#a7ff52;
--accent-ink:#060606;
--accent-soft:#d0ffa2;
--accent-tint:rgb(167 255 82 / .09);
--accent-edge:rgb(167 255 82 / .45);
--violet:#6051ed;
--violet-soft:#9f96f4;
--violet-tint:rgb(96 81 237 / .12);
--grad-primary:linear-gradient(135deg,#6051ed 0%,#a7ff52 100%);
--glow-sm:0 0 12px rgb(167 255 82 / .35);
--glow-md:0 0 20px rgb(167 255 82 / .3),0 0 35px rgb(96 81 237 / .2);
--rule:linear-gradient(90deg,#a7ff52 0%,#3f8100 55%,#1e2f14 100%);
--ok:#2cc98f;
--ok-tint:rgb(44 201 143 / .09);
--ok-edge:rgb(44 201 143 / .45);
--warn:#fb8a2e;
--warn-tint:rgb(251 138 46 / .09);
--warn-edge:rgb(251 138 46 / .45);
--bad:#e2425c;
--bad-tint:rgb(226 66 92 / .09);
--bad-edge:rgb(226 66 92 / .5);
--unknown:var(--warn);
--r-sm:.625rem;
--r-md:1.25rem;
--r-pill:6.25rem;
--shadow:none;
--font-head:Montserrat,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--font-body:"Open Sans","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--font-mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--font-body)}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;letter-spacing:.2px}
h2{margin:0 0 12px;font-size:17px}
h3{margin:0 0 6px;font-size:15px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:var(--glow-sm)}
code,kbd,samp{font-family:var(--font-mono);font-size:.9em;color:var(--accent-soft);word-break:break-all}
pre{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;overflow:auto;font-family:var(--font-mono);font-size:12.5px}
strong{font-weight:600}
header{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 24px;border-bottom:1px solid var(--line);background:var(--header-bg);position:sticky;top:0;z-index:5}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--rule)}
header .sub,header .who{color:var(--dim)}
.brand{font-family:var(--font-head);font-weight:700}
.row{display:flex;gap:16px;padding:6px 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.row .k{flex:0 0 220px;color:var(--dim)}
.row .v{flex:1;min-width:0}
.row.sub .k{padding-left:18px}
.is-ok{color:var(--ok)}
.is-warn{color:var(--warn)}
.is-bad{color:var(--bad);font-weight:600}
main{max-width:1120px;margin:0 auto;padding:18px}
footer{max-width:1120px;margin:0 auto;padding:8px 18px 34px;color:var(--dim);font-size:12.5px}
section,.panel{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;margin:0 0 16px;box-shadow:var(--shadow);overflow:hidden}
section::before,.panel::before{content:"";position:absolute;inset:0 auto auto 0;width:3.5rem;height:2px;background:var(--grad-primary);border-radius:0 0 2px 0}
.note,.why,.dim,.empty{color:var(--dim)}
.note{font-size:13px;margin:0 0 12px}
.why{font-size:12.5px}
.dim{font-size:12.5px}
.empty{font-style:italic;margin:6px 0}
.note.bad{color:var(--bad)}
.unknown{color:var(--unknown);font-weight:600}
/* The element a wide thing goes INSIDE. `section` is `overflow:hidden` two rules down — it has to
   be, because the brand pseudo-element would otherwise escape the rounded corner — so anything
   wider than the panel is clipped with no scrollbar and no edge unless it is wrapped in this.
   `tabindex="0"` belongs on the wrapper in the markup: a region that scrolls and cannot be
   focused cannot be scrolled from a keyboard. */
.scroll{overflow-x:auto;overscroll-behavior-x:contain;max-width:100%}
.scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-family:var(--font-head);color:var(--dim);font-weight:600;border-bottom:1px solid var(--line);padding:7px 9px;white-space:nowrap}
td{border-bottom:1px solid var(--line-soft);padding:7px 9px;vertical-align:top}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.badge{display:inline-block;padding:1px 9px;border-radius:var(--r-pill);font-size:12px;border:1px solid var(--line);background:var(--chip);color:var(--dim)}
.badge.good{color:var(--ok);border-color:var(--ok-edge);background:var(--ok-tint)}
.badge.warn{color:var(--warn);border-color:var(--warn-edge);background:var(--warn-tint)}
.badge.bad{color:var(--bad);border-color:var(--bad-edge);background:var(--bad-tint);font-weight:700}
.banner{padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line);margin-bottom:12px;line-height:1.5}
.banner.good{border-color:var(--ok-edge);background:var(--ok-tint)}
.banner.warn{border-color:var(--warn-edge);background:var(--warn-tint)}
.banner.bad{border-color:var(--bad-edge);background:var(--bad-tint)}
input[type=text],input[type=number],input[type=search],input:not([type]),textarea{width:100%;background:var(--sunken);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm);padding:8px 10px;font:inherit}
textarea{font-family:var(--font-mono);font-size:13px}
::placeholder{color:var(--dim);opacity:.75}
button{background:var(--chip);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 16px;font:inherit;cursor:pointer}
button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
button:disabled{cursor:not-allowed;opacity:.5}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
button.primary:hover:not(:disabled){color:var(--accent-ink)}
details summary{cursor:pointer;color:var(--dim);margin-top:10px}
:root{
color-scheme:dark;
/* The type scale. Six steps at roughly 1.2, plus one for the page title, each with one job. */
--t-micro:10.5px;  /* the kind pill on a record row, and nothing else */
--t-label:11.5px;  /* uppercase tracked labels: stat keys, table headers, group names */
--t-fine:12.5px;   /* the "why" line, notes, pager text: prose that qualifies a value */
--t-data:13px;     /* table cells — the densest thing on the surface */
--t-body:15px;     /* body copy and key/value values, inherited from the shared sheet */
--t-head:17px;     /* a panel heading */
--t-stat:22px;     /* a measurement drawn large */
--t-title:27px;    /* the one h1 on the page */
/* Vertical rhythm, so panels and rows are not each spaced by hand. */
--gap:16px;
--pad:14px;
/* The zebra stripe, per theme. See the table rules below. */
--zebra:rgb(255 255 255 / .022);
}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]){color-scheme:light;
--bg:#f5f6f2;
--panel:#fff;
--sunken:#fafbf7;
--chip:#ebeee4;
--line:#d5d9cc;
--line-soft:#e6e9dd;
--header-bg:#fff;
--ink:#14170f;
--dim:#555b4b;
--accent:#3c6d00;
--accent-ink:#fff;
--accent-soft:#2b4f00;
--accent-tint:rgb(60 109 0 / .08);
--accent-edge:rgb(60 109 0 / .4);
--rule:linear-gradient(90deg,#3c6d00 0%,#7dc42b 55%,#cbe9a8 100%);
--ok:#0f6b46;
--ok-tint:rgb(15 107 70 / .09);
--ok-edge:rgb(15 107 70 / .4);
--warn:#8a4600;
--warn-tint:rgb(138 70 0 / .09);
--warn-edge:rgb(138 70 0 / .4);
--bad:#ae0f2c;
--bad-tint:rgb(174 15 44 / .08);
--bad-edge:rgb(174 15 44 / .45);
--shadow:0 1px 2px rgb(20 23 15 / .07);
--zebra:rgb(20 23 15 / .028);
--r-md:.75rem;}}
:root[data-theme=light]{color-scheme:light;
--bg:#f5f6f2;
--panel:#fff;
--sunken:#fafbf7;
--chip:#ebeee4;
--line:#d5d9cc;
--line-soft:#e6e9dd;
--header-bg:#fff;
--ink:#14170f;
--dim:#555b4b;
--accent:#3c6d00;
--accent-ink:#fff;
--accent-soft:#2b4f00;
--accent-tint:rgb(60 109 0 / .08);
--accent-edge:rgb(60 109 0 / .4);
--rule:linear-gradient(90deg,#3c6d00 0%,#7dc42b 55%,#cbe9a8 100%);
--ok:#0f6b46;
--ok-tint:rgb(15 107 70 / .09);
--ok-edge:rgb(15 107 70 / .4);
--warn:#8a4600;
--warn-tint:rgb(138 70 0 / .09);
--warn-edge:rgb(138 70 0 / .4);
--bad:#ae0f2c;
--bad-tint:rgb(174 15 44 / .08);
--bad-edge:rgb(174 15 44 / .45);
--shadow:0 1px 2px rgb(20 23 15 / .07);
--zebra:rgb(20 23 15 / .028);
--r-md:.75rem;}

main{max-width:1280px;padding:18px 18px 4px}
footer{max-width:1280px;border-top:1px solid var(--line-soft);margin-top:8px;padding-top:14px}
footer p{margin:0 0 6px}
section,.panel{padding:var(--pad) 16px;margin:0 0 var(--gap)}

/* The masthead. Brand, chain, search and the theme control share one row wherever there is room,
   because four stacked rows of sticky chrome cost a phone half its screen before the page starts. */
header{display:block;padding:11px 18px 9px}
.masthead{display:flex;align-items:center;gap:9px 16px;flex-wrap:wrap}
.brand{font-size:19px;color:var(--ink);white-space:nowrap;letter-spacing:-.2px}
.brand span{color:var(--accent);margin-left:5px}
.chain{color:var(--dim);font-size:var(--t-fine);font-family:var(--font-mono)}
.search{display:flex;gap:8px;margin:0;flex:1 1 260px;min-width:0}
.search input{flex:1;min-width:0;padding:7px 11px;font-size:var(--t-data)}
.search button{white-space:nowrap;background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600;padding:7px 15px;font-size:var(--t-data)}
.search button:hover{color:var(--accent-ink)}
/* The theme control exists only when a script can remember the answer, on the copy button's
   reasoning: a toggle that forgets on every navigation is worse than no toggle, and without a
   script there is nowhere to remember it. Without one the media query still decides, so the
   surface has both themes either way. */
.theme{display:none}
.can-theme .theme{display:inline-block;padding:6px 11px;font-size:var(--t-fine);color:var(--dim);white-space:nowrap}
.can-theme .theme:hover{color:var(--accent);border-color:var(--accent)}

/* Below this the masthead is two rows and the nav is a third, and a sticky header that owns a
   third of a phone screen is worse than one a reader scrolls back up to. It stays RELATIVE rather
   than static: the shared stylesheet hangs the brand rule off the header as an absolute pseudo
   element, and a static header would leave that gradient line anchored to the viewport. */
@media(max-width:860px){header{position:relative;top:auto}}

/* Navigation, grouped. Eighteen links in one strip is a wall; four labelled runs are four
   decisions. The label is a column header for the pills under it and scrolls with them. */
/* **Eleven of the eighteen sections were unreachable at tablet width, silently.** MEASURED at
   768px: clientWidth 732, scrollWidth 1733, no mask, no shadow — so Delegations, Supply, Ledgers,
   Contracts, Bridge, Spaces, STR.talk, Network, Nodes, Consensus and Cryptography sat off the
   right edge with nothing to say they existed. A wide TABLE quietly contained is fine; the primary
   navigation is not a table.
   The first attempt was an edge fade over the scroller, which makes the cut visible without making
   it unnecessary. Measuring it settled the question: the row needs about 1,750px, so it does not
   fit a 1,440px desktop either — the fade would have been permanent chrome apologising for a
   layout that never works. It wraps at every width instead. The cost is a second row on a wide
   screen; the gain is that every destination is on the page, and there is no affordance to teach
   because nothing is hidden. */
nav{display:flex;gap:10px 18px;flex-wrap:wrap;margin-top:9px;padding-bottom:3px}
/* The row wrapping is not enough on a phone: a GROUP is nowrap and one of them is wider than
   390px by itself, so six links stayed off the edge. MEASURED at 390px before this: 18 links,
   6 offscreen. The group wraps here too, and then nothing is off the page at any width. */
@media(max-width:640px){.nav-group{flex-wrap:wrap;white-space:normal}}
.nav-group{display:flex;align-items:center;gap:2px;white-space:nowrap}
/* MEASURED 3.08:1 composited, against the 4.5 that 10.5px text needs: --dim at 65% opacity over
   the header. These are the words that tell a reader what a group of links IS, so they are not
   decoration that may fade. Full opacity and the ink colour, with weight and tracking still doing
   the separating. */
.nav-group-k{color:var(--ink);font-family:var(--font-head);font-size:var(--t-micro);font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-right:6px}
.nav-link{color:var(--dim);font-size:var(--t-data);padding:5px 10px;border-radius:var(--r-pill);white-space:nowrap}
.nav-link:hover{color:var(--accent);background:var(--chip);text-decoration:none}
.nav-link.here{color:var(--accent);background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--accent-edge)}
.skip{position:absolute;left:-9999px;top:0;z-index:9}
.skip:focus{left:10px;top:10px;background:var(--accent);color:var(--accent-ink);padding:9px 14px;border-radius:var(--r-sm);font-weight:600}

/* Headings. The page title is the only h1; a panel heading is a LABEL for the block under it and
   is drawn as one — small, tracked, uppercase — so it never competes with the data it introduces.
   That is the hierarchy repair: before it, a panel heading and a stat value were the same weight
   at almost the same size, and a page read as a flat list of equally important things. */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 11px}
.sec-head h1,.sec-head h2{margin:0}
.sec-head h1{font-size:var(--t-title);line-height:1.15;letter-spacing:-.4px;word-break:break-word}
.sec-head h2{font-size:var(--t-label);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--dim)}
section.lead{background:var(--panel);border-color:var(--line)}
section.lead .sec-head{display:block;margin-bottom:13px}
section.lead .sec-head h1::after{content:"";display:block;width:56px;height:2px;margin-top:10px;background:var(--rule)}
section h3{font-size:var(--t-body)}

/* Stat tiles: the short measurements, drawn to be read across rather than down. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(162px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin:0 0 var(--gap)}
.stat{background:var(--sunken);padding:10px 13px 11px;display:flex;flex-direction:column;gap:4px;min-width:0}
.stat-k{color:var(--dim);font-family:var(--font-head);font-size:var(--t-label);font-weight:600;text-transform:uppercase;letter-spacing:.07em}
/* Tabular figures on the tile too, not only in the tables. Two tiles side by side are a column
   of one row each, and a reader compares them the same way. */
.stat-v{font-family:var(--font-head);font-size:var(--t-stat);line-height:1.15;color:var(--ink);word-break:break-word;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.stat-v code{font-size:var(--t-stat);color:var(--ink);word-break:break-word;letter-spacing:-.5px}
.stat-v .badge{font-size:var(--t-fine);vertical-align:3px;letter-spacing:0}
/* A measured value carries its reason inline. At tile size that reason would be a headline, so it
   is dropped back to body text here rather than being cut — an unknown never loses its why. */
.stat-v .unknown{font-size:var(--t-head)}
.stat-v .why{display:block;font-family:var(--font-body);font-size:var(--t-fine);line-height:1.45;font-weight:400;letter-spacing:0;margin-top:4px}
.stat>.why{font-size:var(--t-fine);line-height:1.45;color:var(--dim)}

/* Key/value detail. One hairline grid, labels in the heading face so they read as labels. */
.kv{margin:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.kv-row{display:grid;grid-template-columns:minmax(148px,238px) 1fr;gap:14px;background:var(--panel);padding:8px 13px;align-items:baseline}
.kv dt{color:var(--dim);font-family:var(--font-head);font-size:var(--t-fine);margin:0}
.kv dd{margin:0;min-width:0;word-break:break-word;font-size:var(--t-data)}
.kv dd>code{word-break:break-all}
.kv dd p{margin:4px 0 0}
@media(max-width:640px){.kv-row{grid-template-columns:1fr;gap:3px}}

/* Tables. Wide ones scroll inside themselves so the PAGE never scrolls sideways, and a long one
   keeps its header in view — which needs a scroll box of its own, so only long ones get one. */
.scroll{overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--line);border-radius:var(--r-sm)}
.scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.scroll.tall{max-height:min(70vh,700px)}
table{font-size:var(--t-data)}
thead th{position:sticky;top:0;z-index:1;background:var(--panel);box-shadow:inset 0 -1px 0 var(--line);border-bottom:0;font-size:var(--t-label);text-transform:uppercase;letter-spacing:.06em;padding:8px 10px}
td{padding:8px 10px}
tbody tr:last-child td{border-bottom:0}
/* Zebra at a hair's contrast, because these tables are dense and wide and the eye loses the row
   somewhere around the fifth column. A token rather than a computed tint: the two themes need it
   in opposite directions — a shade darker on black, a shade darker on white — and a computed
   mix would give the light theme a stripe of nearly nothing. Kept under the hover state so hovering
   still reads as the stronger signal. */
tbody tr:nth-child(even){background:var(--zebra)}
tbody tr:hover{background:var(--sunken)}
tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
/* **Numbers, which is the other half of the repair.** A numeric column is compared down the
   column by eye, and that only works when the digits are the same width AND in the same place:
   right-aligned, tabular, and in the monospace face so a 1 occupies what an 8 does. The shared
   sheet aligns and tabularises; the face is here, because it is the one this surface has a
   monospace token for. Prose inside a numeric cell — a "none", an unknown's reason — steps back
   out of the mono face, since a sentence set in it is a sentence nobody reads. */
td.num{font-family:var(--font-mono);font-size:var(--t-fine);letter-spacing:-.2px;white-space:nowrap}
td.num .why,td.num .badge,td.num .unknown{font-family:var(--font-body);letter-spacing:0;white-space:normal}
.amount{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.unit{color:var(--dim);font-size:var(--t-fine);font-family:var(--font-body)}
td:first-child{font-weight:500}

/* Hashes: shortened on screen, whole in the title, and whole on the clipboard. */
.hashcell{display:inline-flex;align-items:center;gap:6px;max-width:100%}
code.hash{white-space:nowrap}
.copy{display:none}
.can-copy .copy{display:inline-block;background:var(--chip);border:1px solid var(--line);color:var(--dim);border-radius:var(--r-sm);padding:1px 7px;font-family:var(--font-head);font-size:var(--t-micro);line-height:1.6;cursor:pointer;opacity:0;transition:opacity .12s}
.can-copy .hashcell:hover .copy,.can-copy .copy:focus-visible{opacity:1}
.can-copy .copy:hover{color:var(--accent);border-color:var(--accent)}
/* Nothing hovers on a touch screen, so there the buttons are simply present. */
@media(hover:none){.can-copy .copy{opacity:1}}

/* The chain-provenance banner, which every page carries, and the fold-coverage banner, which the
   folded pages carry. One appearance for both: they are the same class of statement — how much of
   the chain is under this page — and a reader who has learned to read one has learned the other. */
.provenance{border:1px solid var(--line);border-left-width:4px;border-radius:var(--r-sm);padding:11px 14px;margin:0 0 var(--gap);background:var(--panel)}
.provenance strong{display:block;font-family:var(--font-head);font-size:var(--t-body);margin-bottom:4px;line-height:1.3}
.provenance p{margin:0;color:var(--dim);font-size:var(--t-fine);line-height:1.5}
.provenance.good{border-left-color:var(--ok);background:var(--ok-tint)}
.provenance.good strong{color:var(--ok)}
.provenance.warn{border-left-color:var(--warn);background:var(--warn-tint)}
.provenance.warn strong{color:var(--warn)}
.provenance.flat{border-left-color:var(--accent);background:var(--accent-tint)}
.provenance.flat strong{color:var(--accent)}

/* A stated redaction. Drawn as a held space rather than as body text, because a reader has to be
   able to tell "this page is not showing you X, on purpose, and here is why" from an empty list.
   Neutral rather than a warning: withholding a participant list is a decision, not a fault. */
.redacted{border:1px solid var(--line);border-left:3px solid var(--dim);border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--sunken);padding:10px 13px;margin:0 0 var(--gap);font-size:var(--t-fine);line-height:1.55}
.redacted strong{color:var(--ink)}
.redacted ul{margin:7px 0 0;padding-left:18px}
.redacted li{margin-bottom:3px}

/* The ledger index. Eleven ledgers, as one glanceable grid. */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:11px}
.card{display:flex;flex-direction:column;background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px;color:var(--ink)}
.card:hover{border-color:var(--accent-edge);background:var(--chip);text-decoration:none}
.card h3{margin:0 0 6px;font-size:var(--t-body)}
.card .purpose{color:var(--dim);font-size:var(--t-fine);margin:0 0 9px;line-height:1.5}
.card .headline{margin:0 0 9px;font-size:var(--t-data)}
.card .root{margin:auto 0 0}

/* Block records: a fixed-width kind pill, then what it did and why that matters. */
.records{list-style:none;margin:0;padding:0}
.records li{display:flex;gap:13px;padding:10px 0;border-bottom:1px solid var(--line-soft);align-items:flex-start}
.records li:last-child{border-bottom:0}
.records .tag{flex:0 0 148px;background:var(--chip);border:1px solid var(--line);border-radius:var(--r-pill);color:var(--dim);font-family:var(--font-head);font-size:var(--t-micro);font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;text-align:center;line-height:1.5}
.records .headline{margin:0 0 4px;font-size:var(--t-data)}
.records p{margin:0}
.records .redacted{margin:7px 0 0}
@media(max-width:700px){.records li{flex-direction:column;gap:6px}.records .tag{flex:0 0 auto;align-self:flex-start}}

/* Paging, which states its own bound rather than hiding it. */
.pager{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:11px 0 0;padding-top:10px;border-top:1px solid var(--line-soft);flex-wrap:wrap}
.pager-link{padding:5px 12px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:var(--t-data);white-space:nowrap}
.pager-link:hover{border-color:var(--accent);text-decoration:none}
/* MEASURED 2.51:1. A disabled CONTROL is exempt from the contrast rule; this is a span element,
   is not, and "← newer" at the first page is the label a reader checks to learn where they are. */
.pager-link.off{color:var(--dim);opacity:1}
/* The folded half of the provenance banner. A summary that looks like the link it is, and a
   body that keeps the banner's measure rather than the page's. */
.provenance-more{margin-top:7px}
.provenance-more>summary{cursor:pointer;color:var(--dim);font-size:var(--t-fine);list-style-position:outside}
.provenance-more>summary:hover{color:var(--accent)}
.provenance-more>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.provenance-more p{margin:6px 0 0;font-size:var(--t-fine);color:var(--dim)}
.pager-note{color:var(--dim);font-size:var(--t-fine);margin:8px 0 0;line-height:1.5}
.pager .pager-note{flex:1;margin:0;text-align:center}

/* Emptiness, drawn as a held space rather than as a stray line of italics. A list with nothing in
   it is a fact about the chain, and it should look like a fact rather than like a rendering slip. */
.empty{border:1px dashed var(--line);border-radius:var(--r-sm);padding:12px 14px;margin:0 0 9px;font-style:normal;font-size:var(--t-fine);line-height:1.55}
.note{font-size:var(--t-fine);line-height:1.55;margin:0 0 11px;max-width:86ch}
.why{font-size:var(--t-fine);line-height:1.5}
.badge{padding:2px 10px;font-family:var(--font-head);font-weight:600;line-height:1.5;font-size:var(--t-fine)}
.fees{border-left:3px solid var(--accent);padding:10px 14px;background:var(--accent-tint);color:var(--dim);font-size:var(--t-fine);border-radius:0 var(--r-sm) var(--r-sm) 0;margin:0 0 var(--gap);line-height:1.55}
.notes{color:var(--dim);font-size:var(--t-fine);margin:11px 0 0;padding-left:18px;line-height:1.55}
.notes li{margin-bottom:4px}

/* The contract read form: a GET form, so the question stays in the URL. */
form label{display:block;color:var(--dim);font-size:var(--t-data);margin:0 0 10px}
form label input,form label select{margin-top:5px}
select{background:var(--sunken);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm);padding:8px 10px;font:inherit;max-width:100%}
.source{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;overflow-x:auto;font-family:var(--font-mono);font-size:var(--t-fine);white-space:pre;color:var(--accent-soft);max-height:70vh}

/* A reader who has asked their machine for less movement gets less movement. The only transition
   on the surface is the copy button's fade, so this costs nothing and is still the right default. */
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}