create-pmos 0.511.0 → 0.513.0

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

@@ -7,29 +7,29 @@
  * A part the design does not draw carries the cozy "Waiting for design" card (cozy-placeholder.js) or the small .vz-wait marker. */
 .vz { --vz-solid: var(--cz-blueink); --vz-on: var(--cz-card); --vz-ember: var(--cz-blue); --vz-eink: var(--cz-blueink); --vz-spot: var(--cz-bluebg);
   --vz-ok: var(--cz-blueink); --vz-bad: var(--cz-red);
-  box-sizing: border-box; padding: 16px 20px 28px; display: flex; flex-direction: column; gap: 12px; font-size: var(--fs-3); color: var(--cz-ink); font-family: var(--cz-sans); }
+  box-sizing: border-box; padding: 16px 20px 28px; display: flex; flex-direction: column; gap: 12px; font-size: var(--fs-body); color: var(--cz-ink); font-family: var(--cz-sans); line-height: var(--lh-body); }
 :where(.vz) *, :where(.vz) *::before, :where(.vz) *::after { box-sizing: border-box; }
 :where(.vz) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
 :where(.vz) button:disabled { cursor: default; opacity: .45; }
 .vz .hv:hover:not(:disabled), .vz .vz-hv:hover:not(:disabled) { background: color-mix(in oklab, var(--cz-ink) 6%, transparent); }
 :where(.vz) svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
 :where(.vz) p { margin: 0; }
-:where(.vz) h3 { margin: 0; font-size: var(--fs-3); font-weight: 700; }
-:where(.vz) h3 small { font-size: inherit; font-weight: 500; color: var(--cz-ink3); margin-left: 4px; }
-.vz .vz-note { font-size: var(--fs-2); line-height: 1.5; color: var(--cz-ink3); }
+:where(.vz) h3 { margin: 0; font-size: var(--fs-section); font-weight: var(--fw-strong); line-height: var(--lh-section); }
+:where(.vz) h3 small { font-size: inherit; font-weight: var(--fw-regular); color: var(--cz-ink3); margin-left: 4px; }
+.vz .vz-note { font-size: var(--fs-meta); line-height: 1.5; color: var(--cz-ink3); }
 .vz .vz-col { display: flex; flex-direction: column; gap: 6px; }
 .vz .vz-col14 { display: flex; flex-direction: column; gap: 14px; }
 .vz .vz-sp { flex: 1; }
-.vz .vz-wait { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; background: var(--cz-well); color: var(--cz-ink3); font-size: var(--fs-1); font-weight: 700; white-space: nowrap; }
-.vz .vz-msg { padding: 8px 10px; border-radius: 12px; background: var(--cz-well); font-size: var(--fs-2); color: var(--cz-ink2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.vz .vz-wait { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; background: var(--cz-well); color: var(--cz-ink3); font-size: var(--fs-badge); font-weight: var(--fw-strong); white-space: nowrap; line-height: var(--lh-badge); }
+.vz .vz-msg { padding: 8px 10px; border-radius: 12px; background: var(--cz-well); font-size: var(--fs-meta); color: var(--cz-ink2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: var(--lh-meta); }
 .vz .vz-msg[data-tone="bad"] { background: var(--cz-redbg); color: var(--cz-red); }
-.vz .vz-link { color: var(--vz-eink); font-weight: 600; font-size: var(--fs-2); min-height: 26px; padding: 0 8px; border-radius: 8px; }
-.vz .vz-in { min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--cz-hair); background: var(--cz-card); font: var(--fs-3) var(--cz-sans); color: var(--cz-ink); }
+.vz .vz-link { color: var(--vz-eink); font-weight: var(--fw-strong); font-size: var(--fs-label); min-height: 26px; padding: 0 8px; border-radius: 8px; line-height: var(--lh-label); }
+.vz .vz-in { min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--cz-hair); background: var(--cz-card); font: var(--fs-body)/var(--lh-body) var(--cz-sans); color: var(--cz-ink); }
 .vz select.vz-in { padding-right: 8px; }
 
 /* ── the meeting: head ── */
 .vz-r1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
-.vz-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: var(--fs-2); font-weight: 700; background: var(--cz-well); color: var(--cz-ink2); white-space: nowrap; }
+.vz-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: var(--fs-label); font-weight: var(--fw-strong); background: var(--cz-well); color: var(--cz-ink2); white-space: nowrap; line-height: var(--lh-label); }
 .vz-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--cz-ink3); flex: none; }
 .vz-chip[data-tone="ok"] i { background: var(--vz-ok); }
 .vz-chip[data-tone="warn"], .vz-chip[data-tone="rec"] { background: var(--vz-spot); color: var(--vz-eink); }
@@ -37,8 +37,8 @@
 .vz-chip[data-tone="rec"] i { animation: vz-pulse 1.6s ease-in-out infinite; }
 @keyframes vz-pulse { 50% { opacity: .35; } }
 @media (prefers-reduced-motion: reduce) { .vz-chip[data-tone="rec"] i { animation: none; } }
-.vz-ppl { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 999px; font-size: var(--fs-2); color: var(--cz-ink2); background: var(--cz-well) !important; }
-.vz-pri { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 14px; border-radius: 999px; font-size: var(--fs-3); font-weight: 700; background: var(--vz-solid) !important; color: var(--vz-on) !important; white-space: nowrap; }
+.vz-ppl { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 999px; font-size: var(--fs-meta); color: var(--cz-ink2); background: var(--cz-well) !important; line-height: var(--lh-meta); }
+.vz-pri { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 14px; border-radius: 999px; font-size: var(--fs-row); font-weight: var(--fw-strong); background: var(--vz-solid) !important; color: var(--vz-on) !important; white-space: nowrap; line-height: var(--lh-row); }
 .vz-pri i { width: 8px; height: 8px; border-radius: 50%; background: var(--vz-ember); flex: none; }
 .vz-pri[data-k="stop"] i { border-radius: 2px; }
 .vz-pri.vz-out { background: transparent !important; color: var(--cz-ink) !important; border: 1px solid var(--cz-hair) !important; }
@@ -46,22 +46,22 @@
 .vz-more { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--cz-ink2); border: 1px solid var(--cz-hair) !important; flex: none; }
 .vz-menu { align-self: flex-end; display: flex; flex-direction: column; min-width: 240px; max-width: 100%; padding: 6px; border-radius: 14px; background: var(--cz-card); box-shadow: var(--cz-lift); border: 1px solid var(--cz-hair); }
 .vz-menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border-radius: 10px; }
-.vz-menu b { font-size: var(--fs-3); font-weight: 600; }
-.vz-menu small { font-size: var(--fs-1); color: var(--cz-ink3); }
+.vz-menu b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
+.vz-menu small { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .vz-people { display: flex; flex-wrap: wrap; gap: 6px; }
-.vz-person { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--cz-well); font-size: var(--fs-2); }
-.vz-person i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--cz-card); font-style: normal; font-size: var(--fs-1); font-weight: 700; }
-.vz-r2 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-2); color: var(--cz-ink2); }
+.vz-person { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--cz-well); font-size: var(--fs-meta); line-height: var(--lh-meta); }
+.vz-person i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--cz-card); font-style: normal; font-size: var(--fs-badge); font-weight: var(--fw-strong); line-height: var(--lh-badge); }
+.vz-r2 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 .vz-r2 > span { display: inline-flex; align-items: center; gap: 6px; }
-.vz-r2 b { font-weight: 700; color: var(--cz-ink); }
+.vz-r2 b { font-weight: var(--fw-strong); color: var(--cz-ink); }
 .vz-ser { gap: 2px !important; }
 .vz-nav { width: 26px; height: 26px; border-radius: 8px; display: grid !important; place-items: center; color: var(--cz-ink2); }
-.vz-why { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--cz-well); font-size: var(--fs-2); line-height: 1.5; color: var(--cz-ink2); }
-.vz-ask { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--vz-spot); font-size: var(--fs-3); line-height: 1.45; }
+.vz-why { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--cz-well); font-size: var(--fs-meta); line-height: 1.5; color: var(--cz-ink2); }
+.vz-ask { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--vz-spot); font-size: var(--fs-body); line-height: 1.45; }
 .vz-ask > div { display: flex; gap: 6px; flex-wrap: wrap; }
 
 /* buttons inside the parts */
-.vz-b { min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: var(--fs-2); font-weight: 700; background: var(--cz-card) !important; color: var(--cz-ink); box-shadow: inset 0 0 0 1px var(--cz-hair); white-space: nowrap; }
+.vz-b { min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: var(--fs-label); font-weight: var(--fw-strong); background: var(--cz-card) !important; color: var(--cz-ink); box-shadow: inset 0 0 0 1px var(--cz-hair); white-space: nowrap; line-height: var(--lh-label); }
 .vz-b.vz-solid { background: var(--vz-solid) !important; color: var(--vz-on) !important; box-shadow: none; }
 .vz-b.vz-line { box-shadow: inset 0 0 0 1px var(--cz-hair); background: transparent !important; }
 
@@ -70,72 +70,72 @@
 .vz-part[data-open="true"] { background: var(--cz-card); box-shadow: 0 0 0 1px var(--cz-hair); }
 .vz-ph { width: 100%; display: flex !important; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px !important; border-radius: 16px; }
 .vz-ph > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
-.vz-ph b { font-size: var(--fs-3); font-weight: 700; }
-.vz-ph small { font-size: var(--fs-2); color: var(--cz-ink3); }
+.vz-ph b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
+.vz-ph small { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .vz-ph svg { color: var(--cz-ink3); transition: transform .15s; }
 .vz-part[data-open="true"] .vz-ph svg { transform: rotate(180deg); }
 .vz-pb { padding: 2px 14px 16px; display: flex; flex-direction: column; gap: 14px; }
-.vz-empty { font-size: var(--fs-2); color: var(--cz-ink3); }
+.vz-empty { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 
 /* rows shared by the parts */
-.vz-ready { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-3); }
+.vz-ready { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-body); line-height: var(--lh-body); }
 .vz-ready > span:last-child { flex: 1; min-width: 0; }
-.vz-ready b { font-weight: 600; }
+.vz-ready b { font-weight: var(--fw-strong); }
 .vz-ready em { font-style: normal; color: var(--cz-ink2); }
-.vz-mk { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-1); font-weight: 700; background: var(--cz-well); color: var(--vz-ok); }
+.vz-mk { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-badge); font-weight: var(--fw-strong); background: var(--cz-well); color: var(--vz-ok); line-height: var(--lh-badge); }
 .vz-mk[data-k="no"] { background: var(--vz-spot); color: var(--vz-eink); }
 .vz-p { line-height: 1.5; color: var(--cz-ink2); margin-top: 4px !important; }
-.vz-tagrow { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-2); line-height: 1.45; }
+.vz-tagrow { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-meta); line-height: 1.45; }
 .vz-tagrow > span:last-child { flex: 1; min-width: 0; }
 .vz-tagrow small { font-size: inherit; color: var(--cz-ink3); }
-.vz-tag { flex: none; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-1); font-weight: 700; white-space: nowrap; background: var(--cz-well); color: var(--cz-ink2); }
+.vz-tag { flex: none; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-badge); font-weight: var(--fw-strong); white-space: nowrap; background: var(--cz-well); color: var(--cz-ink2); line-height: var(--lh-badge); }
 .vz-tag[data-k="warn"] { background: var(--vz-spot); color: var(--vz-eink); }
 .vz-tag[data-k="ok"] { background: var(--cz-well); color: var(--vz-ok); }
 .vz-tag[data-k="new"] { background: var(--vz-solid); color: var(--vz-on); }
-.vz-num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--cz-well); font-style: normal; font-size: var(--fs-1); font-weight: 700; flex: none; }
+.vz-num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--cz-well); font-style: normal; font-size: var(--fs-badge); font-weight: var(--fw-strong); flex: none; line-height: var(--lh-badge); }
 .vz-num[data-k="now"] { background: var(--vz-ember); color: var(--vz-on); }
-.vz-ag { display: flex; align-items: center; gap: 10px; font-size: var(--fs-3); }
+.vz-ag { display: flex; align-items: center; gap: 10px; font-size: var(--fs-body); line-height: var(--lh-body); }
 .vz-ag > span { flex: 1; min-width: 0; }
-.vz-ag small, .vz-ag .vz-min { color: var(--cz-ink3); font-size: var(--fs-2); }
+.vz-ag small, .vz-ag .vz-min { color: var(--cz-ink3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .vz-min { min-height: 24px; padding: 0 6px; border-radius: 6px; }
-.vz-min input { width: 52px; min-height: 26px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: var(--fs-3) var(--cz-sans); }
-.vz-ag[data-k="now"] > span { font-weight: 700; }
+.vz-min input { width: 52px; min-height: 26px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: var(--fs-body)/var(--lh-body) var(--cz-sans); }
+.vz-ag[data-k="now"] > span { font-weight: var(--fw-strong); }
 .vz-ag[data-k="done"] > span { color: var(--cz-ink3); }
 .vz-hrow { display: flex; align-items: center; gap: 8px; }
 .vz-hrow h3 { flex: 1; }
-.vz-addm { min-height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--cz-hair) !important; font-size: var(--fs-2); color: var(--cz-ink2); }
+.vz-addm { min-height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--cz-hair) !important; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 .vz-mat { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--cz-hair) !important; }
 .vz-mat > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
-.vz-mat b { font-size: var(--fs-3); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.vz-mat small { font-size: var(--fs-1); color: var(--cz-ink3); }
-.vz-kind { flex: none; padding: 2px 8px; border-radius: 6px; background: var(--cz-well); font-size: var(--fs-1); font-weight: 700; color: var(--cz-ink2); }
-.vz-prev { display: flex; align-items: baseline; gap: 10px; padding: 6px 4px; border-radius: 10px; font-size: var(--fs-3); }
-.vz-prev time { flex: none; width: 54px; font-weight: 700; }
+.vz-mat b { font-size: var(--fs-row); font-weight: var(--fw-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--lh-row); }
+.vz-mat small { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.vz-kind { flex: none; padding: 2px 8px; border-radius: 6px; background: var(--cz-well); font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-badge); }
+.vz-prev { display: flex; align-items: baseline; gap: 10px; padding: 6px 4px; border-radius: 10px; font-size: var(--fs-body); line-height: var(--lh-body); }
+.vz-prev time { flex: none; width: 54px; font-weight: var(--fw-strong); }
 .vz-prev span { flex: 1; min-width: 0; color: var(--cz-ink2); }
 
 /* live */
 .vz-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-radius: 16px; background: var(--cz-well); }
-.vz-bar > b { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-3); }
+.vz-bar > b { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--fw-strong); font-size: var(--fs-row); line-height: var(--lh-row); }
 .vz-bar > b i { width: 10px; height: 10px; border-radius: 50%; background: var(--vz-ember); box-shadow: 0 0 0 4px var(--vz-spot); }
 .vz-bar[data-k="paused"] > b i { background: var(--cz-ink3); box-shadow: 0 0 0 4px var(--cz-card); }
-.vz-src { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: var(--fs-2); color: var(--cz-ink2); }
+.vz-src { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 .vz-src b { color: var(--cz-ink); }
 .vz-apps { display: flex; gap: 6px; flex-wrap: wrap; }
-.vz-priv { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2); color: var(--cz-ink2); }
+.vz-priv { display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 .vz-priv input { accent-color: var(--vz-solid); width: 16px; height: 16px; margin: 0; flex: none; }
 .vz-stretch { display: block; width: 100%; height: 8px; stroke: none; }
 .vz-stretch rect { fill: var(--cz-hair); }
 .vz-stretch rect[data-k="done"] { fill: var(--vz-ok); }
 .vz-stretch rect[data-k="now"] { fill: var(--vz-ember); }
-.vz-mine { min-height: 64px; resize: vertical; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--cz-hair); background: var(--cz-card); font: var(--fs-3)/1.5 var(--cz-sans); color: var(--cz-ink); width: 100%; }
-.vz-hl { display: flex; gap: 10px; font-size: var(--fs-3); line-height: 1.45; padding: 8px 10px; border-radius: 12px; background: var(--vz-spot); }
-.vz-hl time { flex: none; font: 600 var(--fs-2) var(--cz-mono); color: var(--vz-eink); }
-.vz-line { display: flex; gap: 10px; font-size: var(--fs-3); line-height: 1.45; }
-.vz-line time { flex: none; width: 40px; font: var(--fs-2) var(--cz-mono); color: var(--cz-ink3); }
-.vz-who { font-weight: 700; display: inline; border-radius: 4px; }
+.vz-mine { min-height: 64px; resize: vertical; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--cz-hair); background: var(--cz-card); font: var(--fs-body)/1.5 var(--cz-sans); color: var(--cz-ink); width: 100%; }
+.vz-hl { display: flex; gap: 10px; font-size: var(--fs-body); line-height: 1.45; padding: 8px 10px; border-radius: 12px; background: var(--vz-spot); }
+.vz-hl time { flex: none; font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-mono); color: var(--vz-eink); }
+.vz-line { display: flex; gap: 10px; font-size: var(--fs-body); line-height: 1.45; }
+.vz-line time { flex: none; width: 40px; font: var(--fs-meta)/var(--lh-meta) var(--cz-mono); color: var(--cz-ink3); }
+.vz-who { font-weight: var(--fw-strong); display: inline; border-radius: 4px; }
 .vz-who:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
 .vz-name { display: inline-flex; gap: 4px; align-items: center; }
-.vz-name input { width: 120px; min-height: 24px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: var(--fs-2) var(--cz-sans); }
+.vz-name input { width: 120px; min-height: 24px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: var(--fs-meta)/var(--lh-meta) var(--cz-sans); }
 
 /* after: the replay track */
 .vz-rp { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 16px; background: var(--cz-well); }
@@ -150,65 +150,65 @@
 .vz-trs rect.vz-mk2 { fill: var(--vz-eink); }
 .vz-trs rect.vz-mk2[data-k="decision"] { fill: var(--vz-ok); }
 .vz-trs circle.vz-head { fill: var(--cz-card); stroke: var(--vz-solid); stroke-width: 2; }
-.vz-pos { font-size: var(--fs-2); color: var(--cz-ink3); }
+.vz-pos { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .vz-shots { display: flex; gap: 6px; overflow-x: auto; }
 .vz-shot { flex: none; display: flex !important; flex-direction: column; gap: 3px; align-items: flex-start; }
 .vz-shot span { display: block; width: 112px; height: 64px; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, var(--cz-card) 0 55%, var(--cz-hair) 55% 100%); box-shadow: 0 0 0 1px var(--cz-hair); }
 .vz-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
-.vz-shot small { font-size: var(--fs-1); color: var(--cz-ink3); max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.vz-shot small { font-size: var(--fs-meta); color: var(--cz-ink3); max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--lh-meta); }
 .vz-sum { line-height: 1.55; }
 .vz-dec { padding-left: 12px; border-left: 3px solid var(--vz-ok); }
-.vz-dec p:first-child { font-weight: 600; line-height: 1.45; }
-.vz-dec p + p { margin-top: 2px; font-size: var(--fs-2); color: var(--cz-ink3); }
+.vz-dec p:first-child { font-weight: var(--fw-strong); line-height: 1.45; }
+.vz-dec p + p { margin-top: 2px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .vz-step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--cz-hair); position: relative; flex-wrap: wrap; }
 .vz-step > span:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; }
-.vz-step > span:first-child span:first-child { font-weight: 600; font-size: var(--fs-3); }
-.vz-step > span:first-child span + span { font-size: var(--fs-2); color: var(--cz-ink3); }
-.vz-pill { flex: none; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-1); font-weight: 700; white-space: nowrap; background: var(--vz-spot); color: var(--vz-eink); }
+.vz-step > span:first-child span:first-child { font-weight: var(--fw-strong); font-size: var(--fs-row); line-height: var(--lh-row); }
+.vz-step > span:first-child span + span { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.vz-pill { flex: none; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-badge); font-weight: var(--fw-strong); white-space: nowrap; background: var(--vz-spot); color: var(--vz-eink); line-height: var(--lh-badge); }
 .vz-pill[data-k="task"] { background: var(--cz-well); color: var(--vz-ok); }
 .vz-smenu { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
-.vz-trt { display: flex !important; align-items: center; gap: 8px; min-height: 36px; padding: 0 4px !important; border-radius: 10px; font-size: var(--fs-3); font-weight: 600; }
+.vz-trt { display: flex !important; align-items: center; gap: 8px; min-height: 36px; padding: 0 4px !important; border-radius: 10px; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
 .vz-trt > span { flex: 1; }
 .vz-trt svg { color: var(--cz-ink3); transition: transform .15s; }
 .vz-trt[aria-expanded="true"] svg { transform: rotate(180deg); }
 
 /* ── Calendar | Notes ── */
 .vz-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--cz-well); }
-.vz-seg button { min-height: 30px; padding: 0 14px !important; border-radius: 999px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); }
+.vz-seg button { min-height: 30px; padding: 0 14px !important; border-radius: 999px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
 .vz-seg button[aria-selected="true"], .vz-seg button[aria-pressed="true"] { background: var(--cz-card); color: var(--cz-ink); box-shadow: var(--cz-vlift); }
-.vz-new { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px !important; border-radius: 999px; background: var(--vz-solid) !important; color: var(--vz-on) !important; font-size: var(--fs-3); font-weight: 700; }
+.vz-new { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px !important; border-radius: 999px; background: var(--vz-solid) !important; color: var(--vz-on) !important; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
 .vz-new i { width: 8px; height: 8px; border-radius: 50%; background: var(--vz-ember); }
 .vz-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
 .vz-day { display: flex !important; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px !important; border-radius: 14px; background: var(--cz-well) !important; text-align: center !important; min-width: 0; }
 .vz-day[aria-pressed="true"] { background: var(--cz-card) !important; box-shadow: 0 0 0 1.5px var(--vz-ember); }
-.vz-day > span:first-child { font-size: var(--fs-1); font-weight: 700; color: var(--cz-ink3); }
-.vz-day b { font-size: var(--fs-4); font-weight: 500; }
+.vz-day > span:first-child { font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
+.vz-day b { font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); }
 .vz-day i { width: 70%; height: 4px; border-radius: 999px; background: var(--cz-hair); }
 .vz-day i[data-on] { background: var(--vz-ember); opacity: 1; }
 .vz-day i[data-on="1"] { opacity: .57; } .vz-day i[data-on="2"] { opacity: .79; }   /* one, two, three or more meetings */
-.vz-day small { font-size: var(--fs-1); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
+.vz-day small { font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: var(--lh-meta); }
 .vz-row { display: flex !important; align-items: center; gap: 10px; padding: 10px 12px !important; border-radius: 14px; background: var(--cz-card) !important; box-shadow: 0 0 0 1px var(--cz-hair); width: 100%; }
 .vz-row[data-next] { box-shadow: 0 0 0 1.5px var(--vz-ember); }
-.vz-row time { flex: none; width: 46px; font-weight: 700; font-size: var(--fs-2); }
+.vz-row time { flex: none; width: 46px; font-weight: var(--fw-strong); font-size: var(--fs-label); line-height: var(--lh-label); }
 .vz-row > span:nth-of-type(1) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
-.vz-row b { font-size: var(--fs-3); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.vz-row small { font-size: var(--fs-2); color: var(--cz-ink3); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }   /* the sub-line wraps to two lines */
+.vz-row b { font-size: var(--fs-row); font-weight: var(--fw-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--lh-row); }
+.vz-row small { font-size: var(--fs-meta); color: var(--cz-ink3); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: var(--lh-meta); }   /* the sub-line wraps to two lines */
 .vz-row.vz-sm { padding: 8px 10px !important; border-radius: 12px; }
-.vz-cc { flex: none; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-1); font-weight: 700; white-space: nowrap; background: var(--cz-well); color: var(--cz-ink2); }
+.vz-cc { flex: none; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-badge); font-weight: var(--fw-strong); white-space: nowrap; background: var(--cz-well); color: var(--cz-ink2); line-height: var(--lh-badge); }
 .vz-cc[data-k="warn"] { background: var(--vz-spot); color: var(--vz-eink); }
 .vz-cc[data-k="ok"] { background: var(--cz-well); color: var(--vz-ok); }
 .vz-cc[data-k="rec"] { background: var(--vz-ember); color: var(--vz-on); }
-.vz-search { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cz-hair); background: var(--cz-card); font: var(--fs-3) var(--cz-sans); color: var(--cz-ink); width: 100%; }
+.vz-search { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cz-hair); background: var(--cz-card); font: var(--fs-body)/var(--lh-body) var(--cz-sans); color: var(--cz-ink); width: 100%; }
 .vz-grp { display: flex; flex-direction: column; gap: 4px; }
-.vz-grp h3 { margin: 0 0 2px; font-size: var(--fs-2); color: var(--cz-ink2); }
+.vz-grp h3 { margin: 0 0 2px; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 .vz-more2 { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; border-top: 1px solid var(--cz-hair); }
-.vz-dayh { font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); margin-top: 4px !important; }
+.vz-dayh { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); margin-top: 4px !important; line-height: var(--lh-label); }
 
 /* ── the report panel (ReportPanel.dc.html) ── */
 .vz.vz-rp0 { padding: 0; gap: 0; min-height: 100%; position: relative; }
 .vz-rph { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 0; }
 .vz-rpc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; position: relative; }
-.vz-c { display: inline-flex !important; align-items: center; gap: 6px; height: 32px; padding: 0 10px !important; border-radius: 999px; font-size: var(--fs-2); font-weight: 600; background: var(--cz-well) !important; color: var(--cz-ink2); white-space: nowrap; }
+.vz-c { display: inline-flex !important; align-items: center; gap: 6px; height: 32px; padding: 0 10px !important; border-radius: 999px; font-size: var(--fs-label); font-weight: var(--fw-strong); background: var(--cz-well) !important; color: var(--cz-ink2); white-space: nowrap; line-height: var(--lh-label); }
 .vz-c svg { width: 14px; height: 14px; stroke-width: 1.8; }
 .vz-c i { width: 8px; height: 8px; border-radius: 50%; background: var(--cz-dot-late); flex: none; }
 .vz-c[data-k="issued"] i { background: var(--vz-ok); }
@@ -222,22 +222,22 @@
 .vz-ib[aria-expanded="true"] { background: var(--cz-well) !important; }
 .vz-ib.vz-small { width: 32px; height: 32px; }
 .vz-sg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--cz-well); }
-.vz-sg button { height: 34px; padding: 0 10px !important; border-radius: 9px; display: inline-flex !important; align-items: center; gap: 6px; font-size: var(--fs-2); font-weight: 600; color: var(--cz-ink3); }
+.vz-sg button { height: 34px; padding: 0 10px !important; border-radius: 9px; display: inline-flex !important; align-items: center; gap: 6px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
 .vz-sg button[aria-pressed="true"] { background: var(--cz-card); color: var(--cz-ink); box-shadow: var(--cz-vlift); }
 .vz-sg svg { width: 16px; height: 16px; stroke-width: 1.8; }
-.vz-issue { display: inline-flex !important; align-items: center; gap: 6px; height: 40px; padding: 0 16px !important; border-radius: 12px; background: var(--vz-solid) !important; color: var(--vz-on) !important; font-size: var(--fs-3); font-weight: 700; flex: none; }
+.vz-issue { display: inline-flex !important; align-items: center; gap: 6px; height: 40px; padding: 0 16px !important; border-radius: 12px; background: var(--vz-solid) !important; color: var(--vz-on) !important; font-size: var(--fs-row); font-weight: var(--fw-strong); flex: none; line-height: var(--lh-row); }
 .vz-issue svg { width: 16px; height: 16px; stroke-width: 2.2; }
-.vz-sec2 { display: inline-flex !important; align-items: center; height: 40px; padding: 0 14px !important; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--cz-hair); font-size: var(--fs-3); color: var(--cz-ink2); flex: none; }
+.vz-sec2 { display: inline-flex !important; align-items: center; height: 40px; padding: 0 14px !important; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--cz-hair); font-size: var(--fs-body); color: var(--cz-ink2); flex: none; line-height: var(--lh-body); }
 .vz-sep { width: 1px; height: 24px; background: var(--cz-hair); flex: none; margin: 0 4px; }
 .vz-conf { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--vz-spot); margin-bottom: 4px; }
-.vz-conf ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-3); }
+.vz-conf ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-body); line-height: var(--lh-body); }
 .vz-conf li { display: flex; gap: 8px; align-items: center; }
-.vz-conf li span:first-child { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: var(--fs-1); font-weight: 700; background: var(--vz-solid); color: var(--vz-on); }
+.vz-conf li span:first-child { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: var(--fs-badge); font-weight: var(--fw-strong); background: var(--vz-solid); color: var(--vz-on); line-height: var(--lh-badge); }
 .vz-conf li[data-ok="false"] span:first-child { background: transparent; box-shadow: inset 0 0 0 2px var(--vz-ember); color: var(--vz-eink); }
 .vz-conf > div { display: flex; gap: 6px; flex-wrap: wrap; }
 .vz-conf .vz-sec2 { background: var(--cz-card) !important; }
 .vz-rpb { position: relative; flex: 1; min-height: 0; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
-.vz-tip { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border-radius: 10px; background: var(--cz-well); font-size: var(--fs-2); color: var(--cz-ink3); }
+.vz-tip { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border-radius: 10px; background: var(--cz-well); font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .vz-tip span { flex: 1; }
 .vz-slide { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 14px; box-shadow: 0 0 0 1px var(--cz-hair); background: var(--cz-card); }
 .vz-slide[data-edit] { outline: 2px dashed color-mix(in oklab, var(--vz-ember) 60%, transparent); outline-offset: 3px; }
@@ -262,8 +262,8 @@
 .vz-fr { position: absolute; inset: 0; overflow: hidden; }
 .vz-fr iframe { width: 1280px; height: 720px; border: 0; transform-origin: 0 0; transform: scale(var(--rp-scale, .4)); pointer-events: none; background: var(--cz-c-ffffff); }
 .vz-snav { display: flex; align-items: center; gap: 8px; }
-.vz-snav > b { font-size: var(--fs-2); font-weight: 700; }
-.vz-snav > span:not(.vz-sp) { font-size: var(--fs-2); color: var(--cz-ink3); }
+.vz-snav > b { font-size: var(--fs-label); font-weight: var(--fw-strong); line-height: var(--lh-label); }
+.vz-snav > span:not(.vz-sp) { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .vz-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }   /* five to a row; a sixth slide starts a second row */
 .vz-th { min-width: 0; display: flex !important; flex-direction: column; gap: 4px; padding: 4px !important; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--cz-hair); }
 .vz-th[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--vz-ember); }
@@ -273,33 +273,33 @@
 .vz-th > span:first-child .vz-words.vz-title h4 { font-size: 7px; margin-top: 2px; }
 .vz-th > span:first-child .vz-words .vz-eye, .vz-th > span:first-child .vz-words.vz-title p { display: none; }
 .vz-th > span:last-child { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
-.vz-page { line-height: 1.55; font-size: var(--fs-3); }
-.vz-page h4 { margin: 14px 0 4px; font-size: var(--fs-3); }
-.vz-page h2 { margin: 0 0 6px; font-size: var(--fs-4); }
+.vz-page { line-height: 1.55; font-size: var(--fs-body); }
+.vz-page h4 { margin: 14px 0 4px; font-size: var(--fs-body); line-height: var(--lh-body); }
+.vz-page h2 { margin: 0 0 6px; font-size: var(--fs-body); line-height: var(--lh-body); }
 .vz-page ul { margin: 4px 0; padding-left: 20px; }
 .vz-pagefr { position: relative; width: 100%; height: 70vh; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--cz-hair); }
 .vz-pagefr iframe { width: 100%; height: 100%; border: 0; background: var(--cz-c-ffffff); }
 .vz-pop { position: absolute; z-index: 5; background: var(--cz-card); border-radius: 18px; box-shadow: 0 0 0 1px var(--cz-hair), var(--cz-sheet); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
-.vz-mi { display: flex !important; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px !important; border-radius: 10px; font-size: var(--fs-3); width: 100%; }
+.vz-mi { display: flex !important; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px !important; border-radius: 10px; font-size: var(--fs-body); width: 100%; line-height: var(--lh-body); }
 .vz-mi svg { width: 18px; height: 18px; stroke-width: 1.8; }
 .vz-mi[data-k="bad"] { color: var(--vz-bad); }
-.vz-mi[role="radio"][aria-checked="true"] { background: var(--vz-spot); font-weight: 600; }
+.vz-mi[role="radio"][aria-checked="true"] { background: var(--vz-spot); font-weight: var(--fw-strong); }
 .vz-ring { width: 16px; height: 16px; border-radius: 50%; flex: none; border: 1.5px solid var(--cz-ink3); }
 .vz-mi[aria-checked="true"] .vz-ring { border: 5px solid var(--vz-solid); }
-.vz-lab { margin: 6px 10px 4px !important; font-size: var(--fs-1); font-weight: 700; color: var(--cz-ink3); }
+.vz-lab { margin: 6px 10px 4px !important; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
 .vz-fmts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 6px 6px; }
-.vz-fmt { height: 36px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--cz-hair); font: 600 var(--fs-2) var(--cz-mono); color: var(--cz-ink2); display: grid !important; place-items: center; text-decoration: none; }
+.vz-fmt { height: 36px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--cz-hair); font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-mono); color: var(--cz-ink2); display: grid !important; place-items: center; text-decoration: none; }
 .vz-fmt:hover { background: var(--cz-well); }
 .vz-pop hr { width: 100%; border: 0; border-top: 1px solid var(--cz-hair); margin: 4px 0; }
-.vz-dbtn { height: 32px; padding: 0 9px !important; border-radius: 8px; font-size: var(--fs-2); font-weight: 600; background: var(--cz-well) !important; color: var(--cz-ink2); }
+.vz-dbtn { height: 32px; padding: 0 9px !important; border-radius: 8px; font-size: var(--fs-label); font-weight: var(--fw-strong); background: var(--cz-well) !important; color: var(--cz-ink2); line-height: var(--lh-label); }
 .vz-dbtn[aria-pressed="true"] { background: var(--vz-solid) !important; color: var(--vz-on) !important; }
 .vz-mono { font-family: var(--cz-mono) !important; }
-.vz-shr { display: flex; align-items: center; gap: 8px; font-size: var(--fs-3); }
+.vz-shr { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); line-height: var(--lh-body); }
 .vz-shr > span:first-child { flex: 0 0 64px; color: var(--cz-ink3); }
-.vz-pw { flex: 1; min-width: 0; height: 36px; display: flex; align-items: center; padding: 0 10px; border-radius: 10px; background: var(--cz-well); font: 500 var(--fs-2) var(--cz-mono); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
-.vz-shf { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-2); }
+.vz-pw { flex: 1; min-width: 0; height: 36px; display: flex; align-items: center; padding: 0 10px; border-radius: 10px; background: var(--cz-well); font: var(--fw-regular) var(--fs-meta)/var(--lh-meta) var(--cz-mono); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.vz-shf { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .vz-shf > span { flex: 1; min-width: 0; color: var(--cz-ink2); }
-.vz-ask2 { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--cz-well); font-size: var(--fs-3); margin-bottom: 4px; }
+.vz-ask2 { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--cz-well); font-size: var(--fs-body); margin-bottom: 4px; line-height: var(--lh-body); }
 .vz-ask2 > div { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
 .vz-pres { position: fixed; inset: 0; z-index: 90; background: black; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; }
 .vz-pres .vz-slide { width: min(100%, calc((100vh - 90px) * 16 / 9)); }
@@ -310,7 +310,7 @@
   .vz { padding: 14px 16px 24px; }
   .vz-rph { padding: 12px 16px 0; }
   .vz-days { gap: 4px; }
-  .vz-day small { font-size: var(--fs-1); }
+  .vz-day small { font-size: var(--fs-meta); line-height: var(--lh-meta); }
   .vz-words.vz-title h4 { font-size: 19px; }
   .vz-words { padding: 16px; }
   /* a phone press is at least 44 px tall */
@@ -326,7 +326,7 @@
 body.vz-solo { min-height: 100vh; }
 .vz-host { display: flex; justify-content: center; padding: 16px; height: 100vh; box-sizing: border-box; }
 .vz-host > .cz-vw { flex: 0 1 500px; width: 500px; }   /* the design's card: flex 0 0 500px */
-.vz-gone { margin: 0; padding: 48px 16px; text-align: center; font: var(--fs-3)/1.5 var(--cz-sans); color: var(--cz-ink2); }
+.vz-gone { margin: 0; padding: 48px 16px; text-align: center; font: var(--fs-body)/1.5 var(--cz-sans); color: var(--cz-ink2); }
 .vz-gone a { color: var(--cz-blueink); }
 
 /* ── the report panel: desktop-only and phone-only controls, the editor host ── */
@@ -349,23 +349,23 @@ body.vz-solo { min-height: 100vh; }
 /* classes that replaced inline styles in premium-vw-mtg.js (conformance R28-1/R28-2) */
 .vz-dots { fill: currentColor; stroke: none; }
 .vz-mk svg { stroke-width: 3; }
-.vz-caught { font-size: var(--fs-2); color: var(--cz-ink2); }
+.vz-caught { font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 .vz-caught b { color: var(--cz-ink); }
-.vz-fine { font-size: var(--fs-1); }
+.vz-fine { font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .vz-rpm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
 .vz-g6, .vz .vz-g6 { gap: 6px; } .vz-g8, .vz .vz-g8 { gap: 8px; } .vz-g16, .vz .vz-g16 { gap: 16px; }
 button.vz-line { padding: 4px; border-radius: 8px; }
-.vz-t13 { font-size: var(--fs-3); }
+.vz-t13 { font-size: var(--fs-body); line-height: var(--lh-body); }
 .vz-grow.vz-grow { flex: 1; }
 
 /* classes that replaced inline styles in premium-report-read.js (conformance R28-1/R28-2); doubled so they win as the inline style did */
 .vz-flat.vz-flat { box-shadow: none; }
 .vz-pop-sched.vz-pop-sched { left: 0; top: 40px; width: min(340px, 100%); padding: 14px; gap: 8px; }
-.vz-pophd.vz-pophd { font-size: var(--fs-3); font-weight: 600; }
+.vz-pophd.vz-pophd { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
 .vz-stack2.vz-stack2 { display: flex; flex-direction: column; gap: 2px; }
 .vz-mt6.vz-mt6 { margin-top: 6px; }
-.vz-bare13.vz-bare13 { border: 0; font-size: var(--fs-3); }
-.vz-mi32.vz-mi32 { min-height: 32px; font-size: var(--fs-3); }
+.vz-bare13.vz-bare13 { border: 0; font-size: var(--fs-body); line-height: var(--lh-body); }
+.vz-mi32.vz-mi32 { min-height: 32px; font-size: var(--fs-body); line-height: var(--lh-body); }
 .vz-end4.vz-end4 { justify-content: flex-end; margin-top: 4px; }
 .vz-pop-cyc.vz-pop-cyc { left: 0; top: 40px; width: min(300px, 100%); }
 .vz-pop-more.vz-pop-more { right: -4px; top: calc(100% - 4px); width: min(300px, calc(100% + 8px)); }   /* under the toolbar, 12px in from the card (ReportPanel.dc.html top:150px; right:12px) */
@@ -375,9 +375,9 @@ button.vz-line { padding: 4px; border-radius: 8px; }
 .vz-bare.vz-bare { border: 0; color: inherit; }
 .vz-pop-share.vz-pop-share { right: -4px; top: calc(100% - 4px); width: min(360px, calc(100% + 8px)); padding: 14px; gap: 12px; }
 .vz-pop-share > .vz-sg { align-self: flex-start; }
-.vz-sg.vz-ends button { height: 30px; font-size: var(--fs-2); }
-.vz-tchip { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; font: 600 var(--fs-2) var(--cz-mono) !important; }
-.vz-w600.vz-w600 { font-weight: 600; }
+.vz-sg.vz-ends button { height: 30px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
+.vz-tchip { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-mono) !important; }
+.vz-w600.vz-w600 { font-weight: var(--fw-strong); }
 .vz-h36.vz-h36 { height: 36px; }
 .vz-pop-sched .vz-r1 { gap: 4px; flex-wrap: nowrap; }
 /* the header's "Open full" (a report) shows on wide screens only: on a phone the card is already the whole screen */
@@ -388,46 +388,46 @@ button.vz-line { padding: 4px; border-radius: 8px; }
 .vz-hd1 > .vz-pri, .vz-hd1 > .vz-more { flex: none; }
 .cz-vw-t.cz-vw-t2 { flex-direction: column; align-items: flex-start; gap: 0; }
 .cz-vw-t2 .cz-vw-kind { max-width: 100%; }
-.cz-vw-t2 .cz-vw-title { max-width: 100%; font-size: var(--fs-4); }
+.cz-vw-t2 .cz-vw-title { max-width: 100%; font-size: var(--fs-body); line-height: var(--lh-body); }
 @media (max-width: 760px) {   /* on a phone every card's header puts the kind above the title (AgCalendar-390, AgMeeting-390, AgMetrics-390, AgInitAgents-390) */
   .cz-vw-hd .cz-vw-t { flex-direction: column; align-items: flex-start; gap: 0; }
   .cz-vw-hd .cz-vw-kind { max-width: 100%; }
-  .cz-vw-hd .cz-vw-title { max-width: 100%; font-size: var(--fs-4); }
+  .cz-vw-hd .cz-vw-title { max-width: 100%; font-size: var(--fs-body); line-height: var(--lh-body); }
 }
 .vz-ib.vz-dim { opacity: .4; }   /* Undo or Redo with nothing to take back or to do again */
 
 /* ── a deck from a chat (premium-report-tab.js; Main.dc.html viewer "deck") ── */
 .vz.vz-dk, .vz.vz-mx, .vz.vz-rtp { padding: 20px; gap: 14px; }
 .vz-dks { aspect-ratio: 16 / 9; border-radius: 16px; background: var(--cz-well); border: 1px solid var(--cz-hair); padding: 7% 8%; display: flex; flex-direction: column; justify-content: center; gap: 12px; overflow: hidden; }
-.vz-dks .vz-dke { font-size: var(--fs-2); font-weight: 700; color: var(--vz-eink); }
-.vz-dks h2 { margin: 0; font-size: var(--fs-5); line-height: 1.2; font-weight: 700; }
-.vz-dks > p:last-child:not(.vz-dke) { font-size: var(--fs-2); line-height: 1.6; color: var(--cz-ink2); }
+.vz-dks .vz-dke { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--vz-eink); line-height: var(--lh-label); }
+.vz-dks h2 { margin: 0; font-size: var(--fs-panel); line-height: 1.2; font-weight: var(--fw-strong); }
+.vz-dks > p:last-child:not(.vz-dke) { font-size: var(--fs-meta); line-height: 1.6; color: var(--cz-ink2); }
 .vz-dkn { display: flex; align-items: center; gap: 8px; }
-.vz-dkn > span { flex: 1; text-align: center; font-size: var(--fs-2); color: var(--cz-ink2); }
+.vz-dkn > span { flex: 1; text-align: center; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 .vz-dkb { width: 40px; height: 40px; border-radius: 50% !important; border: 1px solid var(--cz-hair) !important; display: grid !important; place-items: center; color: var(--cz-ink2); flex: none; }
 .vz-dkt { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 4); gap: 8px; overflow-x: auto; padding: 2px; }
 .vz-dkt button { aspect-ratio: 16 / 9; border-radius: 10px; padding: 8px !important; display: flex !important; align-items: flex-end; background: var(--cz-well) !important; color: var(--cz-ink2); border: 1px solid var(--cz-hair) !important; min-width: 0; }
 .vz-dkt button[aria-current="true"] { border-color: transparent !important; box-shadow: 0 0 0 2px var(--vz-ember); }
-.vz-dkt button span { display: block; font-size: var(--fs-1); font-weight: 700; line-height: 1.3; text-align: left; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
+.vz-dkt button span { display: block; font-size: var(--fs-badge); font-weight: var(--fw-strong); line-height: 1.3; text-align: left; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
 /* the parts the design does not draw yet, under the view: a quiet block marked Waiting for design */
 .vz-blk { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--cz-hair); }
 .vz-schm { flex-basis: 100%; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 18px; background: var(--cz-card); box-shadow: 0 0 0 1px var(--cz-hair), var(--cz-sheet); max-width: 340px; }
 .vz-schm .vz-r1 { padding: 6px 10px 2px; }
 .vz-schm .vz-note { padding: 4px 10px; }
-.vz-secs { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-3); }
-.vz-secs li b { font-weight: 600; }
-.vz-secs li span { display: block; font-size: var(--fs-2); color: var(--cz-ink3); }
-.vz-rtp .vz-row b { font-weight: 600; }
+.vz-secs { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-body); line-height: var(--lh-body); }
+.vz-secs li b { font-weight: var(--fw-strong); }
+.vz-secs li span { display: block; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.vz-rtp .vz-row b { font-weight: var(--fw-strong); }
 
 /* ── a chart or a dashboard from a chat (premium-chart-tab.js; Main.dc.html viewer "metrics") ── */
 .vz-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
 .vz-kpi { padding: 12px 14px; border-radius: 16px; background: var(--cz-well); min-width: 0; }
-.vz-kpi p { font-size: var(--fs-2); color: var(--cz-ink3); }
-.vz-kpi b { display: block; margin-top: 4px; font-size: var(--fs-5); font-weight: 700; letter-spacing: -0.02em; }
-.vz-kpi small { display: block; margin-top: 2px; font-size: var(--fs-2); color: var(--cz-ink2); }
+.vz-kpi p { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.vz-kpi b { display: block; margin-top: 4px; font-size: var(--fs-display); font-weight: var(--fw-strong); letter-spacing: -0.02em; line-height: var(--lh-display); }
+.vz-kpi small { display: block; margin-top: 2px; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 .vz-mx-fig { margin: 0; display: flex; flex-direction: column; gap: 8px; }
-.vz-mx-fig figcaption { font-size: var(--fs-3); font-weight: 700; }
-.vz-mx-big { font-size: var(--fs-6); font-weight: 700; letter-spacing: -0.02em; }
+.vz-mx-fig figcaption { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
+.vz-mx-big { font-size: var(--fs-display); font-weight: var(--fw-strong); letter-spacing: -0.02em; line-height: var(--lh-display); }
 .vz-mx-svg { display: block; width: 100%; height: auto; overflow: visible; stroke: none; }
 .vz-mx-svg .vz-bar { fill: var(--cz-well2); }
 .vz-mx-svg .vz-bar.now, .vz-mx-svg .vz-pt.now { fill: var(--vz-ember); }
@@ -436,16 +436,16 @@ button.vz-line { padding: 4px; border-radius: 8px; }
 .vz-mx-svg .vz-ax { stroke: var(--cz-hair); stroke-width: 1; }
 .vz-mx-svg .vz-tgt { stroke: var(--vz-eink); stroke-width: 1.5; stroke-dasharray: 5 4; }
 .vz-mx-svg .vz-trk0 { fill: var(--cz-well); }
-.vz-mx-svg text { fill: var(--cz-ink3); stroke: none; font: var(--fs-1) var(--cz-sans); text-anchor: middle; }
+.vz-mx-svg text { fill: var(--cz-ink3); stroke: none; font: var(--fs-meta)/var(--lh-meta) var(--cz-sans); text-anchor: middle; }
 .vz-mx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
 .vz-mx-tile, .vz-mx-none { padding: 12px 14px; border-radius: 16px; background: var(--cz-well); min-width: 0; display: flex; flex-direction: column; gap: 4px; }
-.vz-mx-tile p { font-size: var(--fs-2); color: var(--cz-ink3); }
-.vz-mx-tile b { font-size: var(--fs-5); font-weight: 700; }
-.vz-mx-tile small, .vz-mx-none small { font-size: var(--fs-2); color: var(--cz-ink2); }
+.vz-mx-tile p { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.vz-mx-tile b { font-size: var(--fs-display); font-weight: var(--fw-strong); line-height: var(--lh-display); }
+.vz-mx-tile small, .vz-mx-none small { font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 .vz-mx-tile .vz-mx-svg .vz-bar:not(.now) { fill: var(--cz-card); }
 @media (max-width: 760px) {
   .vz.vz-dk, .vz.vz-mx, .vz.vz-rtp { padding: 16px; }
-  .vz-kpis { gap: 8px; } .vz-kpi { padding: 12px; } .vz-kpi b { font-size: var(--fs-5); }   /* AgMetrics-390 keeps the three figures side by side */
+  .vz-kpis { gap: 8px; } .vz-kpi { padding: 12px; } .vz-kpi b { font-size: var(--fs-panel); line-height: var(--lh-panel); }   /* AgMetrics-390 keeps the three figures side by side */
   .vz-mx-grid { grid-template-columns: minmax(0, 1fr); }
   .vz-dkb { width: 44px; height: 44px; }
 }
@@ -461,24 +461,24 @@ button.vz-line { padding: 4px; border-radius: 8px; }
 .sl-cz .ed .sl-it.sel,.sl-cz .sl-stage .sl-it.sel{outline:0;box-shadow:0 0 0 calc(2px / var(--bd-k,.5)) var(--cz-c-ffffff);border-radius:calc(4px / var(--bd-k,.5))}
 .sl-cz .sl-hdot{border-color:var(--cz-c-ffffff);background:var(--cz-blue)}
 .sl-cz .sl-snav{display:flex;align-items:center;gap:8px}
-.sl-cz .sl-snav>b{font-size:var(--fs-2);font-weight:700;color:var(--cz-ink)}
-.sl-cz .sl-cnt{font-size:var(--fs-2);color:var(--cz-ink3)}
+.sl-cz .sl-snav>b{font-size:var(--fs-label);font-weight:var(--fw-strong);color:var(--cz-ink);line-height:var(--lh-label);}
+.sl-cz .sl-cnt{font-size:var(--fs-meta);color:var(--cz-ink3);line-height:var(--lh-meta);}
 .sl-cz .sl-nv{width:32px;min-width:32px;height:32px;padding:0;border-radius:12px}
 .sl-cz .sl-rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-height:none;overflow:visible;padding:0}
 .sl-cz .sl-th{display:flex;flex-direction:column;gap:4px;padding:4px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--cz-hair);min-width:0;width:auto}
 .sl-cz .sl-th[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--cz-blue)}
 .sl-cz .sl-th[aria-current="true"] .sl-mini,.sl-cz .sl-mini{box-shadow:none;border-radius:6px}
-.sl-cz .sl-cap{font-size:var(--fs-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;color:var(--cz-ink)}
+.sl-cz .sl-cap{font-size:var(--fs-meta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;color:var(--cz-ink);line-height:var(--lh-meta);}
 .sl-cz .sl-th.over::before{left:-4px;top:0;bottom:0;width:2px;height:auto;right:auto}
 .sl-cz .sl-ctx{background:var(--cz-well);border-radius:12px}
 .sl-cz .sl-ctx:empty{display:none}
-.sl-cz .sl-tools{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:var(--fs-2);color:var(--cz-ink3)}
-.sl-cz .sl-tl{font-weight:700;color:var(--cz-ink2);margin:0 4px}
+.sl-cz .sl-tools{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:var(--fs-meta);color:var(--cz-ink3);line-height:var(--lh-meta);}
+.sl-cz .sl-tl{font-weight:var(--fw-strong);color:var(--cz-ink2);margin:0 4px}
 .sl-cz .sl-tools .sl-b{height:30px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--cz-hair)}
-.sl-cz .sl-notes{display:block;font-size:var(--fs-2);color:var(--cz-ink3)}
+.sl-cz .sl-notes{display:block;font-size:var(--fs-meta);color:var(--cz-ink3);line-height:var(--lh-meta);}
 .sl-cz .sl-notes summary{cursor:pointer;display:flex;align-items:center;gap:8px;min-height:32px}
 .sl-cz .sl-notes textarea{width:100%;margin-top:4px;box-sizing:border-box;border-radius:12px;background:var(--cz-card);color:var(--cz-ink)}
-.sl-cz .vz-wait{display:inline-flex;align-items:center;padding:1px 7px;border-radius:999px;background:var(--cz-well);color:var(--cz-ink3);font-size:var(--fs-1);font-weight:700;white-space:nowrap}
+.sl-cz .vz-wait{display:inline-flex;align-items:center;padding:1px 7px;border-radius:999px;background:var(--cz-well);color:var(--cz-ink3);font-size:var(--fs-badge);font-weight:var(--fw-strong);white-space:nowrap;line-height:var(--lh-badge);}
 @media (max-width:760px){.sl-cz .sl-tools .sl-b,.sl-cz .sl-nv{min-height:44px;height:44px}.sl-cz .sl-nv{width:44px}}
 .sl-cz .sl-cap{display:block;min-width:0}
 @media (max-width:640px){.sl-cz .sl-rail{order:0;overflow:visible}.sl-cz .sl-th{width:auto;flex:initial}.sl-cz .sl-tools .sl-bl span{display:inline}}