@bongos/core 1.25.15 → 1.25.16

package/modules/hall-ui/public/dom-utils.js

@@ -529,6 +529,10 @@
     } catch (err) { return null; }
   }
 
+  // The hall's one completion tick (24x24, stroked, currentColor): the setup flow's step
+  // marks and the Genesis checklist both draw it, so a done thing looks done the same way.
+  const CHECK_SVG = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+
   const OTB = {
     escapeHtml, sleep, $, fmtNum, num, fmtInt, fmtCompact, fmtDate, rankLabel, toast, moduleOn, disciplines,
     plainMessage, toastKind, TOAST_MS, // task 1005086 — one toast, a duration per kind, no server address
@@ -542,6 +546,7 @@
     splitCriterion,
     categoryChip, // task 1003276 — shared by the Goals page, the Tasks board and the task page
     hubOrigin, // task 1003485 — the hub account page's origin, for Settings and the profile nudge
+    CHECK_SVG, // task 1005110 — the one tick, setup-gate.js and genesis-home.js
   };
   if (typeof window !== 'undefined') window.OTB = OTB;
   // Node: the hall libs that also load under require() (hall-kit.js, task-lib.js, …)

package/modules/hall-ui/public/genesis-home.js

@@ -190,9 +190,10 @@
 
   // task 1005109: Copy prompt on each task still to do, so the founder pastes it into
   // Claude without leaving Genesis. The Tasks board's own button (work.js), and only that
-  // one verb: the owner declined a Claim button here. A finished task offers nothing.
+  // one verb: the owner declined a Claim button here. Only an OPEN task offers it: a done
+  // one has nothing left, and a locked one cannot be claimed yet (task 1005110).
   function copyButtonHtml(t) {
-    if (t.finished) return '';
+    if (t.state !== 'open') return '';
     return '<button class="task__copy" type="button" data-genesis-copy="' + esc(t.id) + '"'
       + ' title="Copy the task prompt to your clipboard" aria-label="Copy prompt for task ' + esc(t.id) + '">'
       + '<span class="task__copy-icon" aria-hidden="true">📋</span></button>';
@@ -212,16 +213,30 @@
     return lib.copyTaskPrompt(t, btn, toast);
   }
 
+  // task 1005110: one checklist row in one of three states, as the server decided them
+  // (shapeGenesis taskState): done (a filled circle with the tick), open (an empty
+  // circle, its status and Copy prompt) or locked (a dashed circle and what it waits on,
+  // no Copy prompt: the claim would be refused).
+  function taskRowHtml(t) {
+    var state = t.state === 'done' || t.state === 'locked' ? t.state : 'open';
+    var check = window.OTB.CHECK_SVG || '';
+    var mark = '<span class="genesis__mark" aria-hidden="true">' + (state === 'done' ? check : '') + '</span>';
+    var said = { done: 'Done', open: 'To do', locked: 'Locked' }[state];
+    var after = (t.waits_on || []).map(function (w) { return w.title; }).filter(Boolean);
+    var tail = state === 'locked'
+      ? '<span class="genesis__task-wait">' + esc(after.length ? 'after ' + after.join(', ') : 'after an earlier task') + '</span>'
+      : window.OTB.statusPill(t.status, { small: true, extraClass: 'genesis__task-st' }) + copyButtonHtml(t);
+    return '<li class="genesis__task is-' + state + '">' + mark
+      + '<span class="sr-only">' + said + ': </span>'
+      + '<a class="genesis__task-t" href="/task/' + encodeURIComponent(t.id) + '">' + esc(t.title) + '</a>'
+      + tail + '</li>';
+  }
+
   function nowHtml(g, viewerId) {
     var s = g.stages.find(function (x) { return x.state === 'now'; });
     if (!s) return '';
     var tasks = s.tasks.length
-      ? '<ul class="genesis__tasks">' + s.tasks.map(function (t) {
-        return '<li class="genesis__task' + (t.finished ? ' is-finished' : '') + '">'
-          + '<a class="genesis__task-t" href="/task/' + encodeURIComponent(t.id) + '">' + esc(t.title) + '</a>'
-          + window.OTB.statusPill(t.status, { small: true, extraClass: 'genesis__task-st' })
-          + copyButtonHtml(t) + '</li>';
-      }).join('') + '</ul>'
+      ? '<ul class="genesis__tasks">' + s.tasks.map(taskRowHtml).join('') + '</ul>'
       : '<p class="genesis__note">No tasks for this stage yet.</p>';
     return '<section class="genesis__now" aria-labelledby="genesis-now-h">'
       + '<h3 id="genesis-now-h" class="genesis__now-h">This stage’s work · ' + esc(s.label) + '</h3>'

package/modules/hall-ui/public/setup-gate.js

@@ -20,7 +20,7 @@
 
   function esc(s) { return window.OTB.escapeHtml(s); }
 
-  var CHECK = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+  var CHECK = window.OTB.CHECK_SVG; // the hall's one tick (dom-utils.js), shared with the Genesis checklist
 
   function stepDetail(step) {
     if (step.id === 'cli_setup') {

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

@@ -1054,7 +1054,27 @@ html[data-theme="dark"] .gplate__light { display: none; }
 .genesis__stage.is-later { opacity: 0.6; }
 .genesis__now-h { margin: 0 0 4px; font-size: 15px; font-weight: 500; }
 .genesis__task-t { flex: 1; min-width: 0; padding: 3px 0; }
-.genesis__task.is-finished .genesis__task-t { color: var(--ink-faint); text-decoration: line-through; }
+/* task 1005110: the stage's work reads as a checklist. Done is a filled circle with the
+   hall's tick (the setup flow's mark), open an empty circle, locked a dashed one with
+   what it waits on. Never struck through: a finished task was earned, not cancelled. */
+.genesis__mark {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--ds-radius-pill); /* round on purpose: the owner asked for a check filling a circle */
+  border: 1.5px solid var(--rule);
+  color: var(--ok);
+}
+.genesis__mark svg { width: 14px; height: 14px; }
+.genesis__task.is-done .genesis__mark { border-color: transparent; background: var(--ok-weak); }
+.genesis__task.is-done .genesis__task-t { color: var(--ink-soft); }
+.genesis__task.is-open .genesis__mark { border-color: var(--accent); }
+.genesis__task.is-locked .genesis__mark { border-style: dashed; }
+.genesis__task.is-locked .genesis__task-t { color: var(--ink-faint); }
+.genesis__task-wait { flex: none; max-width: 40%; font-size: var(--ds-text-xs); color: var(--ink-soft); text-align: right; }
 .genesis__alive { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 12px 0; }
 .genesis__alive-plates { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
 .genesis__alive-h { margin: 6px 0 0; font-size: 28px; font-weight: 400; }

package/modules/lifecycle/kickoff-checklist.js

@@ -144,7 +144,7 @@ function kickoffChecklist(spec = {}, { provisioned = false, firstSignIn = false
 const GENESIS_STEPS = Object.freeze({
   scope: [
     { title: 'Write the project scope: what we are making, for whom, and what is out of scope',
-      description: 'Genesis stage 1 (scope). One page the whole team can read: the thing being made, who it is for, what done looks like for the first version, and what is deliberately left out. When it is written, Goals and the Roadmap wake.' },
+      description: 'Genesis stage 1 (scope). The project interview: what you are creating and why, who it is for and who you want building it with you, what success looks like in two years, and what everyone else in this area is getting wrong. Every future goal and task is planned from your answers, and "not sure yet" is a fine answer you can come back to. You are the author and you choose how to work: be guided through the questions, write it yourself with the questions beside you, or have your own AI session walk you through them (it asks and pushes back; you decide) — switch any time, nothing is lost. The one-page scope is then drafted from your answers. Run `npx bongos genesis show scope` to see the questions and your answers, or `npx bongos genesis assist scope` for the brief to give your AI session. When it is written, Goals and the Roadmap wake.' },
   ],
   strategize: [
     { title: 'Write out the strategy, or link the one you already have',
@@ -168,9 +168,19 @@ const GENESIS_EXISTING_FIRST = {
   description: 'Genesis stage 1 (scope), for a project that already exists. Before writing anything new, link what is already there, so the scope is written from it rather than beside it.',
 };
 
-// genesisChecklist({ existing }) → { stageKey: [{ title, description, kind, discipline, ref }] }
+// GENESIS_AFTER — "this step follows that one", by ref (task 1005110). A step listed
+// here is filed with a real dependency edge on the step it names, so it cannot be
+// claimed (DEPS_NOT_SHIPPED) and the genesis home draws it locked until that one
+// ships. Only where the order is real: a stage with no entry here is all open at once.
+// Today that is brownfield scope alone — the scope is written FROM what was gathered.
+const GENESIS_AFTER = Object.freeze({
+  'genesis:scope': 'genesis:scope:existing',
+});
+
+// genesisChecklist({ existing }) → { stageKey: [{ title, description, kind, discipline, ref, after }] }
 // in genesis order. `ref` is the stable per-task key the seeder dedups on, so filing
-// twice files nothing new. Pure — no I/O.
+// twice files nothing new. `after` is the ref of the step this one waits for, set only
+// when that step is in the same list (GENESIS_AFTER), else null. Pure — no I/O.
 function genesisChecklist({ existing = false } = {}) {
   const out = {};
   for (const [stage, steps] of Object.entries(GENESIS_STEPS)) {
@@ -181,6 +191,10 @@ function genesisChecklist({ existing = false } = {}) {
       ...t, kind: 'decision', discipline: 'artist', ref: t === GENESIS_EXISTING_FIRST ? 'genesis:scope:existing' : `genesis:${stage}`,
     }));
   }
+  for (const list of Object.values(out)) {
+    const refs = new Set(list.map((t) => t.ref));
+    for (const t of list) t.after = refs.has(GENESIS_AFTER[t.ref]) ? GENESIS_AFTER[t.ref] : null;
+  }
   return out;
 }
 

package/modules/lifecycle/kickoff-seed.js

@@ -85,6 +85,7 @@ async function seedGenesisStages({ builderId = null, existing = false } = {}, de
   const pool = deps.pool || api.pool;
   const insert = deps.createTask || ((row) => db.createTask(row));
   const find = deps.findTaskBySourceRef || ((q) => db.findTaskBySourceRef(q));
+  const addDep = deps.addTaskDependency || ((id, dep) => db.addTaskDependency(id, dep));
   const { rows: versions } = await pool.query(FIRST_VERSION_SQL);
   if (!versions.length) return { seeded: 0, skipped: 'no_version' };
   const versionId = versions[0].id;
@@ -109,18 +110,39 @@ async function seedGenesisStages({ builderId = null, existing = false } = {}, de
       seeded += 1;
     }
   }
+  // task 1005110: the order genesisChecklist declares becomes a real edge, so the claim
+  // gate refuses the later step (DEPS_NOT_SHIPPED) until the earlier one ships. Written
+  // for steps already filed too (ON CONFLICT DO NOTHING), so a re-run repairs a missing edge.
+  for (const steps of Object.values(genesisChecklist({ existing }))) {
+    for (const t of steps) {
+      if (!t.after) continue;
+      const [me, before] = await Promise.all([
+        find({ source: GENESIS_SOURCE, sourceRef: t.ref }),
+        find({ source: GENESIS_SOURCE, sourceRef: t.after }),
+      ]);
+      if (me && before) await addDep(me.id, before.id);
+    }
+  }
   return { seeded, versionId };
 }
 
-// genesisStageTasks(deps) → { stageKey: [{ id, title, status, description }] } for every
-// genesis task on the board, grouped by the stage its source_ref names. The genesis home
-// lists them, and a stage close hands their ids to the Board Room's finished-tasks gate.
+// genesisStageTasks(deps) → { stageKey: [{ id, title, status, description, waits_on }] } for
+// every genesis task on the board, grouped by the stage its source_ref names. The genesis
+// home lists them, and a stage close hands their ids to the Board Room's finished-tasks gate.
+// `waits_on` is [{ id, title }] of the tasks it depends on that have not shipped: the claim
+// gate's own rule (unsatisfiedDeps, abandoned still blocks), so a row drawn locked is one
+// POST /claims would refuse (task 1005110).
 // The description rides along so each row's Copy prompt carries the task's own words
 // (task 1005109); the read stays bounded, it is only the few seeded genesis tasks.
 async function genesisStageTasks(deps = {}) {
   const pool = deps.pool || api.pool;
   const { rows } = await pool.query(
-    `SELECT id, title, status, description, source_ref FROM tasks WHERE source = $1 ORDER BY id ASC`,
+    `SELECT t.id, t.title, t.status, t.description, t.source_ref,
+            COALESCE((SELECT json_agg(json_build_object('id', x.id, 'title', x.title) ORDER BY x.id)
+                        FROM dependencies d JOIN tasks x ON x.id = d.to_id
+                       WHERE d.from_kind = 'task' AND d.from_id = t.id
+                         AND d.to_kind = 'task' AND x.status <> 'shipped'), '[]'::json) AS waits_on
+       FROM tasks t WHERE t.source = $1 ORDER BY t.id ASC`,
     [GENESIS_SOURCE],
   );
   const out = {};
@@ -129,6 +151,7 @@ async function genesisStageTasks(deps = {}) {
     if (!stage) continue;
     (out[stage] = out[stage] || []).push({
       id: String(r.id), title: r.title, status: r.status, description: r.description || '',
+      waits_on: (Array.isArray(r.waits_on) ? r.waits_on : []).map((w) => ({ id: String(w.id), title: w.title })),
     });
   }
   return out;

package/modules/onboarding/genesis-home.js

@@ -143,10 +143,19 @@ function readPlanValue(raw) {
 
 const FINISHED = Object.freeze(['shipped', 'abandoned']); // the Board Room's own gate, mirrored for display
 
+// taskState(t) — one stage task as the checklist draws it (task 1005110).
+function taskState(t) {
+  const finished = FINISHED.includes(t.status);
+  const waits = finished ? [] : (Array.isArray(t.waits_on) ? t.waits_on : []);
+  return { ...t, finished, waits_on: waits, state: finished ? 'done' : waits.length ? 'locked' : 'open' };
+}
+
 // shapeGenesis({ mode, plan, tasks, board, stageAt }) — PURE. The genesis home's view.
 //   mode    foundingModeFor's shape (non-null)
 //   plan    the saved plan or null (deciding)
-//   tasks   { stage: [{ id, title, status, description }] }
+//   tasks   { stage: [{ id, title, status, description, waits_on }] }
+// Each task comes back with `state`: 'done' (finished), 'locked' (waits on an unshipped
+// task, named in `waits_on`) or 'open' — decided here, never re-derived in a browser.
 //   board   { stage: genesisStageStatus row } or {}
 //   stageAt { stage: ISO } — when each stage began, for its due date
 function shapeGenesis({ mode, plan, tasks = {}, board = {}, stageAt = {} }) {
@@ -154,7 +163,7 @@ function shapeGenesis({ mode, plan, tasks = {}, board = {}, stageAt = {} }) {
   const stages = PROPER.map((key) => {
     const info = STAGE_INFO[key];
     const idx = fm.STAGES.indexOf(key);
-    const list = (tasks[key] || []).map((t) => ({ ...t, finished: FINISHED.includes(t.status) }));
+    const list = (tasks[key] || []).map((t) => taskState(t));
     const b = board[key] || null;
     const allFinished = list.length > 0 && list.every((t) => t.finished);
     const onBoard = !!(b && (b.state === 'sitting' || b.state === 'passed'));

package/modules/onboarding/genesis-work.js

@@ -40,7 +40,7 @@
 // un-answer appends a history row, so the founder can see what an answer used to say.
 //
 // WHICH STAGES. A stage adopts the pattern by declaring its questions in QUESTIONS.
-// Strategize does here; scope's guided door is its project interview (task 1005114);
+// Strategize does (task 1005116); scope's guided door is its project interview (task 1005114);
 // charter, legalize and legislation adopt it when they are next touched. A stage with
 // no questions still takes a free page and a link.
 //
@@ -59,8 +59,30 @@ const LIMITS = Object.freeze({ answer: 4000, page: 20000, link: 500 });
 
 // Each adopted stage's questions, in the order the guided door asks them. `id` is
 // stable: a stored answer names it, so never rename or reuse one. `hint` is the shape
-// of a good answer, shown under the question in every door.
+// of a good answer, shown under the question in every door. `group` (optional) is a
+// heading the guided door shows above the questions that share it.
+//
+// SCOPE IS THE PROJECT INTERVIEW (task 1005114): the questions every later goal and task
+// should be planned inside — what this is for, who it is for, and the bet — rather than
+// V1's edges, which is what came back thin before. The owner's starter set, as written;
+// the list is "not final" and the owner invited more. These are prose questions; the
+// closed-vocabulary ones (team shape, geography, entity, rewards) are the hub's project
+// detail and are not repeated here.
 const QUESTIONS = Object.freeze({
+  scope: Object.freeze([
+    Object.freeze({ id: 'what_creating', group: 'What and why', ask: 'In a few sentences, what are you creating with this project?',
+      hint: 'Say it the way you would to a friend. What exists when this is done that does not exist now?' }),
+    Object.freeze({ id: 'goal_impact', group: 'What and why', ask: 'What is your goal with it? What impact do you want it to have?',
+      hint: 'Why this is worth doing at all, and for whom it changes something.' }),
+    Object.freeze({ id: 'success_two_years', group: 'What and why', ask: 'In two years, what does success look like?',
+      hint: 'Something you could point at: who is using it, what they do with it, what it has become.' }),
+    Object.freeze({ id: 'reach_who', group: 'Who', ask: 'Who do you want to reach with this project?',
+      hint: 'The people it is ultimately for, not only the first ones. Be as specific as you can.' }),
+    Object.freeze({ id: 'work_with_who', group: 'Who', ask: 'Who do you want working on it with you?',
+      hint: 'The kind of people you hope join: their skills, how they work, what they care about.' }),
+    Object.freeze({ id: 'others_wrong', group: 'The bet', ask: 'What is everyone else in this area getting wrong?',
+      hint: 'The thing you believe that others in this space do not. This is the bet the project makes.' }),
+  ]),
   strategize: Object.freeze([
     Object.freeze({ id: 'big_pieces', ask: 'What are the big pieces, and in what order do they get built?',
       hint: 'Three to six pieces is plenty. Say why that order: what has to exist before what.' }),
@@ -118,7 +140,7 @@ function shapeStage(stage, work, answers = []) {
   const questions = questionsFor(stage).map((q) => {
     const a = byId.get(q.id);
     return {
-      id: q.id, ask: q.ask, hint: q.hint,
+      id: q.id, ask: q.ask, hint: q.hint, group: q.group || null,
       answer: a ? {
         state: a.state, text: a.answer_md || null, origin: a.origin,
         // A carried-over answer is shown as such until the founder makes it theirs.
@@ -196,11 +218,12 @@ function assistPrompt(stage) {
     '- Offer two or three options when I am stuck, never one confident answer.',
     '- "Not sure yet" is a fine answer. Record it as that rather than filling the gap for me.',
     '- Record an answer only after I say it is mine, in my words (you may tidy the wording; read it back first).',
+    '- Once I have answered, you may offer a draft page built only from my answers. I edit it; save it only when I say it is mine.',
     '',
   ];
   if (qs.length) {
-    lines.push('The questions:');
-    qs.forEach((q, i) => lines.push(`${i + 1}. ${q.ask} (${q.hint})`));
+    lines.push('The questions (the id in brackets is what you record the answer under):');
+    qs.forEach((q, i) => lines.push(`${i + 1}. [${q.id}] ${q.ask} (${q.hint})`));
     lines.push('');
   }
   lines.push('To see what I have already said:  npx bongos genesis show ' + stage);

package/modules/public-landing/public/assets/guide-scene.css

@@ -0,0 +1,245 @@
+/* assets/guide-scene.css — the start-a-project guide as a scene in the game (task 1005275).
+
+   The scene wears the game's look, Helm (DESIGN.md "Helm: the hall's look"): a night panel
+   closed left and right by the strong ice hairline, names in the name voice (condensed
+   wide capitals), what you press cut at two corners, progress as skewed segments, and the
+   one accent bar on the thing to do next. It stands on the landing, so it spends the
+   landing's tokens, never the hall's literals: the night and the ice are mixes of the
+   pack's --sea into its --bg and --ink (the Fifteen Rule), and they flip with the world's
+   own mode tier, so this sheet writes no dark rule and no :root. Every value is a var()
+   or a color-mix() of the fifteen; black with alpha is the scrim. Motion is two short
+   transitions and the waiting dots, all stopped by world.css's reduced-motion switch.
+   Layout: the plan beside the talk. Every layout value that changes on a phone is a
+   --gd-* name read with its desktop value as the fallback, and the landing's ONE
+   breakpoint (900px, DESIGN.md "Responsive"; the @media (max-width:900px) body block in
+   index.html) restates those names: one column, the frame the whole screen, the plan
+   opening over the talk from the Plan button. So this sheet adds no breakpoint, and its
+   inset edges are named once here (--gd-edge*) rather than typed into each rule. */
+.gd {
+  --gd-night: color-mix(in srgb, var(--sea) 9%, var(--bg));
+  --gd-panel: color-mix(in srgb, var(--sea) 13%, var(--bg-card));
+  --gd-ice: color-mix(in srgb, var(--sea) 12%, var(--ink));
+  --gd-rule: color-mix(in srgb, var(--gd-ice) 40%, transparent);
+  --gd-rule-soft: color-mix(in srgb, var(--gd-ice) 20%, transparent);
+  --gd-glass: color-mix(in srgb, var(--gd-ice) 9%, transparent);
+  --gd-strong: 1.5px;
+  --gd-name: "Barlow Condensed", var(--font-display);
+  --gd-body: "Barlow", var(--font-body);
+  --gd-cut: 12px;
+  --gd-cut-sm: 8px;
+  --gd-cut-path: polygon(var(--gd-cut) 0, 100% 0, 100% calc(100% - var(--gd-cut)), calc(100% - var(--gd-cut)) 100%, 0 100%, 0 var(--gd-cut));
+  --gd-cut-path-sm: polygon(var(--gd-cut-sm) 0, 100% 0, 100% calc(100% - var(--gd-cut-sm)), calc(100% - var(--gd-cut-sm)) 100%, 0 100%, 0 var(--gd-cut-sm));
+  --gd-focus: inset 0 0 0 2px var(--focus), inset 0 0 0 4px var(--gd-night);
+  /* the hairline drawn inside a cut shape (a border would be clipped by the cut) */
+  --gd-edge: inset 0 0 0 1px var(--gd-rule);
+  --gd-edge-soft: inset 0 0 0 1px var(--gd-rule-soft);
+  --gd-seg-edge: inset 0 0 0 var(--gd-strong) var(--gd-rule);
+
+  position: fixed; inset: 0; z-index: var(--ds-z-modal, 160);
+  display: flex; align-items: center; justify-content: center;
+  padding: var(--gd-pad, var(--ds-space-md));
+  background: rgba(0, 0, 0, .62);
+  -webkit-backdrop-filter: blur(6px) saturate(.7); backdrop-filter: blur(6px) saturate(.7);
+  color: var(--gd-ice); font-family: var(--gd-body); font-size: var(--ds-text-xl); line-height: 1.5;
+}
+.gd[hidden] { display: none; }
+.gd .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+html.gd-open, html.gd-open body { overflow: hidden; }
+
+.gd__frame {
+  position: relative; box-sizing: border-box;
+  width: min(100%, var(--gd-frame-w, 1080px)); height: min(100%, var(--gd-frame-h, 760px));
+  display: grid; grid-template-columns: var(--gd-cols, minmax(0, 1fr) 340px);
+  background: var(--gd-night);
+  border: 0 solid var(--gd-rule); border-left-width: var(--gd-side, var(--gd-strong)); border-right-width: var(--gd-side, var(--gd-strong));
+  box-shadow: var(--ds-shadow-pop);
+}
+
+/* ── the talk ── */
+.gd__talk { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
+.gd__head {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-sm);
+  padding: var(--ds-space-sm) var(--gd-gutter, var(--ds-space-md));
+  border-bottom: var(--gd-strong) solid var(--gd-rule);
+}
+.gd__title, .gd__planh {
+  margin: 0; font-family: var(--gd-name); font-weight: 500; font-size: var(--ds-text-3xl);
+  letter-spacing: .24em; text-transform: uppercase; line-height: 1.2; color: var(--ink);
+}
+.gd__x {
+  flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
+  background: transparent; color: var(--gd-ice); border: 0; cursor: pointer;
+  clip-path: var(--gd-cut-path-sm);
+  transition: background-color var(--ds-dur-fast) var(--ds-ease);
+}
+.gd__x svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; fill: none; }
+.gd__x:hover { background: var(--gd-glass); }
+
+/* the guide: the sprite in a cut frame, its name, the count as words and segments */
+.gd__who-row {
+  display: flex; align-items: center; gap: var(--ds-space-sm);
+  padding: var(--ds-space-sm) var(--gd-gutter, var(--ds-space-md));
+  border-bottom: var(--ds-line, 1px) solid var(--gd-rule-soft);
+}
+.gd__face {
+  position: relative; flex: none; width: var(--gd-face, 72px); height: var(--gd-face, 72px); display: grid; place-items: center;
+  background: var(--gd-panel); clip-path: var(--gd-cut-path-sm);
+  box-shadow: var(--gd-edge);
+}
+.gd__face img { width: var(--gd-face-img, 64px); height: var(--gd-face-img, 64px); image-rendering: pixelated; }
+.gd__face img[hidden] { display: none; }
+.gd__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
+.gd__name {
+  margin: 0; font-family: var(--gd-name); font-weight: 600; font-size: var(--ds-text-xl);
+  letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
+}
+.gd__left { margin: 0; font-size: var(--ds-text-md); color: var(--gd-ice); font-variant-numeric: tabular-nums; }
+.gd__left[hidden], .gd__segs[hidden] { display: none; }
+.gd__segs { display: flex; flex-wrap: wrap; gap: var(--ds-space-hair); padding-left: 4px; }
+/* a message still to send is an outline; a sent one is filled ice (the Helm segment) */
+.gd__seg {
+  width: 22px; height: 8px; transform: skewX(-28deg);
+  box-shadow: var(--gd-seg-edge);
+}
+.gd__seg--used { background: var(--gd-ice); box-shadow: none; }
+
+/* the conversation */
+.gd__log {
+  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
+  margin: 0; padding: var(--ds-space-md) var(--gd-gutter, var(--ds-space-md)); list-style: none;
+  display: flex; flex-direction: column; gap: var(--ds-space-sm);
+}
+.gd__msg { display: flex; flex-direction: column; gap: 2px; max-width: 46rem; }
+.gd__who {
+  font-family: var(--gd-name); font-size: var(--ds-text-xs); font-weight: 500;
+  letter-spacing: .2em; text-transform: uppercase; color: var(--gd-ice);
+}
+.gd__words { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: pretty; color: var(--ink); }
+.gd__msg--visitor { align-self: flex-end; align-items: flex-end; }
+.gd__msg--visitor .gd__words {
+  padding: var(--ds-space-hair) var(--ds-space-sm);
+  background: var(--gd-panel); clip-path: var(--gd-cut-path-sm);
+  box-shadow: var(--gd-edge-soft);
+}
+.gd__msg--note .gd__words {
+  padding-top: var(--ds-space-hair); border-top: var(--ds-line, 1px) solid var(--gd-rule-soft);
+  color: var(--gd-ice); font-size: var(--ds-text-md);
+}
+/* waiting: three dots that rise in turn; at rest (reduced motion) they simply sit */
+.gd__dot {
+  display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: var(--ds-radius-pill);
+  background: var(--gd-ice); opacity: .5;
+  animation: gd-wait 1.2s var(--ds-ease) infinite;
+}
+.gd__dot:nth-child(3) { animation-delay: .15s; }
+.gd__dot:nth-child(4) { animation-delay: .3s; }
+@keyframes gd-wait { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
+
+.gd__err {
+  margin: 0 var(--ds-space-md) var(--ds-space-hair); padding: var(--ds-space-hair) var(--ds-space-sm);
+  border-left: var(--gd-strong) solid var(--err); background: var(--gd-glass);
+  color: var(--ink); font-size: var(--ds-text-md);
+}
+.gd__err[hidden] { display: none; }
+
+/* the composer */
+.gd__say {
+  display: flex; align-items: flex-end; gap: var(--ds-space-hair); flex-wrap: wrap;
+  padding: var(--ds-space-sm) var(--gd-gutter, var(--ds-space-md)) var(--ds-space-md);
+  border-top: var(--gd-strong) solid var(--gd-rule);
+}
+.gd__say[hidden] { display: none; }
+.gd__text {
+  flex: 1 1 16rem; min-width: 0; min-height: 48px; max-height: 9.5rem; resize: vertical; box-sizing: border-box;
+  padding: 11px var(--ds-space-sm);
+  background: var(--gd-panel); color: var(--ink); caret-color: var(--accent);
+  border: var(--ds-line, 1px) solid var(--gd-rule); border-radius: 0;
+  font: inherit; font-size: var(--ds-text-xl);
+}
+.gd__text::placeholder { color: var(--gd-ice); opacity: .8; }
+.gd__text:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; box-shadow: none; border-color: transparent; }
+.gd__text:disabled { opacity: .7; }
+.gd__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
+/* under the box: end the chat early for the plan, or leave for sign-up */
+.gd__sayfoot { flex-basis: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-sm); flex-wrap: wrap; }
+.gd__skip {
+  display: inline-flex; align-items: center; padding: 2px 0; min-height: 24px;
+  color: var(--gd-ice); font-size: var(--ds-text-md); text-decoration: underline; text-underline-offset: 3px;
+}
+.gd__skip:hover { color: var(--ink); }
+
+/* what you press: cut, in the name voice. The primary is the one accent bar. */
+.gd__send, .gd__go, .gd__planbtn {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-hair);
+  min-height: 48px; padding: 0 var(--ds-space-md); box-sizing: border-box; border: 0; cursor: pointer;
+  font-family: var(--gd-name); font-size: var(--ds-text-xl); font-weight: 600;
+  letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
+  clip-path: var(--gd-cut-path);
+  transition: background-color var(--ds-dur-fast) var(--ds-ease);
+}
+.gd__send, .gd__go { background: var(--accent); color: var(--accent-on); }
+.gd__send:hover, .gd__go:hover { background: var(--accent-lift); color: var(--accent-on); }
+.gd__send:disabled { background: var(--gd-panel); color: var(--gd-ice); cursor: default; }
+/* the Plan button is the one-column layout's only (the plan stands beside the talk above it) */
+.gd__planbtn { display: var(--gd-planbtn, none); flex: none; background: var(--gd-panel); color: var(--ink); box-shadow: var(--gd-edge); min-height: 40px; padding: 0 var(--ds-space-sm); font-size: var(--ds-text-md); }
+.gd__planbtn:hover { background: var(--gd-glass); }
+/* a cut control's focus is the inset two-tone ring, since a clip-path clips an outline */
+.gd__x:focus-visible, .gd__send:focus-visible, .gd__go:focus-visible, .gd__planbtn:focus-visible {
+  outline: 0; box-shadow: var(--gd-focus);
+}
+.gd__skip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: none; }
+
+/* the end: one line and the way on */
+.gd__end {
+  display: flex; align-items: center; justify-content: flex-end; gap: var(--ds-space-sm); flex-wrap: wrap;
+  padding: var(--ds-space-sm) var(--gd-gutter, var(--ds-space-md)) var(--ds-space-md);
+  border-top: var(--gd-strong) solid var(--gd-rule);
+}
+.gd__end[hidden] { display: none; }
+.gd__go { flex: 0 1 auto; width: var(--gd-go-w, auto); box-shadow: var(--accent-glow); }
+.gd__go[hidden] { display: none; }
+/* the quiet press: a cut ghost in the name voice (Make my plan) */
+.gd__more {
+  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 var(--ds-space-sm);
+  background: transparent; color: var(--ink); border: 0; cursor: pointer;
+  box-shadow: var(--gd-edge); clip-path: var(--gd-cut-path-sm);
+  font-family: var(--gd-name); font-size: var(--ds-text-md); font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
+  transition: background-color var(--ds-dur-fast) var(--ds-ease);
+}
+.gd__more:hover { background: var(--gd-glass); }
+.gd__more:focus-visible { outline: 0; box-shadow: var(--gd-focus); }
+.gd__more[hidden] { display: none; }
+
+/* ── the plan ── */
+.gd__plan {
+  display: var(--gd-plan-show, flex); flex-direction: column; min-height: 0;
+  position: var(--gd-plan-pos, static); inset: 0; z-index: 1;
+  background: var(--gd-panel);
+  border-left: var(--gd-plan-edge, var(--ds-line, 1px)) solid var(--gd-rule-soft);
+}
+/* one column: the Plan button lays the plan over the talk */
+.gd--plan .gd__plan { display: flex; }
+.gd--plan .gd__talk { visibility: var(--gd-talk-under-plan, visible); }
+.gd__planhead {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-sm);
+  padding: var(--ds-space-sm) var(--ds-space-md);
+  border-bottom: var(--gd-strong) solid var(--gd-rule);
+  min-height: 72px; box-sizing: border-box;
+}
+.gd__planhead .gd__x { display: var(--gd-planx, none); }
+.gd__planbody { flex: 1; min-height: 0; overflow-y: auto; padding: var(--ds-space-md); display: flex; flex-direction: column; gap: var(--ds-space-hair); }
+.gd__planwait { margin: 0; color: var(--gd-ice); font-size: var(--ds-text-lg); }
+.gd__plansum { margin: 0; color: var(--ink); font-size: var(--ds-text-lg); text-wrap: pretty; }
+.gd__planh4 {
+  margin: var(--ds-space-sm) 0 0; font-family: var(--gd-name); font-size: var(--ds-text-xs); font-weight: 500;
+  letter-spacing: .2em; text-transform: uppercase; color: var(--gd-ice);
+}
+.gd__planlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
+.gd__plannote, .gd__saved { margin: 0; color: var(--gd-ice); font-size: var(--ds-text-md); }
+.gd__plannote { margin-top: var(--ds-space-sm); padding-top: var(--ds-space-hair); border-top: var(--ds-line, 1px) solid var(--gd-rule-soft); }
+.gd__saved { padding: var(--ds-space-sm) var(--ds-space-md); border-top: var(--ds-line, 1px) solid var(--gd-rule-soft); }
+.gd__saved[hidden] { display: none; }
+.gd__planlist li {
+  padding: var(--ds-space-hair) 0; border-top: var(--ds-line, 1px) solid var(--gd-rule-soft);
+  color: var(--ink); font-size: var(--ds-text-lg);
+}