create-pmos 0.196.0 → 0.198.0

package/workspace/public/pm/c3-ib-sprints.js

@@ -2,12 +2,12 @@
  *   registerBoardTab('sprints', (host, ctx) => ...)
  * Reads GET /api/boards/sprints { source: jira|none, readAt, sprints: [{ name, state: active|future|closed, issues: [{ key, summary, status,
  * category: todo|doing|done, initiative }], counts }] }. READ-ONLY: the sprints mirror Jira, so there is no create, edit or move control.
- * Left: the source line (mirrored from Jira, read at), the active sprint's items as rows (a linked initiative opens its page), then the
- * future and closed sprints in place. Right: the active sprint's counts, and its burndown from GET /api/stage-tools/burndown (built by
+ * Left: the active sprint's items, its header chip saying Jira, read-only and the read time (c3-board-declutter: no banner), as rows (a linked initiative opens its page), then the
+ * future and closed sprints in place. Right: the active sprint's bars, and its burndown from GET /api/stage-tools/burndown (built by
  * the stage-records change; when that route is not on this server yet, the card says so quietly). source 'none' says there is no tracker. */
 import { el } from './dom.js';
 import { registerBoardTab } from './c3-initiatives.js';
-import { icon, pbtn, lk, chip, tag, st, note, sect, card, list, empty, nrow, cols, hbs, hbr, kv, jiraLabel, plural, day, put } from './c3-ini-ui.js';
+import { icon, lk, chip, tag, st, note, sect, card, list, empty, nrow, cols, hbs, hbr, jiraLabel, day, put } from './c3-ini-ui.js';
 import { loadItems } from './c3-ini-work.js';
 import { recordCards } from './c3-ini-records.js';
 
@@ -32,8 +32,7 @@ registerBoardTab('sprints', async (host, ctx) => {
     right: [el('span', { class: 'chip2', title: 'Status lives in Jira' }, icon('lock', 'sm'))], attrs: { 'data-inb-issue': i.key } });
   const t = readTime(r.readAt);
   const left = [
-    el('div', { class: 'fold', 'data-inb': 'sprints-source' }, icon('lock', 'sm'), el('b', null, 'Mirrored from Jira, read-only.'), ' ' + (t ? 'Read ' + t + ' from Jira ' + jiraLabel(b) + '.' : 'Not read yet.') + ' Change sprints in Jira.'),
-    active ? sect({ ic: 'check', title: active.name + ' items', count: (active.issues || []).length, right: tag('read-only'), attrs: { 'data-inb-sprint': active.name, 'data-inb-state': 'active' } },
+    active ? sect({ ic: 'check', title: active.name + ' items', count: (active.issues || []).length, right: el('span', { class: 'chip2', 'data-inb': 'sprints-source', title: 'Mirrored from Jira ' + jiraLabel(b) + '. Change sprints in Jira.' }, icon('lock', 'sm'), 'Jira, read-only' + (t ? ' · read ' + t : '')), attrs: { 'data-inb-sprint': active.name, 'data-inb-state': 'active' } },
       (active.issues || []).length ? list(active.issues.map(issueRow)) : empty('No items in this sprint yet.', { 'data-inb': 'sprint-no-issues' }))
       : empty(sprints.length ? 'No sprint is active.' : 'Jira has no sprints for this board.', { 'data-inb': sprints.length ? 'sprints-no-active' : 'sprints-empty' }),
     ...others.map((s) => { const c = countsOf(s); return sect({ ic: s.state === 'closed' ? 'check' : 'clock', title: s.name, count: (s.issues || []).length, right: tag(s.state || 'sprint'), attrs: { 'data-inb-sprint': s.name, 'data-inb-state': s.state } },
@@ -42,13 +41,11 @@ registerBoardTab('sprints', async (host, ctx) => {
   const right = [];
   if (active) {
     const c = countsOf(active); const tot = Math.max(1, c.todo + c.doing + c.done);
-    right.push(card({ ic: 'clock', title: active.name, attrs: { 'data-inb': 'sprint-counts' } }, kv([['Items', String(c.todo + c.doing + c.done)], ['Done', String(c.done)], ['In progress', String(c.doing)], ['To do', String(c.todo)]]),
-      hbs([hbr('Done', c.done, c.done / tot, 'ok'), hbr('In progress', c.doing, c.doing / tot, 'acc'), hbr('To do', c.todo, c.todo / tot, 'pm')])));
+    right.push(card({ ic: 'clock', title: active.name, attrs: { 'data-inb': 'sprint-counts' } }, hbs([hbr('Done', c.done, c.done / tot, 'ok'), hbr('In progress', c.doing, c.doing / tot, 'acc'), hbr('To do', c.todo, c.todo / tot, 'pm')])));
     const ids = items.ok ? items.initiatives.map((i) => i.id) : [];
     const pseudo = { ...ctx, row: { id: ids.join(','), title: '' } };
     right.push(...await recordCards(pseudo, ['burndown']));
   }
-  right.push(card({ ic: 'out', title: 'In Jira' }, note('Sprints, their dates and their items are Jira\'s. PMOS mirrors them after each sync.'), el('div', { class: 'chips2' }, pbtn('outline', 'Open the Board', 'cols', { onclick: () => ctx.openBoard(b.id, 'board') }))));
   if (dead) return () => {};
   put(host, cols(left, right));
   return () => { dead = true; };

package/workspace/public/pm/c3-ib-triage.js

@@ -8,12 +8,12 @@
  *                opens it.
  *   Ask for more a sheet for the question to the asker (POST /api/boards/asks/more). The ask stays open, marked "asked for more".
  *   Decline      a sheet that asks for the reason (POST /api/boards/asks/decline).
- * Right: how triage works, naming the default workflow and its first stage.
+ * The New asks header names the default workflow and its first stage (c3-board-declutter: no side card, the asks take the width).
  * Contract fields relied on: an ask is { id, line, source?, at?, by?, needMore?, moreNote?, draft?: { title?, lane, confidence,
  * anchor_suggestion, prior_rejections: [{ id, title, why }] }, initiative? (accepted), why? (declined) }. Nothing is invented. */
 import { el } from './dom.js';
 import { registerBoardTab } from './c3-initiatives.js';
-import { icon, pbtn, lk, chip, tag, st, note, noteA, lbl, sect, card, list, empty, nrow, cols, chgl, ago, put } from './c3-ini-ui.js';
+import { icon, pbtn, lk, chip, tag, st, note, noteA, lbl, sect, card, list, empty, nrow, ago, put } from './c3-ini-ui.js';
 import { TEMPLATES } from './c3-ini-work.js';
 import { isScanAsk, scanAskParts } from './c3-scan.js';
 
@@ -34,12 +34,7 @@ registerBoardTab('triage', async (host, ctx) => {
   const addBtn = pbtn('outline', 'Add', 'plus', { 'data-ibt': 'add', onclick: () => add() });
   const msg = errLine({ 'data-ibt': 'error' });
   const left = el('div', { class: 'ini-col' });
-  const right = card({ ic: 'inbox', title: 'How triage works', attrs: { 'data-ibt': 'intro' } },
-    note('New asks land here from Slack, email, Jira Service Desk and meeting notes. Each gets a sharpness check and a prior-ask check. Accepting starts an initiative with this board\'s default workflow, ' + def.name + ', in ' + first.name + '. You can switch the initiative to another workflow afterwards.'),
-    chgl([el('li', null, icon('check', 'sm'), el('span', null, 'Accept: starts an initiative (' + def.name + ', ' + first.name + ')'), el('span')),
-      el('li', null, icon('reply', 'sm'), el('span', null, 'Ask for more: the asker is prompted for detail'), el('span')),
-      el('li', null, icon('x', 'sm'), el('span', null, 'Decline: the asker is told why'), el('span'))]));
-  put(host, cols(left, right));
+  put(host, left);
   const setErr = (t) => { msg.textContent = t || ''; msg.hidden = !t; };
 
   function draftNodes(a) {
@@ -74,7 +69,7 @@ registerBoardTab('triage', async (host, ctx) => {
   function draw() {
     put(left, 
       card({ ic: 'plus', title: 'Add an ask' }, el('div', { class: 'form', 'data-ibt': 'add-form' }, input, addBtn), msg),
-      sect({ ic: 'inbox', title: 'New asks', count: S.open.length }, S.open.length ? list(S.open.map((a) => row(a, 'open')), { 'data-ibt': 'asks', 'aria-label': 'Open asks' }) : empty('Nothing new to triage on this board.', { 'data-ibt': 'empty' })),
+      sect({ ic: 'inbox', title: 'New asks', count: S.open.length, right: el('span', { class: 'dim', 'data-ibt': 'intro', title: 'Accept starts an initiative on this board\'s default workflow. Ask for more prompts the asker. Decline tells them why.' }, 'Accept starts ' + def.name + ', in ' + first.name) }, S.open.length ? list(S.open.map((a) => row(a, 'open')), { 'data-ibt': 'asks', 'aria-label': 'Open asks' }) : empty('Nothing new to triage on this board.', { 'data-ibt': 'empty' })),
       S.other.length ? sect({ ic: 'check', title: 'Decided', count: S.other.length, attrs: { 'data-ibt': 'closed' } }, list(S.other.map((x) => row(x, x.state)))) : null);
     if (S.justAdded) {
       const li = left.querySelector('[data-ibt-ask="' + CSS.escape(S.justAdded) + '"] .tt'); S.justAdded = '';

package/workspace/public/pm/c3-ini-life.css

@@ -24,6 +24,8 @@
 .c3 .ini-mpanel .il-f{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:8px;padding:4px 8px;font-size:var(--fs-2);color:var(--muted-foreground)}
 .c3 .ini-mpanel .il-f select{width:100%}
 .c3 .ini-mpanel .il-fend{justify-content:flex-end;padding:6px 8px 2px}
+.c3 .ini-mpanel .il-fnote{padding:4px 8px;font-size:var(--fs-2);max-width:280px}
+.c3 .wk-fbar .il-chips{margin-left:auto}
 .c3 .ini-mi .il-hint{color:var(--muted-foreground)}
 .c3 .ini-mi[aria-checked="false"] .il-tick{visibility:hidden}
 /* The board's Initiatives list shows every chip of a row, as the mockup draws it (the quiet pages keep two elsewhere). */

package/workspace/public/pm/c3-initiatives.js

@@ -166,7 +166,8 @@ export function mountInitiatives(pane, opts) {
   const openBoard = (id, tab, filter) => go({ view: 'board', board: id, tab: tab || 'summary', filter: filter || {} });
   const refresh = () => { P.boards = null; P.ini = null; dropItems(); draw(); };
   // The Briefing's Horizon scan card opens a board's Triage or settings (c3-scan.js goBoard). A page that is not built yet reads the address instead.
-  if (typeof window !== 'undefined') { if (window.__iniGo) window.removeEventListener('pmos:ini-go', window.__iniGo); window.__iniGo = (e) => { const d = (e && e.detail) || {}; if (d.loc != null && root.isConnected) go(parseLoc(d.loc)); else if (d.board && root.isConnected) openBoard(d.board, d.tab || 'summary'); }; window.addEventListener('pmos:ini-go', window.__iniGo); }
+  // A report deck's live initiative link sends { id } (c3-report-deck.js openInitiative): the initiative opens on the board in view, else the first board.
+  if (typeof window !== 'undefined') { if (window.__iniGo) window.removeEventListener('pmos:ini-go', window.__iniGo); window.__iniGo = (e) => { const d = (e && e.detail) || {}; if (!root.isConnected) return; if (d.id) { const b = d.board || (P.loc && P.loc.board) || (P.boards && P.boards[0] && P.boards[0].id); if (b) go({ view: 'ini', board: b, id: d.id, tab: d.tab || 'overview' }); return; } if (d.loc != null) go(parseLoc(d.loc)); else if (d.board) openBoard(d.board, d.tab || 'summary'); }; window.addEventListener('pmos:ini-go', window.__iniGo); }
   const redraw = () => draw();
 
   async function loadBoards() {

package/workspace/public/pm/c3-quiet.css

@@ -43,7 +43,7 @@
 .c3 [data-ini-view="board"] > .calbody > .lh{display:none !important}                       /* board name repeats the breadcrumb */
 .c3 [data-ini="board-tabs"] .bdg{display:none !important}
 .c3 [data-ini="board-tabs"] .qt-more-tab{display:none}
-.c3 [data-ini="board-tabs"].qt-show .qt-more-tab{display:inline-flex}
+.c3 [data-ini="board-tabs"] .qt-more-tab[aria-pressed="true"]{display:inline-flex}
 .c3 .qt-status{color:var(--muted-foreground);font-size:var(--fs-2);margin-left:8px}
 .c3 .qt-status.warn{color:var(--warning)}
 .c3 [data-ini="glance"] .chip2.mono{display:none !important}

package/workspace/public/pm/c3-quiet.js

@@ -4,7 +4,7 @@
  *   mountQuiet(root)   links c3-quiet.css once and keeps the page in its quiet layout as the views draw:
  *     - the freshness line folds into one dot next to the date ("4 sources not read"); pressing the dot shows the full line;
  *     - a board: its status joins the breadcrumb, the board tabs join that row, Backlog, Releases, Docs and Sprints go
- *       behind More, Dashboard and the all-zero Work items card are not shown;
+ *       behind More (a menu; the open one shows beside the five, c3-board-declutter), Dashboard and the all-zero Work items card are not shown;
  *     - the portfolio: the headline joins the breadcrumb, an empty triage card is not shown, the timeline folds;
  *     - empty chips ("No owner", "0 epics", ...) are not drawn;
  *     - Calendar: the layer chips sit behind one Layers button, the Detail card shows once a meeting is picked;
@@ -14,6 +14,7 @@
  * It runs again, debounced, whenever the views redraw (one MutationObserver on the root). */
 
 import { button } from './primitives.js';
+import { openMenu } from './c3-ini-ui.js';
 
 const EMPTY_CHIP = /^(No owner|No dates yet|0 epics|0%|No release planned|Build and deliver)$/;
 const MORE_TABS = /^(backlog|releases|docs|sprints)$/;
@@ -76,12 +77,10 @@ function board(v) {
   if (tabs) {
     for (const t of tabs.querySelectorAll('[data-ini-tab]')) if (MORE_TABS.test(t.dataset.iniTab)) t.classList.add('qt-more-tab');
     if (!tabs.querySelector('.qt-more')) {
-      const m = button({ label: 'More', variant: 'ghost', size: 'sm', attrs: { class: 'qt-more', 'aria-expanded': 'false' },
-        onClick: () => { const on = tabs.classList.toggle('qt-show'); m.setAttribute('aria-expanded', String(on)); } });
+      const m = button({ label: 'More', variant: 'ghost', size: 'sm', attrs: { class: 'qt-more', 'aria-haspopup': 'menu', 'aria-expanded': 'false' },
+        onClick: () => openMenu(m, { label: 'More board views', items: [...tabs.querySelectorAll('.qt-more-tab')].map((t) => ({ kids: [...t.childNodes].map((n) => n.cloneNode(true)), checked: t.getAttribute('aria-pressed') === 'true', attrs: { 'data-qt-more': t.dataset.iniTab }, onPick: () => t.click() })) }) });
       tabs.appendChild(m);
     }
-    // a tab behind More that is the open one keeps the row shown, so the pressed tab never disappears
-    if (tabs.querySelector('.qt-more-tab[aria-pressed="true"]')) tabs.classList.add('qt-show');
     const row = crumbs && crumbs.parentElement;
     if (row && tabs.parentElement !== row) { row.classList.add('qt-ctx'); row.insertBefore(tabs, row.querySelector(':scope > .chips2:not([data-ini="crumbs"])')); }
   }

package/workspace/public/pm/c3-report-deck.css

@@ -0,0 +1,139 @@
+/* pm/c3-report-deck.css — the deck view, Present, the notes, the Design studio and the design brief (initiative report-design-studio). The mockup's
+   42-reportdeck.css under real class names: .mk-dk is .rd-dk, .mk-dks is .rd-dks, the mockup's .mk-btn/.mk-log/.mk-sync/.mk-stale are the document
+   sheet's .ds-btn/.ds-log/.ds-sync/.ds-stale. The slide is a render in a sandboxed frame (.rd-card > iframe), scaled with --rp-scale.
+   Tokens only. Corners: 6px on a control, 8px on a container, 50% only on a dot. c3-report-deck.js links it once. */
+.c3 .sheet.rd-wide { width: min(1320px, calc(100% - 24px)); max-width: none; }
+.c3 .rd-dk { display: grid; gap: var(--sp-3); min-width: 0; }
+.c3 .rd-dk > * { min-width: 0; }
+.c3 .rd-wrap { flex-wrap: wrap; min-width: 0; }
+.c3 .rd-small { font-size: var(--fs-2); }
+.c3 .rd-m0 { margin: 0; }
+.c3 .rd-fg { color: var(--foreground); }
+.c3 .rd-hide { display: none; }
+.c3 .rd-stack { display: grid; gap: 6px; min-width: 0; }
+.c3 .rd-between { justify-content: space-between; }
+.c3 .rd-warn { color: var(--warning); }
+.c3 .rd-on { color: var(--acc); border-color: var(--acc); }
+.c3 .rd-dk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
+.c3 .rd-dk-bar .seg { max-width: 100%; overflow-x: auto; }
+.c3 .rd-dk-bar .seg button { white-space: nowrap; }
+.c3 .rd-dk-caps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+.c3 .rd-dk-caps .dim { font-size: var(--fs-1); margin-right: 4px; }
+.c3 .rd-dk-diff p { margin: 0; }
+
+/* a slide: the render in a sandboxed frame, 1280 x 720, scaled to the card's width */
+.c3 .rd-card { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--slide-bg); box-shadow: 0 0 0 1px var(--border); border-radius: 6px; }
+.c3 .rd-card > .rd-if { position: absolute; top: 0; left: 0; width: 1280px; height: 720px; border: 0; transform: scale(var(--rp-scale, 0.5)); transform-origin: top left; background: var(--slide-bg); }
+.c3 .rd-thumb > .rd-if { pointer-events: none; }
+.c3 .rd-big.placing, .c3 .rd-docf.placing { box-shadow: 0 0 0 2px var(--acc); }
+.c3 .rd-big.placing > .rd-if, .c3 .rd-docf.placing > .rd-if { cursor: crosshair; }
+.c3 .rd-docf { position: relative; border: 1px solid var(--border); border-radius: 8px; background: var(--slide-bg); overflow: hidden; }
+.c3 .rd-docf > .rd-if { display: block; width: 100%; height: var(--rp-h, 480px); border: 0; background: var(--slide-bg); }
+.c3 .rd-docf.sm { max-height: 520px; overflow: auto; }
+.c3 .rd-doclayer { position: absolute; inset: 0; pointer-events: none; }
+.c3 .rd-doclayer > * { pointer-events: auto; }
+.c3 .rd-tip { position: absolute; z-index: 4; left: var(--rp-x, 0); top: var(--rp-y, 0); transform: translate(-50%, calc(-100% - 6px)); max-width: 280px; padding: 4px 8px; border-radius: 6px; background: var(--foreground); color: var(--background); font: 500 var(--fs-2) var(--sans); pointer-events: none; white-space: normal; }
+.c3 .rd-tip[hidden] { display: none; }
+
+/* the deck: filmstrip, current slide, notes */
+.c3 .rd-dk-main { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
+.c3 .rd-dk-strip { display: grid; gap: 8px; align-content: start; max-height: calc(100vh - 230px); overflow: auto; position: sticky; top: 0; padding: 3px; }
+.c3 .rd-dk-strip.h { grid-auto-flow: column; grid-auto-columns: 120px; max-height: none; position: static; overflow-x: auto; overflow-y: hidden; }
+.c3 .rd-dk-th { position: relative; display: block; width: 100%; height: auto; min-height: 0; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
+.c3 .rd-dk-th[aria-current="true"] { outline: 2px solid var(--acc); outline-offset: 2px; }
+.c3 .rd-dk-thn { position: absolute; left: 4px; bottom: 4px; font: var(--fs-1) var(--mono); background: var(--card); color: var(--foreground); border-radius: 6px; padding: 0 4px; }
+.c3 .rd-dk-thp { position: absolute; right: 4px; top: 4px; display: inline-flex; gap: 2px; align-items: center; font: var(--fs-1) var(--mono); background: var(--acc); color: var(--background); border-radius: 6px; padding: 0 4px; }
+.c3 .rd-dk-thp .ic { width: 10px; height: 10px; }
+.c3 .rd-dk-stage { display: grid; gap: var(--sp-2); min-width: 0; }
+.c3 .rd-dk-cap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
+.c3 .rd-dk-under { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--sp-3); align-items: start; }
+.c3 .rd-dk-ncol { display: grid; gap: var(--sp-3); min-width: 0; }
+.c3 .rd-spk { min-height: 96px; resize: vertical; width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--foreground); font: var(--fs-3)/1.5 var(--sans); }
+.c3 .rd-carry { display: grid; gap: 6px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 8px; color: var(--muted-foreground); }
+.c3 .rd-carry p { margin: 0; font-size: var(--fs-3); font-style: italic; }
+/* pins: a numbered dot on the slide; yours blue, PMOS's purple and dashed while it is a proposal */
+.c3 .rd-pindot { position: absolute; z-index: 2; left: var(--rp-x, 50%); top: var(--rp-y, 50%); transform: translate(-50%, -50%); width: 26px; height: 26px; min-width: 0; min-height: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; place-content: center; font: 600 var(--fs-1) var(--mono); color: var(--background); background: var(--acc); border: 2px solid var(--slide-bg); box-shadow: 0 2px 6px color-mix(in oklab, var(--slide-fg) 30%, transparent); cursor: pointer; }
+.c3 .rd-pindot.a { background: var(--agent); }
+.c3 .rd-pindot.prop { border-style: dashed; }
+.c3 .rd-pindot.on { box-shadow: 0 0 0 4px color-mix(in oklab, var(--acc) 35%, transparent); }
+.c3 .rd-pindot.a.on { box-shadow: 0 0 0 4px color-mix(in oklab, var(--agent) 35%, transparent); }
+.c3 .rd-notes .rd-pindot { position: static; transform: none; border-color: var(--card); box-shadow: none; }
+.c3 .rd-notes > li.rd-note { grid-template-columns: 28px minmax(0, 1fr); padding: 6px; margin: 0 -6px; border-radius: 8px; }
+.c3 .rd-notes > li.rd-note::before { display: none; }
+.c3 .rd-notes > li.rd-note.on { background: var(--muted); }
+.c3 .rd-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-foreground); }
+.c3 .rd-cmpg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--sp-3); }
+.c3 .rd-cmph { flex-wrap: wrap; margin-bottom: 6px; }
+.c3 .rd-cmpc { min-width: 0; }
+.c3 .rd-none { min-height: 120px; align-content: center; }
+
+/* Present: the audience view is the product's .rp-deck; the presenter view lays cards on the same stage */
+.c3 .rd-ovhost { position: fixed; inset: 0; z-index: 60; }
+.c3 .rp-deck.rd-ov { z-index: 60; display: flex; flex-direction: column; gap: 0; }
+.c3 .rd-ovframe { overflow: hidden; }
+.c3 .rd-ovframe > .rd-if { position: absolute; top: 0; left: 0; width: 1280px; height: 720px; border: 0; transform: scale(var(--rp-scale, 1)); transform-origin: top left; background: var(--slide-bg); }
+.c3 .rd-pg { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; padding: 16px; overflow: auto; align-items: start; }
+.c3 .rd-pmain, .c3 .rd-pside { display: grid; gap: 12px; min-width: 0; }
+.c3 .rd-pp { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--foreground); }
+.c3 .rd-plab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
+.c3 .rd-ph { display: flex; gap: 6px; align-items: center; font: 500 var(--fs-1) var(--mono); color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .06em; }
+.c3 .rd-pnote { margin: 0; font-size: var(--fs-4); line-height: 1.5; }
+.c3 .rd-ptime { grid-template-columns: 1fr 1fr; }
+.c3 .rd-timer { font: 600 var(--fs-6) var(--mono); }
+.c3 .rd-jump { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 260px; overflow: auto; }
+.c3 .rd-jump button { display: flex; gap: 8px; align-items: center; justify-content: flex-start; width: 100%; height: auto; text-align: left; background: none; border: 0; padding: 5px 8px; border-radius: 6px; font-size: var(--fs-2); }
+.c3 .rd-jump button[aria-current="true"] { background: color-mix(in oklab, var(--acc) 14%, transparent); color: var(--acc); font-weight: 500; }
+.c3 .rd-jump .mono { color: var(--muted-foreground); font-size: var(--fs-1); }
+.c3 .rd-ov .rp-deck__bar { flex-wrap: wrap; }
+@media (hover: hover) {
+  .c3 .rd-jump button:hover { background: var(--muted); }
+  .c3 .rd-dks-opt:hover { background: var(--muted); }
+}
+
+/* the Design studio: the conversation left, the live result right */
+.c3 .rd-dks { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
+.c3 .rd-dks-chat { display: grid; gap: var(--sp-2); position: sticky; top: 0; max-height: calc(100vh - 220px); grid-template-rows: auto minmax(0, 1fr) auto auto; min-width: 0; }
+.c3 .rd-dks-desc { display: grid; gap: 6px; }
+.c3 .rd-dks-desc .dim { font-size: var(--fs-1); }
+.c3 .rd-dks-log { list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; gap: 12px; align-content: start; overflow: auto; min-height: 120px; }
+.c3 .rd-dks-msg { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; }
+.c3 .rd-dks-msg .bub { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); min-width: 0; }
+.c3 .rd-dks-msg.you .bub { background: color-mix(in oklab, var(--acc) 7%, var(--card)); border-color: color-mix(in oklab, var(--acc) 25%, var(--border)); }
+.c3 .rd-dks-msg.err .bub { border-color: color-mix(in oklab, var(--warning) 50%, var(--border)); }
+.c3 .rd-dks-msg .who { font: 500 var(--fs-1) var(--mono); color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .06em; }
+.c3 .rd-dks-msg p { margin: 0; font-size: var(--fs-3); line-height: 1.5; overflow-wrap: anywhere; }
+.c3 .rd-dks-ver { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.c3 .rd-dks-ver[aria-pressed="true"] { color: var(--acc); border-color: var(--acc); }
+.c3 .rd-dks-smp { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); }
+.c3 .rd-dks-smp b { display: flex; gap: 6px; align-items: center; font-size: var(--fs-2); overflow-wrap: anywhere; }
+.c3 .rd-dks-smp .mono { font-size: var(--fs-1); }
+.c3 .rd-dks-smp p { margin: 2px 0 0; font-size: var(--fs-2); line-height: 1.4; }
+.c3 .rd-dks-thumb { display: grid; gap: 3px; align-content: start; width: 56px; aspect-ratio: 16 / 9; padding: 4px; box-sizing: border-box; border: 1px solid var(--slide-border); border-radius: 6px; background: var(--slide-bg); }
+.c3 .rd-dks-thumb.img { padding: 0; object-fit: cover; }
+.c3 .rd-dks-thumb i { display: block; height: 3px; background: var(--slide-track); }
+.c3 .rd-dks-thumb.deck i:first-child { height: 6px; background: var(--slide-brand); }
+.c3 .rd-dks-thumb.deck i:nth-child(2) { width: 70%; }
+.c3 .rd-dks-thumb.page { aspect-ratio: 3 / 4; width: 40px; justify-self: center; }
+.c3 .rd-dks-thumb.page i:first-child { width: 60%; background: var(--slide-fg); }
+.c3 .rd-dks-panel { display: grid; gap: 8px; padding: 10px; border: 1px dashed var(--border); border-radius: 8px; }
+.c3 .rd-dks-opt { display: flex; gap: 10px; align-items: center; justify-content: flex-start; width: 100%; height: auto; text-align: left; white-space: normal; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--foreground); font: inherit; font-size: var(--fs-3); cursor: pointer; }
+.c3 .rd-dks-in { display: grid; gap: 8px; padding-top: var(--sp-2); border-top: 1px solid var(--border); }
+.c3 .rd-dks-in textarea { min-height: 64px; resize: vertical; width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--foreground); font: var(--fs-3)/1.5 var(--sans); }
+.c3 .rd-dks-out { display: grid; gap: var(--sp-2); min-width: 0; }
+.c3 .rd-dks-vers { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
+.c3 .rd-dks-vers .seg button { display: inline-flex; gap: 4px; align-items: center; }
+.c3 .rd-dks-mk { z-index: 3; }
+/* the saved design: a brief, not a template */
+.c3 .rd-dks-q { margin: 0; padding: 8px 12px; border-left: 3px solid var(--acc); background: var(--muted); border-radius: 0; font-size: var(--fs-3); line-height: 1.5; }
+.c3 .rd-dks-ref { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
+.c3 .rd-dks-rule { display: grid; gap: 4px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; }
+.c3 .rd-dks-rule b { font-size: var(--fs-3); }
+.c3 .rd-dks-rule ul { margin: 0; padding-left: 18px; font-size: var(--fs-3); line-height: 1.5; }
+@media (max-width: 900px) {
+  .c3 .rd-dk-main { grid-template-columns: minmax(0, 1fr); }
+  .c3 .rd-dk-strip { grid-auto-flow: column; grid-auto-columns: 104px; max-height: none; position: static; overflow-x: auto; overflow-y: hidden; }
+  .c3 .rd-pg { grid-template-columns: minmax(0, 1fr); padding: 12px; }
+  .c3 .rd-dks { grid-template-columns: minmax(0, 1fr); }
+  .c3 .rd-dks-chat { position: static; max-height: none; }
+  .c3 .rd-dks-log { max-height: 420px; }
+}