/* =========================================================================== ASCII — the third skin: the owner's olive "ASCII poster" system. Inert unless js/theme.js stamped ; Pink fun is css/style.css, unprefixed, untouched, and Clean hub is css/theme-clean-hub.css, which this file never reaches into (the two attributes cannot both be on , so the two sheets cannot both apply). THE RULES OF THIS FILE (scripts/qa/theme-verify.js enforces the first two, for every skin's sheet alike) 1. EVERY selector — each one in a comma list, and inside @media — starts with html[data-theme="ascii"]. Only @keyframes may be bare. 2. EVERY [style*=...] selector excludes the .report-page subtree, written out in full: :not(.report-page):not(.report-page *). The pack documents are dated legal records and look the same under every skin; printing is Pink fun by js/theme.js's print rule, so this sheet has NO @media print chrome rules of its own. 3. Colours are TOKENS, defined once in part 1. A hex below part 1 is a bug. HOW IT WORKS, AND WHERE IT BITES. The mechanism is Clean hub's, and that sheet is the reference implementation: READ THE HEADER OF css/theme-clean-hub.css BEFORE WRITING A RULE HERE. app.js draws every screen with inline style="" strings; a skin matches those strings with attribute-substring selectors and replaces what they say with !important. The traps documented there apply here word for word: - THE ONE TRAP: an element whose style a script rewrites (el.style) is re-serialised and every [style*=] rule stops matching it. Dress those by id / class / data-act: .live-ring, #gs-float, .docjob-bar, .docjob-spin, #scan-phase, #scan-indet, #scan-count, #scan-top, #scan-queue, #docview-download, button[data-act="docOpen"], .gs-ghost (it lives on , not in #root) and .launch-ribbon. - THE OTHER TRAP: the two :not() exclusions are two classes of specificity, so a named rule that competes with a generic remap must carry the element name and both exclusions, or it loses silently. - ORDER IS LOAD-BEARING: everything is !important, so specificity and then source order decide. Generic vocabulary first, by-context rules after it, named things last. - THE DOCUMENTS INHERIT: never put font-size, line-height or letter-spacing on #root > div, and never change the WIDTH of the shell's 3px side borders (keep them, transparent if need be) — the sheets inside inherit the one and re-wrap on the other. - THE RIBBON: .launch-ribbon must never cover a control. Its padding lives on .ribbon-track so that index.html's 60-second fold can reach a height of 0px. Visual language, from D:\Design\tmse-prototype-main (assets/base.css — "values verbatim from the design file"): JetBrains Mono everywhere; ink on paper; square corners; 2px ink borders and 1px ink row separators; no shadows; no gradients; olive is the single accent and tint is for hover and bands; the primary button and the active tab / chip are INVERTED (white on ink); text buttons are [ BRACKETED ]; boxes carry edge labels (.tagbox); tables are .rows with no zebra; the app is a 600px bordered shell with a shell-bar and a four-cell bottom tabbar; a blinking cursor; errbar / toast. The ONE rounded thing in the whole design is the landing page's olive poster panel. Where app.js's COMPOSITION has to differ it branches on skinIs('ascii') and emits .as-* classes. Motion respects prefers-reduced-motion. THE PARTS. 1 tokens and the page. 2 the generic vocabulary (every inline font, shadow, corner, border, fill and text colour app.js writes, remapped once). 3 by context (buttons, inputs, chips, the errbar, the wizard, overlays) — each rule adds an element name or a second attribute so it outranks part 2. 4 named things a script re-styles (the live ring, #gs-float, spinners, the shell frame, .gs-ghost, the ribbon). 4b the screens that need more than vocabulary: the scan (#scan-*), the score card and its dial, the sealed list, the pack and its GET buttons, the tripwire, activity, Paid!. 5 the shell app.js emits under skinIs('ascii'): .as-shell / .as-bar / .as-tabbar / .as-otp and the narrow-or-wide column. 6 the landing page (.as-land ...). THINGS HERE THAT ARE NOT WHAT THEY LOOK LIKE. The shell's 2px frame is a pair of generated bars, not its border (its 3px borders stay, transparent — see part 4). The live ring does not rotate a gradient: it blinks, because a gradient is the one thing this design has none of (part 4). The score dial is not a conic gradient either: it is twenty block characters app.js writes under this skin only (pre.as-dial-art; js/motif.js dial()). And the pictures made of characters that a stylesheet CAN draw — the scan's field, the re-read's marching cells, the redaction bars of a sealed card — are generated content (part 4b), so no markup changed for them and the other skins never see them. The font is loaded by js/theme.js (THEMES.ascii.fontHref) from Google Fonts, not from the jsdelivr URL the prototype uses: the site's CSP allows fonts.gstatic.com in font-src and does not allow cdn.jsdelivr.net, and firebase.json is not to be widened for a skin. =========================================================================== */ /* --------------------------------------------------------------------------- 1. TOKENS The first six are the design's, verbatim. MEASURED (WCAG 2.x, the same arithmetic as the contrast pass in scripts/qa/theme_leaks.py), because two of the design's own pairings do not carry small text and a later rule must not assume they do: ink on paper 14.8 on tint 11.0 on poster 5.4 on white 16.9 olive on paper 5.2 on white 6.0 on tint 3.9 <- NOT for text under 24px on tint white on ink 16.9 on olive 6.0 on poster 3.1 <- poster carries white only at >= 24px, or >= 18.66px bold; anything smaller on it is ink --------------------------------------------------------------------------- */ html[data-theme="ascii"] { --as-paper: #F6F0D7; /* page, shell, every surface */ --as-poster: #89986D; /* the landing poster panel's ground — nothing else */ --as-tint: #C5D89D; /* hover, bands, the banner */ --as-ink: #1C1E14; /* text, borders, inverted fills */ --as-white: #FFFFFF; /* text on ink, the poster CTA */ --as-olive: #5C6844; /* the single accent: links, secondary labels */ /* Score bands keep their MEANING. The design is nearly monochrome and says severity with inverted ink blocks, weight, labels and fill patterns; where a hue is still needed these are restrained inks that sit on paper. Every one measures >= 4.5:1 as text on paper, on tint and on white, and carries white or paper text at >= 6:1 when used as a fill. */ --as-danger: #8E2A1B; --as-high: #84450E; --as-caution: #6A550A; --as-lowmod: #4E5E14; --as-clear: #2C5F30; --as-ai: #4F4478; /* the AI channel's ink: a label, not a verdict */ /* Three more, each from the design and each used once. The desk is app/index.html's body colour behind the shell from 640px up; the scrim and the veil are ink and paper thinned, because an overlay's backdrop and a "does not count" wash have no flat equivalent. */ --as-desk: #EFE8CB; --as-scrim: rgba(28, 30, 20, .62); --as-veil: rgba(246, 240, 215, .66); --as-font: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; --as-line: 2px solid var(--as-ink); /* every box */ --as-rule: 1px solid var(--as-ink); /* row separators, tab cells */ --as-r-poster: 30px; /* the poster panel, and only it (22px under 1000px) */ /* The live ring (style.css explains it; app.js reads these by name). At rest the frame is the ink border it stands in for; ringing, a white highlight sweeps it through olive. */ --ring-deep: #1C1E14; --ring-dark: #1C1E14; --ring-primary: #5C6844; --ring-light: #C5D89D; --ring-highlight: #FFFFFF; } html[data-theme="ascii"], html[data-theme="ascii"] body { background: var(--as-paper); } /* The wrapper render() draws. ONLY background, font-family and colour are set here, because the last two are inherited into the documents and every .report-page restates both inline. Do not add font-size, line-height or letter-spacing to this rule: the certificate inherits those. */ html[data-theme="ascii"] #root > div { background: var(--as-paper) !important; font-family: var(--as-font) !important; color: var(--as-ink) !important; } /* Belt and braces for a sheet that does NOT restate them (a server-rendered document that arrives without inline font/colour): give it back exactly what it inherits in Pink fun. Not !important and :where() (zero specificity), so an inline value or any rule at all on the sheet still wins; all this beats is inheritance. The same rule as Clean hub's, same reason. */ html[data-theme="ascii"] :where(#root .report-page) { font-family: 'Space Mono', ui-monospace, monospace; color: #1D3D64; /* Pink fun's inherited ink, on purpose: the one non-token hex in this file */ } /* THE DESK. On anything wider than a phone the design stands the app's paper column on a slightly darker sheet (app/index.html: body #EFE8CB from 640px). Only behind the app shell — the landing page is paper edge to edge. :has() is the whole mechanism; a browser without it shows paper, which is the phone rendering and is not wrong. Spelled with [style] and both exclusions because the wrapper's own inline blue is remapped to paper by part 2, and that rule would otherwise outrank this one. */ @media (min-width: 640px) { html[data-theme="ascii"] #root > div[style]:has(> .as-shell):not(.report-page):not(.report-page *) { background: var(--as-desk) !important; } } html[data-theme="ascii"] #root a:not(.report-page):not(.report-page *) { color: var(--as-olive) !important; text-decoration: none; } html[data-theme="ascii"] #root a:not(.report-page):not(.report-page *):hover { color: var(--as-ink) !important; } html[data-theme="ascii"] #root :is(input, button, textarea, select):not(.report-page):not(.report-page *) { font-family: var(--as-font); } html[data-theme="ascii"] #root :is(input, button, textarea, select, a):not(.report-page):not(.report-page *):focus-visible { outline: 2px solid var(--as-ink) !important; outline-offset: 3px !important; } html[data-theme="ascii"] #root input:not(.report-page):not(.report-page *):focus { outline: 2px solid var(--as-ink); outline-offset: 3px; } /* --------------------------------------------------------------------------- 2. THE GENERIC VOCABULARY — every screen at once --------------------------------------------------------------------------- */ /* ---- type ---------------------------------------------------------------- */ /* Archivo Black was the display face: headings, prices, big button labels. The design's display weight is 700, tracked a hair; its capitals stay where app.js typed or transformed them. */ html[data-theme="ascii"] #root [style*="Archivo Black"]:not(.report-page):not(.report-page *) { font-family: var(--as-font) !important; font-weight: 700 !important; letter-spacing: .02em !important; } /* A heading set at /.9 was tight for a condensed black face; a monospace needs the air. */ html[data-theme="ascii"] #root :is(h1, h2, h3)[style*="Archivo Black"]:not(.report-page):not(.report-page *) { line-height: 1.15 !important; } /* Space Mono was everything else. Both are monospace at all but the same advance width, so the sizes and the tracking app.js wrote carry over as they are. */ html[data-theme="ascii"] #root [style*="Space Mono"]:not(.report-page):not(.report-page *) { font-family: var(--as-font) !important; } /* Prose set at 10-12px is smaller than anything in the design, whose smallest reading size is 13px. */ html[data-theme="ascii"] #root :is([style*="font:400 10px"], [style*="font:400 10.5px"], [style*="font:400 11px"], [style*="font:400 11.5px"]):not(.report-page):not(.report-page *) { font-size: 12.5px !important; } html[data-theme="ascii"] #root :is([style*="font:400 12px"], [style*="font:400 13px"]):not(.report-page):not(.report-page *) { font-size: 13.5px !important; } html[data-theme="ascii"] #root [style*="Lobster Two"]:not(.report-page):not(.report-page *) { font-family: var(--as-font) !important; font-style: normal !important; font-weight: 800 !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; color: var(--as-ink) !important; letter-spacing: .02em !important; text-transform: uppercase !important; /* the design's display lines are capitals: GET IN. / PAID. */ } /* Justified monospace opens rivers a proportional face hides. */ html[data-theme="ascii"] #root [style*="text-align:justify"]:not(.report-page):not(.report-page *) { text-align: left !important; } /* ---- shadows, blur ------------------------------------------------------- */ html[data-theme="ascii"] #root [style*="box-shadow"]:not(.report-page):not(.report-page *) { box-shadow: none !important; } html[data-theme="ascii"] #root [style*="text-shadow"]:not(.report-page):not(.report-page *) { text-shadow: none !important; } html[data-theme="ascii"] #root [style*="backdrop-filter"]:not(.report-page):not(.report-page *) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ---- corners ------------------------------------------------------------- */ /* Square, everywhere. The one rounded thing in the design is the landing poster (part 6). */ html[data-theme="ascii"] #root [style*="border-radius"]:not(.report-page):not(.report-page *) { border-radius: 0 !important; } /* ---- borders ------------------------------------------------------------- */ /* Every box is a 2px ink line, whatever colour and weight it was drawn in. "solid transparent" is left alone: it is how app.js reserves the space for a border that is not showing (the agreement row before its nudge). The band a border used to say is said by the box's text. */ html[data-theme="ascii"] #root :is([style*="border:3px"], [style*="border:4px"], [style*="border:5px"], [style*="border:6px"]):not(.report-page):not(.report-page *) { border-width: 2px !important; } html[data-theme="ascii"] #root [style*="border"]:where(:not([style*="solid transparent"])):not(.report-page):not(.report-page *) { border-color: var(--as-ink) !important; } html[data-theme="ascii"] #root :is([style*="border-bottom:3px"], [style*="border-top:3px"]):not(.report-page):not(.report-page *) { border-top-width: 2px !important; border-bottom-width: 2px !important; } /* A pill (border-radius:999px is how app.js writes one: the flags, bands and evidence figures on a conflict card) is the design's small outline tag: a 1px line. 2px round 8px type is mostly border. */ html[data-theme="ascii"] #root span[style*="border-radius:999px"][style*="border:2px"]:not(.report-page):not(.report-page *) { border-width: 1px !important; } html[data-theme="ascii"] #root span[style*="border-radius:999px"]:is([style*="font:700 8px"], [style*="font:700 8.5px"], [style*="font:700 9px"]):not(.report-page):not(.report-page *) { font-size: 9.5px !important; } /* ---- fills --------------------------------------------------------------- */ /* Cream and white were Pink fun's paper and its cards. Here there is one surface. Every paper fill restates the ink as well: a paper tag INSIDE an inverted thing (the risk figure in a chosen variant chip, a tab in a dark strip) would otherwise inherit that thing's white. The text-colour rules come later in this part, so a fill that named its own colour still gets it. */ html[data-theme="ascii"] #root :is([style*="background:#F4F1E6"], [style*="background:#EFE8D3"], [style*="background:#FAF7EA"], [style*="background:#FAFAF4"], [style*="background:#fff"], [style*="background:#3778B5"]):not(.report-page):not(.report-page *) { background: var(--as-paper) !important; color: var(--as-ink) !important; } /* Navy and blue PANELS (a note under a form, a hint above one) are a ruled box of ordinary text. */ html[data-theme="ascii"] #root :is([style*="background:#2B5C92"], [style*="background:#1F4470"], [style*="background:#16304F"], [style*="background:#2E5EA5"]):not(.report-page):not(.report-page *) { background: transparent !important; color: var(--as-ink) !important; border: var(--as-rule) !important; } /* ...unless Pink fun drew it as a BOX (3px navy round the payment summary, the bill): then it is one of this design's boxes, 2px. The 1px frame is for the panels that were only a tinted ground. */ html[data-theme="ascii"] #root :is([style*="background:#2B5C92"], [style*="background:#1F4470"], [style*="background:#16304F"], [style*="background:#2E5EA5"])[style*="border:3px solid"]:not(.report-page):not(.report-page *) { border: var(--as-line) !important; } /* Solid navy and magenta both meant "this one": a header strip, a tag, the selected or primary thing. The design says that one way — INVERTED, white on ink. */ html[data-theme="ascii"] #root :is([style*="background:#1D3D64"], [style*="background:#FF2E9A"]):not(.report-page):not(.report-page *) { background: var(--as-ink) !important; color: var(--as-white) !important; border-color: var(--as-ink) !important; } /* Pale blue and pale pink were chips, selected rows and soft callouts: plain paper. */ html[data-theme="ascii"] #root :is([style*="background:#FFF0F7"], [style*="background:#BFE0FF"], [style*="background:#EAF2FA"], [style*="background:#DCEBFA"], [style*="background:#BCD4EA"], [style*="background:#E9EEF5"], [style*="background:#EDEDE7"], [style*="background:#E2E2DA"], [style*="background:#EDF1F6"]):not(.report-page):not(.report-page *) { background: var(--as-paper) !important; color: var(--as-ink) !important; } /* A busy or un-armed button was a washed-out tint of its own colour. "Not yet" is an outline. */ html[data-theme="ascii"] #root :is([style*="background:#D7BFC2"], [style*="background:#F6A8CE"], [style*="background:#BFD9C4"]):not(.report-page):not(.report-page *) { background: transparent !important; color: var(--as-ink) !important; border: 2px dashed var(--as-ink) !important; } /* Bands. A CAUTION is the design's tint band with ink on it; the pale danger, clear and AI washes are paper, and their text (below) carries the band. */ html[data-theme="ascii"] #root :is([style*="background:#FFD535"], [style*="background:#FFE9CE"], [style*="background:#FFF8E1"], [style*="background:#FFF6D6"], [style*="background:#FFF4E2"], [style*="background:#FBF0DF"]):not(.report-page):not(.report-page *) { background: var(--as-tint) !important; color: var(--as-ink) !important; } html[data-theme="ascii"] #root :is([style*="background:#FDECEC"], [style*="background:#FBE9EA"], [style*="background:#E3D2FC"], [style*="background:#F3EDFB"], [style*="background:#EAF6EC"], [style*="background:#DFF5E1"], [style*="background:#E6F0E4"]):not(.report-page):not(.report-page *) { background: var(--as-paper) !important; color: var(--as-ink) !important; } /* Solid band fills: the band's ink, which carries white at 6:1 or better (part 3). */ html[data-theme="ascii"] #root [style*="background:#C0212E"]:not(.report-page):not(.report-page *) { background: var(--as-danger) !important; } html[data-theme="ascii"] #root :is([style*="background:#B96A00"], [style*="background:#E8B21E"]):not(.report-page):not(.report-page *) { background: var(--as-caution) !important; } html[data-theme="ascii"] #root [style*="background:#D6531B"]:not(.report-page):not(.report-page *) { background: var(--as-high) !important; } html[data-theme="ascii"] #root [style*="background:#A8BE33"]:not(.report-page):not(.report-page *) { background: var(--as-lowmod) !important; } html[data-theme="ascii"] #root :is([style*="background:#1B7A2E"], [style*="background:#4E7A46"], [style*="background:#1E7A3C"]):not(.report-page):not(.report-page *) { background: var(--as-clear) !important; } html[data-theme="ascii"] #root [style*="background:#8FA0B5"]:not(.report-page):not(.report-page *) { background: var(--as-olive) !important; } html[data-theme="ascii"] #root [style*="background:#4E2E96"]:not(.report-page):not(.report-page *) { background: var(--as-ai) !important; } /* The "desk" the paged documents lie on, and its toolbar. The sheets themselves are untouched. */ html[data-theme="ascii"] #root [style*="background:#3F4448"]:not(.report-page):not(.report-page *) { background: var(--as-desk) !important; } html[data-theme="ascii"] #root [style*="background:#25282B"]:not(.report-page):not(.report-page *) { background: var(--as-paper) !important; color: var(--as-ink) !important; } /* Overlay scrims: ink, thinned. */ html[data-theme="ascii"] #root [style*="background:rgba(15,25,40"]:not(.report-page):not(.report-page *) { background: var(--as-scrim) !important; } /* ---- text colours -------------------------------------------------------- */ /* Navy was the ink; cream sat on navy panels that are paper now; magenta and yellow were emphasis, which here is weight, not hue. All ink. */ html[data-theme="ascii"] #root :is([style*="color:#1D3D64"], [style*="color:#F4F1E6"], [style*="color:#CFE0F2"], [style*="color:#FF2E9A"], [style*="color:#FFD535"], [style*="color:#14497F"], [style*="color:#2456B8"]):not(.report-page):not(.report-page *) { color: var(--as-ink) !important; } /* Secondary text is the accent, as the shell-bar's register label is in the design. */ html[data-theme="ascii"] #root :is([style*="color:#5A739E"], [style*="color:#3A5273"], [style*="color:#46608C"], [style*="color:#8FA0B5"], [style*="color:#8FA9C9"], [style*="color:#7C8FA8"], [style*="color:#A9B6C6"], [style*="color:#9FB6D4"], [style*="color:#9FB0C4"], [style*="color:#2F6FB2"]):not(.report-page):not(.report-page *) { color: var(--as-olive) !important; } html[data-theme="ascii"] #root :is([style*="color:#C0212E"], [style*="color:#8E1720"]):not(.report-page):not(.report-page *) { color: var(--as-danger) !important; } html[data-theme="ascii"] #root :is([style*="color:#8A4E00"], [style*="color:#B96A00"], [style*="color:#C9A800"], [style*="color:#7A6500"], [style*="color:#8A5410"], [style*="color:#5A4020"], [style*="color:#E8B21E"]):not(.report-page):not(.report-page *) { color: var(--as-caution) !important; } html[data-theme="ascii"] #root :is([style*="color:#4E2E96"], [style*="color:#7C4FD0"]):not(.report-page):not(.report-page *) { color: var(--as-ai) !important; } html[data-theme="ascii"] #root [style*="color:#D6531B"]:not(.report-page):not(.report-page *) { color: var(--as-high) !important; } html[data-theme="ascii"] #root [style*="color:#A8BE33"]:not(.report-page):not(.report-page *) { color: var(--as-lowmod) !important; } html[data-theme="ascii"] #root :is([style*="color:#1B7A2E"], [style*="color:#12572A"], [style*="color:#3BB143"], [style*="color:#1E7A3C"], [style*="color:#2F5A2A"], [style*="color:#0E7B6C"]):not(.report-page):not(.report-page *) { color: var(--as-clear) !important; } html[data-theme="ascii"] #root [style*="accent-color"]:not(.report-page):not(.report-page *) { accent-color: var(--as-ink) !important; } /* --------------------------------------------------------------------------- 3. BY CONTEXT — the same colour meaning different things on different elements. Each adds an element name (or a second attribute) so it outranks part 2. --------------------------------------------------------------------------- */ /* ---- buttons ------------------------------------------------------------- PRIMARY: navy or magenta in Pink fun. Ink, white label, 800, tracked; olive on hover. Its label is white whatever colour its own text or its children's said (part 2 turns cream and navy into ink, which on ink is nothing at all). A child with a fill of its own — the risk figure on its paper tag inside a chosen variant chip — is not on the ink and keeps its own colour. */ html[data-theme="ascii"] #root button:is([style*="background:#1D3D64"], [style*="background:#FF2E9A"], [style*="background:#2B5C92"]):not(.report-page):not(.report-page *) { background: var(--as-ink) !important; color: var(--as-white) !important; border: 2px solid var(--as-ink) !important; font-weight: 800 !important; letter-spacing: .06em !important; } html[data-theme="ascii"] #root button:is([style*="background:#1D3D64"], [style*="background:#FF2E9A"], [style*="background:#2B5C92"]):not(.report-page):not(.report-page *):hover { background: var(--as-olive) !important; border-color: var(--as-olive) !important; } html[data-theme="ascii"] #root :is([style*="background:#1D3D64"], [style*="background:#FF2E9A"]) > [style*="color:"]:not([style*="background"]):not(.report-page):not(.report-page *), html[data-theme="ascii"] #root button:is([style*="background:#1D3D64"], [style*="background:#FF2E9A"], [style*="background:#2B5C92"]) [style*="color:"]:not([style*="background"]):not(.report-page):not(.report-page *) { color: var(--as-white) !important; } /* ...and so is anything else inverted that named its own text colour (a sheet's header strip, a tag): part 2's text rules come after its fill rules and would turn that text ink-on-ink. */ html[data-theme="ascii"] #root :is([style*="background:#1D3D64"], [style*="background:#FF2E9A"])[style*="color:"]:not(.report-page):not(.report-page *) { color: var(--as-white) !important; } /* SECONDARY: cream, white, pale blue or see-through in Pink fun. A 2px ink outline that inverts on hover. Paper and not the design's `transparent`: some of these sit inside an inverted strip (the results tabs), where see-through is ink on ink. */ html[data-theme="ascii"] #root button:is([style*="background:#F4F1E6"], [style*="background:#fff"], [style*="background:#BCD4EA"], [style*="background:transparent;border:2px"]):not(.report-page):not(.report-page *) { background: var(--as-paper) !important; color: var(--as-ink) !important; border: 2px solid var(--as-ink) !important; font-weight: 700 !important; letter-spacing: .06em !important; } html[data-theme="ascii"] #root button:is([style*="background:#F4F1E6"], [style*="background:#fff"], [style*="background:#BCD4EA"], [style*="background:transparent;border:2px"]):not(.report-page):not(.report-page *):hover { background: var(--as-ink) !important; color: var(--as-white) !important; } /* TEXT BUTTONS — no box, underlined in Pink fun ("USE A DIFFERENT NUMBER", "SKIP FOR NOW") — are the design's [ BRACKETED ] buttons. The brackets are generated, so the label app.js wrote, and any test that reads it, is unchanged. */ html[data-theme="ascii"] #root button[style*="background:transparent;border:none"]:not(.report-page):not(.report-page *) { text-decoration: none !important; color: var(--as-ink) !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: .08em !important; width: auto !important; padding: 2px 4px !important; } html[data-theme="ascii"] #root button[style*="background:transparent;border:none"]:not(.report-page):not(.report-page *)::before { content: '[ '; } html[data-theme="ascii"] #root button[style*="background:transparent;border:none"]:not(.report-page):not(.report-page *)::after { content: ' ]'; } html[data-theme="ascii"] #root button[style*="background:transparent;border:none"]:not(.report-page):not(.report-page *):hover { background: var(--as-ink) !important; color: var(--as-white) !important; } /* DESTRUCTIVE and the other solid band buttons keep their band, as an ink that carries white. */ html[data-theme="ascii"] #root :is([style*="background:#C0212E"], [style*="background:#B96A00"], [style*="background:#D6531B"], [style*="background:#E8B21E"], [style*="background:#A8BE33"], [style*="background:#1B7A2E"], [style*="background:#4E7A46"], [style*="background:#1E7A3C"], [style*="background:#4E2E96"], [style*="background:#8FA0B5"])[style]:not(.report-page):not(.report-page *) { color: var(--as-white) !important; } /* NOT AVAILABLE: a dashed outline. (cursor:not-allowed is how app.js writes one, and it is what WCAG and theme_leaks.py both read as disabled.) */ html[data-theme="ascii"] #root :is(button, div)[style*="cursor:not-allowed"]:not(.report-page):not(.report-page *) { background: transparent !important; color: var(--as-ink) !important; border: 2px dashed var(--as-ink) !important; } html[data-theme="ascii"] #root button[style*="cursor:not-allowed"]:not(.report-page):not(.report-page *) { opacity: .6 !important; } html[data-theme="ascii"] #root button[style*="cursor:not-allowed"]:not(.report-page):not(.report-page *):hover { background: transparent !important; color: var(--as-ink) !important; } /* Big Archivo button labels: the design's 800 / .06em, in the capitals app.js gave them. */ html[data-theme="ascii"] #root button[style*="Archivo Black"]:not(.report-page):not(.report-page *) { font-weight: 800 !important; letter-spacing: .06em !important; } /* Text on a tint band is ink: olive on tint is 3.9:1 and the band inks are no better. */ html[data-theme="ascii"] #root :is([style*="background:#FFD535"], [style*="background:#FFE9CE"], [style*="background:#FFF8E1"], [style*="background:#FFF6D6"], [style*="background:#FFF4E2"], [style*="background:#FBF0DF"]) [style*="color:"]:not(button):not(.report-page):not(.report-page *) { color: var(--as-ink) !important; } /* The script headline ("Payment confirmed", "Paid!"): part 2's magenta rule would also do, but this one settles the tracking and the leading. */ html[data-theme="ascii"] #root p[style*="Lobster Two"]:not(.report-page):not(.report-page *) { color: var(--as-ink) !important; line-height: 1.05 !important; } /* Where Stripe mounts its iframe: a ruled box like any other. */ html[data-theme="ascii"] #root #stripe-mount { background: var(--as-white); border: var(--as-line); } /* The round (i) buttons: Georgia italic on a magenta ring. A small square ink box. */ html[data-theme="ascii"] #root button[style*="Georgia"]:not(.report-page):not(.report-page *) { font-family: var(--as-font) !important; font-style: normal !important; font-weight: 800 !important; border: 2px solid var(--as-ink) !important; background: transparent !important; color: var(--as-ink) !important; letter-spacing: 0 !important; } html[data-theme="ascii"] #root button[style*="Georgia"]:not(.report-page):not(.report-page *):hover { background: var(--as-ink) !important; color: var(--as-white) !important; } /* Rules drawn as 3px navy bars ("— OR PHONE —"): the design's 1px rule. */ html[data-theme="ascii"] #root div[style*="height:3px"][style*="background:#1D3D64"]:not(.report-page):not(.report-page *) { height: 1px !important; background: var(--as-ink) !important; } /* Inputs: see-through, 2px ink, the design's 17px. */ html[data-theme="ascii"] #root input[style]:not([type="checkbox"]):not([type="radio"]):not(.report-page):not(.report-page *), html[data-theme="ascii"] #root :is(select, textarea)[style]:not(.report-page):not(.report-page *) { background: transparent !important; color: var(--as-ink) !important; border: 2px solid var(--as-ink) !important; box-shadow: none !important; border-radius: 0 !important; font-family: var(--as-font) !important; font-weight: 500 !important; letter-spacing: 0 !important; } html[data-theme="ascii"] #root input[style]:not(.report-page):not(.report-page *)::placeholder { color: var(--as-olive); opacity: 1; font-weight: 400; } html[data-theme="ascii"] #root input[type="checkbox"]:not(.report-page):not(.report-page *) { accent-color: var(--as-ink) !important; } /* Example / recent chips: square blue tags become the design's bracketed text chips. */ html[data-theme="ascii"] #root button:is([data-act="markExample"], [data-act="gsExample"]):not(.report-page):not(.report-page *) { background: none !important; border: 0 !important; padding: 8px 2px !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: 0 !important; color: var(--as-ink) !important; } html[data-theme="ascii"] #root button:is([data-act="markExample"], [data-act="gsExample"]):not(.report-page):not(.report-page *)::before { content: '[ '; } html[data-theme="ascii"] #root button:is([data-act="markExample"], [data-act="gsExample"]):not(.report-page):not(.report-page *)::after { content: ' ]'; } html[data-theme="ascii"] #root button:is([data-act="markExample"], [data-act="gsExample"]):not(.report-page):not(.report-page *):hover { background: none !important; color: var(--as-olive) !important; } /* THE ERRBAR. A one-line refusal on the sign-in and wizard screens ("NAME YOUR MARK FIRST", "PLEASE AGREE…", a rejected code) is the design's error bar: an inverted ink block led and closed by a full block (the \A0 is a no-break space: a plain space after a CSS hex escape is eaten as the escape's terminator). Scoped to those two screens by their data-ui hooks, because the same bold red capitals elsewhere are figures inside cards, not refusals. */ html[data-theme="ascii"] #root :is([data-ui="login"], [data-ui="wizard"]) p[style*="font:700"][style*="color:#C0212E"]:not(.report-page):not(.report-page *) { display: inline-block; background: var(--as-ink) !important; color: var(--as-white) !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .06em !important; line-height: 1.5 !important; padding: 6px 10px !important; } html[data-theme="ascii"] #root :is([data-ui="login"], [data-ui="wizard"]) p[style*="font:700"][style*="color:#C0212E"]:not(.report-page):not(.report-page *)::before { content: '\2588\A0! '; } html[data-theme="ascii"] #root :is([data-ui="login"], [data-ui="wizard"]) p[style*="font:700"][style*="color:#C0212E"]:not(.report-page):not(.report-page *)::after { content: '\A0\2588'; } /* The agreement row's red nudge frame is a 2px ink one. */ html[data-theme="ascii"] #root #agree-row[style*="#C0212E"]:not(.report-page):not(.report-page *) { border-color: var(--as-ink) !important; } /* ---- the wizard ---------------------------------------------------------- */ /* The three progress bars are the design's block meter: filled ink, or an empty ruled cell. */ html[data-theme="ascii"] #root div[style*="height:8px"][style*="border:2px solid #1D3D64"]:not(.report-page):not(.report-page *) { height: 12px !important; } html[data-theme="ascii"] #root div[style*="height:8px"][style*="background:#F4F1E6"]:not(.report-page):not(.report-page *) { background: transparent !important; } /* The question is the design's: 28px, regular weight, sentence case — not a shouted headline. */ html[data-theme="ascii"] #root [data-ui="wizard"] h2[style*="Archivo Black"]:not(.report-page):not(.report-page *) { font-size: clamp(22px, 5.5vw, 28px) !important; font-weight: 400 !important; line-height: 1.35 !important; letter-spacing: 0 !important; text-transform: none !important; } /* The mark itself is typed large, as in the design, and in capitals because the app upper-cases it. */ html[data-theme="ascii"] #root input#in-brand:not(.report-page):not(.report-page *) { font-size: 19px !important; font-weight: 700 !important; padding: 16px !important; } /* A picked statement and a match row are .rows: a 2px frame round each, no fill. ON is the design's active chip: inverted. */ html[data-theme="ascii"] #root [style*="border:2px solid #FF9CCB"]:not(.report-page):not(.report-page *) { border: var(--as-rule) !important; } html[data-theme="ascii"] #root [data-act="gsToggle"][style*="background:#FF2E9A"]:not(.report-page):not(.report-page *), html[data-theme="ascii"] #root [data-act="vgsToggle"][style*="background:#FF2E9A"]:not(.report-page):not(.report-page *) { background: var(--as-ink) !important; color: var(--as-white) !important; } html[data-theme="ascii"] #root :is([data-act="gsToggle"], [data-act="vgsToggle"]):not(.report-page):not(.report-page *):hover { background: var(--as-tint) !important; color: var(--as-ink) !important; } /* The class pill (Good-25 / Serv-42): a small ruled tag. Goods and services were told apart by blue and purple; the tag already SAYS which it is, so both are ink. Inside an inverted row it is drawn in white. (The span is the same tag in the goods-and-services explainer, told from every other pill by its fixed 62px — the results screen's pills are not these.) */ html[data-theme="ascii"] #root button[data-act="gsClassInfo"]:not(.report-page):not(.report-page *), html[data-theme="ascii"] #root span[style*="border-radius:999px"][style*="width:62px"]:not(.report-page):not(.report-page *) { background: transparent !important; color: var(--as-ink) !important; border: 1px solid var(--as-ink) !important; font-weight: 700 !important; letter-spacing: 0 !important; } html[data-theme="ascii"] #root [style*="background:#FF2E9A"] > button[data-act="gsClassInfo"]:not(.report-page):not(.report-page *) { color: var(--as-white) !important; border-color: var(--as-white) !important; } html[data-theme="ascii"] #root [data-act="gsToggle"][style*="background:#FF2E9A"]:hover > button[data-act="gsClassInfo"]:not(.report-page):not(.report-page *) { color: var(--as-ink) !important; border-color: var(--as-ink) !important; } /* The scope pill under the query box is a bracketed text button like any other. */ html[data-theme="ascii"] #root button[data-act="gsMenuToggle"][style*="border-radius:999px"]:not(.report-page):not(.report-page *) { background: transparent !important; border: 1px solid var(--as-ink) !important; color: var(--as-ink) !important; } /* Small square × . */ html[data-theme="ascii"] #root button:is([data-act="gsRemove"], [data-act="vgsRemove"]):not(.report-page):not(.report-page *) { border: 1px solid var(--as-ink) !important; } /* The FIND button and its scope caret: one ink slab, split by a paper hairline. */ html[data-theme="ascii"] #root #gs-find-wrap > button[data-act="gsMenuToggle"]:not(.report-page):not(.report-page *) { border: 2px solid var(--as-ink) !important; border-left: 1px solid var(--as-paper) !important; padding: 14px 8px !important; } /* A plan card is the design's .tagbox: a ruled box, and the chosen one is double-framed (the design's .selected) and says so, where Pink fun filled it magenta. */ html[data-theme="ascii"] #root button[data-act="pickPlan"]:not(.report-page):not(.report-page *) { background: transparent !important; color: var(--as-ink) !important; border: 2px solid var(--as-ink) !important; font-weight: 400 !important; letter-spacing: 0 !important; padding: 22px 18px 16px !important; text-align: left !important; } html[data-theme="ascii"] #root button[data-act="pickPlan"]:not(.report-page):not(.report-page *):hover { background: var(--as-tint) !important; color: var(--as-ink) !important; } html[data-theme="ascii"] #root button[data-act="pickPlan"][style*="background:#FF2E9A"]:not(.report-page):not(.report-page *) { outline: 2px solid var(--as-ink) !important; outline-offset: 3px !important; } html[data-theme="ascii"] #root button[data-act="pickPlan"] [style*="color:"]:not(.report-page):not(.report-page *), html[data-theme="ascii"] #root button[data-act="pickPlan"] span:not(.report-page):not(.report-page *) { color: var(--as-ink) !important; } html[data-theme="ascii"] #root button[data-act="pickPlan"]:not(.report-page):not(.report-page *)::after { content: '[ CHOOSE ]'; display: block; margin-top: 12px; text-align: left; font-size: 13px; font-weight: 700; letter-spacing: .08em; } html[data-theme="ascii"] #root button[data-act="pickPlan"][style*="background:#FF2E9A"]:not(.report-page):not(.report-page *)::after { content: '\258C\A0SELECTED'; font-weight: 800; } /* The urgency pair: the design's chips — the chosen one inverted. (pill() in app.js.) */ html[data-theme="ascii"] #root button[data-act="pickUrgency"][style*="background:#1D3D64"]:not(.report-page):not(.report-page *) { background: var(--as-ink) !important; color: var(--as-white) !important; } /* ---- overlays ------------------------------------------------------------ */ /* The card in the middle of a scrim: paper, 2px ink, nothing else. */ html[data-theme="ascii"] #root [style*="position:fixed"][style*="inset:0"] > [data-act="noop"]:not(.report-page):not(.report-page *) { background: var(--as-paper) !important; border: 2px solid var(--as-ink) !important; box-shadow: none !important; } /* A bottom sheet (the FIND scope menu) is the design's .sheet: a 4px ink rule across its top, its rows ruled off at 1px, the current one inverted where Pink fun outlined it magenta. */ html[data-theme="ascii"] #root [style*="position:fixed"][style*="align-items:flex-end"] > [data-act="noop"]:not(.report-page):not(.report-page *) { border: 2px solid var(--as-ink) !important; border-top: 4px solid var(--as-ink) !important; border-bottom: 0 !important; } html[data-theme="ascii"] #root [style*="align-items:flex-end"] > [data-act="noop"] > button[data-act="gsFind"]:not(.report-page):not(.report-page *) { background: transparent !important; color: var(--as-ink) !important; border: 0 !important; border-bottom: 1px solid var(--as-ink) !important; font-weight: 700 !important; letter-spacing: .04em !important; } html[data-theme="ascii"] #root [style*="align-items:flex-end"] > [data-act="noop"] > button[data-act="gsFind"]:not(.report-page):not(.report-page *):hover { background: var(--as-tint) !important; color: var(--as-ink) !important; } html[data-theme="ascii"] #root [style*="align-items:flex-end"] > [data-act="noop"] > button[data-act="gsFind"][style*="outline:3px"]:not(.report-page):not(.report-page *) { background: var(--as-ink) !important; color: var(--as-white) !important; outline: none !important; } html[data-theme="ascii"] #root [style*="align-items:flex-end"] > [data-act="noop"] > p:not(.report-page):not(.report-page *) { border: 0 !important; border-bottom: 1px solid var(--as-ink) !important; } /* The sheet's title strip was navy, which part 2 inverts — and the row under it is usually the current one, inverted too, so the two read as one slab. The title is a plain ruled label. */ html[data-theme="ascii"] #root [style*="align-items:flex-end"] > [data-act="noop"] > p[style*="background:#1D3D64"]:not(.report-page):not(.report-page *) { background: transparent !important; color: var(--as-ink) !important; } html[data-theme="ascii"] #root [style*="align-items:flex-end"] > [data-act="noop"] > p[style*="background:#E3D2FC"]:not(.report-page):not(.report-page *) { background: var(--as-tint) !important; color: var(--as-ink) !important; } html[data-theme="ascii"] #root [style*="align-items:flex-end"] > [data-act="noop"] > button[data-act="gsMenuClose"]:not(.report-page):not(.report-page *) { border: 0 !important; border-top: 2px solid var(--as-ink) !important; } html[data-theme="ascii"] #root [style*="outline:3px solid #FF2E9A"]:not(.report-page):not(.report-page *) { outline-color: var(--as-ink) !important; } /* --------------------------------------------------------------------------- 4. NAMED THINGS — by class or id, because a script rewrites their style attribute (THE ONE TRAP in the header) or because they live in style.css / index.html. --------------------------------------------------------------------------- */ /* THE LIVE RING. In Pink fun it is a conic gradient a rAF loop rotates behind the button; a gradient is the one thing this design does not have. So: at rest the wrapper is the 2px ink border it stands in for (--ring-rest is forced, because app.js sets it inline to magenta or grey on the drawer toggle); RINGING, app.js's inline gradient is switched off and the frame BLINKS ink / olive in whole steps, the way the design's cursor does. The blink animates background-COLOR, which an animation may override on an inline style; the gradient is the background-IMAGE, which the !important below removes. */ html[data-theme="ascii"] #root .live-ring { padding: 2px; box-shadow: none !important; --ring-rest: var(--as-ink) !important; } html[data-theme="ascii"] #root .live-ring[data-ring] { background-image: none !important; animation: as-ring 1s steps(1) infinite; } /* Spelled with [style] and both exclusions so it outranks part 3's button rules, which would otherwise put a 2px border INSIDE the 2px frame. */ html[data-theme="ascii"] #root .live-ring > button[style]:not(.report-page):not(.report-page *), html[data-theme="ascii"] #root .live-ring > button[style]:not(.report-page):not(.report-page *):hover { border: 0 !important; } html[data-theme="ascii"] #root .live-ring > button:disabled { opacity: .6; } /* A SECONDARY button inside a ring is see-through everywhere else; here what is behind it is the ring's ink, so it is given the paper back. */ html[data-theme="ascii"] #root .live-ring > button:is([style*="background:#BCD4EA"], [style*="background:#F4F1E6"], [style*="background:#fff"])[style]:not(.report-page):not(.report-page *) { background: var(--as-paper) !important; } html[data-theme="ascii"] #root .live-ring > button:is([style*="background:#BCD4EA"], [style*="background:#F4F1E6"], [style*="background:#fff"])[style]:not(.report-page):not(.report-page *):hover { background: var(--as-ink) !important; } html[data-theme="ascii"] #root #gs-inline-count { background: var(--as-paper) !important; color: var(--as-ink) !important; font-family: var(--as-font) !important; font-weight: 700 !important; letter-spacing: .08em !important; } html[data-theme="ascii"] #root #gs-inline-count:hover:not(:disabled) { background: var(--as-tint) !important; } html[data-theme="ascii"] #root #gs-inline-count > span { color: inherit !important; } html[data-theme="ascii"] #root #gs-float { background: var(--as-ink) !important; color: var(--as-white) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: var(--as-font) !important; font-weight: 800 !important; } /* The pack's GET buttons (paintDocButtons() rewrites their style) are dressed with the pack, in part 4b. */ html[data-theme="ascii"] #root #docview-download { background: var(--as-ink) !important; color: var(--as-white) !important; border: 2px solid var(--as-ink) !important; border-radius: 0 !important; font-family: var(--as-font) !important; font-weight: 800 !important; letter-spacing: .06em !important; box-shadow: none !important; } html[data-theme="ascii"] #root .veiled > .veil { background: var(--as-veil); } html[data-theme="ascii"] #root .docjob-bar { background: var(--as-ink); } /* Spinners. A ring cannot be square, and nothing here is round — so the spinner is a square whose olive edge walks round it a side at a time: the same rotation, in four whole steps. */ html[data-theme="ascii"] #root [style*="animation:spin"]:not(.report-page):not(.report-page *) { border-width: 5px !important; border-color: var(--as-ink) !important; border-top-color: var(--as-tint) !important; border-radius: 0 !important; animation-timing-function: steps(4, end) !important; } html[data-theme="ascii"] #root div.docjob-spin:not(.report-page):not(.report-page *) { border-width: 4px !important; border-color: var(--as-ink) !important; border-top-color: var(--as-tint) !important; border-radius: 0 !important; animation-timing-function: steps(4, end) !important; } /* THE SHELL KEEPS PINK FUN'S 3px SIDE BORDERS, INVISIBLY — Clean hub's rule and Clean hub's reason: they are 6px of the column's width, the pack documents re-wrap to whatever column they are given, and a sheet laid out differently under a skin is the one thing a skin may never do. The 2px ink frame the design draws is therefore NOT the border: it is two generated bars standing in the outer 2px of each transparent border, plus a real top rule (which costs height, not width). */ html[data-theme="ascii"] #root .as-shell { position: relative; background: var(--as-paper) !important; border-left: 3px solid transparent !important; border-right: 3px solid transparent !important; border-top: 2px solid var(--as-ink); } html[data-theme="ascii"] #root .as-shell::before, html[data-theme="ascii"] #root .as-shell::after { content: ''; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--as-ink); pointer-events: none; } html[data-theme="ascii"] #root .as-shell::before { left: -3px; } html[data-theme="ascii"] #root .as-shell::after { right: -3px; } @media (prefers-reduced-motion: reduce) { html[data-theme="ascii"] #root .live-ring { background: var(--ring-rest, var(--ring-dark)); } html[data-theme="ascii"] #root .live-ring[data-ring] { animation: none; background: var(--as-olive) !important; } html[data-theme="ascii"] #root .as-cursor { animation: none !important; } /* !important: part 5's blink comes later at the same specificity, and without it the cursor kept blinking */ /* Every screen slides in (animation:screenIn, inline). Reduced motion means it does not. */ html[data-theme="ascii"] #root [style*="animation:screenIn"]:not(.report-page):not(.report-page *) { animation: none !important; } html[data-theme="ascii"] #root [style*="animation:spin"]:not(.report-page):not(.report-page *), html[data-theme="ascii"] #root div.docjob-spin:not(.report-page):not(.report-page *) { animation: none !important; } /* The scan's field stands half full and the re-read's cells stand still (part 4b). */ html[data-theme="ascii"] #root div[style*="animation:spin"][style*="width:120px"]:not(.report-page):not(.report-page *)::after { animation: none !important; height: 2em !important; } /* !important: part 4b's height:0 comes later */ html[data-theme="ascii"] #root #scan-indet > div:not(.report-page):not(.report-page *)::before { animation: none !important; } } /* The statement that flies into the drawer when it is picked (flyToBasket). It is appended to , so nothing under #root reaches it. Dressed as what it is a copy of: a picked row. */ html[data-theme="ascii"] .gs-ghost { background: var(--as-ink) !important; color: var(--as-white) !important; border: 2px solid var(--as-ink) !important; border-radius: 0 !important; font-family: var(--as-font) !important; } /* THE "NEWLY RELEASED" RIBBON, outside #root — a notice and not a link any more (index.html makes it a plain div), so the link-hover rule that used to follow this one has gone with it. Pink fun pins it obliquely across the top-right corner, which is exactly where this skin's header keeps the account button and the landing page its LOG IN. So, as under Clean hub, it is not pinned at all: it is the first thing in the page, a flat inverted strip IN THE FLOW, and nothing in the flow can sit on top of a control. index.html folds it shut after a minute by animating its height to 0, so the strip's padding sits on the TRACK inside it and the ribbon itself has no padding and no border: either would survive height:0 as a stub that then vanishes with a jump. */ html[data-theme="ascii"] .launch-ribbon { position: static; display: block; transform: none; width: auto; top: auto; right: auto; padding: 0; background: var(--as-ink); color: var(--as-white) !important; border: 0; box-shadow: none; font: 700 11px/1 var(--as-font); letter-spacing: .1em; /* Pink fun's pinned ribbon takes no pointer (it overlaps a control there). In the flow it is on top of nothing, so it may feel one again — which is what pauses the marquee to be read. */ pointer-events: auto; } html[data-theme="ascii"] .launch-ribbon .ribbon-track { padding: 8px 0; } /* --------------------------------------------------------------------------- 4b. THE SCREENS — what the generic vocabulary cannot say by itself: the scan, the score card and its dial, the results list, the pack, payment, Paid!. Named rules, so each carries the element name and both exclusions where it competes with parts 2 and 3. --------------------------------------------------------------------------- */ /* ---- the scan ------------------------------------------------------------ THE FIELD. Pink fun's scan is a 120px ring that spins; the design's is a field of light cells that fills with solid ones, a row at a time (app.js scanHTML in the design, Motif.field). A stylesheet cannot count marks, and does not pretend to: the NUMBER under it is the progress, patched in place by the hub, and the field is what the ring was — a sign that work is going on — drawn in this design's characters and stepped like everything else that moves here. 36 cells by 5 rows; ::before is the empty field, ::after the same cells solid, clipped to a height that grows a whole row per step and starts over. (The small spinners — a loading result, the payment form opening — stay the square whose edge walks round it, part 4: a field needs room.) */ html[data-theme="ascii"] #root div[style*="animation:spin"][style*="width:120px"]:not(.report-page):not(.report-page *) { position: relative; box-sizing: content-box; width: 36ch !important; max-width: 100%; height: 5em !important; margin-bottom: 22px !important; border: 0 !important; animation: none !important; overflow: hidden; font: 400 14px/1 var(--as-font); letter-spacing: 0; color: var(--as-olive); text-align: left; word-break: break-all; } html[data-theme="ascii"] #root div[style*="animation:spin"][style*="width:120px"]:not(.report-page):not(.report-page *)::before { content: '\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591\2591'; display: block; } html[data-theme="ascii"] #root div[style*="animation:spin"][style*="width:120px"]:not(.report-page):not(.report-page *)::after { content: '\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588'; position: absolute; left: 0; right: 0; top: 0; height: 0; overflow: hidden; background: var(--as-paper); animation: as-field 4.8s steps(6, jump-none) infinite; } /* THE SIMULATED SCAN's ring is dashed so that it cannot be mistaken for the real one. Its field fills with the checker cell instead of the solid one: the same difference, kept. */ html[data-theme="ascii"] #root div[style*="animation:spin"][style*="width:120px"][style*="dashed"]:not(.report-page):not(.report-page *)::after { content: '\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E\259E'; } /* THE PHASE LINE IS RE-WRITTEN BY THE HUB (ph.style.cssText on every progress tick), so by id — THE ONE TRAP. Plain, it is the design's olive caps label. LOUD — the model re-read, the one phase with no percentage of its own — it is the design's toast: a tint band in a 2px frame. "Has a background at all" is the only thing its two serialisations share ("background:#E3D2FC" as authored, "background: rgb(227, 210, 252)" once patched). */ html[data-theme="ascii"] #root #scan-phase { font-family: var(--as-font) !important; font-weight: 700 !important; font-size: 11px !important; letter-spacing: .1em !important; color: var(--as-olive) !important; } html[data-theme="ascii"] #root p#scan-phase[style*="background"]:not(.report-page):not(.report-page *) { max-width: 360px; margin-left: auto !important; margin-right: auto !important; padding: 12px 14px !important; background: var(--as-tint) !important; border: 2px solid var(--as-ink) !important; border-radius: 0 !important; color: var(--as-ink) !important; font-size: 12px !important; font-weight: 800 !important; } /* The barber-pole under it was a striped gradient sliding sideways. Here it is a line of cells — solid, dark, medium, light, gap: the landing ring's own fade — marching left a cell at a time. Same message (this step has no percentage, and it is alive), no gradient. */ html[data-theme="ascii"] #root #scan-indet > div:not(.report-page):not(.report-page *) { position: relative; height: 14px !important; border: 0 !important; background: transparent !important; overflow: hidden !important; } html[data-theme="ascii"] #root #scan-indet > div > div:not(.report-page):not(.report-page *) { background: none !important; animation: none !important; } html[data-theme="ascii"] #root #scan-indet > div:not(.report-page):not(.report-page *)::before { content: '\2588\2593\2592\2591\A0\2588\2593\2592\2591\A0\2588\2593\2592\2591\A0\2588\2593\2592\2591\A0\2588\2593\2592\2591\A0\2588\2593\2592\2591\A0\2588\2593\2592\2591\A0\2588\2593\2592\2591\A0\2588\2593\2592\2591\A0\2588\2593\2592\2591\A0\2588\2593\2592\2591\A0\2588\2593\2592\2591\A0\2588\2593\2592\2591\A0\2588\2593\2592\2591\A0'; position: absolute; left: 0; top: 0; white-space: pre; font: 400 14px/1 var(--as-font); letter-spacing: 0; color: var(--as-ink); animation: as-march 1s steps(5) infinite; } html[data-theme="ascii"] #root #scan-count { font-family: var(--as-font) !important; font-weight: 800 !important; letter-spacing: .02em !important; } /* CLOSEST MARKS SO FAR is the design's .rows: one 2px box, its label the first row, 1px rules between the rest. #scan-top's innerHTML is replaced on every snapshot and it is EMPTY until the first one — an empty box must not draw a frame round nothing. */ html[data-theme="ascii"] #root #scan-top:not(:empty) { border: 2px solid var(--as-ink); } html[data-theme="ascii"] #root #scan-top > p:not(.report-page):not(.report-page *) { margin: 0 !important; padding: 10px 12px; border-bottom: 1px solid var(--as-ink); } html[data-theme="ascii"] #root #scan-top > div:not(.report-page):not(.report-page *) { margin: 0 !important; padding: 11px 12px !important; border: 0 !important; border-bottom: 1px solid var(--as-ink) !important; background: transparent !important; } html[data-theme="ascii"] #root #scan-top > div:last-child:not(.report-page):not(.report-page *) { border-bottom: 0 !important; } html[data-theme="ascii"] #root #scan-queue { border-width: 2px !important; border-radius: 0 !important; } /* ---- the score card ------------------------------------------------------ Pink fun's is a navy panel with a lit conic dial. The design's is the top of the results column: the block-character dial with the numeral in it, then "[ ! ] THE VERDICT", then the sentence. data-ui / data-band come from scoreHeaderHTML() (hooks; they paint nothing in Pink fun), and under this skin that function also emits the dial's characters (pre.as-dial-art, from js/motif.js dial()). SEVERITY, THE DESIGN'S WAY. It shows exactly one: a name in trouble turns the whole head into an INVERTED INK BLOCK (app.js resultsHTML in the design, kind 'bad'). So the two bands that mean "expect an objection" — very high and high — are inverted, white on ink, glyph [ x ]; the middle two sit on paper in their band's ink, glyph [ ! ]; low is on paper in the clear ink, glyph [ check ]. The verdict's WORDS are the API's and are never touched, and every pairing here is measured: white on ink 16.9, the five band inks on paper >= 5.9. Spelled with the element name and both exclusions ON PURPOSE: part 2's navy-panel rule carries them, so a bare [data-ui] selector is outranked by it and loses. */ html[data-theme="ascii"] #root div[data-ui="scorecard"]:not(.report-page):not(.report-page *) { background: var(--as-paper) !important; color: var(--as-ink) !important; border: 2px solid var(--as-ink) !important; padding: 24px 20px !important; --band: var(--as-olive); } html[data-theme="ascii"] #root div[data-ui="scorecard"][data-band="moderate"]:not(.report-page):not(.report-page *) { --band: var(--as-caution); } html[data-theme="ascii"] #root div[data-ui="scorecard"][data-band="low-moderate"]:not(.report-page):not(.report-page *) { --band: var(--as-lowmod); } html[data-theme="ascii"] #root div[data-ui="scorecard"][data-band="low"]:not(.report-page):not(.report-page *) { --band: var(--as-clear); } html[data-theme="ascii"] #root div[data-ui="scorecard"]:is([data-band="very-high"], [data-band="high"]):not(.report-page):not(.report-page *) { background: var(--as-ink) !important; color: var(--as-white) !important; --band: var(--as-white); } /* Everything written on the inverted card is white, whatever part 2 made of its colour, and its rules and note frames are white lines. */ html[data-theme="ascii"] #root div[data-ui="scorecard"]:is([data-band="very-high"], [data-band="high"]) :is(p, span, strong)[style]:not(.report-page):not(.report-page *) { color: var(--as-white) !important; border-color: var(--as-white) !important; } /* The dial. app.js's conic gradient is switched off; the ring is the

. */
html[data-theme="ascii"] #root div[data-ui="dial"]:not(.report-page):not(.report-page *) {
  position: relative; width: auto !important; height: auto !important; margin: 0 auto;
  background: none !important; border-radius: 0 !important;
}
html[data-theme="ascii"] #root pre.as-dial-art { margin: 0; font: 400 16px/1 var(--as-font); letter-spacing: 0; color: var(--band); }
html[data-theme="ascii"] #root div[data-ui="dial"] > div:not(.report-page):not(.report-page *) {
  position: absolute; inset: 0; width: auto !important; height: auto !important; gap: 4px;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;   /* part 2 frames a navy panel; the well is not one */
}
html[data-theme="ascii"] #root div[data-ui="dial"] > div > span:first-child:not(.report-page):not(.report-page *) {
  font-size: 52px !important; font-weight: 800 !important; letter-spacing: 0 !important; color: inherit !important; text-shadow: none !important;
}
html[data-theme="ascii"] #root div[data-ui="dial"] > div > span + span:not(.report-page):not(.report-page *) {
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .1em !important; color: inherit !important;
}
/* The verdict: not a chip — the design's "[ ! ]  PROCEED WITH CARE" line, in the band's ink. */
html[data-theme="ascii"] #root [data-ui="scorecard"] span[style*="Archivo Black"][style*="padding:6px 11px"]:not(.report-page):not(.report-page *) {
  display: block !important; padding: 0 !important; margin-bottom: 12px !important; background: none !important; border: 0 !important;
  color: var(--band) !important; font-size: 22px !important; font-weight: 700 !important; letter-spacing: .04em !important; line-height: 1.25 !important;
}
html[data-theme="ascii"] #root [data-ui="scorecard"] span[style*="Archivo Black"][style*="padding:6px 11px"]:not(.report-page):not(.report-page *)::before { content: '[\A0\2014\A0]\A0\A0'; }
html[data-theme="ascii"] #root [data-ui="scorecard"]:is([data-band="very-high"], [data-band="high"]) span[style*="Archivo Black"][style*="padding:6px 11px"]:not(.report-page):not(.report-page *)::before { content: '[\A0\2715\A0]\A0\A0'; }
html[data-theme="ascii"] #root [data-ui="scorecard"]:is([data-band="moderate"], [data-band="low-moderate"]) span[style*="Archivo Black"][style*="padding:6px 11px"]:not(.report-page):not(.report-page *)::before { content: '[\A0!\A0]\A0\A0'; }
html[data-theme="ascii"] #root [data-ui="scorecard"][data-band="low"] span[style*="Archivo Black"][style*="padding:6px 11px"]:not(.report-page):not(.report-page *)::before { content: '[\A0\2713\A0]\A0\A0'; }
/* The "re-read" tag beside it is a label, not a verdict: an outline tag in the card's own ink. */
html[data-theme="ascii"] #root [data-ui="scorecard"] span[style*="background:#4E2E96"]:not(.report-page):not(.report-page *) {
  margin-left: 0 !important; background: transparent !important; color: inherit !important; border: 1px solid currentColor !important; padding: 5px 9px !important;
}
html[data-theme="ascii"] #root [data-ui="scorecard"] p[style*="font:400 12.5px"]:not(.report-page):not(.report-page *) { font-size: 15px !important; line-height: 1.55 !important; }
html[data-theme="ascii"] #root [data-ui="scorecard"] [style*="border-top:2px solid #1F4470"]:not(.report-page):not(.report-page *) { border-top-width: 1px !important; }
/* The two notes under the figures were dark slabs with a pale bar down the left. A 1px frame. */
html[data-theme="ascii"] #root [data-ui="scorecard"] p[style*="border-left:3px solid"]:not(.report-page):not(.report-page *) { border: 1px solid currentColor !important; background: transparent !important; }

/* ---- results -------------------------------------------------------------
   The three tabs are the design's tabbar: ruled cells, the current one inverted and led by
   the block cursor. (The strip's 2px gaps ARE the rules: its ground is ink.) */
html[data-theme="ascii"] #root button[data-act="activeTab"][style]:not(.report-page):not(.report-page *) { border: 0 !important; padding: 14px 4px !important; font-size: 11px !important; letter-spacing: .06em !important; }
html[data-theme="ascii"] #root button[data-act="activeTab"][style]:not(.report-page):not(.report-page *):hover { background: var(--as-tint) !important; color: var(--as-ink) !important; }
html[data-theme="ascii"] #root button[data-act="activeTab"][style*="background:#FF2E9A"]:not(.report-page):not(.report-page *),
html[data-theme="ascii"] #root button[data-act="activeTab"][style*="background:#FF2E9A"]:not(.report-page):not(.report-page *):hover { background: var(--as-ink) !important; color: var(--as-white) !important; }
html[data-theme="ascii"] #root button[data-act="activeTab"][style*="background:#FF2E9A"]:not(.report-page):not(.report-page *)::before { content: '\258C'; }
/* Channel tags (SEEN-LIKE, PHONETIC, a channel-of-trade figure) were blue, purple and green
   pills. The tag SAYS which channel it is; the fills are the accent, the AI ink and the clear
   ink, each of which carries white at 6:1 or better. */
html[data-theme="ascii"] #root [style*="background:#2F6FB2"]:not(.report-page):not(.report-page *) { background: var(--as-olive) !important; color: var(--as-white) !important; }
html[data-theme="ascii"] #root [style*="background:#7C4FD0"]:not(.report-page):not(.report-page *) { background: var(--as-ai) !important; color: var(--as-white) !important; }
html[data-theme="ascii"] #root [style*="background:#3D7B1D"]:not(.report-page):not(.report-page *) { background: var(--as-clear) !important; color: var(--as-white) !important; }

/* THE SEALED LIST. Pink fun blurs the conflict cards of a locked result and floats a magenta
   card over the blur. A blur is a soft effect this design does not have; its locked cards are
   SEALED — a ruled box with an edge label and redaction bars where the name and the owner
   would be (app.js sealedCard in the design) — and the way to unseal them comes after the
   cards, in the flow, not on top of them. So: the blur is off, each card's own content is not
   rendered at all (display:none — which hides it more thoroughly than the blur did, from a
   screen reader as well), the box draws the bars itself, only the first three are shown
   ("+ n more" is what the headline under them already says), and the floating card becomes
   the paragraph and the primary button under the list.
   THE SELECTOR IS NARROW ON PURPOSE. "filter:blur" is also a substring of "backdrop-filter:blur",
   which is how app.js writes the scrim of two OVERLAYS (the name modal a phone sign-up must
   answer, and the FIND "searching" overlay). Matched loosely, this block sealed those: the
   modal's card drew as a SEALED box with its field and both buttons display:none, over a
   scrim nothing dismisses. So: the list's own class, and never anything with a backdrop. */
html[data-theme="ascii"] #root div.cols2[style*="filter:blur"]:not([style*="backdrop-filter"]):not(.report-page):not(.report-page *) { filter: none !important; display: block !important; }
html[data-theme="ascii"] #root div.cols2[style*="filter:blur"]:not([style*="backdrop-filter"]) > *:not(.report-page):not(.report-page *) {
  position: relative; display: block !important; margin: 14px 0 0 !important; padding: 0 !important; opacity: 1 !important;
  background: transparent !important; border: 2px solid var(--as-ink) !important;
}
html[data-theme="ascii"] #root div.cols2[style*="filter:blur"]:not([style*="backdrop-filter"]) > *:nth-child(n+4):not(.report-page):not(.report-page *),
html[data-theme="ascii"] #root div.cols2[style*="filter:blur"]:not([style*="backdrop-filter"]) > * > *:not(.report-page):not(.report-page *) { display: none !important; }
html[data-theme="ascii"] #root div.cols2[style*="filter:blur"]:not([style*="backdrop-filter"]) > *:not(.report-page):not(.report-page *)::before {
  content: 'MARK\A0\A0\A0\A0\A0\A0\A0\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\A OWNER\A0\A0\A0\A0\A0\A0\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\A SIMILARITY\A0\2593\2593\A0%';
  display: block; white-space: pre; overflow: hidden; padding: 22px 20px 14px;
  font: 700 12px/2.4 var(--as-font); letter-spacing: .06em; color: var(--as-ink);
}
html[data-theme="ascii"] #root div.cols2[style*="filter:blur"]:not([style*="backdrop-filter"]) > *:nth-child(2):not(.report-page):not(.report-page *)::before {
  content: 'MARK\A0\A0\A0\A0\A0\A0\A0\2588\2588\2588\2588\2588\2588\2588\2588\A OWNER\A0\A0\A0\A0\A0\A0\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\A SIMILARITY\A0\2593\2593\A0%';
}
html[data-theme="ascii"] #root div.cols2[style*="filter:blur"]:not([style*="backdrop-filter"]) > *:nth-child(3):not(.report-page):not(.report-page *)::before {
  content: 'MARK\A0\A0\A0\A0\A0\A0\A0\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\A OWNER\A0\A0\A0\A0\A0\A0\2588\2588\2588\2588\2588\2588\2588\2588\A SIMILARITY\A0\2593\2593\A0%';
}
html[data-theme="ascii"] #root div.cols2[style*="filter:blur"]:not([style*="backdrop-filter"]) > *:not(.report-page):not(.report-page *)::after {
  content: 'SEALED'; position: absolute; top: -9px; left: 14px; padding: 0 8px; background: var(--as-paper);
  font: 800 12px/1.4 var(--as-font); letter-spacing: .08em; color: var(--as-ink);
}
html[data-theme="ascii"] #root div.cols2[style*="filter:blur"]:not([style*="backdrop-filter"]) + div[style*="position:absolute"]:not(.report-page):not(.report-page *) { position: static !important; display: block !important; padding: 20px 0 0 !important; }
html[data-theme="ascii"] #root div.cols2[style*="filter:blur"]:not([style*="backdrop-filter"]) + div[style*="position:absolute"] > div[style]:not(.report-page):not(.report-page *) {
  max-width: none !important; padding: 0 !important; text-align: left !important;
  background: transparent !important; color: var(--as-ink) !important; border: 0 !important;
}
html[data-theme="ascii"] #root div.cols2[style*="filter:blur"]:not([style*="backdrop-filter"]) + div[style*="position:absolute"] > div > p[style*="Archivo Black"]:not(.report-page):not(.report-page *) { font-size: 16px !important; letter-spacing: .06em !important; }
html[data-theme="ascii"] #root div.cols2[style*="filter:blur"]:not([style*="backdrop-filter"]) + div[style*="position:absolute"] > div > p[style*="Archivo Black"]:not(.report-page):not(.report-page *)::after { content: ' \2014  SEALED.'; }
html[data-theme="ascii"] #root div.cols2[style*="filter:blur"]:not([style*="backdrop-filter"]) + div[style*="position:absolute"] > div > p[style*="font:400 12px"]:not(.report-page):not(.report-page *) { font-size: 14px !important; line-height: 1.5 !important; }

/* ---- the pack ------------------------------------------------------------
   The design's pack is one .rows table: the document, its format, and its state at the right.
   Here the state is also the action, so it is a [ BRACKETED ] button — GET, the upgrade
   price, or LOCKED — and a row that cannot be opened yet says so in words, not by fading
   (Pink fun's .72 opacity on small olive type would not carry AA). The GET buttons' style is
   re-written by paintDocButtons() (THE ONE TRAP), so they are dressed by data-doclabel. */
html[data-theme="ascii"] #root .cols2:has(> div > button[data-doclabel]):not(.report-page):not(.report-page *) { display: block !important; border: 2px solid var(--as-ink); }
html[data-theme="ascii"] #root .cols2 > div:has(> button[data-doclabel]):not(.report-page):not(.report-page *) {
  margin: 0 !important; padding: 14px 16px !important; opacity: 1 !important; background: transparent !important;
  border: 0 !important; border-bottom: 1px solid var(--as-ink) !important;
}
html[data-theme="ascii"] #root .cols2 > div:has(> button[data-doclabel]):last-child:not(.report-page):not(.report-page *) { border-bottom: 0 !important; }
html[data-theme="ascii"] #root .cols2 > div:has(> button[data-doclabel]) p[style*="Archivo Black"]:not(.report-page):not(.report-page *) { font-size: 14px !important; letter-spacing: .04em !important; line-height: 1.3 !important; }
html[data-theme="ascii"] #root button[data-doclabel][data-act]:not(.report-page):not(.report-page *),
html[data-theme="ascii"] #root button[data-doclabel][data-act]:not(.report-page):not(.report-page *):disabled {
  flex: none; min-width: 0 !important; padding: 12px 4px !important; background: none !important; color: var(--as-ink) !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font-family: var(--as-font) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .08em !important;
}
html[data-theme="ascii"] #root button[data-doclabel][data-act]:not(.report-page):not(.report-page *)::before { content: '[ '; }
html[data-theme="ascii"] #root button[data-doclabel][data-act]:not(.report-page):not(.report-page *)::after { content: ' ]'; }
html[data-theme="ascii"] #root button[data-doclabel][data-act]:not(.report-page):not(.report-page *):hover:not(:disabled) { background: var(--as-ink) !important; color: var(--as-white) !important; }
html[data-theme="ascii"] #root button[data-doclabel="LOCKED"][data-act]:not(.report-page):not(.report-page *)::before { content: '\2593\A0'; }
html[data-theme="ascii"] #root button[data-doclabel="LOCKED"][data-act]:not(.report-page):not(.report-page *)::after { content: ''; }

/* ---- payment -------------------------------------------------------------
   THE TRIPWIRE, and any other refusal that is only a sentence in a red frame, is the design's
   error toast: an inverted ink block. It is the loudest thing this design has, which is what
   "do not pay" has to be. */
html[data-theme="ascii"] #root div:is([style*="background:#FDECEC"], [style*="background:#FBE9EA"]):has(> p:only-child):not(.report-page):not(.report-page *) { background: var(--as-ink) !important; border-color: var(--as-ink) !important; }
html[data-theme="ascii"] #root div:is([style*="background:#FDECEC"], [style*="background:#FBE9EA"]):has(> p:only-child) > p[style]:not(.report-page):not(.report-page *) { color: var(--as-white) !important; font-weight: 800 !important; letter-spacing: .04em !important; }
html[data-theme="ascii"] #root div:is([style*="background:#FDECEC"], [style*="background:#FBE9EA"]):has(> p:only-child) > p[style]:not(.report-page):not(.report-page *)::before { content: '\2588\A0!\A0\A0'; }
/* A green button meant "this one costs nothing" (use my credit). The words say it; the
   button is the primary button. Destructive and cautionary buttons keep their band (part 3). */
html[data-theme="ascii"] #root button:is([style*="background:#1B7A2E"], [style*="background:#1E7A3C"], [style*="background:#4E7A46"])[style]:not(.report-page):not(.report-page *) {
  background: var(--as-ink) !important; color: var(--as-white) !important; border: 2px solid var(--as-ink) !important; font-weight: 800 !important; letter-spacing: .06em !important;
}
html[data-theme="ascii"] #root button:is([style*="background:#1B7A2E"], [style*="background:#1E7A3C"], [style*="background:#4E7A46"])[style]:not(.report-page):not(.report-page *):hover { background: var(--as-olive) !important; border-color: var(--as-olive) !important; }

/* ---- activity ------------------------------------------------------------
   The design's LOG is one .rows table, not a stack of cards: a 2px box, 1px rules between
   the searches, tint under the pointer. The filled or empty square that leads each row (paid
   or free) is already this design's own mark. */
html[data-theme="ascii"] #root .cols2:has(> :is([data-act="histLoad"], [data-act="histMock"])):not(.report-page):not(.report-page *) { display: block !important; border: 2px solid var(--as-ink); }
html[data-theme="ascii"] #root .cols2 > div:is([data-act="histLoad"], [data-act="histMock"]):not(.report-page):not(.report-page *) {
  margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--as-ink) !important; background: transparent !important;
}
html[data-theme="ascii"] #root .cols2 > div:is([data-act="histLoad"], [data-act="histMock"]):last-child:not(.report-page):not(.report-page *) { border-bottom: 0 !important; }
html[data-theme="ascii"] #root .cols2 > div:is([data-act="histLoad"], [data-act="histMock"]):not(.report-page):not(.report-page *):hover { background: var(--as-tint) !important; }

/* Olive on tint is 3.9:1 (part 1), so the secondary text of a hovered row goes to ink with it. */
html[data-theme="ascii"] #root .cols2 > div:is([data-act="histLoad"], [data-act="histMock"]):hover :is([style*="color:#46608C"], [style*="color:#8FA0B5"]):not(.report-page):not(.report-page *) { color: var(--as-ink) !important; }

/* ---- the legacy Paid! screen ----
   The celebrating mascot and the pink-and-navy confetti are Pink fun's brand voice. The
   design's is one enormous word, set left: PAID. Hidden, and the button that was pulled up
   over her feet is put back where a button goes. */
html[data-theme="ascii"] #root img[alt="Celebrating fairy"],
html[data-theme="ascii"] #root canvas#confetti { display: none !important; }
html[data-theme="ascii"] #root div:has(> canvas#confetti):not(.report-page):not(.report-page *) { text-align: left !important; padding-top: clamp(48px, 14vh, 120px) !important; }
html[data-theme="ascii"] #root canvas#confetti + p[style*="Lobster Two"]:not(.report-page):not(.report-page *) { font-size: clamp(64px, 20vw, 120px) !important; line-height: 1 !important; margin-bottom: 28px !important; }
html[data-theme="ascii"] #root canvas#confetti ~ button[data-act="goDocs"]:not(.report-page):not(.report-page *) { margin-top: 22px !important; width: auto !important; padding: 18px 26px !important; }

/* ---------------------------------------------------------------------------
   5. THE SHELL — app.js emits these only under skinIs('ascii')
   --------------------------------------------------------------------------- */

/* Primitives shared by the shell and the landing page. */
html[data-theme="ascii"] #root .as-glyph { flex: none; font-size: 15px; line-height: 1; letter-spacing: 0; }
html[data-theme="ascii"] #root .as-brand { font-size: 12px; font-weight: 800; letter-spacing: .3em; white-space: nowrap; }
html[data-theme="ascii"] #root .as-cursor { animation: as-blink 1s steps(1) infinite; }
html[data-theme="ascii"] #root .as-bracket {
  background: none; border: 0; font-family: var(--as-font); color: var(--as-ink);
  font-weight: 700; font-size: 13px; line-height: 1.4; letter-spacing: .08em; cursor: pointer; padding: 2px 4px; white-space: nowrap;
}
html[data-theme="ascii"] #root .as-bracket:hover { background: var(--as-ink); color: var(--as-white); }

/* THE COLUMN. The design's app is one 600px column; the real app's results and documents need
   the 1000px desktop layout style.css gives them. So app.js marks each screen narrow or wide
   (ASCII_WIDE_SCREENS), the narrow ones get the design's 600px at every width, and the wide ones
   are left exactly as style.css sizes them — which is also what keeps every .report-page the
   width it is under Pink fun. Inside a narrow column the desktop grid helpers stand down. */
html[data-theme="ascii"] #root .as-shell[data-col="narrow"],
html[data-theme="ascii"] #root .as-tabbar[data-col="narrow"] { width: min(100%, 600px); }
html[data-theme="ascii"] #root .as-shell[data-col="narrow"] .login-grid { display: block; }
html[data-theme="ascii"] #root .as-shell[data-col="narrow"] .cols3 { grid-template-columns: 1fr !important; }
html[data-theme="ascii"] #root .as-shell[data-col="narrow"] .cols2 { display: block; }
html[data-theme="ascii"] #root .as-shell[data-col="narrow"] .cols2 > * { margin-bottom: 10px !important; }
html[data-theme="ascii"] #root .as-shell[data-col="narrow"] .settings-cols { columns: 1; }
html[data-theme="ascii"] #root .as-shell[data-col="narrow"] .narrow { max-width: none; }
@media (min-width: 640px) {
  html[data-theme="ascii"] #root .as-shell { margin-top: 24px !important; min-height: calc(100vh - 24px) !important; }
}

/* The shell-bar. */
html[data-theme="ascii"] #root .as-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  background: var(--as-paper); border-bottom: 2px solid var(--as-ink);
}
html[data-theme="ascii"] #root .as-bar-back { margin-left: -4px; }
html[data-theme="ascii"] #root .as-bar-title {
  margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--as-olive);
}
html[data-theme="ascii"] #root .as-bar-me { margin-right: -4px; }

/* The search-context strip under it: paper, ruled off, its NEW a small inverted button. */
html[data-theme="ascii"] #root [data-ui="contextbar"]:not(.report-page):not(.report-page *) { background: var(--as-paper) !important; border-bottom: 1px solid var(--as-ink) !important; padding: 9px 18px !important; }

/* The tabbar: ruled cells, the active one inverted and led by the block cursor. Fixed to the
   foot of the viewport like Pink fun's, and the same width as the column above it. */
html[data-theme="ascii"] #root .as-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0 auto;
  display: grid; background: var(--as-paper); border: 2px solid var(--as-ink);
}
html[data-theme="ascii"] #root .as-tab {
  min-width: 0; overflow: hidden; white-space: nowrap; text-align: center; padding: 16px 2px;
  display: flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--as-font); letter-spacing: .06em; text-decoration: none;
  background: none; border: 0; border-left: 1px solid var(--as-ink); color: var(--as-ink); cursor: pointer;
}
html[data-theme="ascii"] #root .as-tab:first-child { border-left: 0; }
html[data-theme="ascii"] #root .as-tab:hover { background: var(--as-tint); }
/* ADMIN is a real link, and part 1 paints every link olive. Spelled with the element and both
   exclusions so it outranks that rule. */
html[data-theme="ascii"] #root a.as-tab:not(.report-page):not(.report-page *),
html[data-theme="ascii"] #root a.as-tab:not(.report-page):not(.report-page *):hover { color: var(--as-ink) !important; }
html[data-theme="ascii"] #root .as-tab-on,
html[data-theme="ascii"] #root .as-tab-on:hover { background: var(--as-ink); color: var(--as-white); font-weight: 800; }
/* ACTIVE with no search behind it still goes somewhere (HISTORY), so it is quieter, not
   disabled: olive, which passes AA on paper. */
html[data-theme="ascii"] #root .as-tab-dim { color: var(--as-olive); font-weight: 500; }
/* ...unless it is also the tab you are on (the worked example has no search behind it): olive on
   ink is 2.8:1, so the active cell stays white. */
html[data-theme="ascii"] #root .as-tab-on.as-tab-dim { color: var(--as-white); font-weight: 800; }

/* THE ONE-TIME CODE, as the design draws it: six ruled cells, a typed digit inverting its
   cell and the block cursor waiting in the next. The cells are a picture (aria-hidden); the
   real field, #in-code, lies over them at opacity 0 so the keyboard, paste, autofill and
   every existing handler are the ordinary input's. The frame round the cells on focus stands
   in for the focus ring nobody can see on a transparent field. */
html[data-theme="ascii"] #root .as-otp-wrap { position: relative; margin-bottom: 18px; }
html[data-theme="ascii"] #root .as-otp { display: flex; gap: clamp(6px, 2.4vw, 12px); }
html[data-theme="ascii"] #root .as-otp-cell {
  flex: 0 1 56px; min-width: 0; height: 64px; border: 2px solid var(--as-ink);
  display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700;
}
html[data-theme="ascii"] #root .as-otp-cell.as-filled { background: var(--as-ink); color: var(--as-white); }
html[data-theme="ascii"] #root .as-otp-wrap > input#in-code:not(.report-page):not(.report-page *) {
  position: absolute; inset: 0; width: 100% !important; height: 100%; margin: 0 !important; padding: 0 !important;
  opacity: 0; border: 0 !important; cursor: text;
}
html[data-theme="ascii"] #root .as-otp-wrap:focus-within > .as-otp { outline: 2px solid var(--as-ink); outline-offset: 5px; }

/* ---- sign-in, by its hooks ---- */
html[data-theme="ascii"] #root [data-ui="login"] h2[style*="Archivo Black"]:not(.report-page):not(.report-page *) { font-size: 40px !important; letter-spacing: .02em !important; line-height: 1.1 !important; margin-bottom: 14px !important; }
/* The design leads with Google as THE primary button and makes the phone path the outline.
   [style] is only there to outrank part 3's inverted-text rule. */
html[data-theme="ascii"] #root button[data-act="googleLogin"][style]:not(.report-page):not(.report-page *) { background: var(--as-ink) !important; color: var(--as-white) !important; font-weight: 800 !important; font-size: 15px !important; padding: 18px 22px !important; }
html[data-theme="ascii"] #root button[data-act="googleLogin"][style]:not(.report-page):not(.report-page *):hover { background: var(--as-olive) !important; border-color: var(--as-olive) !important; color: var(--as-white) !important; }
html[data-theme="ascii"] #root button[data-act="googleLogin"] > span:not(.report-page):not(.report-page *) { display: none !important; }
html[data-theme="ascii"] #root button[data-act="googleLogin"]:not(.report-page):not(.report-page *)::after { content: '\2192'; }
html[data-theme="ascii"] #root button[data-act="sendCode"][style]:not(.report-page):not(.report-page *) { background: transparent !important; color: var(--as-ink) !important; font-weight: 700 !important; font-size: 14px !important; }
html[data-theme="ascii"] #root button[data-act="sendCode"][style]:not(.report-page):not(.report-page *):hover { background: var(--as-ink) !important; color: var(--as-white) !important; border-color: var(--as-ink) !important; }

/* ---------------------------------------------------------------------------
   6. THE LANDING PAGE — landingAsciiHTML in app.js; the design's index.html
   --------------------------------------------------------------------------- */
html[data-theme="ascii"] #root .as-land { background: var(--as-paper); color: var(--as-ink); font-family: var(--as-font); }
html[data-theme="ascii"] #root .as-land button { font-family: var(--as-font); cursor: pointer; }
html[data-theme="ascii"] #root .as-land h1 { margin: 0; }
html[data-theme="ascii"] #root .as-page {
  max-width: 1440px; margin: 0 auto; min-height: 100vh; background: var(--as-paper);
  border-left: 2px solid var(--as-ink); border-right: 2px solid var(--as-ink);
}
html[data-theme="ascii"] #root .as-topnav { display: flex; align-items: center; gap: 16px; padding: 20px 48px; border-bottom: 2px solid var(--as-ink); flex-wrap: wrap; }
html[data-theme="ascii"] #root .as-topnav .as-glyph { font-size: 16px; }
html[data-theme="ascii"] #root .as-topnav .as-brand { font-size: 13px; letter-spacing: .34em; }
html[data-theme="ascii"] #root .as-topnav-links { margin-left: auto; display: flex; align-items: center; gap: 12px 28px; font-size: 12px; font-weight: 700; letter-spacing: .08em; flex-wrap: wrap; }
html[data-theme="ascii"] #root .as-topnav-links a:not(.report-page):not(.report-page *) { color: var(--as-ink) !important; }
html[data-theme="ascii"] #root .as-topnav-links a:not(.report-page):not(.report-page *):hover { color: var(--as-olive) !important; }
html[data-theme="ascii"] #root .as-topnav-links .as-bracket { font-size: 12px; }

html[data-theme="ascii"] #root .as-hero-wrap { padding: 40px 48px 0; }
html[data-theme="ascii"] #root .as-poster {
  background: var(--as-poster); border-radius: var(--as-r-poster); color: var(--as-white);
  padding: 48px 56px 44px; display: flex; flex-direction: column; min-height: 980px;
}
/* Ink, not the design's white: white on the poster is 3.1:1, and this line is 14px. */
html[data-theme="ascii"] #root .as-brandline { display: flex; align-items: center; gap: 14px; color: var(--as-ink); }
html[data-theme="ascii"] #root .as-brandline .as-glyph { font-size: 18px; }
html[data-theme="ascii"] #root .as-brandline .as-brand { font-size: 14px; letter-spacing: .34em; }
/* The art is a strict cell grid: line-height 1, no tracking, or the ring is an ellipse. */
html[data-theme="ascii"] #root .as-art {
  margin: 48px auto 0; font-family: var(--as-font); font-size: 19px; line-height: 1; letter-spacing: 0;
  color: var(--as-white); overflow: hidden; max-width: 100%;
}
html[data-theme="ascii"] #root .as-poster-foot { margin-top: auto; padding-top: 40px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
html[data-theme="ascii"] #root .as-poster-lead { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
html[data-theme="ascii"] #root .as-h1 { font-size: 40px; line-height: 1.25; font-weight: 700; max-width: 28ch; text-wrap: balance; }
html[data-theme="ascii"] #root .as-btn-poster {
  display: inline-block; background: var(--as-white); color: var(--as-ink); border: 0;
  font-weight: 800; font-size: 19px; letter-spacing: .08em; padding: 20px 30px;
}
html[data-theme="ascii"] #root .as-btn-poster:hover { background: var(--as-ink); color: var(--as-white); }
html[data-theme="ascii"] #root .as-btn-poster:focus-visible { outline-color: var(--as-white) !important; }
html[data-theme="ascii"] #root .as-facts { font-size: 12px; font-weight: 700; letter-spacing: .12em; line-height: 1.6; color: var(--as-ink); }
html[data-theme="ascii"] #root .as-poster-sub { font-size: 19px; font-weight: 700; line-height: 1.6; max-width: 34ch; }
/* The design's ticker is one line, nowrap, overflow hidden — which on the design's own page cuts
   it off mid-sentence below about 1150px, and at 390px loses the prices altogether. It carries
   facts (the prices, "no subscription"), so here it WRAPS when it does not fit: one line
   wherever the design's fits, every word readable wherever it does not. */
html[data-theme="ascii"] #root .as-ticker { border-bottom: 2px solid var(--as-ink); padding: 16px 4px; font-size: 13px; font-weight: 700; letter-spacing: .1em; }
@media (max-width: 1200px) {
  html[data-theme="ascii"] #root .as-ticker { line-height: 1.7; }   /* wrapped lines need the air; one line is the design's */
}

/* THE SHARED LANDING BLOCK (landingShared() in app.js), in this skin's dress. The prototype has
   none of it; the owner's rule is that every landing carries it, word for word.
   The marquee is a second ruled band under the ticker and is set like it: ink on paper, bold,
   tracked. It is an SVG, so its type is sized in the viewBox's units (1000 across): 34 of them
   is 39px on a desktop and 13px on a phone. Its path is a dotted ink rule — square dots, the
   design has no round ones. Under prefers-reduced-motion app.js writes the same sentence as a
   still line instead, and that line IS the ticker's type. */
html[data-theme="ascii"] #root .as-mq { border-bottom: 2px solid var(--as-ink); overflow: hidden; }
html[data-theme="ascii"] #root .as-mq-svg { display: block; width: 100%; height: clamp(96px, 14vw, 170px); }
html[data-theme="ascii"] #root .as-mq-path { stroke: var(--as-ink); stroke-width: 2; stroke-dasharray: 2 10; }
html[data-theme="ascii"] #root .as-mq-text { font: 700 34px var(--as-font); letter-spacing: .06em; fill: var(--as-ink); }
html[data-theme="ascii"] #root .as-mq-still { margin: 0; padding: 16px 4px; font-size: 13px; font-weight: 700; letter-spacing: .1em; line-height: 1.7; }
/* The coming-soon section: "00" in the steps' olive number language, then the h-section label. */
/* .as-section.as-soon, both classes: .as-section is declared further down and would otherwise win. */
html[data-theme="ascii"] #root .as-section.as-soon { padding-top: 96px; padding-bottom: 0; gap: 0; }
html[data-theme="ascii"] #root .as-soon-eyebrow { margin: 0 0 22px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 18px; font-size: 24px; font-weight: 700; letter-spacing: .04em; }
html[data-theme="ascii"] #root .as-soon-n { font-size: 96px; font-weight: 700; line-height: 1; letter-spacing: 0; color: var(--as-olive); }
html[data-theme="ascii"] #root .as-soon-h { margin: 0 0 28px; font-size: 40px; line-height: 1.25; font-weight: 700; }
html[data-theme="ascii"] #root .as-soon-p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; max-width: 84ch; }
/* The highlighted phrase is a band of tint, the design's highlighter: ink on tint is 11:1. */
html[data-theme="ascii"] #root .as-mark { background: var(--as-tint); font-weight: 700; padding: 1px 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* The not-legal-advice box: a .tagbox, its title riding the top edge as the box's label. The
   title is typed in sentence case (it is the same string on every landing) and set in capitals
   here, as Pink fun sets it. Where the label is wider than the box can carry on one line it
   comes inside the box as its first line instead of wrapping across the border. */
html[data-theme="ascii"] #root .as-legalbox { margin-top: 30px; max-width: 84ch; }
html[data-theme="ascii"] #root .as-legalbox-t { margin: 0; text-transform: uppercase; }
html[data-theme="ascii"] #root .as-legalbox-b { margin: 0; font-size: 14px; line-height: 1.6; }

html[data-theme="ascii"] #root .as-steps { padding: 96px 48px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; scroll-margin-top: 0; }
html[data-theme="ascii"] #root .as-step { display: flex; flex-direction: column; gap: 18px; }
html[data-theme="ascii"] #root .as-step-n { font-size: 96px; font-weight: 700; line-height: 1; color: var(--as-olive); }
html[data-theme="ascii"] #root .as-step-t { font-size: 16px; font-weight: 700; letter-spacing: .1em; }
html[data-theme="ascii"] #root .as-step-b { font-size: 15px; line-height: 1.55; max-width: 38ch; }

html[data-theme="ascii"] #root .as-section { padding: 0 48px 96px; display: flex; flex-direction: column; gap: 28px; scroll-margin-top: 32px; }
html[data-theme="ascii"] #root .as-section-tight { gap: 14px; }
html[data-theme="ascii"] #root .as-h-section { font-size: 24px; font-weight: 700; letter-spacing: .04em; }
html[data-theme="ascii"] #root .as-lede { font-size: 15px; line-height: 1.5; }
html[data-theme="ascii"] #root .as-cells { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 2px solid var(--as-ink); border-left: 2px solid var(--as-ink); }
html[data-theme="ascii"] #root .as-cell { border-right: 2px solid var(--as-ink); border-bottom: 2px solid var(--as-ink); padding: 28px; display: flex; flex-direction: column; gap: 12px; min-height: 190px; align-items: flex-start; }
html[data-theme="ascii"] #root .as-cell-t { font-size: 14px; font-weight: 800; letter-spacing: .08em; }
html[data-theme="ascii"] #root .as-cell-b { font-size: 14px; line-height: 1.55; }
html[data-theme="ascii"] #root .as-cell-go { margin-top: auto; margin-left: -4px; font-size: 12px; letter-spacing: .06em; color: var(--as-olive); }

html[data-theme="ascii"] #root .as-banner { margin: 0 48px 96px; background: var(--as-tint); color: var(--as-ink); padding: 40px 48px; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
html[data-theme="ascii"] #root .as-banner-t { font-size: 24px; font-weight: 700; line-height: 1.4; max-width: 44ch; }
html[data-theme="ascii"] #root .as-btn-ink { flex: none; background: var(--as-ink); color: var(--as-white); border: 0; font-weight: 800; font-size: 19px; letter-spacing: .08em; padding: 20px 30px; }
html[data-theme="ascii"] #root .as-btn-ink:hover { background: var(--as-olive); }

/* Bordered boxes with edge labels (the design's .tagbox). */
html[data-theme="ascii"] #root .as-tagbox { position: relative; border: 2px solid var(--as-ink); padding: 26px 22px 18px; }
html[data-theme="ascii"] #root .as-tag { position: absolute; top: -9px; left: 14px; background: var(--as-paper); padding: 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; line-height: 1.3; }
/* The right-hand label rides the TOP edge in the design. Beside a long left-hand label there is
   only room for both from about 1280px up; below that it rides the bottom edge instead of
   colliding (the design's own page overlaps them). MEASURED: the two labels need 355px of box,
   which the third column has from a 1270px layout up — and a 1280px window with a classic
   scrollbar lays out at 1265px, where the ink label sat on top of the price. So the top edge
   starts at 1320px, where there are 18px to spare. */
html[data-theme="ascii"] #root .as-tag-r { position: absolute; bottom: -11px; right: 14px; background: var(--as-ink); color: var(--as-white); padding: 2px 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em; line-height: 1.5; }
html[data-theme="ascii"] #root .as-tagbox.as-selected { outline: 2px solid var(--as-ink); outline-offset: 3px; margin: 3px; }
html[data-theme="ascii"] #root .as-plans { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 36px; margin-top: 24px; }
html[data-theme="ascii"] #root .as-plan { padding: 30px 26px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
html[data-theme="ascii"] #root .as-plan-k { font-size: 12px; font-weight: 700; letter-spacing: .1em; }
html[data-theme="ascii"] #root .as-plan-b { font-size: 14px; line-height: 1.55; }
html[data-theme="ascii"] #root .as-plan-go { margin-top: auto; margin-left: -4px; }
@media (min-width: 1320px) {
  html[data-theme="ascii"] #root .as-tag-r { top: -11px; bottom: auto; font-size: 10.5px; letter-spacing: .04em; }
}

html[data-theme="ascii"] #root .as-qas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 56px; }
html[data-theme="ascii"] #root .as-qa { display: flex; flex-direction: column; gap: 10px; }
html[data-theme="ascii"] #root .as-qa-q { font-size: 14px; font-weight: 800; letter-spacing: .06em; }
html[data-theme="ascii"] #root .as-qa-a { font-size: 14px; line-height: 1.6; }

html[data-theme="ascii"] #root .as-footer { background: var(--as-ink); color: var(--as-white); padding: 72px 48px; display: flex; flex-direction: column; gap: 40px; }
html[data-theme="ascii"] #root .as-footer-top { display: flex; justify-content: space-between; gap: 48px; align-items: flex-start; flex-wrap: wrap; }
html[data-theme="ascii"] #root .as-verse { font-size: 15px; line-height: 2; }
html[data-theme="ascii"] #root .as-footer-cta { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
html[data-theme="ascii"] #root .as-footer-q { font-size: 14px; line-height: 1.5; max-width: 32ch; }
html[data-theme="ascii"] #root .as-btn-white { background: var(--as-white); color: var(--as-ink); border: 0; font-weight: 800; font-size: 15px; letter-spacing: .08em; padding: 16px 24px; }
html[data-theme="ascii"] #root .as-btn-white:hover { background: var(--as-olive); color: var(--as-white); }
html[data-theme="ascii"] #root .as-btn-white:focus-visible { outline-color: var(--as-white) !important; }
html[data-theme="ascii"] #root .as-legal { border-top: 1px solid var(--as-white); padding-top: 28px; display: flex; flex-direction: column; gap: 12px; font-size: 12px; letter-spacing: .06em; line-height: 1.9; }

/* Narrow viewports. The design is a fixed poster that "degrades gracefully" under 1000px; here
   it also has to FIT, which the design's own page does not at 390px (its 19px ring is 399px
   wide). The ring is 35 cells across and a cell is 0.6em, so its width is 21em: the font-size
   is whatever makes 21em fit the panel. */
@media (max-width: 1000px) {
  html[data-theme="ascii"] #root .as-topnav { padding: 16px 20px; }
  html[data-theme="ascii"] #root .as-hero-wrap { padding: 20px 20px 0; }
  html[data-theme="ascii"] #root .as-poster { padding: 32px 24px; min-height: 720px; border-radius: 22px; }
  html[data-theme="ascii"] #root .as-art { font-size: clamp(11px, calc((100vw - 96px) / 21), 19px); }
  html[data-theme="ascii"] #root .as-steps { padding: 64px 20px; grid-template-columns: 1fr; }
  html[data-theme="ascii"] #root .as-section { padding: 0 20px 64px; }
  html[data-theme="ascii"] #root .as-section.as-soon { padding-top: 64px; padding-bottom: 0; }
  html[data-theme="ascii"] #root .as-banner { margin: 0 20px 64px; padding: 32px 24px; }
  html[data-theme="ascii"] #root .as-cells,
  html[data-theme="ascii"] #root .as-plans,
  html[data-theme="ascii"] #root .as-qas { grid-template-columns: 1fr; }
  html[data-theme="ascii"] #root .as-cell { min-height: 0; }
  html[data-theme="ascii"] #root .as-footer { padding: 48px 20px; }
}
@media (max-width: 520px) {
  html[data-theme="ascii"] #root .as-h1 { font-size: 30px; }
  html[data-theme="ascii"] #root .as-btn-poster,
  html[data-theme="ascii"] #root .as-btn-ink { font-size: 16px; padding: 18px 20px; }
  html[data-theme="ascii"] #root .as-step-n { font-size: 72px; }
  html[data-theme="ascii"] #root .as-soon-n { font-size: 72px; }
  html[data-theme="ascii"] #root .as-soon-h { font-size: 30px; }
  html[data-theme="ascii"] #root .as-soon-eyebrow { font-size: 20px; }
  html[data-theme="ascii"] #root .as-legalbox { padding-top: 18px; }
  html[data-theme="ascii"] #root .as-legalbox-t { position: static; padding: 0; margin: 0 0 10px; }
  html[data-theme="ascii"] #root .as-banner-t { font-size: 20px; }
  html[data-theme="ascii"] #root .as-topnav-links { margin-left: 0; gap: 8px 18px; }
  html[data-theme="ascii"] #root .as-bar { padding: 12px 14px; gap: 8px; }
}

@keyframes as-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes as-ring { 0%, 49% { background-color: var(--as-ink); } 50%, 100% { background-color: var(--as-olive); } }
@keyframes as-field { from { height: 0; } to { height: 5em; } }
@keyframes as-march { from { transform: translateX(0); } to { transform: translateX(-5ch); } }

/* A HELD CREDIT, SAID OUT LOUD (app.js: creditStep3HeadHTML, creditCardBits, the urgency lock in
   wizardHTML, freebieBannerHTML, creditSettingsHTML). The boxes and inks already arrive through the
   [style*=] rules above -- the new markup is written in app.js's existing green vocabulary -- so
   this is only what makes the pieces read as this skin's: the label on a covered card is an INK
   band with white type, not a box inside a box -- ink, because a selected card is already a tint
   band and the label has to show on it.
   Hooked by data-credit, an attribute that paints nothing. */
html[data-theme="ascii"] #root [data-credit="held"]:not(.report-page):not(.report-page *) { box-shadow: none !important; }
html[data-theme="ascii"] #root [data-credit="held-line"]:not(.report-page):not(.report-page *) { font: 700 12.5px/1.6 var(--as-font) !important; color: var(--as-ink) !important; }
html[data-theme="ascii"] #root [data-credit="declined"]:not(.report-page):not(.report-page *) { font: 400 12px/1.6 var(--as-font) !important; color: var(--as-ink) !important; }
/* On a plan card, and the card re-inks every coloured descendant -- so these three name the card,
   and the label names its own inline colour, to outrank that rule rather than fight it with order. */
html[data-theme="ascii"] #root button[data-act="pickPlan"][style] p[data-credit="use"][style*="color:"][style]:not(.report-page):not(.report-page *) { border: 0 !important; background: var(--as-ink) !important; color: var(--as-white) !important; font: 700 12px/1.5 var(--as-font) !important; letter-spacing: .02em !important; padding: 5px 8px !important; }
html[data-theme="ascii"] #root button[data-act="pickPlan"][style] p[data-credit="covered"][style]:not(.report-page):not(.report-page *) { font: 700 12px/1.5 var(--as-font) !important; color: var(--as-clear) !important; }
html[data-theme="ascii"] #root :is([data-credit="na"], [data-credit="speed"]):not(.report-page):not(.report-page *) { font: 400 12px/1.5 var(--as-font) !important; letter-spacing: 0 !important; color: var(--as-olive) !important; }
/* ...but "doesn't apply to this one" sits ON a plan card, and a selected card is a tint band: olive on
   the tint is 3.9:1. Ink there (it is 12px body text, so it needs 4.5). */
html[data-theme="ascii"] #root button[data-act="pickPlan"][style] p[data-credit="na"][style]:not(.report-page):not(.report-page *) { color: var(--as-ink) !important; }
html[data-theme="ascii"] #root button:is([data-credit="keep"], [data-act="creditUseAfterAll"])[style]:not(.report-page):not(.report-page *) { font: 700 12px/1.6 var(--as-font) !important; color: var(--as-olive) !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; text-decoration: underline; text-underline-offset: 3px; text-transform: none !important; letter-spacing: 0 !important; }
html[data-theme="ascii"] #root button:is([data-credit="keep"], [data-act="creditUseAfterAll"])[style]:not(.report-page):not(.report-page *):hover { background: var(--as-tint) !important; color: var(--as-ink) !important; }
html[data-theme="ascii"] #root button[data-credit="urgency-set"][style]:not(.report-page):not(.report-page *) { line-height: 1.35 !important; }
html[data-theme="ascii"] #root :is([data-credit="banner-kind"], [data-credit="banner-count"]):not(.report-page):not(.report-page *) { font: 700 12.5px/1.5 var(--as-font) !important; color: var(--as-ink) !important; }
/* ME: one ruled row per kind, the count on the right. */
html[data-theme="ascii"] #root [data-credit="me-row"]:not(.report-page):not(.report-page *) { border-bottom: var(--as-rule) !important; }