/* money.css — the shapes the money surfaces need, written in the store's own tokens, loaded by the eleven pages where money moves (bank, claim, gacha, gardens, hive, mint, orchard, pools, seat, tally, wallet). WHAT IT REPLACES. `css/scry-ui.css` (the deck's legacy class vocabulary) and `css/deck-bridge.css` (a token map that redefined the deck's names — --omen-0, --ink, --gild, --face-mono — in terms of the store's). Both are deleted. The bridge worked: it got the COLOURS right. It could not get the SHAPES right, because the shapes it was translating were an aged-paper broadsheet — a 34px italic serif hero, letterspaced small-cap kickers, `section { padding: 32px 0 0 }` — and repainting a broadsheet in Steam black yields a broadsheet in Steam black. That is what read as "some old website we used to have" on the ten pages that carried it while thirty-three others did not. ⚠ THE DEAD-SCOPE BUG THIS FILE FIXES, and it is the reason the money pages measured worse on a phone than the store pages. scry-ui.css's entire phone block — every 44px tap floor, every 16px input, every scroll-margin — was scoped `body[data-deck-shell^="ledger:"]`. That attribute went with the deck chrome on 2026-08-11 and no page has carried it since, so ~60 hardening rules have been inert. Measured on the origin at 390x844 before this sheet: pools had 82 elements under 11px and 4 tap targets under 44px; mint had 39 under 11px. Nothing announced it — dead CSS renders as a page that was simply never tuned. **The rules below are UNSCOPED on purpose**: this sheet is loaded by exactly the eleven pages it is for, so the file IS the scope. Never re-add a body-attribute selector here; that is the mechanism that failed. THE ONE RULE FOR EDITING IT. Every value is a store token or a constant with no store equivalent (rhythm, motion). Never write a literal colour — a hex typed here is a colour that cannot follow the store when the palette moves, and it drifts silently. COLLISIONS, and why there are none left. store.css and scry-ui.css each defined `.hero`, `.card`, `.note`, `.btn`, `.mono` and `.scroll-x`. The bridge handled that by RESETTING the store's geometry back off — a fix that has to be re-derived every time either sheet moves. The markup was renamed instead: the money pages' text hero is now `.page-head > h1` + `.lede`, which are the store's own. So this file deliberately does NOT define `.hero`, `.card`, `.note`, `.btn`, `.mono` or `.panel`. If you need one, it already exists in store.css and it is the shape you want. */ :root { /* the store has no rhythm pair of its own; these are the deck's, kept because forty rules across eleven pages are spaced by them */ --gap: 10px; --pad: 14px; /* ── the engraved plates' four inks ──────────────────────────────────── ⚠ THESE FOUR ARE READ AT RUNTIME, NOT PAINTED BY A RULE, which is why deleting them silently would not have shown up in any selector audit. js/scene/*.js calls getComputedStyle().getPropertyValue() for each one and draws the plate with whatever comes back, so the same code inks itself sepia on paper and pale green on the store's black — the scene READS the ground instead of choosing it, and that is the whole mechanism. An undefined custom property returns the EMPTY STRING here rather than dropping a declaration, so the canvas would draw in the browser's default and the plate would simply be invisible. Three pages mount a scene (mint, pools, seat) and all three load this sheet; test_site.py §the plate's inks gates that pairing so a fourth cannot mount one without them. `--omen-0` keeps the deck's name because three scene modules read it by that string; renaming it means editing them, not this line. */ --omen-0: var(--store-bg); --engrave-ink: var(--store-muted); --engrave-faint: var(--store-line-2); --engrave-beam: rgba(0, 200, 5, .18); } /* ── the page head ──────────────────────────────────────────────────────── Every money page opened with `.kicker` + a `.hero` sentence and NO

at all — nine pages with no top-level heading, which is a real defect for a screen reader and for search before it is a design one. The markup now emits the store's `.page-head > h1` and this only adds the eyebrow above it. */ .kicker { font-family: var(--sg); font-weight: 700; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--store-gold); margin: 18px 0 0; } .kicker + .page-head { padding-top: 4px; } /* ── section heads, borrowed from the store's shelf rows ────────────────── store.css styles `.row > h2`. Applying it here by SELECTOR rather than by adding `class="row"` to ~90
tags across eleven files: same result, one rule, and a new section on a money page inherits it by existing. */ #main section { margin-top: 34px; } /* the first block on a page sits under the masthead and needs no rule of its own to separate from. Without this, 34px here stacked on the kicker's own margin and mint's inline `padding-top:26px` for ~140px of empty ground above the first word — on a fold this reorder exists to buy back. */ #main section:first-of-type { margin-top: 0; } #main section > h2 { font-family: var(--sg); font-weight: 700; font-size: .95rem; letter-spacing: .17em; text-transform: uppercase; color: var(--store-ink); margin-bottom: 14px; padding-bottom: 9px; border-bottom: 1px solid var(--store-line); position: relative; display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; } #main section > h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 54px; height: 2px; background: var(--g-live); box-shadow: 0 0 10px rgba(0, 200, 5, .5); } #main section[id] { scroll-margin-top: 84px; } /* ── small prose ────────────────────────────────────────────────────────── `.note` and `.mono` come from store.css. These are the two it has no word for. Both were italic serif and are now upright: the store's vendored Space Grotesk has no italic axis, so every `font-style: italic` on these pages was a browser-synthesised shear of the upright — the cheap slant that was most of what still read as "not the store" in a rendered frame. */ .mono-note { font-family: var(--mono); font-size: .74rem; color: var(--store-muted); line-height: 1.6; } .sub { color: var(--store-muted); font-size: .82rem; line-height: 1.5; } .caption { color: var(--store-muted); font-size: .75rem; line-height: 1.5; font-family: var(--mono); } .engraving { font-family: var(--sg); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; color: var(--store-ink); } .deck { display: grid; gap: var(--gap); } .hidden { display: none; } /* ── stat tiles ─────────────────────────────────────────────────────────── The deck drew these with two radial-gradient rivets in the top corners and a text-shadow glow on the number. Both are gone: the store's furniture is a bevelled slab and nothing else. `.tile` speaks both dialects (.n/.l and .k/.v) because six pages use one and five use the other. */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--gap); margin: 16px 0 6px; } .tile { background-color: #181e19; background-image: linear-gradient(180deg, #181e19 0%, #10140f 100%); border: 1px solid var(--store-line); border-radius: var(--r); box-shadow: var(--bevel); padding: 12px 14px; } a.tile { text-decoration: none; display: block; } a.tile:hover { border-color: var(--g-core); } .tile .n, .tile .v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.3rem; color: var(--store-ink); word-break: break-word; line-height: 1.25; } .tile .v { margin-top: 3px; } .tile .l, .tile .k { font-family: var(--sg); font-weight: 600; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--store-muted); margin-top: 5px; } .tile .k { margin-top: 0; } /* A TICKER IS SPELLED THE WAY IT IS SPELLED, and `text-transform: uppercase` above does not know that. bank.html's two headline stats are "xSCRY in issue" and "what one xSCRY redeems for", and they rendered as "XSCRY IN ISSUE" on the one page whose entire product IS the difference between SCRY and xSCRY. The casing is the distinction. */ .tk { text-transform: none; } .tile svg.spark { display: block; margin-top: 8px; width: 100%; height: 26px; } /* ── charts (js/chart.js), shared by the tally and the pools ────────────── The ink lives in the module; this is the frame it hangs in. Every chart carries a details.tnum table fold beneath it — the numbers for a reader who cannot use the picture, which is a site law rather than a nicety. */ .chart { background: var(--store-panel); border: 1px solid var(--store-line); border-radius: var(--r); padding: 10px 12px; margin: 8px 0; } .chart svg { width: 100%; height: auto; display: block; } .legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font: 600 .66rem var(--sg); letter-spacing: .08em; text-transform: uppercase; color: var(--store-muted); margin-top: 6px; } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; } details.tnum { margin: 4px 0 16px; } details.tnum > summary { font: 600 .66rem var(--sg); letter-spacing: .1em; text-transform: uppercase; color: var(--store-muted); cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; } details.tnum > summary::-webkit-details-marker { display: none; } details.tnum > summary::before { content: "▸ "; color: var(--g-live); margin-right: 4px; } details.tnum[open] > summary::before { content: "▾ "; } details.tnum table { border-collapse: collapse; font: .74rem var(--mono); margin-top: 6px; width: auto; } details.tnum th, details.tnum td { border: 1px solid var(--store-line); padding: 3px 9px; text-align: left; white-space: nowrap; } /* ── tables, the ledger grammar ─────────────────────────────────────────── Scoped to #main so nothing here can reach the masthead. */ #main table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .78rem; } #main th { text-align: left; font-family: var(--sg); font-weight: 700; font-size: .63rem; letter-spacing: .14em; text-transform: uppercase; color: var(--store-muted); padding: 8px 10px; border-bottom: 1px solid var(--store-line); white-space: nowrap; } #main th.numeric, #main td.numeric { text-align: right; } #main td { padding: 10px; border-bottom: 1px solid var(--store-line); vertical-align: top; } /* a cell holding a badge AND a sentence about it gets two lines on every viewport — on a desk they ran together as "locked by the factory nobody can pull it, this house included" */ #main td > .badge + .mono-note { display: block; margin-top: 4px; } #main td.answer, #main td.prose { font-family: var(--body); font-size: .9rem; line-height: 1.5; } #main tr.rowlink { cursor: pointer; } #main tr.rowlink:hover td { background: var(--g-wash); } /* THE SCROLL WAS REAL AND INVISIBLE. Measured at 390px: the barrow's three rooms is 483px wide, the temptation table's offers 480px, claim's drop comparison 352px — all inside this container, so `horizontalOverflow` reads false on the document and the capture's oracle sees nothing, while the reader gets a table cut off at the edge with no cue that it moves. What was cut mattered: the OBOL HOARD and MYRRH columns on the barrow, MAX STAKE NOW on the table, and on claim.html the whole DROP TWO column — the one that says when you can claim. The two `local` gradients ride the content and cover the two `scroll` shadows at each end, so the cue appears only on the side that actually has more. Pure CSS; nothing to wire, nothing to keep in sync. */ .scroll-x { overflow-x: auto; border: 1px solid var(--store-line); border-radius: var(--r); background: linear-gradient(to right, var(--store-panel) 34%, transparent) left / 30px 100% no-repeat local, linear-gradient(to left, var(--store-panel) 34%, transparent) right / 30px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .55), transparent) left / 22px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .55), transparent) right / 22px 100% no-repeat scroll; background-color: var(--store-panel); } .scroll-x table td, .scroll-x table th { padding-left: 14px; padding-right: 14px; } /* ── status badges ──────────────────────────────────────────────────────── COLOUR ALONE MAY NOT SAY "SETTLED" (store.css §the palette): green ink is decoration, a solid green FILL is the claim. These are outlines, so each one also carries its word. */ .badge { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--store-line); color: var(--store-muted); white-space: nowrap; display: inline-block; } .badge.ok { border-color: var(--g-core); color: var(--store-ink); } .badge.warn { border-color: var(--store-gold); color: var(--store-gold); } .badge.bad { border-color: var(--breach-red); color: var(--breach-red); } /* the lock state on a pool row: the single fact this audience screens on, so it is a badge on the row and never a sentence in a paragraph */ .badge.locked { border-color: var(--g-core); color: var(--g-live); } .badge.unlocked { border-color: var(--store-gold); color: var(--store-gold); } .up { color: var(--g-live); } .down { color: var(--breach-red); } /* ── the inline status tag ──────────────────────────────────────────────── ⚠ THIS CLASS EXISTS BECAUSE `.pill` COULD NOT. store.css's `.pill` is Steam's CORNER TAG RIDING ON ART — `position: absolute; left: 12px; bottom: 12px` — and it only ever looks right inside ``, which is positioned. js/mint.js used the same word for an inline status badge in a table cell: `open` / `shut` / `posted` / `mine`. With no positioned ancestor they all resolve against the initial containing block, so EVERY tag on the page lands at the same coordinate — thirteen of them stacked in the left margin, and one `POSTED` printed straight through the buy-one paragraph. The deck bridge used to reset the geometry back off. That is a fix that has to be re-derived every time either sheet moves, so mint.js emits `.tag` instead and the collision no longer exists. Never reintroduce `.pill` on a money page. */ .tag { display: inline-block; font-family: var(--sg); font-weight: 700; font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--r-sm); white-space: nowrap; background: var(--store-pit); color: var(--store-muted); border: 1px solid var(--store-line); } .tag.open, .tag.mine { color: var(--g-live); border-color: var(--g-core); } .tag.posted { color: var(--store-gold); border-color: var(--store-gold); } /* ── controls ───────────────────────────────────────────────────────────── `.btn` is store.css's and it is the shape we want: a filled Robinhood-green slab, 40px tall. Two modifiers live here. `.btn-gold` is gold rather than green because green is the store's LINK colour and these are WRITES TO A CHAIN — a link takes you somewhere, this one spends. It is written as a full button rather than as `.btn.gold` because nine pages already emit the bare class. */ .btn-gold { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; background: var(--store-gold); color: #17140a; border: 1px solid var(--store-gold); border-radius: var(--r); font-family: var(--sg); font-weight: 700; font-size: .84rem; letter-spacing: .01em; cursor: pointer; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(0, 0, 0, .6); } .btn-gold:hover { filter: brightness(1.08); text-decoration: none; } .btn-gold[disabled], .btn-gold[aria-disabled="true"] { background: transparent; color: var(--store-muted); border-color: var(--store-line); cursor: not-allowed; filter: none; box-shadow: none; } .btn-quiet { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; background: none; border: 1px solid var(--store-line); border-radius: var(--r); color: var(--store-ink); font-family: var(--sg); font-weight: 600; font-size: .82rem; cursor: pointer; text-decoration: none; } .btn-quiet:hover, .btn-quiet:focus-visible { border-color: var(--g-core); color: var(--store-ink); text-decoration: none; } button:disabled, .btn-quiet:disabled { opacity: .45; cursor: default; } /* the action row: one or more verbs, side by side on a desk and stacked full-width on a phone, where a 50%-width button is a miss waiting to happen */ .mact { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0; } .mact .btn, .mact .btn-gold, .mact .btn-quiet { min-height: 44px; } /* forms. Scoped INSIDE .field so it cannot restyle the mast's search box, which is a bare in the same document. */ .field, .field-row { display: grid; gap: 6px; margin: 0 0 var(--gap); } .field-c { display: grid; gap: 6px; grid-template-columns: 1fr auto; align-items: end; } .field > label, .field-row > label, .field-c > label { color: var(--store-muted); font-size: .8rem; letter-spacing: .02em; } .field input, .field-row input, .field-c input, input.field-c, .field select, .field-row select, .field-c select, select.field-c, .field textarea, .field-row textarea { background: var(--store-pit); color: var(--store-ink); border: 1px solid var(--store-line); border-radius: var(--r-sm); padding: 10px 11px; font: 14px/1.2 var(--mono); width: 100%; min-height: 44px; } .field textarea, .field-row textarea { min-height: 74px; resize: vertical; } .field input:focus-visible, .field-row input:focus-visible, .field-c input:focus-visible, .field select:focus-visible { outline: 2px solid var(--g-live); outline-offset: 1px; } /* ⚠ A BARE