README.md

@@ -32,7 +32,7 @@ SpryAuth.register_actions(statum);             // or hand-pick with statum.actio
 (`spry_users`, `spry_user_permissions`), the `UserEntity`/`UserPermissionEntity`
 mappings, the `UserProjection` projection and the scoped `UserService`.
 
-`SpryModule` also serves the [Spry CSS](../Spry-CSS) framework as built-in
+`SpryModule` also serves the Spry CSS framework (`css/spry.css`) as built-in
 Statum resources (embedded in `libspry` at build time, precompressed):
 `/_statum/resource/spry.css` — the core stylesheet with the default light +
 dark theme — plus every optional theme as
@@ -57,7 +57,7 @@ Beyond sane defaults for bare tags (headings, forms, tables, `dialog`,
 `details`, `progress`), the framework provides utilities and components.
 The spacing/gap naming scale is `0`–`5` = `0` `0.25rem` `0.5rem` `1rem`
 `1.5rem` `2.5rem` (remappable via `--spry-space-*`). Open
-`../Spry-CSS/index.html` in a browser for a live tour of everything.
+`css/index.html` in a browser for a live tour of everything.
 
 Layout:
 
@@ -92,6 +92,7 @@ Typography and color:
 `.fw-{light,normal,medium,semibold,bold}`, `.fs-italic .fs-normal`,
 `.uppercase .lowercase .capitalize`, `.lead .small .mono .num`,
 `.truncate .clamp-2 .clamp-3 .measure .measure-sm .text-nowrap`,
+`.prose` (long-form container: 65ch measure, reduced heading scale),
 `.bg-surface .bg-alt .bg-inset .bg-accent`, `.border .border-0 .rounded
 .rounded-sm .rounded-lg .rounded-pill .shadow .shadow-lg .shadow-none`.
 
@@ -105,7 +106,7 @@ Components:
 | Buttons | `.btn` + `.btn-primary .btn-outline .btn-ghost .btn-link .btn-danger`, `.btn-sm .btn-lg .btn-block`, `.btn-group` |
 | Forms | `.field` `.label` `.hint` `.input`, `.is-valid .is-invalid`, `fieldset`/`legend` defaults |
 | Checks | `.choice`, `.choices` / `.choices-inline`, `.switch` with `<span class="track">` |
-| Cards | `.card` (+ `.card-flat`), `.card-header .card-body .card-footer .card-title .card-subtitle` |
+| Cards | `.card` (+ `.card-flat`) pads with `--spry-card-padding` by default; `.card-header .card-body .card-footer .card-title .card-subtitle` run flush (the card drops its padding when built from them; opt out with `.p-0`) |
 | Alerts / badges | `.alert` + `.alert-{danger,success,warning,info}`, `.badge` + `.badge-*` |
 | Hero | `.hero` (+ `.hero-compact`), `.hero-eyebrow .hero-title .hero-sub .hero-actions` |
 | Avatars | `.avatar` (+ `-sm/-lg`), `.avatar-group` |
@@ -115,14 +116,15 @@ Components:
 | Tables | bare `table` + `.table-striped .table-hover .table-compact .table-borderless`, `.table-wrap`, `.num` |
 | Progress | bare `<progress>` (determinate + indeterminate pulse), `.progress-thin`, `<meter>` |
 | Spinners | `.spinner` `.spinner-sm` `.spinner-lg` |
-| Dialogs | `<dialog>` + `.dialog-sm .dialog-lg`, `.dialog-titlebar .dialog-title .dialog-close .dialog-body .dialog-footer` |
+| Dialogs | `<dialog>` + `.dialog-sm .dialog-lg`, `.dialog-titlebar .dialog-title .dialog-close .dialog-body .dialog-footer`; a dialog without those parts pads with `--spry-popover-padding` |
 | Popovers | any `[popover]` element + `popovertarget` buttons; `.anchor` on the trigger + `.popover-anchor` on the popover + a shared `--anchor-name`; `.popover-title .popover-menu .popover-footer` |
 | Expanders | `<details>`/`<summary>` defaults, `.expander-group` |
 
 Every visual decision is a `--spry-*` custom property; color mode follows
 `data-mode="light|dark"` on `<html>` (default: auto, following the OS
-preference). See the [Spry CSS README](../Spry-CSS) for the full variable
-catalog and theme-writing guide.
+preference). `css/spry.css` documents the full variable catalog inline
+(section 1 lists every token); `css/themes/spry-theme-*.css` are worked
+theme-writing examples.
 
 Seed an admin at startup (idempotent — safe on every boot):
 

css/index.html

@@ -0,0 +1,530 @@
+<!DOCTYPE html>
+<!-- Spry CSS demo — a live tour of the framework. Works over file://:
+     link spry.css, then every theme after it; each theme activates when its
+     #spry-theme-* radio below is checked (themes ship that hook themselves). -->
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Spry CSS — live tour</title>
+    <link rel="stylesheet" href="spry.css">
+    <link rel="stylesheet" href="themes/spry-theme-airy.css">
+    <link rel="stylesheet" href="themes/spry-theme-dwarf.css">
+    <link rel="stylesheet" href="themes/spry-theme-formal.css">
+    <link rel="stylesheet" href="themes/spry-theme-glassy.css">
+    <link rel="stylesheet" href="themes/spry-theme-h2o.css">
+    <link rel="stylesheet" href="themes/spry-theme-living-sky.css">
+    <link rel="stylesheet" href="themes/spry-theme-modern.css">
+    <style>
+        /* Page-local chrome only: the switcher labels read like pressed
+           buttons. Everything else on this page is framework CSS. */
+        #switcher input:checked + label {
+            background: var(--spry-accent);
+            border-color: var(--spry-accent);
+            color: var(--spry-accent-fg);
+        }
+        #switcher input:focus-visible + label {
+            outline: 2px solid var(--spry-accent);
+            outline-offset: 2px;
+        }
+        /* The topbar's dropdown would open past the right viewport edge once
+           the switcher wraps below it; hinge it on the trigger's right side. */
+        .topbar .has-submenu > .submenu {
+            left: auto;
+            right: 0;
+        }
+    </style>
+</head>
+<body>
+    <!-- Switcher radios are visually hidden but focusable (arrow keys work);
+         the themes key off html:has(#spry-theme-<slug>:checked). -->
+    <header class="topbar">
+        <a class="topbar-brand" href="#">Spry CSS</a>
+        <nav class="nav">
+            <a href="#cards">Cards</a>
+            <a href="#overlays" class="active">Overlays</a>
+            <a href="#forms">Forms</a>
+            <a href="#tables">Tables</a>
+            <a href="#utils">Utilities</a>
+            <li class="has-submenu">
+                <a href="#components">More ▾</a>
+                <ul class="submenu">
+                    <li><a href="#prose">Prose</a></li>
+                    <li><a href="#buttons">Buttons</a></li>
+                    <li><a href="#alerts">Alerts &amp; badges</a></li>
+                    <li><a href="#tabs">Tabs</a></li>
+                    <li><a href="#details">Expanders</a></li>
+                    <li><a href="#hero">Hero &amp; avatars</a></li>
+                </ul>
+            </li>
+        </nav>
+        <div id="switcher" class="cluster" role="group" aria-label="Theme">
+            <input class="visually-hidden" type="radio" name="theme" id="spry-theme-core" checked>
+            <label class="btn btn-sm" for="spry-theme-core">Core</label>
+            <input class="visually-hidden" type="radio" name="theme" id="spry-theme-airy">
+            <label class="btn btn-sm" for="spry-theme-airy">Airy</label>
+            <input class="visually-hidden" type="radio" name="theme" id="spry-theme-dwarf">
+            <label class="btn btn-sm" for="spry-theme-dwarf">Dwarf</label>
+            <input class="visually-hidden" type="radio" name="theme" id="spry-theme-formal">
+            <label class="btn btn-sm" for="spry-theme-formal">Formal</label>
+            <input class="visually-hidden" type="radio" name="theme" id="spry-theme-glassy">
+            <label class="btn btn-sm" for="spry-theme-glassy">Glassy</label>
+            <input class="visually-hidden" type="radio" name="theme" id="spry-theme-h2o">
+            <label class="btn btn-sm" for="spry-theme-h2o">H2O</label>
+            <input class="visually-hidden" type="radio" name="theme" id="spry-theme-living-sky">
+            <label class="btn btn-sm" for="spry-theme-living-sky">Living&nbsp;Sky</label>
+            <input class="visually-hidden" type="radio" name="theme" id="spry-theme-modern">
+            <label class="btn btn-sm" for="spry-theme-modern">Modern</label>
+        </div>
+    </header>
+
+    <main class="container stack py-4">
+
+        <section id="cards" class="card">
+            <h2>Cards</h2>
+            <p class="mb-3">Padding comes with the card: a bare <code>.card</code> already looks
+                right, and a card built from <code>.card-header/-body/-footer</code> drops the
+                default so the sections run flush to the frame.</p>
+            <div class="grid">
+                <div class="card">
+                    <p class="fw-semibold">A bare card</p>
+                    <p class="text-muted small">No padding utilities, no structural children —
+                        the content sits comfortably inside the frame.</p>
+                </div>
+                <div class="card">
+                    <div class="card-header">
+                        <h3 class="card-title">Structured card</h3>
+                        <p class="card-subtitle">header · body · footer</p>
+                    </div>
+                    <div class="card-body">
+                        <p>Each section carries its own padding, flush against the borders.</p>
+                    </div>
+                    <div class="card-footer text-muted small">card-footer</div>
+                </div>
+                <div class="card card-flat">
+                    <p class="fw-semibold">Flat card</p>
+                    <p class="text-muted small"><code>.card-flat</code> — same padding, no shadow.
+                        Opt out of any padding with <code>.p-0</code> &amp; friends.</p>
+                </div>
+            </div>
+        </section>
+
+        <section id="prose" class="card">
+            <h2>Prose</h2>
+            <p class="mb-3">Long-form content inside cards and dialogs uses <code>.prose</code>:
+                the measure is capped and headings step down from page scale to document scale.</p>
+            <div class="prose">
+                <h1>A document heading</h1>
+                <p>Body text set at a comfortable <a href="#">measure</a>, with
+                    <code>inline code</code>, <kbd>Ctrl</kbd> + <kbd>S</kbd> keys and
+                    <mark>highlighted</mark> passages. Themes restyle these rules without
+                    fighting the container — try Formal.</p>
+                <h2>Second level</h2>
+                <ul>
+                    <li>Lists keep the rhythm of the paragraph above</li>
+                    <li>And return it to the paragraph below</li>
+                </ul>
+                <blockquote>
+                    <p>A blockquote quotes something worth the vertical space.</p>
+                </blockquote>
+                <h3>Third level</h3>
+                <p>Enough — the rest of the page carries on at component scale.</p>
+            </div>
+        </section>
+
+        <section id="buttons" class="card">
+            <h2>Buttons</h2>
+            <p class="mb-3">Bare <code>&lt;button&gt;</code> already looks like a button;
+                <code>.btn-primary/danger/outline/ghost/link</code> restyle it.</p>
+            <div class="stack">
+                <div class="cluster">
+                    <button>Plain button</button>
+                    <button class="btn">.btn</button>
+                    <button class="btn btn-primary">Primary</button>
+                    <button class="btn btn-danger">Danger</button>
+                    <button class="btn btn-outline">Outline</button>
+                    <button class="btn btn-ghost">Ghost</button>
+                    <button class="btn btn-link">Link</button>
+                    <button class="btn" disabled>Disabled</button>
+                </div>
+                <div class="cluster">
+                    <button class="btn btn-primary btn-sm">Small</button>
+                    <button class="btn btn-primary">Regular</button>
+                    <button class="btn btn-primary btn-lg">Large</button>
+                    <span class="btn-group">
+                        <button class="btn">Day</button>
+                        <button class="btn">Week</button>
+                        <button class="btn">Month</button>
+                    </span>
+                </div>
+                <button class="btn btn-block">.btn-block — full width</button>
+            </div>
+        </section>
+
+        <section id="forms" class="card">
+            <h2>Forms</h2>
+            <p class="mb-3">Fields stack label, control and hint; <code>.is-invalid</code>
+                turns the hint red; choices, switches and selects inherit the theme.</p>
+            <div class="grid">
+                <form class="stack" action="#" method="dialog">
+                    <label class="field">
+                        <span class="label">Username</span>
+                        <input type="text" name="username" placeholder="ada">
+                        <span class="hint">Lowercase letters and digits.</span>
+                    </label>
+                    <label class="field">
+                        <span class="label">Email</span>
+                        <input class="is-invalid" type="email" name="email" value="not-an-email">
+                        <span class="hint">That does not look like an address.</span>
+                    </label>
+                    <label class="field">
+                        <span class="label">Plan</span>
+                        <select name="plan">
+                            <option>Hobby</option>
+                            <option>Team</option>
+                            <option>Self-hosted</option>
+                        </select>
+                    </label>
+                    <label class="field">
+                        <span class="label">Notes</span>
+                        <textarea name="notes" rows="3" placeholder="Anything else?"></textarea>
+                    </label>
+                </form>
+                <div class="stack">
+                    <fieldset>
+                        <legend>Notifications</legend>
+                        <div class="choices">
+                            <label class="choice"><input type="checkbox" checked> Mentions</label>
+                            <label class="choice"><input type="checkbox"> Digest</label>
+                        </div>
+                        <div class="choices-inline mt-2">
+                            <label class="choice"><input type="radio" name="freq" checked> Instant</label>
+                            <label class="choice"><input type="radio" name="freq"> Daily</label>
+                        </div>
+                    </fieldset>
+                    <label class="switch">
+                        <input type="checkbox" checked>
+                        <span class="track"></span> Backups
+                    </label>
+                    <label class="switch">
+                        <input type="checkbox">
+                        <span class="track"></span> Telemetry
+                    </label>
+                    <div>
+                        <span class="label">Verification code</span>
+                        <div class="otp mt-1">
+                            <input type="text" maxlength="1" value="7">
+                            <input type="text" maxlength="1" value="3">
+                            <input type="text" maxlength="1" value="1">
+                            <span class="otp-separator">–</span>
+                            <input type="text" maxlength="1">
+                            <input type="text" maxlength="1">
+                            <input type="text" maxlength="1">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="tables" class="card">
+            <h2>Tables</h2>
+            <p class="mb-3">Wrap wide tables in <code>.table-wrap</code>; modifiers striping,
+                hover and density stack on the same element.</p>
+            <div class="stack">
+                <div class="table-wrap">
+                    <table class="table-striped table-hover">
+                        <caption>Themes shipped with Spry CSS</caption>
+                        <thead>
+                            <tr><th>Theme</th><th>Mood</th><th class="num">Radius</th><th>Dark mode</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr><td>Airy</td><td>Windows 7 Aero glass</td><td class="num">soft</td><td>yes</td></tr>
+                            <tr><td>Dwarf</td><td>GNOME Adwaita</td><td class="num">sharp</td><td>yes</td></tr>
+                            <tr><td>Formal</td><td>Wedding stationery</td><td class="num">soft</td><td>light-only</td></tr>
+                            <tr><td>Glassy</td><td>Frosted panes</td><td class="num">round</td><td>yes</td></tr>
+                            <tr><td>H2O</td><td>Water and tide</td><td class="num">round</td><td>yes</td></tr>
+                            <tr><td>Living&nbsp;Sky</td><td>Aurora gradients</td><td class="num">soft</td><td>yes</td></tr>
+                            <tr><td>Modern</td><td>Flat neutral</td><td class="num">soft</td><td>yes</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="table-wrap">
+                    <table class="table-compact">
+                        <thead><tr><th>Class</th><th>Effect</th></tr></thead>
+                        <tbody>
+                            <tr><td><code>.table-striped</code></td><td>Zebra rows</td></tr>
+                            <tr><td><code>.table-hover</code></td><td>Row hover background</td></tr>
+                            <tr><td><code>.table-compact</code></td><td>Tighter cell padding</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </section>
+
+        <section id="alerts" class="card">
+            <h2>Alerts &amp; badges</h2>
+            <p class="mb-3">Both ride the semantic tokens, so themes and dark mode recolour
+                them for free.</p>
+            <div class="stack">
+                <div class="alert alert-info"><strong>Heads up.</strong> <p>Info alert for neutral notices.</p></div>
+                <div class="alert alert-success"><strong>Saved.</strong> <p>Success confirms an action.</p></div>
+                <div class="alert alert-warning"><strong>Careful.</strong> <p>Warnings flag risky ground.</p></div>
+                <div class="alert alert-danger"><strong>Failed.</strong> <p>Dangers own the failure case.</p></div>
+                <div class="cluster">
+                    <span class="badge">.badge</span>
+                    <span class="badge badge-info">info</span>
+                    <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>
+                </div>
+            </div>
+        </section>
+
+        <section id="tabs" class="tabs card">
+            <!-- Tabs contract: radios first as direct children, then .tab-list
+                 labels, then .tab-panels — one each, in order. -->
+            <input type="radio" name="tour" id="tab-a" checked>
+            <input type="radio" name="tour" id="tab-b">
+            <input type="radio" name="tour" id="tab-c">
+            <div class="tab-list">
+                <label for="tab-a">Overview</label>
+                <label for="tab-b">Tokens</label>
+                <label for="tab-c">Themes</label>
+            </div>
+            <div class="tab-panels">
+                <div>
+                    <p>Tabs are CSS-only: radios, labels and panels. No JavaScript, no
+                        ARIA wiring — the labels are clickable and the inputs focusable.</p>
+                </div>
+                <div>
+                    <p>Every visual decision is a <code>--spry-*</code> custom property.
+                        Apps style themselves with the tokens, and themes plus dark mode
+                        follow along with zero extra rules.</p>
+                </div>
+                <div>
+                    <p>Themes activate with <code>&lt;html data-theme="dwarf"&gt;</code>, or the
+                        <code>#spry-theme-*</code> radio hooks this page uses — same sheet,
+                        no duplicates.</p>
+                </div>
+            </div>
+        </section>
+
+        <section id="details" class="card">
+            <h2>Expanders</h2>
+            <p class="mb-3">Native <code>&lt;details&gt;</code> with styled summaries;
+                <code>.expander-group</code> fuses siblings into one accordion-shaped block.</p>
+            <details>
+                <summary>Why no JavaScript?</summary>
+                <p>Everything on this page — menus, tabs, drawers, this expander — is HTML
+                    and CSS. The one exception is <code>showModal()</code> on the dialog
+                    button, which is the native API for the job.</p>
+            </details>
+            <div class="expander-group">
+                <details>
+                    <summary>How do I opt out of card padding?</summary>
+                    <p><code>.p-0</code> through <code>.p-5</code> and the per-side variants
+                        override the default — the padding rules sit at zero specificity on
+                        purpose.</p>
+                </details>
+                <details open>
+                    <summary>How do themes switch without JavaScript?</summary>
+                    <p>Each theme scopes itself to <code>html:has(#spry-theme-slug:checked)</code>
+                        as well as <code>[data-theme]</code>; the switcher in the topbar just
+                        checks those radios.</p>
+                </details>
+                <details>
+                    <summary>What about reduced motion?</summary>
+                    <p>The core collapses every animation and transition under
+                        <code>prefers-reduced-motion</code>, dialogs included.</p>
+                </details>
+            </div>
+        </section>
+
+        <section id="overlays" class="card">
+            <h2>Dialogs, popovers &amp; drawers</h2>
+            <p class="mb-3">All share one open/close animation driven by
+                <code>--spry-dialog-*</code>. Pick <strong>Airy</strong> above to feel its
+                Windows&nbsp;7 glide-in: 180&nbsp;ms, scale 0.92 to 1, opacity 0 to 1, cubic
+                ease-out — anchored menus also rise from their trigger.</p>
+            <div class="cluster">
+                <button class="btn btn-primary" onclick="dlgTitlebar.showModal()">Modal dialog</button>
+                <button class="btn" onclick="dlgPlain.showModal()">Bare dialog</button>
+                <button class="btn" popovertarget="pop-win">Popover window</button>
+                <button class="btn anchor" style="--anchor-name: --demo-menu" popovertarget="pop-menu">Anchored menu ▾</button>
+                <button class="btn" popovertarget="drawer-demo">Drawer</button>
+            </div>
+
+            <dialog id="dlg-titlebar">
+                <div class="dialog-titlebar">
+                    <span class="dialog-title">Sign out everywhere?</span>
+                    <form method="dialog"><button class="dialog-close" aria-label="Close">✕</button></form>
+                </div>
+                <div class="dialog-body">
+                    <p>This ends every other session. You will stay signed in here.</p>
+                </div>
+                <div class="dialog-footer">
+                    <form method="dialog"><button class="btn">Cancel</button></form>
+                    <form method="dialog"><button class="btn btn-danger">Sign out</button></form>
+                </div>
+            </dialog>
+
+            <dialog id="dlg-plain">
+                <div class="stack">
+                    <p class="fw-semibold">A bare dialog</p>
+                    <p>No titlebar, no <code>.dialog-body</code> — so the dialog pads itself
+                        with <code>--spry-popover-padding</code> and this text is not glued
+                        to the frame.</p>
+                    <form method="dialog"><button class="btn">Close</button></form>
+                </div>
+            </dialog>
+
+            <div popover id="pop-win">
+                <div class="dialog-titlebar">
+                    <span class="dialog-title">Popover window</span>
+                    <button class="dialog-close" popovertarget="pop-win" aria-label="Close">✕</button>
+                </div>
+                <div class="dialog-body">
+                    <p>Dialog-like windows need no JavaScript either: any element with the
+                        <code>popover</code> attribute opens from a
+                        <code>popovertarget</code> button and light-dismisses.</p>
+                </div>
+            </div>
+
+            <div popover id="pop-menu" class="popover-anchor popover-menu" style="--anchor-name: --demo-menu">
+                <a href="#overlays">Open</a>
+                <a href="#overlays">Duplicate</a>
+                <a href="#overlays">Archive…</a>
+                <a href="#overlays">Delete…</a>
+            </div>
+
+            <div popover id="drawer-demo" class="drawer-right">
+                <div class="dialog-titlebar">
+                    <span class="dialog-title">Project settings</span>
+                    <button class="dialog-close" popovertarget="drawer-demo" aria-label="Close">✕</button>
+                </div>
+                <div class="dialog-body stack">
+                    <p>Drawers dock to an edge and slide — docked panels, not windows, so
+                        they keep the core slide instead of the dialog zoom.</p>
+                    <label class="switch"><input type="checkbox" checked><span class="track"></span> Auto-save</label>
+                </div>
+                <div class="dialog-footer">
+                    <button class="btn" popovertarget="drawer-demo">Close</button>
+                </div>
+            </div>
+        </section>
+
+        <section id="hero" class="card">
+            <h2>Hero, avatars &amp; pagination</h2>
+            <div class="hero hero-compact mt-3">
+                <span class="hero-eyebrow">Spry 0.3</span>
+                <h3 class="hero-title">A CSS framework that respects your markup</h3>
+                <p class="hero-sub">Utilities and components over bare tags, tokens over
+                    hard-coded colour, and no JavaScript anywhere it is not native.</p>
+                <div class="hero-actions">
+                    <button class="btn btn-primary">Get started</button>
+                    <button class="btn">Read the source</button>
+                </div>
+            </div>
+            <div class="cluster mt-3">
+                <span class="avatar avatar-sm">A</span>
+                <span class="avatar">TL</span>
+                <span class="avatar avatar-lg">SPR</span>
+                <span class="avatar-group">
+                    <span class="avatar">A</span>
+                    <span class="avatar">B</span>
+                    <span class="avatar">C</span>
+                    <span class="avatar">+4</span>
+                </span>
+            </div>
+            <nav aria-label="Pages" class="mt-3">
+                <ul class="pagination">
+                    <li><a href="#hero" aria-disabled="true">‹</a></li>
+                    <li><a href="#hero">1</a></li>
+                    <li><a href="#hero" aria-current="page">2</a></li>
+                    <li><a href="#hero">3</a></li>
+                    <li><span>…</span></li>
+                    <li><a href="#hero">9</a></li>
+                    <li><a href="#hero">›</a></li>
+                </ul>
+            </nav>
+        </section>
+
+        <section id="feedback" class="card">
+            <h2>Progress, meters &amp; spinners</h2>
+            <div class="stack mt-3">
+                <label>
+                    <span class="label">Uploading photos — 64%</span>
+                    <progress value="64" max="100"></progress>
+                </label>
+                <label>
+                    <span class="label">Thin variant, indeterminate work</span>
+                    <progress class="progress-thin"></progress>
+                </label>
+                <label>
+                    <span class="label">Disk use</span>
+                    <meter value="6.4" min="0" max="16">6.4 of 16 GB</meter>
+                </label>
+                <div class="cluster">
+                    <span class="spinner spinner-sm" role="status" aria-label="Loading"></span>
+                    <span class="spinner" role="status" aria-label="Loading"></span>
+                    <span class="spinner spinner-lg" role="status" aria-label="Loading"></span>
+                </div>
+            </div>
+        </section>
+
+        <section id="utils" class="card">
+            <h2>Utilities</h2>
+            <p class="mb-3">Layout primitives carry the page: this tour is a
+                <code>.container</code> of <code>.stack</code>ed sections, and the example
+                below is a <code>.with-sidebar</code> with a <code>.menu</code> and a
+                <code>.grid</code>.</p>
+            <div class="with-sidebar">
+                <aside>
+                    <ul class="menu">
+                        <li><a class="active" href="#utils">Overview</a></li>
+                        <li><a href="#utils">Activity</a></li>
+                        <li class="has-submenu">
+                            <a href="#utils">Settings</a>
+                            <ul class="submenu">
+                                <li><a href="#utils">General</a></li>
+                                <li><a href="#utils">Security</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </aside>
+                <div class="stack">
+                    <div class="grid grid-sm">
+                        <div class="card card-flat"><p class="fw-semibold">.stack</p><p class="text-muted small">Vertical rhythm with a gap</p></div>
+                        <div class="card card-flat"><p class="fw-semibold">.cluster</p><p class="text-muted small">Wrapping row of chips</p></div>
+                        <div class="card card-flat"><p class="fw-semibold">.grid</p><p class="text-muted small">Auto-fit columns</p></div>
+                        <div class="card card-flat"><p class="fw-semibold">.with-sidebar</p><p class="text-muted small">This layout, in fact</p></div>
+                    </div>
+                    <div>
+                        <p class="text-muted">Text utilities: <span class="text-danger">danger</span>,
+                            <span class="text-success">success</span>,
+                            <span class="fw-bold">bold</span>,
+                            <span class="mono">mono 0x1F</span>,
+                            <span class="num">1234.5</span>.</p>
+                        <p class="measure-sm text-muted">Measure utilities cap the line length —
+                            this paragraph is <code>.measure-sm</code> (45ch), which keeps
+                            reference text readable inside wide containers.</p>
+                    </div>
+                    <ul class="breadcrumb">
+                        <li><a href="#">Spry</a></li>
+                        <li><a href="#">CSS</a></li>
+                        <li><span aria-current="page">Live tour</span></li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+    </main>
+
+    <footer class="container py-4 text-muted small">
+        Spry CSS — core in <span class="mono">spry.css</span>, themes in
+        <span class="mono">themes/</span>. This page is plain HTML: view source, switch
+        themes, resize the window.
+    </footer>
+</body>
+</html>

css/spry.css

@@ -116,6 +116,7 @@
   --spry-popover-bg: var(--spry-surface);
   --spry-popover-border: var(--spry-border);
   --spry-popover-shadow: var(--spry-shadow-lg);
+  --spry-popover-padding: 1.1rem 1.25rem;
 
   accent-color: var(--spry-accent);
 }
@@ -805,6 +806,32 @@ abbr[title] {
 .shadow-lg { box-shadow: var(--spry-shadow-lg); }
 .shadow-none { box-shadow: none; }
 
+/* Long-form content (markdown, docs, help text) inside cards and dialogs.
+   The page-scale headings are oversized in those containers, so .prose caps
+   the measure and steps headings down to a document scale; spacing rides
+   --spry-space-* so themes and dark mode compose unchanged. */
+.prose {
+  max-width: 65ch;
+}
+
+.prose h1 { font-size: 1.5rem; margin-block: var(--spry-space-4) var(--spry-space-2); }
+.prose h2 { font-size: 1.25rem; margin-block: var(--spry-space-4) var(--spry-space-2); }
+.prose h3 { font-size: 1.1rem; margin-block: var(--spry-space-3) var(--spry-space-2); }
+.prose h4 { font-size: 1rem; margin-block: var(--spry-space-3) var(--spry-space-2); }
+
+.prose p,
+.prose ul,
+.prose ol,
+.prose dl,
+.prose blockquote {
+  margin-block-end: var(--spry-space-3);
+}
+
+/* Flush at both ends — trailing/leading flow margins would sit on top of the
+   card or dialog padding and make one side look heavier than the other. */
+.prose > :first-child { margin-block-start: 0; }
+.prose > :last-child { margin-block-end: 0; }
+
 /* ==========================================================================
    9. Components — topbar & navigation
    ========================================================================== */
@@ -1447,6 +1474,19 @@ input[type="radio"] {
   backdrop-filter: var(--spry-glass);
 }
 
+/* Padding comes with the card, so a bare <div class="card"> already looks
+   right; structural sections carry their own padding flush to the frame, so
+   a card built from them drops the default. Both rules sit at zero
+   specificity (:where), the same trick the reset uses — padding utilities
+   (.p-0, .px-2, …) override them without a specificity fight. */
+:where(.card) {
+  padding: var(--spry-card-padding);
+}
+
+:where(.card:has(> .card-header, > .card-body, > .card-footer)) {
+  padding: 0;
+}
+
 .card-flat {
   box-shadow: none;
 }
@@ -1729,6 +1769,13 @@ dialog.sm,
 dialog.lg,
 .dialog-lg { width: min(92vw, 56rem); }
 
+/* A dialog without structural parts (titlebar/body/footer/card sections)
+   would render its content flush against the frame, so pad it like a
+   popover. Structural dialogs keep padding: 0 above. */
+dialog:not(:has(.dialog-titlebar, .dialog-body, .dialog-footer, .card-header, .card-body, .card-footer)) {
+  padding: var(--spry-popover-padding);
+}
+
 dialog::backdrop {
   background: var(--spry-backdrop);
 }
@@ -1863,7 +1910,7 @@ dialog[open]::backdrop,
      the reset above zeroes margins, which parks popovers in the top-left */
   margin: auto;
   width: min(92vw, 26rem);
-  padding: 1.1rem 1.25rem;
+  padding: var(--spry-popover-padding);
   border: var(--spry-border-width) solid var(--spry-popover-border);
   border-radius: var(--spry-radius-lg);
   background: var(--spry-popover-bg);

css/themes/spry-theme-airy.css

@@ -71,14 +71,22 @@ html:has(#spry-theme-airy:checked) {
   --spry-glass: blur(12px) saturate(1.7); /* topbar, cards, popovers, dialogs */
   --spry-transition: 120ms ease;
 
-  /* Windows open the DWM way: a scale-up gliding to a soft stop; closing mirrors
-     it faster on an ease-in. Motion vars only — the core's two-state rules are
-     never touched; drawers keep the core's own translateX --spry-dialog-in. */
-  --spry-dialog-duration: 220ms;
-  --spry-dialog-ease: cubic-bezier(0.16, 1, 0.3, 1);
+  /* Windows glide in the DWM way (Windows 7 Aero, T ≈ 180ms): scale 0.92→1 and
+     alpha 0→1 on the same cubic ease-out f(t) = 1-(1-t)^3 — f(0.5) = 0.875, a
+     fast start gliding to a soft landing. cubic-bezier(1/3, 1, 2/3, 1) IS that
+     curve exactly (x(s) collapses to s). Closing mirrors it on t^3 — exactly
+     cubic-bezier(1/3, 0, 2/3, 0) — and slightly faster. Transform + opacity
+     only, so the whole flight is compositor-driven: the CSS analogue of DWM's
+     GPU quads, VSYNC-smooth. Anchored popovers add a small translate toward
+     their trigger (rule below), like DWM anchoring the scale origin to the
+     launching taskbar icon. Motion vars only — the core's two-state rules are
+     never touched; drawers keep the core's own translateX --spry-dialog-in
+     (docked panels, not windows). */
+  --spry-dialog-duration: 180ms;
+  --spry-dialog-ease: cubic-bezier(0.3333, 1, 0.6667, 1);
   --spry-dialog-close-duration: 150ms;
-  --spry-dialog-close-ease: cubic-bezier(0.32, 0, 0.67, 0);
-  --spry-dialog-in: scale(0.96);
+  --spry-dialog-close-ease: cubic-bezier(0.3333, 0, 0.6667, 0);
+  --spry-dialog-in: scale(0.92);
 
   /* ---- Controls: white wells, #abadb3 edge, blue focus halo ---- */
   --spry-control-bg: #ffffff;
@@ -382,6 +390,16 @@ html:has(#spry-theme-airy:checked) {
     margin: 0 6px 6px;
   }
 
+  /* Anchored popovers emerge toward their trigger: the core drops them below
+     the anchor (position-area: bottom), so they start 0.4rem closer to it and
+     glide down into place while scaling up — DWM anchoring the scale origin to
+     the launching point. Same specificity as the .popover-menu padding rules
+     but none of them set --spry-dialog-in, and this is the file's only setter
+     outside the tokens block, so the cascade is unambiguous. */
+  & .popover-anchor {
+    --spry-dialog-in: translateY(-0.4rem) scale(0.92);
+  }
+
   /* Drawers are docked glass bars, not framed windows: reset the frame (this
      follows the frame rule on purpose) and light the docked edge instead */
   & [popover].drawer-left, & [popover].drawer-right { border: 0; border-radius: 0; background-clip: border-box; }

css/themes/spry-theme-formal.css

@@ -102,12 +102,22 @@ html:has(#spry-theme-formal:checked) {
     font-variant-caps: all-small-caps; letter-spacing: 0.08em;
     text-shadow: 0 1px 0 #fff;
   }
-  & h2 { font-size: 2em; }       /* the site's h2 scale */
-  & h1 {
+  /* :where() keeps these at (0,1,0) — sibling themes use the same idiom —
+     so container-scoped scales in the core (.prose h1, .prose h2) still
+     win by load order instead of losing to a full (0,1,1) match. The size
+     rules additionally opt out of .prose: the radio switcher route
+     (html:has(#spry-theme-formal:checked)) carries an ID of specificity
+     that would otherwise flatten the core's document scale even through
+     :where(). */
+  & :where(h2:not(.prose *)) { font-size: 2em; }       /* the site's h2 scale */
+  & :where(h1) {
     font-family: var(--spry-font-display); font-weight: 400;
-    font-size: clamp(2.3rem, 1.7rem + 2.4vw, 3.3rem); line-height: 1.25;
+    line-height: 1.25;
     color: var(--spry-accent); text-shadow: 0 1px 0 #fff;
   }
+  & :where(h1:not(.prose *)) {
+    font-size: clamp(2.3rem, 1.7rem + 2.4vw, 3.3rem);
+  }
   & h6 { letter-spacing: 0.12em; text-shadow: 0 1px 0 #fff; }
 
   /* A card that opens on its title is a hero moment — script it */

tests/css_check.py

@@ -0,0 +1,391 @@
+#!/usr/bin/env python3
+"""Spry CSS regression checks — the visual contracts of the framework.
+
+Parses the shipped stylesheets as text (no browser needed) and asserts the
+shape the goal work established:
+
+  * Airy's dialog glide-in really is the Win7 DWM Aero curve: the open ease
+    numerically equals f(t) = 1-(1-t)^3 and the close ease equals t^3,
+    duration 180 ms, scale-from-0.90..0.95, anchored popovers translating
+    toward their trigger.
+  * Core padding defaults: bare `.card` and bare `dialog`/`[popover]` carry
+    padding by default, with :has() zero-guards so structural children stay
+    flush to the frame.
+  * Every theme keeps defining the tokens the core now relies on.
+  * The demo page (css/index.html) links and switches everything it demos.
+  * Formal's heading scale opts out of .prose on BOTH activation routes.
+  * Brace/paren balance and no tabs across all shipped CSS.
+  * README points at the live demo, not stale paths.
+
+Plain stdlib, no pytest: prints PASS/FAIL lines and a final summary in the
+spry-tests style ("---- N passed, M failed ----"), exits non-zero on any
+failure. Run from anywhere:
+
+    python3 tests/css_check.py
+"""
+
+import re
+import sys
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parent.parent
+
+THEMES = ["airy", "dwarf", "formal", "glassy", "h2o", "living-sky", "modern"]
+
+DEMO_MARKERS = [
+    "popover-anchor",
+    "dialog-titlebar",
+    "drawer",
+    "expander-group",
+    "otp",
+    "table-wrap",
+    "tabs",
+]
+
+passes = 0
+failures = 0
+
+
+def check(condition, label, detail=None):
+    global passes, failures
+    if condition:
+        passes += 1
+        print("PASS %s" % label)
+    else:
+        failures += 1
+        print("FAIL %s" % label)
+        if detail:
+            print("     %s" % detail)
+    return bool(condition)
+
+
+# --------------------------------------------------------------------------
+# Text helpers
+# --------------------------------------------------------------------------
+
+def read(rel):
+    return (ROOT / rel).read_text(encoding="utf-8")
+
+
+def strip_comments(css):
+    return re.sub(r"/\*.*?\*/", "", css, flags=re.S)
+
+
+def collapse_ws(text):
+    return re.sub(r"\s+", " ", text).strip()
+
+
+def iter_blocks(css):
+    """Yield (selector, body) for every top-level `{}` block, brace-matched."""
+    depth = 0
+    selector_start = 0
+    body_start = 0
+    for i, ch in enumerate(css):
+        if ch == "{":
+            if depth == 0:
+                selector = css[selector_start:i]
+                body_start = i + 1
+            depth += 1
+        elif ch == "}":
+            depth -= 1
+            if depth == 0:
+                yield selector, css[body_start:i]
+                selector_start = i + 1
+        elif depth == 0 and ch == ";":
+            # a declaration at top level ends any pseudo-selector window
+            selector_start = i + 1
+    if depth != 0:
+        raise ValueError("unbalanced braces while scanning blocks")
+
+
+def find_block(css, selector_regex):
+    """First top-level block whose selector matches; returns (selector, body)."""
+    rx = re.compile(selector_regex)
+    for selector, body in iter_blocks(css):
+        if rx.search(collapse_ws(selector)):
+            return selector, body
+    return None
+
+
+def token_value(css, name, occurrence=0):
+    """Nth definition (0-based) of a custom property, or None."""
+    matches = re.findall(r"%s:\s*([^;]+);" % re.escape(name), css)
+    return matches[occurrence].strip() if len(matches) > occurrence else None
+
+
+# --------------------------------------------------------------------------
+# a. Bezier math — Airy's glide-in must be the DWM curve
+# --------------------------------------------------------------------------
+
+BEZIER_RX = re.compile(
+    r"cubic-bezier\(\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*\)"
+)
+
+
+def parse_bezier(value):
+    m = BEZIER_RX.fullmatch(value.strip())
+    if not m:
+        return None
+    return tuple(float(g) for g in m.groups())
+
+
+def bezier_y(x1, y1, x2, y2, t):
+    """y(t) of a CSS cubic-bezier: solve x(s)=t for s (x is monotonic for
+    x1,x2 in [0,1]) by bisection, then evaluate y(s)."""
+    def coord(a, b, s):
+        return 3 * (1 - s) ** 2 * s * a + 3 * (1 - s) * s * s * b + s ** 3
+    if t <= 0.0:
+        return 0.0
+    if t >= 1.0:
+        return 1.0
+    lo, hi = 0.0, 1.0
+    for _ in range(200):  # far past 1e-9 tolerance
+        mid = (lo + hi) / 2
+        if coord(x1, x2, mid) < t:
+            lo = mid
+        else:
+            hi = mid
+    return coord(y1, y2, (lo + hi) / 2)
+
+
+def parse_ms(value):
+    m = re.fullmatch(r"(\d+(?:\.\d+)?)(ms|s)", value.strip())
+    if not m:
+        return None
+    return float(m.group(1)) * (1000.0 if m.group(2) == "s" else 1.0)
+
+
+def check_airy_bezier():
+    airy = strip_comments(read("css/themes/spry-theme-airy.css"))
+    print("-- Airy DWM glide-in curve --")
+
+    ease = parse_bezier(token_value(airy, "--spry-dialog-ease") or "")
+    if not check(ease is not None, "airy --spry-dialog-ease is a cubic-bezier()",
+                 "got: %r" % (token_value(airy, "--spry-dialog-ease"),)):
+        return
+    samples = [bezier_y(*ease, t) for t in (0.25, 0.5, 0.75)]
+    expected = [1 - (1 - t) ** 3 for t in (0.25, 0.5, 0.75)]
+    worst = max(abs(a - b) for a, b in zip(samples, expected))
+    check(worst < 1e-3, "airy open ease equals 1-(1-t)^3 at t=0.25/0.5/0.75",
+          "bezier%s sampled %s vs %s (worst delta %.2e)"
+          % (ease, ["%.5f" % s for s in samples],
+             ["%.5f" % e for e in expected], worst))
+
+    close = parse_bezier(token_value(airy, "--spry-dialog-close-ease") or "")
+    if not check(close is not None, "airy --spry-dialog-close-ease is a cubic-bezier()",
+                 "got: %r" % (token_value(airy, "--spry-dialog-close-ease"),)):
+        return
+    samples = [bezier_y(*close, t) for t in (0.25, 0.5, 0.75)]
+    expected = [t ** 3 for t in (0.25, 0.5, 0.75)]
+    worst = max(abs(a - b) for a, b in zip(samples, expected))
+    check(worst < 1e-3, "airy close ease equals t^3 at t=0.25/0.5/0.75",
+          "bezier%s sampled %s vs %s (worst delta %.2e)"
+          % (close, ["%.5f" % s for s in samples],
+             ["%.5f" % e for e in expected], worst))
+
+    check(parse_ms(token_value(airy, "--spry-dialog-duration") or "") == 180.0,
+          "airy --spry-dialog-duration is 180ms",
+          "got: %r (DWM window-open T ~= 180ms)" % (token_value(airy, "--spry-dialog-duration"),))
+    check(parse_ms(token_value(airy, "--spry-dialog-close-duration") or "") == 150.0,
+          "airy --spry-dialog-close-duration is 150ms",
+          "got: %r" % (token_value(airy, "--spry-dialog-close-duration"),))
+
+    dia_in = token_value(airy, "--spry-dialog-in") or ""
+    check(re.search(r"scale\(0\.9[0-5]", dia_in) is not None,
+          "airy --spry-dialog-in scales from the 0.90-0.95 band",
+          "got: %r (DWM starts at 90-95%% of final size)" % dia_in)
+
+    # Anchored popovers additionally translate toward their trigger. The rule
+    # is nested inside the theme's root block (& .popover-anchor), so scan for
+    # its declaration list directly rather than the top-level block iterator.
+    anchor = re.search(r"\.popover-anchor\b[^{]*\{([^{}]*)\}", airy)
+    anchor_in = token_value(anchor.group(1), "--spry-dialog-in") if anchor else ""
+    check(anchor is not None
+          and re.search(r"translateY\(-", anchor_in) is not None
+          and re.search(r"scale\(0\.9[0-5]", anchor_in) is not None,
+          "airy .popover-anchor glides in from above (translateY + 0.9x scale)",
+          "got: %r" % anchor_in)
+
+
+# --------------------------------------------------------------------------
+# b. Padding defaults — bare cards and dialogs must not hug their frame
+# --------------------------------------------------------------------------
+
+def check_padding_defaults():
+    core = strip_comments(read("css/spry.css"))
+    print("-- core padding defaults --")
+
+    bare_card = find_block(core, r"^:where\(\s*\.card\s*\)$")
+    check(bare_card is not None
+          and re.search(r"padding:\s*var\(--spry-card-padding\)", bare_card[1]) is not None,
+          "bare .card defaults to padding: var(--spry-card-padding)",
+          "expected a :where(.card) rule padding bare cards")
+
+    guard_card = find_block(core, r":where\(\.card:has\(")
+    guard_sel = collapse_ws(guard_card[0]) if guard_card else ""
+    check(guard_card is not None
+          and re.search(r"padding:\s*0", guard_card[1]) is not None
+          and all(c in guard_sel for c in (".card-header", ".card-body", ".card-footer")),
+          "structured .card (has header/body/footer) zeroes the default padding",
+          "got selector: %r" % guard_sel)
+
+    root_block = find_block(core, r":where\(:root\)")
+    check(root_block is not None
+          and token_value(root_block[1], "--spry-popover-padding") is not None,
+          "--spry-popover-padding is defined in :where(:root)")
+    check(token_value(core, "--spry-card-padding") is not None,
+          "--spry-card-padding is defined")
+
+    popover = find_block(core, r"^\[popover\]$")
+    check(popover is not None
+          and re.search(r"padding:\s*var\(--spry-popover-padding\)", popover[1]) is not None,
+          "[popover] pads with var(--spry-popover-padding)")
+
+    popover_win = find_block(core, r"\[popover\]:has\(")
+    win_sel = collapse_ws(popover_win[0]) if popover_win else ""
+    check(popover_win is not None
+          and re.search(r"padding:\s*0", popover_win[1]) is not None
+          and all(c in win_sel for c in (".dialog-titlebar", ".dialog-body", ".dialog-footer")),
+          "popover 'windows' (has dialog parts) drop the generic padding",
+          "got selector: %r" % win_sel)
+
+    bare_dialog = find_block(core, r"dialog:not\(:has\(")
+    dsel = collapse_ws(bare_dialog[0]) if bare_dialog else ""
+    check(bare_dialog is not None
+          and re.search(r"padding:\s*var\(--spry-popover-padding\)", bare_dialog[1]) is not None
+          and all(c in dsel for c in (".dialog-titlebar", ".dialog-body",
+                                      ".dialog-footer", ".card-header",
+                                      ".card-body", ".card-footer")),
+          "bare dialog:not(:has(structural parts)) pads itself",
+          "got selector: %r" % dsel)
+
+
+# --------------------------------------------------------------------------
+# c. Theme token sets
+# --------------------------------------------------------------------------
+
+def check_theme_tokens():
+    print("-- theme token sets --")
+    for slug in THEMES:
+        css = strip_comments(read("css/themes/spry-theme-%s.css" % slug))
+        check(token_value(css, "--spry-card-padding") is not None,
+              "theme %s defines --spry-card-padding" % slug)
+
+
+# --------------------------------------------------------------------------
+# d. Demo page coverage
+# --------------------------------------------------------------------------
+
+def check_demo():
+    html = read("css/index.html")
+    print("-- demo page coverage --")
+
+    missing = ["spry.css"] + ["themes/spry-theme-%s.css" % s for s in THEMES]
+    missing = [href for href in missing
+               if ('href="%s"' % href) not in html and ("href='%s'" % href) not in html]
+    check(not missing, "demo links spry.css and all 7 themes",
+          "missing links: %s" % ", ".join(missing))
+
+    inputs = re.findall(r"<input\b[^>]*>", html)
+    missing = [slug for slug in THEMES
+               if not any('type="radio"' in tag and ('id="spry-theme-%s"' % slug) in tag
+                          for tag in inputs)]
+    check(not missing, "demo has a theme radio for every slug",
+          "missing radios: %s" % ", ".join(missing))
+
+    missing = []
+    for marker in DEMO_MARKERS:
+        if not re.search(r"\b%s\b" % re.escape(marker), html):
+            missing.append(marker)
+    classes = re.findall(r'class="([^"]*)"', html)
+    if not any("prose" in c.split() for c in classes):
+        missing.append("prose (as a class)")
+    check(not missing, "demo exercises the key components (dialogs, drawers, prose, ...)",
+          "missing markers: %s" % ", ".join(missing))
+
+
+# --------------------------------------------------------------------------
+# e. Formal prose guard — both activation routes
+# --------------------------------------------------------------------------
+
+def check_formal_prose():
+    formal = strip_comments(read("css/themes/spry-theme-formal.css"))
+    print("-- formal .prose guard --")
+
+    block = find_block(formal, r'\[data-theme="formal"\]')
+    sel = collapse_ws(block[0]) if block else ""
+    check(block is not None and "html:has(#spry-theme-formal:checked)" in sel,
+          "formal rules are reachable via data-theme AND the demo radio route",
+          "got selector: %r" % sel)
+
+    body = block[1] if block else ""
+    check("h1:not(.prose" in body and "h2:not(.prose" in body,
+          "formal h1/h2 size rules opt out of .prose")
+
+    # Scan every h1/h2 rule: if its own declarations set font-size, the
+    # selector must carry the :not(.prose *) guard.
+    unguarded = []
+    for m in re.finditer(r"\bh([12])\b", formal):
+        nxt = re.search(r"[{};]", formal[m.end():])
+        if not nxt or nxt.group(0) != "{":
+            continue  # not in a selector position
+        brace = m.end() + nxt.start()
+        prev = max(formal.rfind("}", 0, brace), formal.rfind("{", 0, brace),
+                   formal.rfind(";", 0, brace))
+        selector = collapse_ws(formal[prev + 1:brace])
+        if not re.search(r"\bh[12]\b", selector):
+            continue  # the h1/h2 belonged to an enclosing context, not this selector
+        decls_end = re.search(r"[{}]", formal[brace + 1:])
+        decls = formal[brace + 1: brace + 1 + decls_end.start()] if decls_end else ""
+        if "font-size" in decls and ":not(.prose" not in selector:
+            unguarded.append(selector)
+    check(not unguarded, "every formal h1/h2 font-size rule is guarded by :not(.prose ...)",
+          "unguarded: %s" % " | ".join(unguarded))
+
+
+# --------------------------------------------------------------------------
+# f. Syntax sanity
+# --------------------------------------------------------------------------
+
+def check_syntax():
+    print("-- syntax sanity --")
+    files = ["css/spry.css"] + ["css/themes/spry-theme-%s.css" % s for s in THEMES]
+    for rel in files:
+        raw = read(rel)
+        stripped = strip_comments(raw)
+        problems = []
+        if stripped.count("{") != stripped.count("}"):
+            problems.append("braces %d/%d" % (stripped.count("{"), stripped.count("}")))
+        if stripped.count("(") != stripped.count(")"):
+            problems.append("parens %d/%d" % (stripped.count("("), stripped.count(")")))
+        if "\t" in raw:
+            problems.append("tab characters (files are 2-space)")
+        check(not problems, "%s is balanced and tab-free" % rel,
+              "; ".join(problems))
+
+
+# --------------------------------------------------------------------------
+# g. README freshness
+# --------------------------------------------------------------------------
+
+def check_readme():
+    print("-- README freshness --")
+    readme = read("README.md")
+    check("../Spry-CSS" not in readme, "README has no stale ../Spry-CSS references")
+    check("css/index.html" in readme, "README points at the css/index.html demo")
+
+
+def main():
+    for fn in (check_airy_bezier, check_padding_defaults, check_theme_tokens,
+               check_demo, check_formal_prose, check_syntax, check_readme):
+        try:
+            fn()
+        except Exception as exc:  # a crash is a failure, not a skip
+            check(False, "%s ran to completion" % fn.__name__,
+                  "raised: %r" % exc)
+    print("---- %d passed, %d failed ----" % (passes, failures))
+    return 1 if failures else 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())

tests/meson.build

@@ -10,6 +10,14 @@
 # boots a real SQLite store through the same wiring as SpryModule and
 # verifies the full SA-16 path — register, force-stale the stored hash,
 # authenticate, hash rewritten at current parameters, epoch untouched.
+#
+# css-check parses the shipped stylesheets as text (no browser): the
+# Airy DWM glide-in curve is numerically the Win7 f(t)=1-(1-t)^3 open /
+# t^3 close, core padding defaults plus their :has() zero-guards, theme
+# token sets, demo-page coverage, formal's .prose opt-out, brace/paren
+# balance, README freshness.
+
+python3 = import('python').find_installation('python3')
 
 spry_tests = executable('spry-tests',
     ['TestMain.vala'],
@@ -29,3 +37,8 @@ test('spry-rehash-probe', rehash_probe,
     args: [join_paths(meson.current_build_dir(), 'rehash-probe.sqlite')],
     workdir: meson.current_build_dir()
 )
+
+test('css-check', python3,
+    args: files('css_check.py'),
+    workdir: meson.project_source_root()
+)