@evo-dev/evodev 0.0.1-alpha.3 → 0.0.1-alpha.5

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,1507 @@
1
+ :root {
2
+ color-scheme: light;
3
+ --ink: #171918;
4
+ --canvas: #eef1eb;
5
+ --surface: #ffffff;
6
+ --surface-soft: #f7f8f4;
7
+ --line: #171918;
8
+ --green: #1f9d62;
9
+ --teal: #148b96;
10
+ --yellow: #e4ad24;
11
+ --red: #d94c3f;
12
+ --blue: #4167c7;
13
+ --muted: #606660;
14
+ --shadow: 3px 3px 0 var(--line);
15
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
16
+ }
17
+
18
+ * {
19
+ box-sizing: border-box;
20
+ }
21
+ html {
22
+ min-width: 320px;
23
+ }
24
+ body {
25
+ margin: 0;
26
+ color: var(--ink);
27
+ background-color: var(--canvas);
28
+ background-image: linear-gradient(90deg, rgba(23, 25, 24, 0.055) 1px, transparent 1px),
29
+ linear-gradient(rgba(23, 25, 24, 0.055) 1px, transparent 1px);
30
+ background-size: 20px 20px;
31
+ letter-spacing: 0;
32
+ }
33
+
34
+ button,
35
+ input,
36
+ select {
37
+ font: inherit;
38
+ letter-spacing: 0;
39
+ }
40
+
41
+ button {
42
+ transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, color 120ms
43
+ ease;
44
+ }
45
+
46
+ button:focus-visible,
47
+ input:focus-visible,
48
+ select:focus-visible {
49
+ outline: 3px solid var(--blue);
50
+ outline-offset: 2px;
51
+ }
52
+
53
+ h1,
54
+ h2,
55
+ h3,
56
+ p {
57
+ margin: 0;
58
+ }
59
+ h1,
60
+ h2,
61
+ h3 {
62
+ font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
63
+ }
64
+ h1 {
65
+ font-size: 24px;
66
+ line-height: 1.08;
67
+ }
68
+ h2 {
69
+ font-size: 18px;
70
+ line-height: 1.2;
71
+ }
72
+ h3 {
73
+ font-size: 14px;
74
+ line-height: 1.3;
75
+ overflow-wrap: anywhere;
76
+ }
77
+
78
+ .boot {
79
+ min-height: 120px;
80
+ border: 2px dashed #878e87;
81
+ background: rgba(255, 255, 255, 0.72);
82
+ color: var(--muted);
83
+ display: grid;
84
+ place-items: center;
85
+ padding: 20px;
86
+ font-size: 12px;
87
+ font-weight: 800;
88
+ }
89
+
90
+ .shell-head {
91
+ position: sticky;
92
+ top: 0;
93
+ z-index: 20;
94
+ border-bottom: 3px solid var(--line);
95
+ background: var(--surface);
96
+ }
97
+
98
+ header {
99
+ min-height: 70px;
100
+ display: flex;
101
+ align-items: center;
102
+ justify-content: space-between;
103
+ gap: 16px;
104
+ width: min(1360px, 100%);
105
+ margin: 0 auto;
106
+ padding: 12px 24px;
107
+ }
108
+
109
+ .brand {
110
+ display: flex;
111
+ align-items: center;
112
+ gap: 12px;
113
+ min-width: 0;
114
+ }
115
+ .brand-mark {
116
+ width: 34px;
117
+ height: 34px;
118
+ flex: 0 0 34px;
119
+ border: 3px solid var(--line);
120
+ background: linear-gradient(90deg, var(--green) 50%, var(--yellow) 50%) top / 100% 50% no-repeat,
121
+ linear-gradient(90deg, var(--blue) 50%, var(--red) 50%) bottom / 100% 50% no-repeat;
122
+ box-shadow: 3px 3px 0 var(--line);
123
+ }
124
+
125
+ .status-line {
126
+ display: flex;
127
+ align-items: center;
128
+ flex-wrap: wrap;
129
+ gap: 8px;
130
+ margin-top: 5px;
131
+ }
132
+
133
+ .status-chip {
134
+ border: 1px solid var(--line);
135
+ background: #dff4e8;
136
+ padding: 2px 5px;
137
+ color: #145c3c;
138
+ font-size: 10px;
139
+ font-weight: 800;
140
+ text-transform: uppercase;
141
+ }
142
+
143
+ .meta {
144
+ color: var(--muted);
145
+ font-size: 11px;
146
+ line-height: 1.45;
147
+ overflow-wrap: anywhere;
148
+ }
149
+
150
+ .refresh {
151
+ min-width: 112px;
152
+ min-height: 38px;
153
+ border: 2px solid var(--line);
154
+ border-radius: 0;
155
+ background: var(--yellow);
156
+ box-shadow: var(--shadow);
157
+ color: var(--ink);
158
+ cursor: pointer;
159
+ display: inline-flex;
160
+ align-items: center;
161
+ justify-content: center;
162
+ gap: 7px;
163
+ font-weight: 800;
164
+ padding: 7px 12px;
165
+ }
166
+
167
+ .refresh:active,
168
+ .action-button:active,
169
+ .icon-button:active {
170
+ transform: translate(2px, 2px);
171
+ box-shadow: 1px 1px 0 var(--line);
172
+ }
173
+ .refresh:disabled {
174
+ cursor: wait;
175
+ opacity: 0.65;
176
+ }
177
+ .spin {
178
+ animation: spin 800ms linear infinite;
179
+ }
180
+
181
+ .tabs {
182
+ display: flex;
183
+ gap: 0;
184
+ width: min(1360px, 100%);
185
+ margin: 0 auto;
186
+ padding: 0 24px;
187
+ overflow-x: auto;
188
+ scrollbar-width: thin;
189
+ }
190
+
191
+ .tab {
192
+ min-height: 42px;
193
+ flex: 0 0 auto;
194
+ border: 0;
195
+ border-left: 1px solid #c8ccc6;
196
+ border-radius: 0;
197
+ background: var(--surface);
198
+ color: var(--muted);
199
+ cursor: pointer;
200
+ font-size: 12px;
201
+ font-weight: 800;
202
+ padding: 8px 14px;
203
+ }
204
+ .tab:last-child {
205
+ border-right: 1px solid #c8ccc6;
206
+ }
207
+ .tab[aria-selected="true"] {
208
+ background: var(--ink);
209
+ color: #ffffff;
210
+ }
211
+ .tab-count {
212
+ display: inline-block;
213
+ min-width: 22px;
214
+ margin-left: 5px;
215
+ border: 1px solid currentColor;
216
+ padding: 1px 4px;
217
+ text-align: center;
218
+ }
219
+
220
+ main {
221
+ width: min(1360px, 100%);
222
+ margin: 0 auto;
223
+ padding: 22px 24px 44px;
224
+ }
225
+ .view-heading {
226
+ display: flex;
227
+ align-items: end;
228
+ justify-content: space-between;
229
+ gap: 14px;
230
+ margin-bottom: 14px;
231
+ padding-bottom: 10px;
232
+ border-bottom: 3px solid var(--line);
233
+ }
234
+
235
+ .topline {
236
+ display: grid;
237
+ grid-template-columns: repeat(4, minmax(0, 1fr));
238
+ gap: 10px;
239
+ margin-bottom: 18px;
240
+ }
241
+
242
+ .stat {
243
+ position: relative;
244
+ min-height: 92px;
245
+ border: 2px solid var(--line);
246
+ background: var(--surface);
247
+ box-shadow: var(--shadow);
248
+ padding: 12px 13px 11px;
249
+ overflow: hidden;
250
+ }
251
+ .stat::before {
252
+ position: absolute;
253
+ top: 0;
254
+ right: 0;
255
+ width: 38px;
256
+ height: 7px;
257
+ background: var(--blue);
258
+ content: "";
259
+ }
260
+ .stat.green::before {
261
+ background: var(--green);
262
+ }
263
+ .stat.yellow::before {
264
+ background: var(--yellow);
265
+ }
266
+ .stat.red::before {
267
+ background: var(--red);
268
+ }
269
+ .stat .label {
270
+ color: var(--muted);
271
+ font-size: 10px;
272
+ font-weight: 800;
273
+ text-transform: uppercase;
274
+ }
275
+ .stat .value {
276
+ margin-top: 7px;
277
+ font-size: 25px;
278
+ font-weight: 900;
279
+ line-height: 1;
280
+ }
281
+ .stat .sub {
282
+ margin-top: 7px;
283
+ color: var(--muted);
284
+ font-size: 11px;
285
+ overflow-wrap: anywhere;
286
+ }
287
+
288
+ .overview-grid {
289
+ display: grid;
290
+ grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
291
+ gap: 14px;
292
+ align-items: start;
293
+ }
294
+ .panel-card {
295
+ min-width: 0;
296
+ border: 2px solid var(--line);
297
+ background: var(--surface);
298
+ box-shadow: var(--shadow);
299
+ padding: 14px;
300
+ }
301
+ .panel-head {
302
+ display: flex;
303
+ justify-content: space-between;
304
+ align-items: start;
305
+ gap: 10px;
306
+ margin-bottom: 11px;
307
+ }
308
+ .score-value {
309
+ font-family: ui-sans-serif, system-ui, sans-serif;
310
+ font-size: 28px;
311
+ font-weight: 900;
312
+ }
313
+
314
+ .bar {
315
+ appearance: none;
316
+ display: block;
317
+ width: 100%;
318
+ height: 12px;
319
+ margin-top: 10px;
320
+ border: 2px solid var(--line);
321
+ border-radius: 0;
322
+ background: transparent;
323
+ }
324
+ .bar::-webkit-progress-bar {
325
+ background: repeating-linear-gradient(90deg, rgba(23, 25, 24, 0.16) 0 1px, transparent 1px 10px);
326
+ }
327
+ .bar.ap::-webkit-progress-value {
328
+ background: var(--green);
329
+ }
330
+ .bar.ep::-webkit-progress-value {
331
+ background: var(--blue);
332
+ }
333
+ .bar.ap::-moz-progress-bar {
334
+ background: var(--green);
335
+ }
336
+ .bar.ep::-moz-progress-bar {
337
+ background: var(--blue);
338
+ }
339
+
340
+ .dual-progress {
341
+ display: grid;
342
+ gap: 8px;
343
+ margin-top: 11px;
344
+ }
345
+ .progress-caption {
346
+ display: flex;
347
+ justify-content: space-between;
348
+ gap: 8px;
349
+ font-size: 10px;
350
+ font-weight: 800;
351
+ }
352
+ .progress-caption span:last-child {
353
+ color: var(--muted);
354
+ text-align: right;
355
+ }
356
+ .metric-grid {
357
+ display: grid;
358
+ grid-template-columns: repeat(4, minmax(0, 1fr));
359
+ gap: 8px;
360
+ margin-top: 12px;
361
+ }
362
+ .metric {
363
+ border-top: 2px solid #d9ddd6;
364
+ padding-top: 7px;
365
+ }
366
+ .metric strong {
367
+ display: block;
368
+ font-family: ui-sans-serif, system-ui, sans-serif;
369
+ font-size: 17px;
370
+ }
371
+ .metric span {
372
+ color: var(--muted);
373
+ font-size: 10px;
374
+ }
375
+
376
+ .progress-layout {
377
+ display: grid;
378
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
379
+ gap: 14px;
380
+ align-items: start;
381
+ }
382
+ .progress-layout .span-two {
383
+ grid-column: 1 / -1;
384
+ }
385
+ .ledger-panel {
386
+ min-width: 0;
387
+ border: 2px solid var(--line);
388
+ border-top: 7px solid var(--green);
389
+ background: var(--surface);
390
+ box-shadow: var(--shadow);
391
+ padding: 14px;
392
+ }
393
+ .ledger-panel.ep {
394
+ border-top-color: var(--blue);
395
+ }
396
+ .ledger-score {
397
+ margin-top: 8px;
398
+ font-family: ui-sans-serif, system-ui, sans-serif;
399
+ font-size: 30px;
400
+ font-weight: 900;
401
+ }
402
+ .ledger-score small {
403
+ color: var(--muted);
404
+ font-family: inherit;
405
+ font-size: 12px;
406
+ }
407
+ .progress-section {
408
+ min-width: 0;
409
+ padding-top: 13px;
410
+ border-top: 3px solid var(--line);
411
+ }
412
+ .progress-section-head {
413
+ display: flex;
414
+ justify-content: space-between;
415
+ align-items: end;
416
+ gap: 10px;
417
+ margin-bottom: 9px;
418
+ }
419
+
420
+ .table-wrap {
421
+ width: 100%;
422
+ overflow-x: auto;
423
+ border: 2px solid var(--line);
424
+ background: var(--surface);
425
+ }
426
+ table {
427
+ width: 100%;
428
+ min-width: 660px;
429
+ border-collapse: collapse;
430
+ font-size: 10px;
431
+ }
432
+ th,
433
+ td {
434
+ padding: 8px 9px;
435
+ border-bottom: 1px solid #d4d8d2;
436
+ text-align: left;
437
+ vertical-align: top;
438
+ }
439
+ th {
440
+ background: var(--ink);
441
+ color: #fff;
442
+ font-size: 9px;
443
+ text-transform: uppercase;
444
+ }
445
+ tr:last-child td {
446
+ border-bottom: 0;
447
+ }
448
+ tr.current-level td {
449
+ background: #dff4e8;
450
+ font-weight: 800;
451
+ }
452
+ .credit-limited {
453
+ color: #a72e25;
454
+ font-weight: 900;
455
+ }
456
+
457
+ .toolbar {
458
+ display: flex;
459
+ align-items: center;
460
+ justify-content: space-between;
461
+ gap: 12px;
462
+ margin-bottom: 14px;
463
+ }
464
+ .controls {
465
+ display: flex;
466
+ align-items: center;
467
+ flex-wrap: wrap;
468
+ gap: 8px;
469
+ }
470
+ .search,
471
+ select {
472
+ min-height: 38px;
473
+ border: 2px solid var(--line);
474
+ border-radius: 0;
475
+ background: var(--surface);
476
+ color: var(--ink);
477
+ padding: 7px 10px;
478
+ }
479
+ .search {
480
+ width: min(330px, 100%);
481
+ }
482
+ .toggle {
483
+ display: inline-flex;
484
+ min-height: 38px;
485
+ align-items: center;
486
+ gap: 7px;
487
+ border: 2px solid var(--line);
488
+ background: var(--surface);
489
+ padding: 7px 10px;
490
+ font-size: 11px;
491
+ font-weight: 800;
492
+ }
493
+ .toggle input {
494
+ width: 16px;
495
+ height: 16px;
496
+ margin: 0;
497
+ accent-color: var(--green);
498
+ }
499
+
500
+ .grid {
501
+ display: grid;
502
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
503
+ gap: 11px;
504
+ }
505
+ .evolution-grid {
506
+ display: grid;
507
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
508
+ gap: 22px;
509
+ align-items: start;
510
+ }
511
+ .subsection {
512
+ min-width: 0;
513
+ }
514
+ .subsection.full {
515
+ grid-column: 1 / -1;
516
+ }
517
+ .subsection-head {
518
+ display: flex;
519
+ justify-content: space-between;
520
+ align-items: end;
521
+ gap: 8px;
522
+ margin-bottom: 9px;
523
+ padding-bottom: 7px;
524
+ border-bottom: 2px solid var(--line);
525
+ }
526
+
527
+ .card {
528
+ min-width: 0;
529
+ min-height: 162px;
530
+ border: 2px solid var(--line);
531
+ border-top-width: 6px;
532
+ border-radius: 0;
533
+ background: var(--surface);
534
+ box-shadow: 3px 3px 0 #aeb4ad;
535
+ padding: 11px 12px 12px;
536
+ overflow: hidden;
537
+ }
538
+ .card.green {
539
+ border-top-color: var(--green);
540
+ }
541
+ .card.teal {
542
+ border-top-color: var(--teal);
543
+ }
544
+ .card.yellow {
545
+ border-top-color: var(--yellow);
546
+ }
547
+ .card.red {
548
+ border-top-color: var(--red);
549
+ }
550
+ .card-top {
551
+ display: flex;
552
+ align-items: start;
553
+ justify-content: space-between;
554
+ gap: 8px;
555
+ }
556
+ .activity {
557
+ display: inline-flex;
558
+ align-items: center;
559
+ gap: 5px;
560
+ flex: 0 0 auto;
561
+ color: var(--muted);
562
+ font-size: 10px;
563
+ font-weight: 800;
564
+ text-transform: uppercase;
565
+ }
566
+ .dot {
567
+ width: 8px;
568
+ height: 8px;
569
+ border: 1px solid var(--line);
570
+ background: #c5cac4;
571
+ }
572
+ .activity.active {
573
+ color: #116a42;
574
+ }
575
+ .activity.active .dot {
576
+ background: var(--green);
577
+ }
578
+ .tags {
579
+ display: flex;
580
+ flex-wrap: wrap;
581
+ gap: 5px;
582
+ margin-top: 9px;
583
+ }
584
+ .tag {
585
+ max-width: 100%;
586
+ border: 1px solid var(--line);
587
+ background: var(--surface-soft);
588
+ padding: 2px 5px;
589
+ font-size: 10px;
590
+ font-weight: 800;
591
+ overflow-wrap: anywhere;
592
+ }
593
+ .description {
594
+ display: -webkit-box;
595
+ margin-top: 9px;
596
+ overflow: hidden;
597
+ color: var(--muted);
598
+ font-size: 11px;
599
+ line-height: 1.45;
600
+ -webkit-box-orient: vertical;
601
+ -webkit-line-clamp: 3;
602
+ }
603
+ .card-foot {
604
+ display: flex;
605
+ justify-content: space-between;
606
+ gap: 8px;
607
+ margin-top: 9px;
608
+ padding-top: 7px;
609
+ border-top: 1px solid #d7dbd5;
610
+ color: var(--muted);
611
+ font-size: 10px;
612
+ }
613
+
614
+ .list {
615
+ display: grid;
616
+ gap: 1px;
617
+ border: 2px solid var(--line);
618
+ background: var(--line);
619
+ }
620
+ .row {
621
+ min-width: 0;
622
+ background: var(--surface);
623
+ padding: 10px 11px;
624
+ border-left: 6px solid var(--blue);
625
+ }
626
+ .row.pending {
627
+ border-left-color: var(--red);
628
+ }
629
+ .row.accepted {
630
+ border-left-color: var(--green);
631
+ }
632
+ .row.warning {
633
+ border-left-color: var(--yellow);
634
+ }
635
+ .row-top {
636
+ display: flex;
637
+ justify-content: space-between;
638
+ align-items: start;
639
+ gap: 10px;
640
+ }
641
+ .row .summary {
642
+ margin-top: 5px;
643
+ color: var(--muted);
644
+ font-size: 11px;
645
+ line-height: 1.45;
646
+ overflow-wrap: anywhere;
647
+ }
648
+ .row-status {
649
+ flex: 0 0 auto;
650
+ border: 1px solid var(--line);
651
+ background: var(--surface-soft);
652
+ padding: 2px 5px;
653
+ font-size: 9px;
654
+ font-weight: 800;
655
+ text-transform: uppercase;
656
+ }
657
+
658
+ .review-row {
659
+ width: 100%;
660
+ border-top: 0;
661
+ border-right: 0;
662
+ border-bottom: 0;
663
+ border-radius: 0;
664
+ color: inherit;
665
+ cursor: pointer;
666
+ text-align: left;
667
+ }
668
+ .review-row .row-open {
669
+ display: flex;
670
+ align-items: center;
671
+ gap: 2px;
672
+ margin-top: 7px;
673
+ color: var(--blue);
674
+ font-size: 10px;
675
+ font-weight: 900;
676
+ }
677
+
678
+ .more {
679
+ width: 100%;
680
+ min-height: 36px;
681
+ border: 2px solid var(--line);
682
+ border-top: 0;
683
+ border-radius: 0;
684
+ background: var(--surface-soft);
685
+ color: var(--ink);
686
+ cursor: pointer;
687
+ font-size: 11px;
688
+ font-weight: 800;
689
+ padding: 7px 10px;
690
+ }
691
+
692
+ .empty {
693
+ min-height: 76px;
694
+ border: 2px dashed #878e87;
695
+ background: rgba(255, 255, 255, 0.68);
696
+ color: var(--muted);
697
+ padding: 16px;
698
+ font-size: 11px;
699
+ font-weight: 800;
700
+ }
701
+ .notice {
702
+ margin-bottom: 14px;
703
+ border: 2px solid var(--red);
704
+ background: #fff0ee;
705
+ padding: 10px 12px;
706
+ font-size: 11px;
707
+ font-weight: 800;
708
+ }
709
+ .notice.warning {
710
+ border-color: var(--yellow);
711
+ background: #fff8dc;
712
+ }
713
+
714
+ .review-dialog {
715
+ width: min(680px, 100%);
716
+ max-width: none;
717
+ height: 100dvh;
718
+ max-height: none;
719
+ margin: 0 0 0 auto;
720
+ padding: 0;
721
+ border: 0;
722
+ border-left: 3px solid var(--line);
723
+ background: var(--surface);
724
+ color: var(--ink);
725
+ box-shadow: -7px 0 0 rgba(23, 25, 24, 0.2);
726
+ overflow: hidden;
727
+ }
728
+ .review-dialog[open] {
729
+ animation: drawer-in 150ms ease-out;
730
+ }
731
+ .review-dialog::backdrop {
732
+ background: rgba(23, 25, 24, 0.48);
733
+ }
734
+ .review-drawer {
735
+ height: 100%;
736
+ display: flex;
737
+ flex-direction: column;
738
+ }
739
+ .drawer-head {
740
+ z-index: 2;
741
+ display: flex;
742
+ align-items: start;
743
+ justify-content: space-between;
744
+ gap: 14px;
745
+ border-bottom: 3px solid var(--line);
746
+ background: var(--surface);
747
+ padding: 17px 18px 14px;
748
+ }
749
+ .icon-button {
750
+ width: 38px;
751
+ height: 38px;
752
+ flex: 0 0 38px;
753
+ border: 2px solid var(--line);
754
+ border-radius: 0;
755
+ background: var(--surface-soft);
756
+ box-shadow: 2px 2px 0 var(--line);
757
+ color: var(--ink);
758
+ cursor: pointer;
759
+ display: grid;
760
+ place-items: center;
761
+ padding: 0;
762
+ }
763
+ .drawer-body {
764
+ flex: 1;
765
+ overflow-y: auto;
766
+ display: grid;
767
+ align-content: start;
768
+ gap: 0;
769
+ padding: 0 18px 18px;
770
+ }
771
+ .drawer-summary {
772
+ padding: 16px 0;
773
+ color: var(--muted);
774
+ font-size: 12px;
775
+ line-height: 1.55;
776
+ }
777
+ .detail-grid {
778
+ display: grid;
779
+ grid-template-columns: repeat(2, minmax(0, 1fr));
780
+ border: 2px solid var(--line);
781
+ }
782
+ .detail-field {
783
+ min-width: 0;
784
+ padding: 10px;
785
+ border-right: 1px solid #d4d8d2;
786
+ border-bottom: 1px solid #d4d8d2;
787
+ }
788
+ .detail-field:nth-child(2n) {
789
+ border-right: 0;
790
+ }
791
+ .detail-field .label {
792
+ color: var(--muted);
793
+ font-size: 9px;
794
+ font-weight: 900;
795
+ text-transform: uppercase;
796
+ }
797
+ .detail-field .value {
798
+ margin-top: 5px;
799
+ font-size: 11px;
800
+ font-weight: 800;
801
+ overflow-wrap: anywhere;
802
+ }
803
+ .detail-list {
804
+ padding: 14px 0;
805
+ border-bottom: 2px solid var(--line);
806
+ }
807
+ .detail-list h3 {
808
+ margin-bottom: 7px;
809
+ }
810
+ .detail-list ul {
811
+ display: grid;
812
+ gap: 6px;
813
+ margin: 0;
814
+ padding-left: 18px;
815
+ color: var(--muted);
816
+ font-size: 11px;
817
+ line-height: 1.45;
818
+ }
819
+ .proposal-change {
820
+ margin-top: 14px;
821
+ border: 2px solid var(--line);
822
+ background: var(--surface-soft);
823
+ }
824
+ .proposal-change-head {
825
+ display: flex;
826
+ align-items: center;
827
+ flex-wrap: wrap;
828
+ gap: 8px;
829
+ border-bottom: 2px solid var(--line);
830
+ padding: 9px 10px;
831
+ }
832
+ .proposal-change-head code {
833
+ overflow-wrap: anywhere;
834
+ }
835
+ .proposal-change > p {
836
+ margin: 0;
837
+ padding: 10px;
838
+ color: var(--muted);
839
+ font-size: 10px;
840
+ line-height: 1.45;
841
+ }
842
+ .proposal-change > pre {
843
+ max-height: 260px;
844
+ margin: 0;
845
+ overflow: auto;
846
+ border-top: 1px solid #cbd0c9;
847
+ background: var(--surface);
848
+ padding: 11px;
849
+ white-space: pre-wrap;
850
+ overflow-wrap: anywhere;
851
+ font-size: 10px;
852
+ line-height: 1.5;
853
+ }
854
+ .drawer-actions {
855
+ border-top: 3px solid var(--line);
856
+ background: var(--surface-soft);
857
+ padding: 14px 18px 18px;
858
+ }
859
+ .action-row {
860
+ display: flex;
861
+ flex-wrap: wrap;
862
+ gap: 8px;
863
+ margin-top: 9px;
864
+ }
865
+ .action-button {
866
+ min-height: 38px;
867
+ border: 2px solid var(--line);
868
+ border-radius: 0;
869
+ box-shadow: 2px 2px 0 var(--line);
870
+ cursor: pointer;
871
+ font-size: 11px;
872
+ font-weight: 900;
873
+ padding: 7px 11px;
874
+ }
875
+ .action-button.accept {
876
+ background: #bce8cf;
877
+ }
878
+ .action-button.defer {
879
+ background: #ffe6a4;
880
+ }
881
+ .action-button.reject {
882
+ background: #ffc8c2;
883
+ }
884
+ .action-button.neutral {
885
+ background: var(--surface);
886
+ }
887
+ .action-button:disabled,
888
+ .icon-button:disabled {
889
+ cursor: wait;
890
+ opacity: 0.55;
891
+ }
892
+ .confirm-box {
893
+ margin-top: 12px;
894
+ border: 2px solid var(--line);
895
+ background: #fff8dc;
896
+ padding: 11px;
897
+ }
898
+ .confirm-box p {
899
+ margin-top: 5px;
900
+ color: var(--muted);
901
+ font-size: 10px;
902
+ line-height: 1.45;
903
+ }
904
+ .reason-field {
905
+ display: grid;
906
+ gap: 6px;
907
+ margin-top: 11px;
908
+ color: var(--ink);
909
+ font-size: 10px;
910
+ font-weight: 900;
911
+ }
912
+ .reason-field textarea {
913
+ min-height: 92px;
914
+ resize: vertical;
915
+ border: 2px solid var(--line);
916
+ border-radius: 0;
917
+ background: var(--surface);
918
+ color: var(--ink);
919
+ padding: 9px;
920
+ font: inherit;
921
+ font-weight: 700;
922
+ line-height: 1.45;
923
+ }
924
+ .review-error {
925
+ margin-top: 10px;
926
+ color: #a72e25;
927
+ font-size: 10px;
928
+ font-weight: 900;
929
+ }
930
+ .read-only-note {
931
+ border: 2px solid var(--yellow);
932
+ background: #fff8dc;
933
+ padding: 10px;
934
+ color: #6c5311;
935
+ font-size: 10px;
936
+ font-weight: 800;
937
+ line-height: 1.45;
938
+ }
939
+ .toast {
940
+ position: fixed;
941
+ right: 20px;
942
+ bottom: 20px;
943
+ z-index: 50;
944
+ max-width: min(390px, calc(100vw - 24px));
945
+ border: 2px solid var(--line);
946
+ background: #dff4e8;
947
+ box-shadow: var(--shadow);
948
+ padding: 11px 13px;
949
+ font-size: 11px;
950
+ font-weight: 900;
951
+ }
952
+
953
+ .session-review-page {
954
+ min-width: 0;
955
+ }
956
+ .session-review-head {
957
+ display: grid;
958
+ grid-template-columns: auto minmax(0, 1fr);
959
+ align-items: start;
960
+ gap: 18px;
961
+ margin-bottom: 16px;
962
+ border-bottom: 3px solid var(--line);
963
+ padding-bottom: 14px;
964
+ }
965
+ .back-button {
966
+ min-height: 36px;
967
+ border: 2px solid var(--line);
968
+ border-radius: 0;
969
+ background: var(--surface);
970
+ box-shadow: 2px 2px 0 var(--line);
971
+ color: var(--ink);
972
+ cursor: pointer;
973
+ display: inline-flex;
974
+ align-items: center;
975
+ gap: 7px;
976
+ padding: 7px 10px;
977
+ font-size: 11px;
978
+ font-weight: 900;
979
+ }
980
+ .session-review-title {
981
+ min-width: 0;
982
+ }
983
+ .session-review-title h2 {
984
+ margin: 7px 0 5px;
985
+ font-size: 25px;
986
+ overflow-wrap: anywhere;
987
+ }
988
+ .session-review-layout {
989
+ display: grid;
990
+ grid-template-columns: minmax(0, 1fr) 286px;
991
+ align-items: start;
992
+ gap: 20px;
993
+ }
994
+ .session-review-layout.evidence-only {
995
+ grid-template-columns: minmax(0, 1fr);
996
+ }
997
+ .session-evidence-heading {
998
+ margin-top: 28px;
999
+ border-top: 3px solid var(--line);
1000
+ padding-top: 14px;
1001
+ }
1002
+ .session-evidence,
1003
+ .session-decision {
1004
+ min-width: 0;
1005
+ }
1006
+ .evidence-summary-band {
1007
+ display: grid;
1008
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1009
+ border: 2px solid var(--line);
1010
+ background: var(--surface);
1011
+ }
1012
+ .evidence-summary-band > div {
1013
+ min-width: 0;
1014
+ display: grid;
1015
+ gap: 4px;
1016
+ border-right: 1px solid #cbd0c9;
1017
+ padding: 11px 12px;
1018
+ }
1019
+ .evidence-summary-band > div:last-child {
1020
+ border-right: 0;
1021
+ }
1022
+ .evidence-summary-band .label {
1023
+ color: var(--muted);
1024
+ font-size: 9px;
1025
+ font-weight: 900;
1026
+ text-transform: uppercase;
1027
+ }
1028
+ .evidence-summary-band strong {
1029
+ font-family: ui-sans-serif, system-ui, sans-serif;
1030
+ font-size: 14px;
1031
+ overflow-wrap: anywhere;
1032
+ }
1033
+ .evidence-summary-band span:last-child {
1034
+ color: var(--muted);
1035
+ font-size: 10px;
1036
+ overflow-wrap: anywhere;
1037
+ }
1038
+ .evidence-alert {
1039
+ margin-top: 10px;
1040
+ border: 2px solid var(--yellow);
1041
+ background: #fff8dc;
1042
+ padding: 9px 11px;
1043
+ color: #6c5311;
1044
+ font-size: 10px;
1045
+ font-weight: 800;
1046
+ line-height: 1.45;
1047
+ }
1048
+ .evidence-tabs {
1049
+ display: flex;
1050
+ margin-top: 15px;
1051
+ border-bottom: 3px solid var(--line);
1052
+ overflow-x: auto;
1053
+ }
1054
+ .evidence-tab {
1055
+ min-height: 38px;
1056
+ flex: 0 0 auto;
1057
+ border: 1px solid #c8ccc6;
1058
+ border-bottom: 0;
1059
+ border-radius: 0;
1060
+ background: var(--surface-soft);
1061
+ color: var(--muted);
1062
+ cursor: pointer;
1063
+ padding: 7px 11px;
1064
+ font-size: 10px;
1065
+ font-weight: 900;
1066
+ }
1067
+ .evidence-tab[aria-selected="true"] {
1068
+ border-color: var(--line);
1069
+ background: var(--ink);
1070
+ color: #ffffff;
1071
+ }
1072
+ .evidence-panel {
1073
+ min-height: 380px;
1074
+ border: 2px solid var(--line);
1075
+ border-top: 0;
1076
+ background: var(--surface);
1077
+ padding: 14px;
1078
+ }
1079
+ .conversation-stream,
1080
+ .segment-event-list {
1081
+ display: grid;
1082
+ gap: 10px;
1083
+ }
1084
+ .conversation-controls {
1085
+ min-height: 36px;
1086
+ display: flex;
1087
+ align-items: center;
1088
+ flex-wrap: wrap;
1089
+ gap: 11px;
1090
+ border-bottom: 2px solid var(--line);
1091
+ padding-bottom: 9px;
1092
+ color: var(--muted);
1093
+ font-size: 9px;
1094
+ font-weight: 900;
1095
+ }
1096
+ .conversation-controls > span {
1097
+ margin-right: auto;
1098
+ }
1099
+ .conversation-controls label {
1100
+ display: inline-flex;
1101
+ align-items: center;
1102
+ gap: 5px;
1103
+ color: var(--ink);
1104
+ cursor: pointer;
1105
+ }
1106
+ .conversation-controls input {
1107
+ width: 14px;
1108
+ height: 14px;
1109
+ margin: 0;
1110
+ accent-color: var(--green);
1111
+ cursor: pointer;
1112
+ }
1113
+ .conversation-stream > .evidence-alert {
1114
+ margin-top: 0;
1115
+ }
1116
+ .session-message {
1117
+ min-width: 0;
1118
+ margin: 0;
1119
+ border: 2px solid var(--line);
1120
+ border-left-width: 6px;
1121
+ background: var(--surface);
1122
+ padding: 10px 11px;
1123
+ }
1124
+ .session-message.user {
1125
+ border-left-color: var(--green);
1126
+ background: #f0faf4;
1127
+ }
1128
+ .session-message.assistant {
1129
+ border-left-color: var(--blue);
1130
+ }
1131
+ .session-message.developer,
1132
+ .session-message.system {
1133
+ border-left-color: var(--teal);
1134
+ background: #f1f8f8;
1135
+ }
1136
+ .session-message.tool-call,
1137
+ .session-message.tool-output {
1138
+ border-left-color: var(--yellow);
1139
+ background: #fffaf0;
1140
+ }
1141
+ .session-message.reasoning {
1142
+ border-left-color: #7c5bbb;
1143
+ background: #f8f4ff;
1144
+ }
1145
+ .session-message > summary,
1146
+ .segment-event > summary {
1147
+ cursor: pointer;
1148
+ list-style-position: outside;
1149
+ }
1150
+ .message-head {
1151
+ min-width: 0;
1152
+ display: flex;
1153
+ align-items: center;
1154
+ flex-wrap: wrap;
1155
+ gap: 7px;
1156
+ color: var(--muted);
1157
+ font-size: 9px;
1158
+ font-weight: 800;
1159
+ }
1160
+ .message-head time {
1161
+ margin-left: auto;
1162
+ }
1163
+ .message-role {
1164
+ border: 1px solid currentColor;
1165
+ padding: 2px 5px;
1166
+ color: var(--ink);
1167
+ font-weight: 900;
1168
+ text-transform: uppercase;
1169
+ }
1170
+ .message-role.user {
1171
+ color: #16633f;
1172
+ }
1173
+ .message-role.assistant {
1174
+ color: #244aa7;
1175
+ }
1176
+ .message-role.tool {
1177
+ color: #7a5810;
1178
+ }
1179
+ .message-text {
1180
+ margin-top: 9px;
1181
+ white-space: pre-wrap;
1182
+ overflow-wrap: anywhere;
1183
+ font-family: ui-sans-serif, system-ui, sans-serif;
1184
+ font-size: 13px;
1185
+ line-height: 1.58;
1186
+ }
1187
+ .session-message pre,
1188
+ .segment-event pre,
1189
+ .raw-evidence {
1190
+ max-width: 100%;
1191
+ margin: 10px 0 0;
1192
+ border: 1px solid #ccd0ca;
1193
+ background: #f7f8f4;
1194
+ padding: 10px;
1195
+ overflow: auto;
1196
+ white-space: pre-wrap;
1197
+ overflow-wrap: anywhere;
1198
+ font-size: 10px;
1199
+ line-height: 1.5;
1200
+ }
1201
+ .raw-evidence {
1202
+ min-height: 330px;
1203
+ margin: 0;
1204
+ }
1205
+ .message-truncated {
1206
+ display: inline-block;
1207
+ margin-top: 8px;
1208
+ color: #8a341e;
1209
+ font-size: 9px;
1210
+ font-weight: 900;
1211
+ text-transform: uppercase;
1212
+ }
1213
+ .segment-event {
1214
+ border-bottom: 2px solid var(--line);
1215
+ padding: 4px 0 12px;
1216
+ }
1217
+ .segment-event summary {
1218
+ display: grid;
1219
+ grid-template-columns: minmax(110px, auto) minmax(0, 1fr) auto;
1220
+ gap: 10px;
1221
+ align-items: baseline;
1222
+ font-size: 10px;
1223
+ font-weight: 900;
1224
+ }
1225
+ .segment-event summary span:nth-child(2),
1226
+ .segment-event summary time {
1227
+ color: var(--muted);
1228
+ font-weight: 700;
1229
+ overflow-wrap: anywhere;
1230
+ }
1231
+ .session-decision {
1232
+ border-left: 3px solid var(--line);
1233
+ padding-left: 18px;
1234
+ }
1235
+ .session-decision-inner {
1236
+ position: sticky;
1237
+ top: 112px;
1238
+ }
1239
+ .session-decision-inner > .meta {
1240
+ margin-top: 7px;
1241
+ }
1242
+ .decision-stack {
1243
+ display: grid;
1244
+ gap: 9px;
1245
+ margin-top: 14px;
1246
+ }
1247
+ .decision-stack .action-button {
1248
+ width: 100%;
1249
+ display: inline-flex;
1250
+ align-items: center;
1251
+ justify-content: center;
1252
+ gap: 7px;
1253
+ }
1254
+
1255
+ @media (hover: hover) {
1256
+ .refresh:hover,
1257
+ .icon-button:hover:not(:disabled),
1258
+ .action-button:hover:not(:disabled),
1259
+ .back-button:hover {
1260
+ transform: translate(-1px, -1px);
1261
+ box-shadow: 4px 4px 0 var(--line);
1262
+ }
1263
+ .tab:hover:not([aria-selected="true"]) {
1264
+ background: #e8ece5;
1265
+ color: var(--ink);
1266
+ }
1267
+ .more:hover {
1268
+ background: #e8ece5;
1269
+ }
1270
+ .review-row:hover {
1271
+ background: #f1f5ee;
1272
+ transform: translateX(2px);
1273
+ }
1274
+ .review-row:hover .row-open {
1275
+ color: #244aa7;
1276
+ }
1277
+ .evidence-tab:hover:not([aria-selected="true"]) {
1278
+ background: #e8ece5;
1279
+ color: var(--ink);
1280
+ }
1281
+ .session-message > summary:hover .message-head,
1282
+ .segment-event > summary:hover {
1283
+ color: var(--blue);
1284
+ }
1285
+ }
1286
+
1287
+ @keyframes drawer-in {
1288
+ from {
1289
+ transform: translateX(18px);
1290
+ opacity: 0.7;
1291
+ }
1292
+ to {
1293
+ transform: translateX(0);
1294
+ opacity: 1;
1295
+ }
1296
+ }
1297
+ @keyframes spin {
1298
+ to {
1299
+ transform: rotate(360deg);
1300
+ }
1301
+ }
1302
+
1303
+ @media (max-width: 900px) {
1304
+ .overview-grid,
1305
+ .evolution-grid,
1306
+ .progress-layout {
1307
+ grid-template-columns: 1fr;
1308
+ }
1309
+ .subsection.full,
1310
+ .progress-layout .span-two {
1311
+ grid-column: auto;
1312
+ }
1313
+ .topline {
1314
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1315
+ }
1316
+ .session-review-layout {
1317
+ grid-template-columns: 1fr;
1318
+ }
1319
+ .session-evidence {
1320
+ grid-row: 2;
1321
+ }
1322
+ .session-decision {
1323
+ grid-row: 1;
1324
+ border-top: 3px solid var(--line);
1325
+ border-left: 0;
1326
+ border-bottom: 3px solid var(--line);
1327
+ padding: 14px 0 16px;
1328
+ }
1329
+ .session-decision-inner {
1330
+ position: static;
1331
+ }
1332
+ .decision-stack {
1333
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1334
+ }
1335
+ }
1336
+
1337
+ @media (max-width: 600px) {
1338
+ header {
1339
+ min-height: 66px;
1340
+ padding: 10px 12px;
1341
+ }
1342
+ .brand {
1343
+ gap: 9px;
1344
+ }
1345
+ .brand-mark {
1346
+ width: 30px;
1347
+ height: 30px;
1348
+ flex-basis: 30px;
1349
+ box-shadow: 2px 2px 0 var(--line);
1350
+ }
1351
+ h1 {
1352
+ font-size: 19px;
1353
+ }
1354
+ .status-line {
1355
+ gap: 5px;
1356
+ margin-top: 4px;
1357
+ }
1358
+ .status-line .meta {
1359
+ max-width: 220px;
1360
+ white-space: nowrap;
1361
+ overflow: hidden;
1362
+ text-overflow: ellipsis;
1363
+ }
1364
+ .refresh {
1365
+ min-width: 40px;
1366
+ min-height: 36px;
1367
+ padding: 6px 9px;
1368
+ }
1369
+ .refresh span {
1370
+ display: none;
1371
+ }
1372
+ .tabs {
1373
+ padding: 0 12px;
1374
+ }
1375
+ .tab {
1376
+ min-height: 40px;
1377
+ padding: 7px 10px;
1378
+ }
1379
+ main {
1380
+ padding: 15px 12px 32px;
1381
+ }
1382
+ .view-heading {
1383
+ align-items: start;
1384
+ flex-direction: column;
1385
+ gap: 5px;
1386
+ }
1387
+ .topline {
1388
+ gap: 8px;
1389
+ }
1390
+ .stat {
1391
+ min-height: 86px;
1392
+ padding: 10px;
1393
+ }
1394
+ .stat .value {
1395
+ font-size: 22px;
1396
+ }
1397
+ .overview-grid {
1398
+ gap: 11px;
1399
+ }
1400
+ .panel-card {
1401
+ padding: 11px;
1402
+ }
1403
+ .metric-grid {
1404
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1405
+ }
1406
+ .toolbar {
1407
+ align-items: stretch;
1408
+ flex-direction: column;
1409
+ }
1410
+ .controls {
1411
+ display: grid;
1412
+ grid-template-columns: minmax(0, 1fr) auto;
1413
+ }
1414
+ .progress-controls {
1415
+ grid-template-columns: 1fr;
1416
+ }
1417
+ .progress-controls select {
1418
+ width: 100%;
1419
+ }
1420
+ .search {
1421
+ width: 100%;
1422
+ }
1423
+ .grid {
1424
+ grid-template-columns: 1fr;
1425
+ }
1426
+ .card {
1427
+ min-height: 150px;
1428
+ }
1429
+ .row-top {
1430
+ flex-direction: column;
1431
+ gap: 5px;
1432
+ }
1433
+ .row-status {
1434
+ align-self: flex-start;
1435
+ }
1436
+ .ledger-panel {
1437
+ padding: 11px;
1438
+ }
1439
+ .ledger-score {
1440
+ font-size: 25px;
1441
+ }
1442
+ .review-dialog {
1443
+ width: 100%;
1444
+ border-left: 0;
1445
+ }
1446
+ .drawer-head {
1447
+ padding: 13px 12px 11px;
1448
+ }
1449
+ .drawer-body {
1450
+ padding: 0 12px 14px;
1451
+ }
1452
+ .drawer-actions {
1453
+ padding: 12px;
1454
+ }
1455
+ .detail-grid {
1456
+ grid-template-columns: 1fr;
1457
+ }
1458
+ .detail-field {
1459
+ border-right: 0;
1460
+ }
1461
+ .toast {
1462
+ right: 12px;
1463
+ bottom: 12px;
1464
+ }
1465
+ .session-review-head {
1466
+ grid-template-columns: 1fr;
1467
+ gap: 11px;
1468
+ }
1469
+ .session-review-title h2 {
1470
+ font-size: 20px;
1471
+ }
1472
+ .evidence-summary-band {
1473
+ grid-template-columns: 1fr;
1474
+ }
1475
+ .evidence-summary-band > div {
1476
+ border-right: 0;
1477
+ border-bottom: 1px solid #cbd0c9;
1478
+ }
1479
+ .evidence-summary-band > div:last-child {
1480
+ border-bottom: 0;
1481
+ }
1482
+ .evidence-panel {
1483
+ min-height: 280px;
1484
+ padding: 10px;
1485
+ }
1486
+ .decision-stack {
1487
+ grid-template-columns: 1fr;
1488
+ }
1489
+ .segment-event summary {
1490
+ grid-template-columns: 1fr;
1491
+ gap: 4px;
1492
+ }
1493
+ .message-head time {
1494
+ width: 100%;
1495
+ margin-left: 0;
1496
+ }
1497
+ }
1498
+
1499
+ @media (prefers-reduced-motion: reduce) {
1500
+ *,
1501
+ *::before,
1502
+ *::after {
1503
+ scroll-behavior: auto !important;
1504
+ transition-duration: .01ms !important;
1505
+ animation-duration: .01ms !important;
1506
+ }
1507
+ }