/* 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' headings and rail name the token the way they name any other title: full capitals at the title's own size and weight, never
   small caps, which beside "Work" at 28px read as another face. The caps take no negative tracking. Running text and rule titles keep the small caps. */
body[data-page="rules"] :is(.section-title, .toc a) > .n + .unit { font-variant-caps: normal; font-size: inherit; line-height: inherit; letter-spacing: 0; }

/* ---------- 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: 600; letter-spacing: -.025em; line-height: 1.08; }
/* the docs pages' lede: a clear step above the 15–16px body, out to the content's right edge */
body:is([data-page="builders"], [data-page="rules"]) .page-head > p:not(.effective) { max-width: 700px; text-wrap: balance; margin-top: 16px; font-size: 19px; line-height: 1.42; letter-spacing: -.005em; }
/* a meta line under the title on both pages, in the one gray: the rules' effective date, the API's version and base URL */
body:is([data-page="builders"], [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; }
/* the API's meta line sits a little further under its title, and its base URL stands as one mono element, a quiet chip in ink */
/* the API lede: three balanced lines whose right edge lands between the prose column's edge and the code column's (x 758 to 810) */
body[data-page="builders"] .page-head > p:not(.effective) { max-width: 500px; }
body[data-page="builders"] .page-head > p.effective { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 14px; }
body[data-page="builders"] .page-head > p.effective code.base { padding: 2px 7px; border-radius: var(--r-sm); background: var(--surface); font-size: 13px; line-height: 18px; color: var(--text); }
/* 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: flex; margin-left: -2px; color: var(--text-2); padding: 5px 20px 5px 14px; border-left: 2px solid transparent; transition: color 120ms linear, border-color 120ms linear; }
/* the rules' clause numbers hang wider than the API's step numerals, so its rail text stops shorter: about 48px of air before 1.1 */
body[data-page="rules"] .toc a { padding-right: 36px; }
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 { flex: none; 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"] .doc { max-width: none; margin: 0; color: var(--text); line-height: 1.5; }
body[data-page="builders"] .doc + .doc { margin-top: 12px; }
/* inline code: mono in ink with no chip, the way reference docs set a name in a sentence, so punctuation after it sits where it would after a word */
body[data-page="builders"] :is(.doc, .plain, .params dd, .ledger td, .note) code:not(.path) { padding: 0; background: transparent; border-radius: 0; font-size: .9em; color: var(--text); }
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) 384px; column-gap: 48px; align-items: start; }
/* the code column stays beside the prose while its section scrolls (top clears the 52px nav). A request and its response are one exchange:
   one filled panel with one header (the caption and the one Copy), the response under a hairline with its own small label and status line.
   A sample that stands alone (an error, the webhook check) is its own panel, 16px below. */
body[data-page="builders"] .samples { position: sticky; top: 77px; display: grid; gap: 16px; 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; min-width: 0; border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
body[data-page="builders"] .sample:has(+ .sample.res) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
body[data-page="builders"] .sample.res { margin-top: -16px; border-top: 1px solid var(--hair); border-top-left-radius: 0; border-top-right-radius: 0; }
body[data-page="builders"] .sample.res .sample-head { height: auto; padding: 8px 8px 0 16px; border-bottom: 0; }
body[data-page="builders"] .sample.res pre.code { padding-top: 4px; }
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: color-mix(in srgb, var(--text) 60%, var(--text-2)); }   /* a step darker than the one gray: gray on the gray panel was too faint */
/* 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 42 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: 13px; 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); }
/* JSON keys are marked up but set in ink like the rest: the block stays monochrome */
body[data-page="builders"] pre.code .k { color: inherit; }
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: color-mix(in srgb, var(--text) 60%, 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: a hanging aside on a rule in the margin, opened by a short bold heading; body in ink. The only boxes on the page are code. */
body[data-page="builders"] .note { margin: 20px 0; padding: 2px 0 2px 16px; border-left: 2px solid var(--hair-strong); }
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"] .prose > .params:last-child > div:last-child { border-bottom: 0; }   /* the section divider below closes it; never two rules of two lengths */
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 640px measure of 17px text (about 75 characters a line);
   the numerals hang in the gutter between. Each rule is its bold title over its promise, in one column. */
body[data-page="rules"] .rules { counter-reset: group; }
body[data-page="rules"] .rules > .doc-body { max-width: 640px; }
/* 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: 40px; scroll-margin-top: 72px; }
/* the title block ends clearly: about 100px from its meta line to the first group, more than the space between groups */
body[data-page="rules"] .rules .page-head + section { margin-top: 96px; }
/* the rules' meta line follows the lede: when they took effect and the notice any change gets */
body[data-page="rules"] .page-head > p.effective { margin-top: 12px; }
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; }
/* the citation number hangs in the gutter on the title's baseline, in the secondary gray of the group numerals, its right edge on theirs */
body[data-page="rules"] .rules section:not(.log) .rule-list dt::before { content: counter(group) "." counter(rule); position: absolute; left: -56px; top: 21px; width: 42px; text-align: right; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--text-2); font-variant-numeric: tabular-nums; }
body[data-page="rules"] .rules .rule-list dd { margin-top: 8px; padding-bottom: 8px; font-size: 17px; line-height: 1.5; letter-spacing: -.005em; 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"] .page-head > p:not(.effective) { max-width: 700px; }
  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) { font-size: 15px; }
  body:is([data-page="builders"], [data-page="rules"]) .page-head > p:not(.effective) { font-size: 17px; }
  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 .rule-list dd { font-size: 16px; }
  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; } }