create-pmos 0.511.0 → 0.513.0

package/workspace/public/pm/load-shapes.css

@@ -36,7 +36,7 @@
 .ls-bd .ls-trk i { position: relative; width: 7px; height: 7px; background: var(--cz-well2); }
 .ls-bd .ls-trk i.ls-tdot { border-radius: 50%; }
 .ls-bd .ls-trk i.on { width: 12px; height: 12px; }
-.ls-slow { margin: 10px 14px 4px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); }
+.ls-slow { margin: 10px 14px 4px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
 @media (max-width: 760px) {
   .ls-bd .ls-bh, .ls-bd .ls-br { grid-template-columns: 1fr; gap: 6px; }
   .ls-bd .ls-bh .ls-stg, .ls-bd .ls-br .ls-trk, .ls-bd .ls-br > .ls-sk:last-child { display: none; }

package/workspace/public/pm/loose-props.css

@@ -3,19 +3,19 @@
 .hv-lhw { position: relative; }
 .hv-lhw.has-chip .hv-lh .nl { margin-right: 64px; }
 .hv-lhw.has-chip .hv-lh .nl:empty { margin-right: 58px; }
-.lp-chip { position: absolute; right: 34px; top: calc(50% + 6px); transform: translateY(-50%); display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 9px 0 7px; border-radius: 999px; border: 1.5px solid var(--cz-blue); background: var(--cz-card); color: var(--cz-blueink); font: inherit; font-size: var(--fs-2); font-weight: 800; cursor: pointer; }
+.lp-chip { position: absolute; right: 34px; top: calc(50% + 6px); transform: translateY(-50%); display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 9px 0 7px; border-radius: 999px; border: 1.5px solid var(--cz-blue); background: var(--cz-card); color: var(--cz-blueink); font: inherit; font-size: var(--fs-label); font-weight: var(--fw-strong); cursor: pointer; line-height: var(--lh-label); }
 .lp-chip:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
 @media (hover: hover) { .lp-chip:hover { background: var(--cz-bluebg); } }
 @media (max-width: 760px) { .lp-chip { height: 32px; } .lp-chip::after { content: ''; position: absolute; inset: -6px; } }
 
 .lp { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 24px; }
-.lp-intro { margin: 2px 0 4px; font-size: var(--fs-2); line-height: 1.5; color: var(--cz-ink2); max-width: 600px; }
-.lp-sec h4 { margin: 8px 0 2px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); }
+.lp-intro { margin: 2px 0 4px; font-size: var(--fs-meta); line-height: 1.5; color: var(--cz-ink2); max-width: 600px; }
+.lp-sec h4 { margin: 8px 0 2px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
 .lp-p { padding: 4px 0; }
 .lp-ph { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; }
 .lp-ph .w, .lp-r .w, .lp-hr .w { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
-.lp-ph b { font-size: var(--fs-3); font-weight: 800; color: var(--cz-ink); }
-.lp-ph small, .lp-r small, .lp-hr small { font-size: var(--fs-2); color: var(--cz-ink2); line-height: 1.4; display: inline-flex; align-items: center; gap: 4px; }
+.lp-ph b { font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-row); }
+.lp-ph small, .lp-r small, .lp-hr small { font-size: var(--fs-meta); color: var(--cz-ink2); line-height: 1.4; display: inline-flex; align-items: center; gap: 4px; }
 .lp-ic { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--cz-blueink); flex: none; margin-top: 1px; }
 .lp-ib { all: unset; box-sizing: border-box; cursor: pointer; width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--cz-ink2); flex: none; }
 .lp-ib.ok { color: var(--cz-blueink); }
@@ -24,31 +24,31 @@
 @media (hover: hover) { .lp-ib:hover { background: var(--cz-well); color: var(--cz-ink); } }
 .lp-rows { display: flex; flex-direction: column; margin: 2px 0 6px 12px; padding-left: 22px; border-left: 2px solid var(--cz-hair); }
 .lp-r { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 3px 0; }
-.lp-r b { font-size: var(--fs-3); font-weight: 600; color: var(--cz-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.lp-r b { font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--lh-row); }
 .lp-r.out b { text-decoration: line-through; color: var(--cz-ink3); }
 .lp-mk { width: 16px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--cz-ink3); margin-left: -4px; }
 .lp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cz-blue); display: inline-block; }
 .lp-late { width: 9px; height: 9px; border-radius: 2px; background: var(--cz-risk); display: inline-block; }
 .lp-tile { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 6px 0 8px; border-radius: 999px; background: var(--cz-well); color: var(--cz-blueink); flex: none; }
-.lp-tile b { font-size: var(--fs-1); font-weight: 800; letter-spacing: .02em; }
+.lp-tile b { font-size: var(--fs-badge); font-weight: var(--fw-strong); letter-spacing: .02em; line-height: var(--lh-badge); }
 .lp-tile.on { box-shadow: 0 0 0 1.5px var(--cz-blue); background: var(--cz-card); }
 .lp-tile.moved { background: var(--cz-bluebg); }
-.lp-more { all: unset; box-sizing: border-box; cursor: pointer; min-height: 36px; padding: 6px 0; font-size: var(--fs-2); font-weight: 700; color: var(--cz-blueink); }
+.lp-more { all: unset; box-sizing: border-box; cursor: pointer; min-height: 36px; padding: 6px 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-blueink); line-height: var(--lh-label); }
 .lp-pick { align-self: flex-end; margin: 0 0 6px; width: min(330px, 100%); background: var(--cz-card); border-radius: 18px; box-shadow: 0 24px 60px -24px rgba(42,46,53,.45), 0 0 0 1px var(--cz-hair); padding: 6px; display: flex; flex-direction: column; }
-.lp-pick p { margin: 8px 10px 4px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); }
-.lp-pick button { all: unset; box-sizing: border-box; cursor: pointer; min-height: 44px; padding: 6px 10px; border-radius: 12px; display: flex; align-items: center; gap: 10px; font-size: var(--fs-3); font-weight: 700; color: var(--cz-ink); }
+.lp-pick p { margin: 8px 10px 4px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
+.lp-pick button { all: unset; box-sizing: border-box; cursor: pointer; min-height: 44px; padding: 6px 10px; border-radius: 12px; display: flex; align-items: center; gap: 10px; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-row); }
 .lp-pick button .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .lp-pick button[aria-checked="true"] { background: var(--cz-well); }
 .lp-pick button[aria-checked="true"] svg { color: var(--cz-blueink); }
-.lp-pick button.nw { color: var(--cz-ink2); font-weight: 600; }
+.lp-pick button.nw { color: var(--cz-ink2); font-weight: var(--fw-strong); }
 @media (hover: hover) { .lp-pick button:hover { background: var(--cz-well); } }
-.lp-tl { width: 26px; height: 26px; border-radius: 8px; background: var(--cz-bluebg); color: var(--cz-blueink); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-1); font-weight: 800; flex: none; }
+.lp-tl { width: 26px; height: 26px; border-radius: 8px; background: var(--cz-bluebg); color: var(--cz-blueink); 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); }
 .lp-pick .nw .lp-tl { background: none; color: var(--cz-ink3); }
 .lp-hist { margin-top: 8px; border-top: 1px solid var(--cz-hair); padding-top: 6px; }
-.lp-hist summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); list-style: none; }
+.lp-hist summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); list-style: none; line-height: var(--lh-label); }
 .lp-hist summary::-webkit-details-marker { display: none; }
 .lp-hist summary:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 1px; border-radius: 8px; }
 .lp-hr { display: flex; align-items: center; gap: 8px; min-height: 44px; }
-.lp-hr b { font-size: var(--fs-3); font-weight: 700; color: var(--cz-ink); }
+.lp-hr b { font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-row); }
 .lp-hr.undone b { color: var(--cz-ink3); }
 @media (max-width: 760px) { .lp { padding: 0 12px 24px; } .lp-ib { width: 40px; height: 40px; } .lp-rows { margin-left: 4px; padding-left: 12px; } }

package/workspace/public/pm/metric-drafts.css

@@ -6,38 +6,38 @@
 /* the proposal: a dashed card, Claude's blue */
 .md-card { border: 1px dashed color-mix(in srgb, var(--cz-blueink) 45%, transparent); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
   background: linear-gradient(100deg, var(--cz-bluebg) 0%, var(--cz-card) 60%); color: var(--cz-ink); }
-.md-hd { display: flex; align-items: center; gap: 8px; font-size: var(--fs-3); color: var(--cz-blueink); min-width: 0; }
-.md-hd b { font-weight: 800; white-space: nowrap; }
+.md-hd { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); color: var(--cz-blueink); min-width: 0; line-height: var(--lh-body); }
+.md-hd b { font-weight: var(--fw-strong); white-space: nowrap; }
 .md-sp { display: inline-flex; flex: none; }
-.md-src { margin-left: auto; font-size: var(--fs-2); font-weight: 600; color: var(--cz-ink3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.md-gl { margin: 0; font-size: var(--fs-4); font-weight: 800; line-height: 1.35; }
+.md-src { margin-left: auto; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--lh-label); }
+.md-gl { margin: 0; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: 1.35; }
 .md-cps { display: flex; flex-wrap: wrap; gap: 6px; }
-.md-cp { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); background: var(--cz-card); border: 1px solid var(--cz-hair); border-radius: 999px; padding: 3px 10px; }
+.md-cp { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); background: var(--cz-card); border: 1px solid var(--cz-hair); border-radius: 999px; padding: 3px 10px; line-height: var(--lh-label); }
 .md-dm { width: 9px; height: 9px; transform: rotate(45deg); border-radius: 3px; border: 2px solid var(--pp-prog, var(--cz-ink3)); box-sizing: border-box; flex: none; }
-.md-pill { display: inline-flex; align-items: center; max-width: 100%; font-size: var(--fs-1); font-weight: 800; border-radius: 999px; padding: 2px 8px; white-space: nowrap; background: var(--cz-riskbg); color: var(--cz-risk); }
+.md-pill { display: inline-flex; align-items: center; max-width: 100%; font-size: var(--fs-badge); font-weight: var(--fw-strong); border-radius: 999px; padding: 2px 8px; white-space: nowrap; background: var(--cz-riskbg); color: var(--cz-risk); line-height: var(--lh-badge); }
 
 /* Built from: Now and Target */
 .md-bt { display: flex; flex-direction: column; }
-.md-ru { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 150px); gap: 10px; align-items: center; font-size: var(--fs-3); padding: 7px 0; border-top: 1px solid var(--cz-hair); }
-.md-ru.q { border-top: 0; padding-top: 0; font-size: var(--fs-2); color: var(--cz-ink3); }
-.md-ru.q span:first-child { font-weight: 800; }
-.md-ru b { font-weight: 800; }
+.md-ru { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 150px); gap: 10px; align-items: center; font-size: var(--fs-body); padding: 7px 0; border-top: 1px solid var(--cz-hair); line-height: var(--lh-body); }
+.md-ru.q { border-top: 0; padding-top: 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.md-ru.q span:first-child { font-weight: var(--fw-strong); }
+.md-ru b { font-weight: var(--fw-strong); }
 .md-ru .md-pill { white-space: normal; }
 
 /* the success measure's rows: what it is, Now, Target */
 .md-ms { display: flex; flex-direction: column; }
-.md-mr { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 110px); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--cz-hair); font-size: var(--fs-3); }
+.md-mr { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 110px); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--cz-hair); font-size: var(--fs-body); line-height: var(--lh-body); }
 .md-mr:first-child { border-top: 0; padding-top: 0; }
 .md-nm { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-.md-nm b { font-weight: 800; }
-.md-nm small { font-size: var(--fs-2); color: var(--cz-ink3); }
-.md-role { font-size: var(--fs-1); font-weight: 800; color: var(--cz-ink3); }
+.md-nm b { font-weight: var(--fw-strong); }
+.md-nm small { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.md-role { font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
 .md-now { color: var(--cz-ink2); }
-.md-to { font-weight: 800; }
+.md-to { font-weight: var(--fw-strong); }
 
 /* the why and the presses */
 .md-ft { display: flex; align-items: center; gap: 6px; }
-.md-why { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-2); line-height: 1.45; color: var(--cz-ink3); }
+.md-why { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-meta); line-height: 1.45; color: var(--cz-ink3); }
 .md-why:empty { visibility: hidden; }
 .md-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); flex: none; }
 .md-ib.solid { background: var(--cz-ink); color: var(--cz-card); }
@@ -54,13 +54,13 @@
 .md-kept-i { display: flex; align-items: flex-start; gap: 6px; }
 .md-kept-i .md-folds { flex: 1; min-width: 0; }
 .md-kept-i > .md-ib { margin-top: 6px; }
-.md-ok { display: inline-flex; align-items: center; font-size: var(--fs-1); font-weight: 800; border-radius: 999px; padding: 2px 8px; white-space: nowrap; background: var(--cz-okbg); color: var(--cz-ok); }
+.md-ok { display: inline-flex; align-items: center; font-size: var(--fs-badge); font-weight: var(--fw-strong); border-radius: 999px; padding: 2px 8px; white-space: nowrap; background: var(--cz-okbg); color: var(--cz-ok); line-height: var(--lh-badge); }
 .md-list { display: flex; flex-direction: column; gap: 2px; }
 .md-lr { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; }
 .md-mk { width: 8px; height: 8px; border-radius: 50%; background: var(--cz-dot-ok); flex: none; margin-top: 6px; }
 .md-w { display: flex; flex-direction: column; min-width: 0; }
-.md-w b { font-size: var(--fs-3); font-weight: 800; }
-.md-w span { font-size: var(--fs-2); color: var(--cz-ink3); }
+.md-w b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
+.md-w span { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 
 /* the wide Viewer (.cz-vw-w2): the part first in the panel sits above the summary, in its column */
 .cz-vw-w2 .cz-vw-body > .md-top { grid-column: 1; max-width: none; }
@@ -94,5 +94,5 @@
 .md-ed { display: flex; flex-direction: column; gap: 10px; }
 .md-er { display: flex; flex-direction: column; gap: 4px; }
 .md-ef { display: grid; grid-template-columns: minmax(0, 110px) minmax(0, 1fr); gap: 6px; align-items: center; }
-.md-fld { box-sizing: border-box; width: 100%; min-width: 0; height: 32px; border: 1px solid var(--cz-hair); border-radius: 10px; padding: 0 9px; font: inherit; font-size: var(--fs-3); font-weight: 700; background: var(--cz-card); color: var(--cz-ink); }
+.md-fld { box-sizing: border-box; width: 100%; min-width: 0; height: 32px; border: 1px solid var(--cz-hair); border-radius: 10px; padding: 0 9px; font: inherit; font-size: var(--fs-row); font-weight: var(--fw-strong); background: var(--cz-card); color: var(--cz-ink); line-height: var(--lh-row); }
 .md-fld:focus { outline: 2px solid color-mix(in srgb, var(--cz-blueink) 45%, transparent); outline-offset: 0; border-color: var(--cz-blueink); }

package/workspace/public/pm/ms-suggest.css

@@ -3,9 +3,9 @@
  * Quiet: no motion. Every class starts with msg-. */
 .msg-box, .msg-list { --msg-prog: var(--pp-prog, var(--cz-c-6b4fa3)); --msg-progbg: var(--pp-progbg, rgba(107,79,163,.10)); }
 .msg-box { border: 1px dashed color-mix(in srgb, var(--msg-prog) 45%, transparent); border-radius: 16px; overflow: hidden; }
-.msg-hd { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; background: var(--msg-progbg); font-size: var(--fs-2); color: var(--cz-ink2); }
+.msg-hd { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; background: var(--msg-progbg); font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 .msg-ht { flex: 1; min-width: 0; }
-.msg-ht b { color: var(--msg-prog); font-weight: 700; }
+.msg-ht b { color: var(--msg-prog); font-weight: var(--fw-strong); }
 .msg-list { display: flex; flex-direction: column; }
 .msg-r { display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px 10px 12px; }
 .msg-box .msg-r + .msg-r, .msg-box .msg-hd + div .msg-r:first-child { border-top: 1px dashed color-mix(in srgb, var(--msg-prog) 25%, transparent); }
@@ -13,10 +13,10 @@
 .msg-mk { color: var(--msg-prog); display: inline-flex; flex: none; padding-top: 2px; }
 .msg-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
 .msg-h { display: flex; gap: 8px; align-items: baseline; width: 100%; }
-.msg-h b { font-size: var(--fs-3); font-weight: 700; color: var(--cz-ink); flex: 1; min-width: 0; }
-.msg-d { font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); white-space: nowrap; }
-.msg-w { font-size: var(--fs-2); color: var(--cz-ink3); line-height: 1.4; }
-.msg-src { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-1); font-weight: 600; color: var(--cz-ink2); background: var(--cz-well); border-radius: 999px; padding: 2px 8px; }
+.msg-h b { font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); flex: 1; min-width: 0; line-height: var(--lh-row); }
+.msg-d { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); white-space: nowrap; line-height: var(--lh-label); }
+.msg-w { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: 1.4; }
+.msg-src { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink2); background: var(--cz-well); border-radius: 999px; padding: 2px 8px; line-height: var(--lh-badge); }
 .msg-src svg { color: var(--cz-ink3); }
 .msg-gd { width: 7px; height: 7px; transform: rotate(45deg); border-radius: 2px; background: var(--msg-prog); display: inline-block; }
 .msg-ends { display: inline-flex; align-items: center; gap: 2px; flex: none; }
@@ -32,18 +32,18 @@
 .pp-needs .msg-list { background: var(--cz-card); border-radius: 12px; margin-bottom: 4px; }
 
 /* the charter: last checked and Check now (XmsgB, last frame), and the change filled in from the pencil */
-.msg-chk { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2); color: var(--cz-ink3); }
+.msg-chk { display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .msg-chk span { flex: 1; min-width: 0; }
 .msg-chk .msg-ib { width: 28px; height: 28px; }
 .msg-chk .msg-ib.on svg { animation: msg-spin 1.2s linear infinite; }
 @keyframes msg-spin { to { transform: rotate(360deg); } }
 @media (prefers-reduced-motion: reduce) { .msg-chk .msg-ib.on svg { animation: none; } }
-.msg-risk { display: flex; align-items: center; gap: 6px; font-size: var(--fs-2); color: var(--cz-risk); }
+.msg-risk { display: flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--cz-risk); line-height: var(--lh-meta); }
 .msg-risk span { flex: 1; min-width: 0; }
 .msg-risk { margin: 4px 0 0 30px; }
 .msg-risk i { width: 7px; height: 7px; border-radius: 50%; background: var(--pc-amberdot, var(--cz-risk)); flex: none; }
 .msg-risk .pc-ib { width: 28px; height: 28px; }
-.msg-chg { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 0 30px; font-size: var(--fs-2); color: var(--cz-ink2); }
+.msg-chg { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 0 30px; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 .msg-chg svg { color: var(--pp-prog, var(--cz-c-6b4fa3)); flex: none; margin-top: 1px; }
 .pc-lnw.msg-on > .pc-ln { border: 1px dashed color-mix(in srgb, var(--pp-prog, var(--cz-c-6b4fa3)) 45%, transparent); border-radius: 14px; }
 .pc-ms > .msg-chg { margin: 0 0 8px; }

package/workspace/public/pm/next-prompt-ui.js

@@ -0,0 +1,117 @@
+/* pm/next-prompt-ui.js — the chat's suggested next prompt and its Sharper card (batch 26 item 2, design B: canvas NpB, NpBw).
+ *
+ * After a reply ends: up to two cards above the box, the one Claude recommends lit (white, blue ring, blue ✦), the other grey. A tap puts its
+ * text in the box; nothing sends, and the PM sends with the box's own ↑. No ↵, edit or dismiss icon. No card when there is no clear next step.
+ * The cards hide when the PM types or a new reply starts; they have no timeout.
+ * While the PM types a rough prompt (3 or more words), after a 1.5 s pause: a spinner card while Claude sharpens it, then one lit Sharper card.
+ * Its sliders icon opens the style menu: Sharpen as Polish, Prompt engineer (the default) or Your own, and the Sharpen as I type switch.
+ * After a tap on the Sharper card, ↶ in the box puts back what the PM wrote (NpB 5).
+ * Server: GET /api/next-prompt/prefs, POST /api/next-prompt/next and /sharpen (lib/routes-next-prompt.js, through lib/ai-guard.js); the style
+ * and the switch are saved with POST /api/next-prompt/prefs (style, sharpen). Settings › Claude › Sharpen prompts holds the same.
+ *
+ *   nextPromptUi({ el, host, box, redrawFoot }) → { turnEnded(ctx), read(busy), input(value), sent(), open(), undoHtml(), click(target) → bool }
+ *     ctx: { key, asked, reply, initiative?, stage?, title? }   box() → the textarea   redrawFoot() draws the box again (for ↶) */
+const STAR = '<svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" class="np-star"><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/></svg>';
+const SLIDERS = 'M4 7h9M17 7h3M4 17h3M11 17h9M13 4v6M7 14v6', CHECK = 'M5 12l5 5L20 7', UNDO = 'M9 14L4 9l5-5M4 9h11a5 5 0 0 1 0 10h-3', SPIN = 'M12 3a9 9 0 1 1-9 9';
+const ic = (d, w = 16) => `<svg aria-hidden="true" width="${w}" height="${w}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="${d}"/></svg>`;
+const STYLES = [['polish', 'Polish', 'Clearer and shorter, your meaning kept'], ['engineer', 'Prompt engineer', 'Builds the best prompt for the job'], ['own', 'Your own', 'Your wording rules, written once in Settings']];
+const PAUSE = 1500;
+export const roughText = (t) => { const s = String(t || '').trim(); return !s.startsWith('/') && s.length >= 12 && s.split(/\s+/).filter(Boolean).length >= 3; };
+
+export function nextPromptUi({ el, host, box, redrawFoot }) {
+  const esc = host.esc;
+  const N = { mode: null, cards: [], sharp: null, menu: false, prefs: null, seq: 0, timer: null, ctx: null, orig: null, filled: null, sent: null };
+  const wrap = document.createElement('div');
+  wrap.className = 'np'; wrap.id = 'hmNp'; wrap.hidden = true;
+  const foot = el.querySelector('#hmFoot');
+  foot.parentNode.insertBefore(wrap, foot);
+
+  const loadPrefs = () => host.pmGet('/api/next-prompt/prefs').then((r) => { if (r && r.ok) { N.prefs = r; if (!r.sharpen && N.mode !== 'cards') clear(); else draw(); } }).catch(() => {});
+  loadPrefs();
+  document.addEventListener('pmos:prompt-prefs', loadPrefs);   // Settings › Claude changed them
+
+  function clear() { N.seq++; clearTimeout(N.timer); N.mode = null; N.cards = []; N.sharp = null; N.menu = false; draw(); }
+  function draw() {
+    let html = '';
+    if (N.mode === 'cards' && N.cards.length) {
+      html = `<div class="np-list" role="group" aria-label="Suggested next prompts">${N.cards.map((c, i) => `<button type="button" class="np-card${c.rec ? ' rec' : ''}" data-np-use="${i}" aria-label="Use this prompt: ${esc(c.text)}"${c.rec ? ' title="Claude recommends this one"' : ''}>${STAR}<span class="np-t">${esc(c.text)}</span></button>`).join('')}</div>`;
+    } else if (N.mode === 'spin') {
+      html = `<div class="np-spin" role="status" aria-label="Claude is sharpening your prompt"><span class="np-sp">${ic(SPIN, 20)}</span><span class="np-sk"><i></i><i></i></span></div>`;
+    } else if (N.mode === 'sharp' && N.sharp) {
+      const P = N.prefs || {}, st = P.style || 'engineer';
+      const menu = N.menu ? `<div class="np-menu" role="menu" aria-label="Style of sharper prompts" data-esc-layer><p class="np-mh">Sharpen as</p>${STYLES.map(([k, l, d]) => `<button type="button" role="menuitemradio" aria-checked="${st === k}" class="np-mi" data-np-voice="${k}"><span class="np-ck">${st === k ? ic(CHECK) : ''}</span><span><b>${esc(l)}</b><em>${esc(k === 'own' && !P.rules ? 'Write your rules in Settings first' : d)}</em></span></button>`).join('')}`
+        + `<span class="np-sep" role="separator"></span><button type="button" role="menuitemcheckbox" class="np-mi np-swr" aria-checked="${!!P.sharpen}" data-np-sw><b>Sharpen as I type</b><span class="np-sw${P.sharpen ? ' on' : ''}" aria-hidden="true"><i></i></span></button></div>` : '';
+      html = `<div class="np-card rec np-sh"><button type="button" class="np-use" data-np-sharp aria-label="Use the sharper prompt: ${esc(N.sharp)}" title="Claude sharpened your prompt">${STAR}<span class="np-t">${esc(N.sharp)}</span></button>`
+        + `<button type="button" class="np-ib" data-np-menu aria-haspopup="menu" aria-expanded="${N.menu}" aria-label="Style of sharper prompts" title="Style of sharper prompts">${ic(SLIDERS)}</button>${menu}</div>`;
+    }
+    if (wrap.__h !== html) { wrap.__h = html; wrap.innerHTML = html; }
+    wrap.hidden = !html;
+  }
+  function fill(text, keepOrig) {
+    const ta = box(); if (!ta) return;
+    N.orig = keepOrig && ta.value.trim() && ta.value !== text ? ta.value : null;
+    N.filled = text; ta.value = text;
+    clear(); redrawFoot();
+    const t2 = box(); if (t2) { t2.dispatchEvent(new Event('np-grow')); t2.focus(); t2.setSelectionRange(t2.value.length, t2.value.length); }
+  }
+  async function sharpen(value) {
+    const my = ++N.seq;
+    N.mode = 'spin'; N.sharp = null; draw();
+    const c = N.ctx || {};
+    const r = await host.pmPost('/api/next-prompt/sharpen', { key: c.key || '', text: value, reply: c.reply || '', initiative: c.initiative || '', title: c.title || '' }).catch(() => null);
+    const ta = box();
+    if (my !== N.seq || !ta || ta.value !== value) return;   // the PM typed on, or sent: this answer is for words no longer in the box
+    if (r && r.ok && r.text) { N.mode = 'sharp'; N.sharp = r.text; } else { N.mode = null; }
+    draw();
+  }
+  async function save(key, value) {
+    const r = await host.pmPost('/api/next-prompt/prefs', { key, value }).catch(() => null);
+    if (!(r && r.ok)) { host.toast((r && r.error) || 'Not saved.'); return; }
+    await loadPrefs();
+    document.dispatchEvent(new CustomEvent('pmos:prompt-prefs-saved', { detail: { key, value } }));
+  }
+
+  return {
+    /** A reply ended: ask for the next prompts, unless the PM is already typing. */
+    async turnEnded(ctx) {
+      N.ctx = ctx;
+      const ta = box();
+      if (!N.prefs || !N.prefs.next || !ctx || !ctx.reply || (ta && ta.value.trim())) return;
+      const my = ++N.seq; clearTimeout(N.timer);
+      const r = await host.pmPost('/api/next-prompt/next', ctx).catch(() => null);
+      const t2 = box();
+      if (my !== N.seq || (t2 && t2.value.trim())) return;
+      N.cards = r && r.ok && Array.isArray(r.cards) ? r.cards.slice(0, 2) : [];
+      N.mode = N.cards.length ? 'cards' : null; N.menu = false; draw();
+    },
+    /** Each read of the conversation: a new turn at work hides the cards. */
+    read(busy, ctx) { if (ctx) N.ctx = { ...(N.ctx || {}), ...ctx }; if (busy && N.mode) clear(); },
+    input(value) {
+      if (N.orig != null && !value.trim()) { N.orig = null; redrawFoot(); }
+      if (N.mode === 'cards' || N.mode === 'sharp' || N.mode === 'spin') { N.seq++; N.mode = null; N.menu = false; draw(); }
+      clearTimeout(N.timer);
+      if (!N.prefs || !N.prefs.sharpen || value === N.filled || !roughText(value)) return;
+      N.timer = setTimeout(() => { const ta = box(); if (ta && ta.value === value) sharpen(value); }, PAUSE);
+    },
+    sent() { N.orig = null; N.filled = null; clear(); },
+    open() { N.ctx = null; N.orig = null; N.filled = null; clear(); },
+    undoHtml: () => (N.orig != null ? `<button type="button" class="hm-tool np-undo" data-np-undo aria-label="Back to what I wrote" title="Back to what I wrote">${ic(UNDO)}</button>` : ''),
+    /** A click inside the chat: true when it was one of ours. */
+    click(b) {
+      if (!b) return false;
+      if ('npUse' in b.dataset) { const c = N.cards[Number(b.dataset.npUse)]; if (c) fill(c.text, false); return true; }
+      if ('npSharp' in b.dataset) { if (N.sharp) fill(N.sharp, true); return true; }
+      if ('npUndo' in b.dataset) { const ta = box(); if (ta && N.orig != null) { const o = N.orig; N.orig = null; N.filled = null; ta.value = o; redrawFoot(); const t2 = box(); if (t2) { t2.dispatchEvent(new Event('np-grow')); t2.focus(); } } return true; }
+      if ('npMenu' in b.dataset) { N.menu = !N.menu; draw(); if (N.menu) { const f = wrap.querySelector('.np-mi'); if (f) f.focus(); } return true; }
+      if (b.dataset.npVoice) {
+        const k = b.dataset.npVoice;
+        if (k === 'own' && !(N.prefs && N.prefs.rules)) { N.menu = false; draw(); import('./cozy-settings.js').then((M) => M.openSettings('claude')).catch(() => {}); return true; }
+        N.menu = false; save('style', k).then(() => { const ta = box(); if (ta && roughText(ta.value)) sharpen(ta.value); });
+        return true;
+      }
+      if ('npSw' in b.dataset) { const on = !(N.prefs && N.prefs.sharpen); save('sharpen', on ? 'on' : 'off').then(() => { if (!on) clear(); else draw(); }); return true; }
+      return false;
+    },
+    escape() { if (!N.menu) return false; N.menu = false; draw(); const m = wrap.querySelector('[data-np-menu]'); if (m) m.focus(); return true; },
+  };
+}

package/workspace/public/pm/ov-view.css

@@ -1,25 +1,25 @@
 /* pm/ov-view.css — the parts every object Viewer shares (feedback batch 6 item 1b; canvas OvViewers, OvReport): the facts card, a quiet
  * label over a block of words, the clamped description with its open icon, and the one "where it sits" row. Over cozy.css's tokens, so the
  * dark theme follows. task-card.js, tk-view.js and the goal Viewer (premium-insights.js) load it. */
-.ovf { border-radius: 18px; box-shadow: inset 0 0 0 1px var(--cz-hair); background: var(--cz-card); padding: 14px 16px; display: grid; grid-template-columns: max-content 1fr; column-gap: 18px; row-gap: 6px; align-items: center; font-size: var(--fs-3); }
-.ovf > .k { color: var(--cz-ink3); font-size: var(--fs-2); font-weight: 600; min-height: 30px; display: flex; align-items: center; }
-.ovf > .v { min-width: 0; min-height: 30px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 700; color: var(--cz-ink); }
-.ovf > .v .late { color: var(--cz-risk); font-weight: 700; }
-.ovf > .foot { grid-column: 1 / -1; margin: 10px 0 0; font-size: var(--fs-2); color: var(--cz-ink3); font-weight: 600; }
-.ovf .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; }
+.ovf { border-radius: 18px; box-shadow: inset 0 0 0 1px var(--cz-hair); background: var(--cz-card); padding: 14px 16px; display: grid; grid-template-columns: max-content 1fr; column-gap: 18px; row-gap: 6px; align-items: center; font-size: var(--fs-body); line-height: var(--lh-body); }
+.ovf > .k { color: var(--cz-ink3); font-size: var(--fs-label); font-weight: var(--fw-strong); min-height: 30px; display: flex; align-items: center; line-height: var(--lh-label); }
+.ovf > .v { min-width: 0; min-height: 30px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: var(--fw-strong); color: var(--cz-ink); }
+.ovf > .v .late { color: var(--cz-risk); font-weight: var(--fw-strong); }
+.ovf > .foot { grid-column: 1 / -1; margin: 10px 0 0; font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); line-height: var(--lh-label); }
+.ovf .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); }
 .ovf .av.j { border-radius: 50%; background: var(--cz-okbg); color: var(--cz-ok); }
 .ovf .av.no { background: transparent; border: 1.5px dashed var(--cz-ink3); box-sizing: border-box; }
 
 /* a quiet label over a block (Notes, Your notes, Description · from Jira) */
 .ovb { display: flex; flex-direction: column; gap: 4px; }
-.ovl { margin: 0; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); }
-.ovl small { font-weight: 600; font-size: var(--fs-2); }
-.ovt { margin: 0; font-size: var(--fs-3); line-height: 1.55; color: var(--cz-ink); }
+.ovl { margin: 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
+.ovl small { font-weight: var(--fw-strong); font-size: var(--fs-label); line-height: var(--lh-label); }
+.ovt { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--cz-ink); }
 /* the description: shown open, cut at five lines, an icon opens the rest */
 .ovd { position: relative; }
-.ovd .ovdx { font-size: var(--fs-3); line-height: 1.55; color: var(--cz-ink); overflow-wrap: anywhere; }
+.ovd .ovdx { font-size: var(--fs-body); line-height: 1.55; color: var(--cz-ink); overflow-wrap: anywhere; }
 .ovd .ovdx p, .ovd .ovdx ul, .ovd .ovdx ol { margin: 0 0 6px; }
-.ovd .ovdx h4 { margin: 8px 0 2px; font-size: var(--fs-3); }
+.ovd .ovdx h4 { margin: 8px 0 2px; font-size: var(--fs-body); line-height: var(--lh-body); }
 .ovd.cut .ovdx { max-height: calc(1.55em * 5); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, var(--cz-ink) 55%, transparent); mask-image: linear-gradient(180deg, var(--cz-ink) 55%, transparent); }
 .ovd .ovdm { display: flex; justify-content: center; margin-top: 2px; }
 .ovib { width: 30px; height: 30px; border-radius: 999px; border: 0; padding: 0; background: var(--cz-well); color: var(--cz-ink2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
@@ -31,8 +31,8 @@
 .ovw .go:hover { background: var(--cz-well2); }
 .ovw .tl { width: 28px; height: 28px; border-radius: 9px; background: var(--cz-bluebg); color: var(--cz-blueink); display: inline-flex; align-items: center; justify-content: center; flex: none; }
 .ovw .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
-.ovw .tx b { font-size: var(--fs-3); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.ovw .tx small { font-size: var(--fs-2); color: var(--cz-ink3); font-weight: 600; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
+.ovw .tx b { font-size: var(--fs-row); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-row); }
+.ovw .tx small { font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; line-height: var(--lh-label); }
 .ovw .tx small .sep { opacity: .7; }
 .ovw .cv { color: var(--cz-ink3); display: inline-flex; flex: none; }
 .ovw .ovmv { width: 38px; height: 38px; border-radius: 999px; border: 0; background: transparent; color: var(--cz-ink2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
@@ -40,5 +40,5 @@
 
 /* the foot link (Open in Jira) */
 .ovft { display: flex; justify-content: center; padding: 6px 0 4px; }
-.ovft a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); text-decoration: none; padding: 6px 12px; border-radius: 999px; }
+.ovft a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); text-decoration: none; padding: 6px 12px; border-radius: 999px; line-height: var(--lh-label); }
 .ovft a:hover { background: var(--cz-well); color: var(--cz-ink); }

package/workspace/public/pm/premium-insights.js

@@ -1065,11 +1065,11 @@ function detailSvg(g, c, W = 490, H = 150) {
   let out = '';
   if (g.target !== null) { const ty = y(g.target); out += `<path class="tg" d="M0 ${f(ty)}H${W}"/><text class="tgl" x="${W - 2}" y="${f(ty < 18 ? ty + 14 : ty - 6)}" text-anchor="end">Target ${esc(g.targetTxt)}</text>`; }
   // the labels at the foot never overlap: the first milestone label (Deliver, Evaluate) keeps the bottom line, and a milestone or release label
-  // that would touch one moves up a line (7.5 units a character is the bold label font, a little over; a line is 17 units)
+  // that would touch one moves up a line (7.5 units a character is the bold 13 px label font, a little over; a line is 19 units, the 13 px label's box and a gap)
   const lanes = [], laneOf = (a, b) => { let i = 0; while ((lanes[i] || []).some(([p, q]) => a < q + 6 && b > p - 6)) i++; (lanes[i] = lanes[i] || []).push([a, b]); return i; };
   const span = (px, end, label) => { const w = String(label).length * 7.5; return end ? [px - w, px] : [px, px + w]; };
-  for (const m of marks) { const mx = x(m.t), end = mx > W - 120, lx = end ? mx - 9 : mx + 9; const [a, b] = span(lx, end, m.label), ly = H - 5 - 17 * laneOf(Math.min(a, mx - 6), Math.max(b, mx + 6)); out += `<path class="msr" d="M${f(mx)} 14V${H - 16}"/><path class="msd" d="M${f(mx)} ${H - 14}l5 5-5 5-5-5z"/><text class="msl" x="${f(lx)}" y="${ly}"${end ? ' text-anchor="end"' : ''}>${esc(m.label)}</text>`; }
-  for (const s of shipsOf(g)) { if (s.t < t0 || s.t > t1) continue; const sx = x(s.t), end = sx > W - 160, lx = end ? sx - 4 : sx + 4, ly = H - 5 - 17 * laneOf(...span(lx, end, s.label)); out += `<path class="ship" d="M${f(sx)} 20V${H - 10}"/><text class="shipl" x="${f(lx)}" y="${ly}"${end ? ' text-anchor="end"' : ''}>${esc(s.label)}</text>`; }
+  for (const m of marks) { const mx = x(m.t), end = mx > W - 120, lx = end ? mx - 9 : mx + 9; const [a, b] = span(lx, end, m.label), ly = H - 5 - 19 * laneOf(Math.min(a, mx - 6), Math.max(b, mx + 6)); out += `<path class="msr" d="M${f(mx)} 14V${H - 16}"/><path class="msd" d="M${f(mx)} ${H - 14}l5 5-5 5-5-5z"/><text class="msl" x="${f(lx)}" y="${ly}"${end ? ' text-anchor="end"' : ''}>${esc(m.label)}</text>`; }
+  for (const s of shipsOf(g)) { if (s.t < t0 || s.t > t1) continue; const sx = x(s.t), end = sx > W - 160, lx = end ? sx - 4 : sx + 4, ly = H - 5 - 19 * laneOf(...span(lx, end, s.label)); out += `<path class="ship" d="M${f(sx)} 20V${H - 10}"/><text class="shipl" x="${f(lx)}" y="${ly}"${end ? ' text-anchor="end"' : ''}>${esc(s.label)}</text>`; }
   const L = pts.map((p) => f(x(day(p.at))) + ' ' + f(y(p.v))), last = L[L.length - 1], zp = pts[pts.length - 1];
   const FL = fc && proj ? FCV.chartLayer(g, { x, y, H, day, last: { t: day(zp.at), v: zp.v } }) : null;
   out = (FL ? FL.under : '') + out + `<path class="ln" d="M${L.join('L')}"/>` + (FL ? FL.over : proj ? `<path class="pj" d="M${last}L${f(x(proj.t))} ${f(y(proj.v))}"/>` : '');

package/workspace/public/pm/premium-report-frame.css

@@ -13,7 +13,7 @@ body.pmos-doc { overflow: hidden; }
 [data-more] .pmos-more { display: none; }
 [data-more][data-open] .pmos-more { display: revert; }
 .pmos-chg { background: color-mix(in oklab, var(--slide-note-warning) 22%, transparent); }
-.pmos-was { margin-left: 6px; font-weight: 400; color: var(--slide-muted); white-space: nowrap; }
+.pmos-was { margin-left: 6px; font-weight: var(--fw-regular); color: var(--slide-muted); white-space: nowrap; }
 /* print: one slide per 1280 x 720 page, nothing else */
 @page deck { size: 1280px 720px; margin: 0; }
 body.pmos-print-deck > .pmos-slide { page: deck; break-after: page; width: 1280px; height: 720px; overflow: hidden; box-sizing: border-box; }

package/workspace/public/pm/premium-report-intel.css

@@ -3,7 +3,7 @@
 .ins-menu.ins-rpmenu { min-width: 280px; }
 .ins-menu#repMenu [role="menuitem"] { flex-direction: row; align-items: center; gap: 10px; }
 .ins-menu#repMenu [role="menuitem"] > span { flex: 1; min-width: 0; }
-.ins-menu#repMenu [role="menuitem"] small { display: block; font-size: var(--fs-1); font-weight: 600; color: var(--cz-ink3); }
+.ins-menu#repMenu [role="menuitem"] small { display: block; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
 .ins-menu#repMenu .ins-rpback { color: var(--cz-ink2); }
 
 .ins-rpd { display: flex; flex-direction: column; gap: 14px; }
@@ -11,30 +11,30 @@
 .ins-rps.ok { background: var(--cz-okbg); }
 .ins-rps .sp { display: inline-flex; color: var(--cz-blueink); }
 .ins-rps.ok .sp { color: var(--cz-ok); }
-.ins-rps .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-2); color: var(--cz-ink2); }
-.ins-rps .t b { font-size: var(--fs-3); color: var(--cz-ink); }
+.ins-rps .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
+.ins-rps .t b { font-size: var(--fs-body); color: var(--cz-ink); line-height: var(--lh-body); }
 
 .ins-rpc { display: flex; flex-wrap: wrap; gap: 6px; }
-.ins-rpchip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 999px; background: var(--cz-well); font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink); }
+.ins-rpchip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 999px; background: var(--cz-well); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-label); }
 .ins-rpchip svg[aria-hidden="true"] { width: 14px; height: 14px; }
-.ins-rpchip select, .ins-rpchip input { border: 0; background: none; font: inherit; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink); outline: 0; padding: 0; min-width: 0; }
-.ins-rpchip input::placeholder { color: var(--cz-ink3); font-weight: 600; }
+.ins-rpchip select, .ins-rpchip input { border: 0; background: none; font: inherit; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink); outline: 0; padding: 0; min-width: 0; line-height: var(--lh-label); }
+.ins-rpchip input::placeholder { color: var(--cz-ink3); font-weight: var(--fw-strong); }
 .ins-rpchip:focus-within { box-shadow: 0 0 0 2px var(--cz-blue); }
-.ins-rpchip.gh { background: none; color: var(--cz-ink3); font-weight: 600; }
+.ins-rpchip.gh { background: none; color: var(--cz-ink3); font-weight: var(--fw-strong); }
 
 .ins-rpb { display: flex; flex-direction: column; gap: 6px; }
-.ins-rpl { font-size: var(--fs-1); font-weight: 800; color: var(--cz-ink3); }
-.ins-rpl span { font-weight: 600; margin-left: 6px; }
-.ins-rpa { width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid var(--cz-hair); border-radius: 12px; padding: 10px 12px; background: var(--cz-card); font: inherit; font-size: var(--fs-3); font-weight: 800; line-height: 1.35; color: var(--cz-ink); }
+.ins-rpl { font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
+.ins-rpl span { font-weight: var(--fw-strong); margin-left: 6px; }
+.ins-rpa { width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid var(--cz-hair); border-radius: 12px; padding: 10px 12px; background: var(--cz-card); font: inherit; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: 1.35; color: var(--cz-ink); }
 .ins-rpa:focus { outline: 0; box-shadow: 0 0 0 2px var(--cz-blue); }
 .ins-rpbox { border: 1px solid var(--cz-hair); border-radius: 14px; padding: 2px 14px; background: var(--cz-card); }
-.ins-rpst { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-3); }
+.ins-rpst { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-body); line-height: var(--lh-body); }
 .ins-rpst:last-child { border-bottom: 0; }
-.ins-rpst .n { font-size: var(--fs-1); font-weight: 800; color: var(--cz-ink3); }
-.ins-rpst b { display: block; font-weight: 800; line-height: 1.3; }
-.ins-rpst small { display: block; font-size: var(--fs-1); color: var(--cz-ink3); margin-top: 1px; }
+.ins-rpst .n { font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
+.ins-rpst b { display: block; font-weight: var(--fw-strong); line-height: 1.3; }
+.ins-rpst small { display: block; font-size: var(--fs-meta); color: var(--cz-ink3); margin-top: 1px; line-height: var(--lh-meta); }
 .ins-rpst.off .w { opacity: .55; }
-.ins-rplive { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-1); font-weight: 700; color: var(--cz-ok); }
+.ins-rplive { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ok); line-height: var(--lh-badge); }
 .ins-rplive i { width: 6px; height: 6px; border-radius: 50%; background: var(--cz-dot-ok); }
 .ins-rptog { position: relative; width: 34px; height: 20px; border-radius: 999px; border: 0; background: var(--cz-well2); cursor: pointer; padding: 0; flex: none; }
 .ins-rptog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--cz-card); transition: transform .15s ease; }
@@ -43,9 +43,9 @@
 .ins-rptog:disabled { opacity: .5; cursor: default; }
 .ins-rptog:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
 .ins-rpask { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 120px 140px; gap: 6px; }
-.ins-rpask input { min-width: 0; height: 32px; border: 1px solid var(--cz-hair); border-radius: 8px; padding: 0 8px; background: var(--cz-card); font: inherit; font-size: var(--fs-2); color: var(--cz-ink); }
+.ins-rpask input { min-width: 0; height: 32px; border: 1px solid var(--cz-hair); border-radius: 8px; padding: 0 8px; background: var(--cz-card); font: inherit; font-size: var(--fs-meta); color: var(--cz-ink); line-height: var(--lh-meta); }
 .ins-rpck { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
-.ins-rpck .ck { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-2); color: var(--cz-ink2); padding: 4px 0; line-height: 1.35; }
+.ins-rpck .ck { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-meta); color: var(--cz-ink2); padding: 4px 0; line-height: 1.35; }
 .ins-rpck .m { width: 18px; height: 18px; border-radius: 50%; background: var(--cz-okbg); color: var(--cz-ok); display: inline-flex; align-items: center; justify-content: center; flex: none; }
 .ins-rpck .m svg[aria-hidden="true"] { width: 12px; height: 12px; }
 .ins-rpck .ck.w .m { background: var(--cz-latebg); color: var(--cz-late); }

package/workspace/public/pm/premium-report-print.css

@@ -6,4 +6,4 @@ body.pmos-print-deck > .pmos-slide { padding: 72px 96px; display: flex; flex-dir
 .rp-slide__t p, .rp-slide__t li { margin: 0; font-size: 16px; line-height: 1.45; }
 .rp-slide__t ul { margin: 0; display: grid; gap: 12px; }
 body.pmos-print-doc { padding: 48px; }
-body.pmos-print-doc h2 { margin: 24px 0 8px; font-size: 20px; }
+body.pmos-print-doc h2 { margin: 24px 0 8px; font-size: var(--fs-panel); line-height: var(--lh-panel); }

package/workspace/public/pm/premium-vw-backlog.css

@@ -1,30 +1,30 @@
-:root{--fs-1:11px;--fs-2:12px;--fs-3:14px;--fs-4:16px;--fs-5:20px;--fs-6:28px}
+:root{--fw-regular:400;--fw-strong:600;--fs-field:16px;--fs-display:26px;--fs-page:26px;--fs-panel:18px;--fs-section:15px;--fs-row:15px;--fs-body:15px;--fs-meta:13px;--fs-label:13px;--fs-badge:13px;--lh-display:1.2;--lh-page:1.2;--lh-panel:1.3;--lh-section:1.35;--lh-row:1.4;--lh-body:1.6;--lh-meta:1.5;--lh-label:1.35;--lh-badge:1.2}
 /* pm/premium-vw-backlog.css — the Jira backlog as a viewer tab (initiative premium-viewer, R10; premium-vw-backlog.js).
  * Loaded once by vwStyle('backlog'). Sizes are only var(--fs-1..6), weights 400/500/600 (premium-console-type.test.js). */
 .vbl .bl{display:grid;gap:14px}
-.vbl .bl-src{margin:0;font-size:var(--fs-2);color:var(--ink-3)}
+.vbl .bl-src{margin:0;font-size:var(--fs-meta);color:var(--ink-3);line-height:var(--lh-meta);}
 .vbl .bl-f{display:flex;gap:4px;flex-wrap:wrap;padding:4px;border-radius:8px;background:var(--well);width:max-content;max-width:100%}
-.vbl .bl-f button{min-height:44px;padding:0 16px;border-radius:6px;font-size:var(--fs-2);font-weight:600;color:var(--ink-2)}
+.vbl .bl-f button{min-height:44px;padding:0 16px;border-radius:6px;font-size:var(--fs-label);font-weight:var(--fw-strong);color:var(--ink-2);line-height:var(--lh-label);}
 .vbl .bl-f button[aria-pressed="true"]{background:var(--solid);color:var(--on-solid)}
 .vbl .bl-s{background:var(--card-solid);border:1px solid var(--hair);border-radius:8px;box-shadow:var(--card-shadow);overflow:hidden}
 .vbl .bl-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--hair)}
-.vbl .bl-h b{font-size:var(--fs-3);font-weight:600}
-.vbl .bl-h small{font-size:var(--fs-2);color:var(--ink-3)}
+.vbl .bl-h b{font-size:var(--fs-row);font-weight:var(--fw-strong);line-height:var(--lh-row);}
+.vbl .bl-h small{font-size:var(--fs-meta);color:var(--ink-3);line-height:var(--lh-meta);}
 .vbl .bl-gap{flex:1}
 .vbl .bl-rws{list-style:none;margin:0;padding:0}
 .vbl .bl-rw{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 14px;border-top:1px solid var(--hair)}
 .vbl .bl-rw:first-child{border-top:0}
 .vbl .bl-rw.risk{box-shadow:inset 3px 0 0 var(--bad)}
-.vbl .bl-t{flex:1 1 220px;min-width:0;min-height:44px;display:flex;align-items:center;gap:10px;text-align:left;font-size:var(--fs-3);color:var(--ink)}
-.vbl .bl-t b{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.vbl .bl-t{flex:1 1 220px;min-width:0;min-height:44px;display:flex;align-items:center;gap:10px;text-align:left;font-size:var(--fs-body);color:var(--ink);line-height:var(--lh-body);}
+.vbl .bl-t b{font-weight:var(--fw-regular);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 @media (hover:hover){.vbl .bl-t:hover b{text-decoration:underline;text-underline-offset:3px}}
-.vbl .bl-k{font:500 var(--fs-2) var(--mono);color:var(--ink-3);flex:none}
+.vbl .bl-k{font:var(--fw-regular) var(--fs-meta)/var(--lh-meta) var(--mono);color:var(--ink-3);flex:none}
 .vbl .bl-m{display:flex;align-items:center;gap:8px;flex:none}
-.vbl .bl-st{font-size:var(--fs-1);font-weight:600;padding:2px 8px;border-radius:6px;background:var(--well);color:var(--ink-2)}
+.vbl .bl-st{font-size:var(--fs-badge);font-weight:var(--fw-strong);padding:2px 8px;border-radius:6px;background:var(--well);color:var(--ink-2);line-height:var(--lh-badge);}
 .vbl .bl-st.doing{color:var(--ember-ink)}
-.vbl .bl-p{font:500 var(--fs-2) var(--mono);min-width:24px;text-align:center;padding:1px 6px;border-radius:6px;border:1px solid var(--hair);color:var(--ink-2)}
-.vbl .bl-in{font-size:var(--fs-2);color:var(--ink-3);max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.vbl .bl-why{flex-basis:100%;margin:-6px 0 6px;font-size:var(--fs-2);color:var(--bad)}
-.vbl .bl-none,.vbl .bl-empty{margin:0;padding:12px 14px;font-size:var(--fs-2);color:var(--ink-3)}
+.vbl .bl-p{font:var(--fw-regular) var(--fs-meta)/var(--lh-meta) var(--mono);min-width:24px;text-align:center;padding:1px 6px;border-radius:6px;border:1px solid var(--hair);color:var(--ink-2)}
+.vbl .bl-in{font-size:var(--fs-meta);color:var(--ink-3);max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--lh-meta);}
+.vbl .bl-why{flex-basis:100%;margin:-6px 0 6px;font-size:var(--fs-meta);color:var(--bad);line-height:var(--lh-meta);}
+.vbl .bl-none,.vbl .bl-empty{margin:0;padding:12px 14px;font-size:var(--fs-meta);color:var(--ink-3);line-height:var(--lh-meta);}
 .vbl .bl-f button:focus-visible,.vbl .bl-t:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
 @media (max-width:560px){.vbl .bl-in{display:none}}