docs: turn the accepted panel design into an enforceable contract

panel-redesign.md is rewritten for the accepted direction: three layers
(Bulma as shipped, adapters, own sp- components), the page layouts, what
an implementer must not do, and how that is enforced — guard tests that
land before any template, a design-first CI step, and acceptance by
evidence (test output plus a screenshot of every page beside its mockup,
reviewed by a model that did not write the step).

A components page shows every building block in every state; a screen
may be built from nothing else. panel/check.py lints the mockups against
the contract (class vocabulary, CSS bans on !important, id and page
selectors and stray widths, page structure) and writes
panel/outlines.json, the per-screen component skeleton an implementation
is compared with, so a different design cannot pass as this one.

Own modifier classes now carry the sp- prefix (sp-warn, sp-fail, sp-big,
sp-danger-zone, ...) so the vocabulary is machine-checkable; the lint
also caught a width set outside the layout in the mockup's own CSS.

Agent rule .cursor/rules/panel-design.mdc; roadmap row and section
updated (0/15, still candidate).

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

docs/roadmap.md

@@ -36,7 +36,7 @@ in `git log` and [CHANGELOG.md](../CHANGELOG.md).
 | template-data-typing | Typed structs for template data instead of `map[string]any` | candidate | — | — |
 | structured-logging | `log/slog` with levels and fields | candidate | — | — |
 | review-2026-08-followups | Remaining findings of the 2026-08-19 code review | candidate | — | — |
-| panel-redesign | Panel visual redesign (layout grammar) | candidate | — | [plans/panel-redesign.md](plans/panel-redesign.md) |
+| panel-redesign | Panel redesign (accepted mockups, design contract) | candidate | 0/15 | [plans/panel-redesign.md](plans/panel-redesign.md) |
 | schema-squash | Squash SQLite migrations into a 2.x baseline | **2.x** | — | — |
 
 **Recommended order** (not binding): the next feature is
@@ -297,26 +297,32 @@ and tagging it would only delete cross-platform test coverage.
 
 ## panel-redesign
 
-**Goal:** a panel layout grammar so screens stop inventing per-page widths to
-hide empty space. Forms stay on a reading measure; ops pages use the remaining
-column; cards fill their cells. Givens (hybrid WA layout CSS + own `measure` /
-`fill`, no JS component library, new mockups rather than
-[docs/assets/panel-ui/](assets/panel-ui/index.html)):
+**Goal:** a panel an operator opens a few times a year and still finds their
+way in — the important things in view, details one or two clicks away, one
+visual language, no page tuning its own width. The design is drawn and
+accepted: 29 screens and a components page under
+[docs/assets/panel-redesign/](assets/panel-redesign/index.html) (Bulma base,
+postmark / numbered heads / perforated edge, icons). Contract and checklist:
 [plans/panel-redesign.md](plans/panel-redesign.md).
 
-**Boundary:** visual CSS and templates after mockups. No new routes or mail-path
-behaviour. Not a front-end framework, not Web Awesome components, not Pico /
-Bootstrap. The older HTML mockups in `docs/assets/panel-ui/` are not the brief.
+**Boundary:** templates, one `panel.css`, shared partials, vendored Bulma and
+icons. Navigation regroups by mail direction (Overview · Outbound · Inbound ·
+Server). Four things the mockups show need their own decision and are not
+smuggled in with the restyle: queue as a table (`postqueue -j`), inbound
+queue, inbound log (rides on inbound-antispam-panel), Server › Health. No CSP
+change, no JavaScript widgets, no second framework.
 
-**Done when:** mockups exist that use only the frozen vocabulary, then — once
-this item is agreed — the live panel matches them without one-off `max-width`
-exceptions. The givens file itself is not “done”.
+**Done when:** every page renders with the component skeleton recorded in
+`panel/outlines.json`, the guard tests in the plan are green with no
+allow-list, and each page has an evidence screenshot accepted against its
+mockup.
 
-**Dependencies / risks:** competes with feature work for attention; easy to
-start restyling `internal/web` before the vocabulary is proven on paper.
-Vendoring WA CSS needs NOTICE / licence rows. CSP stays `default-src 'self'`.
+**Dependencies / risks:** an implementer substituting local patches or a look
+of their own — answered by guard tests that land before the templates, a
+`design-first` CI step and evidence-based acceptance (plan § Enforcement).
+Competes with feature work; Bulma is ~680 kB minified, embedded once.
 
-**Version:** `1.x` MINOR when implementation is agreed; `candidate` until then.
+**Version:** `1.x` MINOR when agreed; `candidate` until then.
 
 ---