create-pmos 0.511.0 → 0.513.0

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

@@ -13,18 +13,18 @@
 /* ── shared parts ── */
 .vz { --vzd: var(--cz-ink); --vzd-on: var(--cz-card); }   /* the design's dark button (.btn.dark: ink on card) */
 .vz .vzm-fb rect, .vz .vzp-strip rect, .vz .vzp-strip circle, .vz .vzp-phpl rect { stroke: none; }
-.vz .vzm-lbl { margin: 0; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); }
-.vz .vzm-lbl small { font-size: inherit; font-weight: 500; color: var(--cz-ink3); margin-left: 4px; }
-.vz .vzm-mlbl { margin: 6px 0 2px; font-size: var(--fs-1); font-weight: 700; color: var(--cz-ink3); }
-.vz .vzm-sm { font-size: var(--fs-2); }
+.vz .vzm-lbl { margin: 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
+.vz .vzm-lbl small { font-size: inherit; font-weight: var(--fw-regular); color: var(--cz-ink3); margin-left: 4px; }
+.vz .vzm-mlbl { margin: 6px 0 2px; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
+.vz .vzm-sm { font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .vz .vzm-mut, .vzm-mut { color: var(--cz-ink3); }
 .vz .vzm-ink3 { color: var(--cz-ink3); }
 .vz .vzm-grow { flex: 1; min-width: 0; }
 .vz .vzm-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
-.vz .vzm-h2 { margin: 0; font-size: var(--fs-5); font-weight: 800; letter-spacing: -.01em; }
-.vz .vzm-h3 { margin: 0; font-size: var(--fs-3); font-weight: 800; }
-.vz .vzm-h1 { margin: 6px 0 4px; font-size: var(--fs-5); font-weight: 800; letter-spacing: -.01em; }
-.vz .vzm-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: var(--fs-2); font-weight: 700; white-space: nowrap; border: 1px solid var(--cz-hair); background: var(--cz-card); }
+.vz .vzm-h2 { margin: 0; font-size: var(--fs-panel); font-weight: var(--fw-strong); letter-spacing: -.01em; line-height: var(--lh-panel); }
+.vz .vzm-h3 { margin: 0; font-size: var(--fs-section); font-weight: var(--fw-strong); line-height: var(--lh-section); }
+.vz .vzm-h1 { margin: 6px 0 4px; font-size: var(--fs-page); font-weight: var(--fw-strong); letter-spacing: -.01em; line-height: var(--lh-page); }
+.vz .vzm-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: var(--fs-label); font-weight: var(--fw-strong); white-space: nowrap; border: 1px solid var(--cz-hair); background: var(--cz-card); line-height: var(--lh-label); }
 .vz .vzm-btn.vzm-soft { border-color: transparent; background: var(--cz-well); }
 .vz .vzm-btn.vzm-card { background: var(--cz-card); }
 .vz .vzm-btn.vzm-ghost { border-color: transparent; background: transparent; color: var(--cz-ink2); padding: 0 8px; }
@@ -33,7 +33,7 @@
 .vz .vzm-btn.vzm-dark:hover:not(:disabled), .vz .vzm-solid:hover:not(:disabled) { background: color-mix(in oklab, var(--vzd) 88%, var(--cz-card)); }
 .vz .vzm-ib { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--cz-ink2); flex: none; }
 .vz .vzm-ib.vzm-solid { width: 32px; height: 32px; color: var(--vzd-on); }
-.vz .vzm-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: var(--fs-2); font-weight: 600; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink2); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
+.vz .vzm-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: var(--fs-label); font-weight: var(--fw-strong); border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink2); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-label); }
 .vz .vzm-chip.on { background: var(--cz-bluebg); border-color: transparent; color: var(--cz-blueink); }
 .vz .vzm-chip.vzm-dash { border-style: dashed; }
 .vz .vzm-chip[data-tone="rec"] { color: var(--cz-ink); }
@@ -46,10 +46,10 @@
 .vz .vzm-box { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--cz-well); flex-wrap: wrap; }
 .vz .vzm-warn { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--cz-latebg); color: var(--cz-late); line-height: 1.45; flex-wrap: wrap; }
 .vz .vzm-warn .vzm-btn { color: var(--cz-ink); }
-.vz .vzm-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; background: var(--cz-well); color: var(--cz-ink2); font-size: var(--fs-1); font-weight: 700; white-space: nowrap; }
+.vz .vzm-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; background: var(--cz-well); color: var(--cz-ink2); font-size: var(--fs-badge); font-weight: var(--fw-strong); white-space: nowrap; line-height: var(--lh-badge); }
 .vz .vzm-pill[data-k="you"] { background: var(--cz-bluebg); color: var(--cz-blueink); }
 .vz .vzm-in { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 12px; background: var(--cz-well); color: var(--cz-ink3); }
-.vz .vzm-in input { flex: 1; min-width: 0; border: 0; background: transparent; font: var(--fs-3) var(--cz-sans); color: var(--cz-ink); outline: none; }
+.vz .vzm-in input { flex: 1; min-width: 0; border: 0; background: transparent; font: var(--fs-body)/var(--lh-body) var(--cz-sans); color: var(--cz-ink); outline: none; }
 .vz .vzm-in:focus-within { box-shadow: 0 0 0 1.5px var(--cz-blue); }
 .vz .vzm-in input:focus-visible { outline: none; }
 
@@ -71,10 +71,10 @@
 .vzm-pop { position: absolute; right: 0; top: 4px; z-index: 30; width: min(380px, 100%); display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 18px; background: var(--cz-card); border: 1px solid var(--cz-hair); box-shadow: var(--cz-lift); }
 .vzm-anc[data-pop="mat"] { height: auto; }
 .vzm-anc[data-pop="mat"] .vzm-pop { position: relative; top: 0; width: 100%; }
-.vzm-pop .vz-empty { font-size: var(--fs-2); }
-.vzm-mi2 { display: flex !important; width: 100%; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px !important; border-radius: 10px; font-size: var(--fs-3); color: var(--cz-ink); }
+.vzm-pop .vz-empty { font-size: var(--fs-meta); line-height: var(--lh-meta); }
+.vzm-mi2 { display: flex !important; width: 100%; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px !important; border-radius: 10px; font-size: var(--fs-body); color: var(--cz-ink); line-height: var(--lh-body); }
 .vzm-mi2.hl, .vzm-mi2[aria-current="true"] { background: var(--cz-well); }
-.vzm-mi2 .vzm-k { color: var(--cz-ink3); font-size: var(--fs-2); }
+.vzm-mi2 .vzm-k { color: var(--cz-ink3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .vzm-agl { display: flex; flex-direction: column; }
 
 /* ── material (XvAMaterial): a row per item, the preview on the row and Present on its icon; Add material and its menu ── */
@@ -82,43 +82,43 @@
 .vzm-mrow { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--cz-hair); }
 .vzm-mopen { flex: 1; min-width: 0; display: flex !important; align-items: center; gap: 12px; min-height: 56px; padding: 6px 4px !important; border-radius: 10px; text-align: left; }
 .vzm-mopen .vzm-mi { width: 32px; height: 32px; }
-.vzm-mt small { display: block; font-size: var(--fs-2); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.vzm-mt b { display: block; font-size: var(--fs-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.vzm-mt small { display: block; font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-meta); }
+.vzm-mt b { display: block; font-size: var(--fs-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-body); }
 .vzm-pres { color: var(--cz-blueink) !important; }
-.vzm-add { display: inline-flex !important; align-items: center; gap: 8px; align-self: flex-start; min-height: 40px; padding: 0 6px !important; border-radius: 10px; font-size: var(--fs-3); font-weight: 700; color: var(--cz-blueink) !important; }
+.vzm-add { display: inline-flex !important; align-items: center; gap: 8px; align-self: flex-start; min-height: 40px; padding: 0 6px !important; border-radius: 10px; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-blueink) !important; line-height: var(--lh-row); }
 .vzm-addm { gap: 0; padding: 6px; }
-.vzm-ar { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 10px; border-radius: 10px; font-size: var(--fs-3); cursor: pointer; }
-.vzm-ar b { flex: 1; font-weight: 600; }
+.vzm-ar { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 10px; border-radius: 10px; font-size: var(--fs-body); cursor: pointer; line-height: var(--lh-body); }
+.vzm-ar b { flex: 1; font-weight: var(--fw-strong); }
 .vzm-ar input { flex: 1; min-width: 0; min-height: 36px; border: 0; background: transparent; font: inherit; color: var(--cz-ink); outline: none; }
 .vzm-ar input::placeholder { color: var(--cz-ink); }
-.vzm-ar small { font-size: var(--fs-2); color: var(--cz-ink3); white-space: nowrap; }
+.vzm-ar small { font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; line-height: var(--lh-meta); }
 .vzm-ar:focus-within { background: var(--cz-well); }
 .vzm-addm .vzm-mlbl { margin: 8px 10px 2px; padding-top: 8px; border-top: 1px solid var(--cz-hair); }
 .vzm-scope { padding: 6px 10px 2px; }
 
 /* ── rows: material, decisions, steps, questions ── */
-.vzm-trow, .vzm-step { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 4px; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-3); flex-wrap: wrap; }
+.vzm-trow, .vzm-step { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 4px; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-body); flex-wrap: wrap; line-height: var(--lh-body); }
 .vzm-trow.vzm-top { align-items: flex-start; }
 .vzm-mi { width: 44px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--cz-well); color: var(--cz-ink2); flex: none; }
 .vzm-mt { flex: 1; min-width: 0; }
-.vzm-mt b { font-weight: 700; }
+.vzm-mt b { font-weight: var(--fw-strong); }
 .vzm-why { flex-basis: 100%; }
-.vzm-made { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-2); margin-top: 4px; }
+.vzm-made { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-meta); margin-top: 4px; line-height: var(--lh-meta); }
 .vzm-made span { flex: 1; min-width: 0; }
-.vzm-made .vzm-btn { color: var(--cz-blueink); font-weight: 700; }
-.vzm-fold { display: flex !important; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px !important; border-radius: 12px; font-size: var(--fs-3); }
+.vzm-made .vzm-btn { color: var(--cz-blueink); font-weight: var(--fw-strong); }
+.vzm-fold { display: flex !important; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px !important; border-radius: 12px; font-size: var(--fs-body); line-height: var(--lh-body); }
 .vzm-fold[aria-expanded="true"] svg { transform: rotate(90deg); }
-.vzm-fold .vzm-mut { font-size: var(--fs-2); }
+.vzm-fold .vzm-mut { font-size: var(--fs-meta); line-height: var(--lh-meta); }
 
 /* ── Focus (MtFocus) ── */
 .vzm-now { padding: 16px 20px; border-radius: 18px; border: 1px solid var(--cz-blue); background: var(--cz-card); }
-.vzm-now .vzm-lbl { font-size: var(--fs-1); }
+.vzm-now .vzm-lbl { font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .vzm-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
-.vzm-ag { display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) 64px; align-items: center; gap: 0 16px; min-height: 30px; font-size: var(--fs-2); color: var(--cz-ink2); }
+.vzm-ag { display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) 64px; align-items: center; gap: 0 16px; min-height: 30px; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 .vzm-ag[data-k="plan"] { color: var(--cz-ink3); }
-.vzm-ag b { color: var(--cz-ink); font-weight: 700; }
-.vzm-ag small { font-size: var(--fs-2); }
-.vzm-ag[data-k="late"] small, .vzm-ag[data-k="now"] small { color: var(--cz-late); font-weight: 700; }
+.vzm-ag b { color: var(--cz-ink); font-weight: var(--fw-strong); }
+.vzm-ag small { font-size: var(--fs-meta); line-height: var(--lh-meta); }
+.vzm-ag[data-k="late"] small, .vzm-ag[data-k="now"] small { color: var(--cz-late); font-weight: var(--fw-strong); }
 .vzm-fb { display: block; }
 .vzm-fb .bg { fill: var(--cz-well); }
 .vzm-fb .fg { fill: var(--cz-ink3); }
@@ -128,23 +128,23 @@
 /* ── Replay (MtReplay; the phone half MtPhone) ── */
 .vzp { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
 .vzp .vzp-mut, .vzp-mut { color: var(--cz-ink3); }
-.vzp-sm { font-size: var(--fs-2); line-height: 1.5; }
-.vzp-lbl { margin: 0; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); }
+.vzp-sm { font-size: var(--fs-meta); line-height: 1.5; }
+.vzp-lbl { margin: 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
 .vzp-pl { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 18px; background: var(--cz-well); }
 .vzp-pr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
 .vzp-shot { position: relative; border-radius: 12px; background: var(--cz-card); border: 1px solid var(--cz-hair); overflow: hidden; aspect-ratio: 16 / 10; }
 .vzp-img { position: absolute; inset: 0; }
 .vzp-img img, .vzp-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
-.vzp-who { position: absolute; left: 8px; bottom: 8px; padding: 2px 9px; border-radius: 999px; background: var(--vzd); color: var(--vzd-on); font-size: var(--fs-2); font-weight: 700; }
+.vzp-who { position: absolute; left: 8px; bottom: 8px; padding: 2px 9px; border-radius: 999px; background: var(--vzd); color: var(--vzd-on); font-size: var(--fs-label); font-weight: var(--fw-strong); line-height: var(--lh-label); }
 .vzp-ib { width: 30px; height: 30px; border-radius: 50%; display: inline-grid !important; place-items: center; color: var(--cz-ink2); }
 .vzp-big { position: absolute !important; right: 6px; top: 6px; background: var(--cz-card) !important; }
 .vzp-pc { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
 .vzp-ctl { display: flex; align-items: center; gap: 10px; }
-.vzp-ctl b { font-size: var(--fs-3); font-weight: 800; font-variant-numeric: tabular-nums; }
-.vzp-ctl .vzp-mut { font-size: var(--fs-2); flex: 1; }
+.vzp-ctl b { font-size: var(--fs-row); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; line-height: var(--lh-row); }
+.vzp-ctl .vzp-mut { font-size: var(--fs-meta); flex: 1; line-height: var(--lh-meta); }
 .vzp-ib.vzp-solid { width: 40px; height: 40px; background: var(--vzd) !important; color: var(--vzd-on); }
 .vzp-fill { fill: currentColor; stroke: none; }
-.vzp-speed { min-width: 32px; min-height: 28px; padding: 0 6px !important; border-radius: 8px; font-size: var(--fs-2); color: var(--cz-ink2); text-align: center !important; }
+.vzp-speed { min-width: 32px; min-height: 28px; padding: 0 6px !important; border-radius: 8px; font-size: var(--fs-meta); color: var(--cz-ink2); text-align: center !important; line-height: var(--lh-meta); }
 .vzp-ths { display: flex; flex-wrap: wrap; gap: 6px; }
 .vzp-th { width: 56px; height: 34px; border-radius: 6px; background: var(--cz-card) !important; border: 1px solid var(--cz-hair) !important; overflow: hidden; flex: none; }
 .vzp-th.on { border: 2px solid var(--cz-blue) !important; }
@@ -158,75 +158,75 @@
 .vzp-kd[data-k="risk"] { fill: var(--cz-risk); }
 .vzp-head { fill: var(--cz-ink); }
 .vzp-tops { display: flex; gap: 4px; }
-.vzp-top { flex: 1 1 0; min-width: 0; font-size: var(--fs-2); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 0 !important; }
-.vzp-top[aria-current="true"] { color: var(--cz-ink); font-weight: 700; }
+.vzp-top { flex: 1 1 0; min-width: 0; font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 0 !important; line-height: var(--lh-meta); }
+.vzp-top[aria-current="true"] { color: var(--cz-ink); font-weight: var(--fw-strong); }
 .vzp-fl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
 .vzp-fl > .vzp-mut { margin-left: auto; }
 .vzp-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--cz-well); }
-.vzp-seg button { min-height: 30px; padding: 0 12px !important; border-radius: 999px; font-size: var(--fs-2); font-weight: 600; color: var(--cz-ink2); white-space: nowrap; }
-.vzp-seg button[aria-pressed="true"] { background: var(--cz-card); color: var(--cz-ink); font-weight: 700; box-shadow: 0 1px 2px color-mix(in oklab, var(--cz-ink) 10%, transparent); }
-.vzp-bulk { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--vzd); color: var(--vzd-on); font-size: var(--fs-3); }
+.vzp-seg button { min-height: 30px; padding: 0 12px !important; border-radius: 999px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); white-space: nowrap; line-height: var(--lh-label); }
+.vzp-seg button[aria-pressed="true"] { background: var(--cz-card); color: var(--cz-ink); font-weight: var(--fw-strong); box-shadow: 0 1px 2px color-mix(in oklab, var(--cz-ink) 10%, transparent); }
+.vzp-bulk { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--vzd); color: var(--vzd-on); font-size: var(--fs-body); line-height: var(--lh-body); }
 .vzp-bulk b { flex: 1; }
-.vzp-bulk button { min-height: 30px; padding: 0 12px !important; border-radius: 999px; background: color-mix(in oklab, var(--vzd-on) 16%, transparent) !important; color: var(--vzd-on) !important; font-size: var(--fs-2); font-weight: 700; }
+.vzp-bulk button { min-height: 30px; padding: 0 12px !important; border-radius: 999px; background: color-mix(in oklab, var(--vzd-on) 16%, transparent) !important; color: var(--vzd-on) !important; font-size: var(--fs-label); font-weight: var(--fw-strong); line-height: var(--lh-label); }
 .vzp-bulk button.vzp-gh { background: transparent !important; }
 .vzp-kl { display: flex; flex-direction: column; }
-.vzp-kr { display: grid; grid-template-columns: 22px 92px minmax(0, 1fr) 46px; gap: 0 10px; align-items: flex-start; padding: 10px 6px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-3); }
+.vzp-kr { display: grid; grid-template-columns: 22px 92px minmax(0, 1fr) 46px; gap: 0 10px; align-items: flex-start; padding: 10px 6px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-body); line-height: var(--lh-body); }
 .vzp-kr.sel { background: var(--cz-bluebg); border-radius: 12px; border-top-color: transparent; }
 .vzp-kr p { margin: 0; }
 .vzp-chk { width: 18px; height: 18px; margin-top: 1px; border-radius: 5px; border: 1.5px solid var(--cz-ink3) !important; display: grid !important; place-items: center; color: var(--vzd-on); }
 .vzp-chk[aria-checked="true"] { background: var(--vzd) !important; border-color: var(--vzd) !important; }
-.vzp-pill { justify-self: start; display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; font-size: var(--fs-1); font-weight: 700; white-space: nowrap; background: var(--cz-well); color: var(--cz-ink2); }
+.vzp-pill { justify-self: start; display: inline-flex; align-items: center; min-height: 22px; padding: 0 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); }
 .vzp-pill[data-k="ok"] { background: var(--cz-okbg); color: var(--cz-ok); }
 .vzp-pill[data-k="you"], .vzp-pill[data-k="y"] { background: transparent; color: var(--cz-blueink); }
 .vzp-pill[data-k="w"] { background: var(--cz-latebg); color: var(--cz-late); }
-.vzp-q { font-size: var(--fs-2); color: var(--cz-ink3); margin-top: 2px !important; }
-.vzp-conf { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ok); }
-.vzp-tm { justify-self: end; font-size: var(--fs-2); font-weight: 700; color: var(--cz-blueink); font-variant-numeric: tabular-nums; text-align: right !important; }
+.vzp-q { font-size: var(--fs-meta); color: var(--cz-ink3); margin-top: 2px !important; line-height: var(--lh-meta); }
+.vzp-conf { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ok); line-height: var(--lh-label); }
+.vzp-tm { justify-self: end; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-blueink); font-variant-numeric: tabular-nums; text-align: right !important; line-height: var(--lh-label); }
 .vzp-tm.risk { color: var(--cz-late); }
 .vzp-tm:hover:not(:disabled) { text-decoration: underline; }
-.vzp-left { display: flex !important; align-items: center; gap: 8px; min-height: 40px; padding: 0 6px !important; border-top: 1px solid var(--cz-hair) !important; font-size: var(--fs-3); flex-wrap: wrap; }
-.vzp-left span { color: var(--cz-ink3); font-size: var(--fs-2); }
+.vzp-left { display: flex !important; align-items: center; gap: 8px; min-height: 40px; padding: 0 6px !important; border-top: 1px solid var(--cz-hair) !important; font-size: var(--fs-body); flex-wrap: wrap; line-height: var(--lh-body); }
+.vzp-left span { color: var(--cz-ink3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .vzp-left[aria-expanded="true"] svg { transform: rotate(90deg); }
 .vzp-ll { display: flex; flex-direction: column; }
-.vzp-lr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 8px 6px 8px 28px; font-size: var(--fs-2); color: var(--cz-ink2); border-top: 1px solid var(--cz-hair); }
-.vzp-lr small { font-size: var(--fs-2); color: var(--cz-ink3); }
-.vzp-link { color: var(--cz-blueink); font-weight: 700; font-size: var(--fs-2); }
-.vzp-empty { margin: 0; font-size: var(--fs-2); color: var(--cz-ink3); }
+.vzp-lr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 8px 6px 8px 28px; font-size: var(--fs-meta); color: var(--cz-ink2); border-top: 1px solid var(--cz-hair); line-height: var(--lh-meta); }
+.vzp-lr small { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.vzp-link { color: var(--cz-blueink); font-weight: var(--fw-strong); font-size: var(--fs-label); line-height: var(--lh-label); }
+.vzp-empty { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .vzp-phh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
-.vzp-dark { min-height: 32px; padding: 0 14px !important; border-radius: 999px; background: var(--vzd) !important; color: var(--vzd-on) !important; font-size: var(--fs-3); font-weight: 700; }
-.vzp-h3 { margin: 8px 0 0 !important; font-size: var(--fs-4); font-weight: 800; }
-.vzp-prow { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 4px; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-3); }
+.vzp-dark { min-height: 32px; padding: 0 14px !important; border-radius: 999px; background: var(--vzd) !important; color: var(--vzd-on) !important; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
+.vzp-h3 { margin: 8px 0 0 !important; font-size: var(--fs-section); font-weight: var(--fw-strong); line-height: var(--lh-section); }
+.vzp-prow { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 4px; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-body); line-height: var(--lh-body); }
 .vzp-prow span { flex: 1; min-width: 0; }
 .vzp-prow .vzp-tm { justify-self: auto; }
-.vzp-soft { min-height: 30px; padding: 0 12px !important; border-radius: 999px; background: var(--cz-well) !important; font-size: var(--fs-2); font-weight: 700; }
+.vzp-soft { min-height: 30px; padding: 0 12px !important; border-radius: 999px; background: var(--cz-well) !important; font-size: var(--fs-label); font-weight: var(--fw-strong); line-height: var(--lh-label); }
 /* ── Replay as one card (XvAReplay): the player, then the points of the part playing; a point is a press that corrects it ── */
 .vzp-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 20px; background: var(--cz-well); }
 .vzp-card .vzp-pl { padding: 0; background: none; }
 .vzp-card .vzp-shot { background: var(--cz-card); }
 .vzp-pts { display: flex; flex-direction: column; gap: 6px; }
-.vzp-pt { display: grid !important; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; padding: 10px !important; border-radius: 12px; background: var(--cz-card) !important; text-align: left; font-size: var(--fs-3); }
+.vzp-pt { display: grid !important; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; padding: 10px !important; border-radius: 12px; background: var(--cz-card) !important; text-align: left; font-size: var(--fs-body); line-height: var(--lh-body); }
 .vzp-pt:hover { box-shadow: 0 0 0 1px var(--cz-hair); }
 .vzp-pt .vzp-pill { justify-self: center; }
 .vzp-kt { display: flex !important; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
-.vzp-kt b { font-weight: 700; }
-.vzp-kt small { font-size: var(--fs-2); color: var(--cz-ink3); }
+.vzp-kt b { font-weight: var(--fw-strong); }
+.vzp-kt small { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .vzp-kr .vzp-kt:hover b { text-decoration: underline; text-decoration-color: var(--cz-hair); }
 .vzp-chk2 { color: var(--cz-late) !important; }
 .vzp-ed { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: var(--cz-card); box-shadow: 0 0 0 2px var(--cz-blue); }
 .vzp-kinds { display: flex; gap: 6px; }
-.vzp-kinds button { min-height: 30px; padding: 0 12px !important; border-radius: 10px; background: var(--cz-well) !important; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); }
+.vzp-kinds button { min-height: 30px; padding: 0 12px !important; border-radius: 10px; background: var(--cz-well) !important; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
 .vzp-kinds button[aria-checked="true"][data-pk="ok"] { background: var(--cz-okbg) !important; color: var(--cz-ok); box-shadow: inset 0 0 0 1.5px var(--cz-ok); }
 .vzp-kinds button[aria-checked="true"][data-pk="w"] { background: var(--cz-latebg) !important; color: var(--cz-late); box-shadow: inset 0 0 0 1.5px var(--cz-late); }
 .vzp-kinds button[aria-checked="true"][data-pk="y"] { background: var(--cz-bluebg) !important; color: var(--cz-blueink); box-shadow: inset 0 0 0 1.5px var(--cz-blueink); }
-.vzp-was { margin: 0; font-size: var(--fs-2); color: var(--cz-ink3); }
-.vzp-eta { width: 100%; min-height: 64px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--cz-hair); background: var(--cz-card); font: inherit; font-size: var(--fs-3); line-height: 1.45; color: var(--cz-ink); resize: vertical; }
+.vzp-was { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.vzp-eta { width: 100%; min-height: 64px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--cz-hair); background: var(--cz-card); font: inherit; font-size: var(--fs-body); line-height: 1.45; color: var(--cz-ink); resize: vertical; }
 .vzp-eta:focus { outline: 2px solid var(--cz-blue); outline-offset: -1px; }
-.vzp-learn { padding: 10px 12px; border-radius: 12px; background: var(--cz-bluebg); font-size: var(--fs-2); line-height: 1.45; color: var(--cz-ink); }
+.vzp-learn { padding: 10px 12px; border-radius: 12px; background: var(--cz-bluebg); font-size: var(--fs-meta); line-height: 1.45; color: var(--cz-ink); }
 .vzp-learn b:empty { display: none; }
 .vzp-ef { display: flex; align-items: center; gap: 10px; }
 .vzp-sp { flex: 1; }
 .vzp-del:hover { color: var(--cz-ink); }
-.vzp-gbtn { min-height: 34px; padding: 0 12px !important; border-radius: 999px; font-size: var(--fs-3); font-weight: 700; }
+.vzp-gbtn { min-height: 34px; padding: 0 12px !important; border-radius: 999px; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
 
 /* ── the recording view (batch 25 item 11, MvC/MvF/MvN): summary and lean kept rows left, the evidence right, the timeline docked ── */
 /* the shell's wide grid (summary left, 75ch right) does not apply: this view is its own two columns */
@@ -237,15 +237,15 @@
 .vzr-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
 @container (min-width: 860px) { .vzr-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; } .vzr-ev { position: sticky; top: 0; } }
 .vzr-l { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
-.vzr-sum .czs-p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--fs-3); line-height: 1.55; margin: 0; }
+.vzr-sum .czs-p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--fs-body); line-height: 1.55; margin: 0; }
 .vzr-sum.all .czs-p { display: block; }
 .vzr-sm { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
 .vzr-sm .czs-meta { margin: 0 0 0 auto; }
-.vzr-more2 { font-size: var(--fs-2); font-weight: 800; color: var(--cz-blueink); padding: 4px 0 !important; }
+.vzr-more2 { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-blueink); padding: 4px 0 !important; line-height: var(--lh-label); }
 .vzr-pts { border: 1px solid var(--cz-hair); border-radius: 20px; background: var(--cz-card); overflow: hidden; }
 .vzr-ph { display: flex; align-items: center; gap: 12px; padding: 12px 14px 8px 18px; flex-wrap: wrap; }
-.vzr-ph h3 { margin: 0; font-size: var(--fs-4); font-weight: 800; }
-.vzr-cnt { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); }
+.vzr-ph h3 { margin: 0; font-size: var(--fs-section); font-weight: var(--fw-strong); line-height: var(--lh-section); }
+.vzr-cnt { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
 .vzr-cfall { display: inline-flex !important; align-items: center; gap: 6px; }
 .vzr-k { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; color: var(--cz-ink2); }
 .vzr-k[data-k="decision"]::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--cz-ok); }
@@ -254,23 +254,23 @@
 .vzp-kr.vzr-row { grid-template-columns: 20px minmax(0, 1fr) auto 32px; gap: 0 12px; align-items: start; padding: 10px 12px 10px 18px; }
 .vzp-kr.vzr-row .vzr-k { margin-top: 1px; }
 .vzp-kr.vzr-row.sel { margin: 2px 6px; padding-left: 12px; padding-right: 6px; }
-.vzr-row .vzp-kt b { font-weight: 800; line-height: 1.35; }
+.vzr-row .vzp-kt b { font-weight: var(--fw-strong); line-height: 1.35; }
 .vzr-row .vzp-tm { padding-top: 2px !important; min-width: 44px; }
 .vzr-cf { width: 30px; height: 30px; border-radius: 50%; border: 1.6px solid var(--cz-hair) !important; display: inline-grid !important; place-items: center; color: var(--cz-ink3); margin-top: -3px; }
 .vzr-cf:hover { color: var(--cz-ok); border-color: var(--cz-ok) !important; }
 .vzr-cf.on { background: var(--cz-okbg) !important; border-color: transparent !important; color: var(--cz-ok); }
-.vzr-fu { grid-column: 2 / 5; display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: var(--fs-2); color: var(--cz-ink2); }
+.vzr-fu { grid-column: 2 / 5; display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 .vzr-fu.vzr-sub { margin-top: 2px; }
 .vzr-bx { color: var(--cz-ink3); flex: none; }
 .vzr-grow { flex: 1; min-width: 0; }
 .vzr-who { color: var(--cz-ink3); }
-.vzr-tk { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-1); font-weight: 800; }
+.vzr-tk { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-badge); font-weight: var(--fw-strong); line-height: var(--lh-badge); }
 .vzr-ghost { background: var(--cz-well) !important; }
-.vzr-chk { grid-column: 2 / 5; margin: 4px 0 0; font-size: var(--fs-2); color: var(--cz-late); }
+.vzr-chk { grid-column: 2 / 5; margin: 4px 0 0; font-size: var(--fs-meta); color: var(--cz-late); line-height: var(--lh-meta); }
 .vzr-pad { padding: 4px 18px 14px; }
 .vzr-fold { display: flex; gap: 6px; flex-wrap: wrap; }
-.vzr-ch { min-height: 34px; padding: 0 13px !important; border-radius: 999px; background: var(--cz-well) !important; display: inline-flex !important; align-items: center; gap: 7px; font-size: var(--fs-2); color: var(--cz-ink2); }
-.vzr-ch b { font-weight: 800; color: var(--cz-ink); }
+.vzr-ch { min-height: 34px; padding: 0 13px !important; border-radius: 999px; background: var(--cz-well) !important; display: inline-flex !important; align-items: center; gap: 7px; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
+.vzr-ch b { font-weight: var(--fw-strong); color: var(--cz-ink); }
 .vzr-ch span { color: var(--cz-ink3); }
 .vzr-ch[aria-expanded="true"] { background: var(--cz-ink) !important; color: var(--cz-card); }
 .vzr-ch[aria-expanded="true"] b, .vzr-ch[aria-expanded="true"] span { color: var(--cz-card); }
@@ -280,27 +280,27 @@
 .vzr-noshot { display: grid; place-items: center; min-height: 120px; border-radius: 12px; background: var(--cz-well); padding: 12px; text-align: center; }
 .vzr-acts { display: flex; align-items: center; gap: 10px; }
 .vzr-pri { width: 40px !important; height: 40px !important; background: var(--cz-blueink) !important; color: var(--cz-card) !important; }
-.vzr-at { font-size: var(--fs-3); font-weight: 800; color: var(--cz-blueink); font-variant-numeric: tabular-nums; }
-.vzr-q { margin: 0; font-size: var(--fs-3); line-height: 1.5; color: var(--cz-ink2); }
+.vzr-at { font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-blueink); font-variant-numeric: tabular-nums; line-height: var(--lh-row); }
+.vzr-q { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--cz-ink2); }
 .vzr-film { display: flex; gap: 6px; align-items: center; overflow: hidden; }
 .vzr-film.all { flex-wrap: wrap; }
 .vzr-film .vzp-th { width: 72px; height: 44px; }
-.vzr-more { height: 44px; min-width: 44px; padding: 0 8px !important; border-radius: 6px; background: var(--cz-well) !important; color: var(--cz-ink2); font-size: var(--fs-2); font-weight: 800; display: inline-grid !important; place-items: center; }
+.vzr-more { height: 44px; min-width: 44px; padding: 0 8px !important; border-radius: 6px; background: var(--cz-well) !important; color: var(--cz-ink2); font-size: var(--fs-label); font-weight: var(--fw-strong); display: inline-grid !important; place-items: center; line-height: var(--lh-label); }
 .vzr-dock { position: sticky; bottom: 0; z-index: 2; flex-direction: row !important; align-items: center; gap: 14px !important; padding: 10px 16px !important; border-radius: 22px; background: var(--cz-card) !important; box-shadow: 0 18px 44px -18px color-mix(in oklab, var(--cz-ink) 40%, transparent), 0 0 0 1px var(--cz-hair); }
 .vzr-dock .vzp-ctl { flex: none; }
 .vzr-dock .vzp-ctl .vzp-mut { flex: none; }
 .vzr-tl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
 .vzr-tops { align-items: flex-end; }
-.vzr-tops .vzp-top { white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.2; font-weight: 700; color: var(--cz-ink2); padding: 0 6px 0 0 !important; text-align: left !important; }
-.vzr-tops .vzp-top[aria-current="true"] { color: var(--cz-ink); font-weight: 800; }
+.vzr-tops .vzp-top { white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.2; font-weight: var(--fw-strong); color: var(--cz-ink2); padding: 0 6px 0 0 !important; text-align: left !important; }
+.vzr-tops .vzp-top[aria-current="true"] { color: var(--cz-ink); font-weight: var(--fw-strong); }
 .vzp-kd[data-k="decision"] { fill: var(--cz-ok); }
 .vzp-kd[data-k="action"] { fill: var(--cz-blue); }
 .vzp-kd[data-k="question"] { fill: var(--cz-late); }
 /* a word fixed in place (MvF): fixed in green, a guess underlined dotted, the field in place */
-.vzr-fx { background: var(--cz-okbg); border-radius: 5px; padding: 0 3px; font-weight: 700; color: var(--cz-ink); }
-.vzr-fl { display: inline !important; padding: 0 !important; font: inherit; color: var(--cz-ink); font-weight: 700; border-bottom: 2px dotted var(--cz-late) !important; border-radius: 0 !important; cursor: pointer; }
+.vzr-fx { background: var(--cz-okbg); border-radius: 5px; padding: 0 3px; font-weight: var(--fw-strong); color: var(--cz-ink); }
+.vzr-fl { display: inline !important; padding: 0 !important; font: inherit; color: var(--cz-ink); font-weight: var(--fw-strong); border-bottom: 2px dotted var(--cz-late) !important; border-radius: 0 !important; cursor: pointer; }
 .vzr-fe { display: inline-flex; align-items: center; gap: 4px; padding: 0 2px 0 8px; border-radius: 10px; background: var(--cz-card); box-shadow: 0 0 0 2px var(--cz-blue); vertical-align: middle; }
-.vzr-fe input { width: 12ch; height: 28px; border: 0; outline: 0; background: transparent; font: inherit; font-weight: 800; color: var(--cz-ink); }
+.vzr-fe input { width: 12ch; height: 28px; border: 0; outline: 0; background: transparent; font: inherit; font-weight: var(--fw-strong); color: var(--cz-ink); }
 .vzr-ok { width: 26px; height: 26px; border-radius: 50%; display: inline-grid !important; place-items: center; background: var(--cz-blueink) !important; color: var(--cz-card); }
 .vzr-ok svg, .vzr-ev .vzp-ib svg, .vzr-pts svg, .vzr-cfall svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
 .vzr-ev .vzp-fill, .vzr-pri svg { fill: currentColor; stroke: none; }
@@ -323,50 +323,50 @@
 /* Calendar | Notes and + (XvACal): a full-width switch, the active half a white pill */
 .vzc-top { display: flex; align-items: center; gap: 8px; }
 .vzc-seg { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: 2px; padding: 4px; border-radius: 999px; background: var(--cz-well); }
-.vzc-seg > button { all: unset; cursor: pointer; height: 30px; padding: 0 16px; border-radius: 999px; font: 600 var(--fs-2) var(--cz-sans); color: var(--cz-ink2); display: inline-flex; align-items: center; }
+.vzc-seg > button { all: unset; cursor: pointer; height: 30px; padding: 0 16px; border-radius: 999px; font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); color: var(--cz-ink2); display: inline-flex; align-items: center; }
 .vzc-seg > button[aria-selected="true"] { background: var(--cz-card); color: var(--cz-ink); box-shadow: 0 1px 3px rgba(42,46,53,.12); }
 .vzc-seg > button:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 1px; }
 .vz-cal > .czs-sum { margin: 0; }
 .vzc-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
 .vzc-head .vzm-h2 { margin-right: 10px; }
-.vzc-mut { color: var(--cz-ink3); font-size: var(--fs-2); }
+.vzc-mut { color: var(--cz-ink3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
 /* the week grid */
 .vzc-wk { display: grid; grid-template-columns: 44px repeat(5, minmax(84px, 1fr)) repeat(2, 64px); border: 1px solid var(--cz-hair); border-radius: 16px; overflow: auto; max-height: 640px; }
 .vzc-col { min-width: 0; border-left: 1px solid var(--cz-hair); }
 .vzc-col.vzc-gut { border-left: 0; }
 .vzc-col.we { background: color-mix(in oklab, var(--cz-ink) 3%, transparent); }
-.vzc-hd { position: sticky; top: 0; z-index: 2; height: 58px; padding: 8px 8px 6px; background: var(--cz-card); border-bottom: 1px solid var(--cz-hair); display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-2); color: var(--cz-ink2); }
+.vzc-hd { position: sticky; top: 0; z-index: 2; height: 58px; padding: 8px 8px 6px; background: var(--cz-card); border-bottom: 1px solid var(--cz-hair); display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 .vzc-col.we .vzc-hd { background: color-mix(in oklab, var(--cz-ink) 3%, var(--cz-card)); }
-.vzc-dn { font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.vzc-dn { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-label); }
 .vzc-hd.now .vzc-dn, .vzc-hd.now small { color: var(--cz-blueink); }
-.vzc-hd small { font-size: var(--fs-2); }
+.vzc-hd small { font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .vzc-lb { display: block; height: 4px; border-radius: 2px; background: var(--cz-well); overflow: hidden; }
 .vzc-lb i { display: block; height: 100%; width: var(--w, 0); border-radius: 2px; background: color-mix(in oklab, var(--cz-blue) 55%, var(--cz-well2)); }
 .vzc-hd.now .vzc-lb i { background: var(--cz-blue); }
 .vzc-body { position: relative; height: var(--hh, 520px); background-image: linear-gradient(var(--cz-hair) 1px, transparent 1px); background-size: 100% 52px; }
 .vzc-body.now { background-color: color-mix(in oklab, var(--cz-blue) 5%, transparent); }
 .vzc-gut .vzc-body { background-image: none; }
-.vzc-gut .vzc-body i { position: absolute; right: 8px; top: calc(var(--t, 0px) + 4px); font-style: normal; font-size: var(--fs-1); color: var(--cz-ink3); }
-.vzc-ev { position: absolute; top: var(--t, 0); height: var(--h, 24px); left: calc(4px + (100% - 8px) * var(--l, 0) / var(--lc, 1)); width: calc((100% - 8px) / var(--lc, 1) - 2px); display: flex !important; flex-direction: column; gap: 1px; padding: 4px 8px !important; border-radius: 8px; background: var(--cz-bluebg) !important; color: var(--cz-ink); font-size: var(--fs-2); line-height: 1.3; overflow: hidden; z-index: 1; }
+.vzc-gut .vzc-body i { position: absolute; right: 8px; top: calc(var(--t, 0px) + 4px); font-style: normal; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.vzc-ev { position: absolute; top: var(--t, 0); height: var(--h, 24px); left: calc(4px + (100% - 8px) * var(--l, 0) / var(--lc, 1)); width: calc((100% - 8px) / var(--lc, 1) - 2px); display: flex !important; flex-direction: column; gap: 1px; padding: 4px 8px !important; border-radius: 8px; background: var(--cz-bluebg) !important; color: var(--cz-ink); font-size: var(--fs-meta); line-height: 1.3; overflow: hidden; z-index: 1; }
 .vzc-ev > * { flex: none; }
-.vzc-ev b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.vzc-ev span { font-size: var(--fs-1); color: var(--cz-ink2); }
+.vzc-ev b { font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.vzc-ev span { font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 .vzc-ev.un { background: var(--cz-card) !important; border: 1px dashed var(--cz-ink3) !important; }
 .vzc-ev.ring { box-shadow: 0 0 0 2px var(--cz-blue); }
 .vzc-ev.past { opacity: .85; }
 .vzc-ev:hover { filter: brightness(.97); }
-.vzc-link { color: var(--cz-blueink) !important; font-weight: 700; cursor: pointer; }
+.vzc-link { color: var(--cz-blueink) !important; font-weight: var(--fw-strong); cursor: pointer; }
 .vzc-nl { position: absolute; left: 0; right: 0; top: var(--t, 0); height: 2px; background: var(--cz-blue); z-index: 2; }
 .vzc-ads { display: flex; flex-direction: column; gap: 2px; padding: 4px; border-bottom: 1px solid var(--cz-hair); }
-.vzc-ad { padding: 2px 6px !important; border-radius: 6px; background: var(--cz-bluebg) !important; font-size: var(--fs-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.vzc-leg { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: var(--fs-2); color: var(--cz-ink2); }
+.vzc-ad { padding: 2px 6px !important; border-radius: 6px; background: var(--cz-bluebg) !important; font-size: var(--fs-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-meta); }
+.vzc-leg { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 .vzc-leg > span { display: inline-flex; align-items: center; gap: 6px; }
 .vzc-sw { width: 14px; height: 10px; border-radius: 3px; background: var(--cz-bluebg); }
 .vzc-sw.un { background: transparent; border: 1px dashed var(--cz-ink3); }
 /* the day (phone) */
 .vzc-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
-.vzc-dy { display: flex !important; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; padding: 10px 8px 8px !important; border-radius: 14px; background: var(--cz-well) !important; border: 1.5px solid transparent !important; font-size: var(--fs-1); color: var(--cz-ink2); text-align: center !important; }
-.vzc-dy b { font-size: var(--fs-4); font-weight: 700; color: var(--cz-ink); }
+.vzc-dy { display: flex !important; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; padding: 10px 8px 8px !important; border-radius: 14px; background: var(--cz-well) !important; border: 1.5px solid transparent !important; font-size: var(--fs-meta); color: var(--cz-ink2); text-align: center !important; line-height: var(--lh-meta); }
+.vzc-dy b { font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-row); }
 .vzc-dy .vzc-lb { align-self: stretch; margin: 4px 6px 0; height: 3px; background: transparent; }
 .vzc-dy[aria-pressed="true"] { background: var(--cz-bluebg) !important; border-color: var(--cz-blue) !important; color: var(--cz-blueink); }
 .vzc-dy[aria-pressed="true"] b { color: var(--cz-blueink); }
@@ -376,27 +376,27 @@
 .vzc-de { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px !important; text-align: left !important; }
 .vzc-de + .vzc-de { border-top: 1px solid var(--cz-hair) !important; }
 .vzc-de.past .vzc-dt b { color: var(--cz-ink2); }
-.vzc-t { font-size: var(--fs-3); font-weight: 700; color: var(--cz-ink); font-variant-numeric: tabular-nums; }
+.vzc-t { font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); font-variant-numeric: tabular-nums; line-height: var(--lh-row); }
 .vzc-dt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
-.vzc-dt b { font-size: var(--fs-3); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.vzc-dt small { font-size: var(--fs-2); color: var(--cz-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.vzc-de .vzc-link { padding: 4px 10px; border-radius: 999px; background: var(--cz-well); color: var(--cz-ink) !important; font-size: var(--fs-2); font-weight: 600; }
+.vzc-dt b { font-size: var(--fs-row); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-row); }
+.vzc-dt small { font-size: var(--fs-meta); color: var(--cz-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-meta); }
+.vzc-de .vzc-link { padding: 4px 10px; border-radius: 999px; background: var(--cz-well); color: var(--cz-ink) !important; font-size: var(--fs-label); font-weight: var(--fw-strong); line-height: var(--lh-label); }
 .vzc-nx { width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: var(--cz-blue); box-shadow: 0 0 0 3px var(--cz-bluebg); }
 /* the month */
 .vzc-mg { border: 1px solid var(--cz-hair); border-radius: 16px; overflow: hidden; }
 .vzc-mh, .vzc-mb { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
-.vzc-mh span { padding: 8px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); border-bottom: 1px solid var(--cz-hair); }
+.vzc-mh span { padding: 8px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); border-bottom: 1px solid var(--cz-hair); line-height: var(--lh-label); }
 .vzc-md { min-height: 92px; padding: 4px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--cz-hair); border-left: 1px solid var(--cz-hair); min-width: 0; }
 .vzc-md:nth-child(7n + 1) { border-left: 0; }
 .vzc-md:nth-child(-n + 7) { border-top: 0; }
 .vzc-md.out { background: color-mix(in oklab, var(--cz-ink) 3%, transparent); color: var(--cz-ink3); }
-.vzc-mn { display: flex !important; align-items: center; justify-content: space-between; padding: 2px 4px !important; border-radius: 6px; font-size: var(--fs-2); }
+.vzc-mn { display: flex !important; align-items: center; justify-content: space-between; padding: 2px 4px !important; border-radius: 6px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .vzc-md.now .vzc-mn b { color: var(--cz-blueink); }
-.vzc-mn i { font-style: normal; font-size: var(--fs-1); color: var(--cz-ink3); }
-.vzc-me { display: block !important; padding: 1px 6px !important; border-radius: 6px; background: var(--cz-bluebg) !important; font-size: var(--fs-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.vzc-mn i { font-style: normal; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.vzc-me { display: block !important; padding: 1px 6px !important; border-radius: 6px; background: var(--cz-bluebg) !important; font-size: var(--fs-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-meta); }
 .vzc-me.un { background: transparent !important; border: 1px dashed var(--cz-ink3) !important; }
 .vzc-me time { color: var(--cz-ink3); margin-right: 4px; }
-.vzc-more { font-size: var(--fs-2); font-weight: 700; color: var(--cz-blueink); padding: 0 6px !important; }
+.vzc-more { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-blueink); padding: 0 6px !important; line-height: var(--lh-label); }
 /* the notes tab (MtNotes) */
 .vzc-find { min-height: 42px; }
 .vzc-find .vzc-mut { white-space: nowrap; }
@@ -404,17 +404,17 @@
 .vzc-grp { display: flex; flex-direction: column; gap: 6px; }
 .vzc-card { display: flex; flex-direction: column; border-radius: 16px; border: 1px solid var(--cz-hair); overflow: hidden; }
 .vzc-card .vzc-nr { border-top: 1px solid var(--cz-hair) !important; border-radius: 0; }
-.vzc-ch { display: flex !important; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 14px !important; font-size: var(--fs-3); }
+.vzc-ch { display: flex !important; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 14px !important; font-size: var(--fs-body); line-height: var(--lh-body); }
 .vzc-ch[aria-expanded="true"] { background: var(--cz-well) !important; }
 .vzc-ch .vzc-mut { margin-left: auto; }
-.vzc-ch b { font-weight: 700; }
+.vzc-ch b { font-weight: var(--fw-strong); }
 .vzc-ch .vz-cc { margin-left: 4px; }
-.vzc-nr { display: flex !important; align-items: center; gap: 10px; width: 100%; padding: 10px 12px !important; border-radius: 12px; font-size: var(--fs-3); }
+.vzc-nr { display: flex !important; align-items: center; gap: 10px; width: 100%; padding: 10px 12px !important; border-radius: 12px; font-size: var(--fs-body); line-height: var(--lh-body); }
 .vzc-grp > .vzc-nr { border-bottom: 1px solid var(--cz-hair) !important; border-radius: 0; }
-.vzc-nr b { font-weight: 700; }
+.vzc-nr b { font-weight: var(--fw-strong); }
 .vzc-nr > span:not(.vz-cc):not(.vzc-mic) { flex: 1; min-width: 0; }
-.vzc-nr small { display: block; font-size: var(--fs-2); color: var(--cz-ink2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
-.vzc-nr mark { background: var(--cz-bluebg); color: var(--cz-blueink); border-radius: 4px; padding: 0 2px; font-weight: 700; }
+.vzc-nr small { display: block; font-size: var(--fs-meta); color: var(--cz-ink2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-meta); }
+.vzc-nr mark { background: var(--cz-bluebg); color: var(--cz-blueink); border-radius: 4px; padding: 0 2px; font-weight: var(--fw-strong); }
 .vzc-mic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--cz-well); color: var(--cz-ink2); flex: none; }
 .vzc-dash { border: 1px dashed var(--cz-ink3); background: transparent; margin-left: 4px; }
 /* a narrow pane: the week scrolls sideways */