editorzero — Meridian Zero

FRAME / APPROACH - Rendered as the live application frame, not a gallery card: I drop the design-01 `.screen`/`.screen-tab` wrapper and override `.dashboard-viewport` to max-width:none, padding:0, min-height:100dvh so `.win` (248px + 1fr) fills the viewport edge-to-edge. Sidebar is sticky full-height; main column scrolls independently on desktop. Composition follows the canonical reference order (statgrid -> cols2 -> spaces) but denser and more real. DENSITY ADDED OVER REFERENCE - All 4 stat cards carry a cold signal (sparkbar or avatar stack), matching the brief's "4-up statgrid with cold sparkbars." Stat 3 = Active editors incl. agents: an .editors-stack of 3 human squares + 2 notched-cyan agents with a "3 AI" split and a live cyan dot; Stat 4 = Pending suggestions (11, agent-ink) sourced from 3 agents. - Recent-docs .tt extended to 6 rows + a Status column using .status-tag (st-pub/st-draft/st-rev); .editors-stack mixes human + notched agent avatars + AI chips. - Activity ledger extended to 7 entries; human rows use .rail.u (ultramarine), agent rows .rail.ag (cyan) with .ev.ag cyan capability codes (doc.suggest/doc.update). Live AUDIT chip + footer link to the full audit log (every-mutation-one-entry model). - Spaces grid filled to all 6 (reference had 3), 3-up on desktop. HUMANS + AGENTS AS PEERS (throughout) - Human = square ultramarine .av--u/--u2/--u3; agent = notched cyan .av--agent everywhere (stat stack, table, spaces, sidebar). Sidebar "Agents · live" roster lists 4 principals with role scope (editor/author/r-only/idle) and live cyan .dot--agent. Cyan is reserved exclusively for agents, the system's second cold signal. MOBILE / PWA - The base sheet only HIDES .side at <=1120px, so I add navigation back two ways: (1) off-canvas left drawer — .dashboard-side becomes position:fixed; translateX(-100%), opened via .dashboard-shell.is-open (toggled by the .dashboard-burger in the bar) with a dimming .dashboard-scrim; (2) a fixed 5-slot .dashboard-tabbar bottom tab bar <=640px (Overview/Docs/New/Spaces/Agents) with the center "New" as ultramarine primary and an agent tab in cyan. Tab targets >=56px tall; burger sits in a 44px+ row. env(safe-area-inset-bottom) padding for notched phones; body adds bottom padding so content clears the bar. On phone the table drops the Status column + path/label sublines and the stat grid stacks into a single-column ledger — no horizontal scroll. JS contract (static markup here): toggle `is-open` on .dashboard-shell, flip the burger's aria-expanded, and the `hidden` attr on .dashboard-scrim. THEMING / TOKEN PURITY - Zero hard-coded hex in the CSS — every colour is a token (--paper/--surface/--ink*/--steel*/--hair*/--ultra*/--agent*/--ok). Structural metrics use --rule/--rule-2/--radius/--radius-chip; remaining px are layout geometry (widths, clamps, drawer size), not themeable colour. A curated or user theme is just a :root override; this screen inherits it untouched. (Inline styles in the HTML reference tokens too, e.g. color:var(--agent-ink).) ACCESSIBILITY - Contrast: agent text uses --agent-ink (#02646d) not --agent; "co-editing now"/pending lines pair --agent-ink/--ok with the dot as decoration. No standalone body copy on --steel-2. st-pub keeps green text at the darker --ok. - Reduced motion: a prefers-reduced-motion block kills all transitions/animations incl. the .live pulse and the drawer slide. - Semantics: nav landmarks with aria-label, aria-current="page", a real input type=search with aria-label, aria-controls/aria-expanded on the burger, decorative glyphs/dots aria-hidden. Square ultramarine focus-visible ring on every interactive element (links, buttons, [tabindex], tab bar). NEW CLASSES (all dashboard- prefixed) - Layout: dashboard-viewport, dashboard-shell, dashboard-side, dashboard-main, dashboard-bar, dashboard-body, dashboard-page-h, dashboard-cols2, dashboard-statgrid, dashboard-spaces-sec, dashboard-spaces, dashboard-sec-h, dashboard-credit. - Bits: dashboard-agents-h, dashboard-agents, dashboard-agents-ct, dashboard-agent-idle, dashboard-agents-active, dashboard-headchips, dashboard-v-split, dashboard-stack-row, dashboard-stack-more, dashboard-search, dashboard-export, dashboard-tt-wrap, dashboard-tt, dashboard-ledger, dashboard-ledger-foot. - Mobile chrome: dashboard-burger, dashboard-scrim, dashboard-tabbar, dashboard-tab-new, dashboard-tab-agent. DEVIATIONS - Replaced the gallery .screen-tab coordinate band with the real app .bar and added the editorzero logotype lockup to the sidebar top (reference omitted it on the dashboard; a standalone frame wants it). Used 100dvh alongside 100vh for mobile browser chrome. The .spaces base rule drops its bottom border for stacking, so dashboard-spaces re-adds it and recomputes per-child right borders at the 2-up/1-up breakpoints.

Composition: full app frame via `.win` (248px `.side` + `.main`). Sidebar reuses `.nav` with Spaces active (`a.on` ultra left-bar) and the live `Agents` nav so agents are present as peers in the chrome. Grid reuses the system `.spaces`/`.sp`/`.editors-stack`/`.bar-tip` atoms; all new classes are `spaces-` prefixed. Six cards as specced — Engineering, Product, Design, Company Wiki, Customer Docs (published), Sandbox — plus a 7th "New space" CTA card so the primary action lives in the grid too (header + mobile-FAB also carry it). Every member stack mixes humans (square `.av--u/u2/u3`) and agents (notched `.av--agent`), with a `+N` overflow chip; cards show doc count, member count (humans+agents), and a mono last-active with a live `.dot--agent` where an agent is currently working. Published/public space (Customer Docs) is made distinct three ways without leaving the token system: `--agent-wash` fill, a permanent left `--ok` accent bar (inset box-shadow, so it reads published even at rest, unlike the hover-only `.bar-tip`), an `.st-pub` "Published" status-tag, and a public-URL line (`docs.northwind.io` + Visit ↗) in agent-ink — signalling the open reader surface and that an agent is indexing it. Theming/tokens: zero hard-coded hex. Every colour, hairline, and the dashed "new" card hatch reference Meridian Zero custom properties (`--agent-wash`, `--ok`, `--ultra`, `--hair`, `--surface-2`, etc.), so a theme override of `:root` restyles the whole screen. Mobile/PWA: the shared sheet hides `.side` at ≤1120px, so I add a sticky bottom **tab bar** (`.spaces-mtab`: Home/Docs/Spaces/+FAB/Agents/You) with a center ink FAB carrying the crosshair mark for "New space", an active ultra top-bar, a cyan agents tab, and the user's square avatar. Grid steps 3→2→1 col with interior border fix-ups at each breakpoint; ≤640px stacks cards, hides the redundant desktop search + ghost export (action preserved via header btn + FAB), and keeps CTAs ≥36–44px tall. At ≤380px tab labels drop to icon-only. `prefers-reduced-motion` disables the tip-bar slide, card transitions, and the live pulse. A11y: card is an `<a>` with `:focus-visible` ultra outline; status/active text uses AA tokens (`--ok` on `--surface`/wash, `--agent-ink`, `--steel` at ≥9.5px mono on light). Deviation: `.spaces-grid` re-declares the `:nth-child` border logic because the base `.spaces` is hard-coded to a 3-up rhythm and I add a 7th card + 2-up/1-up breakpoints — same hairline language, just re-resolved per column count.

PATTERN SOURCE: composed against the canonical mock's SCR.B (design-01-meridian-zero.html, lines 740-854) and the live-agent sidebar pattern (lines 615-620). Reuses .side/.top/.ws/.tree(.row/.ind/.ind2)/.nav-h, .bar/.crumb/.search, .page-h, .toolbar2/.seg/.filt, .tt(.doc/.ord/.nm/.pth/.who/.lbl/.when), .editors-stack, .status-tag(st-pub/st-draft/st-rev), .av--u/--u2/--u3/--agent, .dot--agent.live, .chip--ghost, .btn variants. TOKEN PURITY: zero hard-coded hex in the screen CSS — every colour references a token (--ultra/--ultra-ink/--ultra-wash/--ultra-edge for human+selection, --agent/--agent-ink/--agent-wash/--agent-edge for the agent/live signal, --steel/--ink-* neutrals, --warn-ink for the destructive Trash action, --hair* for rules). Spacing/sizes use --u-derived literals consistent with the sheet and --rule/--rule-2/--radius/--radius-chip metrics. A new theme is still a pure :root override; nothing here defeats it. The only literal is the #fff knockout glyph inside the cobalt/agent checkmark + new-button, matching the sheet's own .av/.btn--ultra convention (white-on-accent). HUMANS + AGENTS AS PEERS: human editors are square ultramarine .av--u/--u2/--u3; agents are notched cyan .av--agent throughout the editors-stack. The live row (ord 01) shows archivist editing now — pulsing .dot--agent.live in three places (sidebar "Agents · live", page sub-meta, and an inline .documents-liveflag on the title), a cyan ring on its avatar (.documents-avlive), an agent-wash row tint with an inset cyan edge bar, and "now" rendered in agent-ink. Agents appear as authors/editors in their own right (linter-bot owns a draft solo). BULK-SELECT: square cobalt checkboxes (.documents-check, appearance:none, token-built tick). A contextual .documents-bulkbar (cobalt wash + inset --ultra edge) carries Move/Set-status/Export/Trash + a select-all and Clear; selected rows get an --ultra-wash tint and inset cobalt edge via :has(:checked) so the selection state reads without JS. Header checkbox = select-all. ACCESSIBILITY: search is a real <input type=search> with aria-label; breadcrumb/treenav/tablists carry aria roles + aria-current; every checkbox + icon-button has an aria-label; decorative glyphs/dots are aria-hidden. Status colours use the sheet's AA-tuned st-* tokens; agent text uses --agent-ink (AA on light), human/selection text --ultra-ink; the destructive action uses --warn-ink (not the small green) for AA. Focus-visible ring on checkboxes. All motion (live pulse, drawer slide) is wrapped in prefers-reduced-motion:reduce. MOBILE / PWA: the shared sheet hides .side at <=1120 — I re-add a hamburger in the bar that opens .side as a CSS-only off-canvas drawer (:target, no JS). At <=640 the <table> repaints into stacked cards (thead visually hidden but kept for semantics; checkbox floats into a 44px left gutter; Updated/Size collapse onto a labelled meta line via ::before), filters scroll horizontally, and a fixed bottom tab bar (Docs/Spaces/New/Agents/More — Agents tab tinted cyan) provides primary nav. Touch targets are >=44px on all actions/pager/tabs; safe-area insets honoured; no horizontal page scroll. The frame fills the viewport edge-to-edge (100dvh) so it reads as the running app, not a centered demo card. NEW CLASSES (all documents- prefixed): -vp, -side(reuse), -burger, -searchfield, -sort/-sortdir, -bulkbar/-bulkall/-selcount/-bulkactions/-danger/-clearsel, -tablewrap/-tt/-cbcol/-check, -rowlive/-liveflag/-avlive/-whenlive, -livenote, -foot/-legend/-pager, -tabbar/-tab/-tab--new/-tabic/-tabic--agent. DEVIATIONS: (1) Added a Size column + leading checkbox column beyond the reference 5-col table, per the brief's richer spec; columns are Title, Status, Editors, Updated, Size. (2) Search is interactive rather than a static chip. (3) Board/Tree segmented control trimmed to List/Board (brief said list/board toggle). (4) Selection visuals rely on :has() (supported in all current evergreen + WebKit, fine for a PWA); a JS-driven class toggle would be the production fallback for any non-:has engine.

Composition: built on .win--reader (248 + 1fr + 230) using the canonical reading idioms verbatim from design-01 (the mock the CSS was extracted from): .read-meta strip, .read-h1 with one ultra .z (the period), .read-lede, .doc-body (h2 with hairline top + .ord, .callout ultra, .codeblock, em-dash .ul), and the right .toc with active item + version trail. Went denser than the mock: 4 H2 sections, a provenance .kv block in the rail, and an inline document-end footer carrying the brand crosshair. Humans + agents as peers: meta strip shows an overlapping author stack (two square ultramarine humans + one notched-cyan agent), an explicit "Agent contributor" cell (archivist · AI), the sidebar Contributors list mixes ultra + cyan dots, the version trail attributes v13 to the agent (cyan dot), and the end-footer credits the agent's last edit with a notched avatar. Agent signal stays cyan throughout; human stays ultramarine. Theming/token purity: zero hard-coded hex in screen CSS — every colour/border/spacing references a Meridian Zero token (--ultra/--agent/--ink-*/--hair*/--surface*/--steel*/--rule/--radius). Reading-progress, tab bar, off-canvas panel, footer all token-driven, so a theme override of :root restyles them for free. Mobile / PWA: shared sheet hides .side/.toc and stacks the grid at <=1120px. I added (1) a hamburger (.reading-menu-btn) that opens the sidebar as a pure-CSS off-canvas drawer via :target (#side would be the anchor target — wire id="side" on the aside at integration; transform-based, reduced-motion-safe); (2) a phone bottom tab bar (Doc / Contents / Versions / Edit) shown only <=640px with 56px targets; (3) TOC + versions resurface as a :target bottom sheet above the tab bar (Contents/Versions tabs link to #reading-toc / its anchor at integration). env(safe-area-inset-bottom) padding keeps the installed PWA clear of the iOS home indicator; sticky top bar + sticky progress hairline; body bottom-padding clears the fixed tab bar; no horizontal scroll. Phone body steps to 15px and drops the 66ch measure cap for comfortable column width. Accessibility: body/headings use --ink-1/--ink for AA; mono labels use --steel (not --steel-2) for the readable .read-meta values; --steel-2 reserved for non-essential ordinals/keys. Published status uses the .st-pub token pair (darker --ok-adjacent border/bg from the sheet, not raw --ok on white). All animation (drawer slide, progress fill) wrapped in prefers-reduced-motion: reduce. New classes (all "reading-" prefixed): reading-win, reading-bar, reading-bar-actions, reading-menu-btn, reading-progress, reading-eyebrow, reading-stack, reading-plusone, reading-foot(+-mark/-tx), reading-toc, reading-vtag, reading-vmore, reading-kv, reading-hide-sm, reading-tabbar, reading-tab(+-ic/-lbl). Deviations: the off-canvas drawer and bottom-sheet rely on :target anchors — I left the trigger markup (hamburger button, tab buttons with data-target) in place but the id targets (e.g. id="side", id on .reading-toc) should be set at integration so the CSS :target rules fire; layout/visuals are fully specified and degrade safely (drawer simply stays off-canvas, tab bar still navigates) without JS.

Verified by rendering the fragment + meridian-zero.css in headless Chromium at 320/360/390/414/640/768/1024/1440px — zero horizontal overflow at every width; desktop, tablet (collapsed-rail), phone, and phone-with-drawer+sheet states all inspected visually. STRUCTURE (matches the canonical design-01 editor mock, densified): - Full-bleed app frame: .editor-vp overrides .viewport (max-width:none, padding:2u) so the .win--editor 3-zone shell fills the viewport edge-to-edge and runs full height (100dvh). - Left .side: workspace switcher, collection .tree (indented children + version counts), live co-editors (human ultra dot / agent cyan live dot / idle). Centre .main: bar (crumb + "1 SUGGESTION" + Share) → .presence (human ultra .pchip + agent cyan .pchip "archivist · editing" + Synced/CRDT save status) → .fmtbar (offset shadow, groups + cyan "✦ ASK AGENT") → .edcanvas. Right .erail: .kv Properties + .chg tracked-changes ledger (pending cyan / live / done) + Accept-all + agent scope-bar. - Signature beats: .ed-h1 with ultra .z period; human .sel-u + .caret-u; agent .agent-caret with floating cyan .flag + .agent-typing highlight; open .slash menu (blocks + cyan "Ask agent" items). TRACKED SUGGESTION (ADR 0032 — inline marks are primary, card is reviewer): - Inline .sugg-del (strikethrough) + .sugg-ins (cyan underline) ARE the model. - Added a left-gutter quick control (.editor-gutter / .editor-gbtn--acc/--rej) aligned to the marked line, wired by aria-label to the same SG·01 suggestion as the margin .sugg-card, which carries the full diff + rationale + Accept/Reject. Hover/focus on the block links the inline insertion to its control via an extra ring. On <=1120px the gutter relocates from the margin to an inline labelled "ACCEPT / REJECT" row above the paragraph (no margin to live in once rails collapse). MOBILE / PWA: - <=1120px: sidebar becomes an off-canvas drawer (.editor-side--open) over a scrim, toggled by the .editor-drawer-btn (☰). Shared sheet already collapses the rails + inlines the sugg-card. - <=640px: desktop .fmtbar is replaced by a fixed bottom FORMAT bar (.editor-mbar) sitting above a bottom TAB bar (.editor-tabbar: Docs/Edit/Changes[cyan badge]/Agents). Suggestion review is a bottom SHEET (.editor-sheet, role=dialog, slide-up) showing the diff + rationale + full-width Accept/Reject — the "accept a suggestion on a phone" flow. Crumb truncates with ellipsis so the action cluster never overflows; the absolutely-positioned agent .flag is width-clamped + the canvas is overflow-x:clip so its decorative label can't widen the page. All touch targets >=44px (gutter buttons, sheet buttons, tab items, mbar buttons). env(safe-area-inset-bottom) padding on the fixed bottom bars for notched devices. THEMING / TOKEN PURITY: every color references a Meridian Zero token. The only literals are (a) #02363b for ink-on-cyan fills (Accept hovers, mobile AI button, tab badge) — the exact value the shared stylesheet itself uses on the cyan --agent fill (.agent-caret .flag, .sugg-card .sf button.acc), as there is no token for "ink on agent"; and (b) rgba(11,14,20,…) for the drawer scrim/shadow, which is --ink (#0b0e14) alpha-composited — the same pattern the shared sheet uses for .sel-u (rgba of --ultra). Spacing uses the --u scale (calc(var(--u)*N)) for the frame padding, bottom-bar offset, and tab heights. ACCESSIBILITY: text on light meets AA (agent text uses --agent-ink, not the lighter --agent; ok-green uses --ok). Slash menu has role=listbox/option + aria-selected; gutter is a role=group with per-action aria-labels; sheet is role=dialog aria-modal; drawer button has aria-expanded; both bottom navs/toolbars are labelled. ALL motion (added transitions + the shared sheet's .live/blink/pulse keyframes that surface here) is disabled under prefers-reduced-motion. NEW CLASSES (all "editor-" prefixed): editor-vp, editor-screen, editor-win, editor-main, editor-body, editor-canvas, editor-bar, editor-baractions, editor-suggcount, editor-presence, editor-fmtbar, editor-drawer-btn, editor-hide-sm, editor-suggblock, editor-gutter, editor-gbtn(+--acc/--rej), editor-suggcard, editor-emptyblock, editor-slash, editor-erail, editor-side(+--open), editor-scrim, editor-mbar, editor-mbtn(+--ai/--add), editor-sheet(+--open) and its -grab/-head/-title/-body/-qt/-why/-foot/-acc/-rej parts, editor-tabbar, editor-tab(+--on/--chg), editor-tab-ic, editor-tab-badge. DEVIATIONS: (1) Added the gutter quick-control the brief asked for that the canonical mock lacked (mock had only the card). (2) On phone both the inline gutter control and the inlined card show Accept/Reject — intentional: gutter = per-line quick action, card/sheet = detailed reviewer for the same suggestion. (3) JS is omitted (static composition); the --open / drawer-toggle / sheet-open classes are the documented hooks a behaviour layer would toggle.

LAYOUT - Two layers as specced. Behind: a `.win--full` search-results page — top query bar (live mono input + ⌘K hint + an "Agent results" quick toggle), a 236px facets sidebar, and a results column. Front: a centered cmdk palette over an ink scrim. - Facets sidebar = Type / Space / Author / Updated, with active-filter chips at top. Author facet lists humans (square ultra avatars) AND agents (notched cyan avatars + "agent" chip) as peer principals; counts are tabular. - Result rows carry ranked ordinals, status tags (reusing `.status-tag`/`.st-*`), mono breadcrumb path, snippet with ULTRA `<mark>` highlights, and a byline showing the human/agent author plus per-result agent-edit chips and an overlapping `.editors-stack`. COMMAND PALETTE - Centered, offset hard shadow (`10px 10px 0 var(--surface-sunk)`), 1.5px ink border, mono throughout — matching the `.slash`/`.fmtbar` engineering-popover idiom already in the system. - Groups: Documents, Spaces, People & Agents, Actions (Create document ⌘N, Invite member/agent ⌘I, and "Ask an agent" ⌘↵ in cyan). The selected row is ink-inverse with an ultra left bar; its mark/sub/chips all invert. Key-chip hints (`.search-kchip`) on rows + a footer hint bar; the AI action's chip uses the agent token. - Live results filter on a partial query ("determ") with highlighted matches; an agent presence dot pulses on Curie. THEMING / TOKEN PURITY - No hard-coded hex except the `#fff` checkmark border on the ultra-filled checkbox (a fixed contrast mark on the accent, matching the system's own `color:#fff` on `.btn--ultra`/`.av`). Every other colour, border, and shadow references a Meridian Zero token. Spacing/sizing use px on the existing system's px scale (the SSOT itself uses literal px in components); structural radii inherit the global 0px. - Scrim uses `color-mix(in srgb, var(--ink) 46%, transparent)` so even the overlay dim derives from a token — a custom theme that overrides `--ink` recolours the scrim for free. A theme is still just a `:root` override. ACCESSIBILITY - AA text: bylines/sub-text use `--steel`/`--ink-2` (not `--steel-2`) for body-size copy; `--steel-2` is reserved for ≤10px mono incidentals. Inverse rows use `--paper`/`--ultra-edge` on `--ink`. Status green stays in the `--ok` tag tokens. - Checkboxes are real `<input>`s (visually hidden, custom `.search-cb`) with `:focus-visible` ultra outline; dialog has `role="dialog" aria-modal`, selected row `aria-selected`, search landmark on the query field. - All transitions + `.live` pulse wrapped in `prefers-reduced-motion: reduce`. MOBILE / PWA - ≤1120px: facets reflow to a 2-up top strip above results (hairlines dropped). ≤760px: palette becomes a full-screen sheet (top:0, 100% h/w, no shadow/border), query field 16px to avoid iOS zoom, on-screen keyboard-hint footer hidden, palette rows ≥44px; a 5-slot bottom tab bar appears (Home/Docs/Search/Agents/You — Search active, ultra indicator, Agents tab carries a cyan dot, You shows the user's ultra avatar). ≤420px drops the rank ordinal to keep snippets full-width. No horizontal scroll at any width. NEW CLASSES (all `search-` prefixed) - Page: search-bar, search-field(-x), search-input, search-clear, search-k, search-only-ai, search-body, search-facets, search-facet-head, search-reset, search-active, search-fgroup, search-fg-h, search-opt, search-cb, search-ol, search-on, search-agtag, search-dates, search-date, search-results, search-res-head, search-count, search-q, search-sort, search-sortbtn, search-list, search-row, search-rank, search-rc, search-rtop, search-title, search-path, search-snip, search-meta, search-by, search-dot, search-rtag, search-more, search-page. - Palette: search-scrim, search-palette, search-pal-input, search-pal-x, search-pal-field, search-pal-scope, search-kchip(--ai), search-pal-body, search-grp, search-grp-h, search-item(--ai), search-it-ic(--sp/--act/--ai), search-it-tx, search-it-nm, search-it-sub, search-it-av, search-it-pav, search-ai-q, search-pal-foot, search-fhint(--right). - Mobile nav: search-tabbar, search-tab, search-tab-ic, search-tab-x, search-tab-av, search-tab-l. DEVIATIONS - Reused `.status-tag`, `.chip*`, `.av*`, `.editors-stack`, `.dot*`, `.kicker`, `.ord`, `.cross`, `.btn*`, `.hr`, `.logo` directly; only genuinely new structure got `search-` classes. - The screen is wrapped in `.screen` + `.screen-tab` (the engineering-drawing frame the system uses for each screen) so it reads as part of the same spec sheet; overlay/scrim/tabbar are positioned `absolute` within that `.screen` (relative) rather than `position:fixed`, so the fragment composes cleanly inside the preview gallery without escaping its panel.

COMPOSITION: Built on the canonical mock's Admin/Members structure (design-01-meridian-zero.html, SCR.E). Reuses shared chrome (.screen/.win/.side/.main/.bar/.body/.page-h), the locked admin atoms (.adm-tabs, .mtbl, .person, .kind/.kind-h/.kind-a, .role-sel, .scope-bar/i.on/i.onu), and shared atoms (.av/.av--u/.av--u2/.av--u3/.av--agent, .chip, .dot/.dot--ok/.dot--agent.live, .btn variants, .kicker, .ord, .hr, .logo, .toolbar2 .seg). No token is hard-coded — every color/size in the screen CSS references a :root custom property, so a theme is a pure :root override. PRINCIPALS AS PEERS: Humans and agents sit in ONE .mtbl. Human = square ultramarine .av--u/u2; agent = NOTCHED cyan .av--agent. Kind tag is .kind-h (ultra) vs .kind-a (cyan). Agent rows carry a faint --agent-wash fill + a 2px inset --agent left-edge so the cyan "second signal" is legible at a glance without re-coloring text. Agent specifics that make first-class status concrete: API key id + creator in the email slot, rate limit (e.g. 600/min) in the scope label, a live "writing…" last-active with a pulsing cyan dot, and a Revoked row (grayed notched avatar, dead scope-bar, steel inset) proving per-row token revocation. Role selects on agent rows are cyan-tinted via .members-role--ag (composes on .role-sel). Scope cell pairs the locked .scope-bar pips (i.onu = ultra for humans, i.on = cyan for agents) with a mono human-readable scope string (read·author·edit·admin) so the capability tiers are explicit. TABS: Primary .adm-tabs is Members / Teams / Invites / Roles per spec (with count pills, new class .members-tc). A secondary .members-sub strip (reusing .toolbar2 .seg) gives All/Humans/Agents + Team/Role/Status filter chips. Below the table, a Teams section with .members-teamgrid cards shows overlapping member avatars (humans + agents) and a humans/agents tally per team. RESPONSIVE / PWA: Shared sheet hides .side and stacks .win at <=1120px — I expose a hamburger (.members-menu) in the bar and add a fixed bottom tab bar (.members-tabbar) for phone primary nav, with env(safe-area-inset-bottom) for notched devices and .body padding-bottom to clear it. At <=880px the two heaviest columns (Teams, Last-active) drop. At <=640px the whole .mtbl reflows: thead is visually hidden, each <tr> becomes a bordered card, and every <td> renders its label from data-label — no horizontal scroll, ≥44px touch rows, role-sel ≥32px. Teams grid goes 4→2→1 col with correct hairline-border resets at each breakpoint. The agent wash + inset edge and the revoked styling are re-applied in the card layout so the peer-principal signal survives on mobile. ACCESSIBILITY: Text uses AA-safe tokens — status greens use --ok, agent text uses --agent-ink, invited uses --warn-ink (not raw --steel-2 for meaningful text). role/search/tablist/aria-current/aria-selected/aria-label added. All motion (the shared .live pulse + hover transitions) is disabled under prefers-reduced-motion. NEW CLASSES (all members- prefixed): members-acts, members-prov, members-tc, members-sub, members-filt, members-chip, members-tblwrap, members-teams, members-team, members-scope, members-scopelbl, members-role--ag, members-role--ro, members-when--ag, members-st (+ --active/--ag/--inv/--rev), members-agentrow, members-revoked, members-av--rev, members-foot, members-legend, members-keyu, members-keya, members-pager, members-teamgrid, members-tcard (+ -h/-b), members-tdot, members-tname, members-tcount, members-tmembers, members-more, members-tmeta, members-menu, members-tabbar, members-tbi. DEVIATIONS: The locked .mtbl is a real <table> (no reflow); rather than fork it I added data-label attributes + a 640px card-reflow layer, which is purely additive (desktop table markup unchanged). Added a status column and a teams-as-pills column beyond the base mock to satisfy the spec's "teams" + "status" requirements; both degrade gracefully on the responsive ladder.

SCREEN: Admin · Agents management (SCR.F). Composes the Meridian Zero chrome (.viewport → .screen → .win with .side + .main → .bar/.page-h/.body) and reuses .mtbl, .adm-tabs, .scope-bar, .role-sel, .kind/.kind-a, .statgrid/.stat/.spark, .chg ledger, .kv, .chip, .av--agent/.av--u, .dot, .btn. New work is namespaced agents-*. DATA MODEL (ADR 0016): every agent row carries the principal spine — name + agent-id (mono `agt_…`), owner human (square ultra avatar), auth method (masked API key `ez_sk_…`/`ez_at_…` + inline rotate; @better-auth/api-key vs agent-auth delegated), scopes via .scope-bar (read→author→editor→admin), per-principal rate limit (rateLimitMax/rateLimitTimeWindow) shown as current/max + a usage meter, last-active, status (active/revoked), and a per-row Revoke. One row is REVOKED (migrator) to show the terminal state: hatched row, struck key, dead meter, disabled action — and the detail copy spells out the revocation cascade (key invalidated, sync+MCP sessions closed, future enqueues fail, in-flight jobs keep their snapshot, owner session unaffected) straight from the ADR. DETAIL PANEL: right rail for the selected agent (archivist, row highlighted ultra). Sections — Principal (kind/owner/mode/workspace/created), Credential (masked key box with Copy + Rotate, "secret never displayed after issue"), Rate limit (config rows + large live usage meter + Adjust), Allowed capabilities (cyan chips; denied scopes struck/ghosted), Recent activity (.chg audit ledger incl. a rate.throttle entry), and a prominent red Danger zone Revoke. PEER VISIBILITY: agents are the cyan signal throughout — notched .av--agent avatars, cyan scope bars/meters/spark bars, cyan capability chips, cyan detail header; humans appear as square ultramarine .av--u owner avatars in every row and in the detail Owner field, keeping the human/agent peer pairing legible (each agent is owned by / delegated to a named human). THEMING / TOKEN PURITY: all structural colour references tokens (paper/surface/ink/steel/hair/ultra*/agent*/ok/warn*). The only literal hexes are the destructive-danger reds for the Revoke zone + hover, and the small green/amber status-pill backgrounds copied from the shared sheet's own .st-pub/.st-warn pattern (the palette has no red token and reuses literal pill backgrounds for ok/warn); everything else themeable flows from :root, so a custom theme overriding the globals restyles the screen. Meter fills, status text, scope bars, spark, chips all derive from agent/ultra/ok/warn tokens. ACCESSIBILITY: status/role text uses AA-safe inks (--ok green pill on its own wash, --agent-ink/--ultra-ink for cyan/blue text, never the light --steel-2 for meaningful copy). Meters expose role="meter" + aria-valuenow/min/max + aria-label; rotate/revoke/copy buttons have aria-labels; selected row has aria-selected; burger has aria-expanded. All transitions/animations are wrapped in prefers-reduced-motion: reduce (including the live nav-dot pulse). MOBILE / PWA: shared sheet collapses .side and the win to one column at ≤1120; I also collapse the table↔detail split to one column there and reveal a ☰ burger in the bar (the in-page Agents nav lives in .side which is hidden small). At ≤640 the .mtbl reflows from a wide grid into stacked cards (thead hidden; each cell labelled via ::before content:attr(data-l) — data-l is set on every td in the markup, e.g. "Owner", "Auth", "Rate · req/min"), tabs scroll horizontally, and a fixed bottom tab bar (Members/Spaces/Agents/Audit/Me) appears with ≥56px targets and env(safe-area-inset-bottom) for notched devices; viewport bottom padding (92px) keeps content clear. ≤380 drops stats to one column. No horizontal page scroll at any width (minmax(0,1fr) + min-width:0 on the table wrapper guard overflow). NEW CLASSES: agents-masthead/-mh-l/-mh-div/-mh-sub/-mh-coord, -ws-id, -navdot(+--rev), -crumb-x, -burger, -stats/-v-agent/-statdot(+--warn)/-sp-ag/-sp-tip/-d-rev, -tabs/-tab-add, -split, -tblwrap, -mtbl, -th-rate, -row(+--sel/--rev), -nm-rev/-av-rev, -owner/-owner-av/-owner-nm, -key/-key-val(+--dead)/-key-btn/-key-meta(+--rev), -role(+--agent/--dead)/-scope(+--dead), -rate(+--dead)/-rate-top/-rate-cur/-rate-max/-meter(+--lg)/-meter-fill(+--ag/--hot), -when-live/-when-rev, -status(+--active/--rev)/-status-dot/-status-x, -revoke(+--dead), -tbl-foot/-tbl-legend, -detail/-dh/-dh-av/-dh-id/-dh-nm/-dh-sub/-dh-status, -sec/-sec-h, -kv-owner/-kv-av, -keybox/-keybox-val/-keybox-acts/-keybox-btn(+--rot)/-key-fine, -ratecfg/-ratecfg-row/-ratecfg-k/-ratecfg-v/-rate-live/-rate-lbl/-rate-num/-cfg-edit(+--ag), -caps/-cap(+--off), -ledger/-st-warn/-ledger-all, -danger/-danger-h/-danger-x/-danger-t/-danger-d/-danger-btn, -credit-l/-credit-logo/-credit-mark/-credit-cross/-credit-ring/-credit-word, -tabbar/-tabbar-i/-tabbar-ic/-tabbar-av. DEVIATIONS: (1) Destructive red literals for the Revoke danger zone/hover + the green/amber status-pill background fills (the latter mirror the shared sheet's own .st-pub/.st-rev literal pattern) — recommend adding --danger/--danger-ink/--danger-wash tokens to :root so the Revoke zone becomes fully token-pure. (2) Added an agent-posture .statgrid strip (not in the brief) to make the screen dense and surface rate-limit-hit / revocation telemetry an admin needs at a glance — pure reuse of the dashboard .stat component.

STRUCTURE — Composes the canonical app chrome verbatim from design-01 (the mock the CSS was extracted from): `.screen` > `.screen-tab` (coordinate label SCR.F) + `.win` (248px sidebar + 1fr main). Reuses the admin `.side` nav with "Audit log" marked `.on`, `.bar` (breadcrumb + `.search` + export), `.page-h` with the `.z` ultra accent, and the `.credit` strip. No shared tokens/classes redefined — only `audit-`-prefixed additions, plus light reuse of `.seg` (from `.toolbar2`), `.chip`, `.kind`/`kind-h`/`kind-a`, `.av`/`av--u`/`av--agent`, `.btn`, `.cross`, `.dot`. LEDGER — A dense `audit-tbl` (its own table, modeled on `.mtbl` but tuned for ledger density) with the requested columns: # (seq, mono, steel-2), Timestamp UTC (mono, ms precision), Principal (human = square ultra `.av av--u/--u2/--u3`; agent = notched cyan `.av--agent`; plus a third SYSTEM principal `audit-av--sys` + `audit-kind-s` badge for scheduled/system mutations), Action (capability id in a mono ultra-wash pill — `doc.update`, `block.insert`, `member.invite`, `agent.token.revoke`, `doc.delete`, `doc.restore`, `agent.ratelimit.hit`, `workspace.snapshot`), Target (typed: kind kicker + name + mono path/id), Result (`✓ OK` / `⊘ DENIED` / `⤓ SOFT-DEL` / `⚠ THROTTLED` chips with optional mono sub-note), Trace-id (mono). Each `<tbody>` is one day group led by an `audit-day` separator band (weekday · ISO date · per-day count + agent share), giving the "engineering ledger grouped by day" feel. Sticky `thead`. The invariant ("1 mutation = 1 entry", append-only, hash-chained) is reinforced in the screen-tab meta, the page subline, the `audit-invariant` banner (SHA-256 · MERKLE), the sidebar `audit-integ` chain-verified panel (entries / gaps:0 / head seq), and the footer note (append-only · tamper-evident · 7y). PEER PRINCIPALS — Humans and agents appear interleaved throughout as co-equal actors. Agents (archivist, linter-bot, summariser) carry the notched cyan avatar + `kind-a` Agent badge and produce real agent-specific events (`doc.suggest`, a scope-denied `doc.read`, a rate-limit throttle), so agent-as-first-class-principal is legible in the audit trail, not just decoration. The principal filter has explicit Human/Agent/System facets (cyan notched dot vs ultra square dot in the seg). FILTERS / EXPORT — Filter rail (`audit-filters`) covers all requested axes: principal kind (segmented), action (`doc.*`), scope (space/doc), result, and a date range (`2026-05-30 → 2026-05-31`), with a reset. An `audit-meta` readout echoes active filters as chips + a live match count. Export is offered three ways (top bar CSV/JSON, page-header "Export ledger" primary, footer CSV/JSON) since export is called out as a first-class action. THEMING / TOKEN PURITY — Every color references a Meridian Zero token. The only literal hex values are the three already blessed by the shared sheet for the success/OK family (`#e4f4eb`, `#a7d9bf`) and a warn border (`#e6c98a`) derived to sit between `--warn-wash` and `--warn-ink` — matching the sheet's own pattern where `.st-pub`/`.chg .st.acc` hard-code the same OK greens (no OK-edge/OK-wash tokens exist). Everything else (ink ramp, steel, hairlines, ultra, agent, paper/surface ramp, warn-ink/wash) is a `var()`. A new theme = overriding `:root`; this screen inherits it automatically. ACCESSIBILITY — Load-bearing text uses AA-safe tokens: `--ink`/`--ink-1`/`--ink-2` for names/targets/timestamps, `--ultra-ink`/`--agent-ink`/`--ok`/`--warn-ink` (all documented AA-on-light) for accent/status text. `--steel-2` is confined to non-essential decoration (ordinals, target-kind kickers, separators), never sole-carrier copy. Result is conveyed by glyph + word + color (not color alone). Mobile touch targets are ≥44px (segmented filters, selects, footer/export buttons, 56px tab bar). A `prefers-reduced-motion` block defensively disables any inherited transition/animation incl. the shared `.live` pulse. MOBILE / PWA — Three breakpoints past the sheet's built-in 1120px sidebar collapse: ≤1120px tightens filter wrap + table padding; ≤900px hides the seq + trace columns (still present in CSV/JSON export) to protect the principal→action→target→result spine with no horizontal scroll; ≤640px reflows the table into stacked record cards (timestamp line, principal, action pill, typed target, result, with seq pinned top-right and trace inlined with a "trace" label), full-width stacked filter controls, and adds a fixed bottom tab bar (`audit-tabbar`, Home/Docs/Spaces/Audit/You with Audit active) — the off-canvas `.side` is hidden by the shared sheet, so the tab bar restores primary nav on phones. Body gets bottom padding so the fixed bar never occludes the last rows / export buttons. No horizontal scroll at any width. ≤420px trims the screen-tab meta labels so the engineering header never overflows. NEW CLASSES (all `audit-` prefixed): audit-integ(+-h,-row), audit-export, audit-invariant, audit-filters, audit-fgroup(+--date), audit-flbl, audit-segdot(+--u,--a), audit-fsel(+--date), audit-arrow, audit-reset, audit-meta, audit-chips, audit-count, audit-tbl, audit-seq, audit-ts, audit-res, audit-trace, audit-day(+-d,-line,-c), audit-who, audit-av--sys, audit-wn, audit-kk, audit-kind-s, audit-act, audit-tgt, audit-tk, audit-tn, audit-tp, audit-r(+--ok,--deny,--warn), audit-rnote, audit-foot, audit-cursor(+-pos,-nav), audit-foot-r, audit-foot-note, audit-tabbar, audit-tab(+--on,-ic). DEVIATIONS — (1) Introduced a SYSTEM principal (alongside human/agent) for scheduled mutations (snapshots) — audit completeness implies non-user actors must also be attributable; styled neutrally so it never competes with the two cold human/agent signals. (2) Reused `.seg` (defined under `.toolbar2`) for the principal switch rather than inventing a parallel control, to stay on-vocabulary. (3) Mobile column-hiding relies on cell ordering; the action `<td>` is the 4th child (targeted via `:nth-child(4)` for its mobile margin) since it has no extra class in markup.

VERIFIED by rendering: built a self-contained preview (locked meridian-zero.css + Google Fonts + this fragment/CSS) and screenshotted in headless Chrome at 1320@2x desktop and 360/390/640 mobile. A DOM probe (documentElement.scrollWidth vs clientWidth) confirmed OVERFLOW=no at 360/390/640 — no document-level horizontal scroll at any mobile width. (Screenshots can show inner `pre` content full-width because --hide-scrollbars suppresses the scroll affordance; the base sheet's `.codeblock pre{overflow:auto}` scrolls it in a real browser, and the page itself does not widen.) LAYOUT (ADR 0032 anatomy): reuses the locked `.win--editor` 3-col frame (248 / 1fr / 268). LEFT = version timeline built on `.side` — a continuous vertical rail with tick `.history-node`s; v14 = filled-ultra CURRENT node, v13 = selected (ringed node + ultra left-bar) carrying its +/− stat and the ultra "Restore this version" button, plus a restore-point and older snapshots. CENTER = `.main` diff of v13→v14: a stat ledger (+102/−18 cyan-vs-steel meter, blocks-touched) above a stack of `.history-block` rows (gutter line-no + ~MOD/+ADD/−DEL badge + per-block author), using the locked `.sugg-ins`/`.sugg-del` marks inline in prose AND inside a real `.codeblock`. RIGHT = `.erail` suggestion queue: a restore-confirm popover (from→to→writes v15, acked checkbox, Confirm/Cancel) then full review cards for one agent + one human pending suggestion (Accept/Reject), a Resolved ledger of compact `.chg` rows (accepted/rejected), and Accept-all/Reject-all. HUMANS + AGENTS AS PEERS: square ultramarine `.av--u/-u2/-u3` for people (Nadia, Tomas, Jun), notched-cyan `.av--agent` for AI (archivist, linter-bot) — carried consistently across timeline authors, diff block-authors, and queue cards. Change rails follow the same code: ultra for human edits/additions, cyan for agent edits/suggestions. HUMAN vs AGENT chips on each snapshot. MOBILE/PWA: at <=1120 the shared sheet hides .side/.erail; I override to re-show them as a single stacked column and add a sticky bottom TAB BAR (`.history-mobnav`: Versions / Diff / Queue·2 with an ultra active-bar and a cyan count badge) — `data-pane` hooks are present for JS pane-switching; CSS-only fallback stacks all three panes with dividers so it's fully usable without script. At <=640 the engineering coordinate band (`.screen-tab .meta`) and the bar crumb collapse, the diff-mode tabs go full-width, gutters narrow, and all controls get min-height:44px. THEMING/TOKENS: every themeable value references a Meridian Zero token; spacing/rules use --rule/--rule-2 and token colors throughout. The only literal hexes are #fff and #02363b as foreground-on-saturated-fill (white on ultra, dark-teal ink on cyan) — these have no token and exactly match the locked stylesheet's own usage (.btn--ultra, .sugg-card .acc, .agent-caret .flag), so a custom theme that overrides the :root tokens reskins everything here. (The "#001" in the member-label text is content, not a color.) ACCESSIBILITY: AA-safe inks chosen deliberately — --agent-ink/--ultra-ink for text on cyan/ultra washes, --steel (not --steel-2) for body-weight meta, dark-on-fill for buttons. ARIA: timeline is role=listbox with role=option (selected marked aria-selected), diff-mode is a tablist, restore popover is role=dialog, decorative avatars are aria-hidden. ALL motion (.history-* transitions, .btn, and the inherited .live pulse/caret) is disabled under prefers-reduced-motion. NEW CLASSES (all `history-` prefixed): -win/-side/-main/-body/-erail (frame tweaks); -tlhead/-timeline/-snap(.is-head/.is-selected/.is-restore)/-rail/-node/-snbody/-snhead/-vtag/-snmeta/-author/-when/-sum/-snstat/-touch/-add/-rem/-restorebtn/-back (timeline); -diffmode/-diffbar/-dstat/-dk/-dv/-dmeter/-mlabel/-mtrack/-madd/-mrem/-diff/-block(.is-ctx/.is-changed/.is-added/.is-removed)/-bgut/-bln/-bbadge(-bb-mod/-bb-add/-bb-rem)/-bbody/-bauthor (diff); -restorecard/-rcline/-restoremain/-confirm/-cfh/-cfbody/-cfack/-cfbox/-cffoot/-qcard(.is-agent/.is-human)/-qhead/-qwho/-qmeta/-qquote/-qwhy/-qact/-acc(/-acc--u)/-rej/-resolved/-rlabel/-st-rej/-bulk (queue/restore); -mobnav/-mi/-mbadge (mobile nav). DEVIATIONS: none from the design language. The restore-confirm popover is shown in its open state (not toggled) so the confirm-flow is visible in a static mock. Source files written for reference: /Users/numman/Repos/editorzero/.design/history-screen.fragment.html and /Users/numman/Repos/editorzero/.design/history-screen.css (the canonical output is in this tool's html/css fields).

Composition: Reuses the canonical chrome (.screen > .screen-tab > .win = .side + .main > .bar + .body) exactly as design-01, with the .panel/.ph engineering-header pattern for every settings section so it reads like the rest of the app. Reused atoms: .kv rows (instance info, integration details), .status-tag (st-pub/st-rev for cert + sync status), .role-sel + .scope-bar (per-key agent scope tiers), .kind/.av (human square / agent notched), .chip variants, .mtbl (API keys + domains tables), .dot--ok/--agent. Left settings nav is the standard .nav with .on ultra left-bar; all nine requested entries present (General, Members, Spaces, Integrations, API & Agents, Domains & TLS, Backup & Export, Theme, Danger Zone). Humans + agents as peers: agents are first-class principals everywhere — provisioner/backup-bot in the live sidebar list, notched cyan .av--agent rows in the API-keys table with cyan-bordered .role-sel + scope bars, "pushed by backup-bot" / "run by backup-bot" cyan attribution in Integrations and Backup, and an agent-tinted toggle (.settings-toggle--agent) for "Allow agent API tokens". The human (Nadia, ultra square) holds the admin/CI key and the footer identity. Region motif: .settings-coord renders LAT/LON as oversized ultra-ink tabular numerals with mono axis labels (52.3676 LAT · 4.9041 LON, AMS1), overlaid with the crosshair brand device (.cross + .cross-ring) as the "origin" mark — tying the engineering-drawing language to the self-hosted instance block alongside version/build/db/uptime/license .kv rows. Theming / token purity: zero hard-coded hex. Every colour, border, padding and size references a Meridian Zero token. The custom switch, inputs, region block, integration cards, theme picker and Danger Zone are all token-driven, so a :root override restyles them for free. The Theme section makes this literal — swatches are painted from var(--paper/--ink/--ultra/--agent) and the hint states a theme is a :root token override, with an "Author theme" affordance. New classes (all settings- prefixed): settings-nav/navord/navdanger, settings-savestate, settings-section, settings-fieldset/field(+--toggle)/subfield/flabel/fname/fhint/fctl, settings-input(+--mono)/inputwrap/iprefix, settings-toggle(+--agent)/tknob, settings-instance/coord/coordval/cnum/cax/csep/coordloc/crosshair/instgrid, settings-keyhead/keytbl/key/keymono/keymeta/revoke(+--neutral)/keyfoot(+-l/-a), settings-integrations/int(+--off)/int-h/int-ic/int-id/int-nm/int-sub/int-body/int-empty, settings-domtbl/dom/domadd/tlsnote, settings-backup/bkstats/bkstat/bkv(+--agent)/bku/bkd/bkactions/bkbtns, settings-themes/theme(+--new)/theme-plus/swatches/themenm/themetag/themehint, settings-danger(+-ph/-tag)/dangerset/dangerrow(+--final)/dangerinfo/dangername(+--del)/dangerbtn/confirm/delconfirm/delinput/deletebtn, plus mobile nav primitives settings-mobilenav (+mn-danger) and settings-tabbar (+tbic/tbl/tb-danger). Accessibility: AA-safe token choices — body/hint copy uses --ink/--ink-1/--ink-2 (not --steel-2) for legibility; status greens use the --ok-on-wash pairing baked into .st-pub; danger affordances use --warn-ink (#8a5a00) on light, which clears AA. Toggles are real role="switch" buttons with aria-checked + aria-label and a visible :focus-visible ring; theme tiles use aria-pressed; the delete button is disabled until the slug is typed (confirm gating). Touch targets step to >=44px on phones (inputs, role-sel, all action buttons, 54px tab-bar items). Mobile / PWA: the shared sheet hides .side at <=1120px, so I layer two nav fallbacks — a horizontal mono section-switcher (.settings-mobilenav) at the tablet breakpoint, then a fixed bottom tab bar (.settings-tabbar, the PWA-style primary nav with safe-area-inset padding) at <=640px. Every grid (fields, instance, integrations, key/backup stats, themes, danger rows) stacks to one column; .body gets bottom padding so content clears the fixed bar; no horizontal scroll (tables sit inside panels; the only scroller is the opt-in switcher with hidden scrollbars). All transitions/animations this screen introduces are disabled under prefers-reduced-motion. Deviations: none structural. New classes only extend the system (square toggle, labelled field rows, region/coord block, integration + theme cards) in the established cold-Swiss idiom — hairline rules, 0px radius, mono labels, tabular numerals, ordinals. The Danger Zone uses --warn-ink as a deliberate functional accent (not a new colour) to stay cold while signalling irreversibility, consistent with the system's functional token set.

THREE STATES, one engineering set. Rendered as a full-viewport paper field (faint 32px grid via grid-line token) with a sticky top coordinate strip (brand + live instance readout: node nw-01 · v0.1.0 · ok-dot) and a footer credit strip. The three states sit side-by-side in a bordered .login-set, each a .login-col with its own coordinate header (ord + id + status chip): (1) First-run wizard — progress meter + 4-step rail (done/on/todo), org+admin+instance fields, the .ez.internal affix; (2) Returning sign-in — email+password with SHOW affix, primary submit, OR divider, two SSO buttons (SAML + OIDC); (3) Invite accept — ultramarine .login-invite banner ("Northwind Eng … as Editor"), a 3-cell grant grid (Role/Spaces/Expires), invited-by line, locked email + name + set-password, and a NEW-PEERS strip. The crosshair brand device repeats: each card opens with a framed .markwrap (cross + cross-ring) carrying ultramarine corner registration ticks. VALIDATION (dev-browser/Playwright): captured full-page at 1366, 1280, 900, 390. Zero horizontal overflow at every width. At <=1080 the set collapses to one column (verified gridTemplateColumns→1fr); at <=640 .login-row2 and the grant grid stack. Confirmed --ultra and --paper resolve at runtime. THEMING / TOKEN PURITY: graded clean — a scan of the screen CSS found NO hardcoded hex/rgb; every color is a var(--token). Swapping :root re-themes this screen wholesale (the grid field, mark ticks, step rail, invite wash, agent notes all follow their tokens). Spacing/sizing use literal px tuned to the 8px system but reference --rule/--radius for structure. Focus rings use --ultra; the inset box-shadow uses var(--rule) for width. MOBILE / PWA: off-canvas not needed — there is no app nav at the entry screen; instead the stage stacks into a single scrollable column with the sticky brand strip retained for orientation. Touch targets meet/exceed 44px on phones (measured: submit 44, back 44, input 46, SSO 46, reveal-affix 46×52). Inputs go to 16px font at <=640 to suppress iOS focus-zoom. Uses 100dvh so the field fills mobile viewports under dynamic browser chrome. ACCESSIBILITY: body/label text uses --steel (~4.7:1 on white) or darker (--ink-1/--ink-2); --steel-2 is reserved for decorative mono micro-labels/coordinates only. Status/role text uses the AA-safe --ultra-ink / --agent-ink / --ok ink tokens. All inputs have <label for>; affix toggles are real <button> with aria-label; the readonly invite email has aria-readonly; decorative dots/avatars are aria-hidden; hint text wired via aria-describedby. Every animation (input/ssobtn/back/submit transitions, the .live pulse, blink) is disabled under prefers-reduced-motion. HUMANS + AGENTS AS PEERS: present in all three states. Human = square ultramarine .av--u (NA monogram); agent = notched cyan .av--agent (AI/AR). Each state carries the required agent footnote in the cyan .login-agentnote band ("Agents authenticate via token/key — Authorization: Bearer ez_… — not this form"), the invite's NEW-PEERS strip lists a human admin and the 'archivist' agent side-by-side, and the global footer repeats the agent-auth statement with a cyan dot. NEW CLASSES (all login- prefixed): login-field, login-topstrip, login-inst, login-stage(-h), login-set, login-col, login-ch, login-card, login-brand (+ markwrap), login-form, login-fl, login-lbl, login-input, login-affix, login-hint, login-row2, login-steps, login-step, login-prog, login-or, login-sso, login-ssobtn, login-actions, login-submit, login-nav, login-foot-line, login-peers, login-peer, login-invite, login-grant, login-by, login-agentnote, login-footer, login-toggle (toggle styles included for the wizard's instance-settings step; markup for that step is summarized into the rail here to keep all three states visible at once). Reused system atoms: .logo/.cross/.cross-ring, .kicker(--ultra), .ord, .chip(--ultra/--agent/--ghost), .dot(--ok/--agent/.live), .av(--u/--agent), .btn(--primary/--ultra), .hr, .mono. No app-chrome classes (.win/.side/.bar) are used since this is the pre-auth entry surface. DEVIATIONS: the spec's "stepped wizard" is shown mid-flow (step 2/4) rather than as a multi-screen sequence, so the full wizard mechanics (progress meter + step rail + per-step body) read at a glance alongside the other two states. The instance-settings toggle component is styled (login-toggle) and reduced-motion-guarded but its body is represented by step 3 in the rail rather than expanded, to keep all three states co-visible in one frame.

SCREEN = a gallery of 7 phone frames (a-g). Each frame is a token-built device bezel (.mobile-pwa-device, aspect-ratio 375/812, graphite --ink body, offset --surface-sunk shadow) wrapping a real .mobile-pwa-screen flex column: faux OS status bar -> app/read bar -> scrollable body -> docked bottom chrome. The frames are self-contained "mini-viewports", so every inner layout is already genuinely mobile. FRAMES: (a) installed home — app bar, 2-up .stat grid, Continue panel + activity .feed, and a 5-item BOTTOM TAB BAR (Home/Docs/Search/Activity/Account) with an ultra active indicator + cyan agent-count badge; (b) documents list — stacked .mobile-pwa-doc rows reusing .status-tag + .editors-stack, a 4-up segmented filter, and an ultra FAB; (c) reading view — read bar, big .z headline, mono meta with human+agent avatars, callout/code/list reusing reader tokens; (d) EDITOR — top presence (.pchip u/ag), live .caret-u + agent-typing + .agent-caret flag, inline .sugg-ins/.sugg-del, a tap-to-review BOTTOM SHEET (grab handle, agent header, add/rm diff, rationale, 48px Accept[cyan]/Reject), and a docked touch FORMAT BAR with an "Ask" agent action; (e) OFFLINE — warn-wash banner "Offline · 3 edits saved locally", a per-edit sync queue (human=ultra rail, agent=cyan rail), then the reconnected "Synced · merged via CRDT" --ok bar; (f) INSTALL sheet over a dimmed app — app icon = crosshair zero mark, feature list, "Add to Home Screen"; (g) SPLASH — graphite canvas, visible grid field, large ultra crosshair zero mark, wordmark with cyan "zero", indeterminate ultra loader. MOBILE/PWA APPROACH: The page is the showcase; real responsiveness is the gallery reflow. Desktop = auto-fill grid of ~375px frames; <=900px shrinks the cell; <=640px collapses to one centered phone per row (max-width 360px so the bezel stays phone-shaped, never edge-to-edge ugly), header/credit stack, no horizontal scroll. Inside frames, primary nav is the bottom tab bar (a) and docked format bar / bottom sheets (d) — the PWA pattern. Touch targets: tab items min-height 52px, format-bar buttons 48x>=44px, sheet Accept/Reject 48px, FAB 52px, icon buttons 38px boxes inside generous bars. Status bar shows an installed standalone shell (no browser chrome); offline frame flips the status bar to graphite with a cyan offline glyph. THEMING/TOKEN PURITY: No hardcoded hex except where the SSOT itself defines literal avatar/status values — I reuse the system's own .st-pub greens (#e4f4eb/#a7d9bf) verbatim for the synced bar so it matches the published status tag exactly, and #fff only inside ultra/agent fills mirroring .btn--ultra/.av conventions. Everything else (graphite bezel, grid lines, washes, rails, accents) is a var() token; spacing/rules also use --u/--rule/--rule-2/--radius/--radius-chip. A custom theme = overriding :root, and these frames recolor automatically. Splash grid is drawn from --ink-1 line gradients; all glyphs (tab icons, crosshair marks, search/doc icons) are CSS borders — zero raster assets. ACCESSIBILITY: Text uses AA-safe tokens — agent text via --agent-ink, ultra via --ultra-ink, offline via --warn-ink on --warn-wash, synced via --ok on its light green; --steel-2 reserved for >=10px mono captions/decorative meta only. Sheet has role="dialog" + aria-label, status regions role="status", tab bar nav[aria-label], aria-current on active tab, decorative bezel/notch/glyphs aria-hidden, icon buttons aria-label'd. Only two animations (status .live pulse from the base sheet, splash loader) and both are wrapped in prefers-reduced-motion: reduce. Humans (square --ultra .av--u) and agents (notched --agent .av--agent) appear as peers in EVERY content frame — co-editor stacks (a,b), bylines (c), presence + live caret/suggestion (d), and dual-colored sync rails (e). NEW CLASSES: all prefixed mobile-pwa- (page/head/intro/title/lede/legend; gallery/frame/cap; device/notch/screen; status[+--off]; appbar[+--title]/iconbtn/titleblock/greet-h/count; scroll variants; stat2/panel/row/livelbl; tabbar/tab/tab-ic/tab-l/badge + ic-docs/ic-search/ic-act drawn glyphs; seg/doc/doc-* /fab; readbar/read-h1/read-h2/read-p/readmeta/lede2/callout/read-ul; ed-h1/ed-p/agentline/presence-m/save; sheet/grab/sheet-* ; fmtbar/fb-ai; offbanner/off* /q/q-* /synced* ; install/install-* /dim* ; splash/splash-*). DEVIATIONS: reused the existing .seg, .stat, .panel/.feed, .callout, .status-tag, .editors-stack, .pchip, .caret-u, .agent-typing, .agent-caret, .sugg-ins/.sugg-del, .chip--ghost, .btn--ultra/--ghost, .logo/.cross/.cross-ring, .dot atoms rather than re-declaring them — the bottom sheet mirrors the desktop .sugg-card review pattern repositioned as a sheet, and the bottom tab bar / format bar are the mobile equivalents of the desktop .nav / .fmtbar.

SCREEN: Settings / Appearance / Themes, rendered as the full app frame edge-to-edge (.viewport > .screen > .win 248+1fr) so it reads as a real product surface. Reuses shared chrome verbatim: .side/.nav (Settings + Appearance groups, "Themes" active), .bar/.crumb/.search, .page-h with .z ultra accent, .panel/.ph, .callout, .codeblock, .credit, and .chip/.dot/.av/.btn atoms. THESIS SHOWN, NOT TOLD — "a theme = a :root override, no rebuild." Demonstrated structurally: both the 4 curated thumbnails AND the live-preview pane are the SAME markup, each re-skinned purely by overriding token custom properties on a wrapper class (.theming-tk-graphite / -warm / -hicon / -afterdark). Children read --ink/--paper/--ultra/--agent etc., so they recolour automatically — the exact product mechanism. A thesis callout + the export panel also state it and show a paste-able :root[data-theme] block. (1) CURATED CARDS: Meridian Zero (DEFAULT, active — ultra outline + ACTIVE tag), Graphite Dark, Warm Paper, High Contrast (WCAG AAA chip). Each = a mini-app thumbnail (sidebar+main+human/agent rows) under its own token set, plus a real 5-swatch palette strip and an Apply action. (2) CREATE-THEME EDITOR: left panel = editable token rows grouped into the 6 requested buckets (Neutrals / Accent / Agent / Functional / Type / Metrics); each row = swatch + --token + semantic role + value field. The actively-edited --ultra row gets an ultra outline + a human .caret-u in its hex field (live editing). Type rows use font-name swatches; Metric rows use size/bar swatches incl. --radius 0. Right column = live preview pane (a full sample doc screen scoped to .theming-tk-afterdark "Northwind After-Dark"), a contrast-guard band (auto-nudge to keep AA), Save / Apply now / Export CSS / Revert actions, and the export+paste panel. (3) THEME = CSS CUSTOM PROPS: codeblock shows the exported :root[data-theme="after-dark"] override; footer note "paste any :root{} block… same tokens drive Web UI, PDF, embeds" + Import-from-CSS. HUMANS + AGENTS AS PEERS appear in every preview surface: sidebar live agent (notched cyan dot), presence chips for human (square ultra av) + agent (notched cyan av, "typing…"), and a tracked agent suggestion (.ins/.del cyan) in the live preview. The Agent token group is first-class beside Accent. TOKEN PURITY: no hard-coded hex in screen CSS EXCEPT inside the alternate-theme override blocks (.theming-tk-*) and the curated swatch strips — unavoidable and correct, since a theme's literal job is to DEFINE token values. All structural/default styling references vars only. Two small #fff uses are on saturated fills (ultra btn text, ok guard glyph) matching the shared sheet's own .btn--ultra/.av pattern. Contrast: text uses AA-safe tokens (ultra-ink, agent-ink, ink-1, ok); steel-2 only on decorative marks; the guard band reinforces AA as a product constraint. MOBILE / PWA: shared sheet hides .side at <=1120, so I add a fixed bottom TAB BAR (>=56px rows, env(safe-area-inset-bottom), ultra active marker) for primary nav. At <=1120 cards go 2-up and the editor stacks with the PREVIEW moved above the token list (order:-1) so the result stays visible while scrolling tokens. <=760 the preview sample app stacks (sidebar -> horizontal strip). <=640 single-column cards, token rows drop the role column to swatch+name+value at 44px min height, actions become full-width stacked buttons, the screen goes edge-to-edge (side borders dropped), duplicate header Import button hidden. No horizontal scroll at any width. NEW CLASSES: all prefixed theming- (vp, win, applied/-v, thesis, sech/-ed, cards, card/-ft/-meta/-nm/-sw, thumb, mini*/-mark/-side/-main/-bar/-h/-row/-av, tk-meridian/-graphite/-warm/-hicon/-afterdark, defchip/a11ychip/active-tag/applybtn/importbtn, editor, tokens/-tcount/-tokscroll, grp/-h/--last, kag, trow/--on/--font/--metric, sw/--edit/--font/--mono/--metric/--radius, tname/trole/hex/--edit, previewcol, preview, livetag, stage, samp*/-side/-logo/-mark/-nav/-navh/-dot/-main/-bar/-crumb/-btn/-body/-kick/-h1/-p/-presence/-pchip/-av/-typing/-sugg/-ins/-del/-chips/-tag, guard/-ic/-tx/-tag, actions/-l/-r, code/-copy, export/-ft/-note, tabbar, tab/-ic). Reused shared atoms recontextualised: .caret-u (human caret reused in the edited hex field), .codeblock token spans (.cm/.kw/.st), .dot--agent.live. ANIMATION: all motion (shared .live pulse, .caret-u blink, agent dot) disabled under @media (prefers-reduced-motion: reduce); card/row transitions also killed. DEVIATIONS: kept the .screen/.screen-tab wrapper (consistent with the canonical mock's per-screen framing + engineering-drawing coordinate label) rather than a bare .win; on <=640 its right-hand meta hides and side borders drop so it fills the phone edge-to-edge. Brand crosshair marks in the mini/sample previews are drawn with token-coloured gradients (not the shared .cross pseudo-elements) so they survive being placed inside scoped-token wrappers.