create-pmos 0.512.0 → 0.514.0

package/workspace/public/pm/prog-order.css

@@ -20,15 +20,15 @@ body.po-dragging, body.po-dragging * { cursor: grabbing !important; user-select:
 @keyframes po-info { 0% { transform: scale(1); opacity: .25; } 35%, 100% { transform: scale(1.9); opacity: 0; } }
 /* the suggestion */
 .po-pop { position: fixed; z-index: 80; background: var(--cz-card); color: var(--cz-ink); border-radius: 20px; box-shadow: 0 30px 70px -24px rgba(42,46,53,.38), 0 0 0 1px var(--cz-hair); padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; font-family: var(--cz-sans, inherit); max-height: calc(100vh - 24px); overflow: auto; }
-.po-pop h4 { margin: 0; font-size: var(--fs-3); font-weight: 800; display: flex; align-items: center; gap: 8px; }
+.po-pop h4 { margin: 0; font-size: var(--fs-section); font-weight: var(--fw-strong); display: flex; align-items: center; gap: 8px; line-height: var(--lh-section); }
 .po-sp { color: var(--po-prog); display: inline-flex; }
 .po-sp svg { width: 17px; height: 17px; }
-.po-why { font-size: var(--fs-2); color: var(--cz-ink2); line-height: 1.45; margin: 0; }
+.po-why { font-size: var(--fs-meta); color: var(--cz-ink2); line-height: 1.45; margin: 0; }
 .po-so { display: grid; grid-template-columns: 22px 1fr auto; gap: 2px 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--cz-well); }
-.po-so .n { font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink3); text-align: center; }
-.po-so b { font-size: var(--fs-3); font-weight: 800; min-width: 0; }
-.po-so .dt { font-size: var(--fs-2); color: var(--cz-ink3); font-weight: 600; white-space: nowrap; }
-.po-so .r { grid-column: 2 / -1; font-size: var(--fs-1); color: var(--cz-ink3); line-height: 1.35; }
+.po-so .n { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); text-align: center; line-height: var(--lh-label); }
+.po-so b { font-size: var(--fs-row); font-weight: var(--fw-strong); min-width: 0; line-height: var(--lh-row); }
+.po-so .dt { font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); white-space: nowrap; line-height: var(--lh-label); }
+.po-so .r { grid-column: 2 / -1; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: 1.35; }
 .po-so.mv .n { color: var(--cz-blueink); }
 .po-so.mv b::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cz-blue); margin-left: 6px; vertical-align: 2px; }
 .po-so.nod { background: transparent; border: 1.5px dashed var(--cz-hair); }

package/workspace/public/pm/prog-page.css

@@ -6,8 +6,8 @@
 
 /* the ✦ line: the next step, with the M face once */
 .pv-line { display: flex; align-items: center; gap: 12px; border-radius: 16px; padding: 8px 12px 8px 12px; background: var(--cz-bluebg); border: 1px solid color-mix(in srgb, var(--cz-blueink) 18%, transparent); }
-.pv-line p { margin: 0; flex: 1; min-width: 0; font-size: var(--fs-4); line-height: 1.4; color: var(--cz-ink3); }
-.pv-line b { color: var(--cz-ink); font-weight: 800; }
+.pv-line p { margin: 0; flex: 1; min-width: 0; font-size: var(--fs-body); line-height: 1.4; color: var(--cz-ink3); }
+.pv-line b { color: var(--cz-ink); font-weight: var(--fw-strong); }
 .pv-face { flex: none; width: 36px; height: 36px; display: inline-flex; }
 .pv-face svg, .pv-face img { width: 36px; height: 36px; }
 
@@ -19,17 +19,17 @@
 .pv-gc .pp-lh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
 .pv-gc .pp-lh { margin-bottom: 4px; }
 .pv-gc .pp-lh .lbl { margin: 0; }
-.pv-k { margin: 0; font-size: var(--fs-1); font-weight: 800; color: var(--cz-blueink); }
+.pv-k { margin: 0; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-blueink); line-height: var(--lh-badge); }
 .pv-gr { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; }
 button.pv-gr { cursor: pointer; }
 .pv-gr:focus-visible, .pv-one:focus-visible, .pv-tab:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; border-radius: 10px; }
 .pv-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
-.pv-rt b { font-size: var(--fs-4); font-weight: 800; line-height: 1.3; }
-.pv-rt b.q { font-weight: 600; color: var(--cz-ink2); }   /* no goal text yet: a known fact, not a goal title */
-.pv-rt small { font-size: var(--fs-2); color: var(--cz-ink3); line-height: 1.4; }
-.pv-kr { flex: none; font-size: var(--fs-1); font-weight: 800; border-radius: 6px; padding: 2px 6px; background: var(--cz-bluebg); color: var(--cz-blueink); }
+.pv-rt b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: 1.3; }
+.pv-rt b.q { font-weight: var(--fw-strong); color: var(--cz-ink2); }   /* no goal text yet: a known fact, not a goal title */
+.pv-rt small { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: 1.4; }
+.pv-kr { flex: none; font-size: var(--fs-badge); font-weight: var(--fw-strong); border-radius: 6px; padding: 2px 6px; background: var(--cz-bluebg); color: var(--cz-blueink); line-height: var(--lh-badge); }
 .pv-fc { display: flex; align-items: center; gap: 10px; padding-left: 19px; }
-.pv-fc small { flex: none; font-size: var(--fs-2); color: var(--cz-ink3); }
+.pv-fc small { flex: none; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .pv-bar { position: relative; flex: 1; height: 10px; border-radius: 5px; background: var(--cz-well); }
 .pv-bar i { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: var(--cz-ink3); }
 .pv-bar i.ok { background: var(--cz-dot-ok); } .pv-bar i.risk { background: var(--cz-dot-risk); } .pv-bar i.late { background: var(--cz-dot-late); }
@@ -40,15 +40,15 @@ button.pv-gr { cursor: pointer; }
 /* the top cards of a product: Programs, Health budgets */
 .pv-card { background: var(--cz-card); border: 1px solid var(--cz-hair); border-radius: 16px; padding: 10px 16px; display: flex; flex-direction: column; min-width: 0; }
 .pv-ch { display: flex; align-items: center; gap: 10px; padding: 2px 0 4px; }
-.pv-ch h4 { margin: 0; font-size: var(--fs-4); font-weight: 800; }
-.pv-ch small { flex: 1; font-size: var(--fs-2); color: var(--cz-ink3); }
+.pv-ch h4 { margin: 0; font-size: var(--fs-section); font-weight: var(--fw-strong); line-height: var(--lh-section); }
+.pv-ch small { flex: 1; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .pv-row { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--cz-hair); min-width: 0; width: 100%; }
 .pv-ch + .pv-row { border-top: 0; }
 button.pv-row, a.pv-row { cursor: pointer; }
 .pv-row > svg, .pv-chev { flex: none; color: var(--cz-ink3); display: inline-flex; }
-.pv-pill { flex: none; font-size: var(--fs-2); color: var(--cz-ink2); background: var(--cz-well); border-radius: 99px; padding: 2px 10px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.pv-late { flex: none; font-size: var(--fs-2); font-weight: 800; color: var(--cz-late); }
-.pv-none { margin: 0; padding: 6px 0; font-size: var(--fs-3); color: var(--cz-ink3); line-height: 1.5; }
+.pv-pill { flex: none; font-size: var(--fs-meta); color: var(--cz-ink2); background: var(--cz-well); border-radius: 99px; padding: 2px 10px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--lh-meta); }
+.pv-late { flex: none; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-late); line-height: var(--lh-label); }
+.pv-none { margin: 0; padding: 6px 0; font-size: var(--fs-body); color: var(--cz-ink3); line-height: 1.5; }
 
 /* the proposals, folded to one row (the owner only) */
 .pv-props { display: flex; flex-direction: column; gap: 8px; }
@@ -59,15 +59,15 @@ button.pv-row, a.pv-row { cursor: pointer; }
 
 /* the tabs */
 .pv-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--cz-hair); overflow-x: auto; scrollbar-width: none; }
-.pv-tab { all: unset; box-sizing: border-box; cursor: pointer; flex: 1 1 auto; justify-content: center; min-height: 44px; padding: 10px 8px; font-size: var(--fs-4); font-weight: 700; color: var(--cz-ink3); display: flex; align-items: center; gap: 8px; border-bottom: 3px solid transparent; margin-bottom: -1px; }
-.pv-tab.on { color: var(--cz-ink); font-weight: 800; border-bottom-color: var(--cz-blue); }
-.pv-n { font-size: var(--fs-1); font-weight: 800; color: var(--cz-ink3); }
+.pv-tab { all: unset; box-sizing: border-box; cursor: pointer; flex: 1 1 auto; justify-content: center; min-height: 44px; padding: 10px 8px; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink3); display: flex; align-items: center; gap: 8px; border-bottom: 3px solid transparent; margin-bottom: -1px; line-height: var(--lh-row); }
+.pv-tab.on { color: var(--cz-ink); font-weight: var(--fw-strong); border-bottom-color: var(--cz-blue); }
+.pv-n { font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
 .pv-sg { width: 8px; height: 8px; border-radius: 50%; flex: none; }
 .pv-sg.late { background: var(--cz-dot-late); } .pv-sg.ready { background: var(--cz-blue); }
 .pv-panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
 
 @media (max-width: 480px) {
-  .pv-tab { padding: 10px 4px; gap: 5px; font-size: var(--fs-3); }
+  .pv-tab { padding: 10px 4px; gap: 5px; font-size: var(--fs-body); line-height: var(--lh-body); }
   .pv-pill { display: none; }
 }
 

package/workspace/public/pm/program-charter.css

@@ -7,17 +7,17 @@
 
 /* the fields: two columns on a desk, one on a phone */
 .pc-fx { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
-.pc-fx label, .pc-lab { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink3); min-width: 0; }
+.pc-fx label, .pc-lab { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); min-width: 0; line-height: var(--lh-label); }
 .pc-fx .w2 { grid-column: 1 / 3; }
-.pc-fi { box-sizing: border-box; height: 40px; border-radius: 12px; background: var(--cz-card); border: 1px solid var(--pc-field); padding: 0 12px; font: inherit; font-size: var(--fs-3); font-weight: 700; color: var(--cz-ink); min-width: 0; width: 100%; outline: 0; }
-.pc-fi::placeholder, .pc-ta::placeholder { color: var(--cz-ink3); font-weight: 600; }
+.pc-fi { box-sizing: border-box; height: 40px; border-radius: 12px; background: var(--cz-card); border: 1px solid var(--pc-field); padding: 0 12px; font: inherit; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); min-width: 0; width: 100%; outline: 0; line-height: var(--lh-row); }
+.pc-fi::placeholder, .pc-ta::placeholder { color: var(--cz-ink3); font-weight: var(--fw-strong); }
 .pc-fi:focus, .pc-ta:focus { border-color: var(--cz-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cz-blue) 14%, transparent); }
-.pc-ta { box-sizing: border-box; font: inherit; font-size: var(--fs-3); font-weight: 700; color: var(--cz-ink); border-radius: 12px; background: var(--cz-card); border: 1px solid var(--pc-field); padding: 10px 12px; height: 66px; resize: none; outline: 0; width: 100%; }
+.pc-ta { box-sizing: border-box; font: inherit; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); border-radius: 12px; background: var(--cz-card); border: 1px solid var(--pc-field); padding: 10px 12px; height: 66px; resize: none; outline: 0; width: 100%; line-height: var(--lh-row); }
 .pc-sp { display: flex; align-items: center; gap: 8px; }
 .pc-sp .pc-fd { width: 150px; }
-.pc-sp .or { font-size: var(--fs-2); color: var(--cz-ink3); font-weight: 700; }
-.pc-fd { box-sizing: border-box; height: 40px; border-radius: 12px; background: var(--cz-card); border: 1px solid var(--pc-field); padding: 0 10px 0 12px; font: inherit; font-size: var(--fs-2); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; color: var(--cz-ink2); white-space: nowrap; cursor: pointer; min-width: 0; }
-.pc-fd.q { color: var(--cz-ink3); font-weight: 600; }
+.pc-sp .or { font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); line-height: var(--lh-label); }
+.pc-fd { box-sizing: border-box; height: 40px; border-radius: 12px; background: var(--cz-card); border: 1px solid var(--pc-field); padding: 0 10px 0 12px; font: inherit; font-size: var(--fs-label); font-weight: var(--fw-strong); display: inline-flex; align-items: center; gap: 8px; color: var(--cz-ink2); white-space: nowrap; cursor: pointer; min-width: 0; line-height: var(--lh-label); }
+.pc-fd.q { color: var(--cz-ink3); font-weight: var(--fw-strong); }
 .pc-fd svg, .pc-wch svg, .pc-mini svg, button.pc-ln svg { flex: none; }
 .pc-fd span { overflow: hidden; text-overflow: ellipsis; }
 .pc-fd:focus-visible, .pc-wch:focus-visible, .pc-ib:focus-visible, .pc-mini:focus-visible, .pc-ln:focus-visible, .pc-mi:focus-visible, .pc-ch:focus-visible, .pc-sv:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
@@ -26,7 +26,7 @@
 .pc .bad { box-shadow: 0 0 0 1.5px var(--pc-amberdot) !important; border-color: transparent !important; }
 
 /* what needs a look, said in place: amber, with the warning ripple */
-.pc-warn { margin: 0; font-size: var(--fs-2); font-weight: 700; color: var(--pc-amber); display: flex; align-items: center; gap: 6px; padding: 0 10px 8px 34px; }
+.pc-warn { margin: 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--pc-amber); display: flex; align-items: center; gap: 6px; padding: 0 10px 8px 34px; line-height: var(--lh-label); }
 .pc-lab .pc-warn { padding: 2px 0 0; }
 .pc-warn i { width: 7px; height: 7px; border-radius: 50%; background: var(--pc-amberdot); flex: none; position: relative; }
 @media (prefers-reduced-motion: no-preference) {
@@ -35,67 +35,67 @@
 @keyframes pcwarn { 0% { transform: scale(1); opacity: .35; } 50% { transform: scale(2); opacity: 0; } 100% { transform: scale(2); opacity: 0; } }
 
 /* the milestones: one grid per row, so every row lines up */
-.pc-lbl { display: flex; align-items: center; font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink3); margin: 0 0 6px; }
-.pc-lim { margin-left: auto; font-weight: 600; }
-.pc-lim.full { color: var(--pc-amber); font-weight: 700; }
+.pc-lbl { display: flex; align-items: center; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); margin: 0 0 6px; line-height: var(--lh-label); }
+.pc-lim { margin-left: auto; font-weight: var(--fw-strong); }
+.pc-lim.full { color: var(--pc-amber); font-weight: var(--fw-strong); }
 .pc-ml { border: 1px solid var(--cz-hair); border-radius: 16px; display: flex; flex-direction: column; }
 .pc-ml > :first-child { border-top: 0 !important; border-radius: 16px 16px 0 0; }
 .pc-ml > :last-child { border-radius: 0 0 16px 16px; }
 .pc-lnw { position: relative; border-top: 1px solid var(--cz-hair); }
 .pc-ln { display: grid; grid-template-columns: 18px minmax(0, 1fr) 132px 250px 72px; align-items: center; gap: 8px; padding: 8px 10px; }
-.pc-ln .pc-fi { height: 36px; font-size: var(--fs-3); }
-.pc-ln .pc-fd { height: 36px; font-size: var(--fs-2); width: 100%; }
+.pc-ln .pc-fi { height: 36px; font-size: var(--fs-body); line-height: var(--lh-body); }
+.pc-ln .pc-fd { height: 36px; font-size: var(--fs-meta); width: 100%; line-height: var(--lh-meta); }
 .pc-ln.sug { background: color-mix(in srgb, var(--pc-progbg) 40%, var(--cz-card)); grid-template-columns: 18px minmax(0, 1fr) 132px 250px 72px; }
 .pc-ln.sug .pc-fi { border-style: dashed; border-color: color-mix(in srgb, var(--pc-prog) 40%, transparent); }
 .pc-ln.dn2 .pc-fi { color: var(--cz-ink3); }
-button.pc-ln { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-height: 44px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-3); }
+button.pc-ln { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-height: 44px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-body); line-height: var(--lh-body); }
 button.pc-ln.dn { background: var(--bd-row, var(--cz-well)); color: var(--cz-ink3); }
-button.pc-ln.dn b { flex: 1; font-weight: 700; color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-button.pc-ln.addl { color: var(--pc-prog); font-weight: 700; width: 100%; }
+button.pc-ln.dn b { flex: 1; font-weight: var(--fw-strong); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+button.pc-ln.addl { color: var(--pc-prog); font-weight: var(--fw-strong); width: 100%; }
 .pc-dm { width: 10px; height: 10px; transform: rotate(45deg); border-radius: 3px; background: var(--cz-card); border: 2px solid color-mix(in srgb, var(--pc-prog) 32%, transparent); display: inline-block; justify-self: center; box-sizing: border-box; }
 .pc-dm.d { background: var(--pc-prog); border-color: var(--pc-prog); }
 .pc-dm.n { border-color: var(--pc-prog); box-shadow: 0 0 0 4px var(--pc-progbg); }
 .pc-spark { color: var(--pc-prog); display: inline-flex; justify-content: center; }
-.pc-wch { box-sizing: border-box; height: 36px; width: 100%; border-radius: 12px; background: var(--cz-card); border: 1px solid var(--pc-field); padding: 0 8px 0 10px; font: inherit; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; min-width: 0; }
+.pc-wch { box-sizing: border-box; height: 36px; width: 100%; border-radius: 12px; background: var(--cz-card); border: 1px solid var(--pc-field); padding: 0 8px 0 10px; font: inherit; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; min-width: 0; line-height: var(--lh-label); }
 .pc-wch span:not(.sq):not(.bx) { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; }
 .pc-wch.ck { color: var(--cz-ink3); }
 .pc-wch.gone { color: var(--pc-amber); border-color: color-mix(in srgb, var(--pc-amberdot) 50%, transparent); }
 .pc .sq { width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; background: var(--pc-prog); flex: none; margin: 0 2px; }
 .pc .bx { width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid var(--cz-ink3); flex: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
 .pc .bx.on { background: var(--pc-prog); border-color: var(--pc-prog); color: var(--cz-card); }
-.pc-via { font-size: var(--fs-2); font-weight: 600; color: var(--cz-ink3); white-space: nowrap; }
+.pc-via { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); white-space: nowrap; line-height: var(--lh-label); }
 .pc-ends { display: inline-flex; justify-content: flex-end; gap: 0; }
 .pc-ib { width: 32px; height: 32px; border-radius: 999px; border: 0; background: transparent; color: var(--cz-ink2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
 .pc-ib.del { color: var(--cz-red); }
 @media (hover: hover) { .pc-ib:hover { background: var(--cz-well); } }
-.pc-mini { height: 30px; padding: 0 10px; border-radius: 999px; font: inherit; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); border: 1px solid var(--cz-hair); background: var(--cz-card); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; cursor: pointer; justify-self: start; }
-.pc-sugh { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: var(--fs-2); color: var(--cz-ink2); background: var(--pc-progbg); }
+.pc-mini { height: 30px; padding: 0 10px; border-radius: 999px; font: inherit; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); border: 1px solid var(--cz-hair); background: var(--cz-card); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; cursor: pointer; justify-self: start; line-height: var(--lh-label); }
+.pc-sugh { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: var(--fs-meta); color: var(--cz-ink2); background: var(--pc-progbg); line-height: var(--lh-meta); }
 .pc-sugh > svg { color: var(--pc-prog); flex: none; }
 .pc-sugh span { flex: 1; }
 .pc-sugh b { color: var(--pc-prog); }
 
 /* the picker (MsB3Pick): a menu under the row's "done when" press */
 .pc-menu { position: absolute; z-index: 6; right: 52px; top: 44px; width: 330px; background: var(--cz-card); border-radius: 18px; box-shadow: var(--cz-sheet), 0 0 0 1px var(--cz-hair); padding: 6px; display: flex; flex-direction: column; }
-.pc-mhd { margin: 0; font-size: var(--fs-1); font-weight: 800; color: var(--cz-ink3); padding: 8px 10px 4px; }
+.pc-mhd { margin: 0; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); padding: 8px 10px 4px; line-height: var(--lh-badge); }
 .pc-mhd.pr { padding-top: 6px; }
-.pc-mi { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 12px; font-size: var(--fs-3); font-weight: 700; color: var(--cz-ink); width: 100%; }
+.pc-mi { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 12px; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); width: 100%; line-height: var(--lh-row); }
 @media (hover: hover) { .pc-mi:hover { background: var(--cz-well); } }
 .pc-mi .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .pc-mi .bx { width: 16px; height: 16px; border-radius: 5px; }
 /* which ◆ stage counts for an initiative whose own workflow has two or more (D99): a quiet press under its row, a press moves to the next */
-.pc-mi.pc-mst { min-height: 32px; padding-left: 36px; font-weight: 600; color: var(--cz-ink3); }
-.pc-ch.pc-mst { font-weight: 600; color: var(--cz-ink3); }
-.pc-mi .r { font-size: var(--fs-2); font-weight: 600; color: var(--cz-ink3); }
-.pc-mi .r.lt { color: var(--pc-amber); font-weight: 700; }
+.pc-mi.pc-mst { min-height: 32px; padding-left: 36px; font-weight: var(--fw-strong); color: var(--cz-ink3); }
+.pc-ch.pc-mst { font-weight: var(--fw-strong); color: var(--cz-ink3); }
+.pc-mi .r { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
+.pc-mi .r.lt { color: var(--pc-amber); font-weight: var(--fw-strong); }
 .pc-msep { display: block; height: 1px; background: var(--cz-hair); margin: 4px 6px; }
 
 /* leaving with changes (MsB5Leave): one question under ← */
 .pc-ask { position: absolute; z-index: 7; left: 0; top: -4px; width: 280px; background: var(--cz-card); border-radius: 18px; box-shadow: var(--cz-sheet), 0 0 0 1px var(--cz-hair); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
-.pc-ask p { margin: 0; font-size: var(--fs-3); font-weight: 800; }
-.pc-ask .t { font-size: var(--fs-2); color: var(--cz-ink2); }
-.pc-ask .t.bad { color: var(--pc-amber); font-weight: 700; box-shadow: none !important; }
+.pc-ask p { margin: 0; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
+.pc-ask .t { font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
+.pc-ask .t.bad { color: var(--pc-amber); font-weight: var(--fw-strong); box-shadow: none !important; }
 .pc-ask .row { display: flex; gap: 8px; margin-top: 4px; }
-.pc-sv { height: 32px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--cz-ink); color: var(--cz-card); font: inherit; font-size: var(--fs-2); font-weight: 700; cursor: pointer; }
+.pc-sv { height: 32px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--cz-ink); color: var(--cz-card); font: inherit; font-size: var(--fs-label); font-weight: var(--fw-strong); cursor: pointer; line-height: var(--lh-label); }
 .pc-sv:disabled { opacity: .45; cursor: default; }
 
 /* the Viewer at its side width (560 px on the Board): a milestone takes two lines, the name over its date and what it waits on */
@@ -125,9 +125,9 @@ button.pc-ln.addl { color: var(--pc-prog); font-weight: 700; width: 100%; }
   .pc-ln .pc-ends { flex: 1 1 100%; }
   .pc-warn { padding: 0 10px 8px 10px; }
   .pc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 10px 12px; }
-  .pc-chips .dw { flex-basis: 100%; margin: 0; font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink3); }
-  .pc-chips .or { font-size: var(--fs-2); color: var(--cz-ink3); font-weight: 700; }
-  .pc-ch { height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cz-ink) 14%, transparent); background: var(--cz-card); font: inherit; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; max-width: 100%; }
+  .pc-chips .dw { flex-basis: 100%; margin: 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
+  .pc-chips .or { font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); line-height: var(--lh-label); }
+  .pc-ch { height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cz-ink) 14%, transparent); background: var(--cz-card); font: inherit; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; max-width: 100%; line-height: var(--lh-label); }
   .pc-ch .sq { background: transparent; border: 1.5px solid currentColor; }
   .pc-ch[aria-pressed="true"] { background: var(--pc-progbg); border-color: color-mix(in srgb, var(--pc-prog) 35%, transparent); color: var(--pc-prog); }
   .pc-ch[aria-pressed="true"] .sq { background: var(--pc-prog); }

package/workspace/public/pm/ready-lib.css

@@ -2,13 +2,13 @@
  * pm/cozy.css; every class starts with rl-. */
 .rl { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
 .rl-lead { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--cz-bluebg); border: 1px solid color-mix(in srgb, var(--cz-blueink) 18%, transparent); }
-.rl-lead p { margin: 0; flex: 1; min-width: 0; font-size: var(--fs-4); line-height: 1.45; color: var(--cz-ink2); }
-.rl-lead b { color: var(--cz-ink); font-weight: 800; }
+.rl-lead p { margin: 0; flex: 1; min-width: 0; font-size: var(--fs-body); line-height: 1.45; color: var(--cz-ink2); }
+.rl-lead b { color: var(--cz-ink); font-weight: var(--fw-strong); }
 .rl-sp { flex: none; color: var(--cz-blueink); margin-top: 3px; display: inline-flex; }
 .rl-ok { all: unset; box-sizing: border-box; cursor: pointer; flex: none; width: 44px; height: 44px; border-radius: 999px; background: var(--cz-blue); color: var(--cz-onsolid); display: inline-flex; align-items: center; justify-content: center; }
 .rl-ok[disabled] { opacity: .45; cursor: default; }
-.rl-h { margin: 6px 0 0; font-size: var(--fs-4); font-weight: 800; color: var(--cz-ink); }
-.rl-h span { font-weight: 700; color: var(--cz-ink3); }
+.rl-h { margin: 6px 0 0; font-size: var(--fs-section); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-section); }
+.rl-h span { font-weight: var(--fw-strong); color: var(--cz-ink3); }
 .rl-card { background: var(--cz-card); border: 1px solid var(--cz-hair); border-radius: 16px; padding: 2px 14px; display: flex; flex-direction: column; }
 .rl-row { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 10px 0; width: 100%; }
 .rl-card > * + * { border-top: 1px solid var(--cz-hair); }
@@ -16,8 +16,8 @@
 .rl-fold > svg { flex: none; color: var(--cz-ink3); }
 .rl-fold[aria-expanded="true"] > svg { transform: rotate(180deg); }
 .rl-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
-.rl-t b { font-size: var(--fs-4); font-weight: 800; }
-.rl-t small { font-size: var(--fs-2); line-height: 1.4; color: var(--cz-ink3); }
+.rl-t b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
+.rl-t small { font-size: var(--fs-meta); line-height: 1.4; color: var(--cz-ink3); }
 .rl-pk { color: var(--cz-blueink); }
 .rl-av { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--cz-bluebg); color: var(--cz-blueink); display: inline-flex; align-items: center; justify-content: center; }
 .rl-sw { all: unset; box-sizing: border-box; cursor: pointer; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--cz-well2, var(--cz-hair)); position: relative; }

package/workspace/public/pm/sort-order.css

@@ -1,7 +1,7 @@
 /* pm/sort-order.css — the sort menu and the header grips of Home and the Board (pm/sort-order.js; canvas SoAHomePhone, SoADesk). Loaded once
  * by sort-order.js mount. Token variables only (cozy.css). The grip itself and the lifted row are prog-order.css. */
 .so-menu { position: fixed; z-index: 80; background: var(--cz-card); color: var(--cz-ink); border-radius: 18px; box-shadow: 0 24px 60px -24px rgba(42,46,53,.45), 0 0 0 1px var(--cz-hair); padding: 8px; display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; font-family: var(--cz-font, inherit); }
-.so-mi { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 12px; border: 0; background: none; font: inherit; font-size: var(--fs-3); font-weight: 600; color: var(--cz-ink); text-align: left; cursor: pointer; }
+.so-mi { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 12px; border: 0; background: none; font: inherit; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); text-align: left; cursor: pointer; line-height: var(--lh-row); }
 .so-mi span { flex: 1; }
 .so-mi svg { width: 16px; height: 16px; color: var(--cz-blueink); }
 .so-mi:hover, .so-mi.on { background: var(--cz-well); }

package/workspace/public/pm/split-merge.css

@@ -8,13 +8,13 @@ b:has(> .sm-nm), span:has(> .sm-nm) { display: flex; align-items: center; min-wi
 
 /* the card under the summary (XsmA1Suggest) */
 .sm-card { background: var(--sm-progbg); border-radius: 20px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
-.sm-h { display: flex; align-items: center; gap: 8px; color: var(--sm-prog); font-size: var(--fs-3); }
-.sm-h b { font-weight: 800; }
+.sm-h { display: flex; align-items: center; gap: 8px; color: var(--sm-prog); font-size: var(--fs-body); line-height: var(--lh-body); }
+.sm-h b { font-weight: var(--fw-strong); }
 .sm-h.q { color: var(--cz-ink3); }
-.sm-why { margin: 0; font-size: var(--fs-2); line-height: 1.5; color: var(--cz-ink2); }
-.sm-pl { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--cz-card); font-size: var(--fs-2); color: var(--cz-ink3); font-weight: 600; }
+.sm-why { margin: 0; font-size: var(--fs-meta); line-height: 1.5; color: var(--cz-ink2); }
+.sm-pl { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--cz-card); font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); line-height: var(--lh-label); }
 .sm-pl svg { color: var(--sm-prog); flex: none; }
-.sm-pl b { color: var(--cz-ink); font-weight: 800; }
+.sm-pl b { color: var(--cz-ink); font-weight: var(--fw-strong); }
 .sm-acts { display: flex; justify-content: flex-end; gap: 6px; }
 .sm-ib { all: unset; box-sizing: border-box; cursor: pointer; width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--cz-ink2); background: var(--cz-card); }
 .sm-ib.ok { background: var(--cz-ink); color: var(--cz-card); }
@@ -24,34 +24,34 @@ b:has(> .sm-nm), span:has(> .sm-nm) { display: flex; align-items: center; min-wi
 
 /* the merged summary (XsmA7Closed) */
 .sm-gone { background: var(--cz-well); border-radius: 20px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
-.sm-gone p { margin: 0; font-size: var(--fs-2); line-height: 1.5; color: var(--cz-ink2); }
-.sm-gone .sm-lk { all: unset; cursor: pointer; color: var(--cz-blueink); font-weight: 700; }
+.sm-gone p { margin: 0; font-size: var(--fs-meta); line-height: 1.5; color: var(--cz-ink2); }
+.sm-gone .sm-lk { all: unset; cursor: pointer; color: var(--cz-blueink); font-weight: var(--fw-strong); }
 
 /* the split editor and the merge check (XsmA2Split, XsmA5MergeCheck) */
 .sm-v { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 8px; min-height: 100%; box-sizing: border-box; }
 .sm-nf { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 12px 0 14px; border-radius: 16px; background: var(--cz-well); color: var(--cz-ink2); }
-.sm-nf input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: var(--fs-4); font-weight: 800; color: var(--cz-ink); outline: none; }
+.sm-nf input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); outline: none; line-height: var(--lh-row); }
 .sm-sg, .sm-sg2 { display: inline-flex; color: var(--sm-prog); }
 .sm-sg2 { margin-left: 6px; vertical-align: -1px; }
-.sm-keep { margin: 0 4px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); line-height: 1.6; }
+.sm-keep { margin: 0 4px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: 1.6; }
 .sm-st { display: inline-flex; align-items: center; gap: 2px; position: relative; }
 .sm-st select { all: unset; cursor: pointer; font: inherit; color: var(--cz-ink2); padding-right: 2px; }
 .sm-list { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--cz-hair); border-radius: 18px; padding: 6px; }
-.sm-gh { display: flex; align-items: center; gap: 10px; padding: 8px 8px 4px; font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink3); }
+.sm-gh { display: flex; align-items: center; gap: 10px; padding: 8px 8px 4px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
 .sm-gh .n { margin-left: auto; color: var(--cz-blueink); }
 .sm-pk { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px; border-radius: 12px; cursor: pointer; }
 .sm-pk.on { background: var(--cz-bluebg); }
 .sm-t { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
-.sm-t b { font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.sm-t span { margin-left: auto; font-size: var(--fs-2); color: var(--cz-ink3); font-weight: 600; white-space: nowrap; }
+.sm-t b { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-label); }
+.sm-t span { margin-left: auto; font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); white-space: nowrap; line-height: var(--lh-label); }
 .sm-cb { all: unset; box-sizing: border-box; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--cz-ink3); background: var(--cz-card); display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--cz-onsolid); cursor: pointer; }
 .sm-cb.on { background: var(--cz-blueink); border-color: var(--cz-blueink); }
 .sm-cb.some { border-color: var(--cz-blueink); }
 .sm-cb.some i { width: 9px; height: 2px; border-radius: 1px; background: var(--cz-blueink); }
 .sm-ki { display: inline-flex; color: var(--cz-ink3); }
-.sm-q { margin: 8px; font-size: var(--fs-2); color: var(--cz-ink3); }
+.sm-q { margin: 8px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .sm-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 2px; }
-.sm-cnt { flex: 1; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); }
+.sm-cnt { flex: 1; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
 .sm-foot .sm-ib { width: 44px; height: 44px; box-shadow: 0 0 0 1px var(--cz-hair); }
 .sm-foot .sm-ib.ok { box-shadow: none; }
 .sm-mc { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--cz-hair); }
@@ -64,14 +64,14 @@ b:has(> .sm-nm), span:has(> .sm-nm) { display: flex; align-items: center; min-wi
 .sm-mc.gone .sm-vi { background: var(--cz-card); color: var(--cz-ink3); }
 .sm-mid { display: flex; align-items: center; justify-content: center; gap: 10px; margin: -4px 0; color: var(--cz-ink3); }
 .sm-mid .sm-ib { box-shadow: 0 0 0 1px var(--cz-hair); }
-.sm-r { margin: -2px 0 0 4px; font-size: var(--fs-2); color: var(--cz-ink3); font-weight: 600; }
+.sm-r { margin: -2px 0 0 4px; font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); line-height: var(--lh-label); }
 .sm-dfs { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
 .sm-df { display: flex; align-items: center; gap: 10px; }
-.sm-dl { width: 90px; font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink3); }
+.sm-dl { width: 90px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
 .sm-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--cz-well); gap: 2px; }
-.sm-seg button { all: unset; cursor: pointer; height: 32px; padding: 0 14px; border-radius: 999px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); display: inline-flex; align-items: center; }
+.sm-seg button { all: unset; cursor: pointer; height: 32px; padding: 0 14px; border-radius: 999px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); display: inline-flex; align-items: center; line-height: var(--lh-label); }
 .sm-seg button[aria-checked="true"] { background: var(--cz-card); color: var(--cz-ink); box-shadow: 0 1px 3px rgba(42,46,53,.12); }
-.sm-dn { margin: 0; display: flex; gap: 8px; align-items: center; font-size: var(--fs-2); color: var(--cz-ink2); line-height: 1.45; }
+.sm-dn { margin: 0; display: flex; gap: 8px; align-items: center; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: 1.45; }
 .sm-dn svg { color: var(--cz-ink3); flex: none; }
 /* a phone: the Viewer is the full-screen sheet; the touch targets grow to 44 px */
 @media (max-width: 760px) { .sm-ib { width: 44px; height: 44px; } .sm-pk { min-height: 48px; } .sm-card { border-radius: 18px; } }

package/workspace/public/pm/task-card.css

@@ -1,6 +1,6 @@
 /* pm/task-card.css — one task, edited where it opens (task-card.js; canvas OvViewers "Task", over ov-view.css's facts card and where row).
  * Over cozy.css's tokens, so the dark theme follows. Popovers open right under the control that opened them. */
-.tkc { display: flex; flex-direction: column; gap: 16px; padding: 6px 2px 18px; font-size: var(--fs-3); color: var(--cz-ink); }
+.tkc { display: flex; flex-direction: column; gap: 16px; padding: 6px 2px 18px; font-size: var(--fs-body); color: var(--cz-ink); line-height: var(--lh-body); }
 .tkc button { font: inherit; color: inherit; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; }
 .tkc button:disabled { cursor: default; }
 .tkc svg { flex: none; }
@@ -10,26 +10,26 @@
 .tkc .seg { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
 .tkc .seg button { width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--cz-ink3); }
 .tkc .seg button:hover { color: var(--cz-ink); background: var(--cz-well); }
-.tkc .seg button.on { width: auto; padding: 0 12px 0 9px; background: var(--cz-bluebg); color: var(--cz-blueink); font-weight: 800; font-size: var(--fs-3); box-shadow: inset 0 0 0 1.5px var(--cz-blue); }
+.tkc .seg button.on { width: auto; padding: 0 12px 0 9px; background: var(--cz-bluebg); color: var(--cz-blueink); font-weight: var(--fw-strong); font-size: var(--fs-row); box-shadow: inset 0 0 0 1.5px var(--cz-blue); line-height: var(--lh-row); }
 .tkc .seg button.on.i-done { background: var(--cz-okbg); color: var(--cz-ok); box-shadow: inset 0 0 0 1.5px var(--cz-ok); }
 .tkc .seg button.on.i-wont, .tkc .seg button.on.i-arch { background: var(--cz-well2); color: var(--cz-ink2); box-shadow: inset 0 0 0 1.5px var(--cz-hair); }
 .tkc .ovf .anc { margin-left: -8px; }
-.tkc .due-b, .tkc .own-b { min-height: 30px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-3); font-weight: 700; color: var(--cz-ink); }
+.tkc .due-b, .tkc .own-b { min-height: 30px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-row); }
 .tkc .due-b:hover, .tkc .due-b.open, .tkc .own-b:hover, .tkc .own-b.open { background: var(--cz-well); }
 .tkc .due-b.open, .tkc .own-b.open { box-shadow: 0 0 0 1.5px var(--cz-blue); }
 .tkc .due-b.none, .tkc .own-b.ghost { width: 30px; padding: 0; justify-content: center; color: var(--cz-ink3); }
-.tkc .ovf .r { font-size: var(--fs-3); font-weight: 700; color: var(--cz-ink3); }
+.tkc .ovf .r { font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-row); }
 .tkc .ovf .r.late { color: var(--cz-risk); }
-.tkc .tkc-pop .av, .tkc .own-b .av { width: 22px; height: 22px; border-radius: 7px; background: var(--cz-well); color: var(--cz-ink2); font-size: var(--fs-1); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
+.tkc .tkc-pop .av, .tkc .own-b .av { width: 22px; height: 22px; border-radius: 7px; background: var(--cz-well); color: var(--cz-ink2); font-size: var(--fs-badge); font-weight: var(--fw-strong); display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: var(--lh-badge); }
 .tkc .own-b:hover .av, .tkc .own-b.open .av { background: var(--cz-card); }
 .tkc .own-b .av.no { background: transparent; border: 1.5px dashed var(--cz-ink3); box-sizing: border-box; }
 
 /* notes, edited in place */
-.tkc .nt { border: 0; outline: 0; resize: none; field-sizing: content; min-height: 48px; border-radius: 12px; padding: 6px 8px; margin: 0 -8px; font: inherit; font-size: var(--fs-3); line-height: 1.55; color: var(--cz-ink); background: transparent; }
+.tkc .nt { border: 0; outline: 0; resize: none; field-sizing: content; min-height: 48px; border-radius: 12px; padding: 6px 8px; margin: 0 -8px; font: inherit; font-size: var(--fs-body); line-height: 1.55; color: var(--cz-ink); background: transparent; }
 .tkc .nt::placeholder { color: var(--cz-ink3); }
 .tkc .nt:hover { background: var(--cz-well); }
 .tkc .nt:focus { background: var(--cz-card); box-shadow: 0 0 0 1.5px var(--cz-blue), 0 0 0 5px var(--cz-bluebg); }
-.tkc .tkc-msg { margin: 0; font-size: var(--fs-3); color: var(--cz-red); }
+.tkc .tkc-msg { margin: 0; font-size: var(--fs-body); color: var(--cz-red); line-height: var(--lh-body); }
 .tkc .tkc-msg:empty { display: none; }
 .tkc .tkc-ib { width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--cz-ink2); }
 .tkc .tkc-ib:hover, .tkc .tkc-ib.open { background: var(--cz-well); }
@@ -38,30 +38,30 @@
 /* popovers: right under the control */
 .tkc .tkc-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 8; background: var(--cz-card); border-radius: 16px; box-shadow: 0 24px 50px -20px rgba(42,46,53,.4), 0 0 0 1px var(--cz-hair); padding: 6px; display: flex; flex-direction: column; min-width: 220px; max-height: 320px; overflow: auto; }
 .tkc .tkc-pop.r { left: auto; right: 0; }
-.tkc .tkc-pop .o { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 10px; font-size: var(--fs-3); font-weight: 600; width: 100%; }
+.tkc .tkc-pop .o { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 10px; font-size: var(--fs-row); font-weight: var(--fw-strong); width: 100%; line-height: var(--lh-row); }
 .tkc .tkc-pop .o:hover, .tkc .tkc-pop .o.hl { background: var(--cz-well); }
 .tkc .tkc-pop .o .k { margin-left: auto; color: var(--cz-blueink); }
-.tkc .tkc-pop .h { margin: 6px 10px 2px; font-size: var(--fs-1); font-weight: 800; color: var(--cz-ink3); text-transform: uppercase; letter-spacing: .04em; }
+.tkc .tkc-pop .h { margin: 6px 10px 2px; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); text-transform: uppercase; letter-spacing: .04em; line-height: var(--lh-badge); }
 .tkc .tkc-pop hr { border: 0; border-top: 1px solid var(--cz-hair); margin: 4px 6px; }
-.tkc .tkc-new input { width: 100%; box-sizing: border-box; height: 38px; border: 0; border-radius: 10px; padding: 0 10px; margin-bottom: 4px; font: inherit; font-size: var(--fs-3); background: var(--cz-well); color: var(--cz-ink); outline: 0; }
+.tkc .tkc-new input { width: 100%; box-sizing: border-box; height: 38px; border: 0; border-radius: 10px; padding: 0 10px; margin-bottom: 4px; font: inherit; font-size: var(--fs-body); background: var(--cz-well); color: var(--cz-ink); outline: 0; line-height: var(--lh-body); }
 .tkc .tkc-new input:focus { box-shadow: 0 0 0 1.5px var(--cz-blue); }
 .tkc .tkc-dp { width: 300px; padding: 12px; }
 .tkc .tkc-dp .two { display: flex; gap: 6px; margin-bottom: 10px; }
 .tkc .tkc-dp .two button { flex: 1; height: 52px; border-radius: 12px; background: var(--cz-well); padding: 6px 10px; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
 .tkc .tkc-dp .two button.on { background: var(--cz-bluebg); box-shadow: inset 0 0 0 1.5px var(--cz-blue); }
-.tkc .tkc-dp .two small { font-size: var(--fs-1); color: var(--cz-ink3); font-weight: 700; }
-.tkc .tkc-dp .two b { font-size: var(--fs-3); }
+.tkc .tkc-dp .two small { font-size: var(--fs-badge); color: var(--cz-ink3); font-weight: var(--fw-strong); line-height: var(--lh-badge); }
+.tkc .tkc-dp .two b { font-size: var(--fs-body); line-height: var(--lh-body); }
 .tkc .tkc-dp .qk { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
-.tkc .tkc-dp .qk button { height: 30px; padding: 0 10px; border-radius: 999px; background: var(--cz-well); font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); display: inline-flex; align-items: center; }
-.tkc .tkc-dp .mh { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-3); font-weight: 800; padding: 0 4px 6px; }
-.tkc .tkc-dp .g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: var(--fs-2); }
-.tkc .tkc-dp .g .h { color: var(--cz-ink3); font-size: var(--fs-1); font-weight: 700; height: 22px; display: flex; align-items: center; justify-content: center; }
-.tkc .tkc-dp .g button { height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 600; text-align: center; }
+.tkc .tkc-dp .qk button { height: 30px; padding: 0 10px; border-radius: 999px; background: var(--cz-well); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); display: inline-flex; align-items: center; line-height: var(--lh-label); }
+.tkc .tkc-dp .mh { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-row); font-weight: var(--fw-strong); padding: 0 4px 6px; line-height: var(--lh-row); }
+.tkc .tkc-dp .g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: var(--fs-meta); line-height: var(--lh-meta); }
+.tkc .tkc-dp .g .h { color: var(--cz-ink3); font-size: var(--fs-badge); font-weight: var(--fw-strong); height: 22px; display: flex; align-items: center; justify-content: center; line-height: var(--lh-badge); }
+.tkc .tkc-dp .g button { height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: var(--fw-strong); text-align: center; }
 .tkc .tkc-dp .g button:hover { background: var(--cz-well); }
 .tkc .tkc-dp .g .m { color: var(--cz-ink3); opacity: .6; }
 .tkc .tkc-dp .g .rg { background: var(--cz-bluebg); border-radius: 0; }
 .tkc .tkc-dp .g .td { box-shadow: inset 0 0 0 1.5px var(--cz-ink3); }
-.tkc .tkc-dp .g .a { background: var(--cz-solid); color: var(--cz-onsolid); font-weight: 800; }
+.tkc .tkc-dp .g .a { background: var(--cz-solid); color: var(--cz-onsolid); font-weight: var(--fw-strong); }
 
 /* the header's check box in the tile's place (cozy-viewer.js `check`) */
 .cz-vw-chk { border: 0; padding: 0; cursor: pointer; background: transparent !important; }
@@ -83,20 +83,20 @@
 }
 /* the ◇ milestone toggle after a divider (feedback batch 11 item 3, canvas XmlA2Flag) */
 .tkc .seg .vr { width: 1px; height: 20px; background: var(--cz-hair); margin: 0 3px; align-self: center; }
-.tkc .seg .ivq-ms.on { width: auto; padding: 0 12px 0 9px; gap: 6px; background: var(--cz-bluebg); color: var(--cz-blueink); font-weight: 800; font-size: var(--fs-3); box-shadow: inset 0 0 0 1.5px var(--cz-blue); }
+.tkc .seg .ivq-ms.on { width: auto; padding: 0 12px 0 9px; gap: 6px; background: var(--cz-bluebg); color: var(--cz-blueink); font-weight: var(--fw-strong); font-size: var(--fs-row); box-shadow: inset 0 0 0 1.5px var(--cz-blue); line-height: var(--lh-row); }
 /* History (batch 12 items 2 and 3, canvas TpA6): what Claude changed with the PM's ✓; folded, hidden at zero */
 .tkc .tkc-h { padding-top: 4px; }
 .tkc .tkc-hh { display: flex; align-items: center; gap: 6px; width: 100%; font: inherit; background: none; border: 0; padding: 6px 0; color: var(--cz-ink); cursor: pointer; text-align: left; }
-.tkc .tkc-hh b { font-size: var(--fs-3); font-weight: 800; }
-.tkc .tkc-hh .n { font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); }
+.tkc .tkc-hh b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
+.tkc .tkc-hh .n { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
 .tkc .tkc-hh svg { margin-left: auto; color: var(--cz-ink3); }
 .tkc .tkc-h ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
 .tkc .tkc-h li { display: flex; align-items: flex-start; gap: 8px; }
 .tkc .tkc-h li .w { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
-.tkc .tkc-h li b { font-size: var(--fs-3); font-weight: 700; }
-.tkc .tkc-h li small { font-size: var(--fs-2); color: var(--cz-ink3); line-height: 1.4; }
+.tkc .tkc-h li b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
+.tkc .tkc-h li small { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: 1.4; }
 .tkc .tkc-hu { width: 30px; height: 30px; border-radius: 999px; border: 0; background: none; color: var(--cz-ink2); display: inline-flex; align-items: center; justify-content: center; flex: none; cursor: pointer; }
 .tkc .tkc-hu:hover { background: var(--cz-well); color: var(--cz-ink); }
 .tkc .seg .ivq-del:hover, .tkc .seg .ivq-del:focus-visible { color: var(--cz-red); background: var(--cz-redbg, transparent); }
 /* one date (batch 18 item 16, StA4Milestone): a milestone's picker names its one day, with no Start and Due tabs */
-.tkc .tkc-dp .one { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px; margin-bottom: 8px; font-size: var(--fs-3); color: var(--cz-ink); }
+.tkc .tkc-dp .one { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px; margin-bottom: 8px; font-size: var(--fs-body); color: var(--cz-ink); line-height: var(--lh-body); }