create-pmos 0.512.0 → 0.514.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 -95
- 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/guide/home.md +1 -1
- package/workspace/intel-report-ui-test.js +1 -1
- package/workspace/intelligence-gaps-ui-test.js +1 -1
- package/workspace/lib/premium-console-type.js +15 -12
- package/workspace/lib/routes-boards.js +18 -6
- 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 +78 -78
- package/workspace/public/pm/cozy-home-rows.css +32 -32
- package/workspace/public/pm/cozy-home.css +240 -240
- 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-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-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/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/third-party/README.md +2 -1
- package/workspace/third-party/plus-jakarta-sans-OFL.LICENSE +93 -0
|
@@ -5,47 +5,47 @@
|
|
|
5
5
|
.iv button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; }
|
|
6
6
|
.iv button:disabled { cursor: default; }
|
|
7
7
|
.iv button:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; border-radius: 10px; }
|
|
8
|
-
.iv .w { color: var(--cz-risk); font-weight:
|
|
9
|
-
.iv-q { margin: 0; font-size: var(--fs-
|
|
8
|
+
.iv .w { color: var(--cz-risk); font-weight: var(--fw-strong); }
|
|
9
|
+
.iv-q { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: 1.45; }
|
|
10
10
|
.iv-ib { width: 32px; height: 32px; border-radius: 999px; display: inline-flex !important; align-items: center; justify-content: center; color: var(--cz-ink2); flex: none; }
|
|
11
11
|
.iv-ib:hover { background: var(--cz-well); }
|
|
12
12
|
|
|
13
13
|
/* the summary card */
|
|
14
14
|
.iv-sum { background: var(--cz-well); border-radius: 20px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
|
|
15
|
-
.iv-s1 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-
|
|
16
|
-
.iv-s1 b { font-weight:
|
|
15
|
+
.iv-s1 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); min-height: 32px; line-height: var(--lh-body); }
|
|
16
|
+
.iv-s1 b { font-weight: var(--fw-strong); }
|
|
17
17
|
.iv-s1.you { color: var(--cz-blueink); }
|
|
18
18
|
.iv-s1.warn { color: var(--cz-risk); }
|
|
19
19
|
.iv-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--cz-blue); }
|
|
20
20
|
.iv-s1.warn .iv-dot { background: var(--cz-risk); }
|
|
21
|
-
.iv-r { margin-left: auto; font-size: var(--fs-
|
|
21
|
+
.iv-r { margin-left: auto; font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; line-height: var(--lh-label); }
|
|
22
22
|
.iv-go { width: 32px; height: 32px; border-radius: 50% !important; background: var(--cz-solid) !important; color: var(--cz-onsolid) !important; display: inline-flex !important; align-items: center; justify-content: center; flex: none; }
|
|
23
23
|
.iv-s1 .iv-r + .iv-go { margin-left: 6px; }
|
|
24
24
|
.iv-s1 b + .iv-go { margin-left: auto; }
|
|
25
|
-
.iv-why { margin: 0; font-size: var(--fs-
|
|
25
|
+
.iv-why { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--cz-ink); }
|
|
26
26
|
/* one row when the summary is only its status (batch 16 item 7): status, owner avatar, workflow icon, program, progress at the end */
|
|
27
27
|
.iv-sum.iv-one { padding: 8px 14px; }
|
|
28
28
|
.iv-one .iv-s1 { flex-wrap: wrap; row-gap: 4px; }
|
|
29
29
|
.iv-one .iv-meta { flex-wrap: nowrap; min-width: 0; gap: 8px; }
|
|
30
30
|
.iv-one .iv-prog { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
31
31
|
.iv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
|
|
32
|
-
.iv-meta { margin: 0; font-size: var(--fs-
|
|
32
|
+
.iv-meta { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: var(--lh-meta); }
|
|
33
33
|
.iv-meta > span, .iv-meta > button { display: inline-flex; align-items: center; gap: 5px; }
|
|
34
34
|
.iv-meta .wfi { color: var(--cz-ink3); display: inline-flex; }
|
|
35
35
|
.iv-meta .wfi svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
|
|
36
36
|
.iv-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--cz-ink3); }
|
|
37
37
|
.iv-st.late i, .iv-st.risk i { background: var(--cz-risk); }
|
|
38
38
|
.iv-st.ok i { background: var(--cz-ok); }
|
|
39
|
-
.iv-av { width: 22px; height: 22px; border-radius: 50%; background: var(--cz-bluebg); color: var(--cz-blueink); font-size:
|
|
39
|
+
.iv-av { width: 22px; height: 22px; border-radius: 50%; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-badge); font-weight: var(--fw-strong); display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: var(--lh-badge); }
|
|
40
40
|
button.iv-wf, .iv-prog { color: var(--cz-ink3) !important; border-radius: 999px; padding: 2px 6px !important; margin-left: -6px !important; }
|
|
41
41
|
button.iv-wf:hover, .iv-prog:hover { background: var(--cz-well2) !important; color: var(--cz-ink) !important; }
|
|
42
42
|
|
|
43
43
|
/* the stage card: where it is, its dates, the next stage */
|
|
44
44
|
.iv-sc { border: 1px solid var(--cz-hair); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
|
|
45
45
|
.iv-sch { display: flex; align-items: center; gap: 8px; }
|
|
46
|
-
.iv-sch b { font-size: var(--fs-
|
|
47
|
-
.iv-sch .iv-r { font-weight:
|
|
48
|
-
.iv-no { width: 22px; height: 22px; border-radius: 7px; background: var(--cz-well); color: var(--cz-ink3); font-size:
|
|
46
|
+
.iv-sch b { font-size: var(--fs-row); font-weight: var(--fw-strong); min-width: 0; line-height: var(--lh-row); }
|
|
47
|
+
.iv-sch .iv-r { font-weight: var(--fw-strong); }
|
|
48
|
+
.iv-no { width: 22px; height: 22px; border-radius: 7px; background: var(--cz-well); color: var(--cz-ink3); font-size: var(--fs-badge); font-weight: var(--fw-strong); display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: var(--lh-badge); }
|
|
49
49
|
.iv-sch .iv-no { background: var(--cz-bluebg); color: var(--cz-blueink); }
|
|
50
50
|
.iv-no.ms { width: 14px; height: 14px; border-radius: 3px; margin: 0 4px; transform: rotate(45deg); background: var(--cz-card); border: 1.6px solid var(--cz-ink3); }
|
|
51
51
|
.iv-sch .iv-no.ms { background: var(--cz-blueink); border-color: var(--cz-blueink); }
|
|
@@ -63,14 +63,14 @@ button.iv-wf:hover, .iv-prog:hover { background: var(--cz-well2) !important; col
|
|
|
63
63
|
.iv-sch .iv-sp { display: none; }
|
|
64
64
|
.iv-scm { order: 10; flex-basis: 100%; padding-left: 30px; margin-top: -6px; flex-wrap: wrap; }
|
|
65
65
|
}
|
|
66
|
-
.iv-scd { font-size: var(--fs-
|
|
66
|
+
.iv-scd { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); white-space: nowrap; border-radius: 8px !important; padding: 2px 4px !important; line-height: var(--lh-label); }
|
|
67
67
|
@media (hover: hover) { button.iv-scd:hover { color: var(--cz-ink); background: var(--cz-well) !important; } }
|
|
68
|
-
.iv-clk { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-
|
|
68
|
+
.iv-clk { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); white-space: nowrap; line-height: var(--lh-label); }
|
|
69
69
|
.iv-clk.w { color: var(--cz-risk); }
|
|
70
|
-
.iv-chp { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-
|
|
70
|
+
.iv-chp { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); background: var(--cz-well); border-radius: 999px; padding: 3px 10px; white-space: nowrap; line-height: var(--lh-label); }
|
|
71
71
|
.iv-chp.late { color: var(--cz-late); background: var(--cz-latebg); }
|
|
72
72
|
.iv-chp.draft { color: var(--cz-blueink); background: var(--cz-bluebg); }
|
|
73
|
-
.iv-scgo { min-width: 34px; height: 34px; padding: 0 10px 0 12px !important; gap: 4px; font-size: var(--fs-
|
|
73
|
+
.iv-scgo { min-width: 34px; height: 34px; padding: 0 10px 0 12px !important; gap: 4px; font-size: var(--fs-label); font-weight: var(--fw-strong); white-space: nowrap; border-radius: 999px !important; display: inline-flex !important; align-items: center; justify-content: center !important; flex: none; color: var(--cz-ink2); background: var(--cz-well) !important; line-height: var(--lh-label); }
|
|
74
74
|
.iv-scgo.on { color: var(--cz-onsolid); background: var(--cz-solid) !important; }
|
|
75
75
|
@media (hover: hover) { button.iv-scgo:hover { background: var(--cz-well2) !important; } button.iv-scgo.on:hover { background: var(--cz-blueink) !important; } }
|
|
76
76
|
.iv-scb { width: 34px; height: 34px; }
|
|
@@ -78,11 +78,11 @@ button.iv-wf:hover, .iv-prog:hover { background: var(--cz-well2) !important; col
|
|
|
78
78
|
|
|
79
79
|
/* the line: the Board row line's height and colours (10 px; done grey, now blue, later light), a 2 px notch between parts */
|
|
80
80
|
.iv-tl { --tl-done: color-mix(in srgb, var(--cz-ink3) 88%, var(--cz-card)); --tl-plan: color-mix(in srgb, var(--cz-ink3) 24%, var(--cz-card)); position: relative; display: flex; flex-direction: column; padding: 0 6px; }
|
|
81
|
-
.iv-tl-dep { align-self: flex-start; display: inline-flex !important; align-items: center; gap: 4px; font-size:
|
|
81
|
+
.iv-tl-dep { align-self: flex-start; display: inline-flex !important; align-items: center; gap: 4px; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); background: var(--cz-well) !important; border-radius: 999px !important; padding: 2px 9px !important; margin-bottom: 4px; line-height: var(--lh-badge); }
|
|
82
82
|
@media (hover: hover) { .iv-tl-dep:hover { color: var(--cz-ink); } }
|
|
83
83
|
.iv-tl-nm { position: relative; height: 18px; }
|
|
84
84
|
.iv-tl.nonames .iv-tl-nm { height: 6px; }
|
|
85
|
-
.iv-tln { position: absolute; bottom: 2px; font-size:
|
|
85
|
+
.iv-tln { position: absolute; bottom: 2px; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink2); white-space: nowrap; transform: translateX(-50%); max-width: 46%; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-badge); }
|
|
86
86
|
.iv-tln.r { transform: translateX(calc(-100% + 8px)); }
|
|
87
87
|
.iv-tln.l { transform: translateX(-8px); }
|
|
88
88
|
.iv-tln.late { color: var(--cz-late); }
|
|
@@ -133,23 +133,23 @@ button.iv-wf:hover, .iv-prog:hover { background: var(--cz-well2) !important; col
|
|
|
133
133
|
.iv-tlm.end.late { border-color: var(--cz-dot-late) !important; }
|
|
134
134
|
.iv-tlm.dash { border-style: dashed !important; }
|
|
135
135
|
.iv-tlm.n { width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px !important; }
|
|
136
|
-
.iv-tlm b { display: block; transform: rotate(-45deg); font-size: 9.5px; font-weight:
|
|
136
|
+
.iv-tlm b { display: block; transform: rotate(-45deg); font-size: 9.5px; font-weight: var(--fw-strong); line-height: 13px; text-align: center; color: var(--cz-ink2); }
|
|
137
137
|
/* the labels under it: the start, the ◇ dates, the end with what it says */
|
|
138
|
-
.iv-tl-dt { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-height: 16px; font-size:
|
|
139
|
-
.iv-tld { position: absolute; top: 0; transform: translateX(-50%); font-weight:
|
|
138
|
+
.iv-tl-dt { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-height: 16px; font-size: var(--fs-badge); color: var(--cz-ink3); font-weight: var(--fw-strong); line-height: var(--lh-badge); }
|
|
139
|
+
.iv-tld { position: absolute; top: 0; transform: translateX(-50%); font-weight: var(--fw-strong); white-space: nowrap; }
|
|
140
140
|
.iv-tld.late { color: var(--cz-late); }
|
|
141
141
|
.iv-tle { margin-left: auto; white-space: nowrap; }
|
|
142
|
-
.iv-tle b { color: var(--cz-ink); font-weight:
|
|
143
|
-
.iv-tle .late, .iv-tle b.late { color: var(--cz-late); font-weight:
|
|
142
|
+
.iv-tle b { color: var(--cz-ink); font-weight: var(--fw-strong); }
|
|
143
|
+
.iv-tle .late, .iv-tle b.late { color: var(--cz-late); font-weight: var(--fw-strong); }
|
|
144
144
|
.iv-tl-slip { color: var(--cz-ink3) !important; }
|
|
145
145
|
.iv-tl-slip.late { color: var(--cz-late) !important; }
|
|
146
146
|
/* what a press unfolds under the line: a counted ◇'s list, a gap's card, the phone's list */
|
|
147
147
|
.iv-tlx { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; background: var(--cz-well); border-radius: 14px; padding: 6px; }
|
|
148
148
|
.iv-tlx.gap { flex-direction: row; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; }
|
|
149
|
-
.iv-tlx.gap p { margin: 0; flex: 1; font-size: var(--fs-
|
|
150
|
-
.iv-tlx-r { display: flex !important; align-items: center; gap: 10px; padding: 8px 10px !important; border-radius: 10px !important; font-size: var(--fs-
|
|
151
|
-
.iv-tlx-r span { flex: 1; min-width: 0; font-weight:
|
|
152
|
-
.iv-tlx-r em { font-style: normal; font-size: var(--fs-
|
|
149
|
+
.iv-tlx.gap p { margin: 0; flex: 1; font-size: var(--fs-label); color: var(--cz-ink2); font-weight: var(--fw-strong); line-height: 1.45; }
|
|
150
|
+
.iv-tlx-r { display: flex !important; align-items: center; gap: 10px; padding: 8px 10px !important; border-radius: 10px !important; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
151
|
+
.iv-tlx-r span { flex: 1; min-width: 0; font-weight: var(--fw-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
152
|
+
.iv-tlx-r em { font-style: normal; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); white-space: nowrap; line-height: var(--lh-label); }
|
|
153
153
|
.iv-tlx-r em.late { color: var(--cz-late); }
|
|
154
154
|
.iv-tlx-r.st.now { background: var(--cz-bluebg) !important; }
|
|
155
155
|
@media (hover: hover) { .iv-tlx-r:hover { background: var(--cz-card) !important; } }
|
|
@@ -158,7 +158,7 @@ button.iv-wf:hover, .iv-prog:hover { background: var(--cz-well2) !important; col
|
|
|
158
158
|
.iv-tlx-d.late { border-color: var(--cz-dot-late); }
|
|
159
159
|
.iv-tlx-s { width: 12px; height: 6px; border-radius: 3px; flex: none; background: var(--tl-plan); }
|
|
160
160
|
.iv-tlx-s.done { background: var(--tl-done); } .iv-tlx-s.now { background: var(--cz-blue); } .iv-tlx-s.skip { background: transparent; border: 1px dashed var(--cz-ink3); }
|
|
161
|
-
.iv-tlx-h { display: flex !important; align-items: center; gap: 6px; padding: 6px 10px !important; font-size: var(--fs-
|
|
161
|
+
.iv-tlx-h { display: flex !important; align-items: center; gap: 6px; padding: 6px 10px !important; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
|
|
162
162
|
.iv-tlx-h[aria-expanded="true"] svg { transform: rotate(180deg); }
|
|
163
163
|
/* the phone (ScxA2Phone): only the next open milestone is named; only the start and the end dates show */
|
|
164
164
|
@media (max-width: 760px) {
|
|
@@ -170,32 +170,32 @@ button.iv-wf:hover, .iv-prog:hover { background: var(--cz-well2) !important; col
|
|
|
170
170
|
|
|
171
171
|
/* Tasks: the WBS, one section per stage */
|
|
172
172
|
.iv-th { display: flex; align-items: center; gap: 8px; padding: 4px 2px 0; }
|
|
173
|
-
.iv-th b { font-size: var(--fs-
|
|
174
|
-
.iv-th .n { font-size: var(--fs-
|
|
173
|
+
.iv-th b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
|
|
174
|
+
.iv-th .n { font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); line-height: var(--lh-label); }
|
|
175
175
|
.iv-th .iv-ib { margin-left: auto; }
|
|
176
176
|
.iv-wbs { display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--cz-hair); overflow: hidden; }
|
|
177
177
|
.iv-ws { display: flex !important; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 4px 12px 4px 14px !important; position: relative; }
|
|
178
178
|
.iv-wbs > .iv-ws + .iv-ws::before, .iv-wbs > .iv-wl + .iv-ws::before, .iv-wl > .iv-ws + .iv-ws::before, .iv-wl > .iv-wl + .iv-ws::before { content: ""; position: absolute; left: 14px; right: 12px; top: 0; height: 1px; background: var(--cz-hair); }
|
|
179
|
-
.iv-ws > .w { flex: 1; min-width: 0; color: inherit; font-weight:
|
|
180
|
-
.iv-ws > .w b { font-size: var(--fs-
|
|
181
|
-
.iv-ws > .w small { font-size: var(--fs-
|
|
182
|
-
.iv-ws > .w small.w { color: var(--cz-risk); font-weight:
|
|
183
|
-
.iv-ws.mut > .w b { color: var(--cz-ink3); font-weight:
|
|
179
|
+
.iv-ws > .w { flex: 1; min-width: 0; color: inherit; font-weight: var(--fw-regular); display: flex; flex-direction: column; }
|
|
180
|
+
.iv-ws > .w b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
|
|
181
|
+
.iv-ws > .w small { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
|
|
182
|
+
.iv-ws > .w small.w { color: var(--cz-risk); font-weight: var(--fw-strong); }
|
|
183
|
+
.iv-ws.mut > .w b { color: var(--cz-ink3); font-weight: var(--fw-strong); }
|
|
184
184
|
.iv-ws.in { padding-left: 24px !important; }
|
|
185
|
-
.iv-ws .n, .iv-grp .n, .iv-fr .n { font-size: var(--fs-
|
|
185
|
+
.iv-ws .n, .iv-grp .n, .iv-fr .n { font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); white-space: nowrap; line-height: var(--lh-label); }
|
|
186
186
|
.iv-ws .n.w { color: var(--cz-risk); }
|
|
187
187
|
.iv-cv { color: var(--cz-ink3); display: inline-flex; flex: none; }
|
|
188
188
|
.iv-wl { padding: 0 14px 6px 46px; display: flex; flex-direction: column; }
|
|
189
189
|
.iv-wl > .iv-ws.in { margin-left: -46px; width: calc(100% + 60px); }
|
|
190
190
|
.iv-tr { display: flex !important; align-items: flex-start; gap: 12px; min-height: 44px; padding: 7px 0 !important; width: 100%; }
|
|
191
191
|
.iv-tr + .iv-tr, .iv-sub > .iv-tr + .iv-tr { border-top: 1px solid var(--cz-hair); }
|
|
192
|
-
.iv-tr > .w { flex: 1; min-width: 0; color: inherit; font-weight:
|
|
193
|
-
.iv-tt { display: block; font-size: var(--fs-
|
|
192
|
+
.iv-tr > .w { flex: 1; min-width: 0; color: inherit; font-weight: var(--fw-regular); display: flex; flex-direction: column; }
|
|
193
|
+
.iv-tt { display: block; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-row); }
|
|
194
194
|
button.iv-tt:hover { text-decoration: underline; text-decoration-color: var(--cz-hair); }
|
|
195
|
-
.iv-tr > .w > span { font-size: var(--fs-
|
|
196
|
-
.iv-tr > .w > span.w { color: var(--cz-risk); font-weight:
|
|
197
|
-
.iv-tr.done .iv-tt { color: var(--cz-ink3); font-weight:
|
|
198
|
-
.iv-tt em { font-style: normal; color: var(--cz-blueink); font-weight:
|
|
195
|
+
.iv-tr > .w > span { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
196
|
+
.iv-tr > .w > span.w { color: var(--cz-risk); font-weight: var(--fw-strong); }
|
|
197
|
+
.iv-tr.done .iv-tt { color: var(--cz-ink3); font-weight: var(--fw-strong); }
|
|
198
|
+
.iv-tt em { font-style: normal; color: var(--cz-blueink); font-weight: var(--fw-strong); }
|
|
199
199
|
.iv-cb { width: 18px; height: 18px; border-radius: 5px; border: 1.6px solid color-mix(in srgb, var(--cz-ink3) 60%, var(--cz-card)) !important; flex: none; margin-top: 1px !important; display: inline-flex !important; align-items: center; justify-content: center; background: var(--cz-card) !important; color: var(--cz-card) !important; }
|
|
200
200
|
.iv-cb.on { background: color-mix(in srgb, var(--cz-ink3) 60%, var(--cz-card)) !important; }
|
|
201
201
|
.iv-cb.off { opacity: .6; }
|
|
@@ -204,32 +204,32 @@ button.iv-tt:hover { text-decoration: underline; text-decoration-color: var(--cz
|
|
|
204
204
|
/* a Jira ticket moving in Jira (Exploring · Move Jira tasks, JmA3States): its mark is a dashed outline until Jira answers */
|
|
205
205
|
.iv-jq.mv, .ig-sq.mv { background: transparent !important; border: 1.5px dashed var(--cz-blue); box-sizing: border-box; }
|
|
206
206
|
.iv-jm.mv { opacity: .55; }
|
|
207
|
-
.iv-jmv { color: var(--cz-blueink); font-weight:
|
|
207
|
+
.iv-jmv { color: var(--cz-blueink); font-weight: var(--fw-strong); white-space: nowrap; }
|
|
208
208
|
.ivk-d[data-ivk-jira] { cursor: grab; }
|
|
209
209
|
.tkc.ivq .ivq-st.jq { flex-wrap: wrap; }
|
|
210
|
-
.tkc.ivq .ivq-st.jq > .ivq-jn { flex-basis: 100%; margin: 2px 8px 4px; font-size:
|
|
210
|
+
.tkc.ivq .ivq-st.jq > .ivq-jn { flex-basis: 100%; margin: 2px 8px 4px; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
|
|
211
211
|
.iv-bxw > .iv-jq { margin: 3px 3px 0; }
|
|
212
|
-
.iv-more, .iv-grp { display: flex !important; align-items: center; gap: 8px; width: 100%; min-height: 40px; font-size: var(--fs-
|
|
213
|
-
.iv-grp b { flex: 1; font-size: var(--fs-
|
|
212
|
+
.iv-more, .iv-grp { display: flex !important; align-items: center; gap: 8px; width: 100%; min-height: 40px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); border-top: 1px solid var(--cz-hair) !important; line-height: var(--lh-label); }
|
|
213
|
+
.iv-grp b { flex: 1; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-row); }
|
|
214
214
|
.iv-sub { padding-left: 12px; }
|
|
215
215
|
.iv-wl > .iv-q { padding: 8px 0 2px; }
|
|
216
216
|
.iv-empty { border: 1.5px dashed var(--cz-well2); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
|
|
217
|
-
.iv-sk { display: flex; align-items: center; gap: 10px; font-size: var(--fs-
|
|
218
|
-
.iv-sk i { font-style: normal; font-weight:
|
|
219
|
-
.iv-pbtn { display: inline-flex !important; align-items: center; gap: 6px; height: 40px; padding: 0 16px !important; border-radius: 999px !important; background: var(--cz-solid) !important; color: var(--cz-onsolid) !important; font-weight:
|
|
217
|
+
.iv-sk { display: flex; align-items: center; gap: 10px; font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); line-height: var(--lh-label); }
|
|
218
|
+
.iv-sk i { font-style: normal; font-weight: var(--fw-strong); }
|
|
219
|
+
.iv-pbtn { display: inline-flex !important; align-items: center; gap: 6px; height: 40px; padding: 0 16px !important; border-radius: 999px !important; background: var(--cz-solid) !important; color: var(--cz-onsolid) !important; font-weight: var(--fw-strong); font-size: var(--fs-row); align-self: flex-start; line-height: var(--lh-row); }
|
|
220
220
|
|
|
221
221
|
.iv-addf { display: flex; align-items: center; gap: 8px; }
|
|
222
|
-
.iv-addf input { flex: 1; min-width: 0; height: 40px; border-radius: 12px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); padding: 0 12px; font: inherit; font-size: var(--fs-
|
|
222
|
+
.iv-addf input { flex: 1; min-width: 0; height: 40px; border-radius: 12px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); padding: 0 12px; font: inherit; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
223
223
|
.iv-addf input:focus { outline: 2px solid var(--cz-blue); outline-offset: 0; }
|
|
224
224
|
|
|
225
225
|
/* Documents and Linked: the folds under the WBS */
|
|
226
226
|
.iv-folds { border-radius: 18px; border: 1px solid var(--cz-hair); overflow: hidden; }
|
|
227
227
|
.iv-fr { display: flex !important; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 12px 0 14px !important; position: relative; }
|
|
228
|
-
.iv-fr b { flex: 1; font-size: var(--fs-
|
|
228
|
+
.iv-fr b { flex: 1; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
|
|
229
229
|
.iv-folds > * + .iv-fr::before { content: ""; position: absolute; left: 14px; right: 12px; top: 0; height: 1px; background: var(--cz-hair); }
|
|
230
|
-
.iv-fb { padding: 0 14px 12px; font-size: var(--fs-
|
|
230
|
+
.iv-fb { padding: 0 14px 12px; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
231
231
|
.iv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
232
|
-
.iv-chip { display: inline-flex !important; align-items: center; height: 30px; padding: 0 10px !important; border-radius: 999px !important; border: 1px solid var(--cz-hair) !important; font-size: var(--fs-
|
|
232
|
+
.iv-chip { display: inline-flex !important; align-items: center; height: 30px; padding: 0 10px !important; border-radius: 999px !important; border: 1px solid var(--cz-hair) !important; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
|
|
233
233
|
button.iv-chip:hover { background: var(--cz-well) !important; }
|
|
234
234
|
|
|
235
235
|
/* Tasks in three views and the quick changes (batch 9 item 5b; canvas In development, row "Tasks views"): pm/ini-tasks.js */
|
|
@@ -239,7 +239,7 @@ button.iv-chip:hover { background: var(--cz-well) !important; }
|
|
|
239
239
|
.ivx-sb { width: 32px; height: 30px; border-radius: 999px !important; display: inline-flex !important; align-items: center; justify-content: center; color: var(--cz-ink3) !important; }
|
|
240
240
|
.ivx-sb:hover { color: var(--cz-ink) !important; }
|
|
241
241
|
.ivx-sb[aria-pressed="true"] { background: var(--cz-card) !important; color: var(--cz-ink) !important; box-shadow: 0 1px 3px rgba(42,46,53,.12); }
|
|
242
|
-
.ivx-pick { display: inline-flex !important; align-items: center; gap: 4px; height: 30px; padding: 0 8px 0 12px !important; border-radius: 999px !important; background: var(--cz-well) !important; font-size: var(--fs-
|
|
242
|
+
.ivx-pick { display: inline-flex !important; align-items: center; gap: 4px; height: 30px; padding: 0 8px 0 12px !important; border-radius: 999px !important; background: var(--cz-well) !important; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2) !important; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; flex: none; line-height: var(--lh-label); }
|
|
243
243
|
.ivx-pick.on { background: var(--cz-bluebg) !important; color: var(--cz-blueink) !important; }
|
|
244
244
|
|
|
245
245
|
/* the box: one press marks done; the caret (hover or focus; a long press on a phone) opens the status picker */
|
|
@@ -256,14 +256,14 @@ button.iv-bxw.jr:hover .iv-cb { box-shadow: 0 0 0 3px var(--cz-well); }
|
|
|
256
256
|
.iv-car[aria-expanded="true"] { background: var(--cz-bluebg) !important; color: var(--cz-blueink) !important; }
|
|
257
257
|
@media (pointer: coarse) { .iv-car { display: none !important; } }
|
|
258
258
|
.iv-tr.wo .iv-tt, .ivk-d.wo .iv-tt, .ivt-r.wo .iv-tt { text-decoration: line-through; text-decoration-color: var(--cz-ink3); }
|
|
259
|
-
.iv-tr.ar .iv-tt { color: var(--cz-ink3); font-weight:
|
|
260
|
-
.iv-rm { font-size: var(--fs-
|
|
261
|
-
.iv-rm .iv-late { color: var(--cz-risk); font-weight:
|
|
259
|
+
.iv-tr.ar .iv-tt { color: var(--cz-ink3); font-weight: var(--fw-strong); }
|
|
260
|
+
.iv-rm { font-size: var(--fs-meta); color: var(--cz-ink3); display: block; min-height: 22px; line-height: 22px; }
|
|
261
|
+
.iv-rm .iv-late { color: var(--cz-risk); font-weight: var(--fw-strong); }
|
|
262
262
|
.iv-rm .iv-sep { white-space: pre; }
|
|
263
263
|
/* the date: a press; the start and due picker opens under it. No dates: a calendar icon on hover */
|
|
264
|
-
.iv-dc { display: inline-flex !important; align-items: center; vertical-align: top; white-space: nowrap; gap: 4px; height: 22px; padding: 0 6px !important; margin: 0 -6px !important; border-radius: 999px !important; color: var(--cz-ink3) !important; font-weight:
|
|
264
|
+
.iv-dc { display: inline-flex !important; align-items: center; vertical-align: top; white-space: nowrap; gap: 4px; height: 22px; padding: 0 6px !important; margin: 0 -6px !important; border-radius: 999px !important; color: var(--cz-ink3) !important; font-weight: var(--fw-strong); }
|
|
265
265
|
.iv-dc:hover, .iv-dc[aria-expanded="true"] { background: var(--cz-bluebg) !important; color: var(--cz-blueink) !important; }
|
|
266
|
-
.iv-dc.w { color: var(--cz-late) !important; font-weight:
|
|
266
|
+
.iv-dc.w { color: var(--cz-late) !important; font-weight: var(--fw-strong); } /* late says --cz-late everywhere (StsA1Desk) */
|
|
267
267
|
.iv-dc.none { margin-left: 0 !important; opacity: 0; }
|
|
268
268
|
.iv-tr:hover .iv-dc.none, .iv-dc.none:focus-visible, .iv-dc.none[aria-expanded="true"] { opacity: 1; }
|
|
269
269
|
.iv-jm { width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--cz-blueink); margin-top: 1px; }
|
|
@@ -280,8 +280,8 @@ button.iv-bxw.jr:hover .iv-cb { box-shadow: 0 0 0 3px var(--cz-well); }
|
|
|
280
280
|
.ivt-r { display: flex; min-height: 44px; border-top: 1px solid var(--cz-hair); position: relative; }
|
|
281
281
|
.ivt-r.ax { border-top: 0; min-height: 30px; background: var(--cz-well); }
|
|
282
282
|
.ivt-r.ax .ivt-n { background: var(--cz-well); }
|
|
283
|
-
.ivt-r.ax .ivt-c span { position: absolute; top: 8px; font-size:
|
|
284
|
-
.ivt-r.ax .ivt-c span.b { color: var(--cz-ink2); font-weight:
|
|
283
|
+
.ivt-r.ax .ivt-c span { position: absolute; top: 8px; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); white-space: nowrap; padding-left: 4px; line-height: var(--lh-badge); }
|
|
284
|
+
.ivt-r.ax .ivt-c span.b { color: var(--cz-ink2); font-weight: var(--fw-strong); }
|
|
285
285
|
.ivt-r.ax .ivt-c span.cut { visibility: hidden; } /* cut by an edge or under the Today chip (ini-tasks.js wireDrag) */
|
|
286
286
|
/* Home's phone rule gives every button in its Viewer 44 px (home-ini.css .hi-v button): a bar, a mark or a title in the Timeline keeps its
|
|
287
287
|
* own size, or each bar grows to 44 px and spills over the next row (0.442.0 hotfix). The row stays the press area. */
|
|
@@ -289,7 +289,7 @@ button.iv-bxw.jr:hover .iv-cb { box-shadow: 0 0 0 3px var(--cz-well); }
|
|
|
289
289
|
.ivt-d.ms { width: 12px; height: 12px; margin: -6px 0 0 -6px !important; border-radius: 2px !important; transform: rotate(45deg); }
|
|
290
290
|
.ivt-n { position: sticky; left: 0; z-index: 3; width: var(--nw); flex: none; background: var(--cz-card); display: flex; align-items: center; gap: 10px; padding: 0 10px 0 14px; min-width: 0; }
|
|
291
291
|
.ivt-r.k .ivt-n { padding-left: 34px; }
|
|
292
|
-
.ivt-n .iv-tt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; font-size: var(--fs-
|
|
292
|
+
.ivt-n .iv-tt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
293
293
|
/* batch 25 item 4 (TaskNamesWrap, agreed A): on a desktop a task's name is never cut in the Timeline either. It wraps in the name column;
|
|
294
294
|
* the row grows and its bar stays in the middle. (A phone keeps each title on one line above its bar.) */
|
|
295
295
|
@container (min-width: 521px) {
|
|
@@ -299,18 +299,18 @@ button.iv-bxw.jr:hover .iv-cb { box-shadow: 0 0 0 3px var(--cz-well); }
|
|
|
299
299
|
.ivt-r.k .ivt-t { flex-wrap: wrap; row-gap: 2px; }
|
|
300
300
|
.ivt-r.k .ivt-wn { flex-basis: 100%; padding-left: 28px; flex-wrap: wrap; white-space: nowrap; }
|
|
301
301
|
}
|
|
302
|
-
.ivt-r.x .iv-tt { color: var(--cz-ink3); font-weight:
|
|
302
|
+
.ivt-r.x .iv-tt { color: var(--cz-ink3); font-weight: var(--fw-strong); }
|
|
303
303
|
.ivt-n .iv-bxw { align-self: center; }
|
|
304
304
|
.ivt-n .iv-cb { margin-top: 0 !important; }
|
|
305
305
|
/* a group's name is never cut short: its cell grows over the group's own band */
|
|
306
306
|
.ivt-r.g .ivt-n { width: auto; min-width: var(--nw); max-width: 100%; padding-right: 14px; }
|
|
307
307
|
.ivt-r.g .ivt-c { position: absolute; left: var(--nw); right: 0; top: 0; bottom: 0; }
|
|
308
308
|
.ivt-gh { display: flex !important; align-items: center; gap: 10px; width: 100%; min-height: 48px; }
|
|
309
|
-
.ivt-gh b { flex: 1; min-width: 0; font-size: var(--fs-
|
|
310
|
-
.ivt-gh.mut b { color: var(--cz-ink3); font-weight:
|
|
311
|
-
.ivt-gh .n, .ivt-df .n { font-size: var(--fs-
|
|
309
|
+
.ivt-gh b { flex: 1; min-width: 0; font-size: var(--fs-row); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-row); }
|
|
310
|
+
.ivt-gh.mut b { color: var(--cz-ink3); font-weight: var(--fw-strong); }
|
|
311
|
+
.ivt-gh .n, .ivt-df .n { font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); white-space: nowrap; line-height: var(--lh-label); }
|
|
312
312
|
.ivt-gh .n.w { color: var(--cz-late); }
|
|
313
|
-
.ivt-df { display: flex !important; align-items: center; gap: 8px; width: 100%; min-height: 40px; font-size: var(--fs-
|
|
313
|
+
.ivt-df { display: flex !important; align-items: center; gap: 8px; width: 100%; min-height: 40px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
|
|
314
314
|
.ivt-df .n { margin-left: auto; }
|
|
315
315
|
.ivt-r.g .ivt-c { background: color-mix(in srgb, var(--cz-well) 40%, var(--cz-card)); }
|
|
316
316
|
.ivt-c { position: relative; flex: 1; min-width: 0; }
|
|
@@ -330,7 +330,7 @@ button.iv-bxw.jr:hover .iv-cb { box-shadow: 0 0 0 3px var(--cz-well); }
|
|
|
330
330
|
.ivt-gp { position: absolute; top: 3px; bottom: 3px; width: 6px; border-radius: 3px; background: var(--cz-card); box-shadow: 0 0 0 1px var(--cz-hair); cursor: ew-resize; opacity: 0; }
|
|
331
331
|
.ivt-gp.l { left: 2px; } .ivt-gp.r { right: 2px; }
|
|
332
332
|
.ivt-b:hover .ivt-gp, .ivt-b.drag .ivt-gp { opacity: 1; }
|
|
333
|
-
.ivt-av { width: 16px; height: 16px; border-radius: 50%; background: var(--cz-card); color: var(--cz-ink2); font-size:
|
|
333
|
+
.ivt-av { width: 16px; height: 16px; border-radius: 50%; background: var(--cz-card); color: var(--cz-ink2); font-size: var(--fs-badge); font-weight: var(--fw-strong); display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: var(--lh-badge); }
|
|
334
334
|
.ivt-b .ivt-av { pointer-events: none; }
|
|
335
335
|
.ivt-d { position: absolute !important; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px !important; border-radius: 50% !important; background: var(--cz-card) !important; border: 2.5px solid var(--cz-ink3) !important; z-index: 1; }
|
|
336
336
|
.ivt-d.pr { border-color: var(--cz-blue) !important; }
|
|
@@ -340,10 +340,10 @@ button.iv-bxw.jr:hover .iv-cb { box-shadow: 0 0 0 3px var(--cz-well); }
|
|
|
340
340
|
.ivt-d.wo { border-style: dashed !important; }
|
|
341
341
|
.ivt-g { position: absolute !important; top: 50%; height: 20px; width: 36px; margin-top: -10px !important; border-radius: 999px !important; border: 1.5px dashed color-mix(in srgb, var(--cz-ink3) 50%, var(--cz-card)) !important; display: inline-flex !important; align-items: center; justify-content: center; color: var(--cz-ink3) !important; z-index: 1; }
|
|
342
342
|
.ivt-g:hover { border-color: var(--cz-blue) !important; color: var(--cz-blueink) !important; }
|
|
343
|
-
.ivt-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--cz-solid); color: var(--cz-onsolid); font-size: var(--fs-
|
|
343
|
+
.ivt-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--cz-solid); color: var(--cz-onsolid); font-size: var(--fs-label); font-weight: var(--fw-strong); padding: 3px 8px; border-radius: 8px; white-space: nowrap; pointer-events: none; line-height: var(--lh-label); }
|
|
344
344
|
.ivt-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--cz-blue); z-index: 2; pointer-events: none; }
|
|
345
|
-
.ivt-today i { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-style: normal; font-size:
|
|
346
|
-
.ivt-lg { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-
|
|
345
|
+
.ivt-today i { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-card); background: var(--cz-blue); border-radius: 999px; padding: 1px 6px; white-space: nowrap; line-height: var(--lh-badge); }
|
|
346
|
+
.ivt-lg { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-meta); color: var(--cz-ink3); padding: 8px 4px 0; line-height: var(--lh-meta); }
|
|
347
347
|
.ivt-lg span { display: inline-flex; align-items: center; gap: 6px; }
|
|
348
348
|
.ivt-lg i { display: inline-block; width: 18px; height: 8px; border-radius: 4px; background: var(--cz-well2); }
|
|
349
349
|
.ivt-lg i.dd { width: 10px; height: 10px; border-radius: 50%; background: var(--cz-card); border: 2px solid var(--cz-ink3); }
|
|
@@ -354,12 +354,12 @@ button.iv-bxw.jr:hover .iv-cb { box-shadow: 0 0 0 3px var(--cz-well); }
|
|
|
354
354
|
.ivt.cols { --nw: calc(clamp(150px, 24cqw, 280px) + var(--tl-c1w, 0px) + var(--tl-c2w, 0px) + var(--tl-c3w, 0px) + var(--tl-c4w, 0px) + var(--tl-c5w, 0px)); }
|
|
355
355
|
.ivt.cols .ivt-n { gap: 0; }
|
|
356
356
|
.ivt-t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
|
|
357
|
-
.ivt-r.ax .ivt-t, .ivt-r.ax .ivt-col { font-size:
|
|
358
|
-
.ivt-col { flex: none; box-sizing: border-box; padding-left: 8px; display: flex; align-items: center; min-width: 0; font-size: var(--fs-
|
|
357
|
+
.ivt-r.ax .ivt-t, .ivt-r.ax .ivt-col { font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
|
|
358
|
+
.ivt-col { flex: none; box-sizing: border-box; padding-left: 8px; display: flex; align-items: center; min-width: 0; font-size: var(--fs-meta); color: var(--cz-ink2); white-space: nowrap; overflow: hidden; line-height: var(--lh-meta); }
|
|
359
359
|
.ivt-col.p1 { width: var(--tl-c1w); } .ivt-col.p2 { width: var(--tl-c2w); } .ivt-col.p3 { width: var(--tl-c3w); } .ivt-col.p4 { width: var(--tl-c4w); } .ivt-col.p5 { width: var(--tl-c5w); }
|
|
360
|
-
.ivt-col .lt { color: var(--cz-late); font-weight:
|
|
361
|
-
.ivt-key { font-size: var(--fs-
|
|
362
|
-
.ivt-st { display: inline-flex !important; align-items: center; gap: 7px; height: 28px; padding: 0 8px 0 4px !important; margin-left: -4px; border-radius: 8px !important; font-size: var(--fs-
|
|
360
|
+
.ivt-col .lt { color: var(--cz-late); font-weight: var(--fw-strong); }
|
|
361
|
+
.ivt-key { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-blueink) !important; text-decoration: underline; text-underline-offset: 2px; padding: 0 !important; min-height: 0 !important; line-height: var(--lh-label); }
|
|
362
|
+
.ivt-st { display: inline-flex !important; align-items: center; gap: 7px; height: 28px; padding: 0 8px 0 4px !important; margin-left: -4px; border-radius: 8px !important; font-size: var(--fs-meta); color: var(--cz-ink2) !important; white-space: nowrap; min-height: 0 !important; line-height: var(--lh-meta); }
|
|
363
363
|
.ivt-st .iv-cb { margin-top: 0 !important; }
|
|
364
364
|
button.ivt-st:hover, button.ivt-st[aria-expanded="true"] { background: var(--cz-well) !important; }
|
|
365
365
|
.ivt-st.dr .iv-cb { border-style: dashed !important; border-radius: 50% !important; }
|
|
@@ -375,12 +375,12 @@ button.ivt-st:hover, button.ivt-st[aria-expanded="true"] { background: var(--cz-
|
|
|
375
375
|
@container (max-width: 559px) { .ivt.cols { --tl-c1w: 0px !important; } .ivt-col.p1 { display: none; } .ivt-bx.bx-p1, .ivt-wn.wn-p1 { display: inline-flex !important; } }
|
|
376
376
|
/* the view sheet's Columns (StsA7Picker): a check box for each, two to a row; Task always */
|
|
377
377
|
.ivs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
|
|
378
|
-
.ivs-ck { display: flex !important; align-items: center; gap: 10px; height: 36px; padding: 0 6px !important; border-radius: 10px !important; font-size: var(--fs-
|
|
378
|
+
.ivs-ck { display: flex !important; align-items: center; gap: 10px; height: 36px; padding: 0 6px !important; border-radius: 10px !important; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink) !important; text-align: left; line-height: var(--lh-row); }
|
|
379
379
|
.ivs-ck:hover { background: var(--cz-well) !important; }
|
|
380
380
|
.ivs-ck[aria-disabled="true"] { cursor: default; background: transparent !important; }
|
|
381
381
|
.ivs-ck i { width: 18px; height: 18px; border-radius: 5px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1.6px solid color-mix(in srgb, var(--cz-ink3) 60%, var(--cz-card)); color: var(--cz-card); box-sizing: border-box; }
|
|
382
382
|
.ivs-ck.on i { background: var(--cz-blue); border-color: var(--cz-blue); }
|
|
383
|
-
.ivs-ck small { margin-left: auto; font-size:
|
|
383
|
+
.ivs-ck small { margin-left: auto; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
|
|
384
384
|
|
|
385
385
|
/* a phone: the title sits above its bar; no drag (tap a bar for the picker) */
|
|
386
386
|
@container (max-width: 520px) {
|
|
@@ -405,24 +405,24 @@ button.ivt-st:hover, button.ivt-st[aria-expanded="true"] { background: var(--cz-
|
|
|
405
405
|
.ivk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 40px; gap: 8px; align-items: start; }
|
|
406
406
|
.ivk.w4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
407
407
|
.ivk-c { background: var(--cz-well); border-radius: 16px; padding: 6px; display: flex; flex-direction: column; gap: 6px; min-height: 160px; min-width: 0; }
|
|
408
|
-
.ivk-c h4, .ivk-wh { margin: 0; display: flex !important; align-items: center; gap: 8px; padding: 6px 6px 2px 8px !important; font-size: var(--fs-
|
|
409
|
-
.ivk-c h4 .n, .ivk-wh .n { font-weight:
|
|
408
|
+
.ivk-c h4, .ivk-wh { margin: 0; display: flex !important; align-items: center; gap: 8px; padding: 6px 6px 2px 8px !important; font-size: var(--fs-section); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-section); }
|
|
409
|
+
.ivk-c h4 .n, .ivk-wh .n { font-weight: var(--fw-strong); color: var(--cz-ink3); }
|
|
410
410
|
.ivk-c.ivk-over, .ivk-w.ivk-over { box-shadow: inset 0 0 0 2px var(--cz-blue); }
|
|
411
|
-
.ivk-w { align-self: stretch; min-height: 160px; background: var(--cz-well) !important; border-radius: 16px !important; display: flex !important; justify-content: center; padding-top: 12px !important; color: var(--cz-ink3) !important; font-size: var(--fs-
|
|
411
|
+
.ivk-w { align-self: stretch; min-height: 160px; background: var(--cz-well) !important; border-radius: 16px !important; display: flex !important; justify-content: center; padding-top: 12px !important; color: var(--cz-ink3) !important; font-size: var(--fs-label); font-weight: var(--fw-strong); line-height: var(--lh-label); }
|
|
412
412
|
.ivk-w span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
|
|
413
413
|
.ivk-d { background: var(--cz-card); border-radius: 12px; border: 1px solid var(--cz-hair); padding: 9px 9px 7px; display: flex; gap: 9px; align-items: flex-start; min-width: 0; }
|
|
414
414
|
.ivk-d[draggable="true"] { cursor: grab; }
|
|
415
415
|
.ivk-d.drag { opacity: .5; }
|
|
416
|
-
.ivk-d > .w { flex: 1; min-width: 0; color: inherit; font-weight:
|
|
417
|
-
.ivk-d .iv-tt { font-size: var(--fs-
|
|
418
|
-
.ivk-d.x .iv-tt { color: var(--cz-ink3); font-weight:
|
|
419
|
-
.ivk-m { display: flex; align-items: center; gap: 6px; font-size: var(--fs-
|
|
420
|
-
.ivk-m .ivt-av { margin-left: auto; width: 20px; height: 20px; font-size:
|
|
416
|
+
.ivk-d > .w { flex: 1; min-width: 0; color: inherit; font-weight: var(--fw-regular); display: flex; flex-direction: column; gap: 2px; }
|
|
417
|
+
.ivk-d .iv-tt { font-size: var(--fs-body); line-height: 1.3; overflow-wrap: anywhere; }
|
|
418
|
+
.ivk-d.x .iv-tt { color: var(--cz-ink3); font-weight: var(--fw-strong); }
|
|
419
|
+
.ivk-m { display: flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--cz-ink3); min-height: 22px; line-height: var(--lh-meta); }
|
|
420
|
+
.ivk-m .ivt-av { margin-left: auto; width: 20px; height: 20px; font-size: var(--fs-meta); background: var(--cz-well); line-height: var(--lh-meta); }
|
|
421
421
|
.ivk-d:hover .iv-dc.none, .ivk-d .iv-dc.none:focus-visible { opacity: 1; }
|
|
422
422
|
.ivk-tabs { display: none; gap: 4px; margin-bottom: 8px; overflow-x: auto; }
|
|
423
|
-
.ivk-tabs button { height: 32px; padding: 0 12px !important; border-radius: 999px !important; font-size: var(--fs-
|
|
423
|
+
.ivk-tabs button { height: 32px; padding: 0 12px !important; border-radius: 999px !important; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3) !important; white-space: nowrap; line-height: var(--lh-label); }
|
|
424
424
|
.ivk-tabs button[aria-selected="true"] { background: var(--cz-card) !important; color: var(--cz-ink) !important; box-shadow: 0 1px 3px rgba(42,46,53,.12); }
|
|
425
|
-
.ivk-tabs .n { font-weight:
|
|
425
|
+
.ivk-tabs .n { font-weight: var(--fw-strong); color: var(--cz-ink3); }
|
|
426
426
|
.ivk-h { padding: 8px 4px 0; }
|
|
427
427
|
/* a phone: one column a screen, tabs on top, the next column peeks */
|
|
428
428
|
@container (max-width: 520px) {
|
|
@@ -444,7 +444,7 @@ button.ivt-st:hover, button.ivt-st[aria-expanded="true"] { background: var(--cz-
|
|
|
444
444
|
.tkc.ivq .seg .vr { width: 1px; height: 20px; background: var(--cz-hair); margin: 0 3px; }
|
|
445
445
|
.tkc.ivq .ivq-m { min-width: 220px; }
|
|
446
446
|
.tkc.ivq .ivq-m .ck { width: 16px; display: inline-flex; color: var(--cz-blueink); }
|
|
447
|
-
.tkc.ivq .ivq-m .k { color: var(--cz-ink3); font-size: var(--fs-
|
|
447
|
+
.tkc.ivq .ivq-m .k { color: var(--cz-ink3); font-size: var(--fs-label); font-weight: var(--fw-strong); padding-left: 14px; line-height: var(--lh-label); }
|
|
448
448
|
|
|
449
449
|
/* Milestone tasks (feedback batch 11 item 3; canvas XmlA2Flag, XmlA3Viewer, XmlA6Suggest): a small grey ◇ after the title on every task row;
|
|
450
450
|
* in the Timeline the bar ends in its ◇ with the date beside it and a faint dashed guide drops through the grid; a milestone with no due date
|
|
@@ -453,14 +453,14 @@ button.ivt-st:hover, button.ivt-st[aria-expanded="true"] { background: var(--cz-
|
|
|
453
453
|
.iv-ms.dn { opacity: .7; }
|
|
454
454
|
.iv-ms svg { display: block; }
|
|
455
455
|
.ivt-n .iv-ms { margin-left: 0; }
|
|
456
|
-
.iv-dc.ms { opacity: 1 !important; margin: 0 !important; border: 1.5px dashed color-mix(in srgb, var(--cz-ink3) 50%, var(--cz-card)) !important; padding: 0 8px !important; gap: 5px; font-size: var(--fs-
|
|
456
|
+
.iv-dc.ms { opacity: 1 !important; margin: 0 !important; border: 1.5px dashed color-mix(in srgb, var(--cz-ink3) 50%, var(--cz-card)) !important; padding: 0 8px !important; gap: 5px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
457
457
|
span.iv-dc.ms { display: inline-flex; border-radius: 999px; }
|
|
458
458
|
.ivt-ms { position: absolute; top: 50%; height: 0; z-index: 2; display: flex; align-items: center; pointer-events: auto; }
|
|
459
459
|
.ivt-ms i { width: 11px; height: 11px; margin-left: -5.5px; transform: rotate(45deg); border-radius: 2px; background: var(--cz-card); border: 2px solid var(--cz-ink3); box-sizing: border-box; flex: none; }
|
|
460
|
-
.ivt-ms b { margin-left: 7px; font-size:
|
|
460
|
+
.ivt-ms b { margin-left: 7px; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink2); white-space: nowrap; line-height: var(--lh-badge); }
|
|
461
461
|
.ivt-ms.dn i { background: var(--cz-ink3); box-shadow: 0 0 0 2px var(--cz-card); }
|
|
462
462
|
.ivt-ms.lt i { border-color: var(--cz-dot-late, var(--cz-late)); }
|
|
463
|
-
.ivt-ms.lt b { color: var(--cz-late); font-weight:
|
|
463
|
+
.ivt-ms.lt b { color: var(--cz-late); font-weight: var(--fw-strong); }
|
|
464
464
|
.ivt-grid i.ms { width: 0; background: none; border-left: 1px dashed color-mix(in srgb, var(--cz-ink3) 45%, transparent); }
|
|
465
465
|
.ivt-lg svg { color: var(--cz-ink3); }
|
|
466
466
|
.tkc .seg .ivq-ms { color: var(--cz-ink3); }
|
|
@@ -468,23 +468,23 @@ span.iv-dc.ms { display: inline-flex; border-radius: 999px; }
|
|
|
468
468
|
.tkc.ivq .ivq-st { display: flex; flex-direction: row; align-items: center; gap: 2px; flex-wrap: nowrap; }
|
|
469
469
|
.tkc.ivq .ivq-st > .vr { width: 1px; height: 20px; background: var(--cz-hair); margin: 0 3px; flex: none; }
|
|
470
470
|
.tkc.ivq .ivq-st > .ivq-ms { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 9px; background: transparent; color: var(--cz-ink3); cursor: pointer; }
|
|
471
|
-
.tkc.ivq .ivq-st > .ivq-ms.on { width: auto; padding: 0 12px 0 9px; gap: 6px; background: var(--cz-bluebg); color: var(--cz-blueink); font-weight:
|
|
471
|
+
.tkc.ivq .ivq-st > .ivq-ms.on { width: auto; padding: 0 12px 0 9px; gap: 6px; background: var(--cz-bluebg); color: var(--cz-blueink); font-weight: var(--fw-strong); font-size: var(--fs-row); box-shadow: inset 0 0 0 1.5px var(--cz-blue); line-height: var(--lh-row); }
|
|
472
472
|
/* the trash (batch 11 item 16): quiet grey like the ◇, red only under the pointer; Undo in the toast is the safety, so no confirm */
|
|
473
473
|
.tkc.ivq .ivq-del { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 9px; background: transparent; color: var(--cz-ink3); cursor: pointer; }
|
|
474
474
|
.tkc.ivq .ivq-del:hover, .tkc.ivq .ivq-del:focus-visible { color: var(--cz-red); background: var(--cz-redbg, transparent); }
|
|
475
|
-
.tkc .seg .ivq-ms.on { width: auto; padding: 0 12px 0 9px; gap: 6px; background: var(--cz-bluebg); color: var(--cz-blueink); font-weight:
|
|
475
|
+
.tkc .seg .ivq-ms.on { width: auto; padding: 0 12px 0 9px; gap: 6px; background: var(--cz-bluebg); color: var(--cz-blueink); font-weight: var(--fw-strong); font-size: var(--fs-row); box-shadow: inset 0 0 0 1.5px var(--cz-blue); line-height: var(--lh-row); }
|
|
476
476
|
/* planned versus actual (batch 11 item 8; canvas In development, row "Planned vs actual"): pm/ini-versions.js and pm/ini-tasks.js */
|
|
477
|
-
.vs-chip { display: inline-flex !important; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 12px !important; border-radius: 999px !important; background: var(--cz-well) !important; font-size: var(--fs-
|
|
477
|
+
.vs-chip { display: inline-flex !important; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 12px !important; border-radius: 999px !important; background: var(--cz-well) !important; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2) !important; white-space: nowrap; max-width: 200px; flex: none; line-height: var(--lh-label); }
|
|
478
478
|
.vs-chip .t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
|
|
479
479
|
.vs-chip.dr { background: var(--cz-bluebg) !important; color: var(--cz-blueink) !important; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cz-blue) 45%, var(--cz-card)); }
|
|
480
|
-
.vs-chip .c { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--cz-blue); color: var(--cz-card); font-size:
|
|
481
|
-
.vs-slip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--cz-well); color: var(--cz-ink3); font-size: var(--fs-
|
|
480
|
+
.vs-chip .c { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--cz-blue); color: var(--cz-card); font-size: var(--fs-badge); font-weight: var(--fw-strong); display: inline-flex; align-items: center; justify-content: center; line-height: var(--lh-badge); }
|
|
481
|
+
.vs-slip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--cz-well); color: var(--cz-ink3); font-size: var(--fs-label); font-weight: var(--fw-strong); flex: none; line-height: var(--lh-label); }
|
|
482
482
|
.vs-slip.late { background: var(--cz-latebg); color: var(--cz-late); }
|
|
483
483
|
.vs-seal { width: 36px; height: 36px; border-radius: 999px !important; display: inline-flex !important; align-items: center; justify-content: center; background: var(--cz-ink) !important; color: var(--cz-card) !important; flex: none; }
|
|
484
484
|
.vs-seal:hover { opacity: .9; }
|
|
485
485
|
.iv-cb.dr { border-style: dashed !important; border-radius: 50% !important; background: transparent !important; }
|
|
486
486
|
.vs-add { display: inline-flex; align-items: center; color: var(--cz-ink3); margin-left: 6px; flex: none; vertical-align: -2px; }
|
|
487
|
-
.vs-sl { font-weight:
|
|
487
|
+
.vs-sl { font-weight: var(--fw-strong); color: var(--cz-ink3); }
|
|
488
488
|
.vs-sl.late { color: var(--cz-late); }
|
|
489
489
|
/* a draft's task: dashed, never solid (dashed blue stays the Jira forecast and Claude's ◇ suggestion) */
|
|
490
490
|
.ivt-b.dr { background: var(--cz-card) !important; border: 1.5px dashed color-mix(in srgb, var(--cz-ink3) 75%, var(--cz-card)) !important; box-sizing: border-box; }
|
|
@@ -493,7 +493,7 @@ span.iv-dc.ms { display: inline-flex; border-radius: 999px; }
|
|
|
493
493
|
.ivt-pl { position: absolute; left: var(--tl-x, 0); width: var(--tl-w, 0); bottom: 5px; height: 1.6px; background: var(--cz-ink2); z-index: 1; pointer-events: auto; }
|
|
494
494
|
.ivt-pl::before, .ivt-pl::after { content: ""; position: absolute; top: -3px; width: 1.6px; height: 7.6px; background: var(--cz-ink2); }
|
|
495
495
|
.ivt-pl::before { left: 0; } .ivt-pl::after { right: 0; }
|
|
496
|
-
.ivt-sl { position: absolute; left: var(--tl-x, 0); top: 50%; transform: translateY(-50%); font-size:
|
|
496
|
+
.ivt-sl { position: absolute; left: var(--tl-x, 0); top: 50%; transform: translateY(-50%); font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink2); white-space: nowrap; z-index: 1; pointer-events: none; line-height: var(--lh-badge); }
|
|
497
497
|
.ivt-lg i.pl { height: 1.6px; border-radius: 0; background: var(--cz-ink2); position: relative; }
|
|
498
498
|
.ivt-lg i.pl::before, .ivt-lg i.pl::after { content: ""; position: absolute; top: -3px; width: 1.6px; height: 7.6px; background: var(--cz-ink2); }
|
|
499
499
|
.ivt-lg i.pl::before { left: 0; } .ivt-lg i.pl::after { right: 0; }
|
|
@@ -503,7 +503,7 @@ span.iv-dc.ms { display: inline-flex; border-radius: 999px; }
|
|
|
503
503
|
.vs-m .vs-r { position: relative; display: flex; align-items: center; }
|
|
504
504
|
.vs-m .vs-r .o { flex: 1; min-width: 0; min-height: 44px; }
|
|
505
505
|
.vs-m .nn { display: flex; flex-direction: column; min-width: 0; text-align: left; line-height: 1.25; padding: 4px 0; }
|
|
506
|
-
.vs-m .nn small { font-size:
|
|
506
|
+
.vs-m .nn small { font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
|
|
507
507
|
.vs-m .vs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cz-blue); margin-left: auto; flex: none; }
|
|
508
508
|
.vs-m .vs-k { margin-left: auto; display: inline-flex; color: var(--cz-ink2); }
|
|
509
509
|
.vs-m .vs-tl { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: none; gap: 2px; background: var(--cz-well); border-radius: 10px; padding: 2px; }
|
|
@@ -511,11 +511,11 @@ span.iv-dc.ms { display: inline-flex; border-radius: 999px; }
|
|
|
511
511
|
.vs-ti { width: 30px; height: 30px; border-radius: 999px !important; display: inline-flex !important; align-items: center; justify-content: center; color: var(--cz-ink2) !important; flex: none; }
|
|
512
512
|
.vs-ti:hover { background: var(--cz-card) !important; color: var(--cz-ink) !important; }
|
|
513
513
|
.vs-m .vs-r.rn { gap: 6px; padding: 4px 6px; }
|
|
514
|
-
.vs-m .vs-r.rn input { flex: 1; min-width: 0; height: 36px; border-radius: 10px; border: 1px solid var(--cz-hair); padding: 0 10px; font: inherit; font-size: var(--fs-
|
|
514
|
+
.vs-m .vs-r.rn input { flex: 1; min-width: 0; height: 36px; border-radius: 10px; border: 1px solid var(--cz-hair); padding: 0 10px; font: inherit; font-size: var(--fs-body); background: var(--cz-card); color: var(--cz-ink); line-height: var(--lh-body); }
|
|
515
515
|
.vs-cf { padding: 14px 14px 10px !important; width: 340px; max-width: calc(100vw - 16px); gap: 10px; }
|
|
516
|
-
.vs-cf .l1 { font-size: var(--fs-
|
|
517
|
-
.vs-cf .lst { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-
|
|
518
|
-
.vs-cf .lst b { color: var(--cz-ink); font-weight:
|
|
516
|
+
.vs-cf .l1 { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
|
|
517
|
+
.vs-cf .lst { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
|
|
518
|
+
.vs-cf .lst b { color: var(--cz-ink); font-weight: var(--fw-strong); }
|
|
519
519
|
.vs-cf .lst .q { color: var(--cz-ink3); }
|
|
520
520
|
.vs-cf .lst .w { color: var(--cz-late); }
|
|
521
521
|
.vs-cf .ft { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
|
|
@@ -538,7 +538,7 @@ span.iv-dc.ms { display: inline-flex; border-radius: 999px; }
|
|
|
538
538
|
/* Links between tasks (feedback batch 11 item 15; canvas In development, row "Task dependencies"): pm/ini-links.js. Lines are hidden until a
|
|
539
539
|
task is under the pointer or pressed; a 6px grey dot marks a linked end. Grey, dark when selected, orange when late or broken, dashed blue
|
|
540
540
|
for Claude's proposals. */
|
|
541
|
-
.lk-chip { display: inline-flex !important; align-items: center; gap: 4px; height: 26px; padding: 0 9px 0 7px !important; border-radius: 999px !important; font-size: var(--fs-
|
|
541
|
+
.lk-chip { display: inline-flex !important; align-items: center; gap: 4px; height: 26px; padding: 0 9px 0 7px !important; border-radius: 999px !important; font-size: var(--fs-label); font-weight: var(--fw-strong); flex: none; position: relative; line-height: var(--lh-label); }
|
|
542
542
|
.lk-chip.pr { background: var(--cz-bluebg) !important; color: var(--cz-blueink) !important; }
|
|
543
543
|
.lk-chip.mv { background: var(--cz-well) !important; color: var(--cz-ink2) !important; }
|
|
544
544
|
.lk-chip.lt { background: var(--cz-latebg) !important; color: var(--cz-late) !important; }
|
|
@@ -572,20 +572,20 @@ span.iv-dc.ms { display: inline-flex; border-radius: 999px; }
|
|
|
572
572
|
.lk-jt::before { content: ""; position: absolute; inset: -8px; }
|
|
573
573
|
.lk-jt.or { border-color: var(--cz-late) !important; }
|
|
574
574
|
.lk-jt:hover, .lk-jt:focus-visible { transform: scale(1.25); }
|
|
575
|
-
.lk-bang { position: absolute; left: var(--tl-lk-x); top: var(--tl-lk-y); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--cz-late); color: var(--cz-card); font-size:
|
|
576
|
-
.lk-tip { position: absolute; left: var(--tl-lk-x); top: var(--tl-lk-y); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; background: var(--cz-solid); color: var(--cz-onsolid); font-size: var(--fs-
|
|
577
|
-
.lk-tip b { font-weight:
|
|
575
|
+
.lk-bang { position: absolute; left: var(--tl-lk-x); top: var(--tl-lk-y); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--cz-late); color: var(--cz-card); font-size: var(--fs-badge); font-weight: var(--fw-strong); display: inline-flex; align-items: center; justify-content: center; z-index: 2; pointer-events: none; line-height: var(--lh-badge); }
|
|
576
|
+
.lk-tip { position: absolute; left: var(--tl-lk-x); top: var(--tl-lk-y); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; background: var(--cz-solid); color: var(--cz-onsolid); font-size: var(--fs-label); font-weight: var(--fw-strong); padding: 4px 9px; border-radius: 8px; white-space: nowrap; pointer-events: none; z-index: 5; line-height: var(--lh-label); }
|
|
577
|
+
.lk-tip b { font-weight: var(--fw-strong); }
|
|
578
578
|
/* the List's and Kanban's meta: the link icon and the first task this one waits on, then +N */
|
|
579
|
-
.lk-mt { display: inline-flex !important; align-items: center; gap: 4px; flex: none; height: auto !important; min-height: 0 !important; font-size: var(--fs-
|
|
579
|
+
.lk-mt { display: inline-flex !important; align-items: center; gap: 4px; flex: none; height: auto !important; min-height: 0 !important; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3) !important; white-space: nowrap; padding: 0 !important; background: none !important; vertical-align: -2px; line-height: var(--lh-label); }
|
|
580
580
|
.ivk-m:has(.lk-mt) { flex-wrap: wrap; }
|
|
581
581
|
.lk-mt svg { flex: none; }
|
|
582
|
-
.lk-mt b { font-weight:
|
|
582
|
+
.lk-mt b { font-weight: var(--fw-strong); color: var(--cz-ink2); }
|
|
583
583
|
.lk-mt.w, .lk-mt.w b { color: var(--cz-late) !important; }
|
|
584
584
|
button.lk-mt:hover { color: var(--cz-ink) !important; }
|
|
585
585
|
/* the popovers: Claude's proposals, kept in line, the joint, Waits on / Then */
|
|
586
586
|
.tkc.ivq.vs-pop .lk-m { width: 380px; max-width: calc(100vw - 16px); max-height: min(70vh, 560px); overflow-y: auto; }
|
|
587
587
|
.lk-mh { display: flex; align-items: center; gap: 8px; padding: 6px 6px 8px 8px; color: var(--cz-ink2); }
|
|
588
|
-
.lk-mh b { flex: 1; min-width: 0; font-size: var(--fs-
|
|
588
|
+
.lk-mh b { flex: 1; min-width: 0; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-row); }
|
|
589
589
|
.lk-mh .vs-ok { width: 32px; height: 32px; }
|
|
590
590
|
.lk-pr { display: flex; align-items: center; gap: 8px; padding: 6px 4px 6px 8px; border-radius: 12px; }
|
|
591
591
|
.lk-pr:hover { background: var(--cz-well); }
|
|
@@ -594,47 +594,47 @@ button.lk-mt:hover { color: var(--cz-ink) !important; }
|
|
|
594
594
|
.lk-pr .ic.ms { background: var(--cz-latebg); color: var(--cz-late); }
|
|
595
595
|
.lk-pr .ic.jr { background: var(--cz-latebg); color: var(--cz-late); }
|
|
596
596
|
.lk-pr .w { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
|
|
597
|
-
.lk-pr .w b { font-size: var(--fs-
|
|
598
|
-
.lk-pr .w small { font-size:
|
|
597
|
+
.lk-pr .w b { font-size: var(--fs-row); font-weight: var(--fw-strong); display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; line-height: var(--lh-row); }
|
|
598
|
+
.lk-pr .w small { font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
|
|
599
599
|
.lk-pr .vs-ok { width: 32px; height: 32px; }
|
|
600
600
|
.lk-pr .vs-ti.ok { color: var(--cz-blueink) !important; }
|
|
601
601
|
.lk-m hr { border: 0; border-top: 1px solid var(--cz-hair); margin: 6px 0; }
|
|
602
|
-
.lk-m .h { display: block; font-size:
|
|
602
|
+
.lk-m .h { display: block; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px 4px; line-height: var(--lh-badge); }
|
|
603
603
|
.lk-ny { color: var(--cz-late) !important; }
|
|
604
604
|
.lk-q { display: flex !important; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 4px 8px !important; text-align: left; }
|
|
605
|
-
.lk-q .nn { flex: 1; display: flex; flex-direction: column; font-size: var(--fs-
|
|
606
|
-
.lk-q .nn small { font-size:
|
|
605
|
+
.lk-q .nn { flex: 1; display: flex; flex-direction: column; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: 1.3; }
|
|
606
|
+
.lk-q .nn small { font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
|
|
607
607
|
.lk-sw { width: 34px; height: 20px; border-radius: 999px; background: var(--cz-well2); position: relative; flex: none; }
|
|
608
608
|
.lk-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--cz-card); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
|
|
609
609
|
.lk-sw.on { background: var(--cz-blue); } .lk-sw.on::after { left: 16px; }
|
|
610
610
|
.lk-jc { padding: 8px !important; width: auto; max-width: calc(100vw - 16px); }
|
|
611
611
|
.lk-jr { display: flex; align-items: center; gap: 6px; }
|
|
612
612
|
.lk-jr .seg { display: inline-flex; gap: 2px; background: var(--cz-well); border-radius: 12px; padding: 2px; }
|
|
613
|
-
.lk-jr .seg button { height: 32px; min-width: 32px; padding: 0 7px !important; border-radius: 10px !important; display: inline-flex !important; align-items: center; gap: 6px; color: var(--cz-ink2) !important; font-size: var(--fs-
|
|
613
|
+
.lk-jr .seg button { height: 32px; min-width: 32px; padding: 0 7px !important; border-radius: 10px !important; display: inline-flex !important; align-items: center; gap: 6px; color: var(--cz-ink2) !important; font-size: var(--fs-label); font-weight: var(--fw-strong); white-space: nowrap; line-height: var(--lh-label); }
|
|
614
614
|
.lk-jr .seg button.on { background: var(--cz-card) !important; color: var(--cz-ink) !important; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
|
|
615
615
|
.lk-jr .vr { width: 1px; align-self: stretch; background: var(--cz-hair); margin: 4px 2px; }
|
|
616
616
|
.lk-lag { display: inline-flex; align-items: center; gap: 2px; }
|
|
617
|
-
.lk-lag b { min-width: 36px; text-align: center; font-size: var(--fs-
|
|
618
|
-
.lk-say { margin: 8px 4px 2px; font-size: var(--fs-
|
|
619
|
-
.lk-say b { color: var(--cz-ink); font-weight:
|
|
617
|
+
.lk-lag b { min-width: 36px; text-align: center; font-size: var(--fs-label); font-weight: var(--fw-strong); line-height: var(--lh-label); }
|
|
618
|
+
.lk-say { margin: 8px 4px 2px; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: 1.4; max-width: 420px; }
|
|
619
|
+
.lk-say b { color: var(--cz-ink); font-weight: var(--fw-strong); }
|
|
620
620
|
.lk-wt .o { display: flex !important; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 4px 8px !important; text-align: left; border-radius: 10px !important; }
|
|
621
621
|
.lk-wt .o:hover { background: var(--cz-well) !important; }
|
|
622
622
|
.lk-wt .ck { width: 22px; display: inline-flex; justify-content: center; color: var(--cz-ink2); flex: none; }
|
|
623
|
-
.lk-wt .nn { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--fs-
|
|
624
|
-
.lk-wt .nn small { font-size:
|
|
625
|
-
.lk-wt .k { font-size: var(--fs-
|
|
626
|
-
.lk-cm { font-size: var(--fs-
|
|
627
|
-
.lk-tile { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 4px; border-radius: 5px; background: var(--cz-well2); color: var(--cz-ink2); font-size:
|
|
628
|
-
.lk-st { display: block; font-size: var(--fs-
|
|
623
|
+
.lk-wt .nn { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: 1.3; }
|
|
624
|
+
.lk-wt .nn small { font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
|
|
625
|
+
.lk-wt .k { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
|
|
626
|
+
.lk-cm { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-late); background: var(--cz-latebg); border-radius: 999px; padding: 2px 8px; white-space: nowrap; line-height: var(--lh-label); }
|
|
627
|
+
.lk-tile { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 4px; border-radius: 5px; background: var(--cz-well2); color: var(--cz-ink2); font-size: var(--fs-badge); font-weight: var(--fw-strong); font-style: normal; margin-right: 6px; vertical-align: 1px; line-height: var(--lh-badge); }
|
|
628
|
+
.lk-st { display: block; font-size: var(--fs-row); font-weight: var(--fw-strong); padding: 4px 8px 6px; line-height: var(--lh-row); }
|
|
629
629
|
.lk-sr { display: flex; align-items: center; gap: 8px; margin: 4px 4px 2px; padding: 0 10px; height: 38px; border-radius: 10px; border: 1px solid var(--cz-hair); color: var(--cz-ink3); }
|
|
630
|
-
.lk-sr input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--fs-
|
|
631
|
-
.lk-none { margin: 6px 8px; font-size: var(--fs-
|
|
630
|
+
.lk-sr input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--fs-body); color: var(--cz-ink); line-height: var(--lh-body); }
|
|
631
|
+
.lk-none { margin: 6px 8px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
632
632
|
@container (max-width: 520px) { .lk-dt, .lk-jt { display: none; } }
|
|
633
633
|
.tkc.ivq.vs-pop.sheet .lk-m { width: 100%; box-sizing: border-box; }
|
|
634
634
|
/* Group by and Send to Jira in Tasks (feedback batch 11 item 20; canvas In development, row "Tasks takes over the old All tasks panel"): pm/ini-groups.js */
|
|
635
635
|
.iv-ib.ig-by.on { background: var(--cz-bluebg); color: var(--cz-blueink); }
|
|
636
636
|
/* the stage the stage card showed, while Tasks is grouped another way (batch 12 item 0): its name and a ✕ */
|
|
637
|
-
.iv-th .ig-only { display: inline-flex; align-items: center; gap: 4px; height: 28px; max-width: 160px; padding: 0 8px 0 10px; border: 0; border-radius: 999px; background: var(--cz-bluebg); color: var(--cz-blueink); font: inherit; font-size: var(--fs-
|
|
637
|
+
.iv-th .ig-only { display: inline-flex; align-items: center; gap: 4px; height: 28px; max-width: 160px; padding: 0 8px 0 10px; border: 0; border-radius: 999px; background: var(--cz-bluebg); color: var(--cz-blueink); font: inherit; font-size: var(--fs-meta); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 4px; line-height: var(--lh-meta); }
|
|
638
638
|
.iv-th .ig-only svg { flex: none; opacity: .75; }
|
|
639
639
|
.iv-th .ig-only:hover svg { opacity: 1; }
|
|
640
640
|
.iv-wsw, .ig-dz { position: relative; }
|
|
@@ -646,10 +646,10 @@ button.lk-mt:hover { color: var(--cz-ink) !important; }
|
|
|
646
646
|
.ig-dz.ig-over { background: var(--cz-bluebg); }
|
|
647
647
|
.iv-tr[data-ig-drag] { cursor: grab; }
|
|
648
648
|
.iv-tr.drag { opacity: .45; }
|
|
649
|
-
.ig-key { font-family: var(--cz-mono); font-size:
|
|
649
|
+
.ig-key { font-family: var(--cz-mono); font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); background: var(--cz-well); border-radius: 6px; padding: 2px 6px; white-space: nowrap; line-height: var(--lh-badge); }
|
|
650
650
|
.ig-tk { text-align: left; }
|
|
651
651
|
/* a ticket's own key is grey mono; a task linked to a ticket keeps its key blue, as the List draws it (em.lk) */
|
|
652
|
-
.ig-tk .iv-tt em:not(.lk), .ivt-n .iv-tt em:not(.lk), .ivk-d .iv-tt em:not(.lk) { font-style: normal; font-family: var(--cz-mono); font-size: var(--fs-
|
|
652
|
+
.ig-tk .iv-tt em:not(.lk), .ivt-n .iv-tt em:not(.lk), .ivk-d .iv-tt em:not(.lk) { font-style: normal; font-family: var(--cz-mono); font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
653
653
|
.ig-tkd { width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--cz-ink3); margin-top: 1px; }
|
|
654
654
|
.ig-sq { width: 12px; height: 12px; border-radius: 3px; flex: none; margin: 4px 3px 0; background: var(--cz-ink3); }
|
|
655
655
|
.ig-sq.doing { background: var(--cz-blue); }
|
|
@@ -659,18 +659,18 @@ button.lk-mt:hover { color: var(--cz-ink) !important; }
|
|
|
659
659
|
.ig-sum { margin-top: 2px; }
|
|
660
660
|
.ig-sf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
|
661
661
|
.ig-sf .iv-meta { flex: 1; }
|
|
662
|
-
.ig-sb { display: inline-flex !important; align-items: center; gap: 8px; height: 36px; padding: 0 16px 0 12px !important; border-radius: 999px !important; background: var(--cz-solid) !important; color: var(--cz-onsolid) !important; font-size: var(--fs-
|
|
662
|
+
.ig-sb { display: inline-flex !important; align-items: center; gap: 8px; height: 36px; padding: 0 16px 0 12px !important; border-radius: 999px !important; background: var(--cz-solid) !important; color: var(--cz-onsolid) !important; font-size: var(--fs-row); font-weight: var(--fw-strong); flex: none; line-height: var(--lh-row); }
|
|
663
663
|
.ig-emp { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 6px 0 4px; }
|
|
664
664
|
.tkc.ivq .ig-m { min-width: 240px; max-width: calc(100vw - 16px); }
|
|
665
665
|
.tkc.ivq.vs-pop.sheet .ig-m { width: 100%; max-width: none; box-sizing: border-box; }
|
|
666
|
-
.ig-m .ig-h { margin: 0; padding: 8px 12px 4px; font-size:
|
|
666
|
+
.ig-m .ig-h { margin: 0; padding: 8px 12px 4px; font-size: var(--fs-badge); font-weight: var(--fw-strong); letter-spacing: .02em; color: var(--cz-ink3); line-height: var(--lh-badge); }
|
|
667
667
|
.ig-m .ig-hr { height: 1px; background: var(--cz-hair); margin: 4px 8px; }
|
|
668
668
|
.ig-m .o { min-height: 40px; }
|
|
669
669
|
.ig-m .ck { width: 16px; display: inline-flex; color: var(--cz-blueink); }
|
|
670
|
-
.ig-m .k { margin-left: auto; color: var(--cz-ink3); font-size: var(--fs-
|
|
670
|
+
.ig-m .k { margin-left: auto; color: var(--cz-ink3); font-size: var(--fs-label); font-weight: var(--fw-strong); padding-left: 14px; line-height: var(--lh-label); }
|
|
671
671
|
.ig-ask { padding: 4px 6px 8px; }
|
|
672
672
|
.ig-ask .ig-ar { display: flex; align-items: center; gap: 6px; padding: 0 6px; }
|
|
673
|
-
.ig-ask input { flex: 1; min-width: 0; height: 36px; border-radius: 10px; border: 1px solid var(--cz-hair); padding: 0 10px; font: inherit; font-size: var(--fs-
|
|
673
|
+
.ig-ask input { flex: 1; min-width: 0; height: 36px; border-radius: 10px; border: 1px solid var(--cz-hair); padding: 0 10px; font: inherit; font-size: var(--fs-body); background: var(--cz-card); color: var(--cz-ink); line-height: var(--lh-body); }
|
|
674
674
|
/* a narrow header (the phone, a narrow Viewer): the view in use stands for the switch; its press opens the three (XtaA5Phone) */
|
|
675
675
|
@media (max-width: 520px) {
|
|
676
676
|
.iv-th .ivx-seg .ivx-sb[aria-pressed="false"] { display: none !important; }
|
|
@@ -685,10 +685,10 @@ button.lk-mt:hover { color: var(--cz-ink) !important; }
|
|
|
685
685
|
.pp-p + .pp-p { border-top: 1px solid var(--cz-hair); }
|
|
686
686
|
.pp-ph1 { display: flex; align-items: flex-start; gap: 8px; padding: 6px 2px 6px 4px; }
|
|
687
687
|
.pp-ph1 .w, .pp-it .w { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
|
688
|
-
.pp-ph1 b { font-size: var(--fs-
|
|
689
|
-
.pp-ph1 small, .pp-it small { font-size: var(--fs-
|
|
688
|
+
.pp-ph1 b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
|
|
689
|
+
.pp-ph1 small, .pp-it small { font-size: var(--fs-meta); color: var(--cz-ink2); line-height: 1.4; }
|
|
690
690
|
.pp-ph1 .pp-src { color: var(--cz-ink3); }
|
|
691
|
-
.pp-ph1 .pp-src em { font-style: normal; font-weight:
|
|
691
|
+
.pp-ph1 .pp-src em { font-style: normal; font-weight: var(--fw-strong); color: var(--cz-risk); }
|
|
692
692
|
.pp-ic { width: 28px; height: 28px; border-radius: 9px; background: var(--cz-bluebg); color: var(--cz-blueink); display: inline-flex; align-items: center; justify-content: center; flex: none; }
|
|
693
693
|
.pp-p.chk .pp-ic { background: var(--cz-well); color: var(--cz-ink2); }
|
|
694
694
|
.pp .pp-ib { width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--cz-ink2); flex: none; }
|
|
@@ -697,40 +697,40 @@ button.lk-mt:hover { color: var(--cz-ink) !important; }
|
|
|
697
697
|
.pp .pp-ib:focus-visible, .pp-seg button:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 1px; }
|
|
698
698
|
.pp-its { display: flex; flex-direction: column; gap: 2px; margin: 0 0 4px 40px; }
|
|
699
699
|
.pp-it { display: flex; align-items: center; gap: 8px; padding: 4px 0 4px 8px; border-left: 2px solid var(--cz-hair); }
|
|
700
|
-
.pp-it b { font-size: var(--fs-
|
|
700
|
+
.pp-it b { font-size: var(--fs-row); font-weight: var(--fw-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--lh-row); }
|
|
701
701
|
.pp-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--cz-well); flex: none; }
|
|
702
702
|
.pp-seg button { position: relative; width: 30px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--cz-ink3); }
|
|
703
703
|
.pp-seg button[aria-pressed="true"] { background: var(--cz-card); color: var(--cz-ink); box-shadow: var(--cz-vlift); }
|
|
704
704
|
.pp-seg button i { position: absolute; top: -2px; right: -1px; color: var(--cz-blue); line-height: 0; }
|
|
705
705
|
.pp-look { border-radius: 14px; background: var(--cz-bluebg); color: var(--cz-blueink); padding: 6px 6px 10px 12px; }
|
|
706
706
|
.pp-lh { display: flex; align-items: center; gap: 8px; }
|
|
707
|
-
.pp-lh b { flex: 1; font-size: var(--fs-
|
|
707
|
+
.pp-lh b { flex: 1; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
|
|
708
708
|
.pp-look ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
|
|
709
|
-
.pp-look li { display: flex; gap: 8px; font-size: var(--fs-
|
|
710
|
-
.pp-look li b { min-width: 84px; font-weight:
|
|
709
|
+
.pp-look li { display: flex; gap: 8px; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
|
|
710
|
+
.pp-look li b { min-width: 84px; font-weight: var(--fw-strong); color: var(--cz-ink); }
|
|
711
711
|
.pp-look li.on span { color: var(--cz-blueink); }
|
|
712
|
-
.pp-look p { margin: 4px 0 0; font-size: var(--fs-
|
|
713
|
-
.pp-none { margin: 8px 0; font-size: var(--fs-
|
|
712
|
+
.pp-look p { margin: 4px 0 0; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
713
|
+
.pp-none { margin: 8px 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
714
714
|
.pp-ph { border: 1.5px dashed var(--cz-hair); border-radius: 14px; padding: 14px 16px; }
|
|
715
|
-
.pp-ph p { margin: 0; font-size: var(--fs-
|
|
715
|
+
.pp-ph p { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
|
|
716
716
|
/* the documents a ✓ kept from elsewhere, inline under Documents */
|
|
717
717
|
.iv-fds { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
|
|
718
718
|
.iv-fd { display: flex !important; flex-direction: column; gap: 1px; padding: 6px 8px !important; border-radius: 10px !important; color: var(--cz-ink); text-decoration: none; }
|
|
719
719
|
.iv-fd:hover { background: var(--cz-well) !important; }
|
|
720
|
-
.iv-fd b { font-size: var(--fs-
|
|
721
|
-
.iv-fd small { font-size: var(--fs-
|
|
720
|
+
.iv-fd b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
|
|
721
|
+
.iv-fd small { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
722
722
|
/* Claude grilled it (canvas GrillResult): the angle's mark, the next step, the Simulated tag; the angles and the run said once above */
|
|
723
723
|
.pp-ic.gr { background: var(--cz-bluebg); color: var(--cz-blueink); }
|
|
724
724
|
.pp-ph1 .pp-next { color: var(--cz-ink); }
|
|
725
725
|
.pp-ph1 .pp-next b { font-size: inherit; }
|
|
726
|
-
.pp-ph1 .pp-src em.pp-ang, .pp-ghd .pp-ang { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-right: 4px; border-radius: 10px; background: var(--cz-well); color: var(--cz-ink2); font-style: normal; font-weight:
|
|
727
|
-
.pp-ph1 .pp-src em.pp-sim { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-right: 4px; border-radius: 10px; background: var(--cz-riskbg); color: var(--cz-risk); font-style: normal; font-weight:
|
|
728
|
-
.pp-ghd { margin: 2px 4px 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--fs-
|
|
726
|
+
.pp-ph1 .pp-src em.pp-ang, .pp-ghd .pp-ang { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-right: 4px; border-radius: 10px; background: var(--cz-well); color: var(--cz-ink2); font-style: normal; font-weight: var(--fw-strong); font-size: var(--fs-badge); line-height: var(--lh-badge); }
|
|
727
|
+
.pp-ph1 .pp-src em.pp-sim { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-right: 4px; border-radius: 10px; background: var(--cz-riskbg); color: var(--cz-risk); font-style: normal; font-weight: var(--fw-strong); font-size: var(--fs-badge); line-height: var(--lh-badge); }
|
|
728
|
+
.pp-ghd { margin: 2px 4px 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
729
729
|
.pp-ghd span { flex: 1 1 220px; }
|
|
730
730
|
.pp-gacts { display: inline-flex; gap: 2px; flex: none; }
|
|
731
|
-
.pp-ned input { width: 100%; box-sizing: border-box; min-height: 36px; margin-top: 2px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: inherit; font-size: var(--fs-
|
|
731
|
+
.pp-ned input { width: 100%; box-sizing: border-box; min-height: 36px; margin-top: 2px; padding: 6px 10px; 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); }
|
|
732
732
|
.pp-ned input:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 1px; }
|
|
733
|
-
.pp-gmore { display: flex; align-items: center; gap: 8px; padding: 6px 2px 2px 40px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-
|
|
733
|
+
.pp-gmore { display: flex; align-items: center; gap: 8px; padding: 6px 2px 2px 40px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
|
|
734
734
|
.pp-gmore span { flex: 1; }
|
|
735
735
|
.pp-gsw { display: none; }
|
|
736
736
|
@media (max-width: 760px) { .pp .pp-ib { width: 40px; height: 40px; } .pp-its { margin-left: 12px; } }
|
|
@@ -742,21 +742,21 @@ button.lk-mt:hover { color: var(--cz-ink) !important; }
|
|
|
742
742
|
.pp-p.gr .pp-ph1 { flex-wrap: wrap; }
|
|
743
743
|
.pp-p.gr .pp-gacts { width: 100%; justify-content: flex-end; }
|
|
744
744
|
.pp-p.gr .pp-gacts .pp-ib { width: 44px; height: 44px; }
|
|
745
|
-
.pp-gsw { display: block; margin: 4px 4px 0; font-size: var(--fs-
|
|
745
|
+
.pp-gsw { display: block; margin: 4px 4px 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
746
746
|
}
|
|
747
747
|
|
|
748
748
|
|
|
749
749
|
/* what left the ⋯ for the thing it changes (batch 16 item 5c, canvas FmI2Stage): the stage chip, the dates chip, the dashed + after the
|
|
750
750
|
* people, the ↻ beside Jira's freshness in Linked */
|
|
751
|
-
.iv-stc, .iv-dtc { display: inline-flex !important; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px !important; border-radius: 12px !important; font-size: var(--fs-
|
|
751
|
+
.iv-stc, .iv-dtc { display: inline-flex !important; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px !important; border-radius: 12px !important; font-size: var(--fs-label); font-weight: var(--fw-strong); min-width: 0; line-height: var(--lh-label); }
|
|
752
752
|
.iv-stc { background: var(--cz-bluebg) !important; color: var(--cz-blueink) !important; }
|
|
753
|
-
.iv-stc b { font-size: var(--fs-
|
|
753
|
+
.iv-stc b { font-size: var(--fs-row); font-weight: var(--fw-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--lh-row); }
|
|
754
754
|
.iv-stc:hover { filter: brightness(.97); }
|
|
755
755
|
.iv-dtc { background: var(--cz-well) !important; color: var(--cz-ink2) !important; white-space: nowrap; }
|
|
756
756
|
.iv-dtc:hover { background: var(--cz-well2) !important; color: var(--cz-ink) !important; }
|
|
757
757
|
.iv-addp { width: 22px !important; height: 22px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--cz-ink3) 60%, var(--cz-card)) !important; color: var(--cz-ink3); display: inline-flex !important; align-items: center; justify-content: center; margin-left: 4px; flex: none; }
|
|
758
758
|
.iv-addp:hover { color: var(--cz-ink); border-color: var(--cz-ink3) !important; }
|
|
759
|
-
.iv-jfr { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-
|
|
759
|
+
.iv-jfr { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-meta); color: var(--cz-ink3); padding-left: 4px; line-height: var(--lh-meta); }
|
|
760
760
|
@media (max-width: 760px) {
|
|
761
761
|
.iv-sch > .iv-stc { flex: 0 1 auto; }
|
|
762
762
|
.iv-stc, .iv-dtc { min-height: 36px; }
|
|
@@ -769,31 +769,31 @@ button.lk-mt:hover { color: var(--cz-ink) !important; }
|
|
|
769
769
|
.tkc.ivq.vs-pop.sheet .ivs { width: 100%; padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); }
|
|
770
770
|
.ivs-grab { display: none; width: 40px; height: 5px; border-radius: 3px; background: var(--cz-well2); margin: 2px auto 8px; }
|
|
771
771
|
.tkc.ivq.vs-pop.sheet .ivs-grab { display: block; }
|
|
772
|
-
.ivs-h { margin: 10px 4px 6px; font-size: var(--fs-
|
|
772
|
+
.ivs-h { margin: 10px 4px 6px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
|
|
773
773
|
.ivs-h:first-of-type { margin-top: 2px; }
|
|
774
774
|
.ivs-seg { display: flex; gap: 2px; padding: 3px; border-radius: 14px; background: var(--cz-well); }
|
|
775
|
-
.ivs-seg button { flex: 1 1 0; min-width: 0; height: 40px; border: 0; border-radius: 11px; background: transparent; color: var(--cz-ink2); font: inherit; font-size: var(--fs-
|
|
775
|
+
.ivs-seg button { flex: 1 1 0; min-width: 0; height: 40px; border: 0; border-radius: 11px; background: transparent; color: var(--cz-ink2); font: inherit; font-size: var(--fs-row); font-weight: var(--fw-strong); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; line-height: var(--lh-row); }
|
|
776
776
|
.ivs-seg button.mo { flex: 0 0 44px; }
|
|
777
777
|
.ivs-seg button.mo.on { flex: 0 1 auto; padding: 0 12px; }
|
|
778
778
|
.ivs-seg button:hover { color: var(--cz-ink); }
|
|
779
779
|
.ivs-seg button.on { background: var(--cz-card); color: var(--cz-ink); box-shadow: 0 1px 3px rgba(42,46,53,.14); }
|
|
780
|
-
.ivs-note { margin: 10px 4px 0; font-size: var(--fs-
|
|
780
|
+
.ivs-note { margin: 10px 4px 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: 1.4; }
|
|
781
781
|
.ivk-pk { display: flex; margin: 0 0 10px; }
|
|
782
782
|
|
|
783
783
|
/* the tasks with no dates, one row at the foot (XvpA3bMonths) */
|
|
784
784
|
.ivt { position: relative; }
|
|
785
|
-
.ivt-nd { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 14px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-
|
|
785
|
+
.ivt-nd { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 14px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
|
|
786
786
|
.ivt-nd .w { display: inline-flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
|
|
787
787
|
.ivt-nd .w svg { color: var(--cz-ink3); flex: none; }
|
|
788
|
-
.ivt-set { min-height: 36px; padding: 0 10px !important; border-radius: 999px !important; color: var(--cz-blueink) !important; font-weight:
|
|
788
|
+
.ivt-set { min-height: 36px; padding: 0 10px !important; border-radius: 999px !important; color: var(--cz-blueink) !important; font-weight: var(--fw-strong); font-size: var(--fs-label); line-height: var(--lh-label); }
|
|
789
789
|
.ivt-set:hover { background: var(--cz-bluebg) !important; }
|
|
790
790
|
.ivt-ndl { border-top: 1px solid var(--cz-hair); padding: 2px 8px 6px 14px; }
|
|
791
791
|
/* an earlier start fades in at the left edge once the Timeline scrolls from its start */
|
|
792
792
|
.ivt-fade { position: absolute; left: var(--nw); top: 30px; bottom: 0; width: 24px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .2s; background: linear-gradient(90deg, var(--cz-card), transparent); }
|
|
793
793
|
.ivt.scl .ivt-fade { opacity: 1; }
|
|
794
794
|
.ivt:has(.ivt-nd) .ivt-fade { bottom: 45px; }
|
|
795
|
-
.ivt-wn { display: none; color: var(--cz-ink3); font-weight:
|
|
796
|
-
.ivt-wn b { color: var(--cz-late); font-weight:
|
|
795
|
+
.ivt-wn { display: none; color: var(--cz-ink3); font-weight: var(--fw-strong); font-size: var(--fs-label); white-space: nowrap; line-height: var(--lh-label); }
|
|
796
|
+
.ivt-wn b { color: var(--cz-late); font-weight: var(--fw-strong); }
|
|
797
797
|
@container (max-width: 520px) {
|
|
798
798
|
/* a phone: each title sits above its bar, from the bar's start; it sticks to the left edge once the start scrolls away */
|
|
799
799
|
/* --tl-n is a place on the whole track, not on the screen: the title is at most a screen wide, and starts no later than one screen
|
|
@@ -813,10 +813,10 @@ button.lk-mt:hover { color: var(--cz-ink) !important; }
|
|
|
813
813
|
.iva .iva-l { width: var(--lw); flex: none; min-width: 0; display: flex; align-items: center; gap: 8px; padding-right: 10px; box-sizing: border-box; text-align: left; }
|
|
814
814
|
.iva .iva-c { position: relative; flex: 1; min-width: 0; display: block; align-self: stretch; margin-right: 14px; }
|
|
815
815
|
.iva-ax { display: flex; height: 34px; background: var(--cz-well); }
|
|
816
|
-
.iva-ax .iva-c span { position: absolute; top: 9px; font-size:
|
|
817
|
-
.iva-ax .iva-c span.b { color: var(--cz-ink2); font-weight:
|
|
816
|
+
.iva-ax .iva-c span { position: absolute; top: 9px; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); white-space: nowrap; transform: translateX(-2px); line-height: var(--lh-badge); }
|
|
817
|
+
.iva-ax .iva-c span.b { color: var(--cz-ink2); font-weight: var(--fw-strong); }
|
|
818
818
|
.iva-ft { display: flex; height: 34px; position: relative; }
|
|
819
|
-
.iva-tc { position: absolute; top: 6px; transform: translateX(-50%); font-style: normal; font-size:
|
|
819
|
+
.iva-tc { position: absolute; top: 6px; transform: translateX(-50%); font-style: normal; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-card); background: var(--cz-blue); border-radius: 999px; padding: 2px 9px; white-space: nowrap; z-index: 3; line-height: var(--lh-badge); }
|
|
820
820
|
.iva-bd { position: relative; }
|
|
821
821
|
.iva-ly { position: absolute; top: 0; bottom: -10px; left: calc(var(--an) + var(--lw)); right: 14px; pointer-events: none; z-index: 2; }
|
|
822
822
|
.iva-ly i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--cz-hair); }
|
|
@@ -827,17 +827,17 @@ button.lk-mt:hover { color: var(--cz-ink) !important; }
|
|
|
827
827
|
.iva-r.g:disabled { cursor: default; opacity: 1; color: inherit; }
|
|
828
828
|
.iva-r.g.op { background: color-mix(in srgb, var(--cz-blue) 6%, var(--cz-card)) !important; }
|
|
829
829
|
.iva-r.k { background: color-mix(in srgb, var(--cz-blue) 3%, var(--cz-card)); }
|
|
830
|
-
.iva-r.g .iva-l b { font-size: var(--fs-
|
|
831
|
-
.iva-r.g.mut .iva-l b { color: var(--cz-ink3); font-weight:
|
|
832
|
-
.iva-r.g .iva-l small { font-size: var(--fs-
|
|
830
|
+
.iva-r.g .iva-l b { font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; line-height: var(--lh-row); }
|
|
831
|
+
.iva-r.g.mut .iva-l b { color: var(--cz-ink3); font-weight: var(--fw-strong); }
|
|
832
|
+
.iva-r.g .iva-l small { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); white-space: nowrap; flex: none; line-height: var(--lh-label); }
|
|
833
833
|
.iva-ch { margin-left: auto; color: var(--cz-ink3); display: inline-flex; flex: none; }
|
|
834
834
|
.iva-cv { display: none; }
|
|
835
835
|
.iva-r.k .iva-n { padding-left: 14px; }
|
|
836
836
|
.iva-r.k .iva-l { padding-left: 14px; }
|
|
837
|
-
.iva-r.k .iva-l .iv-tt { font-size: var(--fs-
|
|
837
|
+
.iva-r.k .iva-l .iv-tt { font-size: var(--fs-label); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; line-height: var(--lh-label); }
|
|
838
838
|
@container (min-width: 521px) { .iva-r.k .iva-l { padding-top: 7px; padding-bottom: 7px; } .iva-r.k .iva-l .iv-tt { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; line-height: 1.35; } } /* the full name, as in the Timeline (batch 25 item 4) */
|
|
839
|
-
.iva-r.x .iva-l .iv-tt { color: var(--cz-ink3); font-weight:
|
|
840
|
-
.iva-nt { font-size:
|
|
839
|
+
.iva-r.x .iva-l .iv-tt { color: var(--cz-ink3); font-weight: var(--fw-strong); }
|
|
840
|
+
.iva-nt { font-size: var(--fs-badge); font-weight: var(--fw-strong); white-space: nowrap; flex: none; line-height: var(--lh-badge); }
|
|
841
841
|
.iva-nt.lt { color: var(--cz-late); }
|
|
842
842
|
.iva-nt.you { color: var(--cz-blueink); }
|
|
843
843
|
.iva-mg { color: var(--cz-ink2); display: inline-flex; }
|
|
@@ -869,11 +869,11 @@ button.iva-tb:hover, button.iva-r.g:not(:disabled):hover { filter: brightness(.9
|
|
|
869
869
|
.iva .iva-l { padding: 0; }
|
|
870
870
|
.iva-ax .iva-c span.mo, .iva-ly i.mo { display: none; }
|
|
871
871
|
.iva-ax .iva-c span.qm { visibility: hidden; position: relative; }
|
|
872
|
-
.iva-ax .iva-c span.qm::after { content: attr(data-q); font-size:
|
|
872
|
+
.iva-ax .iva-c span.qm::after { content: attr(data-q); font-size: var(--fs-meta); visibility: visible; position: absolute; left: 0; top: 0; white-space: nowrap; line-height: var(--lh-meta); }
|
|
873
873
|
.iva-r.g:not(.nm) .iva-l { display: none; }
|
|
874
874
|
.iva-r.g.nm .iva-l, .iva-r.k .iva-l { position: absolute; top: 5px; width: auto; --at: max(0px, min((100% - var(--an) - 14px) * var(--tl-p, 0), 100% - var(--an) - 234px)); left: calc(var(--an) + var(--at)); max-width: calc(100% - var(--an) - var(--at) - 8px); padding: 0; z-index: 3; gap: 5px; }
|
|
875
875
|
.iva-r.g.nm .iva-l small, .iva-r.g.nm .iva-ch { display: none; }
|
|
876
|
-
.iva-r.g.nm .iva-l b { font-size: var(--fs-
|
|
876
|
+
.iva-r.g.nm .iva-l b { font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
877
877
|
.iva-r.g.nm .iva-b, .iva-r.g.nm .iva-md, .iva-r.k .iva-tb, .iva-r.k .iva-md, .iva-r.k .iva-late { top: 32px; }
|
|
878
878
|
.iva-r.k .iva-n, .iva-r.k .iva-l { padding-left: 0; }
|
|
879
879
|
.iva-r.k .iva-l { padding-left: 0; }
|
|
@@ -912,21 +912,21 @@ button.iva-tb:hover, button.iva-r.g:not(:disabled):hover { filter: brightness(.9
|
|
|
912
912
|
@keyframes iv-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
|
|
913
913
|
.iv-ask { display: flex; align-items: flex-start; gap: 12px; }
|
|
914
914
|
.iv-ask > .ad-svg, .iv-ask > .ad-dot { flex: none; margin-top: 2px; }
|
|
915
|
-
.iv-ask .iv-why { flex: 1; min-width: 0; font-weight:
|
|
916
|
-
.iv-ask.cl .iv-why { font-weight:
|
|
915
|
+
.iv-ask .iv-why { flex: 1; min-width: 0; font-weight: var(--fw-strong); font-size: var(--fs-row); line-height: 1.4; margin: 0; }
|
|
916
|
+
.iv-ask.cl .iv-why { font-weight: var(--fw-strong); font-size: var(--fs-row); color: var(--cz-ink2); align-self: center; line-height: var(--lh-row); }
|
|
917
917
|
.iv-ask .iv-go { width: 40px; height: 40px; }
|
|
918
|
-
.iv-cnt { min-width: 26px; height: 26px; margin-top: 7px; padding: 0 8px !important; border-radius: 999px !important; background: var(--cz-bluebg) !important; color: var(--cz-blueink) !important; font-size: var(--fs-
|
|
918
|
+
.iv-cnt { min-width: 26px; height: 26px; margin-top: 7px; padding: 0 8px !important; border-radius: 999px !important; background: var(--cz-bluebg) !important; color: var(--cz-blueink) !important; font-size: var(--fs-label); font-weight: var(--fw-strong); display: inline-flex !important; align-items: center; justify-content: center; flex: none; line-height: var(--lh-label); }
|
|
919
919
|
/* a real win: he stands in the strip with a soft green glow, his thanks and the one primary */
|
|
920
920
|
.iv-win { display: flex; align-items: flex-end; gap: 12px; position: relative; }
|
|
921
921
|
.iv-wfig { flex: none; position: relative; }
|
|
922
922
|
.iv-wfig::before { content: ''; position: absolute; inset: 20% -10% 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--cz-ok) 30%, transparent), transparent); }
|
|
923
923
|
.iv-wfig .ad-svg { position: relative; width: 96px; height: auto; }
|
|
924
924
|
.iv-wt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; padding-bottom: 8px; }
|
|
925
|
-
.iv-wt p { margin: 0; font-size: var(--fs-
|
|
926
|
-
.iv-wt .iv-scgo.on { height: 40px; padding: 0 14px 0 16px !important; font-size: var(--fs-
|
|
925
|
+
.iv-wt p { margin: 0; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: 1.45; align-self: stretch; }
|
|
926
|
+
.iv-wt .iv-scgo.on { height: 40px; padding: 0 14px 0 16px !important; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
|
|
927
927
|
/* an empty Tasks with Adler resting in it */
|
|
928
928
|
.iv-empty.ad { align-items: center; text-align: center; gap: 10px; }
|
|
929
|
-
.iv-empty.ad .iv-q { font-size: var(--fs-
|
|
929
|
+
.iv-empty.ad .iv-q { font-size: var(--fs-body); color: var(--cz-ink2); max-width: 320px; line-height: var(--lh-body); }
|
|
930
930
|
.iv-ea { display: flex; align-items: center; gap: 8px; }
|
|
931
931
|
|
|
932
932
|
/* the telemetry card: the sky is the card; the picture (SVG, drawn at the card's own pixels) fills it; the title and the readouts sit over it */
|
|
@@ -937,35 +937,35 @@ button.iva-tb:hover, button.iva-r.g:not(:disabled):hover { filter: brightness(.9
|
|
|
937
937
|
.iv-tel-ct > * { pointer-events: auto; }
|
|
938
938
|
.iv-tel-t { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
|
|
939
939
|
.iv-shn { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
|
|
940
|
-
.iv-shn b, .iv-stc b { font-size: var(--fs-
|
|
940
|
+
.iv-shn b, .iv-stc b { font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--lh-row); }
|
|
941
941
|
.iv-tel .iv-no { background: color-mix(in srgb, var(--cz-card) 70%, transparent); color: var(--cz-blueink); }
|
|
942
942
|
.iv-tel .iv-stc { background: transparent !important; color: var(--cz-ink) !important; padding: 0 !important; min-height: 26px; }
|
|
943
|
-
.iv-dtc { font-size: var(--fs-
|
|
943
|
+
.iv-dtc { font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: 1.3; white-space: nowrap; }
|
|
944
944
|
button.iv-dtc { min-height: 28px; background: transparent !important; padding: 0 !important; }
|
|
945
945
|
.iv-dtc.w { color: var(--cz-late) !important; }
|
|
946
|
-
.iv-setd { display: inline-flex !important; align-items: center; gap: 6px; min-height: 40px; font-size: var(--fs-
|
|
946
|
+
.iv-setd { display: inline-flex !important; align-items: center; gap: 6px; min-height: 40px; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-blueink) !important; line-height: var(--lh-row); }
|
|
947
947
|
.iv-ro { display: flex; align-items: flex-end; gap: 28px; padding-top: 2px; }
|
|
948
948
|
.iv-ro > div { display: flex; flex-direction: column; gap: 1px; }
|
|
949
|
-
.iv-ro small { font-size:
|
|
950
|
-
.iv-ro b { font-size: var(--fs-
|
|
951
|
-
.iv-ro b i { font-style: normal; font-size: var(--fs-
|
|
949
|
+
.iv-ro small { font-size: var(--fs-badge); font-weight: var(--fw-strong); letter-spacing: .02em; color: var(--cz-ink3); line-height: var(--lh-badge); }
|
|
950
|
+
.iv-ro b { font-size: var(--fs-display); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; color: var(--cz-ink); line-height: 1.15; }
|
|
951
|
+
.iv-ro b i { font-style: normal; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); margin-left: 3px; line-height: var(--lh-label); }
|
|
952
952
|
.iv-ro .hot b, .iv-ro .hot small { color: var(--cz-late); }
|
|
953
953
|
.iv-mctg { position: absolute; top: 10px; right: 10px; z-index: 4; width: 36px; height: 36px; border-radius: 50%; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; color: var(--cz-ink2); cursor: pointer;
|
|
954
954
|
background: color-mix(in srgb, var(--cz-card) 70%, transparent) !important; border: 1px solid color-mix(in srgb, var(--cz-card) 65%, transparent) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
|
|
955
955
|
.iv-mctg:hover { background: var(--cz-card) !important; }
|
|
956
956
|
.iv-mctg svg { transition: transform .15s; transform: rotate(180deg); }
|
|
957
957
|
.shut-mc .iv-mctg svg { transform: none; }
|
|
958
|
-
.iv-mi-tip { position: absolute; top: 6px; transform: translateX(-14px); background: var(--cz-ink); color: var(--cz-card); font-size: var(--fs-
|
|
958
|
+
.iv-mi-tip { position: absolute; top: 6px; transform: translateX(-14px); background: var(--cz-ink); color: var(--cz-card); font-size: var(--fs-meta); padding: 6px 10px; border-radius: 10px; white-space: nowrap; display: flex; flex-direction: column; gap: 1px; box-shadow: var(--cz-vlift); pointer-events: none; z-index: 5; line-height: var(--lh-meta); }
|
|
959
959
|
.iv-mi-tip.r { transform: translateX(calc(-100% + 14px)); }
|
|
960
960
|
.iv-mi-tip[hidden] { display: none; }
|
|
961
|
-
.iv-mi-tip b { font-weight:
|
|
962
|
-
.iv-mi-tip i { font-style: normal; font-weight:
|
|
961
|
+
.iv-mi-tip b { font-weight: var(--fw-strong); }
|
|
962
|
+
.iv-mi-tip i { font-style: normal; font-weight: var(--fw-strong); opacity: .75; }
|
|
963
963
|
/* hidden: the telemetry folds into one banner, the way to finish and About go; the banner keeps the next move */
|
|
964
964
|
.iv-bn { display: none; position: relative; z-index: 2; align-items: center; gap: 10px 12px; padding: 12px 58px 12px 16px; min-height: 64px; flex-wrap: wrap; }
|
|
965
965
|
.iv-bt { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
|
|
966
|
-
.iv-bt .s { font-size: var(--fs-
|
|
966
|
+
.iv-bt .s { font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); line-height: var(--lh-label); }
|
|
967
967
|
.iv-chips { display: flex; gap: 8px; flex-wrap: wrap; }
|
|
968
|
-
.iv-chp2 { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--cz-card) 72%, transparent); font-size: var(--fs-
|
|
968
|
+
.iv-chp2 { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--cz-card) 72%, transparent); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); white-space: nowrap; line-height: var(--lh-label); }
|
|
969
969
|
.iv-chp2.late { color: var(--cz-late); }
|
|
970
970
|
.iv-chp2.nx { color: var(--cz-blueink); }
|
|
971
971
|
.shut-mc .iv-tel { min-height: 0; }
|
|
@@ -984,40 +984,40 @@ button.iv-dtc { min-height: 28px; background: transparent !important; padding: 0
|
|
|
984
984
|
.iv-gx { background: var(--cz-card); border-radius: 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t c" "l l" "a a" "f f"; align-items: center; min-width: 0; align-content: start; }
|
|
985
985
|
.iv-gx-t { grid-area: t; display: flex !important; align-items: center; gap: 8px; padding: 14px 0 14px 16px !important; min-width: 0; font: inherit; color: inherit; cursor: pointer; }
|
|
986
986
|
.iv-gx-t .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
|
987
|
-
.iv-gx-t b { font-size: var(--fs-
|
|
988
|
-
.iv-gx-t .s { font-size: var(--fs-
|
|
987
|
+
.iv-gx-t b { font-size: var(--fs-row); font-weight: var(--fw-strong); white-space: nowrap; line-height: var(--lh-row); }
|
|
988
|
+
.iv-gx-t .s { font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--lh-label); }
|
|
989
989
|
.iv-gx-t .chev, .iv-ab-h .chev { color: var(--cz-ink3); flex: none; display: inline-flex; transition: transform .15s; }
|
|
990
990
|
.iv-gx.is-shut .chev, .shut-gx .iv-gx-t .chev, .shut-ab .iv-ab-h .chev { transform: rotate(-90deg); }
|
|
991
991
|
.iv-gx-c { grid-area: c; display: inline-flex; align-items: center; gap: 8px; padding-right: 16px; }
|
|
992
|
-
.iv-gx-c small { font-size: var(--fs-
|
|
992
|
+
.iv-gx-c small { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
|
|
993
993
|
.iv-gx-l { grid-area: l; border-top: 1px solid var(--cz-hair); display: flex; flex-direction: column; padding: 4px 8px 6px; }
|
|
994
994
|
.iv-gr { display: flex !important; align-items: center; gap: 12px; min-height: 48px; padding: 0 8px !important; border-radius: 12px !important; width: 100%; box-sizing: border-box; background: transparent; }
|
|
995
995
|
button.iv-gr { cursor: pointer; }
|
|
996
996
|
button.iv-gr:hover { background: var(--cz-well) !important; }
|
|
997
997
|
.iv-grk { width: 24px; height: 24px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--cz-bluebg); color: var(--cz-blueink); }
|
|
998
998
|
.iv-gr.late .iv-grk { background: var(--cz-latebg); color: var(--cz-late); }
|
|
999
|
-
.iv-grn { flex: 1; min-width: 0; font-size: var(--fs-
|
|
1000
|
-
.iv-gr .iv-av { width: 28px; height: 28px; font-size:
|
|
1001
|
-
.iv-grw { font-size: var(--fs-
|
|
999
|
+
.iv-grn { flex: 1; min-width: 0; font-size: var(--fs-row); font-weight: var(--fw-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--lh-row); }
|
|
1000
|
+
.iv-gr .iv-av { width: 28px; height: 28px; font-size: var(--fs-meta); background: var(--cz-well2); color: var(--cz-ink2); flex: none; line-height: var(--lh-meta); }
|
|
1001
|
+
.iv-grw { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-blueink); white-space: nowrap; line-height: var(--lh-label); }
|
|
1002
1002
|
.iv-gr.late .iv-grw { color: var(--cz-late); }
|
|
1003
|
-
.iv-gx-dn { margin: 0; padding: 8px 8px 4px; font-size: var(--fs-
|
|
1003
|
+
.iv-gx-dn { margin: 0; padding: 8px 8px 4px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
|
|
1004
1004
|
.iv-gx-a { grid-area: a; padding: 4px 12px 8px; display: flex; }
|
|
1005
1005
|
.iv-gx-a .iv-scgo { flex: 1; justify-content: center; height: 40px; }
|
|
1006
1006
|
.iv-gx-ft { grid-area: f; border-top: 1px solid var(--cz-hair); padding: 6px 8px; }
|
|
1007
1007
|
/* the meta line: 40 px presses on one line that never wraps; the program chip truncates first */
|
|
1008
1008
|
.iv-gx .iv-meta { flex-wrap: nowrap; gap: 4px; min-width: 0; margin: 0; }
|
|
1009
1009
|
.iv-mt { width: 40px; height: 40px; flex: none; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 999px !important; color: var(--cz-ink3); }
|
|
1010
|
-
.iv-mt .iv-av { width: 28px; height: 28px; font-size:
|
|
1010
|
+
.iv-mt .iv-av { width: 28px; height: 28px; font-size: var(--fs-meta); background: var(--cz-well2); color: var(--cz-ink2); line-height: var(--lh-meta); }
|
|
1011
1011
|
.iv-ring { color: var(--cz-ink3); }
|
|
1012
1012
|
.iv-ring svg { width: 30px; height: 30px; padding: 6px; box-sizing: border-box; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--cz-ink3) 60%, transparent); }
|
|
1013
1013
|
.iv-avs { width: auto; padding: 0 6px !important; }
|
|
1014
1014
|
.iv-avs .iv-av + .iv-av { margin-left: -8px; box-shadow: 0 0 0 2px var(--cz-card); }
|
|
1015
|
-
.iv-avn { min-width: 28px; height: 28px; margin-left: -8px; border-radius: 999px; background: var(--cz-well2); color: var(--cz-ink2); font-size:
|
|
1015
|
+
.iv-avn { min-width: 28px; height: 28px; margin-left: -8px; border-radius: 999px; background: var(--cz-well2); color: var(--cz-ink2); font-size: var(--fs-badge); font-weight: var(--fw-strong); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--cz-card); line-height: var(--lh-badge); }
|
|
1016
1016
|
.iv-mt.iv-addp { width: 40px !important; height: 40px; border: 0 !important; margin: 0; }
|
|
1017
1017
|
.iv-mt.iv-addp svg { width: 30px; height: 30px; padding: 7px; box-sizing: border-box; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--cz-ink3) 60%, transparent); }
|
|
1018
1018
|
button.iv-mt.iv-wf { padding: 0 !important; margin: 0 !important; }
|
|
1019
1019
|
.iv-mt .wfi { width: 17px; height: 17px; }
|
|
1020
|
-
.iv-gx .iv-prog { min-width: 0; height: 34px; display: inline-flex !important; align-items: center; gap: 6px; padding: 0 12px !important; margin: 0 0 0 4px !important; background: var(--cz-well) !important; color: var(--cz-ink2) !important; font-size: var(--fs-
|
|
1020
|
+
.iv-gx .iv-prog { min-width: 0; height: 34px; display: inline-flex !important; align-items: center; gap: 6px; padding: 0 12px !important; margin: 0 0 0 4px !important; background: var(--cz-well) !important; color: var(--cz-ink2) !important; font-size: var(--fs-label); font-weight: var(--fw-strong); line-height: var(--lh-label); }
|
|
1021
1021
|
.iv-gx .iv-prog span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
|
|
1022
1022
|
.iv-gx .iv-prog svg { flex: none; }
|
|
1023
1023
|
@media (hover: hover) { button.iv-mt:hover { background: var(--cz-well2) !important; color: var(--cz-ink); } }
|
|
@@ -1025,13 +1025,13 @@ button.iv-mt.iv-wf { padding: 0 !important; margin: 0 !important; }
|
|
|
1025
1025
|
/* About: the description and the success measure */
|
|
1026
1026
|
.iv-ab { background: var(--cz-card); border-radius: 18px; overflow: hidden; }
|
|
1027
1027
|
.iv-ab-h { display: flex !important; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 16px !important; font: inherit; color: inherit; cursor: pointer; }
|
|
1028
|
-
.iv-ab-h > b { font-size: var(--fs-
|
|
1028
|
+
.iv-ab-h > b { font-size: var(--fs-row); font-weight: var(--fw-strong); flex: none; line-height: var(--lh-row); }
|
|
1029
1029
|
.iv-ab-h .chev { margin-left: auto; }
|
|
1030
|
-
.ab-sum { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1; overflow: hidden; font-size: var(--fs-
|
|
1030
|
+
.ab-sum { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1; overflow: hidden; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
|
|
1031
1031
|
.ab-sum .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
|
|
1032
|
-
.ab-sum .vv { color: var(--cz-ink); font-weight:
|
|
1033
|
-
.ab-sum .nx { color: var(--cz-blueink); font-weight:
|
|
1034
|
-
.ab-sum .st { white-space: nowrap; font-weight:
|
|
1032
|
+
.ab-sum .vv { color: var(--cz-ink); font-weight: var(--fw-strong); white-space: nowrap; }
|
|
1033
|
+
.ab-sum .nx { color: var(--cz-blueink); font-weight: var(--fw-strong); white-space: nowrap; }
|
|
1034
|
+
.ab-sum .st { white-space: nowrap; font-weight: var(--fw-strong); }
|
|
1035
1035
|
.ab-sum .late, .ab-pl.behind, .ab-pl.stale, .ab-pl.short { color: var(--cz-late); }
|
|
1036
1036
|
.ab-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--cz-ink3); }
|
|
1037
1037
|
.ab-dot.behind, .ab-dot.stale, .ab-dot.short { background: var(--cz-late); }
|
|
@@ -1039,26 +1039,26 @@ button.iv-mt.iv-wf { padding: 0 !important; margin: 0 !important; }
|
|
|
1039
1039
|
.ab-dot.unread { background: transparent; border: 1.5px solid var(--cz-ink3); }
|
|
1040
1040
|
.iv-ab-b { border-top: 1px solid var(--cz-hair); display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 16px; }
|
|
1041
1041
|
@container iv (min-width: 760px) { .iv-ab-b { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 32px; } }
|
|
1042
|
-
.ab-d h4, .ab-m h4 { margin: 0 0 6px; font-size: var(--fs-
|
|
1043
|
-
.ab-d h4 span, .ab-m h4 span { font-weight:
|
|
1044
|
-
.ab-p { margin: 0; font-size: var(--fs-
|
|
1042
|
+
.ab-d h4, .ab-m h4 { margin: 0 0 6px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); letter-spacing: .02em; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; line-height: var(--lh-label); }
|
|
1043
|
+
.ab-d h4 span, .ab-m h4 span { font-weight: var(--fw-strong); }
|
|
1044
|
+
.ab-p { margin: 0; font-size: var(--fs-body); line-height: 1.55; max-width: 62ch; color: var(--cz-ink); }
|
|
1045
1045
|
.ab-p.q { color: var(--cz-ink3); }
|
|
1046
1046
|
.ab-p.cl { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
|
|
1047
|
-
.ab-lk { display: inline-flex !important; align-items: center; gap: 6px; font-size: var(--fs-
|
|
1047
|
+
.ab-lk { display: inline-flex !important; align-items: center; gap: 6px; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-blueink) !important; margin: 8px 14px 0 0; padding: 0 !important; text-decoration: none; cursor: pointer; line-height: var(--lh-row); }
|
|
1048
1048
|
.ab-ml { display: flex; flex-direction: column; gap: 14px; }
|
|
1049
1049
|
.ab-mr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
|
|
1050
|
-
.ab-mk { font-size:
|
|
1050
|
+
.ab-mk { font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); letter-spacing: .02em; line-height: var(--lh-badge); }
|
|
1051
1051
|
.ab-mn { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
|
|
1052
|
-
.ab-mn b { font-size: var(--fs-
|
|
1053
|
-
.ab-mn span { font-size: var(--fs-
|
|
1052
|
+
.ab-mn b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
|
|
1053
|
+
.ab-mn span { font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); line-height: var(--lh-label); }
|
|
1054
1054
|
.ab-trk { display: block; width: 100%; height: 6px; margin: 8px 0 2px; overflow: visible; }
|
|
1055
1055
|
.ab-trk .bg { fill: color-mix(in srgb, var(--cz-ink3) 20%, transparent); }
|
|
1056
1056
|
.ab-trk .fl { fill: var(--cz-blue); }
|
|
1057
1057
|
.ab-trk.behind .fl, .ab-trk.stale .fl, .ab-trk.short .fl { fill: var(--cz-late); }
|
|
1058
1058
|
.ab-trk.on .fl, .ab-trk.ahead .fl, .ab-trk.hit .fl { fill: var(--cz-ok); }
|
|
1059
1059
|
.ab-trk .pc { stroke: var(--cz-ink); stroke-width: 2; stroke-linecap: round; opacity: .75; }
|
|
1060
|
-
.ab-lb { display: flex; justify-content: space-between; font-size:
|
|
1061
|
-
.ab-pl { font-size: var(--fs-
|
|
1060
|
+
.ab-lb { display: flex; justify-content: space-between; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); font-variant-numeric: tabular-nums; line-height: var(--lh-badge); }
|
|
1061
|
+
.ab-pl { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
|
|
1062
1062
|
.ab-pl.on, .ab-pl.ahead, .ab-pl.hit { color: var(--cz-ok); }
|
|
1063
1063
|
/* a phone, or a narrow Viewer */
|
|
1064
1064
|
@container iv (max-width: 560px) {
|
|
@@ -1083,13 +1083,13 @@ button.iv-mt.iv-wf { padding: 0 !important; margin: 0 !important; }
|
|
|
1083
1083
|
.iv-mc .iv-tel-ct { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 12px; padding: 12px 56px 12px 16px; }
|
|
1084
1084
|
.iv-mc .iv-tel-t { display: contents; }
|
|
1085
1085
|
.iv-mc .iv-tel-ct .iv-shn { flex-basis: 100%; min-height: 36px; }
|
|
1086
|
-
.iv-tel .iv-dtc { min-height: 24px; font-size: var(--fs-
|
|
1086
|
+
.iv-tel .iv-dtc { min-height: 24px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
1087
1087
|
.iv-tel .iv-setd { min-height: 36px; }
|
|
1088
1088
|
.iv-ro { gap: 16px; padding-top: 0; }
|
|
1089
1089
|
.iv-ro > div { flex-direction: row; align-items: baseline; gap: 4px; }
|
|
1090
|
-
.iv-ro small { font-size: var(--fs-
|
|
1091
|
-
.iv-ro b { font-size: var(--fs-
|
|
1092
|
-
.iv-ro b i { font-size: var(--fs-
|
|
1090
|
+
.iv-ro small { font-size: var(--fs-label); font-weight: var(--fw-strong); letter-spacing: 0; line-height: var(--lh-label); }
|
|
1091
|
+
.iv-ro b { font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
1092
|
+
.iv-ro b i { font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
1093
1093
|
/* the readouts on the dates line say where today is; the art's own Today label would sit on them */
|
|
1094
1094
|
.iv-tel .mi-tx.now { display: none; }
|
|
1095
1095
|
/* the one card: the way to finish on top, About under it */
|
|
@@ -1100,7 +1100,7 @@ button.iv-mt.iv-wf { padding: 0 !important; margin: 0 !important; }
|
|
|
1100
1100
|
.iv-gx-t .chev { width: 16px; }
|
|
1101
1101
|
.iv-gx[data-ph] .iv-gx-t .tx.dk, .iv-gx[data-ph] .iv-gx-c { display: none; }
|
|
1102
1102
|
.iv-gx-t .tx.ph { display: flex; }
|
|
1103
|
-
.iv-gx-t .tx b { font-size: var(--fs-
|
|
1103
|
+
.iv-gx-t .tx b { font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-body); }
|
|
1104
1104
|
.iv-gx-c { grid-area: a; }
|
|
1105
1105
|
.iv-gx-a { padding: 0 8px 0 4px; }
|
|
1106
1106
|
.iv-gx[data-ph] .iv-gx-a .iv-scgo { flex: none; width: 40px; height: 40px; padding: 0 !important; justify-content: center !important; }
|
|
@@ -1116,7 +1116,7 @@ button.iv-mt.iv-wf { padding: 0 !important; margin: 0 !important; }
|
|
|
1116
1116
|
.iv-ws.in { padding-left: 12px !important; }
|
|
1117
1117
|
.iv-ws > .n { display: none; }
|
|
1118
1118
|
.iv-ws .n-in { display: inline; }
|
|
1119
|
-
.iv-ws .n-in.w { color: var(--cz-risk); font-weight:
|
|
1119
|
+
.iv-ws .n-in.w { color: var(--cz-risk); font-weight: var(--fw-strong); }
|
|
1120
1120
|
.iv-ws.pl > .iv-cv { margin-left: 40px; }
|
|
1121
1121
|
.iv-wbs > .iv-ws + .iv-ws::before, .iv-wbs > .iv-wl + .iv-ws::before, .iv-wl > .iv-ws + .iv-ws::before, .iv-wl > .iv-wl + .iv-ws::before, .iv-wbs > * + :is(.iv-wsw, .ig-dz)::before, .iv-wbs > :is(.iv-wsw, .ig-dz) + .iv-ws::before { left: 12px; }
|
|
1122
1122
|
.iv-wl { padding: 0 12px 6px 12px; }
|
|
@@ -1134,10 +1134,10 @@ html.ad-still .iv-mc-top.adl, html.ad-still .iv-mc-top.adl .iv-ask .ad-svg { ani
|
|
|
1134
1134
|
.mi-as0 { stop-color: var(--mi-dn); stop-opacity: .3; } .mi-as1 { stop-color: var(--mi-dn); stop-opacity: 0; }
|
|
1135
1135
|
.mi-mk0 { stop-color: var(--cz-ink); stop-opacity: 1; } .mi-mk1 { stop-color: var(--cz-ink); stop-opacity: 0; } .mi-mkf { fill: var(--cz-ink); }
|
|
1136
1136
|
.mi-star { fill: var(--mi-star); }
|
|
1137
|
-
.mi-qm { fill: var(--mi-qm); font-size: var(--fs-
|
|
1138
|
-
.mi-tx { font:
|
|
1137
|
+
.mi-qm { fill: var(--mi-qm); font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
|
|
1138
|
+
.mi-tx { font: var(--fw-strong) var(--fs-badge)/var(--lh-badge) var(--cz-sans); fill: var(--cz-ink3); letter-spacing: .02em; stroke: none; }
|
|
1139
1139
|
.mi-tx.now { fill: var(--cz-blueink); } .mi-tx.now.late { fill: var(--mi-late); }
|
|
1140
|
-
.mi-ct { font:
|
|
1140
|
+
.mi-ct { font: var(--fw-strong) var(--fs-badge)/var(--lh-badge) var(--cz-sans); fill: var(--cz-ink); stroke: none; }
|
|
1141
1141
|
.mi-bl { stroke: var(--cz-ink3); stroke-opacity: .3; }
|
|
1142
1142
|
.mi-fut path { fill: none; stroke: var(--cz-ink3); stroke-opacity: .55; stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
|
|
1143
1143
|
.mi-pt { fill: none; stroke-linecap: round; stroke-width: 4.5; }
|
|
@@ -1191,9 +1191,9 @@ html.ad-still .iv-mc-top.adl, html.ad-still .iv-mc-top.adl .iv-ask .ad-svg { ani
|
|
|
1191
1191
|
@media (prefers-reduced-motion: reduce) { .mi-svg * { animation: none !important; } }
|
|
1192
1192
|
html.ad-still .mi-svg * { animation: none !important; }
|
|
1193
1193
|
/* the date picker as a phone's bottom sheet (batch 18 item 16, StA3Dates, StA4Milestone): its title and ✕, the task's name under it */
|
|
1194
|
-
.tkc .tkc-dp .ivd-h { display: flex; align-items: center; gap: 8px; height: 40px; font-size: var(--fs-
|
|
1194
|
+
.tkc .tkc-dp .ivd-h { display: flex; align-items: center; gap: 8px; height: 40px; font-size: var(--fs-body); color: var(--cz-ink); line-height: var(--lh-body); }
|
|
1195
1195
|
.tkc .tkc-dp .ivd-h .iv-ib { margin-left: auto; }
|
|
1196
|
-
.tkc .tkc-dp .ivd-s { margin: 0 0 10px; font-size: var(--fs-
|
|
1196
|
+
.tkc .tkc-dp .ivd-s { margin: 0 0 10px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
|
|
1197
1197
|
.tkc.ivq.vs-pop.sheet .tkc-dp { width: 100%; }
|
|
1198
1198
|
/* a milestone on the Tasks Timeline (batch 18 item 16, StA9Timeline): its ◇ on its date and the date beside it, no bar */
|
|
1199
1199
|
.ivt-ms.lb { pointer-events: none; }
|
|
@@ -1209,10 +1209,10 @@ html.ad-still .mi-svg * { animation: none !important; }
|
|
|
1209
1209
|
.iv-tr.q .iv-bxw { align-self: flex-start; margin-top: 2px; }
|
|
1210
1210
|
.iv-tr.q > .w { flex-direction: row; align-items: flex-start; gap: 10px; min-width: 0; }
|
|
1211
1211
|
.iv-tr.q .iv-tn { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 6px; }
|
|
1212
|
-
.iv-tr.q .iv-tt { display: block !important; flex: 0 1 auto; text-align: left; white-space: normal; overflow-wrap: anywhere; min-width: 0; font-weight:
|
|
1212
|
+
.iv-tr.q .iv-tt { display: block !important; flex: 0 1 auto; text-align: left; white-space: normal; overflow-wrap: anywhere; min-width: 0; font-weight: var(--fw-strong); line-height: 22px; }
|
|
1213
1213
|
.iv-tr.q .iv-tn > :not(.iv-tt) { margin-top: 4px; }
|
|
1214
1214
|
.iv-tr.q .iv-rm { flex: none; display: inline-flex; align-items: center; gap: 0; min-height: 22px; max-width: 40%; white-space: nowrap; }
|
|
1215
|
-
.iv-pf { color: var(--cz-ink3); font-weight:
|
|
1215
|
+
.iv-pf { color: var(--cz-ink3); font-weight: var(--fw-strong); }
|
|
1216
1216
|
@container iv (max-width: 520px) {
|
|
1217
1217
|
.iv-tr.q > .w { flex-direction: column; gap: 0; }
|
|
1218
1218
|
.iv-tr.q .iv-rm { max-width: 100%; flex-wrap: wrap; white-space: normal; }
|
|
@@ -1238,20 +1238,20 @@ html.ad-still .mi-svg * { animation: none !important; }
|
|
|
1238
1238
|
.iv-tr.iv-ed + .iv-tr { border-top: 0 !important; }
|
|
1239
1239
|
.iv-tr.iv-ed > .w { gap: 8px; }
|
|
1240
1240
|
.iv-edf { display: flex; }
|
|
1241
|
-
.iv-edn { flex: 1; min-width: 0; height: 40px; border-radius: 12px; border: 1.5px solid var(--cz-blue); background: var(--cz-card); color: var(--cz-ink); padding: 0 12px; font: inherit; font-size: var(--fs-
|
|
1241
|
+
.iv-edn { flex: 1; min-width: 0; height: 40px; border-radius: 12px; border: 1.5px solid var(--cz-blue); background: var(--cz-card); color: var(--cz-ink); padding: 0 12px; font: inherit; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
1242
1242
|
.iv-edn:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cz-blue) 22%, transparent); }
|
|
1243
|
-
.iv-ed.jr .iv-tt { white-space: normal; font-weight:
|
|
1244
|
-
.iv-edj { margin: 0; font-size: var(--fs-
|
|
1245
|
-
.iv-edj span { color: var(--cz-ink3); font-weight:
|
|
1243
|
+
.iv-ed.jr .iv-tt { white-space: normal; font-weight: var(--fw-strong); }
|
|
1244
|
+
.iv-edj { margin: 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
|
|
1245
|
+
.iv-edj span { color: var(--cz-ink3); font-weight: var(--fw-strong); }
|
|
1246
1246
|
.iv-edl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
|
|
1247
|
-
.iv .iv-edc { height: 34px; padding: 0 12px !important; border-radius: 999px !important; background: var(--cz-card) !important; display: inline-flex !important; align-items: center; gap: 6px; color: var(--cz-ink) !important; font-size: var(--fs-
|
|
1248
|
-
.iv .iv-edc small { color: var(--cz-ink3); font-weight:
|
|
1249
|
-
.iv .iv-edc b { font-weight:
|
|
1247
|
+
.iv .iv-edc { height: 34px; padding: 0 12px !important; border-radius: 999px !important; background: var(--cz-card) !important; display: inline-flex !important; align-items: center; gap: 6px; color: var(--cz-ink) !important; font-size: var(--fs-meta); box-shadow: 0 0 0 1px var(--cz-hair); white-space: nowrap; line-height: var(--lh-meta); }
|
|
1248
|
+
.iv .iv-edc small { color: var(--cz-ink3); font-weight: var(--fw-strong); font-size: var(--fs-badge); line-height: var(--lh-badge); }
|
|
1249
|
+
.iv .iv-edc b { font-weight: var(--fw-strong); }
|
|
1250
1250
|
.iv .iv-edc:hover, .iv .iv-edc[aria-expanded="true"] { box-shadow: 0 0 0 1.5px var(--cz-blue); }
|
|
1251
|
-
.iv .iv-edc.dash { background: transparent !important; box-shadow: none; border: 1.5px dashed color-mix(in srgb, var(--cz-ink3) 55%, var(--cz-card)) !important; color: var(--cz-ink2) !important; font-weight:
|
|
1251
|
+
.iv .iv-edc.dash { background: transparent !important; box-shadow: none; border: 1.5px dashed color-mix(in srgb, var(--cz-ink3) 55%, var(--cz-card)) !important; color: var(--cz-ink2) !important; font-weight: var(--fw-strong); }
|
|
1252
1252
|
.iv .iv-edc.ms[aria-expanded="true"], .iv .iv-edc.ms:not(.dash) { box-shadow: 0 0 0 1.5px var(--cz-blue); }
|
|
1253
1253
|
.iv .iv-edst { padding: 0 8px 0 10px !important; gap: 2px; color: var(--cz-ink2) !important; }
|
|
1254
|
-
.iv-eds { color: var(--cz-ink3); font-weight:
|
|
1254
|
+
.iv-eds { color: var(--cz-ink3); font-weight: var(--fw-strong); }
|
|
1255
1255
|
/* a phone keeps the line on one row: the chips drop their Start / Due words (the order says it; the names stay in aria-label) */
|
|
1256
1256
|
@media (max-width: 760px) {
|
|
1257
1257
|
.iv-edl { gap: 4px; flex-wrap: nowrap; }
|
|
@@ -1272,28 +1272,28 @@ html.ad-still .mi-svg * { animation: none !important; }
|
|
|
1272
1272
|
/* the add field's chips (batch 25 item 5, canvas TaskAddChips): Stage (picked, blue), Type, Dates, Owner; a milestone's box is ◇ */
|
|
1273
1273
|
.iv .iv-adc { gap: 5px; }
|
|
1274
1274
|
.iv .iv-adc.on { color: var(--cz-blueink) !important; box-shadow: 0 0 0 1.5px var(--cz-blue); }
|
|
1275
|
-
.iv .iv-adc.on b { font-weight:
|
|
1275
|
+
.iv .iv-adc.on b { font-weight: var(--fw-strong); max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
|
|
1276
1276
|
.iv .iv-adc.ms { color: var(--cz-blueink) !important; }
|
|
1277
|
-
.iv .iv-adc .iv-av { width: 20px; height: 20px; font-size:
|
|
1277
|
+
.iv .iv-adc .iv-av { width: 20px; height: 20px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
1278
1278
|
.iv-adms { width: 20px; height: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--cz-blue); }
|
|
1279
|
-
.tkc.ivq .ive-m .nn { width: 22px; height: 20px; border-radius: 7px; background: var(--cz-well); font-size:
|
|
1279
|
+
.tkc.ivq .ive-m .nn { width: 22px; height: 20px; border-radius: 7px; background: var(--cz-well); font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: var(--lh-badge); }
|
|
1280
1280
|
.tkc.ivq .ive-m .nn.ic { background: transparent; color: var(--cz-ink2); }
|
|
1281
1281
|
.tkc.ivq .ive-m .o.hl .nn:not(.ic) { background: var(--cz-bluebg); color: var(--cz-blueink); }
|
|
1282
|
-
.tkc.ivq .ive-m .iv-av { width: 22px; height: 22px; border-radius: 50%; background: var(--cz-well); color: var(--cz-ink2); font-size:
|
|
1282
|
+
.tkc.ivq .ive-m .iv-av { width: 22px; height: 22px; border-radius: 50%; background: var(--cz-well); color: var(--cz-ink2); font-size: var(--fs-badge); font-weight: var(--fw-strong); display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: var(--lh-badge); }
|
|
1283
1283
|
.tkc.ivq .ive-own { padding: 4px 6px 6px; }
|
|
1284
1284
|
/* the drag (StA10Drag): the row lifts and follows the pointer; its slot stays as a dashed ghost; the target stage lights up; a blue line marks the drop */
|
|
1285
1285
|
.iv-tr.iv-ghost { outline: 1.5px dashed color-mix(in srgb, var(--cz-ink3) 50%, var(--cz-card)); outline-offset: -2px; opacity: .55; }
|
|
1286
1286
|
.iv-fly { position: fixed; z-index: 1001; left: var(--fly-x, 0); top: var(--fly-y, 0); width: var(--fly-w, 320px); pointer-events: none; background: var(--cz-card); border-radius: 12px; padding: 7px 12px !important;
|
|
1287
1287
|
box-shadow: 0 18px 40px -16px rgba(42,46,53,.45), 0 0 0 1px var(--cz-hair); display: flex; align-items: center; gap: 12px; font-family: var(--cz-sans); color: var(--cz-ink); }
|
|
1288
1288
|
.iv-fly .iv-grip { position: static; opacity: 1; margin: 0; color: var(--cz-blueink); }
|
|
1289
|
-
.iv-fly .iv-tt { font-size: var(--fs-
|
|
1289
|
+
.iv-fly .iv-tt { font-size: var(--fs-row); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-row); }
|
|
1290
1290
|
.iv-fly > .w { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
|
|
1291
|
-
.iv-fly .iv-rm { font-size: var(--fs-
|
|
1291
|
+
.iv-fly .iv-rm { font-size: var(--fs-meta); color: var(--cz-ink3); margin-left: auto; line-height: var(--lh-meta); }
|
|
1292
1292
|
.iv-wbs { position: relative; }
|
|
1293
1293
|
.iv-dl { position: absolute; left: var(--dl-x, 14px); right: 12px; top: var(--dl-y, 0); height: 2px; margin-top: -1px; background: var(--cz-blue); pointer-events: none; z-index: 3; }
|
|
1294
1294
|
.iv-dl::before { content: ""; position: absolute; left: -5px; top: -4px; width: 6px; height: 6px; border-radius: 50%; border: 2px solid var(--cz-blue); background: var(--cz-card); }
|
|
1295
1295
|
.iv-ws.iv-tgt { background: var(--cz-bluebg) !important; }
|
|
1296
|
-
.iv-dtip { position: fixed; z-index: 1002; left: var(--fly-x, 0); top: var(--fly-y, 0); pointer-events: none; background: var(--cz-solid); color: var(--cz-onsolid); font-family: var(--cz-sans); font-size: var(--fs-
|
|
1296
|
+
.iv-dtip { position: fixed; z-index: 1002; left: var(--fly-x, 0); top: var(--fly-y, 0); pointer-events: none; background: var(--cz-solid); color: var(--cz-onsolid); font-family: var(--cz-sans); font-size: var(--fs-label); font-weight: var(--fw-strong); padding: 6px 10px; border-radius: 8px; white-space: nowrap; line-height: var(--lh-label); }
|
|
1297
1297
|
body.iv-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
|
|
1298
1298
|
/* ⋯ of the open row (StA2bMore) */
|
|
1299
1299
|
.tkc.ivq .ive-m .o.dl:hover { color: var(--cz-red); }
|