/*
 * Served from this origin, like everything else (SPEC §10.3). No hosted fonts:
 * a font pulled from a third-party CDN sends every reader's IP address and
 * referring page to that CDN on every page load, which would make the privacy
 * page's central claim false in a way nobody would notice while writing it.
 * So the type is whatever the reader already has.
 */

:root {
    --ink: #16150f;
    --ink-soft: #55524a;
    --rule: #d8d2c4;
    --paper: #fbf9f4;
    --paper-sunk: #f2eee3;
    --accent: #8a2b16;
    --measure: 34rem;
    /* The body is serif; the deck is not. Both stacks are the reader's own
       (§10.3) — the contrast costs nothing because no font is fetched. */
    --serif: Iowan Old Style, Palatino, Georgia, Cambria, "Times New Roman", serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #e8e4d9;
        --ink-soft: #a09a8c;
        --rule: #3a372f;
        --paper: #14130f;
        --paper-sunk: #1c1a15;
        --accent: #e0785c;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0 1.25rem 4rem;
    background: var(--paper);
    color: var(--ink);
    font: 1.0625rem/1.65 var(--serif);
}

main, .masthead, .footer { max-width: var(--measure); margin: 0 auto; }

a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }

/* masthead */
.masthead { padding: 2.5rem 0 1.25rem; border-bottom: 3px double var(--rule); text-align: center; }
.wordmark {
    display: inline-block;
    font-size: clamp(2rem, 9vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
}
.tagline { margin: 0.35rem 0 0; color: var(--ink-soft); font-size: 0.9rem; font-style: italic; }

/* index */
.standfirst { padding: 1.75rem 0 0; }
.standfirst h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 0.75rem; }
.pieces { list-style: none; margin: 2rem 0 0; padding: 0; }
.pieces > li { padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.pieces h2 { font-size: 1.2rem; line-height: 1.3; margin: 0 0 0.4rem; }
.pieces h2 a { color: var(--ink); text-decoration-color: var(--rule); }
.pieces h2 a:hover { color: var(--accent); }

/* a piece */
.piece h1 { font-size: 1.75rem; line-height: 1.2; margin: 2rem 0 0.5rem; }
.lede { font-size: 1.1rem; color: var(--ink); }

/* The deck: an article's lede, which a reader meets twice — once on the page
   that offers the article, and again above the body they have paid for. The
   second time it is something to get past, so it changes family rather than
   merely gaining a size on the prose around it: one glance places it, and the
   eye can start below it without reading a word. Smaller and softer than the
   body for the same reason, and no smaller than that, because on the page
   that offers the article it is the only writing there is. */
.deck {
    font-family: var(--sans);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-soft);
    /* The meta line follows the deck rather than the title — the index has
       always read that way, and now the article does too — so the space below
       the deck closes up and the meta's own margin holds the rule off. */
    margin: 0 0 0.75rem;
}
.pieces .lede { font-size: 1rem; color: var(--ink-soft); margin: 0; }
.meta { font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 1rem; }
.draft { color: var(--accent); }
.body { border-top: 1px solid var(--rule); padding-top: 1.25rem; }
.body h2 { font-size: 1.2rem; margin: 2rem 0 0.5rem; }
.body h3 { font-size: 1rem; margin: 1.5rem 0 0.4rem; }
.body blockquote { margin: 1.25rem 0; padding-left: 1rem; border-left: 3px solid var(--rule); color: var(--ink-soft); }
.body table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.body th, .body td { text-align: left; padding: 0.4rem 0.5rem 0.4rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }

/* A screenshot inside a piece (2026-09-14).
 *
 * This site has two palettes, so a single plate is wrong in one of them — and
 * `bin/build-content` strips raw HTML from a body (§10.3, made
 * unrepresentable rather than merely forbidden), which leaves the markdown no
 * `<picture>` to choose with. So a figure is written as two images whose names
 * end `-light.png` and `-dark.png`, and the scheme hides the one it is not.
 *
 * **Both are fetched**, which is the price of doing it here instead of in the
 * build. The alternative is `bin/build-content` pairing them into a
 * `<picture>` — one fetch, and one more thing that has to keep working. Worth
 * revisiting if a piece ever carries more plates than this one does.
 *
 * Bordered, because a screenshot of this site, on this site, is otherwise a
 * region of the page that looks like the page.
 */
.body img {
    display: block;
    max-width: 100%;
    margin: 1.5rem 0;
    border: 1px solid var(--rule);
    border-radius: 3px;
}
.body img[src$="-dark.png"] { display: none; }

/* Beside the rule it inverts rather than up with the palette, which is the
   only other place this file asks about the scheme: the two lines are one
   decision and reading either alone tells you nothing. */
@media (prefers-color-scheme: dark) {
    .body img[src$="-dark.png"] { display: block; }
    .body img[src$="-light.png"] { display: none; }
}

pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
code { font-size: 0.85em; background: var(--paper-sunk); padding: 0.1em 0.3em; border-radius: 3px; }
pre { background: var(--paper-sunk); padding: 0.9rem 1rem; border-radius: 4px; overflow-x: auto; font-size: 0.8rem; line-height: 1.5; }
pre code { background: none; padding: 0; font-size: inherit; }

/* the gate */
.gate { margin: 2rem 0; padding: 1.25rem 1.5rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper-sunk); }
.gate h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.gate p { margin: 0 0 0.5rem; }
.gate .pending { color: var(--ink-soft); font-size: 0.9rem; font-style: italic; margin: 0.75rem 0 0; }

/* inspector (§9) */

/* One width, the article's (2026-09-12).

   The panel used to be 34rem collapsed and 52rem open, on the argument that a
   row of label, 44-character address and claim about the program wants more
   room than a line of prose — with a rule that widened on opening so the join
   did not look like a mistake, and the paragraphs inside pulled back to
   `--measure` so they did not become 90-character lines.

   Two sections were the whole reason for the extra 18rem: the table of short
   names and the preflight, both wide because a *sentence* sat in a third
   column. Put the sentence under the value it describes and they need 505px
   and 310px against the article's 544px; every other section already needed
   less than 300. Measured at the same viewport, the panel grew seventeen
   pixels in height — the wide layout had been spending that space on those
   claims wrapping inside a third of the width anyway.

   So there is one measure again, and the rule that covered the join is gone
   rather than maintained. The prose caps below are now the same width as the
   body and do nothing; they stay because they say what they mean. */
.inspector { margin-top: 3rem; font-size: 0.85rem; }
.inspector > summary { max-width: var(--measure); margin: 0 auto; border-top: 1px solid var(--rule); cursor: pointer; padding: 0.85rem 0; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.75rem; color: var(--ink-soft); }
.inspector-body { max-width: var(--measure); margin: 0 auto; }
.inspector-preamble { max-width: var(--measure); color: var(--ink-soft); margin: 0 0 1rem; }
.inspector section { margin-bottom: 1.5rem; }
.inspector h3 { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0.4rem; }
.inspector table { width: 100%; border-collapse: collapse; }
/* `width: 1%` with `nowrap` is the narrowest a column can be asked to be: the
   label takes what its text needs and the value column takes the rest. Without
   it an auto-layout table shares the slack between the two columns in
   proportion to their content, which put 165px of nothing between `metering
   program` and `PIDash` — a gap that grew as the values got shorter, so
   replacing addresses with short names made it worse. */
.inspector th { text-align: left; font-weight: 400; color: var(--ink-soft); width: 1%; padding: 0.25rem 1rem 0.25rem 0; white-space: nowrap; vertical-align: top; }
/* `overflow-wrap: anywhere` and not `word-break: break-all`, which is what
   this was until 2026-09-12. The difference is when each one breaks: break-all
   breaks wherever the line ends, so `0.01 DEMO  (10000 base units)` lost its
   last two characters to a line of their own on a narrow window rather than
   wrapping at the space in front of them; anywhere breaks only a word that
   cannot fit at all — a base58 address, or an 88-character signature, both of
   which still have to break or the table takes the page sideways on a phone.
   It also counts in a table's minimum width, which `break-word` does not, and
   a table is the one place that matters. */
.inspector td { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; overflow-wrap: anywhere; padding: 0.25rem 0; vertical-align: top; }
.inspector table.names td.value { padding-right: 1.5rem; }
/* An address row (§9). The alias is a badge rather than two spaces of padding:
   it is this site's invention and it should not look like part of the address
   it sits beside. The two controls take the panel's existing UI voice — small,
   uppercase, letter-spaced, the same treatment as the section headings — so
   they read as controls rather than as more data, and they stay monospace
   because inheriting anything else here means restating the whole font stack.
   They are quiet at rest and full strength on hover or keyboard focus; not
   hidden, because a control nobody can see on a touch screen is not a control. */
.inspector .alias { background: var(--paper-sunk); color: var(--ink-soft); padding: 0 0.3em; border-radius: 2px; margin-right: 0.5em; }
/* A short name where a value would be, linked to the row that defines it.
   It wears the same badge as the alias in the table, because it is the same
   token and a reader has to recognise it as one; what marks it as a link is
   the accent on hover and focus, not a colour at rest — a panel with a dozen
   of them would otherwise be a page of blue. */
.inspector .shorthand { background: var(--paper-sunk); color: var(--ink-soft); padding: 0 0.3em; border-radius: 2px; text-decoration: none; white-space: nowrap; }
.inspector .shorthand:hover,
.inspector .shorthand:focus-visible { color: var(--accent); }
/* The row a short name links to, for the moment after the jump. Anything
   louder would still be on the screen ten minutes later. */
.inspector table.names tr:target .alias { color: var(--accent); }

.inspector .copy { margin-left: 0.7em; font-family: inherit; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); opacity: 0.65; word-break: normal; white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer; }
.inspector .copy:hover,
.inspector .copy:focus-visible { opacity: 1; color: var(--accent); }
.inspector .copy[data-said] { opacity: 1; color: var(--accent); }

/* The address is the explorer link, and it still has to read as data. No link
   colour at rest and a hairline underline in the rule colour — present enough
   to be findable, quiet enough that a column of addresses does not turn into a
   column of links. The site's accent arrives on hover and focus, where a
   reader is asking. */
.inspector a.base58 { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.inspector a.base58:hover,
.inspector a.base58:focus-visible { color: var(--accent); border-bottom-color: currentColor; }

/* The check a preflight answer mirrors, beside the answer (§9). Not monospace
   and not black: it is a claim about the program, not a value read from it,
   and the two should not look like the same kind of thing.

   It wraps. `require!(new_used <= limit, LimitReached)` is longer than the
   column it sits in on a narrow window, and a table that will not wrap either
   scrolls sideways or squeezes the value column — which is the one carrying
   the number the section exists to show. Wrapping the claim and leaving the
   value alone is the right trade. Left-aligned rather than right, because a
   right-aligned ragged edge is harder to read down once lines break; `width`
   is a hint, and the browser gives the column back when the text is short. */
.inspector table.mirrored { table-layout: auto; }
.inspector td.mirrors { font-family: inherit; font-size: 0.78rem; color: var(--ink-soft); text-align: left; white-space: normal; word-break: normal; overflow-wrap: anywhere; padding-left: 1.25rem; width: 38%; }
/* The same claim as `.mirrors`, under the value instead of beside it: the
   serif face and the soft ink are what make it read as a caption to the value
   rather than as more data, which matters more here than it did in a column of
   its own — it is inside the value's cell now, and nothing but the type tells
   a reader the two are different kinds of thing. */
.inspector .beneath { display: block; margin-top: 0.1rem; font-family: var(--serif); font-size: 0.78rem; line-height: 1.45; color: var(--ink-soft); overflow-wrap: normal; }
.inspector table.names th, .inspector table.names td { padding-bottom: 0.55rem; }

/* The flags column, pulled in tight. `signer, writable` is the last third
   column in the panel, and with the value beside it now seven characters of
   short name the auto-layout slack all landed between the two — the same gap
   `th { width: 1% }` closed in front of the label. Same fix, one column
   along: the value takes what it needs and the flags follow it. */
.inspector table.mirrored td:not(.mirrors) { width: 1%; }

.inspector .section-link { margin: 0.5rem 0 0; font-size: 0.8rem; }
/* `.inspector .note` was deleted with the notes it styled (2026-09-14). A
   style rule for markup nothing emits is the quietest kind of dead code — it
   reads as evidence the feature works, which is how a table extension went
   missing for a fortnight. So the rule goes when its producer does. */

/* footer */
.footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 0.85rem; color: var(--ink-soft); }
.disclaimer { line-height: 1.5; }
.empty { color: var(--ink-soft); }

/* first-run setup (§12.0) */
.plan { padding-left: 1.2rem; }
.plan li { margin-bottom: 0.4rem; }
.status { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1.5rem; }
.status th { text-align: left; font-weight: 400; color: var(--ink-soft); padding: 0.35rem 1rem 0.35rem 0; white-space: nowrap; vertical-align: top; }
.status td { padding: 0.35rem 0; word-break: break-all; }

form { margin: 1.5rem 0 0.5rem; }
button {
    font: inherit;
    font-size: 0.95rem;
    padding: 0.55rem 1.4rem;
    color: var(--paper);
    background: var(--accent);
    border: 0;
    border-radius: 3px;
    cursor: pointer;
}
button:hover { filter: brightness(1.1); }

/* --- §5 sign-in ---------------------------------------------------------- */

/*
 * Who the site thinks you are, on the masthead of every page. A site that can
 * draw from your wallet should not make you hunt for that, and §6's
 * `manage_meter` decision — reachable at any time, not only at the limit —
 * is the same argument one screen further on.
 */
.wallet {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--rule);
    border-radius: 0.3rem;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 0.95rem;
    cursor: pointer;
}
.wallet:hover { border-color: var(--accent); color: var(--accent); }
.wallet:disabled { opacity: 0.55; cursor: default; }

.fine { font-size: 0.85rem; color: var(--ink-soft); }
.fine summary { cursor: pointer; }

.secondary {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--rule);
    border-radius: 0.3rem;
    background: var(--paper);
    color: var(--ink-soft);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}
.secondary:hover { border-color: var(--accent); color: var(--accent); }
.secondary:disabled, .secondary:disabled:hover { opacity: 0.55; cursor: default; border-color: var(--rule); color: var(--ink-soft); }

.meter .limit { display: inline-flex; align-items: baseline; gap: 0.4rem; font-size: 0.95rem; }
.meter .limit input {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--rule);
    border-radius: 0.25rem;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    text-align: right;
}

/* §6.3: the four answers, then the scan. The expiry's guidance sits under
   each choice, because the choice is about whose device this is. */
.meter .setup { margin: 0.75rem 0 0; }
.meter .setup > .limit { margin: 0.5rem 1.25rem 0.25rem 0; }
.meter .expiry {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.1rem;
    margin: 0.75rem 0;
    padding: 0.5rem 0.75rem 0.75rem;
    border: 1px solid var(--rule);
    border-radius: 0.25rem;
}
.meter .expiry legend { padding: 0 0.3rem; font-size: 0.95rem; }
.meter .expiry label { margin-top: 0.35rem; }
.meter .expiry .fine { padding-left: 1.6rem; }
.meter .scan { margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--rule); }
/* Dark on light in both schemes: scanners expect that polarity. */
.meter .qr svg {
    display: block;
    width: min(16rem, 100%);
    height: auto;
    margin: 0.5rem 0 0.75rem;
    background: #fff;
}
.meter .qr:empty { display: none; }
[data-setup-status] { overflow-wrap: anywhere; }

/* §4.3: the faucet's one field is an address, which is long. */
.faucet label { display: block; font-size: 0.95rem; }
.faucet input {
    display: block;
    width: 100%;
    max-width: 34rem;
    margin-top: 0.3rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--rule);
    border-radius: 0.25rem;
    background: var(--paper);
    color: var(--ink);
    font: 0.9rem ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Between the body and the meter strip: where to go from the end of a piece.
   Sans, like the deck, because it is furniture rather than writing — and no
   rule of its own above it, since the strip below already draws one and two
   lines a centimetre apart would make the end of the article look like a
   table. `Previous` is the older piece: the index runs newest first, these run
   against it, and the words are the reader's way round rather than the list's.
   One column when there is no room for two, and the labels stay put so the
   pair reads the same way whichever of them is missing. */
.piece-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
    margin: 2rem 0 0;
    font-family: var(--sans);
    font-size: 0.9rem;
    line-height: 1.4;
}
.piece-nav a { display: block; text-decoration: none; }
.piece-nav a:hover .what { text-decoration: underline; text-decoration-thickness: 2px; }
.piece-nav .next { grid-column: 2; text-align: right; }
.piece-nav .where {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 0.15rem;
}
.piece-nav .what { color: var(--accent); }

@media (max-width: 30rem) {
    .piece-nav { grid-template-columns: 1fr; }
    .piece-nav .next { grid-column: 1; text-align: left; }
}

.meter-strip { margin: 1.5rem 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--rule); font-size: 0.9rem; }
.meter-strip p { margin: 0 0 0.5rem; }
.advance { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; margin-top: 0.75rem; }
.advance .fine { flex: 1 1 16rem; }
/* The same voice as the meter panel's progress lines (`.gate .pending`), on a
   row of its own under the button. */
.advance .pending { flex: 1 1 100%; color: var(--ink-soft); font-size: 0.9rem; font-style: italic; margin: 0; }