create-pmos 0.511.0 → 0.513.0

package/workspace/public/pm/home-chat.js

@@ -34,6 +34,7 @@ import * as VWC from './cozy-viewer.js';
 import { canDictate, dictate } from './home-dictate.js';
 import { adler } from './cozy-adler.js';
 import { snapOf, turnEnded } from './chat-turn-end.js';   // a finished turn re-reads what the Viewer shows (batch 25 item 3)
+import { nextPromptUi } from './next-prompt-ui.js';   // the suggested next prompt and the Sharper card above the box (batch 26 item 2)
 /* The views a chat opens go in the Viewer: on a page with no dialog the old viewer's views draw in the cozy card (premium-viewer.js). */
 const views = {
   ctx: () => import('./premium-vw-ctx.js'), file: () => import('./premium-vw-file.js'), attach: () => import('./premium-attach.js'),
@@ -78,6 +79,18 @@ export function mountChat(el, host) {
   const role = () => (C.t && C.t.role) || roleOf(C.sess || null, host.roles(), firstUser());
   const firstUser = () => { const m = ((C.conv && C.conv.messages) || []).find((x) => x.role === 'user'); return m ? m.text : ''; };
   const running = () => !!C.conv && (C.conv.turn === 'agent' || C.conv.turn === 'tool') && C.conv.state !== 'ended';
+  // the suggested next prompt (batch 26 item 2): cards above the box after a reply, a Sharper card while the PM types a rough prompt
+  const NPU = nextPromptUi({ el, host, box: () => foot.querySelector('textarea'), redrawFoot: () => { if (C.t) drawFoot({ role: role() }); } });
+  el.addEventListener('np-grow', (e) => grow(e.target), true);
+  const plain = (s) => String(s || '').replace(/```pmos-[\s\S]*?```/g, '').trim();
+  function npCtx() {
+    const t = C.t, ms = (C.conv && C.conv.messages) || [];
+    let ai = -1; for (let i = ms.length - 1; i >= 0; i--) if (ms[i] && ms[i].role !== 'user' && plain(ms[i].text)) { ai = i; break; }
+    let pi = -1; for (let i = ai - 1; i >= 0; i--) if (ms[i] && ms[i].role === 'user') { pi = i; break; }
+    const ini = /^init:/.test(String(t.key || ''));
+    return { key: t.key || t.sid || '', reply: ai >= 0 ? plain(ms[ai].text).slice(0, 6000) : '', asked: pi >= 0 ? shownUser(String(ms[pi].text || '')).slice(0, 2000) : '',
+      initiative: ini ? String(t.title || '') : '', stage: ini ? String(t.sub || '') : '', title: String(t.title || '') };
+  }
 
   /* ── reading ── */
   async function read() {
@@ -98,6 +111,8 @@ export function mountChat(el, host) {
     const ended = turnEnded(C.turn, snap); C.turn = snap;
     draw();
     if (ended && host.turnEnded) host.turnEnded(t);
+    NPU.read(snap.busy);
+    if (ended && !(C.conv && C.conv.ask)) NPU.turnEnded(npCtx());
     clearTimeout(C.timer);
     const live = (C.th && (C.th.session || C.th.working)) || (t.sid && C.conv && C.conv.state !== 'ended');
     C.timer = setTimeout(() => { if (!document.hidden) read(); else C.timer = setTimeout(read, IDLE_POLL); }, live ? POLL : IDLE_POLL);
@@ -429,7 +444,7 @@ export function mountChat(el, host) {
     const html = `${also}<form class="hm-box${on ? ' ut-on' : ''}" id="hmForm">${dot}<textarea id="hmIn" rows="1" aria-label="A message for ${esc(R.role.name)}" placeholder="${esc(ph)}"></textarea>`
       + `<div class="hm-tb">${add}`
       + to + wait + scope + `<span class="sp"></span>${host.viewerClosed() ? '<span class="hm-key">Enter sends · Shift+Enter for a new line</span>' : ''}`
-      + `${mic}<button type="submit" class="hm-send" aria-label="Send" title="Send">${SVG(UP, 18)}</button></div>`
+      + `${NPU.undoHtml()}${mic}<button type="submit" class="hm-send" aria-label="Send" title="Send">${SVG(UP, 18)}</button></div>`
       + filesRow()
       + '</form>';
     if (foot.__h !== html) {
@@ -511,6 +526,7 @@ export function mountChat(el, host) {
       return;
     }
     const b = e.target.closest('button, [data-file], [data-att], [data-ctx]'); if (!b || !el.contains(b)) return;
+    if (NPU.click(b)) return;
     // ✓ types /compact (and hides the ✦ until the pie moves); ✕ hides it until the session is 10 points fuller
     if (b.dataset.hmCpt && C.cpt) { if (b.dataset.hmCpt === 'ok') host.compact(sid()); else host.dismissCompact(sid(), C.cpt.pct); C.cpt = null; sug.hidden = true; put(sug, ''); return; }
     if (b.dataset.hmSug && C.sug) { const g = C.sug; if (b.dataset.hmSug === 'link') host.linkTo(C.t.sid, g.id); else { host.dismissLink(C.t.sid); drawSug(); } return; }
@@ -572,7 +588,7 @@ export function mountChat(el, host) {
   el.addEventListener('submit', (e) => { e.preventDefault(); const ta = foot.querySelector('textarea'); const v = ta.value; if (GU.submit(v)) { ta.value = ''; grow(ta); return; }
     // the box empties at once and the bubble shows (batch 24 item 2); a send that fails puts the words back, unless the PM typed again
     if (!v.trim() && !C.files.length) return;
-    ta.value = ''; grow(ta);
+    ta.value = ''; grow(ta); NPU.sent();
     send(v).then((ok) => { const box = foot.querySelector('textarea'); if (!ok && box && !box.value) { box.value = v; grow(box); } }); });
   const shutAdd = (focus) => { if (!C.addOpen) return; C.addOpen = false; drawFoot({ role: role() }); if (focus) { const a = foot.querySelector('#hmAdd'); if (a) a.focus(); } };
   document.addEventListener('click', (e) => { if (C.addOpen && e.target.isConnected && !e.target.closest('.hm-addw')) shutAdd(false); }, true);
@@ -580,6 +596,7 @@ export function mountChat(el, host) {
   document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !e.defaultPrevented && el.isConnected && !el.contains(e.target) && !document.querySelector('[data-esc-layer]') && GU.escape()) e.preventDefault(); });
   el.addEventListener('keydown', (e) => {
     if (e.key === 'Escape' && C.addOpen) { e.preventDefault(); e.stopPropagation(); shutAdd(true); return; }
+    if (e.key === 'Escape' && NPU.escape()) { e.preventDefault(); e.stopPropagation(); return; }
     if (e.key === 'Escape' && GU.escape()) { e.preventDefault(); e.stopPropagation(); return; }
     if (e.target.id !== 'hmIn') { if (e.key === 'Escape' && running() && !document.querySelector('[data-esc-layer]') && !(window.czViewer && window.czViewer.isOpen())) press('esc'); return; }
     if (e.isComposing || e.keyCode === 229) return;
@@ -592,7 +609,7 @@ export function mountChat(el, host) {
   el.addEventListener('input', (e) => {
     const card = C.t && C.t.intro && C.t.intro.card;
     if (card && card.input && e.target.closest('.hm-icard')) { card.input(e.target, e.target.closest('.hm-icard')); return; }
-    if (e.target.id === 'hmIn') { grow(e.target); C.slashAt = 0; drawSlash(); }
+    if (e.target.id === 'hmIn') { grow(e.target); C.slashAt = 0; drawSlash(); NPU.input(e.target.value); }
   });
   /* ── the mic ── dictation into the box only (HmMic). A desk shows the blue dot in the box; a phone shows the Speak to Claude sheet. */
   const box = () => foot.querySelector('textarea');
@@ -671,7 +688,7 @@ export function mountChat(el, host) {
       if (notesM) notesM.then((M) => setTimeout(() => M.syncNotes(), 0));   // the Notes open in the Viewer belonged to the conversation before
       const same = C.t && t && C.t.key === t.key && C.t.sid === t.sid;
       C.t = t;
-      if (!same) { C.addOpen = false; C.th = null; C.conv = null; C.show = 12; C.open = new Set(); C.files = []; C.marked = null; C.touched = null; C.picked = {}; C.pend = []; C.plOpen = false; C.plAll = false; C.seenAt = t.key ? host.seen(t.key) : null; put(log, introHtml(t.intro)); put(pl, ''); pl.hidden = true; C.jump = true; peek(null); }
+      if (!same) { NPU.open(); C.addOpen = false; C.th = null; C.conv = null; C.show = 12; C.open = new Set(); C.files = []; C.marked = null; C.touched = null; C.picked = {}; C.pend = []; C.plOpen = false; C.plAll = false; C.seenAt = t.key ? host.seen(t.key) : null; put(log, introHtml(t.intro)); put(pl, ''); pl.hidden = true; C.jump = true; peek(null); }
       draw(); read();
     },
     refresh() { if (C.t) draw(); },

package/workspace/public/pm/home-impact.css

@@ -4,23 +4,23 @@
 .im-q { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 8px 12px 16px; border-radius: 18px; background: var(--cz-bluebg); }
 .im-k { flex: none; display: inline-flex; margin-top: 2px; color: var(--cz-blueink); }
 .im-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
-.im-t { font-size: var(--fs-4); font-weight: 700; line-height: 1.35; color: var(--cz-ink); overflow-wrap: anywhere; }
-.im-w { font-size: var(--fs-3); color: var(--cz-ink2); overflow-wrap: anywhere; }
-.im-src { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: var(--fs-2); color: var(--cz-ink3); text-decoration: none; }
+.im-t { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: 1.35; color: var(--cz-ink); overflow-wrap: anywhere; }
+.im-w { font-size: var(--fs-body); color: var(--cz-ink2); overflow-wrap: anywhere; line-height: var(--lh-body); }
+.im-src { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: var(--fs-meta); color: var(--cz-ink3); text-decoration: none; line-height: var(--lh-meta); }
 .im-src:hover { text-decoration: underline; }
 .im-src svg, .im-lock svg { flex: none; }
 .im-mw { position: relative; flex: none; }
 .im-more { width: 28px; height: 28px; color: var(--cz-ink2); }
 .ut-ib.im-more svg { stroke-width: 3.2; }
 .im-pop { position: absolute; right: 0; top: 32px; z-index: 5; padding: 4px; border-radius: 14px; background: var(--cz-card); box-shadow: 0 14px 34px -14px rgba(42, 46, 53, .4), 0 0 0 1px var(--cz-hair); }
-.im-pop button { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--cz-ink); font: inherit; font-size: var(--fs-3); font-weight: 600; white-space: nowrap; cursor: pointer; }
+.im-pop button { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--cz-ink); font: inherit; font-size: var(--fs-row); font-weight: var(--fw-strong); white-space: nowrap; cursor: pointer; line-height: var(--lh-row); }
 .im-pop button:hover, .im-pop button:focus-visible { background: var(--cz-well); }
 .im-pop svg { width: 15px; height: 15px; }
-.im-q.im-gone { align-items: center; padding: 8px 8px 8px 16px; background: var(--cz-well); color: var(--cz-ink3); font-size: var(--fs-3); }
+.im-q.im-gone { align-items: center; padding: 8px 8px 8px 16px; background: var(--cz-well); color: var(--cz-ink3); font-size: var(--fs-body); line-height: var(--lh-body); }
 .im-gt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
-.im-undo { flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--cz-blueink); font: inherit; font-size: var(--fs-3); font-weight: 700; cursor: pointer; }
+.im-undo { flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--cz-blueink); font: inherit; font-size: var(--fs-row); font-weight: var(--fw-strong); cursor: pointer; line-height: var(--lh-row); }
 .im-undo:hover { background: var(--cz-card); }
-.im-lock { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: var(--fs-2); color: var(--cz-ink3); }
-.im-msg { margin: 4px 0 0; font-size: var(--fs-2); color: var(--cz-ink3); }
+.im-lock { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.im-msg { margin: 4px 0 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .im-msg:empty { display: none; }
 @media (prefers-reduced-motion: no-preference) { .im-q { transition: background-color .2s ease; } }

package/workspace/public/pm/home-ini.css

@@ -4,9 +4,9 @@
 /* ── the stage move in the card (InStage) ── */
 .hi-slot { display: contents; }
 .hi-mv { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
-.hi-why, .hi-note { margin: 0; font-size: var(--fs-2); color: var(--cz-ink3); }
+.hi-why, .hi-note { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .hi-note b { color: var(--cz-ink2); }
-.hi-swl { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2); color: var(--cz-ink2); }
+.hi-swl { display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 .hi-sw { position: relative; flex: none; width: 32px; height: 20px; border-radius: 999px; background: var(--cz-c-d9dce1); border: 0; padding: 0; cursor: pointer; }
 .hi-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--cz-card); transition: left .15s; }
 .hi-sw[aria-checked="true"] { background: var(--cz-blue); }
@@ -19,13 +19,13 @@
 .hi-self { align-self: flex-start; }
 
 /* ── the list column groups (InTasks, InDocs) ── */
-.hi-g .hm-gh .hi-n { margin-left: auto; font-weight: 700; font-size: var(--fs-2); color: var(--cz-ink3); }
+.hi-g .hm-gh .hi-n { margin-left: auto; font-weight: var(--fw-strong); font-size: var(--fs-label); color: var(--cz-ink3); line-height: var(--lh-label); }
 .hm-r.hi-r { min-height: 48px; margin-bottom: 2px; }
 .hm-r.hi-r .hm-rm { min-height: 48px; padding: 7px 10px; }
-.hm-r.hi-r .hm-rt b { font-weight: 600; }
+.hm-r.hi-r .hm-rt b { font-weight: var(--fw-strong); }
 .hm-r.hi-r > .hi-chk { margin-left: 12px; }
 .hm-rt em.q { color: var(--cz-ink3); }
-.hm-rt em.late { color: var(--cz-late); font-weight: 700; }
+.hm-rt em.late { color: var(--cz-late); font-weight: var(--fw-strong); }
 .hm-rt em.risk { color: var(--cz-risk); }
 .hm-dot.hi-risk { background: var(--cz-dot-risk); }
 .hm-tile.hi-sq { border-radius: 50%; background: var(--cz-well2); box-shadow: none; }
@@ -38,39 +38,39 @@
 
 
 /* ── the Viewer: Tasks, Documents, Stage (InTasks, InDocs) ── */
-.hi-v { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 24px; font-size: var(--fs-3); color: var(--cz-ink); }
+.hi-v { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 24px; font-size: var(--fs-body); color: var(--cz-ink); line-height: var(--lh-body); }
 .hi-seg { align-self: flex-start; }
 .hi-vh2 { display: flex; align-items: center; gap: 8px; }
-.hi-vh2 h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-5); font-weight: 800; }
-.cz-pick.hi-pick { height: 30px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); }
+.hi-vh2 h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-panel); font-weight: var(--fw-strong); line-height: var(--lh-panel); }
+.cz-pick.hi-pick { height: 30px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
 .cz-pick.hi-pick svg { fill: none; stroke: currentColor; }
-.hi-empty { margin: 0; font-size: var(--fs-2); color: var(--cz-ink3); }
+.hi-empty { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .hi-tg { display: flex; flex-direction: column; border-radius: 12px; }
 .hi-tg.over { background: var(--cz-bluebg); }
 .hi-gh { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
 .hi-ghb { flex: 1; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0; border: 0; background: none; color: var(--cz-ink); font: inherit; cursor: pointer; text-align: left; }
 .hi-ghb svg { color: var(--cz-ink3); }
-.hi-ghb b { font-size: var(--fs-3); }
-.hi-ghb span { font-size: var(--fs-2); color: var(--cz-ink3); }
-.hi-trow { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-3); min-height: 26px; }
+.hi-ghb b { font-size: var(--fs-body); line-height: var(--lh-body); }
+.hi-ghb span { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.hi-trow { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-body); min-height: 26px; line-height: var(--lh-body); }
 .hi-trow:last-child { border-bottom: 0; }
 .hi-trow[draggable="true"] { cursor: grab; }
 .hi-trow.drag { opacity: .5; }
 .hi-tt { flex: 1; min-width: 0; border: 0; background: none; padding: 0; font: inherit; color: var(--cz-ink); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.hi-tt em { font-style: normal; color: var(--cz-ink3); font-size: var(--fs-2); }
+.hi-tt em { font-style: normal; color: var(--cz-ink3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .hi-trow.done .hi-tt { text-decoration: line-through; color: var(--cz-ink3); }
-.hi-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 999px; font: inherit; font-size: var(--fs-1); font-weight: 700; background: var(--cz-well); color: var(--cz-ink2); white-space: nowrap; border: 0; flex: none; }
+.hi-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 999px; font: inherit; font-size: var(--fs-badge); font-weight: var(--fw-strong); background: var(--cz-well); color: var(--cz-ink2); white-space: nowrap; border: 0; flex: none; line-height: var(--lh-badge); }
 button.hi-pill { cursor: pointer; }
 .hi-pill.ok { background: var(--cz-okbg); color: var(--cz-ok); }
 .hi-pill.w { background: var(--cz-riskbg); color: var(--cz-risk); }
 .hi-pill.dash { background: transparent; box-shadow: inset 0 0 0 1px var(--cz-c-c5c9d0); color: var(--cz-ink3); }
-.hi-av { width: 22px; height: 22px; border-radius: 50%; background: var(--cz-well2); color: var(--cz-ink2); font-size: var(--fs-1); font-weight: 800; display: inline-grid; place-items: center; flex: none; }
-.hi-due { font-size: var(--fs-2); color: var(--cz-ink3); min-width: 38px; text-align: right; flex: none; }
-.hi-due.late { color: var(--cz-late); font-weight: 700; }
+.hi-av { width: 22px; height: 22px; border-radius: 50%; background: var(--cz-well2); color: var(--cz-ink2); font-size: var(--fs-badge); font-weight: var(--fw-strong); display: inline-grid; place-items: center; flex: none; line-height: var(--lh-badge); }
+.hi-due { font-size: var(--fs-meta); color: var(--cz-ink3); min-width: 38px; text-align: right; flex: none; line-height: var(--lh-meta); }
+.hi-due.late { color: var(--cz-late); font-weight: var(--fw-strong); }
 .hi-trow .hi-ib { opacity: .35; }
 .hi-trow:hover .hi-ib, .hi-trow .hi-ib:focus-visible, .hi-trow .hi-ib[aria-expanded="true"] { opacity: 1; }
 .hi-add { display: flex; align-items: center; gap: 8px; height: 40px; border-radius: 14px; background: var(--cz-well); padding: 0 6px 0 12px; }
-.hi-add input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font: inherit; font-size: var(--fs-3); color: var(--cz-ink); }
+.hi-add input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font: inherit; font-size: var(--fs-body); color: var(--cz-ink); line-height: var(--lh-body); }
 .hi-foot { display: flex; gap: 4px; flex-wrap: wrap; border-top: 1px solid var(--cz-hair); padding-top: 8px; }
 .hi-drow { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: 12px; }
 .hi-drow.look { background: var(--cz-bluebg); }
@@ -79,12 +79,12 @@ button.hi-pill { cursor: pointer; }
 .hi-dic { width: 30px; height: 30px; border-radius: 9px; background: var(--cz-well); display: inline-grid; place-items: center; flex: none; color: var(--cz-ink2); }
 .hi-dic.dash { background: none; box-shadow: inset 0 0 0 1.5px var(--cz-c-d9dce1); color: var(--cz-ink3); }
 .hi-dtx { min-width: 0; display: block; }
-.hi-dtx b { font-weight: 800; }
-.hi-dtx .hi-k { font-size: var(--fs-2); color: var(--cz-ink3); }
-.hi-dtx em { display: block; font-style: normal; font-size: var(--fs-2); color: var(--cz-ink3); }
-.hi-dtx small { display: block; font-size: var(--fs-1); color: var(--cz-ink3); overflow-wrap: anywhere; }
+.hi-dtx b { font-weight: var(--fw-strong); }
+.hi-dtx .hi-k { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.hi-dtx em { display: block; font-style: normal; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.hi-dtx small { display: block; font-size: var(--fs-meta); color: var(--cz-ink3); overflow-wrap: anywhere; line-height: var(--lh-meta); }
 .hi-drow.later { align-items: center; color: var(--cz-ink3); }
-.hi-dt { flex: 1; font-size: var(--fs-3); }
+.hi-dt { flex: 1; font-size: var(--fs-body); line-height: var(--lh-body); }
 .hi-drow > .hi-pill, .hi-drow > .hi-btn { margin-top: 4px; }
 .hi-sec { display: flex; flex-direction: column; gap: 8px; }
 .hi-stages { display: flex; flex-wrap: wrap; gap: 6px; }
@@ -130,13 +130,13 @@ button.hi-pill { cursor: pointer; }
 @media (max-width: 760px) { .hi-v.hi-page { padding-left: 0; padding-right: 0; } }
 .hi-pg { display: flex; flex-direction: column; gap: 2px; }
 .hi-pgh { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 4px; }
-.hi-pgh b { font-size: var(--fs-3); font-weight: 800; color: var(--cz-ink); }
-.hi-pgh .hi-n { font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); }
+.hi-pgh b { font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-row); }
+.hi-pgh .hi-n { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
 .hi-pgh .hm-gadd { margin-left: auto; }
-.hi-pgm { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 8px; border: 0; border-radius: 10px; background: none; color: var(--cz-ink2); font: inherit; font-size: var(--fs-2); font-weight: 700; cursor: pointer; }
+.hi-pgm { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 8px; border: 0; border-radius: 10px; background: none; color: var(--cz-ink2); font: inherit; font-size: var(--fs-label); font-weight: var(--fw-strong); cursor: pointer; line-height: var(--lh-label); }
 .hi-pge { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 6px; }
-.hi-pge p { margin: 0; font-size: var(--fs-2); color: var(--cz-ink3); }
-.hi-talk { min-height: 44px; border: 0; border-radius: 22px; background: var(--cz-well); color: var(--cz-ink3); font: inherit; font-size: var(--fs-3); text-align: left; padding: 0 16px; cursor: pointer; }
+.hi-pge p { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.hi-talk { min-height: 44px; border: 0; border-radius: 22px; background: var(--cz-well); color: var(--cz-ink3); font: inherit; font-size: var(--fs-body); text-align: left; padding: 0 16px; cursor: pointer; line-height: var(--lh-body); }
 @media (hover: hover) { .hi-pgm:hover { background: var(--cz-well2); } }
 
 /* ── D99: the initiative's own workflow (WfTriage, WfAChange, WfAWontDo) ── */
@@ -150,22 +150,22 @@ button.hi-pill { cursor: pointer; }
 .hm-card.hm-sc { padding: 0; background: transparent; box-shadow: none; }
 .hm-box.hm-scb { background: var(--cz-card); border-radius: 18px; padding: 12px; gap: 0; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cz-blue) 45%, transparent); }
 .hm-sch { display: flex; align-items: center; gap: 8px; min-height: 28px; }
-.hm-sch > b { font-size: var(--fs-3); font-weight: 800; color: var(--cz-ink); }
-.hm-sch .of { font-size: var(--fs-2); color: var(--cz-ink3); font-weight: 600; }
+.hm-sch > b { font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-row); }
+.hm-sch .of { font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); line-height: var(--lh-label); }
 .hm-sch .hm-wf { display: inline-flex; align-items: center; justify-content: center; padding: 3px; margin-left: 2px; border: 0; border-radius: 9px; background: none; cursor: pointer; color: inherit; }
 .hm-sch .hm-wf:hover, .hm-sch .hm-wf[aria-expanded="true"] { background: var(--cz-well); }
-.hm-sct { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-2); color: var(--cz-ink3); font-weight: 600; white-space: nowrap; }
+.hm-sct { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); white-space: nowrap; line-height: var(--lh-label); }
 .hm-sct.over { color: var(--cz-risk); }
 .hm-bars.hm-scbars { margin: 10px 0 8px; }
 .hm-bars.hm-scbars i { position: relative; } .hm-bars.hm-scbars i::after { content: ""; position: absolute; inset: -6px 0; }   /* a taller hover target for the stage name */
 .hm-bars.hm-scbars i.skip { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--cz-ink3) 40%, transparent) 0 4px, transparent 4px 7px); }
 .hm-scl { border-top: 1px solid var(--cz-hair); padding-top: 8px; margin-top: 2px; }
-.hm-scwhy { margin: 0; padding: 4px 0 2px 34px; font-size: var(--fs-2); color: var(--cz-ink3); }
-.hm-scb > .hm-none { margin: 4px 0 0; font-size: var(--fs-2); color: var(--cz-ink3); }
+.hm-scwhy { margin: 0; padding: 4px 0 2px 34px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.hm-scb > .hm-none { margin: 4px 0 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 /* the move sheet: Move now and Back as two quiet buttons, side by side on a desktop, stacked on the phone */
 .hi-nxa { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--cz-hair); }
 .hi-nxa .hi-btn { flex: 1; justify-content: center; height: 40px; border-radius: 12px; }
-.hi-pop .hi-swl { font-size: var(--fs-3); font-weight: 700; color: var(--cz-ink); min-height: 44px; }
+.hi-pop .hi-swl { font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); min-height: 44px; line-height: var(--lh-row); }
 .hi-pop .hi-swl > span { flex: 1; }
 .hi-pop .hi-sw { width: 44px; height: 28px; }
 .hi-pop .hi-sw::after { top: 4px; left: 4px; width: 20px; height: 20px; }
@@ -178,6 +178,6 @@ button.hi-pill { cursor: pointer; }
   .hi-pop .hi-sw[aria-checked="true"]::before, .hi-v .hi-sw[aria-checked="true"]::before, :root[data-theme="dark"] .hi-pop .hi-sw[aria-checked="true"]::before, :root[data-theme="dark"] .hi-v .hi-sw[aria-checked="true"]::before { background: var(--cz-blue); }
   .hi-pop .hi-sw::after, .hi-v .hi-sw::after { top: 12px; z-index: 1; background: var(--cz-onsolid); }
   .hi-pop.sheet .hi-nxa { flex-direction: column; border-top: 0; padding-top: 0; }
-  .hi-pop.sheet .hi-nxa .hi-btn { height: 48px; border-radius: 14px; font-size: var(--fs-3); font-weight: 800; }
-  .hi-pop.sheet .hi-h3 { font-size: var(--fs-4); }
+  .hi-pop.sheet .hi-nxa .hi-btn { height: 48px; border-radius: 14px; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
+  .hi-pop.sheet .hi-h3 { font-size: var(--fs-body); line-height: var(--lh-body); }
 }

package/workspace/public/pm/home-line.css

@@ -7,19 +7,19 @@
 .pl-row { display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 2px 4px 2px 0; }
 .pl-hit { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px 0 14px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 14px; }
 .pl-hit:focus-visible, .pl-stop:focus-visible, .pl-ib:focus-visible, .pl-dvb:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
-.pl-t { flex: 1; min-width: 0; font-size: var(--fs-3); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.pl-t { flex: 1; min-width: 0; font-size: var(--fs-row); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-row); }
 .hm-pl.open .pl-t { white-space: normal; }
 .hm-pl.you .pl-t, .hm-goalq .pl-t { color: var(--cz-blueink); }
-.pl-n { flex: none; font-size: var(--fs-2); font-weight: 600; color: var(--cz-ink3); }
+.pl-n { flex: none; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
 .pl-cv { flex: none; display: inline-flex; color: var(--cz-ink3); }
 .pl-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cz-blue); }
 .pl-clk { display: inline-flex; color: var(--cz-ink3); }
 .pl-stop { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
 .pl-body { padding: 0 14px 12px; }
-.pl-head { margin: 0 0 10px; font-size: var(--fs-2); color: var(--cz-ink3); line-height: 1.4; }
+.pl-head { margin: 0 0 10px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: 1.4; }
 .pl-sl { margin-top: 2px; }
-.pl-now { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-2); min-width: 0; }
-.pl-now b { flex: none; font-weight: 800; }
+.pl-now { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-meta); min-width: 0; line-height: var(--lh-meta); }
+.pl-now b { flex: none; font-weight: var(--fw-strong); }
 .pl-nt { min-width: 0; color: var(--cz-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .hm-pl.open .pl-nt { white-space: normal; }
 .pl-acts { display: flex; gap: 8px; margin-top: 10px; }
@@ -29,10 +29,10 @@
 /* the Viewer (a desktop) */
 .pl-vw { padding: 16px 20px; }
 .pl-vwh { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
-.pl-vwh b { flex: 1; min-width: 0; font-size: var(--fs-4); font-weight: 800; line-height: 1.3; }
+.pl-vwh b { flex: 1; min-width: 0; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: 1.3; }
 
 /* the divider where a run finished */
-.pl-dv { display: flex; align-items: center; gap: 10px; margin: 4px 0; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); }
+.pl-dv { display: flex; align-items: center; gap: 10px; margin: 4px 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
 .pl-dv .ln { flex: 1; height: 1px; background: var(--cz-hair); }
 .pl-dv.stop { color: var(--cz-risk); }
 .pl-dvb { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; border-radius: 10px; }

package/workspace/public/pm/impact.css

@@ -2,24 +2,24 @@
  * leaf outside Adler's sprout. Colours are the --cz-* tokens of cozy.css, type is the var(--fs-N) scale. */
 .im { display: flex; flex-direction: column; gap: 14px; font-family: var(--cz-sans); color: var(--cz-ink); }
 .im-hd { display: flex; flex-direction: column; gap: 4px; }
-.im-hd b { font-size: var(--fs-5); font-weight: 800; letter-spacing: -.01em; }
-.im-hd span { font-size: var(--fs-4); color: var(--cz-ink2); }
+.im-hd b { font-size: var(--fs-display); font-weight: var(--fw-strong); letter-spacing: -.01em; line-height: var(--lh-display); }
+.im-hd span { font-size: var(--fs-body); color: var(--cz-ink2); line-height: var(--lh-body); }
 .im-card { background: var(--cz-card); border: 1px solid var(--cz-hair); border-radius: 18px; padding: 4px 16px; }
 .im-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; border-top: 1px solid var(--cz-hair); }
 .im-row:first-child { border-top: 0; }
 .im-tile { width: 36px; height: 36px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--cz-well); color: var(--cz-ink2); }
 .im-tile.b { background: var(--cz-bluebg); color: var(--cz-blue); }
 .im-tile.g { background: var(--cz-okbg); color: var(--cz-ok); }
-.im-av { width: 36px; height: 36px; border-radius: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-3); background: var(--cz-well); color: var(--cz-ink); }
+.im-av { width: 36px; height: 36px; border-radius: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-strong); font-size: var(--fs-row); background: var(--cz-well); color: var(--cz-ink); line-height: var(--lh-row); }
 .im-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
-.im-t { font-size: var(--fs-4); font-weight: 400; }
-b.im-t { font-weight: 700; }
-.im-s { font-size: var(--fs-3); color: var(--cz-ink2); }
+.im-t { font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); }
+b.im-t { font-weight: var(--fw-strong); }
+.im-s { font-size: var(--fs-body); color: var(--cz-ink2); line-height: var(--lh-body); }
 .im-ib { width: 44px; height: 44px; border-radius: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--cz-well); color: var(--cz-ink2); text-decoration: none; }
-.im-lock { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-3); color: var(--cz-ink2); }
+.im-lock { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-body); color: var(--cz-ink2); line-height: var(--lh-body); }
 .im-wk { display: flex; flex-direction: column; gap: 8px; }
 .im-wk.quiet { flex-direction: row; align-items: baseline; gap: 10px; padding: 4px 0; }
-.im-wl { font-size: var(--fs-2); font-weight: 800; letter-spacing: .02em; color: var(--cz-ink2); flex: none; }
+.im-wl { font-size: var(--fs-label); font-weight: var(--fw-strong); letter-spacing: .02em; color: var(--cz-ink2); flex: none; line-height: var(--lh-label); }
 .im-row .im-wl { width: 64px; }
 .im-wk summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; border-radius: 12px; }
 .im-wk summary::-webkit-details-marker { display: none; }
@@ -31,7 +31,7 @@ b.im-t { font-weight: 700; }
 .im-made { margin-top: 18px; }
 .im-win { margin-bottom: 12px; border-radius: 18px; overflow: hidden; }
 .im-ch { margin: 12px 0; }
-.im-mt { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: var(--fs-3); color: var(--cz-ink2); }
+.im-mt { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: var(--fs-body); color: var(--cz-ink2); line-height: var(--lh-body); }
 .im-face { width: 40px; height: 44px; border: 0; padding: 0; margin: 0 -4px 0 0; background: none; border-radius: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
 .im-face .ad-svg.hv-ad { width: 36px; height: 36px; }
 @media (hover: hover) { .im-ib:hover, .im-face:hover, .im-wk summary:hover { background: var(--cz-well2); } }