@cyberskill/design 1.0.0 → 1.1.0

package/docs/quality-gates.md

@@ -4,41 +4,46 @@ Every deterministic quality gate in the system, what it asserts, its pass criter
 
 **Where gates run.** *Fast board CI* = the `fast-gates` job in `.github/workflows/design-system-gates.yml`, which serves the repo and drives `_audit/run.html` headless via `_audit/ci/run-gates.mjs` (every push/PR + nightly + manual) — new board rows are picked up automatically. Two gates additionally run standalone as *merge blockers* (`docs-consistency-blocker` job, via `_audit/ci/run-single-gate.mjs`). *Whole-set CI* = the `whole-set-audits` job (every push/PR + nightly — owner decision B). *Unit test* = `npm run test:unit` in the `unit-tests` job (plain Node, no browser). *Node pre-checks* = the `node-prechecks` job (browser-free authorities: bundle freshness, DESIGN.md freshness) plus the `token-provenance` job. Every browser gate publishes a verdict global (`window.__*`) that the headless runners read.
 
-## Fast board — 31 gates in `_audit/run.html`
+## Fast board — 34 gates in `_audit/run.html`
+
+Benchmark principles (WCAG · APCA · OKLCH · DTCG · CDS doctrine + style expansion): [`docs/benchmark-rubric.md`](benchmark-rubric.md).
 
 | Gate | File | What it asserts | Pass criterion | Type | Where it runs |
 |---|---|---|---|---|---|
 | Contrast guard | `_audit/contrast-guard.html` | No base rule paints umber on a themeable surface without a dark override; every semantic text×surface pair scores in light and dark | 0 unshielded rules and 0 failing pairs (`__contrastguard`) | Hard | Fast board CI |
-| Three-axes guard | `_audit/axis-guard.html` | No live source reintroduces the retired Expression/Density product surface | 0 hits across manifest-indexed sources (`__axisguard`) | Hard | Fast board CI |
+| Axes guard | `_audit/axis-guard.html` | No live source reintroduces the retired Expression/Density product surface | 0 hits across manifest-indexed sources (`__axisguard`) | Hard | Fast board CI |
 | Manifest CSS paths | `_audit/manifest-css-guard.html` | Every `_ds_manifest.json` `globalCssPaths` entry exists as raw CSS; every `styles.css` `@import` is listed | 0 missing / 0 unlisted (`__cssguard`) | Hard | Fast board CI |
-| Docs consistency | `_audit/docs-consistency.html` | Every count claim in README/SKILL/llms.txt matches the compiler manifest; `VERSION` + `package.json` pinned 1.0.0; no changelog-file reference; stale-phrase blacklist (the retired suite/pack counts the Jul 2026 audit removed) clean across README/SKILL/llms + `docs/*.md` (historical notes under `_audit/archive/` are not scanned); `DESIGN.md` exists with front-matter version = `VERSION`; agent routing honesty — Claude path cites `_esm/cs.mjs` + bundle prefix; Stitch path forbids `*.dc.html` as SoT; package name `@cyberskill/design` | 0 mismatched claims, 0 blacklist hits, pin + stamp + routing intact (`__docs`) | Hard | Fast board CI + merge blocker |
+| Docs consistency | `_audit/docs-consistency.html` | Every count claim in README/SKILL/llms.txt matches the compiler manifest; audit prose card-count claims (`_audit/index` / README / namespace-portability) match `manifest.cards`; `VERSION` + `package.json` pinned 1.1.0; no changelog-file reference; stale-phrase blacklist (the retired suite/pack counts the Jul 2026 audit removed) clean across README/SKILL/llms + `docs/*.md` (historical notes under `_audit/archive/` are not scanned); `DESIGN.md` exists with front-matter version = `VERSION`; agent routing honesty — Claude path cites `_esm/cs.mjs` + bundle prefix; Stitch path forbids `*.dc.html` as SoT; package name `@cyberskill/design` | 0 mismatched claims, 0 blacklist hits, pin + stamp + routing intact (`__docs`) | Hard | Fast board CI + merge blocker |
 | Docs language parity | `_audit/docs-lang-parity.html` | Every operator-facing EN `docs/*.md` has a `docs/vi/` counterpart; VI is not an empty/TODO stub (≥40% EN length); stale-phrase blacklist clean on both EN and VI (historical notes under `_audit/archive/` are not tracked) | 0 missing pairs, 0 stubs, 0 blacklist hits (`__docslangparity`) | Hard | Fast board CI |
-| DESIGN.md parity | `_audit/design-md-parity.html` | The root `DESIGN.md` (Stitch open-spec surface) byte-equals an in-browser regeneration from `tokens.dtcg.json` + `_ds_manifest.json` + `VERSION` via the shared `scripts/design-md-lib.mjs`; every one of the 138 token rows re-checked individually | Byte-identical + 0 drifted rows (`__designmd`) | Hard | Fast board CI |
-| Version stamp | `_audit/version-stamp.html` | `package.json`, `tokens.json`/`tokens.js` metas, DTCG `$extensions`, `provenance.json` release + dtcgStamp, and `DESIGN.md` front matter all equal `VERSION` (1.0.0 pin) | All 8 stamps equal (`__versionstamp`) | Hard | Fast board CI |
+| DESIGN.md parity | `_audit/design-md-parity.html` | The root `DESIGN.md` (Stitch open-spec surface) byte-equals an in-browser regeneration from `tokens.dtcg.json` + `_ds_manifest.json` + `VERSION` via the shared `scripts/design-md-lib.mjs`; every token row re-checked individually (the count is printed with the verdict) | Byte-identical + 0 drifted rows (`__designmd`) | Hard | Fast board CI |
+| Version stamp | `_audit/version-stamp.html` | `package.json`, `tokens.json`/`tokens.js` metas, DTCG `$extensions`, `provenance.json` release + dtcgStamp, `DESIGN.md` front matter, and `_esm/cs.mjs` `export const VERSION` all equal `VERSION` (1.1.0 pin) | All 9 stamps equal (`__versionstamp`) | Hard | Fast board CI |
 | Namespace portability | `_audit/namespace-portability.html` | No manifest-indexed source hardcodes the compiler's project-id bundle suffix | 0 hardcoded suffixes (`__nsguard`) | Hard | Fast board CI |
 | Token contract | `_audit/token-contract.html` | All 15 element×variant scopes resolve all 9 `--cs-accent-*` roles; core semantic tokens resolve | 0 missing roles, 0 missing core tokens (`__contract`) | Hard | Fast board CI |
 | Token pipeline | `_audit/token-pipeline-test.html` | Every DTCG-derived constant appears verbatim in all three `tokens/native/` targets; provenance sha-256 matches the DTCG source | 0 drifted constants, hash match (`__tokenpipe`) | Hard | Fast board CI |
 | Token format parity | `_audit/token-format-parity.html` | Every `--cs-*` declaration in `tokens/*.css` equals its mirror in `tokens.json`, `tokens.js` (live ESM deep-equal), and DTCG (ext-css string or typed transform) — base `:root` + dark/system themes + 15 element packs + 15 dark packs; the 4 `_ds_manifest.json` durations equal `motion.css` (guards the reduced-motion 0ms compiler bug) | 0 diffs across all scopes (`__tokenformat`) | Hard | Fast board CI |
 | DTCG typing | `_audit/dtcg-typing.html` | Every DTCG `$value` leaf carries a W3C `$type`; every `{alias}` resolves (chains followed, no cycles); every shadow token is a structured object/array with full layer fields; byType counts equal `provenance.json` | 0 untyped / dangling / string shadows (`__dtcgtyping`) | Hard | Fast board CI |
-| Story coverage | `_audit/story-coverage.html` | Every primary bundle export has an Atomic View story (`guidelines/atomic-view.html`) | 0 missing stories (`__storycov`) | Hard | Fast board CI |
+| Font-face integrity | `_audit/font-face-integrity.html` | Every `@font-face` in `tokens/fonts.css` is self-hosted under `fonts/` (no CDN `src`), subset-split with `font-display: swap`, and points at a file whose bytes start with the `wOF2` magic; every family named first by a `--cs-font-family-*` token has faces here **including the Vietnamese subset** (`U+1EA0-1EF9`), and every self-hosted family is named by a token; `_ds_manifest.json` `fonts[]` matches the parsed faces entry-for-entry and `brandFonts[]` matches the token-named families; each family loads for real via `document.fonts`; `.cs-display-face` retargets `--cs-heading-family` to the display family without leaking onto body copy | 0 missing/remote files, 0 families without a VN subset, 0 manifest diffs (`__fontface`) | Hard | Fast board CI |
+| Story coverage | `_audit/story-coverage.html` | Every primary bundle export has an Atomic View story; tweakable primaries in `PLAYGROUND_REQUIRED` must also ship `controls` + `renderC` playgrounds | 0 missing stories + 0 missing playgrounds (`__storycov`) | Hard | Fast board CI |
 | Consumer smoke test | `_audit/consumer-smoke-test.html` | The external consumer path works: `styles.css` + `_ds_bundle.js` mount real components and brand tokens reach a rendered Button | Mount + token assertions all pass (`__smoke`) | Hard | Fast board CI |
 | Bundle freshness | `_audit/bundle-freshness.html` | Every source recorded in the `_ds_bundle.js` header re-hashes to the header's sha-256 (browser replication of `ci/check-bundle-freshness.mjs`; the Node script stays the CI authority and additionally discovers new files); manifest component sources ⊆ header | 0 drifted / missing sources (`__bundlefresh`) | Hard | Fast board CI (+ Node authority in `node-prechecks`) |
-| ESM smoke test | `_audit/esm-smoke-test.html` | `_esm/cs.mjs` imports without a build, re-exports every manifest component, and a mounted Button receives brand tokens | Export/manifest parity + token check (`__esm`) | Hard | Fast board CI |
-| Package exports integrity | `_audit/package-exports-integrity.html` | Every `package.json` `files` entry and every `module`/`style`/`exports` target exists; every entry-point target is covered by `files` (pack-safe); `_esm/cs.mjs` is ESM-shaped and its `CS.*` re-exports ⊆ the bundle header's exposed exports | 0 missing / uncovered / unknown (`__pkgexports`) | Hard | Fast board CI |
+| ESM smoke test | `_audit/esm-smoke-test.html` | `_esm/cs.mjs` imports without a build, re-exports every manifest component, `VERSION` equals the root `VERSION` pin, and a mounted Button receives brand tokens | Export/manifest parity + VERSION pin + token check (`__esm`) | Hard | Fast board CI |
+| Package exports integrity | `_audit/package-exports-integrity.html` | Every `package.json` `files` entry and every `module`/`types`/`style`/`exports` target exists; every entry-point target is covered by `files` (pack-safe); dual entries — `_esm/react.mjs` (default / `./react`, React peer) + `_esm/cs.mjs` (`./legacy`) — are ESM-shaped and their re-exports ⊆ the bundle header's exposed exports | 0 missing / uncovered / unknown (`__pkgexports`) | Hard | Fast board CI |
 | Component children | `_audit/component-children-test.html` | Void-element components (Checkbox, Radio, Switch, SearchField, NumberField, Slider, Divider, TextField) mount with stray children without throwing React #137 | 0 throws (`__result.anyThrew === false`) | Hard | Fast board CI |
-| Component behavior | `_audit/component-behavior-test.html` | 35 real interaction assertions — toggles, controlled selection, palette filtering, overlay open/close, Form rules, Tree/Splitter/keyboard | 35/35 assertions pass (`__behavior`) | Hard | Fast board CI |
-| A11y interactions | `_audit/a11y-gate.html` | Focus management (Dialog/Drawer trap + restore + Escape), roving tabindex, combobox `aria-activedescendant`, role/label contracts | All keyboard/ARIA assertions pass (`__a11y`) | Hard | Fast board CI |
+| Component behavior | `_audit/component-behavior-test.html` | 78 real interaction assertions — every interactive public primary with a user-driven contract (overlays, forms, AI gates, shell chrome, media/copy); display-only primaries excluded by design | 78/78 assertions pass (`__behavior`) | Hard | Fast board CI |
+| A11y interactions | `_audit/a11y-gate.html` | Focus management (Dialog/Drawer trap + restore + Escape), roving tabindex, combobox `aria-activedescendant`, role/label contracts, plus open-state Esc/focus for Cascader · TreeSelect · Tour · HoverCard · ContextMenu | All keyboard/ARIA assertions pass (`__a11y`) | Hard | Fast board CI |
 | A11y CSSOM | `_audit/a11y-harness.html` | Every interactive `.cs-*` control meets its documented touch-target floor under coarse pointer; focus-ring, reduced-motion, and contrast rules proven in source CSS | 0 floor violations, all source proofs found (`__a11ycss`) | Hard | Fast board CI |
-| Template schema v2 | `_audit/template-schema-test.html` | Every `content-schema.json` sidecar validates against the JSON Schema and every declared slot id resolves to a real `{{ hole }}` in its template | 0 invalid sidecars, 0 dangling slot ids (`__schemav2`) | Hard | Fast board CI |
+| Template schema v2 | `_audit/template-schema-test.html` | Every `content-schema.json` sidecar validates against the JSON Schema, every declared slot id resolves to a real `{{ hole }}` in its template, and every template exposing an authorable **content** hole ships a sidecar (axis/control-flow and boolean tweak holes excluded — see `docs/template-schema-v2.md`) | 0 invalid sidecars, 0 dangling slot ids, 0 hole-driven templates without a sidecar (`__schemav2`) | Hard | Fast board CI |
 | Support runtime identity | `_audit/support-runtime-identity.html` | All `templates/*/support.js` copies (one per template, 84) are byte-identical: sha-256 via SubtleCrypto, exactly one unique hash, copy count == manifest template count | 1 unique hash, count match (`__supportid`) | Hard | Fast board CI |
 | Bilingual parity | `_audit/bilingual-parity.html` | Every component in `components/_i18n/strings.js` has en + vi tables with equal key sets and no empty values | 0 missing/extra keys, 0 empty values (`__bilingual`) | Hard | Fast board CI + merge blocker |
 | Template language parity | `_audit/template-lang-parity.html` | Static source scan of all 84 `.dc.html`: en/vi hole-map key sets identical and non-empty (21 map templates); `sc-if` `isEN`/`isVN` branches paired (24 branch templates); every `language`-tweak template has a bilingual mechanism; EN-leak lexicon (Unsubscribe · View in browser · Preferences · All rights reserved · Manage subscription · Sent with) never appears outside `isEN` guards / the `en` map. VN-first stacked instruments (37 `vn-*` + 3 `doc-*`) are leak-exempt by design — both languages always render | 0 key drifts, 0 unpaired branches, 0 leaks (`__langparity`) | Hard | Fast board CI |
 | APCA dark packs | `_audit/apca-dark-preview.html` | All 15 element×variant packs hold their APCA targets in dark (bright-as-text ≥ 75, accent UI ≥ 60, ink-on-accent ≥ 75, ink-on-tint ≥ 75) | 0 current failures (`__apcaPreview.currentFail === 0`) | Hard | Fast board CI |
+| Element geometry | `_audit/element-geometry.html` | Soft/middle/deep intensity sync across five elements; variant distinctness; light↔dark hue identity; Thổ middle pins logo ochre; packs generated from seeds | `__elementgeometry.pass` | Hard | Fast board CI |
+| Style contract | `_audit/style-contract.html` | Style axis allowlist: sole pack `liquid-glass` (absent ≡ default); `styles.css` imports `tokens/styles.css`; `--cs-style-pack` resolves; no unknown `data-cs-style` in scanned sources | `__stylecontract.pass` | Hard | Fast board CI |
 | Visual baselines | `_audit/visual-diff.html` | Template baselines exist and are loadable for side-by-side / overlay comparison | Baselines present; drift judged by eye (`__visualdiff`) | Advisory | Fast board CI |
 | Component baselines | `_audit/component-visual-diff.html` | 12 curated component crops anchor the atomic tiers for visual comparison | Crops render + baselines present (`__componentVisualDiff`) | Advisory | Fast board CI |
-| Axe smoke | `_audit/axe-smoke.html` | axe-core 4.10.0 (vendored at `_audit/vendor/axe.min.js`) serious/critical rules on a mounted bilingual component cluster | 0 serious/critical findings (`__axesmoke`) | Hard | Fast board CI |
+| Axe smoke | `_audit/axe-smoke.html` + `_audit/lib/axe-fixtures.js` | axe-core 4.10.0 (vendored at `_audit/vendor/axe.min.js`) serious/critical WCAG 2 A/AA rules on every public primary (inventory-locked fixtures; bilingual EN·VI) — Dialog, AlertDialog, Drawer, Tour, CommandPalette, and Menu mount open, and Cascader / TreeSelect / Menubar / Combobox surfaces are expanded before the scan; gate-equivalent Storybook a11y enforcement (no separate test-runner) | 0 serious/critical findings (`__axesmoke`) | Hard | Fast board CI |
 | Print smoke | `_audit/print-smoke.html` | Document templates declare the print-ownership meta and `@page` CSS hooks the export path relies on | 0 documents missing print hooks (`__printsmoke`) | Hard | Fast board CI |
-| Pixel CI | `_audit/pixel-ci.html` + `_audit/ci/pixel-diff.mjs` | Curated baselines exist; Playwright capture script performs real % pixel compare; last report must be clean (`drifted[]` empty) | Contract + clean compare (`__pixelci.pass`); drift or missing report fails | Hard | Fast board CI (compare step feeds the row) + `pixel-diff` job |
+| Pixel CI | `_audit/pixel-ci.html` + `_audit/ci/pixel-diff.mjs` | 15 curated baselines exist; Playwright capture script performs real % pixel compare; last report must be clean (`drifted[]` empty) | Contract + clean compare (`__pixelci.pass`); drift or missing report fails | Hard | Fast board CI (compare step feeds the row) + `pixel-diff` job |
 
 ## Whole-set audits — every template, every axis
 
@@ -56,35 +61,44 @@ Every deterministic quality gate in the system, what it asserts, its pass criter
 | Bundle freshness (authority) | `_audit/ci/check-bundle-freshness.mjs` | The committed `_ds_bundle.js` was built from the component sources as they exist now — full source discovery (walks `components/`, `ui_kits/`, root sources), so new/deleted files are caught too, which the browser row cannot do | Exit 0, 0 drifted/new/deleted sources | Hard | CI `node-prechecks` job |
 | DESIGN.md freshness | `scripts/generate-design-md.mjs --check` | The root `DESIGN.md` byte-equals a fresh regeneration from DTCG + manifest + `VERSION` | Exit 0 on byte match | Hard | CI `node-prechecks` job |
 
-## Unit tests — `npm run test:unit` (8)
+## Unit tests — `npm run test:unit` (11)
 
 | Test | File | What it asserts | Pass criterion | Type | Where it runs |
 |---|---|---|---|---|---|
 | Nav model | `_audit/ci/test-nav-model.mjs` | The shipped `guidelines/nav-model.js` classify/group logic behaves (drives the real module) | All assertions pass (exit 0) | Hard | Unit test |
 | Health/Tokens UI contract | `_audit/ci/test-health-tokens-contract.mjs` | Structural contracts of the Health + Tokens HTML entry points hold | All assertions pass (exit 0) | Hard | Unit test |
 | Form paths | `_audit/ci/test-form-paths.mjs` | Form path helpers behave (drives the shipped `Form.jsx` via dynamic import) | All assertions pass (exit 0) | Hard | Unit test |
-| Storybook contract | `_audit/ci/test-storybook-contract.mjs` | Live hub is Storybook only; SB10 ESM main + addon-docs/a11y; complete CSF for every public primary; Matrix/AllVariants + AllSizes when `argTypes.size`; States/Matrix cover disabled/loading/error/busy; every discrete size/variant enum mounted; FullMatrix required when ≥2 of {size, variant, state} axes exist | All assertions pass (exit 0) | Hard | Unit test |
+| Storybook contract | `_audit/ci/test-storybook-contract.mjs` | Live hub is Storybook only; SB10 ESM main + addon-docs/a11y; complete CSF for every public primary; Matrix/AllVariants + AllSizes when `argTypes.size`; States/Matrix cover disabled/loading/error/busy; every discrete size/variant enum mounted; FullMatrix required when ≥1 of {size, variant, state} axes exist (≥28 qualifiers) | All assertions pass (exit 0) | Hard | Unit test |
+| Axe coverage | `_audit/ci/test-axe-coverage.mjs` | Fixture `NAMES` ≡ `listPublicComponents()`; axe-smoke loads inventory-locked fixtures | All assertions pass (exit 0) | Hard | Unit test |
 | Figma push helpers | `_audit/ci/test-figma-push-helpers.mjs` | Pure helpers in `push-figma-variables.mjs` behave (no network, no secrets) | All assertions pass (exit 0) | Hard | Unit test |
-| Code Connect helpers | `_audit/ci/test-code-connect.mjs` | 99 primaries, node-map/render helpers, soft-skip classifiers, committed `figma.config.json` + high-traffic `.figma.tsx` | All assertions pass (exit 0) | Hard | Unit test |
+| Code Connect helpers | `_audit/ci/test-code-connect.mjs` | 105 primaries, node-map/render helpers, soft-skip classifiers, committed `figma.config.json` + high-traffic `.figma.tsx` | All assertions pass (exit 0) | Hard | Unit test |
 | Native samples | `_audit/ci/test-native-samples.mjs` | SwiftUI / Compose / Flutter sample apps each have ≥ 3 screens, reference generated token constants, and ship Fastlane store scaffolds (submit disabled) | All assertions pass (exit 0) | Hard | Unit test |
 | Subtree consume | `_audit/ci/test-subtree-consume.mjs` | Portable copy of `styles.css` + `base/` + `tokens/` + `fonts/` + `_esm/` + `_ds_bundle.js` (no full clone) still resolves tokens/fonts and mounts a Button via ESM — Stitch/Claude subtree-copy path | All assertions pass (exit 0) | Hard | Unit test |
+| React entry | `_audit/ci/test-react-entry.mjs` | Dual package exports (`.` / `./react` → `_esm/react.mjs`, `./legacy` → `_esm/cs.mjs`); VERSION pin 1.1.0; React peerDeps; react.mjs has no CDN/bundle bridge and re-exports match the bundle header; `generate-react-entry --check` green | All assertions pass (exit 0) | Hard | Unit test |
+| Element packs | `_audit/ci/test-element-packs.mjs` | `tokens/elements.css` + JSON/JS/DTCG mirrors byte-equal regeneration from `tokens/element-seeds.json` | `generate-element-packs --check` exit 0 | Hard | Unit test |
 
 The `test:unit` suite is wired into the CI workflow as part of the July 2026 hardening change (it previously only ran locally).
 
 ## Sync / distribution jobs (soft-skip)
 
-Soft-skip means the job exits 0 with a report when secrets/plan/API cannot complete the real write — **not** that npm, Code Connect, or Figma Variables are live. Treat soft-skip as provisional honesty until the remaining maintainer tasks in `docs/decisions.md` land (Code Connect node IDs; npm grant / `NPM_TOKEN`). Schema sidecars and Storybook `FullMatrix` grow opportunistically when a primary already qualifies — not as a mass-add pass.
+Soft-skip means the job exits 0 with a report when secrets/plan/API cannot complete the real write — **not** that Code Connect or Figma Variables are live. npm CI publish uses Trusted Publishing; soft-skip covers auth/conflict honesty. Treat remaining maintainer tasks in `docs/decisions.md` as the open list (Code Connect deferred; consumer grant is in `docs/consumer-grant.md`). Storybook `FullMatrix` is required for every public primary with ≥1 of {size enums, variant enums, state keys} — shared helpers in `stories/lib/matrix.jsx`.
 
 | Job | Script / workflow | What it asserts | Soft-skip when | Where it runs |
 |---|---|---|---|---|
-| Figma Variables | `_audit/ci/push-figma-variables.mjs` + `figma-variables-push` job | Secrets open the file; optional Variables write | Non-Enterprise / missing `file_variables:*` scopes / API 403 | `main` push + manual |
-| Code Connect | `_audit/ci/code-connect-publish.mjs` + `code-connect` job | Config + 99 mappings; optional publish | Missing `FIGMA_TOKEN`/`FIGMA_FILE_KEY` or API 403/404/429 | PR + `main` + manual |
-| npm publish | `_audit/ci/npm-publish.mjs` + `npm-publish.yml` | Pack-safe `files`/`exports`; optional `npm publish` | Missing `NPM_TOKEN` or registry auth/404/403 | `workflow_dispatch` / `v*` tags |
+| Figma Variables | `_audit/ci/push-figma-variables.mjs` + `figma-variables-push` job | Secrets open the file; optional Variables write | Soft-skip when secrets missing (same honesty as Code Connect) or non-Enterprise / missing `file_variables:*` scopes / API **403** after secrets are present. Soft-skip ≠ live sync | `main` push + manual |
+| Code Connect | `_audit/ci/code-connect-publish.mjs` + `code-connect` job | Config + 105 mappings; optional publish | Missing `FIGMA_TOKEN`/`FIGMA_FILE_KEY` or API 403/404/429 | PR + `main` + manual |
+| npm publish | `_audit/ci/npm-publish.mjs` + `npm-publish.yml` | Pack-safe `files`/`exports`; `npm publish` via OIDC Trusted Publishing (tokens disallowed on package) | Auth / 403 / 404 / EOTP / version conflict | `workflow_dispatch` / `v*` tags |
 | Native store | `_audit/ci/native-store-dry-run.mjs` + `native-store.yml` | Fastlane scaffolds + metadata; signed-release secrets check | Missing `ASC_*` / `PLAY_SERVICE_ACCOUNT_JSON` (submit always disabled) | PR + `main` (paths) + manual |
 
+## Registry consumer smoke (hard)
+
+| Job | Script / workflow | What it asserts | Pass criterion | Where it runs |
+|---|---|---|---|---|
+| npm-hello smoke | `examples/npm-hello` + `npm-hello-smoke` job | Public registry install of `@cyberskill/design@1.1.0` resolves package name + exports (`npm install` + `npm run smoke`; local pack proof if VERSION not on registry yet) | Exit 0 (**hard fail** once published; soft-skip pack proof if VERSION not on registry yet) | Path-filtered push/PR + nightly + manual |
+
 ## July 2026 hardening — delivered
 
-The eight gates the audit planned (token-format-parity, version-stamp, support-runtime-identity, package-exports-integrity, template-lang-parity, dtcg-typing, bundle-freshness, design-md-parity) are now **implemented** — see their rows in the fast-board and Node-pre-check tables above. All are wired into `_audit/run.html`, `_audit/index.html`, the CI workflow (`fast-gates` picks the board rows up automatically; `node-prechecks` + `unit-tests` are new jobs), and `dashboard.html` (whose Health tab embeds `run.html`, so board rows surface there without a separate list). The docs-consistency gate carries the stale-phrase blacklist (retired suite/pack counts) + `DESIGN.md` stamp extensions described in its row. The docs-lang-parity gate locks the `docs/vi/` mirror.
+The eight gates the audit planned (token-format-parity, version-stamp, support-runtime-identity, package-exports-integrity, template-lang-parity, dtcg-typing, bundle-freshness, design-md-parity) are now **implemented** — see their rows in the fast-board and Node-pre-check tables above. All are wired into `_audit/run.html`, `_audit/index.html`, and the CI workflow (`fast-gates` picks the board rows up automatically; `node-prechecks` + `unit-tests` are new jobs). Operators browse Health via Storybook **Status** (full-bleed `_audit/run.html`) and the audit index at `_audit/index.html` — `dashboard.html` is redirect-only and has no Health tab. The docs-consistency gate carries the stale-phrase blacklist (retired suite/pack counts) + `DESIGN.md` stamp extensions described in its row. The docs-lang-parity gate locks the `docs/vi/` mirror.
 
 ## Human-reviewed, never automated
 

package/docs/release-notes.md

@@ -1,12 +1,22 @@
 # Release Notes
 
-Curated product highlights for operators. This is **not** a git log and **not** a `CHANGELOG.md` — the design system does not maintain a changelog file. Version stays pinned at **1.0.0**; technical continuity is the repo tip, and product-facing continuity is this page (mirrored in Storybook **Release Notes**).
+Curated product highlights for operators. This is **not** a git log and **not** a `CHANGELOG.md` — the design system does not maintain a changelog file. Version is **LAUNCHED at 1.1.0** (owner instruction Jul 2026); further bumps need an explicit owner instruction. Technical continuity is the repo tip; product-facing continuity is this page (mirrored in Storybook **Release Notes**).
+
+## LAUNCH — `@cyberskill/design@1.1.0`
+
+Owner **LAUNCH** cut. `VERSION` / `package.json` and every version stamp move from the pre-LAUNCH **1.0.0** pin to **1.1.0**. Publish via **npm Trusted Publishing (OIDC)** on tag `v1.1.0` (or `workflow_dispatch`). Package Publishing access on npmjs **disallows tokens**. Soft-skip on the npm-hello registry install is honest until **1.1.0** is live on the registry — soft-skip ≠ published.
+
+Approved use for CyberSkill portfolio products remains in **`docs/consumer-grant.md`** (+ VI). The package remains **UNLICENSED**. First-consumer browser path: `examples/npm-hello/` (Lumi · Hỏa · plasma) — see `docs/consuming.md`.
+
+```bash
+npm install @cyberskill/design@1.1.0
+```
 
 ## Storybook at the domain root
 
 `design.cyberskill.world/` is the full Storybook product site. Docs, Foundations, Components, Release Notes, and Status live in one sidebar. Legacy `/dashboard` and `/playground` paths redirect to `/`.
 
-Portable consumers are unchanged: `styles.css`, `_ds_bundle.js`, and `_esm/cs.mjs` remain the adoption paths. Storybook is host-only tooling.
+Portable consumers: `styles.css`, `_ds_bundle.js`, bundler-native `_esm/react.mjs` (default `exports["."]`; React peer), and browser legacy `_esm/cs.mjs` (`@cyberskill/design/legacy`). Storybook is host-only tooling.
 
 ## Quality gates on Status
 
@@ -18,7 +28,7 @@ Public operator docs ship EN·VI pairs under `docs/` / `docs/vi/`. Templates rem
 
 ## Foundations and CSF library
 
-Theme × Element × Language toolbar globals mirror production templates. Every public primary ships a Default story plus an honest control matrix. Foundations cover colors, typography, spacing, elevation, motion, and the 15 Ngũ Hành element packs.
+Theme × Element × Language × Style toolbar globals mirror production templates (Theme includes **system** for OS `prefers-color-scheme`). Every public primary ships a Default story plus an honest control matrix; FullMatrix covers every ≥1-axis qualifier. Axe smoke scans all public primaries. Style’s sole pack is **liquid-glass**. Foundations cover colors, typography, spacing, elevation, motion, and the 15 Ngũ Hành element packs.
 
 ## Tokens and native mirrors
 

package/docs/status/assets/favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+<rect width="64" height="64" rx="14" fill="#45210E"/>
+<rect y="50" width="64" height="14" fill="#F4BA17"/>
+<text x="32" y="42" font-family="Georgia, 'Times New Roman', serif" font-size="34" font-weight="700" fill="#ffffff" text-anchor="middle">D</text>
+</svg>

package/docs/status/assets/status-legacy.css

@@ -0,0 +1,399 @@
+/* Generated by @cyberskill/tokens. Do not edit directly. */
+:root {
+  /* Light is the default theme. Dark/system are opt-in via [data-theme] (see @cyberskill/react theme layer). */
+  color-scheme: light;
+  --cs-color-brand-umber: #45210E;
+  --cs-color-brand-ochre: #F4BA17;
+  --cs-color-surface-page: #FFFDF8;
+  --cs-color-surface-panel: #FFFFFF;
+  --cs-color-surface-raised: #FBF4E9;
+  --cs-color-text-primary: #45210E;
+  --cs-color-text-inverse: #FFFFFF;
+  --cs-color-text-accent: #6E3B0E;
+  --cs-color-text-muted: #6E5A4C;
+  --cs-color-semantic-success: #166534;
+  --cs-color-semantic-danger: #B42318;
+  --cs-color-semantic-warning: #92400E;
+  --cs-color-semantic-info: #1D4ED8;
+  --cs-color-accent-ochre: #F4BA17;
+  --cs-color-border-default: #E7D9C6;
+  --cs-space-0: 0px;
+  --cs-space-1: 4px;
+  --cs-space-2: 8px;
+  --cs-space-3: 12px;
+  --cs-space-4: 16px;
+  --cs-space-5: 20px;
+  --cs-space-6: 24px;
+  --cs-space-8: 32px;
+  --cs-space-10: 40px;
+  --cs-space-12: 48px;
+  --cs-space-16: 64px;
+  --cs-space-20: 80px;
+  --cs-space-24: 96px;
+  --cs-radius-sm: 4px;
+  --cs-radius-md: 8px;
+  --cs-radius-full: 999px;
+  --cs-font-family-ui: Be Vietnam Pro, ui-sans-serif, system-ui;
+  --cs-font-family-mono: JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Consolas;
+  --cs-font-lineHeight-body: 1.5;
+  --cs-font-lineHeight-heading: 1.35;
+  --cs-component-button-primary-bg: #45210E;
+  --cs-component-button-primary-fg: #FFFFFF;
+  --cs-component-button-gap: 8px;
+  --cs-component-button-radius: 8px;
+  --cs-component-button-sm-paddingY: 8px;
+  --cs-component-button-sm-paddingX: 14px;
+  --cs-component-button-sm-minHeight: 36px;
+  --cs-component-button-md-paddingY: 12px;
+  --cs-component-button-md-paddingX: 20px;
+  --cs-component-button-md-minHeight: 44px;
+  --cs-component-button-lg-paddingY: 16px;
+  --cs-component-button-lg-paddingX: 28px;
+  --cs-component-button-lg-minHeight: 52px;
+  --cs-component-textfield-border-default: #BFA58F;
+  --cs-component-textfield-paddingY: 10px;
+  --cs-component-textfield-paddingX: 12px;
+  --cs-component-textfield-minHeight: 44px;
+  --cs-breakpoint-xs: 0px;
+  --cs-breakpoint-sm: 640px;
+  --cs-breakpoint-md: 768px;
+  --cs-breakpoint-lg: 1024px;
+  --cs-breakpoint-xl: 1280px;
+  --cs-breakpoint-2xl: 1536px;
+  --cs-depth-bg: 0;
+  --cs-depth-section: 5;
+  --cs-depth-card: 10;
+  --cs-depth-nav: 50;
+  --cs-depth-modal: 100;
+  --cs-depth-toast: 200;
+  --cs-glass-whisper-blur: 8px;
+  --cs-glass-whisper-saturate: 110%;
+  --cs-glass-whisper-opacity: 60%;
+  --cs-glass-light-blur: 12px;
+  --cs-glass-light-saturate: 130%;
+  --cs-glass-light-opacity: 70%;
+  --cs-glass-standard-blur: 16px;
+  --cs-glass-standard-saturate: 150%;
+  --cs-glass-standard-opacity: 80%;
+  --cs-glass-heavy-blur: 24px;
+  --cs-glass-heavy-saturate: 180%;
+  --cs-glass-heavy-opacity: 90%;
+}
+
+/* status.css - the stylesheet for status-hub@2 (one page, three lenses).
+   Built on @cyberskill/tokens; tokens.css is prepended at render time.
+   Contract: raw colour literals live ONLY in the two token blocks below. Every component
+   rule speaks in var(--cs-*). Dark is opt-in via [data-theme="dark"] on <html>, per CDS. */
+
+:root {
+  /* page-local tokens: the CDS palette has no "text on a filled chip" role */
+  --cs-status-on-ochre: #45210E;      /* text on ochre fills - dark in both themes */
+  --cs-status-on-fill: #FFFFFF;       /* text on success / danger fills */
+  --cs-status-todo: #E7D9C6;          /* the "draft" segment - readable in both themes */
+  --cs-status-header-bg: #45210E;
+  --cs-status-header-fg: #FFFFFF;
+  --cs-status-scrim: rgba(23, 17, 12, .45);
+  --cs-status-shadow: rgba(23, 17, 12, .22);
+  --cs-status-ghost-border: rgba(255, 255, 255, .25);
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+  --cs-color-brand-umber: #F0E3D4;
+  --cs-color-brand-ochre: #F4BA17;
+  --cs-color-surface-page: #17110C;
+  --cs-color-surface-panel: #211913;
+  --cs-color-surface-raised: #2C221A;
+  --cs-color-text-primary: #F3E9DC;
+  --cs-color-text-inverse: #17110C;
+  --cs-color-text-accent: #E9BE86;
+  --cs-color-text-muted: #A9917C;
+  --cs-color-semantic-success: #35A264;
+  --cs-color-semantic-danger: #E4756A;
+  --cs-color-semantic-warning: #D9A441;
+  --cs-color-semantic-info: #7BA6F5;
+  --cs-color-border-default: #3B2E24;
+  --cs-component-textfield-border-default: #55432F;
+  --cs-status-header-bg: #120D09;
+  --cs-status-header-fg: #F3E9DC;
+  --cs-status-on-fill: #17110C;
+  --cs-status-todo: #59452F;
+}
+
+/* ---- base ---------------------------------------------------------------- */
+* { box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+body {
+  margin: 0;
+  background: var(--cs-color-surface-page);
+  color: var(--cs-color-text-primary);
+  font-family: var(--cs-font-family-ui);
+  font-size: 15px;
+  line-height: var(--cs-font-lineHeight-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: var(--cs-color-text-accent); }
+button { font: inherit; color: inherit; }
+.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--cs-space-6); }
+.mono, .code { font-family: var(--cs-font-family-mono); }
+.muted { color: var(--cs-color-text-muted); }
+.skip { position: absolute; left: -9999px; }
+.skip:focus { left: var(--cs-space-4); top: var(--cs-space-2); z-index: var(--cs-depth-toast);
+  background: var(--cs-color-brand-ochre); color: var(--cs-status-on-ochre);
+  padding: var(--cs-space-2) var(--cs-space-3); border-radius: var(--cs-radius-md); }
+:focus-visible { outline: 2px solid var(--cs-color-brand-ochre); outline-offset: 2px; }
+
+/* ---- header -------------------------------------------------------------- */
+.hd { background: var(--cs-status-header-bg); color: var(--cs-status-header-fg);
+  border-bottom: 3px solid var(--cs-color-brand-ochre); }
+.hd-in { display: flex; align-items: center; justify-content: space-between; gap: var(--cs-space-6);
+  padding: var(--cs-space-5) var(--cs-space-6); flex-wrap: wrap; }
+.hd-id { display: flex; align-items: center; gap: var(--cs-space-4); }
+.hd-mark { width: 42px; height: 42px; flex: none; display: grid; place-items: center;
+  border-radius: 12px; background: var(--cs-color-brand-ochre); color: var(--cs-status-on-ochre);
+  font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 700; }
+.hd h1 { margin: 0; font-size: 24px; letter-spacing: .2px; line-height: var(--cs-font-lineHeight-heading); }
+.hd-sub { margin: 2px 0 0; font-size: 13.5px; opacity: .8; }
+.hd-side { display: flex; align-items: center; gap: var(--cs-space-4); }
+.hd-meta { margin: 0; font-size: 12.5px; opacity: .75; text-align: right; }
+
+/* ---- buttons ------------------------------------------------------------- */
+.btn { border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel);
+  color: var(--cs-color-text-primary); border-radius: var(--cs-radius-md);
+  padding: 7px 12px; cursor: pointer; font-size: 13.5px; font-weight: 600; }
+.btn:hover { border-color: var(--cs-color-brand-ochre); }
+.btn.sm { padding: 5px 10px; font-size: 12.5px; }
+.hd .btn.ghost { background: transparent; border-color: var(--cs-status-ghost-border);
+  color: var(--cs-status-header-fg); width: 36px; height: 36px; padding: 0; }
+
+/* ---- deck ---------------------------------------------------------------- */
+.deck { margin: var(--cs-space-6) 0 var(--cs-space-4); display: grid; gap: var(--cs-space-4);
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
+.panel { background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default);
+  border-radius: 14px; padding: var(--cs-space-4) var(--cs-space-5); }
+.panel > h2 { margin: 0 0 var(--cs-space-3); font-size: 12px; text-transform: uppercase;
+  letter-spacing: .09em; color: var(--cs-color-text-muted); }
+.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--cs-space-3);
+  margin-bottom: var(--cs-space-4); }
+.kpi { text-align: left; border: 0; background: transparent; padding: 0; border-radius: var(--cs-radius-md); }
+button.kpi { cursor: pointer; }
+.kpi b { display: block; font-size: 24px; line-height: 1.15; }
+.kpi span { font-size: 12px; color: var(--cs-color-text-muted); }
+.kpi[data-on="1"] b, button.kpi:hover b { color: var(--cs-color-text-accent); }
+.bar-seg { height: 12px; border-radius: var(--cs-radius-full); background: var(--cs-color-surface-raised);
+  overflow: hidden; display: flex; }
+.bar-seg i { display: block; height: 100%; }
+.seg-done { background: var(--cs-color-semantic-success); }
+.seg-active { background: var(--cs-color-brand-ochre); }
+.seg-hold { background: var(--cs-color-semantic-danger); }
+.seg-todo { background: var(--cs-status-todo); }
+.legend { display: flex; gap: var(--cs-space-4); flex-wrap: wrap; margin-top: var(--cs-space-3);
+  font-size: 12.5px; color: var(--cs-color-text-muted); }
+.legend span { display: inline-flex; align-items: center; gap: 6px; }
+.dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; }
+.spark { display: flex; align-items: flex-end; gap: 6px; height: 78px; margin-top: var(--cs-space-2); }
+.spark a { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
+  gap: 4px; text-decoration: none; color: var(--cs-color-text-muted); font-size: 10.5px; }
+.spark i { display: block; width: 100%; background: var(--cs-color-brand-ochre);
+  border-radius: 4px 4px 0 0; min-height: 3px; }
+.spark a:hover i { background: var(--cs-color-text-accent); }
+.spark b { font-size: 11px; color: var(--cs-color-text-primary); font-weight: 600; }
+
+/* ---- now shipping -------------------------------------------------------- */
+.now { background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-brand-ochre);
+  border-left: 4px solid var(--cs-color-brand-ochre); border-radius: 12px;
+  padding: var(--cs-space-4) var(--cs-space-5); margin-bottom: var(--cs-space-4); }
+.now h2 { margin: 0 0 var(--cs-space-2); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
+
+/* ---- command bar --------------------------------------------------------- */
+.bar { position: sticky; top: 0; z-index: var(--cs-depth-nav);
+  background: var(--cs-color-surface-page);
+  border: 1px solid var(--cs-color-border-default); border-radius: 14px;
+  padding: var(--cs-space-3) var(--cs-space-4); margin-bottom: var(--cs-space-4); }
+.bar-top { display: flex; gap: var(--cs-space-3); align-items: center; flex-wrap: wrap; }
+.bar-bot { display: flex; gap: var(--cs-space-2); align-items: center; flex-wrap: wrap;
+  margin-top: var(--cs-space-3); }
+.srch { flex: 1 1 340px; display: flex; align-items: center; gap: var(--cs-space-2);
+  background: var(--cs-color-surface-panel); border: 1px solid var(--cs-component-textfield-border-default);
+  border-radius: var(--cs-radius-full); padding: 0 var(--cs-space-4); min-height: 42px; }
+.srch:focus-within { border-color: var(--cs-color-brand-ochre); }
+.srch .ic { color: var(--cs-color-text-muted); font-size: 17px; }
+.srch input { flex: 1; border: 0; background: transparent; outline: 0; min-width: 0;
+  color: var(--cs-color-text-primary); font-size: 14px; }
+.lenses { display: flex; gap: 4px; background: var(--cs-color-surface-raised);
+  border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-full); padding: 3px; }
+.ln { border: 0; background: transparent; border-radius: var(--cs-radius-full);
+  padding: 7px 15px; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--cs-color-text-accent); }
+.ln[aria-selected="true"] { background: var(--cs-color-brand-umber); color: var(--cs-color-text-inverse); }
+[data-theme="dark"] .ln[aria-selected="true"] { background: var(--cs-color-brand-ochre);
+  color: var(--cs-status-on-ochre); }
+.facet { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--cs-color-text-muted); }
+.facet select { background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary);
+  border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-sm);
+  padding: 5px 8px; font-family: inherit; font-size: 13px; max-width: 190px; }
+.cnt { margin-left: auto; font-size: 12.5px; color: var(--cs-color-text-muted); }
+.chipbar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--cs-space-2); }
+.fchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
+  background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default);
+  border-radius: var(--cs-radius-full); padding: 3px 6px 3px 10px; }
+.fchip button { border: 0; background: transparent; cursor: pointer; color: var(--cs-color-text-muted);
+  line-height: 1; padding: 2px 4px; border-radius: var(--cs-radius-full); }
+.fchip button:hover { color: var(--cs-color-semantic-danger); }
+
+/* ---- task chips and pills -------------------------------------------------- */
+.task-chips { display: flex; flex-wrap: wrap; gap: 5px; }
+.chip { font-family: var(--cs-font-family-mono); font-size: 11px; font-weight: 600;
+  padding: 3px 7px; border-radius: 6px; cursor: pointer; display: inline-block;
+  background: var(--cs-color-surface-raised); color: var(--cs-color-text-accent);
+  border: 1px solid var(--cs-color-border-default); }
+.chip:hover { border-color: var(--cs-color-brand-ochre); }
+.chip.done { background: var(--cs-color-semantic-success); color: var(--cs-status-on-fill);
+  border-color: transparent; }
+.chip.active { background: var(--cs-color-brand-ochre); color: var(--cs-status-on-ochre);
+  border-color: transparent; }
+.chip.hold { background: var(--cs-color-semantic-danger); color: var(--cs-status-on-fill);
+  border-color: transparent; }
+.chip.ghost { opacity: .6; border-style: dashed; }
+.pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px;
+  border-radius: var(--cs-radius-full); text-transform: uppercase; letter-spacing: .04em; }
+.pill.done { background: var(--cs-color-semantic-success); color: var(--cs-status-on-fill); }
+.pill.active { background: var(--cs-color-brand-ochre); color: var(--cs-status-on-ochre); }
+.pill.hold { background: var(--cs-color-semantic-danger); color: var(--cs-status-on-fill); }
+.pill.todo { background: var(--cs-color-border-default); color: var(--cs-color-text-accent); }
+.pri { font-size: 11px; font-weight: 700; letter-spacing: .04em; }
+/* task@1 FM-105 priority is p0..p3. The MoSCoW classes are kept so a repo that has
+   not run the 2026-07-14 schema migration still renders coloured priorities rather
+   than silently falling back to unstyled text. */
+.pri.p0, .pri.MUST { color: var(--cs-color-semantic-danger); }
+.pri.p1, .pri.SHOULD { color: var(--cs-color-semantic-warning); }
+.pri.p2, .pri.p3, .pri.COULD, .pri.MAY { color: var(--cs-color-text-muted); }
+
+/* ---- lens: board --------------------------------------------------------- */
+.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--cs-space-4); }
+.card { background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default);
+  border-radius: 14px; padding: var(--cs-space-4); }
+.card.hot { border-color: var(--cs-color-brand-ochre); }
+.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cs-space-2); }
+.card-h h3 { margin: 0; font-size: 15px; line-height: var(--cs-font-lineHeight-heading); }
+.card-h h3 .k { color: var(--cs-color-brand-umber); font-weight: 700; }
+.card-h .pct { font-size: 12.5px; color: var(--cs-color-text-muted); white-space: nowrap; }
+.minibar { height: 6px; border-radius: var(--cs-radius-full); background: var(--cs-color-surface-raised);
+  overflow: hidden; display: flex; margin: var(--cs-space-2) 0 var(--cs-space-3); }
+.minibar i { display: block; height: 100%; }
+
+/* ---- lens: table --------------------------------------------------------- */
+.tbl-wrap { border: 1px solid var(--cs-color-border-default); border-radius: 14px; overflow: hidden;
+  background: var(--cs-color-surface-panel); }
+table { border-collapse: collapse; width: 100%; font-size: 13px; }
+th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--cs-color-border-default);
+  vertical-align: top; }
+thead th { position: sticky; top: 78px; z-index: 1; background: var(--cs-color-surface-raised);
+  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--cs-color-text-muted);
+  cursor: pointer; white-space: nowrap; }
+thead th[aria-sort="ascending"]::after { content: " \2191"; }
+thead th[aria-sort="descending"]::after { content: " \2193"; }
+tbody tr { cursor: pointer; }
+tbody tr:hover { background: var(--cs-color-surface-raised); }
+tbody tr:last-child td { border-bottom: 0; }
+td.t { max-width: 520px; }
+
+/* ---- lens: releases ------------------------------------------------------ */
+.rels { display: grid; gap: var(--cs-space-3); }
+.rel { background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default);
+  border-radius: 14px; padding: var(--cs-space-4) var(--cs-space-5); display: grid;
+  grid-template-columns: 30px 1fr; gap: var(--cs-space-4); }
+.rel.now { border-color: var(--cs-color-brand-ochre); }
+.rel .tick { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
+  font-size: 12px; font-weight: 700; color: var(--cs-status-on-fill);
+  background: var(--cs-color-semantic-success); }
+.rel.now .tick { background: var(--cs-color-brand-ochre); color: var(--cs-status-on-ochre); }
+.rel-h { display: flex; align-items: baseline; gap: var(--cs-space-3); flex-wrap: wrap; }
+.rel-h b { font-size: 17px; font-family: var(--cs-font-family-mono); }
+.rel-sec { margin-top: var(--cs-space-3); }
+.rel-sec h4 { margin: 0 0 var(--cs-space-1); font-size: 11.5px; text-transform: uppercase;
+  letter-spacing: .07em; color: var(--cs-color-text-muted); }
+.rel-sec ul { margin: 0; padding-left: 18px; font-size: 13.5px; }
+.rel-sec li { margin: 3px 0; }
+.rel details { margin-top: var(--cs-space-3); }
+.rel summary { cursor: pointer; font-size: 12.5px; color: var(--cs-color-text-muted); }
+.rel .task-chips { margin-top: var(--cs-space-2); }
+.relnote { font-size: 12.5px; color: var(--cs-color-text-muted); margin: var(--cs-space-2) 0 0; }
+
+/* ---- drawer -------------------------------------------------------------- */
+.scrim { position: fixed; inset: 0; background: var(--cs-status-scrim); z-index: var(--cs-depth-modal); }
+.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100%);
+  z-index: calc(var(--cs-depth-modal) + 1); background: var(--cs-color-surface-page);
+  border-left: 1px solid var(--cs-color-border-default);
+  box-shadow: -18px 0 48px var(--cs-status-shadow); display: flex; flex-direction: column; }
+.dw-h { padding: var(--cs-space-4) var(--cs-space-5); border-bottom: 1px solid var(--cs-color-border-default);
+  background: var(--cs-color-surface-panel); }
+.dw-h .row { display: flex; align-items: center; gap: var(--cs-space-2); flex-wrap: wrap; }
+.dw-h h2 { margin: var(--cs-space-2) 0 0; font-size: 19px; line-height: var(--cs-font-lineHeight-heading); }
+.dw-x { margin-left: auto; border: 0; background: transparent; cursor: pointer; font-size: 22px;
+  line-height: 1; color: var(--cs-color-text-muted); padding: 2px 6px; }
+.dw-x:hover { color: var(--cs-color-semantic-danger); }
+.dw-tabs { display: flex; gap: 4px; padding: 0 var(--cs-space-5); background: var(--cs-color-surface-panel);
+  border-bottom: 1px solid var(--cs-color-border-default); }
+.dw-tab { border: 0; background: transparent; cursor: pointer; padding: 9px 12px; font-size: 13.5px;
+  font-weight: 600; color: var(--cs-color-text-muted); border-bottom: 2px solid transparent; }
+.dw-tab[aria-selected="true"] { color: var(--cs-color-text-primary);
+  border-bottom-color: var(--cs-color-brand-ochre); }
+.dw-b { overflow: auto; padding: var(--cs-space-5); flex: 1; }
+.meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--cs-space-3);
+  margin: 0 0 var(--cs-space-4); }
+.meta div { min-width: 0; }
+.meta dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--cs-color-text-muted); }
+.meta dd { margin: 2px 0 0; font-size: 13.5px; word-break: break-word; }
+.sect { margin-top: var(--cs-space-5); }
+.sect h3 { margin: 0 0 var(--cs-space-2); font-size: 12px; text-transform: uppercase;
+  letter-spacing: .08em; color: var(--cs-color-text-muted); }
+.tasks { margin: 0; padding-left: 18px; font-size: 13.5px; }
+.tasks li { margin: 3px 0; }
+.risk { background: var(--cs-color-surface-raised); border-left: 3px solid var(--cs-color-semantic-danger);
+  border-radius: var(--cs-radius-md); padding: var(--cs-space-3) var(--cs-space-4); font-size: 13.5px; }
+.rel-links { display: grid; gap: var(--cs-space-4); }
+.rel-links h3 { margin: 0 0 var(--cs-space-2); font-size: 12px; text-transform: uppercase;
+  letter-spacing: .08em; color: var(--cs-color-text-muted); }
+.load { color: var(--cs-color-text-muted); font-size: 13.5px; }
+.toc { position: sticky; top: 0; background: var(--cs-color-surface-page); padding-bottom: var(--cs-space-2);
+  margin-bottom: var(--cs-space-3); border-bottom: 1px solid var(--cs-color-border-default);
+  display: flex; gap: 6px; flex-wrap: wrap; }
+.toc a { font-size: 11.5px; text-decoration: none; border: 1px solid var(--cs-color-border-default);
+  border-radius: var(--cs-radius-full); padding: 3px 9px; color: var(--cs-color-text-accent); }
+.toc a:hover { border-color: var(--cs-color-brand-ochre); }
+
+/* ---- the task spec, rendered ----------------------------------------------- */
+.spec { font-size: 14px; }
+.spec h1, .spec h2 { font-size: 16px; margin: var(--cs-space-5) 0 var(--cs-space-2);
+  padding-bottom: 4px; border-bottom: 1px solid var(--cs-color-border-default); }
+.spec h3 { font-size: 14px; margin: var(--cs-space-4) 0 var(--cs-space-1); }
+.spec p, .spec li { line-height: 1.6; }
+.spec pre { background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default);
+  border-radius: var(--cs-radius-md); padding: var(--cs-space-3); overflow: auto; font-size: 12.5px; }
+.spec code { font-family: var(--cs-font-family-mono); font-size: 12.5px;
+  background: var(--cs-color-surface-raised); padding: 1px 5px; border-radius: var(--cs-radius-sm); }
+.spec pre code { background: transparent; padding: 0; }
+.spec table { font-size: 12.5px; margin: var(--cs-space-3) 0; }
+.spec th, .spec td { border: 1px solid var(--cs-color-border-default); }
+.spec blockquote { margin: var(--cs-space-3) 0; padding-left: var(--cs-space-4);
+  border-left: 3px solid var(--cs-color-brand-ochre); color: var(--cs-color-text-muted); }
+.spec img { max-width: 100%; }
+
+/* ---- misc ---------------------------------------------------------------- */
+.empty { text-align: center; color: var(--cs-color-text-muted); padding: var(--cs-space-16) 0; }
+.groupq { margin: var(--cs-space-5) 0 var(--cs-space-3); font-size: 12px; text-transform: uppercase;
+  letter-spacing: .08em; color: var(--cs-color-text-muted); }
+.nojs { background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default);
+  border-radius: 14px; padding: var(--cs-space-4); }
+.ft { margin: var(--cs-space-12) 0 var(--cs-space-16); text-align: center; font-size: 12px;
+  color: var(--cs-color-text-muted); }
+[hidden] { display: none !important; }
+
+@media (max-width: 900px) {
+  .deck { grid-template-columns: 1fr; }
+  .hd-meta { text-align: left; }
+  thead th { top: 0; }
+}
+@media print {
+  .bar, .drawer, .scrim, .hd-side { display: none !important; }
+}