/* tenali.dev public reference pages: the explorer, the API guide, the rules (design pass 2026-10-08, seventh round).
   Loaded after site.css and app.css; tokens only, so dark mode follows.
   One left edge for every page: the content starts where the nav starts (.wrap's gutter); pages differ in reading width, never in edge.
   One lede on all three pages: 17px, in ink. Body text is ink everywhere; gray is for meta only. */
body[data-page="explorer"] .page-head > p:not(.mono), body[data-page="builders"] .page-head > p, body[data-page="rules"] .page-head > p:not(.effective) { margin-top: 14px; font-size: 17px; line-height: 1.47; color: var(--text); }

/* The one green these pages use outside a verdict: the ledger's passed integrity check. The system green is too light to read as a mark on
   white, so light mode takes the darker accessible green (4.4:1 on white); dark mode's system green already holds contrast on the dark page. */
:root { --ok-ink: #248A3D; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ok-ink: #30D158; } }
:root[data-theme="dark"] { --ok-ink: #30D158; }

/* The unit, everywhere on these three pages, headings and table headers included: small caps with a little air and tabular figures,
   so a dozen mentions read as a word beside its number, not a shout. Inside code it stays the literal string. */
body:is([data-page="explorer"], [data-page="builders"], [data-page="rules"]) .unit { font-variant-caps: all-small-caps; font-variant-numeric: tabular-nums; letter-spacing: .05em; }
/* Where the unit stands alone (a heading, a rail item, a column header) there is no lowercase beside it to sit with, so the small caps are
   scaled up optically until they stand at the cap height of the numeral or capital beside them (1.23em in SF Pro), with less tracking;
   line-height 0 keeps the larger glyphs from deepening the line, so the baseline stays where its neighbours are. Running text is as above. */
body:is([data-page="explorer"], [data-page="builders"], [data-page="rules"]) :is(.section-title, .toc a, th) > .unit:only-child,
body:is([data-page="explorer"], [data-page="builders"], [data-page="rules"]) :is(.section-title, .toc a) > .n + .unit { font-size: 1.23em; letter-spacing: .025em; line-height: 0; }
/* at heading size the scaled caps need almost no air; the 13px rail and the table header keep a little */
body:is([data-page="explorer"], [data-page="builders"], [data-page="rules"]) .section-title > .unit { letter-spacing: .01em; }
/* the rules set GOLD one way throughout: small caps in the H2 and the rail as in the running text, never swollen to cap height, so the word
   looks the same wherever it stands. The rail keeps the running text's .05em; at heading size the caps want a little less air. */
body[data-page="rules"] :is(.section-title, .toc a) > .n + .unit { font-size: inherit; line-height: inherit; letter-spacing: .05em; }
body[data-page="rules"] .section-title > .n + .unit { letter-spacing: .03em; }

/* ---------- shared by the API guide and the rules: a contents list on the left edge that follows the reader, and one content edge beside it.
   The rail is one width on both pages (wide enough for its longest item) and so is the gutter, so the H1 and the first column of text start
   at the same x on /builders and /rules and nothing jumps between them; the rules' text column stops at its measure, the API's runs on to its code.
   One numbering system: bare numerals hang in the gutter to the left of the text (no period), in the headings and in the rail. */
body:is([data-page="builders"], [data-page="rules"]) .doc-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); column-gap: 52px; align-items: start; }
/* the top level: the H1 one step above the 28px section titles, the 17px lede under it */
body:is([data-page="builders"], [data-page="rules"]) .page-head h1 { font-size: 40px; font-weight: 700; letter-spacing: -.025em; line-height: 1.08; }
/* the rail pins at the height it starts: the nav's 52px and its 1px hairline, plus .page's 40px top padding, so no scroll ever moves it */
body:is([data-page="builders"], [data-page="rules"]) .toc { position: sticky; top: 93px; padding-top: 12px; font-size: 14px; line-height: 1.35; }
/* one continuous track down the whole rail; each item's own 2px edge sits over it, transparent until hovered or current.
   Items rest in the secondary gray at full weight of the face, never the faint gray that reads as disabled; the current one is ink with the blue tick. */
body:is([data-page="builders"], [data-page="rules"]) .toc .track { border-left: 2px solid var(--hair); }
body:is([data-page="builders"], [data-page="rules"]) .toc a { display: block; margin-left: -2px; color: var(--text-2); padding: 5px 0 5px 14px; border-left: 2px solid transparent; white-space: nowrap; transition: color 120ms linear, border-color 120ms linear; }
body:is([data-page="builders"], [data-page="rules"]) .toc a:hover { color: var(--text); text-decoration: none; border-left-color: var(--hair-strong); }
body:is([data-page="builders"], [data-page="rules"]) .toc a.on { color: var(--text); font-weight: 500; border-left-color: var(--accent); }
/* the rail's numeral column: the same bare numerals as the headings, one fixed width so every title starts on one edge, numbered or not */
body:is([data-page="builders"], [data-page="rules"]) .toc .n { display: inline-block; width: 20px; color: var(--text-2); font-weight: 400; font-variant-numeric: tabular-nums; }
body:is([data-page="builders"], [data-page="rules"]) .toc a.on .n { color: var(--text); }
/* a group label: small, semibold, in the one gray, on the track, with air above every group but the first */
body:is([data-page="builders"], [data-page="rules"]) .toc .group { padding: 5px 0 4px 14px; font-size: 11px; font-weight: 600; letter-spacing: .01em; color: var(--text-2); }
body:is([data-page="builders"], [data-page="rules"]) .toc .group ~ .group { margin-top: 18px; }
body:is([data-page="builders"], [data-page="rules"]) .doc-body { min-width: 0; }
/* the section numeral hangs in the gutter at heading size and one weight lighter than the title, its right edge 14px off the text,
   so the rules' 2 and 2.1 to 2.6 share one right edge and the API guide's steps read the same way */
body:is([data-page="builders"], [data-page="rules"]) .section-title { position: relative; }
body:is([data-page="builders"], [data-page="rules"]) .section-title .n { position: absolute; right: calc(100% + 14px); width: 42px; text-align: right; color: var(--text-2); font-weight: 400; font-variant-numeric: tabular-nums; }

/* ---------- /explorer: a ledger that reads meaning first and hashes second. The whole row is the link; blue only when reached for. */
body[data-page="explorer"] .page-head > p { max-width: 64ch; }
body[data-page="explorer"] .page-head > p.mono { font-size: 14px; color: var(--text-2); }
/* the facts: one line under the lede, the integrity check a real state */
body[data-page="explorer"] .facts { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 22px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.4; color: var(--text-2); }
body[data-page="explorer"] .facts li { display: block; padding-right: 14px; margin-right: 14px; border-right: 1px solid var(--hair-strong); white-space: nowrap; }
body[data-page="explorer"] .facts li:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
body[data-page="explorer"] .facts b { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
body[data-page="explorer"] .facts .tick { margin-right: 7px; vertical-align: -2px; color: var(--ok-ink); }   /* a passed check, in the darker accessible green */
/* the table's header row carries the search on its right end: a filled field the width of a hash, Enter submits */
body[data-page="explorer"] .ledger-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 40px 0 12px; }
body[data-page="explorer"] .ledger-head .section-title { margin: 0; }
body[data-page="explorer"] .explorer-search { position: relative; display: block; flex: 0 1 320px; min-width: 0; margin: 0; }   /* block, not app.css's flex column, so the field keeps its height on a phone */
body[data-page="explorer"] .explorer-search .glyph { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
body[data-page="explorer"] .explorer-search .input { width: 100%; height: 34px; padding-left: 34px; padding-right: 12px; border-radius: var(--r-sm); font-size: 14px; background: var(--surface); border-color: transparent; -webkit-appearance: none; appearance: none; }
body[data-page="explorer"] .explorer-search .input::placeholder { color: var(--text-2); }
body[data-page="explorer"] .explorer-search .input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
body[data-page="explorer"] .explorer-search .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
body[data-page="explorer"] .section-title { margin-top: 40px; }
/* the table: description (with height and hash under it, and its type when the title does not already say it), route, then when and how much together on the right edge.
   Headers and cells share one right padding so every column header ends on its values' edge. */
body[data-page="explorer"] .ledger { table-layout: fixed; }
body[data-page="explorer"] .ledger th.tx { width: 42%; }
body[data-page="explorer"] .ledger th.route { width: 34%; }
body[data-page="explorer"] .ledger th.when { width: 12%; }
body[data-page="explorer"] .ledger th.num { width: 12%; }
body[data-page="explorer"] .ledger th.when, body[data-page="explorer"] .ledger td.when { text-align: right; }
body[data-page="explorer"] .ledger th, body[data-page="explorer"] .ledger td { padding-right: 16px; }
body[data-page="explorer"] .ledger td { vertical-align: top; }
body[data-page="explorer"] .ledger th:last-child, body[data-page="explorer"] .ledger td:last-child { padding-right: 0; }
body[data-page="explorer"] .ledger tbody tr { position: relative; }
body[data-page="explorer"] .ledger td.tx { overflow: hidden; }
body[data-page="explorer"] .ledger td .memo { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 1.35; color: var(--text); }
body[data-page="explorer"] .ledger td .memo::after { content: ""; position: absolute; inset: 0; }
body[data-page="explorer"] .ledger tbody tr:hover .memo { color: var(--accent); text-decoration: none; }
/* the meta line under each title: type, height, the hash (always shown: the chain is the point of the page), and a state when one is still open */
body[data-page="explorer"] .ledger td small { margin-top: 3px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-page="explorer"] .ledger td small .sans, body[data-page="explorer"] .ledger td small .sep { font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
body[data-page="explorer"] .ledger td small .sans { font-size: 12.5px; }   /* SF Pro at 12.5 sits on SF Mono 12's x-height */
body[data-page="explorer"] .ledger td small .state { font-weight: 600; }
/* escrow moves are bookkeeping between a requester and its own batch: set back in the one gray, with a lock on the amount, so mint, refund and reward read first */
body[data-page="explorer"] .ledger tr.internal .memo, body[data-page="explorer"] .ledger tr.internal .party, body[data-page="explorer"] .ledger tr.internal td.num { color: var(--text-2); }
body[data-page="explorer"] .ledger td.num .lockglyph { margin-right: 6px; vertical-align: 0; color: var(--text-2); }
body[data-page="explorer"] .ledger td.route { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; line-height: 1.45; }
body[data-page="explorer"] .ledger td.when { font-size: 14px; line-height: 1.45; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
body[data-page="explorer"] .ledger td.num { line-height: 1.35; font-variant-numeric: tabular-nums; }
body[data-page="explorer"] .party { position: relative; z-index: 1; color: var(--text); font-size: 14px; }
body[data-page="explorer"] .party.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13.5px; }   /* SF Mono's x-height at 13.5 meets SF Pro's at 14 */
body[data-page="explorer"] .party.name { font-family: inherit; }
body[data-page="explorer"] a.party:hover { color: var(--accent); text-decoration: underline; }
body[data-page="explorer"] .arrow { color: var(--text-3); margin: 0 7px; font-size: 14px; }
body[data-page="explorer"] .lines-list .mono { font-size: 14px; }

/* ---------- /builders: a three-column reference, the way the best API docs read. Rail, then each section as a row: prose and field lists on the
   left, its request and response in a column on the right that stays beside the prose while the row scrolls. Below 1180px the code returns
   inline under its prose. Body text in ink, code on one flat grouped surface. */
body[data-page="builders"] .page-head > p { max-width: 760px; }
body[data-page="builders"] .doc { max-width: none; margin: 0; color: var(--text); line-height: 1.5; }
body[data-page="builders"] .doc + .doc { margin-top: 12px; }
body[data-page="builders"] .plain { color: var(--text); line-height: 1.5; margin: 0; padding-left: 18px; }
body[data-page="builders"] .plain li + li { margin-top: 6px; }
/* sections: a hairline across prose and code divides each one from the last. The rhythm between levels is one 48px unit, the same
   ratio as the rules: 48 from the lede to the first title, 96 (twice that) from a section's last line to the next title, the hairline halfway. */
body[data-page="builders"] .step { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--hair); scroll-margin-top: 61px; }
body[data-page="builders"] .page-head + .step { padding-top: 0; border-top: 0; }
body[data-page="builders"] .step .pair + .pair { margin-top: 48px; }
body[data-page="builders"] .section-title { margin: 0 0 14px; font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
body[data-page="builders"] .pair { display: grid; grid-template-columns: minmax(0, 1fr) 440px; column-gap: 36px; align-items: start; }
body[data-page="builders"] .samples { position: sticky; top: 77px; display: grid; gap: 14px; min-width: 0; }
/* a sample: one filled panel, its caption and the copy control in a header row on the panel itself, the code under it */
body[data-page="builders"] .sample { margin: 0; border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
body[data-page="builders"] .sample-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 36px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--hair); font-size: 12px; font-weight: 600; color: var(--text-2); }
/* code: monochrome, every character in ink, quotes and braces included, so a line reads as one piece; only comments step back to the one gray.
   Examples are set at 54 columns to fit the panel; a longer line (a question string) wraps rather than scrolling, and copies as one line. */
body[data-page="builders"] .sample pre.code { margin: 0; padding: 12px 16px 14px; border-radius: 0; background: transparent; font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
body[data-page="builders"] pre.code .ok { color: var(--text); font-weight: 700; }   /* the status line: bold ink, so the block stays monochrome and the status still reads first */
body[data-page="builders"] pre.code .cm { color: var(--text-2); }
body[data-page="builders"] .code-cap { margin: 20px 0 0; font-size: 13px; font-weight: 500; color: var(--text-2); }
/* the copy control: quiet text in the panel's header row, ink on hover; it says Copied for a moment after a click */
body[data-page="builders"] .sample .copy { height: 24px; padding: 0 8px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font-family: inherit; font-size: 12px; font-weight: 500; line-height: 24px; cursor: pointer; transition: color 120ms linear, background-color 120ms linear; }
body[data-page="builders"] .sample .copy:hover, body[data-page="builders"] .sample .copy.done { color: var(--text); background: var(--surface-2); }
body[data-page="builders"] .sample .copy:focus-visible { outline: none; color: var(--text); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent); }
body[data-page="builders"] .copy-src { position: fixed; top: 0; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* the note: the samples' filled surface and radius, opened by a short bold heading; body in ink */
body[data-page="builders"] .note { margin: 18px 0; padding: 16px 18px 17px; border-radius: var(--r-lg); background: var(--surface); }
body[data-page="builders"] .note p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); }
body[data-page="builders"] .note .note-head { margin-bottom: 4px; font-weight: 600; }
body[data-page="builders"] .note code { padding: 0; background: transparent; font-size: .9em; }
/* the endpoint line: a method tag and the path in mono, under each title and in the endpoints table; one gray tag, never a colour per verb */
body[data-page="builders"] .endpoint { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
body[data-page="builders"] .method { flex: none; display: inline-block; padding: 0 7px; border-radius: 5px; background: var(--surface-2); color: var(--text); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 20px; }
body[data-page="builders"] code.path { padding: 0; background: transparent; border-radius: 0; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
body[data-page="builders"] .doc + .endpoint, body[data-page="builders"] .params + .endpoint { margin-top: 28px; }
body[data-page="builders"] .calls .call { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
body[data-page="builders"] .calls .call .path { margin-left: 4px; font-size: 13.5px; }
body[data-page="builders"] .calls .method { min-width: 50px; text-align: center; }   /* one tag width, so every path in the table starts on one edge */
body[data-page="builders"] .params + .ledger { margin-top: 28px; }
body[data-page="builders"] .calls td { vertical-align: top; }
body[data-page="builders"] .calls td:first-child { padding-top: 13px; }
/* the parameter list: name in mono, type in the one gray on the same line, one sentence under; hairlines between rows like every other list here */
body[data-page="builders"] .params { margin: 6px 0 0; border-top: 1px solid var(--hair); }
body[data-page="builders"] .params > div { padding: 10px 0 11px; border-bottom: 1px solid var(--hair); }
body[data-page="builders"] .params dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; line-height: 1.4; }
body[data-page="builders"] .params dt code { padding: 0; background: transparent; border-radius: 0; font-size: 13.5px; font-weight: 500; color: var(--text); }
body[data-page="builders"] .params .type { font-size: 13px; color: var(--text-2); }
body[data-page="builders"] .params dd { margin: 3px 0 0; font-size: 14px; line-height: 1.5; color: var(--text); }
body[data-page="builders"] .params dd code { font-size: .9em; }
body[data-page="builders"] .params + .doc, body[data-page="builders"] .params + .code-cap { margin-top: 20px; }
body[data-page="builders"] .code-cap + .params, body[data-page="builders"] .code-cap + .ledger { margin-top: 6px; }
/* reference tables: the name column fixed, the description left-aligned and read as prose; the endpoint and capability tables span prose and code */
body[data-page="builders"] .ledger { margin-top: 14px; table-layout: fixed; }
body[data-page="builders"] .ledger th:first-child { width: 44%; }
body[data-page="builders"] .ledger.calls th:first-child { width: 36%; }
body[data-page="builders"] .ledger.events th:first-child { width: 52%; }
body[data-page="builders"] .ledger.events td code { white-space: nowrap; }
body[data-page="builders"] .ledger.caps th:first-child { width: 36%; }   /* the same key column as the endpoints table above it */
body[data-page="builders"] .ledger.caps th.num { width: 14%; }
body[data-page="builders"] .ledger th:last-child:not(.num), body[data-page="builders"] .ledger td:last-child:not(.num) { text-align: left; }
body[data-page="builders"] .ledger td { padding-right: 16px; line-height: 1.45; }
body[data-page="builders"] .ledger td:last-child { padding-right: 0; }
body[data-page="builders"] .ledger td code { overflow-wrap: anywhere; }
body[data-page="builders"] .foot-note { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--hair); max-width: none; }

/* ---------- /rules: the API guide's skeleton. The section index on the left edge follows the reader; each group is titled in the
   measure and its rules are numbered so they can be cited. Promise text is in ink.
   The text column sits directly beside the rail, on the shared content edge, at a 720px reading measure; the numerals hang in the gutter between. */
body[data-page="rules"] .rules { counter-reset: group; }
body[data-page="rules"] .rules > .doc-body { max-width: 720px; }
body[data-page="rules"] .page-head > p { max-width: none; }
/* the date the rules took their present form: meta under the title, in the one gray, so the page says when it is from before it says anything else */
body[data-page="rules"] .page-head > p.effective { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: var(--text-2); font-variant-numeric: tabular-nums; }
/* one rhythm between levels: 40px from the lede to the first group, 80px (twice that) from a group's last line to the next group;
   a clause's 18px bottom padding is inside the 80, so the measured white space is 40 and 80 */
body[data-page="rules"] .rules section { margin-top: 62px; scroll-margin-top: 72px; }
body[data-page="rules"] .rules .page-head + section { margin-top: 40px; }
body[data-page="rules"] .rules section:not(.log) { counter-increment: group; counter-reset: rule; }
/* the group title: a step above the 17px clause titles, with a hairline across the whole measure */
body[data-page="rules"] .rules section .section-title { margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--hair); font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
body[data-page="rules"] .rules .rule-list { border-top: 0; }
body[data-page="rules"] .rules .rule-list dt { position: relative; padding-top: 18px; line-height: 1.3; }
body[data-page="rules"] .rules section:not(.log) .rule-list dt { counter-increment: rule; }
body[data-page="rules"] .rules section:not(.log) .rule-list dt::before { content: counter(group) "." counter(rule); position: absolute; left: -56px; top: 22px; width: 42px; text-align: right; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--text-2); font-variant-numeric: tabular-nums; }
body[data-page="rules"] .rules .rule-list dd { padding-bottom: 8px; line-height: 1.5; color: var(--text); border-bottom: 0; }   /* clauses are separated by space; the section title carries the only rule */
body[data-page="rules"] .rules .rule-list dd:last-child { border-bottom: 0; }   /* the next group's title rule closes the group; never two hairlines in a row */

@media (max-width: 1179px) {
  /* not room for prose and code side by side: the code returns inline under its prose, at the prose's measure */
  body[data-page="builders"] .api > .doc-body { max-width: 720px; }
  body[data-page="builders"] .pair { display: block; }
  body[data-page="builders"] .samples { position: static; margin-top: 20px; }
  body[data-page="builders"] .sample pre.code { white-space: pre; overflow-x: auto; overflow-wrap: normal; }
}
@media (max-width: 1000px) {
  body:is([data-page="builders"], [data-page="rules"]) .doc-layout { display: block; max-width: 720px; }
  body:is([data-page="builders"], [data-page="rules"]) .toc { display: none; }
  body:is([data-page="builders"], [data-page="rules"]) .section-title .n { position: static; display: inline-block; width: auto; margin-right: 12px; text-align: left; }
  body[data-page="rules"] .rules section:not(.log) .rule-list dt::before { position: static; display: inline-block; width: auto; margin-right: 8px; text-align: left; }
  body[data-page="explorer"] .ledger th.tx { width: 44%; }
  body[data-page="explorer"] .ledger th.route { width: 31%; }
  body[data-page="explorer"] .ledger th.when { width: 12%; }
  body[data-page="explorer"] .ledger th.num { width: 13%; }
}
@media (max-width: 720px) {
  /* .wrap's phone gutter rule in site.css also zeroes .page's top padding; restore it on these pages */
  body[data-page="explorer"] main.page, body[data-page="builders"] main.page, body[data-page="rules"] main.page { padding-top: 28px; }
  body[data-page="explorer"] .page-head > p:not(.mono), body[data-page="builders"] .page-head > p, body[data-page="rules"] .page-head > p:not(.effective) { font-size: 15px; }
  body[data-page="explorer"] .facts { display: block; font-size: 14px; }
  body[data-page="explorer"] .facts li { padding: 0; margin: 0 0 4px; border-right: 0; white-space: normal; }
  body[data-page="rules"] .rules section { margin-top: 38px; }   /* 56 of white space between groups, twice the 28 after the lede */
  body[data-page="rules"] .rules .page-head + section { margin-top: 28px; }
  body[data-page="rules"] .rules section .section-title { font-size: 24px; }
  body:is([data-page="builders"], [data-page="rules"]) .page-head h1 { font-size: 32px; }   /* still a step above the phone's 24px section titles */
  body[data-page="builders"] .step { margin-top: 40px; padding-top: 40px; }
  body[data-page="builders"] .page-head + .step { margin-top: 40px; padding-top: 0; }
  body[data-page="builders"] .section-title { font-size: 24px; }
  body[data-page="explorer"] .ledger-head { flex-wrap: wrap; }
  body[data-page="explorer"] .explorer-search { flex: 1 1 100%; }
  body[data-page="explorer"] .explorer-search .input { height: 40px; font-size: 16px; }   /* 16px so a phone does not zoom the page on focus */
  body[data-page="explorer"] .ledger th.tx { width: 70%; }
  body[data-page="explorer"] .ledger th.num { width: 30%; }
}
@media (prefers-reduced-motion: reduce) { body:is([data-page="builders"], [data-page="rules"]) .toc a, body[data-page="builders"] .sample .copy { transition: none; } }

/* A heading or rail item that names the token sets it like any other title word: full caps at the title's own size, no small caps. */
body[data-page="rules"] .section-title .unit, body[data-page="rules"] .toc .unit { font-variant: normal; font-size: 1em; letter-spacing: .01em; text-transform: none; }