@bongos/core 1.19.484 → 1.19.485

package/docs/file-map.md

@@ -130,7 +130,7 @@
 │   ├── sessions/                ← CORE-DOMAIN carve (BV1.R82, default-on): the session_records corpus + data plane (upload, cross-builder search/deep-dive), the BFG read-the-room scorer, session-pulse/stale-claim helpers. Registers no port — reached via HTTP POST to its own /sessions route; resolves the economy `reward` port for the cost-plus token reward. CLAUDE.md, module.json, routes/sessions.js, bfg.js, pulse.js.
 │   ├── autonomy/                ← CORE-DOMAIN carve (BV1.R83, default-on): the MAS autonomy surfaces — the $0 deterministic autonomy gate (System 3, inert until armed), the conductor/architect CLIs, and the in-process routine timers (incl. the weekly peer-vote-tally poller). Registers no port; resolves the lifecycle `tallyPeerVotes` doorway. CLAUDE.md, module.json, routes/autonomy.js, autonomy.js.
 │   ├── status-ui/              ← CORE-DOMAIN WEB-SURFACE carve (BV1.R84, default-on): the public status dashboard at status.<apex>, moved from public-status/. NO routes/db/port — declares contributes.webSurfaces:[{host:"status.",dir:"public"}], served by the loader web-surface seam (moduleWebSurfaces → serve-internal). CLAUDE.md, module.json, public/{index.html,status.js,style.css,cursors/,snapshots/}.
-│   ├── hall-ui/                ← CORE-DOMAIN WEB-SURFACE carve (BV1.R85, default-on): the authenticated builders' hall at builders.<apex>, moved from public-builders/ (~13k LOC, the largest). NO routes/db/port — declares contributes.webSurfaces:[{host:"builders.",dir:"public"}] for discovery, but UNLIKE status-ui keeps its DEDICATED serving block in serve-internal (the /builders shim + canonical redirects + citizen/Archon page gates + asset-stamping + hall-widget injection), partitioned out of the generic web-surface loop and served from BUILDERS_DIR. CLAUDE.md, module.json, public/{index.html,builders.js,style.css,work,watch,harbor,gate,pair,settings,ranks,sessions,primer,diagrams,atlas,...}.{html,js},cursors/,chime.wav. Three ARCHETYPE sheets sit beside the per-page ones: `record.css` (the task + idea records, task 1003305), `room.css` (the READING ROOMS — the primer + the diagrams index, task 1003306: the reading measure and rhythm, the table of contents, the progress hairline and the framed figure diagram-viewer.js upgrades on both pages) and `oversight.css` (the OVERSIGHT family — government, watch, harbor, gate, task 1003469: the row, the figure band inside a panel, the group head, the inline form, the grant toggle and the shared confirm modal; named oversight because the vocabulary wall bans "governance" on the government surface). A page sheet then holds only what one page has and the others do not — `primer.css` the acknowledge gate, `diagrams.css` the legend strip, `gate.css` the hold reasons and file chips, `watch.css` the severities, the report reader and the grade trend, `people.css` the directory's identity cell (task 1003470 made the legacy door `/scouting` ship the same body and script as `/people`; task 1003440 then deleted the door — `scouting.html` and `scouting.states.json` are gone and the URL 301s to `/people`).
+│   ├── hall-ui/                ← CORE-DOMAIN WEB-SURFACE carve (BV1.R85, default-on): the authenticated builders' hall at builders.<apex>, moved from public-builders/ (~13k LOC, the largest). NO routes/db/port — declares contributes.webSurfaces:[{host:"builders.",dir:"public"}] for discovery, but UNLIKE status-ui keeps its DEDICATED serving block in serve-internal (the /builders shim + canonical redirects + citizen/Archon page gates + asset-stamping + hall-widget injection), partitioned out of the generic web-surface loop and served from BUILDERS_DIR. CLAUDE.md, module.json, public/{index.html,builders.js,style.css,work,watch,harbor,gate,pair,settings,ranks,sessions,primer,diagrams,atlas,...}.{html,js},cursors/,chime.wav. Four ARCHETYPE sheets sit beside the per-page ones: `record.css` (the task + idea records, task 1003305), `room.css` (the READING ROOMS — the primer + the diagrams index, task 1003306: the reading measure and rhythm, the table of contents, the progress hairline and the framed figure diagram-viewer.js upgrades on both pages), `oversight.css` (the OVERSIGHT family — government, watch, harbor, gate, task 1003469: the row, the figure band inside a panel, the group head, the inline form, the grant toggle and the shared confirm modal; named oversight because the vocabulary wall bans "governance" on the government surface) and `panel.css` (the PANEL family — settings, profile, pair, not-ready, task 1003308: the row, the switch, the field with its label above, the chip control, the four voices and the sign-in gate; the hall's my-projects page was DELETED in the same task — "my projects" is the hub's user-level page, and the hall keeps no link or redirect). A page sheet then holds only what one page has and the others do not — `primer.css` the acknowledge gate, `diagrams.css` the legend strip, `gate.css` the hold reasons and file chips, `watch.css` the severities, the report reader and the grade trend, `settings.css` the rail layout, the group head, the token ladder and the voices grid, `profile.css` the identity band and the shelf, `pair.css` the device row, `people.css` the directory's identity cell (task 1003470 made the legacy door `/scouting` ship the same body and script as `/people`; task 1003440 then deleted the door — `scouting.html` and `scouting.states.json` are gone and the URL 301s to `/people`).
 │   ├── lifecycle/               ← CORE-DOMAIN carve (BV1.R86, default-on): the build state machine — tasks · claims · versions · done-when · goals · dependencies · claim→ship→grade→credit · github-push + merge-lock + conflict-resolve + publish-reconciler. The LAST, most-coupled carve; registers the `lifecycle` kernel port (createTask, classifyTaskKind, tallyPeerVotes, work-tracking reads). CLAUDE.md, module.json, routes/{tasks,claims,versions,done-when,goals,dependencies,gate-approvals,analytics}.js, lifecycle.js, github-push.js, merge-lock.js, conflict-resolve.js, publish-reconciler.js, task-visuals.js + task-visual-db.js + routes/visuals.js (the optional ship-time visual, task 1003109 — the route file is NOT named task-*.js on purpose; see the module CLAUDE.md).
 │   ├── copy-desk/               ← CORE-DOMAIN module (task 1003113 / R02 of goal 1000074, default-on): the COPY half of the design contract — ADR 0081 gave design TOKENS a repo-owned source of truth, text had none. Owns the FLAG (anyone in any role marks a string or a whole surface as needing an artist's attention, with a reason required in BOTH the route and a CHECK constraint) and the QUEUE an artist reads it from. READS R01's committed registry (docs/copy-registry.json, generated by scripts/gds/copy-inventory.js) and never writes it. NO LIVE CMS is the hard non-goal: no column here could hold replacement text, and copy_no_cms.mjs pins that. Key is `copy-desk`, not `copy` — the branding contract already owns a `copy` block, so the bare word reds the "core carries no module code" fitness check. CLAUDE.md, module.json, registry.js, flags.js, routes/copy-desk.js, migrations/copy_desk_001_flags.sql, tests/{copy_flags,copy_queue,copy_no_cms}.mjs. Its hall surface lives with hall-ui (public/copy-desk.{html,js,css}), per the one-key-per-web-surface precedent.
 │   ├── ui-design/               ← CORE-DOMAIN module (task 1003324 / ADR 0197, default-on): the design capability every builder on every instance gets — ships METHOD, never a world. Absorbs ADR 0081's layer: adapters/{claude-design,figma}/index.js (moved from src/ui/adapters/), scripts/{design-sync,figma-design-sync,validate-design}.js (moved from scripts/gds/, which keeps thin shims), docs/design-contract.md (moved from docs/). Declaration-only: contributes.skills design (the /design playbook, new) + design-sync + figma-design-sync; no routes/port/migrations, so disabling it touches no served surface. CLAUDE.md separates the platform FLOORS (the Fifteen Rule, the dark twins, no page :root, the 24px floor, AA in both modes, the kill switch) from the instance's WORLD (its packs + DESIGN.md). kit/ (task 1003320) is the look-before-you-ship kit: lib.js (the floors, the states/probes contracts, the action + expectation vocabularies, the WCAG maths, the stub spawner), serve.js (any surface through the doorway's real transforms + fixtures/), render.js (states × 1440/390/320 × dark/light, audited), probe.js (PASS/FAIL contracts), check-mock.js (platform rules + the instance's DESIGN.md taste bans, then the detector), tells.js (task 1003329 / ADR 0223: the anti-pattern detector as two tiers — floors FAIL, craft tells WARN, kit-ignore waivers per file; the rendered twins live in lib.js factsInPage), contrast.js + png.js; a page's <page>.states.json / <page>.probes.json sit BESIDE the surface (modules/public-landing/public/, modules/hall-ui/public/). Recipe: docs/recipes/ui-look-before-you-ship.md. skills/ (task 1003321 / ADR 0198) is the vendoring policy: policy.json (licence allowlist, verdicts that may land, sidecar fields, preamble markers), PREAMBLE.md (the platform preamble every vendored SKILL.md opens with), README.md (the roster — both origins scanned dangerous on 2026-08-28, landed as rebuild specs; nothing vendored — and the landing recipe); a landable copy goes under skills/vendor/<name>/ with PROVENANCE.md + LICENSE and is materialised into an instance's .claude/skills/ by claude-materialize.js step 1b. skills/<name>/ (task 1003325 / ADR 0220) are the in-house rebuilds from the specs, first-party and counted: design-taste-frontend (the default taste skill), design-taste-frontend-v1 (the earlier generation, kept distinct), high-end-visual-design (the polish pass), redesign-existing-projects (the in-place upgrade); each opens with the same preamble and carries a "Rebuilt from" section instead of a sidecar. impeccable/ (task 1003326 / ADR 0221) is the design-craft method as ONE skill with sub-commands: SKILL.md (the router, the menu, the craft floor, the bounded finish) + reference/<sub-command>.md (eighteen playbooks, one loaded per request); no hooks, no bypass agent, no telemetry, no live server. minimalist-ui/, industrial-brutalist-ui/, gpt-taste/, stitch-design-taste/ (task 1003327 / ADR 0230) are the four looks, composition grammars with no colours of their own: the palette is the instance's pack and the texture is a named entry in styles/; a substrate is an archetype that still ships both modes, gpt-taste's selection is derived from the route rather than rolled, and stitch-design-taste writes a DESIGN.md-shaped contract document whose thirteen are transcribed from the pack. image-to-code/, imagegen-frontend-web/, imagegen-frontend-mobile/, brandkit/ (task 1003328 / ADR 0222) are the image family under the hero-only rule: plates and hero objects only, the pair (JPEG dark plate + WebP alpha cutout) with a <file>.json sidecar beside each, through the instance's art pipeline key; the grove specimen's styles/grove/assets/ is the worked example. style/ (task 1003475 / ADR 0231) is the module's first FIRST-PARTY skill (no upstream, so a `## First party` section instead of `## Rebuilt from`): the /style session in which an owner authors their own look in four bounded steps, rendering the nearest library entries before asking, drafting inside the contract, retuning by measurement, and handing over the one-step adoption without ever writing config/branding.json. styles/ (task 1003323 / ADR 0219) is the style library: <name>/pack.json (the theme.ui overlay, exactly the fifteen) + DESIGN.md (the look's derived recipes, thirteen in lockstep with the pack) + mock.html (the specimen); chrome-world (pinned to the neutral pack), expedition, grove, blueprint (the first cool look, authored through /style at task 1003475); STYLE=<name> on the kit lays a look over the instance's pack through GDS_BRANDING_FILE; tests/ui_design_styles.mjs runs the world/cosmos/hall token suites once per alternate (UI_DESIGN_PACK). config/design-tokens.* + design-sources.json STAY in config/ as the host boundary; public-landing keeps its own key (first customer, not owner).

package/docs/module-api-changelog.md

@@ -1405,5 +1405,7 @@ is load-bearing: the script throws rather than guess if it is missing, and
         landed since 1.19.482 with no explicit bump. run 33674657478. (task 1002620)
   1.19.484 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
         landed since 1.19.483 with no explicit bump. run 33675143968. (task 1002620)
+  1.19.485 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
+        landed since 1.19.484 with no explicit bump. run 33681828446. (task 1002620)
 ---------------------------------------------------------------------------
 ```

package/modules/hall-ui/public/not-ready.html

@@ -9,6 +9,8 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
+  <!-- The PANEL archetype (task 1003308): this page is its sign-in gate shape. -->
+  <link rel="stylesheet" href="/builders/panel.css">
 </head>
 <body data-page="not-ready" data-page-title="Locked">
 
@@ -18,21 +20,23 @@
   <div class="app-body">
     <header class="app-topbar" id="app-topbar"></header>
     <div class="app-content">
+      <!-- The page's ONE h1 (one-header-main-h1), in the family's voice. -->
+      <div class="page-head page-head--room page-head--panel">
+        <h1 id="not-ready-h1" class="page-head__h">not yet</h1>
+        <p class="page-head__sub">This page unlocks as you advance.</p>
+      </div>
       <main id="hall-main">
-        <section class="scroll">
-          <h2 class="scroll__h">Not yet available</h2>
-          <p class="scroll__lede">This page unlocks as you advance.</p>
-          <p>
+        <section class="scroll gate" aria-labelledby="not-ready-h">
+          <h2 id="not-ready-h" class="gate__h">Not yet available</h2>
+          <p class="gate__lede">
             Xenos builders start with a focused set of pages — ship your first
             <strong>three tasks</strong> to graduate and open the rest of
             {{worldName}}'s builder hub.
           </p>
-          <p style="margin-top: 18px;">
-            <a href="/ranks">See how ranks work →</a>
-          </p>
-          <p>
-            <a href="/">← Back to Home</a>
-          </p>
+          <div class="row-end">
+            <a class="pbtn pbtn--save" href="/ranks">See how ranks work</a>
+            <a class="pbtn pbtn--quiet" href="/">Back to home</a>
+          </div>
         </section>
       </main>
       <footer class="app-foot" id="app-foot"></footer>

package/modules/hall-ui/public/not-ready.states.json

@@ -0,0 +1,14 @@
+{
+  "_": "The NOT-READY page through modules/ui-design/kit/render.js (task 1003308) — the sign-in gate shape of the panel family, static markup with no feed. Renders under the kit's own stub and under the harness alike.",
+  "page": "/not-ready",
+  "surface": "hall-ui",
+  "stub": { "prefix": "/builders/" },
+  "modeQuery": false,
+  "ignoreRequests": ["/api/(gds|bongos)/"],
+  "ignoreConsole": ["/api/(gds|bongos)/", "\b401\b", "\b404\b", "Unauthorized", "Not Found", "load failed"],
+  "states": {
+    "locked": { "auth": true, "actions": [["wait", 400]], "expect": { "visible": ["#not-ready-h1", "#not-ready-h"] } },
+    "out": { "auth": false, "actions": [["wait", 400]], "expect": { "visible": ["#not-ready-h1"] } }
+  },
+  "reducedMotion": { "auth": true, "actions": [["wait", 400]] }
+}

package/modules/hall-ui/public/pair.css

@@ -1,73 +1,23 @@
-/* pair.css — Page-local styles for the dev-box Pair page.
-   Lifted verbatim out of the page's inline <style> block (task 1002176);
-   the ?v= cache-bust is stamped automatically from this file's content hash
-   at boot (src/asset-version.js). */
+/* pair.css — what the Dev Box pairing page has and the rest of the panel family
+   does not (task 1003308, goal 1000081; the archetype is panel.css). One panel,
+   one device, one button. The device is a row of the family with the platform
+   glyph as its figure; the approve button is the page's one accent door. */
 
-/* Page-local styles for the pairing approve page (#904) — built on the
-   shared design-system tokens in style.css. */
 #pair-scroll { max-width: 640px; }
 
 .pair-device {
   display: flex;
   align-items: center;
-  gap: 14px;
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 14px 16px;
-  margin: 14px 0 18px;
-}
-.pair-device__glyph {
-  font-size: 1.7rem;
-  line-height: 1;
-}
-.pair-device__name {
-  font-family: var(--font-display);
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--ink);
-}
-.pair-device__meta {
-  font-family: var(--font-body);
-  font-size: 13px;
-  color: var(--ink-soft);
-}
-.pair-code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 12.5px;
-  letter-spacing: 0.08em;
-  color: var(--ink-soft);
-}
-.pair-actions {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  flex-wrap: wrap;
-}
-.pair-approve {
-  font-family: var(--font-body);
-  font-size: 13.5px;
-  font-weight: 600;
-  padding: 10px 22px;
-  background: var(--accent);
-  color: #fff;
-  border: 1px solid var(--accent);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-}
-.pair-approve:hover:not(:disabled) { background: var(--accent-deep); border-color: var(--accent-deep); }
-.pair-approve:disabled { opacity: 0.55; cursor: default; }
-.pair-status {
-  font-family: var(--font-body);
-  font-size: 13.5px;
-  color: var(--ink-soft);
-  min-height: 1.2em;
-}
-.pair-status--ok { color: var(--ok); font-weight: 600; }
-.pair-status--err { color: var(--danger); }
-.pair-note {
-  font-family: var(--font-body);
-  font-size: 13px;
-  color: var(--ink-faint);
-  margin-top: 16px;
-}
+  gap: var(--sp-sm);
+  margin: var(--sp-sm) 0 var(--sp-md);
+  padding: var(--sp-sm) 0;
+  border-top: var(--line) solid var(--rule-soft);
+  border-bottom: var(--line) solid var(--rule-soft);
+}
+.pair-device__glyph { width: 40px; font-size: 26px; line-height: 1; text-align: center; color: var(--ink-soft); flex: none; }
+.pair-device__name { font-size: 14.5px; font-weight: 500; color: var(--ink); }
+.pair-device__meta { margin-top: 2px; font-size: 13.5px; color: var(--ink-soft); }
+.pair-code { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; color: var(--ink); }
+.pair-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs); }
+.pair-actions .pair-status { margin: 0; }
+.pair-note { margin: var(--sp-sm) 0 0; max-width: var(--measure); font-size: 13px; color: var(--ink-faint); }

package/modules/hall-ui/public/pair.html

@@ -9,6 +9,8 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
+  <!-- The PANEL archetype (task 1003308) before the page's own sheet. -->
+  <link rel="stylesheet" href="/builders/panel.css">
   <link rel="stylesheet" href="/builders/pair.css">
 </head>
 <body data-page="pair" data-page-title="Device pairing">
@@ -19,7 +21,12 @@
   <div class="app-body">
     <header class="app-topbar" id="app-topbar"></header>
     <div class="app-content">
-      <div class="page-head"><p class="page-head__sub" id="pair-sub">Reading the request…</p></div>
+      <!-- The page's ONE h1 (one-header-main-h1), in the family's voice; the
+           sub-line is pair.js's — the request, the approval, or the error. -->
+      <div class="page-head page-head--room page-head--panel">
+        <h1 id="pair-h1" class="page-head__h">pairing</h1>
+        <p class="page-head__sub" id="pair-sub">Reading the request…</p>
+      </div>
       <main id="hall-main">
         <section class="scroll" id="pair-scroll" aria-labelledby="pair-h">
           <h2 id="pair-h" class="scroll__h">A device is asking to act as you</h2>

package/modules/hall-ui/public/pair.states.json

@@ -0,0 +1,14 @@
+{
+  "_": "The Dev Box PAIRING page through modules/ui-design/kit/render.js (task 1003308). The device row and the approve button only exist once the pairing request has LOADED, so the populated state runs against the hall-preview harness (see settings.states.json for the two commands; the harness serves scripts/hall-preview/fixtures/auth__app-pair__info.json for any code). `nocode` is the page's own error render — the link arrived without its pairing code — and needs nothing served.",
+  "page": "/pair",
+  "surface": "hall-ui",
+  "stub": { "prefix": "/builders/" },
+  "modeQuery": false,
+  "ignoreRequests": ["/api/(gds|bongos)/"],
+  "ignoreConsole": ["/api/(gds|bongos)/", "\b401\b", "\b404\b", "Unauthorized", "Not Found", "load failed"],
+  "states": {
+    "request": { "auth": true, "url": "/pair?code=K7QD-4M2X", "actions": [["wait", 700]], "expect": { "visible": ["#pair-h1", "#pair-approve-btn"] } },
+    "nocode": { "auth": true, "actions": [["wait", 700]], "expect": { "visible": ["#pair-h1", "#pair-scroll .pair-status--err"] } }
+  },
+  "reducedMotion": { "auth": true, "url": "/pair?code=K7QD-4M2X", "actions": [["wait", 700]] }
+}

package/modules/hall-ui/public/panel.css

@@ -0,0 +1,333 @@
+/* panel.css — the PANEL archetype: a titled panel that holds a form, read top
+   to bottom (task 1003308, goal 1000081). Shared by settings, profile, pair,
+   and not-ready — the pages where the builder reads a label, a
+   sentence of consequence, and then acts on ONE control.
+
+   THE ARCHETYPE is v3 "the glass hall", the owner's pick from the composition
+   round — docs/design/hall-direction-v2.md §6, mock
+   docs/design/mocks/hall/settings/v3.html. Reading order inside a panel: the
+   panel's name, one lede of purpose, then ROWS — each a label, a description in
+   the soft ink, and the control on the right — or a FIELD, its label above it
+   in the label voice, the input and its button on one line, the status line
+   under it, and a note in the faint ink at the foot saying when the change
+   applies. The panel is the shell's `.scroll`; v3 has exactly three card levels
+   and a fourth would be a design decision, not a local override.
+
+   WHAT IS SHARED and what is not: the row, the switch, the field, the chip
+   control, the status/hint/note voices and the sign-in gate are the family's.
+   The section rail and the token ladder are settings' (settings.css); the
+   identity band and the shelf are the profile's (profile.css); the device card
+   is pair's (pair.css).
+
+   THE NAMES the page scripts already write (`.sound-row`, `.sessions-row`,
+   `.settings-btn`, `.craft-chip` …) are aliased onto the family's rules here
+   rather than renamed in three JS files: a class name is not what was wrong
+   with these pages — the six divergent hand-rolled rows were.
+
+   Everything below spends the world's real token names. No compat alias
+   (--surface / --surface-2 / --border / --border-strong / --accent-weak /
+   --accent-text) appears here — they exist for pages nobody has re-skinned, so
+   spending one is legal CSS that quietly opts this sheet back out of the world.
+   `--line` is a WIDTH; the hairline's colour is --rule / --rule-soft. */
+
+/* ---- the page head ------------------------------------------------------ */
+/* The family takes the reading room's VOICE — the page's own name, lowercase in
+   the display face — because on a settings page the document IS the page: the
+   builder came to read their own record and change one line of it. The room's
+   top air is a reading room's; a form page starts at the content edge. */
+.page-head--room.page-head--panel { padding-top: 0; }
+.page-head--room.page-head--panel .page-head__sub { margin-top: var(--sp-sm); }
+
+/* ---- the panel's voices ------------------------------------------------- */
+.panel-lede,
+.scroll > .panel-lede { margin: 0 0 var(--sp-sm); max-width: var(--measure); font-size: 14.5px; color: var(--ink-soft); }
+.panel-note,
+.section-note { margin: var(--sp-sm) 0 0; max-width: var(--measure); font-size: 13px; color: var(--ink-faint); }
+.panel-note:empty, .section-note:empty { display: none; }
+.panel-hint,
+.settings-card__hint { font-size: 13px; color: var(--ink-faint); }
+.panel-status,
+.settings-status,
+.pair-status { margin: var(--sp-xs) 0 0; min-height: 1.2em; font-size: 13.5px; color: var(--ink-soft); }
+.panel-status--ok, .settings-card__ok, .pair-status--ok { color: var(--ok); }
+.panel-status--danger, .pair-status--err { color: var(--danger); }
+.panel-status:empty, .settings-status:empty { margin-top: 0; min-height: 0; }
+/* a prose link in any of the four voices is a control and owes the 24px floor */
+.panel-lede a, .panel-note a, .panel-hint a, .panel-status a, .settings-card__hint a, .section-note a {
+  display: inline-block;
+  min-width: 24px;
+  min-height: 24px;
+  padding: 3px 4px;
+  margin: 0 -4px;
+  color: var(--accent-ink);
+}
+
+/* ---- the row: label, description, control ------------------------------ */
+.prows,
+.sound-rows, .event-sound-rows, .sessions-list, #cross-project-rows, #privacy-rows { display: flex; flex-direction: column; margin-top: var(--sp-sm); }
+.prow,
+.sound-row, .event-sound-row, .sessions-row {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-sm);
+  padding: var(--sp-sm) 0;
+  border-top: var(--line) solid var(--rule-soft);
+}
+.prow__main,
+.sound-row__text, .event-sound-row__text, .sessions-row__main { flex: 1 1 auto; min-width: 0; }
+.prow__label,
+.sound-row__label, .event-sound-row__label, .sessions-row__main > strong { display: block; margin: 0; font-size: 14.5px; font-weight: 500; color: var(--ink); }
+.prow__desc,
+.sound-row__desc, .event-sound-row__desc, .sessions-row__agent, .sessions-row__when { display: block; margin: 2px 0 0; font-size: 13.5px; color: var(--ink-soft); }
+.prow__ctl,
+.event-sound-row__controls { display: flex; align-items: center; justify-content: flex-end; flex: none; flex-wrap: wrap; gap: var(--sp-hair); }
+/* the default note on a row label — "· default for your rank" — is a fact, so it
+   takes the label voice beside the label rather than the label's own weight */
+.prow__tag,
+.voices__default { margin-left: 8px; font-family: var(--label-face); font-size: 10.5px; font-weight: 400; letter-spacing: var(--label-space); text-transform: var(--label-case); color: var(--ink-faint); }
+/* a pick row: the whole row is the radio's label */
+.prow--pick { cursor: pointer; }
+.prow--pick .prow__main { display: block; }
+.prow--pick .prow__label, .prow--pick .prow__desc { display: block; }
+.prow--pick[aria-disabled="true"] { cursor: default; }
+.prow--pick[aria-disabled="true"] .prow__label { color: var(--ink-soft); }
+
+/* the action row at a panel's foot: buttons and their status on one line */
+.row-end,
+.settings-card, .craft-actions, .artkey-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs); margin-top: var(--sp-sm); }
+.row-end .panel-status, .row-end .settings-status,
+.craft-actions .settings-status { margin: 0; }
+
+/* ---- the controls: every one clears 24px on both axes ------------------- */
+/* the family button: a glass pill, 38px, quiet by default. `--save` is the
+   accent door — the panel's one primary act — and takes --accent-on, the dark
+   ink for the salmon; white on it fails AA and DESIGN.md bans it. */
+.pbtn,
+.settings-btn, .sessions-row__end, .event-sound-preview, .pair-approve {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 38px;
+  min-width: 38px;
+  padding: 0 15px;
+  border: var(--line) solid var(--glass-edge);
+  border-radius: var(--radius-pill);
+  background: var(--glass);
+  color: var(--ink);
+  font: inherit;
+  font-size: 14px;
+  line-height: 1.2;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 200ms cubic-bezier(.2,.7,.3,1), border-color 200ms cubic-bezier(.2,.7,.3,1), color 200ms cubic-bezier(.2,.7,.3,1);
+}
+.pbtn:hover:not(:disabled), .settings-btn:hover:not(:disabled), .sessions-row__end:hover:not(:disabled),
+.event-sound-preview:hover:not(:disabled), .pair-approve:hover:not(:disabled) { background: var(--glass-strong); color: var(--ink); text-decoration: none; }
+.pbtn:disabled, .settings-btn:disabled, .sessions-row__end:disabled, .pair-approve:disabled,
+.pbtn[aria-disabled="true"], .settings-btn[aria-disabled="true"] { color: var(--ink-faint); background: var(--glass); cursor: default; }
+.pbtn--quiet, .settings-btn--quiet, .sessions-row__end, .event-sound-preview { background: transparent; }
+.pbtn--save,
+.craft-save, .pair-approve { background: var(--accent); border-color: var(--accent); color: var(--accent-on); font-weight: 500; }
+.pbtn--save:hover:not(:disabled), .craft-save:hover:not(:disabled), .pair-approve:hover:not(:disabled) { background: var(--accent-lift); border-color: var(--accent-lift); color: var(--accent-on); }
+.craft-save:disabled, .pbtn--save:disabled, .pair-approve:disabled { background: var(--glass); border-color: var(--glass-edge); color: var(--ink-faint); }
+/* the shell's `.craft-save` was a bordered box; it is the family's save button
+   now, so it carries the pill's own box model too */
+button.craft-save { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; min-width: 38px; padding: 0 15px; border-radius: var(--radius-pill); font: inherit; font-size: 14px; cursor: pointer; }
+
+/* the field: label above, input and its button on one line */
+.field-label,
+.join-note-label {
+  display: block;
+  margin: var(--sp-sm) 0 var(--sp-hair);
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+}
+.field,
+.display-name-row, .artkey-entry-row, .join { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs); margin-top: 0; }
+.field .field-label { flex: 1 1 100%; margin-top: 0; }
+.pinput,
+.display-name-input, .artkey-input, .join input, .join-note {
+  flex: 1 1 260px;
+  max-width: 420px;
+  min-height: 38px;
+  padding: 0 16px;
+  font: inherit;
+  font-size: 15px;
+  color: var(--ink);
+  background: var(--glass);
+  border: var(--line) solid var(--glass-edge);
+  border-radius: var(--radius-pill);
+  transition: border-color 200ms cubic-bezier(.2,.7,.3,1);
+}
+.pinput::placeholder, .display-name-input::placeholder, .artkey-input::placeholder, .join input::placeholder, .join-note::placeholder { color: var(--ink-faint); }
+.pinput:hover, .display-name-input:hover, .artkey-input:hover, .join input:hover, .join-note:hover { border-color: var(--rule); }
+.pinput[aria-invalid="true"], .display-name-input[aria-invalid="true"] { border-color: var(--danger); }
+/* a secret is typed in the mono face so a pasted key reads as what it is */
+.artkey-input { font-family: var(--font-mono); font-size: 13.5px; }
+.psel,
+.event-sound-select, .voices__select { min-height: 38px; padding: 0 var(--sp-xs); font: inherit; font-size: 14px; color: var(--ink); background: var(--glass); border: var(--line) solid var(--glass-edge); border-radius: var(--radius-pill); cursor: pointer; }
+.psel:hover, .event-sound-select:hover, .voices__select:hover { border-color: var(--rule); }
+.prange,
+.sound-volume input[type="range"] { flex: 1 1 200px; max-width: 260px; height: 38px; margin: 0; accent-color: var(--accent); cursor: pointer; }
+.pradio { width: 24px; height: 24px; flex: none; margin: 0; accent-color: var(--accent); cursor: pointer; }
+.pradio:disabled { cursor: default; opacity: .55; }
+
+/* the switch: a 46x38 button whose drawn track is 44x24 — the target clears
+   the floor, the drawing stays the world's small shape. State is aria-checked;
+   the page scripts still read data-on, which they wrote. */
+.sw,
+.sound-toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 46px;
+  min-width: 46px;
+  height: 38px;
+  flex: none;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background: none;
+  font-size: 0;
+  color: transparent;
+  cursor: pointer;
+}
+.sw__track {
+  width: 44px;
+  height: 24px;
+  border-radius: var(--radius-pill);
+  background: var(--glass-strong);
+  border: 1px solid var(--rule);
+  transition: background 240ms cubic-bezier(.2,.7,.3,1), border-color 240ms cubic-bezier(.2,.7,.3,1);
+}
+.sw__knob {
+  position: absolute;
+  left: 5px;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-pill);
+  background: var(--ink-faint);
+  transition: transform 260ms cubic-bezier(.2,.7,.3,1), background 240ms cubic-bezier(.2,.7,.3,1);
+}
+.sw[aria-checked="true"] .sw__track, .sound-toggle[aria-checked="true"] .sw__track { background: var(--accent-tint); border-color: var(--accent); }
+.sw[aria-checked="true"] .sw__knob, .sound-toggle[aria-checked="true"] .sw__knob { transform: translateX(20px); background: var(--accent); }
+.sw:disabled, .sound-toggle:disabled { cursor: default; opacity: .55; }
+@media (prefers-reduced-motion: reduce) {
+  .sw__track, .sw__knob, .pbtn, .settings-btn, .pinput { transition: none; }
+}
+
+/* the chip control: a checkbox in a pill. The box is a 24px target drawing a
+   14px square — the 13x13 native box was the smallest control in the hall. */
+.chips,
+.craft-chips { display: flex; flex-wrap: wrap; gap: var(--sp-hair); margin-top: var(--sp-sm); }
+.chip-ctl,
+.craft-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 38px;
+  padding: 0 14px 0 8px;
+  border: var(--line) solid var(--glass-edge);
+  border-radius: var(--radius-pill);
+  background: var(--glass);
+  color: var(--ink-soft);
+  font-size: 14px;
+  text-transform: lowercase;
+  cursor: pointer;
+  user-select: none;
+}
+.chip-ctl:has(input:checked), .craft-chip[data-on="1"] { color: var(--ink); border-color: var(--rule); }
+.chip-ctl input, .craft-pref {
+  appearance: none;
+  -webkit-appearance: none;
+  position: relative;
+  width: 24px;
+  height: 24px;
+  margin: 0;
+  flex: none;
+  cursor: pointer;
+}
+.chip-ctl input::before, .craft-pref::before {
+  content: "";
+  position: absolute;
+  inset: 5px;
+  width: 14px;
+  height: 14px;
+  border: var(--line) solid var(--ink-faint);
+  border-radius: 4px;
+  background: transparent;
+}
+.chip-ctl input:checked::before, .craft-pref:checked::before { background: var(--accent); border-color: var(--accent); }
+.chip-ctl input:checked::after, .craft-pref:checked::after {
+  content: "";
+  position: absolute;
+  left: 9px;
+  top: 6px;
+  width: 4px;
+  height: 8px;
+  border: solid var(--accent-on);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+/* ---- the status pill on a row --------------------------------------------- */
+/* the fixed status vocabulary in the label voice — the shell's .fact-pill; the
+   sessions badge is the same pill under the name settings-sessions.js writes */
+.sessions-row__badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 0 11px;
+  margin-left: 8px;
+  border: var(--line) solid currentColor;
+  border-radius: var(--radius-pill);
+  font-family: var(--label-face);
+  font-size: 10.5px;
+  font-weight: 400;
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--info);
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+/* ---- the banner: one line of consequence, warn or ok ---------------------- */
+.pbanner {
+  margin: 0 0 var(--sp-sm);
+  padding: var(--sp-xs) var(--sp-sm);
+  font-size: 14px;
+  line-height: 1.45;
+  color: var(--ink);
+  background: var(--warn-weak);
+  border-left: 2px solid var(--warn);
+  border-radius: var(--radius-sm);
+}
+.pbanner--ok { background: var(--ok-weak); border-left-color: var(--ok); }
+.pbanner strong { font-weight: 500; }
+
+/* ---- the sign-in gate ----------------------------------------------------- */
+/* Shown INSTEAD of the page when there is nobody to show it to. It is a panel
+   with the display voice, the honest sentence, and the one door. */
+.gate { border-top: var(--line) solid var(--glass-edge); }
+.gate__h { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(22px, 2.1vw, 29px); line-height: 1.15; letter-spacing: -.03em; color: var(--ink); }
+.gate__lede { margin: var(--sp-xs) 0 var(--sp-sm); max-width: var(--measure); font-size: 15px; color: var(--ink-soft); }
+.gate .row-end { margin-top: 0; }
+
+/* ---- the skeleton --------------------------------------------------------- */
+/* --skeleton, never --bg-deep: that one collapses to pure black in dark */
+.pskel { display: block; background: var(--skeleton); border-radius: var(--radius-sm); }
+.pskel--row { height: 52px; margin-top: var(--sp-hair); }
+.pskel--h { height: 26px; width: min(240px, 60%); }
+
+/* ---- responsive ----------------------------------------------------------- */
+@media (max-width: 520px) {
+  .prow, .sound-row, .event-sound-row, .sessions-row { flex-direction: column; align-items: flex-start; gap: var(--sp-xs); }
+  .prow__ctl, .event-sound-row__controls { justify-content: flex-start; }
+  .prow--pick { flex-direction: row; align-items: flex-start; }
+  .pinput, .display-name-input, .artkey-input, .join input, .join-note { max-width: none; }
+}

package/modules/hall-ui/public/profile.css

@@ -0,0 +1,85 @@
+/* profile.css — what the builder's profile page has and the rest of the panel
+   family does not (task 1003308, goal 1000081; the archetype is panel.css). The
+   page everyone else reads: the identity band, the figures, the shelf, the
+   ledgers. The figures are the shell's glass band (.stat-row) and the ledgers
+   the shell's .ledger; this sheet owns the identity band and the shelf, both
+   drawn from docs/design/mocks/hall/settings/v3.html (the profile half).
+
+   The shell's .profile grid is shared with Home's Standing card, so the band
+   here is a MODIFIER (.profile--ident) rather than a second rule for the base
+   name; the shelf's .ach is scoped by this sheet loading on this page only. */
+
+/* ---- the identity band ---------------------------------------------------- */
+.profile--ident {
+  grid-template-columns: 56px minmax(0, 1fr) auto;
+  gap: var(--sp-sm);
+  align-items: center;
+}
+.profile--ident .profile__avatar {
+  width: 56px;
+  height: 56px;
+  border-radius: var(--radius-pill);
+  background: var(--skeleton);
+  border: 1px solid var(--rule);
+}
+.profile--ident .profile__name {
+  font-family: var(--font-display);
+  font-weight: 300;
+  font-size: clamp(22px, 2vw, 28px);
+  letter-spacing: -.03em;
+  line-height: 1.1;
+}
+.profile--ident .profile__handle { margin: 4px 0 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); }
+.profile--ident .profile__stats { margin-top: 4px; font-size: 13px; }
+.profile--ident .profile__disciplines { margin-top: 4px; font-size: 13px; }
+.profile--ident .profile__credits-num { font-family: var(--font-display); font-weight: 300; font-size: clamp(26px, 2.4vw, 32px); letter-spacing: -.035em; line-height: 1; color: var(--ink); }
+.profile--ident .profile__credits-label,
+.profile--ident .profile__karma-label { font-family: var(--label-face); font-size: var(--label-size); font-weight: 400; letter-spacing: var(--label-space); text-transform: var(--label-case); color: var(--ink-faint); }
+.profile--ident .profile__karma-num { font-weight: 500; }
+.profile--ident .profile__placeholder { grid-column: 1 / -1; }
+
+/* ---- the shelf -------------------------------------------------------------
+   An achievement is a --bg-card tile on the ground (the section is bare, so a
+   tile is the panel and not a card in a card), a hairline on top, the mark as
+   its figure, the name at the row's weight and the day it was won in the soft
+   ink at the foot. */
+.ach-grid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: var(--sp-sm); }
+.ach {
+  flex-direction: column;
+  gap: 5px;
+  padding: 18px;
+  background: var(--bg-card);
+  border: var(--line) solid var(--glass-edge);
+  border-top-color: var(--rule);
+  border-radius: var(--radius);
+}
+.ach__icon { font-size: 22px; line-height: 1; margin-bottom: 4px; }
+.ach__name { font-size: 14.5px; font-weight: 500; margin: 0; }
+.ach__desc { font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
+.ach__bonus { margin: auto 0 0; padding-top: var(--sp-hair); font-size: 12.5px; font-weight: 400; color: var(--ink-soft); }
+.ach--locked { border-top-color: var(--rule-soft); }
+.ach--locked .ach__name, .ach--locked .ach__desc { color: var(--ink-faint); }
+
+/* ---- the ledgers ---------------------------------------------------------- */
+/* A title in a ledger cell is a door and owes the 24px floor on both axes; it
+   measured 18px tall on every populated render (thirteen links a page). The
+   prose-link recipe: inline-block buys the height, the padding buys the width,
+   the negative margin hands both back so the cell does not re-space. */
+#works-scroll .ledger td a,
+#activity-scroll .ledger td a,
+#xp-scroll a {
+  display: inline-block;
+  min-width: 24px;
+  min-height: 24px;
+  padding: 3px 4px;
+  margin: -3px -4px;
+  color: var(--accent-ink);
+}
+.profile-act__h { margin: var(--sp-md) 0 var(--sp-xs); font-size: 15px; font-weight: 500; color: var(--ink); }
+#activity-body > [id$="-panel"] + [id$="-panel"] { margin-top: var(--sp-md); }
+
+@media (max-width: 640px) {
+  .profile--ident { grid-template-columns: 48px minmax(0, 1fr); }
+  .profile--ident .profile__avatar { width: 48px; height: 48px; }
+  .profile--ident .profile__credits { grid-column: 2; align-items: flex-start; text-align: left; }
+}