@bongos/core 1.21.36 → 1.21.37

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

@@ -1206,8 +1206,8 @@ html[data-fullscreen="on"][data-fullscreen-plain="on"] .app-content { padding-to
 /* THE CRAFT MODE (task 1004492, craft-mode.js). The top bar's switch: one pill
    holding the four crafts and Legacy, the current one lit. Narrower windows
    drop the words, and a phone shows only the current mode (or "Mode"), which
-   opens the picker. The picker below asks once per session. Neither paints a
-   mode's colour — the looks are their own task (1004495). */
+   opens the picker. The picker below asks once per session. Each mode's look
+   (its colour on the current pill) is THE CRAFT MODE LOOKS, further down. */
 .craft-switch {
   display: inline-flex;
   align-items: center;
@@ -1431,6 +1431,125 @@ html.craft-picker-open { overflow: hidden; }
   .craft-picker__legacy { height: auto; min-height: 40px; white-space: normal; text-align: left; }
 }
 
+/* THE CRAFT MODE LOOKS (task 1004495; direction docs/design/craft-mode-direction.md).
+   Three modes wear a look: Artistry, Ideating, Governing. Building, Legacy and no
+   mode wear none — nothing below names them, so they render as the hall always
+   did (tests/craft_mode_looks.mjs pins it). --craft marks WHERE you are, never
+   what to press: the accent stays the action colour in every mode. Light values
+   clear 5.4:1 on the hall's paper; the dark values are the prototype's. Light
+   keeps the paper ground; only dark changes the ground and the glass. */
+html[data-craft="artistry"] { --craft: #2e3c6e; --craft-on: #f1e6d2; }
+html[data-craft="ideating"] { --craft: #7a5a0c; --craft-on: #fdf6dd; }
+html[data-craft="governing"] { --craft: #33479e; --craft-on: #eef1ff; }
+html[data-theme="dark"][data-craft="artistry"] {
+  --craft: #f1e6d2; --craft-on: #0c1122;
+  --bg: #07080d; --bg-frame: #0a0b12;
+  --glass: rgba(150, 170, 230, .11); --glass-strong: rgba(170, 190, 240, .17);
+  --glass-edge: rgba(241, 230, 210, .16);
+}
+html[data-theme="dark"][data-craft="ideating"] {
+  --craft: #f2d27a; --craft-on: #1d1604;
+  --bg: #05060d;
+  --glass: rgba(140, 150, 225, .10); --glass-strong: rgba(160, 170, 240, .16);
+  --glass-edge: rgba(242, 210, 122, .16);
+}
+html[data-theme="dark"][data-craft="governing"] {
+  --craft: #aabeff; --craft-on: #0a1030;
+  --glass-edge: rgba(170, 190, 255, .16);
+}
+/* The shared treatment: the switch's current pill, the current tab and the top
+   bar's hairline take the mode colour. */
+html:is([data-craft="artistry"], [data-craft="ideating"], [data-craft="governing"]) .craft-switch__opt[aria-pressed="true"] {
+  background: var(--craft); color: var(--craft-on);
+}
+html:is([data-craft="artistry"], [data-craft="ideating"], [data-craft="governing"]) .nav-item--active {
+  background: color-mix(in srgb, var(--craft) 14%, transparent); color: var(--craft);
+}
+html:is([data-craft="artistry"], [data-craft="ideating"], [data-craft="governing"]) .nav-item--active .nav-icon,
+html:is([data-craft="artistry"], [data-craft="ideating"], [data-craft="governing"]) .nav-item--active .nav-item__label { color: var(--craft); }
+html:is([data-craft="artistry"], [data-craft="ideating"], [data-craft="governing"]) .nav-item--active::before { background: var(--craft); }
+html:is([data-craft="artistry"], [data-craft="ideating"], [data-craft="governing"]) .app-topbar {
+  border-bottom-color: color-mix(in srgb, var(--craft) 30%, transparent);
+}
+/* The header mark: the mode's own words beside the page title (craft-mode.js
+   applyLook). Hidden on a phone — the switch's one pill already says the mode,
+   and the bar has no room for both. */
+.craft-eyebrow {
+  font-family: var(--label-face);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: var(--craft);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+@media (max-width: 640px) { .craft-eyebrow { display: none; } }
+/* The signature: the mode's door scene (craft-mode.js artHtml, the same art the
+   picker draws) framed under the brand, 40px in the closed rail and 64px open.
+   The 110px-tall scene is scaled to the plate's height and widened to fill it,
+   never redrawn: each scene's pieces are placed from its edges or its centre. */
+.craft-plate {
+  position: relative;
+  height: 40px;
+  margin: 10px 8px 0;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  flex-shrink: 0;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--craft) 30%, transparent);
+}
+.craft-plate .craft-art {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: calc(100% / .364);
+  height: 110px;
+  transform: scale(.364);
+  transform-origin: 0 0;
+}
+.craft-plate .craft-art__city { top: 0; }
+.app-sidebar:hover .craft-plate,
+.app-sidebar:focus-within .craft-plate { height: 64px; margin: 10px 16px 0; }
+.app-sidebar:hover .craft-plate .craft-art,
+.app-sidebar:focus-within .craft-plate .craft-art { width: calc(100% / .582); transform: scale(.582); }
+@media (max-width: 768px) {
+  .craft-plate { height: 64px; margin: 10px 16px 0; }
+  .craft-plate .craft-art { width: calc(100% / .582); transform: scale(.582); }
+}
+/* The plate follows the theme (owner, 2026-10-03): light shows each scene's day. */
+html[data-theme="light"] .craft-plate .craft-art--artistry { background: #dfe3ef; }
+html[data-theme="light"] .craft-plate .craft-art__dot--star { background: #2e3c6e; }
+html[data-theme="light"] .craft-plate .craft-art__moon { background: #f3c98b; box-shadow: 0 0 0 9px rgba(243, 201, 139, .28); }
+html[data-theme="light"] .craft-plate .craft-art__ground { background: #c3c9dc; }
+html[data-theme="light"] .craft-plate .craft-art__house { background: #8d97b8; }
+html[data-theme="light"] .craft-plate .craft-art--ideating { background: #f6f0dc; }
+html[data-theme="light"] .craft-plate .craft-art__dot--gold { background: #c9a23a; }
+html[data-theme="light"] .craft-plate .craft-art__dot--glow { background: #b8891c; box-shadow: 0 0 10px rgba(184, 137, 28, .45); }
+html[data-theme="light"] .craft-plate .craft-art__dot--proto { box-shadow: inset 0 0 0 1px rgba(122, 90, 12, .6); }
+html[data-theme="light"] .craft-plate .craft-art__ring { box-shadow: inset 0 0 0 1px rgba(122, 90, 12, .35); }
+html[data-theme="light"] .craft-plate .craft-art--governing { background: #e9ecf6; }
+html[data-theme="light"] .craft-plate .craft-art__city { filter: invert(1) hue-rotate(180deg); }
+/* Ideating's star dust: a few faint fixed specks across the rail itself. */
+html[data-craft="ideating"] .app-sidebar {
+  background-image:
+    radial-gradient(1px 1px at 14px 40px, rgba(242, 210, 122, .5), transparent),
+    radial-gradient(1px 1px at 46px 130px, rgba(242, 210, 122, .35), transparent),
+    radial-gradient(1.5px 1.5px at 120px 90px, rgba(242, 210, 122, .4), transparent),
+    radial-gradient(1px 1px at 200px 190px, rgba(242, 210, 122, .35), transparent),
+    radial-gradient(1px 1px at 30px 230px, rgba(242, 210, 122, .3), transparent),
+    radial-gradient(1.5px 1.5px at 170px 260px, rgba(242, 210, 122, .3), transparent);
+  background-size: 246px 280px;
+}
+html[data-theme="light"][data-craft="ideating"] .app-sidebar {
+  background-image:
+    radial-gradient(1px 1px at 14px 40px, rgba(184, 137, 28, .45), transparent),
+    radial-gradient(1px 1px at 46px 130px, rgba(184, 137, 28, .3), transparent),
+    radial-gradient(1.5px 1.5px at 120px 90px, rgba(184, 137, 28, .35), transparent),
+    radial-gradient(1px 1px at 200px 190px, rgba(184, 137, 28, .3), transparent),
+    radial-gradient(1px 1px at 30px 230px, rgba(184, 137, 28, .25), transparent),
+    radial-gradient(1.5px 1.5px at 170px 260px, rgba(184, 137, 28, .25), transparent);
+}
+
 /* THE BACK LINK (task 1004430): at the head of the bar when the page was
    reached from inside another hall page. 24px floor on both axes. */
 .topbar-back {

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

@@ -54,9 +54,9 @@
 
 <!-- The app shell (sidebar + top bar + footer). Dependency-free; runs at parse
      time so the chrome exists before the deferred page scripts execute. -->
-<script src="/builders/shell-trail.js?v=2026-10-03-nav"></script>
-<script src="/builders/craft-mode.js?v=2026-10-03-nav"></script>
-<script src="/builders/shell.js?v=2026-10-03-nav"></script>
+<script src="/builders/shell-trail.js?v=2026-10-03-looks"></script>
+<script src="/builders/craft-mode.js?v=2026-10-03-looks"></script>
+<script src="/builders/shell.js?v=2026-10-03-looks"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <!-- shared frontend toolkit (window.OTB) — loaded FIRST so task.js can pull from it. -->

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

@@ -138,9 +138,9 @@
   </div>
 </div>
 
-<script src="/builders/shell-trail.js?v=2026-10-03-nav"></script>
-<script src="/builders/craft-mode.js?v=2026-10-03-nav"></script>
-<script src="/builders/shell.js?v=2026-10-03-nav"></script>
+<script src="/builders/shell-trail.js?v=2026-10-03-looks"></script>
+<script src="/builders/craft-mode.js?v=2026-10-03-looks"></script>
+<script src="/builders/shell.js?v=2026-10-03-looks"></script>
 <script src="/builders/palette.js" defer></script>
 
 <script src="/builders/idea-objects.js?v=2026-09-27-split"></script>

package/modules/hall-ui/public/tweak-editor.html

@@ -142,9 +142,9 @@
 
 <div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
 
-<script src="/builders/shell-trail.js?v=2026-10-03-nav"></script>
-<script src="/builders/craft-mode.js?v=2026-10-03-nav"></script>
-<script src="/builders/shell.js?v=2026-10-03-nav"></script>
+<script src="/builders/shell-trail.js?v=2026-10-03-looks"></script>
+<script src="/builders/craft-mode.js?v=2026-10-03-looks"></script>
+<script src="/builders/shell.js?v=2026-10-03-looks"></script>
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/dom-utils.js?v=2026-06-23-contrib"></script>
 <script src="/builders/brand-holes.js?v=2026-09-29-aqfix"></script>

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

@@ -162,9 +162,9 @@
 
 <!-- The app shell (sidebar + top bar). Dependency-free; loaded FIRST so the
      chrome exists before the page script runs. -->
-<script src="/builders/shell-trail.js?v=2026-10-03-nav"></script>
-<script src="/builders/craft-mode.js?v=2026-10-03-nav"></script>
-<script src="/builders/shell.js?v=2026-10-03-nav"></script>
+<script src="/builders/shell-trail.js?v=2026-10-03-looks"></script>
+<script src="/builders/craft-mode.js?v=2026-10-03-looks"></script>
+<script src="/builders/shell.js?v=2026-10-03-looks"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <!-- shared frontend toolkit (window.OTB) — loaded before watch.js, which pulls from it. -->

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

@@ -171,9 +171,9 @@
 
 <!-- The app shell (sidebar + top bar + footer). Dependency-free; runs at parse
      time so the chrome exists before the deferred page scripts execute. -->
-<script src="/builders/shell-trail.js?v=2026-10-03-nav"></script>
-<script src="/builders/craft-mode.js?v=2026-10-03-nav"></script>
-<script src="/builders/shell.js?v=2026-10-03-nav"></script>
+<script src="/builders/shell-trail.js?v=2026-10-03-looks"></script>
+<script src="/builders/craft-mode.js?v=2026-10-03-looks"></script>
+<script src="/builders/shell.js?v=2026-10-03-looks"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <!-- shared frontend toolkit (window.OTB) — loaded FIRST so work.js can pull from it. -->

package/modules/hall-ui/records/craft-mode.md

@@ -27,3 +27,11 @@ Covers: every shelled hall page (`craft-mode.js`, `shell.js`, `style.css`), and
 - **Government shows only in Governing**, and outside that group Governing is the shortest list (Blockers, Board Room). Building is every tab except Government and the Board Room; Artistry is Studio, Goals, Your thinking; Ideating is Sky, Your thinking, Goals. The prototype names rooms that do not exist yet (Store, Page reviews, Treasury); a list names only real NAV items, and `tests/craft_mode_nav.mjs` requires every NAV item to sit in some mode.
 - **The mode only ever takes away, and never through `hidden`.** The access gate owns `hidden`; `applyNav()` marks what the mode leaves out with `[data-craft-off]`, which `style.css` hides. So a mode can never show a tab the gate hid, and switching mode just moves the attribute. A group head goes too once nothing under it shows.
 - **Two callers.** `apply()` runs it on every mode change (live, no reload), and `shell.js` `applyAccess` runs it right after its gate loop, so a later `/me` answer (a promotion, a permission) brings a head back with its tabs. Hidden tabs still open by their URL; nothing is enforced (ADR 0016).
+
+## Each mode's look (task 1004495)
+
+- **Three modes wear a look; Building, Legacy and no mode wear none.** Artistry, Ideating and Governing each set `--craft` (where you are) and `--craft-on` (text on it) on `html[data-craft="<mode>"]`, with a dark twin on `html[data-theme="dark"][data-craft="<mode>"]` that also darkens the ground and tints the glass (Artistry, Ideating). Values and contrast are the direction's, `docs/design/craft-mode-direction.md`. No rule in `style.css` names `building` or `legacy`, and none matches any mode at all; `tests/craft_mode_looks.mjs` pins both, and re-measures every colour pair.
+- **The accent stays the action colour.** `--craft` paints only the switch's current pill, the current tab (tint, icon, label, marker) and the top bar's hairline.
+- **Two pieces are drawn by `craft-mode.js` `applyLook()`, on every mode change:** the eyebrow beside `#topbar-title` (`LOOKS`: "the studio · night", "the sky", "the city"; hidden at <=640px, where it overflowed phones) and the scene plate under `.app-sidebar__brand` (40px closed rail, 64px open). The plate's markup IS `artHtml(mode)`, the picker's door art, exported rather than copied; light mode recolours it to each scene's day (the city is the dark one through `invert(1) hue-rotate(180deg)`). It does not animate.
+- **Always-present tabs widened** (owner, 2026-10-03): `ALWAYS_TABS` is Builders, Collab and Profile, so every mode keeps the You and Community groups.
+- **Governing's header tallies** ("needs you · moving") are task 1004563, not this look.

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@bongos/core",
-  "version": "1.21.36",
+  "version": "1.21.37",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@bongos/core",
-      "version": "1.21.36",
+      "version": "1.21.37",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "express": "^4.21.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bongos/core",
-  "version": "1.21.36",
+  "version": "1.21.37",
   "description": "Cloud Bongos — the AI-first build platform core (GDS + platform surfaces + module system), installed as a versioned dependency (ADR 0108).",
   "license": "AGPL-3.0-or-later",
   "main": "src/platform-server.js",

package/release-notes.json

@@ -8980,5 +8980,11 @@
       "id": "1004560",
       "text": "The Planning building now has three working desks on its first floors. Priorities lists the open goals in order with a square for each promise; arrows move a goal up or down, and a save bar (with undo) sets the new order, or,"
     }
+  ],
+  "1.21.37": [
+    {
+      "id": "1004495",
+      "text": "The hall now looks different in each craft mode. In Artistry, Ideating and Governing the mode button, the current sidebar tab and the top edge of the page take the mode's own colour (moonlight or night ink, gold, city blue), t"
+    }
   ]
 }

package/src/module-api.js

@@ -75,7 +75,7 @@ const { responsibilityFor, ROLE_RESPONSIBILITIES } = require('./role-responsibil
 // MAJOR (see allowBoxScope below): passes the request through untouched.
 function deprecatedNoopMiddleware(_req, _res, next) { next(); }
 
-const CORE_VERSION = '1.21.36'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
+const CORE_VERSION = '1.21.37'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
 
 // A namespaced logger so a module's log lines are attributable + consistent.
 // Usage: const log = api.logger('discord'); log.info('mounted');

package/tests/craft_mode_looks.mjs

@@ -0,0 +1,170 @@
+// tests/craft_mode_looks.mjs — each craft mode's look (task 1004495, goal 1000095
+// WA6; direction docs/design/craft-mode-direction.md).
+//
+// Artistry, Ideating and Governing each wear a look: --craft / --craft-on tokens
+// (light + dark twins) in style.css, the header eyebrow beside the page title and
+// the door's scene framed under the brand. Building, Legacy and no mode wear
+// NOTHING — the hall as it always was. These cases run the REAL craft-mode.js over
+// a small DOM and read the REAL style.css, so a look that leaks into Building, a
+// plate that is a second copy of the art, or a colour that loses its contrast reds.
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import fs from 'node:fs';
+import path from 'node:path';
+import vm from 'node:vm';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const HALL = path.join(ROOT, 'modules/hall-ui/public');
+const CRAFT = fs.readFileSync(path.join(HALL, 'craft-mode.js'), 'utf8');
+const CSS = fs.readFileSync(path.join(HALL, 'style.css'), 'utf8');
+
+const LOOKED = ['artistry', 'ideating', 'governing'];
+const WORDS = { artistry: 'the studio · night', ideating: 'the sky', governing: 'the city' };
+
+// A small DOM: enough tree for insertBefore / removeChild / nextSibling to be real.
+function node(tag, id, cls) {
+  const attrs = {};
+  const el = {
+    tagName: tag, id: id || '', className: cls || '', dataset: {}, children: [], parentNode: null,
+    textContent: '', innerHTML: '',
+    setAttribute(k, v) { attrs[k] = String(v); }, getAttribute(k) { return k in attrs ? attrs[k] : null; },
+    hasAttribute(k) { return k in attrs; }, removeAttribute(k) { delete attrs[k]; },
+    get nextSibling() { const sib = this.parentNode && this.parentNode.children; return sib ? sib[sib.indexOf(this) + 1] || null : null; },
+    appendChild(c) { c.parentNode = this; this.children.push(c); return c; },
+    insertBefore(c, ref) {
+      c.parentNode = this;
+      const at = ref ? this.children.indexOf(ref) : -1;
+      if (at === -1) this.children.push(c); else this.children.splice(at, 0, c);
+      return c;
+    },
+    removeChild(c) { this.children.splice(this.children.indexOf(c), 1); c.parentNode = null; return c; },
+    querySelector(sel) { return all(this).find((n) => sel === '.' + n.className) || null; },
+    querySelectorAll() { return []; },
+    addEventListener() {}, classList: { toggle() {} },
+  };
+  return el;
+}
+function all(root) { return root.children.flatMap((c) => [c, ...all(c)]); }
+
+function boot(session = {}) {
+  const sidebar = node('NAV', 'app-sidebar');
+  const brand = sidebar.appendChild(node('DIV', '', 'app-sidebar__brand'));
+  sidebar.appendChild(node('NAV', '', 'app-sidebar__nav'));
+  const topbar = node('DIV', 'app-topbar');
+  topbar.appendChild(node('BUTTON', 'topbar-menu'));
+  const title = topbar.appendChild(node('H2', 'topbar-title'));
+  topbar.appendChild(node('DIV', '', 'topbar-side'));
+  const root = node('HTML');
+  const body = node('BODY');
+  const document = {
+    documentElement: root, body, activeElement: null,
+    getElementById: (id) => [sidebar, topbar, ...all(sidebar), ...all(topbar)].find((n) => n.id === id) || null,
+    querySelectorAll: () => [],
+    createElement: (t) => node(t.toUpperCase()),
+    addEventListener() {}, removeEventListener() {}, dispatchEvent() { return true; },
+  };
+  const mk = (obj) => ({ getItem: (k) => (k in obj ? obj[k] : null), setItem: (k, v) => { obj[k] = String(v); }, removeItem: (k) => { delete obj[k]; } });
+  const window = { localStorage: mk({}), sessionStorage: mk(session), matchMedia: () => ({ matches: false }) };
+  const sandbox = { window, document, CustomEvent: class { constructor(t, i) { this.type = t; Object.assign(this, i); } } };
+  vm.createContext(sandbox);
+  vm.runInContext(CRAFT, sandbox, { filename: 'craft-mode.js' });
+  const craft = window.OTBCraftMode;
+  craft.mount();
+  return {
+    craft, root, sidebar, brand, topbar, title,
+    plates: () => all(sidebar).filter((n) => n.id === 'craft-plate'),
+    marks: () => all(topbar).filter((n) => n.id === 'craft-eyebrow'),
+  };
+}
+
+test('each looked mode frames its own door scene under the brand, and names itself beside the title', () => {
+  const p = boot();
+  for (const m of LOOKED) {
+    p.craft.choose(m);
+    assert.equal(p.plates().length, 1, `${m}: exactly one plate`);
+    const plate = p.plates()[0];
+    assert.equal(p.brand.nextSibling, plate, `${m}: the plate sits right under the brand`);
+    assert.equal(plate.getAttribute('data-plate'), m);
+    assert.equal(plate.getAttribute('aria-hidden'), 'true', 'the plate is decoration');
+    assert.equal(plate.innerHTML, p.craft.artHtml(m), `${m}: the plate IS the picker's door art, not a second copy`);
+    assert.equal(p.marks().length, 1, `${m}: exactly one eyebrow`);
+    assert.equal(p.title.nextSibling, p.marks()[0], `${m}: the eyebrow sits right after the page title`);
+    assert.equal(p.marks()[0].textContent, WORDS[m], `${m}: in the prototype's own words`);
+  }
+});
+
+test('BUILDING, LEGACY AND NO MODE WEAR NO LOOK: no plate, no eyebrow, and switching to them takes the look away', () => {
+  const none = boot();
+  assert.equal(none.root.dataset.craft, undefined);
+  assert.equal(none.plates().length + none.marks().length, 0, 'no mode draws nothing');
+  for (const m of ['building', 'legacy']) {
+    const p = boot({ 'hall-craft': m });
+    assert.equal(p.plates().length + p.marks().length, 0, `${m} at boot draws nothing`);
+    p.craft.choose('governing');
+    assert.equal(p.plates().length, 1);
+    p.craft.choose(m);
+    assert.equal(p.plates().length + p.marks().length, 0, `switching to ${m} removes the plate and the eyebrow`);
+  }
+  assert.deepEqual(Object.keys(none.craft.LOOKS).sort(), [...LOOKED].sort(), 'only the three crafts have a look');
+});
+
+test('the art is drawn once: craft-mode.js has one artHtml and exports it', () => {
+  assert.equal(CRAFT.match(/function artHtml\(/g).length, 1);
+  assert.match(CRAFT, /artHtml: artHtml,/);
+  assert.match(CRAFT, /plate\.innerHTML = artHtml\(mode\);/);
+});
+
+// Every selector in style.css that names a craft mode.
+const CRAFT_SELECTORS = [...CSS.matchAll(/data-craft="([a-z]+)"/g)].map((m) => m[1]);
+
+test('style.css names only the three looked modes — Building and Legacy have no rule at all', () => {
+  assert.ok(CRAFT_SELECTORS.length >= 12, `found ${CRAFT_SELECTORS.length} craft selectors`);
+  for (const m of CRAFT_SELECTORS) assert.ok(LOOKED.includes(m), `a rule names data-craft="${m}"`);
+  assert.doesNotMatch(CSS, /data-craft="(building|legacy)"/);
+  assert.doesNotMatch(CSS, /data-craft\]/, 'no rule matches ANY mode, which would dress Building too');
+});
+
+// The token values, light and dark, read from the stylesheet itself.
+function tokens(selector) {
+  const at = CSS.indexOf(selector + ' {');
+  assert.ok(at !== -1, `style.css has a ${selector} block`);
+  const block = CSS.slice(at, CSS.indexOf('}', at));
+  const get = (name) => (block.match(new RegExp(name + ':\\s*(#[0-9a-f]{6})')) || [])[1];
+  return { craft: get('--craft'), on: get('--craft-on'), bg: get('--bg') };
+}
+function lum(hex) {
+  const c = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255)
+    .map((v) => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4));
+  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+}
+function contrast(a, b) { const [x, y] = [lum(a), lum(b)].sort((p, q) => q - p); return (x + 0.05) / (y + 0.05); }
+
+test('every mode colour has a light and a dark twin that keep their contrast', () => {
+  const LIGHT_BG = '#edecee', DARK_BG = '#000000';
+  for (const m of LOOKED) {
+    const light = tokens(`html[data-craft="${m}"]`);
+    const dark = tokens(`html[data-theme="dark"][data-craft="${m}"]`);
+    for (const [k, t] of [['light', light], ['dark', dark]]) {
+      assert.ok(t.craft && t.on, `${m} ${k} sets --craft and --craft-on`);
+    }
+    assert.ok(contrast(light.craft, LIGHT_BG) >= 5.4, `${m} light --craft on paper: ${contrast(light.craft, LIGHT_BG).toFixed(2)}`);
+    assert.ok(contrast(dark.craft, dark.bg || DARK_BG) >= 5.4, `${m} dark --craft on its ground`);
+    assert.ok(contrast(light.on, light.craft) >= 5.8, `${m} light pill text: ${contrast(light.on, light.craft).toFixed(2)}`);
+    assert.ok(contrast(dark.on, dark.craft) >= 5.8, `${m} dark pill text`);
+    assert.equal(light.bg, undefined, `${m}: light keeps the hall's paper ground`);
+  }
+});
+
+test('the shared treatment, the eyebrow and the plate are written as the direction says', () => {
+  const looked = 'html:is([data-craft="artistry"], [data-craft="ideating"], [data-craft="governing"])';
+  for (const target of ['.craft-switch__opt[aria-pressed="true"]', '.nav-item--active', '.nav-item--active::before', '.app-topbar']) {
+    assert.ok(CSS.includes(`${looked} ${target}`), `the looked modes restyle ${target}`);
+  }
+  assert.match(CSS, /@media \(max-width: 640px\) \{ \.craft-eyebrow \{ display: none; \} \}/, 'the eyebrow is hidden on a phone');
+  assert.match(CSS, /\.craft-plate \{[^}]*height: 40px;/, '40px in the closed rail');
+  assert.match(CSS, /\.app-sidebar:focus-within \.craft-plate \{ height: 64px;/, '64px when the rail opens');
+  assert.match(CSS, /html\[data-theme="light"\] \.craft-plate \.craft-art__city \{ filter: invert\(1\) hue-rotate\(180deg\); \}/,
+    'the light city is the dark one inverted, not a second drawing');
+  assert.equal(CSS.match(/prefers-reduced-motion/g).length, 1, 'no second reduced-motion block');
+});

package/tests/craft_mode_nav.mjs

@@ -4,7 +4,7 @@
 // Each craft mode shows only the tabs its craft needs; Legacy mode and no mode
 // show every tab, exactly as before. The owner's rule (2026-10-01): some tabs
 // stay in EVERY mode, Builders first among them, written down as ONE shared list
-// that each mode's list adds to. These cases boot the REAL shell-trail.js +
+// that each mode's list adds to; on 2026-10-03 Collab and Profile joined it. These cases boot the REAL shell-trail.js +
 // craft-mode.js + shell.js and read the sidebar the shell actually rendered, so a
 // tab id that drifts from NAV, or a gate pass that runs after the mode and
 // re-shows a tab, reds here.
@@ -126,13 +126,15 @@ function boot({ session = {}, perms = { 'board.vote.cast': true } } = {}) {
 
 const CRAFTS = ['building', 'artistry', 'ideating', 'governing'];
 
-test('THE ALWAYS-PRESENT LIST: one shared list, Builders first, inside every mode', () => {
+test('THE ALWAYS-PRESENT LIST: one shared list, Builders first, then Collab and Profile, inside every mode', () => {
   const { craft } = boot();
-  assert.equal(craft.ALWAYS_TABS[0], 'roster', 'Builders (NAV id roster) heads the list (owner, 2026-10-01)');
+  assert.deepEqual([...craft.ALWAYS_TABS], ['roster', 'collab', 'profile'],
+    'Builders (NAV id roster) heads the list (owner, 2026-10-01); Collab and Profile join it (owner, 2026-10-03)');
   for (const m of CRAFTS) {
     const tabs = craft.tabsFor(m);
     assert.ok(Array.isArray(tabs), `${m} has a named tab list`);
     for (const id of craft.ALWAYS_TABS) assert.ok(tabs.includes(id), `${m} keeps ${id}`);
+    assert.equal(new Set(tabs).size, tabs.length, `${m} names no tab twice`);
   }
   assert.match(CRAFT, /return own \? ALWAYS_TABS\.concat\(own\) : null;/, 'each list is ALWAYS_TABS plus its own, not a copy of it');
 });
@@ -173,7 +175,7 @@ test('each mode shows its own tabs, and switching updates the nav live', () => {
     p.craft.choose(m);
     assert.equal(p.root.dataset.craft, m);
     assert.deepEqual(new Set(p.showing()), new Set(p.craft.tabsFor(m)), `${m} shows exactly its list`);
-    assert.ok(p.showing().includes('roster'), `Builders stays in ${m}`);
+    for (const id of ['roster', 'collab', 'profile']) assert.ok(p.showing().includes(id), `${id} stays in ${m}`);
     assert.equal(p.headShowing('government'), m === 'governing', `the Government head shows only where its tabs do (${m})`);
   }
   p.craft.choose('legacy');
@@ -185,7 +187,7 @@ test('a mode never shows a tab the gate hid, and a later gate pass keeps the mod
   p.signIn('thetes');
   assert.ok(!p.showing().includes('watch'), 'a thetes in Governing does not get the metic-floored Watch tab');
   assert.ok(!p.headShowing('government'), 'nor its group head');
-  assert.deepEqual(p.showing(), ['blockers', 'board-room', 'roster'], 'what a thetes board member in Governing sees');
+  assert.deepEqual(p.showing(), ['blockers', 'board-room', 'profile', 'collab', 'roster'], 'what a thetes board member in Governing sees');
   p.signIn('archon');
   assert.ok(p.showing().includes('watch'), 'promoted, the gate lets it through and the mode keeps it');
   assert.ok(p.headShowing('government'), 'and its group head comes back with it, which only a mode pass after the gate can know');

package/tests/hall_tweak_editor.mjs

@@ -635,7 +635,7 @@ try {
     assert.match(HTML, /<body data-page="tweak-editor"[^>]*data-fullscreen-switch/);
     assert.equal((HTML.match(/<h1\b/g) || []).length, 1);
     assert.ok(HTML.indexOf('tweak-editor-lib.js') < HTML.indexOf('tweak-editor.js?'), 'the lib loads first');
-    assert.match(HTML, /shell\.js\?v=2026-10-03-nav/);
+    assert.match(HTML, /shell\.js\?v=2026-10-03-looks/);
     assert.equal(/fonts\.googleapis\.com\/css/.test(HTML), false);
     for (const id of ['tw-bar', 'tw-counter', 'tw-open', 'tw-open-more', 'tw-divider', 'tw-openwrap', 'tw-open-menu', 'tw-open-tab', 'tw-open-split', 'tw-frame', 'tw-frame-view', 'tw-split-close', 'tw-download', 'tw-upload', 'tw-file', 'tw-submit', 'tw-paper', 'tw-doc', 'tw-notice', 'tw-done', 'tw-take', 'tw-pick', 'tw-picks', 'tw-refused', 'tw-refused-title', 'tw-refused-list', 'tw-refused-next', 'tw-refused-download', 'tw-refused-close']) {
       assert.ok(new RegExp(`id="${id}"`).test(HTML), `#${id} is in the markup`);