@bongos/core 1.25.16 → 1.25.18

package/modules/public-landing/public/assets/guide-core.js

@@ -0,0 +1,475 @@
+/* assets/guide-core.js — THE START-A-PROJECT GUIDE, the part both presentations share
+   (tasks 1005275 game, 1005276 hall; goal 1000106).
+
+   The landing shows the guide two ways: the game scene (guide-scene.js) and the plain hall
+   panel (guide-hall.js). They are the same conversation: one server
+   (modules/front-door-guide, its CLAUDE.md has the contract), one state, one set of client
+   rules. This file holds all of that once, so the two can only differ in how they look:
+
+   - the state machine (reduce) and the plan reader (readPlan), pure;
+   - the server's three client rules: the hidden `website` field sent as it stands, the
+     first message held MIN_FIRST_MS after the chat started, and the chat's { id, token }
+     kept in LOCAL storage (STORE_KEY, which the sign-up hand-off reads) and resumed on load;
+   - the caps and the fallback: a spent budget, a missing key or a lost chat is the plain
+     door, never an error;
+   - the controller: the status read and the resume on load, the "Start a project" doors,
+     sending, asking for the plan, and which presentation is showing.
+
+   A presentation registers itself with addView(name, view), where view is
+   { show(), hide(), paint(state), focusFirst(state), website(), onPlanned?(state) }. The
+   doors open the visitor's pick (VIEW_KEY in local storage: a per-browser convenience, no
+   account preference) or the game, and switchTo(name) swaps presentations mid-chat with
+   the same conversation. One controller per window. */
+(function (factory) {
+  'use strict';
+  var api = factory();
+  if (typeof module === 'object' && module.exports) module.exports = api;
+  if (typeof window !== 'undefined') window.GuideCore = api;
+})(function () {
+  'use strict';
+
+  var API = '/api/bongos/front-door-guide';
+  var MODULE_KEY = 'front-door-guide';
+  // the server refuses a first message sooner than 1500ms after the start (a bot); wait a
+  // little longer so a clock edge never turns a person into one
+  var MIN_FIRST_MS = 1600;
+  // the chat's { id, token } in local storage: the server's contract keeps it there, not in
+  // session storage, so a closed browser comes back to the same chat
+  var STORE_KEY = 'cb-front-door-guide';
+  // which presentation this browser picked last: 'game' or 'hall'
+  var VIEW_KEY = 'cb-front-door-guide-view';
+  var SIGN_UP = 'Sign up and get started';
+
+  // Every sentence the guide says on its own. The guide's replies are the server's.
+  var COPY = {
+    fallback: 'The guide is resting right now. You can still start your project.',
+    lost: 'This chat has ended. You can still start your project.',
+    failed: 'That did not send. Try again.',
+    planFailed: 'Your plan did not come through. Try again.',
+    tooEarly: 'Tell the guide a little about your project first.',
+    empty: 'Type a message first.',
+    tooLong: function (n) { return 'That is too long. Keep it under ' + n + ' characters.'; },
+    tooFast: function (s) { return 'Too quick. Try again in ' + s + (s === 1 ? ' second.' : ' seconds.'); },
+    left: function (left, total) {
+      if (left <= 0) return 'No messages left';
+      return left + ' of ' + total + (total === 1 ? ' message left' : ' messages left');
+    },
+    waitTalk: 'Your guide is thinking',
+    waitPlan: 'Your guide is writing your plan',
+    planWait: function (phase) {
+      return phase === 'planning' ? 'Your guide is writing your plan.'
+        : phase === 'ended' ? 'No plan yet.'
+        : phase === 'fallback' ? 'No plan to show.'
+        : 'When the chat ends, your guide writes your plan here.';
+    },
+  };
+
+  /* ── is the guide on for this page? The module set the server injected. ── */
+  function guideOn(mods) {
+    return !!(mods && mods.enabled && mods.enabled[MODULE_KEY] === true);
+  }
+
+  /* ── the plan, read leniently. The server's Plan (modules/front-door-guide/plan.js) is
+     { summary, project_type, how_it_works[], modules[{label, summary, why}], steps[{title,
+     detail}], needs[{item, detail}], open_questions[], cost_and_time }: each list becomes a
+     section under its own heading, in that order. Anything else it carries is read as text
+     where it can be and dropped where it cannot; no plan at all is null. ── */
+  var SECTIONS = [
+    ['how_it_works', 'How it works'],
+    ['steps', 'Steps'],
+    ['modules', 'Modules to start with'],
+    ['needs', 'You will need'],
+    ['open_questions', 'Still to decide'],
+  ];
+  function asText(v) {
+    if (typeof v === 'string') return v.trim();
+    if (typeof v === 'number') return String(v);
+    if (v && typeof v === 'object') {
+      var head = [v.title, v.label, v.item, v.name, v.heading].filter(function (s) { return typeof s === 'string' && s.trim(); })[0];
+      var body = [v.why, v.detail, v.text, v.summary, v.description].filter(function (s) { return typeof s === 'string' && s.trim(); })[0];
+      return [head, body].filter(Boolean).map(function (s) { return s.trim(); }).join(': ');
+    }
+    return '';
+  }
+  function asItems(arr) {
+    return (Array.isArray(arr) ? arr : []).map(asText).filter(Boolean).slice(0, 12);
+  }
+  function readPlan(raw) {
+    if (raw == null) return null;
+    if (typeof raw === 'string') return raw.trim() ? { summary: raw.trim(), sections: [], note: '' } : null;
+    if (typeof raw !== 'object' || Array.isArray(raw)) return null;
+    var plan = { summary: asText(raw.summary || ''), sections: [], note: typeof raw.cost_and_time === 'string' ? raw.cost_and_time.trim() : '' };
+    var seen = {};
+    SECTIONS.forEach(function (s) {
+      seen[s[0]] = true;
+      var its = asItems(raw[s[0]]);
+      if (its.length) plan.sections.push({ heading: s[1], items: its });
+    });
+    Object.keys(raw).forEach(function (k) {
+      if (seen[k] || !Array.isArray(raw[k])) return;
+      var its = asItems(raw[k]);
+      if (its.length) plan.sections.push({ heading: '', items: its });
+    });
+    return plan.summary || plan.sections.length ? plan : null;
+  }
+
+  /* ── the state machine. One state object; every event returns a new one. ──
+     phase: closed · starting · chat · sending · planning · ended · fallback
+     A chat that has ended with no plan yet (the plan call failed, or a resumed chat never
+     asked) is 'ended' with plan null: the end strip then offers "Make my plan" again. */
+  function initial() {
+    return { phase: 'closed', messages: [], left: 0, total: 0, maxChars: 1000, plan: null, error: '', fallback: '', conv: null, startedAt: 0, restore: '', saved: '', next: SIGN_UP, sent: 0 };
+  }
+  function copyState(s) {
+    var n = {};
+    Object.keys(s).forEach(function (k) { n[k] = s[k]; });
+    n.messages = s.messages.slice();
+    return n;
+  }
+  function conversationCounts(n, c) {
+    if (!c || typeof c !== 'object') return;
+    if (typeof c.messages_left === 'number') n.left = Math.max(0, c.messages_left);
+    if (typeof c.messages_used === 'number') n.sent = c.messages_used;
+    if (typeof c.messages_used === 'number' && typeof c.messages_left === 'number') n.total = Math.max(n.total, c.messages_used + c.messages_left);
+    if (typeof c.max_message_chars === 'number') n.maxChars = c.max_message_chars;
+  }
+  function takeExtras(n, b) {
+    if (b.saved && typeof b.saved.message === 'string' && b.saved.message) n.saved = b.saved.message;
+    if (b.next && typeof b.next.label === 'string' && b.next.label) n.next = b.next.label;
+    var p = readPlan(b.plan);
+    if (p) n.plan = p;
+  }
+  function toFallback(n, message) {
+    n.phase = 'fallback';
+    n.fallback = message || COPY.fallback;
+    n.error = '';
+    n.restore = '';
+    return n;
+  }
+  function dropLastVisitor(n) {
+    for (var i = n.messages.length - 1; i >= 0; i--) {
+      if (n.messages[i].role === 'visitor') { n.restore = n.messages[i].text; n.messages.splice(i, 1); n.sent = Math.max(0, n.sent - 1); return; }
+    }
+  }
+  function errCode(body) {
+    return body && (body.error && typeof body.error === 'object' ? body.error.code : body.error || body.code);
+  }
+  function reduce(state, ev) {
+    var n = copyState(state || initial());
+    n.restore = '';
+    var b = (ev && ev.body) || {};
+    var ok = ev && ev.status >= 200 && ev.status < 300;
+    switch (ev && ev.type) {
+      case 'start':
+        n.phase = 'starting';
+        n.error = '';
+        return n;
+      case 'started':
+        if (ok && b.mode === 'chat' && b.conversation && b.conversation.id && b.conversation.token) {
+          n.phase = 'chat';
+          n.conv = { id: String(b.conversation.id), token: String(b.conversation.token) };
+          n.startedAt = ev.now || 0;
+          n.total = 0;
+          conversationCounts(n, b.conversation);
+          n.messages = typeof b.greeting === 'string' && b.greeting ? [{ role: 'guide', text: b.greeting }] : [];
+          takeExtras(n, b);
+          return n;
+        }
+        return toFallback(n, b.mode === 'form' ? b.message : '');
+      case 'resumed': {
+        // GET /conversations/:id on load: the transcript (no greeting), the plan if written
+        if (!ok || !b.conversation || !Array.isArray(b.transcript)) return initial();
+        n.conv = ev.conv;
+        n.total = 0;
+        conversationCounts(n, b.conversation);
+        n.messages = b.transcript
+          .filter(function (m) { return m && typeof m.text === 'string' && (m.role === 'visitor' || m.role === 'guide'); })
+          .map(function (m) { return { role: m.role, text: m.text }; });
+        n.sent = Math.max(n.sent, n.messages.filter(function (m) { return m.role === 'visitor'; }).length);
+        takeExtras(n, b);
+        n.phase = b.conversation.status === 'ended' || n.plan ? 'ended' : 'chat';
+        // a resumed chat with nothing said yet is new enough for the bot check to apply
+        n.startedAt = n.sent ? 0 : (ev.now || 0);
+        return n;
+      }
+      case 'send':
+        n.phase = 'sending';
+        n.error = '';
+        n.sent += 1;
+        n.messages.push({ role: 'visitor', text: ev.text });
+        return n;
+      case 'answer': {
+        if (ok) {
+          takeExtras(n, b);
+          if (b.mode === 'chat') {
+            if (b.reply && typeof b.reply.text === 'string') n.messages.push({ role: 'guide', text: b.reply.text });
+            conversationCounts(n, b.conversation);
+            n.phase = n.left > 0 ? 'chat' : 'planning';
+            return n;
+          }
+          if (b.mode === 'ended') {
+            if (b.reply && typeof b.reply.text === 'string') n.messages.push({ role: 'guide', text: b.reply.text });
+            conversationCounts(n, b.conversation);
+            n.left = 0;
+            if (typeof b.message === 'string' && b.message) n.messages.push({ role: 'note', text: b.message });
+            // next_step 'plan': ask for it now; 'sign_up': it already exists
+            n.phase = b.next_step === 'sign_up' && n.plan ? 'ended' : 'planning';
+            return n;
+          }
+          return toFallback(n, b.mode === 'form' ? b.message : '');
+        }
+        var code = errCode(b);
+        if (ev.status === 404) return toFallback(n, COPY.lost);
+        dropLastVisitor(n);
+        n.phase = 'chat';
+        if (ev.status === 400 && code === 'too_long') {
+          n.maxChars = Number(b.max_message_chars) || n.maxChars;
+          n.error = COPY.tooLong(n.maxChars);
+        } else if (ev.status === 400 && code === 'empty') {
+          n.error = COPY.empty;
+        } else if (ev.status === 429) {
+          n.error = COPY.tooFast(Math.max(1, Math.ceil(Number(b.retry_after_seconds) || 5)));
+        } else {
+          n.error = COPY.failed;
+        }
+        return n;
+      }
+      case 'failed':
+        dropLastVisitor(n);
+        n.phase = n.conv ? 'chat' : 'fallback';
+        if (n.phase === 'fallback') n.fallback = COPY.fallback;
+        else n.error = COPY.failed;
+        return n;
+      case 'plan':
+        n.phase = 'planning';
+        n.error = '';
+        return n;
+      case 'planned': {
+        if (ok && b.mode === 'plan') {
+          takeExtras(n, b);
+          conversationCounts(n, b.conversation);
+          n.left = 0;
+          n.phase = 'ended';
+          return n;
+        }
+        if (ok && b.mode === 'form') return toFallback(n, b.message);
+        if (ev.status === 404) return toFallback(n, COPY.lost);
+        if (ev.status === 409 && errCode(b) === 'too_early') { n.phase = 'chat'; n.error = COPY.tooEarly; return n; }
+        // anything else: the chat is over but the plan can be asked for again
+        n.phase = 'ended';
+        n.error = ev.status === 429 ? COPY.tooFast(Math.max(1, Math.ceil(Number(b.retry_after_seconds) || 5))) : COPY.planFailed;
+        return n;
+      }
+      case 'error':
+        // a check the presentation made before sending (an empty box)
+        n.error = ev.text || '';
+        return n;
+      default:
+        return n;
+    }
+  }
+
+  // how long the first send must still wait (0 once the bot check is behind us)
+  function firstSendWait(state, now) {
+    if (state.sent || !state.startedAt) return 0;
+    return Math.max(0, state.startedAt + MIN_FIRST_MS - now);
+  }
+
+  function readStore(win) {
+    try {
+      var raw = JSON.parse(win.localStorage.getItem(STORE_KEY) || 'null');
+      return raw && typeof raw.id === 'string' && typeof raw.token === 'string' ? raw : null;
+    } catch (e) { return null; }
+  }
+  function writeStore(win, conv) {
+    try {
+      if (conv) win.localStorage.setItem(STORE_KEY, JSON.stringify({ id: conv.id, token: conv.token }));
+      else win.localStorage.removeItem(STORE_KEY);
+    } catch (e) { /* storage off: the chat still works, it just does not come back */ }
+  }
+  function readView(win) {
+    try { var v = win.localStorage.getItem(VIEW_KEY); return v === 'game' || v === 'hall' ? v : null; } catch (e) { return null; }
+  }
+  function writeView(win, v) {
+    try { win.localStorage.setItem(VIEW_KEY, v); } catch (e) { /* storage off: the game next time */ }
+  }
+
+  // Tab and Shift+Tab stay inside an open dialog. `f` is its visible focusable controls.
+  function trapTab(doc, f, e) {
+    if (!f.length) return;
+    var first = f[0], last = f[f.length - 1];
+    if (e.shiftKey && doc.activeElement === first) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && doc.activeElement === last) { e.preventDefault(); first.focus(); }
+  }
+
+  /* ──────────────────────────── the controller ──────────────────────────── */
+  // One per window (both presentations ask for it; the first call makes it). Null when
+  // the module is off: then nothing is read and every door stays a plain link.
+  function controller(win, doc) {
+    if (win.__frontDoorGuide) return win.__frontDoorGuide;
+    if (!guideOn(win.__MODULES__)) return null;
+    var state = initial();
+    var chatOK = false;      // the status read said 'chat' (or this browser holds a chat)
+    var limits = null;
+    var views = {};
+    var order = [];
+    var active = null;       // the name of the presentation showing, or null
+    var opener = null;
+    var asking = false;
+
+    function json(method, url, body, headers) {
+      var h = { accept: 'application/json' };
+      if (body) h['content-type'] = 'application/json';
+      Object.keys(headers || {}).forEach(function (k) { h[k] = headers[k]; });
+      return win.fetch(url, { method: method, credentials: 'same-origin', headers: h, body: body ? JSON.stringify(body) : undefined })
+        .then(function (res) {
+          return res.json().then(function (b) { return { status: res.status, body: b || {} }; }, function () { return { status: res.status, body: {} }; });
+        });
+    }
+    function convUrl(suffix) { return API + '/conversations/' + encodeURIComponent(state.conv.id) + (suffix || ''); }
+    function view() { return active ? views[active] : null; }
+    function website() { var v = view(); return v ? v.website() : ''; }
+    function paint() { var v = view(); if (v) v.paint(state); }
+    function focusFirst() { var v = view(); if (v) v.focusFirst(state); }
+
+    function dispatch(ev) {
+      state = reduce(state, ev);
+      if (ev.type === 'started' && state.conv) writeStore(win, state.conv);
+      if (state.phase === 'fallback' && (ev.status === 404)) writeStore(win, null);
+      paint();
+      if (state.phase === 'planning' && ev.type !== 'plan') askPlan();
+    }
+
+    // ask once, on load, whether the guide can talk: a click must never wait on it
+    json('GET', API + '/status').then(function (r) {
+      chatOK = r.status === 200 && r.body.mode === 'chat';
+      limits = r.body.limits;
+    }, function () { chatOK = false; });
+    // and pick up a chat this browser already holds
+    var held = readStore(win);
+    if (held) {
+      json('GET', API + '/conversations/' + encodeURIComponent(held.id), null, { 'x-guide-token': held.token }).then(function (r) {
+        if (state.phase !== 'closed') return;
+        if (r.status === 404 || r.status === 400) { writeStore(win, null); return; }
+        state = reduce(state, { type: 'resumed', status: r.status, body: r.body, conv: held, now: Date.now() });
+        // a held chat can always be shown, even once the day's budget says 'form'
+        if (state.conv) chatOK = true;
+      }, function () { /* offline: a click starts fresh or falls back */ });
+    }
+
+    // the presentation a door opens: this browser's last pick, else the game
+    function pick() {
+      var p = readView(win);
+      if (p && views[p]) return p;
+      return views.game ? 'game' : order[0];
+    }
+
+    function open(door) {
+      if (!order.length) return;
+      opener = door;
+      active = pick();
+      view().show();
+      if (state.phase === 'closed') {
+        dispatch({ type: 'start' });
+        json('POST', API + '/conversations', { website: website() }).then(function (r) {
+          dispatch({ type: 'started', status: r.status, body: r.body, now: Date.now() });
+          focusFirst();
+        }, function () {
+          dispatch({ type: 'started', status: 0, body: {} });
+          focusFirst();
+        });
+      } else {
+        paint();
+      }
+      focusFirst();
+    }
+    function close() {
+      var v = view();
+      if (!v) return;
+      v.hide();
+      active = null;
+      if (opener) { try { opener.focus(); } catch (e) { /* gone */ } }
+    }
+    // the other presentation, same chat: hide this one, show that one, remember the pick
+    function switchTo(name) {
+      if (!active || !views[name] || name === active) return;
+      view().hide();
+      active = name;
+      writeView(win, name);
+      views[name].show();
+      paint();
+      focusFirst();
+    }
+
+    // the visitor's words: false when they were not taken (not the time, or nothing typed)
+    function send(words) {
+      if (state.phase !== 'chat') return false;
+      if (!words) { dispatch({ type: 'error', text: COPY.empty }); return false; }
+      var wait = firstSendWait(state, Date.now());
+      var conv = state.conv;
+      dispatch({ type: 'send', text: words });
+      win.setTimeout(function () {
+        json('POST', API + '/conversations/' + encodeURIComponent(conv.id) + '/messages', { token: conv.token, text: words, website: website() })
+          .then(function (r) { dispatch({ type: 'answer', status: r.status, body: r.body }); },
+                function () { dispatch({ type: 'failed' }); })
+          .then(focusFirst);
+      }, wait);
+      return true;
+    }
+
+    // the plan: asked for once the chat ends (or the visitor presses "Make my plan");
+    // the server writes it once and re-reads it for free after that
+    function askPlan() {
+      if (asking || !state.conv) return;
+      asking = true;
+      if (state.phase !== 'planning') dispatch({ type: 'plan' });
+      json('POST', convUrl('/plan'), { token: state.conv.token, website: website() })
+        .then(function (r) { asking = false; dispatch({ type: 'planned', status: r.status, body: r.body }); },
+              function () { asking = false; dispatch({ type: 'planned', status: 0, body: {} }); })
+        .then(function () {
+          focusFirst();
+          var v = view();
+          if (v && v.onPlanned) v.onPlanned(state);
+        });
+    }
+
+    /* the doors: a click is the guide only when everything says it can talk */
+    doc.addEventListener('click', function (e) {
+      var door = e.target && e.target.closest && e.target.closest('[data-guide-door]');
+      if (!door || !chatOK || !order.length || e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+      e.preventDefault();
+      open(door);
+    });
+
+    var ctl = {
+      addView: function (name, v) { if (!views[name]) order.push(name); views[name] = v; return ctl; },
+      has: function (name) { return !!views[name]; },
+      state: function () { return state; },
+      limits: function () { return limits; },
+      active: function () { return active; },
+      open: open,
+      close: close,
+      switchTo: switchTo,
+      send: send,
+      askPlan: askPlan,
+    };
+    win.__frontDoorGuide = ctl;
+    return ctl;
+  }
+
+  return {
+    API: API,
+    MIN_FIRST_MS: MIN_FIRST_MS,
+    STORE_KEY: STORE_KEY,
+    VIEW_KEY: VIEW_KEY,
+    SIGN_UP: SIGN_UP,
+    COPY: COPY,
+    guideOn: guideOn,
+    readPlan: readPlan,
+    initial: initial,
+    reduce: reduce,
+    firstSendWait: firstSendWait,
+    trapTab: trapTab,
+    controller: controller,
+  };
+});

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

@@ -0,0 +1,121 @@
+/* assets/guide-hall.css — the start-a-project guide, plain (task 1005276).
+
+   The same conversation as the game scene (guide-scene.css), for a visitor who does not
+   want the game: one panel on the landing's own tokens, sentence case in the body face, a
+   plain list of who said what, the plan under it, and the landing's own door pills for
+   what you press (.door / .door--go, index.html). The panel is the one sanctioned
+   container (DESIGN.md "The hall": the lifted ground closed by one hairline, no lift);
+   it floats over the scrim, so it takes the one shadow for floating things.
+
+   Every value is a token: no colour, size, corner or shadow is typed in here, and there is
+   no breakpoint. The layout values that change on a phone are the game scene's own --gd-*
+   names, which the landing's ONE breakpoint (900px, index.html's @media body block)
+   already restates: the panel then fills the screen. No motion of its own; the waiting
+   line is words. */
+.gh {
+  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);
+  color: var(--ink); font-family: var(--font-body); font-size: var(--ds-text-lg); line-height: 1.5;
+}
+.gh[hidden] { display: none; }
+
+.gh__panel {
+  box-sizing: border-box; display: flex; flex-direction: column; min-height: 0;
+  width: min(100%, var(--gd-frame-w, 720px)); height: min(100%, var(--gd-frame-h, 760px));
+  background: var(--bg-card);
+  border: var(--ds-line, 1px) solid var(--rule);
+  border-radius: var(--gd-hall-radius, var(--ds-radius-panel));
+  box-shadow: var(--ds-shadow-pop);
+  overflow: hidden;
+}
+
+.gh__head {
+  display: flex; align-items: center; gap: var(--ds-space-sm); flex-wrap: wrap;
+  padding: var(--ds-space-sm) var(--gd-gutter, var(--ds-space-md));
+  border-bottom: var(--ds-line, 1px) solid var(--rule-soft);
+}
+.gh__title { margin: 0 auto 0 0; font-family: var(--font-body); font-weight: 500; font-size: var(--ds-text-2xl); line-height: 1.25; }
+.gh__x {
+  flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
+  background: transparent; color: var(--ink-soft); border: 0; border-radius: var(--ds-radius-pill); cursor: pointer;
+}
+.gh__x svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; fill: none; }
+.gh__x:hover { color: var(--ink); background: var(--pill-bg-hi, transparent); }
+
+/* a text press: a link in a sentence (Use the game version, Skip to sign up) */
+.gh__link {
+  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 0;
+  background: transparent; border: 0; cursor: pointer;
+  color: var(--ink-soft); font: inherit; font-size: var(--ds-text-md);
+  text-decoration: underline; text-underline-offset: 3px;
+}
+.gh__link:hover { color: var(--ink); }
+.gh__link[hidden] { display: none; }
+
+.gh__left {
+  margin: 0; padding: var(--ds-space-xs) var(--gd-gutter, var(--ds-space-md));
+  color: var(--ink-soft); font-size: var(--ds-text-md); font-variant-numeric: tabular-nums;
+  border-bottom: var(--ds-line, 1px) solid var(--rule-soft);
+}
+.gh__left[hidden] { display: none; }
+
+/* the talk and the plan scroll together */
+/* positioned, so the plan's offsetTop (where guide-hall.js scrolls to) is measured from here */
+.gh__body {
+  position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
+  padding: var(--ds-space-md) var(--gd-gutter, var(--ds-space-md));
+  display: flex; flex-direction: column; gap: var(--ds-space-md);
+}
+.gh__log { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--ds-space-sm); }
+.gh__msg { display: flex; flex-direction: column; gap: 2px; }
+.gh__who { color: var(--ink-soft); font-size: var(--ds-text-sm); font-weight: 500; }
+.gh__words { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: pretty; }
+.gh__msg--note .gh__words, .gh__msg--wait .gh__words { color: var(--ink-soft); font-size: var(--ds-text-md); }
+.gh__msg--note { padding-top: var(--ds-space-xs); border-top: var(--ds-line, 1px) solid var(--rule-soft); }
+
+.gh__plan { border-top: var(--ds-line, 1px) solid var(--rule); padding-top: var(--ds-space-sm); display: flex; flex-direction: column; gap: var(--ds-space-xs); }
+.gh__plan[hidden] { display: none; }
+.gh__planh { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: var(--ds-text-xl); }
+.gh__planh4 { margin: var(--ds-space-xs) 0 0; color: var(--ink-soft); font-size: var(--ds-text-md); font-weight: 500; }
+.gh__plansum { margin: 0; text-wrap: pretty; }
+.gh__planwait, .gh__plannote, .gh__saved { margin: 0; color: var(--ink-soft); font-size: var(--ds-text-md); }
+.gh__planlist { margin: 0; padding-left: var(--ds-space-md); }
+.gh__planlist li { padding: 2px 0; }
+.gh__saved[hidden] { display: none; }
+
+.gh__err {
+  margin: 0 var(--gd-gutter, var(--ds-space-md)) var(--ds-space-xs); padding: var(--ds-space-xs) var(--ds-space-sm);
+  border-left: 2px solid var(--err); color: var(--ink); font-size: var(--ds-text-md);
+}
+.gh__err[hidden] { display: none; }
+
+/* the composer */
+.gh__say, .gh__end {
+  display: flex; flex-direction: column; gap: var(--ds-space-xs);
+  padding: var(--ds-space-sm) var(--gd-gutter, var(--ds-space-md)) var(--ds-space-md);
+  border-top: var(--ds-line, 1px) solid var(--rule-soft);
+}
+.gh__say[hidden], .gh__end[hidden] { display: none; }
+.gh__label { color: var(--ink-soft); font-size: var(--ds-text-md); }
+.gh__text {
+  box-sizing: border-box; width: 100%; min-height: 72px; max-height: 12rem; resize: vertical;
+  padding: var(--ds-space-xs) var(--ds-space-sm);
+  background: var(--bg); color: var(--ink); caret-color: var(--accent);
+  border: var(--ds-line, 1px) solid var(--rule); border-radius: var(--radius-sm, var(--ds-radius-tile));
+  font: inherit;
+}
+.gh__text:disabled { opacity: .7; }
+.gh__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
+.gh__row { display: flex; align-items: center; gap: var(--ds-space-sm); flex-wrap: wrap; }
+.gh__row .gh__link { margin-left: auto; }
+.gh__end { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
+
+/* the landing's door pills, as buttons: the same look as the doors on the page */
+/* (the landing's phone rule stretches its door pills to share a row; here each keeps its words on one line) */
+.gh .door { border: 0; font-family: inherit; cursor: pointer; flex: 0 1 auto; white-space: nowrap; padding: 0 var(--ds-space-md); }
+.gh .door:not(.door--go) { background: transparent; border: var(--ds-line, 1px) solid var(--rule); }
+.gh .door:not(.door--go):hover { background: var(--pill-bg-hi, transparent); }
+.gh .door:disabled { background: transparent; color: var(--ink-soft); border: var(--ds-line, 1px) solid var(--rule-soft); box-shadow: none; cursor: default; }
+.gh .door[hidden] { display: none; }