create-pmos 0.511.0 → 0.513.0

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

@@ -3,48 +3,48 @@
  * .pill and .mi are drawn here as rp- parts inside the .vz report panel. */
 .vz.vz-rp0 { container-type: inline-size; }
 /* a narrow card (the 500 px Viewer) keeps Slides | Document | Live page as icons, so the bar stays one row */
-@container (max-width: 600px) { .vz-rp0 .vz-sg button > span.vz-dko { display: none !important; } .rp-lvh > .rp-grow { flex-basis: 100%; } .rp-kp { flex-basis: 90px; } .rp-kp b { font-size: var(--fs-5); } }
-.rp-n { height: 18px; padding: 0 7px; font-size: var(--fs-1); }
+@container (max-width: 600px) { .vz-rp0 .vz-sg button > span.vz-dko { display: none !important; } .rp-lvh > .rp-grow { flex-basis: 100%; } .rp-kp { flex-basis: 90px; } .rp-kp b { font-size: var(--fs-panel); line-height: var(--lh-panel); } }
+.rp-n { height: 18px; padding: 0 7px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .rp-mut { color: var(--cz-ink3); }
 .rp-grow { flex: 1; min-width: 0; }
-.vz .rp-lbl { font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink3); margin-top: 4px; }
-.rp-h2 { margin: 0; font-size: var(--fs-5); font-weight: 800; }
-.rp-btn { display: inline-flex !important; align-items: center; gap: 6px; height: 30px; padding: 0 11px !important; border-radius: 999px; font-size: var(--fs-2) !important; font-weight: 700;
-  border: 1px solid color-mix(in oklab, var(--cz-ink) 14%, transparent) !important; background: var(--cz-card) !important; color: var(--cz-ink) !important; white-space: nowrap; flex: none; }
+.vz .rp-lbl { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); margin-top: 4px; line-height: var(--lh-label); }
+.rp-h2 { margin: 0; font-size: var(--fs-panel); font-weight: var(--fw-strong); line-height: var(--lh-panel); }
+.rp-btn { display: inline-flex !important; align-items: center; gap: 6px; height: 30px; padding: 0 11px !important; border-radius: 999px; font-size: var(--fs-label) !important; font-weight: var(--fw-strong);
+  border: 1px solid color-mix(in oklab, var(--cz-ink) 14%, transparent) !important; background: var(--cz-card) !important; color: var(--cz-ink) !important; white-space: nowrap; flex: none; line-height: var(--lh-label); }
 .rp-btn.dark { background: var(--cz-ink) !important; color: var(--cz-card) !important; border-color: transparent !important; }
 .rp-btn.bad { background: var(--cz-red) !important; color: var(--cz-c-ffffff) !important; border-color: transparent !important; }
 .rp-btn.soft { background: var(--cz-well) !important; border-color: transparent !important; }
 .rp-btn svg { width: 16px; height: 16px; }
-.rp-linkbtn { color: var(--cz-blueink); font-weight: 700; font-size: var(--fs-2); text-decoration: none; }
+.rp-linkbtn { color: var(--cz-blueink); font-weight: var(--fw-strong); font-size: var(--fs-label); text-decoration: none; line-height: var(--lh-label); }
 .rp-box { background: var(--cz-well); border-radius: 16px; padding: 12px 14px; }
-.rp-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: var(--fs-1); font-weight: 700; background: var(--cz-card); color: var(--cz-ink2); }
+.rp-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: var(--fs-badge); font-weight: var(--fw-strong); background: var(--cz-card); color: var(--cz-ink2); line-height: var(--lh-badge); }
 
 /* ── the Brief tab (RpBrief) ── */
 .rp-brief { display: flex; flex-direction: column; gap: 10px; }
-.rp-kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: var(--fs-3); }
-.rp-kv dt { color: var(--cz-ink3); font-weight: 700; }
+.rp-kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); }
+.rp-kv dt { color: var(--cz-ink3); font-weight: var(--fw-strong); }
 .rp-kv dd { margin: 0; min-width: 0; }
 .rp-kv dd .vz-c { white-space: normal; height: auto; min-height: 32px; padding: 4px 10px !important; max-width: 100%; }
 .rp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
-.rp-chip { height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--cz-hair); display: inline-flex; align-items: center; font-size: var(--fs-2); font-weight: 600; color: var(--cz-ink2); }
-.rp-ns { display: inline-flex; padding: 1px 8px; border-radius: 999px; background: var(--cz-well); color: var(--cz-ink3); font-size: var(--fs-1); font-weight: 700; }
-.rp-card { display: flex; align-items: center; gap: 10px; background: var(--cz-card); border-radius: 16px; border: 1px solid var(--cz-hair); padding: 12px 14px; box-shadow: 0 1px 2px rgba(42, 46, 53, .04); font-size: var(--fs-3); }
+.rp-chip { height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--cz-hair); display: inline-flex; align-items: center; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
+.rp-ns { display: inline-flex; padding: 1px 8px; border-radius: 999px; background: var(--cz-well); color: var(--cz-ink3); font-size: var(--fs-badge); font-weight: var(--fw-strong); line-height: var(--lh-badge); }
+.rp-card { display: flex; align-items: center; gap: 10px; background: var(--cz-card); border-radius: 16px; border: 1px solid var(--cz-hair); padding: 12px 14px; box-shadow: 0 1px 2px rgba(42, 46, 53, .04); font-size: var(--fs-body); line-height: var(--lh-body); }
 .rp-card > p { flex: 1; min-width: 0; }
 .rp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cz-blue); flex: none; }
-.rp-ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-2); }
+.rp-ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .rp-looks { display: flex; gap: 10px; flex-wrap: wrap; }
-.rp-look { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; font-size: var(--fs-2); }
+.rp-look { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .rp-look > span:nth-child(2) { flex: 1; min-width: 0; }
 .rp-sw { width: 64px; height: 36px; border-radius: 6px; background: var(--cz-well2); flex: none; }
 
 /* ── the lock line, the ask card and the cycle menu (RpStates) ── */
 .rp-ask { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--cz-card); border: 1px solid var(--cz-hair); border-radius: 16px; padding: 12px 14px;
-  box-shadow: 0 10px 30px -16px rgba(42, 46, 53, .4); font-size: var(--fs-3); }
+  box-shadow: 0 10px 30px -16px rgba(42, 46, 53, .4); font-size: var(--fs-body); line-height: var(--lh-body); }
 .rp-ask > p { flex: 1 1 220px; }
-.rp-ask > p .rp-mut { font-size: var(--fs-2); }
+.rp-ask > p .rp-mut { font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .rp-ask > div { display: flex; gap: 6px; }
 .vz-pop-cyc { min-width: 280px; }
-.vz-pop-cyc .vz-lab { font-size: var(--fs-2); font-weight: 800; }
+.vz-pop-cyc .vz-lab { font-size: var(--fs-label); font-weight: var(--fw-strong); line-height: var(--lh-label); }
 .rp-arch { color: var(--cz-ink3); }
 .vz-pop-dl { right: 0; top: 46px; width: 260px; }
 .vz-pop-dl a.vz-mi { text-decoration: none; color: inherit; }
@@ -53,38 +53,38 @@
 .rp-paperwell { display: flex; flex-direction: column; gap: 14px; }
 .rp-pg { background: var(--cz-c-ffffff); color: var(--cz-c-2a2e35); border-radius: 14px; box-shadow: 0 0 0 1px var(--cz-hair), 0 10px 24px -18px rgba(42, 46, 53, .4);
   padding: 22px 26px; display: flex; flex-direction: column; gap: 10px; position: relative; }
-.rp-pg h1 { font-size: var(--fs-5); font-weight: 800; margin: 0; line-height: 1.25; }
-.rp-pg h2 { font-size: var(--fs-3); font-weight: 800; margin: 6px 0 0; }
-.rp-pg p, .rp-pg li { font-size: var(--fs-3); line-height: 1.55; }
+.rp-pg h1 { font-size: var(--fs-page); font-weight: var(--fw-strong); margin: 0; line-height: 1.25; }
+.rp-pg h2 { font-size: var(--fs-section); font-weight: var(--fw-strong); margin: 6px 0 0; line-height: var(--lh-section); }
+.rp-pg p, .rp-pg li { font-size: var(--fs-body); line-height: 1.55; }
 .rp-pg ul { margin: 0; padding-left: 20px; }
 .rp-pg .rp-mut { color: var(--cz-c-646a74); }
-.rp-eye { font-size: var(--fs-1) !important; font-weight: 800; color: var(--cz-c-2f5fb3); letter-spacing: .06em; }
+.rp-eye { font-size: var(--fs-badge) !important; font-weight: var(--fw-strong); color: var(--cz-c-2f5fb3); letter-spacing: .06em; line-height: var(--lh-badge); }
 .rp-minute { background: var(--cz-c-f4f3f0); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
-.rp-mh { font-weight: 800; font-size: var(--fs-3) !important; color: var(--cz-c-2a2e35); }
+.rp-mh { font-weight: var(--fw-strong); font-size: var(--fs-row) !important; color: var(--cz-c-2a2e35); line-height: var(--lh-row); }
 .rp-tbl { overflow-x: auto; }
-.rp-tbl table { border-collapse: collapse; font-size: var(--fs-2); width: 100%; }
+.rp-tbl table { border-collapse: collapse; font-size: var(--fs-meta); width: 100%; line-height: var(--lh-meta); }
 .rp-tbl td, .rp-tbl th { border-bottom: 1px solid rgba(42, 46, 53, .1); padding: 6px 4px; text-align: left; }
-.rp-tbl th { font-weight: 800; color: var(--cz-c-646a74); }
+.rp-tbl th { font-weight: var(--fw-strong); color: var(--cz-c-646a74); }
 .rp-tbl .al-r { text-align: right; } .rp-tbl .al-c { text-align: center; }
-.rp-fn { font-size: var(--fs-1); color: var(--cz-c-646a74); border-top: 1px solid rgba(42, 46, 53, .1); padding-top: 8px; margin-top: auto; }
-.rp-fn p, .rp-fn li { font-size: var(--fs-1); line-height: 1.5; }
+.rp-fn { font-size: var(--fs-meta); color: var(--cz-c-646a74); border-top: 1px solid rgba(42, 46, 53, .1); padding-top: 8px; margin-top: auto; line-height: var(--lh-meta); }
+.rp-fn p, .rp-fn li { font-size: var(--fs-meta); line-height: 1.5; }
 
 /* ── the live page (RpLive) ── */
 .rp-live { background: var(--cz-card); border-radius: 18px; border: 1px solid var(--cz-hair); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
 .rp-lvh { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
-.rp-lvh .cz-pick, .rp-lvh .rp-per { height: 30px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); }
+.rp-lvh .cz-pick, .rp-lvh .rp-per { height: 30px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
 .rp-lvh .cz-pick svg { width: 14px; height: 14px; }
 .rp-per { display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; background: var(--cz-well); }
 .rp-okdot { width: 7px; height: 7px; border-radius: 50%; background: var(--cz-dot-ok); display: inline-block; }
 .rp-prodpop { right: 0; top: 40px; min-width: 220px; }
 .rp-kps { display: flex; gap: 10px; flex-wrap: wrap; }
-.rp-kp { flex: 1 1 120px; border: 1px solid var(--cz-hair) !important; border-radius: 14px; padding: 10px 12px !important; display: flex !important; flex-direction: column; gap: 2px; font-size: var(--fs-2); }
+.rp-kp { flex: 1 1 120px; border: 1px solid var(--cz-hair) !important; border-radius: 14px; padding: 10px 12px !important; display: flex !important; flex-direction: column; gap: 2px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .rp-kp:disabled { opacity: 1 !important; cursor: default; }
-.rp-kp b { font-size: var(--fs-5); font-weight: 800; }
+.rp-kp b { font-size: var(--fs-display); font-weight: var(--fw-strong); line-height: var(--lh-display); }
 .rp-kp b.rp-risk { color: var(--cz-risk); }
 .rp-kp.on { border-color: color-mix(in oklab, var(--cz-blue) 55%, transparent) !important; box-shadow: 0 0 0 3px color-mix(in oklab, var(--cz-blue) 12%, transparent); }
 .rp-sub { color: var(--cz-ink3); }
-.rp-sub.ok { color: var(--cz-ok); font-weight: 700; } .rp-sub.risk { color: var(--cz-risk); font-weight: 700; }
+.rp-sub.ok { color: var(--cz-ok); font-weight: var(--fw-strong); } .rp-sub.risk { color: var(--cz-risk); font-weight: var(--fw-strong); }
 .rp-chh { display: flex; align-items: center; gap: 8px; }
 .rp-chart { position: relative; height: 170px; }
 .rp-chart svg { width: 100%; height: 170px; display: block; }
@@ -95,26 +95,26 @@
 .rp-pt::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: transparent; }
 .rp-pt:hover::after, .rp-pt.on::after { background: var(--cz-blue); box-shadow: 0 0 0 2px var(--cz-card); }
 .rp-pop { position: absolute; top: 18px; width: 210px; z-index: 3; background: var(--cz-card); border-radius: 14px; box-shadow: 0 16px 40px -20px rgba(42, 46, 53, .45), 0 0 0 1px var(--cz-hair);
-  padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-2); }
-.rp-empty { padding: 18px 0; text-align: center; font-size: var(--fs-3); }
-.rp-ex { display: grid !important; grid-template-columns: 22px minmax(0, 1fr) 80px 92px 112px; gap: 0 10px; align-items: center; padding: 8px 6px !important; border-top: 1px solid var(--cz-hair) !important; font-size: var(--fs-3); width: 100%; }
-.rp-exh { font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink3); border-top: 0 !important; }
+  padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
+.rp-empty { padding: 18px 0; text-align: center; font-size: var(--fs-body); line-height: var(--lh-body); }
+.rp-ex { display: grid !important; grid-template-columns: 22px minmax(0, 1fr) 80px 92px 112px; gap: 0 10px; align-items: center; padding: 8px 6px !important; border-top: 1px solid var(--cz-hair) !important; font-size: var(--fs-body); width: 100%; line-height: var(--lh-body); }
+.rp-exh { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); border-top: 0 !important; line-height: var(--lh-label); }
 .rp-ex b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.rp-mv { color: var(--cz-ok); font-weight: 700; }
-.rp-exd { padding: 4px 6px 8px 38px; font-size: var(--fs-2); }
+.rp-mv { color: var(--cz-ok); font-weight: var(--fw-strong); }
+.rp-exd { padding: 4px 6px 8px 38px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
 
 /* ── presenting (MtPresent's strip) ── */
 .vz-pres.rp-pres { background: var(--cz-ground, var(--cz-well)); color: var(--cz-ink); justify-content: stretch; align-items: stretch; padding: 18px 24px 20px; gap: 14px; }
-.rp-prh { display: flex; align-items: center; gap: 10px; font-size: var(--fs-3); }
+.rp-prh { display: flex; align-items: center; gap: 10px; font-size: var(--fs-body); line-height: var(--lh-body); }
 .rp-rec { width: 10px; height: 10px; border-radius: 50%; background: var(--cz-blue); flex: none; }
 .rp-prs { flex: 1; min-height: 0; display: grid; place-items: center; }
 .rp-pres .vz-slide { width: min(100%, calc((100vh - 170px) * 16 / 9)); }
-.rp-blank { display: grid; place-items: center; background: var(--cz-c-17191c) !important; color: var(--cz-c-9aa1ab); font-size: var(--fs-3); }
+.rp-blank { display: grid; place-items: center; background: var(--cz-c-17191c) !important; color: var(--cz-c-9aa1ab); font-size: var(--fs-body); line-height: var(--lh-body); }
 .rp-prn { color: var(--cz-ink) !important; flex-wrap: wrap; }
 .rp-pres .vz-snav .vz-ib { color: var(--cz-ink2); }
-.rp-tb { width: 36px; height: 30px; border-radius: 8px !important; background: var(--cz-card) !important; box-shadow: inset 0 0 0 1px var(--cz-hair); font-size: var(--fs-2); font-weight: 700; text-align: center !important; color: var(--cz-ink2); }
+.rp-tb { width: 36px; height: 30px; border-radius: 8px !important; background: var(--cz-card) !important; box-shadow: inset 0 0 0 1px var(--cz-hair); font-size: var(--fs-label); font-weight: var(--fw-strong); text-align: center !important; color: var(--cz-ink2); line-height: var(--lh-label); }
 .rp-tb.on { box-shadow: inset 0 0 0 2px var(--cz-blue); color: var(--cz-ink); }
-.rp-hint { font-size: var(--fs-2); }
+.rp-hint { font-size: var(--fs-meta); line-height: var(--lh-meta); }
 
 /* ── phone (XvAPhReport: the same shell, full screen) ── */
 @media (max-width: 760px) {
@@ -137,8 +137,8 @@
 .rp-thumb.on { border-color: color-mix(in oklab, var(--cz-blue) 50%, transparent) !important; }
 .rp-tf { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cz-well); }
 .rp-tf iframe { position: absolute; left: 0; top: 0; width: 400%; height: 400%; border: 0; transform: scale(.25); transform-origin: 0 0; pointer-events: none; background: var(--cz-c-ffffff); }
-.rp-std { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-2); color: var(--cz-ink3); }
-.rp-tl { padding: 6px 10px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-2); }
+.rp-std { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.rp-tl { padding: 6px 10px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-meta); line-height: var(--lh-meta); }
 
 /* ── Viewer shell A (XvAReport, XvAReportMore, XvAReportIssue, XvAPhReport): the summary card, the report, the strip; the popovers ⋯ opens ── */
 .vz.rp-a { position: relative; padding: 0; gap: 0; }
@@ -155,43 +155,43 @@
 .rp-th.rp-tt { background: var(--cz-c-2546b8); }
 .rp-th[aria-current="true"] { box-shadow: 0 0 0 2px var(--cz-blueink); }
 .rp-th > span { position: absolute; inset: 0; }
-.rp-a .rp-count { text-align: center; font-size: var(--fs-2); color: var(--cz-ink3); }
+.rp-a .rp-count { text-align: center; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .vz-conf.rp-cfm { background: var(--cz-bluebg); border-radius: 20px; padding: 14px 16px; gap: 8px; margin: 0; }
-.rp-cfm > b { font-size: var(--fs-3); font-weight: 800; }
-.rp-cfm li { align-items: flex-start; font-size: var(--fs-3); }
+.rp-cfm > b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
+.rp-cfm li { align-items: flex-start; font-size: var(--fs-body); line-height: var(--lh-body); }
 .rp-cfm li span:first-child { width: auto; height: auto; border-radius: 0; background: none !important; box-shadow: none !important; color: var(--cz-ok); margin-top: 1px; }
 .rp-cfm li[data-ok="false"] span:first-child { color: var(--cz-risk); }
-.rp-cfm .vz-note { font-size: var(--fs-2); }
-.rp-sec { height: 40px; padding: 0 14px !important; border-radius: 999px; background: var(--cz-card) !important; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); }
+.rp-cfm .vz-note { font-size: var(--fs-meta); line-height: var(--lh-meta); }
+.rp-sec { height: 40px; padding: 0 14px !important; border-radius: 999px; background: var(--cz-card) !important; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
 .rp-back { display: flex; align-items: center; gap: 4px; margin-left: -8px; }
-.rp-back b { font-size: var(--fs-3); font-weight: 800; }
+.rp-back b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
 
 /* ── the one report Viewer (canvas OvReport): the summary with its icon primary and meta chips, the bar, the deck, the folds.
  *    A cycle (premium-report-read.js) and a new report from the chat (premium-report-tab.js) draw the same parts (rp-parts.js rpSumHtml, rpBarHtml). ── */
 .rp-sum .czs-line { min-height: 32px; }
 .rp-sum .rp-ln { min-width: 0; }
-.rp-sum .czs-r { font-weight: 500; font-size: var(--fs-2); }
+.rp-sum .czs-r { font-weight: var(--fw-regular); font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .rp-pri { flex: none; width: 32px; height: 32px; margin: -2px -4px -2px 4px; border: 0; border-radius: 999px; display: grid; place-items: center; cursor: pointer; background: var(--cz-blue); color: var(--cz-onsolid); }
 .rp-sum .czs-line:not(:has(.czs-r)) .rp-pri { margin-left: auto; }
 .rp-pri:hover { filter: brightness(1.08); }
 .rp-pri:disabled { opacity: .5; cursor: default; }
 .rp-pri:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
-.rp-sum .czs-p { margin: 0; font-size: var(--fs-3); line-height: 1.55; color: var(--cz-ink); }
+.rp-sum .czs-p { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--cz-ink); }
 .rp-mcs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; }
-.rp-mc { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--fs-2) var(--cz-sans); color: var(--cz-ink2); background: none; border: 0; padding: 4px 6px; margin: 0 -6px; border-radius: 8px; }
+.rp-mc { display: inline-flex; align-items: center; gap: 6px; font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); color: var(--cz-ink2); background: none; border: 0; padding: 4px 6px; margin: 0 -6px; border-radius: 8px; }
 .rp-mc svg { color: var(--cz-ink3); }
 button.rp-mc { cursor: pointer; }
 button.rp-mc:hover, button.rp-mc[aria-expanded="true"] { background: var(--cz-well); color: var(--cz-ink); }
 .rp-bar { display: flex; align-items: center; gap: 4px; }
 .rp-seg { flex: 1; min-width: 0; display: flex; padding: 3px; border-radius: 999px; background: var(--cz-well); }
-.rp-seg button { flex: 1; min-width: 0; height: 30px; text-align: center; border: 0; border-radius: 999px; background: none; font: 600 var(--fs-2) var(--cz-sans); color: var(--cz-ink2); cursor: pointer; white-space: nowrap; padding: 0 8px; }
+.rp-seg button { flex: 1; min-width: 0; height: 30px; text-align: center; border: 0; border-radius: 999px; background: none; font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); color: var(--cz-ink2); cursor: pointer; white-space: nowrap; padding: 0 8px; }
 .rp-seg button[aria-pressed="true"] { background: var(--cz-card); color: var(--cz-ink); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
 .rp-tls { display: flex; flex: none; }
 .rp-tl.rp-tl { width: 36px; height: 36px; border: 0; padding: 0; border-top: 0; border-radius: 10px; display: grid; place-items: center; background: none; color: var(--cz-ink2); cursor: pointer; }
 .rp-tl:hover, .rp-tl[aria-expanded="true"] { background: var(--cz-well); color: var(--cz-ink); }
 .rp-nav { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: -4px; }
 .rp-nav > .vz-ib { width: 28px; height: 28px; border-radius: 999px; }
-.rp-a .rp-nav .rp-count { font-size: var(--fs-2); color: var(--cz-ink2); min-width: 84px; }
+.rp-a .rp-nav .rp-count { font-size: var(--fs-meta); color: var(--cz-ink2); min-width: 84px; line-height: var(--lh-meta); }
 .rp-a .rp-thumbs.rp-thumbs { overflow: visible; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: -4px; }
 .rp-a .rp-th.rp-th { border-radius: 8px; }
 .rp-a .czs-secs { margin: 0; }
@@ -200,10 +200,10 @@ button.rp-mc:hover, button.rp-mc[aria-expanded="true"] { background: var(--cz-we
 button.rp-cy { cursor: pointer; }
 button.rp-cy:hover { background: var(--cz-well); }
 .rp-cy > span { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
-.rp-cy b { font-size: var(--fs-3); font-weight: 700; }
-.rp-cy small { font-size: var(--fs-2); color: var(--cz-ink3); }
+.rp-cy b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
+.rp-cy small { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .rp-cy svg { color: var(--cz-ink3); }
-.rp-ol { margin: 0 0 4px; padding-left: 20px; font-size: var(--fs-3); line-height: 1.6; }
+.rp-ol { margin: 0 0 4px; padding-left: 20px; font-size: var(--fs-body); line-height: 1.6; }
 @media (max-width: 760px) {
   .rp-a .rp-thumbs.rp-thumbs, .vz-dk .vz-dkt { display: none; }
   .rp-seg button { padding: 0 4px; }
@@ -212,17 +212,17 @@ button.rp-cy:hover { background: var(--cz-well); }
 }
 .vz-dk .czs-secs { margin: 0; }
 .vz-dkp { border-radius: 16px; background: var(--cz-card); box-shadow: inset 0 0 0 1px var(--cz-hair); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
-.vz-dkp h2 { margin: 0; font-size: var(--fs-5); font-weight: 800; }
+.vz-dkp h2 { margin: 0; font-size: var(--fs-panel); font-weight: var(--fw-strong); line-height: var(--lh-panel); }
 /* the two cuts of a ready-made report (batch 17 item 1, PbG5): the switch, then which sections the sponsors read */
 .vz-cut { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
 .vz-cuts { flex: none; align-self: flex-start; }
 .vz-cuts button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; }
 .vz-cuts svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
 .vz-cutl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
-.vz-cutl li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--cz-hair); font-size: var(--fs-3); }
+.vz-cutl li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--cz-hair); font-size: var(--fs-body); line-height: var(--lh-body); }
 .vz-cutl li:first-child { border-top: 0; }
 .vz-cutl li span:last-child { display: flex; flex-direction: column; gap: 1px; }
-.vz-cutl small { font-size: var(--fs-2); color: var(--cz-ink3); }
+.vz-cutl small { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .vz-cb { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--cz-ink3); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
 .vz-cutl li.on .vz-cb { background: var(--cz-blue); border-color: var(--cz-blue); color: var(--cz-onsolid); }
 .vz-cb svg { fill: none; stroke: currentColor; stroke-width: 3; }
@@ -235,48 +235,48 @@ button.rp-cy:hover { background: var(--cz-well); }
 /* ── the report building flow (batch 22 item 14, canvas RfH1–RfH7; public/pm/report-flow.js) ── */
 .rf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
 .rf-qs { display: flex; flex-direction: column; gap: 14px; }
-.rf-st { display: flex; align-items: center; gap: 7px; margin: 0; font-size: var(--fs-2); font-weight: 700; color: var(--cz-blueink); }
+.rf-st { display: flex; align-items: center; gap: 7px; margin: 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-blueink); line-height: var(--lh-label); }
 .rf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cz-blue); flex: none; }
 .rf-q { border: 0; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--cz-hair); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
-.rf-q legend { float: left; width: 100%; padding: 0 0 6px; font-weight: 800; color: var(--cz-ink); display: flex; align-items: center; gap: 8px; }
+.rf-q legend { float: left; width: 100%; padding: 0 0 6px; font-weight: var(--fw-strong); color: var(--cz-ink); display: flex; align-items: center; gap: 8px; }
 .rf-opt { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; margin: 0 0 6px; border-radius: 12px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: inherit; cursor: pointer; min-height: 44px; }
 .rf-opt[aria-checked="true"] { border-color: color-mix(in oklab, var(--cz-blue) 55%, transparent); background: var(--cz-bluebg); }
 .rf-opt .vz-ring { margin-top: 3px; }
 .rf-ot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
-.rf-ot > span:last-child { flex-basis: 100%; color: var(--cz-ink2); font-size: var(--fs-2); }
-.rf-tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 99px; background: var(--cz-well); color: var(--cz-ink2); font-size: var(--fs-1); font-weight: 700; }
+.rf-ot > span:last-child { flex-basis: 100%; color: var(--cz-ink2); font-size: var(--fs-meta); line-height: var(--lh-meta); }
+.rf-tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 99px; background: var(--cz-well); color: var(--cz-ink2); font-size: var(--fs-badge); font-weight: var(--fw-strong); line-height: var(--lh-badge); }
 .rf-tag[data-k="ch"] { background: var(--cz-bluebg); color: var(--cz-blueink); }
 .rf-in input, .rf-sel select { width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: inherit; }
 .rf-row { display: flex; flex-wrap: wrap; gap: 8px; }
 .rf-row .rf-sel { flex: 1 1 120px; }
-.rf-seg { min-height: 40px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: inherit; font-weight: 700; cursor: pointer; }
+.rf-seg { min-height: 40px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: inherit; font-weight: var(--fw-strong); cursor: pointer; }
 .rf-seg[aria-checked="true"] { background: var(--cz-bluebg); border-color: transparent; color: var(--cz-blueink); }
-.rf-fix { margin: 0; display: flex; flex-direction: column; gap: 2px; } .rf-fix span { color: var(--cz-ink2); font-size: var(--fs-2); }
+.rf-fix { margin: 0; display: flex; flex-direction: column; gap: 2px; } .rf-fix span { color: var(--cz-ink2); font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .rf-src { margin: 0; padding-left: 18px; color: var(--cz-ink); }
-.rf-chg { margin: 0; font-size: var(--fs-2); color: var(--cz-ink2); }
+.rf-chg { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 .rf-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--cz-hair); }
 .rf-foot .vz-note { margin-right: auto; }
 .rf-ib { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
 .rf-ib.pri { background: var(--cz-blue); border-color: transparent; color: var(--cz-onsolid); }
 .rf-ib[disabled] { opacity: .45; cursor: default; }
-.rf-hist h3 { margin: 4px 0 6px; font-size: var(--fs-3); }
+.rf-hist h3 { margin: 4px 0 6px; font-size: var(--fs-body); line-height: var(--lh-body); }
 .rf-hist ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
 .rf-hv { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--cz-hair); }
 .rf-hv > b { min-width: 28px; color: var(--cz-ink3); }
 .rf-hv[aria-current="true"] > b, .rf-hv[data-k="new"] > b { color: var(--cz-blueink); }
 .rf-hv > span { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-.rf-hv em { font-style: normal; color: var(--cz-ink3); font-size: var(--fs-2); }
+.rf-hv em { font-style: normal; color: var(--cz-ink3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .rf-wait { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--cz-bluebg); }
 .rf-wait[data-k="bad"] { background: var(--cz-well); }
-.rf-wait p { flex: 1; margin: 0; display: flex; flex-direction: column; gap: 2px; } .rf-wait p span { color: var(--cz-ink2); font-size: var(--fs-2); }
+.rf-wait p { flex: 1; margin: 0; display: flex; flex-direction: column; gap: 2px; } .rf-wait p span { color: var(--cz-ink2); font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .rf-rv { display: flex; flex-direction: column; margin: 12px 0; }
 .rf-rvh { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--cz-bluebg); }
-.rf-rvh > b { flex: 1; font-size: var(--fs-2); }
+.rf-rvh > b { flex: 1; font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .rf-fx { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--cz-hair); }
 .rf-fx + .rf-fx { margin-top: 0; } .rf-rvh + .rf-fx { border-top: 0; }
 .rf-star { color: var(--cz-blueink); margin-top: 2px; }
-.rf-fxt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rf-fxt span { color: var(--cz-ink2); font-size: var(--fs-2); }
-.rf-pass { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 10px 4px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-2); }
+.rf-fxt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rf-fxt span { color: var(--cz-ink2); font-size: var(--fs-meta); line-height: var(--lh-meta); }
+.rf-pass { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 10px 4px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .rf-pass span { color: var(--cz-ink3); }
 .rf-opt[aria-checked="true"] .vz-ring { border: 5px solid var(--cz-blue); }
 
@@ -289,24 +289,24 @@ button.rp-cy:hover { background: var(--cz-well); }
 
 /* the agreed report Viewer (batch 23 item 3; canvas RfH1, RfH2): cycle chips, one status line, the tools, the report, the review, the primary */
 .rp-ccs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
-.rp-cc { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--cz-well); font: 700 var(--fs-2) var(--cz-sans); color: var(--cz-ink2); }
+.rp-cc { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--cz-well); font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); color: var(--cz-ink2); }
 button.rp-cc { cursor: pointer; }
 .rp-cc.on { background: var(--cz-bluebg); color: var(--cz-blueink); }
 .rp-cc i, .rp-stl i { width: 8px; height: 8px; border-radius: 50%; background: var(--cz-blue); flex: none; }
-.rp-stl { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-2); color: var(--cz-ink2); }
-.rp-stl[data-tone="you"] { color: var(--cz-blueink); font-weight: 700; }
+.rp-stl { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
+.rp-stl[data-tone="you"] { color: var(--cz-blueink); font-weight: var(--fw-strong); }
 .rp-rfh .rp-bar { justify-content: flex-end; }
 .rp-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 4px; }
 .rp-foot .rp-pri { width: 40px; height: 40px; margin: 0; }
 
 /* a template's sections and look (canvas TplA, brief 3; public/pm/report-flow.js): chips in order, a small title slide and one line */
 .rf-cps { display: flex; flex-wrap: wrap; gap: 6px; }
-.rf-cp { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink2); font-size: var(--fs-2); }
+.rf-cp { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink2); font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .rf-cp[data-k="new"] { border-color: color-mix(in oklab, var(--cz-blue) 55%, transparent); background: var(--cz-bluebg); color: var(--cz-blueink); }
 .rf-cp[data-k="gone"] { border-style: dashed; color: var(--cz-ink3); }
 .rf-lk { display: flex; align-items: center; gap: 12px; }
-.rf-mini { width: 96px; height: 54px; flex: none; border-radius: 7px; display: flex; align-items: flex-end; padding: 6px 7px; box-sizing: border-box; background: linear-gradient(135deg, var(--cz-c-2546b8), var(--cz-c-1b3a9e)); color: var(--cz-c-ffffff); font-size: var(--fs-1); line-height: 1.2; overflow: hidden; }
+.rf-mini { width: 96px; height: 54px; flex: none; border-radius: 7px; display: flex; align-items: flex-end; padding: 6px 7px; box-sizing: border-box; background: linear-gradient(135deg, var(--cz-c-2546b8), var(--cz-c-1b3a9e)); color: var(--cz-c-ffffff); font-size: var(--fs-meta); line-height: 1.2; overflow: hidden; }
 .rf-mini[data-k="own"] { background: var(--cz-well2); color: var(--cz-ink); border: 1px solid var(--cz-hair); }
-.rf-lk .rf-fix small { color: var(--cz-ink3); font-size: var(--fs-2); }
+.rf-lk .rf-fix small { color: var(--cz-ink3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .rf-tplx { padding: 10px 12px; border: 1px solid var(--cz-hair); border-radius: 14px; background: var(--cz-bluebg); }
 .rf-hv em.rf-rest { color: var(--cz-ink2); }

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

@@ -11,10 +11,10 @@
 .cz-vw-tile svg { width: 17px; height: 17px; }
 .cz-vw-t { display: block; }
 .cz-vw-kind { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* say it once: the kind is for a screen reader */
-.cz-vw-title { font-size: var(--fs-4); font-weight: 800; }
-.cz-vw-sub { margin: 1px 0 0; font-size: var(--fs-2); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* what the item is under its parent's name (MsBCharter "Charter") */
+.cz-vw-title { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
+.cz-vw-sub { margin: 1px 0 0; font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-meta); }   /* what the item is under its parent's name (MsBCharter "Charter") */
 /* the item's one dark primary in the header (the charter's Save, canvas MsBCharter): a word on a desk, a round check on a phone (MsBPhone) */
-.cz-vw-pri { height: 36px; padding: 0 14px; margin: 0 4px; border-radius: 999px; border: 0; background: var(--cz-ink); color: var(--cz-card); font: inherit; font-size: var(--fs-3); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; flex: none; cursor: pointer; }
+.cz-vw-pri { height: 36px; padding: 0 14px; margin: 0 4px; border-radius: 999px; border: 0; background: var(--cz-ink); color: var(--cz-card); font: inherit; font-size: var(--fs-row); font-weight: var(--fw-strong); display: inline-flex; align-items: center; gap: 6px; flex: none; cursor: pointer; line-height: var(--lh-row); }
 .cz-vw-pri.i { width: 40px; height: 40px; padding: 0; justify-content: center; }
 .cz-vw-pri:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
 .cz-vw-pri.blue { background: var(--cz-solid); color: var(--cz-onsolid); }   /* a form's round ✓ (batch 18 item 2-C, canvas OvA8People) */
@@ -27,13 +27,13 @@
 .cz-vw-rn:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 1px; }
 .cz-vw-hd.cz-vw-renon { flex-wrap: wrap; }
 .cz-vw-ren { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; height: 40px; margin-right: 6px; border-radius: 12px; background: var(--cz-card); box-shadow: 0 0 0 1.5px var(--cz-blue), 0 0 0 5px color-mix(in srgb, var(--cz-blue) 14%, transparent); padding: 0 4px 0 10px; }
-.cz-vw-ren input { flex: 1; min-width: 0; font: inherit; font-size: var(--fs-4); font-weight: 800; color: var(--cz-ink); border: 0; background: transparent; outline: 0; padding: 0; }
+.cz-vw-ren input { flex: 1; min-width: 0; font: inherit; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); border: 0; background: transparent; outline: 0; padding: 0; line-height: var(--lh-row); }
 .cz-vw-sv { width: 32px; height: 32px; border-radius: 999px; border: 0; background: var(--cz-solid); color: var(--cz-onsolid); display: inline-flex; align-items: center; justify-content: center; flex: none; cursor: pointer; }
 .cz-vw-sv:disabled { opacity: .6; cursor: default; }
-.cz-vw-jt { flex-basis: 100%; display: flex; align-items: center; gap: 10px; margin: 8px 16px 0 46px; font-size: var(--fs-2); color: var(--cz-ink2); font-weight: 600; cursor: pointer; }
+.cz-vw-jt { flex-basis: 100%; display: flex; align-items: center; gap: 10px; margin: 8px 16px 0 46px; font-size: var(--fs-label); color: var(--cz-ink2); font-weight: var(--fw-strong); cursor: pointer; line-height: var(--lh-label); }
 .cz-vw-jt input { width: 18px; height: 18px; margin: 0; accent-color: var(--cz-solid); flex: none; }
-.cz-vw-jt .k { color: var(--cz-ink3); font-weight: 700; }
-.cz-vw-rnerr { flex-basis: 100%; margin: 6px 16px 0 46px; font-size: var(--fs-2); color: var(--cz-red); }
+.cz-vw-jt .k { color: var(--cz-ink3); font-weight: var(--fw-strong); }
+.cz-vw-rnerr { flex-basis: 100%; margin: 6px 16px 0 46px; font-size: var(--fs-meta); color: var(--cz-red); line-height: var(--lh-meta); }
 .cz-vw-ib svg { width: 18px; height: 18px; }
 .cz-vw-ib[aria-pressed="true"] { background: var(--cz-bluebg); color: var(--cz-blueink); }
 .cz-vw-hd [data-cz-vw="back"] { margin-left: -6px; }
@@ -49,28 +49,28 @@ body.cz-vw-drag, body.cz-vw-drag * { cursor: col-resize !important; user-select:
 
 /* the ⋯ menu: change it, look back, stop or remove (red, last) */
 .cz-vw-menu { position: absolute; right: 56px; top: 54px; width: 250px; background: var(--cz-card); border-radius: 16px; box-shadow: var(--cz-sheet), 0 0 0 1px var(--cz-hair); padding: 6px; z-index: 6; display: flex; flex-direction: column; }
-.cz-vw-menu button { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 10px; font: 600 var(--fs-3) var(--cz-sans); color: var(--cz-ink); background: none; border: 0; text-align: left; cursor: pointer; }
+.cz-vw-menu button { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 10px; font: var(--fw-strong) var(--fs-row)/var(--lh-row) var(--cz-sans); color: var(--cz-ink); background: none; border: 0; text-align: left; cursor: pointer; }
 .cz-vw-menu button:hover:not(:disabled), .cz-vw-menu button:focus-visible { background: var(--cz-well); outline: none; }
 .cz-vw-menu button:disabled { color: var(--cz-ink3); cursor: default; }
 .cz-vw-menu button svg { color: var(--cz-ink2); flex: none; }
 .cz-vw-menu hr { border: 0; border-top: 1px solid var(--cz-hair); margin: 4px 6px; }
-.cz-vw-menu .k { margin-left: auto; color: var(--cz-ink3); font-size: var(--fs-2); }
+.cz-vw-menu .k { margin-left: auto; color: var(--cz-ink3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .cz-vw-menu .bad { color: var(--cz-red); }
 /* the trail list (batch 14 item 7, canvas NvADesk, NvAPhoneTrail): hover ← → on a desk, hold it on a phone; newest first, then the page */
 .cz-vw-hd [data-cz-vw="fwd"] { margin-left: -6px; }
 .cz-vw-trail { position: absolute; width: 280px; max-height: 60vh; overflow: auto; background: var(--cz-card); border-radius: 16px; box-shadow: var(--cz-sheet), 0 0 0 1px var(--cz-hair); padding: 6px; z-index: 7; display: flex; flex-direction: column; gap: 2px; }
-.cz-vw-trail button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 12px; font: 600 var(--fs-3) var(--cz-sans); color: var(--cz-ink); background: none; border: 0; text-align: left; cursor: pointer; }
+.cz-vw-trail button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 12px; font: var(--fw-strong) var(--fs-row)/var(--lh-row) var(--cz-sans); color: var(--cz-ink); background: none; border: 0; text-align: left; cursor: pointer; }
 .cz-vw-trail button > span:not(.t) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .cz-vw-trail button:hover, .cz-vw-trail button:focus-visible { background: var(--cz-well); outline: none; }
 .cz-vw-trail .t { width: 28px; height: 28px; border-radius: 8px; background: var(--cz-bluebg); color: var(--cz-blueink); display: inline-grid; place-items: center; flex: none; }
-.cz-vw-trail .here { background: var(--cz-well); font-weight: 800; cursor: default; }
+.cz-vw-trail .here { background: var(--cz-well); font-weight: var(--fw-strong); cursor: default; }
 .cz-vw-trail .ahead { color: var(--cz-ink2); }
 .cz-vw-trail .ahead .t, .cz-vw-trail .pg .t { background: var(--cz-well); color: var(--cz-ink2); }
 .cz-vw-trail .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--cz-blue); flex: none; }
 
 /* the summary card: one state line, the words, one quiet meta line, one primary */
 .czs-sum { background: color-mix(in srgb, var(--cz-well) 60%, var(--cz-card)); border-radius: 20px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
-.czs-line { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); }
+.czs-line { display: flex; align-items: center; gap: 8px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
 .czs-line.you { color: var(--cz-blueink); }
 .czs-line.warn { color: var(--cz-risk); }
 .czs-line.live { color: var(--cz-red); }
@@ -78,13 +78,13 @@ body.cz-vw-drag, body.cz-vw-drag * { cursor: col-resize !important; user-select:
 .czs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cz-blue); flex: none; }
 .czs-line.warn .czs-dot { background: var(--cz-dot-risk); }
 .czs-line.live .czs-dot { background: var(--cz-dot-red); }
-.czs-r { margin-left: auto; font-weight: 600; color: var(--cz-ink3); white-space: nowrap; }
-.czs-p { margin: 0; font-size: var(--fs-3); line-height: 1.5; color: var(--cz-ink); }
-.czs-meta { margin: 0; font-size: var(--fs-2); color: var(--cz-ink3); }
+.czs-r { margin-left: auto; font-weight: var(--fw-strong); color: var(--cz-ink3); white-space: nowrap; }
+.czs-p { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--cz-ink); }
+.czs-meta { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .czs-acts { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
-.czs-pri { height: 40px; padding: 0 16px; border-radius: 999px; background: var(--cz-solid); color: var(--cz-onsolid); font: 700 var(--fs-3) var(--cz-sans); display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; text-decoration: none; }
+.czs-pri { height: 40px; padding: 0 16px; border-radius: 999px; background: var(--cz-solid); color: var(--cz-onsolid); font: var(--fw-strong) var(--fs-row)/var(--lh-row) var(--cz-sans); display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; text-decoration: none; }
 .czs-pri:disabled { opacity: .5; cursor: default; }
-.czs-sec2 { height: 40px; padding: 0 14px; border-radius: 999px; background: var(--cz-card); border: 0; font: 700 var(--fs-2) var(--cz-sans); color: var(--cz-ink2); cursor: pointer; }
+.czs-sec2 { height: 40px; padding: 0 14px; border-radius: 999px; background: var(--cz-card); border: 0; font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); color: var(--cz-ink2); cursor: pointer; }
 .czs-sec2:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
 .czs-ib { width: 40px; height: 40px; border-radius: 999px; border: 0; background: var(--cz-card); color: var(--cz-ink2); display: inline-grid; place-items: center; cursor: pointer; }
 .czs-ib:hover:not(:disabled) { color: var(--cz-blueink); }
@@ -103,19 +103,19 @@ body.cz-vw-drag, body.cz-vw-drag * { cursor: col-resize !important; user-select:
 .czs-tail { position: absolute; right: 6px; top: 6px; display: inline-flex; }
 .czs-row:hover:not(:disabled) { background: color-mix(in srgb, var(--cz-well) 40%, var(--cz-card)); }
 .czs-row:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: -2px; border-radius: 12px; }
-.czs-row b { flex: 1; min-width: 0; font-size: var(--fs-3); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.czs-n { font-size: var(--fs-2); color: var(--cz-ink3); font-weight: 600; white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
+.czs-row b { flex: 1; min-width: 0; font-size: var(--fs-row); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-row); }
+.czs-n { font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-label); }
 .czs-cv { color: var(--cz-ink3); display: inline-flex; flex: none; }
-.czs-body { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-3); line-height: 1.45; }
+.czs-body { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-body); line-height: 1.45; }
 .czs-body[hidden] { display: none; }
 .czs-body > p { margin: 0; }
 /* one item in a row's body (XvOptADoc .it): a soft well, the words, a quiet line under them */
 .czs-it { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--cz-well) 40%, var(--cz-card)); }
 .czs-it .w { flex: 1; min-width: 0; }
-.czs-it .w span { display: block; font-size: var(--fs-2); color: var(--cz-ink3); }
+.czs-it .w span { display: block; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 /* a row's leading tile (XvATask): a document glyph on the well, or the Jira J on blue */
 .ut-tki { width: 28px; height: 28px; border-radius: 9px; background: var(--cz-well); color: var(--cz-ink2); display: inline-grid; place-items: center; flex: none; }
-.ut-tki.j { background: var(--cz-solid); color: var(--cz-onsolid); font-size: var(--fs-1); font-weight: 800; }
+.ut-tki.j { background: var(--cz-solid); color: var(--cz-onsolid); font-size: var(--fs-badge); font-weight: var(--fw-strong); line-height: var(--lh-badge); }
 .czs-it:has(.ut-tki) { align-items: center; }
 .ut-tki.dash { background: none; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cz-ink3) 45%, var(--cz-card)); }
 .czs-amb { width: 8px; height: 8px; border-radius: 50%; background: var(--cz-dot-risk); flex: none; align-self: center; margin-left: 8px; }
@@ -125,7 +125,7 @@ body.cz-vw-drag, body.cz-vw-drag * { cursor: col-resize !important; user-select:
 button.czs-it { width: 100%; border: 0; text-align: left; font: inherit; color: var(--cz-ink); cursor: pointer; }
 button.czs-it:hover { background: var(--cz-well); }
 button.czs-it:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 1px; }
-.czs-it .w .flag { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: var(--cz-riskbg); color: var(--cz-risk); font-size: var(--fs-2); font-weight: 700; }
+.czs-it .w .flag { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: var(--cz-riskbg); color: var(--cz-risk); font-size: var(--fs-label); font-weight: var(--fw-strong); line-height: var(--lh-label); }
 
 /* dragged wide (XvOptBRead): the summary and the contents in a 300px column, the text beside it at a readable line */
 .cz-vw-w2 .cz-vw-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-auto-rows: min-content; column-gap: 20px; align-content: start; }
@@ -149,12 +149,12 @@ body.cz-vw-rail [data-cz-vw-list] > :not(.cz-vw-railbar), body.cz-vw-rail #hmLis
   .cz-vw-hd [data-cz-vw="back"] { margin-left: 0; }
   .cz-vw-rn { min-height: 44px; }
   .cz-vw-ren { height: 44px; }
-  .cz-vw-ren input { font-size: var(--fs-4); }
+  .cz-vw-ren input { font-size: var(--fs-field); }
   .cz-vw-sv { width: 36px; height: 36px; }
   .cz-vw-body { padding: 4px 16px 16px; }
   .cz-vw-menu { right: 8px; }
   .cz-vw-trail { position: fixed; left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-height: 70vh; border-radius: 24px 24px 0 0; padding: 10px 12px 28px; }
-  .cz-vw-trail button { min-height: 52px; font-size: var(--fs-4); }
+  .cz-vw-trail button { min-height: 52px; font-size: var(--fs-body); line-height: var(--lh-body); }
   .cz-vw-menu button, .czs-ib { min-height: 44px; }
   .czs-pri, .czs-sec2 { height: 44px; min-height: 44px; }
   .czs-ib { width: 44px; }
@@ -171,7 +171,7 @@ body.cz-vw-rail [data-cz-vw-list] > :not(.cz-vw-railbar), body.cz-vw-rail #hmLis
 /* the blue ✦ after an initiative's title: what Claude proposes (batch 12 items 2, 3 and 4, canvas PiA0/TpA1); hidden at zero */
 .cz-vw-title.has-chip { display: flex; align-items: center; gap: 6px; min-width: 0; }
 .cz-vw-title.has-chip > .cz-vw-tt, .cz-vw-title.has-chip > .cz-vw-rn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.cz-vw-chip { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px 0 6px; border-radius: 999px; border: 0; background: var(--cz-bluebg); color: var(--cz-blueink); font: inherit; font-size: var(--fs-2); font-weight: 800; flex: none; cursor: pointer; }
+.cz-vw-chip { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px 0 6px; border-radius: 999px; border: 0; background: var(--cz-bluebg); color: var(--cz-blueink); font: inherit; font-size: var(--fs-label); font-weight: var(--fw-strong); flex: none; cursor: pointer; line-height: var(--lh-label); }
 .cz-vw-chip:not(:has(b)) { padding: 0 6px; }
 .cz-vw-chip:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 1px; }
 @media (max-width: 760px) { .cz-vw-chip { min-height: 32px; } }
@@ -180,22 +180,22 @@ body.cz-vw-rail [data-cz-vw-list] > :not(.cz-vw-railbar), body.cz-vw-rail #hmLis
  * one-choice chips, a quiet note and a ✦ line; the same on Home and the Board (cozy-home.css is not loaded on the Board) */
 .czf { display: flex; flex-direction: column; gap: 14px; margin: 0; }
 .czf-l[hidden] { display: none; }
-.czf-l { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); }
-.czf-l input, .czf-l select { font: inherit; font-size: var(--fs-3); font-weight: 500; color: var(--cz-ink); height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--cz-hair); background: var(--cz-card); box-sizing: border-box; width: 100%; }
+.czf-l { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
+.czf-l input, .czf-l select { font: inherit; font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--cz-ink); height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--cz-hair); background: var(--cz-card); box-sizing: border-box; width: 100%; line-height: var(--lh-body); }
 .czf-l input::placeholder { color: var(--cz-ink3); }
 .czf-l input:disabled { background: var(--cz-well); color: var(--cz-ink3); }
 .czf-l input:focus-visible, .czf-l select:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 1px; }
 .czf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
-.czf-chips .cz-chip { height: 36px; padding: 0 14px; font-weight: 600; }
-.czf-chips .cz-chip[aria-pressed="true"] { background: var(--cz-bluebg); border-color: transparent; color: var(--cz-blueink); font-weight: 700; }
+.czf-chips .cz-chip { height: 36px; padding: 0 14px; font-weight: var(--fw-strong); }
+.czf-chips .cz-chip[aria-pressed="true"] { background: var(--cz-bluebg); border-color: transparent; color: var(--cz-blueink); font-weight: var(--fw-strong); }
 .czf-chips .cz-chip svg { width: 13px; height: 13px; }
-.czf-note { margin: 0; font-size: var(--fs-2); line-height: 1.45; color: var(--cz-ink3); }
-.czf-spark { margin: 0; display: flex; gap: 8px; font-size: var(--fs-3); line-height: 1.5; color: var(--cz-ink2); }
+.czf-note { margin: 0; font-size: var(--fs-meta); line-height: 1.45; color: var(--cz-ink3); }
+.czf-spark { margin: 0; display: flex; gap: 8px; font-size: var(--fs-body); line-height: 1.5; color: var(--cz-ink2); }
 .czf-spark svg { flex: none; width: 14px; height: 14px; margin-top: 4px; color: var(--cz-blue); }
-.czf-err { margin: 0; font-size: var(--fs-2); color: var(--cz-red); }
+.czf-err { margin: 0; font-size: var(--fs-meta); color: var(--cz-red); line-height: var(--lh-meta); }
 .czf-err:empty { display: none; }
-.czs-quiet { margin: 0; font-size: var(--fs-2); color: var(--cz-ink3); }
-@media (max-width: 760px), (pointer: coarse) { .czf-chips .cz-chip { height: 44px; } .czf-l input, .czf-l select { font-size: var(--fs-4); } }
+.czs-quiet { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+@media (max-width: 760px), (pointer: coarse) { .czf-chips .cz-chip { height: 44px; } .czf-l input, .czf-l select { font-size: var(--fs-field); } }
 
 /* the Viewer's title wraps to two lines, then clamps (batch 18 item 2, the one pattern: OvA1Start). A title with Claude's ✦ chip keeps one. */
 .cz-vw-title:not(.has-chip) { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; overflow-wrap: anywhere; }
@@ -203,25 +203,25 @@ body.cz-vw-rail [data-cz-vw-list] > :not(.cz-vw-railbar), body.cz-vw-rail #hmLis
 
 /* an ask's summary (batch 18 item 2-A, OvA1Start, OvA3Waited): ✦ Claude's offer, the progress of what it started, the amber "If it waits" line */
 .nv { display: flex; flex-direction: column; gap: 12px; }
-.nv-offer, .nv-cost { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-3); line-height: 1.5; color: var(--cz-ink); }
+.nv-offer, .nv-cost { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-body); line-height: 1.5; color: var(--cz-ink); }
 .nv-offer svg { flex: none; margin-top: 3px; color: var(--cz-blueink); }
-.nv-cost { font-size: var(--fs-2); font-weight: 700; color: var(--cz-risk); }
+.nv-cost { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-risk); line-height: var(--lh-label); }
 .nv-cost svg { flex: none; margin-top: 2px; }
 .nv-bar { height: 6px; border-radius: 99px; background: var(--cz-hair); overflow: hidden; }
 .nv-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--cz-blue); }
 .czs-pri svg { flex: none; }
 /* the quiet owner line under the card: whose it is, the kind of work in words, the goal it moves */
-.nv-own { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-2); font-weight: 600; color: var(--cz-ink3); line-height: 1.4; }
-.nv-av { width: 22px; height: 22px; border-radius: 50%; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-1); font-weight: 800; display: inline-grid; place-items: center; flex: none; }
+.nv-own { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: 1.4; }
+.nv-av { width: 22px; height: 22px; border-radius: 50%; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-badge); font-weight: var(--fw-strong); display: inline-grid; place-items: center; flex: none; line-height: var(--lh-badge); }
 /* a decision: the choices, Claude's pick marked, the why it wrote, and Record with its words */
 .nv-dec { display: flex; flex-direction: column; gap: 8px; }
-.nv-pick { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--cz-card); color: var(--cz-blueink); font-size: var(--fs-1); font-weight: 800; }
-.nv .ut-field label em { font-style: normal; font-weight: 600; color: var(--cz-ink3); }
+.nv-pick { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--cz-card); color: var(--cz-blueink); font-size: var(--fs-badge); font-weight: var(--fw-strong); line-height: var(--lh-badge); }
+.nv .ut-field label em { font-style: normal; font-weight: var(--fw-strong); color: var(--cz-ink3); }
 .nv-facts { margin: 0; display: grid; gap: 6px; }
 .nv-facts div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; }
-.nv-facts dt { color: var(--cz-ink3); font-size: var(--fs-2); }
+.nv-facts dt { color: var(--cz-ink3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .nv-facts dd { margin: 0; overflow-wrap: anywhere; }
-.nv-rev .czs-cv { align-self: center; font-size: var(--fs-4); }
+.nv-rev .czs-cv { align-self: center; font-size: var(--fs-body); line-height: var(--lh-body); }
 /* a tile whose card is open has a ring; the tile of the group that holds what is open has a blue bar on its left (batch 18 item 14) */
 .cz-vw-railtile { position: relative; }
 .cz-vw-railtile.on { box-shadow: 0 0 0 2px var(--cz-blue); }