/* ── carried from css/23-legacy-plate.css on 2026-09-22, as that part was deleted.
           It is this surface’s own description, and it was living in the outgoing half. ── */
        /* ===== The Register of Miles Travelled =====
           A plate book, not a dashboard. The whole page is set in the display face with
           hairline rules between plates; nothing is boxed, nothing is tinted, and the only
           weight on the page is the numbers themselves. */

        /* ==========================================================================
           #C  The Register — the log's own account of itself
           --------------------------------------------------------------------------
           Third surface in the deck log world, 2026-09-04. Brief:
           .impeccable/surfaces/public-19-stats-js.md

           The screen arrived already designed, in the retiring world: numbered plates,
           a ledger's voice, every figure carrying the sentence that says what it means.
           None of that changes here. What changes is the material it is printed on —
           and two devices that cannot survive the house law, because they said "this
           block is different" with a filled colour: the four totals and the colophon.

           This block is the translation. It is scoped by #statsPage so it beats the
           class rules of the outgoing version wherever they overlap, and it adds one
           thing to the world that DESIGN.md does not yet carry: a vocabulary for data
           on a ruled sheet. A plate is a ruled section, its head is a band, its rows
           are hairlined, and the only ink on it is the one violet.
           ========================================================================== */

        /* Exactly the bar's height, and not a pixel more. The colophon carries its own
           inch of air inside its band; anything added here shows as a strip of bare stock
           below it, which reads as the page having stopped early rather than as the
           register having ended. */
        /* The page is exactly the screen and the sheet inside it is the thing that
           scrolls. Said explicitly: .page only sets min-height, so the sheet's
           height:100% resolved to nothing, the frame scrolled instead, and a sticky head
           inside a non-scrolling overflow:auto box sticks to nothing — it scrolled away
           with the page. The bottom bar's allowance is gone with the bar. */
        #statsPage.active {
            display: flex;
            flex-direction: column;
            height: 100vh;
            height: 100dvh;
            min-height: 0;
            /* The page is exactly the screen; nothing of it may reach outside. */
            overflow: hidden;
        }

        #statsPage .stats-scroll {
            /* ── carried from css/23-legacy-plate.css, 2026-09-22 ──
               The outgoing rule declared these and this one did not, so they were the only part
               of it still drawing. Same values, now at this specificity. ── */
            height: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            flex: 1 1 auto;
            min-height: 0;
            /* The containing block for anything absolutely positioned inside the
               register — the spoken-only sentence (.stats-quiet) is one. Without this
               it was placed against the page, at the height it would have had in the
               scrolled text: 72px below the screen, which gave the outer frame that
               much to scroll and the register a strip of bare stock under its foot. */
            position: relative;
            background: var(--log-stock);
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }

        /* ---- Failure, and waiting ---------------------------------------------- */
        /* Named, never a page of zeroes: a register of zeroes says "you have been
           nowhere", which is a worse lie than an error. */

        #statsPage .stats-loading {
            padding: var(--sp-2xl) var(--sp-lg);
            text-align: center;
            font-family: var(--log-write);
            font-size: var(--fs-body);
            color: var(--log-ink);
        }

        #statsPage .stats-loading span {
            display: block;
            margin-top: var(--sp-sm);
            font-family: var(--log-write);
            font-size: var(--fs-small);
            color: var(--log-ink-soft);
        }

        /* ---- The head ----------------------------------------------------------- */

        /* Held at the top: with the bottom bar gone, Back is the only way off the
           page, and a ledger is read under a fixed head. The same measure as the
           Wall's bar. */
        /* The head and Back are the room head (.room-bar, css/11-home.css, since 2026-09-16).
           What is this room's own is the rule's one written variant: no title, because the
           Register's title is the head that follows, so the two words sit at the two ends
           rather than in three columns. And the whole ledger scrolls, so the head sticks.
           (The room head's grid-template-columns still reaches this bar, and does nothing:
           a flex container has no columns to lay out.) */
        #statsPage .stats-bar {
            position: sticky;
            top: 0;
            z-index: 2;
            display: flex;
            justify-content: space-between;
        }

        /* No foot. The register ends on its imprint, on the band, and the way off the
           page is Back in the fixed head; a Back-to-top row under it was tried on
           2026-09-05 and taken off the same day — a ledger needs no second door. */

        /* Back is the room head's (.room-back). Share, below, wears the same word: the arrow
           that stood before Back was the one glyph on a page whose rule is words, and it made
           the two ends of the bar different for no reason. */

        /* A word, not a glyph. This world's signature control is the word "Reveal",
           chosen over an eye, and the finish review on Home found two unnamed icons whose
           names existed only behind a hover a phone does not have.

           Ink, not magenta. Magenta is this world's annotation overprint — the register's
           own hand adding to the register — and Share adds nothing: it takes a copy out.
           Three magenta marks on one sheet is the dilution the palette rule names. */
        #statsPage .stats-share {
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--log-ink);
            text-decoration: underline;
            text-underline-offset: 0.25em;
            text-decoration-thickness: 1px;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
        }

        #statsPage .stats-head {
            padding: var(--sp-xl) var(--sp-lg);
            text-align: center;
            background: var(--log-stock);
            border-bottom: 1px solid var(--log-rule-firm);
        }

        #statsPage .stats-head h1 {
            /* ── carried from css/23-legacy-plate.css, 2026-09-22 ──
               The outgoing rule declared these and this one did not, so they were the only part
               of it still drawing. Same values, now at this specificity. ── */
            margin: 0;
            font-family: var(--log-print);
            font-size: var(--fs-lg);
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            line-height: 1.2;
            color: var(--log-ink);
        }

        /* Who keeps the register, in the hand that keeps it. */
        #statsPage .stats-head p {
            margin: var(--sp-sm) 0 0;
            font-family: var(--log-write);
            font-style: normal;
            font-size: var(--fs-small);
            color: var(--log-ink-soft);
        }

        /* ---- The four totals ---------------------------------------------------- */
        /* Decided 2026-09-04 from four candidates drawn side by side in the real app with
           real numbers (public/register-totals.html, deleted 2026-09-25 — `git show 36bf769:public/register-totals.html`):
           the sheet's own heading ground.

           The outgoing version put these four on filled olive and the colophon on olive
           again, so the register opened and closed on a colour — the move the house law
           refuses, since colour belongs to the traveller's photographs and this page has
           none. Oilskin was the near miss: it would have bound the register top and foot
           the way the sign-in sheet is bound by its cover. The band won for being the
           quieter of the two and already meaning "heading" in this world.

           Which leaves one thing to get right, because the plate heads use the same
           ground: what separates the totals from a heading is not colour but scale and
           enclosure — figures at --fs-xl, and firm rules around and between the cells
           rather than the hairline a row would take. */

        #statsPage .stats-grid {
            /* ── carried from css/23-legacy-plate.css, 2026-09-22 ──
               The outgoing rule declared these and this one did not, so they were the only part
               of it still drawing. Same values, now at this specificity. ── */
            padding: var(--sp-xl) var(--sp-lg);
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0;
            background: var(--log-stock-band);
            color: var(--log-ink);
            border-bottom: 1px solid var(--log-rule-firm);
        }

        #statsPage .stats-cell {
            padding: var(--sp-lg) var(--sp-md);
            border-bottom: 1px solid var(--log-rule-firm);
            border-right: 1px solid var(--log-rule-firm);
        }

        #statsPage .stats-cell:nth-child(2n) { border-right: none; }
        #statsPage .stats-cell:nth-last-child(-n+2) { border-bottom: none; }

        #statsPage .stats-figure,
        #statsPage .stats-grid .stats-figure {
            font-family: var(--log-print);
            font-size: var(--fs-xl);
            font-weight: 600;
            /* Lining and tabular: a column of totals has to align, and old-style numerals
               drop the 4 and the 7 below the baseline. */
            font-variant-numeric: lining-nums tabular-nums;
            line-height: 1;
            color: var(--log-ink);
        }

        #statsPage .stats-label,
        #statsPage .stats-grid .stats-label {
            margin-top: var(--sp-xs);
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--log-ink);
        }

        /* The line that makes a number mean something. */
        #statsPage .stats-note,
        #statsPage .stats-grid .stats-note {
            margin-top: var(--sp-2xs);
            font-family: var(--log-write);
            font-size: var(--fs-small);
            line-height: 1.5;
            color: var(--log-ink-soft);
        }

        /* ---- Plates ------------------------------------------------------------- */
        /* No alternating tone. Two paper tints were how the outgoing version separated
           plates once it had removed its rules; this world separates with rules, and
           the two weights are already load-bearing — firm between plates, hairline
           between rows. Nothing here is tinted and nothing is boxed. */

        #statsPage .stats-plate {
            padding: 0 0 var(--sp-lg);
            background: var(--log-stock);
            border-bottom: 1px solid var(--log-rule-firm);
        }

        #statsPage .stats-plate-rule {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--sp-sm);
            margin: 0 0 var(--sp-md);
            padding: var(--sp-sm) var(--sp-lg);
            background: var(--log-stock-band);
            border-bottom: 1px solid var(--log-rule-firm);
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--log-ink);
        }

        /* What a plate offers to let you do, at the right end of its own head — the same
           place and the same mark the log's section heads use. Annotation magenta,
           underlined: the register's hand adding to the register, not a control. */
        #statsPage .stats-plate-action {
            position: relative;
            background: none;
            border: none;
            padding: 0;
            font: inherit;
            letter-spacing: 0.14em;
            color: var(--log-magenta);
            text-decoration: underline;
            text-underline-offset: 0.25em;
            text-decoration-thickness: 1px;
            cursor: pointer;
        }

        /* The 44px is a hit area, not a height. Asking for it with min-height made Plate
           II's head taller than every other plate's, so the one plate that offers
           something announced itself by being a different size — which is a claim about
           importance nobody meant to make. The target is spread with a pseudo-element
           instead: the same device the app already uses for its other small controls. */
        #statsPage .stats-plate-action::after {
            content: '';
            position: absolute;
            left: -8px;
            right: -8px;
            top: 50%;
            transform: translateY(-50%);
            height: 44px;
        }

        /* The plate's contents keep the sheet's margin; only the head runs full width,
           the way a printed heading band does. */
        #statsPage .stats-plate > *:not(.stats-plate-rule):not(.reg-map-wrap) {
            margin-left: var(--sp-lg);
            margin-right: var(--sp-lg);
        }

        /* ---- Plate II: the marks ------------------------------------------------ */
        /* One mark per country at that country's own place in the alphabet. The unlit
           marks are the argument: they are what makes eleven read as eleven of a
           hundred and ninety-eight rather than simply as eleven. */

        #statsPage .stats-marks {
            display: flex;
            flex-wrap: wrap;
            gap: 3px;
            margin-bottom: var(--sp-md);
        }

        /* --log-rule-firm, not --log-rule. The token block says the hairline "never
           carries meaning on its own" and holds the firm rule at 3.30:1 for the lines that
           do — and here the unlit marks are the argument: they are what makes eleven read
           as eleven out of a hundred and ninety-eight. At 1.77:1 they were below the floor
           for a graphic that means something, which made the argument invisible to exactly
           the reader who needs it stated. */
        /* An uninked mark is the hairline's grey, not the firm rule's: at 7px the
           firm grey sat too close to ink and the eleven inked ones did not stand out
           from the hundred and eighty-seven that were not. */
        #statsPage .stats-mark {
            width: 7px;
            height: 7px;
            background: var(--log-rule);
            cursor: pointer;
        }

        #statsPage .stats-mark.is-inked { background: var(--log-ink); }

        /* Prose on a plate does one of two jobs, and the page has to say which.

           Above the rows it is a standfirst: what you are about to read and why it is
           here. It is stated in the same ink as the record, because it is part of it —
           "two trips count toward your totals but have no diary entry yet" is a fact
           about the account, not a remark about it.

           Below the rows it is the register's own remark, drawn from what you have just
           read: "two of your eleven countries have been worth a second journey." It steps
           back a shade, the way a hand-written note under a printed table does.

           Neither position is more correct than the other — they are different sentences.
           What was wrong was that both were set identically, so the page gave the reader
           no way to tell a heading from a conclusion. */
        #statsPage .stats-caption {
            /* ── carried from css/23-legacy-plate.css, 2026-09-22 ──
               The outgoing rule declared these and this one did not, so they were the only part
               of it still drawing. Same values, now at this specificity. ── */
            margin: 0 0 var(--sp-xs);
            font-family: var(--log-write);
            font-size: var(--fs-small);
            line-height: 1.55;
            color: var(--log-ink);
        }

        #statsPage .stats-caption.is-lede {
            margin-bottom: var(--sp-sm);
        }

        #statsPage .stats-caption.is-summary {
            margin-top: var(--sp-sm);
            color: var(--log-ink-soft);
        }

        /* ---- Rows --------------------------------------------------------------- */
        /* Ruled, because in this world a row is a ruled row. The outgoing version had
           taken its rules out on the grounds that the page had too many; here the two
           weights carry the structure, so the hairline is doing work again rather than
           being texture. */

        #statsPage .stats-row {
            display: flex;
            align-items: baseline;
            gap: var(--sp-sm);
            padding: var(--sp-sm) 0;
            border-bottom: 1px solid var(--log-rule);
        }

        #statsPage .stats-row:last-of-type { border-bottom: none; }

        #statsPage .stats-row-name {
            flex: 1;
            min-width: 0;
            font-family: var(--log-print);
            font-size: var(--fs-body);
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--log-ink);
        }

        #statsPage .stats-row-meta,
        #statsPage .stats-row-count {
            font-family: var(--log-write);
            font-size: var(--fs-small);
            font-variant-numeric: lining-nums;
            color: var(--log-ink-soft);
        }

        /* The one thing on a plate that acts. Annotation magenta, underlined — the same
           mark the log uses for "do something to this entry", not a button. */
        #statsPage .stats-write {
            /* ── carried from css/23-legacy-plate.css, 2026-09-22 ──
               The outgoing rule declared these and this one did not, so they were the only part
               of it still drawing. Same values, now at this specificity. ── */
            padding: 0;
            border: none;
            background: transparent;
            cursor: pointer;
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--log-magenta);
            text-decoration: underline;
            text-underline-offset: 0.25em;
            text-decoration-thickness: 1px;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
        }

        /* ---- Plate IV: by year --------------------------------------------------- */

        #statsPage .stats-year {
            display: flex;
            align-items: center;
            gap: var(--sp-sm);
            padding: var(--sp-xs) 0;
        }

        #statsPage .stats-year-n {
            flex: none;
            width: 30px;
            font-family: var(--log-print);
            font-size: var(--fs-small);
            font-weight: 600;
            letter-spacing: 0.08em;
            font-variant-numeric: lining-nums;
            color: var(--log-ink);
        }

        /* The line, and nothing behind it.
           A track is a promise of a maximum, and there is no maximum number of days a year
           can hold that anyone is measuring against — these bars only compare one year
           with another. The empty remainder was answering a question the plate does not
           ask, and it made a light year read as a year that had failed to fill something. */
        #statsPage .stats-year-bar {
            flex: 1;
            height: 4px;
            background: transparent;
        }

        /* A year spent at home is a bar of no width, and it stays in the register as an
           empty line rather than being skipped. */
        #statsPage .stats-year-bar i {
            display: block;
            height: 100%;
            background: var(--log-ink);
        }

        #statsPage .stats-year-d {
            flex: none;
            width: 62px;
            text-align: right;
            font-family: var(--log-write);
            font-size: var(--fs-small);
            font-variant-numeric: lining-nums;
            color: var(--log-ink-soft);
        }

        /* ---- Plate V: extremes --------------------------------------------------- */

        #statsPage .stats-extreme {
            display: flex;
            align-items: baseline;
            gap: var(--sp-md);
            padding: var(--sp-sm) 0;
            border-bottom: 1px solid var(--log-rule);
        }

        #statsPage .stats-extreme:last-of-type { border-bottom: none; }

        /* min-width, not width, and never wrapping.
           At a fixed 88px "18,058 km" fits and "108,058 km" would have folded onto a
           second line, putting "km" under the figure — a unit orphaned from its number.
           A minimum keeps the three figures aligned in every ordinary case, and the one
           traveller who circles the globe four times gets a wider column on that row
           instead of a broken one. */
        #statsPage .stats-extreme-n {
            /* ── carried from css/23-legacy-plate.css, 2026-09-22 ──
               The outgoing rule declared these and this one did not, so they were the only part
               of it still drawing. Same values, now at this specificity. ── */
            width: 84px;
            flex: 0 0 auto;
            min-width: 6.5rem;
            white-space: nowrap;
            font-family: var(--log-print);
            font-size: var(--fs-lg);
            font-weight: 600;
            font-variant-numeric: lining-nums tabular-nums;
            line-height: 1.1;
            color: var(--log-ink);
        }

        #statsPage .stats-extreme-t {
            flex: 1;
            font-family: var(--log-write);
            font-size: var(--fs-small);
            line-height: 1.5;
            color: var(--log-ink-soft);
        }

        #statsPage .stats-extreme-t b {
            display: block;
            font-family: var(--log-print);
            font-weight: 600;
            font-size: var(--fs-body);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--log-ink);
        }

        #statsPage .stats-extreme-w {
            display: block;
            margin-top: 2px;
        }

        /* ---- The colophon --------------------------------------------------------- */
        /* The same decision as the totals, which is the point of it: the register opens on
           the band and closes on the band, so the two ends match without either of them
           being a colour. It was the second filled panel in the outgoing version, and it
           closed the page in the colour the page opened in — the same idea, in the one
           material this world does not allow. */

        #statsPage .stats-foot {
            padding: var(--sp-xl) var(--sp-lg);
            text-align: center;
            background: var(--log-stock-band);
            border-top: 1px solid var(--log-rule-firm);
            color: var(--log-ink);
        }

        #statsPage .stats-foot p {
            margin: 0 0 var(--sp-sm);
            font-family: var(--log-write);
            font-size: var(--fs-small);
            line-height: 1.7;
            color: var(--log-ink-soft);
        }

        /* The numerals stay at full strength: they are the point of the sentence and the
           words are the frame. Colour, not opacity — opacity composites the subtree and a
           child cannot undo its parent's. */
        #statsPage .stats-foot b {
            font-family: var(--log-print);
            font-weight: 600;
            font-size: var(--fs-lg);
            font-variant-numeric: lining-nums;
            color: var(--log-ink);
        }

        #statsPage .stats-imprint {
            margin-top: var(--sp-lg);
            padding-top: var(--sp-md);
            border-top: 1px solid var(--log-rule);
        }

        #statsPage .stats-imprint-name {
            font-family: var(--log-print);
            font-size: var(--fs-body);
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--log-ink);
        }

        #statsPage .stats-imprint-line {
            margin-top: var(--sp-2xs);
            font-family: var(--log-write);
            font-size: var(--fs-small);
            color: var(--log-ink-soft);
        }

        /* ---- Plate I: the world ---------------------------------------------------- */
        /* Land is a hairline outline, visited countries are inked. The contrast between
           the two is the whole content of the plate, so nothing else on it carries any.

           ⚠️ Land and border colours are stated here, not left to the export: rebuilding
           the paths to add ISO ids dropped the class its embedded <style> was reading, and
           with nothing in CSS every continent fell back to solid black. */

        #statsPage .reg-map-wrap,
        #profilePage .reg-map-wrap {
            margin: 0 var(--sp-lg) var(--sp-sm);
        }

        /* The coastline is the only thing separating land from water here — the two
           grounds are 1.09:1 apart — so it is the firm rule, not the hairline. Same reason
           as the marks: a line that carries the whole content of a plate is not a hairline
           between rows. */
        #statsPage .reg-map path,
        #profilePage .reg-map path {
            /* ── carried from css/23-legacy-plate.css, 2026-09-22 ──
               The outgoing rule declared these and this one did not, so they were the only part
               of it still drawing. Same values, now at this specificity. ── */
            fill-rule: evenodd;
            stroke-linejoin: round;
            fill: var(--log-stock-band);
            stroke: var(--log-rule-firm);
            stroke-width: 0.35;
        }

        /* Inked, and kept apart from its neighbours.

           Two inked countries that share a border merge into one shape, and the map stops
           saying "China and North Korea" and starts saying "this blob". The separation is
           a keyline in the colour of the paper — the engraver's answer, and the reason
           filled areas on a printed map are divided by a hairline of white rather than by
           a darker line.

           paint-order matters: stroke first, then fill. Painted the usual way round, half
           the keyline would sit inside the country and eat its coastline; painted first,
           it lies outside, the fill covers the shape exactly, and the line that appears
           between two neighbours is each of them holding the other off. */
        #statsPage .reg-map path.is-visited,
        #profilePage .reg-map path.is-visited {
            fill: var(--log-ink);
            stroke: var(--log-stock-band);
            stroke-width: 1.1;
            paint-order: stroke fill;
        }

        /* Except a speck. Qatar, Malta, Singapore are a pixel or two across, and a pale
           halo around a dot that small only makes it smaller. They keep the old widening
           ink stroke: a speck's problem is being found, not being told apart from a
           neighbour it is far too small to touch. Which countries these are is decided at
           render time by measuring them — see markMapSpecks. */
        #statsPage .reg-map path.is-visited.is-speck,
        #profilePage .reg-map path.is-visited.is-speck {
            stroke: var(--log-ink);
            stroke-width: 1.6;
            paint-order: normal;
        }

        #statsPage .reg-map-note,
        #profilePage .reg-map-note {
            /* ── carried from css/23-legacy-plate.css, 2026-09-22. It was the last thing that rule
               still drew, and it had been invisible to every tool here until the walker learned to
               see a brace that opens mid-line (bug ten). ── */
            margin-top: var(--sp-xs);
            font-family: var(--log-write);
            font-size: var(--fs-small);
            color: var(--log-ink-soft);
        }

        /* ---- Adding a country by hand ---------------------------------------------- */
        /* The control lives in Plate II's head (see .stats-plate-action) and the sentence
           about what a hand-added country counts for now lives inside the sheet, at the
           moment the choice is made rather than permanently on the page. What is left here
           is how an added country reads once it is in the list.

           Recorded from a trip, or remembered by hand: the dotted underline is the register
           saying which is which. A button now, not a span with an onclick: it deletes a row of the record, so
           it has to be reachable by keyboard, announce what it removes, and ask first. It
           still reads as a word in a sentence — the dotted underline is the register
           saying which countries were remembered rather than recorded. */
        #statsPage .stats-manual {
            font: inherit;
            color: inherit;
            background: none;
            border: none;
            border-bottom: 1px dotted var(--log-ink-soft);
            padding: 0;
            cursor: pointer;
        }

        /* Said out loud, drawn nowhere. Plate I is an SVG hidden from assistive
           technology, which left the plate an empty heading; this sentence is what it
           says. The country grid below is hidden the same way, for the opposite reason —
           it is a picture of a caption that is already written in words. */
        #statsPage .stats-quiet {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0 0 0 0);
            clip-path: inset(50%);
            white-space: nowrap;
            border: 0;
        }

        /* Ink, not glow, on this screen too. */
        #statsPage :focus-visible {
            outline: 2px solid var(--log-ink);
            outline-offset: 2px;
        }

        /* ══════════════════════════════════════════════════════════════
           MOVED OUT OF css/23-legacy-plate.css · 2026-09-21  (appended)
           3 rules. DESIGN.md: a surface's rules go in that surface's part, and the
           legacy parts only shrink.
           ⚠️ 23-legacy-plate.css loaded AFTER this file. Placing them
           at the foot keeps their order against THIS PART’S OWN rules — and nothing else.
           Against the parts BETWEEN #9 and #50 the order is reversed by this move, and
           whether that matters was a separate question somebody had to answer. See DESIGN.md.
           ══════════════════════════════════════════════════════════════ */
        /* The ground moved to the log's stock on 2026-09-04 (see section #C). This line
           has to change here rather than be overridden there: it is a bare id, and it sits
           five thousand lines further down the file than the #C block, so document order
           would hand it the argument. */
        #statsPage { background: var(--log-stock); }

        /* ----- Plates ----- */

        .stats-plate:nth-of-type(even) { background: var(--log-stock-band); }

        /* ----- Plate I: the world -----
           Land is a hairline outline; visited countries are filled. The contrast between
           the two is the whole content of the plate, so nothing else on it carries colour. */

        .reg-map {
            display: block;
            width: 100%;
            height: auto;
        }