create-pmos 0.512.0 → 0.513.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (103) hide show
  1. package/package.json +14 -16
  2. package/payload/KIT-VERSION +1 -1
  3. package/payload/planning/evals/eval-calibration.md +1 -1
  4. package/payload/planning/okrs/health-budgets.md +1 -1
  5. package/payload/state/discoveries.md +1 -1
  6. package/workspace/briefing-premium-adddoc-test.js +3 -3
  7. package/workspace/briefing-premium-board-test.js +2 -2
  8. package/workspace/briefing-premium-initiative-test.js +3 -3
  9. package/workspace/briefing-premium-insights-test.js +2 -2
  10. package/workspace/briefing-premium-sources-test.js +4 -5
  11. package/workspace/briefing-premium-test.js +2 -2
  12. package/workspace/changelog.json +13 -0
  13. package/workspace/guide/home.md +1 -1
  14. package/workspace/intel-report-ui-test.js +1 -1
  15. package/workspace/intelligence-gaps-ui-test.js +1 -1
  16. package/workspace/lib/premium-console-type.js +15 -12
  17. package/workspace/metric-drafts-ui-test.js +2 -2
  18. package/workspace/package-lock.json +2 -2
  19. package/workspace/package.json +1 -1
  20. package/workspace/premium-menu-rows-test.js +1 -1
  21. package/workspace/premium-vw-doc-test.js +1 -1
  22. package/workspace/public/pm/bd-pin-card.css +4 -4
  23. package/workspace/public/pm/bd-publish.css +11 -11
  24. package/workspace/public/pm/bd-shared.css +17 -17
  25. package/workspace/public/pm/c3-capture.css +9 -9
  26. package/workspace/public/pm/c3-initiatives.css +23 -23
  27. package/workspace/public/pm/c3-listen.css +1 -1
  28. package/workspace/public/pm/components.css +572 -572
  29. package/workspace/public/pm/console3.css +374 -373
  30. package/workspace/public/pm/cozy-adler.css +4 -4
  31. package/workspace/public/pm/cozy-aud.css +1 -1
  32. package/workspace/public/pm/cozy-board.css +328 -328
  33. package/workspace/public/pm/cozy-ev.css +78 -78
  34. package/workspace/public/pm/cozy-home-rows.css +32 -32
  35. package/workspace/public/pm/cozy-home.css +240 -240
  36. package/workspace/public/pm/cozy-insights.css +200 -200
  37. package/workspace/public/pm/cozy-live-pill.css +5 -5
  38. package/workspace/public/pm/cozy-mtg-present.css +28 -28
  39. package/workspace/public/pm/cozy-onboard.css +15 -15
  40. package/workspace/public/pm/cozy-panel.css +39 -39
  41. package/workspace/public/pm/cozy-pick.css +5 -5
  42. package/workspace/public/pm/cozy-rec-now.css +23 -23
  43. package/workspace/public/pm/cozy-rec-present.css +11 -11
  44. package/workspace/public/pm/cozy-rec-tab.css +13 -13
  45. package/workspace/public/pm/cozy-steps.css +14 -14
  46. package/workspace/public/pm/cozy-today.css +95 -95
  47. package/workspace/public/pm/cozy-viewer.css +27 -27
  48. package/workspace/public/pm/cozy-vw-mtg.css +113 -113
  49. package/workspace/public/pm/cozy-vw-rp.css +79 -79
  50. package/workspace/public/pm/cozy-vw-shell.css +43 -43
  51. package/workspace/public/pm/cozy-vw.css +129 -129
  52. package/workspace/public/pm/cozy-xv.css +15 -15
  53. package/workspace/public/pm/cozy.css +53 -21
  54. package/workspace/public/pm/dash-view.css +27 -27
  55. package/workspace/public/pm/hi-pop.css +26 -26
  56. package/workspace/public/pm/home-impact.css +8 -8
  57. package/workspace/public/pm/home-ini.css +36 -36
  58. package/workspace/public/pm/home-line.css +7 -7
  59. package/workspace/public/pm/impact.css +9 -9
  60. package/workspace/public/pm/ini-view.css +243 -243
  61. package/workspace/public/pm/load-shapes.css +1 -1
  62. package/workspace/public/pm/loose-props.css +14 -14
  63. package/workspace/public/pm/metric-drafts.css +20 -20
  64. package/workspace/public/pm/ms-suggest.css +9 -9
  65. package/workspace/public/pm/ov-view.css +14 -14
  66. package/workspace/public/pm/premium-insights.js +3 -3
  67. package/workspace/public/pm/premium-report-frame.css +1 -1
  68. package/workspace/public/pm/premium-report-intel.css +17 -17
  69. package/workspace/public/pm/premium-report-print.css +1 -1
  70. package/workspace/public/pm/premium-vw-backlog.css +13 -13
  71. package/workspace/public/pm/premium-vw-cal.css +32 -32
  72. package/workspace/public/pm/premium-vw-copy.css +7 -7
  73. package/workspace/public/pm/premium-vw-doc.css +69 -69
  74. package/workspace/public/pm/premium-vw-item.css +12 -12
  75. package/workspace/public/pm/premium-vw-jira.css +39 -39
  76. package/workspace/public/pm/premium-vw-meet.css +28 -28
  77. package/workspace/public/pm/premium-vw-notepad.css +13 -13
  78. package/workspace/public/pm/premium-vw-notes.css +11 -11
  79. package/workspace/public/pm/premium-vw-rec.css +27 -27
  80. package/workspace/public/pm/premium-vw-report.css +21 -21
  81. package/workspace/public/pm/premium-vw-slides.css +28 -28
  82. package/workspace/public/pm/premium.css +618 -618
  83. package/workspace/public/pm/prog-order.css +6 -6
  84. package/workspace/public/pm/prog-page.css +17 -17
  85. package/workspace/public/pm/program-charter.css +33 -33
  86. package/workspace/public/pm/ready-lib.css +6 -6
  87. package/workspace/public/pm/sort-order.css +1 -1
  88. package/workspace/public/pm/split-merge.css +18 -18
  89. package/workspace/public/pm/task-card.css +24 -24
  90. package/workspace/public/pm/tk-tasks.css +42 -42
  91. package/workspace/public/pm/tk-view.css +6 -6
  92. package/workspace/public/pm/wf-page.css +31 -31
  93. package/workspace/public/premium-aud.html +1 -1
  94. package/workspace/public/premium-board.html +1 -1
  95. package/workspace/public/premium-intelligence.html +1 -1
  96. package/workspace/public/premium-rec.html +1 -1
  97. package/workspace/public/premium-viewer.html +1 -1
  98. package/workspace/public/premium-workflows.html +1 -1
  99. package/workspace/public/premium.html +1 -1
  100. package/workspace/public/vendor/plus-jakarta-sans-var.woff2 +0 -0
  101. package/workspace/server.js +1 -0
  102. package/workspace/third-party/README.md +2 -1
  103. package/workspace/third-party/plus-jakarta-sans-OFL.LICENSE +93 -0
@@ -11,13 +11,13 @@ body.cz { padding: 0; }
11
11
  :where(.ins, .ins-side) :where(p, h2, h3) { margin: 0; } /* no specificity: a class's own margin wins */
12
12
  .ins-side:focus { outline: none; }
13
13
  /* the shell's toast (premium-shell.js toast() writes #toast and adds .on) */
14
- .ins-toast { position: fixed; z-index: 90; left: 50%; bottom: 28px; transform: translate(-50%, 20px); max-width: min(520px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 14px; background: var(--cz-ink); color: var(--cz-card); font: 600 var(--fs-3) var(--cz-sans); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; display: flex; align-items: center; gap: 10px; }
14
+ .ins-toast { position: fixed; z-index: 90; left: 50%; bottom: 28px; transform: translate(-50%, 20px); max-width: min(520px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 14px; background: var(--cz-ink); color: var(--cz-card); font: var(--fw-strong) var(--fs-row)/var(--lh-row) var(--cz-sans); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; display: flex; align-items: center; gap: 10px; }
15
15
  .ins-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
16
- .ins-toast .cta { min-height: 32px; padding: 0 10px; border-radius: 999px; border: 0; background: var(--cz-card); color: var(--cz-ink); font: inherit; font-weight: 700; cursor: pointer; }
16
+ .ins-toast .cta { min-height: 32px; padding: 0 10px; border-radius: 999px; border: 0; background: var(--cz-card); color: var(--cz-ink); font: inherit; font-weight: var(--fw-strong); cursor: pointer; }
17
17
  .cz .dock, .cz .sky { display: none !important; }
18
18
  .cz .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
19
- .ins .note, .ins-side .note { font-size: var(--fs-1); color: var(--cz-ink3); }
20
- .ins .q, .ins-side .q { color: var(--cz-ink3); font-weight: 600; }
19
+ .ins .note, .ins-side .note { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
20
+ .ins .q, .ins-side .q { color: var(--cz-ink3); font-weight: var(--fw-strong); }
21
21
  .ins { font-family: var(--cz-sans); color: var(--cz-ink); position: relative; z-index: 1; }
22
22
  .ins button, .ins-side button, .ins-side select, .ins-side input { font-family: inherit; }
23
23
  .ins svg[aria-hidden="true"], .ins-side svg[aria-hidden="true"] { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@@ -26,7 +26,7 @@ body.cz { padding: 0; }
26
26
  /* ⋯ keeps the heavy dots the design draws (stroke 3), in ink */
27
27
  .ins svg[stroke-width="3"], .ins-side svg[stroke-width="3"] { stroke-width: 3; }
28
28
  .ins #moreB, .ins-side #chMore { color: var(--cz-ink); }
29
- .ins .lk { font: inherit; font-weight: 700; color: var(--cz-blueink); background: none; border: 0; cursor: pointer; padding: 0; }
29
+ .ins .lk { font: inherit; font-weight: var(--fw-strong); color: var(--cz-blueink); background: none; border: 0; cursor: pointer; padding: 0; }
30
30
 
31
31
  /* ── the bar ── */
32
32
  .ins-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@@ -37,34 +37,34 @@ body.cz { padding: 0; }
37
37
  .ins-tools { margin-left: auto; display: flex; align-items: center; gap: 4px; }
38
38
  .ins-tools #perChip { height: 36px; }
39
39
  .ins #perChip[aria-expanded="true"] { background: var(--cz-card); } /* open, the chip stays white (AgInsPeriod) */
40
- .ins-perd { font-weight: 600; color: var(--cz-ink3); font-size: var(--fs-1); }
40
+ .ins-perd { font-weight: var(--fw-strong); color: var(--cz-ink3); font-size: var(--fs-badge); line-height: var(--lh-badge); }
41
41
  .ins-fdot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--cz-blue); }
42
42
  .ins-menu { position: absolute; top: calc(100% + 6px); line-height: normal; left: 0; z-index: 30; min-width: 220px; max-height: 70vh; overflow: auto; 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; gap: 2px; }
43
43
  .ins-menu[hidden] { display: none; }
44
44
  .ins-menu.ins-right, .ins-permenu { left: auto; right: 0; }
45
45
  .ins-permenu { top: calc(100% - 7px); } /* AgInsPeriod: the menu's top edge tucks under the chip */
46
46
  .ins-permenu { width: 330px; gap: 0; } /* AgInsPeriod: the items sit flush */
47
- .ins-menu button { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 12px; font-size: var(--fs-3); font-weight: 700; color: var(--cz-ink); background: none; border: 0; cursor: pointer; text-align: left; }
47
+ .ins-menu button { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 12px; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); background: none; border: 0; cursor: pointer; text-align: left; line-height: var(--lh-row); }
48
48
  .ins-menu button:disabled { color: var(--cz-ink3); cursor: default; }
49
49
  .ins-menu button > span { display: block; }
50
50
  .ins-menu button:hover:not(:disabled), .ins-menu [aria-checked="true"] { background: var(--cz-well); }
51
51
  .ins-permenu [aria-checked="true"] { background: var(--cz-bluebg); }
52
- .ins-menu small { display: block; font-weight: 600; color: var(--cz-ink3); font-size: var(--fs-2); }
52
+ .ins-menu small { display: block; font-weight: var(--fw-strong); color: var(--cz-ink3); font-size: var(--fs-label); line-height: var(--lh-label); }
53
53
  .ins-menu [role="menuitem"], .ins-menu [data-view] { flex-direction: column; gap: 0; }
54
54
  .ins-menu .ins-ck { width: 18px; flex: none; }
55
- .ins-mh { margin: 6px 12px 2px; font-size: var(--fs-1); font-weight: 800; color: var(--cz-ink3); }
55
+ .ins-mh { margin: 6px 12px 2px; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
56
56
  .ins-mnote { margin: 0; padding: 6px 12px 8px; line-height: 1.4; }
57
57
  .ins-cust { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; padding: 4px 12px 6px; }
58
58
  .ins-cust[hidden] { display: none; }
59
- .ins-cust label { display: flex; flex-direction: column; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); gap: 3px; }
60
- .ins-cust input { height: 32px; border: 1px solid var(--cz-hair); border-radius: 10px; padding: 0 8px; font: inherit; font-size: var(--fs-3); background: var(--cz-card); color: var(--cz-ink); }
59
+ .ins-cust label { display: flex; flex-direction: column; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); gap: 3px; line-height: var(--lh-label); }
60
+ .ins-cust input { height: 32px; border: 1px solid var(--cz-hair); border-radius: 10px; padding: 0 8px; font: inherit; font-size: var(--fs-body); background: var(--cz-card); color: var(--cz-ink); line-height: var(--lh-body); }
61
61
 
62
62
  /* ── the strip ── */
63
- .ins-strip { display: flex; align-items: center; gap: 10px; background: var(--cz-well); border-radius: 16px; padding: 8px 8px 8px 14px; font-size: var(--fs-3); }
63
+ .ins-strip { display: flex; align-items: center; gap: 10px; background: var(--cz-well); border-radius: 16px; padding: 8px 8px 8px 14px; font-size: var(--fs-body); line-height: var(--lh-body); }
64
64
  .ins-strip .sp { color: var(--cz-blueink); display: inline-flex; }
65
65
  .ins-strip .sp svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
66
66
  .ins-strip .t { flex: 1; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--cz-ink2); }
67
- .ins-strip .t b { font-weight: 800; color: var(--cz-ink); }
67
+ .ins-strip .t b { font-weight: var(--fw-strong); color: var(--cz-ink); }
68
68
  .ins-strip #insWhy { color: var(--cz-ink3); }
69
69
  .ins-strip .cz-chip { text-decoration: none; flex: none; color: var(--cz-ink2); }
70
70
  .ins-pane { display: flex; flex-direction: column; gap: 12px; }
@@ -78,28 +78,28 @@ body.cz { padding: 0; }
78
78
  .ins-ocols { grid-template-columns: minmax(200px, 270px) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) 96px; }
79
79
  .ins-dcols { grid-template-columns: minmax(200px, 270px) 110px 150px minmax(0, 1fr) 150px 112px; }
80
80
  .ins-lcols { grid-template-columns: 40px minmax(0, 1fr) 170px 200px 190px 90px; }
81
- .ins-th { background: var(--cz-well); font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink2); min-height: 36px; }
82
- .ins-th span { color: var(--cz-ink3); font-weight: 600; }
81
+ .ins-th { background: var(--cz-well); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); min-height: 36px; line-height: var(--lh-label); }
82
+ .ins-th span { color: var(--cz-ink3); font-weight: var(--fw-strong); }
83
83
  .ins-mvh { display: flex; justify-content: space-between; align-items: center; }
84
- .ins-lg { display: inline-flex; gap: 12px; align-items: center; font-size: var(--fs-1); font-weight: 600; color: var(--cz-ink3); margin-left: 6px; }
84
+ .ins-lg { display: inline-flex; gap: 12px; align-items: center; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); margin-left: 6px; line-height: var(--lh-badge); }
85
85
  .ins-lg span { display: inline-flex; align-items: center; gap: 5px; }
86
86
  .ins-tdk { width: 2px; height: 10px; background: var(--cz-ink); display: inline-block; }
87
- .ins-grp { background: var(--cz-c-fbfaf8); border-top: 1px solid var(--cz-hair); min-height: 34px; font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink2); display: flex; align-items: center; gap: 8px; padding: 0 16px; flex-wrap: wrap; }
87
+ .ins-grp { background: var(--cz-c-fbfaf8); border-top: 1px solid var(--cz-hair); min-height: 34px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); display: flex; align-items: center; gap: 8px; padding: 0 16px; flex-wrap: wrap; line-height: var(--lh-label); }
88
88
  .cz.dark .ins-grp, html.dark .cz .ins-grp, :root[data-theme="dark"] .cz .ins-grp { background: var(--cz-well2); }
89
- .ins-grp h2 { font-size: var(--fs-2); font-weight: 800; margin: 0; }
90
- .ins-grp .cz-pill { margin-left: 4px; font-weight: 600; color: var(--cz-ink3); } /* quiet: the design's group pill keeps its tint, in grey text */
89
+ .ins-grp h2 { font-size: var(--fs-label); font-weight: var(--fw-strong); margin: 0; line-height: var(--lh-label); }
90
+ .ins-grp .cz-pill { margin-left: 4px; font-weight: var(--fw-strong); color: var(--cz-ink3); } /* quiet: the design's group pill keeps its tint, in grey text */
91
91
  .ins-row { border-top: 1px solid var(--cz-hair); min-height: 70px; padding-top: 7px; padding-bottom: 7px; cursor: pointer; }
92
92
  .ins-row.ins-ocols { cursor: default; align-items: start; padding-top: 10px; padding-bottom: 10px; }
93
93
  @media (hover: hover) { .ins-row:hover { background: rgba(244, 243, 240, .35); } .cz.dark .ins-row:hover, html.dark .cz .ins-row:hover { background: var(--cz-well); } }
94
94
  .ins-row.sel, .ins-row.sel:hover { background: var(--cz-bluebg); }
95
95
  .ins-row .nm { display: flex; gap: 10px; align-items: center; min-width: 0; }
96
- .ins-row .nm b { display: block; font-size: var(--fs-3); font-weight: 800; line-height: 1.25; }
97
- .ins-row .nm small { display: flex; gap: 6px; align-items: center; margin-top: 3px; font-size: var(--fs-2); color: var(--cz-ink3); white-space: nowrap; min-width: 0; }
96
+ .ins-row .nm b { display: block; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: 1.25; }
97
+ .ins-row .nm small { display: flex; gap: 6px; align-items: center; margin-top: 3px; font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; min-width: 0; line-height: var(--lh-meta); }
98
98
  .ins-sub { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
99
99
  .ins-row .nm > span { min-width: 0; max-width: 100%; }
100
100
  .ins-row .nm a { color: inherit; text-decoration: none; }
101
- .ins .ins-type, .ins-side .ins-type { font-weight: 700; font-size: var(--fs-1); padding: 1px 7px; }
102
- .ins-row .val b { font-size: var(--fs-5); font-weight: 800; letter-spacing: -.01em; }
101
+ .ins .ins-type, .ins-side .ins-type { font-weight: var(--fw-strong); font-size: var(--fs-badge); padding: 1px 7px; line-height: var(--lh-badge); }
102
+ .ins-row .val b { font-size: var(--fs-display); font-weight: var(--fw-strong); letter-spacing: -.01em; line-height: var(--lh-display); }
103
103
  .ins-bar1 { position: relative; height: 6px; border-radius: 3px; background: var(--cz-c-eceae6); margin-top: 6px; width: 130px; }
104
104
  .cz.dark .ins-bar1, html.dark .cz .ins-bar1 { background: var(--cz-well2); }
105
105
  .ins-bar1 i { display: block; height: 100%; border-radius: 3px; }
@@ -119,15 +119,15 @@ body.cz { padding: 0; }
119
119
  .ins-blocks { display: flex; gap: 3px; max-width: 100%; }
120
120
  .ins-blocks i { flex: 1; height: 20px; border-radius: 5px; display: block; background: var(--cz-c-eceae6); }
121
121
  .ins-blocks i.on { background: var(--cz-c-8c929b); }
122
- .ins-steps { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-2); color: var(--cz-ink3); }
122
+ .ins-steps { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
123
123
  .ins-steps span { display: flex; align-items: center; gap: 6px; }
124
124
  .ins-steps span.on { color: var(--cz-ink2); }
125
125
  .ins-steps .ins-cb { width: 14px; height: 14px; border-radius: 4px; }
126
- .ins-row .pace { font-size: var(--fs-2); line-height: 1.35; color: var(--cz-ink2); }
127
- .ins-row .pace b { font-weight: 800; }
128
- .ins-row .pace .note { font-size: var(--fs-2); }
126
+ .ins-row .pace { font-size: var(--fs-meta); line-height: 1.35; color: var(--cz-ink2); }
127
+ .ins-row .pace b { font-weight: var(--fw-strong); }
128
+ .ins-row .pace .note { font-size: var(--fs-meta); line-height: var(--lh-meta); }
129
129
  .ins-row .mv { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
130
- .ins-ini { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); min-width: 0; text-decoration: none; border-radius: 8px; }
130
+ .ins-ini { display: flex; align-items: center; gap: 8px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); min-width: 0; text-decoration: none; border-radius: 8px; line-height: var(--lh-label); }
131
131
  @media (hover: hover) { .ins-ini:hover .n { text-decoration: underline; } }
132
132
  .ins-ini .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
133
133
  .ins-ini .cz-pill { margin-left: auto; }
@@ -142,8 +142,8 @@ body.cz { padding: 0; }
142
142
  .ins-cb { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--cz-c-a9aeb6); flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--cz-card); box-sizing: border-box; }
143
143
  .ins-cb.on { background: var(--cz-blue); border-color: var(--cz-blue); color: var(--cz-card); }
144
144
  .ins-cb svg { width: 10px; height: 10px; }
145
- .ins-empty { padding: 16px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-2); color: var(--cz-ink2); }
146
- .ins-empty.ins-sm2 { padding: 12px 16px; font-size: var(--fs-2); color: var(--cz-ink3); }
145
+ .ins-empty { padding: 16px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
146
+ .ins-empty.ins-sm2 { padding: 12px 16px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
147
147
  .ins-budget .val b, .ins-budget .pace b { color: var(--cz-ink3); }
148
148
  .ins-cards { display: none; }
149
149
 
@@ -155,8 +155,8 @@ body.cz { padding: 0; }
155
155
  .ins-tile.warn { background: var(--cz-latebg); }
156
156
  /* Dark theme: cozy.css keeps --cz-latebg light, so the tile mixes the late dot into the dark well instead. */
157
157
  .cz.dark .ins-tile.warn, html.dark .cz .ins-tile.warn, :root[data-theme="dark"] .cz .ins-tile.warn { background: color-mix(in srgb, var(--cz-dot-late) 18%, var(--cz-well)); }
158
- .ins-tile .l { font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
159
- .ins-tile .v { font-size: var(--fs-3); font-weight: 800; }
158
+ .ins-tile .l { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-label); }
159
+ .ins-tile .v { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
160
160
  .ins-tile.abs .v { color: var(--cz-ink3); }
161
161
  .ins .ins-tsp { display: block; width: 150px; max-width: 100%; height: 18px; overflow: visible; }
162
162
  .ins-tsp0 { display: block; height: 18px; }
@@ -165,22 +165,22 @@ body.cz { padding: 0; }
165
165
 
166
166
  /* ── Outcomes ── */
167
167
  .ins-prom { display: grid; grid-template-columns: 92px minmax(0, 1fr) 190px; align-items: center; gap: 10px; padding: 3px 0; }
168
- .ins-prom .pt { font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink); }
168
+ .ins-prom .pt { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-label); }
169
169
  .ins-prom .pr { display: flex; align-items: center; gap: 8px; }
170
- .ins-prom b { font-size: var(--fs-2); font-weight: 800; white-space: nowrap; }
170
+ .ins-prom b { font-size: var(--fs-label); font-weight: var(--fw-strong); white-space: nowrap; line-height: var(--lh-label); }
171
171
  .ins-bul { position: relative; height: 12px; border-radius: 6px; background: var(--cz-c-f0eeea, var(--cz-well2)); flex: none; }
172
172
  .ins-bul .ex { position: absolute; top: 0; bottom: 0; border: 1.5px dashed var(--cz-c-8c929b); border-radius: 6px; box-sizing: border-box; }
173
173
  .ins-bul .ac { position: absolute; top: 2px; bottom: 2px; border-radius: 4px; }
174
174
  .ins-bul .z { position: absolute; top: -3px; bottom: -3px; width: 1.5px; background: var(--cz-ink3); }
175
- .ins-guard { font-size: var(--fs-2); color: var(--cz-ink2); }
176
- .ins-guard .note { font-size: var(--fs-2); color: var(--cz-ink2); }
175
+ .ins-guard { font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
176
+ .ins-guard .note { font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
177
177
  .ins-ov { margin-top: 4px; }
178
178
  .ins-win { height: 5px; border-radius: 3px; background: var(--cz-c-eceae6); width: 120px; margin-top: 6px; }
179
179
  .ins-win i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--cz-c-8c929b); }
180
180
  .ins-win + .note { margin-top: 4px; }
181
181
  .ins-row.ins-ocols .nm { flex-direction: column; align-items: flex-start; gap: 6px; }
182
182
  .ins-row.ins-ocols .cz-pill + .note { margin-top: 4px; }
183
- .ins-dec { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; background: var(--cz-ink); color: var(--cz-card); border: 0; font: inherit; font-size: var(--fs-2); font-weight: 700; cursor: pointer; white-space: nowrap; }
183
+ .ins-dec { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; background: var(--cz-ink); color: var(--cz-card); border: 0; font: inherit; font-size: var(--fs-label); font-weight: var(--fw-strong); cursor: pointer; white-space: nowrap; line-height: var(--lh-label); }
184
184
  .ins-dec svg { width: 14px !important; height: 14px !important; }
185
185
 
186
186
  /* ── Library ── */
@@ -188,17 +188,17 @@ body.cz { padding: 0; }
188
188
  .ins-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
189
189
  .ins-chips .cz-chip { color: var(--cz-ink2); }
190
190
  .ins-lnote { margin-left: auto; }
191
- .ins-sec { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink2); padding: 2px 4px; }
192
- .ins-sec h3 { margin: 0; font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink2); }
191
+ .ins-sec { display: flex; align-items: center; gap: 8px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); padding: 2px 4px; line-height: var(--lh-label); }
192
+ .ins-sec h3 { margin: 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
193
193
  #listRows { display: flex; flex-direction: column; gap: 12px; }
194
194
  .ins-lhead { min-height: 36px; }
195
- .ins .ins-lhead span { color: var(--cz-ink2); font-weight: 800; }
195
+ .ins .ins-lhead span { color: var(--cz-ink2); font-weight: var(--fw-strong); }
196
196
  .ins-lrow { display: contents; font: inherit; color: inherit; background: none; border: 0; text-align: left; cursor: pointer; }
197
197
  .ins-lcols.ins-row { min-height: 60px; padding-top: 7px; padding-bottom: 7px; }
198
198
  .ins-lrow .nm { display: block; min-width: 0; }
199
- .ins-lrow .nm b { display: block; font-size: var(--fs-3); font-weight: 800; }
200
- .ins-lrow .nm small { display: block; font-size: var(--fs-2); color: var(--cz-ink3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
201
- .ins .ins-when { font-size: var(--fs-2); }
199
+ .ins-lrow .nm b { display: block; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
200
+ .ins-lrow .nm small { display: block; font-size: var(--fs-meta); color: var(--cz-ink3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-meta); }
201
+ .ins .ins-when { font-size: var(--fs-meta); line-height: var(--lh-meta); }
202
202
  .lic { width: 40px; height: 40px; border-radius: 12px; background: var(--cz-bluebg); color: var(--cz-blueink); display: flex; align-items: center; justify-content: center; }
203
203
  .ins-dots { display: inline-flex; gap: 3px; }
204
204
  .ins-dots i { width: 9px; height: 9px; border-radius: 3px; background: var(--cz-c-8c929b); display: block; }
@@ -206,19 +206,19 @@ body.cz { padding: 0; }
206
206
  .ins-dots i.dr0 { background: var(--cz-c-eceae6); }
207
207
  .ins-dots + small { display: block; margin-top: 4px; }
208
208
  .ins-from { display: flex; flex-wrap: wrap; gap: 4px; }
209
- .ins-from .cz-pill { font-weight: 700; }
209
+ .ins-from .cz-pill { font-weight: var(--fw-strong); }
210
210
  .ins-act { display: flex; justify-content: flex-end; }
211
211
  .ins-dgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
212
212
  .ins-dcard { display: flex; flex-direction: column; gap: 8px; background: var(--cz-card); border: 1px solid var(--cz-hair); border-radius: 18px; padding: 12px 14px; text-align: left; cursor: pointer; color: inherit; font: inherit; min-width: 0; }
213
213
  @media (hover: hover) { .ins-dcard:hover { box-shadow: 0 6px 18px -8px rgba(42,46,53,.2); } }
214
214
  .ins-dh { display: flex; align-items: center; gap: 6px; }
215
- .ins-dh b { font-size: var(--fs-3); font-weight: 800; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
215
+ .ins-dh b { font-size: var(--fs-row); font-weight: var(--fw-strong); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--lh-row); }
216
216
  .ins-pinned { display: inline-flex; color: var(--cz-ink2); }
217
217
  .ins .ins-pinned svg { width: 14px; height: 14px; }
218
218
  .ins-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
219
219
  .ins-mini { background: var(--cz-well); border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; min-width: 0; }
220
- .ins-mini small { font-size: var(--fs-1); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
221
- .ins-mini b { font-size: var(--fs-2); font-weight: 800; }
220
+ .ins-mini small { font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-meta); }
221
+ .ins-mini b { font-size: var(--fs-label); font-weight: var(--fw-strong); line-height: var(--lh-label); }
222
222
  .ins .ins-mini svg { width: 100%; height: 26px; }
223
223
  .ins-mini .ar { fill: rgba(42,46,53,.05); stroke: none; }
224
224
  .ins-mini .ln { fill: none; stroke: var(--cz-ink2); stroke-width: 1.6; }
@@ -232,12 +232,12 @@ body.cz { padding: 0; }
232
232
  .ins-side *, .ins-side *::before, .ins-side *::after { box-sizing: border-box; }
233
233
  .ins-sh { padding: 18px 18px 10px; display: flex; align-items: flex-start; gap: 8px; }
234
234
  .ins-sh > div { flex: 1; min-width: 0; }
235
- .ins-eye { margin: 0; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
236
- .ins-sh h2 { margin: 2px 0 0; font-size: var(--fs-5); font-weight: 800; }
237
- .ins-objb { display: inline-flex; align-items: center; gap: 2px; font: inherit; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); background: none; border: 0; padding: 0; cursor: pointer; }
235
+ .ins-eye { margin: 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; line-height: var(--lh-label); }
236
+ .ins-sh h2 { margin: 2px 0 0; font-size: var(--fs-panel); font-weight: var(--fw-strong); line-height: var(--lh-panel); }
237
+ .ins-objb { display: inline-flex; align-items: center; gap: 2px; font: inherit; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); background: none; border: 0; padding: 0; cursor: pointer; line-height: var(--lh-label); }
238
238
  .ins-side .ins-objb svg { width: 12px; height: 12px; }
239
239
  .ins-onew { height: 30px; margin-top: 4px; }
240
- .ins-tin { width: 100%; font: inherit; font-size: var(--fs-5); font-weight: 800; color: var(--cz-ink); border: 0; background: none; padding: 0; outline: 0; }
240
+ .ins-tin { width: 100%; font: inherit; font-size: var(--fs-panel); font-weight: var(--fw-strong); color: var(--cz-ink); border: 0; background: none; padding: 0; outline: 0; line-height: var(--lh-panel); }
241
241
  .ins-tin::placeholder { color: var(--cz-ink3); }
242
242
  .ins-side .ins-tin:focus, .ins-side .ins-tin:focus-visible { outline: none; } /* the name is the heading: a caret, no field ring */
243
243
  .ins-st { display: inline-flex; gap: 2px; align-items: center; }
@@ -248,19 +248,19 @@ body.cz { padding: 0; }
248
248
  .ins-sa { display: inline-flex; gap: 6px; align-items: center; }
249
249
  .ins-sm:empty { display: none; }
250
250
  .ins-sm { color: var(--cz-late); flex-basis: 100%; order: -1; margin: 0; }
251
- .ins-primary { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--cz-ink); color: var(--cz-card); border: 0; font-size: var(--fs-2); font-weight: 700; cursor: pointer; }
251
+ .ins-primary { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--cz-ink); color: var(--cz-card); border: 0; font-size: var(--fs-label); font-weight: var(--fw-strong); cursor: pointer; line-height: var(--lh-label); }
252
252
  .ins-primary svg { width: 15px !important; height: 15px !important; }
253
253
  .ins-primary:disabled { opacity: .45; cursor: not-allowed; }
254
- .ins-fl { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink2); margin: 0; }
254
+ .ins-fl { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); margin: 0; line-height: var(--lh-label); }
255
255
  p.ins-fl { flex-direction: row; align-items: center; margin: 0 0 6px; flex-wrap: wrap; }
256
256
  .ins-fl > span { display: flex; align-items: center; gap: 6px; }
257
- .ins-ns { font-size: var(--fs-1); font-weight: 600; color: var(--cz-ink3); background: var(--cz-well); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
257
+ .ins-ns { font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); background: var(--cz-well); border-radius: 999px; padding: 1px 7px; white-space: nowrap; line-height: var(--lh-badge); }
258
258
  .ins-fn { margin-top: 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
259
- .ins-inp, .ins-ta { width: 100%; height: 38px; border: 1px solid var(--cz-hair); border-radius: 12px; padding: 0 12px; background: var(--cz-card); font: inherit; font-size: var(--fs-3); font-weight: 600; color: var(--cz-ink); }
260
- .ins-ta { min-height: 60px; padding: 8px 10px; resize: vertical; font-size: var(--fs-3); }
259
+ .ins-inp, .ins-ta { width: 100%; height: 38px; border: 1px solid var(--cz-hair); border-radius: 12px; padding: 0 12px; background: var(--cz-card); font: inherit; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-row); }
260
+ .ins-ta { min-height: 60px; padding: 8px 10px; resize: vertical; font-size: var(--fs-body); line-height: var(--lh-body); }
261
261
  .ins-side #vdLearn { resize: none; }
262
262
  /* a number with its unit and, for a baseline, the day it is read: one field (AgInsNewGoal "24% on Oct 1") */
263
- .ins-fl > .ins-uf { display: flex; align-items: center; gap: 0; height: 38px; border: 1px solid var(--cz-hair); border-radius: 12px; padding: 0 12px; background: var(--cz-card); font-size: var(--fs-3); font-weight: 600; color: var(--cz-ink); cursor: text; }
263
+ .ins-fl > .ins-uf { display: flex; align-items: center; gap: 0; height: 38px; border: 1px solid var(--cz-hair); border-radius: 12px; padding: 0 12px; background: var(--cz-card); font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); cursor: text; line-height: var(--lh-row); }
264
264
  .ins-uf:focus-within { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
265
265
  .ins-uf input { border: 0; outline: 0; background: none; font: inherit; color: inherit; padding: 0; min-width: 2ch; max-width: 100%; field-sizing: content; }
266
266
  .ins-uf input:focus-visible { outline: none; }
@@ -274,7 +274,7 @@ p.ins-fl { flex-direction: row; align-items: center; margin: 0 0 6px; flex-wrap:
274
274
  .ins-sel.ins-psel { width: 150px; flex: none; }
275
275
  .ins-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
276
276
  .ins-box { background: var(--cz-well); border-radius: 14px; padding: 10px 12px; margin: 0; line-height: 1.45; }
277
- .ins-side .ins-box.note { font-size: var(--fs-2); }
277
+ .ins-side .ins-box.note { font-size: var(--fs-meta); line-height: var(--lh-meta); }
278
278
  .ins-side .cz-seg.ins-wrap { flex-wrap: wrap; border-radius: 18px; }
279
279
 
280
280
  .ins-prow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@@ -285,20 +285,20 @@ p.ins-fl { flex-direction: row; align-items: center; margin: 0 0 6px; flex-wrap:
285
285
  .ins-dg .cz-chip.on { color: var(--cz-blueink); }
286
286
  .ins-desc { display: flex; align-items: center; gap: 6px; background: var(--cz-well); border-radius: 18px; padding: 6px 6px 6px 14px; margin: 0; }
287
287
  .ins-desc .sp { color: var(--cz-blueink); display: inline-flex; }
288
- .ins-desc input { flex: 1; height: 36px; border: 0; background: transparent; font: inherit; font-size: var(--fs-2); color: var(--cz-ink); outline: 0; min-width: 0; }
288
+ .ins-desc input { flex: 1; height: 36px; border: 0; background: transparent; font: inherit; font-size: var(--fs-meta); color: var(--cz-ink); outline: 0; min-width: 0; line-height: var(--lh-meta); }
289
289
  .ins-side .ins-desc input:focus-visible, .ins .ins-finp input:focus-visible { outline: none; } /* the rounded box shows the focus, not a square ring inside it */
290
290
  .ins-desc:focus-within, .ins-finp:focus-within { box-shadow: 0 0 0 2px var(--cz-blue); }
291
291
  .ins-side .cz-ib.sm { width: 32px; height: 32px; }
292
292
  .ins-side .cz-ib:disabled { opacity: .45; cursor: not-allowed; }
293
293
  .ins-picked { display: flex; flex-direction: column; }
294
- .ins-pk { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-3); }
294
+ .ins-pk { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-body); line-height: var(--lh-body); }
295
295
  .ins-pk:last-child { border-bottom: 0; }
296
296
  .ins-pk:focus-visible { outline: 2px solid var(--cz-focus, var(--cz-ink)); outline-offset: 2px; border-radius: 8px; }
297
- .ins-pk b { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
298
- .ins-grip { color: var(--cz-ink3); font-size: var(--fs-1); cursor: grab; display: inline-flex; flex: none; }
297
+ .ins-pk b { flex: 1; font-weight: var(--fw-strong); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
298
+ .ins-grip { color: var(--cz-ink3); font-size: var(--fs-meta); cursor: grab; display: inline-flex; flex: none; line-height: var(--lh-meta); }
299
299
  .ins-addg { margin-top: 6px; color: var(--cz-ink2); }
300
300
  .ins-rrow { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
301
- .ins-togw { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-3); font-weight: 700; min-height: 34px; }
301
+ .ins-togw { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-row); font-weight: var(--fw-strong); min-height: 34px; line-height: var(--lh-row); }
302
302
  .ins-togs { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
303
303
  .ins-tog { width: 34px; height: 20px; border-radius: 999px; background: var(--cz-c-d9dce1); position: relative; flex: none; border: 0; cursor: pointer; padding: 0; }
304
304
  .ins-tog::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--cz-card); }
@@ -309,14 +309,14 @@ p.ins-fl { flex-direction: row; align-items: center; margin: 0 0 6px; flex-wrap:
309
309
  .ins-opt.on { border-color: rgba(72,148,234,.6); box-shadow: 0 0 0 3px rgba(72,148,234,.12); background: var(--cz-bluebg); }
310
310
  .ins-opt .rd { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--cz-c-a9aeb6); flex: none; margin-top: 2px; }
311
311
  .ins-opt.on .rd { border: 5px solid var(--cz-blue); }
312
- .ins-opt b { display: block; font-size: var(--fs-3); font-weight: 800; }
313
- .ins-opt small { display: block; font-size: var(--fs-2); color: var(--cz-ink3); }
314
- .ins-kv3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: var(--cz-well); border-radius: 14px; padding: 10px 12px; font-size: var(--fs-2); }
315
- .ins-kv3 small { display: block; font-size: var(--fs-1); color: var(--cz-ink3); }
316
- .ins-kv3 b { font-size: var(--fs-4); font-weight: 800; }
312
+ .ins-opt b { display: block; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
313
+ .ins-opt small { display: block; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
314
+ .ins-kv3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: var(--cz-well); border-radius: 14px; padding: 10px 12px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
315
+ .ins-kv3 small { display: block; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
316
+ .ins-kv3 b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
317
317
  .ins-prev { border: 1px solid var(--cz-hair); border-radius: 14px; padding: 10px 12px; background: var(--cz-card); }
318
318
  .ins-ph { display: flex; align-items: baseline; gap: 8px; }
319
- .ins-ph b { font-size: var(--fs-5); font-weight: 800; }
319
+ .ins-ph b { font-size: var(--fs-display); font-weight: var(--fw-strong); line-height: var(--lh-display); }
320
320
  .ins-pe { margin: 10px 0 4px; }
321
321
  .ins-ch2 { display: block; width: 100%; height: 140px; overflow: visible; margin-top: 6px; }
322
322
  .ins-ch2 rect.cu { fill: var(--cz-c-8c929b); }
@@ -326,15 +326,15 @@ p.ins-fl { flex-direction: row; align-items: center; margin: 0 0 6px; flex-wrap:
326
326
  .ins-ch2 .shipd { fill: var(--cz-blue); }
327
327
  .ins-px { display: flex; justify-content: space-between; }
328
328
  .ins-num { display: flex; align-items: baseline; gap: 8px; padding: 18px 0; }
329
- .ins-num b { font-size: var(--fs-6); font-weight: 800; }
329
+ .ins-num b { font-size: var(--fs-display); font-weight: var(--fw-strong); line-height: var(--lh-display); }
330
330
  .ins-meter { position: relative; height: 14px; border-radius: 7px; background: var(--cz-c-eceae6); margin: 22px 0; }
331
331
  .ins-meter i { display: block; height: 100%; border-radius: 7px; }
332
332
  .ins-meter .tg { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--cz-ink); }
333
333
  .ins-src { display: flex; flex-direction: column; }
334
- .ins-src div { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-2); color: var(--cz-ink2); }
335
- .ins-src b { color: var(--cz-ink); font-weight: 800; }
334
+ .ins-src div { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
335
+ .ins-src b { color: var(--cz-ink); font-weight: var(--fw-strong); }
336
336
  .ins-vbody { padding: 16px 20px; }
337
- .ins-about p { margin: 0 0 10px; font-size: var(--fs-2); line-height: 1.5; color: var(--cz-ink2); }
337
+ .ins-about p { margin: 0 0 10px; font-size: var(--fs-meta); line-height: 1.5; color: var(--cz-ink2); }
338
338
 
339
339
  /* ── a narrower desktop: the tables keep their columns and the tiles wrap ── */
340
340
  @media (max-width: 1240px) and (min-width: 721px) {
@@ -353,7 +353,7 @@ p.ins-fl { flex-direction: row; align-items: center; margin: 0 0 6px; flex-wrap:
353
353
  .ins .cz-ib::after, .ins .cz-tab::after, .ins .cz-chip::after, .ins .cz-pick::after, .ins .cz-seg button::after, .ins .lk::after, .ins-ini::after, .ins-dec::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; min-height: 100%; transform: translateY(-50%); }
354
354
  body.ins-sideon .cz-fabw { display: none; } /* the side panel covers the screen; the floating menu would sit on its footer */
355
355
  .ins-bar { gap: 6px; }
356
- .ins-ttl { display: block; font-weight: 800; font-size: var(--fs-4); margin: 0 auto 0 4px; order: 1; }
356
+ .ins-ttl { display: block; font-weight: var(--fw-strong); font-size: var(--fs-row); margin: 0 auto 0 4px; order: 1; line-height: var(--lh-row); }
357
357
  .ins-pkw { order: 0; }
358
358
  .ins-tools { order: 2; margin-left: 0; display: contents; }
359
359
  .ins-tools > * { order: 2; }
@@ -367,11 +367,11 @@ p.ins-fl { flex-direction: row; align-items: center; margin: 0 0 6px; flex-wrap:
367
367
  .ins-cards { display: flex; flex-direction: column; gap: 8px; }
368
368
  .ins-card { display: block; width: 100%; background: var(--cz-card); border: 1px solid var(--cz-hair); border-radius: 18px; padding: 11px 14px; cursor: pointer; box-sizing: border-box; }
369
369
  .ins-ch { display: flex; align-items: center; gap: 8px; }
370
- .ins-ch b { font-size: var(--fs-3); font-weight: 800; }
370
+ .ins-ch b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
371
371
  .ins-ch .cz-pill { margin-left: auto; }
372
372
  .ins-cs { display: flex; gap: 6px; align-items: center; margin-top: 2px; }
373
373
  .ins-cv { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
374
- .ins-cv > b { font-size: var(--fs-5); font-weight: 800; }
374
+ .ins-cv > b { font-size: var(--fs-panel); font-weight: var(--fw-strong); line-height: var(--lh-panel); }
375
375
  .ins-cg { flex: 1; min-width: 0; }
376
376
  .ins-cg .ins-spark { width: 190px; max-width: 100%; height: 30px; }
377
377
  .ins-bar1.ins-wide { width: 100%; }
@@ -413,46 +413,46 @@ p.ins-fl { flex-direction: row; align-items: center; margin: 0 0 6px; flex-wrap:
413
413
 
414
414
  /* the minimal panels the Agreed design does not draw yet (goal detail, budget, tile target, report flows), in the Viewer card */
415
415
  .ins-vbody .cz-ph { margin-bottom: 12px; }
416
- .ins-kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 12px; margin: 0 0 14px; font-size: var(--fs-3); }
417
- .ins-kv dt { color: var(--cz-ink3); font-weight: 700; }
416
+ .ins-kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 12px; margin: 0 0 14px; font-size: var(--fs-body); line-height: var(--lh-body); }
417
+ .ins-kv dt { color: var(--cz-ink3); font-weight: var(--fw-strong); }
418
418
  .ins-kv dd { margin: 0; color: var(--cz-ink); min-width: 0; overflow-wrap: anywhere; }
419
419
  .ins-mf { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 16px; }
420
420
  .ins-mact { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
421
421
  .ins-mact .cz-chip, .ins-mact .ins-primary { min-height: 40px; }
422
422
  .ins-rd { list-style: none; margin: 0 0 14px; padding: 0; max-height: 220px; overflow: auto; }
423
- .ins-rd li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-2); color: var(--cz-ink2); }
423
+ .ins-rd li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
424
424
  .ins-rd li b { color: var(--cz-ink); }
425
- .ins-ck2 { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: var(--fs-3); color: var(--cz-ink); }
426
- .ins-ev { margin: 4px 0 10px; padding-left: 18px; font-size: var(--fs-2); color: var(--cz-ink2); line-height: 1.5; }
425
+ .ins-ck2 { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: var(--fs-body); color: var(--cz-ink); line-height: var(--lh-body); }
426
+ .ins-ev { margin: 4px 0 10px; padding-left: 18px; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: 1.5; }
427
427
  .ins-fnd { padding: 12px 0; border-bottom: 1px solid var(--cz-hair); }
428
428
  .ins-fnd:last-child { border-bottom: 0; }
429
- .ins-fnd > b { font-size: var(--fs-3); font-weight: 800; color: var(--cz-ink); }
429
+ .ins-fnd > b { font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-row); }
430
430
  .ins-side [hidden], .ins-vbody [hidden] { display: none !important; }
431
431
 
432
432
  /* ── premium-uncovered-features: IsGoal, IsTarget, IsLibrary, IsMenus, IsPhone ─────────────────────────────────────────────────────── */
433
433
  /* menus: a key at the right of an item, a hairline between groups, the filter's chip groups and Find's popover (IsMenus) */
434
- .ins-menu button .k { margin-left: auto; padding-left: 12px; font-size: var(--fs-2); font-weight: 600; color: var(--cz-ink3); white-space: nowrap; align-self: center; }
434
+ .ins-menu button .k { margin-left: auto; padding-left: 12px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); white-space: nowrap; align-self: center; line-height: var(--lh-label); }
435
435
  .ins-menu button > svg { width: 16px; height: 16px; color: var(--cz-ink2); align-self: center; }
436
436
  .ins-hr { height: 1px; background: var(--cz-hair); margin: 4px 0; flex: none; }
437
437
  .ins-filtp { width: 330px; padding: 10px 6px 12px; }
438
438
  .ins-fchips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 12px 6px; }
439
- .ins-menu .ins-fchips .cz-chip { width: auto; padding: 0 11px; font-size: var(--fs-2); font-weight: 600; border-radius: 999px; align-items: center; min-height: 30px; }
439
+ .ins-menu .ins-fchips .cz-chip { width: auto; padding: 0 11px; font-size: var(--fs-label); font-weight: var(--fw-strong); border-radius: 999px; align-items: center; min-height: 30px; line-height: var(--lh-label); }
440
440
  .ins-menu .ins-fclr { color: var(--cz-blueink); }
441
441
  .ins-findp { width: 380px; padding: 10px; }
442
442
  .ins-finp { display: flex; align-items: center; gap: 8px; height: 42px; border-radius: 14px; background: var(--cz-well); padding: 0 8px 0 14px; margin-bottom: 4px; }
443
443
  .ins-finp > svg { width: 16px; height: 16px; color: var(--cz-ink3); }
444
- .ins-finp input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; font: inherit; font-size: var(--fs-3); font-weight: 700; color: var(--cz-ink); outline: 0; }
445
- .ins-menu .ins-kbd, .ins-kbd { width: auto; display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 7px; background: var(--cz-card); font-size: var(--fs-1); font-weight: 700; color: var(--cz-ink3); }
444
+ .ins-finp input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; font: inherit; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); outline: 0; line-height: var(--lh-row); }
445
+ .ins-menu .ins-kbd, .ins-kbd { width: auto; display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 7px; background: var(--cz-card); font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
446
446
  .ins-fres .ins-fo > span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; gap: 2px; }
447
- .ins-fres small { font-size: var(--fs-2); font-weight: 600; color: var(--cz-ink3); }
447
+ .ins-fres small { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
448
448
  .ins-fres mark { background: var(--cz-bluebg); color: var(--cz-blueink); border-radius: 4px; padding: 0 2px; }
449
449
  /* the empty trend: the one value, not a flat line (IsMenus) */
450
450
  .ins-one { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
451
451
  .cz-pill.ins-dash { background: transparent; border: 1px dashed var(--cz-hair); box-shadow: inset 0 0 0 1px var(--cz-hair); color: var(--cz-ink3); }
452
452
 
453
453
  /* buttons and parts the frames share, in the page and in the Viewer card */
454
- .ins-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cz-hair); box-shadow: inset 0 0 0 1px var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: inherit; font-size: var(--fs-3); font-weight: 700; white-space: nowrap; cursor: pointer; text-decoration: none; }
455
- .ins-btn.sm { height: 30px; padding: 0 11px; font-size: var(--fs-2); }
454
+ .ins-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cz-hair); box-shadow: inset 0 0 0 1px var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: inherit; font-size: var(--fs-row); font-weight: var(--fw-strong); white-space: nowrap; cursor: pointer; text-decoration: none; line-height: var(--lh-row); }
455
+ .ins-btn.sm { height: 30px; padding: 0 11px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
456
456
  .ins-btn.dark { background: var(--cz-ink); color: var(--cz-card); border-color: transparent; box-shadow: none; }
457
457
  .ins-btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--cz-ink2); }
458
458
  .ins-btn.wide { width: 100%; height: 44px; }
@@ -460,59 +460,59 @@ p.ins-fl { flex-direction: row; align-items: center; margin: 0 0 6px; flex-wrap:
460
460
  .ins-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
461
461
  .ins-clip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 30px; }
462
462
  .ins-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
463
- .ins-lbl { font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink3); margin: 4px 0 0; }
464
- .ins-h3 { font-size: var(--fs-4); font-weight: 800; margin: 0; }
465
- .ins-box { background: var(--cz-well); border-radius: 16px; padding: 12px 14px; font-size: var(--fs-3); }
463
+ .ins-lbl { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); margin: 4px 0 0; line-height: var(--lh-label); }
464
+ .ins-h3 { font-size: var(--fs-section); font-weight: var(--fw-strong); margin: 0; line-height: var(--lh-section); }
465
+ .ins-box { background: var(--cz-well); border-radius: 16px; padding: 12px 14px; font-size: var(--fs-body); line-height: var(--lh-body); }
466
466
  .ins-need { background: var(--cz-bluebg); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
467
467
  .ins-need .ins-kv { margin: 0; }
468
- .ins-trow { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-3); width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; font-family: inherit; color: var(--cz-ink); text-align: left; }
468
+ .ins-trow { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-body); width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; font-family: inherit; color: var(--cz-ink); text-align: left; line-height: var(--lh-body); }
469
469
  .ins-trow > span:first-child { flex: 1; min-width: 0; }
470
470
  .ins-trow:last-child { border-bottom: 0; }
471
471
  .ins-th2, .ins-rd3 { display: grid; grid-template-columns: minmax(0, 1fr) 80px 130px; gap: 10px; align-items: center; }
472
- .ins-th2 { font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink3); padding: 8px 4px; border-bottom: 1px solid var(--cz-hair); }
472
+ .ins-th2 { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); padding: 8px 4px; border-bottom: 1px solid var(--cz-hair); line-height: var(--lh-label); }
473
473
  .ins-rd3 > span:first-child { flex: none; }
474
474
  .ins-chips2 { display: flex; gap: 6px; flex-wrap: wrap; }
475
475
  .ins-chk { width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--cz-hair); box-shadow: inset 0 0 0 1px var(--cz-hair); flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; cursor: pointer; color: transparent; }
476
476
  .ins-chk svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; }
477
477
  .ins-chk.on { background: var(--cz-ink); border-color: var(--cz-ink); box-shadow: none; color: var(--cz-card); }
478
- .ins-chkl { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2); font-weight: 600; color: var(--cz-ink); }
478
+ .ins-chkl { display: flex; align-items: center; gap: 8px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-label); }
479
479
 
480
480
  /* the Viewer card's frames: a tab row, the sub line, the chart, the body (IsGoal, IsLibrary) */
481
481
  .ins-vbody svg[aria-hidden="true"] { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
482
482
  .ins-gd { display: flex; flex-direction: column; gap: 12px; font-family: var(--cz-sans); color: var(--cz-ink); }
483
483
  .ins-gd p { margin: 0; }
484
484
  .ins-vbar { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 14px; background: var(--cz-well); }
485
- .ins-vtab { height: 32px; padding: 0 12px; border-radius: 12px; border: 0; background: transparent; display: inline-flex; align-items: center; font: inherit; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); cursor: pointer; }
485
+ .ins-vtab { height: 32px; padding: 0 12px; border-radius: 12px; border: 0; background: transparent; display: inline-flex; align-items: center; font: inherit; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); cursor: pointer; line-height: var(--lh-label); }
486
486
  .ins-vtab.on { background: var(--cz-card); color: var(--cz-ink); box-shadow: 0 1px 2px rgba(42,46,53,.06); }
487
487
  .ins-vbar .ins-vedit { margin-left: auto; }
488
488
  .ins-gh { display: flex; flex-direction: column; gap: 2px; }
489
- .ins-gsub { font-size: var(--fs-2); color: var(--cz-ink3); }
489
+ .ins-gsub { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
490
490
  .ins-gb { display: flex; flex-direction: column; gap: 10px; }
491
491
  .ins-gch { width: 100%; height: auto; display: block; overflow: visible; }
492
492
  .ins-gch path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
493
493
  .ins-gch .base { stroke: var(--cz-hair); stroke-width: 1; }
494
494
  .ins-gch .tg { stroke: var(--cz-ok); stroke-dasharray: 4 4; stroke-width: 1.5; }
495
- .ins-gch .tgl { fill: var(--cz-ok); font-size: var(--fs-1); font-weight: 700; }
495
+ .ins-gch .tgl { fill: var(--cz-ok); font-size: var(--fs-badge); font-weight: var(--fw-strong); line-height: var(--lh-badge); }
496
496
  .ins-gch .ln { stroke: var(--cz-blue); }
497
497
  .ins-gch .pj { stroke: var(--cz-blue); stroke-dasharray: 3 5; }
498
498
  .ins-gch .pt { fill: var(--cz-card); stroke: var(--cz-blue); stroke-width: 2; }
499
499
  .ins-gch .pt.now { fill: var(--cz-blue); }
500
500
  .ins-gch .ship { stroke: var(--cz-ink3); stroke-width: 1; }
501
- .ins-gch .shipl { fill: var(--cz-ink3); font-size: var(--fs-1); }
501
+ .ins-gch .shipl { fill: var(--cz-ink3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
502
502
  .ins-etr { display: flex; align-items: center; gap: 10px; }
503
503
  .ins-etr > span { flex: 1; }
504
504
  .ins-mvl { display: flex; flex-direction: column; gap: 8px; }
505
505
  /* the goal Viewer (canvas OvViewers "Goal"): the big number over the chart, the milestones, Moved by */
506
506
  .ins-gbig { border-radius: 18px; box-shadow: inset 0 0 0 1px var(--cz-hair); background: var(--cz-card); padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 6px; }
507
507
  .ins-gnum { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
508
- .ins-gnum b { font-size: var(--fs-6); font-weight: 800; letter-spacing: -.02em; color: var(--cz-ink); }
509
- .ins-gnum span { font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); }
508
+ .ins-gnum b { font-size: var(--fs-display); font-weight: var(--fw-strong); letter-spacing: -.02em; color: var(--cz-ink); line-height: var(--lh-display); }
509
+ .ins-gnum span { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
510
510
  .ins-gch .msr { stroke: var(--cz-ink3); stroke-width: 1; stroke-dasharray: 1.5 3; opacity: .8; }
511
511
  .ins-gch .msd { fill: var(--cz-ink2); stroke: none; }
512
- .ins-gch .msl { fill: var(--cz-ink2); font-size: var(--fs-1); font-weight: 700; }
512
+ .ins-gch .msl { fill: var(--cz-ink2); font-size: var(--fs-badge); font-weight: var(--fw-strong); line-height: var(--lh-badge); }
513
513
  .ins-mvb { display: flex; flex-direction: column; gap: 8px; }
514
- .ins-mvb .ins-mvh { margin: 4px 0 0; font-size: var(--fs-3); font-weight: 800; color: var(--cz-ink); }
515
- .ins-mvb .ins-mvh span { font-weight: 700; font-size: var(--fs-2); color: var(--cz-ink3); margin-left: 4px; }
514
+ .ins-mvb .ins-mvh { margin: 4px 0 0; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-row); }
515
+ .ins-mvb .ins-mvh span { font-weight: var(--fw-strong); font-size: var(--fs-label); color: var(--cz-ink3); margin-left: 4px; line-height: var(--lh-label); }
516
516
  a.ins-mvr { text-decoration: none; color: inherit; padding: 0; }
517
517
  a.ins-mvr .go { min-height: 46px; }
518
518
  a.ins-mvr:hover .go { background: var(--cz-well2); }
@@ -526,19 +526,19 @@ a.ins-mvr:hover .go { background: var(--cz-well2); }
526
526
  .ins-nb > span { flex: 1; }
527
527
 
528
528
  /* Delivery trends: the target line under each tile, the open tile, the view of the tiles alone, and the target popover (IsTarget) */
529
- .ins-tile .tg { font-size: var(--fs-1); font-weight: 700; color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
529
+ .ins-tile .tg { font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-badge); }
530
530
  .ins-tile.sel { box-shadow: 0 0 0 1px rgba(72,148,234,.55), 0 0 0 4px rgba(72,148,234,.12); }
531
531
  .ins-tile.sel .tg { color: var(--cz-blueink); }
532
532
  body.ins-trv #insHero, body.ins-trv #goalCards { display: none; }
533
533
  .ins-trh { display: flex; align-items: baseline; gap: 10px; padding: 4px 0 14px; }
534
- .ins-trh h2 { margin: 0; font-size: var(--fs-5); font-weight: 800; }
534
+ .ins-trh h2 { margin: 0; font-size: var(--fs-panel); font-weight: var(--fw-strong); line-height: var(--lh-panel); }
535
535
  .ins-trends.big { border-top: 0; }
536
536
  .ins-trends.big .ins-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; border-top: 0; }
537
537
  .ins-trends.big .ins-tile { background: var(--cz-card); border: 1px solid var(--cz-hair); border-radius: 18px; padding: 14px 16px; gap: 6px; }
538
538
  .ins-trends.big .ins-tile.warn { background: var(--cz-latebg); }
539
- .ins-trends.big .ins-tile .l { font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink); }
540
- .ins-trends.big .ins-tile .v { font-size: var(--fs-6); line-height: 1; }
541
- .ins-trends.big .ins-tile .tg { font-size: var(--fs-2); }
539
+ .ins-trends.big .ins-tile .l { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-label); }
540
+ .ins-trends.big .ins-tile .v { font-size: var(--fs-display); line-height: 1; }
541
+ .ins-trends.big .ins-tile .tg { font-size: var(--fs-meta); line-height: var(--lh-meta); }
542
542
  .ins-trends.big .ins-tsp { width: 100%; height: 34px; }
543
543
  .ins-pop { position: absolute; z-index: 40; background: var(--cz-card); border-radius: 20px; box-shadow: 0 24px 60px -24px rgba(42,46,53,.45), 0 0 0 1px var(--cz-hair); padding: 16px; display: flex; flex-direction: column; gap: 12px; font-family: var(--cz-sans); color: var(--cz-ink); }
544
544
  .ins-tgpop { width: 400px; }
@@ -549,17 +549,17 @@ body.ins-trv #insHero, body.ins-trv #goalCards { display: none; }
549
549
 
550
550
  /* Library (IsLibrary): the bar, Found in your work, the reports table */
551
551
  .ins-lbar { justify-content: flex-end; }
552
- .ins-lbar .ins-lnote { margin-left: 0; margin-right: auto; font-size: var(--fs-2); color: var(--cz-ink3); }
552
+ .ins-lbar .ins-lnote { margin-left: 0; margin-right: auto; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
553
553
  .ins-fd { border: 1px dashed var(--cz-c-9aa1ab); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
554
554
  .ins-fdh { display: flex; align-items: center; gap: 8px; }
555
- .ins-fdh b { flex: 1; font-size: var(--fs-3); }
555
+ .ins-fdh b { flex: 1; font-size: var(--fs-body); line-height: var(--lh-body); }
556
556
  .ins-fcard { background: var(--cz-card); border-radius: 16px; border: 1px solid var(--cz-hair); padding: 12px 14px; display: flex; align-items: center; gap: 10px; box-shadow: 0 1px 2px rgba(42,46,53,.04); }
557
557
  .ins-fcard .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; background: none; border: 0; padding: 0; font: inherit; color: var(--cz-ink); text-align: left; cursor: pointer; }
558
- .ins-fcard .nm b { font-size: var(--fs-3); }
559
- .ins-fcard .nm small, .ins-rl .nm small { font-size: var(--fs-2); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
558
+ .ins-fcard .nm b { font-size: var(--fs-body); line-height: var(--lh-body); }
559
+ .ins-fcard .nm small, .ins-rl .nm small { font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: var(--lh-meta); }
560
560
  .ins-rtbl { border: 1px solid var(--cz-hair); border-radius: 18px; overflow: hidden; }
561
- .ins-rl { display: grid; grid-template-columns: minmax(0, 1fr) 150px 160px; align-items: center; gap: 0 14px; min-height: 58px; padding: 0 14px; width: 100%; border: 0; border-top: 1px solid var(--cz-hair); background: none; font: inherit; font-size: var(--fs-3); color: var(--cz-ink); text-align: left; cursor: pointer; }
562
- .ins-rl.ins-rlh { min-height: 36px; border-top: 0; background: var(--cz-well); font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink2); cursor: default; }
561
+ .ins-rl { display: grid; grid-template-columns: minmax(0, 1fr) 150px 160px; align-items: center; gap: 0 14px; min-height: 58px; padding: 0 14px; width: 100%; border: 0; border-top: 1px solid var(--cz-hair); background: none; font: inherit; font-size: var(--fs-body); color: var(--cz-ink); text-align: left; cursor: pointer; line-height: var(--lh-body); }
562
+ .ins-rl.ins-rlh { min-height: 36px; border-top: 0; background: var(--cz-well); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); cursor: default; line-height: var(--lh-label); }
563
563
  .ins-rl.sel { background: var(--cz-bluebg); }
564
564
  .ins-rl .nm { display: flex; flex-direction: column; min-width: 0; }
565
565
  .ins-rl .nx.q { color: var(--cz-ink3); }
@@ -579,28 +579,28 @@ body.ins-trv #insHero, body.ins-trv #goalCards { display: none; }
579
579
  .ins-rtbl { border: 0; border-radius: 0; display: flex; flex-direction: column; gap: 2px; }
580
580
  .ins-rl.ins-rlh { display: none; }
581
581
  .ins-rl { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm st" "nx st"; border-top: 0; border-radius: 16px; padding: 8px 10px; min-height: 0; gap: 1px 10px; }
582
- .ins-rl .nm { grid-area: nm; } .ins-rl .nm small { display: none; } .ins-rl .nx { grid-area: nx; font-size: var(--fs-2); color: var(--cz-blueink); } .ins-rl .st { grid-area: st; }
582
+ .ins-rl .nm { grid-area: nm; } .ins-rl .nm small { display: none; } .ins-rl .nx { grid-area: nx; font-size: var(--fs-meta); color: var(--cz-blueink); line-height: var(--lh-meta); } .ins-rl .st { grid-area: st; }
583
583
  .ins-rl.sel { background: var(--cz-card); box-shadow: 0 6px 18px -10px rgba(42,46,53,.25); }
584
584
  .ins-trends.big .ins-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
585
585
  .ins-th2, .ins-rd3 { grid-template-columns: minmax(0, 1fr) 70px 90px; }
586
586
  }
587
587
 
588
588
  /* The notes in the Viewer, the popover and the sheet; the trends view has no table frame. The Viewer floats over the page (XvAInsight). */
589
- .ins-gd .note, .ins-pop .note, .ins-sheet .note { margin: 4px 0 0; font-size: var(--fs-2); color: var(--cz-ink3); }
589
+ .ins-gd .note, .ins-pop .note, .ins-sheet .note { margin: 4px 0 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
590
590
  body.ins-trv #goalTbl { border: 0; background: none; border-radius: 0; overflow: visible; }
591
591
 
592
592
  /* ── Intelligence (batch 15 item 1: Iq8Overview, Iq8Suggest, Iq9Draft, Iq8Phone) ── */
593
593
  /* the ✦ strip: the finding in ink, its reason after it; Not now, Ask why and the dots at its end */
594
- .ins-hero #brief { font-weight: 800; color: var(--cz-ink); }
594
+ .ins-hero #brief { font-weight: var(--fw-strong); color: var(--cz-ink); }
595
595
  .ins-hact { display: inline-flex; gap: 2px; flex: none; }
596
596
  /* a finding with a drafted move (batch 16 item 1): the strip takes two lines, the move under the finding with its ✦; ✓ makes it, Done + Undo after */
597
597
  .ins-hero.mv .t { white-space: normal; }
598
- .ins-mv { display: flex; align-items: flex-start; gap: 6px; margin-top: 3px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-blueink); }
598
+ .ins-mv { display: flex; align-items: flex-start; gap: 6px; margin-top: 3px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-blueink); line-height: var(--lh-label); }
599
599
  .ins-mv[hidden] { display: none; }
600
600
  .ins-mv svg { width: 13px; height: 13px; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
601
601
  .ins-mv.dn { color: var(--cz-ink3); }
602
602
  /* a drafted metric edited in place (batch 16 item 1): its name, target and source as quiet fields on the row */
603
- .ins-dri { width: 100%; min-width: 0; height: 30px; border: 1px solid var(--cz-hair); border-radius: 9px; padding: 0 8px; font: inherit; font-size: var(--fs-3); font-weight: 700; background: var(--cz-card); color: var(--cz-ink); }
603
+ .ins-dri { width: 100%; min-width: 0; height: 30px; border: 1px solid var(--cz-hair); border-radius: 9px; padding: 0 8px; 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); }
604
604
  .ins-dri:focus { outline: 2px solid color-mix(in srgb, var(--cz-blueink) 45%, transparent); outline-offset: 0; border-color: var(--cz-blueink); }
605
605
  .ins-dred { background: color-mix(in srgb, var(--cz-blueink) 5%, var(--cz-card)); }
606
606
  .ins-hact:empty, .ins-pg:empty { display: none; }
@@ -615,11 +615,11 @@ body.ins-trv #goalTbl { border: 0; background: none; border-radius: 0; overflow:
615
615
  .ins-ns.one { grid-template-columns: minmax(0, 1fr); }
616
616
  .ins-nsc, .ins-nsi { background: var(--cz-card); border: 1px solid var(--cz-hair); border-radius: 18px; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
617
617
  .ins-nsh { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
618
- .ins-lbl2 { font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink2); }
619
- .ins-lbl2 span { font-weight: 600; color: var(--cz-ink3); margin-left: 4px; }
618
+ .ins-lbl2 { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
619
+ .ins-lbl2 span { font-weight: var(--fw-strong); color: var(--cz-ink3); margin-left: 4px; }
620
620
  .ins-nsv { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
621
621
  .ins-big { background: none; border: 0; padding: 0; cursor: pointer; color: var(--cz-ink); }
622
- .ins-big b { font-size: var(--fs-6); font-weight: 800; font-variant-numeric: tabular-nums; }
622
+ .ins-big b { font-size: var(--fs-display); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; line-height: var(--lh-display); }
623
623
  .ins-nsch { width: 100%; height: 110px; display: block; overflow: visible; }
624
624
  .ins-nsch .ln { fill: none; stroke: var(--cz-blueink); stroke-width: 2; vector-effect: non-scaling-stroke; }
625
625
  .ins-nsch .ar { fill: var(--cz-bluebg); stroke: none; opacity: .7; }
@@ -630,36 +630,36 @@ body.ins-trv #goalTbl { border: 0; background: none; border-radius: 0; overflow:
630
630
  .ins-nsi .ins-lbl2 + .ins-inr { border-top: 0; }
631
631
  .ins-nsi .ins-inr + .ins-lbl2 { margin-top: 6px; }
632
632
  .ins-inr { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 4px 0; border: 0; border-top: 1px solid var(--cz-hair); background: none; font: inherit; color: var(--cz-ink); cursor: pointer; text-align: left; }
633
- .ins-inr .nm { font-size: var(--fs-3); font-weight: 700; min-width: 0; }
633
+ .ins-inr .nm { font-size: var(--fs-row); font-weight: var(--fw-strong); min-width: 0; line-height: var(--lh-row); }
634
634
  .ins-inr .v { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
635
- .ins-inr .v b { font-size: var(--fs-3); font-weight: 800; }
636
- .ins-inr .v span { font-size: var(--fs-1); font-weight: 700; }
635
+ .ins-inr .v b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
636
+ .ins-inr .v span { font-size: var(--fs-badge); font-weight: var(--fw-strong); line-height: var(--lh-badge); }
637
637
  .ins-inr .up { color: var(--cz-ok); } .ins-inr .dn { color: var(--cz-late); } .ins-inr .q { color: var(--cz-ink3); }
638
638
  /* what Claude drafted */
639
639
  .ins-dr { display: flex; flex-direction: column; gap: 10px; border: 1px dashed rgba(47, 95, 179, .45); border-radius: 18px; padding: 12px 14px; background: linear-gradient(100deg, var(--cz-bluebg) 0%, var(--cz-card) 60%); }
640
640
  .ins-dr[hidden] { display: none; }
641
641
  .ins-drh { display: flex; align-items: center; gap: 10px; }
642
- .ins-drh > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-3); }
642
+ .ins-drh > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-body); line-height: var(--lh-body); }
643
643
  .ins-drh .sp { color: var(--cz-blueink); display: inline-flex; }
644
644
  .ins-drs { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
645
- .ins-drs li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); padding: 3px 10px 3px 4px; border-radius: 999px; background: var(--cz-card); }
646
- .ins-drs li i { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: var(--fs-1); background: var(--cz-well); }
645
+ .ins-drs li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); padding: 3px 10px 3px 4px; border-radius: 999px; background: var(--cz-card); line-height: var(--lh-label); }
646
+ .ins-drs li i { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: var(--fs-meta); background: var(--cz-well); line-height: var(--lh-meta); }
647
647
  .ins-drs li i svg { width: 12px !important; height: 12px !important; }
648
648
  .ins-drs li.dn { color: var(--cz-ink2); } .ins-drs li.dn i { background: var(--cz-blueink); color: var(--cz-card); }
649
649
  .ins-drs li.now { color: var(--cz-blueink); } .ins-drs li.now i { box-shadow: 0 0 0 3px rgba(47, 95, 179, .18); }
650
- .ins-drr { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-2); }
650
+ .ins-drr { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
651
651
  .ins-drr > div { display: flex; gap: 8px; } .ins-drr .wait { opacity: .5; }
652
652
  .ins-dr .ins-tbl { background: var(--cz-card); }
653
653
  .ins-row.ins-dcols { cursor: default; min-height: 52px; }
654
654
  .ins-row.gone { opacity: .45; }
655
655
  .ins-act { display: inline-flex; gap: 4px; justify-content: flex-end; align-items: center; }
656
656
  /* Did it work? */
657
- .ins-ocols .pace { font-size: var(--fs-2); }
657
+ .ins-ocols .pace { font-size: var(--fs-meta); line-height: var(--lh-meta); }
658
658
  .ins-gotw { display: inline-flex; align-items: center; gap: 8px; }
659
- .ins-dv { display: inline-flex; gap: 6px; align-items: flex-start; font-size: var(--fs-2); color: var(--cz-ink2); }
659
+ .ins-dv { display: inline-flex; gap: 6px; align-items: flex-start; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
660
660
  .ins-dv .sp { color: var(--cz-blueink); display: inline-flex; margin-top: 1px; }
661
661
  .ins-dv .sp svg { width: 14px; height: 14px; }
662
- .ins-foot { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; border-top: 1px solid var(--cz-hair); background: none; font: inherit; font-size: var(--fs-2); color: var(--cz-ink3); cursor: pointer; text-align: left; }
662
+ .ins-foot { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; border-top: 1px solid var(--cz-hair); background: none; font: inherit; font-size: var(--fs-meta); color: var(--cz-ink3); cursor: pointer; text-align: left; line-height: var(--lh-meta); }
663
663
  .ins-foot b { color: var(--cz-ink); }
664
664
  .ins-foot svg { width: 14px !important; height: 14px !important; }
665
665
  /* Reports and dashboards (⋯): the old Library in a side panel */
@@ -671,10 +671,10 @@ body.ins-trv #goalTbl { border: 0; background: none; border-radius: 0; overflow:
671
671
  .ins > .ins-ns { animation-delay: .05s; } .ins > .ins-dr { animation-delay: .08s; } .ins > #pGoals { animation-delay: .1s; } .ins > #pOutcomes { animation-delay: .14s; }
672
672
  @keyframes ins-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
673
673
  @media (prefers-reduced-motion: reduce) { .ins > .ins-strip, .ins > .ins-ns, .ins > .ins-dr, .ins > .ins-pane { animation: none; } .ins-nsch .pt { transition: none; } }
674
- .ins-gby { font-size: var(--fs-2); color: var(--cz-ink3); font-weight: 600; margin-left: auto; }
675
- .ins-gby b { font-weight: 800; margin-left: 4px; }
674
+ .ins-gby { font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); margin-left: auto; line-height: var(--lh-label); }
675
+ .ins-gby b { font-weight: var(--fw-strong); margin-left: 4px; }
676
676
  .ins-askf { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 6px 6px 14px; border-radius: 18px; background: var(--cz-well); }
677
- .ins-askf input { flex: 1; min-width: 0; height: 34px; border: 0; background: none; outline: 0; font: inherit; font-size: var(--fs-3); color: var(--cz-ink); }
677
+ .ins-askf input { flex: 1; min-width: 0; height: 34px; border: 0; background: none; outline: 0; font: inherit; font-size: var(--fs-body); color: var(--cz-ink); line-height: var(--lh-body); }
678
678
  .ins-askf input::placeholder { color: var(--cz-ink3); }
679
679
  /* Intelligence on a phone (Iq8Phone): one column; these follow the rules above so they win */
680
680
  @media (max-width: 720px) {
@@ -694,32 +694,32 @@ body.ins-trv #goalTbl { border: 0; background: none; border-radius: 0; overflow:
694
694
  #goalTbl.okr-list { display: block !important; background: none; border: 0; box-shadow: none; padding: 0; overflow: visible; }
695
695
  #goalCards:empty { display: none; }
696
696
  .okr-sec { display: flex; align-items: baseline; gap: 10px; padding: 14px 4px 8px; }
697
- .okr-h { margin: 0; font-size: var(--fs-1); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cz-ink3); flex: 1; }
698
- .okr-sec .note { font-size: var(--fs-2); }
697
+ .okr-h { margin: 0; font-size: var(--fs-badge); font-weight: var(--fw-strong); letter-spacing: .06em; text-transform: uppercase; color: var(--cz-ink3); flex: 1; line-height: var(--lh-badge); }
698
+ .okr-sec .note { font-size: var(--fs-meta); line-height: var(--lh-meta); }
699
699
  .okr-card { background: var(--cz-card); border: 1px solid var(--cz-hair); border-radius: 20px; overflow: hidden; }
700
700
  .okr-card > * + *, .okr-row + .okr-row, .okr-obj + .okr-row { border-top: 1px solid var(--cz-hair); }
701
- .okr-obj { margin: 0; padding: 10px 16px 0; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); }
701
+ .okr-obj { margin: 0; padding: 10px 16px 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
702
702
  .okr-row.sel { background: var(--cz-bluebg); }
703
703
  .okr-main { display: flex; align-items: flex-start; gap: 12px; padding: 12px 12px 12px 16px; cursor: pointer; min-height: 48px; box-sizing: border-box; border-radius: 16px; }
704
704
  .okr-main:hover { background: var(--cz-well); }
705
705
  .okr-main:focus-visible { outline: 2px solid var(--cz-blueink); outline-offset: -2px; }
706
706
  .okr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
707
- .okr-t b { font-size: var(--fs-4); font-weight: 700; line-height: 1.3; color: var(--cz-ink); }
708
- .okr-t .note { font-size: var(--fs-2); color: var(--cz-ink3); }
709
- .okr-none { margin: 0; padding: 14px 16px; color: var(--cz-ink3); font-size: var(--fs-3); }
707
+ .okr-t b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: 1.3; color: var(--cz-ink); }
708
+ .okr-t .note { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
709
+ .okr-none { margin: 0; padding: 14px 16px; color: var(--cz-ink3); font-size: var(--fs-body); line-height: var(--lh-body); }
710
710
  .okr-dot { width: 10px; height: 10px; margin-top: 6px; }
711
711
  .cz-dot.hollow { background: transparent; box-shadow: inset 0 0 0 1.5px var(--cz-ink3); }
712
- .okr-av { width: 32px; height: 32px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-1); font-weight: 800; background: var(--cz-well); color: var(--cz-ink); }
712
+ .okr-av { width: 32px; height: 32px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-badge); font-weight: var(--fw-strong); background: var(--cz-well); color: var(--cz-ink); line-height: var(--lh-badge); }
713
713
  .okr-av.none { background: transparent; border: 2px dashed var(--cz-ink3); box-sizing: border-box; }
714
714
  .okr-row.drafted .okr-t b { color: var(--cz-ink2); }
715
715
  /* a draft under its row (GsM1, GsM3, GsM4, GsM5): its icon, Was …, what it does, why, and the icon presses */
716
716
  .okr-dr { display: flex; align-items: flex-start; gap: 10px; margin: 0 12px 12px 38px; padding: 10px 10px 10px 12px; border-radius: 16px; border: 1px dashed rgba(47, 95, 179, .45); background: var(--cz-bluebg); }
717
717
  .okr-dr .k { color: var(--cz-blueink); display: inline-flex; margin-top: 2px; }
718
718
  .okr-dr .k svg, .okr-why .sp svg, .okr-mbar svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
719
- .okr-dr .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-3); }
720
- .okr-dr .tx b { font-weight: 700; color: var(--cz-ink); }
721
- .okr-dr .tx .note { font-size: var(--fs-2); }
722
- .okr-old { font-size: var(--fs-2); color: var(--cz-ink3); text-decoration: line-through; }
719
+ .okr-dr .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-body); line-height: var(--lh-body); }
720
+ .okr-dr .tx b { font-weight: var(--fw-strong); color: var(--cz-ink); }
721
+ .okr-dr .tx .note { font-size: var(--fs-meta); line-height: var(--lh-meta); }
722
+ .okr-old { font-size: var(--fs-meta); color: var(--cz-ink3); text-decoration: line-through; line-height: var(--lh-meta); }
723
723
  .okr-dr .acts { display: flex; gap: 4px; flex: none; align-items: center; }
724
724
  .okr-dr.made { border-style: solid; border-color: var(--cz-hair); background: var(--cz-well); }
725
725
  .okr-dr.made .tx b { color: var(--cz-ink2); }
@@ -738,23 +738,23 @@ body.ins-trv #goalTbl { border: 0; background: none; border-radius: 0; overflow:
738
738
  /* the goal Viewer (GsViewer) */
739
739
  .okr-vh { display: flex; align-items: center; gap: 10px; padding: 4px 2px 8px; flex-wrap: wrap; }
740
740
  .okr-vh .okr-dot { margin-top: 0; }
741
- .okr-vh b { font-size: var(--fs-4); font-weight: 800; }
741
+ .okr-vh b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
742
742
  .okr-vh .okr-sp { flex: 1; }
743
743
  .okr-why { display: flex; gap: 12px; align-items: flex-start; background: var(--cz-well); border-radius: 16px; padding: 14px; margin: 8px 0; }
744
744
  .okr-why .sp { color: var(--cz-blueink); display: inline-flex; }
745
745
  .okr-why .sp svg { width: 20px; height: 20px; }
746
- .okr-why p { margin: 0; font-size: var(--fs-3); line-height: 1.45; }
746
+ .okr-why p { margin: 0; font-size: var(--fs-body); line-height: 1.45; }
747
747
  .okr-why .ins-mvl { margin-top: 8px; }
748
748
  /* ⋯ › Metrics */
749
749
  .okr-mbar { display: flex; gap: 2px; justify-content: flex-end; padding-bottom: 4px; }
750
750
  .okr-mbar .cz-ib.on { background: var(--cz-well); }
751
751
  .okr-mbar svg { width: 18px; height: 18px; }
752
- .okr-sh { margin: 14px 4px 8px; font-size: var(--fs-1); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cz-ink3); }
752
+ .okr-sh { margin: 14px 4px 8px; font-size: var(--fs-badge); font-weight: var(--fw-strong); letter-spacing: .06em; text-transform: uppercase; color: var(--cz-ink3); line-height: var(--lh-badge); }
753
753
  .okr-mrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 12px 10px 14px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
754
754
  .okr-mrow + .okr-mrow { border-top: 1px solid var(--cz-hair); }
755
755
  .okr-mrow:hover { background: var(--cz-well); }
756
756
  .okr-mrow .okr-dot { margin-top: 0; }
757
- .okr-tag { font-size: var(--fs-1); font-weight: 700; color: var(--cz-ink3); border: 1px solid var(--cz-hair); border-radius: 10px; padding: 1px 7px; }
757
+ .okr-tag { font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); border: 1px solid var(--cz-hair); border-radius: 10px; padding: 1px 7px; line-height: var(--lh-badge); }
758
758
  .okr-tree { display: flex; flex-direction: column; align-items: center; }
759
759
  .okr-tr0 { display: flex; justify-content: center; width: 100%; }
760
760
  .okr-trk { width: 2px; height: 18px; background: var(--cz-hair); }
@@ -763,7 +763,7 @@ body.ins-trv #goalTbl { border: 0; background: none; border-radius: 0; overflow:
763
763
  .okr-tr1.loose, .okr-sh + .okr-tr1 { border-top: 0; padding-top: 0; justify-content: flex-start; }
764
764
  .okr-node { display: flex; align-items: flex-start; gap: 8px; width: 170px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: inherit; font: inherit; text-align: left; cursor: pointer; }
765
765
  .okr-node.ns { width: min(260px, 100%); }
766
- .okr-node .okr-t b { font-size: var(--fs-3); }
766
+ .okr-node .okr-t b { font-size: var(--fs-body); line-height: var(--lh-body); }
767
767
  .okr-node .okr-dot { margin-top: 5px; }
768
768
  /* the product page's Goals line (GsProduct) */
769
769
  .okr-pl { display: flex; align-items: center; gap: 10px; min-width: 0; }
@@ -771,101 +771,101 @@ body.ins-trv #goalTbl { border: 0; background: none; border-radius: 0; overflow:
771
771
  .okr-pld { display: inline-flex; gap: 4px; flex: none; }
772
772
  .okr-pld .okr-dot { margin-top: 0; width: 8px; height: 8px; }
773
773
  @media (prefers-reduced-motion: reduce) { .okr-dot.m-crit::after { animation: none; } }
774
- textarea.ins-dri { height: auto; padding: 6px 8px; font-weight: 500; resize: vertical; }
774
+ textarea.ins-dri { height: auto; padding: 6px 8px; font-weight: var(--fw-regular); resize: vertical; }
775
775
  /* ── goals made clear (batch 18 item 11, 11-B; frames Gc*): the drafts table, the check panel, first readings, failed and held ── */
776
776
  .ins-dr .gc-tbl + .okr-card { margin-top: 12px; }
777
777
  .gc-tbl { border: 1px solid var(--cz-hair); border-radius: 18px; overflow: hidden; background: var(--cz-card); }
778
778
  .gc-th, .gc-tr { display: grid; grid-template-columns: minmax(150px, 1.25fr) minmax(170px, 1.9fr) minmax(70px, .6fr) minmax(90px, .75fr) minmax(120px, .95fr) 84px; gap: 14px; align-items: center; padding: 0 14px 0 16px; }
779
- .gc-th { background: var(--cz-well); min-height: 38px; font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink2); }
780
- .gc-th .note { font-weight: 600; color: var(--cz-ink3); }
781
- .gc-grp { padding: 8px 16px; background: var(--cz-well); border-top: 1px solid var(--cz-hair); font-size: var(--fs-2); }
782
- .gc-grp b { font-weight: 800; color: var(--cz-ink2); }
779
+ .gc-th { background: var(--cz-well); min-height: 38px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
780
+ .gc-th .note { font-weight: var(--fw-strong); color: var(--cz-ink3); }
781
+ .gc-grp { padding: 8px 16px; background: var(--cz-well); border-top: 1px solid var(--cz-hair); font-size: var(--fs-meta); line-height: var(--lh-meta); }
782
+ .gc-grp b { font-weight: var(--fw-strong); color: var(--cz-ink2); }
783
783
  .gc-grp .note { color: var(--cz-ink3); }
784
784
  .gc-tr { border-top: 1px solid var(--cz-hair); min-height: 60px; padding-top: 8px; padding-bottom: 8px; cursor: pointer; }
785
785
  .gc-tr:hover { background: var(--cz-well); }
786
786
  .gc-tr.sel, .gc-tr.sel:hover { background: var(--cz-bluebg); }
787
787
  .gc-tr:focus-visible { outline: 2px solid var(--cz-blueink); outline-offset: -2px; }
788
788
  .gc-nm { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
789
- .gc-nm b { font-size: var(--fs-3); font-weight: 800; line-height: 1.25; }
790
- .gc-type { font-size: var(--fs-1); font-weight: 700; color: var(--cz-ink2); background: var(--cz-well2); border-radius: 8px; padding: 1px 7px; }
791
- .gc-hw { font-size: var(--fs-2); color: var(--cz-ink2); line-height: 1.4; min-width: 0; }
792
- .gc-now b { font-size: var(--fs-4); font-weight: 800; }
793
- .gc-tg b { font-size: var(--fs-3); font-weight: 800; }
794
- .gc-from { display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-2); min-width: 0; }
789
+ .gc-nm b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: 1.25; }
790
+ .gc-type { font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink2); background: var(--cz-well2); border-radius: 8px; padding: 1px 7px; line-height: var(--lh-badge); }
791
+ .gc-hw { font-size: var(--fs-meta); color: var(--cz-ink2); line-height: 1.4; min-width: 0; }
792
+ .gc-now b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
793
+ .gc-tg b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
794
+ .gc-from { display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-meta); min-width: 0; line-height: var(--lh-meta); }
795
795
  .gc-src { display: inline-flex; align-items: center; gap: 6px; }
796
- .gc-src b { font-weight: 700; }
796
+ .gc-src b { font-weight: var(--fw-strong); }
797
797
  .gc-src .cz-dot { width: 7px; height: 7px; }
798
- .gc-from .note { color: var(--cz-ink2); font-weight: 600; }
798
+ .gc-from .note { color: var(--cz-ink2); font-weight: var(--fw-strong); }
799
799
  .gc-acts { display: flex; gap: 4px; justify-content: flex-end; }
800
800
  .gc-acts .cz-ib svg, .gc-panel svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
801
801
  @media (max-width: 760px) {
802
802
  .gc-th { display: none; }
803
803
  .gc-tr { grid-template-columns: 1fr auto; grid-template-areas: "nm now" "hw hw" "tg from" "acts acts"; gap: 6px 12px; padding: 12px 14px; }
804
804
  .gc-nm { grid-area: nm; } .gc-hw { grid-area: hw; } .gc-now { grid-area: now; text-align: right; } .gc-tg { grid-area: tg; } .gc-from { grid-area: from; text-align: right; align-items: flex-end; } .gc-acts { grid-area: acts; }
805
- .gc-tg::before { content: 'Target '; font-size: var(--fs-2); color: var(--cz-ink3); }
805
+ .gc-tg::before { content: 'Target '; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
806
806
  }
807
807
  /* the check panel and the key result's part of the goal Viewer */
808
808
  .gc-panel { display: flex; flex-direction: column; gap: 12px; }
809
809
  .gc-kr { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 10px; }
810
810
  .gc-box { background: var(--cz-well); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
811
- .gc-k { font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink2); }
812
- .gc-what { margin: 0; font-size: var(--fs-3); font-weight: 700; line-height: 1.45; color: var(--cz-ink); }
811
+ .gc-k { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
812
+ .gc-what { margin: 0; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: 1.45; color: var(--cz-ink); }
813
813
  .gc-big { margin: 2px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
814
- .gc-big b { font-size: var(--fs-6); font-weight: 800; letter-spacing: -.01em; }
815
- .gc-frac { display: flex; flex-direction: column; font-size: var(--fs-3); }
814
+ .gc-big b { font-size: var(--fs-display); font-weight: var(--fw-strong); letter-spacing: -.01em; line-height: var(--lh-display); }
815
+ .gc-frac { display: flex; flex-direction: column; font-size: var(--fs-body); line-height: var(--lh-body); }
816
816
  .gc-frac > div { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; }
817
- .gc-frac b { font-weight: 800; min-width: 3ch; }
817
+ .gc-frac b { font-weight: var(--fw-strong); min-width: 3ch; }
818
818
  .gc-frac .n { border-bottom: 1.5px solid var(--cz-ink3); }
819
- .gc-frac .r { font-weight: 800; }
819
+ .gc-frac .r { font-weight: var(--fw-strong); }
820
820
  .gc-sec { display: flex; flex-direction: column; gap: 6px; }
821
- .gc-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-3); }
821
+ .gc-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-body); line-height: var(--lh-body); }
822
822
  .gc-checks li { display: flex; gap: 8px; align-items: flex-start; }
823
823
  .gc-checks li svg { flex: none; margin-top: 2px; width: 16px; height: 16px; padding: 1px; border-radius: 50%; box-sizing: border-box; }
824
824
  .gc-checks li.ok svg { color: var(--cz-ok); background: var(--cz-okbg); }
825
825
  .gc-checks li.warn svg { color: var(--cz-risk); }
826
826
  .gc-cmp { display: flex; align-items: center; gap: 8px; border: 1px solid var(--cz-hair); border-radius: 14px; padding: 6px 6px 6px 14px; background: var(--cz-card); }
827
- .gc-cmp input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: var(--fs-3); color: var(--cz-ink); outline: none; }
828
- .gc-line, .gc-fl { margin: 0; font-size: var(--fs-3); color: var(--cz-ink2); line-height: 1.45; }
829
- .gc-line b { color: var(--cz-ink); font-weight: 800; margin-right: 4px; }
827
+ .gc-cmp input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: var(--fs-body); color: var(--cz-ink); outline: none; line-height: var(--lh-body); }
828
+ .gc-line, .gc-fl { margin: 0; font-size: var(--fs-body); color: var(--cz-ink2); line-height: 1.45; }
829
+ .gc-line b { color: var(--cz-ink); font-weight: var(--fw-strong); margin-right: 4px; }
830
830
  .gc-fl b { color: var(--cz-ink); }
831
831
  .gc-q { background: var(--cz-well); border-radius: 16px; padding: 10px 14px; }
832
- .gc-q summary { cursor: pointer; font-size: var(--fs-3); list-style: none; }
832
+ .gc-q summary { cursor: pointer; font-size: var(--fs-body); list-style: none; line-height: var(--lh-body); }
833
833
  .gc-q summary::-webkit-details-marker { display: none; }
834
- .gc-q summary b { font-weight: 800; }
835
- .gc-q pre { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--cz-card); font-family: var(--cz-mono); font-size: var(--fs-2); white-space: pre-wrap; word-break: break-word; }
834
+ .gc-q summary b { font-weight: var(--fw-strong); }
835
+ .gc-q pre { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--cz-card); font-family: var(--cz-mono); font-size: var(--fs-meta); white-space: pre-wrap; word-break: break-word; line-height: var(--lh-meta); }
836
836
  .gc-foot { display: flex; align-items: center; gap: 4px; }
837
837
  .gc-sp { flex: 1; }
838
838
  .gc-msg:empty { display: none; }
839
839
  .gc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
840
840
  .gc-card { background: var(--cz-well); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
841
- .gc-card b { font-size: var(--fs-6); font-weight: 800; }
842
- .gc-say { margin: 0; font-size: var(--fs-3); line-height: 1.5; }
841
+ .gc-card b { font-size: var(--fs-display); font-weight: var(--fw-strong); line-height: var(--lh-display); }
842
+ .gc-say { margin: 0; font-size: var(--fs-body); line-height: 1.5; }
843
843
  .gc-sg { display: flex; flex-wrap: wrap; gap: 8px 10px; background: var(--cz-well); border-radius: 16px; padding: 12px 14px; }
844
844
  .gc-sg .sp { color: var(--cz-blueink); display: inline-flex; margin-top: 2px; }
845
- .gc-sg p { flex: 1; margin: 0; font-size: var(--fs-3); line-height: 1.45; min-width: 0; }
845
+ .gc-sg p { flex: 1; margin: 0; font-size: var(--fs-body); line-height: 1.45; min-width: 0; }
846
846
  .gc-sg .acts { display: flex; gap: 4px; width: 100%; justify-content: flex-end; }
847
- .gc-warnbox { background: var(--cz-riskbg); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-3); }
848
- .gc-warnbox > b:first-child { color: var(--cz-risk); font-size: var(--fs-2); font-weight: 800; }
847
+ .gc-warnbox { background: var(--cz-riskbg); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-body); line-height: var(--lh-body); }
848
+ .gc-warnbox > b:first-child { color: var(--cz-risk); font-size: var(--fs-label); font-weight: var(--fw-strong); line-height: var(--lh-label); }
849
849
  .gc-warnbox p { margin: 0; line-height: 1.45; }
850
850
  .gc-fix { display: flex; align-items: center; gap: 10px; }
851
- .gc-fix > b { flex: 1; font-weight: 800; }
851
+ .gc-fix > b { flex: 1; font-weight: var(--fw-strong); }
852
852
  .gc-fix .acts { display: flex; gap: 4px; }
853
853
  .gc-file { display: flex; justify-content: flex-end; }
854
- .gc-wait { border: 1.5px dashed var(--cz-hair); border-color: var(--cz-dot-q); border-radius: 14px; min-height: 120px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px; font-size: var(--fs-3); color: var(--cz-ink2); }
854
+ .gc-wait { border: 1.5px dashed var(--cz-hair); border-color: var(--cz-dot-q); border-radius: 14px; min-height: 120px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px; font-size: var(--fs-body); color: var(--cz-ink2); line-height: var(--lh-body); }
855
855
  .gc-ed { display: flex; flex-direction: column; gap: 10px; }
856
856
  .ins-dr.gc-on { border: 0; padding: 0; background: none; gap: 12px; }
857
857
 
858
858
  /* ── batch 18 item 11 gap: the goals dashboard (Iq8Overview with GcJ2FirstMonday): the first readings, a failed or held reading, the drafts under a row ── */
859
859
  .ins-dot1 { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--cz-dot-q); }
860
- .ins-row .val .ins-warn { margin-top: 4px; color: var(--cz-late); font-weight: 700; }
861
- .ins-row .pace > span { font-size: var(--fs-2); color: var(--cz-ink2); }
860
+ .ins-row .val .ins-warn { margin-top: 4px; color: var(--cz-late); font-weight: var(--fw-strong); }
861
+ .ins-row .pace > span { font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
862
862
  .ins-row.crit .nm .okr-dot { flex: none; } /* a broken limit: the one red, pulsing dot (cozy.css m-crit) */
863
863
  .ins-drr { border-top: 0; padding: 0 16px 4px 0; }
864
864
  .ins-drr .okr-dr { margin-left: 16px; }
865
865
  .ins-nsc .gc-wait { flex: 1; }
866
866
  .ins-nsn { margin-left: auto; }
867
867
  .ins-nsd .okr-dr { margin: 6px 0 0; }
868
- .ins-inr .nm small { display: block; font-weight: 700; color: var(--cz-late); margin-top: 2px; }
868
+ .ins-inr .nm small { display: block; font-weight: var(--fw-strong); color: var(--cz-late); margin-top: 2px; }
869
869
  #goalTbl[hidden] { display: none !important; }
870
870
  @media (max-width: 720px) { .ins-cards > .okr-dr { margin: -2px 0 4px 12px; } .ins-nsn { margin-left: 0; } }
871
871
 
@@ -881,8 +881,8 @@ textarea.ins-dri { height: auto; padding: 6px 8px; font-weight: 500; resize: ver
881
881
 
882
882
  /* a goal's forecast in its Viewer (FcViewer, FcPhone; pm/goal-forecast.js): the state line, the range band, the legend, the baseline ✓ */
883
883
  .fc-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 2px 10px; }
884
- .fc-say { flex: 1; min-width: 12em; font-size: var(--fs-3); color: var(--cz-ink2); line-height: 1.45; }
885
- .fc-tag { display: inline-flex; align-items: center; font-size: var(--fs-1); font-weight: 800; border-radius: 10px; padding: 3px 9px; background: var(--cz-well); color: var(--cz-ink2); white-space: nowrap; }
884
+ .fc-say { flex: 1; min-width: 12em; font-size: var(--fs-body); color: var(--cz-ink2); line-height: 1.45; }
885
+ .fc-tag { display: inline-flex; align-items: center; font-size: var(--fs-badge); font-weight: var(--fw-strong); border-radius: 10px; padding: 3px 9px; background: var(--cz-well); color: var(--cz-ink2); white-space: nowrap; line-height: var(--lh-badge); }
886
886
  .fc-tag.ok { background: var(--cz-okbg); color: var(--cz-ok); }
887
887
  .fc-tag.risk { background: var(--cz-riskbg); color: var(--cz-risk); }
888
888
  .fc-tag.late { background: var(--cz-latebg); color: var(--cz-late); }
@@ -890,7 +890,7 @@ textarea.ins-dri { height: auto; padding: 6px 8px; font-weight: 500; resize: ver
890
890
  .ins-gch .fc-band.held { opacity: .1; }
891
891
  .ins-gch .fc-likely { stroke: var(--cz-blue); stroke-dasharray: 6 5; }
892
892
  .ins-gch .fc-skip { fill: var(--cz-riskbg); stroke: none; }
893
- .fc-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: var(--fs-1); color: var(--cz-ink3); }
893
+ .fc-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
894
894
  .fc-legend span { display: inline-flex; align-items: center; gap: 6px; }
895
895
  .fc-legend .fc-sp { flex: 1; }
896
896
  .fc-k { display: inline-block; flex: none; }
@@ -898,25 +898,25 @@ textarea.ins-dri { height: auto; padding: 6px 8px; font-weight: 500; resize: ver
898
898
  .fc-k.dash { width: 16px; border-top: 2px dashed var(--cz-blue); }
899
899
  .fc-k.band { width: 14px; height: 10px; border-radius: 3px; background: var(--cz-blue); opacity: .22; }
900
900
  .fc-base { display: flex; align-items: center; gap: 8px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--cz-hair); background: var(--cz-card); padding: 8px 10px 8px 16px; margin-top: 10px; }
901
- .fc-base b { flex: 1; font-size: var(--fs-3); font-weight: 800; line-height: 1.4; }
901
+ .fc-base b { flex: 1; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: 1.4; }
902
902
 
903
903
  /* Delivery trends carries the metrics review (batch 22 item 4, canvas MxA–MxC): the ✦ month line, "Up N vs last week" on a tile, What moved it,
904
904
  * Goals that moved, and a tile's weeks in the Viewer */
905
905
  .ins-trstrip { margin: 0 0 16px; padding: 12px 8px 12px 16px; background: var(--cz-bluebg, var(--cz-well)); }
906
- .ins-trstrip .t { white-space: normal; font-weight: 800; color: var(--cz-ink); font-size: var(--fs-4); }
907
- .ins-tile .mv { font-size: var(--fs-2); font-weight: 700; color: var(--cz-blueink); }
906
+ .ins-trstrip .t { white-space: normal; font-weight: var(--fw-strong); color: var(--cz-ink); font-size: var(--fs-row); line-height: var(--lh-row); }
907
+ .ins-tile .mv { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-blueink); line-height: var(--lh-label); }
908
908
  .ins-mvd { margin-top: 22px; }
909
- .ins-mvd .ins-h3 { margin: 0 0 8px; font-size: var(--fs-2); font-weight: 800; color: var(--cz-ink3); }
909
+ .ins-mvd .ins-h3 { margin: 0 0 8px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
910
910
  .ins-mcard { border: 1px solid var(--cz-hair); border-radius: 18px; padding: 4px 16px; background: var(--cz-card); }
911
- .ins-mrow { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-3); cursor: pointer; }
911
+ .ins-mrow { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-body); cursor: pointer; line-height: var(--lh-body); }
912
912
  .ins-mrow:last-child { border-bottom: 0; }
913
913
  .ins-mrow:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; border-radius: 8px; }
914
914
  .ins-mrow .note { margin: 0; flex: 1; min-width: 0; }
915
- .ins-mrow b { font-weight: 800; white-space: nowrap; }
915
+ .ins-mrow b { font-weight: var(--fw-strong); white-space: nowrap; }
916
916
  .ins-mvd .ins-tbl { border: 1px solid var(--cz-hair); border-radius: 18px; overflow: hidden; }
917
- .ins-sayv { margin: 0; font-weight: 700; font-size: var(--fs-4); }
917
+ .ins-sayv { margin: 0; font-weight: var(--fw-strong); font-size: var(--fs-row); line-height: var(--lh-row); }
918
918
  .ins-bars { display: flex; gap: 8px; align-items: flex-end; height: 150px; margin: 10px 0 4px; }
919
- .ins-bars > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; font-size: var(--fs-1); color: var(--cz-ink3); min-width: 0; }
919
+ .ins-bars > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; font-size: var(--fs-meta); color: var(--cz-ink3); min-width: 0; line-height: var(--lh-meta); }
920
920
  .ins-bars i { display: block; width: 100%; border-radius: 6px; background: var(--cz-hair2, var(--cz-hair)); }
921
921
  .ins-bars i.now { background: var(--cz-blue); }
922
922
  .ins-bars i.blank { height: 6px; background: none; border: 1.5px dashed var(--cz-ink3); }