create-pmos 0.128.0 → 0.130.0

package/workspace/public/pm/c3-brief-pulse.js

@@ -0,0 +1,70 @@
+/* pm/c3-brief-pulse.js — the Briefing's "Portfolio pulse" (PRD briefing-brief R5, R6).
+ * One status bar and a row per initiative (the Calendar's own gantt rows, GET /api/calendar-views quarter, c3-plan.js readQuarter; the demo's pulse rows
+ * carry their own colour and reason). A row opens in place with the case component the Needs you rows use (c3-expand + c3-case): why it is where it
+ * is, promised against forecast. A press on a row does NOT change the tab. "Open initiative" is an explicit link inside the opened row and is the only
+ * thing here that does. Rows are references (data-ref-row): nothing in them changes a record. */
+import { el } from './dom.js';
+import { c3ic } from './pm-work-view.js';
+import { makeXp, attachExpand } from './c3-expand.js';
+import { caseFile } from './c3-brief.js';
+import { readQuarter } from './c3-plan.js';
+import { row, signal, ensureComponentsCss } from './primitives.js';
+
+/* tone: ok is neutral, warn is the warning token, bad the destructive one (R28-12) */
+const PST = { 'on time': ['ok', 'On time'], 'at risk': ['warn', 'At risk'], delayed: ['bad', 'Delayed'], overdue: ['bad', 'Overdue'], 'no plan': ['', 'No plan'] };
+const RAG = { red: ['bad', 'Off track'], amber: ['warn', 'At risk'], green: ['ok', 'On track'], park: ['', 'Parked'] };
+const SIG = { bad: 'destructive', warn: 'warning' };
+const end = (o) => (o && (o.end || o.start)) || null;
+
+/** One gantt row as the pulse draws it: { id, title, cls, word, color, why, evidence }. Pure. */
+export function pulseRow(g) {
+  if (g.pulse && RAG[g.pulse.c]) {
+    const [cls, word] = RAG[g.pulse.c];
+    const ev = [];
+    if (g.promised) ev.push(['target', 'Promised ' + g.promised, 'Plan', cls === 'bad' ? 'bad' : cls === 'warn' ? 'warn' : '']);
+    return { id: g.id, title: g.title || g.id, cls, word, why: g.pulse.why, evidence: ev };
+  }
+  const k = PST[g.status] ? g.status : 'no plan'; const f = end(g.forecast); const p = g.promised || null;
+  const why = p ? 'Forecast ' + (f || 'not set') + ' vs promised ' + p : 'No promised date' + (f ? '; forecast ' + f : '');
+  const ev = [];
+  if (p) ev.push(['target', 'Promised ' + p, 'Plan']);
+  if (f) ev.push(['clock', 'Forecast ' + f, 'Plan', PST[k][0] === 'bad' ? 'bad' : PST[k][0] === 'warn' ? 'warn' : '']);
+  if (g.slip_days > 0) ev.push(['alert', 'Slipping by ' + g.slip_days + ' d', 'Plan', 'warn']);
+  return { id: g.id, title: g.title || g.id, cls: PST[k][0], word: PST[k][1] + (g.slip_days > 0 ? ' +' + g.slip_days + ' d' : ''), why, evidence: ev };
+}
+
+export function pulseCase(r) {
+  return { id: 'pulse:' + r.id, tc: r.cls === 'bad' ? 'var(--destructive)' : r.cls === 'warn' ? 'var(--warning)' : 'var(--muted-foreground)', sit: r.why, chg: r.evidence, opts: [], go: ['goinit', r.id, 'Open initiative'], cta: '' };
+}
+
+export function pulse(S) {
+  ensureComponentsCss();
+  const body = el('div', null, el('p', { class: 'dim mono c3s2' }, 'Reading the initiatives.'));
+  const box = el('section', { class: 'card pulsecard', 'data-c3pg': 'pulse' },
+    el('div', { class: 'pulsehead' },
+      el('h3', null, c3ic('init', 'sm'), 'Portfolio pulse'), el('span', { class: 'mono dim c3s2' }, 'promised vs forecast')), body);
+  const note = (t, ic) => el('div', { class: 'fold' }, c3ic(ic || 'moon', 'sm'), t);
+  const draw = (rows, err) => {
+    if (err) { body.replaceChildren(el('p', { class: 'dim mono c3s2', role: 'status' }, 'The initiatives could not be read: ' + err)); return; }
+    if (!rows.length) { body.replaceChildren(note('No initiative has a promised date yet, so there is nothing to compare with the forecast.')); return; }
+    const noPlan = rows.filter((g) => !g.pulse && g.status === 'no plan').length;
+    rows = rows.filter((g) => g.pulse || g.status !== 'no plan');
+    if (!rows.length) { body.replaceChildren(note('No initiative has a promised date yet, so there is nothing to compare with the forecast.'), ...(noPlan ? [el('p', { class: 'dim mono c3s2' }, noPlan + ' initiatives have no plan date.')] : [])); return; }
+    const pr = rows.map(pulseRow);
+    const by = new Map(); pr.forEach((r) => { const k = r.word.replace(/ \+.*/, ''); const o = by.get(k) || { n: 0, cls: r.cls }; o.n += 1; by.set(k, o); });
+    const bar = el('div', { class: 'pbs', role: 'group', 'aria-label': 'Status of initiatives' },
+      ...[...by.entries()].map(([k, v]) => { const seg = el('span', { class: 'pb-seg pb-' + (v.cls || 'mute'), title: v.n + ' ' + k.toLowerCase(), 'aria-label': v.n + ' ' + k.toLowerCase() }); seg.style.setProperty('--fr-grow', String(v.n)); return seg; }));
+    const rowEl = (r) => {
+      const xp = makeXp(caseFile(pulseCase(r)));
+      let ex = null;
+      const head = row({ title: r.title, meta: [r.why], signals: [signal({ text: r.word, tone: SIG[r.cls] || 'muted' })], openLabel: r.title + ': ' + r.word, onOpen: () => ex.toggle(), openAttrs: { 'data-c3pg-prow': r.id } });
+      ex = attachExpand(head, xp, { key: 'pulse-' + r.id });
+      return el('div', { class: 'pwrap', 'data-ref-row': '', 'data-pulse-row': r.id }, head, xp);
+    };
+    body.replaceChildren(...[bar, el('div', null, ...pr.slice(0, 8).map(rowEl)), pr.length > 8 ? el('div', { class: 'dim mono c3s2' }, '+' + (pr.length - 8) + ' more in the Calendar tab') : null, noPlan ? el('div', { class: 'dim mono c3s2' }, noPlan + ' more have no plan date.') : null].filter(Boolean));
+  };
+  readQuarter().then((j) => {
+    if (!j || j.ok === false) draw([], (j && j.error) || 'unreadable'); else { S.today = j.today || ''; draw(j.gantt || []); }
+  }).catch((e) => draw([], String((e && e.message) || e)));
+  return box;
+}

package/workspace/public/pm/c3-brief-today.js

@@ -0,0 +1,44 @@
+/* pm/c3-brief-today.js — the Briefing's "Today": the agenda of today's meetings (PRD briefing-brief R2).
+ * One row per meeting, in time order, from GET /api/brief-page: its time and length, the people, the initiative, what PMOS holds as PREPARED
+ * (documents, notes) and what the PM must do BEFORE the meeting (own items that name it). A meeting with nothing held says "Nothing prepared
+ * yet". A meeting that is over is dimmed; the one under way is marked Now, the next one Next.
+ * Rows are REFERENCES (data-ref-row): they carry no control that changes a record. The record's actions are in Needs you and on its own page. */
+import { el } from './dom.js';
+import { c3ic } from './pm-work-view.js';
+import { onBriefPage } from './c3-brief-data.js';
+
+const p2 = (n) => String(n).padStart(2, '0');
+const hm = (iso) => { const d = new Date(iso); return p2(d.getHours()) + ':' + p2(d.getMinutes()); };
+
+export function meetingRow(m) {
+  const marks = { now: 'Now', next: 'Next' };
+  const prep = m.prepared && m.prepared.length
+    ? el('ul', { class: 'tl', role: 'list', 'aria-label': 'Prepared' }, ...m.prepared.map((x) => el('li', { 'data-prep': x.kind }, c3ic(x.kind === 'prep' ? 'spark' : 'doc', 'sm'), x.text)))
+    : el('p', { class: 'dim c3s2', 'data-prep': 'none' }, c3ic('moon', 'sm'), 'Nothing prepared yet');
+  const bef = m.before && m.before.length
+    ? el('ul', { class: 'tl', role: 'list', 'aria-label': 'Before the meeting' }, ...m.before.map((x) => el('li', { 'data-before': x.id }, c3ic('todo', 'sm'), x.title, x.due ? el('span', { class: 'mono dim' }, ' · due ' + x.due) : null)))
+    : el('p', { class: 'dim c3s2', 'data-before': 'none' }, 'Nothing to do before it.');
+  return el('li', { class: 'trow ' + m.state, 'data-ref-row': '', 'data-today-row': m.id, 'data-state': m.state },
+    el('div', { class: 'tm mono' }, hm(m.start), el('div', { class: 'dim c3s2' }, m.minutes ? m.minutes + ' min' : 'no end')),
+    el('div', { class: 'tb' },
+      el('div', { class: 'chips2' }, el('b', { class: 'tt' }, m.title), marks[m.state] ? el('span', { class: 'st ' + (m.state === 'now' ? 'ok' : ''), 'data-mark': m.state }, marks[m.state]) : null),
+      el('div', { class: 'chips2 dim c3s2' },
+        m.people && m.people.length ? el('span', { class: 'chip2', 'data-people': '' }, c3ic('user', 'sm'), m.people.join(', ')) : null,
+        m.initiative ? el('span', { class: 'chip2', 'data-init': '' }, c3ic('init', 'sm'), m.initiative) : null),
+      el('div', { class: 'tcols' }, el('div', null, el('div', { class: 'lab mono' }, 'Prepared'), prep), el('div', null, el('div', { class: 'lab mono' }, 'Before the meeting'), bef))));
+}
+
+export function todaySection() {
+  const list = el('ul', { class: 'list', role: 'list' });
+  const count = el('span', { class: 'bdg g' }, '0');
+  const box = el('section', { class: 'card sect', 'data-c3pg': 'today', 'aria-label': 'Today' },
+    el('div', { class: 'sh2' }, el('h2', null, c3ic('cal', 'sm'), 'Today ', count)), list);
+  list.replaceChildren(el('li', { class: 'fold', 'data-today-state': 'loading' }, c3ic('clock', 'sm'), 'Reading today\'s meetings.'));
+  onBriefPage((j) => {
+    if (!j || j.ok === false) { count.textContent = '0'; list.replaceChildren(el('li', { class: 'fold', role: 'status', 'data-today-state': 'error' }, c3ic('alert', 'sm'), 'Today\'s meetings could not be read: ' + ((j && j.error) || 'unreadable'))); return; }
+    const t = j.today || [];
+    count.textContent = String(t.length);
+    list.replaceChildren(...(t.length ? t.map(meetingRow) : [el('li', { class: 'fold', 'data-today-state': 'empty' }, c3ic('moon', 'sm'), 'No meetings today in the calendar PMOS holds.')]));
+  });
+  return box;
+}

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

@@ -0,0 +1,103 @@
+/* pm/c3-calpop.js — the calendar as a popup over any page of the console (briefing-brief PRD R7, R9).
+ *
+ *   mountCalPopupTrigger(toolsHost)   adds the calendar button to the top bar's tools, and binds the key C (once)
+ *   openCalendarPopup(opener?)        opens the full calendar (five zooms, no ribbon) in a dialog over the page
+ *   closeCalendarPopup(back?)         closes it; `back` (default true) returns the focus to where it was
+ *   lastZoom()                        the zoom last used, "day" until the PM changes it
+ *
+ * The popup mounts calendar-views.js mountCalendarViews on a host of its own, so it never shares state with the Calendar tab
+ * (mountCalendarViews keys its state on the host element). Closing calls disposeCalendarViews on that host, which removes
+ * the view's own key handler. The dialog is data-shell="calpop", not "sheet", so the view's + and - keys keep working inside it;
+ * the Calendar tab's instance steps aside while the popup is open (calendar-views.js onKey).
+ * Not open on load. Escape, a press on the scrim and the close button close it. Tab stays inside. On a phone it is full screen.
+ * The zoom is kept in module state; localStorage only inside try/catch, as a convenience.
+ */
+import { el } from './dom.js';
+import { ensureC3Css, c3ic, c3ib, c3Phone } from './pm-work-view.js';
+import { mountCalendarViews, disposeCalendarViews } from './calendar-views.js';
+
+const ZOOMS = ['day', 'week', 'month', 'quarter', 'year'];
+const KEY = 'pmos.c3.calpop.zoom';
+const store = {
+  get() { try { return localStorage.getItem(KEY); } catch { return null; } },
+  set(v) { try { localStorage.setItem(KEY, v); } catch { /* no storage */ } },
+};
+let zoom = ZOOMS.includes(store.get()) ? store.get() : 'day';
+let cur = null;        // { wrap, host, opener, off, obs, stopPhone }
+let keyBound = false;
+
+export const lastZoom = () => zoom;
+export const isCalendarPopupOpen = () => !!cur;
+
+/** The zoom the view is on now: its pressed Day/Week/... button. */
+function readZoom(host) {
+  const b = host.querySelector('[data-cv-view][aria-pressed="true"],[data-cv-view][aria-selected="true"],[data-cv-view][aria-current="true"]');
+  const v = b && b.getAttribute('data-cv-view');
+  return ZOOMS.includes(v) ? v : null;
+}
+
+const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+
+export function closeCalendarPopup(back = true) {
+  if (!cur) return;
+  const c = cur; cur = null;
+  const z = readZoom(c.host); if (z) { zoom = z; store.set(z); }
+  document.removeEventListener('keydown', c.onKey, true);
+  if (c.obs) c.obs.disconnect();
+  if (c.stopPhone) c.stopPhone();
+  try { disposeCalendarViews(c.host); } catch { /* already gone */ }
+  c.wrap.remove();
+  if (back && c.opener && c.opener.isConnected && c.opener.focus) { try { c.opener.focus({ preventScroll: true }); } catch { /* not focusable any more */ } }
+}
+
+export function openCalendarPopup(opener) {
+  if (cur) return;
+  ensureC3Css();
+  const from = opener || (document.activeElement && document.activeElement !== document.body ? document.activeElement : document.querySelector('[data-c3pg="calendar"]'));
+  const close = () => closeCalendarPopup(true);
+  const host = el('div', { class: 'calpop-host', 'data-c3pg': 'calpop-host' });
+  const closeBtn = c3ib('Close', 'x', { title: 'Close (Esc)', 'data-c3pg': 'calpop-close', onclick: close }, 'sm');
+  const head = el('div', { class: 'sh2' }, el('span', { class: 'chips2' }, c3ic('cal'), el('b', null, 'Calendar')), el('span', { class: 'chips2' }, closeBtn));
+  const dlg = el('div', { class: 'sheet bs calpop', role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Calendar', tabindex: '-1', 'data-c3pg': 'calpop' },
+    el('div', { class: 'grab' }), head, el('div', { class: 'sb' }, host));
+  const wrap = el('div', { class: 'c3 c3e c3pop', 'data-shell': 'calpop' }, el('div', { class: 'scrim', onclick: close }), dlg);
+  const stopPhone = c3Phone(wrap);
+  const onKey = (e) => {
+    if (e.key === 'Escape') { e.stopPropagation(); e.preventDefault(); close(); return; }
+    if (e.key !== 'Tab') return;
+    const items = [...dlg.querySelectorAll(FOCUSABLE)].filter((n) => n.offsetWidth > 0 || n.offsetHeight > 0 || n === document.activeElement);
+    if (!items.length) { e.preventDefault(); dlg.focus(); return; }
+    const at = items.indexOf(document.activeElement);
+    if (at < 0 || (e.shiftKey && at === 0) || (!e.shiftKey && at === items.length - 1)) { e.preventDefault(); items[e.shiftKey ? items.length - 1 : 0].focus(); }
+  };
+  document.addEventListener('keydown', onKey, true);
+  document.body.appendChild(wrap);
+  cur = { wrap, host, opener: from, onKey, stopPhone, obs: null };
+  mountCalendarViews(host, { view: zoom, scope: undefined });
+  /* remember the zoom as it changes, so a reload of the page also keeps it */
+  cur.obs = new MutationObserver(() => { const z = readZoom(host); if (z) { zoom = z; store.set(z); } });
+  cur.obs.observe(host, { subtree: true, childList: true, attributes: true, attributeFilter: ['aria-pressed'] });
+  dlg.focus({ preventScroll: true });
+}
+
+const typing = (n) => !!(n && n.matches && n.matches('input,textarea,select,[contenteditable],[contenteditable="true"]'));
+const otherSheet = () => !!document.querySelector('[data-shell="sheet"],[data-shell="preview"],[data-shell="palette"]');
+
+function onC(e) {
+  if (e.key !== 'c' && e.key !== 'C') return;
+  if (e.ctrlKey || e.metaKey || e.altKey || e.defaultPrevented || e.repeat) return;
+  if (cur) return;                                     // open already: Escape closes it
+  if (typing(document.activeElement) || typing(e.target) || otherSheet()) return;
+  e.preventDefault();
+  openCalendarPopup();
+}
+
+/** The calendar button, last before the search button; and the key C. Call once, with the top bar's tools element. */
+export function mountCalPopupTrigger(toolsHost) {
+  if (!keyBound) { keyBound = true; document.addEventListener('keydown', onC, true); }
+  if (!toolsHost || toolsHost.querySelector('[data-c3pg="calendar"]')) return null;
+  const btn = c3ib('Calendar (C)', 'cal', { 'aria-haspopup': 'dialog', 'data-c3pg': 'calendar', onclick: (e) => openCalendarPopup(e.currentTarget) });
+  const search = toolsHost.querySelector('[data-c3pg="search"]');
+  if (search) toolsHost.insertBefore(btn, search); else toolsHost.append(btn);
+  return btn;
+}

package/workspace/public/pm/c3-demo-brief-page.js

@@ -0,0 +1,54 @@
+/* pm/c3-demo-brief-page.js — DEMO ONLY (/c3.html?demo=1): the Briefing's Today agenda and the own-item rows of Needs you, in the real shape of
+ * GET /api/brief-page (lib/routes-brief-page.js), for the demo day (Thu 8 Oct 2026, 08:12), with the demo's own people and initiatives.
+ * Today is the five meetings of the demo calendar (c3-demo-data.js MEET). Needs you gets two items that are overdue, one due today, and two outside-PMOS items
+ * (one with evidence: a meeting with Dara is booked today). Decisions are the demo briefing's own needs (c3-demo-data.js NEEDS), not repeated here.
+ * Writes: the pm-items routes the rows call (done, notyet, remove, reopen, undo) are answered in memory, and every one is kept in window.__c3demoWrites
+ * ({ path, body }) so a test can see what the page asked to write. Real mode never loads this file. */
+const iso = (h, m) => new Date(2026, 9, 8, h, m).toISOString();
+const TODAY = [
+  { id: 'm1', title: 'Standup', start: iso(9, 30), end: iso(10, 0), people: ['Dara', 'Lee', 'Sam'], initiative: 'Checkout v2', prepared: [], before: [] },
+  { id: 'm2', title: 'Checkout sync', start: iso(10, 30), end: iso(11, 15), people: ['Priya', 'Dara'], initiative: 'Checkout v2',
+    prepared: [{ kind: 'prep', text: 'Prep note: sandbox keys are 2 days late; Jira says 24 Oct, the PRD says 31 Oct.' }, { kind: 'last-note', text: 'Last notes: Checkout sync (2026-10-05)' }],
+    before: [{ id: 'i2', title: 'Confirm the 1 Oct numbers before the 10:30 update', due: '2026-10-08' }] },
+  { id: 'm3', title: 'Customer interview', start: iso(13, 0), end: iso(14, 0), people: ['Marta'], initiative: 'Returns experience',
+    prepared: [{ kind: 'prep', text: 'Interview guide draft is in Review.' }], before: [{ id: 'i6', title: 'Review the 13:00 interview guide', due: '2026-10-08' }] },
+  { id: 'm4', title: 'Sprint planning', start: iso(14, 0), end: iso(15, 0), people: ['Dara', 'Priya', 'Sam'], initiative: 'Checkout v2', prepared: [],
+    before: [{ id: 'i1', title: 'Cut Checkout v2 to 3 core flows to hold 24 Oct?', due: '2026-10-08' }] },
+  { id: 'm5', title: 'Leadership update', start: iso(16, 30), end: iso(17, 0), people: ['Priya', 'Marta'], initiative: null,
+    prepared: [{ kind: 'last-note', text: 'Last notes: Leadership update (2026-10-01)' }], before: [] },
+];
+const NEEDS = [
+  { key: 'item:bp-od1', kind: 'overdue', id: 'bp-od1', headline: 'Send Priya the revised Checkout v2 date', due: '2026-10-06', days_late: 2, priority: 'P1', person: 'Priya', offline: false, evidence: null },
+  { key: 'item:bp-od2', kind: 'overdue', id: 'bp-od2', headline: 'Ask Lee to book the design vendor call', due: '2026-10-07', days_late: 1, priority: 'P2', person: 'Lee', offline: true, evidence: null },
+  { key: 'item:bp-dt1', kind: 'due-today', id: 'bp-dt1', headline: 'Send Lee the pricing-page feedback', due: '2026-10-08', days_late: 0, priority: 'P2', person: null, offline: false, evidence: null },
+  { key: 'item:bp-of1', kind: 'offline', id: 'bp-of1', headline: 'Talk to Dara about the flow 4 estimate', due: null, days_late: 0, priority: 'P2', person: 'Dara', offline: true,
+    evidence: { text: 'a meeting with Dara is booked Thu 14:00', event_id: 'm4' } },
+];
+
+let gone = {};
+export function installBriefPage() {
+  if (window.__c3demoBriefPage) return; window.__c3demoBriefPage = true;
+  window.__c3demoWrites = [];
+  const prev = window.fetch.bind(window);
+  const json = (b) => new Response(JSON.stringify(b), { status: 200, headers: { 'content-type': 'application/json' } });
+  window.fetch = (input, init) => {
+    try {
+      const raw = typeof input === 'string' ? input : input instanceof URL ? input.href : input && input.url;
+      const u = new URL(raw, location.origin);
+      const method = String((init && init.method) || (input && input.method) || 'GET').toUpperCase();
+      if (u.origin === location.origin) {
+        if (method === 'GET' && u.pathname === '/api/brief-page') return Promise.resolve(json({ ok: true, date: '2026-10-08', today: TODAY.map((m) => ({ ...m, minutes: (Date.parse(m.end) - Date.parse(m.start)) / 60000, state: Date.parse(m.end) <= Date.now() ? 'past' : 'later' })).map((m, i, a) => ({ ...m, state: m.state === 'past' ? 'past' : (a.findIndex((x) => x.state !== 'past' && Date.parse(x.start) > Date.now()) === i ? 'next' : 'later') })), needs: NEEDS.filter((n) => !gone[n.id]) }));
+        const m = /^\/api\/pm-items\/(done|notyet|remove|reopen|undo)$/.exec(u.pathname);
+        if (method !== 'GET' && m) {
+          let b = {}; try { b = init && init.body ? JSON.parse(init.body) : {}; } catch { b = {}; }
+          if (NEEDS.some((n) => n.id === b.id)) {
+            window.__c3demoWrites.push({ path: u.pathname, body: b });
+            if (m[1] === 'reopen' || m[1] === 'undo') delete gone[b.id]; else gone[b.id] = m[1];
+            return Promise.resolve(json({ ok: true }));
+          }
+        }
+      }
+    } catch { /* an unreadable request goes on as it is */ }
+    return prev(input, init);
+  };
+}

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

@@ -111,4 +111,4 @@ export function demoPill() {
 }
 
 export const DEMO_WS = D.WS_ID;
-export function installDemo() { freezeClock(); install(); installRep3(); installInit(); import('./c3-demo-rep2.js').then((m) => m.installRep2()); window.__c3demo = true; window.__c3demoReady = import('./c3-demo-brief-ix.js').then((m) => m.installBriefIx()).then(() => import('./c3-demo-misc2.js')).then((m) => m.installMisc2()); }   // Briefing case files, people and a simulated agent (c3-shell.js waits for __c3demoReady)
+export function installDemo() { freezeClock(); install(); installRep3(); installInit(); import('./c3-demo-rep2.js').then((m) => m.installRep2()); window.__c3demo = true; window.__c3demoReady = import('./c3-demo-brief-ix.js').then((m) => m.installBriefIx()).then(() => import('./c3-demo-misc2.js')).then((m) => m.installMisc2()).then(() => import('./c3-demo-brief-page.js')).then((m) => m.installBriefPage()); }   // Briefing case files, people and a simulated agent (c3-shell.js waits for __c3demoReady)

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

@@ -1,8 +1,7 @@
 /* pm/c3-shell.js — the console3 SHELL as its own page (/c3.html). The mockup (console3.html) is the UI: the header (title and date,
  * the icon buttons, the bell), the tab bar (Briefing, Calendar, Work, Initiatives, Reports) and the three-column Briefing. This
  * file draws only the frame and composes the real views into it, each through its own mount function:
- *   Briefing    left   mountBriefing (day-part bar and deck) + a "Needs you" list of the same cards as rows
- *               middle mountCalendarViews (day) + a portfolio pulse drawn from the Calendar's own gantt rows
+ *   Briefing    one column, the brief: the deck (mountBriefing), Today (c3-brief-today.js), Needs you (c3-brief-needs.js), Portfolio pulse (c3-brief-pulse.js)
  *               right  the dock (c3-dock.js): the repository, branch and session tree, the selected session's detail, "Open the session" to /
  *   Every tab but Briefing also carries the mockup's "Plan: Decide what gates the day" lens row and deck (c3-plan.js planNode).
  *   Calendar    mountCalendarViews          Work   mountPmWork
@@ -17,6 +16,10 @@ import { pmGet } from './http.js';
 import { ensureC3Css, c3ic, c3Phone, mountPmWork } from './pm-work-view.js';
 import { mountBriefing, showCard, flipBack } from './briefing-deck.js';
 import { mountCalendarViews } from './calendar-views.js';
+import { todaySection } from './c3-brief-today.js';
+import { needsSection } from './c3-brief-needs.js';
+import { pulse } from './c3-brief-pulse.js';
+import { loadBriefPage } from './c3-brief-data.js';
 import { mountLifecycle } from './lifecycle-lens.js';
 import { mountForecast } from './timeline-forecast-view.js';
 import { mountReleases } from './releases-view.js';
@@ -24,11 +27,11 @@ import { mountReportFamilies } from './report-families-view.js';
 import { mountReports } from './c3-reports.js';
 import { mountOutbox } from './outbox-panel.js';
 import { createDock } from './c3-dock.js';
-import { belowLine, reviewSection, handledRow, trustCard, footLine, needRow, rowApi, BX, toast, setNeedsTitle, caseFile, hooks as briefHooks } from './c3-brief.js';
-import { makeXp, attachExpand } from './c3-expand.js';
+import { reviewSection, handledRow, trustCard, footLine, rowApi, BX, toast, setNeedsTitle, hooks as briefHooks } from './c3-brief.js';
 import { stopCard } from './c3-misc-panels.js';
 import { openSheet } from './c3-sheet.js';
-import { planNode, setPlanScope, dueCard, crossLinks, newInitLine, portfolioCard, readQuarter, mockPulse } from './c3-plan.js';
+import { mountCalPopupTrigger } from './c3-calpop.js';
+import { planNode, setPlanScope, dueCard, crossLinks, newInitLine, portfolioCard } from './c3-plan.js';
 import { initiativesViewCtx } from './registry.js';
 import { mount as mountRoadmap } from './c3-roadmap.js';
 import { mount as mountBreakdown } from './c3-breakdown.js';
@@ -40,7 +43,7 @@ import { mountDaypart } from './c3-daypart.js';
 import { mountTicker } from './shell-ticker.js';
 import { mountBell, openBellList } from './shell-bell.js';
 import { onBriefing, loadBriefing } from './shell-ticker.js';
-import { TAG_STYLE, cardView, registry, filterPalette, rowStep } from './briefing-model.js';
+import { registry, filterPalette, rowStep } from './briefing-model.js';
 
 /* In demo mode each tab's deck asks for its own cards (the mockup draws a different deck per tab); real mode sends no scope. */
 const sc = (name) => (DEMO ? name : undefined);
@@ -99,6 +102,7 @@ function header() {
   S.bellHost = el('span', { class: 'c3pg-bell' });
   S.tools.append(S.bellHost);
   S.tools.append(ibtn('Search (Ctrl K)', 'search', { 'data-c3pg': 'search', 'aria-haspopup': 'dialog', onclick: () => openPalette() }));
+  mountCalPopupTrigger(S.tools);   // the calendar button (before Search) and the key C (c3-calpop.js)
   S.moreBtn = ibtn('More', 'more', { 'aria-haspopup': 'menu', 'aria-expanded': 'false', 'data-c3pg': 'more', onclick: toggleMore });
   S.tools.append(el('span', { class: 'c3pg-menuwrap' }, S.moreBtn));
   return el('div', { class: 'c3top' }, el('div', null, S.ttl, S.sub), S.tools);
@@ -240,130 +244,12 @@ function moveInd() {
   S.ind.style.width = b.offsetWidth + 'px'; S.ind.style.transform = 'translateX(' + b.offsetLeft + 'px)';
 }
 
-/* ── the Briefing tab: three columns ── */
-/* "Needs you": one row per need (c3-brief.js needRow). A press on a row opens its case file in place; a swipe, or the keys e and n, acts; j and k move. The rows
- * are built again only when the briefing's needs changed, so a re-read does not close an open row or a running agent. On an incident day (console3.html line 1467)
- * only the needs with a hard deadline stay. */
-function needsList() {
-  const count = el('span', { class: 'bdg g' }, '0');
-  const quick = el('span', { class: 'chips2 dim mono', style: 'font-size:var(--fs-2)' });
-  const list = el('ul', { class: 'list', role: 'list' });
-  const extra = el('div');
-  const alertHost = el('div');
-  const box = el('section', { class: 'card sect', 'data-c3pg': 'needs', 'aria-label': 'Needs you' },
-    el('div', { class: 'sh2' }, el('h2', null, c3ic('inbox', 'sm'), 'Needs you ', count)), alertHost, list, extra);
-  let sig = ''; let last = null;
-  const recount = () => {
-    const n = box.querySelectorAll('.nrow[data-needs-row]').length;
-    count.textContent = String(n);
-    if (!n && !list.querySelector('.fold')) list.replaceChildren(el('li', { class: 'fold' }, c3ic('check', 'sm'), 'Nothing needs you.'));
-  };
-  const ctx = { changed: recount };
-  const fill = (b) => {
-    last = b;
-    const inc = !!S.incident;
-    const needs = b && Array.isArray(b.needs) && b.needs.length ? b.needs.filter((n) => !BX.gone[n.key] && (!inc || n.hard)) : null;
-    const own = !needs && b && Array.isArray(b.own_needs) ? b.own_needs.filter((n) => n && !BX.gone[n.key]) : [];   // the PM's own overdue and due-today items: overdue first, above the engine's cards
-    const key = needs ? needs.map((n) => n.key + n.headline) : own.map((n) => n.key + n.headline).concat(((b && b.cards) || []).map((c) => (c.key || '') + c.headline));
-    if (needs && S.pinNeed) { const at = needs.findIndex((n) => n.key === S.pinNeed); if (at > 0) needs.unshift(...needs.splice(at, 1)); }   // a need the banner or the bell named rides to the top of the list: shown, not folded
-    const g = JSON.stringify([key, inc, !!(b && b.kept_out), S.pinNeed || '']);
-    if (g === sig) return; sig = g;
-    alertHost.replaceChildren(...(inc ? [el('div', { class: 'incident', role: 'status', 'data-c3pg': 'incident' }, c3ic('alert', 'lg'), el('div', null, el('b', null, 'Card payments failing since 07:40'), el('div', { class: 'dim', style: 'font-size:var(--fs-3)' }, '12% of checkouts. Sam on call. Only deadlines shown.')))] : []));
-    if (needs) {
-      if (!quick.isConnected) box.querySelector('.sh2').append(quick);
-      quick.textContent = ''; quick.append(c3ic('bolt', 'sm'), needs.filter((n) => n.quick).length + ' under 2 min');
-      list.replaceChildren(...needs.slice(0, 5).map((n, i) => needRow(n, i, ctx)));   // the mockup shows five and folds the rest "below the line"
-      extra.replaceChildren(...(inc ? [] : belowLine(needs.slice(5), (n, i) => needRow(n, i + 5, ctx), b.kept_out)));
-      recount();
-      return;
-    }
-    const cards = ((b && b.cards) || []).map(cardView);
-    quick.remove();
-    const ownRows = (inc ? own.filter((n) => n.overdue) : own).map((n, i) => needRow(n, i, ctx));
-    const cardRows = cards.map((v, i) => {
-      const T = TAG_STYLE[v.tag] || TAG_STYLE['Just in'];
-      return needRow({ key: v.key || String(i), headline: v.headline, kind: v.tag, icon: T.icon, color: T.color, time: v.deadline && v.deadline.text ? v.deadline.text : null, src: v.tag, view: v }, i + ownRows.length, ctx);
-    });
-    const all = ownRows.concat(cardRows);
-    list.replaceChildren(...(all.length ? all : [el('li', { class: 'fold' }, c3ic('check', 'sm'), 'Nothing needs you.')]));
-    extra.replaceChildren();
-    count.textContent = String(all.length);
-  };
-  S.refreshNeeds = () => { sig = ''; if (last) fill(last); };
-  S.needsFill = fill;
-  onBriefing((b) => { S.brief = b; fill(b); });
-  loadBriefing();
-  return box;
-}
-
-/* portfolio pulse: the Calendar's own gantt rows (GET /api/calendar-views, quarter) as one status bar and a row per initiative */
-const PST = { 'on time': ['ok', 'On time', 'var(--success)'], 'at risk': ['warn', 'At risk', 'var(--warning)'], delayed: ['bad', 'Delayed', 'var(--destructive)'], overdue: ['bad', 'Overdue', 'var(--destructive)'], 'no plan': ['', 'No plan', 'var(--muted-foreground)'] };
-const PST_CLS = { 'on time': 'pst-ok', 'at risk': 'pst-warn', delayed: 'pst-bad', overdue: 'pst-bad', 'no plan': 'pst-none' };
-
-/* A pulse row opens in place, like a Needs you row: the same c3-expand panel and the same case component. It never changes the tab. "Open initiative" inside the case is the only way out. */
-const PULSE_OPEN = new Set();
-function pulseCase(g) {
-  const f = (g.forecast && (g.forecast.end || g.forecast.start)) || null; const p = g.promised || null;
-  const ev = [];
-  if (p) ev.push(['clock', 'Promised ' + p, '', 'ok']);
-  if (f) ev.push(['clock', 'Forecast ' + f, '', g.slip_days > 0 ? 'warn' : 'ok']);
-  if (g.slip_days > 0) ev.push(['alert', 'Slips ' + g.slip_days + ' d past the promise.', '', 'warn']);
-  const why = (g.pulse && g.pulse.why) || (p ? 'Forecast ' + (f || 'not set') + ' vs promised ' + p + '.' : 'No promised date' + (f ? '; forecast ' + f : '') + '.');
-  return caseFile({ id: 'pulse:' + g.id, sit: why, chg: ev, go: ['goinit', g.id, 'Open initiative'] });
-}
-function inlineRows(list, rows, watch) {
-  const byId = new Map(rows.map((g) => [String(g.id), g]));
-  const enhance = () => list.querySelectorAll('[data-c3pg-prow]').forEach((btn) => {
-    if (btn.hasAttribute('data-expand')) return;
-    const g = byId.get(btn.getAttribute('data-c3pg-prow')); if (!g) return;
-    const id = String(g.id); const xp = makeXp(); let built = false;
-    (btn.closest('.prow') || btn).after(xp); btn.setAttribute('data-a', 'pulsexp'); btn.setAttribute('aria-label', 'Show details: ' + (g.title || g.id));
-    attachExpand(btn, xp, { key: 'pulse-' + id, initial: PULSE_OPEN.has(id), onToggle: (on) => {
-      if (on) { PULSE_OPEN.add(id); if (!built) { built = true; xp.firstChild.append(pulseCase(g)); } } else PULSE_OPEN.delete(id);
-    } });
-  });
-  enhance();
-  if (watch) new MutationObserver(enhance).observe(list, { childList: true });
-}
-
-function pulse() {
-  const body = el('div', null, el('p', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, 'Reading the initiatives.'));
-  const box = el('section', { class: 'card', 'data-c3pg': 'pulse', style: 'gap:8px' },
-    el('div', { class: 'chips2', style: 'justify-content:space-between' },
-      el('h3', null, c3ic('init', 'sm'), 'Portfolio pulse'), el('span', { class: 'mono dim', style: 'font-size:var(--fs-1)' }, 'promised vs forecast')), body);
-  const draw = (rows, err) => {
-    if (err) { body.replaceChildren(el('p', { class: 'dim mono', style: 'font-size:var(--fs-2)', role: 'status' }, 'The initiatives could not be read: ' + err)); return; }
-    if (!rows.length) { body.replaceChildren(el('div', { class: 'fold' }, c3ic('moon', 'sm'), 'No initiative has a promised date yet, so there is nothing to compare with the forecast.')); return; }
-    if (rows.some((g) => g.pulse)) { const parts = mockPulse(rows, S.today, null); body.replaceChildren(...parts); inlineRows(parts[1], rows, true); return; }   // demo: the mockup's pulse (its own colours, reasons and mini timelines)
-    const noPlan = rows.filter((g) => g.status === 'no plan').length;
-    rows = rows.filter((g) => g.status !== 'no plan');
-    if (!rows.length) { body.replaceChildren(el('div', { class: 'fold' }, c3ic('moon', 'sm'), 'No initiative has a promised date yet, so there is nothing to compare with the forecast.'), noPlan ? el('p', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, noPlan + ' initiatives have no plan date.') : null); return; }
-    const by = {};
-    rows.forEach((g) => { const k = PST[g.status] ? g.status : 'no plan'; by[k] = (by[k] || 0) + 1; });
-    const bar = el('div', { class: 'pbs', role: 'group', 'aria-label': 'Status of initiatives' },
-      ...Object.keys(by).map((k) => el('span', { style: 'flex:' + by[k] + ';height:10px;border-radius:5px;background:' + PST[k][2], title: by[k] + ' ' + PST[k][1].toLowerCase(), 'aria-label': by[k] + ' ' + PST[k][1].toLowerCase() })));
-    const end = (o) => (o && (o.end || o.start)) || null;
-    const rowEl = (g) => {
-      const k = PST[g.status] ? g.status : 'no plan'; const f = end(g.forecast); const p = g.promised || null;
-      const why = p ? 'Forecast ' + (f || 'not set') + ' vs promised ' + p : 'No promised date' + (f ? '; forecast ' + f : '');
-      const label = 'Show details: ' + (g.title || g.id);
-      return row({ title: g.title || g.id, meta: [why], lead: [el('span', { class: 'dotc ' + PST[k][0] })],
-        trail: [el('span', { class: 'mono pst ' + PST_CLS[k] }, PST[k][1] + (g.slip_days > 0 ? ' +' + g.slip_days + ' d' : ''))],
-        onOpen: () => {}, openLabel: label, compact: true, attrs: { class: 'prow' },
-        openAttrs: { 'data-a': 'pulsexp', 'data-c3pg-prow': g.id, 'aria-label': label } });
-    };
-    const list = el('div', null, ...rows.slice(0, 8).map(rowEl)); inlineRows(list, rows, false);
-    body.replaceChildren(bar, list, rows.length > 8 ? el('div', { class: 'dim mono pnote' }, '+' + (rows.length - 8) + ' more in the Calendar tab') : null, noPlan ? el('div', { class: 'dim mono pnote' }, noPlan + ' more have no plan date.') : null);
-  };
-  readQuarter().then((j) => {
-    if (!j || j.ok === false) draw([], (j && j.error) || 'unreadable'); else { S.today = j.today || ''; draw(j.gantt || []); }
-  }).catch((e) => draw([], String((e && e.message) || e)));
-  return box;
-}
-
+/* ── the Briefing tab: one column, the brief ──
+ * In order: the headline deck, Today (c3-brief-today.js), Needs you (c3-brief-needs.js) and Portfolio pulse (c3-brief-pulse.js). The ribbon and the embedded calendar are not here:
+ * the calendar is the Calendar tab. The rows below Needs you (drafts, handled, what to stop) and the data-trust card are the briefing's own, when it carries them (the demo's). */
 function briefTab(pane) {
-  const left = el('div', { class: 'bcol l' }); const mid = el('div', { class: 'bcol r' });
-  const deckHost = el('div', { 'data-c3pg': 'deck-host' }); const calHost = el('div', { class: 'c3pg-midcal', 'data-c3pg': 'cal-host' });
+  const col = el('div', { class: 'bcol l' });
+  const deckHost = el('div', { 'data-c3pg': 'deck-host' });
   const rvHost = el('div', { 'data-c3pg': 'review-host' }); const hdHost = el('div', { 'data-c3pg': 'handled-host' }); const trHost = el('div', { 'data-c3pg': 'trust-host' }); const ftHost = el('div'); const stHost = el('div', { 'data-c3pg': 'stop-host' }); S.stopHost = stHost; S.needsBox = null;
   S.deckHost = deckHost;
   let sig = '';
@@ -374,24 +260,16 @@ function briefTab(pane) {
     stHost.replaceChildren(...[stopCard(b && b.stop)].filter(Boolean)); trHost.replaceChildren(...(b && b.trust ? [trustCard(b.trust)] : [])); ftHost.replaceChildren(...(b && b.foot ? [footLine(b.foot)] : []));
     if (S.why) whyMark();
   });
-  S.needsBox = needsList(); left.append(deckHost, S.needsBox, rvHost, hdHost, stHost);
-  mid.append(calHost, pulse(), trHost);
-  pane.append(el('div', { class: 'brief' }, el('div', { class: 'bcols' }, left, mid), ftHost));
+  S.needsBox = needsSection(S);
+  col.append(deckHost, todaySection(), S.needsBox, rvHost, hdHost, stHost, pulse(S), trHost);
+  pane.append(el('div', { class: 'brief one' }, el('div', { class: 'bcols' }, col), ftHost));
   mountBriefing(deckHost, { noTicker: true, onLens: lensChanged });
-  mountCalendarViews(calHost, { view: 'day', scope: sc('brief'), ribbon: true });
+  loadBriefPage();
 }
 
-/* The day-part switch moves the time lens as the mockup does (setTod, line 2209): Reflect shows the week, any other part goes back to today if Reflect had moved it. */
-function ribbonGo(label) {
-  const b = [...S.panes.brief.querySelectorAll('[data-cv="ribbon"] .seg button')].find((x) => x.textContent.trim() === label);
-  if (b) b.click();
-}
+/* The day-part switch: Reflect shows "Carries over" and "What I could stop" (the mockup's vBrief, line 1470). */
 function lensChanged(l) {
-  const rf = l === 'Reflect'; if (S.stopHost) S.stopHost.hidden = !rf; setNeedsTitle(S.needsBox, rf);   // Reflect: "Carries over" and "What I could stop" (the mockup's vBrief, line 1470)
-  const cur = S.panes && S.panes.brief ? S.panes.brief.querySelector('[data-cv="ribbon"] .seg [aria-pressed="true"]') : null;
-  const on = cur ? cur.textContent.trim() : '';
-  if (l === 'Reflect' && on === 'Today') { S.rAuto = true; ribbonGo('Week'); }
-  else if (l !== 'Reflect' && S.rAuto) { S.rAuto = false; ribbonGo('Today'); }
+  const rf = l === 'Reflect'; if (S.stopHost) S.stopHost.hidden = !rf; setNeedsTitle(S.needsBox, rf);
 }
 
 /* ── global: where a notification goes, the person sheet, the palette and the keys ── */
@@ -502,11 +380,6 @@ function onKey(e) {
     if (rows[ni]) rows[ni].focus();
     return;
   }
-  if ('+=-_'.includes(e.key) && e.key.length === 1) {
-    const b = S.panes.brief.querySelector('[data-cv="ribbon"] [aria-label^="Zoom ' + (e.key === '+' || e.key === '=' ? 'in' : 'out') + '"]');
-    e.stopPropagation(); if (b && !b.disabled) b.click();
-    return;
-  }
   if (cur && e.key.length === 1 && 'enar'.includes(e.key)) {
     e.stopPropagation(); e.preventDefault();
     const api = rowApi.get(cur); const draft = cur.classList.contains('drow');
@@ -633,6 +506,11 @@ function showTab(id, push) {
 async function workCount() {
   const j = await pmGet('/api/pm-items').catch(() => null);
   if (!j || !j.ok || !j.lists) return;
+  if (j.counts && typeof j.counts.inbox === 'number') {   // the Work page's own counts: what is to process (inbox) plus what is on today
+    const w = j.counts.inbox + (Number(j.counts.today) || 0);
+    S.workBdg.textContent = String(w); S.workBdg.hidden = w === 0;
+    return;
+  }
   const n = (j.lists.triage || []).length + (S.demo ? 0 : (j.lists.today || []).length);   // the mockup's Work badge counts what is to triage
   S.workBdg.textContent = String(n); S.workBdg.hidden = n === 0;
 }

package/workspace/public/pm/calendar-views.js

@@ -967,6 +967,7 @@ function wire(host, r) {
     if (!root.isConnected || !root.offsetParent) return;                         // another tab is showing
     const t = e.target; if (t && t.closest && t.closest('input,select,textarea,[contenteditable="true"]')) return;
     if (document.querySelector('[data-shell="sheet"]')) return;                  // a sheet is open
+    if (!root.closest('[data-shell="calpop"]') && document.querySelector('[data-shell="calpop"]')) return;   // the calendar popup is open: it takes the keys, not the tab behind it
     if ((e.key === '+' || e.key === '=') && zoomBy(-1)) e.preventDefault();
     else if ((e.key === '-' || e.key === '_') && zoomBy(1)) e.preventDefault();
     else if (rib) return;

package/workspace/public/pm/console3.css

@@ -1101,6 +1101,13 @@
 .c3 .sheet:focus{outline:none}
 .c3 .sheet.bs.dragging{transition:none}
 .c3 .sheet .sh2 .ib{flex:none}
+/* the calendar popup (c3-calpop.js): the sheet, centred and wide on a desktop, the whole screen on a phone */
+.c3 .sheet.calpop{left:12px;right:12px;margin-inline:auto;width:min(1100px,calc(100% - 24px))}
+.c3 .sheet.calpop .sb{padding:var(--sp-3);min-width:0}
+.c3 .calpop-host{min-width:0;max-width:100%}
+.c3.ph .sheet.calpop{top:0;left:0;right:0;bottom:0;width:auto;max-height:none;border-radius:0;margin:0}
+.c3.ph .sheet.bs.calpop{max-height:none;animation:none}
+.c3 .sheet.calpop .ib,.c3 .sheet.calpop .seg button,.c3 .sheet.calpop .tdy{min-height:44px;min-width:44px}
 @media (prefers-reduced-motion:reduce){.c3 .sheet,.c3 .scrim,.c3.ph .sheet.bs{animation:none}}
 /* a slide that cannot be used: the action goes outside and no outbox is connected. The reason sits under it (c3-case.js). */
 .c3 .slt.off{opacity:.55;--tc:var(--muted-foreground)}
@@ -1484,6 +1491,42 @@
 .c3 .psess:active{transform:scale(.93)}
 @media (max-width:760px){.c3 .psess{min-height:44px}}
 .c3 .psess .c{font:var(--fs-1) var(--mono)}
+/* Briefing as the brief (initiative briefing-brief): one column; Today agenda; own-item rows of Needs you; inline Portfolio pulse */
+.c3 .brief.one{max-width:900px}
+.c3 .brief.one .bcols{grid-template-columns:minmax(0,1fr)}
+.c3 .brief.one .bcol{display:grid;gap:16px;min-width:0}
+.c3 .c3s2{font-size:var(--fs-2)}
+.c3 .c3s3{font-size:var(--fs-3)}
+.c3 .ki.t-bad{color:var(--destructive)}
+.c3 .ki.t-warn{color:var(--warning)}
+.c3 .ki.t-ink{color:var(--foreground)}
+.c3 .trow{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;padding:10px 6px;border-bottom:1px solid var(--border);border-radius:8px}
+.c3 .trow.past{opacity:.55}
+.c3 .trow.now,.c3 .trow.next{background:var(--muted)}
+.c3 .trow .tm{font:500 var(--fs-3) var(--mono)}
+.c3 .trow .tb{display:grid;gap:6px;min-width:0}
+.c3 .trow .tt{font-size:var(--fs-3)}
+.c3 .trow .tcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
+.c3 .trow .lab{font-size:var(--fs-1);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground)}
+.c3 .trow ul{margin:2px 0 0;padding:0;list-style:none;display:grid;gap:4px;font-size:var(--fs-2)}
+.c3 .trow p{margin:2px 0 0}
+.c3 .ip{display:grid;gap:8px;padding:8px 0 4px}
+.c3 .ip .looks{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:var(--fs-2);padding:8px;border-radius:8px;background:var(--muted)}
+.c3 .ip .ioutcome{width:100%;min-height:36px;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--foreground);font:inherit;font-size:var(--fs-3)}
+.c3 .ip .iacts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
+.c3 .ip .ny{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
+.c3 .pulsecard{gap:8px}
+.c3 .pulsehead{display:flex;justify-content:space-between;align-items:center;gap:8px}
+.c3 .pbs .pb-seg{flex:var(--fr-grow,1);height:10px;border-radius:6px;background:var(--border)}
+.c3 .pbs .pb-warn{background:var(--warning)}
+.c3 .pbs .pb-bad{background:var(--destructive)}
+.c3 .pbs .pb-ok{background:var(--muted-foreground)}
+.c3 .pwrap{border-radius:8px}
+@container (max-width:520px){
+.c3 .trow{grid-template-columns:minmax(0,1fr)}
+.c3 .trow .tcols{grid-template-columns:minmax(0,1fr)}
+}
+.c3.ph .ip .ioutcome{min-height:44px}
 
 /* Time of day (console3 quick fixes R5). data-daypart is set on the page root from the clock: morning, midday, afternoon, evening or night.
  * Each part sets two tokens, both very faint: --dp-tint (a wash over the page background, alpha 6% or less) and --dp-warm (the colour of the