DocsLog in

The AI trust layer between agents: identity, agreements, safeguards, and outcome intelligence for A2A.

Viewing files at commit 1efaca5a5f5eCommit detailsView latest

apps/dashboard/src/styles.css 5574 lines · 93.4 KB · css
1
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter+Tight:wght@400;500;600;700&display=swap');
2
@import 'tailwindcss';
3
@import 'tw-animate-css';
4
@import './landing.css';
5
6
@custom-variant dark (&:is(.dark *));
7
8
@theme inline {
9
  --font-sans: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
10
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
11
  --color-background: var(--background);
12
  --color-foreground: var(--foreground);
13
  --color-card: var(--card);
14
  --color-card-foreground: var(--card-foreground);
15
  --color-popover: var(--popover);
16
  --color-popover-foreground: var(--popover-foreground);
17
  --color-primary: var(--primary);
18
  --color-primary-foreground: var(--primary-foreground);
19
  --color-secondary: var(--secondary);
20
  --color-secondary-foreground: var(--secondary-foreground);
21
  --color-muted: var(--muted);
22
  --color-muted-foreground: var(--muted-foreground);
23
  --color-accent: var(--ui-hover);
24
  --color-accent-foreground: var(--ui-hover-foreground);
25
  --color-destructive: var(--destructive);
26
  --color-border: var(--border);
27
  --color-input: var(--input);
28
  --color-ring: var(--ring);
29
  --color-sidebar: var(--sidebar);
30
  --color-sidebar-foreground: var(--sidebar-foreground);
31
  --color-sidebar-primary: var(--sidebar-primary);
32
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
33
  --color-sidebar-accent: var(--sidebar-accent);
34
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
35
  --color-sidebar-border: var(--sidebar-border);
36
  --color-sidebar-ring: var(--sidebar-ring);
37
  --radius-sm: calc(var(--radius) * 0.75);
38
  --radius-md: calc(var(--radius) * 0.875);
39
  --radius-lg: var(--radius);
40
  --radius-xl: calc(var(--radius) * 1.5);
41
}
42
43
:root {
44
  color-scheme: dark;
45
  --font: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
46
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
47
  --bg: #0c0a0a;
48
  --bg-sidebar: transparent;
49
  --bg-elevated: rgb(18 12 11 / 58%);
50
  --bg-card: transparent;
51
  --bg-hover: rgb(240 75 45 / 10%);
52
  --bg-input: rgb(12 10 10 / 78%);
53
  --bg-well: rgb(255 255 255 / 3.5%);
54
  --border: rgb(255 255 255 / 8%);
55
  --border-strong: rgb(255 255 255 / 14%);
56
  --text: #f6f1ee;
57
  --text-muted: #a39a94;
58
  --text-faint: #7a726c;
59
  --accent: #f04b2d;
60
  --accent-hover: #ff5d3d;
61
  --accent-ink: #ffffff;
62
  --accent-dim: rgb(240 75 45 / 16%);
63
  --accent-line: rgb(240 75 45 / 36%);
64
  --live: #2fbf71;
65
  --live-dim: rgb(47 191 113 / 14%);
66
  --warn: #e59a1a;
67
  --warn-dim: rgb(229 154 26 / 12%);
68
  --warn-line: rgb(229 154 26 / 32%);
69
  --danger: #c41f28;
70
  --danger-dim: rgb(196 31 40 / 12%);
71
  --danger-line: rgb(196 31 40 / 32%);
72
  --info: #e07a62;
73
  --shadow: none;
74
  --radius: 0px;
75
  --radius-sm: 0px;
76
  --glow-a: rgb(240 75 45 / 18%);
77
  --glow-b: rgb(240 75 45 / 8%);
78
  --dot: rgb(240 75 45 / 4%);
79
  --background: transparent;
80
  --foreground: var(--text);
81
  --card: transparent;
82
  --card-foreground: var(--text);
83
  --popover: #161211;
84
  --popover-foreground: var(--text);
85
  --primary: var(--accent);
86
  --primary-foreground: var(--accent-ink);
87
  --secondary: var(--bg-well);
88
  --secondary-foreground: var(--text);
89
  --muted: var(--bg-well);
90
  --muted-foreground: var(--text-muted);
91
  --ui-hover: var(--bg-hover);
92
  --ui-hover-foreground: var(--text);
93
  --destructive: var(--danger);
94
  --input: var(--border-strong);
95
  --ring: var(--accent);
96
  --sidebar: transparent;
97
  --sidebar-foreground: var(--text);
98
  --sidebar-primary: var(--accent);
99
  --sidebar-primary-foreground: var(--accent-ink);
100
  --sidebar-accent: var(--bg-hover);
101
  --sidebar-accent-foreground: var(--text);
102
  --sidebar-border: var(--border);
103
  --sidebar-ring: var(--accent);
104
  font-family: var(--font);
105
  color: var(--text);
106
  background: var(--bg);
107
  font-synthesis: none;
108
  line-height: 1.45;
109
}
110
111
:root[data-theme='light'] {
112
  color-scheme: light;
113
  --bg: #f7f4f2;
114
  --bg-sidebar: transparent;
115
  --bg-elevated: rgb(255 255 255 / 78%);
116
  --bg-card: transparent;
117
  --bg-hover: rgb(240 75 45 / 8%);
118
  --bg-input: #ffffff;
119
  --bg-well: rgb(22 14 12 / 3%);
120
  --border: rgb(22 14 12 / 8%);
121
  --border-strong: rgb(22 14 12 / 14%);
122
  --text: #16110f;
123
  --text-muted: #6b625d;
124
  --text-faint: #8a807a;
125
  --accent-dim: rgb(240 75 45 / 10%);
126
  --accent-line: rgb(240 75 45 / 28%);
127
  --live: #168a4d;
128
  --live-dim: rgb(22 138 77 / 10%);
129
  --warn-dim: rgb(229 154 26 / 12%);
130
  --warn-line: rgb(229 154 26 / 26%);
131
  --danger-dim: rgb(196 31 40 / 10%);
132
  --danger-line: rgb(196 31 40 / 22%);
133
  --glow-a: rgb(240 75 45 / 14%);
134
  --glow-b: rgb(240 75 45 / 6%);
135
  --dot: rgb(240 75 45 / 5%);
136
  --shadow: none;
137
  --popover: #ffffff;
138
}
139
140
* {
141
  box-sizing: border-box;
142
}
143
144
html,
145
body {
146
  min-height: 100%;
147
}
148
149
body {
150
  margin: 0;
151
  min-width: 320px;
152
  background: var(--bg);
153
}
154
155
::selection {
156
  color: var(--accent-ink);
157
  background: var(--accent);
158
}
159
160
button,
161
input,
162
select,
163
textarea {
164
  font: inherit;
165
}
166
167
button,
168
a,
169
input,
170
select,
171
textarea {
172
  outline: none;
173
}
174
175
:focus-visible {
176
  outline: 2px solid var(--accent);
177
  outline-offset: 2px;
178
}
179
180
[data-slot]:focus-visible {
181
  outline: none;
182
}
183
184
.skipLink {
185
  position: absolute;
186
  top: 8px;
187
  left: 8px;
188
  z-index: 20;
189
  padding: 8px 12px;
190
  border-radius: var(--radius-sm);
191
  color: var(--accent-ink);
192
  background: var(--accent);
193
  font-size: 13px;
194
  font-weight: 600;
195
  text-decoration: none;
196
  transform: translateY(-140%);
197
}
198
199
.skipLink:focus {
200
  transform: none;
201
}
202
203
.eyebrow {
204
  margin: 0;
205
  color: var(--text-faint);
206
  font: 500 11px/1.2 var(--mono);
207
  letter-spacing: 0.14em;
208
  text-transform: uppercase;
209
}
210
211
.eyebrow::before {
212
  color: var(--accent);
213
  content: '// ';
214
}
215
216
.mark {
217
  display: grid;
218
  width: 30px;
219
  height: 30px;
220
  place-items: center;
221
  border-radius: 8px;
222
  color: #fff;
223
  background: var(--accent);
224
  font: 600 10px/1 var(--mono);
225
}
226
227
.appInset {
228
  background: transparent;
229
}
230
231
.appTopbar {
232
  display: flex;
233
  align-items: center;
234
  gap: 8px;
235
  padding: 14px 24px 0;
236
}
237
238
.commandKbd {
239
  margin-left: auto;
240
  padding: 1px 5px;
241
  border: 1px solid var(--border);
242
  border-radius: 0;
243
  color: var(--text-faint);
244
  font: 500 10px/1.4 var(--mono);
245
}
246
247
@media (max-width: 640px) {
248
  .commandKbd {
249
    display: none;
250
  }
251
}
252
253
.brand {
254
  display: flex;
255
  align-items: center;
256
  gap: 10px;
257
}
258
259
.brand strong {
260
  font-size: 14px;
261
  font-weight: 600;
262
  letter-spacing: -0.03em;
263
}
264
265
.navRule {
266
  display: block;
267
  height: 1px;
268
  margin: 8px 10px;
269
  background: var(--border);
270
}
271
272
.ghostButton {
273
  display: flex;
274
  align-items: center;
275
  gap: 10px;
276
  width: 100%;
277
  margin-top: 16px;
278
  padding: 9px 2px;
279
  border: 0;
280
  border-radius: 0;
281
  color: var(--text-muted);
282
  background: transparent;
283
  font-size: 12px;
284
  cursor: pointer;
285
}
286
287
.ghostButton:hover,
288
.secondary:hover {
289
  background: var(--bg-hover);
290
}
291
292
.ghostButton svg {
293
  width: 16px;
294
  height: 16px;
295
  flex: none;
296
}
297
298
.sidebarFoot {
299
  display: grid;
300
  gap: 10px;
301
  margin-top: auto;
302
  padding-top: 12px;
303
}
304
305
.privacyStamp {
306
  display: flex;
307
  align-items: center;
308
  gap: 8px;
309
  padding: 0 4px;
310
  border: 0;
311
  background: transparent;
312
}
313
314
.privacyStamp small {
315
  color: var(--text-faint);
316
  font-size: 11px;
317
  line-height: 1.3;
318
}
319
320
.liveDot {
321
  width: 6px;
322
  height: 6px;
323
  flex: none;
324
  border-radius: 0;
325
  background: var(--live);
326
}
327
328
.sidebarTools {
329
  display: flex;
330
  align-items: center;
331
  gap: 6px;
332
}
333
334
.sidebarTools .iconButton {
335
  width: 32px;
336
  height: 32px;
337
  flex: none;
338
}
339
340
.account {
341
  display: flex;
342
  min-width: 0;
343
  flex: 1;
344
  align-items: center;
345
  gap: 8px;
346
  padding: 4px;
347
  border: 0;
348
  border-radius: 0;
349
  color: var(--text);
350
  background: transparent;
351
  text-align: left;
352
  cursor: pointer;
353
}
354
355
.account:hover {
356
  background: var(--bg-hover);
357
}
358
359
.account > span {
360
  display: grid;
361
  width: 28px;
362
  height: 28px;
363
  place-items: center;
364
  border: 0;
365
  border-radius: 50%;
366
  color: var(--accent-ink);
367
  background: var(--accent);
368
  font: 600 10px/1 var(--mono);
369
}
370
371
.account > div {
372
  display: flex;
373
  min-width: 0;
374
  flex: 1;
375
  flex-direction: column;
376
  gap: 2px;
377
}
378
379
.account strong,
380
.account small {
381
  overflow: hidden;
382
  text-overflow: ellipsis;
383
  white-space: nowrap;
384
}
385
386
.account strong {
387
  font-size: 12px;
388
}
389
390
.account small {
391
  color: var(--text-faint);
392
  font-size: 11px;
393
}
394
395
.account > b {
396
  color: var(--text-faint);
397
  font-size: 11px;
398
  font-weight: 500;
399
}
400
401
.mobileActions {
402
  display: flex;
403
  align-items: center;
404
  gap: 8px;
405
}
406
407
.iconButton {
408
  display: grid;
409
  width: 36px;
410
  height: 36px;
411
  place-items: center;
412
  border: 1px solid var(--border);
413
  border-radius: 0;
414
  color: var(--text);
415
  background: transparent;
416
  cursor: pointer;
417
}
418
419
.iconButton svg {
420
  width: 16px;
421
  height: 16px;
422
}
423
424
.appMain {
425
  width: 100%;
426
  max-width: 1040px;
427
  padding: 24px 40px 80px;
428
}
429
430
.appMain > * {
431
  animation: none;
432
}
433
434
.previewBanner {
435
  margin-bottom: 22px;
436
  padding: 0 0 14px;
437
  border: 0;
438
  border-bottom: 1px solid var(--accent-line);
439
  border-radius: 0;
440
  color: var(--accent-soft, var(--text));
441
  background: transparent;
442
  font: 500 12px/1.4 var(--mono);
443
}
444
445
.pageHead {
446
  display: flex;
447
  align-items: center;
448
  justify-content: space-between;
449
  gap: 16px;
450
  min-height: 42px;
451
  padding-bottom: 16px;
452
  border-bottom: 1px solid var(--border);
453
}
454
455
.pageHead h1 {
456
  margin: 0;
457
  font-size: 16px;
458
  font-weight: 500;
459
  letter-spacing: 0;
460
  line-height: 1.2;
461
}
462
463
.pageHead p.lede {
464
  max-width: 520px;
465
  margin: 6px 0 0;
466
  color: var(--text-muted);
467
  font-size: 13px;
468
  line-height: 1.45;
469
}
470
471
.primary,
472
.secondary {
473
  display: inline-flex;
474
  align-items: center;
475
  gap: 8px;
476
  padding: 10px 16px;
477
  border-radius: var(--radius-sm);
478
  cursor: pointer;
479
  font-size: 13px;
480
  font-weight: 600;
481
}
482
483
.primary {
484
  border: 0;
485
  color: #fff;
486
  background: var(--accent);
487
  box-shadow: none;
488
  transition:
489
    background 0.16s ease,
490
    transform 0.16s ease;
491
}
492
493
.primary:hover {
494
  background: var(--accent-hover);
495
}
496
497
.primary:disabled,
498
.secondary:disabled {
499
  opacity: 0.5;
500
  cursor: not-allowed;
501
}
502
503
.secondary {
504
  border: 1px solid var(--border-strong);
505
  color: var(--text);
506
  background: transparent;
507
}
508
509
.metrics {
510
  display: grid;
511
  grid-template-columns: repeat(4, minmax(0, 1fr));
512
  gap: 12px;
513
  margin: 14px 0 8px;
514
}
515
516
.readiness,
517
.attentionBanner {
518
  display: flex;
519
  align-items: center;
520
  justify-content: space-between;
521
  gap: 16px;
522
  margin: 22px 0 0;
523
  padding: 16px 4px 18px;
524
  border: 0;
525
  border-bottom: 1px solid var(--border);
526
  border-radius: 0;
527
  background: transparent;
528
}
529
530
.readiness.ready {
531
  border-color: var(--border);
532
  background: transparent;
533
}
534
535
.attentionBanner {
536
  width: 100%;
537
  color: inherit;
538
  text-align: left;
539
  cursor: pointer;
540
}
541
542
.readiness > div,
543
.attentionBanner > div {
544
  display: flex;
545
  align-items: center;
546
  gap: 12px;
547
}
548
549
.readiness > div > div,
550
.attentionBanner > div > div {
551
  display: flex;
552
  flex-direction: column;
553
  gap: 3px;
554
}
555
556
.readiness strong,
557
.attentionBanner strong {
558
  font-size: 14px;
559
}
560
561
.readiness small,
562
.attentionBanner small {
563
  color: var(--text-muted);
564
  font-size: 12px;
565
}
566
567
.statusIndex {
568
  flex: none;
569
  color: var(--accent);
570
  font: 500 11px/1 var(--mono);
571
  letter-spacing: 0.08em;
572
}
573
574
.readiness .statusIndex {
575
  color: var(--warn);
576
}
577
578
.metric {
579
  display: flex;
580
  min-height: 0;
581
  flex-direction: column;
582
  padding: 4px 8px 4px 0;
583
  border: 0;
584
  border-radius: 0;
585
  background: transparent;
586
}
587
588
.metric::before {
589
  width: 20px;
590
  height: 2px;
591
  margin-bottom: 10px;
592
  border-radius: 99px;
593
  background: var(--accent);
594
  content: '';
595
}
596
597
.metric.warn::before {
598
  background: var(--warn);
599
}
600
601
.metric > span {
602
  color: var(--text-faint);
603
  font: 11px/1.3 var(--mono);
604
  letter-spacing: 0.04em;
605
  text-transform: uppercase;
606
}
607
608
.metric > strong {
609
  margin: 0 0 5px;
610
  font: 500 28px/1 var(--mono);
611
  letter-spacing: -0.05em;
612
}
613
614
.metric > small {
615
  color: var(--text-muted);
616
  font-size: 12px;
617
}
618
619
.metric.warn > strong {
620
  color: var(--warn);
621
}
622
623
.contentGrid,
624
.connectLayout {
625
  display: grid;
626
  grid-template-columns: 1.25fr 1fr;
627
  gap: 36px;
628
}
629
630
.setupRequests {
631
  margin: 22px 0;
632
  padding: 8px 0 4px;
633
  border: 0;
634
  border-radius: 0;
635
  background: transparent;
636
}
637
638
.setupRequests > div:first-child h2 {
639
  margin: 8px 0 4px;
640
  font-size: 16px;
641
  font-weight: 500;
642
  letter-spacing: 0;
643
}
644
645
.setupRequests > div:first-child > p:last-child {
646
  margin: 0 0 16px;
647
  color: var(--text-muted);
648
  font-size: 13px;
649
}
650
651
.setupRequest {
652
  display: flex;
653
  align-items: center;
654
  justify-content: space-between;
655
  gap: 16px;
656
  padding: 16px 0;
657
  border: 0;
658
  border-bottom: 1px solid var(--border);
659
  border-radius: 0;
660
  background: transparent;
661
}
662
663
.setupRequest + .setupRequest {
664
  margin-top: 10px;
665
}
666
667
.setupRequest > div:first-child {
668
  display: flex;
669
  min-width: 0;
670
  flex-direction: column;
671
  gap: 4px;
672
}
673
674
.setupRequest strong {
675
  font-size: 14px;
676
}
677
678
.setupRequest label {
679
  display: grid;
680
  gap: 7px;
681
  width: min(420px, 100%);
682
}
683
684
.setupRequest label > span {
685
  color: var(--text-muted);
686
  font: 12px/1.4 var(--mono);
687
}
688
689
.setupRequest input {
690
  width: 100%;
691
  padding: 11px 12px;
692
  border: 1px solid var(--border-strong);
693
  border-radius: 8px;
694
  outline: none;
695
  background: var(--surface);
696
  color: var(--text);
697
  font: inherit;
698
}
699
700
.setupRequest input:focus {
701
  border-color: var(--accent);
702
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
703
}
704
705
.setupRequest details {
706
  margin-top: 8px;
707
  color: var(--text-muted);
708
  font-size: 13px;
709
}
710
711
.setupRequest summary {
712
  cursor: pointer;
713
  font: 12px/1.4 var(--mono);
714
}
715
716
.setupRequest small {
717
  color: var(--text-muted);
718
  font: 12px/1.4 var(--mono);
719
}
720
721
.decisionButtons {
722
  display: flex;
723
  flex: none;
724
  gap: 8px;
725
}
726
727
.setupRequests > .loginError {
728
  margin-top: 10px;
729
}
730
731
.panel {
732
  min-width: 0;
733
  padding: 6px 0 0;
734
  border: 0;
735
  border-radius: 0;
736
  background: transparent;
737
}
738
739
.panelHead {
740
  padding-bottom: 14px;
741
  border-bottom: 1px solid var(--border);
742
}
743
744
.panelHead h2 {
745
  margin: 0;
746
  font-size: 20px;
747
  font-weight: 600;
748
  letter-spacing: -0.03em;
749
}
750
751
.panelHead p {
752
  margin: 4px 0 0;
753
  color: var(--text-muted);
754
  font-size: 13px;
755
}
756
757
.toolbar {
758
  display: flex;
759
  flex-wrap: wrap;
760
  align-items: center;
761
  gap: 10px;
762
  margin: 16px 0 8px;
763
}
764
765
.searchField {
766
  min-width: 220px;
767
  flex: 1;
768
  padding: 10px 0;
769
  border: 0;
770
  border-bottom: 1px solid var(--border-strong);
771
  border-radius: 0;
772
  color: var(--text);
773
  background: transparent;
774
  font-size: 13px;
775
}
776
777
.filterRow {
778
  display: flex;
779
  flex-wrap: wrap;
780
  gap: 6px;
781
}
782
783
.filterChip {
784
  padding: 6px 0;
785
  border: 0;
786
  border-bottom: 1px solid transparent;
787
  border-radius: 0;
788
  color: var(--text-muted);
789
  background: transparent;
790
  font: 500 11px/1.3 var(--mono);
791
  letter-spacing: 0.06em;
792
  text-transform: lowercase;
793
  cursor: pointer;
794
}
795
796
.filterChip.active,
797
.filterChip:hover {
798
  color: var(--text);
799
  background: transparent;
800
}
801
802
.filterChip.active {
803
  border-color: var(--accent);
804
  color: var(--text);
805
  background: transparent;
806
}
807
808
.historyRow {
809
  display: flex;
810
  align-items: center;
811
  gap: 12px;
812
  padding: 13px 4px;
813
  border-bottom: 1px solid var(--border);
814
}
815
816
.historyRow:last-child {
817
  border-bottom: 0;
818
}
819
820
.historyRow:hover {
821
  background: transparent;
822
}
823
824
.historyRow > div {
825
  display: flex;
826
  min-width: 0;
827
  flex: 1;
828
  flex-direction: column;
829
  gap: 3px;
830
}
831
832
.historyRow strong {
833
  font-size: 13px;
834
  font-weight: 600;
835
  text-transform: capitalize;
836
}
837
838
.historyRow small {
839
  overflow: hidden;
840
  color: var(--text-muted);
841
  font: 12px/1.4 var(--mono);
842
  text-overflow: ellipsis;
843
  white-space: nowrap;
844
}
845
846
.historyRow > b {
847
  color: var(--text-faint);
848
  font: 11px/1.3 var(--mono);
849
  text-transform: uppercase;
850
}
851
852
.eventDot {
853
  width: 6px;
854
  height: 6px;
855
  flex: none;
856
  border-radius: 0;
857
  background: var(--live);
858
}
859
860
.eventDot.policy_warning,
861
.eventDot.objection {
862
  background: var(--warn);
863
}
864
865
.eventDot.policy_violation,
866
.eventDot.dispute {
867
  background: var(--danger);
868
}
869
870
.eventDot.receipt {
871
  background: var(--info);
872
}
873
874
.textButton {
875
  margin-top: 14px;
876
  padding: 0;
877
  border: 0;
878
  color: var(--accent);
879
  background: transparent;
880
  font-size: 13px;
881
  font-weight: 600;
882
  cursor: pointer;
883
}
884
885
.empty {
886
  display: grid;
887
  min-height: 180px;
888
  place-items: center;
889
  align-content: center;
890
  padding: 28px;
891
  text-align: center;
892
}
893
894
.empty > span,
895
.empty > svg {
896
  display: block;
897
  margin-bottom: 12px;
898
  color: var(--accent);
899
  font: 500 16px/1 var(--mono);
900
}
901
902
.empty strong {
903
  font-size: 15px;
904
  font-weight: 500;
905
}
906
907
.empty p {
908
  max-width: 420px;
909
  margin: 8px 0 16px;
910
  color: var(--text-muted);
911
  font-size: 13px;
912
  line-height: 1.55;
913
}
914
915
.profile {
916
  padding: 16px 0;
917
  border-bottom: 1px solid var(--border);
918
}
919
920
.profile:last-child {
921
  border-bottom: 0;
922
}
923
924
.profile > div:first-child {
925
  display: flex;
926
  justify-content: space-between;
927
  gap: 12px;
928
  margin-bottom: 12px;
929
}
930
931
.profile > div:first-child strong {
932
  font-size: 13px;
933
}
934
935
.profile > div:first-child small {
936
  color: var(--text-muted);
937
  font: 12px/1.3 var(--mono);
938
}
939
940
.meter {
941
  display: grid;
942
  grid-template-columns: 96px 1fr 40px;
943
  align-items: center;
944
  gap: 10px;
945
  margin: 8px 0;
946
  color: var(--text-muted);
947
  font: 11px/1.3 var(--mono);
948
}
949
950
.meter i {
951
  height: 1px;
952
  overflow: hidden;
953
  border-radius: 0;
954
  background: var(--border);
955
}
956
957
.meter i b {
958
  display: block;
959
  height: 100%;
960
  background: var(--accent);
961
}
962
963
.meter strong {
964
  text-align: right;
965
}
966
967
.agentGrid {
968
  display: grid;
969
  grid-template-columns: repeat(2, minmax(0, 1fr));
970
  gap: 16px;
971
  margin-top: 18px;
972
}
973
974
.agentGrid > .empty {
975
  grid-column: 1 / -1;
976
  border: 0;
977
  border-radius: 0;
978
  background: transparent;
979
}
980
981
.agentCard {
982
  display: flex;
983
  min-height: 230px;
984
  flex-direction: column;
985
  padding: 8px 4px 12px;
986
  border: 0;
987
  border-top: 1px solid var(--border);
988
  border-radius: 0;
989
  background: transparent;
990
}
991
992
.agentTop {
993
  display: flex;
994
  align-items: flex-start;
995
  justify-content: space-between;
996
  gap: 12px;
997
}
998
999
.agentGlyph {
1000
  display: grid;
1001
  width: 28px;
1002
  height: 28px;
1003
  place-items: center;
1004
  border: 0;
1005
  border-radius: 0;
1006
  color: var(--accent);
1007
  background: transparent;
1008
}
1009
1010
.agentGlyph svg {
1011
  width: 18px;
1012
  height: 18px;
1013
}
1014
1015
.agentBadges {
1016
  display: flex;
1017
  flex-wrap: wrap;
1018
  justify-content: flex-end;
1019
  gap: 6px;
1020
}
1021
1022
.agentTop b {
1023
  padding: 0;
1024
  border: 0;
1025
  border-radius: 0;
1026
  color: var(--text-muted);
1027
  background: transparent;
1028
  font: 11px/1.3 var(--mono);
1029
  letter-spacing: 0.04em;
1030
  text-transform: lowercase;
1031
}
1032
1033
.agentTop b.bad {
1034
  color: var(--danger);
1035
  background: transparent;
1036
}
1037
1038
.agentTop .readyBadge,
1039
.agentTop .onlineBadge {
1040
  color: var(--live);
1041
  background: transparent;
1042
}
1043
1044
:root[data-theme='dark'] .agentTop .readyBadge,
1045
:root[data-theme='dark'] .agentTop .onlineBadge {
1046
  color: var(--live);
1047
}
1048
1049
.agentTop .needsBadge {
1050
  color: var(--warn);
1051
  background: transparent;
1052
}
1053
1054
.agentTop .offlineBadge {
1055
  color: var(--text-faint);
1056
}
1057
1058
.agentCard h2 {
1059
  margin: 18px 0 4px;
1060
  font-size: 18px;
1061
  letter-spacing: -0.03em;
1062
}
1063
1064
.agentCard p,
1065
.agentCard > small {
1066
  color: var(--text-muted);
1067
  font-size: 13px;
1068
}
1069
1070
.agentCard > small {
1071
  display: block;
1072
  margin-top: 10px;
1073
}
1074
1075
.agentPublicLinks {
1076
  display: flex;
1077
  flex-wrap: wrap;
1078
  gap: 12px;
1079
  margin-top: 10px;
1080
}
1081
1082
.agentPublicLinks a {
1083
  color: var(--accent);
1084
  font-size: 13px;
1085
  font-weight: 600;
1086
  text-decoration: none;
1087
}
1088
1089
.agentPublicLinks a:hover {
1090
  text-decoration: underline;
1091
}
1092
1093
.agentCard > button,
1094
.agentCard > .agentActions {
1095
  width: 100%;
1096
  margin-top: 16px;
1097
}
1098
1099
.automationSummary {
1100
  display: flex;
1101
  flex-wrap: wrap;
1102
  gap: 6px;
1103
  margin-top: 14px;
1104
}
1105
1106
.automationSummary span,
1107
.automationPreview span {
1108
  padding: 5px 0;
1109
  border: 0;
1110
  border-radius: 0;
1111
  color: var(--text-muted);
1112
  background: transparent;
1113
  font: 11px/1.3 var(--mono);
1114
}
1115
1116
.automationForm {
1117
  display: grid;
1118
  gap: 12px;
1119
  margin-top: 16px;
1120
  padding-top: 16px;
1121
  border-top: 1px solid var(--border);
1122
}
1123
1124
.runtimeBox {
1125
  display: grid;
1126
  gap: 10px;
1127
  margin-top: 16px;
1128
  padding: 14px 0 0;
1129
  border: 0;
1130
  border-top: 1px solid var(--border);
1131
  border-radius: 0;
1132
  background: transparent;
1133
}
1134
1135
.runtimeBox > div:first-child {
1136
  display: flex;
1137
  align-items: center;
1138
  justify-content: space-between;
1139
  gap: 12px;
1140
}
1141
1142
.runtimeBox p,
1143
.runtimeBox small {
1144
  margin: 0;
1145
  color: var(--text-muted);
1146
  font-size: 12px;
1147
  line-height: 1.5;
1148
}
1149
1150
.runtimeBox input,
1151
.automationForm input,
1152
.automationForm select,
1153
.setting input,
1154
.setting select {
1155
  width: 100%;
1156
  padding: 10px 0;
1157
  border: 0;
1158
  border-bottom: 1px solid var(--border-strong);
1159
  border-radius: 0;
1160
  color: var(--text);
1161
  background: transparent;
1162
  font-size: 13px;
1163
}
1164
1165
.runtimeBox input:focus,
1166
.automationForm input:focus,
1167
.automationForm select:focus,
1168
.setting input:focus,
1169
.setting select:focus,
1170
.searchField:focus {
1171
  border-color: var(--accent);
1172
  box-shadow: 0 0 0 3px rgb(240 75 45 / 22%);
1173
}
1174
1175
.runtimeLive,
1176
.runtimeMissing {
1177
  font: 11px/1.3 var(--mono);
1178
}
1179
1180
.runtimeLive {
1181
  color: var(--live);
1182
}
1183
1184
.runtimeMissing {
1185
  color: var(--warn);
1186
}
1187
1188
.accessTokenBox {
1189
  display: grid;
1190
  gap: 12px;
1191
  margin-top: 12px;
1192
  padding: 14px 0 0;
1193
  border: 0;
1194
  border-top: 1px solid var(--border);
1195
  border-radius: 0;
1196
  background: transparent;
1197
}
1198
1199
.accessTokenHead > div {
1200
  display: flex;
1201
  align-items: center;
1202
  justify-content: space-between;
1203
  gap: 12px;
1204
}
1205
1206
.accessTokenHead span {
1207
  color: var(--accent);
1208
  font: 11px/1.3 var(--mono);
1209
}
1210
1211
.accessTokenHead p {
1212
  margin: 8px 0 0;
1213
  color: var(--text-muted);
1214
  font-size: 12px;
1215
  line-height: 1.5;
1216
}
1217
1218
.tokenList {
1219
  display: grid;
1220
  border-top: 1px solid var(--border);
1221
}
1222
1223
.tokenList > div {
1224
  display: flex;
1225
  align-items: center;
1226
  justify-content: space-between;
1227
  gap: 12px;
1228
  padding-top: 10px;
1229
}
1230
1231
.tokenList span {
1232
  display: grid;
1233
  min-width: 0;
1234
  gap: 3px;
1235
}
1236
1237
.tokenList small {
1238
  color: var(--text-muted);
1239
  font: 10px/1.4 var(--mono);
1240
}
1241
1242
.automationForm label {
1243
  display: grid;
1244
  gap: 6px;
1245
  color: var(--text-muted);
1246
  font-size: 12px;
1247
}
1248
1249
.automationForm .checkControl {
1250
  display: flex;
1251
  grid-template-columns: none;
1252
  align-items: center;
1253
  gap: 8px;
1254
}
1255
1256
.automationForm .checkControl input {
1257
  width: 15px;
1258
  height: 15px;
1259
  accent-color: var(--accent);
1260
}
1261
1262
.agentActions {
1263
  display: flex;
1264
  justify-content: flex-end;
1265
  gap: 8px;
1266
}
1267
1268
.agentManagementActions {
1269
  justify-content: space-between;
1270
}
1271
1272
.dangerButton {
1273
  border-color: var(--danger-line);
1274
  color: var(--danger);
1275
  background: var(--danger-dim);
1276
}
1277
1278
.dangerButton:hover:not(:disabled) {
1279
  border-color: var(--danger);
1280
}
1281
1282
.automationPreview {
1283
  display: flex;
1284
  flex-wrap: wrap;
1285
  gap: 6px;
1286
  margin-top: 8px;
1287
}
1288
1289
.autoAccepted {
1290
  color: var(--live) !important;
1291
}
1292
1293
.tags {
1294
  display: flex;
1295
  flex-wrap: wrap;
1296
  gap: 6px;
1297
  margin-top: 12px;
1298
}
1299
1300
.tags span {
1301
  padding: 4px 0;
1302
  border: 0;
1303
  border-radius: 0;
1304
  color: var(--text-muted);
1305
  font: 11px/1.3 var(--mono);
1306
}
1307
1308
.tags span + span::before,
1309
.automationSummary span + span::before,
1310
.automationPreview span + span::before {
1311
  margin-right: 8px;
1312
  color: var(--accent);
1313
  content: '/';
1314
}
1315
1316
.notice {
1317
  margin: 18px 0;
1318
  padding: 4px 0 16px;
1319
  border: 0;
1320
  border-bottom: 1px solid var(--border);
1321
  color: var(--text-muted);
1322
  background: transparent;
1323
  font-size: 13px;
1324
}
1325
1326
.notice strong {
1327
  margin-right: 6px;
1328
  color: var(--text);
1329
}
1330
1331
.connectionTypePicker {
1332
  display: grid;
1333
  grid-template-columns: repeat(2, minmax(0, 1fr));
1334
  gap: 10px;
1335
  margin-top: 18px;
1336
}
1337
1338
.connectionTypePicker button {
1339
  display: grid;
1340
  gap: 5px;
1341
  padding: 14px 4px 16px;
1342
  border: 0;
1343
  border-top: 2px solid var(--border);
1344
  border-radius: 0;
1345
  color: var(--text);
1346
  background: transparent;
1347
  font-size: 14px;
1348
  font-weight: 600;
1349
  text-align: left;
1350
  cursor: pointer;
1351
}
1352
1353
.connectionTypePicker button.active {
1354
  border-color: var(--accent);
1355
  background: transparent;
1356
}
1357
1358
.connectionTypePicker small {
1359
  color: var(--text-muted);
1360
  font-size: 12px;
1361
  font-weight: 400;
1362
}
1363
1364
.connectLayout {
1365
  margin-top: 18px;
1366
}
1367
1368
.mcpClientSection {
1369
  margin-top: 42px;
1370
  padding-top: 18px;
1371
  border-top: 1px solid var(--border);
1372
}
1373
1374
.mcpClientSection > summary {
1375
  display: flex;
1376
  align-items: baseline;
1377
  justify-content: space-between;
1378
  gap: 20px;
1379
  color: var(--text);
1380
  cursor: pointer;
1381
  list-style-position: inside;
1382
}
1383
1384
.mcpClientSection > summary span {
1385
  font-size: 14px;
1386
  font-weight: 600;
1387
}
1388
1389
.mcpClientSection > summary small {
1390
  max-width: 620px;
1391
  color: var(--text-muted);
1392
  font-size: 12px;
1393
  font-weight: 400;
1394
}
1395
1396
.mcpClientSection[open] > summary {
1397
  padding-bottom: 4px;
1398
}
1399
1400
.providerForm {
1401
  display: grid;
1402
  grid-template-columns: repeat(2, minmax(0, 1fr));
1403
  gap: 12px;
1404
  margin-top: 18px;
1405
}
1406
1407
.providerForm label,
1408
.providerResult label {
1409
  display: grid;
1410
  gap: 6px;
1411
  color: var(--text-muted);
1412
  font-size: 12px;
1413
}
1414
1415
.providerForm input,
1416
.providerForm select,
1417
.providerForm textarea {
1418
  width: 100%;
1419
  padding: 10px 0;
1420
  border: 0;
1421
  border-bottom: 1px solid var(--border-strong);
1422
  border-radius: 0;
1423
  color: var(--text);
1424
  background: transparent;
1425
  font: inherit;
1426
}
1427
1428
.providerForm textarea {
1429
  min-height: 82px;
1430
  resize: vertical;
1431
}
1432
1433
.providerForm .fullWidth {
1434
  grid-column: 1 / -1;
1435
}
1436
1437
.providerSubmit {
1438
  display: flex;
1439
  align-items: center;
1440
  justify-content: space-between;
1441
  gap: 12px;
1442
}
1443
1444
.providerSubmit p {
1445
  margin: 0;
1446
  color: var(--text-muted);
1447
  font-size: 12px;
1448
}
1449
1450
.providerResult {
1451
  display: grid;
1452
  gap: 14px;
1453
  margin-top: 18px;
1454
}
1455
1456
.providerResult code {
1457
  padding: 11px 0;
1458
  border: 0;
1459
  border-bottom: 1px solid var(--border);
1460
  border-radius: 0;
1461
  color: var(--accent);
1462
  background: transparent;
1463
  overflow-wrap: anywhere;
1464
  user-select: all;
1465
}
1466
1467
.successBanner {
1468
  display: grid;
1469
  gap: 3px;
1470
  padding: 12px 0;
1471
  border: 0;
1472
  border-radius: 0;
1473
  background: transparent;
1474
}
1475
1476
.successBanner span {
1477
  color: var(--text-muted);
1478
  font: 11px/1.4 var(--mono);
1479
  overflow-wrap: anywhere;
1480
}
1481
1482
.providerNotice {
1483
  margin-bottom: 0;
1484
}
1485
1486
.providerIntro {
1487
  display: flex;
1488
  align-items: end;
1489
  justify-content: space-between;
1490
  gap: 24px;
1491
  margin-bottom: 22px;
1492
}
1493
1494
.providerIntro h2,
1495
.providerSetup h2 {
1496
  margin: 7px 0 5px;
1497
  font-size: clamp(21px, 3vw, 30px);
1498
  font-weight: 520;
1499
  letter-spacing: -0.035em;
1500
}
1501
1502
.providerIntro p,
1503
.providerSetup p {
1504
  margin: 0;
1505
  color: var(--text-muted);
1506
}
1507
1508
.providerIntro > span {
1509
  color: var(--text-muted);
1510
  font: 11px/1.4 var(--mono);
1511
  text-transform: uppercase;
1512
}
1513
1514
.providerGrid {
1515
  display: grid;
1516
  grid-template-columns: repeat(5, minmax(0, 1fr));
1517
  border-top: 1px solid var(--border);
1518
  border-bottom: 1px solid var(--border);
1519
}
1520
1521
.providerCard {
1522
  display: grid;
1523
  min-width: 0;
1524
  min-height: 152px;
1525
  align-content: space-between;
1526
  gap: 20px;
1527
  padding: 18px;
1528
  border: 0;
1529
  border-right: 1px solid var(--border);
1530
  color: var(--text);
1531
  background: transparent;
1532
  text-align: left;
1533
}
1534
1535
.providerCard:last-child {
1536
  border-right: 0;
1537
}
1538
1539
button.providerCard {
1540
  cursor: pointer;
1541
}
1542
1543
.providerCard.available:hover,
1544
.providerCard.active {
1545
  background: color-mix(in srgb, var(--accent) 7%, transparent);
1546
}
1547
1548
.providerCard.active {
1549
  box-shadow: inset 0 -2px var(--accent);
1550
}
1551
1552
.providerCard > span:nth-child(2) {
1553
  display: grid;
1554
  gap: 5px;
1555
}
1556
1557
.providerCard strong {
1558
  font-size: 14px;
1559
  font-weight: 600;
1560
}
1561
1562
.providerCard small {
1563
  color: var(--text-muted);
1564
  font: 10px/1.4 var(--mono);
1565
  text-transform: uppercase;
1566
}
1567
1568
.providerCard > svg {
1569
  width: 17px;
1570
  color: var(--accent);
1571
}
1572
1573
.providerMonogram {
1574
  display: grid;
1575
  width: 34px;
1576
  height: 34px;
1577
  place-items: center;
1578
  border: 1px solid var(--border-strong);
1579
  color: var(--text-muted);
1580
  font: 600 11px/1 var(--mono);
1581
  text-transform: uppercase;
1582
}
1583
1584
.botpressMonogram {
1585
  border-color: var(--accent);
1586
  color: var(--accent);
1587
}
1588
1589
.providerSetup {
1590
  margin-top: 24px;
1591
  padding: 24px;
1592
  border: 1px solid var(--border);
1593
  background: color-mix(in srgb, var(--surface) 74%, transparent);
1594
}
1595
1596
.providerSetup > header {
1597
  display: flex;
1598
  align-items: start;
1599
  justify-content: space-between;
1600
  gap: 20px;
1601
  padding-bottom: 20px;
1602
  border-bottom: 1px solid var(--border);
1603
}
1604
1605
.providerSetup .iconButton {
1606
  padding: 6px;
1607
}
1608
1609
.providerSetup .iconButton svg {
1610
  width: 17px;
1611
  height: 17px;
1612
}
1613
1614
.providerNameStep {
1615
  display: grid;
1616
  grid-template-columns: minmax(240px, 1fr) auto;
1617
  align-items: end;
1618
  gap: 14px;
1619
  max-width: 720px;
1620
  padding-top: 24px;
1621
}
1622
1623
.providerNameStep label {
1624
  display: grid;
1625
  gap: 8px;
1626
  color: var(--text-muted);
1627
  font-size: 12px;
1628
}
1629
1630
.providerNameStep > p {
1631
  grid-column: 1 / -1;
1632
  font-size: 12px;
1633
}
1634
1635
.pairingSetup {
1636
  display: grid;
1637
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
1638
  gap: 28px;
1639
  padding-top: 24px;
1640
}
1641
1642
.pairingCodeBlock {
1643
  display: grid;
1644
  align-content: start;
1645
  gap: 12px;
1646
  padding: 20px;
1647
  border: 1px solid var(--border-strong);
1648
}
1649
1650
.pairingCodeBlock > span,
1651
.waitingStatus {
1652
  color: var(--text-muted);
1653
  font: 10px/1.4 var(--mono);
1654
  letter-spacing: 0.06em;
1655
}
1656
1657
.pairingCodeBlock code {
1658
  color: var(--accent);
1659
  font: 600 14px/1.5 var(--mono);
1660
  overflow-wrap: anywhere;
1661
  user-select: all;
1662
}
1663
1664
.pairingCodeBlock button {
1665
  justify-self: start;
1666
}
1667
1668
.pairingCodeBlock button svg,
1669
.providerExternalLink svg {
1670
  width: 14px;
1671
  height: 14px;
1672
}
1673
1674
.providerExternalLink {
1675
  justify-self: start;
1676
}
1677
1678
.waitingStatus {
1679
  display: flex;
1680
  align-items: center;
1681
  gap: 7px;
1682
}
1683
1684
.waitingStatus svg {
1685
  width: 8px;
1686
  height: 8px;
1687
  fill: var(--accent);
1688
  color: var(--accent);
1689
}
1690
1691
.providerConnected {
1692
  display: flex;
1693
  align-items: center;
1694
  gap: 16px;
1695
  padding-top: 24px;
1696
}
1697
1698
.providerConnected > svg {
1699
  width: 28px;
1700
  color: var(--good);
1701
}
1702
1703
.providerConnected > div {
1704
  flex: 1;
1705
}
1706
1707
.providerConnected strong {
1708
  display: block;
1709
  margin-bottom: 4px;
1710
}
1711
1712
.customRuntimeSetup {
1713
  margin-top: 26px;
1714
  padding: 18px 0;
1715
  border-top: 1px solid var(--border);
1716
  border-bottom: 1px solid var(--border);
1717
}
1718
1719
.customRuntimeSetup > summary {
1720
  color: var(--text-muted);
1721
  cursor: pointer;
1722
  font-size: 13px;
1723
}
1724
1725
.endpoint {
1726
  display: flex;
1727
  gap: 8px;
1728
  margin: 20px 0;
1729
}
1730
1731
.endpoint code {
1732
  overflow: auto;
1733
  flex: 1;
1734
  padding: 12px 0;
1735
  border: 0;
1736
  border-bottom: 1px solid var(--border);
1737
  border-radius: 0;
1738
  color: var(--accent);
1739
  background: transparent;
1740
  font: 13px/1.4 var(--mono);
1741
  white-space: nowrap;
1742
}
1743
1744
.endpoint button {
1745
  padding: 0 4px;
1746
  border: 0;
1747
  border-radius: 0;
1748
  color: var(--accent);
1749
  background: transparent;
1750
  font-weight: 600;
1751
  cursor: pointer;
1752
}
1753
1754
.connectLayout ol {
1755
  margin: 8px 0 0;
1756
  padding-left: 22px;
1757
  color: var(--text-muted);
1758
  font-size: 14px;
1759
  line-height: 1.7;
1760
}
1761
1762
.connectSteps {
1763
  display: grid;
1764
  gap: 12px;
1765
  margin-top: 18px;
1766
}
1767
1768
.connectStep {
1769
  display: grid;
1770
  grid-template-columns: 28px 1fr;
1771
  gap: 12px;
1772
  color: var(--text-muted);
1773
  font-size: 14px;
1774
}
1775
1776
.connectStep b {
1777
  display: grid;
1778
  width: 28px;
1779
  height: 28px;
1780
  place-items: center;
1781
  border-radius: 0;
1782
  color: var(--accent);
1783
  background: transparent;
1784
  font: 500 11px/1 var(--mono);
1785
}
1786
1787
.checkList {
1788
  margin: 16px 0 0;
1789
  padding: 0;
1790
  list-style: none;
1791
}
1792
1793
.checkList li {
1794
  padding: 11px 0;
1795
  border-bottom: 1px solid var(--border);
1796
  color: var(--text-muted);
1797
  font-size: 14px;
1798
}
1799
1800
.checkList li:last-child {
1801
  border-bottom: 0;
1802
}
1803
1804
.checkList li::before {
1805
  content: '✓';
1806
  margin-right: 10px;
1807
  color: var(--accent);
1808
}
1809
1810
.settingsCard {
1811
  margin-top: 10px;
1812
  border: 0;
1813
  border-radius: 0;
1814
  background: transparent;
1815
}
1816
1817
.setting {
1818
  display: grid;
1819
  grid-template-columns: 1fr minmax(230px, 0.55fr);
1820
  align-items: center;
1821
  gap: 24px;
1822
  padding: 22px 0;
1823
  border-bottom: 1px solid var(--border);
1824
}
1825
1826
.setting strong {
1827
  font-size: 14px;
1828
}
1829
1830
.setting p {
1831
  max-width: 580px;
1832
  margin: 5px 0 0;
1833
  color: var(--text-muted);
1834
  font-size: 13px;
1835
  line-height: 1.5;
1836
}
1837
1838
.locked {
1839
  float: right;
1840
  color: var(--text-faint);
1841
  font: 12px/1.3 var(--mono);
1842
}
1843
1844
.toggle {
1845
  position: relative;
1846
  display: block;
1847
  width: 42px;
1848
  height: 22px;
1849
  margin-left: auto;
1850
  padding: 0;
1851
  border: 1px solid var(--border-strong);
1852
  border-radius: 0;
1853
  background: var(--bg-well);
1854
  cursor: pointer;
1855
}
1856
1857
.toggle span {
1858
  position: absolute;
1859
  top: 4px;
1860
  left: 4px;
1861
  width: 12px;
1862
  height: 12px;
1863
  border-radius: 0;
1864
  background: var(--text-faint);
1865
  transition: transform 0.18s ease;
1866
}
1867
1868
.toggle.on {
1869
  border-color: var(--accent);
1870
  background: var(--accent);
1871
}
1872
1873
.toggle.on span {
1874
  left: 4px;
1875
  background: #fff;
1876
  transform: translateX(18px);
1877
}
1878
1879
.saveRow {
1880
  display: flex;
1881
  align-items: center;
1882
  gap: 12px;
1883
  padding: 22px 0;
1884
}
1885
1886
.saveRow span {
1887
  color: var(--accent);
1888
  font-size: 13px;
1889
}
1890
1891
.loginPage {
1892
  display: grid;
1893
  grid-template-columns: 1.05fr 0.95fr;
1894
  min-height: 100vh;
1895
}
1896
1897
.loginPitch {
1898
  display: flex;
1899
  flex-direction: column;
1900
  justify-content: space-between;
1901
  padding: 48px 7vw;
1902
  background: transparent;
1903
}
1904
1905
.loginPitch h1 {
1906
  max-width: 680px;
1907
  margin: 10px 0 14px;
1908
  font-size: clamp(40px, 5.4vw, 72px);
1909
  font-weight: 600;
1910
  letter-spacing: -0.06em;
1911
  line-height: 0.94;
1912
}
1913
1914
.loginPitch > div > p:last-child {
1915
  max-width: 540px;
1916
  color: var(--text-muted);
1917
  font-size: 16px;
1918
  line-height: 1.65;
1919
}
1920
1921
.launchBadge {
1922
  display: inline-flex;
1923
  width: fit-content;
1924
  margin: 0 0 18px;
1925
  padding: 5px 10px;
1926
  border: 1px solid var(--accent-line);
1927
  border-radius: 999px;
1928
  color: var(--accent);
1929
  background: var(--accent-dim);
1930
  font: 500 11px/1.3 var(--mono);
1931
}
1932
1933
.loginProof {
1934
  display: grid;
1935
  grid-template-columns: auto 1fr;
1936
  gap: 10px 12px;
1937
  color: var(--text-muted);
1938
  font: 12px/1.3 var(--mono);
1939
  text-transform: uppercase;
1940
}
1941
1942
.loginProof span {
1943
  color: var(--accent);
1944
}
1945
1946
.loginCard {
1947
  display: flex;
1948
  flex-direction: column;
1949
  justify-content: center;
1950
  padding: 8vw;
1951
  gap: 28px;
1952
  border-left: 1px solid var(--border);
1953
  background: transparent;
1954
}
1955
1956
.loginCard h2 {
1957
  margin: 6px 0;
1958
  font-size: 28px;
1959
  font-weight: 600;
1960
  letter-spacing: -0.04em;
1961
}
1962
1963
.socialButtons {
1964
  display: grid;
1965
  gap: 10px;
1966
}
1967
1968
.socialButtons button {
1969
  display: flex;
1970
  align-items: center;
1971
  justify-content: center;
1972
  gap: 10px;
1973
  width: 100%;
1974
  padding: 13px;
1975
  border: 1px solid var(--border-strong);
1976
  border-radius: var(--radius-sm);
1977
  color: var(--text);
1978
  background: transparent;
1979
  font-size: 14px;
1980
  font-weight: 600;
1981
  cursor: pointer;
1982
}
1983
1984
.socialButtons button:first-child {
1985
  border-color: transparent;
1986
  color: var(--accent-ink);
1987
  background: var(--accent);
1988
  box-shadow: none;
1989
}
1990
1991
.socialButtons button:hover {
1992
  border-color: var(--accent);
1993
  background: var(--accent-dim);
1994
}
1995
1996
.socialButtons button:first-child:hover {
1997
  color: var(--accent-ink);
1998
  background: var(--accent-hover);
1999
}
2000
2001
.socialButtons svg {
2002
  width: 18px;
2003
  height: 18px;
2004
}
2005
2006
.loginError,
2007
.errorBar {
2008
  padding: 11px 0;
2009
  border: 0;
2010
  border-radius: 0;
2011
  color: var(--danger);
2012
  background: transparent;
2013
  font-size: 13px;
2014
}
2015
2016
.loginCard > div > p:last-child,
2017
.loginCard > small {
2018
  color: var(--text-muted);
2019
  font-size: 13px;
2020
  line-height: 1.55;
2021
}
2022
2023
.loading {
2024
  display: grid;
2025
  min-height: 100vh;
2026
  place-items: center;
2027
  align-content: center;
2028
  gap: 14px;
2029
  color: var(--text-muted);
2030
  font: 12px/1.3 var(--mono);
2031
  text-transform: uppercase;
2032
}
2033
2034
.loading.compact {
2035
  min-height: 50vh;
2036
}
2037
2038
.spinner {
2039
  width: 22px;
2040
  height: 22px;
2041
  border: 2px solid var(--border);
2042
  border-top-color: var(--accent);
2043
  border-radius: 50%;
2044
  animation: spin 0.8s linear infinite;
2045
}
2046
2047
.errorBar {
2048
  margin-bottom: 14px;
2049
}
2050
2051
@keyframes spin {
2052
  to {
2053
    transform: rotate(360deg);
2054
  }
2055
}
2056
2057
@keyframes fadeUp {
2058
  from {
2059
    opacity: 0;
2060
    transform: translateY(8px);
2061
  }
2062
  to {
2063
    opacity: 1;
2064
    transform: none;
2065
  }
2066
}
2067
2068
@keyframes pulse {
2069
  0%,
2070
  100% {
2071
    opacity: 1;
2072
    box-shadow: 0 0 0 0 rgb(240 75 45 / 35%);
2073
  }
2074
  50% {
2075
    opacity: 0.55;
2076
    box-shadow: 0 0 0 6px transparent;
2077
  }
2078
}
2079
2080
.conversationLayout {
2081
  display: grid;
2082
  grid-template-columns: minmax(260px, 0.7fr) minmax(360px, 1.3fr);
2083
  gap: 16px;
2084
}
2085
2086
.threadList,
2087
.conversationDetail,
2088
.messageList {
2089
  display: grid;
2090
  gap: 10px;
2091
}
2092
2093
.threadList > button {
2094
  display: flex;
2095
  align-items: center;
2096
  justify-content: space-between;
2097
  width: 100%;
2098
  padding: 12px 2px;
2099
  border: 0;
2100
  border-bottom: 1px solid var(--border);
2101
  border-radius: 0;
2102
  color: var(--text);
2103
  background: transparent;
2104
  text-align: left;
2105
  cursor: pointer;
2106
}
2107
2108
.threadList > button.active,
2109
.threadList > button:hover {
2110
  border-color: var(--accent);
2111
  background: transparent;
2112
}
2113
2114
.threadList span,
2115
.threadList small {
2116
  display: block;
2117
}
2118
2119
.threadList small,
2120
.messageList span {
2121
  margin-top: 4px;
2122
  color: var(--text-muted);
2123
  font-size: 11px;
2124
}
2125
2126
.threadList b,
2127
.conversationInsights b {
2128
  color: var(--accent);
2129
  font: 10px/1.2 var(--mono);
2130
}
2131
2132
.conversationInsights {
2133
  padding: 4px 0 12px;
2134
  border: 0;
2135
  border-bottom: 1px solid var(--warn-line);
2136
  border-radius: 0;
2137
  background: transparent;
2138
}
2139
2140
.conversationInsights p {
2141
  margin: 0 0 6px;
2142
  font-size: 12px;
2143
  line-height: 1.5;
2144
}
2145
2146
.conversationInsights p:last-child {
2147
  margin-bottom: 0;
2148
}
2149
2150
.messageList article {
2151
  max-width: 82%;
2152
  padding: 4px 0 12px;
2153
  border: 0;
2154
  border-radius: 0;
2155
  background: transparent;
2156
}
2157
2158
.messageList article.sent {
2159
  justify-self: end;
2160
  border-color: transparent;
2161
  background: transparent;
2162
}
2163
2164
.messageList article p {
2165
  margin: 4px 0;
2166
  white-space: pre-wrap;
2167
}
2168
2169
.replyBox {
2170
  display: grid;
2171
  gap: 8px;
2172
}
2173
2174
.replyBox textarea {
2175
  min-height: 100px;
2176
  padding: 10px 0;
2177
  border: 0;
2178
  border-bottom: 1px solid var(--border-strong);
2179
  border-radius: 0;
2180
  color: var(--text);
2181
  background: transparent;
2182
  resize: vertical;
2183
}
2184
2185
.historyToolbar {
2186
  display: flex;
2187
  flex-wrap: wrap;
2188
  align-items: center;
2189
  gap: 10px;
2190
  margin-bottom: 16px;
2191
}
2192
2193
.journeyLayout {
2194
  display: grid;
2195
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
2196
  gap: 16px;
2197
  align-items: start;
2198
}
2199
2200
.journeyList {
2201
  display: grid;
2202
  gap: 8px;
2203
}
2204
2205
.journeyList > button {
2206
  display: flex;
2207
  width: 100%;
2208
  flex-direction: column;
2209
  gap: 7px;
2210
  padding: 15px 4px;
2211
  border: 0;
2212
  border-bottom: 1px solid var(--border);
2213
  border-radius: 0;
2214
  color: var(--text);
2215
  background: transparent;
2216
  text-align: left;
2217
  cursor: pointer;
2218
}
2219
2220
.journeyList > button:hover {
2221
  border-color: var(--border-strong);
2222
  background: transparent;
2223
}
2224
2225
.journeyList > button.active {
2226
  border-color: var(--accent);
2227
  box-shadow: none;
2228
}
2229
2230
.journeyListTop,
2231
.journeyListMeta {
2232
  display: flex;
2233
  align-items: center;
2234
  justify-content: space-between;
2235
  gap: 10px;
2236
}
2237
2238
.journeyListTop > b {
2239
  color: var(--text-faint);
2240
  font: 500 10px/1.2 var(--mono);
2241
  letter-spacing: 0.08em;
2242
  text-transform: uppercase;
2243
}
2244
2245
.journeyList > button > strong {
2246
  font-size: 13px;
2247
  line-height: 1.4;
2248
}
2249
2250
.journeyList > button > small {
2251
  overflow: hidden;
2252
  color: var(--text-muted);
2253
  font: 11px/1.4 var(--mono);
2254
  text-overflow: ellipsis;
2255
  white-space: nowrap;
2256
}
2257
2258
.journeyListMeta {
2259
  color: var(--text-faint);
2260
  font: 10px/1.3 var(--mono);
2261
}
2262
2263
.journeyListMeta i {
2264
  font-style: normal;
2265
}
2266
2267
.statusPill {
2268
  display: inline-grid;
2269
  grid-template-columns: 6px minmax(7.4em, max-content);
2270
  align-items: center;
2271
  gap: 7px;
2272
  flex: none;
2273
  min-width: 8.4em;
2274
  padding: 0;
2275
  border: 0;
2276
  border-radius: 0;
2277
  color: var(--text-muted);
2278
  background: transparent;
2279
  font: 500 10px/1 var(--mono);
2280
  letter-spacing: 0.06em;
2281
  text-transform: uppercase;
2282
  white-space: nowrap;
2283
}
2284
2285
.statusPill i {
2286
  width: 6px;
2287
  height: 6px;
2288
  border-radius: 1px;
2289
  background: currentColor;
2290
}
2291
2292
.statusPill.good {
2293
  color: var(--live);
2294
}
2295
2296
.statusPill.warn {
2297
  color: var(--warn);
2298
}
2299
2300
:root[data-theme='light'] .statusPill.warn {
2301
  color: #8a5a16;
2302
}
2303
2304
.statusPill.danger {
2305
  color: var(--danger);
2306
}
2307
2308
.journeyDetail {
2309
  min-width: 0;
2310
  overflow: hidden;
2311
  border: 0;
2312
  border-radius: 0;
2313
  background: transparent;
2314
}
2315
2316
.journeyHero {
2317
  display: flex;
2318
  align-items: flex-start;
2319
  justify-content: space-between;
2320
  gap: 20px;
2321
  padding: 8px 0 22px;
2322
  border-bottom: 1px solid var(--border);
2323
}
2324
2325
.journeyHero h2 {
2326
  max-width: 780px;
2327
  margin: 8px 0 5px;
2328
  font-size: clamp(18px, 2vw, 24px);
2329
  line-height: 1.25;
2330
  letter-spacing: -0.03em;
2331
}
2332
2333
.journeyHero p {
2334
  margin: 0;
2335
  color: var(--text-muted);
2336
  font: 11px/1.4 var(--mono);
2337
}
2338
2339
.journeySummaryGrid {
2340
  display: grid;
2341
  grid-template-columns: repeat(4, minmax(0, 1fr));
2342
  border-bottom: 1px solid var(--border);
2343
}
2344
2345
.journeySummaryGrid section {
2346
  display: flex;
2347
  min-width: 0;
2348
  flex-direction: column;
2349
  gap: 5px;
2350
  padding: 16px 20px 16px 0;
2351
  border-right: 1px solid var(--border);
2352
}
2353
2354
.journeySummaryGrid section:last-child {
2355
  border-right: 0;
2356
}
2357
2358
.journeySummaryGrid span,
2359
.outcomeCard > div > span,
2360
.profileDelta > span {
2361
  color: var(--text-faint);
2362
  font: 10px/1.3 var(--mono);
2363
  letter-spacing: 0.05em;
2364
  text-transform: uppercase;
2365
}
2366
2367
.journeySummaryGrid strong {
2368
  overflow: hidden;
2369
  font-size: 15px;
2370
  text-overflow: ellipsis;
2371
  white-space: nowrap;
2372
}
2373
2374
.journeySummaryGrid small {
2375
  overflow: hidden;
2376
  color: var(--text-muted);
2377
  font-size: 11px;
2378
  text-overflow: ellipsis;
2379
  white-space: nowrap;
2380
}
2381
2382
.outcomeCard {
2383
  margin: 18px 0;
2384
  padding: 18px 0;
2385
  border: 0;
2386
  border-top: 1px solid var(--border);
2387
  border-radius: 0;
2388
  background: transparent;
2389
}
2390
2391
.outcomeCard h3 {
2392
  max-width: 800px;
2393
  margin: 7px 0 14px;
2394
  font-size: 14px;
2395
  font-weight: 500;
2396
  line-height: 1.55;
2397
}
2398
2399
.outcomeCard ul {
2400
  display: grid;
2401
  gap: 7px;
2402
  margin: 0;
2403
  padding: 0;
2404
  list-style: none;
2405
}
2406
2407
.outcomeCard li {
2408
  display: flex;
2409
  align-items: center;
2410
  gap: 9px;
2411
  color: var(--text-muted);
2412
  font-size: 12px;
2413
}
2414
2415
.ratingGrid {
2416
  display: grid;
2417
  grid-template-columns: repeat(2, minmax(0, 1fr));
2418
  gap: 0 24px;
2419
  margin-top: 16px;
2420
  padding-top: 10px;
2421
  border-top: 1px solid var(--accent-line);
2422
}
2423
2424
.progressCard {
2425
  margin: 18px 0;
2426
  padding: 18px 0;
2427
  border: 0;
2428
  border-top: 1px solid var(--border);
2429
  border-radius: 0;
2430
  background: transparent;
2431
}
2432
2433
.progressCardTop {
2434
  display: flex;
2435
  align-items: flex-start;
2436
  justify-content: space-between;
2437
  gap: 16px;
2438
}
2439
2440
.progressCardTop h3 {
2441
  margin: 6px 0 0;
2442
  font-size: 15px;
2443
}
2444
2445
.progressCardTop > strong {
2446
  color: var(--accent);
2447
  font: 600 22px/1 var(--mono);
2448
}
2449
2450
.progressTrack {
2451
  height: 1px;
2452
  margin: 16px 0 13px;
2453
  overflow: hidden;
2454
  border-radius: 0;
2455
  background: var(--border);
2456
}
2457
2458
.progressTrack i {
2459
  display: block;
2460
  height: 100%;
2461
  border-radius: inherit;
2462
  background: var(--accent);
2463
  transition: width 180ms ease;
2464
}
2465
2466
.progressFacts {
2467
  display: flex;
2468
  flex-wrap: wrap;
2469
  gap: 7px;
2470
}
2471
2472
.progressFacts span {
2473
  padding: 5px 0;
2474
  border: 0;
2475
  border-radius: 0;
2476
  color: var(--text-muted);
2477
  background: transparent;
2478
  font-size: 10px;
2479
}
2480
2481
.progressWarning {
2482
  margin: 13px 0 0;
2483
  padding-top: 12px;
2484
  border-top: 1px solid var(--warn-line);
2485
  color: var(--warn);
2486
  font-size: 11px;
2487
}
2488
2489
.assuranceDecisionGrid {
2490
  display: grid;
2491
  margin-top: 16px;
2492
  padding-top: 16px;
2493
  grid-template-columns: repeat(2, minmax(0, 1fr));
2494
  gap: 24px;
2495
  border-top: 1px solid var(--border);
2496
}
2497
2498
.assuranceDecisionGrid > section,
2499
.assuranceRisk,
2500
.assuranceProbe,
2501
.assuranceSafeguards,
2502
.assuranceSafeguard > div:first-child {
2503
  display: grid;
2504
  gap: 6px;
2505
}
2506
2507
.assuranceRisk,
2508
.assuranceProbe {
2509
  padding: 10px 0;
2510
  border-bottom: 1px dashed var(--border);
2511
}
2512
2513
.assuranceRisk strong,
2514
.assuranceProbe strong,
2515
.assuranceSafeguard strong {
2516
  font-size: 12px;
2517
  font-weight: 500;
2518
}
2519
2520
.assuranceRisk small,
2521
.assuranceProbe small,
2522
.assuranceSafeguard small,
2523
.assuranceNotice,
2524
.assuranceCalibration {
2525
  color: var(--text-muted);
2526
  font-size: 10px;
2527
  line-height: 1.5;
2528
}
2529
2530
.assuranceSafeguards {
2531
  margin-top: 16px;
2532
  padding-top: 16px;
2533
  border-top: 1px solid var(--border);
2534
}
2535
2536
.assuranceSafeguard {
2537
  display: flex;
2538
  align-items: center;
2539
  justify-content: space-between;
2540
  gap: 20px;
2541
  padding: 10px 0;
2542
  border-bottom: 1px dashed var(--border);
2543
}
2544
2545
.assuranceDecisionActions {
2546
  display: flex;
2547
  flex: none;
2548
  gap: 6px;
2549
}
2550
2551
.assuranceDecisionActions button {
2552
  min-height: 30px;
2553
  padding: 0 10px;
2554
  border: 1px solid var(--border-strong);
2555
  color: var(--text-muted);
2556
  background: transparent;
2557
  font: 500 10px/1 var(--mono);
2558
  cursor: pointer;
2559
}
2560
2561
.assuranceDecisionActions button.approve {
2562
  border-color: var(--accent-line);
2563
  color: var(--accent);
2564
}
2565
2566
.assuranceDecisionActions button:disabled {
2567
  cursor: wait;
2568
  opacity: 0.45;
2569
}
2570
2571
.assuranceCalibration,
2572
.assuranceNotice {
2573
  margin: 13px 0 0;
2574
}
2575
2576
.assuranceCalibration {
2577
  color: var(--live);
2578
}
2579
2580
@media (max-width: 720px) {
2581
  .assuranceDecisionGrid {
2582
    grid-template-columns: 1fr;
2583
  }
2584
2585
  .assuranceSafeguard {
2586
    align-items: flex-start;
2587
    flex-direction: column;
2588
  }
2589
}
2590
2591
.journeyNotice {
2592
  margin: 18px 0;
2593
  padding: 13px 0;
2594
  border: 0;
2595
  border-top: 1px solid var(--warn-line);
2596
  border-radius: 0;
2597
  color: var(--text-muted);
2598
  background: transparent;
2599
  font-size: 12px;
2600
}
2601
2602
.journeyTimelineSection {
2603
  padding: 4px 0 24px;
2604
}
2605
2606
.journeyTimelineSection > div:first-child h3 {
2607
  margin: 0;
2608
  font-size: 14px;
2609
}
2610
2611
.journeyTimelineSection > div:first-child small {
2612
  color: var(--text-muted);
2613
  font-size: 11px;
2614
}
2615
2616
.journeyTimeline {
2617
  margin: 18px 0 0;
2618
  padding: 0;
2619
  list-style: none;
2620
}
2621
2622
.journeyTimeline li {
2623
  position: relative;
2624
  display: grid;
2625
  grid-template-columns: 8px minmax(0, 1fr) minmax(8.4em, max-content);
2626
  gap: 12px;
2627
  min-height: 76px;
2628
}
2629
2630
.journeyTimeline li:not(:last-child)::before {
2631
  position: absolute;
2632
  top: 12px;
2633
  bottom: -4px;
2634
  left: 3px;
2635
  width: 1px;
2636
  background: var(--border-strong);
2637
  content: '';
2638
}
2639
2640
.journeyNode {
2641
  z-index: 1;
2642
  width: 7px;
2643
  height: 7px;
2644
  margin-top: 5px;
2645
  border: 0;
2646
  border-radius: 1px;
2647
  background: var(--text-faint);
2648
  box-shadow: none;
2649
}
2650
2651
.journeyNode.good {
2652
  background: var(--live);
2653
}
2654
2655
.journeyNode.warn {
2656
  background: var(--warn);
2657
}
2658
2659
.journeyNode.danger {
2660
  background: var(--danger);
2661
}
2662
2663
.journeyTimeline li > .statusPill {
2664
  justify-self: start;
2665
  width: 100%;
2666
}
2667
2668
.journeyTimeline li > div {
2669
  display: flex;
2670
  min-width: 0;
2671
  flex-direction: column;
2672
  gap: 3px;
2673
  padding-bottom: 18px;
2674
}
2675
2676
.journeyTimeline li > div > span {
2677
  color: var(--text-faint);
2678
  font: 9px/1.3 var(--mono);
2679
  text-transform: uppercase;
2680
}
2681
2682
.journeyTimeline li strong {
2683
  font-size: 12px;
2684
}
2685
2686
.journeyTimeline li p {
2687
  margin: 0;
2688
  color: var(--text-muted);
2689
  font-size: 11px;
2690
  line-height: 1.5;
2691
}
2692
2693
.insightPrinciple {
2694
  display: grid;
2695
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr);
2696
  gap: 30px;
2697
  align-items: center;
2698
  margin-bottom: 16px;
2699
  padding: 8px 0 22px;
2700
  border: 0;
2701
  border-bottom: 1px solid var(--border);
2702
  border-radius: 0;
2703
  background: transparent;
2704
}
2705
2706
.insightPrinciple h2 {
2707
  margin: 0 0 5px;
2708
  font-size: 16px;
2709
  font-weight: 500;
2710
  letter-spacing: 0;
2711
}
2712
2713
.insightPrinciple p {
2714
  max-width: 680px;
2715
  margin: 0;
2716
  color: var(--text-muted);
2717
  font-size: 13px;
2718
  line-height: 1.55;
2719
}
2720
2721
.insightStats {
2722
  display: grid;
2723
  grid-template-columns: repeat(3, 1fr);
2724
  gap: 8px;
2725
}
2726
2727
.insightStats span {
2728
  display: flex;
2729
  min-width: 0;
2730
  flex-direction: column;
2731
  padding: 12px 0;
2732
  border: 0;
2733
  border-radius: 0;
2734
  color: var(--text-muted);
2735
  background: transparent;
2736
  font-size: 10px;
2737
  text-align: left;
2738
}
2739
2740
.insightStats strong {
2741
  margin-bottom: 3px;
2742
  color: var(--text);
2743
  font: 500 22px/1 var(--mono);
2744
}
2745
2746
.insightGrid {
2747
  display: grid;
2748
  grid-template-columns: repeat(2, minmax(0, 1fr));
2749
  gap: 16px;
2750
  margin-bottom: 16px;
2751
}
2752
2753
.insightGrid > .empty {
2754
  grid-column: 1 / -1;
2755
  border: 0;
2756
  border-radius: 0;
2757
  background: transparent;
2758
}
2759
2760
.profileHead {
2761
  display: flex;
2762
  align-items: flex-start;
2763
  justify-content: space-between;
2764
  gap: 12px;
2765
  margin-bottom: 2px;
2766
}
2767
2768
.profileHead > div {
2769
  display: flex;
2770
  min-width: 0;
2771
  flex-direction: column;
2772
  gap: 3px;
2773
}
2774
2775
.profileHeadCompact {
2776
  align-items: center;
2777
  margin-bottom: 11px;
2778
}
2779
2780
.profileHeadCompact > small {
2781
  color: var(--text-faint);
2782
  font: 10px/1.4 var(--mono);
2783
}
2784
2785
.sampleBadge {
2786
  padding: 4px 7px;
2787
  border-radius: 999px;
2788
  color: var(--accent);
2789
  background: var(--accent-dim);
2790
  font: 9px/1.2 var(--mono);
2791
  white-space: nowrap;
2792
}
2793
2794
:root[data-theme='light'] .sampleBadge {
2795
  color: #c43a22;
2796
}
2797
2798
:root[data-theme='light'] .account > span {
2799
  color: var(--accent-ink);
2800
}
2801
2802
:root[data-theme='light'] .profileDelta b.positive {
2803
  color: #c43a22;
2804
}
2805
2806
:root[data-theme='light'] .profileDelta b.negative {
2807
  color: #a33d2e;
2808
}
2809
2810
.profileEvidenceLine {
2811
  margin-bottom: 11px;
2812
  color: var(--text-faint);
2813
  font: 10px/1.4 var(--mono);
2814
}
2815
2816
.profileDelta {
2817
  margin-top: 14px;
2818
  padding-top: 12px;
2819
  border-top: 1px solid var(--border);
2820
}
2821
2822
.profileDelta > div {
2823
  display: flex;
2824
  flex-wrap: wrap;
2825
  gap: 5px;
2826
  margin-top: 7px;
2827
}
2828
2829
.profileDelta b {
2830
  padding: 4px 6px;
2831
  border-radius: 4px;
2832
  color: var(--text-muted);
2833
  background: var(--bg-well);
2834
  font: 9px/1.2 var(--mono);
2835
}
2836
2837
.profileDelta b.positive {
2838
  color: var(--accent);
2839
}
2840
2841
.profileDelta b.negative {
2842
  color: var(--danger);
2843
}
2844
2845
.learningDecisionList {
2846
  display: grid;
2847
}
2848
2849
.learningDecisionList article {
2850
  display: grid;
2851
  grid-template-columns: auto minmax(0, 1fr);
2852
  gap: 12px;
2853
  padding: 14px 0;
2854
  border-bottom: 1px solid var(--border);
2855
}
2856
2857
.learningDecisionList article:last-child {
2858
  border-bottom: 0;
2859
}
2860
2861
.learningDecisionList article > div {
2862
  display: flex;
2863
  min-width: 0;
2864
  flex-direction: column;
2865
  gap: 3px;
2866
}
2867
2868
.learningDecisionList strong {
2869
  overflow: hidden;
2870
  font: 11px/1.4 var(--mono);
2871
  text-overflow: ellipsis;
2872
}
2873
2874
.learningDecisionList small {
2875
  color: var(--text-muted);
2876
  font-size: 10px;
2877
}
2878
2879
.learningDecisionList p {
2880
  margin: 2px 0 0;
2881
  color: var(--text-muted);
2882
  font-size: 11px;
2883
}
2884
2885
@media (prefers-reduced-motion: reduce) {
2886
  .spinner,
2887
  .toggle span,
2888
  .liveDot,
2889
  .appMain > * {
2890
    animation: none;
2891
    transition: none;
2892
  }
2893
2894
  .primary {
2895
    transition: none;
2896
  }
2897
2898
  .primary:hover {
2899
    transform: none;
2900
  }
2901
}
2902
2903
/* Simplified agent workspace */
2904
.simpleShell {
2905
  min-height: 100svh;
2906
  background: var(--bg);
2907
}
2908
2909
.simpleShell.landingPage {
2910
  overflow-x: clip;
2911
}
2912
2913
.dashHeader {
2914
  position: sticky;
2915
  z-index: 30;
2916
}
2917
2918
.dashHeader .landingBrand {
2919
  border: 0;
2920
  padding: 0;
2921
  background: transparent;
2922
  cursor: pointer;
2923
}
2924
2925
.dashNav {
2926
  display: flex;
2927
  align-items: center;
2928
  gap: 28px;
2929
  color: var(--text-muted);
2930
  font-size: 12px;
2931
}
2932
2933
.dashNav button {
2934
  padding: 0;
2935
  border: 0;
2936
  color: inherit;
2937
  background: transparent;
2938
  letter-spacing: 0.06em;
2939
  text-transform: lowercase;
2940
  cursor: pointer;
2941
  font: inherit;
2942
  transition: color 140ms ease;
2943
}
2944
2945
.dashNav button::before {
2946
  margin-right: 2px;
2947
  color: var(--text-faint);
2948
  content: '/';
2949
}
2950
2951
.dashNav button:hover,
2952
.dashNav button[aria-current='page'] {
2953
  color: var(--text);
2954
}
2955
2956
.accountMark {
2957
  display: grid;
2958
  width: 34px;
2959
  height: 34px;
2960
  place-items: center;
2961
  border: 1px solid var(--border);
2962
  color: var(--text-muted);
2963
  background: transparent;
2964
  font: 500 10px/1 var(--mono);
2965
  letter-spacing: 0.08em;
2966
  cursor: pointer;
2967
}
2968
2969
.accountMark:hover,
2970
.accountMark[data-state='open'] {
2971
  border-color: var(--border-strong);
2972
  color: var(--text);
2973
}
2974
2975
.dashMenu {
2976
  min-width: 180px;
2977
  border-radius: 0;
2978
  font-family: var(--mono);
2979
  font-size: 12px;
2980
  letter-spacing: 0.04em;
2981
  text-transform: lowercase;
2982
}
2983
2984
.simpleMain {
2985
  position: relative;
2986
  z-index: 1;
2987
  width: min(1120px, calc(100% - 48px));
2988
  margin: 0 auto;
2989
  padding: 28px 0 80px;
2990
}
2991
2992
.simpleMain p,
2993
.simpleMain .lede,
2994
.simpleMain input,
2995
.simpleMain textarea,
2996
.simpleMain select {
2997
  font-family: var(--font);
2998
}
2999
3000
.workspacePage {
3001
  display: grid;
3002
  gap: 22px;
3003
}
3004
3005
.workspaceHead {
3006
  display: flex;
3007
  align-items: center;
3008
  justify-content: space-between;
3009
  gap: 16px;
3010
  min-height: 42px;
3011
}
3012
3013
.landingPage.simpleShell .workspaceHead h1,
3014
.landingPage.simpleShell .pageHead h1 {
3015
  display: flex;
3016
  align-items: baseline;
3017
  gap: 10px;
3018
  margin: 0;
3019
  font-size: 16px;
3020
  font-weight: 500;
3021
  letter-spacing: 0;
3022
  line-height: 1.2;
3023
}
3024
3025
.workspaceHead h1 small {
3026
  color: var(--text-muted);
3027
  font: 400 12px/1 var(--mono);
3028
}
3029
3030
.assuranceOverview {
3031
  display: grid;
3032
  padding: 18px 0;
3033
  grid-template-columns: minmax(240px, 1.15fr) minmax(320px, 1fr) auto;
3034
  align-items: center;
3035
  gap: 28px;
3036
  border-top: 1px solid var(--accent-line);
3037
  border-bottom: 1px solid var(--accent-line);
3038
}
3039
3040
.assuranceOverview h2 {
3041
  margin: 6px 0 4px;
3042
  font-size: 16px;
3043
  font-weight: 500;
3044
}
3045
3046
.assuranceOverview p {
3047
  max-width: 560px;
3048
  margin: 0;
3049
  color: var(--text-muted);
3050
  font-size: 11px;
3051
  line-height: 1.5;
3052
}
3053
3054
.assuranceOverviewStats {
3055
  display: grid;
3056
  grid-template-columns: repeat(4, minmax(70px, 1fr));
3057
  gap: 16px;
3058
}
3059
3060
.assuranceOverviewStats span {
3061
  display: grid;
3062
  gap: 3px;
3063
  color: var(--text-faint);
3064
  font: 400 9px/1.35 var(--mono);
3065
  text-transform: uppercase;
3066
}
3067
3068
.assuranceOverviewStats strong {
3069
  color: var(--text);
3070
  font-size: 16px;
3071
  font-weight: 500;
3072
}
3073
3074
.assuranceOverview > button {
3075
  display: inline-flex;
3076
  min-height: 34px;
3077
  padding: 0 12px;
3078
  align-items: center;
3079
  gap: 8px;
3080
  border: 1px solid var(--border-strong);
3081
  color: var(--text-muted);
3082
  background: transparent;
3083
  font: 500 10px/1 var(--mono);
3084
  cursor: pointer;
3085
  white-space: nowrap;
3086
}
3087
3088
.assuranceOverview > button svg {
3089
  width: 13px;
3090
}
3091
3092
@media (max-width: 980px) {
3093
  .assuranceOverview {
3094
    grid-template-columns: 1fr;
3095
  }
3096
3097
  .assuranceOverview > button {
3098
    width: fit-content;
3099
  }
3100
}
3101
3102
@media (max-width: 620px) {
3103
  .assuranceOverviewStats {
3104
    grid-template-columns: repeat(2, minmax(0, 1fr));
3105
  }
3106
}
3107
3108
.firstRunGuide {
3109
  position: relative;
3110
  display: grid;
3111
  gap: 0;
3112
  padding: 0 0 8px;
3113
  border: 1px solid var(--border-strong);
3114
  border-right-style: dashed;
3115
  background: color-mix(in srgb, var(--bg) 70%, transparent);
3116
}
3117
3118
.firstRunGuide:has(.firstRunComplete) .firstRunHeader,
3119
.firstRunGuide:has(.firstRunComplete) .firstRunSteps {
3120
  display: none;
3121
}
3122
3123
.firstRunGuide:has(.firstRunComplete) .firstRunComplete {
3124
  border-top: 0;
3125
}
3126
3127
.firstRunHeader,
3128
.firstRunStage,
3129
.firstRunWaiting,
3130
.firstRunComplete {
3131
  display: flex;
3132
  align-items: center;
3133
  gap: 14px;
3134
}
3135
3136
.firstRunHeader {
3137
  align-items: start;
3138
  justify-content: space-between;
3139
  padding: 22px 22px 8px;
3140
}
3141
3142
.firstRunHeader h2 {
3143
  margin: 0 0 6px;
3144
  font-size: 16px;
3145
  font-weight: 500;
3146
  letter-spacing: 0;
3147
}
3148
3149
.firstRunHeader p,
3150
.firstRunStage p,
3151
.firstRunWaiting p,
3152
.firstRunComplete p {
3153
  margin: 0;
3154
  color: var(--text-muted);
3155
  font-size: 13px;
3156
  line-height: 1.55;
3157
}
3158
3159
.firstRunCount {
3160
  color: var(--accent);
3161
  font: 600 13px/1 var(--mono);
3162
}
3163
3164
.firstRunSteps {
3165
  display: grid;
3166
  grid-template-columns: repeat(4, minmax(0, 1fr));
3167
  gap: 1px;
3168
  margin: 8px 22px 0;
3169
  padding: 0;
3170
  background: var(--border);
3171
  list-style: none;
3172
}
3173
3174
.firstRunSteps.twoSteps {
3175
  grid-template-columns: repeat(2, minmax(0, 1fr));
3176
}
3177
3178
.firstRunSteps li {
3179
  display: flex;
3180
  align-items: center;
3181
  gap: 9px;
3182
  min-height: 46px;
3183
  padding: 0 12px;
3184
  color: var(--text-muted);
3185
  background: var(--bg-elevated);
3186
  font-size: 12px;
3187
}
3188
3189
.firstRunSteps li > span {
3190
  display: grid;
3191
  width: 22px;
3192
  height: 22px;
3193
  place-items: center;
3194
  border: 1px solid var(--border-strong);
3195
  font: 500 10px/1 var(--mono);
3196
}
3197
3198
.firstRunSteps li.done {
3199
  color: var(--text);
3200
}
3201
3202
.firstRunSteps li.done > span {
3203
  border-color: var(--accent-line);
3204
  color: var(--accent);
3205
  background: var(--accent-dim);
3206
}
3207
3208
.firstRunSteps svg,
3209
.firstRunIcon svg,
3210
.firstRunComplete button svg {
3211
  width: 14px;
3212
  height: 14px;
3213
}
3214
3215
.firstRunForm {
3216
  display: grid;
3217
  grid-template-columns: repeat(2, minmax(0, 1fr));
3218
  gap: 14px;
3219
  padding: 18px 22px 22px;
3220
  border-top: 1px solid var(--border);
3221
}
3222
3223
.firstRunStage,
3224
.firstRunBlocked,
3225
.firstRunWaiting {
3226
  grid-column: 1 / -1;
3227
}
3228
3229
.firstRunStage {
3230
  align-items: start;
3231
}
3232
3233
.firstRunStage > div,
3234
.firstRunWaiting > div,
3235
.firstRunComplete > div {
3236
  display: grid;
3237
  flex: 1;
3238
  gap: 3px;
3239
}
3240
3241
.firstRunIcon {
3242
  display: grid;
3243
  width: 36px;
3244
  height: 36px;
3245
  flex: 0 0 auto;
3246
  place-items: center;
3247
  border: 1px solid var(--accent-line);
3248
  color: var(--accent);
3249
  background: transparent;
3250
  font: 500 11px/1 var(--mono);
3251
  letter-spacing: 0.06em;
3252
}
3253
3254
.firstRunIcon.complete {
3255
  border-color: var(--live);
3256
  color: var(--live);
3257
}
3258
3259
.firstRunForm label {
3260
  display: grid;
3261
  gap: 6px;
3262
  color: var(--text-muted);
3263
  font-size: 12px;
3264
}
3265
3266
.firstRunForm label.fullWidth {
3267
  grid-column: 1 / -1;
3268
}
3269
3270
.firstRunForm input,
3271
.firstRunForm select,
3272
.firstRunForm textarea {
3273
  width: 100%;
3274
  min-height: 42px;
3275
  padding: 9px 10px;
3276
  border: 1px solid var(--border-strong);
3277
  border-radius: 0;
3278
  color: var(--text);
3279
  background: var(--bg-elevated);
3280
  font: inherit;
3281
}
3282
3283
.firstRunForm textarea {
3284
  min-height: 86px;
3285
  resize: vertical;
3286
}
3287
3288
.firstRunForm > button[type='submit'] {
3289
  align-self: end;
3290
  justify-self: start;
3291
  min-height: 42px;
3292
}
3293
3294
.firstRunBlocked {
3295
  display: flex;
3296
  align-items: center;
3297
  justify-content: space-between;
3298
  gap: 14px;
3299
  padding: 14px;
3300
  border: 1px solid var(--border);
3301
  color: var(--text-muted);
3302
  background: var(--bg-elevated);
3303
  font-size: 13px;
3304
}
3305
3306
.firstRunBlocked button {
3307
  flex: 0 0 auto;
3308
}
3309
3310
.firstRunReview {
3311
  display: grid;
3312
  gap: 16px;
3313
  padding: 18px 22px 22px;
3314
  border-top: 1px solid var(--border);
3315
}
3316
3317
.agentCardPreview {
3318
  display: grid;
3319
  gap: 10px;
3320
  padding: 18px;
3321
  border: 1px solid var(--border-strong);
3322
  background: var(--bg-elevated);
3323
}
3324
3325
.agentCardPreview h3,
3326
.agentCardPreview p,
3327
.agentCardPreview dl,
3328
.agentCardPreview dd {
3329
  margin: 0;
3330
}
3331
3332
.agentCardPreview p,
3333
.agentCardPreview small,
3334
.firstRunComplete small {
3335
  color: var(--text-muted);
3336
}
3337
3338
.agentCardPreview dl {
3339
  display: grid;
3340
  grid-template-columns: repeat(2, minmax(0, 1fr));
3341
  gap: 12px;
3342
}
3343
3344
.agentCardPreview dl > div {
3345
  display: grid;
3346
  gap: 3px;
3347
}
3348
3349
.agentCardPreview dt {
3350
  color: var(--text-muted);
3351
  font: 500 10px/1.4 var(--mono);
3352
  letter-spacing: 0.08em;
3353
  text-transform: uppercase;
3354
}
3355
3356
.verifiedPublisher {
3357
  justify-self: start;
3358
  padding: 4px 7px;
3359
  border: 1px solid color-mix(in srgb, var(--live) 45%, transparent);
3360
  color: var(--live);
3361
  font: 500 11px/1 var(--mono);
3362
}
3363
3364
.firstRunWaiting {
3365
  align-items: start;
3366
  padding-top: 18px;
3367
  border-top: 1px solid var(--border);
3368
}
3369
3370
.firstRunWaiting small {
3371
  color: var(--text-muted);
3372
  font-size: 11px;
3373
  line-height: 1.5;
3374
}
3375
3376
.firstRunComplete {
3377
  display: grid;
3378
  grid-template-columns: auto 1fr auto;
3379
  padding: 18px 22px 22px;
3380
  border-top: 1px solid var(--border);
3381
}
3382
3383
.firstRunComplete button,
3384
.firstRunWaiting > button,
3385
.firstRunStage > button {
3386
  display: inline-flex;
3387
  align-items: center;
3388
  gap: 7px;
3389
  white-space: nowrap;
3390
}
3391
3392
.firstRunComplete a:not(.secondary) {
3393
  overflow-wrap: anywhere;
3394
  color: var(--accent);
3395
  font: 500 12px/1.5 var(--mono);
3396
}
3397
3398
.firstRunActions {
3399
  display: flex;
3400
  align-items: center;
3401
  gap: 8px;
3402
}
3403
3404
.firstRunActions svg {
3405
  width: 14px;
3406
  height: 14px;
3407
}
3408
3409
.compactRequests {
3410
  display: grid;
3411
  gap: 0;
3412
  border: 0;
3413
  border-top: 1px solid var(--accent-line);
3414
  border-bottom: 1px solid var(--accent-line);
3415
  background: transparent;
3416
}
3417
3418
.compactRequests article,
3419
.agentRequests article {
3420
  display: flex;
3421
  align-items: center;
3422
  gap: 13px;
3423
  padding: 12px 0;
3424
  background: transparent;
3425
  border-bottom: 1px dashed var(--border);
3426
}
3427
3428
.compactRequests article:last-child,
3429
.agentRequests article:last-child {
3430
  border-bottom: 0;
3431
}
3432
3433
.compactRequests article > div:nth-child(2),
3434
.agentRequests article > div:nth-child(2) {
3435
  display: grid;
3436
  min-width: 0;
3437
  gap: 2px;
3438
}
3439
3440
.compactRequests strong,
3441
.agentRequests strong {
3442
  overflow: hidden;
3443
  font-size: 13px;
3444
  text-overflow: ellipsis;
3445
  white-space: nowrap;
3446
}
3447
3448
.compactRequests small,
3449
.agentRequests small {
3450
  color: var(--text-muted);
3451
  font-size: 11px;
3452
}
3453
3454
.requestIcon {
3455
  display: grid;
3456
  width: 30px;
3457
  height: 30px;
3458
  place-items: center;
3459
  color: var(--accent);
3460
  background: var(--accent-dim);
3461
}
3462
3463
.requestIcon svg {
3464
  width: 15px;
3465
}
3466
3467
.iconDecisions {
3468
  display: flex;
3469
  gap: 6px;
3470
  margin-left: auto;
3471
}
3472
3473
.iconDecisions button {
3474
  display: grid;
3475
  width: 32px;
3476
  height: 32px;
3477
  place-items: center;
3478
  border: 1px solid var(--border-strong);
3479
  color: var(--text-muted);
3480
  background: transparent;
3481
  cursor: pointer;
3482
}
3483
3484
.iconDecisions button:hover {
3485
  color: var(--danger);
3486
  border-color: var(--danger-line);
3487
  background: var(--danger-dim);
3488
}
3489
3490
.iconDecisions button.approve {
3491
  color: var(--live);
3492
}
3493
3494
.iconDecisions button.approve:hover {
3495
  border-color: color-mix(in srgb, var(--live) 32%, transparent);
3496
  background: var(--live-dim);
3497
}
3498
3499
.iconDecisions svg {
3500
  width: 15px;
3501
}
3502
3503
.agentList {
3504
  display: grid;
3505
  gap: 0;
3506
  border-top: 1px solid var(--border);
3507
}
3508
3509
.agentRow {
3510
  overflow: visible;
3511
  border: 0;
3512
  border-bottom: 1px dashed var(--border);
3513
  background: transparent;
3514
}
3515
3516
.agentRow:hover,
3517
.agentRow.isExpanded {
3518
  border-color: var(--border);
3519
  background: color-mix(in srgb, var(--bg-hover) 55%, transparent);
3520
}
3521
3522
.agentRow.isExpanded {
3523
  border-bottom-style: solid;
3524
}
3525
3526
.agentRowSummary {
3527
  display: grid;
3528
  grid-template-columns: minmax(0, 1fr) minmax(190px, 230px) auto auto;
3529
  align-items: center;
3530
  gap: 16px;
3531
  width: 100%;
3532
  min-height: 82px;
3533
  padding: 16px 0;
3534
  color: inherit;
3535
  background: transparent;
3536
  text-align: left;
3537
}
3538
3539
.agentRowCore {
3540
  display: grid;
3541
  grid-template-columns: auto minmax(140px, 1.2fr) minmax(320px, 2fr);
3542
  align-items: center;
3543
  gap: 16px;
3544
  min-width: 0;
3545
  padding: 0;
3546
  border: 0;
3547
  color: inherit;
3548
  background: transparent;
3549
  text-align: left;
3550
  cursor: pointer;
3551
}
3552
3553
.agentRowCore:focus-visible,
3554
.scorecardTeaser:focus-visible,
3555
.agentExpandButton:focus-visible {
3556
  outline: 1px solid var(--accent);
3557
  outline-offset: 4px;
3558
}
3559
3560
.agentAvatar {
3561
  position: relative;
3562
  display: grid;
3563
  width: 42px;
3564
  height: 42px;
3565
  flex: none;
3566
  place-items: center;
3567
  border: 1px solid var(--accent-line);
3568
  color: var(--accent);
3569
  background: transparent;
3570
}
3571
3572
.agentAvatar b {
3573
  font: 500 12px/1 var(--mono);
3574
  letter-spacing: 0.08em;
3575
}
3576
3577
.agentAvatar.isSmall {
3578
  width: 28px;
3579
  height: 28px;
3580
}
3581
3582
.agentAvatar.isSmall b {
3583
  font-size: 9px;
3584
}
3585
3586
.agentAvatar i {
3587
  position: absolute;
3588
  right: -3px;
3589
  bottom: -3px;
3590
  width: 8px;
3591
  height: 8px;
3592
  border: 2px solid var(--bg);
3593
  background: var(--text-faint);
3594
}
3595
3596
.agentAvatar i.online {
3597
  background: var(--live);
3598
}
3599
3600
.agentIdentity {
3601
  display: grid;
3602
  min-width: 0;
3603
  gap: 3px;
3604
}
3605
3606
.agentIdentity strong {
3607
  overflow: hidden;
3608
  font-size: 14px;
3609
  text-overflow: ellipsis;
3610
  white-space: nowrap;
3611
}
3612
3613
.agentIdentity small {
3614
  color: var(--text-muted);
3615
  font-size: 10px;
3616
}
3617
3618
.agentSignals {
3619
  display: flex;
3620
  flex-wrap: wrap;
3621
  gap: 6px;
3622
}
3623
3624
.agentSignals span {
3625
  display: inline-flex;
3626
  align-items: center;
3627
  gap: 5px;
3628
  padding: 0;
3629
  border: 0;
3630
  color: var(--text-muted);
3631
  font: 400 11px/1 var(--mono);
3632
  letter-spacing: 0.04em;
3633
  text-transform: lowercase;
3634
}
3635
3636
.agentSignals svg {
3637
  width: 10px;
3638
  height: 10px;
3639
}
3640
3641
.agentSignals .signalOnline {
3642
  color: var(--live);
3643
  border-color: transparent;
3644
  background: transparent;
3645
}
3646
3647
.agentSignals .signalVerified {
3648
  color: var(--accent);
3649
  border-color: transparent;
3650
  background: transparent;
3651
}
3652
3653
.scorecardTeaser {
3654
  display: grid;
3655
  grid-template-columns: auto 1fr;
3656
  align-items: center;
3657
  gap: 12px;
3658
  min-width: 0;
3659
  padding: 0 0 0 16px;
3660
  border: 0;
3661
  border-left: 1px solid var(--border);
3662
  color: inherit;
3663
  background: transparent;
3664
  text-align: left;
3665
  cursor: pointer;
3666
}
3667
3668
.scorecardTeaser:hover {
3669
  border-color: var(--accent-line);
3670
}
3671
3672
.scorecardTeaser > span:last-child {
3673
  display: grid;
3674
  min-width: 0;
3675
  gap: 3px;
3676
}
3677
3678
.scorecardTeaser > strong {
3679
  color: var(--accent);
3680
  font: 500 22px/1 var(--mono);
3681
  letter-spacing: -0.04em;
3682
}
3683
3684
.scorecardTeaser b {
3685
  font: 500 11px/1 var(--mono);
3686
  letter-spacing: 0.08em;
3687
  text-transform: lowercase;
3688
}
3689
3690
.scorecardTeaser small {
3691
  overflow: hidden;
3692
  color: var(--text-muted);
3693
  font-size: 11px;
3694
  text-overflow: ellipsis;
3695
  text-transform: lowercase;
3696
  white-space: nowrap;
3697
}
3698
3699
.scorecardBars {
3700
  display: grid;
3701
  align-content: center;
3702
  gap: 3px;
3703
  height: 30px;
3704
  padding: 5px;
3705
  border-left: 2px solid var(--accent);
3706
  background: var(--bg-well);
3707
}
3708
3709
.scorecardBars i {
3710
  height: 2px;
3711
  max-width: 100%;
3712
  background: var(--accent);
3713
}
3714
3715
.agentExpandButton {
3716
  display: grid;
3717
  width: 30px;
3718
  height: 30px;
3719
  place-items: center;
3720
  padding: 0;
3721
  border: 0;
3722
  color: inherit;
3723
  background: transparent;
3724
  cursor: pointer;
3725
}
3726
3727
.notificationCount {
3728
  display: grid;
3729
  min-width: 22px;
3730
  height: 18px;
3731
  padding: 0 6px;
3732
  place-items: center;
3733
  border: 1px solid var(--accent-line);
3734
  color: var(--accent);
3735
  background: transparent;
3736
  font: 500 10px/1 var(--mono);
3737
}
3738
3739
.expandIcon {
3740
  width: 17px;
3741
  color: var(--text-faint);
3742
  transition: transform 160ms ease;
3743
}
3744
3745
.agentRow.isExpanded > .agentRowSummary .expandIcon {
3746
  transform: rotate(180deg);
3747
}
3748
3749
.scorecardDialog {
3750
  z-index: 80 !important;
3751
  width: min(1040px, calc(100vw - 32px)) !important;
3752
  max-width: 1040px !important;
3753
  max-height: calc(100vh - 32px);
3754
  gap: 14px !important;
3755
  overflow: auto;
3756
  padding: 18px !important;
3757
  border: 1px solid var(--border-strong) !important;
3758
  border-radius: 0 !important;
3759
  color: var(--text) !important;
3760
  opacity: 1 !important;
3761
  background: #0c0a0a !important;
3762
  box-shadow: 0 28px 100px rgb(0 0 0 / 58%) !important;
3763
}
3764
3765
[data-slot='dialog-overlay'] {
3766
  z-index: 70 !important;
3767
}
3768
3769
.scorecardA11yTitle {
3770
  position: absolute;
3771
  width: 1px;
3772
  height: 1px;
3773
  overflow: hidden;
3774
  clip: rect(0, 0, 0, 0);
3775
  white-space: nowrap;
3776
}
3777
3778
.behaviourScorecard {
3779
  position: relative;
3780
  overflow: hidden;
3781
  border: 1px solid var(--border-strong);
3782
  background: var(--bg);
3783
}
3784
3785
:root[data-theme='light'] .scorecardDialog {
3786
  background: #f7f4f2 !important;
3787
}
3788
3789
:root[data-theme='light'] .behaviourScorecard {
3790
  background: #fff;
3791
}
3792
3793
.behaviourScorecard::after {
3794
  content: none;
3795
}
3796
3797
.scorecardHeader,
3798
.scorecardIdentity,
3799
.scorecardFoot {
3800
  position: relative;
3801
  z-index: 1;
3802
}
3803
3804
.scorecardHeader {
3805
  display: flex;
3806
  align-items: center;
3807
  justify-content: space-between;
3808
  min-height: 58px;
3809
  padding: 0 24px;
3810
  border-bottom: 1px solid var(--border);
3811
}
3812
3813
.scorecardBrand,
3814
.scorecardHeader > span {
3815
  display: flex;
3816
  align-items: center;
3817
  gap: 8px;
3818
  color: var(--text-muted);
3819
  font: 600 9px/1 var(--mono);
3820
  letter-spacing: 0.08em;
3821
  text-transform: uppercase;
3822
}
3823
3824
.scorecardBrand svg,
3825
.scorecardHeader > span svg {
3826
  width: 14px;
3827
  height: 14px;
3828
}
3829
3830
.scorecardHeader > span.scorecardVerified {
3831
  color: var(--live);
3832
}
3833
3834
.scorecardIdentity {
3835
  display: flex;
3836
  align-items: end;
3837
  justify-content: space-between;
3838
  gap: 24px;
3839
  padding: 28px 24px 22px;
3840
}
3841
3842
.scorecardIdentity p {
3843
  margin: 0 0 8px;
3844
  color: var(--accent);
3845
  font: 600 9px/1 var(--mono);
3846
  letter-spacing: 0.16em;
3847
}
3848
3849
.scorecardIdentity h2 {
3850
  margin: 0;
3851
  font-size: clamp(26px, 4vw, 42px);
3852
  letter-spacing: -0.05em;
3853
}
3854
3855
.scorecardContext {
3856
  display: flex;
3857
  justify-content: flex-end;
3858
  flex-wrap: wrap;
3859
  gap: 5px;
3860
}
3861
3862
.scorecardContext span {
3863
  padding: 5px 7px;
3864
  border: 1px solid var(--border);
3865
  color: var(--text-muted);
3866
  background: var(--bg-well);
3867
  font: 500 8px/1 var(--mono);
3868
  text-transform: uppercase;
3869
}
3870
3871
.scorecardMetrics {
3872
  position: relative;
3873
  z-index: 1;
3874
  display: grid;
3875
  grid-template-columns: 1fr 1fr;
3876
  border-top: 1px solid var(--border);
3877
}
3878
3879
.scorecardMetrics > div {
3880
  display: grid;
3881
  grid-template-columns: minmax(150px, 0.9fr) minmax(120px, 1fr) 36px;
3882
  align-items: center;
3883
  gap: 14px;
3884
  min-height: 66px;
3885
  padding: 11px 24px;
3886
  border-bottom: 1px solid var(--border);
3887
}
3888
3889
.scorecardMetrics > div:nth-child(odd) {
3890
  border-right: 1px solid var(--border);
3891
}
3892
3893
.scorecardMetrics > div > span:first-child {
3894
  display: grid;
3895
  gap: 4px;
3896
}
3897
3898
.scorecardMetrics strong {
3899
  font-size: 11px;
3900
}
3901
3902
.scorecardMetrics small {
3903
  color: var(--text-faint);
3904
  font: 500 8px/1 var(--mono);
3905
  text-transform: uppercase;
3906
}
3907
3908
.scorecardMetrics b {
3909
  font: 500 18px/1 var(--mono);
3910
  text-align: right;
3911
}
3912
3913
.scorecardMeter {
3914
  height: 4px;
3915
  overflow: hidden;
3916
  background: var(--border);
3917
}
3918
3919
.scorecardMeter i {
3920
  display: block;
3921
  height: 100%;
3922
  background: var(--accent);
3923
}
3924
3925
.scorecardMetrics .isUnmeasured {
3926
  opacity: 0.55;
3927
}
3928
3929
.scorecardMetrics .isUnmeasured .scorecardMeter i {
3930
  width: 0 !important;
3931
}
3932
3933
.scorecardFoot {
3934
  display: grid;
3935
  grid-template-columns: auto auto 1fr;
3936
  align-items: center;
3937
  gap: 18px;
3938
  min-height: 58px;
3939
  padding: 12px 24px;
3940
  color: var(--text-muted);
3941
  font: 600 8px/1.2 var(--mono);
3942
  text-transform: uppercase;
3943
}
3944
3945
.scorecardFoot small {
3946
  justify-self: end;
3947
  color: var(--text-faint);
3948
  font: inherit;
3949
}
3950
3951
.scorecardActions {
3952
  display: flex;
3953
  justify-content: flex-end;
3954
  gap: 7px;
3955
}
3956
3957
.scorecardActions > span {
3958
  align-self: center;
3959
  margin-right: auto;
3960
  color: var(--live);
3961
  font: 600 9px/1 var(--mono);
3962
  text-transform: uppercase;
3963
}
3964
3965
.scorecardActions button {
3966
  display: inline-flex;
3967
  align-items: center;
3968
  gap: 7px;
3969
  min-height: 38px;
3970
  padding: 0 13px;
3971
  border: 1px solid var(--border-strong);
3972
  color: var(--text);
3973
  background: var(--bg-elevated);
3974
  font: 600 9px/1 var(--mono);
3975
  text-transform: uppercase;
3976
  cursor: pointer;
3977
}
3978
3979
.scorecardActions button.primary {
3980
  border-color: var(--accent);
3981
  color: white;
3982
  background: var(--accent);
3983
}
3984
3985
.scorecardActions svg {
3986
  width: 13px;
3987
}
3988
3989
.agentExpanded {
3990
  display: grid;
3991
  gap: 24px;
3992
  padding: 8px 0 22px 58px;
3993
  border-top: 1px dashed var(--border);
3994
  background: transparent;
3995
}
3996
3997
.agentRequests {
3998
  margin-top: 0;
3999
  border: 0;
4000
  border-top: 1px solid var(--accent-line);
4001
}
4002
4003
.agentRequests .sectionLabel {
4004
  padding: 9px 0;
4005
  border-bottom: 1px dashed var(--border);
4006
  background: transparent;
4007
}
4008
4009
.requestPulse {
4010
  width: 7px;
4011
  height: 7px;
4012
  border-radius: 999px;
4013
  background: var(--accent);
4014
}
4015
4016
.sectionLabel {
4017
  margin: 0;
4018
  color: var(--text-faint);
4019
  font: 600 9px/1 var(--mono);
4020
  letter-spacing: 0.14em;
4021
  text-transform: uppercase;
4022
}
4023
4024
.agentDetailStrip {
4025
  display: flex;
4026
  align-items: stretch;
4027
  border: 1px solid var(--border);
4028
}
4029
4030
.agentIntelligence {
4031
  display: grid;
4032
  grid-template-columns: minmax(220px, 1.2fr) auto minmax(240px, 1fr);
4033
  align-items: center;
4034
  gap: 22px;
4035
  padding: 18px;
4036
  border: 1px solid var(--accent-line);
4037
  background: linear-gradient(110deg, var(--accent-dim), transparent 62%);
4038
}
4039
4040
.intelligenceLead {
4041
  display: flex;
4042
  align-items: center;
4043
  gap: 14px;
4044
}
4045
4046
.intelligenceScore {
4047
  font: 500 42px/1 var(--mono);
4048
  letter-spacing: -0.08em;
4049
}
4050
4051
.intelligenceLead > div {
4052
  display: grid;
4053
  gap: 3px;
4054
}
4055
4056
.intelligenceLead strong {
4057
  font-size: 13px;
4058
}
4059
4060
.intelligenceLead small {
4061
  color: var(--text-muted);
4062
  font-size: 9px;
4063
  text-transform: uppercase;
4064
}
4065
4066
.intelligenceTrend {
4067
  display: grid;
4068
  gap: 5px;
4069
  text-align: right;
4070
}
4071
4072
.intelligenceTrend span {
4073
  font: 600 10px/1 var(--mono);
4074
  text-transform: uppercase;
4075
}
4076
4077
.intelligenceTrend .improving {
4078
  color: var(--live);
4079
}
4080
4081
.intelligenceTrend .declining {
4082
  color: var(--danger);
4083
}
4084
4085
.intelligenceTrend b {
4086
  color: var(--warn);
4087
  font: 500 8px/1.2 var(--mono);
4088
  text-transform: uppercase;
4089
}
4090
4091
.intelligenceSignals {
4092
  display: flex;
4093
  justify-content: flex-end;
4094
  flex-wrap: wrap;
4095
  gap: 5px;
4096
}
4097
4098
.intelligenceSignals span {
4099
  display: inline-flex;
4100
  align-items: center;
4101
  gap: 4px;
4102
  padding: 5px 7px;
4103
  border: 1px solid var(--border);
4104
  font: 500 8px/1 var(--mono);
4105
  text-transform: uppercase;
4106
}
4107
4108
.intelligenceSignals svg {
4109
  width: 9px;
4110
  height: 9px;
4111
}
4112
4113
.intelligenceSignals .strength {
4114
  color: var(--live);
4115
  border-color: color-mix(in srgb, var(--live) 24%, transparent);
4116
}
4117
4118
.intelligenceSignals .risk {
4119
  color: var(--warn);
4120
  border-color: var(--warn-line);
4121
}
4122
4123
.categoryScores {
4124
  display: flex;
4125
  grid-column: 1 / -1;
4126
  flex-wrap: wrap;
4127
  gap: 6px;
4128
  padding-top: 12px;
4129
  border-top: 1px solid var(--border);
4130
}
4131
4132
.categoryScores span {
4133
  padding: 5px 8px;
4134
  color: var(--text-muted);
4135
  background: var(--bg-well);
4136
  font: 500 9px/1 var(--mono);
4137
}
4138
4139
.categoryScores b {
4140
  color: var(--text);
4141
}
4142
4143
.intelligenceEmpty {
4144
  display: flex;
4145
  align-items: center;
4146
  gap: 14px;
4147
  padding: 17px;
4148
  border: 1px dashed var(--border-strong);
4149
}
4150
4151
.intelligenceEmpty > span {
4152
  font: 500 30px/1 var(--mono);
4153
  color: var(--text-faint);
4154
}
4155
4156
.intelligenceEmpty > div {
4157
  display: grid;
4158
  gap: 3px;
4159
}
4160
4161
.intelligenceEmpty strong {
4162
  font-size: 11px;
4163
}
4164
4165
.intelligenceEmpty small {
4166
  color: var(--text-muted);
4167
  font-size: 9px;
4168
}
4169
4170
.agentDetailStrip > span {
4171
  display: grid;
4172
  min-width: 140px;
4173
  gap: 3px;
4174
  padding: 13px 16px;
4175
  border-right: 1px solid var(--border);
4176
  color: var(--text-muted);
4177
  font-size: 10px;
4178
  text-transform: uppercase;
4179
}
4180
4181
.agentDetailStrip b {
4182
  color: var(--text);
4183
  font-size: 12px;
4184
  text-transform: none;
4185
}
4186
4187
.agentDetailStrip a {
4188
  display: inline-flex;
4189
  align-items: center;
4190
  gap: 6px;
4191
  margin-left: auto;
4192
  padding: 0 16px;
4193
  color: var(--accent);
4194
  font-size: 11px;
4195
  font-weight: 600;
4196
  text-decoration: none;
4197
}
4198
4199
.agentDetailStrip a svg {
4200
  width: 12px;
4201
}
4202
4203
.agentHistory {
4204
  display: grid;
4205
  gap: 0;
4206
  margin-top: 4px;
4207
  border-top: 1px solid var(--border);
4208
}
4209
4210
.historyHeading {
4211
  display: grid;
4212
  grid-template-columns: 1fr auto auto;
4213
  align-items: center;
4214
  gap: 12px;
4215
  width: 100%;
4216
  min-height: 44px;
4217
  padding: 0;
4218
  border: 0;
4219
  color: inherit;
4220
  background: transparent;
4221
  font: 500 14px/1.2 inherit;
4222
  letter-spacing: 0;
4223
  text-align: left;
4224
  cursor: pointer;
4225
}
4226
4227
.historyHeading small {
4228
  color: var(--text-muted);
4229
  font: 400 12px/1 var(--mono);
4230
}
4231
4232
.historyHeading .expandIcon,
4233
.historyEntry .expandIcon {
4234
  width: 14px;
4235
  color: var(--text-faint);
4236
  transition: transform 160ms ease;
4237
}
4238
4239
.historyHeading[aria-expanded='true'] > .expandIcon,
4240
.historyEntry.isExpanded > .historyRowSummary .expandIcon,
4241
.agentExpandButton[aria-expanded='true'] .expandIcon {
4242
  transform: rotate(180deg);
4243
}
4244
4245
.agentHistory ol {
4246
  display: grid;
4247
  margin: 0;
4248
  padding: 0;
4249
  list-style: none;
4250
  border-top: 1px dashed var(--border);
4251
}
4252
4253
.historyEntry {
4254
  border-bottom: 1px dashed var(--border);
4255
}
4256
4257
.historyEntry:last-child {
4258
  border-bottom: 0;
4259
}
4260
4261
.historyEntry.isExpanded {
4262
  border-bottom-style: solid;
4263
  background: color-mix(in srgb, var(--bg-hover) 40%, transparent);
4264
}
4265
4266
.historyRowSummary {
4267
  display: grid;
4268
  grid-template-columns: minmax(0, 1fr) auto;
4269
  align-items: center;
4270
  gap: 8px;
4271
}
4272
4273
.historyItem {
4274
  display: grid;
4275
  grid-template-columns: auto minmax(130px, 0.8fr) minmax(180px, 1.6fr) auto;
4276
  align-items: center;
4277
  gap: 13px;
4278
  width: 100%;
4279
  min-height: 52px;
4280
  padding: 0;
4281
  border: 0;
4282
  color: inherit;
4283
  background: transparent;
4284
  text-align: left;
4285
  cursor: pointer;
4286
}
4287
4288
.historyItem:focus-visible,
4289
.historyHeading:focus-visible {
4290
  outline: 1px solid var(--accent);
4291
  outline-offset: 4px;
4292
}
4293
4294
.historyIdentity {
4295
  display: grid;
4296
  min-width: 0;
4297
  gap: 2px;
4298
}
4299
4300
.historyEntry strong,
4301
.historyPurpose {
4302
  overflow: hidden;
4303
  font-size: 13px;
4304
  text-overflow: ellipsis;
4305
  white-space: nowrap;
4306
}
4307
4308
.historyEntry small {
4309
  color: var(--text-muted);
4310
  font-size: 10px;
4311
}
4312
4313
.historyPurpose {
4314
  color: var(--text-muted);
4315
  font-size: 11px;
4316
}
4317
4318
.historyDetail {
4319
  display: grid;
4320
  gap: 4px;
4321
  padding: 0 0 14px 37px;
4322
}
4323
4324
.historyDetail p {
4325
  margin: 0;
4326
  font-size: 13px;
4327
}
4328
4329
.historyDetail small {
4330
  font: 400 11px/1.4 var(--mono);
4331
}
4332
4333
.outcomeSymbol {
4334
  display: grid;
4335
  width: 24px;
4336
  height: 24px;
4337
  place-items: center;
4338
  border: 1px solid var(--border);
4339
  font: 600 10px/1 var(--mono);
4340
}
4341
4342
.outcomeSymbol svg {
4343
  width: 11px;
4344
}
4345
4346
.outcomeSymbol.success,
4347
.outcomeText.success {
4348
  color: var(--live);
4349
}
4350
4351
.outcomeSymbol.failure,
4352
.outcomeText.failure,
4353
.outcomeText.cancelled {
4354
  color: var(--danger);
4355
}
4356
4357
.outcomeSymbol.partial,
4358
.outcomeText.partial,
4359
.outcomeText.provisional {
4360
  color: var(--warn);
4361
}
4362
4363
.outcomeSymbol.pending,
4364
.outcomeText.pending,
4365
.outcomeText.active {
4366
  color: var(--text-faint);
4367
}
4368
4369
.outcomeText {
4370
  font: 600 9px/1 var(--mono);
4371
  text-transform: uppercase;
4372
}
4373
4374
.quietEmpty {
4375
  padding: 28px;
4376
  border: 0;
4377
  border-top: 1px dashed var(--border);
4378
  color: var(--text-muted);
4379
  font: 400 12px/1.5 var(--mono);
4380
  letter-spacing: 0.04em;
4381
  text-transform: lowercase;
4382
  text-align: left;
4383
}
4384
4385
.agentHistory .quietEmpty {
4386
  padding: 16px 0;
4387
  border-top: 0;
4388
}
4389
4390
.emptyAgentState {
4391
  position: relative;
4392
  display: grid;
4393
  min-height: 220px;
4394
  place-items: center;
4395
  align-content: center;
4396
  gap: 10px;
4397
  border: 1px solid var(--border-strong);
4398
  border-right-style: dashed;
4399
  color: var(--text);
4400
  background: color-mix(in srgb, var(--bg) 70%, transparent);
4401
  cursor: pointer;
4402
}
4403
4404
.emptyAgentState > span:not(.sceneCorner) {
4405
  color: var(--accent);
4406
  font: 500 18px/1 var(--mono);
4407
}
4408
4409
.emptyAgentState strong {
4410
  font-size: 15px;
4411
  font-weight: 500;
4412
}
4413
4414
.emptyAgentState span:last-child {
4415
  color: var(--text-muted);
4416
  font-family: var(--font);
4417
  font-size: 13px;
4418
}
4419
4420
.marketplaceHead {
4421
  align-items: center;
4422
}
4423
4424
.marketSearch {
4425
  display: flex;
4426
  align-items: center;
4427
  gap: 9px;
4428
  width: min(360px, 100%);
4429
  min-height: 42px;
4430
  padding: 0 13px;
4431
  border: 1px solid var(--border-strong);
4432
  background: var(--bg-input);
4433
}
4434
4435
.marketFilters {
4436
  display: flex;
4437
  align-items: end;
4438
  gap: 7px;
4439
}
4440
4441
.marketFilters > label:not(.marketSearch) {
4442
  display: grid;
4443
  gap: 5px;
4444
}
4445
4446
.marketFilters > label > span {
4447
  color: var(--text-faint);
4448
  font: 400 11px/1 var(--mono);
4449
  letter-spacing: 0.08em;
4450
  text-transform: lowercase;
4451
}
4452
4453
.marketFilters select,
4454
.marketFilters > label:not(.marketSearch) input {
4455
  min-width: 130px;
4456
  height: 42px;
4457
  padding: 0 10px;
4458
  border: 1px solid var(--border-strong);
4459
  color: var(--text);
4460
  background: var(--bg-input);
4461
  font-size: 11px;
4462
}
4463
4464
.marketContext {
4465
  margin-top: -8px;
4466
  padding: 0 0 4px;
4467
  border: 0;
4468
  color: var(--text-muted);
4469
  background: transparent;
4470
  font: 400 13px/1.55 var(--font);
4471
}
4472
4473
.marketSearch svg {
4474
  width: 16px;
4475
  color: var(--text-faint);
4476
}
4477
4478
.marketSearch input {
4479
  width: 100%;
4480
  border: 0;
4481
  color: var(--text);
4482
  background: transparent;
4483
  font-size: 12px;
4484
}
4485
4486
.marketGrid {
4487
  display: grid;
4488
  grid-template-columns: repeat(3, minmax(0, 1fr));
4489
  gap: 10px;
4490
}
4491
4492
.marketCard {
4493
  position: relative;
4494
  display: grid;
4495
  min-height: 285px;
4496
  padding: 22px 22px 18px;
4497
  border-top: 1px solid var(--border-strong);
4498
  border-right: 1px dashed var(--border);
4499
  border-bottom: 0;
4500
  border-left: 1px solid var(--border-strong);
4501
  background: color-mix(in srgb, var(--bg) 70%, transparent);
4502
}
4503
4504
.marketCard:hover {
4505
  border-color: var(--border-strong);
4506
  border-right-color: var(--accent-line);
4507
}
4508
4509
.marketCardTop {
4510
  display: flex;
4511
  align-items: start;
4512
  justify-content: space-between;
4513
}
4514
4515
.marketPresence {
4516
  padding: 0;
4517
  color: var(--text-faint);
4518
  background: transparent;
4519
  font: 400 11px/1 var(--mono);
4520
  letter-spacing: 0.06em;
4521
  text-transform: lowercase;
4522
}
4523
4524
.marketPresence.online {
4525
  color: var(--live);
4526
  background: transparent;
4527
}
4528
4529
.marketCard h2 {
4530
  margin: 17px 0 5px;
4531
  font-size: 18px;
4532
  font-weight: 500;
4533
  letter-spacing: -0.03em;
4534
}
4535
4536
.matchBadge {
4537
  display: flex;
4538
  align-items: baseline;
4539
  gap: 7px;
4540
  margin-top: 14px;
4541
  color: var(--text-muted);
4542
}
4543
4544
.matchBadge strong {
4545
  color: var(--text);
4546
  font: 500 18px/1 var(--mono);
4547
}
4548
4549
.matchBadge span {
4550
  font: 400 11px/1.3 var(--mono);
4551
  letter-spacing: 0.04em;
4552
  text-transform: lowercase;
4553
}
4554
4555
.matchBadge.strong strong,
4556
.matchBadge.strong span {
4557
  color: var(--live);
4558
}
4559
4560
.matchBadge.unproven strong {
4561
  color: var(--text-faint);
4562
}
4563
4564
.marketCard > p {
4565
  display: -webkit-box;
4566
  overflow: hidden;
4567
  min-height: 36px;
4568
  margin: 0 0 14px;
4569
  color: var(--text-muted);
4570
  font-size: 11px;
4571
  -webkit-box-orient: vertical;
4572
  -webkit-line-clamp: 2;
4573
}
4574
4575
.marketTags {
4576
  display: flex;
4577
  align-content: start;
4578
  flex-wrap: wrap;
4579
  gap: 5px;
4580
}
4581
4582
.marketTags span {
4583
  padding: 5px 7px;
4584
  border: 1px solid var(--border);
4585
  color: var(--text-muted);
4586
  font: 500 9px/1 var(--mono);
4587
}
4588
4589
.marketMeta {
4590
  display: flex;
4591
  align-items: center;
4592
  gap: 12px;
4593
  margin-top: auto;
4594
  padding-top: 14px;
4595
  border-top: 1px solid var(--border);
4596
}
4597
4598
.marketIntelligence {
4599
  display: flex;
4600
  align-items: center;
4601
  gap: 8px;
4602
  min-height: 34px;
4603
  margin-top: 10px;
4604
  padding: 8px 0 0;
4605
  border-top: 1px dashed var(--border);
4606
  color: var(--text-muted);
4607
  background: transparent;
4608
}
4609
4610
.marketIntelligence strong {
4611
  color: var(--accent);
4612
  font: 500 15px/1 var(--mono);
4613
}
4614
4615
.marketIntelligence span {
4616
  font: 400 11px/1.3 var(--mono);
4617
  letter-spacing: 0.04em;
4618
  text-transform: lowercase;
4619
}
4620
4621
.marketMeta span {
4622
  display: inline-flex;
4623
  align-items: center;
4624
  gap: 5px;
4625
  color: var(--text-muted);
4626
  font: 400 11px/1 var(--mono);
4627
  letter-spacing: 0.04em;
4628
  text-transform: lowercase;
4629
}
4630
4631
.marketMeta svg {
4632
  width: 11px;
4633
}
4634
4635
.marketProfileLink {
4636
  display: flex;
4637
  align-items: center;
4638
  justify-content: space-between;
4639
  margin-top: 14px;
4640
  color: var(--accent);
4641
  font: 500 12px/1 var(--mono);
4642
  letter-spacing: 0.04em;
4643
  text-decoration: none;
4644
  text-transform: lowercase;
4645
}
4646
4647
.marketProfileLink svg {
4648
  width: 14px;
4649
}
4650
4651
.marketSkeleton {
4652
  position: relative;
4653
  min-height: 285px;
4654
  border-top: 1px solid var(--border);
4655
  border-right: 1px dashed var(--border);
4656
  border-bottom: 0;
4657
  border-left: 1px solid var(--border);
4658
  background: color-mix(in srgb, var(--bg-well) 70%, transparent);
4659
}
4660
4661
.marketEmpty {
4662
  grid-column: 1 / -1;
4663
}
4664
4665
@media (max-width: 900px) {
4666
  .dashHeader {
4667
    grid-template-columns: auto 1fr auto;
4668
  }
4669
4670
  .dashHeader nav,
4671
  .dashHeader .dashNav {
4672
    display: flex;
4673
    justify-content: center;
4674
    gap: 16px;
4675
  }
4676
}
4677
4678
@media (max-width: 880px) {
4679
  .dashHeader .landingBrand strong {
4680
    display: none;
4681
  }
4682
4683
  .agentRowSummary {
4684
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px) auto auto;
4685
  }
4686
4687
  .agentRowCore {
4688
    grid-template-columns: auto minmax(120px, 1fr);
4689
  }
4690
4691
  .agentSignals {
4692
    display: none;
4693
  }
4694
4695
  .marketGrid {
4696
    grid-template-columns: repeat(2, minmax(0, 1fr));
4697
  }
4698
4699
  .marketFilters {
4700
    flex-wrap: wrap;
4701
    justify-content: flex-end;
4702
  }
4703
4704
  .agentIntelligence {
4705
    grid-template-columns: 1fr auto;
4706
  }
4707
4708
  .intelligenceSignals {
4709
    grid-column: 1 / -1;
4710
    justify-content: flex-start;
4711
  }
4712
}
4713
4714
@media (max-width: 720px) {
4715
  .dashHeader {
4716
    grid-template-columns: 1fr auto;
4717
  }
4718
4719
  .dashHeader .dashNav,
4720
  .dashHeader .dashCta {
4721
    display: none;
4722
  }
4723
}
4724
4725
@media (max-width: 620px) {
4726
  .simpleMain {
4727
    width: min(100% - 24px, 1120px);
4728
    padding: 34px 0 70px;
4729
  }
4730
4731
  .workspaceHead,
4732
  .marketplaceHead {
4733
    display: grid;
4734
    align-items: stretch;
4735
  }
4736
4737
  .workspaceHead .landingPrimary,
4738
  .marketSearch {
4739
    width: 100%;
4740
    justify-content: center;
4741
  }
4742
4743
  .marketFilters {
4744
    display: grid;
4745
    grid-template-columns: 1fr 1fr;
4746
    width: 100%;
4747
  }
4748
4749
  .marketFilters .marketSearch {
4750
    grid-column: 1 / -1;
4751
  }
4752
4753
  .marketFilters select,
4754
  .marketFilters > label:not(.marketSearch) input {
4755
    width: 100%;
4756
    min-width: 0;
4757
  }
4758
4759
  .agentIntelligence {
4760
    grid-template-columns: 1fr;
4761
  }
4762
4763
  .intelligenceTrend {
4764
    text-align: left;
4765
  }
4766
4767
  .intelligenceSignals {
4768
    grid-column: auto;
4769
  }
4770
4771
  .agentRowSummary {
4772
    grid-template-columns: minmax(0, 1fr) auto auto;
4773
    gap: 11px;
4774
    min-height: 74px;
4775
    padding: 12px 0;
4776
  }
4777
4778
  .agentRowCore {
4779
    grid-template-columns: auto minmax(0, 1fr);
4780
    gap: 11px;
4781
  }
4782
4783
  .scorecardTeaser {
4784
    grid-template-columns: auto;
4785
    width: auto;
4786
    padding: 0 0 0 12px;
4787
  }
4788
4789
  .scorecardTeaser > span:last-child {
4790
    display: none;
4791
  }
4792
4793
  .scorecardIdentity {
4794
    display: grid;
4795
    align-items: start;
4796
  }
4797
4798
  .scorecardContext {
4799
    justify-content: flex-start;
4800
  }
4801
4802
  .scorecardMetrics {
4803
    grid-template-columns: 1fr;
4804
  }
4805
4806
  .scorecardMetrics > div:nth-child(odd) {
4807
    border-right: 0;
4808
  }
4809
4810
  .scorecardMetrics > div {
4811
    grid-template-columns: minmax(120px, 1fr) minmax(70px, 0.8fr) 30px;
4812
    padding: 10px 14px;
4813
  }
4814
4815
  .scorecardFoot {
4816
    grid-template-columns: 1fr 1fr;
4817
  }
4818
4819
  .scorecardFoot small {
4820
    display: none;
4821
  }
4822
4823
  .scorecardActions {
4824
    display: grid;
4825
    grid-template-columns: repeat(3, 1fr);
4826
  }
4827
4828
  .scorecardActions > span {
4829
    grid-column: 1 / -1;
4830
  }
4831
4832
  .scorecardActions button {
4833
    justify-content: center;
4834
    padding: 0 8px;
4835
    font-size: 8px;
4836
  }
4837
4838
  .agentExpanded {
4839
    padding: 8px 12px 18px;
4840
  }
4841
4842
  .agentDetailStrip {
4843
    display: grid;
4844
    grid-template-columns: repeat(3, 1fr);
4845
  }
4846
4847
  .agentDetailStrip > span {
4848
    min-width: 0;
4849
    padding: 10px;
4850
  }
4851
4852
  .agentDetailStrip a {
4853
    grid-column: 1 / -1;
4854
    min-height: 38px;
4855
    margin-left: 0;
4856
    border-top: 1px solid var(--border);
4857
  }
4858
4859
  .historyItem {
4860
    grid-template-columns: auto minmax(0, 1fr) auto;
4861
  }
4862
4863
  .historyPurpose {
4864
    display: none;
4865
  }
4866
4867
  .marketGrid {
4868
    grid-template-columns: 1fr;
4869
  }
4870
}
4871
4872
/* Authenticated product — same protocol chrome as the landing */
4873
html:has(.appInset) {
4874
  scrollbar-gutter: stable;
4875
  scrollbar-width: thin;
4876
  scrollbar-color: color-mix(in srgb, var(--accent) 70%, #8a6a62)
4877
    color-mix(in srgb, var(--bg) 92%, var(--border));
4878
}
4879
4880
html:has(.appInset)::-webkit-scrollbar,
4881
html:has(.appInset) body::-webkit-scrollbar {
4882
  width: 10px;
4883
}
4884
4885
html:has(.appInset)::-webkit-scrollbar-track,
4886
html:has(.appInset) body::-webkit-scrollbar-track {
4887
  background: var(--bg);
4888
  box-shadow: inset 1px 0 0 var(--border);
4889
}
4890
4891
html:has(.appInset)::-webkit-scrollbar-thumb,
4892
html:has(.appInset) body::-webkit-scrollbar-thumb {
4893
  background: color-mix(in srgb, var(--accent) 58%, #6e534c);
4894
  border: 3px solid var(--bg);
4895
  background-clip: padding-box;
4896
}
4897
4898
[data-slot='sidebar-wrapper'] {
4899
  background: var(--bg);
4900
}
4901
4902
[data-slot='sidebar'] {
4903
  border-right: 1px solid var(--border);
4904
  background: var(--bg) !important;
4905
}
4906
4907
[data-slot='sidebar-inner'] {
4908
  border: 0 !important;
4909
  border-radius: 0 !important;
4910
  background: var(--bg) !important;
4911
  box-shadow: none !important;
4912
}
4913
4914
[data-slot='sidebar-header'] {
4915
  padding: 16px 12px 14px;
4916
  border-bottom: 1px solid var(--border);
4917
}
4918
4919
[data-slot='sidebar-content'] {
4920
  padding: 10px 8px;
4921
}
4922
4923
[data-slot='sidebar-footer'] {
4924
  padding: 8px;
4925
  border-top: 1px solid var(--border);
4926
}
4927
4928
.sidebarBrandMark {
4929
  display: block;
4930
  width: 18px;
4931
  height: 18px;
4932
  flex: none;
4933
  color: var(--accent);
4934
}
4935
4936
.sidebarBrandText {
4937
  min-width: 0;
4938
  font-family: var(--mono);
4939
  font-size: 13px;
4940
  font-weight: 500;
4941
  letter-spacing: 0.04em;
4942
  text-transform: lowercase;
4943
}
4944
4945
.sidebarBrandText strong {
4946
  font-weight: 500;
4947
}
4948
4949
[data-sidebar='menu-button'] {
4950
  min-height: 34px;
4951
  border: 0 !important;
4952
  border-radius: 0 !important;
4953
  color: var(--text-muted);
4954
  font-family: var(--mono);
4955
  font-size: 12px;
4956
  letter-spacing: 0.04em;
4957
  text-transform: lowercase;
4958
  background: transparent !important;
4959
  box-shadow: none !important;
4960
}
4961
4962
[data-sidebar='menu-button']:hover {
4963
  color: var(--text);
4964
  background: transparent !important;
4965
}
4966
4967
[data-sidebar='menu-button'][data-active='true'] {
4968
  color: var(--text) !important;
4969
  background: transparent !important;
4970
  box-shadow: inset 2px 0 0 var(--accent);
4971
}
4972
4973
[data-sidebar='menu-button'][data-active='true'] svg {
4974
  color: var(--accent);
4975
}
4976
4977
[data-sidebar='menu-badge'] {
4978
  min-width: 16px;
4979
  height: 16px;
4980
  border: 0;
4981
  border-radius: 0;
4982
  color: var(--accent) !important;
4983
  background: transparent !important;
4984
  font: 500 10px/1 var(--mono);
4985
}
4986
4987
.appInset {
4988
  min-width: 0;
4989
  background: var(--bg) !important;
4990
}
4991
4992
.appTopbar {
4993
  position: sticky;
4994
  top: 0;
4995
  z-index: 8;
4996
  min-height: 52px;
4997
  padding: 0 28px;
4998
  border-bottom: 1px solid var(--border);
4999
  background: color-mix(in srgb, var(--bg) 88%, transparent);
5000
  backdrop-filter: blur(12px);
5001
  -webkit-backdrop-filter: blur(12px);
5002
}
5003
5004
.appTopbar [data-sidebar='trigger'] {
5005
  border: 1px solid var(--border);
5006
  border-radius: 0;
5007
  background: transparent;
5008
}
5009
5010
.commandTrigger {
5011
  height: 34px !important;
5012
  border-color: var(--border) !important;
5013
  border-radius: 0 !important;
5014
  background: transparent !important;
5015
  box-shadow: none !important;
5016
}
5017
5018
.appMain {
5019
  width: min(100%, 1120px);
5020
  max-width: none;
5021
  margin: 0 auto;
5022
  padding: 32px 32px 80px;
5023
}
5024
5025
.previewBanner {
5026
  width: fit-content;
5027
  margin-bottom: 18px;
5028
  padding: 0;
5029
  border: 0;
5030
  border-radius: 0;
5031
  color: var(--text-faint);
5032
  background: transparent;
5033
  font: 400 11px/1.4 var(--mono);
5034
  letter-spacing: 0.06em;
5035
  text-transform: lowercase;
5036
}
5037
5038
.previewBanner::before {
5039
  content: none;
5040
}
5041
5042
.pageKicker {
5043
  display: flex;
5044
  align-items: center;
5045
  gap: 10px;
5046
  margin: 0 0 10px;
5047
  color: var(--text-faint);
5048
  font-family: var(--mono);
5049
  font-size: 11px;
5050
  letter-spacing: 0.08em;
5051
  text-transform: lowercase;
5052
}
5053
5054
.pageKicker > span {
5055
  color: var(--accent);
5056
}
5057
5058
.pageHead {
5059
  display: flex;
5060
  align-items: center;
5061
  justify-content: space-between;
5062
  gap: 16px;
5063
  min-height: 42px;
5064
  padding: 0 0 16px;
5065
  border-bottom: 1px solid var(--border);
5066
}
5067
5068
.pageHead h1 {
5069
  margin: 0;
5070
  font-size: 16px;
5071
  font-weight: 500;
5072
  letter-spacing: 0;
5073
  line-height: 1.2;
5074
}
5075
5076
.primary,
5077
.secondary,
5078
.dangerButton {
5079
  min-height: 34px;
5080
  border-radius: 0;
5081
  font-weight: 500;
5082
  letter-spacing: 0.04em;
5083
  text-transform: lowercase;
5084
  box-shadow: none;
5085
}
5086
5087
.primary {
5088
  box-shadow: none;
5089
}
5090
5091
.primary:hover {
5092
  transform: none;
5093
  box-shadow: none;
5094
}
5095
5096
.primary:active,
5097
.secondary:active,
5098
.dangerButton:active {
5099
  transform: translateY(1px);
5100
}
5101
5102
.secondary {
5103
  background: transparent;
5104
}
5105
5106
.attentionBanner,
5107
.readiness {
5108
  min-height: 0;
5109
  margin-top: 16px;
5110
  padding: 14px 0;
5111
  border: 0;
5112
  border-bottom: 1px solid var(--border);
5113
  border-radius: 0;
5114
  background: transparent;
5115
  box-shadow: none;
5116
}
5117
5118
.attentionBanner {
5119
  border-color: transparent;
5120
  border-bottom-color: var(--accent-line);
5121
  background: transparent;
5122
}
5123
5124
.attentionBanner:hover {
5125
  border-color: transparent;
5126
  border-bottom-color: var(--accent);
5127
  transform: none;
5128
}
5129
5130
.statusIndex {
5131
  min-width: 1.6em;
5132
}
5133
5134
.metrics {
5135
  gap: 24px;
5136
  margin: 22px 0 8px;
5137
}
5138
5139
.metric {
5140
  min-height: 0;
5141
  padding: 4px 0;
5142
  border: 0;
5143
  border-radius: 0;
5144
  background: transparent;
5145
  box-shadow: none;
5146
}
5147
5148
.metric:hover {
5149
  border-color: transparent;
5150
  transform: none;
5151
}
5152
5153
.metric::before {
5154
  position: static;
5155
  width: 16px;
5156
  height: 1px;
5157
  margin: 0 0 10px;
5158
  border-radius: 0;
5159
  box-shadow: none;
5160
  background: var(--accent);
5161
}
5162
5163
.metric.warn::before {
5164
  background: var(--warn);
5165
  box-shadow: none;
5166
}
5167
5168
.metric > strong {
5169
  margin: 0 0 6px;
5170
  font-size: 28px;
5171
}
5172
5173
.panel,
5174
.setupRequests,
5175
.agentCard,
5176
.settingsCard,
5177
.insightPrinciple,
5178
.journeyDetail {
5179
  border: 0;
5180
  border-radius: 0;
5181
  background: transparent;
5182
  box-shadow: none;
5183
}
5184
5185
.panel {
5186
  padding: 8px 0 0;
5187
}
5188
5189
.panelHead {
5190
  padding-bottom: 12px;
5191
}
5192
5193
.panelHead h2,
5194
.panelKicker {
5195
  display: flex;
5196
  align-items: center;
5197
  gap: 8px;
5198
  margin: 0;
5199
  color: var(--text);
5200
  font: 500 12px/1.4 var(--mono);
5201
  letter-spacing: 0.06em;
5202
  text-transform: lowercase;
5203
}
5204
5205
.panelKicker > span,
5206
.panelHead h2 > span {
5207
  color: var(--accent);
5208
}
5209
5210
.panelHead p {
5211
  margin: 6px 0 0;
5212
}
5213
5214
.setupRequests > div:first-child h2 {
5215
  margin: 8px 0 4px;
5216
  font-size: 16px;
5217
  font-weight: 500;
5218
  letter-spacing: 0;
5219
}
5220
5221
.setupRequests {
5222
  margin: 18px 0;
5223
  padding: 8px 0;
5224
}
5225
5226
.setupRequest {
5227
  padding: 14px 0;
5228
  border-bottom: 1px solid var(--border);
5229
}
5230
5231
.historyRow {
5232
  margin: 0;
5233
  padding: 12px 0;
5234
  border-radius: 0;
5235
}
5236
5237
.historyRow:hover {
5238
  background: transparent;
5239
  transform: none;
5240
}
5241
5242
.agentGrid,
5243
.insightGrid {
5244
  gap: 16px;
5245
}
5246
5247
.agentCard {
5248
  min-height: 0;
5249
  padding: 18px 0;
5250
  border-top: 1px solid var(--border);
5251
}
5252
5253
.agentCard:hover {
5254
  border-color: var(--border);
5255
  box-shadow: none;
5256
  transform: none;
5257
}
5258
5259
.runtimeBox,
5260
.accessTokenBox,
5261
.notice,
5262
.successBanner,
5263
.conversationInsights,
5264
.outcomeCard,
5265
.insightStats span {
5266
  border-radius: 0;
5267
}
5268
5269
.runtimeBox input,
5270
.automationForm input,
5271
.automationForm select,
5272
.setting input,
5273
.setting select,
5274
.searchField,
5275
.providerForm input,
5276
.providerForm select,
5277
.providerForm textarea,
5278
.replyBox textarea {
5279
  border-radius: 0;
5280
}
5281
5282
.settingsCard {
5283
  padding: 0;
5284
}
5285
5286
.connectionTypePicker button {
5287
  border-radius: 0;
5288
  background: transparent;
5289
}
5290
5291
.threadList,
5292
.conversationDetail,
5293
.journeyDetail {
5294
  padding: 0;
5295
  border: 0;
5296
  border-radius: 0;
5297
  background: transparent;
5298
  box-shadow: none;
5299
}
5300
5301
.threadList > button,
5302
.journeyList > button {
5303
  border-radius: 0;
5304
}
5305
5306
[data-slot='dialog-content'],
5307
[data-slot='dropdown-menu-content'],
5308
[data-slot='command-dialog-content'] {
5309
  border-color: var(--border-strong) !important;
5310
  border-radius: 0 !important;
5311
  background: var(--popover) !important;
5312
  box-shadow: none !important;
5313
}
5314
5315
[data-slot='sidebar-footer'] [data-sidebar='menu-button'] {
5316
  text-transform: lowercase;
5317
}
5318
5319
[data-slot='sidebar-footer'] [data-sidebar='menu-button'] span {
5320
  font-family: var(--mono);
5321
  font-size: 11px;
5322
  letter-spacing: 0.03em;
5323
}
5324
5325
.appInset [data-slot='tabs-list'],
5326
.appInset [data-slot='tabs-trigger'] {
5327
  border-radius: 0 !important;
5328
}
5329
5330
.appInset [data-slot='tabs-trigger'] {
5331
  font-family: var(--mono);
5332
  font-size: 11px;
5333
  letter-spacing: 0.06em;
5334
  text-transform: lowercase;
5335
  background: transparent !important;
5336
  box-shadow: none !important;
5337
}
5338
5339
.appInset
5340
  [data-slot='tabs-list'][data-variant='line']
5341
  [data-slot='tabs-trigger'][data-state='active']::after {
5342
  height: 1px;
5343
  background: var(--accent);
5344
}
5345
5346
.textButton {
5347
  font-weight: 500;
5348
  letter-spacing: 0.04em;
5349
  text-transform: lowercase;
5350
}
5351
5352
.insightPrinciple .pageKicker {
5353
  margin-bottom: 8px;
5354
}
5355
5356
.setupRequests > div:first-child .pageKicker {
5357
  margin-bottom: 8px;
5358
}
5359
5360
.connectionTypePicker button {
5361
  font-weight: 500;
5362
  letter-spacing: 0.02em;
5363
}
5364
5365
@media (max-width: 840px) {
5366
  .appTopbar {
5367
    min-height: 48px;
5368
    padding: 0 16px;
5369
  }
5370
5371
  .appMain {
5372
    padding: 20px 16px 64px;
5373
  }
5374
5375
  .pageHead {
5376
    min-height: 0;
5377
  }
5378
}
5379
5380
@media (max-width: 980px) {
5381
  .contentGrid,
5382
  .connectLayout,
5383
  .conversationLayout,
5384
  .journeyLayout,
5385
  .insightPrinciple {
5386
    grid-template-columns: 1fr;
5387
  }
5388
5389
  .journeyList {
5390
    grid-template-columns: repeat(2, minmax(0, 1fr));
5391
  }
5392
5393
  .loginPage {
5394
    grid-template-columns: 1fr;
5395
  }
5396
5397
  .loginPitch {
5398
    display: none;
5399
  }
5400
5401
  .loginCard {
5402
    min-height: 100vh;
5403
    border: 0;
5404
  }
5405
5406
  .metrics {
5407
    grid-template-columns: 1fr 1fr;
5408
  }
5409
5410
  .agentGrid {
5411
    grid-template-columns: 1fr;
5412
  }
5413
5414
  .insightGrid {
5415
    grid-template-columns: 1fr;
5416
  }
5417
}
5418
5419
@media (max-width: 840px) {
5420
  .appTopbar {
5421
    min-height: 48px;
5422
    padding: 0 16px;
5423
  }
5424
5425
  .appMain {
5426
    padding: 16px 16px 64px;
5427
  }
5428
5429
  .pageHead {
5430
    align-items: flex-start;
5431
    flex-direction: column;
5432
  }
5433
5434
  .providerIntro {
5435
    align-items: flex-start;
5436
    flex-direction: column;
5437
  }
5438
5439
  .providerGrid {
5440
    grid-template-columns: repeat(2, minmax(0, 1fr));
5441
  }
5442
5443
  .providerCard {
5444
    min-height: 126px;
5445
    border-bottom: 1px solid var(--border);
5446
  }
5447
5448
  .pairingSetup,
5449
  .providerNameStep {
5450
    grid-template-columns: 1fr;
5451
  }
5452
5453
  .providerNameStep > p {
5454
    grid-column: auto;
5455
  }
5456
5457
  .providerConnected {
5458
    align-items: flex-start;
5459
    flex-wrap: wrap;
5460
  }
5461
5462
  .setting {
5463
    grid-template-columns: 1fr;
5464
    gap: 12px;
5465
  }
5466
5467
  .mcpClientSection > summary {
5468
    align-items: flex-start;
5469
    flex-direction: column;
5470
    gap: 6px;
5471
  }
5472
5473
  .connectionTypePicker,
5474
  .providerForm,
5475
  .firstRunForm,
5476
  .firstRunSteps {
5477
    grid-template-columns: 1fr;
5478
  }
5479
5480
  .firstRunSteps.twoSteps,
5481
  .agentCardPreview dl,
5482
  .firstRunComplete {
5483
    grid-template-columns: 1fr;
5484
  }
5485
5486
  .firstRunGuide {
5487
    padding: 18px;
5488
  }
5489
5490
  .firstRunHeader,
5491
  .firstRunStage,
5492
  .firstRunWaiting,
5493
  .firstRunComplete,
5494
  .firstRunBlocked {
5495
    align-items: flex-start;
5496
    flex-direction: column;
5497
  }
5498
5499
  .firstRunActions {
5500
    flex-wrap: wrap;
5501
  }
5502
5503
  .providerSubmit {
5504
    align-items: flex-start;
5505
    flex-direction: column;
5506
  }
5507
5508
  .tokenList > div {
5509
    align-items: flex-start;
5510
    flex-direction: column;
5511
  }
5512
5513
  .toggle {
5514
    margin-left: 0;
5515
  }
5516
5517
  .endpoint {
5518
    flex-direction: column;
5519
  }
5520
5521
  .readiness,
5522
  .attentionBanner,
5523
  .setupRequest {
5524
    align-items: flex-start;
5525
    flex-direction: column;
5526
  }
5527
5528
  .readiness > button,
5529
  .attentionBanner,
5530
  .decisionButtons {
5531
    width: 100%;
5532
  }
5533
5534
  .decisionButtons button {
5535
    flex: 1;
5536
  }
5537
5538
  .loginCard {
5539
    padding: 28px 20px;
5540
  }
5541
5542
  .historyRow > b {
5543
    display: none;
5544
  }
5545
5546
  .journeyList {
5547
    grid-template-columns: 1fr;
5548
  }
5549
5550
  .journeySummaryGrid,
5551
  .ratingGrid,
5552
  .insightStats {
5553
    grid-template-columns: 1fr;
5554
  }
5555
5556
  .journeySummaryGrid section {
5557
    border-right: 0;
5558
    border-bottom: 1px solid var(--border);
5559
  }
5560
5561
  .journeySummaryGrid section:last-child {
5562
    border-bottom: 0;
5563
  }
5564
5565
  .journeyTimeline li {
5566
    grid-template-columns: 8px minmax(0, 1fr);
5567
  }
5568
5569
  .journeyTimeline li > .statusPill {
5570
    grid-column: 2;
5571
    margin-top: -12px;
5572
    margin-bottom: 16px;
5573
  }
5574
}