@shapeshift-labs/frontier-loom-ui 0.1.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.
@@ -0,0 +1,3278 @@
1
+ :root {
2
+ color-scheme: dark;
3
+ --bg: #0a0b0c;
4
+ --surface: #111315;
5
+ --surface-2: #151719;
6
+ --surface-3: #1a1d20;
7
+ --line: #2b3035;
8
+ --line-strong: #434a52;
9
+ --text: #eef1f3;
10
+ --muted: #9aa2aa;
11
+ --faint: #707982;
12
+ --good: #a7b5a7;
13
+ --warn: #b9aa7c;
14
+ --bad: #bd8f87;
15
+ --review: #9ca9b8;
16
+ --accent: #c5cbd2;
17
+ --focus: #d0d5da;
18
+ }
19
+
20
+ * { box-sizing: border-box; }
21
+ html, body, #app {
22
+ min-height: 100%;
23
+ height: 100%;
24
+ }
25
+ body {
26
+ margin: 0;
27
+ overflow: hidden;
28
+ background: var(--bg);
29
+ color: var(--text);
30
+ font: 13px/1.35 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
31
+ }
32
+ button {
33
+ font: inherit;
34
+ }
35
+ .shell {
36
+ min-height: 100%;
37
+ height: 100vh;
38
+ height: 100dvh;
39
+ max-height: 100%;
40
+ display: grid;
41
+ grid-template-rows: minmax(0, 1fr);
42
+ padding: 10px;
43
+ }
44
+ h1, h2, p {
45
+ margin: 0;
46
+ letter-spacing: 0;
47
+ }
48
+ h1 {
49
+ font-size: 24px;
50
+ line-height: 1.08;
51
+ }
52
+ h2 {
53
+ font-size: 13px;
54
+ }
55
+ .muted,
56
+ small {
57
+ color: var(--muted);
58
+ }
59
+ .operator-grid {
60
+ min-width: 0;
61
+ min-height: 0;
62
+ overflow: hidden;
63
+ display: grid;
64
+ grid-template-columns: minmax(0, 1fr);
65
+ }
66
+ .panel,
67
+ .metric {
68
+ background: var(--surface);
69
+ border: 1px solid var(--line);
70
+ border-radius: 8px;
71
+ }
72
+ .panel-head {
73
+ display: flex;
74
+ align-items: center;
75
+ justify-content: space-between;
76
+ gap: 10px;
77
+ border-bottom: 1px solid var(--line);
78
+ padding: 9px 10px;
79
+ }
80
+ .panel-head span {
81
+ color: var(--muted);
82
+ font-size: 12px;
83
+ }
84
+ .operator-main {
85
+ min-width: 0;
86
+ min-height: 0;
87
+ display: grid;
88
+ grid-template-rows: auto minmax(0, 1fr);
89
+ gap: 6px;
90
+ }
91
+ .content-tabs {
92
+ min-width: 0;
93
+ display: flex;
94
+ gap: 6px;
95
+ overflow-x: auto;
96
+ scrollbar-gutter: stable;
97
+ background: transparent;
98
+ padding: 0;
99
+ }
100
+ .content-tab {
101
+ min-width: 104px;
102
+ display: grid;
103
+ gap: 1px;
104
+ border: 1px solid transparent;
105
+ border-radius: 6px;
106
+ background: transparent;
107
+ color: var(--muted);
108
+ padding: 7px 9px;
109
+ text-align: left;
110
+ cursor: pointer;
111
+ }
112
+ .content-tab span,
113
+ .content-tab small {
114
+ overflow: hidden;
115
+ text-overflow: ellipsis;
116
+ white-space: nowrap;
117
+ }
118
+ .content-tab small {
119
+ font-size: 11px;
120
+ }
121
+ .content-tab:hover,
122
+ .content-tab:focus-visible {
123
+ border-color: var(--line);
124
+ color: var(--text);
125
+ }
126
+ .content-tab:focus-visible {
127
+ outline: 2px solid var(--focus);
128
+ outline-offset: 2px;
129
+ }
130
+ .content-tab.active {
131
+ background: var(--surface-2);
132
+ border-color: var(--line-strong);
133
+ color: var(--text);
134
+ }
135
+ .data-source-strip {
136
+ min-width: 0;
137
+ overflow: hidden;
138
+ text-overflow: ellipsis;
139
+ white-space: nowrap;
140
+ color: var(--muted);
141
+ font-size: 12px;
142
+ line-height: 1.2;
143
+ padding: 0 2px;
144
+ }
145
+ .data-source-strip[data-source-kind="demo"] {
146
+ color: color-mix(in srgb, var(--warn) 68%, var(--muted));
147
+ }
148
+ .data-source-strip[data-source-kind="live"] {
149
+ color: color-mix(in srgb, var(--good) 62%, var(--muted));
150
+ }
151
+ .data-source-strip[data-source-kind="lifetime"] {
152
+ color: color-mix(in srgb, var(--accent) 42%, var(--muted));
153
+ }
154
+ .data-source-strip[data-source-kind="stopped"] {
155
+ color: color-mix(in srgb, var(--muted) 82%, var(--text));
156
+ }
157
+ .content-shell {
158
+ min-height: 0;
159
+ min-width: 0;
160
+ overflow: hidden;
161
+ overscroll-behavior: contain;
162
+ scrollbar-gutter: stable;
163
+ display: grid;
164
+ }
165
+ .metric {
166
+ min-width: 0;
167
+ display: grid;
168
+ align-content: start;
169
+ gap: 3px;
170
+ min-height: 64px;
171
+ padding: 8px 10px;
172
+ }
173
+ .metric span {
174
+ display: block;
175
+ overflow: hidden;
176
+ text-overflow: ellipsis;
177
+ white-space: nowrap;
178
+ color: var(--muted);
179
+ font-size: 11px;
180
+ text-transform: uppercase;
181
+ }
182
+ .metric b {
183
+ display: block;
184
+ overflow: hidden;
185
+ overflow-wrap: break-word;
186
+ text-overflow: ellipsis;
187
+ white-space: nowrap;
188
+ word-break: normal;
189
+ font-size: 18px;
190
+ line-height: 1.08;
191
+ }
192
+ .metric small {
193
+ min-width: 0;
194
+ overflow: hidden;
195
+ text-overflow: ellipsis;
196
+ white-space: nowrap;
197
+ color: var(--muted);
198
+ font-size: 11px;
199
+ }
200
+ .metric.good b,
201
+ .metric.warn b,
202
+ .metric.bad b { color: var(--text); }
203
+ .metric.good {
204
+ border-color: var(--line-strong);
205
+ }
206
+ .metric.warn {
207
+ border-color: var(--line-strong);
208
+ }
209
+ .metric.bad {
210
+ border-color: var(--line-strong);
211
+ }
212
+ .panel {
213
+ min-width: 0;
214
+ min-height: 0;
215
+ display: flex;
216
+ flex-direction: column;
217
+ overflow: hidden;
218
+ }
219
+ .content-shell > .panel {
220
+ min-height: 100%;
221
+ max-height: 100%;
222
+ }
223
+ .panel-head {
224
+ flex: 0 0 auto;
225
+ }
226
+ .panel > :not(.panel-head) {
227
+ min-height: 0;
228
+ flex: 1 1 auto;
229
+ }
230
+ .table-scroll {
231
+ min-height: 0;
232
+ overflow: auto;
233
+ scrollbar-gutter: stable;
234
+ flex: 1 1 auto;
235
+ }
236
+ .jobs-scroll {
237
+ max-height: 100%;
238
+ }
239
+ .table-scroll.compact {
240
+ max-height: 100%;
241
+ }
242
+ table {
243
+ width: 100%;
244
+ border-collapse: collapse;
245
+ table-layout: fixed;
246
+ }
247
+ .jobs-table {
248
+ min-width: 1120px;
249
+ }
250
+ .events-table {
251
+ min-width: 820px;
252
+ }
253
+ .sources-table {
254
+ min-width: 620px;
255
+ }
256
+ th,
257
+ td {
258
+ border-bottom: 1px solid #24292e;
259
+ padding: 6px 8px;
260
+ text-align: left;
261
+ vertical-align: top;
262
+ min-width: 0;
263
+ overflow-wrap: break-word;
264
+ word-break: normal;
265
+ }
266
+ thead th {
267
+ position: sticky;
268
+ top: 0;
269
+ z-index: 1;
270
+ background: #101214;
271
+ color: var(--muted);
272
+ font-size: 11px;
273
+ text-transform: uppercase;
274
+ }
275
+ tbody tr:hover {
276
+ background: #15191d;
277
+ }
278
+ .jobs-table th:nth-child(1) { width: 76px; }
279
+ .jobs-table th:nth-child(2) { width: 260px; }
280
+ .jobs-table th:nth-child(3) { width: 150px; }
281
+ .jobs-table th:nth-child(4) { width: 92px; }
282
+ .jobs-table th:nth-child(5) { width: 164px; }
283
+ .jobs-table th:nth-child(6) { width: 150px; }
284
+ .jobs-table th:nth-child(7) { width: 78px; }
285
+ .jobs-table th:nth-child(8) { width: 150px; }
286
+ .events-table th:nth-child(1) { width: 136px; }
287
+ .events-table th:nth-child(2) { width: 130px; }
288
+ .events-table th:nth-child(3) { width: 96px; }
289
+ .events-table th:nth-child(4) { width: 150px; }
290
+ .sources-table th {
291
+ width: 116px;
292
+ color: var(--muted);
293
+ font-weight: 600;
294
+ }
295
+ .jobs-table td:nth-child(2),
296
+ .jobs-table td:nth-child(5),
297
+ .jobs-table td:nth-child(8),
298
+ .events-table td:nth-child(4),
299
+ .events-table td:nth-child(5),
300
+ .sources-table td,
301
+ .mono,
302
+ .strong {
303
+ overflow-wrap: anywhere;
304
+ word-break: normal;
305
+ }
306
+ .mono {
307
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
308
+ font-size: 12px;
309
+ }
310
+ .strong {
311
+ display: block;
312
+ color: var(--text);
313
+ font-weight: 700;
314
+ }
315
+ .nowrap,
316
+ .lane-cell {
317
+ white-space: nowrap;
318
+ }
319
+ .lane-cell {
320
+ overflow: hidden;
321
+ text-overflow: ellipsis;
322
+ }
323
+ .path-summary {
324
+ display: grid;
325
+ gap: 2px;
326
+ }
327
+ .path-summary b {
328
+ color: var(--text);
329
+ font-variant-numeric: tabular-nums;
330
+ }
331
+ td small {
332
+ display: block;
333
+ margin-top: 2px;
334
+ }
335
+ .numeric {
336
+ text-align: right;
337
+ font-variant-numeric: tabular-nums;
338
+ }
339
+ .risk-pill {
340
+ display: inline-flex;
341
+ align-items: center;
342
+ justify-content: center;
343
+ min-width: 58px;
344
+ border-radius: 5px;
345
+ border: 1px solid var(--line);
346
+ padding: 2px 6px;
347
+ color: var(--muted);
348
+ font-size: 12px;
349
+ }
350
+ .risk-pill.failed {
351
+ color: var(--text);
352
+ border-color: var(--line-strong);
353
+ }
354
+ .risk-pill.stale {
355
+ color: var(--text);
356
+ border-color: var(--line-strong);
357
+ }
358
+ .risk-pill.review {
359
+ color: var(--text);
360
+ border-color: var(--line-strong);
361
+ }
362
+ .risk-pill.ready,
363
+ .risk-pill.done {
364
+ color: var(--muted);
365
+ }
366
+ tr.risk-failed td:first-child { color: var(--bad); }
367
+ tr.risk-stale td:first-child { color: var(--warn); }
368
+ tr.risk-review td:first-child { color: var(--review); }
369
+ .context-grid {
370
+ display: grid;
371
+ grid-template-columns: repeat(2, minmax(0, 1fr));
372
+ gap: 10px;
373
+ padding: 10px;
374
+ }
375
+ .overview-grid {
376
+ min-height: 0;
377
+ max-height: 100%;
378
+ overflow: auto;
379
+ scrollbar-gutter: stable;
380
+ display: grid;
381
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
382
+ grid-auto-rows: minmax(190px, auto);
383
+ align-content: start;
384
+ gap: 8px;
385
+ }
386
+ .overview-snapshot {
387
+ min-width: 0;
388
+ grid-column: 1 / -1;
389
+ display: grid;
390
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
391
+ gap: 8px;
392
+ }
393
+ .snapshot-tile {
394
+ min-width: 0;
395
+ border: 1px solid var(--line);
396
+ border-radius: 7px;
397
+ background: var(--surface);
398
+ padding: 9px 10px;
399
+ }
400
+ .snapshot-tile.good {
401
+ border-color: var(--line-strong);
402
+ }
403
+ .snapshot-tile.warn {
404
+ border-color: var(--line-strong);
405
+ }
406
+ .snapshot-tile.bad {
407
+ border-color: var(--line-strong);
408
+ }
409
+ .snapshot-tile span,
410
+ .snapshot-tile small {
411
+ display: block;
412
+ min-width: 0;
413
+ overflow: hidden;
414
+ text-overflow: ellipsis;
415
+ white-space: nowrap;
416
+ }
417
+ .snapshot-tile span {
418
+ color: var(--muted);
419
+ font-size: 11px;
420
+ text-transform: uppercase;
421
+ }
422
+ .snapshot-tile b {
423
+ display: block;
424
+ margin-top: 3px;
425
+ min-width: 0;
426
+ overflow: hidden;
427
+ text-overflow: ellipsis;
428
+ white-space: nowrap;
429
+ color: var(--text);
430
+ font-size: 18px;
431
+ line-height: 1.08;
432
+ font-variant-numeric: tabular-nums;
433
+ }
434
+ .snapshot-tile small {
435
+ margin-top: 4px;
436
+ color: var(--muted);
437
+ font-size: 11px;
438
+ }
439
+ .overview-grid .panel {
440
+ min-height: 0;
441
+ max-height: clamp(190px, 28vh, 282px);
442
+ overflow: hidden;
443
+ }
444
+ .overview-card-scroll {
445
+ min-width: 0;
446
+ min-height: 0;
447
+ flex: 1 1 auto;
448
+ overflow: auto;
449
+ scrollbar-gutter: stable;
450
+ }
451
+ .overview-metrics,
452
+ .audit-list,
453
+ .pressure-grid {
454
+ display: grid;
455
+ grid-template-columns: repeat(3, minmax(0, 1fr));
456
+ gap: 6px;
457
+ padding: 8px 10px 6px;
458
+ }
459
+ .compact-metric,
460
+ .audit-row,
461
+ .pressure-card {
462
+ min-width: 0;
463
+ border: 1px solid var(--line);
464
+ border-radius: 6px;
465
+ background: #0d0f10;
466
+ padding: 8px;
467
+ }
468
+ .compact-metric span,
469
+ .audit-row span,
470
+ .pressure-card span,
471
+ .pressure-card small {
472
+ display: block;
473
+ overflow: hidden;
474
+ text-overflow: ellipsis;
475
+ white-space: nowrap;
476
+ }
477
+ .compact-metric span,
478
+ .audit-row span,
479
+ .pressure-card span {
480
+ color: var(--muted);
481
+ font-size: 11px;
482
+ text-transform: uppercase;
483
+ }
484
+ .compact-metric b,
485
+ .audit-row b,
486
+ .pressure-card b {
487
+ display: block;
488
+ margin-top: 3px;
489
+ color: var(--text);
490
+ font-size: 18px;
491
+ line-height: 1.1;
492
+ font-variant-numeric: tabular-nums;
493
+ }
494
+ .pressure-card small {
495
+ margin-top: 3px;
496
+ color: var(--muted);
497
+ font-size: 11px;
498
+ }
499
+ .overview-card-scroll.pressure-panel {
500
+ display: grid;
501
+ align-content: start;
502
+ gap: 8px;
503
+ padding: 2px 0 10px;
504
+ }
505
+ .pressure-panel .metric-bars {
506
+ padding: 0 10px;
507
+ }
508
+ .reason-list {
509
+ display: grid;
510
+ gap: 5px;
511
+ padding: 0 10px 10px;
512
+ }
513
+ .reason-row {
514
+ min-width: 0;
515
+ display: grid;
516
+ grid-template-columns: minmax(0, 1fr) auto;
517
+ gap: 8px;
518
+ align-items: center;
519
+ border-top: 1px solid #22272c;
520
+ padding-top: 6px;
521
+ }
522
+ .reason-row span {
523
+ min-width: 0;
524
+ overflow: hidden;
525
+ text-overflow: ellipsis;
526
+ white-space: nowrap;
527
+ color: var(--muted);
528
+ }
529
+ .reason-row b {
530
+ font-variant-numeric: tabular-nums;
531
+ }
532
+ .metrics-layout {
533
+ min-height: 0;
534
+ max-height: 100%;
535
+ overflow: auto;
536
+ scrollbar-gutter: stable;
537
+ display: grid;
538
+ grid-template-columns: repeat(2, minmax(0, 1fr));
539
+ align-content: start;
540
+ gap: 0 14px;
541
+ padding: 2px 10px 12px;
542
+ }
543
+ .work-layout,
544
+ .agent-work-layout,
545
+ .action-layout,
546
+ .performance-layout,
547
+ .history-layout,
548
+ .testing-layout,
549
+ .efficiency-layout,
550
+ .merge-layout,
551
+ .evidence-layout {
552
+ min-height: 0;
553
+ max-height: 100%;
554
+ overflow: auto;
555
+ scrollbar-gutter: stable;
556
+ display: grid;
557
+ align-content: start;
558
+ gap: 10px;
559
+ padding: 10px;
560
+ }
561
+ .agent-work-layout {
562
+ gap: 0;
563
+ padding: 8px;
564
+ overflow: hidden;
565
+ grid-template-rows: minmax(0, 1fr);
566
+ }
567
+ .goal-card {
568
+ min-width: 0;
569
+ display: grid;
570
+ grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
571
+ gap: 18px;
572
+ align-items: start;
573
+ border: 1px solid var(--line);
574
+ border-radius: 7px;
575
+ background: #0d0f10;
576
+ padding: 16px;
577
+ }
578
+ .goal-card span,
579
+ .work-kpi span,
580
+ .action-copy span,
581
+ .merge-node span {
582
+ color: var(--muted);
583
+ font-size: 11px;
584
+ text-transform: uppercase;
585
+ }
586
+ .goal-card h3,
587
+ .action-copy h4 {
588
+ margin: 3px 0;
589
+ font-size: 22px;
590
+ line-height: 1.15;
591
+ }
592
+ .goal-card p,
593
+ .action-copy p,
594
+ .action-intro p {
595
+ margin: 0;
596
+ color: var(--muted);
597
+ line-height: 1.35;
598
+ }
599
+ .goal-progress {
600
+ min-width: 0;
601
+ display: grid;
602
+ gap: 8px;
603
+ }
604
+ .goal-progress-head {
605
+ min-width: 0;
606
+ display: flex;
607
+ justify-content: space-between;
608
+ gap: 10px;
609
+ align-items: baseline;
610
+ }
611
+ .goal-progress-head b {
612
+ font-size: 32px;
613
+ line-height: 1;
614
+ font-variant-numeric: tabular-nums;
615
+ }
616
+ .goal-progress-head span {
617
+ min-width: 0;
618
+ overflow: hidden;
619
+ text-align: right;
620
+ text-overflow: ellipsis;
621
+ white-space: nowrap;
622
+ text-transform: none;
623
+ }
624
+ .goal-progress-track {
625
+ height: 16px;
626
+ border: 1px solid var(--line);
627
+ border-radius: 999px;
628
+ background: #08090a;
629
+ overflow: hidden;
630
+ }
631
+ .goal-progress-fill {
632
+ display: block;
633
+ height: 100%;
634
+ border-radius: inherit;
635
+ background: var(--accent);
636
+ }
637
+ .goal-progress-fill.good { background: var(--good); }
638
+ .goal-progress-fill.warn { background: var(--warn); }
639
+ .goal-progress-fill.bad { background: var(--bad); }
640
+ .goal-status {
641
+ text-align: right;
642
+ }
643
+ .goal-status b {
644
+ display: block;
645
+ font-size: 18px;
646
+ }
647
+ .goal-status small {
648
+ color: var(--muted);
649
+ }
650
+ .work-kpis,
651
+ .performance-summary,
652
+ .testing-summary,
653
+ .efficiency-summary {
654
+ min-width: 0;
655
+ display: grid;
656
+ grid-template-columns: repeat(5, minmax(0, 1fr));
657
+ gap: 8px;
658
+ }
659
+ .work-kpi {
660
+ min-width: 0;
661
+ border: 1px solid var(--line);
662
+ border-radius: 6px;
663
+ background: #0d0f10;
664
+ padding: 9px;
665
+ }
666
+ .work-kpi b {
667
+ display: block;
668
+ margin-top: 3px;
669
+ overflow: hidden;
670
+ text-overflow: ellipsis;
671
+ white-space: nowrap;
672
+ color: var(--text);
673
+ font-size: 20px;
674
+ line-height: 1.08;
675
+ font-variant-numeric: tabular-nums;
676
+ }
677
+ .work-kpi small {
678
+ display: block;
679
+ margin-top: 3px;
680
+ overflow: hidden;
681
+ text-overflow: ellipsis;
682
+ white-space: nowrap;
683
+ color: var(--muted);
684
+ }
685
+ .work-section {
686
+ min-width: 0;
687
+ border-top: 1px solid var(--line);
688
+ padding-top: 10px;
689
+ }
690
+ .work-contribution-section {
691
+ border-top: 0;
692
+ padding-top: 0;
693
+ }
694
+ .performance-layout {
695
+ grid-template-columns: minmax(0, 1fr);
696
+ }
697
+ .performance-chart-section .chart-grid {
698
+ margin-top: 8px;
699
+ }
700
+ .performance-split {
701
+ min-width: 0;
702
+ display: grid;
703
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
704
+ gap: 12px;
705
+ }
706
+ .performance-split > div {
707
+ min-width: 0;
708
+ }
709
+ .optimization-signal-grid {
710
+ min-width: 0;
711
+ display: grid;
712
+ grid-template-columns: repeat(5, minmax(0, 1fr));
713
+ gap: 8px;
714
+ margin-top: 8px;
715
+ }
716
+ .optimization-signal {
717
+ min-width: 0;
718
+ border: 1px solid var(--line);
719
+ border-radius: 6px;
720
+ background: #0d0f10;
721
+ padding: 9px;
722
+ }
723
+ .optimization-signal.good,
724
+ .optimization-signal.warn,
725
+ .optimization-signal.bad,
726
+ .optimization-signal.review {
727
+ border-color: var(--line-strong);
728
+ }
729
+ .optimization-signal span,
730
+ .optimization-signal b,
731
+ .optimization-signal small {
732
+ display: block;
733
+ min-width: 0;
734
+ overflow: hidden;
735
+ text-overflow: ellipsis;
736
+ white-space: nowrap;
737
+ }
738
+ .optimization-signal span {
739
+ color: var(--muted);
740
+ font-size: 11px;
741
+ text-transform: uppercase;
742
+ }
743
+ .optimization-signal b {
744
+ margin-top: 3px;
745
+ color: var(--text);
746
+ font-size: 20px;
747
+ line-height: 1.08;
748
+ font-variant-numeric: tabular-nums;
749
+ }
750
+ .optimization-signal small {
751
+ margin-top: 4px;
752
+ color: var(--muted);
753
+ }
754
+ .optimization-behavior-section {
755
+ display: grid;
756
+ gap: 8px;
757
+ }
758
+ .optimization-behavior-grid {
759
+ min-width: 0;
760
+ display: grid;
761
+ grid-template-columns: repeat(4, minmax(0, 1fr));
762
+ gap: 8px;
763
+ }
764
+ .optimization-behavior-card,
765
+ .optimization-behavior-row {
766
+ min-width: 0;
767
+ border: 1px solid var(--line);
768
+ border-radius: 6px;
769
+ background: #0d0f10;
770
+ }
771
+ .optimization-behavior-card {
772
+ padding: 9px;
773
+ }
774
+ .optimization-behavior-card.good,
775
+ .optimization-behavior-card.warn,
776
+ .optimization-behavior-card.bad,
777
+ .optimization-behavior-card.review,
778
+ .optimization-behavior-row.good,
779
+ .optimization-behavior-row.warn,
780
+ .optimization-behavior-row.bad,
781
+ .optimization-behavior-row.review {
782
+ border-color: var(--line-strong);
783
+ }
784
+ .optimization-behavior-card span,
785
+ .optimization-behavior-card b,
786
+ .optimization-behavior-card small {
787
+ display: block;
788
+ min-width: 0;
789
+ overflow: hidden;
790
+ text-overflow: ellipsis;
791
+ white-space: nowrap;
792
+ }
793
+ .optimization-behavior-card span {
794
+ color: var(--muted);
795
+ font-size: 11px;
796
+ text-transform: uppercase;
797
+ }
798
+ .optimization-behavior-card b {
799
+ margin-top: 3px;
800
+ color: var(--text);
801
+ font-size: 20px;
802
+ line-height: 1.08;
803
+ font-variant-numeric: tabular-nums;
804
+ }
805
+ .optimization-behavior-card small {
806
+ margin-top: 4px;
807
+ color: var(--muted);
808
+ }
809
+ .optimization-behavior-list {
810
+ min-width: 0;
811
+ display: grid;
812
+ gap: 6px;
813
+ }
814
+ .optimization-behavior-row {
815
+ display: grid;
816
+ grid-template-columns: minmax(0, 1fr) minmax(72px, auto);
817
+ gap: 10px;
818
+ align-items: center;
819
+ padding: 8px 9px;
820
+ }
821
+ .optimization-behavior-row div,
822
+ .optimization-behavior-row b,
823
+ .optimization-behavior-row small,
824
+ .optimization-behavior-row span {
825
+ min-width: 0;
826
+ }
827
+ .optimization-behavior-row b,
828
+ .optimization-behavior-row small {
829
+ display: block;
830
+ overflow: hidden;
831
+ text-overflow: ellipsis;
832
+ white-space: nowrap;
833
+ }
834
+ .optimization-behavior-row b {
835
+ color: var(--text);
836
+ }
837
+ .optimization-behavior-row small {
838
+ margin-top: 2px;
839
+ color: var(--muted);
840
+ }
841
+ .optimization-behavior-row > span {
842
+ color: var(--text);
843
+ font-variant-numeric: tabular-nums;
844
+ text-align: right;
845
+ white-space: nowrap;
846
+ }
847
+ .history-layout,
848
+ .testing-layout {
849
+ grid-template-columns: minmax(0, 1fr);
850
+ }
851
+ .history-graph-section {
852
+ border-top: 0;
853
+ padding-top: 0;
854
+ }
855
+ .testing-notice {
856
+ min-width: 0;
857
+ border: 1px solid var(--line);
858
+ border-radius: 6px;
859
+ background: #0d0f10;
860
+ color: var(--muted);
861
+ padding: 8px 10px;
862
+ }
863
+ .testing-notice.warn {
864
+ border-color: var(--line-strong);
865
+ color: var(--text);
866
+ }
867
+ .history-track {
868
+ position: relative;
869
+ min-width: 0;
870
+ display: flex;
871
+ gap: 8px;
872
+ align-items: stretch;
873
+ border: 1px solid var(--line);
874
+ border-radius: 7px;
875
+ background: #0d0f10;
876
+ padding: 12px;
877
+ overflow-x: auto;
878
+ scrollbar-gutter: stable;
879
+ }
880
+ .history-track::before {
881
+ content: "";
882
+ position: absolute;
883
+ left: 22px;
884
+ right: 22px;
885
+ top: 28px;
886
+ border-top: 1px solid var(--line-strong);
887
+ }
888
+ .history-node {
889
+ position: relative;
890
+ z-index: 1;
891
+ min-width: 136px;
892
+ flex: 1 0 136px;
893
+ display: grid;
894
+ grid-template-rows: 18px auto auto minmax(18px, auto);
895
+ gap: 3px;
896
+ align-content: start;
897
+ }
898
+ .history-dot {
899
+ width: 13px;
900
+ height: 13px;
901
+ border: 2px solid var(--surface);
902
+ border-radius: 999px;
903
+ background: var(--muted);
904
+ }
905
+ .history-node.good .history-dot { background: var(--good); }
906
+ .history-node.warn .history-dot { background: var(--warn); }
907
+ .history-node.bad .history-dot { background: var(--bad); }
908
+ .history-node b,
909
+ .history-node small,
910
+ .history-node em {
911
+ min-width: 0;
912
+ overflow: hidden;
913
+ text-overflow: ellipsis;
914
+ white-space: nowrap;
915
+ }
916
+ .history-node b {
917
+ margin-top: 2px;
918
+ }
919
+ .history-node small,
920
+ .history-node em {
921
+ color: var(--muted);
922
+ font-size: 12px;
923
+ font-style: normal;
924
+ }
925
+ .git-history-viewport {
926
+ min-width: 0;
927
+ overflow: auto;
928
+ scrollbar-gutter: stable;
929
+ border: 1px solid var(--line);
930
+ border-radius: 7px;
931
+ background: #0d0f10;
932
+ }
933
+ .git-history-grid {
934
+ min-width: 760px;
935
+ display: grid;
936
+ grid-template-columns: var(--history-graph-width) minmax(0, 1fr);
937
+ align-items: start;
938
+ }
939
+ .git-graph-canvas {
940
+ width: var(--history-graph-width);
941
+ height: var(--history-graph-height);
942
+ min-height: var(--history-row-height);
943
+ border-right: 1px solid var(--line);
944
+ background: #090a0b;
945
+ }
946
+ .git-graph-svg {
947
+ display: block;
948
+ width: var(--history-graph-width);
949
+ height: var(--history-graph-height);
950
+ }
951
+ .git-graph-rail,
952
+ .git-graph-branch,
953
+ .git-graph-merge {
954
+ fill: none;
955
+ stroke-width: 2;
956
+ stroke-linecap: round;
957
+ }
958
+ .git-graph-rail {
959
+ opacity: .36;
960
+ }
961
+ .git-graph-branch {
962
+ opacity: .55;
963
+ }
964
+ .git-graph-merge {
965
+ opacity: .82;
966
+ }
967
+ .git-graph-node {
968
+ fill: #0d0f10;
969
+ stroke-width: 3;
970
+ cursor: default;
971
+ }
972
+ .git-graph-node.trunk {
973
+ fill: #15181b;
974
+ stroke-width: 2;
975
+ }
976
+ .git-graph-node.good {
977
+ fill: #18251d;
978
+ }
979
+ .git-graph-node.warn {
980
+ fill: #282516;
981
+ }
982
+ .git-graph-node.bad {
983
+ fill: #28191b;
984
+ }
985
+ .git-history-rows {
986
+ min-width: 0;
987
+ display: grid;
988
+ }
989
+ .git-history-row {
990
+ min-width: 0;
991
+ width: 100%;
992
+ display: grid;
993
+ grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
994
+ gap: 14px;
995
+ align-items: center;
996
+ border: 0;
997
+ border-bottom: 1px solid #22272c;
998
+ background: transparent;
999
+ color: var(--text);
1000
+ padding: 7px 10px;
1001
+ text-align: left;
1002
+ cursor: pointer;
1003
+ }
1004
+ .git-history-row:last-child {
1005
+ border-bottom: 0;
1006
+ }
1007
+ .git-history-row:hover,
1008
+ .git-history-row:focus-visible {
1009
+ background: #121518;
1010
+ }
1011
+ .git-history-row:focus-visible {
1012
+ outline: 2px solid var(--focus);
1013
+ outline-offset: -2px;
1014
+ }
1015
+ .git-history-row b,
1016
+ .git-history-row small,
1017
+ .git-history-row span {
1018
+ min-width: 0;
1019
+ overflow: hidden;
1020
+ text-overflow: ellipsis;
1021
+ white-space: nowrap;
1022
+ }
1023
+ .git-history-row small {
1024
+ display: block;
1025
+ margin-top: 2px;
1026
+ color: var(--muted);
1027
+ }
1028
+ .git-history-row span {
1029
+ color: var(--muted);
1030
+ font-size: 12px;
1031
+ text-align: right;
1032
+ }
1033
+ .git-history-row.good b {
1034
+ color: var(--text);
1035
+ }
1036
+ .git-history-row.warn b,
1037
+ .git-history-row.bad b {
1038
+ color: var(--text);
1039
+ }
1040
+ .history-branches,
1041
+ .history-events,
1042
+ .testing-rows {
1043
+ min-width: 0;
1044
+ display: grid;
1045
+ gap: 7px;
1046
+ }
1047
+ .history-branch,
1048
+ .history-event,
1049
+ .testing-row {
1050
+ min-width: 0;
1051
+ display: grid;
1052
+ gap: 8px;
1053
+ align-items: center;
1054
+ border: 1px solid var(--line);
1055
+ border-radius: 6px;
1056
+ background: #0d0f10;
1057
+ padding: 8px 9px;
1058
+ }
1059
+ .history-branch {
1060
+ grid-template-columns: 18px minmax(0, 1fr) minmax(72px, auto);
1061
+ }
1062
+ .testing-row {
1063
+ grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
1064
+ column-gap: 16px;
1065
+ align-items: start;
1066
+ }
1067
+ .testing-row-copy {
1068
+ min-width: 0;
1069
+ display: grid;
1070
+ gap: 5px;
1071
+ }
1072
+ .testing-row-meta {
1073
+ min-width: 0;
1074
+ display: flex;
1075
+ flex-wrap: wrap;
1076
+ gap: 5px 7px;
1077
+ }
1078
+ .testing-row-meta small {
1079
+ min-width: 0;
1080
+ max-width: 100%;
1081
+ display: inline-flex;
1082
+ border: 1px solid var(--line);
1083
+ border-radius: 999px;
1084
+ padding: 2px 7px;
1085
+ background: #090a0b;
1086
+ }
1087
+ .history-branch-rail {
1088
+ width: 10px;
1089
+ height: 100%;
1090
+ min-height: 28px;
1091
+ border-radius: 999px;
1092
+ background: #252a2f;
1093
+ }
1094
+ .history-branch.ready .history-branch-rail,
1095
+ .history-branch.done .history-branch-rail { background: var(--good); }
1096
+ .history-branch.review .history-branch-rail,
1097
+ .history-branch.stale .history-branch-rail { background: var(--warn); }
1098
+ .history-branch.failed .history-branch-rail { background: var(--bad); }
1099
+ .history-branch b,
1100
+ .history-branch small,
1101
+ .history-branch span,
1102
+ .history-event b,
1103
+ .history-event small,
1104
+ .history-event time,
1105
+ .testing-row b,
1106
+ .testing-row small,
1107
+ .testing-row span {
1108
+ min-width: 0;
1109
+ overflow: hidden;
1110
+ text-overflow: ellipsis;
1111
+ white-space: nowrap;
1112
+ }
1113
+ .history-branch small,
1114
+ .history-event small,
1115
+ .history-event time,
1116
+ .testing-row small {
1117
+ color: var(--muted);
1118
+ }
1119
+ .history-branch > span:last-child,
1120
+ .testing-row > span {
1121
+ text-align: right;
1122
+ font-variant-numeric: tabular-nums;
1123
+ }
1124
+ .history-split,
1125
+ .testing-split {
1126
+ min-width: 0;
1127
+ display: grid;
1128
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
1129
+ gap: 12px;
1130
+ }
1131
+ .history-split > div,
1132
+ .testing-split > div {
1133
+ min-width: 0;
1134
+ }
1135
+ .history-event {
1136
+ grid-template-columns: 142px minmax(0, 1fr);
1137
+ }
1138
+ .history-event > div {
1139
+ min-width: 0;
1140
+ display: flex;
1141
+ align-items: baseline;
1142
+ gap: 10px;
1143
+ }
1144
+ .history-event > div b {
1145
+ flex: 0 0 auto;
1146
+ }
1147
+ .history-event > div small {
1148
+ flex: 1 1 auto;
1149
+ }
1150
+ .testing-evidence-grid {
1151
+ min-width: 0;
1152
+ display: grid;
1153
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1154
+ gap: 8px;
1155
+ }
1156
+ .testing-evidence-card {
1157
+ min-width: 0;
1158
+ border: 1px solid var(--line);
1159
+ border-radius: 6px;
1160
+ background: #0d0f10;
1161
+ padding: 8px;
1162
+ }
1163
+ .testing-evidence-card span,
1164
+ .testing-evidence-card b,
1165
+ .testing-evidence-card small {
1166
+ display: block;
1167
+ min-width: 0;
1168
+ overflow: hidden;
1169
+ text-overflow: ellipsis;
1170
+ white-space: nowrap;
1171
+ }
1172
+ .testing-evidence-card span {
1173
+ color: var(--muted);
1174
+ font-size: 11px;
1175
+ text-transform: uppercase;
1176
+ }
1177
+ .testing-evidence-card b {
1178
+ margin-top: 3px;
1179
+ color: var(--text);
1180
+ font-size: 18px;
1181
+ font-variant-numeric: tabular-nums;
1182
+ }
1183
+ .testing-evidence-card small {
1184
+ margin-top: 4px;
1185
+ color: var(--muted);
1186
+ }
1187
+ .work-cost-metrics {
1188
+ min-width: 0;
1189
+ display: grid;
1190
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1191
+ gap: 8px;
1192
+ }
1193
+ .cost-metric {
1194
+ min-width: 0;
1195
+ border: 1px solid var(--line);
1196
+ border-radius: 6px;
1197
+ background: #0d0f10;
1198
+ padding: 10px;
1199
+ }
1200
+ .cost-metric span,
1201
+ .cost-metric small {
1202
+ display: block;
1203
+ min-width: 0;
1204
+ overflow: hidden;
1205
+ text-overflow: ellipsis;
1206
+ white-space: nowrap;
1207
+ }
1208
+ .cost-metric span {
1209
+ color: var(--muted);
1210
+ font-size: 11px;
1211
+ text-transform: uppercase;
1212
+ }
1213
+ .cost-metric b {
1214
+ display: block;
1215
+ margin-top: 3px;
1216
+ overflow: hidden;
1217
+ text-overflow: ellipsis;
1218
+ white-space: nowrap;
1219
+ color: var(--text);
1220
+ font-size: 22px;
1221
+ line-height: 1.08;
1222
+ font-variant-numeric: tabular-nums;
1223
+ }
1224
+ .cost-metric small {
1225
+ margin-top: 4px;
1226
+ color: var(--muted);
1227
+ }
1228
+ .agent-roster-panel {
1229
+ --agent-roster-columns: minmax(128px, .72fr) minmax(300px, 2.1fr) minmax(96px, .54fr) minmax(88px, .5fr) minmax(96px, .54fr) minmax(168px, .92fr);
1230
+ min-width: 0;
1231
+ min-height: 0;
1232
+ max-height: 100%;
1233
+ display: grid;
1234
+ grid-template-rows: auto minmax(0, 1fr);
1235
+ align-content: stretch;
1236
+ border: 1px solid var(--line);
1237
+ border-radius: 7px;
1238
+ background: #0d0f10;
1239
+ overflow: hidden;
1240
+ }
1241
+ .agent-roster-head {
1242
+ min-width: 0;
1243
+ display: grid;
1244
+ grid-template-columns: var(--agent-roster-columns);
1245
+ gap: 10px;
1246
+ align-items: center;
1247
+ border-bottom: 1px solid var(--line);
1248
+ background: #101214;
1249
+ padding: 7px 10px;
1250
+ }
1251
+ .agent-roster-head span {
1252
+ min-width: 0;
1253
+ overflow: hidden;
1254
+ text-overflow: ellipsis;
1255
+ white-space: nowrap;
1256
+ color: var(--muted);
1257
+ font-size: 10px;
1258
+ font-weight: 700;
1259
+ letter-spacing: 0;
1260
+ text-transform: uppercase;
1261
+ }
1262
+ .agent-roster-list {
1263
+ min-width: 0;
1264
+ min-height: 0;
1265
+ display: grid;
1266
+ align-content: start;
1267
+ overflow: auto;
1268
+ overscroll-behavior: contain;
1269
+ scrollbar-gutter: stable;
1270
+ }
1271
+ .agent-roster-empty {
1272
+ margin: 0;
1273
+ min-height: 96px;
1274
+ display: grid;
1275
+ align-items: center;
1276
+ color: var(--muted);
1277
+ padding: 18px 14px;
1278
+ }
1279
+ .agent-worker-card {
1280
+ min-width: 0;
1281
+ display: grid;
1282
+ grid-template-columns: var(--agent-roster-columns);
1283
+ gap: 10px;
1284
+ align-items: center;
1285
+ border-bottom: 1px solid var(--line);
1286
+ background: #0d0f10;
1287
+ padding: 7px 10px;
1288
+ }
1289
+ .agent-worker-card:last-child {
1290
+ border-bottom: 0;
1291
+ }
1292
+ .agent-worker-card:hover,
1293
+ .agent-worker-card:focus-visible {
1294
+ background: #111315;
1295
+ }
1296
+ .agent-worker-card:focus-visible {
1297
+ outline: 2px solid var(--focus);
1298
+ outline-offset: -2px;
1299
+ }
1300
+ .agent-cell {
1301
+ min-width: 0;
1302
+ display: grid;
1303
+ gap: 2px;
1304
+ }
1305
+ .agent-cell-agent {
1306
+ grid-template-columns: auto minmax(0, 1fr);
1307
+ align-items: center;
1308
+ gap: 7px;
1309
+ }
1310
+ .agent-cell-agent > div {
1311
+ min-width: 0;
1312
+ display: grid;
1313
+ align-content: center;
1314
+ gap: 0;
1315
+ }
1316
+ .agent-status-dot {
1317
+ width: 7px;
1318
+ height: 7px;
1319
+ border-radius: 999px;
1320
+ background: var(--agent-color, var(--accent));
1321
+ }
1322
+ .agent-cell-agent b,
1323
+ .agent-cell-runtime b,
1324
+ .agent-cell-cost b {
1325
+ min-width: 0;
1326
+ overflow: hidden;
1327
+ text-overflow: ellipsis;
1328
+ white-space: nowrap;
1329
+ color: var(--text);
1330
+ font-size: 13px;
1331
+ line-height: 1.2;
1332
+ }
1333
+ .agent-cell-agent small,
1334
+ .agent-cell-runtime small,
1335
+ .agent-cell-cost small,
1336
+ .agent-cell-files small,
1337
+ .agent-overflow-note,
1338
+ .agent-file-empty {
1339
+ min-width: 0;
1340
+ overflow: hidden;
1341
+ text-overflow: ellipsis;
1342
+ white-space: nowrap;
1343
+ color: var(--muted);
1344
+ font-size: 11px;
1345
+ line-height: 1.2;
1346
+ }
1347
+ .agent-model-pill {
1348
+ min-width: 0;
1349
+ max-width: 100%;
1350
+ display: inline-flex;
1351
+ align-items: center;
1352
+ gap: 6px;
1353
+ border: 1px solid var(--line);
1354
+ border-radius: 999px;
1355
+ background: #090a0b;
1356
+ color: var(--muted);
1357
+ padding: 2px 6px;
1358
+ font-size: 11px;
1359
+ line-height: 1.2;
1360
+ white-space: nowrap;
1361
+ overflow: hidden;
1362
+ text-overflow: ellipsis;
1363
+ }
1364
+ .agent-model-pill,
1365
+ .agent-model-pill span {
1366
+ min-width: 0;
1367
+ overflow: hidden;
1368
+ text-overflow: ellipsis;
1369
+ white-space: nowrap;
1370
+ }
1371
+ .agent-model-pill {
1372
+ justify-self: start;
1373
+ color: var(--muted);
1374
+ }
1375
+ .agent-task-list {
1376
+ min-width: 0;
1377
+ display: grid;
1378
+ gap: 2px;
1379
+ }
1380
+ .agent-task-row {
1381
+ min-width: 0;
1382
+ display: grid;
1383
+ grid-template-columns: minmax(54px, auto) minmax(0, 1fr) minmax(50px, auto);
1384
+ gap: 7px;
1385
+ align-items: center;
1386
+ border: 1px solid transparent;
1387
+ border-radius: 5px;
1388
+ background: transparent;
1389
+ color: var(--text);
1390
+ padding: 2px 4px;
1391
+ text-align: left;
1392
+ cursor: pointer;
1393
+ }
1394
+ .agent-task-row:hover,
1395
+ .agent-task-row:focus-visible {
1396
+ background: #111315;
1397
+ border-color: var(--line-strong);
1398
+ }
1399
+ .agent-task-row:focus-visible {
1400
+ outline: 2px solid var(--focus);
1401
+ outline-offset: 2px;
1402
+ }
1403
+ .agent-task-row code {
1404
+ color: var(--muted);
1405
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
1406
+ font-size: 11px;
1407
+ }
1408
+ .agent-task-row span {
1409
+ min-width: 0;
1410
+ overflow: hidden;
1411
+ text-overflow: ellipsis;
1412
+ white-space: nowrap;
1413
+ }
1414
+ .agent-task-row small {
1415
+ min-width: 0;
1416
+ overflow: hidden;
1417
+ text-align: right;
1418
+ text-overflow: ellipsis;
1419
+ white-space: nowrap;
1420
+ color: var(--muted);
1421
+ font-size: 11px;
1422
+ font-variant-numeric: tabular-nums;
1423
+ }
1424
+ .agent-cell-runtime b,
1425
+ .agent-cell-runtime small,
1426
+ .agent-cell-cost b,
1427
+ .agent-cell-cost small {
1428
+ font-variant-numeric: tabular-nums;
1429
+ }
1430
+ .agent-file-list {
1431
+ min-width: 0;
1432
+ display: flex;
1433
+ align-items: center;
1434
+ gap: 4px;
1435
+ }
1436
+ .agent-file-tag {
1437
+ flex: 0 1 106px;
1438
+ width: auto;
1439
+ max-width: 118px;
1440
+ min-width: 0;
1441
+ border-radius: 5px;
1442
+ padding: 3px 6px;
1443
+ overflow: hidden;
1444
+ overflow-wrap: normal;
1445
+ text-overflow: ellipsis;
1446
+ white-space: nowrap;
1447
+ }
1448
+ .agent-file-more {
1449
+ flex: 0 0 auto;
1450
+ border: 1px solid var(--line);
1451
+ border-radius: 5px;
1452
+ background: #090a0b;
1453
+ color: var(--muted);
1454
+ padding: 3px 6px;
1455
+ font-size: 11px;
1456
+ }
1457
+ .task-board-layout {
1458
+ min-width: 0;
1459
+ min-height: 0;
1460
+ max-height: 100%;
1461
+ display: grid;
1462
+ grid-template-rows: minmax(0, 1fr);
1463
+ overflow: hidden;
1464
+ }
1465
+ .task-board-scroll {
1466
+ min-width: 0;
1467
+ min-height: 0;
1468
+ display: grid;
1469
+ grid-auto-flow: column;
1470
+ grid-auto-columns: minmax(270px, 310px);
1471
+ gap: 10px;
1472
+ overflow-x: auto;
1473
+ overflow-y: hidden;
1474
+ overscroll-behavior-x: contain;
1475
+ overscroll-behavior-y: auto;
1476
+ scrollbar-gutter: stable;
1477
+ padding: 10px;
1478
+ }
1479
+ .task-board-column {
1480
+ min-width: 0;
1481
+ min-height: 0;
1482
+ max-height: 100%;
1483
+ display: grid;
1484
+ grid-template-rows: auto minmax(0, 1fr);
1485
+ border: 1px solid var(--line);
1486
+ border-radius: 8px;
1487
+ background: #0d0f10;
1488
+ overflow: hidden;
1489
+ }
1490
+ .task-column-head {
1491
+ min-width: 0;
1492
+ display: grid;
1493
+ grid-template-columns: minmax(0, 1fr) auto;
1494
+ gap: 8px;
1495
+ align-items: start;
1496
+ border-bottom: 1px solid var(--line);
1497
+ padding: 10px;
1498
+ }
1499
+ .task-column-head h3 {
1500
+ margin: 0;
1501
+ font-size: 13px;
1502
+ line-height: 1.15;
1503
+ }
1504
+ .task-column-head span {
1505
+ display: block;
1506
+ margin-top: 2px;
1507
+ overflow: hidden;
1508
+ text-overflow: ellipsis;
1509
+ white-space: nowrap;
1510
+ color: var(--muted);
1511
+ font-size: 11px;
1512
+ }
1513
+ .task-column-head b {
1514
+ min-width: 28px;
1515
+ border: 1px solid var(--line);
1516
+ border-radius: 999px;
1517
+ padding: 2px 7px;
1518
+ text-align: center;
1519
+ font-size: 12px;
1520
+ font-variant-numeric: tabular-nums;
1521
+ }
1522
+ .task-column-body {
1523
+ min-width: 0;
1524
+ min-height: 0;
1525
+ display: grid;
1526
+ align-content: start;
1527
+ gap: 8px;
1528
+ overflow-y: auto;
1529
+ overflow-x: hidden;
1530
+ overscroll-behavior-y: contain;
1531
+ overscroll-behavior-x: auto;
1532
+ touch-action: pan-x pan-y;
1533
+ scrollbar-gutter: stable;
1534
+ padding: 8px;
1535
+ }
1536
+ .task-card {
1537
+ width: 100%;
1538
+ min-width: 0;
1539
+ display: grid;
1540
+ gap: 5px;
1541
+ border: 1px solid var(--line);
1542
+ border-radius: 7px;
1543
+ background: var(--surface);
1544
+ color: var(--text);
1545
+ padding: 9px;
1546
+ text-align: left;
1547
+ cursor: pointer;
1548
+ }
1549
+ .task-card:hover,
1550
+ .task-card:focus-visible {
1551
+ border-color: var(--line-strong);
1552
+ }
1553
+ .task-card:focus-visible {
1554
+ outline: 2px solid var(--focus);
1555
+ outline-offset: 2px;
1556
+ }
1557
+ .task-card-top {
1558
+ min-width: 0;
1559
+ display: flex;
1560
+ justify-content: space-between;
1561
+ gap: 8px;
1562
+ align-items: center;
1563
+ }
1564
+ .task-ticket {
1565
+ min-width: 0;
1566
+ overflow: hidden;
1567
+ text-overflow: ellipsis;
1568
+ border: 1px solid var(--line);
1569
+ border-radius: 5px;
1570
+ background: #090a0b;
1571
+ color: var(--muted);
1572
+ padding: 2px 5px;
1573
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
1574
+ font-size: 11px;
1575
+ }
1576
+ .task-id-copy,
1577
+ .task-dialog-actions button {
1578
+ border: 1px solid var(--line);
1579
+ border-radius: 6px;
1580
+ background: var(--surface-2);
1581
+ color: var(--text);
1582
+ padding: 5px 8px;
1583
+ cursor: pointer;
1584
+ font: inherit;
1585
+ font-size: 11px;
1586
+ }
1587
+ .task-id-copy:hover,
1588
+ .task-id-copy:focus-visible,
1589
+ .task-dialog-actions button:hover,
1590
+ .task-dialog-actions button:focus-visible {
1591
+ border-color: var(--line-strong);
1592
+ }
1593
+ .task-id-copy[data-copy-state="copied"],
1594
+ .action-code button[data-copy-state="copied"] {
1595
+ border-color: var(--line-strong);
1596
+ color: var(--text);
1597
+ }
1598
+ .task-id-copy[data-copy-state="failed"],
1599
+ .action-code button[data-copy-state="failed"] {
1600
+ border-color: var(--bad);
1601
+ color: var(--text);
1602
+ }
1603
+ .task-card-kicker,
1604
+ .task-card small,
1605
+ .task-card-foot {
1606
+ color: var(--muted);
1607
+ font-size: 11px;
1608
+ }
1609
+ .task-card-kicker {
1610
+ text-transform: uppercase;
1611
+ }
1612
+ .task-card b,
1613
+ .task-card small,
1614
+ .task-card-foot span {
1615
+ min-width: 0;
1616
+ overflow: hidden;
1617
+ text-overflow: ellipsis;
1618
+ }
1619
+ .task-card b {
1620
+ display: block;
1621
+ line-height: 1.2;
1622
+ overflow-wrap: anywhere;
1623
+ }
1624
+ .task-card small {
1625
+ white-space: nowrap;
1626
+ }
1627
+ .task-card-foot {
1628
+ display: flex;
1629
+ justify-content: space-between;
1630
+ gap: 8px;
1631
+ }
1632
+ .task-modal-backdrop {
1633
+ position: fixed;
1634
+ inset: 0;
1635
+ z-index: 900;
1636
+ display: grid;
1637
+ place-items: center;
1638
+ background: rgba(0, 0, 0, .66);
1639
+ padding: 24px;
1640
+ }
1641
+ .task-dialog {
1642
+ width: min(860px, calc(100vw - 40px));
1643
+ max-height: min(760px, calc(100dvh - 48px));
1644
+ min-height: 0;
1645
+ display: grid;
1646
+ grid-template-rows: auto minmax(0, 1fr);
1647
+ border: 1px solid var(--line-strong);
1648
+ border-radius: 8px;
1649
+ background: var(--surface);
1650
+ box-shadow: 0 24px 80px rgba(0, 0, 0, .48);
1651
+ overflow: hidden;
1652
+ }
1653
+ .task-dialog-head {
1654
+ min-width: 0;
1655
+ display: grid;
1656
+ grid-template-columns: minmax(0, 1fr) auto;
1657
+ gap: 16px;
1658
+ align-items: start;
1659
+ border-bottom: 1px solid var(--line);
1660
+ padding: 16px;
1661
+ }
1662
+ .task-dialog-head span {
1663
+ color: var(--muted);
1664
+ font-size: 11px;
1665
+ text-transform: uppercase;
1666
+ }
1667
+ .task-dialog-head h3 {
1668
+ margin: 3px 0 5px;
1669
+ font-size: 20px;
1670
+ line-height: 1.15;
1671
+ overflow-wrap: anywhere;
1672
+ }
1673
+ .task-dialog-head p,
1674
+ .task-dialog-section p,
1675
+ .task-dialog-section li {
1676
+ color: var(--muted);
1677
+ line-height: 1.4;
1678
+ }
1679
+ .task-dialog-actions {
1680
+ min-width: 0;
1681
+ display: flex;
1682
+ gap: 8px;
1683
+ align-items: start;
1684
+ }
1685
+ .task-dialog-body {
1686
+ min-height: 0;
1687
+ overflow: auto;
1688
+ scrollbar-gutter: stable;
1689
+ display: grid;
1690
+ align-content: start;
1691
+ gap: 14px;
1692
+ padding: 14px 16px 16px;
1693
+ }
1694
+ .task-dialog-grid {
1695
+ display: grid;
1696
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1697
+ gap: 8px;
1698
+ }
1699
+ .task-fact {
1700
+ min-width: 0;
1701
+ border: 1px solid var(--line);
1702
+ border-radius: 6px;
1703
+ background: #0d0f10;
1704
+ padding: 8px;
1705
+ }
1706
+ .task-fact span,
1707
+ .task-fact b {
1708
+ display: block;
1709
+ min-width: 0;
1710
+ overflow: hidden;
1711
+ text-overflow: ellipsis;
1712
+ white-space: nowrap;
1713
+ }
1714
+ .task-fact span {
1715
+ color: var(--muted);
1716
+ font-size: 11px;
1717
+ text-transform: uppercase;
1718
+ }
1719
+ .task-fact b {
1720
+ margin-top: 3px;
1721
+ color: var(--text);
1722
+ font-size: 13px;
1723
+ }
1724
+ .task-dialog-section {
1725
+ min-width: 0;
1726
+ border-top: 1px solid var(--line);
1727
+ padding-top: 12px;
1728
+ }
1729
+ .task-dialog-section h4 {
1730
+ margin: 0 0 7px;
1731
+ font-size: 12px;
1732
+ }
1733
+ .task-dialog-section ul {
1734
+ margin: 0;
1735
+ padding-left: 18px;
1736
+ }
1737
+ .task-dialog-section.split {
1738
+ display: grid;
1739
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
1740
+ gap: 16px;
1741
+ }
1742
+ .task-path-list {
1743
+ display: grid;
1744
+ gap: 5px;
1745
+ }
1746
+ .artifact-link {
1747
+ min-width: 0;
1748
+ display: block;
1749
+ width: 100%;
1750
+ overflow-wrap: anywhere;
1751
+ border: 1px solid var(--line);
1752
+ border-radius: 5px;
1753
+ background: #0a0b0c;
1754
+ color: var(--muted);
1755
+ padding: 6px 7px;
1756
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
1757
+ font-size: 11px;
1758
+ line-height: 1.35;
1759
+ text-align: left;
1760
+ text-decoration: none;
1761
+ appearance: none;
1762
+ cursor: pointer;
1763
+ }
1764
+ .artifact-link:hover,
1765
+ .artifact-link:focus-visible {
1766
+ border-color: var(--line-strong);
1767
+ color: var(--text);
1768
+ }
1769
+ .task-file-name {
1770
+ border: 0;
1771
+ background: transparent;
1772
+ padding: 0;
1773
+ color: var(--text);
1774
+ font-size: 12px;
1775
+ }
1776
+ .task-file-list {
1777
+ display: grid;
1778
+ gap: 7px;
1779
+ }
1780
+ .task-file-diff {
1781
+ min-width: 0;
1782
+ border: 1px solid var(--line);
1783
+ border-radius: 6px;
1784
+ background: #090a0b;
1785
+ overflow: hidden;
1786
+ }
1787
+ .task-file-diff summary {
1788
+ min-width: 0;
1789
+ display: grid;
1790
+ grid-template-columns: minmax(0, 1fr) auto auto;
1791
+ gap: 10px;
1792
+ align-items: center;
1793
+ padding: 8px 9px;
1794
+ cursor: pointer;
1795
+ }
1796
+ .task-file-diff summary .task-file-name,
1797
+ .task-file-diff summary small {
1798
+ min-width: 0;
1799
+ overflow: hidden;
1800
+ text-overflow: ellipsis;
1801
+ white-space: nowrap;
1802
+ }
1803
+ .task-file-diff summary .task-file-name {
1804
+ color: var(--text);
1805
+ font-size: 12px;
1806
+ }
1807
+ .task-file-diff summary small {
1808
+ color: var(--muted);
1809
+ font-size: 11px;
1810
+ font-variant-numeric: tabular-nums;
1811
+ }
1812
+ .task-file-reveal {
1813
+ width: auto;
1814
+ justify-self: end;
1815
+ padding: 4px 7px;
1816
+ font-family: inherit;
1817
+ font-size: 11px;
1818
+ }
1819
+ .task-file-diff pre {
1820
+ margin: 0;
1821
+ }
1822
+ .diff-renderer {
1823
+ max-height: 420px;
1824
+ overflow: auto;
1825
+ border-top: 1px solid var(--line);
1826
+ background: #050606;
1827
+ }
1828
+ .diff-hunk {
1829
+ min-width: max-content;
1830
+ }
1831
+ .diff-line {
1832
+ min-width: max-content;
1833
+ display: grid;
1834
+ grid-template-columns: 54px 54px 22px minmax(420px, 1fr);
1835
+ align-items: stretch;
1836
+ border-bottom: 1px solid rgba(255, 255, 255, .025);
1837
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
1838
+ font-size: 11px;
1839
+ line-height: 1.45;
1840
+ }
1841
+ .diff-line-old,
1842
+ .diff-line-new,
1843
+ .diff-line-prefix {
1844
+ min-width: 0;
1845
+ padding: 2px 6px;
1846
+ color: #6f7780;
1847
+ text-align: right;
1848
+ user-select: none;
1849
+ }
1850
+ .diff-line-prefix {
1851
+ text-align: center;
1852
+ }
1853
+ .diff-line-code {
1854
+ padding: 2px 8px;
1855
+ color: #c5cbd3;
1856
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
1857
+ white-space: pre;
1858
+ }
1859
+ .diff-line-meta,
1860
+ .diff-line-hunk {
1861
+ background: #0b0d10;
1862
+ }
1863
+ .diff-line-meta .diff-line-code,
1864
+ .diff-line-hunk .diff-line-code {
1865
+ color: #8f98a3;
1866
+ }
1867
+ .diff-line-add {
1868
+ background: rgba(62, 130, 91, .14);
1869
+ }
1870
+ .diff-line-add .diff-line-prefix,
1871
+ .diff-line-add .diff-line-new {
1872
+ color: #82c891;
1873
+ }
1874
+ .diff-line-delete {
1875
+ background: rgba(184, 78, 78, .14);
1876
+ }
1877
+ .diff-line-delete .diff-line-prefix,
1878
+ .diff-line-delete .diff-line-old {
1879
+ color: #e08b8b;
1880
+ }
1881
+ .diff-token.keyword {
1882
+ color: #9db8ff;
1883
+ }
1884
+ .diff-token.string {
1885
+ color: #b9d98b;
1886
+ }
1887
+ .diff-token.number {
1888
+ color: #d6b17a;
1889
+ }
1890
+ .diff-token.comment {
1891
+ color: #78818b;
1892
+ }
1893
+ .task-section-subblock {
1894
+ margin-top: 10px;
1895
+ }
1896
+ .task-section-subblock h5 {
1897
+ margin: 0 0 7px;
1898
+ color: var(--muted);
1899
+ font-size: 11px;
1900
+ text-transform: uppercase;
1901
+ }
1902
+ .task-result-list {
1903
+ display: grid;
1904
+ gap: 7px;
1905
+ }
1906
+ .task-result-row {
1907
+ min-width: 0;
1908
+ display: grid;
1909
+ grid-template-columns: auto minmax(0, 1fr);
1910
+ gap: 6px 10px;
1911
+ align-items: baseline;
1912
+ border: 1px solid var(--line);
1913
+ border-radius: 6px;
1914
+ background: #090a0b;
1915
+ padding: 8px 9px;
1916
+ }
1917
+ .task-result-row span {
1918
+ color: var(--muted);
1919
+ font-size: 11px;
1920
+ text-transform: uppercase;
1921
+ }
1922
+ .task-result-row b,
1923
+ .task-result-row small {
1924
+ min-width: 0;
1925
+ overflow: hidden;
1926
+ text-overflow: ellipsis;
1927
+ white-space: nowrap;
1928
+ }
1929
+ .task-result-row b {
1930
+ color: var(--text);
1931
+ font-size: 12px;
1932
+ }
1933
+ .task-result-row small {
1934
+ grid-column: 2;
1935
+ color: var(--muted);
1936
+ font-size: 11px;
1937
+ }
1938
+ .epic-grid {
1939
+ min-width: 0;
1940
+ display: grid;
1941
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1942
+ gap: 8px;
1943
+ }
1944
+ .epic-card {
1945
+ min-width: 0;
1946
+ display: grid;
1947
+ grid-template-columns: minmax(0, 1fr) auto;
1948
+ gap: 8px;
1949
+ align-items: center;
1950
+ border: 1px solid var(--line);
1951
+ border-radius: 6px;
1952
+ background: #0d0f10;
1953
+ padding: 9px;
1954
+ }
1955
+ .epic-card.good,
1956
+ .epic-card.warn,
1957
+ .epic-card.bad { border-color: var(--line-strong); }
1958
+ .epic-card b,
1959
+ .epic-card small,
1960
+ .epic-card span {
1961
+ min-width: 0;
1962
+ overflow: hidden;
1963
+ text-overflow: ellipsis;
1964
+ white-space: nowrap;
1965
+ }
1966
+ .epic-card small {
1967
+ display: block;
1968
+ color: var(--muted);
1969
+ }
1970
+ .epic-card span {
1971
+ color: var(--muted);
1972
+ font-size: 12px;
1973
+ }
1974
+ .action-intro {
1975
+ border: 1px solid var(--line);
1976
+ border-radius: 7px;
1977
+ background: #0d0f10;
1978
+ padding: 12px;
1979
+ }
1980
+ .action-intro h3 {
1981
+ margin: 0 0 4px;
1982
+ font-size: 15px;
1983
+ }
1984
+ .action-list,
1985
+ .simple-rows,
1986
+ .version-tree {
1987
+ min-width: 0;
1988
+ display: grid;
1989
+ gap: 7px;
1990
+ }
1991
+ .action-row {
1992
+ min-width: 0;
1993
+ display: grid;
1994
+ grid-template-columns: 92px minmax(0, 1fr);
1995
+ gap: 10px;
1996
+ align-items: start;
1997
+ border: 1px solid var(--line);
1998
+ border-radius: 7px;
1999
+ background: #0d0f10;
2000
+ padding: 9px;
2001
+ }
2002
+ .action-row.blocking,
2003
+ .action-row.important,
2004
+ .action-row.info { border-color: var(--line-strong); }
2005
+ .action-code {
2006
+ display: grid;
2007
+ gap: 5px;
2008
+ }
2009
+ .action-code b {
2010
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
2011
+ font-size: 13px;
2012
+ }
2013
+ .action-code button {
2014
+ border: 1px solid var(--line);
2015
+ border-radius: 5px;
2016
+ background: var(--surface-2);
2017
+ color: var(--text);
2018
+ padding: 4px 6px;
2019
+ cursor: pointer;
2020
+ }
2021
+ .action-code button:hover,
2022
+ .action-code button:focus-visible {
2023
+ border-color: var(--line-strong);
2024
+ }
2025
+ .action-copy {
2026
+ min-width: 0;
2027
+ }
2028
+ .action-copy h4,
2029
+ .action-copy p,
2030
+ .action-copy small {
2031
+ min-width: 0;
2032
+ overflow-wrap: break-word;
2033
+ }
2034
+ .action-copy small {
2035
+ color: var(--muted);
2036
+ }
2037
+ .action-answer-form {
2038
+ min-width: 0;
2039
+ display: grid;
2040
+ gap: 6px;
2041
+ margin-top: 8px;
2042
+ }
2043
+ .action-answer-form textarea {
2044
+ min-width: 0;
2045
+ width: 100%;
2046
+ resize: vertical;
2047
+ border: 1px solid var(--line);
2048
+ border-radius: 6px;
2049
+ background: #090a0b;
2050
+ color: var(--text);
2051
+ padding: 7px 8px;
2052
+ font: inherit;
2053
+ line-height: 1.35;
2054
+ }
2055
+ .action-answer-form textarea:focus-visible {
2056
+ outline: 2px solid var(--focus);
2057
+ outline-offset: 2px;
2058
+ }
2059
+ .action-answer-form > div {
2060
+ min-width: 0;
2061
+ display: flex;
2062
+ flex-wrap: wrap;
2063
+ gap: 8px;
2064
+ align-items: center;
2065
+ }
2066
+ .action-answer-form button {
2067
+ border: 1px solid var(--line);
2068
+ border-radius: 5px;
2069
+ background: var(--surface-2);
2070
+ color: var(--text);
2071
+ padding: 5px 8px;
2072
+ cursor: pointer;
2073
+ }
2074
+ .action-answer-form button:hover,
2075
+ .action-answer-form button:focus-visible {
2076
+ border-color: var(--line-strong);
2077
+ }
2078
+ .action-answer-form button:disabled {
2079
+ cursor: wait;
2080
+ opacity: .7;
2081
+ }
2082
+ .action-answer-status.submitted {
2083
+ color: var(--good);
2084
+ }
2085
+ .action-answer-status.error {
2086
+ color: var(--bad);
2087
+ }
2088
+ .simple-row,
2089
+ .version-leaf {
2090
+ min-width: 0;
2091
+ display: grid;
2092
+ grid-template-columns: minmax(0, 1fr) minmax(72px, 96px);
2093
+ gap: 10px;
2094
+ align-items: center;
2095
+ border: 1px solid var(--line);
2096
+ border-radius: 6px;
2097
+ background: #0d0f10;
2098
+ padding: 8px 9px;
2099
+ }
2100
+ .simple-row > div {
2101
+ min-width: 0;
2102
+ overflow: hidden;
2103
+ }
2104
+ .simple-row b,
2105
+ .simple-row small,
2106
+ .simple-row span,
2107
+ .version-leaf b,
2108
+ .version-leaf small {
2109
+ min-width: 0;
2110
+ overflow: hidden;
2111
+ text-overflow: ellipsis;
2112
+ white-space: nowrap;
2113
+ }
2114
+ .simple-row small,
2115
+ .version-leaf small {
2116
+ display: block;
2117
+ color: var(--muted);
2118
+ }
2119
+ .simple-row span {
2120
+ text-align: right;
2121
+ font-variant-numeric: tabular-nums;
2122
+ }
2123
+ .merge-flow {
2124
+ min-width: 0;
2125
+ display: grid;
2126
+ grid-template-columns: repeat(5, minmax(0, 1fr));
2127
+ gap: 8px;
2128
+ }
2129
+ .merge-node {
2130
+ position: relative;
2131
+ min-width: 0;
2132
+ border: 1px solid var(--line);
2133
+ border-radius: 7px;
2134
+ background: #0d0f10;
2135
+ padding: 10px;
2136
+ }
2137
+ .merge-node:not(:last-child)::after {
2138
+ content: "";
2139
+ position: absolute;
2140
+ top: 50%;
2141
+ right: -8px;
2142
+ width: 8px;
2143
+ border-top: 1px solid var(--line-strong);
2144
+ }
2145
+ .merge-node.good,
2146
+ .merge-node.warn,
2147
+ .merge-node.bad { border-color: var(--line-strong); }
2148
+ .merge-node b {
2149
+ display: block;
2150
+ margin-top: 4px;
2151
+ font-size: 22px;
2152
+ }
2153
+ .version-leaf.done,
2154
+ .version-leaf.ready { border-color: var(--line-strong); }
2155
+ .version-leaf.review,
2156
+ .version-leaf.stale,
2157
+ .version-leaf.failed { border-color: var(--line-strong); }
2158
+ .evidence-layout .table-scroll {
2159
+ max-height: 360px;
2160
+ }
2161
+ .success-layout {
2162
+ min-height: 0;
2163
+ max-height: 100%;
2164
+ flex: 1 1 auto;
2165
+ overflow: auto;
2166
+ scrollbar-gutter: stable;
2167
+ display: grid;
2168
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2169
+ align-content: start;
2170
+ gap: 0 14px;
2171
+ padding: 10px 10px 12px;
2172
+ }
2173
+ .success-summary {
2174
+ grid-column: 1 / -1;
2175
+ display: grid;
2176
+ grid-template-columns: repeat(3, minmax(0, 1fr));
2177
+ gap: 8px;
2178
+ margin-bottom: 2px;
2179
+ }
2180
+ .success-kpi {
2181
+ min-width: 0;
2182
+ border: 1px solid var(--line);
2183
+ border-radius: 6px;
2184
+ background: #0d0f10;
2185
+ padding: 9px;
2186
+ }
2187
+ .success-kpi span,
2188
+ .success-kpi small {
2189
+ display: block;
2190
+ min-width: 0;
2191
+ overflow: hidden;
2192
+ text-overflow: ellipsis;
2193
+ white-space: nowrap;
2194
+ }
2195
+ .success-kpi span {
2196
+ color: var(--muted);
2197
+ font-size: 11px;
2198
+ text-transform: uppercase;
2199
+ }
2200
+ .success-kpi b {
2201
+ display: block;
2202
+ margin-top: 3px;
2203
+ color: var(--text);
2204
+ font-size: 20px;
2205
+ line-height: 1.08;
2206
+ font-variant-numeric: tabular-nums;
2207
+ }
2208
+ .success-kpi small {
2209
+ margin-top: 3px;
2210
+ color: var(--muted);
2211
+ }
2212
+ .success-section {
2213
+ min-width: 0;
2214
+ border-top: 1px solid var(--line);
2215
+ padding: 12px 0;
2216
+ }
2217
+ .success-section.wide {
2218
+ grid-column: 1 / -1;
2219
+ }
2220
+ .success-list {
2221
+ display: grid;
2222
+ gap: 7px;
2223
+ }
2224
+ .success-row {
2225
+ min-width: 0;
2226
+ display: grid;
2227
+ grid-template-columns: minmax(0, 1.7fr) minmax(96px, .7fr);
2228
+ gap: 2px 10px;
2229
+ align-items: baseline;
2230
+ border: 1px solid var(--line);
2231
+ border-radius: 6px;
2232
+ background: #0d0f10;
2233
+ padding: 8px;
2234
+ }
2235
+ .success-row span,
2236
+ .success-row b,
2237
+ .success-row small {
2238
+ min-width: 0;
2239
+ overflow: hidden;
2240
+ text-overflow: ellipsis;
2241
+ white-space: nowrap;
2242
+ }
2243
+ .success-row b {
2244
+ color: var(--text);
2245
+ font-size: 12px;
2246
+ text-align: right;
2247
+ }
2248
+ .success-row small {
2249
+ grid-column: 1 / -1;
2250
+ color: var(--muted);
2251
+ }
2252
+ .metric-section {
2253
+ min-width: 0;
2254
+ min-height: 0;
2255
+ border-top: 1px solid var(--line);
2256
+ padding: 12px 0;
2257
+ }
2258
+ .metric-section.wide {
2259
+ grid-column: 1 / -1;
2260
+ }
2261
+ .metrics-layout > .metric-section:first-child,
2262
+ .timeline-layout > .timeline-section:first-child,
2263
+ .success-layout > .success-summary + .success-section {
2264
+ border-top: 0;
2265
+ padding-top: 4px;
2266
+ }
2267
+ .metric-section-head {
2268
+ min-width: 0;
2269
+ display: flex;
2270
+ align-items: baseline;
2271
+ justify-content: space-between;
2272
+ gap: 10px;
2273
+ margin-bottom: 9px;
2274
+ }
2275
+ .metric-section-head h3 {
2276
+ margin: 0;
2277
+ font-size: 12px;
2278
+ line-height: 1.2;
2279
+ }
2280
+ .metric-section-head span {
2281
+ min-width: 0;
2282
+ overflow: hidden;
2283
+ text-overflow: ellipsis;
2284
+ white-space: nowrap;
2285
+ color: var(--muted);
2286
+ font-size: 12px;
2287
+ }
2288
+ .stat-grid {
2289
+ display: grid;
2290
+ grid-template-columns: repeat(3, minmax(0, 1fr));
2291
+ gap: 8px;
2292
+ }
2293
+ .stat-cell {
2294
+ min-width: 0;
2295
+ border: 1px solid var(--line);
2296
+ border-radius: 6px;
2297
+ background: #0d0f10;
2298
+ padding: 8px;
2299
+ }
2300
+ .stat-cell span {
2301
+ display: block;
2302
+ overflow: hidden;
2303
+ text-overflow: ellipsis;
2304
+ white-space: nowrap;
2305
+ color: var(--muted);
2306
+ font-size: 11px;
2307
+ text-transform: uppercase;
2308
+ }
2309
+ .stat-cell b {
2310
+ display: block;
2311
+ margin-top: 3px;
2312
+ color: var(--text);
2313
+ font-size: 18px;
2314
+ line-height: 1.1;
2315
+ font-variant-numeric: tabular-nums;
2316
+ }
2317
+ .chart-grid {
2318
+ min-width: 0;
2319
+ display: grid;
2320
+ grid-template-columns: repeat(3, minmax(0, 1fr));
2321
+ align-items: stretch;
2322
+ gap: 8px;
2323
+ }
2324
+ .chart-grid.compact .chart-card {
2325
+ grid-template-rows: minmax(28px, auto) 24px;
2326
+ gap: 4px;
2327
+ padding: 6px;
2328
+ }
2329
+ .chart-grid.compact .sparkline {
2330
+ height: 24px;
2331
+ padding: 4px 3px 0;
2332
+ }
2333
+ .metric-section .chart-grid {
2334
+ margin-top: 8px;
2335
+ }
2336
+ .overview-grid .chart-grid {
2337
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2338
+ padding: 0 10px 10px;
2339
+ }
2340
+ .overview-grid .chart-grid.compact {
2341
+ padding-bottom: 4px;
2342
+ }
2343
+ .chart-card {
2344
+ min-width: 0;
2345
+ min-height: 0;
2346
+ display: grid;
2347
+ grid-template-rows: minmax(34px, auto) 50px minmax(14px, auto);
2348
+ gap: 6px;
2349
+ border: 1px solid var(--line);
2350
+ border-radius: 6px;
2351
+ background: #0d0f10;
2352
+ padding: 8px;
2353
+ }
2354
+ .chart-card-head {
2355
+ min-width: 0;
2356
+ display: grid;
2357
+ grid-template-columns: minmax(0, 1fr) auto;
2358
+ gap: 8px;
2359
+ align-items: baseline;
2360
+ }
2361
+ .chart-card-head span,
2362
+ .chart-card small {
2363
+ min-width: 0;
2364
+ overflow: hidden;
2365
+ text-overflow: ellipsis;
2366
+ white-space: nowrap;
2367
+ color: var(--muted);
2368
+ font-size: 11px;
2369
+ }
2370
+ .chart-card-head span {
2371
+ text-transform: uppercase;
2372
+ }
2373
+ .chart-card-head b {
2374
+ color: var(--text);
2375
+ font-size: 14px;
2376
+ line-height: 1.1;
2377
+ font-variant-numeric: tabular-nums;
2378
+ white-space: nowrap;
2379
+ }
2380
+ .health-summary {
2381
+ min-width: 0;
2382
+ display: grid;
2383
+ grid-template-columns: repeat(3, minmax(0, 1fr));
2384
+ gap: 8px;
2385
+ padding: 10px 10px 0;
2386
+ }
2387
+ .health-card {
2388
+ min-width: 0;
2389
+ border: 1px solid var(--line);
2390
+ border-radius: 6px;
2391
+ background: #0d0f10;
2392
+ padding: 8px;
2393
+ }
2394
+ .health-card.good {
2395
+ border-color: var(--line-strong);
2396
+ }
2397
+ .health-card.warn {
2398
+ border-color: var(--line-strong);
2399
+ }
2400
+ .health-card.bad {
2401
+ border-color: var(--line-strong);
2402
+ }
2403
+ .health-card span,
2404
+ .health-card small {
2405
+ display: block;
2406
+ min-width: 0;
2407
+ overflow: hidden;
2408
+ text-overflow: ellipsis;
2409
+ white-space: nowrap;
2410
+ }
2411
+ .health-card span {
2412
+ color: var(--muted);
2413
+ font-size: 11px;
2414
+ text-transform: uppercase;
2415
+ }
2416
+ .health-card b {
2417
+ display: block;
2418
+ margin-top: 3px;
2419
+ color: var(--text);
2420
+ font-size: 17px;
2421
+ line-height: 1.08;
2422
+ font-variant-numeric: tabular-nums;
2423
+ overflow: hidden;
2424
+ text-overflow: ellipsis;
2425
+ white-space: nowrap;
2426
+ }
2427
+ .health-card small {
2428
+ margin-top: 4px;
2429
+ color: var(--muted);
2430
+ font-size: 11px;
2431
+ }
2432
+ .sparkline {
2433
+ position: relative;
2434
+ min-width: 0;
2435
+ height: 50px;
2436
+ display: block;
2437
+ border: 1px solid var(--line);
2438
+ border-radius: 5px;
2439
+ padding: 6px 4px 0;
2440
+ background:
2441
+ linear-gradient(to top, #24292e 1px, transparent 1px),
2442
+ linear-gradient(to top, transparent 49%, #1b2024 50%, transparent 51%),
2443
+ #0a0b0c;
2444
+ overflow: hidden;
2445
+ }
2446
+ .spark-bars {
2447
+ min-width: 0;
2448
+ height: 100%;
2449
+ display: flex;
2450
+ align-items: flex-end;
2451
+ gap: 2px;
2452
+ }
2453
+ .aligned-chart {
2454
+ contain: content;
2455
+ }
2456
+ .spark-bar {
2457
+ flex: 1 1 0;
2458
+ min-width: 2px;
2459
+ max-height: 100%;
2460
+ align-self: flex-end;
2461
+ border-radius: 2px 2px 0 0;
2462
+ background: var(--accent);
2463
+ opacity: .76;
2464
+ }
2465
+ .spark-bar.good,
2466
+ .metric-bar-fill.good {
2467
+ background: var(--good);
2468
+ }
2469
+ .spark-bar.warn,
2470
+ .metric-bar-fill.warn {
2471
+ background: var(--warn);
2472
+ }
2473
+ .spark-bar.bad,
2474
+ .metric-bar-fill.bad {
2475
+ background: var(--bad);
2476
+ }
2477
+ .spark-bar.review,
2478
+ .metric-bar-fill.review {
2479
+ background: var(--review);
2480
+ }
2481
+ .metric-bars {
2482
+ display: grid;
2483
+ gap: 7px;
2484
+ }
2485
+ .context-pressure {
2486
+ min-width: 0;
2487
+ display: grid;
2488
+ gap: 9px;
2489
+ }
2490
+ .context-offender-list {
2491
+ display: grid;
2492
+ gap: 6px;
2493
+ }
2494
+ .context-offender-row {
2495
+ min-width: 0;
2496
+ display: grid;
2497
+ grid-template-columns: minmax(0, 1fr) minmax(68px, auto);
2498
+ gap: 2px 8px;
2499
+ align-items: baseline;
2500
+ border: 1px solid var(--line);
2501
+ border-radius: 6px;
2502
+ background: #0d0f10;
2503
+ padding: 7px 8px;
2504
+ }
2505
+ .context-offender-row span,
2506
+ .context-offender-row b,
2507
+ .context-offender-row small {
2508
+ min-width: 0;
2509
+ overflow: hidden;
2510
+ text-overflow: ellipsis;
2511
+ white-space: nowrap;
2512
+ }
2513
+ .context-offender-row b {
2514
+ color: var(--text);
2515
+ font-size: 12px;
2516
+ text-align: right;
2517
+ font-variant-numeric: tabular-nums;
2518
+ }
2519
+ .context-offender-row small {
2520
+ grid-column: 1 / -1;
2521
+ color: var(--muted);
2522
+ }
2523
+ .metric-bar-row {
2524
+ min-width: 0;
2525
+ display: grid;
2526
+ grid-template-columns: minmax(140px, 1.1fr) minmax(120px, 2.4fr) 84px;
2527
+ gap: 6px 10px;
2528
+ align-items: center;
2529
+ }
2530
+ .metric-bar-label,
2531
+ .metric-bar-value {
2532
+ min-width: 0;
2533
+ }
2534
+ .metric-bar-label {
2535
+ color: var(--muted);
2536
+ overflow-wrap: anywhere;
2537
+ word-break: normal;
2538
+ line-height: 1.2;
2539
+ }
2540
+ .metric-bar-value {
2541
+ color: var(--text);
2542
+ font-size: 12px;
2543
+ text-align: right;
2544
+ font-variant-numeric: tabular-nums;
2545
+ overflow: hidden;
2546
+ text-overflow: ellipsis;
2547
+ white-space: nowrap;
2548
+ }
2549
+ .metric-bar-track {
2550
+ min-width: 0;
2551
+ height: 8px;
2552
+ border-radius: 999px;
2553
+ background: #08090a;
2554
+ overflow: hidden;
2555
+ }
2556
+ .metric-bar-fill {
2557
+ display: block;
2558
+ height: 100%;
2559
+ border-radius: inherit;
2560
+ background: var(--accent);
2561
+ }
2562
+ .quality-layout {
2563
+ min-height: 0;
2564
+ flex: 1 1 auto;
2565
+ overflow: auto;
2566
+ scrollbar-gutter: stable;
2567
+ display: grid;
2568
+ align-content: start;
2569
+ gap: 10px;
2570
+ padding: 10px;
2571
+ }
2572
+ .quality-summary {
2573
+ display: grid;
2574
+ grid-template-columns: repeat(3, minmax(0, 1fr));
2575
+ gap: 8px;
2576
+ }
2577
+ .quality-kpi {
2578
+ min-width: 0;
2579
+ border: 1px solid var(--line);
2580
+ border-radius: 6px;
2581
+ background: #0d0f10;
2582
+ padding: 9px;
2583
+ }
2584
+ .quality-kpi span,
2585
+ .quality-kpi small {
2586
+ display: block;
2587
+ min-width: 0;
2588
+ overflow: hidden;
2589
+ text-overflow: ellipsis;
2590
+ white-space: nowrap;
2591
+ }
2592
+ .quality-kpi span {
2593
+ color: var(--muted);
2594
+ font-size: 11px;
2595
+ text-transform: uppercase;
2596
+ }
2597
+ .quality-kpi b {
2598
+ display: block;
2599
+ margin-top: 3px;
2600
+ color: var(--text);
2601
+ font-size: 20px;
2602
+ line-height: 1.08;
2603
+ font-variant-numeric: tabular-nums;
2604
+ }
2605
+ .quality-kpi small {
2606
+ margin-top: 3px;
2607
+ color: var(--muted);
2608
+ }
2609
+ .quality-group {
2610
+ min-width: 0;
2611
+ border-top: 1px solid var(--line);
2612
+ padding-top: 10px;
2613
+ }
2614
+ .quality-group.blocker {
2615
+ border-color: var(--line-strong);
2616
+ }
2617
+ .quality-group.noise {
2618
+ border-color: var(--line-strong);
2619
+ }
2620
+ .quality-layout > .quality-group:first-of-type {
2621
+ border-top: 0;
2622
+ padding-top: 2px;
2623
+ }
2624
+ .quality-group-head {
2625
+ min-width: 0;
2626
+ display: flex;
2627
+ align-items: baseline;
2628
+ justify-content: space-between;
2629
+ gap: 10px;
2630
+ margin-bottom: 8px;
2631
+ }
2632
+ .quality-group-head h3 {
2633
+ margin: 0;
2634
+ font-size: 12px;
2635
+ line-height: 1.2;
2636
+ }
2637
+ .quality-group-head span {
2638
+ min-width: 0;
2639
+ overflow: hidden;
2640
+ text-overflow: ellipsis;
2641
+ white-space: nowrap;
2642
+ color: var(--muted);
2643
+ font-size: 12px;
2644
+ }
2645
+ .quality-signal-list {
2646
+ display: grid;
2647
+ gap: 7px;
2648
+ }
2649
+ .quality-signal-list.compact {
2650
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2651
+ }
2652
+ .quality-signal {
2653
+ min-width: 0;
2654
+ display: grid;
2655
+ grid-template-columns: minmax(0, 1fr) 54px minmax(92px, auto);
2656
+ gap: 8px;
2657
+ align-items: center;
2658
+ border: 1px solid var(--line);
2659
+ border-radius: 6px;
2660
+ background: #0d0f10;
2661
+ padding: 8px;
2662
+ }
2663
+ .quality-signal.active {
2664
+ border-color: var(--line-strong);
2665
+ }
2666
+ .quality-signal b,
2667
+ .quality-signal p,
2668
+ .quality-signal-count,
2669
+ .quality-signal-status {
2670
+ min-width: 0;
2671
+ }
2672
+ .quality-signal b {
2673
+ display: block;
2674
+ color: var(--text);
2675
+ }
2676
+ .quality-signal p {
2677
+ margin: 2px 0 0;
2678
+ overflow-wrap: anywhere;
2679
+ color: var(--muted);
2680
+ }
2681
+ .quality-signal-count {
2682
+ color: var(--text);
2683
+ text-align: right;
2684
+ font-size: 18px;
2685
+ line-height: 1;
2686
+ font-variant-numeric: tabular-nums;
2687
+ }
2688
+ .quality-signal-status {
2689
+ overflow: hidden;
2690
+ text-overflow: ellipsis;
2691
+ white-space: nowrap;
2692
+ color: var(--muted);
2693
+ font-size: 12px;
2694
+ text-align: right;
2695
+ }
2696
+ .timeline-layout {
2697
+ min-height: 0;
2698
+ max-height: 100%;
2699
+ overflow: auto;
2700
+ scrollbar-gutter: stable;
2701
+ display: grid;
2702
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
2703
+ align-content: start;
2704
+ gap: 0 14px;
2705
+ padding: 2px 10px 12px;
2706
+ }
2707
+ .timeline-section {
2708
+ min-width: 0;
2709
+ border-top: 1px solid var(--line);
2710
+ padding: 12px 0;
2711
+ }
2712
+ .timeline-section.wide {
2713
+ grid-column: 1 / -1;
2714
+ }
2715
+ .timeline-progress-row {
2716
+ min-width: 0;
2717
+ display: grid;
2718
+ grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
2719
+ gap: 10px;
2720
+ align-items: center;
2721
+ }
2722
+ .timeline-progress-copy {
2723
+ min-width: 0;
2724
+ display: grid;
2725
+ gap: 2px;
2726
+ }
2727
+ .timeline-progress-copy b {
2728
+ font-size: 24px;
2729
+ line-height: 1;
2730
+ font-variant-numeric: tabular-nums;
2731
+ }
2732
+ .timeline-progress-copy span,
2733
+ .timeline-note {
2734
+ color: var(--muted);
2735
+ font-size: 12px;
2736
+ }
2737
+ .timeline-progress-track {
2738
+ min-width: 0;
2739
+ height: 14px;
2740
+ border-radius: 999px;
2741
+ background: #08090a;
2742
+ border: 1px solid var(--line);
2743
+ overflow: hidden;
2744
+ }
2745
+ .timeline-progress-fill {
2746
+ display: block;
2747
+ height: 100%;
2748
+ border-radius: inherit;
2749
+ background: var(--accent);
2750
+ }
2751
+ .timeline-note {
2752
+ margin-top: 8px;
2753
+ overflow-wrap: break-word;
2754
+ }
2755
+ .time-series-summary {
2756
+ min-width: 0;
2757
+ display: grid;
2758
+ grid-template-columns: repeat(4, minmax(0, 1fr));
2759
+ gap: 8px;
2760
+ margin-top: 9px;
2761
+ }
2762
+ .contribution-card {
2763
+ --contribution-cell: 12px;
2764
+ --contribution-label-col: 29px;
2765
+ min-width: 0;
2766
+ display: grid;
2767
+ gap: 10px;
2768
+ }
2769
+ .contribution-card.prominent {
2770
+ --contribution-cell: 16px;
2771
+ --contribution-label-col: 36px;
2772
+ gap: 12px;
2773
+ }
2774
+ .contribution-summary {
2775
+ min-width: 0;
2776
+ display: grid;
2777
+ grid-template-columns: repeat(4, minmax(0, 1fr));
2778
+ gap: 8px;
2779
+ }
2780
+ .contribution-scroll {
2781
+ min-width: 0;
2782
+ overflow-x: auto;
2783
+ scrollbar-gutter: stable;
2784
+ border: 1px solid var(--line);
2785
+ border-radius: 6px;
2786
+ background: #0d0f10;
2787
+ padding: 10px;
2788
+ }
2789
+ .contribution-card.prominent .contribution-scroll {
2790
+ padding: 14px;
2791
+ }
2792
+ .contribution-months {
2793
+ display: grid;
2794
+ gap: 3px;
2795
+ margin-left: calc(var(--contribution-label-col) + 6px);
2796
+ min-width: max-content;
2797
+ }
2798
+ .contribution-months span {
2799
+ min-width: 0;
2800
+ overflow: visible;
2801
+ color: var(--muted);
2802
+ font-size: 10px;
2803
+ line-height: 1.1;
2804
+ white-space: nowrap;
2805
+ }
2806
+ .contribution-body {
2807
+ display: grid;
2808
+ grid-template-columns: var(--contribution-label-col) max-content;
2809
+ gap: 6px;
2810
+ margin-top: 4px;
2811
+ }
2812
+ .contribution-weekdays,
2813
+ .contribution-week {
2814
+ display: grid;
2815
+ grid-template-rows: repeat(7, var(--contribution-cell));
2816
+ gap: 3px;
2817
+ }
2818
+ .contribution-weekdays span {
2819
+ color: var(--muted);
2820
+ font-size: 10px;
2821
+ line-height: var(--contribution-cell);
2822
+ text-align: right;
2823
+ }
2824
+ .contribution-weeks {
2825
+ display: grid;
2826
+ gap: 3px;
2827
+ min-width: max-content;
2828
+ }
2829
+ .contribution-day {
2830
+ position: relative;
2831
+ width: var(--contribution-cell);
2832
+ height: var(--contribution-cell);
2833
+ border: 1px solid #252a2f;
2834
+ border-radius: 2px;
2835
+ background: #15181b;
2836
+ }
2837
+ .contribution-day[data-contribution-tooltip] {
2838
+ cursor: default;
2839
+ }
2840
+ .contribution-day[data-contribution-tooltip]:hover {
2841
+ border-color: var(--focus);
2842
+ }
2843
+ .contribution-day.empty {
2844
+ visibility: hidden;
2845
+ }
2846
+ .contribution-day.level-1 {
2847
+ background: #253027;
2848
+ border-color: #344036;
2849
+ }
2850
+ .contribution-day.level-2 {
2851
+ background: #3c4a3e;
2852
+ border-color: #4b5a4d;
2853
+ }
2854
+ .contribution-day.level-3 {
2855
+ background: #637462;
2856
+ border-color: #748572;
2857
+ }
2858
+ .contribution-day.level-4 {
2859
+ background: var(--good);
2860
+ border-color: #b5c1b5;
2861
+ }
2862
+ .contribution-legend {
2863
+ min-width: max-content;
2864
+ display: flex;
2865
+ align-items: center;
2866
+ justify-content: flex-end;
2867
+ gap: 4px;
2868
+ margin-top: 8px;
2869
+ color: var(--muted);
2870
+ font-size: 10px;
2871
+ }
2872
+ .contribution-legend .contribution-day {
2873
+ display: inline-block;
2874
+ }
2875
+ .chart-popover {
2876
+ position: fixed;
2877
+ z-index: 1000;
2878
+ visibility: hidden;
2879
+ opacity: 0;
2880
+ pointer-events: none;
2881
+ transform: translate(-50%, calc(-100% - 8px));
2882
+ border: 1px solid var(--line-strong);
2883
+ border-radius: 6px;
2884
+ background: #101214;
2885
+ color: var(--text);
2886
+ box-shadow: 0 14px 36px rgba(0, 0, 0, .45);
2887
+ padding: 8px 9px;
2888
+ white-space: pre-line;
2889
+ font-size: 12px;
2890
+ line-height: 1.35;
2891
+ }
2892
+ .chart-popover.visible {
2893
+ visibility: visible;
2894
+ opacity: 1;
2895
+ }
2896
+ .chart-popover.below {
2897
+ transform: translate(-50%, 0);
2898
+ }
2899
+ .timeline-series {
2900
+ display: grid;
2901
+ gap: 6px;
2902
+ }
2903
+ .timeline-series-track {
2904
+ position: relative;
2905
+ min-height: 58px;
2906
+ border: 1px solid var(--line);
2907
+ border-radius: 6px;
2908
+ background:
2909
+ linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), #20252a 25%, transparent calc(25% + 1px)),
2910
+ linear-gradient(90deg, transparent 0, transparent calc(50% - 1px), #20252a 50%, transparent calc(50% + 1px)),
2911
+ linear-gradient(90deg, transparent 0, transparent calc(75% - 1px), #20252a 75%, transparent calc(75% + 1px)),
2912
+ #0d0f10;
2913
+ }
2914
+ .timeline-point {
2915
+ position: absolute;
2916
+ left: 0;
2917
+ top: 50%;
2918
+ width: 10px;
2919
+ height: 10px;
2920
+ border: 2px solid var(--surface);
2921
+ border-radius: 999px;
2922
+ background: var(--muted);
2923
+ transform: translate(-50%, -50%);
2924
+ }
2925
+ .timeline-point.good { background: var(--good); }
2926
+ .timeline-point.warn { background: var(--warn); }
2927
+ .timeline-point.bad { background: var(--bad); }
2928
+ .timeline-axis {
2929
+ min-width: 0;
2930
+ display: flex;
2931
+ justify-content: space-between;
2932
+ gap: 10px;
2933
+ color: var(--muted);
2934
+ font-size: 11px;
2935
+ }
2936
+ .timeline-axis span {
2937
+ min-width: 0;
2938
+ overflow: hidden;
2939
+ text-overflow: ellipsis;
2940
+ white-space: nowrap;
2941
+ }
2942
+ .bottleneck-list {
2943
+ display: grid;
2944
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2945
+ gap: 8px;
2946
+ }
2947
+ .bottleneck-row {
2948
+ min-width: 0;
2949
+ display: grid;
2950
+ grid-template-columns: minmax(0, 1fr) auto;
2951
+ gap: 2px 8px;
2952
+ align-items: baseline;
2953
+ border: 1px solid var(--line);
2954
+ border-radius: 6px;
2955
+ background: #0d0f10;
2956
+ padding: 8px;
2957
+ }
2958
+ .bottleneck-row.bad {
2959
+ border-color: var(--line-strong);
2960
+ }
2961
+ .bottleneck-row.warn {
2962
+ border-color: var(--line-strong);
2963
+ }
2964
+ .bottleneck-row span,
2965
+ .bottleneck-row small {
2966
+ min-width: 0;
2967
+ overflow: hidden;
2968
+ text-overflow: ellipsis;
2969
+ white-space: nowrap;
2970
+ }
2971
+ .bottleneck-row span {
2972
+ color: var(--text);
2973
+ }
2974
+ .bottleneck-row b {
2975
+ font-variant-numeric: tabular-nums;
2976
+ }
2977
+ .bottleneck-row small {
2978
+ grid-column: 1 / -1;
2979
+ color: var(--muted);
2980
+ }
2981
+ .timeline-events {
2982
+ display: grid;
2983
+ gap: 6px;
2984
+ }
2985
+ .timeline-event {
2986
+ min-width: 0;
2987
+ display: grid;
2988
+ grid-template-columns: 140px minmax(0, 1fr) minmax(120px, auto);
2989
+ gap: 8px;
2990
+ align-items: start;
2991
+ border-top: 1px solid #22272c;
2992
+ padding-top: 7px;
2993
+ }
2994
+ .timeline-event:first-child {
2995
+ border-top: 0;
2996
+ padding-top: 0;
2997
+ }
2998
+ .timeline-event.bad {
2999
+ border-color: var(--line-strong);
3000
+ }
3001
+ .timeline-event.warn {
3002
+ border-color: var(--line-strong);
3003
+ }
3004
+ .timeline-event time,
3005
+ .timeline-event small,
3006
+ .timeline-event span {
3007
+ color: var(--muted);
3008
+ }
3009
+ .timeline-event time,
3010
+ .timeline-event small {
3011
+ font-size: 12px;
3012
+ font-variant-numeric: tabular-nums;
3013
+ }
3014
+ .timeline-event div {
3015
+ min-width: 0;
3016
+ display: grid;
3017
+ gap: 2px;
3018
+ }
3019
+ .timeline-event b,
3020
+ .timeline-event span,
3021
+ .timeline-event small {
3022
+ min-width: 0;
3023
+ overflow: hidden;
3024
+ text-overflow: ellipsis;
3025
+ white-space: nowrap;
3026
+ }
3027
+ .timeline-event small {
3028
+ text-align: right;
3029
+ }
3030
+ .kv {
3031
+ display: grid;
3032
+ grid-template-columns: 92px minmax(0, 1fr);
3033
+ gap: 6px 10px;
3034
+ margin: 0;
3035
+ }
3036
+ .kv dt {
3037
+ color: var(--muted);
3038
+ }
3039
+ .kv dd {
3040
+ margin: 0;
3041
+ overflow-wrap: break-word;
3042
+ word-break: normal;
3043
+ }
3044
+ .empty {
3045
+ color: var(--muted);
3046
+ padding: 12px;
3047
+ }
3048
+ .empty.tight {
3049
+ padding: 0 10px 10px;
3050
+ }
3051
+ @media (max-width: 1100px) {
3052
+ body {
3053
+ overflow: hidden;
3054
+ }
3055
+ .shell {
3056
+ height: 100vh;
3057
+ height: 100dvh;
3058
+ min-height: 0;
3059
+ }
3060
+ .operator-grid {
3061
+ grid-template-columns: 1fr;
3062
+ }
3063
+ .overview-grid {
3064
+ grid-template-columns: 1fr;
3065
+ grid-auto-rows: minmax(190px, auto);
3066
+ }
3067
+ .metrics-layout,
3068
+ .timeline-layout,
3069
+ .success-layout {
3070
+ grid-template-columns: 1fr;
3071
+ }
3072
+ .work-kpis,
3073
+ .work-cost-metrics,
3074
+ .testing-summary,
3075
+ .efficiency-summary,
3076
+ .merge-flow {
3077
+ grid-template-columns: repeat(3, minmax(0, 1fr));
3078
+ }
3079
+ .task-board-scroll {
3080
+ grid-auto-columns: minmax(260px, 300px);
3081
+ }
3082
+ .epic-grid {
3083
+ grid-template-columns: repeat(2, minmax(0, 1fr));
3084
+ }
3085
+ .metric-section.wide,
3086
+ .timeline-section.wide,
3087
+ .success-section.wide {
3088
+ grid-column: auto;
3089
+ }
3090
+ .overview-snapshot {
3091
+ grid-template-columns: repeat(2, minmax(0, 1fr));
3092
+ }
3093
+ .overview-grid .panel {
3094
+ min-height: 190px;
3095
+ max-height: clamp(190px, 34vh, 300px);
3096
+ overflow: hidden;
3097
+ }
3098
+ .overview-card-scroll {
3099
+ min-height: 0;
3100
+ flex: 1 1 auto;
3101
+ overflow: auto;
3102
+ }
3103
+ }
3104
+ @media (max-width: 680px) {
3105
+ .shell {
3106
+ padding: 9px;
3107
+ }
3108
+ .metric {
3109
+ min-width: 112px;
3110
+ }
3111
+ .context-grid,
3112
+ .overview-metrics,
3113
+ .audit-list,
3114
+ .pressure-grid,
3115
+ .overview-snapshot,
3116
+ .health-summary,
3117
+ .quality-summary,
3118
+ .success-summary,
3119
+ .work-kpis,
3120
+ .work-cost-metrics,
3121
+ .performance-summary,
3122
+ .optimization-signal-grid,
3123
+ .optimization-behavior-grid,
3124
+ .efficiency-summary,
3125
+ .epic-grid,
3126
+ .merge-flow,
3127
+ .chart-grid,
3128
+ .stat-grid,
3129
+ .bottleneck-list,
3130
+ .contribution-summary,
3131
+ .time-series-summary {
3132
+ grid-template-columns: 1fr 1fr;
3133
+ }
3134
+ .quality-signal-list.compact,
3135
+ .quality-signal,
3136
+ .success-row,
3137
+ .goal-card,
3138
+ .work-hero,
3139
+ .action-row,
3140
+ .performance-split,
3141
+ .history-split,
3142
+ .testing-split,
3143
+ .history-branch,
3144
+ .history-event,
3145
+ .testing-row,
3146
+ .task-dialog-head,
3147
+ .task-dialog-section.split,
3148
+ .simple-row,
3149
+ .optimization-behavior-row,
3150
+ .version-leaf,
3151
+ .timeline-progress-row,
3152
+ .timeline-event {
3153
+ grid-template-columns: 1fr;
3154
+ }
3155
+ .quality-signal-count,
3156
+ .quality-signal-status,
3157
+ .success-row b,
3158
+ .goal-status,
3159
+ .goal-progress-head span,
3160
+ .simple-row span,
3161
+ .optimization-behavior-row > span,
3162
+ .history-branch > span:last-child,
3163
+ .testing-row > span,
3164
+ .timeline-event small {
3165
+ text-align: left;
3166
+ }
3167
+ .task-board-scroll {
3168
+ grid-auto-columns: minmax(244px, 82vw);
3169
+ }
3170
+ .agent-roster-head {
3171
+ display: none;
3172
+ }
3173
+ .agent-worker-card {
3174
+ grid-template-columns: 1fr;
3175
+ gap: 7px;
3176
+ align-items: start;
3177
+ }
3178
+ .task-dialog {
3179
+ width: calc(100vw - 24px);
3180
+ max-height: calc(100dvh - 24px);
3181
+ }
3182
+ .task-dialog-grid {
3183
+ grid-template-columns: 1fr 1fr;
3184
+ }
3185
+ .merge-node::after {
3186
+ display: none;
3187
+ }
3188
+ .metric-bar-row {
3189
+ grid-template-columns: minmax(0, 1fr) minmax(64px, auto);
3190
+ align-items: start;
3191
+ }
3192
+ .metric-bar-label {
3193
+ grid-column: 1 / -1;
3194
+ }
3195
+ .metric-bar-value {
3196
+ text-align: right;
3197
+ white-space: nowrap;
3198
+ }
3199
+ .metric span,
3200
+ .metric b,
3201
+ .metric small,
3202
+ .snapshot-tile span,
3203
+ .snapshot-tile b,
3204
+ .snapshot-tile small,
3205
+ .compact-metric span,
3206
+ .audit-row span,
3207
+ .pressure-card span,
3208
+ .pressure-card b,
3209
+ .pressure-card small,
3210
+ .health-card span,
3211
+ .health-card b,
3212
+ .health-card small,
3213
+ .success-kpi span,
3214
+ .success-kpi b,
3215
+ .success-kpi small,
3216
+ .stat-cell span,
3217
+ .stat-cell b,
3218
+ .chart-card-head span,
3219
+ .chart-card small,
3220
+ .optimization-signal span,
3221
+ .optimization-signal b,
3222
+ .optimization-signal small,
3223
+ .optimization-behavior-card span,
3224
+ .optimization-behavior-card b,
3225
+ .optimization-behavior-card small,
3226
+ .optimization-behavior-row b,
3227
+ .optimization-behavior-row small,
3228
+ .optimization-behavior-row span,
3229
+ .testing-evidence-card span,
3230
+ .testing-evidence-card b,
3231
+ .testing-evidence-card small,
3232
+ .history-node b,
3233
+ .history-node small,
3234
+ .history-node em,
3235
+ .history-branch b,
3236
+ .history-branch small,
3237
+ .history-branch span,
3238
+ .history-event b,
3239
+ .history-event small,
3240
+ .history-event time,
3241
+ .testing-row b,
3242
+ .testing-row small,
3243
+ .testing-row span {
3244
+ overflow-wrap: anywhere;
3245
+ text-overflow: clip;
3246
+ white-space: normal;
3247
+ }
3248
+ .snapshot-tile,
3249
+ .metric,
3250
+ .success-kpi,
3251
+ .health-card,
3252
+ .stat-cell,
3253
+ .pressure-card,
3254
+ .optimization-signal,
3255
+ .testing-evidence-card {
3256
+ min-height: auto;
3257
+ }
3258
+ }
3259
+ @media (max-width: 480px) {
3260
+ .chart-grid,
3261
+ .overview-grid .chart-grid,
3262
+ .overview-snapshot,
3263
+ .pressure-grid,
3264
+ .health-summary,
3265
+ .time-series-summary,
3266
+ .task-dialog-grid,
3267
+ .work-kpis,
3268
+ .performance-summary,
3269
+ .testing-summary,
3270
+ .optimization-signal-grid,
3271
+ .testing-evidence-grid,
3272
+ .efficiency-summary,
3273
+ .epic-grid,
3274
+ .merge-flow,
3275
+ .success-summary {
3276
+ grid-template-columns: 1fr;
3277
+ }
3278
+ }