/* ============================================================
   Critical first-paint CSS (FOUC guard) — mea-web.

   Loaded as a RENDER-BLOCKING <link> in <head> immediately after
   the design tokens (tokens.css + themes/default.css), and BEFORE
   the heavy per-page @layer sheets and web.css. Its sole job is to
   paint the page background on the FIRST paint so there is no flash
   of an unstyled (white) page before web.css' `body { background:
   var(--t-bg) }` rule arrives.

   Why a separate sheet and not inline <style>: the mea-web CSP sets
   style-src 'self' (NO 'unsafe-inline'), so an inline critical block
   is forbidden. A tiny render-blocking external sheet achieves the
   same no-flash result while staying CSP-clean (web/security_headers.py).

   Token-only — zero hardcoded hex (D10). The tokens it references are
   already defined by the time this sheet is parsed (tokens.css loads
   first), so the var() chain resolves on first paint.

   The background is set on the ROOT (html) element — which the body
   inherits its painted surface from before any later sheet loads — and
   keyed to the same skin signals base.html emits:
     - participants  -> body.citizen-theme   (dark citizen surface)
     - desk roles     -> default              (light desk surface)
   This mirrors web.css' final `body { background: var(--t-bg) }` so the
   first paint already matches the fully-loaded page (no repaint jump).
   ============================================================ */

/* Desk (light) default — the dashboard page surface. */
html {
  background-color: var(--mea-surface-page);
}

/* Participant (citizen) dark identity. The skin is selected server-side
   (base.html adds body.citizen-theme for dark); match on the attribute the
   <body> carries so the root paints the dark surface from the first frame.
   The :has() selector keys the html background off the body's skin without
   any client JS — a pure CSS, server-decided theme. */
html:has(body.citizen-theme),
html:has(body[data-skin="dark"]) {
  background-color: var(--mea-surface-dark);
}
