/* ===========================================================================
   QUIET DECK — the fourth skin: the QuietDeck device UI, an instrument panel on a
   desk at night. Inert unless js/theme.js stamped <html data-theme="quiet-deck">;
   Pink fun is css/style.css, unprefixed, untouched, and this file never reaches into
   css/theme-clean-hub.css or css/theme-ascii.css (the four attribute values cannot all
   be on <html> at once, so no two of the sheets can 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="quiet-deck"]. 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 (one
        exception, marked: the document reset gives the sheets Pink fun's ink back).

   THIS IS THE FIRST DARK SKIN, AND THAT IS THE WHOLE DIFFICULTY. Clean hub and Ascii are
   both ink on a pale ground, so an inline style this sheet failed to catch came out a
   little wrong. Here the page is #0b0e12 and an uncaught inline style is either invisible
   text or a white slab in the middle of it. Be MORE exhaustive than Clean hub's sheet
   was, not less, and work from the inventory in docs/quietdeck-design/WEB-SKIN-SPEC.md
   section 7 — it is the real list, counted out of public/js/app.js, not a recollection.

   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, #gs-inline-count, .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 <body>, 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 docs/quietdeck-design/QuietDeck-UI-Skill.md parts B1-B4, mapped to
   the web in docs/quietdeck-design/WEB-SKIN-SPEC.md: four stacked zones (a status strip, a
   header, a body of hairline-separated rows, an amber hint bar pinned at the bottom saying
   which keys the screen handles); Montserrat for the interface and JetBrains Mono for the
   8x16 grid the device gives to body text and input fields; three surface steps and a
   hairline instead of shadows; small radii; a 3px accent bar down the left of the selected
   row; dark text on every saturated fill, the way the device puts COL_BG on a letter tile.
   Flat. No gradients but the score dial, which is one in the markup. No shadows at all.
   Where app.js's COMPOSITION has to differ it branches on skinIs('quiet-deck') and emits
   .qd-* 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, the spinners, the shell frame, .gs-ghost, the ribbon) and the twelve
   [data-credit] pieces every skin's sheet has to dress. 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 .qd-* component vocabulary app.js
   emits under skinIs('quiet-deck') — the list row, the letter tile, the keycap, the button and
   the hint bar. 6 the landing (.qd-land, .qd-mq...).

   Part 5 is NOT a re-composed shell, which is what this file's plan said it would be. app.js
   branches on skinIs('quiet-deck') in one place only — landingHTML() — so under this skin the
   app wears Pink fun's shell markup, and part 4 re-dresses it into the same four zones: .shell
   is the screen, the sticky navy bar is the header, [data-ui="contextbar"] the strip under it,
   and .appnav the amber hint bar. The components in part 5 are what the landing uses and what
   a shell branch would reuse if one is ever written.

   The fonts are loaded by js/theme.js (THEMES['quiet-deck'].fontHref) — Montserrat and
   JetBrains Mono, both families in ONE Google Fonts stylesheet. The site's CSP allows
   fonts.googleapis.com and fonts.gstatic.com in font-src and nothing else, so this sheet
   carries no @font-face and no remote url(), and firebase.json is not widened for a skin.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   The device palette is section B2 of the skill document, verbatim — not a value here was
   invented or nudged. What the device has no equivalent of (a five-step risk verdict, soft
   callout fills, a scrim, four scoring channels) is derived FROM those values and the
   reasoning is in WEB-SKIN-SPEC.md section 1.2.

   MEASURED (WCAG 2.x, the same arithmetic as the contrast pass in scripts/qa/theme_leaks.py).
   The full table is WEB-SKIN-SPEC.md section 5; the three numbers that decide how this sheet
   is written are here, because every rule below has to respect them:

     --qd-dim  #7c8895   5.35 on the page and 4.89 on a card — but 4.13 on --qd-surf2 and
                         3.60 on the toast. A selected row, an input and a chip are all
                         --qd-surf2 and a caption moves between grounds as screens are
                         composed, so the rule is flat and has no exceptions to remember:
                         --qd-dim is for text at 24px (or 18.66px bold) and up, and for
                         things that are not text. Reading copy is --qd-fg or --qd-fg2.
     --qd-line2 #4a5561  2.54 at its very best. NEVER text. Hairlines and greyed icons.
     --qd-bg   #0b0e12   6.4 to 11.9 on every saturated fill in this palette, which is why
                         a chip, a pill, a tile and the primary button all carry DARK text.
                         White on them is 1.6 to 3.0 — a rule copied from Clean hub's "a
                         solid band fill carries white" would fail every screen it touched.
   --------------------------------------------------------------------------- */
html[data-theme="quiet-deck"] {
  /* ---- the device palette, section B2, verbatim ---------------------------- */
  --qd-bg:        #0b0e12;   /* COL_BG        page, canvas, and the ink on any bright fill */
  --qd-surf:      #131920;   /* COL_SURF      card, panel, bar */
  --qd-surf2:     #1e2833;   /* COL_SURF2     selected row, input field, chip, track */
  --qd-line:      #1b232c;   /* COL_LINE      hairline, row separator, toast border */
  --qd-line2:     #4a5561;   /* COL_LINE_DIM  a box that must read as a box; greyed icons */
  --qd-fg:        #e9edf2;   /* COL_FG        primary text */
  --qd-fg2:       #b3bdc8;   /* COL_FG2       secondary text, body copy on a card */
  --qd-dim:       #7c8895;   /* COL_DIM       captions, times, keys — see the size rule above */
  --qd-acc:       #4da3ff;   /* COL_ACCENT    selection bar, field border, spinner, links */
  --qd-ok:        #3dd68c;   /* COL_OK */
  --qd-warn:      #ffb224;   /* COL_WARN      warnings proper, and nothing else */
  --qd-red:       #ff5d5d;   /* COL_RED */
  --qd-sms:       #5aa2ff;   /* COL_SMS */
  --qd-msg:       #a78bfa;   /* COL_MSG */
  --qd-hint:      #f5c542;   /* COL_HINT      the amber bar, and the key glyph on a keycap */
  --qd-hint-fg:   #2b2100;   /* COL_HINT_FG   the keycap fill, and the label text on the bar */
  --qd-toast:     #273240;   /* COL_TOAST */
  --qd-bn-call:   #2fbf71;   /* COL_BN_CALL    these five are FILLS in the design, never inks: */
  --qd-bn-missed: #e5484d;   /* COL_BN_MISSED  the last two measure 5.1 and 4.2 as text and */
  --qd-bn-sms:    #3e8ef7;   /* COL_BN_SMS     would fail the moment somebody set one small */
  --qd-bn-msg:    #8b6cf6;   /* COL_BN_MSG */
  --qd-bn-info:   #6b7785;   /* COL_BN_INFO */

  /* The eight letter-tile tints (B2: a stable FNV-1a hash of the name, mod 8), in order.
     Every one carries --qd-bg at 6.1:1 or better, which is the whole reason the design puts
     the initial on the tile in the page colour rather than in white. */
  --qd-t1: #5aa2ff;  --qd-t2: #34c77b;  --qd-t3: #f59e0b;  --qd-t4: #a78bfa;
  --qd-t5: #2dd4bf;  --qd-t6: #f472b6;  --qd-t7: #ef6461;  --qd-t8: #eab308;

  /* ---- the five risk bands ------------------------------------------------- */
  /* Pink fun's ramp is red, orange, yellow, lime, green (BANDS in app.js). This palette has
     three severity hues and eight tile tints, so the five steps are chosen for the widest
     separation it allows — hue first, then luminance (0.30 / 0.44 / 0.60 / 0.51 / 0.51).
     TWO OF THESE LOOK WRONG UNTIL YOU MEASURE THEM.
       Moderate is the same hex as the hint bar. One value, two roles, in objects that are
       never the same kind of thing — a full-bleed 24px bar against a verdict chip. The
       device's own palette already does this: #5aa2ff is both COL_SMS and tile tint 1.
       Low-Moderate is a TEAL. There is no yellow-green here, and the two greens that do
       exist (#34c77b, #3dd68c) are the same hue at 0.43 and 0.51 — far too close to carry
       two ADJACENT named bands a reader is meant to tell apart at a glance. The teal is 18
       degrees off the green and is the only hue that separates them. The ordering cue is the
       label the server sends ("RISK: Low-Moderate"), which no skin may touch.
     COL_WARN is deliberately not spent on a band: warnings exist on their own in this
     product (the health warning, a refusal, "payment not completed"), and a colour that
     means "warning" everywhere and "High risk" on one card means neither. */
  --qd-vhigh:  #ff5d5d;   /* COL_RED  */
  --qd-high:   #f59e0b;   /* tile 3   */
  --qd-mod:    #f5c542;   /* COL_HINT */
  --qd-lowmod: #2dd4bf;   /* tile 5   */
  --qd-low:    #3dd68c;   /* COL_OK   */

  /* SOFT FILLS AND THEIR BORDERS: the hue at 14% and at 42%. Written as rgba() and not as a
     flattened hex on purpose — the same token has to work on the page AND inside a card, and
     theme_leaks.py composites translucent layers up the tree, so both grounds are measured.
     Both pass: --qd-fg is 11.1 to 14.1 on every one of them, --qd-fg2 is 6.9 to 8.7, and each
     band's own hue on its own soft fill is 4.9 at worst. (--qd-dim on one is 3.3 to 4.1,
     which is the flat rule at the top of this block, not an exception to it.) */
  --qd-vhigh-soft:  rgba(255,  93,  93, .14);   --qd-vhigh-brd:  rgba(255,  93,  93, .42);
  --qd-high-soft:   rgba(245, 158,  11, .14);   --qd-high-brd:   rgba(245, 158,  11, .42);
  --qd-mod-soft:    rgba(245, 197,  66, .14);   --qd-mod-brd:    rgba(245, 197,  66, .42);
  --qd-lowmod-soft: rgba( 45, 212, 191, .14);   --qd-lowmod-brd: rgba( 45, 212, 191, .42);
  --qd-low-soft:    rgba( 61, 214, 140, .14);   --qd-low-brd:    rgba( 61, 214, 140, .42);
  --qd-warn-soft:   rgba(255, 178,  36, .14);   --qd-warn-brd:   rgba(255, 178,  36, .42);
  --qd-acc-soft:    rgba( 77, 163, 255, .14);   --qd-acc-brd:    rgba( 77, 163, 255, .42);
  --qd-ai-soft:     rgba(167, 139, 250, .14);   --qd-ai-brd:     rgba(167, 139, 250, .42);

  /* The four scoring channels say WHICH ALGORITHM found a mark. They are labels, not
     verdicts, so none of them may borrow a band hue — #f472b6 is the one colour in this
     palette that no verdict uses, which is why ACOUSTIC gets it. */
  --qd-chan-text: var(--qd-fg2);
  --qd-chan-vis:  #4da3ff;
  --qd-chan-phon: #a78bfa;
  --qd-chan-ac:   #f472b6;
  --qd-ai:        #a78bfa;   /* COL_MSG: the AI channel's ink and the AI-sourced panels */

  /* The device has no overlays at all. Pink fun's veil ("this is still here, it just does not
     count", style.css) is a LIGHTENING grey; on a dark ground that reads as emphasis, so here
     a thing that does not count fades toward the page instead of away from it. */
  --qd-scrim: rgba(3, 5, 7, .74);
  --qd-veil:  rgba(11, 14, 18, .60);

  /* ---- type ---------------------------------------------------------------- */
  --qd-font: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --qd-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ---- shape --------------------------------------------------------------- */
  /* Everything Pink fun draws at 2, 3, 5 or 6px becomes this one hairline. The only things
     thicker on this skin are the input field's 2px accent border (B4.4) and --qd-sel-w. */
  --qd-hair:   1px solid var(--qd-line);
  --qd-brd:    1px solid var(--qd-line2);
  --qd-r-sm:   4px;    /* keycap, letter tile, small chip — B4.3 / B4.7 */
  --qd-r-row:  6px;    /* the selected-row surface — B4.3 */
  --qd-r-ctl:  8px;    /* button, input, select — the device's field radius, B4.4 */
  --qd-r-card: 14px;   /* card, panel, overlay — the banner card's radius, B4.5 */
  --qd-r-pill: 999px;  /* only where Pink fun already drew a pill */
  --qd-sel-w:  3px;    /* the accent bar down the left of the selected row */

  /* The live ring (style.css explains it; app.js reads these five by name). At rest the frame
     is the hairline the wrapper stands in for, so an idle control is the box it always was;
     ringing, a pale highlight sweeps it through the accent. */
  --ring-deep:      #1b232c;
  --ring-dark:      #1b232c;
  --ring-primary:   #4da3ff;
  --ring-light:     #5aa2ff;
  --ring-highlight: #e9edf2;
}

/* ---------------------------------------------------------------------------
   THE PAGE
   --------------------------------------------------------------------------- */

/* color-scheme is not decoration on the first dark skin: without it the browser paints the
   page's own scrollbar, the caret and the native parts of a <select> for a light document, and
   a white scrollbar down the right of a #0b0e12 page is the first thing anybody sees. It is
   put back for the documents below. */
html[data-theme="quiet-deck"] { color-scheme: dark; }

html[data-theme="quiet-deck"],
html[data-theme="quiet-deck"] body { background: var(--qd-bg); }

/* 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 and would re-paginate — which is the one thing a skin may never do. */
html[data-theme="quiet-deck"] #root > div {
  background: var(--qd-bg) !important;
  font-family: var(--qd-font) !important;
  color: var(--qd-fg) !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 and Ascii's,
   same reason — with one line those two did not need: a dated legal record is black on white
   whatever the buyer was wearing, so its subtree is told so explicitly and the dark
   color-scheme above stops at its edge. */
html[data-theme="quiet-deck"] :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 */
  color-scheme: light;
}

/* ---------------------------------------------------------------------------
   BASE TYPOGRAPHY AND THE THINGS EVERY SCREEN HAS
   The remap of app.js's inline faces and sizes is part 2; these are the rules that have no
   inline style to match in the first place.
   --------------------------------------------------------------------------- */

html[data-theme="quiet-deck"] #root a:not(.report-page):not(.report-page *) { color: var(--qd-acc) !important; text-decoration: none; }
html[data-theme="quiet-deck"] #root a:not(.report-page):not(.report-page *):hover { color: var(--qd-fg) !important; }

html[data-theme="quiet-deck"] #root :is(input, button, textarea, select):not(.report-page):not(.report-page *) { font-family: var(--qd-font); }

/* 2px and offset 2px: the device's own focus treatment is the field's 2px accent border
   (B4.4), and on a dark ground a ring needs the gap to separate from the control it is
   around. :focus as well as :focus-visible on inputs, which is what style.css does. */
html[data-theme="quiet-deck"] #root :is(input, button, textarea, select, a):not(.report-page):not(.report-page *):focus-visible {
  outline: 2px solid var(--qd-acc) !important;
  outline-offset: 2px !important;
}
html[data-theme="quiet-deck"] #root input:not(.report-page):not(.report-page *):focus { outline: 2px solid var(--qd-acc); outline-offset: 2px; }

/* The scrollbar is part of the panel in this design: a 3px track in COL_LINE with a COL_DIM
   thumb (B4.3). Only the app's own scrollers — the document subtree keeps the browser's,
   because a sheet is a sheet. scrollbar-width:thin is the nearest a stylesheet gets to 3px. */
html[data-theme="quiet-deck"] #root > div { scrollbar-width: thin; scrollbar-color: var(--qd-dim) var(--qd-line); }
html[data-theme="quiet-deck"] :where(#root .report-page) { scrollbar-width: auto; scrollbar-color: auto; }

/* A text selection on a dark ground: the accent at the alpha the soft fills use, so it reads
   as the same family as a selected row, with the text left alone. The document subtree is
   excluded like everything else — a buyer dragging across a clause of their own certificate
   sees what Pink fun shows them, which is the browser's. */
html[data-theme="quiet-deck"] #root :not(.report-page):not(.report-page *)::selection {
  background: var(--qd-acc-brd);
  color: var(--qd-fg);
}

/* ---------------------------------------------------------------------------
   2. THE GENERIC VOCABULARY — every screen at once.

   Counted out of public/js/app.js, not recalled: 1,109 style="..." attributes, 862 distinct
   declarations, 108 distinct properties. The groups below are in the order Clean hub's sheet
   uses, and the order is the point — everything is !important, so a later group at the same
   specificity beats an earlier one, and fills have to be settled before the inks that sit on
   them.
   --------------------------------------------------------------------------- */

/* ---- type ---------------------------------------------------------------- */
/* Archivo Black was the display face: headings, prices, big button labels. Montserrat 700 is
   this design's heaviest UI weight (B3); the condensed face's own capitals were a brand voice
   and are dropped, but nothing app.js TYPED in capitals changes — text-transform is not copy. */
html[data-theme="quiet-deck"] #root [style*="Archivo Black"]:not(.report-page):not(.report-page *) {
  font-family: var(--qd-font) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
}
/* A heading set at /.9 or /.95 was tight for a condensed black face and collides in Montserrat. */
html[data-theme="quiet-deck"] #root :is(h1, h2, h3)[style*="Archivo Black"]:not(.report-page):not(.report-page *) { line-height: 1.1 !important; }

/* Space Mono was everything else. Default: it is prose, so it becomes the UI face. */
html[data-theme="quiet-deck"] #root [style*="Space Mono"]:not(.report-page):not(.report-page *) {
  font-family: var(--qd-font) !important;
  letter-spacing: normal !important;
}
/* ...unless it is a small tracked-out caps LABEL ("STEP 1 OF 3", "MOBILE NUMBER"), which is
   B3's Montserrat 12 caps at .1em. Bold + letter-spacing is how app.js writes one. Not on a
   <button>: a label names a thing and an action is not a thing (part 3 dresses buttons). */
html[data-theme="quiet-deck"] #root [style*="font:700"][style*="Space Mono"][style*="letter-spacing"]:not(button):not(.report-page):not(.report-page *) {
  font-weight: 600 !important;
  letter-spacing: .1em !important;
}
/* ...and unless it is a PASSAGE. app.js writes several of its warnings the way it writes a
   label (bold, tracked, capitals) but at a reading line-height, /1.5 and up — and three lines
   of tracked capitals is a wall on any skin, darker still on this one. A refinement of the row
   above, not a second mapping: same family, the tracking relaxed to the spec's body setting.
   Not at 9 or 9.5px: what app.js sets that small is a string of machine facts, which the rule
   after this one hands to the mono face. */
html[data-theme="quiet-deck"] #root :is(p, div, li)[style*="font:700"][style*="Space Mono"][style*="letter-spacing"]:is([style*="/1.5 "], [style*="/1.6 "], [style*="/1.7 "], [style*="/1.8 "], [style*="/1.9 "]):not([style*="font:700 9px"]):not([style*="font:700 9.5px"]):not(.report-page):not(.report-page *) {
  font-weight: 500 !important;
  font-size: 12.5px !important;
  letter-spacing: .02em !important;
}
/* A tracked bold line at 9 / 9.5px is not a label either: it is the score card's string of
   machine facts (RISK 0.62 · 6 OF 7 CONFLICTS · cs-2.4) and the channel chips. Facts are the
   8x16 grid the device gives them — here JetBrains Mono, B3's monospace role. */
html[data-theme="quiet-deck"] #root :is([style*="font:700 9px"], [style*="font:700 9.5px"], [style*="font:700 8px"], [style*="font:700 8.5px"], [style*="font:700 7.5px"])[style*="Space Mono"]:not(.report-page):not(.report-page *) {
  font-family: var(--qd-mono) !important;
  font-weight: 500 !important;
}
/* The script headline ("Payment confirmed", "Paid!"). Its stroke and shadow are Pink fun's
   brand voice and there is no equivalent here; part 3 settles its leading. */
html[data-theme="quiet-deck"] #root [style*="Lobster Two"]:not(.report-page):not(.report-page *) {
  font-family: var(--qd-font) !important; font-style: normal !important; font-weight: 700 !important;
  -webkit-text-stroke: 0 !important; text-shadow: none !important; color: var(--qd-fg) !important;
}
/* Georgia is the round (i) glyph OUTSIDE a document; inside one it is the document's own face
   and the two exclusions keep this away from it. */
html[data-theme="quiet-deck"] #root [style*="Georgia"]:not(.report-page):not(.report-page *) {
  font-family: var(--qd-font) !important; font-style: normal !important; font-weight: 700 !important;
}
/* Prose set small was legible in a wide monospace and is not in Montserrat. These four lifts
   are Clean hub's numbers to the decimal, reused on purpose: that sheet has been through
   theme_leaks.py at 390px and at 1280px without the page scrolling sideways, and a bigger lift
   is the commonest way a re-skin breaks a phone. */
html[data-theme="quiet-deck"] #root :is([style*="font:400 8.5px"], [style*="font:400 9px"], [style*="font:400 9.5px"]):not(.report-page):not(.report-page *) { font-size: 11.5px !important; }
html[data-theme="quiet-deck"] #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="quiet-deck"] #root :is([style*="font:400 12px"], [style*="font:400 13px"]):not(.report-page):not(.report-page *) { font-size: 13.5px !important; }
/* Justified text on a 390px column opens rivers; a proportional face shows them. */
html[data-theme="quiet-deck"] #root [style*="text-align:justify"]:not(.report-page):not(.report-page *) { text-align: left !important; }

/* ---- shadows and blur ----------------------------------------------------- */
/* Not one shadow survives (B1: flat). "Npx Npx 0 #colour" is Pink fun's brutalist offset in
   all 23 of its sizes and colours; the second rule takes the soft ones with it. Depth here is
   said with three surface steps and a hairline, which is the whole of the design's vocabulary
   for it, and a 48px drop shadow on a #0b0e12 page is invisible in any case. */
html[data-theme="quiet-deck"] #root [style*="px 0 #"]:not(.report-page):not(.report-page *) { box-shadow: none !important; }
html[data-theme="quiet-deck"] #root [style*="box-shadow"]:not(.report-page):not(.report-page *) { box-shadow: none !important; }
html[data-theme="quiet-deck"] #root [style*="text-shadow"]:not(.report-page):not(.report-page *) { text-shadow: none !important; }
html[data-theme="quiet-deck"] #root [style*="-webkit-text-stroke"]:not(.report-page):not(.report-page *) { -webkit-text-stroke: 0 !important; }
html[data-theme="quiet-deck"] #root [style*="backdrop-filter"]:not(.report-page):not(.report-page *) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/* The landing's floating artwork casts a drop-shadow through filter:. The :not() is not
   belt-and-braces — "filter:" is a substring of "backdrop-filter:", and a rule without it once
   hid both modals' contents behind a scrim nothing dismissed. Spelled drop-shadow so the
   paywall's filter:blur(7px), which IS what a sealed list looks like, is left alone. */
html[data-theme="quiet-deck"] #root [style*="filter:drop-shadow"]:not([style*="backdrop-filter"]):not(.report-page):not(.report-page *) { filter: none !important; }

/* ---- corners -------------------------------------------------------------- */
/* B1's four radii, by what the element IS. A border-radius already in the markup is left
   alone: 50% is the dial and the avatar discs, 999px is a pill that was always a pill. */
html[data-theme="quiet-deck"] #root button[style]:not([style*="border-radius"]):not(.report-page):not(.report-page *) { border-radius: var(--qd-r-ctl) !important; }
html[data-theme="quiet-deck"] #root :is(input, select, textarea)[style]:not([type="checkbox"]):not([type="radio"]):not(.report-page):not(.report-page *) { border-radius: var(--qd-r-ctl) !important; }
html[data-theme="quiet-deck"] #root :is(div, a)[style*="border:3px"]:not([style*="border-radius"]):not(.report-page):not(.report-page *) { border-radius: var(--qd-r-card) !important; }
html[data-theme="quiet-deck"] #root :is(div, a):is([style*="border:2px"], [style*="border:5px"], [style*="border:6px"]):not([style*="border-radius"]):not(.report-page):not(.report-page *) { border-radius: var(--qd-r-ctl) !important; }
html[data-theme="quiet-deck"] #root span:is([style*="border:1px"], [style*="border:2px"], [style*="border:3px"]):not([style*="border-radius"]):not(.report-page):not(.report-page *) { border-radius: var(--qd-r-sm) !important; }
html[data-theme="quiet-deck"] #root :is(p, details)[style*="border:"]:not([style*="border-radius"]):not(.report-page):not(.report-page *) { border-radius: var(--qd-r-ctl) !important; }
/* A callout ruled down its left edge KEEPS its 3px rule: it is how app.js says "a note about
   the thing above", and it is also B4.3's selection bar read sideways. */
html[data-theme="quiet-deck"] #root :is([style*="border-left:3px"], [style*="border-left:4px"]):not([style*="border-radius"]):not(.report-page):not(.report-page *) { border-radius: var(--qd-r-ctl) !important; border-left-width: var(--qd-sel-w) !important; }

/* ---- borders -------------------------------------------------------------- */
/* B1 rule 3: hairlines, not borders. Pink fun draws 149 boxes at 3px, 36 at 2px and a handful
   at 5 and 6; every one of them is 1px here. The only things thicker on this skin are the
   input's 2px accent edge (B4.4, part 3) and the 3px selection bar. */
html[data-theme="quiet-deck"] #root :is([style*="border:2px"], [style*="border:3px"], [style*="border:5px"], [style*="border:6px"]):not(.report-page):not(.report-page *) { border-width: 1px !important; }
html[data-theme="quiet-deck"] #root :is([style*="border-bottom:2px"], [style*="border-bottom:3px"], [style*="border-top:2px"], [style*="border-top:3px"]):not(.report-page):not(.report-page *) { border-top-width: 1px !important; border-bottom-width: 1px !important; }
/* The neutral family — navy, cream, every grey app.js reaches for — is one hairline. A box
   that has to read as a BOX (an input, a bordered callout, the overlay card) is given
   --qd-line2 by name in part 3; at 2.5:1 that colour is a line and never a letter.
   "solid transparent" is left alone: it is how app.js reserves the space for a border that is
   not showing, and colouring it would make the agreement row's nudge permanent. */
html[data-theme="quiet-deck"] #root :is([style*="solid #1D3D64"], [style*="dashed #1D3D64"], [style*="solid #F4F1E6"], [style*="solid #8FA0B5"], [style*="dashed #8FA0B5"], [style*="solid #9FB6D4"], [style*="dashed #9FB6D4"], [style*="solid #C8D2DE"], [style*="dashed #C8D2DE"], [style*="solid #3A5273"], [style*="solid #1F4470"], [style*="solid #E3DED0"], [style*="solid #1a1a1a"], [style*="solid #ddd"], [style*="solid #ccc"]):where(:not([style*="solid transparent"])):not(.report-page):not(.report-page *) { border-color: var(--qd-line) !important; }
html[data-theme="quiet-deck"] #root :is([style*="solid #FF2E9A"], [style*="solid #2F6FB2"]):not(.report-page):not(.report-page *) { border-color: var(--qd-acc) !important; }
html[data-theme="quiet-deck"] #root [style*="solid #FF9CCB"]:not(.report-page):not(.report-page *) { border-color: var(--qd-acc-brd) !important; }
html[data-theme="quiet-deck"] #root :is([style*="solid #C0212E"], [style*="dashed #C0212E"]):not(.report-page):not(.report-page *) { border-color: var(--qd-vhigh-brd) !important; }
html[data-theme="quiet-deck"] #root :is([style*="solid #B96A00"], [style*="solid #8A4E00"], [style*="solid #C9A800"], [style*="dashed #B5762F"]):not(.report-page):not(.report-page *) { border-color: var(--qd-warn-brd) !important; }
html[data-theme="quiet-deck"] #root [style*="solid #D6531B"]:not(.report-page):not(.report-page *) { border-color: var(--qd-high-brd) !important; }
html[data-theme="quiet-deck"] #root :is([style*="solid #7C4FD0"], [style*="dashed #7C4FD0"]):not(.report-page):not(.report-page *) { border-color: var(--qd-ai-brd) !important; }
html[data-theme="quiet-deck"] #root :is([style*="solid #1E7A3C"], [style*="solid #1B7A2E"], [style*="solid #4E7A46"], [style*="solid #2F5A2A"]):not(.report-page):not(.report-page *) { border-color: var(--qd-low-brd) !important; }
/* A 3px LEFT rule is the one border that still carries a verdict, so it keeps the band's full
   hue rather than the 42% edge a box gets. */
html[data-theme="quiet-deck"] #root [style*="border-left:3px solid #C0212E"]:not(.report-page):not(.report-page *) { border-left-color: var(--qd-red) !important; }
html[data-theme="quiet-deck"] #root [style*="border-left:3px solid #B96A00"]:not(.report-page):not(.report-page *) { border-left-color: var(--qd-warn) !important; }
html[data-theme="quiet-deck"] #root [style*="border-left:3px solid #7C4FD0"]:not(.report-page):not(.report-page *) { border-left-color: var(--qd-ai) !important; }
html[data-theme="quiet-deck"] #root [style*="border-left:3px solid #FF2E9A"]:not(.report-page):not(.report-page *) { border-left-color: var(--qd-acc) !important; }
html[data-theme="quiet-deck"] #root :is([style*="border-left:3px solid #8FA0B5"], [style*="border-left:3px solid #9FB6D4"]):not(.report-page):not(.report-page *) { border-left-color: var(--qd-line2) !important; }
html[data-theme="quiet-deck"] #root [style*="border-right:3px solid #FF2E9A"]:not(.report-page):not(.report-page *) { border-right-color: var(--qd-acc) !important; }

/* ---- fills ---------------------------------------------------------------- */
/* EVERY FILL RULE RESTATES ITS INK. On a light skin an uncaught text colour came out a little
   wrong; here #1D3D64 on #131920 is 1.2:1, which is nothing at all. The ink rules below come
   after these, so an element that named its own colour still gets the right one. */

/* Cream and white were Pink fun's paper and its cards; the page itself was the blue. */
html[data-theme="quiet-deck"] #root :is([style*="background:#fff"], [style*="background:#F4F1E6"], [style*="background:#EFE8D3"], [style*="background:#FAF7EA"], [style*="background:#FAFAF4"]):not(.report-page):not(.report-page *) { background: var(--qd-surf) !important; color: var(--qd-fg) !important; }
html[data-theme="quiet-deck"] #root :is([style*="background:#f5f5f5"], [style*="background:#f2f2f2"], [style*="background:#fafafa"]):not(.report-page):not(.report-page *) { background: var(--qd-surf2) !important; color: var(--qd-fg) !important; }
html[data-theme="quiet-deck"] #root [style*="background:#3778B5"]:not(.report-page):not(.report-page *) { background: var(--qd-bg) !important; color: var(--qd-fg) !important; }
/* A raised or inset slot: a chip, a meter track, a well. One step up from the card, no edge. */
html[data-theme="quiet-deck"] #root :is([style*="background:#BCD4EA"], [style*="background:#E9EEF5"], [style*="background:#E2E2DA"], [style*="background:#EDEDE7"], [style*="background:#EDF1F6"]):not(.report-page):not(.report-page *) { background: var(--qd-surf2) !important; color: var(--qd-fg) !important; }
/* A navy PANEL is a block of prose that was put on colour to separate it. Here it is the slot
   with B4.3's accent rule down its left edge — the same device the design uses to say "this
   row is the one", read as "this paragraph is the aside". A navy BUTTON is a different thing
   entirely and is caught in part 3.

   :not([style*="border-radius"]) IS LOAD-BEARING, and it was missing. A rule keyed on a
   BACKGROUND COLOUR says nothing about an element's SHAPE, and this one was handing out a
   panel's shape — an 8px radius and a 3px left rule — to everything wearing that navy. The
   clearance dial's well is `background:#16304F;border-radius:50%`, so it was being squared
   off into a rounded rectangle that covered the middle of the score ring and clipped it; the
   ring is the one graphic on the results screen a customer actually reads a number off.
   MEASURED before the fix: computed border-radius 8px against the markup's 50%.
   The colour half of this rule is still right for the well and still applies — the dial's own
   rule in part 6 then takes the background back to --qd-bg. Only the shape was ever wrong.
   Anything that states its own radius now keeps it, which is the same guard every rule in the
   corners block above already carries and for the same reason. */
html[data-theme="quiet-deck"] #root :is([style*="background:#2B5C92"], [style*="background:#1F4470"], [style*="background:#16304F"], [style*="background:#2E5EA5"]):not(.report-page):not(.report-page *) {
  background: var(--qd-surf2) !important; color: var(--qd-fg) !important;
}
html[data-theme="quiet-deck"] #root :is([style*="background:#2B5C92"], [style*="background:#1F4470"], [style*="background:#16304F"], [style*="background:#2E5EA5"]):not([style*="border-radius"]):not(.report-page):not(.report-page *) {
  border-color: transparent !important; border-left: var(--qd-sel-w) solid var(--qd-acc) !important;
  border-radius: var(--qd-r-ctl) !important;
}
/* Solid navy was also a slab: a header strip, a sheet's title bar, the desk's toolbar. */
html[data-theme="quiet-deck"] #root [style*="background:#1D3D64"]:not(.report-page):not(.report-page *) { background: var(--qd-surf) !important; color: var(--qd-fg) !important; }
/* Magenta meant "this one": primary, selected, active. Part 3 splits those three apart. */
html[data-theme="quiet-deck"] #root [style*="background:#FF2E9A"]:not(.report-page):not(.report-page *) { background: var(--qd-acc) !important; color: var(--qd-bg) !important; border-color: var(--qd-acc) !important; }
html[data-theme="quiet-deck"] #root :is([style*="background:#FFF0F7"], [style*="background:#BFE0FF"], [style*="background:#EAF2FA"], [style*="background:#DCEBFA"]):not(.report-page):not(.report-page *) { background: var(--qd-acc-soft) !important; color: var(--qd-fg) !important; border-color: var(--qd-acc-brd) !important; }
/* The soft bands. Each is its hue at 14% over whatever it sits on, so one token works on the
   page and inside a card; --qd-fg measures 11.1 to 14.1 on every one of them. */
html[data-theme="quiet-deck"] #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(--qd-warn-soft) !important; color: var(--qd-fg) !important; border-color: var(--qd-warn-brd) !important; }
html[data-theme="quiet-deck"] #root :is([style*="background:#FDECEC"], [style*="background:#FBE9EA"]):not(.report-page):not(.report-page *) { background: var(--qd-vhigh-soft) !important; color: var(--qd-fg) !important; border-color: var(--qd-vhigh-brd) !important; }
html[data-theme="quiet-deck"] #root :is([style*="background:#DFF5E1"], [style*="background:#EAF6EC"], [style*="background:#E6F0E4"]):not(.report-page):not(.report-page *) { background: var(--qd-low-soft) !important; color: var(--qd-fg) !important; border-color: var(--qd-low-brd) !important; }
html[data-theme="quiet-deck"] #root :is([style*="background:#E3D2FC"], [style*="background:#F3EDFB"]):not(.report-page):not(.report-page *) { background: var(--qd-ai-soft) !important; color: var(--qd-fg) !important; border-color: var(--qd-ai-brd) !important; }
/* The solid bands. Their ink is settled once, in part 3, for all of them at once. */
html[data-theme="quiet-deck"] #root [style*="background:#C0212E"]:not(.report-page):not(.report-page *) { background: var(--qd-vhigh) !important; }
html[data-theme="quiet-deck"] #root :is([style*="background:#D6531B"], [style*="background:#B96A00"]):not(.report-page):not(.report-page *) { background: var(--qd-high) !important; }
html[data-theme="quiet-deck"] #root [style*="background:#E8B21E"]:not(.report-page):not(.report-page *) { background: var(--qd-mod) !important; }
html[data-theme="quiet-deck"] #root [style*="background:#A8BE33"]:not(.report-page):not(.report-page *) { background: var(--qd-lowmod) !important; }
/* #3d7b1d is lowercase in the source and is the one band fill app.js writes that way — the
   COT pill when the figure is at or over 0.5. Spelled as app.js spells it, because an
   attribute-substring match is case-sensitive on the value. */
html[data-theme="quiet-deck"] #root :is([style*="background:#1B7A2E"], [style*="background:#1E7A3C"], [style*="background:#4E7A46"], [style*="background:#2F5A2A"], [style*="background:#3d7b1d"]):not(.report-page):not(.report-page *) { background: var(--qd-low) !important; }
html[data-theme="quiet-deck"] #root :is([style*="background:#4E2E96"], [style*="background:#7C4FD0"]):not(.report-page):not(.report-page *) { background: var(--qd-ai) !important; }
/* The four channel pills say WHICH ALGORITHM found a mark. Labels, never verdicts, so none of
   them borrows a band hue; #f472b6 is the one colour in this palette no verdict uses. */
html[data-theme="quiet-deck"] #root [style*="background:#2F6FB2"]:not(.report-page):not(.report-page *) { background: var(--qd-chan-vis) !important; }
html[data-theme="quiet-deck"] #root [style*="background:#0E7B6C"]:not(.report-page):not(.report-page *) { background: var(--qd-chan-ac) !important; }
/* The "no verdict" chip (FUZZY, NOT SCORED) and the fallback channel. A grey slab with white
   on it was 2.7:1 in Pink fun; here it is not a fill at all, it is the slot, and its text is
   --qd-fg2 at 7.8:1 — which is exactly what "we did not judge this" should look like. */
html[data-theme="quiet-deck"] #root :is([style*="background:#8FA0B5"], [style*="background:#5A739E"]):not(.report-page):not(.report-page *) { background: var(--qd-surf2) !important; color: var(--qd-fg2) !important; }
/* A busy or un-armed control was a washed-out tint of the colour it is about to become. */
html[data-theme="quiet-deck"] #root :is([style*="background:#D7BFC2"], [style*="background:#F6A8CE"], [style*="background:#BFD9C4"]):not(.report-page):not(.report-page *) { background: var(--qd-surf) !important; color: var(--qd-dim) !important; border-color: var(--qd-line) !important; }
/* The desk the paged documents lie on, and its toolbar. The sheets themselves are untouched. */
html[data-theme="quiet-deck"] #root [style*="background:#3F4448"]:not(.report-page):not(.report-page *) { background: var(--qd-bg) !important; }
html[data-theme="quiet-deck"] #root [style*="background:#25282B"]:not(.report-page):not(.report-page *) { background: var(--qd-surf) !important; color: var(--qd-fg) !important; }
/* Overlay scrims, in all six alphas app.js writes them at. */
html[data-theme="quiet-deck"] #root [style*="background:rgba(15,25,40"]:not(.report-page):not(.report-page *) { background: var(--qd-scrim) !important; }
/* The landing's painted sky. B1 has no gradients; the hero is the page. */
html[data-theme="quiet-deck"] #root [style*="background:radial-gradient"]:not(.report-page):not(.report-page *) { background: var(--qd-bg) !important; }

/* ---- inks ----------------------------------------------------------------- */
/* Navy was the ink and cream was the ink ON navy. Whatever that navy became it is dark now,
   so both are the primary text colour. */
html[data-theme="quiet-deck"] #root :is([style*="color:#1D3D64"], [style*="color:#F4F1E6"], [style*="color:#CFE0F2"], [style*="color:#1a1a1a"], [style*="color:#fff"]):not(.report-page):not(.report-page *) { color: var(--qd-fg) !important; }
/* The secondary family. NOT --qd-dim: app.js sets real sentences in these at 10 to 12px, and
   --qd-dim is 4.13:1 on a selected row and 3.60:1 on the toast. --qd-fg2 is 7.8:1 at worst. */
html[data-theme="quiet-deck"] #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:#888"], [style*="color:#999"], [style*="color:#777"], [style*="color:#666"]):not(.report-page):not(.report-page *) { color: var(--qd-fg2) !important; }
html[data-theme="quiet-deck"] #root :is([style*="color:#FF2E9A"], [style*="color:#2F6FB2"], [style*="color:#14497F"], [style*="color:#2456B8"]):not(.report-page):not(.report-page *) { color: var(--qd-acc) !important; }
html[data-theme="quiet-deck"] #root :is([style*="color:#C0212E"], [style*="color:#8E1720"]):not(.report-page):not(.report-page *) { color: var(--qd-red) !important; }
html[data-theme="quiet-deck"] #root :is([style*="color:#8A4E00"], [style*="color:#B96A00"], [style*="color:#C9A800"], [style*="color:#7A6500"], [style*="color:#8A5410"], [style*="color:#5A4020"], [style*="color:#FFD535"], [style*="color:#E8B21E"]):not(.report-page):not(.report-page *) { color: var(--qd-warn) !important; }
html[data-theme="quiet-deck"] #root [style*="color:#D6531B"]:not(.report-page):not(.report-page *) { color: var(--qd-high) !important; }
html[data-theme="quiet-deck"] #root [style*="color:#A8BE33"]:not(.report-page):not(.report-page *) { color: var(--qd-lowmod) !important; }
html[data-theme="quiet-deck"] #root :is([style*="color:#1B7A2E"], [style*="color:#12572A"], [style*="color:#3BB143"], [style*="color:#1E7A3C"], [style*="color:#2F5A2A"]):not(.report-page):not(.report-page *) { color: var(--qd-low) !important; }
html[data-theme="quiet-deck"] #root :is([style*="color:#4E2E96"], [style*="color:#7C4FD0"]):not(.report-page):not(.report-page *) { color: var(--qd-ai) !important; }
html[data-theme="quiet-deck"] #root [style*="color:#0E7B6C"]:not(.report-page):not(.report-page *) { color: var(--qd-chan-ac) !important; }
html[data-theme="quiet-deck"] #root [style*="accent-color"]:not(.report-page):not(.report-page *) { accent-color: var(--qd-acc) !important; }

/* ---------------------------------------------------------------------------
   3. BY CONTEXT — the same colour meaning different things on different elements.
   Each rule adds an element name or a second attribute so it outranks part 2. The two
   exclusions are two classes of specificity, so a rule spelled plainly here would lose to
   the generic remap it was written to beat.
   --------------------------------------------------------------------------- */

/* ---- the one rule this skin cannot get wrong -----------------------------
   DARK TEXT ON EVERY SATURATED FILL. --qd-bg measures 4.94 to 11.92 on every band, tile and
   accent in this palette; white on the same fills is 1.62 to 3.01. Pink fun puts cream on
   amber and navy on yellow, and part 2 has just turned both of those into --qd-fg, which on
   --qd-acc is 2.2:1. Clean hub's sheet says "a solid band fill carries white" — copied here
   that sentence would fail every screen it touched. The trailing [style] is there only to
   outrank part 2's ink rules. #8FA0B5 is deliberately absent: part 2 made it the slot, not a
   fill, and its text is --qd-fg2. */
html[data-theme="quiet-deck"] #root :is([style*="background:#FF2E9A"], [style*="background:#C0212E"], [style*="background:#D6531B"], [style*="background:#B96A00"], [style*="background:#E8B21E"], [style*="background:#A8BE33"], [style*="background:#1B7A2E"], [style*="background:#1E7A3C"], [style*="background:#4E7A46"], [style*="background:#2F5A2A"], [style*="background:#3d7b1d"], [style*="background:#4E2E96"], [style*="background:#7C4FD0"], [style*="background:#2F6FB2"], [style*="background:#0E7B6C"])[style]:not(.report-page):not(.report-page *) {
  color: var(--qd-bg) !important; border-color: transparent !important;
}
/* ...and so does anything inside one that named an ink of its own. A child with a fill of its
   own is not on that ground and keeps what part 2 gave it. */
html[data-theme="quiet-deck"] #root :is([style*="background:#FF2E9A"], [style*="background:#C0212E"], [style*="background:#D6531B"], [style*="background:#B96A00"], [style*="background:#E8B21E"], [style*="background:#A8BE33"], [style*="background:#1B7A2E"], [style*="background:#1E7A3C"], [style*="background:#4E7A46"], [style*="background:#4E2E96"], [style*="background:#7C4FD0"]) [style*="color:"]:not([style*="background"]):not(.report-page):not(.report-page *) { color: var(--qd-bg) !important; }
/* A "not yet" tint carries the dim ink, not the dark one its solid twin has: --qd-dim is
   4.89:1 on --qd-surf, and a control that cannot be pressed should read quieter than one that
   can. */
html[data-theme="quiet-deck"] #root :is([style*="background:#D7BFC2"], [style*="background:#F6A8CE"], [style*="background:#BFD9C4"])[style]:not(.report-page):not(.report-page *) { color: var(--qd-dim) !important; }

/* ---- buttons -------------------------------------------------------------
   PRIMARY: navy or magenta in Pink fun. The accent, with the page colour on it (7.4:1), no
   border and nothing else — the device has no button, and its nearest thing is a keycap: one
   flat fill, one bright glyph, a small radius. */
html[data-theme="quiet-deck"] #root button:is([style*="background:#1D3D64"], [style*="background:#FF2E9A"], [style*="background:#2B5C92"]):not(.report-page):not(.report-page *) {
  background: var(--qd-acc) !important; color: var(--qd-bg) !important;
  border: 0 !important; border-radius: var(--qd-r-ctl) !important;
  font-weight: 600 !important; letter-spacing: .04em !important;
}
html[data-theme="quiet-deck"] #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(--qd-bg) !important; }
html[data-theme="quiet-deck"] #root button:is([style*="background:#1D3D64"], [style*="background:#FF2E9A"], [style*="background:#2B5C92"]):not(.report-page):not(.report-page *):hover { background: var(--qd-sms) !important; }
/* SECONDARY: cream, white or pale blue in Pink fun. The --qd-surf2 slot with a --qd-line2
   edge — visibly pressable, visibly not the accent.

   THE RADIUS IS SPLIT OFF FOR THE REASON THE NAVY PANEL ABOVE IS. These four colours are worn
   by things that are not rectangles: the round "i" buttons (data-act="pairsOpen",
   `width:26px;height:26px;border-radius:50%;background:#fff`) and the term pills
   (data-act="termInfo", `border-radius:999px;background:#F4F1E6`). Keyed on colour alone this
   rule squared all of them to 8px — MEASURED by scripts/qa/theme_shapes.py, which found them
   after the dial. Colour yes, shape only where the markup has not already decided. */
html[data-theme="quiet-deck"] #root button:is([style*="background:#F4F1E6"], [style*="background:#fff"], [style*="background:#BCD4EA"], [style*="background:#EFE8D3"]):not(.report-page):not(.report-page *) {
  background: var(--qd-surf2) !important; color: var(--qd-fg) !important;
  border: var(--qd-brd) !important; font-weight: 600 !important;
}
html[data-theme="quiet-deck"] #root button:is([style*="background:#F4F1E6"], [style*="background:#fff"], [style*="background:#BCD4EA"], [style*="background:#EFE8D3"]):not([style*="border-radius"]):not(.report-page):not(.report-page *) {
  border-radius: var(--qd-r-ctl) !important;
}
html[data-theme="quiet-deck"] #root button:is([style*="background:#F4F1E6"], [style*="background:#fff"], [style*="background:#BCD4EA"], [style*="background:#EFE8D3"]):not(.report-page):not(.report-page *):hover { border-color: var(--qd-acc) !important; }
/* QUIET: the text buttons ("USE A DIFFERENT NUMBER", "SKIP FOR NOW"). No box, the accent. */
html[data-theme="quiet-deck"] #root button[style*="background:transparent;border:none"]:not(.report-page):not(.report-page *) {
  background: none !important; border: 0 !important; color: var(--qd-acc) !important; font-weight: 600 !important;
}
html[data-theme="quiet-deck"] #root button[style*="background:transparent;border:none"]:not(.report-page):not(.report-page *):hover { color: var(--qd-fg) !important; }
/* An outlined button (see-through behind a 2px rule — the eight STOP THIS SEARCH / SKIP TO
   RESULTS / CANCEL shapes) is the secondary button without the fill. */
html[data-theme="quiet-deck"] #root button[style*="background:transparent;border:2px"]:not(.report-page):not(.report-page *) {
  background: none !important; color: var(--qd-fg) !important; border: var(--qd-brd) !important; font-weight: 600 !important;
}
/* A button's label is the UI face, not the mono grid: mono is for facts and an action is not
   one. The authored capitals stay — lower-casing them from CSS would also lower-case CIPO and
   the customer's own mark, and a skin may not change a word. */
html[data-theme="quiet-deck"] #root button[style*="Space Mono"]:not(.report-page):not(.report-page *) { font-family: var(--qd-font) !important; font-weight: 600 !important; letter-spacing: .06em !important; }
html[data-theme="quiet-deck"] #root button[style*="Archivo Black"]:not(.report-page):not(.report-page *) { font-weight: 600 !important; letter-spacing: .02em !important; }
/* ...except the big multi-line choice cards, which are buttons only so they can be pressed. */
html[data-theme="quiet-deck"] #root button[data-act="pickPlan"] [style*="Archivo Black"]:not(.report-page):not(.report-page *) { letter-spacing: -.01em !important; }
/* NOT AVAILABLE. cursor:not-allowed is how app.js writes one, and it is what both WCAG and
   theme_leaks.py read as disabled. */
html[data-theme="quiet-deck"] #root :is(button, div)[style*="cursor:not-allowed"]:not(.report-page):not(.report-page *) {
  background: var(--qd-surf) !important; color: var(--qd-dim) !important; border: 1px dashed var(--qd-line) !important;
}
html[data-theme="quiet-deck"] #root button[style*="cursor:not-allowed"]:not(.report-page):not(.report-page *):hover { background: var(--qd-surf) !important; border-color: var(--qd-line) !important; }
/* The round (i) buttons: Georgia italic on a magenta ring in Pink fun. A small outlined disc. */
html[data-theme="quiet-deck"] #root button[style*="Georgia"]:not(.report-page):not(.report-page *) {
  background: var(--qd-surf2) !important; color: var(--qd-acc) !important; border: var(--qd-brd) !important; letter-spacing: 0 !important;
}
html[data-theme="quiet-deck"] #root button[style*="Georgia"]:not(.report-page):not(.report-page *):hover { color: var(--qd-fg) !important; border-color: var(--qd-acc) !important; }

/* ---- fields --------------------------------------------------------------
   B4.4 verbatim: the slot, a 2px accent edge, the field radius. The 2px is one of only two
   things on this skin thicker than a hairline, and it is deliberate — on a dark panel a field
   that is only a fill is indistinguishable from the card it sits in. */
html[data-theme="quiet-deck"] #root input[style]:not([type="checkbox"]):not([type="radio"]):not(.report-page):not(.report-page *),
html[data-theme="quiet-deck"] #root :is(select, textarea)[style]:not(.report-page):not(.report-page *) {
  background: var(--qd-surf2) !important; color: var(--qd-fg) !important;
  border: 2px solid var(--qd-acc) !important; border-radius: var(--qd-r-ctl) !important;
  box-shadow: none !important; font-family: var(--qd-font) !important; font-weight: 500 !important; letter-spacing: 0 !important;
}
/* --qd-fg2, not the --qd-dim the semantic map asks for. A field is --qd-surf2 and --qd-dim is
   4.13 there, under AA for text this size; §4.2's flat rule ("never small body copy") is the one
   the spec itself marks as unbreakable, so it outranks its own table row. --qd-fg2 is 7.84 and
   still reads plainly fainter than the typed value at --qd-fg (12.70). admin-quiet-deck.css made
   the same call independently; the two sheets have to agree or one page contradicts the other.
   Nothing catches this automatically — theme_leaks.py does not measure ::placeholder. */
html[data-theme="quiet-deck"] #root input[style]:not(.report-page):not(.report-page *)::placeholder { color: var(--qd-fg2); opacity: 1; font-weight: 400; }
html[data-theme="quiet-deck"] #root input[type="checkbox"]:not(.report-page):not(.report-page *) { accent-color: var(--qd-acc) !important; }
/* The code and the mark the customer typed are machine facts: the 8x16 grid, B3's mono role. */
html[data-theme="quiet-deck"] #root :is(input#in-code, input#in-brand, input#in-variant, input#in-wipe):not(.report-page):not(.report-page *) { font-family: var(--qd-mono) !important; }
html[data-theme="quiet-deck"] #root input#in-brand:not(.report-page):not(.report-page *) { font-weight: 500 !important; }

/* Rules drawn as a 3px navy bar ("— OR PHONE —") are hairlines like every other separator. */
html[data-theme="quiet-deck"] #root div[style*="height:3px"][style*="background:#1D3D64"]:not(.report-page):not(.report-page *) { height: 1px !important; background: var(--qd-line) !important; }

/* The script headline. Part 2 took the face, the stroke and the shadow; this settles the rest. */
html[data-theme="quiet-deck"] #root p[style*="Lobster Two"]:not(.report-page):not(.report-page *) { color: var(--qd-fg) !important; letter-spacing: -.015em !important; line-height: 1.15 !important; }

/* Where Stripe mounts its iframe. The form inside is Stripe's and is light; the hole it sits
   in is a card like any other, so the form does not look pasted onto the page. */
html[data-theme="quiet-deck"] #root #stripe-mount { background: var(--qd-surf); border: var(--qd-hair); border-radius: var(--qd-r-card); overflow: hidden; }

/* ---- selection, the design's one unmistakable gesture --------------------
   B4.3's row_sel + row_acc: the chosen row is the slot with a 3px accent bar down its left
   edge. This replaces "fill it magenta" everywhere magenta meant SELECTED rather than PRIMARY
   ACTION — several lines of prose on a solid #4da3ff is a poster, which is the mistake Clean
   hub's sheet records at pickPlan. The unchosen state carries the same 3px transparent, so
   choosing one does not shift the text of every other by three pixels. */
html[data-theme="quiet-deck"] #root :is([data-act="gsToggle"], [data-act="vgsToggle"], [data-act="pickPlan"], [data-act="toggleClass"])[style]:not(.report-page):not(.report-page *) {
  border: 0 !important; border-left: var(--qd-sel-w) solid transparent !important;
  border-radius: var(--qd-r-row) !important; color: var(--qd-fg) !important;
}
html[data-theme="quiet-deck"] #root :is([data-act="gsToggle"], [data-act="vgsToggle"], [data-act="pickPlan"], [data-act="toggleClass"])[style*="background:#FF2E9A"]:not(.report-page):not(.report-page *) {
  background: var(--qd-surf2) !important; color: var(--qd-fg) !important; border-left-color: var(--qd-acc) !important;
}
html[data-theme="quiet-deck"] #root :is([data-act="gsToggle"], [data-act="vgsToggle"], [data-act="pickPlan"], [data-act="toggleClass"])[style*="background:#FF2E9A"] [style*="color:"]:not([style*="border-radius:999px"]):not([style*="background"]):not(.report-page):not(.report-page *) { color: var(--qd-fg) !important; }
html[data-theme="quiet-deck"] #root :is([data-act="gsToggle"], [data-act="vgsToggle"]):not(.report-page):not(.report-page *):hover { background: var(--qd-surf2) !important; }
html[data-theme="quiet-deck"] #root button[data-act="pickPlan"][style]:not(.report-page):not(.report-page *) { background: var(--qd-surf) !important; padding: 18px !important; }
html[data-theme="quiet-deck"] #root button[data-act="pickPlan"][style*="background:#FF2E9A"]:not(.report-page):not(.report-page *) { background: var(--qd-surf2) !important; }
/* The urgency pair and the variant chips are the same gesture at chip size. */
html[data-theme="quiet-deck"] #root button[data-act="pickUrgency"][style*="background:#1D3D64"]:not(.report-page):not(.report-page *) { background: var(--qd-acc) !important; color: var(--qd-bg) !important; }
html[data-theme="quiet-deck"] #root button[data-act="loadVariant"][style]:not(.report-page):not(.report-page *) { border: 0 !important; border-left: var(--qd-sel-w) solid transparent !important; border-radius: var(--qd-r-row) !important; background: var(--qd-surf) !important; color: var(--qd-fg) !important; }
html[data-theme="quiet-deck"] #root button[data-act="loadVariant"][style*="background:#FF2E9A"]:not(.report-page):not(.report-page *) { background: var(--qd-surf2) !important; border-left-color: var(--qd-acc) !important; }
/* "This is the current one" was a 3px magenta outline; here it is the focus ring's quieter twin. */
html[data-theme="quiet-deck"] #root [style*="outline:3px solid #FF2E9A"]:not(.report-page):not(.report-page *) { outline: 2px solid var(--qd-acc) !important; outline-offset: -2px !important; }

/* ---- chips, pills and the small print ------------------------------------- */
/* The example / recent chips were square blue tags. */
html[data-theme="quiet-deck"] #root button:is([data-act="markExample"], [data-act="gsExample"]):not(.report-page):not(.report-page *) {
  background: var(--qd-surf2) !important; color: var(--qd-fg) !important; border: 0 !important;
  border-radius: var(--qd-r-pill) !important; padding: 8px 13px !important; font-weight: 500 !important; letter-spacing: 0 !important;
}
html[data-theme="quiet-deck"] #root button:is([data-act="markExample"], [data-act="gsExample"]):not(.report-page):not(.report-page *):hover { color: var(--qd-acc) !important; }
/* The small square × . */
html[data-theme="quiet-deck"] #root button:is([data-act="gsRemove"], [data-act="vgsRemove"]):not(.report-page):not(.report-page *) { background: none !important; border: var(--qd-hair) !important; border-radius: var(--qd-r-pill) !important; color: var(--qd-fg2) !important; }
html[data-theme="quiet-deck"] #root button:is([data-act="gsRemove"], [data-act="vgsRemove"]):not(.report-page):not(.report-page *):hover { color: var(--qd-red) !important; border-color: var(--qd-vhigh-brd) !important; }
/* THE ONE COLOUR THIS SHEET CANNOT KNOW. The rescore's COT pill takes its fill from the
   server (metricPill with p.cotColor) and puts white on it, so no hex rule can reach it and
   no skin can say whether white on it reads. Pink fun is in the same position and accepts it;
   this skin cannot, because the pill then sits on an unknown fill in the middle of a dark
   card. It is given a ground this sheet owns — the slot at 12.7:1 — and the figure it prints
   is the signal, which is text and is not touched. The static twin (#3d7b1d, above) keeps its
   green because that one IS known. */
html[data-theme="quiet-deck"] #root span[data-arg="ev:cot"][style*="color:#fff"]:not([style*="background:#3d7b1d"]):not(.report-page):not(.report-page *) {
  background: var(--qd-surf2) !important; color: var(--qd-fg) !important; border-color: var(--qd-line) !important;
}
/* An outlined pill at 8 to 9.5px is mostly border once the border is a hairline; the figures
   on a conflict card need the point back. */
html[data-theme="quiet-deck"] #root span[style*="border-radius:999px"]:is([style*="font:700 8px"], [style*="font:700 8.5px"], [style*="font:700 9px"], [style*="font:700 9.5px"]):not(.report-page):not(.report-page *) { font-size: 10px !important; }
/* The FIND button and its scope caret were one slab split by a hairline. */
html[data-theme="quiet-deck"] #root #gs-find-wrap:not(.report-page):not(.report-page *) { gap: 6px; }
html[data-theme="quiet-deck"] #root #gs-find-wrap > button[data-act="gsMenuToggle"]:not(.report-page):not(.report-page *) { border: 0 !important; padding: 14px 11px !important; }
html[data-theme="quiet-deck"] #root button[data-act="gsMenuToggle"][style*="border-radius:999px"]:not(.report-page):not(.report-page *) { background: var(--qd-surf2) !important; border: 0 !important; color: var(--qd-fg) !important; }
/* THE FOUR CHANNEL CHIPS say which algorithm found a mark. Three of them name a colour of
   their own and the fill and ink rules carry those over (VISUAL to --qd-chan-vis, PHONETIC to
   the AI purple, ACOUSTIC to --qd-chan-ac, the one hue no verdict in this product uses). The
   fourth is drawn in Pink fun's page ink, so the generic rule hands it --qd-fg and TEXT-WEIGHT
   ends up the loudest of the four — the opposite of what it is. It is the default channel and
   the plain one. */
html[data-theme="quiet-deck"] #root span[data-arg="algo:textWeight"][style]:not(.report-page):not(.report-page *) { color: var(--qd-chan-text) !important; }
/* The class pill (Good-25 / Serv-42). Goods and services were told apart by blue and purple;
   the tag already says which it is in words, so both are the slot. */
html[data-theme="quiet-deck"] #root button[data-act="gsClassInfo"]:not(.report-page):not(.report-page *) { background: var(--qd-surf) !important; color: var(--qd-fg2) !important; border: var(--qd-hair) !important; }

/* ---- the wizard ----------------------------------------------------------- */
/* The three progress bars: B4.2's meter — the accent on the slot, no frame. */
html[data-theme="quiet-deck"] #root div[style*="height:8px"][style*="border:2px solid #1D3D64"]:not(.report-page):not(.report-page *) { height: 6px !important; border: 0 !important; border-radius: var(--qd-r-pill) !important; background: var(--qd-surf2) !important; }
html[data-theme="quiet-deck"] #root div[style*="height:8px"][style*="background:#F4F1E6"]:not(.report-page):not(.report-page *) { background: var(--qd-acc) !important; }
/* The agreement row's red nudge: a hairline is too quiet for a refusal, so it keeps the band. */
html[data-theme="quiet-deck"] #root #agree-row[style*="#C0212E"]:not(.report-page):not(.report-page *) { border-color: var(--qd-red) !important; }
/* THE ERRBAR. A one-line refusal on the sign-in and wizard screens ("NAME YOUR MARK FIRST", a
   rejected code) is the soft band with its own hue on it — 5.50:1 on the page, 4.92:1 inside a
   card. Scoped to those two screens by their data-ui hooks, because the same bold red capitals
   elsewhere are figures inside cards and not refusals. */
html[data-theme="quiet-deck"] #root :is([data-ui="login"], [data-ui="wizard"]) p[style*="font:700"][style*="color:#C0212E"]:not(.report-page):not(.report-page *) {
  background: var(--qd-vhigh-soft) !important; border: 1px solid var(--qd-vhigh-brd) !important;
  border-radius: var(--qd-r-ctl) !important; color: var(--qd-red) !important;
  padding: 9px 12px !important; letter-spacing: .04em !important;
}

/* ---- overlays ------------------------------------------------------------
   The card in the middle of a scrim. B4.5: the device's banner card floats on a 1px coloured
   border and nothing else, and the scrim does the separating — which is just as well, because
   a 48px drop shadow under a card on a #0b0e12 page is invisible. */
html[data-theme="quiet-deck"] #root [style*="position:fixed"][style*="inset:0"] > [data-act="noop"]:not(.report-page):not(.report-page *) {
  background: var(--qd-surf) !important; border: var(--qd-brd) !important;
  border-radius: var(--qd-r-card) !important; box-shadow: none !important;
}
/* A bottom sheet (the FIND scope menu) is the same card, docked: rounded at the top only, its
   rows ruled off at a hairline, the current one taking the selection bar. */
html[data-theme="quiet-deck"] #root [style*="position:fixed"][style*="align-items:flex-end"] > [data-act="noop"]:not(.report-page):not(.report-page *) {
  border-radius: var(--qd-r-card) var(--qd-r-card) 0 0 !important; border-bottom: 0 !important; padding: 6px 10px 14px !important;
}
/* --qd-fg2 and not --qd-dim for the sheet's section labels: they are at reading size, and the
   rule in part 1 is flat on purpose — --qd-dim passes on this card at 4.89 and fails at 4.13
   on the slot the chosen row below it becomes, and a label that moves between the two is
   exactly the case the flat rule exists to remove. */
html[data-theme="quiet-deck"] #root [style*="align-items:flex-end"] > [data-act="noop"] > p:not(.report-page):not(.report-page *) { background: none !important; border: 0 !important; color: var(--qd-fg2) !important; }
html[data-theme="quiet-deck"] #root [style*="align-items:flex-end"] > [data-act="noop"] > button[data-act="gsFind"]:not(.report-page):not(.report-page *) {
  background: none !important; color: var(--qd-fg) !important;
  border: 0 !important; border-left: var(--qd-sel-w) solid transparent !important; border-bottom: var(--qd-hair) !important;
  border-radius: var(--qd-r-row) !important;
}
html[data-theme="quiet-deck"] #root [style*="align-items:flex-end"] > [data-act="noop"] > button[data-act="gsFind"][style*="outline:3px"]:not(.report-page):not(.report-page *) { background: var(--qd-surf2) !important; border-left-color: var(--qd-acc) !important; outline: none !important; }
/* THE PAYWALL CARD over a blurred conflict list was a magenta slab with a blue button in it.
   Left to the generic rules that is three lines of prose on solid #4da3ff with a pale button
   on top — the poster again, and the action the quietest thing on it. Here it is the overlay
   card, and the button is the one accent on it. */
html[data-theme="quiet-deck"] #root [style*="position:absolute"][style*="inset:0"] > div[style*="background:#FF2E9A"]:not(.report-page):not(.report-page *) {
  background: var(--qd-surf) !important; color: var(--qd-fg) !important;
  border: var(--qd-brd) !important; border-radius: var(--qd-r-card) !important; box-shadow: none !important; padding: 22px !important;
}
html[data-theme="quiet-deck"] #root [style*="position:absolute"][style*="inset:0"] > div[style*="background:#FF2E9A"] [style*="color:"]:not(.report-page):not(.report-page *) { color: var(--qd-fg) !important; }
html[data-theme="quiet-deck"] #root [style*="position:absolute"][style*="inset:0"] > div[style*="background:#FF2E9A"] button[style]:not(.report-page):not(.report-page *) { background: var(--qd-acc) !important; color: var(--qd-bg) !important; }

/* ---------------------------------------------------------------------------
   4. NAMED THINGS — by class or id, because a script rewrites their style attribute (THE ONE
   TRAP in the header: the moment anything touches el.style the browser re-serialises the whole
   attribute and every [style*=] rule above stops matching) or because they live in
   css/style.css and index.html, which have no inline styles at all.
   --------------------------------------------------------------------------- */

/* THE SHELL keeps Pink fun's 3px side borders, invisibly. Clean hub's rule and Clean hub's
   reason, measured there: they are 6px of the column's width and the pack documents re-wrap to
   whatever column they are given, so removing them laid every .report-page out 6px wider and
   24px shorter under the skin — a dated legal record paginated by whichever skin the buyer
   happened to be wearing, which is the one thing a skin may never do. The shell is the SCREEN,
   not a card, so it is the page colour; the cards inside it are what step up.

   Spelled with the element name, [style] and both exclusions, and not as a bare .shell:
   Pink fun writes those side borders as `3px solid #FF2E9A` and that fill as `#F4F1E6`, so
   part 2's two generic rules (four classes each) outrank a bare class selector (two) and win
   — which painted a 3px accent stripe down both edges of every screen and made the column a
   card instead of the screen. It was visible in the first screenshot taken of this skin. */
html[data-theme="quiet-deck"] #root div.shell[style]:not(.report-page):not(.report-page *) {
  background: var(--qd-bg) !important;
  border-left: 3px solid transparent !important;
  border-right: 3px solid transparent !important;
}
/* THE SHELL HEADER is B1's second zone: the card colour, ruled off underneath, nothing else.
   It has no data-ui hook to catch it by — only the Clean hub and Ascii branches carry
   data-ui="topbar", and under this skin app.js draws Pink fun's header, which is an anonymous
   sticky <div> with a navy fill. So it is found by what it is: the first sticky navy bar
   inside .shell. Without this rule part 2's navy-PANEL remap reaches it instead and gives a
   full-bleed bar a card radius and a 3px accent rule down its left edge, which is right for a
   paragraph and wrong for a bar — and was visible in the first screenshot taken of this skin. */
html[data-theme="quiet-deck"] #root .shell > div[style*="position:sticky"][style*="background:#2B5C92"]:not(.report-page):not(.report-page *) {
  background: var(--qd-surf) !important; border: 0 !important; border-bottom: var(--qd-hair) !important; border-radius: 0 !important;
}
html[data-theme="quiet-deck"] #root .shell > div[style*="position:sticky"] > span[style]:not(.report-page):not(.report-page *) { color: var(--qd-fg) !important; }
/* The context strip under it is the second hairline-separated zone, not a cream band. */
html[data-theme="quiet-deck"] #root [data-ui="contextbar"][style]:not(.report-page):not(.report-page *) {
  background: var(--qd-bg) !important; border: 0 !important; border-bottom: var(--qd-hair) !important; border-radius: 0 !important;
}

/* THE BOTTOM NAV IS THE HINT BAR. B1's fourth zone and the single most recognisable thing in
   this design: a full-bleed amber strip pinned to the bottom naming the keys this screen
   handles, its labels in the ink the device uses on it (#2b2100 on #f5c542 = 9.81:1, and the
   same two values swapped for a keycap, also 9.81:1). Composition is a skin's to change; the
   WORDS are app.js's and not one of them moves. app.js has no skinIs('quiet-deck') branch for
   the shell — the landing is its only one — so these rules dress Pink fun's own .appnav markup
   and the bar is the hint bar on every screen of the app. Part 5 holds the same strip as a
   component (.qd-hintbar), which is what the landing uses and what a shell branch would. */
html[data-theme="quiet-deck"] #root .appnav[style]:not(.report-page):not(.report-page *) {
  background: var(--qd-hint) !important; border: 0 !important; border-top: 1px solid var(--qd-hint-fg) !important;
  gap: 0 !important;
}
/* The keycap radius and not 0: a cell with no radius at all is the one shape this design does
   not contain, and theme_leaks.py's `square` rule reports every square control on every screen
   (690 of them, which is how this line came to be measured). On a cell with no fill it costs
   nothing to look at and makes the chosen one, which does have a fill, the same shape. */
html[data-theme="quiet-deck"] #root .appnav > :is(button, a)[style]:not(.report-page):not(.report-page *) {
  background: none !important; color: var(--qd-hint-fg) !important;
  border: 0 !important; border-radius: var(--qd-r-sm) !important;
  font-family: var(--qd-font) !important; font-weight: 600 !important; letter-spacing: .1em !important;
}
/* THE TAB YOU ARE ON IS THE KEYCAP: the two colours the other way round, inset in the bar.

   CONCENTRIC CORNERS, which is the whole of this rule's shape. The bar is a floating strip
   with a 14px radius, and the keycap used to be inset 3px with a 4px radius of its own. That
   clears the corner by arithmetic — a child inset m inside a corner of radius R escapes the
   curve unless m >= (R - r)(1 - 1/sqrt2), which here is 2.9px against the 3px it had — and
   clearing by a tenth of a pixel is not the same as looking right. The amber gap was a steady
   3px along each straight edge and tapered to nothing at the corner, so the dark cap appeared
   to graze the rounded end of the bar. That is what the owner photographed, on ME and on NEW,
   which are the two cells that have a corner.

   The fix is not a bigger nudge, it is the rule that makes nudging unnecessary: an inner
   radius of OUTER MINUS INSET leaves two curves that are parallel, so the amber gap is the
   same width along the straights and all the way round the bend. 14 - 5 = 9. Written as a
   calc off the same token so that moving --qd-r-card cannot quietly break the nesting again.

   Inset as a MARGIN and not as padding on the bar: the bar is position:fixed with nothing
   reserving space under it, so padding would make it taller and push the strip up over
   content that nothing is offsetting. The margin leaves the bar exactly the height it was. */
html[data-theme="quiet-deck"] #root .appnav > button[style*="background:#FF2E9A"]:not(.report-page):not(.report-page *) {
  background: var(--qd-hint-fg) !important; color: var(--qd-hint) !important;
  border-radius: calc(var(--qd-r-card) - 5px) !important;
  margin: 5px !important; padding: 11px 4px !important;
}
/* "No active search" was a grey label. MEASURED: the hint ink at .55 composites to 3.14:1 on
   the bar and fails AA; at .72 it is 4.82:1 and passes, and still reads as the quieter of the
   two. The figure is why the number is .72 and not a guess. */
html[data-theme="quiet-deck"] #root .appnav > button[style*="color:#9FB0C4"]:not(.report-page):not(.report-page *) { opacity: .72 !important; }

/* THE LIVE RING. style.css rotates a conic gradient behind a control that is being pointed at;
   the five --ring-* tokens in part 1 put that gradient on this ramp, so there is nothing to
   override here but the wrapper's own shape. --ring-rest is forced because app.js writes it
   inline as magenta or grey on the drawer toggle. */
html[data-theme="quiet-deck"] #root .live-ring { padding: 2px; border-radius: 10px; box-shadow: none !important; --ring-rest: var(--qd-line) !important; }
html[data-theme="quiet-deck"] #root .live-ring > button { border-radius: var(--qd-r-ctl) !important; }
/* Spelled with [style] and both exclusions so it outranks part 3's button rules, which would
   otherwise draw a 1px edge INSIDE the 2px frame. */
html[data-theme="quiet-deck"] #root .live-ring > button[style]:not(.report-page):not(.report-page *),
html[data-theme="quiet-deck"] #root .live-ring > button[style]:not(.report-page):not(.report-page *):hover { border: 0 !important; }
html[data-theme="quiet-deck"] #root .live-ring > button:disabled { opacity: .55; }
/* TRY A NEW NAME is yellow in Pink fun, which part 2 reads as a caution. It is not one: it is
   the next thing to press and the ring around it already says so. */
html[data-theme="quiet-deck"] #root .live-ring > button[data-act="variantToggle"] { background: var(--qd-surf2) !important; color: var(--qd-fg) !important; border: 0 !important; }

html[data-theme="quiet-deck"] #root #gs-inline-count { background: var(--qd-surf2) !important; color: var(--qd-fg) !important; border: 0 !important; font-family: var(--qd-mono) !important; font-weight: 500 !important; }
html[data-theme="quiet-deck"] #root #gs-inline-count > span { color: inherit !important; }
html[data-theme="quiet-deck"] #root #gs-inline-count:disabled { color: var(--qd-dim) !important; }
/* The floating count is the nearest thing this product has to B4.6's toast, so it is one. */
html[data-theme="quiet-deck"] #root #gs-float {
  background: var(--qd-toast) !important; color: var(--qd-fg) !important; border: var(--qd-hair) !important;
  border-radius: var(--qd-r-pill) !important; box-shadow: none !important;
  font-family: var(--qd-font) !important; font-weight: 600 !important;
}
/* paintDocButtons() rewrites each GET button's style, so these two are dressed by action and id. */
html[data-theme="quiet-deck"] #root button[data-act="docOpen"] { background: var(--qd-acc) !important; color: var(--qd-bg) !important; border: 0 !important; border-radius: var(--qd-r-ctl) !important; font-family: var(--qd-font) !important; font-weight: 600 !important; letter-spacing: .04em !important; box-shadow: none !important; }
html[data-theme="quiet-deck"] #root button[data-act="docOpen"]:disabled { background: var(--qd-surf2) !important; color: var(--qd-dim) !important; }
html[data-theme="quiet-deck"] #root #docview-download {
  background: var(--qd-acc) !important; color: var(--qd-bg) !important; border: 0 !important;
  border-radius: var(--qd-r-ctl) !important; font-family: var(--qd-font) !important; font-weight: 600 !important; letter-spacing: .04em !important; box-shadow: none !important;
}
/* The viewer's toolbar sits on the desk now, not on charcoal. */
html[data-theme="quiet-deck"] #root .doc-view button[data-act="docViewBack"] { background: var(--qd-surf2) !important; color: var(--qd-fg) !important; border: var(--qd-hair) !important; }
/* "This is still here, it just does not count." Pink fun's veil LIGHTENS the card; on a dark
   ground lightening reads as emphasis, so here it fades toward the page instead. */
html[data-theme="quiet-deck"] #root .veiled > .veil { background: var(--qd-veil); }
html[data-theme="quiet-deck"] #root .docjob-bar { background: var(--qd-acc); border-radius: var(--qd-r-pill); }

/* Spinners. Part 2 thinned every border to 1px, which is right for a card and erases a ring
   whose whole drawing IS its border. B4.2: a 3px arc, the track in the hairline, the indicator
   in the accent. */
html[data-theme="quiet-deck"] #root [style*="animation:spin"]:not(.report-page):not(.report-page *) {
  border-width: 3px !important; border-style: solid !important;
  border-color: var(--qd-line) !important; border-top-color: var(--qd-acc) !important;
}
/* The simulated scan's ring is dashed so it cannot be mistaken for the real one. It stays dashed. */
html[data-theme="quiet-deck"] #root [style*="animation:spin"][style*="dashed"]:not(.report-page):not(.report-page *) { border-style: dashed !important; border-color: var(--qd-line2) !important; border-top-color: var(--qd-acc) !important; }
html[data-theme="quiet-deck"] #root div.docjob-spin:not(.report-page):not(.report-page *) {
  border-width: 3px !important; border-style: solid !important;
  border-color: var(--qd-line) !important; border-top-color: var(--qd-acc) !important;
}

/* The statement that flies into the drawer when it is picked (flyToBasket). It is appended to
   <body>, so nothing under #root reaches it. Dressed as what it is a copy of: a picked row. */
html[data-theme="quiet-deck"] .gs-ghost {
  /* Lit in the accent, not dressed as a row: a row-coloured copy crossing a column of rows
     is camouflaged, and the flight was there but nobody could see it. */
  background: var(--qd-acc) !important; color: var(--qd-bg, #0b0e12) !important;
  border: 0 !important; border-radius: var(--qd-r-row) !important;
  box-shadow: 0 0 0 1px var(--qd-acc), 0 8px 28px rgba(0, 0, 0, .55), 0 0 22px var(--qd-acc) !important;
  font-family: var(--qd-font) !important; font-weight: 600 !important;
}

/* THE "NEWLY RELEASED" RIBBON, outside #root — a notice and not a link (index.html makes it a
   plain div). Pink fun pins it obliquely across the top-right corner, which on this skin is
   where the header keeps the account button. So, as under the other two skins, it is not
   pinned at all: it is the first thing in the page, a flat 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 padding sits on the TRACK inside it — padding on the ribbon itself
   would survive height:0 as a stub that then vanishes with a jump. */
html[data-theme="quiet-deck"] .launch-ribbon {
  position: static; display: block; transform: none; width: auto; top: auto; right: auto;
  padding: 0; background: var(--qd-hint); color: var(--qd-hint-fg) !important; border: 0; box-shadow: none;
  font: 600 10.5px/1 var(--qd-font); letter-spacing: .12em;
  /* 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="quiet-deck"] .launch-ribbon .ribbon-track { padding: 8px 0; }

/* ---- the credit pieces ----------------------------------------------------
   A credit held on step 3 is said out loud in pieces app.js marks data-credit="..." — an
   attribute that paints nothing, so Pink fun is unmoved and every skin dresses the same twelve
   names. theme-verify.js fails on a thirteenth and on an eleventh alike. */
html[data-theme="quiet-deck"] #root [data-credit="held"]:not(.report-page):not(.report-page *) { background: var(--qd-acc-soft) !important; border: 1px solid var(--qd-acc-brd) !important; border-radius: var(--qd-r-ctl) !important; box-shadow: none !important; padding: 14px 16px !important; }
html[data-theme="quiet-deck"] #root [data-credit="held-line"]:not(.report-page):not(.report-page *) { font: 600 14px/1.55 var(--qd-font) !important; letter-spacing: 0 !important; color: var(--qd-fg) !important; }
html[data-theme="quiet-deck"] #root [data-credit="declined"]:not(.report-page):not(.report-page *) { font: 400 13px/1.6 var(--qd-font) !important; color: var(--qd-fg2) !important; }
html[data-theme="quiet-deck"] #root button[data-act="pickPlan"][style] p[data-credit="use"][style*="color:"][style]:not(.report-page):not(.report-page *) { font: 600 12.5px/1.45 var(--qd-font) !important; letter-spacing: 0 !important; padding: 7px 11px !important; border: 1px solid var(--qd-low-brd) !important; border-radius: var(--qd-r-sm) !important; background: var(--qd-low-soft) !important; color: var(--qd-low) !important; }
html[data-theme="quiet-deck"] #root button[data-act="pickPlan"][style] p[data-credit="covered"][style]:not(.report-page):not(.report-page *) { font: 600 13px/1.5 var(--qd-font) !important; color: var(--qd-low) !important; }
/* --qd-dim would be the obvious colour for these two and it is 4.13:1 on the slot a chosen
   plan card becomes. --qd-fg2 is 7.84:1 on the same ground and still reads as secondary. */
html[data-theme="quiet-deck"] #root :is([data-credit="na"], [data-credit="speed"]):not(.report-page):not(.report-page *) { font: 500 12.5px/1.5 var(--qd-font) !important; letter-spacing: 0 !important; color: var(--qd-fg2) !important; }
html[data-theme="quiet-deck"] #root button:is([data-credit="keep"], [data-act="creditUseAfterAll"])[style]:not(.report-page):not(.report-page *) { font: 600 13px/1.6 var(--qd-font) !important; color: var(--qd-acc) !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; }
html[data-theme="quiet-deck"] #root button:is([data-credit="keep"], [data-act="creditUseAfterAll"])[style]:not(.report-page):not(.report-page *):hover { color: var(--qd-fg) !important; }
html[data-theme="quiet-deck"] #root button[data-credit="urgency-set"][style]:not(.report-page):not(.report-page *) { line-height: 1.35 !important; }
html[data-theme="quiet-deck"] #root :is([data-credit="banner-kind"], [data-credit="banner-count"]):not(.report-page):not(.report-page *) { font: 600 13.5px/1.5 var(--qd-font) !important; color: var(--qd-fg) !important; }
html[data-theme="quiet-deck"] #root [data-credit="me-row"]:not(.report-page):not(.report-page *) { border-bottom: var(--qd-hair) !important; padding: 10px 0 !important; }
html[data-theme="quiet-deck"] #root [data-credit="me-row"] > span:not(.report-page):not(.report-page *) { font-family: var(--qd-font) !important; }

/* ---------------------------------------------------------------------------
   4b. THE SCREENS — what the generic vocabulary cannot say by itself.
   --------------------------------------------------------------------------- */

/* ---- the scan ------------------------------------------------------------- */
/* The 120px ring is the one piece of this screen that moves, so it is B4.2's arc at the size
   the markup gives it rather than a thinner version of Pink fun's 6px hoop. */
html[data-theme="quiet-deck"] #root div[style*="animation:spin"][style*="width:120px"]:not(.report-page):not(.report-page *) { border-width: 3px !important; }
html[data-theme="quiet-deck"] #root #scan-count { font-family: var(--qd-font) !important; font-weight: 700 !important; font-size: 44px !important; letter-spacing: -.02em !important; color: var(--qd-fg) !important; }
/* THE PHASE LINE IS RE-WRITTEN BY THE HUB (ph.style.cssText on every progress tick), so by id.
   Plain, it is a caps label. LOUD — the model re-read, the one phase with no percentage of its
   own — it is the AI panel; "has a background at all" is the only thing the two serialisations
   ("background:#E3D2FC" and "background: rgb(227, 210, 252)") have in common. */
html[data-theme="quiet-deck"] #root #scan-phase {
  font-family: var(--qd-font) !important; font-weight: 600 !important; font-size: 11.5px !important;
  letter-spacing: .1em !important; color: var(--qd-fg2) !important;
}
html[data-theme="quiet-deck"] #root #scan-phase[style*="background"]:not(.report-page):not(.report-page *) {
  max-width: 360px; margin-left: auto !important; margin-right: auto !important;
  background: var(--qd-ai-soft) !important; border: 1px solid var(--qd-ai-brd) !important;
  border-radius: var(--qd-r-ctl) !important; color: var(--qd-ai) !important;
}
/* THE BARBER-POLE under it has to keep saying "we cannot tell you how far along this is" — a
   bar standing at 100% would claim the opposite — but it cannot keep saying it with stripes:
   section 3 rule 2 is flat, the only gradient this design keeps is the score dial, and
   theme_leaks.py reports every other one. So the same statement in this design's vocabulary:
   one solid block, a third of the track wide, travelling across it. Flat, and still unmeasured. */
html[data-theme="quiet-deck"] #root #scan-indet > div { border: 0 !important; border-radius: var(--qd-r-pill) !important; background: var(--qd-surf2) !important; height: 8px !important; overflow: hidden; }
html[data-theme="quiet-deck"] #root #scan-indet > div > div {
  background-image: none !important; background-color: var(--qd-ai) !important;
  width: 34% !important; border-radius: var(--qd-r-pill) !important;
  animation: qd-indet 1.15s ease-in-out infinite !important;
}
@keyframes qd-indet { from { transform: translateX(-105%); } to { transform: translateX(330%); } }
/* CLOSEST MARKS SO FAR, and the queue note: hairline-separated rows at the design's rhythm,
   not boxed slabs stacked with gaps. */
html[data-theme="quiet-deck"] #root #scan-top > div { background: none !important; border: 0 !important; border-bottom: var(--qd-hair) !important; border-radius: 0 !important; padding: 7px 2px !important; margin-bottom: 0 !important; min-height: 28px; }
html[data-theme="quiet-deck"] #root #scan-queue { background: var(--qd-surf) !important; border: var(--qd-hair) !important; border-radius: var(--qd-r-card) !important; padding: 20px !important; }

/* ---- the score card -------------------------------------------------------
   Pink fun's is a navy panel with a lit dial on it. Here it is the screen's one card and the
   band is the only colour on it. data-band and --risk-deg come from scoreHeaderHTML(); they
   are hooks and paint nothing under Pink fun. 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 the very rule it was written to beat. */
html[data-theme="quiet-deck"] #root div[data-ui="scorecard"][style]:not(.report-page):not(.report-page *) {
  background: var(--qd-surf) !important; border: var(--qd-hair) !important;
  border-radius: var(--qd-r-card) !important; padding: 20px !important; box-shadow: none !important;
}
html[data-theme="quiet-deck"] #root [data-ui="scorecard"][data-band="very-high"]    { --qd-band: var(--qd-vhigh); }
html[data-theme="quiet-deck"] #root [data-ui="scorecard"][data-band="high"]         { --qd-band: var(--qd-high); }
html[data-theme="quiet-deck"] #root [data-ui="scorecard"][data-band="moderate"]     { --qd-band: var(--qd-mod); }
html[data-theme="quiet-deck"] #root [data-ui="scorecard"][data-band="low-moderate"] { --qd-band: var(--qd-lowmod); }
html[data-theme="quiet-deck"] #root [data-ui="scorecard"][data-band="low"]          { --qd-band: var(--qd-low); }
/* THE DIAL is the one gradient on this skin, because it is a conic-gradient in the markup and
   cannot be anything else. The headroom is the SLOT and not --qd-ok: at the Low band the arc
   is already --qd-ok and the two segments would merge into one unbroken ring — which is
   precisely why Pink fun invented DIAL_CLEAR. An unscored search has no band and gets the
   greyed-icon colour, which is a graphic here and never a letter. */
html[data-theme="quiet-deck"] #root div[data-ui="dial"]:not(.report-page):not(.report-page *) { background: conic-gradient(var(--qd-band, var(--qd-line2)) var(--risk-deg, 0deg), var(--qd-surf2) 0) !important; }
/* The well is darker than the card, so the ring reads as a ring and not as a hole. */
html[data-theme="quiet-deck"] #root div[data-ui="dial"] > div:not(.report-page):not(.report-page *) { background: var(--qd-bg) !important; border: 0 !important; }
html[data-theme="quiet-deck"] #root div[data-ui="dial"] > div > span:first-child:not(.report-page):not(.report-page *) { color: var(--qd-band, var(--qd-fg)) !important; text-shadow: none !important; font-family: var(--qd-font) !important; font-weight: 700 !important; font-size: 30px !important; }
html[data-theme="quiet-deck"] #root div[data-ui="dial"] > div > span + span:not(.report-page):not(.report-page *) { color: var(--qd-fg2) !important; }
/* The verdict chip: the band hue with the page colour on it, 6.4:1 at its very worst. */
html[data-theme="quiet-deck"] #root [data-ui="scorecard"] span[style*="Archivo Black"][style*="padding:6px 11px"]:not(.report-page):not(.report-page *) {
  background: var(--qd-band, var(--qd-surf2)) !important; color: var(--qd-bg) !important; border: 0 !important;
  border-radius: var(--qd-r-pill) !important; padding: 7px 14px !important; font-size: 16px !important;
}
/* The card's own footer rule, and its string of machine facts. */
html[data-theme="quiet-deck"] #root [data-ui="scorecard"] [style*="border-top:2px solid #1F4470"]:not(.report-page):not(.report-page *) { border-top-color: var(--qd-line) !important; }

/* ---- tables ---------------------------------------------------------------
   B4.3 again, read as a table: a hairline between rows and no zebra, which is what app.js
   already draws — so only the colour of the lines and the weight of the column labels change.
   The conflict CARDS are deliberately left as cards: each one carries a name, an owner, a
   class list, three or four figures and a verdict chip, and that is more than a 28px row can
   hold without wrapping twice on a 390px column. The dense-row rhythm is where it fits — the
   scan's CLOSEST MARKS, and the landing's plan and step lists in part 6. */
html[data-theme="quiet-deck"] #root table[style]:not(.report-page):not(.report-page *) { border-color: var(--qd-line) !important; }
html[data-theme="quiet-deck"] #root :is(th, td)[style]:not(.report-page):not(.report-page *) { border-color: var(--qd-line) !important; }
html[data-theme="quiet-deck"] #root th[style]:not(.report-page):not(.report-page *) { color: var(--qd-fg2) !important; font-weight: 600 !important; letter-spacing: .1em !important; }

/* ---- the pack and the document desk ---------------------------------------
   A pack row that can be opened was pale blue with a hard shadow; here the two states are one
   card and the locked one is simply the fainter of them. */
html[data-theme="quiet-deck"] #root div[style*="background:#BCD4EA"][style*="box-shadow:5px 5px 0 #1D3D64"]:not(.report-page):not(.report-page *) { background: var(--qd-surf) !important; border: var(--qd-hair) !important; border-radius: var(--qd-r-card) !important; }
/* The desk's toolbar keeps its own ink: its buttons sit on a card now, not on charcoal. */
html[data-theme="quiet-deck"] #root .doc-toolbar[style]:not(.report-page):not(.report-page *) { background: var(--qd-surf) !important; border: var(--qd-hair) !important; border-radius: var(--qd-r-ctl) !important; }

/* ---- the legacy Paid! screen ----------------------------------------------
   The celebrating mascot and the pink-and-navy confetti are Pink fun's brand voice and have no
   equivalent in an instrument panel. Hidden, and the button that was pulled up over her feet
   is put back where a button goes. No word, price or control is touched: the artwork is
   decoration and the <canvas> has no text in it. */
html[data-theme="quiet-deck"] #root img[alt="Celebrating fairy"],
html[data-theme="quiet-deck"] #root canvas#confetti { display: none !important; }
html[data-theme="quiet-deck"] #root canvas#confetti ~ button[data-act="goDocs"] { margin-top: 18px !important; }

/* ---- motion ---------------------------------------------------------------
   Every screen slides in (animation:screenIn, inline). Reduced motion means it does not, and
   the spinners stand still — the percentage and the stage label are the real signal on this
   screen and both of them are text. */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="quiet-deck"] #root [style*="animation:screenIn"]:not(.report-page):not(.report-page *) { animation: none !important; }
  html[data-theme="quiet-deck"] #root [style*="animation:spin"]:not(.report-page):not(.report-page *),
  html[data-theme="quiet-deck"] #root div.docjob-spin:not(.report-page):not(.report-page *) { animation: none !important; }
  html[data-theme="quiet-deck"] #root .live-ring { background: var(--ring-rest, var(--ring-dark)); }
  /* The travelling block GOES, and the empty track stays. Standing it still had to put it
     somewhere, and there is no honest place: full is a claim that the step finished, a third
     of the way along is a claim that a third of it is done, and this is the one step in the
     product that has no percentage to report. An empty slot claims nothing, and the sentence
     under it ("READING THE SHORTLIST WITH THE MODEL - THIS STEP TAKES ABOUT 15 SECONDS") is
     the real signal and is text. */
  html[data-theme="quiet-deck"] #root #scan-indet > div > div { animation: none !important; display: none !important; }
}

/* ---------------------------------------------------------------------------
   5. THE .qd-* VOCABULARY — the pieces app.js emits under skinIs('quiet-deck').

   WEB-SKIN-SPEC.md section 8 reserved this part for a re-composed SHELL (.qd-shell / .qd-bar /
   .qd-nav). app.js branches on skinIs('quiet-deck') in exactly one place — landingHTML() —
   so there is no such markup to dress, and a sheet full of rules for classes nobody writes is
   a sheet nobody can tell is broken. The app's own shell is Pink fun's markup, re-dressed by
   part 4 to the same four zones: .shell is the screen, [data-ui="topbar"] the header,
   [data-ui="contextbar"] the strip under it, and .appnav the amber hint bar.

   What IS emitted is the component vocabulary below — the list row, the letter tile, the
   keycap, the button and the hint bar of B4.3 / B4.4 / B4.7. They are written here, apart from
   the landing's own layout in part 6, because they are the design's components and not that
   page's furniture: a shell branch added later reuses them as they stand.
   --------------------------------------------------------------------------- */

/* ---- buttons (B4.4) ------------------------------------------------------- */
/* The device has no buttons at all, only rows and keycaps, so the three steps are derived:
   the accent fill with the page colour on it (7.37:1) is the action; the slot with a
   --qd-line2 edge is visibly pressable and visibly not the accent; a text button is the
   accent with nothing round it. */
html[data-theme="quiet-deck"] #root .qd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 16px; min-height: 36px;
  background: var(--qd-surf2); color: var(--qd-fg);
  border: var(--qd-brd); border-radius: var(--qd-r-ctl);
  font: 600 13px/1.2 var(--qd-font); letter-spacing: .04em; cursor: pointer;
}
html[data-theme="quiet-deck"] #root .qd-btn:hover { border-color: var(--qd-acc); color: var(--qd-acc); }
html[data-theme="quiet-deck"] #root .qd-btn-primary { background: var(--qd-acc); color: var(--qd-bg); border-color: transparent; padding: 14px 22px; font-size: 14px; }
html[data-theme="quiet-deck"] #root .qd-btn-primary:hover { background: var(--qd-sms); color: var(--qd-bg); border-color: transparent; }
html[data-theme="quiet-deck"] #root .qd-btn-quiet { background: none; color: var(--qd-acc); border-color: transparent; padding: 8px 10px; }
html[data-theme="quiet-deck"] #root .qd-btn-quiet:hover { color: var(--qd-fg); border-color: transparent; }

/* ---- the list row (B4.3) --------------------------------------------------
   The whole of this design's body is this one object: 28px tall, a hairline underneath, no
   fill and no zebra, the value right-aligned. The chosen one takes the slot and a 3px accent
   bar down its left edge — and the UNCHOSEN one carries the same 3px transparent, so choosing
   a row does not shift the text of every other row by three pixels. */
html[data-theme="quiet-deck"] #root .qd-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  min-height: 28px; padding: 13px 12px;
  background: none; border: 0; border-bottom: var(--qd-hair);
  border-left: var(--qd-sel-w) solid transparent;
  /* The row radius is carried whether or not the row is the chosen one, for the reason the
     nav cells carry the keycap radius: a square control is the one shape this design has none
     of, theme_leaks.py says so on every screen it appears on, and on an unfilled row it shows
     nowhere until the fill arrives. */
  border-radius: 0 var(--qd-r-row) var(--qd-r-row) 0;
  font: 400 14px/1.6 var(--qd-font); color: var(--qd-fg2);
}
html[data-theme="quiet-deck"] #root .qd-row-go { cursor: pointer; }
html[data-theme="quiet-deck"] #root .qd-row-go:hover { background: var(--qd-surf); }
html[data-theme="quiet-deck"] #root .qd-row-sel { background: var(--qd-surf2); border-left-color: var(--qd-acc); }
html[data-theme="quiet-deck"] #root .qd-row-sel:hover { background: var(--qd-surf2); }
html[data-theme="quiet-deck"] #root .qd-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
html[data-theme="quiet-deck"] #root .qd-row-t { font: 500 14px/1.4 var(--qd-font); color: var(--qd-fg); }
html[data-theme="quiet-deck"] #root .qd-row-b { font: 400 12.5px/1.55 var(--qd-font); color: var(--qd-fg2); }
/* The value is a machine fact and sits on the 8x16 grid, which is also what keeps a column of
   prices aligned on their digits without a table. */
html[data-theme="quiet-deck"] #root .qd-row-v { flex: none; margin-left: auto; font: 500 13.5px/1.55 var(--qd-mono); color: var(--qd-fg); white-space: nowrap; }

/* ---- the letter tile (B4.3 / B4.7) ---------------------------------------
   The initial on one of the eight tints, in the page colour. Every one of the eight measures
   6.14:1 or better against --qd-bg, which is the whole reason the device puts the initial on
   a tile in the page colour rather than in white. */
html[data-theme="quiet-deck"] #root .qd-tile {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--qd-r-sm);
  background: var(--qd-t1); color: var(--qd-bg); font: 600 13px/1 var(--qd-font);
}
/* A tile carrying an index rather than an initial is a machine fact, on the mono grid. */
html[data-theme="quiet-deck"] #root .qd-tile-n { font: 500 12px/1 var(--qd-mono); }
html[data-theme="quiet-deck"] #root .qd-tile-1 { background: var(--qd-t1); }
html[data-theme="quiet-deck"] #root .qd-tile-2 { background: var(--qd-t2); }
html[data-theme="quiet-deck"] #root .qd-tile-3 { background: var(--qd-t3); }
html[data-theme="quiet-deck"] #root .qd-tile-4 { background: var(--qd-t4); }
html[data-theme="quiet-deck"] #root .qd-tile-5 { background: var(--qd-t5); }
html[data-theme="quiet-deck"] #root .qd-tile-6 { background: var(--qd-t6); }
html[data-theme="quiet-deck"] #root .qd-tile-7 { background: var(--qd-t7); }
html[data-theme="quiet-deck"] #root .qd-tile-8 { background: var(--qd-t8); }

/* ---- the hint bar and its keycaps (B1 zone 4, B4.7) -----------------------
   The single most recognisable thing in this design: a full-bleed amber strip naming what the
   screen responds to, each item a keycap and a label. #2b2100 on #f5c542 is 9.81:1 and the
   same pair the other way round is 9.81:1 too, which is exactly why one pair of values can be
   both bar-and-label and keycap-and-glyph. */
html[data-theme="quiet-deck"] #root .qd-hintbar {
  display: flex; align-items: center; gap: 16px;
  min-height: 24px; padding: 7px 14px;
  background: var(--qd-hint); border-top: 1px solid var(--qd-hint-fg);
}
/* a.qd-hint carries both exclusions and the element name so it outranks the sheet's own link
   rule, which is spelled the same way and would otherwise paint these labels accent-blue on
   amber (1.5:1). */
html[data-theme="quiet-deck"] #root a.qd-hint:not(.report-page):not(.report-page *),
html[data-theme="quiet-deck"] #root button.qd-hint:not(.report-page):not(.report-page *) {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  padding: 2px 0; background: none; border: 0; border-radius: var(--qd-r-sm);
  color: var(--qd-hint-fg) !important; text-decoration: none; cursor: pointer;
}
html[data-theme="quiet-deck"] #root a.qd-hint:not(.report-page):not(.report-page *):hover,
html[data-theme="quiet-deck"] #root button.qd-hint:not(.report-page):not(.report-page *):hover { color: var(--qd-hint-fg) !important; opacity: .78; }
html[data-theme="quiet-deck"] #root .qd-key {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; padding: 2px 5px;
  background: var(--qd-hint-fg); color: var(--qd-hint); border-radius: var(--qd-r-sm);
  font: 500 11px/1.3 var(--qd-mono);
}
html[data-theme="quiet-deck"] #root .qd-hint-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 11.5px/1.4 var(--qd-font); letter-spacing: .09em; }

/* ---------------------------------------------------------------------------
   6. THE LANDING PAGE — landingQuietDeckHTML() in app.js.

   That function owns the composition and the words; this owns the dress. It is the device's
   own screen read top to bottom — a status strip, a header, a body of rows, an amber hint bar
   — and it places all three pieces of landingShared() (the curved marquee, the
   "00 / NEWLY RELEASED" section and the "Not legal advice" box), whose sentences are typed
   once, in LANDING_COPY. Nothing here changes one of them.
   --------------------------------------------------------------------------- */
html[data-theme="quiet-deck"] #root .qd-land { position: relative; background: var(--qd-bg); color: var(--qd-fg); min-height: 100vh; overflow-x: hidden; }

/* THE SKY — js/qd-sky.js draws qdrilex.com's drifting cloud shader into .qd-sky.

   THE BACKGROUND ON .qd-land ABOVE IS NOT REDUNDANT. It is what the page is when there is no
   WebGL — refused, blocklisted, a software renderer, a failed compile — which qd-sky.js
   handles by leaving this marker empty. The canvas's own unlit pixel is the same --qd-bg to
   three decimal places (GROUND in that file), so the two cannot disagree at the seam.

   z-index 0 against the zones' 1: the canvas is a child of .qd-land, so it paints over that
   element's own background and under everything in it, and no zone has to know it is there.
   pointer-events none, because a backdrop that ate a click on the hero's own button would be
   a bug nobody would look for in a stylesheet.

   IT ENDS WITH THE HERO, and that is a contrast decision rather than a taste one. MEASURED
   over 41 frames at 1440x900 (the shader read straight out of qd-sky.js, so the probe and the
   page cannot drift apart): the MEAN pixel is #101520, darker than the page — but the
   BRIGHTEST IS #ffffff. The streak term is 0.0005/d, where d is the distance to that streak's
   own centre, so every streak has a blown-out core; qdrilex.com's picture has those white
   cores in it too, and they are most of what makes it look like light. --qd-fg on #ffffff is
   1.18:1.
   So the canvas stops at the bottom of the hero. Everything below it — the rows, the section
   heads, the two cards — sits on plain --qd-bg exactly as it did before this skin had a
   backdrop, which is what keeps the 226 contrast runs theme_leaks.py already passes for this
   skin true without any of them being re-argued. The hero's own copy, which DOES sit over the
   sky, gets the scrim below. The mask fades the bottom of the canvas out so the end of it is
   not a horizontal line drawn across the landing. */
html[data-theme="quiet-deck"] #root .qd-sky {
  position: absolute; top: 0; left: 0; right: 0;
  height: clamp(620px, 96vh, 1000px);
  z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
}
html[data-theme="quiet-deck"] #root .qd-sky-c { display: block; width: 100%; height: 100%; }
/* Every zone of the landing rides above the sky. Grouped rather than repeated so that a zone
   added later without a z-index is the bug that is visible immediately, not the one that is
   visible only on a machine with WebGL. */
html[data-theme="quiet-deck"] #root .qd-land > .qd-stat,
html[data-theme="quiet-deck"] #root .qd-land > .qd-head,
html[data-theme="quiet-deck"] #root .qd-land > .qd-hero,
html[data-theme="quiet-deck"] #root .qd-land > .qd-mq,
html[data-theme="quiet-deck"] #root .qd-land > .qd-body,
html[data-theme="quiet-deck"] #root .qd-land > .qd-hintbar { position: relative; z-index: 1; }

/* ZONE 1 — the status strip. The device reads out link state, battery and clock; the three
   facts this page can state without inventing one are who is speaking, that the service is
   up, and which register is being read. The device sets this strip in COL_DIM; here it is
   --qd-fg2, because the flat rule in part 1 has no exceptions and 12px is reading size. */
html[data-theme="quiet-deck"] #root .qd-stat {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 20px; padding: 4px 16px;
  background: var(--qd-surf); border-bottom: var(--qd-hair);
  font: 500 12px/1.5 var(--qd-font); color: var(--qd-fg2);
}
html[data-theme="quiet-deck"] #root .qd-stat-l { display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="quiet-deck"] #root .qd-stat-r { flex: none; font-family: var(--qd-mono); font-size: 11.5px; letter-spacing: .04em; }
/* The link LED. COL_OK means the link is up, which here means the service answered — so it is
   a solid dot and never a blinking one: nothing on this page is measuring anything live. */
html[data-theme="quiet-deck"] #root .qd-led { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--qd-ok); }

/* ZONE 2 — the header. */
html[data-theme="quiet-deck"] #root .qd-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 28px; padding: 7px 10px 7px 16px;
  background: var(--qd-surf); border-bottom: var(--qd-hair);
}
html[data-theme="quiet-deck"] #root .qd-head-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px/1.4 var(--qd-font); letter-spacing: .02em; color: var(--qd-fg); }

/* THE HERO is the one type step above B3's scale: a 2.8-inch panel has no hero and a 1000px
   column needs one. Nothing else on this skin exceeds the scale. */
/* TALLER THAN THE ROWS BELOW IT WANT TO BE, on purpose. The sky and the globe need room to
   be a picture rather than a strip, so the hero is given the height of a screen and its copy
   is centred in it. The rest of the page keeps the device's dense rhythm; this is the one
   place that breathes, which is also what makes the first scroll feel like leaving a cover. */
html[data-theme="quiet-deck"] #root .qd-hero {
  display: flex; align-items: center; gap: 48px;
  max-width: 1040px; margin: 0 auto; padding: 92px 16px 84px;
  min-height: min(78vh, 620px);
}
/* THE SCRIM — the one place on this landing where type sits over the sky.

   The measurement in the sky's note above is the whole reason this exists: a streak core is
   #ffffff, and --qd-fg on #ffffff is 1.18:1. Clamping the shader would have been the other
   answer and was not taken — the cores ARE the light, and dimming them to make a text
   guarantee easier would be changing the owner's picture to avoid writing one rule.

   So the copy carries its own ground, and the worst case is the number worth writing down —
   computed over the WORST pixel the sky can produce rather than over its average, a white
   streak core at #ffffff. Under the .93 plateau the text sits on #1c2328, where
       --qd-fg  #e9edf2  13.57:1        --qd-fg2  #b3bdc8  8.38:1
   so both inks clear AA for body text roughly three times over against the brightest thing
   that can ever be behind them. Lower the .93 and this note is wrong.

   IT MUST NOT READ AS A PANEL, and the first attempt did. A radial gradient inside a box is
   only edgeless if it reaches zero before the box does, and at a centre off to one side it
   cannot: the near edge clips it part-way down and draws a visible rectangle behind the
   headline. So the shape is made of three things that each end in nothing —
     * it runs off the LEFT of the window (-50vw, clipped by .qd-land's overflow-x), so that
       edge is never on screen;
     * it fades to transparent on the RIGHT, well before the globe;
     * and a mask fades the top and bottom out across the padding, above and below any text.
   No edge of the element is ever a visible edge of the wash.

   z-index -1 keeps it behind the copy and still above the canvas: .qd-hero is position
   relative with z-index 1, so it opens a stacking context and the -1 cannot escape it down
   past .qd-sky. */
html[data-theme="quiet-deck"] #root .qd-hero-copy { position: relative; flex: 1 1 auto; min-width: 0; }
html[data-theme="quiet-deck"] #root .qd-hero-copy::before {
  content: ""; position: absolute; inset: -44px -150px -52px -50vw; z-index: -1; pointer-events: none;
  background: linear-gradient(to right,
              rgba(11, 18, 24, .93) 0%, rgba(11, 18, 24, .93) 74%, rgba(11, 18, 24, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 42px, #000 calc(100% - 50px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 42px, #000 calc(100% - 50px), transparent 100%);
}
html[data-theme="quiet-deck"] #root .qd-h1 { margin: 0 0 16px; font: 700 clamp(34px, 6vw, 52px)/1.05 var(--qd-font); letter-spacing: -.02em; color: var(--qd-fg); }
html[data-theme="quiet-deck"] #root .qd-lede { margin: 0 0 22px; max-width: 760px; font: 400 16px/1.6 var(--qd-font); color: var(--qd-fg2); }

/* THE GLOBE — js/qd-sky.js mounts COBE into .qd-globe, sized from this box.

   THE SIZE IS READ, NOT GUESSED: that file measures min(clientWidth, clientHeight) of this
   element and builds the globe to it, so the two cannot drift apart, and a re-measure is what
   a window resize triggers. That is also what makes the phone layout at the foot of this part
   work without a line of JavaScript: the box simply becomes wider than the screen, and the
   globe is built to the new box. A host with no size at all — display:none, or a layout that
   has not run yet — measures under the floor in qd-sky.js and nothing is built.

   grab, not pointer: it turns by itself and can be dragged, and the cursor is the only thing
   that says so, because the element is aria-hidden and states no fact of its own. */
/* position:relative IS LOAD-BEARING. COBE appends a 1px positioning anchor per labelled
   marker and writes its screen position onto it as `left: x%; top: y%`; the city names
   js/qd-sky.js adds copy those two percentages. Percentages resolve against the nearest
   POSITIONED ancestor, so without this they would resolve against .qd-hero — a box twice as
   wide — and every name would sit a long way from its city. */
html[data-theme="quiet-deck"] #root .qd-globe {
  position: relative;
  flex: none; width: clamp(300px, 34vw, 430px); height: clamp(300px, 34vw, 430px);
  display: flex; align-items: center; justify-content: center;
}
html[data-theme="quiet-deck"] #root .qd-globe-c { display: block; max-width: 100%; height: auto; touch-action: pan-y; }

/* THE CITY NAMES. Three of them (see CITIES in js/qd-sky.js for why three), each a small
   plate sitting just above its marker. The left/top are written by qd-sky.js from COBE's own
   anchor, so this rule owns only the look and the offset: translate puts the plate's bottom
   edge 9px above the dot and centres it on the dot's column.

   OPACITY IS NOT SET HERE. qd-sky.js writes `opacity: var(--cobe-visible-<id>, 0)` inline,
   and COBE sets that custom property on :root for as long as that city is on the near side —
   so a name fades out as its city turns away, computed by the browser, costing this file
   nothing per frame and working in every browser rather than only the ones that have CSS
   Anchor Positioning. The transition is what turns that switch into a fade. */
/* ONE OF THE THREE HANGS BELOW ITS CITY, and that is not decoration either. The ball turns,
   so the gap between any two names is a function of the rotation: Ottawa and St John's are
   twenty-three degrees apart and sit comfortably apart face-on, then slide into each other as
   they near the limb and the sphere foreshortens them together. No choice of three cities
   avoids that — it is what a sphere does — so the two that can meet are put on different
   lines instead, which separates them at every angle rather than at most of them. */
html[data-theme="quiet-deck"] #root .qd-globe-lab {
  position: absolute; z-index: 2; pointer-events: none; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 9px));
  padding: 2px 6px; border-radius: var(--qd-r-sm);
  background: var(--qd-surf2); border: var(--qd-hair);
  color: var(--qd-fg); font: 500 9.5px/1.45 var(--qd-mono); letter-spacing: .1em;
  transition: opacity .55s linear;
}
html[data-theme="quiet-deck"] #root .qd-globe-lab.qd-lab-below { transform: translate(-50%, 11px); }
/* ON A PHONE THE GLOBE IS THE TOP OF THE PAGE, not a thing beside a paragraph.

   It used to be display:none here, which was the easy answer and the wrong one: the globe is
   the most of this landing anybody looks at, and a phone is where most people arrive. So
   instead of shrinking it until it is a bauble, it is made BIGGER than the screen and allowed
   to run off the right edge — about four fifths of the ball is on screen, which is enough of a
   sphere to read as one, and the crop is what makes it feel like a window onto something
   larger rather than a small picture of a planet.

   THE STACK, which is the whole trick and is easy to undo by accident. .qd-hero is
   position:relative with z-index 1, so it opens a stacking context and both of these are
   trapped inside it, above .qd-sky's clouds and below the copy:
       z-index -2   the globe
       z-index -1   the scrim (.qd-hero-copy::before, re-dressed below)
   Document order decides between equal z-indexes, and the scrim's element comes FIRST, so
   leaving both at -1 would silently put the globe on top of the scrim and the headline
   straight onto the continents. The -2 is load-bearing.

   POINTER-EVENTS NONE, deliberately losing the drag. On a desktop the ball is a control you
   can spin; here it sits under the text a thumb scrolls past, and a horizontal drag starting
   on it is a page that does not scroll. A globe nobody can spin on a phone is a small loss; a
   landing that fights the thumb is not. */
@media (max-width: 900px) {
  html[data-theme="quiet-deck"] #root .qd-hero {
    display: block; min-height: 0; padding: 264px 16px 52px;
  }
  html[data-theme="quiet-deck"] #root .qd-globe {
    display: flex; position: absolute; z-index: -2; pointer-events: none;
    top: -34px; left: 0; width: 128vw; height: 128vw;
  }
  /* The scrim turns through ninety degrees with the layout. On a desktop it runs left to
     right, off the side of the window; here it runs TOP TO BOTTOM — clear at the top so the
     ball is seen whole, fully drawn by the line where the headline starts. The stops are in
     PIXELS and not percentages because the copy's height changes with the wordmark and a
     percentage would slide the opaque edge up into the first line on a longer one. */
  html[data-theme="quiet-deck"] #root .qd-hero-copy::before {
    inset: -188px -50vw -56px -50vw;
    background: linear-gradient(to bottom,
                rgba(11, 18, 24, 0) 0px,
                rgba(11, 18, 24, .55) 92px,
                rgba(11, 18, 24, .93) 178px,
                rgba(11, 18, 24, .93) 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 48px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 48px), transparent 100%);
  }
}
/* A line of machine facts, so the mono grid — and --qd-fg2, not --qd-dim: 12px is read. */
html[data-theme="quiet-deck"] #root .qd-facts { margin: 18px 0 0; font: 400 11.5px/1.7 var(--qd-mono); letter-spacing: .02em; color: var(--qd-fg2); }

/* THE CURVED MARQUEE. The path is the design's hairline bent — a dotted track in the greyed
   colour, which is a graphic and never a letter — and the words ride it in the primary ink, so
   the one moving thing on the page is also the easiest thing on it to read (16.45:1). */
html[data-theme="quiet-deck"] #root .qd-mq { overflow: hidden; border-top: var(--qd-hair); border-bottom: var(--qd-hair); }
html[data-theme="quiet-deck"] #root .qd-mq-svg { display: block; width: 100%; height: clamp(92px, 15vw, 150px); }
html[data-theme="quiet-deck"] #root .qd-mq-path { stroke: var(--qd-line2); stroke-width: 1; stroke-dasharray: 1 7; stroke-linecap: round; }
html[data-theme="quiet-deck"] #root .qd-mq-text { font: 700 34px var(--qd-font); letter-spacing: -.01em; fill: var(--qd-fg); }
/* Under prefers-reduced-motion landingShared() prints the same sentence as a still paragraph
   instead of the moving path: same words, same ink, no curve to follow. */
html[data-theme="quiet-deck"] #root .qd-mq-still { max-width: 1040px; margin: 0 auto; padding: 18px 16px; text-align: center; font: 600 clamp(13px, 1.5vw, 16px)/1.8 var(--qd-font); letter-spacing: .06em; color: var(--qd-fg); }

/* ZONE 3 — the body: nothing but rows and the two cards the shared block arrives in. */
/* The body opens further down and the sections stand further apart than the device's 28px
   rhythm would put them, so the sky reads as a sky between them rather than as texture behind
   a wall of rows. The rows themselves keep their rhythm exactly — this stretches the gaps, not
   the controls. */
html[data-theme="quiet-deck"] #root .qd-body { max-width: 1040px; margin: 0 auto; padding: 56px 16px 72px; }
html[data-theme="quiet-deck"] #root .qd-sec { margin: 0 0 56px; }
/* A numbered section head: the index in the accent, the label on the design's tracked caps,
   a hairline underneath. The indices are Pink fun's own, to the digit. */
html[data-theme="quiet-deck"] #root .qd-sec-h { display: flex; align-items: baseline; gap: 10px; padding: 0 0 8px; margin: 0 0 4px; border-bottom: var(--qd-hair); }
html[data-theme="quiet-deck"] #root .qd-sec-n { font: 500 12px/1.4 var(--qd-mono); color: var(--qd-acc); }
html[data-theme="quiet-deck"] #root .qd-sec-t { font: 600 12px/1.4 var(--qd-font); letter-spacing: .1em; color: var(--qd-fg); }

/* The shared "00 / NEWLY RELEASED" section arrives as a banner card (B4.5): the card colour,
   a hairline, the banner radius, no shadow — the device's banner floats on its border alone. */
html[data-theme="quiet-deck"] #root .qd-banner { background: var(--qd-surf); border: var(--qd-hair); border-radius: var(--qd-r-card); padding: 24px 22px; }
html[data-theme="quiet-deck"] #root .qd-soon-eyebrow { margin: 0 0 10px; font: 600 11.5px/1.4 var(--qd-font); letter-spacing: .1em; color: var(--qd-fg2); }
html[data-theme="quiet-deck"] #root .qd-soon-n { font-family: var(--qd-mono); font-weight: 500; color: var(--qd-acc); }
html[data-theme="quiet-deck"] #root .qd-soon-h { margin: 0 0 14px; font: 700 clamp(21px, 3.4vw, 30px)/1.15 var(--qd-font); letter-spacing: -.015em; color: var(--qd-fg); }
html[data-theme="quiet-deck"] #root .qd-soon-p { margin: 0 0 12px; max-width: 760px; font: 400 14px/1.6 var(--qd-font); color: var(--qd-fg2); }
html[data-theme="quiet-deck"] #root .qd-soon-p:last-child { margin-bottom: 0; }
/* The one phrase inside those paragraphs that landingShared() marks <strong>. */
html[data-theme="quiet-deck"] #root .qd-mark { font-weight: 600; color: var(--qd-fg); }

/* The standing footnote about what this product is. A warning, so COL_WARN's band: the heading
   is --qd-warn on --qd-warn-soft at 8.40:1 and the body is --qd-fg at 12.88:1. No icon — a
   triangle with "!" reads as an error, and a standing footnote is not one. */
html[data-theme="quiet-deck"] #root .qd-notice { max-width: 1040px; margin: 0 0 36px; padding: 18px 20px; background: var(--qd-warn-soft); border: 1px solid var(--qd-warn-brd); border-radius: var(--qd-r-card); }
html[data-theme="quiet-deck"] #root .qd-notice-t { margin: 0 0 8px; font: 600 14px/1.4 var(--qd-font); letter-spacing: .02em; color: var(--qd-warn); }
html[data-theme="quiet-deck"] #root .qd-notice-b { margin: 0; font: 400 13.5px/1.7 var(--qd-font); color: var(--qd-fg); }

/* The last row of the body: the copyright line and the one repeated action. */
html[data-theme="quiet-deck"] #root .qd-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px 0 0; border-top: var(--qd-hair); }
html[data-theme="quiet-deck"] #root .qd-foot-legal { font: 400 11.5px/1.7 var(--qd-mono); letter-spacing: .02em; color: var(--qd-fg2); }

/* ZONE 4 — the hint bar on this page. STICKY AND NOT FIXED, on purpose: sticky keeps the bar
   against the bottom of the window while the page scrolls AND leaves it its real height at the
   end of the document, so it can never come to rest on top of the footer's button. A fixed bar
   would need a reserved gutter underneath it, and a reserved gutter that is one value out is
   exactly how a skin ends up covering a control (scripts/qa/ribbon_cover.py exists because of
   the other one). */
html[data-theme="quiet-deck"] #root .qd-land-hints { position: sticky; bottom: 0; z-index: 30; justify-content: center; }
/* At phone width three labels and three caps must still fit inside 390px less the 16px
   gutters: the gap and the tracking come in, and the labels clip rather than wrap — a label on
   two lines makes one item taller than the bar and the strip stops being a strip. */
@media (max-width: 440px) {
  html[data-theme="quiet-deck"] #root .qd-hintbar { gap: 10px; padding: 7px 10px; }
  html[data-theme="quiet-deck"] #root .qd-hint-l { font-size: 10.5px; letter-spacing: .05em; }
}

/* ---- STEP 2: THE BASKET AND THE MATCH LIST AS TWO PLACES ---------------------------------
   Owner, 2026-10-10: "a big flat quiet deck — I struggle to find separate sections when they
   are all similar", and the picked statements must read as a basket the way they do in the
   other skins. So this skin gets a small pastel allowance: two tints, used ONLY to say "this is
   a different place" — roughly a tenth of the screen, never on body text. Mint is the basket
   (things you have), lilac the matches (things on offer). The blue accent keeps meaning
   "selected". Contrast: #bff3dd on the basket fill measures ~13:1, #d9cffe on the page ~12:1. */
html[data-theme="quiet-deck"] {
  --qd-mint:      #8ee6c4;   --qd-mint-ink:  #bff3dd;
  --qd-mint-soft: rgba(142, 230, 196, .08);  --qd-mint-brd: rgba(142, 230, 196, .42);
  --qd-lilac:     #c4b5fd;   --qd-lilac-ink: #d9cffe;
  --qd-lilac-soft: rgba(196, 181, 253, .06); --qd-lilac-brd: rgba(196, 181, 253, .40);
}
html[data-theme="quiet-deck"] #root .gs-basket:not(.report-page *) {
  background: var(--qd-mint-soft); border: 1px solid var(--qd-mint-brd);
  border-radius: var(--qd-r-card); padding: 8px; margin: 0 0 8px;
}
html[data-theme="quiet-deck"] #root .gs-basket:not(.is-open):not(.report-page *) { padding: 0; }
html[data-theme="quiet-deck"] #root .gs-basket .live-ring:not(.report-page *) { margin: 0 !important; }
html[data-theme="quiet-deck"] #root .gs-basket.is-open .live-ring:not(.report-page *) { margin: 0 0 8px !important; }
html[data-theme="quiet-deck"] #root .gs-basket #gs-inline-count:not(:disabled):not(.report-page *) {
  background: rgba(142, 230, 196, .14) !important; color: var(--qd-mint-ink) !important; border-radius: 10px !important;
}
html[data-theme="quiet-deck"] #root .gs-basket #gs-inline-count:not(:disabled) > span:last-child:not(.report-page *) { color: var(--qd-mint) !important; }
/* a picked statement: a dark slip with the basket's mint edge, so it cannot be mistaken for a match row */
html[data-theme="quiet-deck"] #root .gs-basket .gs-pick[style]:not(.report-page *) {
  background: var(--qd-surf) !important; border: 0 !important; border-left: 4px solid var(--qd-mint) !important;
  border-radius: var(--qd-r-row) !important; align-items: center !important; padding: 8px 8px 8px 12px !important;
  color: var(--qd-fg) !important;
}
html[data-theme="quiet-deck"] #root .gs-basket .gs-pick > span:first-child:not(.report-page *) { font-size: 13px !important; color: var(--qd-fg) !important; }
html[data-theme="quiet-deck"] #root .gs-basket .gs-pick:last-child:not(.report-page *) { margin-bottom: 0 !important; }
/* The remove control was a 22px hairline circle with a grey 11px "×" — hard to see, harder
   to hit. Now a 32px target, red-tinted at rest so it reads as "take this out", solid on hover. */
html[data-theme="quiet-deck"] #root .gs-basket button[data-act="gsRemove"]:not(.report-page):not(.report-page *),
html[data-theme="quiet-deck"] #root button[data-act="vgsRemove"][style]:not(.report-page):not(.report-page *):not(.x) {
  width: 32px !important; height: 32px !important; border-radius: 8px !important;
  background: rgba(255, 93, 93, .16) !important; border: 1px solid rgba(255, 93, 93, .5) !important;
  color: #ffa3a3 !important; font: 500 24px/1 system-ui, "Segoe UI", sans-serif !important; padding: 0 0 2px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
html[data-theme="quiet-deck"] #root .gs-basket button[data-act="gsRemove"]:not(.report-page):not(.report-page *):hover,
html[data-theme="quiet-deck"] #root button[data-act="vgsRemove"][style]:not(.report-page):not(.report-page *):not(.x):hover {
  background: var(--qd-red) !important; color: var(--qd-bg) !important; border-color: var(--qd-red) !important;
}
/* the match list: a lilac-framed tray of its own */
html[data-theme="quiet-deck"] #root .gs-matches:not(.report-page *) {
  background: var(--qd-lilac-soft); border: 1px solid var(--qd-lilac-brd);
  border-radius: var(--qd-r-card); padding: 4px 10px 10px; margin: 12px 0 0;
}
html[data-theme="quiet-deck"] #root .gs-matches .gs-matches-head[style]:not(.report-page *) { color: var(--qd-lilac-ink) !important; margin: 8px 2px 10px !important; }