create-pmos 0.511.0 → 0.513.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +27 -31
- package/payload/KIT-VERSION +1 -1
- package/payload/planning/evals/eval-calibration.md +1 -1
- package/payload/planning/okrs/health-budgets.md +1 -1
- package/payload/state/discoveries.md +1 -1
- package/workspace/briefing-premium-adddoc-test.js +3 -3
- package/workspace/briefing-premium-board-test.js +2 -2
- package/workspace/briefing-premium-initiative-test.js +3 -3
- package/workspace/briefing-premium-insights-test.js +2 -2
- package/workspace/briefing-premium-sources-test.js +4 -5
- package/workspace/briefing-premium-test.js +2 -2
- package/workspace/changelog.json +26 -0
- package/workspace/fixtures/next-prompt-replay.json +40 -0
- package/workspace/guide/home.md +1 -1
- package/workspace/guide/index.md +1 -0
- package/workspace/guide/next-prompt.md +62 -0
- package/workspace/guide/settings.md +3 -1
- package/workspace/intel-report-ui-test.js +1 -1
- package/workspace/intelligence-gaps-ui-test.js +1 -1
- package/workspace/lib/next-prompt.js +199 -0
- package/workspace/lib/premium-console-type.js +15 -12
- package/workspace/lib/route-modules.js +1 -0
- package/workspace/lib/routes-next-prompt.js +248 -0
- package/workspace/metric-drafts-ui-test.js +2 -2
- package/workspace/package-lock.json +2 -2
- package/workspace/package.json +1 -1
- package/workspace/premium-menu-rows-test.js +1 -1
- package/workspace/premium-vw-doc-test.js +1 -1
- package/workspace/public/pm/bd-pin-card.css +4 -4
- package/workspace/public/pm/bd-publish.css +11 -11
- package/workspace/public/pm/bd-shared.css +17 -17
- package/workspace/public/pm/c3-capture.css +9 -9
- package/workspace/public/pm/c3-initiatives.css +23 -23
- package/workspace/public/pm/c3-listen.css +1 -1
- package/workspace/public/pm/components.css +572 -572
- package/workspace/public/pm/console3.css +374 -373
- package/workspace/public/pm/cozy-adler.css +4 -4
- package/workspace/public/pm/cozy-aud.css +1 -1
- package/workspace/public/pm/cozy-board.css +328 -328
- package/workspace/public/pm/cozy-ev.css +80 -78
- package/workspace/public/pm/cozy-home-rows.css +32 -32
- package/workspace/public/pm/cozy-home.css +285 -241
- package/workspace/public/pm/cozy-insights.css +200 -200
- package/workspace/public/pm/cozy-live-pill.css +5 -5
- package/workspace/public/pm/cozy-mtg-present.css +28 -28
- package/workspace/public/pm/cozy-onboard.css +15 -15
- package/workspace/public/pm/cozy-panel.css +39 -39
- package/workspace/public/pm/cozy-pick.css +5 -5
- package/workspace/public/pm/cozy-rec-now.css +23 -23
- package/workspace/public/pm/cozy-rec-present.css +11 -11
- package/workspace/public/pm/cozy-rec-tab.css +13 -13
- package/workspace/public/pm/cozy-settings.js +37 -2
- package/workspace/public/pm/cozy-steps.css +14 -14
- package/workspace/public/pm/cozy-today.css +95 -95
- package/workspace/public/pm/cozy-viewer.css +27 -27
- package/workspace/public/pm/cozy-vw-mtg.css +113 -113
- package/workspace/public/pm/cozy-vw-rp.css +79 -79
- package/workspace/public/pm/cozy-vw-shell.css +43 -43
- package/workspace/public/pm/cozy-vw.css +129 -129
- package/workspace/public/pm/cozy-xv.css +15 -15
- package/workspace/public/pm/cozy.css +53 -21
- package/workspace/public/pm/dash-view.css +27 -27
- package/workspace/public/pm/hi-pop.css +26 -26
- package/workspace/public/pm/home-chat.js +21 -4
- package/workspace/public/pm/home-impact.css +8 -8
- package/workspace/public/pm/home-ini.css +36 -36
- package/workspace/public/pm/home-line.css +7 -7
- package/workspace/public/pm/impact.css +9 -9
- package/workspace/public/pm/ini-view.css +243 -243
- package/workspace/public/pm/load-shapes.css +1 -1
- package/workspace/public/pm/loose-props.css +14 -14
- package/workspace/public/pm/metric-drafts.css +20 -20
- package/workspace/public/pm/ms-suggest.css +9 -9
- package/workspace/public/pm/next-prompt-ui.js +117 -0
- package/workspace/public/pm/ov-view.css +14 -14
- package/workspace/public/pm/premium-insights.js +3 -3
- package/workspace/public/pm/premium-report-frame.css +1 -1
- package/workspace/public/pm/premium-report-intel.css +17 -17
- package/workspace/public/pm/premium-report-print.css +1 -1
- package/workspace/public/pm/premium-vw-backlog.css +13 -13
- package/workspace/public/pm/premium-vw-cal.css +32 -32
- package/workspace/public/pm/premium-vw-copy.css +7 -7
- package/workspace/public/pm/premium-vw-doc.css +69 -69
- package/workspace/public/pm/premium-vw-item.css +12 -12
- package/workspace/public/pm/premium-vw-jira.css +39 -39
- package/workspace/public/pm/premium-vw-meet.css +28 -28
- package/workspace/public/pm/premium-vw-notepad.css +13 -13
- package/workspace/public/pm/premium-vw-notes.css +11 -11
- package/workspace/public/pm/premium-vw-rec.css +27 -27
- package/workspace/public/pm/premium-vw-report.css +21 -21
- package/workspace/public/pm/premium-vw-slides.css +28 -28
- package/workspace/public/pm/premium.css +618 -618
- package/workspace/public/pm/prog-order.css +6 -6
- package/workspace/public/pm/prog-page.css +17 -17
- package/workspace/public/pm/program-charter.css +33 -33
- package/workspace/public/pm/ready-lib.css +6 -6
- package/workspace/public/pm/sort-order.css +1 -1
- package/workspace/public/pm/split-merge.css +18 -18
- package/workspace/public/pm/task-card.css +24 -24
- package/workspace/public/pm/tk-tasks.css +42 -42
- package/workspace/public/pm/tk-view.css +6 -6
- package/workspace/public/pm/wf-page.css +31 -31
- package/workspace/public/premium-aud.html +1 -1
- package/workspace/public/premium-board.html +1 -1
- package/workspace/public/premium-intelligence.html +1 -1
- package/workspace/public/premium-rec.html +1 -1
- package/workspace/public/premium-viewer.html +1 -1
- package/workspace/public/premium-workflows.html +1 -1
- package/workspace/public/premium.html +1 -1
- package/workspace/public/vendor/plus-jakarta-sans-var.woff2 +0 -0
- package/workspace/server.js +1 -0
- package/workspace/test-lists/next-prompt.json +5 -0
- package/workspace/third-party/README.md +2 -1
- package/workspace/third-party/plus-jakarta-sans-OFL.LICENSE +93 -0
|
@@ -25,13 +25,13 @@ body.bd-page .dock, body.bd-page .sky, body.bd-page .hero, body.bd-page .rail {
|
|
|
25
25
|
.bd-page svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
|
|
26
26
|
|
|
27
27
|
/* the panel (AgBoard .panel): no page header; it starts at the top */
|
|
28
|
-
body.bd-page main.bd-main { position: relative; max-width: none; margin: 16px; padding: 22px 28px 20px; min-height: calc(100vh - 32px); box-sizing: border-box; font-family: var(--cz-sans); font-size: var(--fs-
|
|
29
|
-
background: var(--cz-card); border-radius: 28px; box-shadow: 0 30px 70px -36px rgba(42,46,53,.28); display: flex; flex-direction: column; gap: 14px; }
|
|
28
|
+
body.bd-page main.bd-main { position: relative; max-width: none; margin: 16px; padding: 22px 28px 20px; min-height: calc(100vh - 32px); box-sizing: border-box; font-family: var(--cz-sans); font-size: var(--fs-body); color: var(--cz-ink);
|
|
29
|
+
background: var(--cz-card); border-radius: 28px; box-shadow: 0 30px 70px -36px rgba(42,46,53,.28); display: flex; flex-direction: column; gap: 14px; line-height: var(--lh-body); }
|
|
30
30
|
.bd-page main.bd-main * { box-sizing: border-box; }
|
|
31
31
|
|
|
32
32
|
/* ── the toolbar (AgBoard .hd .tools) ── */
|
|
33
33
|
.bd-hd { display: flex; align-items: center; gap: 16px; min-height: 40px; }
|
|
34
|
-
.bd-title { display: none; font-weight:
|
|
34
|
+
.bd-title { display: none; font-weight: var(--fw-strong); font-size: var(--fs-row); line-height: var(--lh-row); }
|
|
35
35
|
.bd-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
|
|
36
36
|
.bd-ib { width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--cz-ink2); background: transparent; border: 0; padding: 0; cursor: pointer; font: inherit; text-decoration: none; flex: none; position: relative; }
|
|
37
37
|
.bd-ib:hover { background: var(--cz-well); }
|
|
@@ -51,7 +51,7 @@ body.bd-page main.bd-main { position: relative; max-width: none; margin: 16px; p
|
|
|
51
51
|
/* the product picker (AgBoard .pick): 30 px, 13 px bold, a small chevron */
|
|
52
52
|
.bd-pickw .where { gap: 6px; display: flex; }
|
|
53
53
|
.bd-pickw .crumb { display: inline-flex; align-items: center; gap: 0; height: 30px; padding: 0 8px 0 0; border: 0; border-radius: 999px; background: var(--cz-well); font-family: var(--cz-sans); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
|
|
54
|
-
.bd-pickw .crumb #crBoard { height: 30px; min-height: 30px; padding: 0 2px 0 12px; font:
|
|
54
|
+
.bd-pickw .crumb #crBoard { height: 30px; min-height: 30px; padding: 0 2px 0 12px; font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); color: var(--cz-ink2); background: none; border: 0; border-radius: 999px; opacity: 1; }
|
|
55
55
|
.bd-pickw .crumb .cri { height: 26px; width: 22px; min-width: 22px; color: var(--cz-ink2); background: none; border: 0; box-shadow: none; padding: 0; }
|
|
56
56
|
.bd-pickw .crumb .cri svg { width: 13px; height: 13px; }
|
|
57
57
|
.bd-pickw .crumb .cri[hidden] { display: none; }
|
|
@@ -71,7 +71,7 @@ body.bd-page main.bd-main { position: relative; max-width: none; margin: 16px; p
|
|
|
71
71
|
.bd-page .crmenu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; min-width: 220px; padding: 6px; display: grid; gap: 2px; font-family: var(--cz-sans); background: var(--cz-card); border: 1px solid var(--cz-hair); border-radius: 18px; box-shadow: 0 24px 50px -20px rgba(42,46,53,.4); }
|
|
72
72
|
.bd-page .crmenu[hidden] { display: none; }
|
|
73
73
|
.bd-page #moreMenu { right: 0; left: auto; }
|
|
74
|
-
.bd-page .crmenu > button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 12px; font:
|
|
74
|
+
.bd-page .crmenu > button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 12px; font: var(--fw-strong) var(--fs-row)/var(--lh-row) var(--cz-sans); color: var(--cz-ink); white-space: nowrap; }
|
|
75
75
|
.bd-page .crmenu > button:hover, .bd-page .crmenu > button:focus-visible { background: var(--cz-well); }
|
|
76
76
|
.bd-page .crmenu > button .bd-wtag { margin-left: auto; }
|
|
77
77
|
/* the product menu ticks several (batch 11 item 7): a blue tick when on, a grey dash on All products when only some are */
|
|
@@ -81,13 +81,13 @@ body.bd-page main.bd-main { position: relative; max-width: none; margin: 16px; p
|
|
|
81
81
|
.bd-page .crmenu > button[aria-checked="false"] { color: var(--cz-ink2); }
|
|
82
82
|
.bd-page .crmenu .crsep { height: 1px; margin: 4px 8px; background: var(--cz-hair); }
|
|
83
83
|
.bd-pickw .crumb #crBoard { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
84
|
-
.bd-pickw .crumb #crBoard b { font-weight:
|
|
85
|
-
.bd-page .crmenu em { margin-left: auto; font-style: normal; font-size: var(--fs-
|
|
86
|
-
.bd-page .tbrow { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 6px 0 12px; font:
|
|
84
|
+
.bd-pickw .crumb #crBoard b { font-weight: var(--fw-strong); color: var(--cz-ink3); }
|
|
85
|
+
.bd-page .crmenu em { margin-left: auto; font-style: normal; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
|
|
86
|
+
.bd-page .tbrow { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 6px 0 12px; font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); color: var(--cz-ink2); }
|
|
87
87
|
.bd-page .tbrow[hidden] { display: none; }
|
|
88
88
|
.bd-page .tbseg { margin-left: auto; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--cz-well); }
|
|
89
|
-
.bd-page .tbseg button { all: unset; cursor: pointer; height: 26px; padding: 0 10px; border-radius: 999px; font:
|
|
90
|
-
.bd-page .tbseg button[aria-checked="true"] { background: var(--cz-card); color: var(--cz-ink); font-weight:
|
|
89
|
+
.bd-page .tbseg button { all: unset; cursor: pointer; height: 26px; padding: 0 10px; border-radius: 999px; font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); color: var(--cz-ink2); display: inline-flex; align-items: center; }
|
|
90
|
+
.bd-page .tbseg button[aria-checked="true"] { background: var(--cz-card); color: var(--cz-ink); font-weight: var(--fw-strong); box-shadow: 0 1px 3px rgba(42,46,53,.12); }
|
|
91
91
|
.bd-page .tbseg button:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 1px; }
|
|
92
92
|
.bd-page .crumb { position: relative; }
|
|
93
93
|
.bd-page .crumb button { cursor: pointer; }
|
|
@@ -96,54 +96,54 @@ body.bd-page main.bd-main { position: relative; max-width: none; margin: 16px; p
|
|
|
96
96
|
/* ── the tabs and the chips (AgBoard .row .tab .chip) ── */
|
|
97
97
|
.bd-chiprow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
98
98
|
.bd-tabs { display: flex; gap: 4px; margin-right: 8px; }
|
|
99
|
-
.bd-tab { height: 32px; padding: 0 12px; border-radius: 999px; font:
|
|
99
|
+
.bd-tab { height: 32px; padding: 0 12px; border-radius: 999px; font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); color: var(--cz-ink3); background: none; border: 0; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
|
|
100
100
|
.bd-tab[aria-selected="true"] { background: var(--cz-well); color: var(--cz-ink); }
|
|
101
|
-
.bd-tab .n { font-weight:
|
|
101
|
+
.bd-tab .n { font-weight: var(--fw-strong); color: var(--cz-ink3); }
|
|
102
102
|
.bd-chipset { display: contents; }
|
|
103
|
-
.bd-chip { height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--cz-hair); background: var(--cz-card); display: inline-flex; align-items: center; gap: 6px; font:
|
|
103
|
+
.bd-chip { height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--cz-hair); background: var(--cz-card); display: inline-flex; align-items: center; gap: 6px; font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); color: var(--cz-ink2); white-space: nowrap; cursor: pointer; text-decoration: none; flex: none; }
|
|
104
104
|
.bd-chip:hover { background: var(--cz-well); }
|
|
105
105
|
.bd-adc { padding-left: 4px; } /* the Jira chip's Adler face (batch 17 item 4-A) sits where the refresh icon stood */
|
|
106
106
|
.bd-chip.bd-adc svg.ad-svg { width: 24px; height: 24px; }
|
|
107
107
|
.bd-chip svg { width: 14px; height: 14px; flex: none; }
|
|
108
|
-
.bd-chip b { font-weight:
|
|
109
|
-
.bd-chip.gh { border-color: transparent; background: transparent; padding: 0 8px; font-weight:
|
|
108
|
+
.bd-chip b { font-weight: var(--fw-strong); color: var(--cz-ink); }
|
|
109
|
+
.bd-chip.gh { border-color: transparent; background: transparent; padding: 0 8px; font-weight: var(--fw-strong); }
|
|
110
110
|
.bd-chip.gh:hover { background: var(--cz-well); }
|
|
111
111
|
.bd-chip.on, .bd-chip.gh.on { background: var(--cz-bluebg); border-color: transparent; color: var(--cz-blueink); }
|
|
112
112
|
.bd-chip .cz-dot { width: 7px; height: 7px; }
|
|
113
113
|
.bd-chip.off { cursor: default; color: var(--cz-ink3); border-style: dashed; background: transparent; }
|
|
114
114
|
.bd-chip.off:hover { background: transparent; }
|
|
115
|
-
.bd-chip em { font-style: normal; font-weight:
|
|
115
|
+
.bd-chip em { font-style: normal; font-weight: var(--fw-strong); color: var(--cz-ink3); margin-left: 2px; }
|
|
116
116
|
.bd-chip:disabled { opacity: .6; }
|
|
117
117
|
.bd-sp { margin-left: auto; }
|
|
118
118
|
/* the calmer top bar (batch 24 item 7, canvas BbB): one pill for what needs a look, the legend behind (i), Jira as Adler's face */
|
|
119
|
-
.bd-chip.bd-need { background: var(--cz-well); border-color: transparent; gap: 10px; padding: 0 10px 0 12px; font-weight:
|
|
119
|
+
.bd-chip.bd-need { background: var(--cz-well); border-color: transparent; gap: 10px; padding: 0 10px 0 12px; font-weight: var(--fw-strong); color: var(--cz-ink); }
|
|
120
120
|
.bd-chip.bd-need > span { display: inline-flex; align-items: center; gap: 5px; }
|
|
121
121
|
.bd-chip.bd-need.on { background: var(--cz-bluebg); color: var(--cz-blueink); }
|
|
122
122
|
.bd-needm { min-width: 220px; }
|
|
123
|
-
.bd-needm .bd-mlbl, .bd-lgdm .bd-mlbl { font:
|
|
123
|
+
.bd-needm .bd-mlbl, .bd-lgdm .bd-mlbl { font: var(--fw-strong) var(--fs-badge)/var(--lh-badge) var(--cz-sans); color: var(--cz-ink3); padding: 6px 10px 4px; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
|
|
124
124
|
.bd-needm .bd-nr { display: flex; align-items: center; gap: 10px; }
|
|
125
|
-
.bd-needm .bd-nr .k { margin-left: auto; color: var(--cz-ink3); font-weight:
|
|
125
|
+
.bd-needm .bd-nr .k { margin-left: auto; color: var(--cz-ink3); font-weight: var(--fw-strong); }
|
|
126
126
|
.bd-needm .bd-nr.on { background: var(--cz-bluebg); color: var(--cz-blueink); }
|
|
127
127
|
.bd-needm .cz-dot { width: 7px; height: 7px; }
|
|
128
128
|
.bd-lgdm { min-width: 220px; padding: 6px 12px 10px; }
|
|
129
|
-
.bd-lgdm .tg-lgd { position: static; flex-direction: column; gap: 9px; padding: 4px 0 0; background: none; font-weight:
|
|
129
|
+
.bd-lgdm .tg-lgd { position: static; flex-direction: column; gap: 9px; padding: 4px 0 0; background: none; font-weight: var(--fw-strong); color: var(--cz-ink2); white-space: nowrap; }
|
|
130
130
|
.bd-chip.bd-jf { width: 36px; padding: 0; justify-content: center; border-color: transparent; background: transparent; position: relative; }
|
|
131
131
|
.bd-chip.bd-jf:hover { background: var(--cz-well); }
|
|
132
132
|
.bd-chip.bd-jf svg.ad-svg { width: 24px; height: 24px; }
|
|
133
133
|
.bd-pip { position: absolute; right: 3px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--cz-risk); border: 2px solid var(--cz-card); }
|
|
134
134
|
|
|
135
135
|
/* ── the "Waiting for design" card, where the shell has none yet; messages ── */
|
|
136
|
-
.bd-wait { border: 1px dashed var(--cz-hair); border-radius: 18px; padding: 22px; color: var(--cz-ink3); font-size: var(--fs-
|
|
137
|
-
.bd-wait b { display: block; color: var(--cz-ink); font-size: var(--fs-
|
|
136
|
+
.bd-wait { border: 1px dashed var(--cz-hair); border-radius: 18px; padding: 22px; color: var(--cz-ink3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
137
|
+
.bd-wait b { display: block; color: var(--cz-ink); font-size: var(--fs-body); margin-bottom: 4px; line-height: var(--lh-body); }
|
|
138
138
|
.bd-wait p { margin: 0; }
|
|
139
139
|
.bd-waitw { min-height: 200px; }
|
|
140
|
-
.bd-msg { margin: 0; padding: 18px; border: 1px solid var(--cz-hair); border-radius: 18px; font-size: var(--fs-
|
|
140
|
+
.bd-msg { margin: 0; padding: 18px; border: 1px solid var(--cz-hair); border-radius: 18px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
141
141
|
.bd-msg b { color: var(--cz-ink); }
|
|
142
142
|
.bd-msg.err b { color: var(--cz-red); }
|
|
143
|
-
.bd-toast { position: fixed; z-index: 80; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--cz-ink); color: var(--cz-card); border-radius: 999px; padding: 9px 18px; font:
|
|
143
|
+
.bd-toast { position: fixed; z-index: 80; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--cz-ink); color: var(--cz-card); border-radius: 999px; padding: 9px 18px; font: var(--fw-strong) var(--fs-row)/var(--lh-row) var(--cz-sans); box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); max-width: calc(100vw - 32px); }
|
|
144
144
|
.bd-toast[hidden] { display: none; }
|
|
145
145
|
.bd-toast { display: flex; align-items: center; gap: 12px; }
|
|
146
|
-
.bd-undo { all: unset; cursor: pointer; font-weight:
|
|
146
|
+
.bd-undo { all: unset; cursor: pointer; font-weight: var(--fw-strong); color: var(--cz-blueink); padding: 2px 4px; border-radius: 6px; }
|
|
147
147
|
.bd-undo:focus-visible { outline: 2px solid var(--cz-blue); }
|
|
148
148
|
|
|
149
149
|
/* ── the stage track (AgBoard .tg .tr .tl) ── */
|
|
@@ -152,17 +152,17 @@ body.bd-page main.bd-main { position: relative; max-width: none; margin: 16px; p
|
|
|
152
152
|
.bt { display: flex; flex-direction: column; border: 1px solid var(--cz-hair); border-radius: 18px; overflow: hidden; }
|
|
153
153
|
.bt-r { display: grid; grid-template-columns: 236px 576px minmax(0, 1fr); align-items: stretch; }
|
|
154
154
|
.bt-cells { display: grid; grid-template-columns: repeat(8, 72px); }
|
|
155
|
-
.bt-h { background: var(--cz-well); font-size: var(--fs-
|
|
155
|
+
.bt-h { background: var(--cz-well); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
|
|
156
156
|
.bt-h .bt-cells > div { padding: 7px 0; text-align: center; white-space: nowrap; line-height: 1.25; display: flex; flex-direction: column; align-items: center; cursor: help; }
|
|
157
157
|
.bt-h .bt-cells > div:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: -2px; border-radius: 8px; }
|
|
158
158
|
.bt-hl { display: inline-flex; align-items: center; }
|
|
159
159
|
.bt-hl .cz-ms { margin: 0 5px 0 0; width: 7px; height: 7px; }
|
|
160
|
-
.bt-h .bt-cells span + span, .bt-nmh span { color: var(--cz-ink3); font-weight:
|
|
160
|
+
.bt-h .bt-cells span + span, .bt-nmh span { color: var(--cz-ink3); font-weight: var(--fw-strong); font-size: var(--fs-badge); line-height: var(--lh-badge); }
|
|
161
161
|
.bt-h .msh { color: var(--cz-ink2); }
|
|
162
162
|
.bt-nmh { padding: 7px 14px; display: flex; align-items: flex-start; gap: 4px; line-height: 1.25; } /* top-aligned with the step names (AgBoard) */
|
|
163
|
-
.bt-nmh span { font-size: var(--fs-
|
|
163
|
+
.bt-nmh span { font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
164
164
|
.bt-oh { padding: 7px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; line-height: 1.25; }
|
|
165
|
-
.lg { display: flex; gap: 8px; align-items: center; font-size: var(--fs-
|
|
165
|
+
.lg { display: flex; gap: 8px; align-items: center; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
|
|
166
166
|
.lg i { display: inline-block; width: 10px; height: 6px; border-radius: 2px; margin-right: 4px; vertical-align: 1px; }
|
|
167
167
|
.lg i.dn { background: var(--bd-done); } .lg i.rv { background: var(--bd-rv); } .lg i.ip { background: var(--bd-ip); } .lg i.bl { background: var(--cz-dot-red); } .lg i.yo { background: var(--cz-blue); }
|
|
168
168
|
.lg i.sk { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--bd-pass); background: var(--cz-card); vertical-align: -1px; }
|
|
@@ -172,10 +172,10 @@ body.bd-page main.bd-main { position: relative; max-width: none; margin: 16px; p
|
|
|
172
172
|
.bt-l.held { opacity: .72; }
|
|
173
173
|
.bt-nm { all: unset; box-sizing: border-box; cursor: pointer; padding: 5px 10px 5px 14px; line-height: 1.3; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
|
|
174
174
|
.bt-nm:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: -2px; border-radius: 10px; }
|
|
175
|
-
.bt-nm b { font-size: var(--fs-
|
|
176
|
-
.cs { display: flex; align-items: center; gap: 6px; font-size: var(--fs-
|
|
175
|
+
.bt-nm b { font-size: var(--fs-row); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--cz-ink); line-height: var(--lh-row); }
|
|
176
|
+
.cs { display: flex; align-items: center; gap: 6px; font-size: var(--fs-label); font-weight: var(--fw-strong); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-label); }
|
|
177
177
|
.cs .cz-dot { width: 7px; height: 7px; }
|
|
178
|
-
.s-you { color: var(--cz-blueink); } .s-late { color: var(--cz-late); } .s-risk { color: var(--cz-risk); } .s-red { color: var(--cz-red); } .s-ok { color: var(--cz-ok); } .s-q { color: var(--cz-ink3); font-weight:
|
|
178
|
+
.s-you { color: var(--cz-blueink); } .s-late { color: var(--cz-late); } .s-risk { color: var(--cz-risk); } .s-red { color: var(--cz-red); } .s-ok { color: var(--cz-ok); } .s-q { color: var(--cz-ink3); font-weight: var(--fw-strong); }
|
|
179
179
|
.bt-pst { display: none; }
|
|
180
180
|
.bt-l .bt-cells > div { position: relative; display: flex; align-items: center; justify-content: center; }
|
|
181
181
|
.sc::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--bd-rail); }
|
|
@@ -191,23 +191,23 @@ body.bd-page main.bd-main { position: relative; max-width: none; margin: 16px; p
|
|
|
191
191
|
.bt-l.sel .sc .cur u { box-shadow: 0 0 0 4px var(--cz-bluebg); }
|
|
192
192
|
.sc .cur u.ok { background: var(--bd-cur); }
|
|
193
193
|
.sc .cur u.q { background: var(--cz-c-9da3ac); }
|
|
194
|
-
.sc .cur small { position: absolute; top: 19px; font-size: var(--fs-
|
|
194
|
+
.sc .cur small { position: absolute; top: 19px; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); white-space: nowrap; line-height: var(--lh-badge); }
|
|
195
195
|
.sc.ms .cur u, .sc.ms .cur u::after { border-radius: 4px; }
|
|
196
196
|
.sc.ms .cur u { transform: rotate(45deg); width: 15px; height: 15px; }
|
|
197
197
|
.sc.ms .cur small { top: 20px; }
|
|
198
198
|
.bt-dl { padding: 5px 16px 5px 14px; line-height: 1.25; border-left: 1px solid var(--cz-hair); display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
|
|
199
|
-
.bt-dl .t1, .pk-box .t1 { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-
|
|
200
|
-
.bt-dl .t1 b, .pk-box .t1 b { color: var(--cz-ink); font-weight:
|
|
201
|
-
.bt-dl .t3 { font-size: var(--fs-
|
|
202
|
-
.bt-dl .t3 em, .pk-box em { font-style: normal; font-weight:
|
|
199
|
+
.bt-dl .t1, .pk-box .t1 { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; line-height: var(--lh-meta); }
|
|
200
|
+
.bt-dl .t1 b, .pk-box .t1 b { color: var(--cz-ink); font-weight: var(--fw-strong); overflow: hidden; text-overflow: ellipsis; }
|
|
201
|
+
.bt-dl .t3 { font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 14px; line-height: var(--lh-meta); }
|
|
202
|
+
.bt-dl .t3 em, .pk-box em { font-style: normal; font-weight: var(--fw-strong); }
|
|
203
203
|
.seg5 { display: flex; gap: 3px; height: 8px; }
|
|
204
204
|
/* the Next cell (pm/bd-next.js; canvas XocA, XocAList, XocAPhone): verb in ink, the object in blue ink, the count muted on the right, the icon lit on the row's hover */
|
|
205
|
-
.bd-nx { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-
|
|
205
|
+
.bd-nx { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink); white-space: nowrap; line-height: var(--lh-label); }
|
|
206
206
|
.bd-nx .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
|
|
207
|
-
.bd-nx em { font-style: normal; font-weight:
|
|
207
|
+
.bd-nx em { font-style: normal; font-weight: var(--fw-strong); color: var(--cz-blueink); }
|
|
208
208
|
.bd-nx em.red { color: var(--cz-red); }
|
|
209
209
|
.bd-nx .cz-dot { width: 7px; height: 7px; }
|
|
210
|
-
.bd-nx .mu { margin-left: auto; flex: none; font-size: var(--fs-
|
|
210
|
+
.bd-nx .mu { margin-left: auto; flex: none; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
|
|
211
211
|
.bd-nxa { all: unset; box-sizing: border-box; flex: none; width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--cz-ink3); border: 1px solid var(--cz-hair); cursor: pointer; }
|
|
212
212
|
.bd-nx .tx + .bd-nxa { margin-left: auto; }
|
|
213
213
|
.bd-nxa svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
|
|
@@ -221,27 +221,27 @@ body.bd-page main.bd-main { position: relative; max-width: none; margin: 16px; p
|
|
|
221
221
|
.seg5 > .dn { background: var(--bd-done); } .seg5 > .rv { background: var(--bd-rv); } .seg5 > .ip { background: var(--bd-ip); } .seg5 > .bl { background: var(--cz-dot-red); } .seg5 > .td { background: var(--bd-rail); }
|
|
222
222
|
.seg5 > .yo { background: var(--cz-blue); } .seg5 > .df { background: transparent; border: 1px dashed rgba(47,95,179,.5); }
|
|
223
223
|
.seg5 > .na { background: transparent; border: 1px dashed var(--cz-hair); }
|
|
224
|
-
.bt-tf { padding: 5px 14px 5px 84px; font-size: var(--fs-
|
|
225
|
-
.bt-tf .dlink { min-height: 24px; display: inline-flex; align-items: center; gap: 6px; font:
|
|
224
|
+
.bt-tf { padding: 5px 14px 5px 84px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); background: var(--bd-row); border-top: 1px solid var(--cz-hair); display: flex; align-items: center; gap: 8px; justify-content: space-between; line-height: var(--lh-label); }
|
|
225
|
+
.bt-tf .dlink { min-height: 24px; display: inline-flex; align-items: center; gap: 6px; font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); color: var(--cz-ink3); background: none; border: 0; cursor: pointer; padding: 0; }
|
|
226
226
|
.bt-tf .dlink:hover { color: var(--cz-ink); }
|
|
227
227
|
.bt-tf .dlink svg { width: 14px; height: 14px; }
|
|
228
|
-
.bt-srt { font-weight:
|
|
229
|
-
.bt-empty { padding: 18px 14px; margin: 0; border-top: 1px solid var(--cz-hair); color: var(--cz-ink3); font-size: var(--fs-
|
|
230
|
-
.bt-empty .dlink { font:
|
|
228
|
+
.bt-srt { font-weight: var(--fw-strong); }
|
|
229
|
+
.bt-empty { padding: 18px 14px; margin: 0; border-top: 1px solid var(--cz-hair); color: var(--cz-ink3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
230
|
+
.bt-empty .dlink { font: var(--fw-strong) var(--fs-row)/var(--lh-row) var(--cz-sans); color: var(--cz-blueink); background: none; border: 0; cursor: pointer; padding: 0; }
|
|
231
231
|
|
|
232
232
|
/* ── the help frames (AgBoardStages, AgBoardTlRules) as popovers ── */
|
|
233
233
|
.bd-pop { position: absolute; z-index: 40; inset: 0; overflow: auto; background: var(--cz-card); border-radius: 28px; padding: 26px 44px 28px; } /* AgBoardStages, AgBoardTlRules: the frame fills the panel, so no chip row shows cut under it */
|
|
234
234
|
.bd-pop[hidden] { display: none; }
|
|
235
235
|
.bd-help-h { display: flex; align-items: center; gap: 8px; }
|
|
236
|
-
.bd-help-h h2 { margin: 0; font-size: var(--fs-
|
|
236
|
+
.bd-help-h h2 { margin: 0; font-size: var(--fs-panel); font-weight: var(--fw-strong); letter-spacing: -.01em; flex: 1; line-height: var(--lh-panel); }
|
|
237
237
|
.bd-x { width: 36px; height: 36px; border-radius: 999px; border: 0; background: none; color: var(--cz-ink2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
|
|
238
238
|
.bd-x:hover { background: var(--cz-well); }
|
|
239
239
|
.bd-x svg { width: 18px; height: 18px; }
|
|
240
|
-
.bd-help-p { margin: 2px 0 18px; font-size: var(--fs-
|
|
241
|
-
.bd-tbl { display: grid; grid-template-columns: 140px 110px 1.3fr 1.3fr 1fr; border: 1px solid var(--cz-hair); border-radius: 18px; overflow: hidden; font-size: var(--fs-
|
|
240
|
+
.bd-help-p { margin: 2px 0 18px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
241
|
+
.bd-tbl { display: grid; grid-template-columns: 140px 110px 1.3fr 1.3fr 1fr; border: 1px solid var(--cz-hair); border-radius: 18px; overflow: hidden; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
242
242
|
.bd-tr { display: contents; }
|
|
243
243
|
.bd-tr > span { padding: 10px 14px; line-height: 1.25; border-top: 1px solid var(--cz-hair); }
|
|
244
|
-
.bd-tr.th > span { background: var(--cz-well); font-weight:
|
|
244
|
+
.bd-tr.th > span { background: var(--cz-well); font-weight: var(--fw-strong); font-size: var(--fs-label); color: var(--cz-ink2); border-top: 0; line-height: var(--lh-label); }
|
|
245
245
|
.bd-tr b { display: inline-flex; align-items: center; gap: 6px; }
|
|
246
246
|
.bd-tr b .cz-ms { margin: 0 0 0 1px; width: 9px; height: 9px; }
|
|
247
247
|
.bd-tr em { font-style: normal; color: var(--cz-ink3); }
|
|
@@ -253,14 +253,14 @@ body.bd-page main.bd-main { position: relative; max-width: none; margin: 16px; p
|
|
|
253
253
|
.pk-h .pk-eye, .pk-h h2, .pk-h .pk-back { margin-right: 104px; }
|
|
254
254
|
.pk-h .pk-back { margin-right: 0; max-width: calc(100% - 104px); }
|
|
255
255
|
.pk-ht { flex: 1; min-width: 0; }
|
|
256
|
-
.pk-eye { margin: 0; font-size: var(--fs-
|
|
257
|
-
.pk-h h2 { margin: 2px 0 0; font-size: var(--fs-
|
|
258
|
-
.pk-st { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-
|
|
259
|
-
.pk-st .cs { font-size: var(--fs-
|
|
260
|
-
.pk-st b { color: var(--cz-ink2); font-weight:
|
|
256
|
+
.pk-eye { margin: 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
|
|
257
|
+
.pk-h h2 { margin: 2px 0 0; font-size: var(--fs-panel); font-weight: var(--fw-strong); line-height: 1.2; letter-spacing: -.01em; outline: 0; }
|
|
258
|
+
.pk-st { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
259
|
+
.pk-st .cs { font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
260
|
+
.pk-st b { color: var(--cz-ink2); font-weight: var(--fw-strong); }
|
|
261
261
|
.pk-st .cz-ms { margin: 0 5px 1px 0; color: var(--cz-ink2); }
|
|
262
|
-
.pk-av { width: 20px; height: 20px; border-radius: 50%; background: var(--cz-well2); color: var(--cz-ink2); font-size: var(--fs-
|
|
263
|
-
.pk-back { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-
|
|
262
|
+
.pk-av { width: 20px; height: 20px; border-radius: 50%; 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; margin-right: 4px; line-height: var(--lh-badge); }
|
|
263
|
+
.pk-back { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
|
|
264
264
|
.pk-back:hover { color: var(--cz-ink); }
|
|
265
265
|
.pk-back svg { width: 12px; height: 12px; }
|
|
266
266
|
.pk-tools { display: flex; gap: 2px; flex: none; }
|
|
@@ -268,14 +268,14 @@ body.bd-page main.bd-main { position: relative; max-width: none; margin: 16px; p
|
|
|
268
268
|
.pk-tools svg { width: 17px; height: 17px; }
|
|
269
269
|
/* XnAgBoardPanel's head on desktop: the eyebrow in grey, a 20 px title, and 32 px tools on the title's top line (the program panel keeps its own) */
|
|
270
270
|
@media (min-width: 721px) {
|
|
271
|
-
.pk-eye { color: var(--cz-ink3); font-weight:
|
|
272
|
-
.pk-h h2 { font-size: var(--fs-
|
|
271
|
+
.pk-eye { color: var(--cz-ink3); font-weight: var(--fw-strong); }
|
|
272
|
+
.pk-h h2 { font-size: var(--fs-panel); margin-top: 3px; line-height: var(--lh-panel); }
|
|
273
273
|
}
|
|
274
274
|
.pk-b { flex: 1; min-height: 0; overflow: auto; padding: 4px 20px 16px; display: flex; flex-direction: column; gap: 14px; }
|
|
275
275
|
.pk-lad { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); height: 32px; margin-top: -4px; } /* right under the status line (AgBoardPanel) */
|
|
276
276
|
.pk-lad .ln { position: absolute; left: 6.25%; right: 6.25%; top: 9px; height: 2px; background: var(--bd-rail); }
|
|
277
277
|
.pk-lad .lp { position: absolute; left: 6.25%; top: 9px; height: 2px; background: var(--bd-pass); }
|
|
278
|
-
.pk-lad span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: var(--fs-
|
|
278
|
+
.pk-lad span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
|
|
279
279
|
.pk-lad span i { width: 8px; height: 8px; border-radius: 50%; background: var(--bd-dot); margin-top: 5px; }
|
|
280
280
|
.pk-lad span.p i { background: var(--bd-pass); }
|
|
281
281
|
.pk-lad span.m i { border-radius: 2px; transform: rotate(45deg); }
|
|
@@ -284,11 +284,11 @@ body.bd-page main.bd-main { position: relative; max-width: none; margin: 16px; p
|
|
|
284
284
|
.pk-lad span.c { color: var(--cz-ink); }
|
|
285
285
|
.pk-lad span.c i { width: 16px; height: 16px; margin-top: 1px; background: var(--cz-blue); box-shadow: 0 0 0 3px var(--cz-card); }
|
|
286
286
|
.pk-lad span.m.c i { border-radius: 4px; width: 14px; height: 14px; margin-top: 2px; }
|
|
287
|
-
.pk-skip { margin: -8px 0 0; font-size: var(--fs-
|
|
287
|
+
.pk-skip { margin: -8px 0 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
288
288
|
.pk-nb { background: var(--cz-bluebg); border-radius: 16px; padding: 12px 12px 12px 14px; display: flex; align-items: center; gap: 10px; }
|
|
289
|
-
.pk-nb .t { flex: 1; font-size: var(--fs-
|
|
290
|
-
.pk-nb .t b { font-weight:
|
|
291
|
-
.pk-nb .t div { font-size: var(--fs-
|
|
289
|
+
.pk-nb .t { flex: 1; font-size: var(--fs-body); color: var(--cz-ink); min-width: 0; line-height: var(--lh-body); }
|
|
290
|
+
.pk-nb .t b { font-weight: var(--fw-strong); }
|
|
291
|
+
.pk-nb .t div { font-size: var(--fs-meta); color: var(--cz-ink3); margin-top: 2px; line-height: var(--lh-meta); }
|
|
292
292
|
.pk-nb.off { background: var(--cz-well); }
|
|
293
293
|
.pk-nb.red { background: var(--cz-redbg); }
|
|
294
294
|
.pk-nb.red .t b { color: var(--cz-red); }
|
|
@@ -296,10 +296,10 @@ body.bd-page main.bd-main { position: relative; max-width: none; margin: 16px; p
|
|
|
296
296
|
.pk-nb .bd-ib { width: 32px; height: 32px; }
|
|
297
297
|
.pk-nb .bd-ib svg { width: 15px; height: 15px; }
|
|
298
298
|
.pk-box { border: 1px solid var(--cz-hair); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
|
|
299
|
-
.pk-box .t1 { font-size: var(--fs-
|
|
300
|
-
.pk-box .t1 b { font-weight:
|
|
299
|
+
.pk-box .t1 { font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
300
|
+
.pk-box .t1 b { font-weight: var(--fw-strong); }
|
|
301
301
|
.pk-tks { display: flex; flex-direction: column; }
|
|
302
|
-
.gi { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: var(--fs-
|
|
302
|
+
.gi { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: var(--fs-meta); line-height: 1.25; border-top: 1px solid var(--cz-hair); margin: 0; }
|
|
303
303
|
.gi:first-child { border-top: 0; }
|
|
304
304
|
.gi.gm { cursor: default; }
|
|
305
305
|
button.gi:hover .n { color: var(--cz-blueink); }
|
|
@@ -307,57 +307,57 @@ button.gi:hover .n { color: var(--cz-blueink); }
|
|
|
307
307
|
.gi .k { width: 9px; height: 9px; border-radius: 3px; flex: none; background: var(--bd-rail); }
|
|
308
308
|
.gi .k.dn { background: var(--bd-done); } .gi .k.rv { background: var(--bd-rv); } .gi .k.ip { background: var(--bd-ip); } .gi .k.bl { background: var(--cz-dot-red); } .gi .k.yo { background: var(--cz-blue); } .gi .k.na { background: transparent; border: 1px dashed var(--bd-pass); }
|
|
309
309
|
.gi .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
310
|
-
.gi .n em { font-style: normal; font-weight:
|
|
311
|
-
.gi .r { font-size: var(--fs-
|
|
312
|
-
.pk-wt { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-
|
|
310
|
+
.gi .n em { font-style: normal; font-weight: var(--fw-strong); color: var(--cz-ink3); margin-right: 4px; }
|
|
311
|
+
.gi .r { font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; line-height: var(--lh-meta); }
|
|
312
|
+
.pk-wt { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-meta); color: var(--cz-risk); background: var(--cz-riskbg); border-radius: 14px; padding: 10px 12px; line-height: var(--lh-meta); }
|
|
313
313
|
.pk-wt.off { color: var(--cz-ink3); background: var(--cz-well); }
|
|
314
|
-
.pk-wt b { font-weight:
|
|
314
|
+
.pk-wt b { font-weight: var(--fw-strong); }
|
|
315
315
|
.pk-wt.off b { color: var(--cz-ink2); }
|
|
316
316
|
.pk-wt svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
|
|
317
317
|
.pk-wt > span { flex: 1; min-width: 0; }
|
|
318
318
|
.pk-wt .bd-ib { color: var(--cz-risk); margin: -4px -4px -4px 0; }
|
|
319
319
|
.pk-wt .bd-ib:hover { background: rgba(212,161,58,.18); }
|
|
320
|
-
.pk-nb .t .pk-bt { font-weight:
|
|
320
|
+
.pk-nb .t .pk-bt { font-weight: var(--fw-strong); }
|
|
321
321
|
.pk-who { display: inline-flex; align-items: center; }
|
|
322
|
-
.pk-mut { margin: 0; font-size: var(--fs-
|
|
323
|
-
.pk-p { margin: 0; font-size: var(--fs-
|
|
322
|
+
.pk-mut { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
323
|
+
.pk-p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
324
324
|
.pk-sec { display: flex; flex-direction: column; }
|
|
325
|
-
.pk-sec .lbl { font-size: var(--fs-
|
|
326
|
-
.pk-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: var(--fs-
|
|
325
|
+
.pk-sec .lbl { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); margin: 0 0 6px; line-height: var(--lh-label); }
|
|
326
|
+
.pk-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
327
327
|
.pk-kv span { color: var(--cz-ink2); }
|
|
328
|
-
.pk-kv b { font-weight:
|
|
328
|
+
.pk-kv b { font-weight: var(--fw-strong); }
|
|
329
329
|
.pk-lk { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
330
|
-
.pk-lk .bd-chip { height: 28px; font-size: var(--fs-
|
|
330
|
+
.pk-lk .bd-chip { height: 28px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
331
331
|
.pk-ask { margin: 0 16px 16px; border-radius: 18px; background: var(--cz-well); padding: 8px 8px 6px 14px; flex: none; }
|
|
332
332
|
.pk-ask .in { display: flex; align-items: center; gap: 6px; }
|
|
333
|
-
.pk-ask input { flex: 1; min-width: 0; height: 34px; border: 0; background: transparent; font: var(--fs-
|
|
333
|
+
.pk-ask input { flex: 1; min-width: 0; height: 34px; border: 0; background: transparent; font: var(--fs-body)/var(--lh-body) var(--cz-sans); color: var(--cz-ink); outline: 0; }
|
|
334
334
|
.pk-ask input::placeholder { color: var(--cz-ink3); }
|
|
335
335
|
.pk-ask .in .bd-ib.solid { width: 32px; height: 32px; }
|
|
336
336
|
.pk-ask .in .bd-ib svg { width: 16px; height: 16px; }
|
|
337
|
-
.pk-ask .ft { display: flex; align-items: center; gap: 6px; font-size: var(--fs-
|
|
337
|
+
.pk-ask .ft { display: flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--cz-ink3); padding: 2px 0; min-height: 28px; line-height: var(--lh-meta); }
|
|
338
338
|
.pk-ask .ft .sp { flex: 1; border: 0; border-radius: 0; background: none; } /* a spacer: not the sprint table's .sp box */
|
|
339
339
|
.pk-ask .ft .jr { display: inline-flex; align-items: center; gap: 4px; }
|
|
340
340
|
.pk-ask .ft .jr svg { width: 11px; height: 11px; }
|
|
341
341
|
/* the timeline panel (AgBoardTimelinePanel) */
|
|
342
|
-
.pk-stp { margin: 0 0 6px; font-size: var(--fs-
|
|
342
|
+
.pk-stp { margin: 0 0 6px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
343
343
|
.pk-stp b { color: var(--cz-ink2); }
|
|
344
344
|
.pk-seg { display: flex; gap: 3px; }
|
|
345
345
|
.pk-seg i { flex: 1; height: 6px; border-radius: 3px; background: var(--bd-rail); }
|
|
346
346
|
.pk-seg i.p { background: var(--bd-done); } .pk-seg i.c { background: var(--cz-ink); }
|
|
347
|
-
.pk-need { background: var(--cz-bluebg); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; font-size: var(--fs-
|
|
347
|
+
.pk-need { background: var(--cz-bluebg); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
348
348
|
.pk-need.off { background: var(--cz-well); }
|
|
349
349
|
.pk-need .t { flex: 1; min-width: 0; }
|
|
350
|
-
.pk-need .t div { font-size: var(--fs-
|
|
350
|
+
.pk-need .t div { font-size: var(--fs-meta); color: var(--cz-ink3); margin-top: 2px; line-height: var(--lh-meta); }
|
|
351
351
|
.pk-need .bd-ib { width: 32px; height: 32px; }
|
|
352
|
-
.pk-dep { display: flex; gap: 10px; align-items: flex-start; background: var(--cz-well); border-radius: 14px; padding: 12px 14px; font-size: var(--fs-
|
|
352
|
+
.pk-dep { display: flex; gap: 10px; align-items: flex-start; background: var(--cz-well); border-radius: 14px; padding: 12px 14px; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
353
353
|
.pk-dep svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--cz-ink2); }
|
|
354
|
-
.pk-dep div div { font-size: var(--fs-
|
|
354
|
+
.pk-dep div div { font-size: var(--fs-meta); color: var(--cz-ink3); margin-top: 2px; line-height: var(--lh-meta); }
|
|
355
355
|
.pk-wis { display: flex; flex-direction: column; }
|
|
356
|
-
.wi { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-
|
|
356
|
+
.wi { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--cz-hair); font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
357
357
|
.wi:last-child { border-bottom: 0; }
|
|
358
|
-
.wi .wk { font-size: var(--fs-
|
|
358
|
+
.wi .wk { font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); min-width: 62px; line-height: var(--lh-badge); }
|
|
359
359
|
.wi .wt2 { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
360
|
-
.wi .st { margin-left: auto; font-size: var(--fs-
|
|
360
|
+
.wi .st { margin-left: auto; font-size: var(--fs-badge); font-weight: var(--fw-strong); padding: 3px 8px; border-radius: 999px; background: var(--cz-well); color: var(--cz-ink2); white-space: nowrap; line-height: var(--lh-badge); }
|
|
361
361
|
.wi .st.y { background: var(--cz-bluebg); color: var(--cz-blueink); } .wi .st.r { background: var(--cz-redbg); color: var(--cz-red); }
|
|
362
362
|
.pk-acts { display: flex; gap: 2px; }
|
|
363
363
|
.pk-acts .bd-ib { width: 32px; height: 32px; }
|
|
@@ -379,16 +379,16 @@ body.bd-page[data-bd-view="time"] #cIni:not([hidden]) { flex: 1; display: flex;
|
|
|
379
379
|
button.tg-n { cursor: pointer; }
|
|
380
380
|
button.tg-n:hover b { color: var(--cz-blueink); }
|
|
381
381
|
.tg-n:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: -2px; border-radius: 8px; }
|
|
382
|
-
.tg-n b { font-size: var(--fs-
|
|
382
|
+
.tg-n b { font-size: var(--fs-label); font-weight: var(--fw-strong); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; overflow-wrap: anywhere; } /* names wrap to two lines, never cut (batch 13 item 4) */
|
|
383
383
|
.tg-n b .bd-pgi { display: inline-flex; vertical-align: -2px; margin-right: 6px; }
|
|
384
|
-
.tg-n small { font-size: var(--fs-
|
|
385
|
-
.tg-h .tg-n b { font-size: var(--fs-
|
|
386
|
-
.tg-h .tg-n small { font-size: var(--fs-
|
|
384
|
+
.tg-n small { font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-meta); }
|
|
385
|
+
.tg-h .tg-n b { font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
|
|
386
|
+
.tg-h .tg-n small { font-size: var(--fs-badge); font-weight: var(--fw-strong); line-height: var(--lh-badge); }
|
|
387
387
|
.tg-p { position: relative; min-height: 40px; }
|
|
388
|
-
.tg-h .tg-p > span[data-y] { position: absolute; top: 0; bottom: 0; padding: 7px 10px 0; line-height: 1.25; display: flex; flex-direction: column; justify-content: flex-start; border-left: 1px solid var(--cz-hair); font-size: var(--fs-
|
|
388
|
+
.tg-h .tg-p > span[data-y] { position: absolute; top: 0; bottom: 0; padding: 7px 10px 0; line-height: 1.25; display: flex; flex-direction: column; justify-content: flex-start; border-left: 1px solid var(--cz-hair); font-size: var(--fs-meta); white-space: nowrap; }
|
|
389
389
|
.tg-q .tg-h .tg-p > span[data-y], .tg-q .tg-h .tg-n { justify-content: center; padding-top: 0; padding-bottom: 0; }
|
|
390
|
-
.tg-h .tg-p > span[data-y] b { color: var(--cz-ink2); font-weight:
|
|
391
|
-
.tg-h .tg-p > span[data-y] small { color: var(--cz-ink3); font-weight:
|
|
390
|
+
.tg-h .tg-p > span[data-y] b { color: var(--cz-ink2); font-weight: var(--fw-strong); }
|
|
391
|
+
.tg-h .tg-p > span[data-y] small { color: var(--cz-ink3); font-weight: var(--fw-strong); font-size: var(--fs-badge); line-height: var(--lh-badge); }
|
|
392
392
|
.tg-gl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--cz-hair); }
|
|
393
393
|
.tg-sb { position: absolute; top: 0; bottom: 0; background: rgba(72,148,234,.05); }
|
|
394
394
|
.tg-rl { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid rgba(42,46,53,.22); }
|
|
@@ -402,8 +402,8 @@ button.tg-n:hover b { color: var(--cz-blueink); }
|
|
|
402
402
|
.tg-end.late { border-color: var(--cz-dot-late); }
|
|
403
403
|
span.tg-end { left: var(--tl-x); cursor: default; } /* a shared board's milestone, set plain by readonly.js (batch 20 item 14) */
|
|
404
404
|
/* the one label at a bar's end (batch 13 item 4, XcalmA1Desk): what lands, then when; the date alone carries the tone */
|
|
405
|
-
.tg-endl { position: absolute; top: 50%; transform: translate(11px, -50%); font-size: var(--fs-
|
|
406
|
-
.tg-endl > b { font-weight:
|
|
405
|
+
.tg-endl { position: absolute; top: 50%; transform: translate(11px, -50%); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink); white-space: nowrap; z-index: 3; line-height: 18px; }
|
|
406
|
+
.tg-endl > b { font-weight: var(--fw-strong); color: var(--cz-ink3); }
|
|
407
407
|
.tg-endl > b.risk { color: var(--cz-risk); }
|
|
408
408
|
.tg-endl > b.late { color: var(--cz-late); }
|
|
409
409
|
.tg-endl > b.q { color: var(--cz-ink3); }
|
|
@@ -411,26 +411,26 @@ span.tg-end { left: var(--tl-x); cursor: default; } /* a shared board's milest
|
|
|
411
411
|
.tg-over { position: absolute; top: 50%; height: 12px; margin-top: -6px; border-radius: 6px; background: repeating-linear-gradient(135deg, var(--cz-c-f0a27a) 0 4px, var(--cz-c-fbdccb) 4px 8px); z-index: 1; }
|
|
412
412
|
.tg-fc { position: absolute; top: 50%; height: 12px; margin-top: -6px; border-radius: 6px; border: 1.5px dashed var(--cz-dot-late); box-sizing: border-box; z-index: 1; }
|
|
413
413
|
.tg-fc.solo { border-color: var(--cz-blue); }
|
|
414
|
-
.tg-lab { position: absolute; top: 50%; transform: translate(8px, -50%); font-size: var(--fs-
|
|
414
|
+
.tg-lab { position: absolute; top: 50%; transform: translate(8px, -50%); font-size: var(--fs-label); font-weight: var(--fw-strong); white-space: nowrap; z-index: 3; line-height: var(--lh-label); }
|
|
415
415
|
.tg-lab.late, .tg-lab.fc { color: var(--cz-late); }
|
|
416
416
|
.tg-dm { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; transform: rotate(45deg); border-radius: 2px; background: var(--cz-blue); z-index: 1; }
|
|
417
|
-
.tg-lgd { position: absolute; top: 12px; right: 18px; z-index: 4; display: flex; gap: 14px; font-size: var(--fs-
|
|
417
|
+
.tg-lgd { position: absolute; top: 12px; right: 18px; z-index: 4; display: flex; gap: 14px; font-size: var(--fs-meta); color: var(--cz-ink3); background: var(--cz-card); padding: 2px 4px; border-radius: 6px; line-height: var(--lh-meta); }
|
|
418
418
|
.tg-lgd .k, .tg-note .k { display: inline-block; width: 14px; height: 7px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
|
|
419
419
|
.tg-lgd .k.dn { background: var(--bd-done); } .tg-lgd .k.pl { background: var(--bd-plan); } .tg-lgd .k.fc { border: 1.5px dashed var(--cz-dot-late); }
|
|
420
420
|
.tg-ax { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 44px; }
|
|
421
421
|
.tg-ax .tg-p { min-height: 44px; }
|
|
422
|
-
.tg-axl { position: absolute; font-size: var(--fs-
|
|
422
|
+
.tg-axl { position: absolute; font-size: var(--fs-badge); font-weight: var(--fw-strong); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; line-height: var(--lh-badge); }
|
|
423
423
|
.tg-axl.td { top: 6px; transform: translateX(-50%); color: var(--cz-ink); }
|
|
424
424
|
.tg-axl.sb { top: 24px; color: var(--cz-blueink); }
|
|
425
425
|
.tg-axl.rl { top: 6px; color: var(--cz-blueink); transform: translateX(-16px); }
|
|
426
426
|
.tg-axl svg, .tg-rel svg { width: 12px; height: 12px; }
|
|
427
|
-
.tg-ft { margin-top: auto; padding: 12px 14px 12px 84px; font-size: var(--fs-
|
|
427
|
+
.tg-ft { margin-top: auto; padding: 12px 14px 12px 84px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); display: flex; align-items: center; gap: 12px; justify-content: space-between; line-height: var(--lh-label); }
|
|
428
428
|
.tg-ft .cz-ms { margin: 0 2px 1px 4px; }
|
|
429
|
-
.tg-none { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--fs-
|
|
430
|
-
.tg-none b { color: var(--cz-ink2); font-weight:
|
|
431
|
-
.tg-none .bd-chip { font-weight:
|
|
432
|
-
.tg-nd { position: absolute; margin-left: 10px; top: 50%; transform: translateY(-50%); font-size: var(--fs-
|
|
433
|
-
.tg-empty { margin: 0; padding: 18px 14px; font-size: var(--fs-
|
|
429
|
+
.tg-none { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); line-height: var(--lh-label); }
|
|
430
|
+
.tg-none b { color: var(--cz-ink2); font-weight: var(--fw-strong); }
|
|
431
|
+
.tg-none .bd-chip { font-weight: var(--fw-strong); }
|
|
432
|
+
.tg-nd { position: absolute; margin-left: 10px; top: 50%; transform: translateY(-50%); font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
433
|
+
.tg-empty { margin: 0; padding: 18px 14px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
434
434
|
/* every span from Quarter on scrolls sideways (pm/bd-scroll.js): the track is --tw wide, the name column stays pinned, the scrollbar shows on
|
|
435
435
|
hover only and the fades show only on the side where there is more (TsCGrill 13, 14) */
|
|
436
436
|
.tg-s { --nw: 250px; }
|
|
@@ -456,8 +456,8 @@ span.tg-end { left: var(--tl-x); cursor: default; } /* a shared board's milest
|
|
|
456
456
|
.tg-s .tg-h .tg-p span.pin { color: var(--cz-ink3); }
|
|
457
457
|
.tg-s .tg-h .tg-p span.pin b { color: var(--cz-ink3); }
|
|
458
458
|
/* Today: the pill on the line in view; off screen the back button beside "Initiative" with its arrow pointing the way (TsCDesk, TsCGrill 4) */
|
|
459
|
-
.tg-tpill { position: absolute; bottom: -9px; transform: translateX(-50%); z-index: 7; font-size: var(--fs-
|
|
460
|
-
.tg-tback { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 9px 0 6px; border-radius: 999px; background: var(--cz-ink); color: var(--cz-card); font:
|
|
459
|
+
.tg-tpill { position: absolute; bottom: -9px; transform: translateX(-50%); z-index: 7; font-size: var(--fs-badge); font-weight: var(--fw-strong); line-height: 18px; padding: 0 7px; border-radius: 999px; background: var(--cz-ink); color: var(--cz-card); white-space: nowrap; pointer-events: none; }
|
|
460
|
+
.tg-tback { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 9px 0 6px; border-radius: 999px; background: var(--cz-ink); color: var(--cz-card); font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); white-space: nowrap; }
|
|
461
461
|
.tg-tback[hidden] { display: none; }
|
|
462
462
|
.tg-tback svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
|
|
463
463
|
.tg-tback.l svg:last-child, .tg-tback.r svg:first-child { display: none; }
|
|
@@ -465,7 +465,7 @@ span.tg-end { left: var(--tl-x); cursor: default; } /* a shared board's milest
|
|
|
465
465
|
.tg-tback:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
|
|
466
466
|
.tg-h { position: relative; z-index: 8; }
|
|
467
467
|
/* the edge tabs (TsCDesk, TsCEdges 1): one per side, at the view's edge; late work in the late colour, a program's milestone in its colour */
|
|
468
|
-
.tg-edge { all: unset; box-sizing: border-box; cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 8px 0 4px; border-radius: 999px; background: var(--cz-well); color: var(--cz-ink2); font:
|
|
468
|
+
.tg-edge { all: unset; box-sizing: border-box; cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 8px 0 4px; border-radius: 999px; background: var(--cz-well); color: var(--cz-ink2); font: var(--fw-strong) var(--fs-badge)/var(--lh-badge) var(--cz-sans); white-space: nowrap; }
|
|
469
469
|
.tg-edge[hidden] { display: none; }
|
|
470
470
|
.tg-edge.r { transform: translate(-100%, -50%); padding: 0 4px 0 8px; }
|
|
471
471
|
.tg-edge svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
|
|
@@ -486,16 +486,16 @@ span.tg-end { left: var(--tl-x); cursor: default; } /* a shared board's milest
|
|
|
486
486
|
.tgq .tg-fade.l { left: 0; }
|
|
487
487
|
.tgq-h { position: relative; height: 38px; background: var(--cz-well); width: var(--tw); }
|
|
488
488
|
.tgq-h .tg-p { position: absolute; inset: 0; min-height: 0; }
|
|
489
|
-
.tgq-h .tg-p > span[data-y] { position: absolute; top: 0; bottom: 0; padding: 6px 8px 0; border-left: 1px solid var(--cz-hair); display: flex; flex-direction: column; font-size: var(--fs-
|
|
490
|
-
.tgq-h .tg-p > span[data-y] b { font-weight:
|
|
491
|
-
.tgq-h .tg-p > span[data-y] small { font-size: var(--fs-
|
|
489
|
+
.tgq-h .tg-p > span[data-y] { position: absolute; top: 0; bottom: 0; padding: 6px 8px 0; border-left: 1px solid var(--cz-hair); display: flex; flex-direction: column; font-size: var(--fs-meta); line-height: 1.2; white-space: nowrap; }
|
|
490
|
+
.tgq-h .tg-p > span[data-y] b { font-weight: var(--fw-strong); color: var(--cz-ink2); }
|
|
491
|
+
.tgq-h .tg-p > span[data-y] small { font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
|
|
492
492
|
.tgq-h .tg-p > span.pin, .tgq-h .tg-p > span.pin b { color: var(--cz-ink3); }
|
|
493
493
|
.tgq-h .tg-tpill { bottom: 2px; }
|
|
494
494
|
.tgq-r { position: relative; width: var(--tw); border-top: 1px solid var(--cz-hair); padding-top: 4px; }
|
|
495
495
|
.tgq-r.sel { background: var(--cz-bluebg); }
|
|
496
496
|
.tgq-r.tg-pg { background: var(--bd-progbg); }
|
|
497
|
-
.tgq-n { all: unset; box-sizing: border-box; position: sticky; left: 0; z-index: 4; display: inline-flex; align-items: center; gap: 6px; max-width: var(--vw, 100%); padding: 2px 10px; font-size: var(--fs-
|
|
498
|
-
.tgq-n b { font-weight:
|
|
497
|
+
.tgq-n { all: unset; box-sizing: border-box; position: sticky; left: 0; z-index: 4; display: inline-flex; align-items: center; gap: 6px; max-width: var(--vw, 100%); padding: 2px 10px; font-size: var(--fs-meta); cursor: pointer; line-height: var(--lh-meta); }
|
|
498
|
+
.tgq-n b { font-weight: var(--fw-strong); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; }
|
|
499
499
|
.tgq-n:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: -2px; border-radius: 8px; }
|
|
500
500
|
.tgq-n.tg-pgn { display: flex; width: var(--vw, 100%); cursor: default; padding: 4px 6px 2px 10px; }
|
|
501
501
|
.tgq-r .tg-p { position: relative; height: 22px; min-height: 0; overflow: hidden; }
|
|
@@ -503,10 +503,10 @@ span.tg-end { left: var(--tl-x); cursor: default; } /* a shared board's milest
|
|
|
503
503
|
.tgq .tg-tback { position: absolute; top: 7px; z-index: 9; }
|
|
504
504
|
.tgq .tg-tback.l { left: 6px; }
|
|
505
505
|
.tgq .tg-tback.r { right: 6px; }
|
|
506
|
-
.tgq .tg-edge { height: 20px; font-size: var(--fs-
|
|
506
|
+
.tgq .tg-edge { height: 20px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
507
507
|
.tgq + .tg-none { margin-top: 12px; }
|
|
508
508
|
.tg-rel { display: inline-flex; align-items: center; gap: 4px; color: var(--cz-blueink); }
|
|
509
|
-
.tg-note { margin: 6px 0 0; font-size: var(--fs-
|
|
509
|
+
.tg-note { margin: 6px 0 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
510
510
|
|
|
511
511
|
/* ── the Deliveries lane (batch 13 item 4, calmer timeline A6: XcalmA6Lane, XcalmA6Fold, XcalmA6Phone; pm/bd-deliveries.js) ──
|
|
512
512
|
one row under the axis: a list per column, the date then the name; missed orange, at risk amber, on hold grey; the current column a faint wash.
|
|
@@ -519,8 +519,8 @@ span.tg-end { left: var(--tl-x); cursor: default; } /* a shared board's milest
|
|
|
519
519
|
.dl-ad { background: none; } /* a missed delivery: Adler's honest face stands where the flag stood (batch 17 item 4-A) */
|
|
520
520
|
.dl-ic.dl-ad svg.ad-svg { width: 24px; height: 24px; fill: initial; stroke: none; }
|
|
521
521
|
.dl-t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
|
|
522
|
-
.dl-t b { font-size: var(--fs-
|
|
523
|
-
.dl-t small { font-size: var(--fs-
|
|
522
|
+
.dl-t b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
|
|
523
|
+
.dl-t small { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
524
524
|
.dl-fb { all: unset; box-sizing: border-box; cursor: pointer; flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--cz-ink3); }
|
|
525
525
|
.dl-fb:hover { background: var(--cz-well); color: var(--cz-ink); }
|
|
526
526
|
.dl-fb:focus-visible, .dl-e:focus-visible, .dl-more:focus-visible, .dl-dn:focus-visible, .dl-fn:focus-visible, .dl-pl:focus-visible, .dl-all:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 1px; border-radius: 8px; }
|
|
@@ -530,34 +530,34 @@ span.tg-end { left: var(--tl-x); cursor: default; } /* a shared board's milest
|
|
|
530
530
|
.dl-c.now { background: color-mix(in srgb, var(--cz-blue) 6%, transparent); }
|
|
531
531
|
.dl-e, .dl-pl, .dl-fn { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 3px 6px; margin: 0 -6px; border-radius: 8px; }
|
|
532
532
|
.dl-e:hover, .dl-pl:hover { background: var(--cz-well); }
|
|
533
|
-
.dl-e small, .dl-pl small, .dl-fn small { font-size: var(--fs-
|
|
534
|
-
.dl-e b { font-size: var(--fs-
|
|
533
|
+
.dl-e small, .dl-pl small, .dl-fn small { font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); white-space: nowrap; line-height: var(--lh-badge); }
|
|
534
|
+
.dl-e b { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: 1.3; display: flex; gap: 4px; align-items: flex-start; min-width: 0; }
|
|
535
535
|
.dl-e b span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
|
|
536
536
|
.dl-pg { flex: none; display: inline-grid; place-items: center; color: var(--bd-prog); margin-top: 1px; }
|
|
537
537
|
.dl-pg svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
|
|
538
538
|
.dl-e.late small, .dl-ph .late, .dl-fold .late, .dl-fn small.late, .dl-pl small.late { color: var(--cz-late); }
|
|
539
539
|
.dl-e.risk small, .dl-fn small.risk, .dl-pl small.risk { color: var(--cz-risk); }
|
|
540
|
-
.dl-e.hold small, .dl-fn small.hold, .dl-pl small.hold { color: var(--cz-ink3); font-weight:
|
|
540
|
+
.dl-e.hold small, .dl-fn small.hold, .dl-pl small.hold { color: var(--cz-ink3); font-weight: var(--fw-strong); }
|
|
541
541
|
.dl-e.fc small, .dl-fn small.fc, .dl-pl small.fc { color: var(--cz-blueink); }
|
|
542
542
|
.dl-e.dn small { color: var(--cz-ok); } .dl-e.dn b { color: var(--cz-ink3); }
|
|
543
|
-
.dl-more, .dl-dn, .dl-all { all: unset; box-sizing: border-box; cursor: pointer; font-size: var(--fs-
|
|
543
|
+
.dl-more, .dl-dn, .dl-all { all: unset; box-sizing: border-box; cursor: pointer; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); padding: 2px 0; line-height: var(--lh-label); }
|
|
544
544
|
.dl-more:hover, .dl-dn:hover, .dl-all:hover { color: var(--cz-ink); }
|
|
545
|
-
.dl-more.n { font-size: var(--fs-
|
|
546
|
-
.dl-fold { position: sticky; left: calc(var(--nw) + 12px); display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 6px; padding: 10px 12px; font-size: var(--fs-
|
|
547
|
-
.dl-fx { color: var(--cz-ink3); font-weight:
|
|
548
|
-
.dl-fn { flex-direction: row; align-items: center; gap: 6px; margin: 0; padding: 2px 4px; font-weight:
|
|
545
|
+
.dl-more.n { font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
|
|
546
|
+
.dl-fold { position: sticky; left: calc(var(--nw) + 12px); display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 6px; padding: 10px 12px; font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; line-height: var(--lh-meta); }
|
|
547
|
+
.dl-fx { color: var(--cz-ink3); font-weight: var(--fw-strong); }
|
|
548
|
+
.dl-fn { flex-direction: row; align-items: center; gap: 6px; margin: 0; padding: 2px 4px; font-weight: var(--fw-strong); color: var(--cz-ink); }
|
|
549
549
|
.dl-fn:hover { background: var(--cz-well); }
|
|
550
550
|
.tg-r.dl-hl, .tgq-r.dl-hl { background: color-mix(in srgb, var(--cz-blue) 7%, transparent); }
|
|
551
551
|
.tg-s .tg-r.dl-hl > .tg-n { background: linear-gradient(color-mix(in srgb, var(--cz-blue) 7%, transparent), color-mix(in srgb, var(--cz-blue) 7%, transparent)), var(--cz-card); }
|
|
552
552
|
.dl-ring { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cz-blue) 35%, transparent); }
|
|
553
553
|
.dl-ph { border: 1px solid var(--cz-hair); border-radius: 16px; background: var(--cz-card); padding: 10px 14px 8px; margin-bottom: 12px; }
|
|
554
|
-
.dl-phh { display: flex; align-items: center; gap: 6px; min-height: 32px; font-size: var(--fs-
|
|
555
|
-
.dl-phh b { font-weight:
|
|
556
|
-
.dl-phh .late { font-size: var(--fs-
|
|
557
|
-
.dl-all { margin-left: auto; min-height: 44px; padding: 0 4px; font-size: var(--fs-
|
|
554
|
+
.dl-phh { display: flex; align-items: center; gap: 6px; min-height: 32px; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
555
|
+
.dl-phh b { font-weight: var(--fw-strong); }
|
|
556
|
+
.dl-phh .late { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
557
|
+
.dl-all { margin-left: auto; min-height: 44px; padding: 0 4px; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
|
|
558
558
|
.dl-pl { flex-direction: row; align-items: baseline; gap: 12px; margin: 0 -6px; min-height: 36px; }
|
|
559
|
-
.dl-pl small { flex: none; width: 52px; font-size: var(--fs-
|
|
560
|
-
.dl-pl b { font-size: var(--fs-
|
|
559
|
+
.dl-pl small { flex: none; width: 52px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
560
|
+
.dl-pl b { font-size: var(--fs-row); font-weight: var(--fw-strong); display: flex; gap: 5px; min-width: 0; line-height: var(--lh-row); }
|
|
561
561
|
.dl-pl b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
562
562
|
|
|
563
563
|
/* ── between desktop and phone: the Output column narrows first ── */
|
|
@@ -569,7 +569,7 @@ span.tg-end { left: var(--tl-x); cursor: default; } /* a shared board's milest
|
|
|
569
569
|
@media (max-width: 980px) and (min-width: 721px) {
|
|
570
570
|
.bt-r { grid-template-columns: 180px 400px minmax(0, 1fr); }
|
|
571
571
|
.bt-cells { grid-template-columns: repeat(8, 50px); }
|
|
572
|
-
.bt-h .bt-cells > div { font-size: var(--fs-
|
|
572
|
+
.bt-h .bt-cells > div { font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
573
573
|
.tg-r, .tg-ax { grid-template-columns: 180px minmax(0, 1fr); }
|
|
574
574
|
.tg-s { --nw: 180px; }
|
|
575
575
|
}
|
|
@@ -602,9 +602,9 @@ span.tg-end { left: var(--tl-x); cursor: default; } /* a shared board's milest
|
|
|
602
602
|
.bt-l:hover { background: var(--cz-card); }
|
|
603
603
|
.bt-l.sel { box-shadow: 0 0 0 3px rgba(72,148,234,.25); background: var(--cz-card); }
|
|
604
604
|
.bt-nm { grid-area: nm; padding: 0; min-height: 44px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-content: start; }
|
|
605
|
-
.bt-nm b { font-size: var(--fs-
|
|
606
|
-
.bt-nm .cs { grid-column: 1; font-size: var(--fs-
|
|
607
|
-
.bt-pst { display: block; grid-column: 2; grid-row: 1; font-size: var(--fs-
|
|
605
|
+
.bt-nm b { font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
606
|
+
.bt-nm .cs { grid-column: 1; font-size: var(--fs-meta); margin-top: 2px; line-height: var(--lh-meta); }
|
|
607
|
+
.bt-pst { display: block; grid-column: 2; grid-row: 1; font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; align-self: center; line-height: var(--lh-meta); }
|
|
608
608
|
.bt-pst .cz-ms { margin: 0 4px 1px 0; color: var(--cz-ink2); }
|
|
609
609
|
.bt-cells { grid-area: cells; display: flex; justify-content: space-between; align-items: center; height: 12px; margin: 1px 0 0; position: relative; } /* the track 20 px under the status line (AgBoardPhone) */
|
|
610
610
|
.bt-cells::before { content: ""; position: absolute; left: 3px; right: 3px; top: 5px; height: 2px; background: var(--bd-rail); }
|
|
@@ -621,13 +621,13 @@ span.tg-end { left: var(--tl-x); cursor: default; } /* a shared board's milest
|
|
|
621
621
|
.bt-dl { grid-area: dl; border: 0; padding: 9px 0 0; gap: 4px; }
|
|
622
622
|
.bt-dl:empty { display: none; }
|
|
623
623
|
.bt-l:has(.sc .eta) .bt-dl { padding-top: 20px; } /* the committed date under ◆ sits over the line's top */
|
|
624
|
-
.bt-dl .bd-nx { padding-top: 7px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-
|
|
624
|
+
.bt-dl .bd-nx { padding-top: 7px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
625
625
|
.bd-nxa { display: none; }
|
|
626
626
|
.bt-tf { border: 0; background: none; padding: 4px; }
|
|
627
627
|
.bt-tf .dlink { min-height: 44px; }
|
|
628
628
|
.bt-srt { display: none; }
|
|
629
629
|
.bd-pop { position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px; max-height: 80vh; border-radius: 24px; padding: 18px; }
|
|
630
|
-
.bd-help-h h2 { font-size: var(--fs-
|
|
630
|
+
.bd-help-h h2 { font-size: var(--fs-panel); line-height: var(--lh-panel); }
|
|
631
631
|
.bd-tbl { grid-template-columns: 1fr 1fr; }
|
|
632
632
|
.bd-tr.th { display: none; }
|
|
633
633
|
.bd-tr > span:nth-child(n+3) { grid-column: 1 / -1; border-top: 0; padding-top: 0; }
|
|
@@ -641,17 +641,17 @@ span.tg-end { left: var(--tl-x); cursor: default; } /* a shared board's milest
|
|
|
641
641
|
}
|
|
642
642
|
|
|
643
643
|
/* ── the plain versions of what the Agreed design has no frame for (pm/bd-acts.js): a small "Waiting for design" tag on each ── */
|
|
644
|
-
.bd-wtag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; border: 1px dashed var(--bd-pass); color: var(--cz-ink3); font:
|
|
644
|
+
.bd-wtag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; border: 1px dashed var(--bd-pass); color: var(--cz-ink3); font: var(--fw-strong) var(--fs-badge)/var(--lh-badge) var(--cz-sans); white-space: nowrap; vertical-align: middle; }
|
|
645
645
|
.pk-eye .bd-wtag { margin-left: 6px; }
|
|
646
|
-
.bd-whead { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: var(--fs-
|
|
647
|
-
.bd-amut { margin: 0; font-size: var(--fs-
|
|
648
|
-
.bd-amsg { margin: 0; min-height: 1em; font-size: var(--fs-
|
|
646
|
+
.bd-whead { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
647
|
+
.bd-amut { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
648
|
+
.bd-amsg { margin: 0; min-height: 1em; font-size: var(--fs-meta); color: var(--cz-red); line-height: var(--lh-meta); }
|
|
649
649
|
.bd-amsg:empty { display: none; }
|
|
650
|
-
.bd-albl { margin: 6px 0 4px; font-size: var(--fs-
|
|
651
|
-
.bd-asub { margin: 0; font-size: var(--fs-
|
|
652
|
-
.bd-quote { margin: 0; font-size: var(--fs-
|
|
650
|
+
.bd-albl { margin: 6px 0 4px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
|
|
651
|
+
.bd-asub { margin: 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
|
|
652
|
+
.bd-quote { margin: 0; font-size: var(--fs-body); color: var(--cz-ink); background: var(--cz-well); border-radius: 12px; padding: 10px 12px; line-height: var(--lh-body); }
|
|
653
653
|
.bd-pl { display: flex; flex-direction: column; gap: 10px; }
|
|
654
|
-
.bd-btn { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font:
|
|
654
|
+
.bd-btn { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: var(--fw-strong) var(--fs-row)/var(--lh-row) var(--cz-sans); cursor: pointer; white-space: nowrap; }
|
|
655
655
|
.bd-btn:hover { background: var(--cz-well); }
|
|
656
656
|
.bd-btn.solid { background: var(--cz-ink); color: var(--cz-card); border-color: transparent; }
|
|
657
657
|
.bd-btn.solid:hover { filter: brightness(1.2); }
|
|
@@ -659,70 +659,70 @@ span.tg-end { left: var(--tl-x); cursor: default; } /* a shared board's milest
|
|
|
659
659
|
.bd-btn:focus-visible, .bd-ai:focus-visible, .bd-lr:focus-visible, .bd-card:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
|
|
660
660
|
.bd-arow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
|
|
661
661
|
.bd-form { display: flex; flex-direction: column; gap: 10px; }
|
|
662
|
-
.bd-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-
|
|
663
|
-
.bd-form label em { font-style: normal; font-weight:
|
|
664
|
-
.bd-form input:not([type="radio"]):not([type="checkbox"]), .bd-form select, .bd-form textarea { font:
|
|
662
|
+
.bd-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
|
|
663
|
+
.bd-form label em { font-style: normal; font-weight: var(--fw-strong); }
|
|
664
|
+
.bd-form input:not([type="radio"]):not([type="checkbox"]), .bd-form select, .bd-form textarea { font: var(--fw-regular) var(--fs-meta)/var(--lh-meta) var(--cz-sans); color: var(--cz-ink); background: var(--cz-card); border: 1px solid var(--cz-hair); border-radius: 12px; padding: 8px 10px; min-height: 36px; width: 100%; }
|
|
665
665
|
.bd-form input:focus-visible, .bd-form select:focus-visible, .bd-form textarea:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 1px; }
|
|
666
666
|
.bd-rad, .bd-chks { display: flex; flex-direction: column; gap: 4px; }
|
|
667
|
-
.bd-form .bd-rad label, .bd-chk { flex-direction: row; align-items: center; gap: 8px; font-size: var(--fs-
|
|
667
|
+
.bd-form .bd-rad label, .bd-chk { flex-direction: row; align-items: center; gap: 8px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); cursor: pointer; display: flex; min-height: 28px; line-height: var(--lh-label); }
|
|
668
668
|
.bd-alist { display: flex; flex-direction: column; border-top: 1px solid var(--cz-hair); }
|
|
669
669
|
.bd-ai { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 10px 4px; border-bottom: 1px solid var(--cz-hair); }
|
|
670
670
|
.bd-ai:hover b { color: var(--cz-blueink); }
|
|
671
|
-
.bd-ai b { font-size: var(--fs-
|
|
671
|
+
.bd-ai b { font-size: var(--fs-body); line-height: var(--lh-body); } .bd-ai small { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
672
672
|
.bd-ai:disabled { opacity: .5; }
|
|
673
673
|
.bd-ar { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--cz-hair); }
|
|
674
|
-
.bd-ar .t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .bd-ar small { color: var(--cz-ink3); font-size: var(--fs-
|
|
674
|
+
.bd-ar .t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .bd-ar small { color: var(--cz-ink3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
675
675
|
.bd-ask { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--cz-hair); }
|
|
676
|
-
.bd-ask small { font-size: var(--fs-
|
|
677
|
-
.bd-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: var(--fs-
|
|
676
|
+
.bd-ask small { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
677
|
+
.bd-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
678
678
|
.bd-kv span { color: var(--cz-ink3); }
|
|
679
679
|
.bd-rows { display: flex; flex-direction: column; border: 1px solid var(--cz-hair); border-radius: 18px; overflow: hidden; }
|
|
680
|
-
.bd-lr { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) 110px 170px 110px; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-
|
|
680
|
+
.bd-lr { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) 110px 170px 110px; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-body); cursor: pointer; line-height: var(--lh-body); }
|
|
681
681
|
.bd-lr:first-child { border-top: 0; }
|
|
682
682
|
button.bd-lr:hover { background: var(--bd-row); }
|
|
683
683
|
.bd-lr.doc { grid-template-columns: minmax(0, 1fr) 100px minmax(0, 200px) auto; cursor: default; }
|
|
684
|
-
.bd-lr .t { display: flex; flex-direction: column; min-width: 0; } .bd-lr .t small { color: var(--cz-ink3); font-size: var(--fs-
|
|
685
|
-
.bd-lr .st, .bd-lr .pth, .bd-lr .fin { color: var(--cz-ink3); font-size: var(--fs-
|
|
686
|
-
.bd-lr .fin.over { color: var(--cz-late); font-weight:
|
|
684
|
+
.bd-lr .t { display: flex; flex-direction: column; min-width: 0; } .bd-lr .t small { color: var(--cz-ink3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
685
|
+
.bd-lr .st, .bd-lr .pth, .bd-lr .fin { color: var(--cz-ink3); font-size: var(--fs-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--lh-meta); }
|
|
686
|
+
.bd-lr .fin.over { color: var(--cz-late); font-weight: var(--fw-strong); }
|
|
687
687
|
.bd-gone { margin: 8px 0 0; }
|
|
688
|
-
.bd-dlink { all: unset; cursor: pointer; font-weight:
|
|
688
|
+
.bd-dlink { all: unset; cursor: pointer; font-weight: var(--fw-strong); color: var(--cz-ink); }
|
|
689
689
|
.bd-dlink:hover { color: var(--cz-blueink); }
|
|
690
690
|
.bd-dlink:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; border-radius: 4px; }
|
|
691
|
-
.bd-issue { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 10px 12px; border-radius: 14px; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-
|
|
691
|
+
.bd-issue { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 10px 12px; border-radius: 14px; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-label); font-weight: var(--fw-strong); line-height: var(--lh-label); }
|
|
692
692
|
.bd-issue.done { background: var(--cz-okbg); color: var(--cz-ok); }
|
|
693
693
|
@media (max-width: 720px) { .bd-issue .bd-btn { min-height: 44px; } }
|
|
694
694
|
.bd-dochd { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 10px; }
|
|
695
695
|
.bd-dochd .bd-whead { margin: 0; }
|
|
696
696
|
@media (max-width: 720px) { .bd-dochd .bd-btn { min-height: 44px; } }
|
|
697
|
-
.bd-gone .dlink, .bt-qt .dlink { font:
|
|
697
|
+
.bd-gone .dlink, .bt-qt .dlink { font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); color: var(--cz-ink3); background: none; border: 0; cursor: pointer; padding: 0; }
|
|
698
698
|
.bd-gone .dlink:hover, .bt-qt .dlink:hover { color: var(--cz-ink); }
|
|
699
699
|
.bt-qt { margin-left: auto; display: inline-flex; gap: 14px; align-items: center; }
|
|
700
700
|
.bd-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
|
|
701
701
|
.bd-col { display: flex; flex-direction: column; gap: 6px; background: var(--bd-row); border-radius: 16px; padding: 10px; min-height: 160px; }
|
|
702
|
-
.bd-col h3 { margin: 0 0 4px; font-size: var(--fs-
|
|
702
|
+
.bd-col h3 { margin: 0 0 4px; font-size: var(--fs-label); font-weight: var(--fw-strong); display: flex; align-items: center; gap: 6px; line-height: var(--lh-label); }
|
|
703
703
|
.bd-col h3 span { color: var(--cz-ink3); }
|
|
704
|
-
.bd-card { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 4px; background: var(--cz-card); border: 1px solid var(--cz-hair); border-radius: 12px; padding: 8px 10px; font-size: var(--fs-
|
|
704
|
+
.bd-card { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 4px; background: var(--cz-card); border: 1px solid var(--cz-hair); border-radius: 12px; padding: 8px 10px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
705
705
|
.bd-card:hover b { color: var(--cz-blueink); }
|
|
706
|
-
.bd-doc { margin: 8px 0 0; white-space: pre-wrap; word-break: break-word; font: var(--fs-
|
|
706
|
+
.bd-doc { margin: 8px 0 0; white-space: pre-wrap; word-break: break-word; font: var(--fs-body)/1.55 var(--cz-sans); color: var(--cz-ink); }
|
|
707
707
|
|
|
708
708
|
/* the Group control on the long spans */
|
|
709
709
|
.bd-grpw { position: relative; display: inline-flex; }
|
|
710
710
|
.bd-grpm { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; display: flex; flex-direction: column; min-width: 150px; padding: 6px; background: var(--cz-card); border: 1px solid var(--cz-hair); border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(42,46,53,.35); }
|
|
711
711
|
.bd-grpm[hidden] { display: none; }
|
|
712
|
-
.bd-grpm button { all: unset; cursor: pointer; padding: 8px 10px; border-radius: 10px; font:
|
|
712
|
+
.bd-grpm button { all: unset; cursor: pointer; padding: 8px 10px; border-radius: 10px; font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); color: var(--cz-ink2); }
|
|
713
713
|
.bd-grpm button:hover, .bd-grpm button:focus-visible { background: var(--cz-well); color: var(--cz-ink); }
|
|
714
|
-
.bd-grpm button[aria-checked="true"] { color: var(--cz-blueink); font-weight:
|
|
714
|
+
.bd-grpm button[aria-checked="true"] { color: var(--cz-blueink); font-weight: var(--fw-strong); }
|
|
715
715
|
|
|
716
716
|
/* the trail in the panels: the next part, PRD drift that is clear */
|
|
717
|
-
.pk-nx { margin: 8px 0 0; font-size: var(--fs-
|
|
717
|
+
.pk-nx { margin: 8px 0 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
718
718
|
.pk-nx b { color: var(--cz-ink); }
|
|
719
719
|
.pk-wt.ok { color: var(--cz-ok); background: var(--cz-okbg); }
|
|
720
720
|
|
|
721
721
|
/* timeline milestones: a release's sign-off, "Push tickets", "after <initiative>" */
|
|
722
722
|
.tg-msd { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; transform: rotate(45deg); border-radius: 2px; background: var(--cz-blue); z-index: 4; }
|
|
723
|
-
.tg-msl { position: absolute; top: calc(50% - 30px); transform: translateX(10px); font-size: var(--fs-
|
|
723
|
+
.tg-msl { position: absolute; top: calc(50% - 30px); transform: translateX(10px); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-blueink); white-space: nowrap; z-index: 4; line-height: var(--lh-label); } /* AgBoardTimeline: a blue ◆ and its bold label above the bar */
|
|
724
724
|
.tg-msl.you { top: 50%; transform: translate(10px, -50%); }
|
|
725
|
-
.tg-dep { position: absolute; bottom: 1px; font-size: var(--fs-
|
|
725
|
+
.tg-dep { position: absolute; bottom: 1px; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; z-index: 3; line-height: var(--lh-badge); }
|
|
726
726
|
.tg-dep svg { width: 11px; height: 11px; }
|
|
727
727
|
|
|
728
728
|
@media (max-width: 720px) {
|
|
@@ -738,7 +738,7 @@ button.bd-lr:hover { background: var(--bd-row); }
|
|
|
738
738
|
.bd-phb { display: inline-flex; flex-wrap: wrap; gap: 6px; }
|
|
739
739
|
.bd-phscroll { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
|
|
740
740
|
.bd-phscroll .tg { min-width: 960px; }
|
|
741
|
-
.bd-alink { color: var(--cz-blueink); font-weight:
|
|
741
|
+
.bd-alink { color: var(--cz-blueink); font-weight: var(--fw-strong); text-decoration: none; border-radius: 4px; }
|
|
742
742
|
.bd-alink:hover { text-decoration: underline; }
|
|
743
743
|
.bd-alink:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
|
|
744
744
|
@media (max-width: 720px) {
|
|
@@ -753,23 +753,23 @@ button.bd-lr:hover { background: var(--bd-row); }
|
|
|
753
753
|
.bd-pp[hidden], .bd-scrim[hidden] { display: none; }
|
|
754
754
|
.bd-scrim { position: fixed; inset: 0; z-index: 74; background: rgba(42,46,53,.32); }
|
|
755
755
|
.bd-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--cz-hair); margin: 2px auto 8px; flex: none; }
|
|
756
|
-
.bd-mi { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 12px; font:
|
|
756
|
+
.bd-mi { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 12px; font: var(--fw-strong) var(--fs-row)/var(--lh-row) var(--cz-sans); color: var(--cz-ink); width: 100%; cursor: pointer; }
|
|
757
757
|
.bd-mi:hover, .bd-mi.hl { background: var(--cz-well); }
|
|
758
758
|
.bd-mi:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: -2px; }
|
|
759
759
|
.bd-mi svg { width: 16px; height: 16px; color: var(--cz-ink2); flex: none; }
|
|
760
|
-
.bd-mi .k { margin-left: auto; font-size: var(--fs-
|
|
760
|
+
.bd-mi .k { margin-left: auto; font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); white-space: nowrap; line-height: var(--lh-label); }
|
|
761
761
|
.bd-mi .tx { display: flex; flex-direction: column; min-width: 0; flex: 1; padding: 6px 0; }
|
|
762
762
|
.bd-mi .tx > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
763
|
-
.bd-mi .tx small { font-size: var(--fs-
|
|
763
|
+
.bd-mi .tx small { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
|
|
764
764
|
.bd-mi mark { background: var(--cz-bluebg); color: var(--cz-blueink); border-radius: 3px; }
|
|
765
|
-
.bd-mlbl { margin: 0; font-size: var(--fs-
|
|
765
|
+
.bd-mlbl { margin: 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); padding: 8px 12px 4px; line-height: var(--lh-label); }
|
|
766
766
|
.bd-mnote { padding: 4px 12px 8px; }
|
|
767
767
|
.bd-hr { height: 1px; background: var(--cz-hair); margin: 4px 6px; flex: none; }
|
|
768
768
|
.bd-ppb { display: flex; flex-direction: column; gap: 8px; padding: 4px 12px 10px; }
|
|
769
|
-
.bd-pp .sm, .bd-actsvw .sm { font-size: var(--fs-
|
|
770
|
-
.bd-pp b.sm { font-weight:
|
|
769
|
+
.bd-pp .sm, .bd-actsvw .sm { font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
770
|
+
.bd-pp b.sm { font-weight: var(--fw-strong); }
|
|
771
771
|
/* the canvas's small parts */
|
|
772
|
-
.bd-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font:
|
|
772
|
+
.bd-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font: var(--fw-strong) var(--fs-badge)/var(--lh-badge) var(--cz-sans); background: var(--cz-well); color: var(--cz-ink2); white-space: nowrap; flex: none; }
|
|
773
773
|
.bd-pill.y { background: var(--cz-bluebg); color: var(--cz-blueink); }
|
|
774
774
|
.bd-pill.w { background: var(--cz-riskbg); color: var(--cz-risk); }
|
|
775
775
|
.bd-pill.l { background: var(--cz-latebg); color: var(--cz-late); }
|
|
@@ -777,29 +777,29 @@ button.bd-lr:hover { background: var(--bd-row); }
|
|
|
777
777
|
.bd-pill.ok { background: var(--cz-okbg); color: var(--cz-ok); }
|
|
778
778
|
.bd-pills, .bd-chips, .bd-mchips, .bd-fg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
|
|
779
779
|
.bd-fg { padding: 0 12px 6px; }
|
|
780
|
-
.bd-box { background: var(--cz-well); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-
|
|
781
|
-
.bd-box.sm { padding: 10px 12px; font-size: var(--fs-
|
|
782
|
-
.bd-box b { font-weight:
|
|
783
|
-
.bd-boxh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: var(--fs-
|
|
784
|
-
.bd-need { background: var(--cz-bluebg); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; font-size: var(--fs-
|
|
780
|
+
.bd-box { background: var(--cz-well); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
781
|
+
.bd-box.sm { padding: 10px 12px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
782
|
+
.bd-box b { font-weight: var(--fw-strong); }
|
|
783
|
+
.bd-boxh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
784
|
+
.bd-need { background: var(--cz-bluebg); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
785
785
|
.bd-need svg { width: 16px; height: 16px; color: var(--cz-blueink); flex: none; }
|
|
786
|
-
.bd-need.sm { padding: 10px 12px; font-size: var(--fs-
|
|
787
|
-
.bd-warn { background: var(--cz-riskbg); border-radius: 14px; padding: 12px 14px; color: var(--cz-risk); display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-
|
|
788
|
-
.bd-warn.sm { padding: 8px 12px; font-size: var(--fs-
|
|
786
|
+
.bd-need.sm { padding: 10px 12px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
787
|
+
.bd-warn { background: var(--cz-riskbg); border-radius: 14px; padding: 12px 14px; color: var(--cz-risk); display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-body); margin: 0; line-height: var(--lh-body); }
|
|
788
|
+
.bd-warn.sm { padding: 8px 12px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
789
789
|
.bd-warn span { color: var(--cz-ink2); }
|
|
790
|
-
.bd-field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-
|
|
791
|
-
.bd-flbl { font-size: var(--fs-
|
|
792
|
-
.bd-form .bd-field { font-size: var(--fs-
|
|
793
|
-
.bd-inp, .bd-form .bd-inp { height: 42px; border-radius: 14px; background: var(--cz-well); border: 1px solid transparent; padding: 0 14px; font:
|
|
794
|
-
.bd-inp.sm { height: 34px; font-size: var(--fs-
|
|
790
|
+
.bd-field { 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); }
|
|
791
|
+
.bd-flbl { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
|
|
792
|
+
.bd-form .bd-field { font-size: var(--fs-meta); color: var(--cz-ink2); gap: 6px; line-height: var(--lh-meta); }
|
|
793
|
+
.bd-inp, .bd-form .bd-inp { height: 42px; border-radius: 14px; background: var(--cz-well); border: 1px solid transparent; padding: 0 14px; font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--cz-sans); color: var(--cz-ink); width: 100%; box-sizing: border-box; }
|
|
794
|
+
.bd-inp.sm { height: 34px; font-size: var(--fs-meta); border-radius: 12px; line-height: var(--lh-meta); }
|
|
795
795
|
.bd-inp.ta, .bd-form textarea.bd-inp { height: auto; min-height: 72px; padding: 10px 14px; resize: vertical; }
|
|
796
|
-
.bd-inp.ro { display: flex; align-items: center; color: var(--cz-ink2); font-weight:
|
|
796
|
+
.bd-inp.ro { display: flex; align-items: center; color: var(--cz-ink2); font-weight: var(--fw-strong); }
|
|
797
797
|
.bd-inp:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 1px; }
|
|
798
|
-
.bd-av { width: 26px; height: 26px; border-radius: 50%; background: var(--cz-well2); color: var(--cz-ink2); font:
|
|
799
|
-
.bd-av.sm { width: 22px; height: 22px; font-size: var(--fs-
|
|
800
|
-
.bd-av.xs { width: 18px; height: 18px; font-size: var(--fs-
|
|
798
|
+
.bd-av { width: 26px; height: 26px; border-radius: 50%; background: var(--cz-well2); color: var(--cz-ink2); font: var(--fw-strong) var(--fs-badge)/var(--lh-badge) var(--cz-sans); display: inline-flex; align-items: center; justify-content: center; flex: none; }
|
|
799
|
+
.bd-av.sm { width: 22px; height: 22px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
800
|
+
.bd-av.xs { width: 18px; height: 18px; font-size: var(--fs-meta); margin-left: -4px; line-height: var(--lh-meta); }
|
|
801
801
|
.bd-av.b { background: var(--cz-bluebg); color: var(--cz-blueink); }
|
|
802
|
-
.bd-kbd { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 7px; background: var(--cz-well); font:
|
|
802
|
+
.bd-kbd { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 7px; background: var(--cz-well); font: var(--fw-strong) var(--fs-badge)/var(--lh-badge) var(--cz-sans); color: var(--cz-ink3); flex: none; }
|
|
803
803
|
.bd-bar { display: block; height: 6px; border-radius: 3px; background: var(--bd-rail); overflow: hidden; min-width: 60px; }
|
|
804
804
|
.bd-bar i { display: block; height: 100%; border-radius: 3px; background: var(--bd-done); }
|
|
805
805
|
.bd-bar i.cnt { background: repeating-linear-gradient(45deg, var(--cz-c-8c929b) 0 4px, var(--cz-c-b9bdc4) 4px 8px); }
|
|
@@ -807,20 +807,20 @@ button.bd-lr:hover { background: var(--bd-row); }
|
|
|
807
807
|
.bd-bar.y i.cnt { background: repeating-linear-gradient(45deg, var(--cz-blue) 0 4px, var(--cz-bluebg) 4px 8px); }
|
|
808
808
|
.bd-ell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
809
809
|
.bd-push { margin-left: auto; } .bd-push0 { flex: 1; min-width: 0; }
|
|
810
|
-
.bd-lbl { margin: 4px 0 0; font-size: var(--fs-
|
|
811
|
-
.bd-h3 { margin: 0; font-size: var(--fs-
|
|
812
|
-
.bd-late { color: var(--cz-late); font-weight:
|
|
810
|
+
.bd-lbl { margin: 4px 0 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
|
|
811
|
+
.bd-h3 { margin: 0; font-size: var(--fs-section); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-section); }
|
|
812
|
+
.bd-late { color: var(--cz-late); font-weight: var(--fw-strong); }
|
|
813
813
|
.bd-x0 { all: unset; cursor: pointer; display: inline-flex; margin-right: -4px; color: var(--cz-ink3); }
|
|
814
814
|
.bd-x0 svg { width: 12px; height: 12px; }
|
|
815
|
-
.bd-chip.sm { height: 26px; padding: 0 9px; font-size: var(--fs-
|
|
816
|
-
.bd-btn.sm { height: 30px; padding: 0 11px; font-size: var(--fs-
|
|
815
|
+
.bd-chip.sm { height: 26px; padding: 0 9px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
816
|
+
.bd-btn.sm { height: 30px; padding: 0 11px; font-size: var(--fs-meta); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; line-height: var(--lh-meta); }
|
|
817
817
|
.bd-btn.ghost { border-color: transparent; background: transparent; color: var(--cz-ink2); }
|
|
818
818
|
.bd-btn.ghost:hover { background: var(--cz-well); }
|
|
819
819
|
.bd-btn.wide { width: 100%; height: 44px; }
|
|
820
820
|
.bd-btn svg { width: 14px; height: 14px; }
|
|
821
821
|
.bd-btn.on { background: var(--cz-bluebg); color: var(--cz-blueink); border-color: transparent; }
|
|
822
822
|
a.bd-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
|
|
823
|
-
.bd-seg > button:not(.bd-ib) { all: unset; cursor: pointer; height: 30px; padding: 0 12px; border-radius: 999px; font:
|
|
823
|
+
.bd-seg > button:not(.bd-ib) { all: unset; cursor: pointer; height: 30px; padding: 0 12px; border-radius: 999px; font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); color: var(--cz-ink3); display: inline-flex; align-items: center; }
|
|
824
824
|
.bd-seg > button[aria-pressed="true"]:not(.bd-ib) { background: var(--cz-card); color: var(--cz-ink); box-shadow: 0 1px 3px rgba(42,46,53,.12); }
|
|
825
825
|
.bd-pfoot { margin-top: auto; padding-top: 6px; }
|
|
826
826
|
/* the "Showing" bar (BdFilter) */
|
|
@@ -828,26 +828,26 @@ a.bd-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration:
|
|
|
828
828
|
.bd-showing { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
|
|
829
829
|
.bd-showing .bd-mlbl { padding: 0 4px 0 0; }
|
|
830
830
|
.bd-showing .bd-chip svg { width: 12px; height: 12px; }
|
|
831
|
-
.bd-showing .dlink { font:
|
|
831
|
+
.bd-showing .dlink { font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); color: var(--cz-blueink); background: none; border: 0; cursor: pointer; padding: 0 4px; }
|
|
832
832
|
/* Find, Filter */
|
|
833
833
|
.bd-finp { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px 0 12px; border-radius: 14px; background: var(--cz-well); margin: 2px 2px 6px; }
|
|
834
834
|
.bd-finp svg { width: 16px; height: 16px; color: var(--cz-ink3); flex: none; }
|
|
835
|
-
.bd-finp input { flex: 1; min-width: 0; border: 0; background: none; font:
|
|
835
|
+
.bd-finp input { flex: 1; min-width: 0; border: 0; background: none; font: var(--fw-strong) var(--fs-row)/var(--lh-row) var(--cz-sans); color: var(--cz-ink); outline: none; }
|
|
836
836
|
.bd-finp input::-webkit-search-cancel-button { display: none; }
|
|
837
837
|
.bd-fres { display: flex; flex-direction: column; gap: 2px; }
|
|
838
838
|
.bd-ffoot { padding: 8px 6px 2px; border-top: 1px solid var(--cz-hair); margin-top: 4px; }
|
|
839
839
|
/* the row menu, the asks, the trend */
|
|
840
|
-
.bd-menu .bd-mlbl:first-child { color: var(--cz-ink); font-size: var(--fs-
|
|
840
|
+
.bd-menu .bd-mlbl:first-child { color: var(--cz-ink); font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
841
841
|
.bd-phead { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px 6px; flex-wrap: wrap; }
|
|
842
842
|
.bd-aface { display: inline-flex; align-self: center; flex: none; } /* Adler heads New asks (batch 17 item 4-A) */
|
|
843
843
|
.bd-acards { display: flex; flex-direction: column; gap: 8px; padding: 0 4px 4px; }
|
|
844
|
-
.bd-acard { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--cz-hair); background: var(--cz-card); font-size: var(--fs-
|
|
844
|
+
.bd-acard { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--cz-hair); background: var(--cz-card); font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
845
845
|
.bd-acard.row { flex-direction: row; align-items: center; gap: 10px; cursor: pointer; padding: 10px 12px; }
|
|
846
846
|
.bd-acard.row .tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
847
847
|
.bd-acard.row svg { width: 14px; height: 14px; color: var(--cz-ink3); }
|
|
848
848
|
.bd-awho { display: flex; align-items: center; gap: 8px; }
|
|
849
|
-
.bd-awho b { font-weight:
|
|
850
|
-
.bd-aq { margin: 0; font-size: var(--fs-
|
|
849
|
+
.bd-awho b { font-weight: var(--fw-strong); }
|
|
850
|
+
.bd-aq { margin: 0; font-size: var(--fs-body); color: var(--cz-ink); line-height: 1.4; }
|
|
851
851
|
.bd-aprod { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
852
852
|
.bd-unsure { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; margin: 4px; border-radius: 16px; background: var(--cz-well); }
|
|
853
853
|
.bd-un1 { display: flex; flex-direction: column; gap: 6px; }
|
|
@@ -862,62 +862,62 @@ a.bd-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration:
|
|
|
862
862
|
.bd-spark .ln { stroke: var(--cz-late); }
|
|
863
863
|
.bd-spark circle { fill: var(--cz-late); stroke: none; }
|
|
864
864
|
/* sprints and releases */
|
|
865
|
-
.bd-sp1 { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 12px; font:
|
|
865
|
+
.bd-sp1 { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 12px; font: var(--fw-strong) var(--fs-row)/var(--lh-row) var(--cz-sans); color: var(--cz-ink); cursor: pointer; width: 100%; }
|
|
866
866
|
.bd-sp1:hover, .bd-sp1[aria-pressed="true"] { background: var(--cz-well); }
|
|
867
867
|
.bd-sp1.now, .bd-sp1.next { background: var(--cz-bluebg); }
|
|
868
|
-
.bd-sp1 b { font-weight:
|
|
869
|
-
.bd-sp1 .k { margin-left: auto; font-size: var(--fs-
|
|
868
|
+
.bd-sp1 b { font-weight: var(--fw-strong); }
|
|
869
|
+
.bd-sp1 .k { margin-left: auto; font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); white-space: nowrap; line-height: var(--lh-label); }
|
|
870
870
|
.bd-sp1:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: -2px; }
|
|
871
871
|
.bd-dia { width: 10px; height: 10px; transform: rotate(45deg); border-radius: 2px; border: 2px solid var(--cz-ink3); flex: none; box-sizing: border-box; }
|
|
872
872
|
.bd-dia.on { background: var(--cz-ink); border-color: var(--cz-ink); }
|
|
873
873
|
.bd-ptabs { margin: 0 0 4px; }
|
|
874
874
|
.bd-bkw { display: flex; flex-direction: column; }
|
|
875
|
-
.bd-bk { display: grid; grid-template-columns: 74px minmax(0, 1fr) minmax(0, 130px) 34px auto; gap: 0 10px; align-items: center; min-height: 40px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-
|
|
876
|
-
.bd-bk.h { border-top: 0; min-height: 28px; font-size: var(--fs-
|
|
877
|
-
.bd-th { display: flex; justify-content: space-between; font-size: var(--fs-
|
|
878
|
-
.bd-trow { display: flex; align-items: center; gap: 10px; min-height: 40px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-
|
|
879
|
-
.bd-trow .bd-dlink { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--fs-
|
|
880
|
-
.bd-trow small { font-weight:
|
|
875
|
+
.bd-bk { display: grid; grid-template-columns: 74px minmax(0, 1fr) minmax(0, 130px) 34px auto; gap: 0 10px; align-items: center; min-height: 40px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
876
|
+
.bd-bk.h { border-top: 0; min-height: 28px; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
|
|
877
|
+
.bd-th { display: flex; justify-content: space-between; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); margin-top: 4px; line-height: var(--lh-badge); }
|
|
878
|
+
.bd-trow { display: flex; align-items: center; gap: 10px; min-height: 40px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
879
|
+
.bd-trow .bd-dlink { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
880
|
+
.bd-trow small { font-weight: var(--fw-strong); }
|
|
881
881
|
.bd-trow.sm { min-height: 34px; }
|
|
882
882
|
/* Cancelled and archived */
|
|
883
883
|
.bd-gseg { align-self: flex-start; flex-wrap: wrap; }
|
|
884
884
|
.bd-grs { display: flex; flex-direction: column; }
|
|
885
885
|
.bd-gr { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--cz-hair); }
|
|
886
|
-
.bd-gr .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-
|
|
887
|
-
.bd-gr small { font-size: var(--fs-
|
|
886
|
+
.bd-gr .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
887
|
+
.bd-gr small { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
888
888
|
/* the side panel's widths and its new parts: New initiative, a document and the wide panels take the one width above (B1) */
|
|
889
|
-
.pk-sub { margin: 4px 0 0; font-size: var(--fs-
|
|
889
|
+
.pk-sub { margin: 4px 0 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
890
890
|
.pk-dg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 6px; }
|
|
891
891
|
.pk-dg .bd-box { padding: 10px 12px; gap: 2px; }
|
|
892
|
-
.pk-dg .bd-box b { font-size: var(--fs-
|
|
892
|
+
.pk-dg .bd-box b { font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
893
893
|
.pk-dg .bd-box.late { background: var(--cz-latebg); }
|
|
894
894
|
.pk-jtw { display: flex; flex-direction: column; }
|
|
895
|
-
.pk-jt { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 70px minmax(0, 1fr) 96px 30px; gap: 0 10px; align-items: center; min-height: 38px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-
|
|
895
|
+
.pk-jt { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 70px minmax(0, 1fr) 96px 30px; gap: 0 10px; align-items: center; min-height: 38px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-meta); cursor: pointer; line-height: var(--lh-meta); }
|
|
896
896
|
button.pk-jt:hover { background: var(--bd-row); }
|
|
897
897
|
button.pk-jt:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: -2px; border-radius: 8px; }
|
|
898
|
-
.pk-jt.h { border-top: 0; min-height: 30px; font-size: var(--fs-
|
|
899
|
-
.pk-jt .s-red { color: var(--cz-red); font-weight:
|
|
898
|
+
.pk-jt.h { border-top: 0; min-height: 30px; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); cursor: default; line-height: var(--lh-badge); }
|
|
899
|
+
.pk-jt .s-red { color: var(--cz-red); font-weight: var(--fw-strong); }
|
|
900
900
|
/* New initiative and the first questions (BdNew, BdGrill) */
|
|
901
901
|
.bd-new { gap: 14px; }
|
|
902
902
|
.bd-drop { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 6px 6px 6px 10px; border-radius: 14px; border: 1px dashed var(--cz-hair); background: var(--cz-card); flex-wrap: wrap; }
|
|
903
903
|
.bd-drop.on { border-color: var(--cz-blue); background: var(--cz-bluebg); }
|
|
904
|
-
.bd-mchips:empty::before { content: "No material yet"; font:
|
|
904
|
+
.bd-mchips:empty::before { content: "No material yet"; font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); color: var(--cz-ink3); }
|
|
905
905
|
.bd-linkin { display: flex; gap: 6px; }
|
|
906
906
|
.bd-linkin[hidden] { display: none; }
|
|
907
|
-
#nwKind span { font-weight:
|
|
907
|
+
#nwKind span { font-weight: var(--fw-regular); color: var(--cz-ink2); }
|
|
908
908
|
#nwKind .bd-amut { color: var(--cz-ink3); }
|
|
909
|
-
.bd-qhd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: var(--fs-
|
|
910
|
-
.bd-qc { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--cz-hair); font-size: var(--fs-
|
|
909
|
+
.bd-qhd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
910
|
+
.bd-qc { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--cz-hair); font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
911
911
|
.bd-qc.on { border-color: var(--cz-blue); box-shadow: 0 0 0 3px var(--cz-bluebg); }
|
|
912
912
|
.bd-qc.off { cursor: pointer; color: var(--cz-ink2); }
|
|
913
913
|
.bd-qc.off:hover { background: var(--cz-well); }
|
|
914
914
|
.bd-qc.off:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
|
|
915
|
-
.bd-qc .src { font-size: var(--fs-
|
|
916
|
-
.bd-qc b { font-size: var(--fs-
|
|
915
|
+
.bd-qc .src { font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
|
|
916
|
+
.bd-qc b { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
|
|
917
917
|
/* List (BdList) */
|
|
918
918
|
.bd-ltw { border: 1px solid var(--cz-hair); border-radius: 18px; overflow: hidden; background: var(--cz-card); }
|
|
919
|
-
.bd-lt { display: grid; grid-template-columns: minmax(170px, 1.5fr) 140px minmax(100px, .8fr) 100px minmax(130px, 1fr) 54px minmax(250px, 2.4fr) 70px 36px; gap: 0 12px; align-items: center; min-height: 52px; padding: 0 10px 0 16px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-
|
|
920
|
-
.bd-lt.h { border-top: 0; min-height: 40px; background: var(--cz-well); font-size: var(--fs-
|
|
919
|
+
.bd-lt { display: grid; grid-template-columns: minmax(170px, 1.5fr) 140px minmax(100px, .8fr) 100px minmax(130px, 1fr) 54px minmax(250px, 2.4fr) 70px 36px; gap: 0 12px; align-items: center; min-height: 52px; padding: 0 10px 0 16px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
920
|
+
.bd-lt.h { border-top: 0; min-height: 40px; background: var(--cz-well); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
|
|
921
921
|
.bd-lt:hover:not(.h):not(.foot) { background: var(--bd-row); }
|
|
922
922
|
.bd-lt.sel { background: var(--cz-bluebg); }
|
|
923
923
|
.bd-lt.held { opacity: .7; }
|
|
@@ -927,61 +927,61 @@ button.pk-jt:focus-visible { outline: 2px solid var(--cz-blue); outline-offset:
|
|
|
927
927
|
.bd-lth svg { width: 12px; height: 12px; margin-left: 3px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
|
928
928
|
.bd-lth:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; border-radius: 4px; }
|
|
929
929
|
.bd-ltn { all: unset; cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
930
|
-
.bd-ltn b { font-weight:
|
|
930
|
+
.bd-ltn b { font-weight: var(--fw-strong); }
|
|
931
931
|
.bd-ltn:hover b { color: var(--cz-blueink); }
|
|
932
932
|
.bd-ltn:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; border-radius: 4px; }
|
|
933
933
|
.bd-lt > span { min-width: 0; }
|
|
934
|
-
.bd-lt .cs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-
|
|
935
|
-
.bd-foot { margin: 10px 2px 0; font-size: var(--fs-
|
|
934
|
+
.bd-lt .cs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
935
|
+
.bd-foot { margin: 10px 2px 0; font-size: var(--fs-meta); color: var(--cz-ink3); display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; line-height: var(--lh-meta); }
|
|
936
936
|
/* By stage (BdByStage) */
|
|
937
937
|
.bd-scols { display: flex; gap: 10px; align-items: flex-start; overflow-x: auto; padding-bottom: 4px; }
|
|
938
938
|
.bd-scol { flex: 1 1 0; min-width: 168px; background: var(--cz-well); border-radius: 18px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 220px; }
|
|
939
939
|
.bd-scol.drop { box-shadow: inset 0 0 0 2px var(--cz-blue); }
|
|
940
|
-
.bd-scol h3 { margin: 0; padding: 2px 4px 2px; display: flex; align-items: center; gap: 6px; font-size: var(--fs-
|
|
941
|
-
.bd-scol h3 span { font-weight:
|
|
940
|
+
.bd-scol h3 { margin: 0; padding: 2px 4px 2px; display: flex; align-items: center; gap: 6px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
|
|
941
|
+
.bd-scol h3 span { font-weight: var(--fw-strong); color: var(--cz-ink3); font-size: var(--fs-label); line-height: var(--lh-label); }
|
|
942
942
|
.bd-scol h3 .bd-ib { margin-left: auto; }
|
|
943
943
|
.bd-cempty { padding: 6px 4px; }
|
|
944
|
-
.bd-bc { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--cz-card); box-shadow: 0 1px 2px rgba(42,46,53,.06); cursor: pointer; font-size: var(--fs-
|
|
944
|
+
.bd-bc { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--cz-card); box-shadow: 0 1px 2px rgba(42,46,53,.06); cursor: pointer; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
945
945
|
.bd-bc[draggable="true"] { cursor: grab; }
|
|
946
946
|
.bd-bc.drag { opacity: .5; }
|
|
947
947
|
.bd-bc:hover { box-shadow: 0 6px 18px -10px rgba(42,46,53,.3); }
|
|
948
948
|
.bd-bc.sel, .bd-bc.you { box-shadow: 0 0 0 2px var(--cz-bluebg); }
|
|
949
949
|
.bd-bc:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
|
|
950
|
-
.bd-bc .t { font-size: var(--fs-
|
|
951
|
-
.bd-bc .s { font-size: var(--fs-
|
|
952
|
-
.bd-bc .f { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--cz-ink3); font-size: var(--fs-
|
|
953
|
-
.bd-bc .f .nx { color: var(--cz-blueink); font-weight:
|
|
950
|
+
.bd-bc .t { font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-row); }
|
|
951
|
+
.bd-bc .s { font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
952
|
+
.bd-bc .f { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--cz-ink3); font-size: var(--fs-badge); font-weight: var(--fw-strong); margin-top: 2px; min-height: 22px; line-height: var(--lh-badge); }
|
|
953
|
+
.bd-bc .f .nx { color: var(--cz-blueink); font-weight: var(--fw-strong); }
|
|
954
954
|
/* a phone's By stage keeps the swimlane order inside each step (PgKanban): a small program or product label over its cards */
|
|
955
|
-
.bd-scol .bd-sl { display: flex; align-items: center; gap: 7px; margin: 4px 2px 0; font-size: var(--fs-
|
|
955
|
+
.bd-scol .bd-sl { display: flex; align-items: center; gap: 7px; margin: 4px 2px 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
|
|
956
956
|
.bd-scol .bd-sl.pg { color: var(--bd-prog); }
|
|
957
|
-
.bd-scol .bd-sl .bd-ti, .bd-scol .bd-sl .bd-pti { width: 20px; height: 20px; border-radius: 7px; font-size: var(--fs-
|
|
957
|
+
.bd-scol .bd-sl .bd-ti, .bd-scol .bd-sl .bd-pti { width: 20px; height: 20px; border-radius: 7px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
958
958
|
.bd-scol .bd-sl .bd-pti svg { width: 12px; height: 12px; }
|
|
959
|
-
.bd-sempty { margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--bd-row); font-size: var(--fs-
|
|
959
|
+
.bd-sempty { margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--bd-row); font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
960
960
|
.bd-strip { all: unset; box-sizing: border-box; flex: none; width: 44px; min-height: 220px; border-radius: 18px; background: var(--cz-well); cursor: pointer; display: flex; align-items: flex-start; justify-content: center; padding-top: 14px; }
|
|
961
|
-
.bd-strip span { writing-mode: vertical-rl; font-size: var(--fs-
|
|
961
|
+
.bd-strip span { writing-mode: vertical-rl; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); white-space: nowrap; line-height: var(--lh-label); }
|
|
962
962
|
.bd-strip:hover { background: var(--cz-well2); }
|
|
963
963
|
.bd-strip:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
|
|
964
964
|
/* Documents (BdDocs) */
|
|
965
965
|
.bd-dchips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
|
|
966
966
|
.bd-dtw { border: 1px solid var(--cz-hair); border-radius: 18px; overflow: hidden; background: var(--cz-card); }
|
|
967
|
-
.bd-dt { display: grid; grid-template-columns: 30px minmax(0, 1.5fr) minmax(0, 1.2fr) 170px 120px minmax(0, 160px); gap: 0 12px; align-items: center; min-height: 52px; padding: 0 14px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-
|
|
968
|
-
.bd-dt.h { border-top: 0; min-height: 40px; background: var(--cz-well); font-size: var(--fs-
|
|
967
|
+
.bd-dt { display: grid; grid-template-columns: 30px minmax(0, 1.5fr) minmax(0, 1.2fr) 170px 120px minmax(0, 160px); gap: 0 12px; align-items: center; min-height: 52px; padding: 0 14px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
968
|
+
.bd-dt.h { border-top: 0; min-height: 40px; background: var(--cz-well); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
|
|
969
969
|
.bd-dt.sel { background: var(--cz-bluebg); }
|
|
970
970
|
.bd-dt > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
971
971
|
.bd-dic { width: 30px; height: 30px; border-radius: 10px; background: var(--cz-well); display: inline-flex; align-items: center; justify-content: center; color: var(--cz-ink2); }
|
|
972
972
|
.bd-dic svg { width: 15px; height: 15px; }
|
|
973
973
|
.bd-dby { display: flex; align-items: center; gap: 8px; }
|
|
974
|
-
.bd-read summary { cursor: pointer; font:
|
|
974
|
+
.bd-read summary { cursor: pointer; font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); color: var(--cz-ink2); padding: 4px 0; }
|
|
975
975
|
/* the Sprint span (BdSpans) */
|
|
976
|
-
.sp-cap { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: var(--fs-
|
|
976
|
+
.sp-cap { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
977
977
|
.sp { border: 1px solid var(--cz-hair); border-radius: 18px; overflow: hidden; background: var(--cz-card); }
|
|
978
978
|
.sp-r { display: flex; min-height: 44px; border-top: 1px solid var(--cz-hair); }
|
|
979
|
-
.sp-h { min-height: 40px; border-top: 0; background: var(--cz-well); font-size: var(--fs-
|
|
980
|
-
.sp-n { all: unset; box-sizing: border-box; width: 260px; flex: none; padding: 8px 14px; display: flex; flex-direction: column; justify-content: center; font-size: var(--fs-
|
|
979
|
+
.sp-h { min-height: 40px; border-top: 0; background: var(--cz-well); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
|
|
980
|
+
.sp-n { all: unset; box-sizing: border-box; width: 260px; flex: none; padding: 8px 14px; display: flex; flex-direction: column; justify-content: center; font-size: var(--fs-meta); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--lh-meta); }
|
|
981
981
|
button.sp-n { cursor: pointer; }
|
|
982
982
|
button.sp-n:hover { color: var(--cz-blueink); }
|
|
983
983
|
button.sp-n:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: -2px; }
|
|
984
|
-
.sp-n b { font-size: var(--fs-
|
|
984
|
+
.sp-n b { font-size: var(--fs-label); font-weight: var(--fw-strong); line-height: var(--lh-label); }
|
|
985
985
|
.sp-k { display: block; line-height: 28px; }
|
|
986
986
|
.sp-g { flex: 1; position: relative; min-width: 0; }
|
|
987
987
|
.sp-h .sp-g { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
|
|
@@ -990,35 +990,35 @@ button.sp-n:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: -
|
|
|
990
990
|
.sp-t { background: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / var(--n) - 1px), var(--cz-hair) calc(100% / var(--n) - 1px), var(--cz-hair) calc(100% / var(--n))); }
|
|
991
991
|
.sp-i { min-height: 36px; background: var(--bd-row); }
|
|
992
992
|
.sp-i.sel { background: var(--cz-bluebg); }
|
|
993
|
-
.sp-b { position: absolute; top: 9px; height: 26px; border-radius: 9px; background: var(--bd-plan); color: var(--cz-ink); display: flex; align-items: center; gap: 6px; padding: 0 4px 0 8px; font-size: var(--fs-
|
|
993
|
+
.sp-b { position: absolute; top: 9px; height: 26px; border-radius: 9px; background: var(--bd-plan); color: var(--cz-ink); display: flex; align-items: center; gap: 6px; padding: 0 4px 0 8px; font-size: var(--fs-label); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; box-sizing: border-box; line-height: var(--lh-label); }
|
|
994
994
|
.sp-b > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
|
|
995
995
|
.sp-b.y { background: var(--cz-bluebg); color: var(--cz-blueink); }
|
|
996
996
|
.sp-b.r { background: var(--cz-redbg); color: var(--cz-red); }
|
|
997
997
|
.sp-b.k { background: var(--bd-rail); color: var(--cz-ink2); }
|
|
998
998
|
.sp-b.d { background: transparent; border: 1px dashed var(--cz-blue); color: var(--cz-blueink); }
|
|
999
|
-
.sp-b .bd-av { margin-left: auto; width: 18px; height: 18px; font-size: var(--fs-
|
|
999
|
+
.sp-b .bd-av { margin-left: auto; width: 18px; height: 18px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
1000
1000
|
.sp-dia { position: absolute; top: 12px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); border-radius: 2px; background: var(--cz-ink); }
|
|
1001
1001
|
.sp-dia.bl { background: var(--cz-blue); }
|
|
1002
|
-
.sp-dl { position: absolute; top: 9px; font-size: var(--fs-
|
|
1003
|
-
.sp-dl.bl { color: var(--cz-blueink); font-weight:
|
|
1002
|
+
.sp-dl { position: absolute; top: 9px; font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; line-height: var(--lh-meta); }
|
|
1003
|
+
.sp-dl.bl { color: var(--cz-blueink); font-weight: var(--fw-strong); }
|
|
1004
1004
|
.sp-bk { min-height: 40px; background: var(--cz-well); }
|
|
1005
1005
|
.sp-bk .sp-n { color: var(--cz-ink3); }
|
|
1006
1006
|
.sp-bkg { display: flex; align-items: center; padding: 0 10px; }
|
|
1007
|
-
.sp-body .tg-empty { padding: 16px 14px; margin: 0; color: var(--cz-ink3); font-size: var(--fs-
|
|
1007
|
+
.sp-body .tg-empty { padding: 16px 14px; margin: 0; color: var(--cz-ink3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
1008
1008
|
/* the phone (BdPhone) */
|
|
1009
1009
|
.bd-phseg { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; flex-wrap: wrap; }
|
|
1010
1010
|
.bd-plist { display: flex; flex-direction: column; gap: 2px; }
|
|
1011
|
-
.bd-ghd { display: flex; align-items: center; gap: 6px; padding: 10px 10px 4px 8px; font-size: var(--fs-
|
|
1012
|
-
.bd-ghd .n { margin-left: auto; font-weight:
|
|
1011
|
+
.bd-ghd { display: flex; align-items: center; gap: 6px; padding: 10px 10px 4px 8px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
|
|
1012
|
+
.bd-ghd .n { margin-left: auto; font-weight: var(--fw-strong); color: var(--cz-ink3); font-size: var(--fs-label); line-height: var(--lh-label); }
|
|
1013
1013
|
.bd-lrow { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px; width: 100%; min-height: 52px; cursor: pointer; }
|
|
1014
1014
|
.bd-lrow:hover { background: var(--cz-well); }
|
|
1015
1015
|
.bd-lrow.sel { background: var(--cz-card); box-shadow: 0 6px 18px -10px rgba(42,46,53,.25); }
|
|
1016
1016
|
.bd-lrow:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
|
|
1017
1017
|
.bd-lrow .tx { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
|
|
1018
|
-
.bd-lrow .t { font-size: var(--fs-
|
|
1019
|
-
.bd-lrow .s { font-size: var(--fs-
|
|
1018
|
+
.bd-lrow .t { font-size: var(--fs-row); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-row); }
|
|
1019
|
+
.bd-lrow .s { font-size: var(--fs-meta); color: var(--cz-blueink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-meta); }
|
|
1020
1020
|
.bd-lrow .s.q { color: var(--cz-ink3); }
|
|
1021
|
-
.bd-lrow .r { font-size: var(--fs-
|
|
1021
|
+
.bd-lrow .r { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-blueink); white-space: nowrap; line-height: var(--lh-label); }
|
|
1022
1022
|
@media (max-width: 1200px) and (min-width: 721px) {
|
|
1023
1023
|
.bd-lt { grid-template-columns: minmax(160px, 1.6fr) 120px minmax(100px, .9fr) minmax(120px, 1fr) 44px minmax(140px, 1.4fr) 70px 36px; }
|
|
1024
1024
|
.bd-lt > :nth-child(4) { display: none; }
|
|
@@ -1042,10 +1042,10 @@ button.sp-n:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: -
|
|
|
1042
1042
|
.bd-phseg .bd-seg > button { height: 44px; }
|
|
1043
1043
|
.bd-showing { flex-wrap: nowrap; overflow-x: auto; }
|
|
1044
1044
|
}
|
|
1045
|
-
.bd-form input.bd-inp, .bd-form textarea.bd-inp, .bd-form select.bd-inp { background: var(--cz-well); border-color: transparent; border-radius: 14px; min-height: 42px; padding: 0 14px; font-size: var(--fs-
|
|
1045
|
+
.bd-form input.bd-inp, .bd-form textarea.bd-inp, .bd-form select.bd-inp { background: var(--cz-well); border-color: transparent; border-radius: 14px; min-height: 42px; padding: 0 14px; font-size: var(--fs-body); line-height: var(--lh-body); }
|
|
1046
1046
|
.bd-form textarea.bd-inp { padding: 10px 14px; }
|
|
1047
|
-
.bd-form input.bd-inp.sm { min-height: 34px; font-size: var(--fs-
|
|
1048
|
-
.bd-field .bd-amut, .bd-form label .bd-amut { font-weight:
|
|
1047
|
+
.bd-form input.bd-inp.sm { min-height: 34px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
1048
|
+
.bd-field .bd-amut, .bd-form label .bd-amut { font-weight: var(--fw-regular); }
|
|
1049
1049
|
.bd-scols.ph .bd-scol { flex: none; }
|
|
1050
1050
|
.bd-mi .bd-pill { gap: 0; }
|
|
1051
1051
|
.bd-mi .bd-pill mark { border-radius: 0; }
|
|
@@ -1069,8 +1069,8 @@ body:has(#bdPop.sheet:not([hidden])) .cz-fabw { display: none; }
|
|
|
1069
1069
|
body.bd-page { --bd-prog: rgb(91,79,176); --bd-progbg: rgb(241,239,250); --bd-progln: rgba(91,79,176,.22); --bd-progsp: rgba(91,79,176,.18); }
|
|
1070
1070
|
html[data-theme="dark"] body.bd-page { --bd-prog: rgb(180,170,240); --bd-progbg: rgba(140,125,230,.16); --bd-progln: rgba(180,170,240,.3); --bd-progsp: rgba(180,170,240,.26); }
|
|
1071
1071
|
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.bd-page { --bd-prog: rgb(180,170,240); --bd-progbg: rgba(140,125,230,.16); --bd-progln: rgba(180,170,240,.3); --bd-progsp: rgba(180,170,240,.26); } }
|
|
1072
|
-
.bd-ti { width: 26px; height: 26px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-
|
|
1073
|
-
.bd-ti.s { width: 20px; height: 20px; border-radius: 7px; font-size: var(--fs-
|
|
1072
|
+
.bd-ti { width: 26px; height: 26px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-badge); font-weight: var(--fw-strong); letter-spacing: .02em; flex: none; line-height: var(--lh-badge); }
|
|
1073
|
+
.bd-ti.s { width: 20px; height: 20px; border-radius: 7px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
|
|
1074
1074
|
.bd-ti.tn0 { background: var(--cz-bluebg); color: var(--cz-blueink); } .bd-ti.tn1 { background: var(--cz-c-f4eee6); color: var(--cz-c-7a5a2e); }
|
|
1075
1075
|
.bd-ti.tn2 { background: var(--cz-okbg); color: var(--cz-c-2e6e48); } .bd-ti.tn3 { background: var(--cz-c-f1ecf8); color: var(--cz-c-6b4fa3); }
|
|
1076
1076
|
.bd-pti { width: 26px; height: 26px; border-radius: 9px; background: var(--cz-card); color: var(--bd-prog); display: inline-flex; align-items: center; justify-content: center; flex: none; }
|
|
@@ -1078,7 +1078,7 @@ html[data-theme="dark"] body.bd-page { --bd-prog: rgb(180,170,240); --bd-progbg:
|
|
|
1078
1078
|
.bd-pti.s { width: 20px; height: 20px; border-radius: 7px; background: var(--bd-progbg); } .bd-pti.s svg { width: 12px; height: 12px; }
|
|
1079
1079
|
.bd-pgi { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 6px; background: var(--bd-progbg); color: var(--bd-prog); margin-right: 6px; flex: none; vertical-align: -3px; }
|
|
1080
1080
|
.bd-pgi svg { width: 12px; height: 12px; stroke-width: 2; }
|
|
1081
|
-
.bd-yc { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-
|
|
1081
|
+
.bd-yc { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-label); font-weight: var(--fw-strong); display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: var(--lh-label); }
|
|
1082
1082
|
.bd-dm { width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; background: var(--bd-prog); display: inline-block; flex: none; }
|
|
1083
1083
|
.bd-dm.o { background: transparent; border: 2px solid var(--bd-prog); width: 7px; height: 7px; margin-right: 4px; }
|
|
1084
1084
|
.bd-rdy { display: inline-flex; gap: 3px; margin-left: 6px; }
|
|
@@ -1089,7 +1089,7 @@ html[data-theme="dark"] body.bd-page { --bd-prog: rgb(180,170,240); --bd-progbg:
|
|
|
1089
1089
|
/* the grouping control in the toolbar (PgBoardProduct: "By product" on in violet) */
|
|
1090
1090
|
.bd-grpw2 { position: relative; display: inline-flex; align-items: center; }
|
|
1091
1091
|
.bd-grpw2[hidden] { display: none; }
|
|
1092
|
-
.bd-grp.on { background: var(--bd-progbg); border-color: transparent; color: var(--bd-prog); font-weight:
|
|
1092
|
+
.bd-grp.on { background: var(--bd-progbg); border-color: transparent; color: var(--bd-prog); font-weight: var(--fw-strong); }
|
|
1093
1093
|
.bd-grp.on svg { width: 13px; height: 13px; stroke-width: 2; }
|
|
1094
1094
|
.bd-grpw2 .bd-grpm { left: auto; right: 0; }
|
|
1095
1095
|
.bd-grpw2 .bd-grpm button[aria-checked="true"] { color: var(--bd-prog); }
|
|
@@ -1099,15 +1099,15 @@ html[data-theme="dark"] body.bd-page { --bd-prog: rgb(180,170,240); --bd-progbg:
|
|
|
1099
1099
|
.bt-pgn { display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 14px; min-width: 0; }
|
|
1100
1100
|
.bt-pgo { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
|
|
1101
1101
|
.bt-pgo .tt { min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
|
|
1102
|
-
.bt-pgo .tt b { font-size: var(--fs-
|
|
1103
|
-
.bt-pgo .tt .m { font-size: var(--fs-
|
|
1102
|
+
.bt-pgo .tt b { font-size: var(--fs-row); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--cz-ink); line-height: var(--lh-row); }
|
|
1103
|
+
.bt-pgo .tt .m { font-size: var(--fs-badge); color: var(--cz-ink2); font-weight: var(--fw-strong); line-height: var(--lh-badge); }
|
|
1104
1104
|
.bt-pgo:hover .tt b { color: var(--bd-prog); }
|
|
1105
1105
|
.bt-spread { position: relative; }
|
|
1106
1106
|
.bd-spb { position: absolute; top: 50%; height: 10px; margin-top: -5px; border-radius: 5px; background: var(--bd-progsp); }
|
|
1107
|
-
.bd-spl { position: absolute; top: 50%; transform: translateY(-50%); font-size: var(--fs-
|
|
1107
|
+
.bd-spl { position: absolute; top: 50%; transform: translateY(-50%); font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--bd-prog); white-space: nowrap; line-height: var(--lh-badge); }
|
|
1108
1108
|
.bt-pg .bt-dl { border-left-color: var(--bd-progln); }
|
|
1109
|
-
.bd-pm { display: flex; align-items: center; gap: 6px; font-size: var(--fs-
|
|
1110
|
-
.bd-pm b { color: var(--cz-ink); font-weight:
|
|
1109
|
+
.bd-pm { display: flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--cz-ink2); white-space: nowrap; overflow: hidden; line-height: var(--lh-meta); }
|
|
1110
|
+
.bd-pm b { color: var(--cz-ink); font-weight: var(--fw-strong); }
|
|
1111
1111
|
.bd-pm.late b, .bd-pm.late { color: var(--cz-late); }
|
|
1112
1112
|
.bd-pm.q { color: var(--cz-ink3); }
|
|
1113
1113
|
.bt-pg .bt-dl .t3 { display: flex; align-items: center; gap: 2px; }
|
|
@@ -1115,11 +1115,11 @@ html[data-theme="dark"] body.bd-page { --bd-prog: rgb(180,170,240); --bd-progbg:
|
|
|
1115
1115
|
.bt-kid .bt-nm::before { content: ""; position: absolute; left: 26px; top: 0; bottom: 0; width: 2px; background: var(--bd-progln); }
|
|
1116
1116
|
.bt-kid.last .bt-nm::before { bottom: 50%; }
|
|
1117
1117
|
.bt-nm b .bd-pgi { vertical-align: -4px; }
|
|
1118
|
-
.bt-psb, .tg-psb { display: flex; align-items: center; gap: 8px; padding: 7px 14px 5px 50px; font-size: var(--fs-
|
|
1118
|
+
.bt-psb, .tg-psb { display: flex; align-items: center; gap: 8px; padding: 7px 14px 5px 50px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); background: var(--cz-card); border-top: 1px solid var(--cz-hair); position: relative; line-height: var(--lh-label); }
|
|
1119
1119
|
.bt-psb > span, .tg-psb > span { display: inline-flex; align-items: center; gap: 8px; }
|
|
1120
1120
|
.bt-psb::before, .tg-psb::before { content: ""; position: absolute; left: 26px; top: 0; bottom: 0; width: 2px; background: var(--bd-progln); }
|
|
1121
1121
|
.bt-prd, .tg-prd { display: flex; align-items: center; padding: 8px 14px; background: var(--bd-row); border-top: 1px solid var(--cz-hair); }
|
|
1122
|
-
.bd-prdb { all: unset; box-sizing: border-box; flex: 1; display: flex; align-items: center; gap: 10px; font-size: var(--fs-
|
|
1122
|
+
.bd-prdb { all: unset; box-sizing: border-box; flex: 1; display: flex; align-items: center; gap: 10px; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); min-height: 28px; line-height: var(--lh-row); }
|
|
1123
1123
|
/* the tile and name open the product's page (batch 26 item 3, as Home's header); the rest of the head, its dots, count and chevron, folds it */
|
|
1124
1124
|
.bd-prdo, .bd-prdf { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 28px; }
|
|
1125
1125
|
.bd-prdo { flex: 0 1 auto; min-width: 0; }
|
|
@@ -1128,7 +1128,7 @@ html[data-theme="dark"] body.bd-page { --bd-prog: rgb(180,170,240); --bd-progbg:
|
|
|
1128
1128
|
@media (hover: hover) { .bd-prdo:hover > span:last-child, .bd-lh.pd .bd-lho:hover > span:last-child { color: var(--cz-blueink); } }
|
|
1129
1129
|
.bd-prdb svg { width: 15px; height: 15px; stroke-width: 2; color: var(--cz-ink3); margin-left: auto; }
|
|
1130
1130
|
/* a product head's goal dots (PgBoard .gd): Home's source and look (cozy-today.css .hv-gd) */
|
|
1131
|
-
.bd-prdb .n { font-size: var(--fs-
|
|
1131
|
+
.bd-prdb .n { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); margin-left: auto; line-height: var(--lh-label); }
|
|
1132
1132
|
.bd-prdb .n + svg { margin-left: 6px; }
|
|
1133
1133
|
.bd-gd { display: inline-flex; gap: 3px; margin-left: auto; flex: none; }
|
|
1134
1134
|
.bd-gd i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--cz-dot-ok); }
|
|
@@ -1139,13 +1139,13 @@ html[data-theme="dark"] body.bd-page { --bd-prog: rgb(180,170,240); --bd-progbg:
|
|
|
1139
1139
|
|
|
1140
1140
|
/* By stage (PgKanban): programs as swimlanes, then the product; any column folds to a strip with its count */
|
|
1141
1141
|
.bd-kb { display: grid; column-gap: 8px; align-content: start; }
|
|
1142
|
-
.bd-kh { all: unset; box-sizing: border-box; cursor: pointer; grid-row: 1; height: 38px; padding: 8px 10px; display: flex; align-items: center; gap: 6px; font-size: var(--fs-
|
|
1142
|
+
.bd-kh { all: unset; box-sizing: border-box; cursor: pointer; grid-row: 1; height: 38px; padding: 8px 10px; display: flex; align-items: center; gap: 6px; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); background: var(--cz-well); border-radius: 14px 14px 0 0; min-width: 0; line-height: var(--lh-row); }
|
|
1143
1143
|
.bd-kh .l { display: inline-flex; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
1144
|
-
.bd-kh .n { margin-left: auto; font-weight:
|
|
1144
|
+
.bd-kh .n { margin-left: auto; font-weight: var(--fw-strong); color: var(--cz-ink3); }
|
|
1145
1145
|
.bd-kh svg { width: 14px; height: 14px; color: var(--cz-ink3); flex: none; }
|
|
1146
1146
|
.bd-kh:focus-visible, .bd-kstrip:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
|
|
1147
|
-
.bd-kstrip { all: unset; box-sizing: border-box; cursor: pointer; background: var(--cz-well); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 10px; gap: 8px; min-height: 120px; color: var(--cz-ink3); font-size: var(--fs-
|
|
1148
|
-
.bd-kstrip b { font-size: var(--fs-
|
|
1147
|
+
.bd-kstrip { all: unset; box-sizing: border-box; cursor: pointer; background: var(--cz-well); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 10px; gap: 8px; min-height: 120px; color: var(--cz-ink3); font-size: var(--fs-label); font-weight: var(--fw-strong); overflow: hidden; line-height: var(--lh-label); }
|
|
1148
|
+
.bd-kstrip b { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
|
|
1149
1149
|
.bd-kstrip span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; display: inline-flex; align-items: center; }
|
|
1150
1150
|
.bd-kstrip:hover { background: var(--cz-well2); }
|
|
1151
1151
|
.bd-kc { background: var(--cz-well); padding: 6px; display: flex; flex-direction: column; gap: 6px; min-height: 24px; min-width: 0; }
|
|
@@ -1153,22 +1153,22 @@ html[data-theme="dark"] body.bd-page { --bd-prog: rgb(180,170,240); --bd-progbg:
|
|
|
1153
1153
|
.bd-kc.drop { box-shadow: inset 0 0 0 2px var(--cz-blue); }
|
|
1154
1154
|
.bd-kc .bd-bc { border: 1px solid var(--cz-hair); border-radius: 12px; padding: 9px 10px; box-shadow: 0 1px 2px rgba(42,46,53,.05); }
|
|
1155
1155
|
.bd-kc .bd-bc.you { border-color: rgba(72,148,234,.5); }
|
|
1156
|
-
.bd-kc .bd-bc .t { font-size: var(--fs-
|
|
1157
|
-
.bd-lh { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 6px 0 0; border-radius: 12px; font-size: var(--fs-
|
|
1156
|
+
.bd-kc .bd-bc .t { font-size: var(--fs-body); line-height: 1.25; }
|
|
1157
|
+
.bd-lh { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 6px 0 0; border-radius: 12px; font-size: var(--fs-section); font-weight: var(--fw-strong); position: relative; z-index: 2; min-height: 42px; line-height: var(--lh-section); }
|
|
1158
1158
|
.bd-lh.pg { background: var(--bd-progbg); } .bd-lh.pd { background: var(--cz-card); border: 1px solid var(--cz-hair); }
|
|
1159
1159
|
.bd-lho { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
|
|
1160
1160
|
.bd-lh .bd-sp { flex: 1; }
|
|
1161
|
-
.bd-pm2 { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-
|
|
1162
|
-
.bd-pm2 b { color: var(--bd-prog); font-weight:
|
|
1161
|
+
.bd-pm2 { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); white-space: nowrap; line-height: var(--lh-label); }
|
|
1162
|
+
.bd-pm2 b { color: var(--bd-prog); font-weight: var(--fw-strong); }
|
|
1163
1163
|
.bd-pm2 .bd-dm { width: 10px; height: 10px; }
|
|
1164
1164
|
.bd-pm2.late b { color: var(--cz-late); }
|
|
1165
|
-
.bd-ls { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 6px 12px 2px 50px; font-size: var(--fs-
|
|
1165
|
+
.bd-ls { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 6px 12px 2px 50px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); position: relative; z-index: 1; pointer-events: none; line-height: var(--lh-label); }
|
|
1166
1166
|
.bd-sfoot { padding-left: 50px; }
|
|
1167
1167
|
|
|
1168
1168
|
/* List (PgList): Product and Program after the initiative */
|
|
1169
1169
|
.bd-ltw.pg .bd-lt { grid-template-columns: minmax(150px, 1.6fr) 120px 140px 128px minmax(90px, .8fr) 100px minmax(120px, 1.1fr) 54px minmax(250px, 2.6fr) 70px 36px; }
|
|
1170
1170
|
.bd-ltw.pg .bd-lt.foot { grid-template-columns: 1fr auto; }
|
|
1171
|
-
.bd-pt { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-weight:
|
|
1171
|
+
.bd-pt { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-weight: var(--fw-strong); font-size: var(--fs-label); color: var(--cz-ink2); white-space: nowrap; overflow: hidden; line-height: var(--lh-label); }
|
|
1172
1172
|
@media (max-width: 1200px) and (min-width: 721px) {
|
|
1173
1173
|
.bd-ltw.pg .bd-lt { grid-template-columns: minmax(150px, 1.6fr) 110px 130px minmax(100px, .9fr) minmax(120px, 1fr) 44px minmax(140px, 1.3fr) 70px 36px; }
|
|
1174
1174
|
.bd-ltw.pg .bd-lt > :nth-child(4), .bd-ltw.pg .bd-lt > :nth-child(6) { display: none; }
|
|
@@ -1185,8 +1185,8 @@ html[data-theme="dark"] body.bd-page { --bd-prog: rgb(180,170,240); --bd-progbg:
|
|
|
1185
1185
|
.tg-pgn { flex-direction: row; align-items: center; gap: 6px; padding-right: 6px; }
|
|
1186
1186
|
.tg-pgo { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
|
|
1187
1187
|
.tg-pgo .tt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
|
|
1188
|
-
.tg-pgo .tt b { font-size: var(--fs-
|
|
1189
|
-
.tg-pgo .tt small { font-size: var(--fs-
|
|
1188
|
+
.tg-pgo .tt b { font-size: var(--fs-row); font-weight: var(--fw-strong); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; }
|
|
1189
|
+
.tg-pgo .tt small { font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); line-height: var(--lh-label); }
|
|
1190
1190
|
.tg-pgo:hover .tt b { color: var(--bd-prog); }
|
|
1191
1191
|
.tg-kid .tg-n, .tg-gr .tg-n { padding-left: 50px; position: relative; }
|
|
1192
1192
|
.tg-kid .tg-n::before { content: ""; position: absolute; left: 26px; top: 0; bottom: 0; width: 2px; background: var(--bd-progln); }
|
|
@@ -1197,20 +1197,20 @@ html[data-theme="dark"] body.bd-page { --bd-prog: rgb(180,170,240); --bd-progbg:
|
|
|
1197
1197
|
.tg-pdm.late { border-color: var(--cz-dot-late); background: var(--cz-card); }
|
|
1198
1198
|
.tg-clu { all: unset; box-sizing: border-box; position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; z-index: 2; cursor: pointer; transform: rotate(45deg); border-radius: 4px; background: var(--bd-prog); box-shadow: 0 0 0 3px var(--bd-progbg); display: flex; align-items: center; justify-content: center; }
|
|
1199
1199
|
.tg-clu.late { background: var(--cz-dot-late); }
|
|
1200
|
-
.tg-clu b { transform: rotate(-45deg); color: var(--cz-card); font-size: 10px; font-weight:
|
|
1200
|
+
.tg-clu b { transform: rotate(-45deg); color: var(--cz-card); font-size: 10px; font-weight: var(--fw-strong); }
|
|
1201
1201
|
.tg-clu:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 3px; }
|
|
1202
|
-
.tg-pdl { position: absolute; bottom: calc(50% + 10px); transform: translateX(-50%); font-size: var(--fs-
|
|
1202
|
+
.tg-pdl { position: absolute; bottom: calc(50% + 10px); transform: translateX(-50%); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--bd-prog); white-space: nowrap; z-index: 3; line-height: var(--lh-label); }
|
|
1203
1203
|
.tg-pdl.late { color: var(--cz-late); }
|
|
1204
1204
|
.tg-prd .bd-prdb, .tg-psb { grid-column: 1 / -1; }
|
|
1205
1205
|
.tg-lgd .k.pdm { width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; background: var(--bd-prog); margin-right: 7px; }
|
|
1206
1206
|
.tg-lgd .k.dlv { width: 8px; height: 8px; transform: rotate(45deg); border-radius: 2px; border: 2px solid var(--bd-done); background: var(--cz-card); margin-right: 7px; }
|
|
1207
1207
|
.tg-lgd .k.td { width: 2px; height: 12px; border-radius: 0; background: var(--cz-ink); opacity: .75; vertical-align: -2px; }
|
|
1208
1208
|
/* the next step leads (PgBoard, the frame's nextfirst layer): the output's name is quiet, the next-step line is ink with its part in blue ink */
|
|
1209
|
-
.bt-l .bt-dl .t1 b { color: var(--cz-ink3); font-weight:
|
|
1210
|
-
.bt-l .bt-dl .t3 { font-size: var(--fs-
|
|
1211
|
-
.bt-l .bt-dl .t3 em.nx { color: var(--cz-blueink); font-weight:
|
|
1209
|
+
.bt-l .bt-dl .t1 b { color: var(--cz-ink3); font-weight: var(--fw-strong); }
|
|
1210
|
+
.bt-l .bt-dl .t3 { font-size: var(--fs-label); color: var(--cz-ink); font-weight: var(--fw-strong); line-height: var(--lh-label); }
|
|
1211
|
+
.bt-l .bt-dl .t3 em.nx { color: var(--cz-blueink); font-weight: var(--fw-strong); }
|
|
1212
1212
|
/* the committed date under a milestone (PgBoard .eta) */
|
|
1213
|
-
.sc .eta { position: absolute; top: calc(50% + 8px); font-size: var(--fs-
|
|
1213
|
+
.sc .eta { position: absolute; top: calc(50% + 8px); font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink2); white-space: nowrap; line-height: var(--lh-badge); }
|
|
1214
1214
|
.sc .cur .eta { top: 19px; }
|
|
1215
1215
|
.sc .eta.late { color: var(--cz-late); }
|
|
1216
1216
|
.bd-kb.lanes .bd-kstrip span { margin-top: 58px; }
|
|
@@ -1243,7 +1243,7 @@ body.bd-spick .bd-hd .bd-tools { margin-left: auto; }
|
|
|
1243
1243
|
.sp-pg .sp-t { position: relative; }
|
|
1244
1244
|
.sp-r.tg-prd, .sp .tg-psb { display: flex; }
|
|
1245
1245
|
.sp .tg-prd .bd-prdb { flex: 1; }
|
|
1246
|
-
.bt-gmore { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 9px 14px 9px 50px; background: var(--bd-row); border-top: 1px solid var(--cz-hair); font:
|
|
1246
|
+
.bt-gmore { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 9px 14px 9px 50px; background: var(--bd-row); border-top: 1px solid var(--cz-hair); font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); color: var(--cz-ink3); }
|
|
1247
1247
|
.bt-gmore:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: -2px; }
|
|
1248
1248
|
.bt-gmore svg { width: 14px; height: 14px; }
|
|
1249
1249
|
|
|
@@ -1256,15 +1256,15 @@ body.bd-spick .bd-hd .bd-tools { margin-left: auto; }
|
|
|
1256
1256
|
.bd-wfedit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
|
1257
1257
|
.bd-fg .bd-chip .wfi { margin-right: 4px; }
|
|
1258
1258
|
/* By stage: a card names its own stage with its workflow's icon (All), In progress holds its cards three across, the category bar (one workflow) */
|
|
1259
|
-
.bd-bc .cm { display: flex; align-items: center; gap: 6px; font-size: var(--fs-
|
|
1259
|
+
.bd-bc .cm { display: flex; align-items: center; gap: 6px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); min-width: 0; line-height: var(--lh-label); }
|
|
1260
1260
|
.bd-bc .cm > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1261
1261
|
.bd-kc.wide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; }
|
|
1262
|
-
.bd-kcat { margin-top: 6px; padding-top: 4px; border-top: 2px solid var(--cz-hair); text-align: center; font-size: var(--fs-
|
|
1262
|
+
.bd-kcat { margin-top: 6px; padding-top: 4px; border-top: 2px solid var(--cz-hair); text-align: center; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); min-width: 0; line-height: var(--lh-badge); }
|
|
1263
1263
|
.bd-kcat span { white-space: nowrap; }
|
|
1264
1264
|
.bd-kstrip.end { color: var(--cz-ink3); background: transparent; border: 1px dashed var(--cz-hair); }
|
|
1265
1265
|
.bd-kstrip.end b { color: var(--cz-ink3); }
|
|
1266
1266
|
/* the List: Workflow (icon and name), Stage and Category (WfAElse); the columns are set with the List's own rules above */
|
|
1267
|
-
.bd-wfn { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight:
|
|
1267
|
+
.bd-wfn { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: var(--fw-strong); font-size: var(--fs-label); color: var(--cz-ink2); white-space: nowrap; overflow: hidden; line-height: var(--lh-label); }
|
|
1268
1268
|
/* the track: another workflow's stages share the cells' width; with All, three category bands of bars (WfATrack) */
|
|
1269
1269
|
.bt-cells.wfn { grid-template-columns: repeat(var(--n), calc(576px / var(--n))); }
|
|
1270
1270
|
.bt-cells.bands { grid-template-columns: 64px minmax(0, 1fr) 72px; width: 576px; column-gap: 12px; padding: 0 8px; box-sizing: border-box; }
|
|
@@ -1275,7 +1275,7 @@ body.bd-spick .bd-hd .bd-tools { margin-left: auto; }
|
|
|
1275
1275
|
.bnd span.nw { background: var(--cz-ink); }
|
|
1276
1276
|
.bnd span.k { background: transparent; box-shadow: inset 0 0 0 1.5px var(--bd-pass); }
|
|
1277
1277
|
.bnd span.m { flex: 0 0 10px; min-width: 10px; height: 10px; transform: rotate(45deg); border-radius: 2px; }
|
|
1278
|
-
.bnd span em { position: absolute; top: 12px; left: 0; font-style: normal; font-size: var(--fs-
|
|
1278
|
+
.bnd span em { position: absolute; top: 12px; left: 0; font-style: normal; font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink2); white-space: nowrap; line-height: var(--lh-badge); }
|
|
1279
1279
|
.bnd span.m em { transform: rotate(-45deg); transform-origin: 0 0; top: 10px; left: 10px; }
|
|
1280
1280
|
.bt-nm b .wfi { margin-right: 6px; vertical-align: -3px; }
|
|
1281
1281
|
@media (max-width: 1200px) {
|
|
@@ -1299,13 +1299,13 @@ body.bd-spick .bd-hd .bd-tools { margin-left: auto; }
|
|
|
1299
1299
|
}
|
|
1300
1300
|
/* the phone's category sections (WfAPhone) */
|
|
1301
1301
|
.bd-pcats { gap: 4px; }
|
|
1302
|
-
.bd-pcat { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; padding: 8px 10px 4px 8px; font-size: var(--fs-
|
|
1302
|
+
.bd-pcat { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; padding: 8px 10px 4px 8px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
|
|
1303
1303
|
.bd-pcat.end { color: var(--cz-ink3); }
|
|
1304
1304
|
.bd-pcat svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
|
1305
1305
|
.bd-pcat:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; border-radius: 8px; }
|
|
1306
1306
|
.bd-pcats .bd-lrow { background: var(--cz-card); }
|
|
1307
1307
|
.bd-lrow .wfi { margin-left: 2px; }
|
|
1308
|
-
.bd-pmore { all: unset; box-sizing: border-box; cursor: pointer; align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; font-size: var(--fs-
|
|
1308
|
+
.bd-pmore { all: unset; box-sizing: border-box; cursor: pointer; align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-label); }
|
|
1309
1309
|
.bd-pmore:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; border-radius: 8px; }
|
|
1310
1310
|
/* idle time (feedback batch 9 item 8; XtiA1Desk, XtiA2Hold, XtiAHard, XtiA3Phone): a hold breaks the bar into a dotted gap with ⏸ where it stopped
|
|
1311
1311
|
* and the return date where it starts again; a plain gap in the dates just breaks it. The pieces square off where they meet a gap. */
|
|
@@ -1323,18 +1323,18 @@ body.bd-spick .bd-hd .bd-tools { margin-left: auto; }
|
|
|
1323
1323
|
.tg-pz.late { border-color: var(--cz-dot-late); color: var(--cz-late); }
|
|
1324
1324
|
.tg-pz:hover { background: var(--cz-well); }
|
|
1325
1325
|
.tg-pz:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
|
|
1326
|
-
.tg-hl { position: absolute; bottom: calc(50% + 7px); transform: translateX(-50%); font-size: var(--fs-
|
|
1326
|
+
.tg-hl { position: absolute; bottom: calc(50% + 7px); transform: translateX(-50%); font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); white-space: nowrap; z-index: 3; background: var(--cz-card); padding: 0 4px; border-radius: 6px; line-height: 15px; }
|
|
1327
1327
|
.tg-hl.late { color: var(--cz-late); }
|
|
1328
1328
|
.tg-lab.tg-clash { background: var(--cz-card); padding: 0 4px; border-radius: 6px; transform: translate(10px, -50%); }
|
|
1329
1329
|
.tg-span.ho { height: 0; margin-top: 0; border-radius: 0; background: none; border-top: 3px dotted var(--bd-progsp); }
|
|
1330
1330
|
.tg-lgd .k.ho { width: 18px; height: 0; border-radius: 0; border-top: 2px dotted var(--cz-ink3); vertical-align: 3px; }
|
|
1331
1331
|
/* the ⏸ press (XtiA2Hold): how long, why, the dates; icons to resume now and to change the return date */
|
|
1332
|
-
.bd-hold h4 { margin: 0; font-size: var(--fs-
|
|
1332
|
+
.bd-hold h4 { margin: 0; font-size: var(--fs-section); font-weight: var(--fw-strong); display: flex; align-items: center; gap: 8px; line-height: var(--lh-section); }
|
|
1333
1333
|
.bd-hold h4 svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
|
|
1334
|
-
.bd-hold p { margin: 0; font-size: var(--fs-
|
|
1334
|
+
.bd-hold p { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: 1.45; }
|
|
1335
1335
|
.bd-hold p.late { color: var(--cz-late); }
|
|
1336
1336
|
.bd-hold .acts { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
|
|
1337
|
-
.bd-hold .acts input[type="date"] { font:
|
|
1337
|
+
.bd-hold .acts input[type="date"] { font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); color: var(--cz-ink); background: var(--cz-well); border: 1px solid var(--cz-hair); border-radius: 10px; height: 36px; padding: 0 8px; margin-right: auto; }
|
|
1338
1338
|
.bd-hold .bd-ib { width: 36px; height: 36px; background: var(--cz-well); }
|
|
1339
1339
|
.bd-pp.bd-hold { padding: 14px 16px; gap: 8px; width: 300px; }
|
|
1340
1340
|
.bd-pp.bd-hold.sheet { width: auto; }
|
|
@@ -1348,24 +1348,24 @@ body.bd-spick .bd-hd .bd-tools { margin-left: auto; }
|
|
|
1348
1348
|
.tg-tm.late, .tg-tmc.late { border-color: var(--cz-dot-late); }
|
|
1349
1349
|
.tg-tmc { all: unset; box-sizing: border-box; position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; transform: rotate(45deg); border-radius: 4px; background: var(--cz-card); border: 2px solid var(--bd-done); z-index: 3; cursor: pointer; display: flex; align-items: center; justify-content: center; }
|
|
1350
1350
|
.tg-tmc.dn { background: var(--bd-done); }
|
|
1351
|
-
.tg-tmc b { transform: rotate(-45deg); font-size: 10px; font-weight:
|
|
1351
|
+
.tg-tmc b { transform: rotate(-45deg); font-size: 10px; font-weight: var(--fw-strong); color: var(--cz-ink2); }
|
|
1352
1352
|
.tg-tmc.dn b { color: var(--cz-card); }
|
|
1353
1353
|
.tg-tmc.late b { color: var(--cz-late); }
|
|
1354
1354
|
.tg-tmc:focus-visible, .tg-tmc[aria-expanded="true"] { outline: 2px solid var(--cz-blue); outline-offset: 3px; }
|
|
1355
|
-
.tg-tml { position: absolute; top: calc(50% + 9px); transform: translateX(-50%); font-size: var(--fs-
|
|
1356
|
-
.tg-tml.late { color: var(--cz-late); font-weight:
|
|
1355
|
+
.tg-tml { position: absolute; top: calc(50% + 9px); transform: translateX(-50%); font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 3; pointer-events: none; line-height: var(--lh-badge); }
|
|
1356
|
+
.tg-tml.late { color: var(--cz-late); font-weight: var(--fw-strong); }
|
|
1357
1357
|
.tg-msp { position: fixed; z-index: 60; min-width: 240px; max-width: min(360px, calc(100vw - 16px)); padding: 6px; background: var(--cz-card); border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,.16), 0 0 0 1px var(--cz-hair); }
|
|
1358
|
-
.tg-msp .o { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px; font-size: var(--fs-
|
|
1358
|
+
.tg-msp .o { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); cursor: pointer; line-height: var(--lh-row); }
|
|
1359
1359
|
.tg-msp .o:hover, .tg-msp .o:focus-visible { background: var(--cz-well2); }
|
|
1360
1360
|
.tg-msp .o > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1361
|
-
.tg-msp .k { font-size: var(--fs-
|
|
1361
|
+
.tg-msp .k { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
|
|
1362
1362
|
.tg-msp .k.late { color: var(--cz-late); }
|
|
1363
1363
|
.tg-tm-i { flex: none; width: 10px; height: 10px; transform: rotate(45deg); border-radius: 2px; border: 2px solid var(--bd-done); box-sizing: border-box; }
|
|
1364
1364
|
.tg-tm-i.dn { background: var(--bd-done); }
|
|
1365
1365
|
.tg-tm-i.late { border-color: var(--cz-dot-late); }
|
|
1366
1366
|
.tg-msp.sh { left: 0; right: 0; bottom: 0; top: auto; max-width: none; border-radius: 24px 24px 0 0; padding: 10px 12px calc(16px + env(safe-area-inset-bottom)); }
|
|
1367
1367
|
.tg-msp.sh .gr { display: block; width: 36px; height: 4px; margin: 0 auto 10px; border-radius: 2px; background: var(--cz-hair); }
|
|
1368
|
-
.tg-msp.sh .h { display: block; padding: 4px 12px 8px; font-size: var(--fs-
|
|
1368
|
+
.tg-msp.sh .h { display: block; padding: 4px 12px 8px; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-row); }
|
|
1369
1369
|
.tgq-r .tg-tm, .tgq-r .tg-tmc { top: 50%; }
|
|
1370
1370
|
/* the product lane (batch 11 item 17; PlmA1Board, PlmA2Folded, PlmA3Phone): a product's head row carries every milestone of its initiatives,
|
|
1371
1371
|
* the rows' ◇ rolled up, over a thin grey line from the first start to the last end. The name cell keeps the fold button; the lane is the track. */
|
|
@@ -1375,7 +1375,7 @@ body.bd-spick .bd-hd .bd-tools { margin-left: auto; }
|
|
|
1375
1375
|
.tg-lnn .bd-prdb { min-width: 0; overflow: hidden; }
|
|
1376
1376
|
.tg-lane .tg-span { background: var(--bd-plan); }
|
|
1377
1377
|
.tgq-n.tg-lnn { display: flex; width: var(--vw, 100%); padding: 4px 10px 2px; cursor: default; }
|
|
1378
|
-
.tg-lnp .o small { display: block; font-size: var(--fs-
|
|
1378
|
+
.tg-lnp .o small { display: block; font-size: var(--fs-meta); font-weight: var(--fw-regular); color: var(--cz-ink3); overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-meta); }
|
|
1379
1379
|
.tg-msp.sh { max-height: 70vh; overflow-y: auto; }
|
|
1380
1380
|
/* planned versus actual (batch 11 item 8; canvas PvaAC4Board): the saved plan's thin line with end caps under the bar, the slip after the end
|
|
1381
1381
|
* date (+14d orange, −15d grey), an initiative with drafts only drawn dashed, the legend's Plan and Draft keys. Milestone date labels drop
|
|
@@ -1384,7 +1384,7 @@ body.bd-spick .bd-hd .bd-tools { margin-left: auto; }
|
|
|
1384
1384
|
.tg-pl::before, .tg-pl::after { content: ""; position: absolute; top: -3px; width: 1.6px; height: 7.6px; background: var(--cz-ink2); }
|
|
1385
1385
|
.tg-pl::before { left: 0; } .tg-pl::after { right: 0; }
|
|
1386
1386
|
.tg-p:has(.tg-pl) .tg-tml { top: calc(50% + 22px); }
|
|
1387
|
-
.tg-slip { font-weight:
|
|
1387
|
+
.tg-slip { font-weight: var(--fw-strong); color: var(--cz-ink3); }
|
|
1388
1388
|
.tg-slip.late { color: var(--cz-late); }
|
|
1389
1389
|
.tg-bar.tg-dr { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--cz-ink3) 75%, var(--cz-card)); box-sizing: border-box; }
|
|
1390
1390
|
.tg-lgd .k.pln { width: 16px; height: 1.6px; border-radius: 0; background: var(--cz-ink2); position: relative; vertical-align: 3px; }
|
|
@@ -1414,15 +1414,15 @@ span.tg-ng { cursor: default; }
|
|
|
1414
1414
|
/* the gap's card: its words, and + New task with its dates while part of it is ahead (XgapAHard 2) */
|
|
1415
1415
|
.tg-gpc { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 10px 10px 14px; }
|
|
1416
1416
|
.tg-gpc .w { flex: 1; min-width: 0; }
|
|
1417
|
-
.tg-gpc p { margin: 0; font-size: var(--fs-
|
|
1418
|
-
.tg-gpc p.s { margin-top: 2px; font-size: var(--fs-
|
|
1417
|
+
.tg-gpc p { margin: 0; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-row); }
|
|
1418
|
+
.tg-gpc p.s { margin-top: 2px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
|
|
1419
1419
|
.tg-gpc .gp-add { all: unset; box-sizing: border-box; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--cz-ink); color: var(--cz-card); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
|
|
1420
1420
|
.tg-gpc .gp-add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
|
|
1421
1421
|
.tg-gpc .gp-add:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
|
|
1422
1422
|
/* the phone's row sheet: a gap and a skipped stage are lines in date order with the milestones; words only */
|
|
1423
|
-
.tg-msp .o.i { cursor: default; font-weight:
|
|
1423
|
+
.tg-msp .o.i { cursor: default; font-weight: var(--fw-strong); color: var(--cz-ink2); }
|
|
1424
1424
|
.tg-msp .o.i:hover { background: none; }
|
|
1425
|
-
.tg-msp .o.i small { display: block; font-size: var(--fs-
|
|
1425
|
+
.tg-msp .o.i small { display: block; font-size: var(--fs-meta); font-weight: var(--fw-regular); color: var(--cz-ink3); white-space: normal; line-height: var(--lh-meta); }
|
|
1426
1426
|
.tg-ng-i { flex: none; width: 12px; height: 2px; background: var(--bd-done); }
|
|
1427
1427
|
.tg-sk-i { flex: none; width: 12px; display: inline-flex; color: var(--cz-ink3); }
|
|
1428
1428
|
|
|
@@ -1439,10 +1439,10 @@ span.tg-ng { cursor: default; }
|
|
|
1439
1439
|
.tg-late { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--cz-late); z-index: 1; pointer-events: none; }
|
|
1440
1440
|
.tg-late::after { content: ''; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--cz-late); }
|
|
1441
1441
|
.bd-colm { min-width: 300px; padding: 12px 14px 10px; gap: 6px; }
|
|
1442
|
-
.bd-cmh { font-size: var(--fs-
|
|
1442
|
+
.bd-cmh { font-size: var(--fs-badge); font-weight: var(--fw-strong); color: var(--cz-ink3); line-height: var(--lh-badge); }
|
|
1443
1443
|
.bd-cmg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
|
|
1444
|
-
.bd-cmi { display: flex; align-items: center; gap: 8px; min-height: 32px; font:
|
|
1445
|
-
.bd-cmi small { font-size: var(--fs-
|
|
1444
|
+
.bd-cmi { display: flex; align-items: center; gap: 8px; min-height: 32px; font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--cz-sans); color: var(--cz-ink); cursor: pointer; white-space: nowrap; }
|
|
1445
|
+
.bd-cmi small { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
1446
1446
|
.bd-cmi input { margin: 0; width: 16px; height: 16px; accent-color: var(--cz-blue); cursor: pointer; }
|
|
1447
1447
|
.bd-cmi input:disabled { cursor: default; }
|
|
1448
1448
|
@media (min-width: 721px) {
|
|
@@ -1450,22 +1450,22 @@ span.tg-ng { cursor: default; }
|
|
|
1450
1450
|
.tg-cols .tg-h > .tg-n { padding-top: 0; padding-bottom: 0; }
|
|
1451
1451
|
.tg-c0 { display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 12px; }
|
|
1452
1452
|
.tg-cols .tg-h .tg-c0 { justify-content: space-between; }
|
|
1453
|
-
.tg-c { min-width: 0; padding-right: 12px; font-size: var(--fs-
|
|
1453
|
+
.tg-c { min-width: 0; padding-right: 12px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-label); }
|
|
1454
1454
|
.tg-cst { display: flex; align-items: center; gap: 6px; }
|
|
1455
1455
|
.tg-cst.late { color: var(--cz-late); }
|
|
1456
1456
|
.tg-cst.risk { color: var(--cz-risk); }
|
|
1457
1457
|
.tg-cst.q { color: var(--cz-ink3); }
|
|
1458
1458
|
.tg-cms { display: flex; align-items: center; gap: 8px; }
|
|
1459
1459
|
.tg-cms > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
|
|
1460
|
-
.tg-cms em { font-style: normal; font-weight:
|
|
1461
|
-
.tg-cms small { font-size: var(--fs-
|
|
1460
|
+
.tg-cms em { font-style: normal; font-weight: var(--fw-strong); color: var(--cz-ink); overflow: hidden; text-overflow: ellipsis; }
|
|
1461
|
+
.tg-cms small { font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); line-height: var(--lh-label); }
|
|
1462
1462
|
.tg-cms.late small { color: var(--cz-late); }
|
|
1463
1463
|
.tg-cms .msd { flex: none; width: 10px; height: 10px; box-sizing: border-box; transform: rotate(45deg); border-radius: 2px; border: 2px solid var(--cz-ink2); }
|
|
1464
1464
|
.tg-cms.late .msd { border-color: var(--cz-late); background: var(--cz-late); }
|
|
1465
1465
|
.tg-cwf, .tg-cow { display: flex; align-items: center; gap: 6px; }
|
|
1466
1466
|
.tg-cwf > span, .tg-cow > span { overflow: hidden; text-overflow: ellipsis; }
|
|
1467
1467
|
.tg-cwf svg { flex: none; }
|
|
1468
|
-
.tg-chd { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding-right: 10px; font-size: var(--fs-
|
|
1468
|
+
.tg-chd { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding-right: 10px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-label); }
|
|
1469
1469
|
.tg-chd:hover, .tg-chd.on { color: var(--cz-ink); }
|
|
1470
1470
|
.tg-chd svg { flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
|
|
1471
1471
|
.tg-chd:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; border-radius: 6px; }
|
|
@@ -1473,9 +1473,9 @@ span.tg-ng { cursor: default; }
|
|
|
1473
1473
|
|
|
1474
1474
|
/* the read-only copy of a published board (pm/readonly.js, initiative board-publish): hidden means gone, the line above the Board, and the Timeline with a viewer open */
|
|
1475
1475
|
.ro [hidden] { display: none !important; }
|
|
1476
|
-
.ro-by { margin: 14px 18px 0; font-size: var(--fs-
|
|
1477
|
-
.ro-by b { color: var(--cz-ink); font-weight:
|
|
1478
|
-
.ro-back { color: inherit; font-weight:
|
|
1476
|
+
.ro-by { margin: 14px 18px 0; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
|
|
1477
|
+
.ro-by b { color: var(--cz-ink); font-weight: var(--fw-strong); }
|
|
1478
|
+
.ro-back { color: inherit; font-weight: var(--fw-strong); text-decoration: none; }
|
|
1479
1479
|
.ro-back:hover { text-decoration: underline; }
|
|
1480
1480
|
/* with a viewer open the Timeline keeps the initiative's name: no Stage, Status, Start or Next milestone */
|
|
1481
1481
|
.ro-vw .tg { --nw: 300px !important; --cg: minmax(0, 1fr) !important; }
|
|
@@ -1491,7 +1491,7 @@ span.tg-ng { cursor: default; }
|
|
|
1491
1491
|
.tg-fh:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
|
|
1492
1492
|
.tg-fh::before { content: ''; position: absolute; inset: -12px 0; } /* a 44 px press target around the 20 px bar */
|
|
1493
1493
|
.tg-lgd .k.fh { background: repeating-linear-gradient(45deg, var(--cz-dot-late) 0 3px, transparent 3px 6px); }
|
|
1494
|
-
.tg-pgo .tt small.tg-pgr { color: var(--cz-late); font-weight:
|
|
1494
|
+
.tg-pgo .tt small.tg-pgr { color: var(--cz-late); font-weight: var(--fw-strong); }
|
|
1495
1495
|
.bd-fc-go { display: flex; justify-content: flex-end; padding-bottom: 6px; }
|
|
1496
1496
|
.bd-fc-sp { all: unset; box-sizing: border-box; width: 44px; height: 44px; border-radius: 22px; background: var(--cz-blue); color: var(--cz-onsolid); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
|
|
1497
1497
|
.bd-fc-sp:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
|