diff --git a/docs/superpowers/plans/2026-05-17-stylesheet-redesign.md b/docs/superpowers/plans/2026-05-17-stylesheet-redesign.md
index 924ace5..2ec73e8 100644
--- a/docs/superpowers/plans/2026-05-17-stylesheet-redesign.md
+++ b/docs/superpowers/plans/2026-05-17-stylesheet-redesign.md
@@ -2,11 +2,11 @@
 
 > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
 
-**Goal:** Replace `l4d2web/static/css/*` (~1,436 LOC, 196 component classes) with a tiered design system: two-tier tokens, `@layer`-ordered cascade, budgeted component classes, five high-leverage macros, an in-app style guide, and the "system is closed" workflow rule enforced via `AGENTS.md`.
+**Goal:** Replace the current ~1.4k LOC stylesheet (`l4d2web/static/css/*` + 196 component classes) with a from-scratch design system. New naming, new vocabulary, new structure — no preservation of historical names. Every template's class attributes get rewritten.
 
-**Architecture:** Pure custom CSS (no framework base). Single entry stylesheet `main.css` declares `@layer reset, tokens, elements, layout, components, widgets, utilities;` and `@import`s the rest. Tokens split into `primitives.css` (raw palette) + `semantic.css` (role aliases + dark-mode branch). Component classes are CSS-only by default; macros under `templates/ui/` exist only for five composites where markup correctness is load-bearing (`field`, `modal`, `tabs`, `confirm_form`, `badge_state`). A new public route `/styleguide` is the canonical reference contributors and agents read before producing new UI.
+**Architecture:** Pure custom CSS, single entry `main.css`, `@layer reset, tokens, elements, layout, components, widgets, utilities;`. Three-tier tokens (primitives → semantic → component-scoped). Naming convention: **parts use hyphenated child classes** (`.card-header`), **variant modifiers chain on the parent** (`.button.primary`). State on ARIA attributes (`[disabled]`, `[aria-busy]`, `[aria-selected]`, `[aria-invalid]`). Five macros under `templates/ui/` for high-leverage composites. Public `/styleguide` is the canonical reference.
 
-**Tech Stack:** Plain CSS using modern features (`@layer`, `color-mix()`, custom properties). Jinja macros for the five composites. Flask blueprint for `/styleguide`. No Sass, no PostCSS, no bundler.
+**Tech Stack:** Plain CSS (`@layer`, `color-mix()`, custom properties). Jinja macros. Flask blueprint. No Sass, no PostCSS, no bundler.
 
 **Spec:** `docs/superpowers/specs/2026-05-17-stylesheet-redesign-design.md`
 
@@ -18,61 +18,136 @@
 |---|---|---|
 | Create | `l4d2web/static/css/main.css` | Entry. Declares `@layer` order + `@import`s |
 | Create | `l4d2web/static/css/reset.css` | Modern reset (~30 LOC) |
-| Create | `l4d2web/static/css/tokens/primitives.css` | Raw palette: grays, blue, red/green/amber, spacing, type scale, radii, shadows, motion, fonts |
-| Create | `l4d2web/static/css/tokens/semantic.css` | Aliases: `--color-*`, `--space-*`, plus `[data-theme="dark"]` branch |
-| Create | `l4d2web/static/css/elements.css` | Bare HTML defaults: `body`, `h1-h6`, `a`, `code`, `kbd`, `pre`, `hr`, form elements, tables |
-| Rewrite | `l4d2web/static/css/layout.css` | `.container`, `.stack`, `.stack-h`, section spacing |
-| Create | `l4d2web/static/css/components/button.css` | `.btn` + variants/sizes + states |
-| Create | `l4d2web/static/css/components/field.css` | `.field` + label / hint / error |
-| Create | `l4d2web/static/css/components/table.css` | `.table` |
-| Create | `l4d2web/static/css/components/panel.css` | `.panel` + heading / body / footer |
-| Create | `l4d2web/static/css/components/modal.css` | `.modal` (styles `<dialog>`) + header / body / footer / close / `.modal-wide` |
-| Create | `l4d2web/static/css/components/tabs.css` | `.tabs` + `.tab[aria-selected]` + `.tab-panel` |
-| Create | `l4d2web/static/css/components/badge.css` | `.badge` + semantic + `.state-*` |
-| Create | `l4d2web/static/css/components/nav.css` | `.site-header`, `.primary-nav`, `.account-nav`, `.brand` |
-| Create | `l4d2web/static/css/components/dropdown.css` | `<select>` styling + custom dropdown helper |
-| Move | `l4d2web/static/css/widgets/file-tree.css` | From extracted `components.css` |
-| Move | `l4d2web/static/css/widgets/overlay-picker.css` | From extracted `components.css` |
-| Move | `l4d2web/static/css/widgets/console-autocomplete.css` | From current root |
-| Move | `l4d2web/static/css/widgets/editor.css` | From current root |
-| Move | `l4d2web/static/css/widgets/logs.css` | From current root |
-| Move | `l4d2web/static/css/widgets/live-state.css` | From extracted `components.css` (if present there) or pulled from `_live_state.html`'s scoped style |
-| Create | `l4d2web/static/css/utilities.css` | `.muted`, `.mono`, `.truncate`, `.sr-only` |
+| Create | `l4d2web/static/css/tokens/primitives.css` | Tier 1: raw palette |
+| Create | `l4d2web/static/css/tokens/semantic.css` | Tier 2: aliases + dark-mode branch |
+| Create | `l4d2web/static/css/elements.css` | Bare HTML defaults |
+| Create | `l4d2web/static/css/layout.css` | `.container`, `.stack`, `.row`, `.cluster` |
+| Create | `l4d2web/static/css/components/button.css` | `.button` + chained modifiers (Tier-3 tokens here) |
+| Create | `l4d2web/static/css/components/field.css` | `.field`, `.field-label`, `.field-hint`, `.field-error`, `.field-checkbox` |
+| Create | `l4d2web/static/css/components/table.css` | `.table`, `.table.striped` |
+| Create | `l4d2web/static/css/components/card.css` | `.card`, `.card-header`, `.card-body`, `.card-footer` |
+| Create | `l4d2web/static/css/components/dialog.css` | `.dialog` (styles `<dialog>`) + parts + `.dialog.wide` |
+| Create | `l4d2web/static/css/components/tabs.css` | `.tabs`, `.tab`, `.tab-panel` |
+| Create | `l4d2web/static/css/components/tag.css` | `.tag` + chained modifiers (Tier-3 tokens) |
+| Create | `l4d2web/static/css/components/toast.css` | `.toast`, `.toast-close` + variants (Tier-3 tokens) |
+| Create | `l4d2web/static/css/components/spinner.css` | `.spinner`, `.spinner.small` |
+| Create | `l4d2web/static/css/components/app-header.css` | `.app-header`, `.app-header-inner`, `.brand`, `.nav`, `.account` |
+| Create | `l4d2web/static/css/components/heading.css` | `.heading`, `.heading-actions` |
+| Create | `l4d2web/static/css/components/dropdown.css` | `<select>` helper + `.dropdown` |
+| Create | `l4d2web/static/css/widgets/file-tree.css` | `.file-tree`, `.file-tree-item`, `.file-tree-toggle`, `.file-tree-children` |
+| Create | `l4d2web/static/css/widgets/overlay-list.css` | `.overlay-list`, `.overlay-list-item`, `.overlay-list-handle`, `.overlay-list-meta` |
+| Create | `l4d2web/static/css/widgets/console.css` | `.console`, `.console-line`, `.console-line.cmd`, `.console-line.out`, `.console-input` |
+| Create | `l4d2web/static/css/widgets/editor.css` | `.editor` (CodeMirror wrapper) + relocated `--cm-*` tokens |
+| Create | `l4d2web/static/css/widgets/logs.css` | Log-viewer styling, retargeted to new semantic tokens |
+| Create | `l4d2web/static/css/widgets/server-status.css` | `.server-status`, `.server-status-state`, `.server-status-actions`, `.server-status-meta` |
+| Create | `l4d2web/static/css/widgets/player-list.css` | `.player-list`, `.player-card`, `.player-card-avatar`, `.player-card-name`, `.player-card-meta` |
+| Create | `l4d2web/static/css/utilities.css` | `.muted`, `.mono`, `.truncate`, `.visually-hidden` |
 | Create | `l4d2web/templates/ui/_field.html` | `ui.field`, `ui.checkbox`, `ui.select` |
-| Create | `l4d2web/templates/ui/_modal.html` | `ui.modal` |
+| Create | `l4d2web/templates/ui/_dialog.html` | `ui.dialog` |
 | Create | `l4d2web/templates/ui/_tabs.html` | `ui.tabs`, `ui.tab_panel` |
 | Create | `l4d2web/templates/ui/_confirm_form.html` | `ui.confirm_form` |
-| Create | `l4d2web/templates/ui/_badge.html` | `ui.badge_state` |
-| Modify | `l4d2web/templates/base.html` | Swap 5 `<link>` tags for 1; add inline theme-init script |
-| Create | `l4d2web/templates/styleguide.html` | Style guide page with every primitive + do/don't blocks |
+| Create | `l4d2web/templates/ui/_tag.html` | `ui.tag`, `ui.lifecycle_tag` |
+| Modify | `l4d2web/templates/base.html` | Swap 5 `<link>` tags for 1; rewrite header markup; add inline theme-init script |
+| Create | `l4d2web/templates/styleguide.html` | Style guide page + ✅/❌ blocks |
 | Create | `l4d2web/routes/styleguide_routes.py` | Public route `/styleguide` |
-| Modify | `l4d2web/l4d2web/app.py` | Register styleguide blueprint; remove spike registration (commit 7) |
-| Modify | `AGENTS.md` | Add "UI work" section codifying the workflow rule |
-| Delete | `l4d2web/static/css/components.css` | (commit 7) |
-| Delete | `l4d2web/static/css/tokens.css` | (commit 7) |
-| Delete | `l4d2web/static/css/logs.css` (root) | (commit 7) — moved to `widgets/` |
-| Delete | `l4d2web/static/css/console-autocomplete.css` (root) | (commit 7) — moved to `widgets/` |
-| Delete | `l4d2web/static/css/editor.css` (root) | (commit 7) — moved to `widgets/` |
-| Delete | `l4d2web/static/css/spike/` | (commit 7) — scaffolding |
-| Delete | `l4d2web/templates/spike.html` | (commit 7) |
-| Delete | `l4d2web/routes/spike_routes.py` | (commit 7) |
-| Delete | `l4d2web/static/vendor/css/` | (commit 7) — only used by spike |
+| Modify | `l4d2web/l4d2web/app.py` | Register styleguide blueprint; remove spike registration (Task 11) |
+| Modify | `AGENTS.md` | Add "UI work" section codifying naming + workflow |
+| Rewrite | All ~25 templates in `l4d2web/templates/` | Class attributes use new vocabulary; macros where applicable |
+| Delete | `l4d2web/static/css/components.css` | (Task 11) |
+| Delete | `l4d2web/static/css/tokens.css` | (Task 11) |
+| Delete | `l4d2web/static/css/logs.css` (root) | (Task 11) — replaced by `widgets/logs.css` |
+| Delete | `l4d2web/static/css/console-autocomplete.css` (root) | (Task 11) — folded into `widgets/console.css` |
+| Delete | `l4d2web/static/css/editor.css` (root) | (Task 11) — replaced by `widgets/editor.css` |
+| Delete | `l4d2web/static/css/spike/` | (Task 11) — scaffolding |
+| Delete | `l4d2web/templates/spike.html` | (Task 11) |
+| Delete | `l4d2web/routes/spike_routes.py` | (Task 11) |
+| Delete | `l4d2web/static/vendor/css/` | (Task 11) — only used by spike |
 
-## Reference: spike artifacts
+## Token migration (used in Task 6 when relocating widget CSS)
 
-The pre-validated CSS lives in **`l4d2web/static/css/spike/custom.css`**. It is organized exactly by the `@layer` blocks the production stylesheet uses. Each task below extracts a layer (or part of a layer) into its production file.
+The old `tokens.css` and the new `tokens/semantic.css` overlap on color names but differ on spacing, radii, and a few colors. Apply this table when copying any rule out of the old `components.css` or root-level widget files:
 
-Read the spike file as needed:
+| Old | New | Notes |
+|---|---|---|
+| `--color-bg`, `--color-text`, `--color-muted`, `--color-border`, `--color-link`, `--color-primary`, `--color-danger`, `--color-warning`, `--color-success`, `--color-focus`, `--color-surface` | (same) | Unchanged. |
+| `--color-surface-muted` | `--color-surface-2` | |
+| `--color-border-muted` | `--color-border-soft` | |
+| `--color-button-primary` | `--color-primary` | |
+| `--color-button-danger` | `--color-danger` | |
+| `--color-log-bg` | `--color-surface-2` | |
+| `--color-log-text` | `--color-text` | |
+| `--space-xs` | `--space-1` | 0.25rem |
+| `--space-s` | `--space-2` | 0.5rem |
+| `--space-m` | `--space-3` | 0.75rem |
+| `--space-l` | `--space-4` | 1rem |
+| `--space-xl` | `--space-5` | 1.5rem |
+| `--space-2xl` | `--space-6` | 2rem |
+| `--radius-base`, `--radius-s` | `--radius-1` | 0.25rem |
+| `--radius-m` | `--radius-2` | 0.5rem |
+| `--line` | `1px solid var(--color-border)` | Inline-expanded — `--line` is not in the new system |
+| `--line-soft` | `1px solid var(--color-border-soft)` | Inline-expanded |
+| `--font-mono` | (same) | Unchanged. |
 
-```bash
-cat l4d2web/l4d2web/static/css/spike/custom.css | sed -n '/^@layer reset/,/^}/p'
-```
+CodeMirror tokens (`--cm-*`, `--syntax-*`, `--editor-rows`) move with the editor widget — see Task 6, Step 4b.
 
-Or open it in an editor and copy the `@layer X { … }` blocks one at a time.
+## Class-name migration (used in Task 10 for templates)
 
-The spike file's `@layer` declarations and `@layer X { … }` wrappers stay in the file when copied into the production files; the `@layer` wrapper around each block is what gives the production cascade its ordering.
+The new vocabulary is a full rename. The mapping is dense; agents executing Task 10 should treat this as a find-replace table. Old names on the left, new on the right; modifier-style chains are space-separated multi-class additions.
 
-The spike template `l4d2web/templates/spike.html` is the reference for the style-guide page's markup vocabulary (every widget appears there at least once).
+| Old class | New class | Notes |
+|---|---|---|
+| `.btn` | `.button` | All variants follow |
+| `.btn-primary` | `.button primary` | Chained modifier — two classes |
+| `.btn-secondary` | `.button` | Default (no modifier) is the secondary look |
+| `.btn-danger` | `.button danger` | |
+| `.btn-outline` | `.button outline` | |
+| `.btn-link` | `.button link` | (also subsumes `.link-button` below) |
+| `.btn-sm` | `.button small` | |
+| `.button-secondary` (old short name) | `.button` | |
+| `.danger-outline` | `.button danger outline` | Composes from existing axes |
+| `.link-button` | `.button link` | |
+| `.button-row` | `.row` | Generic horizontal flex (in layout) |
+| `.panel`, `.card` | `.card` | One vocabulary |
+| `.panel-heading`, `.card-heading` | `.card-header` | Match HTML semantics |
+| `.panel-body` | `.card-body` | |
+| `.panel-footer` | `.card-footer` | |
+| `.modal` | `.dialog` | Matches `<dialog>` element |
+| `.modal-wide` | `.dialog wide` | Chained modifier |
+| `.modal-header` | `.dialog-header` | |
+| `.modal-body` | `.dialog-body` | |
+| `.modal-footer` | `.dialog-footer` | |
+| `.modal-close` | `.dialog-close` | |
+| `.badge` | `.tag` | |
+| `.badge-success` | `.tag success` | Chained |
+| `.badge-warning` | `.tag warning` | |
+| `.badge-danger` | `.tag danger` | |
+| `.badge-muted` | `.tag muted` | |
+| `.state-running` | `.tag success` | Use `ui.lifecycle_tag(state)` instead of hand-picking |
+| `.state-stopped` | `.tag muted` | |
+| `.state-unknown` | `.tag muted` | |
+| `.state-transient` | `.tag warning` | |
+| `.state-drift` | `.tag danger` | |
+| `.site-header` | `.app-header` | |
+| `.site-header-inner` | `.app-header-inner` | |
+| `.primary-nav` | `.nav` | |
+| `.account-nav` | `.account` | |
+| `.brand` | (same) | |
+| `.page-heading` | `.heading` | |
+| `.page-footer-actions`, `.form-actions-inline`, `.button-row` | `.row` (or `.cluster` for wrap-friendly) | |
+| `.sr-only` | `.visually-hidden` | |
+| `.overlay-picker` | `.overlay-list` | |
+| `.overlay-picker-list` | `.overlay-list` direct child `<ul>` styled by selector | |
+| `.overlay-picker-row` | `.overlay-list-item` | |
+| `.overlay-picker-handle` | `.overlay-list-handle` | |
+| `.overlay-picker-name`, `.overlay-picker-expose` | `.overlay-list-meta` (consolidated) | |
+| `.overlay-picker-remove`, `.overlay-picker-add`, `.overlay-picker-empty` | `.overlay-list-remove` / `-add` / `-empty` | |
+| `.file-tree-row` | `.file-tree-item` | |
+| `.file-tree-row-file` | `.file-tree-item file` | Chained modifier |
+| `.field-input` (rare) | drop the class; style via `.field > input` selector | |
+
+`★ Insight ─────────────────────────────────────`
+Search-and-replace gotcha: the chained-modifier form means a single attribute changes from `class="btn btn-primary"` to `class="button primary"`. Both are two-class lists, but the *order matters* for the inheritance chain (component class first, modifiers after). Templates need attention to ordering when the rename is mechanical.
+`─────────────────────────────────────────────────`
 
 ---
 
@@ -86,7 +161,7 @@ The spike template `l4d2web/templates/spike.html` is the reference for the style
 
 Nothing else changes; `base.html` still loads the old CSS. The new files exist but are not yet referenced.
 
-- [ ] **Step 1: Create `static/css/tokens/` directory**
+- [ ] **Step 1: Create the tokens/ directory**
 
 ```bash
 mkdir -p l4d2web/l4d2web/static/css/tokens
@@ -97,9 +172,9 @@ mkdir -p l4d2web/l4d2web/static/css/tokens
 `l4d2web/l4d2web/static/css/main.css`:
 
 ```css
-/* Entry stylesheet. Declares the @layer order, then @imports each layer's
-   file(s). Cascade specificity is determined by the @layer order — never
-   by selector specificity or file order. */
+/* Entry stylesheet. Declares @layer order, then @imports each layer's
+   file(s). Cascade specificity is determined by layer order, not by
+   selector specificity or file order. */
 
 @layer reset, tokens, elements, layout, components, widgets, utilities;
 
@@ -112,19 +187,23 @@ mkdir -p l4d2web/l4d2web/static/css/tokens
 @import url("./components/button.css")               layer(components);
 @import url("./components/field.css")                layer(components);
 @import url("./components/table.css")                layer(components);
-@import url("./components/panel.css")                layer(components);
-@import url("./components/modal.css")                layer(components);
+@import url("./components/card.css")                 layer(components);
+@import url("./components/dialog.css")               layer(components);
 @import url("./components/tabs.css")                 layer(components);
-@import url("./components/badge.css")                layer(components);
-@import url("./components/nav.css")                  layer(components);
+@import url("./components/tag.css")                  layer(components);
+@import url("./components/toast.css")                layer(components);
+@import url("./components/spinner.css")              layer(components);
+@import url("./components/app-header.css")           layer(components);
+@import url("./components/heading.css")              layer(components);
 @import url("./components/dropdown.css")             layer(components);
 
 @import url("./widgets/file-tree.css")               layer(widgets);
-@import url("./widgets/overlay-picker.css")          layer(widgets);
-@import url("./widgets/console-autocomplete.css")    layer(widgets);
+@import url("./widgets/overlay-list.css")            layer(widgets);
+@import url("./widgets/console.css")                 layer(widgets);
 @import url("./widgets/editor.css")                  layer(widgets);
 @import url("./widgets/logs.css")                    layer(widgets);
-@import url("./widgets/live-state.css")              layer(widgets);
+@import url("./widgets/server-status.css")           layer(widgets);
+@import url("./widgets/player-list.css")             layer(widgets);
 
 @import url("./utilities.css")                       layer(utilities);
 ```
@@ -134,10 +213,6 @@ mkdir -p l4d2web/l4d2web/static/css/tokens
 `l4d2web/l4d2web/static/css/reset.css`:
 
 ```css
-/* Modern reset. Mirrors the Andy-Bell / Josh-Comeau style. Intentional
-   choices: keep button looking like a button (no all:unset), preserve
-   focus rings via :focus-visible later in elements.css. */
-
 *, *::before, *::after { box-sizing: border-box; }
 body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
 ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
@@ -152,57 +227,45 @@ h1, h2, h3, h4 { text-wrap: balance; }
 
 - [ ] **Step 4: Write `tokens/primitives.css`**
 
-Extract from `static/css/spike/custom.css` — the `:root { … }` block inside `@layer tokens` that contains the primitive palette (lines beginning `--gray-50:`, `--blue-200:`, `--red-200:`, etc., through the font stacks). The content is:
-
 `l4d2web/l4d2web/static/css/tokens/primitives.css`:
 
 ```css
-/* Tier 1 — primitives. Raw palette. No semantic meaning. Consumed only
-   by tokens/semantic.css, never by component CSS directly. */
+/* Tier 1 — primitives. Raw palette. Consumed only by tokens/semantic.css,
+   never by component CSS directly. */
 
 :root {
-  /* grayscale */
   --gray-50:  #fafafa; --gray-100: #f4f4f5; --gray-200: #e4e4e7;
   --gray-300: #d4d4d8; --gray-400: #a1a1aa; --gray-500: #71717a;
   --gray-600: #52525b; --gray-700: #3f3f46; --gray-800: #27272a;
   --gray-900: #18181b; --gray-950: #09090b;
 
-  /* brand blue */
   --blue-200: #bfdbfe; --blue-300: #93c5fd; --blue-500: #3b82f6;
   --blue-600: #2563eb; --blue-700: #1d4ed8; --blue-800: #1e40af;
 
-  /* state colors */
   --red-200: #fecaca;  --red-400: #fca5a5;  --red-700: #b42318;
   --green-300: #86efac; --green-700: #067647;
   --amber-300: #fcd34d; --amber-700: #a15c07;
 
-  /* spacing */
   --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
   --space-4: 1rem;    --space-5: 1.5rem; --space-6: 2rem;
   --space-7: 3rem;
 
-  /* radii */
   --radius-1: 0.25rem; --radius-2: 0.5rem; --radius-3: 0.75rem;
   --radius-full: 9999px;
 
-  /* type scale */
   --text-xs:   0.75rem;  --text-sm:   0.875rem; --text-base: 1rem;
   --text-lg:   1.125rem; --text-xl:   1.25rem;  --text-2xl:  1.5rem;
 
-  /* line heights */
   --leading-tight: 1.2;
   --leading-normal: 1.5;
 
-  /* shadows */
   --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
   --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
   --shadow-lg: 0 16px 32px rgba(0,0,0,0.18);
 
-  /* motion */
   --duration-fast: 120ms;
   --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
 
-  /* fonts */
   --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
@@ -213,10 +276,8 @@ Extract from `static/css/spike/custom.css` — the `:root { … }` block inside
 `l4d2web/l4d2web/static/css/tokens/semantic.css`:
 
 ```css
-/* Tier 2 — semantic tokens. Aliases for use cases. Components consume
-   ONLY these (var(--color-*), var(--space-*), etc.) — never primitives
-   directly. Dark mode lives here: [data-theme="dark"] redefines the
-   semantic aliases to point at different primitives. */
+/* Tier 2 — semantic tokens. Components reference only these. Dark mode
+   re-points the aliases in the [data-theme="dark"] block. */
 
 :root,
 :root[data-theme="light"] {
@@ -234,6 +295,8 @@ Extract from `static/css/spike/custom.css` — the `:root { … }` block inside
   --color-primary-hover: var(--blue-800);
   --color-on-primary:    #ffffff;
 
+  --color-info:          var(--blue-500);
+
   --color-danger:        var(--red-700);
   --color-on-danger:     #ffffff;
   --color-warning:       var(--amber-700);
@@ -260,6 +323,8 @@ Extract from `static/css/spike/custom.css` — the `:root { … }` block inside
   --color-primary-hover: var(--blue-200);
   --color-on-primary:    var(--gray-950);
 
+  --color-info:          var(--blue-300);
+
   --color-danger:        var(--red-400);
   --color-on-danger:     var(--gray-950);
   --color-warning:       var(--amber-300);
@@ -270,7 +335,7 @@ Extract from `static/css/spike/custom.css` — the `:root { … }` block inside
 }
 ```
 
-- [ ] **Step 6: Verify the files exist and are syntactically valid CSS**
+- [ ] **Step 6: Verify the files exist**
 
 ```bash
 test -s l4d2web/l4d2web/static/css/main.css && \
@@ -280,9 +345,7 @@ test -s l4d2web/l4d2web/static/css/tokens/semantic.css && \
 echo OK
 ```
 
-Expected: `OK`
-
-(There is no CSS linter in this project. Syntactic validity is verified visually in Task 2 when `main.css` is loaded by the browser and DevTools would report parse errors.)
+Expected: `OK`.
 
 - [ ] **Step 7: Commit**
 
@@ -290,7 +353,7 @@ Expected: `OK`
 git add l4d2web/l4d2web/static/css/main.css \
         l4d2web/l4d2web/static/css/reset.css \
         l4d2web/l4d2web/static/css/tokens/
-git commit -m "feat(stylesheet): foundation — main.css, reset, two-tier tokens"
+git commit -m "feat(stylesheet): foundation — main.css, reset, three-tier tokens"
 ```
 
 ---
@@ -300,18 +363,15 @@ git commit -m "feat(stylesheet): foundation — main.css, reset, two-tier tokens
 **Files:**
 - Create: `l4d2web/static/css/elements.css`
 - Rewrite: `l4d2web/static/css/layout.css`
-- Modify: `l4d2web/templates/base.html` — collapse 5 `<link>` tags into 1, add inline theme-init script
+- Modify: `l4d2web/templates/base.html` — collapse 5 `<link>` tags into 1, rewrite header markup to new vocabulary (the `.app-header` block), add inline theme-init script
 
-After this commit the site loads the new system. Pages will look bare in places where component classes aren't yet styled. That is intentional and visible.
+After this commit the site loads the new system. Existing pages still use OLD class names in their attributes, so most things look bare until Task 10 rewrites templates. The `base.html` header is rewritten in this task so the top of every page renders correctly from here on.
 
 - [ ] **Step 1: Write `elements.css`**
 
 `l4d2web/l4d2web/static/css/elements.css`:
 
 ```css
-/* Bare HTML defaults. Consumes semantic tokens only. Anything that styles
-   a tag selector lives here; class selectors live in components/. */
-
 html, body {
   font-family: var(--font-sans);
   font-size: var(--text-base);
@@ -368,11 +428,13 @@ th { background: var(--color-surface-2); font-weight: 600; font-size: var(--text
 Overwrite `l4d2web/l4d2web/static/css/layout.css` with:
 
 ```css
-/* Composition objects. Don't paint, only arrange. */
-
 .container { max-width: 72rem; margin-inline: auto; padding-inline: var(--space-4); }
-.stack > * + * { margin-top: var(--space-3); }
-.stack-h { display: flex; gap: var(--space-3); align-items: center; }
+
+.stack    { display: flex; flex-direction: column; gap: var(--space-3); }
+.stack > * + * { margin-top: 0; } /* flex gap supersedes ad-hoc margins */
+
+.row      { display: flex; gap: var(--space-2); align-items: center; }
+.cluster  { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
 
 main > section { margin-block: var(--space-6); }
 main > section > h2:first-child {
@@ -384,11 +446,11 @@ main > section > h2:first-child {
 
 - [ ] **Step 3: Update `base.html`**
 
-In `l4d2web/l4d2web/templates/base.html`, replace the five separate `<link>` tags with a single `<link>` for `main.css`, and add an inline theme-init script that reads `prefers-color-scheme` before paint (uses the existing `g.csp_nonce` for CSP compliance).
+Replace the entire `<head>` and `<body>` of `l4d2web/l4d2web/templates/base.html` to use the new vocabulary. Read the current file first to preserve the script-include block and the modal-container `<dialog>` at the bottom.
 
 Edit `l4d2web/l4d2web/templates/base.html`:
 
-Old `<head>` block (the five stylesheet links):
+Old `<head>` block (the five stylesheet links + meta tags):
 
 ```html
     <link rel="stylesheet" href="{{ url_for('static', filename='css/tokens.css') }}">
@@ -398,12 +460,11 @@ Old `<head>` block (the five stylesheet links):
     <link rel="stylesheet" href="{{ url_for('static', filename='css/console-autocomplete.css') }}">
 ```
 
-New `<head>` block:
+New `<head>` block — replace the above with:
 
 ```html
     <script nonce="{{ g.csp_nonce }}">
-      // Set data-theme before paint so the first frame matches the user's OS preference.
-      // Future user-preference override (localStorage) plugs in here.
+      // Set data-theme before paint so the first frame matches OS preference.
       (function () {
         try {
           var dark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -414,31 +475,95 @@ New `<head>` block:
     <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
 ```
 
-- [ ] **Step 4: Verify the dev server still boots and `/dashboard` returns 200**
+Old `<body>` site header markup:
 
-If the dev server isn't running, start it: `LEFT4ME_SPIKE=1 scripts/dev-server.py --port 5051`
-
-```bash
-curl -s -o /dev/null -w "%{http_code}\n" http://127.0.0.1:5051/dashboard
+```html
+    <header class="site-header">
+      <div class="site-header-inner">
+        <nav class="primary-nav" aria-label="Main navigation">
+          <a class="brand" href="{{ '/dashboard' if g.user else '/login' }}">left4me</a>
+          {% if g.user %}
+          <a href="/servers">servers</a>
+          <a href="/blueprints">blueprints</a>
+          <a href="/overlays">overlays</a>
+          {% endif %}
+        </nav>
+        {% if g.user %}
+        <nav class="account-nav" aria-label="Account navigation">
+          {% if g.user.admin %}<a href="/admin">admin</a>{% endif %}
+          <a class="muted" href="/profile">{{ g.user.username }}</a>
+          <form method="post" action="/logout" class="inline-form">
+            <input type="hidden" name="csrf_token" value="{{ session.get('csrf_token', '') }}">
+            <button class="link-button" type="submit">logout</button>
+          </form>
+        </nav>
+        {% endif %}
+      </div>
+    </header>
 ```
 
-Expected: `302` (redirect to login) or `200`. NOT `500`.
+New site header markup:
 
-If the dev server reloaded the changes, also fetch `/static/css/main.css` to confirm it serves:
+```html
+    <header class="app-header">
+      <div class="app-header-inner">
+        <nav class="nav" aria-label="Main navigation">
+          <a class="brand" href="{{ '/dashboard' if g.user else '/login' }}">left4me</a>
+          {% if g.user %}
+          <a href="/servers">servers</a>
+          <a href="/blueprints">blueprints</a>
+          <a href="/overlays">overlays</a>
+          {% endif %}
+        </nav>
+        {% if g.user %}
+        <nav class="account" aria-label="Account navigation">
+          {% if g.user.admin %}<a href="/admin">admin</a>{% endif %}
+          <a class="muted" href="/profile">{{ g.user.username }}</a>
+          <form method="post" action="/logout" style="display:inline; margin:0">
+            <input type="hidden" name="csrf_token" value="{{ session.get('csrf_token', '') }}">
+            <button class="button link" type="submit">logout</button>
+          </form>
+        </nav>
+        {% endif %}
+      </div>
+    </header>
+```
+
+(The inline `style="display:inline; margin:0"` on the logout form is acceptable as a single-purpose layout exception for a one-line inline form. If the pattern recurs, promote to a `.inline-form` utility later — but check first.)
+
+Old modal-container at the bottom:
+
+```html
+    <dialog id="modal-container" class="modal modal-wide">
+      <div id="modal-content"></div>
+    </dialog>
+```
+
+New modal-container:
+
+```html
+    <dialog id="modal-container" class="dialog wide">
+      <div id="modal-content"></div>
+    </dialog>
+```
+
+- [ ] **Step 4: Verify the dev server boots, `/login` returns 200**
+
+```bash
+curl -s -o /dev/null -w "%{http_code}\n" http://127.0.0.1:5051/login
+```
+
+Expected: `200`. NOT `500`.
 
 ```bash
 curl -s -o /dev/null -w "%{http_code}\n" http://127.0.0.1:5051/static/css/main.css
 ```
 
-Expected: `200`
+Expected: `200`.
 
-- [ ] **Step 5: Open `/dashboard` (or `/login`) in a browser, confirm typography and base elements render**
+- [ ] **Step 5: Open `/login` in a browser, confirm typography and the new header render**
 
-The page will look bare — no buttons styled yet, no panels, no tables. That is correct for this checkpoint. Verify:
-- Body bg is light gray (`--gray-100`)
-- Typography uses system sans
-- Links are blue and underlined
-- Dark mode toggled via DevTools (`document.documentElement.dataset.theme = 'dark'`) flips the page correctly
+The header should be a single bordered card with the brand left-aligned. Inside pages, content will look bare (no `.card`, `.button` styling yet) — that's correct for this checkpoint.
 
 - [ ] **Step 6: Commit**
 
@@ -446,21 +571,20 @@ The page will look bare — no buttons styled yet, no panels, no tables. That is
 git add l4d2web/l4d2web/static/css/elements.css \
         l4d2web/l4d2web/static/css/layout.css \
         l4d2web/l4d2web/templates/base.html
-git commit -m "feat(stylesheet): elements + layout layers; base.html loads main.css"
+git commit -m "feat(stylesheet): elements + layout layers; base.html switches to main.css and new app-header markup"
 ```
 
 ---
 
-## Task 3: Core components — button, panel, table, badge, nav
+## Task 3: Core components — button, card, table, tag, app-header, heading
 
 **Files:**
 - Create: `l4d2web/static/css/components/button.css`
-- Create: `l4d2web/static/css/components/panel.css`
+- Create: `l4d2web/static/css/components/card.css`
 - Create: `l4d2web/static/css/components/table.css`
-- Create: `l4d2web/static/css/components/badge.css`
-- Create: `l4d2web/static/css/components/nav.css`
-
-Half the surface starts looking right after this commit. The contents below are extracted from `static/css/spike/custom.css`'s `@layer components { … }` block, with the spike-only `.spike-toolbar` rule excluded.
+- Create: `l4d2web/static/css/components/tag.css`
+- Create: `l4d2web/static/css/components/app-header.css`
+- Create: `l4d2web/static/css/components/heading.css`
 
 - [ ] **Step 1: Create components directory**
 
@@ -470,74 +594,98 @@ mkdir -p l4d2web/l4d2web/static/css/components
 
 - [ ] **Step 2: Write `components/button.css`**
 
+This is the canonical example of the Tier-3 component-scoped-token pattern. All variants compose because they re-point `--button-bg`, `--button-fg`, `--button-border` and the base rule consumes those local properties.
+
 `l4d2web/l4d2web/static/css/components/button.css`:
 
 ```css
-.btn {
+.button {
+  /* Tier-3 component-scoped tokens (private). Variants re-point these. */
+  --button-bg:     var(--color-surface);
+  --button-fg:     var(--color-text);
+  --button-border: var(--color-border);
+
   display: inline-flex; align-items: center; gap: var(--space-1);
   padding: 0.45rem 0.9rem;
-  border: 1px solid transparent; border-radius: var(--radius-1);
+  border: 1px solid var(--button-border); border-radius: var(--radius-1);
+  background: var(--button-bg); color: var(--button-fg);
   font-size: var(--text-base); line-height: 1.2;
   cursor: pointer; text-decoration: none; user-select: none;
   transition: background var(--duration-fast) var(--ease-out),
               border-color var(--duration-fast) var(--ease-out),
               color var(--duration-fast) var(--ease-out);
 }
-.btn-primary {
-  background: var(--color-primary); border-color: var(--color-primary);
-  color: var(--color-on-primary);
+.button:hover:not([disabled]) {
+  background: color-mix(in srgb, var(--button-fg) 6%, var(--button-bg));
 }
-.btn-primary:hover:not([disabled]) {
+
+/* Color variants set the Tier-3 trio. */
+.button.primary {
+  --button-bg:     var(--color-primary);
+  --button-fg:     var(--color-on-primary);
+  --button-border: var(--color-primary);
+}
+.button.primary:hover:not([disabled]) {
   background: var(--color-primary-hover); border-color: var(--color-primary-hover);
 }
-.btn-secondary {
-  background: var(--color-surface); border-color: var(--color-border);
-  color: var(--color-text);
+.button.danger {
+  --button-bg:     var(--color-danger);
+  --button-fg:     var(--color-on-danger);
+  --button-border: var(--color-danger);
 }
-.btn-secondary:hover:not([disabled]) {
-  background: var(--color-surface-2);
-}
-.btn-danger {
-  background: var(--color-danger); border-color: var(--color-danger);
-  color: var(--color-on-danger);
-}
-.btn-outline {
-  background: transparent; border-color: var(--color-primary);
-  color: var(--color-primary);
-}
-.btn-outline:hover:not([disabled]) {
-  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
-}
-.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
-.btn[aria-busy="true"]::before { content: "⟳"; margin-right: var(--space-1); animation: btn-spin 1s linear infinite; }
-@keyframes btn-spin { to { transform: rotate(360deg); } }
-.btn-sm { padding: 0.25rem 0.6rem; font-size: var(--text-sm); }
 
-.button-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
+/* Shape modifiers read the inherited border color — they compose with
+   .primary / .danger / etc. .outline reads --button-border, .ghost zeroes
+   it, .link drops the surface entirely. */
+.button.outline {
+  --button-bg: transparent;
+  --button-fg: var(--button-border);
+}
+.button.ghost {
+  --button-bg: transparent;
+  --button-fg: var(--color-text);
+  --button-border: transparent;
+}
+.button.link {
+  --button-bg: transparent;
+  --button-border: transparent;
+  color: var(--color-link);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  padding-inline: 0;
+}
 
-.link-button {
-  background: none; border: 0; padding: 0;
-  color: var(--color-link); text-decoration: underline; cursor: pointer;
-  font: inherit;
+/* States via ARIA attributes. */
+.button[disabled] { opacity: 0.5; cursor: not-allowed; }
+.button[aria-busy="true"]::before {
+  content: "⟳"; margin-right: var(--space-1);
+  animation: button-spin 1s linear infinite;
+}
+@keyframes button-spin { to { transform: rotate(360deg); } }
+
+/* Size modifier. */
+.button.small {
+  padding: 0.25rem 0.6rem;
+  font-size: var(--text-sm);
 }
 ```
 
-- [ ] **Step 3: Write `components/panel.css`**
+- [ ] **Step 3: Write `components/card.css`**
 
-`l4d2web/l4d2web/static/css/components/panel.css`:
+`l4d2web/l4d2web/static/css/components/card.css`:
 
 ```css
-.panel {
+.card {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-2);
   background: var(--color-surface);
   box-shadow: var(--shadow-sm);
   overflow: hidden;
 }
-.panel-heading { border-bottom: 1px solid var(--color-border-soft); padding: var(--space-3) var(--space-4); }
-.panel-heading h3 { margin: 0; }
-.panel-body    { padding: var(--space-3) var(--space-4); }
-.panel-footer  { border-top: 1px solid var(--color-border-soft); padding: var(--space-3) var(--space-4); background: var(--color-surface-2); }
+.card-header { border-bottom: 1px solid var(--color-border-soft); padding: var(--space-3) var(--space-4); }
+.card-header h2, .card-header h3 { margin: 0; }
+.card-body   { padding: var(--space-3) var(--space-4); }
+.card-footer { border-top: 1px solid var(--color-border-soft); padding: var(--space-3) var(--space-4); background: var(--color-surface-2); }
 ```
 
 - [ ] **Step 4: Write `components/table.css`**
@@ -545,125 +693,158 @@ mkdir -p l4d2web/l4d2web/static/css/components
 `l4d2web/l4d2web/static/css/components/table.css`:
 
 ```css
-/* Table element styling is in elements.css; this layer only adds the
-   .table class hook for project-specific borders/striping. */
-
 .table {
   border: 1px solid var(--color-border-soft);
   border-radius: var(--radius-1);
   overflow: hidden;
 }
-.table-striped tbody tr:nth-child(odd) td {
+.table.striped tbody tr:nth-child(odd) td {
   background: color-mix(in srgb, var(--color-text) 3%, var(--color-surface));
 }
 ```
 
-- [ ] **Step 5: Write `components/badge.css`**
+- [ ] **Step 5: Write `components/tag.css`**
 
-`l4d2web/l4d2web/static/css/components/badge.css`:
+Same Tier-3 pattern as `.button`.
+
+`l4d2web/l4d2web/static/css/components/tag.css`:
 
 ```css
-.badge {
+.tag {
+  --tag-bg:     var(--color-surface);
+  --tag-fg:     var(--color-text);
+  --tag-border: var(--color-border);
+
   display: inline-block;
   padding: 0.1rem 0.55rem;
   font-size: var(--text-xs); line-height: 1.4;
+  border: 1px solid var(--tag-border);
   border-radius: var(--radius-full);
-  border: 1px solid var(--color-border);
-  background: var(--color-surface); color: var(--color-text);
+  background: var(--tag-bg); color: var(--tag-fg);
   font-weight: 500;
 }
-.badge-success { background: color-mix(in srgb, var(--color-success) 16%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-success) 40%, var(--color-border)); color: var(--color-success); }
-.badge-warning { background: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-border)); color: var(--color-warning); }
-.badge-danger  { background: color-mix(in srgb, var(--color-danger)  16%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-danger)  40%, var(--color-border)); color: var(--color-danger);  }
-.badge-muted   { color: var(--color-muted); }
 
-/* Server-lifecycle state pills */
-.state-running   { background: color-mix(in srgb, var(--color-success) 16%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-success) 40%, var(--color-border)); color: var(--color-success); }
-.state-stopped   { background: color-mix(in srgb, var(--color-muted)   16%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-muted)   40%, var(--color-border)); color: var(--color-muted);   }
-.state-unknown   { color: var(--color-muted); }
-.state-transient { background: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-border)); color: var(--color-warning); }
-.state-drift     { background: color-mix(in srgb, var(--color-danger)  16%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-danger)  40%, var(--color-border)); color: var(--color-danger);  }
+.tag.success {
+  --tag-bg:     color-mix(in srgb, var(--color-success) 16%, var(--color-surface));
+  --tag-fg:     var(--color-success);
+  --tag-border: color-mix(in srgb, var(--color-success) 40%, var(--color-border));
+}
+.tag.warning {
+  --tag-bg:     color-mix(in srgb, var(--color-warning) 16%, var(--color-surface));
+  --tag-fg:     var(--color-warning);
+  --tag-border: color-mix(in srgb, var(--color-warning) 40%, var(--color-border));
+}
+.tag.danger {
+  --tag-bg:     color-mix(in srgb, var(--color-danger) 16%, var(--color-surface));
+  --tag-fg:     var(--color-danger);
+  --tag-border: color-mix(in srgb, var(--color-danger) 40%, var(--color-border));
+}
+.tag.info {
+  --tag-bg:     color-mix(in srgb, var(--color-info) 16%, var(--color-surface));
+  --tag-fg:     var(--color-info);
+  --tag-border: color-mix(in srgb, var(--color-info) 40%, var(--color-border));
+}
+.tag.muted {
+  --tag-fg: var(--color-muted);
+}
 ```
 
-- [ ] **Step 6: Write `components/nav.css`**
+- [ ] **Step 6: Write `components/app-header.css`**
 
-`l4d2web/l4d2web/static/css/components/nav.css`:
+`l4d2web/l4d2web/static/css/components/app-header.css`:
 
 ```css
-.site-header {
+.app-header {
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-2);
   padding: var(--space-2) var(--space-3);
   margin-block: var(--space-3);
 }
-.site-header-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
-.primary-nav, .account-nav { display: flex; gap: var(--space-3); align-items: center; }
-.primary-nav .brand { font-weight: 700; }
-.inline-form { display: inline; margin: 0; }
+.app-header-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
+.nav, .account   { display: flex; gap: var(--space-3); align-items: center; }
+.brand           { font-weight: 700; }
 ```
 
-- [ ] **Step 7: Verify in browser**
+- [ ] **Step 7: Write `components/heading.css`**
 
-Open `/dashboard` or `/servers`. Buttons should be styled, the site header should look like a bordered card with the brand left-aligned and account links right-aligned, state pills in the server list should be colored.
+`l4d2web/l4d2web/static/css/components/heading.css`:
 
-- [ ] **Step 8: Commit**
+```css
+.heading {
+  display: flex; justify-content: space-between; align-items: flex-start;
+  gap: var(--space-3); flex-wrap: wrap;
+  margin-block: var(--space-3);
+}
+.heading h1, .heading h2 { margin: 0; }
+.heading-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
+```
+
+- [ ] **Step 8: Verify in browser**
+
+Open `/dashboard` or `/login`. The app header (top bar) should render as a bordered card. `.button`-classed buttons (after Task 10 templates) will look styled; pre-Task-10 pages still use old class names so they look bare.
+
+- [ ] **Step 9: Commit**
 
 ```bash
 git add l4d2web/l4d2web/static/css/components/button.css \
-        l4d2web/l4d2web/static/css/components/panel.css \
+        l4d2web/l4d2web/static/css/components/card.css \
         l4d2web/l4d2web/static/css/components/table.css \
-        l4d2web/l4d2web/static/css/components/badge.css \
-        l4d2web/l4d2web/static/css/components/nav.css
-git commit -m "feat(stylesheet): core components — button, panel, table, badge, nav"
+        l4d2web/l4d2web/static/css/components/tag.css \
+        l4d2web/l4d2web/static/css/components/app-header.css \
+        l4d2web/l4d2web/static/css/components/heading.css
+git commit -m "feat(stylesheet): core components — button, card, table, tag, app-header, heading"
 ```
 
 ---
 
-## Task 4: Composite components — modal, tabs, field, dropdown
+## Task 4: Composite components — dialog, tabs, field, dropdown, toast, spinner
 
 **Files:**
-- Create: `l4d2web/static/css/components/modal.css`
+- Create: `l4d2web/static/css/components/dialog.css`
 - Create: `l4d2web/static/css/components/tabs.css`
 - Create: `l4d2web/static/css/components/field.css`
 - Create: `l4d2web/static/css/components/dropdown.css`
+- Create: `l4d2web/static/css/components/toast.css`
+- Create: `l4d2web/static/css/components/spinner.css`
 
-- [ ] **Step 1: Write `components/modal.css`**
+- [ ] **Step 1: Write `components/dialog.css`**
 
-`l4d2web/l4d2web/static/css/components/modal.css`:
+`l4d2web/l4d2web/static/css/components/dialog.css`:
 
 ```css
-.modal {
+.dialog {
   border: 1px solid var(--color-border); border-radius: var(--radius-2);
   background: var(--color-surface); color: var(--color-text);
   box-shadow: var(--shadow-lg);
   padding: 0;
   max-width: min(420px, 92vw);
 }
-.modal-wide { max-width: min(720px, 95vw); }
+.dialog.wide { max-width: min(720px, 95vw); }
 
-.modal::backdrop {
+.dialog::backdrop {
   background: rgba(0,0,0,0.45);
   backdrop-filter: blur(2px);
 }
 
-/* Inner article (used by current _modal_partial pattern) shouldn't add extra chrome */
-.modal > article { padding: 0; margin: 0; background: transparent; border: 0; box-shadow: none; }
+/* The HX-Modal pattern wraps content in <article>; strip that wrapper's
+   default chrome so the dialog's own borders win. */
+.dialog > article { padding: 0; margin: 0; background: transparent; border: 0; box-shadow: none; }
 
-.modal-header {
+.dialog-header {
   display: flex; justify-content: space-between; align-items: center;
   padding: var(--space-3) var(--space-4);
   border-bottom: 1px solid var(--color-border-soft);
 }
-.modal-header h2 { margin: 0; font-size: var(--text-lg); }
-.modal-body   { padding: var(--space-3) var(--space-4); }
-.modal-footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border-soft); }
+.dialog-header h2 { margin: 0; font-size: var(--text-lg); }
+.dialog-body   { padding: var(--space-3) var(--space-4); }
+.dialog-footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border-soft); }
 
-.modal-close {
+.dialog-close {
   background: none; border: 0; font-size: 1.25rem;
   color: var(--color-muted); cursor: pointer; padding: 0 var(--space-1);
 }
-.modal-close:hover { color: var(--color-text); }
+.dialog-close:hover { color: var(--color-text); }
 ```
 
 - [ ] **Step 2: Write `components/tabs.css`**
@@ -703,14 +884,16 @@ git commit -m "feat(stylesheet): core components — button, panel, table, badge
 .field-hint  { font-size: var(--text-xs); color: var(--color-muted); }
 .field-error { font-size: var(--text-xs); color: var(--color-danger); }
 
+.field-checkbox {
+  display: inline-flex; gap: var(--space-2); align-items: center;
+  font-size: var(--text-base);
+}
+
 input[aria-invalid="true"],
 select[aria-invalid="true"],
 textarea[aria-invalid="true"] {
   border-color: var(--color-danger);
 }
-
-.inline-save { display: flex; gap: var(--space-2); align-items: stretch; }
-.inline-save > input { margin: 0; }
 ```
 
 - [ ] **Step 4: Write `components/dropdown.css`**
@@ -718,26 +901,85 @@ textarea[aria-invalid="true"] {
 `l4d2web/l4d2web/static/css/components/dropdown.css`:
 
 ```css
-/* Native <select> styling is already done in elements.css; this layer
-   exists as a hook for any custom dropdown markup we add later. Keep
-   minimal until a real custom-dropdown widget is needed. */
-
+/* Native <select> already styled in elements.css. .dropdown is a hook
+   for custom-menu patterns added later. */
 .dropdown { position: relative; display: inline-block; }
 .dropdown > select { width: 100%; }
 ```
 
-- [ ] **Step 5: Verify in browser**
+- [ ] **Step 5: Write `components/toast.css`**
 
-Open a page with a modal (e.g. `/servers/1` then click any action that opens one). Open `server_detail.html` and click between the tab buttons — the active one should show a primary-colored underline. Fields in forms (e.g. profile page) should display label / input / hint stacking cleanly.
+Same Tier-3 pattern as `.button`/`.tag`.
 
-- [ ] **Step 6: Commit**
+`l4d2web/l4d2web/static/css/components/toast.css`:
+
+```css
+.toast {
+  --toast-bg:     var(--color-surface);
+  --toast-fg:     var(--color-text);
+  --toast-border: var(--color-border);
+
+  position: fixed; top: var(--space-4); right: var(--space-4);
+  z-index: 1000;
+  background: var(--toast-bg); color: var(--toast-fg);
+  border: 1px solid var(--toast-border); border-radius: var(--radius-2);
+  padding: var(--space-3) var(--space-4);
+  box-shadow: var(--shadow-md);
+  max-width: 24rem;
+  display: flex; gap: var(--space-3); align-items: flex-start;
+}
+
+.toast.success {
+  --toast-bg:     color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
+  --toast-border: color-mix(in srgb, var(--color-success) 40%, var(--color-border));
+}
+.toast.warning {
+  --toast-bg:     color-mix(in srgb, var(--color-warning) 12%, var(--color-surface));
+  --toast-border: color-mix(in srgb, var(--color-warning) 40%, var(--color-border));
+}
+.toast.danger {
+  --toast-bg:     color-mix(in srgb, var(--color-danger) 12%, var(--color-surface));
+  --toast-border: color-mix(in srgb, var(--color-danger) 40%, var(--color-border));
+}
+
+.toast-close {
+  background: none; border: 0; color: var(--color-muted);
+  cursor: pointer; padding: 0 var(--space-1); font-size: 1.1rem;
+  margin-left: auto;
+}
+```
+
+- [ ] **Step 6: Write `components/spinner.css`**
+
+`l4d2web/l4d2web/static/css/components/spinner.css`:
+
+```css
+.spinner {
+  display: inline-block;
+  width: 1.2rem; height: 1.2rem;
+  border: 2px solid var(--color-border);
+  border-top-color: var(--color-primary);
+  border-radius: var(--radius-full);
+  animation: spinner-spin 0.8s linear infinite;
+}
+.spinner.small { width: 0.8rem; height: 0.8rem; border-width: 1px; }
+@keyframes spinner-spin { to { transform: rotate(360deg); } }
+```
+
+- [ ] **Step 7: Verify in browser**
+
+Open `/styleguide` once Task 8 is done — for now, navigate to a page that has a modal and click it (the dialog will render with new styling after Task 10 updates the template's class attributes). For Task 4 alone, visual verification is limited because most templates still use old class names.
+
+- [ ] **Step 8: Commit**
 
 ```bash
-git add l4d2web/l4d2web/static/css/components/modal.css \
+git add l4d2web/l4d2web/static/css/components/dialog.css \
         l4d2web/l4d2web/static/css/components/tabs.css \
         l4d2web/l4d2web/static/css/components/field.css \
-        l4d2web/l4d2web/static/css/components/dropdown.css
-git commit -m "feat(stylesheet): composite components — modal, tabs, field, dropdown"
+        l4d2web/l4d2web/static/css/components/dropdown.css \
+        l4d2web/l4d2web/static/css/components/toast.css \
+        l4d2web/l4d2web/static/css/components/spinner.css
+git commit -m "feat(stylesheet): composite components — dialog, tabs, field, dropdown, toast, spinner"
 ```
 
 ---
@@ -746,12 +988,12 @@ git commit -m "feat(stylesheet): composite components — modal, tabs, field, dr
 
 **Files:**
 - Create: `l4d2web/templates/ui/_field.html`
-- Create: `l4d2web/templates/ui/_modal.html`
+- Create: `l4d2web/templates/ui/_dialog.html`
 - Create: `l4d2web/templates/ui/_tabs.html`
 - Create: `l4d2web/templates/ui/_confirm_form.html`
-- Create: `l4d2web/templates/ui/_badge.html`
+- Create: `l4d2web/templates/ui/_tag.html`
 
-These are import-only files. No template uses them yet — adoption happens organically as templates are touched. This commit only adds the API surface.
+Macros emit the NEW class vocabulary. Templates start calling them in Task 10.
 
 - [ ] **Step 1: Create `templates/ui/` directory**
 
@@ -765,17 +1007,7 @@ mkdir -p l4d2web/l4d2web/templates/ui
 
 ```jinja
 {# Form field with label, optional hint, optional error. Owns the
-   <label for> / <input id> pairing and aria-describedby wiring.
-
-   Usage:
-       {% from "ui/_field.html" import field, checkbox, select %}
-
-       {{ field(name="hostname", label="Hostname", value=server.hostname,
-                hint="Used in master-server listings.") }}
-
-       {{ field(name="port", label="Port", type="number", value=server.port,
-                error="Must be between 27015 and 27115." if invalid_port else None) }}
-#}
+   <label for> / <input id> pairing and aria-describedby wiring. #}
 
 {% macro field(name, label, value="", type="text", hint=None, error=None, required=False, placeholder=None, autofocus=False, id=None) %}
   {%- set fid = id or ("f-" ~ name) -%}
@@ -807,7 +1039,6 @@ mkdir -p l4d2web/l4d2web/templates/ui
 {% endmacro %}
 
 {% macro select(name, label, options, value="", hint=None, id=None) %}
-  {#- options: list of {value, label} dicts, OR list of strings -#}
   {%- set fid = id or ("s-" ~ name) -%}
   <div class="field">
     <label class="field-label" for="{{ fid }}">{{ label }}</label>
@@ -826,34 +1057,22 @@ mkdir -p l4d2web/l4d2web/templates/ui
 {% endmacro %}
 ```
 
-- [ ] **Step 3: Write `ui/_modal.html`**
+- [ ] **Step 3: Write `ui/_dialog.html`**
 
-`l4d2web/l4d2web/templates/ui/_modal.html`:
+`l4d2web/l4d2web/templates/ui/_dialog.html`:
 
 ```jinja
-{# Modal dialog. Wraps <dialog> with header / body / footer slots and the
-   close-button wiring. The existing modals.js machinery is unchanged.
+{# Dialog wrapping <dialog>. Owns header / body / close-button +
+   data-inline-modal-close hook for the existing modals.js machinery. #}
 
-   Usage:
-       {% from "ui/_modal.html" import modal %}
-
-       {% call modal(id="confirm-stop", title="Stop server?") %}
-           <p>This will disconnect all players.</p>
-           <div class="button-row">
-               <button type="button" class="btn btn-secondary" data-inline-modal-close>Cancel</button>
-               <button type="submit" class="btn btn-danger">Stop server</button>
-           </div>
-       {% endcall %}
-#}
-
-{% macro modal(id, title, wide=False) %}
-  <dialog id="{{ id }}" class="modal{% if wide %} modal-wide{% endif %}">
+{% macro dialog(id, title, wide=False) %}
+  <dialog id="{{ id }}" class="dialog{% if wide %} wide{% endif %}">
     <article>
-      <header class="modal-header">
+      <header class="dialog-header">
         <h2>{{ title }}</h2>
-        <button class="modal-close" type="button" aria-label="Close" data-inline-modal-close>&times;</button>
+        <button class="dialog-close" type="button" aria-label="Close" data-inline-modal-close>&times;</button>
       </header>
-      <div class="modal-body">
+      <div class="dialog-body">
         {{ caller() }}
       </div>
     </article>
@@ -866,23 +1085,7 @@ mkdir -p l4d2web/l4d2web/templates/ui
 `l4d2web/l4d2web/templates/ui/_tabs.html`:
 
 ```jinja
-{# Tab bar + tabpanels. Owns role="tablist" / role="tab" / role="tabpanel"
-   wiring and aria-controls / aria-selected linkage. The existing tabs.js
-   handles click-to-switch via these ARIA attributes.
-
-   Usage:
-       {% from "ui/_tabs.html" import tabs, tab_panel %}
-
-       {{ tabs([
-           {"id": "overview",  "label": "Overview", "selected": True},
-           {"id": "console",   "label": "Console"},
-           {"id": "files",     "label": "Files"},
-       ]) }}
-
-       {% call tab_panel("overview", selected=True) %} ... {% endcall %}
-       {% call tab_panel("console") %}                ... {% endcall %}
-       {% call tab_panel("files") %}                  ... {% endcall %}
-#}
+{# Tab bar + tabpanels. Owns role / aria-controls / aria-selected. #}
 
 {% macro tabs(items) %}
   <div class="tabs" role="tablist">
@@ -913,67 +1116,49 @@ mkdir -p l4d2web/l4d2web/templates/ui
 `l4d2web/l4d2web/templates/ui/_confirm_form.html`:
 
 ```jinja
-{# Confirm-and-submit form. CSRF token + button row + POST action.
-
-   Usage:
-       {% from "ui/_confirm_form.html" import confirm_form %}
-
-       {{ confirm_form(action="/servers/1/delete",
-                       submit_label="Delete server",
-                       submit_variant="danger",
-                       cancel_label="Cancel") }}
-#}
+{# Confirm-and-submit form. CSRF + row + POST. #}
 
 {% macro confirm_form(action, submit_label="Confirm", submit_variant="primary", cancel_label="Cancel", cancel_attrs="data-inline-modal-close") %}
   <form method="post" action="{{ action }}">
     <input type="hidden" name="csrf_token" value="{{ session.get('csrf_token', '') }}">
-    <div class="button-row">
-      <button type="button" class="btn btn-secondary" {{ cancel_attrs|safe }}>{{ cancel_label }}</button>
-      <button type="submit" class="btn btn-{{ submit_variant }}">{{ submit_label }}</button>
+    <div class="row">
+      <button type="button" class="button" {{ cancel_attrs|safe }}>{{ cancel_label }}</button>
+      <button type="submit" class="button {{ submit_variant }}">{{ submit_label }}</button>
     </div>
   </form>
 {% endmacro %}
 ```
 
-- [ ] **Step 6: Write `ui/_badge.html`**
+- [ ] **Step 6: Write `ui/_tag.html`**
 
-`l4d2web/l4d2web/templates/ui/_badge.html`:
+`l4d2web/l4d2web/templates/ui/_tag.html`:
 
 ```jinja
-{# Badges and state pills. badge_state encapsulates the state-string →
-   variant-class mapping that's open-coded today.
+{# Tag rendering. lifecycle_tag encapsulates state-string → variant
+   mapping (the single source of truth — keep in sync with components/tag.css). #}
 
-   Usage:
-       {% from "ui/_badge.html" import badge, badge_state %}
-
-       {{ badge_state(server.actual_state) }}
-       {{ badge("ok", variant="success") }}
-#}
-
-{% macro badge(label, variant="muted") %}
-  <span class="badge badge-{{ variant }}">{{ label }}</span>
+{% macro tag(label, variant="muted") %}
+  <span class="tag {{ variant }}">{{ label }}</span>
 {% endmacro %}
 
-{% macro badge_state(state) %}
-  {#- Canonical mapping of server-lifecycle state strings to .state-* classes.
-      Keep in sync with components/badge.css. -#}
-  {%- set known = {
-      "running":    "state-running",
-      "stopped":    "state-stopped",
-      "unknown":    "state-unknown",
-      "starting":   "state-transient",
-      "stopping":   "state-transient",
-      "resetting":  "state-transient",
-      "initializing": "state-transient",
-      "deleting":   "state-transient",
-      "drift":      "state-drift",
+{% macro lifecycle_tag(state) %}
+  {%- set mapping = {
+      "running":      "success",
+      "stopped":      "muted",
+      "unknown":      "muted",
+      "starting":     "warning",
+      "stopping":     "warning",
+      "resetting":    "warning",
+      "initializing": "warning",
+      "deleting":     "warning",
+      "drift":        "danger",
   } -%}
-  {%- set cls = known.get(state, "state-unknown") -%}
-  <span class="badge {{ cls }}">{{ state or "unknown" }}</span>
+  {%- set variant = mapping.get(state, "muted") -%}
+  <span class="tag {{ variant }}">{{ state or "unknown" }}</span>
 {% endmacro %}
 ```
 
-- [ ] **Step 7: Add a pytest unit test for the field macro's a11y wiring**
+- [ ] **Step 7: Write the macro unit tests**
 
 `l4d2web/tests/test_ui_macros.py`:
 
@@ -1023,125 +1208,279 @@ def test_field_combines_aria_describedby_when_hint_and_error_both_present(jinja_
     assert 'aria-invalid="true"' in html
 
 
-def test_badge_state_maps_known_state(jinja_env):
+def test_lifecycle_tag_maps_running_to_success(jinja_env):
     tmpl = jinja_env.from_string(
-        '{% from "ui/_badge.html" import badge_state %}'
-        '{{ badge_state("running") }}'
+        '{% from "ui/_tag.html" import lifecycle_tag %}'
+        '{{ lifecycle_tag("running") }}'
     )
     html = tmpl.render()
-    assert 'class="badge state-running"' in html
+    assert 'class="tag success"' in html
     assert ">running<" in html
 
 
-def test_badge_state_falls_back_to_unknown(jinja_env):
+def test_lifecycle_tag_maps_drift_to_danger(jinja_env):
     tmpl = jinja_env.from_string(
-        '{% from "ui/_badge.html" import badge_state %}'
-        '{{ badge_state("weird-new-state") }}'
+        '{% from "ui/_tag.html" import lifecycle_tag %}'
+        '{{ lifecycle_tag("drift") }}'
     )
     html = tmpl.render()
-    assert 'class="badge state-unknown"' in html
+    assert 'class="tag danger"' in html
 
 
-def test_badge_state_none_renders_unknown_label(jinja_env):
+def test_lifecycle_tag_falls_back_to_muted_for_unknown_states(jinja_env):
     tmpl = jinja_env.from_string(
-        '{% from "ui/_badge.html" import badge_state %}'
-        '{{ badge_state(None) }}'
+        '{% from "ui/_tag.html" import lifecycle_tag %}'
+        '{{ lifecycle_tag("weird-new-state") }}'
+    )
+    html = tmpl.render()
+    assert 'class="tag muted"' in html
+
+
+def test_lifecycle_tag_handles_none(jinja_env):
+    tmpl = jinja_env.from_string(
+        '{% from "ui/_tag.html" import lifecycle_tag %}'
+        '{{ lifecycle_tag(None) }}'
     )
     html = tmpl.render()
     assert "unknown" in html
 ```
 
-- [ ] **Step 8: Run the macro tests, verify they pass**
+- [ ] **Step 8: Run the macro tests**
 
 ```bash
 cd l4d2web && uv run pytest tests/test_ui_macros.py -v
 ```
 
-Expected: 6 passed.
+Expected: 7 passed.
 
 - [ ] **Step 9: Commit**
 
 ```bash
 git add l4d2web/l4d2web/templates/ui/ l4d2web/tests/test_ui_macros.py
-git commit -m "feat(stylesheet): ui macros — field, modal, tabs, confirm_form, badge_state"
+git commit -m "feat(stylesheet): ui macros — field, dialog, tabs, confirm_form, tag/lifecycle_tag"
 ```
 
 ---
 
-## Task 6: Project widgets relocation
+## Task 6: Project widgets relocation + rename
 
-**Files:**
-- Create: `l4d2web/static/css/widgets/file-tree.css` (extracted from current `components.css`)
-- Create: `l4d2web/static/css/widgets/overlay-picker.css` (extracted from current `components.css`)
-- Move: `l4d2web/static/css/console-autocomplete.css` → `widgets/console-autocomplete.css`
-- Move: `l4d2web/static/css/editor.css` → `widgets/editor.css`
-- Move: `l4d2web/static/css/logs.css` → `widgets/logs.css`
-- Create: `l4d2web/static/css/widgets/live-state.css` (extracted from current `components.css` if `.live-state-*` rules exist there; otherwise leave as empty placeholder with a comment that the live-state component currently has no scoped CSS)
+**Files (all new under `widgets/`):**
+- `file-tree.css`
+- `overlay-list.css`
+- `console.css` (subsumes the old `console-autocomplete.css`)
+- `editor.css`
+- `logs.css`
+- `server-status.css` (extracted from `server_detail.html` patterns)
+- `player-list.css` (extracted from `_live_state.html` styling)
 
-Each widget file is moved/extracted **content-preserving** — same rules, same selectors — but token names must be migrated. The old `tokens.css` and new `tokens/semantic.css` agree on most color names but differ on spacing, radii, and a few colors. Use this table when copying.
+Apply both the **token migration** (table at top of plan) AND the **class-name migration** (table at top of plan) when copying rules.
 
-**Token migration table (apply to every line copied from the old files):**
-
-| Old name | New name | Notes |
-|---|---|---|
-| `--color-bg`, `--color-text`, `--color-muted`, `--color-border`, `--color-link`, `--color-primary`, `--color-danger`, `--color-warning`, `--color-success`, `--color-focus`, `--color-surface` | (same) | Unchanged. |
-| `--color-surface-muted` | `--color-surface-2` | |
-| `--color-border-muted` | `--color-border-soft` | |
-| `--color-button-primary` | `--color-primary` | |
-| `--color-button-danger` | `--color-danger` | |
-| `--color-log-bg` | `--color-surface-2` | |
-| `--color-log-text` | `--color-text` | |
-| `--space-xs` | `--space-1` | 0.25rem |
-| `--space-s` | `--space-2` | 0.5rem |
-| `--space-m` | `--space-3` | 0.75rem |
-| `--space-l` | `--space-4` | 1rem |
-| `--space-xl` | `--space-5` | 1.5rem (was 1.5rem) |
-| `--space-2xl` | `--space-6` | 2rem |
-| `--radius-base`, `--radius-s` | `--radius-1` | 0.25rem |
-| `--radius-m` | `--radius-2` | 0.5rem |
-| `--line` | `1px solid var(--color-border)` | Inline expansion — `--line` is no longer in the system. |
-| `--line-soft` | `1px solid var(--color-border-soft)` | Inline expansion. |
-| `--font-mono` | (same) | Unchanged. |
-
-CodeMirror editor tokens (`--cm-*`, `--syntax-*`, `--editor-rows`) live with the editor widget. Step 5 below relocates them.
-
-- [ ] **Step 1: Create widgets directory**
+- [ ] **Step 1: Create the widgets/ directory**
 
 ```bash
 mkdir -p l4d2web/l4d2web/static/css/widgets
 ```
 
-- [ ] **Step 2: Extract file-tree rules from `components.css` into `widgets/file-tree.css`**
+- [ ] **Step 2: Write `widgets/file-tree.css`**
 
-Read `l4d2web/l4d2web/static/css/components.css` and identify every selector beginning with `.file-tree` (including descendants like `.file-tree-row`, `.file-tree-toggle`, `.file-tree-children`, `.file-tree-badge`, `.file-tree-row-truncated`, etc.). Copy those rules verbatim into `l4d2web/l4d2web/static/css/widgets/file-tree.css`.
+Read the existing `.file-tree*` rules from `l4d2web/static/css/components.css`, copy them into a new file, applying both migration tables. The rename for this widget is:
 
-Rename any old token references to the new names where needed. The existing token names in `tokens.css` are largely identical to the new semantic tokens; spot-check after copying.
+- `.file-tree-row` → `.file-tree-item`
+- `.file-tree-row-file` → `.file-tree-item.file` (chained)
+- `.file-tree-row-truncated` → `.file-tree-truncated` (part — relate to whole tree)
+- Other `.file-tree-*` names stay (they were already proper parts)
 
-- [ ] **Step 3: Extract overlay-picker rules from `components.css` into `widgets/overlay-picker.css`**
-
-Same process for `.overlay-picker*` selectors.
-
-- [ ] **Step 4: Move root-level widget files into `widgets/`**
-
-```bash
-git mv l4d2web/l4d2web/static/css/console-autocomplete.css \
-       l4d2web/l4d2web/static/css/widgets/console-autocomplete.css
-git mv l4d2web/l4d2web/static/css/editor.css \
-       l4d2web/l4d2web/static/css/widgets/editor.css
-git mv l4d2web/l4d2web/static/css/logs.css \
-       l4d2web/l4d2web/static/css/widgets/logs.css
-```
-
-- [ ] **Step 4b: Relocate CodeMirror tokens into `widgets/editor.css`**
-
-The current `tokens.css` defines CodeMirror palette tokens (`--cm-bg`, `--cm-fg`, `--cm-keyword`, `--cm-string`, `--cm-comment`, `--cm-number`, `--cm-selection`, plus the `--syntax-*` aliases and `--editor-rows`) at the `:root` level so they're globally available. After this redesign they are widget-scoped — move them into `widgets/editor.css`, scoped to the editor's container if possible (`.cm-editor` or the wrapper used by `editor.bundle.js`); fall back to `:root` if scoping breaks the editor.
-
-Prepend the following block to `widgets/editor.css` (above the existing editor rules, which were just `git mv`d from the root-level file):
+`l4d2web/l4d2web/static/css/widgets/file-tree.css`:
 
 ```css
-/* CodeMirror palette tokens. Were at :root in the old tokens.css; now
-   live with the widget that consumes them. Light + dark in one place. */
+.file-tree {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-1);
+  padding: var(--space-1) var(--space-2);
+  background: var(--color-surface);
+}
+.file-tree .file-tree {
+  /* Nested trees — no extra chrome */
+  border: 0; padding: 0; background: transparent;
+}
+.file-tree-item {
+  display: flex; align-items: center; gap: var(--space-2);
+  padding: 0.2rem 0;
+}
+.file-tree-item.file {
+  padding-left: 1.25rem;
+}
+.file-tree-toggle {
+  background: none; border: 0; cursor: pointer;
+  display: inline-flex; gap: 0.25rem; align-items: center;
+  padding: 0; color: var(--color-text); font: inherit;
+}
+.file-tree-toggle .chevron { width: 1ch; display: inline-block; }
+.file-tree-name-button {
+  font-family: var(--font-mono); font-size: var(--text-sm);
+  background: none; border: 0; padding: 0; color: var(--color-text);
+  cursor: pointer; text-align: left;
+}
+.file-tree-name-button:hover,
+.file-tree-name-button:focus-visible { text-decoration: underline; }
+.file-tree-toggle[aria-expanded="true"] .chevron { transform: rotate(0deg); }
+.file-tree-children {
+  padding-left: var(--space-3);
+  border-left: 1px dashed var(--color-border-soft);
+  margin-left: var(--space-2);
+}
+.file-tree-children[hidden] { display: none; }
+.file-tree-badge {
+  font-size: var(--text-xs); color: var(--color-muted);
+  margin-left: auto;
+}
+.file-tree-badge-warn { color: var(--color-warning); }
+.file-tree-truncated {
+  font-style: italic; color: var(--color-muted);
+  padding: var(--space-1) 0;
+}
+```
 
+- [ ] **Step 3: Write `widgets/overlay-list.css`**
+
+Rename mapping:
+
+- `.overlay-picker` → `.overlay-list`
+- `.overlay-picker-list` (the `<ul>`) → styled via `.overlay-list > ul` selector OR `.overlay-list > .overlay-list` if a wrapper persists; in practice the `<ul>` itself was redundant — drop the inner list class
+- `.overlay-picker-row` → `.overlay-list-item`
+- `.overlay-picker-handle` → `.overlay-list-handle`
+- `.overlay-picker-name` + `.overlay-picker-expose` → consolidated into `.overlay-list-meta`
+- `.overlay-picker-remove` → `.overlay-list-remove`
+- `.overlay-picker-add` → `.overlay-list-add`
+- `.overlay-picker-empty` → `.overlay-list-empty`
+- Drag states (`.is-dragging`, `.drop-before`, `.drop-after`) — keep as ARIA-style data attributes if possible, otherwise as classes on `.overlay-list-item`: `.overlay-list-item.dragging`, `.overlay-list-item.drop-before`, `.overlay-list-item.drop-after`
+
+`l4d2web/l4d2web/static/css/widgets/overlay-list.css`:
+
+```css
+.overlay-list {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-1);
+  padding: var(--space-2);
+  background: var(--color-surface);
+}
+.overlay-list > ul { list-style: none; padding: 0; margin: 0 0 var(--space-2); }
+.overlay-list-item {
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  gap: var(--space-2); align-items: center;
+  padding: var(--space-1); border: 1px solid transparent;
+  border-radius: var(--radius-1);
+  transition: background var(--duration-fast) var(--ease-out);
+}
+.overlay-list-item:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
+.overlay-list-item.dragging { opacity: 0.6; }
+.overlay-list-item.drop-before { border-top-color: var(--color-primary); }
+.overlay-list-item.drop-after  { border-bottom-color: var(--color-primary); }
+.overlay-list-handle {
+  background: none; border: 0; cursor: grab; color: var(--color-muted);
+  padding: 0 var(--space-1); font: inherit;
+}
+.overlay-list-meta {
+  display: flex; flex-direction: column; gap: 2px;
+}
+.overlay-list-meta strong { font-weight: 500; }
+.overlay-list-meta code {
+  background: color-mix(in srgb, var(--color-text) 6%, transparent);
+  padding: 0.05rem 0.3rem; border-radius: var(--radius-1);
+  font-size: var(--text-xs);
+}
+.overlay-list-remove {
+  background: none; border: 0; color: var(--color-muted);
+  cursor: pointer; font-size: 1.1rem; padding: 0 var(--space-1);
+}
+.overlay-list-remove:hover { color: var(--color-danger); }
+.overlay-list-add { display: flex; gap: var(--space-2); }
+.overlay-list-add select { margin: 0; }
+.overlay-list-empty {
+  text-align: center; color: var(--color-muted);
+  padding: var(--space-3); font-size: var(--text-sm);
+}
+```
+
+- [ ] **Step 4: Write `widgets/console.css`**
+
+Subsumes the old `console-autocomplete.css` (file deleted in Task 11) and adds first-class `.console` / `.console-line` / `.console-input` styling.
+
+Read the existing `console-autocomplete.css` for the autocomplete-popup specifics and merge them in under the `.console` namespace. New class structure:
+
+- `.console` — outer wrapper
+- `.console-line` — one line of console output
+- `.console-line.cmd` — user-entered command (input echo)
+- `.console-line.out` — server output line (default; can be omitted)
+- `.console-input` — the input field
+- `.console-autocomplete` — popup container (existing)
+- `.console-autocomplete-item` — popup row (existing)
+- `.console-autocomplete-item.active` — keyboard-highlighted row
+
+`l4d2web/l4d2web/static/css/widgets/console.css`:
+
+```css
+.console {
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-1);
+  padding: var(--space-2) var(--space-3);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  color: var(--color-text);
+  overflow-y: auto;
+  max-height: 24rem;
+}
+.console-line { white-space: pre-wrap; word-break: break-word; padding: 1px 0; }
+.console-line.cmd { color: var(--color-primary); }
+.console-line.cmd::before { content: "> "; opacity: 0.6; }
+
+.console-input {
+  width: 100%;
+  font-family: var(--font-mono);
+  background: var(--color-surface);
+  margin-top: var(--space-2);
+}
+
+/* Autocomplete popup (preserved from console-autocomplete.css; classnames renamed). */
+.console-autocomplete {
+  position: absolute;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-1);
+  box-shadow: var(--shadow-md);
+  max-height: 16rem;
+  overflow-y: auto;
+  z-index: 50;
+  min-width: 20rem;
+}
+.console-autocomplete-item {
+  padding: var(--space-1) var(--space-2);
+  cursor: pointer;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  display: flex; gap: var(--space-2); align-items: baseline;
+}
+.console-autocomplete-item.active,
+.console-autocomplete-item:hover {
+  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
+}
+.console-autocomplete-item .name { color: var(--color-text-strong); }
+.console-autocomplete-item .help { color: var(--color-muted); font-size: var(--text-xs); margin-left: auto; }
+```
+
+(If the existing `console-autocomplete.css` has popup details not captured here — read it before starting Step 4 and adapt. Apply the token migration table.)
+
+- [ ] **Step 5: Write `widgets/editor.css`**
+
+Relocate the root-level `editor.css` AND lift the CodeMirror `--cm-*` tokens out of the old `tokens.css` into this file (they're widget-private, not globally semantic).
+
+`l4d2web/l4d2web/static/css/widgets/editor.css`:
+
+```css
+/* CodeMirror palette tokens — widget-private. Were :root in the old
+   tokens.css; localized here. */
 :root {
   --syntax-keyword: #cc4488;
   --syntax-string:  #2f8b3a;
@@ -1163,38 +1502,115 @@ Prepend the following block to `widgets/editor.css` (above the existing editor r
   --syntax-number:  #c890ff;
   --cm-selection:   rgba(120, 170, 255, 0.25);
 }
+
+/* Editor wrapper — read existing rules in current static/css/editor.css and
+   relocate verbatim, applying the token migration table. */
+.editor { /* …existing rules… */ }
+.cm-editor { /* …existing rules… */ }
 ```
 
-(The `--cm-bg` / `--cm-fg` cascade through `--color-surface` / `--color-text` automatically, so they don't need re-definition in the dark block.)
+Read `l4d2web/l4d2web/static/css/editor.css` (the current root-level file) for the existing rules. Copy them under `.editor` and `.cm-editor` namespaces, applying token migration.
 
-- [ ] **Step 5: Check if live-state has scoped CSS that needs a widget file**
+- [ ] **Step 6: Write `widgets/logs.css`**
 
-```bash
-grep -nE "live-state|\.player-(card|avatar|name|meta)" l4d2web/l4d2web/static/css/components.css
+Read the existing root-level `logs.css`. Apply the token migration table. Resulting `widgets/logs.css`:
+
+```css
+.log-viewer {
+  background: var(--color-surface-2);
+  color: var(--color-text);
+  font-family: var(--font-mono); font-size: var(--text-sm);
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-1);
+  white-space: pre-wrap;
+  overflow: auto;
+  max-height: 30rem;
+}
+/* … if the existing logs.css has more rules, copy them here with the migration table applied … */
 ```
 
-If the grep finds rules, extract them into `l4d2web/l4d2web/static/css/widgets/live-state.css`. If not, create a placeholder file so `main.css`'s `@import "./widgets/live-state.css"` doesn't 404:
+- [ ] **Step 7: Write `widgets/server-status.css`**
 
-```bash
-test -f l4d2web/l4d2web/static/css/widgets/live-state.css || cat > l4d2web/l4d2web/static/css/widgets/live-state.css <<'EOF'
-/* Live-state widget. No scoped rules yet — markup currently relies on
-   element defaults plus component badges. Reserved for future per-widget
-   styling. */
-EOF
+Extract the `server_detail.html` state-cluster pattern. The relevant existing classes likely include `.server-info`, `.server-actions`, `.last-job`. Consolidate under `.server-status`:
+
+`l4d2web/l4d2web/static/css/widgets/server-status.css`:
+
+```css
+.server-status {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-2);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-sm);
+  padding: var(--space-3) var(--space-4);
+  display: grid; gap: var(--space-3);
+}
+.server-status-state {
+  display: flex; align-items: center; gap: var(--space-3);
+  flex-wrap: wrap;
+}
+.server-status-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
+.server-status-meta {
+  display: grid; gap: var(--space-1);
+  font-size: var(--text-sm);
+}
+.server-status-meta dt {
+  color: var(--color-muted); font-weight: 500;
+}
+.server-status-meta dd { margin: 0; }
 ```
 
-- [ ] **Step 5b: Grep for un-migrated old token names in the new widget files**
+(Read the current `.server-info` / `.server-actions` rules in `components.css` and merge their styling needs into `.server-status-*` here.)
 
-After all widget files are in place, sanity-check that no old token references survive:
+- [ ] **Step 8: Write `widgets/player-list.css`**
+
+Extract the live-state player-card styling. The current vocabulary is something like `.player-card`, `.player-avatar`, `.player-name`, `.player-meta` (in `_live_state.html` or its scoped styles).
+
+`l4d2web/l4d2web/static/css/widgets/player-list.css`:
+
+```css
+.player-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+  gap: var(--space-2);
+}
+.player-card {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--space-2);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-soft);
+  border-radius: var(--radius-1);
+  padding: var(--space-2);
+}
+.player-card-avatar {
+  width: 3rem; height: 100%; /* full card height per design memory */
+  border-radius: var(--radius-1);
+  background: var(--color-surface-2);
+  overflow: hidden;
+}
+.player-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.player-card-name {
+  font-weight: 500;
+  color: var(--color-text);
+}
+.player-card-meta {
+  font-size: var(--text-xs); color: var(--color-muted);
+}
+```
+
+(Verify against current `_live_state.html` markup and update class attributes there in Task 10.)
+
+- [ ] **Step 9: Grep for un-migrated token names in the new widget files**
 
 ```bash
 grep -nE 'var\(--(space-(xs|s|m|l|xl|2xl)|radius-(base|s|m)|line|line-soft|color-(surface-muted|border-muted|button-primary|button-danger|log-bg|log-text))' \
   l4d2web/l4d2web/static/css/widgets/*.css l4d2web/l4d2web/static/css/components/*.css 2>/dev/null
 ```
 
-Expected: no output. If anything matches, apply the migration table above and re-run.
+Expected: no output. Fix anything that matches per the token-migration table at the top of this plan.
 
-- [ ] **Step 6: Verify all `@import`s in `main.css` resolve**
+- [ ] **Step 10: Verify all `@import`s in `main.css` resolve**
 
 ```bash
 for f in $(grep -oE '\./[a-z0-9./-]+\.css' l4d2web/l4d2web/static/css/main.css); do
@@ -1204,17 +1620,13 @@ done
 echo "done"
 ```
 
-Expected: only `done` printed (no `MISSING` lines).
+Expected: only `done` printed.
 
-- [ ] **Step 7: Open server detail / overlay detail in browser; verify file-tree and overlay-picker render**
-
-The dev server should auto-reload static files. Navigate to a page containing each widget and confirm rendering matches pre-redesign.
-
-- [ ] **Step 8: Commit**
+- [ ] **Step 11: Commit**
 
 ```bash
 git add l4d2web/l4d2web/static/css/widgets/
-git commit -m "refactor(stylesheet): relocate project widgets to widgets/"
+git commit -m "feat(stylesheet): project widgets — renamed and retargeted onto new tokens"
 ```
 
 ---
@@ -1229,15 +1641,10 @@ git commit -m "refactor(stylesheet): relocate project widgets to widgets/"
 `l4d2web/l4d2web/static/css/utilities.css`:
 
 ```css
-/* Utility classes. In the utilities layer — wins over components by
-   layer order, not selector specificity. Keep this list short and
-   purposeful; if a utility starts being used to override component
-   styling regularly, that's a signal the component is wrong. */
-
 .muted    { color: var(--color-muted); }
 .mono     { font-family: var(--font-mono); }
 .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.sr-only  {
+.visually-hidden {
   position: absolute; width: 1px; height: 1px;
   padding: 0; margin: -1px; overflow: hidden;
   clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
@@ -1265,9 +1672,8 @@ git commit -m "feat(stylesheet): utilities layer"
 `l4d2web/tests/test_styleguide.py`:
 
 ```python
-"""The /styleguide route is the canonical reference for every available
-widget. Test that it renders, returns 200 publicly, and contains at
-least the major primitive class names."""
+"""The /styleguide route is the canonical reference for every widget.
+Test it renders publicly and contains every primitive class name."""
 
 import pytest
 from l4d2web.app import create_app
@@ -1288,7 +1694,6 @@ def test_styleguide_returns_200(client):
 
 
 def test_styleguide_does_not_require_login(client):
-    # No session set up; should still serve the page.
     resp = client.get("/styleguide")
     assert resp.status_code == 200
 
@@ -1296,15 +1701,15 @@ def test_styleguide_does_not_require_login(client):
 def test_styleguide_contains_every_primitive(client):
     resp = client.get("/styleguide")
     body = resp.get_data(as_text=True)
-    # Each canonical primitive must appear somewhere on the page.
     for token in [
-        "btn-primary", "btn-secondary", "btn-danger", "btn-outline",
-        "field-label", "field-hint", "field-error",
-        "table", "panel", "panel-heading",
-        "modal", "modal-header",
+        "button", "primary", "outline", "ghost", "danger",
+        "field", "field-label", "field-hint", "field-error",
+        "card", "card-header", "card-body",
+        "dialog", "dialog-header", "dialog-body",
         "tabs", "tab-panel",
-        "badge-success", "state-running",
-        "site-header",
+        "tag", "success", "warning", "info",
+        "toast", "spinner",
+        "app-header", "heading",
     ]:
         assert token in body, f"styleguide missing primitive: {token}"
 
@@ -1322,7 +1727,7 @@ def test_styleguide_includes_do_dont_blocks(client):
 cd l4d2web && uv run pytest tests/test_styleguide.py -v
 ```
 
-Expected: FAIL — `/styleguide` returns 404 because the route doesn't exist yet.
+Expected: FAIL — `/styleguide` returns 404.
 
 - [ ] **Step 3: Write `routes/styleguide_routes.py`**
 
@@ -1342,13 +1747,13 @@ def styleguide_index() -> str:
 
 - [ ] **Step 4: Register the blueprint in `app.py`**
 
-Edit `l4d2web/l4d2web/app.py`. Add the import alongside the others (alphabetical):
+Edit `l4d2web/l4d2web/app.py`. Add the import alongside the others:
 
 ```python
 from l4d2web.routes.styleguide_routes import bp as styleguide_bp
 ```
 
-And register it alongside the other `app.register_blueprint(...)` calls:
+And register alongside the other `app.register_blueprint(...)` calls:
 
 ```python
     app.register_blueprint(styleguide_bp)
@@ -1359,9 +1764,6 @@ And register it alongside the other `app.register_blueprint(...)` calls:
 `l4d2web/l4d2web/templates/styleguide.html`:
 
 ```jinja
-{# Style guide page. Source of truth for every available primitive.
-   Each example uses {% set src %}...{% endset %} so the rendered widget
-   and the displayed source HTML can't drift. #}
 {% extends "base.html" %}
 {% block title %}Styleguide | left4me{% endblock %}
 
@@ -1383,13 +1785,14 @@ And register it alongside the other `app.register_blueprint(...)` calls:
 {% endblock %}
 
 {% block content %}
-<header class="page-heading">
+<header class="heading">
   <h1>Style guide</h1>
-  <p class="muted">Every available widget, with copy-paste source. If your change needs a widget that isn't here, extend the system before using it.</p>
-  <button type="button" class="btn btn-secondary" id="sg-theme-toggle">Toggle dark</button>
+  <div class="heading-actions">
+    <button type="button" class="button" id="sg-theme-toggle">Toggle dark</button>
+  </div>
 </header>
+<p class="muted">Every available widget with copy-paste source. Naming: <strong>parts use hyphens</strong> (<code>.card-header</code>), <strong>variants chain</strong> (<code>.button.primary</code>). State via ARIA attributes. If your change needs a widget that isn't here, extend the system before using it.</p>
 
-{# ============================ Helper macro ============================ #}
 {% macro example(title, html) %}
   <section class="sg-example">
     <h3 class="sg-example-title">{{ title }}</h3>
@@ -1401,56 +1804,52 @@ And register it alongside the other `app.register_blueprint(...)` calls:
 {# ============================== Tokens ============================== #}
 <section class="sg-section">
   <h2>Tokens</h2>
-  <p>Component CSS uses semantic tokens only (<code>var(--color-*)</code>, <code>var(--space-*)</code>). Primitive hex codes live in <code>tokens/primitives.css</code> and are not referenced directly by components.</p>
+  <p>Components reference <strong>Tier-2 semantic tokens only</strong> (<code>var(--color-*)</code>, <code>var(--space-*)</code>). Tier-3 component-scoped tokens (<code>--button-bg</code>, <code>--tag-fg</code>) are private. Raw hex codes live in <code>tokens/primitives.css</code>.</p>
   <h3>Colors</h3>
   <div class="sg-token-grid">
-    {% for name in ["bg", "surface", "surface-2", "text", "text-strong", "muted", "border", "border-soft", "primary", "primary-hover", "on-primary", "danger", "on-danger", "warning", "success", "focus", "link"] %}
+    {% for name in ["bg", "surface", "surface-2", "text", "text-strong", "muted", "border", "border-soft", "primary", "primary-hover", "on-primary", "danger", "on-danger", "warning", "success", "info", "focus", "link"] %}
       <div class="sg-token-swatch">
         <span class="sw" style="background: var(--color-{{ name }})"></span>
         <code>--color-{{ name }}</code>
       </div>
     {% endfor %}
   </div>
-  <h3>Spacing scale</h3>
-  <ul class="mono">
-    {% for n in [1,2,3,4,5,6,7] %}<li>--space-{{ n }}</li>{% endfor %}
-  </ul>
+  <h3>Spacing</h3>
+  <p class="mono">--space-1 (0.25rem) … --space-7 (3rem)</p>
   <h3>Type scale</h3>
-  <ul class="mono">
-    <li>--text-xs / sm / base / lg / xl / 2xl</li>
-  </ul>
+  <p class="mono">--text-xs / sm / base / lg / xl / 2xl</p>
 </section>
 
-{# ============================== Buttons ============================== #}
+{# ============================== Button ============================== #}
 <section class="sg-section">
   <h2>Button</h2>
+  <p>Variants chain on <code>.button</code>. Modifiers compose: <code>.button.danger.outline</code> is a real outlined-danger button.</p>
   {% set src %}
-<button type="button" class="btn btn-primary">Primary</button>
-<button type="button" class="btn btn-secondary">Secondary</button>
-<button type="button" class="btn btn-danger">Danger</button>
-<button type="button" class="btn btn-outline">Outline</button>
-<button type="button" class="btn btn-primary" disabled>Disabled</button>
-<button type="button" class="btn btn-primary" aria-busy="true">Loading…</button>
-<button type="button" class="btn btn-primary btn-sm">Small</button>
+<button type="button" class="button">Default</button>
+<button type="button" class="button primary">Primary</button>
+<button type="button" class="button danger">Danger</button>
+<button type="button" class="button outline">Outline</button>
+<button type="button" class="button ghost">Ghost</button>
+<button type="button" class="button link">Link</button>
+<button type="button" class="button small">Small</button>
+<button type="button" class="button primary" disabled>Disabled</button>
+<button type="button" class="button primary" aria-busy="true">Loading…</button>
   {% endset %}
-  {{ example("Variants + states + sizes", src) }}
+  {{ example("Variants + states + size", src) }}
 
   {% set src %}
-<div class="button-row">
-  <button type="button" class="btn btn-secondary">Cancel</button>
-  <button type="submit"  class="btn btn-primary">Save</button>
-</div>
+<button type="button" class="button danger outline">Delete (outlined)</button>
+<button type="button" class="button primary small">Save (small)</button>
   {% endset %}
-  {{ example("Button row", src) }}
+  {{ example("Composed modifiers", src) }}
 </section>
 
-{# ============================== Fields ============================== #}
+{# ============================== Field ============================== #}
 <section class="sg-section">
   <h2>Field</h2>
-  <p>Use the <code>ui.field</code> macro — it owns the <code>for</code>/<code>id</code> pair and <code>aria-describedby</code> wiring.</p>
 
   <div class="sg-do">
-    ✅ <strong>DO</strong> — use <code>ui.field</code> so a11y attributes can't drift:
+    ✅ <strong>DO</strong> — use <code>ui.field</code> so a11y wiring can't drift:
   </div>
   {% set src %}
 {# In your template #}
@@ -1458,17 +1857,17 @@ And register it alongside the other `app.register_blueprint(...)` calls:
 {{ field(name="hostname", label="Hostname", value="left4me",
          hint="Used in master-server listings.") }}{% endraw %}
   {% endset %}
-  {{ example("Field via macro", src) }}
+  {{ example("Via macro", src) }}
 
   <div class="sg-dont">
-    ❌ <strong>DON'T</strong> — hand-assemble a label + input without <code>for</code>/<code>id</code> + <code>aria-describedby</code>; screen readers will miss the hint.
+    ❌ <strong>DON'T</strong> — hand-write label + input without <code>for</code>/<code>id</code> + <code>aria-describedby</code>; screen readers miss the hint.
   </div>
   {% set src %}
 <label>Hostname</label>
 <input name="hostname" value="left4me">
 <p>Used in master-server listings.</p>
   {% endset %}
-  {{ example("Bare label + input (broken a11y)", src) }}
+  {{ example("Anti-pattern (broken a11y)", src) }}
 
   {% set src %}
 <div class="field">
@@ -1477,61 +1876,59 @@ And register it alongside the other `app.register_blueprint(...)` calls:
   <p id="sg-port-err" class="field-error">Must be between 27015 and 27115.</p>
 </div>
   {% endset %}
-  {{ example("Error state (raw source — for reference)", src) }}
+  {{ example("Error state (manual reference)", src) }}
 </section>
 
-{# ============================== Tables ============================== #}
+{# ============================== Table ============================== #}
 <section class="sg-section">
   <h2>Table</h2>
   {% set src %}
 <table class="table">
   <thead><tr><th>Name</th><th>State</th><th>Players</th></tr></thead>
   <tbody>
-    <tr><td>alpha</td><td><span class="badge state-running">running</span></td><td>4 / 8</td></tr>
-    <tr><td>beta</td><td><span class="badge state-stopped">stopped</span></td><td>— / 8</td></tr>
+    <tr><td>alpha</td><td><span class="tag success">running</span></td><td>4 / 8</td></tr>
+    <tr><td>beta</td><td><span class="tag muted">stopped</span></td><td>— / 8</td></tr>
   </tbody>
 </table>
   {% endset %}
   {{ example("Basic", src) }}
 </section>
 
-{# ============================== Panel ============================== #}
+{# ============================== Card ============================== #}
 <section class="sg-section">
-  <h2>Panel</h2>
+  <h2>Card</h2>
   {% set src %}
-<article class="panel">
-  <header class="panel-heading"><h3>Recent players</h3></header>
-  <div class="panel-body"><p>Body content.</p></div>
-  <footer class="panel-footer">
-    <div class="button-row"><button class="btn btn-secondary">Refresh</button></div>
+<article class="card">
+  <header class="card-header"><h3>Recent players</h3></header>
+  <div class="card-body"><p>Body content.</p></div>
+  <footer class="card-footer">
+    <div class="row"><button class="button">Refresh</button></div>
   </footer>
 </article>
   {% endset %}
-  {{ example("With heading + body + footer", src) }}
+  {{ example("With header + body + footer", src) }}
 </section>
 
-{# ============================== Modal ============================== #}
+{# ============================== Dialog ============================== #}
 <section class="sg-section">
-  <h2>Modal</h2>
-  <p>Use the <code>ui.modal</code> macro — it owns the <code>&lt;dialog&gt;</code> structure and the close-button wiring.</p>
-
+  <h2>Dialog</h2>
   <div class="sg-do">
     ✅ <strong>DO</strong>:
   </div>
   {% set src %}
-{% raw %}{% from "ui/_modal.html" import modal %}
-{% call modal(id="confirm-stop", title="Stop server?") %}
+{% raw %}{% from "ui/_dialog.html" import dialog %}
+{% call dialog(id="confirm-stop", title="Stop server?") %}
   <p>This will disconnect all players.</p>
-  <div class="button-row">
-    <button type="button" class="btn btn-secondary" data-inline-modal-close>Cancel</button>
-    <button type="submit"  class="btn btn-danger">Stop server</button>
+  <div class="row">
+    <button type="button" class="button" data-inline-modal-close>Cancel</button>
+    <button type="submit"  class="button danger">Stop server</button>
   </div>
 {% endcall %}{% endraw %}
   {% endset %}
-  {{ example("Modal via macro", src) }}
+  {{ example("Via macro", src) }}
 
   <div class="sg-dont">
-    ❌ <strong>DON'T</strong> — hand-write the <code>&lt;dialog&gt;</code> + header markup; you'll lose the close-button or modal-close hook.
+    ❌ <strong>DON'T</strong> — hand-write the <code>&lt;dialog&gt;</code> structure; you'll forget <code>data-inline-modal-close</code> and the JS won't close it.
   </div>
 </section>
 
@@ -1549,46 +1946,82 @@ And register it alongside the other `app.register_blueprint(...)` calls:
   {{ example("Underline-style tabs", src) }}
 </section>
 
-{# ============================== Badges ============================== #}
+{# ============================== Tag ============================== #}
 <section class="sg-section">
-  <h2>Badge</h2>
+  <h2>Tag</h2>
   {% set src %}
-<span class="badge badge-success">success</span>
-<span class="badge badge-warning">warning</span>
-<span class="badge badge-danger">danger</span>
-<span class="badge badge-muted">muted</span>
+<span class="tag">default</span>
+<span class="tag success">success</span>
+<span class="tag warning">warning</span>
+<span class="tag danger">danger</span>
+<span class="tag info">info</span>
+<span class="tag muted">muted</span>
   {% endset %}
-  {{ example("Semantic", src) }}
-
-  {% set src %}
-<span class="badge state-running">running</span>
-<span class="badge state-stopped">stopped</span>
-<span class="badge state-unknown">unknown</span>
-<span class="badge state-transient">starting…</span>
-<span class="badge state-drift">drift</span>
-  {% endset %}
-  {{ example("Server lifecycle (use ui.badge_state to render from a state string)", src) }}
+  {{ example("Semantic variants", src) }}
 
   <div class="sg-do">
-    ✅ <strong>DO</strong> — let <code>ui.badge_state</code> map state strings to classes; mappings live in one place.
+    ✅ <strong>DO</strong> — for server-lifecycle states, use <code>ui.lifecycle_tag</code> so the state→variant mapping lives in one place.
   </div>
+  {% set src %}
+{% raw %}{% from "ui/_tag.html" import lifecycle_tag %}
+{{ lifecycle_tag(server.actual_state) }}{% endraw %}
+  {% endset %}
+  {{ example("Via macro", src) }}
+
   <div class="sg-dont">
-    ❌ <strong>DON'T</strong> — hand-pick <code>state-*</code> classes inline; one template will get it wrong and drift will start.
+    ❌ <strong>DON'T</strong> — hand-pick the <code>tag.&lt;variant&gt;</code> in templates; the next template will pick a different mapping and drift.
   </div>
 </section>
 
-{# ============================== Site nav ============================== #}
+{# ============================== Toast ============================== #}
 <section class="sg-section">
-  <h2>Site nav</h2>
+  <h2>Toast</h2>
   {% set src %}
-<header class="site-header">
-  <div class="site-header-inner">
-    <nav class="primary-nav"><a class="brand" href="#">left4me</a><a href="#">servers</a></nav>
-    <nav class="account-nav"><a class="muted" href="#">user</a></nav>
+<div class="toast success">
+  <span>Server started.</span>
+  <button class="toast-close" aria-label="Close">&times;</button>
+</div>
+  {% endset %}
+  {{ example("Success", src) }}
+</section>
+
+{# ============================== Spinner ============================== #}
+<section class="sg-section">
+  <h2>Spinner</h2>
+  {% set src %}
+<span class="spinner"></span>
+<span class="spinner small"></span>
+  {% endset %}
+  {{ example("Default and small", src) }}
+</section>
+
+{# ============================== App header ============================== #}
+<section class="sg-section">
+  <h2>App header</h2>
+  {% set src %}
+<header class="app-header">
+  <div class="app-header-inner">
+    <nav class="nav"><a class="brand" href="#">left4me</a><a href="#">servers</a></nav>
+    <nav class="account"><a class="muted" href="#">user</a></nav>
   </div>
 </header>
   {% endset %}
-  {{ example("Header + brand + nav links", src) }}
+  {{ example("Brand + nav + account", src) }}
+</section>
+
+{# ============================== Heading ============================== #}
+<section class="sg-section">
+  <h2>Heading</h2>
+  {% set src %}
+<header class="heading">
+  <h1>Server demo</h1>
+  <div class="heading-actions">
+    <button class="button">Edit</button>
+    <button class="button danger outline">Delete</button>
+  </div>
+</header>
+  {% endset %}
+  {{ example("Page heading with action row", src) }}
 </section>
 
 <script nonce="{{ g.csp_nonce }}">
@@ -1600,7 +2033,7 @@ And register it alongside the other `app.register_blueprint(...)` calls:
 {% endblock %}
 ```
 
-- [ ] **Step 6: Run the test, verify it passes**
+- [ ] **Step 6: Run the tests**
 
 ```bash
 cd l4d2web && uv run pytest tests/test_styleguide.py -v
@@ -1608,9 +2041,9 @@ cd l4d2web && uv run pytest tests/test_styleguide.py -v
 
 Expected: 4 passed.
 
-- [ ] **Step 7: Open `/styleguide` in a browser, walk it in light and dark mode**
+- [ ] **Step 7: Open `/styleguide` in a browser, walk in light + dark**
 
-Confirm every primitive section renders, the do/don't blocks are color-coded, and the dark-mode toggle button at the top flips the page.
+Confirm every section renders, the ✅/❌ blocks are color-coded, dark-toggle flips.
 
 - [ ] **Step 8: Commit**
 
@@ -1624,86 +2057,220 @@ git commit -m "feat(styleguide): in-app /styleguide as canonical widget referenc
 
 ---
 
-## Task 9: AGENTS.md — codify the workflow rule
+## Task 9: AGENTS.md — codify naming + workflow
 
 **Files:**
 - Modify: `AGENTS.md`
 
-- [ ] **Step 1: Read current `AGENTS.md` to find the right insertion point**
+- [ ] **Step 1: Find the insertion point**
 
 ```bash
-wc -l /Users/mwiegand/Projekte/left4me/AGENTS.md
 grep -n "^##" /Users/mwiegand/Projekte/left4me/AGENTS.md
 ```
 
-Pick a heading after which to insert the UI work section (probably after a top-level section that talks about working in this repo; before a less-related section like deployment).
+Pick a heading after which to insert the UI section.
 
 - [ ] **Step 2: Insert the UI work section**
 
-Add this section to `AGENTS.md` at the chosen location:
+Add to `AGENTS.md`:
 
 ```markdown
 ## UI work
 
 Before adding any UI markup:
 
-1. Read `l4d2web/templates/styleguide.html` (or open `/styleguide` in the
-   running app) — it lists every available widget with a canonical example
-   and do/don't notes.
+1. Read `l4d2web/templates/styleguide.html` (or open `/styleguide`) — every
+   available widget has a canonical example and do/don't notes.
 2. If your change needs a widget that isn't in the style guide, **extend
-   the system first**, then use the widget:
+   the system first**:
    - CSS in `l4d2web/static/css/components/<name>.css` (generic) or
      `l4d2web/static/css/widgets/<name>.css` (project-specific).
-   - Style-guide entry with rendered example + escaped source + at least
-     one ✅ DO; add ❌ DON'T for foreseeable wrong uses.
+   - Style-guide entry: rendered example + escaped source + at least one ✅ DO.
    - If composite or a11y-load-bearing, add a macro in
      `l4d2web/templates/ui/_<name>.html`.
    - Only then use the widget on the page.
-3. **Never** use inline `style="…"` attributes.
-4. **Never** invent class names off-system.
-5. Component CSS references **only** semantic tokens
-   (`var(--color-*)`, `var(--space-*)`, …). Raw hex codes appear only in
-   `tokens/primitives.css`.
-6. State as ARIA attributes, not modifier classes: prefer
-   `[disabled]`, `[aria-busy="true"]`, `[aria-selected="true"]`,
-   `[aria-invalid="true"]` over `.is-disabled` / `.is-loading` etc.
+
+3. Naming convention (no exceptions):
+   - **Parts of a component use hyphenated child classes** — `.card-header`,
+     `.field-hint`, `.dialog-body`.
+   - **Variant modifiers chain on the parent class** — `.button.primary`,
+     `.tag.success`, `.dialog.wide`, `.button.danger.outline`.
+   - **State stays on ARIA attributes**, not modifier classes — `[disabled]`,
+     `[aria-busy="true"]`, `[aria-selected="true"]`, `[aria-invalid="true"]`.
+
+4. **Never** use inline `style="…"` attributes.
+5. **Never** invent class names off-system.
+
+6. Token usage:
+   - Component CSS references **only** Tier-2 semantic tokens
+     (`var(--color-*)`, `var(--space-*)`, …).
+   - Tier-3 component-scoped tokens (`--button-bg`, `--tag-fg`, etc.) are
+     private to each component and never appear in other components' CSS.
+   - Raw hex codes appear **only** in `tokens/primitives.css`.
 ```
 
 - [ ] **Step 3: Commit**
 
 ```bash
 git add AGENTS.md
-git commit -m "docs(agents): codify UI workflow rule — the system is closed"
+git commit -m "docs(agents): codify UI naming convention and workflow rule"
 ```
 
 ---
 
-## Task 10: Cleanup
+## Task 10: Template rewrite — class attributes throughout
+
+**Files:** Every template in `l4d2web/templates/`. Split into reviewable sub-tasks. Apply the **class-name migration table** at the top of this plan.
+
+This is the largest mechanical commit family. To keep diffs reviewable, split into three commits — one per template family.
+
+### Task 10a: Page templates
+
+**Files:**
+- `l4d2web/templates/login.html`
+- `l4d2web/templates/dashboard.html`
+- `l4d2web/templates/profile.html`
+- `l4d2web/templates/admin.html`
+- `l4d2web/templates/admin_users.html`
+- `l4d2web/templates/admin_jobs.html`
+- `l4d2web/templates/servers.html`
+- `l4d2web/templates/server_detail.html`
+- `l4d2web/templates/server_jobs.html`
+- `l4d2web/templates/overlays.html`
+- `l4d2web/templates/overlay_detail.html`
+- `l4d2web/templates/overlay_jobs.html`
+- `l4d2web/templates/overlay_file_editor.html`
+- `l4d2web/templates/blueprints.html`
+- `l4d2web/templates/blueprint_detail.html`
+- `l4d2web/templates/job_detail.html`
+
+For each file, apply the class-name migration table. Specifically:
+
+- Replace `class="btn …"` with `class="button …"`; map all old `.btn-*` modifiers to the chained-modifier form (`btn-primary` → `primary`, `btn-danger` → `danger`, etc.)
+- Replace `class="panel"` and `class="card"` with `class="card"`; rename `.panel-heading` → `.card-header`, `.panel-body` → `.card-body`, etc.
+- Replace `class="modal …"` and `class="modal-*"` with the dialog vocabulary
+- Replace `class="badge …"` and `class="state-*"` with `class="tag …"` — and where a state string is in scope, use `{{ ui.lifecycle_tag(state) }}` from `ui/_tag.html` instead of hand-picking the variant
+- Replace `class="page-heading"` and `class="page-footer-actions"` with `class="heading"` / `class="heading-actions"` (wrap the action area)
+- Replace `class="link-button"`, `class="danger-outline"`, `class="button-secondary"` with the appropriate `.button` + modifier form
+- Replace `class="button-row"` and `class="form-actions-inline"` with `class="row"` or `class="cluster"` as appropriate
+- Replace `class="sr-only"` with `class="visually-hidden"`
+- Where a `_modal_partial`-style modal is used inline, switch to `{% from "ui/_dialog.html" import dialog %}` + `{% call dialog(...) %}`
+- Where a form field is hand-assembled, switch to `{% from "ui/_field.html" import field %}` + `{{ field(...) }}`
+
+Per file:
+
+- [ ] **Step 1: Read the template**
+- [ ] **Step 2: Edit all `class="…"` attributes per the migration table**
+- [ ] **Step 3: Replace hand-assembled field / dialog patterns with macro calls where it's a clear win** (fields with hint+error, modals with header+body+footer)
+- [ ] **Step 4: Visual check via the dev server**
+
+- [ ] **Commit (10a)**
+
+```bash
+git add l4d2web/l4d2web/templates/*.html
+git commit -m "refactor(templates): page templates — new class vocabulary + ui/* macros"
+```
+
+### Task 10b: Partial templates
+
+**Files:**
+- `l4d2web/templates/_console_line.html`
+- `l4d2web/templates/_editor_assets.html`
+- `l4d2web/templates/_job_table.html`
+- `l4d2web/templates/_live_state.html`
+- `l4d2web/templates/_modal_partial.html` (the HX-Modal layout wrapper — rename internal class refs)
+- `l4d2web/templates/_overlay_build_status.html`
+- `l4d2web/templates/_overlay_file_node.html`
+- `l4d2web/templates/_overlay_file_tree.html`
+- `l4d2web/templates/_overlay_item_table.html`
+- `l4d2web/templates/_recent_players_modal_body.html`
+- `l4d2web/templates/_server_actions.html`
+- `l4d2web/templates/_macros.html` (preserve macros, update class names emitted)
+
+Same migration as 10a. The `_live_state.html` template specifically uses player-card markup — update to the new `.player-card-*` vocabulary. `_overlay_file_tree.html` uses file-tree markup — update to `.file-tree-item` (chained `.file` modifier on file entries).
+
+- [ ] **Step 1-4 per file** (same as 10a)
+
+- [ ] **Commit (10b)**
+
+```bash
+git add l4d2web/l4d2web/templates/_*.html
+git commit -m "refactor(templates): partials — new class vocabulary"
+```
+
+### Task 10c: Server-detail state cluster + verification
+
+The server detail page's state cluster gets a structural cleanup: the current `.server-info` + `.server-actions` + `.last-job` siblings collapse into one `.server-status` with the `.server-status-state` / `.server-status-actions` / `.server-status-meta` parts.
+
+- [ ] **Step 1: Restructure the state-cluster region of `server_detail.html`** into the new `.server-status` vocabulary (using the new `widgets/server-status.css`)
+
+- [ ] **Step 2: Run the full pytest suite**
+
+```bash
+cd l4d2web && uv run pytest -x
+```
+
+Expected: green. Fix any failures in this commit.
+
+- [ ] **Step 3: Run the Chromium e2e suite**
+
+```bash
+cd l4d2web && uv run pytest tests/e2e/ -x
+```
+
+Expected: green. Some assertions on old class names may need updating; do that here.
+
+- [ ] **Step 4: Walk every major page in light + dark**
+
+Visit `/login`, `/dashboard`, `/servers`, `/servers/<id>`, `/blueprints`, `/blueprints/<id>`, `/overlays`, `/overlays/<id>`, `/profile`, `/admin`, `/admin/users`, `/admin/jobs`, `/styleguide`. Toggle theme via DevTools. Fix anything that looks wrong.
+
+- [ ] **Step 5: Commit (10c)**
+
+```bash
+git add l4d2web/l4d2web/templates/server_detail.html l4d2web/l4d2web/tests/
+git commit -m "refactor(server-detail): consolidate state cluster into server-status widget"
+```
+
+---
+
+## Task 11: Cleanup
 
 **Files:**
 - Delete: `l4d2web/static/css/components.css`
 - Delete: `l4d2web/static/css/tokens.css`
-- Delete: `l4d2web/static/css/spike/` (whole directory)
+- Delete: `l4d2web/static/css/logs.css` (root)
+- Delete: `l4d2web/static/css/console-autocomplete.css` (root)
+- Delete: `l4d2web/static/css/editor.css` (root)
+- Delete: `l4d2web/static/css/spike/` (whole dir)
 - Delete: `l4d2web/templates/spike.html`
 - Delete: `l4d2web/routes/spike_routes.py`
-- Delete: `l4d2web/static/vendor/css/` (whole directory; only used by spike)
-- Modify: `l4d2web/l4d2web/app.py` — remove the `spike_routes` import + the `if spike_enabled(): app.register_blueprint(spike_bp)` block
-
-Note: the root-level `logs.css`, `console-autocomplete.css`, `editor.css` were already `git mv`'d in Task 6.
+- Delete: `l4d2web/static/vendor/css/` (whole dir)
+- Modify: `l4d2web/l4d2web/app.py` — remove the `spike_routes` import + the spike-blueprint registration
 
 - [ ] **Step 1: Confirm the old files are no longer referenced**
 
 ```bash
-grep -rn "components.css\|tokens.css" l4d2web/l4d2web/templates/ l4d2web/l4d2web/static/css/ 2>/dev/null | grep -v spike
+grep -rn "components.css\|tokens.css\b\|css/logs.css\b\|css/console-autocomplete.css\|css/editor.css\b" \
+     l4d2web/l4d2web/templates/ l4d2web/l4d2web/static/css/ 2>/dev/null | grep -v spike
 ```
 
-Expected: no matches outside the `spike/` directory.
+Expected: no matches outside `spike/`.
+
+```bash
+grep -rn "\.btn\|\.panel\|\.modal\b\|\.badge\|\.state-running\|\.state-stopped\|\.state-unknown\|\.state-transient\|\.state-drift\|\.site-header\|\.primary-nav\|\.account-nav\|\.page-heading\|\.link-button\|\.danger-outline\|\.sr-only\|\.overlay-picker\|\.file-tree-row\|\.button-row" \
+     l4d2web/l4d2web/templates/ 2>/dev/null
+```
+
+Expected: no matches. If any remain, fix them before continuing.
 
 - [ ] **Step 2: Delete the old stylesheets and spike artifacts**
 
 ```bash
 git rm l4d2web/l4d2web/static/css/components.css \
        l4d2web/l4d2web/static/css/tokens.css \
+       l4d2web/l4d2web/static/css/logs.css \
+       l4d2web/l4d2web/static/css/console-autocomplete.css \
+       l4d2web/l4d2web/static/css/editor.css \
        l4d2web/l4d2web/templates/spike.html \
        l4d2web/l4d2web/routes/spike_routes.py
 
@@ -1713,9 +2280,7 @@ git rm -r l4d2web/l4d2web/static/css/spike \
 
 - [ ] **Step 3: Remove spike registration from `app.py`**
 
-Edit `l4d2web/l4d2web/app.py`:
-
-Remove these lines (they were added in the spike commit):
+Edit `l4d2web/l4d2web/app.py`. Remove these lines:
 
 ```python
 from l4d2web.routes.spike_routes import bp as spike_bp
@@ -1735,67 +2300,46 @@ And remove:
 cd l4d2web && uv run pytest -x
 ```
 
-Expected: all green. Fix any failures in this commit before continuing.
+Expected: all green.
 
-- [ ] **Step 5: Run the Chromium e2e suite**
+- [ ] **Step 5: Run the e2e suite**
 
 ```bash
 cd l4d2web && uv run pytest tests/e2e/ -x
 ```
 
-Expected: all green. The e2e suite hits real pages; if any class-name expectation needs updating, do it here.
+Expected: all green.
 
-- [ ] **Step 6: Walk the major pages manually in the dev server**
+- [ ] **Step 6: Final manual walk-through in dev server, light + dark**
 
-Start the dev server: `scripts/dev-server.py`
-
-Visit each in light and dark (toggle via DevTools: `document.documentElement.dataset.theme = 'dark'`):
-
-- `/login`
-- `/dashboard`
-- `/servers`
-- `/servers/1`
-- `/servers/1/jobs`
-- `/blueprints`
-- `/blueprints/1`
-- `/overlays`
-- `/overlays/1`
-- `/overlays/2`
-- `/profile`
-- `/admin` (if seeded with admin user)
-- `/admin/users`
-- `/admin/jobs`
-- `/styleguide`
-
-For each, check: buttons styled, forms readable, tables clean, modals open and look right, tabs switch, badges colored, file-tree and overlay-picker render. Fix regressions in this commit.
+`/login`, `/dashboard`, `/servers`, `/servers/<id>` (with overlay-list visible), `/servers/<id>/jobs`, `/blueprints`, `/blueprints/<id>`, `/overlays`, `/overlays/<id>` (with file-tree visible), `/overlays/<id>` (script overlay — editor visible), `/profile`, `/admin`, `/admin/users`, `/admin/jobs`, `/styleguide`. Confirm: buttons styled, forms readable, tables clean, dialogs open and look right, tabs switch, tags colored, file-tree and overlay-list render, dark mode works on every page.
 
 - [ ] **Step 7: Commit**
 
 ```bash
 git add -A
-git commit -m "chore(stylesheet): delete old components.css/tokens.css + spike artifacts
+git commit -m "chore(stylesheet): delete old CSS + spike artifacts
 
-Old stylesheet is fully replaced by the layered system rooted at main.css.
-Spike route, template, vendor framework CSS, and the conditional spike
-blueprint registration are removed; the spike's job (validating the
-custom-CSS direction) is complete."
+Old stylesheet fully replaced by the layered system at main.css. The
+spike validated the architecture (layer cascade + tokens + dark mode);
+the production system uses a different vocabulary (.button + chained
+modifiers, .card, .dialog, .tag, ...). Spike artifacts removed."
 ```
 
 ---
 
 ## Final verification
 
-After Task 10, the new system is fully in place. A last sanity sweep:
-
-- [ ] **Step 1: Search the repo for any remaining references to deleted files**
+- [ ] **Step 1: Repo-wide search for any stragglers**
 
 ```bash
-grep -rn "css/spike\|spike_routes\|spike_bp\|spike_enabled\|components\.css\|css/tokens\.css\|css/logs\.css\|css/console-autocomplete\.css\|css/editor\.css" l4d2web/ AGENTS.md docs/ 2>/dev/null
+grep -rn "css/spike\|spike_routes\|spike_bp\|spike_enabled\|css/components\.css\|css/tokens\.css\|class=\"btn\b\|class=\"panel\b\|class=\"modal\b\|class=\"badge\b\|\.state-running\|\.state-stopped\|\.state-drift\|\.site-header\|\.primary-nav\|\.account-nav\|\.page-heading\|\.link-button\|\.sr-only\|\.overlay-picker\|\.file-tree-row" \
+     l4d2web/ AGENTS.md docs/ 2>/dev/null
 ```
 
-Expected: matches only inside `docs/superpowers/specs/` and `docs/superpowers/plans/` (documentation that references the redesign).
+Expected: matches only inside `docs/superpowers/specs/` and `docs/superpowers/plans/` (this plan and the spec reference the old names while explaining the migration).
 
-- [ ] **Step 2: Confirm `main.css` is the only stylesheet `base.html` loads**
+- [ ] **Step 2: `base.html` loads exactly one stylesheet**
 
 ```bash
 grep -E "rel=\"stylesheet\"" l4d2web/l4d2web/templates/base.html
@@ -1803,32 +2347,33 @@ grep -E "rel=\"stylesheet\"" l4d2web/l4d2web/templates/base.html
 
 Expected: exactly one match, pointing at `main.css`.
 
-- [ ] **Step 3: Confirm the `@layer` order is intact**
+- [ ] **Step 3: `@layer` order is intact**
 
 ```bash
 head -5 l4d2web/l4d2web/static/css/main.css
 ```
 
-Expected: the first non-comment line is the `@layer reset, tokens, elements, layout, components, widgets, utilities;` declaration.
+Expected: first non-comment line is the `@layer reset, tokens, elements, layout, components, widgets, utilities;` declaration.
 
-- [ ] **Step 4: Final commit (if anything was fixed up)**
+- [ ] **Step 4: Any final fixups**
 
-If the sanity sweep surfaced anything, fix it and commit with a short follow-up message. Otherwise, the rewrite is complete.
+If anything was caught, fix and commit with a short follow-up message.
 
 ---
 
 ## Definition of done
 
 - [ ] `base.html` loads exactly one stylesheet: `main.css`
-- [ ] `main.css` declares the seven-layer cascade order and `@import`s all sub-files
-- [ ] Tokens are split into `tokens/primitives.css` + `tokens/semantic.css`
-- [ ] All nine component CSS files exist under `components/`
-- [ ] All six widget CSS files exist under `widgets/`
-- [ ] Five macros exist under `templates/ui/`
-- [ ] `/styleguide` returns 200, renders every primitive, has do/don't blocks
-- [ ] `AGENTS.md` has the "UI work" section codifying the closed-system rule
+- [ ] `main.css` declares the seven-layer cascade and `@import`s every sub-file
+- [ ] Tokens split into `primitives.css` + `semantic.css`; component-scoped tokens live inside their component files
+- [ ] All twelve component CSS files exist under `components/`
+- [ ] All seven widget CSS files exist under `widgets/`
+- [ ] Five macros under `templates/ui/`
+- [ ] `/styleguide` returns 200, renders every primitive, has ✅/❌ blocks
+- [ ] `AGENTS.md` has the "UI work" section with naming + workflow rules
+- [ ] Every template uses the new class vocabulary; no template references `.btn`, `.panel`, `.modal`, `.badge`, `.state-*`, `.site-header`, `.primary-nav`, `.account-nav`, `.page-heading`, `.link-button`, `.danger-outline`, `.sr-only`, `.overlay-picker`, `.file-tree-row`, or `.button-row`
 - [ ] All pytest tests pass (`uv run pytest`)
 - [ ] All e2e tests pass (`uv run pytest tests/e2e/`)
 - [ ] Major pages walk cleanly in light and dark mode
-- [ ] Old `components.css`, `tokens.css`, and the three root-level widget files are deleted
-- [ ] Spike artifacts (`css/spike/`, `vendor/css/`, `spike.html`, `spike_routes.py`, the `app.py` registration) are deleted
+- [ ] Old `components.css`, `tokens.css`, root-level widget files deleted
+- [ ] Spike artifacts deleted (`css/spike/`, `vendor/css/`, `spike.html`, `spike_routes.py`, the `app.py` registration)
diff --git a/docs/superpowers/specs/2026-05-17-stylesheet-redesign-design.md b/docs/superpowers/specs/2026-05-17-stylesheet-redesign-design.md
index ecb36a9..4ef32ba 100644
--- a/docs/superpowers/specs/2026-05-17-stylesheet-redesign-design.md
+++ b/docs/superpowers/specs/2026-05-17-stylesheet-redesign-design.md
@@ -112,7 +112,7 @@ l4d2web/static/css/
   utilities.css
 ```
 
-### Tokens — two tiers
+### Tokens — three tiers
 
 **Tier 1 (primitives)** in `tokens/primitives.css` is the raw palette: ~30
 custom properties for the grayscale ramp, brand blue ramp, semantic state
@@ -124,18 +124,29 @@ by semantic tokens.
 **Tier 2 (semantic)** in `tokens/semantic.css` aliases primitives by *role*:
 `--color-bg`, `--color-surface`, `--color-text`, `--color-muted`,
 `--color-border`, `--color-primary`, `--color-on-primary`, `--color-danger`,
-`--color-warning`, `--color-success`, `--color-focus`, plus `--space-s`,
-`--space-m`, `--space-l`, `--radius-s`, `--shadow-sm`, `--shadow-md`, etc.
-Dark mode lives here, in a `[data-theme="dark"]` selector — the primitives
-do not change between modes; the semantic aliases re-point at different
-primitives. This keeps dark mode in one file instead of duplicated inside
-a `@media (prefers-color-scheme: dark)` block.
+`--color-warning`, `--color-success`, `--color-info`, `--color-focus`, plus
+`--space-1` through `--space-7`, `--radius-1` / `-2` / `-full`, `--shadow-sm`
+/ `-md` / `-lg`, etc. Dark mode lives here, in a `[data-theme="dark"]`
+selector — the primitives do not change between modes; the semantic aliases
+re-point at different primitives. This keeps dark mode in one file instead
+of duplicated inside a `@media (prefers-color-scheme: dark)` block.
 
-A rule the agent can follow mechanically: **components reference only
-semantic tokens (`var(--color-*)`, `var(--space-*)`, etc.). Raw hex codes
-appear only in `tokens/primitives.css`.** This rule is codified in
-`AGENTS.md` and is the simplest possible expression of the two-tier
-contract.
+**Tier 3 (component-scoped)** lives inside each component's CSS file, never
+exposed beyond it. Example: `components/button.css` declares
+`--button-bg`, `--button-fg`, `--button-border` on `.button`, and each variant
+(`.button.primary`, `.button.danger`) re-points those local properties at
+semantic tokens. Modifiers like `.button.outline` then read the inherited
+component-scoped values, which is what lets variants **compose** —
+`.button.danger.outline` is a real outlined-danger button without a single
+rule mentioning the combination. Same pattern for `.tag` (`--tag-bg`,
+`--tag-fg`, `--tag-border`) and `.toast` (`--toast-bg`, etc.).
+
+A rule the agent can follow mechanically: **components reference Tier 2
+semantic tokens** (`var(--color-*)`, `var(--space-*)`, …). **Tier 3
+component-scoped tokens are private** to each component and never appear
+in other components' CSS. **Raw hex codes appear only in
+`tokens/primitives.css`.** These three rules are codified in `AGENTS.md`
+and constitute the entire token contract.
 
 Dark mode is opted into by setting `data-theme="dark"` on the `<html>`
 element. The initial value comes from `prefers-color-scheme` via a small
@@ -146,47 +157,89 @@ this redesign — the redesign only ensures the mechanism is in place.
 
 ### Components — class-based, CSS-only
 
-Vocabulary (the components layer in full):
+**Naming convention** (two rules, no exceptions):
 
-- **`.btn`** with variants `.btn-primary`, `.btn-secondary`, `.btn-danger`,
-  `.btn-outline`, `.btn-link`, plus `.btn-sm`. States: `[disabled]`,
-  `[aria-busy="true"]` (loading). Loading state shows a spinner via a CSS
-  animation; no extra markup required.
-- **`.button-row`** — flex+gap container for groups of buttons.
-- **`.field`** — wrapper containing `.field-label`, `input` / `select` /
-  `textarea`, optional `.field-hint`, optional `.field-error`. Error state
-  uses native `[aria-invalid="true"]` on the input — no separate
-  `.field-input-error` class. Hint/error text is associated via
-  `aria-describedby` (enforced by the macro; see below).
-- **`.inline-save`** — flex layout for the input + submit pair used several
-  places today (`.inline-save` exists already; conventions preserved).
-- **`.table`** — bordered, slight zebra optional via `.table-striped`.
-- **`.panel`** — bordered card with optional `.panel-heading`, `.panel-body`,
-  `.panel-footer`. Subsumes the current `.panel` / `.card` aliases.
-- **`.modal`** — styles `<dialog>`. Optional `.modal-wide` for the wider
-  variant already used today. Header / body / footer subdivisions. The
-  existing `modals.js` open/close machinery is unchanged.
-- **`.tabs`** with `.tab` and `.tab-panel`. State is encoded as
-  `[aria-selected="true"]` on the tab — no `.tab-active` class. The existing
-  `tabs.js` reads and writes those ARIA attributes already; no JS changes
-  needed.
-- **`.badge`** with semantic variants (`.badge-success`, `.badge-warning`,
-  `.badge-danger`, `.badge-muted`) and state variants
-  (`.state-running`, `.state-stopped`, `.state-unknown`, `.state-transient`,
-  `.state-drift`). The state variants exist today; preserved for templating
-  continuity.
-- **`.site-header`** + **`.primary-nav`** + **`.account-nav`** + **`.brand`**
-  — already present, restyled on the new token base.
-- **`.dropdown`** — styling around native `<select>` and a small custom
-  menu pattern if needed.
+1. **Parts of a component use hyphenated child classes.** `.card-header`,
+   `.field-hint`, `.dialog-body`. The part belongs to the parent; the
+   hyphen makes the relationship visible.
+2. **Variant modifiers chain on the parent class.** `.button.primary`,
+   `.tag.success`, `.button.outline`, `.dialog.wide`. A modifier alone
+   is meaningless — it must be read together with the component class.
 
-State as ARIA attributes, not modifier classes: `[disabled]`,
+State stays on ARIA attributes, not modifier classes: `[disabled]`,
 `[aria-busy="true"]`, `[aria-selected="true"]`, `[aria-invalid="true"]`.
 This avoids the class-vs-aria drift that produces broken accessibility.
 
-Variant naming convention is uniform: `<component> <component>-<variant>
-<component>-<size>`. No exceptions. New variants must be added to the
-component's file *and* to the style guide entry in the same commit.
+Vocabulary (the components layer in full):
+
+- **`.button`** with modifiers `.primary`, `.outline`, `.ghost`, `.danger`,
+  `.link`, `.small`. Modifiers compose: `.button.danger.outline` is an
+  outlined-danger button, no new rule required. States: `[disabled]`,
+  `[aria-busy="true"]` (loading; spinner via CSS animation, no extra markup).
+- **`.field`** — wrapper containing `.field-label`, `input` / `select` /
+  `textarea`, optional `.field-hint`, optional `.field-error`. Error state
+  uses native `[aria-invalid="true"]` on the input. Hint/error text wired
+  to the input via `aria-describedby` (enforced by the `ui.field` macro).
+  `.field-checkbox` handles the checkbox-with-label layout.
+- **`.card`** — bordered surface with `.card-header`, `.card-body`,
+  `.card-footer`. Replaces the historically duplicated `.panel` / `.card`
+  pair.
+- **`.table`** — data table. Modifier `.striped` for zebra rows.
+- **`.dialog`** — styles `<dialog>`. Parts: `.dialog-header`, `.dialog-body`,
+  `.dialog-footer`, `.dialog-close`. Modifier `.wide` for the wider variant
+  used by editor-style modals. The existing `modals.js` open/close machinery
+  is unchanged; the close button keeps its `data-inline-modal-close`
+  attribute (the JS hook).
+- **`.tabs`** with parts `.tab` and `.tab-panel`. State is `[aria-selected]`
+  on each `.tab`; the existing `tabs.js` reads/writes the attribute.
+- **`.tag`** with modifiers `.success`, `.warning`, `.danger`, `.info`,
+  `.muted`. Replaces the current `.badge` vocabulary AND the project-specific
+  `.state-running` / `.state-stopped` / `.state-unknown` / `.state-transient`
+  / `.state-drift` classes — lifecycle states map to semantic tag variants
+  via the `ui.lifecycle_tag(state)` macro (`"running"` → `.tag.success`,
+  `"stopped"` → `.tag.muted`, `"unknown"` → `.tag.muted`, `"starting"` /
+  `"stopping"` / `"resetting"` etc. → `.tag.warning`, `"drift"` →
+  `.tag.danger`). One vocabulary; one mapping rule.
+- **`.toast`** (new) — flash-message notification, top-right positioned.
+  Modifiers `.success`, `.warning`, `.danger`. Part `.toast-close`. Fills
+  a real gap — flash messages currently improvise.
+- **`.spinner`** (new) — standalone loading indicator. Modifier `.small`.
+  Used independently of `[aria-busy]`-on-buttons.
+- **`.app-header`** with parts `.app-header-inner`, `.brand`, `.nav`,
+  `.account` — the top-of-page banner. Replaces `.site-header` +
+  `.primary-nav` + `.account-nav` (one vocabulary instead of three).
+- **`.heading`** with part `.heading-actions` — formal page-title pattern
+  (h1 + actions row). Replaces the current ad-hoc `.page-heading`.
+- **`.dropdown`** — small helper for native `<select>` + any future custom
+  menu pattern.
+
+**Variant composition pattern** (the mechanism behind chained modifiers):
+
+Each component declares Tier-3 component-scoped tokens and consumes them.
+Variants re-point those tokens; modifiers can read inherited values. A
+trimmed `components/button.css` example:
+
+```css
+.button {
+  --button-bg:     var(--color-surface);
+  --button-fg:     var(--color-text);
+  --button-border: var(--color-border);
+  background: var(--button-bg);
+  color:      var(--button-fg);
+  border: 1px solid var(--button-border);
+  /* …padding, radius, transitions… */
+}
+.button.primary { --button-bg: var(--color-primary); --button-fg: var(--color-on-primary); --button-border: var(--color-primary); }
+.button.danger  { --button-bg: var(--color-danger);  --button-fg: var(--color-on-danger);  --button-border: var(--color-danger);  }
+.button.outline { --button-bg: transparent; --button-fg: var(--button-border); }
+.button.ghost   { --button-bg: transparent; --button-fg: var(--color-text); --button-border: transparent; }
+.button.link    { --button-bg: transparent; --button-border: transparent; text-decoration: underline; color: var(--color-link); }
+.button.small   { padding: 0.25rem 0.5rem; font-size: var(--text-sm); }
+```
+
+`.button.danger.outline` works because `.outline` is declared *after*
+`.danger` and reads the inherited `--button-border` (which `.danger`
+just set). The same pattern is used for `.tag` and `.toast`.
 
 ### Macros — five high-leverage primitives
 
@@ -194,13 +247,13 @@ A new directory `l4d2web/templates/ui/` adds Jinja macros for primitives
 where markup correctness is load-bearing — i.e., where hand-assembling
 gets accessibility wrong easily:
 
-| Macro file              | Macros                                       | Why                                                                                                           |
-|-------------------------|----------------------------------------------|---------------------------------------------------------------------------------------------------------------|
-| `ui/_field.html`        | `ui.field`, `ui.checkbox`, `ui.select`       | Owns `<label for>`/`<input id>` pairing, `aria-describedby` wiring for hint+error, `aria-invalid` on error    |
-| `ui/_modal.html`        | `ui.modal`                                   | Owns the `<dialog>` + `modal-header`/`modal-body`/`modal-footer` structure and the close-button + JS hooks   |
-| `ui/_tabs.html`         | `ui.tabs`, `ui.tab_panel`                    | Owns the `role="tablist"` / `role="tab"` / `role="tabpanel"` + `aria-controls` / `aria-selected` wiring       |
-| `ui/_confirm_form.html` | `ui.confirm_form`                            | Owns CSRF token, POST action, and standard button row for destructive actions                                  |
-| `ui/_badge.html`        | `ui.badge_state(state)`                      | Maps a server-state string to the correct `state-*` class — encapsulates a real source of inconsistency today |
+| Macro file              | Macros                                       | Why                                                                                                                                  |
+|-------------------------|----------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------|
+| `ui/_field.html`        | `ui.field`, `ui.checkbox`, `ui.select`       | Owns `<label for>`/`<input id>` pairing, `aria-describedby` wiring for hint+error, `aria-invalid` on error                          |
+| `ui/_dialog.html`       | `ui.dialog`                                  | Owns the `<dialog>` + `.dialog-header`/`.dialog-body`/`.dialog-footer` structure and the `data-inline-modal-close` JS hook            |
+| `ui/_tabs.html`         | `ui.tabs`, `ui.tab_panel`                    | Owns the `role="tablist"` / `role="tab"` / `role="tabpanel"` + `aria-controls` / `aria-selected` wiring                              |
+| `ui/_confirm_form.html` | `ui.confirm_form`                            | Owns CSRF token, POST action, and standard button row for destructive actions                                                         |
+| `ui/_tag.html`          | `ui.tag`, `ui.lifecycle_tag(state)`          | Maps a server-lifecycle state string (`"running"`, `"starting"`, `"drift"`, …) to the right `.tag.<variant>` — one mapping rule total |
 
 CSS-only is the default for trivial primitives — `<button class="btn
 btn-primary">Save</button>` is its own canonical form and does not need a
@@ -301,14 +354,19 @@ Before adding any UI markup:
    with a canonical example.
 2. If your change needs a widget that isn't in the style guide, add it to
    the system FIRST:
-   - CSS goes in `components/<name>.css` or `widgets/<name>.css`
-   - Style guide entry with rendered example + source + at least one do/don't
-   - If composite/a11y-bearing, add a macro in `templates/ui/_<name>.html`
+   - CSS goes in `components/<name>.css` (generic) or `widgets/<name>.css` (project-specific)
+   - Style guide entry with rendered example + source + at least one ✅ DO
+   - If composite or a11y-load-bearing, add a macro in `templates/ui/_<name>.html`
    - Only then use the widget on the page
-3. Never inline `style="…"` attributes.
-4. Never invent class names outside the system.
-5. Use only `var(--color-*)`, `var(--space-*)`, etc. in component CSS —
-   raw hex codes appear only in `tokens/primitives.css`.
+3. Naming convention (no exceptions):
+   - **Parts of a component use hyphenated child classes** — `.card-header`, `.field-hint`, `.dialog-body`
+   - **Variant modifiers chain on the parent class** — `.button.primary`, `.tag.success`, `.dialog.wide`
+   - **State stays on ARIA attributes**, not modifier classes — `[disabled]`, `[aria-busy="true"]`, `[aria-selected="true"]`, `[aria-invalid="true"]`
+4. Never inline `style="…"` attributes. Never invent class names outside the system.
+5. Token usage:
+   - Component CSS references **only** Tier-2 semantic tokens (`var(--color-*)`, `var(--space-*)`, …)
+   - Tier-3 component-scoped tokens (`--button-bg`, `--tag-fg`, etc.) are private to each component and never appear in other components' CSS
+   - Raw hex codes appear **only** in `tokens/primitives.css`
 ```
 
 ## What the spike validated
@@ -337,9 +395,14 @@ Findings:
   writing new component CSS doesn't have to think about specificity at all.
 
 Pure custom won on the criterion you weighted highest ("bad code feel
-leads to incoherent styling later"). The spike's `custom.css` is the seed
-for the production stylesheet; it is not the final form, but the layer
-ordering, the token shape, and the component vocabulary are validated.
+leads to incoherent styling later"). The spike validated the
+**architecture** — `@layer` cascade, color-mix() in production browsers,
+the light/dark theme switching via `data-theme`, the aesthetic direction.
+The **vocabulary used in the spike (`.btn`, `.panel`, `.modal`, `.badge`,
+`.state-*`, …) is NOT carried forward** — the rewrite uses a redesigned
+vocabulary (`.button` + chained modifiers, `.card`, `.dialog`, `.tag`, …)
+chosen from first principles for the agentic-dev goal. The spike artifacts
+get deleted in the cleanup commit (see Migration plan).
 
 ## Migration plan
 
@@ -356,32 +419,45 @@ may be visible mid-series, which is fine):
    `<link rel="stylesheet" href=".../main.css">`. Old `components.css`
    no longer loads — pages look bare. Intentional and visible.
 
-3. **Core components** — add `components/button.css`,
-   `components/panel.css`, `components/table.css`, `components/badge.css`,
-   `components/nav.css`. Half the surface starts looking right again.
+3. **Core components** — add `components/button.css`, `components/card.css`,
+   `components/table.css`, `components/tag.css`, `components/app-header.css`,
+   `components/heading.css`. Half the surface starts looking right again
+   (where templates use the new class names; many still use the old ones
+   until step 7).
 
-4. **Composite components + macros** — add `components/modal.css`,
+4. **Composite components + macros** — add `components/dialog.css`,
    `components/tabs.css`, `components/field.css`, `components/dropdown.css`,
-   plus `templates/ui/_field.html`, `_modal.html`, `_tabs.html`,
-   `_confirm_form.html`, `_badge.html`. Update templates that use these
-   primitives to invoke the macros where appropriate.
+   `components/toast.css`, `components/spinner.css`, plus
+   `templates/ui/_field.html`, `_dialog.html`, `_tabs.html`,
+   `_confirm_form.html`, `_tag.html`. The macros are available for use but
+   templates aren't yet calling them (step 7 does that).
 
-5. **Project widgets** — move file-tree, overlay-picker,
-   console-autocomplete, editor, logs, live-state into `widgets/<name>.css`.
-   This is largely content-preserving — rename token references to the
-   semantic-token namespace, otherwise the rules carry over.
+5. **Project widgets** — move file-tree, overlay-picker, console-autocomplete,
+   editor, logs, live-state into `widgets/<name>.css` with renamed class
+   names (`.overlay-picker` → `.overlay-list`, `.file-tree-row` →
+   `.file-tree-item`, etc. — full mapping in the implementation plan).
+   Rename token references to the new semantic-token namespace.
 
 6. **Style guide** — add `routes/styleguide_routes.py`,
-   `templates/styleguide.html` with every primitive + do/don't blocks,
-   token reference table, dark-mode toggle button. Update `AGENTS.md`
-   with the UI workflow section.
+   `templates/styleguide.html` with every primitive + ✅ DO / ❌ DON'T
+   blocks, token reference table, dark-mode toggle button. Update
+   `AGENTS.md` with the UI workflow section.
 
-7. **Cleanup** — delete the old `components.css`, the old `tokens.css`,
-   the old root-level `logs.css` / `console-autocomplete.css` / `editor.css`
-   (now under `widgets/`). Delete the spike artifacts in the same commit:
-   `l4d2web/static/css/spike/`, `l4d2web/templates/spike.html`,
-   `l4d2web/routes/spike_routes.py`, `l4d2web/static/vendor/css/`, and the
-   `if spike_enabled(): app.register_blueprint(spike_bp)` block in
+7. **Template rewrite** — walk every template in `l4d2web/templates/`
+   and update class attributes to the new vocabulary. This is a large but
+   mechanical phase; the implementation plan splits it into reviewable
+   chunks (one per template-family: page templates, partial templates,
+   server-detail's complex cluster). Templates also switch to the new
+   macros (`ui.field`, `ui.dialog`, `ui.lifecycle_tag`, etc.) where
+   applicable. After this step, no template still references the old
+   vocabulary.
+
+8. **Cleanup** — delete the old `components.css`, the old `tokens.css`,
+   the old root-level `logs.css` / `console-autocomplete.css` /
+   `editor.css` (now under `widgets/`). Delete the spike artifacts in
+   the same commit: `l4d2web/static/css/spike/`, `l4d2web/templates/spike.html`,
+   `l4d2web/routes/spike_routes.py`, `l4d2web/static/vendor/css/`, and
+   the `if spike_enabled(): app.register_blueprint(spike_bp)` block in
    `app.py` (plus the `spike_routes` import). Run the existing Chromium
    e2e suite and the pytest suite. Walk the major pages (dashboard,
    servers, server detail, overlay detail, blueprint detail, profile,
@@ -412,20 +488,39 @@ revisit them.
 - **No build step.** No Sass, no PostCSS, no bundler. Modern CSS
   (`@layer`, `color-mix()`, custom properties) suffices and matches the
   project's zero-build philosophy.
-- **Two-tier tokens, not three.** Three-tier (primitive / semantic /
-  component-scoped, as in Material 3 or Adobe Spectrum) is over-engineered
-  for a project this size. Two tiers buy clean dark mode and unambiguous
-  agent rules without the indirection cost.
+- **Three-tier tokens** (primitives → semantic → component-scoped). The
+  initial draft proposed two tiers; the third (component-scoped tokens
+  like `--button-bg`) was added when we adopted chained-modifier variants
+  (`.button.danger.outline`), because composing variants cleanly requires
+  each variant to set local CSS custom properties that later modifiers
+  can read. The third tier is *private to each component* — it doesn't
+  bloat the global token namespace.
+- **Naming convention chosen from first principles.** The old vocabulary
+  (`.btn` / `.btn-primary` / `.panel` / `.modal` / `.badge` / `.state-*` /
+  `.site-header` / `.primary-nav` / `.link-button` / `.danger-outline` /
+  `.sr-only` / `.overlay-picker` / …) was historically grown and
+  inconsistent. The new vocabulary uses two rules: **parts are hyphenated
+  child classes** (`.card-header`), **variants chain on the parent**
+  (`.button.primary`). State stays on ARIA attributes. The agent learns
+  the rules once and predicts the rest.
 - **`@layer` for cascade.** Underused, well-supported since 2022, exactly
   fits the "layered design system" mental model. Replaces specificity
   hacks with declared layer ordering.
 - **Macros for five high-leverage primitives, CSS-only for the rest.**
   The macro tier exists where forgetting a piece of markup silently
-  breaks accessibility. Buttons and panels don't qualify; fields and
-  modals do.
+  breaks accessibility. Buttons and tags don't qualify; fields and
+  dialogs do. The fifth, `ui.lifecycle_tag`, encapsulates the
+  state-string → tag-variant mapping in one place.
 - **Style guide as enforcement, not just documentation.** Tied to a
   workflow rule ("the system is closed"), referenced in `AGENTS.md`,
-  with do/don't anti-pattern blocks. Most leveraged change for the
+  with ✅ DO / ❌ DON'T blocks. Most leveraged change for the
   agentic-dev goal.
-- **Spike artifacts kept until cleanup commit.** They seeded the decision;
-  they go away when the production system lands.
+- **Template rewrite as a discrete migration phase.** The new vocabulary
+  means every template's class attributes change; the implementation
+  plan dedicates a phase to this mechanical-but-extensive work rather
+  than mixing it into the CSS commits.
+- **Spike artifacts kept until cleanup commit.** They seeded the
+  architecture decision; they go away when the production system lands.
+  The spike used the *old* vocabulary — only its `@layer` structure +
+  token shape + dark-mode mechanism + aesthetic direction carried
+  forward.