@maildeno/editor 0.4.3 → 0.4.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/editor.css CHANGED
@@ -1,2810 +1,2 @@
1
-
2
- .md-input[data-v-94ca4419] {
3
- width: 100%;
4
- padding: 0.325rem 0.625rem;
5
- font-size: 13px;
6
- line-height: 1.25rem;
7
- color: var(--md-text);
8
- background: var(--md-surface);
9
- border: 1px solid var(--md-border);
10
- border-radius: 0.375rem;
11
- outline: none;
12
- transition:
13
- border-color 0.15s,
14
- box-shadow 0.15s;
15
- }
16
- .md-input[data-v-94ca4419]::placeholder {
17
- color: var(--md-text-subtle);
18
- }
19
- .md-input[data-v-94ca4419]:focus {
20
- border-color: var(--md-primary);
21
- }
22
- .md-input[data-v-94ca4419]:disabled {
23
- background: var(--md-surface-hover);
24
- color: var(--md-text-subtle);
25
- cursor: not-allowed;
26
- }
27
- .md-input--invalid[data-v-94ca4419] {
28
- border-color: var(--md-danger);
29
- }
30
- .md-input--invalid[data-v-94ca4419]:focus {
31
- border-color: var(--md-danger);
32
- box-shadow: 0 0 0 1px var(--md-danger);
33
- }
34
-
35
- /* =========================================================
36
- SELECT ROOT
37
- ========================================================= */
38
- .md-sel__anchor {
39
- display: flex;
40
- align-items: center;
41
- gap: 0.25rem;
42
- width: 100%;
43
- min-height: 32px;
44
- box-sizing: border-box;
45
- padding: 0 0.375rem 0 0.5rem;
46
- background: var(--md-surface);
47
- border: 1px solid var(--md-border);
48
- border-radius: 0.375rem;
49
- font-size: 13px;
50
- color: var(--md-text);
51
- }
52
- .md-sel__anchor:focus-within {
53
- border-color: var(--md-primary);
54
- }
55
- .md-sel__anchor--open {
56
- border-color: var(--md-primary);
57
- }
58
- .md-sel__anchor--disabled {
59
- background: var(--md-surface-hover);
60
- color: var(--md-text-subtle);
61
- }
62
-
63
- /* =========================================================
64
- SEARCH INPUT
65
- ========================================================= */
66
- .md-sel__input {
67
- flex: 1;
68
- min-width: 0;
69
- width: 100%;
70
- box-sizing: border-box;
71
- padding: 0.375rem 0;
72
- border: 0;
73
- outline: none;
74
- background: transparent;
75
- font-family: inherit;
76
- font-size: 13px;
77
- line-height: 1.25rem;
78
- color: var(--md-text);
79
- }
80
- .md-sel__input::placeholder {
81
- color: var(--md-text-subtle);
82
- }
83
-
84
- /* =========================================================
85
- NON-FILTERED TRIGGER
86
- ========================================================= */
87
- .md-sel__triggerText {
88
- flex: 1;
89
- min-width: 0;
90
- box-sizing: border-box;
91
- padding: 0.375rem 0;
92
- border: 0;
93
- outline: none;
94
- background: transparent;
95
- cursor: pointer;
96
- font-family: inherit;
97
- font-size: 13px;
98
- color: var(--md-text);
99
- text-align: left;
100
- overflow: hidden;
101
- text-overflow: ellipsis;
102
- white-space: nowrap;
103
- }
104
- .md-sel__ph {
105
- color: var(--md-text-subtle);
106
- }
107
-
108
- /* =========================================================
109
- CHEVRON
110
- ========================================================= */
111
- .md-sel__chev {
112
- display: inline-flex;
113
- align-items: center;
114
- justify-content: center;
115
- flex-shrink: 0;
116
- width: 20px;
117
- height: 20px;
118
- padding: 0;
119
- border: 0;
120
- outline: none;
121
- background: transparent;
122
- cursor: pointer;
123
- color: var(--md-text-muted);
124
- transition:
125
- transform 150ms ease,
126
- color 150ms ease;
127
- }
128
- .md-sel__chev--open {
129
- transform: rotate(180deg);
130
- color: var(--md-text);
131
- }
132
-
133
- /* =========================================================
134
- DROPDOWN
135
- ========================================================= */
136
- .md-sel__content {
137
- position: relative;
138
- z-index: 999999;
139
- width: var(--reka-combobox-trigger-width);
140
- min-width: 180px;
141
- max-width: 320px;
142
- box-sizing: border-box;
143
- background: var(--md-surface);
144
- border: 1px solid var(--md-border);
145
- border-radius: 0.5rem;
146
- box-shadow:
147
- 0 10px 15px -3px rgb(0 0 0 / 0.12),
148
- 0 4px 6px -4px rgb(0 0 0 / 0.12);
149
- overflow: hidden;
150
- }
151
-
152
- /* =========================================================
153
- DROPDOWN VIEWPORT
154
- ========================================================= */
155
- .md-sel__viewport {
156
- width: 100%;
157
- max-height: 240px;
158
- box-sizing: border-box;
159
- overflow-x: hidden;
160
- overflow-y: auto;
161
- padding: 4px;
162
- background: var(--md-surface);
163
- }
164
-
165
- /* =========================================================
166
- EMPTY
167
- ========================================================= */
168
- .md-sel__empty {
169
- display: block;
170
- width: 100%;
171
- box-sizing: border-box;
172
- padding: 8px;
173
- background: var(--md-surface);
174
- font-family: inherit;
175
- font-size: 12px;
176
- color: var(--md-text-subtle);
177
- text-align: center;
178
- }
179
-
180
- /* =========================================================
181
- OPTION
182
- ========================================================= */
183
- .md-sel__item {
184
- display: flex;
185
- align-items: center;
186
- justify-content: space-between;
187
- width: 100%;
188
- min-height: 32px;
189
- box-sizing: border-box;
190
- gap: 8px;
191
- padding: 6px 8px;
192
- background: var(--md-surface);
193
- border: 0;
194
- border-radius: 6px;
195
- font-family: inherit;
196
- font-size: 13px;
197
- line-height: 18px;
198
- color: var(--md-text);
199
- cursor: pointer;
200
- outline: none;
201
- user-select: none;
202
- }
203
- .md-sel__item:hover {
204
- background: var(--md-surface-muted);
205
- }
206
- .md-sel__item[data-highlighted] {
207
- background: var(--md-surface-muted);
208
- }
209
- .md-sel__item[data-state="checked"] {
210
- background: var(--md-success-bg);
211
- color: var(--md-success-fg);
212
- font-weight: 500;
213
- }
214
- .md-sel__item[data-state="checked"][data-highlighted] {
215
- background: color-mix(in srgb, var(--md-success) 20%, var(--md-success-bg));
216
- }
217
-
218
- /* =========================================================
219
- OPTION TEXT
220
- ========================================================= */
221
- .md-sel__itemLabel {
222
- flex: 1;
223
- min-width: 0;
224
- overflow: hidden;
225
- text-overflow: ellipsis;
226
- white-space: nowrap;
227
- }
228
-
229
- /* =========================================================
230
- CHECK
231
- ========================================================= */
232
- .md-sel__check {
233
- display: inline-flex;
234
- align-items: center;
235
- justify-content: center;
236
- flex-shrink: 0;
237
- width: 16px;
238
- height: 16px;
239
- font-size: 12px;
240
- color: currentColor;
241
- }
242
-
243
- .section-fade-enter-active[data-v-bb838abe],
244
- .section-fade-leave-active[data-v-bb838abe] {
245
- transition:
246
- opacity 0.15s ease,
247
- transform 0.15s ease;
248
- }
249
- .section-fade-enter-from[data-v-bb838abe],
250
- .section-fade-leave-to[data-v-bb838abe] {
251
- opacity: 0;
252
- transform: translateY(-3px);
253
- }
254
-
255
- .transparent-swatch[data-v-fad96f2e] {
256
- background-image:
257
- linear-gradient(45deg, #ccc 25%, transparent 25%),
258
- linear-gradient(-45deg, #ccc 25%, transparent 25%),
259
- linear-gradient(45deg, transparent 75%, #ccc 75%),
260
- linear-gradient(-45deg, transparent 75%, #ccc 75%);
261
- background-size: 6px 6px;
262
- background-position:
263
- 0 0,
264
- 0 3px,
265
- 3px -3px,
266
- -3px 0;
267
- background-color: white;
268
- }
269
-
270
- .transparent-swatch[data-v-7373b74d] {
271
- background-image:
272
- linear-gradient(45deg, #ccc 25%, transparent 25%),
273
- linear-gradient(-45deg, #ccc 25%, transparent 25%),
274
- linear-gradient(45deg, transparent 75%, #ccc 75%),
275
- linear-gradient(-45deg, transparent 75%, #ccc 75%);
276
- background-size: 6px 6px;
277
- background-position:
278
- 0 0,
279
- 0 3px,
280
- 3px -3px,
281
- -3px 0;
282
- background-color: white;
283
- }
284
-
285
- /* =========================================================
286
- FIELD
287
- ========================================================= */
288
- .md-dp__field {
289
- display: flex;
290
- align-items: center;
291
- gap: 0.0625rem;
292
- width: 100%;
293
- min-height: 32px;
294
- box-sizing: border-box;
295
- padding: 0.375rem 0.375rem 0.375rem 0.5rem;
296
- background: var(--md-surface);
297
- border: 1px solid var(--md-border);
298
- border-radius: 0.375rem;
299
- font-family: inherit;
300
- font-size: 13px;
301
- color: var(--md-text);
302
- }
303
- .md-dp__field:focus-within {
304
- border-color: var(--md-primary);
305
- box-shadow: 0 0 0 1px var(--md-primary);
306
- }
307
-
308
- /* =========================================================
309
- DATE SEGMENTS
310
- ========================================================= */
311
- .md-dp__seg {
312
- padding: 0 0.0625rem;
313
- border-radius: 0.125rem;
314
- outline: none;
315
- font-family: inherit;
316
- font-size: 13px;
317
- }
318
- .md-dp__seg:focus {
319
- background: var(--md-primary);
320
- color: var(--md-surface);
321
- }
322
- .md-dp__seg[data-placeholder] {
323
- color: var(--md-text-subtle);
324
- }
325
- .md-dp__lit {
326
- color: var(--md-text-subtle);
327
- }
328
-
329
- /* =========================================================
330
- CALENDAR TRIGGER
331
- ========================================================= */
332
- .md-dp__trigger {
333
- display: inline-flex;
334
- align-items: center;
335
- justify-content: center;
336
- flex-shrink: 0;
337
- margin-left: auto;
338
- width: 20px;
339
- height: 20px;
340
- padding: 0.125rem;
341
- border: 0;
342
- background: transparent;
343
- cursor: pointer;
344
- font-size: 11px;
345
- color: var(--md-text-subtle);
346
- }
347
- .md-dp__trigger:hover {
348
- color: var(--md-text-muted);
349
- }
350
-
351
- /* =========================================================
352
- CALENDAR POPOVER
353
- ========================================================= */
354
- .md-dp__content {
355
- z-index: 999999;
356
- padding: 0.625rem;
357
- box-sizing: border-box;
358
- background: var(--md-surface);
359
- border: 1px solid var(--md-border);
360
- border-radius: 0.625rem;
361
- box-shadow:
362
- 0 10px 15px -3px rgb(0 0 0 / 0.12),
363
- 0 4px 6px -4px rgb(0 0 0 / 0.12);
364
- }
365
-
366
- /* =========================================================
367
- CALENDAR
368
- ========================================================= */
369
- .md-dp__cal {
370
- width: max-content;
371
- }
372
-
373
- /* =========================================================
374
- HEADER
375
- ========================================================= */
376
- .md-dp__header {
377
- display: flex;
378
- align-items: center;
379
- justify-content: space-between;
380
- margin-bottom: 0.5rem;
381
- }
382
- .md-dp__heading {
383
- font-family: inherit;
384
- font-size: 13px;
385
- font-weight: 600;
386
- color: var(--md-text);
387
- }
388
-
389
- /* =========================================================
390
- PREVIOUS / NEXT
391
- ========================================================= */
392
- .md-dp__nav {
393
- display: inline-flex;
394
- align-items: center;
395
- justify-content: center;
396
- width: 24px;
397
- height: 24px;
398
- padding: 0.25rem;
399
- border: 0;
400
- background: transparent;
401
- border-radius: 0.25rem;
402
- cursor: pointer;
403
- font-size: 12px;
404
- color: var(--md-text-muted);
405
- }
406
- .md-dp__nav:hover {
407
- background: var(--md-surface-muted);
408
- color: var(--md-text);
409
- }
410
- .md-dp__nav:disabled {
411
- opacity: 0.4;
412
- cursor: default;
413
- }
414
-
415
- /* =========================================================
416
- GRID
417
- ========================================================= */
418
- .md-dp__grid {
419
- width: 100%;
420
- border-collapse: collapse;
421
- }
422
- .md-dp__row {
423
- display: flex;
424
- }
425
-
426
- /* =========================================================
427
- WEEKDAY HEADER
428
- ========================================================= */
429
- .md-dp__headCell {
430
- display: inline-flex;
431
- align-items: center;
432
- justify-content: center;
433
- width: 32px;
434
- height: 28px;
435
- font-family: inherit;
436
- font-size: 11px;
437
- font-weight: 500;
438
- color: var(--md-text-subtle);
439
- }
440
-
441
- /* =========================================================
442
- DAY BUTTON
443
- ========================================================= */
444
- .md-dp__day {
445
- display: inline-flex;
446
- align-items: center;
447
- justify-content: center;
448
- width: 32px;
449
- height: 30px;
450
- padding: 0;
451
- border: 0;
452
- background: transparent;
453
- font-family: inherit;
454
- font-size: 12px;
455
- color: var(--md-text);
456
- border-radius: 0.3125rem;
457
- cursor: pointer;
458
- outline: none;
459
- transition:
460
- background 100ms ease,
461
- color 100ms ease;
462
- }
463
- .md-dp__day:hover {
464
- background: var(--md-surface-muted);
465
- }
466
- .md-dp__day:focus-visible {
467
- outline: 2px solid var(--md-primary);
468
- outline-offset: -2px;
469
- }
470
-
471
- /* =========================================================
472
- SELECTED DAY
473
- ========================================================= */
474
- .md-dp__day[data-selected] {
475
- background: var(--md-primary);
476
- color: var(--md-surface);
477
- font-weight: 600;
478
- }
479
- .md-dp__day[data-selected]:hover {
480
- background: var(--md-primary);
481
- }
482
-
483
- /* =========================================================
484
- TODAY
485
- ========================================================= */
486
- .md-dp__day[data-today]:not([data-selected]) {
487
- font-weight: 700;
488
- color: var(--md-primary);
489
- }
490
-
491
- /* =========================================================
492
- OUTSIDE / DISABLED
493
- ========================================================= */
494
- .md-dp__day[data-outside-view] {
495
- color: var(--md-border-strong);
496
- }
497
- .md-dp__day[data-disabled] {
498
- color: var(--md-border-strong);
499
-
500
- cursor: default;
501
- }
502
- .md-dp__day[data-disabled]:hover {
503
- background: transparent;
504
- }
505
-
506
- .rules-scroll[data-v-3e175668] {
507
- overflow-x: auto;
508
- max-width: 100%;
509
- -webkit-overflow-scrolling: touch;
510
- }
511
- .rules-scroll[data-v-3e175668]::-webkit-scrollbar {
512
- height: 6px;
513
- }
514
- .rules-scroll[data-v-3e175668]::-webkit-scrollbar-track {
515
- background: var(--md-surface-muted);
516
- border-radius: 4px;
517
- }
518
- .rules-scroll[data-v-3e175668]::-webkit-scrollbar-thumb {
519
- background: var(--md-border-strong);
520
- border-radius: 4px;
521
- }
522
- .rules-scroll[data-v-3e175668]::-webkit-scrollbar-thumb:hover {
523
- background: var(--md-text-subtle);
524
- }
525
-
526
- .toggle-btn[data-v-26c04ac4] {
527
- display: flex;
528
- align-items: center;
529
- justify-content: center;
530
- height: 28px;
531
- border-radius: 6px;
532
- border: 0.5px solid transparent;
533
- cursor: pointer;
534
- transition:
535
- background 0.1s,
536
- border-color 0.1s,
537
- color 0.1s;
538
- background: transparent;
539
- padding: 0;
540
- outline: none;
541
- }
542
- .toggle-btn[data-v-26c04ac4]:focus-visible {
543
- box-shadow: 0 0 0 2px var(--md-selection);
544
- }
545
- .toggle-btn--idle[data-v-26c04ac4] {
546
- border-color: var(--md-border);
547
- color: var(--md-text-subtle);
548
- }
549
- .toggle-btn--idle[data-v-26c04ac4]:hover {
550
- background: var(--md-surface-hover);
551
- border-color: var(--md-border-strong);
552
- }
553
- .toggle-btn--active[data-v-26c04ac4] {
554
- background: var(--md-selection-bg);
555
- border-color: var(--md-selection);
556
- color: var(--md-selection-fg);
557
- }
558
- .toggle-btn--active[data-v-26c04ac4]:hover {
559
- background: color-mix(
560
- in srgb,
561
- var(--md-selection) 20%,
562
- var(--md-selection-bg)
563
- );
564
- }
565
-
566
- .md-btn[data-v-e13a23ac] {
567
- display: inline-flex;
568
- align-items: center;
569
- justify-content: center;
570
- gap: 0.375rem;
571
- padding: 0.5rem 0.875rem;
572
- font-size: 13px;
573
- font-weight: 500;
574
- border-radius: 0.375rem;
575
- border: 1px solid transparent;
576
- cursor: pointer;
577
- transition:
578
- background-color 0.15s,
579
- border-color 0.15s,
580
- opacity 0.15s;
581
- }
582
- .md-btn[data-v-e13a23ac]:disabled {
583
- opacity: 0.55;
584
- cursor: not-allowed;
585
- }
586
- .md-btn--primary[data-v-e13a23ac] {
587
- background: var(--md-button-primary-bg);
588
- color: var(--md-button-primary-text);
589
- }
590
- .md-btn--primary[data-v-e13a23ac]:not(:disabled):hover {
591
- background: var(--md-button-primary-hover-bg);
592
- }
593
- .md-btn--secondary[data-v-e13a23ac] {
594
- background: var(--md-button-secondary-bg);
595
- color: var(--md-button-secondary-text);
596
- border-color: var(--md-border);
597
- }
598
- .md-btn--secondary[data-v-e13a23ac]:not(:disabled):hover {
599
- background: var(--md-button-secondary-hover-bg);
600
- }
601
- .md-btn--danger[data-v-e13a23ac] {
602
- background: var(--md-danger);
603
- color: var(--md-on-danger);
604
- }
605
- .md-btn--danger[data-v-e13a23ac]:not(:disabled):hover {
606
- filter: brightness(0.94);
607
- }
608
- .md-btn--success[data-v-e13a23ac] {
609
- background: var(--md-success);
610
- color: var(--md-surface);
611
- }
612
-
613
- .md-dialog__overlay[data-v-2491daae] {
614
- position: fixed;
615
- inset: 0;
616
- z-index: 9998;
617
- display: flex;
618
- align-items: center;
619
- justify-content: center;
620
- padding: 1rem;
621
- background: rgb(0 0 0 / 0.4);
622
- }
623
- .md-dialog[data-v-2491daae] {
624
- width: 420px;
625
- max-width: 100%;
626
- max-height: calc(100vh - 2rem);
627
- display: flex;
628
- flex-direction: column;
629
- background: var(--md-surface);
630
- border-radius: 0.75rem;
631
- box-shadow: 0 20px 60px rgb(0 0 0 / 0.25);
632
- outline: none;
633
- }
634
- .md-dialog__header[data-v-2491daae] {
635
- display: flex;
636
- align-items: center;
637
- justify-content: space-between;
638
- gap: 1rem;
639
- padding: 1.125rem 1.25rem 0.5rem;
640
- }
641
- .md-dialog__header--noTitle[data-v-2491daae] {
642
- justify-content: flex-end;
643
- }
644
- .md-dialog__title[data-v-2491daae] {
645
- font-size: 17px;
646
- font-weight: 600;
647
- color: var(--md-text);
648
- margin: 0;
649
- }
650
- .md-dialog__close[data-v-2491daae] {
651
- display: inline-flex;
652
- padding: 0.25rem;
653
- color: var(--md-text-subtle);
654
- background: none;
655
- border: 0;
656
- border-radius: 0.25rem;
657
- cursor: pointer;
658
- }
659
- .md-dialog__close[data-v-2491daae]:hover {
660
- color: var(--md-text);
661
- background: var(--md-surface-muted);
662
- }
663
- .md-dialog__body[data-v-2491daae] {
664
- padding: 0.5rem 1.25rem 1.25rem;
665
- overflow-y: auto;
666
- font-size: 14px;
667
- color: var(--md-text);
668
- }
669
- .md-dialog__footer[data-v-2491daae] {
670
- display: flex;
671
- justify-content: flex-end;
672
- gap: 0.5rem;
673
- padding: 0 1.25rem 1.25rem;
674
- }
675
- .md-dialog__srOnly[data-v-2491daae] {
676
- position: absolute;
677
- width: 1px;
678
- height: 1px;
679
- padding: 0;
680
- margin: -1px;
681
- overflow: hidden;
682
- clip: rect(0, 0, 0, 0);
683
- white-space: nowrap;
684
- border: 0;
685
- }
686
-
687
- [data-v-7facc7e8] a {
688
- color: #2563eb;
689
- cursor: pointer;
690
- }
691
- [data-v-7facc7e8] a:not([style*="text-decoration"]) {
692
- text-decoration: underline;
693
- }
694
- [data-v-7facc7e8] a:hover {
695
- opacity: 0.8;
696
- }
697
-
698
- /* Merge tag node — inline chip styling.
699
- display:inline ensures the span is exactly as wide as its text content.
700
- No width reservation from hidden raw-tag text since the NodeView
701
- writes only one text node at a time. */
702
- [data-v-7facc7e8] .merge-tag-node {
703
- display: inline;
704
- white-space: nowrap;
705
- vertical-align: baseline;
706
- cursor: default;
707
- border-radius: 3px;
708
- padding: 0 2px;
709
- }
710
-
711
- /* List styles — scoped to the editor content area */
712
- [data-v-7facc7e8] li:not(:last-child) {
713
- margin-bottom: var(--list-item-spacing, 0.25rem);
714
- }
715
-
716
- /* ─── Toolbar font Select sizing ─────────────────────────────────────────────
717
- Constrain the Select to sit flush inside the toolbar row.
718
- The trigger is kept compact (28px tall) and the overlay is widened so
719
- long font names are readable without being clipped. */
720
- .toolbar-font-select[data-v-7facc7e8] .p-select {
721
- height: 28px;
722
- min-width: 110px;
723
- max-width: 130px;
724
- border-radius: 6px;
725
- border-color: var(
726
- --md-toolbar-border
727
- ); /* matches other toolbar button borders */
728
- padding: 0 6px;
729
- font-size: 0.75rem;
730
- display: flex;
731
- align-items: center;
732
- }
733
- .toolbar-font-select[data-v-7facc7e8] .p-select-label {
734
- padding: 0;
735
- font-size: 0.85rem;
736
- line-height: 1;
737
- }
738
- .toolbar-font-select[data-v-7facc7e8] .p-select-dropdown {
739
- width: 20px;
740
- }
741
-
742
- /* Widen the overlay panel so long font names are not clipped */
743
- [data-v-7facc7e8] .p-select-overlay {
744
- min-width: 180px !important;
745
- }
746
-
747
- .toggle-btn[data-v-b01eaed8] {
748
- display: flex;
749
- align-items: center;
750
- justify-content: center;
751
- height: 28px;
752
- border-radius: 6px;
753
- border: 0.5px solid transparent;
754
- cursor: pointer;
755
- transition:
756
- background 0.1s,
757
- border-color 0.1s,
758
- color 0.1s;
759
- background: transparent;
760
- padding: 0;
761
- outline: none;
762
- }
763
- .toggle-btn--idle[data-v-b01eaed8] {
764
- border-color: color-mix(in srgb, var(--md-border) 80%, transparent);
765
- color: var(--md-text-subtle);
766
- }
767
- .toggle-btn--idle[data-v-b01eaed8]:hover {
768
- background: var(--md-surface-hover);
769
- border-color: var(--md-border-strong);
770
- color: var(--md-text-muted);
771
- }
772
- .toggle-btn--active[data-v-b01eaed8] {
773
- background: var(--md-selection-bg);
774
- border-color: var(--md-selection);
775
- color: var(--md-selection-fg);
776
- }
777
- .toggle-btn--active[data-v-b01eaed8]:hover {
778
- background: color-mix(
779
- in srgb,
780
- var(--md-selection) 20%,
781
- var(--md-selection-bg)
782
- );
783
- }
784
-
785
- .panel[data-v-f8eef947] {
786
- padding: 10px 12px;
787
- background: var(--md-surface);
788
- border: 0.5px solid color-mix(in srgb, var(--md-border) 80%, transparent);
789
- border-radius: 10px;
790
- }
791
- .separator[data-v-f8eef947] {
792
- height: 0.5px;
793
- background: color-mix(in srgb, var(--md-border) 80%, transparent);
794
- margin-left: -12px;
795
- margin-right: -12px;
796
- }
797
-
798
- .spinner[data-v-8a2d8f31] {
799
- width: 50px;
800
- height: 50px;
801
- border: 5px solid rgba(0, 0, 0, 0.2);
802
- border-top-color: var(--md-selection);
803
- border-radius: 50%;
804
- margin: 0 auto;
805
- animation: spin-8a2d8f31 1s linear infinite;
806
- }
807
- @keyframes spin-8a2d8f31 {
808
- to {
809
- transform: rotate(360deg);
810
- }
811
- }
812
-
813
- /* ===== DESIGN SYSTEM TOKENS =====
814
- * Each token reads from the shared --md-* custom properties (see theme.ts)
815
- * and falls back to this component's original hardcoded value when the
816
- * host hasn't set that property. That means an untouched app looks exactly
817
- * as before, and a host calling setEditorTheme() re-themes this notice too,
818
- * without editing this file again. */
819
- .desktop-gate[data-v-ac364a19] {
820
- --brand-primary: var(--md-primary, var(--md-primary));
821
- --brand-primary-dark: var(--md-primary-hover, var(--md-primary-hover));
822
- --brand-primary-light: var(--md-primary-hover, var(--md-primary-hover));
823
- --brand-gradient-start: var(--md-primary, var(--md-primary));
824
- --brand-gradient-end: var(--md-primary-hover, var(--md-primary-hover));
825
- --gate-surface: var(--md-surface, var(--md-surface));
826
- --gate-backdrop: var(--md-background, var(--md-surface-hover));
827
- --gate-on-primary: var(--md-on-primary, var(--md-surface));
828
- --gate-warning: var(--md-warning, var(--md-warning));
829
- --gray-50: var(--md-background, var(--md-surface-hover));
830
- --gray-100: var(--md-surface-muted, var(--md-surface-muted));
831
- --gray-200: var(--md-border, var(--md-border));
832
- --gray-300: var(--md-border-strong, var(--md-border-strong));
833
- --gray-400: var(--md-text-subtle, var(--md-text-subtle));
834
- --gray-500: var(--md-text-subtle, var(--md-text-muted));
835
- --gray-600: var(--md-text-muted, var(--md-text-muted));
836
- --gray-700: var(--md-text-muted, var(--md-text-muted));
837
- --gray-800: var(--md-text, var(--md-text));
838
- --gray-900: var(--md-text, var(--md-text));
839
- --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
840
- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
841
- --shadow-lg:
842
- 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
843
- --shadow-xl:
844
- 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
845
- --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
846
- }
847
-
848
- /* ===== MAIN LAYOUT ===== */
849
- .desktop-gate[data-v-ac364a19] {
850
- position: fixed;
851
- inset: 0;
852
- z-index: 9999;
853
- display: flex;
854
- align-items: center;
855
- justify-content: center;
856
- background: color-mix(in srgb, var(--gate-backdrop) 98%, transparent);
857
- backdrop-filter: blur(2px);
858
- padding: 1.5rem;
859
- }
860
- .gate-container[data-v-ac364a19] {
861
- max-width: 520px;
862
- width: 100%;
863
- background: var(--gate-surface);
864
- border-radius: 2rem;
865
- padding: 2.5rem;
866
- text-align: center;
867
- box-shadow: var(--shadow-2xl);
868
- animation: fadeInUp-ac364a19 0.5s cubic-bezier(0.16, 1, 0.3, 1);
869
- border: 1px solid var(--gray-200);
870
- }
871
-
872
- /* ===== BRAND BADGE ===== */
873
- .brand-badge[data-v-ac364a19] {
874
- position: relative;
875
- width: 80px;
876
- height: 80px;
877
- margin: 0 auto 1.5rem;
878
- display: flex;
879
- align-items: center;
880
- justify-content: center;
881
- }
882
- .badge-ring[data-v-ac364a19] {
883
- position: absolute;
884
- inset: 0;
885
- border-radius: 50%;
886
- background: linear-gradient(
887
- 135deg,
888
- var(--brand-gradient-start),
889
- var(--brand-gradient-end)
890
- );
891
- animation: pulseRing-ac364a19 2s ease-out infinite;
892
- }
893
- .badge-icon[data-v-ac364a19] {
894
- position: relative;
895
- width: 56px;
896
- height: 56px;
897
- background: var(--gate-surface);
898
- border-radius: 50%;
899
- display: flex;
900
- align-items: center;
901
- justify-content: center;
902
- color: var(--brand-primary);
903
- box-shadow: var(--shadow-md);
904
- transition: transform 0.2s ease;
905
- }
906
- .gate-container:hover .badge-icon[data-v-ac364a19] {
907
- transform: scale(1.02);
908
- }
909
-
910
- /* ===== TYPOGRAPHY ===== */
911
- .gate-title[data-v-ac364a19] {
912
- font-size: 1.875rem;
913
- font-weight: 700;
914
- letter-spacing: -0.02em;
915
- margin: 0 0 1rem 0;
916
- color: var(--gray-900);
917
- }
918
- .brand-gradient[data-v-ac364a19] {
919
- background: linear-gradient(
920
- 135deg,
921
- var(--brand-gradient-start),
922
- var(--brand-gradient-end)
923
- );
924
- background-clip: text;
925
- -webkit-background-clip: text;
926
- color: transparent;
927
- }
928
- .gate-description[data-v-ac364a19] {
929
- font-size: 1rem;
930
- line-height: 1.5;
931
- color: var(--gray-600);
932
- margin: 0 0 1.75rem 0;
933
- }
934
-
935
- /* ===== FEATURE GRID ===== */
936
- .feature-grid[data-v-ac364a19] {
937
- display: flex;
938
- justify-content: center;
939
- gap: 2rem;
940
- margin-bottom: 2rem;
941
- padding: 1rem 0;
942
- border-top: 1px solid var(--gray-200);
943
- border-bottom: 1px solid var(--gray-200);
944
- }
945
- .feature-item[data-v-ac364a19] {
946
- display: flex;
947
- flex-direction: column;
948
- align-items: center;
949
- gap: 0.5rem;
950
- font-size: 0.75rem;
951
- font-weight: 500;
952
- color: var(--gray-700);
953
- }
954
- .feature-icon[data-v-ac364a19] {
955
- width: 36px;
956
- height: 36px;
957
- background: var(--gray-100);
958
- border-radius: 12px;
959
- display: flex;
960
- align-items: center;
961
- justify-content: center;
962
- color: var(--brand-primary);
963
- transition: all 0.2s ease;
964
- }
965
- .feature-item:hover .feature-icon[data-v-ac364a19] {
966
- background: var(--brand-primary);
967
- color: var(--gate-on-primary);
968
- transform: translateY(-2px);
969
- }
970
-
971
- /* ===== STATUS ===== */
972
- .detection-status[data-v-ac364a19] {
973
- display: inline-flex;
974
- align-items: center;
975
- gap: 0.5rem;
976
- padding: 0.5rem 1rem;
977
- background: var(--gray-100);
978
- border-radius: 100px;
979
- font-size: 0.75rem;
980
- font-weight: 500;
981
- color: var(--gray-600);
982
- }
983
- .status-dot[data-v-ac364a19] {
984
- width: 8px;
985
- height: 8px;
986
- background: var(--gate-warning);
987
- border-radius: 50%;
988
- animation: pulse-ac364a19 1.5s ease-out infinite;
989
- }
990
-
991
- /* ===== FOOTER ===== */
992
- .gate-footer[data-v-ac364a19] {
993
- margin-top: 2rem;
994
- padding-top: 1.5rem;
995
- display: flex;
996
- align-items: center;
997
- justify-content: center;
998
- gap: 0.5rem;
999
- font-size: 0.75rem;
1000
- color: var(--gray-400);
1001
- }
1002
- .brand-text[data-v-ac364a19] {
1003
- font-weight: 600;
1004
- background: linear-gradient(
1005
- 135deg,
1006
- var(--brand-gradient-start),
1007
- var(--brand-gradient-end)
1008
- );
1009
- background-clip: text;
1010
- -webkit-background-clip: text;
1011
- color: transparent;
1012
- }
1013
-
1014
- /* ===== ANIMATIONS ===== */
1015
- @keyframes fadeInUp-ac364a19 {
1016
- from {
1017
- opacity: 0;
1018
- transform: translateY(20px);
1019
- }
1020
- to {
1021
- opacity: 1;
1022
- transform: translateY(0);
1023
- }
1024
- }
1025
- @keyframes pulseRing-ac364a19 {
1026
- 0% {
1027
- opacity: 1;
1028
- transform: scale(0.95);
1029
- }
1030
- 70% {
1031
- opacity: 0.4;
1032
- transform: scale(1.15);
1033
- }
1034
- 100% {
1035
- opacity: 0;
1036
- transform: scale(1.25);
1037
- }
1038
- }
1039
- @keyframes pulse-ac364a19 {
1040
- 0%,
1041
- 100% {
1042
- opacity: 1;
1043
- }
1044
- 50% {
1045
- opacity: 0.4;
1046
- }
1047
- }
1048
-
1049
- /* ===== RESPONSIVE TOUCH-UPS ===== */
1050
- @media (max-width: 480px) {
1051
- .gate-container[data-v-ac364a19] {
1052
- padding: 2rem 1.5rem;
1053
- }
1054
- .gate-title[data-v-ac364a19] {
1055
- font-size: 1.5rem;
1056
- }
1057
- .feature-grid[data-v-ac364a19] {
1058
- gap: 1.25rem;
1059
- }
1060
- }
1061
-
1062
- .row-drop-bar[data-v-0e09bbe4] {
1063
- position: absolute;
1064
- left: 0;
1065
- right: 0;
1066
- height: 28px;
1067
- display: flex;
1068
- align-items: center;
1069
- gap: 8px;
1070
- padding: 0 16px;
1071
- background: color-mix(in srgb, var(--drop-color) 5%, transparent);
1072
- border-radius: 6px;
1073
- z-index: 20;
1074
- pointer-events: none;
1075
- }
1076
- .row-drop-bar--before[data-v-0e09bbe4] {
1077
- top: -14px;
1078
- }
1079
- .row-drop-bar--after[data-v-0e09bbe4] {
1080
- bottom: -14px;
1081
- }
1082
- .row-drop-bar-line[data-v-0e09bbe4] {
1083
- flex: 1;
1084
- height: 2px;
1085
- background: color-mix(in srgb, var(--drop-color) 50%, transparent);
1086
- border-radius: 2px;
1087
- /* animation: bar-expand 0.18s ease forwards; */
1088
- }
1089
-
1090
- /* @keyframes bar-expand {
1091
- from {
1092
- transform: scaleX(0);
1093
- opacity: 0;
1094
- }
1095
- to {
1096
- transform: scaleX(1);
1097
- opacity: 1;
1098
- }
1099
- } */
1100
- .row-drop-bar-label[data-v-0e09bbe4] {
1101
- display: flex;
1102
- align-items: center;
1103
- gap: 6px;
1104
- font-size: 11px;
1105
- font-weight: 500;
1106
- color: var(--drop-color);
1107
- white-space: nowrap;
1108
- padding: 4px 12px;
1109
- background: color-mix(in srgb, var(--drop-color) 10%, transparent);
1110
- border: 1px solid color-mix(in srgb, var(--drop-color) 30%, transparent);
1111
- border-radius: 24px;
1112
- /* animation: label-pop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; */
1113
- }
1114
-
1115
- /* @keyframes label-pop {
1116
- from {
1117
- transform: scale(0.8);
1118
- opacity: 0;
1119
- }
1120
- to {
1121
- transform: scale(1);
1122
- opacity: 1;
1123
- }
1124
- } */
1125
- .row-drop-bar-icon[data-v-0e09bbe4] {
1126
- width: 12px;
1127
- height: 12px;
1128
- flex-shrink: 0;
1129
- }
1130
-
1131
- /* Transition */
1132
- /* .drop-bar-enter-active {
1133
- animation: bar-in 0.15s ease forwards;
1134
- }
1135
- .drop-bar-leave-active {
1136
- transition: opacity 0.12s ease;
1137
- }
1138
- .drop-bar-leave-to {
1139
- opacity: 0;
1140
- } */
1141
-
1142
- /* @keyframes bar-in {
1143
- from {
1144
- opacity: 0;
1145
- }
1146
- to {
1147
- opacity: 1;
1148
- }
1149
- } */
1150
-
1151
- .fade-enter-active[data-v-557d7319],
1152
- .fade-leave-active[data-v-557d7319] {
1153
- transition: opacity 0.1s ease;
1154
- }
1155
- .fade-enter-from[data-v-557d7319],
1156
- .fade-leave-to[data-v-557d7319] {
1157
- opacity: 0;
1158
- }
1159
-
1160
- /*
1161
- * Stacking fix: CanvasRowDropZone has z-index: 9 and extends its hit-area
1162
- * strip into adjacent rows when a layout drag is active. Without an explicit
1163
- * stacking context on the column, that strip would catch pointer events for
1164
- * the edges of the column — the row drop zone would win and the drop would
1165
- * become a top-level row instead of a nested row.
1166
- *
1167
- * z-index: 1 creates a stacking context ABOVE the drop zone's hit strip.
1168
- *
1169
- * CRITICAL: When a child component is selected, we must set z-index: auto on
1170
- * this column AND on its ancestor CanvasRow (via hasSelectedDescendant).
1171
- * z-index: auto removes the column from the stacking context chain entirely,
1172
- * letting the selected component's z-50 bubble up to compete at the canvas
1173
- * root level — which is what allows the action bar and RichText toolbar to
1174
- * paint above sibling rows. If z-index: 1 stays active, ANY z-index on a
1175
- * child is capped within this column's own stacking context and can never
1176
- * exceed a sibling row painted at z-index: 0 in normal flow.
1177
- */
1178
- .canvas-column[data-v-557d7319] {
1179
- position: relative;
1180
- z-index: 1;
1181
- }
1182
- .canvas-column.has-selected-child[data-v-557d7319] {
1183
- z-index: auto;
1184
- }
1185
-
1186
- /* ── Base zone ─────────────────────────────────────────────── */
1187
- .canvas-drop-zone[data-v-cb66bb52] {
1188
- position: relative;
1189
- height: 0;
1190
- margin: 0;
1191
- z-index: 9;
1192
- overflow: visible;
1193
- transition: height 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
1194
- }
1195
-
1196
- /* Full expansion on hover */
1197
- .canvas-drop-zone--active[data-v-cb66bb52] {
1198
- height: 52px;
1199
- }
1200
-
1201
- /* Empty-canvas variant — fills the whole empty area */
1202
- .canvas-drop-zone--empty[data-v-cb66bb52] {
1203
- height: 100%;
1204
- min-height: 200px;
1205
- }
1206
-
1207
- /* Full height variant - takes up entire parent container */
1208
- .canvas-drop-zone--full[data-v-cb66bb52] {
1209
- position: absolute;
1210
- top: 0;
1211
- left: 0;
1212
- right: 0;
1213
- bottom: 0;
1214
- height: auto;
1215
- min-height: 100%;
1216
- }
1217
- .canvas-drop-zone--empty .cdz-bar[data-v-cb66bb52] {
1218
- inset: 12px;
1219
- justify-content: center;
1220
- border-radius: 12px;
1221
- }
1222
-
1223
- /* ── Empty state styles (when fullHeight is true) ── */
1224
- .cdz-empty-state[data-v-cb66bb52] {
1225
- position: absolute;
1226
- inset: 0;
1227
- display: flex;
1228
- align-items: center;
1229
- justify-content: center;
1230
- pointer-events: none;
1231
- background: linear-gradient(
1232
- 135deg,
1233
- color-mix(in srgb, var(--md-row-selection) 4%, var(--md-surface)) 0%,
1234
- color-mix(in srgb, var(--md-row-selection) 8%, var(--md-surface)) 100%
1235
- );
1236
- border: 2px dashed
1237
- color-mix(in srgb, var(--md-row-selection) 22%, var(--md-surface));
1238
- border-radius: 6px;
1239
- transition: all 0.2s ease;
1240
- }
1241
- .canvas-drop-zone--full .cdz-empty-state[data-v-cb66bb52] {
1242
- animation: fade-in-cb66bb52 0.3s ease;
1243
- }
1244
- @keyframes fade-in-cb66bb52 {
1245
- from {
1246
- opacity: 0;
1247
- transform: scale(0.98);
1248
- }
1249
- to {
1250
- opacity: 1;
1251
- transform: scale(1);
1252
- }
1253
- }
1254
- .cdz-empty-content[data-v-cb66bb52] {
1255
- text-align: center;
1256
- padding: 2rem;
1257
- }
1258
- .cdz-empty-icon[data-v-cb66bb52] {
1259
- width: 48px;
1260
- height: 48px;
1261
- margin: 0 auto 12px;
1262
- color: var(--md-text-subtle);
1263
- stroke-width: 1.5;
1264
- }
1265
- .cdz-empty-title[data-v-cb66bb52] {
1266
- font-size: 1.125rem;
1267
- font-weight: 500;
1268
- color: var(--md-selection-fg);
1269
- margin-bottom: 8px;
1270
- letter-spacing: -0.01em;
1271
- }
1272
- .cdz-empty-subtitle[data-v-cb66bb52] {
1273
- font-size: 0.875rem;
1274
- color: var(--md-text-subtle);
1275
- line-height: 1.4;
1276
- }
1277
-
1278
- /* ── Invisible hit-area ─────────────────────────────────────
1279
- * Previously this bled 12px into the rows above and below with pointer-events
1280
- * all during a layout drag. That meant dragging a LayoutTab row would hit this
1281
- * strip when the cursor was merely near a column's top/bottom edge, and
1282
- * insert a top-level row instead of a nested row.
1283
- *
1284
- * FIX: Shrink the bleed to a small value (−4px) so the strip only covers the
1285
- * natural visible gap between rows. Columns retain ownership of their rendered
1286
- * area. Combined with CanvasColumn's new z-index: 1 stacking context, the
1287
- * column reliably wins for pointer hits inside its body, while the thin gap
1288
- * between rows still belongs to this drop zone.
1289
- *
1290
- * When fully expanded (canvas-drop-zone--active: 52px tall) the zone's own
1291
- * height covers the hit area naturally, so bleed here is not needed for the
1292
- * "snap into a big target" UX — that comes from the zone's own expanded size.
1293
- */
1294
- .cdz-hit-area[data-v-cb66bb52] {
1295
- position: absolute;
1296
- left: 0;
1297
- right: 0;
1298
- top: -4px;
1299
- bottom: -4px;
1300
- z-index: 1;
1301
- /* Only catchable during a layout drag; invisible + inert otherwise */
1302
- pointer-events: none;
1303
- }
1304
- .canvas-drop-zone--receptive .cdz-hit-area[data-v-cb66bb52] {
1305
- pointer-events: all;
1306
- }
1307
-
1308
- /* Hide empty state when dragging */
1309
- .canvas-drop-zone--full.canvas-drop-zone--receptive .cdz-empty-state[data-v-cb66bb52],
1310
- .canvas-drop-zone--full.canvas-drop-zone--active .cdz-empty-state[data-v-cb66bb52] {
1311
- opacity: 0.5;
1312
- background: color-mix(in srgb, var(--md-row-selection) 4%, transparent);
1313
- }
1314
-
1315
- /* ── Ghost line (receptive but not hovered) ─────────────────── */
1316
- .cdz-ghost-line[data-v-cb66bb52] {
1317
- position: absolute;
1318
- left: 0;
1319
- right: 0;
1320
- top: 50%;
1321
- height: 2px;
1322
- transform: translateY(-50%);
1323
- background: repeating-linear-gradient(
1324
- 90deg,
1325
- color-mix(in srgb, var(--md-row-selection) 25%, transparent) 0px,
1326
- color-mix(in srgb, var(--md-row-selection) 25%, transparent) 6px,
1327
- transparent 6px,
1328
- transparent 12px
1329
- );
1330
- border-radius: 2px;
1331
- pointer-events: none;
1332
- animation: ghost-pulse-cb66bb52 2s ease-in-out infinite;
1333
- }
1334
- @keyframes ghost-pulse-cb66bb52 {
1335
- 0%,
1336
- 100% {
1337
- opacity: 0.5;
1338
- }
1339
- 50% {
1340
- opacity: 1;
1341
- }
1342
- }
1343
-
1344
- /* ── Active bar ─────────────────────────────────────────────── */
1345
- .cdz-bar[data-v-cb66bb52] {
1346
- position: absolute;
1347
- inset: 4px 0;
1348
- display: flex;
1349
- align-items: center;
1350
- gap: 10px;
1351
- padding: 0 20px;
1352
- background: color-mix(in srgb, var(--md-row-selection) 6%, transparent);
1353
- border-radius: 8px;
1354
- border: 1.5px dashed
1355
- color-mix(in srgb, var(--md-row-selection) 35%, transparent);
1356
- pointer-events: none; /* let drag events fall through to the parent drop zone */
1357
- }
1358
- .cdz-line[data-v-cb66bb52] {
1359
- flex: 1;
1360
- height: 2px;
1361
- background: linear-gradient(
1362
- 90deg,
1363
- transparent,
1364
- color-mix(in srgb, var(--md-row-selection) 60%, transparent),
1365
- color-mix(in srgb, var(--md-row-selection) 80%, transparent),
1366
- color-mix(in srgb, var(--md-row-selection) 60%, transparent),
1367
- transparent
1368
- );
1369
- border-radius: 2px;
1370
- animation: line-expand-cb66bb52 0.2s ease forwards;
1371
- transform-origin: center;
1372
- }
1373
- @keyframes line-expand-cb66bb52 {
1374
- from {
1375
- transform: scaleX(0);
1376
- opacity: 0;
1377
- }
1378
- to {
1379
- transform: scaleX(1);
1380
- opacity: 1;
1381
- }
1382
- }
1383
- .cdz-pill[data-v-cb66bb52] {
1384
- display: flex;
1385
- align-items: center;
1386
- gap: 5px;
1387
- font-size: 11px;
1388
- font-weight: 600;
1389
- color: var(--md-row-selection-fg);
1390
- letter-spacing: 0.01em;
1391
- white-space: nowrap;
1392
- padding: 5px 14px;
1393
- background: color-mix(in srgb, var(--md-row-selection) 8%, transparent);
1394
- border: 1.5px solid
1395
- color-mix(in srgb, var(--md-row-selection) 35%, transparent);
1396
- border-radius: 100px;
1397
- box-shadow: 0 2px 8px
1398
- color-mix(in srgb, var(--md-row-selection) 15%, transparent);
1399
- animation: pill-pop-cb66bb52 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
1400
- }
1401
- @keyframes pill-pop-cb66bb52 {
1402
- from {
1403
- transform: scale(0.75);
1404
- opacity: 0;
1405
- }
1406
- to {
1407
- transform: scale(1);
1408
- opacity: 1;
1409
- }
1410
- }
1411
- .cdz-icon[data-v-cb66bb52] {
1412
- width: 13px;
1413
- height: 13px;
1414
- flex-shrink: 0;
1415
- }
1416
-
1417
- /* ── Transition ─────────────────────────────────────────────── */
1418
- .cdz-bar-enter-active[data-v-cb66bb52] {
1419
- animation: cdz-in-cb66bb52 0.15s ease forwards;
1420
- }
1421
- .cdz-bar-leave-active[data-v-cb66bb52] {
1422
- transition: opacity 0.1s ease;
1423
- }
1424
- .cdz-bar-leave-to[data-v-cb66bb52] {
1425
- opacity: 0;
1426
- }
1427
- @keyframes cdz-in-cb66bb52 {
1428
- from {
1429
- opacity: 0;
1430
- transform: scaleY(0.6);
1431
- }
1432
- to {
1433
- opacity: 1;
1434
- transform: scaleY(1);
1435
- }
1436
- }
1437
-
1438
- .drop-line-enter-active[data-v-d0f88c76] {
1439
- transition:
1440
- opacity 80ms ease,
1441
- transform 80ms ease;
1442
- }
1443
- .drop-line-leave-active[data-v-d0f88c76] {
1444
- transition:
1445
- opacity 60ms ease,
1446
- transform 60ms ease;
1447
- }
1448
- .drop-line-enter-from[data-v-d0f88c76],
1449
- .drop-line-leave-to[data-v-d0f88c76] {
1450
- opacity: 0;
1451
- transform: scaleX(0.6);
1452
- transform-origin: left center;
1453
- }
1454
-
1455
- .slide-enter-active[data-v-10da3eee],
1456
- .slide-leave-active[data-v-10da3eee] {
1457
- transition: all 0.2s ease;
1458
- max-height: 500px;
1459
- overflow: hidden;
1460
- }
1461
- .slide-enter-from[data-v-10da3eee],
1462
- .slide-leave-to[data-v-10da3eee] {
1463
- opacity: 0;
1464
- max-height: 0;
1465
- transform: translateY(-10px);
1466
- }
1467
-
1468
- /* ============================================================
1469
- md-dropdown – suggestion list
1470
- ============================================================ */
1471
- .md-dropdown[data-v-029f6297] {
1472
- position: absolute;
1473
- top: 100%;
1474
- left: 0;
1475
- right: 0;
1476
- margin-top: 4px;
1477
- background: var(--md-surface);
1478
- border: 1px solid var(--md-border);
1479
- border-radius: 0.375rem;
1480
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
1481
- z-index: 10;
1482
- max-height: 12rem;
1483
- overflow-y: auto;
1484
- }
1485
- .md-dropdown-item[data-v-029f6297] {
1486
- padding: 0.5rem 0.75rem;
1487
- cursor: pointer;
1488
- color: var(--md-text);
1489
- transition: background 0.1s;
1490
- }
1491
- .md-dropdown-item[data-v-029f6297]:hover {
1492
- background: var(--md-surface-hover);
1493
- }
1494
- .md-dropdown-item--active[data-v-029f6297] {
1495
- background: var(--md-primary);
1496
- color: var(--md-on-primary);
1497
- }
1498
-
1499
- /* ============================================================
1500
- md-tag – selected tag pills
1501
- ============================================================ */
1502
- .md-tag[data-v-029f6297] {
1503
- display: inline-flex;
1504
- align-items: center;
1505
- padding: 0.125rem 0.75rem;
1506
- border-radius: 9999px;
1507
- font-size: 0.875rem;
1508
- font-weight: 500;
1509
- background: var(--md-primary);
1510
- color: var(--md-on-primary);
1511
- line-height: 1.5;
1512
- }
1513
- .md-tag-remove[data-v-029f6297] {
1514
- margin-left: 0.5rem;
1515
- display: inline-flex;
1516
- align-items: center;
1517
- justify-content: center;
1518
- width: 1rem;
1519
- height: 1rem;
1520
- border: none;
1521
- background: transparent;
1522
- color: color-mix(in srgb, var(--md-on-primary) 80%, transparent);
1523
- cursor: pointer;
1524
- border-radius: 9999px;
1525
- transition:
1526
- background 0.15s,
1527
- color 0.15s;
1528
- padding: 0;
1529
- }
1530
- .md-tag-remove[data-v-029f6297]:hover {
1531
- background: color-mix(in srgb, var(--md-on-primary) 20%, transparent);
1532
- color: var(--md-on-primary);
1533
- }
1534
- .md-tag-remove svg[data-v-029f6297] {
1535
- width: 100%;
1536
- height: 100%;
1537
- }
1538
-
1539
- /* ============================================================
1540
- Scrollbar styling for dropdown (optional, keeps it clean)
1541
- ============================================================ */
1542
- .md-dropdown[data-v-029f6297]::-webkit-scrollbar {
1543
- width: 4px;
1544
- }
1545
- .md-dropdown[data-v-029f6297]::-webkit-scrollbar-track {
1546
- background: transparent;
1547
- }
1548
- .md-dropdown[data-v-029f6297]::-webkit-scrollbar-thumb {
1549
- background: var(--md-border);
1550
- border-radius: 8px;
1551
- }
1552
- .md-dropdown[data-v-029f6297]::-webkit-scrollbar-thumb:hover {
1553
- background: var(--md-text-subtle);
1554
- }
1555
-
1556
- .overflow-x-auto[data-v-66ee94f1] {
1557
- max-width: 100%;
1558
- -webkit-overflow-scrolling: touch;
1559
- }
1560
- .overflow-x-auto[data-v-66ee94f1]::-webkit-scrollbar {
1561
- height: 6px;
1562
- }
1563
- .overflow-x-auto[data-v-66ee94f1]::-webkit-scrollbar-track {
1564
- background: var(--md-surface-muted);
1565
- border-radius: 4px;
1566
- }
1567
- .overflow-x-auto[data-v-66ee94f1]::-webkit-scrollbar-thumb {
1568
- background: var(--md-border-strong);
1569
- border-radius: 4px;
1570
- }
1571
- .overflow-x-auto[data-v-66ee94f1]::-webkit-scrollbar-thumb:hover {
1572
- background: var(--md-text-subtle);
1573
- }
1574
-
1575
- .overflow-x-auto[data-v-60969a60] {
1576
- max-width: 100%;
1577
- -webkit-overflow-scrolling: touch;
1578
- }
1579
- .overflow-x-auto[data-v-60969a60]::-webkit-scrollbar {
1580
- height: 6px;
1581
- }
1582
- .overflow-x-auto[data-v-60969a60]::-webkit-scrollbar-track {
1583
- background: var(--md-surface-muted);
1584
- border-radius: 4px;
1585
- }
1586
- .overflow-x-auto[data-v-60969a60]::-webkit-scrollbar-thumb {
1587
- background: var(--md-border-strong);
1588
- border-radius: 4px;
1589
- }
1590
- .overflow-x-auto[data-v-60969a60]::-webkit-scrollbar-thumb:hover {
1591
- background: var(--md-text-subtle);
1592
- }
1593
-
1594
- .panel-slide-enter-active[data-v-ef885a8c],
1595
- .panel-slide-leave-active[data-v-ef885a8c] {
1596
- transition:
1597
- opacity 0.18s ease,
1598
- transform 0.18s ease;
1599
- }
1600
- .panel-slide-enter-from[data-v-ef885a8c],
1601
- .panel-slide-leave-to[data-v-ef885a8c] {
1602
- opacity: 0;
1603
- transform: translateX(-10px);
1604
- }
1605
-
1606
- /* Filter pill fade */
1607
- .fade-enter-active[data-v-ef885a8c],
1608
- .fade-leave-active[data-v-ef885a8c] {
1609
- transition:
1610
- opacity 0.15s ease,
1611
- transform 0.15s ease;
1612
- }
1613
- .fade-enter-from[data-v-ef885a8c],
1614
- .fade-leave-to[data-v-ef885a8c] {
1615
- opacity: 0;
1616
- transform: translateY(-4px);
1617
- }
1618
-
1619
- /* Smooth row list reorder/filter transitions */
1620
- .row-list-enter-active[data-v-ef885a8c],
1621
- .row-list-leave-active[data-v-ef885a8c] {
1622
- transition:
1623
- opacity 0.2s ease,
1624
- transform 0.2s ease;
1625
- }
1626
- .row-list-enter-from[data-v-ef885a8c],
1627
- .row-list-leave-to[data-v-ef885a8c] {
1628
- opacity: 0;
1629
- transform: translateY(6px);
1630
- }
1631
- .row-list-move[data-v-ef885a8c] {
1632
- transition: transform 0.2s ease;
1633
- }
1634
-
1635
- /* Scrollbar — thin, unobtrusive */
1636
- .overflow-y-auto[data-v-ef885a8c]::-webkit-scrollbar {
1637
- width: 6px;
1638
- }
1639
- .overflow-y-auto[data-v-ef885a8c]::-webkit-scrollbar-track {
1640
- background: transparent;
1641
- }
1642
- .overflow-y-auto[data-v-ef885a8c]::-webkit-scrollbar-thumb {
1643
- background: var(--md-border-strong);
1644
- border-radius: 9999px;
1645
- }
1646
- .overflow-y-auto[data-v-ef885a8c]::-webkit-scrollbar-thumb:hover {
1647
- background: var(--md-text-subtle);
1648
- }
1649
-
1650
- .panel-slide-enter-active[data-v-90154b02],
1651
- .panel-slide-leave-active[data-v-90154b02] {
1652
- transition:
1653
- opacity 0.18s ease,
1654
- transform 0.18s ease;
1655
- }
1656
- .panel-slide-enter-from[data-v-90154b02],
1657
- .panel-slide-leave-to[data-v-90154b02] {
1658
- opacity: 0;
1659
- transform: translateX(-10px);
1660
- }
1661
- .row-list-enter-active[data-v-90154b02],
1662
- .row-list-leave-active[data-v-90154b02] {
1663
- transition:
1664
- opacity 0.2s ease,
1665
- transform 0.2s ease;
1666
- }
1667
- .row-list-enter-from[data-v-90154b02],
1668
- .row-list-leave-to[data-v-90154b02] {
1669
- opacity: 0;
1670
- transform: translateY(6px);
1671
- }
1672
- .row-list-move[data-v-90154b02] {
1673
- transition: transform 0.2s ease;
1674
- }
1675
-
1676
- /* Scrollbar — thin, unobtrusive. Matches SavedRowsPanel. */
1677
- .overflow-y-auto[data-v-90154b02]::-webkit-scrollbar {
1678
- width: 6px;
1679
- }
1680
- .overflow-y-auto[data-v-90154b02]::-webkit-scrollbar-track {
1681
- background: transparent;
1682
- }
1683
- .overflow-y-auto[data-v-90154b02]::-webkit-scrollbar-thumb {
1684
- background: var(--md-border-strong);
1685
- border-radius: 9999px;
1686
- }
1687
- .overflow-y-auto[data-v-90154b02]::-webkit-scrollbar-thumb:hover {
1688
- background: var(--md-text-subtle);
1689
- }
1690
-
1691
- .panel-slide-enter-active[data-v-9d31c919],
1692
- .panel-slide-leave-active[data-v-9d31c919] {
1693
- transition:
1694
- opacity 0.18s ease,
1695
- transform 0.18s ease;
1696
- }
1697
- .panel-slide-enter-from[data-v-9d31c919],
1698
- .panel-slide-leave-to[data-v-9d31c919] {
1699
- opacity: 0;
1700
- transform: translateX(-10px);
1701
- }
1702
- .row-list-enter-active[data-v-9d31c919],
1703
- .row-list-leave-active[data-v-9d31c919] {
1704
- transition:
1705
- opacity 0.2s ease,
1706
- transform 0.2s ease;
1707
- }
1708
- .row-list-enter-from[data-v-9d31c919],
1709
- .row-list-leave-to[data-v-9d31c919] {
1710
- opacity: 0;
1711
- transform: translateY(6px);
1712
- }
1713
- .row-list-move[data-v-9d31c919] {
1714
- transition: transform 0.2s ease;
1715
- }
1716
-
1717
- /* Scrollbar — thin, unobtrusive. Matches SavedTemplatesPanel. */
1718
- .overflow-y-auto[data-v-9d31c919]::-webkit-scrollbar {
1719
- width: 6px;
1720
- }
1721
- .overflow-y-auto[data-v-9d31c919]::-webkit-scrollbar-track {
1722
- background: transparent;
1723
- }
1724
- .overflow-y-auto[data-v-9d31c919]::-webkit-scrollbar-thumb {
1725
- background: var(--md-border-strong);
1726
- border-radius: 9999px;
1727
- }
1728
- .overflow-y-auto[data-v-9d31c919]::-webkit-scrollbar-thumb:hover {
1729
- background: var(--md-text-subtle);
1730
- }
1731
-
1732
- .md-toast__region[data-v-7df3ae7b] {
1733
- position: fixed;
1734
- top: 1rem;
1735
- right: 1rem;
1736
- z-index: 9999;
1737
- display: flex;
1738
- flex-direction: column;
1739
- gap: 0.5rem;
1740
- pointer-events: none;
1741
- }
1742
- .md-toast[data-v-7df3ae7b] {
1743
- pointer-events: auto;
1744
- display: flex;
1745
- align-items: flex-start;
1746
- gap: 0.625rem;
1747
- min-width: 280px;
1748
- max-width: 380px;
1749
- padding: 0.75rem 0.875rem;
1750
- font-size: 13px;
1751
- border: 1px solid;
1752
- border-radius: 0.75rem;
1753
- box-shadow: 0 8px 30px rgb(0 0 0 / 0.12);
1754
- }
1755
- .md-toast__icon[data-v-7df3ae7b] {
1756
- font-size: 15px;
1757
- flex-shrink: 0;
1758
- margin-top: 0.0625rem;
1759
- }
1760
- .md-toast__body[data-v-7df3ae7b] {
1761
- flex: 1;
1762
- min-width: 0;
1763
- }
1764
- .md-toast__summary[data-v-7df3ae7b] {
1765
- font-weight: 500;
1766
- }
1767
- .md-toast__detail[data-v-7df3ae7b] {
1768
- font-size: 12px;
1769
- opacity: 0.8;
1770
- margin-top: 0.125rem;
1771
- }
1772
- .md-toast__close[data-v-7df3ae7b] {
1773
- flex-shrink: 0;
1774
- opacity: 0.5;
1775
- background: none;
1776
- border: 0;
1777
- cursor: pointer;
1778
- color: inherit;
1779
- }
1780
- .md-toast__close[data-v-7df3ae7b]:hover {
1781
- opacity: 1;
1782
- }
1783
- .md-toast--success[data-v-7df3ae7b] {
1784
- background: var(--md-success-bg);
1785
- border-color: var(--md-success-border);
1786
- color: var(--md-success-fg);
1787
- }
1788
- .md-toast--info[data-v-7df3ae7b] {
1789
- background: var(--md-info-bg);
1790
- border-color: var(--md-info-border);
1791
- color: var(--md-info-fg);
1792
- }
1793
- .md-toast--warn[data-v-7df3ae7b] {
1794
- background: var(--md-surface);
1795
- border-color: var(--md-warning-border);
1796
- color: var(--md-warning-fg);
1797
- }
1798
- .md-toast--error[data-v-7df3ae7b] {
1799
- background: var(--md-danger-bg);
1800
- border-color: var(--md-danger-border);
1801
- color: var(--md-danger-fg);
1802
- }
1803
- .md-toast-enter-active[data-v-7df3ae7b],
1804
- .md-toast-leave-active[data-v-7df3ae7b] {
1805
- transition: all 0.2s ease;
1806
- }
1807
- .md-toast-enter-from[data-v-7df3ae7b],
1808
- .md-toast-leave-to[data-v-7df3ae7b] {
1809
- opacity: 0;
1810
- transform: translateX(20px);
1811
- }
1812
-
1813
- .md-confirm__body[data-v-b70facc7] {
1814
- display: flex;
1815
- align-items: flex-start;
1816
- gap: 0.75rem;
1817
- }
1818
- .md-confirm__icon[data-v-b70facc7] {
1819
- font-size: 22px;
1820
- color: var(--md-warning);
1821
- flex-shrink: 0;
1822
- margin-top: 0.125rem;
1823
- }
1824
- .md-confirm__message[data-v-b70facc7] {
1825
- margin: 0;
1826
- font-size: 14px;
1827
- line-height: 1.5;
1828
- color: var(--md-text);
1829
- }
1830
-
1831
- /* ── Orb ──────────────────────────────────────────────────────────────────── */
1832
- .health-orb[data-v-e50d82a8] {
1833
- position: relative;
1834
- display: flex;
1835
- align-items: center;
1836
- justify-content: center;
1837
- width: 24px;
1838
- height: 24px;
1839
- border-radius: 50%;
1840
- border: none;
1841
- background: transparent;
1842
- cursor: pointer;
1843
- padding: 0;
1844
- outline: none;
1845
- flex-shrink: 0;
1846
- }
1847
- .health-orb:focus-visible .orb-core[data-v-e50d82a8] {
1848
- box-shadow: 0 0 0 3px rgba(66, 56, 158, 0.4);
1849
- }
1850
-
1851
- /* Pulse rings */
1852
- .orb-ring[data-v-e50d82a8] {
1853
- position: absolute;
1854
- border-radius: 50%;
1855
- animation: orb-pulse-e50d82a8 2.4s ease-out infinite;
1856
- }
1857
- .orb-ring--outer[data-v-e50d82a8] {
1858
- width: 22px;
1859
- height: 22px;
1860
- animation-delay: 0s;
1861
- }
1862
- .orb-ring--inner[data-v-e50d82a8] {
1863
- width: 16px;
1864
- height: 16px;
1865
- animation-delay: 0.6s;
1866
- }
1867
-
1868
- /* Core */
1869
- .orb-core[data-v-e50d82a8] {
1870
- position: relative;
1871
- width: 10px;
1872
- height: 10px;
1873
- border-radius: 50%;
1874
- transition:
1875
- transform 0.15s ease,
1876
- box-shadow 0.15s ease;
1877
- z-index: 1;
1878
- }
1879
- .health-orb:hover .orb-core[data-v-e50d82a8],
1880
- .health-orb--active .orb-core[data-v-e50d82a8] {
1881
- transform: scale(1.15);
1882
- }
1883
-
1884
- /* ── Status colours with brand accent ───────────────────────────────────────── */
1885
- .health-orb--good .orb-ring[data-v-e50d82a8] {
1886
- background: rgba(34, 197, 94, 0.25);
1887
- }
1888
- .health-orb--good .orb-core[data-v-e50d82a8] {
1889
- background: #22c55e;
1890
- box-shadow:
1891
- 0 0 0 2px rgba(34, 197, 94, 0.2),
1892
- 0 0 8px rgba(34, 197, 94, 0.4);
1893
- }
1894
- .health-orb--warn .orb-ring[data-v-e50d82a8] {
1895
- background: rgba(245, 158, 11, 0.28);
1896
- }
1897
- .health-orb--warn .orb-core[data-v-e50d82a8] {
1898
- background: #f59e0b;
1899
- box-shadow:
1900
- 0 0 0 2px rgba(245, 158, 11, 0.2),
1901
- 0 0 8px rgba(245, 158, 11, 0.4);
1902
- }
1903
- .health-orb--bad .orb-ring[data-v-e50d82a8] {
1904
- background: rgba(239, 68, 68, 0.28);
1905
- }
1906
- .health-orb--bad .orb-core[data-v-e50d82a8] {
1907
- background: #ef4444;
1908
- box-shadow:
1909
- 0 0 0 2px rgba(239, 68, 68, 0.2),
1910
- 0 0 8px rgba(239, 68, 68, 0.4);
1911
- }
1912
- @keyframes orb-pulse-e50d82a8 {
1913
- 0% {
1914
- transform: scale(0.6);
1915
- opacity: 0.7;
1916
- }
1917
- 60% {
1918
- transform: scale(1.6);
1919
- opacity: 0;
1920
- }
1921
- 100% {
1922
- transform: scale(1.6);
1923
- opacity: 0;
1924
- }
1925
- }
1926
-
1927
- /* ── Panel ────────────────────────────────────────────────────────────────── */
1928
- .health-panel[data-v-e50d82a8] {
1929
- position: absolute;
1930
- top: calc(100% + 10px);
1931
- left: 50%;
1932
- transform: translateX(-50%);
1933
- width: 300px;
1934
- background: #18181b;
1935
- border: 1px solid rgba(255, 255, 255, 0.08);
1936
- border-radius: 14px;
1937
- padding: 12px;
1938
- box-shadow:
1939
- 0 20px 60px rgba(0, 0, 0, 0.5),
1940
- 0 4px 12px rgba(0, 0, 0, 0.3);
1941
- z-index: 9999;
1942
- display: flex;
1943
- flex-direction: column;
1944
- gap: 8px;
1945
- /* Smooth horizontal expansion */
1946
- transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
1947
- }
1948
- .health-panel--expanded[data-v-e50d82a8] {
1949
- width: 400px;
1950
- }
1951
-
1952
- /* When expanded, stat grid uses 3 cols instead of 2 */
1953
- .health-panel--expanded .detail-stats[data-v-e50d82a8] {
1954
- grid-template-columns: repeat(3, 1fr);
1955
- }
1956
-
1957
- /* When expanded, accessibility list gets more vertical room */
1958
- .health-panel--expanded .a11y-list[data-v-e50d82a8] {
1959
- max-height: 320px;
1960
- }
1961
-
1962
- /* When expanded, format rows go side-by-side */
1963
- .health-panel--expanded .format-note[data-v-e50d82a8] {
1964
- display: grid;
1965
- grid-template-columns: repeat(3, 1fr);
1966
- gap: 6px;
1967
- }
1968
- .health-panel--expanded .format-row[data-v-e50d82a8] {
1969
- flex-direction: column;
1970
- align-items: flex-start;
1971
- gap: 4px;
1972
- }
1973
-
1974
- /* ── Panel header with brand color ─────────────────────────────────────────── */
1975
- .panel-header[data-v-e50d82a8] {
1976
- display: flex;
1977
- align-items: center;
1978
- justify-content: space-between;
1979
- padding: 0 2px 4px;
1980
- border-bottom: 1px solid rgba(255, 255, 255, 0.06);
1981
- }
1982
- .panel-header-right[data-v-e50d82a8] {
1983
- display: flex;
1984
- align-items: center;
1985
- gap: 6px;
1986
- }
1987
-
1988
- /* Expand toggle button */
1989
- .panel-expand-btn[data-v-e50d82a8] {
1990
- display: flex;
1991
- align-items: center;
1992
- justify-content: center;
1993
- width: 22px;
1994
- height: 22px;
1995
- border-radius: 6px;
1996
- border: 1px solid rgba(255, 255, 255, 0.08);
1997
- background: rgba(255, 255, 255, 0.04);
1998
- color: rgba(255, 255, 255, 0.35);
1999
- cursor: pointer;
2000
- transition:
2001
- background 0.15s ease,
2002
- color 0.15s ease,
2003
- border-color 0.15s ease;
2004
- flex-shrink: 0;
2005
- padding: 0;
2006
- }
2007
- .panel-expand-btn[data-v-e50d82a8]:hover {
2008
- background: rgba(66, 56, 158, 0.18);
2009
- border-color: rgba(66, 56, 158, 0.4);
2010
- color: #a5b4fc;
2011
- }
2012
- .panel-expand-btn[data-v-e50d82a8]:focus-visible {
2013
- outline: 2px solid rgba(66, 56, 158, 0.5);
2014
- outline-offset: 1px;
2015
- }
2016
- .panel-expand-btn--active[data-v-e50d82a8] {
2017
- background: rgba(66, 56, 158, 0.2);
2018
- border-color: rgba(66, 56, 158, 0.45);
2019
- color: #a5b4fc;
2020
- }
2021
- .panel-title[data-v-e50d82a8] {
2022
- font-size: 11px;
2023
- font-weight: 600;
2024
- letter-spacing: 0.06em;
2025
- text-transform: uppercase;
2026
- color: #a5b4fc;
2027
- }
2028
- .panel-status-badge[data-v-e50d82a8] {
2029
- font-size: 10px;
2030
- font-weight: 600;
2031
- padding: 2px 8px;
2032
- border-radius: 99px;
2033
- }
2034
- .status-badge--good[data-v-e50d82a8] {
2035
- background: rgba(34, 197, 94, 0.15);
2036
- color: #4ade80;
2037
- }
2038
- .status-badge--warn[data-v-e50d82a8] {
2039
- background: rgba(245, 158, 11, 0.15);
2040
- color: #fbbf24;
2041
- }
2042
- .status-badge--bad[data-v-e50d82a8] {
2043
- background: rgba(239, 68, 68, 0.15);
2044
- color: #f87171;
2045
- }
2046
-
2047
- /* ── Metric cards ─────────────────────────────────────────────────────────── */
2048
- .metric-card[data-v-e50d82a8] {
2049
- border-radius: 10px;
2050
- border: 1px solid rgba(255, 255, 255, 0.06);
2051
- background: rgba(255, 255, 255, 0.04);
2052
- cursor: pointer;
2053
- transition:
2054
- background 0.15s ease,
2055
- border-color 0.15s ease;
2056
- overflow: hidden;
2057
- user-select: none;
2058
- }
2059
- .metric-card[data-v-e50d82a8]:hover {
2060
- background: rgba(66, 56, 158, 0.1);
2061
- border-color: rgba(66, 56, 158, 0.3);
2062
- }
2063
- .metric-card[data-v-e50d82a8]:focus-visible {
2064
- outline: 2px solid rgba(66, 56, 158, 0.5);
2065
- outline-offset: 2px;
2066
- }
2067
- .metric-card--good[data-v-e50d82a8] {
2068
- border-color: rgba(34, 197, 94, 0.15);
2069
- }
2070
- .metric-card--warn[data-v-e50d82a8] {
2071
- border-color: rgba(245, 158, 11, 0.15);
2072
- }
2073
- .metric-card--bad[data-v-e50d82a8] {
2074
- border-color: rgba(239, 68, 68, 0.2);
2075
- }
2076
- .metric-card--good.metric-card--expanded[data-v-e50d82a8] {
2077
- background: rgba(34, 197, 94, 0.05);
2078
- }
2079
- .metric-card--warn.metric-card--expanded[data-v-e50d82a8] {
2080
- background: rgba(245, 158, 11, 0.05);
2081
- }
2082
- .metric-card--bad.metric-card--expanded[data-v-e50d82a8] {
2083
- background: rgba(239, 68, 68, 0.06);
2084
- }
2085
-
2086
- /* ── Summary row ──────────────────────────────────────────────────────────── */
2087
- .metric-summary[data-v-e50d82a8] {
2088
- display: flex;
2089
- align-items: center;
2090
- justify-content: space-between;
2091
- padding: 9px 10px;
2092
- gap: 8px;
2093
- }
2094
- .metric-left[data-v-e50d82a8] {
2095
- display: flex;
2096
- align-items: center;
2097
- gap: 7px;
2098
- min-width: 0;
2099
- }
2100
- .metric-icon[data-v-e50d82a8] {
2101
- display: flex;
2102
- align-items: center;
2103
- opacity: 0.8;
2104
- flex-shrink: 0;
2105
- }
2106
- .metric-label[data-v-e50d82a8] {
2107
- font-size: 11.5px;
2108
- font-weight: 500;
2109
- color: rgba(255, 255, 255, 0.7);
2110
- white-space: nowrap;
2111
- }
2112
- .metric-right[data-v-e50d82a8] {
2113
- display: flex;
2114
- align-items: center;
2115
- gap: 6px;
2116
- flex-shrink: 0;
2117
- }
2118
-
2119
- /* Mini bar */
2120
- .mini-bar[data-v-e50d82a8] {
2121
- width: 36px;
2122
- height: 4px;
2123
- border-radius: 99px;
2124
- background: rgba(255, 255, 255, 0.1);
2125
- overflow: hidden;
2126
- }
2127
- .mini-bar-fill[data-v-e50d82a8] {
2128
- height: 100%;
2129
- border-radius: 99px;
2130
- transition: width 0.5s ease;
2131
- }
2132
- .mini-bar-fill--good[data-v-e50d82a8] {
2133
- background: #22c55e;
2134
- }
2135
- .mini-bar-fill--warn[data-v-e50d82a8] {
2136
- background: #f59e0b;
2137
- }
2138
- .mini-bar-fill--bad[data-v-e50d82a8] {
2139
- background: #ef4444;
2140
- }
2141
-
2142
- /* Status dot */
2143
- .status-dot[data-v-e50d82a8] {
2144
- width: 6px;
2145
- height: 6px;
2146
- border-radius: 50%;
2147
- flex-shrink: 0;
2148
- }
2149
- .status-dot--good[data-v-e50d82a8] {
2150
- background: #22c55e;
2151
- }
2152
- .status-dot--warn[data-v-e50d82a8] {
2153
- background: #f59e0b;
2154
- }
2155
- .status-dot--bad[data-v-e50d82a8] {
2156
- background: #ef4444;
2157
- }
2158
-
2159
- /* Pulsing dot for bad status */
2160
- .pulse-dot[data-v-e50d82a8] {
2161
- position: relative;
2162
- width: 6px;
2163
- height: 6px;
2164
- flex-shrink: 0;
2165
- }
2166
- .pulse-dot[data-v-e50d82a8]::before,
2167
- .pulse-dot[data-v-e50d82a8]::after {
2168
- content: "";
2169
- position: absolute;
2170
- inset: 0;
2171
- border-radius: 50%;
2172
- }
2173
- .pulse-dot--bad[data-v-e50d82a8]::before {
2174
- background: #ef4444;
2175
- z-index: 1;
2176
- }
2177
- .pulse-dot--bad[data-v-e50d82a8]::after {
2178
- background: #ef4444;
2179
- animation: dot-ping-e50d82a8 1.5s ease-out infinite;
2180
- }
2181
- @keyframes dot-ping-e50d82a8 {
2182
- 0% {
2183
- transform: scale(1);
2184
- opacity: 0.75;
2185
- }
2186
- 100% {
2187
- transform: scale(2.5);
2188
- opacity: 0;
2189
- }
2190
- }
2191
- .metric-value[data-v-e50d82a8] {
2192
- font-size: 11.5px;
2193
- font-weight: 600;
2194
- font-variant-numeric: tabular-nums;
2195
- }
2196
- .metric-value--good[data-v-e50d82a8] {
2197
- color: #4ade80;
2198
- }
2199
- .metric-value--warn[data-v-e50d82a8] {
2200
- color: #fbbf24;
2201
- }
2202
- .metric-value--bad[data-v-e50d82a8] {
2203
- color: #f87171;
2204
- }
2205
-
2206
- /* Chevron */
2207
- .chevron[data-v-e50d82a8] {
2208
- color: rgba(255, 255, 255, 0.3);
2209
- transition:
2210
- transform 0.2s ease,
2211
- color 0.15s ease;
2212
- flex-shrink: 0;
2213
- }
2214
- .chevron--open[data-v-e50d82a8] {
2215
- transform: rotate(180deg);
2216
- color: rgba(255, 255, 255, 0.6);
2217
- }
2218
- .metric-card:hover .chevron[data-v-e50d82a8] {
2219
- color: rgba(255, 255, 255, 0.5);
2220
- }
2221
-
2222
- /* ── Expanded detail ──────────────────────────────────────────────────────── */
2223
- .metric-detail[data-v-e50d82a8] {
2224
- padding: 0 10px 10px;
2225
- display: flex;
2226
- flex-direction: column;
2227
- gap: 8px;
2228
- border-top: 1px solid rgba(255, 255, 255, 0.05);
2229
- }
2230
- .detail-tip[data-v-e50d82a8] {
2231
- font-size: 11px;
2232
- line-height: 1.55;
2233
- color: rgba(255, 255, 255, 0.55);
2234
- margin: 6px 0 0;
2235
- }
2236
-
2237
- /* Stats grid */
2238
- .detail-stats[data-v-e50d82a8] {
2239
- display: grid;
2240
- grid-template-columns: 1fr 1fr;
2241
- gap: 4px 12px;
2242
- }
2243
- .stat-item[data-v-e50d82a8] {
2244
- display: flex;
2245
- justify-content: space-between;
2246
- align-items: baseline;
2247
- gap: 6px;
2248
- }
2249
- .stat-label[data-v-e50d82a8] {
2250
- font-size: 10.5px;
2251
- color: rgba(255, 255, 255, 0.35);
2252
- white-space: nowrap;
2253
- }
2254
- .stat-value[data-v-e50d82a8] {
2255
- font-size: 11px;
2256
- font-weight: 600;
2257
- color: rgba(255, 255, 255, 0.75);
2258
- font-variant-numeric: tabular-nums;
2259
- }
2260
-
2261
- /* Thresholds */
2262
- .detail-thresholds[data-v-e50d82a8] {
2263
- display: flex;
2264
- flex-wrap: wrap;
2265
- gap: 4px;
2266
- padding-top: 4px;
2267
- border-top: 1px solid rgba(255, 255, 255, 0.05);
2268
- }
2269
- .threshold[data-v-e50d82a8] {
2270
- font-size: 10px;
2271
- font-weight: 500;
2272
- padding: 2px 7px;
2273
- border-radius: 99px;
2274
- }
2275
- .threshold--good[data-v-e50d82a8] {
2276
- background: rgba(34, 197, 94, 0.12);
2277
- color: #4ade80;
2278
- }
2279
- .threshold--warn[data-v-e50d82a8] {
2280
- background: rgba(245, 158, 11, 0.12);
2281
- color: #fbbf24;
2282
- }
2283
- .threshold--bad[data-v-e50d82a8] {
2284
- background: rgba(239, 68, 68, 0.12);
2285
- color: #f87171;
2286
- }
2287
-
2288
- /* ── Format note (KB card) ────────────────────────────────────────────────── */
2289
- .format-note[data-v-e50d82a8] {
2290
- display: flex;
2291
- flex-direction: column;
2292
- gap: 5px;
2293
- background: rgba(0, 0, 0, 0.2);
2294
- border-radius: 8px;
2295
- padding: 8px;
2296
- }
2297
- .format-row[data-v-e50d82a8] {
2298
- display: flex;
2299
- align-items: flex-start;
2300
- gap: 8px;
2301
- }
2302
- .format-badge[data-v-e50d82a8] {
2303
- font-size: 9.5px;
2304
- font-weight: 700;
2305
- letter-spacing: 0.05em;
2306
- padding: 2px 6px;
2307
- border-radius: 4px;
2308
- flex-shrink: 0;
2309
- margin-top: 1px;
2310
- background: rgba(66, 56, 158, 0.3);
2311
- color: #a5b4fc;
2312
- }
2313
- .format-badge--muted[data-v-e50d82a8] {
2314
- background: rgba(255, 255, 255, 0.07);
2315
- color: rgba(255, 255, 255, 0.35);
2316
- }
2317
- .format-info[data-v-e50d82a8] {
2318
- display: flex;
2319
- flex-direction: column;
2320
- gap: 2px;
2321
- min-width: 0;
2322
- }
2323
- .format-range[data-v-e50d82a8] {
2324
- font-size: 11px;
2325
- font-weight: 600;
2326
- color: rgba(255, 255, 255, 0.8);
2327
- }
2328
- .format-range--muted[data-v-e50d82a8] {
2329
- color: rgba(255, 255, 255, 0.35);
2330
- font-weight: 500;
2331
- }
2332
- .format-caveat[data-v-e50d82a8] {
2333
- font-size: 10px;
2334
- line-height: 1.4;
2335
- color: rgba(255, 255, 255, 0.35);
2336
- }
2337
-
2338
- /* ── Accessibility card ───────────────────────────────────────────────────── */
2339
- .a11y-detail[data-v-e50d82a8] {
2340
- cursor: default;
2341
- padding: 8px 10px 10px;
2342
- gap: 10px;
2343
- }
2344
-
2345
- /* Tabs */
2346
- .a11y-tabs[data-v-e50d82a8] {
2347
- display: grid;
2348
- grid-template-columns: repeat(3, 1fr);
2349
- gap: 4px;
2350
- background: rgba(0, 0, 0, 0.25);
2351
- padding: 3px;
2352
- border-radius: 8px;
2353
- }
2354
- .a11y-tab[data-v-e50d82a8] {
2355
- display: flex;
2356
- align-items: center;
2357
- justify-content: center;
2358
- gap: 6px;
2359
- padding: 6px 4px;
2360
- background: transparent;
2361
- border: none;
2362
- border-radius: 6px;
2363
- cursor: pointer;
2364
- font-family: inherit;
2365
- font-size: 10.5px;
2366
- font-weight: 600;
2367
- letter-spacing: 0.02em;
2368
- color: rgba(255, 255, 255, 0.45);
2369
- transition:
2370
- background 0.15s ease,
2371
- color 0.15s ease;
2372
- }
2373
- .a11y-tab[data-v-e50d82a8]:hover {
2374
- color: rgba(255, 255, 255, 0.75);
2375
- background: rgba(255, 255, 255, 0.04);
2376
- }
2377
- .a11y-tab[data-v-e50d82a8]:focus-visible {
2378
- outline: 2px solid rgba(66, 56, 158, 0.5);
2379
- outline-offset: 1px;
2380
- }
2381
- .a11y-tab--active[data-v-e50d82a8] {
2382
- background: rgba(255, 255, 255, 0.07);
2383
- color: rgba(255, 255, 255, 0.92);
2384
- }
2385
- .a11y-tab-label[data-v-e50d82a8] {
2386
- text-transform: uppercase;
2387
- }
2388
- .a11y-tab-count[data-v-e50d82a8] {
2389
- display: inline-flex;
2390
- align-items: center;
2391
- justify-content: center;
2392
- min-width: 18px;
2393
- height: 16px;
2394
- padding: 0 5px;
2395
- border-radius: 99px;
2396
- font-size: 10px;
2397
- font-weight: 700;
2398
- font-variant-numeric: tabular-nums;
2399
- line-height: 1;
2400
- }
2401
- .a11y-tab-count--failed[data-v-e50d82a8] {
2402
- background: rgba(239, 68, 68, 0.18);
2403
- color: #f87171;
2404
- }
2405
- .a11y-tab-count--passed[data-v-e50d82a8] {
2406
- background: rgba(34, 197, 94, 0.18);
2407
- color: #4ade80;
2408
- }
2409
- .a11y-tab-count--ignored[data-v-e50d82a8] {
2410
- background: rgba(255, 255, 255, 0.08);
2411
- color: rgba(255, 255, 255, 0.5);
2412
- }
2413
-
2414
- /* List */
2415
- .a11y-list[data-v-e50d82a8] {
2416
- display: flex;
2417
- flex-direction: column;
2418
- gap: 6px;
2419
- max-height: 240px;
2420
- overflow-y: auto;
2421
- /* Custom thin scrollbar */
2422
- scrollbar-width: thin;
2423
- scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
2424
- }
2425
- .a11y-list[data-v-e50d82a8]::-webkit-scrollbar {
2426
- width: 6px;
2427
- }
2428
- .a11y-list[data-v-e50d82a8]::-webkit-scrollbar-track {
2429
- background: transparent;
2430
- }
2431
- .a11y-list[data-v-e50d82a8]::-webkit-scrollbar-thumb {
2432
- background: rgba(255, 255, 255, 0.12);
2433
- border-radius: 99px;
2434
- }
2435
- .a11y-empty[data-v-e50d82a8] {
2436
- font-size: 11px;
2437
- color: rgba(255, 255, 255, 0.4);
2438
- text-align: center;
2439
- padding: 12px 4px;
2440
- margin: 0;
2441
- }
2442
- .a11y-item[data-v-e50d82a8] {
2443
- display: flex;
2444
- flex-direction: column;
2445
- gap: 4px;
2446
- padding: 8px;
2447
- border-radius: 8px;
2448
- background: rgba(255, 255, 255, 0.03);
2449
- border-left: 2px solid transparent;
2450
- }
2451
- .a11y-item--critical[data-v-e50d82a8] {
2452
- border-left-color: #ef4444;
2453
- }
2454
- .a11y-item--serious[data-v-e50d82a8] {
2455
- border-left-color: #f59e0b;
2456
- }
2457
- .a11y-item--passed[data-v-e50d82a8] {
2458
- border-left-color: rgba(34, 197, 94, 0.5);
2459
- }
2460
- .a11y-item--ignored[data-v-e50d82a8] {
2461
- border-left-color: rgba(255, 255, 255, 0.18);
2462
- opacity: 0.75;
2463
- }
2464
- .a11y-item-header[data-v-e50d82a8] {
2465
- display: flex;
2466
- align-items: center;
2467
- gap: 6px;
2468
- }
2469
- .a11y-severity[data-v-e50d82a8] {
2470
- display: inline-flex;
2471
- align-items: center;
2472
- font-size: 9px;
2473
- font-weight: 700;
2474
- text-transform: uppercase;
2475
- letter-spacing: 0.05em;
2476
- padding: 2px 6px;
2477
- border-radius: 4px;
2478
- flex-shrink: 0;
2479
- }
2480
- .a11y-severity--critical[data-v-e50d82a8] {
2481
- background: rgba(239, 68, 68, 0.18);
2482
- color: #f87171;
2483
- }
2484
- .a11y-severity--serious[data-v-e50d82a8] {
2485
- background: rgba(245, 158, 11, 0.18);
2486
- color: #fbbf24;
2487
- }
2488
- .a11y-severity--passed[data-v-e50d82a8] {
2489
- background: rgba(34, 197, 94, 0.18);
2490
- color: #4ade80;
2491
- }
2492
- .a11y-severity--ignored[data-v-e50d82a8] {
2493
- background: rgba(255, 255, 255, 0.07);
2494
- color: rgba(255, 255, 255, 0.5);
2495
- }
2496
- .a11y-rule[data-v-e50d82a8] {
2497
- font-size: 11px;
2498
- font-weight: 600;
2499
- color: rgba(255, 255, 255, 0.85);
2500
- flex: 1;
2501
- min-width: 0;
2502
- white-space: nowrap;
2503
- overflow: hidden;
2504
- text-overflow: ellipsis;
2505
- }
2506
- .a11y-action[data-v-e50d82a8] {
2507
- background: transparent;
2508
- border: 1px solid rgba(255, 255, 255, 0.1);
2509
- border-radius: 4px;
2510
- padding: 2px 7px;
2511
- font-family: inherit;
2512
- font-size: 9.5px;
2513
- font-weight: 600;
2514
- color: rgba(255, 255, 255, 0.5);
2515
- cursor: pointer;
2516
- transition:
2517
- background 0.15s ease,
2518
- color 0.15s ease,
2519
- border-color 0.15s ease;
2520
- flex-shrink: 0;
2521
- }
2522
- .a11y-action[data-v-e50d82a8]:hover {
2523
- background: rgba(255, 255, 255, 0.06);
2524
- color: rgba(255, 255, 255, 0.85);
2525
- border-color: rgba(255, 255, 255, 0.2);
2526
- }
2527
- .a11y-action[data-v-e50d82a8]:focus-visible {
2528
- outline: 2px solid rgba(66, 56, 158, 0.5);
2529
- outline-offset: 1px;
2530
- }
2531
- .a11y-action--restore[data-v-e50d82a8] {
2532
- border-color: rgba(165, 180, 252, 0.25);
2533
- color: #a5b4fc;
2534
- }
2535
- .a11y-action--restore[data-v-e50d82a8]:hover {
2536
- background: rgba(66, 56, 158, 0.15);
2537
- border-color: rgba(165, 180, 252, 0.4);
2538
- color: #c7d2fe;
2539
- }
2540
- .a11y-message[data-v-e50d82a8] {
2541
- font-size: 10.5px;
2542
- line-height: 1.5;
2543
- color: rgba(255, 255, 255, 0.65);
2544
- margin: 0;
2545
- }
2546
- .a11y-info[data-v-e50d82a8] {
2547
- font-size: 10px;
2548
- line-height: 1.5;
2549
- color: rgba(255, 255, 255, 0.38);
2550
- margin: 0;
2551
- padding-top: 2px;
2552
- border-top: 1px dashed rgba(255, 255, 255, 0.06);
2553
- }
2554
-
2555
- /* ── Panel footer ─────────────────────────────────────────────────────────── */
2556
- .panel-footer[data-v-e50d82a8] {
2557
- font-size: 10px;
2558
- color: rgba(255, 255, 255, 0.22);
2559
- text-align: center;
2560
- padding-top: 4px;
2561
- margin: 0;
2562
- }
2563
-
2564
- /* ── Click-outside overlay ────────────────────────────────────────────────── */
2565
- .click-outside[data-v-e50d82a8] {
2566
- position: fixed;
2567
- inset: 0;
2568
- z-index: 9998;
2569
- }
2570
-
2571
- /* ── Transitions ──────────────────────────────────────────────────────────── */
2572
- .popover-enter-active[data-v-e50d82a8] {
2573
- transition:
2574
- opacity 0.18s ease,
2575
- transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
2576
- }
2577
- .popover-leave-active[data-v-e50d82a8] {
2578
- transition:
2579
- opacity 0.12s ease,
2580
- transform 0.12s ease;
2581
- }
2582
- .popover-enter-from[data-v-e50d82a8] {
2583
- opacity: 0;
2584
- transform: translateX(-50%) translateY(-6px) scale(0.97);
2585
- }
2586
- .popover-leave-to[data-v-e50d82a8] {
2587
- opacity: 0;
2588
- transform: translateX(-50%) translateY(-4px) scale(0.98);
2589
- }
2590
- .expand-enter-active[data-v-e50d82a8] {
2591
- transition:
2592
- opacity 0.18s ease,
2593
- max-height 0.22s ease;
2594
- max-height: 300px;
2595
- overflow: hidden;
2596
- }
2597
- .expand-leave-active[data-v-e50d82a8] {
2598
- transition:
2599
- opacity 0.12s ease,
2600
- max-height 0.18s ease;
2601
- overflow: hidden;
2602
- }
2603
- .expand-enter-from[data-v-e50d82a8] {
2604
- opacity: 0;
2605
- max-height: 0;
2606
- }
2607
- .expand-leave-to[data-v-e50d82a8] {
2608
- opacity: 0;
2609
- max-height: 0;
2610
- }
2611
-
2612
- .picker-overlay-enter-active[data-v-769fdd18],
2613
- .picker-overlay-leave-active[data-v-769fdd18] {
2614
- transition: opacity 0.2s ease;
2615
- }
2616
- .picker-overlay-enter-from[data-v-769fdd18],
2617
- .picker-overlay-leave-to[data-v-769fdd18] {
2618
- opacity: 0;
2619
- }
2620
- .picker-drawer-enter-active[data-v-769fdd18],
2621
- .picker-drawer-leave-active[data-v-769fdd18] {
2622
- transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
2623
- }
2624
- .picker-drawer-enter-from[data-v-769fdd18],
2625
- .picker-drawer-leave-to[data-v-769fdd18] {
2626
- transform: translateX(100%);
2627
- }
2628
-
2629
- .note-enter-active[data-v-3767ab19],
2630
- .note-leave-active[data-v-3767ab19] {
2631
- transition:
2632
- opacity 0.2s ease,
2633
- max-height 0.25s ease;
2634
- max-height: 60px;
2635
- overflow: hidden;
2636
- }
2637
- .note-enter-from[data-v-3767ab19],
2638
- .note-leave-to[data-v-3767ab19] {
2639
- opacity: 0;
2640
- max-height: 0;
2641
- }
2642
-
2643
- .md-msg[data-v-c41482a2] {
2644
- display: flex;
2645
- align-items: flex-start;
2646
- gap: 0.5rem;
2647
- padding: 0.625rem 0.75rem;
2648
- font-size: 13px;
2649
- border: 1px solid;
2650
- border-radius: 0.5rem;
2651
- }
2652
- .md-msg__icon[data-v-c41482a2] {
2653
- margin-top: 0.125rem;
2654
- flex-shrink: 0;
2655
- font-size: 14px;
2656
- }
2657
- .md-msg__body[data-v-c41482a2] {
2658
- flex: 1;
2659
- min-width: 0;
2660
- }
2661
- .md-msg__close[data-v-c41482a2] {
2662
- opacity: 0.6;
2663
- cursor: pointer;
2664
- background: none;
2665
- border: 0;
2666
- }
2667
- .md-msg__close[data-v-c41482a2]:hover {
2668
- opacity: 1;
2669
- }
2670
- .md-msg--info[data-v-c41482a2] {
2671
- background: var(--md-info-bg);
2672
- border-color: var(--md-info-border);
2673
- color: var(--md-info-fg);
2674
- }
2675
- .md-msg--success[data-v-c41482a2] {
2676
- background: var(--md-success-bg);
2677
- border-color: var(--md-success-border);
2678
- color: var(--md-success-fg);
2679
- }
2680
- .md-msg--warn[data-v-c41482a2] {
2681
- background: var(--md-surface) beb;
2682
- border-color: var(--md-warning-border);
2683
- color: var(--md-warning-fg);
2684
- }
2685
- .md-msg--error[data-v-c41482a2] {
2686
- background: var(--md-danger-bg);
2687
- border-color: var(--md-danger-border);
2688
- color: var(--md-danger-fg);
2689
- }
2690
-
2691
- /* Auto-save pill: fade + 4px vertical drift on enter/leave */
2692
- .autosave-fade-enter-active[data-v-26ac5f8e],
2693
- .autosave-fade-leave-active[data-v-26ac5f8e] {
2694
- transition:
2695
- opacity 0.2s ease,
2696
- transform 0.2s ease;
2697
- }
2698
- .autosave-fade-enter-from[data-v-26ac5f8e] {
2699
- opacity: 0;
2700
- transform: translateY(4px);
2701
- }
2702
- .autosave-fade-leave-to[data-v-26ac5f8e] {
2703
- opacity: 0;
2704
- transform: translateY(-4px);
2705
- }
2706
-
2707
- .md-assistant-fab[data-v-e3d36e68] {
2708
- position: fixed;
2709
- right: 1.25rem;
2710
- bottom: 1.25rem;
2711
- /* Above the panels (z-80) and the header (z-100), below dialogs (9998) —
2712
- a modal dialog must still cover this. */
2713
- z-index: 120;
2714
- display: flex;
2715
- align-items: center;
2716
- justify-content: center;
2717
- width: 2.75rem;
2718
- height: 2.75rem;
2719
- border-radius: 9999px;
2720
- border: 1px solid var(--md-border);
2721
- background: var(--md-button-primary-bg, var(--md-primary));
2722
- color: var(--md-button-primary-text, var(--md-surface));
2723
- box-shadow: 0 2px 10px rgb(0 0 0 / 18%);
2724
- cursor: pointer;
2725
- transition:
2726
- transform 0.15s ease,
2727
- box-shadow 0.15s ease;
2728
- }
2729
- .md-assistant-fab[data-v-e3d36e68]:hover {
2730
- transform: translateY(-1px);
2731
- box-shadow: 0 4px 14px rgb(0 0 0 / 22%);
2732
- }
2733
- .md-assistant-fab[data-v-e3d36e68]:focus-visible {
2734
- outline: 2px solid var(--md-primary);
2735
- outline-offset: 2px;
2736
- }
2737
- .md-assistant-drawer[data-v-e3d36e68] {
2738
- position: fixed;
2739
- top: 4rem; /* clears the header */
2740
- right: 0;
2741
- bottom: 0;
2742
- z-index: 120;
2743
- width: 22rem;
2744
- max-width: 100vw;
2745
- display: flex;
2746
- flex-direction: column;
2747
- background: var(--md-surface);
2748
- border-left: 1px solid var(--md-border);
2749
- box-shadow: -8px 0 24px rgb(0 0 0 / 10%);
2750
- }
2751
- .md-assistant-head[data-v-e3d36e68] {
2752
- flex-shrink: 0;
2753
- display: flex;
2754
- align-items: center;
2755
- justify-content: space-between;
2756
- padding: 0.75rem 0.875rem;
2757
- border-bottom: 1px solid color-mix(in srgb, var(--md-border) 80%, transparent);
2758
- }
2759
- .md-assistant-title[data-v-e3d36e68] {
2760
- font-size: 11px;
2761
- font-weight: 600;
2762
- letter-spacing: 0.08em;
2763
- text-transform: uppercase;
2764
- color: var(--md-text-subtle);
2765
- }
2766
- .md-assistant-close[data-v-e3d36e68] {
2767
- display: flex;
2768
- align-items: center;
2769
- justify-content: center;
2770
- width: 1.5rem;
2771
- height: 1.5rem;
2772
- border-radius: 0.375rem;
2773
- color: var(--md-text-subtle);
2774
- background: transparent;
2775
- border: 0;
2776
- cursor: pointer;
2777
- }
2778
- .md-assistant-close[data-v-e3d36e68]:hover {
2779
- color: var(--md-text-muted);
2780
- background: var(--md-surface-muted);
2781
- }
2782
-
2783
- /* The only scroll container, matching the side panels' single-overflow rule. */
2784
- .md-assistant-body[data-v-e3d36e68] {
2785
- flex: 1 1 auto;
2786
- overflow-y: auto;
2787
- padding: 0.75rem;
2788
- }
2789
- .md-assistant-body[data-v-e3d36e68]::-webkit-scrollbar {
2790
- width: 6px;
2791
- }
2792
- .md-assistant-body[data-v-e3d36e68]::-webkit-scrollbar-track {
2793
- background: transparent;
2794
- }
2795
- .md-assistant-body[data-v-e3d36e68]::-webkit-scrollbar-thumb {
2796
- background: var(--md-border-strong);
2797
- border-radius: 9999px;
2798
- }
2799
- .assistant-slide-enter-active[data-v-e3d36e68],
2800
- .assistant-slide-leave-active[data-v-e3d36e68] {
2801
- transition:
2802
- opacity 0.18s ease,
2803
- transform 0.18s ease;
2804
- }
2805
- .assistant-slide-enter-from[data-v-e3d36e68],
2806
- .assistant-slide-leave-to[data-v-e3d36e68] {
2807
- opacity: 0;
2808
- transform: translateX(12px);
2809
- }
1
+ .md-input[data-v-94ca4419]{width:100%;color:var(--md-text);background:var(--md-surface);border:1px solid var(--md-border);border-radius:.375rem;outline:none;padding:.325rem .625rem;font-size:13px;line-height:1.25rem;transition:border-color .15s,box-shadow .15s}.md-input[data-v-94ca4419]::placeholder{color:var(--md-text-subtle)}.md-input[data-v-94ca4419]:focus{border-color:var(--md-primary)}.md-input[data-v-94ca4419]:disabled{background:var(--md-surface-hover);color:var(--md-text-subtle);cursor:not-allowed}.md-input--invalid[data-v-94ca4419]{border-color:var(--md-danger)}.md-input--invalid[data-v-94ca4419]:focus{border-color:var(--md-danger);box-shadow:0 0 0 1px var(--md-danger)}.md-sel__anchor{box-sizing:border-box;background:var(--md-surface);border:1px solid var(--md-border);width:100%;min-height:32px;color:var(--md-text);border-radius:.375rem;align-items:center;gap:.25rem;padding:0 .375rem 0 .5rem;font-size:13px;display:flex}.md-sel__anchor:focus-within,.md-sel__anchor--open{border-color:var(--md-primary)}.md-sel__anchor--disabled{background:var(--md-surface-hover);color:var(--md-text-subtle)}.md-sel__input{box-sizing:border-box;width:100%;min-width:0;color:var(--md-text);background:0 0;border:0;outline:none;flex:1;padding:.375rem 0;font-family:inherit;font-size:13px;line-height:1.25rem}.md-sel__input::placeholder{color:var(--md-text-subtle)}.md-sel__triggerText{box-sizing:border-box;cursor:pointer;min-width:0;color:var(--md-text);text-align:left;text-overflow:ellipsis;white-space:nowrap;background:0 0;border:0;outline:none;flex:1;padding:.375rem 0;font-family:inherit;font-size:13px;overflow:hidden}.md-sel__ph{color:var(--md-text-subtle)}.md-sel__chev{cursor:pointer;width:20px;height:20px;color:var(--md-text-muted);background:0 0;border:0;outline:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:transform .15s,color .15s;display:inline-flex}.md-sel__chev--open{color:var(--md-text);transform:rotate(180deg)}.md-sel__content{z-index:999999;width:var(--reka-combobox-trigger-width);box-sizing:border-box;background:var(--md-surface);border:1px solid var(--md-border);border-radius:.5rem;min-width:180px;max-width:320px;position:relative;overflow:hidden;box-shadow:0 10px 15px -3px #0000001f,0 4px 6px -4px #0000001f}.md-sel__viewport{box-sizing:border-box;background:var(--md-surface);width:100%;max-height:240px;padding:4px;overflow:hidden auto}.md-sel__empty{box-sizing:border-box;background:var(--md-surface);width:100%;color:var(--md-text-subtle);text-align:center;padding:8px;font-family:inherit;font-size:12px;display:block}.md-sel__item{box-sizing:border-box;background:var(--md-surface);width:100%;min-height:32px;color:var(--md-text);cursor:pointer;-webkit-user-select:none;user-select:none;border:0;border-radius:6px;outline:none;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;font-family:inherit;font-size:13px;line-height:18px;display:flex}.md-sel__item:hover,.md-sel__item[data-highlighted]{background:var(--md-surface-muted)}.md-sel__item[data-state=checked]{background:var(--md-success-bg);color:var(--md-success-fg);font-weight:500}.md-sel__item[data-state=checked][data-highlighted]{background:color-mix(in srgb, var(--md-success) 20%, var(--md-success-bg))}.md-sel__itemLabel{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.md-sel__check{color:currentColor;flex-shrink:0;justify-content:center;align-items:center;width:16px;height:16px;font-size:12px;display:inline-flex}.section-fade-enter-active[data-v-bb838abe],.section-fade-leave-active[data-v-bb838abe]{transition:opacity .15s,transform .15s}.section-fade-enter-from[data-v-bb838abe],.section-fade-leave-to[data-v-bb838abe]{opacity:0;transform:translateY(-3px)}.transparent-swatch[data-v-fad96f2e],.transparent-swatch[data-v-7373b74d]{background-color:#fff;background-image:linear-gradient(45deg,#ccc 25%,#0000 25%),linear-gradient(-45deg,#ccc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ccc 75%),linear-gradient(-45deg,#0000 75%,#ccc 75%);background-position:0 0,0 3px,3px -3px,-3px 0;background-size:6px 6px}.md-dp__field{box-sizing:border-box;background:var(--md-surface);border:1px solid var(--md-border);width:100%;min-height:32px;color:var(--md-text);border-radius:.375rem;align-items:center;gap:.0625rem;padding:.375rem .375rem .375rem .5rem;font-family:inherit;font-size:13px;display:flex}.md-dp__field:focus-within{border-color:var(--md-primary);box-shadow:0 0 0 1px var(--md-primary)}.md-dp__seg{border-radius:.125rem;outline:none;padding:0 .0625rem;font-family:inherit;font-size:13px}.md-dp__seg:focus{background:var(--md-primary);color:var(--md-surface)}.md-dp__seg[data-placeholder],.md-dp__lit{color:var(--md-text-subtle)}.md-dp__trigger{cursor:pointer;width:20px;height:20px;color:var(--md-text-subtle);background:0 0;border:0;flex-shrink:0;justify-content:center;align-items:center;margin-left:auto;padding:.125rem;font-size:11px;display:inline-flex}.md-dp__trigger:hover{color:var(--md-text-muted)}.md-dp__content{z-index:999999;box-sizing:border-box;background:var(--md-surface);border:1px solid var(--md-border);border-radius:.625rem;padding:.625rem;box-shadow:0 10px 15px -3px #0000001f,0 4px 6px -4px #0000001f}.md-dp__cal{width:max-content}.md-dp__header{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.md-dp__heading{color:var(--md-text);font-family:inherit;font-size:13px;font-weight:600}.md-dp__nav{cursor:pointer;width:24px;height:24px;color:var(--md-text-muted);background:0 0;border:0;border-radius:.25rem;justify-content:center;align-items:center;padding:.25rem;font-size:12px;display:inline-flex}.md-dp__nav:hover{background:var(--md-surface-muted);color:var(--md-text)}.md-dp__nav:disabled{opacity:.4;cursor:default}.md-dp__grid{border-collapse:collapse;width:100%}.md-dp__row{display:flex}.md-dp__headCell{width:32px;height:28px;color:var(--md-text-subtle);justify-content:center;align-items:center;font-family:inherit;font-size:11px;font-weight:500;display:inline-flex}.md-dp__day{width:32px;height:30px;color:var(--md-text);cursor:pointer;background:0 0;border:0;border-radius:.3125rem;outline:none;justify-content:center;align-items:center;padding:0;font-family:inherit;font-size:12px;transition:background .1s,color .1s;display:inline-flex}.md-dp__day:hover{background:var(--md-surface-muted)}.md-dp__day:focus-visible{outline:2px solid var(--md-primary);outline-offset:-2px}.md-dp__day[data-selected]{background:var(--md-primary);color:var(--md-surface);font-weight:600}.md-dp__day[data-selected]:hover{background:var(--md-primary)}.md-dp__day[data-today]:not([data-selected]){color:var(--md-primary);font-weight:700}.md-dp__day[data-outside-view]{color:var(--md-border-strong)}.md-dp__day[data-disabled]{color:var(--md-border-strong);cursor:default}.md-dp__day[data-disabled]:hover{background:0 0}.rules-scroll[data-v-3e175668]{-webkit-overflow-scrolling:touch;max-width:100%;overflow-x:auto}.rules-scroll[data-v-3e175668]::-webkit-scrollbar{height:6px}.rules-scroll[data-v-3e175668]::-webkit-scrollbar-track{background:var(--md-surface-muted);border-radius:4px}.rules-scroll[data-v-3e175668]::-webkit-scrollbar-thumb{background:var(--md-border-strong);border-radius:4px}.rules-scroll[data-v-3e175668]::-webkit-scrollbar-thumb:hover{background:var(--md-text-subtle)}.toggle-btn[data-v-26c04ac4]{cursor:pointer;background:0 0;border:.5px solid #0000;border-radius:6px;outline:none;justify-content:center;align-items:center;height:28px;padding:0;transition:background .1s,border-color .1s,color .1s;display:flex}.toggle-btn[data-v-26c04ac4]:focus-visible{box-shadow:0 0 0 2px var(--md-selection)}.toggle-btn--idle[data-v-26c04ac4]{border-color:var(--md-border);color:var(--md-text-subtle)}.toggle-btn--idle[data-v-26c04ac4]:hover{background:var(--md-surface-hover);border-color:var(--md-border-strong)}.toggle-btn--active[data-v-26c04ac4]{background:var(--md-selection-bg);border-color:var(--md-selection);color:var(--md-selection-fg)}.toggle-btn--active[data-v-26c04ac4]:hover{background:color-mix(in srgb, var(--md-selection) 20%, var(--md-selection-bg))}.md-btn[data-v-e13a23ac]{cursor:pointer;border:1px solid #0000;border-radius:.375rem;justify-content:center;align-items:center;gap:.375rem;padding:.5rem .875rem;font-size:13px;font-weight:500;transition:background-color .15s,border-color .15s,opacity .15s;display:inline-flex}.md-btn[data-v-e13a23ac]:disabled{opacity:.55;cursor:not-allowed}.md-btn--primary[data-v-e13a23ac]{background:var(--md-button-primary-bg);color:var(--md-button-primary-text)}.md-btn--primary[data-v-e13a23ac]:not(:disabled):hover{background:var(--md-button-primary-hover-bg)}.md-btn--secondary[data-v-e13a23ac]{background:var(--md-button-secondary-bg);color:var(--md-button-secondary-text);border-color:var(--md-border)}.md-btn--secondary[data-v-e13a23ac]:not(:disabled):hover{background:var(--md-button-secondary-hover-bg)}.md-btn--danger[data-v-e13a23ac]{background:var(--md-danger);color:var(--md-on-danger)}.md-btn--danger[data-v-e13a23ac]:not(:disabled):hover{filter:brightness(.94)}.md-btn--success[data-v-e13a23ac]{background:var(--md-success);color:var(--md-surface)}.md-dialog__overlay[data-v-2491daae]{z-index:9998;background:#0006;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.md-dialog[data-v-2491daae]{background:var(--md-surface);border-radius:.75rem;outline:none;flex-direction:column;width:420px;max-width:100%;max-height:calc(100vh - 2rem);display:flex;box-shadow:0 20px 60px #00000040}.md-dialog__header[data-v-2491daae]{justify-content:space-between;align-items:center;gap:1rem;padding:1.125rem 1.25rem .5rem;display:flex}.md-dialog__header--noTitle[data-v-2491daae]{justify-content:flex-end}.md-dialog__title[data-v-2491daae]{color:var(--md-text);margin:0;font-size:17px;font-weight:600}.md-dialog__close[data-v-2491daae]{color:var(--md-text-subtle);cursor:pointer;background:0 0;border:0;border-radius:.25rem;padding:.25rem;display:inline-flex}.md-dialog__close[data-v-2491daae]:hover{color:var(--md-text);background:var(--md-surface-muted)}.md-dialog__body[data-v-2491daae]{color:var(--md-text);padding:.5rem 1.25rem 1.25rem;font-size:14px;overflow-y:auto}.md-dialog__footer[data-v-2491daae]{justify-content:flex-end;gap:.5rem;padding:0 1.25rem 1.25rem;display:flex}.md-dialog__srOnly[data-v-2491daae]{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}[data-v-7facc7e8] a{color:#2563eb;cursor:pointer}[data-v-7facc7e8] a:not([style*=text-decoration]){text-decoration:underline}[data-v-7facc7e8] a:hover{opacity:.8}[data-v-7facc7e8] .merge-tag-node{white-space:nowrap;vertical-align:baseline;cursor:default;border-radius:3px;padding:0 2px;display:inline}[data-v-7facc7e8] li:not(:last-child){margin-bottom:var(--list-item-spacing,.25rem)}.toolbar-font-select[data-v-7facc7e8] .p-select{border-color:var(--md-toolbar-border);border-radius:6px;align-items:center;min-width:110px;max-width:130px;height:28px;padding:0 6px;font-size:.75rem;display:flex}.toolbar-font-select[data-v-7facc7e8] .p-select-label{padding:0;font-size:.85rem;line-height:1}.toolbar-font-select[data-v-7facc7e8] .p-select-dropdown{width:20px}[data-v-7facc7e8] .p-select-overlay{min-width:180px!important}.toggle-btn[data-v-b01eaed8]{cursor:pointer;background:0 0;border:.5px solid #0000;border-radius:6px;outline:none;justify-content:center;align-items:center;height:28px;padding:0;transition:background .1s,border-color .1s,color .1s;display:flex}.toggle-btn--idle[data-v-b01eaed8]{border-color:color-mix(in srgb, var(--md-border) 80%, transparent);color:var(--md-text-subtle)}.toggle-btn--idle[data-v-b01eaed8]:hover{background:var(--md-surface-hover);border-color:var(--md-border-strong);color:var(--md-text-muted)}.toggle-btn--active[data-v-b01eaed8]{background:var(--md-selection-bg);border-color:var(--md-selection);color:var(--md-selection-fg)}.toggle-btn--active[data-v-b01eaed8]:hover{background:color-mix(in srgb, var(--md-selection) 20%, var(--md-selection-bg))}.panel[data-v-f8eef947]{background:var(--md-surface);border:.5px solid color-mix(in srgb, var(--md-border) 80%, transparent);border-radius:10px;padding:10px 12px}.separator[data-v-f8eef947]{background:color-mix(in srgb, var(--md-border) 80%, transparent);height:.5px;margin-left:-12px;margin-right:-12px}.spinner[data-v-8a2d8f31]{border:5px solid #0003;border-top-color:var(--md-selection);border-radius:50%;width:50px;height:50px;margin:0 auto;animation:1s linear infinite spin-8a2d8f31}@keyframes spin-8a2d8f31{to{transform:rotate(360deg)}}.desktop-gate[data-v-ac364a19]{--brand-primary:var(--md-primary,var(--md-primary));--brand-primary-dark:var(--md-primary-hover,var(--md-primary-hover));--brand-primary-light:var(--md-primary-hover,var(--md-primary-hover));--brand-gradient-start:var(--md-primary,var(--md-primary));--brand-gradient-end:var(--md-primary-hover,var(--md-primary-hover));--gate-surface:var(--md-surface,var(--md-surface));--gate-backdrop:var(--md-background,var(--md-surface-hover));--gate-on-primary:var(--md-on-primary,var(--md-surface));--gate-warning:var(--md-warning,var(--md-warning));--gray-50:var(--md-background,var(--md-surface-hover));--gray-100:var(--md-surface-muted,var(--md-surface-muted));--gray-200:var(--md-border,var(--md-border));--gray-300:var(--md-border-strong,var(--md-border-strong));--gray-400:var(--md-text-subtle,var(--md-text-subtle));--gray-500:var(--md-text-subtle,var(--md-text-muted));--gray-600:var(--md-text-muted,var(--md-text-muted));--gray-700:var(--md-text-muted,var(--md-text-muted));--gray-800:var(--md-text,var(--md-text));--gray-900:var(--md-text,var(--md-text));--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--shadow-2xl:0 25px 50px -12px #00000040;z-index:9999;background:color-mix(in srgb, var(--gate-backdrop) 98%, transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.gate-container[data-v-ac364a19]{background:var(--gate-surface);text-align:center;width:100%;max-width:520px;box-shadow:var(--shadow-2xl);border:1px solid var(--gray-200);border-radius:2rem;padding:2.5rem;animation:.5s cubic-bezier(.16,1,.3,1) fadeInUp-ac364a19}.brand-badge[data-v-ac364a19]{justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 1.5rem;display:flex;position:relative}.badge-ring[data-v-ac364a19]{background:linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end));border-radius:50%;animation:2s ease-out infinite pulseRing-ac364a19;position:absolute;inset:0}.badge-icon[data-v-ac364a19]{background:var(--gate-surface);width:56px;height:56px;color:var(--brand-primary);box-shadow:var(--shadow-md);border-radius:50%;justify-content:center;align-items:center;transition:transform .2s;display:flex;position:relative}.gate-container:hover .badge-icon[data-v-ac364a19]{transform:scale(1.02)}.gate-title[data-v-ac364a19]{letter-spacing:-.02em;color:var(--gray-900);margin:0 0 1rem;font-size:1.875rem;font-weight:700}.brand-gradient[data-v-ac364a19]{background:linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end));color:#0000;-webkit-background-clip:text;background-clip:text}.gate-description[data-v-ac364a19]{color:var(--gray-600);margin:0 0 1.75rem;font-size:1rem;line-height:1.5}.feature-grid[data-v-ac364a19]{border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200);justify-content:center;gap:2rem;margin-bottom:2rem;padding:1rem 0;display:flex}.feature-item[data-v-ac364a19]{color:var(--gray-700);flex-direction:column;align-items:center;gap:.5rem;font-size:.75rem;font-weight:500;display:flex}.feature-icon[data-v-ac364a19]{background:var(--gray-100);width:36px;height:36px;color:var(--brand-primary);border-radius:12px;justify-content:center;align-items:center;transition:all .2s;display:flex}.feature-item:hover .feature-icon[data-v-ac364a19]{background:var(--brand-primary);color:var(--gate-on-primary);transform:translateY(-2px)}.detection-status[data-v-ac364a19]{background:var(--gray-100);color:var(--gray-600);border-radius:100px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.75rem;font-weight:500;display:inline-flex}.status-dot[data-v-ac364a19]{background:var(--gate-warning);border-radius:50%;width:8px;height:8px;animation:1.5s ease-out infinite pulse-ac364a19}.gate-footer[data-v-ac364a19]{color:var(--gray-400);justify-content:center;align-items:center;gap:.5rem;margin-top:2rem;padding-top:1.5rem;font-size:.75rem;display:flex}.brand-text[data-v-ac364a19]{background:linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end));color:#0000;-webkit-background-clip:text;background-clip:text;font-weight:600}@keyframes fadeInUp-ac364a19{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulseRing-ac364a19{0%{opacity:1;transform:scale(.95)}70%{opacity:.4;transform:scale(1.15)}to{opacity:0;transform:scale(1.25)}}@keyframes pulse-ac364a19{0%,to{opacity:1}50%{opacity:.4}}@media (width<=480px){.gate-container[data-v-ac364a19]{padding:2rem 1.5rem}.gate-title[data-v-ac364a19]{font-size:1.5rem}.feature-grid[data-v-ac364a19]{gap:1.25rem}}.row-drop-bar[data-v-0e09bbe4]{background:color-mix(in srgb, var(--drop-color) 5%, transparent);z-index:20;pointer-events:none;border-radius:6px;align-items:center;gap:8px;height:28px;padding:0 16px;display:flex;position:absolute;left:0;right:0}.row-drop-bar--before[data-v-0e09bbe4]{top:-14px}.row-drop-bar--after[data-v-0e09bbe4]{bottom:-14px}.row-drop-bar-line[data-v-0e09bbe4]{background:color-mix(in srgb, var(--drop-color) 50%, transparent);border-radius:2px;flex:1;height:2px}.row-drop-bar-label[data-v-0e09bbe4]{color:var(--drop-color);white-space:nowrap;background:color-mix(in srgb, var(--drop-color) 10%, transparent);border:1px solid color-mix(in srgb, var(--drop-color) 30%, transparent);border-radius:24px;align-items:center;gap:6px;padding:4px 12px;font-size:11px;font-weight:500;display:flex}.row-drop-bar-icon[data-v-0e09bbe4]{flex-shrink:0;width:12px;height:12px}.fade-enter-active[data-v-557d7319],.fade-leave-active[data-v-557d7319]{transition:opacity .1s}.fade-enter-from[data-v-557d7319],.fade-leave-to[data-v-557d7319]{opacity:0}.canvas-column[data-v-557d7319]{z-index:1;position:relative}.canvas-column.has-selected-child[data-v-557d7319]{z-index:auto}.canvas-drop-zone[data-v-cb66bb52]{z-index:9;height:0;margin:0;transition:height .2s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:visible}.canvas-drop-zone--active[data-v-cb66bb52]{height:52px}.canvas-drop-zone--empty[data-v-cb66bb52]{height:100%;min-height:200px}.canvas-drop-zone--full[data-v-cb66bb52]{height:auto;min-height:100%;position:absolute;inset:0}.canvas-drop-zone--empty .cdz-bar[data-v-cb66bb52]{border-radius:12px;justify-content:center;inset:12px}.cdz-empty-state[data-v-cb66bb52]{pointer-events:none;background:linear-gradient(135deg, color-mix(in srgb, var(--md-row-selection) 4%, var(--md-surface)) 0%, color-mix(in srgb, var(--md-row-selection) 8%, var(--md-surface)) 100%);border:2px dashed color-mix(in srgb, var(--md-row-selection) 22%, var(--md-surface));border-radius:6px;justify-content:center;align-items:center;transition:all .2s;display:flex;position:absolute;inset:0}.canvas-drop-zone--full .cdz-empty-state[data-v-cb66bb52]{animation:.3s fade-in-cb66bb52}@keyframes fade-in-cb66bb52{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.cdz-empty-content[data-v-cb66bb52]{text-align:center;padding:2rem}.cdz-empty-icon[data-v-cb66bb52]{width:48px;height:48px;color:var(--md-text-subtle);stroke-width:1.5px;margin:0 auto 12px}.cdz-empty-title[data-v-cb66bb52]{color:var(--md-selection-fg);letter-spacing:-.01em;margin-bottom:8px;font-size:1.125rem;font-weight:500}.cdz-empty-subtitle[data-v-cb66bb52]{color:var(--md-text-subtle);font-size:.875rem;line-height:1.4}.cdz-hit-area[data-v-cb66bb52]{z-index:1;pointer-events:none;position:absolute;inset:-4px 0}.canvas-drop-zone--receptive .cdz-hit-area[data-v-cb66bb52]{pointer-events:all}.canvas-drop-zone--full.canvas-drop-zone--receptive .cdz-empty-state[data-v-cb66bb52],.canvas-drop-zone--full.canvas-drop-zone--active .cdz-empty-state[data-v-cb66bb52]{opacity:.5;background:color-mix(in srgb, var(--md-row-selection) 4%, transparent)}.cdz-ghost-line[data-v-cb66bb52]{background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--md-row-selection) 25%, transparent) 0px, color-mix(in srgb, var(--md-row-selection) 25%, transparent) 6px, transparent 6px, transparent 12px);pointer-events:none;border-radius:2px;height:2px;animation:2s ease-in-out infinite ghost-pulse-cb66bb52;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}@keyframes ghost-pulse-cb66bb52{0%,to{opacity:.5}50%{opacity:1}}.cdz-bar[data-v-cb66bb52]{background:color-mix(in srgb, var(--md-row-selection) 6%, transparent);border:1.5px dashed color-mix(in srgb, var(--md-row-selection) 35%, transparent);pointer-events:none;border-radius:8px;align-items:center;gap:10px;padding:0 20px;display:flex;position:absolute;inset:4px 0}.cdz-line[data-v-cb66bb52]{background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--md-row-selection) 60%, transparent), color-mix(in srgb, var(--md-row-selection) 80%, transparent), color-mix(in srgb, var(--md-row-selection) 60%, transparent), transparent);transform-origin:50%;border-radius:2px;flex:1;height:2px;animation:.2s forwards line-expand-cb66bb52}@keyframes line-expand-cb66bb52{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}.cdz-pill[data-v-cb66bb52]{color:var(--md-row-selection-fg);letter-spacing:.01em;white-space:nowrap;background:color-mix(in srgb, var(--md-row-selection) 8%, transparent);border:1.5px solid color-mix(in srgb, var(--md-row-selection) 35%, transparent);box-shadow:0 2px 8px color-mix(in srgb, var(--md-row-selection) 15%, transparent);border-radius:100px;align-items:center;gap:5px;padding:5px 14px;font-size:11px;font-weight:600;animation:.22s cubic-bezier(.34,1.56,.64,1) forwards pill-pop-cb66bb52;display:flex}@keyframes pill-pop-cb66bb52{0%{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}.cdz-icon[data-v-cb66bb52]{flex-shrink:0;width:13px;height:13px}.cdz-bar-enter-active[data-v-cb66bb52]{animation:.15s forwards cdz-in-cb66bb52}.cdz-bar-leave-active[data-v-cb66bb52]{transition:opacity .1s}.cdz-bar-leave-to[data-v-cb66bb52]{opacity:0}@keyframes cdz-in-cb66bb52{0%{opacity:0;transform:scaleY(.6)}to{opacity:1;transform:scaleY(1)}}.drop-line-enter-active[data-v-d0f88c76]{transition:opacity 80ms,transform 80ms}.drop-line-leave-active[data-v-d0f88c76]{transition:opacity 60ms,transform 60ms}.drop-line-enter-from[data-v-d0f88c76],.drop-line-leave-to[data-v-d0f88c76]{opacity:0;transform-origin:0;transform:scaleX(.6)}.slide-enter-active[data-v-10da3eee],.slide-leave-active[data-v-10da3eee]{max-height:500px;transition:all .2s;overflow:hidden}.slide-enter-from[data-v-10da3eee],.slide-leave-to[data-v-10da3eee]{opacity:0;max-height:0;transform:translateY(-10px)}.md-dropdown[data-v-029f6297]{background:var(--md-surface);border:1px solid var(--md-border);z-index:10;border-radius:.375rem;max-height:12rem;margin-top:4px;position:absolute;top:100%;left:0;right:0;overflow-y:auto;box-shadow:0 4px 12px #00000014}.md-dropdown-item[data-v-029f6297]{cursor:pointer;color:var(--md-text);padding:.5rem .75rem;transition:background .1s}.md-dropdown-item[data-v-029f6297]:hover{background:var(--md-surface-hover)}.md-dropdown-item--active[data-v-029f6297]{background:var(--md-primary);color:var(--md-on-primary)}.md-tag[data-v-029f6297]{background:var(--md-primary);color:var(--md-on-primary);border-radius:9999px;align-items:center;padding:.125rem .75rem;font-size:.875rem;font-weight:500;line-height:1.5;display:inline-flex}.md-tag-remove[data-v-029f6297]{width:1rem;height:1rem;color:color-mix(in srgb, var(--md-on-primary) 80%, transparent);cursor:pointer;background:0 0;border:none;border-radius:9999px;justify-content:center;align-items:center;margin-left:.5rem;padding:0;transition:background .15s,color .15s;display:inline-flex}.md-tag-remove[data-v-029f6297]:hover{background:color-mix(in srgb, var(--md-on-primary) 20%, transparent);color:var(--md-on-primary)}.md-tag-remove svg[data-v-029f6297]{width:100%;height:100%}.md-dropdown[data-v-029f6297]::-webkit-scrollbar{width:4px}.md-dropdown[data-v-029f6297]::-webkit-scrollbar-track{background:0 0}.md-dropdown[data-v-029f6297]::-webkit-scrollbar-thumb{background:var(--md-border);border-radius:8px}.md-dropdown[data-v-029f6297]::-webkit-scrollbar-thumb:hover{background:var(--md-text-subtle)}.overflow-x-auto[data-v-66ee94f1]{-webkit-overflow-scrolling:touch;max-width:100%}.overflow-x-auto[data-v-66ee94f1]::-webkit-scrollbar{height:6px}.overflow-x-auto[data-v-66ee94f1]::-webkit-scrollbar-track{background:var(--md-surface-muted);border-radius:4px}.overflow-x-auto[data-v-66ee94f1]::-webkit-scrollbar-thumb{background:var(--md-border-strong);border-radius:4px}.overflow-x-auto[data-v-66ee94f1]::-webkit-scrollbar-thumb:hover{background:var(--md-text-subtle)}.overflow-x-auto[data-v-60969a60]{-webkit-overflow-scrolling:touch;max-width:100%}.overflow-x-auto[data-v-60969a60]::-webkit-scrollbar{height:6px}.overflow-x-auto[data-v-60969a60]::-webkit-scrollbar-track{background:var(--md-surface-muted);border-radius:4px}.overflow-x-auto[data-v-60969a60]::-webkit-scrollbar-thumb{background:var(--md-border-strong);border-radius:4px}.overflow-x-auto[data-v-60969a60]::-webkit-scrollbar-thumb:hover{background:var(--md-text-subtle)}.panel-slide-enter-active[data-v-ef885a8c],.panel-slide-leave-active[data-v-ef885a8c]{transition:opacity .18s,transform .18s}.panel-slide-enter-from[data-v-ef885a8c],.panel-slide-leave-to[data-v-ef885a8c]{opacity:0;transform:translate(-10px)}.fade-enter-active[data-v-ef885a8c],.fade-leave-active[data-v-ef885a8c]{transition:opacity .15s,transform .15s}.fade-enter-from[data-v-ef885a8c],.fade-leave-to[data-v-ef885a8c]{opacity:0;transform:translateY(-4px)}.row-list-enter-active[data-v-ef885a8c],.row-list-leave-active[data-v-ef885a8c]{transition:opacity .2s,transform .2s}.row-list-enter-from[data-v-ef885a8c],.row-list-leave-to[data-v-ef885a8c]{opacity:0;transform:translateY(6px)}.row-list-move[data-v-ef885a8c]{transition:transform .2s}.overflow-y-auto[data-v-ef885a8c]::-webkit-scrollbar{width:6px}.overflow-y-auto[data-v-ef885a8c]::-webkit-scrollbar-track{background:0 0}.overflow-y-auto[data-v-ef885a8c]::-webkit-scrollbar-thumb{background:var(--md-border-strong);border-radius:9999px}.overflow-y-auto[data-v-ef885a8c]::-webkit-scrollbar-thumb:hover{background:var(--md-text-subtle)}.panel-slide-enter-active[data-v-90154b02],.panel-slide-leave-active[data-v-90154b02]{transition:opacity .18s,transform .18s}.panel-slide-enter-from[data-v-90154b02],.panel-slide-leave-to[data-v-90154b02]{opacity:0;transform:translate(-10px)}.row-list-enter-active[data-v-90154b02],.row-list-leave-active[data-v-90154b02]{transition:opacity .2s,transform .2s}.row-list-enter-from[data-v-90154b02],.row-list-leave-to[data-v-90154b02]{opacity:0;transform:translateY(6px)}.row-list-move[data-v-90154b02]{transition:transform .2s}.overflow-y-auto[data-v-90154b02]::-webkit-scrollbar{width:6px}.overflow-y-auto[data-v-90154b02]::-webkit-scrollbar-track{background:0 0}.overflow-y-auto[data-v-90154b02]::-webkit-scrollbar-thumb{background:var(--md-border-strong);border-radius:9999px}.overflow-y-auto[data-v-90154b02]::-webkit-scrollbar-thumb:hover{background:var(--md-text-subtle)}.panel-slide-enter-active[data-v-9d31c919],.panel-slide-leave-active[data-v-9d31c919]{transition:opacity .18s,transform .18s}.panel-slide-enter-from[data-v-9d31c919],.panel-slide-leave-to[data-v-9d31c919]{opacity:0;transform:translate(-10px)}.row-list-enter-active[data-v-9d31c919],.row-list-leave-active[data-v-9d31c919]{transition:opacity .2s,transform .2s}.row-list-enter-from[data-v-9d31c919],.row-list-leave-to[data-v-9d31c919]{opacity:0;transform:translateY(6px)}.row-list-move[data-v-9d31c919]{transition:transform .2s}.overflow-y-auto[data-v-9d31c919]::-webkit-scrollbar{width:6px}.overflow-y-auto[data-v-9d31c919]::-webkit-scrollbar-track{background:0 0}.overflow-y-auto[data-v-9d31c919]::-webkit-scrollbar-thumb{background:var(--md-border-strong);border-radius:9999px}.overflow-y-auto[data-v-9d31c919]::-webkit-scrollbar-thumb:hover{background:var(--md-text-subtle)}.md-toast__region[data-v-7df3ae7b]{z-index:9999;pointer-events:none;flex-direction:column;gap:.5rem;display:flex;position:fixed;top:1rem;right:1rem}.md-toast[data-v-7df3ae7b]{pointer-events:auto;border:1px solid;border-radius:.75rem;align-items:flex-start;gap:.625rem;min-width:280px;max-width:380px;padding:.75rem .875rem;font-size:13px;display:flex;box-shadow:0 8px 30px #0000001f}.md-toast__icon[data-v-7df3ae7b]{flex-shrink:0;margin-top:.0625rem;font-size:15px}.md-toast__body[data-v-7df3ae7b]{flex:1;min-width:0}.md-toast__summary[data-v-7df3ae7b]{font-weight:500}.md-toast__detail[data-v-7df3ae7b]{opacity:.8;margin-top:.125rem;font-size:12px}.md-toast__close[data-v-7df3ae7b]{opacity:.5;cursor:pointer;color:inherit;background:0 0;border:0;flex-shrink:0}.md-toast__close[data-v-7df3ae7b]:hover{opacity:1}.md-toast--success[data-v-7df3ae7b]{background:var(--md-success-bg);border-color:var(--md-success-border);color:var(--md-success-fg)}.md-toast--info[data-v-7df3ae7b]{background:var(--md-info-bg);border-color:var(--md-info-border);color:var(--md-info-fg)}.md-toast--warn[data-v-7df3ae7b]{background:var(--md-surface);border-color:var(--md-warning-border);color:var(--md-warning-fg)}.md-toast--error[data-v-7df3ae7b]{background:var(--md-danger-bg);border-color:var(--md-danger-border);color:var(--md-danger-fg)}.md-toast-enter-active[data-v-7df3ae7b],.md-toast-leave-active[data-v-7df3ae7b]{transition:all .2s}.md-toast-enter-from[data-v-7df3ae7b],.md-toast-leave-to[data-v-7df3ae7b]{opacity:0;transform:translate(20px)}.md-confirm__body[data-v-b70facc7]{align-items:flex-start;gap:.75rem;display:flex}.md-confirm__icon[data-v-b70facc7]{color:var(--md-warning);flex-shrink:0;margin-top:.125rem;font-size:22px}.md-confirm__message[data-v-b70facc7]{color:var(--md-text);margin:0;font-size:14px;line-height:1.5}.health-orb[data-v-e50d82a8]{cursor:pointer;background:0 0;border:none;border-radius:50%;outline:none;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;padding:0;display:flex;position:relative}.health-orb:focus-visible .orb-core[data-v-e50d82a8]{box-shadow:0 0 0 3px #42389e66}.orb-ring[data-v-e50d82a8]{border-radius:50%;animation:2.4s ease-out infinite orb-pulse-e50d82a8;position:absolute}.orb-ring--outer[data-v-e50d82a8]{width:22px;height:22px;animation-delay:0s}.orb-ring--inner[data-v-e50d82a8]{width:16px;height:16px;animation-delay:.6s}.orb-core[data-v-e50d82a8]{z-index:1;border-radius:50%;width:10px;height:10px;transition:transform .15s,box-shadow .15s;position:relative}.health-orb:hover .orb-core[data-v-e50d82a8],.health-orb--active .orb-core[data-v-e50d82a8]{transform:scale(1.15)}.health-orb--good .orb-ring[data-v-e50d82a8]{background:#22c55e40}.health-orb--good .orb-core[data-v-e50d82a8]{background:#22c55e;box-shadow:0 0 0 2px #22c55e33,0 0 8px #22c55e66}.health-orb--warn .orb-ring[data-v-e50d82a8]{background:#f59e0b47}.health-orb--warn .orb-core[data-v-e50d82a8]{background:#f59e0b;box-shadow:0 0 0 2px #f59e0b33,0 0 8px #f59e0b66}.health-orb--bad .orb-ring[data-v-e50d82a8]{background:#ef444447}.health-orb--bad .orb-core[data-v-e50d82a8]{background:#ef4444;box-shadow:0 0 0 2px #ef444433,0 0 8px #ef444466}@keyframes orb-pulse-e50d82a8{0%{opacity:.7;transform:scale(.6)}60%{opacity:0;transform:scale(1.6)}to{opacity:0;transform:scale(1.6)}}.health-panel[data-v-e50d82a8]{z-index:9999;background:#18181b;border:1px solid #ffffff14;border-radius:14px;flex-direction:column;gap:8px;width:300px;padding:12px;transition:width .25s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%);box-shadow:0 20px 60px #00000080,0 4px 12px #0000004d}.health-panel--expanded[data-v-e50d82a8]{width:400px}.health-panel--expanded .detail-stats[data-v-e50d82a8]{grid-template-columns:repeat(3,1fr)}.health-panel--expanded .a11y-list[data-v-e50d82a8]{max-height:320px}.health-panel--expanded .format-note[data-v-e50d82a8]{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.health-panel--expanded .format-row[data-v-e50d82a8]{flex-direction:column;align-items:flex-start;gap:4px}.panel-header[data-v-e50d82a8]{border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;padding:0 2px 4px;display:flex}.panel-header-right[data-v-e50d82a8]{align-items:center;gap:6px;display:flex}.panel-expand-btn[data-v-e50d82a8]{color:#ffffff59;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff14;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;padding:0;transition:background .15s,color .15s,border-color .15s;display:flex}.panel-expand-btn[data-v-e50d82a8]:hover{color:#a5b4fc;background:#42389e2e;border-color:#42389e66}.panel-expand-btn[data-v-e50d82a8]:focus-visible{outline-offset:1px;outline:2px solid #42389e80}.panel-expand-btn--active[data-v-e50d82a8]{color:#a5b4fc;background:#42389e33;border-color:#42389e73}.panel-title[data-v-e50d82a8]{letter-spacing:.06em;text-transform:uppercase;color:#a5b4fc;font-size:11px;font-weight:600}.panel-status-badge[data-v-e50d82a8]{border-radius:99px;padding:2px 8px;font-size:10px;font-weight:600}.status-badge--good[data-v-e50d82a8]{color:#4ade80;background:#22c55e26}.status-badge--warn[data-v-e50d82a8]{color:#fbbf24;background:#f59e0b26}.status-badge--bad[data-v-e50d82a8]{color:#f87171;background:#ef444426}.metric-card[data-v-e50d82a8]{cursor:pointer;-webkit-user-select:none;user-select:none;background:#ffffff0a;border:1px solid #ffffff0f;border-radius:10px;transition:background .15s,border-color .15s;overflow:hidden}.metric-card[data-v-e50d82a8]:hover{background:#42389e1a;border-color:#42389e4d}.metric-card[data-v-e50d82a8]:focus-visible{outline-offset:2px;outline:2px solid #42389e80}.metric-card--good[data-v-e50d82a8]{border-color:#22c55e26}.metric-card--warn[data-v-e50d82a8]{border-color:#f59e0b26}.metric-card--bad[data-v-e50d82a8]{border-color:#ef444433}.metric-card--good.metric-card--expanded[data-v-e50d82a8]{background:#22c55e0d}.metric-card--warn.metric-card--expanded[data-v-e50d82a8]{background:#f59e0b0d}.metric-card--bad.metric-card--expanded[data-v-e50d82a8]{background:#ef44440f}.metric-summary[data-v-e50d82a8]{justify-content:space-between;align-items:center;gap:8px;padding:9px 10px;display:flex}.metric-left[data-v-e50d82a8]{align-items:center;gap:7px;min-width:0;display:flex}.metric-icon[data-v-e50d82a8]{opacity:.8;flex-shrink:0;align-items:center;display:flex}.metric-label[data-v-e50d82a8]{color:#ffffffb3;white-space:nowrap;font-size:11.5px;font-weight:500}.metric-right[data-v-e50d82a8]{flex-shrink:0;align-items:center;gap:6px;display:flex}.mini-bar[data-v-e50d82a8]{background:#ffffff1a;border-radius:99px;width:36px;height:4px;overflow:hidden}.mini-bar-fill[data-v-e50d82a8]{border-radius:99px;height:100%;transition:width .5s}.mini-bar-fill--good[data-v-e50d82a8]{background:#22c55e}.mini-bar-fill--warn[data-v-e50d82a8]{background:#f59e0b}.mini-bar-fill--bad[data-v-e50d82a8]{background:#ef4444}.status-dot[data-v-e50d82a8]{border-radius:50%;flex-shrink:0;width:6px;height:6px}.status-dot--good[data-v-e50d82a8]{background:#22c55e}.status-dot--warn[data-v-e50d82a8]{background:#f59e0b}.status-dot--bad[data-v-e50d82a8]{background:#ef4444}.pulse-dot[data-v-e50d82a8]{flex-shrink:0;width:6px;height:6px;position:relative}.pulse-dot[data-v-e50d82a8]:before,.pulse-dot[data-v-e50d82a8]:after{content:"";border-radius:50%;position:absolute;inset:0}.pulse-dot--bad[data-v-e50d82a8]:before{z-index:1;background:#ef4444}.pulse-dot--bad[data-v-e50d82a8]:after{background:#ef4444;animation:1.5s ease-out infinite dot-ping-e50d82a8}@keyframes dot-ping-e50d82a8{0%{opacity:.75;transform:scale(1)}to{opacity:0;transform:scale(2.5)}}.metric-value[data-v-e50d82a8]{font-variant-numeric:tabular-nums;font-size:11.5px;font-weight:600}.metric-value--good[data-v-e50d82a8]{color:#4ade80}.metric-value--warn[data-v-e50d82a8]{color:#fbbf24}.metric-value--bad[data-v-e50d82a8]{color:#f87171}.chevron[data-v-e50d82a8]{color:#ffffff4d;flex-shrink:0;transition:transform .2s,color .15s}.chevron--open[data-v-e50d82a8]{color:#fff9;transform:rotate(180deg)}.metric-card:hover .chevron[data-v-e50d82a8]{color:#ffffff80}.metric-detail[data-v-e50d82a8]{border-top:1px solid #ffffff0d;flex-direction:column;gap:8px;padding:0 10px 10px;display:flex}.detail-tip[data-v-e50d82a8]{color:#ffffff8c;margin:6px 0 0;font-size:11px;line-height:1.55}.detail-stats[data-v-e50d82a8]{grid-template-columns:1fr 1fr;gap:4px 12px;display:grid}.stat-item[data-v-e50d82a8]{justify-content:space-between;align-items:baseline;gap:6px;display:flex}.stat-label[data-v-e50d82a8]{color:#ffffff59;white-space:nowrap;font-size:10.5px}.stat-value[data-v-e50d82a8]{color:#ffffffbf;font-variant-numeric:tabular-nums;font-size:11px;font-weight:600}.detail-thresholds[data-v-e50d82a8]{border-top:1px solid #ffffff0d;flex-wrap:wrap;gap:4px;padding-top:4px;display:flex}.threshold[data-v-e50d82a8]{border-radius:99px;padding:2px 7px;font-size:10px;font-weight:500}.threshold--good[data-v-e50d82a8]{color:#4ade80;background:#22c55e1f}.threshold--warn[data-v-e50d82a8]{color:#fbbf24;background:#f59e0b1f}.threshold--bad[data-v-e50d82a8]{color:#f87171;background:#ef44441f}.format-note[data-v-e50d82a8]{background:#0003;border-radius:8px;flex-direction:column;gap:5px;padding:8px;display:flex}.format-row[data-v-e50d82a8]{align-items:flex-start;gap:8px;display:flex}.format-badge[data-v-e50d82a8]{letter-spacing:.05em;color:#a5b4fc;background:#42389e4d;border-radius:4px;flex-shrink:0;margin-top:1px;padding:2px 6px;font-size:9.5px;font-weight:700}.format-badge--muted[data-v-e50d82a8]{color:#ffffff59;background:#ffffff12}.format-info[data-v-e50d82a8]{flex-direction:column;gap:2px;min-width:0;display:flex}.format-range[data-v-e50d82a8]{color:#fffc;font-size:11px;font-weight:600}.format-range--muted[data-v-e50d82a8]{color:#ffffff59;font-weight:500}.format-caveat[data-v-e50d82a8]{color:#ffffff59;font-size:10px;line-height:1.4}.a11y-detail[data-v-e50d82a8]{cursor:default;gap:10px;padding:8px 10px 10px}.a11y-tabs[data-v-e50d82a8]{background:#00000040;border-radius:8px;grid-template-columns:repeat(3,1fr);gap:4px;padding:3px;display:grid}.a11y-tab[data-v-e50d82a8]{cursor:pointer;letter-spacing:.02em;color:#ffffff73;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;gap:6px;padding:6px 4px;font-family:inherit;font-size:10.5px;font-weight:600;transition:background .15s,color .15s;display:flex}.a11y-tab[data-v-e50d82a8]:hover{color:#ffffffbf;background:#ffffff0a}.a11y-tab[data-v-e50d82a8]:focus-visible{outline-offset:1px;outline:2px solid #42389e80}.a11y-tab--active[data-v-e50d82a8]{color:#ffffffeb;background:#ffffff12}.a11y-tab-label[data-v-e50d82a8]{text-transform:uppercase}.a11y-tab-count[data-v-e50d82a8]{font-variant-numeric:tabular-nums;border-radius:99px;justify-content:center;align-items:center;min-width:18px;height:16px;padding:0 5px;font-size:10px;font-weight:700;line-height:1;display:inline-flex}.a11y-tab-count--failed[data-v-e50d82a8]{color:#f87171;background:#ef44442e}.a11y-tab-count--passed[data-v-e50d82a8]{color:#4ade80;background:#22c55e2e}.a11y-tab-count--ignored[data-v-e50d82a8]{color:#ffffff80;background:#ffffff14}.a11y-list[data-v-e50d82a8]{scrollbar-width:thin;scrollbar-color:#ffffff1f transparent;flex-direction:column;gap:6px;max-height:240px;display:flex;overflow-y:auto}.a11y-list[data-v-e50d82a8]::-webkit-scrollbar{width:6px}.a11y-list[data-v-e50d82a8]::-webkit-scrollbar-track{background:0 0}.a11y-list[data-v-e50d82a8]::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:99px}.a11y-empty[data-v-e50d82a8]{color:#fff6;text-align:center;margin:0;padding:12px 4px;font-size:11px}.a11y-item[data-v-e50d82a8]{background:#ffffff08;border-left:2px solid #0000;border-radius:8px;flex-direction:column;gap:4px;padding:8px;display:flex}.a11y-item--critical[data-v-e50d82a8]{border-left-color:#ef4444}.a11y-item--serious[data-v-e50d82a8]{border-left-color:#f59e0b}.a11y-item--passed[data-v-e50d82a8]{border-left-color:#22c55e80}.a11y-item--ignored[data-v-e50d82a8]{opacity:.75;border-left-color:#ffffff2e}.a11y-item-header[data-v-e50d82a8]{align-items:center;gap:6px;display:flex}.a11y-severity[data-v-e50d82a8]{text-transform:uppercase;letter-spacing:.05em;border-radius:4px;flex-shrink:0;align-items:center;padding:2px 6px;font-size:9px;font-weight:700;display:inline-flex}.a11y-severity--critical[data-v-e50d82a8]{color:#f87171;background:#ef44442e}.a11y-severity--serious[data-v-e50d82a8]{color:#fbbf24;background:#f59e0b2e}.a11y-severity--passed[data-v-e50d82a8]{color:#4ade80;background:#22c55e2e}.a11y-severity--ignored[data-v-e50d82a8]{color:#ffffff80;background:#ffffff12}.a11y-rule[data-v-e50d82a8]{color:#ffffffd9;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-size:11px;font-weight:600;overflow:hidden}.a11y-action[data-v-e50d82a8]{color:#ffffff80;cursor:pointer;background:0 0;border:1px solid #ffffff1a;border-radius:4px;flex-shrink:0;padding:2px 7px;font-family:inherit;font-size:9.5px;font-weight:600;transition:background .15s,color .15s,border-color .15s}.a11y-action[data-v-e50d82a8]:hover{color:#ffffffd9;background:#ffffff0f;border-color:#fff3}.a11y-action[data-v-e50d82a8]:focus-visible{outline-offset:1px;outline:2px solid #42389e80}.a11y-action--restore[data-v-e50d82a8]{color:#a5b4fc;border-color:#a5b4fc40}.a11y-action--restore[data-v-e50d82a8]:hover{color:#c7d2fe;background:#42389e26;border-color:#a5b4fc66}.a11y-message[data-v-e50d82a8]{color:#ffffffa6;margin:0;font-size:10.5px;line-height:1.5}.a11y-info[data-v-e50d82a8]{color:#ffffff61;border-top:1px dashed #ffffff0f;margin:0;padding-top:2px;font-size:10px;line-height:1.5}.panel-footer[data-v-e50d82a8]{color:#ffffff38;text-align:center;margin:0;padding-top:4px;font-size:10px}.click-outside[data-v-e50d82a8]{z-index:9998;position:fixed;inset:0}.popover-enter-active[data-v-e50d82a8]{transition:opacity .18s,transform .18s cubic-bezier(.34,1.56,.64,1)}.popover-leave-active[data-v-e50d82a8]{transition:opacity .12s,transform .12s}.popover-enter-from[data-v-e50d82a8]{opacity:0;transform:translate(-50%)translateY(-6px)scale(.97)}.popover-leave-to[data-v-e50d82a8]{opacity:0;transform:translate(-50%)translateY(-4px)scale(.98)}.expand-enter-active[data-v-e50d82a8]{max-height:300px;transition:opacity .18s,max-height .22s;overflow:hidden}.expand-leave-active[data-v-e50d82a8]{transition:opacity .12s,max-height .18s;overflow:hidden}.expand-enter-from[data-v-e50d82a8],.expand-leave-to[data-v-e50d82a8]{opacity:0;max-height:0}.picker-overlay-enter-active[data-v-769fdd18],.picker-overlay-leave-active[data-v-769fdd18]{transition:opacity .2s}.picker-overlay-enter-from[data-v-769fdd18],.picker-overlay-leave-to[data-v-769fdd18]{opacity:0}.picker-drawer-enter-active[data-v-769fdd18],.picker-drawer-leave-active[data-v-769fdd18]{transition:transform .28s cubic-bezier(.32,.72,0,1)}.picker-drawer-enter-from[data-v-769fdd18],.picker-drawer-leave-to[data-v-769fdd18]{transform:translate(100%)}.note-enter-active[data-v-3767ab19],.note-leave-active[data-v-3767ab19]{max-height:60px;transition:opacity .2s,max-height .25s;overflow:hidden}.note-enter-from[data-v-3767ab19],.note-leave-to[data-v-3767ab19]{opacity:0;max-height:0}.md-msg[data-v-c41482a2]{border:1px solid;border-radius:.5rem;align-items:flex-start;gap:.5rem;padding:.625rem .75rem;font-size:13px;display:flex}.md-msg__icon[data-v-c41482a2]{flex-shrink:0;margin-top:.125rem;font-size:14px}.md-msg__body[data-v-c41482a2]{flex:1;min-width:0}.md-msg__close[data-v-c41482a2]{opacity:.6;cursor:pointer;background:0 0;border:0}.md-msg__close[data-v-c41482a2]:hover{opacity:1}.md-msg--info[data-v-c41482a2]{background:var(--md-info-bg);border-color:var(--md-info-border);color:var(--md-info-fg)}.md-msg--success[data-v-c41482a2]{background:var(--md-success-bg);border-color:var(--md-success-border);color:var(--md-success-fg)}.md-msg--warn[data-v-c41482a2]{background:var(--md-surface) beb;border-color:var(--md-warning-border);color:var(--md-warning-fg)}.md-msg--error[data-v-c41482a2]{background:var(--md-danger-bg);border-color:var(--md-danger-border);color:var(--md-danger-fg)}.autosave-fade-enter-active[data-v-26ac5f8e],.autosave-fade-leave-active[data-v-26ac5f8e]{transition:opacity .2s,transform .2s}.autosave-fade-enter-from[data-v-26ac5f8e]{opacity:0;transform:translateY(4px)}.autosave-fade-leave-to[data-v-26ac5f8e]{opacity:0;transform:translateY(-4px)}.md-assistant-fab[data-v-e3d36e68]{z-index:120;border:1px solid var(--md-border);background:var(--md-button-primary-bg,var(--md-primary));width:2.75rem;height:2.75rem;color:var(--md-button-primary-text,var(--md-surface));cursor:pointer;border-radius:9999px;justify-content:center;align-items:center;transition:transform .15s,box-shadow .15s;display:flex;position:fixed;bottom:1.25rem;right:1.25rem;box-shadow:0 2px 10px #0000002e}.md-assistant-fab[data-v-e3d36e68]:hover{transform:translateY(-1px);box-shadow:0 4px 14px #00000038}.md-assistant-fab[data-v-e3d36e68]:focus-visible{outline:2px solid var(--md-primary);outline-offset:2px}.md-assistant-drawer[data-v-e3d36e68]{z-index:120;background:var(--md-surface);border-left:1px solid var(--md-border);flex-direction:column;width:22rem;max-width:100vw;display:flex;position:fixed;top:4rem;bottom:0;right:0;box-shadow:-8px 0 24px #0000001a}.md-assistant-head[data-v-e3d36e68]{border-bottom:1px solid color-mix(in srgb, var(--md-border) 80%, transparent);flex-shrink:0;justify-content:space-between;align-items:center;padding:.75rem .875rem;display:flex}.md-assistant-title[data-v-e3d36e68]{letter-spacing:.08em;text-transform:uppercase;color:var(--md-text-subtle);font-size:11px;font-weight:600}.md-assistant-close[data-v-e3d36e68]{width:1.5rem;height:1.5rem;color:var(--md-text-subtle);cursor:pointer;background:0 0;border:0;border-radius:.375rem;justify-content:center;align-items:center;display:flex}.md-assistant-close[data-v-e3d36e68]:hover{color:var(--md-text-muted);background:var(--md-surface-muted)}.md-assistant-body[data-v-e3d36e68]{flex:auto;padding:.75rem;overflow-y:auto}.md-assistant-body[data-v-e3d36e68]::-webkit-scrollbar{width:6px}.md-assistant-body[data-v-e3d36e68]::-webkit-scrollbar-track{background:0 0}.md-assistant-body[data-v-e3d36e68]::-webkit-scrollbar-thumb{background:var(--md-border-strong);border-radius:9999px}.assistant-slide-enter-active[data-v-e3d36e68],.assistant-slide-leave-active[data-v-e3d36e68]{transition:opacity .18s,transform .18s}.assistant-slide-enter-from[data-v-e3d36e68],.assistant-slide-leave-to[data-v-e3d36e68]{opacity:0;transform:translate(12px)}
2810
2
  /*$vite$:1*/