create-pmos 0.129.0 → 0.131.0

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');
@@ -611,7 +484,7 @@ function draftsTab(pane) {
   });
 }
 
-const BUILD = { brief: briefTab, cal: (p) => mountCalendarViews(p, { view: 'day', plan: planNode(sc('cal')), due: dueCard(), scope: sc('cal') }), work: (p) => { const plan = planNode(sc('work') && 'work:triage'); mountPmWork(p, { plan, onLens: (l) => { if (DEMO) setPlanScope(plan, 'work:' + l); } }); }, init: initTab, rep: repTab };
+const BUILD = { brief: briefTab, cal: (p) => mountCalendarViews(p, { view: 'week', page: true, scope: sc('cal') }), work: (p) => { const plan = planNode(sc('work') && 'work:triage'); mountPmWork(p, { plan, onLens: (l) => { if (DEMO) setPlanScope(plan, 'work:' + l); } }); }, init: initTab, rep: repTab };
 
 function showTab(id, push) {
   if (!BUILD[id]) id = 'brief';
@@ -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

@@ -18,6 +18,7 @@ import { renderCase } from './c3-case.js';
 import { makeXp, attachExpand } from './c3-expand.js';
 import { mountQuarter, mountYear, dispose as disposeStrategy } from './c3-cal-strategy.js';   // the Quarter and Year panes
 import { simDock, simStart, simState, isDemo } from './shell-recording.js';
+import { drawCalendarPage } from './c3-calendar.js';   // the Calendar tab as a page about time (ctx.page)
 
 /* ── shared state of the /c3.html page (console3 wave C3) ──────────────────────────────────────────────────────────
  * `live` holds every mounted instance, so a press in the Briefing's ribbon can select a meeting on the Calendar tab's instance.
@@ -28,7 +29,8 @@ let SHARED_SEL = null;   // a meeting chosen on the Briefing, read when the Cale
 const IX = () => (typeof window !== 'undefined' && window.__c3calix) || null;
 const baseId = (e) => String((e && e.id) || '').split('@')[0];
 const gotoTab = (id) => { const b = document.querySelector('[data-c3-tab="' + id + '"]'); if (b) b.click(); };
-const isC3 = (r) => !!(r && r.ctx && (r.ctx.ribbon || r.ctx.plan));
+const isC3 = (r) => !!(r && r.ctx && (r.ctx.ribbon || r.ctx.plan || r.ctx.page));
+const isCalTab = (x) => !!(x && x.ctx && (x.ctx.plan || x.ctx.page));   // the Calendar tab's own instance (the older mount passes plan, the page passes page)
 
 const NS = 'http://www.w3.org/2000/svg';
 const VIEWS = [['day', 'Day'], ['week', 'Week'], ['month', 'Month'], ['quarter', 'Quarter'], ['year', 'Year']];
@@ -564,7 +566,7 @@ const todayOf = (r) => (r.data && r.data.today) || todayStr();
 /* a day (and a meeting) on the Calendar tab's own instance; if that tab has not mounted yet its instance reads PENDING when it does */
 let PENDING = null;
 function openDay(date, sel) {
-  const cal = [...live].find((x) => x.ctx && x.ctx.plan);
+  const cal = [...live].find(isCalTab);
   if (cal) { cal.sel = sel || null; cal.phase = null; go(cal.host, cal, { view: 'day', date, anim: 'zi' }); }
   else PENDING = { date, sel: sel || null };
   gotoTab('cal');
@@ -878,6 +880,7 @@ function weekHead(data) {
 
 function draw(host, r) {
   if (r.ctx && r.ctx.ribbon) { r.root.replaceChildren(ribbonCard(host, r)); if (!r.loading) r.anim = null; return; }
+  if (r.ctx && r.ctx.page) { disposeStrategy(r.root); r.root.replaceChildren(drawCalendarPage(host, r, PAGE)); if (!r.loading) r.anim = null; return; }   // the Calendar tab (c3-calendar.js): no deck, no due list, no strategy lens
   const phone = r.root.classList.contains('ph');
   const head = bar(host, r, phone);
   let body;
@@ -904,6 +907,10 @@ function draw(host, r) {
   r.root.replaceChildren(head, body);
 }
 
+/* What the Calendar page (c3-calendar.js) reuses from this file: the zoom bar with the Today chip, the reads and the date helpers. */
+const PAGE = { bar, go: (host, r, change) => go(host, r, change), redraw: (host, r) => draw(host, r), shift, dayLabel, timeOf, endH, hhmm, baseId, dowOf, MN, DN,
+  gotoTab, goInitiative, openInit };
+
 /* Change the view or the date and read again. anim names the mockup's transition (.zi, .zo, .sn, .sp, console3.css). */
 function go(host, r, change) {
   if (change.view) r.view = change.view;
@@ -967,6 +974,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;
@@ -981,7 +989,7 @@ function wire(host, r) {
 let simOnWin = false;
 function installSim() {
   if (simOnWin || typeof window === 'undefined') return; simOnWin = true;
-  const calInst = () => [...live].filter((x) => x.ctx && x.ctx.plan && x.root.isConnected);
+  const calInst = () => [...live].filter((x) => isCalTab(x) && x.root.isConnected);
   window.addEventListener('c3-sim-rec', () => calInst().forEach((x) => { if (selEvent(x)) refreshSel(x.host, x); }));
   window.addEventListener('c3-sim-open', () => { gotoTab('cal'); calInst().forEach((x) => { if (x.view !== 'day') x.view = 'day'; x.phase = 'during'; if (x.data && x.data.unit === 'day' && x.data.range.start === x.data.range.end) refreshSel(x.host, x); else go(x.host, x, { view: 'day', date: todayOf(x) }); }); });
 }

package/workspace/public/pm/components.css

@@ -7932,4 +7932,5 @@
    containers). The tab strip and the scratchpad are drawn with inline radii (workspace-cockpit-nav); the inline radii
    (8px tab strip, 6px controls) stay. A tab's colour dot is a dot and keeps its circle. */
 
+/* -- layouts · .cal3- the console3 Calendar page (calendar-time-page): its rules sit in console3.css beside the .vday rules they extend -- */
 /* -- end of the layout sections: add nothing below this line -- */

package/workspace/public/pm/console3.css

@@ -491,6 +491,117 @@
 .c3 .sgb[aria-pressed="true"]{background:var(--accw);border-color:var(--acc);color:var(--foreground)}
 .c3 .vday .vb.past{opacity:.45}
 .c3 .vday .vb.skip{background:repeating-linear-gradient(135deg,var(--muted) 0 6px,transparent 6px 12px);color:var(--muted-foreground);text-decoration:line-through;box-shadow:none;outline:1px dashed var(--ring)}
+/* console3.css addition: the Calendar page (c3-calendar.js, initiative calendar-time-page). Classes start with cal3-, colours are tokens.
+ * The controls are primitives (button()), so each rule below sets the box itself: it wins over components.css when that sheet is loaded. */
+.c3 .cal3{display:grid;gap:var(--sp-3);min-width:0}
+.c3 .cal3-head{display:flex;gap:4px 12px;align-items:baseline;flex-wrap:wrap}
+.c3 .cal3-head h2{margin:0;font:600 var(--fs-5) var(--sans)}
+.c3 .cal3 .calbar{margin-bottom:0}
+.c3 .cal3-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
+.c3 .cal3 button.cal3-chip{display:inline-flex;align-items:center;gap:6px;height:auto;min-height:30px;padding:3px 10px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--muted-foreground);font:500 var(--fs-2) var(--sans);cursor:pointer;white-space:nowrap}
+.c3 .cal3 button.cal3-chip>span{display:inline-flex;align-items:center;gap:6px}
+.c3 .cal3 button.cal3-chip[aria-pressed="true"]{background:var(--accw);border-color:var(--acc);color:var(--foreground)}
+.c3 .cal3-chip .cal3-n{font:var(--fs-1) var(--mono);color:var(--muted-foreground)}
+.c3 .cal3-sep{width:1px;align-self:stretch;background:var(--border);margin:0 4px}
+.c3 .cal3-sw{display:inline-block;flex:none;width:10px;height:10px;border-radius:0;background:var(--muted-foreground)}
+.c3 .cal3-sw-meetings{background:var(--acc)}
+.c3 .cal3-sw-milestones{background:var(--foreground)}
+.c3 .cal3-sw-releases{background:transparent;border:2px solid var(--acc)}
+.c3 .cal3-sw-reports{background:var(--muted-foreground)}
+.c3 .cal3-sw-mine{background:transparent;border:1px dashed var(--foreground)}
+.c3 .cal3-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3);align-items:start}
+@container (min-width:1100px){.c3 .cal3-wrap{grid-template-columns:minmax(0,1fr) 340px}}
+.c3 .cal3-main,.c3 .cal3-side{display:grid;gap:var(--sp-3);min-width:0;align-content:start}
+.c3 .cal3-scroll{overflow-x:auto;min-width:0}
+/* a marker: glyph and short title; the left edge carries the tone */
+.c3 .cal3 button.cal3-mk{--cal3-tc:var(--muted-foreground);display:flex;align-items:center;width:100%;min-width:0;height:auto;min-height:22px;padding:1px 6px;border:0;border-left:3px solid var(--cal3-tc);border-radius:6px;background:var(--muted);color:var(--foreground);font:500 var(--fs-1)/1.4 var(--sans);text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;justify-content:flex-start}
+.c3 .cal3 button.cal3-mk>span{display:flex;gap:4px;align-items:center;min-width:0;overflow:hidden}
+.c3 .cal3-mk .ic{flex:none;color:var(--cal3-tc)}
+.c3 .cal3-mk .cal3-mk-t{overflow:hidden;text-overflow:ellipsis;min-width:0}
+.c3 .cal3 button.cal3-k-milestone,.c3 .cal3 button.cal3-k-due{--cal3-tc:var(--foreground)}
+.c3 .cal3 button.cal3-k-release{--cal3-tc:var(--acc)}
+.c3 .cal3 button.cal3-k-report{--cal3-tc:var(--muted-foreground)}
+.c3 .cal3 button.cal3-k-own{background:transparent;box-shadow:inset 0 0 0 1px var(--border)}
+.c3 .cal3 button.cal3-tone-warn{--cal3-tc:var(--warning)}
+.c3 .cal3 button.cal3-tone-bad{--cal3-tc:var(--destructive)}
+.c3 .cal3 button.cal3-mk.sel{outline:2px solid var(--foreground);outline-offset:1px}
+.c3 .tag.cal3-tone-warn{color:var(--warning)}
+.c3 .tag.cal3-tone-bad{color:var(--destructive)}
+.c3 .tag.cal3-up{color:var(--acc)}
+.c3 .cal3-more,.c3 .cal3-fcnt{font:var(--fs-1) var(--mono);color:var(--muted-foreground)}
+.c3 .cal3-cnt{font:var(--fs-1) var(--mono);color:var(--acc)}
+/* Day and Week: the timeline, its day heads and the all-day marker strip */
+.c3 .cal3-tg{min-width:0}
+.c3 .cal3-tg:not(.one){min-width:620px}
+.c3 .cal3-row{display:grid;grid-template-columns:44px repeat(var(--cal3-n),minmax(0,1fr))}
+.c3 .cal3-dhead,.c3 .cal3-strip{border-bottom:1px solid var(--border)}
+.c3 .cal3-dh{padding:4px;border-left:1px solid var(--border);min-width:0;font:500 var(--fs-2) var(--mono)}
+.c3 .cal3-dh.today b,.c3 .cal3-dh.today button.cal3-dbtn{color:var(--acc)}
+.c3 .cal3-gut{font:var(--fs-1) var(--mono);color:var(--muted-foreground);padding:6px 4px}
+.c3 .cal3-sc{border-left:1px solid var(--border);padding:3px;display:grid;gap:2px;align-content:start;min-height:28px;min-width:0}
+.c3 .cal3-none{font:var(--fs-1) var(--mono);color:var(--muted-foreground);padding:4px}
+.c3 .cal3-hours{position:relative;height:var(--cal3-hgt)}
+.c3 .cal3-hours span{position:absolute;top:var(--cal3-y);right:6px;font:var(--fs-1) var(--mono);color:var(--muted-foreground)}
+.c3 .vday.cal3-col{height:var(--cal3-hgt);margin-top:0;border-left:1px solid var(--border);background:repeating-linear-gradient(to bottom,var(--border) 0 1px,transparent 1px var(--cal3-pph))}
+.c3 .vday.cal3-col.we{background-color:var(--muted)}
+.c3 .vday.cal3-col.today{background-color:var(--accw)}
+.c3 .vday .cal3-free{left:2px;right:2px;top:var(--cal3-y);height:var(--cal3-h);display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:4px 6px;overflow:hidden;border:1px dashed var(--ring);z-index:1}
+.c3 .vday .cal3-free b{font:500 var(--fs-1) var(--mono);color:var(--foreground)}
+.c3 .vday .cal3-free span{font:var(--fs-1)/1.3 var(--sans);color:var(--muted-foreground)}
+.c3 .vday button.cal3-ev{top:var(--cal3-y);height:var(--cal3-h);min-height:0;left:calc(2px + (100% - 4px) * var(--cal3-l) / var(--cal3-lc));right:auto;width:calc((100% - 4px) / var(--cal3-lc) - 2px);display:block;padding:3px 8px;z-index:2;white-space:nowrap;cursor:pointer}
+.c3 .vday button.cal3-ev>span{display:block;overflow:hidden}
+.c3 .vday .cal3-ev b{display:block;overflow:hidden;text-overflow:ellipsis;font-weight:500}
+.c3 .vday .cal3-now{left:0;top:var(--cal3-y)}
+.c3 .cal3 button.cal3-allday{display:block;width:100%;height:auto;min-height:22px;padding:1px 6px;border:0;border-radius:6px;background:var(--acc);color:var(--on-accent);font:500 var(--fs-1)/1.4 var(--sans);text-align:left;overflow:hidden;white-space:nowrap;cursor:pointer}
+.c3 .cal3 button.cal3-dbtn,.c3 .cal3 button.cal3-dn{display:inline-flex;align-items:center;height:auto;min-height:24px;padding:2px 6px;border:0;border-radius:6px;background:transparent;color:var(--foreground);font:500 var(--fs-2) var(--mono);cursor:pointer;justify-content:flex-start}
+/* Month */
+.c3 .cal3-month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
+.c3 .cal3-wd{font:500 var(--fs-1) var(--mono);color:var(--muted-foreground);text-align:center;padding:2px}
+.c3 .cal3-mc{border:1px solid var(--border);border-radius:8px;background:var(--background);min-height:96px;padding:4px;display:grid;gap:2px;align-content:start;min-width:0;overflow:hidden}
+.c3 .cal3-mc.out{border:0;background:transparent}
+.c3 .cal3-mc.we{background:var(--muted)}
+.c3 .cal3-mc.today{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
+/* Quarter and Year */
+.c3 .cal3-quarter{display:grid}
+.c3 .cal3-qrow{display:grid;grid-template-columns:minmax(150px,auto) auto minmax(0,1fr);gap:8px;align-items:center;padding:6px 4px;border-bottom:1px solid var(--border);min-width:0}
+.c3 .cal3-qrow.now,.c3 .cal3-ym.now{background:var(--accw)}
+.c3 .cal3-qmk{display:flex;flex-wrap:wrap;gap:3px;min-width:0}
+.c3 .cal3-qmk button.cal3-mk{width:auto;max-width:100%}
+.c3 .cal3-counts{display:flex;gap:4px;flex-wrap:wrap}
+.c3 .cal3-year{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
+.c3 .cal3-ym{border:1px solid var(--border);border-radius:8px;padding:8px;display:grid;gap:6px;align-content:start;min-width:0}
+@container (max-width:640px){
+  .c3 .cal3-mk.compact .cal3-mk-t{display:none}
+  .c3 .cal3-mc{min-height:64px;padding:2px}
+  .c3 .cal3-qrow{grid-template-columns:minmax(0,1fr)}
+}
+/* the detail column */
+.c3 .cal3-dt{display:flex;align-items:center;gap:8px}
+.c3 .cal3-dt h3{flex:1}
+.c3 .cal3-title{font:600 var(--fs-4) var(--sans)}
+.c3 .cal3-when{font-size:var(--fs-2)}
+.c3 .cal3-ctx{display:grid;gap:6px}
+.c3 .cal3-ctx h4{margin:0;font:600 var(--fs-2) var(--sans);color:var(--foreground)}
+.c3 .cal3-cl{list-style:none;margin:0;padding:0;display:grid;gap:6px}
+.c3 .cal3-ci{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;font-size:var(--fs-2);padding-bottom:6px;border-bottom:1px solid var(--border)}
+.c3 .cal3-ct{flex:1 1 160px;min-width:0}
+.c3 .cal3-at{font-size:var(--fs-1)}
+.c3 .cal3-note{margin:0;font-size:var(--fs-2)}
+.c3 .cal3 a.cal3-ref{display:inline-flex;gap:4px;align-items:center;color:var(--acc);font:500 var(--fs-2) var(--sans);text-decoration:underline;text-underline-offset:2px}
+.c3 .cal3-lane{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:8px;align-items:center;font-size:var(--fs-2)}
+.c3 .cal3-why{text-align:right}
+.c3 .cal3 button.cal3-close{margin-left:auto;height:auto;min-height:24px;padding:2px 8px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--muted-foreground);font:500 var(--fs-1) var(--mono);cursor:pointer}
+.c3 .cal3 button:focus-visible,.c3 .cal3 a:focus-visible{outline:2px solid color-mix(in oklab, var(--ring) 50%, var(--foreground));outline-offset:2px}
+@media (hover:hover){
+  .c3 .cal3 button.cal3-chip:hover{border-color:var(--ring)}
+  .c3 .cal3 button.cal3-mk:hover{background:var(--accw)}
+}
+@media (pointer:coarse){
+  .c3 .cal3 button.cal3-chip,.c3 .cal3 button.cal3-mk,.c3 .cal3 button.cal3-dn,.c3 .cal3 button.cal3-dbtn,.c3 .cal3 button.cal3-close,.c3 .cal3 button.cal3-allday,.c3 .cal3 a.cal3-ref{min-height:44px}
+}
+@media (prefers-reduced-motion:reduce){
+  .c3 .cal3 *{animation:none;transition:none}
+}
 .c3 .cmain{display:flex;flex-direction:column;gap:8px;min-height:0}
 .c3 .pdots{display:flex;gap:6px;flex-wrap:wrap}
 .c3 .pdots i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px dashed var(--ring);color:var(--muted-foreground)}
@@ -1101,6 +1212,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 +1602,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
@@ -1545,3 +1699,47 @@
 .c3 .c3hold .hb.off{opacity:.55;cursor:not-allowed}
 .c3 .c3hold .hint{font:var(--fs-1) var(--mono);color:var(--muted-foreground)}
 .c3 .c3hold .cq{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;font:var(--fs-2) var(--mono)}
+/* ===== the Work page (pm/pm-work-view.js, initiative console3-work-page): Focus, Upcoming by day, the weekly Review, offline work and the
+ * shared actions. Tokens only; corners 6px on a control and 8px on a container. */
+.c3 .wk-min{min-width:0}
+.c3 .wk-s{font-size:var(--fs-2)}
+.c3 .pill.pri{background:var(--foreground);color:var(--background);border-color:var(--foreground)}
+.c3 .wkq{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-top:var(--sp-2)}
+.c3 .wkq-f{display:inline-flex;gap:6px;align-items:center;font-size:var(--fs-2)}
+.c3 .wkq input[type=date],.c3 .wkq-f input[type=text]{font:inherit;font-size:var(--fs-2);padding:4px 6px;border:1px solid var(--border);background:var(--background);color:var(--foreground);border-radius:6px;min-width:0;max-width:150px}
+.c3 .tag.wk-off{background:var(--accw);color:var(--acc)}
+.c3 .tag.wk-nb{background:var(--muted);color:var(--foreground)}
+.c3 .tag.wk-on{background:var(--acc);color:var(--background)}
+.c3 .chip2.wk-fl{color:var(--acc)}
+.c3 .wkoff{display:grid;gap:var(--sp-1);border:1px solid var(--border);border-radius:8px;padding:var(--sp-2) var(--sp-3);margin:var(--sp-2) 0}
+.c3 .wkoff-n{margin:0;display:flex;gap:6px;align-items:center;font-size:var(--fs-2);color:var(--muted-foreground)}
+.c3 .wkoff-o{flex:1 1 220px;min-width:0}
+.c3 .wkoff-o input[type=text]{width:100%}
+.c3 .wkev{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;border:1px dashed var(--warning);border-radius:8px;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-2)}
+.c3 .wkev>.wk-min{flex:1 1 200px}
+.c3 .wkfg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--sp-3)}
+.c3 .wkfc{border:1px solid var(--border);background:var(--card);border-radius:8px;padding:var(--sp-3);display:grid;gap:var(--sp-2);align-content:start;min-width:0}
+.c3 .wkfc.on{border-color:var(--acc);background:var(--accw)}
+.c3 .wkfc-t{font-size:var(--fs-3);line-height:1.3;overflow-wrap:anywhere}
+.c3 .wkfc-why{margin:0;font-size:var(--fs-2);color:var(--muted-foreground)}
+.c3 .wkfc-r{margin:0;padding:0;list-style:none;display:grid;gap:2px;font-size:var(--fs-2)}
+.c3 .wkfc-r li{display:flex;gap:4px;align-items:center;min-width:0}
+.c3 .wkfc .wkq{margin-top:0}
+.c3 .wkdays{display:grid}
+.c3 .wkday h3{margin:0;padding:var(--sp-2) 0 var(--sp-1);font:500 var(--fs-2) var(--mono);color:var(--foreground);display:flex;gap:var(--sp-2);align-items:baseline}
+.c3 .wkday h3 .dim{font-weight:400}
+.c3 .wkday-none{color:var(--muted-foreground);font-size:var(--fs-2);padding:0 0 var(--sp-2);border-bottom:1px solid var(--border)}
+.c3 .wkrv{gap:var(--sp-3)}
+.c3 .wkrv-p{display:flex;justify-content:space-between;font:var(--fs-2) var(--mono);color:var(--muted-foreground)}
+.c3 .wkrv-t{margin:0;font:600 var(--fs-4)/1.3 var(--sans);color:var(--foreground);overflow-wrap:anywhere}
+.c3 .wkrv-x{display:grid;gap:var(--sp-2)}
+@media (max-width:760px){
+  .c3 .wkq input[type=date],.c3 .wkq-f input[type=text]{min-height:44px;max-width:none}
+  .c3 .wkoff-o input[type=text],.c3 .wkfc input[type=text]{min-height:44px}
+}
+
+.c3 .wk-sm{font-size:var(--fs-2)}
+.c3 .wk-bar{appearance:none;-webkit-appearance:none;width:100%;height:8px;border:0;border-radius:6px;overflow:hidden;background:var(--muted)}
+.c3 .wk-bar::-webkit-progress-bar{background:var(--muted)}
+.c3 .wk-bar::-webkit-progress-value{background:var(--acc);border-radius:6px}
+.c3 .wk-bar::-moz-progress-bar{background:var(--acc);border-radius:6px}