@bongos/core 1.21.109 → 1.21.110

package/modules/copy-desk/skills/tweak/SKILL.md

@@ -72,6 +72,34 @@ Heal whatever ship-check names first (`git add` new files before it). Run ship.j
 
 A failed grade is an ordinary one: read it (`GET /api/bongos/tasks/<task-id>?include=grade`), fix, commit, `node scripts/gds/ship.js <task-id> --regrade`. If the branch did not publish, a plain `node scripts/gds/ship.js <task-id>` publishes it again without re-grading.
 
+## Unattended mode: `/tweak --page <page-id> --unattended`
+
+The Autobongos tweak lane (ADR 0371 D1, D8) runs this skill with nobody at the terminal. It names ONE page and claims that page's submitted round with the `auto_pickup` mark before you start. In this mode:
+
+- **Never ask.** Every question the steps above would put to a person is a halt instead.
+- **Work only the named page.** Skip step 1's queue read; the round is the one you hold. Pass `--page <page-id>` to every script: `copy-apply.js --batch --page <page-id> --unattended` refuses a round for another page (exit 5) and, on any non-zero exit, releases the round with a plain note itself.
+- **Change only the page's own files.** No shell cache-bust, no hand fix of a refused line, no edit outside the page's files in `docs/page-inventory.json` (besides the copy registry, the page readings and the generated maps ship.js refreshes), and no session-log file (it would move `CLAUDE.md`, a protected path). A rewrite that needs anything else is already its own engineer task.
+- **Ship one round, once, graded.** Never `--skip-grade`, `--force` or `--allow-empty`. Stop at WAITING FOR THE ARTIST.
+
+**On any halt, release and exit.** Run the matching line and stop; do not retry, and do not try another round:
+
+```bash
+node scripts/gds/tweak-halt.js <task-id> --code <code>
+```
+
+| What happened | `--code` |
+|---|---|
+| the claim was refused | `claim_refused` (nothing to release: just exit) |
+| `copy-apply` exited non-zero | already released by `--unattended` |
+| `ship-check` named something stale it cannot heal by regenerating | `ship_check_stale` |
+| the grade came back GRADER UNAVAILABLE | `grader_unavailable` |
+| the grade failed | `grade_failed` |
+| the diff would touch a file outside the page | `outside_page` |
+
+The note is fixed wording per code, so nothing you write reaches the round.
+
+**The server holds these rules, not you.** A page tweak reaches `confirmed` only through its artist's approval or the owner's override (`POST /tasks/:id/confirm` refuses it), and the publish of an `auto_pickup` round whose pull request touches a file outside the page, or a protected path, is refused and its pull request closed. Breaking a rule above gets the round refused, not landed.
+
 ## What happens next (not yours)
 
 The artist approves in the studio's Approval queue (TW12), which lands it like any confirmed task, or sends it back with a note, which returns the round to the queue for the next `/tweak`.

package/modules/hall-ui/public/craft-mode.js

@@ -9,7 +9,9 @@
 // It is a MODE the existing hall wears, never a second hall (the founding-mode
 // precedent, docs/design/project-startup-direction.md). The nav follows the mode
 // (task 1004493, MODE_TABS below), and so does the look (task 1004495, LOOKS
-// below); the mode tools are their own tasks (1004496 onward). Legacy mode, a
+// below); the mode tools are their own tasks (1004496 onward), and Artistry's
+// Review button opens review mode (task 1004686): the hall wears another
+// mode's experience while an artist reviews it. Legacy mode, a
 // fifth choice, was removed (task 1004567): Building already shows every tab,
 // and a stored 'legacy' now reads as no mode.
 //
@@ -32,6 +34,7 @@
     governing: '<path d="M2 6 8 2.5 14 6M3.5 6.5v6M6.5 6.5v6M9.5 6.5v6M12.5 6.5v6M2 13.5h12"/>',
     brush: '<path d="M13.6 2.4 7.4 8.6"/><path d="M7.4 8.6c-1.3-.7-3-.1-3.4 1.5-.3 1.3-.8 2.2-1.9 2.9 2.4.7 4.6.1 5.6-1.4.6-.9.5-2.1-.3-3Z"/>',
     note: '<path d="M9.5 2.5h-6v11h9v-6"/><path d="M5.5 8h5M5.5 10.5h3.5"/><path d="M12.5 1.5v4M10.5 3.5h4"/>',
+    write: '<path d="M2.5 13.5h11"/><path d="M10.4 2.6l2.9 2.9-6.4 6.4H4V9z"/>',
     modes: '<rect x="2.5" y="2.5" width="4.5" height="4.5" rx="1"/><rect x="9" y="2.5" width="4.5" height="4.5" rx="1"/><rect x="2.5" y="9" width="4.5" height="4.5" rx="1"/><rect x="9" y="9" width="4.5" height="4.5" rx="1"/>',
   };
   // The four crafts. `short` is the switch's label; `line` is the
@@ -266,7 +269,8 @@
     artistry: [
       // Named "Artist review" since task 1004499: the public site's button
       // (public-landing assets/artist-review.js) opens this same panel.
-      { id: 'palette', icon: 'artistry', short: 'Review', label: 'Artist review: write feedback on this page', script: 'page-notes.js', api: 'OTBPageNotes' },
+      // `menu`: hovering it opens the review-mode menu (task 1004686, below).
+      { id: 'palette', icon: 'artistry', short: 'Review', label: 'Artist review: write feedback on this page', script: 'page-notes.js', api: 'OTBPageNotes', menu: true },
       // Task 1004497: this page's words, edited where they stand as a proposed wording change.
       { id: 'paintbrush', icon: 'brush', short: 'Edit words', label: 'Edit this page\'s words', script: 'paintbrush.js', api: 'OTBPaintbrush' },
     ],
@@ -297,29 +301,270 @@
     for (var m in TOOLS) for (var i = 0; i < TOOLS[m].length; i++) if (TOOLS[m][i].id === id) return TOOLS[m][i];
     return null;
   }
+  // The tools a mode shows. Reviewing another experience (task 1004686), the
+  // artist keeps Artistry's tools and gains that experience's own after them.
+  function toolsFor(mode) {
+    var own = Object.prototype.hasOwnProperty.call(TOOLS, mode) ? TOOLS[mode] : [];
+    if (!review || mode === 'artistry') return own;
+    return TOOLS.artistry.concat(own);
+  }
+  function openTool(t, b) {
+    loadTool(t).then(function (api) { api.open(); }, function () { b.setAttribute('aria-disabled', 'true'); });
+  }
+  function toolButton(t) {
+    var b = document.createElement('button');
+    b.type = 'button';
+    b.id = 'craft-tool-' + t.id;
+    b.className = 'craft-tool craft-tool--' + t.id;
+    b.setAttribute('data-craft-tool', t.id);
+    b.setAttribute('aria-label', t.label);
+    b.title = t.label;
+    b.innerHTML = icon(t.icon, 'craft-tool__icon') + '<span class="craft-tool__label">' + esc(t.short) + '</span>';
+    b.addEventListener('click', function (e) {
+      // A phone has no hover, so there a tap on Review opens its menu instead.
+      if (t.menu && narrow()) { toggleReviewMenu(e && e.detail === 0); return; }
+      openTool(t, b);
+    });
+    return t.menu ? reviewGroup(t, b) : b;
+  }
+  // The node a tool occupies in the bar: its button, or Review's whole group.
+  function toolNode(t) {
+    var b = document.getElementById('craft-tool-' + t.id);
+    return b && t.menu && b.parentNode && b.parentNode.id === REVIEW_GROUP ? b.parentNode : b;
+  }
   function applyTools(mode) {
     var sw = document.getElementById('craft-switch');
-    var own = Object.prototype.hasOwnProperty.call(TOOLS, mode) ? TOOLS[mode] : [];
+    var own = toolsFor(mode);
     var old = document.querySelectorAll ? document.querySelectorAll('[data-craft-tool]') : [];
     for (var i = old.length - 1; i >= 0; i--) {
-      if (!own.some(function (t) { return t.id === old[i].getAttribute('data-craft-tool'); })) remove(old[i]);
+      if (own.some(function (t) { return t.id === old[i].getAttribute('data-craft-tool'); })) continue;
+      var t0 = toolFor(old[i].getAttribute('data-craft-tool'));
+      remove(t0 ? toolNode(t0) : old[i]);
     }
     if (!sw || !sw.parentNode) return;
+    // Right to left, each missing tool goes in front of the one after it, so
+    // the bar reads in TOOLS order whichever tools were already there.
+    var before = sw;
+    for (var j = own.length - 1; j >= 0; j--) {
+      var node = toolNode(own[j]);
+      if (!node) node = sw.parentNode.insertBefore(toolButton(own[j]), before);
+      before = node;
+    }
+    // A guest is the reviewed experience's own tool beside the artist's: under
+    // 360px the bar has no room for three, so craft-review.css folds it away.
     own.forEach(function (t) {
-      if (document.getElementById('craft-tool-' + t.id)) return;
-      var b = document.createElement('button');
-      b.type = 'button';
-      b.id = 'craft-tool-' + t.id;
-      b.className = 'craft-tool craft-tool--' + t.id;
-      b.setAttribute('data-craft-tool', t.id);
-      b.setAttribute('aria-label', t.label);
-      b.title = t.label;
-      b.innerHTML = icon(t.icon, 'craft-tool__icon') + '<span class="craft-tool__label">' + esc(t.short) + '</span>';
-      b.addEventListener('click', function () {
-        loadTool(t).then(function (api) { api.open(); }, function () { b.setAttribute('aria-disabled', 'true'); });
-      });
-      sw.parentNode.insertBefore(b, sw);
+      var el = document.getElementById('craft-tool-' + t.id);
+      if (el && el.classList) el.classList.toggle('craft-tool--guest', !!review && TOOLS.artistry.indexOf(t) === -1);
     });
+    var on = document.getElementById('craft-tool-palette');
+    if (on) {
+      on.classList.toggle('craft-tool--reviewing', !!review);
+      var word = on.querySelector && on.querySelector('.craft-tool__label');
+      if (word) word.textContent = review ? 'Reviewing' : 'Review';
+    }
+  }
+
+  // ---------- artist review mode (task 1004686) ----------
+  // Hovering Artistry's Review button opens a menu of the four experiences
+  // (owner, 2026-10-09, in the owner's order and words). Picking one makes the hall
+  // wear that mode on every page — its tabs, its look, its tools — the way a
+  // builder in it sees it, while the artist keeps Artistry's tools and small
+  // sky-style doodles are scribbled into the top bar's empty space (craft-review.js draws them,
+  // loaded only in review mode; craft-review.css styles it and the menu).
+  // The artist's own mode stays Artistry: the experience is this session's
+  // alone (sessionStorage), and choosing any mode from the switch or the
+  // picker ends it. Cosmetic like the mode: a tab the gate hides stays hidden.
+  var REVIEW_KEY = 'hall-craft-review';
+  var REVIEW_GROUP = 'craft-review';
+  var EXPERIENCES = [
+    { id: 'ideating', label: 'Ideator experience' },
+    { id: 'governing', label: 'Governing experience' },
+    { id: 'building', label: 'Building experience' },
+    { id: 'artistry', label: 'Artistry experience' },
+  ];
+  // The experience being reviewed, or null. Read from the session once, then
+  // held here, so a browser whose storage throws still reviews this page.
+  var review = null;
+  function storedReview() {
+    return read() === 'artistry' ? valid(get('sessionStorage', REVIEW_KEY)) : null;
+  }
+  // The mode the hall wears: the experience under review, else the chosen mode.
+  function wearing() { return review || read(); }
+  function startReview(mode) {
+    mode = valid(mode);
+    if (!mode) return;
+    set('sessionStorage', MODE_KEY, 'artistry');
+    set('sessionStorage', ASKED_KEY, '1');
+    set('sessionStorage', REVIEW_KEY, mode);
+    review = mode;
+    apply(mode);
+  }
+  function stopReview() {
+    drop('sessionStorage', REVIEW_KEY);
+    review = null;
+    apply('artistry');
+  }
+
+  // The menu. Hover opens it where a pointer can hover; the chevron (or, on a
+  // phone, Review itself) opens it by click, tap or keyboard. Built on every
+  // open, so the checked experience is always the live one.
+  var closeTimer = null;
+  // Hover is a mouse's alone: a touch also fires pointer events, and a laptop
+  // with a touch screen can report no hover at all, so ask the pointer itself.
+  function byMouse(e) { return !!e && e.pointerType === 'mouse'; }
+  function reviewMenuHtml() {
+    var items = '<button class="craft-review__item" type="button" role="menuitem" data-review-act="write">' +
+      icon('write', 'craft-review__icon') + '<span>Write feedback on this page</span></button>' +
+      '<p class="craft-review__head" role="presentation">Review mode</p>';
+    items += EXPERIENCES.map(function (x) {
+      var on = review === x.id;
+      return '<button class="craft-review__item" type="button" role="menuitemradio" aria-checked="' + (on ? 'true' : 'false') + '" data-review-pick="' + x.id + '">' +
+        icon(x.id, 'craft-review__icon') + '<span>' + esc(x.label) + '</span>' +
+        (on ? '<svg class="craft-review__check" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7"/></svg>' : '') +
+        '</button>';
+    }).join('');
+    if (review) {
+      items += '<button class="craft-review__item craft-review__item--stop" type="button" role="menuitem" data-review-act="stop">' +
+        '<svg class="craft-review__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" aria-hidden="true"><path d="M4.5 4.5l7 7M11.5 4.5l-7 7"/></svg><span>Stop reviewing</span></button>';
+    }
+    return items;
+  }
+  function menuEl() { return document.getElementById(REVIEW_GROUP + '-menu'); }
+  function menuItems() {
+    var m = menuEl();
+    return m && m.querySelectorAll ? Array.prototype.slice.call(m.querySelectorAll('[role^="menuitem"]')) : [];
+  }
+  function openReviewMenu(focusFirst) {
+    var m = menuEl(), more = document.getElementById(REVIEW_GROUP + '-more');
+    if (!m) return;
+    clearTimeout(closeTimer);
+    if (m.hasAttribute('hidden')) {
+      m.innerHTML = reviewMenuHtml();
+      m.removeAttribute('hidden');
+      if (more) more.setAttribute('aria-expanded', 'true');
+      document.addEventListener('click', onOutside, true);
+    }
+    if (focusFirst) {
+      var first = menuItems()[0];
+      if (first && first.focus) first.focus();
+    }
+  }
+  function closeReviewMenu(refocus) {
+    var m = menuEl(), more = document.getElementById(REVIEW_GROUP + '-more');
+    clearTimeout(closeTimer);
+    document.removeEventListener('click', onOutside, true);
+    if (!m || m.hasAttribute('hidden')) return;
+    m.setAttribute('hidden', '');
+    if (more) more.setAttribute('aria-expanded', 'false');
+    if (refocus) {
+      var back = narrow() ? document.getElementById('craft-tool-palette') : more;
+      if (back && back.focus) back.focus();
+    }
+  }
+  function toggleReviewMenu(focusFirst) {
+    var m = menuEl();
+    if (m && !m.hasAttribute('hidden')) closeReviewMenu(false); else openReviewMenu(focusFirst);
+  }
+  function onOutside(e) {
+    var g = document.getElementById(REVIEW_GROUP);
+    if (g && g.contains && !g.contains(e.target)) closeReviewMenu(false);
+  }
+  function onMenuClick(e) {
+    var btn = e.target.closest && e.target.closest('button');
+    if (!btn) return;
+    var pick = btn.getAttribute('data-review-pick');
+    var act = btn.getAttribute('data-review-act');
+    if (!pick && !act) return;
+    closeReviewMenu(false);
+    if (pick) startReview(pick);
+    else if (act === 'stop') stopReview();
+    else if (act === 'write') openTool(toolFor('palette'), document.getElementById('craft-tool-palette'));
+  }
+  // The menu keys: arrows move, Home and End jump, Escape closes back to the
+  // button that opened it, Tab closes and lets focus move on.
+  function onMenuKey(e) {
+    var items = menuItems();
+    var at = items.indexOf(document.activeElement);
+    var to = null;
+    if (e.key === 'ArrowDown') to = (at + 1) % items.length;
+    else if (e.key === 'ArrowUp') to = (at - 1 + items.length) % items.length;
+    else if (e.key === 'Home') to = 0;
+    else if (e.key === 'End') to = items.length - 1;
+    else if (e.key === 'Escape') { e.preventDefault(); closeReviewMenu(true); return; }
+    else if (e.key === 'Tab') { closeReviewMenu(false); return; }
+    if (to === null || !items[to]) return;
+    e.preventDefault();
+    items[to].focus();
+  }
+  function reviewGroup(t, b) {
+    var g = document.createElement('span');
+    g.id = REVIEW_GROUP;
+    g.className = 'craft-review';
+    var more = document.createElement('button');
+    more.type = 'button';
+    more.id = REVIEW_GROUP + '-more';
+    more.className = 'craft-review__more';
+    more.setAttribute('aria-haspopup', 'menu');
+    more.setAttribute('aria-expanded', 'false');
+    more.setAttribute('aria-controls', REVIEW_GROUP + '-menu');
+    more.setAttribute('aria-label', 'Review mode: see the hall as another mode');
+    more.title = 'Review mode: see the hall as another mode';
+    more.innerHTML = '<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4.5 6 7.5 9 4.5"/></svg>';
+    more.addEventListener('click', function (e) { toggleReviewMenu(e && e.detail === 0); });
+    more.addEventListener('keydown', function (e) {
+      if (e.key === 'ArrowDown') { e.preventDefault(); openReviewMenu(true); }
+    });
+    var menu = document.createElement('div');
+    menu.id = REVIEW_GROUP + '-menu';
+    menu.className = 'craft-review__menu';
+    menu.setAttribute('role', 'menu');
+    menu.setAttribute('aria-label', 'Review mode');
+    menu.setAttribute('hidden', '');
+    menu.addEventListener('click', onMenuClick);
+    menu.addEventListener('keydown', onMenuKey);
+    b.addEventListener('keydown', function (e) {
+      if (e.key === 'ArrowDown') { e.preventDefault(); openReviewMenu(true); }
+    });
+    g.addEventListener('pointerenter', function (e) { if (byMouse(e)) openReviewMenu(false); });
+    g.addEventListener('pointerleave', function (e) {
+      if (!byMouse(e)) return;
+      clearTimeout(closeTimer);
+      closeTimer = setTimeout(function () { closeReviewMenu(false); }, 220);
+    });
+    g.appendChild(b);
+    g.appendChild(more);
+    g.appendChild(menu);
+    return g;
+  }
+
+  // The scribble wall: the top bar's empty space, doodled on while reviewing.
+  // craft-review.js draws it (decorative, aria-hidden); every motion is CSS,
+  // so the reduced-motion kill switch leaves three finished doodles standing.
+  var WALL = 'craft-graffiti';
+  var wallTool = { script: 'craft-review.js', api: 'OTBCraftReview' };
+  function applyWall(mode) {
+    var wall = document.getElementById(WALL);
+    var root = document.documentElement;
+    if (!review) {
+      remove(wall);
+      if (root.removeAttribute) root.removeAttribute('data-craft-review');
+      return;
+    }
+    if (root.setAttribute) root.setAttribute('data-craft-review', mode);
+    var side = document.querySelector && document.querySelector('#app-topbar > .topbar-side');
+    if (wall && wall.getAttribute('data-wall') === mode) return;
+    remove(wall);
+    if (!side || !side.parentNode) return;
+    wall = document.createElement('div');
+    wall.id = WALL;
+    wall.className = 'craft-graffiti';
+    wall.setAttribute('data-wall', mode);
+    wall.setAttribute('aria-hidden', 'true');
+    side.parentNode.insertBefore(wall, side);
+    loadTool(wallTool).then(function (api) {
+      var live = document.getElementById(WALL);
+      if (live === wall && review === mode) wall.innerHTML = api.wallHtml(mode);
+    }, function () { /* a bare wall; the menu still says you are reviewing */ });
   }
   // sessionStorage: this session's mode, or that the picker was already shown.
   var MODE_KEY = 'hall-craft';
@@ -371,13 +616,16 @@
     applyLook(mode);
     applyTallies(mode);
     applyTools(mode);
-    try { document.dispatchEvent(new CustomEvent('otb:craft', { detail: { mode: mode } })); } catch (_) { /* old engine */ }
+    applyWall(mode);
+    try { document.dispatchEvent(new CustomEvent('otb:craft', { detail: { mode: mode, review: !!review } })); } catch (_) { /* old engine */ }
   }
 
   // Choose a mode: this session always; across sessions only when asked to keep it.
+  // Choosing any mode, Artistry included, ends a review (task 1004686).
   function choose(mode, keep) {
     mode = valid(mode);
     if (!mode) return;
+    if (review) { drop('sessionStorage', REVIEW_KEY); review = null; closeReviewMenu(false); }
     set('sessionStorage', MODE_KEY, mode);
     set('sessionStorage', ASKED_KEY, '1');
     if (keep === true) set('localStorage', KEEP_KEY, mode);
@@ -389,7 +637,8 @@
   // ---------- the header switch ----------
   function switchHtml() {
     if (pageOptsOut()) return '';
-    var current = read();
+    review = storedReview();
+    var current = review || read();
     return '<div class="craft-switch' + (current ? '' : ' craft-switch--unset') + '" id="craft-switch" role="group" aria-label="Mode">' +
       MODES.map(function (m) {
         return '<button class="craft-switch__opt craft-switch__opt--' + m.id + '" type="button" data-craft-opt="' + m.id + '"' +
@@ -551,7 +800,8 @@
   var mounted = false;
   function mount() {
     if (pageOptsOut()) return;
-    apply(read());
+    review = storedReview();
+    apply(wearing());
     if (mounted) return;
     mounted = true;
     var sw = document.getElementById('craft-switch');
@@ -572,8 +822,13 @@
 
   window.OTBCraftMode = {
     MODES: IDS.slice(),
-    current: read,
+    current: wearing,
     choose: choose,
+    // Review mode (task 1004686): the experience under review, or null.
+    reviewing: function () { return review; },
+    review: startReview,
+    stopReview: stopReview,
+    EXPERIENCES: EXPERIENCES.map(function (x) { return x.id; }),
     open: openPicker,
     ALWAYS_TABS: ALWAYS_TABS.slice(),
     tabsFor: tabsFor,

package/modules/hall-ui/public/craft-review.css

@@ -0,0 +1,227 @@
+/* craft-review.css — artist review mode (task 1004686; craft-mode.js draws the
+   menu, craft-review.js the wall). Imported by style.css, beside page-notes.css.
+
+   The Review button becomes a split pill: Review still opens the feedback doc,
+   and the chevron (or, where a pointer can hover, the whole pill) opens a menu
+   of the four experiences. While an artist reviews one, small black-and-white
+   doodles in the sky's hand are scribbled into the top bar's empty space.
+
+   Every colour is a token (tests/hall_audit.mjs holds that). Every motion is
+   CSS on transform and opacity, and the hall's reduced-motion kill switch
+   (style.css) leaves three doodles standing, finished, with no pen.
+
+   An @import lands BEFORE style.css's own rules, so a rule here that restyles
+   .craft-tool must out-rank it (two classes), or style.css silently wins. */
+
+/* ---------- the split pill ---------- */
+.craft-review {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: var(--radius-pill);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--craft, var(--ink)) 40%, transparent);
+}
+.craft-review > .craft-tool {
+  box-shadow: none;
+  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
+}
+.craft-review__more {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 32px;
+  padding: 0 4px 0 0;
+  border: 0;
+  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
+  background: none;
+  color: var(--craft, var(--ink-soft));
+  cursor: pointer;
+}
+.craft-review__more svg { width: 12px; height: 12px; transition: transform 200ms cubic-bezier(.2, .7, .3, 1); }
+.craft-review__more[aria-expanded="true"] svg { transform: rotate(180deg); }
+.craft-review__more:hover { background: color-mix(in srgb, var(--craft, var(--ink)) 12%, transparent); }
+.craft-review__more:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+@media (min-width: 1181px) {
+  .craft-review > .craft-tool { padding-right: 6px; }
+}
+@media (max-width: 1180px) {
+  .craft-review > .craft-tool { width: 30px; }
+}
+
+/* Reviewing: the pill takes a wash of the experience's colour, says
+   "Reviewing", and a drop of wet paint hangs from it. */
+.craft-tool.craft-tool--reviewing { position: relative; background: color-mix(in srgb, var(--craft, var(--sea)) 14%, transparent); }
+.craft-tool.craft-tool--reviewing::after {
+  content: '';
+  position: absolute;
+  left: 13px;
+  bottom: -4px;
+  width: 4px;
+  height: 7px;
+  border-radius: 0 0 3px 3px;
+  background: var(--craft, var(--sea));
+}
+
+/* ---------- the menu ---------- */
+.craft-review__menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: var(--z-drawer);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 248px;
+  padding: 6px;
+  box-sizing: border-box;
+  background: var(--bg-card);
+  border-radius: var(--radius);
+  box-shadow: 0 0 0 1px var(--glass-edge), var(--shadow-pop);
+}
+.craft-review__menu[hidden] { display: none; }
+/* A bridge over the gap, so a pointer travelling down to the menu never
+   leaves the pill and the hover menu does not close under it. */
+.craft-review__menu::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
+.craft-review__head {
+  margin: 8px 12px 2px;
+  font-family: var(--label-face);
+  font-size: 11px;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+.craft-review__item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 36px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--ink);
+  font: inherit;
+  font-size: 14px;
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.craft-review__item:hover { background: color-mix(in srgb, var(--craft, var(--ink)) 10%, transparent); }
+.craft-review__item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
+.craft-review__icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-soft); }
+.craft-review__item[aria-checked="true"] { color: var(--craft, var(--ink)); font-weight: 500; }
+.craft-review__item[aria-checked="true"] .craft-review__icon { color: var(--craft, var(--ink)); }
+.craft-review__check { width: 14px; height: 14px; margin-left: auto; flex-shrink: 0; }
+.craft-review__item--stop { margin-top: 4px; border-top: 1px solid var(--rule-soft); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
+
+/* A phone: no hover and no room for the chevron, so Review itself opens the
+   menu (craft-mode.js), and the menu spans the bar instead of hanging off a
+   pill that may sit near the left edge. */
+@media (max-width: 640px) {
+  .craft-review { position: static; }
+  .craft-review__more { display: none; }
+  .craft-review > .craft-tool { width: 28px; border-radius: var(--radius-pill); }
+  .craft-review__menu { top: calc(100% + 6px); left: 12px; right: 12px; min-width: 0; }
+  .craft-review__item { min-height: 44px; }
+}
+/* Under 360px the bar holds two tools, not three: reviewing Ideating, its
+   own Ideas button folds away (craft-mode.js marks it a guest). */
+@media (max-width: 359px) { .craft-tool.craft-tool--guest { display: none; } }
+
+/* ---------- the scribble wall ---------- */
+/* The top bar's empty space, between the title and the controls. Where none
+   is left (a phone), the Review pill still says "Reviewing". */
+.craft-graffiti {
+  position: relative;
+  flex: 1 1 0;
+  min-width: 0;
+  align-self: stretch;
+  overflow: hidden;
+  pointer-events: none;
+  container: gx / inline-size;
+}
+@media (max-width: 640px) { .craft-graffiti { display: none; } }
+/* Small walls keep the small doodles; a wall too tight for even one shows none. */
+@container gx (max-width: 58px) { .gx-tag--wide { display: none; } }
+@container gx (max-width: 34px) { .gx-tag { display: none; } }
+
+/* Six doodles in the sky's hand (craft-review.js), each scribbled at its own
+   spot and height across the wall: a new one every five seconds of a
+   thirty-second round, each staying about ten, so two or three are up at once. */
+.gx-tag {
+  position: absolute;
+  top: calc(50% - 12px + var(--gx-dy, 0px));
+  width: var(--gx-w);
+  height: 24px;
+  --gx-delay: 0s;
+}
+.gx-tag--1 { left: calc((100% - var(--gx-w)) * .06); --gx-dy: -7px; }
+.gx-tag--2 { left: calc((100% - var(--gx-w)) * .55); --gx-dy: 6px; --gx-delay: 5s; }
+.gx-tag--3 { left: calc((100% - var(--gx-w)) * .3); --gx-dy: 4px; --gx-delay: 10s; }
+.gx-tag--4 { left: calc((100% - var(--gx-w)) * .84); --gx-dy: -6px; --gx-delay: 15s; }
+.gx-tag--5 { left: calc((100% - var(--gx-w)) * .42); --gx-dy: -5px; --gx-delay: 20s; }
+.gx-tag--6 { left: calc((100% - var(--gx-w)) * .72); --gx-dy: 7px; --gx-delay: 25s; }
+
+/* The wet line: the window slides in from the left while the drawing inside
+   it slides the other way by the same amount, so the doodle stays put and is
+   uncovered left to right. The pen tip rides that edge, jittering up and
+   down as it scribbles. */
+.gx-win, .gx-track { position: absolute; inset: -2px -3px; }
+.gx-win { overflow: hidden; }
+.gx-ink { position: absolute; inset: 0; padding: 2px 3px; }
+.gx-svg { display: block; overflow: visible; }
+.gx-win, .gx-ink, .gx-track {
+  animation-duration: 30s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+  animation-delay: var(--gx-delay);
+}
+.gx-win { animation-name: gx-win; }
+.gx-ink { animation-name: gx-ink; }
+.gx-track { animation-name: gx-track; opacity: 0; }
+/* The rest frame (and the reduced-motion one): three doodles, finished. */
+.gx-tag:not(.gx-tag--1):not(.gx-tag--2):not(.gx-tag--4) .gx-win { opacity: 0; }
+
+@keyframes gx-win {
+  0% { transform: translateX(-100%); opacity: 1; }
+  4% { transform: translateX(0); }
+  28% { opacity: 1; }
+  32%, 100% { transform: translateX(0); opacity: 0; }
+}
+@keyframes gx-ink {
+  0% { transform: translateX(100%); }
+  4%, 100% { transform: translateX(0); }
+}
+/* The pen waits unseen: a doodle not yet begun shows no tip. */
+@keyframes gx-track {
+  0% { transform: translateX(-100%); opacity: 0; }
+  .3% { opacity: 1; }
+  4% { transform: translateX(0); opacity: 1; }
+  5%, 100% { transform: translateX(0); opacity: 0; }
+}
+
+.gx-nib {
+  position: absolute;
+  right: -1.5px;
+  top: calc(50% - 1.5px);
+  width: 3px;
+  height: 3px;
+  border-radius: 999px;
+  background: var(--ink);
+  animation: gx-scribble .16s ease-in-out infinite alternate;
+}
+@keyframes gx-scribble {
+  from { transform: translateY(-7px); }
+  to { transform: translateY(7px); }
+}
+
+/* The ink: hairlines and dots, black on the light bar and white on the dark
+   one, with the sky's own ladder for the fainter marks. */
+.gx-ln { fill: none; stroke: var(--ink); stroke-width: 1.3px; stroke-linecap: round; stroke-linejoin: round; }
+.gx-ln--soft { stroke: color-mix(in srgb, var(--ink) 55%, transparent); }
+.gx-ln--dash { stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 1px; stroke-dasharray: 2 2.5; }
+.gx-pt { fill: var(--ink); }
+.gx-halo { fill: none; stroke: color-mix(in srgb, var(--ink) 28%, transparent); stroke-width: 1px; }