/* ============================================================================
* FRONT DESK — the whole visual system, in one file.
*
* plans/front-desk-execution-plan.md §2. Six screens are written by six people at
* the same time; the only thing that keeps them looking like one product is that
* NONE of them writes CSS. Every class a screen needs is here, named, and listed
* below. A screen that needs a shape this file does not have reports it rather
* than inventing a sibling that is four pixels different.
*
* TOKENS FIRST. Nothing below uses a raw colour. The light palette is defined on
* bare `:root`; dark is defined twice — once under `prefers-color-scheme: dark`
* guarded by `:root:not([data-theme="light"])`, and once under
* `:root[data-theme="dark"]` — so the Settings switch wins in both directions and
* "follow the computer" still works when no choice has been made (§3 D6).
*
* COLOUR NEVER CARRIES MEANING ALONE (§2). `.chip` and `.stripe` take their tone
* from state.js, and the chip always renders the word beside the dot. A stripe is
* decorative and is always accompanied by its chip in the same row.
*
* ── THE SHARED CLASSES, and what each one is for ────────────────────────────
*
* .chip a state, as a word and a tone. Modifiers: .ok .wait .stop
* .calm — exactly the four tones state.js hands out. Always
* contains + the word.
* .chip-filter a filter button.