create-pmos 0.511.0 → 0.513.0

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

@@ -5,8 +5,8 @@
 
 /* ── the list head ── */
 body.cz-home .hm-hd { padding: 2px 6px 6px 10px; gap: 6px; }
-body.cz-home .hm-hd h1 { font-size: var(--fs-4); font-weight: 800; color: var(--cz-ink); margin-right: auto; }
-.hm-pk { height: 30px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); background: var(--cz-card); }
+body.cz-home .hm-hd h1 { font-size: var(--fs-section); font-weight: var(--fw-strong); color: var(--cz-ink); margin-right: auto; line-height: var(--lh-section); }
+.hm-pk { height: 30px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); background: var(--cz-card); line-height: var(--lh-label); }
 .hm-pk svg, .ut-ib svg, .hm-tg svg, .ut-btn svg, .hm-tch svg, .hm-cap svg, .ut-mic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
 .ut-ib { width: 32px; height: 32px; border-radius: 999px; border: 0; padding: 0; background: none; color: var(--cz-ink2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; font-family: var(--cz-sans); }
 .ut-ib.lg { width: 40px; height: 40px; }
@@ -17,38 +17,38 @@ body.cz-home .hm-hd h1 { font-size: var(--fs-4); font-weight: 800; color: var(--
 @media (hover: hover) { .ut-ib:hover { background: var(--cz-well); } .ut-ib.solid:hover { background: var(--cz-ink); } .ut-ib.pri:hover { background: var(--cz-solid); } }
 
 /* ── buttons, boxes and fields the canvas draws ── */
-.ut-btn { height: 36px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-family: var(--cz-sans); font-size: var(--fs-3); font-weight: 700; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); white-space: nowrap; cursor: pointer; text-decoration: none; box-sizing: border-box; }
+.ut-btn { height: 36px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-family: var(--cz-sans); font-size: var(--fs-row); font-weight: var(--fw-strong); border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); white-space: nowrap; cursor: pointer; text-decoration: none; box-sizing: border-box; line-height: var(--lh-row); }
 .ut-btn.pri { background: var(--cz-solid); border-color: transparent; color: var(--cz-onsolid); }
 .ut-btn.dark { background: var(--cz-ink); border-color: transparent; color: var(--cz-card); }
 .ut-btn.soft { background: var(--cz-well); border-color: transparent; }
 .ut-btn.ghost { border-color: transparent; background: transparent; color: var(--cz-ink2); }
-.ut-btn.sm { height: 30px; padding: 0 11px; font-size: var(--fs-2); }
+.ut-btn.sm { height: 30px; padding: 0 11px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .ut-btn:disabled { opacity: .5; cursor: not-allowed; }
-.ut-lbl { margin: 0; font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink3); }
-.ut-h2 { margin: 0; font-size: var(--fs-5); font-weight: 800; color: var(--cz-ink); }
-.ut-sub { margin: 0; font-size: var(--fs-2); color: var(--cz-ink3); }
-.ut-small { font-size: var(--fs-2); }
+.ut-lbl { margin: 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
+.ut-h2 { margin: 0; font-size: var(--fs-panel); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-panel); }
+.ut-sub { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.ut-small { font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .ut-mut { color: var(--cz-ink3); }
 .ut-bl { color: var(--cz-blueink); }
-.ut-box { background: var(--cz-well); border-radius: 16px; padding: 12px 14px; font-size: var(--fs-2); color: var(--cz-ink); }
+.ut-box { background: var(--cz-well); border-radius: 16px; padding: 12px 14px; font-size: var(--fs-meta); color: var(--cz-ink); line-height: var(--lh-meta); }
 .ut-card { background: var(--cz-card); border-radius: 16px; border: 1px solid var(--cz-hair); padding: 12px 14px; }
 .ut-need { background: var(--cz-bluebg); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
 .ut-chk { width: 18px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--cz-c-c5c9d0); flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
 .ut-chk.on { background: var(--cz-ink); box-shadow: none; color: var(--cz-card); }
 .ut-chk svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
 .ut-field { display: flex; flex-direction: column; gap: 6px; }
-.ut-field > span, .ut-field > label { font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink2); }
-.ut-field em { font-style: normal; font-weight: 600; color: var(--cz-ink3); }
-.ut-field textarea, .ut-field input { font: inherit; font-family: var(--cz-sans); font-size: var(--fs-3); color: var(--cz-ink); border: 0; outline: 0; border-radius: 14px; background: var(--cz-well); padding: 10px 14px; min-height: 72px; resize: vertical; box-sizing: border-box; width: 100%; }
+.ut-field > span, .ut-field > label { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
+.ut-field em { font-style: normal; font-weight: var(--fw-strong); color: var(--cz-ink3); }
+.ut-field textarea, .ut-field input { font: inherit; font-family: var(--cz-sans); font-size: var(--fs-body); color: var(--cz-ink); border: 0; outline: 0; border-radius: 14px; background: var(--cz-well); padding: 10px 14px; min-height: 72px; resize: vertical; box-sizing: border-box; width: 100%; line-height: var(--lh-body); }
 .ut-field input { min-height: 42px; }
 .ut-field textarea:focus-visible, .ut-field input:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
-.ut-radio { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--cz-hair); width: 100%; background: var(--cz-card); color: var(--cz-ink); text-align: left; cursor: pointer; font: inherit; font-family: var(--cz-sans); font-size: var(--fs-3); box-sizing: border-box; }
+.ut-radio { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--cz-hair); width: 100%; background: var(--cz-card); color: var(--cz-ink); text-align: left; cursor: pointer; font: inherit; font-family: var(--cz-sans); font-size: var(--fs-body); box-sizing: border-box; line-height: var(--lh-body); }
 .ut-radio .o { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--cz-c-c5c9d0); flex: none; margin-top: 1px; box-sizing: border-box; }
 .ut-radio[aria-checked="true"] { border-color: var(--cz-blue); box-shadow: 0 0 0 3px var(--cz-bluebg); }
 .ut-radio[aria-checked="true"] .o { box-shadow: inset 0 0 0 5px var(--cz-blue); }
-.ut-radio b { font-weight: 700; }
-.ut-radio small { display: block; font-size: var(--fs-2); color: var(--cz-ink3); }
-.ut-trow { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-3); color: var(--cz-ink); }
+.ut-radio b { font-weight: var(--fw-strong); }
+.ut-radio small { display: block; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.ut-trow { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-body); color: var(--cz-ink); line-height: var(--lh-body); }
 .ut-trow:last-child { border-bottom: 0; }
 .ut-trow > span { flex: 1; min-width: 0; }
 .ut-trow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; color: var(--cz-ink2); }
@@ -61,58 +61,58 @@ body.cz-home .hm-hd h1 { font-size: var(--fs-4); font-weight: 800; color: var(--
 /* ── the Today card ── */
 .hm-tc { box-sizing: border-box; width: 100%; display: flex; flex-direction: column; gap: 2px; margin: 0 0 6px; padding: 12px 14px; border-radius: 18px; border: 0; background: var(--cz-card); color: var(--cz-ink); text-align: left; font: inherit; font-family: var(--cz-sans); box-shadow: 0 1px 2px var(--cz-hair); }
 button.hm-tc { cursor: pointer; }
-.hm-tc .big { display: block; font-size: var(--fs-3); font-weight: 800; }
-.hm-tc .sub { margin: 0; font-size: var(--fs-2); color: var(--cz-ink3); }
+.hm-tc .big { display: block; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
+.hm-tc .sub { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .hm-tc.soon, .hm-tc.live { gap: 8px; }
 .hm-tc.eod { gap: 10px; }
 .hm-tc.rec { flex-direction: row; align-items: center; gap: 10px; }
 .hm-tc.rec > div { flex: 1; min-width: 0; }
-.hm-tc.rec p { margin: 0; font-size: var(--fs-2); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.hm-tch { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-3); }
+.hm-tc.rec p { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-meta); }
+.hm-tch { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); line-height: var(--lh-body); }
 .hm-tch > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.hm-tch > .r { margin-left: auto; font-size: var(--fs-2); font-weight: 700; color: var(--cz-blueink); white-space: nowrap; }
-.hm-tch > .r.q { color: var(--cz-ink3); font-weight: 600; }
+.hm-tch > .r { margin-left: auto; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-blueink); white-space: nowrap; line-height: var(--lh-label); }
+.hm-tch > .r.q { color: var(--cz-ink3); font-weight: var(--fw-strong); }
 .hm-tch svg { color: var(--cz-blueink); width: 18px; height: 18px; }
 .hm-tch .ut-ib { margin-right: -6px; }
 .hm-tc .ut-acts { gap: 6px; }
 /* the other meetings on now or close (batch 9 item 2): one quiet line each, under a hairline */
 .hm-tco { display: flex; flex-direction: column; margin-top: 2px; padding-top: 4px; border-top: 1px solid var(--cz-hair); }
-.hm-tcr { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: var(--fs-2); color: var(--cz-ink2); }
+.hm-tcr { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 .hm-tcr > svg { width: 15px; height: 15px; color: var(--cz-ink3); flex: none; }
 .hm-tcr.on > svg { color: var(--cz-blueink); }
-.hm-tcr .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--cz-ink); }
-.hm-tcr .w { font-size: var(--fs-2); color: var(--cz-ink3); white-space: nowrap; }
+.hm-tcr .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-strong); color: var(--cz-ink); }
+.hm-tcr .w { font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; line-height: var(--lh-meta); }
 .hm-tcr .ut-ib { flex: none; }
 .hm-tcr .ut-ib:last-child { margin-right: -6px; }
 .hm-load { display: flex; gap: 2px; height: 6px; margin-top: 10px; }
 .hm-load i { flex: var(--bd-f, 1); border-radius: 3px; background: var(--cz-c-eceae6); }
 .hm-load i.m { background: var(--cz-c-b6c6dc); }
 .hm-load i.n { background: var(--cz-blue); }
-.hm-lx { display: flex; justify-content: space-between; margin-top: 4px; font-size: var(--fs-2); color: var(--cz-ink3); }
-.hm-eodl { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-2); }
+.hm-lx { display: flex; justify-content: space-between; margin-top: 4px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.hm-eodl { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .hm-eodl span { display: flex; gap: 8px; }
 .hm-eodl b { width: 74px; flex: none; }
-.hm-tc.clear { font-size: var(--fs-2); color: var(--cz-ink2); }
+.hm-tc.clear { font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 
 /* ── the filters ── */
 .hm-flt { display: flex; gap: 4px; padding: 2px 4px; flex-wrap: wrap; margin: 0 0 4px; }
-.hm-flt .cz-chip { font-weight: 600; }
+.hm-flt .cz-chip { font-weight: var(--fw-strong); }
 
 /* ── a product group and its rows (canvas .ghd and .lrow) ── */
 .hm-pg { margin: 0; }
-.hm-ghd { display: flex; align-items: center; gap: 6px; width: 100%; padding: 10px 10px 4px 8px; font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink2); border: 0; background: none; text-align: left; font-family: var(--cz-sans); box-sizing: border-box; }
+.hm-ghd { display: flex; align-items: center; gap: 6px; width: 100%; padding: 10px 10px 4px 8px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); border: 0; background: none; text-align: left; font-family: var(--cz-sans); box-sizing: border-box; line-height: var(--lh-label); }
 button.hm-ghd { cursor: pointer; }
 .hm-ghd svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
-.hm-ghd .n, .hm-gn { margin-left: auto; font-weight: 700; color: var(--cz-ink3); font-size: var(--fs-2); }
+.hm-ghd .n, .hm-gn { margin-left: auto; font-weight: var(--fw-strong); color: var(--cz-ink3); font-size: var(--fs-label); line-height: var(--lh-label); }
 .hm-ghr2 { display: flex; align-items: center; }
 .hm-ghr2 .hm-ghd { flex: 1; min-width: 0; }
 /* a program's group (canvas PgHomePhone): its tile, name and products; the next milestone at the end, red when it is late */
 .hm-prg .hm-gtile { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--cz-bluebg); color: var(--cz-blueink); flex: none; }
 .hm-prg .hm-gname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .hm-ptags { display: inline-flex; gap: 4px; min-width: 0; overflow: hidden; }
-.hm-ptag { font-size: var(--fs-1); font-weight: 700; color: var(--cz-ink3); background: var(--cz-well); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
+.hm-ptag { font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); background: var(--cz-well); border-radius: 999px; padding: 1px 7px; white-space: nowrap; line-height: var(--lh-badge); }
 .hm-prg .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.hm-gb { min-width: 18px; height: 18px; border-radius: 999px; background: var(--cz-blue); color: var(--cz-card); font-size: var(--fs-1); font-weight: 800; display: grid; place-items: center; padding: 0 5px; box-sizing: border-box; flex: none; }
+.hm-gb { min-width: 18px; height: 18px; border-radius: 999px; background: var(--cz-blue); color: var(--cz-card); font-size: var(--fs-badge); font-weight: var(--fw-strong); display: grid; place-items: center; padding: 0 5px; box-sizing: border-box; flex: none; line-height: var(--lh-badge); }
 .hm-prg.late .n { color: var(--cz-red); }
 .hm-gn { border: 0; background: none; padding: 10px 10px 4px 4px; cursor: pointer; font-family: var(--cz-sans); white-space: nowrap; }
 body.cz-home .hm-r.lr { min-height: 0; margin: 0; border-radius: 16px; gap: 0; }
@@ -121,12 +121,12 @@ body.cz-home .hm-r.lr.kid { margin: 0; }
 body.cz-home .hm-r.lr.kid .hm-rm { min-height: 44px; padding: 6px 10px; }
 body.cz-home .hm-r.lr .hm-tile { width: 32px; height: 32px; }
 .hm-r.lr .hm-rt { flex: 1; gap: 1px; }
-.hm-r.lr .hm-rt em { font-size: var(--fs-2); }
+.hm-r.lr .hm-rt em { font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .hm-r.lr .hm-rt em.q, .hm-r.lr.st-quiet .hm-rt em, .hm-r.lr.st-wait .hm-rt em { color: var(--cz-ink3); }
-.hm-r.lr.task .hm-rt b, .hm-r.lr.item .hm-rt b { font-weight: 600; }
+.hm-r.lr.task .hm-rt b, .hm-r.lr.item .hm-rt b { font-weight: var(--fw-strong); }
 .hm-r.lr.st-wait .hm-rt b { color: var(--cz-ink2); }
-.hm-rr { font-size: var(--fs-2); font-weight: 700; color: var(--cz-blueink); white-space: nowrap; flex: none; }
-.hm-rr.q { color: var(--cz-ink3); font-weight: 600; }
+.hm-rr { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-blueink); white-space: nowrap; flex: none; line-height: var(--lh-label); }
+.hm-rr.q { color: var(--cz-ink3); font-weight: var(--fw-strong); }
 .hm-tg { flex: none; width: 32px; height: 32px; margin-left: 10px; margin-right: -4px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink2); cursor: pointer; padding: 0; z-index: 1; }
 .hm-r.lr.ini .hm-rm { padding-left: 14px; }
 .hm-ck { flex: none; width: 32px; height: 32px; margin: 0 -10px 0 4px; display: grid; place-items: center; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 10px; z-index: 1; }
@@ -138,25 +138,25 @@ body.cz-home .hm-r.lr .hm-tile { width: 32px; height: 32px; }
 @media (hover: hover) { body.cz-home .hm-r.lr:hover { background: var(--cz-well2); } body.cz-home .hm-r.lr.sel:hover { background: var(--cz-card); } .hm-tg:hover { background: var(--cz-well); } }
 .hm-r.lr .hm-x { width: 32px; height: 32px; }
 .hm-tile.wk { box-shadow: none; background: var(--cz-well2); }
-.hm-more2 { display: block; margin: 2px 0 4px 10px; height: 32px; border: 0; background: none; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); cursor: pointer; padding: 0 2px; font-family: var(--cz-sans); }
+.hm-more2 { display: block; margin: 2px 0 4px 10px; height: 32px; border: 0; background: none; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); cursor: pointer; padding: 0 2px; font-family: var(--cz-sans); line-height: var(--lh-label); }
 
 /* ── the capture box and the untouched row ── */
 .hm-cap { display: flex; align-items: center; gap: 8px; margin: 6px 4px 2px; height: 40px; border-radius: 14px; background: var(--cz-card); padding: 0 6px 0 12px; border: 1px solid var(--cz-hair); }
-.hm-cap input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-family: var(--cz-sans); font-size: var(--fs-2); color: var(--cz-ink); }
+.hm-cap input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-family: var(--cz-sans); font-size: var(--fs-meta); color: var(--cz-ink); line-height: var(--lh-meta); }
 .hm-cap input::placeholder { color: var(--cz-ink3); }
 .hm-cap.on { box-shadow: 0 0 0 2px var(--cz-bluebg); }
 .hm-un { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; min-height: 36px; border: 0; background: none; border-radius: 16px; cursor: pointer; font-family: var(--cz-sans); text-align: left; }
-.hm-un b { flex: 1; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); }
-.hm-un span { font-size: var(--fs-2); font-weight: 600; color: var(--cz-ink3); }
+.hm-un b { flex: 1; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
+.hm-un span { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
 .hm-all { display: none; }
 
 /* ── the small menus: the products picker and Later (home-app.js menu()) ── */
 .hm-menu .ut-mi { flex-shrink: 0; flex-direction: row; align-items: center; gap: 10px; min-height: 40px; }
 .hm-menu .ut-mi.tall { min-height: 52px; }
 .hm-menu .ut-mi > span:not(.ut-it) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
-.hm-menu .ut-mi .k { margin-left: auto; font-size: var(--fs-2); color: var(--cz-ink3); font-weight: 600; flex: none; }
+.hm-menu .ut-mi .k { margin-left: auto; font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); flex: none; line-height: var(--lh-label); }
 .hm-menu .ut-mi svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; color: var(--cz-ink2); flex: none; }
-.hm-menu .ut-it { width: 28px; height: 28px; border-radius: 9px; background: var(--cz-well2); color: var(--cz-ink2); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-1); font-weight: 800; flex: none; }
+.hm-menu .ut-it { width: 28px; height: 28px; border-radius: 9px; background: var(--cz-well2); color: var(--cz-ink2); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-badge); font-weight: var(--fw-strong); flex: none; line-height: var(--lh-badge); }
 .hm-menu .ut-it.p { background: var(--cz-bluebg); color: var(--cz-blueink); }
 .hm-menu .ut-hr { height: 1px; background: var(--cz-hair); margin: 4px 0; flex: none; }
 
@@ -185,7 +185,7 @@ body.cz-home .hm-r.lr .hm-tile { width: 32px; height: 32px; }
 /* ── the decision card in the chat (HmDecide) and Return a run in the Viewer ── */
 .ut-dec { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; padding: 16px; max-width: 620px; }
 .ut-dec .ut-acts { flex-wrap: nowrap; }
-.ut-dec .ut-acts .sp { font-size: var(--fs-2); color: var(--cz-ink3); flex: 1 1 120px; min-width: 0; text-align: right; }
+.ut-dec .ut-acts .sp { font-size: var(--fs-meta); color: var(--cz-ink3); flex: 1 1 120px; min-width: 0; text-align: right; line-height: var(--lh-meta); }
 .ut-dec [role="status"]:empty, .ut-vc [role="status"]:empty { display: none; }
 .hm-chat .hm-icard { margin-top: 2px; }
 .ut-later { position: relative; }
@@ -195,12 +195,12 @@ body.cz-home .hm-r.lr .hm-tile { width: 32px; height: 32px; }
 .ut-mic svg { width: 18px; height: 18px; }
 .ut-mic.on { background: var(--cz-bluebg); }
 .ut-mic.on svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
-.hm-chat .ut-live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-blueink); }
+.hm-chat .ut-live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-blueink); line-height: var(--lh-label); }
 .hm-chat .hm-box.ut-on, .hm-chat .hm-basic.ut-on { box-shadow: 0 0 0 2px var(--cz-bluebg); }
 .ut-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--cz-card); border-radius: 28px 28px 0 0; box-shadow: var(--cz-sheet); padding: 10px 16px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
 .ut-sheet[hidden] { display: none; }
 .ut-sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--cz-c-c5c9d0); align-self: center; margin-bottom: 4px; }
-.ut-sheet h3 { margin: 0; font-size: var(--fs-4); font-weight: 800; }
+.ut-sheet h3 { margin: 0; font-size: var(--fs-section); font-weight: var(--fw-strong); line-height: var(--lh-section); }
 .ut-sheet .bar { display: flex; align-items: center; gap: 10px; height: 56px; border-radius: 999px; background: var(--cz-bluebg); color: var(--cz-blueink); padding: 0 6px 0 16px; }
 .ut-sheet .bar .sp { flex: 1; }
 
@@ -224,8 +224,8 @@ body.cz-home .hm-r.lr .hm-tile { width: 32px; height: 32px; }
   .ut-vc .ut-tabs button, .ut-vc .ut-chips .cz-chip { min-height: 44px; }
   .hm-tg { margin-left: 6px; }
   .hm-cap { height: 48px; }
-  .hm-cap input { font-size: var(--fs-4); }
-  .ut-field textarea, .ut-field input { font-size: var(--fs-4); }
+  .hm-cap input { font-size: var(--fs-field); }
+  .ut-field textarea, .ut-field input { font-size: var(--fs-field); }
   .ut-dec { padding: 0; border: 0; box-shadow: none; background: none; }
   .ut-dec .ut-acts .sp { display: none; }
   .ut-dec .ut-acts .ut-btn.pri { flex: 1; justify-content: center; height: 48px; }
@@ -243,24 +243,24 @@ body.cz-home .hm-list { flex-basis: 360px; width: 360px; padding: 12px 12px 76px
 body.cz-home .hm-lsc { margin: 0 -12px; padding: 0 12px 4px; }
 .hv-bar { display: flex; align-items: center; gap: 2px; height: 44px; padding: 0; }
 .hv-hi { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 0 0 6px; border: 0; background: none; color: var(--cz-ink); cursor: pointer; text-align: left; font-family: var(--cz-sans); border-radius: 14px; }
-.hv-hi b { font-size: var(--fs-5); font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.hv-hi b { font-size: var(--fs-display); font-weight: var(--fw-strong); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-display); }
 .hv-hi svg { color: var(--cz-ink3); flex: none; width: 16px; height: 16px; }
 .hv-hi .hv-nd { width: 8px; height: 8px; border-radius: 4px; background: var(--cz-blue); flex: none; display: block; }
 .hv-hi[aria-expanded="true"] svg { transform: rotate(180deg); }
-.hv-pk { height: 32px; padding: 0 10px 0 12px; border-radius: 999px; border: 0; background: var(--cz-card); font-family: var(--cz-sans); font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; flex: none; max-width: 140px; }
+.hv-pk { height: 32px; padding: 0 10px 0 12px; border-radius: 999px; border: 0; background: var(--cz-card); font-family: var(--cz-sans); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; flex: none; max-width: 140px; line-height: var(--lh-label); }
 .hv-pk svg { width: 13px; height: 13px; flex: none; }
 .ut-ib.hv-ib { width: 40px; height: 40px; }
 .ut-ib.hv-ib svg { width: 18px; height: 18px; }
-.hv-sub { margin: 0 6px 12px; font-size: var(--fs-2); color: var(--cz-ink3); }
+.hv-sub { margin: 0 6px 12px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .hv-body > .hm-pg + .hm-pg { margin-top: 12px; }
 .hv-body > .hm-pg.loose { margin-top: 0; }
 
 /* the group's header: a tile, the name, the goal dots or the next milestone, a chevron (HvAC .pg) */
 .hv-gh { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px 0 6px; margin: 0 0 4px; border: 0; background: none; color: var(--cz-ink); cursor: pointer; text-align: left; font-family: var(--cz-sans); box-sizing: border-box; border-radius: 14px; }
-.hv-gh > b, .hv-pt > b { font-size: var(--fs-3); font-weight: 800; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.hv-gh > b, .hv-pt > b { font-size: var(--fs-row); font-weight: var(--fw-strong); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-row); }
 .hv-cv { color: var(--cz-ink3); display: inline-flex; flex: none; margin-left: auto; }
 .hv-gd + .hv-cv { margin-left: 6px; }
-.hv-tl { position: relative; width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-1); font-weight: 800; flex: none; background: var(--cz-bluebg); color: var(--cz-blueink); }
+.hv-tl { position: relative; width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-badge); font-weight: var(--fw-strong); flex: none; background: var(--cz-bluebg); color: var(--cz-blueink); line-height: var(--lh-badge); }
 .hv-tl.t1, .hv-st2.t1 { background: color-mix(in srgb, var(--cz-c-7a5a2e) 13%, var(--cz-card)); color: var(--cz-c-7a5a2e); }
 .hv-tl.t2, .hv-st2.t2 { background: var(--cz-well2); color: var(--cz-ink3); }
 /* the dark theme: the brown ink sinks into a dark card, so its letters lift toward the ink (the tint stays) */
@@ -279,22 +279,22 @@ body.cz-home .hm-lsc { margin: 0 -12px; padding: 0 12px 4px; }
 .hv-pf .hv-cv { margin-left: 0; }
 /* the heading whose program or product is open in the Viewer (HbCProg, HbCProduct): its name carries the selection, as a row does */
 .hv-gh.hv-prg.sel .hv-pt { background: var(--cz-bluebg); }
-.hv-msd { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); white-space: nowrap; }
+.hv-msd { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); white-space: nowrap; line-height: var(--lh-label); }
 .hv-msd.late { color: var(--cz-late); }
 .hv-dm { display: block; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: var(--cz-c-6b4fa3); }
 .hv-msd.late .hv-dm { background: var(--cz-dot-late); }
 .hv-rd { display: inline-flex; gap: 3px; align-items: center; }
 .hv-rd i { display: block; width: 5px; height: 5px; border-radius: 1px; transform: rotate(45deg); background: color-mix(in srgb, var(--cz-ink3) 28%, var(--cz-card)); }
 .hv-rd i.on { background: var(--cz-c-6b4fa3); }
-.hv-psub { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 8px 14px 2px 10px; font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink3); }
-.hv-st2 { width: 20px; height: 20px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-1); font-weight: 800; flex: none; background: var(--cz-bluebg); color: var(--cz-blueink); }
+.hv-psub { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 8px 14px 2px 10px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
+.hv-st2 { width: 20px; height: 20px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-badge); font-weight: var(--fw-strong); flex: none; background: var(--cz-bluebg); color: var(--cz-blueink); line-height: var(--lh-badge); }
 
 /* the card and its one-line rows (HvAC .card, .row, .kid) */
 .hv-card { background: var(--cz-card); border-radius: 18px; padding: 3px 0; }
 body.cz-home .hv-r { position: relative; display: flex; align-items: center; gap: 0; min-height: 0; margin: 0; border-radius: 14px; background: none; box-shadow: none; }
 body.cz-home .hv-r .hm-rm { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 6px; border-radius: 14px; }
 body.cz-home .hv-r .hm-ck + .hm-rm { padding-left: 8px; }
-body.cz-home .hv-r .hm-rt b { font-size: var(--fs-3); font-weight: 600; }
+body.cz-home .hv-r .hm-rt b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
 body.cz-home .hv-r.ini .hm-rm { padding-right: 4px; }
 .hv-r + .hv-r::before, .hm-nest::before, .hv-r + .hv-fold::before, .hm-nest + .hv-r::before, .hm-nest + .hv-fold::before { content: ""; position: absolute; left: 36px; right: 12px; top: 0; height: 1px; background: var(--cz-hair); }
 .hm-nest { position: relative; margin: 0; padding: 0; border: 0; }
@@ -303,7 +303,7 @@ body.cz-home .hv-r.ini .hm-rm { padding-right: 4px; }
 body.cz-home .hv-r.kid .hm-rm { min-height: 40px; padding: 2px 12px 2px 30px; }
 body.cz-home .hv-r.kid .hm-ck { margin-left: 30px; }
 body.cz-home .hv-r.kid .hm-ck + .hm-rm { padding-left: 8px; }
-body.cz-home .hv-r.kid .hm-rt b { font-size: var(--fs-3); }
+body.cz-home .hv-r.kid .hm-rt b { font-size: var(--fs-body); line-height: var(--lh-body); }
 .hm-nest .hv-r.kid::before, .hm-nest .hv-fold.kid::before { content: ""; position: absolute; left: 60px; right: 12px; top: 0; height: 1px; background: var(--cz-hair); }
 .hm-nest > .hv-r.kid:first-child::before { display: none; }
 body.cz-home .hv-r.sel, body.cz-home .hv-r.sel.kid { background: var(--cz-bluebg); box-shadow: none; }
@@ -321,9 +321,9 @@ body.cz-home .hv-r .hm-ck { width: 24px; height: 32px; margin: 0 0 0 6px; }
 .hv-ck.wait { box-shadow: inset 0 0 0 1.5px var(--cz-c-c5c9d0); opacity: .55; }
 .hv-ck.on { background: var(--cz-ink3); box-shadow: none; color: var(--cz-card); display: inline-flex; align-items: center; justify-content: center; }
 .hv-ck.on svg { width: 11px; height: 11px; stroke-width: 3; }
-.hv-st { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2); color: var(--cz-ink3); white-space: nowrap; flex: none; }
+.hv-st { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; flex: none; line-height: var(--lh-meta); }
 .hv-st svg { width: 12px; height: 12px; }
-.hv-c { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-2); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; }
+.hv-c { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-label); font-weight: var(--fw-strong); display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; line-height: var(--lh-label); }
 .hv-mt { display: inline-flex; align-items: center; gap: 3px; flex: none; margin-left: 4px; }
 .hv-mt i { display: block; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--cz-ink3) 28%, var(--cz-card)); }
 .hv-mt i.on { background: color-mix(in srgb, var(--cz-blue) 45%, var(--cz-card)); }
@@ -332,15 +332,15 @@ body.cz-home .hv-r .hm-ck { width: 24px; height: 32px; margin: 0 0 0 6px; }
 .hv-xc { width: 26px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--cz-ink3); border: 0; background: none; padding: 0; margin-right: 6px; border-radius: 10px; cursor: pointer; }
 span.hv-xc { width: 18px; cursor: default; }
 body.cz-home .hv-r .hm-x { margin-right: 6px; }
-.hv-fold { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 0 12px 0 6px; border: 0; background: none; font-family: var(--cz-sans); font-size: var(--fs-2); font-weight: 600; color: var(--cz-ink2); cursor: pointer; text-align: left; box-sizing: border-box; border-radius: 14px; }
+.hv-fold { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 0 12px 0 6px; border: 0; background: none; font-family: var(--cz-sans); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); cursor: pointer; text-align: left; box-sizing: border-box; border-radius: 14px; line-height: var(--lh-label); }
 .hv-fold svg { margin-left: auto; color: var(--cz-ink3); flex: none; }
 .hv-fold.kid { padding-left: 30px; }
 /* "Not in an initiative" (HvAC .lh) */
-.hv-lh { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 18px; padding: 12px 10px 0 12px; border: 0; background: none; font-family: var(--cz-sans); font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); text-align: left; box-sizing: border-box; cursor: pointer; border-radius: 0 0 14px 14px; }
+.hv-lh { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 18px; padding: 12px 10px 0 12px; border: 0; background: none; font-family: var(--cz-sans); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); text-align: left; box-sizing: border-box; cursor: pointer; border-radius: 0 0 14px 14px; line-height: var(--lh-label); }
 div.hv-lh { cursor: default; margin-top: 0; padding-top: 0; }
 .hv-lh::before { content: ""; position: absolute; left: 12px; right: 10px; top: 0; height: 1px; background: var(--cz-hair); }
 div.hv-lh::before { display: none; }
-.hv-lh .n { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
+.hv-lh .n { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-strong); }
 .hv-lt { display: block; width: 7px; height: 7px; border-radius: 2px; background: var(--cz-dot-late); color: var(--cz-dot-late); }
 .hv-g.loose .hv-card { margin-top: 4px; }
 
@@ -352,22 +352,22 @@ div.hv-lh::before { display: none; }
 .hv-grab { width: 40px; height: 5px; border-radius: 3px; background: var(--cz-c-d9dce1); margin: 0 auto 8px; flex: none; }
 .hv-sbar { display: flex; align-items: center; height: 44px; flex: none; }
 .hv-sheet:focus { outline: none; }
-.hv-sbar b { flex: 1; font-size: var(--fs-4); font-weight: 800; padding-left: 6px; }
+.hv-sbar b { flex: 1; font-size: var(--fs-row); font-weight: var(--fw-strong); padding-left: 6px; line-height: var(--lh-row); }
 .hv-sc { flex: 1; min-height: 0; overflow: auto; padding-bottom: 24px; scrollbar-width: thin; }
-.hv-sh { display: flex; align-items: baseline; gap: 8px; padding: 18px 8px 8px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); }
+.hv-sh { display: flex; align-items: baseline; gap: 8px; padding: 18px 8px 8px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
 .hv-sh:first-child { padding-top: 8px; }
-.hv-sh .r { margin-left: auto; font-weight: 600; }
+.hv-sh .r { margin-left: auto; font-weight: var(--fw-strong); }
 .hv-day { display: flex; flex-direction: column; width: 100%; padding: 2px 8px 6px; border: 0; background: none; font-family: var(--cz-sans); text-align: left; cursor: pointer; color: var(--cz-ink3); border-radius: 14px; box-sizing: border-box; }
-.hv-day .sub { font-size: var(--fs-2); }
+.hv-day .sub { font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .hv-day .hm-load { margin-top: 8px; }
-.hv-clear { margin: 0 8px; font-size: var(--fs-2); color: var(--cz-ink2); }
+.hv-clear { margin: 0 8px; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 body.cz-home .hv-r.two .hm-rm { min-height: 58px; padding: 8px 14px 8px 8px; align-items: center; }
-body.cz-home .hv-r.two .hm-rt b { font-size: var(--fs-3); }
-.hv-r.two .hm-rt em { font-style: normal; display: block; font-size: var(--fs-2); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+body.cz-home .hv-r.two .hm-rt b { font-size: var(--fs-body); line-height: var(--lh-body); }
+.hv-r.two .hm-rt em { font-style: normal; display: block; font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-meta); }
 .hv-r.two .hm-rt em svg { width: 13px; height: 13px; vertical-align: -2px; }
 .hv-r.two .hv-mk { align-self: center; }
 /* what sits in an initiative: the pill on its row and the list behind it (batch 12 item 6, canvas HsA1Desk, HsA2Phone, HsA3Sheet) */
-.hv-sp { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px 0 8px; margin: 0 2px 0 4px; border: 0; border-radius: 999px; background: var(--cz-well); color: var(--cz-ink2); font-family: var(--cz-sans); font-size: var(--fs-2); font-weight: 800; font-variant-numeric: tabular-nums; flex: none; cursor: pointer; }
+.hv-sp { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px 0 8px; margin: 0 2px 0 4px; border: 0; border-radius: 999px; background: var(--cz-well); color: var(--cz-ink2); font-family: var(--cz-sans); font-size: var(--fs-label); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; flex: none; cursor: pointer; line-height: var(--lh-label); }
 .hv-sp svg { width: 13px; height: 13px; color: var(--cz-ink3); }
 .hv-sp.needs, .hv-sp.blocked { color: var(--cz-blueink); }
 .hv-sp.on { background: var(--cz-bluebg); box-shadow: inset 0 0 0 1.5px var(--cz-blue); }
@@ -408,35 +408,35 @@ body.cz-home .hv-r.sp-on + .hv-r::before { display: none; }
   body.cz-home.hm-plist .hm-list { padding: 16px 0 96px; }
   .hv-bar { height: 48px; gap: 4px; }
   .hv-hi { height: 48px; }
-  .hv-hi b { font-size: var(--fs-5); }
+  .hv-hi b { font-size: var(--fs-panel); line-height: var(--lh-panel); }
   .hv-hi svg { width: 18px; height: 18px; }
   .hv-pk { height: 34px; }
   .ut-ib.hv-ib { width: 44px; height: 44px; }
   .ut-ib.hv-ib svg { width: 20px; height: 20px; }
-  .hv-sub { font-size: var(--fs-2); margin: 0 6px; }
+  .hv-sub { font-size: var(--fs-meta); margin: 0 6px; line-height: var(--lh-meta); }
   .hv-body { margin-top: 24px; }
   .hv-body > .hm-pg + .hm-pg { margin-top: 14px; }
   .hv-gh { min-height: 48px; margin-bottom: 6px; }
-  .hv-gh > b, .hv-pt > b { font-size: var(--fs-4); }
-  .hv-tl { width: 30px; height: 30px; border-radius: 10px; font-size: var(--fs-2); }
+  .hv-gh > b, .hv-pt > b { font-size: var(--fs-body); line-height: var(--lh-body); }
+  .hv-tl { width: 30px; height: 30px; border-radius: 10px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
   .hv-nd { box-shadow: 0 0 0 2px var(--cz-c-faf9f7); }
   .hv-pt, .hv-pf { min-height: 48px; }
   .hv-card { border-radius: 20px; padding: 4px 0; box-shadow: 0 8px 24px -20px var(--cz-c-9da3ac); }
   body.cz-home .hv-r .hm-rm { min-height: 48px; padding: 8px 14px 8px 8px; }
   body.cz-home .hv-r.ini .hm-rm { padding-right: 4px; }
-  body.cz-home .hv-r .hm-rt b { font-size: var(--fs-4); }
+  body.cz-home .hv-r .hm-rt b { font-size: var(--fs-body); line-height: var(--lh-body); }
   body.cz-home .hv-r.kid .hm-rm { min-height: 44px; padding: 4px 14px 4px 32px; }
   body.cz-home .hv-r.kid .hm-ck { margin-left: 32px; min-width: 24px; }
   body.cz-home .hv-r .hm-ck { min-width: 24px; min-height: 44px; margin-left: 8px; }
-  body.cz-home .hv-r.kid .hm-rt b { font-size: var(--fs-3); }
+  body.cz-home .hv-r.kid .hm-rt b { font-size: var(--fs-body); line-height: var(--lh-body); }
   .hv-r + .hv-r::before, .hm-nest::before, .hv-r + .hv-fold::before, .hm-nest + .hv-r::before, .hm-nest + .hv-fold::before { left: 38px; right: 14px; }
   .hm-nest .hv-r.kid::before, .hm-nest .hv-fold.kid::before { left: 62px; right: 14px; }
   .hv-ck { width: 18px; height: 18px; }
-  .hv-st { font-size: var(--fs-3); }
-  .hv-c { height: 22px; min-width: 24px; padding: 0 7px; font-size: var(--fs-2); }
+  .hv-st { font-size: var(--fs-body); line-height: var(--lh-body); }
+  .hv-c { height: 22px; min-width: 24px; padding: 0 7px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
   .hv-xc { min-width: 32px; min-height: 44px; }
   span.hv-xc { min-width: 18px; }
-  .hv-fold { min-height: 48px; padding: 0 14px 0 8px; font-size: var(--fs-3); }
+  .hv-fold { min-height: 48px; padding: 0 14px 0 8px; font-size: var(--fs-body); line-height: var(--lh-body); }
   .hv-fold.kid { padding-left: 32px; min-height: 44px; }
   .hv-scrim, .hv-sheet { position: fixed; }
   .hv-sheet { top: 96px; border-radius: 26px 26px 0 0; z-index: 91; }
@@ -460,9 +460,9 @@ body.cz-home .hm-hd.hv-bar > .hv-hi { flex: 1 0 auto; max-width: 100%; }
 .yd-open.concerned { background: var(--cz-latebg); }
 .yd-hd { display: flex; align-items: center; gap: 12px; }
 .yd-ht, .yd-mt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
-.yd-ht b { font-size: var(--fs-4); font-weight: 800; line-height: 1.3; color: var(--cz-ink); }
-.yd-ht em, .yd-mt em { font-style: normal; font-size: var(--fs-3); color: var(--cz-ink3); line-height: 1.4; }
-.yd-mt b { font-size: var(--fs-4); font-weight: 700; line-height: 1.3; color: var(--cz-ink); }
+.yd-ht b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: 1.3; color: var(--cz-ink); }
+.yd-ht em, .yd-mt em { font-style: normal; font-size: var(--fs-body); color: var(--cz-ink3); line-height: 1.4; }
+.yd-mt b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: 1.3; color: var(--cz-ink); }
 .yd-face { width: 48px; height: 48px; border-radius: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--cz-ink); background: var(--cz-riskbg); }
 .yd-face.calm { background: var(--cz-bluebg); }
 .yd-face.concerned { background: color-mix(in srgb, var(--cz-late) 22%, var(--cz-card)); }
@@ -473,13 +473,13 @@ body.cz-home .hm-hd.hv-bar > .hv-hi { flex: 1 0 auto; max-width: 100%; }
 .yd-scene { margin: 0 -16px; }
 .yd-scene .ad-scene { border-radius: 18px 18px 0 0; max-height: 150px; }
 .yd-big, .yd-night { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 20px 12px 12px; }
-.yd-big b, .yd-night b { font-size: var(--fs-5); font-weight: 800; color: var(--cz-ink); margin-top: 8px; }
-.yd-big em, .yd-night em { font-style: normal; font-size: var(--fs-3); color: var(--cz-ink3); max-width: 280px; }
+.yd-big b, .yd-night b { font-size: var(--fs-display); font-weight: var(--fw-strong); color: var(--cz-ink); margin-top: 8px; line-height: var(--lh-display); }
+.yd-big em, .yd-night em { font-style: normal; font-size: var(--fs-body); color: var(--cz-ink3); max-width: 280px; line-height: var(--lh-body); }
 .yd-night { padding: 0 0 12px; }
 .yd-night .ad-scene { max-height: 320px; }
-.yd-awake { margin-top: 12px; min-height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: inherit; font-weight: 700; cursor: pointer; }
+.yd-awake { margin-top: 12px; min-height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: inherit; font-weight: var(--fw-strong); cursor: pointer; }
 .yd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
-.yd-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; border-radius: 12px; background: color-mix(in srgb, var(--cz-card) 70%, transparent); font-size: var(--fs-3); font-weight: 700; color: var(--cz-ink); }
+.yd-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; border-radius: 12px; background: color-mix(in srgb, var(--cz-card) 70%, transparent); font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-row); }
 .yd-chip svg { color: var(--cz-blue); }
 .yd-miss, .yd-card { display: flex; align-items: center; gap: 12px; }
 .yd-miss { background: var(--cz-card); border-radius: 14px; padding: 12px; }
@@ -502,23 +502,23 @@ body.cz-home .hm-hd.hv-bar > .hv-hi { flex: 1 0 auto; max-width: 100%; }
 .yd-nw:hover { background: var(--cz-well); }
 .yd-nw:focus-visible, .yd-more:focus-visible, .yd-all:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
 .yd-nd { width: 8px; height: 8px; border-radius: 4px; background: var(--cz-blue); flex: none; margin-top: 12px; }
-.yd-av { width: 32px; height: 32px; border-radius: 16px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--cz-well); color: var(--cz-ink2); font-size: var(--fs-1); font-weight: 800; }
+.yd-av { width: 32px; height: 32px; border-radius: 16px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--cz-well); color: var(--cz-ink2); font-size: var(--fs-badge); font-weight: var(--fw-strong); line-height: var(--lh-badge); }
 .yd-av.b { background: var(--cz-bluebg); color: var(--cz-blueink); }
 .yd-av.sp { background: var(--cz-bluebg); color: var(--cz-blue); border-radius: 10px; }
-.yd-nw .yd-mt b { font-weight: 600; }
-.yd-more { align-self: flex-start; border: 0; background: none; padding: 6px 6px 8px 58px; min-height: 36px; font: inherit; font-size: var(--fs-3); font-weight: 700; color: var(--cz-blueink); cursor: pointer; }
+.yd-nw .yd-mt b { font-weight: var(--fw-strong); }
+.yd-more { align-self: flex-start; border: 0; background: none; padding: 6px 6px 8px 58px; min-height: 36px; font: inherit; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-blueink); cursor: pointer; line-height: var(--lh-row); }
 .yd-all { width: 40px; height: 40px; border-radius: 20px; border: 0; background: none; color: var(--cz-ink2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
 .yd-all:hover { background: var(--cz-well); }
 .yd-all:disabled { opacity: .5; cursor: default; }
 /* Tomorrow, a fold of Your day after 17:00 (FmA5Evening, was More › End of the day): time, title */
-.yd-tmr { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 6px; font-size: var(--fs-4); color: var(--cz-ink); }
-.yd-tt { width: 48px; flex: none; font-size: var(--fs-3); font-weight: 700; color: var(--cz-ink3); font-variant-numeric: tabular-nums; }
+.yd-tmr { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 6px; font-size: var(--fs-body); color: var(--cz-ink); line-height: var(--lh-body); }
+.yd-tt { width: 48px; flex: none; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink3); font-variant-numeric: tabular-nums; line-height: var(--lh-row); }
 .yd-tn { flex: 1; min-width: 0; }
 /* the moment card inside Your day: the morning's meetings (time, title) and a real thank-you in the evening recap (YdE1Ready, YdE3Evening) */
-.hm-phc .phrow { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; font-size: var(--fs-4); color: var(--cz-ink); }
-.hm-phc .phrow b { width: 48px; flex: none; font-size: var(--fs-3); font-weight: 700; color: var(--cz-ink3); }
+.hm-phc .phrow { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; font-size: var(--fs-body); color: var(--cz-ink); line-height: var(--lh-body); }
+.hm-phc .phrow b { width: 48px; flex: none; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-row); }
 .hm-phc .phty { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--cz-bluebg); }
-.hm-phc .phty .phl { font-size: var(--fs-4); color: var(--cz-ink); }
+.hm-phc .phty .phl { font-size: var(--fs-body); color: var(--cz-ink); line-height: var(--lh-body); }
 .hv-hi .ad-svg.hv-ad { width: 36px; height: 36px; margin-right: 2px; }   /* Adler greets (batch 16 item 2, AdH1): the chevron rule above sizes svg to 16 px */
 .hm-none.hm-ad { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
 .hm-none.hm-ad p { margin: 0; }