mrvn-cli 0.5.28 → 0.6.1

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,1782 @@
1
+ :root {
2
+ --bg: #0f1117;
3
+ --bg-card: #1a1d27;
4
+ --bg-hover: #222632;
5
+ --border: #2a2e3a;
6
+ --text: #e1e4ea;
7
+ --text-dim: #8b8fa4;
8
+ --accent: #6c8cff;
9
+ --accent-dim: #4a6ad4;
10
+ --green: #34d399;
11
+ --amber: #fbbf24;
12
+ --red: #f87171;
13
+ --radius: 8px;
14
+ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
15
+ --mono: "SF Mono", "Fira Code", monospace;
16
+ }
17
+
18
+ * { margin: 0; padding: 0; box-sizing: border-box; }
19
+
20
+ body {
21
+ font-family: var(--font);
22
+ background: var(--bg);
23
+ color: var(--text);
24
+ line-height: 1.6;
25
+ min-height: 100vh;
26
+ }
27
+
28
+ a { color: var(--accent); text-decoration: none; }
29
+ a:hover { text-decoration: underline; }
30
+
31
+ /* Layout */
32
+ .shell {
33
+ display: flex;
34
+ min-height: 100vh;
35
+ }
36
+
37
+ .sidebar {
38
+ width: 220px;
39
+ background: var(--bg-card);
40
+ border-right: 1px solid var(--border);
41
+ padding: 1.5rem 0;
42
+ position: fixed;
43
+ top: 0;
44
+ left: 0;
45
+ bottom: 0;
46
+ overflow-y: auto;
47
+ }
48
+
49
+ .sidebar-brand {
50
+ padding: 0 1.25rem 1.25rem;
51
+ border-bottom: 1px solid var(--border);
52
+ margin-bottom: 1rem;
53
+ }
54
+
55
+ .sidebar-brand h1 {
56
+ font-size: 1.1rem;
57
+ font-weight: 700;
58
+ color: var(--accent);
59
+ letter-spacing: -0.02em;
60
+ }
61
+
62
+ .sidebar-brand .project-name {
63
+ font-size: 0.75rem;
64
+ color: var(--text-dim);
65
+ margin-top: 0.25rem;
66
+ }
67
+
68
+ .sidebar nav a {
69
+ display: block;
70
+ padding: 0.5rem 1.25rem;
71
+ color: var(--text-dim);
72
+ font-size: 0.875rem;
73
+ transition: background 0.15s, color 0.15s;
74
+ }
75
+
76
+ .sidebar nav a:hover {
77
+ background: var(--bg-hover);
78
+ color: var(--text);
79
+ text-decoration: none;
80
+ }
81
+
82
+ .sidebar nav a.active {
83
+ color: var(--accent);
84
+ background: rgba(108, 140, 255, 0.08);
85
+ border-right: 2px solid var(--accent);
86
+ }
87
+
88
+ .nav-group {
89
+ margin-top: 0.75rem;
90
+ padding-top: 0.75rem;
91
+ border-top: 1px solid var(--border);
92
+ }
93
+
94
+ .nav-group-label {
95
+ padding: 0.25rem 1.25rem 0.25rem;
96
+ font-size: 0.65rem;
97
+ text-transform: uppercase;
98
+ letter-spacing: 0.08em;
99
+ color: var(--text-dim);
100
+ font-weight: 600;
101
+ }
102
+
103
+ .main {
104
+ margin-left: 220px;
105
+ flex: 1;
106
+ padding: 2rem 2.5rem;
107
+ max-width: 1200px;
108
+ position: relative;
109
+ transition: max-width 0.2s ease;
110
+ }
111
+ .main.expanded {
112
+ max-width: none;
113
+ }
114
+ .expand-toggle {
115
+ position: absolute;
116
+ top: 1rem;
117
+ right: 1rem;
118
+ background: var(--bg-card);
119
+ border: 1px solid var(--border);
120
+ border-radius: var(--radius);
121
+ color: var(--text-dim);
122
+ cursor: pointer;
123
+ padding: 0.4rem;
124
+ display: flex;
125
+ align-items: center;
126
+ justify-content: center;
127
+ transition: color 0.15s, border-color 0.15s;
128
+ }
129
+ .expand-toggle:hover {
130
+ color: var(--text);
131
+ border-color: var(--text-dim);
132
+ }
133
+ .main.expanded .icon-expand { display: none; }
134
+ .main:not(.expanded) .icon-collapse { display: none; }
135
+
136
+ /* Page header */
137
+ .page-header {
138
+ margin-bottom: 2rem;
139
+ }
140
+
141
+ .page-header h2 {
142
+ font-size: 1.5rem;
143
+ font-weight: 600;
144
+ }
145
+
146
+ .page-header .subtitle {
147
+ color: var(--text-dim);
148
+ font-size: 0.875rem;
149
+ margin-top: 0.25rem;
150
+ }
151
+
152
+ /* Breadcrumb */
153
+ .breadcrumb {
154
+ font-size: 0.8rem;
155
+ color: var(--text-dim);
156
+ margin-bottom: 1rem;
157
+ }
158
+
159
+ .breadcrumb a { color: var(--text-dim); }
160
+ .breadcrumb a:hover { color: var(--accent); }
161
+ .breadcrumb .sep { margin: 0 0.4rem; }
162
+
163
+ /* Card groups */
164
+ .card-group {
165
+ margin-bottom: 1.5rem;
166
+ }
167
+
168
+ .card-group-label {
169
+ font-size: 0.7rem;
170
+ text-transform: uppercase;
171
+ letter-spacing: 0.08em;
172
+ color: var(--text-dim);
173
+ font-weight: 600;
174
+ margin-bottom: 0.5rem;
175
+ }
176
+
177
+ /* Cards grid */
178
+ .cards {
179
+ display: grid;
180
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
181
+ gap: 1rem;
182
+ margin-bottom: 0.5rem;
183
+ }
184
+
185
+ .card {
186
+ background: var(--bg-card);
187
+ border: 1px solid var(--border);
188
+ border-radius: var(--radius);
189
+ padding: 1.25rem;
190
+ transition: border-color 0.15s;
191
+ }
192
+
193
+ .card:hover {
194
+ border-color: var(--accent-dim);
195
+ }
196
+
197
+ .card a { color: inherit; text-decoration: none; display: block; }
198
+ a.card-link { color: inherit; text-decoration: none; cursor: pointer; }
199
+
200
+ .card .card-label {
201
+ font-size: 0.75rem;
202
+ text-transform: uppercase;
203
+ letter-spacing: 0.05em;
204
+ color: var(--text-dim);
205
+ margin-bottom: 0.5rem;
206
+ }
207
+
208
+ .card .card-value {
209
+ font-size: 1.75rem;
210
+ font-weight: 700;
211
+ }
212
+
213
+ .card .card-sub {
214
+ font-size: 0.8rem;
215
+ color: var(--text-dim);
216
+ margin-top: 0.25rem;
217
+ }
218
+
219
+ /* Status badge */
220
+ .badge {
221
+ display: inline-block;
222
+ padding: 0.15rem 0.6rem;
223
+ border-radius: 999px;
224
+ font-size: 0.7rem;
225
+ font-weight: 600;
226
+ text-transform: uppercase;
227
+ letter-spacing: 0.03em;
228
+ white-space: nowrap;
229
+ }
230
+
231
+ .badge-open { background: rgba(108, 140, 255, 0.15); color: var(--accent); }
232
+ .badge-done { background: rgba(52, 211, 153, 0.15); color: var(--green); }
233
+ .badge-in-progress { background: rgba(251, 191, 36, 0.15); color: var(--amber); }
234
+ .badge-draft { background: rgba(139, 143, 164, 0.15); color: var(--text-dim); }
235
+ .badge-closed, .badge-resolved { background: rgba(52, 211, 153, 0.15); color: var(--green); }
236
+ .badge-blocked { background: rgba(248, 113, 113, 0.15); color: var(--red); }
237
+ .badge-superseded { background: rgba(167, 139, 250, 0.15); color: #a78bfa; }
238
+ .badge-default { background: rgba(139, 143, 164, 0.1); color: var(--text-dim); }
239
+ .badge-subtle {
240
+ background: rgba(139, 143, 164, 0.12);
241
+ color: var(--text-dim);
242
+ text-transform: none;
243
+ font-weight: 500;
244
+ }
245
+
246
+ /* Table */
247
+ .table-wrap {
248
+ overflow-x: auto;
249
+ overflow-y: auto;
250
+ max-height: calc(100vh - 280px);
251
+ border: 1px solid var(--border);
252
+ border-radius: var(--radius);
253
+ }
254
+
255
+ table {
256
+ width: 100%;
257
+ min-width: 600px;
258
+ border-collapse: collapse;
259
+ }
260
+
261
+ th {
262
+ text-align: left;
263
+ padding: 0.6rem 0.75rem;
264
+ font-size: 0.7rem;
265
+ text-transform: uppercase;
266
+ letter-spacing: 0.05em;
267
+ color: var(--text-dim);
268
+ border-bottom: 1px solid var(--border);
269
+ position: sticky;
270
+ top: 0;
271
+ background: var(--bg-card);
272
+ z-index: 1;
273
+ }
274
+
275
+ td {
276
+ padding: 0.6rem 0.75rem;
277
+ font-size: 0.875rem;
278
+ border-bottom: 1px solid var(--border);
279
+ }
280
+
281
+ /* Prevent short-content columns from line-wrapping */
282
+ td:first-child,
283
+ th:first-child {
284
+ white-space: nowrap;
285
+ min-width: 4.5rem;
286
+ }
287
+
288
+ td:last-child,
289
+ th:last-child {
290
+ white-space: nowrap;
291
+ }
292
+
293
+ tr:hover td {
294
+ background: var(--bg-hover);
295
+ }
296
+
297
+ /* Hierarchical work-item sub-rows */
298
+ .child-row td {
299
+ font-size: 0.8125rem;
300
+ border-bottom-style: dashed;
301
+ }
302
+ .contribution-row td {
303
+ font-size: 0.8125rem;
304
+ color: var(--text-dim);
305
+ border-bottom-style: dashed;
306
+ }
307
+
308
+ /* GAR */
309
+ .gar-overall {
310
+ text-align: center;
311
+ padding: 2rem;
312
+ margin-bottom: 2rem;
313
+ border-radius: var(--radius);
314
+ border: 1px solid var(--border);
315
+ background: var(--bg-card);
316
+ }
317
+
318
+ .gar-overall .dot {
319
+ width: 60px;
320
+ height: 60px;
321
+ border-radius: 50%;
322
+ display: inline-block;
323
+ margin-bottom: 0.75rem;
324
+ }
325
+
326
+ .gar-overall .label {
327
+ font-size: 1.1rem;
328
+ font-weight: 600;
329
+ text-transform: uppercase;
330
+ }
331
+
332
+ /* Compact overall status bar */
333
+ .gar-overall-compact {
334
+ display: flex;
335
+ align-items: center;
336
+ gap: 1.5rem;
337
+ padding: 0.75rem 1.25rem;
338
+ margin-bottom: 1rem;
339
+ border-radius: var(--radius);
340
+ border: 1px solid var(--border);
341
+ background: var(--bg-card);
342
+ }
343
+
344
+ .gar-overall-status {
345
+ display: flex;
346
+ align-items: center;
347
+ gap: 0.6rem;
348
+ flex-shrink: 0;
349
+ }
350
+
351
+ .gar-overall-status .dot {
352
+ width: 28px;
353
+ height: 28px;
354
+ border-radius: 50%;
355
+ }
356
+
357
+ .gar-overall-status .label {
358
+ font-size: 1rem;
359
+ font-weight: 700;
360
+ letter-spacing: 0.05em;
361
+ }
362
+
363
+ .gar-overall-metrics {
364
+ display: flex;
365
+ flex-wrap: wrap;
366
+ gap: 0.5rem;
367
+ }
368
+
369
+ .gar-metric {
370
+ font-size: 0.78rem;
371
+ color: var(--text-dim);
372
+ background: rgba(255,255,255,0.05);
373
+ padding: 0.2rem 0.6rem;
374
+ border-radius: 4px;
375
+ }
376
+
377
+ .gar-areas {
378
+ display: grid;
379
+ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
380
+ gap: 1rem;
381
+ }
382
+
383
+ .gar-areas-3col {
384
+ display: grid;
385
+ grid-template-columns: repeat(3, 1fr);
386
+ gap: 1rem;
387
+ }
388
+
389
+ .gar-area {
390
+ background: var(--bg-card);
391
+ border: 1px solid var(--border);
392
+ border-radius: var(--radius);
393
+ padding: 1.25rem;
394
+ display: flex;
395
+ flex-direction: column;
396
+ }
397
+
398
+ .gar-area .area-header {
399
+ display: flex;
400
+ align-items: center;
401
+ gap: 0.6rem;
402
+ margin-bottom: 0.75rem;
403
+ }
404
+
405
+ .gar-area .area-dot {
406
+ width: 14px;
407
+ height: 14px;
408
+ border-radius: 50%;
409
+ flex-shrink: 0;
410
+ }
411
+
412
+ .gar-area .area-name {
413
+ font-weight: 600;
414
+ font-size: 1rem;
415
+ }
416
+
417
+ .gar-area .area-summary {
418
+ font-size: 0.85rem;
419
+ color: var(--text-dim);
420
+ margin-bottom: 0.75rem;
421
+ }
422
+
423
+ .gar-area ul {
424
+ list-style: none;
425
+ font-size: 0.8rem;
426
+ max-height: 200px;
427
+ overflow-y: auto;
428
+ scrollbar-width: thin;
429
+ }
430
+
431
+ .gar-area li {
432
+ padding: 0.2rem 0;
433
+ color: var(--text-dim);
434
+ }
435
+
436
+ .gar-area li .ref-id {
437
+ color: var(--accent);
438
+ font-family: var(--mono);
439
+ margin-right: 0.4rem;
440
+ }
441
+
442
+ .dot-green { background: var(--green); }
443
+ .dot-amber { background: var(--amber); }
444
+ .dot-red { background: var(--red); }
445
+
446
+ /* Board / Kanban */
447
+ .board {
448
+ display: flex;
449
+ gap: 1rem;
450
+ overflow-x: auto;
451
+ scrollbar-width: thin;
452
+ padding-bottom: 1rem;
453
+ }
454
+
455
+ .board-column {
456
+ min-width: 240px;
457
+ max-width: 300px;
458
+ flex: 0 0 auto;
459
+ }
460
+
461
+ .board-column-header {
462
+ font-size: 0.75rem;
463
+ text-transform: uppercase;
464
+ letter-spacing: 0.05em;
465
+ color: var(--text-dim);
466
+ padding: 0.5rem 0.75rem;
467
+ border-bottom: 2px solid var(--border);
468
+ margin-bottom: 0.5rem;
469
+ display: flex;
470
+ justify-content: space-between;
471
+ flex-shrink: 0;
472
+ }
473
+
474
+ .board-column-header .count {
475
+ background: var(--bg-hover);
476
+ padding: 0 0.5rem;
477
+ border-radius: 999px;
478
+ font-size: 0.7rem;
479
+ }
480
+
481
+ .board-card {
482
+ background: var(--bg-card);
483
+ border: 1px solid var(--border);
484
+ border-radius: var(--radius);
485
+ padding: 0.75rem;
486
+ margin-bottom: 0.5rem;
487
+ transition: border-color 0.15s;
488
+ }
489
+
490
+ .board-card:hover {
491
+ border-color: var(--accent-dim);
492
+ }
493
+
494
+ .board-card .bc-id {
495
+ font-family: var(--mono);
496
+ font-size: 0.7rem;
497
+ color: var(--accent);
498
+ }
499
+
500
+ .board-card .bc-title {
501
+ font-size: 0.85rem;
502
+ margin: 0.25rem 0;
503
+ }
504
+
505
+ .board-card .bc-owner {
506
+ font-size: 0.7rem;
507
+ color: var(--text-dim);
508
+ }
509
+
510
+ /* Detail page */
511
+ .detail-meta {
512
+ background: var(--bg-card);
513
+ border: 1px solid var(--border);
514
+ border-radius: var(--radius);
515
+ padding: 1.25rem;
516
+ margin-bottom: 1.5rem;
517
+ }
518
+
519
+ .detail-meta dl {
520
+ display: grid;
521
+ grid-template-columns: 120px 1fr;
522
+ gap: 0.4rem 1rem;
523
+ }
524
+
525
+ .detail-meta dt {
526
+ font-size: 0.75rem;
527
+ text-transform: uppercase;
528
+ letter-spacing: 0.05em;
529
+ color: var(--text-dim);
530
+ }
531
+
532
+ .detail-meta dd {
533
+ font-size: 0.875rem;
534
+ }
535
+
536
+ .detail-content {
537
+ background: var(--bg-card);
538
+ border: 1px solid var(--border);
539
+ border-radius: var(--radius);
540
+ padding: 1.5rem;
541
+ line-height: 1.7;
542
+ }
543
+
544
+ .detail-content h1, .detail-content h2, .detail-content h3 {
545
+ margin: 1.25rem 0 0.5rem;
546
+ font-weight: 600;
547
+ }
548
+
549
+ .detail-content h1 { font-size: 1.3rem; }
550
+ .detail-content h2 { font-size: 1.15rem; }
551
+ .detail-content h3 { font-size: 1rem; }
552
+ .detail-content p { margin-bottom: 0.75rem; }
553
+ .detail-content ul, .detail-content ol { margin: 0.5rem 0 0.75rem 1.5rem; }
554
+ .detail-content li { margin-bottom: 0.25rem; }
555
+ .detail-content code {
556
+ background: var(--bg-hover);
557
+ padding: 0.1rem 0.35rem;
558
+ border-radius: 3px;
559
+ font-family: var(--mono);
560
+ font-size: 0.85em;
561
+ }
562
+ .detail-content hr {
563
+ border: none;
564
+ border-top: 1px solid var(--border);
565
+ margin: 1.25rem 0;
566
+ }
567
+ .detail-content .table-wrap {
568
+ margin: 0.75rem 0;
569
+ }
570
+
571
+ /* Artifact cross-links */
572
+ a.artifact-link {
573
+ color: var(--accent);
574
+ text-decoration: none;
575
+ font-weight: 500;
576
+ border-bottom: 1px dotted var(--accent);
577
+ }
578
+ a.artifact-link:hover {
579
+ border-bottom-style: solid;
580
+ }
581
+
582
+ /* Assessment timeline */
583
+ .assessment-timeline {
584
+ margin-top: 1.5rem;
585
+ }
586
+ .assessment-timeline h3 {
587
+ font-size: 1rem;
588
+ font-weight: 600;
589
+ margin-bottom: 0.75rem;
590
+ }
591
+ .assessment-entry {
592
+ background: var(--bg-card);
593
+ border: 1px solid var(--border);
594
+ border-radius: var(--radius);
595
+ padding: 0.75rem 1rem;
596
+ margin-bottom: 0.75rem;
597
+ }
598
+ .assessment-entry.assessment-latest {
599
+ border-left: 3px solid var(--accent);
600
+ }
601
+ .assessment-header {
602
+ display: flex;
603
+ align-items: center;
604
+ gap: 0.5rem;
605
+ margin-bottom: 0.5rem;
606
+ }
607
+ .assessment-date {
608
+ font-size: 0.8rem;
609
+ color: var(--text-dim);
610
+ font-family: var(--mono);
611
+ }
612
+ .assessment-comment {
613
+ font-size: 0.875rem;
614
+ line-height: 1.6;
615
+ margin-bottom: 0.5rem;
616
+ }
617
+ .assessment-stat {
618
+ font-size: 0.8rem;
619
+ color: var(--text-dim);
620
+ margin-bottom: 0.25rem;
621
+ }
622
+ .assessment-stat strong {
623
+ color: var(--text);
624
+ }
625
+ .assessment-signals {
626
+ list-style: none;
627
+ padding: 0;
628
+ margin: 0.5rem 0 0;
629
+ }
630
+ .assessment-signals li {
631
+ font-size: 0.8rem;
632
+ padding: 0.15rem 0;
633
+ }
634
+ .progress-bar-inline {
635
+ font-family: var(--mono);
636
+ font-size: 0.75rem;
637
+ letter-spacing: -0.5px;
638
+ }
639
+
640
+ /* Filters */
641
+ .filters {
642
+ display: flex;
643
+ gap: 0.75rem;
644
+ margin-bottom: 1.5rem;
645
+ flex-wrap: wrap;
646
+ }
647
+
648
+ .filters select {
649
+ background: var(--bg-card);
650
+ border: 1px solid var(--border);
651
+ color: var(--text);
652
+ padding: 0.4rem 0.75rem;
653
+ border-radius: var(--radius);
654
+ font-size: 0.8rem;
655
+ cursor: pointer;
656
+ }
657
+
658
+ .filters select:focus {
659
+ outline: none;
660
+ border-color: var(--accent);
661
+ }
662
+
663
+ /* Empty state */
664
+ .empty {
665
+ text-align: center;
666
+ padding: 3rem;
667
+ color: var(--text-dim);
668
+ }
669
+
670
+ .empty p { font-size: 0.9rem; }
671
+
672
+ /* Section heading */
673
+ .section-title {
674
+ font-size: 0.9rem;
675
+ font-weight: 600;
676
+ margin: 1.5rem 0 0.75rem;
677
+ }
678
+
679
+ /* Priority */
680
+ .priority-high { color: var(--red); }
681
+ .priority-medium { color: var(--amber); }
682
+ .priority-low { color: var(--green); }
683
+
684
+ /* Blocker / Risk detail cards */
685
+ .blocker-card {
686
+ background: var(--bg-card);
687
+ border: 1px solid var(--border);
688
+ border-radius: var(--radius);
689
+ padding: 1.25rem;
690
+ margin-bottom: 1rem;
691
+ }
692
+ .blocker-card-header {
693
+ display: flex;
694
+ align-items: center;
695
+ gap: 0.5rem;
696
+ font-size: 0.85rem;
697
+ margin-bottom: 0.25rem;
698
+ }
699
+ .blocker-card-title {
700
+ margin: 0.25rem 0 0.5rem;
701
+ font-size: 1rem;
702
+ }
703
+ .blocker-card-meta {
704
+ display: flex;
705
+ flex-wrap: wrap;
706
+ gap: 1rem;
707
+ font-size: 0.85rem;
708
+ color: var(--text-dim);
709
+ margin-bottom: 0.75rem;
710
+ }
711
+ .blocker-card-content {
712
+ border-top: 1px solid var(--border);
713
+ padding-top: 0.75rem;
714
+ font-size: 0.9rem;
715
+ }
716
+ .risk-assessment-content {
717
+ background: var(--bg);
718
+ border: 1px solid var(--border);
719
+ border-left: 3px solid var(--amber);
720
+ border-radius: var(--radius);
721
+ padding: 1rem 1.25rem;
722
+ margin-top: 0.75rem;
723
+ font-size: 0.9rem;
724
+ }
725
+ .risk-assess-btn {
726
+ font-size: 0.8rem;
727
+ padding: 0.4rem 0.8rem;
728
+ margin-top: 0.75rem;
729
+ }
730
+ .risk-assess-loading {
731
+ margin-top: 0.75rem;
732
+ font-size: 0.85rem;
733
+ }
734
+ .risk-assess-error {
735
+ margin-top: 0.5rem;
736
+ }
737
+ .risk-assessment-label {
738
+ font-size: 0.7rem;
739
+ text-transform: uppercase;
740
+ letter-spacing: 0.08em;
741
+ color: var(--amber);
742
+ font-weight: 600;
743
+ margin-bottom: 0.5rem;
744
+ }
745
+
746
+ /* Health */
747
+ .health-section-title {
748
+ font-size: 1.1rem;
749
+ font-weight: 600;
750
+ margin: 2rem 0 1rem;
751
+ color: var(--text);
752
+ }
753
+
754
+ /* Mermaid diagrams */
755
+ .mermaid-container {
756
+ background: var(--bg-card);
757
+ border: 1px solid var(--border);
758
+ border-radius: var(--radius);
759
+ padding: 1.5rem;
760
+ margin: 1rem 0;
761
+ overflow-x: auto;
762
+ }
763
+
764
+ .mermaid-container .mermaid {
765
+ display: flex;
766
+ justify-content: center;
767
+ }
768
+
769
+ .mermaid-empty {
770
+ text-align: center;
771
+ color: var(--text-dim);
772
+ font-size: 0.875rem;
773
+ }
774
+
775
+ .mermaid-row {
776
+ display: grid;
777
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
778
+ gap: 1rem;
779
+ }
780
+
781
+ .mermaid-row .mermaid-container {
782
+ margin: 0;
783
+ }
784
+
785
+ /* Three-column artifact flow */
786
+ .flow-diagram {
787
+ background: var(--bg-card);
788
+ border: 1px solid var(--border);
789
+ border-radius: var(--radius);
790
+ padding: 1.25rem;
791
+ position: relative;
792
+ overflow-x: auto;
793
+ height: 420px;
794
+ min-height: 200px;
795
+ max-height: 90vh;
796
+ overflow-y: auto;
797
+ resize: vertical;
798
+ }
799
+
800
+ .flow-lines {
801
+ position: absolute;
802
+ top: 0;
803
+ left: 0;
804
+ pointer-events: none;
805
+ }
806
+
807
+ .flow-columns {
808
+ display: flex;
809
+ gap: 3rem;
810
+ position: relative;
811
+ min-width: 600px;
812
+ }
813
+
814
+ .flow-column {
815
+ flex: 1;
816
+ min-width: 0;
817
+ display: flex;
818
+ flex-direction: column;
819
+ gap: 0.5rem;
820
+ }
821
+
822
+ .flow-column-header {
823
+ font-size: 0.7rem;
824
+ text-transform: uppercase;
825
+ letter-spacing: 0.06em;
826
+ color: var(--text-dim);
827
+ font-weight: 600;
828
+ padding-bottom: 0.4rem;
829
+ border-bottom: 1px solid var(--border);
830
+ margin-bottom: 0.25rem;
831
+ }
832
+
833
+ .flow-node {
834
+ padding: 0.5rem 0.65rem;
835
+ border-radius: 6px;
836
+ border-left: 3px solid var(--border);
837
+ background: var(--bg);
838
+ transition: border-color 0.15s, background 0.15s;
839
+ }
840
+
841
+ .flow-node:hover {
842
+ background: var(--bg-hover);
843
+ }
844
+
845
+ .flow-node-id {
846
+ display: inline-block;
847
+ font-family: var(--mono);
848
+ font-size: 0.65rem;
849
+ color: var(--accent);
850
+ margin-bottom: 0.15rem;
851
+ text-decoration: none;
852
+ }
853
+
854
+ .flow-node-id:hover {
855
+ text-decoration: underline;
856
+ }
857
+
858
+ .flow-node-title {
859
+ display: block;
860
+ font-size: 0.8rem;
861
+ }
862
+
863
+ .flow-done { border-left-color: var(--green); }
864
+ .flow-active { border-left-color: var(--amber); }
865
+ .flow-blocked { border-left-color: var(--red); }
866
+ .flow-default { border-left-color: var(--accent-dim); }
867
+
868
+ .flow-node { cursor: pointer; transition: opacity 0.2s, border-color 0.15s, background 0.15s; }
869
+ .flow-dim { opacity: 0.2; }
870
+ .flow-lit { background: var(--bg-hover); }
871
+ .flow-line-lit { stroke: var(--accent) !important; stroke-width: 2 !important; }
872
+ .flow-line-dim { opacity: 0.08; }
873
+
874
+ /* Relationship graph: self-node emphasis */
875
+ .flow-self {
876
+ border-left-width: 4px;
877
+ background: var(--bg-hover);
878
+ box-shadow: 0 0 0 1px var(--accent-dim);
879
+ }
880
+ .flow-self .flow-node-id {
881
+ color: var(--accent);
882
+ font-weight: 600;
883
+ }
884
+
885
+ /* Relationship graph: external nodes */
886
+ .flow-external {
887
+ border-left-color: var(--text-dim);
888
+ border-left-style: dashed;
889
+ }
890
+
891
+ /* Relationship graph: empty state */
892
+ .flow-empty {
893
+ padding: 2rem;
894
+ text-align: center;
895
+ color: var(--text-dim);
896
+ font-size: 0.85rem;
897
+ }
898
+
899
+ /* Lineage timeline */
900
+ .lineage-timeline {
901
+ margin-top: 1.5rem;
902
+ }
903
+ .lineage-timeline h3 {
904
+ font-size: 1rem;
905
+ font-weight: 600;
906
+ margin-bottom: 0.75rem;
907
+ }
908
+ .lineage-entry {
909
+ display: flex;
910
+ gap: 0.5rem;
911
+ padding: 0.4rem 0;
912
+ padding-left: 0.25rem;
913
+ }
914
+ .lineage-marker {
915
+ flex-shrink: 0;
916
+ font-size: 0.7rem;
917
+ line-height: 1.4rem;
918
+ }
919
+ .lineage-content {
920
+ display: flex;
921
+ flex-direction: column;
922
+ gap: 0.1rem;
923
+ }
924
+ .lineage-date {
925
+ font-size: 0.7rem;
926
+ color: var(--text-dim);
927
+ font-family: var(--mono);
928
+ }
929
+ .lineage-label {
930
+ font-size: 0.85rem;
931
+ }
932
+
933
+ /* Gantt truncation note */
934
+ .mermaid-note {
935
+ font-size: 0.75rem;
936
+ color: var(--text-dim);
937
+ text-align: right;
938
+ margin-bottom: 0.5rem;
939
+ }
940
+
941
+ /* HTML Gantt chart */
942
+ .gantt {
943
+ background: var(--bg-card);
944
+ border: 1px solid var(--border);
945
+ border-radius: var(--radius);
946
+ padding: 1.25rem 1.25rem 1.25rem 0;
947
+ position: relative;
948
+ overflow-x: auto;
949
+ }
950
+
951
+ .gantt-chart {
952
+ min-width: 600px;
953
+ }
954
+
955
+ .gantt-overlay {
956
+ position: absolute;
957
+ top: 0;
958
+ left: 0;
959
+ right: 0;
960
+ bottom: 0;
961
+ pointer-events: none;
962
+ display: flex;
963
+ }
964
+
965
+ .gantt-header,
966
+ .gantt-section-row,
967
+ .gantt-row,
968
+ .gantt-overlay {
969
+ display: flex;
970
+ align-items: center;
971
+ }
972
+
973
+ .gantt-label {
974
+ width: 200px;
975
+ min-width: 200px;
976
+ padding: 0.3rem 0.75rem;
977
+ font-size: 0.8rem;
978
+ color: var(--text-dim);
979
+ text-align: right;
980
+ white-space: nowrap;
981
+ overflow: hidden;
982
+ text-overflow: ellipsis;
983
+ }
984
+
985
+ .gantt-section-label {
986
+ font-weight: 600;
987
+ color: var(--text);
988
+ font-size: 0.75rem;
989
+ text-transform: uppercase;
990
+ letter-spacing: 0.03em;
991
+ padding-top: 0.6rem;
992
+ }
993
+
994
+ .gantt-track {
995
+ flex: 1;
996
+ position: relative;
997
+ height: 28px;
998
+ min-width: 0;
999
+ }
1000
+
1001
+ .gantt-section-row .gantt-track {
1002
+ height: 20px;
1003
+ }
1004
+
1005
+ .gantt-section-bg {
1006
+ position: absolute;
1007
+ top: 0;
1008
+ bottom: 0;
1009
+ background: var(--bg-hover);
1010
+ border-radius: 3px;
1011
+ opacity: 0.4;
1012
+ }
1013
+
1014
+ .gantt-bar {
1015
+ position: absolute;
1016
+ top: 4px;
1017
+ bottom: 4px;
1018
+ border-radius: 4px;
1019
+ min-width: 6px;
1020
+ transition: opacity 0.15s;
1021
+ }
1022
+
1023
+ .gantt-bar:hover {
1024
+ opacity: 0.85;
1025
+ }
1026
+
1027
+ .gantt-bar-done {
1028
+ background: var(--green);
1029
+ }
1030
+
1031
+ .gantt-bar-active {
1032
+ background: var(--amber);
1033
+ }
1034
+
1035
+ .gantt-bar-blocked {
1036
+ background: var(--red);
1037
+ }
1038
+
1039
+ .gantt-bar-default {
1040
+ background: var(--accent-dim);
1041
+ }
1042
+
1043
+ .gantt-dates {
1044
+ height: 24px;
1045
+ border-bottom: 1px solid var(--border);
1046
+ margin-bottom: 0.25rem;
1047
+ }
1048
+
1049
+ .gantt-marker {
1050
+ position: absolute;
1051
+ top: 0;
1052
+ bottom: 0;
1053
+ border-left: 1px solid var(--border);
1054
+ }
1055
+
1056
+ .gantt-marker span {
1057
+ position: absolute;
1058
+ top: 2px;
1059
+ left: 6px;
1060
+ font-size: 0.65rem;
1061
+ color: var(--text-dim);
1062
+ white-space: nowrap;
1063
+ }
1064
+
1065
+ .gantt-grid-line {
1066
+ position: absolute;
1067
+ top: 0;
1068
+ bottom: 0;
1069
+ width: 1px;
1070
+ background: var(--border);
1071
+ opacity: 0.35;
1072
+ }
1073
+
1074
+ .gantt-sprint-line {
1075
+ position: absolute;
1076
+ top: 0;
1077
+ bottom: 0;
1078
+ width: 1px;
1079
+ background: var(--text-dim);
1080
+ opacity: 0.3;
1081
+ }
1082
+
1083
+ .gantt-today {
1084
+ position: absolute;
1085
+ top: 0;
1086
+ bottom: 0;
1087
+ width: 3px;
1088
+ background: var(--red);
1089
+ opacity: 0.8;
1090
+ border-radius: 1px;
1091
+ }
1092
+
1093
+ /* Sprint band in timeline */
1094
+ .gantt-sprint-band-row {
1095
+ border-bottom: 1px solid var(--border);
1096
+ margin-bottom: 0.25rem;
1097
+ }
1098
+
1099
+ .gantt-sprint-band {
1100
+ height: 32px;
1101
+ }
1102
+
1103
+ .gantt-sprint-block {
1104
+ position: absolute;
1105
+ top: 2px;
1106
+ bottom: 2px;
1107
+ background: var(--bg-hover);
1108
+ border: 1px solid var(--border);
1109
+ border-radius: 4px;
1110
+ font-size: 0.65rem;
1111
+ color: var(--text-dim);
1112
+ display: flex;
1113
+ align-items: center;
1114
+ justify-content: center;
1115
+ overflow: hidden;
1116
+ white-space: nowrap;
1117
+ text-overflow: ellipsis;
1118
+ padding: 0 0.4rem;
1119
+ }
1120
+
1121
+ /* Pie chart color overrides */
1122
+ .mermaid-container .pieCircle {
1123
+ stroke: var(--bg-card);
1124
+ }
1125
+
1126
+ .mermaid-container text.slice {
1127
+ fill: var(--bg) !important;
1128
+ font-weight: 600;
1129
+ }
1130
+
1131
+ /* Urgency row indicators */
1132
+ .urgency-row-overdue { border-left: 3px solid var(--red); }
1133
+ .urgency-row-due-3d { border-left: 3px solid var(--amber); }
1134
+ .urgency-row-due-7d { border-left: 3px solid #e2a308; }
1135
+
1136
+ /* Urgency badge pills */
1137
+ .urgency-badge-overdue { background: rgba(248, 113, 113, 0.15); color: var(--red); }
1138
+ .urgency-badge-due-3d { background: rgba(251, 191, 36, 0.15); color: var(--amber); }
1139
+ .urgency-badge-due-7d { background: rgba(226, 163, 8, 0.15); color: #e2a308; }
1140
+ .urgency-badge-upcoming { background: rgba(108, 140, 255, 0.15); color: var(--accent); }
1141
+ .urgency-badge-later { background: rgba(139, 143, 164, 0.1); color: var(--text-dim); }
1142
+
1143
+ /* Trending */
1144
+ .trending-rank {
1145
+ display: inline-flex;
1146
+ align-items: center;
1147
+ justify-content: center;
1148
+ width: 24px;
1149
+ height: 24px;
1150
+ border-radius: 50%;
1151
+ background: var(--bg-hover);
1152
+ font-size: 0.75rem;
1153
+ font-weight: 600;
1154
+ color: var(--text-dim);
1155
+ }
1156
+
1157
+ .trending-score {
1158
+ display: inline-block;
1159
+ padding: 0.15rem 0.6rem;
1160
+ border-radius: 999px;
1161
+ font-size: 0.7rem;
1162
+ font-weight: 700;
1163
+ background: rgba(108, 140, 255, 0.15);
1164
+ color: var(--accent);
1165
+ }
1166
+
1167
+ .signal-tag {
1168
+ display: inline-block;
1169
+ padding: 0.1rem 0.45rem;
1170
+ border-radius: 4px;
1171
+ font-size: 0.65rem;
1172
+ background: var(--bg-hover);
1173
+ color: var(--text-dim);
1174
+ margin-right: 0.25rem;
1175
+ margin-bottom: 0.15rem;
1176
+ white-space: nowrap;
1177
+ }
1178
+
1179
+ .text-dim { color: var(--text-dim); }
1180
+
1181
+ /* Persona switcher */
1182
+ .persona-switcher {
1183
+ padding: 0.5rem 1.25rem 0.75rem;
1184
+ border-bottom: 1px solid var(--border);
1185
+ margin-bottom: 0.5rem;
1186
+ display: flex;
1187
+ align-items: center;
1188
+ gap: 0.5rem;
1189
+ }
1190
+
1191
+ .persona-label {
1192
+ font-size: 0.65rem;
1193
+ text-transform: uppercase;
1194
+ letter-spacing: 0.06em;
1195
+ color: var(--text-dim);
1196
+ font-weight: 600;
1197
+ }
1198
+
1199
+ .persona-select {
1200
+ flex: 1;
1201
+ background: var(--bg);
1202
+ border: 1px solid var(--border);
1203
+ color: var(--text);
1204
+ padding: 0.3rem 0.5rem;
1205
+ border-radius: var(--radius);
1206
+ font-size: 0.8rem;
1207
+ cursor: pointer;
1208
+ font-family: var(--font);
1209
+ }
1210
+
1211
+ .persona-select:focus {
1212
+ outline: none;
1213
+ border-color: var(--persona-accent, var(--accent));
1214
+ }
1215
+
1216
+ /* Persona banner (first-visit picker) */
1217
+ .persona-banner {
1218
+ background: var(--bg-card);
1219
+ border: 1px solid var(--border);
1220
+ border-radius: var(--radius);
1221
+ padding: 1.5rem;
1222
+ margin-bottom: 2rem;
1223
+ }
1224
+
1225
+ .persona-banner-header {
1226
+ display: flex;
1227
+ align-items: center;
1228
+ justify-content: space-between;
1229
+ margin-bottom: 0.25rem;
1230
+ }
1231
+
1232
+ .persona-banner-header h3 {
1233
+ font-size: 1.1rem;
1234
+ font-weight: 600;
1235
+ }
1236
+
1237
+ .persona-banner-dismiss {
1238
+ background: none;
1239
+ border: none;
1240
+ color: var(--text-dim);
1241
+ font-size: 1.25rem;
1242
+ cursor: pointer;
1243
+ padding: 0.25rem;
1244
+ line-height: 1;
1245
+ }
1246
+
1247
+ .persona-banner-dismiss:hover {
1248
+ color: var(--text);
1249
+ }
1250
+
1251
+ .persona-banner-subtitle {
1252
+ color: var(--text-dim);
1253
+ font-size: 0.85rem;
1254
+ margin-bottom: 1rem;
1255
+ }
1256
+
1257
+ .persona-banner-options {
1258
+ display: grid;
1259
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
1260
+ gap: 0.75rem;
1261
+ }
1262
+
1263
+ .persona-banner-option {
1264
+ display: block;
1265
+ background: var(--bg);
1266
+ border: 1px solid var(--border);
1267
+ border-radius: var(--radius);
1268
+ padding: 1rem;
1269
+ text-decoration: none;
1270
+ color: inherit;
1271
+ transition: border-color 0.15s, background 0.15s;
1272
+ border-left: 3px solid var(--persona-card-accent, var(--accent));
1273
+ }
1274
+
1275
+ .persona-banner-option:hover {
1276
+ border-color: var(--persona-card-accent, var(--accent));
1277
+ background: var(--bg-hover);
1278
+ text-decoration: none;
1279
+ }
1280
+
1281
+ .persona-banner-name {
1282
+ font-weight: 600;
1283
+ font-size: 0.95rem;
1284
+ margin-bottom: 0.25rem;
1285
+ }
1286
+
1287
+ .persona-banner-desc {
1288
+ font-size: 0.8rem;
1289
+ color: var(--text-dim);
1290
+ }
1291
+
1292
+ /* Persona accent override */
1293
+ .shell[style*="--persona-accent"] .sidebar nav a.active {
1294
+ color: var(--persona-accent);
1295
+ background: rgba(108, 140, 255, 0.08);
1296
+ border-right-color: var(--persona-accent);
1297
+ }
1298
+
1299
+ .shell[style*="--persona-accent"] .sidebar-brand h1 {
1300
+ color: var(--persona-accent);
1301
+ }
1302
+
1303
+ /* Persona page placeholder */
1304
+ .persona-placeholder {
1305
+ text-align: center;
1306
+ padding: 3rem;
1307
+ color: var(--text-dim);
1308
+ }
1309
+
1310
+ .persona-placeholder h3 {
1311
+ font-size: 1.1rem;
1312
+ font-weight: 600;
1313
+ margin-bottom: 0.5rem;
1314
+ color: var(--text);
1315
+ }
1316
+
1317
+ /* Sprint Summary */
1318
+ .sprint-goal {
1319
+ background: var(--bg-card);
1320
+ border: 1px solid var(--border);
1321
+ border-radius: var(--radius);
1322
+ padding: 0.75rem 1rem;
1323
+ margin-bottom: 1rem;
1324
+ font-size: 0.9rem;
1325
+ color: var(--text);
1326
+ }
1327
+
1328
+ .sprint-progress-bar {
1329
+ position: relative;
1330
+ height: 24px;
1331
+ background: var(--bg-card);
1332
+ border: 1px solid var(--border);
1333
+ border-radius: 12px;
1334
+ margin-bottom: 1.25rem;
1335
+ overflow: hidden;
1336
+ }
1337
+
1338
+ .sprint-progress-fill {
1339
+ height: 100%;
1340
+ background: linear-gradient(90deg, var(--accent-dim), var(--accent));
1341
+ border-radius: 12px;
1342
+ transition: width 0.3s ease;
1343
+ }
1344
+
1345
+ .sprint-progress-label {
1346
+ position: absolute;
1347
+ top: 50%;
1348
+ left: 50%;
1349
+ transform: translate(-50%, -50%);
1350
+ font-size: 0.7rem;
1351
+ font-weight: 700;
1352
+ color: var(--text);
1353
+ }
1354
+
1355
+ .sprint-ai-section {
1356
+ margin-top: 2rem;
1357
+ background: var(--bg-card);
1358
+ border: 1px solid var(--border);
1359
+ border-radius: var(--radius);
1360
+ padding: 1.5rem;
1361
+ }
1362
+
1363
+ .sprint-ai-section h3 {
1364
+ font-size: 1rem;
1365
+ font-weight: 600;
1366
+ margin-bottom: 0.5rem;
1367
+ }
1368
+
1369
+ .sprint-generate-btn {
1370
+ background: var(--accent);
1371
+ color: #fff;
1372
+ border: none;
1373
+ border-radius: var(--radius);
1374
+ padding: 0.5rem 1.25rem;
1375
+ font-size: 0.85rem;
1376
+ font-weight: 600;
1377
+ cursor: pointer;
1378
+ margin-top: 0.75rem;
1379
+ transition: background 0.15s;
1380
+ }
1381
+
1382
+ .sprint-generate-btn:hover:not(:disabled) {
1383
+ background: var(--accent-dim);
1384
+ }
1385
+
1386
+ .sprint-generate-btn:disabled {
1387
+ opacity: 0.5;
1388
+ cursor: not-allowed;
1389
+ }
1390
+
1391
+ .sprint-loading {
1392
+ display: flex;
1393
+ align-items: center;
1394
+ gap: 0.75rem;
1395
+ padding: 1rem 0;
1396
+ color: var(--text-dim);
1397
+ font-size: 0.85rem;
1398
+ }
1399
+
1400
+ .sprint-spinner {
1401
+ width: 20px;
1402
+ height: 20px;
1403
+ border: 2px solid var(--border);
1404
+ border-top-color: var(--accent);
1405
+ border-radius: 50%;
1406
+ animation: sprint-spin 0.8s linear infinite;
1407
+ }
1408
+
1409
+ @keyframes sprint-spin {
1410
+ to { transform: rotate(360deg); }
1411
+ }
1412
+
1413
+ .sprint-error {
1414
+ color: var(--red);
1415
+ font-size: 0.85rem;
1416
+ padding: 0.5rem 0;
1417
+ }
1418
+
1419
+ .sprint-ai-section .detail-content {
1420
+ margin-top: 1rem;
1421
+ }
1422
+
1423
+ /* Collapsible sections */
1424
+ .collapsible-header {
1425
+ cursor: pointer;
1426
+ display: flex;
1427
+ align-items: center;
1428
+ gap: 0.4rem;
1429
+ user-select: none;
1430
+ }
1431
+
1432
+ .collapsible-header:hover {
1433
+ color: var(--accent);
1434
+ }
1435
+
1436
+ .collapsible-chevron {
1437
+ transition: transform 0.2s ease;
1438
+ flex-shrink: 0;
1439
+ }
1440
+
1441
+ .collapsible.collapsed .collapsible-chevron {
1442
+ transform: rotate(-90deg);
1443
+ }
1444
+
1445
+ .collapsible-body {
1446
+ max-height: 5000px;
1447
+ transition: max-height 0.3s ease, opacity 0.2s ease;
1448
+ opacity: 1;
1449
+ }
1450
+
1451
+ .collapsible.collapsed .collapsible-body {
1452
+ max-height: 0;
1453
+ opacity: 0;
1454
+ overflow: hidden;
1455
+ }
1456
+
1457
+ /* Sortable table headers */
1458
+ .sortable-th {
1459
+ cursor: pointer;
1460
+ user-select: none;
1461
+ }
1462
+ .sortable-th:hover {
1463
+ text-decoration: underline;
1464
+ color: var(--text);
1465
+ }
1466
+ .sort-arrow {
1467
+ display: inline-block;
1468
+ margin-left: 0.3rem;
1469
+ font-size: 0.65rem;
1470
+ opacity: 0.7;
1471
+ }
1472
+
1473
+ /* Persona picker (landing page) */
1474
+ .persona-picker {
1475
+ text-align: center;
1476
+ padding: 4rem 2rem;
1477
+ max-width: 700px;
1478
+ margin: 0 auto;
1479
+ }
1480
+
1481
+ .persona-picker h2 {
1482
+ font-size: 1.5rem;
1483
+ font-weight: 700;
1484
+ margin-bottom: 0.5rem;
1485
+ }
1486
+
1487
+ .persona-picker-subtitle {
1488
+ color: var(--text-dim);
1489
+ font-size: 0.9rem;
1490
+ margin-bottom: 2rem;
1491
+ }
1492
+
1493
+ .persona-picker-grid {
1494
+ display: grid;
1495
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
1496
+ gap: 1rem;
1497
+ }
1498
+
1499
+ .persona-picker-card {
1500
+ display: block;
1501
+ background: var(--bg-card);
1502
+ border: 1px solid var(--border);
1503
+ border-left: 4px solid var(--persona-card-accent, var(--accent));
1504
+ border-radius: var(--radius);
1505
+ padding: 1.5rem 1.25rem;
1506
+ text-decoration: none;
1507
+ color: inherit;
1508
+ text-align: left;
1509
+ transition: border-color 0.15s, background 0.15s, transform 0.15s;
1510
+ }
1511
+
1512
+ .persona-picker-card:hover {
1513
+ border-color: var(--persona-card-accent, var(--accent));
1514
+ background: var(--bg-hover);
1515
+ text-decoration: none;
1516
+ transform: translateY(-2px);
1517
+ }
1518
+
1519
+ .persona-picker-name {
1520
+ font-weight: 600;
1521
+ font-size: 1.05rem;
1522
+ margin-bottom: 0.35rem;
1523
+ }
1524
+
1525
+ .persona-picker-desc {
1526
+ font-size: 0.8rem;
1527
+ color: var(--text-dim);
1528
+ line-height: 1.5;
1529
+ }
1530
+
1531
+ /* Secondary nav groups (shared pages, artifact lists) */
1532
+ .nav-group-secondary .nav-group-label {
1533
+ opacity: 0.7;
1534
+ }
1535
+
1536
+ /* Collapsible sidebar nav groups */
1537
+ .nav-group-collapsible .nav-group-label {
1538
+ cursor: pointer;
1539
+ display: flex;
1540
+ align-items: center;
1541
+ gap: 0.35rem;
1542
+ user-select: none;
1543
+ }
1544
+
1545
+ .nav-group-collapsible .nav-group-label:hover {
1546
+ color: var(--text);
1547
+ }
1548
+
1549
+ .nav-group-chevron {
1550
+ transition: transform 0.2s ease;
1551
+ flex-shrink: 0;
1552
+ }
1553
+
1554
+ .nav-collapsed .nav-group-chevron {
1555
+ transform: rotate(-90deg);
1556
+ }
1557
+
1558
+ .nav-group-links {
1559
+ overflow: hidden;
1560
+ max-height: 500px;
1561
+ transition: max-height 0.25s ease, opacity 0.2s ease;
1562
+ opacity: 1;
1563
+ }
1564
+
1565
+ .nav-collapsed .nav-group-links {
1566
+ max-height: 0;
1567
+ opacity: 0;
1568
+ }
1569
+
1570
+ /* Shorter scrollable tables */
1571
+ .table-wrap.table-short {
1572
+ max-height: 400px;
1573
+ }
1574
+
1575
+ /* Multi-select filter (native <details>) */
1576
+ .multi-filter {
1577
+ position: relative;
1578
+ }
1579
+
1580
+ .multi-filter summary {
1581
+ list-style: none;
1582
+ background: var(--bg-card);
1583
+ border: 1px solid var(--border);
1584
+ color: var(--text);
1585
+ padding: 0.4rem 0.75rem;
1586
+ border-radius: var(--radius);
1587
+ font-size: 0.8rem;
1588
+ cursor: pointer;
1589
+ font-family: var(--font);
1590
+ white-space: nowrap;
1591
+ }
1592
+
1593
+ .multi-filter summary::-webkit-details-marker { display: none; }
1594
+
1595
+ .multi-filter summary:hover {
1596
+ border-color: var(--text-dim);
1597
+ }
1598
+
1599
+ .multi-filter summary:focus {
1600
+ outline: none;
1601
+ border-color: var(--accent);
1602
+ }
1603
+
1604
+ .multi-filter-menu {
1605
+ display: none;
1606
+ position: absolute;
1607
+ top: calc(100% + 4px);
1608
+ left: 0;
1609
+ background: var(--bg-card);
1610
+ border: 1px solid var(--border);
1611
+ border-radius: var(--radius);
1612
+ padding: 0.35rem 0;
1613
+ min-width: 160px;
1614
+ max-height: 240px;
1615
+ overflow-y: auto;
1616
+ z-index: 20;
1617
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
1618
+ scrollbar-width: thin;
1619
+ }
1620
+
1621
+ .multi-filter[open] .multi-filter-menu {
1622
+ display: block;
1623
+ }
1624
+
1625
+ .multi-filter-option {
1626
+ display: flex;
1627
+ align-items: center;
1628
+ gap: 0.5rem;
1629
+ padding: 0.3rem 0.75rem;
1630
+ font-size: 0.8rem;
1631
+ color: var(--text);
1632
+ cursor: pointer;
1633
+ white-space: nowrap;
1634
+ }
1635
+
1636
+ .multi-filter-option:hover {
1637
+ background: var(--bg-hover);
1638
+ }
1639
+
1640
+ .multi-filter-option input[type="checkbox"] {
1641
+ accent-color: var(--accent);
1642
+ cursor: pointer;
1643
+ }
1644
+
1645
+ /* GAR insight bullets */
1646
+ .gar-insights {
1647
+ list-style: none;
1648
+ font-size: 0.8rem;
1649
+ margin-top: 0.5rem;
1650
+ padding: 0;
1651
+ }
1652
+
1653
+ .gar-insights li {
1654
+ padding: 0.15rem 0;
1655
+ color: var(--text-dim);
1656
+ }
1657
+
1658
+ .gar-insights li::before {
1659
+ content: "\\2014\\00a0";
1660
+ color: var(--text-dim);
1661
+ opacity: 0.5;
1662
+ }
1663
+
1664
+ /* Signal tag color variants */
1665
+ .signal-tag-high {
1666
+ background: rgba(248, 113, 113, 0.18);
1667
+ color: var(--red);
1668
+ }
1669
+
1670
+ .signal-tag-medium {
1671
+ background: rgba(251, 191, 36, 0.18);
1672
+ color: var(--amber);
1673
+ }
1674
+
1675
+ .signal-tag-positive {
1676
+ background: rgba(52, 211, 153, 0.18);
1677
+ color: var(--green);
1678
+ }
1679
+
1680
+ /* Mini progress bar (inline in tables) */
1681
+ .mini-progress-bar {
1682
+ position: relative;
1683
+ width: 72px;
1684
+ height: 16px;
1685
+ background: rgba(255,255,255,0.08);
1686
+ border-radius: 3px;
1687
+ overflow: hidden;
1688
+ display: inline-block;
1689
+ vertical-align: middle;
1690
+ }
1691
+
1692
+ .mini-progress-fill {
1693
+ height: 100%;
1694
+ background: var(--accent);
1695
+ border-radius: 3px;
1696
+ transition: width 0.3s ease;
1697
+ }
1698
+
1699
+ .mini-progress-label {
1700
+ position: absolute;
1701
+ top: 50%;
1702
+ left: 50%;
1703
+ transform: translate(-50%, -50%);
1704
+ font-size: 0.6rem;
1705
+ font-weight: 700;
1706
+ color: var(--text);
1707
+ }
1708
+
1709
+ /* Focus-grouped work items */
1710
+ .focus-row td:first-child {
1711
+ border-left: 3px solid var(--focus-color, var(--border));
1712
+ }
1713
+
1714
+ .focus-group-header td {
1715
+ background: var(--bg-hover);
1716
+ border-left: 3px solid var(--focus-color, var(--border));
1717
+ padding-top: 0.5rem;
1718
+ padding-bottom: 0.5rem;
1719
+ border-bottom: 1px solid var(--border);
1720
+ }
1721
+
1722
+ .focus-group-header td:first-child {
1723
+ border-left-width: 3px;
1724
+ }
1725
+
1726
+ .focus-group-name {
1727
+ font-weight: 600;
1728
+ font-size: 0.8rem;
1729
+ color: var(--text);
1730
+ margin-right: 0.75rem;
1731
+ }
1732
+
1733
+ .focus-group-stats {
1734
+ font-size: 0.75rem;
1735
+ color: var(--text-dim);
1736
+ }
1737
+
1738
+ .focus-group-progress {
1739
+ width: 96px;
1740
+ }
1741
+
1742
+ /* Owner badges for DM sprint view */
1743
+ .owner-badge {
1744
+ display: inline-block;
1745
+ padding: 0.1rem 0.5rem;
1746
+ border-radius: 999px;
1747
+ font-size: 0.65rem;
1748
+ font-weight: 700;
1749
+ text-transform: uppercase;
1750
+ letter-spacing: 0.04em;
1751
+ white-space: nowrap;
1752
+ }
1753
+ .owner-badge-po { background: rgba(108, 140, 255, 0.18); color: #6c8cff; }
1754
+ .owner-badge-tl { background: rgba(251, 191, 36, 0.18); color: #fbbf24; }
1755
+ .owner-badge-dm { background: rgba(52, 211, 153, 0.18); color: #34d399; }
1756
+ .owner-badge-other { background: rgba(139, 143, 164, 0.12); color: var(--text-dim); }
1757
+
1758
+ /* Integration icons (Jira, Confluence) */
1759
+ .integration-icons {
1760
+ display: inline-flex;
1761
+ align-items: center;
1762
+ gap: 0.25rem;
1763
+ vertical-align: middle;
1764
+ margin-left: 0.5rem;
1765
+ }
1766
+ .integration-link {
1767
+ display: inline-flex;
1768
+ align-items: center;
1769
+ opacity: 0.7;
1770
+ transition: opacity 0.15s;
1771
+ }
1772
+ .integration-link:hover { opacity: 1; }
1773
+ .integration-icon { vertical-align: middle; }
1774
+
1775
+ /* Group header rows (PO dashboard decisions/deps) */
1776
+ .group-header-row td {
1777
+ background: var(--bg-hover);
1778
+ padding-top: 0.5rem;
1779
+ padding-bottom: 0.5rem;
1780
+ border-bottom: 1px solid var(--border);
1781
+ font-size: 0.8rem;
1782
+ }