kanbo-cli 0.6.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/CHANGELOG.md +47 -0
  2. package/README.md +8 -7
  3. package/dist/cli-main.cjs +3937 -5194
  4. package/dist/lib/{approval-CnJJfwfi.d.mts → approval-CDiZbegu.d.mts} +20 -31
  5. package/dist/lib/{approval-DNfUhYD5.d.cts → approval-Nmk8UDPy.d.cts} +20 -31
  6. package/dist/lib/index.cjs +65 -66
  7. package/dist/lib/index.d.cts +5 -8
  8. package/dist/lib/index.d.mts +5 -8
  9. package/dist/lib/index.mjs +2 -2
  10. package/dist/lib/mcp/index.cjs +39 -40
  11. package/dist/lib/mcp/index.d.cts +3 -3
  12. package/dist/lib/mcp/index.d.mts +3 -3
  13. package/dist/lib/mcp/index.mjs +2 -2
  14. package/dist/lib/{manifest-BFI4HGPh.cjs → tool-names-BOUJas7m.cjs} +1006 -2259
  15. package/dist/lib/{manifest-DHI1fkoW.mjs → tool-names-CrvHZ-ON.mjs} +1009 -2256
  16. package/dist/page/board.css +2058 -842
  17. package/dist/page/board.js +5 -2
  18. package/dist/page/fonts/LICENSE +93 -0
  19. package/dist/page/fonts/geist-cyrillic-wght-normal.woff2 +0 -0
  20. package/dist/page/fonts/geist-latin-ext-wght-normal.woff2 +0 -0
  21. package/dist/page/fonts/geist-latin-wght-normal.woff2 +0 -0
  22. package/package.json +1 -1
package/dist/page/board.css CHANGED
@@ -1,136 +1,206 @@
1
1
  /*
2
- * The board page's look, as `DIRECTION.md` beside it says: a strip board of
3
- * paper and ink, orange only for "waiting for you". System fonts, no web font.
2
+ * The board page's look, as `DIRECTION.md` beside it says: Modular's board —
3
+ * Geist, a near-white neutral palette, white cards with a hairline ring, quiet
4
+ * column bays. Amber is "waiting for you", blue a machine at work.
4
5
  * Layers: tokens, base, components, layout, motion. Raw values live only in
5
6
  * the tokens' `:root` blocks (`board-css.test.ts` checks).
6
7
  * Breakpoints, mobile first: 40rem (640 px), 56.25rem (900 px).
7
8
  */
8
9
 
10
+ /* ===== fonts ===== */
11
+
12
+ @font-face {
13
+ font-family: 'Geist';
14
+ font-style: normal;
15
+ font-weight: 100 900;
16
+ font-display: swap;
17
+ src: url('/assets/fonts/geist-cyrillic-wght-normal.woff2') format('woff2-variations');
18
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
19
+ }
20
+
21
+ @font-face {
22
+ font-family: 'Geist';
23
+ font-style: normal;
24
+ font-weight: 100 900;
25
+ font-display: swap;
26
+ src: url('/assets/fonts/geist-latin-ext-wght-normal.woff2') format('woff2-variations');
27
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
28
+ }
29
+
30
+ @font-face {
31
+ font-family: 'Geist';
32
+ font-style: normal;
33
+ font-weight: 100 900;
34
+ font-display: swap;
35
+ src: url('/assets/fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
36
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
37
+ }
38
+
9
39
  /* ===== tokens ===== */
10
40
 
11
41
  :root {
12
42
  color-scheme: light dark;
13
43
 
14
- /* colour by job — light: a paper strip board in daylight */
15
- --color-bg: #F1EFE9;
16
- --color-surface: #FAF9F6;
17
- --color-well: #E6E3DB;
18
- --color-raised: #FFFFFF;
19
- --color-text: #1B2129;
20
- --color-text-muted: #59616C;
21
- --color-border: #DCD8CF;
22
- --color-border-strong: #8A867D;
23
- --color-focus: #1B2129;
24
- --color-primary: #1B2129;
25
- --color-on-primary: #FFFFFF;
26
- --color-waiting: #E8590C;
27
- --color-on-waiting: #1C0D02;
28
- --color-waiting-wash: #FFF1E5;
29
- --color-running: #1E5BC6;
30
- --color-running-wash: #E7EEFB;
31
- --color-agent: var(--color-running);
32
- --color-agent-wash: var(--color-running-wash);
33
- --color-done: #2C7A4B;
34
- --color-quiet: #8B9098;
35
- --color-danger: #BF2A2A;
36
- --color-danger-wash: #FCEBEA;
37
- --color-tint: rgb(27 33 41 / 6%);
38
- --color-scrim: rgb(27 33 41 / 28%);
39
- --color-shadow: rgb(27 33 41 / 7%);
40
- --color-shadow-strong: rgb(27 33 41 / 14%);
44
+ /* colour by job — light */
45
+ --color-background: #FAFAFA;
46
+ --color-foreground: #262626;
47
+ --color-card: #FFFFFF;
48
+ --color-popover: #FFFFFF;
49
+ --color-primary: #262626;
50
+ --color-on-primary: #FAFAFA;
51
+ --color-fill: rgb(0 0 0 / 4%);
52
+ --color-accent: rgb(0 0 0 / 7%);
53
+ --color-text-secondary: #737373;
54
+ --color-text-dim: #A1A1A1;
55
+ --color-border: rgb(0 0 0 / 6%);
56
+ --color-border-strong: rgb(0 0 0 / 15%);
57
+ --color-input: rgb(0 0 0 / 7%);
58
+ --color-ring: #A1A1A1;
59
+ --color-info: #2B7FFF;
60
+ --color-info-fg: #1447E6;
61
+ --color-success: #00BC7D;
62
+ --color-success-fg: #007A55;
63
+ --color-warning: #FE9A00;
64
+ --color-warning-fg: #BB4D00;
65
+ --color-destructive: #FB2C36;
66
+ --color-info-wash: color-mix(in srgb, var(--color-info) 12%, transparent);
67
+ --color-success-wash: color-mix(in srgb, var(--color-success) 12%, transparent);
68
+ --color-warning-wash: color-mix(in srgb, var(--color-warning) 12%, transparent);
69
+ --color-destructive-wash: color-mix(in srgb, var(--color-destructive) 12%, transparent);
70
+ --color-scrim: rgb(0 0 0 / 28%);
71
+
72
+ /* priority */
73
+ --color-priority-urgent: #EF4444;
74
+ --color-priority-high: #F97316;
75
+ --color-priority-medium: #EAB308;
76
+ --color-priority-low: #3B82F6;
77
+ --color-priority-none: #6B7280;
78
+
79
+ /* label tones: tone-500 for the ring and wash, tone-700 / tone-300 for the text */
80
+ --tone-blue: #3B82F6;
81
+ --tone-emerald: #10B981;
82
+ --tone-amber: #F59E0B;
83
+ --tone-rose: #F43F5E;
84
+ --tone-violet: #8B5CF6;
85
+ --tone-cyan: #06B6D4;
86
+ --tone-slate: #64748B;
87
+ --tone-blue-text: #1D4ED8;
88
+ --tone-emerald-text: #047857;
89
+ --tone-amber-text: #B45309;
90
+ --tone-rose-text: #BE123C;
91
+ --tone-violet-text: #6D28D9;
92
+ --tone-cyan-text: #0E7490;
93
+ --tone-slate-text: #334155;
94
+
95
+ /* chart palette, in board order */
96
+ --chart-1: #3B82F6;
97
+ --chart-2: #8B5CF6;
98
+ --chart-3: #F97316;
99
+ --chart-4: #10B981;
100
+ --chart-5: #F43F5E;
101
+ --chart-6: #06B6D4;
102
+ --chart-7: #F59E0B;
103
+ --chart-8: #64748B;
41
104
 
42
105
  /* type */
43
- --font-text: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
106
+ --font-text: 'Geist', ui-sans-serif, system-ui, sans-serif;
44
107
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
45
- --font-display: var(--font-text);
46
- --text-xs: 0.6875rem;
47
- --text-sm: 0.75rem;
48
- --text-base: 0.8125rem;
49
- --text-md: 0.875rem;
50
- --text-lg: 1rem;
51
- --text-xl: 1.25rem;
52
- --text-2xl: 1.5rem;
53
- --text-reading: 0.9375rem;
54
- --leading-tight: 1.3;
108
+ --text-10: 0.625rem;
109
+ --text-10-5: 0.65625rem;
110
+ --text-11: 0.6875rem;
111
+ --text-12: 0.75rem;
112
+ --text-13: 0.8125rem;
113
+ --text-14: 0.875rem;
114
+ --text-16: 1rem;
115
+ --text-24: 1.5rem;
116
+ --leading-title: 1.375;
55
117
  --leading-normal: 1.5;
56
- --tracking-caps: 0.06em;
57
118
 
58
- /* space, 4 px based */
59
- --space-1: 0.25rem;
60
- --space-2: 0.5rem;
61
- --space-3: 0.75rem;
62
- --space-4: 1rem;
63
- --space-5: 1.5rem;
64
- --space-6: 2rem;
65
- --space-7: 3rem;
119
+ /* space */
120
+ --space-2: 0.125rem;
121
+ --space-4: 0.25rem;
122
+ --space-6: 0.375rem;
123
+ --space-8: 0.5rem;
124
+ --space-10: 0.625rem;
125
+ --space-12: 0.75rem;
126
+ --space-16: 1rem;
127
+ --space-24: 1.5rem;
66
128
 
67
129
  /* shape */
68
- --radius-sm: 0.1875rem;
69
- --radius-md: 0.375rem;
70
- --radius-lg: 0.625rem; /* = radius-md + the bay's 4 px padding */
71
- --edge-width: 3px;
72
- --shadow-card: 0 1px 0 var(--color-shadow);
73
- --shadow-lift: 0 1px 0 var(--color-shadow), 0 4px 12px var(--color-shadow-strong);
74
- --shadow-panel: 0 24px 64px var(--color-shadow-strong);
130
+ --radius-4: 0.25rem;
131
+ --radius-6: 0.375rem;
132
+ --radius-8: 0.5rem;
133
+ --radius-10: 0.625rem;
134
+ --radius-14: 0.875rem;
135
+ --shadow-xs: 0 1px 2px rgb(0 0 0 / 4%), 0 0 0 1px rgb(0 0 0 / 5%);
136
+ --shadow-sm: 0 1px 3px rgb(0 0 0 / 8%), 0 0 0 1px rgb(0 0 0 / 6%);
137
+ --shadow-md: 0 4px 16px -2px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%);
138
+ --shadow-lg: 0 8px 40px -8px rgb(0 0 0 / 14%), 0 2px 8px -2px rgb(0 0 0 / 7%);
75
139
 
76
140
  /* sizes: touch first, tightened from 40rem */
77
141
  --control-height: 2.5rem;
78
- --chip-height: 2.5rem;
79
- --column-width: 15rem;
80
- --column-max: 20rem;
142
+ --topbar-height: 3rem;
143
+ --column-min: 17rem;
144
+ --column-width: 20rem;
81
145
  --dialog-width: 78rem;
82
146
  --dialog-side-width: 21.5rem;
83
147
 
84
148
  /* layers */
85
149
  --z-raised: 1;
150
+ --z-popover: 5;
86
151
  --z-panel: 10;
87
152
  --z-overlay: 20;
88
- --z-toast: 30;
153
+ --z-bar: 25;
89
154
 
90
155
  /* motion */
91
156
  --duration-fast: 120ms;
92
- --duration-base: 200ms;
93
- --duration-slow: 320ms;
157
+ --duration-base: 150ms;
158
+ --duration-slow: 200ms;
159
+ --duration-dialog: 300ms;
94
160
  --duration-loop: 1600ms;
95
- --ease-out: cubic-bezier(0.2, 0, 0, 1);
161
+ --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
96
162
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
97
- --press-scale: 0.96;
163
+ --press-scale: 0.99;
98
164
  }
99
165
 
100
166
  @media (prefers-color-scheme: dark) {
101
167
  :root {
102
- /* dark: the same board under a desk lamp — ink ground, warm signal */
103
- --color-bg: #13161A;
104
- --color-surface: #181C21;
105
- --color-well: #0E1013;
106
- --color-raised: #1F242B;
107
- --color-text: #E6E8EB;
108
- --color-text-muted: #9AA2AD;
109
- --color-border: #2B3139;
110
- --color-border-strong: #6B7480;
111
- --color-focus: #E6E8EB;
112
- --color-primary: #E6E8EB;
113
- --color-on-primary: #13161A;
114
- --color-waiting: #FF8A3D;
115
- --color-on-waiting: #1C0D02;
116
- --color-waiting-wash: #2E2119;
117
- --color-running: #7AA7FF;
118
- --color-running-wash: #1B2740;
119
- --color-done: #5DC58A;
120
- --color-quiet: #727B86;
121
- --color-danger: #FF6F6A;
122
- --color-danger-wash: #3A1D1D;
123
- --color-tint: rgb(230 232 235 / 8%);
168
+ --color-background: #191919;
169
+ --color-foreground: #F5F5F5;
170
+ --color-card: #1D1D1D;
171
+ --color-popover: #1D1D1D;
172
+ --color-primary: #F5F5F5;
173
+ --color-on-primary: #262626;
174
+ --color-fill: rgb(255 255 255 / 4%);
175
+ --color-accent: rgb(255 255 255 / 8%);
176
+ --color-text-secondary: #818181;
177
+ --color-text-dim: #404040;
178
+ --color-border: rgb(255 255 255 / 5%);
179
+ --color-border-strong: rgb(255 255 255 / 15%);
180
+ --color-input: rgb(255 255 255 / 7%);
181
+ --color-ring: #737373;
182
+ --color-info-fg: #51A2FF;
183
+ --color-success-fg: #00D492;
184
+ --color-warning-fg: #FFB900;
185
+ --color-destructive: #FC4148;
124
186
  --color-scrim: rgb(0 0 0 / 50%);
125
- --color-shadow: rgb(0 0 0 / 30%);
126
- --color-shadow-strong: rgb(0 0 0 / 45%);
187
+ --tone-blue-text: #93C5FD;
188
+ --tone-emerald-text: #6EE7B7;
189
+ --tone-amber-text: #FCD34D;
190
+ --tone-rose-text: #FDA4AF;
191
+ --tone-violet-text: #C4B5FD;
192
+ --tone-cyan-text: #67E8F9;
193
+ --tone-slate-text: #CBD5E1;
194
+ --shadow-xs: 0 1px 2px rgb(0 0 0 / 20%), 0 0 0 1px rgb(255 255 255 / 6%), inset 0 1px 0 rgb(255 255 255 / 6%);
195
+ --shadow-sm: 0 1px 3px rgb(0 0 0 / 30%), 0 0 0 1px rgb(255 255 255 / 8%), inset 0 1px 0 rgb(255 255 255 / 6%);
196
+ --shadow-md: 0 4px 16px -2px rgb(0 0 0 / 40%), 0 2px 4px -1px rgb(0 0 0 / 25%), inset 0 1px 0 rgb(255 255 255 / 6%);
197
+ --shadow-lg: 0 8px 40px -8px rgb(0 0 0 / 55%), 0 2px 8px -2px rgb(0 0 0 / 30%), inset 0 1px 0 rgb(255 255 255 / 6%);
127
198
  }
128
199
  }
129
200
 
130
201
  @media (min-width: 40rem) {
131
202
  :root {
132
- --control-height: 1.875rem;
133
- --chip-height: 1.5rem;
203
+ --control-height: 1.75rem;
134
204
  }
135
205
  }
136
206
 
@@ -140,6 +210,7 @@
140
210
  --duration-fast: 0ms;
141
211
  --duration-base: 0ms;
142
212
  --duration-slow: 0ms;
213
+ --duration-dialog: 0ms;
143
214
  --press-scale: 1;
144
215
  }
145
216
  }
@@ -158,10 +229,10 @@ html {
158
229
 
159
230
  body {
160
231
  margin: 0;
161
- background: var(--color-bg);
162
- color: var(--color-text);
232
+ background: var(--color-background);
233
+ color: var(--color-foreground);
163
234
  font-family: var(--font-text);
164
- font-size: var(--text-base);
235
+ font-size: var(--text-13);
165
236
  line-height: var(--leading-normal);
166
237
  -webkit-font-smoothing: antialiased;
167
238
  }
@@ -179,12 +250,12 @@ button {
179
250
  }
180
251
 
181
252
  :focus-visible {
182
- outline: 2px solid var(--color-focus);
253
+ outline: 2px solid var(--color-ring);
183
254
  outline-offset: 2px;
184
255
  }
185
256
 
186
257
  ::selection {
187
- background: var(--color-running-wash);
258
+ background: var(--color-info-wash);
188
259
  }
189
260
 
190
261
  [hidden] {
@@ -202,31 +273,33 @@ button {
202
273
 
203
274
  /* ===== components ===== */
204
275
 
205
- /* Buttons */
276
+ /* Buttons: 28 px, quiet; the primary is the monochrome ink. */
206
277
 
207
278
  .primary,
208
279
  .secondary,
209
- .ghost {
280
+ .ghost,
281
+ .tool-button {
210
282
  display: inline-flex;
211
283
  align-items: center;
212
284
  justify-content: center;
213
- gap: var(--space-2);
285
+ gap: var(--space-6);
214
286
  min-height: var(--control-height);
215
- padding: 0 var(--space-3);
287
+ padding: 0 var(--space-10);
216
288
  border: 0;
217
- border-radius: var(--radius-md);
218
- font-size: var(--text-sm);
219
- font-weight: 600;
289
+ border-radius: var(--radius-6);
290
+ font-size: var(--text-12);
291
+ font-weight: 500;
220
292
  white-space: nowrap;
221
293
  transition:
222
- transform var(--duration-fast) var(--ease-out),
223
- background-color var(--duration-fast) var(--ease-out),
224
- color var(--duration-fast) var(--ease-out);
294
+ transform var(--duration-base) var(--ease-out),
295
+ background-color var(--duration-base) var(--ease-out),
296
+ color var(--duration-base) var(--ease-out);
225
297
  }
226
298
 
227
299
  .primary:active,
228
300
  .secondary:active,
229
- .ghost:active {
301
+ .ghost:active,
302
+ .tool-button:active {
230
303
  transform: scale(var(--press-scale));
231
304
  }
232
305
 
@@ -236,19 +309,54 @@ button {
236
309
  }
237
310
 
238
311
  .secondary {
239
- background: var(--color-raised);
240
- box-shadow: inset 0 0 0 1px var(--color-border-strong);
312
+ background: var(--color-card);
313
+ box-shadow: var(--shadow-xs);
241
314
  }
242
315
 
243
- .ghost {
316
+ .ghost,
317
+ .tool-button {
244
318
  background: transparent;
245
- color: var(--color-text-muted);
319
+ color: var(--color-text-secondary);
246
320
  }
247
321
 
248
322
  .ghost:hover,
323
+ .tool-button:hover,
324
+ .tool-button[aria-expanded='true'],
325
+ .tool-button[aria-pressed='true'] {
326
+ background: var(--color-fill);
327
+ color: var(--color-foreground);
328
+ }
329
+
249
330
  .secondary:hover {
250
- background: var(--color-tint);
251
- color: var(--color-text);
331
+ background: var(--color-accent);
332
+ }
333
+
334
+ .primary:hover {
335
+ background: color-mix(in srgb, var(--color-primary) 88%, transparent);
336
+ }
337
+
338
+ .icon {
339
+ flex: none;
340
+ width: 1rem;
341
+ height: 1rem;
342
+ }
343
+
344
+ .icon-button {
345
+ display: inline-grid;
346
+ place-items: center;
347
+ width: var(--control-height);
348
+ height: var(--control-height);
349
+ padding: 0;
350
+ border: 0;
351
+ border-radius: var(--radius-6);
352
+ background: transparent;
353
+ color: var(--color-text-secondary);
354
+ transition: background-color var(--duration-base) var(--ease-out);
355
+ }
356
+
357
+ .icon-button:hover {
358
+ background: var(--color-fill);
359
+ color: var(--color-foreground);
252
360
  }
253
361
 
254
362
  /* Fields */
@@ -256,22 +364,27 @@ button {
256
364
  .field {
257
365
  width: 100%;
258
366
  min-height: var(--control-height);
259
- padding: var(--space-1) var(--space-2);
367
+ padding: var(--space-4) var(--space-8);
260
368
  border: 0;
261
- border-radius: var(--radius-md);
262
- background: var(--color-raised);
263
- box-shadow: inset 0 0 0 1px var(--color-border-strong);
264
- font-size: var(--text-md);
369
+ border-radius: var(--radius-6);
370
+ background: var(--color-card);
371
+ box-shadow: inset 0 0 0 1px var(--color-input);
372
+ font-size: var(--text-13);
265
373
  line-height: var(--leading-normal);
266
374
  }
267
375
 
376
+ .field:focus-visible {
377
+ outline: 0;
378
+ box-shadow: inset 0 0 0 1px var(--color-ring), 0 0 0 2px var(--color-fill);
379
+ }
380
+
268
381
  textarea.field {
269
382
  display: block;
270
383
  resize: vertical;
271
384
  }
272
385
 
273
386
  .field::placeholder {
274
- color: var(--color-text-muted);
387
+ color: var(--color-text-secondary);
275
388
  }
276
389
 
277
390
  select.field {
@@ -284,8 +397,8 @@ select.field {
284
397
  .select-wrap select.field {
285
398
  appearance: none;
286
399
  width: 100%;
287
- padding: 0 calc(var(--space-6) - var(--space-1)) 0 var(--space-3);
288
- font-size: var(--text-sm);
400
+ padding: 0 var(--space-24) 0 var(--space-10);
401
+ font-size: var(--text-12);
289
402
  font-weight: 500;
290
403
  text-overflow: ellipsis;
291
404
  }
@@ -300,87 +413,23 @@ select.field {
300
413
  content: '';
301
414
  position: absolute;
302
415
  top: 50%;
303
- right: var(--space-3);
416
+ right: var(--space-10);
304
417
  width: 0.375rem;
305
418
  height: 0.375rem;
306
419
  border-right: 1.5px solid currentColor;
307
420
  border-bottom: 1.5px solid currentColor;
421
+ color: var(--color-text-secondary);
308
422
  transform: translateY(-70%) rotate(45deg);
309
423
  pointer-events: none;
310
424
  }
311
425
 
312
- /* Filter toggles and chips */
313
-
314
- .filter-toggle,
315
- .filter-chip {
316
- display: inline-flex;
317
- flex: 0 0 auto;
318
- align-items: center;
319
- gap: var(--space-2);
320
- border: 0;
321
- background: var(--color-raised);
322
- box-shadow: inset 0 0 0 1px var(--color-border-strong);
323
- font-size: var(--text-sm);
324
- font-weight: 500;
325
- white-space: nowrap;
326
- transition:
327
- transform var(--duration-fast) var(--ease-out),
328
- background-color var(--duration-fast) var(--ease-out),
329
- color var(--duration-fast) var(--ease-out);
330
- }
331
-
332
- .filter-toggle {
333
- min-height: var(--control-height);
334
- padding: 0 var(--space-3);
335
- border-radius: var(--radius-md);
336
- }
337
-
338
- .filter-chip {
339
- min-height: var(--chip-height);
340
- padding: 0 var(--space-2);
341
- border-radius: var(--radius-sm);
342
- }
343
-
344
- .filter-toggle:active,
345
- .filter-chip:active {
346
- transform: scale(var(--press-scale));
347
- }
348
-
349
- .filter-toggle:hover,
350
- .filter-chip:hover {
351
- background: var(--color-tint);
352
- }
353
-
354
- .filter-toggle[aria-pressed='true'],
355
- .filter-chip[aria-pressed='true'] {
356
- background: var(--color-primary);
357
- color: var(--color-on-primary);
358
- box-shadow: none;
359
- }
360
-
361
- .filter-toggle[data-filter]::before {
362
- content: '';
363
- width: 0.5rem;
364
- height: 0.5rem;
365
- border-radius: 50%;
366
- }
367
-
368
- .filter-toggle[data-filter='waiting']::before {
369
- border-radius: var(--radius-sm);
370
- background: var(--color-waiting);
371
- }
372
-
373
- .filter-toggle[data-filter='running']::before {
374
- background: var(--color-running);
375
- }
376
-
377
- /* Small marks on cards and in the panel */
426
+ /* Small marks shared by cards, rows and the dialog */
378
427
 
379
428
  .card-key,
380
429
  .attempt-chip,
381
430
  .workspace,
382
431
  .history-time,
383
- .column-count {
432
+ .count {
384
433
  font-family: var(--font-mono);
385
434
  font-variant-numeric: tabular-nums;
386
435
  }
@@ -388,564 +437,1781 @@ select.field {
388
437
  .card-key {
389
438
  min-width: 0;
390
439
  overflow: hidden;
391
- color: var(--color-text-muted);
392
- font-size: var(--text-xs);
393
- letter-spacing: 0.01em;
440
+ color: var(--color-text-secondary);
441
+ font-size: var(--text-10);
394
442
  white-space: nowrap;
395
443
  text-overflow: ellipsis;
396
444
  }
397
445
 
398
- .waiting-badge {
399
- display: inline-flex;
400
- flex: 0 0 auto;
401
- align-items: center;
402
- height: 1.25rem;
403
- padding: 0 var(--space-2);
404
- border-radius: var(--radius-sm);
405
- background: var(--color-waiting);
406
- color: var(--color-on-waiting);
407
- font-size: var(--text-sm);
408
- font-weight: 650;
409
- white-space: nowrap;
446
+ /* Notices */
447
+
448
+ .notice {
449
+ margin: 0;
450
+ padding: var(--space-8) var(--space-16);
451
+ border-bottom: 1px solid var(--color-border);
452
+ background: var(--color-card);
453
+ font-size: var(--text-12);
410
454
  }
411
455
 
412
- .run-state {
413
- display: inline-flex;
414
- align-items: center;
415
- gap: var(--space-2);
416
- min-width: 0;
417
- overflow: hidden;
418
- color: var(--color-running);
419
- font-size: var(--text-sm);
420
- font-weight: 600;
421
- white-space: nowrap;
422
- text-overflow: ellipsis;
456
+ .notice[data-kind='error'],
457
+ .panel-notice {
458
+ background: var(--color-destructive-wash);
459
+ color: var(--color-destructive);
423
460
  }
424
461
 
425
- .run-dot {
426
- position: relative;
427
- flex: 0 0 auto;
428
- width: 0.5rem;
429
- height: 0.5rem;
430
- border-radius: 50%;
431
- background: var(--color-running);
462
+ .panel-notice {
463
+ margin: var(--space-16) 0 0;
464
+ padding: var(--space-8) var(--space-12);
465
+ border-radius: var(--radius-6);
466
+ font-size: var(--text-12);
432
467
  }
433
468
 
434
- /* The ping ring; the dot stays solid. */
435
- .run-dot::after {
436
- content: '';
437
- position: absolute;
438
- inset: 0;
439
- border-radius: 50%;
440
- background: var(--color-running);
441
- opacity: 0;
469
+ /* Top bar: 48 px */
470
+
471
+ .topbar-title {
472
+ margin: 0;
473
+ font-size: var(--text-14);
474
+ font-weight: 600;
475
+ letter-spacing: -0.01em;
476
+ line-height: 1;
442
477
  }
443
478
 
444
- .attempt-chip {
445
- flex: 0 0 auto;
446
- margin-left: auto;
447
- padding: 0 var(--space-1);
448
- border-radius: var(--radius-sm);
449
- box-shadow: inset 0 0 0 1px var(--color-border-strong);
450
- color: var(--color-text-muted);
451
- font-size: var(--text-xs);
452
- line-height: 1.125rem;
479
+ .project-switcher select.field {
480
+ min-height: var(--control-height);
481
+ font-size: var(--text-13);
482
+ font-weight: 500;
453
483
  }
454
484
 
455
- /* Who works it: blue square an agent, ink circle you. */
456
- .worker {
457
- display: inline-flex;
458
- align-items: center;
459
- gap: var(--space-1);
485
+ .workspace {
460
486
  min-width: 0;
461
487
  overflow: hidden;
462
- color: var(--color-text-muted);
463
- font-size: var(--text-sm);
488
+ color: var(--color-text-secondary);
489
+ font-size: var(--text-11);
464
490
  white-space: nowrap;
465
491
  text-overflow: ellipsis;
466
492
  }
467
493
 
468
- .worker::before {
469
- content: '';
470
- flex: 0 0 auto;
471
- width: 0.4375rem;
472
- height: 0.4375rem;
494
+ .where-key {
495
+ color: var(--color-foreground);
496
+ font-weight: 600;
473
497
  }
474
498
 
475
- .worker[data-kind='agent']::before {
476
- border-radius: 1px;
477
- background: var(--color-agent);
499
+ .token-form {
500
+ display: flex;
501
+ align-items: center;
502
+ gap: var(--space-8);
478
503
  }
479
504
 
480
- .worker[data-kind='user']::before {
481
- border-radius: 50%;
482
- background: var(--color-text);
505
+ .token-label {
506
+ display: flex;
507
+ align-items: center;
508
+ gap: var(--space-8);
509
+ color: var(--color-text-secondary);
510
+ font-size: var(--text-12);
483
511
  }
484
512
 
485
- .priority,
486
- .label {
487
- display: inline-block;
488
- max-width: 100%;
489
- height: 1.125rem;
490
- padding: 0 var(--space-1);
491
- overflow: hidden;
492
- border-radius: var(--radius-sm);
493
- font-size: var(--text-xs);
494
- font-weight: 600;
495
- line-height: 1.125rem;
496
- white-space: nowrap;
497
- text-overflow: ellipsis;
498
- vertical-align: middle;
513
+ .token-input {
514
+ width: 7rem;
515
+ font-size: var(--text-12);
499
516
  }
500
517
 
501
- .priority {
502
- text-transform: capitalize;
518
+ /* Narrow: a working token's form folds into its button. */
519
+ .token-toggle {
520
+ display: none;
503
521
  }
504
522
 
505
- .priority[data-priority='urgent'] {
506
- background: var(--color-primary);
507
- color: var(--color-on-primary);
523
+ .topbar[data-token] .token-toggle {
524
+ display: inline-flex;
508
525
  }
509
526
 
510
- .priority[data-priority='high'] {
511
- box-shadow: inset 0 0 0 1px var(--color-text);
512
- color: var(--color-text);
527
+ .topbar[data-token='folded'] .token-form {
528
+ display: none;
513
529
  }
514
530
 
515
- .priority[data-priority='medium'],
516
- .priority[data-priority='low'] {
517
- box-shadow: inset 0 0 0 1px var(--color-border-strong);
518
- color: var(--color-text-muted);
519
- font-weight: 500;
531
+ /* The token sits at the right behind its button; the form opens by itself only when the page needs the token. */
532
+ .token-toggle {
533
+ order: 5;
534
+ margin-left: auto;
520
535
  }
521
536
 
522
- .label {
523
- background: var(--color-tint);
524
- color: var(--color-text-muted);
525
- font-weight: 500;
537
+ .token-form {
538
+ order: 6;
526
539
  }
527
540
 
528
- .status-line {
529
- display: -webkit-box;
530
- margin: 0;
531
- padding-left: var(--space-2);
532
- overflow: hidden;
533
- border-left: 2px solid var(--color-border);
534
- color: var(--color-text-muted);
535
- font-size: var(--text-sm);
536
- line-height: var(--leading-tight);
537
- overflow-wrap: anywhere;
538
- -webkit-box-orient: vertical;
539
- -webkit-line-clamp: 2;
541
+ .topbar:not([data-token]) .token-form {
542
+ margin-left: auto;
540
543
  }
541
544
 
542
- /* A card: a strip in its holder. The left edge says its state. */
545
+ /* Toolbar: one row of 28 px controls. */
543
546
 
544
- .card {
545
- --card-edge: transparent;
546
- --card-ring: var(--color-border);
547
- position: relative;
547
+ .toolbar {
548
548
  display: flex;
549
- flex: 0 0 auto;
550
- flex-direction: column;
551
- gap: var(--space-2);
552
- min-width: 0;
553
- padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + var(--edge-width));
554
- border-radius: var(--radius-md);
555
- background: var(--color-raised);
556
- box-shadow:
557
- inset var(--edge-width) 0 0 var(--card-edge),
558
- 0 0 0 1px var(--card-ring),
559
- var(--shadow-card);
560
- transition: box-shadow var(--duration-fast) var(--ease-out);
549
+ flex-wrap: wrap;
550
+ align-items: center;
551
+ gap: var(--space-6);
552
+ padding: var(--space-6) var(--space-12);
561
553
  }
562
554
 
563
- /* Hover is colour only, never movement. */
564
- .card:hover {
565
- --card-ring: var(--color-border-strong);
555
+ .search-box {
556
+ position: relative;
557
+ display: flex;
558
+ flex: 1 1 14rem;
559
+ align-items: center;
560
+ max-width: 14rem;
566
561
  }
567
562
 
568
- .card[data-state='waiting'] {
569
- --card-edge: var(--color-waiting);
570
- --card-ring: color-mix(in srgb, var(--color-waiting) 45%, transparent);
571
- background: var(--color-waiting-wash);
563
+ .search-box .search-icon {
564
+ position: absolute;
565
+ left: var(--space-8);
566
+ color: var(--color-text-secondary);
567
+ pointer-events: none;
572
568
  }
573
569
 
574
- .card[data-state='running'] {
575
- --card-edge: var(--color-running);
570
+ .filter-search {
571
+ padding-left: var(--space-24);
572
+ padding-right: var(--space-24);
576
573
  }
577
574
 
578
- .card[data-state='done'] {
579
- --card-edge: var(--color-done);
580
- box-shadow:
581
- inset var(--edge-width) 0 0 var(--card-edge),
582
- 0 0 0 1px var(--card-ring);
575
+ .filter-search::-webkit-search-cancel-button {
576
+ display: none;
583
577
  }
584
578
 
585
- .card[data-state='quiet'] {
586
- --card-edge: var(--color-quiet);
579
+ .search-clear {
580
+ position: absolute;
581
+ right: var(--space-2);
582
+ width: 1.5rem;
583
+ height: 1.5rem;
584
+ min-height: 0;
587
585
  }
588
586
 
589
- .card[data-state='quiet'] .card-title {
590
- color: var(--color-text-muted);
591
- text-decoration: line-through;
587
+ .search-clear .icon {
588
+ width: 0.75rem;
589
+ height: 0.75rem;
592
590
  }
593
591
 
594
- /* Open: a flush ink ring and a lift, unlike the focus ring. */
595
- .card[data-open] {
596
- box-shadow:
597
- inset var(--edge-width) 0 0 var(--card-edge),
598
- 0 0 0 2px var(--color-text),
599
- var(--shadow-lift);
592
+ .toolbar-count {
593
+ color: var(--color-text-secondary);
594
+ font-size: var(--text-12);
595
+ font-variant-numeric: tabular-nums;
596
+ white-space: nowrap;
600
597
  }
601
598
 
602
- .card.dragging {
603
- opacity: 0.45;
599
+ .toolbar .spacer {
600
+ flex: 1 1 0;
604
601
  }
605
602
 
606
- .card-state {
607
- display: flex;
608
- align-items: center;
609
- gap: var(--space-2);
610
- min-width: 0;
603
+ .anchor {
604
+ position: relative;
605
+ display: inline-flex;
611
606
  }
612
607
 
613
- .card-title {
614
- all: unset;
615
- display: -webkit-box;
616
- overflow: hidden;
617
- font-size: var(--text-md);
618
- font-weight: 600;
619
- line-height: var(--leading-tight);
620
- overflow-wrap: anywhere;
621
- text-wrap: pretty;
622
- cursor: pointer;
623
- -webkit-box-orient: vertical;
624
- -webkit-line-clamp: 3;
608
+ .tool-button .badge {
609
+ display: inline-grid;
610
+ min-width: 1rem;
611
+ height: 1rem;
612
+ padding: 0 var(--space-4);
613
+ place-items: center;
614
+ border-radius: var(--radius-4);
615
+ background: var(--color-primary);
616
+ color: var(--color-on-primary);
617
+ font-size: var(--text-10);
618
+ font-variant-numeric: tabular-nums;
625
619
  }
626
620
 
627
- /* The title is the card's one button, stretched over the whole card. */
628
- .card-title::after {
629
- content: '';
630
- position: absolute;
631
- inset: 0;
632
- border-radius: var(--radius-md);
633
- }
621
+ /* View switch: icons in a fill track, the active one raised. */
634
622
 
635
- .card-title:focus-visible {
636
- outline: 0;
623
+ .view-switch {
624
+ display: inline-flex;
625
+ gap: var(--space-2);
626
+ padding: var(--space-2);
627
+ border-radius: var(--radius-8);
628
+ background: var(--color-fill);
637
629
  }
638
630
 
639
- .card-title:focus-visible::after {
640
- outline: 2px solid var(--color-focus);
641
- outline-offset: 2px;
631
+ .view-switch button {
632
+ display: inline-grid;
633
+ width: 1.5rem;
634
+ height: calc(var(--control-height) - 0.25rem);
635
+ place-items: center;
636
+ border: 0;
637
+ border-radius: var(--radius-6);
638
+ background: transparent;
639
+ color: var(--color-text-secondary);
640
+ transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
642
641
  }
643
642
 
644
- .card-meta {
645
- display: flex;
646
- align-items: center;
647
- gap: var(--space-3);
648
- min-width: 0;
643
+ .view-switch button[aria-pressed='true'] {
644
+ background: var(--color-card);
645
+ box-shadow: var(--shadow-xs);
646
+ color: var(--color-foreground);
649
647
  }
650
648
 
651
- .card-tags {
649
+ /* Active filters: removable chips */
650
+
651
+ .filter-chips {
652
652
  display: flex;
653
653
  flex-wrap: wrap;
654
- gap: var(--space-1);
655
- min-width: 0;
654
+ align-items: center;
655
+ gap: var(--space-6);
656
+ padding: 0 var(--space-12) var(--space-6);
656
657
  }
657
658
 
658
- /* A sub-card names its parent; a parent says how far its parts are. */
659
-
660
- .parent-link {
661
- all: unset;
662
- position: relative;
663
- z-index: var(--z-raised);
664
- display: flex;
659
+ .filter-chip {
660
+ display: inline-flex;
665
661
  align-items: center;
666
- gap: var(--space-1);
667
- box-sizing: border-box;
668
- min-width: 0;
669
- color: var(--color-text-muted);
670
- font-size: var(--text-sm);
662
+ gap: var(--space-4);
663
+ height: 1.5rem;
664
+ padding: 0 var(--space-6) 0 var(--space-8);
665
+ border: 0;
666
+ border-radius: var(--radius-6);
667
+ background: var(--color-fill);
668
+ color: var(--color-foreground);
669
+ font-size: var(--text-12);
670
+ transition: background-color var(--duration-base) var(--ease-out);
671
671
  }
672
672
 
673
- button.parent-link {
674
- min-height: var(--chip-height);
675
- cursor: pointer;
673
+ .filter-chip:hover {
674
+ background: var(--color-accent);
676
675
  }
677
676
 
678
- button.parent-link:hover .parent-title {
679
- color: var(--color-text);
680
- text-decoration: underline;
677
+ .filter-chip .icon {
678
+ width: 0.75rem;
679
+ height: 0.75rem;
680
+ color: var(--color-text-secondary);
681
681
  }
682
682
 
683
- .parent-title,
684
- .link-title,
685
- .subcard-title {
686
- min-width: 0;
687
- overflow: hidden;
688
- text-overflow: ellipsis;
689
- white-space: nowrap;
683
+ .filter-clear {
684
+ min-height: 1.5rem;
685
+ padding: 0 var(--space-6);
690
686
  }
691
687
 
692
- .subcard-chip {
693
- flex: 0 0 auto;
694
- margin-left: auto;
695
- padding: 0 var(--space-1);
696
- border-radius: var(--radius-sm);
697
- background: var(--color-tint);
698
- color: var(--color-text-muted);
699
- font-size: var(--text-xs);
700
- line-height: 1.125rem;
701
- white-space: nowrap;
688
+ /* Popover */
689
+
690
+ .popover {
691
+ position: absolute;
692
+ top: calc(100% + var(--space-4));
693
+ z-index: var(--z-popover);
694
+ min-width: 14rem;
695
+ max-width: 20rem;
696
+ max-height: min(28rem, 70vh);
697
+ padding: var(--space-10);
698
+ overflow-y: auto;
699
+ border-radius: var(--radius-8);
700
+ background: var(--color-popover);
701
+ box-shadow: var(--shadow-md);
702
+ font-size: var(--text-12);
702
703
  }
703
704
 
704
- /* The new-card form */
705
+ .popover[data-align='end'] {
706
+ right: 0;
707
+ }
705
708
 
706
- .draft {
707
- flex: 0 0 auto;
708
- padding: var(--space-2);
709
- border-radius: var(--radius-md);
710
- background: var(--color-raised);
711
- box-shadow: 0 0 0 1px var(--color-border-strong), var(--shadow-card);
709
+ .popover[data-align='start'] {
710
+ left: 0;
711
+ }
712
+
713
+ .popover-section + .popover-section {
714
+ margin-top: var(--space-10);
715
+ padding-top: var(--space-10);
716
+ border-top: 1px solid var(--color-border);
717
+ }
718
+
719
+ .popover-title {
720
+ margin: 0 0 var(--space-4);
721
+ color: var(--color-text-secondary);
722
+ font-size: var(--text-11);
723
+ font-weight: 500;
724
+ }
725
+
726
+ .option {
727
+ display: flex;
728
+ align-items: center;
729
+ gap: var(--space-8);
730
+ min-height: 1.5rem;
731
+ padding: 0 var(--space-4);
732
+ border-radius: var(--radius-4);
733
+ cursor: pointer;
734
+ }
735
+
736
+ .option:hover {
737
+ background: var(--color-fill);
738
+ }
739
+
740
+ .option input {
741
+ flex: none;
742
+ width: 0.875rem;
743
+ height: 0.875rem;
744
+ margin: 0;
745
+ accent-color: var(--color-primary);
746
+ }
747
+
748
+ .option .priority-icon {
749
+ width: 0.875rem;
750
+ height: 0.875rem;
751
+ }
752
+
753
+ .option-hint {
754
+ margin: var(--space-2) 0 0 var(--space-24);
755
+ color: var(--color-text-secondary);
756
+ font-size: var(--text-11);
712
757
  }
713
758
 
714
- /* A column: a bay the strips rest in */
759
+ /* A column: a quiet bay the cards rest in */
715
760
 
716
761
  .column {
717
762
  display: flex;
718
- flex: 0 0 86%;
763
+ flex: 1 0 var(--column-min);
764
+ max-width: var(--column-width);
719
765
  flex-direction: column;
766
+ gap: var(--space-10);
720
767
  min-width: 0;
721
- max-width: var(--column-max);
722
768
  min-height: 0;
723
- border-radius: var(--radius-lg);
724
- background: var(--color-well);
725
- scroll-snap-align: start;
726
- transition:
727
- background-color var(--duration-fast) var(--ease-out),
728
- box-shadow var(--duration-fast) var(--ease-out);
769
+ padding: var(--space-4);
770
+ border-radius: var(--radius-14);
771
+ background: color-mix(in srgb, var(--color-fill) 40%, transparent);
772
+ transition: background-color var(--duration-base) var(--ease-out);
729
773
  }
730
774
 
731
775
  .column.drop-target {
732
- background: color-mix(in srgb, var(--color-well) 60%, var(--color-raised));
733
- box-shadow: inset 0 0 0 2px var(--color-border-strong);
776
+ background: color-mix(in srgb, var(--color-fill) 80%, transparent);
734
777
  }
735
778
 
736
779
  .column-head {
737
780
  display: flex;
738
- flex: 0 0 auto;
739
781
  align-items: center;
740
- gap: var(--space-2);
741
- min-width: 0;
742
- padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
782
+ gap: var(--space-8);
783
+ padding: var(--space-6) var(--space-8) 0;
784
+ }
785
+
786
+ .column-head .status-icon {
787
+ width: 0.875rem;
788
+ height: 0.875rem;
743
789
  }
744
790
 
745
791
  .column-name {
746
792
  min-width: 0;
747
793
  overflow: hidden;
748
- font-family: var(--font-display);
749
- font-size: var(--text-sm);
750
- font-weight: 700;
751
- letter-spacing: var(--tracking-caps);
752
- text-transform: uppercase;
794
+ font-size: var(--text-12);
795
+ font-weight: 500;
796
+ white-space: nowrap;
797
+ text-overflow: ellipsis;
798
+ }
799
+
800
+ .column-count {
801
+ color: var(--color-text-secondary);
802
+ font-family: var(--font-mono);
803
+ font-size: var(--text-11);
804
+ font-variant-numeric: tabular-nums;
805
+ }
806
+
807
+ .column-count[data-full] {
808
+ color: var(--color-warning-fg);
809
+ }
810
+
811
+ .column-lock {
812
+ display: inline-flex;
813
+ color: var(--color-text-secondary);
814
+ }
815
+
816
+ .column-lock .icon {
817
+ width: 0.75rem;
818
+ height: 0.75rem;
819
+ }
820
+
821
+ .column-head .spacer {
822
+ flex: 1 1 0;
823
+ }
824
+
825
+ .column-add {
826
+ display: inline-grid;
827
+ width: 1.25rem;
828
+ height: 1.25rem;
829
+ min-height: 0;
830
+ padding: 0;
831
+ place-items: center;
832
+ }
833
+
834
+ .column-add .icon {
835
+ width: 0.875rem;
836
+ height: 0.875rem;
837
+ }
838
+
839
+ .column-cards {
840
+ display: flex;
841
+ flex: 1 1 auto;
842
+ flex-direction: column;
843
+ gap: var(--space-6);
844
+ min-height: 0;
845
+ overflow-y: auto;
846
+ padding: 0 var(--space-2) var(--space-2);
847
+ }
848
+
849
+ .column-empty {
850
+ margin: var(--space-4) var(--space-8);
851
+ color: var(--color-text-dim);
852
+ font-size: var(--text-12);
853
+ }
854
+
855
+ /* The new-card form */
856
+
857
+ .draft {
858
+ display: flex;
859
+ flex-direction: column;
860
+ gap: var(--space-8);
861
+ padding: var(--space-10);
862
+ border-radius: var(--radius-10);
863
+ background: var(--color-card);
864
+ box-shadow: inset 0 0 0 1px var(--color-border);
865
+ }
866
+
867
+ /* A card: white, a hairline ring, no shadow. */
868
+
869
+ .card {
870
+ position: relative;
871
+ display: flex;
872
+ flex-direction: column;
873
+ gap: var(--space-6);
874
+ min-width: 0;
875
+ padding: var(--space-10) var(--space-12);
876
+ border-radius: var(--radius-10);
877
+ background: var(--color-card);
878
+ box-shadow: inset 0 0 0 1px var(--color-border);
879
+ transition:
880
+ transform var(--duration-base) var(--ease-out),
881
+ box-shadow var(--duration-base) var(--ease-out),
882
+ background-color var(--duration-base) var(--ease-out);
883
+ }
884
+
885
+ .card:hover {
886
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-foreground) 15%, transparent);
887
+ }
888
+
889
+ .card:active {
890
+ transform: scale(var(--press-scale));
891
+ }
892
+
893
+ /* Open (its dialog is showing) and selected: a primary ring and a faint primary wash. */
894
+ .card[data-open],
895
+ .card[data-selected] {
896
+ background: color-mix(in srgb, var(--color-primary) 4%, var(--color-card));
897
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 60%, transparent);
898
+ }
899
+
900
+ .card.dragging {
901
+ opacity: 0.5;
902
+ }
903
+
904
+ .card[data-dim] {
905
+ opacity: 0.5;
906
+ }
907
+
908
+ /* Done and canceled keep their meaning without a strike-through. */
909
+ .card[data-state='done'] .card-title,
910
+ .card[data-state='quiet'] .card-title {
911
+ color: var(--color-text-secondary);
912
+ }
913
+
914
+ .card-meta {
915
+ display: flex;
916
+ align-items: center;
917
+ gap: var(--space-6);
918
+ min-height: 1.125rem;
919
+ }
920
+
921
+ .card-meta .spacer {
922
+ flex: 1 1 0;
923
+ }
924
+
925
+ /* Who works it: a circle with an initial for you, a blue square for an agent. */
926
+ .avatar {
927
+ position: relative;
928
+ display: inline-grid;
929
+ flex: none;
930
+ width: 1.125rem;
931
+ height: 1.125rem;
932
+ place-items: center;
933
+ border-radius: 50%;
934
+ background: var(--color-accent);
935
+ color: var(--color-foreground);
936
+ font-size: var(--text-10);
937
+ font-weight: 500;
938
+ line-height: 1;
939
+ }
940
+
941
+ .avatar[data-kind='agent'] {
942
+ border-radius: var(--radius-4);
943
+ background: var(--color-info-wash);
944
+ color: var(--color-info-fg);
945
+ }
946
+
947
+ .avatar .run-dot {
948
+ position: absolute;
949
+ right: -0.125rem;
950
+ bottom: -0.125rem;
951
+ }
952
+
953
+ /* The title is the card's one button, stretched over the whole card. */
954
+ .card-title {
955
+ all: unset;
956
+ display: block;
957
+ box-sizing: border-box;
958
+ min-width: 0;
959
+ font-size: var(--text-13);
960
+ font-weight: 500;
961
+ line-height: var(--leading-title);
962
+ overflow-wrap: anywhere;
963
+ text-wrap: pretty;
964
+ cursor: pointer;
965
+ }
966
+
967
+ .card-title::after {
968
+ content: '';
969
+ position: absolute;
970
+ inset: 0;
971
+ border-radius: inherit;
972
+ }
973
+
974
+ .card-title:focus-visible {
975
+ outline: 0;
976
+ }
977
+
978
+ .card-title:focus-visible::after {
979
+ outline: 2px solid var(--color-ring);
980
+ outline-offset: 1px;
981
+ }
982
+
983
+ /* The status row */
984
+ .card-status {
985
+ display: flex;
986
+ flex-wrap: wrap;
987
+ align-items: center;
988
+ gap: var(--space-6);
989
+ min-width: 0;
990
+ }
991
+
992
+ .status-line {
993
+ flex: 1 1 0;
994
+ min-width: 0;
995
+ margin: 0;
996
+ padding-left: var(--space-6);
997
+ border-left: 2px solid var(--color-border);
998
+ color: var(--color-text-secondary);
999
+ font-size: var(--text-11);
753
1000
  white-space: nowrap;
1001
+ overflow: hidden;
754
1002
  text-overflow: ellipsis;
755
1003
  }
756
1004
 
757
- .column-count {
758
- flex: 0 0 auto;
759
- min-width: 1.25rem;
760
- padding: 0 var(--space-1);
761
- border-radius: var(--radius-sm);
762
- background: var(--color-tint);
763
- color: var(--color-text-muted);
764
- font-size: var(--text-xs);
765
- line-height: 1.125rem;
766
- text-align: center;
1005
+ .status-line[data-category='triage'] {
1006
+ border-left-color: color-mix(in srgb, var(--color-info) 60%, transparent);
1007
+ }
1008
+
1009
+ .status-line[data-category='started'] {
1010
+ border-left-color: color-mix(in srgb, var(--color-warning) 60%, transparent);
1011
+ }
1012
+
1013
+ .status-line[data-category='completed'] {
1014
+ border-left-color: color-mix(in srgb, var(--color-success) 60%, transparent);
1015
+ }
1016
+
1017
+ .card-status .waiting-pill {
1018
+ flex: none;
1019
+ }
1020
+
1021
+ .attempt-chip {
1022
+ margin-left: auto;
1023
+ color: var(--color-text-secondary);
1024
+ font-size: var(--text-11);
1025
+ }
1026
+
1027
+ /* "Waiting for you": an amber outline pill with a clock. */
1028
+ .waiting-pill {
1029
+ display: inline-flex;
1030
+ align-items: center;
1031
+ gap: var(--space-4);
1032
+ height: 1.25rem;
1033
+ padding: 0 var(--space-6);
1034
+ border-radius: 999px;
1035
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-warning) 50%, transparent);
1036
+ color: var(--color-warning-fg);
1037
+ font-size: var(--text-11);
1038
+ font-weight: 500;
1039
+ white-space: nowrap;
1040
+ }
1041
+
1042
+ .waiting-pill .icon {
1043
+ width: 0.75rem;
1044
+ height: 0.75rem;
1045
+ }
1046
+
1047
+ .waiting-pill--compact {
1048
+ height: 1.125rem;
1049
+ font-size: var(--text-10-5);
1050
+ }
1051
+
1052
+ /* The blue dot of a run that is going; its ring pings. */
1053
+ .run-dot {
1054
+ position: relative;
1055
+ display: inline-block;
1056
+ flex: none;
1057
+ width: 0.375rem;
1058
+ height: 0.375rem;
1059
+ border-radius: 50%;
1060
+ background: var(--color-info);
1061
+ box-shadow: 0 0 0 1.5px var(--color-card);
1062
+ }
1063
+
1064
+ .run-dot::after {
1065
+ content: '';
1066
+ position: absolute;
1067
+ inset: 0;
1068
+ border-radius: 50%;
1069
+ background: var(--color-info);
1070
+ opacity: 0;
1071
+ }
1072
+
1073
+ /* The footer: priority, labels */
1074
+ .card-footer {
1075
+ display: flex;
1076
+ flex-wrap: wrap;
1077
+ align-items: center;
1078
+ gap: var(--space-6);
1079
+ color: var(--color-text-secondary);
1080
+ font-size: var(--text-11);
1081
+ }
1082
+
1083
+ .priority {
1084
+ display: inline-flex;
1085
+ align-items: center;
1086
+ gap: var(--space-4);
1087
+ }
1088
+
1089
+ .priority .icon {
1090
+ width: 0.75rem;
1091
+ height: 0.75rem;
1092
+ }
1093
+
1094
+ .priority[data-priority='urgent'] .icon {
1095
+ color: var(--color-priority-urgent);
1096
+ }
1097
+
1098
+ .priority[data-priority='high'] .icon {
1099
+ color: var(--color-priority-high);
1100
+ }
1101
+
1102
+ .priority[data-priority='medium'] .icon {
1103
+ color: var(--color-priority-medium);
1104
+ }
1105
+
1106
+ .priority[data-priority='low'] .icon {
1107
+ color: var(--color-priority-low);
1108
+ }
1109
+
1110
+ .priority[data-priority='none'] .icon {
1111
+ color: var(--color-priority-none);
1112
+ }
1113
+
1114
+ /* Label chips: a tone picked by hash of the text. */
1115
+ .label {
1116
+ --tone: var(--tone-slate);
1117
+ --tone-text: var(--tone-slate-text);
1118
+ display: inline-flex;
1119
+ align-items: center;
1120
+ height: 1.125rem;
1121
+ padding: 0 var(--space-6);
1122
+ border-radius: var(--radius-4);
1123
+ background: color-mix(in srgb, var(--tone) 10%, transparent);
1124
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 20%, transparent);
1125
+ color: var(--tone-text);
1126
+ font-size: var(--text-10-5);
1127
+ line-height: 1;
1128
+ white-space: nowrap;
1129
+ }
1130
+
1131
+ .label[data-tone='blue'] {
1132
+ --tone: var(--tone-blue);
1133
+ --tone-text: var(--tone-blue-text);
1134
+ }
1135
+
1136
+ .label[data-tone='emerald'] {
1137
+ --tone: var(--tone-emerald);
1138
+ --tone-text: var(--tone-emerald-text);
1139
+ }
1140
+
1141
+ .label[data-tone='amber'] {
1142
+ --tone: var(--tone-amber);
1143
+ --tone-text: var(--tone-amber-text);
1144
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone-amber) 25%, transparent);
1145
+ }
1146
+
1147
+ .label[data-tone='rose'] {
1148
+ --tone: var(--tone-rose);
1149
+ --tone-text: var(--tone-rose-text);
1150
+ }
1151
+
1152
+ .label[data-tone='violet'] {
1153
+ --tone: var(--tone-violet);
1154
+ --tone-text: var(--tone-violet-text);
1155
+ }
1156
+
1157
+ .label[data-tone='cyan'] {
1158
+ --tone: var(--tone-cyan);
1159
+ --tone-text: var(--tone-cyan-text);
1160
+ }
1161
+
1162
+ .label-more {
1163
+ color: var(--color-text-secondary);
1164
+ font-size: var(--text-11);
1165
+ }
1166
+
1167
+ /* A sub-task card says what it belongs to; a parent says how far its parts are. */
1168
+ .subtask-strip {
1169
+ position: relative;
1170
+ z-index: var(--z-raised);
1171
+ display: flex;
1172
+ align-items: center;
1173
+ gap: var(--space-6);
1174
+ min-width: 0;
1175
+ padding: var(--space-2) var(--space-6);
1176
+ border: 0;
1177
+ border-radius: var(--radius-6);
1178
+ background: var(--color-fill);
1179
+ color: var(--color-text-secondary);
1180
+ font-size: var(--text-11);
1181
+ text-align: left;
1182
+ }
1183
+
1184
+ button.subtask-strip {
1185
+ cursor: pointer;
1186
+ }
1187
+
1188
+ /* The strip of a parent that is not on the board has nothing to click: the card opens instead. */
1189
+ span.subtask-strip {
1190
+ pointer-events: none;
1191
+ }
1192
+
1193
+ button.subtask-strip:hover {
1194
+ background: var(--color-accent);
1195
+ color: var(--color-foreground);
1196
+ }
1197
+
1198
+ .subtask-strip .icon {
1199
+ width: 0.75rem;
1200
+ height: 0.75rem;
1201
+ }
1202
+
1203
+ .subtask-strip .strip-label {
1204
+ flex: none;
1205
+ }
1206
+
1207
+ .subtask-strip .strip-title {
1208
+ min-width: 0;
1209
+ flex: 1 1 auto;
1210
+ overflow: hidden;
1211
+ white-space: nowrap;
1212
+ text-overflow: ellipsis;
1213
+ }
1214
+
1215
+ /* In "cards" mode a sub-task card is set in from the column's edge, with a rule beside it. */
1216
+ .card[data-subtask] {
1217
+ margin-left: var(--space-12);
1218
+ }
1219
+
1220
+ .card[data-subtask]::before {
1221
+ content: '';
1222
+ position: absolute;
1223
+ top: 0;
1224
+ bottom: 0;
1225
+ left: calc(-1 * var(--space-8));
1226
+ width: 2px;
1227
+ border-radius: 1px;
1228
+ background: var(--color-border-strong);
1229
+ }
1230
+
1231
+ .progress {
1232
+ display: flex;
1233
+ align-items: center;
1234
+ gap: var(--space-8);
1235
+ color: var(--color-text-secondary);
1236
+ font-size: var(--text-11);
1237
+ font-variant-numeric: tabular-nums;
1238
+ }
1239
+
1240
+ .progress-bar {
1241
+ appearance: none;
1242
+ flex: 1 1 auto;
1243
+ height: 0.25rem;
1244
+ min-width: 0;
1245
+ max-width: 6rem;
1246
+ border: 0;
1247
+ border-radius: 2px;
1248
+ background: var(--color-accent);
1249
+ overflow: hidden;
1250
+ }
1251
+
1252
+ .progress-bar::-webkit-progress-bar {
1253
+ background: var(--color-accent);
1254
+ }
1255
+
1256
+ .progress-bar::-webkit-progress-value {
1257
+ background: var(--color-success);
1258
+ border-radius: 2px;
1259
+ }
1260
+
1261
+ .progress-bar::-moz-progress-bar {
1262
+ background: var(--color-success);
1263
+ }
1264
+
1265
+ /* Sub-tasks inside the parent: a row each, never mistaken for a card. */
1266
+ .subtask-block {
1267
+ position: relative;
1268
+ z-index: var(--z-raised);
1269
+ display: flex;
1270
+ flex-direction: column;
1271
+ gap: var(--space-6);
1272
+ margin-top: var(--space-2);
1273
+ padding-top: var(--space-6);
1274
+ border-top: 1px solid var(--color-border);
1275
+ /* Above the title's overlay so its rows can be clicked; everything else in it lets the click through to the card. */
1276
+ pointer-events: none;
1277
+ }
1278
+
1279
+ .subtask-block button {
1280
+ pointer-events: auto;
1281
+ }
1282
+
1283
+ .subtask-list {
1284
+ display: flex;
1285
+ flex-direction: column;
1286
+ margin: 0;
1287
+ padding: 0;
1288
+ list-style: none;
1289
+ }
1290
+
1291
+ .subtask-row {
1292
+ all: unset;
1293
+ display: flex;
1294
+ align-items: center;
1295
+ gap: var(--space-6);
1296
+ box-sizing: border-box;
1297
+ width: 100%;
1298
+ height: 1.75rem;
1299
+ padding: 0 var(--space-6);
1300
+ border-radius: var(--radius-6);
1301
+ cursor: pointer;
1302
+ transition: background-color var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out);
1303
+ }
1304
+
1305
+ .subtask-row:hover {
1306
+ background: var(--color-fill);
1307
+ }
1308
+
1309
+ .subtask-row:focus-visible {
1310
+ outline: 2px solid var(--color-ring);
1311
+ outline-offset: -2px;
1312
+ }
1313
+
1314
+ .subtask-row[data-dim] {
1315
+ opacity: 0.5;
1316
+ }
1317
+
1318
+ .subtask-row .status-icon {
1319
+ width: 0.875rem;
1320
+ height: 0.875rem;
1321
+ }
1322
+
1323
+ .row-title {
1324
+ flex: 1 1 0;
1325
+ min-width: 0;
1326
+ overflow: hidden;
1327
+ font-size: var(--text-13);
1328
+ white-space: nowrap;
1329
+ text-overflow: ellipsis;
1330
+ }
1331
+
1332
+ .row-end {
1333
+ display: inline-flex;
1334
+ flex: none;
1335
+ align-items: center;
1336
+ gap: var(--space-6);
1337
+ }
1338
+
1339
+ .row-count {
1340
+ color: var(--color-text-secondary);
1341
+ font-family: var(--font-mono);
1342
+ font-size: var(--text-10-5);
1343
+ font-variant-numeric: tabular-nums;
1344
+ }
1345
+
1346
+ .subtask-more {
1347
+ all: unset;
1348
+ align-self: flex-start;
1349
+ padding: 0 var(--space-6);
1350
+ border-radius: var(--radius-4);
1351
+ color: var(--color-text-secondary);
1352
+ font-size: var(--text-11);
1353
+ cursor: pointer;
1354
+ }
1355
+
1356
+ .subtask-more:hover {
1357
+ color: var(--color-foreground);
1358
+ }
1359
+
1360
+ .subtask-more:focus-visible {
1361
+ outline: 2px solid var(--color-ring);
1362
+ }
1363
+
1364
+ /* The category colours of a status icon, wherever it is drawn. */
1365
+ .status-icon[data-category='triage'] {
1366
+ color: var(--color-info);
1367
+ }
1368
+
1369
+ .status-icon[data-category='backlog'],
1370
+ .status-icon[data-category='canceled'] {
1371
+ color: var(--color-text-secondary);
1372
+ }
1373
+
1374
+ .status-icon[data-category='unstarted'] {
1375
+ color: var(--color-text-dim);
1376
+ }
1377
+
1378
+ .status-icon[data-category='started'] {
1379
+ color: var(--color-warning);
1380
+ }
1381
+
1382
+ .status-icon[data-category='completed'] {
1383
+ color: var(--color-success);
1384
+ }
1385
+
1386
+ /* The List view */
1387
+
1388
+ .board[data-view='list'] {
1389
+ display: block;
1390
+ overflow-x: hidden;
1391
+ overflow-y: auto;
1392
+ scroll-snap-type: none;
1393
+ }
1394
+
1395
+ .priority-icon[data-priority='urgent'] {
1396
+ color: var(--color-priority-urgent);
1397
+ }
1398
+
1399
+ .priority-icon[data-priority='high'] {
1400
+ color: var(--color-priority-high);
1401
+ }
1402
+
1403
+ .priority-icon[data-priority='medium'] {
1404
+ color: var(--color-priority-medium);
1405
+ }
1406
+
1407
+ .priority-icon[data-priority='low'] {
1408
+ color: var(--color-priority-low);
1409
+ }
1410
+
1411
+ .priority-icon[data-priority='none'] {
1412
+ color: var(--color-priority-none);
1413
+ }
1414
+
1415
+ .list {
1416
+ display: flex;
1417
+ flex-direction: column;
1418
+ gap: var(--space-8);
1419
+ }
1420
+
1421
+ .list-group {
1422
+ display: flex;
1423
+ flex-direction: column;
1424
+ gap: var(--space-2);
1425
+ }
1426
+
1427
+ .list-group-head {
1428
+ display: flex;
1429
+ align-items: center;
1430
+ gap: var(--space-8);
1431
+ height: 2rem;
1432
+ padding: 0 var(--space-8);
1433
+ border-radius: var(--radius-10);
1434
+ background: color-mix(in srgb, var(--color-fill) 60%, transparent);
1435
+ }
1436
+
1437
+ .list-group-head .status-icon {
1438
+ width: 0.875rem;
1439
+ height: 0.875rem;
1440
+ }
1441
+
1442
+ .group-toggle {
1443
+ all: unset;
1444
+ display: inline-grid;
1445
+ width: 1.25rem;
1446
+ height: 1.25rem;
1447
+ place-items: center;
1448
+ border-radius: var(--radius-4);
1449
+ color: var(--color-text-secondary);
1450
+ cursor: pointer;
1451
+ }
1452
+
1453
+ .group-toggle:focus-visible {
1454
+ outline: 2px solid var(--color-ring);
1455
+ }
1456
+
1457
+ .group-toggle .icon {
1458
+ width: 0.875rem;
1459
+ height: 0.875rem;
1460
+ transition: transform var(--duration-base) var(--ease-out);
1461
+ }
1462
+
1463
+ .group-toggle[aria-expanded='false'] .icon {
1464
+ transform: rotate(-90deg);
1465
+ }
1466
+
1467
+ .group-name {
1468
+ font-size: var(--text-12);
1469
+ font-weight: 500;
1470
+ }
1471
+
1472
+ .group-count {
1473
+ padding: 0 var(--space-6);
1474
+ border-radius: var(--radius-4);
1475
+ background: var(--color-fill);
1476
+ color: var(--color-text-secondary);
1477
+ font-family: var(--font-mono);
1478
+ font-size: var(--text-11);
1479
+ font-variant-numeric: tabular-nums;
1480
+ }
1481
+
1482
+ .group-count[data-full] {
1483
+ color: var(--color-warning-fg);
1484
+ }
1485
+
1486
+ .list-row {
1487
+ position: relative;
1488
+ display: flex;
1489
+ align-items: center;
1490
+ gap: var(--space-8);
1491
+ height: 2.25rem;
1492
+ padding: 0 var(--space-8);
1493
+ border-radius: var(--radius-8);
1494
+ font-size: var(--text-13);
1495
+ transition: background-color var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out);
1496
+ }
1497
+
1498
+ .list-row:hover {
1499
+ background: color-mix(in srgb, var(--color-fill) 70%, transparent);
1500
+ }
1501
+
1502
+ .list-row[data-open],
1503
+ .list-row[data-selected] {
1504
+ background: color-mix(in srgb, var(--color-primary) 6%, transparent);
1505
+ }
1506
+
1507
+ .list-row[data-dim] {
1508
+ opacity: 0.5;
1509
+ }
1510
+
1511
+ .list-row[data-state='done'] .list-title,
1512
+ .list-row[data-state='quiet'] .list-title {
1513
+ color: var(--color-text-secondary);
1514
+ }
1515
+
1516
+ .row-icons {
1517
+ display: inline-flex;
1518
+ flex: none;
1519
+ align-items: center;
1520
+ gap: var(--space-6);
1521
+ }
1522
+
1523
+ .row-icons .icon {
1524
+ width: 0.875rem;
1525
+ height: 0.875rem;
1526
+ }
1527
+
1528
+ .list-row .card-key {
1529
+ flex: none;
1530
+ font-size: var(--text-11);
1531
+ }
1532
+
1533
+ .row-parent {
1534
+ display: inline-flex;
1535
+ flex: none;
1536
+ align-items: center;
1537
+ gap: var(--space-4);
1538
+ color: var(--color-text-secondary);
1539
+ font-family: var(--font-mono);
1540
+ font-size: var(--text-10-5);
1541
+ }
1542
+
1543
+ .row-parent .icon {
1544
+ width: 0.75rem;
1545
+ height: 0.75rem;
1546
+ }
1547
+
1548
+ .list-title {
1549
+ all: unset;
1550
+ flex: 1 1 0;
1551
+ min-width: 0;
1552
+ overflow: hidden;
1553
+ white-space: nowrap;
1554
+ text-overflow: ellipsis;
1555
+ cursor: pointer;
1556
+ }
1557
+
1558
+ .list-title::after {
1559
+ content: '';
1560
+ position: absolute;
1561
+ inset: 0;
1562
+ border-radius: inherit;
1563
+ }
1564
+
1565
+ .list-title:focus-visible {
1566
+ outline: 0;
1567
+ }
1568
+
1569
+ .list-title:focus-visible::after {
1570
+ outline: 2px solid var(--color-ring);
1571
+ outline-offset: -2px;
1572
+ }
1573
+
1574
+ .row-marks,
1575
+ .row-meta {
1576
+ position: relative;
1577
+ z-index: var(--z-raised);
1578
+ display: inline-flex;
1579
+ flex: none;
1580
+ align-items: center;
1581
+ gap: var(--space-6);
1582
+ /* Raised above the title's overlay, but with nothing to click: a click on them opens the row. */
1583
+ pointer-events: none;
1584
+ }
1585
+
1586
+ .row-meta {
1587
+ opacity: 0.7;
1588
+ transition: opacity var(--duration-base) var(--ease-out);
1589
+ }
1590
+
1591
+ .list-row:hover .row-meta,
1592
+ .list-row:focus-within .row-meta {
1593
+ opacity: 1;
1594
+ }
1595
+
1596
+ .row-meta .avatar {
1597
+ width: 1rem;
1598
+ height: 1rem;
1599
+ }
1600
+
1601
+ .row-age {
1602
+ min-width: 1.75rem;
1603
+ color: var(--color-text-secondary);
1604
+ font-size: var(--text-11);
1605
+ font-variant-numeric: tabular-nums;
1606
+ text-align: right;
1607
+ }
1608
+
1609
+ /* A sub-task row hangs under its parent, set in 20 px with a rule. */
1610
+ .list-row[data-depth='1'] {
1611
+ margin-left: 1.25rem;
1612
+ }
1613
+
1614
+ .list-row[data-depth='1']::before {
1615
+ content: '';
1616
+ position: absolute;
1617
+ top: 0;
1618
+ bottom: 0;
1619
+ left: calc(-1 * var(--space-8));
1620
+ width: 1px;
1621
+ background: var(--color-border);
1622
+ }
1623
+
1624
+ .list-empty {
1625
+ margin: var(--space-2) var(--space-8) var(--space-4) 2.5rem;
1626
+ color: var(--color-text-dim);
1627
+ font-size: var(--text-12);
1628
+ }
1629
+
1630
+ .list-draft {
1631
+ margin-bottom: var(--space-8);
1632
+ }
1633
+
1634
+ /* The Analytics view */
1635
+
1636
+ .board[data-view='analytics'] {
1637
+ display: block;
1638
+ padding: 0;
1639
+ overflow-x: hidden;
1640
+ overflow-y: auto;
1641
+ scroll-snap-type: none;
1642
+ }
1643
+
1644
+ .analytics {
1645
+ display: flex;
1646
+ flex-direction: column;
1647
+ gap: var(--space-16);
1648
+ padding: var(--space-12) var(--space-16);
1649
+ }
1650
+
1651
+ .analytics-pickers {
1652
+ display: flex;
1653
+ flex-wrap: wrap;
1654
+ align-items: center;
1655
+ gap: var(--space-8);
1656
+ }
1657
+
1658
+ .segmented {
1659
+ display: inline-flex;
1660
+ gap: var(--space-2);
1661
+ padding: var(--space-2);
1662
+ border-radius: var(--radius-8);
1663
+ background: var(--color-fill);
1664
+ }
1665
+
1666
+ .segmented button {
1667
+ height: calc(var(--control-height) - 0.25rem);
1668
+ padding: 0 var(--space-10);
1669
+ border: 0;
1670
+ border-radius: var(--radius-6);
1671
+ background: transparent;
1672
+ color: var(--color-text-secondary);
1673
+ font-size: var(--text-12);
1674
+ font-weight: 500;
1675
+ transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
1676
+ }
1677
+
1678
+ .segmented button[aria-pressed='true'] {
1679
+ background: var(--color-card);
1680
+ box-shadow: var(--shadow-xs);
1681
+ color: var(--color-foreground);
1682
+ }
1683
+
1684
+ .sprint-select {
1685
+ width: 14rem;
1686
+ }
1687
+
1688
+ /* Figure cards and panels share one look. */
1689
+ .figure,
1690
+ .panel-card {
1691
+ min-width: 0;
1692
+ padding: var(--space-12);
1693
+ border-radius: var(--radius-14);
1694
+ background: var(--color-card);
1695
+ box-shadow: var(--shadow-sm);
1696
+ }
1697
+
1698
+ .figures {
1699
+ display: grid;
1700
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1701
+ gap: var(--space-12);
1702
+ }
1703
+
1704
+ .figure {
1705
+ display: flex;
1706
+ flex-direction: column;
1707
+ gap: var(--space-4);
1708
+ }
1709
+
1710
+ .figure-label {
1711
+ align-self: flex-start;
1712
+ color: var(--color-text-secondary);
1713
+ font-size: var(--text-12);
1714
+ text-decoration: underline dotted;
1715
+ text-underline-offset: 3px;
1716
+ cursor: help;
1717
+ }
1718
+
1719
+ .figure-value {
1720
+ font-size: var(--text-16);
1721
+ font-weight: 600;
1722
+ font-variant-numeric: tabular-nums;
1723
+ }
1724
+
1725
+ .figure-detail {
1726
+ color: var(--color-text-secondary);
1727
+ font-size: var(--text-11);
1728
+ }
1729
+
1730
+ .panels {
1731
+ display: grid;
1732
+ grid-template-columns: minmax(0, 1fr);
1733
+ gap: var(--space-12);
1734
+ }
1735
+
1736
+ .chart-title {
1737
+ margin: 0;
1738
+ font-size: var(--text-13);
1739
+ font-weight: 500;
1740
+ }
1741
+
1742
+ .panel-help {
1743
+ margin: var(--space-4) 0 var(--space-8);
1744
+ color: var(--color-text-secondary);
1745
+ font-size: var(--text-11);
1746
+ }
1747
+
1748
+ .panel-empty {
1749
+ margin: var(--space-8) 0 0;
1750
+ color: var(--color-text-secondary);
1751
+ font-size: var(--text-12);
1752
+ }
1753
+
1754
+ /* Charts: shapes carry a class, never a style; the palette is in the tokens. */
1755
+ .chart-series-0 {
1756
+ --series: var(--chart-1);
1757
+ }
1758
+
1759
+ .chart-series-1 {
1760
+ --series: var(--chart-2);
1761
+ }
1762
+
1763
+ .chart-series-2 {
1764
+ --series: var(--chart-3);
1765
+ }
1766
+
1767
+ .chart-series-3 {
1768
+ --series: var(--chart-4);
1769
+ }
1770
+
1771
+ .chart-series-4 {
1772
+ --series: var(--chart-5);
1773
+ }
1774
+
1775
+ .chart-series-5 {
1776
+ --series: var(--chart-6);
1777
+ }
1778
+
1779
+ .chart-series-6 {
1780
+ --series: var(--chart-7);
1781
+ }
1782
+
1783
+ .chart-series-7 {
1784
+ --series: var(--chart-8);
1785
+ }
1786
+
1787
+ .chart-body {
1788
+ min-width: 0;
1789
+ }
1790
+
1791
+ .chart {
1792
+ display: block;
1793
+ width: 100%;
1794
+ height: auto;
1795
+ overflow: visible;
1796
+ }
1797
+
1798
+ .chart-axis {
1799
+ fill: var(--color-text-secondary);
1800
+ font-size: var(--text-10);
1801
+ }
1802
+
1803
+ .chart-grid {
1804
+ stroke: var(--color-border);
1805
+ stroke-dasharray: 3 3;
1806
+ }
1807
+
1808
+ .chart-bar {
1809
+ fill: var(--color-info);
1810
+ }
1811
+
1812
+ .chart-time-bar {
1813
+ fill: var(--chart-2);
1814
+ }
1815
+
1816
+ .chart-area {
1817
+ fill: var(--series);
1818
+ fill-opacity: 0.85;
1819
+ }
1820
+
1821
+ .chart-bar:hover,
1822
+ .chart-time-bar:hover {
1823
+ fill-opacity: 0.8;
1824
+ }
1825
+
1826
+ .chart-legend {
1827
+ display: flex;
1828
+ flex-wrap: wrap;
1829
+ justify-content: center;
1830
+ gap: var(--space-4) var(--space-10);
1831
+ margin: 0 0 var(--space-4);
1832
+ padding: 0;
1833
+ color: var(--color-text-secondary);
1834
+ font-size: var(--text-10);
1835
+ list-style: none;
1836
+ }
1837
+
1838
+ .chart-legend li {
1839
+ display: inline-flex;
1840
+ align-items: center;
1841
+ gap: var(--space-4);
1842
+ }
1843
+
1844
+ .legend-swatch {
1845
+ width: 0.625rem;
1846
+ height: 0.625rem;
1847
+ border-radius: var(--radius-4);
1848
+ background: var(--series);
1849
+ }
1850
+
1851
+ /* Aging work */
1852
+ .aging-list {
1853
+ display: flex;
1854
+ flex-direction: column;
1855
+ margin: 0;
1856
+ padding: 0;
1857
+ list-style: none;
1858
+ }
1859
+
1860
+ .aging-row {
1861
+ all: unset;
1862
+ display: grid;
1863
+ grid-template-columns: auto minmax(0, 1fr) auto auto;
1864
+ align-items: center;
1865
+ gap: var(--space-8);
1866
+ box-sizing: border-box;
1867
+ width: 100%;
1868
+ min-height: 1.75rem;
1869
+ padding: 0 var(--space-6);
1870
+ border-radius: var(--radius-6);
1871
+ cursor: pointer;
1872
+ }
1873
+
1874
+ .aging-row:hover {
1875
+ background: var(--color-fill);
1876
+ }
1877
+
1878
+ .aging-row:focus-visible {
1879
+ outline: 2px solid var(--color-ring);
1880
+ outline-offset: -2px;
1881
+ }
1882
+
1883
+ .aging-title {
1884
+ min-width: 0;
1885
+ overflow: hidden;
1886
+ font-size: var(--text-13);
1887
+ white-space: nowrap;
1888
+ text-overflow: ellipsis;
1889
+ }
1890
+
1891
+ .aging-where,
1892
+ .aging-age {
1893
+ color: var(--color-text-secondary);
1894
+ font-size: var(--text-11);
1895
+ font-variant-numeric: tabular-nums;
1896
+ white-space: nowrap;
1897
+ }
1898
+
1899
+ .aging-age {
1900
+ min-width: 2.5rem;
1901
+ color: var(--color-foreground);
1902
+ font-size: var(--text-12);
1903
+ font-weight: 500;
1904
+ text-align: right;
1905
+ }
1906
+
1907
+ .aging-age[data-over] {
1908
+ color: var(--color-warning-fg);
1909
+ }
1910
+
1911
+ /* Agents and people */
1912
+ .data-table {
1913
+ width: 100%;
1914
+ margin-top: var(--space-8);
1915
+ border-collapse: collapse;
1916
+ font-size: var(--text-13);
1917
+ }
1918
+
1919
+ .data-table th {
1920
+ padding: var(--space-8);
1921
+ font-size: var(--text-13);
1922
+ font-weight: 500;
1923
+ text-align: left;
1924
+ }
1925
+
1926
+ .data-table td {
1927
+ padding: var(--space-8);
1928
+ border-top: 1px solid var(--color-border);
1929
+ font-variant-numeric: tabular-nums;
1930
+ }
1931
+
1932
+ .runs-detail {
1933
+ color: var(--color-text-secondary);
1934
+ font-size: var(--text-11);
1935
+ }
1936
+
1937
+ .analytics-note {
1938
+ margin: 0;
1939
+ color: var(--color-text-secondary);
1940
+ font-size: var(--text-12);
1941
+ }
1942
+
1943
+ .analytics-error {
1944
+ display: flex;
1945
+ flex-wrap: wrap;
1946
+ align-items: center;
1947
+ gap: var(--space-12);
1948
+ padding: var(--space-8) var(--space-12);
1949
+ border-radius: var(--radius-8);
1950
+ background: var(--color-destructive-wash);
1951
+ color: var(--color-destructive);
1952
+ font-size: var(--text-12);
1953
+ }
1954
+
1955
+ .analytics-error p {
1956
+ margin: 0;
1957
+ }
1958
+
1959
+ .analytics[data-loading='true'] .figures,
1960
+ .analytics[data-loading='true'] .panels {
1961
+ opacity: 0.7;
1962
+ }
1963
+
1964
+ .skeleton {
1965
+ background: var(--color-fill);
767
1966
  }
768
1967
 
769
- .column-add {
770
- margin-left: auto;
1968
+ .figure.skeleton {
1969
+ min-height: 5.5rem;
771
1970
  }
772
1971
 
773
- .column-cards {
1972
+ .skeleton-panel {
1973
+ min-height: 12rem;
1974
+ }
1975
+
1976
+ .analytics-skeleton {
774
1977
  display: flex;
775
- flex: 1;
776
1978
  flex-direction: column;
777
- gap: var(--space-2);
778
- min-height: 0;
779
- padding: var(--space-1) var(--space-1) var(--space-3);
780
- overflow-y: auto;
781
- overscroll-behavior: contain;
1979
+ gap: var(--space-16);
782
1980
  }
783
1981
 
784
- /* Notices */
1982
+ @media (min-width: 40rem) {
1983
+ .figures {
1984
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1985
+ }
1986
+ }
785
1987
 
786
- .notice {
787
- margin: 0;
788
- padding: var(--space-2) var(--space-4);
789
- border-bottom: 1px solid var(--color-border);
790
- background: var(--color-surface);
791
- font-size: var(--text-sm);
1988
+ @media (min-width: 56.25rem) {
1989
+ .figures {
1990
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1991
+ }
1992
+
1993
+ .panels {
1994
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1995
+ }
792
1996
  }
793
1997
 
794
- .notice[data-kind='error'],
795
- .panel-notice {
796
- background: var(--color-danger-wash);
797
- color: var(--color-danger);
1998
+ /* Selecting cards for a change of several */
1999
+
2000
+ .select-box {
2001
+ position: relative;
2002
+ z-index: var(--z-raised);
2003
+ flex: none;
2004
+ width: 1rem;
2005
+ height: 1rem;
2006
+ margin: 0;
2007
+ accent-color: var(--color-primary);
2008
+ cursor: pointer;
2009
+ /* Seen on hover, focus and once ticked, but always taking its place. */
2010
+ opacity: 0;
2011
+ transition: opacity var(--duration-base) var(--ease-out);
798
2012
  }
799
2013
 
800
- .panel-notice {
801
- margin: var(--space-4) 0 0;
802
- padding: var(--space-2) var(--space-3);
803
- border-radius: var(--radius-md);
804
- font-size: var(--text-sm);
2014
+ .card:hover .select-box,
2015
+ .list-row:hover .select-box,
2016
+ .select-box:focus-visible,
2017
+ .select-box:checked {
2018
+ opacity: 1;
805
2019
  }
806
2020
 
807
- /* Top bar */
2021
+ .selection-bar {
2022
+ position: fixed;
2023
+ right: 0;
2024
+ bottom: var(--space-12);
2025
+ left: 0;
2026
+ z-index: var(--z-bar);
2027
+ display: flex;
2028
+ align-items: center;
2029
+ gap: var(--space-6);
2030
+ width: fit-content;
2031
+ min-height: 2.5rem;
2032
+ margin: 0 auto;
2033
+ padding: var(--space-4) var(--space-8);
2034
+ border-radius: var(--radius-10);
2035
+ background: var(--color-popover);
2036
+ box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--color-foreground) 10%, transparent);
2037
+ font-size: var(--text-12);
2038
+ }
808
2039
 
809
- .topbar-title {
810
- margin: 0;
811
- font-family: var(--font-display);
812
- font-size: var(--text-lg);
813
- font-weight: 750;
814
- letter-spacing: -0.01em;
815
- line-height: 1;
816
- text-transform: lowercase;
2040
+ .selection-bar .selection-summary {
2041
+ display: inline-flex;
2042
+ align-items: center;
2043
+ gap: var(--space-6);
2044
+ padding: 0 var(--space-6);
2045
+ font-weight: 500;
2046
+ font-variant-numeric: tabular-nums;
817
2047
  }
818
2048
 
819
- .project-switcher select.field {
820
- font-size: var(--text-md);
821
- font-weight: 600;
2049
+ .selection-bar .divider {
2050
+ align-self: stretch;
2051
+ width: 1px;
2052
+ margin: var(--space-4) 0;
2053
+ background: var(--color-border);
822
2054
  }
823
2055
 
824
- .workspace {
825
- min-width: 0;
826
- overflow: hidden;
827
- color: var(--color-text-muted);
828
- font-size: var(--text-xs);
829
- white-space: nowrap;
830
- text-overflow: ellipsis;
2056
+ .tool-button .icon {
2057
+ width: 0.875rem;
2058
+ height: 0.875rem;
831
2059
  }
832
2060
 
833
- .where-key {
834
- color: var(--color-text);
835
- font-weight: 600;
2061
+ .popover[data-side='top'] {
2062
+ top: auto;
2063
+ bottom: calc(100% + var(--space-6));
836
2064
  }
837
2065
 
838
- .token-form {
2066
+ .menu-item {
2067
+ all: unset;
839
2068
  display: flex;
840
2069
  align-items: center;
841
- gap: var(--space-2);
2070
+ gap: var(--space-8);
2071
+ box-sizing: border-box;
2072
+ width: 100%;
2073
+ min-height: 1.75rem;
2074
+ padding: 0 var(--space-6);
2075
+ border-radius: var(--radius-4);
2076
+ font-size: var(--text-12);
2077
+ white-space: nowrap;
2078
+ cursor: pointer;
842
2079
  }
843
2080
 
844
- .token-label {
2081
+ .menu-item:hover,
2082
+ .menu-item:focus-visible {
2083
+ background: var(--color-fill);
2084
+ }
2085
+
2086
+ .menu-item .icon {
2087
+ width: 0.875rem;
2088
+ height: 0.875rem;
2089
+ }
2090
+
2091
+ /* The dialog */
2092
+
2093
+ .panel-head {
845
2094
  display: flex;
2095
+ flex-wrap: wrap;
846
2096
  align-items: center;
847
- gap: var(--space-2);
848
- color: var(--color-text-muted);
849
- font-size: var(--text-sm);
2097
+ gap: var(--space-8);
2098
+ min-height: 2.75rem;
2099
+ padding: var(--space-4) var(--space-12) var(--space-4) var(--space-16);
2100
+ border-bottom: 1px solid var(--color-border);
2101
+ color: var(--color-text-secondary);
2102
+ font-size: var(--text-12);
850
2103
  }
851
2104
 
852
- .token-input {
853
- width: 7rem;
854
- font-size: var(--text-sm);
2105
+ .panel-head .card-key {
2106
+ color: var(--color-foreground);
2107
+ font-size: var(--text-12);
2108
+ font-weight: 500;
855
2109
  }
856
2110
 
857
- /* Narrow: a working token's form folds into its button. */
858
- .token-toggle {
859
- display: none;
2111
+ .panel-head .spacer {
2112
+ flex: 1 1 0;
860
2113
  }
861
2114
 
862
- .topbar[data-token] .token-toggle {
2115
+ .breadcrumb {
2116
+ all: unset;
863
2117
  display: inline-flex;
2118
+ align-items: center;
2119
+ gap: var(--space-4);
2120
+ box-sizing: border-box;
2121
+ max-width: 13rem;
2122
+ min-width: 0;
2123
+ color: var(--color-text-secondary);
2124
+ font-size: var(--text-12);
864
2125
  }
865
2126
 
866
- .topbar[data-token='folded'] .token-form {
867
- display: none;
2127
+ button.breadcrumb {
2128
+ cursor: pointer;
868
2129
  }
869
2130
 
870
- .token-toggle[aria-expanded='true'] {
871
- background: var(--color-tint);
872
- color: var(--color-text);
2131
+ button.breadcrumb:hover {
2132
+ color: var(--color-foreground);
873
2133
  }
874
2134
 
875
- /* Filter bar */
2135
+ button.breadcrumb:focus-visible,
2136
+ .facts .link:focus-visible,
2137
+ .subtask-row:focus-visible,
2138
+ .subtasks-fold:focus-visible {
2139
+ outline: 2px solid var(--color-ring);
2140
+ outline-offset: 2px;
2141
+ }
876
2142
 
877
- .filter-search {
878
- flex: 0 0 8rem;
879
- font-size: var(--text-sm);
2143
+ .breadcrumb .icon {
2144
+ width: 0.75rem;
2145
+ height: 0.75rem;
880
2146
  }
881
2147
 
882
- .filter-group {
883
- display: flex;
884
- flex-wrap: wrap;
885
- gap: var(--space-2);
2148
+ .crumb-label {
2149
+ flex: none;
886
2150
  }
887
2151
 
888
- .filter-labels {
889
- max-height: calc(var(--control-height) * 2);
890
- font-size: var(--text-sm);
2152
+ .crumb-title {
2153
+ min-width: 0;
2154
+ overflow: hidden;
2155
+ color: var(--color-foreground);
2156
+ white-space: nowrap;
2157
+ text-overflow: ellipsis;
891
2158
  }
892
2159
 
893
- .filter-count {
894
- flex: 0 0 auto;
895
- color: var(--color-text-muted);
896
- font-size: var(--text-sm);
897
- font-variant-numeric: tabular-nums;
2160
+ .column-pill,
2161
+ .done-pill {
2162
+ display: inline-flex;
2163
+ align-items: center;
2164
+ gap: var(--space-6);
2165
+ height: 1.375rem;
2166
+ padding: 0 var(--space-8);
2167
+ border-radius: 999px;
2168
+ box-shadow: inset 0 0 0 1px var(--color-border-strong);
2169
+ color: var(--color-foreground);
2170
+ font-size: var(--text-12);
2171
+ font-weight: 500;
898
2172
  white-space: nowrap;
899
2173
  }
900
2174
 
901
- /* Groups in the bar are told apart by space. */
902
- .select-wrap + .filter-toggle,
903
- .filter-toggle + .filter-group,
904
- .filter-group + .filter-group,
905
- .filter-group + .filter-labels {
906
- margin-left: var(--space-3);
2175
+ .column-pill .status-icon {
2176
+ width: 0.875rem;
2177
+ height: 0.875rem;
907
2178
  }
908
2179
 
909
- /* Side panel */
2180
+ .done-pill {
2181
+ color: var(--color-text-secondary);
2182
+ font-variant-numeric: tabular-nums;
2183
+ }
910
2184
 
911
- .panel-head {
912
- display: flex;
2185
+ .run-state {
2186
+ display: inline-flex;
913
2187
  align-items: center;
914
- gap: var(--space-3);
915
- min-height: 3rem;
916
- padding: 0 var(--space-3) 0 var(--space-4);
917
- border-bottom: 1px solid var(--color-border);
918
- color: var(--color-text-muted);
919
- font-family: var(--font-mono);
920
- font-size: var(--text-sm);
2188
+ gap: var(--space-6);
2189
+ color: var(--color-info-fg);
2190
+ font-size: var(--text-12);
2191
+ font-weight: 500;
921
2192
  }
922
2193
 
923
- .panel-head .card-key {
924
- color: var(--color-text);
925
- font-weight: 600;
2194
+ .sibling-switch {
2195
+ display: inline-flex;
2196
+ align-items: center;
926
2197
  }
927
2198
 
928
- .panel-head .spacer {
929
- flex: 1;
2199
+ .sibling-step {
2200
+ width: 1.5rem;
2201
+ height: 1.5rem;
2202
+ font-size: var(--text-14);
2203
+ line-height: 1;
930
2204
  }
931
2205
 
932
- .icon-button {
933
- display: inline-grid;
934
- place-items: center;
935
- width: var(--control-height);
936
- height: var(--control-height);
937
- border: 0;
938
- border-radius: var(--radius-md);
939
- background: transparent;
940
- color: var(--color-text-muted);
941
- font: inherit;
942
- font-size: var(--text-lg);
943
- cursor: pointer;
2206
+ .sibling-step:disabled {
2207
+ opacity: 0.35;
2208
+ cursor: default;
944
2209
  }
945
2210
 
946
- .icon-button:hover {
947
- background: var(--color-tint);
948
- color: var(--color-text);
2211
+ .sibling-position {
2212
+ min-width: 2rem;
2213
+ font-variant-numeric: tabular-nums;
2214
+ text-align: center;
949
2215
  }
950
2216
 
951
2217
  .panel-scroll {
@@ -954,42 +2220,23 @@ button.parent-link:hover .parent-title {
954
2220
  }
955
2221
 
956
2222
  .panel-top {
957
- padding: var(--space-4);
2223
+ padding: var(--space-16);
958
2224
  }
959
2225
 
960
2226
  .panel-title {
961
- margin: 0 0 var(--space-3);
962
- font-family: var(--font-display);
963
- font-size: var(--text-xl);
964
- font-weight: 650;
965
- line-height: var(--leading-tight);
2227
+ margin: 0 0 var(--space-12);
2228
+ font-size: var(--text-24);
2229
+ font-weight: 600;
2230
+ line-height: var(--leading-title);
966
2231
  overflow-wrap: anywhere;
967
2232
  text-wrap: balance;
968
2233
  }
969
2234
 
970
- .state-row {
971
- display: flex;
972
- flex-wrap: wrap;
973
- align-items: center;
974
- gap: var(--space-2) var(--space-3);
975
- }
976
-
977
- .column-pill {
978
- display: inline-flex;
979
- align-items: center;
980
- height: 1.625rem;
981
- padding: 0 var(--space-3);
982
- border: 1px solid var(--color-border-strong);
983
- border-radius: var(--radius-lg);
984
- font-size: var(--text-sm);
985
- font-weight: 600;
986
- }
987
-
988
2235
  .panel-body {
989
2236
  display: grid;
990
2237
  grid-template-columns: minmax(0, 1fr);
991
- gap: var(--space-5);
992
- padding: 0 var(--space-4) var(--space-6);
2238
+ gap: var(--space-24);
2239
+ padding: 0 var(--space-16) var(--space-24);
993
2240
  }
994
2241
 
995
2242
  .panel-main {
@@ -998,53 +2245,66 @@ button.parent-link:hover .parent-title {
998
2245
 
999
2246
  .panel-side {
1000
2247
  display: grid;
1001
- gap: var(--space-4);
2248
+ gap: var(--space-16);
1002
2249
  order: -1;
1003
2250
  }
1004
2251
 
2252
+ /* Details: a property grid, a 76 px label column. */
1005
2253
  .facts {
1006
2254
  display: grid;
1007
- grid-template-columns: 6.5rem minmax(0, 1fr);
1008
- gap: var(--space-3);
2255
+ grid-template-columns: 4.75rem minmax(0, 1fr);
2256
+ gap: var(--space-8) var(--space-12);
1009
2257
  margin: 0;
1010
- font-size: var(--text-base);
2258
+ font-size: var(--text-13);
1011
2259
  }
1012
2260
 
1013
2261
  .facts dt {
1014
- color: var(--color-text-muted);
1015
- line-height: 1.25rem;
2262
+ color: var(--color-text-secondary);
2263
+ font-size: var(--text-12);
2264
+ line-height: 1.375rem;
1016
2265
  }
1017
2266
 
1018
2267
  .facts dd {
1019
2268
  display: flex;
1020
2269
  flex-wrap: wrap;
1021
2270
  align-items: center;
1022
- gap: var(--space-1) var(--space-2);
2271
+ gap: var(--space-4) var(--space-8);
1023
2272
  min-width: 0;
1024
2273
  margin: 0;
1025
- line-height: 1.25rem;
2274
+ line-height: 1.375rem;
2275
+ }
2276
+
2277
+ .fact-column {
2278
+ display: inline-flex;
2279
+ align-items: center;
2280
+ gap: var(--space-6);
2281
+ }
2282
+
2283
+ .fact-column .status-icon {
2284
+ width: 0.875rem;
2285
+ height: 0.875rem;
1026
2286
  }
1027
2287
 
1028
2288
  .muted {
1029
- color: var(--color-text-muted);
2289
+ color: var(--color-text-secondary);
1030
2290
  }
1031
2291
 
1032
2292
  .panel-top .status-line {
1033
2293
  flex-basis: 100%;
1034
- margin: var(--space-3) 0 0;
1035
- font-size: var(--text-md);
1036
- -webkit-line-clamp: unset;
2294
+ margin: var(--space-12) 0 0;
2295
+ font-size: var(--text-14);
2296
+ white-space: normal;
1037
2297
  }
1038
2298
 
1039
2299
  .facts .link {
1040
2300
  all: unset;
1041
2301
  display: inline-flex;
1042
2302
  align-items: center;
1043
- gap: var(--space-2);
2303
+ gap: var(--space-8);
1044
2304
  box-sizing: border-box;
1045
2305
  min-width: 0;
1046
2306
  max-width: 100%;
1047
- min-height: var(--chip-height);
2307
+ min-height: 1.375rem;
1048
2308
  cursor: pointer;
1049
2309
  }
1050
2310
 
@@ -1052,81 +2312,75 @@ button.parent-link:hover .parent-title {
1052
2312
  text-decoration: underline;
1053
2313
  }
1054
2314
 
1055
- .parent-link:focus-visible,
1056
- .facts .link:focus-visible,
1057
- .subcard:focus-visible {
1058
- outline: 2px solid var(--color-focus);
1059
- outline-offset: 2px;
1060
- }
1061
-
1062
- .subcards {
2315
+ /* The Sub-tasks section: a chevron folds it; its rows are the card's own. */
2316
+ .subtasks-head {
1063
2317
  display: flex;
1064
- flex-direction: column;
1065
- gap: var(--space-1);
1066
- margin: 0;
1067
- padding: 0;
1068
- list-style: none;
2318
+ align-items: center;
2319
+ gap: var(--space-8);
2320
+ margin-bottom: var(--space-8);
1069
2321
  }
1070
2322
 
1071
- .subcard {
2323
+ .subtasks-fold {
1072
2324
  all: unset;
1073
- display: flex;
1074
- flex-direction: column;
1075
- gap: var(--space-1);
1076
- box-sizing: border-box;
1077
- width: 100%;
1078
- min-height: var(--control-height);
1079
- padding: var(--space-2) var(--space-3);
1080
- border-radius: var(--radius-md);
1081
- box-shadow: 0 0 0 1px var(--color-border);
2325
+ display: inline-flex;
2326
+ align-items: center;
2327
+ gap: var(--space-4);
2328
+ border-radius: var(--radius-4);
1082
2329
  cursor: pointer;
1083
2330
  }
1084
2331
 
1085
- .subcard:hover {
1086
- background: var(--color-tint);
2332
+ .subtasks-fold .icon {
2333
+ width: 0.875rem;
2334
+ height: 0.875rem;
2335
+ color: var(--color-text-secondary);
2336
+ transition: transform var(--duration-base) var(--ease-out);
1087
2337
  }
1088
2338
 
1089
- .subcard-head {
1090
- display: flex;
1091
- align-items: baseline;
1092
- gap: var(--space-2);
1093
- min-width: 0;
2339
+ .subtasks-fold[aria-expanded='false'] .icon {
2340
+ transform: rotate(-90deg);
2341
+ }
2342
+
2343
+ .panel-section .subtasks-fold h3 {
2344
+ margin: 0;
2345
+ color: var(--color-foreground);
2346
+ font-size: var(--text-14);
1094
2347
  font-weight: 600;
2348
+ letter-spacing: 0;
2349
+ text-transform: none;
1095
2350
  }
1096
2351
 
1097
- .subcard-meta {
1098
- display: flex;
1099
- flex-wrap: wrap;
1100
- align-items: center;
1101
- gap: var(--space-1) var(--space-2);
1102
- color: var(--color-text-muted);
1103
- font-size: var(--text-sm);
2352
+ .subtasks-count {
2353
+ color: var(--color-text-secondary);
2354
+ font-size: var(--text-12);
2355
+ font-variant-numeric: tabular-nums;
1104
2356
  }
1105
2357
 
1106
- .subcard[data-done='true'] .subcard-head {
1107
- color: var(--color-text-muted);
1108
- font-weight: 400;
2358
+ .subtasks-head .progress-bar {
2359
+ width: 6rem;
2360
+ }
2361
+
2362
+ /* Sections, tabs and History */
2363
+
2364
+ .panel:focus {
2365
+ outline: 0;
1109
2366
  }
1110
2367
 
1111
2368
  .panel-section {
1112
- margin-top: var(--space-5);
1113
- padding-top: var(--space-4);
2369
+ margin-top: var(--space-24);
2370
+ padding-top: var(--space-16);
1114
2371
  border-top: 1px solid var(--color-border);
1115
2372
  }
1116
2373
 
1117
2374
  .panel-section h3 {
1118
- margin: 0 0 var(--space-3);
1119
- color: var(--color-text-muted);
1120
- font-family: var(--font-display);
1121
- font-size: var(--text-sm);
1122
- font-weight: 700;
1123
- letter-spacing: var(--tracking-caps);
1124
- text-transform: uppercase;
2375
+ margin: 0 0 var(--space-12);
2376
+ color: var(--color-text-secondary);
2377
+ font-size: var(--text-12);
2378
+ font-weight: 600;
1125
2379
  }
1126
2380
 
1127
2381
  .panel-main > .panel-section,
1128
2382
  .tab-panel > .panel-section {
1129
- margin: 0 0 var(--space-5);
2383
+ margin: 0 0 var(--space-24);
1130
2384
  padding: 0;
1131
2385
  border: 0;
1132
2386
  }
@@ -1134,27 +2388,26 @@ button.parent-link:hover .parent-title {
1134
2388
  /* Decision and Details: boxes beside the reading column; the decision turns orange while the card waits. */
1135
2389
  .panel-side > .panel-section {
1136
2390
  margin: 0;
1137
- padding: var(--space-4);
1138
- border: 1px solid var(--color-border);
1139
- border-radius: var(--radius-lg);
1140
- background: var(--color-raised);
2391
+ padding: var(--space-16);
2392
+ border-radius: var(--radius-14);
2393
+ background: var(--color-card);
2394
+ box-shadow: inset 0 0 0 1px var(--color-border);
1141
2395
  }
1142
2396
 
1143
2397
  .panel-side > .panel-section[data-waiting] {
1144
- border-color: var(--color-waiting);
1145
- background: var(--color-waiting-wash);
1146
- box-shadow: inset var(--edge-width) 0 0 var(--color-waiting);
2398
+ background: var(--color-warning-wash);
2399
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-warning) 50%, transparent);
1147
2400
  }
1148
2401
 
1149
2402
  .panel-side > .panel-section[data-waiting] h3 {
1150
- color: var(--color-text);
2403
+ color: var(--color-foreground);
1151
2404
  }
1152
2405
 
1153
2406
  /* Tabs */
1154
2407
  .tabs {
1155
2408
  display: flex;
1156
- gap: var(--space-1);
1157
- margin: 0 0 var(--space-4);
2409
+ gap: var(--space-4);
2410
+ margin: 0 0 var(--space-16);
1158
2411
  overflow-x: auto;
1159
2412
  border-bottom: 1px solid var(--color-border);
1160
2413
  }
@@ -1162,36 +2415,36 @@ button.parent-link:hover .parent-title {
1162
2415
  .tab {
1163
2416
  display: inline-flex;
1164
2417
  align-items: center;
1165
- gap: var(--space-2);
2418
+ gap: var(--space-8);
1166
2419
  height: var(--control-height);
1167
2420
  margin-bottom: -1px;
1168
- padding: 0 var(--space-3);
2421
+ padding: 0 var(--space-12);
1169
2422
  border: 0;
1170
2423
  border-bottom: 2px solid transparent;
1171
2424
  background: transparent;
1172
- color: var(--color-text-muted);
2425
+ color: var(--color-text-secondary);
1173
2426
  font: inherit;
1174
- font-size: var(--text-md);
2427
+ font-size: var(--text-14);
1175
2428
  font-weight: 600;
1176
2429
  cursor: pointer;
1177
2430
  }
1178
2431
 
1179
2432
  .tab:hover {
1180
- color: var(--color-text);
2433
+ color: var(--color-foreground);
1181
2434
  }
1182
2435
 
1183
2436
  .tab[aria-selected='true'] {
1184
- border-bottom-color: var(--color-text);
1185
- color: var(--color-text);
2437
+ border-bottom-color: var(--color-foreground);
2438
+ color: var(--color-foreground);
1186
2439
  }
1187
2440
 
1188
2441
  .tab .count {
1189
2442
  min-width: 1.25rem;
1190
- padding: 0 var(--space-1);
1191
- border-radius: var(--radius-sm);
1192
- background: var(--color-tint);
2443
+ padding: 0 var(--space-4);
2444
+ border-radius: var(--radius-4);
2445
+ background: var(--color-fill);
1193
2446
  font-family: var(--font-mono);
1194
- font-size: var(--text-xs);
2447
+ font-size: var(--text-11);
1195
2448
  font-variant-numeric: tabular-nums;
1196
2449
  text-align: center;
1197
2450
  }
@@ -1205,30 +2458,30 @@ button.parent-link:hover .parent-title {
1205
2458
  }
1206
2459
 
1207
2460
  .tab-panel .comment-form {
1208
- margin: 0 0 var(--space-5);
2461
+ margin: 0 0 var(--space-24);
1209
2462
  }
1210
2463
 
1211
2464
  .tab-panel .comment-form textarea {
1212
2465
  min-height: 5.5rem;
1213
- font-size: var(--text-md);
2466
+ font-size: var(--text-14);
1214
2467
  }
1215
2468
 
1216
2469
  .tab-panel ul.entries > li {
1217
- padding: var(--space-3) var(--space-4);
2470
+ padding: var(--space-12) var(--space-16);
1218
2471
  border: 1px solid var(--color-border);
1219
- border-radius: var(--radius-md);
1220
- background: var(--color-raised);
2472
+ border-radius: var(--radius-6);
2473
+ background: var(--color-card);
1221
2474
  }
1222
2475
 
1223
2476
  .tab-panel .entry-text {
1224
2477
  max-width: 46rem;
1225
- font-size: var(--text-reading);
2478
+ font-size: var(--text-14);
1226
2479
  line-height: 1.6;
1227
2480
  }
1228
2481
 
1229
2482
  .description {
1230
2483
  max-width: 46rem;
1231
- font-size: var(--text-reading);
2484
+ font-size: var(--text-14);
1232
2485
  line-height: 1.65;
1233
2486
  overflow-wrap: anywhere;
1234
2487
  white-space: pre-wrap;
@@ -1237,15 +2490,15 @@ button.parent-link:hover .parent-title {
1237
2490
  .row {
1238
2491
  display: flex;
1239
2492
  flex-wrap: wrap;
1240
- gap: var(--space-2);
1241
- margin-top: var(--space-2);
2493
+ gap: var(--space-8);
2494
+ margin-top: var(--space-8);
1242
2495
  }
1243
2496
 
1244
2497
  .hint,
1245
2498
  .empty {
1246
- margin: var(--space-2) 0 0;
1247
- color: var(--color-text-muted);
1248
- font-size: var(--text-sm);
2499
+ margin: var(--space-8) 0 0;
2500
+ color: var(--color-text-secondary);
2501
+ font-size: var(--text-12);
1249
2502
  }
1250
2503
 
1251
2504
  .empty {
@@ -1259,8 +2512,8 @@ button.parent-link:hover .parent-title {
1259
2512
  .entries {
1260
2513
  display: flex;
1261
2514
  flex-direction: column;
1262
- gap: var(--space-3);
1263
- margin: 0 0 var(--space-3);
2515
+ gap: var(--space-12);
2516
+ margin: 0 0 var(--space-12);
1264
2517
  padding: 0;
1265
2518
  list-style: none;
1266
2519
  }
@@ -1269,14 +2522,14 @@ button.parent-link:hover .parent-title {
1269
2522
  display: flex;
1270
2523
  flex-wrap: wrap;
1271
2524
  align-items: center;
1272
- gap: var(--space-2);
1273
- margin-bottom: var(--space-1);
1274
- color: var(--color-text-muted);
1275
- font-size: var(--text-xs);
2525
+ gap: var(--space-8);
2526
+ margin-bottom: var(--space-4);
2527
+ color: var(--color-text-secondary);
2528
+ font-size: var(--text-11);
1276
2529
  }
1277
2530
 
1278
2531
  .entry-text {
1279
- font-size: var(--text-md);
2532
+ font-size: var(--text-14);
1280
2533
  overflow-wrap: anywhere;
1281
2534
  white-space: pre-wrap;
1282
2535
  }
@@ -1287,28 +2540,28 @@ button.parent-link:hover .parent-title {
1287
2540
  display: inline-block;
1288
2541
  width: 0.5rem;
1289
2542
  height: 0.5rem;
1290
- margin-right: var(--space-2);
2543
+ margin-right: var(--space-8);
1291
2544
  border-radius: 50%;
1292
- background: var(--color-quiet);
2545
+ background: var(--color-text-secondary);
1293
2546
  }
1294
2547
 
1295
2548
  [data-run-state='running'] > .entry-text::before {
1296
- background: var(--color-running);
2549
+ background: var(--color-info-fg);
1297
2550
  }
1298
2551
 
1299
2552
  [data-run-state='finished'] > .entry-text::before {
1300
- background: var(--color-done);
2553
+ background: var(--color-success-fg);
1301
2554
  }
1302
2555
 
1303
2556
  [data-run-state='failed'] > .entry-text::before {
1304
- background: var(--color-danger);
2557
+ background: var(--color-destructive);
1305
2558
  }
1306
2559
 
1307
2560
  .comment-form {
1308
2561
  display: flex;
1309
2562
  flex-direction: column;
1310
2563
  align-items: flex-start;
1311
- gap: var(--space-2);
2564
+ gap: var(--space-8);
1312
2565
  }
1313
2566
 
1314
2567
  /* Who did it: blue an agent, ink you, an outline kanbo. */
@@ -1317,61 +2570,61 @@ button.parent-link:hover .parent-title {
1317
2570
  display: inline-flex;
1318
2571
  flex: 0 0 auto;
1319
2572
  align-items: center;
1320
- gap: var(--space-1);
2573
+ gap: var(--space-4);
1321
2574
  height: 1.25rem;
1322
- padding: 0 var(--space-2);
1323
- border-radius: var(--radius-sm);
1324
- background: var(--color-tint);
1325
- color: var(--color-text);
1326
- font-size: var(--text-sm);
2575
+ padding: 0 var(--space-8);
2576
+ border-radius: var(--radius-4);
2577
+ background: var(--color-fill);
2578
+ color: var(--color-foreground);
2579
+ font-size: var(--text-12);
1327
2580
  font-weight: 600;
1328
2581
  white-space: nowrap;
1329
2582
  }
1330
2583
 
1331
2584
  .actor-chip[data-kind='agent'] {
1332
- background: var(--color-agent-wash);
1333
- color: var(--color-agent);
2585
+ background: var(--color-info-wash);
2586
+ color: var(--color-info-fg);
1334
2587
  }
1335
2588
 
1336
2589
  .actor-chip[data-kind='system'] {
1337
2590
  background: transparent;
1338
- box-shadow: inset 0 0 0 1px var(--color-quiet);
1339
- color: var(--color-text-muted);
2591
+ box-shadow: inset 0 0 0 1px var(--color-text-secondary);
2592
+ color: var(--color-text-secondary);
1340
2593
  }
1341
2594
 
1342
2595
  .actor-label {
1343
- color: var(--color-text-muted);
1344
- font-size: var(--text-xs);
2596
+ color: var(--color-text-secondary);
2597
+ font-size: var(--text-11);
1345
2598
  font-weight: 500;
1346
2599
  }
1347
2600
 
1348
2601
  /* History: a ruled timeline, a dot per actor kind. */
1349
2602
 
1350
2603
  .history-day + .history-day {
1351
- margin-top: var(--space-4);
2604
+ margin-top: var(--space-16);
1352
2605
  }
1353
2606
 
1354
2607
  .history-day h4 {
1355
- margin: 0 0 var(--space-2);
1356
- font-size: var(--text-sm);
1357
- font-weight: 650;
2608
+ margin: 0 0 var(--space-8);
2609
+ font-size: var(--text-12);
2610
+ font-weight: 600;
1358
2611
  }
1359
2612
 
1360
2613
  .history-list {
1361
- margin: 0 0 0 var(--space-1);
1362
- padding: 0 0 0 var(--space-4);
2614
+ margin: 0 0 0 var(--space-4);
2615
+ padding: 0 0 0 var(--space-16);
1363
2616
  border-left: 1px solid color-mix(in srgb, var(--color-border-strong) 55%, transparent);
1364
2617
  list-style: none;
1365
2618
  }
1366
2619
 
1367
2620
  .history-entry {
1368
- --dot: var(--color-text);
2621
+ --dot: var(--color-foreground);
1369
2622
  position: relative;
1370
2623
  display: grid;
1371
2624
  grid-template-columns: minmax(0, 1fr) auto;
1372
- gap: var(--space-1) var(--space-2);
1373
- padding-bottom: var(--space-3);
1374
- font-size: var(--text-base);
2625
+ gap: var(--space-4) var(--space-8);
2626
+ padding-bottom: var(--space-12);
2627
+ font-size: var(--text-13);
1375
2628
  }
1376
2629
 
1377
2630
  .history-entry:last-child {
@@ -1382,28 +2635,28 @@ button.parent-link:hover .parent-title {
1382
2635
  content: '';
1383
2636
  position: absolute;
1384
2637
  top: 0.375rem;
1385
- left: calc(-1 * var(--space-4) - 0.25rem - 0.5px);
2638
+ left: calc(-1 * var(--space-16) - 0.25rem - 0.5px);
1386
2639
  width: 0.5rem;
1387
2640
  height: 0.5rem;
1388
2641
  border-radius: 50%;
1389
2642
  background: var(--dot);
1390
- box-shadow: 0 0 0 3px var(--color-surface);
2643
+ box-shadow: 0 0 0 3px var(--color-background);
1391
2644
  }
1392
2645
 
1393
2646
  .history-entry[data-kind='agent'] {
1394
- --dot: var(--color-agent);
2647
+ --dot: var(--color-info-fg);
1395
2648
  }
1396
2649
 
1397
2650
  .history-entry[data-kind='system']::before {
1398
- background: var(--color-surface);
1399
- box-shadow: inset 0 0 0 1.5px var(--color-quiet), 0 0 0 3px var(--color-surface);
2651
+ background: var(--color-background);
2652
+ box-shadow: inset 0 0 0 1.5px var(--color-text-secondary), 0 0 0 3px var(--color-background);
1400
2653
  }
1401
2654
 
1402
2655
  .history-what {
1403
2656
  display: flex;
1404
2657
  flex-wrap: wrap;
1405
2658
  align-items: center;
1406
- gap: var(--space-1) var(--space-2);
2659
+ gap: var(--space-4) var(--space-8);
1407
2660
  min-width: 0;
1408
2661
  }
1409
2662
 
@@ -1412,8 +2665,8 @@ button.parent-link:hover .parent-title {
1412
2665
  }
1413
2666
 
1414
2667
  .history-time {
1415
- color: var(--color-text-muted);
1416
- font-size: var(--text-xs);
2668
+ color: var(--color-text-secondary);
2669
+ font-size: var(--text-11);
1417
2670
  line-height: 1.25rem;
1418
2671
  white-space: nowrap;
1419
2672
  }
@@ -1425,7 +2678,7 @@ button.parent-link:hover .parent-title {
1425
2678
  }
1426
2679
 
1427
2680
  .value-from {
1428
- color: var(--color-text-muted);
2681
+ color: var(--color-text-secondary);
1429
2682
  text-decoration: line-through;
1430
2683
  text-decoration-thickness: 1px;
1431
2684
  }
@@ -1437,8 +2690,8 @@ button.parent-link:hover .parent-title {
1437
2690
 
1438
2691
  .value-from + .value-to::before {
1439
2692
  content: '→';
1440
- margin: 0 var(--space-2);
1441
- color: var(--color-text-muted);
2693
+ margin: 0 var(--space-8);
2694
+ color: var(--color-text-secondary);
1442
2695
  font-weight: 400;
1443
2696
  }
1444
2697
 
@@ -1448,7 +2701,7 @@ button.parent-link:hover .parent-title {
1448
2701
 
1449
2702
  .history-text summary {
1450
2703
  width: fit-content;
1451
- font-size: var(--text-sm);
2704
+ font-size: var(--text-12);
1452
2705
  font-weight: 600;
1453
2706
  text-decoration: underline dotted var(--color-border-strong);
1454
2707
  text-underline-offset: 3px;
@@ -1457,38 +2710,36 @@ button.parent-link:hover .parent-title {
1457
2710
 
1458
2711
  .history-text-pair {
1459
2712
  display: grid;
1460
- gap: var(--space-2);
1461
- margin-top: var(--space-2);
2713
+ gap: var(--space-8);
2714
+ margin-top: var(--space-8);
1462
2715
  }
1463
2716
 
1464
2717
  .history-text-block {
1465
2718
  margin: 0;
1466
- padding: var(--space-2) var(--space-3);
1467
- border-radius: var(--radius-md);
1468
- background: var(--color-raised);
2719
+ padding: var(--space-8) var(--space-12);
2720
+ border-radius: var(--radius-6);
2721
+ background: var(--color-card);
1469
2722
  box-shadow: inset 0 0 0 1px var(--color-border);
1470
- font-size: var(--text-base);
2723
+ font-size: var(--text-13);
1471
2724
  overflow-wrap: anywhere;
1472
2725
  white-space: pre-wrap;
1473
2726
  }
1474
2727
 
1475
2728
  .history-text-block[data-side='before'] {
1476
- color: var(--color-text-muted);
2729
+ color: var(--color-text-secondary);
1477
2730
  }
1478
2731
 
1479
2732
  .history-text-block b {
1480
2733
  display: block;
1481
- margin-bottom: var(--space-1);
1482
- color: var(--color-text-muted);
1483
- font-size: var(--text-xs);
1484
- font-weight: 700;
1485
- letter-spacing: var(--tracking-caps);
1486
- text-transform: uppercase;
2734
+ margin-bottom: var(--space-4);
2735
+ color: var(--color-text-secondary);
2736
+ font-size: var(--text-11);
2737
+ font-weight: 600;
1487
2738
  }
1488
2739
 
1489
2740
  /* ===== layout ===== */
1490
2741
 
1491
- /* Top bar, notice, filter bar, board; the panel beside or over them. */
2742
+ /* Top bar, notice, toolbar, board; the dialog over them. */
1492
2743
  .app {
1493
2744
  display: grid;
1494
2745
  grid-template-rows: auto auto auto minmax(0, 1fr);
@@ -1503,10 +2754,11 @@ button.parent-link:hover .parent-title {
1503
2754
  grid-row: 1;
1504
2755
  grid-column: 1 / -1;
1505
2756
  align-items: center;
1506
- gap: var(--space-2) var(--space-3);
1507
- padding: var(--space-2) var(--space-3);
2757
+ gap: var(--space-8) var(--space-12);
2758
+ min-height: var(--topbar-height);
2759
+ padding: var(--space-8) var(--space-12);
1508
2760
  border-bottom: 1px solid var(--color-border);
1509
- background: var(--color-surface);
2761
+ background: var(--color-card);
1510
2762
  }
1511
2763
 
1512
2764
  .project-slot {
@@ -1538,49 +2790,25 @@ button.parent-link:hover .parent-title {
1538
2790
  min-width: 0;
1539
2791
  }
1540
2792
 
1541
- .filter-bar {
1542
- display: flex;
1543
- align-items: center;
1544
- gap: var(--space-2);
1545
- padding: var(--space-2) var(--space-3);
1546
- overflow-x: auto;
1547
- border-bottom: 1px solid var(--color-border);
1548
- background: var(--color-surface);
1549
- scrollbar-width: none;
1550
- }
1551
-
1552
- /* Phone: the bar scrolls sideways; search, the count and Clear come first. */
1553
- .filter-bar > * {
1554
- flex-shrink: 0;
1555
- }
1556
-
1557
- .filter-search {
1558
- order: -3;
1559
- }
1560
-
1561
- .filter-count {
1562
- order: -2;
1563
- }
1564
-
1565
- .filter-clear {
1566
- order: -1;
1567
- }
1568
-
1569
2793
  /* The height left under the bars, whatever theirs; columns scroll alone. */
1570
2794
  .board {
1571
2795
  display: flex;
1572
2796
  grid-row: 4;
1573
2797
  grid-column: 1;
1574
2798
  align-items: stretch;
1575
- gap: var(--space-2);
2799
+ gap: var(--space-10);
1576
2800
  min-height: 0;
1577
- padding: var(--space-3);
2801
+ padding: var(--space-4) var(--space-12) var(--space-12);
1578
2802
  overflow-x: auto;
1579
2803
  overflow-y: hidden;
1580
- scroll-padding: var(--space-3);
2804
+ scroll-padding: var(--space-12);
1581
2805
  scroll-snap-type: x mandatory;
1582
2806
  }
1583
2807
 
2808
+ .board > .column {
2809
+ scroll-snap-align: start;
2810
+ }
2811
+
1584
2812
  .panel-host {
1585
2813
  position: fixed;
1586
2814
  inset: 0;
@@ -1600,14 +2828,14 @@ button.parent-link:hover .parent-title {
1600
2828
  width: 100%;
1601
2829
  height: 100%;
1602
2830
  overflow: hidden;
1603
- background: var(--color-surface);
2831
+ background: var(--color-card);
1604
2832
  }
1605
2833
 
1606
2834
  @media (min-width: 40rem) {
1607
2835
  .topbar {
1608
2836
  flex-wrap: nowrap;
1609
- gap: var(--space-4);
1610
- padding: var(--space-2) var(--space-4);
2837
+ gap: var(--space-16);
2838
+ padding: var(--space-8) var(--space-16);
1611
2839
  }
1612
2840
 
1613
2841
  .project-slot {
@@ -1618,94 +2846,60 @@ button.parent-link:hover .parent-title {
1618
2846
  flex: 1 1 auto;
1619
2847
  }
1620
2848
 
1621
- .token-form {
1622
- margin-left: auto;
1623
- }
1624
-
1625
2849
  .token-input {
1626
2850
  width: 9rem;
1627
2851
  }
1628
2852
 
1629
- .topbar[data-token] .token-toggle {
1630
- display: none;
1631
- }
1632
-
1633
- .topbar[data-token='folded'] .token-form {
1634
- display: flex;
1635
- }
1636
-
1637
- .filter-bar {
1638
- flex-wrap: wrap;
1639
- padding: var(--space-2) var(--space-4);
1640
- overflow: visible;
1641
- }
1642
-
1643
- .filter-search {
1644
- flex-basis: 13rem;
1645
- }
1646
-
1647
- .filter-group {
1648
- flex-shrink: 1;
1649
- min-width: 0;
1650
- }
1651
-
1652
- .filter-search,
1653
- .filter-count,
1654
- .filter-clear {
1655
- order: 0;
2853
+ .toolbar {
2854
+ padding: var(--space-6) var(--space-16);
1656
2855
  }
1657
2856
 
1658
- .filter-count {
1659
- margin-left: auto;
2857
+ .filter-chips {
2858
+ padding: 0 var(--space-16) var(--space-6);
1660
2859
  }
1661
2860
 
1662
2861
  .board {
1663
- padding: var(--space-3) var(--space-4);
2862
+ padding: var(--space-4) var(--space-16) var(--space-16);
1664
2863
  scroll-snap-type: none;
1665
2864
  }
1666
-
1667
- .column {
1668
- flex: 1 0 var(--column-width);
1669
- }
1670
2865
  }
1671
2866
 
1672
2867
  /* Wide: the card is a dialog over the dimmed board; the decision and details stay beside the text. */
1673
2868
  @media (min-width: 56.25rem) {
1674
2869
  .panel-host {
1675
- padding: var(--space-6);
2870
+ padding: var(--space-24);
1676
2871
  }
1677
2872
 
1678
2873
  .panel {
1679
2874
  width: min(var(--dialog-width), 100%);
1680
2875
  height: min(100%, 58rem);
1681
- border: 1px solid var(--color-border);
1682
- border-radius: var(--radius-lg);
1683
- box-shadow: var(--shadow-panel);
2876
+ border-radius: var(--radius-14);
2877
+ box-shadow: var(--shadow-lg);
1684
2878
  }
1685
2879
 
1686
2880
  .panel-head {
1687
- padding-left: var(--space-6);
2881
+ padding-left: var(--space-24);
1688
2882
  }
1689
2883
 
1690
2884
  .panel-top {
1691
- padding: var(--space-5) var(--space-6) var(--space-4);
2885
+ padding: var(--space-24) var(--space-24) var(--space-16);
1692
2886
  }
1693
2887
 
1694
2888
  .panel-title {
1695
2889
  max-width: 48rem;
1696
- font-size: var(--text-2xl);
2890
+ font-size: var(--text-24);
1697
2891
  }
1698
2892
 
1699
2893
  .panel-body {
1700
2894
  grid-template-columns: minmax(0, 1fr) var(--dialog-side-width);
1701
2895
  align-items: start;
1702
- gap: var(--space-6);
1703
- padding: 0 var(--space-6) var(--space-7);
2896
+ gap: var(--space-24);
2897
+ padding: 0 var(--space-24) var(--space-24);
1704
2898
  }
1705
2899
 
1706
2900
  .panel-side {
1707
2901
  position: sticky;
1708
- top: var(--space-4);
2902
+ top: var(--space-16);
1709
2903
  order: 0;
1710
2904
  }
1711
2905
  }
@@ -1721,11 +2915,19 @@ button.parent-link:hover .parent-title {
1721
2915
  animation: panel-in var(--duration-slow) var(--ease-out);
1722
2916
  }
1723
2917
 
2918
+ .selection-bar:not([hidden]) {
2919
+ animation: bar-in var(--duration-slow) var(--ease-out);
2920
+ }
2921
+
2922
+ .skeleton {
2923
+ animation: skeleton-pulse var(--duration-loop) var(--ease-in-out) infinite;
2924
+ }
2925
+
1724
2926
  .card[data-enter] {
1725
2927
  animation: card-in var(--duration-base) var(--ease-out);
1726
2928
  }
1727
2929
 
1728
- .waiting-badge[data-enter='waiting'] {
2930
+ .waiting-pill[data-enter='waiting'] {
1729
2931
  animation: waiting-call var(--duration-loop) var(--ease-out) 1;
1730
2932
  }
1731
2933
 
@@ -1744,17 +2946,17 @@ button.parent-link:hover .parent-title {
1744
2946
  @keyframes card-in {
1745
2947
  from {
1746
2948
  opacity: 0;
1747
- transform: translateY(var(--space-1));
2949
+ transform: translateY(var(--space-4));
1748
2950
  }
1749
2951
  }
1750
2952
 
1751
2953
  @keyframes waiting-call {
1752
2954
  from {
1753
- box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-waiting) 70%, transparent);
2955
+ box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-warning) 70%, transparent);
1754
2956
  }
1755
2957
 
1756
2958
  to {
1757
- box-shadow: 0 0 0 var(--space-2) color-mix(in srgb, var(--color-waiting) 0%, transparent);
2959
+ box-shadow: 0 0 0 var(--space-8) color-mix(in srgb, var(--color-warning) 0%, transparent);
1758
2960
  }
1759
2961
  }
1760
2962
 
@@ -1770,3 +2972,17 @@ button.parent-link:hover .parent-title {
1770
2972
  transform: scale(2.75);
1771
2973
  }
1772
2974
  }
2975
+
2976
+
2977
+ @keyframes bar-in {
2978
+ from {
2979
+ opacity: 0;
2980
+ transform: translateY(var(--space-12)) scale(0.98);
2981
+ }
2982
+ }
2983
+
2984
+ @keyframes skeleton-pulse {
2985
+ 50% {
2986
+ opacity: 0.5;
2987
+ }
2988
+ }