/* ============================================================
   THEME.CSS — the site's skin for every hosted lab. Loaded LAST in each
   lab's <head> (after the app's own styles) by tools/build/import-app.js, together
   with app/themes/<slug>.css, so the labs look like the rest of the site
   without a line of the apps' own code changing.

   This file does two things:
   1. defines the lab palette, --t-*, from the brand tokens in brand.css. Those tokens change with the skin
      (light by default, dark when public/skin.js sets html[data-skin="dark"]), so everything below follows
      without naming a colour. An app's own dark rules and theme switch have nothing to switch to: the skin is
      the site's, and the switch is in the lab's bar;
   2. sets what every lab shares: no synthetic italics or bold, selection,
      focus, scroll colours, square corners on the things you press, capitals for the two big headings.

   app/themes/<slug>.css then maps that lab's own variables (--bg, --ink,
   --panel…) onto --t-*, once, and adds the few rules a variable cannot reach.
   Selectors there use :root:root:root so they beat the apps' own
   `:root:not([data-theme=…])` blocks whatever the order.

   The names are the jobs, not the hues (the hues are brand.css's):
     --t-burgundy  the warm voice (losses, "you", careful)
     --t-petrol    the cool voice (gains, "them", selected data)
     --t-action    the main action: navy (a clear blue at night), darker on hover; selected is navy too
   Words, grounds, lines and controls are ink and paper; the two voices colour data only.

   THE PAIRS THAT ARE ALLOWED (contrast on the page, WCAG AA = 4.5 text / 3 graphics), in BOTH skins:
     text         ink on paper 16+ · slate 7+ · the two voices as text on a panel 5+ (but they stay out of words)
     on a fill    paper on ink · paper on navy (11:1; night on the clear blue 9:1)
                  · paper on a voice
     never        a hairline (sand) as text or as a control's border
   A control's border is --t-edge (≥3:1), not --t-line.

   SHAPES AND TYPE: the COMPONENTS block in brand.css — one height, shape and
   type style per kind (control, choice, field, label, tag, panel, three
   heading sizes). Each skin sets its app's classes with those tokens
   (var(--rr-control), var(--rr-radius), font:var(--rr-label-font)…), never
   with numbers of its own, and tools/check/consistency.js measures the result.
============================================================ */

:root:root:root{
  --t-bg:var(--rr-paper);
  --t-surface:var(--rr-surface);
  --t-ink:var(--rr-ink);
  --t-ink-2:var(--rr-slate);
  --t-ink-3:var(--rr-slate);
  --t-edge:var(--rr-edge);
  --t-line:var(--rr-line);
  --t-line-2:var(--rr-line-2);
  --t-sunken:var(--rr-sunken);
  --t-burgundy:var(--rr-burgundy);
  --t-burgundy-soft:var(--rr-burgundy-soft);
  --t-petrol:var(--rr-petrol);
  --t-petrol-soft:var(--rr-petrol-soft);
  --t-cream:var(--rr-paper);
  --t-white:var(--rr-white);
  --t-signal:var(--rr-terracotta);
  --t-sans:var(--rr-sans);
  --t-mono:var(--rr-mono);
  --t-read:var(--rr-sans);
  --t-serif:var(--rr-sans);
  --t-radius:0;
  /* the same jobs as on the site: the main action and the selected state are navy (darker on hover);
     --t-petrol, --t-burgundy and their tints are for charts, tracks, maps and markers only */
  --t-action:var(--rr-accent);
  --t-action-hover:var(--rr-accent-hi);
  --t-on-action-hover:var(--rr-paper);
  --t-select:var(--rr-accent);
  --t-focus:var(--rr-accent);
  --t-scrim:var(--rr-scrim);
}
/* native controls, scrollbars and pickers follow the skin */
:root:root:root{color-scheme:light}
:root:root[data-skin="dark"]{color-scheme:dark}

html{background:var(--t-bg);color:var(--t-ink);-webkit-font-smoothing:antialiased;font-synthesis:none}
/* the bar runs edge to edge on every lab: no app keeps the browser's default 8px body margin */
body{margin:0}
::selection{background:var(--t-action);color:var(--t-cream)}
:focus-visible{outline:2px solid var(--t-focus);outline-offset:2px}
/* the brand is square: whatever an app rounds — a button, a card, a dot — is squared here, before any
   skin or app rule can round it (three :root beat an app's own classes) */
:root:root:root *,:root:root:root *::before,:root:root:root *::after{border-radius:0}
/* controls speak in 500, whatever weight an app gave its buttons */
:root:root:root button,:root:root:root [role="button"],:root:root:root [role="tab"]{font-weight:500}
/* emphasis is 500 or 600, never the browser's bold */
:root:root:root b,:root:root:root strong{font-weight:600}
/* the two big headings are the site's serif, in sentence case (whatever capitals an app gave them) */
:root:root:root h1,:root:root:root h2{text-transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* touch: every button and field is at least 44px tall, so a thumb can hit it (the site's phone rule) */
@media (pointer:coarse){
  button,[role="button"],select,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]){min-height:44px}
  button[aria-label]{min-width:44px}
}