create-pmos 0.512.0 → 0.514.0

package/workspace/public/pm/home-ini.css

@@ -4,9 +4,9 @@
 /* ── the stage move in the card (InStage) ── */
 .hi-slot { display: contents; }
 .hi-mv { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
-.hi-why, .hi-note { margin: 0; font-size: var(--fs-2); color: var(--cz-ink3); }
+.hi-why, .hi-note { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .hi-note b { color: var(--cz-ink2); }
-.hi-swl { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2); color: var(--cz-ink2); }
+.hi-swl { display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 .hi-sw { position: relative; flex: none; width: 32px; height: 20px; border-radius: 999px; background: var(--cz-c-d9dce1); border: 0; padding: 0; cursor: pointer; }
 .hi-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--cz-card); transition: left .15s; }
 .hi-sw[aria-checked="true"] { background: var(--cz-blue); }
@@ -19,13 +19,13 @@
 .hi-self { align-self: flex-start; }
 
 /* ── the list column groups (InTasks, InDocs) ── */
-.hi-g .hm-gh .hi-n { margin-left: auto; font-weight: 700; font-size: var(--fs-2); color: var(--cz-ink3); }
+.hi-g .hm-gh .hi-n { margin-left: auto; font-weight: var(--fw-strong); font-size: var(--fs-label); color: var(--cz-ink3); line-height: var(--lh-label); }
 .hm-r.hi-r { min-height: 48px; margin-bottom: 2px; }
 .hm-r.hi-r .hm-rm { min-height: 48px; padding: 7px 10px; }
-.hm-r.hi-r .hm-rt b { font-weight: 600; }
+.hm-r.hi-r .hm-rt b { font-weight: var(--fw-strong); }
 .hm-r.hi-r > .hi-chk { margin-left: 12px; }
 .hm-rt em.q { color: var(--cz-ink3); }
-.hm-rt em.late { color: var(--cz-late); font-weight: 700; }
+.hm-rt em.late { color: var(--cz-late); font-weight: var(--fw-strong); }
 .hm-rt em.risk { color: var(--cz-risk); }
 .hm-dot.hi-risk { background: var(--cz-dot-risk); }
 .hm-tile.hi-sq { border-radius: 50%; background: var(--cz-well2); box-shadow: none; }
@@ -38,39 +38,39 @@
 
 
 /* ── the Viewer: Tasks, Documents, Stage (InTasks, InDocs) ── */
-.hi-v { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 24px; font-size: var(--fs-3); color: var(--cz-ink); }
+.hi-v { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 24px; font-size: var(--fs-body); color: var(--cz-ink); line-height: var(--lh-body); }
 .hi-seg { align-self: flex-start; }
 .hi-vh2 { display: flex; align-items: center; gap: 8px; }
-.hi-vh2 h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-5); font-weight: 800; }
-.cz-pick.hi-pick { height: 30px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); }
+.hi-vh2 h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-panel); font-weight: var(--fw-strong); line-height: var(--lh-panel); }
+.cz-pick.hi-pick { height: 30px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
 .cz-pick.hi-pick svg { fill: none; stroke: currentColor; }
-.hi-empty { margin: 0; font-size: var(--fs-2); color: var(--cz-ink3); }
+.hi-empty { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .hi-tg { display: flex; flex-direction: column; border-radius: 12px; }
 .hi-tg.over { background: var(--cz-bluebg); }
 .hi-gh { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
 .hi-ghb { flex: 1; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0; border: 0; background: none; color: var(--cz-ink); font: inherit; cursor: pointer; text-align: left; }
 .hi-ghb svg { color: var(--cz-ink3); }
-.hi-ghb b { font-size: var(--fs-3); }
-.hi-ghb span { font-size: var(--fs-2); color: var(--cz-ink3); }
-.hi-trow { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-3); min-height: 26px; }
+.hi-ghb b { font-size: var(--fs-body); line-height: var(--lh-body); }
+.hi-ghb span { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.hi-trow { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-body); min-height: 26px; line-height: var(--lh-body); }
 .hi-trow:last-child { border-bottom: 0; }
 .hi-trow[draggable="true"] { cursor: grab; }
 .hi-trow.drag { opacity: .5; }
 .hi-tt { flex: 1; min-width: 0; border: 0; background: none; padding: 0; font: inherit; color: var(--cz-ink); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.hi-tt em { font-style: normal; color: var(--cz-ink3); font-size: var(--fs-2); }
+.hi-tt em { font-style: normal; color: var(--cz-ink3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
 .hi-trow.done .hi-tt { text-decoration: line-through; color: var(--cz-ink3); }
-.hi-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 999px; font: inherit; font-size: var(--fs-1); font-weight: 700; background: var(--cz-well); color: var(--cz-ink2); white-space: nowrap; border: 0; flex: none; }
+.hi-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 999px; font: inherit; font-size: var(--fs-badge); font-weight: var(--fw-strong); background: var(--cz-well); color: var(--cz-ink2); white-space: nowrap; border: 0; flex: none; line-height: var(--lh-badge); }
 button.hi-pill { cursor: pointer; }
 .hi-pill.ok { background: var(--cz-okbg); color: var(--cz-ok); }
 .hi-pill.w { background: var(--cz-riskbg); color: var(--cz-risk); }
 .hi-pill.dash { background: transparent; box-shadow: inset 0 0 0 1px var(--cz-c-c5c9d0); color: var(--cz-ink3); }
-.hi-av { width: 22px; height: 22px; border-radius: 50%; background: var(--cz-well2); color: var(--cz-ink2); font-size: var(--fs-1); font-weight: 800; display: inline-grid; place-items: center; flex: none; }
-.hi-due { font-size: var(--fs-2); color: var(--cz-ink3); min-width: 38px; text-align: right; flex: none; }
-.hi-due.late { color: var(--cz-late); font-weight: 700; }
+.hi-av { width: 22px; height: 22px; border-radius: 50%; background: var(--cz-well2); color: var(--cz-ink2); font-size: var(--fs-badge); font-weight: var(--fw-strong); display: inline-grid; place-items: center; flex: none; line-height: var(--lh-badge); }
+.hi-due { font-size: var(--fs-meta); color: var(--cz-ink3); min-width: 38px; text-align: right; flex: none; line-height: var(--lh-meta); }
+.hi-due.late { color: var(--cz-late); font-weight: var(--fw-strong); }
 .hi-trow .hi-ib { opacity: .35; }
 .hi-trow:hover .hi-ib, .hi-trow .hi-ib:focus-visible, .hi-trow .hi-ib[aria-expanded="true"] { opacity: 1; }
 .hi-add { display: flex; align-items: center; gap: 8px; height: 40px; border-radius: 14px; background: var(--cz-well); padding: 0 6px 0 12px; }
-.hi-add input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font: inherit; font-size: var(--fs-3); color: var(--cz-ink); }
+.hi-add input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font: inherit; font-size: var(--fs-body); color: var(--cz-ink); line-height: var(--lh-body); }
 .hi-foot { display: flex; gap: 4px; flex-wrap: wrap; border-top: 1px solid var(--cz-hair); padding-top: 8px; }
 .hi-drow { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: 12px; }
 .hi-drow.look { background: var(--cz-bluebg); }
@@ -79,12 +79,12 @@ button.hi-pill { cursor: pointer; }
 .hi-dic { width: 30px; height: 30px; border-radius: 9px; background: var(--cz-well); display: inline-grid; place-items: center; flex: none; color: var(--cz-ink2); }
 .hi-dic.dash { background: none; box-shadow: inset 0 0 0 1.5px var(--cz-c-d9dce1); color: var(--cz-ink3); }
 .hi-dtx { min-width: 0; display: block; }
-.hi-dtx b { font-weight: 800; }
-.hi-dtx .hi-k { font-size: var(--fs-2); color: var(--cz-ink3); }
-.hi-dtx em { display: block; font-style: normal; font-size: var(--fs-2); color: var(--cz-ink3); }
-.hi-dtx small { display: block; font-size: var(--fs-1); color: var(--cz-ink3); overflow-wrap: anywhere; }
+.hi-dtx b { font-weight: var(--fw-strong); }
+.hi-dtx .hi-k { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.hi-dtx em { display: block; font-style: normal; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.hi-dtx small { display: block; font-size: var(--fs-meta); color: var(--cz-ink3); overflow-wrap: anywhere; line-height: var(--lh-meta); }
 .hi-drow.later { align-items: center; color: var(--cz-ink3); }
-.hi-dt { flex: 1; font-size: var(--fs-3); }
+.hi-dt { flex: 1; font-size: var(--fs-body); line-height: var(--lh-body); }
 .hi-drow > .hi-pill, .hi-drow > .hi-btn { margin-top: 4px; }
 .hi-sec { display: flex; flex-direction: column; gap: 8px; }
 .hi-stages { display: flex; flex-wrap: wrap; gap: 6px; }
@@ -130,13 +130,13 @@ button.hi-pill { cursor: pointer; }
 @media (max-width: 760px) { .hi-v.hi-page { padding-left: 0; padding-right: 0; } }
 .hi-pg { display: flex; flex-direction: column; gap: 2px; }
 .hi-pgh { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 4px; }
-.hi-pgh b { font-size: var(--fs-3); font-weight: 800; color: var(--cz-ink); }
-.hi-pgh .hi-n { font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); }
+.hi-pgh b { font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-row); }
+.hi-pgh .hi-n { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
 .hi-pgh .hm-gadd { margin-left: auto; }
-.hi-pgm { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 8px; border: 0; border-radius: 10px; background: none; color: var(--cz-ink2); font: inherit; font-size: var(--fs-2); font-weight: 700; cursor: pointer; }
+.hi-pgm { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 8px; border: 0; border-radius: 10px; background: none; color: var(--cz-ink2); font: inherit; font-size: var(--fs-label); font-weight: var(--fw-strong); cursor: pointer; line-height: var(--lh-label); }
 .hi-pge { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 6px; }
-.hi-pge p { margin: 0; font-size: var(--fs-2); color: var(--cz-ink3); }
-.hi-talk { min-height: 44px; border: 0; border-radius: 22px; background: var(--cz-well); color: var(--cz-ink3); font: inherit; font-size: var(--fs-3); text-align: left; padding: 0 16px; cursor: pointer; }
+.hi-pge p { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.hi-talk { min-height: 44px; border: 0; border-radius: 22px; background: var(--cz-well); color: var(--cz-ink3); font: inherit; font-size: var(--fs-body); text-align: left; padding: 0 16px; cursor: pointer; line-height: var(--lh-body); }
 @media (hover: hover) { .hi-pgm:hover { background: var(--cz-well2); } }
 
 /* ── D99: the initiative's own workflow (WfTriage, WfAChange, WfAWontDo) ── */
@@ -150,22 +150,22 @@ button.hi-pill { cursor: pointer; }
 .hm-card.hm-sc { padding: 0; background: transparent; box-shadow: none; }
 .hm-box.hm-scb { background: var(--cz-card); border-radius: 18px; padding: 12px; gap: 0; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cz-blue) 45%, transparent); }
 .hm-sch { display: flex; align-items: center; gap: 8px; min-height: 28px; }
-.hm-sch > b { font-size: var(--fs-3); font-weight: 800; color: var(--cz-ink); }
-.hm-sch .of { font-size: var(--fs-2); color: var(--cz-ink3); font-weight: 600; }
+.hm-sch > b { font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-row); }
+.hm-sch .of { font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); line-height: var(--lh-label); }
 .hm-sch .hm-wf { display: inline-flex; align-items: center; justify-content: center; padding: 3px; margin-left: 2px; border: 0; border-radius: 9px; background: none; cursor: pointer; color: inherit; }
 .hm-sch .hm-wf:hover, .hm-sch .hm-wf[aria-expanded="true"] { background: var(--cz-well); }
-.hm-sct { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-2); color: var(--cz-ink3); font-weight: 600; white-space: nowrap; }
+.hm-sct { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); white-space: nowrap; line-height: var(--lh-label); }
 .hm-sct.over { color: var(--cz-risk); }
 .hm-bars.hm-scbars { margin: 10px 0 8px; }
 .hm-bars.hm-scbars i { position: relative; } .hm-bars.hm-scbars i::after { content: ""; position: absolute; inset: -6px 0; }   /* a taller hover target for the stage name */
 .hm-bars.hm-scbars i.skip { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--cz-ink3) 40%, transparent) 0 4px, transparent 4px 7px); }
 .hm-scl { border-top: 1px solid var(--cz-hair); padding-top: 8px; margin-top: 2px; }
-.hm-scwhy { margin: 0; padding: 4px 0 2px 34px; font-size: var(--fs-2); color: var(--cz-ink3); }
-.hm-scb > .hm-none { margin: 4px 0 0; font-size: var(--fs-2); color: var(--cz-ink3); }
+.hm-scwhy { margin: 0; padding: 4px 0 2px 34px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.hm-scb > .hm-none { margin: 4px 0 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 /* the move sheet: Move now and Back as two quiet buttons, side by side on a desktop, stacked on the phone */
 .hi-nxa { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--cz-hair); }
 .hi-nxa .hi-btn { flex: 1; justify-content: center; height: 40px; border-radius: 12px; }
-.hi-pop .hi-swl { font-size: var(--fs-3); font-weight: 700; color: var(--cz-ink); min-height: 44px; }
+.hi-pop .hi-swl { font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); min-height: 44px; line-height: var(--lh-row); }
 .hi-pop .hi-swl > span { flex: 1; }
 .hi-pop .hi-sw { width: 44px; height: 28px; }
 .hi-pop .hi-sw::after { top: 4px; left: 4px; width: 20px; height: 20px; }
@@ -178,6 +178,6 @@ button.hi-pill { cursor: pointer; }
   .hi-pop .hi-sw[aria-checked="true"]::before, .hi-v .hi-sw[aria-checked="true"]::before, :root[data-theme="dark"] .hi-pop .hi-sw[aria-checked="true"]::before, :root[data-theme="dark"] .hi-v .hi-sw[aria-checked="true"]::before { background: var(--cz-blue); }
   .hi-pop .hi-sw::after, .hi-v .hi-sw::after { top: 12px; z-index: 1; background: var(--cz-onsolid); }
   .hi-pop.sheet .hi-nxa { flex-direction: column; border-top: 0; padding-top: 0; }
-  .hi-pop.sheet .hi-nxa .hi-btn { height: 48px; border-radius: 14px; font-size: var(--fs-3); font-weight: 800; }
-  .hi-pop.sheet .hi-h3 { font-size: var(--fs-4); }
+  .hi-pop.sheet .hi-nxa .hi-btn { height: 48px; border-radius: 14px; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
+  .hi-pop.sheet .hi-h3 { font-size: var(--fs-body); line-height: var(--lh-body); }
 }

package/workspace/public/pm/home-line.css

@@ -7,19 +7,19 @@
 .pl-row { display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 2px 4px 2px 0; }
 .pl-hit { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px 0 14px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 14px; }
 .pl-hit:focus-visible, .pl-stop:focus-visible, .pl-ib:focus-visible, .pl-dvb:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
-.pl-t { flex: 1; min-width: 0; font-size: var(--fs-3); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.pl-t { flex: 1; min-width: 0; font-size: var(--fs-row); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-row); }
 .hm-pl.open .pl-t { white-space: normal; }
 .hm-pl.you .pl-t, .hm-goalq .pl-t { color: var(--cz-blueink); }
-.pl-n { flex: none; font-size: var(--fs-2); font-weight: 600; color: var(--cz-ink3); }
+.pl-n { flex: none; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
 .pl-cv { flex: none; display: inline-flex; color: var(--cz-ink3); }
 .pl-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cz-blue); }
 .pl-clk { display: inline-flex; color: var(--cz-ink3); }
 .pl-stop { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
 .pl-body { padding: 0 14px 12px; }
-.pl-head { margin: 0 0 10px; font-size: var(--fs-2); color: var(--cz-ink3); line-height: 1.4; }
+.pl-head { margin: 0 0 10px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: 1.4; }
 .pl-sl { margin-top: 2px; }
-.pl-now { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-2); min-width: 0; }
-.pl-now b { flex: none; font-weight: 800; }
+.pl-now { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-meta); min-width: 0; line-height: var(--lh-meta); }
+.pl-now b { flex: none; font-weight: var(--fw-strong); }
 .pl-nt { min-width: 0; color: var(--cz-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .hm-pl.open .pl-nt { white-space: normal; }
 .pl-acts { display: flex; gap: 8px; margin-top: 10px; }
@@ -29,10 +29,10 @@
 /* the Viewer (a desktop) */
 .pl-vw { padding: 16px 20px; }
 .pl-vwh { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
-.pl-vwh b { flex: 1; min-width: 0; font-size: var(--fs-4); font-weight: 800; line-height: 1.3; }
+.pl-vwh b { flex: 1; min-width: 0; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: 1.3; }
 
 /* the divider where a run finished */
-.pl-dv { display: flex; align-items: center; gap: 10px; margin: 4px 0; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); }
+.pl-dv { display: flex; align-items: center; gap: 10px; margin: 4px 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
 .pl-dv .ln { flex: 1; height: 1px; background: var(--cz-hair); }
 .pl-dv.stop { color: var(--cz-risk); }
 .pl-dvb { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; border-radius: 10px; }

package/workspace/public/pm/impact.css

@@ -2,24 +2,24 @@
  * leaf outside Adler's sprout. Colours are the --cz-* tokens of cozy.css, type is the var(--fs-N) scale. */
 .im { display: flex; flex-direction: column; gap: 14px; font-family: var(--cz-sans); color: var(--cz-ink); }
 .im-hd { display: flex; flex-direction: column; gap: 4px; }
-.im-hd b { font-size: var(--fs-5); font-weight: 800; letter-spacing: -.01em; }
-.im-hd span { font-size: var(--fs-4); color: var(--cz-ink2); }
+.im-hd b { font-size: var(--fs-display); font-weight: var(--fw-strong); letter-spacing: -.01em; line-height: var(--lh-display); }
+.im-hd span { font-size: var(--fs-body); color: var(--cz-ink2); line-height: var(--lh-body); }
 .im-card { background: var(--cz-card); border: 1px solid var(--cz-hair); border-radius: 18px; padding: 4px 16px; }
 .im-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; border-top: 1px solid var(--cz-hair); }
 .im-row:first-child { border-top: 0; }
 .im-tile { width: 36px; height: 36px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--cz-well); color: var(--cz-ink2); }
 .im-tile.b { background: var(--cz-bluebg); color: var(--cz-blue); }
 .im-tile.g { background: var(--cz-okbg); color: var(--cz-ok); }
-.im-av { width: 36px; height: 36px; border-radius: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-3); background: var(--cz-well); color: var(--cz-ink); }
+.im-av { width: 36px; height: 36px; border-radius: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-strong); font-size: var(--fs-row); background: var(--cz-well); color: var(--cz-ink); line-height: var(--lh-row); }
 .im-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
-.im-t { font-size: var(--fs-4); font-weight: 400; }
-b.im-t { font-weight: 700; }
-.im-s { font-size: var(--fs-3); color: var(--cz-ink2); }
+.im-t { font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); }
+b.im-t { font-weight: var(--fw-strong); }
+.im-s { font-size: var(--fs-body); color: var(--cz-ink2); line-height: var(--lh-body); }
 .im-ib { width: 44px; height: 44px; border-radius: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--cz-well); color: var(--cz-ink2); text-decoration: none; }
-.im-lock { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-3); color: var(--cz-ink2); }
+.im-lock { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-body); color: var(--cz-ink2); line-height: var(--lh-body); }
 .im-wk { display: flex; flex-direction: column; gap: 8px; }
 .im-wk.quiet { flex-direction: row; align-items: baseline; gap: 10px; padding: 4px 0; }
-.im-wl { font-size: var(--fs-2); font-weight: 800; letter-spacing: .02em; color: var(--cz-ink2); flex: none; }
+.im-wl { font-size: var(--fs-label); font-weight: var(--fw-strong); letter-spacing: .02em; color: var(--cz-ink2); flex: none; line-height: var(--lh-label); }
 .im-row .im-wl { width: 64px; }
 .im-wk summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; border-radius: 12px; }
 .im-wk summary::-webkit-details-marker { display: none; }
@@ -31,7 +31,7 @@ b.im-t { font-weight: 700; }
 .im-made { margin-top: 18px; }
 .im-win { margin-bottom: 12px; border-radius: 18px; overflow: hidden; }
 .im-ch { margin: 12px 0; }
-.im-mt { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: var(--fs-3); color: var(--cz-ink2); }
+.im-mt { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: var(--fs-body); color: var(--cz-ink2); line-height: var(--lh-body); }
 .im-face { width: 40px; height: 44px; border: 0; padding: 0; margin: 0 -4px 0 0; background: none; border-radius: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
 .im-face .ad-svg.hv-ad { width: 36px; height: 36px; }
 @media (hover: hover) { .im-ib:hover, .im-face:hover, .im-wk summary:hover { background: var(--cz-well2); } }