@nebulr-group/bridge-svelte 0.9.2 → 0.9.3

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.
Files changed (9) hide show
  1. package/dist/client/components/sdk-auth/BridgeAuthRoutes.svelte +9 -6
  2. package/dist/client/components/subscription/BridgeBillingNotice.svelte +124 -121
  3. package/dist/client/components/subscription/BridgeBillingRoutes.svelte +56 -53
  4. package/dist/client/components/subscription/BridgePaywall.svelte +32 -29
  5. package/dist/client/components/subscription/BridgePaywallPage.svelte +15 -12
  6. package/dist/client/components/subscription/BridgeQuotaBanner.svelte +73 -70
  7. package/dist/client/components/subscription/BridgeSubscriptionStatus.svelte +55 -52
  8. package/dist/styles.css +1438 -1393
  9. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -31,7 +31,16 @@
31
31
  * --bridge-border input, table, card and secondary button borders
32
32
  * --bridge-border-radius corners of inputs, buttons, alerts, cards, dialogs
33
33
  * --bridge-card-bg plan cards and the current-plan panel (defaults to --bridge-bg)
34
- * --bridge-card-shadow their shadow; `none` for a flat look (dark apps often want it)
34
+ * --bridge-card-shadow their shadow, and the plan-change dialog's; `none` for a flat look
35
+ * --bridge-button-shadow every Bridge button's shadow, e.g. `4px 4px 0 #000` (default none)
36
+ *
37
+ * Type (TBP-814). Bridge text follows your app: every size is relative to the
38
+ * text size of your page's <body>, and the font family is inherited.
39
+ * --bridge-font-size the base all Bridge text sizes scale from
40
+ * (default: your <body> text size)
41
+ * --bridge-font-weight-heading page, dialog and section titles, plan names, prices
42
+ * --bridge-font-weight-button every Bridge button
43
+ * --bridge-font-weight-label form labels, table headings, badges, names
35
44
  * --bridge-overlay backdrop behind dialogs
36
45
  * --bridge-alert-error-{bg,fg,border} errors, critical billing notices
37
46
  * --bridge-alert-success-{bg,fg,border} confirmations, active plan badge
@@ -49,8 +58,8 @@
49
58
  * major: --bridge-primary-foreground → --bridge-primary-fg
50
59
  * --bridge-bg-muted → --bridge-muted-bg
51
60
  *
52
- * Fonts and body text colour are not tokens: Bridge pages render inside your
53
- * layout and inherit them.
61
+ * Font family and text colour are not tokens: Bridge pages render inside your
62
+ * layout and inherit them. Text sizes follow your <body> (see Type above).
54
63
  *
55
64
  * State selectors:
56
65
  * [data-active="true"] — active tab
@@ -63,1394 +72,1430 @@
63
72
  * [data-variant="danger"] — danger variant
64
73
  */
65
74
 
66
- /* ─── Token defaults — zero specificity, so the app's :root always wins ──── */
67
-
68
- :where(:root) {
69
- /* Derived tokens (primary-hover, primary-fg, primary-light, input-focus,
70
- muted-bg, paywall-panel-bg) have no value here on purpose: each falls back
71
- to its source where it is used, so setting --bridge-primary on a wrapper
72
- re-derives them for that wrapper too. */
73
- --bridge-primary: #4f46e5;
74
- --bridge-bg: #ffffff;
75
- --bridge-foreground: #111827;
76
- --bridge-muted: #6b7280;
77
- --bridge-border: #d1d5db;
78
- --bridge-border-radius: 6px;
79
- --bridge-overlay: rgba(15, 23, 42, 0.45);
80
- --bridge-alert-error-bg: #fef2f2;
81
- --bridge-alert-error-fg: #991b1b;
82
- --bridge-alert-error-border: #fca5a5;
83
- --bridge-alert-success-bg: #f0fdf4;
84
- --bridge-alert-success-fg: #166534;
85
- --bridge-alert-success-border: #86efac;
86
- --bridge-alert-info-bg: #eff6ff;
87
- --bridge-alert-info-fg: #1e40af;
88
- --bridge-alert-info-border: #bfdbfe;
89
- --bridge-alert-warning-bg: #fffbeb;
90
- --bridge-alert-warning-fg: #92400e;
91
- --bridge-alert-warning-border: #fcd34d;
92
-
93
- --bridge-auth-page-padding: 3rem 1rem;
94
- --bridge-billing-page-width: 60rem;
95
- --bridge-billing-page-padding: 3rem 1rem;
96
- --bridge-paywall-bg: rgba(15, 23, 42, 0.72);
97
- }
98
-
99
- /* ─── Input visual defaults ──────────────────────────────────────────────── */
100
-
101
- :where(input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
102
- .bridge-input) {
103
- border: 1px solid var(--bridge-border);
104
- border-radius: var(--bridge-border-radius);
105
- outline: none;
106
- }
107
- :where(input[type="text"]:focus, input[type="email"]:focus,
108
- input[type="password"]:focus, input[type="tel"]:focus,
109
- .bridge-input:focus) {
110
- border-color: var(--bridge-input-focus, var(--bridge-primary));
111
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--bridge-input-focus, var(--bridge-primary)) 20%, transparent);
112
- }
113
-
114
- /* ─── Buttons ────────────────────────────────────────────────────────────── */
115
-
116
- .bridge-btn,
117
- .bridge-btn-primary,
118
- .bridge-btn-secondary,
119
- .bridge-btn-outline,
120
- .bridge-btn-danger,
121
- .bridge-btn-danger-sm {
122
- display: inline-flex;
123
- align-items: center;
124
- justify-content: center;
125
- gap: 0.5rem;
126
- padding: 0.5rem 1rem;
127
- cursor: pointer;
128
- font-family: inherit;
129
- font-size: 0.875rem;
130
- font-weight: 500;
131
- line-height: 1.25;
132
- white-space: nowrap;
133
- transition: opacity 0.15s;
134
- }
135
-
136
- .bridge-btn:disabled,
137
- .bridge-btn-primary:disabled,
138
- .bridge-btn-secondary:disabled,
139
- .bridge-btn-outline:disabled,
140
- .bridge-btn-danger:disabled {
141
- cursor: not-allowed;
142
- opacity: 0.5;
143
- }
144
-
145
- .bridge-btn-danger-sm {
146
- padding: 0.25rem 0.625rem;
147
- font-size: 0.75rem;
148
- cursor: pointer;
149
- }
150
-
151
- /* ─── Button visual defaults ─────────────────────────────────────────────── */
152
-
153
- :where(.bridge-btn-primary) {
154
- background-color: var(--bridge-primary);
155
- color: var(--bridge-primary-fg, var(--bridge-primary-foreground, #ffffff));
156
- border: 1px solid var(--bridge-primary);
157
- border-radius: var(--bridge-border-radius);
158
- }
159
- :where(.bridge-btn-primary:hover:not(:disabled)) {
160
- background-color: var(--bridge-primary-hover, color-mix(in srgb, var(--bridge-primary) 85%, #000000));
161
- border-color: var(--bridge-primary-hover, color-mix(in srgb, var(--bridge-primary) 85%, #000000));
162
- }
163
- :where(.bridge-btn-secondary, .bridge-btn-outline) {
164
- background-color: transparent;
165
- color: inherit;
166
- border: 1px solid var(--bridge-border);
167
- border-radius: var(--bridge-border-radius);
168
- }
169
- :where(.bridge-btn-secondary:hover:not(:disabled), .bridge-btn-outline:hover:not(:disabled)) {
170
- background-color: color-mix(in srgb, currentColor 5%, transparent);
171
- }
172
-
173
- /* ─── Spinner ─────────────────────────────────────────────────────────────── */
174
-
175
- [data-bridge-spinner] {
176
- display: inline-block;
177
- border: 2px solid currentColor;
178
- border-top-color: transparent;
179
- border-radius: 50%;
180
- animation: bridge-spin 0.6s linear infinite;
181
- }
182
-
183
- @keyframes bridge-spin {
184
- to { transform: rotate(360deg); }
185
- }
186
-
187
- /* ─── Alert ───────────────────────────────────────────────────────────────── */
188
-
189
- [data-bridge-alert] {
190
- padding: 0.625rem 0.875rem;
191
- font-size: 0.875rem;
192
- }
193
-
194
- :where([data-bridge-alert]) {
195
- border-radius: var(--bridge-border-radius);
196
- border: 1px solid var(--bridge-border);
197
- }
198
- :where([data-bridge-alert][data-variant="error"]) {
199
- background-color: var(--bridge-alert-error-bg);
200
- color: var(--bridge-alert-error-fg);
201
- border-color: var(--bridge-alert-error-border);
202
- }
203
- :where([data-bridge-alert][data-variant="success"]) {
204
- background-color: var(--bridge-alert-success-bg);
205
- color: var(--bridge-alert-success-fg);
206
- border-color: var(--bridge-alert-success-border);
207
- }
208
-
209
- /* ─── AuthFormWrapper ─────────────────────────────────────────────────────── */
210
-
211
- [data-bridge-auth-form] {
212
- width: 100%;
213
- max-width: 400px;
214
- margin: 0 auto;
215
- }
216
-
217
- [data-bridge-auth-form] label {
218
- display: block;
219
- margin-bottom: 0.25rem;
220
- font-size: 0.875rem;
221
- }
222
-
223
- [data-bridge-auth-form] input[type="text"],
224
- [data-bridge-auth-form] input[type="email"],
225
- [data-bridge-auth-form] input[type="password"],
226
- [data-bridge-auth-form] input[type="tel"] {
227
- width: 100%;
228
- padding: 0.5rem 0.75rem;
229
- box-sizing: border-box;
230
- font-size: 0.875rem;
231
- }
232
-
233
- [data-bridge-auth-form] .bridge-btn,
234
- [data-bridge-auth-form] .bridge-btn-primary,
235
- [data-bridge-auth-form] .bridge-btn-secondary,
236
- [data-bridge-auth-form] [data-bridge-passkey-login] {
237
- width: 100%;
238
- display: flex;
239
- align-items: center;
240
- justify-content: center;
241
- gap: 0.5rem;
242
- box-sizing: border-box;
243
- }
244
-
245
- [data-bridge-auth-form] .bridge-form-group {
246
- margin-bottom: 1rem;
247
- }
248
-
249
- [data-bridge-auth-form] .bridge-form-footer {
250
- margin-top: 1rem;
251
- text-align: center;
252
- font-size: 0.875rem;
253
- }
254
-
255
- [data-bridge-auth-form] .bridge-form-footer a,
256
- [data-bridge-auth-form] .bridge-link {
257
- cursor: pointer;
258
- background: none;
259
- border: none;
260
- font-size: inherit;
261
- padding: 0;
262
- text-decoration: underline;
263
- }
264
-
265
- [data-bridge-auth-form] .bridge-divider {
266
- display: flex;
267
- align-items: center;
268
- margin: 1rem 0;
269
- font-size: 0.75rem;
270
- text-transform: uppercase;
271
- letter-spacing: 0.05em;
272
- }
273
-
274
- [data-bridge-auth-form] .bridge-divider::before,
275
- [data-bridge-auth-form] .bridge-divider::after {
276
- content: '';
277
- flex: 1;
278
- border-bottom: 1px solid;
279
- }
280
-
281
- [data-bridge-auth-form] .bridge-divider::before { margin-right: 0.5rem; }
282
- [data-bridge-auth-form] .bridge-divider::after { margin-left: 0.5rem; }
283
-
284
- /* ─── PasskeyLogin ────────────────────────────────────────────────────────── */
285
-
286
- [data-bridge-passkey-login] {
287
- display: flex;
288
- align-items: center;
289
- justify-content: center;
290
- gap: 0.5rem;
291
- cursor: pointer;
292
- font-family: inherit;
293
- font-size: 0.875rem;
294
- }
295
-
296
- [data-bridge-passkey-login][data-loading="true"] {
297
- cursor: not-allowed;
298
- opacity: 0.5;
299
- }
300
-
301
- /* ─── SsoButton ──────────────────────────────────────────────────────────── */
302
-
303
- [data-bridge-sso-button] {
304
- display: flex;
305
- align-items: center;
306
- justify-content: center;
307
- gap: 0.5rem;
308
- width: 100%;
309
- cursor: pointer;
310
- font-family: inherit;
311
- font-size: 0.875rem;
312
- padding: 0.5rem 1rem;
313
- box-sizing: border-box;
314
- }
315
-
316
- /* ─── Password visibility toggle ─────────────────────────────────────────── */
317
-
318
- .bridge-password-wrapper {
319
- position: relative;
320
- }
321
-
322
- .bridge-password-wrapper input {
323
- padding-right: 2.5rem;
324
- }
325
-
326
- .bridge-password-toggle {
327
- position: absolute;
328
- right: 0.5rem;
329
- top: 50%;
330
- transform: translateY(-50%);
331
- display: flex;
332
- align-items: center;
333
- justify-content: center;
334
- background: none;
335
- border: none;
336
- cursor: pointer;
337
- padding: 0.25rem;
338
- color: var(--bridge-muted);
339
- line-height: 1;
340
- }
341
-
342
- .bridge-password-toggle:hover {
343
- color: var(--bridge-foreground);
344
- }
345
-
346
- /* ─── Auth form helpers ───────────────────────────────────────────────────── */
347
-
348
- .bridge-sso-row {
349
- margin-bottom: 0.5rem;
350
- }
351
-
352
- .bridge-sso-btn {
353
- display: flex;
354
- align-items: center;
355
- justify-content: center;
356
- width: 100%;
357
- box-sizing: border-box;
358
- }
359
-
360
- .bridge-sso-btn-inner {
361
- display: flex;
362
- align-items: center;
363
- gap: 0.75rem;
364
- width: 12rem;
365
- }
366
-
367
- .bridge-step-desc {
368
- font-size: 0.875rem;
369
- margin: 0 0 1rem;
370
- }
371
-
372
- /* TBP-635 — the card between a successful sign-in and the host app navigating. */
373
- .bridge-auth-settling {
374
- display: flex;
375
- align-items: center;
376
- justify-content: center;
377
- gap: 0.75rem;
378
- /* Roughly the height of the credentials form it replaces, so the card does
379
- not collapse and then re-expand under the cursor. */
380
- min-height: 8rem;
381
- color: var(--bridge-muted);
382
- font-size: 0.875rem;
383
- }
384
-
385
- .bridge-mfa-help {
386
- font-size: 0.8125rem;
387
- color: var(--bridge-muted);
388
- margin: 0.75rem 0 0.25rem;
389
- text-align: center;
390
- }
391
-
392
- .bridge-email-display {
393
- display: flex;
394
- align-items: center;
395
- justify-content: space-between;
396
- padding: 0.5rem 0.75rem;
397
- font-size: 0.875rem;
398
- }
399
-
400
- .bridge-forgot-row {
401
- margin-top: 0.5rem;
402
- text-align: right;
403
- font-size: 0.875rem;
404
- }
405
-
406
- .bridge-success-heading {
407
- font-size: 1.25rem;
408
- font-weight: 600;
409
- text-align: center;
410
- margin: 0 0 0.5rem;
411
- }
412
-
413
- /* ─── MfaSetup backup code ───────────────────────────────────────────────── */
414
-
415
- .bridge-backup-code {
416
- display: flex;
417
- align-items: center;
418
- gap: 0.75rem;
419
- margin-bottom: 1rem;
420
- padding: 0.75rem;
421
- background: var(--bridge-muted-bg, var(--bridge-bg-muted, #f3f4f6));
422
- border-radius: 0.5rem;
423
- }
424
-
425
- .bridge-backup-code code {
426
- flex: 1;
427
- font-size: 1.125rem;
428
- font-family: monospace;
429
- letter-spacing: 0.05em;
430
- white-space: nowrap;
431
- }
432
-
433
- /* ─── TenantSelector ─────────────────────────────────────────────────────── */
434
-
435
- .bridge-tenant-list {
436
- display: flex;
437
- flex-direction: column;
438
- gap: 0.5rem;
439
- }
440
-
441
- .bridge-tenant-item {
442
- display: flex;
443
- align-items: center;
444
- gap: 0.75rem;
445
- padding: 0.75rem;
446
- cursor: pointer;
447
- text-align: left;
448
- width: 100%;
449
- font-family: inherit;
450
- }
451
-
452
- .bridge-tenant-item:disabled,
453
- .bridge-tenant-item[data-loading="true"] {
454
- opacity: 0.5;
455
- cursor: not-allowed;
456
- }
457
-
458
- .bridge-tenant-avatar {
459
- width: 36px;
460
- height: 36px;
461
- border-radius: 50%;
462
- display: flex;
463
- align-items: center;
464
- justify-content: center;
465
- font-size: 0.875rem;
466
- font-weight: 600;
467
- flex-shrink: 0;
468
- overflow: hidden;
469
- }
470
-
471
- .bridge-tenant-avatar img {
472
- width: 100%;
473
- height: 100%;
474
- object-fit: cover;
475
- }
476
-
477
- .bridge-tenant-info {
478
- display: flex;
479
- flex-direction: column;
480
- flex: 1;
481
- min-width: 0;
482
- }
483
-
484
- .bridge-tenant-name {
485
- font-size: 0.875rem;
486
- font-weight: 500;
487
- }
488
-
489
- .bridge-tenant-user {
490
- font-size: 0.75rem;
491
- }
492
-
493
- /* ─── TeamManagementPanel ────────────────────────────────────────────────── */
494
-
495
- .bridge-team-tabs {
496
- display: flex;
497
- margin-bottom: 1.5rem;
498
- }
499
-
500
- .bridge-team-tab {
501
- padding: 0.75rem 1rem;
502
- border: none;
503
- background: transparent;
504
- font-size: 0.875rem;
505
- cursor: pointer;
506
- font-family: inherit;
507
- }
508
-
509
- :where(.bridge-team-tabs) {
510
- border-bottom: 1px solid var(--bridge-border);
511
- }
512
-
513
- :where(.bridge-team-tab) {
514
- color: var(--bridge-muted);
515
- }
516
-
517
- :where(.bridge-team-tab[data-active="true"]) {
518
- color: var(--bridge-primary);
519
- box-shadow: inset 0 -2px 0 var(--bridge-primary);
520
- }
521
-
522
- /* ─── TeamUserList ───────────────────────────────────────────────────────── */
523
-
524
- .bridge-team-users-header {
525
- display: flex;
526
- justify-content: space-between;
527
- align-items: center;
528
- margin-bottom: 1rem;
529
- }
530
-
531
- .bridge-team-users-title {
532
- margin: 0;
533
- font-size: 1.125rem;
534
- font-weight: 600;
535
- }
536
-
537
- .bridge-team-loading {
538
- display: flex;
539
- align-items: center;
540
- justify-content: center;
541
- gap: 0.75rem;
542
- padding: 3rem 1rem;
543
- font-size: 0.875rem;
544
- }
545
-
546
- .bridge-team-empty {
547
- text-align: center;
548
- padding: 3rem 1rem;
549
- }
550
-
551
- .bridge-team-empty p {
552
- margin: 0 0 1rem;
553
- }
554
-
555
- .bridge-team-table-wrapper {
556
- overflow-x: auto;
557
- }
558
-
559
- .bridge-team-table {
560
- width: 100%;
561
- border-collapse: collapse;
562
- font-size: 0.875rem;
563
- }
564
-
565
- .bridge-team-table th {
566
- text-align: left;
567
- padding: 0.75rem 1rem;
568
- font-weight: 500;
569
- font-size: 0.75rem;
570
- text-transform: uppercase;
571
- letter-spacing: 0.05em;
572
- }
573
-
574
- .bridge-team-table td {
575
- padding: 0.75rem 1rem;
576
- vertical-align: middle;
577
- }
578
-
579
- .bridge-team-user-cell {
580
- display: flex;
581
- flex-direction: column;
582
- }
583
-
584
- .bridge-team-user-name { font-weight: 500; }
585
-
586
- .bridge-team-user-email { font-size: 0.75rem; }
587
-
588
- .bridge-team-badge {
589
- display: inline-block;
590
- padding: 0.125rem 0.5rem;
591
- font-size: 0.75rem;
592
- }
593
-
594
- .bridge-team-status {
595
- display: inline-block;
596
- padding: 0.125rem 0.5rem;
597
- font-size: 0.75rem;
598
- }
599
-
600
- .bridge-team-actions-cell {
601
- width: 48px;
602
- text-align: right;
603
- }
604
-
605
- /* ─── TeamProfileForm / TeamWorkspaceForm ────────────────────────────────── */
606
-
607
- .bridge-team-section-title {
608
- margin: 0 0 1.5rem;
609
- font-size: 1.125rem;
610
- font-weight: 600;
611
- }
612
-
613
- .bridge-team-alert {
614
- margin-bottom: 1rem;
615
- }
616
-
617
- .bridge-team-form {
618
- display: flex;
619
- flex-direction: column;
620
- }
621
-
622
- .bridge-team-form-group {
623
- margin-bottom: 1rem;
624
- }
625
-
626
- .bridge-team-form-group label {
627
- display: block;
628
- margin-bottom: 0.25rem;
629
- font-size: 0.875rem;
630
- }
631
-
632
- .bridge-team-form-group input,
633
- .bridge-team-form-group select,
634
- .bridge-team-form-group textarea {
635
- width: 100%;
636
- padding: 0.5rem 0.75rem;
637
- font-size: 0.875rem;
638
- font-family: inherit;
639
- box-sizing: border-box;
640
- }
641
-
642
- .bridge-team-form-group textarea {
643
- resize: vertical;
644
- }
645
-
646
- .bridge-team-form-row {
647
- display: grid;
648
- grid-template-columns: 1fr 1fr;
649
- gap: 1rem;
650
- }
651
-
652
- .bridge-team-readonly {
653
- padding: 0.5rem 0;
654
- font-size: 0.875rem;
655
- }
656
-
657
- .bridge-team-form-actions {
658
- margin-top: 0.5rem;
659
- }
660
-
661
- .bridge-team-logo {
662
- margin-bottom: 1.5rem;
663
- }
664
-
665
- .bridge-team-logo img {
666
- max-width: 120px;
667
- max-height: 60px;
668
- object-fit: contain;
669
- }
670
-
671
- .bridge-team-checkbox-label {
672
- display: flex !important;
673
- align-items: center;
674
- gap: 0.5rem;
675
- cursor: pointer;
676
- }
677
-
678
- .bridge-team-checkbox-label input[type="checkbox"] {
679
- width: 1rem;
680
- height: 1rem;
681
- }
682
-
683
- /* ─── TeamUserActionsMenu ────────────────────────────────────────────────── */
684
-
685
- .bridge-team-actions {
686
- position: relative;
687
- display: inline-block;
688
- }
689
-
690
- .bridge-team-actions-trigger {
691
- display: flex;
692
- align-items: center;
693
- justify-content: center;
694
- width: 32px;
695
- height: 32px;
696
- border: none;
697
- background: transparent;
698
- cursor: pointer;
699
- }
700
-
701
- .bridge-team-actions-menu {
702
- position: absolute;
703
- right: 0;
704
- top: 100%;
705
- z-index: 10;
706
- min-width: 160px;
707
- }
708
-
709
- :where(.bridge-team-actions-menu) {
710
- background: var(--bridge-bg);
711
- color: var(--bridge-foreground);
712
- border: 1px solid var(--bridge-border);
713
- border-radius: var(--bridge-border-radius);
714
- }
715
-
716
- :where(.bridge-team-table th) {
717
- color: var(--bridge-muted);
718
- border-bottom: 1px solid var(--bridge-border);
719
- }
720
-
721
- :where(.bridge-team-table td) {
722
- border-bottom: 1px solid var(--bridge-border);
723
- }
724
-
725
- .bridge-team-actions-item {
726
- display: block;
727
- width: 100%;
728
- padding: 0.5rem 0.75rem;
729
- border: none;
730
- background: transparent;
731
- font-size: 0.875rem;
732
- text-align: left;
733
- cursor: pointer;
734
- font-family: inherit;
735
- }
736
-
737
- /* ─── Team Dialogs ───────────────────────────────────────────────────────── */
738
-
739
- /* The team dialogs carry [data-bridge-team-dialog]; the upgrade dialog the class. */
740
- .bridge-team-dialog,
741
- [data-bridge-team-dialog] {
742
- border: none;
743
- padding: 0;
744
- max-width: 400px;
745
- width: 90%;
746
- }
747
-
748
- :where(.bridge-team-dialog, [data-bridge-team-dialog]) {
749
- background: var(--bridge-bg);
750
- color: var(--bridge-foreground);
751
- border-radius: var(--bridge-border-radius);
752
- }
753
-
754
- .bridge-team-dialog::backdrop,
755
- [data-bridge-team-dialog]::backdrop {
756
- background: var(--bridge-overlay);
757
- }
758
-
759
- .bridge-team-dialog-content {
760
- padding: 1.5rem;
761
- }
762
-
763
- .bridge-team-dialog-title {
764
- margin: 0 0 0.5rem;
765
- font-size: 1.125rem;
766
- font-weight: 600;
767
- }
768
-
769
- .bridge-team-dialog-message,
770
- .bridge-team-dialog-subtitle {
771
- margin: 0 0 1rem;
772
- font-size: 0.875rem;
773
- }
774
-
775
- .bridge-team-dialog-error {
776
- margin-bottom: 1rem;
777
- }
778
-
779
- .bridge-team-dialog-actions {
780
- display: flex;
781
- justify-content: flex-end;
782
- gap: 0.5rem;
783
- }
784
-
785
- /* ─── ApiTokenManagement ─────────────────────────────────────────────────── */
786
-
787
- [data-bridge-api-tokens] {
788
- display: flex;
789
- flex-direction: column;
790
- gap: 1.5rem;
791
- }
792
-
793
- [data-bridge-api-tokens] .bridge-api-header {
794
- display: flex;
795
- align-items: center;
796
- justify-content: space-between;
797
- padding-bottom: 1rem;
798
- }
799
-
800
- [data-bridge-api-tokens] .bridge-api-title {
801
- font-size: 1.25rem;
802
- font-weight: 600;
803
- margin: 0;
804
- }
805
-
806
- [data-bridge-api-tokens] .bridge-api-subtitle {
807
- font-size: 0.875rem;
808
- margin: 0.25rem 0 0;
809
- }
810
-
811
- [data-bridge-api-tokens] .bridge-api-error-banner,
812
- [data-bridge-api-tokens] .bridge-api-success-banner {
813
- padding: 0.75rem;
814
- font-size: 0.875rem;
815
- }
816
-
817
- [data-bridge-api-tokens] .bridge-api-new-token-banner {
818
- padding: 1rem;
819
- display: flex;
820
- flex-direction: column;
821
- gap: 0.75rem;
822
- }
823
-
824
- [data-bridge-api-tokens] .bridge-api-new-token-warning {
825
- font-size: 0.875rem;
826
- font-weight: 500;
827
- margin: 0;
828
- }
829
-
830
- [data-bridge-api-tokens] .bridge-api-new-token-row {
831
- display: flex;
832
- align-items: center;
833
- gap: 0.5rem;
834
- }
835
-
836
- [data-bridge-api-tokens] .bridge-api-token-input {
837
- font-family: monospace;
838
- font-size: 0.875rem;
839
- flex: 1;
840
- }
841
-
842
- [data-bridge-api-tokens] .bridge-api-empty {
843
- text-align: center;
844
- padding: 2.5rem 1rem;
845
- font-size: 0.875rem;
846
- }
847
-
848
- [data-bridge-api-tokens][data-loading="true"] .bridge-api-empty {
849
- opacity: 0.6;
850
- }
851
-
852
- [data-bridge-api-tokens] .bridge-api-table {
853
- width: 100%;
854
- font-size: 0.875rem;
855
- border-collapse: collapse;
856
- }
857
-
858
- [data-bridge-api-tokens] .bridge-api-th {
859
- padding: 0.75rem 1rem;
860
- font-size: 0.75rem;
861
- text-transform: uppercase;
862
- letter-spacing: 0.05em;
863
- font-weight: 500;
864
- text-align: left;
865
- border-bottom: 1px solid var(--bridge-border);
866
- color: var(--bridge-muted);
867
- }
868
-
869
- [data-bridge-api-tokens] .bridge-api-td,
870
- [data-bridge-api-tokens] .bridge-api-td-name,
871
- [data-bridge-api-tokens] .bridge-api-td-muted {
872
- padding: 0.75rem 1rem;
873
- border-bottom: 1px solid var(--bridge-border);
874
- }
875
-
876
- [data-bridge-api-tokens] .bridge-api-td-muted {
877
- color: var(--bridge-muted);
878
- }
879
-
880
- [data-bridge-api-tokens] .bridge-api-td-actions {
881
- padding: 0.75rem 1rem;
882
- text-align: right;
883
- border-bottom: 1px solid var(--bridge-border);
884
- }
885
-
886
- [data-bridge-api-tokens] .bridge-api-privileges {
887
- display: flex;
888
- flex-wrap: wrap;
889
- gap: 0.25rem;
890
- }
891
-
892
- [data-bridge-api-tokens] .bridge-api-inline-form {
893
- border: 1px solid var(--bridge-border);
894
- border-radius: 0.5rem;
895
- padding: 1rem 1.25rem;
896
- }
897
-
898
- [data-bridge-api-tokens] .bridge-api-inline-form-title {
899
- font-size: 0.9375rem;
900
- font-weight: 600;
901
- margin: 0 0 0.875rem;
902
- }
903
-
904
- [data-bridge-api-tokens] .bridge-api-inline-form-fields {
905
- display: flex;
906
- flex-direction: column;
907
- gap: 0.75rem;
908
- }
909
-
910
- [data-bridge-api-tokens] .bridge-api-inline-form-row {
911
- display: flex;
912
- gap: 1rem;
913
- flex-wrap: wrap;
914
- align-items: flex-start;
915
- }
916
-
917
- [data-bridge-api-tokens] .bridge-api-inline-field {
918
- display: flex;
919
- flex-direction: column;
920
- flex: 1 1 160px;
921
- min-width: 0;
922
- }
923
-
924
- [data-bridge-api-tokens] .bridge-api-inline-field--narrow {
925
- flex: 0 1 160px;
926
- }
927
-
928
- [data-bridge-api-tokens] .bridge-api-inline-form-actions {
929
- display: flex;
930
- gap: 0.5rem;
931
- justify-content: flex-end;
932
- padding-top: 0.25rem;
933
- }
934
-
935
- [data-bridge-api-tokens] .bridge-api-hint {
936
- font-size: 0.75rem;
937
- margin: 0.25rem 0 0;
938
- }
939
-
940
- [data-bridge-api-tokens] .bridge-api-required {
941
- /* intentionally unstyled — consumer should color this */
942
- }
943
-
944
- [data-bridge-api-tokens] .bridge-api-form-error {
945
- font-size: 0.875rem;
946
- }
947
-
948
- [data-bridge-api-tokens] .bridge-privilege-picker { position: relative; }
949
- [data-bridge-api-tokens] .bridge-privilege-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; min-height: 2.25rem; cursor: pointer; padding: 0.375rem 0.5rem; align-items: center; }
950
- [data-bridge-api-tokens] .bridge-privilege-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; font-size: 0.75rem; }
951
- [data-bridge-api-tokens] .bridge-privilege-chip button { background: none; border: none; cursor: pointer; padding: 0; line-height: 1; }
952
- [data-bridge-api-tokens] .bridge-privilege-placeholder { font-size: 0.875rem; }
953
- [data-bridge-api-tokens] .bridge-privilege-dropdown { position: absolute; z-index: 20; width: 100%; max-height: 200px; overflow-y: auto; top: 100%; left: 0; }
954
- [data-bridge-api-tokens] .bridge-privilege-search { display: block; width: 100%; padding: 0.375rem 0.5rem; font-size: 0.875rem; font-family: inherit; box-sizing: border-box; border: none; border-bottom: 1px solid; outline: none; }
955
- [data-bridge-api-tokens] .bridge-privilege-option { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 0.375rem 0.75rem; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; }
956
- [data-bridge-api-tokens] .bridge-privilege-option-key { font-size: 0.875rem; font-weight: 500; }
957
- [data-bridge-api-tokens] .bridge-privilege-option-desc { font-size: 0.75rem; }
958
- [data-bridge-api-tokens] .bridge-privilege-empty { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
959
-
960
- .bridge-input {
961
- display: block;
962
- width: 100%;
963
- padding: 0.5rem 0.75rem;
964
- font-size: 0.875rem;
965
- font-family: inherit;
966
- box-sizing: border-box;
967
- }
968
-
969
- .bridge-label {
970
- display: block;
971
- font-size: 0.875rem;
972
- font-weight: 500;
973
- margin-bottom: 0.375rem;
974
- }
975
-
976
- .bridge-badge {
977
- display: inline-block;
978
- padding: 0.125rem 0.5rem;
979
- font-size: 0.7rem;
980
- font-family: monospace;
981
- }
982
-
983
- .bridge-dialog-overlay {
984
- position: fixed;
985
- inset: 0;
986
- z-index: 50;
987
- }
988
-
989
- .bridge-dialog {
990
- position: fixed;
991
- z-index: 51;
992
- left: 50%;
993
- top: 25%;
994
- transform: translateX(-50%);
995
- padding: 1.5rem;
996
- width: 90vw;
997
- max-width: 400px;
998
- }
999
-
1000
- .bridge-dialog-title {
1001
- font-size: 1.125rem;
1002
- font-weight: 600;
1003
- margin: 0 0 0.5rem 0;
1004
- }
1005
-
1006
- .bridge-dialog-body {
1007
- font-size: 0.875rem;
1008
- margin: 0 0 1.25rem 0;
1009
- }
1010
-
1011
- .bridge-dialog-footer {
1012
- display: flex;
1013
- justify-content: flex-end;
1014
- gap: 0.5rem;
1015
- }
1016
-
1017
- /* ─── PlanSelector ───────────────────────────────────────────────────────── */
1018
-
1019
- [data-bridge-plan-selector] {
1020
- position: relative;
1021
- }
1022
-
1023
- [data-bridge-plan-selector][data-loading="true"] {
1024
- pointer-events: none;
1025
- opacity: 0.7;
1026
- }
1027
-
1028
- .bridge-plan-loading {
1029
- display: flex;
1030
- align-items: center;
1031
- justify-content: center;
1032
- padding: 3rem 1rem;
1033
- }
1034
-
1035
- .bridge-plan-empty {
1036
- text-align: center;
1037
- padding: 2rem 1rem;
1038
- font-size: 0.875rem;
1039
- }
1040
-
1041
- .bridge-plan-payment-failed {
1042
- margin-bottom: 1.5rem;
1043
- }
1044
-
1045
- .bridge-plan-portal-btn {
1046
- margin-top: 0.75rem;
1047
- }
1048
-
1049
- /* TBP-813 — a heading beside the interval switch (`heading` prop). */
1050
- .bridge-plan-head {
1051
- display: flex;
1052
- flex-wrap: wrap;
1053
- align-items: center;
1054
- justify-content: space-between;
1055
- gap: 0.75rem;
1056
- margin-bottom: 1.25rem;
1057
- }
1058
-
1059
- .bridge-plan-heading {
1060
- margin: 0;
1061
- font-size: 1.05rem;
1062
- font-weight: 600;
1063
- }
1064
-
1065
- .bridge-plan-head .bridge-plan-interval-tabs {
1066
- margin: 0;
1067
- }
1068
-
1069
- .bridge-plan-interval-tabs {
1070
- /* Centered above the plan cards; flex + fit-content (not inline-flex) so
1071
- auto margins can center it regardless of the host page's text alignment. */
1072
- display: flex;
1073
- width: fit-content;
1074
- margin-inline: auto;
1075
- gap: 0.25rem;
1076
- margin-bottom: 1.25rem;
1077
- padding: 0.25rem;
1078
- border: 1px solid var(--bridge-border);
1079
- border-radius: var(--bridge-border-radius);
1080
- background: var(--bridge-card-bg, var(--bridge-bg));
1081
- }
1082
-
1083
- .bridge-plan-interval-tab {
1084
- appearance: none;
1085
- border: none;
1086
- background: transparent;
1087
- cursor: pointer;
1088
- font: inherit;
1089
- font-size: 0.8125rem;
1090
- padding: 0.375rem 0.875rem;
1091
- border-radius: calc(var(--bridge-border-radius) - 0.2rem);
1092
- color: var(--bridge-muted);
1093
- }
1094
-
1095
- .bridge-plan-interval-tab[data-active="true"] {
1096
- background: var(--bridge-primary);
1097
- color: var(--bridge-primary-fg, var(--bridge-primary-foreground, #ffffff));
1098
- }
1099
-
1100
- .bridge-plan-unavailable {
1101
- margin: 0;
1102
- font-size: 0.8125rem;
1103
- color: var(--bridge-muted);
1104
- }
1105
-
1106
- /* Plan-change confirmation dialog + success notice (TBP-33) */
1107
- .bridge-plan-success {
1108
- margin-bottom: 1rem;
1109
- }
1110
-
1111
- .bridge-plan-confirm-backdrop {
1112
- position: fixed;
1113
- inset: 0;
1114
- background: var(--bridge-overlay);
1115
- display: grid;
1116
- place-items: center;
1117
- z-index: 1000;
1118
- padding: 1.25rem;
1119
- }
1120
-
1121
- .bridge-plan-confirm {
1122
- background: var(--bridge-bg);
1123
- border: 1px solid var(--bridge-border);
1124
- border-radius: var(--bridge-border-radius);
1125
- box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.35);
1126
- max-width: 26rem;
1127
- width: 100%;
1128
- padding: 1.25rem 1.25rem 1rem;
1129
- display: flex;
1130
- flex-direction: column;
1131
- gap: 0.75rem;
1132
- }
1133
-
1134
- .bridge-plan-confirm-title {
1135
- margin: 0;
1136
- font-size: 1rem;
1137
- font-weight: 600;
1138
- }
1139
-
1140
- .bridge-plan-confirm-body {
1141
- margin: 0;
1142
- font-size: 0.875rem;
1143
- line-height: 1.5;
1144
- }
1145
-
1146
- .bridge-plan-confirm-note {
1147
- margin: 0;
1148
- font-size: 0.8125rem;
1149
- color: var(--bridge-muted);
1150
- line-height: 1.5;
1151
- }
1152
-
1153
- .bridge-plan-confirm-actions {
1154
- display: flex;
1155
- justify-content: flex-end;
1156
- gap: 0.5rem;
1157
- margin-top: 0.25rem;
1158
- }
1159
-
1160
- .bridge-plan-cards {
1161
- display: grid;
1162
- grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
1163
- gap: 1rem;
1164
- align-items: stretch;
1165
- }
1166
-
1167
- /* TBP-813 — cards, and the current-plan panel, are surfaces of their own, so
1168
- they read on any app background and take the app's tokens. */
1169
- [data-bridge-plan-card],
1170
- .bridge-billing-summary {
1171
- background: var(--bridge-card-bg, var(--bridge-bg));
1172
- color: var(--bridge-foreground);
1173
- border: 1px solid var(--bridge-border);
1174
- border-radius: calc(var(--bridge-border-radius) * 1.5);
1175
- box-shadow: var(--bridge-card-shadow, 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.04));
1176
- }
1177
-
1178
- .bridge-billing-summary {
1179
- padding: 1.1rem 1.25rem;
1180
- background: color-mix(in srgb, var(--bridge-primary) 6%, var(--bridge-card-bg, var(--bridge-bg)));
1181
- }
1182
-
1183
- .bridge-billing-summary .bss-plan {
1184
- font-size: 1.2rem;
1185
- font-weight: 700;
1186
- }
1187
-
1188
- .bridge-billing-summary-meta {
1189
- font-size: 0.85rem;
1190
- color: var(--bridge-muted);
1191
- font-variant-numeric: tabular-nums;
1192
- }
1193
-
1194
- [data-bridge-plan-card] {
1195
- position: relative;
1196
- padding: 1.35rem 1.25rem 1.25rem;
1197
- display: flex;
1198
- flex-direction: column;
1199
- gap: 0.9rem;
1200
- }
1201
-
1202
- [data-bridge-plan-card][data-current="true"] {
1203
- border: 2px solid var(--bridge-primary);
1204
- padding: calc(1.35rem - 1px) calc(1.25rem - 1px) calc(1.25rem - 1px);
1205
- }
1206
-
1207
- .bridge-plan-current-flag {
1208
- position: absolute;
1209
- top: -0.7rem;
1210
- left: 1.1rem;
1211
- padding: 0.15rem 0.55rem;
1212
- border-radius: 9999px;
1213
- font-size: 0.7rem;
1214
- font-weight: 600;
1215
- background: var(--bridge-primary);
1216
- color: var(--bridge-primary-fg, var(--bridge-primary-foreground, #ffffff));
1217
- }
1218
-
1219
- .bridge-plan-card-header {
1220
- display: flex;
1221
- align-items: flex-start;
1222
- justify-content: space-between;
1223
- gap: 0.5rem;
1224
- }
1225
-
1226
- .bridge-plan-name {
1227
- margin: 0;
1228
- font-size: 1rem;
1229
- font-weight: 600;
1230
- }
1231
-
1232
- .bridge-plan-trial-badge {
1233
- display: inline-block;
1234
- padding: 0.125rem 0.5rem;
1235
- font-size: 0.7rem;
1236
- font-weight: 600;
1237
- white-space: nowrap;
1238
- border-radius: 9999px;
1239
- border: 1px solid var(--bridge-alert-info-border);
1240
- background: var(--bridge-alert-info-bg);
1241
- color: var(--bridge-alert-info-fg);
1242
- }
1243
-
1244
- .bridge-plan-price {
1245
- display: flex;
1246
- align-items: baseline;
1247
- flex-wrap: wrap;
1248
- gap: 0.3rem;
1249
- font-variant-numeric: tabular-nums;
1250
- }
1251
-
1252
- .bridge-plan-price-amount {
1253
- font-size: 1.9rem;
1254
- font-weight: 700;
1255
- letter-spacing: -0.02em;
1256
- line-height: 1.1;
1257
- }
1258
-
1259
- .bridge-plan-price-interval {
1260
- font-size: 0.85rem;
1261
- color: var(--bridge-muted);
1262
- }
1263
-
1264
- .bridge-plan-description {
1265
- margin: 0;
1266
- font-size: 0.875rem;
1267
- color: var(--bridge-muted);
1268
- }
1269
-
1270
- /* TBP-755 — the features a plan includes. */
1271
- .bridge-plan-features {
1272
- margin: 0;
1273
- padding: 0.9rem 0 0;
1274
- border-top: 1px solid var(--bridge-border);
1275
- list-style: none;
1276
- font-size: 0.875rem;
1277
- display: flex;
1278
- flex-direction: column;
1279
- gap: 0.45rem;
1280
- }
1281
-
1282
- .bridge-plan-feature {
1283
- display: flex;
1284
- align-items: flex-start;
1285
- gap: 0.5rem;
1286
- }
1287
-
1288
- .bridge-plan-feature-check {
1289
- flex: none;
1290
- margin-top: 0.2rem;
1291
- color: var(--bridge-primary);
1292
- }
1293
-
1294
- .bridge-plan-prices {
1295
- display: flex;
1296
- flex-direction: column;
1297
- gap: 0.5rem;
1298
- margin-top: auto;
1299
- }
1300
-
1301
- .bridge-plan-select-btn {
1302
- width: 100%;
1303
- text-align: center;
1304
- }
1305
-
1306
- [data-bridge-plan-card][data-current="true"] .bridge-plan-select-btn:disabled {
1307
- background: transparent;
1308
- color: var(--bridge-muted);
1309
- opacity: 1;
1310
- }
1311
-
1312
- /* ─── BridgeCheckoutNotice (TBP-813) ─────────────────────────────────────── */
1313
-
1314
- .bridge-checkout-notice {
1315
- display: flex;
1316
- align-items: flex-start;
1317
- gap: 0.75rem;
1318
- padding: 0.85rem 1rem;
1319
- border: 1px solid var(--bridge-alert-success-border);
1320
- border-radius: var(--bridge-border-radius);
1321
- background: var(--bridge-alert-success-bg);
1322
- color: var(--bridge-alert-success-fg);
1323
- font-size: 0.875rem;
1324
- }
1325
-
1326
- .bridge-checkout-notice-icon {
1327
- flex: none;
1328
- margin-top: 0.1rem;
1329
- }
1330
-
1331
- .bridge-checkout-notice-body {
1332
- flex: 1;
1333
- min-width: 0;
1334
- }
1335
-
1336
- .bridge-checkout-notice-title {
1337
- display: block;
1338
- font-weight: 600;
1339
- }
1340
-
1341
- .bridge-checkout-notice-close {
1342
- appearance: none;
1343
- border: 0;
1344
- background: none;
1345
- color: inherit;
1346
- cursor: pointer;
1347
- font: inherit;
1348
- font-size: 1.15rem;
1349
- line-height: 1;
1350
- padding: 0 0.2rem;
1351
- opacity: 0.7;
1352
- }
1353
-
1354
- .bridge-checkout-notice-close:hover,
1355
- .bridge-checkout-notice-close:focus-visible {
1356
- opacity: 1;
1357
- }
1358
-
1359
- /* ─── WorkspaceSelector ─────────────────────────────────────────────── */
1360
-
1361
- [data-bridge-workspace-selector] {
1362
- display: flex;
1363
- flex-direction: column;
1364
- gap: 0.25rem;
1365
- }
1366
-
1367
- [data-bridge-workspace-loading] {
1368
- display: flex;
1369
- justify-content: center;
1370
- padding: 1.5rem 0;
1371
- }
1372
-
1373
- [data-bridge-workspace-list] {
1374
- display: flex;
1375
- flex-direction: column;
1376
- gap: 0.25rem;
1377
- }
1378
-
1379
- [data-bridge-workspace-item] {
1380
- display: flex;
1381
- align-items: center;
1382
- gap: 0.75rem;
1383
- width: 100%;
1384
- padding: 0.625rem 0.75rem;
1385
- background: none;
1386
- border: 1px solid transparent;
1387
- border-radius: 0.5rem;
1388
- cursor: pointer;
1389
- text-align: left;
1390
- font-family: inherit;
1391
- transition: background 0.15s;
1392
- }
1393
-
1394
- [data-bridge-workspace-item]:hover:not(:disabled) {
1395
- background: var(--bridge-muted-bg, var(--bridge-bg-muted, #f3f4f6));
1396
- }
1397
-
1398
- [data-bridge-workspace-item][data-active="true"] {
1399
- background: var(--bridge-primary-light, color-mix(in srgb, var(--bridge-primary) 10%, #ffffff));
1400
- border-color: var(--bridge-primary);
1401
- }
1402
-
1403
- [data-bridge-workspace-item][data-loading="true"] {
1404
- opacity: 0.7;
1405
- cursor: wait;
1406
- }
1407
-
1408
- [data-bridge-workspace-item]:disabled {
1409
- cursor: not-allowed;
1410
- }
1411
-
1412
- [data-bridge-workspace-avatar] {
1413
- display: flex;
1414
- align-items: center;
1415
- justify-content: center;
1416
- width: 2rem;
1417
- height: 2rem;
1418
- border-radius: 0.375rem;
1419
- background: var(--bridge-primary);
1420
- color: var(--bridge-primary-fg, var(--bridge-primary-foreground, #ffffff));
1421
- font-size: 0.875rem;
1422
- font-weight: 600;
1423
- flex-shrink: 0;
1424
- overflow: hidden;
1425
- }
1426
-
1427
- [data-bridge-workspace-avatar] img {
1428
- width: 100%;
1429
- height: 100%;
1430
- object-fit: cover;
1431
- }
1432
-
1433
- [data-bridge-workspace-info] {
1434
- display: flex;
1435
- flex-direction: column;
1436
- gap: 0.125rem;
1437
- flex: 1;
1438
- min-width: 0;
1439
- }
1440
-
1441
- [data-bridge-workspace-name] {
1442
- font-size: 0.875rem;
1443
- font-weight: 500;
1444
- color: var(--bridge-foreground);
1445
- white-space: nowrap;
1446
- overflow: hidden;
1447
- text-overflow: ellipsis;
1448
- }
1449
-
1450
- [data-bridge-workspace-user] {
1451
- font-size: 0.75rem;
1452
- color: var(--bridge-muted);
1453
- white-space: nowrap;
1454
- overflow: hidden;
1455
- text-overflow: ellipsis;
75
+ /* ─── The cascade layer (TBP-814) ──────────────────────────────────────────
76
+ *
77
+ * Every Bridge rule lives in the `bridge` layer, so ANY CSS your app writes
78
+ * outside a layer wins over it — whatever its specificity, whatever the load
79
+ * order, no !important. Restyle a Bridge element with plain CSS:
80
+ *
81
+ * .bridge-btn-primary:hover { transform: translate(-2px, -2px); }
82
+ * [data-bridge-plan-card] { border-width: 2px; }
83
+ *
84
+ * Write those overrides outside any @layer. CSS inside a layer ranks below
85
+ * `bridge` unless that layer is declared after it.
86
+ *
87
+ * The order statement puts `bridge` after the layers Tailwind v4 declares, so
88
+ * its base reset can never strip Bridge's buttons, whichever stylesheet loads
89
+ * first. An app without those layers is unaffected: the names stay empty.
90
+ */
91
+ @layer theme, base, components, utilities, bridge;
92
+
93
+ /* ─── Text size follows the app (TBP-814) ──────────────────────────────── */
94
+
95
+ /* Registered so `1em` resolves where it is declared — the <body> — and
96
+ inherits as a fixed length. Unregistered, `1em` would resolve again at every
97
+ element that reads it, and sizes would compound inside nested Bridge parts. */
98
+ @property --bridge-text-base {
99
+ syntax: '<length>';
100
+ inherits: true;
101
+ initial-value: 16px;
102
+ }
103
+
104
+ @layer bridge {
105
+ :where(body) {
106
+ --bridge-text-base: var(--bridge-font-size, 1em);
107
+ }
108
+
109
+ /* ─── Token defaults — zero specificity, so the app's :root always wins ──── */
110
+
111
+ :where(:root) {
112
+ /* Derived tokens (primary-hover, primary-fg, primary-light, input-focus,
113
+ muted-bg, paywall-panel-bg) have no value here on purpose: each falls back
114
+ to its source where it is used, so setting --bridge-primary on a wrapper
115
+ re-derives them for that wrapper too. */
116
+ --bridge-primary: #4f46e5;
117
+ --bridge-bg: #ffffff;
118
+ --bridge-foreground: #111827;
119
+ --bridge-muted: #6b7280;
120
+ --bridge-border: #d1d5db;
121
+ --bridge-border-radius: 6px;
122
+ --bridge-overlay: rgba(15, 23, 42, 0.45);
123
+ --bridge-alert-error-bg: #fef2f2;
124
+ --bridge-alert-error-fg: #991b1b;
125
+ --bridge-alert-error-border: #fca5a5;
126
+ --bridge-alert-success-bg: #f0fdf4;
127
+ --bridge-alert-success-fg: #166534;
128
+ --bridge-alert-success-border: #86efac;
129
+ --bridge-alert-info-bg: #eff6ff;
130
+ --bridge-alert-info-fg: #1e40af;
131
+ --bridge-alert-info-border: #bfdbfe;
132
+ --bridge-alert-warning-bg: #fffbeb;
133
+ --bridge-alert-warning-fg: #92400e;
134
+ --bridge-alert-warning-border: #fcd34d;
135
+
136
+ --bridge-auth-page-padding: 3rem 1rem;
137
+ --bridge-billing-page-width: 60rem;
138
+ --bridge-billing-page-padding: 3rem 1rem;
139
+ --bridge-paywall-bg: rgba(15, 23, 42, 0.72);
140
+ }
141
+
142
+ /* ─── Input visual defaults ──────────────────────────────────────────────── */
143
+
144
+ :where(input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
145
+ .bridge-input) {
146
+ border: 1px solid var(--bridge-border);
147
+ border-radius: var(--bridge-border-radius);
148
+ outline: none;
149
+ }
150
+ :where(input[type="text"]:focus, input[type="email"]:focus,
151
+ input[type="password"]:focus, input[type="tel"]:focus,
152
+ .bridge-input:focus) {
153
+ border-color: var(--bridge-input-focus, var(--bridge-primary));
154
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--bridge-input-focus, var(--bridge-primary)) 20%, transparent);
155
+ }
156
+
157
+ /* ─── Buttons ────────────────────────────────────────────────────────────── */
158
+
159
+ .bridge-btn,
160
+ .bridge-btn-primary,
161
+ .bridge-btn-secondary,
162
+ .bridge-btn-outline,
163
+ .bridge-btn-danger,
164
+ .bridge-btn-danger-sm {
165
+ display: inline-flex;
166
+ align-items: center;
167
+ justify-content: center;
168
+ gap: 0.5rem;
169
+ padding: 0.5rem 1rem;
170
+ cursor: pointer;
171
+ font-family: inherit;
172
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
173
+ font-weight: var(--bridge-font-weight-button, 500);
174
+ line-height: 1.25;
175
+ white-space: nowrap;
176
+ box-shadow: var(--bridge-button-shadow, none);
177
+ transition: opacity 0.15s;
178
+ }
179
+
180
+ .bridge-btn:disabled,
181
+ .bridge-btn-primary:disabled,
182
+ .bridge-btn-secondary:disabled,
183
+ .bridge-btn-outline:disabled,
184
+ .bridge-btn-danger:disabled {
185
+ cursor: not-allowed;
186
+ opacity: 0.5;
187
+ }
188
+
189
+ .bridge-btn-danger-sm {
190
+ padding: 0.25rem 0.625rem;
191
+ font-size: calc(0.75 * var(--bridge-text-base, 1rem));
192
+ cursor: pointer;
193
+ }
194
+
195
+ /* ─── Button visual defaults ─────────────────────────────────────────────── */
196
+
197
+ :where(.bridge-btn-primary) {
198
+ background-color: var(--bridge-primary);
199
+ color: var(--bridge-primary-fg, var(--bridge-primary-foreground, #ffffff));
200
+ border: 1px solid var(--bridge-primary);
201
+ border-radius: var(--bridge-border-radius);
202
+ }
203
+ :where(.bridge-btn-primary:hover:not(:disabled)) {
204
+ background-color: var(--bridge-primary-hover, color-mix(in srgb, var(--bridge-primary) 85%, #000000));
205
+ border-color: var(--bridge-primary-hover, color-mix(in srgb, var(--bridge-primary) 85%, #000000));
206
+ }
207
+ :where(.bridge-btn-secondary, .bridge-btn-outline) {
208
+ background-color: transparent;
209
+ color: inherit;
210
+ border: 1px solid var(--bridge-border);
211
+ border-radius: var(--bridge-border-radius);
212
+ }
213
+ :where(.bridge-btn-secondary:hover:not(:disabled), .bridge-btn-outline:hover:not(:disabled)) {
214
+ background-color: color-mix(in srgb, currentColor 5%, transparent);
215
+ }
216
+
217
+ /* ─── Spinner ─────────────────────────────────────────────────────────────── */
218
+
219
+ [data-bridge-spinner] {
220
+ display: inline-block;
221
+ border: 2px solid currentColor;
222
+ border-top-color: transparent;
223
+ border-radius: 50%;
224
+ animation: bridge-spin 0.6s linear infinite;
225
+ }
226
+
227
+ @keyframes bridge-spin {
228
+ to { transform: rotate(360deg); }
229
+ }
230
+
231
+ /* ─── Alert ───────────────────────────────────────────────────────────────── */
232
+
233
+ [data-bridge-alert] {
234
+ padding: 0.625rem 0.875rem;
235
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
236
+ }
237
+
238
+ :where([data-bridge-alert]) {
239
+ border-radius: var(--bridge-border-radius);
240
+ border: 1px solid var(--bridge-border);
241
+ }
242
+ :where([data-bridge-alert][data-variant="error"]) {
243
+ background-color: var(--bridge-alert-error-bg);
244
+ color: var(--bridge-alert-error-fg);
245
+ border-color: var(--bridge-alert-error-border);
246
+ }
247
+ :where([data-bridge-alert][data-variant="success"]) {
248
+ background-color: var(--bridge-alert-success-bg);
249
+ color: var(--bridge-alert-success-fg);
250
+ border-color: var(--bridge-alert-success-border);
251
+ }
252
+
253
+ /* ─── AuthFormWrapper ─────────────────────────────────────────────────────── */
254
+
255
+ [data-bridge-auth-form] {
256
+ width: 100%;
257
+ max-width: 400px;
258
+ margin: 0 auto;
259
+ }
260
+
261
+ [data-bridge-auth-form] label {
262
+ display: block;
263
+ margin-bottom: 0.25rem;
264
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
265
+ }
266
+
267
+ [data-bridge-auth-form] input[type="text"],
268
+ [data-bridge-auth-form] input[type="email"],
269
+ [data-bridge-auth-form] input[type="password"],
270
+ [data-bridge-auth-form] input[type="tel"] {
271
+ width: 100%;
272
+ padding: 0.5rem 0.75rem;
273
+ box-sizing: border-box;
274
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
275
+ }
276
+
277
+ [data-bridge-auth-form] .bridge-btn,
278
+ [data-bridge-auth-form] .bridge-btn-primary,
279
+ [data-bridge-auth-form] .bridge-btn-secondary,
280
+ [data-bridge-auth-form] [data-bridge-passkey-login] {
281
+ width: 100%;
282
+ display: flex;
283
+ align-items: center;
284
+ justify-content: center;
285
+ gap: 0.5rem;
286
+ box-sizing: border-box;
287
+ }
288
+
289
+ [data-bridge-auth-form] .bridge-form-group {
290
+ margin-bottom: 1rem;
291
+ }
292
+
293
+ [data-bridge-auth-form] .bridge-form-footer {
294
+ margin-top: 1rem;
295
+ text-align: center;
296
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
297
+ }
298
+
299
+ [data-bridge-auth-form] .bridge-form-footer a,
300
+ [data-bridge-auth-form] .bridge-link {
301
+ cursor: pointer;
302
+ background: none;
303
+ border: none;
304
+ font-size: inherit;
305
+ padding: 0;
306
+ text-decoration: underline;
307
+ }
308
+
309
+ [data-bridge-auth-form] .bridge-divider {
310
+ display: flex;
311
+ align-items: center;
312
+ margin: 1rem 0;
313
+ font-size: calc(0.75 * var(--bridge-text-base, 1rem));
314
+ text-transform: uppercase;
315
+ letter-spacing: 0.05em;
316
+ }
317
+
318
+ [data-bridge-auth-form] .bridge-divider::before,
319
+ [data-bridge-auth-form] .bridge-divider::after {
320
+ content: '';
321
+ flex: 1;
322
+ border-bottom: 1px solid;
323
+ }
324
+
325
+ [data-bridge-auth-form] .bridge-divider::before { margin-right: 0.5rem; }
326
+ [data-bridge-auth-form] .bridge-divider::after { margin-left: 0.5rem; }
327
+
328
+ /* ─── PasskeyLogin ────────────────────────────────────────────────────────── */
329
+
330
+ [data-bridge-passkey-login] {
331
+ display: flex;
332
+ align-items: center;
333
+ justify-content: center;
334
+ gap: 0.5rem;
335
+ cursor: pointer;
336
+ font-family: inherit;
337
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
338
+ }
339
+
340
+ [data-bridge-passkey-login][data-loading="true"] {
341
+ cursor: not-allowed;
342
+ opacity: 0.5;
343
+ }
344
+
345
+ /* ─── SsoButton ──────────────────────────────────────────────────────────── */
346
+
347
+ [data-bridge-sso-button] {
348
+ display: flex;
349
+ align-items: center;
350
+ justify-content: center;
351
+ gap: 0.5rem;
352
+ width: 100%;
353
+ cursor: pointer;
354
+ font-family: inherit;
355
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
356
+ padding: 0.5rem 1rem;
357
+ box-sizing: border-box;
358
+ }
359
+
360
+ /* ─── Password visibility toggle ─────────────────────────────────────────── */
361
+
362
+ .bridge-password-wrapper {
363
+ position: relative;
364
+ }
365
+
366
+ .bridge-password-wrapper input {
367
+ padding-right: 2.5rem;
368
+ }
369
+
370
+ .bridge-password-toggle {
371
+ position: absolute;
372
+ right: 0.5rem;
373
+ top: 50%;
374
+ transform: translateY(-50%);
375
+ display: flex;
376
+ align-items: center;
377
+ justify-content: center;
378
+ background: none;
379
+ border: none;
380
+ cursor: pointer;
381
+ padding: 0.25rem;
382
+ color: var(--bridge-muted);
383
+ line-height: 1;
384
+ }
385
+
386
+ .bridge-password-toggle:hover {
387
+ color: var(--bridge-foreground);
388
+ }
389
+
390
+ /* ─── Auth form helpers ───────────────────────────────────────────────────── */
391
+
392
+ .bridge-sso-row {
393
+ margin-bottom: 0.5rem;
394
+ }
395
+
396
+ .bridge-sso-btn {
397
+ display: flex;
398
+ align-items: center;
399
+ justify-content: center;
400
+ width: 100%;
401
+ box-sizing: border-box;
402
+ }
403
+
404
+ .bridge-sso-btn-inner {
405
+ display: flex;
406
+ align-items: center;
407
+ gap: 0.75rem;
408
+ width: 12rem;
409
+ }
410
+
411
+ .bridge-step-desc {
412
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
413
+ margin: 0 0 1rem;
414
+ }
415
+
416
+ /* TBP-635 — the card between a successful sign-in and the host app navigating. */
417
+ .bridge-auth-settling {
418
+ display: flex;
419
+ align-items: center;
420
+ justify-content: center;
421
+ gap: 0.75rem;
422
+ /* Roughly the height of the credentials form it replaces, so the card does
423
+ not collapse and then re-expand under the cursor. */
424
+ min-height: 8rem;
425
+ color: var(--bridge-muted);
426
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
427
+ }
428
+
429
+ .bridge-mfa-help {
430
+ font-size: calc(0.8125 * var(--bridge-text-base, 1rem));
431
+ color: var(--bridge-muted);
432
+ margin: 0.75rem 0 0.25rem;
433
+ text-align: center;
434
+ }
435
+
436
+ .bridge-email-display {
437
+ display: flex;
438
+ align-items: center;
439
+ justify-content: space-between;
440
+ padding: 0.5rem 0.75rem;
441
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
442
+ }
443
+
444
+ .bridge-forgot-row {
445
+ margin-top: 0.5rem;
446
+ text-align: right;
447
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
448
+ }
449
+
450
+ .bridge-success-heading {
451
+ font-size: calc(1.25 * var(--bridge-text-base, 1rem));
452
+ font-weight: var(--bridge-font-weight-heading, 600);
453
+ text-align: center;
454
+ margin: 0 0 0.5rem;
455
+ }
456
+
457
+ /* ─── MfaSetup backup code ───────────────────────────────────────────────── */
458
+
459
+ .bridge-backup-code {
460
+ display: flex;
461
+ align-items: center;
462
+ gap: 0.75rem;
463
+ margin-bottom: 1rem;
464
+ padding: 0.75rem;
465
+ background: var(--bridge-muted-bg, var(--bridge-bg-muted, #f3f4f6));
466
+ border-radius: 0.5rem;
467
+ }
468
+
469
+ .bridge-backup-code code {
470
+ flex: 1;
471
+ font-size: calc(1.125 * var(--bridge-text-base, 1rem));
472
+ font-family: monospace;
473
+ letter-spacing: 0.05em;
474
+ white-space: nowrap;
475
+ }
476
+
477
+ /* ─── TenantSelector ─────────────────────────────────────────────────────── */
478
+
479
+ .bridge-tenant-list {
480
+ display: flex;
481
+ flex-direction: column;
482
+ gap: 0.5rem;
483
+ }
484
+
485
+ .bridge-tenant-item {
486
+ display: flex;
487
+ align-items: center;
488
+ gap: 0.75rem;
489
+ padding: 0.75rem;
490
+ cursor: pointer;
491
+ text-align: left;
492
+ width: 100%;
493
+ font-family: inherit;
494
+ }
495
+
496
+ .bridge-tenant-item:disabled,
497
+ .bridge-tenant-item[data-loading="true"] {
498
+ opacity: 0.5;
499
+ cursor: not-allowed;
500
+ }
501
+
502
+ .bridge-tenant-avatar {
503
+ width: 36px;
504
+ height: 36px;
505
+ border-radius: 50%;
506
+ display: flex;
507
+ align-items: center;
508
+ justify-content: center;
509
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
510
+ font-weight: 600;
511
+ flex-shrink: 0;
512
+ overflow: hidden;
513
+ }
514
+
515
+ .bridge-tenant-avatar img {
516
+ width: 100%;
517
+ height: 100%;
518
+ object-fit: cover;
519
+ }
520
+
521
+ .bridge-tenant-info {
522
+ display: flex;
523
+ flex-direction: column;
524
+ flex: 1;
525
+ min-width: 0;
526
+ }
527
+
528
+ .bridge-tenant-name {
529
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
530
+ font-weight: var(--bridge-font-weight-label, 500);
531
+ }
532
+
533
+ .bridge-tenant-user {
534
+ font-size: calc(0.75 * var(--bridge-text-base, 1rem));
535
+ }
536
+
537
+ /* ─── TeamManagementPanel ────────────────────────────────────────────────── */
538
+
539
+ .bridge-team-tabs {
540
+ display: flex;
541
+ margin-bottom: 1.5rem;
542
+ }
543
+
544
+ .bridge-team-tab {
545
+ padding: 0.75rem 1rem;
546
+ border: none;
547
+ background: transparent;
548
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
549
+ cursor: pointer;
550
+ font-family: inherit;
551
+ }
552
+
553
+ :where(.bridge-team-tabs) {
554
+ border-bottom: 1px solid var(--bridge-border);
555
+ }
556
+
557
+ :where(.bridge-team-tab) {
558
+ color: var(--bridge-muted);
559
+ }
560
+
561
+ :where(.bridge-team-tab[data-active="true"]) {
562
+ color: var(--bridge-primary);
563
+ box-shadow: inset 0 -2px 0 var(--bridge-primary);
564
+ }
565
+
566
+ /* ─── TeamUserList ───────────────────────────────────────────────────────── */
567
+
568
+ .bridge-team-users-header {
569
+ display: flex;
570
+ justify-content: space-between;
571
+ align-items: center;
572
+ margin-bottom: 1rem;
573
+ }
574
+
575
+ .bridge-team-users-title {
576
+ margin: 0;
577
+ font-size: calc(1.125 * var(--bridge-text-base, 1rem));
578
+ font-weight: var(--bridge-font-weight-heading, 600);
579
+ }
580
+
581
+ .bridge-team-loading {
582
+ display: flex;
583
+ align-items: center;
584
+ justify-content: center;
585
+ gap: 0.75rem;
586
+ padding: 3rem 1rem;
587
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
588
+ }
589
+
590
+ .bridge-team-empty {
591
+ text-align: center;
592
+ padding: 3rem 1rem;
593
+ }
594
+
595
+ .bridge-team-empty p {
596
+ margin: 0 0 1rem;
597
+ }
598
+
599
+ .bridge-team-table-wrapper {
600
+ overflow-x: auto;
601
+ }
602
+
603
+ .bridge-team-table {
604
+ width: 100%;
605
+ border-collapse: collapse;
606
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
607
+ }
608
+
609
+ .bridge-team-table th {
610
+ text-align: left;
611
+ padding: 0.75rem 1rem;
612
+ font-weight: var(--bridge-font-weight-label, 500);
613
+ font-size: calc(0.75 * var(--bridge-text-base, 1rem));
614
+ text-transform: uppercase;
615
+ letter-spacing: 0.05em;
616
+ }
617
+
618
+ .bridge-team-table td {
619
+ padding: 0.75rem 1rem;
620
+ vertical-align: middle;
621
+ }
622
+
623
+ .bridge-team-user-cell {
624
+ display: flex;
625
+ flex-direction: column;
626
+ }
627
+
628
+ .bridge-team-user-name { font-weight: var(--bridge-font-weight-label, 500); }
629
+
630
+ .bridge-team-user-email { font-size: calc(0.75 * var(--bridge-text-base, 1rem)); }
631
+
632
+ .bridge-team-badge {
633
+ display: inline-block;
634
+ padding: 0.125rem 0.5rem;
635
+ font-size: calc(0.75 * var(--bridge-text-base, 1rem));
636
+ }
637
+
638
+ .bridge-team-status {
639
+ display: inline-block;
640
+ padding: 0.125rem 0.5rem;
641
+ font-size: calc(0.75 * var(--bridge-text-base, 1rem));
642
+ }
643
+
644
+ .bridge-team-actions-cell {
645
+ width: 48px;
646
+ text-align: right;
647
+ }
648
+
649
+ /* ─── TeamProfileForm / TeamWorkspaceForm ────────────────────────────────── */
650
+
651
+ .bridge-team-section-title {
652
+ margin: 0 0 1.5rem;
653
+ font-size: calc(1.125 * var(--bridge-text-base, 1rem));
654
+ font-weight: var(--bridge-font-weight-heading, 600);
655
+ }
656
+
657
+ .bridge-team-alert {
658
+ margin-bottom: 1rem;
659
+ }
660
+
661
+ .bridge-team-form {
662
+ display: flex;
663
+ flex-direction: column;
664
+ }
665
+
666
+ .bridge-team-form-group {
667
+ margin-bottom: 1rem;
668
+ }
669
+
670
+ .bridge-team-form-group label {
671
+ display: block;
672
+ margin-bottom: 0.25rem;
673
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
674
+ }
675
+
676
+ .bridge-team-form-group input,
677
+ .bridge-team-form-group select,
678
+ .bridge-team-form-group textarea {
679
+ width: 100%;
680
+ padding: 0.5rem 0.75rem;
681
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
682
+ font-family: inherit;
683
+ box-sizing: border-box;
684
+ }
685
+
686
+ .bridge-team-form-group textarea {
687
+ resize: vertical;
688
+ }
689
+
690
+ .bridge-team-form-row {
691
+ display: grid;
692
+ grid-template-columns: 1fr 1fr;
693
+ gap: 1rem;
694
+ }
695
+
696
+ .bridge-team-readonly {
697
+ padding: 0.5rem 0;
698
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
699
+ }
700
+
701
+ .bridge-team-form-actions {
702
+ margin-top: 0.5rem;
703
+ }
704
+
705
+ .bridge-team-logo {
706
+ margin-bottom: 1.5rem;
707
+ }
708
+
709
+ .bridge-team-logo img {
710
+ max-width: 120px;
711
+ max-height: 60px;
712
+ object-fit: contain;
713
+ }
714
+
715
+ .bridge-team-checkbox-label {
716
+ display: flex !important;
717
+ align-items: center;
718
+ gap: 0.5rem;
719
+ cursor: pointer;
720
+ }
721
+
722
+ .bridge-team-checkbox-label input[type="checkbox"] {
723
+ width: 1rem;
724
+ height: 1rem;
725
+ }
726
+
727
+ /* ─── TeamUserActionsMenu ────────────────────────────────────────────────── */
728
+
729
+ .bridge-team-actions {
730
+ position: relative;
731
+ display: inline-block;
732
+ }
733
+
734
+ .bridge-team-actions-trigger {
735
+ display: flex;
736
+ align-items: center;
737
+ justify-content: center;
738
+ width: 32px;
739
+ height: 32px;
740
+ border: none;
741
+ background: transparent;
742
+ cursor: pointer;
743
+ }
744
+
745
+ .bridge-team-actions-menu {
746
+ position: absolute;
747
+ right: 0;
748
+ top: 100%;
749
+ z-index: 10;
750
+ min-width: 160px;
751
+ }
752
+
753
+ :where(.bridge-team-actions-menu) {
754
+ background: var(--bridge-bg);
755
+ color: var(--bridge-foreground);
756
+ border: 1px solid var(--bridge-border);
757
+ border-radius: var(--bridge-border-radius);
758
+ }
759
+
760
+ :where(.bridge-team-table th) {
761
+ color: var(--bridge-muted);
762
+ border-bottom: 1px solid var(--bridge-border);
763
+ }
764
+
765
+ :where(.bridge-team-table td) {
766
+ border-bottom: 1px solid var(--bridge-border);
767
+ }
768
+
769
+ .bridge-team-actions-item {
770
+ display: block;
771
+ width: 100%;
772
+ padding: 0.5rem 0.75rem;
773
+ border: none;
774
+ background: transparent;
775
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
776
+ text-align: left;
777
+ cursor: pointer;
778
+ font-family: inherit;
779
+ }
780
+
781
+ /* ─── Team Dialogs ───────────────────────────────────────────────────────── */
782
+
783
+ /* The team dialogs carry [data-bridge-team-dialog]; the upgrade dialog the class. */
784
+ .bridge-team-dialog,
785
+ [data-bridge-team-dialog] {
786
+ border: none;
787
+ padding: 0;
788
+ max-width: 400px;
789
+ width: 90%;
790
+ }
791
+
792
+ :where(.bridge-team-dialog, [data-bridge-team-dialog]) {
793
+ background: var(--bridge-bg);
794
+ color: var(--bridge-foreground);
795
+ border-radius: var(--bridge-border-radius);
796
+ }
797
+
798
+ .bridge-team-dialog::backdrop,
799
+ [data-bridge-team-dialog]::backdrop {
800
+ background: var(--bridge-overlay);
801
+ }
802
+
803
+ .bridge-team-dialog-content {
804
+ padding: 1.5rem;
805
+ }
806
+
807
+ .bridge-team-dialog-title {
808
+ margin: 0 0 0.5rem;
809
+ font-size: calc(1.125 * var(--bridge-text-base, 1rem));
810
+ font-weight: var(--bridge-font-weight-heading, 600);
811
+ }
812
+
813
+ .bridge-team-dialog-message,
814
+ .bridge-team-dialog-subtitle {
815
+ margin: 0 0 1rem;
816
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
817
+ }
818
+
819
+ .bridge-team-dialog-error {
820
+ margin-bottom: 1rem;
821
+ }
822
+
823
+ .bridge-team-dialog-actions {
824
+ display: flex;
825
+ justify-content: flex-end;
826
+ gap: 0.5rem;
827
+ }
828
+
829
+ /* ─── ApiTokenManagement ─────────────────────────────────────────────────── */
830
+
831
+ [data-bridge-api-tokens] {
832
+ display: flex;
833
+ flex-direction: column;
834
+ gap: 1.5rem;
835
+ }
836
+
837
+ [data-bridge-api-tokens] .bridge-api-header {
838
+ display: flex;
839
+ align-items: center;
840
+ justify-content: space-between;
841
+ padding-bottom: 1rem;
842
+ }
843
+
844
+ [data-bridge-api-tokens] .bridge-api-title {
845
+ font-size: calc(1.25 * var(--bridge-text-base, 1rem));
846
+ font-weight: var(--bridge-font-weight-heading, 600);
847
+ margin: 0;
848
+ }
849
+
850
+ [data-bridge-api-tokens] .bridge-api-subtitle {
851
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
852
+ margin: 0.25rem 0 0;
853
+ }
854
+
855
+ [data-bridge-api-tokens] .bridge-api-error-banner,
856
+ [data-bridge-api-tokens] .bridge-api-success-banner {
857
+ padding: 0.75rem;
858
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
859
+ }
860
+
861
+ [data-bridge-api-tokens] .bridge-api-new-token-banner {
862
+ padding: 1rem;
863
+ display: flex;
864
+ flex-direction: column;
865
+ gap: 0.75rem;
866
+ }
867
+
868
+ [data-bridge-api-tokens] .bridge-api-new-token-warning {
869
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
870
+ font-weight: var(--bridge-font-weight-label, 500);
871
+ margin: 0;
872
+ }
873
+
874
+ [data-bridge-api-tokens] .bridge-api-new-token-row {
875
+ display: flex;
876
+ align-items: center;
877
+ gap: 0.5rem;
878
+ }
879
+
880
+ [data-bridge-api-tokens] .bridge-api-token-input {
881
+ font-family: monospace;
882
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
883
+ flex: 1;
884
+ }
885
+
886
+ [data-bridge-api-tokens] .bridge-api-empty {
887
+ text-align: center;
888
+ padding: 2.5rem 1rem;
889
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
890
+ }
891
+
892
+ [data-bridge-api-tokens][data-loading="true"] .bridge-api-empty {
893
+ opacity: 0.6;
894
+ }
895
+
896
+ [data-bridge-api-tokens] .bridge-api-table {
897
+ width: 100%;
898
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
899
+ border-collapse: collapse;
900
+ }
901
+
902
+ [data-bridge-api-tokens] .bridge-api-th {
903
+ padding: 0.75rem 1rem;
904
+ font-size: calc(0.75 * var(--bridge-text-base, 1rem));
905
+ text-transform: uppercase;
906
+ letter-spacing: 0.05em;
907
+ font-weight: var(--bridge-font-weight-label, 500);
908
+ text-align: left;
909
+ border-bottom: 1px solid var(--bridge-border);
910
+ color: var(--bridge-muted);
911
+ }
912
+
913
+ [data-bridge-api-tokens] .bridge-api-td,
914
+ [data-bridge-api-tokens] .bridge-api-td-name,
915
+ [data-bridge-api-tokens] .bridge-api-td-muted {
916
+ padding: 0.75rem 1rem;
917
+ border-bottom: 1px solid var(--bridge-border);
918
+ }
919
+
920
+ [data-bridge-api-tokens] .bridge-api-td-muted {
921
+ color: var(--bridge-muted);
922
+ }
923
+
924
+ [data-bridge-api-tokens] .bridge-api-td-actions {
925
+ padding: 0.75rem 1rem;
926
+ text-align: right;
927
+ border-bottom: 1px solid var(--bridge-border);
928
+ }
929
+
930
+ [data-bridge-api-tokens] .bridge-api-privileges {
931
+ display: flex;
932
+ flex-wrap: wrap;
933
+ gap: 0.25rem;
934
+ }
935
+
936
+ [data-bridge-api-tokens] .bridge-api-inline-form {
937
+ border: 1px solid var(--bridge-border);
938
+ border-radius: 0.5rem;
939
+ padding: 1rem 1.25rem;
940
+ }
941
+
942
+ [data-bridge-api-tokens] .bridge-api-inline-form-title {
943
+ font-size: calc(0.9375 * var(--bridge-text-base, 1rem));
944
+ font-weight: var(--bridge-font-weight-heading, 600);
945
+ margin: 0 0 0.875rem;
946
+ }
947
+
948
+ [data-bridge-api-tokens] .bridge-api-inline-form-fields {
949
+ display: flex;
950
+ flex-direction: column;
951
+ gap: 0.75rem;
952
+ }
953
+
954
+ [data-bridge-api-tokens] .bridge-api-inline-form-row {
955
+ display: flex;
956
+ gap: 1rem;
957
+ flex-wrap: wrap;
958
+ align-items: flex-start;
959
+ }
960
+
961
+ [data-bridge-api-tokens] .bridge-api-inline-field {
962
+ display: flex;
963
+ flex-direction: column;
964
+ flex: 1 1 160px;
965
+ min-width: 0;
966
+ }
967
+
968
+ [data-bridge-api-tokens] .bridge-api-inline-field--narrow {
969
+ flex: 0 1 160px;
970
+ }
971
+
972
+ [data-bridge-api-tokens] .bridge-api-inline-form-actions {
973
+ display: flex;
974
+ gap: 0.5rem;
975
+ justify-content: flex-end;
976
+ padding-top: 0.25rem;
977
+ }
978
+
979
+ [data-bridge-api-tokens] .bridge-api-hint {
980
+ font-size: calc(0.75 * var(--bridge-text-base, 1rem));
981
+ margin: 0.25rem 0 0;
982
+ }
983
+
984
+ [data-bridge-api-tokens] .bridge-api-required {
985
+ /* intentionally unstyled — consumer should color this */
986
+ }
987
+
988
+ [data-bridge-api-tokens] .bridge-api-form-error {
989
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
990
+ }
991
+
992
+ [data-bridge-api-tokens] .bridge-privilege-picker { position: relative; }
993
+ [data-bridge-api-tokens] .bridge-privilege-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; min-height: 2.25rem; cursor: pointer; padding: 0.375rem 0.5rem; align-items: center; }
994
+ [data-bridge-api-tokens] .bridge-privilege-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; font-size: calc(0.75 * var(--bridge-text-base, 1rem)); }
995
+ [data-bridge-api-tokens] .bridge-privilege-chip button { background: none; border: none; cursor: pointer; padding: 0; line-height: 1; }
996
+ [data-bridge-api-tokens] .bridge-privilege-placeholder { font-size: calc(0.875 * var(--bridge-text-base, 1rem)); }
997
+ [data-bridge-api-tokens] .bridge-privilege-dropdown { position: absolute; z-index: 20; width: 100%; max-height: 200px; overflow-y: auto; top: 100%; left: 0; }
998
+ [data-bridge-api-tokens] .bridge-privilege-search { display: block; width: 100%; padding: 0.375rem 0.5rem; font-size: calc(0.875 * var(--bridge-text-base, 1rem)); font-family: inherit; box-sizing: border-box; border: none; border-bottom: 1px solid; outline: none; }
999
+ [data-bridge-api-tokens] .bridge-privilege-option { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 0.375rem 0.75rem; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; }
1000
+ [data-bridge-api-tokens] .bridge-privilege-option-key { font-size: calc(0.875 * var(--bridge-text-base, 1rem)); font-weight: var(--bridge-font-weight-label, 500); }
1001
+ [data-bridge-api-tokens] .bridge-privilege-option-desc { font-size: calc(0.75 * var(--bridge-text-base, 1rem)); }
1002
+ [data-bridge-api-tokens] .bridge-privilege-empty { padding: 0.5rem 0.75rem; font-size: calc(0.875 * var(--bridge-text-base, 1rem)); }
1003
+
1004
+ .bridge-input {
1005
+ display: block;
1006
+ width: 100%;
1007
+ padding: 0.5rem 0.75rem;
1008
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
1009
+ font-family: inherit;
1010
+ box-sizing: border-box;
1011
+ }
1012
+
1013
+ .bridge-label {
1014
+ display: block;
1015
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
1016
+ font-weight: var(--bridge-font-weight-label, 500);
1017
+ margin-bottom: 0.375rem;
1018
+ }
1019
+
1020
+ .bridge-badge {
1021
+ display: inline-block;
1022
+ padding: 0.125rem 0.5rem;
1023
+ font-size: calc(0.7 * var(--bridge-text-base, 1rem));
1024
+ font-family: monospace;
1025
+ }
1026
+
1027
+ .bridge-dialog-overlay {
1028
+ position: fixed;
1029
+ inset: 0;
1030
+ z-index: 50;
1031
+ }
1032
+
1033
+ .bridge-dialog {
1034
+ position: fixed;
1035
+ z-index: 51;
1036
+ left: 50%;
1037
+ top: 25%;
1038
+ transform: translateX(-50%);
1039
+ padding: 1.5rem;
1040
+ width: 90vw;
1041
+ max-width: 400px;
1042
+ }
1043
+
1044
+ .bridge-dialog-title {
1045
+ font-size: calc(1.125 * var(--bridge-text-base, 1rem));
1046
+ font-weight: var(--bridge-font-weight-heading, 600);
1047
+ margin: 0 0 0.5rem 0;
1048
+ }
1049
+
1050
+ .bridge-dialog-body {
1051
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
1052
+ margin: 0 0 1.25rem 0;
1053
+ }
1054
+
1055
+ .bridge-dialog-footer {
1056
+ display: flex;
1057
+ justify-content: flex-end;
1058
+ gap: 0.5rem;
1059
+ }
1060
+
1061
+ /* ─── PlanSelector ───────────────────────────────────────────────────────── */
1062
+
1063
+ [data-bridge-plan-selector] {
1064
+ position: relative;
1065
+ }
1066
+
1067
+ [data-bridge-plan-selector][data-loading="true"] {
1068
+ pointer-events: none;
1069
+ opacity: 0.7;
1070
+ }
1071
+
1072
+ .bridge-plan-loading {
1073
+ display: flex;
1074
+ align-items: center;
1075
+ justify-content: center;
1076
+ padding: 3rem 1rem;
1077
+ }
1078
+
1079
+ .bridge-plan-empty {
1080
+ text-align: center;
1081
+ padding: 2rem 1rem;
1082
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
1083
+ }
1084
+
1085
+ .bridge-plan-payment-failed {
1086
+ margin-bottom: 1.5rem;
1087
+ }
1088
+
1089
+ .bridge-plan-portal-btn {
1090
+ margin-top: 0.75rem;
1091
+ }
1092
+
1093
+ /* TBP-813 — a heading beside the interval switch (`heading` prop). */
1094
+ .bridge-plan-head {
1095
+ display: flex;
1096
+ flex-wrap: wrap;
1097
+ align-items: center;
1098
+ justify-content: space-between;
1099
+ gap: 0.75rem;
1100
+ margin-bottom: 1.25rem;
1101
+ }
1102
+
1103
+ .bridge-plan-heading {
1104
+ margin: 0;
1105
+ font-size: calc(1.05 * var(--bridge-text-base, 1rem));
1106
+ font-weight: var(--bridge-font-weight-heading, 600);
1107
+ }
1108
+
1109
+ .bridge-plan-head .bridge-plan-interval-tabs {
1110
+ margin: 0;
1111
+ }
1112
+
1113
+ .bridge-plan-interval-tabs {
1114
+ /* Centered above the plan cards; flex + fit-content (not inline-flex) so
1115
+ auto margins can center it regardless of the host page's text alignment. */
1116
+ display: flex;
1117
+ width: fit-content;
1118
+ margin-inline: auto;
1119
+ gap: 0.25rem;
1120
+ margin-bottom: 1.25rem;
1121
+ padding: 0.25rem;
1122
+ border: 1px solid var(--bridge-border);
1123
+ border-radius: var(--bridge-border-radius);
1124
+ background: var(--bridge-card-bg, var(--bridge-bg));
1125
+ }
1126
+
1127
+ .bridge-plan-interval-tab {
1128
+ appearance: none;
1129
+ border: none;
1130
+ background: transparent;
1131
+ cursor: pointer;
1132
+ font: inherit;
1133
+ font-size: calc(0.8125 * var(--bridge-text-base, 1rem));
1134
+ padding: 0.375rem 0.875rem;
1135
+ border-radius: calc(var(--bridge-border-radius) - 0.2rem);
1136
+ color: var(--bridge-muted);
1137
+ }
1138
+
1139
+ .bridge-plan-interval-tab[data-active="true"] {
1140
+ background: var(--bridge-primary);
1141
+ color: var(--bridge-primary-fg, var(--bridge-primary-foreground, #ffffff));
1142
+ }
1143
+
1144
+ .bridge-plan-unavailable {
1145
+ margin: 0;
1146
+ font-size: calc(0.8125 * var(--bridge-text-base, 1rem));
1147
+ color: var(--bridge-muted);
1148
+ }
1149
+
1150
+ /* Plan-change confirmation dialog + success notice (TBP-33) */
1151
+ .bridge-plan-success {
1152
+ margin-bottom: 1rem;
1153
+ }
1154
+
1155
+ .bridge-plan-confirm-backdrop {
1156
+ position: fixed;
1157
+ inset: 0;
1158
+ background: var(--bridge-overlay);
1159
+ display: grid;
1160
+ place-items: center;
1161
+ z-index: 1000;
1162
+ padding: 1.25rem;
1163
+ }
1164
+
1165
+ .bridge-plan-confirm {
1166
+ background: var(--bridge-bg);
1167
+ border: 1px solid var(--bridge-border);
1168
+ border-radius: var(--bridge-border-radius);
1169
+ box-shadow: var(--bridge-card-shadow, 0 24px 60px -12px rgba(0, 0, 0, 0.35));
1170
+ max-width: 26rem;
1171
+ width: 100%;
1172
+ padding: 1.25rem 1.25rem 1rem;
1173
+ display: flex;
1174
+ flex-direction: column;
1175
+ gap: 0.75rem;
1176
+ }
1177
+
1178
+ .bridge-plan-confirm-title {
1179
+ margin: 0;
1180
+ font-size: calc(1 * var(--bridge-text-base, 1rem));
1181
+ font-weight: var(--bridge-font-weight-heading, 600);
1182
+ }
1183
+
1184
+ .bridge-plan-confirm-body {
1185
+ margin: 0;
1186
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
1187
+ line-height: 1.5;
1188
+ }
1189
+
1190
+ .bridge-plan-confirm-note {
1191
+ margin: 0;
1192
+ font-size: calc(0.8125 * var(--bridge-text-base, 1rem));
1193
+ color: var(--bridge-muted);
1194
+ line-height: 1.5;
1195
+ }
1196
+
1197
+ .bridge-plan-confirm-actions {
1198
+ display: flex;
1199
+ justify-content: flex-end;
1200
+ gap: 0.5rem;
1201
+ margin-top: 0.25rem;
1202
+ }
1203
+
1204
+ .bridge-plan-cards {
1205
+ display: grid;
1206
+ grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
1207
+ gap: 1rem;
1208
+ align-items: stretch;
1209
+ }
1210
+
1211
+ /* TBP-813 — cards, and the current-plan panel, are surfaces of their own, so
1212
+ they read on any app background and take the app's tokens. */
1213
+ [data-bridge-plan-card],
1214
+ .bridge-billing-summary {
1215
+ background: var(--bridge-card-bg, var(--bridge-bg));
1216
+ color: var(--bridge-foreground);
1217
+ border: 1px solid var(--bridge-border);
1218
+ border-radius: calc(var(--bridge-border-radius) * 1.5);
1219
+ box-shadow: var(--bridge-card-shadow, 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.04));
1220
+ }
1221
+
1222
+ .bridge-billing-summary {
1223
+ padding: 1.1rem 1.25rem;
1224
+ background: color-mix(in srgb, var(--bridge-primary) 6%, var(--bridge-card-bg, var(--bridge-bg)));
1225
+ }
1226
+
1227
+ .bridge-billing-summary .bss-plan {
1228
+ font-size: calc(1.2 * var(--bridge-text-base, 1rem));
1229
+ font-weight: var(--bridge-font-weight-heading, 700);
1230
+ }
1231
+
1232
+ .bridge-billing-summary-meta {
1233
+ font-size: calc(0.85 * var(--bridge-text-base, 1rem));
1234
+ color: var(--bridge-muted);
1235
+ font-variant-numeric: tabular-nums;
1236
+ }
1237
+
1238
+ [data-bridge-plan-card] {
1239
+ position: relative;
1240
+ padding: 1.35rem 1.25rem 1.25rem;
1241
+ display: flex;
1242
+ flex-direction: column;
1243
+ gap: 0.9rem;
1244
+ }
1245
+
1246
+ [data-bridge-plan-card][data-current="true"] {
1247
+ border: 2px solid var(--bridge-primary);
1248
+ padding: calc(1.35rem - 1px) calc(1.25rem - 1px) calc(1.25rem - 1px);
1249
+ }
1250
+
1251
+ .bridge-plan-current-flag {
1252
+ position: absolute;
1253
+ top: -0.7rem;
1254
+ left: 1.1rem;
1255
+ padding: 0.15rem 0.55rem;
1256
+ border-radius: 9999px;
1257
+ font-size: calc(0.7 * var(--bridge-text-base, 1rem));
1258
+ font-weight: var(--bridge-font-weight-label, 600);
1259
+ background: var(--bridge-primary);
1260
+ color: var(--bridge-primary-fg, var(--bridge-primary-foreground, #ffffff));
1261
+ }
1262
+
1263
+ .bridge-plan-card-header {
1264
+ display: flex;
1265
+ align-items: flex-start;
1266
+ justify-content: space-between;
1267
+ gap: 0.5rem;
1268
+ }
1269
+
1270
+ .bridge-plan-name {
1271
+ margin: 0;
1272
+ font-size: calc(1 * var(--bridge-text-base, 1rem));
1273
+ font-weight: var(--bridge-font-weight-heading, 600);
1274
+ }
1275
+
1276
+ .bridge-plan-trial-badge {
1277
+ display: inline-block;
1278
+ padding: 0.125rem 0.5rem;
1279
+ font-size: calc(0.7 * var(--bridge-text-base, 1rem));
1280
+ font-weight: var(--bridge-font-weight-label, 600);
1281
+ white-space: nowrap;
1282
+ border-radius: 9999px;
1283
+ border: 1px solid var(--bridge-alert-info-border);
1284
+ background: var(--bridge-alert-info-bg);
1285
+ color: var(--bridge-alert-info-fg);
1286
+ }
1287
+
1288
+ .bridge-plan-price {
1289
+ display: flex;
1290
+ align-items: baseline;
1291
+ flex-wrap: wrap;
1292
+ gap: 0.3rem;
1293
+ font-variant-numeric: tabular-nums;
1294
+ }
1295
+
1296
+ .bridge-plan-price-amount {
1297
+ font-size: calc(1.9 * var(--bridge-text-base, 1rem));
1298
+ font-weight: var(--bridge-font-weight-heading, 700);
1299
+ letter-spacing: -0.02em;
1300
+ line-height: 1.1;
1301
+ }
1302
+
1303
+ .bridge-plan-price-interval {
1304
+ font-size: calc(0.85 * var(--bridge-text-base, 1rem));
1305
+ color: var(--bridge-muted);
1306
+ }
1307
+
1308
+ .bridge-plan-description {
1309
+ margin: 0;
1310
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
1311
+ color: var(--bridge-muted);
1312
+ }
1313
+
1314
+ /* TBP-755 — the features a plan includes. */
1315
+ .bridge-plan-features {
1316
+ margin: 0;
1317
+ padding: 0.9rem 0 0;
1318
+ border-top: 1px solid var(--bridge-border);
1319
+ list-style: none;
1320
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
1321
+ display: flex;
1322
+ flex-direction: column;
1323
+ gap: 0.45rem;
1324
+ }
1325
+
1326
+ .bridge-plan-feature {
1327
+ display: flex;
1328
+ align-items: flex-start;
1329
+ gap: 0.5rem;
1330
+ }
1331
+
1332
+ .bridge-plan-feature-check {
1333
+ flex: none;
1334
+ margin-top: 0.2rem;
1335
+ color: var(--bridge-primary);
1336
+ }
1337
+
1338
+ .bridge-plan-prices {
1339
+ display: flex;
1340
+ flex-direction: column;
1341
+ gap: 0.5rem;
1342
+ margin-top: auto;
1343
+ }
1344
+
1345
+ .bridge-plan-select-btn {
1346
+ width: 100%;
1347
+ text-align: center;
1348
+ }
1349
+
1350
+ [data-bridge-plan-card][data-current="true"] .bridge-plan-select-btn:disabled {
1351
+ background: transparent;
1352
+ color: var(--bridge-muted);
1353
+ opacity: 1;
1354
+ }
1355
+
1356
+ /* ─── BridgeCheckoutNotice (TBP-813) ─────────────────────────────────────── */
1357
+
1358
+ .bridge-checkout-notice {
1359
+ display: flex;
1360
+ align-items: flex-start;
1361
+ gap: 0.75rem;
1362
+ padding: 0.85rem 1rem;
1363
+ border: 1px solid var(--bridge-alert-success-border);
1364
+ border-radius: var(--bridge-border-radius);
1365
+ background: var(--bridge-alert-success-bg);
1366
+ color: var(--bridge-alert-success-fg);
1367
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
1368
+ }
1369
+
1370
+ .bridge-checkout-notice-icon {
1371
+ flex: none;
1372
+ margin-top: 0.1rem;
1373
+ }
1374
+
1375
+ .bridge-checkout-notice-body {
1376
+ flex: 1;
1377
+ min-width: 0;
1378
+ }
1379
+
1380
+ .bridge-checkout-notice-title {
1381
+ display: block;
1382
+ font-weight: var(--bridge-font-weight-heading, 600);
1383
+ }
1384
+
1385
+ .bridge-checkout-notice-close {
1386
+ appearance: none;
1387
+ border: 0;
1388
+ background: none;
1389
+ color: inherit;
1390
+ cursor: pointer;
1391
+ font: inherit;
1392
+ font-size: calc(1.15 * var(--bridge-text-base, 1rem));
1393
+ line-height: 1;
1394
+ padding: 0 0.2rem;
1395
+ opacity: 0.7;
1396
+ }
1397
+
1398
+ .bridge-checkout-notice-close:hover,
1399
+ .bridge-checkout-notice-close:focus-visible {
1400
+ opacity: 1;
1401
+ }
1402
+
1403
+ /* ─── WorkspaceSelector ─────────────────────────────────────────────── */
1404
+
1405
+ [data-bridge-workspace-selector] {
1406
+ display: flex;
1407
+ flex-direction: column;
1408
+ gap: 0.25rem;
1409
+ }
1410
+
1411
+ [data-bridge-workspace-loading] {
1412
+ display: flex;
1413
+ justify-content: center;
1414
+ padding: 1.5rem 0;
1415
+ }
1416
+
1417
+ [data-bridge-workspace-list] {
1418
+ display: flex;
1419
+ flex-direction: column;
1420
+ gap: 0.25rem;
1421
+ }
1422
+
1423
+ [data-bridge-workspace-item] {
1424
+ display: flex;
1425
+ align-items: center;
1426
+ gap: 0.75rem;
1427
+ width: 100%;
1428
+ padding: 0.625rem 0.75rem;
1429
+ background: none;
1430
+ border: 1px solid transparent;
1431
+ border-radius: 0.5rem;
1432
+ cursor: pointer;
1433
+ text-align: left;
1434
+ font-family: inherit;
1435
+ transition: background 0.15s;
1436
+ }
1437
+
1438
+ [data-bridge-workspace-item]:hover:not(:disabled) {
1439
+ background: var(--bridge-muted-bg, var(--bridge-bg-muted, #f3f4f6));
1440
+ }
1441
+
1442
+ [data-bridge-workspace-item][data-active="true"] {
1443
+ background: var(--bridge-primary-light, color-mix(in srgb, var(--bridge-primary) 10%, #ffffff));
1444
+ border-color: var(--bridge-primary);
1445
+ }
1446
+
1447
+ [data-bridge-workspace-item][data-loading="true"] {
1448
+ opacity: 0.7;
1449
+ cursor: wait;
1450
+ }
1451
+
1452
+ [data-bridge-workspace-item]:disabled {
1453
+ cursor: not-allowed;
1454
+ }
1455
+
1456
+ [data-bridge-workspace-avatar] {
1457
+ display: flex;
1458
+ align-items: center;
1459
+ justify-content: center;
1460
+ width: 2rem;
1461
+ height: 2rem;
1462
+ border-radius: 0.375rem;
1463
+ background: var(--bridge-primary);
1464
+ color: var(--bridge-primary-fg, var(--bridge-primary-foreground, #ffffff));
1465
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
1466
+ font-weight: 600;
1467
+ flex-shrink: 0;
1468
+ overflow: hidden;
1469
+ }
1470
+
1471
+ [data-bridge-workspace-avatar] img {
1472
+ width: 100%;
1473
+ height: 100%;
1474
+ object-fit: cover;
1475
+ }
1476
+
1477
+ [data-bridge-workspace-info] {
1478
+ display: flex;
1479
+ flex-direction: column;
1480
+ gap: 0.125rem;
1481
+ flex: 1;
1482
+ min-width: 0;
1483
+ }
1484
+
1485
+ [data-bridge-workspace-name] {
1486
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
1487
+ font-weight: var(--bridge-font-weight-label, 500);
1488
+ color: var(--bridge-foreground);
1489
+ white-space: nowrap;
1490
+ overflow: hidden;
1491
+ text-overflow: ellipsis;
1492
+ }
1493
+
1494
+ [data-bridge-workspace-user] {
1495
+ font-size: calc(0.75 * var(--bridge-text-base, 1rem));
1496
+ color: var(--bridge-muted);
1497
+ white-space: nowrap;
1498
+ overflow: hidden;
1499
+ text-overflow: ellipsis;
1500
+ }
1456
1501
  }