@bongos/core 1.19.448 → 1.19.450

package/docs/file-map.md

@@ -127,7 +127,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.
+│   ├── 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. Two ARCHETYPE sheets sit beside the per-page ones: `record.css` (the task + idea records, task 1003305) and `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). A page sheet then holds only what one page has and the other does not — `primer.css` the acknowledge gate, `diagrams.css` the legend strip.
 │   ├── 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), 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. Reserved home styles/ (1003323) with a README. 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

@@ -1333,5 +1333,9 @@ is load-bearing: the script throws rather than guess if it is missing, and
         landed since 1.19.446 with no explicit bump. run 33345047021. (task 1002620)
   1.19.448 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
         landed since 1.19.447 with no explicit bump. run 33348050270. (task 1002620)
+  1.19.449 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
+        landed since 1.19.448 with no explicit bump. run 33406714743. (task 1002620)
+  1.19.450 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
+        landed since 1.19.449 with no explicit bump. run 33414986466. (task 1002620)
 ---------------------------------------------------------------------------
 ```

package/modules/hall-ui/public/diagram-viewer.css

@@ -1,17 +1,30 @@
 /* diagram-viewer.css — pannable / zoomable canvas for the onboarding diagrams
-   (task 1059). Replaces the static PNG click-to-zoom lightbox on
-   /builders/diagrams and the primer: each diagram's vector SVG loads inline
-   into a canvas you DRAG to pan and SCROLL to zoom (Figma-style), with a
-   toolbar and a fullscreen mode. Themed via the shared design tokens from
-   style.css (with neutral fallbacks). */
+   (task 1059; rebuilt into the chrome world by task 1003306). Replaces the
+   static PNG click-to-zoom lightbox on /builders/diagrams and the primer: each
+   diagram's vector SVG loads inline into a canvas you DRAG to pan and SCROLL to
+   zoom (Figma-style), with a toolbar and a fullscreen mode.
+
+   THE FALLBACKS ARE GONE, and that is a fix rather than a tidy-up. This sheet
+   carried eleven `var(--x, LITERAL)` pairs whose tokens all exist and always
+   have — so the literal never rendered, and all it did was encode drift: the
+   `--ink` fallback said #2a2a2a where the sheet ships #17181a, and a reader
+   comparing the two would have believed the wrong one. A fallback for a token
+   that cannot be missing is a second, stale source of truth.
+
+   Likewise the two raw box-shadows (v3's panels separate by TONE, never a drawn
+   box and never a shadow), the hand-written `z-index: 9999` (now
+   --z-diagram-full, named in the shell's ladder), and the scroll lock, which
+   reached for `body` where the shell's own drawer locks on the root element.
+
+   `--line` is a WIDTH; the hairline's colour is --rule / --rule-soft. No compat
+   alias (--surface / --border / …) appears here. */
 
 .dgv {
   position: relative;
   margin: 0 auto;
-  background: var(--surface, #fff);
-  border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
-  border-radius: var(--radius-sm, 8px);
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
+  background: var(--bg-card);
+  border: var(--line) solid var(--rule-soft);
+  border-radius: var(--radius);
   overflow: hidden;
 }
 
@@ -24,8 +37,8 @@
   overflow: hidden;
   /* faint dotted "drawing board" texture, like a design tool */
   background:
-    radial-gradient(circle at center, color-mix(in srgb, var(--ink, #000) 5%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px,
-    var(--surface, #fff);
+    radial-gradient(circle at center, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px,
+    var(--bg-card);
   cursor: grab;
   /* Inline: allow vertical page scroll through the canvas (touch) so the reader
      is never trapped scrolling past a diagram; a mouse drag still pans and a
@@ -35,7 +48,7 @@
 }
 .dgv.is-fullscreen .dgv__stage { touch-action: none; }
 .dgv__stage.is-panning { cursor: grabbing; }
-.dgv__stage:focus-visible { box-shadow: inset 0 0 0 2px var(--accent, #4f63e7); }
+.dgv__stage:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
 
 /* The transform layer — translate()+scale() is set here by the script. */
 .dgv__pan {
@@ -48,7 +61,8 @@
 .dgv__pan.is-smooth { transition: transform 0.16s ease-out; } /* button zoom / fit only */
 .dgv__pan svg { display: block; }
 
-/* Floating control bar — bottom-right of the canvas. */
+/* Floating control bar — bottom-right of the canvas. Glass, like every other
+   control the world floats over content. */
 .dgv__toolbar {
   position: absolute;
   right: 10px;
@@ -57,10 +71,9 @@
   align-items: center;
   gap: 2px;
   padding: 3px;
-  background: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
-  border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
-  border-radius: var(--radius-sm, 8px);
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
+  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
+  border: var(--line) solid var(--glass-edge);
+  border-radius: var(--radius-pill);
   -webkit-backdrop-filter: blur(2px);
   backdrop-filter: blur(2px);
   user-select: none;
@@ -70,55 +83,59 @@
   -webkit-appearance: none;
   border: 0;
   background: transparent;
-  font: 600 14px/1 var(--font-body, system-ui, sans-serif);
-  color: var(--ink, #2a2a2a);
+  font: 500 14px/1 var(--font-body);
+  color: var(--ink-soft);
   min-width: 30px;
   height: 30px;
   padding: 0 8px;
-  border-radius: 6px;
+  border-radius: var(--radius-pill);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
-.dgv__btn:hover { background: color-mix(in srgb, var(--ink, #000) 7%, transparent); }
-.dgv__btn:focus-visible { outline: 2px solid var(--accent, #4f63e7); outline-offset: 1px; }
+.dgv__btn:hover { background: var(--glass); color: var(--ink); }
+.dgv__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
 .dgv__btn--wide { min-width: 56px; font-variant-numeric: tabular-nums; }
-.dgv__sep { width: 1px; height: 18px; background: var(--border, rgba(0, 0, 0, 0.12)); margin: 0 3px; }
+.dgv__sep { width: var(--line); height: 18px; background: var(--rule-soft); margin: 0 3px; }
 
 /* Hint pill — top-left; fades the moment the reader interacts. */
 .dgv__hint {
   position: absolute;
   top: 10px;
   left: 10px;
-  font: 500 11px/1 var(--font-body, system-ui, sans-serif);
-  letter-spacing: 0.04em;
-  color: var(--ink-soft, #555);
-  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
-  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
-  border-radius: 999px;
+  font: 400 var(--label-size)/1 var(--label-face);
+  letter-spacing: var(--label-space);
+  color: var(--ink-faint);
+  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
+  border: var(--line) solid var(--glass-edge);
+  border-radius: var(--radius-pill);
   padding: 5px 10px;
   pointer-events: none;
   transition: opacity 0.4s ease;
 }
 .dgv.is-touched .dgv__hint { opacity: 0; }
 
-/* Fullscreen — promote the whole .dgv to a fixed overlay. */
+/* Fullscreen — promote the whole .dgv to a fixed overlay. It covers the shell
+   entirely, so it is the top of the z ladder. */
 .dgv.is-fullscreen {
   position: fixed;
   inset: 0;
-  z-index: 9999;
+  z-index: var(--z-diagram-full);
   margin: 0;
   border: 0;
   border-radius: 0;
-  background: color-mix(in srgb, var(--ink, #1a1d23) 96%, transparent);
+  background: var(--bg);
 }
 .dgv.is-fullscreen .dgv__stage {
   height: 100vh;
   height: 100dvh;
-  background-color: var(--surface, #fff);
+  background-color: var(--bg-card);
 }
-body.dgv-fullscreen-open { overflow: hidden; }
+/* The scroll lock goes on the ROOT element, which is where the shell's own
+   drawer puts it (html.drawer-open in style.css). Two overlays locking the same
+   page on two different elements is how one of them stops working. */
+html.dgv-fullscreen-open { overflow: hidden; }
 
 @media (prefers-reduced-motion: reduce) {
   .dgv__pan.is-smooth { transition: none; }

package/modules/hall-ui/public/diagram-viewer.js

@@ -177,7 +177,10 @@
 
   function toggleFullscreen(ctx) {
     const on = ctx.dgv.classList.toggle('is-fullscreen');
-    document.body.classList.toggle('dgv-fullscreen-open', on);
+    // The lock goes on the ROOT element — where the shell's own drawer puts its
+    // one (html.drawer-open). Two overlays locking the same page on two
+    // different elements is how one of them stops working.
+    document.documentElement.classList.toggle('dgv-fullscreen-open', on);
     fullscreen = on ? ctx : null;
     const b = ctx.toolbar.querySelector('[data-act="full"]');
     if (b) b.title = on ? 'Exit fullscreen (Esc)' : 'Fullscreen';

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

@@ -0,0 +1,45 @@
+/* diagrams.css — what the DIAGRAMS index has that the other reading rooms do
+   not (task 1003306, goal 1000081).
+
+   The room — the framed figure, the reading measure, the prose rhythm — is the
+   shared archetype in room.css, which this page loads first. What is left here
+   is the legend strip: the three-state key (live / planned / reserved) that
+   tells a reader how to read the five generated diagrams. It is genuinely this
+   page's alone, so it is this page's sheet.
+
+   Promoted out of a 16-line inline <style> block, which sat one line over the
+   hall's default budget with its own tests/hall_audit.mjs exception. The
+   exception retires with it, and the hall now carries no substantive inline
+   style at all.
+
+   The diagrams themselves are GENERATED (scripts/gds/gen-diagrams.js writes the
+   .svg/.png pair and assertions.json in lockstep) — never hand-edit a .mmd. */
+
+/* The key sits above the figures on the ground of its own panel, wrapping to a
+   column on a phone rather than scrolling sideways. */
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp-xs) var(--sp-md);
+  margin: 0;
+}
+.legend__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 24px;
+  font-size: 13.5px;
+  color: var(--ink-soft);
+}
+/* The three states are the hall's fixed status vocabulary, not accent-derived:
+   a diagram's "planned" must not be the same salmon as a claim button. */
+.legend__swatch {
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  font-weight: 400;
+  white-space: nowrap;
+}
+.legend__swatch--live { color: var(--ok); }
+.legend__swatch--planned { color: var(--warn); }
+.legend__swatch--reserved { color: var(--ink-faint); }

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

@@ -9,27 +9,14 @@
   <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">
+  <link rel="stylesheet" href="/builders/room.css">
+  <link rel="stylesheet" href="/builders/diagrams.css">
   <link rel="stylesheet" href="/builders/diagram-viewer.css?v=2026-06-14-diagviewer-1">
-  <style>
-    /* Page-local styles for the diagrams page — the legend strip and figure
-       frames. Everything derives from the shared design tokens so instance
-       packs reskin this page along with the rest of the hall. */
-    .legend { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: center; margin: 0 0 1rem; padding: 1rem; }
-    .legend__item { display: flex; align-items: center; gap: .5rem; font-size: .95rem; }
-    .legend__swatch { font-weight: 700; }
-    .legend__swatch--live { color: var(--ok); }
-    .legend__swatch--reserved { color: var(--ink-faint); }
-    .legend__swatch--planned { color: var(--warn); }
-    figure.diagram { margin: 0 0 2.5rem; text-align: center; }
-    figure.diagram img {
-      max-width: 100%; height: auto; border: 1px solid var(--border);
-      border-radius: var(--radius-sm); background: var(--surface); padding: .5rem;
-      box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
-    }
-    figure.diagram figcaption { margin-top: .6rem; font-size: .9rem; color: var(--ink-soft); }
-  </style>
 </head>
-<body data-page="diagrams" data-page-title="Diagrams">
+<!-- `room` opts this page into the reading-room archetype's composition tokens
+     (room.css) — the framed figure here is the same object the primer inlines,
+     and diagram-viewer.js upgrades both with one selector. -->
+<body class="room" data-page="diagrams" data-page-title="Diagrams">
 
 <div class="app">
   <aside class="app-sidebar" id="app-sidebar" aria-label="Primary"></aside>
@@ -37,7 +24,12 @@
   <div class="app-body">
     <header class="app-topbar" id="app-topbar"></header>
     <div class="app-content">
-      <div class="page-head">
+      <!-- The page had no <h1> at all before task 1003306, so it failed
+           one-header-main-h1 on every render. The reading room's head: the
+           label voice on the eyebrow, the room's name in the display face. -->
+      <div class="page-head page-head--room">
+        <p class="page-head__eyebrow">Docs</p>
+        <h1 class="page-head__h">How the system works</h1>
         <p class="page-head__sub">Five diagrams that show, at a glance, how work flows through {{worldName}}'s development system. <em>Drag to pan, scroll to zoom</em> — or open any diagram fullscreen.</p>
       </div>
 

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

@@ -0,0 +1,28 @@
+{
+  "_": "The hall's diagrams index through modules/ui-design/kit/render.js (task 1003306). Five generated figures on one page is the hall's widest content, so the horizontal-overflow floor at 320 is the one this file exists for.",
+  "page": "/builders/diagrams",
+  "surface": "hall-ui",
+  "stub": { "prefix": "/builders/" },
+  "modeQuery": false,
+  "_feeds": "The diagrams are generated PNG/SVG pairs written by scripts/gds/gen-diagrams.js and served from /builders/diagrams/*; the kit's stub has neither those nor the hall's feeds, so both are declared. diagram-viewer.js upgrades each <img> into a pan/zoom canvas only once its .svg fetch succeeds — under the stub it does not, so what renders here is the graceful-degradation path: the framed figure with a static image in it. That IS the state to measure, because it is what a reader gets whenever the vector is unavailable.",
+  "ignoreRequests": [
+    "/api/(gds|bongos)/me$",
+    "/api/(gds|bongos)/me/",
+    "/api/(gds|bongos)/goals",
+    "/api/(gds|bongos)/inbox/",
+    "/builders/diagrams/"
+  ],
+  "ignoreConsole": [
+    "/api/(gds|bongos)/",
+    "\\b401\\b",
+    "\\b404\\b",
+    "Unauthorized",
+    "Not Found",
+    "load failed"
+  ],
+  "states": {
+    "in": { "auth": true, "expect": { "visible": ["#hall-main"] } },
+    "out": { "auth": false }
+  },
+  "reducedMotion": { "auth": true }
+}

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

@@ -1,89 +1,156 @@
-/* modules/hall-ui/public/idea.css — the idea-detail page (task 1002929 / R153
-   of goal 1000062).
+/* idea.css — what the IDEA record has that the task record does not
+   (task 1002929 / R153 of goal 1000062; re-skinned into the chrome world by
+   task 1003305, goal 1000081).
 
-   Promoted out of an inline <style> because tests/hall_audit.mjs budgets an inline
-   block at 15 lines and this is ~60: past that the documented pattern (task 2176)
-   is a per-page stylesheet. The exceptions in that budget map are grandfathered or
-   deliberate; a brand-new page has no business claiming one.
+   The shared composition — the way back, the kind eyebrow, the title, the
+   sections, the honest failure heading — is record.css, which idea.html loads
+   first. What is left here is the four shapes only an idea has: its grade badge,
+   its attribution pair, its completeness readout, and the author-only mark
+   control.
 
-   Built on the hall's tokens. No --line/--panel: neither is defined in style.css,
-   so a fallback is all you would ever get and both assume a dark ground the hall
-   does not have by default (--bg is #f5f6f8). */
+   Retired with the re-skin: `.idea-detail__back` (the archetype's `.rec-back`),
+   `.ig-head` and `.ig-title` (the archetype's `.rec-kind` and `.rec-title`), and
+   every compat alias this sheet used to spend — --surface-2 → --glass,
+   --border → --rule-soft, --accent-weak/--accent-text → --accent-tint/--accent-ink.
+   The aliases still EXIST for the pages nobody has re-skinned, which is exactly
+   why spending one here would be legal CSS that quietly opts this sheet back out
+   of the world. `--line` is a WIDTH; the hairline's colour is --rule/--rule-soft. */
 
-/* Page-local, like task.html (task 751) — this page adds a handful of shapes
-   and reuses the hall's tokens for everything else. No --line/--panel here:
-   neither is defined in style.css, so a fallback is all you would ever get
-   and both assume a dark ground the hall does not have by default. */
-
-.idea-detail__back { font-size: 13px; color: var(--ink-soft); text-decoration: none; display: inline-block; margin-bottom: 10px; }
-.idea-detail__back:hover { color: var(--ink); text-decoration: underline; }
-
-/* The grade is the first thing to read: it decides what the rest of the page
-   even contains. Three states, distinguished by colour AND by word — a badge
-   that only differs by hue is unreadable to a chunk of readers. */
-.ig-grade {
-  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px;
-  border-radius: 999px; font-size: 12px; font-weight: 600;
-  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-soft);
-}
-.ig-grade--full  { background: var(--ok-weak);     color: var(--ok);          border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
-.ig-grade--spark { background: var(--warn-weak);   color: var(--warn);        border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
-.ig-grade--quick { background: var(--accent-weak); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
-
-.ig-head { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 4px; }
-.ig-title { margin: 0; font-size: 1.15rem; text-wrap: balance; }
+/* ---- the grade badge is NOT here ------------------------------------------
+   It is the archetype's `.rec-pill`, spent by idea.js's gradeBadge() through
+   GRADE_TONE. The badge is the first thing to read — it decides what the rest of
+   the page even contains — and it is distinguished by colour AND by word,
+   because a badge that differs only by hue is unreadable to a chunk of readers.
+   But a grade CLASSIFIES the record, which is the same job the task record's
+   status pill does, so it is the same component and not a lookalike: this sheet
+   carried a near-verbatim copy of `.rec-pill` down to the token triples, which
+   is a hundred lines of the archetype waiting to drift the first time one of the
+   two was touched. That is precisely what record.css exists to prevent. */
 
+/* ---- the status line ----------------------------------------------------- */
 .ig-meta {
-  font-size: 13px; color: var(--ink-soft); margin: 0 0 16px;
-  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 16px;
+  align-items: baseline;
+  margin: 0 0 var(--sp-md);
+  font-size: 14px;
+  color: var(--ink-soft);
+  font-variant-numeric: tabular-nums;
+}
+.ig-meta strong { color: var(--ink); font-weight: 500; }
+.ig-meta a {
+  display: inline-block;
+  min-height: 24px;
+  padding: 3px 0;
+  line-height: 18px;
+  color: var(--ink);
+  border-bottom: var(--line) solid var(--rule);
 }
-.ig-meta strong { color: var(--ink); font-weight: 600; }
+.ig-meta a:hover { border-bottom-color: var(--ink); text-decoration: none; }
 
-/* Attribution is its own block, not a line in the meta run: on a developed
-   idea it carries TWO people and the whole point of R146 was that both
-   survive. Burying that in a comma list is how one of them gets lost. */
-.ig-credit {
-  display: grid; gap: 6px;
-  padding: 12px 14px; margin: 0 0 18px;
-  border: 1px solid var(--border); border-radius: var(--radius-sm);
-  background: var(--surface-2); font-size: 13px;
+/* ---- attribution --------------------------------------------------------- */
+/* Its own block, not a line in the meta run: a developed idea carries TWO people
+   and the whole point of R146 was that both survive. Burying that in a comma
+   list is how one of them gets lost. v1's bare ledger inside a v3 panel — a
+   hairline on top, air, and the first row drops both — rather than the boxed
+   well it used to be, because in v3 tone does the separation and a bordered card
+   inside a card is the treatment the owner's pick removed. */
+.ig-credit { display: grid; margin: 0 0 var(--sp-md); }
+.ig-credit__row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+  align-items: baseline;
+  border-top: var(--line) solid var(--rule-soft);
+  padding: 11px 0;
+  font-size: 14px;
 }
-.ig-credit__row { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
-.ig-credit__who { color: var(--ink); font-weight: 600; }
+.ig-credit__row:first-child { border-top: 0; padding-top: 0; }
+.ig-credit__who { color: var(--ink); font-weight: 500; }
 .ig-credit__role { color: var(--ink-faint); }
 
-/* The five answers, laid out to be READ: one column, generous leading, a
-   measure that stops around 70 characters. */
-.ig-answers { display: grid; gap: 18px; margin: 4px 0 0; }
-.ig-answer__q { margin: 0 0 4px; font-size: 0.92rem; font-weight: 600; }
-.ig-answer__a { margin: 0; max-width: 70ch; line-height: 1.65; white-space: pre-wrap; }
+/* ---- the five answers ---------------------------------------------------- */
+/* Laid out to be READ: one column, generous leading, and the measured reading
+   width. `--measure` is 48ch MEASURED to render ~60 characters — the old `70ch`
+   here rendered closer to 88, because a `ch` is the zero glyph's width and
+   Manrope's zero is much wider than its average lowercase. */
+.ig-answers { display: grid; gap: var(--sp-md); margin: var(--sp-md) 0 0; }
+.ig-answer__q {
+  margin: 0 0 8px;
+  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);
+}
+.ig-answer__a {
+  margin: 0;
+  max-width: var(--measure);
+  font-size: 15px;
+  line-height: 1.65;
+  color: var(--ink-soft);
+  white-space: pre-wrap;
+}
 .ig-answer__a[data-empty="1"] { color: var(--ink-faint); font-style: italic; }
 
-.ig-score { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
-.ig-score__track { width: 140px; height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
-.ig-score__fill { height: 100%; border-radius: 4px; background: var(--accent); }
+/* ---- the completeness readout -------------------------------------------- */
+/* A READOUT, never an input: every number in it comes from the server's scorer.
+   The three bands describe the TEXT, not a verdict — the pass bar lives in the
+   economy module and this bar deliberately does not know it — which is why they
+   are the state colours and not the accent. */
+.ig-score { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--sp-xs); }
+.ig-score__track { width: 140px; height: 6px; border-radius: 3px; background: var(--skeleton); overflow: hidden; }
+.ig-score__fill { display: block; height: 100%; border-radius: 3px; background: var(--info); }
 .ig-score__fill[data-band="full"] { background: var(--ok); }
 .ig-score__fill[data-band="part"] { background: var(--warn); }
 .ig-score__fill[data-band="thin"] { background: var(--danger); }
-.ig-score__n { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
-
-.ig-body { max-width: 70ch; line-height: 1.65; white-space: pre-wrap; margin: 4px 0 0; }
-.ig-empty { color: var(--ink-faint); font-size: 0.9rem; }
-.ig-note { font-size: 0.82rem; color: var(--ink-faint); line-height: 1.55; margin: 14px 0 0; }
-.ig-sub { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
-.ig-sub__h { margin: 0 0 8px; font-size: 0.95rem; }
+.ig-score__n {
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+  font-variant-numeric: tabular-nums;
+}
 
-/* ---- the mark control (task 1002930 / R154) -----------------------------
-   Author-only, and rendered as its own block rather than a button in a toolbar:
-   offering your idea up for someone else to develop is a decision, and the one
-   sentence explaining what it means to you is the part that makes it one. */
-.ig-mark {
-  margin-top: 20px;
-  padding: 14px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--surface-2);
+/* ---- the prose ----------------------------------------------------------- */
+.ig-body {
+  margin: var(--sp-xs) 0 0;
+  max-width: var(--measure);
+  font-size: 15px;
+  line-height: 1.65;
+  color: var(--ink-soft);
+  white-space: pre-wrap;
 }
-.ig-mark__lede { margin: 0 0 10px; font-size: 13px; color: var(--ink-soft); max-width: 62ch; line-height: 1.55; }
-.ig-mark__err { margin: 8px 0 0; font-size: 13px; color: var(--danger); }
+.ig-body[data-empty="1"] { color: var(--ink-faint); font-style: italic; }
+.ig-empty { margin: 0; font-size: 14px; color: var(--ink-faint); }
+.ig-note {
+  margin: var(--sp-md) 0 0;
+  max-width: var(--measure);
+  font-size: 13.5px;
+  line-height: 1.55;
+  color: var(--ink-faint);
+}
+.ig-note a { display: inline-block; min-height: 24px; padding: 3px 4px; margin: 0 -4px; line-height: 18px; }
+.ig-sub { margin-top: var(--sp-lg); padding-top: var(--sp-sm); border-top: var(--line) solid var(--rule-soft); }
+.ig-sub__h {
+  margin: 0;
+  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);
+}
+
+/* ---- the mark control (task 1002930 / R154) ------------------------------ */
+/* Author-only, and its own block rather than a button in a toolbar: offering
+   your idea up for someone else to develop is a decision, and the one sentence
+   explaining what it means to you is the part that makes it one. It is the page's
+   one live thing, so `.btn` — the accent door — is warm here and nowhere else. */
+.ig-mark { margin-top: var(--sp-lg); padding-top: var(--sp-sm); border-top: var(--line) solid var(--rule-soft); }
+.ig-mark__lede { margin: 0 0 var(--sp-sm); max-width: var(--measure); font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
+.ig-mark__err { margin: var(--sp-xs) 0 0; font-size: 13.5px; color: var(--danger); }
 .ig-mark__err:empty { display: none; }

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

@@ -9,6 +9,9 @@
   <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 record archetype, shared with task.html (task 1003305). idea.css below
+       carries only what an idea record has and a task record does not. -->
+  <link rel="stylesheet" href="/builders/record.css">
   <link rel="stylesheet" href="/builders/idea.css">
 </head>
 <body data-page="idea" data-page-title="Idea">
@@ -23,14 +26,21 @@
         <!-- This page is deliberately not in the nav (it is always reached from a
              link), so a deep-linked visitor needs a way back before the body loads
              — the task.html precedent. -->
-        <a class="idea-detail__back" href="/ideas">← Back to Ideas</a>
-        <p class="page-head__sub" id="idea-sub">Loading idea…</p>
+        <div class="rec-crumb">
+          <a class="rec-back" href="/ideas">
+            <svg class="rec-back__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M9.4 3.6 5 8l4.4 4.4"/><path d="M5 8h7.2"/></svg>Back to ideas</a>
+          <p class="rec-sub" id="idea-sub">Loading idea</p>
+        </div>
       </div>
 
       <main id="hall-main">
         <section class="scroll" id="idea-scroll" aria-labelledby="idea-h">
           <div id="idea-body">
-            <p class="deeplink-card__title" id="idea-h">Loading…</p>
+            <!-- The h1 is present in EVERY state, this one included: the
+                 one-header-main-h1 floor measures the rendered DOM, and a page
+                 whose heading only arrives with the fetch has none while it
+                 loads, and none at all when the read fails. -->
+            <h1 class="rec-big" id="idea-h">Loading the idea</h1>
           </div>
         </section>
       </main>