@bongos/core 1.25.14 → 1.25.16

package/modules/onboarding/migrations/onboarding_002_genesis_work.sql

@@ -0,0 +1,76 @@
+-- onboarding_002_genesis_work.sql — the founder's own work on each genesis stage
+-- (task 1005116; read modules/onboarding/genesis-work.js for the why).
+--
+-- Every genesis stage offers three ways of working (guided · open · assisted) onto ONE
+-- record per stage, so switching loses nothing:
+--   onboarding_genesis_work            one row per stage: the door the founder is using
+--                                      now, their free page, and a link to a document
+--                                      they already have
+--   onboarding_genesis_answers         one row per answered question. The state tells
+--                                      "answered", "not sure yet" and "skipped" apart;
+--                                      no row means never touched (empty). The origin
+--                                      says whose words: the founder's, worked out with
+--                                      their AI session, or carried over from before
+--                                      sign-up (task 1005274).
+--   onboarding_genesis_answer_history  append-only: every write and un-answer, so a
+--                                      revised answer keeps what it used to say. A NULL
+--                                      state is an un-answer.
+--
+-- The questions themselves are code (genesis-work.js QUESTIONS); the API refuses an id
+-- a stage does not name, so question_id is only shape-checked here.
+--
+-- ADDITIVE, module-owned (ADR 0083 §Decision #5). Idempotent: safe to re-run.
+
+BEGIN;
+
+CREATE TABLE IF NOT EXISTS onboarding_genesis_work (
+  stage       text        PRIMARY KEY,
+  door        text        NOT NULL DEFAULT 'guided',
+  page_md     text,
+  link_url    text,
+  updated_by  bigint      REFERENCES builders(id) ON DELETE SET NULL,
+  updated_at  timestamptz NOT NULL DEFAULT now(),
+  CONSTRAINT onboarding_genesis_work_stage_chk CHECK (stage IN ('scope', 'strategize', 'charter', 'legalize', 'legislation')),
+  CONSTRAINT onboarding_genesis_work_door_chk CHECK (door IN ('guided', 'open', 'assisted')),
+  CONSTRAINT onboarding_genesis_work_page_chk CHECK (page_md IS NULL OR length(page_md) <= 20000),
+  CONSTRAINT onboarding_genesis_work_link_chk CHECK (link_url IS NULL OR (length(link_url) <= 500 AND link_url ~* '^https?://'))
+);
+
+CREATE TABLE IF NOT EXISTS onboarding_genesis_answers (
+  stage        text        NOT NULL,
+  question_id  text        NOT NULL,
+  state        text        NOT NULL,
+  answer_md    text,
+  origin       text        NOT NULL DEFAULT 'founder',
+  updated_by   bigint      REFERENCES builders(id) ON DELETE SET NULL,
+  created_at   timestamptz NOT NULL DEFAULT now(),
+  updated_at   timestamptz NOT NULL DEFAULT now(),
+  PRIMARY KEY (stage, question_id),
+  CONSTRAINT onboarding_genesis_answers_stage_chk CHECK (stage IN ('scope', 'strategize', 'charter', 'legalize', 'legislation')),
+  CONSTRAINT onboarding_genesis_answers_qid_chk CHECK (question_id ~ '^[a-z][a-z0-9_]{1,39}$'),
+  CONSTRAINT onboarding_genesis_answers_state_chk CHECK (state IN ('answered', 'not_sure', 'skipped')),
+  CONSTRAINT onboarding_genesis_answers_origin_chk CHECK (origin IN ('founder', 'assisted', 'carried_over')),
+  -- "answered" always has words; the other two may carry a short note.
+  CONSTRAINT onboarding_genesis_answers_words_chk CHECK (state <> 'answered' OR length(btrim(coalesce(answer_md, ''))) > 0),
+  CONSTRAINT onboarding_genesis_answers_len_chk CHECK (answer_md IS NULL OR length(answer_md) <= 4000)
+);
+
+CREATE TABLE IF NOT EXISTS onboarding_genesis_answer_history (
+  id           bigserial   PRIMARY KEY,
+  stage        text        NOT NULL,
+  question_id  text        NOT NULL,
+  state        text,
+  answer_md    text,
+  origin       text,
+  changed_by   bigint      REFERENCES builders(id) ON DELETE SET NULL,
+  changed_at   timestamptz NOT NULL DEFAULT now(),
+  CONSTRAINT onboarding_genesis_answer_history_state_chk CHECK (state IS NULL OR state IN ('answered', 'not_sure', 'skipped'))
+);
+
+CREATE INDEX IF NOT EXISTS onboarding_genesis_answer_history_q_idx
+  ON onboarding_genesis_answer_history (stage, question_id, changed_at DESC);
+
+INSERT INTO schema_migrations (version) VALUES ('onboarding_002_genesis_work')
+  ON CONFLICT (version) DO NOTHING;
+
+COMMIT;

package/modules/onboarding/routes/genesis-work.js

@@ -0,0 +1,85 @@
+'use strict';
+
+// modules/onboarding/routes/genesis-work.js — the HTTP surface of the founder's own work
+// on each genesis stage (task 1005116; the why is in ../genesis-work.js). Mounted by the
+// onboarding route factory (./onboarding.js), on the same /api/bongos router.
+//
+// Who may do what: any signed-in builder READS (the whole team, and every AI session
+// planning a goal or task, reads what the founder said). Every WRITE is the project
+// owner's, behind the same `project.settings.manage` atom as the rest of genesis — the
+// founder is the author. Writes are allowed whether or not founding mode is on, so an
+// answer can be revised long after the project came alive.
+
+const api = require('../../../src/module-api');
+const work = require('../genesis-work');
+
+const REFUSALS = {
+  unknown_stage: 404, unknown_question: 404, bad_door: 400, bad_state: 400, bad_origin: 400,
+  empty_answer: 400, answer_too_long: 400, page_too_long: 400, link_too_long: 400, bad_link: 400,
+};
+
+// `deps` is for tests only (an in-memory store); production passes none.
+module.exports = function mountGenesisWorkRoutes(router, deps = {}) {
+  const owns = api.requirePermission('project.settings.manage');
+  const handle = (fn) => async (req, res) => {
+    try {
+      const r = await fn(req);
+      if (r && r.ok === false) {
+        return res.status(REFUSALS[r.reason] || 409).json({ error: { code: r.reason, message: r.reason } });
+      }
+      res.set('Cache-Control', 'no-store');
+      res.json(r);
+    } catch (err) {
+      api.logger('onboarding').error('[onboarding] genesis work', err);
+      res.status(500).json({ error: { code: 'genesis_work_failed', message: 'internal error' } });
+    }
+  };
+  const stage = (req) => String(req.params.stage);
+  const q = (req) => String(req.params.question);
+
+  // The read path for every door and for AI sessions planning a goal or task.
+  router.get('/founding/work', api.requireBuilder, handle(async () => ({ stages: await work.readAll(deps) })));
+  router.get('/founding/context', api.requireBuilder, handle(() => work.readContext(deps)));
+  router.get('/founding/work/:stage', api.requireBuilder, handle((req) => work.readStage(stage(req), deps)));
+  router.get('/founding/work/:stage/assist', api.requireBuilder, handle(async (req) => {
+    const prompt = work.assistPrompt(stage(req));
+    return prompt ? { prompt } : { ok: false, reason: 'unknown_stage' };
+  }));
+  router.get('/founding/work/:stage/answers/:question/history', api.requireBuilder,
+    handle((req) => work.answerHistory(stage(req), q(req), deps)));
+
+  // The founder's writes.
+  router.put('/founding/work/:stage/door', api.requireBuilder, owns,
+    (req, res, next) => {
+      if (api.validateOrRespond(req, res, { door: { type: 'string', required: true, maxLength: 16 } })) return;
+      next();
+    },
+    handle((req) => work.setDoor(stage(req), req.body.door, req.builder.id, deps)));
+  router.put('/founding/work/:stage/page', api.requireBuilder, owns,
+    (req, res, next) => {
+      if (api.validateOrRespond(req, res, { page: { type: 'string', maxLength: work.LIMITS.page } })) return;
+      next();
+    },
+    handle((req) => work.setPage(stage(req), req.body.page, req.builder.id, deps)));
+  router.put('/founding/work/:stage/link', api.requireBuilder, owns,
+    (req, res, next) => {
+      if (api.validateOrRespond(req, res, { url: { type: 'string', maxLength: work.LIMITS.link } })) return;
+      next();
+    },
+    handle((req) => work.setLink(stage(req), req.body.url, req.builder.id, deps)));
+  router.put('/founding/work/:stage/answers/:question', api.requireBuilder, owns,
+    (req, res, next) => {
+      if (api.validateOrRespond(req, res, {
+        state: { type: 'string', maxLength: 16 },
+        text: { type: 'string', maxLength: work.LIMITS.answer },
+        origin: { type: 'string', maxLength: 16 },
+        if_empty: { type: 'boolean' },
+      })) return;
+      next();
+    },
+    handle((req) => work.setAnswer(stage(req), q(req), req.body || {}, req.builder.id, deps,
+      { ifEmpty: req.body && req.body.if_empty === true })));
+  // Un-answer: back to empty, which is not the same as skipped.
+  router.delete('/founding/work/:stage/answers/:question', api.requireBuilder, owns,
+    handle((req) => work.clearAnswer(stage(req), q(req), req.builder.id, deps)));
+};

package/modules/onboarding/routes/onboarding.js

@@ -38,6 +38,7 @@ const foundingBuilders = require('../founding-builders');
 const genesis = require('../genesis-home');
 const foundingBirth = require('../founding-birth');
 const howtoState = require('../howto-state');
+const mountGenesisWorkRoutes = require('./genesis-work');
 
 // Register the `onboarding` kernel PORT. See the header + port.js for the full
 // consumer list and the graceful-degradation contract.
@@ -65,6 +66,8 @@ module.exports = function buildOnboardingRouter() {
     res.json({ builders });
   });
   mountGenesisRoutes(router);
+  // The founder's own work on each stage: three doors onto one record (task 1005116).
+  mountGenesisWorkRoutes(router);
   mountHowtoRoutes(router);
   return router;
 };

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);
+}