@teseor/css 1.2.1 → 1.2.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 (4) hide show
  1. package/dist/compiled.css +1 -4564
  2. package/dist/index.css +1 -4546
  3. package/package.json +1 -1
  4. package/src/03-layout/sidebar-nav/index.scss +1 -1
package/dist/compiled.css CHANGED
@@ -1,4564 +1 @@
1
- @charset "UTF-8";
2
- /**
3
- * CSS Library - Main Entry Point
4
- *
5
- * Import order follows numbered folder structure for cascade control.
6
- */
7
- /* 00. Config: Layer definitions + Design tokens */
8
- /* Fonts (Google Fonts CDN) */
9
- @import "https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700&family=Noto+Sans+Mono:wght@400;500&display=swap";
10
- @layer reset, tokens, base, primitives, components.styles, components.tokens, utilities, themes;
11
- :root {
12
- --ui-color-primary: oklch(55% 0.22 250);
13
- --ui-color-success: oklch(60% 0.18 145);
14
- --ui-color-warning: oklch(75% 0.18 70);
15
- --ui-color-danger: oklch(60% 0.22 25);
16
- --ui-color-neutral: oklch(50% 0.02 250);
17
- --ui-color-primary-light: color-mix(in oklch, var(--ui-color-primary) 50%, white);
18
- --ui-color-primary-dark: color-mix(in oklch, var(--ui-color-primary) 75%, black);
19
- --ui-color-primary-subtle: color-mix(in oklch, var(--ui-color-primary) 12%, white);
20
- --ui-color-primary-hover: color-mix(in oklch, var(--ui-color-primary) 85%, black);
21
- --ui-color-neutral-50: color-mix(in oklch, var(--ui-color-neutral) 3%, white);
22
- --ui-color-neutral-100: color-mix(in oklch, var(--ui-color-neutral) 6%, white);
23
- --ui-color-neutral-200: color-mix(in oklch, var(--ui-color-neutral) 12%, white);
24
- --ui-color-neutral-300: color-mix(in oklch, var(--ui-color-neutral) 25%, white);
25
- --ui-color-neutral-400: color-mix(in oklch, var(--ui-color-neutral) 50%, white);
26
- --ui-color-neutral-500: var(--ui-color-neutral);
27
- --ui-color-neutral-600: color-mix(in oklch, var(--ui-color-neutral) 85%, black);
28
- --ui-color-neutral-700: color-mix(in oklch, var(--ui-color-neutral) 70%, black);
29
- --ui-color-neutral-800: color-mix(in oklch, var(--ui-color-neutral) 50%, black);
30
- --ui-color-neutral-900: color-mix(in oklch, var(--ui-color-neutral) 35%, black);
31
- }
32
-
33
- :root {
34
- --ui-space-px: calc(var(--unit) * 0.125);
35
- --ui-space-quarter: calc(var(--unit) * 0.25);
36
- --ui-space-half: calc(var(--unit) * 0.5);
37
- --ui-space-0: calc(var(--unit) * 0.5);
38
- --ui-space-1: var(--unit);
39
- --ui-space-2: calc(var(--unit) * 2);
40
- --ui-space-3: calc(var(--unit) * 3);
41
- --ui-space-4: calc(var(--unit) * 4);
42
- --ui-space-6: calc(var(--unit) * 6);
43
- --ui-space-8: calc(var(--unit) * 8);
44
- }
45
-
46
- :root {
47
- --ui-font-sans: "Noto Sans", system-ui, -apple-system, sans-serif;
48
- --ui-font-mono: "Noto Sans Mono", ui-monospace, "Cascadia Code", monospace;
49
- --ui-font-size-xs: 0.75rem;
50
- --ui-font-size-sm: 0.875rem;
51
- --ui-font-size-md: 1rem;
52
- --ui-font-size-lg: 1.25rem;
53
- --ui-font-size-xl: 1.5rem;
54
- --ui-font-size-2xl: 1.75rem;
55
- --ui-font-size-3xl: 2rem;
56
- --ui-font-size-4xl: 2.5rem;
57
- --ui-leading-tight-xs: var(--ui-row-1);
58
- --ui-leading-tight-sm: var(--ui-row-1);
59
- --ui-leading-tight-md: calc(var(--unit) * 3);
60
- --ui-leading-tight-lg: calc(var(--unit) * 3);
61
- --ui-leading-xs: var(--ui-row-1);
62
- --ui-leading-sm: calc(var(--unit) * 3);
63
- --ui-leading-md: calc(var(--unit) * 3);
64
- --ui-leading-lg: var(--ui-row-2);
65
- --ui-leading-xl: var(--ui-row-2);
66
- --ui-leading-2xl: var(--ui-row-2);
67
- --ui-leading-3xl: calc(var(--unit) * 5);
68
- --ui-leading-4xl: calc(var(--unit) * 6);
69
- --ui-weight-normal: 400;
70
- --ui-weight-medium: 500;
71
- --ui-weight-semibold: 600;
72
- --ui-weight-bold: 700;
73
- --ui-tracking-display: -0.02em;
74
- --ui-tracking-body: 0;
75
- --ui-tracking-caps: 0.08em;
76
- --ui-heading-1-size: var(--ui-font-size-4xl);
77
- --ui-heading-1-line-height: var(--ui-leading-4xl);
78
- --ui-heading-1-weight: var(--ui-weight-bold);
79
- --ui-heading-1-tracking: var(--ui-tracking-display);
80
- --ui-heading-2-size: var(--ui-font-size-3xl);
81
- --ui-heading-2-line-height: var(--ui-leading-3xl);
82
- --ui-heading-2-weight: var(--ui-weight-bold);
83
- --ui-heading-2-tracking: -0.01em;
84
- --ui-heading-3-size: var(--ui-font-size-2xl);
85
- --ui-heading-3-line-height: var(--ui-leading-2xl);
86
- --ui-heading-3-weight: var(--ui-weight-semibold);
87
- --ui-heading-3-tracking: var(--ui-tracking-body);
88
- --ui-heading-4-size: var(--ui-font-size-xl);
89
- --ui-heading-4-line-height: var(--ui-leading-xl);
90
- --ui-heading-4-weight: var(--ui-weight-semibold);
91
- --ui-heading-4-tracking: var(--ui-tracking-body);
92
- --ui-heading-5-size: var(--ui-font-size-lg);
93
- --ui-heading-5-line-height: var(--ui-leading-sm);
94
- --ui-heading-5-weight: var(--ui-weight-medium);
95
- --ui-heading-5-tracking: var(--ui-tracking-body);
96
- --ui-body-size: var(--ui-font-size-md);
97
- --ui-body-line-height: var(--ui-leading-md);
98
- --ui-body-weight: var(--ui-weight-normal);
99
- --ui-body-tracking: var(--ui-tracking-body);
100
- --ui-body-sm-size: var(--ui-font-size-sm);
101
- --ui-body-sm-line-height: var(--ui-leading-sm);
102
- --ui-body-sm-weight: var(--ui-weight-normal);
103
- --ui-body-sm-tracking: var(--ui-tracking-body);
104
- --ui-caption-size: var(--ui-font-size-xs);
105
- --ui-caption-line-height: var(--ui-leading-xs);
106
- --ui-caption-weight: var(--ui-weight-normal);
107
- --ui-caption-tracking: 0.01em;
108
- --ui-lead-size: var(--ui-font-size-lg);
109
- --ui-lead-line-height: var(--ui-leading-lg);
110
- --ui-lead-weight: var(--ui-weight-normal);
111
- --ui-lead-tracking: var(--ui-tracking-body);
112
- --ui-eyebrow-size: var(--ui-font-size-xs);
113
- --ui-eyebrow-line-height: var(--ui-leading-xs);
114
- --ui-eyebrow-weight: var(--ui-weight-semibold);
115
- --ui-eyebrow-tracking: var(--ui-tracking-caps);
116
- }
117
-
118
- :root {
119
- --unit: 8px; /* 8px */
120
- --ui-row: calc(var(--unit) * 2);
121
- --ui-row-1: var(--ui-row);
122
- --ui-row-2: calc(var(--ui-row) * 2);
123
- --ui-row-3: calc(var(--ui-row) * 3);
124
- --ui-row-4: calc(var(--ui-row) * 4);
125
- --ui-row-5: calc(var(--ui-row) * 5);
126
- --ui-row-6: calc(var(--ui-row) * 6);
127
- }
128
-
129
- :root {
130
- --ui-radius-sm: calc(var(--unit) * 0.5);
131
- --ui-radius-md: var(--unit);
132
- --ui-radius-lg: calc(var(--unit) * 2);
133
- --ui-radius-full: 9999px;
134
- }
135
-
136
- :root {
137
- --ui-border-width-sm: calc(var(--unit) * 0.125);
138
- --ui-border-width-md: calc(var(--unit) * 0.25);
139
- --ui-border-width-lg: calc(var(--unit) * 0.5);
140
- }
141
-
142
- :root {
143
- --shadow-sm: 0 1px 2px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.05);
144
- --shadow-md: 0 4px 6px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.1);
145
- --shadow-lg: 0 10px 15px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.15);
146
- }
147
-
148
- @layer tokens {
149
- :root {
150
- --ui-z-base: 0;
151
- --ui-z-sticky: 100;
152
- --ui-z-dropdown: 200;
153
- --ui-z-overlay: 300;
154
- --ui-z-modal: 400;
155
- --ui-z-popover: 500;
156
- --ui-z-tooltip: 600;
157
- --ui-z-toast: 700;
158
- --ui-z-debug: 9999;
159
- }
160
- }
161
- @layer tokens {
162
- :root {
163
- --ui-duration-instant: 50ms;
164
- --ui-duration-fast: 100ms;
165
- --ui-duration-base: 150ms;
166
- --ui-duration-slow: 250ms;
167
- --ui-duration-slower: 400ms;
168
- --ui-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
169
- --ui-ease-in: cubic-bezier(0.4, 0, 1, 1);
170
- --ui-ease-out: cubic-bezier(0, 0, 0.2, 1);
171
- --ui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
172
- }
173
- @media (prefers-reduced-motion: reduce) {
174
- :root {
175
- --ui-duration-instant: 0ms;
176
- --ui-duration-fast: 0ms;
177
- --ui-duration-base: 0ms;
178
- --ui-duration-slow: 0ms;
179
- --ui-duration-slower: 0ms;
180
- }
181
- }
182
- }
183
- :root {
184
- --ui-color-text: var(--ui-color-neutral-900);
185
- --ui-color-text-muted: var(--ui-color-neutral-500);
186
- --ui-color-text-inverse: var(--ui-color-neutral-50);
187
- --ui-color-bg: var(--ui-color-neutral-50);
188
- --ui-color-bg-subtle: var(--ui-color-neutral-100);
189
- --ui-color-bg-muted: var(--ui-color-neutral-200);
190
- --ui-color-border: var(--ui-color-neutral-200);
191
- --ui-color-border-strong: var(--ui-color-neutral-300);
192
- --ui-color-interactive: var(--ui-color-primary);
193
- --ui-color-interactive-hover: var(--ui-color-primary-dark);
194
- --ui-color-focus: var(--ui-color-primary-light);
195
- }
196
-
197
- [data-theme=dark] {
198
- --ui-color-text: var(--ui-color-neutral-100);
199
- --ui-color-text-muted: var(--ui-color-neutral-400);
200
- --ui-color-text-inverse: var(--ui-color-neutral-900);
201
- --ui-color-bg: var(--ui-color-neutral-900);
202
- --ui-color-bg-subtle: var(--ui-color-neutral-800);
203
- --ui-color-bg-muted: var(--ui-color-neutral-700);
204
- --ui-color-border: var(--ui-color-neutral-700);
205
- --ui-color-border-strong: var(--ui-color-neutral-600);
206
- }
207
-
208
- :root {
209
- --spacing-xs: var(--ui-space-1);
210
- --spacing-sm: var(--ui-space-2);
211
- --spacing-md: var(--ui-space-4);
212
- --spacing-lg: var(--ui-space-6);
213
- --spacing-xl: var(--ui-space-8);
214
- --spacing-gutter: var(--ui-space-4);
215
- --spacing-section: var(--ui-space-8);
216
- }
217
-
218
- :root {
219
- --ui-input-height: var(--ui-row-2);
220
- --ui-input-padding-x: var(--ui-space-2);
221
- --ui-input-padding-y: var(--ui-space-1);
222
- --ui-input-radius: var(--ui-radius-md);
223
- --ui-input-border-width: var(--ui-border-width-sm);
224
- --ui-input-bg: var(--ui-color-bg);
225
- --ui-input-border: var(--ui-color-border);
226
- --ui-input-border-focus: var(--ui-color-interactive);
227
- --ui-input-text: var(--ui-color-text);
228
- --ui-input-placeholder: var(--ui-color-text-muted);
229
- }
230
-
231
- /* 01. Reset styles */
232
- @layer reset {
233
- *,
234
- *::before,
235
- *::after {
236
- box-sizing: border-box;
237
- margin: 0;
238
- }
239
- }
240
- /* 02. Base styles (typography, etc.) */
241
- @layer base {
242
- .root {
243
- font-family: var(--ui-font-sans, Noto Sans, system-ui, -apple-system, sans-serif);
244
- font-size: var(--ui-font-size-md, 1rem);
245
- line-height: var(--ui-leading-md, calc(0.5rem * 3));
246
- color: var(--ui-color-text, hsl(220, 10%, 10%));
247
- background: var(--ui-color-bg, hsl(220, 10%, 98%));
248
- }
249
- }
250
- @layer base {
251
- h1 {
252
- margin-block-end: var(--ui-space-4);
253
- font-size: var(--ui-heading-1-size);
254
- font-weight: var(--ui-heading-1-weight);
255
- line-height: var(--ui-heading-1-line-height);
256
- letter-spacing: var(--ui-heading-1-tracking);
257
- }
258
- h2 {
259
- margin-block-end: var(--ui-space-3);
260
- font-size: var(--ui-heading-2-size);
261
- font-weight: var(--ui-heading-2-weight);
262
- line-height: var(--ui-heading-2-line-height);
263
- letter-spacing: var(--ui-heading-2-tracking);
264
- }
265
- h3 {
266
- margin-block-end: var(--ui-space-2);
267
- font-size: var(--ui-heading-3-size);
268
- font-weight: var(--ui-heading-3-weight);
269
- line-height: var(--ui-heading-3-line-height);
270
- letter-spacing: var(--ui-heading-3-tracking);
271
- }
272
- h4 {
273
- margin-block-end: var(--ui-space-2);
274
- font-size: var(--ui-heading-4-size);
275
- font-weight: var(--ui-heading-4-weight);
276
- line-height: var(--ui-heading-4-line-height);
277
- letter-spacing: var(--ui-heading-4-tracking);
278
- }
279
- h5,
280
- h6 {
281
- margin-block-end: var(--ui-space-1);
282
- font-size: var(--ui-heading-5-size);
283
- font-weight: var(--ui-heading-5-weight);
284
- line-height: var(--ui-heading-5-line-height);
285
- letter-spacing: var(--ui-heading-5-tracking);
286
- }
287
- p {
288
- margin-block-end: var(--ui-space-2);
289
- font-size: var(--ui-body-size);
290
- line-height: var(--ui-body-line-height);
291
- letter-spacing: var(--ui-body-tracking);
292
- }
293
- p:last-child {
294
- margin-block-end: 0;
295
- }
296
- strong,
297
- b {
298
- font-weight: var(--ui-weight-bold);
299
- line-height: 0;
300
- }
301
- small {
302
- font-size: var(--ui-caption-size);
303
- line-height: 0;
304
- }
305
- code {
306
- padding: 0 var(--ui-space-1);
307
- font-family: var(--ui-font-mono);
308
- font-size: var(--ui-body-sm-size);
309
- line-height: 0;
310
- vertical-align: baseline;
311
- background: var(--ui-color-bg-muted);
312
- border-radius: var(--ui-radius-sm);
313
- }
314
- pre {
315
- padding: var(--ui-space-2);
316
- margin-block-end: var(--ui-space-2);
317
- overflow-x: auto;
318
- font-family: var(--ui-font-mono);
319
- font-size: var(--ui-body-sm-size);
320
- line-height: var(--ui-body-sm-line-height);
321
- background: var(--ui-color-bg-muted);
322
- border-radius: var(--ui-radius-md);
323
- }
324
- pre code {
325
- padding: 0;
326
- background: none;
327
- }
328
- a {
329
- text-decoration: underline;
330
- color: var(--ui-color-primary);
331
- transition: color var(--ui-duration-fast) var(--ui-ease-default);
332
- }
333
- a:hover {
334
- color: var(--ui-color-primary-hover);
335
- }
336
- a:visited {
337
- color: var(--ui-color-primary);
338
- }
339
- @media (width < 45.625rem) {
340
- h1 {
341
- font-size: var(--ui-font-size-2xl);
342
- line-height: var(--ui-leading-2xl);
343
- }
344
- h2 {
345
- font-size: var(--ui-font-size-xl);
346
- line-height: var(--ui-leading-xl);
347
- }
348
- h3 {
349
- font-size: var(--ui-font-size-lg);
350
- line-height: var(--ui-leading-sm);
351
- }
352
- h4 {
353
- font-size: 1.125rem;
354
- line-height: var(--ui-leading-sm);
355
- }
356
- }
357
- @media (width > 67.5rem) {
358
- h1 {
359
- font-size: calc(var(--unit) * 6);
360
- line-height: calc(var(--unit) * 7);
361
- }
362
- h2 {
363
- font-size: var(--ui-font-size-4xl);
364
- line-height: var(--ui-leading-4xl);
365
- }
366
- }
367
- }
368
- /* 03. Layout primitives */
369
- @layer primitives {
370
- .box {
371
- --_padding: var(--box-padding, 0);
372
- --_bg: var(--box-bg, transparent);
373
- --_color: var(--box-color, inherit);
374
- --_radius: var(--box-radius, 0);
375
- padding: var(--_padding);
376
- color: var(--_color);
377
- background: var(--_bg);
378
- border-radius: var(--_radius);
379
- }
380
- .box--p-1 {
381
- --_padding: var(--ui-space-1, 0.5rem);
382
- }
383
- .box--p-2 {
384
- --_padding: var(--ui-space-2, 1rem);
385
- }
386
- .box--p-3 {
387
- --_padding: var(--ui-space-3, 1.5rem);
388
- }
389
- .box--p-4 {
390
- --_padding: var(--ui-space-4, 2rem);
391
- }
392
- .box--bg-subtle {
393
- --_bg: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));
394
- }
395
- .box--bg-muted {
396
- --_bg: var(--ui-color-bg-muted, hsl(220, 10%, 90%));
397
- }
398
- .box--rounded {
399
- --_radius: var(--ui-radius-md, 0.5rem);
400
- }
401
- .box--rounded-lg {
402
- --_radius: var(--ui-radius-lg, 1rem);
403
- }
404
- }
405
- @layer primitives {
406
- .stack {
407
- display: flex;
408
- flex-direction: column;
409
- gap: var(--stack-gap, var(--ui-space-2));
410
- }
411
- .stack--xs {
412
- --stack-gap: var(--ui-space-1);
413
- }
414
- .stack--sm {
415
- --stack-gap: var(--ui-space-2);
416
- }
417
- .stack--md {
418
- --stack-gap: var(--ui-space-4);
419
- }
420
- .stack--lg {
421
- --stack-gap: var(--ui-space-6);
422
- }
423
- .stack--xl {
424
- --stack-gap: var(--ui-space-8);
425
- }
426
- }
427
- @layer primitives {
428
- .cluster {
429
- display: flex;
430
- flex-wrap: wrap;
431
- align-items: center;
432
- gap: var(--cluster-gap, var(--ui-space-2));
433
- }
434
- .cluster--xs {
435
- --cluster-gap: var(--ui-space-1);
436
- }
437
- .cluster--sm {
438
- --cluster-gap: var(--ui-space-2);
439
- }
440
- .cluster--md {
441
- --cluster-gap: var(--ui-space-4);
442
- }
443
- .cluster--lg {
444
- --cluster-gap: var(--ui-space-6);
445
- }
446
- .cluster--start {
447
- justify-content: flex-start;
448
- }
449
- .cluster--center {
450
- justify-content: center;
451
- }
452
- .cluster--end {
453
- justify-content: flex-end;
454
- }
455
- .cluster--between {
456
- justify-content: space-between;
457
- }
458
- }
459
- @layer primitives {
460
- .flex {
461
- --_gap: var(--flex-gap, var(--ui-space-2, 1rem));
462
- --_direction: var(--flex-direction, row);
463
- --_wrap: var(--flex-wrap, nowrap);
464
- --_align: var(--flex-align, stretch);
465
- --_justify: var(--flex-justify, flex-start);
466
- display: flex;
467
- flex-direction: var(--_direction);
468
- flex-wrap: var(--_wrap);
469
- align-items: var(--_align);
470
- justify-content: var(--_justify);
471
- gap: var(--_gap);
472
- }
473
- .flex--row {
474
- --_direction: row;
475
- }
476
- .flex--col {
477
- --_direction: column;
478
- }
479
- .flex--row-reverse {
480
- --_direction: row-reverse;
481
- }
482
- .flex--col-reverse {
483
- --_direction: column-reverse;
484
- }
485
- .flex--wrap {
486
- --_wrap: wrap;
487
- }
488
- .flex--nowrap {
489
- --_wrap: nowrap;
490
- }
491
- .flex--items-start {
492
- --_align: flex-start;
493
- }
494
- .flex--items-center {
495
- --_align: center;
496
- }
497
- .flex--items-end {
498
- --_align: flex-end;
499
- }
500
- .flex--items-baseline {
501
- --_align: baseline;
502
- }
503
- .flex--justify-start {
504
- --_justify: flex-start;
505
- }
506
- .flex--justify-center {
507
- --_justify: center;
508
- }
509
- .flex--justify-end {
510
- --_justify: flex-end;
511
- }
512
- .flex--justify-between {
513
- --_justify: space-between;
514
- }
515
- .flex--justify-around {
516
- --_justify: space-around;
517
- }
518
- .flex--gap-0 {
519
- --_gap: 0;
520
- }
521
- .flex--gap-1 {
522
- --_gap: var(--ui-space-1, 0.5rem);
523
- }
524
- .flex--gap-2 {
525
- --_gap: var(--ui-space-2, 1rem);
526
- }
527
- .flex--gap-3 {
528
- --_gap: var(--ui-space-3, 1.5rem);
529
- }
530
- .flex--gap-4 {
531
- --_gap: var(--ui-space-4, 2rem);
532
- }
533
- }
534
- @layer primitives {
535
- .center {
536
- display: flex;
537
- align-items: center;
538
- justify-content: center;
539
- }
540
- .center--column {
541
- flex-direction: column;
542
- }
543
- }
544
- @layer primitives {
545
- .grid {
546
- display: grid;
547
- gap: var(--grid-gap, var(--ui-space-4));
548
- grid-template-columns: repeat(var(--grid-cols, 1), minmax(0, 1fr));
549
- }
550
- .grid--2 {
551
- --grid-cols: 2;
552
- }
553
- .grid--3 {
554
- --grid-cols: 3;
555
- }
556
- .grid--4 {
557
- --grid-cols: 4;
558
- }
559
- .grid--auto {
560
- grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 16rem), 1fr));
561
- }
562
- }
563
- @layer primitives {
564
- .app-shell {
565
- min-block-size: 100vh;
566
- }
567
- }
568
- @layer primitives {
569
- .sidebar {
570
- display: flex;
571
- flex-direction: column;
572
- position: fixed;
573
- inset-block-start: 0;
574
- inset-inline-start: 0;
575
- z-index: var(--ui-z-sticky);
576
- block-size: 100vh;
577
- inline-size: var(--sidebar-width, calc(var(--unit) * 30));
578
- overflow-y: auto;
579
- background: var(--ui-color-bg-subtle);
580
- box-shadow: inset calc(var(--ui-border-width-sm) * -1) 0 0 0 var(--ui-color-border);
581
- }
582
- /* Width modifiers */
583
- .sidebar--sm {
584
- --sidebar-width: calc(var(--unit) * 24);
585
- }
586
- .sidebar--md {
587
- --sidebar-width: calc(var(--unit) * 30);
588
- }
589
- .sidebar--lg {
590
- --sidebar-width: calc(var(--unit) * 40);
591
- }
592
- /* Position modifier - sidebar on end (right in LTR) */
593
- .sidebar--end {
594
- inset-inline-start: auto;
595
- inset-inline-end: 0;
596
- box-shadow: inset var(--ui-border-width-sm) 0 0 0 var(--ui-color-border);
597
- }
598
- }
599
- @layer primitives {
600
- .sidebar-nav {
601
- --_width: var(--ui-sidebar-nav-width, calc(var(--ui-unit) * 30));
602
- --_bg: var(--ui-sidebar-nav-bg, var(--ui-color-bg-subtle));
603
- --_border-color: var(--ui-sidebar-nav-border-color, var(--ui-color-border));
604
- --_padding: var(--ui-sidebar-nav-padding, var(--ui-space-2));
605
- display: flex;
606
- flex-direction: column;
607
- block-size: 100%;
608
- inline-size: var(--_width);
609
- background: var(--_bg);
610
- }
611
- .sidebar-nav__header {
612
- --_padding: var(--ui-sidebar-nav-header-padding, var(--ui-space-2));
613
- flex-shrink: 0;
614
- padding: var(--_padding);
615
- box-shadow: inset 0 calc(var(--ui-border-width-sm) * -1) 0 0 var(--_border-color);
616
- }
617
- .sidebar-nav__content {
618
- flex: 1;
619
- padding: var(--_padding);
620
- overflow-y: auto;
621
- }
622
- .sidebar-nav__footer {
623
- --_padding: var(--ui-sidebar-nav-footer-padding, var(--ui-space-2));
624
- flex-shrink: 0;
625
- padding: var(--_padding);
626
- box-shadow: inset 0 var(--ui-border-width-sm) 0 0 var(--_border-color);
627
- }
628
- .sidebar-nav__group {
629
- margin-block-end: var(--ui-space-2);
630
- }
631
- .sidebar-nav__group-label {
632
- --_font-size: var(--ui-sidebar-nav-group-label-size, var(--ui-size-xs));
633
- --_color: var(--ui-sidebar-nav-group-label-color, var(--ui-color-text-muted));
634
- --_weight: var(--ui-sidebar-nav-group-label-weight, var(--ui-weight-bold));
635
- display: block;
636
- padding: var(--ui-space-1) var(--ui-space-2);
637
- margin: 0;
638
- font-size: var(--_font-size);
639
- font-weight: var(--_weight);
640
- letter-spacing: 0.05em;
641
- text-transform: uppercase;
642
- color: var(--_color);
643
- }
644
- .sidebar-nav__group-items {
645
- display: flex;
646
- flex-direction: column;
647
- gap: var(--ui-space-half);
648
- padding: 0;
649
- margin: 0;
650
- list-style: none;
651
- }
652
- .sidebar-nav__subgroup-label {
653
- display: block;
654
- padding: var(--ui-space-1) var(--ui-space-2);
655
- margin: 0;
656
- margin-block-start: var(--ui-space-1);
657
- font-size: var(--ui-size-xs);
658
- font-weight: var(--ui-weight-medium);
659
- color: var(--ui-color-text-muted);
660
- }
661
- .sidebar-nav__item {
662
- --_height: var(--ui-sidebar-nav-item-height, var(--ui-row-2));
663
- --_padding-inline: var(--ui-sidebar-nav-item-padding-inline, var(--ui-space-2));
664
- --_font-size: var(--ui-sidebar-nav-item-size, var(--ui-size-sm));
665
- --_color: var(--ui-sidebar-nav-item-color, var(--ui-color-text));
666
- --_bg: var(--ui-sidebar-nav-item-bg, transparent);
667
- --_radius: var(--ui-sidebar-nav-item-radius, var(--ui-radius-sm));
668
- display: flex;
669
- align-items: center;
670
- gap: var(--ui-space-1);
671
- min-block-size: var(--_height);
672
- padding-inline: var(--_padding-inline);
673
- font-size: var(--_font-size);
674
- font-weight: var(--_weight, normal);
675
- text-decoration: none;
676
- color: var(--_color);
677
- background: var(--_bg);
678
- border-radius: var(--_radius);
679
- cursor: pointer;
680
- transition: background var(--ui-duration-fast) var(--ui-easing-default), color var(--ui-duration-fast) var(--ui-easing-default);
681
- }
682
- .sidebar-nav__item:hover {
683
- --_bg: var(--ui-sidebar-nav-item-hover-bg, var(--ui-color-bg-muted));
684
- }
685
- .sidebar-nav__item:visited {
686
- color: var(--_color);
687
- }
688
- .sidebar-nav__item:focus-visible {
689
- outline: 2px solid var(--ui-color-focus);
690
- outline-offset: -2px;
691
- }
692
- .sidebar-nav__item--active {
693
- --_bg: var(--ui-sidebar-nav-item-active-bg, var(--ui-color-primary-subtle));
694
- --_color: var(--ui-sidebar-nav-item-active-color, var(--ui-color-primary));
695
- --_weight: var(--ui-sidebar-nav-item-active-weight, var(--ui-weight-medium));
696
- }
697
- .sidebar-nav__item--nested {
698
- --_padding-inline-start: var(--ui-sidebar-nav-item-nested-indent, var(--ui-space-4));
699
- padding-inline-start: var(--_padding-inline-start);
700
- }
701
- .sidebar-nav__item--disabled {
702
- opacity: 0.5;
703
- cursor: not-allowed;
704
- pointer-events: none;
705
- }
706
- .sidebar-nav__icon {
707
- display: flex;
708
- flex-shrink: 0;
709
- align-items: center;
710
- justify-content: center;
711
- block-size: var(--ui-size-md);
712
- inline-size: var(--ui-size-md);
713
- }
714
- .sidebar-nav__label {
715
- flex: 1;
716
- min-inline-size: 0;
717
- overflow: hidden;
718
- text-overflow: ellipsis;
719
- white-space: nowrap;
720
- }
721
- .sidebar-nav__badge {
722
- flex-shrink: 0;
723
- margin-inline-start: auto;
724
- }
725
- .sidebar-nav--collapsed {
726
- --_width: var(--ui-sidebar-nav-width-collapsed, var(--ui-row-3));
727
- }
728
- .sidebar-nav--collapsed .sidebar-nav__label,
729
- .sidebar-nav--collapsed .sidebar-nav__badge,
730
- .sidebar-nav--collapsed .sidebar-nav__group-label,
731
- .sidebar-nav--collapsed .sidebar-nav__subgroup-label {
732
- display: none;
733
- }
734
- .sidebar-nav--collapsed .sidebar-nav__item {
735
- justify-content: center;
736
- padding-inline: var(--ui-space-1);
737
- }
738
- }
739
- @layer primitives {
740
- .main {
741
- margin-inline-start: var(--sidebar-width, calc(var(--unit) * 30));
742
- }
743
- /* When sidebar is on the end */
744
- .main--sidebar-end {
745
- margin-inline-start: 0;
746
- margin-inline-end: var(--sidebar-width, calc(var(--unit) * 30));
747
- }
748
- /* No sidebar */
749
- .main--full {
750
- margin-inline-start: 0;
751
- margin-inline-end: 0;
752
- }
753
- }
754
- @layer primitives {
755
- .container {
756
- max-inline-size: var(--container-width, calc(var(--unit) * 120));
757
- padding-inline: var(--ui-space-4);
758
- }
759
- .container--center {
760
- margin-inline: auto;
761
- }
762
- /* Size modifiers */
763
- .container--sm {
764
- --container-width: calc(var(--unit) * 80);
765
- }
766
- .container--md {
767
- --container-width: calc(var(--unit) * 100);
768
- }
769
- .container--lg {
770
- --container-width: calc(var(--unit) * 120);
771
- }
772
- .container--xl {
773
- --container-width: calc(var(--unit) * 160);
774
- }
775
- .container--full {
776
- max-inline-size: none;
777
- }
778
- }
779
- /* 04. Components */
780
- @layer components.tokens {
781
- .button {
782
- --_accent: var(--ui-button-accent, var(--ui-color-primary, oklch(55% 0.22 250deg)));
783
- --_height: var(--ui-button-height, var(--ui-row-2, 2rem));
784
- --_padding-x: var(--ui-button-padding-x, var(--ui-space-2, 1rem));
785
- --_font-size: var(--ui-button-font-size, var(--ui-font-size-sm, 0.875rem));
786
- --_font-weight: var(--ui-button-font-weight, var(--ui-weight-medium, 500));
787
- --_radius: var(--ui-button-radius, var(--ui-radius-md, 0.5rem));
788
- --_bg: var(--_accent);
789
- --_bg-hover: color-mix(in oklch, var(--_accent) 80%, black);
790
- --_text: var(--ui-button-text, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
791
- }
792
- .button--sm {
793
- --ui-ctx-size: var(--ui-size-sm, 0.75rem);
794
- --_height: var(--ui-button-height-sm, calc(var(--row, 1rem) * 1.5));
795
- --_font-size: var(--ui-button-font-size-sm, var(--ui-font-size-xs, 0.75rem));
796
- }
797
- .button--md {
798
- --ui-ctx-size: var(--ui-size-md, 1rem);
799
- --_height: var(--ui-button-height-md, var(--ui-row-2, 2rem));
800
- --_font-size: var(--ui-button-font-size-md, var(--ui-font-size-sm, 0.875rem));
801
- }
802
- .button--lg {
803
- --ui-ctx-size: var(--ui-size-lg, 1.25rem);
804
- --_height: var(--ui-button-height-lg, calc(var(--row, 1rem) * 2.5));
805
- --_padding-x: var(--ui-button-padding-x-lg, var(--ui-space-3, 1.5rem));
806
- --_font-size: var(--ui-button-font-size-lg, var(--ui-font-size-md, 1rem));
807
- }
808
- .button--secondary {
809
- --_bg: var(--ui-color-bg-muted, hsl(220, 10%, 90%));
810
- --_bg-hover: var(--ui-color-border-strong, hsl(220, 10%, 80%));
811
- --_text: var(--ui-color-text, hsl(220, 10%, 10%));
812
- }
813
- .button--ghost {
814
- --_bg: transparent;
815
- --_bg-hover: color-mix(in oklch, var(--_accent) 10%, transparent);
816
- --_text: var(--_accent);
817
- }
818
- .button--outline {
819
- --_bg: transparent;
820
- --_bg-hover: var(--_accent);
821
- --_text: var(--_accent);
822
- --_text-hover: var(--ui-color-text-inverse, hsl(220, 10%, 98%));
823
- --_border: var(--ui-border-width-sm, 0.0625rem) solid currentColor;
824
- }
825
- .button--danger {
826
- --_accent: var(--ui-color-danger, oklch(60% 0.22 25deg));
827
- }
828
- .button--link {
829
- --_bg: transparent;
830
- --_bg-hover: transparent;
831
- --_text: var(--_accent);
832
- --_text-hover: color-mix(in oklch, var(--_accent) 70%, black);
833
- --_height: auto;
834
- --_padding-x: 0;
835
- --_radius: 0;
836
- }
837
- .button--icon {
838
- --_padding-x: 0;
839
- }
840
- .button--radius-none {
841
- --_radius: 0;
842
- }
843
- .button--radius-sm {
844
- --_radius: var(--ui-radius-sm, 0.25rem);
845
- }
846
- .button--radius-lg {
847
- --_radius: var(--ui-radius-lg, 1rem);
848
- }
849
- .button--radius-full {
850
- --_radius: 624.9375rem;
851
- }
852
- }
853
- @layer components.styles {
854
- .button {
855
- display: inline-flex;
856
- align-items: center;
857
- justify-content: center;
858
- gap: var(--ui-space-1, 0.5rem);
859
- block-size: var(--_height);
860
- padding-inline: var(--_padding-x);
861
- margin: 0;
862
- font-family: var(--ui-font-sans, Noto Sans, system-ui, -apple-system, sans-serif);
863
- font-size: var(--_font-size);
864
- font-weight: var(--_font-weight);
865
- line-height: 1;
866
- text-decoration: none;
867
- white-space: nowrap;
868
- color: var(--_text);
869
- background: var(--_bg);
870
- border: var(--_border, none);
871
- border-radius: var(--_radius);
872
- cursor: pointer;
873
- transition: background-color var(--ui-duration-base) var(--ui-ease-default), color var(--ui-duration-base) var(--ui-ease-default), transform var(--ui-duration-fast) var(--ui-ease-default);
874
- }
875
- .button:hover, .button--hover {
876
- color: var(--_text-hover, var(--_text));
877
- background: var(--_bg-hover);
878
- }
879
- .button:focus-visible, .button--focus {
880
- outline: var(--ui-border-width-md, 0.125rem) solid var(--ui-color-focus, oklch(75% 0.15 250deg));
881
- outline-offset: var(--ui-border-width-md, 0.125rem);
882
- }
883
- .button:active, .button--active {
884
- transform: scale(0.98);
885
- }
886
- .button:disabled {
887
- opacity: 0.5;
888
- cursor: not-allowed;
889
- }
890
- .button:disabled:hover {
891
- background: var(--_bg);
892
- transform: none;
893
- }
894
- .button--icon {
895
- inline-size: var(--_height);
896
- }
897
- .button--block {
898
- inline-size: 100%;
899
- }
900
- .button--link {
901
- text-decoration: underline;
902
- text-underline-offset: var(--ui-space-quarter);
903
- }
904
- .button--link:hover {
905
- text-decoration-thickness: var(--ui-space-quarter);
906
- }
907
- .button__icon {
908
- flex-shrink: 0;
909
- block-size: 1em;
910
- inline-size: 1em;
911
- }
912
- .button__icon--start {
913
- order: -1;
914
- }
915
- .button__icon--end {
916
- order: 1;
917
- }
918
- .button--loading {
919
- position: relative;
920
- opacity: 0.7;
921
- pointer-events: none;
922
- }
923
- .button--loading::after {
924
- content: "";
925
- position: absolute;
926
- block-size: 1em;
927
- inline-size: 1em;
928
- border: 2px solid currentcolor;
929
- border-radius: 50%;
930
- animation: button-spin 0.6s linear infinite;
931
- border-inline-end-color: transparent;
932
- }
933
- @keyframes button-spin {
934
- to {
935
- transform: rotate(360deg);
936
- }
937
- }
938
- }
939
- @layer components.tokens {
940
- .button-group {
941
- --_radius: var(--ui-button-group-radius, var(--ui-radius-md, calc(0.5rem / 2)));
942
- }
943
- }
944
- @layer components.styles {
945
- .button-group {
946
- display: inline-flex;
947
- }
948
- .button-group > .button:not(:first-child, :last-child) {
949
- border-radius: 0;
950
- }
951
- .button-group > .button:first-child:not(:last-child) {
952
- border-start-end-radius: 0;
953
- border-end-end-radius: 0;
954
- }
955
- .button-group > .button:last-child:not(:first-child) {
956
- border-start-start-radius: 0;
957
- border-end-start-radius: 0;
958
- }
959
- .button-group > .button + .button {
960
- margin-inline-start: calc(0.5rem / -8);
961
- }
962
- .button-group > .button:focus-visible {
963
- z-index: 1;
964
- }
965
- .button-group--vertical {
966
- flex-direction: column;
967
- }
968
- .button-group--vertical > .button:not(:first-child, :last-child) {
969
- border-radius: 0;
970
- }
971
- .button-group--vertical > .button:first-child:not(:last-child) {
972
- border-end-start-radius: 0;
973
- border-end-end-radius: 0;
974
- }
975
- .button-group--vertical > .button:last-child:not(:first-child) {
976
- border-start-start-radius: 0;
977
- border-start-end-radius: 0;
978
- }
979
- .button-group--vertical > .button + .button {
980
- margin-block-start: calc(0.5rem / -8);
981
- margin-inline-start: 0;
982
- }
983
- .button-group--attached > .button {
984
- border-inline-end-width: 0;
985
- }
986
- .button-group--attached > .button:last-child {
987
- border-inline-end-width: 1px;
988
- }
989
- .button-group--attached > .button + .button {
990
- margin-inline-start: 0;
991
- }
992
- }
993
- @layer components.tokens {
994
- .avatar {
995
- --_size: var(--ui-avatar-size, calc(0.5rem * 5));
996
- --_bg: var(--ui-avatar-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
997
- --_color: var(--ui-avatar-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
998
- --_font-size: var(--ui-avatar-font-size, var(--ui-font-size-sm, 0.875rem));
999
- --_radius: var(--ui-avatar-radius, 50%);
1000
- }
1001
- .avatar--xs {
1002
- --_size: var(--ui-avatar-size-xs, calc(0.5rem * 3));
1003
- --_font-size: var(--ui-avatar-font-size-xs, var(--ui-font-size-xs, 0.75rem));
1004
- }
1005
- .avatar--sm {
1006
- --_size: var(--ui-avatar-size-sm, calc(0.5rem * 4));
1007
- --_font-size: var(--ui-avatar-font-size-sm, var(--ui-font-size-xs, 0.75rem));
1008
- }
1009
- .avatar--lg {
1010
- --_size: var(--ui-avatar-size-lg, calc(0.5rem * 6));
1011
- --_font-size: var(--ui-avatar-font-size-lg, var(--ui-font-size-md, 1rem));
1012
- }
1013
- .avatar--xl {
1014
- --_size: var(--ui-avatar-size-xl, calc(0.5rem * 8));
1015
- --_font-size: var(--ui-avatar-font-size-xl, var(--ui-font-size-lg, 1.25rem));
1016
- }
1017
- .avatar--square {
1018
- --_radius: var(--ui-avatar-radius-square, var(--ui-radius-md, 0.5rem));
1019
- }
1020
- }
1021
- @layer components.styles {
1022
- .avatar {
1023
- display: inline-flex;
1024
- flex-shrink: 0;
1025
- align-items: center;
1026
- justify-content: center;
1027
- position: relative;
1028
- block-size: var(--_size);
1029
- inline-size: var(--_size);
1030
- overflow: hidden;
1031
- font-size: var(--_font-size);
1032
- font-weight: var(--ui-weight-medium, 500);
1033
- line-height: 1;
1034
- text-transform: uppercase;
1035
- color: var(--_color);
1036
- background: var(--_bg);
1037
- border-radius: var(--_radius);
1038
- }
1039
- .avatar__image {
1040
- position: absolute;
1041
- inset: 0;
1042
- block-size: 100%;
1043
- inline-size: 100%;
1044
- object-fit: cover;
1045
- border-radius: inherit;
1046
- }
1047
- .avatar__fallback {
1048
- display: flex;
1049
- align-items: center;
1050
- justify-content: center;
1051
- block-size: 100%;
1052
- inline-size: 100%;
1053
- user-select: none;
1054
- }
1055
- .avatar-group {
1056
- display: flex;
1057
- flex-direction: row-reverse;
1058
- justify-content: flex-end;
1059
- }
1060
- .avatar-group > .avatar {
1061
- margin-inline-start: calc(var(--_size) * -0.25);
1062
- border: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-color-bg, hsl(220, 10%, 98%));
1063
- }
1064
- .avatar-group > .avatar:last-child {
1065
- margin-inline-start: 0;
1066
- }
1067
- }
1068
- @layer components.tokens {
1069
- .badge {
1070
- --_accent: var(--ui-badge-accent, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
1071
- --_height: var(--ui-badge-height, calc(var(--ui-row, 1rem) * 1.25));
1072
- --_padding-x: var(--ui-badge-padding-x, var(--ui-space-1, 0.5rem));
1073
- --_font-size: var(--ui-badge-font-size, var(--ui-font-size-xs, 0.75rem));
1074
- --_font-weight: var(--ui-badge-font-weight, var(--ui-weight-medium, 500));
1075
- --_radius: var(--ui-badge-radius, var(--ui-radius-full, 9999px));
1076
- --_bg: var(--_accent);
1077
- --_text: var(--ui-badge-text, var(--ui-color-text, hsl(220, 10%, 10%)));
1078
- }
1079
- .badge--sm {
1080
- --_height: var(--ui-badge-height-sm, var(--ui-row, 1rem));
1081
- --_padding-x: var(--ui-badge-padding-x-sm, var(--ui-space-0, 0.25rem));
1082
- --_font-size: var(--ui-badge-font-size-sm, calc(var(--ui-font-size-xs, 0.75rem) * 0.85));
1083
- }
1084
- .badge--primary {
1085
- --_accent: var(--ui-color-primary, oklch(55% 0.22 250deg));
1086
- --_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%));
1087
- }
1088
- .badge--success {
1089
- --_accent: var(--ui-color-success, oklch(60% 0.18 145deg));
1090
- --_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%));
1091
- }
1092
- .badge--warning {
1093
- --_accent: var(--ui-color-warning, oklch(75% 0.18 70deg));
1094
- --_text: var(--ui-color-text, hsl(220, 10%, 10%));
1095
- }
1096
- .badge--danger {
1097
- --_accent: var(--ui-color-danger, oklch(60% 0.22 25deg));
1098
- --_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%));
1099
- }
1100
- }
1101
- @layer components.styles {
1102
- .badge {
1103
- display: inline-flex;
1104
- align-items: center;
1105
- justify-content: center;
1106
- block-size: var(--_height);
1107
- padding-inline: var(--_padding-x);
1108
- font-size: var(--_font-size);
1109
- font-weight: var(--_font-weight);
1110
- line-height: 1;
1111
- white-space: nowrap;
1112
- color: var(--_text);
1113
- background: var(--_bg);
1114
- border-radius: var(--_radius);
1115
- }
1116
- }
1117
- @layer components.tokens {
1118
- .card {
1119
- --_padding: var(--ui-card-padding, var(--ui-space-4));
1120
- --_border-width: var(--ui-card-border-width, var(--ui-border-width-sm));
1121
- --_bg: var(--ui-card-bg, var(--ui-color-bg));
1122
- --_border-color: var(--ui-card-border-color, var(--ui-color-border));
1123
- --_radius: var(--ui-card-radius, var(--ui-radius-md));
1124
- }
1125
- .card--subtle {
1126
- --_bg: var(--ui-card-bg-subtle, var(--ui-color-bg-subtle));
1127
- }
1128
- .card--muted {
1129
- --_bg: var(--ui-card-bg-muted, var(--ui-color-bg-muted));
1130
- }
1131
- .card--sm {
1132
- --_padding: var(--ui-card-padding-sm, var(--ui-space-2));
1133
- }
1134
- .card--lg {
1135
- --_padding: var(--ui-card-padding-lg, var(--ui-space-6));
1136
- }
1137
- .card--flush {
1138
- --_padding: 0;
1139
- --_border-width: 0;
1140
- }
1141
- }
1142
- @layer components.styles {
1143
- .card {
1144
- border: var(--_border-width) solid var(--_border-color);
1145
- border-radius: var(--_radius);
1146
- background: var(--_bg);
1147
- padding: calc(var(--_padding) - var(--_border-width));
1148
- line-height: var(--ui-row-1);
1149
- }
1150
- }
1151
- @layer components.tokens {
1152
- .data-list {
1153
- --_gap: var(--ui-data-list-gap, calc(0.5rem * 2));
1154
- --_item-gap: var(--ui-data-list-item-gap, calc(0.5rem * 1));
1155
- --_label-color: var(--ui-data-list-label-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
1156
- --_value-color: var(--ui-data-list-value-color, var(--ui-color-text, hsl(220, 10%, 10%)));
1157
- }
1158
- }
1159
- @layer components.styles {
1160
- .data-list {
1161
- display: flex;
1162
- flex-direction: column;
1163
- gap: var(--_gap);
1164
- margin: 0;
1165
- line-height: var(--ui-row-1, 1rem);
1166
- }
1167
- .data-list__item {
1168
- display: flex;
1169
- flex-direction: column;
1170
- gap: var(--_item-gap);
1171
- }
1172
- .data-list__label {
1173
- font-size: var(--ui-font-size-sm, 0.875rem);
1174
- font-weight: var(--ui-weight-medium, 500);
1175
- line-height: var(--ui-row-1, 1rem);
1176
- color: var(--_label-color);
1177
- }
1178
- .data-list__value {
1179
- margin: 0;
1180
- line-height: var(--ui-row-1, 1rem);
1181
- color: var(--_value-color);
1182
- }
1183
- .data-list--horizontal .data-list__item {
1184
- flex-direction: row;
1185
- align-items: baseline;
1186
- justify-content: space-between;
1187
- gap: calc(0.5rem * 2);
1188
- }
1189
- .data-list--horizontal .data-list__label {
1190
- flex-shrink: 0;
1191
- }
1192
- .data-list--horizontal .data-list__value {
1193
- text-align: end;
1194
- }
1195
- .data-list--divided .data-list__item {
1196
- padding-block-end: calc(var(--_gap) - var(--ui-border-width-sm, 0.0625rem));
1197
- border-block-end: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-color-border, hsl(220, 10%, 90%));
1198
- }
1199
- .data-list--divided .data-list__item:last-child {
1200
- padding-block-end: 0;
1201
- border-block-end: none;
1202
- }
1203
- .data-list--striped .data-list__item:nth-child(odd) {
1204
- padding: calc(0.5rem * 1);
1205
- background: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));
1206
- border-radius: var(--ui-radius-sm, 0.25rem);
1207
- }
1208
- .data-list--sm {
1209
- --_gap: calc(0.5rem * 1);
1210
- --_item-gap: 0;
1211
- font-size: var(--ui-font-size-sm, 0.875rem);
1212
- }
1213
- .data-list--lg {
1214
- --_gap: calc(0.5rem * 3);
1215
- --_item-gap: calc(0.5rem * 1);
1216
- font-size: var(--ui-font-size-lg, 1.25rem);
1217
- }
1218
- }
1219
- @layer components.tokens {
1220
- .icon {
1221
- --_size: var(--ui-icon-size, var(--ui-ctx-size, 1rem));
1222
- --_stroke: var(--ui-icon-stroke, 2);
1223
- }
1224
- .icon--xs {
1225
- --_size: var(--ui-icon-size-xs, var(--ui-size-xs, 0.5rem));
1226
- }
1227
- .icon--sm {
1228
- --_size: var(--ui-icon-size-sm, var(--ui-size-sm, 0.75rem));
1229
- }
1230
- .icon--md {
1231
- --_size: var(--ui-icon-size-md, var(--ui-size-md, 1rem));
1232
- }
1233
- .icon--lg {
1234
- --_size: var(--ui-icon-size-lg, var(--ui-size-lg, 1.25rem));
1235
- }
1236
- .icon--xl {
1237
- --_size: var(--ui-icon-size-xl, var(--ui-size-xl, 1.5rem));
1238
- }
1239
- .icon--stroke-thin {
1240
- --_stroke: var(--ui-icon-stroke-thin, 1);
1241
- }
1242
- .icon--stroke-thick {
1243
- --_stroke: var(--ui-icon-stroke-thick, 2.5);
1244
- }
1245
- }
1246
- @layer components.styles {
1247
- .icon {
1248
- display: inline-block;
1249
- flex-shrink: 0;
1250
- block-size: var(--_size);
1251
- inline-size: var(--_size);
1252
- vertical-align: middle;
1253
- color: currentcolor;
1254
- fill: none;
1255
- stroke: currentcolor;
1256
- stroke-width: var(--_stroke);
1257
- stroke-linecap: round;
1258
- stroke-linejoin: round;
1259
- }
1260
- .icon--filled {
1261
- fill: currentcolor;
1262
- stroke: none;
1263
- }
1264
- .icon--spin {
1265
- animation: icon-spin 1s linear infinite;
1266
- }
1267
- @keyframes icon-spin {
1268
- to {
1269
- transform: rotate(360deg);
1270
- }
1271
- }
1272
- }
1273
- @layer components.tokens {
1274
- .status {
1275
- --_size: var(--ui-status-size, calc(0.5rem * 1));
1276
- --_color: var(--ui-status-color, var(--ui-color-text-muted));
1277
- --_gap: var(--ui-status-gap, calc(0.5rem * 1));
1278
- }
1279
- .status--success {
1280
- --_color: var(--ui-color-success);
1281
- }
1282
- .status--warning {
1283
- --_color: var(--ui-color-warning);
1284
- }
1285
- .status--danger {
1286
- --_color: var(--ui-color-danger);
1287
- }
1288
- .status--info {
1289
- --_color: var(--ui-color-primary);
1290
- }
1291
- }
1292
- @layer components.styles {
1293
- .status {
1294
- display: inline-flex;
1295
- align-items: center;
1296
- gap: var(--_gap);
1297
- }
1298
- .status__dot {
1299
- flex-shrink: 0;
1300
- block-size: var(--_size);
1301
- inline-size: var(--_size);
1302
- background: var(--_color);
1303
- border-radius: 50%;
1304
- }
1305
- .status--pulse .status__dot {
1306
- position: relative;
1307
- }
1308
- .status--pulse .status__dot::before {
1309
- content: "";
1310
- position: absolute;
1311
- inset: 0;
1312
- background: var(--_color);
1313
- border-radius: 50%;
1314
- animation: status-pulse 2s infinite;
1315
- }
1316
- @keyframes status-pulse {
1317
- 0% {
1318
- opacity: 1;
1319
- transform: scale(1);
1320
- }
1321
- 100% {
1322
- opacity: 0;
1323
- transform: scale(2.5);
1324
- }
1325
- }
1326
- .status--sm {
1327
- --_size: calc(0.5rem * 0.75);
1328
- --_gap: calc(0.5rem * 0.75);
1329
- }
1330
- .status--lg {
1331
- --_size: calc(0.5rem * 1.5);
1332
- --_gap: calc(0.5rem * 1.5);
1333
- }
1334
- }
1335
- @layer components.tokens {
1336
- .table {
1337
- --_font-size: var(--ui-table-font-size, var(--ui-font-size-sm, 0.875rem));
1338
- --_border-color: var(--ui-table-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
1339
- --_header-bg: var(--ui-table-header-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
1340
- --_cell-padding-x: var(--ui-table-cell-padding-x, var(--ui-space-2, 1rem));
1341
- --_cell-padding-y: var(--ui-table-cell-padding-y, var(--ui-space-1, 0.5rem));
1342
- }
1343
- .table--compact {
1344
- --_cell-padding-y: var(--ui-space-0, 0.25rem);
1345
- --_cell-padding-x: var(--ui-space-1, 0.5rem);
1346
- --_font-size: var(--ui-font-size-xs, 0.75rem);
1347
- }
1348
- }
1349
- @layer components.styles {
1350
- .table {
1351
- inline-size: 100%;
1352
- font-size: var(--_font-size);
1353
- border-collapse: separate;
1354
- border-spacing: 0;
1355
- }
1356
- .table th,
1357
- .table td {
1358
- padding-block-start: var(--_cell-padding-y);
1359
- padding-block-end: calc(var(--_cell-padding-y) - var(--ui-border-width-sm, 0.0625rem));
1360
- padding-inline: var(--_cell-padding-x);
1361
- line-height: calc(var(--unit, 0.5rem) * 3);
1362
- text-align: start;
1363
- border-block-end: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
1364
- }
1365
- .table th {
1366
- font-weight: var(--ui-weight-medium, 500);
1367
- background: var(--_header-bg);
1368
- }
1369
- .table--striped tbody tr:nth-child(odd) {
1370
- background: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));
1371
- }
1372
- .table--striped th {
1373
- background: var(--ui-color-bg-muted, hsl(220, 10%, 90%));
1374
- }
1375
- }
1376
- @layer components.tokens {
1377
- .tag {
1378
- --_height: var(--ui-tag-height, calc(0.5rem * 3));
1379
- --_padding-x: var(--ui-tag-padding-x, var(--ui-space-1, 0.5rem));
1380
- --_gap: var(--ui-tag-gap, calc(0.5rem * 0.5));
1381
- --_radius: var(--ui-tag-radius, var(--ui-radius-full, 9999px));
1382
- --_font-size: var(--ui-tag-font-size, var(--ui-font-size-sm, 0.875rem));
1383
- --_bg: var(--ui-tag-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
1384
- --_color: var(--ui-tag-color, var(--ui-color-text, hsl(220, 10%, 10%)));
1385
- }
1386
- .tag--sm {
1387
- --_height: var(--ui-tag-height-sm, calc(0.5rem * 2.5));
1388
- --_padding-x: var(--ui-tag-padding-x-sm, calc(0.5rem * 1));
1389
- --_font-size: var(--ui-tag-font-size-sm, var(--ui-font-size-xs, 0.75rem));
1390
- }
1391
- .tag--primary {
1392
- --_bg: var(--ui-tag-primary-bg, var(--ui-color-primary, oklch(55% 0.22 250deg)));
1393
- --_color: var(--ui-tag-primary-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
1394
- }
1395
- .tag--success {
1396
- --_bg: var(--ui-tag-success-bg, var(--ui-color-success, oklch(60% 0.18 145deg)));
1397
- --_color: var(--ui-tag-success-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
1398
- }
1399
- .tag--warning {
1400
- --_bg: var(--ui-tag-warning-bg, var(--ui-color-warning, oklch(75% 0.18 70deg)));
1401
- --_color: var(--ui-tag-warning-color, var(--ui-color-text, hsl(220, 10%, 10%)));
1402
- }
1403
- .tag--danger {
1404
- --_bg: var(--ui-tag-danger-bg, var(--ui-color-danger, oklch(60% 0.22 25deg)));
1405
- --_color: var(--ui-tag-danger-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
1406
- }
1407
- }
1408
- @layer components.styles {
1409
- .tag {
1410
- display: inline-flex;
1411
- align-items: center;
1412
- gap: var(--_gap);
1413
- block-size: var(--_height);
1414
- padding-inline: var(--_padding-x);
1415
- font-size: var(--_font-size);
1416
- font-weight: var(--ui-weight-medium, 500);
1417
- line-height: 1;
1418
- white-space: nowrap;
1419
- color: var(--_color);
1420
- background: var(--_bg);
1421
- border-radius: var(--_radius);
1422
- }
1423
- .tag:disabled, .tag[aria-disabled=true] {
1424
- opacity: 0.5;
1425
- cursor: not-allowed;
1426
- }
1427
- .tag__remove {
1428
- display: inline-flex;
1429
- flex-shrink: 0;
1430
- align-items: center;
1431
- justify-content: center;
1432
- padding: 0;
1433
- margin-inline-start: calc(var(--_gap) * -0.5);
1434
- color: currentcolor;
1435
- background: none;
1436
- border: none;
1437
- opacity: 0.7;
1438
- cursor: pointer;
1439
- }
1440
- .tag__remove:hover {
1441
- opacity: 1;
1442
- }
1443
- .tag-group {
1444
- display: flex;
1445
- flex-wrap: wrap;
1446
- gap: calc(0.5rem * 0.5);
1447
- }
1448
- }
1449
- @layer components.tokens {
1450
- .accordion {
1451
- --_border-color: var(--ui-accordion-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
1452
- --_border-width: var(--ui-accordion-border-width, 1px);
1453
- --_radius: var(--ui-accordion-radius, var(--ui-radius-md, calc(0.5rem * 1)));
1454
- }
1455
- }
1456
- @layer components.styles {
1457
- .accordion {
1458
- border-radius: var(--_radius);
1459
- outline: var(--_border-width) solid var(--_border-color);
1460
- outline-offset: calc(var(--_border-width) * -1);
1461
- }
1462
- .accordion > .disclosure {
1463
- --_border-width: 0;
1464
- border: none;
1465
- border-radius: 0;
1466
- }
1467
- .accordion > .disclosure + .disclosure {
1468
- border-block-start: 1px solid var(--_border-color);
1469
- }
1470
- .accordion > .disclosure:first-child .disclosure__trigger {
1471
- border-start-start-radius: var(--_radius);
1472
- border-start-end-radius: var(--_radius);
1473
- }
1474
- .accordion > .disclosure:last-child .disclosure__trigger {
1475
- border-end-start-radius: var(--_radius);
1476
- border-end-end-radius: var(--_radius);
1477
- }
1478
- .accordion > .disclosure:last-child .disclosure__content {
1479
- border-end-start-radius: var(--_radius);
1480
- border-end-end-radius: var(--_radius);
1481
- }
1482
- .accordion--borderless {
1483
- border: none;
1484
- }
1485
- .accordion--borderless > .disclosure + .disclosure {
1486
- border-block-start: none;
1487
- }
1488
- .accordion--separated {
1489
- display: flex;
1490
- flex-direction: column;
1491
- gap: calc(0.5rem * 1);
1492
- border: none;
1493
- }
1494
- .accordion--separated > .disclosure {
1495
- border: 1px solid var(--_border-color);
1496
- border-radius: var(--_radius);
1497
- }
1498
- .accordion--separated > .disclosure + .disclosure {
1499
- border-block-start: 1px solid var(--_border-color);
1500
- }
1501
- }
1502
- @layer components.tokens {
1503
- .disclosure {
1504
- --_border-color: var(--ui-disclosure-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
1505
- --_border-width: var(--ui-disclosure-border-width, 1px);
1506
- --_radius: var(--ui-disclosure-radius, var(--ui-radius-md, calc(0.5rem * 1)));
1507
- --_trigger-height: var(--ui-disclosure-trigger-height, var(--ui-row-3, calc(1rem * 3)));
1508
- --_padding-x: var(--ui-disclosure-padding-x, calc(0.5rem * 2));
1509
- --_padding-y: var(--ui-disclosure-padding-y, calc(0.5rem * 2));
1510
- }
1511
- }
1512
- @layer components.styles {
1513
- .disclosure {
1514
- box-sizing: border-box;
1515
- border-radius: var(--_radius);
1516
- outline: var(--_border-width) solid var(--_border-color);
1517
- outline-offset: calc(var(--_border-width) * -1);
1518
- }
1519
- .disclosure:not([open]) {
1520
- block-size: var(--_trigger-height);
1521
- }
1522
- .disclosure__trigger {
1523
- display: flex;
1524
- align-items: center;
1525
- justify-content: space-between;
1526
- gap: calc(0.5rem * 2);
1527
- block-size: var(--_trigger-height);
1528
- inline-size: 100%;
1529
- padding-inline: var(--_padding-x);
1530
- font-weight: var(--ui-weight-medium, 500);
1531
- line-height: 1;
1532
- text-align: start;
1533
- cursor: pointer;
1534
- list-style: none;
1535
- }
1536
- .disclosure__trigger::-webkit-details-marker {
1537
- display: none;
1538
- }
1539
- .disclosure__trigger::marker {
1540
- display: none;
1541
- }
1542
- .disclosure__trigger:hover {
1543
- background: var(--ui-color-bg-subtle, rgba(0, 0, 0, 0.02));
1544
- }
1545
- .disclosure__icon {
1546
- flex-shrink: 0;
1547
- transition: transform var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
1548
- }
1549
- .disclosure[open] .disclosure__icon {
1550
- transform: rotate(180deg);
1551
- }
1552
- .disclosure__content {
1553
- padding: 0 var(--_padding-x) var(--_padding-y);
1554
- }
1555
- .disclosure--animate .disclosure__content {
1556
- animation: disclosure-open var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
1557
- }
1558
- @keyframes disclosure-open {
1559
- from {
1560
- opacity: 0;
1561
- transform: translateY(calc(0.5rem * -1));
1562
- }
1563
- to {
1564
- opacity: 1;
1565
- transform: translateY(0);
1566
- }
1567
- }
1568
- .disclosure--borderless {
1569
- --_border-width: 0;
1570
- border: none;
1571
- border-radius: 0;
1572
- }
1573
- .disclosure--flush .disclosure__trigger {
1574
- padding-inline: 0;
1575
- }
1576
- .disclosure--flush .disclosure__content {
1577
- padding-inline: 0;
1578
- }
1579
- }
1580
- @layer components.tokens {
1581
- .alert {
1582
- --_accent: var(--ui-alert-accent, var(--ui-color-border, hsl(220, 10%, 90%)));
1583
- --_padding: var(--ui-alert-padding, var(--ui-space-2, 1rem));
1584
- --_border-width: var(--ui-alert-border-width, var(--ui-border-width-sm, 0.0625rem));
1585
- --_gap: var(--ui-alert-gap, var(--ui-space-1, 0.5rem));
1586
- --_radius: var(--ui-alert-radius, var(--ui-radius-md, 0.5rem));
1587
- --_bg: color-mix(in oklch, var(--_accent) 8%, white);
1588
- --_border-color: var(--_accent);
1589
- --_color: var(--ui-alert-color, var(--ui-color-text, hsl(220, 10%, 10%)));
1590
- --_icon-color: var(--_accent);
1591
- }
1592
- .alert--info {
1593
- --_accent: var(--ui-color-primary, oklch(55% 0.22 250deg));
1594
- }
1595
- .alert--success {
1596
- --_accent: var(--ui-color-success, oklch(60% 0.18 145deg));
1597
- }
1598
- .alert--warning {
1599
- --_accent: var(--ui-color-warning, oklch(75% 0.18 70deg));
1600
- }
1601
- .alert--danger {
1602
- --_accent: var(--ui-color-danger, oklch(60% 0.22 25deg));
1603
- }
1604
- }
1605
- @layer components.styles {
1606
- .alert {
1607
- display: flex;
1608
- align-items: flex-start;
1609
- gap: var(--_gap);
1610
- padding: calc(var(--_padding) - var(--_border-width));
1611
- padding-inline: var(--_padding);
1612
- color: var(--_color);
1613
- background: var(--_bg);
1614
- border: var(--_border-width) solid var(--_border-color);
1615
- border-radius: var(--_radius);
1616
- border-inline-start-width: calc(0.5rem * 0.5);
1617
- }
1618
- .alert__icon {
1619
- flex-shrink: 0;
1620
- color: var(--_icon-color);
1621
- }
1622
- .alert__content {
1623
- flex: 1;
1624
- min-inline-size: 0;
1625
- }
1626
- .alert__title {
1627
- margin: 0;
1628
- font-weight: var(--ui-weight-medium, 500);
1629
- line-height: var(--ui-row-1, 1rem);
1630
- }
1631
- .alert__description {
1632
- margin: 0;
1633
- margin-block-start: calc(0.5rem * 1);
1634
- font-size: var(--ui-font-size-sm, 0.875rem);
1635
- line-height: var(--ui-row-1, 1rem);
1636
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
1637
- }
1638
- .alert__close {
1639
- flex-shrink: 0;
1640
- align-self: flex-start;
1641
- padding: 0;
1642
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
1643
- background: none;
1644
- border: none;
1645
- cursor: pointer;
1646
- }
1647
- .alert__close:hover {
1648
- color: var(--ui-color-text, hsl(220, 10%, 10%));
1649
- }
1650
- }
1651
- @layer components.tokens {
1652
- .progress {
1653
- --_height: var(--ui-progress-height, calc(0.5rem * 1));
1654
- --_bg: var(--ui-progress-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
1655
- --_fill: var(--ui-progress-fill, var(--ui-color-primary));
1656
- --_radius: var(--ui-progress-radius, var(--ui-radius-full, 9999px));
1657
- }
1658
- .progress--sm {
1659
- --_height: calc(0.5rem * 1);
1660
- }
1661
- .progress--lg {
1662
- --_height: calc(0.5rem * 2);
1663
- }
1664
- }
1665
- @layer components.styles {
1666
- .progress {
1667
- position: relative;
1668
- block-size: var(--_height);
1669
- overflow: hidden;
1670
- background: var(--_bg);
1671
- border-radius: var(--_radius);
1672
- }
1673
- .progress__bar {
1674
- block-size: 100%;
1675
- background: var(--_fill);
1676
- border-radius: var(--_radius);
1677
- transition: inline-size var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
1678
- }
1679
- .progress--indeterminate .progress__bar {
1680
- inline-size: 30%;
1681
- animation: progress-indeterminate 1.5s infinite ease-in-out;
1682
- }
1683
- @keyframes progress-indeterminate {
1684
- 0% {
1685
- transform: translateX(-100%);
1686
- }
1687
- 100% {
1688
- transform: translateX(400%);
1689
- }
1690
- }
1691
- .progress--striped .progress__bar {
1692
- background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
1693
- background-size: 0.5rem 0.5rem;
1694
- }
1695
- .progress--animated .progress__bar {
1696
- animation: progress-stripes 1s linear infinite;
1697
- }
1698
- @keyframes progress-stripes {
1699
- from {
1700
- background-position: 0.5rem 0;
1701
- }
1702
- to {
1703
- background-position: 0 0;
1704
- }
1705
- }
1706
- .progress--success {
1707
- --_fill: var(--ui-color-success);
1708
- }
1709
- .progress--warning {
1710
- --_fill: var(--ui-color-warning);
1711
- }
1712
- .progress--danger {
1713
- --_fill: var(--ui-color-danger);
1714
- }
1715
- }
1716
- @layer components.tokens {
1717
- .skeleton {
1718
- --_bg: var(--ui-skeleton-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
1719
- --_shimmer: var(--ui-skeleton-shimmer, rgb(255 255 255 / 0.5));
1720
- --_radius: var(--ui-skeleton-radius, var(--ui-radius-sm, calc(0.5rem / 2)));
1721
- }
1722
- }
1723
- @layer components.styles {
1724
- .skeleton {
1725
- display: block;
1726
- position: relative;
1727
- overflow: hidden;
1728
- background: var(--_bg);
1729
- border-radius: var(--_radius);
1730
- }
1731
- .skeleton::after {
1732
- content: "";
1733
- position: absolute;
1734
- inset: 0;
1735
- background: linear-gradient(90deg, transparent 0%, var(--_shimmer) 50%, transparent 100%);
1736
- animation: skeleton-shimmer 1.5s infinite;
1737
- transform: translateX(-100%);
1738
- }
1739
- @keyframes skeleton-shimmer {
1740
- 100% {
1741
- transform: translateX(100%);
1742
- }
1743
- }
1744
- .skeleton--text {
1745
- block-size: calc(0.5rem * 2);
1746
- inline-size: 100%;
1747
- }
1748
- .skeleton--heading {
1749
- block-size: calc(0.5rem * 3);
1750
- inline-size: 60%;
1751
- }
1752
- .skeleton--circle {
1753
- block-size: calc(0.5rem * 5);
1754
- inline-size: calc(0.5rem * 5);
1755
- border-radius: 50%;
1756
- }
1757
- .skeleton--rect {
1758
- block-size: calc(0.5rem * 20);
1759
- inline-size: 100%;
1760
- }
1761
- .skeleton--static::after {
1762
- animation: none;
1763
- }
1764
- .skeleton--pulse {
1765
- animation: skeleton-pulse 1.5s infinite ease-in-out;
1766
- }
1767
- .skeleton--pulse::after {
1768
- display: none;
1769
- }
1770
- @keyframes skeleton-pulse {
1771
- 0%, 100% {
1772
- opacity: 1;
1773
- }
1774
- 50% {
1775
- opacity: 0.5;
1776
- }
1777
- }
1778
- }
1779
- @layer components.tokens {
1780
- .spinner {
1781
- --_size: var(--ui-spinner-size, calc(var(--unit) * 4));
1782
- --_border-width: var(--ui-spinner-border-width, var(--ui-border-width-md));
1783
- --_color: var(--ui-spinner-color, currentcolor);
1784
- --_track-color: var(--ui-spinner-track-color, transparent);
1785
- --_duration: var(--ui-spinner-duration, 750ms);
1786
- }
1787
- .spinner--xs {
1788
- --_size: var(--ui-spinner-size-xs, calc(var(--unit) * 2));
1789
- --_border-width: var(--ui-spinner-border-width-xs, var(--ui-border-width-sm));
1790
- }
1791
- .spinner--sm {
1792
- --_size: var(--ui-spinner-size-sm, calc(var(--unit) * 3));
1793
- --_border-width: var(--ui-spinner-border-width-sm, var(--ui-border-width-md));
1794
- }
1795
- .spinner--lg {
1796
- --_size: var(--ui-spinner-size-lg, calc(var(--unit) * 5));
1797
- --_border-width: var(--ui-spinner-border-width-lg, var(--ui-border-width-md));
1798
- }
1799
- .spinner--xl {
1800
- --_size: var(--ui-spinner-size-xl, calc(var(--unit) * 6));
1801
- --_border-width: var(--ui-spinner-border-width-xl, var(--ui-border-width-lg));
1802
- }
1803
- }
1804
- @layer components.styles {
1805
- .spinner {
1806
- display: inline-block;
1807
- flex-shrink: 0;
1808
- box-sizing: border-box;
1809
- block-size: var(--_size);
1810
- inline-size: var(--_size);
1811
- vertical-align: middle;
1812
- border: var(--_border-width) solid var(--_track-color);
1813
- border-radius: 50%;
1814
- border-block-start-color: var(--_color);
1815
- animation: spinner-rotate var(--_duration) linear infinite;
1816
- }
1817
- @keyframes spinner-rotate {
1818
- to {
1819
- transform: rotate(360deg);
1820
- }
1821
- }
1822
- }
1823
- @layer components.tokens {
1824
- .toast-viewport {
1825
- --_gap: var(--ui-toast-viewport-gap, calc(0.5rem * 1));
1826
- --_padding: var(--ui-toast-viewport-padding, calc(0.5rem * 2));
1827
- --_max-width: var(--ui-toast-viewport-max-width, 420px);
1828
- }
1829
- .toast {
1830
- --_padding: var(--ui-toast-padding, calc(0.5rem * 2));
1831
- --_gap: var(--ui-toast-gap, calc(0.5rem * 1));
1832
- --_radius: var(--ui-toast-radius, var(--ui-radius-md, 0.5rem));
1833
- --_bg: var(--ui-toast-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
1834
- --_border-color: var(--ui-toast-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
1835
- --_shadow: var(--ui-toast-shadow, var(--shadow-lg));
1836
- }
1837
- .toast--success {
1838
- --_border-color: var(--ui-color-success);
1839
- }
1840
- .toast--warning {
1841
- --_border-color: var(--ui-color-warning);
1842
- }
1843
- .toast--danger {
1844
- --_border-color: var(--ui-color-danger);
1845
- }
1846
- .toast--info {
1847
- --_border-color: var(--ui-color-primary);
1848
- }
1849
- }
1850
- @layer components.styles {
1851
- .toast-viewport {
1852
- display: flex;
1853
- flex-direction: column;
1854
- gap: var(--_gap);
1855
- position: fixed;
1856
- z-index: var(--ui-z-toast, 1000);
1857
- max-inline-size: var(--_max-width);
1858
- padding: var(--_padding);
1859
- pointer-events: none;
1860
- list-style: none;
1861
- }
1862
- .toast-viewport--top-end {
1863
- inset-block-start: 0;
1864
- inset-inline-end: 0;
1865
- }
1866
- .toast-viewport--top-start {
1867
- inset-block-start: 0;
1868
- inset-inline-start: 0;
1869
- }
1870
- .toast-viewport--bottom-end {
1871
- inset-block-end: 0;
1872
- inset-inline-end: 0;
1873
- }
1874
- .toast-viewport--bottom-start {
1875
- inset-block-end: 0;
1876
- inset-inline-start: 0;
1877
- }
1878
- .toast-viewport--top-center {
1879
- inset-block-start: 0;
1880
- inset-inline-start: 50%;
1881
- transform: translateX(-50%);
1882
- }
1883
- .toast-viewport--bottom-center {
1884
- inset-block-end: 0;
1885
- inset-inline-start: 50%;
1886
- transform: translateX(-50%);
1887
- }
1888
- .toast {
1889
- display: flex;
1890
- align-items: flex-start;
1891
- gap: var(--_gap);
1892
- padding: var(--_padding);
1893
- background: var(--_bg);
1894
- border-radius: var(--_radius);
1895
- outline: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
1896
- box-shadow: var(--_shadow);
1897
- pointer-events: auto;
1898
- outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
1899
- }
1900
- .toast__icon {
1901
- flex-shrink: 0;
1902
- }
1903
- .toast__content {
1904
- flex: 1;
1905
- min-inline-size: 0;
1906
- }
1907
- .toast__title {
1908
- margin: 0;
1909
- font-weight: var(--ui-weight-medium, 500);
1910
- line-height: var(--ui-row-1, 1rem);
1911
- }
1912
- .toast__description {
1913
- margin: 0;
1914
- font-size: var(--ui-font-size-sm, 0.875rem);
1915
- line-height: var(--ui-row-1, 1rem);
1916
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
1917
- }
1918
- .toast__action {
1919
- flex-shrink: 0;
1920
- }
1921
- .toast__close {
1922
- display: inline-flex;
1923
- flex-shrink: 0;
1924
- align-items: center;
1925
- justify-content: center;
1926
- block-size: var(--ui-row-1, 1rem);
1927
- inline-size: var(--ui-row-1, 1rem);
1928
- padding: 0;
1929
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
1930
- background: none;
1931
- border: none;
1932
- cursor: pointer;
1933
- }
1934
- .toast__close:hover {
1935
- color: var(--ui-color-text, hsl(220, 10%, 10%));
1936
- }
1937
- .toast[data-state=open] {
1938
- animation: toast-slide-in var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
1939
- }
1940
- .toast[data-state=closed] {
1941
- animation: toast-slide-out var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
1942
- }
1943
- @keyframes toast-slide-in {
1944
- from {
1945
- opacity: 0;
1946
- transform: translateX(100%);
1947
- }
1948
- }
1949
- @keyframes toast-slide-out {
1950
- to {
1951
- opacity: 0;
1952
- transform: translateX(100%);
1953
- }
1954
- }
1955
- }
1956
- @layer components.tokens {
1957
- .checkbox {
1958
- --_size: var(--ui-checkbox-size, calc(0.5rem * 2));
1959
- --_radius: var(--ui-checkbox-radius, var(--ui-radius-sm, 0.25rem));
1960
- --_bg: var(--ui-checkbox-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
1961
- --_bg-checked: var(--ui-checkbox-bg-checked, var(--ui-color-primary, oklch(55% 0.22 250deg)));
1962
- --_border-color: var(--ui-checkbox-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
1963
- --_border-color-focus: var(--ui-checkbox-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));
1964
- --_check-color: var(--ui-checkbox-check-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
1965
- }
1966
- .checkbox--lg {
1967
- --_size: var(--ui-checkbox-size-lg, calc(0.5rem * 3));
1968
- }
1969
- .checkbox--error {
1970
- --_border-color: var(--ui-checkbox-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
1971
- --_border-color-focus: var(--ui-checkbox-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
1972
- }
1973
- }
1974
- @layer components.styles {
1975
- .checkbox {
1976
- display: inline-flex;
1977
- flex-shrink: 0;
1978
- align-items: center;
1979
- justify-content: center;
1980
- block-size: var(--_size);
1981
- inline-size: var(--_size);
1982
- margin: 0;
1983
- vertical-align: middle;
1984
- background: var(--_bg);
1985
- border: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
1986
- border-radius: var(--_radius);
1987
- cursor: pointer;
1988
- appearance: none;
1989
- transition: background-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
1990
- }
1991
- .checkbox::before {
1992
- content: "";
1993
- block-size: 65%;
1994
- inline-size: 65%;
1995
- background-color: var(--_check-color);
1996
- opacity: 0;
1997
- clip-path: polygon(20% 55%, 40% 75%, 80% 25%, 85% 30%, 40% 85%, 15% 60%);
1998
- transition: opacity var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
1999
- }
2000
- .checkbox:hover:not(:disabled) {
2001
- border-color: var(--_border-color-focus);
2002
- }
2003
- .checkbox:focus-visible {
2004
- border-color: var(--_border-color-focus);
2005
- outline: none;
2006
- box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg));
2007
- }
2008
- .checkbox:checked {
2009
- background: var(--_bg-checked);
2010
- border-color: var(--_bg-checked);
2011
- }
2012
- .checkbox:checked::before {
2013
- opacity: 1;
2014
- }
2015
- .checkbox:indeterminate {
2016
- background: var(--_bg-checked);
2017
- border-color: var(--_bg-checked);
2018
- }
2019
- .checkbox:indeterminate::before {
2020
- opacity: 1;
2021
- clip-path: polygon(15% 45%, 85% 45%, 85% 55%, 15% 55%);
2022
- }
2023
- .checkbox:disabled {
2024
- opacity: 0.5;
2025
- cursor: not-allowed;
2026
- }
2027
- }
2028
- @layer components.tokens {
2029
- .field {
2030
- --_gap: var(--ui-field-gap, 0);
2031
- }
2032
- }
2033
- @layer components.styles {
2034
- .field {
2035
- display: flex;
2036
- flex-direction: column;
2037
- gap: var(--_gap);
2038
- }
2039
- .field__control {
2040
- display: flex;
2041
- flex-direction: column;
2042
- }
2043
- .field--horizontal {
2044
- flex-direction: row;
2045
- flex-wrap: wrap;
2046
- align-items: flex-start;
2047
- }
2048
- .field--horizontal > .field__label {
2049
- flex: 0 0 auto;
2050
- min-inline-size: calc(0.5rem * 15);
2051
- padding-block-start: calc(0.5rem * 1);
2052
- }
2053
- .field--horizontal > .field__control {
2054
- flex: 1 1 0;
2055
- min-inline-size: calc(0.5rem * 20);
2056
- }
2057
- }
2058
- @layer components.tokens {
2059
- .form-error {
2060
- --_color: var(--ui-form-error-color, var(--ui-color-danger));
2061
- --_size: var(--ui-form-error-size, var(--ui-font-size-sm, 0.875rem));
2062
- --_gap: var(--ui-form-error-gap, 0);
2063
- }
2064
- }
2065
- @layer components.styles {
2066
- .form-error {
2067
- display: flex;
2068
- align-items: flex-start;
2069
- gap: var(--_gap);
2070
- margin-block-start: var(--_gap);
2071
- font-size: var(--_size);
2072
- line-height: var(--ui-leading-tight-sm, var(--ui-row-1));
2073
- color: var(--_color);
2074
- }
2075
- .form-error__icon {
2076
- flex-shrink: 0;
2077
- }
2078
- }
2079
- @layer components.tokens {
2080
- .form-helper {
2081
- --_color: var(--ui-form-helper-color, var(--ui-color-text-muted));
2082
- --_size: var(--ui-form-helper-size, var(--ui-font-size-sm, 0.875rem));
2083
- --_gap: var(--ui-form-helper-gap, 0);
2084
- }
2085
- }
2086
- @layer components.styles {
2087
- .form-helper {
2088
- display: block;
2089
- margin-block-start: var(--_gap);
2090
- font-size: var(--_size);
2091
- line-height: var(--ui-leading-tight-sm, var(--ui-row-1));
2092
- color: var(--_color);
2093
- }
2094
- }
2095
- @layer components.tokens {
2096
- .input {
2097
- --_height: var(--ui-input-height, var(--ui-row-2, 2rem));
2098
- --_padding-x: var(--ui-input-padding-x, var(--ui-space-1, 0.5rem));
2099
- --_font-size: var(--ui-input-font-size, var(--ui-font-size-sm, 0.875rem));
2100
- --_radius: var(--ui-input-radius, var(--ui-radius-md, 0.5rem));
2101
- --_bg: var(--ui-input-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
2102
- --_border-color: var(--ui-input-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
2103
- --_border-color-focus: var(--ui-input-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));
2104
- --_text: var(--ui-input-text, var(--ui-color-text, hsl(220, 10%, 10%)));
2105
- --_placeholder: var(--ui-input-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
2106
- }
2107
- .input--sm {
2108
- --_height: var(--ui-input-height-sm, calc(1rem * 1.5));
2109
- --_font-size: var(--ui-input-font-size-sm, var(--ui-font-size-xs, 0.75rem));
2110
- }
2111
- .input--lg {
2112
- --_height: var(--ui-input-height-lg, calc(1rem * 2.5));
2113
- --_padding-x: var(--ui-input-padding-x-lg, var(--ui-space-2, 1rem));
2114
- --_font-size: var(--ui-input-font-size-lg, var(--ui-font-size-md, 1rem));
2115
- }
2116
- .input--filled {
2117
- --_bg: var(--ui-input-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
2118
- --_border-color: transparent;
2119
- }
2120
- .input--ghost {
2121
- --_bg: transparent;
2122
- --_border-color: transparent;
2123
- }
2124
- .input--error {
2125
- --_border-color: var(--ui-input-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
2126
- --_border-color-focus: var(--ui-input-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
2127
- }
2128
- .input--success {
2129
- --_border-color: var(--ui-input-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
2130
- --_border-color-focus: var(--ui-input-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
2131
- }
2132
- }
2133
- @layer components.styles {
2134
- .input {
2135
- display: inline-flex;
2136
- align-items: center;
2137
- block-size: var(--_height);
2138
- padding-inline: var(--_padding-x);
2139
- font-family: inherit;
2140
- font-size: var(--_font-size);
2141
- line-height: 1;
2142
- color: var(--_text);
2143
- background: var(--_bg);
2144
- border: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
2145
- border-radius: var(--_radius);
2146
- transition: border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
2147
- }
2148
- .input::placeholder {
2149
- color: var(--_placeholder);
2150
- }
2151
- .input:hover:not(:disabled, :focus) {
2152
- border-color: var(--ui-color-border-strong, hsl(220, 10%, 80%));
2153
- }
2154
- .input:focus, .input--focus {
2155
- border-color: var(--_border-color-focus);
2156
- outline: none;
2157
- box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg));
2158
- }
2159
- .input:disabled, .input--disabled {
2160
- opacity: 0.5;
2161
- cursor: not-allowed;
2162
- }
2163
- .input:read-only {
2164
- background: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));
2165
- }
2166
- .input--block {
2167
- inline-size: 100%;
2168
- }
2169
- .input-group {
2170
- display: inline-flex;
2171
- align-items: stretch;
2172
- position: relative;
2173
- }
2174
- .input-group .input {
2175
- flex: 1;
2176
- }
2177
- .input-group--has-prefix .input {
2178
- padding-inline-start: calc(var(--_height) + var(--ui-space-half, 0.25rem));
2179
- }
2180
- .input-group--has-suffix .input {
2181
- padding-inline-end: calc(var(--_height) + var(--ui-space-half, 0.25rem));
2182
- }
2183
- .input-group__addon {
2184
- display: flex;
2185
- align-items: center;
2186
- justify-content: center;
2187
- position: absolute;
2188
- inset-block: 0;
2189
- inline-size: var(--_height, 2rem);
2190
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
2191
- pointer-events: none;
2192
- }
2193
- .input-group__addon--start {
2194
- inset-inline-start: 0;
2195
- }
2196
- .input-group__addon--end {
2197
- inset-inline-end: 0;
2198
- }
2199
- .input-group__addon--interactive {
2200
- cursor: pointer;
2201
- pointer-events: auto;
2202
- }
2203
- }
2204
- @layer components.tokens {
2205
- .label {
2206
- --_font-size: var(--ui-label-font-size, var(--ui-font-size-sm, 0.875rem));
2207
- --_color: var(--ui-label-color, var(--ui-color-text, hsl(220, 10%, 10%)));
2208
- --_required-color: var(--ui-label-required-color, var(--ui-color-danger, oklch(60% 0.22 25deg)));
2209
- }
2210
- .label--lg {
2211
- --_font-size: var(--ui-label-font-size-lg, var(--ui-font-size-md, 1rem));
2212
- }
2213
- }
2214
- @layer components.styles {
2215
- .label {
2216
- display: inline-flex;
2217
- align-items: baseline;
2218
- gap: 0;
2219
- font-size: var(--_font-size);
2220
- font-weight: var(--ui-weight-medium, 500);
2221
- line-height: var(--ui-leading-tight-sm, var(--ui-row-1));
2222
- color: var(--_color);
2223
- cursor: pointer;
2224
- }
2225
- .label[aria-disabled=true] {
2226
- opacity: 0.5;
2227
- cursor: not-allowed;
2228
- }
2229
- .label__required {
2230
- color: var(--_required-color);
2231
- }
2232
- .label__optional {
2233
- font-weight: var(--ui-weight-normal, 400);
2234
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
2235
- }
2236
- }
2237
- @layer components.tokens {
2238
- .radio {
2239
- --_size: var(--ui-radio-size, calc(0.5rem * 2));
2240
- --_bg: var(--ui-radio-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
2241
- --_bg-checked: var(--ui-radio-bg-checked, var(--ui-color-primary, oklch(55% 0.22 250deg)));
2242
- --_border-color: var(--ui-radio-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
2243
- --_border-color-focus: var(--ui-radio-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));
2244
- --_dot-color: var(--ui-radio-dot-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
2245
- }
2246
- .radio--lg {
2247
- --_size: var(--ui-radio-size-lg, calc(0.5rem * 3));
2248
- }
2249
- .radio--error {
2250
- --_border-color: var(--ui-radio-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
2251
- --_border-color-focus: var(--ui-radio-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
2252
- }
2253
- }
2254
- @layer components.styles {
2255
- .radio {
2256
- display: inline-flex;
2257
- flex-shrink: 0;
2258
- align-items: center;
2259
- justify-content: center;
2260
- block-size: var(--_size);
2261
- inline-size: var(--_size);
2262
- margin: 0;
2263
- vertical-align: middle;
2264
- background: var(--_bg);
2265
- border: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
2266
- border-radius: 50%;
2267
- cursor: pointer;
2268
- appearance: none;
2269
- transition: background-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
2270
- }
2271
- .radio::before {
2272
- content: "";
2273
- block-size: 50%;
2274
- inline-size: 50%;
2275
- background-color: var(--_dot-color);
2276
- border-radius: 50%;
2277
- opacity: 0;
2278
- transform: scale(0);
2279
- transition: opacity var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
2280
- }
2281
- .radio:hover:not(:disabled) {
2282
- border-color: var(--_border-color-focus);
2283
- }
2284
- .radio:focus-visible {
2285
- border-color: var(--_border-color-focus);
2286
- outline: none;
2287
- box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg));
2288
- }
2289
- .radio:checked {
2290
- background: var(--_bg-checked);
2291
- border-color: var(--_bg-checked);
2292
- }
2293
- .radio:checked::before {
2294
- opacity: 1;
2295
- transform: scale(1);
2296
- }
2297
- .radio:disabled {
2298
- opacity: 0.5;
2299
- cursor: not-allowed;
2300
- }
2301
- }
2302
- @layer components.tokens {
2303
- .select {
2304
- --_height: var(--ui-select-height, var(--ui-row-2, 2rem));
2305
- --_padding-x: var(--ui-select-padding-x, var(--ui-space-1, 0.5rem));
2306
- --_font-size: var(--ui-select-font-size, var(--ui-font-size-sm, 0.875rem));
2307
- --_radius: var(--ui-select-radius, var(--ui-radius-md, 0.5rem));
2308
- --_bg: var(--ui-select-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
2309
- --_border-color: var(--ui-select-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
2310
- --_border-color-focus: var(--ui-select-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));
2311
- --_text: var(--ui-select-text, var(--ui-color-text, hsl(220, 10%, 10%)));
2312
- --_icon-color: var(--ui-select-icon-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
2313
- }
2314
- .select--sm {
2315
- --_height: var(--ui-select-height-sm, calc(1rem * 1.5));
2316
- --_font-size: var(--ui-select-font-size-sm, var(--ui-font-size-xs, 0.75rem));
2317
- }
2318
- .select--lg {
2319
- --_height: var(--ui-select-height-lg, calc(1rem * 2.5));
2320
- --_padding-x: var(--ui-select-padding-x-lg, var(--ui-space-2, 1rem));
2321
- --_font-size: var(--ui-select-font-size-lg, var(--ui-font-size-md, 1rem));
2322
- }
2323
- .select--filled {
2324
- --_bg: var(--ui-select-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
2325
- --_border-color: transparent;
2326
- }
2327
- .select--ghost {
2328
- --_bg: transparent;
2329
- --_border-color: transparent;
2330
- }
2331
- .select--error {
2332
- --_border-color: var(--ui-select-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
2333
- --_border-color-focus: var(--ui-select-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
2334
- }
2335
- .select--success {
2336
- --_border-color: var(--ui-select-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
2337
- --_border-color-focus: var(--ui-select-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
2338
- }
2339
- }
2340
- @layer components.styles {
2341
- .select {
2342
- display: inline-block;
2343
- block-size: var(--_height);
2344
- padding-inline-start: var(--_padding-x);
2345
- padding-inline-end: calc(var(--_height) - var(--ui-space-half, 0.25rem));
2346
- font-family: inherit;
2347
- font-size: var(--_font-size);
2348
- line-height: 1;
2349
- color: var(--_text);
2350
- background-color: var(--_bg);
2351
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
2352
- border: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
2353
- border-radius: var(--_radius);
2354
- cursor: pointer;
2355
- appearance: none;
2356
- transition: border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
2357
- background-repeat: no-repeat;
2358
- background-position: right var(--ui-space-half, 0.25rem) center;
2359
- background-size: calc(var(--_height) * 0.5);
2360
- }
2361
- .select:hover:not(:disabled, :focus) {
2362
- border-color: var(--ui-color-border-strong, hsl(220, 10%, 80%));
2363
- }
2364
- .select:focus, .select--focus {
2365
- border-color: var(--_border-color-focus);
2366
- outline: none;
2367
- box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg));
2368
- }
2369
- .select:disabled, .select--disabled {
2370
- opacity: 0.5;
2371
- cursor: not-allowed;
2372
- }
2373
- .select--block {
2374
- inline-size: 100%;
2375
- }
2376
- .select:invalid, .select--placeholder {
2377
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
2378
- }
2379
- }
2380
- @layer components.tokens {
2381
- .textarea {
2382
- --_min-height: var(--ui-textarea-min-height, calc(1rem * 4));
2383
- --_padding-x: var(--ui-textarea-padding-x, var(--ui-space-1, 0.5rem));
2384
- --_padding-y: var(--ui-textarea-padding-y, var(--ui-space-1, 0.5rem));
2385
- --_font-size: var(--ui-textarea-font-size, var(--ui-font-size-sm, 0.875rem));
2386
- --_radius: var(--ui-textarea-radius, var(--ui-radius-md, 0.5rem));
2387
- --_bg: var(--ui-textarea-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
2388
- --_border-color: var(--ui-textarea-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
2389
- --_border-color-focus: var(--ui-textarea-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));
2390
- --_text: var(--ui-textarea-text, var(--ui-color-text, hsl(220, 10%, 10%)));
2391
- --_placeholder: var(--ui-textarea-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
2392
- }
2393
- .textarea--sm {
2394
- --_min-height: var(--ui-textarea-min-height-sm, calc(1rem * 3));
2395
- --_font-size: var(--ui-textarea-font-size-sm, var(--ui-font-size-xs, 0.75rem));
2396
- }
2397
- .textarea--lg {
2398
- --_min-height: var(--ui-textarea-min-height-lg, calc(1rem * 6));
2399
- --_padding-x: var(--ui-textarea-padding-x-lg, var(--ui-space-2, 1rem));
2400
- --_padding-y: var(--ui-textarea-padding-y-lg, var(--ui-space-2, 1rem));
2401
- --_font-size: var(--ui-textarea-font-size-lg, var(--ui-font-size-md, 1rem));
2402
- }
2403
- .textarea--filled {
2404
- --_bg: var(--ui-textarea-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
2405
- --_border-color: transparent;
2406
- }
2407
- .textarea--ghost {
2408
- --_bg: transparent;
2409
- --_border-color: transparent;
2410
- }
2411
- .textarea--error {
2412
- --_border-color: var(--ui-textarea-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
2413
- --_border-color-focus: var(--ui-textarea-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
2414
- }
2415
- .textarea--success {
2416
- --_border-color: var(--ui-textarea-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
2417
- --_border-color-focus: var(--ui-textarea-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
2418
- }
2419
- }
2420
- @layer components.styles {
2421
- .textarea {
2422
- display: block;
2423
- box-sizing: border-box;
2424
- inline-size: 100%;
2425
- min-block-size: var(--_min-height);
2426
- padding-block: var(--_padding-y);
2427
- padding-inline: var(--_padding-x);
2428
- font-family: inherit;
2429
- font-size: var(--_font-size);
2430
- line-height: var(--ui-row-1, 1rem);
2431
- color: var(--_text);
2432
- background: var(--_bg);
2433
- border: none;
2434
- border-radius: var(--_radius);
2435
- outline: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
2436
- transition: border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
2437
- outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
2438
- resize: vertical;
2439
- }
2440
- .textarea::placeholder {
2441
- color: var(--_placeholder);
2442
- }
2443
- .textarea:hover:not(:disabled, :focus) {
2444
- outline-color: var(--ui-color-border-strong, hsl(220, 10%, 80%));
2445
- }
2446
- .textarea:focus, .textarea--focus {
2447
- outline-color: var(--_border-color-focus);
2448
- box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg));
2449
- }
2450
- .textarea:disabled, .textarea--disabled {
2451
- opacity: 0.5;
2452
- cursor: not-allowed;
2453
- resize: none;
2454
- }
2455
- .textarea:read-only {
2456
- background: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));
2457
- resize: none;
2458
- }
2459
- .textarea--resize-none {
2460
- resize: none;
2461
- }
2462
- .textarea--resize-horizontal {
2463
- resize: horizontal;
2464
- }
2465
- .textarea--resize-both {
2466
- resize: both;
2467
- }
2468
- }
2469
- @layer components.tokens {
2470
- .toggle {
2471
- --_track-width: var(--ui-toggle-track-width, calc(0.5rem * 5));
2472
- --_track-height: var(--ui-toggle-track-height, calc(0.5rem * 3));
2473
- --_track-bg: var(--ui-toggle-track-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
2474
- --_track-bg-checked: var(--ui-toggle-track-bg-checked, var(--ui-color-primary));
2475
- --_track-radius: var(--ui-toggle-track-radius, calc(0.5rem * 1.5));
2476
- --_thumb-size: var(--ui-toggle-thumb-size, calc(0.5rem * 2.5));
2477
- --_thumb-bg: var(--ui-toggle-thumb-bg, white);
2478
- --_thumb-offset: var(--ui-toggle-thumb-offset, calc(0.5rem / 4));
2479
- }
2480
- .toggle--sm {
2481
- --_track-width: calc(0.5rem * 4);
2482
- --_track-height: calc(0.5rem * 2);
2483
- --_track-radius: 0.5rem;
2484
- --_thumb-size: calc(0.5rem * 1.5);
2485
- }
2486
- .toggle--lg {
2487
- --_track-width: calc(0.5rem * 6);
2488
- --_track-height: calc(0.5rem * 4);
2489
- --_track-radius: calc(0.5rem * 2);
2490
- --_thumb-size: calc(0.5rem * 3.5);
2491
- }
2492
- }
2493
- @layer components.styles {
2494
- .toggle {
2495
- display: inline-flex;
2496
- flex-shrink: 0;
2497
- align-items: center;
2498
- position: relative;
2499
- block-size: var(--_track-height);
2500
- inline-size: var(--_track-width);
2501
- background: var(--_track-bg);
2502
- border-radius: var(--_track-radius);
2503
- cursor: pointer;
2504
- transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
2505
- }
2506
- .toggle__input {
2507
- position: absolute;
2508
- inset: 0;
2509
- block-size: 100%;
2510
- inline-size: 100%;
2511
- margin: 0;
2512
- opacity: 0;
2513
- cursor: pointer;
2514
- }
2515
- .toggle__track {
2516
- position: absolute;
2517
- inset: 0;
2518
- background: var(--_track-bg);
2519
- border-radius: var(--_track-radius);
2520
- transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
2521
- }
2522
- .toggle__thumb {
2523
- position: absolute;
2524
- inset-block-start: var(--_thumb-offset);
2525
- inset-inline-start: var(--_thumb-offset);
2526
- block-size: var(--_thumb-size);
2527
- inline-size: var(--_thumb-size);
2528
- background: var(--_thumb-bg);
2529
- border-radius: 50%;
2530
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
2531
- transition: transform var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
2532
- }
2533
- .toggle__input:checked ~ .toggle__track {
2534
- background: var(--_track-bg-checked);
2535
- }
2536
- .toggle__input:checked ~ .toggle__thumb {
2537
- transform: translateX(calc(var(--_track-width) - var(--_thumb-size) - var(--_thumb-offset) * 2));
2538
- }
2539
- .toggle__input:focus-visible ~ .toggle__track {
2540
- outline: 2px solid var(--ui-color-focus, var(--ui-color-primary));
2541
- outline-offset: calc(0.5rem / 4);
2542
- }
2543
- .toggle__input:disabled ~ .toggle__track,
2544
- .toggle__input:disabled ~ .toggle__thumb {
2545
- opacity: 0.5;
2546
- cursor: not-allowed;
2547
- }
2548
- .toggle:has(.toggle__input:disabled) {
2549
- cursor: not-allowed;
2550
- }
2551
- }
2552
- @layer components.tokens {
2553
- .divider {
2554
- --_color: var(--ui-divider-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
2555
- --_line-size: var(--ui-divider-line-size, 1px);
2556
- --_height: var(--ui-divider-height, 0.5rem);
2557
- --_gap: var(--ui-divider-gap, calc(0.5rem * 2));
2558
- }
2559
- }
2560
- @layer components.styles {
2561
- .divider {
2562
- display: flex;
2563
- align-items: center;
2564
- block-size: var(--_height);
2565
- margin: var(--_gap) 0;
2566
- font-size: var(--ui-font-size-sm, 0.875rem);
2567
- line-height: 1;
2568
- color: var(--ui-color-text-muted);
2569
- }
2570
- .divider::before,
2571
- .divider::after {
2572
- content: "";
2573
- flex: 1;
2574
- block-size: var(--_line-size);
2575
- background: var(--_color);
2576
- }
2577
- .divider:not(:empty) {
2578
- --_height: var(--ui-row-1, 1rem);
2579
- }
2580
- .divider:not(:empty)::before {
2581
- margin-inline-end: calc(0.5rem * 2);
2582
- }
2583
- .divider:not(:empty)::after {
2584
- margin-inline-start: calc(0.5rem * 2);
2585
- }
2586
- .divider:empty::after {
2587
- display: none;
2588
- }
2589
- .divider--vertical {
2590
- flex-direction: column;
2591
- align-self: stretch;
2592
- margin: 0 var(--_gap);
2593
- writing-mode: vertical-rl;
2594
- }
2595
- .divider--vertical::before,
2596
- .divider--vertical::after {
2597
- flex: 1;
2598
- block-size: auto;
2599
- inline-size: var(--_size);
2600
- }
2601
- .divider--start::before {
2602
- display: none;
2603
- }
2604
- .divider--start:not(:empty)::after {
2605
- margin-inline-start: calc(0.5rem * 2);
2606
- }
2607
- .divider--end::after {
2608
- display: none;
2609
- }
2610
- .divider--end:not(:empty)::before {
2611
- margin-inline-end: calc(0.5rem * 2);
2612
- }
2613
- .divider--dashed::before,
2614
- .divider--dashed::after {
2615
- background: repeating-linear-gradient(90deg, var(--_color) 0, var(--_color) calc(0.5rem / 2), transparent calc(0.5rem / 2), transparent 0.5rem);
2616
- }
2617
- .divider--vertical.divider--dashed::before,
2618
- .divider--vertical.divider--dashed::after {
2619
- background: repeating-linear-gradient(180deg, var(--_color) 0, var(--_color) calc(0.5rem / 2), transparent calc(0.5rem / 2), transparent 0.5rem);
2620
- }
2621
- }
2622
- @layer components.tokens {
2623
- .breadcrumb {
2624
- --_height: var(--ui-breadcrumb-height, var(--ui-row-1, 1rem));
2625
- --_gap: var(--ui-breadcrumb-gap, calc(0.5rem * 1));
2626
- --_separator-color: var(--ui-breadcrumb-separator-color, var(--ui-color-text-muted));
2627
- --_link-color: var(--ui-breadcrumb-link-color, var(--ui-color-text-muted));
2628
- --_current-color: var(--ui-breadcrumb-current-color, var(--ui-color-text));
2629
- }
2630
- }
2631
- @layer components.styles {
2632
- .breadcrumb {
2633
- display: flex;
2634
- flex-wrap: wrap;
2635
- align-items: center;
2636
- gap: var(--_gap);
2637
- block-size: var(--_height);
2638
- padding: 0;
2639
- margin: 0;
2640
- font-size: var(--ui-font-size-sm, 0.875rem);
2641
- line-height: 1;
2642
- list-style: none;
2643
- }
2644
- .breadcrumb__item {
2645
- display: flex;
2646
- align-items: center;
2647
- gap: var(--_gap);
2648
- block-size: var(--_height);
2649
- }
2650
- .breadcrumb__item:not(:last-child)::after {
2651
- content: var(--ui-breadcrumb-separator, "/");
2652
- color: var(--_separator-color);
2653
- }
2654
- .breadcrumb__link {
2655
- text-decoration: none;
2656
- color: var(--_link-color);
2657
- transition: color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
2658
- }
2659
- .breadcrumb__link:hover {
2660
- text-decoration: underline;
2661
- color: var(--ui-color-primary);
2662
- }
2663
- .breadcrumb__item:last-child .breadcrumb__link,
2664
- .breadcrumb__current {
2665
- color: var(--_current-color);
2666
- pointer-events: none;
2667
- }
2668
- .breadcrumb__item--hidden {
2669
- display: none;
2670
- }
2671
- .breadcrumb__ellipsis {
2672
- color: var(--_separator-color);
2673
- }
2674
- }
2675
- @layer components.tokens {
2676
- .menu {
2677
- --_min-width: var(--ui-menu-min-width, calc(0.5rem * 16));
2678
- --_max-height: var(--ui-menu-max-height, calc(0.5rem * 40));
2679
- --_padding: var(--ui-menu-padding, calc(0.5rem * 1));
2680
- --_radius: var(--ui-menu-radius, var(--ui-radius-md, 0.5rem));
2681
- --_bg: var(--ui-menu-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
2682
- --_border-color: var(--ui-menu-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
2683
- --_shadow: var(--ui-menu-shadow, var(--shadow-lg));
2684
- --_item-padding: var(--ui-menu-item-padding, calc(0.5rem * 1) calc(0.5rem * 2));
2685
- --_item-radius: var(--ui-menu-item-radius, var(--ui-radius-sm, 0.25rem));
2686
- --_item-bg-hover: var(--ui-menu-item-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
2687
- }
2688
- }
2689
- @layer components.styles {
2690
- .menu {
2691
- min-inline-size: var(--_min-width);
2692
- max-block-size: var(--_max-height);
2693
- padding: var(--_padding);
2694
- overflow-y: auto;
2695
- background: var(--_bg);
2696
- border-radius: var(--_radius);
2697
- outline: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
2698
- box-shadow: var(--_shadow);
2699
- outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
2700
- }
2701
- .menu__group {
2702
- padding: 0;
2703
- margin: 0;
2704
- list-style: none;
2705
- }
2706
- .menu__label {
2707
- padding: var(--_item-padding);
2708
- font-size: var(--ui-font-size-xs, 0.75rem);
2709
- font-weight: var(--ui-weight-medium, 500);
2710
- line-height: var(--ui-row-1, 1rem);
2711
- letter-spacing: 0.05em;
2712
- text-transform: uppercase;
2713
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
2714
- }
2715
- .menu__item {
2716
- display: flex;
2717
- align-items: center;
2718
- gap: calc(0.5rem * 1);
2719
- padding: var(--_item-padding);
2720
- font-size: var(--ui-font-size-sm, 0.875rem);
2721
- line-height: var(--ui-row-1, 1rem);
2722
- text-decoration: none;
2723
- color: var(--ui-color-text, hsl(220, 10%, 10%));
2724
- background: transparent;
2725
- border: none;
2726
- border-radius: var(--_item-radius);
2727
- cursor: pointer;
2728
- transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
2729
- }
2730
- .menu__item:hover, .menu__item:focus-visible {
2731
- background: var(--_item-bg-hover);
2732
- outline: none;
2733
- }
2734
- .menu__item--danger {
2735
- color: var(--ui-color-danger, oklch(60% 0.22 25deg));
2736
- }
2737
- .menu__item--danger:hover, .menu__item--danger:focus-visible {
2738
- color: var(--ui-color-danger, oklch(60% 0.22 25deg));
2739
- }
2740
- .menu__item--disabled,
2741
- .menu__item[aria-disabled=true] {
2742
- opacity: 0.5;
2743
- pointer-events: none;
2744
- }
2745
- .menu__item-icon {
2746
- flex-shrink: 0;
2747
- block-size: calc(0.5rem * 2);
2748
- inline-size: calc(0.5rem * 2);
2749
- }
2750
- .menu__item-shortcut {
2751
- margin-inline-start: auto;
2752
- font-size: var(--ui-font-size-xs, 0.75rem);
2753
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
2754
- }
2755
- .menu__separator {
2756
- display: flex;
2757
- align-items: center;
2758
- block-size: calc(0.5rem * 2);
2759
- margin: 0;
2760
- }
2761
- .menu__separator::before {
2762
- content: "";
2763
- flex: 1;
2764
- block-size: var(--ui-border-width-sm, 1px);
2765
- background: var(--ui-color-border, hsl(220, 10%, 90%));
2766
- }
2767
- .menu__item--check,
2768
- .menu__item--radio {
2769
- position: relative;
2770
- padding-inline-start: calc(0.5rem * 4);
2771
- }
2772
- .menu__item-indicator {
2773
- display: flex;
2774
- align-items: center;
2775
- justify-content: center;
2776
- position: absolute;
2777
- inset-inline-start: calc(0.5rem * 1);
2778
- block-size: calc(0.5rem * 2);
2779
- inline-size: calc(0.5rem * 2);
2780
- }
2781
- }
2782
- @layer components.tokens {
2783
- .nav {
2784
- --_gap: var(--ui-nav-gap, var(--ui-space-1, 0.5rem));
2785
- --_item-height: var(--ui-nav-item-height, var(--ui-row-2, 2rem));
2786
- --_item-padding-x: var(--ui-nav-item-padding-x, var(--ui-space-2, 1rem));
2787
- --_item-font-size: var(--ui-nav-item-font-size, var(--ui-font-size-sm, 0.875rem));
2788
- --_item-font-weight: var(--ui-nav-item-font-weight, var(--ui-weight-medium, 500));
2789
- --_item-color: var(--ui-nav-item-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
2790
- --_item-color-hover: var(--ui-nav-item-color-hover, var(--ui-color-text, hsl(220, 10%, 10%)));
2791
- --_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-primary, oklch(55% 0.22 250deg)));
2792
- --_item-radius: var(--ui-nav-item-radius, var(--ui-radius-sm, 0.25rem));
2793
- --_border-color: var(--ui-nav-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
2794
- }
2795
- .nav--pills {
2796
- --_item-bg-hover: var(--ui-nav-item-bg-hover, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
2797
- --_item-bg-active: var(--ui-nav-item-bg-active, var(--ui-color-primary, oklch(55% 0.22 250deg)));
2798
- --_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
2799
- }
2800
- }
2801
- @layer components.styles {
2802
- .nav__list {
2803
- display: flex;
2804
- align-items: stretch;
2805
- gap: var(--_gap);
2806
- box-sizing: border-box;
2807
- block-size: var(--_item-height);
2808
- padding: 0;
2809
- margin: 0;
2810
- list-style: none;
2811
- box-shadow: inset 0 calc(var(--ui-border-width-sm, 0.0625rem) * -1) 0 var(--_border-color);
2812
- }
2813
- .nav__item {
2814
- display: inline-flex;
2815
- align-items: center;
2816
- box-sizing: border-box;
2817
- block-size: var(--_item-height);
2818
- padding-inline: var(--_item-padding-x);
2819
- font-family: var(--ui-font-sans, Noto Sans, system-ui, -apple-system, sans-serif);
2820
- font-size: var(--_item-font-size);
2821
- font-weight: var(--_item-font-weight);
2822
- line-height: 1;
2823
- text-decoration: none;
2824
- white-space: nowrap;
2825
- color: var(--_item-color);
2826
- background: transparent;
2827
- border: none;
2828
- box-shadow: inset 0 calc(var(--ui-border-width-md, 0.125rem) * -1) 0 transparent;
2829
- cursor: pointer;
2830
- transition: color var(--ui-duration-base) var(--ui-ease-default), background var(--ui-duration-base) var(--ui-ease-default), box-shadow var(--ui-duration-base) var(--ui-ease-default);
2831
- }
2832
- .nav__item:hover {
2833
- color: var(--_item-color-hover);
2834
- }
2835
- .nav__item--active {
2836
- color: var(--_item-color-active);
2837
- box-shadow: inset 0 calc(var(--ui-border-width-md, 0.125rem) * -1) 0 var(--_item-color-active);
2838
- }
2839
- .nav__item--disabled {
2840
- opacity: 0.5;
2841
- pointer-events: none;
2842
- }
2843
- .nav--pills .nav__list {
2844
- box-shadow: none;
2845
- }
2846
- .nav--pills .nav__item {
2847
- border-radius: var(--_item-radius);
2848
- box-shadow: none;
2849
- }
2850
- .nav--pills .nav__item:hover {
2851
- background: var(--_item-bg-hover);
2852
- }
2853
- .nav--pills .nav__item--active {
2854
- color: var(--_item-color-active);
2855
- background: var(--_item-bg-active);
2856
- }
2857
- .nav--vertical .nav__list {
2858
- flex-direction: column;
2859
- align-items: stretch;
2860
- block-size: auto;
2861
- box-shadow: inset calc(var(--ui-border-width-sm, 0.0625rem) * -1) 0 0 var(--_border-color);
2862
- }
2863
- .nav--vertical .nav__item {
2864
- box-shadow: inset calc(var(--ui-border-width-md, 0.125rem) * -1) 0 0 transparent;
2865
- }
2866
- .nav--vertical .nav__item--active {
2867
- box-shadow: inset calc(var(--ui-border-width-md, 0.125rem) * -1) 0 0 var(--_item-color-active);
2868
- }
2869
- .nav--vertical.nav--pills .nav__list {
2870
- box-shadow: none;
2871
- }
2872
- .nav--vertical.nav--pills .nav__item {
2873
- box-shadow: none;
2874
- }
2875
- }
2876
- @layer components.tokens {
2877
- .pagination {
2878
- --_gap: var(--ui-pagination-gap, calc(0.5rem * 0.5));
2879
- --_item-size: var(--ui-pagination-item-size, calc(0.5rem * 4));
2880
- --_item-radius: var(--ui-pagination-item-radius, var(--ui-radius-sm, 0.25rem));
2881
- --_item-bg: var(--ui-pagination-item-bg, transparent);
2882
- --_item-bg-hover: var(--ui-pagination-item-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
2883
- --_item-bg-active: var(--ui-pagination-item-bg-active, var(--ui-color-primary));
2884
- --_item-color: var(--ui-pagination-item-color, var(--ui-color-text, hsl(220, 10%, 10%)));
2885
- --_item-color-active: var(--ui-pagination-item-color-active, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
2886
- }
2887
- }
2888
- @layer components.styles {
2889
- .pagination {
2890
- display: flex;
2891
- align-items: center;
2892
- gap: var(--_gap);
2893
- }
2894
- .pagination__list {
2895
- display: flex;
2896
- align-items: center;
2897
- gap: var(--_gap);
2898
- padding: 0;
2899
- margin: 0;
2900
- list-style: none;
2901
- }
2902
- .pagination__item {
2903
- display: flex;
2904
- }
2905
- .pagination__link {
2906
- display: inline-flex;
2907
- align-items: center;
2908
- justify-content: center;
2909
- block-size: var(--_item-size);
2910
- min-inline-size: var(--_item-size);
2911
- padding-inline: calc(0.5rem * 1);
2912
- font-size: var(--ui-font-size-sm, 0.875rem);
2913
- text-decoration: none;
2914
- color: var(--_item-color);
2915
- background: var(--_item-bg);
2916
- border-radius: var(--_item-radius);
2917
- transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease), color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
2918
- }
2919
- .pagination__link:hover {
2920
- background: var(--_item-bg-hover);
2921
- }
2922
- .pagination__link[aria-current=page],
2923
- .pagination__link--active {
2924
- color: var(--_item-color-active);
2925
- background: var(--_item-bg-active);
2926
- pointer-events: none;
2927
- }
2928
- .pagination__link[aria-disabled=true],
2929
- .pagination__link--disabled {
2930
- opacity: 0.5;
2931
- pointer-events: none;
2932
- }
2933
- .pagination__prev,
2934
- .pagination__next {
2935
- display: inline-flex;
2936
- align-items: center;
2937
- gap: calc(0.5rem * 0.5);
2938
- padding-inline: calc(0.5rem * 1.5);
2939
- }
2940
- .pagination__ellipsis {
2941
- display: inline-flex;
2942
- align-items: center;
2943
- justify-content: center;
2944
- block-size: var(--_item-size);
2945
- min-inline-size: var(--_item-size);
2946
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
2947
- }
2948
- .pagination--sm {
2949
- --_item-size: calc(0.5rem * 3);
2950
- --_gap: calc(0.5rem * 0.25);
2951
- }
2952
- .pagination--lg {
2953
- --_item-size: calc(0.5rem * 5);
2954
- --_gap: calc(0.5rem * 0.75);
2955
- }
2956
- }
2957
- @layer components.tokens {
2958
- .tabs {
2959
- --_border-color: var(--ui-tabs-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
2960
- --_tab-padding-x: var(--ui-tabs-tab-padding-x, var(--ui-space-2, 1rem));
2961
- --_tab-padding-y: var(--ui-tabs-tab-padding-y, var(--ui-space-1, 0.5rem));
2962
- --_tab-bg: var(--ui-tabs-tab-bg, transparent);
2963
- --_tab-bg-active: var(--ui-tabs-tab-bg-active, var(--ui-color-bg, hsl(220, 10%, 98%)));
2964
- --_panel-padding: var(--ui-tabs-panel-padding, var(--ui-space-3, 1.5rem));
2965
- }
2966
- }
2967
- @layer components.styles {
2968
- .tabs__list {
2969
- display: flex;
2970
- align-items: stretch;
2971
- gap: var(--ui-space-1, 0.5rem);
2972
- box-sizing: border-box;
2973
- block-size: var(--ui-row-2, 2rem);
2974
- box-shadow: inset 0 calc(var(--ui-border-width-sm, 0.0625rem) * -1) 0 var(--_border-color);
2975
- }
2976
- .tabs__tab {
2977
- display: inline-flex;
2978
- align-items: center;
2979
- box-sizing: border-box;
2980
- block-size: var(--ui-row-2, 2rem);
2981
- padding-inline: var(--_tab-padding-x);
2982
- margin: 0;
2983
- font-family: var(--ui-font-sans, Noto Sans, system-ui, -apple-system, sans-serif);
2984
- font-size: var(--ui-font-size-sm, 0.875rem);
2985
- font-weight: var(--ui-weight-medium, 500);
2986
- line-height: 1;
2987
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
2988
- background: var(--_tab-bg);
2989
- border: none;
2990
- box-shadow: inset 0 calc(var(--ui-border-width-md, 0.125rem) * -1) 0 transparent;
2991
- cursor: pointer;
2992
- transition: color var(--ui-duration-base) var(--ui-ease-default), box-shadow var(--ui-duration-base) var(--ui-ease-default);
2993
- }
2994
- .tabs__tab:hover {
2995
- color: var(--ui-color-text, hsl(220, 10%, 10%));
2996
- }
2997
- .tabs__tab--active {
2998
- color: var(--ui-color-primary, oklch(55% 0.22 250deg));
2999
- background: var(--_tab-bg-active);
3000
- box-shadow: inset 0 calc(var(--ui-border-width-md, 0.125rem) * -1) 0 var(--ui-color-primary, oklch(55% 0.22 250deg));
3001
- }
3002
- .tabs__panel {
3003
- display: none;
3004
- padding: var(--_panel-padding);
3005
- line-height: var(--ui-row-1, 1rem);
3006
- }
3007
- .tabs__panel--active {
3008
- display: block;
3009
- }
3010
- }
3011
- @layer components.tokens {
3012
- .dialog {
3013
- --_header-padding: var(--ui-dialog-header-padding, calc(0.5rem * 2) calc(0.5rem * 3));
3014
- --_body-padding: var(--ui-dialog-body-padding, calc(0.5rem * 3));
3015
- --_footer-padding: var(--ui-dialog-footer-padding, calc(0.5rem * 2) calc(0.5rem * 3));
3016
- --_border-color: var(--ui-dialog-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
3017
- }
3018
- }
3019
- @layer components.styles {
3020
- .dialog .modal__content {
3021
- padding: 0;
3022
- }
3023
- .dialog__header {
3024
- display: flex;
3025
- flex-shrink: 0;
3026
- align-items: center;
3027
- justify-content: space-between;
3028
- gap: calc(0.5rem * 2);
3029
- padding: var(--_header-padding);
3030
- border-block-end: 1px solid var(--_border-color);
3031
- }
3032
- .dialog__title {
3033
- margin: 0;
3034
- font-size: var(--ui-font-size-lg, 1.25rem);
3035
- font-weight: var(--ui-weight-semibold, 600);
3036
- line-height: calc(0.5rem * 3);
3037
- }
3038
- .dialog__close {
3039
- flex-shrink: 0;
3040
- margin-inline-start: auto;
3041
- }
3042
- .dialog__body {
3043
- flex: 1 1 auto;
3044
- padding: var(--_body-padding);
3045
- overflow-y: auto;
3046
- }
3047
- .dialog__footer {
3048
- display: flex;
3049
- flex-shrink: 0;
3050
- align-items: center;
3051
- justify-content: flex-end;
3052
- gap: calc(0.5rem * 1.5);
3053
- padding: var(--_footer-padding);
3054
- border-block-start: 1px solid var(--_border-color);
3055
- }
3056
- .dialog--borderless .dialog__header {
3057
- border-block-end: none;
3058
- }
3059
- .dialog--borderless .dialog__footer {
3060
- border-block-start: none;
3061
- }
3062
- }
3063
- @layer components.tokens {
3064
- .drawer {
3065
- --_size: var(--ui-drawer-size, calc(0.5rem * 40));
3066
- --_max-size: var(--ui-drawer-max-size, 90%);
3067
- --_bg: var(--ui-drawer-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
3068
- --_shadow: var(--ui-drawer-shadow, var(--shadow-lg));
3069
- --_header-padding: var(--ui-drawer-header-padding, calc(0.5rem * 2) calc(0.5rem * 3));
3070
- --_body-padding: var(--ui-drawer-body-padding, calc(0.5rem * 3));
3071
- --_footer-padding: var(--ui-drawer-footer-padding, calc(0.5rem * 2) calc(0.5rem * 3));
3072
- --_border-color: var(--ui-drawer-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
3073
- }
3074
- .drawer--sm {
3075
- --_size: calc(0.5rem * 30);
3076
- }
3077
- .drawer--lg {
3078
- --_size: calc(0.5rem * 50);
3079
- }
3080
- .drawer--full {
3081
- --_size: 100%;
3082
- --_max-size: 100%;
3083
- }
3084
- }
3085
- @layer components.styles {
3086
- .drawer-overlay {
3087
- position: fixed;
3088
- inset: 0;
3089
- z-index: var(--ui-z-drawer, 900);
3090
- background: var(--ui-overlay-bg, rgba(0, 0, 0, 0.5));
3091
- }
3092
- .drawer-overlay[data-state=open] {
3093
- animation: drawer-overlay-in var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
3094
- }
3095
- .drawer-overlay[data-state=closed] {
3096
- animation: drawer-overlay-out var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
3097
- }
3098
- @keyframes drawer-overlay-in {
3099
- from {
3100
- opacity: 0;
3101
- }
3102
- }
3103
- @keyframes drawer-overlay-out {
3104
- to {
3105
- opacity: 0;
3106
- }
3107
- }
3108
- .drawer {
3109
- display: flex;
3110
- flex-direction: column;
3111
- position: fixed;
3112
- z-index: var(--ui-z-drawer, 900);
3113
- background: var(--_bg);
3114
- box-shadow: var(--_shadow);
3115
- }
3116
- .drawer--end {
3117
- inset-block: 0;
3118
- inset-inline-end: 0;
3119
- inline-size: var(--_size);
3120
- max-inline-size: var(--_max-size);
3121
- box-shadow: calc(var(--ui-border-width-sm, 1px) * -1) 0 0 var(--_border-color);
3122
- }
3123
- .drawer--start {
3124
- inset-block: 0;
3125
- inset-inline-start: 0;
3126
- inline-size: var(--_size);
3127
- max-inline-size: var(--_max-size);
3128
- box-shadow: var(--ui-border-width-sm, 1px) 0 0 var(--_border-color);
3129
- }
3130
- .drawer--top {
3131
- inset-block-start: 0;
3132
- inset-inline: 0;
3133
- block-size: var(--_size);
3134
- max-block-size: var(--_max-size);
3135
- box-shadow: 0 var(--ui-border-width-sm, 1px) 0 var(--_border-color);
3136
- }
3137
- .drawer--bottom {
3138
- inset-block-end: 0;
3139
- inset-inline: 0;
3140
- block-size: var(--_size);
3141
- max-block-size: var(--_max-size);
3142
- box-shadow: 0 calc(var(--ui-border-width-sm, 1px) * -1) 0 var(--_border-color);
3143
- }
3144
- .drawer--end[data-state=open] {
3145
- animation: drawer-slide-in-end var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
3146
- }
3147
- .drawer--end[data-state=closed] {
3148
- animation: drawer-slide-out-end var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
3149
- }
3150
- .drawer--start[data-state=open] {
3151
- animation: drawer-slide-in-start var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
3152
- }
3153
- .drawer--start[data-state=closed] {
3154
- animation: drawer-slide-out-start var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
3155
- }
3156
- .drawer--top[data-state=open] {
3157
- animation: drawer-slide-in-top var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
3158
- }
3159
- .drawer--top[data-state=closed] {
3160
- animation: drawer-slide-out-top var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
3161
- }
3162
- .drawer--bottom[data-state=open] {
3163
- animation: drawer-slide-in-bottom var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
3164
- }
3165
- .drawer--bottom[data-state=closed] {
3166
- animation: drawer-slide-out-bottom var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
3167
- }
3168
- @keyframes drawer-slide-in-end {
3169
- from {
3170
- transform: translateX(100%);
3171
- }
3172
- }
3173
- @keyframes drawer-slide-out-end {
3174
- to {
3175
- transform: translateX(100%);
3176
- }
3177
- }
3178
- @keyframes drawer-slide-in-start {
3179
- from {
3180
- transform: translateX(-100%);
3181
- }
3182
- }
3183
- @keyframes drawer-slide-out-start {
3184
- to {
3185
- transform: translateX(-100%);
3186
- }
3187
- }
3188
- @keyframes drawer-slide-in-top {
3189
- from {
3190
- transform: translateY(-100%);
3191
- }
3192
- }
3193
- @keyframes drawer-slide-out-top {
3194
- to {
3195
- transform: translateY(-100%);
3196
- }
3197
- }
3198
- @keyframes drawer-slide-in-bottom {
3199
- from {
3200
- transform: translateY(100%);
3201
- }
3202
- }
3203
- @keyframes drawer-slide-out-bottom {
3204
- to {
3205
- transform: translateY(100%);
3206
- }
3207
- }
3208
- .drawer__header {
3209
- display: flex;
3210
- flex-shrink: 0;
3211
- align-items: center;
3212
- justify-content: space-between;
3213
- gap: calc(0.5rem * 2);
3214
- padding: var(--_header-padding);
3215
- box-shadow: inset 0 calc(var(--ui-border-width-sm, 1px) * -1) 0 var(--_border-color);
3216
- }
3217
- .drawer__title {
3218
- margin: 0;
3219
- font-size: var(--ui-font-size-lg, 1.25rem);
3220
- font-weight: var(--ui-weight-semibold, 600);
3221
- line-height: var(--ui-row-1, 1rem);
3222
- }
3223
- .drawer__description {
3224
- margin: 0;
3225
- font-size: var(--ui-font-size-sm, 0.875rem);
3226
- line-height: var(--ui-row-1, 1rem);
3227
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
3228
- }
3229
- .drawer__close {
3230
- flex-shrink: 0;
3231
- margin-inline-start: auto;
3232
- }
3233
- .drawer__body {
3234
- flex: 1 1 auto;
3235
- padding: var(--_body-padding);
3236
- overflow-y: auto;
3237
- line-height: var(--ui-row-1, 1rem);
3238
- }
3239
- .drawer__footer {
3240
- display: flex;
3241
- flex-shrink: 0;
3242
- align-items: center;
3243
- justify-content: flex-end;
3244
- gap: calc(0.5rem * 2);
3245
- padding: var(--_footer-padding);
3246
- box-shadow: inset 0 var(--ui-border-width-sm, 1px) 0 var(--_border-color);
3247
- }
3248
- }
3249
- @layer components.tokens {
3250
- .modal {
3251
- --_bg: var(--ui-modal-bg, var(--ui-color-bg, white));
3252
- --_radius: var(--ui-modal-radius, var(--ui-radius-lg, calc(0.5rem * 1.5)));
3253
- --_shadow: var(--ui-modal-shadow, 0 calc(0.5rem * 3) calc(0.5rem * 6) rgb(0 0 0 / 0.25));
3254
- --_padding: var(--ui-modal-padding, calc(0.5rem * 3));
3255
- --_max-width: var(--ui-modal-max-width, calc(0.5rem * 60));
3256
- --_max-height: var(--ui-modal-max-height, calc(100vh - 0.5rem * 8));
3257
- --_z: var(--ui-modal-z, var(--ui-z-modal, 400));
3258
- }
3259
- .modal--sm {
3260
- --_max-width: var(--ui-modal-max-width-sm, calc(0.5rem * 40));
3261
- }
3262
- .modal--lg {
3263
- --_max-width: var(--ui-modal-max-width-lg, calc(0.5rem * 80));
3264
- }
3265
- .modal--full {
3266
- --_max-width: calc(100vw - 0.5rem * 4);
3267
- --_max-height: calc(100vh - 0.5rem * 4);
3268
- --_radius: 0;
3269
- }
3270
- }
3271
- @layer components.styles {
3272
- .modal {
3273
- display: flex;
3274
- align-items: center;
3275
- justify-content: center;
3276
- position: fixed;
3277
- inset: 0;
3278
- z-index: var(--_z);
3279
- padding: calc(0.5rem * 2);
3280
- }
3281
- .modal__content {
3282
- display: flex;
3283
- flex-direction: column;
3284
- position: relative;
3285
- inline-size: 100%;
3286
- max-block-size: var(--_max-height);
3287
- max-inline-size: var(--_max-width);
3288
- padding: var(--_padding);
3289
- overflow: hidden;
3290
- background: var(--_bg);
3291
- border-radius: var(--_radius);
3292
- box-shadow: var(--_shadow);
3293
- }
3294
- .modal__body {
3295
- flex: 1 1 auto;
3296
- overflow-y: auto;
3297
- }
3298
- .modal--entering .modal__content,
3299
- .modal--visible .modal__content {
3300
- opacity: 1;
3301
- transform: scale(1);
3302
- }
3303
- .modal--exiting .modal__content,
3304
- .modal--hidden .modal__content {
3305
- opacity: 0;
3306
- transform: scale(0.95);
3307
- }
3308
- .modal--animate .modal__content {
3309
- transition: opacity var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease), transform var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
3310
- }
3311
- .modal--hidden {
3312
- visibility: hidden;
3313
- pointer-events: none;
3314
- }
3315
- }
3316
- @layer components.tokens {
3317
- .overlay {
3318
- --_bg: var(--ui-overlay-bg, rgb(0 0 0 / 0.5));
3319
- --_z: var(--ui-overlay-z, var(--ui-z-overlay, 300));
3320
- }
3321
- .overlay--light {
3322
- --_bg: var(--ui-overlay-bg-light, rgb(255 255 255 / 0.7));
3323
- }
3324
- .overlay--blur {
3325
- --_bg: var(--ui-overlay-bg-blur, rgb(0 0 0 / 0.3));
3326
- }
3327
- }
3328
- @layer components.styles {
3329
- .overlay {
3330
- position: fixed;
3331
- inset: 0;
3332
- z-index: var(--_z);
3333
- background: var(--_bg);
3334
- }
3335
- .overlay--blur {
3336
- backdrop-filter: blur(calc(0.5rem * 0.5));
3337
- }
3338
- .overlay--entering,
3339
- .overlay--visible {
3340
- opacity: 1;
3341
- }
3342
- .overlay--exiting,
3343
- .overlay--hidden {
3344
- opacity: 0;
3345
- pointer-events: none;
3346
- }
3347
- .overlay--animate {
3348
- transition: opacity var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
3349
- }
3350
- }
3351
- @layer components.tokens {
3352
- .popover {
3353
- --_bg: var(--ui-popover-bg, var(--ui-color-bg, white));
3354
- --_border-color: var(--ui-popover-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
3355
- --_radius: var(--ui-popover-radius, var(--ui-radius-md, calc(0.5rem * 1)));
3356
- --_shadow: var(--ui-popover-shadow, 0 calc(0.5rem / 2) calc(0.5rem * 2) rgb(0 0 0 / 0.15));
3357
- --_padding: var(--ui-popover-padding, calc(0.5rem * 2));
3358
- --_max-width: var(--ui-popover-max-width, calc(0.5rem * 40));
3359
- --_z: var(--ui-popover-z, var(--ui-z-popover, 500));
3360
- --_arrow-size: var(--ui-popover-arrow-size, calc(0.5rem));
3361
- }
3362
- }
3363
- @layer components.styles {
3364
- .popover {
3365
- position: absolute;
3366
- z-index: var(--_z);
3367
- max-inline-size: var(--_max-width);
3368
- padding: var(--_padding);
3369
- line-height: var(--ui-row-1, 1rem);
3370
- background: var(--_bg);
3371
- border-radius: var(--_radius);
3372
- outline: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
3373
- box-shadow: var(--_shadow);
3374
- outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
3375
- }
3376
- .popover__header {
3377
- padding-block-end: calc(0.5rem * 2);
3378
- margin-block-end: calc(0.5rem * 2);
3379
- box-shadow: inset 0 calc(var(--ui-border-width-sm, 1px) * -1) 0 var(--_border-color);
3380
- }
3381
- .popover__title {
3382
- margin: 0;
3383
- font-size: var(--ui-font-size-md, 1rem);
3384
- font-weight: var(--ui-weight-semibold, 600);
3385
- }
3386
- .popover--top::after {
3387
- content: "";
3388
- position: absolute;
3389
- inset-block-start: 100%;
3390
- inset-inline-start: 50%;
3391
- border: var(--_arrow-size) solid transparent;
3392
- border-block-start-color: var(--_bg);
3393
- transform: translateX(-50%);
3394
- }
3395
- .popover--top::before {
3396
- content: "";
3397
- position: absolute;
3398
- inset-block-start: 100%;
3399
- inset-inline-start: 50%;
3400
- border: calc(var(--_arrow-size) + 1px) solid transparent;
3401
- border-block-start-color: var(--_border-color);
3402
- transform: translateX(-50%);
3403
- }
3404
- .popover--bottom::after {
3405
- content: "";
3406
- position: absolute;
3407
- inset-block-end: 100%;
3408
- inset-inline-start: 50%;
3409
- border: var(--_arrow-size) solid transparent;
3410
- border-block-end-color: var(--_bg);
3411
- transform: translateX(-50%);
3412
- }
3413
- .popover--bottom::before {
3414
- content: "";
3415
- position: absolute;
3416
- inset-block-end: 100%;
3417
- inset-inline-start: 50%;
3418
- border: calc(var(--_arrow-size) + 1px) solid transparent;
3419
- border-block-end-color: var(--_border-color);
3420
- transform: translateX(-50%);
3421
- }
3422
- .popover--visible {
3423
- opacity: 1;
3424
- }
3425
- .popover--hidden {
3426
- opacity: 0;
3427
- pointer-events: none;
3428
- }
3429
- .popover--animate {
3430
- transition: opacity var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
3431
- }
3432
- }
3433
- @layer components.tokens {
3434
- .tooltip {
3435
- --_bg: var(--ui-tooltip-bg, var(--ui-color-text, #1a1a1a));
3436
- --_color: var(--ui-tooltip-color, var(--ui-color-bg, white));
3437
- --_radius: var(--ui-tooltip-radius, var(--ui-radius-sm, calc(0.5rem / 2)));
3438
- --_padding-x: var(--ui-tooltip-padding-x, calc(0.5rem * 1));
3439
- --_padding-y: var(--ui-tooltip-padding-y, calc(0.5rem / 2));
3440
- --_size: var(--ui-tooltip-size, var(--ui-font-size-sm, 0.875rem));
3441
- --_z: var(--ui-tooltip-z, var(--ui-z-tooltip, 500));
3442
- --_arrow-size: var(--ui-tooltip-arrow-size, calc(0.5rem / 2));
3443
- }
3444
- }
3445
- @layer components.styles {
3446
- .tooltip {
3447
- position: absolute;
3448
- z-index: var(--_z);
3449
- max-inline-size: calc(0.5rem * 25);
3450
- padding: var(--_padding-y) var(--_padding-x);
3451
- font-size: var(--_size);
3452
- line-height: calc(0.5rem * 2);
3453
- text-align: center;
3454
- white-space: nowrap;
3455
- color: var(--_color);
3456
- background: var(--_bg);
3457
- border-radius: var(--_radius);
3458
- }
3459
- .tooltip--top::after {
3460
- content: "";
3461
- position: absolute;
3462
- inset-block-start: 100%;
3463
- inset-inline-start: 50%;
3464
- border: var(--_arrow-size) solid transparent;
3465
- border-block-start-color: var(--_bg);
3466
- transform: translateX(-50%);
3467
- }
3468
- .tooltip--bottom::after {
3469
- content: "";
3470
- position: absolute;
3471
- inset-block-end: 100%;
3472
- inset-inline-start: 50%;
3473
- border: var(--_arrow-size) solid transparent;
3474
- border-block-end-color: var(--_bg);
3475
- transform: translateX(-50%);
3476
- }
3477
- .tooltip--start::after {
3478
- content: "";
3479
- position: absolute;
3480
- inset-block-start: 50%;
3481
- inset-inline-start: 100%;
3482
- border: var(--_arrow-size) solid transparent;
3483
- border-inline-start-color: var(--_bg);
3484
- transform: translateY(-50%);
3485
- }
3486
- .tooltip--end::after {
3487
- content: "";
3488
- position: absolute;
3489
- inset-block-start: 50%;
3490
- inset-inline-end: 100%;
3491
- border: var(--_arrow-size) solid transparent;
3492
- border-inline-end-color: var(--_bg);
3493
- transform: translateY(-50%);
3494
- }
3495
- .tooltip--visible {
3496
- opacity: 1;
3497
- }
3498
- .tooltip--hidden {
3499
- opacity: 0;
3500
- pointer-events: none;
3501
- }
3502
- .tooltip--animate {
3503
- transition: opacity var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
3504
- }
3505
- }
3506
- @layer components.tokens {
3507
- .code {
3508
- --_font-size: var(--ui-code-font-size, var(--ui-font-size-sm, 0.875rem));
3509
- --_bg: var(--ui-code-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
3510
- --_padding-x: var(--ui-code-padding-x, var(--ui-space-1, 0.5rem));
3511
- --_padding-y: var(--ui-code-padding-y, var(--ui-space-0, 0.25rem));
3512
- --_radius: var(--ui-code-radius, var(--ui-radius-sm, 0.25rem));
3513
- }
3514
- .code--sm {
3515
- --_font-size: var(--ui-font-size-xs, 0.75rem);
3516
- }
3517
- .code-block {
3518
- --_font-size: var(--ui-code-font-size-block, var(--ui-font-size-sm, 0.875rem));
3519
- --_bg: var(--ui-code-bg-block, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
3520
- --_padding: var(--ui-code-padding-block, var(--ui-space-3, 1.5rem));
3521
- --_radius: var(--ui-code-radius-block, var(--ui-radius-md, 0.5rem));
3522
- --_border-color: var(--ui-code-border-color-block, var(--ui-color-border, hsl(220, 10%, 90%)));
3523
- }
3524
- }
3525
- @layer components.styles {
3526
- .code {
3527
- padding: var(--_padding-y) var(--_padding-x);
3528
- font-family: var(--ui-font-mono, Noto Sans Mono, ui-monospace, Cascadia Code, monospace);
3529
- font-size: var(--_font-size);
3530
- line-height: var(--ui-leading-tight-sm, 1rem);
3531
- background: var(--_bg);
3532
- border-radius: var(--_radius);
3533
- }
3534
- .code-block {
3535
- display: block;
3536
- padding: calc(var(--_padding) - var(--ui-border-width-sm, 0.0625rem));
3537
- overflow-x: auto;
3538
- font-family: var(--ui-font-mono, Noto Sans Mono, ui-monospace, Cascadia Code, monospace);
3539
- font-size: var(--_font-size);
3540
- line-height: var(--ui-leading-tight-sm, 1rem);
3541
- white-space: pre;
3542
- background: var(--_bg);
3543
- border: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
3544
- border-radius: var(--_radius);
3545
- }
3546
- .code-block code {
3547
- padding: 0;
3548
- font-size: inherit;
3549
- background: none;
3550
- }
3551
- }
3552
- @layer components.tokens {
3553
- .heading {
3554
- --_font-size: var(--ui-heading-font-size, var(--ui-font-size-xl, 1.5rem));
3555
- --_line-height: var(--ui-heading-line-height, var(--ui-leading-xl, 2rem));
3556
- --_weight: var(--ui-heading-weight, var(--ui-weight-bold, 700));
3557
- --_color: var(--ui-heading-color, var(--ui-color-text, hsl(220, 10%, 10%)));
3558
- }
3559
- .heading--4xl {
3560
- --_font-size: var(--ui-heading-font-size-4xl, var(--ui-font-size-4xl, 2.5rem));
3561
- --_line-height: var(--ui-heading-line-height-4xl, var(--ui-leading-4xl, 3rem));
3562
- }
3563
- .heading--3xl {
3564
- --_font-size: var(--ui-heading-font-size-3xl, var(--ui-font-size-3xl, 2rem));
3565
- --_line-height: var(--ui-heading-line-height-3xl, var(--ui-leading-3xl, 2.5rem));
3566
- }
3567
- .heading--2xl {
3568
- --_font-size: var(--ui-heading-font-size-2xl, var(--ui-font-size-2xl, 1.75rem));
3569
- --_line-height: var(--ui-heading-line-height-2xl, var(--ui-leading-2xl, 2rem));
3570
- }
3571
- .heading--xl {
3572
- --_font-size: var(--ui-heading-font-size-xl, var(--ui-font-size-xl, 1.5rem));
3573
- --_line-height: var(--ui-heading-line-height-xl, var(--ui-leading-xl, 2rem));
3574
- }
3575
- .heading--lg {
3576
- --_font-size: var(--ui-heading-font-size-lg, var(--ui-font-size-lg, 1.25rem));
3577
- --_line-height: var(--ui-heading-line-height-lg, var(--ui-leading-lg, 2rem));
3578
- }
3579
- .heading--md {
3580
- --_font-size: var(--ui-heading-font-size-md, var(--ui-font-size-md, 1rem));
3581
- --_line-height: var(--ui-heading-line-height-md, var(--ui-leading-tight-md, 1.5rem));
3582
- }
3583
- .heading--sm {
3584
- --_font-size: var(--ui-heading-font-size-sm, var(--ui-font-size-sm, 0.875rem));
3585
- --_line-height: var(--ui-heading-line-height-sm, var(--ui-leading-tight-sm, 1rem));
3586
- }
3587
- }
3588
- @layer components.styles {
3589
- .heading {
3590
- margin: 0;
3591
- font-size: var(--_font-size);
3592
- font-weight: var(--_weight);
3593
- line-height: var(--_line-height);
3594
- color: var(--_color);
3595
- }
3596
- }
3597
- @layer components.tokens {
3598
- .link {
3599
- --_color: var(--ui-link-color, var(--ui-color-primary));
3600
- --_color-hover: var(--ui-link-color-hover, var(--ui-color-primary-hover, color-mix(in srgb, var(--_color) 85%, black)));
3601
- --_color-visited: var(--ui-link-color-visited, var(--_color));
3602
- --_decoration: var(--ui-link-decoration, underline);
3603
- --_decoration-hover: var(--ui-link-decoration-hover, underline);
3604
- }
3605
- .link--muted {
3606
- --_color: var(--ui-link-color-muted, var(--ui-color-text-muted));
3607
- --_color-hover: var(--ui-link-color-muted-hover, var(--ui-color-text));
3608
- }
3609
- .link--subtle {
3610
- --_decoration: none;
3611
- --_decoration-hover: underline;
3612
- }
3613
- }
3614
- @layer components.styles {
3615
- .link {
3616
- text-decoration: var(--_decoration);
3617
- color: var(--_color);
3618
- cursor: pointer;
3619
- transition: color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
3620
- text-underline-offset: calc(0.5rem / 4);
3621
- }
3622
- .link:hover {
3623
- text-decoration: var(--_decoration-hover);
3624
- color: var(--_color-hover);
3625
- }
3626
- .link:focus-visible {
3627
- border-radius: calc(0.5rem / 4);
3628
- outline: 2px solid var(--ui-color-focus, var(--ui-color-primary));
3629
- outline-offset: calc(0.5rem / 4);
3630
- }
3631
- .link:visited {
3632
- color: var(--_color-visited);
3633
- }
3634
- .link--disabled,
3635
- .link[aria-disabled=true] {
3636
- color: var(--ui-color-text-muted);
3637
- opacity: 0.6;
3638
- cursor: not-allowed;
3639
- pointer-events: none;
3640
- }
3641
- .link--external::after {
3642
- content: "↗";
3643
- display: inline-block;
3644
- margin-inline-start: calc(0.5rem / 4);
3645
- font-size: 0.75em;
3646
- }
3647
- }
3648
- /* 05. Utilities (high specificity, load last) */
3649
- /* Spacing utilities - all values align to 8px grid */
3650
- /* Uses logical properties for international/RTL support */
3651
- @layer utilities {
3652
- /* Margin utilities */
3653
- .m-0 {
3654
- margin: 0;
3655
- }
3656
- .m-1 {
3657
- margin: var(--ui-space-1);
3658
- }
3659
- .m-2 {
3660
- margin: var(--ui-space-2);
3661
- }
3662
- .m-3 {
3663
- margin: var(--ui-space-3);
3664
- }
3665
- .m-4 {
3666
- margin: var(--ui-space-4);
3667
- }
3668
- .m-6 {
3669
- margin: var(--ui-space-6);
3670
- }
3671
- .m-8 {
3672
- margin: var(--ui-space-8);
3673
- }
3674
- .mt-0 {
3675
- margin-block-start: 0;
3676
- }
3677
- .mt-1 {
3678
- margin-block-start: var(--ui-space-1);
3679
- }
3680
- .mt-2 {
3681
- margin-block-start: var(--ui-space-2);
3682
- }
3683
- .mt-3 {
3684
- margin-block-start: var(--ui-space-3);
3685
- }
3686
- .mt-4 {
3687
- margin-block-start: var(--ui-space-4);
3688
- }
3689
- .mt-6 {
3690
- margin-block-start: var(--ui-space-6);
3691
- }
3692
- .mt-8 {
3693
- margin-block-start: var(--ui-space-8);
3694
- }
3695
- .me-0 {
3696
- margin-inline-end: 0;
3697
- }
3698
- .me-1 {
3699
- margin-inline-end: var(--ui-space-1);
3700
- }
3701
- .me-2 {
3702
- margin-inline-end: var(--ui-space-2);
3703
- }
3704
- .me-3 {
3705
- margin-inline-end: var(--ui-space-3);
3706
- }
3707
- .me-4 {
3708
- margin-inline-end: var(--ui-space-4);
3709
- }
3710
- .me-6 {
3711
- margin-inline-end: var(--ui-space-6);
3712
- }
3713
- .me-8 {
3714
- margin-inline-end: var(--ui-space-8);
3715
- }
3716
- .mb-0 {
3717
- margin-block-end: 0;
3718
- }
3719
- .mb-1 {
3720
- margin-block-end: var(--ui-space-1);
3721
- }
3722
- .mb-2 {
3723
- margin-block-end: var(--ui-space-2);
3724
- }
3725
- .mb-3 {
3726
- margin-block-end: var(--ui-space-3);
3727
- }
3728
- .mb-4 {
3729
- margin-block-end: var(--ui-space-4);
3730
- }
3731
- .mb-6 {
3732
- margin-block-end: var(--ui-space-6);
3733
- }
3734
- .mb-8 {
3735
- margin-block-end: var(--ui-space-8);
3736
- }
3737
- .ms-0 {
3738
- margin-inline-start: 0;
3739
- }
3740
- .ms-1 {
3741
- margin-inline-start: var(--ui-space-1);
3742
- }
3743
- .ms-2 {
3744
- margin-inline-start: var(--ui-space-2);
3745
- }
3746
- .ms-3 {
3747
- margin-inline-start: var(--ui-space-3);
3748
- }
3749
- .ms-4 {
3750
- margin-inline-start: var(--ui-space-4);
3751
- }
3752
- .ms-6 {
3753
- margin-inline-start: var(--ui-space-6);
3754
- }
3755
- .ms-8 {
3756
- margin-inline-start: var(--ui-space-8);
3757
- }
3758
- .mx-0 {
3759
- margin-inline: 0;
3760
- }
3761
- .mx-1 {
3762
- margin-inline: var(--ui-space-1);
3763
- }
3764
- .mx-2 {
3765
- margin-inline: var(--ui-space-2);
3766
- }
3767
- .mx-3 {
3768
- margin-inline: var(--ui-space-3);
3769
- }
3770
- .mx-4 {
3771
- margin-inline: var(--ui-space-4);
3772
- }
3773
- .mx-auto {
3774
- margin-inline: auto;
3775
- }
3776
- .my-0 {
3777
- margin-block: 0;
3778
- }
3779
- .my-1 {
3780
- margin-block: var(--ui-space-1);
3781
- }
3782
- .my-2 {
3783
- margin-block: var(--ui-space-2);
3784
- }
3785
- .my-3 {
3786
- margin-block: var(--ui-space-3);
3787
- }
3788
- .my-4 {
3789
- margin-block: var(--ui-space-4);
3790
- }
3791
- /* Padding utilities */
3792
- .p-0 {
3793
- padding: 0;
3794
- }
3795
- .p-1 {
3796
- padding: var(--ui-space-1);
3797
- }
3798
- .p-2 {
3799
- padding: var(--ui-space-2);
3800
- }
3801
- .p-3 {
3802
- padding: var(--ui-space-3);
3803
- }
3804
- .p-4 {
3805
- padding: var(--ui-space-4);
3806
- }
3807
- .p-6 {
3808
- padding: var(--ui-space-6);
3809
- }
3810
- .p-8 {
3811
- padding: var(--ui-space-8);
3812
- }
3813
- .pt-0 {
3814
- padding-block-start: 0;
3815
- }
3816
- .pt-1 {
3817
- padding-block-start: var(--ui-space-1);
3818
- }
3819
- .pt-2 {
3820
- padding-block-start: var(--ui-space-2);
3821
- }
3822
- .pt-3 {
3823
- padding-block-start: var(--ui-space-3);
3824
- }
3825
- .pt-4 {
3826
- padding-block-start: var(--ui-space-4);
3827
- }
3828
- .pt-6 {
3829
- padding-block-start: var(--ui-space-6);
3830
- }
3831
- .pt-8 {
3832
- padding-block-start: var(--ui-space-8);
3833
- }
3834
- .pe-0 {
3835
- padding-inline-end: 0;
3836
- }
3837
- .pe-1 {
3838
- padding-inline-end: var(--ui-space-1);
3839
- }
3840
- .pe-2 {
3841
- padding-inline-end: var(--ui-space-2);
3842
- }
3843
- .pe-3 {
3844
- padding-inline-end: var(--ui-space-3);
3845
- }
3846
- .pe-4 {
3847
- padding-inline-end: var(--ui-space-4);
3848
- }
3849
- .pe-6 {
3850
- padding-inline-end: var(--ui-space-6);
3851
- }
3852
- .pe-8 {
3853
- padding-inline-end: var(--ui-space-8);
3854
- }
3855
- .pb-0 {
3856
- padding-block-end: 0;
3857
- }
3858
- .pb-1 {
3859
- padding-block-end: var(--ui-space-1);
3860
- }
3861
- .pb-2 {
3862
- padding-block-end: var(--ui-space-2);
3863
- }
3864
- .pb-3 {
3865
- padding-block-end: var(--ui-space-3);
3866
- }
3867
- .pb-4 {
3868
- padding-block-end: var(--ui-space-4);
3869
- }
3870
- .pb-6 {
3871
- padding-block-end: var(--ui-space-6);
3872
- }
3873
- .pb-8 {
3874
- padding-block-end: var(--ui-space-8);
3875
- }
3876
- .ps-0 {
3877
- padding-inline-start: 0;
3878
- }
3879
- .ps-1 {
3880
- padding-inline-start: var(--ui-space-1);
3881
- }
3882
- .ps-2 {
3883
- padding-inline-start: var(--ui-space-2);
3884
- }
3885
- .ps-3 {
3886
- padding-inline-start: var(--ui-space-3);
3887
- }
3888
- .ps-4 {
3889
- padding-inline-start: var(--ui-space-4);
3890
- }
3891
- .ps-6 {
3892
- padding-inline-start: var(--ui-space-6);
3893
- }
3894
- .ps-8 {
3895
- padding-inline-start: var(--ui-space-8);
3896
- }
3897
- .px-0 {
3898
- padding-inline: 0;
3899
- }
3900
- .px-1 {
3901
- padding-inline: var(--ui-space-1);
3902
- }
3903
- .px-2 {
3904
- padding-inline: var(--ui-space-2);
3905
- }
3906
- .px-3 {
3907
- padding-inline: var(--ui-space-3);
3908
- }
3909
- .px-4 {
3910
- padding-inline: var(--ui-space-4);
3911
- }
3912
- .py-0 {
3913
- padding-block: 0;
3914
- }
3915
- .py-1 {
3916
- padding-block: var(--ui-space-1);
3917
- }
3918
- .py-2 {
3919
- padding-block: var(--ui-space-2);
3920
- }
3921
- .py-3 {
3922
- padding-block: var(--ui-space-3);
3923
- }
3924
- .py-4 {
3925
- padding-block: var(--ui-space-4);
3926
- }
3927
- /* Gap utilities (for flex/grid) */
3928
- .gap-0 {
3929
- gap: 0;
3930
- }
3931
- .gap-1 {
3932
- gap: var(--ui-space-1);
3933
- }
3934
- .gap-2 {
3935
- gap: var(--ui-space-2);
3936
- }
3937
- .gap-3 {
3938
- gap: var(--ui-space-3);
3939
- }
3940
- .gap-4 {
3941
- gap: var(--ui-space-4);
3942
- }
3943
- .gap-6 {
3944
- gap: var(--ui-space-6);
3945
- }
3946
- .gap-8 {
3947
- gap: var(--ui-space-8);
3948
- }
3949
- }
3950
- /* Display and visibility utilities */
3951
- /* Uses logical properties for international/RTL support */
3952
- @layer utilities {
3953
- /* Display */
3954
- .block {
3955
- display: block;
3956
- }
3957
- .inline-block {
3958
- display: inline-block;
3959
- }
3960
- .inline {
3961
- display: inline;
3962
- }
3963
- .flex {
3964
- display: flex;
3965
- }
3966
- .inline-flex {
3967
- display: inline-flex;
3968
- }
3969
- .grid {
3970
- display: grid;
3971
- }
3972
- .inline-grid {
3973
- display: inline-grid;
3974
- }
3975
- .hidden {
3976
- display: none;
3977
- }
3978
- /* Flexbox direction */
3979
- .flex-row {
3980
- flex-direction: row;
3981
- }
3982
- .flex-row-reverse {
3983
- flex-direction: row-reverse;
3984
- }
3985
- .flex-col {
3986
- flex-direction: column;
3987
- }
3988
- .flex-col-reverse {
3989
- flex-direction: column-reverse;
3990
- }
3991
- /* Flexbox wrap */
3992
- .flex-wrap {
3993
- flex-wrap: wrap;
3994
- }
3995
- .flex-nowrap {
3996
- flex-wrap: nowrap;
3997
- }
3998
- .flex-wrap-reverse {
3999
- flex-wrap: wrap-reverse;
4000
- }
4001
- /* Flexbox grow/shrink */
4002
- .flex-1 {
4003
- flex: 1 1 0%;
4004
- }
4005
- .flex-auto {
4006
- flex: 1 1 auto;
4007
- }
4008
- .flex-initial {
4009
- flex: 0 1 auto;
4010
- }
4011
- .flex-none {
4012
- flex: none;
4013
- }
4014
- .grow {
4015
- flex-grow: 1;
4016
- }
4017
- .grow-0 {
4018
- flex-grow: 0;
4019
- }
4020
- .shrink {
4021
- flex-shrink: 1;
4022
- }
4023
- .shrink-0 {
4024
- flex-shrink: 0;
4025
- }
4026
- /* Justify content */
4027
- .justify-start {
4028
- justify-content: flex-start;
4029
- }
4030
- .justify-end {
4031
- justify-content: flex-end;
4032
- }
4033
- .justify-center {
4034
- justify-content: center;
4035
- }
4036
- .justify-between {
4037
- justify-content: space-between;
4038
- }
4039
- .justify-around {
4040
- justify-content: space-around;
4041
- }
4042
- .justify-evenly {
4043
- justify-content: space-evenly;
4044
- }
4045
- /* Align items */
4046
- .items-start {
4047
- align-items: flex-start;
4048
- }
4049
- .items-end {
4050
- align-items: flex-end;
4051
- }
4052
- .items-center {
4053
- align-items: center;
4054
- }
4055
- .items-baseline {
4056
- align-items: baseline;
4057
- }
4058
- .items-stretch {
4059
- align-items: stretch;
4060
- }
4061
- /* Align self */
4062
- .self-auto {
4063
- align-self: auto;
4064
- }
4065
- .self-start {
4066
- align-self: flex-start;
4067
- }
4068
- .self-end {
4069
- align-self: flex-end;
4070
- }
4071
- .self-center {
4072
- align-self: center;
4073
- }
4074
- .self-stretch {
4075
- align-self: stretch;
4076
- }
4077
- /* Visibility */
4078
- .visible {
4079
- visibility: visible;
4080
- }
4081
- .invisible {
4082
- visibility: hidden;
4083
- }
4084
- /* Screen reader only - visually hidden but accessible */
4085
- .sr-only {
4086
- position: absolute;
4087
- /* stylelint-disable-next-line unit-disallowed-list -- intentional 1px for a11y */
4088
- block-size: 1px;
4089
- /* stylelint-disable-next-line unit-disallowed-list -- intentional 1px for a11y */
4090
- inline-size: 1px;
4091
- padding: 0;
4092
- /* stylelint-disable-next-line unit-disallowed-list -- intentional -1px for a11y */
4093
- margin: -1px;
4094
- overflow: hidden;
4095
- white-space: nowrap;
4096
- border-width: 0;
4097
- clip-path: inset(50%);
4098
- }
4099
- }
4100
- @layer utilities {
4101
- .text-start {
4102
- text-align: start;
4103
- }
4104
- .text-center {
4105
- text-align: center;
4106
- }
4107
- .text-end {
4108
- text-align: end;
4109
- }
4110
- .text-justify {
4111
- text-align: justify;
4112
- }
4113
- .font-normal {
4114
- font-weight: var(--ui-weight-normal);
4115
- }
4116
- .font-medium {
4117
- font-weight: var(--ui-weight-medium);
4118
- }
4119
- .font-semibold {
4120
- font-weight: var(--ui-weight-semibold);
4121
- }
4122
- .font-bold {
4123
- font-weight: var(--ui-weight-bold);
4124
- }
4125
- .text-xs {
4126
- font-size: var(--ui-font-size-xs);
4127
- line-height: var(--ui-leading-xs);
4128
- }
4129
- .text-sm {
4130
- font-size: var(--ui-font-size-sm);
4131
- line-height: var(--ui-leading-sm);
4132
- }
4133
- .text-md {
4134
- font-size: var(--ui-font-size-md);
4135
- line-height: var(--ui-leading-md);
4136
- }
4137
- .text-lg {
4138
- font-size: var(--ui-font-size-lg);
4139
- line-height: var(--ui-leading-lg);
4140
- }
4141
- .text-xl {
4142
- font-size: var(--ui-font-size-xl);
4143
- line-height: var(--ui-leading-xl);
4144
- }
4145
- .text-2xl {
4146
- font-size: var(--ui-font-size-2xl);
4147
- line-height: var(--ui-leading-2xl);
4148
- }
4149
- .text-3xl {
4150
- font-size: var(--ui-font-size-3xl);
4151
- line-height: var(--ui-leading-3xl);
4152
- }
4153
- .text-4xl {
4154
- font-size: var(--ui-font-size-4xl);
4155
- line-height: var(--ui-leading-4xl);
4156
- }
4157
- .text-lead {
4158
- font-size: var(--ui-lead-size);
4159
- font-weight: var(--ui-lead-weight);
4160
- line-height: var(--ui-lead-line-height);
4161
- letter-spacing: var(--ui-lead-tracking);
4162
- }
4163
- .text-eyebrow {
4164
- font-size: var(--ui-eyebrow-size);
4165
- font-weight: var(--ui-eyebrow-weight);
4166
- line-height: var(--ui-eyebrow-line-height);
4167
- letter-spacing: var(--ui-eyebrow-tracking);
4168
- text-transform: uppercase;
4169
- }
4170
- .text-caption {
4171
- font-size: var(--ui-caption-size);
4172
- font-weight: var(--ui-caption-weight);
4173
- line-height: var(--ui-caption-line-height);
4174
- letter-spacing: var(--ui-caption-tracking);
4175
- }
4176
- .text-body-sm {
4177
- font-size: var(--ui-body-sm-size);
4178
- font-weight: var(--ui-body-sm-weight);
4179
- line-height: var(--ui-body-sm-line-height);
4180
- letter-spacing: var(--ui-body-sm-tracking);
4181
- }
4182
- .font-sans {
4183
- font-family: var(--ui-font-sans);
4184
- }
4185
- .font-mono {
4186
- font-family: var(--ui-font-mono);
4187
- }
4188
- .underline {
4189
- text-decoration: underline;
4190
- }
4191
- .line-through {
4192
- text-decoration: line-through;
4193
- }
4194
- .no-underline {
4195
- text-decoration: none;
4196
- }
4197
- .uppercase {
4198
- text-transform: uppercase;
4199
- }
4200
- .lowercase {
4201
- text-transform: lowercase;
4202
- }
4203
- .capitalize {
4204
- text-transform: capitalize;
4205
- }
4206
- .normal-case {
4207
- text-transform: none;
4208
- }
4209
- .text-primary {
4210
- color: var(--ui-color-primary);
4211
- }
4212
- .text-muted {
4213
- color: var(--ui-color-text-muted);
4214
- }
4215
- .text-success {
4216
- color: var(--ui-color-success);
4217
- }
4218
- .text-warning {
4219
- color: var(--ui-color-warning);
4220
- }
4221
- .text-danger {
4222
- color: var(--ui-color-danger);
4223
- }
4224
- .truncate {
4225
- overflow: hidden;
4226
- text-overflow: ellipsis;
4227
- white-space: nowrap;
4228
- }
4229
- .whitespace-normal {
4230
- white-space: normal;
4231
- }
4232
- .whitespace-nowrap {
4233
- white-space: nowrap;
4234
- }
4235
- .whitespace-pre {
4236
- white-space: pre;
4237
- }
4238
- .whitespace-pre-wrap {
4239
- white-space: pre-wrap;
4240
- }
4241
- .prose {
4242
- max-inline-size: 65ch;
4243
- }
4244
- .prose-sm {
4245
- max-inline-size: 45ch;
4246
- }
4247
- .prose-lg {
4248
- max-inline-size: 75ch;
4249
- }
4250
- .tracking-display {
4251
- letter-spacing: var(--ui-tracking-display);
4252
- }
4253
- .tracking-body {
4254
- letter-spacing: var(--ui-tracking-body);
4255
- }
4256
- .tracking-caps {
4257
- letter-spacing: var(--ui-tracking-caps);
4258
- }
4259
- }
4260
- @layer utilities {
4261
- .border {
4262
- border: var(--ui-border-width-sm) solid var(--ui-color-border);
4263
- }
4264
- .border-0 {
4265
- border: none;
4266
- }
4267
- .rounded {
4268
- border-radius: var(--ui-radius-md);
4269
- }
4270
- .rounded-none {
4271
- border-radius: 0;
4272
- }
4273
- .rounded-sm {
4274
- border-radius: var(--ui-radius-sm);
4275
- }
4276
- .rounded-lg {
4277
- border-radius: var(--ui-radius-lg);
4278
- }
4279
- .rounded-full {
4280
- border-radius: var(--ui-radius-full);
4281
- }
4282
- .bg {
4283
- background: var(--ui-color-bg);
4284
- }
4285
- .bg-subtle {
4286
- background: var(--ui-color-bg-subtle);
4287
- }
4288
- .bg-muted {
4289
- background: var(--ui-color-bg-muted);
4290
- }
4291
- .bg-transparent {
4292
- background: transparent;
4293
- }
4294
- }
4295
- @layer utilities {
4296
- .visually-hidden {
4297
- position: absolute;
4298
- block-size: calc(0.5rem / 8);
4299
- inline-size: calc(0.5rem / 8);
4300
- padding: 0;
4301
- margin: calc(0.5rem / -8);
4302
- overflow: hidden;
4303
- white-space: nowrap;
4304
- border: 0;
4305
- clip: rect(0 0 0 0);
4306
- clip-path: inset(50%);
4307
- }
4308
- .visually-hidden--focusable:focus,
4309
- .visually-hidden--focusable:active {
4310
- position: static;
4311
- block-size: auto;
4312
- inline-size: auto;
4313
- margin: 0;
4314
- overflow: visible;
4315
- white-space: normal;
4316
- clip: auto;
4317
- clip-path: none;
4318
- }
4319
- }
4320
- @view-transition {
4321
- navigation: auto;
4322
- }
4323
- @layer utilities {
4324
- @keyframes vt-fade-in {
4325
- from {
4326
- opacity: 0;
4327
- }
4328
- }
4329
- @keyframes vt-fade-out {
4330
- to {
4331
- opacity: 0;
4332
- }
4333
- }
4334
- @keyframes vt-slide-in-up {
4335
- from {
4336
- opacity: 0;
4337
- transform: translateY(1.25rem);
4338
- }
4339
- }
4340
- @keyframes vt-slide-out-up {
4341
- to {
4342
- opacity: 0;
4343
- transform: translateY(-1.25rem);
4344
- }
4345
- }
4346
- @keyframes vt-slide-in-down {
4347
- from {
4348
- opacity: 0;
4349
- transform: translateY(-1.25rem);
4350
- }
4351
- }
4352
- @keyframes vt-slide-out-down {
4353
- to {
4354
- opacity: 0;
4355
- transform: translateY(1.25rem);
4356
- }
4357
- }
4358
- @keyframes vt-slide-in-start {
4359
- from {
4360
- opacity: 0;
4361
- transform: translateX(-1.25rem);
4362
- }
4363
- }
4364
- @keyframes vt-slide-out-start {
4365
- to {
4366
- opacity: 0;
4367
- transform: translateX(-1.25rem);
4368
- }
4369
- }
4370
- @keyframes vt-slide-in-end {
4371
- from {
4372
- opacity: 0;
4373
- transform: translateX(1.25rem);
4374
- }
4375
- }
4376
- @keyframes vt-slide-out-end {
4377
- to {
4378
- opacity: 0;
4379
- transform: translateX(1.25rem);
4380
- }
4381
- }
4382
- @keyframes vt-scale-in {
4383
- from {
4384
- opacity: 0;
4385
- transform: scale(0.95);
4386
- }
4387
- }
4388
- @keyframes vt-scale-out {
4389
- to {
4390
- opacity: 0;
4391
- transform: scale(1.05);
4392
- }
4393
- }
4394
- .transition-name-sidebar {
4395
- view-transition-name: sidebar;
4396
- }
4397
- .transition-name-main {
4398
- view-transition-name: main;
4399
- }
4400
- .transition-name-header {
4401
- view-transition-name: header;
4402
- }
4403
- .transition-name-hero {
4404
- view-transition-name: hero;
4405
- }
4406
- .transition-name-card {
4407
- view-transition-name: card;
4408
- }
4409
- .transition-name-modal {
4410
- view-transition-name: modal;
4411
- }
4412
- .transition-name-slide-up {
4413
- view-transition-name: slide-up;
4414
- }
4415
- .transition-name-slide-down {
4416
- view-transition-name: slide-down;
4417
- }
4418
- .transition-name-slide-start {
4419
- view-transition-name: slide-start;
4420
- }
4421
- .transition-name-slide-end {
4422
- view-transition-name: slide-end;
4423
- }
4424
- .transition-name-scale {
4425
- view-transition-name: scale;
4426
- }
4427
- .transition-name-fade {
4428
- view-transition-name: fade;
4429
- }
4430
- .transition-name-none {
4431
- view-transition-name: none;
4432
- }
4433
- ::view-transition-old(sidebar),
4434
- ::view-transition-new(sidebar),
4435
- ::view-transition-old(header),
4436
- ::view-transition-new(header) {
4437
- animation: none;
4438
- }
4439
- ::view-transition-old(root),
4440
- ::view-transition-new(root) {
4441
- animation-duration: var(--ui-duration-base);
4442
- animation-timing-function: var(--ui-ease-default);
4443
- }
4444
- ::view-transition-old(fade) {
4445
- animation: vt-fade-out var(--ui-duration-base) var(--ui-ease-out);
4446
- }
4447
- ::view-transition-new(fade) {
4448
- animation: vt-fade-in var(--ui-duration-base) var(--ui-ease-out);
4449
- }
4450
- ::view-transition-old(slide-up),
4451
- ::view-transition-old(main) {
4452
- animation: vt-slide-out-up var(--ui-duration-base) var(--ui-ease-out);
4453
- }
4454
- ::view-transition-new(slide-up),
4455
- ::view-transition-new(main) {
4456
- animation: vt-slide-in-up var(--ui-duration-base) var(--ui-ease-out);
4457
- }
4458
- ::view-transition-old(slide-down) {
4459
- animation: vt-slide-out-down var(--ui-duration-base) var(--ui-ease-out);
4460
- }
4461
- ::view-transition-new(slide-down) {
4462
- animation: vt-slide-in-down var(--ui-duration-base) var(--ui-ease-out);
4463
- }
4464
- ::view-transition-old(slide-start) {
4465
- animation: vt-slide-out-start var(--ui-duration-base) var(--ui-ease-out);
4466
- }
4467
- ::view-transition-new(slide-start) {
4468
- animation: vt-slide-in-start var(--ui-duration-base) var(--ui-ease-out);
4469
- }
4470
- ::view-transition-old(slide-end) {
4471
- animation: vt-slide-out-end var(--ui-duration-base) var(--ui-ease-out);
4472
- }
4473
- ::view-transition-new(slide-end) {
4474
- animation: vt-slide-in-end var(--ui-duration-base) var(--ui-ease-out);
4475
- }
4476
- ::view-transition-old(scale),
4477
- ::view-transition-old(modal),
4478
- ::view-transition-old(card) {
4479
- animation: vt-scale-out var(--ui-duration-base) var(--ui-ease-out);
4480
- }
4481
- ::view-transition-new(scale),
4482
- ::view-transition-new(modal),
4483
- ::view-transition-new(card) {
4484
- animation: vt-scale-in var(--ui-duration-base) var(--ui-ease-out);
4485
- }
4486
- ::view-transition-group(hero) {
4487
- animation-duration: var(--ui-duration-slow);
4488
- animation-timing-function: var(--ui-ease-in-out);
4489
- }
4490
- @media (prefers-reduced-motion: reduce) {
4491
- ::view-transition-old(*),
4492
- ::view-transition-new(*),
4493
- ::view-transition-group(*) {
4494
- animation-duration: 0s !important;
4495
- }
4496
- }
4497
- }
4498
- /* 99. Debug tools (dev only) */
4499
- .debug-grid,
4500
- .debug-grid-rows,
4501
- .debug-baseline {
4502
- position: relative;
4503
- }
4504
-
4505
- .debug-grid {
4506
- --debug-color: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.15);
4507
- }
4508
-
4509
- .debug-grid::after {
4510
- content: "";
4511
- position: absolute;
4512
- inset-block-start: 0;
4513
- inset-inline-start: 0;
4514
- z-index: var(--ui-z-debug);
4515
- block-size: 100%;
4516
- inline-size: 100%;
4517
- min-block-size: 100vh;
4518
- background-image: linear-gradient(to right, var(--debug-color) 1px, transparent 1px), linear-gradient(to bottom, var(--debug-color) 1px, transparent 1px);
4519
- pointer-events: none;
4520
- background-size: var(--unit) var(--unit);
4521
- background-position: 0 0;
4522
- }
4523
-
4524
- .debug-grid-rows {
4525
- --debug-color: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.1);
4526
- --debug-color-strong: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.25);
4527
- }
4528
-
4529
- .debug-grid-rows::after {
4530
- content: "";
4531
- position: absolute;
4532
- inset-block-start: 0;
4533
- inset-inline-start: 0;
4534
- z-index: var(--ui-z-debug);
4535
- block-size: 100%;
4536
- inline-size: 100%;
4537
- min-block-size: 100vh;
4538
- background-image: linear-gradient(to right, var(--debug-color) 1px, transparent 1px), linear-gradient(to bottom, var(--debug-color) 1px, transparent 1px), linear-gradient(to bottom, var(--debug-color-strong) 1px, transparent 1px);
4539
- pointer-events: none;
4540
- background-size: var(--unit) var(--unit), var(--unit) var(--unit), var(--unit) var(--ui-row);
4541
- background-position: 0 0;
4542
- }
4543
-
4544
- .debug-baseline {
4545
- --debug-color: hsl(var(--ui-hue-danger, 0) 80% 50% / 0.2);
4546
- }
4547
-
4548
- .debug-baseline::after {
4549
- content: "";
4550
- position: absolute;
4551
- inset-block-start: 0;
4552
- inset-inline-start: 0;
4553
- z-index: var(--ui-z-debug);
4554
- block-size: 100%;
4555
- inline-size: 100%;
4556
- min-block-size: 100vh;
4557
- background-image: linear-gradient(to bottom, var(--debug-color) 1px, transparent 1px);
4558
- pointer-events: none;
4559
- background-size: 100% var(--unit);
4560
- }
4561
-
4562
- .debug-outline * {
4563
- outline: 1px solid hsla(0, 100%, 50%, 0.5);
4564
- }
1
+ @import"https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700&family=Noto+Sans+Mono:wght@400;500&display=swap";@layer reset, tokens, base, primitives, components.styles, components.tokens, utilities, themes;:root{--ui-color-primary: oklch(55% 0.22 250);--ui-color-success: oklch(60% 0.18 145);--ui-color-warning: oklch(75% 0.18 70);--ui-color-danger: oklch(60% 0.22 25);--ui-color-neutral: oklch(50% 0.02 250);--ui-color-primary-light: color-mix(in oklch, var(--ui-color-primary) 50%, white);--ui-color-primary-dark: color-mix(in oklch, var(--ui-color-primary) 75%, black);--ui-color-primary-subtle: color-mix(in oklch, var(--ui-color-primary) 12%, white);--ui-color-primary-hover: color-mix(in oklch, var(--ui-color-primary) 85%, black);--ui-color-neutral-50: color-mix(in oklch, var(--ui-color-neutral) 3%, white);--ui-color-neutral-100: color-mix(in oklch, var(--ui-color-neutral) 6%, white);--ui-color-neutral-200: color-mix(in oklch, var(--ui-color-neutral) 12%, white);--ui-color-neutral-300: color-mix(in oklch, var(--ui-color-neutral) 25%, white);--ui-color-neutral-400: color-mix(in oklch, var(--ui-color-neutral) 50%, white);--ui-color-neutral-500: var(--ui-color-neutral);--ui-color-neutral-600: color-mix(in oklch, var(--ui-color-neutral) 85%, black);--ui-color-neutral-700: color-mix(in oklch, var(--ui-color-neutral) 70%, black);--ui-color-neutral-800: color-mix(in oklch, var(--ui-color-neutral) 50%, black);--ui-color-neutral-900: color-mix(in oklch, var(--ui-color-neutral) 35%, black)}:root{--ui-space-px: calc(var(--unit) * 0.125);--ui-space-quarter: calc(var(--unit) * 0.25);--ui-space-half: calc(var(--unit) * 0.5);--ui-space-0: calc(var(--unit) * 0.5);--ui-space-1: var(--unit);--ui-space-2: calc(var(--unit) * 2);--ui-space-3: calc(var(--unit) * 3);--ui-space-4: calc(var(--unit) * 4);--ui-space-6: calc(var(--unit) * 6);--ui-space-8: calc(var(--unit) * 8)}:root{--ui-font-sans: "Noto Sans", system-ui, -apple-system, sans-serif;--ui-font-mono: "Noto Sans Mono", ui-monospace, "Cascadia Code", monospace;--ui-font-size-xs: 0.75rem;--ui-font-size-sm: 0.875rem;--ui-font-size-md: 1rem;--ui-font-size-lg: 1.25rem;--ui-font-size-xl: 1.5rem;--ui-font-size-2xl: 1.75rem;--ui-font-size-3xl: 2rem;--ui-font-size-4xl: 2.5rem;--ui-leading-tight-xs: var(--ui-row-1);--ui-leading-tight-sm: var(--ui-row-1);--ui-leading-tight-md: calc(var(--unit) * 3);--ui-leading-tight-lg: calc(var(--unit) * 3);--ui-leading-xs: var(--ui-row-1);--ui-leading-sm: calc(var(--unit) * 3);--ui-leading-md: calc(var(--unit) * 3);--ui-leading-lg: var(--ui-row-2);--ui-leading-xl: var(--ui-row-2);--ui-leading-2xl: var(--ui-row-2);--ui-leading-3xl: calc(var(--unit) * 5);--ui-leading-4xl: calc(var(--unit) * 6);--ui-weight-normal: 400;--ui-weight-medium: 500;--ui-weight-semibold: 600;--ui-weight-bold: 700;--ui-tracking-display: -0.02em;--ui-tracking-body: 0;--ui-tracking-caps: 0.08em;--ui-heading-1-size: var(--ui-font-size-4xl);--ui-heading-1-line-height: var(--ui-leading-4xl);--ui-heading-1-weight: var(--ui-weight-bold);--ui-heading-1-tracking: var(--ui-tracking-display);--ui-heading-2-size: var(--ui-font-size-3xl);--ui-heading-2-line-height: var(--ui-leading-3xl);--ui-heading-2-weight: var(--ui-weight-bold);--ui-heading-2-tracking: -0.01em;--ui-heading-3-size: var(--ui-font-size-2xl);--ui-heading-3-line-height: var(--ui-leading-2xl);--ui-heading-3-weight: var(--ui-weight-semibold);--ui-heading-3-tracking: var(--ui-tracking-body);--ui-heading-4-size: var(--ui-font-size-xl);--ui-heading-4-line-height: var(--ui-leading-xl);--ui-heading-4-weight: var(--ui-weight-semibold);--ui-heading-4-tracking: var(--ui-tracking-body);--ui-heading-5-size: var(--ui-font-size-lg);--ui-heading-5-line-height: var(--ui-leading-sm);--ui-heading-5-weight: var(--ui-weight-medium);--ui-heading-5-tracking: var(--ui-tracking-body);--ui-body-size: var(--ui-font-size-md);--ui-body-line-height: var(--ui-leading-md);--ui-body-weight: var(--ui-weight-normal);--ui-body-tracking: var(--ui-tracking-body);--ui-body-sm-size: var(--ui-font-size-sm);--ui-body-sm-line-height: var(--ui-leading-sm);--ui-body-sm-weight: var(--ui-weight-normal);--ui-body-sm-tracking: var(--ui-tracking-body);--ui-caption-size: var(--ui-font-size-xs);--ui-caption-line-height: var(--ui-leading-xs);--ui-caption-weight: var(--ui-weight-normal);--ui-caption-tracking: 0.01em;--ui-lead-size: var(--ui-font-size-lg);--ui-lead-line-height: var(--ui-leading-lg);--ui-lead-weight: var(--ui-weight-normal);--ui-lead-tracking: var(--ui-tracking-body);--ui-eyebrow-size: var(--ui-font-size-xs);--ui-eyebrow-line-height: var(--ui-leading-xs);--ui-eyebrow-weight: var(--ui-weight-semibold);--ui-eyebrow-tracking: var(--ui-tracking-caps)}:root{--unit: 8px;--ui-row: calc(var(--unit) * 2);--ui-row-1: var(--ui-row);--ui-row-2: calc(var(--ui-row) * 2);--ui-row-3: calc(var(--ui-row) * 3);--ui-row-4: calc(var(--ui-row) * 4);--ui-row-5: calc(var(--ui-row) * 5);--ui-row-6: calc(var(--ui-row) * 6)}:root{--ui-radius-sm: calc(var(--unit) * 0.5);--ui-radius-md: var(--unit);--ui-radius-lg: calc(var(--unit) * 2);--ui-radius-full: 9999px}:root{--ui-border-width-sm: calc(var(--unit) * 0.125);--ui-border-width-md: calc(var(--unit) * 0.25);--ui-border-width-lg: calc(var(--unit) * 0.5)}:root{--shadow-sm: 0 1px 2px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.05);--shadow-md: 0 4px 6px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.1);--shadow-lg: 0 10px 15px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.15)}@layer tokens{:root{--ui-z-base: 0;--ui-z-sticky: 100;--ui-z-dropdown: 200;--ui-z-overlay: 300;--ui-z-modal: 400;--ui-z-popover: 500;--ui-z-tooltip: 600;--ui-z-toast: 700;--ui-z-debug: 9999}}@layer tokens{:root{--ui-duration-instant: 50ms;--ui-duration-fast: 100ms;--ui-duration-base: 150ms;--ui-duration-slow: 250ms;--ui-duration-slower: 400ms;--ui-ease-default: cubic-bezier(0.4, 0, 0.2, 1);--ui-ease-in: cubic-bezier(0.4, 0, 1, 1);--ui-ease-out: cubic-bezier(0, 0, 0.2, 1);--ui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)}@media(prefers-reduced-motion: reduce){:root{--ui-duration-instant: 0ms;--ui-duration-fast: 0ms;--ui-duration-base: 0ms;--ui-duration-slow: 0ms;--ui-duration-slower: 0ms}}}:root{--ui-color-text: var(--ui-color-neutral-900);--ui-color-text-muted: var(--ui-color-neutral-500);--ui-color-text-inverse: var(--ui-color-neutral-50);--ui-color-bg: var(--ui-color-neutral-50);--ui-color-bg-subtle: var(--ui-color-neutral-100);--ui-color-bg-muted: var(--ui-color-neutral-200);--ui-color-border: var(--ui-color-neutral-200);--ui-color-border-strong: var(--ui-color-neutral-300);--ui-color-interactive: var(--ui-color-primary);--ui-color-interactive-hover: var(--ui-color-primary-dark);--ui-color-focus: var(--ui-color-primary-light)}[data-theme=dark]{--ui-color-text: var(--ui-color-neutral-100);--ui-color-text-muted: var(--ui-color-neutral-400);--ui-color-text-inverse: var(--ui-color-neutral-900);--ui-color-bg: var(--ui-color-neutral-900);--ui-color-bg-subtle: var(--ui-color-neutral-800);--ui-color-bg-muted: var(--ui-color-neutral-700);--ui-color-border: var(--ui-color-neutral-700);--ui-color-border-strong: var(--ui-color-neutral-600)}:root{--spacing-xs: var(--ui-space-1);--spacing-sm: var(--ui-space-2);--spacing-md: var(--ui-space-4);--spacing-lg: var(--ui-space-6);--spacing-xl: var(--ui-space-8);--spacing-gutter: var(--ui-space-4);--spacing-section: var(--ui-space-8)}:root{--ui-input-height: var(--ui-row-2);--ui-input-padding-x: var(--ui-space-2);--ui-input-padding-y: var(--ui-space-1);--ui-input-radius: var(--ui-radius-md);--ui-input-border-width: var(--ui-border-width-sm);--ui-input-bg: var(--ui-color-bg);--ui-input-border: var(--ui-color-border);--ui-input-border-focus: var(--ui-color-interactive);--ui-input-text: var(--ui-color-text);--ui-input-placeholder: var(--ui-color-text-muted)}@layer reset{*,*::before,*::after{box-sizing:border-box;margin:0}}@layer base{.root{font-family:var(--ui-font-sans, Noto Sans, system-ui, -apple-system, sans-serif);font-size:var(--ui-font-size-md, 1rem);line-height:var(--ui-leading-md, calc(0.5rem * 3));color:var(--ui-color-text, hsl(220, 10%, 10%));background:var(--ui-color-bg, hsl(220, 10%, 98%))}}@layer base{h1{margin-block-end:var(--ui-space-4);font-size:var(--ui-heading-1-size);font-weight:var(--ui-heading-1-weight);line-height:var(--ui-heading-1-line-height);letter-spacing:var(--ui-heading-1-tracking)}h2{margin-block-end:var(--ui-space-3);font-size:var(--ui-heading-2-size);font-weight:var(--ui-heading-2-weight);line-height:var(--ui-heading-2-line-height);letter-spacing:var(--ui-heading-2-tracking)}h3{margin-block-end:var(--ui-space-2);font-size:var(--ui-heading-3-size);font-weight:var(--ui-heading-3-weight);line-height:var(--ui-heading-3-line-height);letter-spacing:var(--ui-heading-3-tracking)}h4{margin-block-end:var(--ui-space-2);font-size:var(--ui-heading-4-size);font-weight:var(--ui-heading-4-weight);line-height:var(--ui-heading-4-line-height);letter-spacing:var(--ui-heading-4-tracking)}h5,h6{margin-block-end:var(--ui-space-1);font-size:var(--ui-heading-5-size);font-weight:var(--ui-heading-5-weight);line-height:var(--ui-heading-5-line-height);letter-spacing:var(--ui-heading-5-tracking)}p{margin-block-end:var(--ui-space-2);font-size:var(--ui-body-size);line-height:var(--ui-body-line-height);letter-spacing:var(--ui-body-tracking)}p:last-child{margin-block-end:0}strong,b{font-weight:var(--ui-weight-bold);line-height:0}small{font-size:var(--ui-caption-size);line-height:0}code{padding:0 var(--ui-space-1);font-family:var(--ui-font-mono);font-size:var(--ui-body-sm-size);line-height:0;vertical-align:baseline;background:var(--ui-color-bg-muted);border-radius:var(--ui-radius-sm)}pre{padding:var(--ui-space-2);margin-block-end:var(--ui-space-2);overflow-x:auto;font-family:var(--ui-font-mono);font-size:var(--ui-body-sm-size);line-height:var(--ui-body-sm-line-height);background:var(--ui-color-bg-muted);border-radius:var(--ui-radius-md)}pre code{padding:0;background:none}a{text-decoration:underline;color:var(--ui-color-primary);transition:color var(--ui-duration-fast) var(--ui-ease-default)}a:hover{color:var(--ui-color-primary-hover)}a:visited{color:var(--ui-color-primary)}@media(width < 45.625rem){h1{font-size:var(--ui-font-size-2xl);line-height:var(--ui-leading-2xl)}h2{font-size:var(--ui-font-size-xl);line-height:var(--ui-leading-xl)}h3{font-size:var(--ui-font-size-lg);line-height:var(--ui-leading-sm)}h4{font-size:1.125rem;line-height:var(--ui-leading-sm)}}@media(width > 67.5rem){h1{font-size:calc(var(--unit)*6);line-height:calc(var(--unit)*7)}h2{font-size:var(--ui-font-size-4xl);line-height:var(--ui-leading-4xl)}}}@layer primitives{.box{--_padding: var(--box-padding, 0);--_bg: var(--box-bg, transparent);--_color: var(--box-color, inherit);--_radius: var(--box-radius, 0);padding:var(--_padding);color:var(--_color);background:var(--_bg);border-radius:var(--_radius)}.box--p-1{--_padding: var(--ui-space-1, 0.5rem)}.box--p-2{--_padding: var(--ui-space-2, 1rem)}.box--p-3{--_padding: var(--ui-space-3, 1.5rem)}.box--p-4{--_padding: var(--ui-space-4, 2rem)}.box--bg-subtle{--_bg: var(--ui-color-bg-subtle, hsl(220, 10%, 96%))}.box--bg-muted{--_bg: var(--ui-color-bg-muted, hsl(220, 10%, 90%))}.box--rounded{--_radius: var(--ui-radius-md, 0.5rem)}.box--rounded-lg{--_radius: var(--ui-radius-lg, 1rem)}}@layer primitives{.stack{display:flex;flex-direction:column;gap:var(--stack-gap, var(--ui-space-2))}.stack--xs{--stack-gap: var(--ui-space-1)}.stack--sm{--stack-gap: var(--ui-space-2)}.stack--md{--stack-gap: var(--ui-space-4)}.stack--lg{--stack-gap: var(--ui-space-6)}.stack--xl{--stack-gap: var(--ui-space-8)}}@layer primitives{.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cluster-gap, var(--ui-space-2))}.cluster--xs{--cluster-gap: var(--ui-space-1)}.cluster--sm{--cluster-gap: var(--ui-space-2)}.cluster--md{--cluster-gap: var(--ui-space-4)}.cluster--lg{--cluster-gap: var(--ui-space-6)}.cluster--start{justify-content:flex-start}.cluster--center{justify-content:center}.cluster--end{justify-content:flex-end}.cluster--between{justify-content:space-between}}@layer primitives{.flex{--_gap: var(--flex-gap, var(--ui-space-2, 1rem));--_direction: var(--flex-direction, row);--_wrap: var(--flex-wrap, nowrap);--_align: var(--flex-align, stretch);--_justify: var(--flex-justify, flex-start);display:flex;flex-direction:var(--_direction);flex-wrap:var(--_wrap);align-items:var(--_align);justify-content:var(--_justify);gap:var(--_gap)}.flex--row{--_direction: row}.flex--col{--_direction: column}.flex--row-reverse{--_direction: row-reverse}.flex--col-reverse{--_direction: column-reverse}.flex--wrap{--_wrap: wrap}.flex--nowrap{--_wrap: nowrap}.flex--items-start{--_align: flex-start}.flex--items-center{--_align: center}.flex--items-end{--_align: flex-end}.flex--items-baseline{--_align: baseline}.flex--justify-start{--_justify: flex-start}.flex--justify-center{--_justify: center}.flex--justify-end{--_justify: flex-end}.flex--justify-between{--_justify: space-between}.flex--justify-around{--_justify: space-around}.flex--gap-0{--_gap: 0}.flex--gap-1{--_gap: var(--ui-space-1, 0.5rem)}.flex--gap-2{--_gap: var(--ui-space-2, 1rem)}.flex--gap-3{--_gap: var(--ui-space-3, 1.5rem)}.flex--gap-4{--_gap: var(--ui-space-4, 2rem)}}@layer primitives{.center{display:flex;align-items:center;justify-content:center}.center--column{flex-direction:column}}@layer primitives{.grid{display:grid;gap:var(--grid-gap, var(--ui-space-4));grid-template-columns:repeat(var(--grid-cols, 1), minmax(0, 1fr))}.grid--2{--grid-cols: 2}.grid--3{--grid-cols: 3}.grid--4{--grid-cols: 4}.grid--auto{grid-template-columns:repeat(auto-fit, minmax(var(--grid-min, 16rem), 1fr))}}@layer primitives{.app-shell{min-block-size:100vh}}@layer primitives{.sidebar{display:flex;flex-direction:column;position:fixed;inset-block-start:0;inset-inline-start:0;z-index:var(--ui-z-sticky);block-size:100vh;inline-size:var(--sidebar-width, calc(var(--unit) * 30));overflow-y:auto;background:var(--ui-color-bg-subtle);box-shadow:inset calc(var(--ui-border-width-sm)*-1) 0 0 0 var(--ui-color-border)}.sidebar--sm{--sidebar-width: calc(var(--unit) * 24)}.sidebar--md{--sidebar-width: calc(var(--unit) * 30)}.sidebar--lg{--sidebar-width: calc(var(--unit) * 40)}.sidebar--end{inset-inline-start:auto;inset-inline-end:0;box-shadow:inset var(--ui-border-width-sm) 0 0 0 var(--ui-color-border)}}@layer primitives{.sidebar-nav{--_width: var(--ui-sidebar-nav-width, calc(var(--ui-unit) * 30));--_bg: var(--ui-sidebar-nav-bg, var(--ui-color-bg-subtle));--_border-color: var(--ui-sidebar-nav-border-color, var(--ui-color-border));--_padding: var(--ui-sidebar-nav-padding, var(--ui-space-2));display:flex;flex-direction:column;block-size:100%;inline-size:var(--_width);background:var(--_bg)}.sidebar-nav__header{--_padding: var(--ui-sidebar-nav-header-padding, var(--ui-space-2));flex-shrink:0;padding:var(--_padding);box-shadow:inset 0 calc(var(--ui-border-width-sm)*-1) 0 0 var(--_border-color)}.sidebar-nav__content{flex:1;padding:var(--_padding);overflow-y:auto}.sidebar-nav__footer{--_padding: var(--ui-sidebar-nav-footer-padding, var(--ui-space-2));flex-shrink:0;padding:var(--_padding);box-shadow:inset 0 var(--ui-border-width-sm) 0 0 var(--_border-color)}.sidebar-nav__group{margin-block-end:var(--ui-space-2)}.sidebar-nav__group-label{--_font-size: var(--ui-sidebar-nav-group-label-size, var(--ui-size-xs));--_color: var(--ui-sidebar-nav-group-label-color, var(--ui-color-text-muted));--_weight: var(--ui-sidebar-nav-group-label-weight, var(--ui-weight-bold));display:block;padding:var(--ui-space-1) var(--ui-space-2);margin:0;font-size:var(--_font-size);font-weight:var(--_weight);letter-spacing:.05em;text-transform:uppercase;color:var(--_color)}.sidebar-nav__group-items{display:flex;flex-direction:column;gap:var(--ui-space-half);padding:0;margin:0;list-style:none}.sidebar-nav__subgroup-label{display:block;padding:var(--ui-space-1) var(--ui-space-2);margin:0;margin-block-start:var(--ui-space-1);font-size:var(--ui-size-xs);font-weight:var(--ui-weight-medium);color:var(--ui-color-text-muted)}.sidebar-nav__item{--_height: var(--ui-sidebar-nav-item-height, var(--ui-row-2));--_padding-inline: var(--ui-sidebar-nav-item-padding-inline, var(--ui-space-2));--_font-size: var(--ui-sidebar-nav-item-size, var(--ui-size-sm));--_color: var(--ui-sidebar-nav-item-color, var(--ui-color-text));--_bg: var(--ui-sidebar-nav-item-bg, transparent);--_radius: var(--ui-sidebar-nav-item-radius, var(--ui-radius-sm));display:flex;align-items:center;gap:var(--ui-space-1);min-block-size:var(--_height);padding-inline:var(--_padding-inline);font-size:var(--_font-size);font-weight:var(--_weight, normal);text-decoration:none;color:var(--_color);background:var(--_bg);border-radius:var(--_radius);cursor:pointer;transition:background var(--ui-duration-fast) var(--ui-easing-default),color var(--ui-duration-fast) var(--ui-easing-default)}.sidebar-nav__item:hover{--_bg: var(--ui-sidebar-nav-item-hover-bg, var(--ui-color-bg-muted))}.sidebar-nav__item:visited{color:var(--_color)}.sidebar-nav__item:focus-visible{outline:2px solid var(--ui-color-focus);outline-offset:-2px}.sidebar-nav__item--active{--_bg: var(--ui-sidebar-nav-item-active-bg, var(--ui-color-primary-subtle));--_color: var(--ui-sidebar-nav-item-active-color, var(--ui-color-primary-hover));--_weight: var(--ui-sidebar-nav-item-active-weight, var(--ui-weight-medium))}.sidebar-nav__item--nested{--_padding-inline-start: var(--ui-sidebar-nav-item-nested-indent, var(--ui-space-4));padding-inline-start:var(--_padding-inline-start)}.sidebar-nav__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sidebar-nav__icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;block-size:var(--ui-size-md);inline-size:var(--ui-size-md)}.sidebar-nav__label{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-nav__badge{flex-shrink:0;margin-inline-start:auto}.sidebar-nav--collapsed{--_width: var(--ui-sidebar-nav-width-collapsed, var(--ui-row-3))}.sidebar-nav--collapsed .sidebar-nav__label,.sidebar-nav--collapsed .sidebar-nav__badge,.sidebar-nav--collapsed .sidebar-nav__group-label,.sidebar-nav--collapsed .sidebar-nav__subgroup-label{display:none}.sidebar-nav--collapsed .sidebar-nav__item{justify-content:center;padding-inline:var(--ui-space-1)}}@layer primitives{.main{margin-inline-start:var(--sidebar-width, calc(var(--unit) * 30))}.main--sidebar-end{margin-inline-start:0;margin-inline-end:var(--sidebar-width, calc(var(--unit) * 30))}.main--full{margin-inline-start:0;margin-inline-end:0}}@layer primitives{.container{max-inline-size:var(--container-width, calc(var(--unit) * 120));padding-inline:var(--ui-space-4)}.container--center{margin-inline:auto}.container--sm{--container-width: calc(var(--unit) * 80)}.container--md{--container-width: calc(var(--unit) * 100)}.container--lg{--container-width: calc(var(--unit) * 120)}.container--xl{--container-width: calc(var(--unit) * 160)}.container--full{max-inline-size:none}}@layer components.tokens{.button{--_accent: var(--ui-button-accent, var(--ui-color-primary, oklch(55% 0.22 250deg)));--_height: var(--ui-button-height, var(--ui-row-2, 2rem));--_padding-x: var(--ui-button-padding-x, var(--ui-space-2, 1rem));--_font-size: var(--ui-button-font-size, var(--ui-font-size-sm, 0.875rem));--_font-weight: var(--ui-button-font-weight, var(--ui-weight-medium, 500));--_radius: var(--ui-button-radius, var(--ui-radius-md, 0.5rem));--_bg: var(--_accent);--_bg-hover: color-mix(in oklch, var(--_accent) 80%, black);--_text: var(--ui-button-text, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}.button--sm{--ui-ctx-size: var(--ui-size-sm, 0.75rem);--_height: var(--ui-button-height-sm, calc(var(--row, 1rem) * 1.5));--_font-size: var(--ui-button-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.button--md{--ui-ctx-size: var(--ui-size-md, 1rem);--_height: var(--ui-button-height-md, var(--ui-row-2, 2rem));--_font-size: var(--ui-button-font-size-md, var(--ui-font-size-sm, 0.875rem))}.button--lg{--ui-ctx-size: var(--ui-size-lg, 1.25rem);--_height: var(--ui-button-height-lg, calc(var(--row, 1rem) * 2.5));--_padding-x: var(--ui-button-padding-x-lg, var(--ui-space-3, 1.5rem));--_font-size: var(--ui-button-font-size-lg, var(--ui-font-size-md, 1rem))}.button--secondary{--_bg: var(--ui-color-bg-muted, hsl(220, 10%, 90%));--_bg-hover: var(--ui-color-border-strong, hsl(220, 10%, 80%));--_text: var(--ui-color-text, hsl(220, 10%, 10%))}.button--ghost{--_bg: transparent;--_bg-hover: color-mix(in oklch, var(--_accent) 10%, transparent);--_text: var(--_accent)}.button--outline{--_bg: transparent;--_bg-hover: var(--_accent);--_text: var(--_accent);--_text-hover: var(--ui-color-text-inverse, hsl(220, 10%, 98%));--_border: var(--ui-border-width-sm, 0.0625rem) solid currentColor}.button--danger{--_accent: var(--ui-color-danger, oklch(60% 0.22 25deg))}.button--link{--_bg: transparent;--_bg-hover: transparent;--_text: var(--_accent);--_text-hover: color-mix(in oklch, var(--_accent) 70%, black);--_height: auto;--_padding-x: 0;--_radius: 0}.button--icon{--_padding-x: 0}.button--radius-none{--_radius: 0}.button--radius-sm{--_radius: var(--ui-radius-sm, 0.25rem)}.button--radius-lg{--_radius: var(--ui-radius-lg, 1rem)}.button--radius-full{--_radius: 624.9375rem}}@layer components.styles{.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-space-1, 0.5rem);block-size:var(--_height);padding-inline:var(--_padding-x);margin:0;font-family:var(--ui-font-sans, Noto Sans, system-ui, -apple-system, sans-serif);font-size:var(--_font-size);font-weight:var(--_font-weight);line-height:1;text-decoration:none;white-space:nowrap;color:var(--_text);background:var(--_bg);border:var(--_border, none);border-radius:var(--_radius);cursor:pointer;transition:background-color var(--ui-duration-base) var(--ui-ease-default),color var(--ui-duration-base) var(--ui-ease-default),transform var(--ui-duration-fast) var(--ui-ease-default)}.button:hover,.button--hover{color:var(--_text-hover, var(--_text));background:var(--_bg-hover)}.button:focus-visible,.button--focus{outline:var(--ui-border-width-md, 0.125rem) solid var(--ui-color-focus, oklch(75% 0.15 250deg));outline-offset:var(--ui-border-width-md, 0.125rem)}.button:active,.button--active{transform:scale(0.98)}.button:disabled{opacity:.5;cursor:not-allowed}.button:disabled:hover{background:var(--_bg);transform:none}.button--icon{inline-size:var(--_height)}.button--block{inline-size:100%}.button--link{text-decoration:underline;text-underline-offset:var(--ui-space-quarter)}.button--link:hover{text-decoration-thickness:var(--ui-space-quarter)}.button__icon{flex-shrink:0;block-size:1em;inline-size:1em}.button__icon--start{order:-1}.button__icon--end{order:1}.button--loading{position:relative;opacity:.7;pointer-events:none}.button--loading::after{content:"";position:absolute;block-size:1em;inline-size:1em;border:2px solid currentcolor;border-radius:50%;animation:button-spin .6s linear infinite;border-inline-end-color:rgba(0,0,0,0)}@keyframes button-spin{to{transform:rotate(360deg)}}}@layer components.tokens{.button-group{--_radius: var(--ui-button-group-radius, var(--ui-radius-md, calc(0.5rem / 2)))}}@layer components.styles{.button-group{display:inline-flex}.button-group>.button:not(:first-child,:last-child){border-radius:0}.button-group>.button:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.button-group>.button:last-child:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.button-group>.button+.button{margin-inline-start:calc(0.5rem/-8)}.button-group>.button:focus-visible{z-index:1}.button-group--vertical{flex-direction:column}.button-group--vertical>.button:not(:first-child,:last-child){border-radius:0}.button-group--vertical>.button:first-child:not(:last-child){border-end-start-radius:0;border-end-end-radius:0}.button-group--vertical>.button:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0}.button-group--vertical>.button+.button{margin-block-start:calc(0.5rem/-8);margin-inline-start:0}.button-group--attached>.button{border-inline-end-width:0}.button-group--attached>.button:last-child{border-inline-end-width:1px}.button-group--attached>.button+.button{margin-inline-start:0}}@layer components.tokens{.avatar{--_size: var(--ui-avatar-size, calc(0.5rem * 5));--_bg: var(--ui-avatar-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));--_color: var(--ui-avatar-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--_font-size: var(--ui-avatar-font-size, var(--ui-font-size-sm, 0.875rem));--_radius: var(--ui-avatar-radius, 50%)}.avatar--xs{--_size: var(--ui-avatar-size-xs, calc(0.5rem * 3));--_font-size: var(--ui-avatar-font-size-xs, var(--ui-font-size-xs, 0.75rem))}.avatar--sm{--_size: var(--ui-avatar-size-sm, calc(0.5rem * 4));--_font-size: var(--ui-avatar-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.avatar--lg{--_size: var(--ui-avatar-size-lg, calc(0.5rem * 6));--_font-size: var(--ui-avatar-font-size-lg, var(--ui-font-size-md, 1rem))}.avatar--xl{--_size: var(--ui-avatar-size-xl, calc(0.5rem * 8));--_font-size: var(--ui-avatar-font-size-xl, var(--ui-font-size-lg, 1.25rem))}.avatar--square{--_radius: var(--ui-avatar-radius-square, var(--ui-radius-md, 0.5rem))}}@layer components.styles{.avatar{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;position:relative;block-size:var(--_size);inline-size:var(--_size);overflow:hidden;font-size:var(--_font-size);font-weight:var(--ui-weight-medium, 500);line-height:1;text-transform:uppercase;color:var(--_color);background:var(--_bg);border-radius:var(--_radius)}.avatar__image{position:absolute;inset:0;block-size:100%;inline-size:100%;object-fit:cover;border-radius:inherit}.avatar__fallback{display:flex;align-items:center;justify-content:center;block-size:100%;inline-size:100%;user-select:none}.avatar-group{display:flex;flex-direction:row-reverse;justify-content:flex-end}.avatar-group>.avatar{margin-inline-start:calc(var(--_size)*-0.25);border:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-color-bg, hsl(220, 10%, 98%))}.avatar-group>.avatar:last-child{margin-inline-start:0}}@layer components.tokens{.badge{--_accent: var(--ui-badge-accent, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--_height: var(--ui-badge-height, calc(var(--ui-row, 1rem) * 1.25));--_padding-x: var(--ui-badge-padding-x, var(--ui-space-1, 0.5rem));--_font-size: var(--ui-badge-font-size, var(--ui-font-size-xs, 0.75rem));--_font-weight: var(--ui-badge-font-weight, var(--ui-weight-medium, 500));--_radius: var(--ui-badge-radius, var(--ui-radius-full, 9999px));--_bg: var(--_accent);--_text: var(--ui-badge-text, var(--ui-color-text, hsl(220, 10%, 10%)))}.badge--sm{--_height: var(--ui-badge-height-sm, var(--ui-row, 1rem));--_padding-x: var(--ui-badge-padding-x-sm, var(--ui-space-0, 0.25rem));--_font-size: var(--ui-badge-font-size-sm, calc(var(--ui-font-size-xs, 0.75rem) * 0.85))}.badge--primary{--_accent: var(--ui-color-primary, oklch(55% 0.22 250deg));--_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%))}.badge--success{--_accent: var(--ui-color-success, oklch(60% 0.18 145deg));--_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%))}.badge--warning{--_accent: var(--ui-color-warning, oklch(75% 0.18 70deg));--_text: var(--ui-color-text, hsl(220, 10%, 10%))}.badge--danger{--_accent: var(--ui-color-danger, oklch(60% 0.22 25deg));--_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%))}}@layer components.styles{.badge{display:inline-flex;align-items:center;justify-content:center;block-size:var(--_height);padding-inline:var(--_padding-x);font-size:var(--_font-size);font-weight:var(--_font-weight);line-height:1;white-space:nowrap;color:var(--_text);background:var(--_bg);border-radius:var(--_radius)}}@layer components.tokens{.card{--_padding: var(--ui-card-padding, var(--ui-space-4));--_border-width: var(--ui-card-border-width, var(--ui-border-width-sm));--_bg: var(--ui-card-bg, var(--ui-color-bg));--_border-color: var(--ui-card-border-color, var(--ui-color-border));--_radius: var(--ui-card-radius, var(--ui-radius-md))}.card--subtle{--_bg: var(--ui-card-bg-subtle, var(--ui-color-bg-subtle))}.card--muted{--_bg: var(--ui-card-bg-muted, var(--ui-color-bg-muted))}.card--sm{--_padding: var(--ui-card-padding-sm, var(--ui-space-2))}.card--lg{--_padding: var(--ui-card-padding-lg, var(--ui-space-6))}.card--flush{--_padding: 0;--_border-width: 0}}@layer components.styles{.card{border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);background:var(--_bg);padding:calc(var(--_padding) - var(--_border-width));line-height:var(--ui-row-1)}}@layer components.tokens{.data-list{--_gap: var(--ui-data-list-gap, calc(0.5rem * 2));--_item-gap: var(--ui-data-list-item-gap, calc(0.5rem * 1));--_label-color: var(--ui-data-list-label-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--_value-color: var(--ui-data-list-value-color, var(--ui-color-text, hsl(220, 10%, 10%)))}}@layer components.styles{.data-list{display:flex;flex-direction:column;gap:var(--_gap);margin:0;line-height:var(--ui-row-1, 1rem)}.data-list__item{display:flex;flex-direction:column;gap:var(--_item-gap)}.data-list__label{font-size:var(--ui-font-size-sm, 0.875rem);font-weight:var(--ui-weight-medium, 500);line-height:var(--ui-row-1, 1rem);color:var(--_label-color)}.data-list__value{margin:0;line-height:var(--ui-row-1, 1rem);color:var(--_value-color)}.data-list--horizontal .data-list__item{flex-direction:row;align-items:baseline;justify-content:space-between;gap:calc(0.5rem*2)}.data-list--horizontal .data-list__label{flex-shrink:0}.data-list--horizontal .data-list__value{text-align:end}.data-list--divided .data-list__item{padding-block-end:calc(var(--_gap) - var(--ui-border-width-sm, 0.0625rem));border-block-end:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-color-border, hsl(220, 10%, 90%))}.data-list--divided .data-list__item:last-child{padding-block-end:0;border-block-end:none}.data-list--striped .data-list__item:nth-child(odd){padding:calc(0.5rem*1);background:var(--ui-color-bg-subtle, hsl(220, 10%, 96%));border-radius:var(--ui-radius-sm, 0.25rem)}.data-list--sm{--_gap: calc(0.5rem * 1);--_item-gap: 0;font-size:var(--ui-font-size-sm, 0.875rem)}.data-list--lg{--_gap: calc(0.5rem * 3);--_item-gap: calc(0.5rem * 1);font-size:var(--ui-font-size-lg, 1.25rem)}}@layer components.tokens{.icon{--_size: var(--ui-icon-size, var(--ui-ctx-size, 1rem));--_stroke: var(--ui-icon-stroke, 2)}.icon--xs{--_size: var(--ui-icon-size-xs, var(--ui-size-xs, 0.5rem))}.icon--sm{--_size: var(--ui-icon-size-sm, var(--ui-size-sm, 0.75rem))}.icon--md{--_size: var(--ui-icon-size-md, var(--ui-size-md, 1rem))}.icon--lg{--_size: var(--ui-icon-size-lg, var(--ui-size-lg, 1.25rem))}.icon--xl{--_size: var(--ui-icon-size-xl, var(--ui-size-xl, 1.5rem))}.icon--stroke-thin{--_stroke: var(--ui-icon-stroke-thin, 1)}.icon--stroke-thick{--_stroke: var(--ui-icon-stroke-thick, 2.5)}}@layer components.styles{.icon{display:inline-block;flex-shrink:0;block-size:var(--_size);inline-size:var(--_size);vertical-align:middle;color:currentcolor;fill:none;stroke:currentcolor;stroke-width:var(--_stroke);stroke-linecap:round;stroke-linejoin:round}.icon--filled{fill:currentcolor;stroke:none}.icon--spin{animation:icon-spin 1s linear infinite}@keyframes icon-spin{to{transform:rotate(360deg)}}}@layer components.tokens{.status{--_size: var(--ui-status-size, calc(0.5rem * 1));--_color: var(--ui-status-color, var(--ui-color-text-muted));--_gap: var(--ui-status-gap, calc(0.5rem * 1))}.status--success{--_color: var(--ui-color-success)}.status--warning{--_color: var(--ui-color-warning)}.status--danger{--_color: var(--ui-color-danger)}.status--info{--_color: var(--ui-color-primary)}}@layer components.styles{.status{display:inline-flex;align-items:center;gap:var(--_gap)}.status__dot{flex-shrink:0;block-size:var(--_size);inline-size:var(--_size);background:var(--_color);border-radius:50%}.status--pulse .status__dot{position:relative}.status--pulse .status__dot::before{content:"";position:absolute;inset:0;background:var(--_color);border-radius:50%;animation:status-pulse 2s infinite}@keyframes status-pulse{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2.5)}}.status--sm{--_size: calc(0.5rem * 0.75);--_gap: calc(0.5rem * 0.75)}.status--lg{--_size: calc(0.5rem * 1.5);--_gap: calc(0.5rem * 1.5)}}@layer components.tokens{.table{--_font-size: var(--ui-table-font-size, var(--ui-font-size-sm, 0.875rem));--_border-color: var(--ui-table-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--_header-bg: var(--ui-table-header-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));--_cell-padding-x: var(--ui-table-cell-padding-x, var(--ui-space-2, 1rem));--_cell-padding-y: var(--ui-table-cell-padding-y, var(--ui-space-1, 0.5rem))}.table--compact{--_cell-padding-y: var(--ui-space-0, 0.25rem);--_cell-padding-x: var(--ui-space-1, 0.5rem);--_font-size: var(--ui-font-size-xs, 0.75rem)}}@layer components.styles{.table{inline-size:100%;font-size:var(--_font-size);border-collapse:separate;border-spacing:0}.table th,.table td{padding-block-start:var(--_cell-padding-y);padding-block-end:calc(var(--_cell-padding-y) - var(--ui-border-width-sm, 0.0625rem));padding-inline:var(--_cell-padding-x);line-height:calc(var(--unit, 0.5rem)*3);text-align:start;border-block-end:var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color)}.table th{font-weight:var(--ui-weight-medium, 500);background:var(--_header-bg)}.table--striped tbody tr:nth-child(odd){background:var(--ui-color-bg-subtle, hsl(220, 10%, 96%))}.table--striped th{background:var(--ui-color-bg-muted, hsl(220, 10%, 90%))}}@layer components.tokens{.tag{--_height: var(--ui-tag-height, calc(0.5rem * 3));--_padding-x: var(--ui-tag-padding-x, var(--ui-space-1, 0.5rem));--_gap: var(--ui-tag-gap, calc(0.5rem * 0.5));--_radius: var(--ui-tag-radius, var(--ui-radius-full, 9999px));--_font-size: var(--ui-tag-font-size, var(--ui-font-size-sm, 0.875rem));--_bg: var(--ui-tag-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--_color: var(--ui-tag-color, var(--ui-color-text, hsl(220, 10%, 10%)))}.tag--sm{--_height: var(--ui-tag-height-sm, calc(0.5rem * 2.5));--_padding-x: var(--ui-tag-padding-x-sm, calc(0.5rem * 1));--_font-size: var(--ui-tag-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.tag--primary{--_bg: var(--ui-tag-primary-bg, var(--ui-color-primary, oklch(55% 0.22 250deg)));--_color: var(--ui-tag-primary-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}.tag--success{--_bg: var(--ui-tag-success-bg, var(--ui-color-success, oklch(60% 0.18 145deg)));--_color: var(--ui-tag-success-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}.tag--warning{--_bg: var(--ui-tag-warning-bg, var(--ui-color-warning, oklch(75% 0.18 70deg)));--_color: var(--ui-tag-warning-color, var(--ui-color-text, hsl(220, 10%, 10%)))}.tag--danger{--_bg: var(--ui-tag-danger-bg, var(--ui-color-danger, oklch(60% 0.22 25deg)));--_color: var(--ui-tag-danger-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}}@layer components.styles{.tag{display:inline-flex;align-items:center;gap:var(--_gap);block-size:var(--_height);padding-inline:var(--_padding-x);font-size:var(--_font-size);font-weight:var(--ui-weight-medium, 500);line-height:1;white-space:nowrap;color:var(--_color);background:var(--_bg);border-radius:var(--_radius)}.tag:disabled,.tag[aria-disabled=true]{opacity:.5;cursor:not-allowed}.tag__remove{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:0;margin-inline-start:calc(var(--_gap)*-0.5);color:currentcolor;background:none;border:none;opacity:.7;cursor:pointer}.tag__remove:hover{opacity:1}.tag-group{display:flex;flex-wrap:wrap;gap:calc(0.5rem*.5)}}@layer components.tokens{.accordion{--_border-color: var(--ui-accordion-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));--_border-width: var(--ui-accordion-border-width, 1px);--_radius: var(--ui-accordion-radius, var(--ui-radius-md, calc(0.5rem * 1)))}}@layer components.styles{.accordion{border-radius:var(--_radius);outline:var(--_border-width) solid var(--_border-color);outline-offset:calc(var(--_border-width)*-1)}.accordion>.disclosure{--_border-width: 0;border:none;border-radius:0}.accordion>.disclosure+.disclosure{border-block-start:1px solid var(--_border-color)}.accordion>.disclosure:first-child .disclosure__trigger{border-start-start-radius:var(--_radius);border-start-end-radius:var(--_radius)}.accordion>.disclosure:last-child .disclosure__trigger{border-end-start-radius:var(--_radius);border-end-end-radius:var(--_radius)}.accordion>.disclosure:last-child .disclosure__content{border-end-start-radius:var(--_radius);border-end-end-radius:var(--_radius)}.accordion--borderless{border:none}.accordion--borderless>.disclosure+.disclosure{border-block-start:none}.accordion--separated{display:flex;flex-direction:column;gap:calc(0.5rem*1);border:none}.accordion--separated>.disclosure{border:1px solid var(--_border-color);border-radius:var(--_radius)}.accordion--separated>.disclosure+.disclosure{border-block-start:1px solid var(--_border-color)}}@layer components.tokens{.disclosure{--_border-color: var(--ui-disclosure-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));--_border-width: var(--ui-disclosure-border-width, 1px);--_radius: var(--ui-disclosure-radius, var(--ui-radius-md, calc(0.5rem * 1)));--_trigger-height: var(--ui-disclosure-trigger-height, var(--ui-row-3, calc(1rem * 3)));--_padding-x: var(--ui-disclosure-padding-x, calc(0.5rem * 2));--_padding-y: var(--ui-disclosure-padding-y, calc(0.5rem * 2))}}@layer components.styles{.disclosure{box-sizing:border-box;border-radius:var(--_radius);outline:var(--_border-width) solid var(--_border-color);outline-offset:calc(var(--_border-width)*-1)}.disclosure:not([open]){block-size:var(--_trigger-height)}.disclosure__trigger{display:flex;align-items:center;justify-content:space-between;gap:calc(0.5rem*2);block-size:var(--_trigger-height);inline-size:100%;padding-inline:var(--_padding-x);font-weight:var(--ui-weight-medium, 500);line-height:1;text-align:start;cursor:pointer;list-style:none}.disclosure__trigger::-webkit-details-marker{display:none}.disclosure__trigger::marker{display:none}.disclosure__trigger:hover{background:var(--ui-color-bg-subtle, rgba(0, 0, 0, 0.02))}.disclosure__icon{flex-shrink:0;transition:transform var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}.disclosure[open] .disclosure__icon{transform:rotate(180deg)}.disclosure__content{padding:0 var(--_padding-x) var(--_padding-y)}.disclosure--animate .disclosure__content{animation:disclosure-open var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease)}@keyframes disclosure-open{from{opacity:0;transform:translateY(calc(0.5rem * -1))}to{opacity:1;transform:translateY(0)}}.disclosure--borderless{--_border-width: 0;border:none;border-radius:0}.disclosure--flush .disclosure__trigger{padding-inline:0}.disclosure--flush .disclosure__content{padding-inline:0}}@layer components.tokens{.alert{--_accent: var(--ui-alert-accent, var(--ui-color-border, hsl(220, 10%, 90%)));--_padding: var(--ui-alert-padding, var(--ui-space-2, 1rem));--_border-width: var(--ui-alert-border-width, var(--ui-border-width-sm, 0.0625rem));--_gap: var(--ui-alert-gap, var(--ui-space-1, 0.5rem));--_radius: var(--ui-alert-radius, var(--ui-radius-md, 0.5rem));--_bg: color-mix(in oklch, var(--_accent) 8%, white);--_border-color: var(--_accent);--_color: var(--ui-alert-color, var(--ui-color-text, hsl(220, 10%, 10%)));--_icon-color: var(--_accent)}.alert--info{--_accent: var(--ui-color-primary, oklch(55% 0.22 250deg))}.alert--success{--_accent: var(--ui-color-success, oklch(60% 0.18 145deg))}.alert--warning{--_accent: var(--ui-color-warning, oklch(75% 0.18 70deg))}.alert--danger{--_accent: var(--ui-color-danger, oklch(60% 0.22 25deg))}}@layer components.styles{.alert{display:flex;align-items:flex-start;gap:var(--_gap);padding:calc(var(--_padding) - var(--_border-width));padding-inline:var(--_padding);color:var(--_color);background:var(--_bg);border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);border-inline-start-width:calc(0.5rem*.5)}.alert__icon{flex-shrink:0;color:var(--_icon-color)}.alert__content{flex:1;min-inline-size:0}.alert__title{margin:0;font-weight:var(--ui-weight-medium, 500);line-height:var(--ui-row-1, 1rem)}.alert__description{margin:0;margin-block-start:calc(0.5rem*1);font-size:var(--ui-font-size-sm, 0.875rem);line-height:var(--ui-row-1, 1rem);color:var(--ui-color-text-muted, hsl(220, 10%, 45%))}.alert__close{flex-shrink:0;align-self:flex-start;padding:0;color:var(--ui-color-text-muted, hsl(220, 10%, 45%));background:none;border:none;cursor:pointer}.alert__close:hover{color:var(--ui-color-text, hsl(220, 10%, 10%))}}@layer components.tokens{.progress{--_height: var(--ui-progress-height, calc(0.5rem * 1));--_bg: var(--ui-progress-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));--_fill: var(--ui-progress-fill, var(--ui-color-primary));--_radius: var(--ui-progress-radius, var(--ui-radius-full, 9999px))}.progress--sm{--_height: calc(0.5rem * 1)}.progress--lg{--_height: calc(0.5rem * 2)}}@layer components.styles{.progress{position:relative;block-size:var(--_height);overflow:hidden;background:var(--_bg);border-radius:var(--_radius)}.progress__bar{block-size:100%;background:var(--_fill);border-radius:var(--_radius);transition:inline-size var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease)}.progress--indeterminate .progress__bar{inline-size:30%;animation:progress-indeterminate 1.5s infinite ease-in-out}@keyframes progress-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}.progress--striped .progress__bar{background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-size:0.5rem 0.5rem}.progress--animated .progress__bar{animation:progress-stripes 1s linear infinite}@keyframes progress-stripes{from{background-position:0.5rem 0}to{background-position:0 0}}.progress--success{--_fill: var(--ui-color-success)}.progress--warning{--_fill: var(--ui-color-warning)}.progress--danger{--_fill: var(--ui-color-danger)}}@layer components.tokens{.skeleton{--_bg: var(--ui-skeleton-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));--_shimmer: var(--ui-skeleton-shimmer, rgb(255 255 255 / 0.5));--_radius: var(--ui-skeleton-radius, var(--ui-radius-sm, calc(0.5rem / 2)))}}@layer components.styles{.skeleton{display:block;position:relative;overflow:hidden;background:var(--_bg);border-radius:var(--_radius)}.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, transparent 0%, var(--_shimmer) 50%, transparent 100%);animation:skeleton-shimmer 1.5s infinite;transform:translateX(-100%)}@keyframes skeleton-shimmer{100%{transform:translateX(100%)}}.skeleton--text{block-size:calc(0.5rem*2);inline-size:100%}.skeleton--heading{block-size:calc(0.5rem*3);inline-size:60%}.skeleton--circle{block-size:calc(0.5rem*5);inline-size:calc(0.5rem*5);border-radius:50%}.skeleton--rect{block-size:calc(0.5rem*20);inline-size:100%}.skeleton--static::after{animation:none}.skeleton--pulse{animation:skeleton-pulse 1.5s infinite ease-in-out}.skeleton--pulse::after{display:none}@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:.5}}}@layer components.tokens{.spinner{--_size: var(--ui-spinner-size, calc(var(--unit) * 4));--_border-width: var(--ui-spinner-border-width, var(--ui-border-width-md));--_color: var(--ui-spinner-color, currentcolor);--_track-color: var(--ui-spinner-track-color, transparent);--_duration: var(--ui-spinner-duration, 750ms)}.spinner--xs{--_size: var(--ui-spinner-size-xs, calc(var(--unit) * 2));--_border-width: var(--ui-spinner-border-width-xs, var(--ui-border-width-sm))}.spinner--sm{--_size: var(--ui-spinner-size-sm, calc(var(--unit) * 3));--_border-width: var(--ui-spinner-border-width-sm, var(--ui-border-width-md))}.spinner--lg{--_size: var(--ui-spinner-size-lg, calc(var(--unit) * 5));--_border-width: var(--ui-spinner-border-width-lg, var(--ui-border-width-md))}.spinner--xl{--_size: var(--ui-spinner-size-xl, calc(var(--unit) * 6));--_border-width: var(--ui-spinner-border-width-xl, var(--ui-border-width-lg))}}@layer components.styles{.spinner{display:inline-block;flex-shrink:0;box-sizing:border-box;block-size:var(--_size);inline-size:var(--_size);vertical-align:middle;border:var(--_border-width) solid var(--_track-color);border-radius:50%;border-block-start-color:var(--_color);animation:spinner-rotate var(--_duration) linear infinite}@keyframes spinner-rotate{to{transform:rotate(360deg)}}}@layer components.tokens{.toast-viewport{--_gap: var(--ui-toast-viewport-gap, calc(0.5rem * 1));--_padding: var(--ui-toast-viewport-padding, calc(0.5rem * 2));--_max-width: var(--ui-toast-viewport-max-width, 420px)}.toast{--_padding: var(--ui-toast-padding, calc(0.5rem * 2));--_gap: var(--ui-toast-gap, calc(0.5rem * 1));--_radius: var(--ui-toast-radius, var(--ui-radius-md, 0.5rem));--_bg: var(--ui-toast-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_border-color: var(--ui-toast-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--_shadow: var(--ui-toast-shadow, var(--shadow-lg))}.toast--success{--_border-color: var(--ui-color-success)}.toast--warning{--_border-color: var(--ui-color-warning)}.toast--danger{--_border-color: var(--ui-color-danger)}.toast--info{--_border-color: var(--ui-color-primary)}}@layer components.styles{.toast-viewport{display:flex;flex-direction:column;gap:var(--_gap);position:fixed;z-index:var(--ui-z-toast, 1000);max-inline-size:var(--_max-width);padding:var(--_padding);pointer-events:none;list-style:none}.toast-viewport--top-end{inset-block-start:0;inset-inline-end:0}.toast-viewport--top-start{inset-block-start:0;inset-inline-start:0}.toast-viewport--bottom-end{inset-block-end:0;inset-inline-end:0}.toast-viewport--bottom-start{inset-block-end:0;inset-inline-start:0}.toast-viewport--top-center{inset-block-start:0;inset-inline-start:50%;transform:translateX(-50%)}.toast-viewport--bottom-center{inset-block-end:0;inset-inline-start:50%;transform:translateX(-50%)}.toast{display:flex;align-items:flex-start;gap:var(--_gap);padding:var(--_padding);background:var(--_bg);border-radius:var(--_radius);outline:var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);box-shadow:var(--_shadow);pointer-events:auto;outline-offset:calc(var(--ui-border-width-sm, 0.0625rem)*-1)}.toast__icon{flex-shrink:0}.toast__content{flex:1;min-inline-size:0}.toast__title{margin:0;font-weight:var(--ui-weight-medium, 500);line-height:var(--ui-row-1, 1rem)}.toast__description{margin:0;font-size:var(--ui-font-size-sm, 0.875rem);line-height:var(--ui-row-1, 1rem);color:var(--ui-color-text-muted, hsl(220, 10%, 45%))}.toast__action{flex-shrink:0}.toast__close{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;block-size:var(--ui-row-1, 1rem);inline-size:var(--ui-row-1, 1rem);padding:0;color:var(--ui-color-text-muted, hsl(220, 10%, 45%));background:none;border:none;cursor:pointer}.toast__close:hover{color:var(--ui-color-text, hsl(220, 10%, 10%))}.toast[data-state=open]{animation:toast-slide-in var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out)}.toast[data-state=closed]{animation:toast-slide-out var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in)}@keyframes toast-slide-in{from{opacity:0;transform:translateX(100%)}}@keyframes toast-slide-out{to{opacity:0;transform:translateX(100%)}}}@layer components.tokens{.checkbox{--_size: var(--ui-checkbox-size, calc(0.5rem * 2));--_radius: var(--ui-checkbox-radius, var(--ui-radius-sm, 0.25rem));--_bg: var(--ui-checkbox-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_bg-checked: var(--ui-checkbox-bg-checked, var(--ui-color-primary, oklch(55% 0.22 250deg)));--_border-color: var(--ui-checkbox-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--_border-color-focus: var(--ui-checkbox-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--_check-color: var(--ui-checkbox-check-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}.checkbox--lg{--_size: var(--ui-checkbox-size-lg, calc(0.5rem * 3))}.checkbox--error{--_border-color: var(--ui-checkbox-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));--_border-color-focus: var(--ui-checkbox-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)))}}@layer components.styles{.checkbox{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;block-size:var(--_size);inline-size:var(--_size);margin:0;vertical-align:middle;background:var(--_bg);border:var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);border-radius:var(--_radius);cursor:pointer;appearance:none;transition:background-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease)}.checkbox::before{content:"";block-size:65%;inline-size:65%;background-color:var(--_check-color);opacity:0;clip-path:polygon(20% 55%, 40% 75%, 80% 25%, 85% 30%, 40% 85%, 15% 60%);transition:opacity var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease)}.checkbox:hover:not(:disabled){border-color:var(--_border-color-focus)}.checkbox:focus-visible{border-color:var(--_border-color-focus);outline:none;box-shadow:0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg))}.checkbox:checked{background:var(--_bg-checked);border-color:var(--_bg-checked)}.checkbox:checked::before{opacity:1}.checkbox:indeterminate{background:var(--_bg-checked);border-color:var(--_bg-checked)}.checkbox:indeterminate::before{opacity:1;clip-path:polygon(15% 45%, 85% 45%, 85% 55%, 15% 55%)}.checkbox:disabled{opacity:.5;cursor:not-allowed}}@layer components.tokens{.field{--_gap: var(--ui-field-gap, 0)}}@layer components.styles{.field{display:flex;flex-direction:column;gap:var(--_gap)}.field__control{display:flex;flex-direction:column}.field--horizontal{flex-direction:row;flex-wrap:wrap;align-items:flex-start}.field--horizontal>.field__label{flex:0 0 auto;min-inline-size:calc(0.5rem*15);padding-block-start:calc(0.5rem*1)}.field--horizontal>.field__control{flex:1 1 0;min-inline-size:calc(0.5rem*20)}}@layer components.tokens{.form-error{--_color: var(--ui-form-error-color, var(--ui-color-danger));--_size: var(--ui-form-error-size, var(--ui-font-size-sm, 0.875rem));--_gap: var(--ui-form-error-gap, 0)}}@layer components.styles{.form-error{display:flex;align-items:flex-start;gap:var(--_gap);margin-block-start:var(--_gap);font-size:var(--_size);line-height:var(--ui-leading-tight-sm, var(--ui-row-1));color:var(--_color)}.form-error__icon{flex-shrink:0}}@layer components.tokens{.form-helper{--_color: var(--ui-form-helper-color, var(--ui-color-text-muted));--_size: var(--ui-form-helper-size, var(--ui-font-size-sm, 0.875rem));--_gap: var(--ui-form-helper-gap, 0)}}@layer components.styles{.form-helper{display:block;margin-block-start:var(--_gap);font-size:var(--_size);line-height:var(--ui-leading-tight-sm, var(--ui-row-1));color:var(--_color)}}@layer components.tokens{.input{--_height: var(--ui-input-height, var(--ui-row-2, 2rem));--_padding-x: var(--ui-input-padding-x, var(--ui-space-1, 0.5rem));--_font-size: var(--ui-input-font-size, var(--ui-font-size-sm, 0.875rem));--_radius: var(--ui-input-radius, var(--ui-radius-md, 0.5rem));--_bg: var(--ui-input-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_border-color: var(--ui-input-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--_border-color-focus: var(--ui-input-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--_text: var(--ui-input-text, var(--ui-color-text, hsl(220, 10%, 10%)));--_placeholder: var(--ui-input-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)))}.input--sm{--_height: var(--ui-input-height-sm, calc(1rem * 1.5));--_font-size: var(--ui-input-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.input--lg{--_height: var(--ui-input-height-lg, calc(1rem * 2.5));--_padding-x: var(--ui-input-padding-x-lg, var(--ui-space-2, 1rem));--_font-size: var(--ui-input-font-size-lg, var(--ui-font-size-md, 1rem))}.input--filled{--_bg: var(--ui-input-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--_border-color: transparent}.input--ghost{--_bg: transparent;--_border-color: transparent}.input--error{--_border-color: var(--ui-input-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));--_border-color-focus: var(--ui-input-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)))}.input--success{--_border-color: var(--ui-input-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));--_border-color-focus: var(--ui-input-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)))}}@layer components.styles{.input{display:inline-flex;align-items:center;block-size:var(--_height);padding-inline:var(--_padding-x);font-family:inherit;font-size:var(--_font-size);line-height:1;color:var(--_text);background:var(--_bg);border:var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);border-radius:var(--_radius);transition:border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease)}.input::placeholder{color:var(--_placeholder)}.input:hover:not(:disabled,:focus){border-color:var(--ui-color-border-strong, hsl(220, 10%, 80%))}.input:focus,.input--focus{border-color:var(--_border-color-focus);outline:none;box-shadow:0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg))}.input:disabled,.input--disabled{opacity:.5;cursor:not-allowed}.input:read-only{background:var(--ui-color-bg-subtle, hsl(220, 10%, 96%))}.input--block{inline-size:100%}.input-group{display:inline-flex;align-items:stretch;position:relative}.input-group .input{flex:1}.input-group--has-prefix .input{padding-inline-start:calc(var(--_height) + var(--ui-space-half, 0.25rem))}.input-group--has-suffix .input{padding-inline-end:calc(var(--_height) + var(--ui-space-half, 0.25rem))}.input-group__addon{display:flex;align-items:center;justify-content:center;position:absolute;inset-block:0;inline-size:var(--_height, 2rem);color:var(--ui-color-text-muted, hsl(220, 10%, 45%));pointer-events:none}.input-group__addon--start{inset-inline-start:0}.input-group__addon--end{inset-inline-end:0}.input-group__addon--interactive{cursor:pointer;pointer-events:auto}}@layer components.tokens{.label{--_font-size: var(--ui-label-font-size, var(--ui-font-size-sm, 0.875rem));--_color: var(--ui-label-color, var(--ui-color-text, hsl(220, 10%, 10%)));--_required-color: var(--ui-label-required-color, var(--ui-color-danger, oklch(60% 0.22 25deg)))}.label--lg{--_font-size: var(--ui-label-font-size-lg, var(--ui-font-size-md, 1rem))}}@layer components.styles{.label{display:inline-flex;align-items:baseline;gap:0;font-size:var(--_font-size);font-weight:var(--ui-weight-medium, 500);line-height:var(--ui-leading-tight-sm, var(--ui-row-1));color:var(--_color);cursor:pointer}.label[aria-disabled=true]{opacity:.5;cursor:not-allowed}.label__required{color:var(--_required-color)}.label__optional{font-weight:var(--ui-weight-normal, 400);color:var(--ui-color-text-muted, hsl(220, 10%, 45%))}}@layer components.tokens{.radio{--_size: var(--ui-radio-size, calc(0.5rem * 2));--_bg: var(--ui-radio-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_bg-checked: var(--ui-radio-bg-checked, var(--ui-color-primary, oklch(55% 0.22 250deg)));--_border-color: var(--ui-radio-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--_border-color-focus: var(--ui-radio-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--_dot-color: var(--ui-radio-dot-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}.radio--lg{--_size: var(--ui-radio-size-lg, calc(0.5rem * 3))}.radio--error{--_border-color: var(--ui-radio-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));--_border-color-focus: var(--ui-radio-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)))}}@layer components.styles{.radio{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;block-size:var(--_size);inline-size:var(--_size);margin:0;vertical-align:middle;background:var(--_bg);border:var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);border-radius:50%;cursor:pointer;appearance:none;transition:background-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease)}.radio::before{content:"";block-size:50%;inline-size:50%;background-color:var(--_dot-color);border-radius:50%;opacity:0;transform:scale(0);transition:opacity var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease)}.radio:hover:not(:disabled){border-color:var(--_border-color-focus)}.radio:focus-visible{border-color:var(--_border-color-focus);outline:none;box-shadow:0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg))}.radio:checked{background:var(--_bg-checked);border-color:var(--_bg-checked)}.radio:checked::before{opacity:1;transform:scale(1)}.radio:disabled{opacity:.5;cursor:not-allowed}}@layer components.tokens{.select{--_height: var(--ui-select-height, var(--ui-row-2, 2rem));--_padding-x: var(--ui-select-padding-x, var(--ui-space-1, 0.5rem));--_font-size: var(--ui-select-font-size, var(--ui-font-size-sm, 0.875rem));--_radius: var(--ui-select-radius, var(--ui-radius-md, 0.5rem));--_bg: var(--ui-select-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_border-color: var(--ui-select-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--_border-color-focus: var(--ui-select-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--_text: var(--ui-select-text, var(--ui-color-text, hsl(220, 10%, 10%)));--_icon-color: var(--ui-select-icon-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)))}.select--sm{--_height: var(--ui-select-height-sm, calc(1rem * 1.5));--_font-size: var(--ui-select-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.select--lg{--_height: var(--ui-select-height-lg, calc(1rem * 2.5));--_padding-x: var(--ui-select-padding-x-lg, var(--ui-space-2, 1rem));--_font-size: var(--ui-select-font-size-lg, var(--ui-font-size-md, 1rem))}.select--filled{--_bg: var(--ui-select-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--_border-color: transparent}.select--ghost{--_bg: transparent;--_border-color: transparent}.select--error{--_border-color: var(--ui-select-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));--_border-color-focus: var(--ui-select-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)))}.select--success{--_border-color: var(--ui-select-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));--_border-color-focus: var(--ui-select-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)))}}@layer components.styles{.select{display:inline-block;block-size:var(--_height);padding-inline-start:var(--_padding-x);padding-inline-end:calc(var(--_height) - var(--ui-space-half, 0.25rem));font-family:inherit;font-size:var(--_font-size);line-height:1;color:var(--_text);background-color:var(--_bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");border:var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);border-radius:var(--_radius);cursor:pointer;appearance:none;transition:border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);background-repeat:no-repeat;background-position:right var(--ui-space-half, 0.25rem) center;background-size:calc(var(--_height)*.5)}.select:hover:not(:disabled,:focus){border-color:var(--ui-color-border-strong, hsl(220, 10%, 80%))}.select:focus,.select--focus{border-color:var(--_border-color-focus);outline:none;box-shadow:0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg))}.select:disabled,.select--disabled{opacity:.5;cursor:not-allowed}.select--block{inline-size:100%}.select:invalid,.select--placeholder{color:var(--ui-color-text-muted, hsl(220, 10%, 45%))}}@layer components.tokens{.textarea{--_min-height: var(--ui-textarea-min-height, calc(1rem * 4));--_padding-x: var(--ui-textarea-padding-x, var(--ui-space-1, 0.5rem));--_padding-y: var(--ui-textarea-padding-y, var(--ui-space-1, 0.5rem));--_font-size: var(--ui-textarea-font-size, var(--ui-font-size-sm, 0.875rem));--_radius: var(--ui-textarea-radius, var(--ui-radius-md, 0.5rem));--_bg: var(--ui-textarea-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_border-color: var(--ui-textarea-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--_border-color-focus: var(--ui-textarea-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--_text: var(--ui-textarea-text, var(--ui-color-text, hsl(220, 10%, 10%)));--_placeholder: var(--ui-textarea-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)))}.textarea--sm{--_min-height: var(--ui-textarea-min-height-sm, calc(1rem * 3));--_font-size: var(--ui-textarea-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.textarea--lg{--_min-height: var(--ui-textarea-min-height-lg, calc(1rem * 6));--_padding-x: var(--ui-textarea-padding-x-lg, var(--ui-space-2, 1rem));--_padding-y: var(--ui-textarea-padding-y-lg, var(--ui-space-2, 1rem));--_font-size: var(--ui-textarea-font-size-lg, var(--ui-font-size-md, 1rem))}.textarea--filled{--_bg: var(--ui-textarea-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--_border-color: transparent}.textarea--ghost{--_bg: transparent;--_border-color: transparent}.textarea--error{--_border-color: var(--ui-textarea-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));--_border-color-focus: var(--ui-textarea-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)))}.textarea--success{--_border-color: var(--ui-textarea-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));--_border-color-focus: var(--ui-textarea-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)))}}@layer components.styles{.textarea{display:block;box-sizing:border-box;inline-size:100%;min-block-size:var(--_min-height);padding-block:var(--_padding-y);padding-inline:var(--_padding-x);font-family:inherit;font-size:var(--_font-size);line-height:var(--ui-row-1, 1rem);color:var(--_text);background:var(--_bg);border:none;border-radius:var(--_radius);outline:var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);transition:border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);outline-offset:calc(var(--ui-border-width-sm, 0.0625rem)*-1);resize:vertical}.textarea::placeholder{color:var(--_placeholder)}.textarea:hover:not(:disabled,:focus){outline-color:var(--ui-color-border-strong, hsl(220, 10%, 80%))}.textarea:focus,.textarea--focus{outline-color:var(--_border-color-focus);box-shadow:0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg))}.textarea:disabled,.textarea--disabled{opacity:.5;cursor:not-allowed;resize:none}.textarea:read-only{background:var(--ui-color-bg-subtle, hsl(220, 10%, 96%));resize:none}.textarea--resize-none{resize:none}.textarea--resize-horizontal{resize:horizontal}.textarea--resize-both{resize:both}}@layer components.tokens{.toggle{--_track-width: var(--ui-toggle-track-width, calc(0.5rem * 5));--_track-height: var(--ui-toggle-track-height, calc(0.5rem * 3));--_track-bg: var(--ui-toggle-track-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));--_track-bg-checked: var(--ui-toggle-track-bg-checked, var(--ui-color-primary));--_track-radius: var(--ui-toggle-track-radius, calc(0.5rem * 1.5));--_thumb-size: var(--ui-toggle-thumb-size, calc(0.5rem * 2.5));--_thumb-bg: var(--ui-toggle-thumb-bg, white);--_thumb-offset: var(--ui-toggle-thumb-offset, calc(0.5rem / 4))}.toggle--sm{--_track-width: calc(0.5rem * 4);--_track-height: calc(0.5rem * 2);--_track-radius: 0.5rem;--_thumb-size: calc(0.5rem * 1.5)}.toggle--lg{--_track-width: calc(0.5rem * 6);--_track-height: calc(0.5rem * 4);--_track-radius: calc(0.5rem * 2);--_thumb-size: calc(0.5rem * 3.5)}}@layer components.styles{.toggle{display:inline-flex;flex-shrink:0;align-items:center;position:relative;block-size:var(--_track-height);inline-size:var(--_track-width);background:var(--_track-bg);border-radius:var(--_track-radius);cursor:pointer;transition:background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}.toggle__input{position:absolute;inset:0;block-size:100%;inline-size:100%;margin:0;opacity:0;cursor:pointer}.toggle__track{position:absolute;inset:0;background:var(--_track-bg);border-radius:var(--_track-radius);transition:background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}.toggle__thumb{position:absolute;inset-block-start:var(--_thumb-offset);inset-inline-start:var(--_thumb-offset);block-size:var(--_thumb-size);inline-size:var(--_thumb-size);background:var(--_thumb-bg);border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}.toggle__input:checked~.toggle__track{background:var(--_track-bg-checked)}.toggle__input:checked~.toggle__thumb{transform:translateX(calc(var(--_track-width) - var(--_thumb-size) - var(--_thumb-offset) * 2))}.toggle__input:focus-visible~.toggle__track{outline:2px solid var(--ui-color-focus, var(--ui-color-primary));outline-offset:calc(0.5rem/4)}.toggle__input:disabled~.toggle__track,.toggle__input:disabled~.toggle__thumb{opacity:.5;cursor:not-allowed}.toggle:has(.toggle__input:disabled){cursor:not-allowed}}@layer components.tokens{.divider{--_color: var(--ui-divider-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));--_line-size: var(--ui-divider-line-size, 1px);--_height: var(--ui-divider-height, 0.5rem);--_gap: var(--ui-divider-gap, calc(0.5rem * 2))}}@layer components.styles{.divider{display:flex;align-items:center;block-size:var(--_height);margin:var(--_gap) 0;font-size:var(--ui-font-size-sm, 0.875rem);line-height:1;color:var(--ui-color-text-muted)}.divider::before,.divider::after{content:"";flex:1;block-size:var(--_line-size);background:var(--_color)}.divider:not(:empty){--_height: var(--ui-row-1, 1rem)}.divider:not(:empty)::before{margin-inline-end:calc(0.5rem*2)}.divider:not(:empty)::after{margin-inline-start:calc(0.5rem*2)}.divider:empty::after{display:none}.divider--vertical{flex-direction:column;align-self:stretch;margin:0 var(--_gap);writing-mode:vertical-rl}.divider--vertical::before,.divider--vertical::after{flex:1;block-size:auto;inline-size:var(--_size)}.divider--start::before{display:none}.divider--start:not(:empty)::after{margin-inline-start:calc(0.5rem*2)}.divider--end::after{display:none}.divider--end:not(:empty)::before{margin-inline-end:calc(0.5rem*2)}.divider--dashed::before,.divider--dashed::after{background:repeating-linear-gradient(90deg, var(--_color) 0, var(--_color) calc(0.5rem / 2), transparent calc(0.5rem / 2), transparent 0.5rem)}.divider--vertical.divider--dashed::before,.divider--vertical.divider--dashed::after{background:repeating-linear-gradient(180deg, var(--_color) 0, var(--_color) calc(0.5rem / 2), transparent calc(0.5rem / 2), transparent 0.5rem)}}@layer components.tokens{.breadcrumb{--_height: var(--ui-breadcrumb-height, var(--ui-row-1, 1rem));--_gap: var(--ui-breadcrumb-gap, calc(0.5rem * 1));--_separator-color: var(--ui-breadcrumb-separator-color, var(--ui-color-text-muted));--_link-color: var(--ui-breadcrumb-link-color, var(--ui-color-text-muted));--_current-color: var(--ui-breadcrumb-current-color, var(--ui-color-text))}}@layer components.styles{.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_gap);block-size:var(--_height);padding:0;margin:0;font-size:var(--ui-font-size-sm, 0.875rem);line-height:1;list-style:none}.breadcrumb__item{display:flex;align-items:center;gap:var(--_gap);block-size:var(--_height)}.breadcrumb__item:not(:last-child)::after{content:var(--ui-breadcrumb-separator, "/");color:var(--_separator-color)}.breadcrumb__link{text-decoration:none;color:var(--_link-color);transition:color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}.breadcrumb__link:hover{text-decoration:underline;color:var(--ui-color-primary)}.breadcrumb__item:last-child .breadcrumb__link,.breadcrumb__current{color:var(--_current-color);pointer-events:none}.breadcrumb__item--hidden{display:none}.breadcrumb__ellipsis{color:var(--_separator-color)}}@layer components.tokens{.menu{--_min-width: var(--ui-menu-min-width, calc(0.5rem * 16));--_max-height: var(--ui-menu-max-height, calc(0.5rem * 40));--_padding: var(--ui-menu-padding, calc(0.5rem * 1));--_radius: var(--ui-menu-radius, var(--ui-radius-md, 0.5rem));--_bg: var(--ui-menu-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_border-color: var(--ui-menu-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--_shadow: var(--ui-menu-shadow, var(--shadow-lg));--_item-padding: var(--ui-menu-item-padding, calc(0.5rem * 1) calc(0.5rem * 2));--_item-radius: var(--ui-menu-item-radius, var(--ui-radius-sm, 0.25rem));--_item-bg-hover: var(--ui-menu-item-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)))}}@layer components.styles{.menu{min-inline-size:var(--_min-width);max-block-size:var(--_max-height);padding:var(--_padding);overflow-y:auto;background:var(--_bg);border-radius:var(--_radius);outline:var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);box-shadow:var(--_shadow);outline-offset:calc(var(--ui-border-width-sm, 0.0625rem)*-1)}.menu__group{padding:0;margin:0;list-style:none}.menu__label{padding:var(--_item-padding);font-size:var(--ui-font-size-xs, 0.75rem);font-weight:var(--ui-weight-medium, 500);line-height:var(--ui-row-1, 1rem);letter-spacing:.05em;text-transform:uppercase;color:var(--ui-color-text-muted, hsl(220, 10%, 45%))}.menu__item{display:flex;align-items:center;gap:calc(0.5rem*1);padding:var(--_item-padding);font-size:var(--ui-font-size-sm, 0.875rem);line-height:var(--ui-row-1, 1rem);text-decoration:none;color:var(--ui-color-text, hsl(220, 10%, 10%));background:rgba(0,0,0,0);border:none;border-radius:var(--_item-radius);cursor:pointer;transition:background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}.menu__item:hover,.menu__item:focus-visible{background:var(--_item-bg-hover);outline:none}.menu__item--danger{color:var(--ui-color-danger, oklch(60% 0.22 25deg))}.menu__item--danger:hover,.menu__item--danger:focus-visible{color:var(--ui-color-danger, oklch(60% 0.22 25deg))}.menu__item--disabled,.menu__item[aria-disabled=true]{opacity:.5;pointer-events:none}.menu__item-icon{flex-shrink:0;block-size:calc(0.5rem*2);inline-size:calc(0.5rem*2)}.menu__item-shortcut{margin-inline-start:auto;font-size:var(--ui-font-size-xs, 0.75rem);color:var(--ui-color-text-muted, hsl(220, 10%, 45%))}.menu__separator{display:flex;align-items:center;block-size:calc(0.5rem*2);margin:0}.menu__separator::before{content:"";flex:1;block-size:var(--ui-border-width-sm, 1px);background:var(--ui-color-border, hsl(220, 10%, 90%))}.menu__item--check,.menu__item--radio{position:relative;padding-inline-start:calc(0.5rem*4)}.menu__item-indicator{display:flex;align-items:center;justify-content:center;position:absolute;inset-inline-start:calc(0.5rem*1);block-size:calc(0.5rem*2);inline-size:calc(0.5rem*2)}}@layer components.tokens{.nav{--_gap: var(--ui-nav-gap, var(--ui-space-1, 0.5rem));--_item-height: var(--ui-nav-item-height, var(--ui-row-2, 2rem));--_item-padding-x: var(--ui-nav-item-padding-x, var(--ui-space-2, 1rem));--_item-font-size: var(--ui-nav-item-font-size, var(--ui-font-size-sm, 0.875rem));--_item-font-weight: var(--ui-nav-item-font-weight, var(--ui-weight-medium, 500));--_item-color: var(--ui-nav-item-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--_item-color-hover: var(--ui-nav-item-color-hover, var(--ui-color-text, hsl(220, 10%, 10%)));--_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-primary, oklch(55% 0.22 250deg)));--_item-radius: var(--ui-nav-item-radius, var(--ui-radius-sm, 0.25rem));--_border-color: var(--ui-nav-border-color, var(--ui-color-border, hsl(220, 10%, 90%)))}.nav--pills{--_item-bg-hover: var(--ui-nav-item-bg-hover, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--_item-bg-active: var(--ui-nav-item-bg-active, var(--ui-color-primary, oklch(55% 0.22 250deg)));--_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}}@layer components.styles{.nav__list{display:flex;align-items:stretch;gap:var(--_gap);box-sizing:border-box;block-size:var(--_item-height);padding:0;margin:0;list-style:none;box-shadow:inset 0 calc(var(--ui-border-width-sm, 0.0625rem)*-1) 0 var(--_border-color)}.nav__item{display:inline-flex;align-items:center;box-sizing:border-box;block-size:var(--_item-height);padding-inline:var(--_item-padding-x);font-family:var(--ui-font-sans, Noto Sans, system-ui, -apple-system, sans-serif);font-size:var(--_item-font-size);font-weight:var(--_item-font-weight);line-height:1;text-decoration:none;white-space:nowrap;color:var(--_item-color);background:rgba(0,0,0,0);border:none;box-shadow:inset 0 calc(var(--ui-border-width-md, 0.125rem)*-1) 0 rgba(0,0,0,0);cursor:pointer;transition:color var(--ui-duration-base) var(--ui-ease-default),background var(--ui-duration-base) var(--ui-ease-default),box-shadow var(--ui-duration-base) var(--ui-ease-default)}.nav__item:hover{color:var(--_item-color-hover)}.nav__item--active{color:var(--_item-color-active);box-shadow:inset 0 calc(var(--ui-border-width-md, 0.125rem)*-1) 0 var(--_item-color-active)}.nav__item--disabled{opacity:.5;pointer-events:none}.nav--pills .nav__list{box-shadow:none}.nav--pills .nav__item{border-radius:var(--_item-radius);box-shadow:none}.nav--pills .nav__item:hover{background:var(--_item-bg-hover)}.nav--pills .nav__item--active{color:var(--_item-color-active);background:var(--_item-bg-active)}.nav--vertical .nav__list{flex-direction:column;align-items:stretch;block-size:auto;box-shadow:inset calc(var(--ui-border-width-sm, 0.0625rem)*-1) 0 0 var(--_border-color)}.nav--vertical .nav__item{box-shadow:inset calc(var(--ui-border-width-md, 0.125rem)*-1) 0 0 rgba(0,0,0,0)}.nav--vertical .nav__item--active{box-shadow:inset calc(var(--ui-border-width-md, 0.125rem)*-1) 0 0 var(--_item-color-active)}.nav--vertical.nav--pills .nav__list{box-shadow:none}.nav--vertical.nav--pills .nav__item{box-shadow:none}}@layer components.tokens{.pagination{--_gap: var(--ui-pagination-gap, calc(0.5rem * 0.5));--_item-size: var(--ui-pagination-item-size, calc(0.5rem * 4));--_item-radius: var(--ui-pagination-item-radius, var(--ui-radius-sm, 0.25rem));--_item-bg: var(--ui-pagination-item-bg, transparent);--_item-bg-hover: var(--ui-pagination-item-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));--_item-bg-active: var(--ui-pagination-item-bg-active, var(--ui-color-primary));--_item-color: var(--ui-pagination-item-color, var(--ui-color-text, hsl(220, 10%, 10%)));--_item-color-active: var(--ui-pagination-item-color-active, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}}@layer components.styles{.pagination{display:flex;align-items:center;gap:var(--_gap)}.pagination__list{display:flex;align-items:center;gap:var(--_gap);padding:0;margin:0;list-style:none}.pagination__item{display:flex}.pagination__link{display:inline-flex;align-items:center;justify-content:center;block-size:var(--_item-size);min-inline-size:var(--_item-size);padding-inline:calc(0.5rem*1);font-size:var(--ui-font-size-sm, 0.875rem);text-decoration:none;color:var(--_item-color);background:var(--_item-bg);border-radius:var(--_item-radius);transition:background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease),color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}.pagination__link:hover{background:var(--_item-bg-hover)}.pagination__link[aria-current=page],.pagination__link--active{color:var(--_item-color-active);background:var(--_item-bg-active);pointer-events:none}.pagination__link[aria-disabled=true],.pagination__link--disabled{opacity:.5;pointer-events:none}.pagination__prev,.pagination__next{display:inline-flex;align-items:center;gap:calc(0.5rem*.5);padding-inline:calc(0.5rem*1.5)}.pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;block-size:var(--_item-size);min-inline-size:var(--_item-size);color:var(--ui-color-text-muted, hsl(220, 10%, 45%))}.pagination--sm{--_item-size: calc(0.5rem * 3);--_gap: calc(0.5rem * 0.25)}.pagination--lg{--_item-size: calc(0.5rem * 5);--_gap: calc(0.5rem * 0.75)}}@layer components.tokens{.tabs{--_border-color: var(--ui-tabs-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--_tab-padding-x: var(--ui-tabs-tab-padding-x, var(--ui-space-2, 1rem));--_tab-padding-y: var(--ui-tabs-tab-padding-y, var(--ui-space-1, 0.5rem));--_tab-bg: var(--ui-tabs-tab-bg, transparent);--_tab-bg-active: var(--ui-tabs-tab-bg-active, var(--ui-color-bg, hsl(220, 10%, 98%)));--_panel-padding: var(--ui-tabs-panel-padding, var(--ui-space-3, 1.5rem))}}@layer components.styles{.tabs__list{display:flex;align-items:stretch;gap:var(--ui-space-1, 0.5rem);box-sizing:border-box;block-size:var(--ui-row-2, 2rem);box-shadow:inset 0 calc(var(--ui-border-width-sm, 0.0625rem)*-1) 0 var(--_border-color)}.tabs__tab{display:inline-flex;align-items:center;box-sizing:border-box;block-size:var(--ui-row-2, 2rem);padding-inline:var(--_tab-padding-x);margin:0;font-family:var(--ui-font-sans, Noto Sans, system-ui, -apple-system, sans-serif);font-size:var(--ui-font-size-sm, 0.875rem);font-weight:var(--ui-weight-medium, 500);line-height:1;color:var(--ui-color-text-muted, hsl(220, 10%, 45%));background:var(--_tab-bg);border:none;box-shadow:inset 0 calc(var(--ui-border-width-md, 0.125rem)*-1) 0 rgba(0,0,0,0);cursor:pointer;transition:color var(--ui-duration-base) var(--ui-ease-default),box-shadow var(--ui-duration-base) var(--ui-ease-default)}.tabs__tab:hover{color:var(--ui-color-text, hsl(220, 10%, 10%))}.tabs__tab--active{color:var(--ui-color-primary, oklch(55% 0.22 250deg));background:var(--_tab-bg-active);box-shadow:inset 0 calc(var(--ui-border-width-md, 0.125rem)*-1) 0 var(--ui-color-primary, oklch(55% 0.22 250deg))}.tabs__panel{display:none;padding:var(--_panel-padding);line-height:var(--ui-row-1, 1rem)}.tabs__panel--active{display:block}}@layer components.tokens{.dialog{--_header-padding: var(--ui-dialog-header-padding, calc(0.5rem * 2) calc(0.5rem * 3));--_body-padding: var(--ui-dialog-body-padding, calc(0.5rem * 3));--_footer-padding: var(--ui-dialog-footer-padding, calc(0.5rem * 2) calc(0.5rem * 3));--_border-color: var(--ui-dialog-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)))}}@layer components.styles{.dialog .modal__content{padding:0}.dialog__header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:calc(0.5rem*2);padding:var(--_header-padding);border-block-end:1px solid var(--_border-color)}.dialog__title{margin:0;font-size:var(--ui-font-size-lg, 1.25rem);font-weight:var(--ui-weight-semibold, 600);line-height:calc(0.5rem*3)}.dialog__close{flex-shrink:0;margin-inline-start:auto}.dialog__body{flex:1 1 auto;padding:var(--_body-padding);overflow-y:auto}.dialog__footer{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;gap:calc(0.5rem*1.5);padding:var(--_footer-padding);border-block-start:1px solid var(--_border-color)}.dialog--borderless .dialog__header{border-block-end:none}.dialog--borderless .dialog__footer{border-block-start:none}}@layer components.tokens{.drawer{--_size: var(--ui-drawer-size, calc(0.5rem * 40));--_max-size: var(--ui-drawer-max-size, 90%);--_bg: var(--ui-drawer-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_shadow: var(--ui-drawer-shadow, var(--shadow-lg));--_header-padding: var(--ui-drawer-header-padding, calc(0.5rem * 2) calc(0.5rem * 3));--_body-padding: var(--ui-drawer-body-padding, calc(0.5rem * 3));--_footer-padding: var(--ui-drawer-footer-padding, calc(0.5rem * 2) calc(0.5rem * 3));--_border-color: var(--ui-drawer-border-color, var(--ui-color-border, hsl(220, 10%, 90%)))}.drawer--sm{--_size: calc(0.5rem * 30)}.drawer--lg{--_size: calc(0.5rem * 50)}.drawer--full{--_size: 100%;--_max-size: 100%}}@layer components.styles{.drawer-overlay{position:fixed;inset:0;z-index:var(--ui-z-drawer, 900);background:var(--ui-overlay-bg, rgba(0, 0, 0, 0.5))}.drawer-overlay[data-state=open]{animation:drawer-overlay-in var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out)}.drawer-overlay[data-state=closed]{animation:drawer-overlay-out var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in)}@keyframes drawer-overlay-in{from{opacity:0}}@keyframes drawer-overlay-out{to{opacity:0}}.drawer{display:flex;flex-direction:column;position:fixed;z-index:var(--ui-z-drawer, 900);background:var(--_bg);box-shadow:var(--_shadow)}.drawer--end{inset-block:0;inset-inline-end:0;inline-size:var(--_size);max-inline-size:var(--_max-size);box-shadow:calc(var(--ui-border-width-sm, 1px)*-1) 0 0 var(--_border-color)}.drawer--start{inset-block:0;inset-inline-start:0;inline-size:var(--_size);max-inline-size:var(--_max-size);box-shadow:var(--ui-border-width-sm, 1px) 0 0 var(--_border-color)}.drawer--top{inset-block-start:0;inset-inline:0;block-size:var(--_size);max-block-size:var(--_max-size);box-shadow:0 var(--ui-border-width-sm, 1px) 0 var(--_border-color)}.drawer--bottom{inset-block-end:0;inset-inline:0;block-size:var(--_size);max-block-size:var(--_max-size);box-shadow:0 calc(var(--ui-border-width-sm, 1px)*-1) 0 var(--_border-color)}.drawer--end[data-state=open]{animation:drawer-slide-in-end var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out)}.drawer--end[data-state=closed]{animation:drawer-slide-out-end var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in)}.drawer--start[data-state=open]{animation:drawer-slide-in-start var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out)}.drawer--start[data-state=closed]{animation:drawer-slide-out-start var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in)}.drawer--top[data-state=open]{animation:drawer-slide-in-top var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out)}.drawer--top[data-state=closed]{animation:drawer-slide-out-top var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in)}.drawer--bottom[data-state=open]{animation:drawer-slide-in-bottom var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out)}.drawer--bottom[data-state=closed]{animation:drawer-slide-out-bottom var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in)}@keyframes drawer-slide-in-end{from{transform:translateX(100%)}}@keyframes drawer-slide-out-end{to{transform:translateX(100%)}}@keyframes drawer-slide-in-start{from{transform:translateX(-100%)}}@keyframes drawer-slide-out-start{to{transform:translateX(-100%)}}@keyframes drawer-slide-in-top{from{transform:translateY(-100%)}}@keyframes drawer-slide-out-top{to{transform:translateY(-100%)}}@keyframes drawer-slide-in-bottom{from{transform:translateY(100%)}}@keyframes drawer-slide-out-bottom{to{transform:translateY(100%)}}.drawer__header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:calc(0.5rem*2);padding:var(--_header-padding);box-shadow:inset 0 calc(var(--ui-border-width-sm, 1px)*-1) 0 var(--_border-color)}.drawer__title{margin:0;font-size:var(--ui-font-size-lg, 1.25rem);font-weight:var(--ui-weight-semibold, 600);line-height:var(--ui-row-1, 1rem)}.drawer__description{margin:0;font-size:var(--ui-font-size-sm, 0.875rem);line-height:var(--ui-row-1, 1rem);color:var(--ui-color-text-muted, hsl(220, 10%, 45%))}.drawer__close{flex-shrink:0;margin-inline-start:auto}.drawer__body{flex:1 1 auto;padding:var(--_body-padding);overflow-y:auto;line-height:var(--ui-row-1, 1rem)}.drawer__footer{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;gap:calc(0.5rem*2);padding:var(--_footer-padding);box-shadow:inset 0 var(--ui-border-width-sm, 1px) 0 var(--_border-color)}}@layer components.tokens{.modal{--_bg: var(--ui-modal-bg, var(--ui-color-bg, white));--_radius: var(--ui-modal-radius, var(--ui-radius-lg, calc(0.5rem * 1.5)));--_shadow: var(--ui-modal-shadow, 0 calc(0.5rem * 3) calc(0.5rem * 6) rgb(0 0 0 / 0.25));--_padding: var(--ui-modal-padding, calc(0.5rem * 3));--_max-width: var(--ui-modal-max-width, calc(0.5rem * 60));--_max-height: var(--ui-modal-max-height, calc(100vh - 0.5rem * 8));--_z: var(--ui-modal-z, var(--ui-z-modal, 400))}.modal--sm{--_max-width: var(--ui-modal-max-width-sm, calc(0.5rem * 40))}.modal--lg{--_max-width: var(--ui-modal-max-width-lg, calc(0.5rem * 80))}.modal--full{--_max-width: calc(100vw - 0.5rem * 4);--_max-height: calc(100vh - 0.5rem * 4);--_radius: 0}}@layer components.styles{.modal{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--_z);padding:calc(0.5rem*2)}.modal__content{display:flex;flex-direction:column;position:relative;inline-size:100%;max-block-size:var(--_max-height);max-inline-size:var(--_max-width);padding:var(--_padding);overflow:hidden;background:var(--_bg);border-radius:var(--_radius);box-shadow:var(--_shadow)}.modal__body{flex:1 1 auto;overflow-y:auto}.modal--entering .modal__content,.modal--visible .modal__content{opacity:1;transform:scale(1)}.modal--exiting .modal__content,.modal--hidden .modal__content{opacity:0;transform:scale(0.95)}.modal--animate .modal__content{transition:opacity var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease),transform var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease)}.modal--hidden{visibility:hidden;pointer-events:none}}@layer components.tokens{.overlay{--_bg: var(--ui-overlay-bg, rgb(0 0 0 / 0.5));--_z: var(--ui-overlay-z, var(--ui-z-overlay, 300))}.overlay--light{--_bg: var(--ui-overlay-bg-light, rgb(255 255 255 / 0.7))}.overlay--blur{--_bg: var(--ui-overlay-bg-blur, rgb(0 0 0 / 0.3))}}@layer components.styles{.overlay{position:fixed;inset:0;z-index:var(--_z);background:var(--_bg)}.overlay--blur{backdrop-filter:blur(calc(0.5rem * 0.5))}.overlay--entering,.overlay--visible{opacity:1}.overlay--exiting,.overlay--hidden{opacity:0;pointer-events:none}.overlay--animate{transition:opacity var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease)}}@layer components.tokens{.popover{--_bg: var(--ui-popover-bg, var(--ui-color-bg, white));--_border-color: var(--ui-popover-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));--_radius: var(--ui-popover-radius, var(--ui-radius-md, calc(0.5rem * 1)));--_shadow: var(--ui-popover-shadow, 0 calc(0.5rem / 2) calc(0.5rem * 2) rgb(0 0 0 / 0.15));--_padding: var(--ui-popover-padding, calc(0.5rem * 2));--_max-width: var(--ui-popover-max-width, calc(0.5rem * 40));--_z: var(--ui-popover-z, var(--ui-z-popover, 500));--_arrow-size: var(--ui-popover-arrow-size, calc(0.5rem))}}@layer components.styles{.popover{position:absolute;z-index:var(--_z);max-inline-size:var(--_max-width);padding:var(--_padding);line-height:var(--ui-row-1, 1rem);background:var(--_bg);border-radius:var(--_radius);outline:var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);box-shadow:var(--_shadow);outline-offset:calc(var(--ui-border-width-sm, 0.0625rem)*-1)}.popover__header{padding-block-end:calc(0.5rem*2);margin-block-end:calc(0.5rem*2);box-shadow:inset 0 calc(var(--ui-border-width-sm, 1px)*-1) 0 var(--_border-color)}.popover__title{margin:0;font-size:var(--ui-font-size-md, 1rem);font-weight:var(--ui-weight-semibold, 600)}.popover--top::after{content:"";position:absolute;inset-block-start:100%;inset-inline-start:50%;border:var(--_arrow-size) solid rgba(0,0,0,0);border-block-start-color:var(--_bg);transform:translateX(-50%)}.popover--top::before{content:"";position:absolute;inset-block-start:100%;inset-inline-start:50%;border:calc(var(--_arrow-size) + 1px) solid rgba(0,0,0,0);border-block-start-color:var(--_border-color);transform:translateX(-50%)}.popover--bottom::after{content:"";position:absolute;inset-block-end:100%;inset-inline-start:50%;border:var(--_arrow-size) solid rgba(0,0,0,0);border-block-end-color:var(--_bg);transform:translateX(-50%)}.popover--bottom::before{content:"";position:absolute;inset-block-end:100%;inset-inline-start:50%;border:calc(var(--_arrow-size) + 1px) solid rgba(0,0,0,0);border-block-end-color:var(--_border-color);transform:translateX(-50%)}.popover--visible{opacity:1}.popover--hidden{opacity:0;pointer-events:none}.popover--animate{transition:opacity var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}}@layer components.tokens{.tooltip{--_bg: var(--ui-tooltip-bg, var(--ui-color-text, #1a1a1a));--_color: var(--ui-tooltip-color, var(--ui-color-bg, white));--_radius: var(--ui-tooltip-radius, var(--ui-radius-sm, calc(0.5rem / 2)));--_padding-x: var(--ui-tooltip-padding-x, calc(0.5rem * 1));--_padding-y: var(--ui-tooltip-padding-y, calc(0.5rem / 2));--_size: var(--ui-tooltip-size, var(--ui-font-size-sm, 0.875rem));--_z: var(--ui-tooltip-z, var(--ui-z-tooltip, 500));--_arrow-size: var(--ui-tooltip-arrow-size, calc(0.5rem / 2))}}@layer components.styles{.tooltip{position:absolute;z-index:var(--_z);max-inline-size:calc(0.5rem*25);padding:var(--_padding-y) var(--_padding-x);font-size:var(--_size);line-height:calc(0.5rem*2);text-align:center;white-space:nowrap;color:var(--_color);background:var(--_bg);border-radius:var(--_radius)}.tooltip--top::after{content:"";position:absolute;inset-block-start:100%;inset-inline-start:50%;border:var(--_arrow-size) solid rgba(0,0,0,0);border-block-start-color:var(--_bg);transform:translateX(-50%)}.tooltip--bottom::after{content:"";position:absolute;inset-block-end:100%;inset-inline-start:50%;border:var(--_arrow-size) solid rgba(0,0,0,0);border-block-end-color:var(--_bg);transform:translateX(-50%)}.tooltip--start::after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:100%;border:var(--_arrow-size) solid rgba(0,0,0,0);border-inline-start-color:var(--_bg);transform:translateY(-50%)}.tooltip--end::after{content:"";position:absolute;inset-block-start:50%;inset-inline-end:100%;border:var(--_arrow-size) solid rgba(0,0,0,0);border-inline-end-color:var(--_bg);transform:translateY(-50%)}.tooltip--visible{opacity:1}.tooltip--hidden{opacity:0;pointer-events:none}.tooltip--animate{transition:opacity var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}}@layer components.tokens{.code{--_font-size: var(--ui-code-font-size, var(--ui-font-size-sm, 0.875rem));--_bg: var(--ui-code-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--_padding-x: var(--ui-code-padding-x, var(--ui-space-1, 0.5rem));--_padding-y: var(--ui-code-padding-y, var(--ui-space-0, 0.25rem));--_radius: var(--ui-code-radius, var(--ui-radius-sm, 0.25rem))}.code--sm{--_font-size: var(--ui-font-size-xs, 0.75rem)}.code-block{--_font-size: var(--ui-code-font-size-block, var(--ui-font-size-sm, 0.875rem));--_bg: var(--ui-code-bg-block, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--_padding: var(--ui-code-padding-block, var(--ui-space-3, 1.5rem));--_radius: var(--ui-code-radius-block, var(--ui-radius-md, 0.5rem));--_border-color: var(--ui-code-border-color-block, var(--ui-color-border, hsl(220, 10%, 90%)))}}@layer components.styles{.code{padding:var(--_padding-y) var(--_padding-x);font-family:var(--ui-font-mono, Noto Sans Mono, ui-monospace, Cascadia Code, monospace);font-size:var(--_font-size);line-height:var(--ui-leading-tight-sm, 1rem);background:var(--_bg);border-radius:var(--_radius)}.code-block{display:block;padding:calc(var(--_padding) - var(--ui-border-width-sm, 0.0625rem));overflow-x:auto;font-family:var(--ui-font-mono, Noto Sans Mono, ui-monospace, Cascadia Code, monospace);font-size:var(--_font-size);line-height:var(--ui-leading-tight-sm, 1rem);white-space:pre;background:var(--_bg);border:var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);border-radius:var(--_radius)}.code-block code{padding:0;font-size:inherit;background:none}}@layer components.tokens{.heading{--_font-size: var(--ui-heading-font-size, var(--ui-font-size-xl, 1.5rem));--_line-height: var(--ui-heading-line-height, var(--ui-leading-xl, 2rem));--_weight: var(--ui-heading-weight, var(--ui-weight-bold, 700));--_color: var(--ui-heading-color, var(--ui-color-text, hsl(220, 10%, 10%)))}.heading--4xl{--_font-size: var(--ui-heading-font-size-4xl, var(--ui-font-size-4xl, 2.5rem));--_line-height: var(--ui-heading-line-height-4xl, var(--ui-leading-4xl, 3rem))}.heading--3xl{--_font-size: var(--ui-heading-font-size-3xl, var(--ui-font-size-3xl, 2rem));--_line-height: var(--ui-heading-line-height-3xl, var(--ui-leading-3xl, 2.5rem))}.heading--2xl{--_font-size: var(--ui-heading-font-size-2xl, var(--ui-font-size-2xl, 1.75rem));--_line-height: var(--ui-heading-line-height-2xl, var(--ui-leading-2xl, 2rem))}.heading--xl{--_font-size: var(--ui-heading-font-size-xl, var(--ui-font-size-xl, 1.5rem));--_line-height: var(--ui-heading-line-height-xl, var(--ui-leading-xl, 2rem))}.heading--lg{--_font-size: var(--ui-heading-font-size-lg, var(--ui-font-size-lg, 1.25rem));--_line-height: var(--ui-heading-line-height-lg, var(--ui-leading-lg, 2rem))}.heading--md{--_font-size: var(--ui-heading-font-size-md, var(--ui-font-size-md, 1rem));--_line-height: var(--ui-heading-line-height-md, var(--ui-leading-tight-md, 1.5rem))}.heading--sm{--_font-size: var(--ui-heading-font-size-sm, var(--ui-font-size-sm, 0.875rem));--_line-height: var(--ui-heading-line-height-sm, var(--ui-leading-tight-sm, 1rem))}}@layer components.styles{.heading{margin:0;font-size:var(--_font-size);font-weight:var(--_weight);line-height:var(--_line-height);color:var(--_color)}}@layer components.tokens{.link{--_color: var(--ui-link-color, var(--ui-color-primary));--_color-hover: var(--ui-link-color-hover, var(--ui-color-primary-hover, color-mix(in srgb, var(--_color) 85%, black)));--_color-visited: var(--ui-link-color-visited, var(--_color));--_decoration: var(--ui-link-decoration, underline);--_decoration-hover: var(--ui-link-decoration-hover, underline)}.link--muted{--_color: var(--ui-link-color-muted, var(--ui-color-text-muted));--_color-hover: var(--ui-link-color-muted-hover, var(--ui-color-text))}.link--subtle{--_decoration: none;--_decoration-hover: underline}}@layer components.styles{.link{text-decoration:var(--_decoration);color:var(--_color);cursor:pointer;transition:color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);text-underline-offset:calc(0.5rem/4)}.link:hover{text-decoration:var(--_decoration-hover);color:var(--_color-hover)}.link:focus-visible{border-radius:calc(0.5rem/4);outline:2px solid var(--ui-color-focus, var(--ui-color-primary));outline-offset:calc(0.5rem/4)}.link:visited{color:var(--_color-visited)}.link--disabled,.link[aria-disabled=true]{color:var(--ui-color-text-muted);opacity:.6;cursor:not-allowed;pointer-events:none}.link--external::after{content:"↗";display:inline-block;margin-inline-start:calc(0.5rem/4);font-size:.75em}}@layer utilities{.m-0{margin:0}.m-1{margin:var(--ui-space-1)}.m-2{margin:var(--ui-space-2)}.m-3{margin:var(--ui-space-3)}.m-4{margin:var(--ui-space-4)}.m-6{margin:var(--ui-space-6)}.m-8{margin:var(--ui-space-8)}.mt-0{margin-block-start:0}.mt-1{margin-block-start:var(--ui-space-1)}.mt-2{margin-block-start:var(--ui-space-2)}.mt-3{margin-block-start:var(--ui-space-3)}.mt-4{margin-block-start:var(--ui-space-4)}.mt-6{margin-block-start:var(--ui-space-6)}.mt-8{margin-block-start:var(--ui-space-8)}.me-0{margin-inline-end:0}.me-1{margin-inline-end:var(--ui-space-1)}.me-2{margin-inline-end:var(--ui-space-2)}.me-3{margin-inline-end:var(--ui-space-3)}.me-4{margin-inline-end:var(--ui-space-4)}.me-6{margin-inline-end:var(--ui-space-6)}.me-8{margin-inline-end:var(--ui-space-8)}.mb-0{margin-block-end:0}.mb-1{margin-block-end:var(--ui-space-1)}.mb-2{margin-block-end:var(--ui-space-2)}.mb-3{margin-block-end:var(--ui-space-3)}.mb-4{margin-block-end:var(--ui-space-4)}.mb-6{margin-block-end:var(--ui-space-6)}.mb-8{margin-block-end:var(--ui-space-8)}.ms-0{margin-inline-start:0}.ms-1{margin-inline-start:var(--ui-space-1)}.ms-2{margin-inline-start:var(--ui-space-2)}.ms-3{margin-inline-start:var(--ui-space-3)}.ms-4{margin-inline-start:var(--ui-space-4)}.ms-6{margin-inline-start:var(--ui-space-6)}.ms-8{margin-inline-start:var(--ui-space-8)}.mx-0{margin-inline:0}.mx-1{margin-inline:var(--ui-space-1)}.mx-2{margin-inline:var(--ui-space-2)}.mx-3{margin-inline:var(--ui-space-3)}.mx-4{margin-inline:var(--ui-space-4)}.mx-auto{margin-inline:auto}.my-0{margin-block:0}.my-1{margin-block:var(--ui-space-1)}.my-2{margin-block:var(--ui-space-2)}.my-3{margin-block:var(--ui-space-3)}.my-4{margin-block:var(--ui-space-4)}.p-0{padding:0}.p-1{padding:var(--ui-space-1)}.p-2{padding:var(--ui-space-2)}.p-3{padding:var(--ui-space-3)}.p-4{padding:var(--ui-space-4)}.p-6{padding:var(--ui-space-6)}.p-8{padding:var(--ui-space-8)}.pt-0{padding-block-start:0}.pt-1{padding-block-start:var(--ui-space-1)}.pt-2{padding-block-start:var(--ui-space-2)}.pt-3{padding-block-start:var(--ui-space-3)}.pt-4{padding-block-start:var(--ui-space-4)}.pt-6{padding-block-start:var(--ui-space-6)}.pt-8{padding-block-start:var(--ui-space-8)}.pe-0{padding-inline-end:0}.pe-1{padding-inline-end:var(--ui-space-1)}.pe-2{padding-inline-end:var(--ui-space-2)}.pe-3{padding-inline-end:var(--ui-space-3)}.pe-4{padding-inline-end:var(--ui-space-4)}.pe-6{padding-inline-end:var(--ui-space-6)}.pe-8{padding-inline-end:var(--ui-space-8)}.pb-0{padding-block-end:0}.pb-1{padding-block-end:var(--ui-space-1)}.pb-2{padding-block-end:var(--ui-space-2)}.pb-3{padding-block-end:var(--ui-space-3)}.pb-4{padding-block-end:var(--ui-space-4)}.pb-6{padding-block-end:var(--ui-space-6)}.pb-8{padding-block-end:var(--ui-space-8)}.ps-0{padding-inline-start:0}.ps-1{padding-inline-start:var(--ui-space-1)}.ps-2{padding-inline-start:var(--ui-space-2)}.ps-3{padding-inline-start:var(--ui-space-3)}.ps-4{padding-inline-start:var(--ui-space-4)}.ps-6{padding-inline-start:var(--ui-space-6)}.ps-8{padding-inline-start:var(--ui-space-8)}.px-0{padding-inline:0}.px-1{padding-inline:var(--ui-space-1)}.px-2{padding-inline:var(--ui-space-2)}.px-3{padding-inline:var(--ui-space-3)}.px-4{padding-inline:var(--ui-space-4)}.py-0{padding-block:0}.py-1{padding-block:var(--ui-space-1)}.py-2{padding-block:var(--ui-space-2)}.py-3{padding-block:var(--ui-space-3)}.py-4{padding-block:var(--ui-space-4)}.gap-0{gap:0}.gap-1{gap:var(--ui-space-1)}.gap-2{gap:var(--ui-space-2)}.gap-3{gap:var(--ui-space-3)}.gap-4{gap:var(--ui-space-4)}.gap-6{gap:var(--ui-space-6)}.gap-8{gap:var(--ui-space-8)}}@layer utilities{.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.inline-grid{display:inline-grid}.hidden{display:none}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-initial{flex:0 1 auto}.flex-none{flex:none}.grow{flex-grow:1}.grow-0{flex-grow:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.self-auto{align-self:auto}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-center{align-self:center}.self-stretch{align-self:stretch}.visible{visibility:visible}.invisible{visibility:hidden}.sr-only{position:absolute;block-size:1px;inline-size:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border-width:0;clip-path:inset(50%)}}@layer utilities{.text-start{text-align:start}.text-center{text-align:center}.text-end{text-align:end}.text-justify{text-align:justify}.font-normal{font-weight:var(--ui-weight-normal)}.font-medium{font-weight:var(--ui-weight-medium)}.font-semibold{font-weight:var(--ui-weight-semibold)}.font-bold{font-weight:var(--ui-weight-bold)}.text-xs{font-size:var(--ui-font-size-xs);line-height:var(--ui-leading-xs)}.text-sm{font-size:var(--ui-font-size-sm);line-height:var(--ui-leading-sm)}.text-md{font-size:var(--ui-font-size-md);line-height:var(--ui-leading-md)}.text-lg{font-size:var(--ui-font-size-lg);line-height:var(--ui-leading-lg)}.text-xl{font-size:var(--ui-font-size-xl);line-height:var(--ui-leading-xl)}.text-2xl{font-size:var(--ui-font-size-2xl);line-height:var(--ui-leading-2xl)}.text-3xl{font-size:var(--ui-font-size-3xl);line-height:var(--ui-leading-3xl)}.text-4xl{font-size:var(--ui-font-size-4xl);line-height:var(--ui-leading-4xl)}.text-lead{font-size:var(--ui-lead-size);font-weight:var(--ui-lead-weight);line-height:var(--ui-lead-line-height);letter-spacing:var(--ui-lead-tracking)}.text-eyebrow{font-size:var(--ui-eyebrow-size);font-weight:var(--ui-eyebrow-weight);line-height:var(--ui-eyebrow-line-height);letter-spacing:var(--ui-eyebrow-tracking);text-transform:uppercase}.text-caption{font-size:var(--ui-caption-size);font-weight:var(--ui-caption-weight);line-height:var(--ui-caption-line-height);letter-spacing:var(--ui-caption-tracking)}.text-body-sm{font-size:var(--ui-body-sm-size);font-weight:var(--ui-body-sm-weight);line-height:var(--ui-body-sm-line-height);letter-spacing:var(--ui-body-sm-tracking)}.font-sans{font-family:var(--ui-font-sans)}.font-mono{font-family:var(--ui-font-mono)}.underline{text-decoration:underline}.line-through{text-decoration:line-through}.no-underline{text-decoration:none}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.normal-case{text-transform:none}.text-primary{color:var(--ui-color-primary)}.text-muted{color:var(--ui-color-text-muted)}.text-success{color:var(--ui-color-success)}.text-warning{color:var(--ui-color-warning)}.text-danger{color:var(--ui-color-danger)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.whitespace-pre{white-space:pre}.whitespace-pre-wrap{white-space:pre-wrap}.prose{max-inline-size:65ch}.prose-sm{max-inline-size:45ch}.prose-lg{max-inline-size:75ch}.tracking-display{letter-spacing:var(--ui-tracking-display)}.tracking-body{letter-spacing:var(--ui-tracking-body)}.tracking-caps{letter-spacing:var(--ui-tracking-caps)}}@layer utilities{.border{border:var(--ui-border-width-sm) solid var(--ui-color-border)}.border-0{border:none}.rounded{border-radius:var(--ui-radius-md)}.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--ui-radius-sm)}.rounded-lg{border-radius:var(--ui-radius-lg)}.rounded-full{border-radius:var(--ui-radius-full)}.bg{background:var(--ui-color-bg)}.bg-subtle{background:var(--ui-color-bg-subtle)}.bg-muted{background:var(--ui-color-bg-muted)}.bg-transparent{background:rgba(0,0,0,0)}}@layer utilities{.visually-hidden{position:absolute;block-size:calc(0.5rem/8);inline-size:calc(0.5rem/8);padding:0;margin:calc(0.5rem/-8);overflow:hidden;white-space:nowrap;border:0;clip:rect(0 0 0 0);clip-path:inset(50%)}.visually-hidden--focusable:focus,.visually-hidden--focusable:active{position:static;block-size:auto;inline-size:auto;margin:0;overflow:visible;white-space:normal;clip:auto;clip-path:none}}@view-transition{navigation:auto}@layer utilities{@keyframes vt-fade-in{from{opacity:0}}@keyframes vt-fade-out{to{opacity:0}}@keyframes vt-slide-in-up{from{opacity:0;transform:translateY(1.25rem)}}@keyframes vt-slide-out-up{to{opacity:0;transform:translateY(-1.25rem)}}@keyframes vt-slide-in-down{from{opacity:0;transform:translateY(-1.25rem)}}@keyframes vt-slide-out-down{to{opacity:0;transform:translateY(1.25rem)}}@keyframes vt-slide-in-start{from{opacity:0;transform:translateX(-1.25rem)}}@keyframes vt-slide-out-start{to{opacity:0;transform:translateX(-1.25rem)}}@keyframes vt-slide-in-end{from{opacity:0;transform:translateX(1.25rem)}}@keyframes vt-slide-out-end{to{opacity:0;transform:translateX(1.25rem)}}@keyframes vt-scale-in{from{opacity:0;transform:scale(0.95)}}@keyframes vt-scale-out{to{opacity:0;transform:scale(1.05)}}.transition-name-sidebar{view-transition-name:sidebar}.transition-name-main{view-transition-name:main}.transition-name-header{view-transition-name:header}.transition-name-hero{view-transition-name:hero}.transition-name-card{view-transition-name:card}.transition-name-modal{view-transition-name:modal}.transition-name-slide-up{view-transition-name:slide-up}.transition-name-slide-down{view-transition-name:slide-down}.transition-name-slide-start{view-transition-name:slide-start}.transition-name-slide-end{view-transition-name:slide-end}.transition-name-scale{view-transition-name:scale}.transition-name-fade{view-transition-name:fade}.transition-name-none{view-transition-name:none}::view-transition-old(sidebar),::view-transition-new(sidebar),::view-transition-old(header),::view-transition-new(header){animation:none}::view-transition-old(root),::view-transition-new(root){animation-duration:var(--ui-duration-base);animation-timing-function:var(--ui-ease-default)}::view-transition-old(fade){animation:vt-fade-out var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(fade){animation:vt-fade-in var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-up),::view-transition-old(main){animation:vt-slide-out-up var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-up),::view-transition-new(main){animation:vt-slide-in-up var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-down){animation:vt-slide-out-down var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-down){animation:vt-slide-in-down var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-start){animation:vt-slide-out-start var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-start){animation:vt-slide-in-start var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-end){animation:vt-slide-out-end var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-end){animation:vt-slide-in-end var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(scale),::view-transition-old(modal),::view-transition-old(card){animation:vt-scale-out var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(scale),::view-transition-new(modal),::view-transition-new(card){animation:vt-scale-in var(--ui-duration-base) var(--ui-ease-out)}::view-transition-group(hero){animation-duration:var(--ui-duration-slow);animation-timing-function:var(--ui-ease-in-out)}@media(prefers-reduced-motion: reduce){::view-transition-old(*),::view-transition-new(*),::view-transition-group(*){animation-duration:0s !important}}}.debug-grid,.debug-grid-rows,.debug-baseline{position:relative}.debug-grid{--debug-color: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.15)}.debug-grid::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--ui-z-debug);block-size:100%;inline-size:100%;min-block-size:100vh;background-image:linear-gradient(to right, var(--debug-color) 1px, transparent 1px),linear-gradient(to bottom, var(--debug-color) 1px, transparent 1px);pointer-events:none;background-size:var(--unit) var(--unit);background-position:0 0}.debug-grid-rows{--debug-color: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.1);--debug-color-strong: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.25)}.debug-grid-rows::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--ui-z-debug);block-size:100%;inline-size:100%;min-block-size:100vh;background-image:linear-gradient(to right, var(--debug-color) 1px, transparent 1px),linear-gradient(to bottom, var(--debug-color) 1px, transparent 1px),linear-gradient(to bottom, var(--debug-color-strong) 1px, transparent 1px);pointer-events:none;background-size:var(--unit) var(--unit),var(--unit) var(--unit),var(--unit) var(--ui-row);background-position:0 0}.debug-baseline{--debug-color: hsl(var(--ui-hue-danger, 0) 80% 50% / 0.2)}.debug-baseline::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--ui-z-debug);block-size:100%;inline-size:100%;min-block-size:100vh;background-image:linear-gradient(to bottom, var(--debug-color) 1px, transparent 1px);pointer-events:none;background-size:100% var(--unit)}.debug-outline *{outline:1px solid rgba(255,0,0,.5)}