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/assets/panel-redesign/index.html

@@ -13,7 +13,7 @@
   <h1>The accepted direction, every screen</h1>
   <p class="lead">Direction <strong>C</strong> (Bulma) was picked as the base: the important things in view, details one
   or two clicks away. It takes the postal signature of <strong>A</strong> — the postmark verdict, numbered mono section
-  heads, the stamp's perforated edge — and the icons of <strong>B</strong>. Twenty-nine screens live in
+  heads, the stamp's perforated edge — and the icons of <strong>B</strong>. Twenty-nine screens and a components page live in
   <a href="panel/overview.html">panel/</a>. Serve this folder from the repository root: the pages load the panel's own
   fonts and mark by relative path.</p>
 
@@ -36,6 +36,8 @@
         <a href="panel/backup.html">Backup</a> · <a href="panel/users.html">Users</a> · <a href="panel/user.html">user form</a> ·
         <a href="panel/user-delete.html">delete user</a> · <a href="panel/settings.html">Settings</a></td></tr>
       <tr><th>User menu</th><td><a href="panel/account.html">Account</a> · <a href="panel/help.html">Help</a></td></tr>
+      <tr><th>Contract</th><td><a href="panel/components.html">Components</a> — every building block in every state ·
+        <a href="../../plans/panel-redesign.md">the plan</a> · <code>panel/check.py</code> lints the mockups and writes <code>panel/outlines.json</code></td></tr>
     </tbody>
   </table>
   </div>