/* Void Deck Playground: shared by the site, charts, result images and the OG generator.
   Built from the HDB void-deck playground: speckled rubber floor, concrete ground, four
   playground colours and ink, plus orange and purple so each of the six stages has its own pad.
   Fills (--red, --yellow, --green, --blue, --orange, --purple) carry their own
   on-colour; text uses the -ink variants, which stay AA on every ground and card.
   Keep the old platform token names: other stylesheets read them. */
@font-face{font-family:"Rubik";font-style:normal;font-weight:800 900;font-display:swap;src:url("fonts/rubik-latin-800-900.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/nunito-sans-latin-400-800.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  /* Stage line colours for share cards (aliases of the playground inks). */
  --line-ex:var(--blue-ink);--line-bb:var(--green-ink);--line-td:var(--yellow-ink);--line-ps:var(--orange-ink);--line-pr:var(--purple-ink);--line-fl:var(--red-ink);
 --font-head:"Rubik","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
 --font-body:"Nunito Sans","Avenir Next","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
 --red:#b83d27;--yellow:#f4b51c;--green:#2f7d4a;--blue:#2268b0;--conc:#e9e7e1;--ink-base:#1d2328;
 --orange:#df6f21;--purple:#6a48a3;
 --skin:#eabd92; /* logo face: warm tan, 3.26:1 on --red, 9.2:1 with --ink */
 --on-red:#ffffff;--on-yellow:#1d2328;--on-green:#ffffff;--on-blue:#ffffff;--on-orange:#1d2328;--on-purple:#ffffff;--on-ink:#ffffff;
 --red-ink:#a3341f;--yellow-ink:#7a5600;--green-ink:#256a3c;--blue-ink:#1d5c9c;--orange-ink:#a34a12;--purple-ink:#5e3d99;
 --band-soft:#fbe5df;--display-red:#b83d27;--display-blue:#2268b0;--display-green:#2f7d4a;
 --ink:#1d2328;--paper:#e9e7e1;--card:#ffffff;--muted:#4d555c;--hair:#c6c3bb;--outline:#1d2328;
 --brand:#b83d27;--brand-hover:#9c321f;--brand-text:#ffffff;--soft:#f6f4ef;
 /* One primary button in both themes (visual QA A10): red pill, white text; its edge reaches 3:1 on every surface. */
 --primary:var(--red);--primary-on:var(--on-red);--primary-hover:#9c321f;--primary-edge:var(--red);--primary-edge-hover:#9c321f;
 --hero-start:#b83d27;--hero-end:#b83d27;
 --sun:#f4b51c;--sun-ink:#1d2328;
 --spinner:#f4b51c;--spinner-ink:#1d2328;--bolt-lit:#ffffff;--bolt-mid:#9aa0a6;--bolt-dark:#6b7177;
 --tabbar-bg:#1d2328;--tabbar-text:#c9ced2;--tabbar-on:#f4b51c;
 --footer-bg:#1d2328;--footer-text:#d9dcd6;
 --note-edge:#2268b0;--focus:#1d5c9c;--focus-band:#ffffff;--selection:#f4b51c;--selection-ink:#1d2328;
 --speck-light:rgba(255,255,255,.18);--speck-dark:rgba(0,0,0,.16);
 --ground-speck-dark:rgba(0,0,0,.05);--ground-speck-light:rgba(255,255,255,.6);
 --tile-mint:#dcebdf;--tile-peach:#f9e7e1;--tile-sky:#dde8f4;--tile-butter:#fbecc4;--tile-lilac:#e3e6f1;--tile-rose:#f9e5e0;--tile-aqua:#d9ebe3;
 --door-one:#dcebdf;--door-two:#dde8f4;--door-three:#fbecc4;--night:#14181b;
 --line-ns:#256a3c;--line-ew:#7a5600;--line-ne:#1d5c9c;--line-cc:#a3341f;
 --line-dt:#1d5c9c;--line-te:#256a3c;--line-jr:#a3341f;
 --tile-ns:var(--tile-mint);--tile-ew:var(--tile-butter);--tile-ne:var(--tile-sky);--tile-cc:var(--tile-peach);
 --tile-dt:var(--tile-lilac);--tile-te:var(--tile-aqua);--tile-jr:var(--tile-rose);
 /* One colour per stage: blue, green, yellow, playground orange, playground purple, red. */
 --stage-expecting:#2268b0;--stage-baby:#2f7d4a;--stage-toddler:#f4b51c;--stage-preschool:#df6f21;--stage-primary:#6a48a3;--stage-family:#b83d27;
 --stage-expecting-on:#ffffff;--stage-baby-on:#ffffff;--stage-toddler-on:#1d2328;--stage-preschool-on:#1d2328;--stage-primary-on:#ffffff;--stage-family-on:#ffffff;
 /* Big stage-coloured bands (site header, hub and tool headers): the full fill by day; deep tinted dusk at night. */
 --band-red:var(--red);--band-red-on:var(--on-red);
 --stage-expecting-band:var(--stage-expecting);--stage-baby-band:var(--stage-baby);--stage-toddler-band:var(--stage-toddler);--stage-preschool-band:var(--stage-preschool);--stage-primary-band:var(--stage-primary);--stage-family-band:var(--stage-family);
 --stage-expecting-band-on:var(--stage-expecting-on);--stage-baby-band-on:var(--stage-baby-on);--stage-toddler-band-on:var(--stage-toddler-on);--stage-preschool-band-on:var(--stage-preschool-on);--stage-primary-band-on:var(--stage-primary-on);--stage-family-band-on:var(--stage-family-on);
 --line:var(--brand);--line-text:#ffffff;--radius:22px;--radius-btn:999px;--radius-field:12px;
 --field-border:#1d2328;--danger:#a32b25;
 --press:inset 0 -4px 0 rgba(0,0,0,.2);
 --shadow-sm:0 4px 0 -1px rgba(29,35,40,.18);
 --shadow-md:0 10px 20px -12px rgba(29,35,40,.5);
 --glass:rgba(233,231,225,.94);
}
/* Night at the void deck: the floor goes dark concrete, the rubber colours deepen slightly so
   they glow without glaring, outlines turn concrete-grey and the yellow panel glows a softer amber. */
:root[data-theme=dark]{
 color-scheme:dark;
 --red:#a8381f;--yellow:#efaf17;--green:#2a7043;--blue:#1f5e9f;--orange:#da6b22;--purple:#63439b;--conc:#1a1e21;
 --on-yellow:#1d2328;--on-orange:#1d2328;--on-purple:#ffffff;
 --red-ink:#ff9a84;--yellow-ink:#f6c64f;--green-ink:#7fd09b;--blue-ink:#8ebdf0;--orange-ink:#ffa463;--purple-ink:#c2a6f2;
 --band-soft:#fbe5df;--display-red:#ff9a84;--display-blue:#8ebdf0;--display-green:#7fd09b;
 --ink:#efede7;--paper:#1a1e21;--card:#242a2e;--muted:#b3b9be;--hair:#3b4349;--outline:#8d979e;
 --brand:#ff9a84;--brand-hover:#ffb7a6;--brand-text:#1d2328;--soft:#2b3237;
 --primary-hover:#93301a;--primary-edge:var(--outline);--primary-edge-hover:var(--outline);
 --hero-start:#a8381f;--hero-end:#a8381f;
 --sun:#efaf17;--sun-ink:#1d2328;
 --spinner:#dca42a;--spinner-ink:#1d2328;--bolt-lit:#e9e7e1;--bolt-mid:#8d939a;--bolt-dark:#585e64;
 --tabbar-bg:#0f1214;--tabbar-text:#b9bfc4;--tabbar-on:#f6c64f;
 --footer-bg:#0f1214;--footer-text:#c9ced2;
 --note-edge:#8ebdf0;--focus:#f6c64f;--focus-band:#ffffff;--selection:#efaf17;--selection-ink:#1d2328;
 --speck-light:rgba(255,255,255,.08);--speck-dark:rgba(0,0,0,.24);
 --ground-speck-dark:rgba(0,0,0,.22);--ground-speck-light:rgba(255,255,255,.035);
 --tile-mint:#1f3a2a;--tile-peach:#3f2720;--tile-sky:#1d3046;--tile-butter:#3d3218;--tile-lilac:#272c40;--tile-rose:#3d2522;--tile-aqua:#1b3830;
 --door-one:#1f3a2a;--door-two:#1d3046;--door-three:#3d3218;--night:#0f1214;
 --line-ns:#7fd09b;--line-ew:#f6c64f;--line-ne:#8ebdf0;--line-cc:#ff9a84;
 --line-dt:#8ebdf0;--line-te:#7fd09b;--line-jr:#ff9a84;--line-text:#1d2328;
 --stage-expecting:#1f5e9f;--stage-baby:#2a7043;--stage-toddler:#efaf17;--stage-preschool:#da6b22;--stage-primary:#63439b;--stage-family:#a8381f;
 --stage-expecting-on:#ffffff;--stage-baby-on:#ffffff;--stage-toddler-on:#1d2328;--stage-preschool-on:#1d2328;--stage-primary-on:#ffffff;--stage-family-on:#ffffff;
 /* Softer at night (round 5): the big bands are the stage colour mixed 40% into the night ground
    (toddler 34%), so a phone at 3am is not a sheet of orange or red; the yellow tile dims to amber.
    Visual QA A10 (12 Oct 2026): the toddler and preschool bands read olive and brown at that mix, so
    they are a deeper amber (#6e5210) and burnt orange (#7a3d14) instead, still white-text AA.
    The small pads and chips keep their full colour, so each stage still reads at a glance. */
 --band-red:#50251d;--band-red-on:#ffffff;
 --stage-expecting-band:#193550;--stage-baby-band:#1d3c2c;--stage-toddler-band:#6e5210;--stage-preschool-band:#7a3d14;--stage-primary-band:#342a4f;--stage-family-band:#50251d;
 --stage-expecting-band-on:#ffffff;--stage-baby-band-on:#ffffff;--stage-toddler-band-on:#ffffff;--stage-preschool-band-on:#ffffff;--stage-primary-band-on:#ffffff;--stage-family-band-on:#ffffff;
 --field-border:#8d979e;--danger:#ff9d94;
 --press:inset 0 -4px 0 rgba(0,0,0,.32);
 --shadow-sm:0 4px 0 -1px rgba(0,0,0,.4);
 --shadow-md:0 10px 22px -12px rgba(0,0,0,.8);
 --glass:rgba(26,30,33,.94);
}
/* Category accents are already text-safe on the ground, the card and their own tile; the ink
   aliases remain for older selectors. Internal token names are never shown. */
:root{--line-ink:var(--brand);--line-ns-ink:var(--line-ns);--line-ew-ink:var(--line-ew);--line-ne-ink:var(--line-ne);--line-cc-ink:var(--line-cc);--line-dt-ink:var(--line-dt);--line-te-ink:var(--line-te);--line-jr-ink:var(--line-jr)}
/* Spacing scale (spacing lane, docs/lanes/spacing-thesis.md). A 4px base in rem, so every gap grows
   with the A+ control and browser text size. Use the semantic roles in components; reach for a raw
   step only for a one-off inside a component. Rhythm: tight within a group, generous between groups,
   and always more space above a heading than below it. */
:root{
 --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;
 --space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-14:3.5rem;--space-16:4rem;--space-20:5rem;
 --space-tight:var(--space-1);          /* a label and its value, list items, kicker and title */
 --space-label:var(--space-2);          /* a small caps label to the list or value it names */
 --space-inline:var(--space-2);         /* chips, pills and buttons side by side */
 --space-stack:var(--space-3);          /* rows and items inside one group */
 --space-paragraph:var(--space-5);      /* paragraph to paragraph in running copy */
 --space-title-after:var(--space-2);    /* a card title to its first line */
 --space-heading-after:var(--space-4);  /* a section or group heading to the content it introduces */
 --space-grid:var(--space-5);           /* cards in one list or grid */
 --space-card:var(--space-5);           /* padding inside a card */
 --space-block:var(--space-6);          /* one block to the next inside a card or section */
 --space-group:var(--space-10);         /* one group to the next inside a section; space above a group heading */
 --space-section:clamp(var(--space-14),2.75rem + 3vw,var(--space-20)); /* section to section: 56px phone, 80px desktop */
}
/* Very narrow or zoomed (a 375px phone at 200%): drop the two widest steps one notch. */
@media(max-width:22.5em){:root{--space-section:var(--space-10);--space-group:var(--space-8)}}