@wtfalch/design 0.1.0 → 0.3.0

package/dist/tf.css

@@ -0,0 +1,3362 @@
+/* ---- tokens.css ---- */
+/**
+ * The token vocabulary.
+ *
+ * This file is the contract. `styles.css` may only consume these; a theme may
+ * only supply values for them. Nothing else is themeable, and that is the
+ * point: the moment a theme can ship a selector, every theme becomes a fork of
+ * the stylesheet and no change to the app is safe again.
+ *
+ * What makes a theme expressive is not permission to write rules — it is a
+ * vocabulary wide enough that the thing you want to vary is a value. So this
+ * covers seven axes, not just colour: a theme can change how the app *moves*
+ * and how dense it is without touching a selector.
+ *
+ * Base values here are today's, exactly. Adding this file changed nothing on
+ * screen, which is how a 200-literal refactor stays reviewable.
+ *
+ * Keys are mirrored in `themes.ts` as `ThemeTokens`. Add one here, add it
+ * there — a token a theme cannot name is a token no theme can use.
+ */
+
+:root {
+  /* ---- colour ------------------------------------------------------- */
+  /* Low-chroma slate, and a muted teal.
+     Neither warm nor cold on purpose: a beige-leaning neutral reads cosy and a
+     navy-leaning one reads cold, and this is a tool somebody keeps open all
+     day. Teal sits between the two, and unlike a saturated blue it does not
+     compete with the text for attention.
+     Every pair below is measured rather than chosen -- see the block comment
+     above `--border-strong`. */
+  --bg: #12151a;
+  --panel: #191d24;
+  --panel-2: #222831;
+  --border: #262c36;
+  --text: #e4e8ee;
+  --muted: #98a1b0;
+  --accent: #4fb3a8;
+  --accent-dim: #2f6b66;
+  /* Status colours that survive a light background too. The old set was
+     dark-mode neon -- `#4ade80` on white is 1.74:1 -- and the light theme never
+     overrode them, so a `running` pill was unreadable on Paper. */
+  --good: #68c48c;
+  --warn: #d9a65a;
+  --bad: #e28680;
+  /* Information, as a colour of its own. `Callout`'s info tone used to borrow
+     the accent for its edge and take no fill, so on the two teal themes an
+     "information" box was a teal-edged box and William read it as "isn't
+     information blue?" (2026-09-03). It is now: blue, and the fourth status
+     colour beside good, warn and bad. */
+  --info: #74b3ff;
+  /* Text that sits *on* the accent. Was hardcoded `#fff`, which made a primary
+     button vanish under any pale accent — white on near-white. */
+  /* Near-black, because the accent is light enough to need it. White on the old
+     `#5b9dff` was 2.72:1 -- the primary button, the single most important
+     control in the app, failed the body-text minimum by a wide margin. */
+  --on-accent: #06181a;
+
+  /* ---- surface ------------------------------------------------------ */
+  /* Consumed as `background:`, never `background-color:`, so a theme may hand
+     it a gradient or an image rather than only a colour. */
+  --app-bg: var(--bg);
+  /* A slot. Inert unless a theme fills it — see `body::before` in styles.css.
+     This is how a theme gets a grain, a vignette or a wash without shipping a
+     rule to create the layer. */
+  --app-overlay: none;
+  --app-overlay-opacity: 0;
+  /* Elevation as a scale rather than one shadow. Black is right on a dark UI
+     and muddy on a light one, so this has to be a theme's decision. */
+  --shadow-1: 0 6px 20px rgba(0, 0, 0, 0.22);
+  --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.28);
+  --shadow-3: 0 10px 34px rgba(0, 0, 0, 0.3);
+  --scrim: rgba(0, 0, 0, 0.45);
+
+  /* ---- typography --------------------------------------------------- */
+  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  --font-size: 14px;
+  /* The scale, because there was not one.
+     `styles.css` carried eleven distinct sizes -- 10, 10.5, 11, 12, 13, 14, 15,
+     16, 17, 18, 19 -- and used `--font-size` exactly once. Eleven sizes is not a
+     hierarchy, it is eleven separate decisions, and it is most of why the app
+     felt uneven: two labels doing the same job would differ by a pixel for no
+     reason anybody could state.
+     Six steps, and every one of them earns its place: `xs` for the meter row and
+     mono chips, `sm` for hints, base for body, then three heading steps. A theme
+     can move the whole scale by moving `--font-size`, because they are all
+     relative to it.
+
+     `calc` off the token rather than `rem`, which is relative to the *root*
+     element and not to this -- `--font-size` is set on `body`, so a rem scale
+     would have silently resolved against the browser's 16px and every step
+     would have been wrong by a pixel and a half. */
+  /* `2xs` exists so the scale never has to round *up*. The first pass mapped
+     10px and 10.5px onto 11px and 15px onto 16px, and the app visibly grew --
+     a scale that inflates is not a scale, it is a resize. */
+  --text-2xs: calc(var(--font-size) * 0.714);
+  --text-xs: calc(var(--font-size) * 0.786);
+  --text-sm: calc(var(--font-size) * 0.857);
+  --text-base: var(--font-size);
+  --text-md: calc(var(--font-size) * 1.143);
+  --text-lg: calc(var(--font-size) * 1.286);
+  --text-xl: calc(var(--font-size) * 1.429);
+  --line-height: 1.5;
+  --tracking: 0;
+  --weight: 400;
+  --weight-strong: 600;
+
+  /* ---- shape -------------------------------------------------------- */
+  /* There were fifteen distinct radii and a `--radius` token used nine times
+     while literal `6px` appeared twelve. Four steps and a pill is the whole
+     range anything here actually needed. */
+  --radius-sm: 3px;
+  --radius: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-pill: 999px;
+  --border-width: 1px;
+  /* The surface a control sits on: an input, a select, a button that is not
+     the primary one. Derived from the two panel tones rather than stated, so a
+     theme that moves the panels moves the controls with them -- but themeable,
+     because a theme may want a control to read as inset or raised against a
+     panel it chose. Same bargain as `--app-bg`.
+     It lived on `:root` in `styles.css` and was used seven times, which made it
+     a token in every respect except being in the vocabulary a theme can name.
+     The audit that found it was looking for something else. */
+  --control: color-mix(in srgb, var(--panel-2) 62%, var(--panel));
+
+  /* Two jobs, two tokens.
+     `--border` was drawing both the hairline between two rows and the outline
+     of every input, select and button. Those have different requirements: a
+     divider is decoration and has no contrast minimum, while a control's
+     boundary is what tells you it is a control -- WCAG 1.4.11 wants 3:1 for
+     that. One token could satisfy either but not both, and it was set for the
+     divider, so every input in the app outlined itself at 1.26:1.
+     Solved for the threshold rather than picked: this is the first step on the
+     neutral ramp that clears 3:1 against `--panel`. */
+  --border-strong: #5f6a7a;
+
+  /* The paper an illustration is drawn on -- the white fill in an Open Peeps
+     figure, as opposed to the ink, which takes `currentColor`. Defaults to the
+     panel so a figure sits on its surface without being told.
+     It was a slot in every respect but the one that matters: used as
+     `var(--illo-paper, var(--panel))` and declared nowhere, so it rendered
+     correctly and no theme could fill it. A slot the vocabulary does not
+     contain is themeable only in appearance. */
+  --illo-paper: var(--panel);
+
+  /* The checkmark, once. Drawn as a mask so whatever wears it supplies its own
+     colour -- the choice row's tick and the select's are the same shape and
+     should not be two paths that drift. */
+  --tick-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 13 4 4 10-10' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+
+  /* ---- density ------------------------------------------------------ */
+  /* One scale. `--density` multiplies the structural gaps — the grid, the
+     modals, the settings panes — so a theme can be roomy or tight without
+     restating every padding in the stylesheet. */
+  --density: 1;
+
+  /* One scale, in fours, for padding and margin and gap alike.
+     There were twenty-four distinct spacing values in `styles.css` -- every
+     integer from 1 to 16, then 18, 20, 22, 24, 26, 28, 40, 60 -- against
+     twenty-six uses of a token. That is not a rhythm, it is two hundred and
+     twenty-five separate decisions, and it is why two rows doing the same job
+     sat a pixel apart.
+     Fours because the app's smallest real gap is 4px and everything above it
+     was already trying to be a multiple of four and missing: 6 and 10 and 14
+     are what you write when there is no scale to reach for.
+     `--density` multiplies the structural steps, so a theme can be roomy or
+     tight without restating a single padding. */
+  --space-1: calc(4px * var(--density));
+  --space-2: calc(8px * var(--density));
+  --space-3: calc(12px * var(--density));
+  --space-4: calc(16px * var(--density));
+  --space-5: calc(20px * var(--density));
+  --space-6: calc(24px * var(--density));
+  --space-8: calc(32px * var(--density));
+  --space-10: calc(40px * var(--density));
+  --space-15: calc(60px * var(--density));
+
+  /* Below the scale, and deliberately outside it: a 1px or 2px offset is not
+     spacing, it is optical alignment -- nudging a glyph off a baseline, or a
+     mark off a cap height. Rounding those up to 4px would move things that were
+     placed by eye. */
+  --nudge: 2px;
+
+
+  /* ---- motion ------------------------------------------------------- */
+  /* Four durations existed, written four ways — `0.12s` and `120ms` were the
+     same value spelled differently. A theme sets the character here: calm at
+     320ms ease-out, or snappy at 90ms.
+     `--dur-drag` is read from JavaScript by the tile-reorder FLIP animation,
+     which is the one piece of motion CSS cannot reach. */
+  --dur-fast: 120ms;
+  --dur-md: 200ms;
+  --dur-slow: 300ms;
+  --dur-drag: 180ms;
+  --ease: cubic-bezier(0.2, 0, 0, 1);
+  --ease-out: ease-out;
+  /* A spring, sampled: stiffness 170, damping 26, no overshoot -- what a knob
+     does under a thumb rather than what a fade does. Written as `linear()` so
+     a consumer needs no animation engine, and the same curve `chef`'s design
+     system calls `spring/gentle`; it arrived here 2026-09-05 with the switch's
+     async state, so the knob's travel could be copied rather than approximated.
+     Played over `--dur-md`. A theme may replace it with any easing. */
+  --ease-spring: linear(0, 0.0315, 0.1058, 0.2003, 0.3012, 0.4, 0.4917, 0.5741, 0.6464, 0.7086, 0.7614, 0.8057, 0.8425, 0.8729, 0.8979, 0.9182, 0.9346, 0.9479, 0.9586, 0.9672, 0.9741, 0.9795, 0.9839, 0.9873, 1);
+
+  /* ---- interaction -------------------------------------------------- */
+  --hover-lift: 0px;
+  --hover-scale: 1;
+  /* Read by every `:active` rule in `styles.css` -- reserved since the
+     vocabulary was written, used since 2026-09-03. Small: a control that
+     visibly shrinks under the pointer reads as a toy. Reduced motion puts it
+     back to 1 below. */
+  --press-scale: 0.985;
+  /* How much darker a control goes while pressed: the share of `--text` mixed
+     into its hover colour. One number, so a button, a row and a tab press
+     the same amount. */
+  --press-ink: 9%;
+  /* The accent itself, not a pale tint of it. `--accent-dim` was 1.90:1 against
+     the panel, so the ring marking the focused control was fainter than the
+     control. */
+  --focus-ring: 0 0 0 2px var(--accent);
+
+  /* ---- fixed -------------------------------------------------------- */
+  /* Not themeable: geometry other things are measured against. The panel head
+     is pinned so a head without a cog — the studio's preview — is the same
+     height as one with, and the applet gets the same remainder in both. */
+  --tile-control: 34px;
+}
+
+/* Motion is an accessibility setting before it is a style, so this outranks
+   every theme. Declared here rather than in `styles.css` because it is part of
+   the vocabulary's contract: a theme may set the durations, it may not decide
+   whether they apply. */
+/* `!important`, and it is the one place in the vocabulary that carries it.
+   A theme is applied as inline styles on the root, and an inline declaration
+   beats a stylesheet rule -- so a theme that set `--dur-md: 260ms` kept it
+   under `prefers-reduced-motion: reduce`, measured, and the three built-ins
+   only ever passed because none of them sets a duration. "Outranks every
+   theme" has to be true of a theme written by somebody who never read this
+   file, and the cascade is the only thing that can make it so. */
+/*
+ * Three tokens derived from colour tokens, re-derived wherever a theme lands.
+ *
+ * Declared on `:root` alone, `--control`, `--illo-paper` and `--focus-ring`
+ * resolve their `var()` against the root's palette and are inherited as
+ * finished values. A theme applied to a subtree with `applyTheme(theme, el)`
+ * then gets the root's control surface and the root's focus ring under its own
+ * panels: found on 2026-09-05 as black inputs and a teal ring on a light theme
+ * painted beside a dark one. `data-theme` is the attribute `applyTheme` sets,
+ * so a themed element derives them again from its own values.
+ */
+[data-theme] {
+  --control: color-mix(in srgb, var(--panel-2) 62%, var(--panel));
+  --illo-paper: var(--panel);
+  --focus-ring: 0 0 0 2px var(--accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --dur-fast: 0s !important;
+    --dur-md: 0s !important;
+    --dur-slow: 0s !important;
+    --dur-drag: 0s !important;
+    --hover-lift: 0px !important;
+    --hover-scale: 1 !important;
+    --press-scale: 1 !important;
+  }
+}
+/* ---- styles.css ---- */
+/* The cascade, written down.
+ *
+ * Two rules of equal specificity are decided by which came last, so this
+ * order is behaviour rather than tidiness. It follows the order the rules
+ * appeared in the stylesheet they were lifted from; `base.css` is first
+ * because it holds the reset and the shared utilities everything else
+ * assumes.
+ *
+ * `scripts/copy-css.mjs` flattens these into one file at build time.
+ */
+/* ---- ./base.css ---- */
+/* Light, only under the `system` theme. This used to override `:root`
+   unconditionally, so choosing a dark theme on a light-mode laptop got
+   silently repainted. Every other theme states its own palette. */
+@media (prefers-color-scheme: light) {
+  :root[data-theme='system'] {
+      --bg: #f3f5f7;
+      --panel: #ffffff;
+      --panel-2: #e9edf1;
+      --border: #e4e8ec;
+      --border-strong: #8792a1;
+      --text: #191d23;
+      --muted: #5d6773;
+      --accent: #0e7872;
+      --accent-dim: #7fbdb8;
+      --on-accent: #ffffff;
+      /* Overridden here, which the old light theme never did: the base set is
+         tuned for a dark panel, and `#4ade80` on white is 1.74:1. */
+      --good: #1c7a4a;
+      --warn: #8a6216;
+      --bad: #b3312c;
+      --info: #216bc9;
+      --shadow-1: 0 4px 14px rgba(16, 24, 40, 0.08);
+      --shadow-2: 0 8px 24px rgba(16, 24, 40, 0.10);
+      --shadow-3: 0 12px 32px rgba(16, 24, 40, 0.12);
+      --scrim: rgba(16, 24, 40, 0.32);
+    }
+}
+
+/* Derived from the two surfaces every theme already defines, so a theme gets a
+   control colour without knowing this exists. */
+/* Pseudo-elements too. `*` does not match them, and `box-sizing` is not
+   inherited, so every `::before` and `::after` in the app was quietly
+   content-box. That is invisible until one of them has a border: the checkbox
+   ring (`.choice::after`, 16px + 1px each side) and the tick that is supposed
+   to sit inside it (`.choice::before`, 16px flat) were given the same `top` and
+   `right` and came out two pixels different in size -- so the tick sat up and
+   to the right of the ring it was meant to be centred in, by exactly one
+   pixel each way. */
+*,
+*::before,
+*::after { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  /* `background`, not `background-color`: a theme may hand this a gradient or
+     an image, and `background-color` would refuse both. */
+  background: var(--app-bg);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  letter-spacing: var(--tracking);
+  font-weight: var(--weight);
+  min-height: 100vh;
+}
+
+/* The overlay slot. Always present, inert until a theme fills it -- which is
+   how a theme gets a grain, a wash or a vignette without shipping a rule to
+   create the layer it needs. */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background: var(--app-overlay);
+  opacity: var(--app-overlay-opacity);
+}
+
+.app { position: relative; z-index: 1; }
+
+/* Controls -----------------------------------------------------------------
+   One definition for everything you can press, type in, or open. They differ
+   in what they do, not in how they look or how they answer a pointer.
+   That last part is why this is one block and not four. The states used to be
+   written per element: buttons got a hover border, fields did not; fields got
+   a focus border, buttons did not; buttons dimmed when disabled, fields stayed
+   solid. So a select sat inert under the cursor beside a picker that lit up,
+   and read as disabled rather than as a different kind of control.
+   `--control` is `--panel-2` mixed toward `--panel`: the surface every theme
+   already defines for controls, lightened because these sit on white cards
+   where the flat grey reads as recessed rather than as something to use. It is
+   derived rather than declared -- a new token would have to be added to every
+   theme in `themes.ts`, and a theme that missed it would lose its controls. */
+button,
+input,
+textarea,
+select {
+  font: inherit;
+  color: var(--text);
+  background: var(--control);
+  /* `--border-strong`, not `--border`: this rule is what outlines every input,
+     select, textarea and button, and an outline you cannot see is a control you
+     cannot find. Dividers keep the quiet one. */
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+}
+
+/* The two differences, both deliberate: a button's box is padding around a
+   word and is the size of that word; a field's holds a line of text and fills
+   what it is given. */
+/* A button lays its contents out, which it did not before.
+   An `<svg>` is an inline box, so it sat on the text baseline -- a glyph
+   drawn to a 24-unit grid with its optical centre in the middle ends up a
+   couple of pixels low against the cap height beside it. Nothing was wrong with
+   the icon; the button simply had no opinion about how to arrange two things.
+   `inline-flex` and a gap gives it one, and the gap replaces the space
+   character people were putting between an icon and its label. */
+button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  cursor: pointer;
+}
+
+/* A button that stays pressed. `aria-pressed`, not a checkbox: a tick box
+   collects an answer and applies it on save, and this narrows the list under
+   you as you press it. It sits in a row of Selects and has to be the same
+   control height and the same shape as they are -- a 17px tick box beside three
+   38px dropdowns reads as something left over rather than as the fourth filter.
+
+   Several places already drew this by hand as `.chat-bar-btn.on`. This is the
+   same look, said once, on a plain button. */
+button[aria-pressed='true'] {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
+}
+
+button[aria-pressed='true']:hover:not(:disabled) { border-color: var(--accent); }
+
+/* The glyph never shrinks: in a narrow row flexbox would take it from the icon
+   before the text, and half an icon is not a smaller icon. */
+button > svg { flex: none; }
+
+.size-sm { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); }
+
+.size-md { font-size: var(--text-base); padding: var(--space-2) var(--space-3); }
+
+.size-lg { font-size: var(--text-md); padding: var(--space-3) var(--space-4); }
+
+/* Square, for the icon-only ones: equal padding or the glyph sits off-centre. */
+.icon-btn.size-sm { padding: var(--space-1); }
+
+.icon-btn.size-md { padding: var(--space-2); }
+
+.icon-btn.size-lg { padding: var(--space-3); }
+
+input, textarea, select { width: 100%; }
+
+/* Never by the drag handle.
+   How tall a box is is a decision this app makes -- the composer grows with
+   what you type and shrinks when you send, the studio's editor fills its pane
+   -- and a corner somebody can drag fights whichever code owns that height.
+   Three rules said `resize: vertical` and the rest said `none`, which is the
+   same disagreement written twice. */
+textarea { resize: none; }
+
+button:hover:not(:disabled),
+input:hover:not(:disabled),
+textarea:hover:not(:disabled),
+select:hover:not(:disabled) { border-color: var(--accent); }
+
+/* `:focus-visible` on the button so a click does not leave a ring behind it,
+   `:focus` on the fields because a focused field is a place you are typing and
+   should say so however you got there. */
+button:focus-visible,
+input:focus,
+textarea:focus,
+select:focus { outline: none; border-color: var(--accent); }
+
+/* The checkbox, drawn rather than inherited.
+   The native one is the platform's, which means it is a different shape, a
+   different blue and a different size on every machine tf runs on -- the one
+   control in the app that refused to join the design system. It is also the
+   only form control that can be replaced in pure CSS: unlike a select, whose
+   dropdown belongs to the OS, a checkbox is a box and a tick.
+   Which matters here more than usual, because the chat applet is plain HTML in
+   a sandboxed frame with no React and no bundler. A CSS answer is the only kind
+   both halves of the app can share.
+   This also ends a duplication: `width: auto; margin: 0; flex: none` appeared
+   four times in this file, each one working around the global
+   `input { width: 100% }` that would otherwise stretch a checkbox across its
+   row. Sized here once, so there is nothing left to work around. */
+input[type='checkbox'],
+input[type='radio'] {
+  appearance: none;
+  -webkit-appearance: none;
+  flex: none;
+  width: 17px;
+  height: 17px;
+  margin: 0;
+  padding: 0;
+  display: inline-grid;
+  place-content: center;
+  border: var(--border-width) solid var(--border-strong);
+  background: var(--panel);
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease),
+              border-color var(--dur-fast) var(--ease);
+}
+
+input[type='checkbox'] { border-radius: var(--radius-sm); }
+
+input[type='radio'] { border-radius: var(--radius-pill); }
+
+/* The tick and the dot, scaled from nothing so the change is visible rather
+   than instantaneous -- "instant state changes" being the anti-pattern the
+   control most often commits. */
+input[type='checkbox']::before,
+input[type='radio']::before {
+  content: '';
+  transform: scale(0);
+  transition: transform var(--dur-fast) var(--ease);
+  background: var(--on-accent);
+}
+
+input[type='checkbox']::before {
+  width: 11px;
+  height: 11px;
+  /* A tick as a clip path rather than a glyph: a character would be the
+     platform's font, which is the thing this rule exists to escape. */
+  clip-path: polygon(14% 46%, 0 60%, 39% 100%, 100% 22%, 86% 8%, 39% 72%);
+}
+
+input[type='radio']::before {
+  width: 7px;
+  height: 7px;
+  border-radius: var(--radius-pill);
+}
+
+input[type='checkbox']:checked,
+input[type='radio']:checked,
+input[type='checkbox']:indeterminate {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+input[type='checkbox']:checked::before,
+input[type='radio']:checked::before { transform: scale(1); }
+
+/* Neither on nor off, which the settings panes need for a group half-ticked. */
+input[type='checkbox']:indeterminate::before {
+  transform: scale(1);
+  width: 9px;
+  height: 2px;
+  clip-path: none;
+  border-radius: 1px;
+}
+
+input[type='checkbox']:hover:not(:disabled),
+input[type='radio']:hover:not(:disabled) { border-color: var(--accent); }
+
+input[type='checkbox']:focus-visible,
+input[type='radio']:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+
+input[type='checkbox']:disabled,
+input[type='radio']:disabled { cursor: not-allowed; background: var(--panel-2); }
+
+button:disabled,
+input:disabled,
+textarea:disabled,
+select:disabled { opacity: 0.45; cursor: not-allowed; }
+
+button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
+
+/* A disabled primary is not a faded primary.
+   `opacity: .45` was the whole of it, and a coloured fill at 45% is still a
+   coloured fill: the one button you cannot press stayed the most prominent
+   thing on the panel. That got worse when onboarding started holding people at
+   a disabled Next. So it gives up the fill entirely and becomes the shape of a
+   disabled control -- the opacity then has nothing left to do. */
+button.primary:disabled {
+  background: var(--panel-2);
+  border-color: var(--border);
+  color: var(--muted);
+  opacity: 1;
+}
+
+/* Working, which is not the same as disabled.
+   Both were spelled `disabled` with a changed label, so a 160 MB download and a
+   button you may never press looked identical -- for two minutes, with nothing
+   moving. This keeps the accent, because something *is* happening, and puts a
+   line under it that travels.
+   `aria-busy` rather than a class: the attribute is what a screen reader reads,
+   and styling the thing that carries the meaning is how they stay in step. */
+button[aria-busy='true'] {
+  position: relative;
+  overflow: hidden;
+  cursor: progress;
+}
+
+/* Busy is unpressable *and* undimmed, which needs saying because the two rules
+   above pull opposite ways. A download that has started cannot be started
+   again, so the button is genuinely `disabled` -- but `:disabled` is drawn to
+   say "not for you", and a primary one gives up its fill entirely. Applied to
+   something that is working, that reads as a control that failed and went
+   grey. So a busy button keeps every colour it had and takes only the loss of
+   the cursor and the press; the travelling line is what says why. */
+button[aria-busy='true']:disabled {
+  opacity: 1;
+  cursor: progress;
+}
+
+button.primary[aria-busy='true']:disabled {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--on-accent);
+}
+
+button[aria-busy='true']::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 2px;
+  width: 40%;
+  background: currentColor;
+  opacity: 0.55;
+  animation: ds-busy 1.1s var(--ease) infinite;
+}
+
+@keyframes ds-busy {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(350%); }
+}
+
+/* Motion is an accessibility setting first. Without it the bar sits still at
+   the leading edge, which still says "this one is working" without moving. */
+@media (prefers-reduced-motion: reduce) {
+  button[aria-busy='true']::after { animation: none; width: 100%; opacity: 0.35; }
+}
+
+/* Four kinds, four appearances.
+   `ghost` had no rule at all -- it was a default button with a class that did
+   nothing, so two of the four were the same control with two names. And
+   `danger` was a default button that turned red *on hover*, which is the one
+   moment it is too late to be told: you learn an action is destructive by
+   pointing at it. Both now say what they are before you touch them. */
+
+/* Quiet: no border, no fill. For the action beside the action -- Cancel next to
+   Save -- where a bordered box competes with the thing it is next to. */
+button.ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--muted);
+}
+
+button.ghost:hover:not(:disabled) {
+  background: var(--panel-2);
+  border-color: transparent;
+  color: var(--text);
+}
+
+/* layout ------------------------------------------------------------- */
+
+/* Full width, and a flex column so the conversation fills the space exactly --
+   equal padding top and bottom, with no magic viewport arithmetic. */
+.app {
+  padding: var(--space-4) var(--space-6);
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* The desktop window on macOS draws its three buttons over the page
+   (`titleBarStyle: hiddenInset`), and they landed on top of the mark: the
+   buttons at y 13..25, the mark starting at y 25, measured. Three answers
+   were tried on 2026-09-02. The mark beside the buttons on one row (#163):
+   a wordmark competing with the traffic lights for the corner, not wanted.
+   A strip for the buttons with the mark under it (#164): 36px spent on a
+   band holding three buttons, then two clusters of small things stacked in
+   the corner -- the fix for a collision, not a layout. This is the third:
+   **no mark in the desktop window.** The Dock has the icon, the corner
+   belongs to the buttons, and the header is a Mac toolbar on one row --
+   title centred on the whole width, controls right -- which is what Finder,
+   Notes, Linear and Raycast do. The mark keeps every job it is not
+   redundant in: a browser tab, a Windows or Linux window, where there are
+   no buttons to yield to. `--traffic-lights` is the room the header leaves
+   for them on the left; the buttons themselves are put on this row's centre
+   line by `trafficLightPosition` in `desktop/main.js`.
+
+   Then a fourth answer, the one kept: the mark is in the header after all,
+   at the far right, on every platform (#170). No corner to fight over --
+   the right one has no buttons anywhere -- and the app has its name in its
+   own frame, which "no mark" (#168) had quietly taken away.
+
+   And with nothing on the left, nothing needs lining up with the buttons.
+   #170 brought them down onto the header's centre line, and that read as
+   air above them; they are back where macOS draws them, the page keeps its
+   padding, and the left of the bar is the empty half of the pair that
+   centres the title -- so no padding is reserved for them either, or the
+   title would sit 28px off centre. `html.mac-desktop` stays on the root for
+   whatever next needs to know. */
+/* The wordmark, and the same mark the app icon carries: `Brand.tsx` draws the
+   path `desktop/build/icon.html` draws, and `test/brandMark.test.ts` holds
+   them to one string. It was "TF" set in the system font at -0.14em, matching
+   an icon that did the same; both are now one drawn line, and the tracking
+   arithmetic that used to live here went with the letters.
+   The height comes off the type scale rather than being a pixel: 1.5 times
+   `--text-md` is the line box the old wordmark occupied, so the header did not
+   change height when the letters became a drawing, and a theme that scales
+   the type scales the brand with it. `width: auto` lets the viewBox set the
+   aspect.
+   `--good` because it is the palette's one green and every theme already
+   overrides it for its own ground -- Paper's is the deep green that survives
+   a light panel. The mark is not a status pill, but it is the same green, and
+   a second green token would be a second decision to keep in step. */
+.brand {
+  display: block;
+  height: calc(var(--text-md) * 1.5);
+  width: auto;
+  color: var(--good);
+  /* A product that animates its mark turns it about its own centre, which is
+     the ink box's; tf's cog does. */
+  transform-origin: center;
+}
+
+@keyframes ds-callout-clock {
+  from { transform: scaleX(1); }
+  to { transform: scaleX(0); }
+}
+
+/* (The bordered head bar that used to live here is gone. It was a second
+   `.card-head` -- same name, different thing -- and the only place it was ever
+   used was the gallery page documenting it. A card that holds rows now takes
+   `title` like any other, and the header the component draws is the one
+   header.) */
+.row { display: flex; align-items: center; gap: var(--space-3); }
+
+.grow { flex: 1; min-width: 0; }
+
+.mono { font-family: var(--font-mono); font-size: var(--text-sm); }
+
+.empty { color: var(--muted); text-align: center; padding: var(--space-10) 0; }
+
+/* A word attached to a thing.
+   One grey was doing three unrelated jobs. "10.62 GB" is a *measurement*, an
+   inert fact you look up when you want it. "reads images" is a *capability*,
+   one of a set you scan across. "sign-in expired" is a *state*, and the only
+   one of the three that should ever pull the eye. Drawn identically, the
+   measurement shouted as loudly as the expired sign-in and the capabilities
+   did not read as a set at all -- a row of five identical grey chips where
+   two were sizes and three were things the model can do.
+
+   So: weight follows urgency. Quiet is borderless, the chip is the default,
+   and only a state gets colour. */
+.pill {
+  display: inline-block;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  line-height: 1.5;
+  padding: 2px var(--space-2);
+  border-radius: var(--radius-lg);
+  /* Ink at low alpha, not a named surface -- the same lesson the skeleton
+     taught. `background: var(--panel-2)` and `border: var(--border)` are
+     invisible the moment a chip lands on a `--panel-2` surface, which is
+     exactly what `.modal-body .card` is: every capability tag in the download
+     list rendered as bare text on an identically coloured box. A translucent
+     fill is a step from whatever is behind it, on every surface, without the
+     chip knowing what that is. */
+  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
+  background: color-mix(in srgb, currentColor 10%, transparent);
+  color: var(--text);
+}
+
+/* A fact, not a badge. Numbers and transports have no state to report and were
+   never worth a box; this leaves them legible and out of the way. */
+.pill-quiet {
+  border-color: transparent;
+  background: none;
+  color: var(--muted);
+}
+
+/* The four states, named as `.callout` names them so one vocabulary covers the
+   app. Tinted rather than outlined: a border alone at this size is two pixels
+   of colour, which is not enough to survive being read past.
+
+   The tint mixes into `--panel`, not `--panel-2`. On a dark theme either works;
+   on a light one, mixing a mid-dark tone into the *darker* surface moves the
+   background towards the text and drops the label to 3.9:1. Ten per cent of the
+   tone in the lighter surface holds ≥4.65:1 in every theme, in both
+   schemes -- measured, not guessed. */
+.pill-info { color: var(--accent); border-color: var(--accent-dim); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
+
+.pill-good { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, var(--border)); background: color-mix(in srgb, var(--good) 10%, var(--panel)); }
+
+.pill-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); background: color-mix(in srgb, var(--warn) 10%, var(--panel)); }
+
+.pill-bad { color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 45%, var(--border));  background: color-mix(in srgb, var(--bad) 10%, var(--panel)); }
+
+/* A pill following a name needs the gap outside its own border. Leading
+   whitespace inside the span puts it under the pill's background instead,
+   which reads as the badge touching the word it qualifies. */
+.row-pill { margin-left: var(--space-2); vertical-align: baseline; }
+
+/* The tile's only control. Dim until hovered: it is chrome on someone's app. */
+.icon-btn {
+  display: inline-flex; align-items: center; padding: var(--space-1);
+  background: none; border: 0; color: var(--muted); opacity: 0.6; cursor: pointer;
+}
+
+.icon-btn:hover { opacity: 1; color: var(--text); }
+
+@keyframes ds-bar {
+  0% { transform: translateX(-110%); }
+  100% { transform: translateX(320%); }
+}
+
+@keyframes ds-toast-in {
+  from { opacity: 0; transform: translateY(8px); }
+}
+
+@keyframes ds-toast-out {
+  to { opacity: 0; transform: translateY(4px); }
+}
+
+/* Square, so it reads as an icon beside the picker rather than a second
+   button competing with it. */
+.icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--tile-control, 34px);
+  height: var(--tile-control, 34px);
+  padding: 0;
+  flex: none;
+  color: var(--muted);
+  background: var(--panel);
+}
+
+.icon-btn:hover:not(:disabled) { color: var(--text); }
+
+/* skeleton pulse ------------------------------------------------------ */
+@keyframes ds-pulse {
+  0%, 100% { opacity: 0.25; }
+  50% { opacity: 0.65; }
+}
+
+/* pressed ---------------------------------------------------------------- */
+/* Every control that answers a hover answers a press. There was one `:active`
+   in this sheet (the panel grip) against fifty-six `:hover`s, so a button
+   changed colour under the pointer and then nothing happened when it was
+   pushed -- the click landed, and the control did not say so. The rule is one
+   rule: a pressed control is its hover state with `--press-ink` of the text
+   colour mixed in, scaled by `--press-scale`, and it changes at once -- no
+   transition on the way down, because a press is an event, not a state
+   somebody eases into. Hover states stay where they are; these sit beside
+   them and derive from them, so a theme that moves a hover colour moves the
+   press with it. `:not(:disabled)` throughout, as the hovers are: a disabled
+   control does not respond, and the base rule already says so. */
+
+/* `:where(button)` so this carries no specificity of its own: a component's
+   press rule below -- a card, a tab, a rail item, all of them buttons --
+   wins by coming later, instead of every one having to restate `button`. */
+:where(button):active:not(:disabled) {
+  background: color-mix(in srgb, var(--text) var(--press-ink), var(--control));
+  border-color: var(--accent);
+  transform: scale(var(--press-scale));
+  transition: none;
+}
+
+button.primary:active:not(:disabled) {
+  background: color-mix(in srgb, var(--text) var(--press-ink), var(--accent));
+  border-color: color-mix(in srgb, var(--text) var(--press-ink), var(--accent));
+}
+
+button.ghost:active:not(:disabled) {
+  background: color-mix(in srgb, var(--text) var(--press-ink), var(--panel-2));
+  border-color: transparent;
+}
+
+button[aria-pressed='true']:active:not(:disabled) {
+  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
+}
+
+/* Inputs are not pressed, they are focused; the base rule's `button` list
+   would otherwise catch the search box beside the Search button. */
+input:active, textarea:active, select:active { transform: none; }
+
+/* rendered markdown --------------------------------------------------- */
+.md > *:first-child { margin-top: 0; }
+
+.md > *:last-child { margin-bottom: 0; }
+
+.md p { margin: 0 0 var(--space-2); }
+
+.md h1, .md h2, .md h3, .md h4 {
+  margin: var(--space-4) 0 var(--space-2);
+  line-height: 1.3;
+  font-weight: 600;
+}
+
+.md h1 { font-size: var(--text-lg); }
+
+.md h2 { font-size: var(--text-md); }
+
+.md h3 { font-size: var(--text-base); }
+
+.md h4 { font-size: var(--text-base); }
+
+.md ul, .md ol { margin: 0 0 var(--space-2); padding-left: var(--space-5); }
+
+.md li { margin: var(--space-1) 0; }
+
+.md code {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 1px var(--space-1);
+}
+
+.md pre {
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: var(--space-3) var(--space-3);
+  overflow-x: auto;
+  margin: 0 0 var(--space-2);
+}
+
+.md pre code { background: none; border: none; padding: 0; font-size: var(--text-sm); }
+
+.md blockquote {
+  margin: 0 0 var(--space-2);
+  padding-left: var(--space-3);
+  border-left: 3px solid var(--border);
+  color: var(--muted);
+}
+
+.md table { border-collapse: collapse; margin: 0 0 var(--space-2); display: block; overflow-x: auto; }
+
+.md th, .md td { border: 1px solid var(--border); padding: var(--space-1) var(--space-2); text-align: left; }
+
+.md th { background: var(--panel-2); font-weight: 600; }
+
+.md a { color: var(--accent); }
+
+.md hr { border: none; border-top: 1px solid var(--border); margin: var(--space-3) 0; }
+
+/* settings ------------------------------------------------------------ */
+.set { margin-bottom: var(--space-5); }
+
+/* `.card-title`, in a stylesheet. Small-caps muted 12px next to a card whose
+   title is 16px text made the same heading look like two different ranks. */
+.set h4 { margin: 0; font-size: var(--text-base); color: var(--text); }
+
+/* A second heading in the same card starts a new subject and needs the gap to
+   say so. Merging the model parameters into one card put "Context window"
+   directly under the picker it is not about, with nothing between them. */
+.set h4:not(:first-child) { margin-top: var(--space-4); }
+
+.set-hint { font-size: var(--text-xs); color: var(--muted); line-height: 1.45; }
+
+/* The description under a section heading, spaced once here rather than at
+   every call site.
+   
+   Seventeen of these carried `style={{ marginBottom: 'var(--space-2)' }}`,
+   which is the same declaration written seventeen times and seventeen chances
+   to write a different one -- the same element already appeared with space-1,
+   space-3 and space-4 elsewhere for no reason anybody recorded. A structural
+   relationship belongs in the stylesheet; a genuine exception can still say so
+   inline and now reads as the exception it is. */
+/* `.card-desc`: the sentence under a title, at the size the card gives it. */
+.set h4 + .set-hint {
+  margin-top: var(--space-1);
+  margin-bottom: var(--space-3);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+@keyframes ds-throb {
+  0%, 100% { opacity: 0.55; }
+  50% { opacity: 1; }
+}
+
+/* A copy that no longer holds the same file. Not a failure -- two copies of one
+   template are allowed to diverge, and this is only saying that they have. */
+.set-hint.drifted { color: var(--warn); }
+
+/* What an applet drew, read back. A tree rather than prose, so it is left as
+   preformatted text and given a ceiling -- a busy applet is a hundred lines and
+   this sits inside a settings pane. */
+.drawn {
+  margin: var(--space-2) 0 0;
+  padding: var(--space-2) var(--space-2);
+  max-height: 220px;
+  overflow: auto;
+  font-size: var(--text-xs);
+  line-height: 1.45;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--panel-2);
+}
+
+/* One applet, alone on the page, at `/applet/<id>`. Fills the window: there is
+   no grid here to decide a height, and a screenshot of an applet letterboxed
+   inside a page is mostly not the applet. */
+.bare { height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
+
+.bare > * { flex: 1; min-height: 0; }
+
+/* A round is in flight. On the button that asks for one, because that is where
+   you are looking when you have just pressed it -- and not in the foot, which
+   would flicker every thirty seconds on a tile that is working perfectly. */
+@keyframes ds-spin { to { transform: rotate(360deg); } }
+
+@keyframes dock-working {
+  0%, 100% { opacity: .15; transform: scale(1); }
+  50% { opacity: .55; transform: scale(1.1); }
+}
+
+/* Working, as one rotating mark.
+   It was three dots bouncing in sequence, and the sequence was the problem: the
+   dashboard polls `/api/models` every five seconds, React re-renders, the node
+   is replaced and every CSS animation on it restarts from frame zero. A bounce
+   caught mid-phase and thrown back to the start is visible every time -- which
+   is what "it resets every five and a half seconds" was.
+   A rotation has no perceptible beginning, so the same restart is invisible.
+   The animation is not made more robust; the shape is made indifferent to it. */
+.spin {
+  display: inline-block;
+  animation: ds-spin 900ms linear infinite;
+}
+
+@keyframes ds-spin { to { transform: rotate(360deg); } }
+
+@media (prefers-reduced-motion: reduce) {
+  /* Still says "working" -- it just says it without moving. */
+  .spin { animation: none; opacity: 0.6; }
+}
+
+@keyframes tf-bounce {
+  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
+  40% { opacity: 1; transform: translateY(-3px); }
+}
+
+/* The top bar carries the title, the views and the way into settings. Nothing
+   that belongs to a conversation lives here any more, so it can breathe. */
+.topbar .grow { flex: 1; min-width: 0; }
+
+/* Back on the left, Next on the right, with the gap between them doing the
+   separating -- so the button that goes forward is in the same place on both
+   pages instead of sliding when Back appears. */
+.first-run-actions { align-items: center; }
+
+@keyframes listening-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
+
+/* table ---------------------------------------------------------------- */
+
+/* For the visually-hidden-but-announced case: a table's `<caption>`, a column
+   heading that would be noise on screen. `display: none` and `visibility:
+   hidden` both remove it from the accessibility tree as well, which is the
+   opposite of what this is for. */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@keyframes ds-skel {
+  from { opacity: 0.55; }
+  to { opacity: 1; }
+}
+
+/* ---- ./select.css ---- */
+/* How big a control is, asked for rather than inherited.
+   Four sizes existed and every one of them came from a descendant selector:
+   `.set-row button` was 11px in 3px of padding, `.approval-actions button` was
+   12px in 5px, `.mcp-tool button` repeated the first exactly. So a button's size
+   was a fact about where it had been put, not about what it was -- moving one
+   resized it, and asking for a large button inside a settings row was not
+   possible at all. There is already a comment further down this file complaining
+   about precisely that.
+   One scale, for buttons, inputs and selects alike, because a row holding a
+   button beside an input wants them the same height and that was previously
+   arranged by hand each time. */
+/* Full width, for the one action a card or a step is about. Not a size: a
+   `block` button is the same height as any other, it just stops being a thing
+   you have to aim at. */
+button.block { display: flex; width: 100%; }
+
+/* The default is `size-md`, spelled once for every control.
+   The paragraph above promised one scale for buttons, inputs and selects, and
+   the next line broke it: inputs padded 8px top and bottom, buttons 4px, so an
+   input was eight pixels taller than the button beside it and no row of the two
+   could line up. The download modal's search box against its Search button was
+   the version you could see from across the room. */
+button,
+input,
+textarea,
+select,
+.sel-control { padding: var(--space-2) var(--space-3); }
+
+/* Centred on the whole block -- the caption and the sentence together -- rather
+   than aligned to either end of it. `.field-row` pins to the bottom, which is
+   right for a field beside a button and wrong beside two lines of prose. */
+.card-inline > .sel { align-self: center; }
+
+/* The custom select's control is a button and presses as one; its items are
+   the list's, and the active item is the keyboard's -- a click on one lands
+   on the item, not on a press. */
+.sel-item:active { background: color-mix(in srgb, var(--text) var(--press-ink), var(--panel-2)); }
+
+/* (the controls size themselves now; the width workaround that lived here is
+   gone with the base rule that replaced it) */
+
+/* The select, drawn by us.
+   A native `<select>` styles down to its closed state and no further -- the
+   open list is the operating system's, in its font, at its size, in its
+   colours. That is the part you actually read: thirty model ids with their
+   capability tags, on a white sheet in the middle of a dark app. So the list is
+   ours now, and these are its clothes. The behaviour lives in `Select.tsx`,
+   which owes the keyboard everything the native element gave away for free. */
+.sel { position: relative; display: inline-block; }
+
+/* The subject of its pane rather than a field in it: full width and a size up.
+   That was `.select-field.block` on the native element, and it carried the
+   reason with it -- model ids are long (`qwen2.5-coder:32b-instruct-q4_K_M`) and
+   at the narrow size they truncated mid-name. */
+.sel.block { display: block; width: 100%; }
+
+.sel.block .sel-control { padding: var(--space-2) var(--space-3); font-weight: 500; }
+
+/* Not full width otherwise: a select as wide as its row, holding one short
+   word, reads as an input somebody forgot to fill in. */
+.sel:not(.block) .sel-control { width: auto; max-width: 320px; }
+
+.sel-control {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  text-align: left;
+  /* Not `--panel`: a control sits on a panel and has to be distinguishable from
+     it, which is what `--control` is for. */
+  background: var(--control);
+}
+
+.sel-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.sel-caret { flex: none; opacity: 0.6; transition: transform var(--dur-fast) var(--ease); }
+
+.sel[data-open] .sel-caret { transform: rotate(180deg); }
+
+.sel[data-open] .sel-control { border-color: var(--accent); }
+
+/* State is read off React Aria's attributes: `data-open` on the root,
+   `data-focused` / `data-selected` / `data-disabled` on an item, where
+   `.open`, `[data-active]`, `.on` and `.off` used to be. */
+.sel-list {
+  /* `fixed`, and in `document.body`: an ancestor that scrolls or hides its
+     overflow would otherwise clip it, which in this app means every settings
+     pane. Position comes from the button's measured rectangle. */
+  /* Positioned by React Aria -- inline `top`/`left` on a portalled popover
+     that flips when the edge is near. `position: fixed` and the measured
+     rectangle it was placed by are gone with the hand-rolled version. */
+  z-index: 60;
+  max-height: 280px;
+  overflow-y: auto;
+  margin: 0;
+  padding: var(--space-1);
+  /* The same room while the list is scrolled as it has at rest. Padding at
+     the top of a scroll container scrolls away with the content, so the row
+     `scrollIntoView({block: 'nearest'})` brings up ended flush against the
+     border and read as clipped rather than as one of a set -- and this list
+     opens scrolled to whatever is chosen, so that was the ordinary state.
+     `scroll-padding` insets what counts as "in view", so it stops short by
+     the same four the sides have. */
+  scroll-padding-block: var(--space-1);
+  list-style: none;
+  border: var(--border-width) solid var(--border-strong);
+  border-radius: var(--radius-md);
+  background: var(--panel);
+  box-shadow: var(--shadow-2);
+}
+
+.sel-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-2);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.sel-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+
+/* Hover and keyboard land on the same row, because they are the same idea --
+   two highlights for one cursor is how a list starts lying about where Enter
+   will go. */
+.sel-item[data-focused] { background: var(--panel-2); }
+
+.sel-item[data-selected] { color: var(--accent); }
+
+.sel-item[data-disabled] { opacity: 0.45; cursor: not-allowed; }
+
+/* The tick marks the chosen row. Colour alone would not: a list where the only
+   difference is a hue is a list you cannot read past. */
+.sel-tick { flex: none; opacity: 0; }
+
+.sel-item[data-selected] .sel-tick { opacity: 1; }
+
+/* The icon on a speaker's row in the open list -- `Select`'s `aside`. Last in
+   the row and flush with its padding: it is a column of buttons down the right
+   of the list, which is where a list's controls belong. It sat between the
+   label and the tick for an afternoon, which put it a tick's width short of
+   the edge and reading as neither aligned nor attached to the name (William,
+   2026-09-04: "why is the icon not all the way right"). 20px square, so it has
+   a hit area without making the row taller than the text in it.
+
+   Drawn at text weight rather than at half a muted one. It was `opacity: 0.5`
+   on `--muted`, on the argument that eleven visible buttons is a busy list; at
+   that weight it read as decoration and nobody would have pressed it, which is
+   worse than busy. Accent under the pointer, which is the only state it has. */
+.sel-hear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--radius-sm);
+  color: var(--text);
+}
+
+.sel-hear:hover { color: var(--accent); }
+
+.field-bad input,
+.field-bad textarea,
+.field-bad .sel-control { border-color: var(--bad); }
+
+.field > input,
+.field > textarea,
+.field > .sel { width: 100%; }
+
+/* ---- ./dangerzone.css ---- */
+/* Destructive, and legible as such standing still. */
+button.danger {
+  color: var(--bad);
+  border-color: color-mix(in srgb, var(--bad) 45%, var(--border-strong));
+}
+
+button.danger:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--bad) 12%, var(--panel));
+  border-color: var(--bad);
+  color: var(--bad);
+}
+
+button.danger:active:not(:disabled) {
+  background: color-mix(in srgb, var(--bad) 20%, var(--panel));
+  border-color: var(--bad);
+}
+
+/* Three fields on one line, and their inputs on one line too.
+   
+   `Field` puts the description *above* the control, which is the house rule and
+   right -- but only `Arguments` has one here, so as a flex row the other two
+   inputs floated a description's height above it and the row read as broken.
+   Aligned to the end instead: the labels sit where their text needs them and
+   the three boxes share a baseline, which is the edge the eye actually follows.
+   
+   A grid rather than flex, so `Arguments` gets the room it needs by declaration
+   instead of by an inline pixel width on each of its neighbours. */
+.mcp-local .field-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr 2fr;
+  align-items: end;
+  gap: var(--space-3);
+}
+
+/* How an applet's polling is going, said the same way on every tile. Muted
+   when it is going fine -- this is a fact you glance at, not one you are being
+   told. */
+/* A notch under `.set-hint`'s 11px. This is the smallest thing on a tile and
+   the least often read -- at 11px it competed with the applet's own text. */
+/* The danger zone ------------------------------------------------------------
+
+   One bordered section with its actions divided inside it, rather than a box
+   per action: three tiles of red furniture stacked down a pane read as three
+   warnings, and one section with three things in it reads as a place. A place
+   is somewhere you have to go, which is the whole idea.
+
+   Tinted rather than filled. These are still settings, and a red panel in a
+   settings modal reads as an error that has already happened — the border and
+   the headings are enough to say "stop and read this one".
+
+   The same shape as valet's, so that being careful is learned once. */
+.danger-zone {
+  border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--border));
+  background: color-mix(in srgb, var(--bad) 5%, var(--panel));
+  border-radius: var(--radius-md);
+  padding: var(--space-3) var(--space-4);
+  margin-top: var(--space-1);
+}
+
+.danger-zone-head h3 {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--bad);
+  letter-spacing: 0.01em;
+}
+
+.danger-zone-head .set-hint { margin-top: 2px; }
+
+/* Divided by a rule rather than boxed. The first one needs no rule: it is
+   already under the heading. */
+.danger-act { padding-top: var(--space-3); margin-top: var(--space-3); border-top: 1px solid color-mix(in srgb, var(--bad) 18%, var(--border)); }
+
+.danger-act > h4 { margin: 0 0 2px; font-size: var(--text-sm); color: var(--bad); }
+
+.danger-act.plain > h4 { color: var(--text); }
+
+.danger-act > .set-hint + .set-hint { margin-top: var(--space-1); }
+
+.danger-row { margin-top: var(--space-2); gap: var(--space-2); align-items: center; }
+
+.danger-row > input { min-width: 0; }
+
+/* The name to type, quoted rather than described -- it is a string to copy. */
+.danger-name {
+  background: color-mix(in srgb, currentColor 10%, transparent);
+  padding: 1px var(--space-1);
+  border-radius: 4px;
+}
+
+.danger-unavailable { margin-top: var(--space-2); opacity: 0.85; }
+
+/* Label beside the control, for a settings pane: a column of names on the left
+   and their controls on the right reads as a list of what is set, where the
+   same rows stacked read as a form waiting to be filled in. The description
+   and the error stay under the label, in the same column, so a long
+   explanation does not push the control off its row. */
+.field-row-layout {
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  column-gap: var(--space-3);
+}
+
+.field-row { align-items: flex-end; gap: var(--space-2); }
+
+.field-row > button { flex: none; }
+
+/* Two forms one under the other, whose buttons say different words -- "Add"
+   and "Block". Sized to their text they came out different widths, and two
+   controls in the same column at the same indent that do not line up read as
+   an accident rather than as a pair. */
+.field-row > button { min-width: 9ch; }
+
+/* ---- ./callout.css ---- */
+/* One shape for everything that tells you something.
+   `.banner` and `.callout` were the same box drawn twice: a bordered, rounded,
+   12px panel with a tint. They differed in padding by a pixel in each direction
+   -- 10/14 against 11/13, a distinction nobody chose and nobody could see -- and
+   in how they marked tone, one tinting its whole background and the other
+   growing a coloured left edge. Two answers to one question meant every new
+   message was a coin toss, and the app read as though two people had built it.
+   So: one `.callout`, and the tone is a modifier. `.banner` and `.callout` are
+   kept as aliases below because they are spelled across a dozen files and a
+   rename is a separate change from a consolidation. */
+.callout {
+  display: flex;
+  gap: var(--space-3);
+  align-items: flex-start;
+  padding: var(--space-3) var(--space-3);
+  border: var(--border-width) solid var(--border);
+  border-left: 2px solid var(--muted);
+  border-radius: var(--radius);
+  background: var(--panel-2);
+  font-size: var(--text-sm);
+  line-height: 1.55;
+  color: var(--text);
+}
+
+/* The tones. Each is the same two moves -- tint the surface, colour the edge --
+   so a new one is two lines and cannot drift into a new shape. */
+.callout-info {
+  border-left-color: var(--info);
+  background: color-mix(in srgb, var(--info) 10%, var(--panel));
+  border-color: color-mix(in srgb, var(--info) 30%, var(--border));
+}
+
+.callout-bad {
+  border-left-color: var(--bad);
+  background: color-mix(in srgb, var(--bad) 10%, var(--panel));
+  border-color: color-mix(in srgb, var(--bad) 30%, var(--border));
+}
+
+.callout-good {
+  border-left-color: var(--good);
+  background: color-mix(in srgb, var(--good) 10%, var(--panel));
+  border-color: color-mix(in srgb, var(--good) 30%, var(--border));
+}
+
+.callout-warn {
+  border-left-color: var(--warn);
+  background: color-mix(in srgb, var(--warn) 10%, var(--panel));
+  border-color: color-mix(in srgb, var(--warn) 30%, var(--border));
+}
+
+/* A callout that leaves on its own.
+   Room at the bottom for the bar, and `position: relative` so the bar can sit
+   on the border rather than inside the text. */
+.callout-timed { position: relative; padding-bottom: var(--space-5); overflow: hidden; }
+
+/* The countdown. Drawn as a shrinking bar rather than a number: nobody wants to
+   read a clock, they want to know whether they have time. Animated width rather
+   than a transition, so it starts the moment it is painted. */
+.callout-clock {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 3px;
+  width: 100%;
+  transform-origin: left;
+  background: currentColor;
+  opacity: 0.5;
+  animation: ds-callout-clock linear forwards;
+}
+
+/* Held while the pointer is on it. A message that expires while you are reading
+   it was never shown. */
+.callout-clock.is-held { animation-play-state: paused; }
+
+@media (prefers-reduced-motion: reduce) {
+  /* The timer still runs -- this is about motion, not about the message
+       staying. A static bar says the same thing without sliding. */
+  .callout-clock { animation: none; opacity: 0.25; }
+}
+
+/* A callout arriving is a change in the page, not a thing that was always
+   there. It grows into its own height so the rows under it are pushed down
+   rather than replaced -- the difference between "something appeared" and
+   "the page you were reading is now a different page". `grid-template-rows`
+   from 0fr to 1fr is what animates a height nobody measured.
+
+   The margin is on the wrapper, so a callout that has not arrived takes no
+   space at all: `margin-bottom` on the callout itself would leave a gap where
+   an absent message would have been. */
+.callout-enter {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--dur-md) var(--ease),
+              margin-bottom var(--dur-md) var(--ease),
+              opacity var(--dur-md) var(--ease);
+  opacity: 0;
+  margin-bottom: 0;
+}
+
+.callout-enter > * { overflow: hidden; min-height: 0; }
+
+.callout-enter.is-in { grid-template-rows: 1fr; opacity: 1; margin-bottom: var(--space-4); }
+
+@media (prefers-reduced-motion: reduce) {
+  /* Still arrives, just without the push. */
+  .callout-enter { transition: none; }
+}
+
+/* The mark, when there is one. Optional on purpose: most callouts are a sentence
+   and an icon beside every sentence is noise.
+
+   It used to be a letter somebody typed into a ring -- `i`, `!`, `✓` -- which
+   is the operating system's font drawing a glyph beside an app that has an icon
+   set for exactly this. The ring went with it: a circle around a warning
+   triangle is two shapes saying one thing. */
+.callout-mark {
+  flex: none;
+  display: grid;
+  place-items: center;
+  margin-top: 1px;
+  opacity: 0.9;
+}
+
+/* Held-back history when a local conversation would cross to a hosted model.
+   Deliberately loud: the cost of missing it is uploading work that was kept
+   local on purpose. */
+.callout.carried { border-color: var(--bad); }
+
+/* A save that worked but is worth a word. Red would say it did not happen. */
+.callout:not([class*='callout-']) {
+  border-color: var(--border);
+  color: var(--muted);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.callout button { flex: none; }
+
+/* ---- ./card.css ---- */
+.card {
+  background: var(--panel);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-md);
+  padding: var(--space-3) var(--space-3);
+  margin-bottom: var(--space-3);
+}
+
+/* Header, when there is one. The title and the line under it were retyped at
+   every call site and no two agreed on the gap between them. */
+.card-head { display: flex; align-items: flex-start; gap: var(--space-3); }
+
+.card-head:not(:last-child) { margin-bottom: var(--space-3); }
+
+.card-headings { min-width: 0; flex: 1; }
+
+/* The card owns the space between the things it holds. Without this a callout
+   and the button under it sit edge to edge, and every caller has to remember a
+   margin on whichever child happens to be second. */
+.card-body { display: grid; gap: var(--space-3); }
+
+/* The card's own control, on the card's padding rather than indented into its
+   body. Centred against the whole heading block, not against the title -- a
+   switch aligned to the first line drifts upward the moment the description
+   runs to two. */
+.card-action { flex: none; align-self: center; display: flex; align-items: center; }
+
+/* A row inside a card that lines up with the header rather than indenting past
+   it: same left edge as the title, same right edge as the action. Its label is
+   a quiet caption, not a second heading -- the card already has one, and two
+   things in bold on one card read as two cards. */
+/* Further off the description than the card's own gap. A row that continues
+   the header's column needs to read as a separate statement, and at the body
+   gap it looked like a fourth line of the paragraph above it. */
+.card-inline { align-items: center; margin-top: var(--space-3); }
+
+/* Indented to the title's left edge, past the icon. Starting at the card's
+   padding put it under the icon instead of under the words it belongs with,
+   which reads as a different column of content. */
+.card:has(.card-icon) .card-inline { padding-left: calc(var(--card-icon) + var(--space-3)); }
+
+/* Its own line, above the sentence it introduces. */
+.card-inline-label {
+  display: block;
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--muted);
+  margin-bottom: 2px;
+}
+
+.card-title { display: block; font-size: var(--text-base); }
+
+.card-desc { margin-top: var(--space-1); color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
+
+/* Decoration, so it is quieter than the words it sits beside and never the
+   thing the eye lands on first. */
+/* One number, because the header's indent is derived from it: a row that lines
+   up with the title has to know how wide the icon column is, and two copies of
+   34px drift the moment one changes. */
+.card { --card-icon: 34px; }
+
+.card-icon {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: var(--card-icon);
+  height: var(--card-icon);
+  border-radius: var(--radius);
+  background: var(--panel-2);
+  color: var(--muted);
+}
+
+/* A card that is itself the choice. Reset first, because it is a `<button>`
+   now and inherits a control's padding and centring. */
+button.card {
+  display: block;
+  width: 100%;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  padding: var(--space-3);
+}
+
+/* Variants, because a card is doing four jobs and looked like one.
+   A search result you can act on, a thing already installed, something that
+   went wrong, and a heading with rows under it are not the same object, and
+   drawing them identically means the eye has to read every one to sort them. */
+
+/* Selectable: it responds before you commit, the way the choice row does. */
+.card-pick { cursor: pointer; transition: border-color var(--dur-fast) var(--ease),
+             background var(--dur-fast) var(--ease); }
+
+.card-pick:hover { border-color: var(--accent); background: var(--panel-2); }
+
+/* Current. The left edge rather than a fill, so a list of twenty with one
+   marked does not become a list with one shouting. */
+.card-on {
+  border-color: var(--accent);
+  box-shadow: inset 3px 0 0 var(--accent);
+}
+
+/* Something went wrong with this one specifically -- a failed download, a model
+   that would not load -- as against a callout about the page as a whole. */
+.card-bad {
+  border-color: color-mix(in srgb, var(--bad) 35%, var(--border));
+  background: color-mix(in srgb, var(--bad) 6%, var(--panel));
+}
+
+/* `.callout-warn`'s mix, on a card. A warning callout that grew rows became a
+   card so the rows sit inside the colour rather than under it; the numbers
+   are the callout's so the two read as one tone. */
+.card-warn {
+  border-color: color-mix(in srgb, var(--warn) 40%, var(--border));
+  /* More of the colour than the callout carries: a card is mostly ground,
+     and at the callout's 10% the tint read as a border with nothing behind
+     it. */
+  background: color-mix(in srgb, var(--warn) 18%, var(--panel));
+}
+
+/* Quiet: for a card that is a container rather than a thing, where the border
+   is doing grouping and should not compete with what it groups. */
+.card-flat { background: transparent; border-color: var(--border); }
+
+.modal-body .card { background: var(--panel-2); }
+
+/* ---- ./toggle.css ---- */
+.card-action .switch-row { padding: 0; gap: var(--space-2); }
+
+.card-action .switch-row .switch-body { flex: none; }
+
+/* model handover marker ----------------------------------------------- */
+.switch {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin: var(--space-4) 0;
+  font-size: var(--text-xs);
+  color: var(--muted);
+}
+
+.switch::before, .switch::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--border);
+}
+
+/* A switch, because it takes effect as it moves. A tick box is the shape of an
+   answer you are going to submit, and there is nothing here to submit.
+   Its own width, which is also what keeps it clear of the trap `.set-row`,
+   `.mcp-tool` and `.applet-review-row` each document: the controls block sizes
+   every `input` to `width: 100%`, and a checkbox left to inherit that stretches
+   across the row, squeezes its label to nothing, and draws itself at the left
+   of its own oversized rectangle. */
+/* The row a switch lives in. The whole row is the label, so the words are the
+   hit area too -- a 30x18 target on its own is under every minimum there is,
+   and reaching for the text is what people do regardless. */
+.switch-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) 0;
+  cursor: pointer;
+}
+
+.switch-row[data-disabled] { cursor: default; opacity: 0.55; }
+
+.switch-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
+
+/* Sized to its words, for a switch that sits in a row of other controls rather
+   than owning a row of its own. `flex: 1` there would push the label away from
+   the switch by the whole width of the bar. */
+.row > .switch-row { flex: none; padding-block: 0; }
+
+.row > .switch-row .switch-body { flex: none; }
+
+/* The opposite case: a switch that *is* the row, with something small beside it
+   -- a tooltip, a state word. `.set-row` wraps, so a switch that does not grow
+   pushes whatever follows onto a line of its own, which is how the file-access
+   tooltip ended up orphaned under it. */
+.set-row > .switch-row { flex: 1; min-width: 0; padding-block: 0; }
+
+.switch-label { color: var(--text); }
+
+.switch-hint { font-size: var(--text-sm); color: var(--muted); }
+
+.switch-said { flex: none; font-size: var(--text-xs); color: var(--muted); }
+
+/* Three sizes, the same names every other control uses. The switch scales with
+   the row: a 30x18 track beside 12px text is a different control from the same
+   track beside 16px text. */
+.switch-sm { gap: var(--space-2); padding: var(--space-1) 0; font-size: var(--text-sm); }
+
+.switch-sm .switch-hint { font-size: var(--text-xs); }
+
+.switch-sm .toggle { width: 26px; height: 16px; }
+
+.switch-sm .toggle::after { width: 10px; height: 10px; }
+
+.switch-row.switch-sm[data-selected] .toggle::after { left: calc(100% - 12px); }
+
+.switch-lg { gap: var(--space-4); padding: var(--space-3) 0; font-size: var(--text-md); }
+
+.switch-lg .toggle { width: 38px; height: 22px; }
+
+.switch-lg .toggle::after { width: 16px; height: 16px; }
+
+.switch-row.switch-lg[data-selected] .toggle::after { left: calc(100% - 18px); }
+
+/* `input[type='checkbox']` is an attribute selector plus a type -- 0-1-1 --
+   and `.toggle` is a class, 0-1-0. So the tick-box base outranked this no
+   matter which came last in the file, and the switch rendered as a 17px
+   rounded square with a checkmark in it. Matching the base's shape is the fix;
+   `!important` would have been the other one, and the wrong one. */
+/* State is read off the row, not off the input.
+   React Aria's `Switch` is the `<label>`; it stamps `data-selected`,
+   `data-disabled`, `data-focus-visible` and `data-pressed` there and keeps the
+   real input visually hidden. So the track is a span, and every rule that was
+   `input.toggle:checked` is now `.switch-row[data-selected] .toggle`. The size
+   variants gain `.switch-row` in their selector to keep outranking the generic
+   state rule the way `input[type='checkbox']` used to. */
+.toggle {
+  appearance: none; -webkit-appearance: none;
+  position: relative; flex: none; cursor: pointer;
+  display: block;
+  width: 30px; height: 18px; margin: 0; padding: 0;
+  border-radius: 999px;
+  background: var(--toggle-off); border: 1px solid var(--toggle-off);
+  --toggle-off: var(--border);
+  transition: background var(--dur-fast), border-color var(--dur-fast);
+}
+
+/* The card version. On a `--panel-2` card -- the permissions cards in
+   onboarding -- the `--border` track is five points from the ground and the
+   switch vanished, knob and all. So a toggle on a card is drawn for that
+   surface: a track with half of `--muted` in it, and a knob with an edge so
+   it reads as a knob on the darker track. By placement rather than a prop,
+   so a toggle put on a card cannot be left in the wrong version. */
+.card .toggle {
+  --toggle-off: color-mix(in srgb, var(--muted) 50%, var(--border));
+}
+
+.card .toggle::after {
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--muted) 30%, transparent), 0 1px 2px rgba(0, 0, 0, 0.18);
+}
+
+.card .switch-row[data-selected] .toggle::after { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
+
+/* The knob, not the tick. The base draws a checkmark through `::before`, which
+   a switch has no use for. */
+.toggle::before { content: none; }
+
+.toggle::after {
+  content: ''; position: absolute; top: 50%; left: 2px;
+  transform: translateY(-50%);
+  width: 12px; height: 12px; border-radius: 50%;
+  background: var(--panel);
+  /* A spring, over the same `--dur-fast` the track recolours in. The curve is
+     chef-monorepo's `spring/gentle` (`--ease-spring`), copied 2026-09-05 with
+     the switch's async state; chef plays it over 200ms, and so did this for a
+     day, but chef's track is 48px wide and this one is 30 -- the knob was
+     still travelling 80ms after the track had finished changing colour, and
+     that gap read as lag. Under reduced motion the duration is zero and the
+     curve is moot. */
+  transition: left var(--dur-fast) var(--ease-spring);
+}
+
+/* Accent rather than green. Green reads as "this is the safe one", and the
+   safe one here is off -- the switch should not editorialise about which way
+   you ought to have it. */
+.switch-row[data-selected] .toggle { background: var(--accent); border-color: var(--accent); }
+
+.switch-row[data-selected] .toggle::after { left: calc(100% - 14px); }
+
+.switch-row[data-disabled] .toggle { opacity: .5; cursor: default; background: var(--toggle-off); }
+
+.switch-row[data-selected][data-disabled] .toggle { background: var(--accent); border-color: var(--accent); }
+
+.switch-row[data-focus-visible] .toggle { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+/* A toggle's knob widens while held, the way a switch does under a thumb,
+   and snaps to its side on release. A tick box and a radio darken. */
+.switch-row[data-pressed]:not([data-disabled]) .toggle::after { width: 16px; transition: width var(--dur-fast); }
+
+.switch-row[data-selected][data-pressed]:not([data-disabled]) .toggle::after { left: calc(100% - 18px); }
+
+input[type='checkbox']:active:not(:disabled):not(.toggle),
+input[type='radio']:active:not(:disabled) {
+  background: color-mix(in srgb, var(--text) var(--press-ink), var(--control));
+  transform: none;
+}
+
+/* The knob under a pointer. `Toggle.tsx` sets `--knob-x` (0..1) on the track
+   while it is dragged and `data-dragging` with it; the knob's `left` follows,
+   with no transition, because a knob that eases towards the thumb is a knob
+   that lags it. `--knob-travel` is the distance it may move: the inner width
+   less the knob and its 2px margin at each end, which is the same arithmetic
+   the `[data-selected]` positions above encode as `100% - 14px` and friends.
+   `pan-y`, so a thumb across the track is a drag and a thumb down the page is
+   still a scroll. The second selector is there to outrank the sized selected
+   positions, which carry one class more than the plain one. */
+.toggle { touch-action: pan-y; --knob-travel: calc(100% - 16px); }
+
+.switch-sm .toggle { --knob-travel: calc(100% - 14px); }
+
+.switch-lg .toggle { --knob-travel: calc(100% - 20px); }
+
+.switch-row .toggle[data-dragging]::after,
+.switch-row[data-selected] .toggle[data-dragging]::after {
+  left: calc(2px + var(--knob-x, 0) * var(--knob-travel));
+  transition: none;
+}
+
+/* Held on the knob itself. React Aria's `data-pressed` never arrives for a
+   press the track kept to itself, so the track says so with `data-held` and the
+   knob widens the same 16px it does under the label's press. */
+.switch-row .toggle[data-held]:not([data-dragging])::after { width: 16px; transition: width var(--dur-fast); }
+
+.switch-row[data-selected] .toggle[data-held]:not([data-dragging])::after { left: calc(100% - 18px); }
+
+/* Pending: chef-monorepo's sweep, in this vocabulary.
+   `PendingSweep` from chef's `Toggle.tsx`, copied 2026-09-05 at William's
+   request after two of this file's own designs failed on the same track: a
+   ring 2px outside the track (`inset: -2px`, a transparent 2px border, a mask
+   that keeps only the rim -- the border box less the padding box), and inside
+   it a square twice the size painted as a conic gradient: transparent for the
+   first sixth of the turn, the accent at 70% by halfway, transparent again by
+   five sixths. It spins once a second. One tint in both states, as chef ships
+   it: the arc reads against the page outside the track, and the accent is the
+   colour every theme puts against its page. Under reduced motion the ring
+   stands still as a steady faint band; `aria-busy` says what it means. */
+.toggle-sweep {
+  position: absolute; inset: -2px;
+  border-radius: 999px;
+  border: 2px solid transparent;
+  pointer-events: none;
+  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+}
+
+.toggle-sweep::before {
+  content: '';
+  position: absolute; top: 50%; left: 50%;
+  width: 220%; height: 220%;
+  translate: -50% -50%;
+  background: conic-gradient(from 0deg, transparent 0deg, transparent 60deg, color-mix(in oklab, var(--accent) 70%, transparent) 180deg, transparent 300deg, transparent 360deg);
+  animation: ds-spin 1s linear infinite;
+}
+
+@keyframes ds-spin { to { rotate: 1turn; } }
+
+@media (prefers-reduced-motion: reduce) {
+  .toggle-sweep::before { animation: none; background: color-mix(in oklab, var(--accent) 45%, transparent); }
+}
+
+/* ---- ./skeleton.css ---- */
+.muted { color: var(--muted); }
+
+.pulse-block {
+  display: inline-block;
+  height: 8px;
+  border-radius: var(--radius-sm);
+  background: var(--muted);
+  animation: ds-pulse 1.4s ease-in-out infinite;
+  vertical-align: middle;
+}
+
+/* skeletons ------------------------------------------------------------ */
+
+/* Ink at low alpha, not a named surface.
+   The port kept chef's `surface` prop and its `--panel-2` default, and the
+   first place it went was a card inside a modal -- where `.modal-body .card` is
+   *also* `--panel-2`. Six invisible skeletons on an identical background. Any
+   scheme that names the colour has that failure in it: the caller has to know
+   what it is being drawn on, and gets it wrong the first time a surface moves.
+
+   `currentColor` at low alpha cannot be wrong. It is the text colour of
+   wherever it lands, so it is dark on a light theme and light on a dark one,
+   and it is a step from its background on every surface in the app without
+   anybody choosing. `surface` survives as a strength, which is what callers
+   actually wanted from it. */
+.skel {
+  display: block;
+  background: color-mix(in srgb, currentColor 13%, transparent);
+  /* Never collapses to nothing: a zero-height skeleton is an invisible promise
+     about layout, which is the one thing it cannot be. */
+  min-height: 2px;
+}
+
+/* On the page behind a panel, where there is less contrast to work with. */
+.skel-on-elevated { background: color-mix(in srgb, currentColor 20%, transparent); }
+
+.skel-rectangular { border-radius: 0; }
+
+.skel-rounded { border-radius: var(--radius); }
+
+.skel-circular { border-radius: var(--radius-pill); flex: none; }
+
+/* A paragraph, not a bar. Real text ends mid-line, so the last one is short --
+   a stack of equal-length bars reads as a table waiting to load. */
+.skel-lines { display: grid; gap: var(--space-2); }
+
+/* Breathing rather than sliding. A sweep travelling across a skeleton implies
+   progress from left to right, and nothing here knows how far along it is. */
+.skel-pulse { animation: ds-skel calc(var(--dur-slow) * 3) var(--ease) infinite alternate; }
+
+@media (prefers-reduced-motion: reduce) {
+  /* Still distinguishable from a real block of colour, and still still. */
+  .skel-pulse { animation: none; opacity: 0.8; }
+}
+
+/* ---- ./rows.css ---- */
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* A name and the pills that qualify it, on one line, where the name is the only
+   part allowed to run out of room.
+   `truncate` on the container ellipsised the *pills* off the end instead --
+   a 62-character model name took the row and the tags saying what it can do
+   vanished, which is the one thing on the row that cannot be guessed from the
+   rest. So the name truncates and the pills keep their width: `min-width: 0`
+   because a flex item will not shrink below its content otherwise, and
+   `flex: none` on the pills because shrinking a badge only clips its text. */
+.named { display: flex; align-items: center; min-width: 0; }
+
+.named > .truncate { min-width: 0; flex: 0 1 auto; }
+
+.named > .pill { flex: none; }
+
+/* The row's hit target is a button and would press on its own inside the
+   row that is already pressing; it keeps the row's colour and does nothing. */
+.row-hit:active:not(:disabled) { background: none; transform: none; border-color: transparent; }
+
+.set-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-3);
+  /* 7px top and bottom put the text almost on the rule beneath it -- a divider
+     is meant to separate two rows, and at that spacing it reads as underlining
+     the one above. */
+  padding: var(--space-3) 0;
+  border-bottom: var(--border-width) solid var(--border);
+}
+
+/* The last *row*, not the last div.
+   `:last-of-type` matches by element type, so a `.set-actions` div after the
+   rows meant the final row was no longer last-of-type: it kept its bottom
+   border, the actions bar drew its own top border, and every settings pane
+   ended in two parallel lines a few pixels apart. */
+.set-row:not(:has(~ .set-row)) { border-bottom: none; }
+
+/* rows ----------------------------------------------------------------- */
+
+/* The list of things. `.set-row` still draws one row -- thirty-eight callers
+   build that by hand and will for a while -- and these are what `Rows` adds on
+   top: a container that knows what a row is, and named slots so the layout is
+   not retyped per caller. */
+.rows { display: block; }
+
+/* The divider between rows and none after the last. Asking the container
+   rather than the DOM: `:last-of-type` matched by element type, so anything
+   rendered after the list left the final row with a border and the pane ended
+   in two parallel lines.
+   
+   Excluded from the `pick` look, where the border is the box rather than a
+   divider: dropping the bottom edge there left the last row open along the
+   foot, which reads as a rendering fault rather than as a list ending. */
+.rows:not(.rows-pick) > .rows-row:last-child { border-bottom: none; }
+
+/* A list you pick from, rather than a list you read.
+   
+   The ruled version reads as a table: five records with hairlines between them,
+   which is right for downloads and wrong for "which of these am I talking to".
+   Boxes with air between them read as alternatives, and the one that is chosen
+   can then say so with a border rather than only with a pill.
+   
+   The divider goes with it — two ways of separating rows at once is one too
+   many, and the border already does it. */
+.rows-pick { display: grid; gap: var(--space-2); }
+
+.rows-pick > .rows-row {
+  /* The containing block for the stretched hit area below, and for anything
+     else a row draws in its own corners. Without it `inset: 0` resolves against
+     whatever is positioned further up -- the pane -- so every row's hit area
+     covered the whole list and the last one drawn won every click. Clicking
+     one card selected a different model. */
+  position: relative;
+  border: var(--border-width) solid var(--border-strong);
+  border-radius: var(--radius-md);
+  /* Roomier than a list row. These are cards you choose between, and the
+     chosen one carries a second line of controls under it -- at `--space-3`
+     the whole block read as tight the moment anything appeared in it. */
+  padding: var(--space-4);
+  background: var(--panel);
+  transition: border-color var(--dur-fast) var(--ease),
+              background var(--dur-fast) var(--ease);
+}
+
+/* Only where there is something to pick. A row without `row-hit` is not a
+   choice, and lighting it up on hover promises something that does not happen. */
+.rows-pick > .rows-row:has(.row-hit):hover {
+  border-color: var(--accent);
+  background: var(--panel-2);
+}
+
+.rows-pick > .rows-row:has(.row-hit:focus-visible) {
+  border-color: var(--accent);
+  box-shadow: var(--focus-ring);
+}
+
+/* The whole card is the hit area, not just the words in it.
+   
+   `.row-hit` is a button wrapping the name and the meta line, so the rest of
+   the card -- the empty middle, the space around the controls -- did nothing
+   when clicked. A card that looks like one target and behaves like two is a
+   card people click twice.
+   
+   Stretched from the button rather than by wrapping the row in one: a button
+   containing a `<select>` and a gear is nested interactive content, which is
+   invalid and which keyboards and screen readers handle badly. The pseudo
+   element covers the card; everything that is itself interactive is lifted
+   above it and keeps its own clicks. */
+.rows-pick > .rows-row > .row-hit::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+
+.rows-pick > .rows-row > *:not(.row-hit) { position: relative; z-index: 1; }
+
+/* And the button's own contents sit above its overlay.
+   
+   Without this the sheet covered the row's own name and tags, so the capability
+   tooltips stopped opening: the pointer landed on the overlay and `:hover`
+   never reached the mark. Clicking still works from up here -- these are inside
+   the button, so a click on them is a click on it. */
+.rows-pick > .rows-row > .row-hit > * { position: relative; z-index: 1; }
+
+/* Loading, said by the card rather than by a word in the corner.
+   
+   The state used to be ` · loading…` appended to the size line, which is the
+   quietest place on the row and reads as a fact about the file rather than as
+   something happening now. */
+.rows-pick > .rows-row.is-loading {
+  border-color: var(--accent);
+  animation: ds-pulse 1.4s ease-in-out infinite;
+}
+
+/* And nothing else can be chosen while it happens: picking a second model
+   mid-load queues a second load, which is how a machine ends up swapping two
+   sets of weights it cannot hold at once. */
+.rows-pick > .rows-row.is-waiting { opacity: 0.5; }
+
+.rows-pick > .rows-row.is-waiting .row-hit { cursor: not-allowed; }
+
+@media (prefers-reduced-motion: reduce) {
+  /* The border still says which one, without the breathing. */
+  .rows-pick > .rows-row.is-loading { animation: none; }
+}
+
+/* The chosen one, drawn exactly as a chosen `.choice` is -- same tint, same
+   border, same ring and tick in the corner.
+   
+   It carried an "in use" pill instead, which said the same thing a second time
+   in a list where every other row's pills describe what the model *can do*. One
+   pill among them meaning something else entirely is the odd one out.
+   
+   No tick. `colour is never the only signal` still holds, and what holds it is
+   the row's content rather than a mark: the chosen model is the only one
+   showing its options, so it differs in what it contains and not merely in
+   what colour it is. A checkbox on top of that would be a third way of saying
+   the same thing, and this list is a single choice rather than a set of them
+   anyway. */
+.rows-pick > .rows-row.is-picked {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
+}
+
+/* Nothing squeezes the name any more: the controls are on their own line.
+   
+   Worth recording what was tried first, because it looked reasonable and was
+   not. Two selects took 385px of a 514px row, leaving the name 40px -- so the
+   fix was a `min-width` floor on the subject, then flex rules on the name
+   inside it. Each one moved the overflow somewhere else, and the last pushed
+   the name clean outside the card. The row was simply carrying more than a row
+   holds; a second line is the answer, not better arithmetic. */
+.rows-pick .row-subject { min-width: 0; }
+
+/* A reading that belongs to the row above it, under rather than beside.
+   
+   `Row`'s `below` is a sibling of the row, so on its own it would sit outside
+   the picked row's box and read as belonging to the next one. Pulled up into
+   it: same tint, same border, and the row's own bottom corners squared off so
+   the two read as one block. */
+.rows-pick > .rows-row.is-picked:has(+ .row-readout) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom: none;
+  /* Closes the grid gap. `.rows-pick` puts `--space-2` between every child, and
+     the readout is a child -- so eight pixels of card showed through between
+     the row and its own reading, drawn edge to edge like a divider somebody had
+     left in. The two are one block; the gap belongs between blocks. */
+  margin-bottom: calc(var(--space-2) * -1);
+}
+
+.rows-pick > .rows-row.is-picked:has(.row-hit):hover {
+  background: color-mix(in srgb, var(--accent) 13%, var(--panel));
+}
+
+/* A label over a run of rows, when one list holds two kinds of thing.
+   
+   Not an `h4`: those are card titles here, and a sub-heading at card-title
+   weight competes with the card it is inside. */
+.rows-split {
+  margin: var(--space-4) 0 var(--space-2);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-strong);
+  color: var(--muted);
+}
+
+.rows-split:first-of-type { margin-top: var(--space-2); }
+
+.rows-empty { padding: var(--space-3) 0; }
+
+/* The name, the pills and the line underneath. `min-width: 0` is the whole
+   reason this is a class: a flex item will not shrink below its content, so
+   without it the name pushes the pills off the end -- and the pills are the
+   half you cannot guess. */
+.row-subject { flex: 1; min-width: 0; }
+
+/* The line under the name needs air between them.
+   
+   It had none -- measured at 0.0px, name baseline to hint cap -- so a model row
+   read as one four-line paragraph rather than a name with a footnote, and a
+   list of them read as a wall. Four pixels is enough: they are still one row,
+   which is why this is a nudge off the scale's bottom step and not a gap. */
+.row-subject > .set-hint { margin-top: var(--space-1); }
+
+/* The aligned column. `margin-left: auto` rather than a grid, because the rows
+   are flex and a size that varies by two characters does not need a track. */
+.row-trail { flex: none; margin-left: auto; white-space: nowrap; }
+
+.rows-row.rows-top { align-items: flex-start; }
+
+.rows-row.rows-bad .truncate { color: var(--bad); }
+
+/* A row that does something. A button, not a div with a handler: the keyboard
+   and the focus ring come free and cannot be forgotten. It is unstyled because
+   it is not a button to look at -- it is the row's hit area. */
+.row-hit {
+  flex: 1;
+  min-width: 0;
+  /* Row, not column. The button wraps the subject *and* the trailing column,
+     and stacking them put the timestamp on its own line under the name --
+     which is the one thing `trail` exists to stop. */
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+}
+
+.row-hit:hover .truncate { color: var(--accent); }
+
+.row-hit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+
+/* ---- ./empty.css ---- */
+/* `Empty`: a list with nothing in it.
+   
+   Quieter than `.empty`, which is a whole-screen state at `--space-10`. These
+   sit inside a card that already has a heading and a description, so the same
+   padding would leave a card that is mostly air about nothing.
+   
+   Dashed rather than solid: a solid border reads as a thing, and the point of
+   this box is that there is no thing. It marks out where the list will be. */
+.nothing {
+  display: grid;
+  justify-items: center;
+  gap: var(--space-2);
+  padding: var(--space-5) var(--space-4);
+  border: var(--border-width) dashed var(--border-strong);
+  border-radius: var(--radius-md);
+  text-align: center;
+}
+
+.nothing-mark { color: var(--muted); line-height: 0; }
+
+/* The same box with a figure in it, for a whole surface rather than a slot in
+   a card. Two things change and both follow from the size: the dashed outline
+   goes, because an outline marks out where a list will be and a window-sized
+   dashed rectangle reads as a layout that failed rather than a view with
+   nothing on it; and the box centres itself in whatever it was dropped into,
+   which is what makes it land in the middle of an empty dashboard rather than
+   under the header. */
+.nothing-surface {
+  border: none;
+  padding: var(--space-10) var(--space-4);
+  gap: var(--space-3);
+  margin: auto;
+}
+
+/* `currentColor` reaches the figure through the two rules the illustrations
+   ship with, so the colour is set here and the drawing follows it -- the same
+   grey as the sentence under it, in every theme.
+   Two classes, not one: `.illo` sets `color: inherit` further down this file,
+   which beats a single-class rule written earlier and drew the figure in full
+   text black beside a muted sentence. */
+.nothing-surface .nothing-figure { color: var(--muted); }
+
+/* `--text-sm`, not the `--text-xs` these lines used to be: it is a sentence
+   somebody is meant to read, not a caption qualifying something else. */
+.nothing-said { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; max-width: 46ch; }
+
+.nothing-act { margin-top: var(--space-1); }
+
+/* ---- ./progress.css ---- */
+/* progress ----------------------------------------------------------- */
+
+/* The bar sat 4px under its own label and flush against whatever was above
+   the whole block, so a download row read as four lines of text with a rule
+   drawn through the last one. The label is a caption for the bar and stays
+   close to it; the block as a whole is a separate statement from the row it
+   follows. */
+.progress { display: grid; gap: var(--space-1); }
+
+.card > .progress { margin-top: var(--space-3); }
+
+.progress-head { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-sm); }
+
+.progress-detail { color: var(--muted); font-size: var(--text-xs); }
+
+.bar { height: 6px; background: var(--panel-2); border-radius: var(--radius-pill); overflow: hidden; }
+
+.bar > i {
+  display: block;
+  height: 100%;
+  background: var(--accent);
+  border-radius: inherit;
+  transition: width var(--dur-md) var(--ease-out);
+}
+
+.bar-good > i { background: var(--good); }
+
+.bar-bad > i { background: var(--bad); }
+
+/* Working, size unknown.
+   A fetch that has not read `content-length` yet drew an empty track, which is
+   the same picture as stalled. This travels instead: it says "something is
+   happening" without claiming to know how much of it is left. */
+.bar-indeterminate > i {
+  width: 35%;
+  animation: ds-bar 1.2s var(--ease) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Still distinguishable from empty, and from full. */
+  .bar-indeterminate > i { animation: none; width: 100%; opacity: 0.35; }
+}
+
+/* ---- ./tabs.css ---- */
+/* ---------------------------------------------------------------- tabs */
+.tabs { position: relative; display: flex; gap: var(--space-1); }
+
+.tab {
+  position: relative;
+  z-index: 1;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius) var(--radius) 0 0;
+  color: var(--muted);
+  padding: var(--space-2) var(--space-3);
+  /* The strip's own line is drawn once, below; this is the piece of it each tab
+     paints over when it is the current one. */
+  box-shadow: inset 0 -2px 0 transparent;
+}
+
+.tab:hover:not(:disabled) { color: var(--text); background: var(--panel-2); border-color: transparent; }
+
+.tab.on { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
+
+.tab-badge { margin-left: var(--space-2); color: var(--muted); font-size: var(--text-xs); }
+
+.tab.on .tab-badge { color: var(--accent); opacity: 0.75; }
+
+/* A rail down the side of a pane rather than a strip across the top. Same
+   component, same keyboard; the current one is marked by a filled row instead
+   of a line under it, because there is no bottom edge to draw on. */
+.tabs-vertical {
+  flex-direction: column;
+  gap: 2px;
+  align-items: stretch;
+  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-3);
+  border-right: var(--border-width) solid var(--border);
+  overflow-y: auto;
+}
+
+.tabs-vertical .tab {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: var(--space-2);
+  border-radius: var(--radius);
+  box-shadow: none;
+  border: var(--border-width) solid transparent;
+}
+
+.tabs-vertical .tab:hover:not(:disabled) { background: var(--panel-2); }
+
+.tabs-vertical .tab.on {
+  color: var(--text);
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  border-color: var(--accent-dim);
+  box-shadow: none;
+}
+
+.tabs-vertical .tab-label { display: block; font-size: var(--text-sm); color: var(--text); }
+
+.tabs-vertical .tab.on .tab-label { color: var(--accent); }
+
+.tab-hint {
+  display: block;
+  margin-top: 1px;
+  font-size: var(--text-xs);
+  color: var(--muted);
+  line-height: 1.35;
+}
+
+/* A heading above a run of tabs. Set apart from the run above by space, not
+   a rule -- the rail already has one edge -- and the tabs under it step in
+   by the label's own padding so the label reads as theirs. */
+.tabs-vertical .tab-group {
+  display: block;
+  padding: var(--space-4) var(--space-2) var(--space-1);
+}
+
+.tabs-vertical .tab-group:first-child { padding-top: var(--space-2); }
+
+.tab-group-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--text); }
+
+.tabs-vertical .tab.in-group { padding-left: var(--space-5); }
+
+/* No line under a vertical strip -- its edge is the border on the right. */
+.tabs-vertical .tabs-rule { display: none; }
+
+.tabs-rule {
+  position: absolute;
+  left: 0; right: 0; bottom: 0;
+  height: var(--border-width);
+  background: var(--border);
+}
+
+.tabs-vertical .tab:active:not(:disabled) { border-color: transparent; }
+
+/* ---- ./toast.css ---- */
+/* ---------------------------------------------------------------- toasts */
+.toasts {
+  position: fixed;
+  z-index: 90;
+  bottom: var(--space-4);
+  left: 50%;
+  transform: translateX(-50%);
+  display: grid;
+  gap: var(--space-2);
+  /* The stack does not take the pointer; each toast does. Otherwise an
+     invisible column down the middle of the app eats clicks. */
+  pointer-events: none;
+}
+
+.toast {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 260px;
+  max-width: min(460px, 90vw);
+  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
+  border: var(--border-width) solid var(--border-strong);
+  border-radius: var(--radius-md);
+  background: var(--panel);
+  box-shadow: var(--shadow-2);
+  font-size: var(--text-sm);
+  animation: ds-toast-in var(--dur-md) var(--ease);
+}
+
+/* The tone is the edge and the mark, in the tone's own colour. It used to be the
+   edge alone, and `info` drew it in `--accent` -- a teal that sits a step from
+   the green `good` uses, so the two toasts read as one tone with two icons.
+   `--info` is the blue every other tone-bearing thing in the system means by
+   the word, and the mark now carries the colour too: three signals -- edge,
+   glyph shape, glyph colour -- and none of them alone. */
+.toast-info { border-left: 2px solid var(--info); }
+
+.toast-good { border-left: 2px solid var(--good); }
+
+.toast-warn { border-left: 2px solid var(--warn); }
+
+.toast-bad { border-left: 2px solid var(--bad); }
+
+.toast-mark { flex: none; }
+
+.toast-info .toast-mark { color: var(--info); }
+
+.toast-good .toast-mark { color: var(--good); }
+
+.toast-warn .toast-mark { color: var(--warn); }
+
+.toast-bad .toast-mark { color: var(--bad); }
+
+/* `data-exiting` is React Aria's: it keeps a toast in the DOM for the length
+   of this animation after it is closed, then removes it, which is what the
+   `.leaving` class and a second timer used to do by hand. */
+.toast[data-exiting] { animation: ds-toast-out var(--dur-fast) var(--ease) forwards; }
+
+@media (prefers-reduced-motion: reduce) {
+  .toast, /* `data-exiting` is React Aria's: it keeps a toast in the DOM for the length
+   of this animation after it is closed, then removes it, which is what the
+   `.leaving` class and a second timer used to do by hand. */
+.toast[data-exiting] { animation: none; }
+}
+
+/* ---- ./modal.css ---- */
+/* modal --------------------------------------------------------------- */
+
+/* `hidden` needs saying out loud here. The browser's own `[hidden]` rule is a
+   `display: none` that any `display` in a stylesheet outranks -- so a hidden
+   backdrop with `display: flex` on it stays exactly where it was, over the top
+   of everything. Minimising the studio depends on this line. */
+.backdrop[hidden] { display: none; }
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--scrim);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: var(--space-15) var(--space-5);
+  z-index: 50;
+}
+
+/* The box is where focus lands when the window opens, not something you tab
+   to -- it is `tabIndex={-1}` and exists so a screen reader starts inside the
+   dialog rather than behind it. Chrome draws its own `:focus-visible` ring on
+   it anyway, which puts a bright outline around the entire window and offers to
+   activate something that does not do anything. The trap and `aria-modal` are
+   what communicate here; the ring belongs on the controls inside. */
+.modal:focus,
+.modal:focus-visible,
+.modal-dialog:focus,
+.modal-dialog:focus-visible { outline: none; }
+
+/* The dialog is a `<section>` React Aria renders inside the box, and it is
+   where focus lands on open. It sits between `.modal` and the head, body and
+   actions, so it has to be the column the box used to be: `.modal-body`
+   scrolls only while it is a flex item of something with a bounded height,
+   and a plain block in between would let long content overflow instead.
+
+   Not `display: contents`, which was the first attempt. An element with no box
+   cannot take focus, so React Aria's initial focus fell through to the first
+   input and Escape -- handled on the section -- stopped closing the window. */
+.modal-dialog {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+}
+
+.modal {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  width: min(760px, 100%);
+}
+
+/* Settings is wider than the others: the rail carries group headings with a
+   hint each and indented tabs under them, and a pane beside it that draws
+   cards with a control on the right -- 760 gave one or the other room. */
+.modal.modal-settings { width: min(880px, 100%); }
+
+.modal {
+  /* The window, less the backdrop's padding at each end -- `--space-15` is 60px
+     and there are two of them, above and below.
+
+     It was a flat `120px`, which was that sum written out by hand, and
+     `.first-run` subtracted `56px` for the same gap. Three numbers for one
+     measurement: onboarding sat 60 from the top and four pixels *past* the
+     bottom, and nothing would have moved them together.
+
+     `dvh`, not `vh`: on a phone `100vh` is the window with the browser chrome
+     retracted, which is not the height the page has when it opens. */
+  max-height: calc(100dvh - var(--space-15) - var(--space-15));
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Head, body and actions, separated by space rather than by rules.
+   A line above the title and another above the buttons boxed the content into a
+   compartment inside a box that already had a border -- three horizontal rules
+   in a panel eight lines tall. The head and the foot are still their own
+   sections; they are just spaced apart instead of ruled off.
+   The body keeps a rule *while it scrolls*, because there the line is doing
+   something a gap cannot: saying content continues past the edge. */
+.modal-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4) var(--space-2);
+}
+
+.modal-head strong { font-size: var(--text-base); }
+
+/* The `<h2>` React Aria puts around the title, reduced to a wrapper. A heading
+   element carries the browser's margins and type size, and this header was
+   laid out for the bare `<strong>` it used to hold -- 86px tall with them,
+   41px without, on a head whose padding is 12 over 8. `font: inherit` so the
+   `<strong>` rule above is the one that sets the size. */
+.modal-title { margin: 0; font: inherit; }
+
+/* Under the title, on the header's padding rather than the body's, so it reads
+   as part of the heading rather than as the first line of content. */
+.modal-desc {
+  margin: 0;
+  padding: 0 var(--space-4) var(--space-3);
+  color: var(--muted);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+  max-width: 62ch;
+}
+
+.modal-body { padding: var(--space-2) var(--space-4) var(--space-3); overflow-y: auto; }
+
+/* The close cross. Its rule stayed behind in tf's stylesheet when the split
+   ran -- a one-letter class name, and the scan that finds classes in source
+   dropped it -- so in the package the cross had only `.icon-btn`, which is the
+   picker's 34px square tile with a panel behind it. The head is laid out for
+   a 16px glyph with 4px of padding, and grew from 44 to 54. Later in the
+   cascade than `.icon-btn`, so these win; the width and height are said out
+   loud because the tile rule sets them, and `opacity` because the tile dims
+   itself until hovered and the way out of a window should not be faint. */
+.x {
+  width: auto; height: auto;
+  background: none; border: none; color: var(--muted); opacity: 1;
+  display: inline-flex; align-items: center; justify-content: center;
+  line-height: 1; padding: var(--space-1);
+  border-radius: var(--radius-sm);
+}
+
+.x:hover { color: var(--text); border-color: transparent; background: var(--panel-2); }
+
+/* Always the top right corner, whatever else is in the header.
+   Nothing used to push it there: `.modal-head` is a flex row and every caller
+   happened to put `grow` on its own title. `Modal` renders the title, so a
+   window that passes only a title -- the download one -- had its close button
+   sitting against the last letter of the heading, which read as part of the
+   words rather than as the way out. */
+.modal-head > .x { margin-left: auto; }
+
+/* Actions pinned under the pane rather than after the last section, so they do
+   not move as sections of different heights are chosen. */
+.set-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  justify-content: flex-end;
+  margin-top: var(--space-3);
+  padding-top: var(--space-3);
+  border-top: var(--border-width) solid var(--border);
+}
+
+/* Inside the modal, not floating under it.
+   As a direct child of `.modal` this had the rows' margin and none of the
+   modal's padding, so the buttons sat in a strip of panel with a rule above
+   them and nothing around them -- they read as being outside the thing they
+   belong to. */
+.modal > .set-actions,
+.modal-dialog > .set-actions {
+  margin-top: 0;
+  padding: var(--space-2) var(--space-4) var(--space-3);
+  border-top: none;
+}
+
+/* Moved here from `base.css` on 2026-09-05, and the position is the point.
+   The extractor filed `.dialog` under base because more than one component
+   named the class, and base is concatenated first -- so this single-class rule
+   came BEFORE `.modal { width: min(760px, 100%) }` instead of after it, as it
+   had for as long as the two existed. Equal specificity, later wins: every
+   dialog opened 760 wide, the exact "wide grey band" the comment below was
+   written to end. No baseline caught it because the suite photographed the
+   button that opens a dialog and never the dialog. `windows.spec.ts` does now. */
+/* A question is not a workspace.
+   `.modal` is sized for Settings -- 760px wide and pinned near the top of the
+   screen, because eleven panes of preferences need the room and want to start
+   where the eye already is. A two-button question inherited all of that and
+   became a wide grey band across the top of the page: the shape said "here is
+   somewhere to work", the content said "answer this and go". */
+.dialog {
+  width: min(440px, 100%);
+  /* `auto` on the block axis beats the backdrop's `flex-start`, so the short
+     one centres and the tall one still starts at the top. */
+  margin-block: auto;
+  box-shadow: var(--shadow-3);
+}
+
+.dialog .modal-body { color: var(--muted); }
+
+/* The tone is on the box, not only on the button. A destructive question that
+   looks like every other question is one the reader skims.
+   `Dialog` writes this as `dialog-${tone}`, which a literal scan of the source
+   never sees -- so the rule was left behind in tf's stylesheet by the split and
+   the package shipped a `tone="bad"` prop that changed nothing. */
+.dialog-bad { border-color: color-mix(in oklab, var(--bad) 45%, var(--border)); }
+
+/* ---- ./slider.css ---- */
+/* slider ----------------------------------------------------------------- */
+/* A number from a range -- `Slider.tsx` says when one is the right control.
+   The row is laid out like a switch row: words on the left, the control on the
+   right, the hint under the label so a long one does not push the knob off its
+   line.
+
+   The control is drawn as the other controls are: the box is a select's box
+   -- `--control` on `--border-strong`, `--radius` corners, the same height as
+   a button beside it -- filled with accent up to the value, with the value
+   printed inside at the right where a select prints its word and a slim bar
+   for the knob. A hairline with a dot on it was a different family from
+   everything else on the row. The native range is invisible and laid over the
+   box, so the keyboard, the focus and the announcement are still its own. */
+.slider-row {
+  display: flex;
+  align-items: center;
+  /* Wraps: the control is a fixed ~330px and the words beside it deserve a
+     column, not a sliver. Under about 600px the knob goes onto its own line
+     under the words rather than squeezing them to four per line. */
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-3);
+  padding: var(--space-2) 0;
+}
+
+.slider-row.is-disabled { opacity: 0.55; }
+
+.slider-body { flex: 1 1 260px; min-width: 0; display: grid; gap: 1px; }
+
+.set-row > .slider-row { flex: 1; min-width: 0; padding-block: 0; }
+
+.slider-label { color: var(--text); }
+
+.slider-hint { font-size: var(--text-sm); color: var(--muted); }
+
+/* The box, with the value printed inside it at the right where a select
+   prints its word, and under the box the two ends of the range in its
+   corners, so they read as its scale rather than as two more numbers on
+   the row. */
+.slider-control {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas: "box box" "min max";
+  row-gap: var(--space-1);
+  width: min(var(--slider-w, 150px), 100%);
+  flex: none;
+  margin-left: auto;
+}
+
+/* The three sizes every control takes, and the same three boxes: `sm` is
+   `.size-sm`'s padding and type, `md` `.size-md`'s, `lg` `.size-lg`'s -- so
+   a slider beside a button or a select of the same size is the same height.
+   The width scales with them, since that is what a slider mostly is. */
+.slider-sm { --slider-w: 120px; }
+
+.slider-sm .slider-box {
+  --slider-h: calc(1em * var(--line-height, 1.5) + var(--space-1) * 2 + 2px);
+  font-size: var(--text-xs);
+}
+
+.slider-sm .slider-value { font-size: var(--text-xs); padding: 0 var(--space-3); }
+
+.slider-sm .slider-hint { font-size: var(--text-xs); }
+
+.slider-md { --slider-w: 150px; }
+
+.slider-lg { --slider-w: 180px; }
+
+.slider-lg .slider-box {
+  --slider-h: calc(1em * var(--line-height, 1.5) + var(--space-3) * 2 + 2px);
+  font-size: var(--text-md);
+}
+
+.slider-end { font-size: var(--text-xs); color: var(--muted); }
+
+.slider-end:first-child { grid-area: min; justify-self: start; }
+
+.slider-end:last-child { grid-area: max; justify-self: end; }
+
+/* The box: the select's box, and the fill *is* the reading. The track runs
+   the whole width, so at the maximum the box is full and at the minimum it
+   is empty -- a fill that stopped short of either end read as a control
+   that would not go all the way. The readout sits over the right end where
+   a select prints its word and never moves. The knob is there for the hand:
+   hidden until the pointer is over the box or the keyboard has it, because
+   a white block parked in the fill was a second thing to read when the fill
+   already said it. Sizes are one variable, so the knob is the box's height
+   by arithmetic rather than by eye. */
+.slider-box {
+  grid-area: box;
+  display: flex;
+  position: relative;
+  /* The size scale's `md`: the same padding and type as a button or a
+     select with no size asked for. `sm` and `lg` below are the scale's too. */
+  --slider-h: calc(1em * var(--line-height, 1.5) + var(--space-2) * 2 + 2px);
+  --slider-knob-w: 12px;
+  font-size: var(--text-base);
+  /* The box's border colour, which the knob borrows so the two agree on
+     hover and on focus rather than one lighting up beside the other. */
+  --slider-edge: var(--border-strong);
+  height: var(--slider-h);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  background: var(--control);
+  overflow: hidden;
+  transition: border-color var(--dur-fast);
+}
+
+/* The ring is for the keyboard. `:focus-within` lit it on a click too,
+   because the click focuses the input -- and a ring left behind a click is
+   what the buttons' `:focus-visible` rule exists to avoid. `:has()` reaches
+   the input's own `:focus-visible`, which the browser only sets for keyboard
+   focus. */
+.slider-box:hover, .slider-box:has(.slider:focus-visible) { --slider-edge: var(--accent); border-color: var(--slider-edge); }
+
+.slider-box:has(.slider:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+.slider-row.is-disabled .slider-box:hover { --slider-edge: var(--border-strong); border-color: var(--slider-edge); }
+
+/* Filled to the fraction of the whole width. The knob travels the width
+   minus itself, so its centre and the fill's edge part by up to half a knob
+   -- always inside the knob, so the edge is never seen beside it -- and in
+   return the fill reaches both ends of the box. `--slider-f` is 0..1, set
+   per render, because CSS cannot read a range's value. */
+/* The fill's ink is the accent, mixed towards `--bad` by however far the
+   value is into the range the caller marked as a risk (`--slider-risk`,
+   0% to 100%). Set per render, so the colour moves with the knob rather
+   than flipping at a line. */
+.slider-track {
+  flex: 1; min-width: 0; position: relative;
+  --slider-f: 0;
+  --slider-risk: 0%;
+  --slider-ink: color-mix(in srgb, var(--bad) var(--slider-risk), var(--accent));
+  background: linear-gradient(to right,
+    color-mix(in srgb, var(--slider-ink) 28%, var(--control)) calc(100% * var(--slider-f)),
+    transparent 0);
+}
+
+/* Over the right end of the track, above the knob: when the knob is shown
+   and the value is high the two meet, and the number is read off the knob's
+   face rather than the knob hiding it. No pointer, so the input beneath
+   takes the drag. A step further in from the edge than a select's word,
+   for the same reason. */
+.slider-value {
+  position: absolute; right: 0; top: 0; bottom: 0; z-index: 1;
+  display: flex; align-items: center; padding: 0 var(--space-4);
+  font-size: var(--text-sm); color: var(--text); pointer-events: none;
+}
+
+/* The native input is stretched over the track and drawn nowhere but the
+   knob, so the keyboard, the focus and the announcement are still its own.
+   Written with the type as well as the class to outrank the generic `input`
+   rule, which outlines every field and recolours it on hover and focus. */
+input[type='range'].slider,
+input[type='range'].slider:hover,
+input[type='range'].slider:focus,
+input[type='range'].slider:focus-visible {
+  position: absolute; inset: 0;
+  -webkit-appearance: none; appearance: none;
+  width: 100%; height: 100%; margin: 0; padding: 0;
+  border: 0; border-radius: 0; box-shadow: none; outline: none;
+  background: transparent; cursor: pointer;
+}
+
+/* Disabled: no hand, no knob, and no second dimming -- the row is already
+   at 0.55, and the generic `input:disabled` would stack 0.45 on top of it.
+   Written with the type and the class to outrank both that rule and the
+   hover rules below. */
+input[type='range'].slider:disabled { cursor: not-allowed; opacity: 1; }
+
+input[type='range'].slider:disabled::-webkit-slider-thumb { opacity: 0; }
+
+input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
+
+/* The knob is a handle the full height of the box's inside: a button's face
+   on a button's border with a hair of shadow. Invisible until the pointer is
+   over the box, the drag is under way, or the keyboard has the input --
+   the fill is the reading; the knob is where to grab it. */
+.slider::-webkit-slider-runnable-track {
+  height: calc(var(--slider-h) - 2px); background: transparent;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none; appearance: none;
+  width: var(--slider-knob-w); height: calc(var(--slider-h) - 2px); margin-top: 0;
+  /* The box's inner radius, so the knob's corners sit inside the box's
+     corners at either end instead of poking a square edge past a round one. */
+  border-radius: calc(var(--radius) - 1px);
+  background: var(--panel); border: 1px solid var(--slider-edge);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
+  opacity: 0;
+  transition: opacity var(--dur-fast), border-color var(--dur-fast);
+}
+
+.slider-box:hover .slider::-webkit-slider-thumb,
+.slider:active::-webkit-slider-thumb,
+.slider:focus-visible::-webkit-slider-thumb { opacity: 1; }
+
+.slider::-moz-range-track { height: calc(var(--slider-h) - 2px); background: transparent; }
+
+.slider::-moz-range-thumb {
+  width: var(--slider-knob-w); height: calc(var(--slider-h) - 2px);
+  border-radius: calc(var(--radius) - 1px);
+  background: var(--panel); border: 1px solid var(--slider-edge);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
+  opacity: 0;
+  transition: opacity var(--dur-fast), border-color var(--dur-fast);
+}
+
+.slider-box:hover .slider::-moz-range-thumb,
+.slider:active::-moz-range-thumb,
+.slider:focus-visible::-moz-range-thumb { opacity: 1; }
+
+.slider:focus-visible::-webkit-slider-thumb, .slider:focus-visible::-moz-range-thumb { outline: none; }
+
+/* A settings row sets its controls in the small type and nothing else: the
+   padding is the size scale's. This used to shrink the padding as well, for
+   buttons only, so a button in a row stood 25px beside a 35px select and no
+   size class could ask for the select's height. Type from the row, box from
+   the scale, and the two line up; an explicit `size-*` still wins. */
+:where(.set-row) button, :where(.set-row) .slider-box { font-size: var(--text-xs); }
+
+/* ---- ./checkbox.css ---- */
+/* A row you choose. There is no checkbox in it.
+   Every one of the fourteen in this app sits beside a name and a line of
+   explanation, so the row was always the thing being designed and the 17px
+   square was a control borrowed to say one bit. The square is gone: the box
+   itself is what you press and what shows the answer.
+
+   The input stays in the markup and stays focusable -- it is what a screen
+   reader announces, what a keyboard toggles with Space, and what a form would
+   submit. It is moved out of sight rather than `display: none`, which would
+   take it out of the tab order and off the accessibility tree with it. */
+.choice {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-3);
+  border: var(--border-width) solid var(--border-strong);
+  border-radius: var(--radius-md);
+  background: var(--panel);
+  cursor: pointer;
+  transition: border-color var(--dur-fast) var(--ease),
+              background var(--dur-fast) var(--ease);
+}
+
+/* Spacing between checkboxes belongs to the group that holds them, not to the
+   checkbox. This adjacent-sibling margin stacked on top of `.choice-group`'s
+   gap -- 8 plus 4 -- so a group asking for four pixels got twelve. Left for a
+   loose pair outside a group, of which there are none, so it is gone. */
+
+/* A run of checkboxes is one choice, not several settings that happen to be
+   adjacent. Tight enough that the group reads as a block -- at the spacing a
+   form field wants, four tools look like four unrelated questions. */
+.choice-group { display: grid; gap: var(--space-1); }
+
+/* The same choice, laid out as tiles instead of a column.
+   
+   Four short names down the full width of a card is four wide bands for four
+   words -- the row is sized by the card, not by anything in it, so `Read` gets
+   the same 1000px as a sentence would. As tiles they are sized by their
+   content and the group reads as one set of four rather than a stack of four
+   settings.
+   
+   `auto-fit` with a floor rather than a fixed four: the pane is a modal that
+   narrows with the window, and four columns of 40px is worse than two of 160.
+   The floor is the width at which a two-word name still fits on one line. */
+.choice-tiles {
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: var(--space-2);
+}
+
+/* Room for the tick, which is absolutely positioned at the top right. In a
+   full-width row the text never reached it; in a tile it would run underneath. */
+.choice-tiles .choice-body { padding-right: var(--space-6); }
+
+/* The floor is 220px and not 150px because of what four items do at the widths
+   in between. The settings pane gives this group 514px: at a 150px floor that
+   is three columns, so four tools laid out three-and-one -- which is the one
+   arrangement that reads as a mistake. 220px makes it two-by-two here and four
+   across only when there is genuinely room for four. Measured, not guessed:
+   `grid-template-columns` computed to `166px 166px 166px` before this. */
+.choice input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Suggestible: it lifts toward the accent before you commit, so the row reads
+   as something that responds rather than something that is written on. */
+/* State is read off the row. React Aria's `Checkbox` is the `<label>` and
+   stamps `data-selected`, `data-focus-visible` and `data-disabled` on it, so
+   every `:has(input:checked)` below became `[data-selected]`. Same specificity
+   as `:hover` (0,2,0), so the selected rule sits after it and wins by order,
+   which is what the old 0,2,1 did by weight. */
+.choice:hover { border-color: var(--accent); background: var(--panel-2); }
+
+/* Chosen. Quiet, because several of these are ticked at once in the accounts
+   list and a strong fill on each would read as an alarm. */
+.choice[data-selected] {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
+}
+
+.choice[data-selected]:hover {
+  background: color-mix(in srgb, var(--accent) 13%, var(--panel));
+}
+
+/* The mark, drawn by the row rather than by a control.
+   It exists because colour cannot be the only thing carrying the state -- the
+   row would otherwise say "chosen" in a hue and nothing else, which is
+   unreadable to anyone who cannot separate the two backgrounds.
+
+   Both layers share one box and one position, and the tick is centred inside it
+   by `center` rather than by arithmetic. The first version offset the tick from
+   the ring by hand -- `top: calc(var(--space-3) + 4px)` and so on -- which
+   centred the tick's *bounding box* and not the tick: the checkmark shape fills
+   8%-100% of its own height, so its visual middle is four per cent below the
+   box's, and it sat low. */
+.choice::after,
+.choice[data-selected]::before {
+  content: '';
+  position: absolute;
+  top: var(--space-3);
+  right: var(--space-3);
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-pill);
+}
+
+.choice::after {
+  border: var(--border-width) solid var(--border-strong);
+  transition: background var(--dur-fast) var(--ease),
+              border-color var(--dur-fast) var(--ease);
+}
+
+.choice[data-selected]::after {
+  border-color: var(--accent);
+  background: var(--accent);
+}
+
+/* Masked rather than clipped, so the shape is centred by the browser and takes
+   the accent's contrast partner as its colour.
+
+   **10px, not 9.** `center` in a 16px box leaves (16 - 9) / 2 = 3.5px on each
+   side, and a mask origin cannot land on half a pixel: Chrome snapped it to 4
+   on one axis and 3 on the other, so the tick sat half a pixel right and half a
+   pixel high inside a ring that was otherwise exactly concentric with it. Every
+   even glyph size divides cleanly -- this one is 3px a side -- and it fills the
+   ring better besides. Measured at 20x: offset 0.000px both axes. */
+.choice[data-selected]::before {
+  z-index: 1;
+  background: var(--on-accent);
+  -webkit-mask: var(--tick-mask) center / 10px 10px no-repeat;
+  mask: var(--tick-mask) center / 10px 10px no-repeat;
+}
+
+/* The ring goes on the row, because the row is what is focused: the input it
+   contains is one pixel square and off in a corner. */
+.choice[data-focus-visible] {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-color: var(--accent);
+}
+
+/* Room for the mark, so a long name does not run under it. */
+.choice-body { min-width: 0; flex: 1; padding-right: var(--space-3); }
+
+.choice-name { display: block; font-weight: var(--weight-strong); }
+
+/* Explanation, not decoration: every one of these rows is a permission, and the
+   second line is what the first line is actually asking for. */
+.choice-why { display: block; color: var(--muted); font-size: var(--text-sm); margin-top: 1px; }
+
+.choice-meta { color: var(--muted); font-size: var(--text-xs); font-family: var(--font-mono); }
+
+.choice[data-disabled] {
+  cursor: not-allowed;
+  border-color: var(--border);
+  background: var(--panel);
+}
+
+.choice[data-disabled] .choice-name,
+.choice[data-disabled] .choice-why { opacity: 0.5; }
+
+.choice[data-disabled]::after { opacity: 0.4; }
+
+/* ---- ./table.css ---- */
+/* A second line under a row's name, inside the `<th scope="row">` that makes it
+   one. The cell is bold because it is a heading; what hangs under it is not,
+   and inherited the weight -- so a pinned version read as loud as the thing it
+   versions. */
+.table th .set-hint { font-weight: 400; }
+
+.table-scroll { overflow-x: auto; }
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+
+.table th,
+.table td {
+  text-align: left;
+  padding: var(--space-2) var(--space-3);
+  border-bottom: var(--border-width) solid var(--border);
+}
+
+.table th:first-child,
+.table td:first-child { padding-left: 0; }
+
+.table th:last-child,
+.table td:last-child { padding-right: 0; }
+
+.table thead th {
+  font-size: var(--text-xs);
+  font-weight: var(--weight-strong);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--muted);
+  white-space: nowrap;
+}
+
+/* The row's own name: a `<th scope="row">`, so it carries weight rather than
+   reading as one more cell. */
+.table tbody th { font-weight: var(--weight-strong); }
+
+.table tbody tr:last-child th,
+.table tbody tr:last-child td { border-bottom: none; }
+
+/* Numbers compare by column, so they align right and hold their tracks --
+   proportional digits shift the alignment by a pixel per glyph, which is
+   exactly the comparison the column was for. */
+.table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
+
+.table thead th[style*='right'] { text-align: right; }
+
+/* ---- ./sizegrid.css ---- */
+/* Tile size, picked as a rectangle rather than read as a notation. */
+.size-grid-wrap { display: flex; align-items: center; gap: var(--space-2); }
+
+.size-grid { display: grid; gap: var(--space-1); }
+
+.size-cell {
+  width: 18px; height: 14px; padding: 0;
+  border: 1px solid var(--border); border-radius: var(--radius-sm);
+  background: var(--panel-2); cursor: pointer;
+}
+
+/* `on` follows the pointer; `chosen` is what is actually saved, shown only
+   when nothing is hovered so the two can never contradict each other. */
+.size-cell.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 45%, transparent); }
+
+.size-cell.chosen { border-color: var(--accent); }
+
+.size-cell:disabled { cursor: default; opacity: 0.5; }
+
+.size-ceiling { opacity: 0.55; }
+
+/* ---- ./tooltip.css ---- */
+/* A callout: something worth knowing, with nothing to answer. Distinct from a
+   `?`, which is an offer to read more, and from a banner, which is a problem.
+   The mark is a round `i` rather than an emoji so it takes the theme's colours
+   and stays the same size as the text beside it. */
+/* An info-toned `.callout`, spelled the old way. Identical to it now rather than
+   nearly identical to it, which is the whole point of the consolidation: the
+
+/* The `?` beside a setting, and the box it shows on hover. Built like the
+   status dot's tooltip and for the same reasons: `title` waits a second and a
+   half, renders newlines however it likes, and cannot be styled. */
+.explain {
+  position: relative;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  /* The heading it follows is tracked out, which leaves the last letter's
+     spacing sitting between them and reads as none at all. */
+  margin-left: var(--space-2);
+  cursor: help;
+  /* Headings here are uppercase and tracked out, and one of these sits inside
+     a heading. */
+  text-transform: none;
+  letter-spacing: normal;
+  font-weight: 400;
+}
+
+.explain-mark {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+  color: var(--muted);
+  font-size: var(--text-xs);
+  line-height: 16px;
+  text-align: center;
+}
+
+.explain:hover .explain-mark,
+.explain:focus-visible .explain-mark { color: var(--text); border-color: var(--accent); }
+
+.explain-tip {
+  /* No `position`/`top`/`left` here any more: the tip is portalled to
+     `document.body` and React Aria positions it inline, flipping to the other
+     side when the edge is near. `placement` and `offset` on the component
+     carry what `top: calc(100% + 8px)` and `left: -6px` used to. */
+  /* Sized by what is in it, capped where a line stops being readable.
+     
+     It was a flat `width: 300px`, which is right for the paragraph a `?` mark
+     opens and absurd for the two words a capability mark opens -- "reads
+     images" got the same 300px box as a four-line explanation, so the tip
+     looked like a panel that had failed to fill. `max-content` hugs the short
+     ones; the cap still wraps the long ones at a readable measure. */
+  width: max-content;
+  max-width: min(300px, 60vw);
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--panel);
+  box-shadow: var(--shadow-2);
+  color: var(--muted);
+  font-size: var(--text-xs);
+  line-height: 1.5;
+  text-align: left;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-3px);
+  transition: opacity var(--dur-fast), transform var(--dur-fast), visibility var(--dur-fast);
+  z-index: 45;
+}
+
+/* Which way it grows is `placement` on the component now -- `bottom start`
+   or `bottom end` -- and React Aria flips it when there is no room, which the
+   fixed `left: -6px` / `right: -6px` could not: a mark beside a heading got
+   its first words cut off by the settings rail before `align` existed. */
+
+/* Out of layout entirely while closed, not merely invisible.
+   
+   It was `visibility: hidden`, which hides a box and keeps it in the scrollable
+   overflow. Four 300px tips anchored near the right edge of the file-access
+   tiles therefore gave the Permissions pane a horizontal scrollbar for content
+   nobody could see -- found by hiding one class at a time until the 69px went
+   away, having first blamed the `.sr-only` labels, which were innocent.
+   
+   `allow-discrete` keeps the fade: `display` is a discrete property, and
+   without this the tip would appear and vanish with no transition at all. */
+.explain-tip {
+  display: none;
+  transition-behavior: allow-discrete;
+}
+
+/* Open while the pointer is inside the box as well as on the mark -- one that
+   vanishes as you move towards it cannot be read. React Aria keeps it open
+   through a `closeDelay` for that reason, and marks the box `data-entering`
+   and `data-exiting` around the transition. The box is only in the DOM while
+   open, so `display` is React Aria's decision; the fade is ours. */
+.explain-tip {
+  display: block;
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.explain-tip[data-entering],
+.explain-tip[data-exiting] {
+  opacity: 0;
+  transform: translateY(-3px);
+}
+
+.explain-tip strong { color: var(--text); font-weight: 600; }
+
+/* ---- ./illustration.css ---- */
+/* illustrations -------------------------------------------------------- */
+
+/* Open Peeps, two colours, wearing whatever the theme is.
+   The drawings are black line on white fill and nothing else, which is the only
+   reason they can live in an app with four palettes: `ink` becomes the current
+   text colour and `paper` becomes the surface behind it, so one file covers
+   Night, Paper and both halves of System. Give the wrapper a `color` and
+   the figure follows it -- `.muted` for a quiet empty state, `--accent` for the
+   one thing on screen worth looking at. */
+.illo {
+  display: inline-block;
+  /* Height is the given dimension and the width comes from the drawing, so a
+     row of figures lines up on the floor rather than on a box. */
+  line-height: 0;
+  color: inherit;
+}
+
+.illo svg { height: 100%; width: auto; display: block; }
+
+.illo .ink { fill: currentColor; }
+
+/* The surface the figure is drawn on, which is the panel it sits in unless a
+   caller says otherwise. Not `transparent`: these have overlapping shapes, and
+   a shirt that lets the arm behind it show through reads as a hole. */
+.illo .paper { fill: var(--illo-paper); }
+
+/* ---- ./field.css ---- */
+/* fields --------------------------------------------------------------- */
+
+/* Label, description, input, error -- in the order they are wanted. The
+   description is read before typing, so it goes above; the error is the reply
+   to what was typed, so it goes after. */
+.field { display: grid; gap: var(--space-1); }
+
+.field-stack-layout { /* the default: label, description, control, error */ }
+
+.field-row-layout > .field-label { grid-column: 1; }
+
+.field-row-layout > .field-hint,
+.field-row-layout > .field-error { grid-column: 1; }
+
+.field-row-layout > :not(.field-label):not(.field-hint):not(.field-error) {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  justify-self: end;
+}
+
+.field-label {
+  font-size: var(--text-sm);
+  font-weight: var(--weight-strong);
+  color: var(--text);
+}
+
+/* Not red. The asterisk marks which fields are required; colouring it the same
+   as a failure says something has already gone wrong with every one of them. */
+.field-required { color: var(--muted); }
+
+.field-hint,
+.field-error { margin: 0; font-size: var(--text-sm); line-height: 1.45; }
+
+.field-hint { color: var(--muted); }
+
+/* Never colour alone: the field is outlined, the input is `aria-invalid`, and
+   the message says what happened in words. Red is the third signal, not the
+   only one. */
+.field-error { color: var(--bad); }
+
+.field-bad input:focus,
+.field-bad textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 30%, transparent); }
+
+/* The field owns its width; the control fills it. Otherwise a label sits over
+   an input half its length and the pair reads as two unrelated things. */
+/* A field beside a button. The field takes the space and the button keeps its
+   size, and they line up on the input rather than on the box -- the label and
+   description above it would otherwise push the button down with them. */
+/* Fields stacked down a form. Wider than the gap inside one field, so the
+   label of the next belongs to the input under it rather than to the error
+   above it. */
+.field-stack { display: grid; gap: var(--space-4); }
+
+.field-row > .field { flex: 1; min-width: 0; }
+
+/* A password with an eye -- `Input type="password"`.
+   A grid rather than `position: absolute`: both children take the one cell, the
+   button is pushed to the end and centred on the cross axis, so it sits inside
+   the input's right edge at every `size` without anybody knowing the input's
+   height. The eye is an icon-only button, and `.icon-btn` would make it the
+   picker's 34px tile -- taller than a small input -- so it is sized here from
+   its glyph instead: 14, 16 or 18px of icon (set in `Input.tsx` from `size`)
+   plus square padding, 22 / 24 / 34 tall against boxes of 27 / 36 / 50. The
+   input keeps room for it on the right: the eye's width plus the gap to the
+   edge and the same again before the text, on the scale so a density change
+   moves the room with the button. */
+.secret { display: grid; align-items: center; }
+
+.secret > input,
+.secret > .secret-eye { grid-area: 1 / 1; }
+
+.secret > input { padding-right: var(--space-8); }
+
+/* No `--space-12` on the scale; two steps that are, added. */
+.secret-lg > input { padding-right: calc(var(--space-10) + var(--space-1)); }
+
+.secret > .secret-eye {
+  justify-self: end;
+  margin-right: var(--space-1);
+  width: auto; height: auto;
+  padding: var(--space-1);
+  opacity: 1;
+}
+
+.secret-lg > .secret-eye { padding: var(--space-2); }
+
+/* ---- ./tour.css ---- */
+/* tour ----------------------------------------------------------------- */
+
+/* The layer sits over everything and catches nothing: the scrim is painted by
+   the hole's shadow, so there is no full-screen element to swallow a click. */
+.tour { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
+
+/* The control the tour is currently pointing at.
+   
+   Much of this chrome is invisible until you touch it -- `.view-add` lives at
+   `opacity: 0` until `.topbar:hover` -- so the spotlight cut its hole round a
+   button nobody could see and the card explained a blank space.
+
+   `!important` on purpose, and this is the case it is for: the tour cannot know
+   what every control does at rest, and the alternative is naming each one here
+   and watching that list drift from the rules that hide them. One declaration
+   that outranks whatever the resting state is beats an enumeration that goes
+   stale. It is scoped to a class only ever present on one element at a time. */
+.tour-target {
+  opacity: 1 !important;
+  color: var(--text) !important;
+}
+
+/* The spotlight. An enormous spread shadow dims the whole window except the
+   rectangle it is drawn on, which needs no clip path and no arithmetic. */
+.tour-hole {
+  position: fixed;
+  border-radius: var(--radius-md);
+  box-shadow: 0 0 0 9999px var(--scrim), 0 0 0 2px var(--accent);
+  transition: top var(--dur-md) var(--ease), left var(--dur-md) var(--ease),
+              width var(--dur-md) var(--ease), height var(--dur-md) var(--ease);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* It still moves between stops -- it has to, that is the point -- it just
+       arrives rather than travels. */
+  .tour-hole { transition: none; }
+}
+
+.tour-card {
+  position: fixed;
+  width: 340px;
+  max-width: calc(100vw - var(--space-8));
+  pointer-events: auto;
+  background: var(--panel);
+  border: var(--border-width) solid var(--border-strong);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-3);
+  padding: var(--space-4);
+  display: grid;
+  gap: var(--space-2);
+}
+
+.tour-card:focus { outline: none; }
+
+.tour-title { font-size: var(--text-base); }
+
+.tour-body { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
+
+.tour-actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
+
+.tour-count { color: var(--muted); font-size: var(--text-xs); }
+/* ---- tf: the themes ---- */
+:root[data-theme='night']{--bg:#0f1115;--panel:#161a21;--panel-2:#1c222b;--border:#262d38;--text:#e6e9ef;--muted:#8b94a4;--accent:#5b9dff;--accent-dim:#2a4877;--app-bg:#0f1115;color-scheme:dark}
+:root[data-theme='paper']{--bg:#f6f7f9;--panel:#ffffff;--panel-2:#f0f2f5;--border:#e4e8ec;--border-strong:#8792a1;--text:#191d23;--muted:#5d6773;--accent:#0e7872;--accent-dim:#7fbdb8;--on-accent:#ffffff;--good:#1c7a4a;--warn:#8a6216;--bad:#b3312c;--info:#216bc9;--shadow-1:0 4px 14px rgba(16, 24, 40, 0.08);--shadow-2:0 8px 24px rgba(16, 24, 40, 0.10);--shadow-3:0 12px 32px rgba(16, 24, 40, 0.12);--scrim:rgba(16, 24, 40, 0.32);color-scheme:light}