create-pmos 0.511.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.
- package/package.json +27 -31
- package/payload/KIT-VERSION +1 -1
- package/payload/planning/evals/eval-calibration.md +1 -1
- package/payload/planning/okrs/health-budgets.md +1 -1
- package/payload/state/discoveries.md +1 -1
- package/workspace/briefing-premium-adddoc-test.js +3 -3
- package/workspace/briefing-premium-board-test.js +2 -2
- package/workspace/briefing-premium-initiative-test.js +3 -3
- package/workspace/briefing-premium-insights-test.js +2 -2
- package/workspace/briefing-premium-sources-test.js +4 -5
- package/workspace/briefing-premium-test.js +2 -2
- package/workspace/changelog.json +26 -0
- package/workspace/fixtures/next-prompt-replay.json +40 -0
- package/workspace/guide/home.md +1 -1
- package/workspace/guide/index.md +1 -0
- package/workspace/guide/next-prompt.md +62 -0
- package/workspace/guide/settings.md +3 -1
- package/workspace/intel-report-ui-test.js +1 -1
- package/workspace/intelligence-gaps-ui-test.js +1 -1
- package/workspace/lib/next-prompt.js +199 -0
- package/workspace/lib/premium-console-type.js +15 -12
- package/workspace/lib/route-modules.js +1 -0
- package/workspace/lib/routes-next-prompt.js +248 -0
- package/workspace/metric-drafts-ui-test.js +2 -2
- package/workspace/package-lock.json +2 -2
- package/workspace/package.json +1 -1
- package/workspace/premium-menu-rows-test.js +1 -1
- package/workspace/premium-vw-doc-test.js +1 -1
- package/workspace/public/pm/bd-pin-card.css +4 -4
- package/workspace/public/pm/bd-publish.css +11 -11
- package/workspace/public/pm/bd-shared.css +17 -17
- package/workspace/public/pm/c3-capture.css +9 -9
- package/workspace/public/pm/c3-initiatives.css +23 -23
- package/workspace/public/pm/c3-listen.css +1 -1
- package/workspace/public/pm/components.css +572 -572
- package/workspace/public/pm/console3.css +374 -373
- package/workspace/public/pm/cozy-adler.css +4 -4
- package/workspace/public/pm/cozy-aud.css +1 -1
- package/workspace/public/pm/cozy-board.css +328 -328
- package/workspace/public/pm/cozy-ev.css +80 -78
- package/workspace/public/pm/cozy-home-rows.css +32 -32
- package/workspace/public/pm/cozy-home.css +285 -241
- package/workspace/public/pm/cozy-insights.css +200 -200
- package/workspace/public/pm/cozy-live-pill.css +5 -5
- package/workspace/public/pm/cozy-mtg-present.css +28 -28
- package/workspace/public/pm/cozy-onboard.css +15 -15
- package/workspace/public/pm/cozy-panel.css +39 -39
- package/workspace/public/pm/cozy-pick.css +5 -5
- package/workspace/public/pm/cozy-rec-now.css +23 -23
- package/workspace/public/pm/cozy-rec-present.css +11 -11
- package/workspace/public/pm/cozy-rec-tab.css +13 -13
- package/workspace/public/pm/cozy-settings.js +37 -2
- package/workspace/public/pm/cozy-steps.css +14 -14
- package/workspace/public/pm/cozy-today.css +95 -95
- package/workspace/public/pm/cozy-viewer.css +27 -27
- package/workspace/public/pm/cozy-vw-mtg.css +113 -113
- package/workspace/public/pm/cozy-vw-rp.css +79 -79
- package/workspace/public/pm/cozy-vw-shell.css +43 -43
- package/workspace/public/pm/cozy-vw.css +129 -129
- package/workspace/public/pm/cozy-xv.css +15 -15
- package/workspace/public/pm/cozy.css +53 -21
- package/workspace/public/pm/dash-view.css +27 -27
- package/workspace/public/pm/hi-pop.css +26 -26
- package/workspace/public/pm/home-chat.js +21 -4
- package/workspace/public/pm/home-impact.css +8 -8
- package/workspace/public/pm/home-ini.css +36 -36
- package/workspace/public/pm/home-line.css +7 -7
- package/workspace/public/pm/impact.css +9 -9
- package/workspace/public/pm/ini-view.css +243 -243
- package/workspace/public/pm/load-shapes.css +1 -1
- package/workspace/public/pm/loose-props.css +14 -14
- package/workspace/public/pm/metric-drafts.css +20 -20
- package/workspace/public/pm/ms-suggest.css +9 -9
- package/workspace/public/pm/next-prompt-ui.js +117 -0
- package/workspace/public/pm/ov-view.css +14 -14
- package/workspace/public/pm/premium-insights.js +3 -3
- package/workspace/public/pm/premium-report-frame.css +1 -1
- package/workspace/public/pm/premium-report-intel.css +17 -17
- package/workspace/public/pm/premium-report-print.css +1 -1
- package/workspace/public/pm/premium-vw-backlog.css +13 -13
- package/workspace/public/pm/premium-vw-cal.css +32 -32
- package/workspace/public/pm/premium-vw-copy.css +7 -7
- package/workspace/public/pm/premium-vw-doc.css +69 -69
- package/workspace/public/pm/premium-vw-item.css +12 -12
- package/workspace/public/pm/premium-vw-jira.css +39 -39
- package/workspace/public/pm/premium-vw-meet.css +28 -28
- package/workspace/public/pm/premium-vw-notepad.css +13 -13
- package/workspace/public/pm/premium-vw-notes.css +11 -11
- package/workspace/public/pm/premium-vw-rec.css +27 -27
- package/workspace/public/pm/premium-vw-report.css +21 -21
- package/workspace/public/pm/premium-vw-slides.css +28 -28
- package/workspace/public/pm/premium.css +618 -618
- package/workspace/public/pm/prog-order.css +6 -6
- package/workspace/public/pm/prog-page.css +17 -17
- package/workspace/public/pm/program-charter.css +33 -33
- package/workspace/public/pm/ready-lib.css +6 -6
- package/workspace/public/pm/sort-order.css +1 -1
- package/workspace/public/pm/split-merge.css +18 -18
- package/workspace/public/pm/task-card.css +24 -24
- package/workspace/public/pm/tk-tasks.css +42 -42
- package/workspace/public/pm/tk-view.css +6 -6
- package/workspace/public/pm/wf-page.css +31 -31
- package/workspace/public/premium-aud.html +1 -1
- package/workspace/public/premium-board.html +1 -1
- package/workspace/public/premium-intelligence.html +1 -1
- package/workspace/public/premium-rec.html +1 -1
- package/workspace/public/premium-viewer.html +1 -1
- package/workspace/public/premium-workflows.html +1 -1
- package/workspace/public/premium.html +1 -1
- package/workspace/public/vendor/plus-jakarta-sans-var.woff2 +0 -0
- package/workspace/server.js +1 -0
- package/workspace/test-lists/next-prompt.json +5 -0
- package/workspace/third-party/README.md +2 -1
- package/workspace/third-party/plus-jakarta-sans-OFL.LICENSE +93 -0
|
@@ -20,7 +20,8 @@ body.cz-home { min-height: 100vh; overflow: hidden; }
|
|
|
20
20
|
* ground, 16px apart, the list 360px wide (cozy-today.css) */
|
|
21
21
|
@media (min-width: 761px) {
|
|
22
22
|
body.cz-home .hm-desk { inset: 0; padding: 16px; gap: 16px; background: none; box-shadow: none; border-radius: 0; }
|
|
23
|
-
|
|
23
|
+
/* batch 26 item 2 (NpBw): the chat sits on the same soft gradient as on a phone */
|
|
24
|
+
body.cz-home .hm-chat { background: var(--cz-ground); border-radius: 24px; padding: 16px 24px 20px; box-shadow: 0 10px 30px -24px var(--cz-c-9da3ac); }
|
|
24
25
|
body.cz-home .hm-vw .cz-vw { flex-basis: min(500px, max(380px, calc(100vw - 852px))); width: min(500px, max(380px, calc(100vw - 852px))); }
|
|
25
26
|
body.cz-home.hm-folded:not(.cz-vw-rail) .hm-desk { padding-left: 56px; }
|
|
26
27
|
body.cz-home .hm-reopen { top: 12px; right: 12px; }
|
|
@@ -36,15 +37,15 @@ body.cz-home { min-height: 100vh; overflow: hidden; }
|
|
|
36
37
|
|
|
37
38
|
/* ── the list head, New, the meeting line ── */
|
|
38
39
|
.hm-hd { display: flex; align-items: center; gap: 8px; padding: 4px 4px 10px 8px; }
|
|
39
|
-
.hm-hd h1 { margin: 0; flex: 1; font-size: var(--fs-
|
|
40
|
-
.hm-new { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--cz-card); box-shadow: var(--cz-vlift); color: var(--cz-ink); font-size: var(--fs-
|
|
40
|
+
.hm-hd h1 { margin: 0; flex: 1; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-row); }
|
|
41
|
+
.hm-new { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--cz-card); box-shadow: var(--cz-vlift); color: var(--cz-ink); font-size: var(--fs-row); font-weight: var(--fw-strong); cursor: pointer; line-height: var(--lh-row); }
|
|
41
42
|
.hm-meet { display: flex; gap: 6px; margin: 0 2px 6px; }
|
|
42
|
-
.hm-mt, .hm-mp { box-sizing: border-box; height: 44px; border-radius: 14px; border: 0; background: var(--cz-card); color: var(--cz-ink); cursor: pointer; font-size: var(--fs-
|
|
43
|
+
.hm-mt, .hm-mp { box-sizing: border-box; height: 44px; border-radius: 14px; border: 0; background: var(--cz-card); color: var(--cz-ink); cursor: pointer; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
43
44
|
.hm-mt { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 12px; text-align: left; }
|
|
44
45
|
.hm-mt svg { color: var(--cz-blueink); flex: none; }
|
|
45
46
|
.hm-mt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
46
47
|
.hm-mt em { font-style: normal; color: var(--cz-blueink); }
|
|
47
|
-
.hm-mp { flex: 0 0 44px; font-weight:
|
|
48
|
+
.hm-mp { flex: 0 0 44px; font-weight: var(--fw-strong); color: var(--cz-ink2); display: grid; place-items: center; }
|
|
48
49
|
.hm-mp.rec i { width: 10px; height: 10px; border-radius: 50%; background: var(--cz-blue); }
|
|
49
50
|
.hm-mp.rec.on i { background: var(--cz-dot-red); box-shadow: 0 0 0 4px var(--cz-redbg); }
|
|
50
51
|
|
|
@@ -53,9 +54,9 @@ body.cz-home { min-height: 100vh; overflow: hidden; }
|
|
|
53
54
|
.hm-ghr { display: flex; align-items: center; gap: 4px; }
|
|
54
55
|
.hm-gadd { flex: none; width: 32px; height: 32px; border-radius: 10px; border: 0; background: none; color: var(--cz-ink3); display: grid; place-items: center; cursor: pointer; } /* Add a stakeholder, on the Stakeholders head */
|
|
55
56
|
.hm-gadd:hover { background: var(--cz-well2); color: var(--cz-ink); }
|
|
56
|
-
.hm-gh { display: flex; align-items: center; gap: 6px; height: 36px; width: 100%; flex: 1; min-width: 0; padding: 0 10px; border: 0; background: none; color: var(--cz-ink2); font-size: var(--fs-
|
|
57
|
-
.hm-gh.add { font-weight:
|
|
58
|
-
.hm-none { margin: 6px 12px; font-size: var(--fs-
|
|
57
|
+
.hm-gh { display: flex; align-items: center; gap: 6px; height: 36px; width: 100%; flex: 1; min-width: 0; padding: 0 10px; border: 0; background: none; color: var(--cz-ink2); font-size: var(--fs-label); font-weight: var(--fw-strong); cursor: pointer; text-align: left; line-height: var(--lh-label); }
|
|
58
|
+
.hm-gh.add { font-weight: var(--fw-strong); color: var(--cz-ink3); }
|
|
59
|
+
.hm-none { margin: 6px 12px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
59
60
|
.hm-r { position: relative; display: flex; align-items: center; gap: 4px; border-radius: 18px; min-height: 75px; margin: 0 0 7px; } /* a row about 75px tall at an 82px pitch (AgHome) */
|
|
60
61
|
.hm-r:hover { background: var(--cz-well2); }
|
|
61
62
|
.hm-r.sel { background: var(--cz-card); box-shadow: var(--cz-lift); }
|
|
@@ -66,9 +67,9 @@ body.cz-home { min-height: 100vh; overflow: hidden; }
|
|
|
66
67
|
.hm-r.sel .hm-tile { background: var(--cz-bluebg); color: var(--cz-blueink); box-shadow: none; }
|
|
67
68
|
.hm-tile.sq { border-radius: 10px; width: 34px; height: 34px; background: var(--cz-bluebg); color: var(--cz-blueink); box-shadow: none; }
|
|
68
69
|
.hm-rt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
|
69
|
-
.hm-rt b { font-size: var(--fs-
|
|
70
|
-
.hm-rt em { font-style: normal; font-size: var(--fs-
|
|
71
|
-
.hm-kc { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; border: 0; background: none; border-radius: 10px; font-size: var(--fs-
|
|
70
|
+
.hm-rt b { font-size: var(--fs-row); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-row); }
|
|
71
|
+
.hm-rt em { font-style: normal; font-size: var(--fs-meta); color: var(--cz-blueink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-meta); }
|
|
72
|
+
.hm-kc { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; border: 0; background: none; border-radius: 10px; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); cursor: pointer; white-space: nowrap; line-height: var(--lh-badge); }
|
|
72
73
|
.hm-kc.loud { color: var(--cz-blueink); }
|
|
73
74
|
.hm-kc:hover { background: var(--cz-well); }
|
|
74
75
|
.hm-x { flex: none; width: 36px; height: 36px; margin-right: 4px; border-radius: 12px; border: 0; background: none; color: var(--cz-ink3); display: grid; place-items: center; cursor: pointer; opacity: 0; }
|
|
@@ -78,76 +79,76 @@ body.cz-home { min-height: 100vh; overflow: hidden; }
|
|
|
78
79
|
.hm-kids { margin: 0 0 4px 22px; }
|
|
79
80
|
.hm-r.kid { min-height: 48px; margin: 2px 0; }
|
|
80
81
|
.hm-r.kid .hm-rm { min-height: 48px; padding: 6px 10px; }
|
|
81
|
-
.hm-more { display: block; margin: 2px 0 0 14px; height: 32px; border: 0; background: none; font-size: var(--fs-
|
|
82
|
+
.hm-more { display: block; margin: 2px 0 0 14px; height: 32px; border: 0; background: none; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-blueink); cursor: pointer; padding: 0 2px; line-height: var(--lh-label); }
|
|
82
83
|
|
|
83
84
|
/* ── the initiative and product card ── */
|
|
84
85
|
.hm-card { background: var(--cz-card); border-radius: 20px; padding: 6px; box-shadow: var(--cz-vlift); margin: 0 0 6px; }
|
|
85
86
|
.hm-ch { display: flex; align-items: center; gap: 6px; padding: 8px 6px 10px 8px; }
|
|
86
87
|
.hm-sw { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; border: 0; background: none; padding: 0 0 0 4px; cursor: pointer; color: var(--cz-ink); text-align: left; }
|
|
87
|
-
.hm-sw .k { font-size: var(--fs-
|
|
88
|
-
.hm-sw b { font-size: var(--fs-
|
|
88
|
+
.hm-sw .k { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
89
|
+
.hm-sw b { font-size: var(--fs-row); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: var(--lh-row); }
|
|
89
90
|
.hm-plus { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink2); display: grid; place-items: center; cursor: pointer; flex: none; }
|
|
90
91
|
.hm-box { background: var(--cz-well); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
|
|
91
92
|
.hm-box.you { box-shadow: inset 0 0 0 1.5px var(--cz-blue); background: var(--cz-card); }
|
|
92
|
-
.hm-br { display: flex; align-items: center; gap: 8px; font-size: var(--fs-
|
|
93
|
+
.hm-br { display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
93
94
|
.hm-br .st { margin-left: auto; color: var(--cz-ink3); }
|
|
94
95
|
/* whose turn, as a pill (AgInitYou, AgInitAgents, AgInitStalled): yours on the blue tint; agents (or engineers) working, navy on white with a
|
|
95
96
|
* navy dot; stalled, a blue outline with a ring dot */
|
|
96
|
-
.hm-turn { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 999px; font-weight:
|
|
97
|
+
.hm-turn { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 999px; font-weight: var(--fw-strong); color: var(--cz-blueink); background: var(--cz-bluebg); }
|
|
97
98
|
.hm-turn i { width: 8px; height: 8px; border-radius: 50%; background: var(--cz-blue); flex: none; }
|
|
98
99
|
.hm-turn.agents, .hm-turn.jira { background: var(--cz-card); color: var(--cz-ink2); } .hm-turn.agents i, .hm-turn.jira i { background: var(--cz-done); }
|
|
99
100
|
.hm-turn.stalled { background: none; box-shadow: inset 0 0 0 1px var(--cz-blue); } .hm-turn.stalled i { background: none; box-shadow: inset 0 0 0 2px var(--cz-blue); }
|
|
100
|
-
.hm-lad { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; font-size: var(--fs-
|
|
101
|
+
.hm-lad { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--cz-ink3); flex-wrap: wrap; line-height: var(--lh-meta); }
|
|
101
102
|
.hm-lad .pv { color: var(--cz-blueink); display: inline-flex; align-items: center; gap: 3px; }
|
|
102
|
-
.hm-lad b { font-size: var(--fs-
|
|
103
|
+
.hm-lad b { font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-row); }
|
|
103
104
|
.hm-bars { display: flex; gap: 4px; margin: 2px 0 6px; }
|
|
104
105
|
.hm-bars i { flex: 1; height: 5px; border-radius: 3px; background: var(--cz-hair); }
|
|
105
106
|
.hm-bars i.done { background: var(--cz-done); } .hm-bars i.now { background: var(--cz-blue); }
|
|
106
|
-
.hm-ckh { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-
|
|
107
|
+
.hm-ckh { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-meta); width: 100%; border: 0; background: none; padding: 0; color: var(--cz-ink2); cursor: pointer; text-align: left; font-family: var(--cz-sans); line-height: var(--lh-meta); }
|
|
107
108
|
.hm-ckh b .cz-ms { margin: 0 4px 1px 3px; }
|
|
108
109
|
.hm-cfold { align-items: center; gap: 6px; min-height: 32px; padding: 0 6px; border-radius: 8px; } /* the folded checklist: one line (AgInitSpec) */
|
|
109
110
|
.hm-cfold:hover { background: var(--cz-well2); }
|
|
110
111
|
.hm-cfold b { flex: none; white-space: nowrap; }
|
|
111
112
|
.hm-ckh.hm-cfold span { flex: 1; min-width: 0; margin-left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
112
113
|
.hm-cfold svg { flex: none; color: var(--cz-ink3); }
|
|
113
|
-
.hm-ckh b { font-weight:
|
|
114
|
-
.hm-it { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: var(--fs-
|
|
114
|
+
.hm-ckh b { font-weight: var(--fw-strong); color: var(--cz-ink); } .hm-ckh span { margin-left: auto; color: var(--cz-ink3); }
|
|
115
|
+
.hm-it { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: var(--fs-meta); color: var(--cz-ink2); border: 0; background: none; padding: 0; width: 100%; text-align: left; font-family: var(--cz-sans); line-height: var(--lh-meta); }
|
|
115
116
|
.hm-it .l { flex: 1; min-width: 0; }
|
|
116
|
-
.hm-it .l small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: var(--fs-
|
|
117
|
+
.hm-it .l small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: var(--fs-meta); line-height: 1.35; color: var(--cz-ink3); }
|
|
117
118
|
.hm-it.donerow { cursor: pointer; } .hm-it.donerow .l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
118
|
-
.hm-mk { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; box-sizing: border-box; font-size: var(--fs-
|
|
119
|
+
.hm-mk { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; box-sizing: border-box; font-size: var(--fs-badge); font-weight: var(--fw-strong); line-height: var(--lh-badge); }
|
|
119
120
|
.hm-mk.done { background: var(--cz-done); color: var(--cz-onsolid); }
|
|
120
121
|
.hm-mk.you { border: 2px solid var(--cz-blue); background: var(--cz-bluebg); }
|
|
121
122
|
.hm-mk.agent { border: 2px solid var(--cz-blue); }
|
|
122
123
|
.hm-mk.wait { border: 1.5px solid var(--cz-well2); box-shadow: inset 0 0 0 1px var(--cz-hair); } /* a step that is next: an empty grey circle */
|
|
123
|
-
.hm-mk-av.hm-av { width: 20px; height: 20px; font-size: var(--fs-
|
|
124
|
+
.hm-mk-av.hm-av { width: 20px; height: 20px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
124
125
|
.hm-it.wait { color: var(--cz-ink2); }
|
|
125
126
|
.hm-mk.risk { border: 1.5px solid var(--cz-blue); color: var(--cz-blueink); }
|
|
126
127
|
.hm-mk.jira { background: var(--cz-well2); color: var(--cz-ink2); }
|
|
127
|
-
.hm-it .tag { font-size: var(--fs-
|
|
128
|
+
.hm-it .tag { font-size: var(--fs-badge); font-weight: var(--fw-strong); border-radius: 999px; padding: 1px 8px; line-height: var(--lh-badge); }
|
|
128
129
|
.hm-it .tag.you { background: var(--cz-blue); color: var(--cz-onsolid); }
|
|
129
130
|
.hm-it .tag.risk { box-shadow: inset 0 0 0 1px var(--cz-blue); color: var(--cz-blueink); }
|
|
130
131
|
.hm-it .tag.jira { background: var(--cz-well2); color: var(--cz-ink3); }
|
|
131
|
-
.hm-it .tag.agent, .hm-it .tag.wait { padding: 0; background: none; color: var(--cz-ink3); font-size: var(--fs-
|
|
132
|
-
.hm-it .tag.agent.stuck { padding: 1px 8px; box-shadow: inset 0 0 0 1.5px var(--cz-blue); color: var(--cz-blueink); font-weight:
|
|
133
|
-
.hm-then { margin: 2px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--cz-card); font-size: var(--fs-
|
|
132
|
+
.hm-it .tag.agent, .hm-it .tag.wait { padding: 0; background: none; color: var(--cz-ink3); font-size: var(--fs-meta); font-weight: var(--fw-regular); line-height: var(--lh-meta); } /* Working, Next: a plain word */
|
|
133
|
+
.hm-it .tag.agent.stuck { padding: 1px 8px; box-shadow: inset 0 0 0 1.5px var(--cz-blue); color: var(--cz-blueink); font-weight: var(--fw-strong); }
|
|
134
|
+
.hm-then { margin: 2px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--cz-card); font-size: var(--fs-meta); line-height: 1.45; color: var(--cz-ink2); box-shadow: 0 0 0 1px var(--cz-hair); }
|
|
134
135
|
.hm-box:not(.you) .hm-then { box-shadow: none; }
|
|
135
136
|
.hm-then b { color: var(--cz-ink); }
|
|
136
|
-
.hm-time { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; font-size: var(--fs-
|
|
137
|
+
.hm-time { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--cz-blueink); line-height: var(--lh-meta); }
|
|
137
138
|
.hm-time.over { color: var(--cz-late); }
|
|
138
139
|
.hm-acts { display: flex; gap: 8px; align-items: center; }
|
|
139
|
-
.hm-cta { flex: 1; height: 38px; border-radius: 12px; border: 0; background: var(--cz-solid); color: var(--cz-onsolid); font-size: var(--fs-
|
|
140
|
+
.hm-cta { flex: 1; height: 38px; border-radius: 12px; border: 0; background: var(--cz-solid); color: var(--cz-onsolid); font-size: var(--fs-row); font-weight: var(--fw-strong); cursor: pointer; text-align: left; padding: 0 12px; line-height: var(--lh-row); }
|
|
140
141
|
.hm-cta.alt { background: var(--cz-card); color: var(--cz-ink); box-shadow: inset 0 0 0 1px var(--cz-hair); }
|
|
141
142
|
.hm-ov { width: 38px; height: 38px; border-radius: 12px; border: 0; background: var(--cz-card); box-shadow: inset 0 0 0 1px var(--cz-hair); display: grid; place-items: center; cursor: pointer; padding: 0; }
|
|
142
143
|
.hm-else { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 10px; padding: 8px 12px; border: 0; border-radius: 16px; background: var(--cz-card); box-shadow: var(--cz-vlift); cursor: pointer; text-align: left; color: var(--cz-ink); }
|
|
143
144
|
.hm-else span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
|
144
|
-
.hm-else em { font-style: normal; font-size: var(--fs-
|
|
145
|
-
.hm-else b { font-size: var(--fs-
|
|
145
|
+
.hm-else em { font-style: normal; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
146
|
+
.hm-else b { font-size: var(--fs-row); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-row); }
|
|
146
147
|
|
|
147
148
|
/* ── avatars (the role tints) ── */
|
|
148
|
-
.hm-av { display: inline-grid; place-items: center; flex: none; border-radius: 50%; font-weight:
|
|
149
|
-
.hm-av.s20 { width: 20px; height: 20px; font-size: var(--fs-
|
|
150
|
-
.hm-av.s28 { width: 28px; height: 28px; font-size: var(--fs-
|
|
149
|
+
.hm-av { display: inline-grid; place-items: center; flex: none; border-radius: 50%; font-weight: var(--fw-strong); font-size: var(--fs-badge); line-height: 1; background: var(--cz-bluebg); color: var(--cz-blueink); font-family: var(--cz-sans); }
|
|
150
|
+
.hm-av.s20 { width: 20px; height: 20px; font-size: var(--fs-meta); line-height: var(--lh-meta); } .hm-av.s24 { width: 24px; height: 24px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
151
|
+
.hm-av.s28 { width: 28px; height: 28px; font-size: var(--fs-meta); line-height: var(--lh-meta); } .hm-av.s30 { width: 30px; height: 30px; }
|
|
151
152
|
.hm-av.t-C { background: var(--cz-c-2f5fb3); color: var(--cz-c-ffffff); }
|
|
152
153
|
.hm-av.t-St { background: var(--cz-c-eef1f8); color: var(--cz-c-34508a); } .hm-av.t-Re { background: var(--cz-c-faf0e4); color: var(--cz-c-8a5212); }
|
|
153
154
|
.hm-av.t-Sp { background: var(--cz-c-e9f4ee); color: var(--cz-c-2e6e48); } .hm-av.t-Ev { background: var(--cz-c-faecef); color: var(--cz-c-9a3b55); }
|
|
@@ -162,9 +163,9 @@ body.cz-home { min-height: 100vh; overflow: hidden; }
|
|
|
162
163
|
/* A loose chat's guess at its initiative (XvALinkSuggest): one quiet chip at the chat's top, never a banner */
|
|
163
164
|
.hm-sug { padding: 10px 56px 0 16px; }
|
|
164
165
|
.hm-sug[hidden] { display: none; }
|
|
165
|
-
.hm-sugc { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 6px 4px 12px; white-space: nowrap; border-radius: 999px; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-
|
|
166
|
-
.hm-sugc b { font-weight:
|
|
167
|
-
.hm-sugl { border: 0; background: none; padding: 2px 4px; font: inherit; font-weight:
|
|
166
|
+
.hm-sugc { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 6px 4px 12px; white-space: nowrap; border-radius: 999px; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
167
|
+
.hm-sugc b { font-weight: var(--fw-strong); color: var(--cz-blueink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
|
|
168
|
+
.hm-sugl { border: 0; background: none; padding: 2px 4px; font: inherit; font-weight: var(--fw-strong); color: var(--cz-blueink); text-decoration: underline; cursor: pointer; }
|
|
168
169
|
.hm-sugx { border: 0; background: none; width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--cz-ink3); cursor: pointer; }
|
|
169
170
|
.hm-sugx:hover, .hm-sugl:hover { background: var(--cz-card); }
|
|
170
171
|
@media (max-width: 760px) { .hm-sug { padding: 8px 16px 0; } .hm-sugc { padding: 0 0 0 12px; } .hm-sugl, .hm-sugx { min-height: 44px; min-width: 44px; } }
|
|
@@ -185,7 +186,7 @@ body.cz-home { min-height: 100vh; overflow: hidden; }
|
|
|
185
186
|
.hm-chd { flex: none; display: flex; align-items: center; gap: 10px; min-width: 0; height: 40px; padding-right: 48px; margin-bottom: 26px; box-sizing: border-box; }
|
|
186
187
|
.hm-chd[hidden] { display: none; }
|
|
187
188
|
.hm-chd .hv-mk { margin-right: -4px; }
|
|
188
|
-
.hm-chb { min-width: 0; font-size: var(--fs-
|
|
189
|
+
.hm-chb { min-width: 0; font-size: var(--fs-row); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-row); }
|
|
189
190
|
/* session names A (canvas XmsNames): the session's name is the rename press; a tap makes it the agreed field (RnATask) */
|
|
190
191
|
.hm-chn { min-width: 0; flex: 0 1 auto; display: flex; align-items: center; }
|
|
191
192
|
.hm-chn:has(.hm-ren) { flex: 1; }
|
|
@@ -193,11 +194,11 @@ body.cz-home { min-height: 100vh; overflow: hidden; }
|
|
|
193
194
|
.hm-rn:hover { background: var(--cz-well); }
|
|
194
195
|
.hm-rn:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 1px; }
|
|
195
196
|
.hm-ren { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; height: 40px; border-radius: 12px; background: var(--cz-card); box-shadow: 0 0 0 1.5px var(--cz-blue), 0 0 0 5px color-mix(in srgb, var(--cz-blue) 14%, transparent); padding: 0 4px 0 10px; }
|
|
196
|
-
.hm-ren input { flex: 1; min-width: 0; font: inherit; font-size: var(--fs-
|
|
197
|
+
.hm-ren input { flex: 1; min-width: 0; font: inherit; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); border: 0; background: transparent; outline: 0; padding: 0; line-height: var(--lh-row); }
|
|
197
198
|
.hm-ren .sv { width: 32px; height: 32px; border-radius: 999px; border: 0; background: var(--cz-solid); color: var(--cz-onsolid); display: inline-flex; align-items: center; justify-content: center; flex: none; cursor: pointer; }
|
|
198
199
|
.hm-ren .sv:disabled { opacity: .6; cursor: default; }
|
|
199
|
-
.hm-renerr { margin: 4px 0 0 10px; font-size: var(--fs-
|
|
200
|
-
.hm-chs { flex: 0 1 auto; min-width: 0; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--cz-well); color: var(--cz-ink2); font-size: var(--fs-
|
|
200
|
+
.hm-renerr { margin: 4px 0 0 10px; font-size: var(--fs-meta); color: var(--cz-red); line-height: var(--lh-meta); }
|
|
201
|
+
.hm-chs { flex: 0 1 auto; min-width: 0; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--cz-well); color: var(--cz-ink2); font-size: var(--fs-label); font-weight: var(--fw-strong); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; line-height: var(--lh-label); }
|
|
201
202
|
.hm-chs > span { overflow: hidden; text-overflow: ellipsis; }
|
|
202
203
|
.hm-chs .hv-mt { margin-left: 0; }
|
|
203
204
|
.hm-chs > svg { flex: none; color: var(--cz-c-6b4fa3); }
|
|
@@ -210,52 +211,52 @@ body.cz-home { min-height: 100vh; overflow: hidden; }
|
|
|
210
211
|
@media (max-width: 760px) { .hm-chd { display: none; } }
|
|
211
212
|
.hm-log { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 2px 4px 12px 0; scrollbar-width: thin; }
|
|
212
213
|
|
|
213
|
-
.hm-empty { margin: auto; max-width: 360px; text-align: center; color: var(--cz-ink3); font-size: var(--fs-
|
|
214
|
+
.hm-empty { margin: auto; max-width: 360px; text-align: center; color: var(--cz-ink3); font-size: var(--fs-body); line-height: 1.5; }
|
|
214
215
|
.hm-a { display: flex; gap: 10px; align-items: flex-start; }
|
|
215
|
-
.hm-ab { flex: 1; min-width: 0; font-size: var(--fs-
|
|
216
|
+
.hm-ab { flex: 1; min-width: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--cz-ink); }
|
|
216
217
|
.hm-ab .md p { margin: 0 0 6px; }
|
|
217
218
|
.hm-bub .md, .hm-qb .md { max-width: none; color: inherit; line-height: 1.5; }
|
|
218
219
|
.hm-bub .md p, .hm-qb .md p { margin: 0 0 6px; }
|
|
219
220
|
.hm-bub .md pre, .hm-qb .md pre { background: rgba(255,255,255,.6); }
|
|
220
|
-
.hm-who { margin: 0; font-size: var(--fs-
|
|
221
|
-
.hm-who span { font-weight:
|
|
222
|
-
.hm-who .hm-say { font-size: var(--fs-
|
|
221
|
+
.hm-who { margin: 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: 1.55; }
|
|
222
|
+
.hm-who span { font-weight: var(--fw-regular); color: var(--cz-ink3); }
|
|
223
|
+
.hm-who .hm-say { font-size: var(--fs-body); color: var(--cz-ink); line-height: var(--lh-body); }
|
|
223
224
|
/* the name and time sit in line before the first words of the message (AgChatRunning); over the message that asks, and on a phone, on their own line (AgChatAsk, AgChatPhone) */
|
|
224
225
|
@media (min-width: 761px) { .hm-a:not(.ask) .hm-ab > .hm-who { float: left; margin-right: 6px; line-height: calc(14px * 1.55); } }
|
|
225
226
|
.hm-ab::after { content: ''; display: block; clear: both; }
|
|
226
227
|
.hm-tools { display: flex; gap: 16px; margin-top: 4px; clear: both; }
|
|
227
|
-
.hm-tools button { border: 0; background: none; padding: 0; height: 24px; font-size: var(--fs-
|
|
228
|
+
.hm-tools button { border: 0; background: none; padding: 0; height: 24px; font-size: var(--fs-meta); color: var(--cz-ink3); cursor: pointer; line-height: var(--lh-meta); }
|
|
228
229
|
.hm-tools button:hover { color: var(--cz-ink); }
|
|
229
230
|
.hm-pills { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 38px; }
|
|
230
|
-
.hm-pills button { min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink2); font-size: var(--fs-
|
|
231
|
-
.hm-pills button.pri { background: var(--cz-solid); color: var(--cz-onsolid); border-color: transparent; font-weight:
|
|
231
|
+
.hm-pills button { min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink2); font-size: var(--fs-meta); cursor: pointer; line-height: var(--lh-meta); }
|
|
232
|
+
.hm-pills button.pri { background: var(--cz-solid); color: var(--cz-onsolid); border-color: transparent; font-weight: var(--fw-strong); }
|
|
232
233
|
.hm-u { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
|
|
233
|
-
.hm-bub { max-width: 80%; padding: 10px 16px; border-radius: 18px 18px 8px 18px; background: var(--cz-bubble); font-size: var(--fs-
|
|
234
|
-
.hm-you { font-size: var(--fs-
|
|
234
|
+
.hm-bub { max-width: 80%; padding: 10px 16px; border-radius: 18px 18px 8px 18px; background: var(--cz-bubble); font-size: var(--fs-body); line-height: 1.5; color: var(--cz-ink); }
|
|
235
|
+
.hm-you { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
235
236
|
.hm-pend.sending .hm-bub { opacity: .72; } /* batch 24 item 2: the bubble shows at once, a touch lighter until PMOS takes it */
|
|
236
237
|
.hm-worked { padding-left: 38px; }
|
|
237
|
-
.hm-wk { display: flex; align-items: center; gap: 8px; max-width: 100%; min-height: 32px; padding: 0 4px; border: 0; border-radius: 8px; background: none; color: var(--cz-ink3); font-size: var(--fs-
|
|
238
|
+
.hm-wk { display: flex; align-items: center; gap: 8px; max-width: 100%; min-height: 32px; padding: 0 4px; border: 0; border-radius: 8px; background: none; color: var(--cz-ink3); font-size: var(--fs-meta); cursor: pointer; text-align: left; line-height: var(--lh-meta); } /* a plain grey line (AgChatAsk) */
|
|
238
239
|
.hm-wk:hover { color: var(--cz-ink2); }
|
|
239
240
|
.hm-wk span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
240
241
|
.hm-wk[aria-expanded="true"] svg { transform: rotate(90deg); }
|
|
241
|
-
.hm-calls { margin: 6px 0 0; padding: 0 0 0 16px; font-size: var(--fs-
|
|
242
|
-
.hm-calls code { margin-left: 8px; font-family: var(--cz-mono); font-size: var(--fs-
|
|
243
|
-
.hm-day, .hm-since { display: flex; align-items: center; gap: 12px; font-size: var(--fs-
|
|
242
|
+
.hm-calls { margin: 6px 0 0; padding: 0 0 0 16px; font-size: var(--fs-meta); color: var(--cz-ink3); display: flex; flex-direction: column; gap: 3px; line-height: var(--lh-meta); }
|
|
243
|
+
.hm-calls code { margin-left: 8px; font-family: var(--cz-mono); font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
244
|
+
.hm-day, .hm-since { display: flex; align-items: center; gap: 12px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
244
245
|
.hm-day span, .hm-since span { flex: 1; height: 1px; background: var(--cz-hair); }
|
|
245
|
-
.hm-since { color: var(--cz-blueink); font-weight:
|
|
246
|
-
.hm-fold { align-self: center; height: 32px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--cz-hair); background: var(--cz-card); font-size: var(--fs-
|
|
247
|
-
.hm-stopped, .hm-note { margin: 0; font-size: var(--fs-
|
|
246
|
+
.hm-since { color: var(--cz-blueink); font-weight: var(--fw-strong); } .hm-since span { background: var(--cz-blue); }
|
|
247
|
+
.hm-fold { align-self: center; height: 32px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--cz-hair); background: var(--cz-card); font-size: var(--fs-meta); color: var(--cz-ink2); cursor: pointer; line-height: var(--lh-meta); }
|
|
248
|
+
.hm-stopped, .hm-note { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); padding-left: 38px; line-height: var(--lh-meta); }
|
|
248
249
|
.hm-live { display: flex; gap: 10px; }
|
|
249
250
|
.hm-lb { flex: 1; min-width: 0; }
|
|
250
|
-
.hm-steps { list-style: none; margin: 6px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--cz-well); display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-
|
|
251
|
+
.hm-steps { list-style: none; margin: 6px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--cz-well); display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
251
252
|
.hm-steps li { display: flex; align-items: flex-start; gap: 10px; color: var(--cz-ink3); }
|
|
252
253
|
.hm-steps li > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
|
253
|
-
.hm-steps li small { font-size: var(--fs-
|
|
254
|
-
.hm-steps li code { font-family: var(--cz-mono); font-size: var(--fs-
|
|
254
|
+
.hm-steps li small { font-size: var(--fs-meta); font-weight: var(--fw-regular); color: var(--cz-ink3); line-height: var(--lh-meta); } /* a step's result and time (AgChatRunning) */
|
|
255
|
+
.hm-steps li code { font-family: var(--cz-mono); font-size: var(--fs-meta); font-weight: var(--fw-regular); color: var(--cz-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-meta); } /* the call it runs now */
|
|
255
256
|
.hm-steps li i { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--cz-ink3); flex: none; }
|
|
256
257
|
.hm-steps li.done { color: var(--cz-ink); } .hm-steps li.done i { background: var(--cz-done); border-color: var(--cz-done); }
|
|
257
|
-
.hm-steps li.now { color: var(--cz-ink); font-weight:
|
|
258
|
-
.hm-watch { margin-top: 6px; border: 0; background: none; padding: 0 8px; height: 30px; font-size: var(--fs-
|
|
258
|
+
.hm-steps li.now { color: var(--cz-ink); font-weight: var(--fw-strong); } .hm-steps li.now i { border: 2px solid var(--cz-blue); }
|
|
259
|
+
.hm-watch { margin-top: 6px; border: 0; background: none; padding: 0 8px; height: 30px; font-size: var(--fs-meta); color: var(--cz-ink2); cursor: pointer; line-height: var(--lh-meta); }
|
|
259
260
|
/* every kind of ask, one card (canvas XcbOptions "Every kind of ask", home-ask.js): part of the agent's message, in line with its text, no
|
|
260
261
|
* avatar of its own; the kind's label, what it asks, before → after where the change holds both, then the answers as labeled icons */
|
|
261
262
|
.hm-askw, .hm-askc { padding-left: 38px; }
|
|
@@ -264,11 +265,11 @@ body.cz-home { min-height: 100vh; overflow: hidden; }
|
|
|
264
265
|
.hm-flash .hm-askk, .hm-a.hm-flash .hm-ab { animation: hm-flash .9s ease-out 1; border-radius: 16px; }
|
|
265
266
|
@keyframes hm-flash { 0% { box-shadow: inset 0 0 0 1.5px var(--cz-blue), 0 0 0 0 var(--cz-blue); } 40% { box-shadow: inset 0 0 0 1.5px var(--cz-blue), 0 0 0 5px color-mix(in srgb, var(--cz-blue) 30%, transparent); } 100% { box-shadow: inset 0 0 0 1.5px var(--cz-blue), 0 0 0 0 transparent; } }
|
|
266
267
|
@media (prefers-reduced-motion: reduce) { .hm-flash .hm-askk, .hm-a.hm-flash .hm-ab { animation: none; } }
|
|
267
|
-
.hm-askk { padding: 10px 12px 12px; border-radius: 16px; background: linear-gradient(180deg, var(--cz-bluebg) 0%, var(--cz-card) 70%); box-shadow: inset 0 0 0 1.5px var(--cz-blue); display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-
|
|
268
|
-
.hm-askk .k { margin: 0; font-size: var(--fs-
|
|
269
|
-
.hm-askk .q { font-size: var(--fs-
|
|
270
|
-
.hm-askk .ft { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-
|
|
271
|
-
.hm-askk .ft b { font-weight:
|
|
268
|
+
.hm-askk { padding: 10px 12px 12px; border-radius: 16px; background: linear-gradient(180deg, var(--cz-bluebg) 0%, var(--cz-card) 70%); box-shadow: inset 0 0 0 1.5px var(--cz-blue); display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
269
|
+
.hm-askk .k { margin: 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
|
|
270
|
+
.hm-askk .q { font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); overflow-wrap: anywhere; line-height: var(--lh-row); }
|
|
271
|
+
.hm-askk .ft { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
272
|
+
.hm-askk .ft b { font-weight: var(--fw-strong); }
|
|
272
273
|
.hm-askk s { color: var(--cz-ink3); }
|
|
273
274
|
.hm-askk .acts, .hm-fix { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
|
|
274
275
|
.hm-fix { padding-left: 38px; margin-top: 0; }
|
|
@@ -279,9 +280,9 @@ body.cz-home { min-height: 100vh; overflow: hidden; }
|
|
|
279
280
|
.hm-chat .hm-askk.tc { margin-top: 0; padding: 10px 12px 12px; }
|
|
280
281
|
.hm-chat .hm-askk .askq { margin: 0 0 6px; display: flex; flex-direction: column; gap: 4px; }
|
|
281
282
|
.hm-chat .chips2 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
|
|
282
|
-
.hm-chat .chips2 .chip2 { min-height: 44px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font:
|
|
283
|
+
.hm-chat .chips2 .chip2 { min-height: 44px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: var(--fw-strong) var(--fs-label)/1.25 var(--cz-sans); text-align: left; cursor: pointer; }
|
|
283
284
|
.hm-chat .chips2 .chip2.rec { border-color: var(--cz-blue); background: var(--cz-bluebg); }
|
|
284
|
-
.hm-chat .chips2 .chip2 small { display: block; font-size: var(--fs-
|
|
285
|
+
.hm-chat .chips2 .chip2 small { display: block; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-blueink); line-height: var(--lh-badge); }
|
|
285
286
|
.hm-chat .chips2 .chip2[aria-pressed="true"] { background: var(--cz-solid); color: var(--cz-onsolid); border-color: transparent; }
|
|
286
287
|
.hm-chat .chips2 .chip2[aria-pressed="true"] small { color: inherit; }
|
|
287
288
|
.hm-chat .chips2 .chip2:disabled { opacity: .55; cursor: default; }
|
|
@@ -296,48 +297,48 @@ body.cz-home { min-height: 100vh; overflow: hidden; }
|
|
|
296
297
|
the floating menu button steps aside while it is open, so nothing covers it */
|
|
297
298
|
.hm-scope .hm-addm { left: auto; right: 0; max-width: calc(100vw - 32px); }
|
|
298
299
|
body:has(.hm-addm:not([hidden])) .cz-fab { visibility: hidden; }
|
|
299
|
-
.hm-addm button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 44px; padding: 6px 10px; background: none; color: var(--cz-ink); cursor: pointer; font-family: var(--cz-sans); font-size: var(--fs-
|
|
300
|
+
.hm-addm button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 44px; padding: 6px 10px; background: none; color: var(--cz-ink); cursor: pointer; font-family: var(--cz-sans); font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
300
301
|
.hm-addm button:hover, .hm-addm button:focus-visible { background: var(--cz-well); }
|
|
301
|
-
.hm-addm em { font-style: normal; font-size: var(--fs-
|
|
302
|
-
.hm-addm b { font-weight:
|
|
302
|
+
.hm-addm em { font-style: normal; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
303
|
+
.hm-addm b { font-weight: var(--fw-strong); }
|
|
303
304
|
.hm-q { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; opacity: .75; }
|
|
304
|
-
.hm-qb { max-width: 80%; padding: 10px 16px; border-radius: 18px 18px 8px 18px; border: 1px dashed var(--cz-blue); font-size: var(--fs-
|
|
305
|
-
.hm-qn { font-size: var(--fs-
|
|
306
|
-
.hm-qn button { border: 0; background: none; color: var(--cz-blueink); cursor: pointer; font-size: var(--fs-
|
|
305
|
+
.hm-qb { max-width: 80%; padding: 10px 16px; border-radius: 18px 18px 8px 18px; border: 1px dashed var(--cz-blue); font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
306
|
+
.hm-qn { font-size: var(--fs-meta); color: var(--cz-ink3); display: flex; gap: 10px; align-items: center; line-height: var(--lh-meta); }
|
|
307
|
+
.hm-qn button { border: 0; background: none; color: var(--cz-blueink); cursor: pointer; font-size: var(--fs-meta); padding: 0; height: 24px; line-height: var(--lh-meta); }
|
|
307
308
|
|
|
308
309
|
/* ── the foot: also, the run strip, the composers ── */
|
|
309
310
|
.hm-foot { flex: none; display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
|
|
310
|
-
.hm-also { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--cz-bluebg); color: var(--cz-ink); font-size: var(--fs-
|
|
311
|
+
.hm-also { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--cz-bluebg); color: var(--cz-ink); font-size: var(--fs-meta); cursor: pointer; text-align: left; line-height: var(--lh-meta); }
|
|
311
312
|
.hm-also i { width: 7px; height: 7px; border-radius: 50%; background: var(--cz-blue); flex: none; }
|
|
312
313
|
.hm-also span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
313
|
-
.hm-also em { font-style: normal; font-weight:
|
|
314
|
+
.hm-also em { font-style: normal; font-weight: var(--fw-strong); color: var(--cz-blueink); }
|
|
314
315
|
.hm-run { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 16px; background: var(--cz-card); box-shadow: inset 0 0 0 1px var(--cz-hair); }
|
|
315
|
-
.hm-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--fs-
|
|
316
|
-
.hm-rt span { font-size: var(--fs-
|
|
316
|
+
.hm-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
317
|
+
.hm-rt span { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
317
318
|
.hm-bar { flex: 0 0 64px; height: 4px; border: 0; border-radius: 2px; background: var(--cz-hair); overflow: hidden; appearance: none; -webkit-appearance: none; color: var(--cz-blue); }
|
|
318
319
|
.hm-bar::-webkit-progress-bar { background: var(--cz-hair); }
|
|
319
320
|
.hm-bar::-webkit-progress-value { background: var(--cz-blue); }
|
|
320
321
|
.hm-bar::-moz-progress-bar { background: var(--cz-blue); }
|
|
321
|
-
.hm-stop { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--cz-hair); background: var(--cz-card); font-size: var(--fs-
|
|
322
|
+
.hm-stop { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--cz-hair); background: var(--cz-card); font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); cursor: pointer; line-height: var(--lh-row); }
|
|
322
323
|
.hm-stop i { width: 9px; height: 9px; border-radius: 2px; background: var(--cz-ink); }
|
|
323
324
|
.hm-box-rich, .hm-box#hmForm, form.hm-box { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 24px; background: var(--cz-well); }
|
|
324
|
-
form.hm-box textarea { min-height: 48px; border: 0; background: none; resize: none; font: inherit; font-size: var(--fs-
|
|
325
|
+
form.hm-box textarea { min-height: 48px; border: 0; background: none; resize: none; font: inherit; font-size: var(--fs-body); color: var(--cz-ink); padding: 8px 10px; outline: none; line-height: var(--lh-body); }
|
|
325
326
|
.hm-tb { display: flex; align-items: center; gap: 4px; }
|
|
326
327
|
.hm-tb .sp { flex: 1; }
|
|
327
|
-
.hm-tool { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; border: 0; background: none; color: var(--cz-ink2); cursor: pointer; font-size: var(--fs-
|
|
328
|
+
.hm-tool { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; border: 0; background: none; color: var(--cz-ink2); cursor: pointer; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
328
329
|
.hm-tool:hover { background: var(--cz-well2); }
|
|
329
|
-
.hm-tool b { font-weight:
|
|
330
|
-
.hm-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 999px; border: 0; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-
|
|
330
|
+
.hm-tool b { font-weight: var(--fw-regular); }
|
|
331
|
+
.hm-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 999px; border: 0; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-label); font-weight: var(--fw-strong); cursor: pointer; max-width: 260px; min-width: 0; white-space: nowrap; flex: 0 1 auto; line-height: var(--lh-label); }
|
|
331
332
|
.hm-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
332
333
|
.hm-chip.to { background: var(--cz-card); color: var(--cz-ink); }
|
|
333
334
|
.hm-chip.loose { background: var(--cz-well); color: var(--cz-ink2); }
|
|
334
335
|
.hm-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cz-blue); }
|
|
335
|
-
.hm-key { font-size: var(--fs-
|
|
336
|
+
.hm-key { font-size: var(--fs-meta); color: var(--cz-ink3); margin-right: 6px; line-height: var(--lh-meta); }
|
|
336
337
|
.hm-send { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--cz-solid); color: var(--cz-onsolid); display: grid; place-items: center; cursor: pointer; }
|
|
337
338
|
.hm-files { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 0 8px; }
|
|
338
|
-
.hm-att { display: inline-flex; flex: none; align-items: center; gap: 6px; max-width: 220px; padding: 2px 2px 2px 10px; border-radius: 999px; background: var(--cz-card); font-size: var(--fs-
|
|
339
|
+
.hm-att { display: inline-flex; flex: none; align-items: center; gap: 6px; max-width: 220px; padding: 2px 2px 2px 10px; border-radius: 999px; background: var(--cz-card); font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
339
340
|
.hm-att.saving { opacity: .6; }
|
|
340
|
-
.hm-att b { font-weight:
|
|
341
|
+
.hm-att b { font-weight: var(--fw-strong); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
341
342
|
.hm-att em { font-style: normal; color: var(--cz-ink3); white-space: nowrap; }
|
|
342
343
|
.hm-ath { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; margin-left: -6px; }
|
|
343
344
|
.hm-att button { border: 0; background: none; cursor: pointer; width: 28px; height: 28px; border-radius: 999px; color: var(--cz-ink3); }
|
|
@@ -345,11 +346,11 @@ form.hm-box textarea { min-height: 48px; border: 0; background: none; resize: no
|
|
|
345
346
|
.hm-chat.hm-drop { outline: 2px dashed var(--cz-blue); outline-offset: -8px; }
|
|
346
347
|
.hm-scope { display: flex; align-items: center; gap: 8px; }
|
|
347
348
|
.hm-scope .sp { flex: 1; }
|
|
348
|
-
.hm-link { border: 0; background: none; color: var(--cz-blueink); font-size: var(--fs-
|
|
349
|
+
.hm-link { border: 0; background: none; color: var(--cz-blueink); font-size: var(--fs-label); font-weight: var(--fw-strong); cursor: pointer; height: 32px; line-height: var(--lh-label); }
|
|
349
350
|
.hm-basic { display: flex; align-items: flex-end; gap: 8px; }
|
|
350
|
-
.hm-basic textarea { flex: 1; box-sizing: border-box; min-height: 46px; padding: 12px 18px; border-radius: 28px; border: 0; background: var(--cz-well); resize: none; font: inherit; font-size: var(--fs-
|
|
351
|
+
.hm-basic textarea { flex: 1; box-sizing: border-box; min-height: 46px; padding: 12px 18px; border-radius: 28px; border: 0; background: var(--cz-well); resize: none; font: inherit; font-size: var(--fs-body); color: var(--cz-ink); outline: none; line-height: var(--lh-body); }
|
|
351
352
|
.hm-go { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--cz-solid); color: var(--cz-onsolid); display: grid; place-items: center; cursor: pointer; flex: none; }
|
|
352
|
-
.hm-hint { margin: 0; font-size: var(--fs-
|
|
353
|
+
.hm-hint { margin: 0; font-size: var(--fs-meta); line-height: 1.5; color: var(--cz-ink3); }
|
|
353
354
|
|
|
354
355
|
/* ── menus and the toast ── */
|
|
355
356
|
.hm-menu { position: fixed; z-index: 80; left: 12px; bottom: 12px; width: min(300px, calc(100vw - 24px)); box-sizing: border-box; max-height: min(440px, calc(100vh - 24px)); overflow: auto; padding: 6px; border-radius: 18px; background: var(--cz-card); box-shadow: var(--cz-sheet); border: 1px solid var(--cz-hair); display: flex; flex-direction: column; }
|
|
@@ -360,104 +361,104 @@ form.hm-box textarea { min-height: 48px; border: 0; background: none; resize: no
|
|
|
360
361
|
/* on a phone the menu is always the sheet at the bottom: the buttons that open it sit low on the screen, so a menu under them would leave it */
|
|
361
362
|
@media (max-width: 760px) { .hm-menu.hm-menu { position-anchor: auto; left: 12px; top: auto; bottom: 12px; margin: 0; }
|
|
362
363
|
.hm-menu.hm-menu.top { left: auto; right: 12px; top: 64px; bottom: auto; max-height: calc(100vh - 80px); } } /* top: set from the button when it opened the menu */ /* the ⋯ menu of the top bar opens under its button */
|
|
363
|
-
.hm-ml { margin: 6px 10px; font-size: var(--fs-
|
|
364
|
+
.hm-ml { margin: 6px 10px; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
|
|
364
365
|
.hm-menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 44px; flex-shrink: 0; /* a long row keeps its height in a menu that scrolls (testing fixes: rows drew over each other) */
|
|
365
|
-
padding: 6px 10px; border: 0; border-radius: 12px; background: none; color: var(--cz-ink); cursor: pointer; text-align: left; font-family: var(--cz-sans); font-size: var(--fs-
|
|
366
|
+
padding: 6px 10px; border: 0; border-radius: 12px; background: none; color: var(--cz-ink); cursor: pointer; text-align: left; font-family: var(--cz-sans); font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
366
367
|
.hm-menu button:hover, .hm-menu button:focus-visible { background: var(--cz-well); }
|
|
367
|
-
.hm-menu em { font-style: normal; font-size: var(--fs-
|
|
368
|
-
.hm-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-size: var(--fs-
|
|
368
|
+
.hm-menu em { font-style: normal; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
369
|
+
.hm-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-size: var(--fs-body); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; line-height: var(--lh-body); }
|
|
369
370
|
.hm-toast.on { opacity: 1; transform: translate(-50%, 0); }
|
|
370
371
|
|
|
371
372
|
/* ── the Viewer contents drawn here (needs rows, the weekly update, the minimal versions) ── */
|
|
372
|
-
.hv { padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 14px; font-size: var(--fs-
|
|
373
|
-
.hv-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--cz-well); font-size: var(--fs-
|
|
374
|
-
.hv-h { margin: 0; font-size: var(--fs-
|
|
373
|
+
.hv { padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 14px; font-size: var(--fs-body); color: var(--cz-ink); line-height: var(--lh-body); }
|
|
374
|
+
.hv-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--cz-well); font-size: var(--fs-meta); line-height: 1.5; color: var(--cz-ink2); }
|
|
375
|
+
.hv-h { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
375
376
|
.hv-facts { margin: 0; display: grid; gap: 6px; }
|
|
376
377
|
.hv-facts div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; }
|
|
377
|
-
.hv-facts dt { color: var(--cz-ink3); font-size: var(--fs-
|
|
378
|
-
.hv-sec h4 { margin: 0 0 8px; font-size: var(--fs-
|
|
378
|
+
.hv-facts dt { color: var(--cz-ink3); font-size: var(--fs-meta); line-height: var(--lh-meta); } .hv-facts dd { margin: 0; }
|
|
379
|
+
.hv-sec h4 { margin: 0 0 8px; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
379
380
|
.hv-opts { display: flex; flex-direction: column; gap: 6px; }
|
|
380
381
|
.hv-opts button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--cz-hair); background: var(--cz-card); text-align: left; cursor: pointer; color: var(--cz-ink); font-family: var(--cz-sans); }
|
|
381
382
|
.hv-opts button[aria-checked="true"] { box-shadow: inset 0 0 0 1.5px var(--cz-blue); background: var(--cz-bluebg); }
|
|
382
|
-
.hv-opts em { font-style: normal; font-size: var(--fs-
|
|
383
|
-
.hv-why { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: var(--fs-
|
|
384
|
-
.hv-why textarea, .hv-why input { font: inherit; font-size: var(--fs-
|
|
383
|
+
.hv-opts em { font-style: normal; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
384
|
+
.hv-why { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
385
|
+
.hv-why textarea, .hv-why input { font: inherit; font-size: var(--fs-body); color: var(--cz-ink); padding: 8px 10px; border-radius: 12px; border: 1px solid var(--cz-hair); background: var(--cz-card); resize: vertical; min-height: 36px; box-sizing: border-box; line-height: var(--lh-body); }
|
|
385
386
|
.hv-seg { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
386
387
|
.hv-seg button { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--cz-hair); background: var(--cz-card); cursor: pointer; color: var(--cz-ink2); }
|
|
387
|
-
.hv-seg button[aria-pressed="true"] { background: var(--cz-bluebg); color: var(--cz-blueink); border-color: transparent; font-weight:
|
|
388
|
+
.hv-seg button[aria-pressed="true"] { background: var(--cz-bluebg); color: var(--cz-blueink); border-color: transparent; font-weight: var(--fw-strong); }
|
|
388
389
|
.hv-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
|
|
389
390
|
.hv-later { position: relative; }
|
|
390
391
|
.hv-lm { position: absolute; left: 0; top: 40px; z-index: 5; min-width: 160px; padding: 6px; border-radius: 14px; background: var(--cz-card); box-shadow: var(--cz-sheet); display: flex; flex-direction: column; }
|
|
391
392
|
.hv-lm[hidden] { display: none; }
|
|
392
393
|
.hv-lm button { border: 0; background: none; text-align: left; min-height: 36px; padding: 0 10px; border-radius: 10px; cursor: pointer; color: var(--cz-ink); }
|
|
393
394
|
.hv-lm button:hover { background: var(--cz-well); }
|
|
394
|
-
.hv-to { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-
|
|
395
|
-
.hv-chip { height: 26px; padding: 0 10px; border-radius: 999px; border: 0; background: var(--cz-well); color: var(--cz-ink); font-size: var(--fs-
|
|
396
|
-
.hv-to input { flex: 1; min-width: 120px; height: 28px; border: 0; background: none; font: inherit; font-size: var(--fs-
|
|
397
|
-
.hv-up h4 { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: var(--fs-
|
|
395
|
+
.hv-to { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
396
|
+
.hv-chip { height: 26px; padding: 0 10px; border-radius: 999px; border: 0; background: var(--cz-well); color: var(--cz-ink); font-size: var(--fs-meta); cursor: pointer; line-height: var(--lh-meta); }
|
|
397
|
+
.hv-to input { flex: 1; min-width: 120px; height: 28px; border: 0; background: none; font: inherit; font-size: var(--fs-meta); color: var(--cz-ink); outline: none; line-height: var(--lh-meta); }
|
|
398
|
+
.hv-up h4 { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
398
399
|
.hv-up h4 i { width: 8px; height: 8px; border-radius: 50%; background: var(--cz-done); }
|
|
399
400
|
.hv-up.risk h4 i { background: var(--cz-blue); } .hv-up.decide h4 i { background: none; box-shadow: inset 0 0 0 1.5px var(--cz-blue); }
|
|
400
401
|
.hv-ui { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 12px; margin-bottom: 6px; border-radius: 12px; border: 1px solid var(--cz-hair); background: var(--cz-card); text-align: left; cursor: pointer; color: var(--cz-ink); font-family: var(--cz-sans); }
|
|
401
|
-
.hv-ui .t { display: flex; align-items: baseline; gap: 8px; } .hv-ui .t b { flex: 1; font-size: var(--fs-
|
|
402
|
-
.hv-ui .d { font-size: var(--fs-
|
|
403
|
-
.hv-ui .flag { align-self: flex-start; padding: 1px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--cz-blue); color: var(--cz-blueink); font-size: var(--fs-
|
|
402
|
+
.hv-ui .t { display: flex; align-items: baseline; gap: 8px; } .hv-ui .t b { flex: 1; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); } .hv-ui .t em { font-style: normal; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
403
|
+
.hv-ui .d { font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
|
|
404
|
+
.hv-ui .flag { align-self: flex-start; padding: 1px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--cz-blue); color: var(--cz-blueink); font-size: var(--fs-label); font-weight: var(--fw-strong); line-height: var(--lh-label); }
|
|
404
405
|
.hv-doc { line-height: 1.6; }
|
|
405
|
-
.hx { padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 12px; font-size: var(--fs-
|
|
406
|
-
.hx-wait, .hv .hx-wait { margin: 0; display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--cz-well); color: var(--cz-ink3); font-size: var(--fs-
|
|
406
|
+
.hx { padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 12px; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
407
|
+
.hx-wait, .hv .hx-wait { margin: 0; display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--cz-well); color: var(--cz-ink3); font-size: var(--fs-badge); font-weight: var(--fw-strong); line-height: var(--lh-badge); }
|
|
407
408
|
.hx-wait i { width: 6px; height: 6px; border-radius: 50%; background: var(--cz-dot-q); }
|
|
408
|
-
.hx-sec h4 { margin: 4px 0 6px; font-size: var(--fs-
|
|
409
|
+
.hx-sec h4 { margin: 4px 0 6px; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
409
410
|
.hx-row { display: flex; align-items: center; gap: 8px; min-height: 44px; border-bottom: 1px solid var(--cz-hair); }
|
|
410
411
|
.hx-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
|
411
|
-
.hx-t em { font-style: normal; font-size: var(--fs-
|
|
412
|
-
.hm-iss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin: 4px 0 8px; border-radius: 16px; background: var(--cz-well); font-size: var(--fs-
|
|
412
|
+
.hx-t em { font-style: normal; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
413
|
+
.hm-iss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin: 4px 0 8px; border-radius: 16px; background: var(--cz-well); font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); } /* a draft's Issue it bar */
|
|
413
414
|
.hm-iss span { flex: 1; min-width: 180px; }
|
|
414
415
|
.hm-iss.done { color: var(--cz-ink3); }
|
|
415
|
-
.hm-md { font-size: var(--fs-
|
|
416
|
-
.hm-md h1, .hm-md h2, .hm-md h3 { font-size: var(--fs-
|
|
416
|
+
.hm-md { font-size: var(--fs-body); line-height: 1.55; color: var(--cz-ink); overflow-wrap: anywhere; }
|
|
417
|
+
.hm-md h1, .hm-md h2, .hm-md h3 { font-size: var(--fs-body); margin: 12px 0 4px; line-height: var(--lh-body); }
|
|
417
418
|
/* a table Claude wrote (chat-md.js .mdtab): Home does not load premium.css, so the chat's tables had no rules, padding or edge (PM, 2026-10-27) */
|
|
418
419
|
:is(.hm-md, .hm-ab .md) .mdtab { margin: 4px 0 12px; overflow-x: auto; border: 1px solid var(--cz-hair); border-radius: 12px; }
|
|
419
|
-
:is(.hm-md, .hm-ab .md) .mdtab table { border-collapse: collapse; width: 100%; font-size: var(--fs-
|
|
420
|
+
:is(.hm-md, .hm-ab .md) .mdtab table { border-collapse: collapse; width: 100%; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
420
421
|
:is(.hm-md, .hm-ab .md) .mdtab th, :is(.hm-md, .hm-ab .md) .mdtab td { padding: 7px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--cz-hair); overflow-wrap: normal; }
|
|
421
|
-
:is(.hm-md, .hm-ab .md) .mdtab th { font-weight:
|
|
422
|
+
:is(.hm-md, .hm-ab .md) .mdtab th { font-weight: var(--fw-strong); background: var(--cz-well); }
|
|
422
423
|
:is(.hm-md, .hm-ab .md) .mdtab tr:last-child td { border-bottom: 0; }
|
|
423
424
|
:is(.hm-md, .hm-ab .md) .mdtab .al-c { text-align: center; }
|
|
424
425
|
:is(.hm-md, .hm-ab .md) .mdtab .al-r { text-align: right; }
|
|
425
|
-
.hx-t small { font-size: var(--fs-
|
|
426
|
-
.hv-why select { font: inherit; font-size: var(--fs-
|
|
427
|
-
.hx-b { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font-size: var(--fs-
|
|
428
|
-
.hx-b.pri { background: var(--cz-solid); color: var(--cz-onsolid); border-color: transparent; font-weight:
|
|
426
|
+
.hx-t small { font-size: var(--fs-meta); color: var(--cz-ink3); overflow-wrap: anywhere; line-height: var(--lh-meta); } /* a linked document's address, as text */
|
|
427
|
+
.hv-why select { font: inherit; font-size: var(--fs-meta); color: var(--cz-ink); padding: 0 10px; height: 36px; border-radius: 12px; border: 1px solid var(--cz-hair); background: var(--cz-card); box-sizing: border-box; line-height: var(--lh-meta); }
|
|
428
|
+
.hx-b { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font-size: var(--fs-meta); cursor: pointer; font-family: var(--cz-sans); line-height: var(--lh-meta); }
|
|
429
|
+
.hx-b.pri { background: var(--cz-solid); color: var(--cz-onsolid); border-color: transparent; font-weight: var(--fw-strong); }
|
|
429
430
|
.hx-b:disabled { opacity: .5; cursor: not-allowed; }
|
|
430
|
-
.hx-sw { height: 28px; min-width: 48px; border-radius: 999px; border: 0; background: var(--cz-well2); color: var(--cz-ink3); font-size: var(--fs-
|
|
431
|
+
.hx-sw { height: 28px; min-width: 48px; border-radius: 999px; border: 0; background: var(--cz-well2); color: var(--cz-ink3); font-size: var(--fs-label); font-weight: var(--fw-strong); cursor: pointer; line-height: var(--lh-label); }
|
|
431
432
|
.hx-sw[aria-checked="true"] { background: var(--cz-bluebg); color: var(--cz-blueink); }
|
|
432
|
-
.hx-n { margin: 0; font-size: var(--fs-
|
|
433
|
+
.hx-n { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
433
434
|
.hx-h.warn, .hx-h.bad { color: var(--cz-late); }
|
|
434
435
|
.hx-add { display: flex; gap: 8px; margin-top: 8px; }
|
|
435
|
-
.hx-add input, .hx-q input { flex: 1; height: 36px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--cz-hair); background: var(--cz-card); font: inherit; font-size: var(--fs-
|
|
436
|
+
.hx-add input, .hx-q input { flex: 1; height: 36px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--cz-hair); background: var(--cz-card); font: inherit; font-size: var(--fs-body); color: var(--cz-ink); box-sizing: border-box; line-height: var(--lh-body); }
|
|
436
437
|
.hx-q { display: flex; }
|
|
437
438
|
.hx-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
|
|
438
|
-
.hx-tabs button { height: 32px; padding: 0 12px; border-radius: 999px; border: 0; background: none; color: var(--cz-ink3); font-weight:
|
|
439
|
+
.hx-tabs button { height: 32px; padding: 0 12px; border-radius: 999px; border: 0; background: none; color: var(--cz-ink3); font-weight: var(--fw-strong); font-size: var(--fs-label); cursor: pointer; line-height: var(--lh-label); }
|
|
439
440
|
.hx-tabs button[aria-selected="true"], .hx-tabs button[aria-pressed="true"] { background: var(--cz-well); color: var(--cz-ink); }
|
|
440
441
|
.hx-top { display: flex; align-items: center; gap: 10px; }
|
|
441
442
|
.hx-hit { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer; color: var(--cz-ink); font-family: var(--cz-sans); }
|
|
442
443
|
.hx-hit:hover { background: var(--cz-well); }
|
|
443
|
-
.hx-hit em { font-style: normal; font-size: var(--fs-
|
|
444
|
-
.hx select { height: 30px; border-radius: 10px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: inherit; font-size: var(--fs-
|
|
444
|
+
.hx-hit em { font-style: normal; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
445
|
+
.hx select { height: 30px; border-radius: 10px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: inherit; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
445
446
|
|
|
446
447
|
/* ── a phone: the chat is the page; the list is a sheet ── */
|
|
447
448
|
@media (max-width: 760px) {
|
|
448
449
|
body.cz-home { overflow: auto; }
|
|
449
450
|
.hm-top { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 20; padding: 16px 12px 8px 18px; background: var(--cz-ground); }
|
|
450
451
|
.hm-top-t { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
|
|
451
|
-
.hm-top-t b { font-size: var(--fs-
|
|
452
|
-
.hm-top-t span { font-size: var(--fs-
|
|
452
|
+
.hm-top-t b { font-size: var(--fs-row); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; line-height: var(--lh-row); }
|
|
453
|
+
.hm-top-t span { font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-meta); }
|
|
453
454
|
/* session names A: the top bar is back + the name; the name is a 44 px press, and the field fills the bar (XmsNames) */
|
|
454
455
|
.hm-top-t:has(.hm-rn, .hm-ren) b { max-width: 100%; flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
|
455
456
|
.hm-top-t .hm-rn { min-height: 44px; display: flex; align-items: center; max-width: 100%; }
|
|
456
|
-
.hm-top-t .hm-rn, .hm-top-t .hm-ren input { font-size: var(--fs-
|
|
457
|
+
.hm-top-t .hm-rn, .hm-top-t .hm-ren input { font-size: var(--fs-field); }
|
|
457
458
|
.hm-top-t .hm-ren { flex: none; height: 44px; }
|
|
458
459
|
.hm-top-t .hm-ren .sv { width: 36px; height: 36px; }
|
|
459
460
|
.hm-top-t span:empty { display: none; }
|
|
460
|
-
.hm-needs { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font-size: var(--fs-
|
|
461
|
+
.hm-needs { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font-size: var(--fs-row); font-weight: var(--fw-strong); cursor: pointer; font-family: var(--cz-sans); line-height: var(--lh-row); }
|
|
461
462
|
.hm-needs i { width: 7px; height: 7px; border-radius: 50%; background: var(--cz-dot-q); }
|
|
462
463
|
.hm-needs.loud i { background: var(--cz-blue); }
|
|
463
464
|
.hm-top .hm-ib { width: 44px; height: 44px; }
|
|
@@ -468,9 +469,9 @@ form.hm-box textarea { min-height: 48px; border: 0; background: none; resize: no
|
|
|
468
469
|
.hm-chat { min-height: calc(100vh - 92px); min-height: calc(100dvh - 92px); }
|
|
469
470
|
.hm-foot .hm-chip { min-height: 44px; }
|
|
470
471
|
.hx-tabs button, .hx-b { height: auto; min-height: 44px; } /* the Viewer's minimal views: 44 px targets on a phone */
|
|
471
|
-
.hm-foot textarea { font-size: var(--fs-
|
|
472
|
-
.hv-why input, .hv-why select, .hv-why textarea { font-size: var(--fs-
|
|
473
|
-
.hx-row select, .hx-add input { font-size: var(--fs-
|
|
472
|
+
.hm-foot textarea { font-size: var(--fs-field); } /* 16 px or more: focus does not zoom the page on a phone */
|
|
473
|
+
.hv-why input, .hv-why select, .hv-why textarea { font-size: var(--fs-field); min-height: 44px; }
|
|
474
|
+
.hx-row select, .hx-add input { font-size: var(--fs-field); min-height: 44px; } /* a task's status and Add a task: 44 px targets that do not zoom the page */
|
|
474
475
|
.hm-foot { position: sticky; bottom: 0; z-index: 5; margin: 0 -16px; padding: 8px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--cz-ground); } /* the composer stays on the screen while the conversation scrolls */
|
|
475
476
|
.hm-x { opacity: 1; }
|
|
476
477
|
.hm-unfold, .hm-folded .hm-unfold { display: none; }
|
|
@@ -481,7 +482,7 @@ form.hm-box textarea { min-height: 48px; border: 0; background: none; resize: no
|
|
|
481
482
|
/* the menu button sits just above the foot (the box, its bars and the hint: home-chat.js keeps --bd-hmfoot), never over a press; the log ends
|
|
482
483
|
* with room for it, so the last message scrolls clear of it */
|
|
483
484
|
@media (max-width: 760px) { body.cz-home .cz-fabw { bottom: calc(var(--bd-hmfoot, 232px) + 10px); } body.cz-home.hm-sheet .cz-fabw { bottom: 118px; } .hm-log { padding-bottom: 76px; } }
|
|
484
|
-
.hv-term { margin: 0; height: 100%; box-sizing: border-box; padding: 16px 20px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: var(--cz-mono); font-size: var(--fs-
|
|
485
|
+
.hv-term { margin: 0; height: 100%; box-sizing: border-box; padding: 16px 20px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: var(--cz-mono); font-size: var(--fs-meta); line-height: 1.5; color: var(--cz-ink2); background: var(--cz-well); }
|
|
485
486
|
.hv-xt { height: 100%; box-sizing: border-box; padding: 12px 16px; overflow: auto; background: var(--cz-well); } /* term-view.js: the session's terminal drawn by xterm.js, read only */
|
|
486
487
|
.hv-xt .xterm { display: inline-block; zoom: .8; } /* xterm's 15px default drawn at 12px */
|
|
487
488
|
.hv-xt .xterm-viewport { background: transparent !important; }
|
|
@@ -491,59 +492,59 @@ form.hm-box textarea { min-height: 48px; border: 0; background: none; resize: no
|
|
|
491
492
|
.hm-chat .ctxc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
|
|
492
493
|
.hm-chat .ctxchip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 40px; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); cursor: pointer; text-align: left; font-family: var(--cz-sans); }
|
|
493
494
|
.hm-chat .ctxchip span { display: flex; flex-direction: column; min-width: 0; }
|
|
494
|
-
.hm-chat .ctxchip b { font-size: var(--fs-
|
|
495
|
-
.hm-chat .ctxchip em { font-style: normal; font-size: var(--fs-
|
|
495
|
+
.hm-chat .ctxchip b { font-size: var(--fs-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-meta); }
|
|
496
|
+
.hm-chat .ctxchip em { font-style: normal; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
496
497
|
.hm-chat .ctxchip.lead { box-shadow: inset 0 0 0 1.5px var(--cz-blue); }
|
|
497
498
|
.hm-chat .ctxchip svg, .hm-chat .i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
|
|
498
|
-
.hm-chat .tc, .hm-chat .gcard { margin-top: 8px; padding: 12px 14px; border-radius: 16px; background: var(--cz-card); box-shadow: inset 0 0 0 1.5px var(--cz-blue); font-size: var(--fs-
|
|
499
|
-
.hm-chat .agtag, .hm-chat .askh { margin: 0 0 4px; font-size: var(--fs-
|
|
499
|
+
.hm-chat .tc, .hm-chat .gcard { margin-top: 8px; padding: 12px 14px; border-radius: 16px; background: var(--cz-card); box-shadow: inset 0 0 0 1.5px var(--cz-blue); font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
500
|
+
.hm-chat .agtag, .hm-chat .askh { margin: 0 0 4px; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
|
|
500
501
|
.hm-chat .askq, .hm-chat .tt { margin: 0 0 6px; }
|
|
501
502
|
.hm-chat .chips, .hm-chat .chatopts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
|
|
502
|
-
.hm-chat .chips .chip, .hm-chat .chatopts .cta, .hm-chat .askfoot button { min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font-size: var(--fs-
|
|
503
|
-
.hm-chat .chips .chip[aria-pressed="true"], .hm-chat .chatopts .cta:not(.alt) { background: var(--cz-solid); color: var(--cz-onsolid); border-color: transparent; font-weight:
|
|
503
|
+
.hm-chat .chips .chip, .hm-chat .chatopts .cta, .hm-chat .askfoot button { min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font-size: var(--fs-meta); cursor: pointer; font-family: var(--cz-sans); line-height: var(--lh-meta); }
|
|
504
|
+
.hm-chat .chips .chip[aria-pressed="true"], .hm-chat .chatopts .cta:not(.alt) { background: var(--cz-solid); color: var(--cz-onsolid); border-color: transparent; font-weight: var(--fw-strong); }
|
|
504
505
|
.hm-chat .gkv { display: grid; grid-template-columns: 90px 1fr; gap: 4px 10px; margin: 6px 0; }
|
|
505
|
-
.hm-chat .smart { display: flex; gap: 4px; } .hm-chat .smart b { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: var(--fs-
|
|
506
|
+
.hm-chat .smart { display: flex; gap: 4px; } .hm-chat .smart b { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: var(--fs-meta); background: var(--cz-well); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
506
507
|
.hm-chat .smart b.y { background: var(--cz-bluebg); color: var(--cz-blueink); }
|
|
507
508
|
/* the goal before Start (XcbOptions B, row 1; home-goal.js, goal-chat.js): the method line with Change, a row of dots (one per point the
|
|
508
509
|
* method needs), tap answers with one recommended, the plan card with Start, Change and Cancel as icons, the editor in place, the /goal choice */
|
|
509
|
-
:is(.hm-chat, .vwgoal) .gq, :is(.hm-chat, .vwgoal) .gplan { min-width: 0; font-size: var(--fs-
|
|
510
|
+
:is(.hm-chat, .vwgoal) .gq, :is(.hm-chat, .vwgoal) .gplan { min-width: 0; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
510
511
|
:is(.hm-chat, .vwgoal) .gmw { position: relative; display: inline-block; }
|
|
511
|
-
:is(.hm-chat, .vwgoal) .gmeth { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 32px; margin: 0 0 2px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-
|
|
512
|
+
:is(.hm-chat, .vwgoal) .gmeth { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 32px; margin: 0 0 2px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-meta); color: var(--cz-ink3); text-align: left; line-height: var(--lh-meta); }
|
|
512
513
|
:is(.hm-chat, .vwgoal) button.gmeth { cursor: pointer; }
|
|
513
|
-
:is(.hm-chat, .vwgoal) .gmeth b { color: var(--cz-ink); font-weight:
|
|
514
|
+
:is(.hm-chat, .vwgoal) .gmeth b { color: var(--cz-ink); font-weight: var(--fw-strong); }
|
|
514
515
|
:is(.hm-chat, .vwgoal) .gmeth svg { color: var(--cz-blueink); }
|
|
515
516
|
:is(.hm-chat, .vwgoal) .gmeth em { font-style: normal; margin-left: 4px; }
|
|
516
517
|
:is(.hm-chat, .vwgoal) .gmenu { position: absolute; left: 0; top: 34px; z-index: 6; min-width: 240px; padding: 6px; border-radius: 14px; background: var(--cz-card); box-shadow: var(--cz-sheet); border: 1px solid var(--cz-hair); display: flex; flex-direction: column; }
|
|
517
518
|
:is(.hm-chat, .vwgoal) .gmenu[hidden] { display: none; }
|
|
518
|
-
:is(.hm-chat, .vwgoal) .gmenu button { display: flex; flex-direction: column; gap: 1px; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: var(--cz-ink); font: inherit; font-size: var(--fs-
|
|
519
|
+
:is(.hm-chat, .vwgoal) .gmenu button { display: flex; flex-direction: column; gap: 1px; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: var(--cz-ink); font: inherit; font-size: var(--fs-body); text-align: left; cursor: pointer; line-height: var(--lh-body); }
|
|
519
520
|
:is(.hm-chat, .vwgoal) .gmenu button:hover, :is(.hm-chat, .vwgoal) .gmenu button:focus-visible { background: var(--cz-well); }
|
|
520
|
-
:is(.hm-chat, .vwgoal) .gmenu em { font-style: normal; font-size: var(--fs-
|
|
521
|
+
:is(.hm-chat, .vwgoal) .gmenu em { font-style: normal; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
521
522
|
:is(.hm-chat, .vwgoal) .gdots { display: flex; gap: 4px; margin: 2px 0 8px; }
|
|
522
523
|
:is(.hm-chat, .vwgoal) .gdots i { display: block; width: 16px; height: 5px; border-radius: 3px; background: var(--cz-ink3); opacity: .3; }
|
|
523
524
|
:is(.hm-chat, .vwgoal) .gdots i.y { background: var(--cz-blueink); opacity: 1; }
|
|
524
525
|
:is(.hm-chat, .vwgoal) .gchips { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
|
|
525
|
-
:is(.hm-chat, .vwgoal) .gchip { min-height: 44px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: inherit; font-size: var(--fs-
|
|
526
|
+
:is(.hm-chat, .vwgoal) .gchip { min-height: 44px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: inherit; font-size: var(--fs-label); font-weight: var(--fw-strong); text-align: left; cursor: pointer; line-height: var(--lh-label); }
|
|
526
527
|
:is(.hm-chat, .vwgoal) .gchip.rec { border-color: var(--cz-blue); background: var(--cz-bluebg); }
|
|
527
528
|
:is(.hm-chat, .vwgoal) .gchip:active:not(:disabled) { transform: scale(.98); }
|
|
528
529
|
:is(.hm-chat, .vwgoal) .gchip.on { border-color: var(--cz-blue); background: var(--cz-blue); color: var(--cz-card); }
|
|
529
530
|
:is(.hm-chat, .vwgoal) .gchip.on small { color: inherit; }
|
|
530
531
|
:is(.hm-chat, .vwgoal) .gchip:disabled { cursor: default; }
|
|
531
532
|
:is(.hm-chat, .vwgoal) .gchip:disabled:not(.on) { opacity: .6; }
|
|
532
|
-
:is(.hm-chat, .vwgoal) .gchip small { display: block; font-size: var(--fs-
|
|
533
|
+
:is(.hm-chat, .vwgoal) .gchip small { display: block; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-blueink); line-height: var(--lh-badge); }
|
|
533
534
|
:is(.hm-chat, .vwgoal) .gchip small.warn { color: var(--cz-late); }
|
|
534
535
|
:is(.hm-chat, .vwgoal) .gplan { margin-top: 6px; padding: 10px 12px 12px; border-radius: 16px; border: 1px solid var(--cz-hair); background: linear-gradient(180deg, var(--cz-bluebg) 0%, var(--cz-card) 60%); box-shadow: var(--cz-vlift); }
|
|
535
|
-
:is(.hm-chat, .vwgoal) .gpt { display: block; padding: 0; border: 0; background: none; color: var(--cz-ink); font: inherit; font-size: var(--fs-
|
|
536
|
-
:is(.hm-chat, .vwgoal) .gplan ul { margin: 2px 0 6px; padding-left: 18px; font-size: var(--fs-
|
|
537
|
-
:is(.hm-chat, .vwgoal) .pk2 { margin: 8px 0 0; font-size: var(--fs-
|
|
538
|
-
:is(.hm-chat, .vwgoal) .pk2 span { color: var(--cz-ink); font-weight:
|
|
536
|
+
:is(.hm-chat, .vwgoal) .gpt { display: block; padding: 0; border: 0; background: none; color: var(--cz-ink); font: inherit; font-size: var(--fs-row); font-weight: var(--fw-strong); text-align: left; cursor: pointer; line-height: var(--lh-row); }
|
|
537
|
+
:is(.hm-chat, .vwgoal) .gplan ul { margin: 2px 0 6px; padding-left: 18px; font-size: var(--fs-body); line-height: 1.45; }
|
|
538
|
+
:is(.hm-chat, .vwgoal) .pk2 { margin: 8px 0 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
|
|
539
|
+
:is(.hm-chat, .vwgoal) .pk2 span { color: var(--cz-ink); font-weight: var(--fw-strong); }
|
|
539
540
|
:is(.hm-chat, .vwgoal) .pk2 em { font-style: normal; margin-left: 4px; padding: 0 5px; border-radius: 6px; color: var(--cz-late); background: var(--cz-latebg); }
|
|
540
541
|
:is(.hm-chat, .vwgoal) .acts { display: flex; gap: 8px; margin-top: 10px; }
|
|
541
542
|
:is(.hm-chat, .vwgoal, .gprog2) .icb { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink2); cursor: pointer; }
|
|
542
543
|
:is(.hm-chat, .vwgoal) .icb.pri { background: var(--cz-solid); border-color: var(--cz-solid); color: var(--cz-onsolid); }
|
|
543
544
|
:is(.hm-chat, .vwgoal) .icb:disabled { opacity: .5; cursor: default; }
|
|
544
|
-
:is(.hm-chat, .vwgoal) .gplan.ed .fld { flex: 1; min-width: 0; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: var(--cz-well); color: var(--cz-ink); font: inherit; font-size: var(--fs-
|
|
545
|
+
:is(.hm-chat, .vwgoal) .gplan.ed .fld { flex: 1; min-width: 0; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: var(--cz-well); color: var(--cz-ink); font: inherit; font-size: var(--fs-body); line-height: 1.35; resize: none; overflow: hidden; }
|
|
545
546
|
:is(.hm-chat, .vwgoal) .gplan.ed .fld:focus { outline: none; border-color: var(--cz-blue); background: var(--cz-card); box-shadow: 0 0 0 3px var(--cz-bluebg); }
|
|
546
|
-
:is(.hm-chat, .vwgoal) .gplan.ed .fld.s { display: inline-block; flex: none; width: 13em; max-width: 100%; padding: 2px 6px; font-size: var(--fs-
|
|
547
|
+
:is(.hm-chat, .vwgoal) .gplan.ed .fld.s { display: inline-block; flex: none; width: 13em; max-width: 100%; padding: 2px 6px; font-size: var(--fs-label); font-weight: var(--fw-strong); line-height: var(--lh-label); }
|
|
547
548
|
:is(.hm-chat, .vwgoal) .gplan.ed .kv { display: flex; flex-wrap: wrap; gap: 6px 12px; }
|
|
548
549
|
:is(.hm-chat, .vwgoal) .gplan.ed .kv label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
|
|
549
550
|
:is(.hm-chat, .vwgoal) .edl { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
|
|
@@ -553,84 +554,84 @@ form.hm-box textarea { min-height: 48px; border: 0; background: none; resize: no
|
|
|
553
554
|
:is(.hm-chat, .vwgoal, .gprog2) .rx { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cz-ink3); cursor: pointer; }
|
|
554
555
|
:is(.hm-chat, .vwgoal) .addp { width: 36px; height: 36px; margin: 6px 0 0 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px dashed var(--cz-ink3); background: none; color: var(--cz-blueink); cursor: pointer; }
|
|
555
556
|
.hm-chat .gchoice .askc { padding: 10px 12px 12px; border-radius: 16px; border: 1.5px solid var(--cz-blue); background: linear-gradient(180deg, var(--cz-bluebg) 0%, var(--cz-card) 70%); }
|
|
556
|
-
.hm-chat .gchoice .askc .k { margin: 0; font-size: var(--fs-
|
|
557
|
-
.hm-chat .gchoice .askc > b { font-size: var(--fs-
|
|
557
|
+
.hm-chat .gchoice .askc .k { margin: 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
|
|
558
|
+
.hm-chat .gchoice .askc > b { font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
558
559
|
.vwgoal .gprog2 .grow { display: flex; align-items: center; gap: 8px; }
|
|
559
560
|
.vwgoal .gprog2 .grow b { flex: 1; min-width: 0; }
|
|
560
|
-
.vwgoal .gprog2 .gpill { font-size: var(--fs-
|
|
561
|
+
.vwgoal .gprog2 .gpill { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
561
562
|
.vwgoal .gprog2 .grow .icb { width: 36px; height: 36px; }
|
|
562
|
-
.vwgoal .gprog { margin: 8px 0 0; font-size: var(--fs-
|
|
563
|
+
.vwgoal .gprog { margin: 8px 0 0; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
|
|
563
564
|
.vwgoal .gpts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
|
|
564
|
-
.vwgoal .gpts li { display: grid; grid-template-columns: 14px 1fr auto; gap: 0 10px; align-items: center; font-size: var(--fs-
|
|
565
|
-
.vwgoal .gpts li > em { grid-column: 2; font-style: normal; font-size: var(--fs-
|
|
565
|
+
.vwgoal .gpts li { display: grid; grid-template-columns: 14px 1fr auto; gap: 0 10px; align-items: center; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
566
|
+
.vwgoal .gpts li > em { grid-column: 2; font-style: normal; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
566
567
|
.vwgoal .gpts li > .rx { grid-column: 3; grid-row: 1 / span 2; }
|
|
567
568
|
.vwgoal .gpts i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--cz-ink3); }
|
|
568
569
|
.vwgoal .gpts li.m i { background: var(--cz-ok); box-shadow: none; }
|
|
569
570
|
.vwgoal .gpts li.sk s { color: var(--cz-ink3); }
|
|
570
571
|
.hm-chat .atrow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
|
|
571
|
-
.hm-chat .atc { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 10px; background: var(--cz-card); font-size: var(--fs-
|
|
572
|
+
.hm-chat .atc { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 10px; background: var(--cz-card); font-size: var(--fs-meta); cursor: pointer; border: 1px solid var(--cz-hair); line-height: var(--lh-meta); }
|
|
572
573
|
/* batch 18 item 13: the chip's picture is a 36 px thumbnail (premium.css is not loaded on Home, so a pasted screenshot drew at full size out of
|
|
573
574
|
the bubble); the chip opens the file beside the conversation */
|
|
574
575
|
.hm-chat .atc { max-width: min(260px, 100%); min-width: 0; }
|
|
575
576
|
.atc .ath { width: 36px; height: 36px; border-radius: 8px; flex: none; object-fit: cover; background: var(--cz-well); display: block; }
|
|
576
|
-
.atc .atx { display: grid; place-items: center; font-size: var(--fs-
|
|
577
|
+
.atc .atx { display: grid; place-items: center; font-size: var(--fs-badge); font-weight: var(--fw-strong); letter-spacing: .04em; color: var(--cz-ink3); line-height: var(--lh-badge); }
|
|
577
578
|
.atc .atn { display: grid; min-width: 0; text-align: left; }
|
|
578
|
-
.atc .atn b { font-weight:
|
|
579
|
-
.atc .atn em { font-style: normal; font-size: var(--fs-
|
|
580
|
-
.hm-peek { display: flex; align-items: center; gap: 10px; min-height: 40px; margin-top: 8px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--cz-bluebg); color: var(--cz-ink); font-size: var(--fs-
|
|
579
|
+
.atc .atn b { font-weight: var(--fw-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
580
|
+
.atc .atn em { font-style: normal; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
581
|
+
.hm-peek { display: flex; align-items: center; gap: 10px; min-height: 40px; margin-top: 8px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--cz-bluebg); color: var(--cz-ink); font-size: var(--fs-meta); cursor: pointer; text-align: left; line-height: var(--lh-meta); }
|
|
581
582
|
.hm-peek[hidden] { display: none; }
|
|
582
583
|
.hm-peek span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
583
|
-
.hm-peek em { font-style: normal; font-weight:
|
|
584
|
+
.hm-peek em { font-style: normal; font-weight: var(--fw-strong); color: var(--cz-blueink); }
|
|
584
585
|
.hm-slash { display: flex; flex-direction: column; max-height: min(320px, 45vh); overflow-y: auto; overscroll-behavior: contain; padding: 6px; border-radius: 16px; background: var(--cz-card); box-shadow: var(--cz-sheet); border: 1px solid var(--cz-hair); }
|
|
585
586
|
.hm-slash[hidden] { display: none; }
|
|
586
587
|
.hm-slash button { display: flex; flex-direction: column; align-items: stretch; gap: 1px; min-height: 40px; flex-shrink: 0; padding: 6px 10px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left; color: var(--cz-ink); font-family: var(--cz-sans); }
|
|
587
588
|
.hm-slash button[aria-selected="true"], .hm-slash button:hover { background: var(--cz-well); }
|
|
588
|
-
.hm-slash code { font-family: var(--cz-mono); font-size: var(--fs-
|
|
589
|
-
.hm-slash em { font-style: normal; font-size: var(--fs-
|
|
589
|
+
.hm-slash code { font-family: var(--cz-mono); font-size: var(--fs-meta); color: var(--cz-blueink); line-height: var(--lh-meta); }
|
|
590
|
+
.hm-slash em { font-style: normal; font-size: var(--fs-meta); color: var(--cz-ink3); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; line-height: var(--lh-meta); }
|
|
590
591
|
.hm-slash .l1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
|
|
591
|
-
.hm-slash .l1 b { font-size: var(--fs-
|
|
592
|
+
.hm-slash .l1 b { font-size: var(--fs-row); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-row); }
|
|
592
593
|
.hm-scope + .hm-files { margin-bottom: 6px; }
|
|
593
594
|
/* the phone moment card (home-phone-card.js) at the top of the phone's sheet; not in the Agreed design, so marked Waiting for design */
|
|
594
595
|
.hm-phc { display: grid; gap: 6px; margin: 2px 2px 14px; padding: 14px 16px; border-radius: 18px; background: var(--cz-card); box-shadow: inset 3px 0 0 var(--cz-blue), var(--cz-float); color: var(--cz-ink); }
|
|
595
596
|
.hm-phc[hidden] { display: none; }
|
|
596
|
-
.hm-phc .label { font-size: var(--fs-
|
|
597
|
-
.hm-phc .phbig { font-size: var(--fs-
|
|
598
|
-
.hm-phc .phl { margin: 0; font-size: var(--fs-
|
|
599
|
-
.hm-phc .phs { margin: 0; font-size: var(--fs-
|
|
597
|
+
.hm-phc .label { font-size: var(--fs-badge); font-weight: var(--fw-strong); letter-spacing: .04em; text-transform: uppercase; color: var(--cz-ink3); line-height: var(--lh-badge); }
|
|
598
|
+
.hm-phc .phbig { font-size: var(--fs-display); font-weight: var(--fw-strong); line-height: 1.25; color: var(--cz-ink); }
|
|
599
|
+
.hm-phc .phl { margin: 0; font-size: var(--fs-body); color: var(--cz-ink2); line-height: var(--lh-body); }
|
|
600
|
+
.hm-phc .phs { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
|
|
600
601
|
.hm-phc .phfit { display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--cz-well); }
|
|
601
|
-
.hm-phc .phtt { font-size: var(--fs-
|
|
602
|
+
.hm-phc .phtt { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
|
|
602
603
|
.hm-phc .phacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
|
|
603
|
-
.hm-phc .cta { min-height: 44px; padding: 0 16px; border-radius: 14px; border: 0; background: var(--cz-solid); color: var(--cz-onsolid); font:
|
|
604
|
+
.hm-phc .cta { min-height: 44px; padding: 0 16px; border-radius: 14px; border: 0; background: var(--cz-solid); color: var(--cz-onsolid); font: var(--fw-strong) var(--fs-row)/var(--lh-row) var(--cz-sans); cursor: pointer; }
|
|
604
605
|
.hm-phc .cta.alt { background: var(--cz-well2); color: var(--cz-ink); }
|
|
605
|
-
.hm-phc .phok { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-
|
|
606
|
+
.hm-phc .phok { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-body); color: var(--cz-ok); line-height: var(--lh-body); }
|
|
606
607
|
.hm-phc .phok svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }
|
|
607
|
-
.hm-phc .pherr { margin: 0; font-size: var(--fs-
|
|
608
|
+
.hm-phc .pherr { margin: 0; font-size: var(--fs-body); color: var(--cz-red); line-height: var(--lh-body); }
|
|
608
609
|
.hm-phc .phstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
|
609
610
|
.hm-phc .phstats div { display: grid; padding: 8px 10px; border-radius: 12px; background: var(--cz-well); }
|
|
610
|
-
.hm-phc .phstats b { font-size: var(--fs-
|
|
611
|
-
.hm-phc .phstats span { font-size: var(--fs-
|
|
611
|
+
.hm-phc .phstats b { font-size: var(--fs-display); line-height: var(--lh-display); }
|
|
612
|
+
.hm-phc .phstats span { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
612
613
|
/* the evening recap's What moved: plain rows, a quiet kind word, the text clamped to two lines, where it came from under it */
|
|
613
614
|
.hm-phc .phmv { display: grid; gap: 8px; margin-top: 4px; }
|
|
614
|
-
.hm-phc .phmv p { display: grid; grid-template-columns: 56px 1fr; column-gap: 8px; margin: 0; font-size: var(--fs-
|
|
615
|
-
.hm-phc .phmv p b { font-size: var(--fs-
|
|
615
|
+
.hm-phc .phmv p { display: grid; grid-template-columns: 56px 1fr; column-gap: 8px; margin: 0; font-size: var(--fs-body); line-height: 1.4; color: var(--cz-ink); }
|
|
616
|
+
.hm-phc .phmv p b { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
|
|
616
617
|
.hm-phc .phmv p span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
|
617
|
-
.hm-phc .phmv p em { grid-column: 2; font-style: normal; font-size: var(--fs-
|
|
618
|
+
.hm-phc .phmv p em { grid-column: 2; font-style: normal; font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-meta); }
|
|
618
619
|
.hm-phc .phq { color: var(--cz-ink3); }
|
|
619
620
|
|
|
620
621
|
/* the first-run card after an import (premium-first.js): plain, Waiting for design */
|
|
621
622
|
.hm-first { display: grid; gap: 8px; margin: 2px 2px 14px; padding: 14px 16px; border-radius: 18px; background: var(--cz-card); box-shadow: var(--cz-float); color: var(--cz-ink); }
|
|
622
|
-
.hm-first h2 { margin: 0; font-size: var(--fs-
|
|
623
|
-
.hm-first h4 { margin: 4px 0 0; font-size: var(--fs-
|
|
623
|
+
.hm-first h2 { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
624
|
+
.hm-first h4 { margin: 4px 0 0; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
624
625
|
.hm-first-l { margin: 0; padding: 0; list-style: none; }
|
|
625
626
|
.hm-first .hx-t em.bad { color: var(--cz-late); }
|
|
626
627
|
/* a Needs-you row from the morning brief (home-app.js openNeedViewer): why now, and the item's own link */
|
|
627
|
-
.hv-intro { margin: 0; font-size: var(--fs-
|
|
628
|
+
.hv-intro { margin: 0; font-size: var(--fs-meta); line-height: 1.5; color: var(--cz-ink2); }
|
|
628
629
|
.hv-intro b { margin-right: 4px; color: var(--cz-ink); }
|
|
629
630
|
.hv-link { display: inline-flex; align-items: center; min-height: 44px; height: auto; text-decoration: none; box-sizing: border-box; }
|
|
630
631
|
/* Around you (home-around.js): plain, Waiting for design */
|
|
631
632
|
.ar { display: grid; gap: 10px; }
|
|
632
633
|
.ar-hd { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
|
|
633
|
-
.ar-hd small { font-size: var(--fs-
|
|
634
|
+
.ar-hd small { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
634
635
|
.ar-rows { display: grid; gap: 2px; }
|
|
635
636
|
.ar-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 10px; border: 0; border-radius: 14px; background: none; color: var(--cz-ink); text-align: left; cursor: pointer; font-family: var(--cz-sans); }
|
|
636
637
|
.ar-row:hover { background: var(--cz-well); }
|
|
@@ -638,121 +639,121 @@ form.hm-box textarea { min-height: 48px; border: 0; background: none; resize: no
|
|
|
638
639
|
.ar-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--cz-well); color: var(--cz-ink2); flex: none; }
|
|
639
640
|
.ar .i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
|
|
640
641
|
.ar .wtx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
|
641
|
-
.ar .wtit { font-size: var(--fs-
|
|
642
|
-
.ar .ws { font-size: var(--fs-
|
|
643
|
-
.ar .due { display: inline-block; min-width: 22px; padding: 1px 8px; border-radius: 999px; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-
|
|
642
|
+
.ar .wtit { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
|
|
643
|
+
.ar .ws { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
644
|
+
.ar .due { display: inline-block; min-width: 22px; padding: 1px 8px; border-radius: 999px; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-label); font-weight: var(--fw-strong); text-align: center; line-height: var(--lh-label); }
|
|
644
645
|
.ar .due.od { background: var(--cz-well2); color: var(--cz-late); }
|
|
645
646
|
.ar .bd-bar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--cz-well2); margin-top: 4px; }
|
|
646
647
|
.ar .bd-bar i { display: block; height: 100%; width: var(--bd-w, 0); }
|
|
647
648
|
.ar .bd-bar i.bad, .ar .bd-leg i.bad { background: var(--cz-dot-late); } .ar .bd-bar i.warn, .ar .bd-leg i.warn { background: var(--cz-late); }
|
|
648
649
|
.ar .bd-bar i.ok, .ar .bd-leg i.ok { background: var(--cz-dot-ok); } .ar .bd-bar i.none, .ar .bd-leg i.none { background: var(--cz-ink3); }
|
|
649
|
-
.ar .bd-leg { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--fs-
|
|
650
|
+
.ar .bd-leg { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
|
|
650
651
|
.ar .bd-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
|
|
651
|
-
.ar-prep { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; background: var(--cz-well); font-size: var(--fs-
|
|
652
|
+
.ar-prep { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; background: var(--cz-well); font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
|
|
652
653
|
.ar-prep[hidden] { display: none; }
|
|
653
654
|
.ar-prep div { display: flex; flex-direction: column; } .ar-prep b { color: var(--cz-ink); }
|
|
654
|
-
.ar-prep .rb { stroke: var(--cz-well2); } .ar-prep .rg { stroke: var(--cz-blue); } .ar-prep .rt { font-size: var(--fs-
|
|
655
|
+
.ar-prep .rb { stroke: var(--cz-well2); } .ar-prep .rg { stroke: var(--cz-blue); } .ar-prep .rt { font-size: var(--fs-badge); font-weight: var(--fw-strong); fill: var(--cz-ink); line-height: var(--lh-badge); }
|
|
655
656
|
.ar .bd-list { display: grid; gap: 8px; }
|
|
656
657
|
.ar .bd-it { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: var(--cz-card); border: 1px solid var(--cz-hair); }
|
|
657
658
|
.ar .bd-it.decided { opacity: .7; }
|
|
658
659
|
.ar .pcard { cursor: pointer; } .ar .pcard.on { border-color: var(--cz-blue); }
|
|
659
660
|
.ar .bd-h { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
|
|
660
|
-
.ar .bd-chip { padding: 2px 8px; border-radius: 999px; background: var(--cz-well); color: var(--cz-ink2); font-size: var(--fs-
|
|
661
|
+
.ar .bd-chip { padding: 2px 8px; border-radius: 999px; background: var(--cz-well); color: var(--cz-ink2); font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
661
662
|
.ar .bd-chip.warn, .ar .bd-chip.hot { color: var(--cz-late); }
|
|
662
|
-
.ar .bd-t { font-size: var(--fs-
|
|
663
|
-
.ar .bd-q, .ar .bd-why, .ar .pc-line { margin: 0; font-size: var(--fs-
|
|
664
|
-
.ar .pc-more { border: 0; background: none; color: var(--cz-blueink); font-size: var(--fs-
|
|
665
|
-
.ar .pc-k { font-size: var(--fs-
|
|
663
|
+
.ar .bd-t { font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); background: none; border: 0; padding: 0; text-align: left; font-family: var(--cz-sans); line-height: var(--lh-row); }
|
|
664
|
+
.ar .bd-q, .ar .bd-why, .ar .pc-line { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
|
|
665
|
+
.ar .pc-more { border: 0; background: none; color: var(--cz-blueink); font-size: var(--fs-meta); cursor: pointer; line-height: var(--lh-meta); }
|
|
666
|
+
.ar .pc-k { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
666
667
|
.ar .bd-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
|
|
667
668
|
.ar a.hx-b { display: inline-flex; align-items: center; text-decoration: none; box-sizing: border-box; }
|
|
668
|
-
.ar .bd-done { display: flex; gap: 6px; align-items: center; margin: 0; font-size: var(--fs-
|
|
669
|
-
.ar .nodef.err { margin: 0; font-size: var(--fs-
|
|
670
|
-
.ar .empty3 { display: flex; gap: 6px; align-items: center; margin: 0; font-size: var(--fs-
|
|
669
|
+
.ar .bd-done { display: flex; gap: 6px; align-items: center; margin: 0; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
|
|
670
|
+
.ar .nodef.err { margin: 0; font-size: var(--fs-meta); color: var(--cz-late); line-height: var(--lh-meta); }
|
|
671
|
+
.ar .empty3 { display: flex; gap: 6px; align-items: center; margin: 0; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
|
|
671
672
|
.ar .bd-src { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--cz-hair); }
|
|
672
|
-
.ar .bd-src > span { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--fs-
|
|
673
|
+
.ar .bd-src > span { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--fs-meta); line-height: var(--lh-meta); } .ar .bd-src small { color: var(--cz-ink3); }
|
|
673
674
|
.ar .bd-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin: 0; }
|
|
674
|
-
.ar .bd-l { font-size: var(--fs-
|
|
675
|
-
.ar textarea, .ar input[type="text"] { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: inherit; font-size: var(--fs-
|
|
675
|
+
.ar .bd-l { font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
|
|
676
|
+
.ar textarea, .ar input[type="text"] { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: inherit; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
676
677
|
.ar .pc-bar { position: sticky; bottom: 0; display: grid; gap: 6px; padding: 10px 0 4px; background: var(--cz-card); border-top: 1px solid var(--cz-hair); }
|
|
677
678
|
.ar .pc-row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
|
|
678
|
-
.ar .pc-fine { margin: 0; font-size: var(--fs-
|
|
679
|
-
.ar .pc-i { font-style: normal; font-weight:
|
|
680
|
-
.ar details.bd-more summary { cursor: pointer; font-size: var(--fs-
|
|
679
|
+
.ar .pc-fine { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); text-align: right; line-height: var(--lh-meta); }
|
|
680
|
+
.ar .pc-i { font-style: normal; font-weight: var(--fw-strong); margin-right: 6px; }
|
|
681
|
+
.ar details.bd-more summary { cursor: pointer; font-size: var(--fs-label); font-weight: var(--fw-strong); min-height: 32px; line-height: var(--lh-label); }
|
|
681
682
|
@media (max-width: 760px) { .ar .hx-b, .ar .pc-more, .ar .pc-pick, .ar .hx-tabs button, .ar details.bd-more summary { min-height: 44px; } }
|
|
682
683
|
#srcHealth .sdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--cz-dot-ok); }
|
|
683
684
|
#srcHealth .sdot.warn { background: var(--cz-late); } #srcHealth .sdot.bad { background: var(--cz-dot-late); }
|
|
684
685
|
/* My work in the Viewer (home-work.js): a plain minimal card until the Agreed design draws it. 44 px targets in the item and Focus views. */
|
|
685
686
|
.hm-toast.act.on { pointer-events: auto; }
|
|
686
|
-
.hm-toast .undo { margin-left: 8px; min-height: 32px; padding: 0 10px; border-radius: 999px; border: 0; background: var(--cz-card); color: var(--cz-ink); font: inherit; font-weight:
|
|
687
|
+
.hm-toast .undo { margin-left: 8px; 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; }
|
|
687
688
|
.mw-head { display: flex; justify-content: flex-end; margin: 4px 0; }
|
|
688
|
-
.mw-g { margin: 12px 0 2px; font-size: var(--fs-
|
|
689
|
+
.mw-g { margin: 12px 0 2px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
689
690
|
.wrw { position: relative; overflow: hidden; }
|
|
690
691
|
.wrow { position: relative; background: var(--cz-card); }
|
|
691
692
|
.wrow.xdr { transform: translateX(var(--wl-dx, 0)); }
|
|
692
693
|
.wrh { border: 0; background: none; padding: 6px 0; text-align: left; color: var(--cz-ink); font: inherit; cursor: pointer; min-height: 44px; }
|
|
693
694
|
.wrh:focus-visible, .wrh:focus { outline: 2px solid var(--cz-blue); outline-offset: -2px; }
|
|
694
|
-
.wrh .xfc { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-
|
|
695
|
+
.wrh .xfc { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-badge); font-style: normal; font-weight: var(--fw-strong); line-height: var(--lh-badge); }
|
|
695
696
|
.wrh .xfc.sug { background: var(--cz-well); color: var(--cz-ink3); }
|
|
696
|
-
.xrv { position: absolute; inset: 0; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: var(--cz-well); color: var(--cz-ink); font-size: var(--fs-
|
|
697
|
+
.xrv { position: absolute; inset: 0; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: var(--cz-well); color: var(--cz-ink); font-size: var(--fs-label); font-weight: var(--fw-strong); opacity: var(--wl-d, 0); line-height: var(--lh-label); }
|
|
697
698
|
.xrv.l { justify-content: flex-end; }
|
|
698
699
|
.xrv .i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
|
|
699
700
|
.xfq:focus-visible, .xfq:focus { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
|
|
700
701
|
.xfq em { font-style: normal; color: var(--cz-ink3); }
|
|
701
702
|
.mw-sub { display: flex; flex-direction: column; gap: 10px; }
|
|
702
703
|
.mw-sub .hx-b, .mw-sub .mw-in, .xfq { min-height: 44px; height: auto; }
|
|
703
|
-
.mw-t { margin: 0; font-size: var(--fs-
|
|
704
|
-
.mw-say { margin: 0; font-size: var(--fs-
|
|
704
|
+
.mw-t { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
705
|
+
.mw-say { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
|
|
705
706
|
.mw-sheet { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--cz-hair); border-radius: 14px; background: var(--cz-well2); }
|
|
706
707
|
.mw-sheet[hidden] { display: none; }
|
|
707
708
|
.ffd { display: flex; flex-direction: column; align-items: flex-start; text-align: left; border-radius: 12px; padding: 6px 12px; }
|
|
708
|
-
.ffd small { font-size: var(--fs-
|
|
709
|
-
.ffd em { font-style: normal; font-weight:
|
|
709
|
+
.ffd small { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
710
|
+
.ffd em { font-style: normal; font-weight: var(--fw-regular); color: var(--cz-ink3); }
|
|
710
711
|
.xpan { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 8px 8px; border-left: 2px solid var(--cz-hair); }
|
|
711
712
|
.xpan .fopt { text-align: left; border-radius: 12px; }
|
|
712
713
|
.xpan .fopt small { color: var(--cz-ink3); }
|
|
713
|
-
.mw-f { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-
|
|
714
|
-
.mw-in, .mw-ta { width: 100%; box-sizing: border-box; padding: 0 12px; border-radius: 12px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: inherit; font-size: var(--fs-
|
|
714
|
+
.mw-f { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
715
|
+
.mw-in, .mw-ta { width: 100%; box-sizing: border-box; padding: 0 12px; border-radius: 12px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: inherit; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
715
716
|
.mw-ta { padding: 8px 12px; min-height: 44px; }
|
|
716
717
|
.mw-sub .hx-add { flex-wrap: wrap; }
|
|
717
718
|
.mw-sub .hx-add .mw-in { flex: 1 1 180px; width: auto; }
|
|
718
719
|
.mw-sub .hx-top { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
719
720
|
.mw-sub .hx-b[aria-pressed="true"], .mw-sub .xco[aria-checked="true"] { background: var(--cz-well); border-color: var(--cz-ink3); }
|
|
720
721
|
.xsteps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
|
|
721
|
-
.xsteps li { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-
|
|
722
|
+
.xsteps li { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
722
723
|
.xch { display: flex; flex-direction: column; gap: 6px; }
|
|
723
724
|
.xco { display: flex; flex-direction: column; align-items: flex-start; text-align: left; border-radius: 12px; padding: 6px 12px; }
|
|
724
|
-
.xco em { font-style: normal; font-size: var(--fs-
|
|
725
|
-
.xco span { font-size: var(--fs-
|
|
725
|
+
.xco em { font-style: normal; font-size: var(--fs-meta); color: var(--cz-blueink); line-height: var(--lh-meta); }
|
|
726
|
+
.xco span { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
726
727
|
.agblk, .xcon, .agpane, .mw-src, .mw-rec, .mw-fc { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--cz-hair); border-radius: 14px; background: var(--cz-card); }
|
|
727
|
-
.agblk h4, .mw-sub h4 { margin: 0; font-size: var(--fs-
|
|
728
|
-
.xq { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--cz-well); font-size: var(--fs-
|
|
729
|
-
.mw-md { font-size: var(--fs-
|
|
728
|
+
.agblk h4, .mw-sub h4 { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
729
|
+
.xq { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--cz-well); font-size: var(--fs-body); overflow-wrap: anywhere; line-height: var(--lh-body); }
|
|
730
|
+
.mw-md { font-size: var(--fs-body); overflow-wrap: anywhere; line-height: var(--lh-body); }
|
|
730
731
|
.mw-md.clipd { max-height: 320px; overflow: hidden; }
|
|
731
|
-
.mw-turns { margin: 0; padding-left: 18px; font-size: var(--fs-
|
|
732
|
+
.mw-turns { margin: 0; padding-left: 18px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
732
733
|
.mw-err { color: var(--cz-red); }
|
|
733
734
|
.mw-a { display: inline-flex; align-items: center; text-decoration: none; box-sizing: border-box; }
|
|
734
735
|
|
|
735
736
|
/* the metrics review in the Viewer (AgMetrics): three tiles, the correction rate by week with the current week in blue, what moved it */
|
|
736
|
-
.hm-met { gap: 16px; font-size: var(--fs-
|
|
737
|
+
.hm-met { gap: 16px; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
737
738
|
.hm-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
|
|
738
739
|
.hm-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--cz-well); min-width: 0; }
|
|
739
|
-
.hm-kpi p { margin: 0; font-size: var(--fs-
|
|
740
|
-
.hm-kpi b { margin-top: 2px; font-size: var(--fs-
|
|
741
|
-
.hm-kpi span { font-size: var(--fs-
|
|
740
|
+
.hm-kpi p { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
741
|
+
.hm-kpi b { margin-top: 2px; font-size: var(--fs-display); font-weight: var(--fw-strong); letter-spacing: -0.02em; color: var(--cz-ink); line-height: var(--lh-display); }
|
|
742
|
+
.hm-kpi span { font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
|
|
742
743
|
.hm-fig { margin: 0; }
|
|
743
|
-
.hm-fig figcaption { margin-bottom: 10px; font-size: var(--fs-
|
|
744
|
+
.hm-fig figcaption { margin-bottom: 10px; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
|
|
744
745
|
.hm-chart { height: 140px; display: flex; align-items: flex-end; gap: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--cz-hair); }
|
|
745
746
|
.hm-chart > div { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
|
|
746
|
-
.hm-chart span { font-size: var(--fs-
|
|
747
|
+
.hm-chart span { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
747
748
|
.hm-chart i { display: block; height: var(--bd-h, 0); width: 100%; max-width: 36px; border-radius: 8px 8px 3px 3px; background: var(--cz-well2); }
|
|
748
749
|
.hm-chart i.now { background: var(--cz-blue); }
|
|
749
750
|
.hm-chx { display: flex; gap: 10px; margin-top: 6px; }
|
|
750
|
-
.hm-chx span { flex: 1; text-align: center; font-size: var(--fs-
|
|
751
|
-
.hm-moved { width: 100%; border-collapse: collapse; font-size: var(--fs-
|
|
752
|
-
.hm-moved th { padding: 6px 0; border-bottom: 1px solid var(--cz-hair); font-weight:
|
|
751
|
+
.hm-chx span { flex: 1; text-align: center; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
752
|
+
.hm-moved { width: 100%; border-collapse: collapse; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
753
|
+
.hm-moved th { padding: 6px 0; border-bottom: 1px solid var(--cz-hair); font-weight: var(--fw-strong); color: var(--cz-ink3); text-align: left; }
|
|
753
754
|
.hm-moved th + th, .hm-moved td + td { text-align: right; }
|
|
754
755
|
.hm-moved td { padding: 8px 0; border-bottom: 1px solid var(--cz-hair); }
|
|
755
|
-
.hm-moved td + td { padding-left: 12px; font-weight:
|
|
756
|
+
.hm-moved td + td { padding-left: 12px; font-weight: var(--fw-strong); white-space: nowrap; }
|
|
756
757
|
@media (max-width: 760px) { .hm-kpis { grid-template-columns: 1fr; } }
|
|
757
758
|
/* the list stays when there is no room beside the chat (HbCNarrow): the Viewer lies over the chat, at most the room right of the list */
|
|
758
759
|
@media (min-width: 761px) {
|
|
@@ -765,7 +766,7 @@ form.hm-box textarea { min-height: 48px; border: 0; background: none; resize: no
|
|
|
765
766
|
@media (max-width: 760px) {
|
|
766
767
|
body.cz-home:not(.hm-plist) #hmTopSub { display: none; }
|
|
767
768
|
.hm-recp:not([hidden]) { flex: none; display: inline-flex; align-items: center; height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer; }
|
|
768
|
-
.hm-recp .pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--cz-redbg); color: var(--cz-red); font:
|
|
769
|
+
.hm-recp .pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--cz-redbg); color: var(--cz-red); font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); font-variant-numeric: tabular-nums; }
|
|
769
770
|
.hm-recp i { width: 8px; height: 8px; border-radius: 50%; background: var(--cz-dot-red); }
|
|
770
771
|
.hm-recp.paused .pill { background: var(--cz-well); color: var(--cz-ink3); }
|
|
771
772
|
.hm-recp.paused i { background: var(--cz-dot-q); }
|
|
@@ -777,7 +778,7 @@ form.hm-box textarea { min-height: 48px; border: 0; background: none; resize: no
|
|
|
777
778
|
.hm-ch .cz-ctx { margin-left: auto; margin-right: 6px; }
|
|
778
779
|
.hm-sugc.cpt { white-space: normal; }
|
|
779
780
|
.hm-sugs { font-style: normal; color: var(--cz-blueink); }
|
|
780
|
-
.hm-sugw { color: var(--cz-ink2); font-weight:
|
|
781
|
+
.hm-sugw { color: var(--cz-ink2); font-weight: var(--fw-strong); min-width: 0; }
|
|
781
782
|
.hm-sugx.ok { color: var(--cz-blueink); }
|
|
782
783
|
#hmTopTitle .cz-ctx { margin-left: 8px; vertical-align: -2px; }
|
|
783
784
|
/* Adler (batch 16 item 2): Claude's avatar on the latest reply (AdU1) and the resting figure in an empty chat (AdH1) */
|
|
@@ -785,9 +786,52 @@ form.hm-box textarea { min-height: 48px; border: 0; background: none; resize: no
|
|
|
785
786
|
.hm-empty-ad { display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
|
786
787
|
.hm-empty-ad p { margin: 0; }
|
|
787
788
|
.hm-chat .ctxmore { display: contents; }
|
|
788
|
-
.hm-chat .ctxmore > summary { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 12px; color: var(--cz-ink3); font-size: var(--fs-
|
|
789
|
+
.hm-chat .ctxmore > summary { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 12px; color: var(--cz-ink3); font-size: var(--fs-meta); cursor: pointer; list-style: none; line-height: var(--lh-meta); }
|
|
789
790
|
.hm-chat .ctxmore > summary::-webkit-details-marker { display: none; }
|
|
790
791
|
.hm-chat .ctxmore > summary:hover { color: var(--cz-ink); }
|
|
791
792
|
.hm-chat .ctxmore[open] > summary { display: none; }
|
|
792
793
|
.hm-chat .ctxmore > .ctxc { display: contents; }
|
|
793
794
|
.hm-chat .ctxmore:not([open]) > .ctxc { display: none; }
|
|
795
|
+
|
|
796
|
+
/* ── the suggested next prompt and the Sharper card (batch 26 item 2, canvas NpB, NpBw; pm/next-prompt-ui.js) ──
|
|
797
|
+
* Above the box: up to two cards, the recommended one lit (card white, blue ring, blue ✦), the other grey. A tap fills the box. */
|
|
798
|
+
.np { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
|
|
799
|
+
.np[hidden] { display: none; }
|
|
800
|
+
.np-list { display: flex; flex-direction: column; gap: 8px; }
|
|
801
|
+
.np-card { position: relative; display: flex; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box; min-height: 44px; padding: 11px 14px; border-radius: 16px;
|
|
802
|
+
border: 1px solid transparent; background: var(--cz-well); color: var(--cz-ink); font: inherit; font-size: var(--fs-3); line-height: 1.5; text-align: left; cursor: pointer; }
|
|
803
|
+
.np-card .np-star { flex: none; margin-top: 3px; fill: currentColor; stroke: currentColor; color: var(--cz-ink3); }
|
|
804
|
+
.np-card.rec { background: var(--cz-card); border-color: var(--cz-blue); box-shadow: 0 0 0 3px var(--cz-bluebg); }
|
|
805
|
+
.np-card.rec .np-star { color: var(--cz-blue); }
|
|
806
|
+
.np-card:hover { border-color: var(--cz-blue); }
|
|
807
|
+
.np-card:focus-visible, .np-use:focus-visible, .np-ib:focus-visible, .np-mi:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
|
|
808
|
+
.np-t { flex: 1; min-width: 0; }
|
|
809
|
+
.np-sh { padding: 0 6px 0 0; cursor: default; align-items: center; }
|
|
810
|
+
.np-use { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; padding: 11px 0 11px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
|
|
811
|
+
.np-ib { flex: none; width: 36px; height: 36px; display: inline-grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--cz-ink2); cursor: pointer; }
|
|
812
|
+
.np-ib:hover, .np-ib[aria-expanded="true"] { background: var(--cz-well); }
|
|
813
|
+
.np-spin { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--cz-bluebg); color: var(--cz-blue); }
|
|
814
|
+
.np-sp { display: inline-flex; animation: np-rot 1.1s linear infinite; }
|
|
815
|
+
@keyframes np-rot { to { transform: rotate(360deg); } }
|
|
816
|
+
@media (prefers-reduced-motion: reduce) { .np-sp { animation: none; } }
|
|
817
|
+
.np-sk { flex: 1; display: flex; flex-direction: column; gap: 8px; }
|
|
818
|
+
.np-sk i { display: block; height: 12px; border-radius: 6px; background: var(--cz-bluebg); }
|
|
819
|
+
.np-sk i:first-child { width: 88%; } .np-sk i:last-child { width: 60%; }
|
|
820
|
+
.np-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 20; width: 310px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 8px; border-radius: 20px;
|
|
821
|
+
background: var(--cz-card); box-shadow: 0 24px 60px -24px rgba(42,46,53,.45), 0 0 0 1px var(--cz-hair); display: flex; flex-direction: column; gap: 2px; }
|
|
822
|
+
.np-mh { margin: 0; padding: 8px 12px 4px; font-size: var(--fs-1); font-weight: 800; color: var(--cz-ink2); }
|
|
823
|
+
.np-mi { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 12px; background: none; color: var(--cz-ink); font: inherit; text-align: left; cursor: pointer; }
|
|
824
|
+
.np-mi:hover, .np-mi[aria-checked="true"]:not(.np-swr) { background: var(--cz-well); }
|
|
825
|
+
.np-mi b { display: block; font-size: var(--fs-3); font-weight: 600; }
|
|
826
|
+
.np-mi[aria-checked="true"] b { font-weight: 700; }
|
|
827
|
+
.np-mi em { display: block; font-style: normal; font-size: var(--fs-1); color: var(--cz-ink2); }
|
|
828
|
+
.np-ck { flex: none; width: 18px; margin-top: 2px; color: var(--cz-blue); display: inline-flex; }
|
|
829
|
+
.np-sep { height: 1px; margin: 6px 8px; background: var(--cz-hair); }
|
|
830
|
+
.np-swr { align-items: center; }
|
|
831
|
+
.np-swr b { flex: 1; }
|
|
832
|
+
.np-sw { flex: none; width: 40px; height: 24px; border-radius: 12px; background: var(--cz-well2); display: inline-flex; align-items: center; padding: 0 3px; box-sizing: border-box; }
|
|
833
|
+
.np-sw i { width: 18px; height: 18px; border-radius: 50%; background: var(--cz-card); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
|
|
834
|
+
.np-sw.on { background: var(--cz-solid); justify-content: flex-end; }
|
|
835
|
+
@media (max-width: 760px) {
|
|
836
|
+
.np-t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* a phone shows 3 lines; a tap still fills the whole text */
|
|
837
|
+
}
|