@tensor_1/tokens 2.10.0 → 2.12.0

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 (78) hide show
  1. package/README.md +2 -0
  2. package/build/css/components.css +1 -1872
  3. package/build/css/styles.css +1 -2250
  4. package/build/css/tokens.css +7 -7
  5. package/build/ts/tokens.js +14 -7
  6. package/package.json +12 -2
  7. package/styles/components/alert.css +16 -0
  8. package/styles/components/app-shell.css +37 -0
  9. package/styles/components/attachment.css +10 -0
  10. package/styles/components/audit-log.css +11 -0
  11. package/styles/components/avatar.css +25 -0
  12. package/styles/components/breadcrumbs.css +10 -0
  13. package/styles/components/button.css +49 -0
  14. package/styles/components/calendar.css +13 -0
  15. package/styles/components/card.css +9 -0
  16. package/styles/components/chart.css +9 -0
  17. package/styles/components/checkbox.css +20 -0
  18. package/styles/components/combobox.css +16 -0
  19. package/styles/components/command-palette.css +14 -0
  20. package/styles/components/comments.css +17 -0
  21. package/styles/components/contact-card.css +12 -0
  22. package/styles/components/description-list.css +6 -0
  23. package/styles/components/detail-layout.css +7 -0
  24. package/styles/components/drawer.css +24 -0
  25. package/styles/components/editorial-home.css +185 -0
  26. package/styles/components/file-upload.css +14 -0
  27. package/styles/components/flow.css +196 -0
  28. package/styles/components/form.css +14 -0
  29. package/styles/components/heartbeat.css +12 -0
  30. package/styles/components/inbox.css +13 -0
  31. package/styles/components/input.css +39 -0
  32. package/styles/components/kanban.css +14 -0
  33. package/styles/components/kbd.css +8 -0
  34. package/styles/components/labels.css +13 -0
  35. package/styles/components/lightbox.css +13 -0
  36. package/styles/components/link.css +98 -0
  37. package/styles/components/list.css +10 -0
  38. package/styles/components/media.css +9 -0
  39. package/styles/components/menu.css +15 -0
  40. package/styles/components/meter.css +9 -0
  41. package/styles/components/modal.css +31 -0
  42. package/styles/components/notification-center.css +14 -0
  43. package/styles/components/page-header.css +9 -0
  44. package/styles/components/pagination.css +14 -0
  45. package/styles/components/peek.css +46 -0
  46. package/styles/components/pipeline.css +9 -0
  47. package/styles/components/popover.css +11 -0
  48. package/styles/components/progress.css +12 -0
  49. package/styles/components/prose.css +27 -0
  50. package/styles/components/radio.css +20 -0
  51. package/styles/components/reactions.css +22 -0
  52. package/styles/components/segmented.css +12 -0
  53. package/styles/components/select.css +23 -0
  54. package/styles/components/sidebar.css +102 -0
  55. package/styles/components/sla.css +8 -0
  56. package/styles/components/slider.css +16 -0
  57. package/styles/components/spinner.css +10 -0
  58. package/styles/components/stat-tile.css +11 -0
  59. package/styles/components/states.css +13 -0
  60. package/styles/components/status-pill.css +37 -0
  61. package/styles/components/stepper.css +13 -0
  62. package/styles/components/steps.css +18 -0
  63. package/styles/components/switch.css +19 -0
  64. package/styles/components/table-toolbar.css +20 -0
  65. package/styles/components/table.css +160 -0
  66. package/styles/components/tabs.css +31 -0
  67. package/styles/components/tag-input.css +16 -0
  68. package/styles/components/textarea.css +15 -0
  69. package/styles/components/timeline.css +11 -0
  70. package/styles/components/toast.css +21 -0
  71. package/styles/components/tooltip.css +35 -0
  72. package/styles/components/tree.css +17 -0
  73. package/styles/components/typography.css +45 -0
  74. package/styles/components/utility-bits.css +14 -0
  75. package/styles/components/view-menu.css +14 -0
  76. package/styles/motion.css +35 -0
  77. package/styles/utilities.css +26 -0
  78. package/tokens/base/typography.json +7 -7
@@ -1,2250 +1 @@
1
-
2
- @layer uix.tokens, uix.base, uix.util, uix.motion, uix.components, uix.forced-colors;
3
- /* uix-styleguide — aggregate stylesheet. Declares the cascade-layer order, then imports each layer.
4
- Component @imports are appended here as phases land (each component file declares @layer uix.components). */
5
- /* uix tokens — REDIRECT (no longer hand-authored).
6
- The --uix-* contract is now GENERATED from the DTCG source by Style Dictionary:
7
- source of truth : tokens/*.json
8
- build : npm run build:tokens
9
- output : build/css/tokens.css (this file just re-exports it)
10
- Edit tokens/ and rebuild — never edit the generated CSS. Kept as a stable import path so
11
- styles/main.css and any copy-paste consumers keep working. */
12
- /* GENERATED — do not edit. Source: tokens/ • Build: npm run build:tokens (Style Dictionary).
13
- The --uix-* contract: light on :root, dark on the dark selector. Names match UIx v1;
14
- projects override VALUES via the write-only --uix-brand / --uix-brand-fg slots, never names. */
15
- @layer uix.tokens {
16
- :root {
17
- --uix-bg-app: #FAFAFA;
18
- --uix-bg-subtle: #F5F5F5;
19
- --uix-bg-hover: #EFEFEF;
20
- --uix-bg-active: #E5E5E5;
21
- --uix-surface: #FFFFFF;
22
- --uix-surface-2: #FFFFFF;
23
- --uix-surface-3: #FAFAFA;
24
- --uix-border: #E5E5E5;
25
- --uix-border-strong: #D4D4D4;
26
- --uix-text: #0A0A0A;
27
- --uix-text-hushed: rgba(10,10,10,.62);
28
- --uix-text-muted: #6B6B6B;
29
- --uix-text-reverse: #FFFFFF;
30
- --uix-text-hushed-reverse: rgba(255,255,255,.62);
31
- --uix-accent: var(--uix-brand,#1447E6);
32
- --uix-accent-dark: #0E3AC0;
33
- --uix-accent-light: #4D77F0;
34
- --uix-accent-hover: color-mix(in srgb, var(--uix-accent) 88%, #000000);
35
- --uix-accent-fg: var(--uix-brand-fg,#FFFFFF);
36
- --uix-link: var(--uix-brand,#1447E6);
37
- --uix-ring: var(--uix-brand,#1447E6);
38
- --uix-brand-muted: color-mix(in srgb, var(--uix-accent) 12%, transparent);
39
- --uix-success: #047857;
40
- --uix-success-fg: #FFFFFF;
41
- --uix-success-bg: #D0FAE5;
42
- --uix-warning: #F99C00;
43
- --uix-warning-fg: #1A1A1A;
44
- --uix-warning-bg: #FEF3D6;
45
- --uix-warning-text: #92400E;
46
- --uix-info: #1447E6;
47
- --uix-info-fg: #FFFFFF;
48
- --uix-info-bg: #E3EBFF;
49
- --uix-info-text: #1447E6;
50
- --uix-danger: #E40014;
51
- --uix-danger-fg: #FFFFFF;
52
- --uix-danger-bg: #FFE4E6;
53
- --uix-danger-text: #C20012;
54
- --uix-amber: #C98A1E;
55
- --uix-amber-text: #795006;
56
- --uix-amber-bg: #FEFCE8;
57
- --uix-attention: #EA580C;
58
- --uix-attention-bg: #FFEDD5;
59
- --uix-attention-text: #9A3412;
60
- --uix-attention-solid: #EA580C;
61
- --uix-overdue: #DC2626;
62
- --uix-overdue-bg: #FEE2E2;
63
- --uix-overdue-text: #991B1B;
64
- --uix-overdue-solid: #EF4444;
65
- --uix-sev-4: var(--uix-info);
66
- --uix-sev-4-bg: var(--uix-info-bg);
67
- --uix-sev-4-text: var(--uix-info-text);
68
- --uix-sev-5: var(--uix-text-muted);
69
- --uix-sev-5-bg: var(--uix-bg-active);
70
- --uix-sev-5-text: var(--uix-text-hushed);
71
- --uix-success-solid: #10B981;
72
- --uix-warning-solid: #F59E0B;
73
- --uix-info-solid: #2563EB;
74
- --uix-danger-solid: #EF4444;
75
- --uix-chart-1: #2563EB;
76
- --uix-chart-2: #0891B2;
77
- --uix-chart-3: #16A34A;
78
- --uix-chart-4: #F59E0B;
79
- --uix-chart-5: #EA580C;
80
- --uix-chart-6: #E11D48;
81
- --uix-chart-7: #7C3AED;
82
- --uix-chart-8: #DB2777;
83
- --uix-chart-neutral: #64748B;
84
- --uix-row: #FFFFFF;
85
- --uix-row-alt: #FAFAFA;
86
- --uix-row-pinned-bg: #F4F7FF;
87
- --uix-row-selected-bg: #DBEAFE;
88
- --uix-scrollbar-thumb: rgba(10,10,10,.20);
89
- --uix-scrollbar-thumb-hover: rgba(10,10,10,.34);
90
- --uix-scrollbar-track: transparent;
91
- --uix-scrim: rgba(0,0,0,.5);
92
- --uix-scrim-strong: rgba(0,0,0,.7);
93
- --uix-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
94
- --uix-shadow-popover: 0 8px 24px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.05);
95
- --uix-shadow-overlay: 0 16px 48px rgba(0,0,0,.18);
96
- --uix-highlight-top: inset 0 1px 0 rgba(255,255,255,0);
97
- --uix-ease-out: cubic-bezier(.23,1,.32,1);
98
- --uix-ease-out-strong: cubic-bezier(.2,0,0,1);
99
- --uix-ease-in: cubic-bezier(.4,0,1,1);
100
- --uix-ease-in-out: cubic-bezier(.77,0,.175,1);
101
- --uix-ease-spring: cubic-bezier(.34,1.56,.64,1);
102
- --uix-dur-fast: 120ms;
103
- --uix-dur: 160ms;
104
- --uix-dur-slow: 240ms;
105
- --uix-dur-slower: 320ms;
106
- --uix-lift: 4px;
107
- --uix-z-raised: 1;
108
- --uix-z-sticky: 3;
109
- --uix-z-dropdown: 10;
110
- --uix-z-overlay: 20;
111
- --uix-z-tooltip: 30;
112
- --uix-z-toast: 100;
113
- --uix-radius-xs: 4px;
114
- --uix-radius-sm: 8px;
115
- --uix-radius-md: 12px;
116
- --uix-radius-lg: 16px;
117
- --uix-radius-pill: 999px;
118
- --uix-row-h: 56px;
119
- --uix-row-h-compact: 44px;
120
- --uix-row-h-comfortable: 68px;
121
- --uix-control-h: 36px;
122
- --uix-sidebar-w: 248px;
123
- --uix-sidebar-w-rail: 56px;
124
- --uix-topbar-h: 56px;
125
- --uix-scrollbar-size: 10px;
126
- --uix-icon-sm: 16px;
127
- --uix-icon-md: 20px;
128
- --uix-icon-lg: 24px;
129
- --uix-peek-w: 420px;
130
- --uix-col-w-xs: 92px;
131
- --uix-col-w-sm: 112px;
132
- --uix-col-w-md: 132px;
133
- --uix-col-w-lg: 176px;
134
- --uix-col-w-xl: 240px;
135
- --uix-col-title-min: 340px;
136
- --uix-space-0: 0;
137
- --uix-space-1: 4px;
138
- --uix-space-2: 8px;
139
- --uix-space-3: 12px;
140
- --uix-space-4: 16px;
141
- --uix-space-5: 20px;
142
- --uix-space-6: 24px;
143
- --uix-space-7: 32px;
144
- --uix-space-8: 40px;
145
- --uix-space-9: 48px;
146
- --uix-space-10: 64px;
147
- --uix-space-11: 80px;
148
- --uix-space-12: 96px;
149
- --uix-font-sans: "Inter",system-ui,sans-serif;
150
- --uix-font-heading: "IBM Plex Sans","Inter",system-ui,sans-serif;
151
- --uix-font-mono: "IBM Plex Mono",ui-monospace,monospace;
152
- --uix-text-display: 2.5rem;
153
- --uix-leading-display: 1.05;
154
- --uix-text-data-hero: 2.125rem;
155
- --uix-leading-data-hero: 1.1;
156
- --uix-text-h2: 1.5rem;
157
- --uix-leading-h2: 1.15;
158
- --uix-text-h3: 0.9375rem;
159
- --uix-leading-h3: 1.3;
160
- --uix-text-body: 0.875rem;
161
- --uix-leading-body: 1.5;
162
- --uix-text-meta: 0.78125rem;
163
- --uix-leading-meta: 1.4;
164
- --uix-text-eyebrow: 0.6875rem;
165
- --uix-leading-eyebrow: 1.2;
166
- --uix-tracking-tight: -0.02em;
167
- --uix-tracking-eyebrow: 0.06em;
168
- }
169
-
170
- :root:where(.dark,[data-theme="dark"]) {
171
- --uix-bg-app: #0A0A0A;
172
- --uix-bg-subtle: #171717;
173
- --uix-bg-hover: #1F1F1F;
174
- --uix-bg-active: #262626;
175
- --uix-surface: #111111;
176
- --uix-surface-2: #171717;
177
- --uix-surface-3: #262626;
178
- --uix-border: rgba(255,255,255,.08);
179
- --uix-border-strong: rgba(255,255,255,.14);
180
- --uix-text: #FAFAFA;
181
- --uix-text-hushed: rgba(250,250,250,.64);
182
- --uix-text-muted: #A1A1A1;
183
- --uix-accent: var(--uix-brand,#2563EB);
184
- --uix-accent-hover: color-mix(in srgb, var(--uix-accent) 82%, #FFFFFF);
185
- --uix-link: color-mix(in srgb, var(--uix-brand,#5B8DEF) 70%, #FFFFFF);
186
- --uix-ring: var(--uix-brand,#3080FF);
187
- --uix-brand-muted: color-mix(in srgb, var(--uix-accent) 16%, transparent);
188
- --uix-success: #00D294;
189
- --uix-success-fg: #002C22;
190
- --uix-success-bg: rgba(0,210,148,.15);
191
- --uix-warning: #FCBB00;
192
- --uix-warning-fg: #1A1A1A;
193
- --uix-warning-bg: rgba(249,156,0,.16);
194
- --uix-warning-text: var(--uix-warning,#FCBB00);
195
- --uix-info: #2563EB;
196
- --uix-info-fg: #FFFFFF;
197
- --uix-info-bg: rgba(48,128,255,.16);
198
- --uix-info-text: #60A5FA;
199
- --uix-danger: #DC2626;
200
- --uix-danger-fg: #FFFFFF;
201
- --uix-danger-bg: rgba(220,38,38,.20);
202
- --uix-danger-text: #F87171;
203
- --uix-amber: #E6B25C;
204
- --uix-amber-text: #E6B25C;
205
- --uix-amber-bg: rgba(201,138,30,.14);
206
- --uix-attention: #FB923C;
207
- --uix-attention-bg: rgba(234,88,12,.16);
208
- --uix-attention-text: #FDBA74;
209
- --uix-attention-solid: #F97316;
210
- --uix-overdue: #F87171;
211
- --uix-overdue-bg: rgba(220,38,38,.18);
212
- --uix-overdue-text: #FCA5A5;
213
- --uix-overdue-solid: #F87171;
214
- --uix-success-solid: #34D399;
215
- --uix-warning-solid: #FBBF24;
216
- --uix-info-solid: #3B82F6;
217
- --uix-danger-solid: #F87171;
218
- --uix-chart-1: #3080FF;
219
- --uix-chart-2: #00C2B0;
220
- --uix-chart-3: #00D294;
221
- --uix-chart-4: #FCBB00;
222
- --uix-chart-5: #FF8B1A;
223
- --uix-chart-6: #FF6568;
224
- --uix-chart-7: #A685FF;
225
- --uix-chart-8: #FF667F;
226
- --uix-chart-neutral: #A1A1A1;
227
- --uix-row: #111111;
228
- --uix-row-alt: #161616;
229
- --uix-row-pinned-bg: rgba(48,128,255,.08);
230
- --uix-row-selected-bg: rgba(48,128,255,.16);
231
- --uix-scrollbar-thumb: rgba(255,255,255,.18);
232
- --uix-scrollbar-thumb-hover: rgba(255,255,255,.30);
233
- --uix-highlight-top: inset 0 1px 0 rgba(255,255,255,.04);
234
- }
235
- }
236
- /* uix base — reset, fonts, element defaults, focus, selection, themed scrollbars.
237
- Layer order: tokens < base < util < motion < components. */
238
- /* Fonts load via the Google Fonts <link> in index.html (Inter + IBM Plex Sans + IBM Plex Mono). */
239
- @layer uix.base {
240
- *, *::before, *::after { box-sizing: border-box; }
241
- /* Zero default UA margins on the elements that actually carry them — NOT a
242
- bare `* { margin: 0 }`. The universal form lives in the `uix.base` layer,
243
- which a Tailwind consumer orders ABOVE its own `utilities`, so a bare `*`
244
- reset silently beat every margin utility (`mb-2`, `mt-4`, `space-y-*`) on
245
- arbitrary layout elements (divs/sections) — the "no spacing between
246
- components" bug. Scoping to typographic/default-margin elements (the same
247
- set Tailwind's own preflight resets) keeps the standalone styleguide's
248
- vertical rhythm while leaving layout elements free for consumer margins. */
249
- body, h1, h2, h3, h4, h5, h6, p, blockquote, figure, figcaption,
250
- dl, dd, ol, ul, menu, fieldset, hr, pre,
251
- button, input, optgroup, select, textarea { margin: 0; }
252
-
253
- html { -webkit-text-size-adjust: 100%; }
254
- /* default theme follows the OS until JS sets data-theme */
255
- @media (prefers-color-scheme: dark) { :root:not([data-theme]):not(.dark) { color-scheme: dark; } }
256
- :root[data-theme="dark"], :root.dark { color-scheme: dark; }
257
- :root[data-theme="light"] { color-scheme: light; }
258
-
259
- body {
260
- font-family: var(--uix-font-sans);
261
- font-size: var(--uix-text-body);
262
- line-height: var(--uix-leading-body);
263
- color: var(--uix-text);
264
- background: var(--uix-bg-app);
265
- -webkit-font-smoothing: antialiased;
266
- text-rendering: optimizeLegibility;
267
- }
268
-
269
- h1, h2, h3 { font-family: var(--uix-font-heading); letter-spacing: var(--uix-tracking-tight); font-weight: 600; }
270
- h1 { font-size: var(--uix-text-display); line-height: var(--uix-leading-display); }
271
- h2 { font-size: var(--uix-text-h2); line-height: var(--uix-leading-h2); }
272
- h3 { font-size: var(--uix-text-h3); line-height: var(--uix-leading-h3); }
273
-
274
- img, svg, video, canvas { display: block; max-width: 100%; }
275
- /* the display:block reset above (and any component display) would defeat the `hidden`
276
- attribute; restore it globally. `until-found` keeps find-in-page auto-reveal (UIX-A11Y-4). */
277
- [hidden]:not([hidden="until-found"]) { display: none !important; }
278
- input, button, textarea, select { font: inherit; color: inherit; }
279
- code, kbd, pre, samp { font-family: var(--uix-font-mono); }
280
-
281
- a { color: var(--uix-link); text-decoration: none; }
282
- a:hover { text-decoration: underline; }
283
- /* Content links carry a persistent underline so they aren't distinguished from body text by
284
- colour alone (WCAG 1.4.1 / link-in-text-block). Chrome links — nav, buttons, tabs, breadcrumbs,
285
- pills — are all class-bearing, so :not([class]) scopes this to in-text content links only. */
286
- a[href]:not([class]) { text-decoration: underline; }
287
-
288
- :focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
289
- :focus:not(:focus-visible) { outline: none; }
290
- ::selection { background: var(--uix-brand-muted); }
291
-
292
- /* themed scrollbars — Firefox */
293
- * { scrollbar-width: thin; scrollbar-color: var(--uix-scrollbar-thumb) var(--uix-scrollbar-track); }
294
- /* themed scrollbars — WebKit/Blink */
295
- ::-webkit-scrollbar { width: var(--uix-scrollbar-size); height: var(--uix-scrollbar-size); }
296
- ::-webkit-scrollbar-track { background: var(--uix-scrollbar-track); }
297
- ::-webkit-scrollbar-thumb {
298
- background: var(--uix-scrollbar-thumb);
299
- border-radius: var(--uix-radius-pill);
300
- border: 2px solid transparent;
301
- background-clip: content-box;
302
- }
303
- ::-webkit-scrollbar-thumb:hover {
304
- background: var(--uix-scrollbar-thumb-hover);
305
- background-clip: content-box;
306
- }
307
- }
308
- /* uix utilities — a few layout/a11y helpers. Keep this small; tokens + components do the heavy lifting. */
309
- @layer uix.util {
310
- /* visually hidden but available to screen readers */
311
- .uix-visually-hidden {
312
- position: absolute !important;
313
- width: 1px; height: 1px;
314
- padding: 0; margin: -1px;
315
- overflow: hidden; clip: rect(0, 0, 0, 0);
316
- white-space: nowrap; border: 0;
317
- }
318
-
319
- /* vertical rhythm — set gap via --gap (defaults to --uix-space-4 / 16px) */
320
- .uix-stack { display: flex; flex-direction: column; gap: var(--gap, var(--uix-space-4)); }
321
- /* horizontal grouping that wraps */
322
- .uix-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--uix-space-2)); }
323
-
324
- .uix-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
325
-
326
- /* elevation — apply the surface shadow tokens as a utility (cards/panels,
327
- floating popovers/menus/dialogs, pressed/active pills). In dark mode
328
- --uix-shadow-sm resolves to the inset top highlight, so elevated surfaces
329
- keep their lift cue without a heavy drop shadow. */
330
- .uix-elevated { box-shadow: var(--uix-shadow-sm); }
331
- .uix-elevated-popover { box-shadow: var(--uix-shadow-popover); }
332
- .uix-elevated-pill { box-shadow: var(--uix-shadow-sm); }
333
- }
334
- /* uix motion — shared keyframes, enter/exit helpers, and the reduced-motion guard.
335
- Components reference these tokens/keyframes; overlays pair the helpers with @starting-style. */
336
- /* Reduced-motion guard — UNLAYERED so its !important beats every component transition. */
337
- @media (prefers-reduced-motion: reduce) {
338
- *, *::before, *::after {
339
- animation-duration: .001ms !important;
340
- animation-iteration-count: 1 !important;
341
- transition-duration: .001ms !important;
342
- scroll-behavior: auto !important;
343
- }
344
- }
345
- /* Keyframes (cascade-neutral). */
346
- @keyframes uix-fade-in { from { opacity: 0; } to { opacity: 1; } }
347
- @keyframes uix-pop-in {
348
- from { opacity: 0; transform: scale(.96) translateY(var(--uix-lift)); }
349
- to { opacity: 1; transform: none; }
350
- }
351
- @keyframes uix-slide-in-right { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
352
- @keyframes uix-slide-in-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
353
- @keyframes uix-spin { to { transform: rotate(1turn); } }
354
- @keyframes uix-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
355
- @layer uix.motion {
356
- .uix-anim-fade { animation: uix-fade-in var(--uix-dur) var(--uix-ease-out); }
357
- .uix-anim-pop { animation: uix-pop-in var(--uix-dur-fast) var(--uix-ease-out); }
358
- .uix-anim-up { animation: uix-slide-in-up var(--uix-dur) var(--uix-ease-out); }
359
-
360
- /* Hover-lift affordance for interactive cards/tiles. Gated so touch devices don't get a stuck hover. */
361
- .uix-lift-hover { transition: transform var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out); }
362
- @media (hover: hover) and (pointer: fine) {
363
- .uix-lift-hover:hover { transform: translateY(calc(-1 * var(--uix-lift))); box-shadow: var(--uix-shadow-popover); }
364
- }
365
- }
366
- /* components */
367
- /* uix button — depends only on --uix-* tokens. */
368
- @layer uix.components {
369
- .uix-btn {
370
- display: inline-flex; align-items: center; justify-content: center; gap: .5em;
371
- height: var(--uix-control-h); padding: 0 var(--uix-space-4); border: 1px solid transparent;
372
- border-radius: var(--uix-radius-md); font: inherit; font-size: var(--uix-text-body); font-weight: 500;
373
- line-height: 1; cursor: pointer; user-select: none; white-space: nowrap;
374
- transition: background-color var(--uix-dur-fast) var(--uix-ease-out),
375
- border-color var(--uix-dur-fast) var(--uix-ease-out),
376
- color var(--uix-dur-fast) var(--uix-ease-out),
377
- transform var(--uix-dur-fast) var(--uix-ease-out);
378
- }
379
- .uix-btn:active { transform: scale(.97); }
380
- .uix-btn:disabled, .uix-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
381
- .uix-btn:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
382
- .uix-btn svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
383
-
384
- .uix-btn--primary { background: var(--uix-accent); color: var(--uix-accent-fg); }
385
- .uix-btn--primary:hover { background: var(--uix-accent-hover); }
386
- .uix-btn--secondary { background: var(--uix-bg-subtle); color: var(--uix-text); border-color: var(--uix-border); }
387
- .uix-btn--secondary:hover { background: var(--uix-bg-hover); }
388
- .uix-btn--outline { background: transparent; color: var(--uix-text); border-color: var(--uix-border-strong); }
389
- .uix-btn--outline:hover { background: var(--uix-bg-hover); }
390
- .uix-btn--ghost { background: transparent; color: var(--uix-text); }
391
- .uix-btn--ghost:hover { background: var(--uix-bg-hover); }
392
- .uix-btn--danger { background: var(--uix-danger); color: var(--uix-danger-fg); }
393
- .uix-btn--danger:hover { background: color-mix(in srgb, var(--uix-danger) 88%, black); }
394
- .uix-btn--link { background: transparent; color: var(--uix-link); height: auto; padding: 0; }
395
- .uix-btn--link:hover { text-decoration: underline; }
396
-
397
- .uix-btn--sm { height: 28px; padding: 0 var(--uix-space-3); font-size: var(--uix-text-meta); }
398
- .uix-btn--lg { height: 44px; padding: 0 var(--uix-space-5); }
399
- .uix-btn--icon { width: var(--uix-control-h); padding: 0; }
400
- .uix-btn--icon.uix-btn--sm { width: 28px; }
401
- .uix-btn--icon.uix-btn--lg { width: 44px; }
402
-
403
- .uix-btn[data-loading] { color: transparent !important; position: relative; pointer-events: none; }
404
- .uix-btn[data-loading]::after {
405
- content: ""; position: absolute; width: 1em; height: 1em;
406
- border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
407
- color: var(--uix-accent-fg); animation: uix-spin .6s linear infinite;
408
- }
409
-
410
- /* attached group */
411
- .uix-btn-group { display: inline-flex; }
412
- .uix-btn-group .uix-btn { border-radius: 0; border-right-width: 0; }
413
- .uix-btn-group .uix-btn:first-child { border-top-left-radius: var(--uix-radius-md); border-bottom-left-radius: var(--uix-radius-md); }
414
- .uix-btn-group .uix-btn:last-child { border-radius: 0 var(--uix-radius-md) var(--uix-radius-md) 0; border-right-width: 1px; }
415
- }
416
- /* uix input + field wrapper — depends only on --uix-* tokens. */
417
- @layer uix.components {
418
- .uix-field { display: flex; flex-direction: column; gap: var(--uix-space-2); }
419
- .uix-field__label { font-size: var(--uix-text-meta); font-weight: 500; color: var(--uix-text); }
420
- .uix-field__label[data-required]::after { content: " *"; color: var(--uix-danger-text); }
421
- /* message slot for hint / error / success — reserves one line so an appearing error never
422
- shifts the layout (UIX-FIX-04); the React <Field> always renders it. */
423
- .uix-field__msg { font-size: var(--uix-text-meta); line-height: 1.45; min-height: 1.45em; }
424
- .uix-field__hint { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
425
- .uix-field__error { font-size: var(--uix-text-meta); color: var(--uix-danger-text); display: inline-flex; align-items: center; gap: var(--uix-space-2); }
426
- .uix-field__error svg, .uix-field__success svg { width: 14px; height: 14px; flex: none; }
427
- .uix-field__success { font-size: var(--uix-text-meta); color: var(--uix-success); display: inline-flex; align-items: center; gap: var(--uix-space-2); }
428
-
429
- .uix-input {
430
- height: var(--uix-control-h); width: 100%;
431
- padding: 0 var(--uix-space-3); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md);
432
- background: var(--uix-surface); color: var(--uix-text); font: inherit; font-size: var(--uix-text-body);
433
- transition: border-color var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out);
434
- }
435
- .uix-input::placeholder { color: var(--uix-text-muted); }
436
- .uix-input:hover { border-color: var(--uix-border-strong); }
437
- .uix-input:focus { outline: none; border-color: var(--uix-ring); box-shadow: 0 0 0 3px var(--uix-brand-muted); }
438
- .uix-input:disabled { opacity: .55; cursor: not-allowed; background: var(--uix-bg-subtle); }
439
- .uix-input[readonly] { background: var(--uix-bg-subtle); }
440
- .uix-input[aria-invalid="true"] { border-color: var(--uix-danger); }
441
- .uix-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--uix-danger-bg); }
442
- .uix-input--sm { height: 28px; font-size: var(--uix-text-meta); }
443
-
444
- /* leading/trailing adornments */
445
- .uix-input-group { position: relative; display: flex; align-items: center; }
446
- .uix-input-group__icon { position: absolute; left: 10px; color: var(--uix-text-muted); display: inline-flex; pointer-events: none; }
447
- .uix-input-group__icon svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
448
- .uix-input-group--has-leading .uix-input { padding-left: 38px; }
449
- /* validation microinteractions */
450
- .uix-input[data-valid] { border-color: var(--uix-success); }
451
- .uix-input[data-valid]:focus { box-shadow: 0 0 0 3px var(--uix-success-bg); }
452
- .uix-input-group--has-trailing .uix-input { padding-right: 38px; }
453
- .uix-input-group__icon--trailing { left: auto; right: 10px; }
454
- }
455
- /* uix textarea — depends only on --uix-* tokens. */
456
- @layer uix.components {
457
- .uix-textarea {
458
- width: 100%; min-height: 84px; padding: var(--uix-space-3) var(--uix-space-3); resize: vertical;
459
- border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md);
460
- background: var(--uix-surface); color: var(--uix-text); font: inherit; font-size: var(--uix-text-body);
461
- line-height: var(--uix-leading-body);
462
- transition: border-color var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out);
463
- }
464
- .uix-textarea::placeholder { color: var(--uix-text-muted); }
465
- .uix-textarea:hover { border-color: var(--uix-border-strong); }
466
- .uix-textarea:focus { outline: none; border-color: var(--uix-ring); box-shadow: 0 0 0 3px var(--uix-brand-muted); }
467
- .uix-textarea:disabled { opacity: .55; background: var(--uix-bg-subtle); }
468
- .uix-textarea[aria-invalid="true"] { border-color: var(--uix-danger); }
469
- }
470
- /* uix select (native, styled) — depends only on --uix-* tokens. */
471
- @layer uix.components {
472
- .uix-select {
473
- height: var(--uix-control-h); width: 100%; padding: 0 var(--uix-space-8) 0 var(--uix-space-3); appearance: none;
474
- border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md);
475
- background-color: var(--uix-surface); color: var(--uix-text); font: inherit; font-size: var(--uix-text-body); cursor: pointer;
476
- background-repeat: no-repeat; background-position: right 12px center;
477
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
478
- transition: border-color var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out);
479
- }
480
- .uix-select:hover { border-color: var(--uix-border-strong); }
481
- .uix-select:focus { outline: none; border-color: var(--uix-ring); box-shadow: 0 0 0 3px var(--uix-brand-muted); }
482
- .uix-select:disabled { opacity: .55; cursor: not-allowed; background-color: var(--uix-bg-subtle); }
483
- .uix-select--sm { height: 28px; font-size: var(--uix-text-meta); }
484
-
485
- /* command-palette-style rich select: a trigger that opens a .uix-cmdk popover (search + options) */
486
- .uix-select-trigger { display: inline-flex; align-items: center; gap: var(--uix-space-2); height: var(--uix-control-h); padding: 0 var(--uix-space-3); min-width: 220px;
487
- border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); color: var(--uix-text);
488
- font: inherit; font-size: var(--uix-text-body); cursor: pointer; transition: border-color var(--uix-dur-fast) var(--uix-ease-out); }
489
- .uix-select-trigger:hover { border-color: var(--uix-border-strong); }
490
- .uix-select-trigger:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
491
- .uix-select-trigger__chevron { margin-left: auto; color: var(--uix-text-muted); width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
492
- }
493
- /* uix checkbox — depends only on --uix-* tokens. Markup:
494
- <label class="uix-checkbox"><input type="checkbox"><span class="uix-checkbox__box">{check svg}</span> Label</label> */
495
- @layer uix.components {
496
- .uix-checkbox { display: inline-flex; align-items: center; gap: var(--uix-space-2); cursor: pointer; font-size: var(--uix-text-body); color: var(--uix-text); }
497
- .uix-checkbox > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
498
- .uix-checkbox__box {
499
- width: 18px; height: 18px; flex: none; display: grid; place-items: center;
500
- border: 1px solid var(--uix-border-strong); border-radius: var(--uix-radius-xs); background: var(--uix-surface);
501
- transition: background-color var(--uix-dur-fast) var(--uix-ease-out), border-color var(--uix-dur-fast) var(--uix-ease-out);
502
- }
503
- .uix-checkbox__box svg {
504
- width: 13px; height: 13px; color: var(--uix-accent-fg); opacity: 0; transform: scale(.5);
505
- transition: opacity var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-spring);
506
- }
507
- .uix-checkbox > input:checked + .uix-checkbox__box,
508
- .uix-checkbox > input:indeterminate + .uix-checkbox__box { background: var(--uix-accent); border-color: var(--uix-accent); }
509
- .uix-checkbox > input:checked + .uix-checkbox__box svg,
510
- .uix-checkbox > input:indeterminate + .uix-checkbox__box svg { opacity: 1; transform: none; } /* indeterminate shows its dash icon, not just the filled box (UIX-A11Y-3) */
511
- .uix-checkbox > input:focus-visible + .uix-checkbox__box { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
512
- .uix-checkbox > input:disabled ~ * { opacity: .5; }
513
- }
514
- /* uix radio + radio-group — depends only on --uix-* tokens. */
515
- @layer uix.components {
516
- .uix-radio-group { display: flex; flex-direction: column; gap: var(--uix-space-2); }
517
- .uix-radio { display: inline-flex; align-items: center; gap: var(--uix-space-2); cursor: pointer; font-size: var(--uix-text-body); color: var(--uix-text); }
518
- .uix-radio > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
519
- .uix-radio__dot {
520
- width: 18px; height: 18px; flex: none; border-radius: 50%;
521
- border: 1px solid var(--uix-border-strong); background: var(--uix-surface);
522
- display: grid; place-items: center;
523
- transition: border-color var(--uix-dur-fast) var(--uix-ease-out);
524
- }
525
- .uix-radio__dot::after {
526
- content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--uix-accent);
527
- opacity: 0; transform: scale(.4); transition: opacity var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-spring);
528
- }
529
- .uix-radio > input:checked + .uix-radio__dot { border-color: var(--uix-accent); }
530
- .uix-radio > input:checked + .uix-radio__dot::after { opacity: 1; transform: none; }
531
- .uix-radio > input:focus-visible + .uix-radio__dot { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
532
- .uix-radio > input:disabled ~ * { opacity: .5; }
533
- }
534
- /* uix switch — depends only on --uix-* tokens. */
535
- @layer uix.components {
536
- .uix-switch { display: inline-flex; align-items: center; gap: var(--uix-space-2); cursor: pointer; color: var(--uix-text); font-size: var(--uix-text-body); }
537
- .uix-switch > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
538
- .uix-switch__track {
539
- width: 36px; height: 20px; flex: none; border-radius: var(--uix-radius-pill);
540
- background: var(--uix-bg-active); position: relative;
541
- transition: background-color var(--uix-dur) var(--uix-ease-out);
542
- }
543
- .uix-switch__track::after {
544
- content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
545
- background: var(--uix-text-reverse); box-shadow: var(--uix-shadow-sm);
546
- transition: transform var(--uix-dur) var(--uix-ease-out);
547
- }
548
- .uix-switch > input:checked + .uix-switch__track { background: var(--uix-accent); }
549
- .uix-switch > input:checked + .uix-switch__track::after { transform: translateX(16px); }
550
- .uix-switch > input:focus-visible + .uix-switch__track { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
551
- .uix-switch > input:disabled + .uix-switch__track { opacity: .5; }
552
- }
553
- /* uix segmented control — depends only on --uix-* tokens. */
554
- @layer uix.components {
555
- .uix-segmented { display: inline-flex; padding: var(--uix-space-1); gap: var(--uix-space-1); background: var(--uix-bg-subtle); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); }
556
- .uix-segmented__option {
557
- border: 0; background: transparent; color: var(--uix-text-hushed); font: inherit; font-size: var(--uix-text-meta); font-weight: 500;
558
- padding: var(--uix-space-2) var(--uix-space-3); border-radius: calc(var(--uix-radius-md) - 3px); cursor: pointer;
559
- transition: background-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
560
- }
561
- .uix-segmented__option:hover { color: var(--uix-text); }
562
- .uix-segmented__option[aria-pressed="true"] { background: var(--uix-surface); color: var(--uix-text); box-shadow: var(--uix-shadow-sm); }
563
- .uix-segmented__option:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 1px; }
564
- }
565
- /* uix slider (native range, styled) — depends only on --uix-* tokens. */
566
- @layer uix.components {
567
- .uix-slider { -webkit-appearance: none; appearance: none; width: 220px; height: 20px; background: transparent; cursor: pointer; }
568
- .uix-slider::-webkit-slider-runnable-track { height: 6px; border-radius: var(--uix-radius-pill); background: var(--uix-bg-active); }
569
- .uix-slider::-moz-range-track { height: 6px; border-radius: var(--uix-radius-pill); background: var(--uix-bg-active); }
570
- .uix-slider::-moz-range-progress { height: 6px; border-radius: var(--uix-radius-pill); background: var(--uix-accent); }
571
- .uix-slider::-webkit-slider-thumb {
572
- -webkit-appearance: none; appearance: none; margin-top: -6px; width: 18px; height: 18px; border-radius: 50%;
573
- background: var(--uix-surface); border: 2px solid var(--uix-accent); box-shadow: var(--uix-shadow-sm);
574
- transition: transform var(--uix-dur-fast) var(--uix-ease-out);
575
- }
576
- .uix-slider::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid var(--uix-accent); border-radius: 50%; background: var(--uix-surface); box-shadow: var(--uix-shadow-sm); }
577
- .uix-slider:active::-webkit-slider-thumb { transform: scale(1.12); }
578
- .uix-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
579
- .uix-slider:disabled { opacity: .5; cursor: not-allowed; }
580
- }
581
- /* uix number stepper — depends only on --uix-* tokens. */
582
- @layer uix.components {
583
- .uix-stepper { display: inline-flex; align-items: center; height: var(--uix-control-h); overflow: hidden;
584
- border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); }
585
- .uix-stepper__btn { width: 32px; align-self: stretch; border: 0; background: transparent; color: var(--uix-text); cursor: pointer;
586
- display: grid; place-items: center; transition: background-color var(--uix-dur-fast) var(--uix-ease-out); }
587
- .uix-stepper__btn:hover { background: var(--uix-bg-hover); }
588
- .uix-stepper__btn svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
589
- .uix-stepper__input { width: 52px; text-align: center; border: 0; height: 100%; background: transparent; color: var(--uix-text);
590
- font: inherit; border-inline: 1px solid var(--uix-border); -moz-appearance: textfield; }
591
- .uix-stepper__input::-webkit-outer-spin-button, .uix-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
592
- .uix-stepper:focus-within { border-color: var(--uix-ring); box-shadow: 0 0 0 3px var(--uix-brand-muted); }
593
- }
594
- /* uix file upload / dropzone — depends only on --uix-* tokens. */
595
- @layer uix.components {
596
- .uix-dropzone {
597
- display: flex; flex-direction: column; align-items: center; gap: var(--uix-space-2); padding: var(--uix-space-7); text-align: center;
598
- border: 1.5px dashed var(--uix-border-strong); border-radius: var(--uix-radius-lg);
599
- background: var(--uix-bg-subtle); color: var(--uix-text-muted); cursor: pointer;
600
- transition: border-color var(--uix-dur-fast) var(--uix-ease-out), background-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
601
- }
602
- .uix-dropzone:hover, .uix-dropzone[data-dragover] { border-color: var(--uix-accent); background: var(--uix-brand-muted); color: var(--uix-text); }
603
- .uix-dropzone svg { width: var(--uix-icon-lg); height: var(--uix-icon-lg); }
604
- .uix-filelist { display: flex; flex-direction: column; gap: var(--uix-space-2); margin-top: var(--uix-space-3); }
605
- .uix-filelist__item { display: flex; align-items: center; gap: var(--uix-space-3); padding: var(--uix-space-2) var(--uix-space-3); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); font-size: var(--uix-text-meta); color: var(--uix-text); }
606
- .uix-filelist__size { margin-left: auto; color: var(--uix-text-muted); }
607
- }
608
- /* uix combobox / listbox surface — depends only on --uix-* tokens. */
609
- @layer uix.components {
610
- .uix-combobox { position: relative; }
611
- .uix-listbox {
612
- list-style: none; margin: 0; padding: var(--uix-space-1); min-width: 200px;
613
- background: var(--uix-surface-2); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md);
614
- box-shadow: var(--uix-shadow-popover);
615
- }
616
- .uix-listbox__option {
617
- padding: var(--uix-space-2) var(--uix-space-3); border-radius: var(--uix-radius-sm); font-size: var(--uix-text-body); color: var(--uix-text);
618
- cursor: pointer; display: flex; align-items: center; gap: var(--uix-space-2);
619
- }
620
- .uix-listbox__option:hover, .uix-listbox__option[aria-selected="true"], .uix-listbox__option[data-active] { background: var(--uix-bg-hover); }
621
- .uix-listbox__option[aria-selected="true"] { color: var(--uix-link); }
622
- .uix-listbox__empty { padding: var(--uix-space-3); text-align: center; color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
623
- }
624
- /* uix tag input / multi-select chips — depends only on --uix-* tokens. */
625
- @layer uix.components {
626
- .uix-taginput {
627
- display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-2); min-height: var(--uix-control-h); padding: var(--uix-space-1) var(--uix-space-2);
628
- border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface);
629
- }
630
- .uix-taginput:focus-within { border-color: var(--uix-ring); box-shadow: 0 0 0 3px var(--uix-brand-muted); }
631
- .uix-taginput__field { flex: 1; min-width: 80px; border: 0; outline: none; background: transparent; color: var(--uix-text); font: inherit; }
632
- .uix-tag {
633
- display: inline-flex; align-items: center; gap: var(--uix-space-1); padding: var(--uix-space-1) var(--uix-space-1) var(--uix-space-1) var(--uix-space-2); border-radius: var(--uix-radius-sm);
634
- background: var(--uix-bg-active); color: var(--uix-text); font-size: var(--uix-text-meta);
635
- }
636
- .uix-tag__remove { position: relative; display: grid; place-items: center; width: 16px; height: 16px; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; border-radius: var(--uix-radius-xs); }
637
- /* Invisible overlay grows the 16px visual to a 24px hit target (UIX-A11Y-3). */
638
- .uix-tag__remove::before { content: ""; position: absolute; inset: -4px; }
639
- .uix-tag__remove:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
640
- .uix-tag__remove svg { width: 12px; height: 12px; }
641
- }
642
- /* uix form layout — depends only on --uix-* tokens. */
643
- @layer uix.components {
644
- .uix-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--uix-space-5); }
645
- .uix-fieldset { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); padding: var(--uix-space-6); }
646
- .uix-fieldset > legend { padding: 0 var(--uix-space-2); font-size: var(--uix-text-meta); font-weight: 600; color: var(--uix-text); }
647
- /* Labeled RadioGroup renders as a fieldset (UIX-A11Y-3): strip the UA chrome so it
648
- looks identical to the plain-div group; the legend spaces itself (fieldset gap
649
- doesn't reach a legend). */
650
- fieldset.uix-radio-group { border: 0; margin: 0; padding: 0; min-inline-size: auto; }
651
- .uix-radio-group__legend { padding: 0; margin: 0 0 var(--uix-space-2); font-size: var(--uix-text-meta); font-weight: 600; color: var(--uix-text); }
652
- .uix-form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--uix-space-4); }
653
- .uix-validation-summary {
654
- border: 1px solid var(--uix-danger); background: var(--uix-danger-bg); color: var(--uix-text);
655
- border-radius: var(--uix-radius-md); padding: var(--uix-space-3) var(--uix-space-4); font-size: var(--uix-text-meta);
656
- }
657
- .uix-validation-summary strong { color: var(--uix-danger-text); }
658
- .uix-validation-summary ul { margin: var(--uix-space-2) 0 0; padding-left: var(--uix-space-5); }
659
- .uix-validation-summary a { color: var(--uix-danger-text); text-decoration: underline; }
660
- }
661
- /* uix app shell — sidebar + topbar + content grid. Depends only on --uix-* tokens. */
662
- @layer uix.components {
663
- .uix-shell {
664
- position: relative;
665
- display: grid;
666
- grid-template-columns: var(--uix-sidebar-w) 1fr;
667
- grid-template-rows: var(--uix-topbar-h) 1fr;
668
- height: 100%; min-height: 360px;
669
- border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); overflow: hidden;
670
- transition: grid-template-columns var(--uix-dur) var(--uix-ease-out), grid-template-rows var(--uix-dur) var(--uix-ease-out);
671
- }
672
- .uix-shell__sidebar { grid-row: 1 / 3; background: var(--uix-bg-subtle); border-right: 1px solid var(--uix-border); overflow-y: auto; overflow-x: hidden; visibility: visible; transition: visibility var(--uix-dur) var(--uix-ease-out); }
673
- .uix-shell__topbar { grid-column: 2; display: flex; align-items: center; gap: var(--uix-space-3); padding: 0 var(--uix-space-6); background: var(--uix-bg-app); border-bottom: 1px solid var(--uix-border); }
674
- .uix-shell__main { grid-column: 2; overflow: auto; padding: var(--uix-space-7); background: var(--uix-bg-app); }
675
-
676
- /* ── nav width tiers ──────────────────────────────────────────────────────────
677
- Progressive reveal for wide, many-column tables: full (default) → rail (icon
678
- only) → hidden (0). data-collapsed stays a back-compat alias for the rail. */
679
- .uix-shell[data-nav="rail"], .uix-shell[data-collapsed] { grid-template-columns: var(--uix-sidebar-w-rail) 1fr; }
680
- .uix-shell[data-nav="hidden"] { grid-template-columns: 0 1fr; }
681
- /* the 0-width column still renders its links — visibility removes them from the tab
682
- order / accessibility tree while keeping the width transition (UIX-A11Y-2) */
683
- .uix-shell[data-nav="hidden"] .uix-shell__sidebar { visibility: hidden; }
684
-
685
- /* ── focus / immersive mode ───────────────────────────────────────────────────
686
- A table-scoped escape hatch: hide the sidebar AND the topbar so a dense grid
687
- uses the whole frame. The app toggles [data-focus] (from a toolbar maximize
688
- control) and restores the previous nav state + focus on Esc. */
689
- .uix-shell[data-focus] { grid-template-columns: 0 1fr; grid-template-rows: 0 1fr; }
690
- .uix-shell[data-focus] .uix-shell__sidebar { visibility: hidden; } /* see [data-nav="hidden"] above (UIX-A11Y-2) */
691
- .uix-shell[data-focus] .uix-shell__topbar { display: none; }
692
-
693
- /* a floating host for the "exit focus" affordance (Esc also exits) */
694
- .uix-shell__focus-exit { position: absolute; top: var(--uix-space-3); right: var(--uix-space-3); z-index: var(--uix-z-overlay); }
695
-
696
- /* ── skip link ────────────────────────────────────────────────────────────────
697
- First tab stop in the shell (UIX-A11Y-2): visually hidden until keyboard focus,
698
- then a small pill floating over the shell's top-left corner. */
699
- .uix-skiplink {
700
- position: absolute; top: var(--uix-space-3); left: var(--uix-space-3); z-index: var(--uix-z-overlay);
701
- width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
702
- }
703
- .uix-skiplink:focus-visible {
704
- width: auto; height: auto; clip: auto;
705
- display: inline-flex; align-items: center;
706
- padding: var(--uix-space-2) var(--uix-space-4);
707
- background: var(--uix-surface); color: var(--uix-text);
708
- border: 1px solid var(--uix-border); border-radius: var(--uix-radius-pill);
709
- box-shadow: var(--uix-shadow-popover);
710
- outline: 2px solid var(--uix-ring); outline-offset: 2px;
711
- font-size: var(--uix-text-meta); font-weight: 500; text-decoration: none;
712
- }
713
-
714
- /* ── full-bleed main ──────────────────────────────────────────────────────────
715
- Opt-in per surface: a genuinely wide grid drops the content gutter and runs
716
- edge to edge, reclaiming 2 x --uix-space-7. Not the default — most pages want
717
- the gutter. Pair with a frozen identifier column for horizontal scroll. */
718
- .uix-shell__main--bleed { padding: 0; }
719
- }
720
- /* uix sidebar nav — items, favorites, collapsible sub-items, collapsed rail. Depends only on --uix-* tokens. */
721
- @layer uix.components {
722
- .uix-sidebar { width: var(--uix-sidebar-w); background: var(--uix-bg-subtle); display: flex; flex-direction: column; gap: var(--uix-space-1); padding: var(--uix-space-2); overflow-x: hidden; overflow-y: auto; }
723
- .uix-sidebar__eyebrow {
724
- font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase;
725
- color: var(--uix-text-muted); padding: var(--uix-space-3) var(--uix-space-3) var(--uix-space-1);
726
- }
727
-
728
- /* brand header */
729
- .uix-sidebar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--uix-space-2); padding: var(--uix-space-1) var(--uix-space-2) var(--uix-space-2); }
730
- .uix-sidebar__brand { min-width: 0; font-size: var(--uix-text-h3); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
731
- .uix-sidebar__toggle {
732
- display: grid; place-items: center; width: 28px; height: 28px; flex: none;
733
- border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; border-radius: var(--uix-radius-sm);
734
- transition: background-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
735
- }
736
- .uix-sidebar__toggle:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
737
- .uix-sidebar__toggle svg { width: 18px; height: 18px; }
738
-
739
- .uix-navitem {
740
- display: flex; align-items: center; gap: var(--uix-space-3); height: 36px; padding: 0 var(--uix-space-3);
741
- border-radius: var(--uix-radius-sm); color: var(--uix-text-hushed); cursor: pointer; text-decoration: none;
742
- border: 0; background: transparent; font: inherit; font-size: var(--uix-text-body); width: 100%; text-align: left;
743
- transition: background-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
744
- }
745
- .uix-navitem:hover { background: var(--uix-bg-hover); color: var(--uix-text); text-decoration: none; }
746
- /* active uses --uix-link (the brightened-on-dark accent) not raw --uix-accent: the deep accent
747
- fails AA as text on the brand-muted tint in dark; link reads legibly in both themes. */
748
- .uix-navitem[aria-current="page"] { background: var(--uix-brand-muted); color: var(--uix-link); font-weight: 500; }
749
- .uix-navitem__icon { width: var(--uix-icon-md); height: var(--uix-icon-md); flex: none; }
750
- .uix-navitem__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
751
- .uix-navitem__badge { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
752
- /* on the active tint, muted badge dips below AA — hushed composites darker on the tint */
753
- .uix-navitem[aria-current="page"] .uix-navitem__badge { color: var(--uix-text-hushed); }
754
- .uix-navitem__star { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; border-radius: var(--uix-radius-xs); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
755
- /* invisible halo → 24px effective target with zero visual change (UIX-A11Y-2) */
756
- .uix-navitem__star::before { content: ""; position: absolute; inset: -1px; }
757
- .uix-navitem__star svg { width: 15px; height: 15px; }
758
- /* keyboard reveal mirrors the hover reveal (UIX-A11Y-2) */
759
- .uix-navitem:hover .uix-navitem__star,
760
- .uix-navitem__star:focus-visible,
761
- .uix-navitem:focus-within .uix-navitem__star { opacity: 1; }
762
- .uix-navitem__star[data-on] { opacity: 1; color: var(--uix-warning); }
763
- .uix-navitem__star[data-on] svg { fill: currentColor; }
764
-
765
- /* collapsible group */
766
- .uix-navgroup { }
767
- .uix-navgroup__trigger .uix-navgroup__chevron { margin-left: auto; transition: transform var(--uix-dur) var(--uix-ease-out); }
768
- .uix-navgroup__trigger[aria-expanded="false"] .uix-navgroup__chevron { transform: rotate(-90deg); }
769
- .uix-navgroup__chevron { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
770
- .uix-navgroup__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--uix-dur) var(--uix-ease-out); }
771
- .uix-navgroup__trigger[aria-expanded="false"] + .uix-navgroup__panel { grid-template-rows: 0fr; }
772
- /* visibility keeps the 0fr-collapsed links out of the tab order / accessibility tree
773
- (UIX-A11Y-2); the transition delays hiding until the row collapse finishes, and
774
- visibility snaps back to visible instantly on expand, so nothing visibly glitches. */
775
- .uix-navgroup__panel > div { overflow: hidden; visibility: visible; transition: visibility var(--uix-dur) var(--uix-ease-out); }
776
- .uix-navgroup__trigger[aria-expanded="false"] + .uix-navgroup__panel > div { visibility: hidden; }
777
- .uix-subitem { padding-left: var(--uix-space-5); }
778
- .uix-subitem .uix-navitem__label::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--uix-text-muted); margin-right: var(--uix-space-3); vertical-align: middle; }
779
-
780
- /* collapsed rail */
781
- .uix-sidebar[data-collapsed], .uix-sidebar[data-nav="rail"] { width: var(--uix-sidebar-w-rail); }
782
- .uix-sidebar[data-collapsed] .uix-navitem__badge,
783
- .uix-sidebar[data-collapsed] .uix-navitem__star,
784
- .uix-sidebar[data-collapsed] .uix-sidebar__eyebrow,
785
- .uix-sidebar[data-collapsed] .uix-sidebar__brand,
786
- .uix-sidebar[data-collapsed] .uix-navgroup__chevron,
787
- .uix-sidebar[data-collapsed] .uix-navgroup__panel { display: none; }
788
- /* rail labels stay in the accessibility tree — clip pattern (mirrors .uix-visually-hidden),
789
- not display:none, so icon-only nav items keep their names (UIX-A11Y-2). position:absolute
790
- removes the label from the flex row, so the centered rail layout is unaffected. */
791
- .uix-sidebar[data-collapsed] .uix-navitem__label {
792
- position: absolute !important;
793
- width: 1px; height: 1px;
794
- padding: 0; margin: -1px;
795
- overflow: hidden; clip: rect(0, 0, 0, 0);
796
- white-space: nowrap; border: 0;
797
- }
798
- /* center the icon-only rail; head keeps just the toggle, centered */
799
- .uix-sidebar[data-collapsed] .uix-navitem { justify-content: center; padding: 0; gap: 0; }
800
- .uix-sidebar[data-collapsed] .uix-sidebar__head { justify-content: center; padding-inline: 0; }
801
- }
802
- /* uix breadcrumbs — depends only on --uix-* tokens. */
803
- @layer uix.components {
804
- .uix-breadcrumbs { display: flex; align-items: center; gap: var(--uix-space-2); flex-wrap: wrap; font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
805
- .uix-breadcrumbs a { color: var(--uix-text-muted); text-decoration: none; }
806
- .uix-breadcrumbs a:hover { color: var(--uix-text); text-decoration: underline; }
807
- .uix-breadcrumbs__sep { opacity: .55; }
808
- .uix-breadcrumbs [aria-current="page"] { color: var(--uix-text); font-weight: 500; }
809
- }
810
- /* uix tabs — line / enclosed / pill. Depends only on --uix-* tokens. */
811
- @layer uix.components {
812
- .uix-tabs { display: flex; gap: var(--uix-space-1); }
813
- .uix-tab {
814
- border: 0; background: transparent; font: inherit; font-size: var(--uix-text-body); font-weight: 500;
815
- color: var(--uix-text-hushed); padding: var(--uix-space-3) var(--uix-space-3); cursor: pointer; position: relative;
816
- transition: color var(--uix-dur-fast) var(--uix-ease-out), background-color var(--uix-dur-fast) var(--uix-ease-out);
817
- }
818
- .uix-tab:hover { color: var(--uix-text); }
819
- .uix-tab[aria-selected="true"] { color: var(--uix-text); }
820
- .uix-tab:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: -2px; border-radius: var(--uix-radius-sm); }
821
-
822
- /* line */
823
- .uix-tabs--line { border-bottom: 1px solid var(--uix-border); }
824
- .uix-tabs--line .uix-tab::after {
825
- content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px;
826
- background: var(--uix-accent); border-radius: var(--uix-radius-pill);
827
- transform: scaleX(0); transition: transform var(--uix-dur) var(--uix-ease-out);
828
- }
829
- .uix-tabs--line .uix-tab[aria-selected="true"]::after { transform: scaleX(1); }
830
-
831
- /* enclosed */
832
- .uix-tabs--enclosed { gap: 0; border-bottom: 1px solid var(--uix-border); }
833
- .uix-tabs--enclosed .uix-tab { border: 1px solid transparent; border-top-left-radius: var(--uix-radius-md); border-top-right-radius: var(--uix-radius-md); margin-bottom: -1px; }
834
- .uix-tabs--enclosed .uix-tab[aria-selected="true"] { border-color: var(--uix-border); border-bottom-color: var(--uix-bg-app); background: var(--uix-bg-app); }
835
-
836
- /* pill */
837
- .uix-tabs--pill { display: inline-flex; background: var(--uix-bg-subtle); padding: var(--uix-space-1); border-radius: var(--uix-radius-md); }
838
- .uix-tabs--pill .uix-tab { padding: var(--uix-space-2) var(--uix-space-4); border-radius: calc(var(--uix-radius-md) - 3px); }
839
- .uix-tabs--pill .uix-tab[aria-selected="true"] { background: var(--uix-surface); box-shadow: var(--uix-shadow-sm); }
840
- }
841
- /* uix pagination — depends only on --uix-* tokens. */
842
- @layer uix.components {
843
- .uix-pagination { display: inline-flex; align-items: center; gap: var(--uix-space-1); }
844
- .uix-pagination__btn {
845
- min-width: 32px; height: 32px; padding: 0 var(--uix-space-2); display: inline-flex; align-items: center; justify-content: center;
846
- border: 1px solid var(--uix-border); border-radius: var(--uix-radius-sm); background: var(--uix-surface);
847
- color: var(--uix-text); font: inherit; font-size: var(--uix-text-meta); line-height: 1; cursor: pointer;
848
- transition: background-color var(--uix-dur-fast) var(--uix-ease-out), border-color var(--uix-dur-fast) var(--uix-ease-out);
849
- }
850
- .uix-pagination__btn:hover { background: var(--uix-bg-hover); }
851
- .uix-pagination__btn[aria-current="page"] { background: var(--uix-accent); border-color: var(--uix-accent); color: var(--uix-accent-fg); }
852
- .uix-pagination__btn:disabled { opacity: .45; pointer-events: none; }
853
- .uix-pagination__ellipsis { padding: 0 var(--uix-space-1); color: var(--uix-text-muted); }
854
- }
855
- /* uix steps / wizard — depends only on --uix-* tokens. */
856
- @layer uix.components {
857
- .uix-steps { display: flex; align-items: center; gap: 0; }
858
- .uix-step { display: flex; align-items: center; gap: var(--uix-space-3); color: var(--uix-text-muted); }
859
- .uix-step__marker {
860
- width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center;
861
- border: 1px solid var(--uix-border-strong); background: var(--uix-surface); font-size: var(--uix-text-meta); font-weight: 600;
862
- line-height: 1; /* hug the glyph so place-items:center truly centers single digits/symbols */
863
- }
864
- .uix-step__label { font-size: var(--uix-text-meta); font-weight: 500; }
865
- .uix-step__connector { flex: 1; height: 1px; min-width: 28px; background: var(--uix-border); margin: 0 var(--uix-space-3); }
866
- .uix-step[data-state="active"] { color: var(--uix-text); }
867
- .uix-step[data-state="active"] .uix-step__marker { border-color: var(--uix-accent); color: var(--uix-accent); box-shadow: 0 0 0 3px var(--uix-brand-muted); }
868
- .uix-step[data-state="done"] { color: var(--uix-text); }
869
- .uix-step[data-state="done"] .uix-step__marker { background: var(--uix-accent); border-color: var(--uix-accent); color: var(--uix-accent-fg); }
870
- .uix-step[data-state="done"] + .uix-step__connector,
871
- .uix-step__connector[data-done] { background: var(--uix-accent); }
872
- }
873
- /* uix command palette (⌘K) — inner surface; mounts in a dialog/popover (overlay mechanics in motion + overlays). */
874
- @layer uix.components {
875
- .uix-cmdk { width: min(560px, 92vw); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); background: var(--uix-surface-2); box-shadow: var(--uix-shadow-overlay); overflow: hidden; }
876
- .uix-cmdk__input { width: 100%; height: 48px; border: 0; border-bottom: 1px solid var(--uix-border); background: transparent; color: var(--uix-text); font: inherit; font-size: var(--uix-text-h3); padding: 0 var(--uix-space-4); }
877
- .uix-cmdk__input:focus { outline: none; }
878
- /* visible focus replacement for the suppressed outline (UIX-A11Y-1): the divider under the
879
- input thickens to a 2px ring-colored line */
880
- .uix-cmdk__input:focus-visible { border-bottom-color: var(--uix-ring); box-shadow: 0 1px 0 0 var(--uix-ring); }
881
- .uix-cmdk__list { max-height: 320px; overflow-y: auto; padding: var(--uix-space-2); }
882
- .uix-cmdk__group { font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; color: var(--uix-text-muted); padding: var(--uix-space-2) var(--uix-space-3) var(--uix-space-1); }
883
- .uix-cmdk__item { display: flex; align-items: center; gap: var(--uix-space-3); padding: var(--uix-space-3) var(--uix-space-3); border-radius: var(--uix-radius-sm); color: var(--uix-text); cursor: pointer; font-size: var(--uix-text-body); }
884
- .uix-cmdk__item svg { width: var(--uix-icon-md); height: var(--uix-icon-md); color: var(--uix-text-muted); }
885
- .uix-cmdk__item:hover, .uix-cmdk__item[data-active] { background: var(--uix-bg-hover); }
886
- .uix-cmdk__item .uix-kbd { margin-left: auto; }
887
- /* ⌘K is keyboard-triggered and high-frequency → open instantly, no animation (Emil's rule) */
888
- dialog[data-uix-cmdk-dialog], dialog[data-uix-cmdk-dialog]::backdrop { transition: none; }
889
- }
890
- /* uix menu / dropdown / context menu — popover-anchored surface. Depends only on --uix-* tokens. */
891
- @layer uix.components {
892
- .uix-menu { min-width: 200px; margin: 0; padding: var(--uix-space-1); list-style: none; background: var(--uix-surface-2); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); box-shadow: var(--uix-shadow-popover); }
893
- .uix-menu__item {
894
- display: flex; align-items: center; gap: var(--uix-space-3); width: 100%; text-align: left; padding: var(--uix-space-2) var(--uix-space-3);
895
- border: 0; background: transparent; border-radius: var(--uix-radius-sm); color: var(--uix-text); font: inherit; font-size: var(--uix-text-body); cursor: pointer;
896
- }
897
- .uix-menu__item svg { width: var(--uix-icon-md); height: var(--uix-icon-md); color: var(--uix-text-muted); }
898
- .uix-menu__item:hover, .uix-menu__item[data-active] { background: var(--uix-bg-hover); }
899
- .uix-menu__item--danger { color: var(--uix-danger-text); }
900
- .uix-menu__item--danger svg { color: var(--uix-danger-text); }
901
- .uix-menu__item .uix-kbd { margin-left: auto; }
902
- .uix-menu__sep { height: 1px; background: var(--uix-border); margin: var(--uix-space-1) 0; }
903
- .uix-menu__label { font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; color: var(--uix-text-muted); padding: var(--uix-space-2) var(--uix-space-3) var(--uix-space-1); }
904
- }
905
- /* uix page header — title/subtitle/actions row. Depends only on --uix-* tokens. */
906
- @layer uix.components {
907
- .uix-page-header { display: flex; align-items: flex-start; gap: var(--uix-space-5); flex-wrap: wrap; padding-bottom: var(--uix-space-6); margin-bottom: var(--uix-space-7); border-bottom: 1px solid var(--uix-border); }
908
- .uix-page-header__titles { flex: 1; min-width: 220px; }
909
- .uix-page-header__eyebrow { font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; font-weight: 600; color: var(--uix-text-muted); margin-bottom: var(--uix-space-2); }
910
- .uix-page-header__title { font-size: var(--uix-text-h2); font-weight: 600; letter-spacing: var(--uix-tracking-tight); }
911
- .uix-page-header__subtitle { color: var(--uix-text-muted); font-size: var(--uix-text-meta); margin-top: var(--uix-space-2); max-width: 70ch; }
912
- .uix-page-header__actions { display: flex; gap: var(--uix-space-2); align-items: center; flex-wrap: wrap; }
913
- }
914
- /* uix keyboard-shortcut chip — depends only on --uix-* tokens. */
915
- @layer uix.components {
916
- .uix-kbd {
917
- display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--uix-space-2);
918
- font-family: var(--uix-font-mono); font-size: var(--uix-text-eyebrow); color: var(--uix-text-muted);
919
- background: var(--uix-bg-subtle); border: 1px solid var(--uix-border); border-bottom-width: 2px; border-radius: var(--uix-radius-xs);
920
- }
921
- }
922
- /* uix card — depends only on --uix-* tokens. */
923
- @layer uix.components {
924
- .uix-card { background: var(--uix-surface); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); box-shadow: var(--uix-shadow-sm); }
925
- .uix-card__header { padding: var(--uix-space-5) var(--uix-space-6); border-bottom: 1px solid var(--uix-border); display: flex; align-items: center; gap: var(--uix-space-3); }
926
- .uix-card__title { font-size: var(--uix-text-h3); font-weight: 600; }
927
- .uix-card__subtitle { font-size: var(--uix-text-meta); color: var(--uix-text-muted); margin-top: var(--uix-space-1); }
928
- .uix-card__body { padding: var(--uix-space-6); }
929
- .uix-card__footer { padding: var(--uix-space-4) var(--uix-space-6); border-top: 1px solid var(--uix-border); display: flex; gap: var(--uix-space-2); justify-content: flex-end; }
930
- }
931
- /* uix KPI / stat tile — depends only on --uix-* tokens. */
932
- @layer uix.components {
933
- .uix-stat { background: var(--uix-surface); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); padding: var(--uix-space-6); }
934
- .uix-stat__label { font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; color: var(--uix-text-muted); display: flex; align-items: center; justify-content: space-between; gap: var(--uix-space-2); }
935
- .uix-stat__label svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
936
- .uix-stat__value { font-size: var(--uix-text-data-hero); font-weight: 600; line-height: var(--uix-leading-data-hero); margin-top: var(--uix-space-3); }
937
- .uix-stat__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); margin-top: var(--uix-space-2); display: flex; align-items: center; gap: var(--uix-space-2); }
938
- .uix-stat__trend { display: inline-flex; align-items: center; gap: var(--uix-space-1); font-size: var(--uix-text-meta); font-weight: 600; padding: var(--uix-space-1) var(--uix-space-2); border-radius: var(--uix-radius-pill); }
939
- /* direction glyph inside the chip (UIX-A11Y-4) — sized to sit on the text baseline row */
940
- .uix-stat__trend svg { width: 10px; height: 10px; flex: none; }
941
- .uix-stat__trend--up { color: var(--uix-success); background: var(--uix-success-bg); }
942
- .uix-stat__trend--down { color: var(--uix-danger-text); background: var(--uix-danger-bg); }
943
- }
944
- /* uix status pill — tone API (status / priority / SLA). Depends only on --uix-* tokens. */
945
- @layer uix.components {
946
- .uix-pill {
947
- display: inline-flex; align-items: center; gap: var(--uix-space-2); padding: var(--uix-space-1) var(--uix-space-3); border-radius: var(--uix-radius-pill);
948
- font-size: var(--uix-text-meta); font-weight: 500; line-height: 1.4;
949
- background: var(--tone-bg, var(--uix-bg-active)); color: var(--tone-fg, var(--uix-text-hushed));
950
- }
951
- .uix-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tone-dot, currentColor); flex: none; }
952
- .uix-pill--neutral { --tone-bg: var(--uix-bg-active); --tone-fg: var(--uix-text-hushed); --tone-dot: var(--uix-text-muted); }
953
- .uix-pill--success { --tone-bg: var(--uix-success-bg); --tone-fg: var(--uix-success); --tone-dot: var(--uix-success); }
954
- .uix-pill--info { --tone-bg: var(--uix-info-bg); --tone-fg: var(--uix-info-text); --tone-dot: var(--uix-info); }
955
- .uix-pill--warning { --tone-bg: var(--uix-warning-bg); --tone-fg: var(--uix-warning-text); --tone-dot: var(--uix-warning); }
956
- .uix-pill--danger { --tone-bg: var(--uix-danger-bg); --tone-fg: var(--uix-danger-text); --tone-dot: var(--uix-danger); }
957
- /* critical = the one SOLID fill (most urgent); muted = a quiet, chrome-less label */
958
- .uix-pill--critical { --tone-bg: var(--uix-danger); --tone-fg: var(--uix-danger-fg); --tone-dot: var(--uix-danger-fg); }
959
- .uix-pill--muted { --tone-bg: transparent; --tone-fg: var(--uix-text-muted); --tone-dot: var(--uix-text-muted); }
960
- /* time-pressure tones (U1 tokens — distinct from severity and validation-error) */
961
- .uix-pill--attention { --tone-bg: var(--uix-attention-bg); --tone-fg: var(--uix-attention-text); --tone-dot: var(--uix-attention); }
962
- .uix-pill--overdue { --tone-bg: var(--uix-overdue-bg); --tone-fg: var(--uix-overdue-text); --tone-dot: var(--uix-overdue); }
963
- /* SLA tones — ok=success, at-risk=attention, breached=overdue */
964
- .uix-pill--sla-ok { --tone-bg: var(--uix-success-bg); --tone-fg: var(--uix-success); --tone-dot: var(--uix-success); }
965
- .uix-pill--sla-at-risk { --tone-bg: var(--uix-attention-bg); --tone-fg: var(--uix-attention-text); --tone-dot: var(--uix-attention); }
966
- .uix-pill--sla-breached { --tone-bg: var(--uix-overdue-bg); --tone-fg: var(--uix-overdue-text); --tone-dot: var(--uix-overdue); }
967
- /* Priority/severity tones — P1=danger, P2=warning, P3=amber, P4=info, P5=neutral (complete 5-tier ramp) */
968
- .uix-pill--p1 { --tone-bg: var(--uix-danger-bg); --tone-fg: var(--uix-danger-text); --tone-dot: var(--uix-danger); }
969
- .uix-pill--p2 { --tone-bg: var(--uix-warning-bg); --tone-fg: var(--uix-warning-text); --tone-dot: var(--uix-warning); }
970
- .uix-pill--p3 { --tone-bg: var(--uix-amber-bg); --tone-fg: var(--uix-amber-text); --tone-dot: var(--uix-amber); }
971
- .uix-pill--p4 { --tone-bg: var(--uix-info-bg); --tone-fg: var(--uix-info-text); --tone-dot: var(--uix-info); }
972
- .uix-pill--p5 { --tone-bg: var(--uix-bg-active); --tone-fg: var(--uix-text-hushed); --tone-dot: var(--uix-text-muted); }
973
-
974
- /* outline treatment — transparent fill, tone-tinted border, tone-colored text. The border tints
975
- the tone hue (--tone-fg) at 40%; neutral/muted use the structural borders, critical reads strongest. */
976
- .uix-pill--outline { background: transparent; border: 1px solid var(--tone-line, color-mix(in srgb, var(--tone-fg) 40%, transparent)); }
977
- .uix-pill--outline.uix-pill--neutral { --tone-line: var(--uix-border-strong); }
978
- .uix-pill--outline.uix-pill--muted { --tone-line: var(--uix-border); }
979
- .uix-pill--outline.uix-pill--critical { color: var(--uix-danger-text); --tone-dot: var(--uix-danger); --tone-line: color-mix(in srgb, var(--uix-danger) 60%, transparent); }
980
- }
981
- /* uix data table — zebra, sticky header, sort, selection, density, pinned rows,
982
- column sizing, bulk actions, row actions, expandable rows, inline edit, resize,
983
- search highlight, responsive ladder + compare. Depends only on --uix-* tokens. */
984
- @layer uix.components {
985
- .uix-table-wrap { overflow: auto; max-height: 460px; border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); background: var(--uix-surface); }
986
- .uix-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--uix-text-body); }
987
-
988
- .uix-table thead th {
989
- position: sticky; top: 0; z-index: var(--uix-z-raised); background: var(--uix-surface); text-align: left;
990
- font-size: var(--uix-text-meta); font-weight: 600; color: var(--uix-text-hushed);
991
- padding: 0 var(--uix-space-4); height: 44px; border-bottom: 1px solid var(--uix-border); white-space: nowrap;
992
- }
993
- .uix-table th[data-sort] { cursor: pointer; user-select: none; }
994
- .uix-table th[data-sort]:hover { color: var(--uix-text); }
995
- .uix-table th[data-sort]::after { content: " ↕"; opacity: .35; }
996
- .uix-table th[aria-sort="ascending"]::after { content: " ↑"; opacity: 1; color: var(--uix-accent); }
997
- .uix-table th[aria-sort="descending"]::after { content: " ↓"; opacity: 1; color: var(--uix-accent); }
998
- /* multi-column sort ordinal (⇧+click adds a secondary key) */
999
- .uix-table th[data-sort-order]::before { content: attr(data-sort-order); display: inline-block; margin-right: var(--uix-space-1); font-size: var(--uix-text-eyebrow); font-variant-numeric: tabular-nums; color: var(--uix-accent); }
1000
-
1001
- /* sortable header's real <button> (UIX-A11Y-2): visually indistinguishable from the old
1002
- plain-text th — inherited font/colour, no chrome — with an inset overlay so the whole
1003
- cell stays the click target (the sticky th is its containing block). The sort arrow and
1004
- ordinal stay as th pseudo-content so they never pollute the button's accessible name. */
1005
- .uix-th__sortbtn { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: inherit; cursor: pointer; }
1006
- .uix-th__sortbtn::before { content: ""; position: absolute; inset: 0; }
1007
-
1008
- .uix-table td { padding: 0 var(--uix-space-4); height: var(--uix-row-h); border-bottom: 1px solid var(--uix-border); color: var(--uix-text); vertical-align: middle; }
1009
- .uix-table tbody tr { background: var(--uix-row); }
1010
- .uix-table tbody tr:nth-child(even) { background: var(--uix-row-alt); }
1011
- .uix-table--no-zebra tbody tr, .uix-table--no-zebra tbody tr:nth-child(even) { background: var(--uix-row); }
1012
- .uix-table tbody tr[data-pinned] { background: var(--uix-row-pinned-bg); }
1013
- /* [data-selected] carries row-selection styling; aria-selected is invalid on a native
1014
- table row — AT state comes from the row checkbox (UIX-A11Y-2). */
1015
- .uix-table tbody tr[data-selected] { background: var(--uix-row-selected-bg); }
1016
- .uix-table tbody tr:hover { background: var(--uix-bg-hover); }
1017
- .uix-table[data-density="compact"] td, .uix-table--compact td { height: var(--uix-row-h-compact); }
1018
- .uix-table[data-density="comfortable"] td { height: var(--uix-row-h-comfortable); }
1019
-
1020
- .uix-table__pin { border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; padding: var(--uix-space-1); border-radius: var(--uix-radius-xs); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
1021
- /* :focus-visible reveal mirrors .uix-rowact so keyboard users can find the pin (UIX-A11Y-2) */
1022
- .uix-table tbody tr:hover .uix-table__pin, .uix-table__pin:focus-visible, .uix-table__pin[data-on] { opacity: 1; }
1023
- .uix-table__pin:hover { background: var(--uix-bg-active); color: var(--uix-text); }
1024
- .uix-table__pin[data-on] { color: var(--uix-accent); }
1025
- .uix-table__pin svg { width: 15px; height: 15px; }
1026
- .uix-table__pin[data-on] svg { fill: currentColor; }
1027
-
1028
- /* frozen first column (opt-in via .uix-table--pinned-col) */
1029
- .uix-table--pinned-col th:first-child, .uix-table--pinned-col td:first-child { position: sticky; left: 0; z-index: var(--uix-z-raised); box-shadow: 1px 0 0 var(--uix-border); }
1030
- .uix-table--pinned-col thead th:first-child { z-index: var(--uix-z-sticky); background: var(--uix-surface); }
1031
- .uix-table--pinned-col tbody tr td:first-child { background: var(--uix-row); }
1032
- .uix-table--pinned-col tbody tr:nth-child(even) td:first-child { background: var(--uix-row-alt); }
1033
- .uix-table--pinned-col.uix-table--no-zebra tbody tr td:first-child,
1034
- .uix-table--pinned-col.uix-table--no-zebra tbody tr:nth-child(even) td:first-child { background: var(--uix-row); }
1035
- .uix-table--pinned-col tbody tr[data-pinned] td:first-child { background: var(--uix-row-pinned-bg); }
1036
- .uix-table--pinned-col tbody tr[data-selected] td:first-child { background: var(--uix-row-selected-bg); }
1037
- .uix-table--pinned-col tbody tr:hover td:first-child { background: var(--uix-bg-hover); }
1038
-
1039
- /* ── column sizing + cell behaviour (a shared vocabulary, not per-app px) ──────── */
1040
- .uix-table--fixed { table-layout: fixed; width: 100%; }
1041
- .uix-col--w-xs { width: var(--uix-col-w-xs); }
1042
- .uix-col--w-sm { width: var(--uix-col-w-sm); }
1043
- .uix-col--w-md { width: var(--uix-col-w-md); }
1044
- .uix-col--w-lg { width: var(--uix-col-w-lg); }
1045
- .uix-col--w-xl { width: var(--uix-col-w-xl); }
1046
- .uix-col--flex,
1047
- .uix-col--primary { width: auto; min-width: var(--uix-col-title-min); }
1048
- .uix-col--truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1049
- .uix-col--wrap { white-space: normal; overflow-wrap: anywhere; }
1050
- .uix-col--num { font-variant-numeric: tabular-nums; }
1051
- .uix-table th.uix-col--num, .uix-table td.uix-col--num { text-align: right; }
1052
-
1053
- /* ── cell content vocabulary — a fixed set of renderers keeps tables consistent ── */
1054
- .uix-cell-strong { font-weight: 600; }
1055
- .uix-cell-sub { display: block; font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
1056
- .uix-cell-mono { font-family: var(--uix-font-mono); font-size: var(--uix-text-meta); }
1057
-
1058
- /* ── id cell — the canonical row click-through (row → peek, ↗ → full record) ───── */
1059
- .uix-id-cell__btn {
1060
- border: 0; background: transparent; cursor: pointer; padding: 0;
1061
- color: var(--uix-text); font: inherit;
1062
- display: inline-flex; align-items: center; gap: var(--uix-space-1); white-space: nowrap;
1063
- }
1064
- .uix-id-cell__btn:hover { color: var(--uix-accent); }
1065
- .uix-id-cell__btn:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; border-radius: var(--uix-radius-xs); }
1066
- .uix-id-cell__arrow {
1067
- width: var(--uix-icon-sm); height: var(--uix-icon-sm); flex-shrink: 0; color: var(--uix-text-muted);
1068
- opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
1069
- }
1070
- .uix-table tbody tr:hover .uix-id-cell__arrow { opacity: 1; }
1071
-
1072
- /* ── selection column + select-all ────────────────────────────────────────────── */
1073
- .uix-table th.uix-table__selcol, .uix-table td.uix-table__selcell { width: 44px; padding-left: var(--uix-space-3); padding-right: 0; text-align: center; }
1074
-
1075
- /* contextual bulk-action bar — appears when >=1 row is selected */
1076
- .uix-bulkbar {
1077
- display: flex; align-items: center; gap: var(--uix-space-3);
1078
- padding: var(--uix-space-2) var(--uix-space-3); margin-bottom: var(--uix-space-3);
1079
- border: 1px solid var(--uix-accent); border-radius: var(--uix-radius-md);
1080
- background: var(--uix-brand-muted); color: var(--uix-text);
1081
- animation: uix-bulkbar-in var(--uix-dur) var(--uix-ease-out);
1082
- }
1083
- .uix-bulkbar[hidden] { display: none; }
1084
- .uix-bulkbar__count { font-size: var(--uix-text-meta); font-weight: 600; color: var(--uix-accent); font-variant-numeric: tabular-nums; }
1085
- .uix-bulkbar__spacer { flex: 1; }
1086
- @keyframes uix-bulkbar-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
1087
- @media (prefers-reduced-motion: reduce) { .uix-bulkbar { animation: none; } }
1088
-
1089
- /* ── row hover actions + kebab ─────────────────────────────────────────────────── */
1090
- .uix-table__actions { width: 84px; text-align: right; white-space: nowrap; }
1091
- .uix-rowact { border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; padding: var(--uix-space-1); border-radius: var(--uix-radius-sm); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out), background-color var(--uix-dur-fast) var(--uix-ease-out); }
1092
- .uix-rowact svg { width: 16px; height: 16px; display: block; }
1093
- .uix-table tbody tr:hover .uix-rowact, .uix-rowact:focus-visible, .uix-rowact[aria-expanded="true"] { opacity: 1; }
1094
- .uix-rowact:hover { background: var(--uix-bg-active); color: var(--uix-text); }
1095
-
1096
- /* ── expandable inline row ─────────────────────────────────────────────────────── */
1097
- .uix-table__expand { border: 0; background: transparent; cursor: pointer; color: var(--uix-text-muted); padding: var(--uix-space-1); border-radius: var(--uix-radius-xs); display: inline-grid; place-items: center; }
1098
- .uix-table__expand svg { width: 16px; height: 16px; transition: transform var(--uix-dur-fast) var(--uix-ease-out); }
1099
- .uix-table__expand[aria-expanded="true"] svg { transform: rotate(90deg); }
1100
- .uix-table__expand:hover { background: var(--uix-bg-active); color: var(--uix-text); }
1101
- tr.uix-table__detail > td { background: var(--uix-bg-subtle); padding: 0 var(--uix-space-4); }
1102
- .uix-table__detail-inner { padding: var(--uix-space-4) var(--uix-space-1) var(--uix-space-5); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--uix-space-4) var(--uix-space-7); }
1103
- .uix-kv { font-size: var(--uix-text-meta); }
1104
- .uix-kv__k { color: var(--uix-text-muted); margin-bottom: var(--uix-space-1); }
1105
- .uix-kv__v { color: var(--uix-text); }
1106
- @media (prefers-reduced-motion: reduce) { .uix-table__expand svg { transition: none; } }
1107
-
1108
- /* ── inline cell edit ──────────────────────────────────────────────────────────── */
1109
- .uix-cell-edit { display: inline-flex; align-items: center; gap: var(--uix-space-2); cursor: text; border-radius: var(--uix-radius-sm); padding: var(--uix-space-1) var(--uix-space-2); margin: calc(-1 * var(--uix-space-1)) calc(-1 * var(--uix-space-2)); transition: background-color var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out); }
1110
- .uix-cell-edit:hover { background: var(--uix-bg-active); }
1111
- .uix-cell-edit__pencil { width: 13px; height: 13px; color: var(--uix-text-muted); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
1112
- .uix-table tbody tr:hover .uix-cell-edit__pencil { opacity: 1; }
1113
- .uix-cell-edit[data-editing] { background: var(--uix-surface); box-shadow: 0 0 0 2px var(--uix-ring); cursor: default; }
1114
- .uix-cell-edit__ok { color: var(--uix-success); width: 14px; height: 14px; opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
1115
- .uix-cell-edit[data-saved] .uix-cell-edit__ok { opacity: 1; }
1116
- .uix-cell-edit input, .uix-cell-edit select { border: 0; background: transparent; font: inherit; color: inherit; outline: none; }
1117
-
1118
- /* ── column resize grip (drag the header's right edge) ─────────────────────────── */
1119
- .uix-table__resize { position: absolute; top: 0; right: -3px; width: 8px; height: 100%; cursor: col-resize; z-index: var(--uix-z-raised); user-select: none; touch-action: none; }
1120
- .uix-table__resize::after { content: ""; position: absolute; top: 25%; right: 3px; width: 2px; height: 50%; background: transparent; border-radius: var(--uix-radius-pill); transition: background-color var(--uix-dur-fast) var(--uix-ease-out); }
1121
- .uix-table thead th:hover .uix-table__resize::after, .uix-table__resize[data-drag]::after { background: var(--uix-accent); }
1122
-
1123
- /* ── search match highlight ────────────────────────────────────────────────────── */
1124
- .uix-mark { background: var(--uix-warning-bg); color: var(--uix-text); border-radius: var(--uix-radius-xs); padding: 0 0.15em; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--uix-warning) 60%, transparent); }
1125
-
1126
- /* ── responsive ladder — priority-column drop, then card transform ─────────────── */
1127
- .uix-table--priority th[data-priority="low"], .uix-table--priority td[data-priority="low"] { display: none; }
1128
- .uix-table--priority-mid th[data-priority="low"], .uix-table--priority-mid td[data-priority="low"],
1129
- .uix-table--priority-mid th[data-priority="mid"], .uix-table--priority-mid td[data-priority="mid"] { display: none; }
1130
-
1131
- .uix-table--cards { display: block; }
1132
- .uix-table--cards thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
1133
- .uix-table--cards tbody, .uix-table--cards tr, .uix-table--cards td { display: block; width: auto; }
1134
- .uix-table--cards tbody tr { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); margin: 0 0 var(--uix-space-3); padding: var(--uix-space-1) var(--uix-space-4); box-shadow: var(--uix-shadow-sm); }
1135
- .uix-table--cards tbody tr[data-selected] { box-shadow: 0 0 0 2px var(--uix-accent); }
1136
- .uix-table--cards td { height: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--uix-space-5); padding: var(--uix-space-2) 0; border-bottom: 1px solid var(--uix-border); text-align: right; white-space: normal; }
1137
- .uix-table--cards td:last-child { border-bottom: 0; }
1138
- .uix-table--cards td::before { content: attr(data-label); color: var(--uix-text-muted); font-size: var(--uix-text-meta); font-weight: 500; text-align: left; flex: none; }
1139
- .uix-table--cards td[data-col="id"] { font-size: var(--uix-text-h3); font-weight: 600; border-bottom: 1px solid var(--uix-border); padding-bottom: var(--uix-space-3); }
1140
- .uix-table--cards td[data-col="id"]::before { display: none; }
1141
- .uix-table--cards td[data-col="select"], .uix-table--cards td[data-col="actions"], .uix-table--cards td[data-col="expand"] { display: none; }
1142
-
1143
- /* ── compare view — two records field-by-field on a narrow screen ──────────────── */
1144
- .uix-compare { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); overflow: hidden; font-size: var(--uix-text-meta); }
1145
- .uix-compare__head, .uix-compare__row { display: grid; grid-template-columns: 1fr 1fr; }
1146
- .uix-compare__head > div, .uix-compare__cell { padding: var(--uix-space-3); background: var(--uix-surface); border-top: 1px solid var(--uix-border); }
1147
- .uix-compare__head > div { font-weight: 600; border-top: 0; }
1148
- .uix-compare__head > div + div, .uix-compare__cell + .uix-compare__cell { border-left: 1px solid var(--uix-border); }
1149
- .uix-compare__attr { grid-column: 1 / -1; background: var(--uix-bg-subtle); padding: var(--uix-space-1) var(--uix-space-3); border-top: 1px solid var(--uix-border); font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; color: var(--uix-text-muted); }
1150
- }
1151
- /* uix table toolbar + two-row filter bar (status / type). Depends only on --uix-* tokens. */
1152
- @layer uix.components {
1153
- .uix-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-2); margin-bottom: var(--uix-space-3); }
1154
- .uix-toolbar__spacer { flex: 1; }
1155
-
1156
- /* responsive: the status + type groups sit on ONE line when they fit, wrap to two only when cramped */
1157
- .uix-filterbar { display: flex; flex-wrap: wrap; gap: var(--uix-space-2) var(--uix-space-5); margin-bottom: var(--uix-space-3); }
1158
- .uix-filterrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-2); }
1159
- .uix-filterrow__label { font-size: var(--uix-text-meta); color: var(--uix-text-muted); width: 54px; flex: none; }
1160
-
1161
- .uix-chip {
1162
- display: inline-flex; align-items: center; gap: var(--uix-space-2); padding: var(--uix-space-1) var(--uix-space-3); border-radius: var(--uix-radius-pill);
1163
- border: 1px solid var(--uix-border); background: var(--uix-surface); color: var(--uix-text-hushed);
1164
- font: inherit; font-size: var(--uix-text-meta); cursor: pointer;
1165
- transition: background-color var(--uix-dur-fast) var(--uix-ease-out), border-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
1166
- }
1167
- .uix-chip:hover { border-color: var(--uix-border-strong); color: var(--uix-text); }
1168
- .uix-chip[data-on] { background: var(--uix-brand-muted); border-color: var(--uix-accent); color: var(--uix-accent); }
1169
- .uix-chip__count { font-variant-numeric: tabular-nums; opacity: .7; }
1170
- }
1171
- /* uix table View menu — consolidates density / zebra / freeze / columns into one popover.
1172
- Reuses .uix-popover (surface + animation), .uix-segmented, .uix-switch. Depends only on --uix-* tokens. */
1173
- @layer uix.components {
1174
- .uix-view-menu { min-width: 248px; padding: var(--uix-space-2); }
1175
- .uix-view-menu__group { padding: var(--uix-space-2) var(--uix-space-2); }
1176
- .uix-view-menu__group + .uix-view-menu__group { border-top: 1px solid var(--uix-border); }
1177
- .uix-view-menu__label { font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; color: var(--uix-text-muted); margin-bottom: var(--uix-space-2); }
1178
- .uix-view-menu__row { display: flex; align-items: center; justify-content: space-between; gap: var(--uix-space-3); font-size: var(--uix-text-body); color: var(--uix-text); cursor: pointer; }
1179
- .uix-view-menu__row + .uix-view-menu__row { margin-top: var(--uix-space-3); }
1180
- .uix-view-menu .uix-segmented { display: flex; width: 100%; }
1181
- .uix-view-menu .uix-segmented__option { flex: 1; text-align: center; }
1182
- .uix-view-menu__cols { display: flex; flex-direction: column; gap: var(--uix-space-1); max-height: 180px; overflow: auto; }
1183
- .uix-view-menu__cols .uix-menu__item { font-size: var(--uix-text-meta); }
1184
- }
1185
- /* uix list + list-item — depends only on --uix-* tokens. */
1186
- @layer uix.components {
1187
- .uix-list { display: flex; flex-direction: column; border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); overflow: hidden; background: var(--uix-surface); }
1188
- .uix-list__item { display: flex; align-items: center; gap: var(--uix-space-3); padding: var(--uix-space-4) var(--uix-space-5); border-bottom: 1px solid var(--uix-border); }
1189
- .uix-list__item:last-child { border-bottom: 0; }
1190
- .uix-list__item:hover { background: var(--uix-bg-hover); }
1191
- .uix-list__title { font-weight: 500; }
1192
- .uix-list__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
1193
- .uix-list__trail { margin-left: auto; display: flex; align-items: center; gap: var(--uix-space-2); }
1194
- }
1195
- /* uix description / key-value list — depends only on --uix-* tokens. */
1196
- @layer uix.components {
1197
- .uix-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--uix-space-3) var(--uix-space-6); }
1198
- .uix-dl dt { color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
1199
- .uix-dl dd { color: var(--uix-text); font-size: var(--uix-text-body); margin: 0; }
1200
- }
1201
- /* uix typography utilities — class-based application of the --uix-text-* scale.
1202
- A `<span class="uix-text-h3">` reads identically to an `<h3>`; consumers reach
1203
- for these instead of re-deriving the scale inline. (House products migrating
1204
- off bespoke `type-*` classes map 1:1 onto these — same sizes/leading/weights.)
1205
- Depends only on --uix-* tokens. */
1206
- @layer uix.components {
1207
- .uix-text-display {
1208
- font-size: var(--uix-text-display); line-height: var(--uix-leading-display);
1209
- font-weight: 400; letter-spacing: var(--uix-tracking-tight); color: var(--uix-text);
1210
- }
1211
- .uix-text-h1 {
1212
- font-size: var(--uix-text-display); line-height: var(--uix-leading-display);
1213
- font-weight: 400; letter-spacing: var(--uix-tracking-tight); color: var(--uix-text);
1214
- }
1215
- .uix-text-h2 {
1216
- font-size: var(--uix-text-h2); line-height: var(--uix-leading-h2);
1217
- font-weight: 400; letter-spacing: -0.01em; color: var(--uix-text);
1218
- }
1219
- .uix-text-h3 {
1220
- font-size: var(--uix-text-h3); line-height: var(--uix-leading-h3);
1221
- font-weight: 700; color: var(--uix-text);
1222
- }
1223
- .uix-text-body {
1224
- font-size: var(--uix-text-body); line-height: var(--uix-leading-body);
1225
- font-weight: 400; color: var(--uix-text);
1226
- }
1227
- .uix-text-body-hushed {
1228
- font-size: var(--uix-text-body); line-height: var(--uix-leading-body);
1229
- font-weight: 400; color: var(--uix-text-hushed);
1230
- }
1231
- .uix-text-meta {
1232
- font-size: var(--uix-text-meta); line-height: var(--uix-leading-meta);
1233
- font-weight: 400; color: var(--uix-text-hushed);
1234
- }
1235
- .uix-text-eyebrow {
1236
- font-size: var(--uix-text-eyebrow); line-height: var(--uix-leading-eyebrow);
1237
- font-weight: 700; letter-spacing: var(--uix-tracking-eyebrow);
1238
- text-transform: uppercase; color: var(--uix-text-hushed);
1239
- }
1240
- .uix-text-data-hero {
1241
- font-size: var(--uix-text-data-hero); line-height: 1.1;
1242
- font-weight: 400; letter-spacing: -0.01em; color: var(--uix-text);
1243
- font-variant-numeric: tabular-nums;
1244
- }
1245
- }
1246
- /* uix avatar / avatar-group / user-chip — depends only on --uix-* tokens. */
1247
- @layer uix.components {
1248
- .uix-avatar {
1249
- width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--uix-bg-active); color: var(--uix-text);
1250
- display: inline-flex; align-items: center; justify-content: center; font-size: var(--uix-text-meta); font-weight: 600;
1251
- line-height: 1; overflow: hidden; position: relative;
1252
- }
1253
- .uix-avatar img { width: 100%; height: 100%; object-fit: cover; }
1254
- .uix-avatar--sm { width: 24px; height: 24px; font-size: var(--uix-text-eyebrow); }
1255
- .uix-avatar--lg { width: 44px; height: 44px; }
1256
- .uix-avatar__status { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--uix-surface); background: var(--uix-success); }
1257
- .uix-avatar-group { display: inline-flex; }
1258
- .uix-avatar-group .uix-avatar { box-shadow: 0 0 0 2px var(--uix-surface); margin-left: calc(-1 * var(--uix-space-2)); }
1259
- .uix-avatar-group .uix-avatar:first-child { margin-left: 0; }
1260
- .uix-user-chip { display: inline-flex; align-items: center; gap: var(--uix-space-2); }
1261
- .uix-user-chip__name { font-size: var(--uix-text-body); font-weight: 500; }
1262
- .uix-user-chip__sub { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
1263
-
1264
- /* editable avatar — hover/focus overlay for "change photo"; empty = upload placeholder */
1265
- .uix-avatar--editable { cursor: pointer; }
1266
- .uix-avatar__edit { position: absolute; inset: 0; display: grid; place-items: center; background: var(--uix-scrim); color: var(--uix-text-reverse); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
1267
- .uix-avatar__edit svg { width: 45%; height: 45%; }
1268
- .uix-avatar--editable:hover .uix-avatar__edit, .uix-avatar--editable:focus-visible .uix-avatar__edit { opacity: 1; }
1269
- .uix-avatar--empty { background: var(--uix-bg-subtle); border: 1.5px dashed var(--uix-border-strong); color: var(--uix-text-muted); }
1270
- }
1271
- /* uix tooltip. Two flavours, both depend only on --uix-* tokens:
1272
- • .uix-tooltip__bubble — the React <Tooltip>: renders in the top layer via the
1273
- Popover API, so it escapes any overflow:hidden/scroll ancestor (UIX-FIX-02).
1274
- JS sets position/left/top; CSS owns appearance + the fade.
1275
- • [data-uix-tip] — the legacy CSS-only tooltip, kept for back-compat. It is
1276
- position:absolute and so is clipped by an overflow ancestor; prefer <Tooltip>. */
1277
- @layer uix.components {
1278
- .uix-tooltip { display: inline-flex; }
1279
-
1280
- .uix-tooltip__bubble {
1281
- position: fixed; margin: 0; inset: auto; border: 0;
1282
- width: max-content; max-width: 16rem;
1283
- background: var(--uix-text); color: var(--uix-bg-app);
1284
- font-size: var(--uix-text-meta); font-weight: 500; line-height: 1.4;
1285
- padding: var(--uix-space-2) var(--uix-space-3); border-radius: var(--uix-radius-sm);
1286
- /* no pointer-events:none — the bubble must be hoverable (WCAG 1.4.13, UIX-A11Y-1) */
1287
- box-shadow: var(--uix-shadow-popover); white-space: normal;
1288
- opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
1289
- }
1290
- .uix-tooltip__bubble:popover-open { opacity: 1; }
1291
- @starting-style { .uix-tooltip__bubble:popover-open { opacity: 0; } }
1292
-
1293
- /* legacy CSS-only tooltip — clipped by overflow ancestors; superseded by .uix-tooltip__bubble */
1294
- [data-uix-tip] { position: relative; }
1295
- [data-uix-tip]::after {
1296
- content: attr(data-uix-tip); position: absolute; bottom: calc(100% + 6px); left: 50%;
1297
- transform: translateX(-50%) translateY(var(--uix-lift));
1298
- background: var(--uix-text); color: var(--uix-bg-app); font-size: var(--uix-text-meta); font-weight: 500;
1299
- padding: var(--uix-space-2) var(--uix-space-3); border-radius: var(--uix-radius-sm); white-space: nowrap; box-shadow: var(--uix-shadow-popover);
1300
- opacity: 0; pointer-events: none; z-index: var(--uix-z-tooltip);
1301
- transition: opacity var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-out);
1302
- }
1303
- [data-uix-tip]:hover::after, [data-uix-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
1304
- /* when JS upgrades [data-uix-tip] to a top-layer bubble, drop the clipped CSS-only one */
1305
- .uix-has-js-tip [data-uix-tip]::after { content: none; }
1306
- }
1307
- /* uix progress bar + ring — depends only on --uix-* tokens. */
1308
- @layer uix.components {
1309
- .uix-progress { height: 8px; background: var(--uix-bg-active); border-radius: var(--uix-radius-pill); overflow: hidden; }
1310
- .uix-progress__bar { height: 100%; background: var(--uix-accent); border-radius: inherit; transition: width var(--uix-dur) var(--uix-ease-out); }
1311
- .uix-progress--indeterminate { position: relative; }
1312
- .uix-progress--indeterminate .uix-progress__bar { width: 40%; animation: uix-progress-slide 1.2s var(--uix-ease-in-out) infinite; }
1313
- @keyframes uix-progress-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(280%); } }
1314
-
1315
- .uix-ring { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
1316
- background: conic-gradient(var(--uix-accent) calc(var(--val, .66) * 360deg), var(--uix-bg-active) 0); }
1317
- .uix-ring__inner { width: 32px; height: 32px; border-radius: 50%; background: var(--uix-surface); display: grid; place-items: center; font-size: var(--uix-text-meta); font-weight: 600; }
1318
- }
1319
- /* uix meter / utilization bar (threshold tones) — depends only on --uix-* tokens. */
1320
- @layer uix.components {
1321
- .uix-meter { height: 8px; background: var(--uix-bg-active); border-radius: var(--uix-radius-pill); overflow: hidden; }
1322
- .uix-meter__fill { height: 100%; border-radius: inherit; background: var(--uix-success); transition: width var(--uix-dur) var(--uix-ease-out); }
1323
- .uix-meter__fill[data-tone="warning"] { background: var(--uix-warning); }
1324
- .uix-meter__fill[data-tone="danger"] { background: var(--uix-danger); }
1325
- .uix-meter__fill[data-tone="attention"] { background: var(--uix-attention); }
1326
- .uix-meter__fill[data-tone="overdue"] { background: var(--uix-overdue); }
1327
- }
1328
- /* uix timeline / activity feed — depends only on --uix-* tokens. */
1329
- @layer uix.components {
1330
- /* list reset — the React Timeline renders <ol>/<li> for semantics; keep visuals pixel-identical (UIX-A11Y-4) */
1331
- .uix-timeline { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
1332
- .uix-timeline__item { display: grid; grid-template-columns: 24px 1fr; gap: var(--uix-space-3); }
1333
- .uix-timeline__rail { display: flex; flex-direction: column; align-items: center; }
1334
- .uix-timeline__node { width: 12px; height: 12px; border-radius: 50%; background: var(--uix-accent); margin-top: var(--uix-space-1); flex: none; box-shadow: 0 0 0 3px var(--uix-brand-muted); }
1335
- .uix-timeline__line { width: 1px; flex: 1; background: var(--uix-border); margin: var(--uix-space-1) 0; }
1336
- .uix-timeline__item:last-child .uix-timeline__line { display: none; }
1337
- .uix-timeline__body { padding-bottom: var(--uix-space-5); }
1338
- .uix-timeline__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
1339
- }
1340
- /* uix tree view — WAI-ARIA tree (role=tree/treeitem/group). Depends only on --uix-* tokens.
1341
- ARIA (aria-expanded / aria-selected / aria-level) lives on the treeitem <li>, so the chevron,
1342
- selection, and collapse styling all key off the item, not the row (UIX-FIX-04). */
1343
- @layer uix.components {
1344
- .uix-tree, .uix-tree ul { list-style: none; margin: 0; padding: 0; }
1345
- .uix-tree__group { padding-left: var(--uix-space-5); }
1346
- .uix-tree__item { outline: none; } /* the focus ring is drawn on the row, below */
1347
- .uix-tree__row { display: flex; align-items: center; gap: var(--uix-space-2); padding: var(--uix-space-2) var(--uix-space-2); border-radius: var(--uix-radius-sm); cursor: pointer; color: var(--uix-text); font-size: var(--uix-text-body); }
1348
- .uix-tree__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1349
- .uix-tree__item > .uix-tree__row:hover { background: var(--uix-bg-hover); }
1350
- .uix-tree__item[aria-selected="true"] > .uix-tree__row { background: var(--uix-bg-active); }
1351
- .uix-tree__item:focus-visible > .uix-tree__row { outline: 2px solid var(--uix-ring); outline-offset: -2px; }
1352
- .uix-tree__toggle { width: 16px; height: 16px; flex: none; display: grid; place-items: center; color: var(--uix-text-muted); transition: transform var(--uix-dur) var(--uix-ease-out); }
1353
- .uix-tree__toggle svg { width: 14px; height: 14px; }
1354
- .uix-tree__item[aria-expanded="false"] > .uix-tree__row .uix-tree__toggle { transform: rotate(-90deg); }
1355
- .uix-tree__item[aria-expanded="false"] > .uix-tree__group { display: none; }
1356
- }
1357
- /* uix calendar (shared by date pickers) — depends only on --uix-* tokens. */
1358
- @layer uix.components {
1359
- .uix-calendar { width: 280px; border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); background: var(--uix-surface); padding: var(--uix-space-3); }
1360
- .uix-calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--uix-space-2); font-weight: 600; font-size: var(--uix-text-body); }
1361
- .uix-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--uix-space-1); }
1362
- .uix-calendar__dow { text-align: center; font-size: var(--uix-text-eyebrow); color: var(--uix-text-muted); padding: var(--uix-space-1) 0; }
1363
- .uix-calendar__day { aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--uix-radius-sm); font-size: var(--uix-text-meta); color: var(--uix-text); cursor: pointer; border: 0; background: transparent; }
1364
- .uix-calendar__day:hover { background: var(--uix-bg-hover); }
1365
- .uix-calendar__day[data-muted] { color: var(--uix-text-muted); opacity: .45; }
1366
- .uix-calendar__day[data-today] { box-shadow: inset 0 0 0 1px var(--uix-border-strong); }
1367
- .uix-calendar__day[data-range] { background: var(--uix-brand-muted); border-radius: 0; }
1368
- .uix-calendar__day[aria-selected="true"] { background: var(--uix-accent); color: var(--uix-accent-fg); }
1369
- }
1370
- /* uix states — empty + skeleton loaders. Depends only on --uix-* tokens. */
1371
- @layer uix.components {
1372
- .uix-empty { display: flex; flex-direction: column; align-items: center; gap: var(--uix-space-3); text-align: center; padding: var(--uix-space-8); color: var(--uix-text-muted); }
1373
- .uix-empty__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--uix-bg-subtle); color: var(--uix-text-muted); }
1374
- .uix-empty__icon svg { width: 22px; height: 22px; }
1375
- .uix-empty__title { font-size: var(--uix-text-h3); font-weight: 600; color: var(--uix-text); }
1376
- /* error tone — ErrorState reuses .uix-empty with a danger-toned icon */
1377
- .uix-empty__icon--danger { background: var(--uix-danger-bg); color: var(--uix-danger); }
1378
-
1379
- .uix-skeleton { background: linear-gradient(90deg, var(--uix-bg-subtle) 25%, var(--uix-bg-hover) 50%, var(--uix-bg-subtle) 75%); background-size: 200% 100%; animation: uix-shimmer 1.4s linear infinite; border-radius: var(--uix-radius-sm); }
1380
- .uix-skeleton--text { height: 12px; border-radius: var(--uix-radius-pill); }
1381
- .uix-skeleton--circle { border-radius: 50%; }
1382
- }
1383
- /* uix chart container + legend — palette + framing only; pair sample SVGs / a chart lib using --uix-chart-*. */
1384
- @layer uix.components {
1385
- .uix-chart { background: var(--uix-surface); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); padding: var(--uix-space-5); }
1386
- .uix-chart__title { font-size: var(--uix-text-h3); font-weight: 600; }
1387
- .uix-chart__subtitle { font-size: var(--uix-text-meta); color: var(--uix-text-muted); margin-bottom: var(--uix-space-4); }
1388
- .uix-legend { display: flex; flex-wrap: wrap; gap: var(--uix-space-3); margin-top: var(--uix-space-3); }
1389
- .uix-legend__item { display: inline-flex; align-items: center; gap: var(--uix-space-2); font-size: var(--uix-text-meta); color: var(--uix-text-hushed); }
1390
- .uix-legend__swatch { width: 10px; height: 10px; border-radius: var(--uix-radius-xs); flex: none; }
1391
- }
1392
- /* uix alert / inline banner — tone API. Depends only on --uix-* tokens. */
1393
- @layer uix.components {
1394
- .uix-alert {
1395
- display: flex; gap: var(--uix-space-3); padding: var(--uix-space-3) var(--uix-space-4); border-radius: var(--uix-radius-md);
1396
- border: 1px solid var(--tone-border, var(--uix-border)); background: var(--tone-bg, var(--uix-bg-subtle));
1397
- color: var(--uix-text); font-size: var(--uix-text-body);
1398
- }
1399
- .uix-alert__icon { color: var(--tone-fg, var(--uix-text)); flex: none; }
1400
- .uix-alert__icon svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
1401
- .uix-alert__title { font-weight: 600; margin-bottom: var(--uix-space-1); }
1402
- .uix-alert__body { font-size: var(--uix-text-meta); color: var(--uix-text-hushed); }
1403
- .uix-alert--info { --tone-bg: var(--uix-info-bg); --tone-border: color-mix(in srgb, var(--uix-info) 30%, transparent); --tone-fg: var(--uix-info-text); }
1404
- .uix-alert--success { --tone-bg: var(--uix-success-bg); --tone-border: color-mix(in srgb, var(--uix-success) 30%, transparent); --tone-fg: var(--uix-success); }
1405
- .uix-alert--warning { --tone-bg: var(--uix-warning-bg); --tone-border: color-mix(in srgb, var(--uix-warning) 40%, transparent); --tone-fg: var(--uix-warning); }
1406
- .uix-alert--danger { --tone-bg: var(--uix-danger-bg); --tone-border: color-mix(in srgb, var(--uix-danger) 30%, transparent); --tone-fg: var(--uix-danger-text); }
1407
- }
1408
- /* uix toast / notification — depends only on --uix-* tokens. JS appends to .uix-toaster. */
1409
- @layer uix.components {
1410
- .uix-toaster { position: fixed; bottom: 16px; right: 16px; z-index: var(--uix-z-toast); display: flex; flex-direction: column; gap: var(--uix-space-2); width: 340px; max-width: calc(100vw - 32px); }
1411
- .uix-toast {
1412
- display: flex; gap: var(--uix-space-3); align-items: flex-start; padding: var(--uix-space-3) var(--uix-space-4); border-radius: var(--uix-radius-md);
1413
- background: var(--uix-surface-2); border: 1px solid var(--uix-border); box-shadow: var(--uix-shadow-popover);
1414
- animation: uix-slide-in-right var(--uix-dur-slow) var(--uix-ease-out);
1415
- }
1416
- .uix-toast[data-leaving] { animation: uix-toast-out var(--uix-dur) var(--uix-ease-in) forwards; }
1417
- @keyframes uix-toast-out { to { opacity: 0; transform: translateX(16px); } }
1418
- .uix-toast__icon { flex: none; margin-top: 1px; }
1419
- .uix-toast__icon svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
1420
- .uix-toast__body { flex: 1; }
1421
- .uix-toast__title { font-weight: 600; font-size: var(--uix-text-body); }
1422
- .uix-toast__msg { font-size: var(--uix-text-meta); color: var(--uix-text-muted); margin-top: var(--uix-space-1); }
1423
- .uix-toast__close { border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; padding: var(--uix-space-1) var(--uix-space-2); border-radius: var(--uix-radius-xs); }
1424
- .uix-toast__close:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
1425
- .uix-toast--success .uix-toast__icon { color: var(--uix-success); }
1426
- .uix-toast--danger .uix-toast__icon { color: var(--uix-danger); }
1427
- .uix-toast--info .uix-toast__icon { color: var(--uix-info); }
1428
- }
1429
- /* uix modal / dialog — native <dialog>, animated enter/exit via @starting-style + allow-discrete. */
1430
- @layer uix.components {
1431
- .uix-dialog {
1432
- margin: auto; width: 100%; max-width: min(520px, 92vw); padding: 0; color: var(--uix-text);
1433
- border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg);
1434
- background: var(--uix-surface-2); box-shadow: var(--uix-shadow-overlay);
1435
- opacity: 0; transform: translateY(8px) scale(.98);
1436
- transition: opacity var(--uix-dur-slow) var(--uix-ease-out), transform var(--uix-dur-slow) var(--uix-ease-out),
1437
- overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
1438
- /* Author display values for both states required for the fade-in to animate: the allow-discrete
1439
- `display` transition only engages with author values, which also lets @starting-style fire.
1440
- With only the UA dialog display, the modal stays at opacity:0. Closed = none; open = block. */
1441
- display: none;
1442
- }
1443
- .uix-dialog[open] { opacity: 1; transform: none; display: block; }
1444
- @starting-style { .uix-dialog[open] { opacity: 0; transform: translateY(8px) scale(.98); } }
1445
- .uix-dialog::backdrop {
1446
- background: var(--uix-scrim); opacity: 0;
1447
- transition: opacity var(--uix-dur-slow) var(--uix-ease-out), overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
1448
- }
1449
- .uix-dialog[open]::backdrop { opacity: 1; }
1450
- @starting-style { .uix-dialog[open]::backdrop { opacity: 0; } }
1451
-
1452
- .uix-dialog__header { display: flex; align-items: center; gap: var(--uix-space-3); padding: var(--uix-space-4) var(--uix-space-5); border-bottom: 1px solid var(--uix-border); }
1453
- /* title is an <h2> for SR navigation (UIX-A11Y-1); inherits neutralize the base h2
1454
- heading font/tracking/leading so it renders exactly like the old <div> */
1455
- .uix-dialog__title { font-size: var(--uix-text-h3); font-weight: 600; font-family: inherit; letter-spacing: inherit; line-height: inherit; }
1456
- .uix-dialog__close { margin-left: auto; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--uix-radius-sm); }
1457
- .uix-dialog__close:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
1458
- .uix-dialog__close svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
1459
- .uix-dialog__body { padding: var(--uix-space-5); color: var(--uix-text-hushed); }
1460
- .uix-dialog__footer { display: flex; gap: var(--uix-space-2); justify-content: flex-end; padding: var(--uix-space-4) var(--uix-space-5); border-top: 1px solid var(--uix-border); }
1461
- }
1462
- /* uix drawer / side sheet — native <dialog> sliding from the right edge. */
1463
- @layer uix.components {
1464
- .uix-drawer {
1465
- margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(420px, 100vw); padding: 0; color: var(--uix-text);
1466
- border: 0; border-left: 1px solid var(--uix-border); border-radius: 0;
1467
- background: var(--uix-surface); box-shadow: var(--uix-shadow-overlay);
1468
- transform: translateX(100%);
1469
- transition: transform var(--uix-dur-slow) var(--uix-ease-out),
1470
- overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
1471
- /* Author display values for both states required for the slide-in (see peek.css). Closed = none. */
1472
- display: none;
1473
- }
1474
- .uix-drawer[open] { transform: none; display: flex; flex-direction: column; }
1475
- @starting-style { .uix-drawer[open] { transform: translateX(100%); } }
1476
- .uix-drawer::backdrop {
1477
- background: var(--uix-scrim); opacity: 0;
1478
- transition: opacity var(--uix-dur-slow) var(--uix-ease-out), overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
1479
- }
1480
- .uix-drawer[open]::backdrop { opacity: 1; }
1481
- @starting-style { .uix-drawer[open]::backdrop { opacity: 0; } }
1482
- .uix-drawer__header { display: flex; align-items: center; gap: var(--uix-space-3); padding: var(--uix-space-4) var(--uix-space-5); border-bottom: 1px solid var(--uix-border); }
1483
- .uix-drawer__body { padding: var(--uix-space-5); overflow-y: auto; flex: 1; }
1484
- .uix-drawer__footer { display: flex; gap: var(--uix-space-2); padding: var(--uix-space-4) var(--uix-space-5); border-top: 1px solid var(--uix-border); }
1485
- }
1486
- /* uix side-peek drawer (the §5.8 peek pattern, reused by table rows + sidebar items).
1487
- Native <dialog>, slides from the right; keyboard ↑/↓ navigates records (app.js). */
1488
- @layer uix.components {
1489
- .uix-peek {
1490
- margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: var(--uix-peek-w); padding: 0; color: var(--uix-text);
1491
- border: 0; border-left: 1px solid var(--uix-border); border-radius: 0;
1492
- background: var(--uix-surface); box-shadow: var(--uix-shadow-overlay);
1493
- transform: translateX(100%);
1494
- transition: transform var(--uix-dur-slow) var(--uix-ease-out),
1495
- overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
1496
- /* Author display values for BOTH states are required for the slide-in to animate: the
1497
- allow-discrete `display` transition only engages with author values, and that gating also
1498
- lets the @starting-style entrance fire. With only the UA dialog display, the panel stays
1499
- parked at translateX(100%). Closed = none; open = flex. */
1500
- display: none;
1501
- }
1502
- .uix-peek[open] { transform: none; display: flex; flex-direction: column; }
1503
- @starting-style { .uix-peek[open] { transform: translateX(100%); } }
1504
- .uix-peek::backdrop {
1505
- background: var(--uix-scrim); opacity: 0;
1506
- transition: opacity var(--uix-dur-slow) var(--uix-ease-out), overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
1507
- }
1508
- .uix-peek[open]::backdrop { opacity: 1; }
1509
- @starting-style { .uix-peek[open]::backdrop { opacity: 0; } }
1510
-
1511
- .uix-peek__header { display: flex; align-items: center; gap: var(--uix-space-3); padding: var(--uix-space-4) var(--uix-space-4); border-bottom: 1px solid var(--uix-border); }
1512
- .uix-peek__nav { display: inline-flex; gap: var(--uix-space-1); }
1513
- .uix-peek__navbtn { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--uix-border); background: var(--uix-surface); color: var(--uix-text); border-radius: var(--uix-radius-sm); cursor: pointer; }
1514
- .uix-peek__navbtn:hover { background: var(--uix-bg-hover); }
1515
- /* boundary nav uses aria-disabled (still focusable, so focus isn't stranded — UIX-A11Y-1);
1516
- mute it and suppress the hover cue like a disabled control */
1517
- .uix-peek__navbtn[aria-disabled="true"] { color: var(--uix-text-muted); cursor: default; }
1518
- .uix-peek__navbtn[aria-disabled="true"]:hover { background: var(--uix-surface); }
1519
- /* title is an <h2> for SR navigation (UIX-A11Y-1); inherits neutralize the base h2
1520
- heading font/tracking/leading so it renders exactly like the old <div> */
1521
- .uix-peek__title { font-size: var(--uix-text-h3); font-weight: 600; font-family: inherit; letter-spacing: inherit; line-height: inherit; }
1522
- .uix-peek__title a { color: var(--uix-link); }
1523
- .uix-peek__close { margin-left: auto; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--uix-radius-sm); }
1524
- .uix-peek__close:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
1525
- .uix-peek__body { padding: var(--uix-space-5); overflow-y: auto; flex: 1; }
1526
- .uix-peek__hint { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
1527
- .uix-peek__footer { display: flex; gap: var(--uix-space-2); padding: var(--uix-space-4) var(--uix-space-4); border-top: 1px solid var(--uix-border); }
1528
-
1529
- /* a table wired to open the peek (app.js sets data-uix-rowpeek): its rows read as clickable,
1530
- since clicking a ticket row is the queue's primary way to open the side-peek. */
1531
- [data-uix-rowpeek] tbody tr { cursor: pointer; }
1532
- [data-uix-rowpeek] tbody tr:hover td { background: var(--uix-bg-hover); }
1533
-
1534
- /* Column sizing + the id-cell click-through pattern now live in table.css (one story for
1535
- "table cells"). Size columns with .uix-col--w-* / .uix-col--flex + .uix-col--truncate
1536
- instead of the old [data-uix-table-v2] :nth-child(2) title cap. */
1537
- }
1538
- /* uix popover — generic anchored surface via the native Popover API; animated with @starting-style. */
1539
- @layer uix.components {
1540
- .uix-popover { margin: 0; padding: var(--uix-space-2); background: var(--uix-surface-2); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); box-shadow: var(--uix-shadow-popover); color: var(--uix-text); }
1541
- [popover].uix-popover {
1542
- opacity: 0; transform: translateY(calc(-1 * var(--uix-lift)));
1543
- transition: opacity var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-out),
1544
- overlay var(--uix-dur-fast) allow-discrete, display var(--uix-dur-fast) allow-discrete;
1545
- }
1546
- [popover].uix-popover:popover-open { opacity: 1; transform: none; }
1547
- @starting-style { [popover].uix-popover:popover-open { opacity: 0; transform: translateY(calc(-1 * var(--uix-lift))); } }
1548
- }
1549
- /* uix spinner + progress overlay — depends only on --uix-* tokens. */
1550
- @layer uix.components {
1551
- .uix-spinner { width: 20px; height: 20px; border: 2px solid var(--uix-border-strong); border-right-color: transparent; border-radius: 50%; display: inline-block; animation: uix-spin .6s linear infinite; }
1552
- .uix-spinner--accent { border-color: var(--uix-accent); border-right-color: transparent; }
1553
- .uix-spinner--lg { width: 32px; height: 32px; border-width: 3px; }
1554
- .uix-overlay-progress {
1555
- position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit;
1556
- background: color-mix(in srgb, var(--uix-bg-app) 60%, transparent); backdrop-filter: blur(2px);
1557
- }
1558
- }
1559
- /* uix detail layout — two-column record (main + side meta). Depends only on --uix-* tokens. */
1560
- @layer uix.components {
1561
- .uix-detail { display: grid; grid-template-columns: 1fr 280px; gap: var(--uix-space-5); align-items: start; }
1562
- .uix-detail__main { min-width: 0; display: flex; flex-direction: column; gap: var(--uix-space-4); }
1563
- .uix-detail__side { display: flex; flex-direction: column; gap: var(--uix-space-4); }
1564
- @media (max-width: 820px) { .uix-detail { grid-template-columns: 1fr; } }
1565
- }
1566
- /* uix comments thread + composer (@mention) — depends only on --uix-* tokens. */
1567
- @layer uix.components {
1568
- .uix-comments { display: flex; flex-direction: column; gap: var(--uix-space-4); }
1569
- .uix-comment { display: grid; grid-template-columns: 32px 1fr; gap: var(--uix-space-3); }
1570
- .uix-comment__body { background: var(--uix-bg-subtle); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); padding: var(--uix-space-3) var(--uix-space-3); }
1571
- .uix-comment__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); margin-bottom: var(--uix-space-1); }
1572
- .uix-comment__author { font-weight: 600; color: var(--uix-text); }
1573
- .uix-mention { color: var(--uix-link); background: var(--uix-brand-muted); padding: 0 var(--uix-space-1); border-radius: var(--uix-radius-xs); font-weight: 500; }
1574
- .uix-composer { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); }
1575
- .uix-composer:focus-within { border-color: var(--uix-ring); box-shadow: 0 0 0 3px var(--uix-brand-muted); }
1576
- .uix-composer textarea { width: 100%; border: 0; background: transparent; resize: vertical; padding: var(--uix-space-3) var(--uix-space-3); color: var(--uix-text); font: inherit; min-height: 60px; }
1577
- .uix-composer textarea:focus { outline: none; }
1578
- .uix-composer__bar { display: flex; justify-content: flex-end; gap: var(--uix-space-2); padding: var(--uix-space-2); border-top: 1px solid var(--uix-border); }
1579
- /* Block so the thumbnail drops onto its own line below the comment text (not inline with it). */
1580
- .uix-comment__image { display: block; margin-top: var(--uix-space-2); padding: 0; border-radius: var(--uix-radius-sm); overflow: hidden; border: 1px solid var(--uix-border); background: none; cursor: zoom-in; max-width: 200px; }
1581
- .uix-comment__image img { display: block; width: 100%; height: auto; }
1582
- }
1583
- /* uix emoji reactions — pills with counts + an add-reaction picker popover. Depends only on --uix-* tokens. */
1584
- @layer uix.components {
1585
- .uix-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-2); margin-top: var(--uix-space-2); }
1586
- .uix-reaction {
1587
- display: inline-flex; align-items: center; gap: var(--uix-space-2); padding: 1px var(--uix-space-2); line-height: 1.7;
1588
- border-radius: var(--uix-radius-pill); border: 1px solid var(--uix-border); background: var(--uix-surface);
1589
- color: var(--uix-text-hushed); font: inherit; font-size: var(--uix-text-meta); cursor: pointer;
1590
- }
1591
- .uix-reaction:hover { border-color: var(--uix-border-strong); }
1592
- .uix-reaction[data-mine] { background: var(--uix-brand-muted); border-color: var(--uix-accent); color: var(--uix-accent); }
1593
- .uix-reaction__count { font-variant-numeric: tabular-nums; }
1594
- .uix-reaction-add {
1595
- display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 24px;
1596
- border-radius: var(--uix-radius-pill); border: 1px dashed var(--uix-border-strong); background: transparent;
1597
- color: var(--uix-text-muted); cursor: pointer;
1598
- }
1599
- .uix-reaction-add:hover { color: var(--uix-text); border-color: var(--uix-text-muted); }
1600
- .uix-reaction-add svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
1601
- .uix-emoji-picker { display: flex; flex-wrap: wrap; gap: var(--uix-space-1); width: 196px; }
1602
- .uix-emoji-picker__btn { font-size: 18px; line-height: 1; padding: var(--uix-space-2); border: 0; background: transparent; border-radius: var(--uix-radius-sm); cursor: pointer; }
1603
- .uix-emoji-picker__btn:hover { background: var(--uix-bg-hover); }
1604
- }
1605
- /* uix media / device-asset card — image (or icon placeholder) + name + meta. Depends only on --uix-* tokens. */
1606
- @layer uix.components {
1607
- .uix-media { display: flex; gap: var(--uix-space-3); align-items: center; }
1608
- .uix-media__thumb { width: 64px; height: 64px; flex: none; border-radius: var(--uix-radius-md); overflow: hidden; background: var(--uix-bg-subtle); border: 1px solid var(--uix-border); display: grid; place-items: center; }
1609
- .uix-media__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
1610
- .uix-media__thumb svg { width: 28px; height: 28px; color: var(--uix-text-muted); }
1611
- .uix-media__name { font-weight: 600; }
1612
- .uix-media__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
1613
- }
1614
- /* uix image lightbox — native <dialog>, click a thumbnail to enlarge. Depends only on --uix-* tokens. */
1615
- @layer uix.components {
1616
- /* margin:auto centers the modal <dialog> in the viewport. Set explicitly (not
1617
- left to the UA default) so centering is robust regardless of any consumer
1618
- reset — base.css scopes its margin reset to typographic/form elements and
1619
- deliberately leaves <dialog> alone. Matches .uix-dialog. */
1620
- .uix-lightbox { margin: auto; border: 0; background: transparent; padding: 0; max-width: 92vw; max-height: 92vh; box-shadow: var(--uix-shadow-overlay); overflow: visible; }
1621
- /* A definite width is required: an SVG with a viewBox but no intrinsic width/height collapses to
1622
- 0×0 under width:auto, which then shrink-wraps the fit-content <dialog> to nothing (nothing shows
1623
- on open). min() keeps it within the viewport; height:auto preserves the aspect ratio. */
1624
- .uix-lightbox img { display: block; width: min(720px, 92vw); height: auto; max-height: 92vh; border-radius: var(--uix-radius-md); }
1625
- .uix-lightbox::backdrop { background: var(--uix-scrim-strong); }
1626
- }
1627
- /* uix prose content card + note callouts — for KB articles, descriptions, release notes. Depends only on --uix-* tokens. */
1628
- @layer uix.components {
1629
- .uix-prose { max-width: 66ch; color: var(--uix-text); }
1630
- .uix-prose > * + * { margin-top: var(--uix-space-3); }
1631
- .uix-prose h3 { font-size: var(--uix-text-h2); font-weight: 600; }
1632
- .uix-prose h4 { font-size: var(--uix-text-h3); font-weight: 600; margin-top: var(--uix-space-5); }
1633
- .uix-prose p { line-height: var(--uix-leading-body); color: var(--uix-text-hushed); }
1634
- .uix-prose a { color: var(--uix-link); }
1635
- .uix-prose ul, .uix-prose ol { padding-left: var(--uix-space-5); }
1636
- .uix-prose li + li { margin-top: var(--uix-space-1); }
1637
- .uix-prose code { font-family: var(--uix-font-mono); font-size: .9em; background: var(--uix-bg-subtle); padding: 1px var(--uix-space-2); border-radius: var(--uix-radius-xs); }
1638
- .uix-prose blockquote { border-left: 3px solid var(--uix-border-strong); padding-left: var(--uix-space-3); color: var(--uix-text-muted); }
1639
-
1640
- .uix-note { display: flex; gap: var(--uix-space-3); padding: var(--uix-space-3) var(--uix-space-4); border-radius: var(--uix-radius-md); border: 1px solid var(--uix-border); background: var(--uix-surface); }
1641
- .uix-note__icon { flex: none; }
1642
- .uix-note__icon svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
1643
- .uix-note__body { font-size: var(--uix-text-body); color: var(--uix-text); }
1644
- .uix-note__body > * + * { margin-top: var(--uix-space-2); }
1645
- .uix-note--info { background: var(--uix-info-bg); border-color: color-mix(in srgb, var(--uix-info) 30%, transparent); }
1646
- .uix-note--info .uix-note__icon { color: var(--uix-info); }
1647
- .uix-note--success { background: var(--uix-success-bg); border-color: color-mix(in srgb, var(--uix-success) 30%, transparent); }
1648
- .uix-note--success .uix-note__icon { color: var(--uix-success); }
1649
- .uix-note--warning { background: var(--uix-warning-bg); border-color: color-mix(in srgb, var(--uix-warning) 30%, transparent); }
1650
- .uix-note--warning .uix-note__icon { color: var(--uix-warning); }
1651
- .uix-note--danger { background: var(--uix-danger-bg); border-color: color-mix(in srgb, var(--uix-danger) 30%, transparent); }
1652
- .uix-note--danger .uix-note__icon { color: var(--uix-danger); }
1653
- }
1654
- /* uix kanban board / column — depends only on --uix-* tokens. */
1655
- @layer uix.components {
1656
- .uix-kanban { display: flex; gap: var(--uix-space-4); overflow-x: auto; padding-bottom: var(--uix-space-2); }
1657
- .uix-kanban__col { flex: 0 0 260px; background: var(--uix-bg-subtle); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); display: flex; flex-direction: column; max-height: 460px; }
1658
- .uix-kanban__head { display: flex; align-items: center; gap: var(--uix-space-2); padding: var(--uix-space-3) var(--uix-space-4); font-weight: 600; font-size: var(--uix-text-meta); }
1659
- .uix-kanban__count { margin-left: auto; color: var(--uix-text-muted); font-weight: 500; }
1660
- .uix-kanban__body { padding: 0 var(--uix-space-3) var(--uix-space-3); display: flex; flex-direction: column; gap: var(--uix-space-2); overflow-y: auto; }
1661
- .uix-kanban__card { background: var(--uix-surface); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); padding: var(--uix-space-3); box-shadow: var(--uix-shadow-sm); cursor: grab; transition: box-shadow var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-out); }
1662
- .uix-kanban__card:hover { box-shadow: var(--uix-shadow-popover); }
1663
- @media (hover: hover) and (pointer: fine) { .uix-kanban__card:hover { transform: translateY(calc(-1 * var(--uix-lift))); } }
1664
- .uix-kanban__card:active { cursor: grabbing; }
1665
- .uix-kanban__card-title { font-weight: 500; font-size: var(--uix-text-body); margin-bottom: var(--uix-space-2); }
1666
- .uix-kanban__card-meta { display: flex; align-items: center; gap: var(--uix-space-2); }
1667
- }
1668
- /* uix inbox master-detail — depends only on --uix-* tokens. */
1669
- @layer uix.components {
1670
- .uix-inbox { display: grid; grid-template-columns: 300px 1fr; border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); overflow: hidden; height: 420px; }
1671
- .uix-inbox__list { border-right: 1px solid var(--uix-border); overflow-y: auto; background: var(--uix-surface); }
1672
- .uix-inbox__item { position: relative; display: flex; flex-direction: column; gap: var(--uix-space-1); padding: var(--uix-space-3) var(--uix-space-4); border-bottom: 1px solid var(--uix-border); cursor: pointer; }
1673
- .uix-inbox__item:hover { background: var(--uix-bg-hover); }
1674
- /* keyboard active option (aria-activedescendant) mirrors the hover style (UIX-A11Y-2) */
1675
- .uix-inbox__item[data-active] { background: var(--uix-bg-hover); }
1676
- .uix-inbox__item[aria-selected="true"] { background: linear-gradient(to right, var(--uix-accent) 3px, var(--uix-brand-muted) 3px); }
1677
- .uix-inbox__item[data-unread] .uix-inbox__subject { font-weight: 600; }
1678
- .uix-inbox__subject { font-size: var(--uix-text-body); }
1679
- .uix-inbox__preview { font-size: var(--uix-text-meta); color: var(--uix-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1680
- .uix-inbox__detail { overflow-y: auto; padding: var(--uix-space-5); background: var(--uix-bg-app); }
1681
- /* narrow viewports stack to one pane: list by default, detail when the app sets
1682
- view="detail" — with a consumer-rendered Back control in the detail pane (UIX-A11Y-2) */
1683
- @media (max-width: 700px) {
1684
- .uix-inbox { grid-template-columns: 1fr; }
1685
- .uix-inbox__detail { display: none; }
1686
- .uix-inbox[data-view="detail"] .uix-inbox__list { display: none; }
1687
- .uix-inbox[data-view="detail"] .uix-inbox__detail { display: block; }
1688
- }
1689
- }
1690
- /* uix notification center — depends only on --uix-* tokens. */
1691
- @layer uix.components {
1692
- .uix-notifs { background: var(--uix-surface-2); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); overflow: hidden; }
1693
- .uix-notifs__head { display: flex; align-items: center; padding: var(--uix-space-3) var(--uix-space-4); border-bottom: 1px solid var(--uix-border); font-weight: 600; }
1694
- .uix-notif { display: grid; grid-template-columns: auto 1fr; gap: var(--uix-space-3); padding: var(--uix-space-3) var(--uix-space-4); border-bottom: 1px solid var(--uix-border); }
1695
- .uix-notif:last-child { border-bottom: 0; }
1696
- .uix-notif[data-unread] { background: var(--uix-brand-muted); }
1697
- .uix-notif__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--uix-accent); margin-top: var(--uix-space-2); }
1698
- .uix-notif[data-unread] .uix-notif__dot { background: var(--uix-accent); }
1699
- .uix-notif:not([data-unread]) .uix-notif__dot { background: transparent; }
1700
- .uix-notif__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
1701
- /* on the unread brand-muted tint, muted meta dips below AA — hushed composites darker on the tint */
1702
- .uix-notif[data-unread] .uix-notif__meta { color: var(--uix-text-hushed); }
1703
- }
1704
- /* uix label / tag taxonomy — colored via --label-color (set to a --uix-chart-* token). */
1705
- @layer uix.components {
1706
- .uix-label {
1707
- display: inline-flex; align-items: center; gap: var(--uix-space-2); padding: 1px var(--uix-space-2); border-radius: var(--uix-radius-sm);
1708
- font-size: var(--uix-text-meta); font-weight: 500;
1709
- background: color-mix(in srgb, var(--label-color, var(--uix-accent)) 16%, transparent);
1710
- /* Pull the hue toward the theme foreground so the text clears WCAG AA on its own 16% tint.
1711
- Raw chart hues (esp. amber #F59E0B at 1.9:1) are tuned for fills, not text-on-tint; the dot
1712
- keeps the full hue. --uix-text flips per theme, so this darkens on light and lightens on dark. */
1713
- color: color-mix(in srgb, var(--label-color, var(--uix-accent)) 55%, var(--uix-text));
1714
- }
1715
- .uix-label__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--label-color, var(--uix-accent)); }
1716
- }
1717
- /* uix attachment list — depends only on --uix-* tokens. */
1718
- @layer uix.components {
1719
- .uix-attachments { display: flex; flex-direction: column; gap: var(--uix-space-2); }
1720
- .uix-attachment { display: flex; align-items: center; gap: var(--uix-space-3); padding: var(--uix-space-2) var(--uix-space-3); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); }
1721
- .uix-attachment__icon { width: 32px; height: 32px; flex: none; border-radius: var(--uix-radius-sm); background: var(--uix-bg-subtle); display: grid; place-items: center; color: var(--uix-text-muted); }
1722
- .uix-attachment__icon svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
1723
- .uix-attachment__name { font-size: var(--uix-text-body); }
1724
- .uix-attachment__size { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
1725
- .uix-attachment__actions { margin-left: auto; }
1726
- }
1727
- /* uix deal / pipeline stage bar — depends only on --uix-* tokens. */
1728
- @layer uix.components {
1729
- .uix-pipeline { display: flex; gap: var(--uix-space-1); }
1730
- .uix-pipeline__stage { flex: 1; text-align: center; padding: var(--uix-space-2) var(--uix-space-2); font-size: var(--uix-text-meta); color: var(--uix-text-muted); background: var(--uix-bg-subtle); }
1731
- .uix-pipeline__stage:first-child { border-radius: var(--uix-radius-pill) 0 0 var(--uix-radius-pill); }
1732
- .uix-pipeline__stage:last-child { border-radius: 0 var(--uix-radius-pill) var(--uix-radius-pill) 0; }
1733
- .uix-pipeline__stage[data-state="done"] { background: var(--uix-accent); color: var(--uix-accent-fg); }
1734
- .uix-pipeline__stage[data-state="active"] { background: var(--uix-brand-muted); color: var(--uix-link); font-weight: 600; }
1735
- }
1736
- /* uix flow — workflow & pipeline diagrams: boxed nodes + connectors.
1737
- Depends only on --uix-* tokens. Edges are decorative inline SVG (aria-hidden);
1738
- straight runs use pure-CSS connectors. Node state follows the tone-API pattern
1739
- (see status-pill.css): state --modifiers set only --tone-* vars, the base reads them. */
1740
- @layer uix.components {
1741
-
1742
- /* ============================================================ node */
1743
- .uix-node {
1744
- position: relative;
1745
- display: inline-grid; grid-template-columns: auto 1fr; align-items: center;
1746
- gap: var(--uix-space-3); min-width: 132px; width: max-content; max-width: 220px; padding: var(--uix-space-3) var(--uix-space-3);
1747
- background: var(--uix-surface);
1748
- border: 1px solid var(--tone-border, var(--uix-border-strong));
1749
- border-radius: var(--uix-radius-md);
1750
- box-shadow: var(--uix-shadow-sm);
1751
- color: var(--uix-text); font-size: var(--uix-text-body); text-align: left;
1752
- }
1753
- .uix-node__icon {
1754
- display: grid; place-items: center; width: 30px; height: 30px; flex: none;
1755
- border-radius: var(--uix-radius-sm);
1756
- background: var(--tone-bg, var(--uix-bg-subtle));
1757
- color: var(--tone-fg, var(--uix-text-muted));
1758
- }
1759
- .uix-node__icon svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
1760
- .uix-node__body { min-width: 0; }
1761
- .uix-node__title { font-weight: 500; line-height: 1.25; }
1762
- .uix-node__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
1763
- .uix-node__status {
1764
- display: inline-flex; align-items: center; gap: var(--uix-space-2); margin-top: var(--uix-space-1);
1765
- font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow);
1766
- text-transform: uppercase; color: var(--tone-fg, var(--uix-text-muted));
1767
- }
1768
- .uix-node__status::before {
1769
- content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%;
1770
- background: var(--tone-dot, var(--uix-text-muted));
1771
- }
1772
-
1773
- /* connection handles — decorative connection-point affordance */
1774
- .uix-node__handle {
1775
- position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%;
1776
- background: var(--uix-surface); border: 1.5px solid var(--uix-border-strong);
1777
- transform: translateY(-50%);
1778
- }
1779
- .uix-node__handle--in { left: -5px; }
1780
- .uix-node__handle--out { right: -5px; }
1781
-
1782
- /* ---- state modifiers: set tone vars only ---- */
1783
- .uix-node--pending { --tone-bg: var(--uix-bg-subtle); --tone-fg: var(--uix-text-muted); --tone-dot: var(--uix-text-muted); --tone-border: var(--uix-border); }
1784
- .uix-node--active { --tone-bg: var(--uix-brand-muted); --tone-fg: var(--uix-link); --tone-dot: var(--uix-accent); --tone-border: var(--uix-accent); }
1785
- .uix-node--running { --tone-bg: var(--uix-info-bg); --tone-fg: var(--uix-info-text); --tone-dot: var(--uix-info); --tone-border: var(--uix-info); }
1786
- .uix-node--done { --tone-bg: var(--uix-success-bg); --tone-fg: var(--uix-success); --tone-dot: var(--uix-success); --tone-border: var(--uix-success); }
1787
- .uix-node--error { --tone-bg: var(--uix-danger-bg); --tone-fg: var(--uix-danger-text); --tone-dot: var(--uix-danger); --tone-border: var(--uix-danger); }
1788
- /* active/running read as "current" via a soft halo in their own tone */
1789
- .uix-node--active, .uix-node--running { box-shadow: var(--uix-shadow-sm), 0 0 0 3px var(--tone-bg); }
1790
-
1791
- /* running node spins its icon */
1792
- .uix-node--running .uix-node__icon svg { animation: uix-flow-spin 1s linear infinite; }
1793
-
1794
- /* ---- decision / diamond ---- */
1795
- .uix-node--decision {
1796
- min-width: 0; width: 112px; height: 112px; padding: 0; overflow: visible;
1797
- /* reset the base node's `auto 1fr` columns to one full-width track, else the lone title is
1798
- trapped in the left `auto` column and place-items:center can't center it over the diamond. */
1799
- display: grid; grid-template-columns: 1fr; place-items: center; background: transparent; border: 0; box-shadow: none;
1800
- }
1801
- .uix-node--decision::before {
1802
- content: ""; position: absolute; left: 50%; top: 50%; width: 78px; height: 78px;
1803
- transform: translate(-50%, -50%) rotate(45deg);
1804
- background: var(--tone-bg, var(--uix-surface));
1805
- border: 1px solid var(--tone-border, var(--uix-border-strong));
1806
- border-radius: var(--uix-radius-sm); box-shadow: var(--uix-shadow-sm);
1807
- }
1808
- .uix-node--decision .uix-node__title {
1809
- position: relative; z-index: var(--uix-z-raised); max-width: 88px; text-align: center;
1810
- font-size: var(--uix-text-meta); color: var(--tone-fg, var(--uix-text));
1811
- }
1812
-
1813
- /* ---- start / end terminals (pills) ---- */
1814
- .uix-node--start, .uix-node--end {
1815
- grid-template-columns: 1fr; min-width: 0; justify-items: center;
1816
- padding: var(--uix-space-2) var(--uix-space-5); border-radius: var(--uix-radius-pill);
1817
- background: var(--uix-bg-active); color: var(--uix-text-hushed); font-weight: 500;
1818
- }
1819
-
1820
- /* ============================================================ flow + edges */
1821
- .uix-flow {
1822
- position: relative; width: 100%;
1823
- color: var(--uix-border-strong); /* edges inherit via currentColor */
1824
- }
1825
- .uix-flow__edges {
1826
- position: absolute; inset: 0; width: 100%; height: 100%;
1827
- overflow: visible; pointer-events: none; /* never block node hover/focus */
1828
- }
1829
- .uix-flow__edge { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
1830
- .uix-flow__edge--branch-yes { stroke: var(--uix-success); }
1831
- .uix-flow__edge--branch-no { stroke: var(--uix-danger); }
1832
- .uix-flow__edge--loop { stroke: var(--uix-accent); stroke-dasharray: 5 4; }
1833
- .uix-flow__arrow { fill: currentColor; }
1834
- .uix-flow__edge-label { fill: var(--uix-text-muted); font-family: var(--uix-font-sans); font-size: var(--uix-text-eyebrow); }
1835
- .uix-flow__edge-label--loop { fill: var(--uix-accent); }
1836
-
1837
- /* hovering/focusing a diagram sets its edges "flowing" (marching dashes) to read direction */
1838
- @media (hover: hover) and (pointer: fine) {
1839
- .uix-flow:hover .uix-flow__edge,
1840
- .uix-flow:focus-within .uix-flow__edge {
1841
- stroke-dasharray: 5 4; animation: uix-flow-march var(--uix-dur-slow) linear infinite;
1842
- }
1843
- }
1844
-
1845
- /* ---- linear: flex row of nodes + pure-CSS connectors (no SVG) ---- */
1846
- .uix-flow--linear .uix-flow__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--uix-space-1); }
1847
- .uix-flow__connector {
1848
- position: relative; flex: 1 1 30px; min-width: 30px; height: 0;
1849
- border-top: 1.5px solid var(--uix-border-strong); margin: 0 var(--uix-space-1);
1850
- }
1851
- .uix-flow__connector::after {
1852
- content: ""; position: absolute; right: -1px; top: 50%; width: 6px; height: 6px;
1853
- border-top: 1.5px solid var(--uix-border-strong); border-right: 1.5px solid var(--uix-border-strong);
1854
- transform: translate(0, -50%) rotate(45deg);
1855
- }
1856
- .uix-flow__connector[data-done] { border-color: var(--uix-success); }
1857
- .uix-flow__connector[data-done]::after { border-color: var(--uix-success); }
1858
-
1859
- /* ---- branch / loop / mindmap: absolutely-positioned nodes over an SVG edge layer.
1860
- Container aspect-ratio matches each SVG viewBox so % node positions and path
1861
- coordinates scale together (uniform), keeping edges glued to nodes at any width. */
1862
- .uix-flow--branch, .uix-flow--loop { aspect-ratio: 5 / 2; }
1863
- .uix-flow--mindmap { aspect-ratio: 2 / 1; }
1864
- .uix-flow--branch .uix-node,
1865
- .uix-flow--loop .uix-node,
1866
- .uix-flow--mindmap .uix-node,
1867
- .uix-flow--canvas .uix-node { position: absolute; transform: translate(-50%, -50%); }
1868
-
1869
- /* mindmap leaves sit tighter than default nodes */
1870
- .uix-flow--mindmap .uix-node { min-width: 0; }
1871
- .uix-flow--mindmap .uix-node--hub { min-width: 120px; }
1872
-
1873
- /* ============================================================ builder canvas */
1874
- .uix-flow--canvas {
1875
- display: grid; grid-template-columns: 188px 1fr;
1876
- border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg);
1877
- overflow: hidden; background: var(--uix-surface); width: 100%;
1878
- }
1879
- .uix-flow__palette {
1880
- display: flex; flex-direction: column; gap: var(--uix-space-2); padding: var(--uix-space-4);
1881
- border-right: 1px solid var(--uix-border); background: var(--uix-surface);
1882
- }
1883
- .uix-flow__palette-title {
1884
- font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow);
1885
- text-transform: uppercase; color: var(--uix-text-muted); margin-bottom: var(--uix-space-1);
1886
- }
1887
- .uix-flow__chip {
1888
- display: flex; align-items: center; gap: var(--uix-space-2); padding: var(--uix-space-2) var(--uix-space-3);
1889
- border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md);
1890
- background: var(--uix-surface); color: var(--uix-text);
1891
- font-size: var(--uix-text-meta); cursor: grab; box-shadow: var(--uix-shadow-sm);
1892
- transition: box-shadow var(--uix-dur-fast) var(--uix-ease-out),
1893
- transform var(--uix-dur-fast) var(--uix-ease-out);
1894
- }
1895
- .uix-flow__chip svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); color: var(--uix-text-muted); flex: none; }
1896
- .uix-flow__chip:active { cursor: grabbing; }
1897
- @media (hover: hover) and (pointer: fine) {
1898
- .uix-flow__chip:hover { box-shadow: var(--uix-shadow-popover); transform: translateY(calc(-1 * var(--uix-lift))); }
1899
- }
1900
- /* the canvas: a dotted grid, free-placed nodes, one SVG edge layer */
1901
- .uix-flow__canvas {
1902
- position: relative; aspect-ratio: 16 / 9; min-height: 280px;
1903
- background-color: var(--uix-bg-subtle);
1904
- background-image: radial-gradient(var(--uix-border-strong) 1px, transparent 1px);
1905
- background-size: 22px 22px; background-position: -1px -1px;
1906
- }
1907
- .uix-flow--canvas .uix-node { cursor: grab; }
1908
- .uix-flow--canvas .uix-node:active { cursor: grabbing; }
1909
-
1910
- /* selected node ring — mirrors the focus-ring construction (double box-shadow on --uix-ring) */
1911
- .uix-flow .uix-node[data-selected] {
1912
- border-color: var(--uix-ring);
1913
- box-shadow: 0 0 0 2px var(--uix-surface), 0 0 0 4px var(--uix-ring);
1914
- }
1915
- /* keyboard/click selection on focusable canvas pieces — no JS needed */
1916
- .uix-flow__chip:focus-visible,
1917
- .uix-flow--canvas .uix-node:focus-visible {
1918
- outline: none; border-color: var(--uix-ring);
1919
- box-shadow: 0 0 0 2px var(--uix-surface), 0 0 0 4px var(--uix-ring);
1920
- }
1921
-
1922
- /* ============================================================ motion */
1923
- @keyframes uix-flow-spin { to { transform: rotate(360deg); } }
1924
- @keyframes uix-flow-march { to { stroke-dashoffset: -18; } }
1925
-
1926
- @media (prefers-reduced-motion: reduce) {
1927
- .uix-node--running .uix-node__icon svg,
1928
- .uix-flow:hover .uix-flow__edge,
1929
- .uix-flow:focus-within .uix-flow__edge { animation: none; }
1930
- }
1931
- }
1932
- /* uix audit-log entry — depends only on --uix-* tokens. */
1933
- @layer uix.components {
1934
- .uix-audit { display: flex; flex-direction: column; }
1935
- .uix-audit__row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--uix-space-3); align-items: center; padding: var(--uix-space-3) 0; border-bottom: 1px solid var(--uix-border); font-size: var(--uix-text-meta); }
1936
- .uix-audit__row:last-child { border-bottom: 0; }
1937
- .uix-audit__actor { font-weight: 500; color: var(--uix-text); }
1938
- .uix-audit__detail { color: var(--uix-text-hushed); }
1939
- .uix-audit__detail ins { background: var(--uix-success-bg); color: var(--uix-success); text-decoration: none; padding: 0 var(--uix-space-1); border-radius: var(--uix-radius-xs); }
1940
- .uix-audit__detail del { background: var(--uix-danger-bg); color: var(--uix-danger-text); text-decoration: line-through; padding: 0 var(--uix-space-1); border-radius: var(--uix-radius-xs); }
1941
- .uix-audit__time { color: var(--uix-text-muted); white-space: nowrap; }
1942
- }
1943
- /* uix contact / customer card (CRM) — depends only on --uix-* tokens. */
1944
- @layer uix.components {
1945
- .uix-contact { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--uix-space-1); padding: var(--uix-space-5); }
1946
- .uix-contact__name { font-size: var(--uix-text-h3); font-weight: 600; margin-top: var(--uix-space-2); }
1947
- .uix-contact__role { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
1948
- .uix-contact__actions { display: flex; gap: var(--uix-space-2); margin-top: var(--uix-space-3); align-self: stretch; }
1949
- .uix-contact__actions > .uix-btn { flex: 1; }
1950
- .uix-contact__stats { display: flex; gap: var(--uix-space-5); margin-top: var(--uix-space-4); }
1951
- .uix-contact__stat { text-align: center; }
1952
- .uix-contact__stat b { display: block; font-size: var(--uix-text-h3); }
1953
- .uix-contact__stat span { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
1954
- }
1955
- /* uix SLA indicator / timer (breach states) — depends only on --uix-* tokens. */
1956
- @layer uix.components {
1957
- .uix-sla { display: inline-flex; align-items: center; gap: var(--uix-space-2); font-size: var(--uix-text-meta); font-weight: 500; color: var(--uix-text-hushed); }
1958
- .uix-sla svg { width: 14px; height: 14px; }
1959
- .uix-sla[data-state="ok"] { color: var(--uix-success); }
1960
- .uix-sla[data-state="at-risk"] { color: var(--uix-warning-text); }
1961
- .uix-sla[data-state="breach"] { color: var(--uix-danger-text); }
1962
- }
1963
- /* uix utility/typography bits — code, pre, blockquote, divider, status dots. Depends only on --uix-* tokens. */
1964
- @layer uix.components {
1965
- .uix-code { font-family: var(--uix-font-mono); font-size: .9em; background: var(--uix-bg-subtle); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-xs); padding: .1em .4em; color: var(--uix-text); }
1966
- .uix-pre { font-family: var(--uix-font-mono); font-size: var(--uix-text-meta); line-height: 1.5; background: var(--uix-bg-subtle); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); padding: var(--uix-space-4) var(--uix-space-4); overflow-x: auto; color: var(--uix-text); }
1967
- .uix-blockquote { border-left: 3px solid var(--uix-accent); padding: var(--uix-space-1) 0 var(--uix-space-1) var(--uix-space-4); color: var(--uix-text-hushed); font-style: italic; }
1968
- .uix-divider { height: 1px; background: var(--uix-border); border: 0; margin: var(--uix-space-4) 0; }
1969
- .uix-divider--label { display: flex; align-items: center; gap: var(--uix-space-3); color: var(--uix-text-muted); font-size: var(--uix-text-meta); background: transparent; height: auto; }
1970
- .uix-divider--label::before, .uix-divider--label::after { content: ""; flex: 1; height: 1px; background: var(--uix-border); }
1971
- .uix-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--uix-text-muted); }
1972
- .uix-dot--success { background: var(--uix-success); }
1973
- .uix-dot--warning { background: var(--uix-warning); }
1974
- .uix-dot--danger { background: var(--uix-danger); }
1975
- .uix-dot--info { background: var(--uix-info); }
1976
- }
1977
- /* uix heartbeat / live status indicator — a pulsing ping. Respects reduced-motion (guard stops the ping). */
1978
- @layer uix.components {
1979
- .uix-heartbeat { position: relative; display: inline-grid; place-items: center; width: 8px; height: 8px; flex: none; }
1980
- .uix-heartbeat__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--uix-success); z-index: var(--uix-z-raised); }
1981
- .uix-heartbeat__ping { position: absolute; inset: 0; border-radius: 50%; background: var(--uix-success); animation: uix-ping 1.6s var(--uix-ease-out) infinite; }
1982
- @keyframes uix-ping { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.8); opacity: 0; } }
1983
- .uix-heartbeat--warning .uix-heartbeat__dot, .uix-heartbeat--warning .uix-heartbeat__ping { background: var(--uix-warning); }
1984
- .uix-heartbeat--danger .uix-heartbeat__dot, .uix-heartbeat--danger .uix-heartbeat__ping { background: var(--uix-danger); }
1985
- .uix-heartbeat--idle .uix-heartbeat__dot { background: var(--uix-text-muted); }
1986
- .uix-heartbeat--idle .uix-heartbeat__ping { display: none; }
1987
- .uix-live { display: inline-flex; align-items: center; gap: var(--uix-space-2); font-size: var(--uix-text-meta); font-weight: 500; color: var(--uix-text-hushed); }
1988
- }
1989
- /* uix editorial-home kit — the intranet "editorial" landing patterns (INTRA-04):
1990
- * page intro + search, shortcut grid, notice queue, featured stage + rundown,
1991
- * section heads, content/rail grids, news lead, content list, resource grid,
1992
- * stat line, event + status rows. Ported 1:1 from the approved TENSOR intranet
1993
- * prototype (Docs/prototypes/intranet-reimagined/mockups.css); spacing/type
1994
- * snapped to the --uix-* scales per the contract gate, editorial display sizes
1995
- * justified in tests/raw-value-allowlist.json. Depends only on --uix-* tokens. */
1996
- @layer uix.components {
1997
- /* ── page intro — kicker/title/lede beside the search well ─────────────────── */
1998
- .uix-page-intro { margin-top: var(--uix-space-6); display: grid; grid-template-columns: minmax(300px, 0.8fr) minmax(460px, 1.2fr); align-items: end; gap: var(--uix-space-7); }
1999
- .uix-page-intro .uix-page-lede { margin-top: var(--uix-space-2); }
2000
- .uix-page-kicker { margin: 0 0 var(--uix-space-2); color: var(--uix-text-hushed); font-size: var(--uix-text-meta); }
2001
- .uix-page-title { max-width: 760px; margin: 0; font-family: var(--uix-font-heading); font-size: clamp(30px, 4vw, 48px); font-weight: 400; letter-spacing: -0.035em; line-height: 1.06; }
2002
- .uix-page-lede { max-width: 680px; margin: var(--uix-space-3) 0 0; color: var(--uix-text-hushed); font-size: var(--uix-text-h3); }
2003
- .uix-intro-search__label { margin: 0 0 var(--uix-space-2); color: var(--uix-text-hushed); font-size: var(--uix-text-meta); }
2004
-
2005
- .uix-searchbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--uix-space-2); }
2006
- .uix-searchbar .uix-input { min-height: 44px; padding-left: 42px; }
2007
- .uix-searchbar__wrap { position: relative; }
2008
- .uix-searchbar__wrap > svg { position: absolute; top: 50%; left: 14px; z-index: var(--uix-z-raised); width: 17px; height: 17px; color: var(--uix-text-hushed); transform: translateY(-50%); pointer-events: none; }
2009
-
2010
- .uix-shortcut-grid { grid-column: 1 / -1; margin-top: var(--uix-space-4); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--uix-space-2); }
2011
- .uix-shortcut-grid .uix-btn { min-height: 42px; justify-content: flex-start; }
2012
-
2013
- /* ── notice queue — rotating "important updates" banner ────────────────────── */
2014
- .uix-notice { min-height: 48px; padding: var(--uix-space-2) var(--uix-space-4); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--uix-space-3); border-left: 2px solid var(--uix-text); background: var(--uix-bg-subtle); }
2015
- .uix-notice__copy { margin: 0; font-size: var(--uix-text-body); }
2016
- .uix-notice__copy strong { font-weight: 600; }
2017
- .uix-notice__content { min-width: 0; }
2018
- .uix-notice__meta { margin: var(--uix-space-1) 0 0; color: var(--uix-text-hushed); font-size: var(--uix-text-eyebrow); }
2019
- .uix-notice__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--uix-space-2); }
2020
- .uix-notice__position { margin-right: var(--uix-space-1); color: var(--uix-text-hushed); font-size: var(--uix-text-eyebrow); white-space: nowrap; }
2021
- .uix-notice__arrow--previous svg { transform: rotate(180deg); }
2022
-
2023
- /* ── featured briefing — ONE card: stage + rundown are zones inside it, split
2024
- by an internal hairline. The selected rundown item grows a caret that sits
2025
- on (and breaks) that hairline toward the stage, and its ordinal becomes a
2026
- filled chip echoed by .uix-featured__now in the stage eyebrow — that chip
2027
- pairing is what carries the selection link once the card stacks. ─────────── */
2028
- .uix-featured { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.7fr); align-items: stretch; overflow: hidden; border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); }
2029
- .uix-page-intro + .uix-featured { margin-top: var(--uix-space-6); }
2030
-
2031
- .uix-featured__stage { min-width: 0; min-height: 302px; display: grid; grid-template-columns: minmax(260px, 0.95fr) minmax(300px, 1.05fr); }
2032
- .uix-featured__visual {
2033
- min-height: 302px; padding: var(--uix-space-6) var(--uix-space-7); display: flex; align-items: flex-end;
2034
- position: relative; overflow: hidden;
2035
- background:
2036
- linear-gradient(135deg, transparent 20%, color-mix(in srgb, var(--uix-text) 8%, transparent)),
2037
- var(--uix-bg-subtle);
2038
- }
2039
- .uix-featured__visual::before,
2040
- .uix-featured__visual::after { content: ""; position: absolute; border: 1px solid var(--uix-border-strong); border-radius: 50%; }
2041
- .uix-featured__visual::before { width: 240px; height: 240px; top: -78px; right: -42px; }
2042
- .uix-featured__visual::after { width: 144px; height: 144px; top: 72px; right: 56px; }
2043
- .uix-featured__content { padding: var(--uix-space-7); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
2044
- .uix-featured__eyebrow { margin: 0 0 var(--uix-space-4); color: var(--uix-text-hushed); font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; }
2045
- .uix-featured__title { margin: 0; font-family: var(--uix-font-heading); font-size: clamp(26px, 3vw, 38px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.08; }
2046
- .uix-featured__description { margin: var(--uix-space-3) 0 var(--uix-space-5); color: var(--uix-text-hushed); }
2047
- .uix-featured__meta { margin: 0 0 var(--uix-space-5); color: var(--uix-text-hushed); font-size: var(--uix-text-meta); }
2048
- .uix-featured__now { min-width: 22px; height: 22px; display: inline-grid; place-items: center; margin-right: var(--uix-space-2); border-radius: var(--uix-radius-pill); background: var(--uix-text); color: var(--uix-bg-app); font-variant-numeric: tabular-nums; letter-spacing: 0; }
2049
-
2050
- .uix-story-signal { position: absolute; top: 26px; left: 28px; z-index: var(--uix-z-raised); }
2051
- .uix-story-signal__value { display: block; font-family: var(--uix-font-heading); font-size: 48px; font-weight: 400; letter-spacing: -0.04em; line-height: 1; }
2052
- .uix-story-signal__label { display: block; margin-top: var(--uix-space-2); color: var(--uix-text-hushed); font-size: var(--uix-text-meta); }
2053
-
2054
- .uix-story-diagram { width: min(100%, 500px); position: relative; z-index: var(--uix-z-raised); display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: var(--uix-space-3); }
2055
- .uix-story-diagram__bar { min-height: 52px; border: 1px solid var(--uix-border-strong); border-radius: var(--uix-radius-sm); background: color-mix(in srgb, var(--uix-surface) 84%, transparent); }
2056
- .uix-story-diagram__bar:nth-child(2) { min-height: 104px; }
2057
- .uix-story-diagram__bar:nth-child(3) { min-height: 126px; background: var(--uix-text); }
2058
-
2059
- .uix-rundown { min-width: 0; padding: var(--uix-space-4); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--uix-space-3); border-left: 1px solid var(--uix-border); }
2060
- .uix-rundown__head { padding: var(--uix-space-1) var(--uix-space-1) var(--uix-space-3); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--uix-space-3); border-bottom: 1px solid var(--uix-border); }
2061
- .uix-rundown__eyebrow { margin: 0; color: var(--uix-text-hushed); font-size: var(--uix-text-eyebrow); letter-spacing: 0.05em; text-transform: uppercase; }
2062
- .uix-rundown__title { margin: var(--uix-space-1) 0 0; font-family: var(--uix-font-heading); font-size: 18px; font-weight: 400; }
2063
- .uix-rundown__items { min-width: 0; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: var(--uix-space-2); }
2064
- .uix-rundown__item { position: relative; min-width: 0; min-height: 68px; padding: var(--uix-space-3); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--uix-space-3); border: 1px solid transparent; border-radius: var(--uix-radius-sm); background: transparent; color: var(--uix-text); cursor: pointer; font: inherit; text-align: left; }
2065
- .uix-rundown__item:hover { background: var(--uix-bg-hover); }
2066
- .uix-rundown__item[data-selected="true"] { border-color: var(--uix-border); background: var(--uix-bg-active); }
2067
- /* caret centered on the internal divider (16px zone pad + 1px hairline + half of the 12px glyph) */
2068
- .uix-rundown__item[data-selected="true"]::before { content: ""; position: absolute; top: 50%; left: -23px; width: 12px; height: 12px; transform: translateY(-50%) rotate(45deg); background: var(--uix-surface); border-left: 1px solid var(--uix-border-strong); border-bottom: 1px solid var(--uix-border-strong); }
2069
- .uix-rundown__number { color: var(--uix-text-hushed); font-size: var(--uix-text-eyebrow); font-variant-numeric: tabular-nums; }
2070
- .uix-rundown__item[data-selected="true"] .uix-rundown__number { min-width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: var(--uix-radius-pill); background: var(--uix-text); color: var(--uix-bg-app); }
2071
- .uix-rundown__topic,
2072
- .uix-rundown__item-title { display: block; }
2073
- .uix-rundown__topic { color: var(--uix-text-hushed); font-size: var(--uix-text-eyebrow); }
2074
- .uix-rundown__item-title { margin-top: var(--uix-space-1); font-weight: 600; line-height: 1.2; }
2075
-
2076
- /* ── section heads ─────────────────────────────────────────────────────────── */
2077
- .uix-section-head { min-height: 36px; margin-bottom: var(--uix-space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--uix-space-4); }
2078
- .uix-section-title { margin: 0; font-family: var(--uix-font-heading); font-size: var(--uix-text-h2); font-weight: 400; letter-spacing: var(--uix-tracking-tight); }
2079
- .uix-section-link { color: var(--uix-text-hushed); font-size: var(--uix-text-meta); text-decoration: none; }
2080
- .uix-section-link:hover { color: var(--uix-text); }
2081
-
2082
- /* ── content grid + rail ───────────────────────────────────────────────────── */
2083
- .uix-content-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr); gap: var(--uix-space-7); align-items: start; }
2084
- .uix-content-grid--balanced { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2085
- .uix-content-grid > * { min-width: 0; }
2086
- .uix-rail { display: grid; gap: var(--uix-space-4); }
2087
- .uix-rail-card { padding: var(--uix-space-5); }
2088
- .uix-rail-card__title { margin: 0; font-family: var(--uix-font-heading); font-size: 18px; font-weight: 400; }
2089
- .uix-rail-card__meta { margin: var(--uix-space-1) 0 0; color: var(--uix-text-hushed); font-size: var(--uix-text-meta); }
2090
-
2091
- /* ── news lead + content list ──────────────────────────────────────────────── */
2092
- .uix-news-lead { padding: 0 0 var(--uix-space-5); border-bottom: 1px solid var(--uix-border); }
2093
- .uix-news-lead__meta,
2094
- .uix-list-meta { color: var(--uix-text-hushed); font-size: var(--uix-text-meta); }
2095
- .uix-news-lead__title { margin: var(--uix-space-2) 0 var(--uix-space-1); font-family: var(--uix-font-heading); font-size: var(--uix-text-h2); font-weight: 400; letter-spacing: var(--uix-tracking-tight); }
2096
- .uix-news-lead__summary { margin: 0; color: var(--uix-text-hushed); }
2097
-
2098
- .uix-content-list { margin: 0; padding: 0; list-style: none; }
2099
- .uix-content-list__item { min-height: 68px; padding: var(--uix-space-3) 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--uix-space-4); border-bottom: 1px solid var(--uix-border); }
2100
- .uix-content-list__item:last-child { border-bottom: 0; }
2101
- .uix-content-list__title { margin: 0; font-weight: 600; }
2102
- .uix-content-list__meta { margin: var(--uix-space-1) 0 0; color: var(--uix-text-hushed); font-size: var(--uix-text-meta); }
2103
-
2104
- /* ── resource grid ─────────────────────────────────────────────────────────── */
2105
- .uix-resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--uix-space-2); }
2106
- .uix-resource-grid .uix-btn { min-height: 44px; justify-content: flex-start; }
2107
-
2108
- /* ── stat line ─────────────────────────────────────────────────────────────── */
2109
- .uix-stat-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--uix-border); }
2110
- .uix-stat-line__item { padding: var(--uix-space-4) var(--uix-space-2) var(--uix-space-1) 0; }
2111
- .uix-stat-line__value { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
2112
- .uix-stat-line__label { color: var(--uix-text-hushed); font-size: var(--uix-text-eyebrow); }
2113
-
2114
- /* ── event + status rows ───────────────────────────────────────────────────── */
2115
- .uix-event-row { min-height: 64px; padding-block: var(--uix-space-3); display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: var(--uix-space-3); border-bottom: 1px solid var(--uix-border); }
2116
- .uix-event-row:last-child { border-bottom: 0; }
2117
- .uix-event-date { text-align: center; }
2118
- .uix-event-date__month { display: block; color: var(--uix-text-hushed); font-size: var(--uix-text-eyebrow); text-transform: uppercase; }
2119
- .uix-event-date__day { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
2120
- .uix-event-row__title { margin: 0; font-weight: 600; }
2121
- .uix-event-row__meta { margin: var(--uix-space-1) 0 0; color: var(--uix-text-hushed); font-size: var(--uix-text-meta); }
2122
-
2123
- .uix-status-row { min-height: 48px; display: flex; align-items: center; gap: var(--uix-space-3); border-bottom: 1px solid var(--uix-border); }
2124
- .uix-status-row:last-child { border-bottom: 0; }
2125
- .uix-status-row__name { flex: 1; }
2126
-
2127
- /* ── responsive — ported 1:1 from the prototype's 920/620 breakpoints ──────── */
2128
- @media (max-width: 920px) {
2129
- .uix-page-intro,
2130
- .uix-content-grid,
2131
- .uix-content-grid--balanced,
2132
- .uix-featured { grid-template-columns: 1fr; }
2133
-
2134
- .uix-rundown { border-left: 0; border-top: 1px solid var(--uix-border); }
2135
- .uix-rundown__items { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr; }
2136
- /* stacked zones: the caret flips to point up at the stage above */
2137
- .uix-rundown__item[data-selected="true"]::before { top: -23px; left: 22px; transform: rotate(45deg); border-bottom: 0; border-top: 1px solid var(--uix-border-strong); }
2138
-
2139
- .uix-shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2140
- }
2141
-
2142
- @media (max-width: 620px) {
2143
- .uix-featured__stage { grid-template-columns: 1fr; }
2144
- .uix-featured__visual { min-height: 190px; }
2145
- .uix-featured__content { padding: var(--uix-space-6); }
2146
-
2147
- .uix-rundown__items { grid-template-columns: 1fr; grid-template-rows: repeat(3, auto); }
2148
- /* vertical item stack: the directional caret stops making sense — the
2149
- ordinal chips (item number + .uix-featured__now) carry the pairing */
2150
- .uix-rundown__item[data-selected="true"]::before { display: none; }
2151
-
2152
- .uix-notice { grid-template-columns: auto minmax(0, 1fr); }
2153
- .uix-notice > .uix-btn { grid-column: 2; justify-self: start; }
2154
- .uix-notice__actions { grid-column: 1 / -1; width: 100%; justify-content: flex-start; flex-wrap: wrap; }
2155
- .uix-notice__position { flex: 1; }
2156
-
2157
- .uix-searchbar { grid-template-columns: 1fr; }
2158
- .uix-searchbar .uix-btn { min-height: 44px; }
2159
-
2160
- .uix-page-intro { margin-top: var(--uix-space-5); gap: var(--uix-space-5); }
2161
- .uix-shortcut-grid { grid-template-columns: 1fr 1fr; }
2162
- .uix-shortcut-grid .uix-btn { min-height: 48px; }
2163
-
2164
- .uix-story-signal { top: 20px; left: 20px; }
2165
- .uix-story-signal__value { font-size: var(--uix-text-display); }
2166
-
2167
- .uix-resource-grid { grid-template-columns: 1fr; }
2168
-
2169
- .uix-stat-line { grid-template-columns: 1fr; }
2170
- .uix-stat-line__item { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--uix-border); }
2171
- }
2172
- }
2173
- /* uix link patterns — the quiet link, for anchors whose CONTAINER is the affordance.
2174
- *
2175
- * The base layer styles anchors as in-text content links: --uix-link colour, and
2176
- * classless [href] anchors carry a persistent underline (WCAG 1.4.1 / link-in-text-block —
2177
- * a link sitting inside a run of same-coloured prose must not be distinguished by colour
2178
- * alone). That contract is right for prose and wrong for composition slots where the
2179
- * surrounding row/card already communicates interactivity: framework <Link>s passed into
2180
- * kit title slots and table cells rendered brand-blue + bold + underlined — unreadable
2181
- * noise at list density (TENSOR INTRA-04, operator-rejected).
2182
- *
2183
- * A quiet link inherits the surrounding text colour and shows its underline on
2184
- * hover/focus. 1.4.1 is not in play: the link is the whole text of its block (a title,
2185
- * a cell), not a link inside body copy. NEVER quiet a link inside prose — in-text links
2186
- * keep the base blue + underline.
2187
- *
2188
- * Two forms:
2189
- * • `.uix-link--quiet` — the opt-in utility, for block links outside the scoped slots
2190
- * (whole-card links, event rows composed by hand, app-specific list patterns).
2191
- * • quiet BY DEFAULT below — the editorial-home title slots and table data cells,
2192
- * where every anchor is a block-level navigation target. `.uix-table td` keeps
2193
- * `:not([class])` so class-bearing anchors in cells (`.uix-btn--link`, pills)
2194
- * stay styled.
2195
- * Depends only on --uix-* tokens. */
2196
- @layer uix.components {
2197
- .uix-link--quiet,
2198
- .uix-content-list__title a,
2199
- .uix-news-lead__title a,
2200
- .uix-rundown__item-title a,
2201
- .uix-event-row__title a,
2202
- .uix-table td a:not([class]) { color: inherit; text-decoration: none; }
2203
-
2204
- .uix-link--quiet:hover,
2205
- .uix-link--quiet:focus-visible,
2206
- .uix-content-list__title a:hover,
2207
- .uix-content-list__title a:focus-visible,
2208
- .uix-news-lead__title a:hover,
2209
- .uix-news-lead__title a:focus-visible,
2210
- .uix-rundown__item-title a:hover,
2211
- .uix-rundown__item-title a:focus-visible,
2212
- .uix-event-row__title a:hover,
2213
- .uix-event-row__title a:focus-visible,
2214
- .uix-table td a:not([class]):hover,
2215
- .uix-table td a:not([class]):focus-visible { text-decoration: underline; }
2216
- }
2217
- /* forced-colors (WHCM) repairs — last layer so its system-color fixes win over component rules (UIX-A11Y-4) */
2218
- /* uix forced-colors — Windows High Contrast / forced-colors repairs (UIX-A11Y-4).
2219
- Forced-colors mode strips author backgrounds and box-shadows, so controls whose state or
2220
- focus cue rides on those go invisible. Repairs below redraw ONLY those affordances with
2221
- CSS system colors; everything else stays honest to the user's forced palette. Loaded as
2222
- the last layer (see main.css) so these rules win over component declarations. */
2223
- @layer uix.forced-colors {
2224
- @media (forced-colors: active) {
2225
- /* switch — track + thumb are background-only; redraw with system colors */
2226
- .uix-switch__track { border: 1px solid ButtonText; background: Canvas; forced-color-adjust: none; }
2227
- .uix-switch__track::after { background: ButtonText; box-shadow: none; }
2228
- .uix-switch > input:checked + .uix-switch__track { background: SelectedItem; border-color: SelectedItem; }
2229
- .uix-switch > input:checked + .uix-switch__track::after { background: SelectedItemText; }
2230
-
2231
- /* radio — the checked ::after dot is a token background, forced away otherwise */
2232
- .uix-radio > input:checked + .uix-radio__dot::after { background: SelectedItem; forced-color-adjust: none; }
2233
-
2234
- /* checkbox — checked/indeterminate box fill + check glyph */
2235
- .uix-checkbox > input:checked + .uix-checkbox__box,
2236
- .uix-checkbox > input:indeterminate + .uix-checkbox__box {
2237
- background: SelectedItem; border-color: SelectedItem; forced-color-adjust: none;
2238
- }
2239
- .uix-checkbox > input:checked + .uix-checkbox__box svg { color: SelectedItemText; }
2240
-
2241
- /* progress + meter — track and fill are both plain backgrounds */
2242
- .uix-progress, .uix-meter { border: 1px solid ButtonText; }
2243
- .uix-progress__bar, .uix-meter__fill { background: SelectedItem; forced-color-adjust: none; }
2244
-
2245
- /* text fields — components replace the focus outline with a box-shadow ring, which WHCM strips */
2246
- .uix-input:focus-visible, .uix-textarea:focus-visible, .uix-select:focus-visible {
2247
- outline: 2px solid Highlight; outline-offset: 1px;
2248
- }
2249
- }
2250
- }
1
+ @layer uix.tokens,uix.base,uix.util,uix.motion,uix.components;@layer uix.tokens{:root{--uix-bg-app: #FAFAFA;--uix-bg-subtle: #F5F5F5;--uix-bg-hover: #EFEFEF;--uix-bg-active: #E5E5E5;--uix-surface: #FFFFFF;--uix-surface-2: #FFFFFF;--uix-surface-3: #FAFAFA;--uix-border: #E5E5E5;--uix-border-strong: #D4D4D4;--uix-text: #0A0A0A;--uix-text-hushed: rgba(10,10,10,.62);--uix-text-muted: #6B6B6B;--uix-text-reverse: #FFFFFF;--uix-text-hushed-reverse: rgba(255,255,255,.62);--uix-accent: var(--uix-brand,#1447E6);--uix-accent-dark: #0E3AC0;--uix-accent-light: #4D77F0;--uix-accent-hover: color-mix(in srgb, var(--uix-accent) 88%, #000000);--uix-accent-fg: var(--uix-brand-fg,#FFFFFF);--uix-link: var(--uix-brand,#1447E6);--uix-ring: var(--uix-brand,#1447E6);--uix-brand-muted: color-mix(in srgb, var(--uix-accent) 12%, transparent);--uix-success: #047857;--uix-success-fg: #FFFFFF;--uix-success-bg: #D0FAE5;--uix-warning: #F99C00;--uix-warning-fg: #1A1A1A;--uix-warning-bg: #FEF3D6;--uix-warning-text: #92400E;--uix-info: #1447E6;--uix-info-fg: #FFFFFF;--uix-info-bg: #E3EBFF;--uix-info-text: #1447E6;--uix-danger: #E40014;--uix-danger-fg: #FFFFFF;--uix-danger-bg: #FFE4E6;--uix-danger-text: #C20012;--uix-amber: #C98A1E;--uix-amber-text: #795006;--uix-amber-bg: #FEFCE8;--uix-attention: #EA580C;--uix-attention-bg: #FFEDD5;--uix-attention-text: #9A3412;--uix-attention-solid: #EA580C;--uix-overdue: #DC2626;--uix-overdue-bg: #FEE2E2;--uix-overdue-text: #991B1B;--uix-overdue-solid: #EF4444;--uix-sev-4: var(--uix-info);--uix-sev-4-bg: var(--uix-info-bg);--uix-sev-4-text: var(--uix-info-text);--uix-sev-5: var(--uix-text-muted);--uix-sev-5-bg: var(--uix-bg-active);--uix-sev-5-text: var(--uix-text-hushed);--uix-success-solid: #10B981;--uix-warning-solid: #F59E0B;--uix-info-solid: #2563EB;--uix-danger-solid: #EF4444;--uix-chart-1: #2563EB;--uix-chart-2: #0891B2;--uix-chart-3: #16A34A;--uix-chart-4: #F59E0B;--uix-chart-5: #EA580C;--uix-chart-6: #E11D48;--uix-chart-7: #7C3AED;--uix-chart-8: #DB2777;--uix-chart-neutral: #64748B;--uix-row: #FFFFFF;--uix-row-alt: #FAFAFA;--uix-row-pinned-bg: #F4F7FF;--uix-row-selected-bg: #DBEAFE;--uix-scrollbar-thumb: rgba(10,10,10,.2);--uix-scrollbar-thumb-hover: rgba(10,10,10,.34);--uix-scrollbar-track: transparent;--uix-scrim: rgba(0,0,0,.5);--uix-scrim-strong: rgba(0,0,0,.7);--uix-shadow-sm: 0 1px 2px rgba(0,0,0,.06);--uix-shadow-popover: 0 8px 24px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.05);--uix-shadow-overlay: 0 16px 48px rgba(0,0,0,.18);--uix-highlight-top: inset 0 1px 0 rgba(255,255,255,0);--uix-ease-out: cubic-bezier(.23,1,.32,1);--uix-ease-out-strong: cubic-bezier(.2,0,0,1);--uix-ease-in: cubic-bezier(.4,0,1,1);--uix-ease-in-out: cubic-bezier(.77,0,.175,1);--uix-ease-spring: cubic-bezier(.34,1.56,.64,1);--uix-dur-fast: .12s;--uix-dur: .16s;--uix-dur-slow: .24s;--uix-dur-slower: .32s;--uix-lift: 4px;--uix-z-raised: 1;--uix-z-sticky: 3;--uix-z-dropdown: 10;--uix-z-overlay: 20;--uix-z-tooltip: 30;--uix-z-toast: 100;--uix-radius-xs: 4px;--uix-radius-sm: 8px;--uix-radius-md: 12px;--uix-radius-lg: 16px;--uix-radius-pill: 999px;--uix-row-h: 56px;--uix-row-h-compact: 44px;--uix-row-h-comfortable: 68px;--uix-control-h: 36px;--uix-sidebar-w: 248px;--uix-sidebar-w-rail: 56px;--uix-topbar-h: 56px;--uix-scrollbar-size: 10px;--uix-icon-sm: 16px;--uix-icon-md: 20px;--uix-icon-lg: 24px;--uix-peek-w: 420px;--uix-col-w-xs: 92px;--uix-col-w-sm: 112px;--uix-col-w-md: 132px;--uix-col-w-lg: 176px;--uix-col-w-xl: 240px;--uix-col-title-min: 340px;--uix-space-0: 0;--uix-space-1: 4px;--uix-space-2: 8px;--uix-space-3: 12px;--uix-space-4: 16px;--uix-space-5: 20px;--uix-space-6: 24px;--uix-space-7: 32px;--uix-space-8: 40px;--uix-space-9: 48px;--uix-space-10: 64px;--uix-space-11: 80px;--uix-space-12: 96px;--uix-font-sans: "Inter",system-ui,sans-serif;--uix-font-heading: "IBM Plex Sans","Inter",system-ui,sans-serif;--uix-font-mono: "IBM Plex Mono",ui-monospace,monospace;--uix-text-display: 40px;--uix-leading-display: 1.05;--uix-text-data-hero: 34px;--uix-leading-data-hero: 1.1;--uix-text-h2: 24px;--uix-leading-h2: 1.15;--uix-text-h3: 15px;--uix-leading-h3: 1.3;--uix-text-body: 14px;--uix-leading-body: 1.5;--uix-text-meta: 12.5px;--uix-leading-meta: 1.4;--uix-text-eyebrow: 11px;--uix-leading-eyebrow: 1.2;--uix-tracking-tight: -.02em;--uix-tracking-eyebrow: .06em}:root:where(.dark,[data-theme=dark]){--uix-bg-app: #0A0A0A;--uix-bg-subtle: #171717;--uix-bg-hover: #1F1F1F;--uix-bg-active: #262626;--uix-surface: #111111;--uix-surface-2: #171717;--uix-surface-3: #262626;--uix-border: rgba(255,255,255,.08);--uix-border-strong: rgba(255,255,255,.14);--uix-text: #FAFAFA;--uix-text-hushed: rgba(250,250,250,.64);--uix-text-muted: #A1A1A1;--uix-accent: var(--uix-brand,#2563EB);--uix-accent-hover: color-mix(in srgb, var(--uix-accent) 82%, #FFFFFF);--uix-link: color-mix(in srgb, var(--uix-brand,#5B8DEF) 70%, #FFFFFF);--uix-ring: var(--uix-brand,#3080FF);--uix-brand-muted: color-mix(in srgb, var(--uix-accent) 16%, transparent);--uix-success: #00D294;--uix-success-fg: #002C22;--uix-success-bg: rgba(0,210,148,.15);--uix-warning: #FCBB00;--uix-warning-fg: #1A1A1A;--uix-warning-bg: rgba(249,156,0,.16);--uix-warning-text: var(--uix-warning,#FCBB00);--uix-info: #2563EB;--uix-info-fg: #FFFFFF;--uix-info-bg: rgba(48,128,255,.16);--uix-info-text: #60A5FA;--uix-danger: #DC2626;--uix-danger-fg: #FFFFFF;--uix-danger-bg: rgba(220,38,38,.2);--uix-danger-text: #F87171;--uix-amber: #E6B25C;--uix-amber-text: #E6B25C;--uix-amber-bg: rgba(201,138,30,.14);--uix-attention: #FB923C;--uix-attention-bg: rgba(234,88,12,.16);--uix-attention-text: #FDBA74;--uix-attention-solid: #F97316;--uix-overdue: #F87171;--uix-overdue-bg: rgba(220,38,38,.18);--uix-overdue-text: #FCA5A5;--uix-overdue-solid: #F87171;--uix-success-solid: #34D399;--uix-warning-solid: #FBBF24;--uix-info-solid: #3B82F6;--uix-danger-solid: #F87171;--uix-chart-1: #3080FF;--uix-chart-2: #00C2B0;--uix-chart-3: #00D294;--uix-chart-4: #FCBB00;--uix-chart-5: #FF8B1A;--uix-chart-6: #FF6568;--uix-chart-7: #A685FF;--uix-chart-8: #FF667F;--uix-chart-neutral: #A1A1A1;--uix-row: #111111;--uix-row-alt: #161616;--uix-row-pinned-bg: rgba(48,128,255,.08);--uix-row-selected-bg: rgba(48,128,255,.16);--uix-scrollbar-thumb: rgba(255,255,255,.18);--uix-scrollbar-thumb-hover: rgba(255,255,255,.3);--uix-highlight-top: inset 0 1px 0 rgba(255,255,255,.04)}}@layer uix.base{*,*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,blockquote,figure,figcaption,dl,dd,ol,ul,menu,fieldset,hr,pre,button,input,optgroup,select,textarea{margin:0}html{-webkit-text-size-adjust:100%}@media(prefers-color-scheme:dark){:root:not([data-theme]):not(.dark){color-scheme:dark}}:root[data-theme=dark],:root.dark{color-scheme:dark}:root[data-theme=light]{color-scheme:light}body{font-family:var(--uix-font-sans);font-size:var(--uix-text-body);line-height:var(--uix-leading-body);color:var(--uix-text);background:var(--uix-bg-app);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}h1,h2,h3{font-family:var(--uix-font-heading);letter-spacing:var(--uix-tracking-tight);font-weight:600}h1{font-size:var(--uix-text-display);line-height:var(--uix-leading-display)}h2{font-size:var(--uix-text-h2);line-height:var(--uix-leading-h2)}h3{font-size:var(--uix-text-h3);line-height:var(--uix-leading-h3)}img,svg,video,canvas{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit}code,kbd,pre,samp{font-family:var(--uix-font-mono)}a{color:var(--uix-link);text-decoration:none}a:hover{text-decoration:underline}a[href]:not([class]){text-decoration:underline}:focus-visible{outline:2px solid var(--uix-ring);outline-offset:2px}:focus:not(:focus-visible){outline:none}::selection{background:var(--uix-brand-muted)}*{scrollbar-width:thin;scrollbar-color:var(--uix-scrollbar-thumb) var(--uix-scrollbar-track)}::-webkit-scrollbar{width:var(--uix-scrollbar-size);height:var(--uix-scrollbar-size)}::-webkit-scrollbar-track{background:var(--uix-scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--uix-scrollbar-thumb);border-radius:var(--uix-radius-pill);border:2px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:var(--uix-scrollbar-thumb-hover);background-clip:content-box}}@layer uix.util{.uix-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.uix-stack{display:flex;flex-direction:column;gap:var(--gap, var(--uix-space-4))}.uix-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap, var(--uix-space-2))}.uix-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.uix-elevated{box-shadow:var(--uix-shadow-sm)}.uix-elevated-popover{box-shadow:var(--uix-shadow-popover)}.uix-elevated-pill{box-shadow:var(--uix-shadow-sm)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}@keyframes uix-fade-in{0%{opacity:0}to{opacity:1}}@keyframes uix-pop-in{0%{opacity:0;transform:scale(.96) translateY(var(--uix-lift))}to{opacity:1;transform:none}}@keyframes uix-slide-in-right{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:none}}@keyframes uix-slide-in-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes uix-spin{to{transform:rotate(1turn)}}@keyframes uix-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@layer uix.motion{.uix-anim-fade{animation:uix-fade-in var(--uix-dur) var(--uix-ease-out)}.uix-anim-pop{animation:uix-pop-in var(--uix-dur-fast) var(--uix-ease-out)}.uix-anim-up{animation:uix-slide-in-up var(--uix-dur) var(--uix-ease-out)}.uix-lift-hover{transition:transform var(--uix-dur-fast) var(--uix-ease-out),box-shadow var(--uix-dur-fast) var(--uix-ease-out)}@media(hover:hover)and (pointer:fine){.uix-lift-hover:hover{transform:translateY(calc(-1 * var(--uix-lift)));box-shadow:var(--uix-shadow-popover)}}}@layer uix.components{.uix-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;height:var(--uix-control-h);padding:0 var(--uix-space-4);border:1px solid transparent;border-radius:var(--uix-radius-md);font:inherit;font-size:var(--uix-text-body);font-weight:500;line-height:1;cursor:pointer;user-select:none;white-space:nowrap;transition:background-color var(--uix-dur-fast) var(--uix-ease-out),border-color var(--uix-dur-fast) var(--uix-ease-out),color var(--uix-dur-fast) var(--uix-ease-out),transform var(--uix-dur-fast) var(--uix-ease-out)}.uix-btn:active{transform:scale(.97)}.uix-btn:disabled,.uix-btn[aria-disabled=true]{opacity:.5;pointer-events:none}.uix-btn:focus-visible{outline:2px solid var(--uix-ring);outline-offset:2px}.uix-btn svg{width:var(--uix-icon-md);height:var(--uix-icon-md)}.uix-btn--primary{background:var(--uix-accent);color:var(--uix-accent-fg)}.uix-btn--primary:hover{background:var(--uix-accent-hover)}.uix-btn--secondary{background:var(--uix-bg-subtle);color:var(--uix-text);border-color:var(--uix-border)}.uix-btn--secondary:hover{background:var(--uix-bg-hover)}.uix-btn--outline{background:transparent;color:var(--uix-text);border-color:var(--uix-border-strong)}.uix-btn--outline:hover{background:var(--uix-bg-hover)}.uix-btn--ghost{background:transparent;color:var(--uix-text)}.uix-btn--ghost:hover{background:var(--uix-bg-hover)}.uix-btn--danger{background:var(--uix-danger);color:var(--uix-danger-fg)}.uix-btn--danger:hover{background:color-mix(in srgb,var(--uix-danger) 88%,black)}.uix-btn--link{background:transparent;color:var(--uix-link);height:auto;padding:0}.uix-btn--link:hover{text-decoration:underline}.uix-btn--sm{height:28px;padding:0 var(--uix-space-3);font-size:var(--uix-text-meta)}.uix-btn--lg{height:44px;padding:0 var(--uix-space-5)}.uix-btn--icon{width:var(--uix-control-h);padding:0}.uix-btn--icon.uix-btn--sm{width:28px}.uix-btn--icon.uix-btn--lg{width:44px}.uix-btn[data-loading]{color:transparent!important;position:relative;pointer-events:none}.uix-btn[data-loading]:after{content:"";position:absolute;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;color:var(--uix-accent-fg);animation:uix-spin .6s linear infinite}.uix-btn-group{display:inline-flex}.uix-btn-group .uix-btn{border-radius:0;border-right-width:0}.uix-btn-group .uix-btn:first-child{border-top-left-radius:var(--uix-radius-md);border-bottom-left-radius:var(--uix-radius-md)}.uix-btn-group .uix-btn:last-child{border-radius:0 var(--uix-radius-md) var(--uix-radius-md) 0;border-right-width:1px}}@layer uix.components{.uix-field{display:flex;flex-direction:column;gap:var(--uix-space-2)}.uix-field__label{font-size:var(--uix-text-meta);font-weight:500;color:var(--uix-text)}.uix-field__label[data-required]:after{content:" *";color:var(--uix-danger-text)}.uix-field__msg{font-size:var(--uix-text-meta);line-height:1.45;min-height:1.45em}.uix-field__hint{font-size:var(--uix-text-meta);color:var(--uix-text-muted)}.uix-field__error{font-size:var(--uix-text-meta);color:var(--uix-danger-text);display:inline-flex;align-items:center;gap:var(--uix-space-2)}.uix-field__error svg,.uix-field__success svg{width:14px;height:14px;flex:none}.uix-field__success{font-size:var(--uix-text-meta);color:var(--uix-success);display:inline-flex;align-items:center;gap:var(--uix-space-2)}.uix-input{height:var(--uix-control-h);width:100%;padding:0 var(--uix-space-3);border:1px solid var(--uix-border);border-radius:var(--uix-radius-md);background:var(--uix-surface);color:var(--uix-text);font:inherit;font-size:var(--uix-text-body);transition:border-color var(--uix-dur-fast) var(--uix-ease-out),box-shadow var(--uix-dur-fast) var(--uix-ease-out)}.uix-input::placeholder{color:var(--uix-text-muted)}.uix-input:hover{border-color:var(--uix-border-strong)}.uix-input:focus{outline:none;border-color:var(--uix-ring);box-shadow:0 0 0 3px var(--uix-brand-muted)}.uix-input:disabled{opacity:.55;cursor:not-allowed;background:var(--uix-bg-subtle)}.uix-input[readonly]{background:var(--uix-bg-subtle)}.uix-input[aria-invalid=true]{border-color:var(--uix-danger)}.uix-input[aria-invalid=true]:focus{box-shadow:0 0 0 3px var(--uix-danger-bg)}.uix-input--sm{height:28px;font-size:var(--uix-text-meta)}.uix-input-group{position:relative;display:flex;align-items:center}.uix-input-group__icon{position:absolute;left:10px;color:var(--uix-text-muted);display:inline-flex;pointer-events:none}.uix-input-group__icon svg{width:var(--uix-icon-md);height:var(--uix-icon-md)}.uix-input-group--has-leading .uix-input{padding-left:38px}.uix-input[data-valid]{border-color:var(--uix-success)}.uix-input[data-valid]:focus{box-shadow:0 0 0 3px var(--uix-success-bg)}.uix-input-group--has-trailing .uix-input{padding-right:38px}.uix-input-group__icon--trailing{left:auto;right:10px}}@layer uix.components{.uix-textarea{width:100%;min-height:84px;padding:var(--uix-space-3) var(--uix-space-3);resize:vertical;border:1px solid var(--uix-border);border-radius:var(--uix-radius-md);background:var(--uix-surface);color:var(--uix-text);font:inherit;font-size:var(--uix-text-body);line-height:var(--uix-leading-body);transition:border-color var(--uix-dur-fast) var(--uix-ease-out),box-shadow var(--uix-dur-fast) var(--uix-ease-out)}.uix-textarea::placeholder{color:var(--uix-text-muted)}.uix-textarea:hover{border-color:var(--uix-border-strong)}.uix-textarea:focus{outline:none;border-color:var(--uix-ring);box-shadow:0 0 0 3px var(--uix-brand-muted)}.uix-textarea:disabled{opacity:.55;background:var(--uix-bg-subtle)}.uix-textarea[aria-invalid=true]{border-color:var(--uix-danger)}}@layer uix.components{.uix-select{height:var(--uix-control-h);width:100%;padding:0 var(--uix-space-8) 0 var(--uix-space-3);appearance:none;border:1px solid var(--uix-border);border-radius:var(--uix-radius-md);background-color:var(--uix-surface);color:var(--uix-text);font:inherit;font-size:var(--uix-text-body);cursor:pointer;background-repeat:no-repeat;background-position:right 12px center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");transition:border-color var(--uix-dur-fast) var(--uix-ease-out),box-shadow var(--uix-dur-fast) var(--uix-ease-out)}.uix-select:hover{border-color:var(--uix-border-strong)}.uix-select:focus{outline:none;border-color:var(--uix-ring);box-shadow:0 0 0 3px var(--uix-brand-muted)}.uix-select:disabled{opacity:.55;cursor:not-allowed;background-color:var(--uix-bg-subtle)}.uix-select--sm{height:28px;font-size:var(--uix-text-meta)}.uix-select-trigger{display:inline-flex;align-items:center;gap:var(--uix-space-2);height:var(--uix-control-h);padding:0 var(--uix-space-3);min-width:220px;border:1px solid var(--uix-border);border-radius:var(--uix-radius-md);background:var(--uix-surface);color:var(--uix-text);font:inherit;font-size:var(--uix-text-body);cursor:pointer;transition:border-color var(--uix-dur-fast) var(--uix-ease-out)}.uix-select-trigger:hover{border-color:var(--uix-border-strong)}.uix-select-trigger:focus-visible{outline:2px solid var(--uix-ring);outline-offset:2px}.uix-select-trigger__chevron{margin-left:auto;color:var(--uix-text-muted);width:var(--uix-icon-sm);height:var(--uix-icon-sm)}}@layer uix.components{.uix-checkbox{display:inline-flex;align-items:center;gap:var(--uix-space-2);cursor:pointer;font-size:var(--uix-text-body);color:var(--uix-text)}.uix-checkbox>input{position:absolute;opacity:0;width:1px;height:1px}.uix-checkbox__box{width:18px;height:18px;flex:none;display:grid;place-items:center;border:1px solid var(--uix-border-strong);border-radius:var(--uix-radius-xs);background:var(--uix-surface);transition:background-color var(--uix-dur-fast) var(--uix-ease-out),border-color var(--uix-dur-fast) var(--uix-ease-out)}.uix-checkbox__box svg{width:13px;height:13px;color:var(--uix-accent-fg);opacity:0;transform:scale(.5);transition:opacity var(--uix-dur-fast) var(--uix-ease-out),transform var(--uix-dur-fast) var(--uix-ease-spring)}.uix-checkbox>input:checked+.uix-checkbox__box,.uix-checkbox>input:indeterminate+.uix-checkbox__box{background:var(--uix-accent);border-color:var(--uix-accent)}.uix-checkbox>input:checked+.uix-checkbox__box svg{opacity:1;transform:none}.uix-checkbox>input:focus-visible+.uix-checkbox__box{outline:2px solid var(--uix-ring);outline-offset:2px}.uix-checkbox>input:disabled~*{opacity:.5}}@layer uix.components{.uix-radio-group{display:flex;flex-direction:column;gap:var(--uix-space-2)}.uix-radio{display:inline-flex;align-items:center;gap:var(--uix-space-2);cursor:pointer;font-size:var(--uix-text-body);color:var(--uix-text)}.uix-radio>input{position:absolute;opacity:0;width:1px;height:1px}.uix-radio__dot{width:18px;height:18px;flex:none;border-radius:50%;border:1px solid var(--uix-border-strong);background:var(--uix-surface);display:grid;place-items:center;transition:border-color var(--uix-dur-fast) var(--uix-ease-out)}.uix-radio__dot:after{content:"";width:8px;height:8px;border-radius:50%;background:var(--uix-accent);opacity:0;transform:scale(.4);transition:opacity var(--uix-dur-fast) var(--uix-ease-out),transform var(--uix-dur-fast) var(--uix-ease-spring)}.uix-radio>input:checked+.uix-radio__dot{border-color:var(--uix-accent)}.uix-radio>input:checked+.uix-radio__dot:after{opacity:1;transform:none}.uix-radio>input:focus-visible+.uix-radio__dot{outline:2px solid var(--uix-ring);outline-offset:2px}.uix-radio>input:disabled~*{opacity:.5}}@layer uix.components{.uix-switch{display:inline-flex;align-items:center;gap:var(--uix-space-2);cursor:pointer;color:var(--uix-text);font-size:var(--uix-text-body)}.uix-switch>input{position:absolute;opacity:0;width:1px;height:1px}.uix-switch__track{width:36px;height:20px;flex:none;border-radius:var(--uix-radius-pill);background:var(--uix-bg-active);position:relative;transition:background-color var(--uix-dur) var(--uix-ease-out)}.uix-switch__track:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--uix-text-reverse);box-shadow:var(--uix-shadow-sm);transition:transform var(--uix-dur) var(--uix-ease-out)}.uix-switch>input:checked+.uix-switch__track{background:var(--uix-accent)}.uix-switch>input:checked+.uix-switch__track:after{transform:translate(16px)}.uix-switch>input:focus-visible+.uix-switch__track{outline:2px solid var(--uix-ring);outline-offset:2px}.uix-switch>input:disabled+.uix-switch__track{opacity:.5}}@layer uix.components{.uix-segmented{display:inline-flex;padding:var(--uix-space-1);gap:var(--uix-space-1);background:var(--uix-bg-subtle);border:1px solid var(--uix-border);border-radius:var(--uix-radius-md)}.uix-segmented__option{border:0;background:transparent;color:var(--uix-text-hushed);font:inherit;font-size:var(--uix-text-meta);font-weight:500;padding:var(--uix-space-2) var(--uix-space-3);border-radius:calc(var(--uix-radius-md) - 3px);cursor:pointer;transition:background-color var(--uix-dur-fast) var(--uix-ease-out),color var(--uix-dur-fast) var(--uix-ease-out)}.uix-segmented__option:hover{color:var(--uix-text)}.uix-segmented__option[aria-selected=true],.uix-segmented__option[aria-pressed=true]{background:var(--uix-surface);color:var(--uix-text);box-shadow:var(--uix-shadow-sm)}.uix-segmented__option:focus-visible{outline:2px solid var(--uix-ring);outline-offset:1px}}@layer uix.components{.uix-slider{-webkit-appearance:none;appearance:none;width:220px;height:20px;background:transparent;cursor:pointer}.uix-slider::-webkit-slider-runnable-track{height:6px;border-radius:var(--uix-radius-pill);background:var(--uix-bg-active)}.uix-slider::-moz-range-track{height:6px;border-radius:var(--uix-radius-pill);background:var(--uix-bg-active)}.uix-slider::-moz-range-progress{height:6px;border-radius:var(--uix-radius-pill);background:var(--uix-accent)}.uix-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px;width:18px;height:18px;border-radius:50%;background:var(--uix-surface);border:2px solid var(--uix-accent);box-shadow:var(--uix-shadow-sm);transition:transform var(--uix-dur-fast) var(--uix-ease-out)}.uix-slider::-moz-range-thumb{width:18px;height:18px;border:2px solid var(--uix-accent);border-radius:50%;background:var(--uix-surface);box-shadow:var(--uix-shadow-sm)}.uix-slider:active::-webkit-slider-thumb{transform:scale(1.12)}.uix-slider:focus-visible::-webkit-slider-thumb{outline:2px solid var(--uix-ring);outline-offset:2px}.uix-slider:disabled{opacity:.5;cursor:not-allowed}}@layer uix.components{.uix-stepper{display:inline-flex;align-items:center;height:var(--uix-control-h);overflow:hidden;border:1px solid var(--uix-border);border-radius:var(--uix-radius-md);background:var(--uix-surface)}.uix-stepper__btn{width:32px;align-self:stretch;border:0;background:transparent;color:var(--uix-text);cursor:pointer;display:grid;place-items:center;transition:background-color var(--uix-dur-fast) var(--uix-ease-out)}.uix-stepper__btn:hover{background:var(--uix-bg-hover)}.uix-stepper__btn svg{width:var(--uix-icon-sm);height:var(--uix-icon-sm)}.uix-stepper__input{width:52px;text-align:center;border:0;height:100%;background:transparent;color:var(--uix-text);font:inherit;border-inline:1px solid var(--uix-border);-moz-appearance:textfield}.uix-stepper__input::-webkit-outer-spin-button,.uix-stepper__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.uix-stepper:focus-within{border-color:var(--uix-ring);box-shadow:0 0 0 3px var(--uix-brand-muted)}}@layer uix.components{.uix-dropzone{display:flex;flex-direction:column;align-items:center;gap:var(--uix-space-2);padding:var(--uix-space-7);text-align:center;border:1.5px dashed var(--uix-border-strong);border-radius:var(--uix-radius-lg);background:var(--uix-bg-subtle);color:var(--uix-text-muted);cursor:pointer;transition:border-color var(--uix-dur-fast) var(--uix-ease-out),background-color var(--uix-dur-fast) var(--uix-ease-out),color var(--uix-dur-fast) var(--uix-ease-out)}.uix-dropzone:hover,.uix-dropzone[data-dragover]{border-color:var(--uix-accent);background:var(--uix-brand-muted);color:var(--uix-text)}.uix-dropzone svg{width:var(--uix-icon-lg);height:var(--uix-icon-lg)}.uix-filelist{display:flex;flex-direction:column;gap:var(--uix-space-2);margin-top:var(--uix-space-3)}.uix-filelist__item{display:flex;align-items:center;gap:var(--uix-space-3);padding:var(--uix-space-2) var(--uix-space-3);border:1px solid var(--uix-border);border-radius:var(--uix-radius-md);background:var(--uix-surface);font-size:var(--uix-text-meta);color:var(--uix-text)}.uix-filelist__size{margin-left:auto;color:var(--uix-text-muted)}}@layer uix.components{.uix-combobox{position:relative}.uix-listbox{list-style:none;margin:0;padding:var(--uix-space-1);min-width:200px;background:var(--uix-surface-2);border:1px solid var(--uix-border);border-radius:var(--uix-radius-md);box-shadow:var(--uix-shadow-popover)}.uix-listbox__option{padding:var(--uix-space-2) var(--uix-space-3);border-radius:var(--uix-radius-sm);font-size:var(--uix-text-body);color:var(--uix-text);cursor:pointer;display:flex;align-items:center;gap:var(--uix-space-2)}.uix-listbox__option:hover,.uix-listbox__option[aria-selected=true],.uix-listbox__option[data-active]{background:var(--uix-bg-hover)}.uix-listbox__option[aria-selected=true]{color:var(--uix-link)}.uix-listbox__empty{padding:var(--uix-space-3);text-align:center;color:var(--uix-text-muted);font-size:var(--uix-text-meta)}}@layer uix.components{.uix-taginput{display:flex;flex-wrap:wrap;align-items:center;gap:var(--uix-space-2);min-height:var(--uix-control-h);padding:var(--uix-space-1) var(--uix-space-2);border:1px solid var(--uix-border);border-radius:var(--uix-radius-md);background:var(--uix-surface)}.uix-taginput:focus-within{border-color:var(--uix-ring);box-shadow:0 0 0 3px var(--uix-brand-muted)}.uix-taginput__field{flex:1;min-width:80px;border:0;outline:none;background:transparent;color:var(--uix-text);font:inherit}.uix-tag{display:inline-flex;align-items:center;gap:var(--uix-space-1);padding:var(--uix-space-1) var(--uix-space-1) var(--uix-space-1) var(--uix-space-2);border-radius:var(--uix-radius-sm);background:var(--uix-bg-active);color:var(--uix-text);font-size:var(--uix-text-meta)}.uix-tag__remove{display:grid;place-items:center;width:16px;height:16px;border:0;background:transparent;color:var(--uix-text-muted);cursor:pointer;border-radius:var(--uix-radius-xs)}.uix-tag__remove:hover{background:var(--uix-bg-hover);color:var(--uix-text)}.uix-tag__remove svg{width:12px;height:12px}}@layer uix.components{.uix-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--uix-space-5)}.uix-fieldset{border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);padding:var(--uix-space-6)}.uix-fieldset>legend{padding:0 var(--uix-space-2);font-size:var(--uix-text-meta);font-weight:600;color:var(--uix-text)}.uix-form-inline{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--uix-space-4)}.uix-validation-summary{border:1px solid var(--uix-danger);background:var(--uix-danger-bg);color:var(--uix-text);border-radius:var(--uix-radius-md);padding:var(--uix-space-3) var(--uix-space-4);font-size:var(--uix-text-meta)}.uix-validation-summary strong{color:var(--uix-danger-text)}.uix-validation-summary ul{margin:var(--uix-space-2) 0 0;padding-left:var(--uix-space-5)}.uix-validation-summary a{color:var(--uix-danger-text);text-decoration:underline}}@layer uix.components{.uix-shell{position:relative;display:grid;grid-template-columns:var(--uix-sidebar-w) 1fr;grid-template-rows:var(--uix-topbar-h) 1fr;height:100%;min-height:360px;border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);overflow:hidden;transition:grid-template-columns var(--uix-dur) var(--uix-ease-out),grid-template-rows var(--uix-dur) var(--uix-ease-out)}.uix-shell__sidebar{grid-row:1 / 3;background:var(--uix-bg-subtle);border-right:1px solid var(--uix-border);overflow-y:auto;overflow-x:hidden}.uix-shell__topbar{grid-column:2;display:flex;align-items:center;gap:var(--uix-space-3);padding:0 var(--uix-space-6);background:var(--uix-bg-app);border-bottom:1px solid var(--uix-border)}.uix-shell__main{grid-column:2;overflow:auto;padding:var(--uix-space-7);background:var(--uix-bg-app)}.uix-shell[data-nav=rail],.uix-shell[data-collapsed]{grid-template-columns:var(--uix-sidebar-w-rail) 1fr}.uix-shell[data-nav=hidden]{grid-template-columns:0 1fr}.uix-shell[data-focus]{grid-template-columns:0 1fr;grid-template-rows:0 1fr}.uix-shell[data-focus] .uix-shell__topbar{display:none}.uix-shell__focus-exit{position:absolute;top:var(--uix-space-3);right:var(--uix-space-3);z-index:var(--uix-z-overlay)}.uix-shell__main--bleed{padding:0}}@layer uix.components{.uix-sidebar{width:var(--uix-sidebar-w);background:var(--uix-bg-subtle);display:flex;flex-direction:column;gap:var(--uix-space-1);padding:var(--uix-space-2);overflow-x:hidden;overflow-y:auto}.uix-sidebar__eyebrow{font-size:var(--uix-text-eyebrow);letter-spacing:var(--uix-tracking-eyebrow);text-transform:uppercase;color:var(--uix-text-muted);padding:var(--uix-space-3) var(--uix-space-3) var(--uix-space-1)}.uix-sidebar__head{display:flex;align-items:center;justify-content:space-between;gap:var(--uix-space-2);padding:var(--uix-space-1) var(--uix-space-2) var(--uix-space-2)}.uix-sidebar__brand{min-width:0;font-size:var(--uix-text-h3);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.uix-sidebar__toggle{display:grid;place-items:center;width:28px;height:28px;flex:none;border:0;background:transparent;color:var(--uix-text-muted);cursor:pointer;border-radius:var(--uix-radius-sm);transition:background-color var(--uix-dur-fast) var(--uix-ease-out),color var(--uix-dur-fast) var(--uix-ease-out)}.uix-sidebar__toggle:hover{background:var(--uix-bg-hover);color:var(--uix-text)}.uix-sidebar__toggle svg{width:18px;height:18px}.uix-navitem{display:flex;align-items:center;gap:var(--uix-space-3);height:36px;padding:0 var(--uix-space-3);border-radius:var(--uix-radius-sm);color:var(--uix-text-hushed);cursor:pointer;text-decoration:none;border:0;background:transparent;font:inherit;font-size:var(--uix-text-body);width:100%;text-align:left;transition:background-color var(--uix-dur-fast) var(--uix-ease-out),color var(--uix-dur-fast) var(--uix-ease-out)}.uix-navitem:hover{background:var(--uix-bg-hover);color:var(--uix-text);text-decoration:none}.uix-navitem[aria-current=page]{background:var(--uix-brand-muted);color:var(--uix-link);font-weight:500}.uix-navitem__icon{width:var(--uix-icon-md);height:var(--uix-icon-md);flex:none}.uix-navitem__label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.uix-navitem__badge{font-size:var(--uix-text-meta);color:var(--uix-text-muted)}.uix-navitem[aria-current=page] .uix-navitem__badge{color:var(--uix-text-hushed)}.uix-navitem__star{display:grid;place-items:center;width:22px;height:22px;border:0;background:transparent;color:var(--uix-text-muted);cursor:pointer;border-radius:var(--uix-radius-xs);opacity:0;transition:opacity var(--uix-dur-fast) var(--uix-ease-out)}.uix-navitem__star svg{width:15px;height:15px}.uix-navitem:hover .uix-navitem__star{opacity:1}.uix-navitem__star[data-on]{opacity:1;color:var(--uix-warning)}.uix-navitem__star[data-on] svg{fill:currentColor}.uix-favourites{margin-bottom:var(--uix-space-1)}.uix-favourites__chevron{flex-shrink:0}.uix-favourites__heading{display:flex;width:100%;align-items:center;gap:calc(var(--uix-space-1) * 1.5);padding:var(--uix-space-2) var(--uix-space-1) var(--uix-space-1);border:0;background:transparent;cursor:pointer;color:inherit}.uix-favourites__list{display:flex;flex-direction:column;gap:calc(var(--uix-space-1) / 4);list-style:none;margin:0;padding:0}.uix-favourites__empty{padding:calc(var(--uix-space-1) * 1.5) var(--uix-space-2);color:color-mix(in srgb,var(--uix-text) 50%,transparent)}.uix-favourites__row{position:relative;display:flex;align-items:center}.uix-favourites__link{min-width:0;flex:1}.uix-favourites__menu-trigger{margin-left:auto;display:inline-flex;height:20px;width:20px;flex-shrink:0;align-items:center;justify-content:center;border:0;border-radius:calc(var(--uix-radius-xs) / 2);background:transparent;cursor:pointer;color:color-mix(in srgb,var(--uix-text) 50%,transparent);opacity:0;transition:opacity var(--uix-dur-fast) var(--uix-ease-out)}.uix-favourites__row:hover .uix-favourites__menu-trigger,.uix-favourites__row:focus-within .uix-favourites__menu-trigger,.uix-favourites__menu-trigger[aria-expanded=true]{opacity:1}.uix-favourites__backdrop{position:fixed;inset:0;cursor:default;background:transparent;z-index:calc(var(--uix-z-tooltip) + 10)}.uix-favourites__menu{position:absolute;right:0;top:calc(100% + 2px);z-index:calc(var(--uix-z-tooltip) + 20);min-width:160px;overflow:hidden;margin:0;padding:var(--uix-space-1) 0;list-style:none;border-radius:calc((var(--uix-radius-xs) + var(--uix-radius-sm)) / 2);border:1px solid var(--uix-border);background:var(--uix-surface);box-shadow:var(--uix-shadow-popover)}.uix-favourites__menu-item{display:flex;width:100%;align-items:center;padding:calc(var(--uix-space-1) * 1.5) var(--uix-space-3);border:0;background:transparent;cursor:pointer;text-align:left;font-size:calc(var(--uix-text-body) * .9285714286);color:color-mix(in srgb,var(--uix-text) 85%,transparent);transition:background-color var(--uix-dur-fast) var(--uix-ease-out)}.uix-favourites__menu-item:hover{background:var(--uix-bg-hover)}.uix-navgroup__trigger .uix-navgroup__chevron{margin-left:auto;transition:transform var(--uix-dur) var(--uix-ease-out)}.uix-navgroup__trigger[aria-expanded=false] .uix-navgroup__chevron{transform:rotate(-90deg)}.uix-navgroup__chevron{width:var(--uix-icon-sm);height:var(--uix-icon-sm)}.uix-navgroup__panel{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--uix-dur) var(--uix-ease-out)}.uix-navgroup__trigger[aria-expanded=false]+.uix-navgroup__panel{grid-template-rows:0fr}.uix-navgroup__panel>div{overflow:hidden}.uix-subitem{padding-left:var(--uix-space-5)}.uix-subitem .uix-navitem__label:before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--uix-text-muted);margin-right:var(--uix-space-3);vertical-align:middle}.uix-sidebar[data-collapsed],.uix-sidebar[data-nav=rail]{width:var(--uix-sidebar-w-rail)}.uix-sidebar[data-collapsed] .uix-navitem__label,.uix-sidebar[data-collapsed] .uix-navitem__badge,.uix-sidebar[data-collapsed] .uix-navitem__star,.uix-sidebar[data-collapsed] .uix-sidebar__eyebrow,.uix-sidebar[data-collapsed] .uix-sidebar__brand,.uix-sidebar[data-collapsed] .uix-navgroup__chevron,.uix-sidebar[data-collapsed] .uix-navgroup__panel{display:none}.uix-sidebar[data-collapsed] .uix-navitem{justify-content:center;padding:0;gap:0}.uix-sidebar[data-collapsed] .uix-sidebar__head{justify-content:center;padding-inline:0}}@layer uix.components{.uix-breadcrumbs{display:flex;align-items:center;gap:var(--uix-space-2);flex-wrap:wrap;font-size:var(--uix-text-meta);color:var(--uix-text-muted)}.uix-breadcrumbs a{color:var(--uix-text-muted);text-decoration:none}.uix-breadcrumbs a:is(:hover,:focus-visible){color:var(--uix-text);text-decoration:underline}.uix-breadcrumbs__sep{opacity:.55}.uix-breadcrumbs [aria-current=page]{color:var(--uix-text);font-weight:500}}@layer uix.components{.uix-tabs{display:flex;gap:var(--uix-space-1)}.uix-tab{border:0;background:transparent;font:inherit;font-size:var(--uix-text-body);font-weight:500;color:var(--uix-text-hushed);padding:var(--uix-space-3) var(--uix-space-3);cursor:pointer;position:relative;transition:color var(--uix-dur-fast) var(--uix-ease-out),background-color var(--uix-dur-fast) var(--uix-ease-out)}.uix-tab:hover,.uix-tab[aria-selected=true]{color:var(--uix-text)}.uix-tab:focus-visible{outline:2px solid var(--uix-ring);outline-offset:-2px;border-radius:var(--uix-radius-sm)}.uix-tabs--line{border-bottom:1px solid var(--uix-border)}.uix-tabs--line .uix-tab:after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--uix-accent);border-radius:var(--uix-radius-pill);transform:scaleX(0);transition:transform var(--uix-dur) var(--uix-ease-out)}.uix-tabs--line .uix-tab[aria-selected=true]:after{transform:scaleX(1)}.uix-tabs--enclosed{gap:0;border-bottom:1px solid var(--uix-border)}.uix-tabs--enclosed .uix-tab{border:1px solid transparent;border-top-left-radius:var(--uix-radius-md);border-top-right-radius:var(--uix-radius-md);margin-bottom:-1px}.uix-tabs--enclosed .uix-tab[aria-selected=true]{border-color:var(--uix-border);border-bottom-color:var(--uix-bg-app);background:var(--uix-bg-app)}.uix-tabs--pill{display:inline-flex;background:var(--uix-bg-subtle);padding:var(--uix-space-1);border-radius:var(--uix-radius-md)}.uix-tabs--pill .uix-tab{padding:var(--uix-space-2) var(--uix-space-4);border-radius:calc(var(--uix-radius-md) - 3px)}.uix-tabs--pill .uix-tab[aria-selected=true]{background:var(--uix-surface);box-shadow:var(--uix-shadow-sm)}}@layer uix.components{.uix-pagination{display:inline-flex;align-items:center;gap:var(--uix-space-1)}.uix-pagination__btn{min-width:32px;height:32px;padding:0 var(--uix-space-2);display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--uix-border);border-radius:var(--uix-radius-sm);background:var(--uix-surface);color:var(--uix-text);font:inherit;font-size:var(--uix-text-meta);line-height:1;cursor:pointer;transition:background-color var(--uix-dur-fast) var(--uix-ease-out),border-color var(--uix-dur-fast) var(--uix-ease-out)}.uix-pagination__btn:hover{background:var(--uix-bg-hover)}.uix-pagination__btn[aria-current=page]{background:var(--uix-accent);border-color:var(--uix-accent);color:var(--uix-accent-fg)}.uix-pagination__btn:disabled{opacity:.45;pointer-events:none}.uix-pagination__ellipsis{padding:0 var(--uix-space-1);color:var(--uix-text-muted)}}@layer uix.components{.uix-steps{display:flex;align-items:center;gap:0}.uix-step{display:flex;align-items:center;gap:var(--uix-space-3);color:var(--uix-text-muted)}.uix-step__marker{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;border:1px solid var(--uix-border-strong);background:var(--uix-surface);font-size:var(--uix-text-meta);font-weight:600;line-height:1}.uix-step__label{font-size:var(--uix-text-meta);font-weight:500}.uix-step__connector{flex:1;height:1px;min-width:28px;background:var(--uix-border);margin:0 var(--uix-space-3)}.uix-step[data-state=active]{color:var(--uix-text)}.uix-step[data-state=active] .uix-step__marker{border-color:var(--uix-accent);color:var(--uix-accent);box-shadow:0 0 0 3px var(--uix-brand-muted)}.uix-step[data-state=done]{color:var(--uix-text)}.uix-step[data-state=done] .uix-step__marker{background:var(--uix-accent);border-color:var(--uix-accent);color:var(--uix-accent-fg)}.uix-step[data-state=done]+.uix-step__connector,.uix-step__connector[data-done]{background:var(--uix-accent)}}@layer uix.components{.uix-cmdk{width:min(560px,92vw);border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);background:var(--uix-surface-2);box-shadow:var(--uix-shadow-overlay);overflow:hidden}.uix-cmdk__input{width:100%;height:48px;border:0;border-bottom:1px solid var(--uix-border);background:transparent;color:var(--uix-text);font:inherit;font-size:var(--uix-text-h3);padding:0 var(--uix-space-4)}.uix-cmdk__input:focus{outline:none}.uix-cmdk__list{max-height:320px;overflow-y:auto;padding:var(--uix-space-2)}.uix-cmdk__group{font-size:var(--uix-text-eyebrow);letter-spacing:var(--uix-tracking-eyebrow);text-transform:uppercase;color:var(--uix-text-muted);padding:var(--uix-space-2) var(--uix-space-3) var(--uix-space-1)}.uix-cmdk__item{display:flex;align-items:center;gap:var(--uix-space-3);padding:var(--uix-space-3) var(--uix-space-3);border-radius:var(--uix-radius-sm);color:var(--uix-text);cursor:pointer;font-size:var(--uix-text-body)}.uix-cmdk__item svg{width:var(--uix-icon-md);height:var(--uix-icon-md);color:var(--uix-text-muted)}.uix-cmdk__item:hover,.uix-cmdk__item[data-active]{background:var(--uix-bg-hover)}.uix-cmdk__item .uix-kbd{margin-left:auto}dialog[data-uix-cmdk-dialog],dialog[data-uix-cmdk-dialog]::backdrop{transition:none}}@layer uix.components{.uix-menu{min-width:200px;margin:0;padding:var(--uix-space-1);list-style:none;background:var(--uix-surface-2);border:1px solid var(--uix-border);border-radius:var(--uix-radius-md);box-shadow:var(--uix-shadow-popover)}.uix-menu__item{display:flex;align-items:center;gap:var(--uix-space-3);width:100%;text-align:left;padding:var(--uix-space-2) var(--uix-space-3);border:0;background:transparent;border-radius:var(--uix-radius-sm);color:var(--uix-text);font:inherit;font-size:var(--uix-text-body);cursor:pointer}.uix-menu__item svg{width:var(--uix-icon-md);height:var(--uix-icon-md);color:var(--uix-text-muted)}.uix-menu__item:hover,.uix-menu__item[data-active]{background:var(--uix-bg-hover)}.uix-menu__item--danger{color:var(--uix-danger-text)}.uix-menu__item--danger svg{color:var(--uix-danger-text)}.uix-menu__item .uix-kbd{margin-left:auto}.uix-menu__sep{height:1px;background:var(--uix-border);margin:var(--uix-space-1) 0}.uix-menu__label{font-size:var(--uix-text-eyebrow);letter-spacing:var(--uix-tracking-eyebrow);text-transform:uppercase;color:var(--uix-text-muted);padding:var(--uix-space-2) var(--uix-space-3) var(--uix-space-1)}}@layer uix.components{.uix-page-header{display:flex;align-items:flex-start;gap:var(--uix-space-5);flex-wrap:wrap;padding-bottom:var(--uix-space-6);margin-bottom:var(--uix-space-7);border-bottom:1px solid var(--uix-border)}.uix-page-header__titles{flex:1;min-width:220px}.uix-page-header__eyebrow{font-size:var(--uix-text-eyebrow);letter-spacing:var(--uix-tracking-eyebrow);text-transform:uppercase;font-weight:600;color:var(--uix-text-muted);margin-bottom:var(--uix-space-2)}.uix-page-header__title{font-size:var(--uix-text-h2);font-weight:600;letter-spacing:var(--uix-tracking-tight)}.uix-page-header__subtitle{color:var(--uix-text-muted);font-size:var(--uix-text-meta);margin-top:var(--uix-space-2);max-width:70ch}.uix-page-header__actions{display:flex;gap:var(--uix-space-2);align-items:center;flex-wrap:wrap}}@layer uix.components{.uix-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 var(--uix-space-2);font-family:var(--uix-font-mono);font-size:var(--uix-text-eyebrow);color:var(--uix-text-muted);background:var(--uix-bg-subtle);border:1px solid var(--uix-border);border-bottom-width:2px;border-radius:var(--uix-radius-xs)}}@layer uix.components{.uix-card{background:var(--uix-surface);border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);box-shadow:var(--uix-shadow-sm)}.uix-card__header{padding:var(--uix-space-5) var(--uix-space-6);border-bottom:1px solid var(--uix-border);display:flex;align-items:center;gap:var(--uix-space-3)}.uix-card__title{font-size:var(--uix-text-h3);font-weight:600}.uix-card__subtitle{font-size:var(--uix-text-meta);color:var(--uix-text-muted);margin-top:var(--uix-space-1)}.uix-card__body{padding:var(--uix-space-6)}.uix-card__footer{padding:var(--uix-space-4) var(--uix-space-6);border-top:1px solid var(--uix-border);display:flex;gap:var(--uix-space-2);justify-content:flex-end}}@layer uix.components{.uix-stat{background:var(--uix-surface);border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);padding:var(--uix-space-6)}.uix-stat__label{font-size:var(--uix-text-eyebrow);letter-spacing:var(--uix-tracking-eyebrow);text-transform:uppercase;color:var(--uix-text-muted);display:flex;align-items:center;justify-content:space-between;gap:var(--uix-space-2)}.uix-stat__label svg{width:var(--uix-icon-md);height:var(--uix-icon-md)}.uix-stat__value{font-size:var(--uix-text-data-hero);font-weight:600;line-height:var(--uix-leading-data-hero);margin-top:var(--uix-space-3)}.uix-stat__meta{font-size:var(--uix-text-meta);color:var(--uix-text-muted);margin-top:var(--uix-space-2);display:flex;align-items:center;gap:var(--uix-space-2)}.uix-stat__trend{display:inline-flex;align-items:center;gap:var(--uix-space-1);font-size:var(--uix-text-meta);font-weight:600;padding:var(--uix-space-1) var(--uix-space-2);border-radius:var(--uix-radius-pill)}.uix-stat__trend--up{color:var(--uix-success);background:var(--uix-success-bg)}.uix-stat__trend--down{color:var(--uix-danger-text);background:var(--uix-danger-bg)}}@layer uix.components{.uix-pill{display:inline-flex;align-items:center;gap:var(--uix-space-2);padding:var(--uix-space-1) var(--uix-space-3);border-radius:var(--uix-radius-pill);font-size:var(--uix-text-meta);font-weight:500;line-height:1.4;background:var(--tone-bg, var(--uix-bg-active));color:var(--tone-fg, var(--uix-text-hushed))}.uix-pill__dot{width:7px;height:7px;border-radius:50%;background:var(--tone-dot, currentColor);flex:none}.uix-pill--neutral{--tone-bg: var(--uix-bg-active);--tone-fg: var(--uix-text-hushed);--tone-dot: var(--uix-text-muted)}.uix-pill--success{--tone-bg: var(--uix-success-bg);--tone-fg: var(--uix-success);--tone-dot: var(--uix-success)}.uix-pill--info{--tone-bg: var(--uix-info-bg);--tone-fg: var(--uix-info-text);--tone-dot: var(--uix-info)}.uix-pill--warning{--tone-bg: var(--uix-warning-bg);--tone-fg: var(--uix-warning-text);--tone-dot: var(--uix-warning)}.uix-pill--danger{--tone-bg: var(--uix-danger-bg);--tone-fg: var(--uix-danger-text);--tone-dot: var(--uix-danger)}.uix-pill--critical{--tone-bg: var(--uix-danger);--tone-fg: var(--uix-danger-fg);--tone-dot: var(--uix-danger-fg)}.uix-pill--muted{--tone-bg: transparent;--tone-fg: var(--uix-text-muted);--tone-dot: var(--uix-text-muted)}.uix-pill--attention{--tone-bg: var(--uix-attention-bg);--tone-fg: var(--uix-attention-text);--tone-dot: var(--uix-attention)}.uix-pill--overdue{--tone-bg: var(--uix-overdue-bg);--tone-fg: var(--uix-overdue-text);--tone-dot: var(--uix-overdue)}.uix-pill--sla-ok{--tone-bg: var(--uix-success-bg);--tone-fg: var(--uix-success);--tone-dot: var(--uix-success)}.uix-pill--sla-at-risk{--tone-bg: var(--uix-attention-bg);--tone-fg: var(--uix-attention-text);--tone-dot: var(--uix-attention)}.uix-pill--sla-breached{--tone-bg: var(--uix-overdue-bg);--tone-fg: var(--uix-overdue-text);--tone-dot: var(--uix-overdue)}.uix-pill--p1{--tone-bg: var(--uix-danger-bg);--tone-fg: var(--uix-danger-text);--tone-dot: var(--uix-danger)}.uix-pill--p2{--tone-bg: var(--uix-warning-bg);--tone-fg: var(--uix-warning-text);--tone-dot: var(--uix-warning)}.uix-pill--p3{--tone-bg: var(--uix-amber-bg);--tone-fg: var(--uix-amber-text);--tone-dot: var(--uix-amber)}.uix-pill--p4{--tone-bg: var(--uix-info-bg);--tone-fg: var(--uix-info-text);--tone-dot: var(--uix-info)}.uix-pill--p5{--tone-bg: var(--uix-bg-active);--tone-fg: var(--uix-text-hushed);--tone-dot: var(--uix-text-muted)}.uix-pill--outline{background:transparent;border:1px solid var(--tone-line, color-mix(in srgb, var(--tone-fg) 40%, transparent))}.uix-pill--outline.uix-pill--neutral{--tone-line: var(--uix-border-strong)}.uix-pill--outline.uix-pill--muted{--tone-line: var(--uix-border)}.uix-pill--outline.uix-pill--critical{color:var(--uix-danger-text);--tone-dot: var(--uix-danger);--tone-line: color-mix(in srgb, var(--uix-danger) 60%, transparent)}}@layer uix.components{.uix-table-wrap{overflow:auto;max-height:460px;border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);background:var(--uix-surface)}.uix-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--uix-text-body)}.uix-table thead th{position:sticky;top:0;z-index:var(--uix-z-raised);background:var(--uix-surface);text-align:left;font-size:var(--uix-text-meta);font-weight:600;color:var(--uix-text-hushed);padding:0 var(--uix-space-4);height:44px;border-bottom:1px solid var(--uix-border);white-space:nowrap}.uix-table th[data-sort]{cursor:pointer;user-select:none}.uix-table th[data-sort]:hover{color:var(--uix-text)}.uix-table th[data-sort]:after{content:" \2195";opacity:.35}.uix-table th[aria-sort=ascending]:after{content:" \2191";opacity:1;color:var(--uix-accent)}.uix-table th[aria-sort=descending]:after{content:" \2193";opacity:1;color:var(--uix-accent)}.uix-table th[data-sort-order]:before{content:attr(data-sort-order);display:inline-block;margin-right:var(--uix-space-1);font-size:var(--uix-text-eyebrow);font-variant-numeric:tabular-nums;color:var(--uix-accent)}.uix-table td{padding:0 var(--uix-space-4);height:var(--uix-row-h);border-bottom:1px solid var(--uix-border);color:var(--uix-text);vertical-align:middle}.uix-table tbody tr{background:var(--uix-row)}.uix-table tbody tr:nth-child(2n){background:var(--uix-row-alt)}.uix-table--no-zebra tbody tr,.uix-table--no-zebra tbody tr:nth-child(2n){background:var(--uix-row)}.uix-table tbody tr[data-pinned]{background:var(--uix-row-pinned-bg)}.uix-table tbody tr[aria-selected=true]{background:var(--uix-row-selected-bg)}.uix-table tbody tr:hover{background:var(--uix-bg-hover)}.uix-table[data-density=compact] td,.uix-table--compact td{height:var(--uix-row-h-compact)}.uix-table[data-density=comfortable] td{height:var(--uix-row-h-comfortable)}.uix-table__pin{border:0;background:transparent;color:var(--uix-text-muted);cursor:pointer;padding:var(--uix-space-1);border-radius:var(--uix-radius-xs);opacity:0;transition:opacity var(--uix-dur-fast) var(--uix-ease-out)}.uix-table tbody tr:hover .uix-table__pin,.uix-table__pin[data-on]{opacity:1}.uix-table__pin:hover{background:var(--uix-bg-active);color:var(--uix-text)}.uix-table__pin[data-on]{color:var(--uix-accent)}.uix-table__pin svg{width:15px;height:15px}.uix-table__pin[data-on] svg{fill:currentColor}.uix-table--pinned-col th:first-child,.uix-table--pinned-col td:first-child{position:sticky;left:0;z-index:var(--uix-z-raised);box-shadow:1px 0 0 var(--uix-border)}.uix-table--pinned-col thead th:first-child{z-index:var(--uix-z-sticky);background:var(--uix-surface)}.uix-table--pinned-col tbody tr td:first-child{background:var(--uix-row)}.uix-table--pinned-col tbody tr:nth-child(2n) td:first-child{background:var(--uix-row-alt)}.uix-table--pinned-col.uix-table--no-zebra tbody tr td:first-child,.uix-table--pinned-col.uix-table--no-zebra tbody tr:nth-child(2n) td:first-child{background:var(--uix-row)}.uix-table--pinned-col tbody tr[data-pinned] td:first-child{background:var(--uix-row-pinned-bg)}.uix-table--pinned-col tbody tr[aria-selected=true] td:first-child{background:var(--uix-row-selected-bg)}.uix-table--pinned-col tbody tr:hover td:first-child{background:var(--uix-bg-hover)}.uix-table--fixed{table-layout:fixed;width:100%}.uix-col--w-xs{width:var(--uix-col-w-xs)}.uix-col--w-sm{width:var(--uix-col-w-sm)}.uix-col--w-md{width:var(--uix-col-w-md)}.uix-col--w-lg{width:var(--uix-col-w-lg)}.uix-col--w-xl{width:var(--uix-col-w-xl)}.uix-col--flex,.uix-col--primary{width:auto;min-width:var(--uix-col-title-min)}.uix-col--truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.uix-col--wrap{white-space:normal;overflow-wrap:anywhere}.uix-col--num{font-variant-numeric:tabular-nums}.uix-table th.uix-col--num,.uix-table td.uix-col--num{text-align:right}.uix-cell-strong{font-weight:600}.uix-cell-sub{display:block;font-size:var(--uix-text-meta);color:var(--uix-text-muted)}.uix-cell-mono{font-family:var(--uix-font-mono);font-size:var(--uix-text-meta)}.uix-id-cell__btn{border:0;background:transparent;cursor:pointer;padding:0;color:var(--uix-text);font:inherit;display:inline-flex;align-items:center;gap:var(--uix-space-1);white-space:nowrap}.uix-id-cell__btn:hover{color:var(--uix-accent)}.uix-id-cell__btn:focus-visible{outline:2px solid var(--uix-ring);outline-offset:2px;border-radius:var(--uix-radius-xs)}.uix-id-cell__arrow{width:var(--uix-icon-sm);height:var(--uix-icon-sm);flex-shrink:0;color:var(--uix-text-muted);opacity:0;transition:opacity var(--uix-dur-fast) var(--uix-ease-out)}.uix-table tbody tr:hover .uix-id-cell__arrow{opacity:1}.uix-table th.uix-table__selcol,.uix-table td.uix-table__selcell{width:44px;padding-left:var(--uix-space-3);padding-right:0;text-align:center}.uix-bulkbar{display:flex;align-items:center;gap:var(--uix-space-3);padding:var(--uix-space-2) var(--uix-space-3);margin-bottom:var(--uix-space-3);border:1px solid var(--uix-accent);border-radius:var(--uix-radius-md);background:var(--uix-brand-muted);color:var(--uix-text);animation:uix-bulkbar-in var(--uix-dur) var(--uix-ease-out)}.uix-bulkbar[hidden]{display:none}.uix-bulkbar__count{font-size:var(--uix-text-meta);font-weight:600;color:var(--uix-accent);font-variant-numeric:tabular-nums}.uix-bulkbar__spacer{flex:1}@keyframes uix-bulkbar-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.uix-bulkbar{animation:none}}.uix-table__actions{width:84px;text-align:right;white-space:nowrap}.uix-rowact{border:0;background:transparent;color:var(--uix-text-muted);cursor:pointer;padding:var(--uix-space-1);border-radius:var(--uix-radius-sm);opacity:0;transition:opacity var(--uix-dur-fast) var(--uix-ease-out),background-color var(--uix-dur-fast) var(--uix-ease-out)}.uix-rowact svg{width:16px;height:16px;display:block}.uix-table tbody tr:hover .uix-rowact,.uix-rowact:focus-visible,.uix-rowact[aria-expanded=true]{opacity:1}.uix-rowact:hover{background:var(--uix-bg-active);color:var(--uix-text)}.uix-table__expand{border:0;background:transparent;cursor:pointer;color:var(--uix-text-muted);padding:var(--uix-space-1);border-radius:var(--uix-radius-xs);display:inline-grid;place-items:center}.uix-table__expand svg{width:16px;height:16px;transition:transform var(--uix-dur-fast) var(--uix-ease-out)}.uix-table__expand[aria-expanded=true] svg{transform:rotate(90deg)}.uix-table__expand:hover{background:var(--uix-bg-active);color:var(--uix-text)}tr.uix-table__detail>td{background:var(--uix-bg-subtle);padding:0 var(--uix-space-4)}.uix-table__detail-inner{padding:var(--uix-space-4) var(--uix-space-1) var(--uix-space-5);display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--uix-space-4) var(--uix-space-7)}.uix-kv{font-size:var(--uix-text-meta)}.uix-kv__k{color:var(--uix-text-muted);margin-bottom:var(--uix-space-1)}.uix-kv__v{color:var(--uix-text)}@media(prefers-reduced-motion:reduce){.uix-table__expand svg{transition:none}}.uix-cell-edit{display:inline-flex;align-items:center;gap:var(--uix-space-2);cursor:text;border-radius:var(--uix-radius-sm);padding:var(--uix-space-1) var(--uix-space-2);margin:calc(-1 * var(--uix-space-1)) calc(-1 * var(--uix-space-2));transition:background-color var(--uix-dur-fast) var(--uix-ease-out),box-shadow var(--uix-dur-fast) var(--uix-ease-out)}.uix-cell-edit:hover{background:var(--uix-bg-active)}.uix-cell-edit__pencil{width:13px;height:13px;color:var(--uix-text-muted);opacity:0;transition:opacity var(--uix-dur-fast) var(--uix-ease-out)}.uix-table tbody tr:hover .uix-cell-edit__pencil{opacity:1}.uix-cell-edit[data-editing]{background:var(--uix-surface);box-shadow:0 0 0 2px var(--uix-ring);cursor:default}.uix-cell-edit__ok{color:var(--uix-success);width:14px;height:14px;opacity:0;transition:opacity var(--uix-dur-fast) var(--uix-ease-out)}.uix-cell-edit[data-saved] .uix-cell-edit__ok{opacity:1}.uix-cell-edit input,.uix-cell-edit select{border:0;background:transparent;font:inherit;color:inherit;outline:none}.uix-table__resize{position:absolute;top:0;right:-3px;width:8px;height:100%;cursor:col-resize;z-index:var(--uix-z-raised);user-select:none;touch-action:none}.uix-table__resize:after{content:"";position:absolute;top:25%;right:3px;width:2px;height:50%;background:transparent;border-radius:var(--uix-radius-pill);transition:background-color var(--uix-dur-fast) var(--uix-ease-out)}.uix-table thead th:hover .uix-table__resize:after,.uix-table__resize[data-drag]:after{background:var(--uix-accent)}.uix-mark{background:var(--uix-warning-bg);color:var(--uix-text);border-radius:var(--uix-radius-xs);padding:0 .15em;box-shadow:inset 0 -1px color-mix(in srgb,var(--uix-warning) 60%,transparent)}.uix-table--priority th[data-priority=low],.uix-table--priority td[data-priority=low],.uix-table--priority-mid th[data-priority=low],.uix-table--priority-mid td[data-priority=low],.uix-table--priority-mid th[data-priority=mid],.uix-table--priority-mid td[data-priority=mid]{display:none}.uix-table--cards{display:block}.uix-table--cards thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.uix-table--cards tbody,.uix-table--cards tr,.uix-table--cards td{display:block;width:auto}.uix-table--cards tbody tr{border:1px solid var(--uix-border);border-radius:var(--uix-radius-md);background:var(--uix-surface);margin:0 0 var(--uix-space-3);padding:var(--uix-space-1) var(--uix-space-4);box-shadow:var(--uix-shadow-sm)}.uix-table--cards tbody tr[aria-selected=true]{box-shadow:0 0 0 2px var(--uix-accent)}.uix-table--cards td{height:auto;display:flex;justify-content:space-between;align-items:center;gap:var(--uix-space-5);padding:var(--uix-space-2) 0;border-bottom:1px solid var(--uix-border);text-align:right;white-space:normal}.uix-table--cards td:last-child{border-bottom:0}.uix-table--cards td:before{content:attr(data-label);color:var(--uix-text-muted);font-size:var(--uix-text-meta);font-weight:500;text-align:left;flex:none}.uix-table--cards td[data-col=id]{font-size:var(--uix-text-h3);font-weight:600;border-bottom:1px solid var(--uix-border);padding-bottom:var(--uix-space-3)}.uix-table--cards td[data-col=id]:before{display:none}.uix-table--cards td[data-col=select],.uix-table--cards td[data-col=actions],.uix-table--cards td[data-col=expand]{display:none}.uix-compare{border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);overflow:hidden;font-size:var(--uix-text-meta)}.uix-compare__head,.uix-compare__row{display:grid;grid-template-columns:1fr 1fr}.uix-compare__head>div,.uix-compare__cell{padding:var(--uix-space-3);background:var(--uix-surface);border-top:1px solid var(--uix-border)}.uix-compare__head>div{font-weight:600;border-top:0}.uix-compare__head>div+div,.uix-compare__cell+.uix-compare__cell{border-left:1px solid var(--uix-border)}.uix-compare__attr{grid-column:1 / -1;background:var(--uix-bg-subtle);padding:var(--uix-space-1) var(--uix-space-3);border-top:1px solid var(--uix-border);font-size:var(--uix-text-eyebrow);letter-spacing:var(--uix-tracking-eyebrow);text-transform:uppercase;color:var(--uix-text-muted)}}@layer uix.components{.uix-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--uix-space-2);margin-bottom:var(--uix-space-3)}.uix-toolbar__spacer{flex:1}.uix-filterbar{display:flex;flex-wrap:wrap;gap:var(--uix-space-2) var(--uix-space-5);margin-bottom:var(--uix-space-3)}.uix-filterrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--uix-space-2)}.uix-filterrow__label{font-size:var(--uix-text-meta);color:var(--uix-text-muted);width:54px;flex:none}.uix-chip{display:inline-flex;align-items:center;gap:var(--uix-space-2);padding:var(--uix-space-1) var(--uix-space-3);border-radius:var(--uix-radius-pill);border:1px solid var(--uix-border);background:var(--uix-surface);color:var(--uix-text-hushed);font:inherit;font-size:var(--uix-text-meta);cursor:pointer;transition:background-color var(--uix-dur-fast) var(--uix-ease-out),border-color var(--uix-dur-fast) var(--uix-ease-out),color var(--uix-dur-fast) var(--uix-ease-out)}.uix-chip:hover{border-color:var(--uix-border-strong);color:var(--uix-text)}.uix-chip[data-on]{background:var(--uix-brand-muted);border-color:var(--uix-accent);color:var(--uix-accent)}.uix-chip__count{font-variant-numeric:tabular-nums;opacity:.7}}@layer uix.components{.uix-view-menu{min-width:248px;padding:var(--uix-space-2)}.uix-view-menu__group{padding:var(--uix-space-2) var(--uix-space-2)}.uix-view-menu__group+.uix-view-menu__group{border-top:1px solid var(--uix-border)}.uix-view-menu__label{font-size:var(--uix-text-eyebrow);letter-spacing:var(--uix-tracking-eyebrow);text-transform:uppercase;color:var(--uix-text-muted);margin-bottom:var(--uix-space-2)}.uix-view-menu__row{display:flex;align-items:center;justify-content:space-between;gap:var(--uix-space-3);font-size:var(--uix-text-body);color:var(--uix-text);cursor:pointer}.uix-view-menu__row+.uix-view-menu__row{margin-top:var(--uix-space-3)}.uix-view-menu .uix-segmented{display:flex;width:100%}.uix-view-menu .uix-segmented__option{flex:1;text-align:center}.uix-view-menu__cols{display:flex;flex-direction:column;gap:var(--uix-space-1);max-height:180px;overflow:auto}.uix-view-menu__cols .uix-menu__item{font-size:var(--uix-text-meta)}}@layer uix.components{.uix-list{display:flex;flex-direction:column;border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);overflow:hidden;background:var(--uix-surface)}.uix-list__item{display:flex;align-items:center;gap:var(--uix-space-3);padding:var(--uix-space-4) var(--uix-space-5);border-bottom:1px solid var(--uix-border)}.uix-list__item:last-child{border-bottom:0}.uix-list__item:hover{background:var(--uix-bg-hover)}.uix-list__title{font-weight:500}.uix-list__meta{font-size:var(--uix-text-meta);color:var(--uix-text-muted)}.uix-list__trail{margin-left:auto;display:flex;align-items:center;gap:var(--uix-space-2)}}@layer uix.components{.uix-dl{display:grid;grid-template-columns:max-content 1fr;gap:var(--uix-space-3) var(--uix-space-6)}.uix-dl dt{color:var(--uix-text-muted);font-size:var(--uix-text-meta)}.uix-dl dd{color:var(--uix-text);font-size:var(--uix-text-body);margin:0}}@layer uix.components{.uix-text-display,.uix-text-h1{font-size:var(--uix-text-display);line-height:var(--uix-leading-display);font-weight:400;letter-spacing:var(--uix-tracking-tight);color:var(--uix-text)}.uix-text-h2{font-size:var(--uix-text-h2);line-height:var(--uix-leading-h2);font-weight:400;letter-spacing:-.01em;color:var(--uix-text)}.uix-text-h3{font-size:var(--uix-text-h3);line-height:var(--uix-leading-h3);font-weight:700;color:var(--uix-text)}.uix-text-body{font-size:var(--uix-text-body);line-height:var(--uix-leading-body);font-weight:400;color:var(--uix-text)}.uix-text-body-hushed{font-size:var(--uix-text-body);line-height:var(--uix-leading-body);font-weight:400;color:var(--uix-text-hushed)}.uix-text-meta{font-size:var(--uix-text-meta);line-height:var(--uix-leading-meta);font-weight:400;color:var(--uix-text-hushed)}.uix-text-eyebrow{font-size:var(--uix-text-eyebrow);line-height:var(--uix-leading-eyebrow);font-weight:700;letter-spacing:var(--uix-tracking-eyebrow);text-transform:uppercase;color:var(--uix-text-hushed)}.uix-text-data-hero{font-size:var(--uix-text-data-hero);line-height:1.1;font-weight:400;letter-spacing:-.01em;color:var(--uix-text);font-variant-numeric:tabular-nums}}@layer uix.components{.uix-avatar{width:32px;height:32px;flex:none;border-radius:50%;background:var(--uix-bg-active);color:var(--uix-text);display:inline-flex;align-items:center;justify-content:center;font-size:var(--uix-text-meta);font-weight:600;line-height:1;overflow:hidden;position:relative}.uix-avatar img{width:100%;height:100%;object-fit:cover}.uix-avatar--sm{width:24px;height:24px;font-size:var(--uix-text-eyebrow)}.uix-avatar--lg{width:44px;height:44px}.uix-avatar__status{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;border:2px solid var(--uix-surface);background:var(--uix-success)}.uix-avatar-group{display:inline-flex}.uix-avatar-group .uix-avatar{box-shadow:0 0 0 2px var(--uix-surface);margin-left:calc(-1 * var(--uix-space-2))}.uix-avatar-group .uix-avatar:first-child{margin-left:0}.uix-user-chip{display:inline-flex;align-items:center;gap:var(--uix-space-2)}.uix-user-chip__name{font-size:var(--uix-text-body);font-weight:500}.uix-user-chip__sub{font-size:var(--uix-text-meta);color:var(--uix-text-muted)}.uix-avatar--editable{cursor:pointer}.uix-avatar__edit{position:absolute;inset:0;display:grid;place-items:center;background:var(--uix-scrim);color:var(--uix-text-reverse);opacity:0;transition:opacity var(--uix-dur-fast) var(--uix-ease-out)}.uix-avatar__edit svg{width:45%;height:45%}.uix-avatar--editable:hover .uix-avatar__edit,.uix-avatar--editable:focus-visible .uix-avatar__edit{opacity:1}.uix-avatar--empty{background:var(--uix-bg-subtle);border:1.5px dashed var(--uix-border-strong);color:var(--uix-text-muted)}}@layer uix.components{.uix-tooltip{display:inline-flex}.uix-tooltip__bubble{position:fixed;margin:0;inset:auto;border:0;width:max-content;max-width:16rem;background:var(--uix-text);color:var(--uix-bg-app);font-size:var(--uix-text-meta);font-weight:500;line-height:1.4;padding:var(--uix-space-2) var(--uix-space-3);border-radius:var(--uix-radius-sm);box-shadow:var(--uix-shadow-popover);white-space:normal;pointer-events:none;opacity:0;transition:opacity var(--uix-dur-fast) var(--uix-ease-out)}.uix-tooltip__bubble:popover-open{opacity:1}@starting-style{.uix-tooltip__bubble:popover-open{opacity:0}}[data-uix-tip]{position:relative}[data-uix-tip]:after{content:attr(data-uix-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%) translateY(var(--uix-lift));background:var(--uix-text);color:var(--uix-bg-app);font-size:var(--uix-text-meta);font-weight:500;padding:var(--uix-space-2) var(--uix-space-3);border-radius:var(--uix-radius-sm);white-space:nowrap;box-shadow:var(--uix-shadow-popover);opacity:0;pointer-events:none;z-index:var(--uix-z-tooltip);transition:opacity var(--uix-dur-fast) var(--uix-ease-out),transform var(--uix-dur-fast) var(--uix-ease-out)}[data-uix-tip]:hover:after,[data-uix-tip]:focus-visible:after{opacity:1;transform:translate(-50%) translateY(0)}.uix-has-js-tip [data-uix-tip]:after{content:none}}@layer uix.components{.uix-progress{height:8px;background:var(--uix-bg-active);border-radius:var(--uix-radius-pill);overflow:hidden}.uix-progress__bar{height:100%;background:var(--uix-accent);border-radius:inherit;transition:width var(--uix-dur) var(--uix-ease-out)}.uix-progress--indeterminate{position:relative}.uix-progress--indeterminate .uix-progress__bar{width:40%;animation:uix-progress-slide 1.2s var(--uix-ease-in-out) infinite}@keyframes uix-progress-slide{0%{transform:translate(-110%)}to{transform:translate(280%)}}.uix-ring{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--uix-accent) calc(var(--val, .66) * 360deg),var(--uix-bg-active) 0)}.uix-ring__inner{width:32px;height:32px;border-radius:50%;background:var(--uix-surface);display:grid;place-items:center;font-size:var(--uix-text-meta);font-weight:600}}@layer uix.components{.uix-meter{height:8px;background:var(--uix-bg-active);border-radius:var(--uix-radius-pill);overflow:hidden}.uix-meter__fill{height:100%;border-radius:inherit;background:var(--uix-success);transition:width var(--uix-dur) var(--uix-ease-out)}.uix-meter__fill[data-tone=warning]{background:var(--uix-warning)}.uix-meter__fill[data-tone=danger]{background:var(--uix-danger)}.uix-meter__fill[data-tone=attention]{background:var(--uix-attention)}.uix-meter__fill[data-tone=overdue]{background:var(--uix-overdue)}}@layer uix.components{.uix-timeline{display:flex;flex-direction:column}.uix-timeline__item{display:grid;grid-template-columns:24px 1fr;gap:var(--uix-space-3)}.uix-timeline__rail{display:flex;flex-direction:column;align-items:center}.uix-timeline__node{width:12px;height:12px;border-radius:50%;background:var(--uix-accent);margin-top:var(--uix-space-1);flex:none;box-shadow:0 0 0 3px var(--uix-brand-muted)}.uix-timeline__line{width:1px;flex:1;background:var(--uix-border);margin:var(--uix-space-1) 0}.uix-timeline__item:last-child .uix-timeline__line{display:none}.uix-timeline__body{padding-bottom:var(--uix-space-5)}.uix-timeline__meta{font-size:var(--uix-text-meta);color:var(--uix-text-muted)}}@layer uix.components{.uix-tree,.uix-tree ul{list-style:none;margin:0;padding:0}.uix-tree__group{padding-left:var(--uix-space-5)}.uix-tree__item{outline:none}.uix-tree__row{display:flex;align-items:center;gap:var(--uix-space-2);padding:var(--uix-space-2) var(--uix-space-2);border-radius:var(--uix-radius-sm);cursor:pointer;color:var(--uix-text);font-size:var(--uix-text-body)}.uix-tree__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.uix-tree__item>.uix-tree__row:hover{background:var(--uix-bg-hover)}.uix-tree__item[aria-selected=true]>.uix-tree__row{background:var(--uix-bg-active)}.uix-tree__item:focus-visible>.uix-tree__row{outline:2px solid var(--uix-ring);outline-offset:-2px}.uix-tree__toggle{width:16px;height:16px;flex:none;display:grid;place-items:center;color:var(--uix-text-muted);transition:transform var(--uix-dur) var(--uix-ease-out)}.uix-tree__toggle svg{width:14px;height:14px}.uix-tree__item[aria-expanded=false]>.uix-tree__row .uix-tree__toggle{transform:rotate(-90deg)}.uix-tree__item[aria-expanded=false]>.uix-tree__group{display:none}}@layer uix.components{.uix-calendar{width:280px;border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);background:var(--uix-surface);padding:var(--uix-space-3)}.uix-calendar__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--uix-space-2);font-weight:600;font-size:var(--uix-text-body)}.uix-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--uix-space-1)}.uix-calendar__dow{text-align:center;font-size:var(--uix-text-eyebrow);color:var(--uix-text-muted);padding:var(--uix-space-1) 0}.uix-calendar__day{aspect-ratio:1;display:grid;place-items:center;border-radius:var(--uix-radius-sm);font-size:var(--uix-text-meta);color:var(--uix-text);cursor:pointer;border:0;background:transparent}.uix-calendar__day:hover{background:var(--uix-bg-hover)}.uix-calendar__day[data-muted]{color:var(--uix-text-muted);opacity:.45}.uix-calendar__day[data-today]{box-shadow:inset 0 0 0 1px var(--uix-border-strong)}.uix-calendar__day[data-range]{background:var(--uix-brand-muted);border-radius:0}.uix-calendar__day[aria-selected=true]{background:var(--uix-accent);color:var(--uix-accent-fg)}}@layer uix.components{.uix-empty{display:flex;flex-direction:column;align-items:center;gap:var(--uix-space-3);text-align:center;padding:var(--uix-space-8);color:var(--uix-text-muted)}.uix-empty__icon{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--uix-bg-subtle);color:var(--uix-text-muted)}.uix-empty__icon svg{width:22px;height:22px}.uix-empty__title{font-size:var(--uix-text-h3);font-weight:600;color:var(--uix-text)}.uix-empty__icon--danger{background:var(--uix-danger-bg);color:var(--uix-danger)}.uix-skeleton{background:linear-gradient(90deg,var(--uix-bg-subtle) 25%,var(--uix-bg-hover) 50%,var(--uix-bg-subtle) 75%);background-size:200% 100%;animation:uix-shimmer 1.4s linear infinite;border-radius:var(--uix-radius-sm)}.uix-skeleton--text{height:12px;border-radius:var(--uix-radius-pill)}.uix-skeleton--circle{border-radius:50%}}@layer uix.components{.uix-chart{background:var(--uix-surface);border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);padding:var(--uix-space-5)}.uix-chart__title{font-size:var(--uix-text-h3);font-weight:600}.uix-chart__subtitle{font-size:var(--uix-text-meta);color:var(--uix-text-muted);margin-bottom:var(--uix-space-4)}.uix-legend{display:flex;flex-wrap:wrap;gap:var(--uix-space-3);margin-top:var(--uix-space-3)}.uix-legend__item{display:inline-flex;align-items:center;gap:var(--uix-space-2);font-size:var(--uix-text-meta);color:var(--uix-text-hushed)}.uix-legend__swatch{width:10px;height:10px;border-radius:var(--uix-radius-xs);flex:none}}@layer uix.components{.uix-alert{display:flex;gap:var(--uix-space-3);padding:var(--uix-space-3) var(--uix-space-4);border-radius:var(--uix-radius-md);border:1px solid var(--tone-border, var(--uix-border));background:var(--tone-bg, var(--uix-bg-subtle));color:var(--uix-text);font-size:var(--uix-text-body)}.uix-alert__icon{color:var(--tone-fg, var(--uix-text));flex:none}.uix-alert__icon svg{width:var(--uix-icon-md);height:var(--uix-icon-md)}.uix-alert__title{font-weight:600;margin-bottom:var(--uix-space-1)}.uix-alert__body{font-size:var(--uix-text-meta);color:var(--uix-text-hushed)}.uix-alert--info{--tone-bg: var(--uix-info-bg);--tone-border: color-mix(in srgb, var(--uix-info) 30%, transparent);--tone-fg: var(--uix-info-text)}.uix-alert--success{--tone-bg: var(--uix-success-bg);--tone-border: color-mix(in srgb, var(--uix-success) 30%, transparent);--tone-fg: var(--uix-success)}.uix-alert--warning{--tone-bg: var(--uix-warning-bg);--tone-border: color-mix(in srgb, var(--uix-warning) 40%, transparent);--tone-fg: var(--uix-warning)}.uix-alert--danger{--tone-bg: var(--uix-danger-bg);--tone-border: color-mix(in srgb, var(--uix-danger) 30%, transparent);--tone-fg: var(--uix-danger-text)}}@layer uix.components{.uix-toaster{position:fixed;bottom:16px;right:16px;z-index:var(--uix-z-toast);display:flex;flex-direction:column;gap:var(--uix-space-2);width:340px;max-width:calc(100vw - 32px)}.uix-toast{display:flex;gap:var(--uix-space-3);align-items:flex-start;padding:var(--uix-space-3) var(--uix-space-4);border-radius:var(--uix-radius-md);background:var(--uix-surface-2);border:1px solid var(--uix-border);box-shadow:var(--uix-shadow-popover);animation:uix-slide-in-right var(--uix-dur-slow) var(--uix-ease-out)}.uix-toast[data-leaving]{animation:uix-toast-out var(--uix-dur) var(--uix-ease-in) forwards}@keyframes uix-toast-out{to{opacity:0;transform:translate(16px)}}.uix-toast__icon{flex:none;margin-top:1px}.uix-toast__icon svg{width:var(--uix-icon-md);height:var(--uix-icon-md)}.uix-toast__body{flex:1}.uix-toast__title{font-weight:600;font-size:var(--uix-text-body)}.uix-toast__msg{font-size:var(--uix-text-meta);color:var(--uix-text-muted);margin-top:var(--uix-space-1)}.uix-toast__close{border:0;background:transparent;color:var(--uix-text-muted);cursor:pointer;padding:var(--uix-space-1) var(--uix-space-2);border-radius:var(--uix-radius-xs)}.uix-toast__close:hover{background:var(--uix-bg-hover);color:var(--uix-text)}.uix-toast--success .uix-toast__icon{color:var(--uix-success)}.uix-toast--danger .uix-toast__icon{color:var(--uix-danger)}.uix-toast--info .uix-toast__icon{color:var(--uix-info)}}@layer uix.components{.uix-dialog{margin:auto;width:100%;max-width:min(520px,92vw);padding:0;color:var(--uix-text);border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);background:var(--uix-surface-2);box-shadow:var(--uix-shadow-overlay);opacity:0;transform:translateY(8px) scale(.98);transition:opacity var(--uix-dur-slow) var(--uix-ease-out),transform var(--uix-dur-slow) var(--uix-ease-out),overlay var(--uix-dur-slow) allow-discrete,display var(--uix-dur-slow) allow-discrete;display:none}.uix-dialog[open]{opacity:1;transform:none;display:block}@starting-style{.uix-dialog[open]{opacity:0;transform:translateY(8px) scale(.98)}}.uix-dialog::backdrop{background:var(--uix-scrim);opacity:0;transition:opacity var(--uix-dur-slow) var(--uix-ease-out),overlay var(--uix-dur-slow) allow-discrete,display var(--uix-dur-slow) allow-discrete}.uix-dialog[open]::backdrop{opacity:1}@starting-style{.uix-dialog[open]::backdrop{opacity:0}}.uix-dialog__header{display:flex;align-items:center;gap:var(--uix-space-3);padding:var(--uix-space-4) var(--uix-space-5);border-bottom:1px solid var(--uix-border)}.uix-dialog__title{font-size:var(--uix-text-h3);font-weight:600}.uix-dialog__close{margin-left:auto;border:0;background:transparent;color:var(--uix-text-muted);cursor:pointer;width:30px;height:30px;display:grid;place-items:center;border-radius:var(--uix-radius-sm)}.uix-dialog__close:hover{background:var(--uix-bg-hover);color:var(--uix-text)}.uix-dialog__close svg{width:var(--uix-icon-md);height:var(--uix-icon-md)}.uix-dialog__body{padding:var(--uix-space-5);color:var(--uix-text-hushed)}.uix-dialog__footer{display:flex;gap:var(--uix-space-2);justify-content:flex-end;padding:var(--uix-space-4) var(--uix-space-5);border-top:1px solid var(--uix-border)}}@layer uix.components{.uix-drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(420px,100vw);padding:0;color:var(--uix-text);border:0;border-left:1px solid var(--uix-border);border-radius:0;background:var(--uix-surface);box-shadow:var(--uix-shadow-overlay);transform:translate(100%);transition:transform var(--uix-dur-slow) var(--uix-ease-out),overlay var(--uix-dur-slow) allow-discrete,display var(--uix-dur-slow) allow-discrete;display:none}.uix-drawer[open]{transform:none;display:flex;flex-direction:column}@starting-style{.uix-drawer[open]{transform:translate(100%)}}.uix-drawer::backdrop{background:var(--uix-scrim);opacity:0;transition:opacity var(--uix-dur-slow) var(--uix-ease-out),overlay var(--uix-dur-slow) allow-discrete,display var(--uix-dur-slow) allow-discrete}.uix-drawer[open]::backdrop{opacity:1}@starting-style{.uix-drawer[open]::backdrop{opacity:0}}.uix-drawer__header{display:flex;align-items:center;gap:var(--uix-space-3);padding:var(--uix-space-4) var(--uix-space-5);border-bottom:1px solid var(--uix-border)}.uix-drawer__body{padding:var(--uix-space-5);overflow-y:auto;flex:1}.uix-drawer__footer{display:flex;gap:var(--uix-space-2);padding:var(--uix-space-4) var(--uix-space-5);border-top:1px solid var(--uix-border)}}@layer uix.components{.uix-peek{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:var(--uix-peek-w);padding:0;color:var(--uix-text);border:0;border-left:1px solid var(--uix-border);border-radius:0;background:var(--uix-surface);box-shadow:var(--uix-shadow-overlay);transform:translate(100%);transition:transform var(--uix-dur-slow) var(--uix-ease-out),overlay var(--uix-dur-slow) allow-discrete,display var(--uix-dur-slow) allow-discrete;display:none}.uix-peek[open]{transform:none;display:flex;flex-direction:column}@starting-style{.uix-peek[open]{transform:translate(100%)}}.uix-peek::backdrop{background:var(--uix-scrim);opacity:0;transition:opacity var(--uix-dur-slow) var(--uix-ease-out),overlay var(--uix-dur-slow) allow-discrete,display var(--uix-dur-slow) allow-discrete}.uix-peek[open]::backdrop{opacity:1}@starting-style{.uix-peek[open]::backdrop{opacity:0}}.uix-peek__header{display:flex;align-items:center;gap:var(--uix-space-3);padding:var(--uix-space-4) var(--uix-space-4);border-bottom:1px solid var(--uix-border)}.uix-peek__nav{display:inline-flex;gap:var(--uix-space-1)}.uix-peek__navbtn{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--uix-border);background:var(--uix-surface);color:var(--uix-text);border-radius:var(--uix-radius-sm);cursor:pointer}.uix-peek__navbtn:hover{background:var(--uix-bg-hover)}.uix-peek__title{font-size:var(--uix-text-h3);font-weight:600}.uix-peek__title a{color:var(--uix-link)}.uix-peek__close{margin-left:auto;border:0;background:transparent;color:var(--uix-text-muted);cursor:pointer;width:30px;height:30px;display:grid;place-items:center;border-radius:var(--uix-radius-sm)}.uix-peek__close:hover{background:var(--uix-bg-hover);color:var(--uix-text)}.uix-peek__body{padding:var(--uix-space-5);overflow-y:auto;flex:1}.uix-peek__hint{font-size:var(--uix-text-meta);color:var(--uix-text-muted)}.uix-peek__footer{display:flex;gap:var(--uix-space-2);padding:var(--uix-space-4) var(--uix-space-4);border-top:1px solid var(--uix-border)}[data-uix-rowpeek] tbody tr{cursor:pointer}[data-uix-rowpeek] tbody tr:hover td{background:var(--uix-bg-hover)}}@layer uix.components{.uix-popover{margin:0;padding:var(--uix-space-2);background:var(--uix-surface-2);border:1px solid var(--uix-border);border-radius:var(--uix-radius-md);box-shadow:var(--uix-shadow-popover);color:var(--uix-text)}[popover].uix-popover{opacity:0;transform:translateY(calc(-1 * var(--uix-lift)));transition:opacity var(--uix-dur-fast) var(--uix-ease-out),transform var(--uix-dur-fast) var(--uix-ease-out),overlay var(--uix-dur-fast) allow-discrete,display var(--uix-dur-fast) allow-discrete}[popover].uix-popover:popover-open{opacity:1;transform:none}@starting-style{[popover].uix-popover:popover-open{opacity:0;transform:translateY(calc(-1 * var(--uix-lift)))}}}@layer uix.components{.uix-spinner{width:20px;height:20px;border:2px solid var(--uix-border-strong);border-right-color:transparent;border-radius:50%;display:inline-block;animation:uix-spin .6s linear infinite}.uix-spinner--accent{border-color:var(--uix-accent);border-right-color:transparent}.uix-spinner--lg{width:32px;height:32px;border-width:3px}.uix-overlay-progress{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;background:color-mix(in srgb,var(--uix-bg-app) 60%,transparent);backdrop-filter:blur(2px)}}@layer uix.components{.uix-detail{display:grid;grid-template-columns:1fr 280px;gap:var(--uix-space-5);align-items:start}.uix-detail__main{min-width:0;display:flex;flex-direction:column;gap:var(--uix-space-4)}.uix-detail__side{display:flex;flex-direction:column;gap:var(--uix-space-4)}@media(max-width:820px){.uix-detail{grid-template-columns:1fr}}}@layer uix.components{.uix-comments{display:flex;flex-direction:column;gap:var(--uix-space-4)}.uix-comment{display:grid;grid-template-columns:32px 1fr;gap:var(--uix-space-3)}.uix-comment__body{background:var(--uix-bg-subtle);border:1px solid var(--uix-border);border-radius:var(--uix-radius-md);padding:var(--uix-space-3) var(--uix-space-3)}.uix-comment__meta{font-size:var(--uix-text-meta);color:var(--uix-text-muted);margin-bottom:var(--uix-space-1)}.uix-comment__author{font-weight:600;color:var(--uix-text)}.uix-mention{color:var(--uix-link);background:var(--uix-brand-muted);padding:0 var(--uix-space-1);border-radius:var(--uix-radius-xs);font-weight:500}.uix-composer{border:1px solid var(--uix-border);border-radius:var(--uix-radius-md);background:var(--uix-surface)}.uix-composer:focus-within{border-color:var(--uix-ring);box-shadow:0 0 0 3px var(--uix-brand-muted)}.uix-composer textarea{width:100%;border:0;background:transparent;resize:vertical;padding:var(--uix-space-3) var(--uix-space-3);color:var(--uix-text);font:inherit;min-height:60px}.uix-composer textarea:focus{outline:none}.uix-composer__bar{display:flex;justify-content:flex-end;gap:var(--uix-space-2);padding:var(--uix-space-2);border-top:1px solid var(--uix-border)}.uix-comment__image{display:block;margin-top:var(--uix-space-2);padding:0;border-radius:var(--uix-radius-sm);overflow:hidden;border:1px solid var(--uix-border);background:none;cursor:zoom-in;max-width:200px}.uix-comment__image img{display:block;width:100%;height:auto}}@layer uix.components{.uix-reactions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--uix-space-2);margin-top:var(--uix-space-2)}.uix-reaction{display:inline-flex;align-items:center;gap:var(--uix-space-2);padding:1px var(--uix-space-2);line-height:1.7;border-radius:var(--uix-radius-pill);border:1px solid var(--uix-border);background:var(--uix-surface);color:var(--uix-text-hushed);font:inherit;font-size:var(--uix-text-meta);cursor:pointer}.uix-reaction:hover{border-color:var(--uix-border-strong)}.uix-reaction[data-mine]{background:var(--uix-brand-muted);border-color:var(--uix-accent);color:var(--uix-accent)}.uix-reaction__count{font-variant-numeric:tabular-nums}.uix-reaction-add{display:inline-flex;align-items:center;justify-content:center;width:30px;height:24px;border-radius:var(--uix-radius-pill);border:1px dashed var(--uix-border-strong);background:transparent;color:var(--uix-text-muted);cursor:pointer}.uix-reaction-add:hover{color:var(--uix-text);border-color:var(--uix-text-muted)}.uix-reaction-add svg{width:var(--uix-icon-sm);height:var(--uix-icon-sm)}.uix-emoji-picker{display:flex;flex-wrap:wrap;gap:var(--uix-space-1);width:196px}.uix-emoji-picker__btn{font-size:18px;line-height:1;padding:var(--uix-space-2);border:0;background:transparent;border-radius:var(--uix-radius-sm);cursor:pointer}.uix-emoji-picker__btn:hover{background:var(--uix-bg-hover)}}@layer uix.components{.uix-media{display:flex;gap:var(--uix-space-3);align-items:center}.uix-media__thumb{width:64px;height:64px;flex:none;border-radius:var(--uix-radius-md);overflow:hidden;background:var(--uix-bg-subtle);border:1px solid var(--uix-border);display:grid;place-items:center}.uix-media__thumb img{width:100%;height:100%;object-fit:cover;display:block}.uix-media__thumb svg{width:28px;height:28px;color:var(--uix-text-muted)}.uix-media__name{font-weight:600}.uix-media__meta{font-size:var(--uix-text-meta);color:var(--uix-text-muted)}}@layer uix.components{.uix-lightbox{margin:auto;border:0;background:transparent;padding:0;max-width:92vw;max-height:92vh;box-shadow:var(--uix-shadow-overlay);overflow:visible}.uix-lightbox img{display:block;width:min(720px,92vw);height:auto;max-height:92vh;border-radius:var(--uix-radius-md)}.uix-lightbox::backdrop{background:var(--uix-scrim-strong)}}@layer uix.components{.uix-prose{max-width:66ch;color:var(--uix-text)}.uix-prose>*+*{margin-top:var(--uix-space-3)}.uix-prose h3{font-size:var(--uix-text-h2);font-weight:600}.uix-prose h4{font-size:var(--uix-text-h3);font-weight:600;margin-top:var(--uix-space-5)}.uix-prose p{line-height:var(--uix-leading-body);color:var(--uix-text-hushed)}.uix-prose a{color:var(--uix-link)}.uix-prose ul,.uix-prose ol{padding-left:var(--uix-space-5)}.uix-prose li+li{margin-top:var(--uix-space-1)}.uix-prose code{font-family:var(--uix-font-mono);font-size:.9em;background:var(--uix-bg-subtle);padding:1px var(--uix-space-2);border-radius:var(--uix-radius-xs)}.uix-prose blockquote{border-left:3px solid var(--uix-border-strong);padding-left:var(--uix-space-3);color:var(--uix-text-muted)}.uix-note{display:flex;gap:var(--uix-space-3);padding:var(--uix-space-3) var(--uix-space-4);border-radius:var(--uix-radius-md);border:1px solid var(--uix-border);background:var(--uix-surface)}.uix-note__icon{flex:none}.uix-note__icon svg{width:var(--uix-icon-md);height:var(--uix-icon-md)}.uix-note__body{font-size:var(--uix-text-body);color:var(--uix-text)}.uix-note__body>*+*{margin-top:var(--uix-space-2)}.uix-note--info{background:var(--uix-info-bg);border-color:color-mix(in srgb,var(--uix-info) 30%,transparent)}.uix-note--info .uix-note__icon{color:var(--uix-info)}.uix-note--success{background:var(--uix-success-bg);border-color:color-mix(in srgb,var(--uix-success) 30%,transparent)}.uix-note--success .uix-note__icon{color:var(--uix-success)}.uix-note--warning{background:var(--uix-warning-bg);border-color:color-mix(in srgb,var(--uix-warning) 30%,transparent)}.uix-note--warning .uix-note__icon{color:var(--uix-warning)}.uix-note--danger{background:var(--uix-danger-bg);border-color:color-mix(in srgb,var(--uix-danger) 30%,transparent)}.uix-note--danger .uix-note__icon{color:var(--uix-danger)}}@layer uix.components{.uix-kanban{display:flex;gap:var(--uix-space-4);overflow-x:auto;padding-bottom:var(--uix-space-2)}.uix-kanban__col{flex:0 0 260px;background:var(--uix-bg-subtle);border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);display:flex;flex-direction:column;max-height:460px}.uix-kanban__head{display:flex;align-items:center;gap:var(--uix-space-2);padding:var(--uix-space-3) var(--uix-space-4);font-weight:600;font-size:var(--uix-text-meta)}.uix-kanban__count{margin-left:auto;color:var(--uix-text-muted);font-weight:500}.uix-kanban__body{padding:0 var(--uix-space-3) var(--uix-space-3);display:flex;flex-direction:column;gap:var(--uix-space-2);overflow-y:auto}.uix-kanban__card{background:var(--uix-surface);border:1px solid var(--uix-border);border-radius:var(--uix-radius-md);padding:var(--uix-space-3);box-shadow:var(--uix-shadow-sm);cursor:grab;transition:box-shadow var(--uix-dur-fast) var(--uix-ease-out),transform var(--uix-dur-fast) var(--uix-ease-out)}.uix-kanban__card:hover{box-shadow:var(--uix-shadow-popover)}@media(hover:hover)and (pointer:fine){.uix-kanban__card:hover{transform:translateY(calc(-1 * var(--uix-lift)))}}.uix-kanban__card:active{cursor:grabbing}.uix-kanban__card-title{font-weight:500;font-size:var(--uix-text-body);margin-bottom:var(--uix-space-2)}.uix-kanban__card-meta{display:flex;align-items:center;gap:var(--uix-space-2)}}@layer uix.components{.uix-inbox{display:grid;grid-template-columns:300px 1fr;border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);overflow:hidden;height:420px}.uix-inbox__list{border-right:1px solid var(--uix-border);overflow-y:auto;background:var(--uix-surface)}.uix-inbox__item{position:relative;display:flex;flex-direction:column;gap:var(--uix-space-1);padding:var(--uix-space-3) var(--uix-space-4);border-bottom:1px solid var(--uix-border);cursor:pointer}.uix-inbox__item:hover{background:var(--uix-bg-hover)}.uix-inbox__item[aria-selected=true]{background:linear-gradient(to right,var(--uix-accent) 3px,var(--uix-brand-muted) 3px)}.uix-inbox__item[data-unread] .uix-inbox__subject{font-weight:600}.uix-inbox__subject{font-size:var(--uix-text-body)}.uix-inbox__preview{font-size:var(--uix-text-meta);color:var(--uix-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.uix-inbox__detail{overflow-y:auto;padding:var(--uix-space-5);background:var(--uix-bg-app)}@media(max-width:700px){.uix-inbox{grid-template-columns:1fr}.uix-inbox__detail{display:none}}}@layer uix.components{.uix-notifs{background:var(--uix-surface-2);border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);overflow:hidden}.uix-notifs__head{display:flex;align-items:center;padding:var(--uix-space-3) var(--uix-space-4);border-bottom:1px solid var(--uix-border);font-weight:600}.uix-notif{display:grid;grid-template-columns:auto 1fr;gap:var(--uix-space-3);padding:var(--uix-space-3) var(--uix-space-4);border-bottom:1px solid var(--uix-border)}.uix-notif:last-child{border-bottom:0}.uix-notif[data-unread]{background:var(--uix-brand-muted)}.uix-notif__dot{width:8px;height:8px;border-radius:50%;background:var(--uix-accent);margin-top:var(--uix-space-2)}.uix-notif[data-unread] .uix-notif__dot{background:var(--uix-accent)}.uix-notif:not([data-unread]) .uix-notif__dot{background:transparent}.uix-notif__meta{font-size:var(--uix-text-meta);color:var(--uix-text-muted)}.uix-notif[data-unread] .uix-notif__meta{color:var(--uix-text-hushed)}}@layer uix.components{.uix-label{display:inline-flex;align-items:center;gap:var(--uix-space-2);padding:1px var(--uix-space-2);border-radius:var(--uix-radius-sm);font-size:var(--uix-text-meta);font-weight:500;background:color-mix(in srgb,var(--label-color, var(--uix-accent)) 16%,transparent);color:color-mix(in srgb,var(--label-color, var(--uix-accent)) 55%,var(--uix-text))}.uix-label__dot{width:7px;height:7px;border-radius:50%;background:var(--label-color, var(--uix-accent))}}@layer uix.components{.uix-attachments{display:flex;flex-direction:column;gap:var(--uix-space-2)}.uix-attachment{display:flex;align-items:center;gap:var(--uix-space-3);padding:var(--uix-space-2) var(--uix-space-3);border:1px solid var(--uix-border);border-radius:var(--uix-radius-md);background:var(--uix-surface)}.uix-attachment__icon{width:32px;height:32px;flex:none;border-radius:var(--uix-radius-sm);background:var(--uix-bg-subtle);display:grid;place-items:center;color:var(--uix-text-muted)}.uix-attachment__icon svg{width:var(--uix-icon-md);height:var(--uix-icon-md)}.uix-attachment__name{font-size:var(--uix-text-body)}.uix-attachment__size{font-size:var(--uix-text-meta);color:var(--uix-text-muted)}.uix-attachment__actions{margin-left:auto}}@layer uix.components{.uix-pipeline{display:flex;gap:var(--uix-space-1)}.uix-pipeline__stage{flex:1;text-align:center;padding:var(--uix-space-2) var(--uix-space-2);font-size:var(--uix-text-meta);color:var(--uix-text-muted);background:var(--uix-bg-subtle)}.uix-pipeline__stage:first-child{border-radius:var(--uix-radius-pill) 0 0 var(--uix-radius-pill)}.uix-pipeline__stage:last-child{border-radius:0 var(--uix-radius-pill) var(--uix-radius-pill) 0}.uix-pipeline__stage[data-state=done]{background:var(--uix-accent);color:var(--uix-accent-fg)}.uix-pipeline__stage[data-state=active]{background:var(--uix-brand-muted);color:var(--uix-link);font-weight:600}}@layer uix.components{.uix-node{position:relative;display:inline-grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--uix-space-3);min-width:132px;width:max-content;max-width:220px;padding:var(--uix-space-3) var(--uix-space-3);background:var(--uix-surface);border:1px solid var(--tone-border, var(--uix-border-strong));border-radius:var(--uix-radius-md);box-shadow:var(--uix-shadow-sm);color:var(--uix-text);font-size:var(--uix-text-body);text-align:left}.uix-node__icon{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:var(--uix-radius-sm);background:var(--tone-bg, var(--uix-bg-subtle));color:var(--tone-fg, var(--uix-text-muted))}.uix-node__icon svg{width:var(--uix-icon-sm);height:var(--uix-icon-sm)}.uix-node__body{min-width:0}.uix-node__title{font-weight:500;line-height:1.25}.uix-node__meta{font-size:var(--uix-text-meta);color:var(--uix-text-muted)}.uix-node__status{display:inline-flex;align-items:center;gap:var(--uix-space-2);margin-top:var(--uix-space-1);font-size:var(--uix-text-eyebrow);letter-spacing:var(--uix-tracking-eyebrow);text-transform:uppercase;color:var(--tone-fg, var(--uix-text-muted))}.uix-node__status:before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--tone-dot, var(--uix-text-muted))}.uix-node__handle{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:var(--uix-surface);border:1.5px solid var(--uix-border-strong);transform:translateY(-50%)}.uix-node__handle--in{left:-5px}.uix-node__handle--out{right:-5px}.uix-node--pending{--tone-bg: var(--uix-bg-subtle);--tone-fg: var(--uix-text-muted);--tone-dot: var(--uix-text-muted);--tone-border: var(--uix-border)}.uix-node--active{--tone-bg: var(--uix-brand-muted);--tone-fg: var(--uix-link);--tone-dot: var(--uix-accent);--tone-border: var(--uix-accent)}.uix-node--running{--tone-bg: var(--uix-info-bg);--tone-fg: var(--uix-info-text);--tone-dot: var(--uix-info);--tone-border: var(--uix-info)}.uix-node--done{--tone-bg: var(--uix-success-bg);--tone-fg: var(--uix-success);--tone-dot: var(--uix-success);--tone-border: var(--uix-success)}.uix-node--error{--tone-bg: var(--uix-danger-bg);--tone-fg: var(--uix-danger-text);--tone-dot: var(--uix-danger);--tone-border: var(--uix-danger)}.uix-node--active,.uix-node--running{box-shadow:var(--uix-shadow-sm),0 0 0 3px var(--tone-bg)}.uix-node--running .uix-node__icon svg{animation:uix-flow-spin 1s linear infinite}.uix-node--decision{min-width:0;width:112px;height:112px;padding:0;overflow:visible;display:grid;grid-template-columns:1fr;place-items:center;background:transparent;border:0;box-shadow:none}.uix-node--decision:before{content:"";position:absolute;left:50%;top:50%;width:78px;height:78px;transform:translate(-50%,-50%) rotate(45deg);background:var(--tone-bg, var(--uix-surface));border:1px solid var(--tone-border, var(--uix-border-strong));border-radius:var(--uix-radius-sm);box-shadow:var(--uix-shadow-sm)}.uix-node--decision .uix-node__title{position:relative;z-index:var(--uix-z-raised);max-width:88px;text-align:center;font-size:var(--uix-text-meta);color:var(--tone-fg, var(--uix-text))}.uix-node--start,.uix-node--end{grid-template-columns:1fr;min-width:0;justify-items:center;padding:var(--uix-space-2) var(--uix-space-5);border-radius:var(--uix-radius-pill);background:var(--uix-bg-active);color:var(--uix-text-hushed);font-weight:500}.uix-flow{position:relative;width:100%;color:var(--uix-border-strong)}.uix-flow__edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.uix-flow__edge{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}.uix-flow__edge--branch-yes{stroke:var(--uix-success)}.uix-flow__edge--branch-no{stroke:var(--uix-danger)}.uix-flow__edge--loop{stroke:var(--uix-accent);stroke-dasharray:5 4}.uix-flow__arrow{fill:currentColor}.uix-flow__edge-label{fill:var(--uix-text-muted);font-family:var(--uix-font-sans);font-size:var(--uix-text-eyebrow)}.uix-flow__edge-label--loop{fill:var(--uix-accent)}@media(hover:hover)and (pointer:fine){.uix-flow:hover .uix-flow__edge,.uix-flow:focus-within .uix-flow__edge{stroke-dasharray:5 4;animation:uix-flow-march var(--uix-dur-slow) linear infinite}}.uix-flow--linear .uix-flow__row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--uix-space-1)}.uix-flow__connector{position:relative;flex:1 1 30px;min-width:30px;height:0;border-top:1.5px solid var(--uix-border-strong);margin:0 var(--uix-space-1)}.uix-flow__connector:after{content:"";position:absolute;right:-1px;top:50%;width:6px;height:6px;border-top:1.5px solid var(--uix-border-strong);border-right:1.5px solid var(--uix-border-strong);transform:translateY(-50%) rotate(45deg)}.uix-flow__connector[data-done]{border-color:var(--uix-success)}.uix-flow__connector[data-done]:after{border-color:var(--uix-success)}.uix-flow--branch,.uix-flow--loop{aspect-ratio:5 / 2}.uix-flow--mindmap{aspect-ratio:2 / 1}.uix-flow--branch .uix-node,.uix-flow--loop .uix-node,.uix-flow--mindmap .uix-node,.uix-flow--canvas .uix-node{position:absolute;transform:translate(-50%,-50%)}.uix-flow--mindmap .uix-node{min-width:0}.uix-flow--mindmap .uix-node--hub{min-width:120px}.uix-flow--canvas{display:grid;grid-template-columns:188px 1fr;border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);overflow:hidden;background:var(--uix-surface);width:100%}.uix-flow__palette{display:flex;flex-direction:column;gap:var(--uix-space-2);padding:var(--uix-space-4);border-right:1px solid var(--uix-border);background:var(--uix-surface)}.uix-flow__palette-title{font-size:var(--uix-text-eyebrow);letter-spacing:var(--uix-tracking-eyebrow);text-transform:uppercase;color:var(--uix-text-muted);margin-bottom:var(--uix-space-1)}.uix-flow__chip{display:flex;align-items:center;gap:var(--uix-space-2);padding:var(--uix-space-2) var(--uix-space-3);border:1px solid var(--uix-border);border-radius:var(--uix-radius-md);background:var(--uix-surface);color:var(--uix-text);font-size:var(--uix-text-meta);cursor:grab;box-shadow:var(--uix-shadow-sm);transition:box-shadow var(--uix-dur-fast) var(--uix-ease-out),transform var(--uix-dur-fast) var(--uix-ease-out)}.uix-flow__chip svg{width:var(--uix-icon-sm);height:var(--uix-icon-sm);color:var(--uix-text-muted);flex:none}.uix-flow__chip:active{cursor:grabbing}@media(hover:hover)and (pointer:fine){.uix-flow__chip:hover{box-shadow:var(--uix-shadow-popover);transform:translateY(calc(-1 * var(--uix-lift)))}}.uix-flow__canvas{position:relative;aspect-ratio:16 / 9;min-height:280px;background-color:var(--uix-bg-subtle);background-image:radial-gradient(var(--uix-border-strong) 1px,transparent 1px);background-size:22px 22px;background-position:-1px -1px}.uix-flow--canvas .uix-node{cursor:grab}.uix-flow--canvas .uix-node:active{cursor:grabbing}.uix-flow .uix-node[data-selected]{border-color:var(--uix-ring);box-shadow:0 0 0 2px var(--uix-surface),0 0 0 4px var(--uix-ring)}.uix-flow__chip:focus-visible,.uix-flow--canvas .uix-node:focus-visible{outline:none;border-color:var(--uix-ring);box-shadow:0 0 0 2px var(--uix-surface),0 0 0 4px var(--uix-ring)}@keyframes uix-flow-spin{to{transform:rotate(360deg)}}@keyframes uix-flow-march{to{stroke-dashoffset:-18}}@media(prefers-reduced-motion:reduce){.uix-node--running .uix-node__icon svg,.uix-flow:hover .uix-flow__edge,.uix-flow:focus-within .uix-flow__edge{animation:none}}}@layer uix.components{.uix-audit{display:flex;flex-direction:column}.uix-audit__row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--uix-space-3);align-items:center;padding:var(--uix-space-3) 0;border-bottom:1px solid var(--uix-border);font-size:var(--uix-text-meta)}.uix-audit__row:last-child{border-bottom:0}.uix-audit__actor{font-weight:500;color:var(--uix-text)}.uix-audit__detail{color:var(--uix-text-hushed)}.uix-audit__detail ins{background:var(--uix-success-bg);color:var(--uix-success);text-decoration:none;padding:0 var(--uix-space-1);border-radius:var(--uix-radius-xs)}.uix-audit__detail del{background:var(--uix-danger-bg);color:var(--uix-danger-text);text-decoration:line-through;padding:0 var(--uix-space-1);border-radius:var(--uix-radius-xs)}.uix-audit__time{color:var(--uix-text-muted);white-space:nowrap}}@layer uix.components{.uix-contact{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--uix-space-1);padding:var(--uix-space-5)}.uix-contact__name{font-size:var(--uix-text-h3);font-weight:600;margin-top:var(--uix-space-2)}.uix-contact__role{font-size:var(--uix-text-meta);color:var(--uix-text-muted)}.uix-contact__actions{display:flex;gap:var(--uix-space-2);margin-top:var(--uix-space-3);align-self:stretch}.uix-contact__actions>.uix-btn{flex:1}.uix-contact__stats{display:flex;gap:var(--uix-space-5);margin-top:var(--uix-space-4)}.uix-contact__stat{text-align:center}.uix-contact__stat b{display:block;font-size:var(--uix-text-h3)}.uix-contact__stat span{font-size:var(--uix-text-meta);color:var(--uix-text-muted)}}@layer uix.components{.uix-sla{display:inline-flex;align-items:center;gap:var(--uix-space-2);font-size:var(--uix-text-meta);font-weight:500;color:var(--uix-text-hushed)}.uix-sla svg{width:14px;height:14px}.uix-sla[data-state=ok]{color:var(--uix-success)}.uix-sla[data-state=at-risk]{color:var(--uix-warning-text)}.uix-sla[data-state=breach]{color:var(--uix-danger-text)}}@layer uix.components{.uix-code{font-family:var(--uix-font-mono);font-size:.9em;background:var(--uix-bg-subtle);border:1px solid var(--uix-border);border-radius:var(--uix-radius-xs);padding:.1em .4em;color:var(--uix-text)}.uix-pre{font-family:var(--uix-font-mono);font-size:var(--uix-text-meta);line-height:1.5;background:var(--uix-bg-subtle);border:1px solid var(--uix-border);border-radius:var(--uix-radius-md);padding:var(--uix-space-4) var(--uix-space-4);overflow-x:auto;color:var(--uix-text)}.uix-blockquote{border-left:3px solid var(--uix-accent);padding:var(--uix-space-1) 0 var(--uix-space-1) var(--uix-space-4);color:var(--uix-text-hushed);font-style:italic}.uix-divider{height:1px;background:var(--uix-border);border:0;margin:var(--uix-space-4) 0}.uix-divider--label{display:flex;align-items:center;gap:var(--uix-space-3);color:var(--uix-text-muted);font-size:var(--uix-text-meta);background:transparent;height:auto}.uix-divider--label:before,.uix-divider--label:after{content:"";flex:1;height:1px;background:var(--uix-border)}.uix-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--uix-text-muted)}.uix-dot--success{background:var(--uix-success)}.uix-dot--warning{background:var(--uix-warning)}.uix-dot--danger{background:var(--uix-danger)}.uix-dot--info{background:var(--uix-info)}}@layer uix.components{.uix-heartbeat{position:relative;display:inline-grid;place-items:center;width:8px;height:8px;flex:none}.uix-heartbeat__dot{width:8px;height:8px;border-radius:50%;background:var(--uix-success);z-index:var(--uix-z-raised)}.uix-heartbeat__ping{position:absolute;inset:0;border-radius:50%;background:var(--uix-success);animation:uix-ping 1.6s var(--uix-ease-out) infinite}@keyframes uix-ping{0%{transform:scale(1);opacity:.55}to{transform:scale(2.8);opacity:0}}.uix-heartbeat--warning .uix-heartbeat__dot,.uix-heartbeat--warning .uix-heartbeat__ping{background:var(--uix-warning)}.uix-heartbeat--danger .uix-heartbeat__dot,.uix-heartbeat--danger .uix-heartbeat__ping{background:var(--uix-danger)}.uix-heartbeat--idle .uix-heartbeat__dot{background:var(--uix-text-muted)}.uix-heartbeat--idle .uix-heartbeat__ping{display:none}.uix-live{display:inline-flex;align-items:center;gap:var(--uix-space-2);font-size:var(--uix-text-meta);font-weight:500;color:var(--uix-text-hushed)}}@layer uix.components{.uix-page-intro{margin-top:var(--uix-space-6);display:grid;grid-template-columns:minmax(300px,.8fr) minmax(460px,1.2fr);align-items:end;gap:var(--uix-space-7)}.uix-page-intro .uix-page-lede{margin-top:var(--uix-space-2)}.uix-page-kicker{margin:0 0 var(--uix-space-2);color:var(--uix-text-hushed);font-size:var(--uix-text-meta)}.uix-page-title{max-width:760px;margin:0;font-family:var(--uix-font-heading);font-size:clamp(30px,4vw,48px);font-weight:400;letter-spacing:-.035em;line-height:1.06}.uix-page-lede{max-width:680px;margin:var(--uix-space-3) 0 0;color:var(--uix-text-hushed);font-size:var(--uix-text-h3)}.uix-intro-search__label{margin:0 0 var(--uix-space-2);color:var(--uix-text-hushed);font-size:var(--uix-text-meta)}.uix-searchbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--uix-space-2)}.uix-searchbar .uix-input{min-height:44px;padding-left:42px}.uix-searchbar__wrap{position:relative}.uix-searchbar__wrap>svg{position:absolute;top:50%;left:14px;z-index:var(--uix-z-raised);width:17px;height:17px;color:var(--uix-text-hushed);transform:translateY(-50%);pointer-events:none}.uix-shortcut-grid{grid-column:1 / -1;margin-top:var(--uix-space-4);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--uix-space-2)}.uix-shortcut-grid .uix-btn{min-height:42px;justify-content:flex-start}.uix-notice{min-height:48px;padding:var(--uix-space-2) var(--uix-space-4);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--uix-space-3);border-left:2px solid var(--uix-text);background:var(--uix-bg-subtle)}.uix-notice__copy{margin:0;font-size:var(--uix-text-body)}.uix-notice__copy strong{font-weight:600}.uix-notice__content{min-width:0}.uix-notice__meta{margin:var(--uix-space-1) 0 0;color:var(--uix-text-hushed);font-size:var(--uix-text-eyebrow)}.uix-notice__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--uix-space-2)}.uix-notice__position{margin-right:var(--uix-space-1);color:var(--uix-text-hushed);font-size:var(--uix-text-eyebrow);white-space:nowrap}.uix-notice__arrow--previous svg{transform:rotate(180deg)}.uix-featured{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.7fr);align-items:stretch;overflow:hidden;border:1px solid var(--uix-border);border-radius:var(--uix-radius-md);background:var(--uix-surface)}.uix-page-intro+.uix-featured{margin-top:var(--uix-space-6)}.uix-featured__stage{min-width:0;min-height:302px;display:grid;grid-template-columns:minmax(260px,.95fr) minmax(300px,1.05fr)}.uix-featured__visual{min-height:302px;padding:var(--uix-space-6) var(--uix-space-7);display:flex;align-items:flex-end;position:relative;overflow:hidden;background:linear-gradient(135deg,transparent 20%,color-mix(in srgb,var(--uix-text) 8%,transparent)),var(--uix-bg-subtle)}.uix-featured__visual:before,.uix-featured__visual:after{content:"";position:absolute;border:1px solid var(--uix-border-strong);border-radius:50%}.uix-featured__visual:before{width:240px;height:240px;top:-78px;right:-42px}.uix-featured__visual:after{width:144px;height:144px;top:72px;right:56px}.uix-featured__content{padding:var(--uix-space-7);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.uix-featured__eyebrow{margin:0 0 var(--uix-space-4);color:var(--uix-text-hushed);font-size:var(--uix-text-eyebrow);letter-spacing:var(--uix-tracking-eyebrow);text-transform:uppercase}.uix-featured__title{margin:0;font-family:var(--uix-font-heading);font-size:clamp(26px,3vw,38px);font-weight:400;letter-spacing:-.03em;line-height:1.08}.uix-featured__description{margin:var(--uix-space-3) 0 var(--uix-space-5);color:var(--uix-text-hushed)}.uix-featured__meta{margin:0 0 var(--uix-space-5);color:var(--uix-text-hushed);font-size:var(--uix-text-meta)}.uix-featured__now{min-width:22px;height:22px;display:inline-grid;place-items:center;margin-right:var(--uix-space-2);border-radius:var(--uix-radius-pill);background:var(--uix-text);color:var(--uix-bg-app);font-variant-numeric:tabular-nums;letter-spacing:0}.uix-story-signal{position:absolute;top:26px;left:28px;z-index:var(--uix-z-raised)}.uix-story-signal__value{display:block;font-family:var(--uix-font-heading);font-size:48px;font-weight:400;letter-spacing:-.04em;line-height:1}.uix-story-signal__label{display:block;margin-top:var(--uix-space-2);color:var(--uix-text-hushed);font-size:var(--uix-text-meta)}.uix-story-diagram{width:min(100%,500px);position:relative;z-index:var(--uix-z-raised);display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:var(--uix-space-3)}.uix-story-diagram__bar{min-height:52px;border:1px solid var(--uix-border-strong);border-radius:var(--uix-radius-sm);background:color-mix(in srgb,var(--uix-surface) 84%,transparent)}.uix-story-diagram__bar:nth-child(2){min-height:104px}.uix-story-diagram__bar:nth-child(3){min-height:126px;background:var(--uix-text)}.uix-rundown{min-width:0;padding:var(--uix-space-4);display:grid;grid-template-rows:auto minmax(0,1fr);gap:var(--uix-space-3);border-left:1px solid var(--uix-border)}.uix-rundown__head{padding:var(--uix-space-1) var(--uix-space-1) var(--uix-space-3);display:flex;align-items:flex-start;justify-content:space-between;gap:var(--uix-space-3);border-bottom:1px solid var(--uix-border)}.uix-rundown__eyebrow{margin:0;color:var(--uix-text-hushed);font-size:var(--uix-text-eyebrow);letter-spacing:.05em;text-transform:uppercase}.uix-rundown__title{margin:var(--uix-space-1) 0 0;font-family:var(--uix-font-heading);font-size:18px;font-weight:400}.uix-rundown__items{min-width:0;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:var(--uix-space-2)}.uix-rundown__item{position:relative;min-width:0;min-height:68px;padding:var(--uix-space-3);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--uix-space-3);border:1px solid transparent;border-radius:var(--uix-radius-sm);background:transparent;color:var(--uix-text);cursor:pointer;font:inherit;text-align:left}.uix-rundown__item:hover{background:var(--uix-bg-hover)}.uix-rundown__item[data-selected=true]{border-color:var(--uix-border);background:var(--uix-bg-active)}.uix-rundown__item[data-selected=true]:before{content:"";position:absolute;top:50%;left:-23px;width:12px;height:12px;transform:translateY(-50%) rotate(45deg);background:var(--uix-surface);border-left:1px solid var(--uix-border-strong);border-bottom:1px solid var(--uix-border-strong)}.uix-rundown__number{color:var(--uix-text-hushed);font-size:var(--uix-text-eyebrow);font-variant-numeric:tabular-nums}.uix-rundown__item[data-selected=true] .uix-rundown__number{min-width:22px;height:22px;display:inline-grid;place-items:center;border-radius:var(--uix-radius-pill);background:var(--uix-text);color:var(--uix-bg-app)}.uix-rundown__topic,.uix-rundown__item-title{display:block}.uix-rundown__topic{color:var(--uix-text-hushed);font-size:var(--uix-text-eyebrow)}.uix-rundown__item-title{margin-top:var(--uix-space-1);font-weight:600;line-height:1.2}.uix-section-head{min-height:36px;margin-bottom:var(--uix-space-3);display:flex;align-items:center;justify-content:space-between;gap:var(--uix-space-4)}.uix-section-title{margin:0;font-family:var(--uix-font-heading);font-size:var(--uix-text-h2);font-weight:400;letter-spacing:var(--uix-tracking-tight)}.uix-section-link{color:var(--uix-text-hushed);font-size:var(--uix-text-meta);text-decoration:none}.uix-section-link:is(:hover,:focus-visible){color:var(--uix-text);text-decoration:underline}.uix-content-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr);gap:var(--uix-space-7);align-items:start}.uix-content-grid--balanced{grid-template-columns:repeat(2,minmax(0,1fr))}.uix-content-grid>*{min-width:0}.uix-rail{display:grid;gap:var(--uix-space-4)}.uix-rail-card{padding:var(--uix-space-5)}.uix-rail-card__title{margin:0;font-family:var(--uix-font-heading);font-size:18px;font-weight:400}.uix-rail-card__meta{margin:var(--uix-space-1) 0 0;color:var(--uix-text-hushed);font-size:var(--uix-text-meta)}.uix-news-lead{padding:0 0 var(--uix-space-5);border-bottom:1px solid var(--uix-border)}.uix-news-lead__meta,.uix-list-meta{color:var(--uix-text-hushed);font-size:var(--uix-text-meta)}.uix-news-lead__title{margin:var(--uix-space-2) 0 var(--uix-space-1);font-family:var(--uix-font-heading);font-size:var(--uix-text-h2);font-weight:400;letter-spacing:var(--uix-tracking-tight)}.uix-news-lead__summary{margin:0;color:var(--uix-text-hushed)}.uix-content-list{margin:0;padding:0;list-style:none}.uix-content-list__item{min-height:68px;padding:var(--uix-space-3) 0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--uix-space-4);border-bottom:1px solid var(--uix-border)}.uix-content-list__item:last-child{border-bottom:0}.uix-content-list__title{margin:0;font-weight:600}.uix-content-list__meta{margin:var(--uix-space-1) 0 0;color:var(--uix-text-hushed);font-size:var(--uix-text-meta)}.uix-resource-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--uix-space-2)}.uix-resource-grid .uix-btn{min-height:44px;justify-content:flex-start}.uix-stat-line{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--uix-border)}.uix-stat-line__item{padding:var(--uix-space-4) var(--uix-space-2) var(--uix-space-1) 0}.uix-stat-line__value{display:block;font-size:20px;font-variant-numeric:tabular-nums}.uix-stat-line__label{color:var(--uix-text-hushed);font-size:var(--uix-text-eyebrow)}.uix-event-row{min-height:64px;padding-block:var(--uix-space-3);display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:var(--uix-space-3);border-bottom:1px solid var(--uix-border)}.uix-event-row:last-child{border-bottom:0}.uix-event-date{text-align:center}.uix-event-date__month{display:block;color:var(--uix-text-hushed);font-size:var(--uix-text-eyebrow);text-transform:uppercase}.uix-event-date__day{display:block;font-size:18px;font-variant-numeric:tabular-nums}.uix-event-row__title{margin:0;font-weight:600}.uix-event-row__meta{margin:var(--uix-space-1) 0 0;color:var(--uix-text-hushed);font-size:var(--uix-text-meta)}.uix-status-row{min-height:48px;display:flex;align-items:center;gap:var(--uix-space-3);border-bottom:1px solid var(--uix-border)}.uix-status-row:last-child{border-bottom:0}.uix-status-row__name{flex:1}@media(max-width:920px){.uix-page-intro,.uix-content-grid,.uix-content-grid--balanced,.uix-featured{grid-template-columns:1fr}.uix-rundown{border-left:0;border-top:1px solid var(--uix-border)}.uix-rundown__items{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr}.uix-rundown__item[data-selected=true]:before{top:-23px;left:22px;transform:rotate(45deg);border-bottom:0;border-top:1px solid var(--uix-border-strong)}.uix-shortcut-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.uix-featured__stage{grid-template-columns:1fr}.uix-featured__visual{min-height:190px}.uix-featured__content{padding:var(--uix-space-6)}.uix-rundown__items{grid-template-columns:1fr;grid-template-rows:repeat(3,auto)}.uix-rundown__item[data-selected=true]:before{display:none}.uix-notice{grid-template-columns:auto minmax(0,1fr)}.uix-notice>.uix-btn{grid-column:2;justify-self:start}.uix-notice__actions{grid-column:1 / -1;width:100%;justify-content:flex-start;flex-wrap:wrap}.uix-notice__position{flex:1}.uix-searchbar{grid-template-columns:1fr}.uix-searchbar .uix-btn{min-height:44px}.uix-page-intro{margin-top:var(--uix-space-5);gap:var(--uix-space-5)}.uix-shortcut-grid{grid-template-columns:1fr 1fr}.uix-shortcut-grid .uix-btn{min-height:48px}.uix-story-signal{top:20px;left:20px}.uix-story-signal__value{font-size:var(--uix-text-display)}.uix-resource-grid,.uix-stat-line{grid-template-columns:1fr}.uix-stat-line__item{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--uix-border)}}}@layer uix.components{.uix-link--quiet,:is(.uix-featured__title,.uix-rail-card__title,.uix-news-lead__title,.uix-content-list__title,.uix-rundown__item-title,.uix-event-row__title,.uix-status-row__name,.uix-card__title,.uix-list__title,.uix-inbox__subject,.uix-kanban__card-title,.uix-media__name,.uix-attachment__name,.uix-contact__name,.uix-user-chip__name,.uix-audit__actor) a:not(.uix-btn),:is(.uix-table td,.uix-dl dd) a:not([class]),a:is(.uix-card,.uix-stat,.uix-list__item,.uix-inbox__item,.uix-kanban__card,.uix-notif,.uix-media,.uix-attachment,.uix-contact,.uix-cmdk__item,.uix-content-list__item,.uix-event-row,.uix-status-row){color:inherit;text-decoration:none}.uix-link--quiet:is(:hover,:focus-visible),:is(.uix-featured__title,.uix-rail-card__title,.uix-news-lead__title,.uix-content-list__title,.uix-rundown__item-title,.uix-event-row__title,.uix-status-row__name,.uix-card__title,.uix-list__title,.uix-inbox__subject,.uix-kanban__card-title,.uix-media__name,.uix-attachment__name,.uix-contact__name,.uix-user-chip__name,.uix-audit__actor) a:not(.uix-btn):is(:hover,:focus-visible),:is(.uix-table td,.uix-dl dd) a:not([class]):is(:hover,:focus-visible){text-decoration:underline}a:is(.uix-card,.uix-stat,.uix-list__item,.uix-inbox__item,.uix-kanban__card,.uix-notif,.uix-media,.uix-attachment,.uix-contact,.uix-cmdk__item,.uix-content-list__item,.uix-event-row,.uix-status-row):is(:hover,:focus-visible){background:var(--uix-bg-hover)}a:is(.uix-card,.uix-stat,.uix-kanban__card){display:block}}