create-pmos 0.511.0 → 0.513.0

package/workspace/public/pm/cozy-xv.css

@@ -15,14 +15,14 @@
 /* the stage card and the Plan card (XipB .card2): a quiet outlined card, its head the name and where it stands */
 .xv-card { border: 1px solid var(--cz-hair); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
 .xv-ch { display: flex; align-items: center; gap: 8px; color: var(--cz-ink); }
-.xv-ch b { font-size: var(--fs-3); font-weight: 800; }
-.xv-ch .r { margin-left: auto; font-size: var(--fs-2); color: var(--cz-ink3); font-weight: 700; white-space: nowrap; }
+.xv-ch b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
+.xv-ch .r { margin-left: auto; font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); white-space: nowrap; line-height: var(--lh-label); }
 .xv-sc .xv-lr { padding-left: 0; padding-right: 0; }
 .xv-sl { margin: 0; }
 .xv-sl .cz-nd.tl { width: 14px; height: 14px; margin: 4px; border-radius: 3px; transform: rotate(45deg); border-style: solid; }
 .xv-none .tx small { color: var(--cz-ink3); }
 .xv-none .cz-nd { border-style: dashed; }
-.xv-sl .tail .nm { color: var(--cz-ink3); font-weight: 600; }
+.xv-sl .tail .nm { color: var(--cz-ink3); font-weight: var(--fw-strong); }
 .cz-sli.has-act { display: flex; align-items: flex-start; gap: 8px; }
 .cz-sli.has-act > .xv-none { flex: 1; }
 .xv-add { width: 32px; height: 32px; border-radius: 50%; background: var(--cz-blueink); color: var(--cz-card); display: inline-flex; align-items: center; justify-content: center; flex: none; margin-top: 6px; }
@@ -30,7 +30,7 @@
 
 /* the summary's meta: the owner's avatar and name, the workflow's icon and name */
 .xv-who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
-.xv-av { width: 22px; height: 22px; border-radius: 50%; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-1); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
+.xv-av { width: 22px; height: 22px; border-radius: 50%; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-badge); font-weight: var(--fw-strong); display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: var(--lh-badge); }
 .xv-who .wfi { color: var(--cz-ink3); }
 
 /* the plan line (XipB .pl): your plan grey, past the plan amber dashed, Jira's pace blue dashed, a tick for today */
@@ -42,12 +42,12 @@
 .xv-pl .tk { position: absolute; top: 12px; width: 2px; height: 22px; margin-left: -1px; border-radius: 1px; background: var(--cz-ink); }
 .xv-pl .tk.am { background: var(--cz-dot-risk); }
 .xv-pl .tk.e { background: var(--cz-blueink); }
-.xv-pl .lb { position: absolute; top: 38px; font-size: var(--fs-1); font-weight: 700; color: var(--cz-ink3); white-space: nowrap; }
+.xv-pl .lb { position: absolute; top: 38px; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); white-space: nowrap; line-height: var(--lh-badge); }
 .xv-pl .lb.tp { top: -2px; }
-.xv-pl .lb b { color: var(--cz-ink); font-weight: 800; }
+.xv-pl .lb b { color: var(--cz-ink); font-weight: var(--fw-strong); }
 .xv-pl .lb.w, .xv-pl .lb.w b { color: var(--cz-risk); }
 .xv-pl .lb.e, .xv-pl .lb.e b { color: var(--cz-blueink); }
-.xv-lg { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-1); color: var(--cz-ink3); font-weight: 600; }
+.xv-lg { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-badge); color: var(--cz-ink3); font-weight: var(--fw-strong); line-height: var(--lh-badge); }
 .xv-lg span { display: inline-flex; align-items: center; gap: 5px; }
 .xv-lg i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; background: var(--cz-well2); }
 .xv-lg i.over { background: repeating-linear-gradient(90deg, var(--cz-dot-risk) 0 4px, transparent 4px 6px); }
@@ -56,29 +56,29 @@
 .xv-lg i.today.am { background: var(--cz-dot-risk); }
 
 /* one row in a section (XvABoard .lr): a mark, a title, one quiet line; a ticket row is a press */
-.xv-lr { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px; border-radius: 12px; font: inherit; font-size: var(--fs-3); color: var(--cz-ink); background: none; border: 0; width: 100%; box-sizing: border-box; text-align: left; }
+.xv-lr { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px; border-radius: 12px; font: inherit; font-size: var(--fs-body); color: var(--cz-ink); background: none; border: 0; width: 100%; box-sizing: border-box; text-align: left; line-height: var(--lh-body); }
 .xv-lr + .xv-lr { border-top: 1px solid var(--cz-hair); border-radius: 0; }
 button.xv-lr { cursor: pointer; }
 @media (hover: hover) { button.xv-lr:hover { background: color-mix(in srgb, var(--cz-well) 50%, var(--cz-card)); border-radius: 12px; } }
 button.xv-lr:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: -2px; border-radius: 12px; }
 .xv-lr .w { flex: 1; min-width: 0; }
-.xv-lr .w b { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.xv-lr .w b em { font-style: normal; font-weight: 800; color: var(--cz-ink2); }
-.xv-lr .w span { display: block; font-size: var(--fs-2); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.xv-lr .r { font-size: var(--fs-2); color: var(--cz-ink3); font-weight: 600; white-space: nowrap; }
+.xv-lr .w b { display: block; font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.xv-lr .w b em { font-style: normal; font-weight: var(--fw-strong); color: var(--cz-ink2); }
+.xv-lr .w span { display: block; font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-meta); }
+.xv-lr .r { font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); white-space: nowrap; line-height: var(--lh-label); }
 .xv-mk { width: 8px; height: 8px; border-radius: 50%; flex: none; }
 .xv-mk.warn { background: var(--cz-dot-risk); }
 .xv-mk.you { background: var(--cz-blue); }
 .xv-mk.done { background: var(--cz-done); }
 
 /* quiet words, chips, a small secondary press */
-.xv-q { margin: 0; font-size: var(--fs-2); color: var(--cz-ink3); line-height: 1.45; }
+.xv-q { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: 1.45; }
 .xv-q b { color: var(--cz-ink2); }
 .xv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
-.xv-chip { height: 30px; padding: 0 12px; border-radius: 999px; background: var(--cz-well); font: 700 var(--fs-2) var(--cz-sans); color: var(--cz-ink2); display: inline-flex; align-items: center; border: 0; }
+.xv-chip { height: 30px; padding: 0 12px; border-radius: 999px; background: var(--cz-well); font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); color: var(--cz-ink2); display: inline-flex; align-items: center; border: 0; }
 button.xv-chip { cursor: pointer; }
 button.xv-chip:focus-visible, .xv-mini:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
-.xv-mini { height: 30px; padding: 0 12px; border-radius: 999px; background: var(--cz-bluebg); color: var(--cz-blueink); font: 700 var(--fs-2) var(--cz-sans); border: 0; cursor: pointer; }
+.xv-mini { height: 30px; padding: 0 12px; border-radius: 999px; background: var(--cz-bluebg); color: var(--cz-blueink); font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); border: 0; cursor: pointer; }
 
 
 @media (max-width: 760px) {

package/workspace/public/pm/cozy.css

@@ -3,15 +3,47 @@
  * A page opts in with <body class="cz"> and this file after premium.css. Every class here starts with cz-, so nothing
  * collides with premium.css. Page CSS (cozy-home.css, cozy-board.css, cozy-insights.css) builds on these tokens only. */
 
+@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/vendor/plus-jakarta-sans-var.woff2) format('woff2'); }
+/* Nunito stays only for the report templates' standard look (lib/report-pyramid.js); a face the page does not use is never fetched. */
 @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/vendor/nunito-var.woff2) format('woff2'); }
 
 /* iOS Safari inflates text it thinks is too small to read ("text autosizing"), unevenly: a wide title or sub-line grows and a narrow time
    column does not, so the calendar rows broke the scale on a phone (batch 16 item 4). The sizes are the scale's; the browser keeps them. */
 html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
+/* One class per role (feedback batch 26 item 6): new markup takes a role class rather than writing its own size and weight. */
+/* two weights only: the browser's own bold (700 on <b> and <strong>) reads as the strong weight; zero specificity, so any rule wins */
+:where(b, strong) { font-weight: var(--fw-strong); }
+.t-display { font-size: var(--fs-display); font-weight: var(--fw-display); line-height: var(--lh-display); }
+.t-page { font-size: var(--fs-page); font-weight: var(--fw-page); line-height: var(--lh-page); }
+.t-panel { font-size: var(--fs-panel); font-weight: var(--fw-panel); line-height: var(--lh-panel); }
+.t-section { font-size: var(--fs-section); font-weight: var(--fw-section); line-height: var(--lh-section); }
+.t-row { font-size: var(--fs-row); font-weight: var(--fw-row); line-height: var(--lh-row); }
+.t-body { font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); }
+.t-meta { font-size: var(--fs-meta); font-weight: var(--fw-meta); line-height: var(--lh-meta); }
+.t-label { font-size: var(--fs-label); font-weight: var(--fw-label); line-height: var(--lh-label); }
+.t-badge { font-size: var(--fs-badge); font-weight: var(--fw-badge); line-height: var(--lh-badge); }
 :root{
-/* The type scale (R27; feedback batch 15 item 2): every font size in the cozy sheets is one of these six. Hierarchy comes from weight and
-   colour, never from a half pixel. 11 marks and badges · 12 meta · 14 body and rows · 16 group heads and phone rows · 20 page titles · 28 display. */
-  --fs-1: 11px; --fs-2: 12px; --fs-3: 14px; --fs-4: 16px; --fs-5: 20px; --fs-6: 28px;
+/* Typography roles (feedback batch 26 item 6, agreed 2026-11-03): ONE face (Plus Jakarta Sans), TWO weights (400 text, 600 emphasis),
+   FOUR sizes (13 / 15 / 18 / 26) and ONE density, the most comfortable. Every font size, weight and line height in workspace/public names a
+   role token from this block; size and weight come from the role, never from the page. This file is the only place that writes the values
+   (conformance-gate.js R28-14). The premium-*.css and console3.css :root copies repeat the same values for pages that load without this file.
+     display  26 / 600 / 1.2   big numbers: North Star, KPI values
+     page     26 / 600 / 1.2   page and report titles
+     panel    18 / 600 / 1.3   a side panel, popover or card header
+     section  15 / 600 / 1.35  group heads, panel sections
+     row      15 / 600 / 1.4   the name of a thing in any list, table or menu
+     body     15 / 400 / 1.6   sentences: chat, descriptions, notes
+     meta     13 / 400 / 1.5   the quiet line under a title, dates, counts, table cells
+     label    13 / 600 / 1.35  column heads, field labels, time stamps
+     badge    13 / 600 / 1.2   initials, count pills, status chips
+   Kept on purpose: the slide canvases and report templates (their own scaled sizes) and the counts inside milestone diamonds. */
+  --fw-regular: 400; --fw-strong: 600;
+  /* not a role: a phone zooms the page into a field typed in under 16 px, so on a touch screen every field is 16 px (the rule below) */
+  --fs-field: 16px;
+  --fs-display: 26px; --fs-page: 26px; --fs-panel: 18px; --fs-section: 15px; --fs-row: 15px; --fs-body: 15px; --fs-meta: 13px; --fs-label: 13px; --fs-badge: 13px;
+  --lh-display: 1.2; --lh-page: 1.2; --lh-panel: 1.3; --lh-section: 1.35; --lh-row: 1.4; --lh-body: 1.6; --lh-meta: 1.5; --lh-label: 1.35; --lh-badge: 1.2;
+  --fw-display: var(--fw-strong); --fw-page: var(--fw-strong); --fw-panel: var(--fw-strong); --fw-section: var(--fw-strong); --fw-row: var(--fw-strong);
+  --fw-body: var(--fw-regular); --fw-meta: var(--fw-regular); --fw-label: var(--fw-strong); --fw-badge: var(--fw-strong);
 /* The Agreed design's palette (premium-agreed-design): every colour the cozy sheets use, one token each, defined only here.
    The light and dark .cz blocks and the page sheets (cozy-board, -home, -initiative, -viewer, bd-span.js) name these. */
   --cz-c-17191c: #17191C;
@@ -186,7 +218,7 @@ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
   --cz-float: 0 14px 34px -12px rgba(42,46,53,.35);
   --cz-vlift: 0 6px 18px -8px rgba(42,46,53,.2);
   --cz-sheet: 0 24px 60px -24px rgba(42,46,53,.3);
-  --cz-sans: 'Nunito', ui-sans-serif, system-ui, sans-serif;
+  --cz-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
   --cz-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
   --cz-done: var(--cz-c-1e449b); --cz-bubble: var(--cz-c-e8f1fb); --cz-solid: var(--cz-c-2f5fb3); --cz-onsolid: var(--cz-c-ffffff);
   /* the mission (pm/mission.js) and Adler's wash on the initiative card: light, then the dark block's own */
@@ -213,7 +245,7 @@ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
   --mi-path: var(--cz-c-5c6480); --mi-smoke: var(--cz-c-c9ccd6); --mi-off: var(--cz-c-7e88a8); --mi-td: var(--cz-c-e8e4dc); --mi-pz: var(--cz-c-c9ccd6);
   --iv-wash: linear-gradient(140deg, var(--cz-c-3b2e21) 0%, var(--cz-c-2b2723) 45%, var(--cz-c-232d20) 80%, var(--cz-c-1f2b1c) 100%); --iv-washhr: rgba(220,190,140,.14);
 }
-body.cz { margin: 0; font-family: var(--cz-sans); color: var(--cz-ink); background: var(--cz-ground); background-attachment: fixed; -webkit-font-smoothing: antialiased; font-size: var(--fs-3); }
+body.cz { margin: 0; font-family: var(--cz-sans); color: var(--cz-ink); background: var(--cz-ground); background-attachment: fixed; -webkit-font-smoothing: antialiased; font-size: var(--fs-body); line-height: var(--lh-body); }
 .cz .sky { display: none; }
 /* The old five-place rail is gone: premium-shell.js takes its markup out of the page, and this rule hides it until then. */
 .cz nav.rail { display: none !important; }
@@ -225,9 +257,9 @@ body.cz { margin: 0; font-family: var(--cz-sans); color: var(--cz-ink); backgrou
 .cz-fab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
 .cz-fabm { box-sizing: border-box; width: 220px; padding: 8px; display: flex; flex-direction: column; gap: 2px; border-radius: 24px; background: var(--cz-card); border: 1px solid var(--cz-hair); box-shadow: 0 24px 60px -24px rgba(27,42,24,.45); }
 .cz-fabm[hidden] { display: none; }
-.cz-fabm a, .cz-fabm button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 14px; font: inherit; font-size: var(--fs-3); color: var(--cz-ink2); text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; }
+.cz-fabm a, .cz-fabm button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 14px; font: inherit; font-size: var(--fs-body); color: var(--cz-ink2); text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; line-height: var(--lh-body); }
 .cz-fabm a:hover, .cz-fabm button:hover { background: var(--cz-well); }
-.cz-fabm [aria-current="page"] { background: var(--cz-bluebg); color: var(--cz-ink); font-weight: 700; }
+.cz-fabm [aria-current="page"] { background: var(--cz-bluebg); color: var(--cz-ink); font-weight: var(--fw-strong); }
 .cz-fabm .cz-set { border-top: 1px solid var(--cz-hair); margin-top: 4px; border-radius: 0 0 14px 14px; }
 .cz-fabm svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
 
@@ -243,29 +275,29 @@ body.cz { margin: 0; font-family: var(--cz-sans); color: var(--cz-ink); backgrou
   .cz-fabw { left: auto; right: 18px; bottom: 24px; align-items: flex-end; }
   .cz-panel { margin: 0; border-radius: 0; min-height: 100vh; padding: 12px 12px 96px; box-shadow: none; }
   .cz-top { display: flex; align-items: center; gap: 6px; min-height: 48px; }
-  .cz-top .cz-title { font-weight: 800; font-size: var(--fs-4); margin-left: 4px; margin-right: auto; }
+  .cz-top .cz-title { font-weight: var(--fw-strong); font-size: var(--fs-row); margin-left: 4px; margin-right: auto; line-height: var(--lh-row); }
 }
 
 /* ── Shared parts ── */
-.cz-pick { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 12px; border-radius: 999px; background: var(--cz-well); font: inherit; font-size: var(--fs-3); font-weight: 800; color: var(--cz-ink); border: 0; cursor: pointer; }
+.cz-pick { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 12px; border-radius: 999px; background: var(--cz-well); font: inherit; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); border: 0; cursor: pointer; line-height: var(--lh-row); }
 .cz-tabs { display: flex; gap: 2px; }
-.cz-tab { height: 34px; padding: 0 13px; border-radius: 999px; font: inherit; font-size: var(--fs-3); font-weight: 700; color: var(--cz-ink3); display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; }
+.cz-tab { height: 34px; padding: 0 13px; border-radius: 999px; font: inherit; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink3); display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; line-height: var(--lh-row); }
 .cz-tab[aria-selected="true"] { background: var(--cz-well); color: var(--cz-ink); }
-.cz-tab .n { font-weight: 600; color: var(--cz-ink3); font-size: var(--fs-2); }
+.cz-tab .n { font-weight: var(--fw-strong); color: var(--cz-ink3); font-size: var(--fs-label); line-height: var(--lh-label); }
 .cz-ib { width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--cz-ink2); background: none; border: 0; cursor: pointer; flex: none; padding: 0; }
 .cz-ib:hover { background: var(--cz-well); }
 .cz-ib svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
 .cz-ib.solid { background: var(--cz-ink); color: var(--cz-card); }
 .cz-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--cz-well); gap: 2px; }
-.cz-seg button { height: 30px; min-width: 34px; padding: 0 11px; border-radius: 999px; font: inherit; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); background: none; border: 0; cursor: pointer; }
+.cz-seg button { height: 30px; min-width: 34px; padding: 0 11px; border-radius: 999px; font: inherit; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); background: none; border: 0; cursor: pointer; line-height: var(--lh-label); }
 .cz-seg button[aria-pressed="true"] { background: var(--cz-card); color: var(--cz-ink); box-shadow: 0 1px 3px rgba(42,46,53,.12); }
 .cz-vr { width: 1px; height: 20px; background: var(--cz-hair); margin: 0 4px; flex: none; }
-.cz-chip { height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--cz-hair); background: var(--cz-card); display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); white-space: nowrap; cursor: pointer; }
+.cz-chip { height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--cz-hair); background: var(--cz-card); display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); white-space: nowrap; cursor: pointer; line-height: var(--lh-label); }
 .cz-chip:hover { background: var(--cz-well); }
 .cz-chip.gh { border-color: transparent; background: transparent; padding: 0 8px; }
 .cz-chip.on { background: var(--cz-bluebg); border-color: transparent; color: var(--cz-blueink); }
-.cz-chip b { font-weight: 800; color: var(--cz-ink); }
-.cz-pill { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-1); font-weight: 800; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
+.cz-chip b { font-weight: var(--fw-strong); color: var(--cz-ink); }
+.cz-pill { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-badge); font-weight: var(--fw-strong); border-radius: 999px; padding: 2px 8px; white-space: nowrap; line-height: var(--lh-badge); }
 .cz-pill.late { background: var(--cz-latebg); color: var(--cz-late); } .cz-pill.ok { background: var(--cz-okbg); color: var(--cz-ok); }
 .cz-pill.q { background: var(--cz-well); color: var(--cz-ink3); } .cz-pill.you { background: var(--cz-bluebg); color: var(--cz-blueink); }
 .cz-pill.red { background: var(--cz-redbg); color: var(--cz-red); } .cz-pill.risk { background: var(--cz-riskbg); color: var(--cz-risk); }
@@ -308,9 +340,9 @@ body.cz { margin: 0; font-family: var(--cz-sans); color: var(--cz-ink); backgrou
 .cz-vw-tile { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--cz-bluebg); color: var(--cz-blueink); flex: none; }
 .cz-vw-tile svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
 .cz-vw-t { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; }   /* the kind in small grey before the bold title, on one line (AgHome) */
-.cz-vw-kind { margin: 0; flex: none; max-width: 45%; font-size: var(--fs-2); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.cz-vw-kind { margin: 0; flex: none; max-width: 45%; font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-meta); }
 .cz-vw-kind:empty { display: none; }
-.cz-vw-title { margin: 0; min-width: 0; font-size: var(--fs-4); font-weight: 700; color: var(--cz-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.cz-vw-title { margin: 0; min-width: 0; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-row); }
 .cz-vw-ib { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--cz-ink2); background: none; border: 0; padding: 0; cursor: pointer; flex: none; font: inherit; }
 .cz-vw-ib svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
 .cz-vw-ib[data-cz-vw="close"] svg { stroke-width: 2; }
@@ -332,8 +364,8 @@ body.cz { margin: 0; font-family: var(--cz-sans); color: var(--cz-ink); backgrou
 .cz-ph-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--cz-card); color: var(--cz-ink3); flex: none; }
 .cz-ph-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
 .cz-ph-t { min-width: 0; }
-.cz-ph-l { margin: 0; font-size: var(--fs-3); font-weight: 700; color: var(--cz-ink2); }
-.cz-ph-n { margin: 2px 0 0; font-size: var(--fs-2); color: var(--cz-ink3); }
+.cz-ph-l { margin: 0; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-row); }
+.cz-ph-n { margin: 2px 0 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 
 /* ── slide editor on the cozy pages (moved from premium-vw-slides.css, which stays on the console type scale) ── */
 /* ── the cozy pages (premium-agreed-design, area viewer): the console tokens this sheet names, mapped to the cozy tokens of cozy.css,
@@ -341,12 +373,12 @@ body.cz { margin: 0; font-family: var(--cz-sans); color: var(--cz-ink); backgrou
 .cz .sl,.cz .sl-pres,.cz .sl-pop,.cz.sl-audw{--hair:var(--cz-hair);--ink:var(--cz-ink);--ink-2:var(--cz-ink2);--ink-3:var(--cz-ink3);--ember:var(--cz-blue);--card:var(--cz-card);--card-solid:var(--cz-card);
   --well:var(--cz-well);--solid:var(--cz-blueink);--on-solid:var(--cz-card);--spot:var(--cz-bluebg);--bad:var(--cz-red);--sans:var(--cz-sans);--mono:var(--cz-mono);--card-shadow:var(--cz-lift)}
 /* the report slide kicker (ReportPanel.dc.html): 20px, 700 */
-.sl-cv[data-th="report"] .r-kicker .sl-tx{display:inline-block;width:auto;height:auto;padding:6px 16px;border-radius:8px;background:var(--sso);color:var(--sfg);font-size:var(--fs-5);font-weight:700;letter-spacing:.06em}
+.sl-cv[data-th="report"] .r-kicker .sl-tx{display:inline-block;width:auto;height:auto;padding:6px 16px;border-radius:8px;background:var(--sso);color:var(--sfg);font-size:20px;font-weight:700;letter-spacing:.06em}
 
 /* testing fixes: a phone zooms the page into any field typed in under 16 px, and the page then sits off the screen's right edge with
    the keyboard open. On a touch screen every field is at least 16 px. */
 @media (hover: none) and (pointer: coarse) {
-  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { font-size: var(--fs-4) !important; }
+  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { font-size: var(--fs-field) !important; line-height: var(--lh-body); }
 }
 /* testing fixes: nothing may widen the page on a phone (a menu past the right edge made the whole page zoom out) */
 /* on body only: an overflow set on html stops body.cz-home's overflow:hidden from reaching the viewport, and the whole page then scrolls */

package/workspace/public/pm/dash-view.css

@@ -4,18 +4,18 @@
  * The body is a size container: 720 px or wider lays the blocks in two columns, each block its own card (PbA7). */
 
 .db { container-type: inline-size; display: flex; flex-direction: column; gap: 14px; padding: 2px 0 18px; color: var(--cz-ink); font-family: var(--cz-sans); }
-.db-wait, .db-note { margin: 0; font-size: var(--fs-2); line-height: 1.5; color: var(--cz-ink3); }
+.db-wait, .db-note { margin: 0; font-size: var(--fs-meta); line-height: 1.5; color: var(--cz-ink3); }
 .db-grid { display: flex; flex-direction: column; gap: 14px; }
 .db-b { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
-.db-h { margin: 0; font-size: var(--fs-4); font-weight: 800; }
+.db-h { margin: 0; font-size: var(--fs-section); font-weight: var(--fw-strong); line-height: var(--lh-section); }
 .db-card { background: var(--cz-card); border: 1px solid var(--cz-hair); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
 .db-list { gap: 0; padding-top: 4px; padding-bottom: 4px; }
 
 /* the ✦ line: what Claude handled, with the M face; a warning is the honest face on a warm edge */
 .db-hd { display: flex; align-items: flex-start; gap: 12px; border-radius: 16px; padding: 12px 14px; background: var(--cz-bluebg); border: 1px solid color-mix(in srgb, var(--cz-blueink) 18%, transparent); }
 .db-hd.warn { background: var(--cz-latebg); border-color: color-mix(in srgb, var(--cz-late) 55%, transparent); }
-.db-hd p { margin: 0; flex: 1; min-width: 0; font-size: var(--fs-4); line-height: 1.45; color: var(--cz-ink2); }
-.db-hd b { color: var(--cz-ink); font-weight: 800; }
+.db-hd p { margin: 0; flex: 1; min-width: 0; font-size: var(--fs-body); line-height: 1.45; color: var(--cz-ink2); }
+.db-hd b { color: var(--cz-ink); font-weight: var(--fw-strong); }
 .db-face { flex: none; width: 36px; height: 36px; display: inline-flex; }
 .db-face svg { width: 36px; height: 36px; }
 
@@ -24,24 +24,24 @@
 button.db-row, button.db-rep, .db-sum, .db-fold { cursor: pointer; }
 .db-list > .db-row + .db-row, .db-list > .db-row + .db-fold, .db-reps > * + * { border-top: 1px solid var(--cz-hair); }
 .db-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
-.db-rt b { font-size: var(--fs-4); font-weight: 800; line-height: 1.3; }
-.db-rt small, .db-r { font-size: var(--fs-2); line-height: 1.4; color: var(--cz-ink3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.db-rt b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: 1.3; }
+.db-rt small, .db-r { font-size: var(--fs-meta); line-height: 1.4; color: var(--cz-ink3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
 .db-r { flex: none; text-align: right; }
-.db-fold .db-rt b { font-size: var(--fs-3); }
+.db-fold .db-rt b { font-size: var(--fs-body); line-height: var(--lh-body); }
 .db-fold > svg, .db-rep > svg:last-child, .db-sum > svg:last-child { flex: none; color: var(--cz-ink3); }
 .db-fold[aria-expanded="true"] > svg { transform: rotate(180deg); }
 .db-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--cz-dot-q); }
 .db-dot.ok { background: var(--cz-dot-ok); } .db-dot.risk { background: var(--cz-dot-risk); } .db-dot.late { background: var(--cz-dot-late); }
 .db-dot.q { background: transparent; border: 2px solid var(--cz-ink3); box-sizing: border-box; }
 .db-dots { display: inline-flex; gap: 4px; flex: none; }
-.db-who { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--cz-well); color: var(--cz-ink2); font-size: var(--fs-1); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
-.db-tag { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 4px; border-radius: 5px; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-1); font-weight: 800; }
-.db-none { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-3); color: var(--cz-ink3); }
-.db-meta, .db-more, .db-p { margin: 0; font-size: var(--fs-2); line-height: 1.5; color: var(--cz-ink3); }
-.db-p { font-size: var(--fs-3); color: var(--cz-ink2); }
+.db-who { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--cz-well); color: var(--cz-ink2); font-size: var(--fs-badge); font-weight: var(--fw-strong); display: inline-flex; align-items: center; justify-content: center; line-height: var(--lh-badge); }
+.db-tag { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 4px; border-radius: 5px; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-badge); font-weight: var(--fw-strong); line-height: var(--lh-badge); }
+.db-none { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); color: var(--cz-ink3); line-height: var(--lh-body); }
+.db-meta, .db-more, .db-p { margin: 0; font-size: var(--fs-meta); line-height: 1.5; color: var(--cz-ink3); }
+.db-p { font-size: var(--fs-body); color: var(--cz-ink2); line-height: var(--lh-body); }
 .db-top { display: flex; align-items: center; gap: 10px; }
-.db-top > small { margin-left: auto; font-size: var(--fs-2); color: var(--cz-ink3); text-align: right; }
-.db-big { font-size: var(--fs-5); font-weight: 800; }
+.db-top > small { margin-left: auto; font-size: var(--fs-meta); color: var(--cz-ink3); text-align: right; line-height: var(--lh-meta); }
+.db-big { font-size: var(--fs-display); font-weight: var(--fw-strong); line-height: var(--lh-display); }
 
 /* the stages of Ships: done green, now blue, next grey */
 .db-steps { display: flex; align-items: flex-start; }
@@ -51,14 +51,14 @@ button.db-row, button.db-rep, .db-sum, .db-fold { cursor: pointer; }
 .db-st.done::before, .db-st.now::before { background: var(--cz-dot-ok); }
 .db-st i { width: 12px; height: 12px; transform: rotate(45deg); border-radius: 3px; background: var(--cz-well2, var(--cz-hair)); position: relative; }
 .db-st.done i { background: var(--cz-dot-ok); } .db-st.now i { background: var(--cz-blue); }
-.db-st small { font-size: var(--fs-1); color: var(--cz-ink3); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
+.db-st small { font-size: var(--fs-meta); color: var(--cz-ink3); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; line-height: var(--lh-meta); }
 
 /* milestones: the track, then one row each */
 .db-trk { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; background: linear-gradient(var(--cz-hair), var(--cz-hair)) center / 100% 2px no-repeat; }
 .db-trk i { width: 12px; height: 12px; transform: rotate(45deg); border-radius: 3px; background: var(--cz-dot-q); }
 .db-trk i.ok, .db-trk i.done { background: var(--cz-dot-ok); } .db-trk i.risk { background: var(--cz-dot-risk); } .db-trk i.late { background: var(--cz-dot-late); }
-.db-ms { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: var(--fs-3); }
-.db-ms .db-rt { font-weight: 600; }
+.db-ms { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: var(--fs-body); line-height: var(--lh-body); }
+.db-ms .db-rt { font-weight: var(--fw-strong); }
 .db-gh { display: flex; align-items: center; gap: 4px; }
 .db-gh > .db-sum { flex: 1; }
 .db-hr { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -10px 0; }
@@ -69,7 +69,7 @@ button.db-row, button.db-rep, .db-sum, .db-fold { cursor: pointer; }
 
 /* Ready for build: the checklist */
 .db-cks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
-.db-ck { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: var(--fs-3); }
+.db-ck { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: var(--fs-body); line-height: var(--lh-body); }
 .db-box { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--cz-ink3); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
 .db-ck.on .db-box { background: var(--cz-blue); border-color: var(--cz-blue); color: var(--cz-onsolid); }
 
@@ -77,7 +77,7 @@ button.db-row, button.db-rep, .db-sum, .db-fold { cursor: pointer; }
 .db-need { background: var(--cz-bluebg); border-color: color-mix(in srgb, var(--cz-blueink) 18%, transparent); }
 .db-nq { display: flex; gap: 10px; align-items: flex-start; }
 .db-nq > svg { flex: none; margin-top: 2px; color: var(--cz-blueink); }
-.db-pick { font-size: var(--fs-2); font-weight: 800; color: var(--cz-blueink); margin-top: 4px; }
+.db-pick { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-blueink); margin-top: 4px; line-height: var(--lh-label); }
 .db-acts { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
 .db-ib { all: unset; box-sizing: border-box; cursor: pointer; width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--cz-ink2); flex: none; }
 .db-ib.solid { width: 44px; height: 44px; background: var(--cz-blue); color: var(--cz-onsolid); }
@@ -92,9 +92,9 @@ button.db-row, button.db-rep, .db-sum, .db-fold { cursor: pointer; }
 .db-held .db-dic { width: auto; height: auto; background: none; color: var(--cz-blueink); margin-top: 2px; }
 .db-late { display: flex; flex-direction: column; }
 .db-hu { gap: 10px; }
-.db-hut { font-size: var(--fs-5); font-weight: 800; line-height: 1.35; }
+.db-hut { font-size: var(--fs-display); font-weight: var(--fw-strong); line-height: 1.35; }
 .db-chips { display: flex; flex-wrap: wrap; gap: 6px; }
-.db-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--cz-well); font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); }
+.db-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--cz-well); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
 .db-trust .db-acts { margin-top: -6px; }
 .db-done { padding-top: 2px; padding-bottom: 2px; }
 
@@ -115,16 +115,16 @@ button.db-row, button.db-rep, .db-sum, .db-fold { cursor: pointer; }
 .db-krr { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--cz-hair); }
 .db-krr:first-child { border-top: 0; padding-top: 0; }
 .db-krr .db-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
-.db-krw { font-size: var(--fs-2); color: var(--cz-ink3); text-decoration-color: color-mix(in srgb, var(--cz-ink) 30%, transparent); }
-.db-krn { font-size: var(--fs-5); font-weight: 800; line-height: 1.3; }
+.db-krw { font-size: var(--fs-meta); color: var(--cz-ink3); text-decoration-color: color-mix(in srgb, var(--cz-ink) 30%, transparent); line-height: var(--lh-meta); }
+.db-krn { font-size: var(--fs-panel); font-weight: var(--fw-strong); line-height: 1.3; }
 .db-krt { color: var(--cz-blueink); }
 .db-kre { display: flex; gap: 8px; }
-.db-kri { flex: 1; min-width: 0; font: inherit; font-size: var(--fs-4); padding: 6px 10px; border: 1px solid var(--cz-hair); border-radius: 10px; background: var(--cz-card); color: var(--cz-ink); }
+.db-kri { flex: 1; min-width: 0; font: inherit; font-size: var(--fs-body); padding: 6px 10px; border: 1px solid var(--cz-hair); border-radius: 10px; background: var(--cz-card); color: var(--cz-ink); line-height: var(--lh-body); }
 .db-kri.n { flex: none; width: 5.5em; }
-.db-krs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-2); color: var(--cz-ink2, var(--cz-ink3)); }
+.db-krs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-meta); color: var(--cz-ink2, var(--cz-ink3)); line-height: var(--lh-meta); }
 .db-krs > svg { color: var(--cz-dot-ok); }
-.db-krp { border-radius: 999px; padding: 1px 8px; background: var(--cz-well); font-weight: 800; }
-.db-krq, .db-krf small { margin: 0; font-size: var(--fs-2); color: var(--cz-ink3); }
+.db-krp { border-radius: 999px; padding: 1px 8px; background: var(--cz-well); font-weight: var(--fw-strong); }
+.db-krq, .db-krf small { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .db-krq { border-top: 1px solid var(--cz-hair); padding-top: 10px; }
 .db-krf { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--cz-hair); padding-top: 10px; }
 .db-krf small { flex: 1; }

package/workspace/public/pm/hi-pop.css

@@ -1,9 +1,9 @@
 /* hi-pop.css — the initiative's popovers, menus and the toast with Undo (pm/hi-pop.js), the same on Home and the Board (feedback batch 14
  * item 5). Moved out of home-ini.css, which Home loads after this sheet, so Home's phone rules still win. Every class starts with hi-. */
 /* buttons, as the canvas draws them */
-.hi-btn { height: 36px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-3); font-weight: 700; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); white-space: nowrap; cursor: pointer; }
+.hi-btn { height: 36px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-row); font-weight: var(--fw-strong); border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); white-space: nowrap; cursor: pointer; line-height: var(--lh-row); }
 .hi-btn svg { flex: none; }
-.hi-btn.sm { height: 30px; padding: 0 11px; font-size: var(--fs-2); }
+.hi-btn.sm { height: 30px; padding: 0 11px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .hi-btn.dark { background: var(--cz-ink); border-color: transparent; color: var(--cz-card); }
 .hi-btn.ghost { border-color: transparent; background: transparent; color: var(--cz-ink2); }
 .hi-btn.ghost:hover { background: var(--cz-well); }
@@ -13,7 +13,7 @@
 .hi-ib.solid { background: var(--cz-ink); color: var(--cz-card); }
 .hi-ib.sm { width: 28px; height: 28px; }
 /* ── the popovers: Move anyway, Back, the menus ── */
-.hi-pop { position: fixed; z-index: 90; left: var(--hi-x, 24px); top: var(--hi-y, 24px); width: 360px; max-width: calc(100vw - 24px); box-sizing: border-box; background: var(--cz-card); color: var(--cz-ink); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 10px; font-family: var(--cz-sans); font-size: var(--fs-3); box-shadow: 0 24px 60px -24px rgba(42,46,53,.45), 0 0 0 1px var(--cz-hair); }
+.hi-pop { position: fixed; z-index: 90; left: var(--hi-x, 24px); top: var(--hi-y, 24px); width: 360px; max-width: calc(100vw - 24px); box-sizing: border-box; background: var(--cz-card); color: var(--cz-ink); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 10px; font-family: var(--cz-sans); font-size: var(--fs-body); box-shadow: 0 24px 60px -24px rgba(42,46,53,.45), 0 0 0 1px var(--cz-hair); line-height: var(--lh-body); }
 .hi-pop.menu { width: 290px; padding: 8px; gap: 2px; }
 .hi-pop.sheet { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none; border-radius: 28px 28px 0 0; padding: 10px 16px 28px; box-shadow: 0 -20px 50px -20px rgba(42,46,53,.35); }
 .hi-pop.sheet .hi-btn { height: 48px; justify-content: center; }
@@ -21,14 +21,14 @@
 .hi-grab { width: 40px; height: 5px; border-radius: 3px; background: var(--cz-c-d9dce1); align-self: center; margin-bottom: 4px; }
 .hi-scrim { position: fixed; inset: 0; z-index: 89; background: rgba(42,46,53,.18); }
 .hi-pop p { margin: 0; }
-.hi-h3 { font-size: var(--fs-4); font-weight: 800; }
-.hi-lbl { margin: 0; font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink3); }
-.hi-small { margin: 0; font-size: var(--fs-2); color: var(--cz-ink3); }
-.hi-warn { background: var(--cz-riskbg); color: var(--cz-risk); border-radius: 14px; padding: 12px 14px; font-size: var(--fs-2); }
+.hi-h3 { font-size: var(--fs-section); font-weight: var(--fw-strong); line-height: var(--lh-section); }
+.hi-lbl { margin: 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
+.hi-small { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.hi-warn { background: var(--cz-riskbg); color: var(--cz-risk); border-radius: 14px; padding: 12px 14px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .hi-field { display: flex; flex-direction: column; gap: 6px; }
-.hi-field > span { font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink2); }
-.hi-field em { font-style: normal; font-weight: 600; color: var(--cz-ink3); }
-.hi-field input, .hi-field textarea { box-sizing: border-box; width: 100%; border: 0; border-radius: 14px; background: var(--cz-well); color: var(--cz-ink); font: inherit; font-size: var(--fs-3); padding: 10px 14px; outline: 0; }
+.hi-field > span { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
+.hi-field em { font-style: normal; font-weight: var(--fw-strong); color: var(--cz-ink3); }
+.hi-field input, .hi-field textarea { box-sizing: border-box; width: 100%; border: 0; border-radius: 14px; background: var(--cz-well); color: var(--cz-ink); font: inherit; font-size: var(--fs-body); padding: 10px 14px; outline: 0; line-height: var(--lh-body); }
 .hi-field input { height: 42px; }
 .hi-field textarea { min-height: 56px; resize: vertical; }
 .hi-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@@ -36,23 +36,23 @@
 .hi-chips .cz-chip[aria-pressed="true"] { background: var(--cz-bluebg); border-color: transparent; color: var(--cz-blueink); }
 .hi-cks { display: flex; flex-direction: column; gap: 4px; }
 .hi-pop:not(.sheet) .hi-cks { display: none; }   /* the card shows the items; the phone's sheet repeats them (InPhone) */
-.hi-ck { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2); color: var(--cz-ink2); padding: 2px 0; }
+.hi-ck { display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--cz-ink2); padding: 2px 0; line-height: var(--lh-meta); }
 .hi-ck i { width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--cz-c-c5c9d0); box-sizing: border-box; display: inline-grid; place-items: center; flex: none; color: var(--cz-card); }
 .hi-ck.on i { background: var(--cz-ink); border-color: var(--cz-ink); }
-.hi-mlbl { margin: 0; font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink3); padding: 8px 12px 4px; }
+.hi-mlbl { margin: 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); padding: 8px 12px 4px; line-height: var(--lh-label); }
 .hi-hr { height: 1px; background: var(--cz-hair); margin: 4px 0; }
-.hi-mi { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 12px; font: inherit; font-size: var(--fs-3); font-weight: 600; color: var(--cz-ink); width: 100%; border: 0; background: none; cursor: pointer; text-align: left; }
+.hi-mi { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 12px; font: inherit; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); width: 100%; border: 0; background: none; cursor: pointer; text-align: left; line-height: var(--lh-row); }
 .hi-mi:hover, .hi-mi.on { background: var(--cz-well); }
 .hi-mi span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.hi-mi em { font-style: normal; margin-left: auto; font-size: var(--fs-2); color: var(--cz-ink3); font-weight: 600; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hi-mi em { font-style: normal; margin-left: auto; font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--lh-label); }
 .hi-mi:disabled { opacity: .45; cursor: default; }
 .hi-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
 
 /* the toast with Undo: info, so it does not move */
-.hi-toast { position: fixed; z-index: 95; left: 50%; bottom: 40px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: 999px; background: var(--cz-ink); color: var(--cz-card); font-family: var(--cz-sans); font-size: var(--fs-3); box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); max-width: calc(100vw - 32px); }
+.hi-toast { position: fixed; z-index: 95; left: 50%; bottom: 40px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: 999px; background: var(--cz-ink); color: var(--cz-card); font-family: var(--cz-sans); font-size: var(--fs-body); box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); max-width: calc(100vw - 32px); line-height: var(--lh-body); }
 .hi-toast[hidden] { display: none; }
 .hi-toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.hi-toast button { height: 32px; padding: 0 12px; border-radius: 999px; border: 0; background: rgba(255,255,255,.14); color: inherit; font: inherit; font-weight: 700; cursor: pointer; flex: none; }
+.hi-toast button { height: 32px; padding: 0 12px; border-radius: 999px; border: 0; background: rgba(255,255,255,.14); color: inherit; font: inherit; font-weight: var(--fw-strong); cursor: pointer; flex: none; }
 .hi-pop.wide:not(.sheet) { width: 560px; }
 .hi-pop.menu .hi-mi .wfi { margin-left: -2px; }
 .hi-wfpad { padding: 4px 12px 6px; }
@@ -61,29 +61,29 @@
 .hi-wfh { display: flex; align-items: center; gap: 8px; }
 .hi-wfh .hi-h3 { flex: 1; min-width: 0; }
 .hi-wfrows { display: flex; flex-direction: column; }
-.hi-wfrow { display: grid; grid-template-columns: minmax(0, 130px) 14px minmax(0, 130px) minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--cz-hair); font-size: var(--fs-3); }
+.hi-wfrow { display: grid; grid-template-columns: minmax(0, 130px) 14px minmax(0, 130px) minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--cz-hair); font-size: var(--fs-body); line-height: var(--lh-body); }
 .hi-wfrow:first-child { border-top: 0; }
 .hi-wfrow span { min-width: 0; }
-.hi-wfrow em { display: block; font-style: normal; font-size: var(--fs-2); color: var(--cz-ink3); }
+.hi-wfrow em { display: block; font-style: normal; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .hi-wfland { display: flex; align-items: center; gap: 8px; }
 .hi-wfland span { flex: 1; }
-.hi-wfland select { font: inherit; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink); background: var(--cz-well); border: 0; border-radius: 10px; padding: 6px 10px; max-width: 60%; }
+.hi-wfland select { font: inherit; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink); background: var(--cz-well); border: 0; border-radius: 10px; padding: 6px 10px; max-width: 60%; line-height: var(--lh-label); }
 /* A's bridge (batch 20 item 3, canvas WmB): old stages grouped into each new stage, the scope, one picker per old stage, ✕ and ✓ as icons */
 .hi-wfrow.hi-wfgrp { grid-template-columns: minmax(0, 1fr) 14px minmax(0, 150px); }
 .hi-wfgrp i { font-style: normal; color: var(--cz-ink3); }
 .hi-wfgrp em { display: inline; margin-left: 4px; }
 .hi-wfseg { display: inline-flex; align-self: flex-start; background: var(--cz-well); border-radius: 14px; padding: 3px; }
-.hi-wfsegb { min-height: 32px; padding: 0 12px; border: 0; border-radius: 11px; background: none; color: var(--cz-ink2); font: inherit; font-size: var(--fs-2); font-weight: 800; cursor: pointer; }
+.hi-wfsegb { min-height: 32px; padding: 0 12px; border: 0; border-radius: 11px; background: none; color: var(--cz-ink2); font: inherit; font-size: var(--fs-label); font-weight: var(--fw-strong); cursor: pointer; line-height: var(--lh-label); }
 .hi-wfsegb.on { background: var(--cz-card); color: var(--cz-ink); box-shadow: 0 1px 2px rgba(20,24,40,.15); }
 .hi-wfmore summary { cursor: pointer; color: var(--cz-ink2); }
 .hi-wfmaps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding-top: 8px; }
 .hi-wfmap { display: flex; align-items: center; gap: 8px; }
 .hi-wfmap span { flex: 1; min-width: 0; }
-.hi-wfmap select { font: inherit; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink); background: var(--cz-well); border: 0; border-radius: 10px; padding: 6px 8px; max-width: 60%; }
+.hi-wfmap select { font: inherit; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink); background: var(--cz-well); border: 0; border-radius: 10px; padding: 6px 8px; max-width: 60%; line-height: var(--lh-label); }
 .hi-actsi { justify-content: flex-end; }
 .hi-actsi .hi-ib { width: 44px; height: 44px; background: var(--cz-well); }
 .hi-actsi .hi-ib.pri { background: var(--cz-solid); color: var(--cz-onsolid); }
-.hi-end { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--cz-well); font-size: var(--fs-3); }
+.hi-end { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--cz-well); font-size: var(--fs-body); line-height: var(--lh-body); }
 .hi-end p { margin: 0; flex: 1; min-width: 0; color: var(--cz-ink2); }
 .hi-endi { display: inline-flex; color: var(--cz-ink3); }
 @media (max-width: 760px) {
@@ -95,13 +95,13 @@
 .hi-pop .wfi { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 6px; background: var(--cz-well); color: var(--cz-ink2); }
 .hi-pop .wfi svg { width: 70%; height: 70%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
 /* a small form in the Viewer (the Board's Add a stakeholder) */
-.hi-form { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 24px; font-size: var(--fs-3); color: var(--cz-ink); }
+.hi-form { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 24px; font-size: var(--fs-body); color: var(--cz-ink); line-height: var(--lh-body); }
 /* the stage chip's picker (pm/ini-more.js stagePick; batch 16 item 5c, FmI2Stage): every stage, the current one marked, the switch, then the endings */
-.hi-sp.on { background: var(--cz-bluebg); font-weight: 800; }
-.hi-spn { flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--cz-well); font-style: normal; font-size: var(--fs-1); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; color: var(--cz-ink2); }
+.hi-sp.on { background: var(--cz-bluebg); font-weight: var(--fw-strong); }
+.hi-spn { flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--cz-well); font-style: normal; font-size: var(--fs-badge); font-weight: var(--fw-strong); display: inline-flex; align-items: center; justify-content: center; color: var(--cz-ink2); line-height: var(--lh-badge); }
 .hi-spn.ms { transform: rotate(45deg) scale(.7); border-radius: 3px; background: var(--cz-ink3); }
 .hi-sp.on .hi-spn { background: var(--cz-blue); color: var(--cz-card); }
-.hi-spm span { color: var(--cz-ink3); font-size: var(--fs-2); }
+.hi-spm span { color: var(--cz-ink3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .hi-spw { cursor: default; }
 .hi-spw:hover { background: none; }
 .hi-spw span { flex: 1; }