create-pmos 0.134.0 → 0.135.0

package/workspace/public/pm/c3-ini-work.js

@@ -0,0 +1,139 @@
+/* pm/c3-ini-work.js — the model the Initiatives page shares across its tabs (mockup v5, 34-initiatives.js): the workflow templates an
+ * initiative can run, the stage tools, and the work items (Jira items and PMOS tasks) as rows, sheets and timeline rows. It reads the
+ * server only through the ctx it is handed (c3-initiatives.js makeCtx), and writes only the PMOS-task status (POST
+ * /api/boards/tasks/state) from the item sheet. Jira items are read-only everywhere: status, dates and owner are Jira's.
+ *
+ *   TEMPLATES · isBuildStage · templateBuilds · offered(board) · wfOf(row, board) · catOf(wf, stage) · tplName(row, board) · kindOf(row, board)
+ *   TOOL_META { id: [label, icon] }   the server's stage tools (scripts/boards.js TOOLS)
+ *   KIND_IC · STATUSES · srcTag(w) · wkStatus(w) · workRow(ctx, w, o) · openWorkSheet(ctx, w, all, onChanged)
+ *   workTlRows(ctx, items, onChanged) · iniTlRow(ctx, ini, kids, board) · iniTip(ini, board)   rows for c3-ini-timeline.js
+ *   loadItems(ctx) · dropItems(ctx)   GET /api/boards/items, kept for a few seconds per board */
+import { el } from './dom.js';
+import { icon, chip, tag, st, note, kv, nrow, sect, list, lk, dateChip, ownerChip, ownerText, day, daysBetween, trunc, progChip, pill, plural } from './c3-ini-ui.js';
+
+const S = (name, cat) => ({ name, cat });
+/** The workflow templates (scripts/boards.js INI_TEMPLATES): name, kind, use and stages. */
+export const TEMPLATES = Object.freeze({
+  product: { name: 'Product', kind: 'product', use: 'Product work that ships: discovery through to evaluating what shipped.', stages: [S('Discover', 'Discover'), S('Plan', 'Plan'), S('Build & Deliver', 'Do'), S('Monitor & Evaluate', 'Learn')] },
+  fix: { name: 'Quick fix', kind: 'product', use: 'A small, known change: plan it, build it, ship it, check it.', stages: [S('Plan', 'Plan'), S('Build & Deliver', 'Do'), S('Evaluate', 'Learn')] },
+  research: { name: 'Research only', kind: 'product', use: 'Learn before committing. Nothing gets built in this initiative.', stages: [S('Discover', 'Discover'), S('Plan', 'Plan'), S('Evaluate', 'Learn')] },
+  content: { name: 'Content and launch', kind: 'project', use: 'Pages, campaigns and launches that a team or an agency produces.', stages: [S('Discover', 'Discover'), S('Plan', 'Plan'), S('Produce', 'Do'), S('Launch', 'Do'), S('Evaluate', 'Learn')] },
+  project: { name: 'Project', kind: 'project', use: 'Someone who only manages a project: plan it, run it, close it.', stages: [S('Plan', 'Plan'), S('Execute', 'Do'), S('Close', 'Learn')] },
+  simple: { name: 'Simple', kind: 'simple', use: 'A plain to-do flow for small or personal work.', stages: [S('To do', 'Plan'), S('Doing', 'Do'), S('Done', 'Learn')] },
+});
+export const BOARD_TEMPLATES = ['product', 'project', 'simple'];
+export const isBuildStage = (s) => /^(build|deliver)/i.test(String((s && s.name) || s || ''));
+export const templateBuilds = (k) => !!TEMPLATES[k] && TEMPLATES[k].stages.some(isBuildStage);
+/** The templates the board offers new and existing initiatives (never a Build one when Build and deliver is off). */
+export const offered = (b) => (Array.isArray(b && b.offer) && b.offer.length ? b.offer : Object.keys(TEMPLATES)).filter((k) => TEMPLATES[k] && (b.build !== false || !templateBuilds(k)));
+export const wfOf = (row, b) => (row && Array.isArray(row.workflow) && row.workflow.length ? row.workflow : (row && row.template && TEMPLATES[row.template] ? TEMPLATES[row.template].stages : (b && b.workflow) || []));
+export const catOf = (wf, stage) => ((wf || []).find((s) => s.name === stage) || {}).cat || 'Plan';
+const sameNames = (a, b) => a.length === b.length && a.every((s, k) => s.name === b[k].name);
+/** "Research only", "Product (edited)", or the board's own workflow ("Product, the board's"). */
+export function tplName(row, b) {
+  const t = row && row.template && TEMPLATES[row.template];
+  if (t) return t.name + (row.workflow && row.workflow.length && !sameNames(t.stages, row.workflow) ? ' (edited)' : '');
+  if (b && b.self) return 'PMOS ladder';
+  const bt = TEMPLATES[b && b.template];
+  return bt ? bt.name + (b.templateEdited ? ' (edited)' : '') : 'Custom';
+}
+export const kindOf = (row, b) => (row && row.template && TEMPLATES[row.template] ? TEMPLATES[row.template].kind : (TEMPLATES[b && b.template] || TEMPLATES.product).kind);
+
+/** The stage tools of the server (scripts/boards.js TOOLS): label and icon. */
+export const TOOL_META = {
+  ideas: ['Ideas', 'spark'], hypotheses: ['Hypotheses', 'flag'], notes: ['Notes', 'notes'], prd: ['PRD', 'doc'], rubric: ['Done-criteria', 'check'],
+  breakdown: ['Breakdown', 'tree'], placement: ['Roadmap place', 'cal'], tickets: ['Tickets', 'check'], releases: ['Releases', 'out'],
+  measurements: ['Measurements', 'up'], evaluation: ['Evaluation', 'scale'], history: ['History', 'undo'], brief: ['Brief', 'doc'], timeline: ['Timeline', 'cal'],
+};
+export const toolLabel = (t) => (t && t.label) || (TOOL_META[t && t.id] || [String((t && t.id) || '')])[0];
+export const toolIcon = (id) => (TOOL_META[id] || [0, 'doc'])[1];
+
+/* ── work items ── */
+export const KIND_IC = { Epic: 'bolt', Story: 'doc', Task: 'check', Bug: 'alert' };
+export const STATUSES = ['To do', 'In progress', 'In review', 'Done'];
+export const srcTag = (w) => (w.src === 'jira' ? el('span', { class: 'tag' }, icon('jira', 'sm'), 'Jira') : el('span', { class: 'tag' }, 'PMOS'));
+export const wkStatus = (w) => (w.blocked ? st('bad', 'alert', 'Blocked') : w.status === 'Done' ? st('ok', 'check', 'Done') : w.status === 'To do' ? chip('To do') : tag(w.status));
+
+const CACHE = new Map();
+/** GET /api/boards/items for the ctx's board: { ok, items, initiatives, build, jira, error }. Kept for 5 s. */
+export async function loadItems(ctx, force) {
+  const key = ctx.ws + '|' + ctx.board.id;
+  const hit = CACHE.get(key);
+  if (!force && hit && Date.now() - hit.at < 5000) return hit.p;
+  const p = ctx.api.get('/api/boards/items', { board: ctx.board.id }).then((r) => (r && r.ok && !r.pending
+    ? { ok: true, items: r.items || [], initiatives: r.initiatives || [], build: !!r.build, jira: r.jira || null, error: '' }
+    : { ok: false, items: [], initiatives: [], build: !!ctx.board.build, jira: ctx.board.jira || null, error: r && r.pending ? 'the repository is still being read' : (r && r.error) || 'no answer' }));
+  CACHE.set(key, { at: Date.now(), p });
+  return p;
+}
+export const dropItems = (ctx) => { if (ctx && ctx.board) CACHE.delete(ctx.ws + '|' + ctx.board.id); else CACHE.clear(); };
+
+/** One work item as a console3 row. o: { all, ini (show the initiative link), epic (show the epic chip, default true), sub, right, onChanged }. */
+export function workRow(ctx, w, o = {}) {
+  const ep = w.epic && o.all && o.epic !== false ? o.all.find((x) => x.uid === w.epic) : null;
+  const late = w.status !== 'Done' && w.end && daysBetween(ctx.today, w.end) < 0;
+  const chips = [w.key ? chipM(w.key) : null, chip(icon(KIND_IC[w.kind] || 'check', 'sm'), w.kind), srcTag(w), wkStatus(w), ownerChip(w.owner),
+    w.end ? dateChip(w.kind === 'Epic' ? w.start : null, w.end, late) : null,
+    ep ? chip(icon('bolt', 'sm'), trunc(ep.title, 32)) : null,
+    o.ini && w.ini ? lk({ onclick: () => ctx.openInitiative(w.ini), 'data-ini-open': w.ini }, icon('init', 'sm'), w.ini) : null];
+  return nrow({ ic: w.blocked ? 'alert' : KIND_IC[w.kind] || 'check', hot: w.status === 'In progress' || w.status === 'In review', tone: w.blocked ? 'bad' : '',
+    title: w.title, onOpen: () => openWorkSheet(ctx, w, o.all || [w], o.onChanged), openLabel: 'Open ' + (w.key ? w.key + ' ' : '') + w.title, chips,
+    right: [w.src === 'jira' ? el('span', { class: 'chip2', title: 'Status and dates come from Jira' }, icon('lock', 'sm')) : null, ...(o.right || [])],
+    attrs: { 'data-ini-item': w.uid, 'data-src': w.src }, cls: o.sub ? 'ini-sub-row' : '' });
+}
+const chipM = (t) => el('span', { class: 'chip2 mono' }, t);
+
+/** The sheet of one work item: what it is, its dates and progress, its items when it is an epic; a PMOS task can change status here. */
+export function openWorkSheet(ctx, w, all, onChanged) {
+  const kids = (all || []).filter((x) => x.epic && x.epic === w.uid);
+  const ini = w.ini;
+  const body = el('div', { class: 'ini-form', 'data-ini': 'work-sheet' });
+  const sh = ctx.openSheet({ title: (w.key ? w.key + ' ' : '') + w.title, icon: KIND_IC[w.kind] || 'check', body });
+  async function setState(s) {
+    const r = await ctx.api.post('/api/boards/tasks/state', { board: ctx.board.id, task: w.ref, state: s });
+    if (!r || !r.ok) { ctx.toast({ text: 'The status did not change: ' + ((r && r.error) || 'no answer') + '.', tone: 'error' }); return; }
+    sh.close(); dropItems(ctx);
+    ctx.toast('"' + trunc(w.title, 40) + '" moved to ' + s + '.');
+    if (onChanged) onChanged(r.item);
+  }
+  body.replaceChildren(
+    el('div', { class: 'chips2' }, srcTag(w), chip(icon(KIND_IC[w.kind] || 'check', 'sm'), w.kind), wkStatus(w), ini ? lk({ onclick: () => { sh.close(); ctx.openInitiative(ini); } }, icon('init', 'sm'), ini) : null),
+    kv([['Owner', ownerText(w.owner)], ['Dates', w.start || w.end ? (day(w.start) || 'No start') + ' to ' + (day(w.end) || 'no end') : 'No dates yet'], ['Progress', progChip(w.progress || 0, w.status === 'Done' ? 'ok' : 'acc')]]),
+    kids.length ? sect({ ic: 'bolt', title: 'In this epic', count: kids.length }, list(kids.map((k) => workRow(ctx, k, { all, epic: false, onChanged })))) : null,
+    w.src === 'jira'
+      ? el('div', { class: 'fold' }, icon('lock', 'sm'), el('b', null, 'Mirrored from Jira, read-only.'), ' Status, dates and owner are Jira\'s. Change them in Jira and PMOS mirrors them.')
+      : w.kind === 'Epic' ? note('A PMOS epic groups PMOS tasks. Drag its tasks on the Timeline to change their dates.')
+        : el('div', { class: 'ini-field' }, el('span', { class: 'dim mono ini-lbl' }, 'Move to'),
+          el('div', { class: 'seg ini-seg', role: 'group', 'aria-label': 'Status' }, ...STATUSES.map((s) => pill({ class: '', 'aria-pressed': String(w.status === s), 'data-ini-state': s, disabled: w.status === s, onclick: () => setState(s) }, s)))));
+}
+
+/* ── timeline rows ── */
+export const iniTip = (i, b) => ({ t: i.id + ' ' + i.title, p: Math.round((i.progress || 0) * 100) + '%', st: (i.stage || 'No stage') + ' · ' + (i.status || 'no status'), o: i.owner || 'No owner',
+  src: 'Initiative · ' + tplName(i, b) + ' workflow', hint: 'Click the row to show its epics' });
+const toneOfIni = (i) => (i.status === 'late' ? 'bad' : i.status === 'at risk' ? 'warn' : i.status === 'done' ? 'ok' : 'acc');
+export const iniTlRow = (ctx, i, kids, b, cls) => ({ uid: i.id, label: i.title, key: i.id, start: i.start, end: i.end, progress: i.progress || 0, tone: toneOfIni(i), cls: cls || 'ini',
+  open: () => ctx.openInitiative(i.id, 'overview', b && b.id), tip: iniTip(i, b || ctx.board), kids });
+/** Epic > item rows of a set of items; items with no epic of the set come after. A PMOS task can be dragged; a Jira item is locked. */
+export function workTlRows(ctx, items, onChanged) {
+  const wr = (w) => ({ uid: w.uid, label: w.title, key: w.key, src: w.src, start: w.start, end: w.end, progress: w.progress || 0, cls: w.kind === 'Epic' ? 'ep' : 'it',
+    tone: w.blocked ? 'bad' : w.status === 'Done' ? 'ok' : w.src === 'pmos' ? 'pm' : 'acc', drag: w.src === 'pmos' && w.kind !== 'Epic' && w.ref ? w.ref : null, lock: w.src === 'jira' ? w.key : null,
+    open: () => openWorkSheet(ctx, w, items, onChanged),
+    tip: { t: (w.key ? w.key + ' ' : '') + w.title, p: Math.round((w.progress || 0) * 100) + '%', st: w.blocked ? 'Blocked' : w.status, o: w.owner || 'No owner', jira: w.src === 'jira',
+      src: w.src === 'jira' ? 'Jira ' + w.kind.toLowerCase() + ' · read-only' : 'PMOS ' + w.kind.toLowerCase(), hint: w.src === 'jira' ? 'Dates come from Jira' : w.kind === 'Epic' ? 'Click to show its tasks' : 'Drag to reschedule' } });
+  const by = (a, c) => String(a.start || '9').localeCompare(String(c.start || '9'));
+  const epics = items.filter((w) => w.kind === 'Epic');
+  const loose = items.filter((w) => w.kind !== 'Epic' && !(w.epic && epics.some((e) => e.uid === w.epic)));
+  return [...epics.map((e) => ({ ...wr(e), kids: items.filter((w) => w.epic === e.uid).sort(by).map(wr) })), ...loose.sort(by).map(wr)];
+}
+/** Reschedule a PMOS task by whole days (a drag or an arrow key on the Timeline), with an Undo in the toast. */
+export async function rescheduleTask(ctx, taskId, days, onDone) {
+  const r = await ctx.api.post('/api/boards/tasks/reschedule', { board: ctx.board.id, task: taskId, days });
+  dropItems(ctx);
+  if (!r || !r.ok) { ctx.toast({ text: 'The task was not rescheduled: ' + ((r && r.error) || 'no answer') + '.', tone: 'error' }); onDone(null); return; }
+  const it = r.item || {};
+  ctx.toast({ text: 'Rescheduled "' + trunc(it.title || '', 40) + '" to ' + day(it.start) + ' to ' + day(it.end) + '.', actionLabel: 'Undo', timeout: 8000,
+    onAction: async () => { await ctx.api.post('/api/boards/tasks/reschedule', { board: ctx.board.id, task: taskId, days: -days }); dropItems(ctx); onDone(null, true); } });
+  onDone(it);
+}
+export const lockedToast = (ctx, key) => ctx.toast(key + ' is a Jira item. Its dates and status come from Jira; change them there and PMOS mirrors them.');
+export { plural };

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

@@ -0,0 +1,218 @@
+/* pm/c3-initiatives.css — the few rules console3.css has no class for, on the Initiatives page (c3-initiatives.js and its tab
+ * modules). The page draws with console3's own classes (.calwrap, .calbar, .lh, .seg, .brief.sbb, .card.sect, .nrow, .chips2,
+ * .chip2, .st, .tag, .pill, .chgl, .hbs > .hbr, .fold, .pgl); the rules here are the mockup's 34-initiatives.css under the `ini-`
+ * prefix, held to the R28 rules: corners 0, 6px or 8px (50% on a dot), font sizes 11, 12, 14, 16 or 20px or a --fs token, colours
+ * from the tokens only, and every :hover inside @media (hover: hover). Run-time geometry comes in as --in-… custom properties.
+ *
+ * Category colours: Discover var(--foreground), Plan var(--ring), Do var(--acc), Learn a mix of the accent and the muted foreground.
+ * Tones (.ini-t-…): acc, ok, warn (var(--warning)), bad (var(--destructive)), pm (a PMOS task, var(--ring)) and muted. */
+
+/* ── a primitive button drawn as a console3 control: take the primitive's own box off, the console3 class draws it ── */
+:where(.c3) .ini-b{height:auto;min-height:0;padding:0;border:0;background:transparent;font:inherit;color:inherit;line-height:inherit;white-space:normal;text-align:left;justify-content:flex-start;gap:6px}
+.c3 .seg .ini-b,.c3 .ini-seg .ini-b{white-space:nowrap;line-height:1.2}
+.c3 .ini-b.pill,.c3 .ini-b.chip2{white-space:nowrap}
+.c3 .ini-b.tt{display:block;justify-content:flex-start;white-space:normal}
+.c3 .ini-b:disabled{opacity:.45;cursor:default}
+
+/* ── colours: category (data-cat) and tone ── */
+.c3 .ini-c{--ini-c:var(--ring)}
+.c3 .ini-c[data-cat="Discover"]{--ini-c:var(--foreground)}
+.c3 .ini-c[data-cat="Plan"]{--ini-c:var(--ring)}
+.c3 .ini-c[data-cat="Do"]{--ini-c:var(--acc)}
+.c3 .ini-c[data-cat="Learn"]{--ini-c:color-mix(in oklab,var(--acc) 40%,var(--muted-foreground))}
+.c3 .ini-t-acc{--c:var(--acc)}
+.c3 .ini-t-ok{--c:color-mix(in oklab,var(--acc) 55%,var(--foreground))}
+.c3 .ini-t-warn{--c:var(--warning)}
+.c3 .ini-t-bad{--c:var(--destructive)}
+.c3 .ini-t-pm{--c:var(--ring)}
+.c3 .ini-t-muted{--c:var(--muted-foreground)}
+.c3 .ini-k-bad{color:var(--destructive)}
+.c3 .ini-k-warn{color:var(--warning)}
+.c3 .ini-k-ok{color:var(--acc)}
+.c3 .ini-late{color:var(--destructive)}
+
+/* ── small parts ── */
+.c3 .ini-sw{display:inline-block;width:8px;height:8px;border-radius:0;flex:none;background:var(--ini-c)}
+.c3 .ini-note{font-size:var(--fs-2);line-height:1.45}
+.c3 .ini-lbl{font-size:var(--fs-1);letter-spacing:.04em}
+.c3 .ini-meta{font-size:var(--fs-2)}
+.c3 .ini-sub{text-transform:none;letter-spacing:0;font-weight:400}
+.c3 .ini-lhm{min-width:0}
+.c3 .ini-seg{overflow-x:auto;max-width:100%;scrollbar-width:thin}
+.c3 .ini-seg .bdg{margin-left:2px}
+.c3 .ini-stack{display:flex;gap:2px;height:8px;border-radius:6px;overflow:hidden;background:var(--muted);margin-top:8px}
+.c3 .ini-stack i{display:block;height:100%;flex:var(--in-f,1) 1 0;background:var(--ini-c)}
+.c3 .ini-steps{gap:3px}
+.c3 .ini-steps>span{margin-left:3px}
+.c3 .ini-steps .ini-dot{display:inline-block;width:6px;height:6px;border-radius:50%;border:1px solid var(--ini-c);flex:none}
+.c3 .ini-steps .ini-dot.d{background:var(--ini-c);opacity:.55}
+.c3 .ini-steps .ini-dot.c{background:var(--ini-c);box-shadow:0 0 0 2px var(--accw)}
+.c3 .ini-mini{display:inline-block;width:44px;height:4px;border-radius:6px;background:var(--muted);overflow:hidden;vertical-align:middle;flex:none}
+.c3 .ini-mini u{display:block;height:100%;width:var(--in-w,0);background:var(--c);text-decoration:none}
+.c3 .hbr .tk u{width:var(--in-w,2%)}
+.c3 .hbr.ini-c{--c:var(--ini-c)}
+.c3 .ini-hbb{display:grid;gap:4px;width:100%;color:inherit;font:inherit;cursor:pointer}
+.c3 .ini-kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 14px;margin:0;font-size:var(--fs-3)}
+.c3 .ini-kv dt{color:var(--muted-foreground);font:var(--fs-2) var(--mono)}
+.c3 .ini-kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
+.c3 .ini-num{width:84px;flex:none}
+.c3 .ini-up,.c3 .ini-down{display:inline-flex}
+.c3 .ini-up{transform:rotate(-90deg)}
+.c3 .ini-down{transform:rotate(90deg)}
+.c3 .ini-sub-row{padding-left:var(--sp-5)}
+.c3 .ini-pager{justify-content:flex-end}
+.c3 .ini-chk{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-3);cursor:pointer}
+.c3 .ini-chk input{margin-top:2px;flex:none}
+.c3 .ini-chk.done span{color:var(--muted-foreground);text-decoration:line-through}
+.c3 .ini-grow{flex:1 1 auto}
+.c3 .ini-field{display:grid;gap:6px}
+.c3 .ini-form{display:grid;gap:var(--sp-3)}
+.c3 .ini-form textarea,.c3 .ini-form input[type=text]{width:100%}
+.c3 .ini-flash{outline:2px solid var(--acc);outline-offset:2px}
+.c3 .ini-pre{margin:0;white-space:pre-line}
+.c3 .ini-confirm{display:grid;gap:8px}
+.c3 .ini-err{color:var(--destructive);font-size:var(--fs-2)}
+
+/* console3 draws a row in a briefing column with two tracks; a row here with actions keeps its third */
+.c3 .ini .brief .nrow:has(>.acts>*){grid-template-columns:auto minmax(0,1fr) auto}
+.c3 .ini-col{display:grid;gap:var(--sp-3);min-width:0}
+.c3 .ini-p{margin:0}
+.c3 .ini-text{display:grid}
+.c3 .ini-text textarea{width:100%;min-height:72px;resize:vertical}
+.c3 .ini-checks{display:grid;gap:6px}
+
+/* ── the sprint burndown (stage records) ── */
+.c3 .ini-burn{display:block;width:100%;max-width:420px;height:auto}
+.c3 .ini-burn .ax{stroke:var(--border)}
+.c3 .ini-burn .ideal{stroke:var(--muted-foreground);stroke-dasharray:3 3;fill:none}
+.c3 .ini-burn .act{stroke:var(--acc);stroke-width:2;fill:none;stroke-linejoin:round}
+.c3 .ini-burn .dot{fill:var(--acc)}
+.c3 .ini-burn text{fill:var(--muted-foreground);font:var(--fs-1) var(--mono)}
+
+/* ── the popover menu ── */
+.c3 .ini-menu{position:fixed;left:var(--in-x,0);top:var(--in-y,0);z-index:60;width:min(300px,calc(100vw - 16px));max-height:min(420px,calc(100vh - 80px));overflow:auto;display:grid;gap:2px;padding:6px;border:1px solid var(--border);border-radius:8px;background:var(--card);box-shadow:var(--sh2)}
+.c3 .ini-mlbl{padding:6px 8px 2px;font:var(--fs-1) var(--mono);color:var(--muted-foreground);letter-spacing:.04em}
+.c3 .ini-mi{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border-radius:6px;font-size:var(--fs-3);color:var(--foreground)}
+.c3 .ini-mi[aria-current="true"]{color:var(--muted-foreground)}
+
+/* ── the kanban (Board tab) ── */
+.c3 .ini-kb{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:var(--sp-3);overflow-x:auto;align-items:start;padding-bottom:var(--sp-2)}
+.c3 .ini-kb .nrow{grid-template-columns:auto minmax(0,1fr) auto;gap:8px}
+.c3 .ini-kb .nrow .nb{padding-right:0}
+.c3 .ini-kb .nrow.ini-dragging{opacity:.4}
+.c3 [data-ini-col].over,.c3 [data-wf-row].over{outline:2px dashed var(--acc);outline-offset:-2px}
+.c3 .ini-grip{cursor:grab}
+
+/* ══ the timeline (Portfolio, Board, Initiative) ══ */
+.c3 .ini-tl{position:relative;--lw:240px;display:grid;gap:var(--sp-2);min-width:0}
+.c3 .ini-tlbar{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;justify-content:space-between}
+.c3 .ini-tlsc{overflow-x:auto;overflow-y:hidden;border:1px solid var(--border);border-radius:8px;background:var(--card);overscroll-behavior-x:contain;scrollbar-width:thin}
+.c3 .ini-tlin{position:relative;width:calc(var(--lw) + var(--in-days) * var(--in-pd) * 1px);min-width:100%;padding-bottom:6px}
+.c3 .ini-tl.panning .ini-tlsc{cursor:grabbing;user-select:none}
+.c3 .ini-tl.dragging,.c3 .ini-tl.dragging *{cursor:grabbing;user-select:none}
+.c3 .ini-tlgrid{position:absolute;inset:0 0 0 var(--lw);pointer-events:none}
+.c3 .ini-tlgrid i{position:absolute;top:0;bottom:0;left:calc(var(--in-d0) * var(--in-pd) * 1px);width:1px;background:var(--border);opacity:.45}
+.c3 .ini-tlgrid i.mj{opacity:1}
+.c3 .ini-tlnow{position:absolute;top:0;bottom:0;left:calc(var(--lw) + var(--in-d0) * var(--in-pd) * 1px);width:2px;margin-left:-1px;background:var(--foreground);box-shadow:0 0 0 3px var(--accw);z-index:1;pointer-events:none}
+.c3 .ini-tlnow b{position:absolute;top:19px;left:50%;transform:translateX(-50%);font:600 var(--fs-1)/1 var(--mono);padding:3px 5px;border-radius:6px;background:var(--foreground);color:var(--background);white-space:nowrap}
+.c3 .ini-tlr{position:relative;display:grid;grid-template-columns:var(--lw) minmax(0,1fr);height:24px;align-items:stretch}
+.c3 .ini-tll{position:sticky;left:0;z-index:2;display:flex;align-items:center;gap:4px;min-width:0;padding-right:8px;padding-left:calc(6px + var(--in-dep,0) * 14px);background:var(--card);border-right:1px solid var(--border);font:var(--fs-1)/1 var(--mono);color:var(--foreground)}
+.c3 .ini-tltr{position:relative;min-width:0}
+.c3 .ini-tlr.hl .ini-tltr{background:color-mix(in oklab,var(--acc) 7%,transparent)}
+.c3 .ini-tlr.hl .ini-tll{background:color-mix(in oklab,var(--acc) 7%,var(--card))}
+.c3 .ini-tlr.hl .ini-tlname{color:var(--acc)}
+.c3 .ini-tlr.grp{height:28px}
+.c3 .ini-tlr.grp .ini-tll{font-weight:600}
+.c3 .ini-tlr.grp:not(:first-of-type){border-top:1px solid var(--border)}
+.c3 .ini-tlr.ini .ini-tll{font-weight:500}
+.c3 .ini-tlr.it .ini-tll{color:var(--muted-foreground)}
+.c3 .ini-tlr.mrk{border-top:1px dashed var(--border);margin-top:4px}
+.c3 .ini-tlhd{height:34px;border-bottom:1px solid var(--border)}
+.c3 .ini-tlhd .ini-tll{padding-left:8px;text-transform:uppercase;letter-spacing:.06em}
+.c3 .ini-tlt{position:absolute;left:calc(var(--in-d0) * var(--in-pd) * 1px);bottom:4px;padding-left:3px;font:var(--fs-1)/1 var(--mono);color:var(--muted-foreground);white-space:nowrap}
+.c3 .ini-tlt.mj{top:5px;bottom:auto;font-weight:600;color:var(--foreground)}
+.c3 .ini-tl.zooming .ini-tlt:not(.mj){opacity:0}
+.c3 .ini-tlc,.c3 .ini-tlo{display:inline-grid;place-items:center;width:18px;height:18px;flex:none;border-radius:6px;color:var(--muted-foreground);cursor:pointer}
+.c3 .ini-tlc svg{transition:transform .22s ease}
+.c3 .ini-tlc[aria-expanded="true"] svg{transform:rotate(90deg)}
+.c3 .ini-tlo{margin-left:auto;opacity:0}
+.c3 .ini-tlr.hl .ini-tlo,.c3 .ini-tlo:focus-visible{opacity:1}
+.c3 .ini-tlc0{width:18px;flex:none}
+.c3 .ini-tlx{display:flex;align-items:center;gap:5px;min-width:0;flex:1 1 auto;cursor:pointer;font:inherit;color:inherit}
+.c3 span.ini-tlx{cursor:default}
+.c3 .ini-tlkey{flex:none;color:var(--muted-foreground)}
+.c3 .ini-tlsrc{flex:none;font-size:var(--fs-1);letter-spacing:.04em;padding:0 3px;border-radius:0;color:var(--muted-foreground);background:var(--muted)}
+.c3 .ini-tlsrc.j{display:inline-grid;place-items:center;padding:0 1px;color:var(--acc);background:color-mix(in oklab,var(--acc) 12%,transparent)}
+.c3 .ini-tlsrc svg{width:11px;height:11px}
+.c3 .ini-tlname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
+.c3 .ini-tlb{--bh:8px;position:absolute;top:calc(50% - var(--bh) / 2);height:var(--bh);left:calc(var(--in-d0) * var(--in-pd) * 1px);width:max(4px,calc((var(--in-d1) - var(--in-d0)) * var(--in-pd) * 1px));border-radius:6px;background:color-mix(in oklab,var(--c) 26%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--c) 45%,transparent);overflow:hidden;cursor:pointer;transform-origin:left center;outline:none;transition:box-shadow .15s,filter .15s;z-index:1}
+.c3 .ini-tlb>i{position:absolute;inset:0 auto 0 0;width:var(--in-w,0);background:var(--c);border-radius:0}
+.c3 .ini-tlb.ini{--bh:10px}
+.c3 .ini-tlb.grp{--bh:4px}
+.c3 .ini-tlb.it{--bh:6px}
+.c3 .ini-tlb.pm{cursor:grab;background-image:repeating-linear-gradient(135deg,transparent 0 4px,color-mix(in oklab,var(--c) 18%,transparent) 4px 6px)}
+.c3 .ini-tlb.jl{overflow:visible}
+.c3 .ini-tlb .lk{position:absolute;left:calc(100% + 3px);top:50%;transform:translateY(-50%);display:inline-grid;color:var(--muted-foreground);opacity:0;transition:opacity .15s}
+.c3 .ini-tlb .lk svg{width:10px;height:10px}
+.c3 .ini-tlr.hl .ini-tlb .lk,.c3 .ini-tlb.nope .lk{opacity:1}
+.c3 .ini-tlr.hl .ini-tlb,.c3 .ini-tlb:focus-visible{box-shadow:inset 0 0 0 1px var(--c),0 0 0 3px color-mix(in oklab,var(--c) 22%,transparent)}
+.c3 .ini-tlb.drag{cursor:grabbing;box-shadow:inset 0 0 0 1px var(--c),0 0 0 3px var(--accw),var(--sh2);z-index:4}
+.c3 .ini-tlb.nope{animation:ini-shake .36s ease}
+.c3 .ini-tl.zooming .ini-tlb{transition:none}
+.c3 .ini-tlm{position:absolute;top:50%;left:calc(var(--in-d0) * var(--in-pd) * 1px);width:9px;height:9px;margin:-5px 0 0 -5px;border:1.5px solid var(--acc);border-radius:0;background:var(--card);cursor:pointer;z-index:1;transition:transform .15s}
+.c3 .ini-tlm.release{transform:rotate(45deg)}
+.c3 .ini-tlm.milestone{border-color:var(--warning)}
+.c3 .ini-tlk{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.2,.7,.2,1)}
+.c3 .ini-tlk>div{min-height:0;overflow-y:clip;overflow-x:visible;opacity:0;transition:opacity .2s}
+.c3 .ini-tlk.open{grid-template-rows:1fr}
+.c3 .ini-tlk.open>div{opacity:1}
+.c3 .ini-tlk.grow .ini-tlb{animation:ini-grow .42s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--in-j,0) * 28ms + 80ms)}
+.c3 .ini-tl.anim .ini-tlb{animation:ini-grow .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--in-i,0) * 18ms + 60ms)}
+.c3 .ini-tl.anim .ini-tlnow{animation:ini-fade .5s .2s both}
+@keyframes ini-grow{from{transform:scaleX(0);opacity:0}40%{opacity:1}to{transform:scaleX(1);opacity:1}}
+@keyframes ini-fade{from{opacity:0}to{opacity:1}}
+@keyframes ini-shake{0%,100%{translate:0}20%{translate:-4px}40%{translate:4px}60%{translate:-3px}80%{translate:2px}}
+.c3 .ini-tip{position:absolute;left:var(--in-x,0);top:var(--in-y,0);z-index:20;min-width:200px;max-width:280px;display:grid;gap:3px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--card);box-shadow:var(--sh2);font:var(--fs-1)/1.4 var(--mono);color:var(--foreground);pointer-events:none;opacity:0;translate:0 4px;transition:opacity .12s,translate .12s}
+.c3 .ini-tip.on{opacity:1;translate:0 0}
+.c3 .ini-tip b{font:600 var(--fs-2)/1.3 var(--sans)}
+.c3 .ini-tip>div{display:flex;align-items:center;gap:5px}
+.c3 .ini-tip svg{width:11px;height:11px;flex:none;color:var(--muted-foreground)}
+.c3 .ini-tip .dim{color:var(--muted-foreground)}
+.c3 .ini-tlmv{padding:0 4px;border-radius:0;background:var(--accw);color:var(--acc);font-weight:600}
+.c3 .ini-pgl .ini-fg{color:var(--foreground)}
+.c3 .ini-tlkeyi{display:inline-block;flex:none;vertical-align:middle;margin-right:4px}
+.c3 .ini-tlkeyi.now{width:2px;height:11px;background:var(--foreground)}
+.c3 .ini-tlkeyi.bar{width:14px;height:5px;border-radius:6px;background:var(--acc)}
+.c3 .ini-tlkeyi.pm{width:14px;height:6px;border-radius:6px;background:color-mix(in oklab,var(--ring) 40%,transparent);box-shadow:inset 0 0 0 1px var(--ring)}
+.c3 .ini-tlkeyi.rel{width:7px;height:7px;border:1.5px solid var(--acc);transform:rotate(45deg)}
+.c3 .ini-tlkeyi.ms{width:8px;height:8px;border:1.5px solid var(--warning)}
+
+/* ── hover (a pointer that can hover) ── */
+@media (hover:hover){
+  .c3 .ini-mi:hover{background:var(--muted)}
+  .c3 .ini-tlr:not(.ini-tlhd):hover .ini-tltr{background:color-mix(in oklab,var(--acc) 7%,transparent)}
+  .c3 .ini-tlr:not(.ini-tlhd):hover .ini-tll{background:color-mix(in oklab,var(--acc) 7%,var(--card))}
+  .c3 .ini-tlc:hover,.c3 .ini-tlo:hover{background:var(--muted);color:var(--foreground)}
+  .c3 .ini-tlr:hover .ini-tlo{opacity:1}
+  .c3 .ini-tlx:hover .ini-tlname{color:var(--acc)}
+  .c3 span.ini-tlx:hover .ini-tlname{color:inherit}
+  .c3 .ini-tlr:hover .ini-tlb .lk{opacity:1}
+  .c3 .ini-tlr:hover .ini-tlb{box-shadow:inset 0 0 0 1px var(--c),0 0 0 3px color-mix(in oklab,var(--c) 22%,transparent)}
+  .c3 .ini-tlm.release:hover{transform:rotate(45deg) scale(1.35);background:var(--acc)}
+  .c3 .ini-tlm.milestone:hover{transform:scale(1.35);background:var(--warning)}
+  .c3 .ini-hbb:hover .l span{color:var(--acc)}
+}
+
+/* ── touch: a bigger target for the page's own controls ── */
+@media (pointer:coarse){
+  .c3 .ini-b.pill,.c3 .ini-seg .ini-b,.c3 .ini-mi{min-height:44px}
+  .c3 .ini-b.chip2.lk{min-height:32px}
+}
+
+@media (max-width:760px){
+  .c3 .ini-tl{--lw:132px}
+  .c3 .ini-tlkey{display:none}
+}
+@media (prefers-reduced-motion:reduce){
+  .c3 .ini-tl *,.c3 .ini-tip{animation:none;transition:none}
+}