@tensor_1/tokens 2.11.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 (75) hide show
  1. package/README.md +2 -0
  2. package/build/css/components.css +1 -1847
  3. package/build/css/styles.css +1 -2188
  4. package/package.json +12 -2
  5. package/styles/components/alert.css +16 -0
  6. package/styles/components/app-shell.css +37 -0
  7. package/styles/components/attachment.css +10 -0
  8. package/styles/components/audit-log.css +11 -0
  9. package/styles/components/avatar.css +25 -0
  10. package/styles/components/breadcrumbs.css +10 -0
  11. package/styles/components/button.css +49 -0
  12. package/styles/components/calendar.css +13 -0
  13. package/styles/components/card.css +9 -0
  14. package/styles/components/chart.css +9 -0
  15. package/styles/components/checkbox.css +20 -0
  16. package/styles/components/combobox.css +16 -0
  17. package/styles/components/command-palette.css +14 -0
  18. package/styles/components/comments.css +17 -0
  19. package/styles/components/contact-card.css +12 -0
  20. package/styles/components/description-list.css +6 -0
  21. package/styles/components/detail-layout.css +7 -0
  22. package/styles/components/drawer.css +24 -0
  23. package/styles/components/editorial-home.css +185 -0
  24. package/styles/components/file-upload.css +14 -0
  25. package/styles/components/flow.css +196 -0
  26. package/styles/components/form.css +14 -0
  27. package/styles/components/heartbeat.css +12 -0
  28. package/styles/components/inbox.css +13 -0
  29. package/styles/components/input.css +39 -0
  30. package/styles/components/kanban.css +14 -0
  31. package/styles/components/kbd.css +8 -0
  32. package/styles/components/labels.css +13 -0
  33. package/styles/components/lightbox.css +13 -0
  34. package/styles/components/link.css +98 -0
  35. package/styles/components/list.css +10 -0
  36. package/styles/components/media.css +9 -0
  37. package/styles/components/menu.css +15 -0
  38. package/styles/components/meter.css +9 -0
  39. package/styles/components/modal.css +31 -0
  40. package/styles/components/notification-center.css +14 -0
  41. package/styles/components/page-header.css +9 -0
  42. package/styles/components/pagination.css +14 -0
  43. package/styles/components/peek.css +46 -0
  44. package/styles/components/pipeline.css +9 -0
  45. package/styles/components/popover.css +11 -0
  46. package/styles/components/progress.css +12 -0
  47. package/styles/components/prose.css +27 -0
  48. package/styles/components/radio.css +20 -0
  49. package/styles/components/reactions.css +22 -0
  50. package/styles/components/segmented.css +12 -0
  51. package/styles/components/select.css +23 -0
  52. package/styles/components/sidebar.css +102 -0
  53. package/styles/components/sla.css +8 -0
  54. package/styles/components/slider.css +16 -0
  55. package/styles/components/spinner.css +10 -0
  56. package/styles/components/stat-tile.css +11 -0
  57. package/styles/components/states.css +13 -0
  58. package/styles/components/status-pill.css +37 -0
  59. package/styles/components/stepper.css +13 -0
  60. package/styles/components/steps.css +18 -0
  61. package/styles/components/switch.css +19 -0
  62. package/styles/components/table-toolbar.css +20 -0
  63. package/styles/components/table.css +160 -0
  64. package/styles/components/tabs.css +31 -0
  65. package/styles/components/tag-input.css +16 -0
  66. package/styles/components/textarea.css +15 -0
  67. package/styles/components/timeline.css +11 -0
  68. package/styles/components/toast.css +21 -0
  69. package/styles/components/tooltip.css +35 -0
  70. package/styles/components/tree.css +17 -0
  71. package/styles/components/typography.css +45 -0
  72. package/styles/components/utility-bits.css +14 -0
  73. package/styles/components/view-menu.css +14 -0
  74. package/styles/motion.css +35 -0
  75. package/styles/utilities.css +26 -0
@@ -1,2188 +1 @@
1
-
2
- @layer uix.tokens, uix.base, uix.util, uix.motion, uix.components;
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: 40px;
153
- --uix-leading-display: 1.05;
154
- --uix-text-data-hero: 34px;
155
- --uix-leading-data-hero: 1.1;
156
- --uix-text-h2: 24px;
157
- --uix-leading-h2: 1.15;
158
- --uix-text-h3: 15px;
159
- --uix-leading-h3: 1.3;
160
- --uix-text-body: 14px;
161
- --uix-leading-body: 1.5;
162
- --uix-text-meta: 12.5px;
163
- --uix-leading-meta: 1.4;
164
- --uix-text-eyebrow: 11px;
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
- input, button, textarea, select { font: inherit; color: inherit; }
276
- code, kbd, pre, samp { font-family: var(--uix-font-mono); }
277
-
278
- a { color: var(--uix-link); text-decoration: none; }
279
- a:hover { text-decoration: underline; }
280
- /* Content links carry a persistent underline so they aren't distinguished from body text by
281
- colour alone (WCAG 1.4.1 / link-in-text-block). Chrome links — nav, buttons, tabs, breadcrumbs,
282
- pills — are all class-bearing, so :not([class]) scopes this to in-text content links only. */
283
- a[href]:not([class]) { text-decoration: underline; }
284
-
285
- :focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
286
- :focus:not(:focus-visible) { outline: none; }
287
- ::selection { background: var(--uix-brand-muted); }
288
-
289
- /* themed scrollbars — Firefox */
290
- * { scrollbar-width: thin; scrollbar-color: var(--uix-scrollbar-thumb) var(--uix-scrollbar-track); }
291
- /* themed scrollbars — WebKit/Blink */
292
- ::-webkit-scrollbar { width: var(--uix-scrollbar-size); height: var(--uix-scrollbar-size); }
293
- ::-webkit-scrollbar-track { background: var(--uix-scrollbar-track); }
294
- ::-webkit-scrollbar-thumb {
295
- background: var(--uix-scrollbar-thumb);
296
- border-radius: var(--uix-radius-pill);
297
- border: 2px solid transparent;
298
- background-clip: content-box;
299
- }
300
- ::-webkit-scrollbar-thumb:hover {
301
- background: var(--uix-scrollbar-thumb-hover);
302
- background-clip: content-box;
303
- }
304
- }
305
- /* uix utilities — a few layout/a11y helpers. Keep this small; tokens + components do the heavy lifting. */
306
- @layer uix.util {
307
- /* visually hidden but available to screen readers */
308
- .uix-visually-hidden {
309
- position: absolute !important;
310
- width: 1px; height: 1px;
311
- padding: 0; margin: -1px;
312
- overflow: hidden; clip: rect(0, 0, 0, 0);
313
- white-space: nowrap; border: 0;
314
- }
315
-
316
- /* vertical rhythm — set gap via --gap (defaults to --uix-space-4 / 16px) */
317
- .uix-stack { display: flex; flex-direction: column; gap: var(--gap, var(--uix-space-4)); }
318
- /* horizontal grouping that wraps */
319
- .uix-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--uix-space-2)); }
320
-
321
- .uix-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
322
-
323
- /* elevation — apply the surface shadow tokens as a utility (cards/panels,
324
- floating popovers/menus/dialogs, pressed/active pills). In dark mode
325
- --uix-shadow-sm resolves to the inset top highlight, so elevated surfaces
326
- keep their lift cue without a heavy drop shadow. */
327
- .uix-elevated { box-shadow: var(--uix-shadow-sm); }
328
- .uix-elevated-popover { box-shadow: var(--uix-shadow-popover); }
329
- .uix-elevated-pill { box-shadow: var(--uix-shadow-sm); }
330
- }
331
- /* uix motion — shared keyframes, enter/exit helpers, and the reduced-motion guard.
332
- Components reference these tokens/keyframes; overlays pair the helpers with @starting-style. */
333
- /* Reduced-motion guard — UNLAYERED so its !important beats every component transition. */
334
- @media (prefers-reduced-motion: reduce) {
335
- *, *::before, *::after {
336
- animation-duration: .001ms !important;
337
- animation-iteration-count: 1 !important;
338
- transition-duration: .001ms !important;
339
- scroll-behavior: auto !important;
340
- }
341
- }
342
- /* Keyframes (cascade-neutral). */
343
- @keyframes uix-fade-in { from { opacity: 0; } to { opacity: 1; } }
344
- @keyframes uix-pop-in {
345
- from { opacity: 0; transform: scale(.96) translateY(var(--uix-lift)); }
346
- to { opacity: 1; transform: none; }
347
- }
348
- @keyframes uix-slide-in-right { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
349
- @keyframes uix-slide-in-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
350
- @keyframes uix-spin { to { transform: rotate(1turn); } }
351
- @keyframes uix-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
352
- @layer uix.motion {
353
- .uix-anim-fade { animation: uix-fade-in var(--uix-dur) var(--uix-ease-out); }
354
- .uix-anim-pop { animation: uix-pop-in var(--uix-dur-fast) var(--uix-ease-out); }
355
- .uix-anim-up { animation: uix-slide-in-up var(--uix-dur) var(--uix-ease-out); }
356
-
357
- /* Hover-lift affordance for interactive cards/tiles. Gated so touch devices don't get a stuck hover. */
358
- .uix-lift-hover { transition: transform var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out); }
359
- @media (hover: hover) and (pointer: fine) {
360
- .uix-lift-hover:hover { transform: translateY(calc(-1 * var(--uix-lift))); box-shadow: var(--uix-shadow-popover); }
361
- }
362
- }
363
- /* components */
364
- /* uix button — depends only on --uix-* tokens. */
365
- @layer uix.components {
366
- .uix-btn {
367
- display: inline-flex; align-items: center; justify-content: center; gap: .5em;
368
- height: var(--uix-control-h); padding: 0 var(--uix-space-4); border: 1px solid transparent;
369
- border-radius: var(--uix-radius-md); font: inherit; font-size: var(--uix-text-body); font-weight: 500;
370
- line-height: 1; cursor: pointer; user-select: none; white-space: nowrap;
371
- transition: background-color var(--uix-dur-fast) var(--uix-ease-out),
372
- border-color var(--uix-dur-fast) var(--uix-ease-out),
373
- color var(--uix-dur-fast) var(--uix-ease-out),
374
- transform var(--uix-dur-fast) var(--uix-ease-out);
375
- }
376
- .uix-btn:active { transform: scale(.97); }
377
- .uix-btn:disabled, .uix-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
378
- .uix-btn:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
379
- .uix-btn svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
380
-
381
- .uix-btn--primary { background: var(--uix-accent); color: var(--uix-accent-fg); }
382
- .uix-btn--primary:hover { background: var(--uix-accent-hover); }
383
- .uix-btn--secondary { background: var(--uix-bg-subtle); color: var(--uix-text); border-color: var(--uix-border); }
384
- .uix-btn--secondary:hover { background: var(--uix-bg-hover); }
385
- .uix-btn--outline { background: transparent; color: var(--uix-text); border-color: var(--uix-border-strong); }
386
- .uix-btn--outline:hover { background: var(--uix-bg-hover); }
387
- .uix-btn--ghost { background: transparent; color: var(--uix-text); }
388
- .uix-btn--ghost:hover { background: var(--uix-bg-hover); }
389
- .uix-btn--danger { background: var(--uix-danger); color: var(--uix-danger-fg); }
390
- .uix-btn--danger:hover { background: color-mix(in srgb, var(--uix-danger) 88%, black); }
391
- .uix-btn--link { background: transparent; color: var(--uix-link); height: auto; padding: 0; }
392
- .uix-btn--link:hover { text-decoration: underline; }
393
-
394
- .uix-btn--sm { height: 28px; padding: 0 var(--uix-space-3); font-size: var(--uix-text-meta); }
395
- .uix-btn--lg { height: 44px; padding: 0 var(--uix-space-5); }
396
- .uix-btn--icon { width: var(--uix-control-h); padding: 0; }
397
- .uix-btn--icon.uix-btn--sm { width: 28px; }
398
- .uix-btn--icon.uix-btn--lg { width: 44px; }
399
-
400
- .uix-btn[data-loading] { color: transparent !important; position: relative; pointer-events: none; }
401
- .uix-btn[data-loading]::after {
402
- content: ""; position: absolute; width: 1em; height: 1em;
403
- border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
404
- color: var(--uix-accent-fg); animation: uix-spin .6s linear infinite;
405
- }
406
-
407
- /* attached group */
408
- .uix-btn-group { display: inline-flex; }
409
- .uix-btn-group .uix-btn { border-radius: 0; border-right-width: 0; }
410
- .uix-btn-group .uix-btn:first-child { border-top-left-radius: var(--uix-radius-md); border-bottom-left-radius: var(--uix-radius-md); }
411
- .uix-btn-group .uix-btn:last-child { border-radius: 0 var(--uix-radius-md) var(--uix-radius-md) 0; border-right-width: 1px; }
412
- }
413
- /* uix input + field wrapper — depends only on --uix-* tokens. */
414
- @layer uix.components {
415
- .uix-field { display: flex; flex-direction: column; gap: var(--uix-space-2); }
416
- .uix-field__label { font-size: var(--uix-text-meta); font-weight: 500; color: var(--uix-text); }
417
- .uix-field__label[data-required]::after { content: " *"; color: var(--uix-danger-text); }
418
- /* message slot for hint / error / success — reserves one line so an appearing error never
419
- shifts the layout (UIX-FIX-04); the React <Field> always renders it. */
420
- .uix-field__msg { font-size: var(--uix-text-meta); line-height: 1.45; min-height: 1.45em; }
421
- .uix-field__hint { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
422
- .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); }
423
- .uix-field__error svg, .uix-field__success svg { width: 14px; height: 14px; flex: none; }
424
- .uix-field__success { font-size: var(--uix-text-meta); color: var(--uix-success); display: inline-flex; align-items: center; gap: var(--uix-space-2); }
425
-
426
- .uix-input {
427
- height: var(--uix-control-h); width: 100%;
428
- padding: 0 var(--uix-space-3); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md);
429
- background: var(--uix-surface); color: var(--uix-text); font: inherit; font-size: var(--uix-text-body);
430
- transition: border-color var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out);
431
- }
432
- .uix-input::placeholder { color: var(--uix-text-muted); }
433
- .uix-input:hover { border-color: var(--uix-border-strong); }
434
- .uix-input:focus { outline: none; border-color: var(--uix-ring); box-shadow: 0 0 0 3px var(--uix-brand-muted); }
435
- .uix-input:disabled { opacity: .55; cursor: not-allowed; background: var(--uix-bg-subtle); }
436
- .uix-input[readonly] { background: var(--uix-bg-subtle); }
437
- .uix-input[aria-invalid="true"] { border-color: var(--uix-danger); }
438
- .uix-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--uix-danger-bg); }
439
- .uix-input--sm { height: 28px; font-size: var(--uix-text-meta); }
440
-
441
- /* leading/trailing adornments */
442
- .uix-input-group { position: relative; display: flex; align-items: center; }
443
- .uix-input-group__icon { position: absolute; left: 10px; color: var(--uix-text-muted); display: inline-flex; pointer-events: none; }
444
- .uix-input-group__icon svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
445
- .uix-input-group--has-leading .uix-input { padding-left: 38px; }
446
- /* validation microinteractions */
447
- .uix-input[data-valid] { border-color: var(--uix-success); }
448
- .uix-input[data-valid]:focus { box-shadow: 0 0 0 3px var(--uix-success-bg); }
449
- .uix-input-group--has-trailing .uix-input { padding-right: 38px; }
450
- .uix-input-group__icon--trailing { left: auto; right: 10px; }
451
- }
452
- /* uix textarea — depends only on --uix-* tokens. */
453
- @layer uix.components {
454
- .uix-textarea {
455
- width: 100%; min-height: 84px; padding: var(--uix-space-3) var(--uix-space-3); resize: vertical;
456
- border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md);
457
- background: var(--uix-surface); color: var(--uix-text); font: inherit; font-size: var(--uix-text-body);
458
- line-height: var(--uix-leading-body);
459
- transition: border-color var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out);
460
- }
461
- .uix-textarea::placeholder { color: var(--uix-text-muted); }
462
- .uix-textarea:hover { border-color: var(--uix-border-strong); }
463
- .uix-textarea:focus { outline: none; border-color: var(--uix-ring); box-shadow: 0 0 0 3px var(--uix-brand-muted); }
464
- .uix-textarea:disabled { opacity: .55; background: var(--uix-bg-subtle); }
465
- .uix-textarea[aria-invalid="true"] { border-color: var(--uix-danger); }
466
- }
467
- /* uix select (native, styled) — depends only on --uix-* tokens. */
468
- @layer uix.components {
469
- .uix-select {
470
- height: var(--uix-control-h); width: 100%; padding: 0 var(--uix-space-8) 0 var(--uix-space-3); appearance: none;
471
- border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md);
472
- background-color: var(--uix-surface); color: var(--uix-text); font: inherit; font-size: var(--uix-text-body); cursor: pointer;
473
- background-repeat: no-repeat; background-position: right 12px center;
474
- 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");
475
- transition: border-color var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out);
476
- }
477
- .uix-select:hover { border-color: var(--uix-border-strong); }
478
- .uix-select:focus { outline: none; border-color: var(--uix-ring); box-shadow: 0 0 0 3px var(--uix-brand-muted); }
479
- .uix-select:disabled { opacity: .55; cursor: not-allowed; background-color: var(--uix-bg-subtle); }
480
- .uix-select--sm { height: 28px; font-size: var(--uix-text-meta); }
481
-
482
- /* command-palette-style rich select: a trigger that opens a .uix-cmdk popover (search + options) */
483
- .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;
484
- border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); color: var(--uix-text);
485
- font: inherit; font-size: var(--uix-text-body); cursor: pointer; transition: border-color var(--uix-dur-fast) var(--uix-ease-out); }
486
- .uix-select-trigger:hover { border-color: var(--uix-border-strong); }
487
- .uix-select-trigger:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
488
- .uix-select-trigger__chevron { margin-left: auto; color: var(--uix-text-muted); width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
489
- }
490
- /* uix checkbox — depends only on --uix-* tokens. Markup:
491
- <label class="uix-checkbox"><input type="checkbox"><span class="uix-checkbox__box">{check svg}</span> Label</label> */
492
- @layer uix.components {
493
- .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); }
494
- .uix-checkbox > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
495
- .uix-checkbox__box {
496
- width: 18px; height: 18px; flex: none; display: grid; place-items: center;
497
- border: 1px solid var(--uix-border-strong); border-radius: var(--uix-radius-xs); background: var(--uix-surface);
498
- transition: background-color var(--uix-dur-fast) var(--uix-ease-out), border-color var(--uix-dur-fast) var(--uix-ease-out);
499
- }
500
- .uix-checkbox__box svg {
501
- width: 13px; height: 13px; color: var(--uix-accent-fg); opacity: 0; transform: scale(.5);
502
- transition: opacity var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-spring);
503
- }
504
- .uix-checkbox > input:checked + .uix-checkbox__box,
505
- .uix-checkbox > input:indeterminate + .uix-checkbox__box { background: var(--uix-accent); border-color: var(--uix-accent); }
506
- .uix-checkbox > input:checked + .uix-checkbox__box svg { opacity: 1; transform: none; }
507
- .uix-checkbox > input:focus-visible + .uix-checkbox__box { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
508
- .uix-checkbox > input:disabled ~ * { opacity: .5; }
509
- }
510
- /* uix radio + radio-group — depends only on --uix-* tokens. */
511
- @layer uix.components {
512
- .uix-radio-group { display: flex; flex-direction: column; gap: var(--uix-space-2); }
513
- .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); }
514
- .uix-radio > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
515
- .uix-radio__dot {
516
- width: 18px; height: 18px; flex: none; border-radius: 50%;
517
- border: 1px solid var(--uix-border-strong); background: var(--uix-surface);
518
- display: grid; place-items: center;
519
- transition: border-color var(--uix-dur-fast) var(--uix-ease-out);
520
- }
521
- .uix-radio__dot::after {
522
- content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--uix-accent);
523
- opacity: 0; transform: scale(.4); transition: opacity var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-spring);
524
- }
525
- .uix-radio > input:checked + .uix-radio__dot { border-color: var(--uix-accent); }
526
- .uix-radio > input:checked + .uix-radio__dot::after { opacity: 1; transform: none; }
527
- .uix-radio > input:focus-visible + .uix-radio__dot { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
528
- .uix-radio > input:disabled ~ * { opacity: .5; }
529
- }
530
- /* uix switch — depends only on --uix-* tokens. */
531
- @layer uix.components {
532
- .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); }
533
- .uix-switch > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
534
- .uix-switch__track {
535
- width: 36px; height: 20px; flex: none; border-radius: var(--uix-radius-pill);
536
- background: var(--uix-bg-active); position: relative;
537
- transition: background-color var(--uix-dur) var(--uix-ease-out);
538
- }
539
- .uix-switch__track::after {
540
- content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
541
- background: var(--uix-text-reverse); box-shadow: var(--uix-shadow-sm);
542
- transition: transform var(--uix-dur) var(--uix-ease-out);
543
- }
544
- .uix-switch > input:checked + .uix-switch__track { background: var(--uix-accent); }
545
- .uix-switch > input:checked + .uix-switch__track::after { transform: translateX(16px); }
546
- .uix-switch > input:focus-visible + .uix-switch__track { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
547
- .uix-switch > input:disabled + .uix-switch__track { opacity: .5; }
548
- }
549
- /* uix segmented control — depends only on --uix-* tokens. */
550
- @layer uix.components {
551
- .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); }
552
- .uix-segmented__option {
553
- border: 0; background: transparent; color: var(--uix-text-hushed); font: inherit; font-size: var(--uix-text-meta); font-weight: 500;
554
- padding: var(--uix-space-2) var(--uix-space-3); border-radius: calc(var(--uix-radius-md) - 3px); cursor: pointer;
555
- transition: background-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
556
- }
557
- .uix-segmented__option:hover { color: var(--uix-text); }
558
- .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); }
559
- .uix-segmented__option:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 1px; }
560
- }
561
- /* uix slider (native range, styled) — depends only on --uix-* tokens. */
562
- @layer uix.components {
563
- .uix-slider { -webkit-appearance: none; appearance: none; width: 220px; height: 20px; background: transparent; cursor: pointer; }
564
- .uix-slider::-webkit-slider-runnable-track { height: 6px; border-radius: var(--uix-radius-pill); background: var(--uix-bg-active); }
565
- .uix-slider::-moz-range-track { height: 6px; border-radius: var(--uix-radius-pill); background: var(--uix-bg-active); }
566
- .uix-slider::-moz-range-progress { height: 6px; border-radius: var(--uix-radius-pill); background: var(--uix-accent); }
567
- .uix-slider::-webkit-slider-thumb {
568
- -webkit-appearance: none; appearance: none; margin-top: -6px; width: 18px; height: 18px; border-radius: 50%;
569
- background: var(--uix-surface); border: 2px solid var(--uix-accent); box-shadow: var(--uix-shadow-sm);
570
- transition: transform var(--uix-dur-fast) var(--uix-ease-out);
571
- }
572
- .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); }
573
- .uix-slider:active::-webkit-slider-thumb { transform: scale(1.12); }
574
- .uix-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
575
- .uix-slider:disabled { opacity: .5; cursor: not-allowed; }
576
- }
577
- /* uix number stepper — depends only on --uix-* tokens. */
578
- @layer uix.components {
579
- .uix-stepper { display: inline-flex; align-items: center; height: var(--uix-control-h); overflow: hidden;
580
- border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); }
581
- .uix-stepper__btn { width: 32px; align-self: stretch; border: 0; background: transparent; color: var(--uix-text); cursor: pointer;
582
- display: grid; place-items: center; transition: background-color var(--uix-dur-fast) var(--uix-ease-out); }
583
- .uix-stepper__btn:hover { background: var(--uix-bg-hover); }
584
- .uix-stepper__btn svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
585
- .uix-stepper__input { width: 52px; text-align: center; border: 0; height: 100%; background: transparent; color: var(--uix-text);
586
- font: inherit; border-inline: 1px solid var(--uix-border); -moz-appearance: textfield; }
587
- .uix-stepper__input::-webkit-outer-spin-button, .uix-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
588
- .uix-stepper:focus-within { border-color: var(--uix-ring); box-shadow: 0 0 0 3px var(--uix-brand-muted); }
589
- }
590
- /* uix file upload / dropzone — depends only on --uix-* tokens. */
591
- @layer uix.components {
592
- .uix-dropzone {
593
- display: flex; flex-direction: column; align-items: center; gap: var(--uix-space-2); padding: var(--uix-space-7); text-align: center;
594
- border: 1.5px dashed var(--uix-border-strong); border-radius: var(--uix-radius-lg);
595
- background: var(--uix-bg-subtle); color: var(--uix-text-muted); cursor: pointer;
596
- 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);
597
- }
598
- .uix-dropzone:hover, .uix-dropzone[data-dragover] { border-color: var(--uix-accent); background: var(--uix-brand-muted); color: var(--uix-text); }
599
- .uix-dropzone svg { width: var(--uix-icon-lg); height: var(--uix-icon-lg); }
600
- .uix-filelist { display: flex; flex-direction: column; gap: var(--uix-space-2); margin-top: var(--uix-space-3); }
601
- .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); }
602
- .uix-filelist__size { margin-left: auto; color: var(--uix-text-muted); }
603
- }
604
- /* uix combobox / listbox surface — depends only on --uix-* tokens. */
605
- @layer uix.components {
606
- .uix-combobox { position: relative; }
607
- .uix-listbox {
608
- list-style: none; margin: 0; padding: var(--uix-space-1); min-width: 200px;
609
- background: var(--uix-surface-2); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md);
610
- box-shadow: var(--uix-shadow-popover);
611
- }
612
- .uix-listbox__option {
613
- 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);
614
- cursor: pointer; display: flex; align-items: center; gap: var(--uix-space-2);
615
- }
616
- .uix-listbox__option:hover, .uix-listbox__option[aria-selected="true"], .uix-listbox__option[data-active] { background: var(--uix-bg-hover); }
617
- .uix-listbox__option[aria-selected="true"] { color: var(--uix-link); }
618
- .uix-listbox__empty { padding: var(--uix-space-3); text-align: center; color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
619
- }
620
- /* uix tag input / multi-select chips — depends only on --uix-* tokens. */
621
- @layer uix.components {
622
- .uix-taginput {
623
- 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);
624
- border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface);
625
- }
626
- .uix-taginput:focus-within { border-color: var(--uix-ring); box-shadow: 0 0 0 3px var(--uix-brand-muted); }
627
- .uix-taginput__field { flex: 1; min-width: 80px; border: 0; outline: none; background: transparent; color: var(--uix-text); font: inherit; }
628
- .uix-tag {
629
- 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);
630
- background: var(--uix-bg-active); color: var(--uix-text); font-size: var(--uix-text-meta);
631
- }
632
- .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); }
633
- .uix-tag__remove:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
634
- .uix-tag__remove svg { width: 12px; height: 12px; }
635
- }
636
- /* uix form layout — depends only on --uix-* tokens. */
637
- @layer uix.components {
638
- .uix-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--uix-space-5); }
639
- .uix-fieldset { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); padding: var(--uix-space-6); }
640
- .uix-fieldset > legend { padding: 0 var(--uix-space-2); font-size: var(--uix-text-meta); font-weight: 600; color: var(--uix-text); }
641
- .uix-form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--uix-space-4); }
642
- .uix-validation-summary {
643
- border: 1px solid var(--uix-danger); background: var(--uix-danger-bg); color: var(--uix-text);
644
- border-radius: var(--uix-radius-md); padding: var(--uix-space-3) var(--uix-space-4); font-size: var(--uix-text-meta);
645
- }
646
- .uix-validation-summary strong { color: var(--uix-danger-text); }
647
- .uix-validation-summary ul { margin: var(--uix-space-2) 0 0; padding-left: var(--uix-space-5); }
648
- .uix-validation-summary a { color: var(--uix-danger-text); text-decoration: underline; }
649
- }
650
- /* uix app shell — sidebar + topbar + content grid. Depends only on --uix-* tokens. */
651
- @layer uix.components {
652
- .uix-shell {
653
- position: relative;
654
- display: grid;
655
- grid-template-columns: var(--uix-sidebar-w) 1fr;
656
- grid-template-rows: var(--uix-topbar-h) 1fr;
657
- height: 100%; min-height: 360px;
658
- border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); overflow: hidden;
659
- transition: grid-template-columns var(--uix-dur) var(--uix-ease-out), grid-template-rows var(--uix-dur) var(--uix-ease-out);
660
- }
661
- .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; }
662
- .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); }
663
- .uix-shell__main { grid-column: 2; overflow: auto; padding: var(--uix-space-7); background: var(--uix-bg-app); }
664
-
665
- /* ── nav width tiers ──────────────────────────────────────────────────────────
666
- Progressive reveal for wide, many-column tables: full (default) → rail (icon
667
- only) → hidden (0). data-collapsed stays a back-compat alias for the rail. */
668
- .uix-shell[data-nav="rail"], .uix-shell[data-collapsed] { grid-template-columns: var(--uix-sidebar-w-rail) 1fr; }
669
- .uix-shell[data-nav="hidden"] { grid-template-columns: 0 1fr; }
670
-
671
- /* ── focus / immersive mode ───────────────────────────────────────────────────
672
- A table-scoped escape hatch: hide the sidebar AND the topbar so a dense grid
673
- uses the whole frame. The app toggles [data-focus] (from a toolbar maximize
674
- control) and restores the previous nav state + focus on Esc. */
675
- .uix-shell[data-focus] { grid-template-columns: 0 1fr; grid-template-rows: 0 1fr; }
676
- .uix-shell[data-focus] .uix-shell__topbar { display: none; }
677
-
678
- /* a floating host for the "exit focus" affordance (Esc also exits) */
679
- .uix-shell__focus-exit { position: absolute; top: var(--uix-space-3); right: var(--uix-space-3); z-index: var(--uix-z-overlay); }
680
-
681
- /* ── full-bleed main ──────────────────────────────────────────────────────────
682
- Opt-in per surface: a genuinely wide grid drops the content gutter and runs
683
- edge to edge, reclaiming 2 x --uix-space-7. Not the default — most pages want
684
- the gutter. Pair with a frozen identifier column for horizontal scroll. */
685
- .uix-shell__main--bleed { padding: 0; }
686
- }
687
- /* uix sidebar nav — items, favorites, collapsible sub-items, collapsed rail. Depends only on --uix-* tokens. */
688
- @layer uix.components {
689
- .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; }
690
- .uix-sidebar__eyebrow {
691
- font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase;
692
- color: var(--uix-text-muted); padding: var(--uix-space-3) var(--uix-space-3) var(--uix-space-1);
693
- }
694
-
695
- /* brand header */
696
- .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); }
697
- .uix-sidebar__brand { min-width: 0; font-size: var(--uix-text-h3); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
698
- .uix-sidebar__toggle {
699
- display: grid; place-items: center; width: 28px; height: 28px; flex: none;
700
- border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; border-radius: var(--uix-radius-sm);
701
- transition: background-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
702
- }
703
- .uix-sidebar__toggle:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
704
- .uix-sidebar__toggle svg { width: 18px; height: 18px; }
705
-
706
- .uix-navitem {
707
- display: flex; align-items: center; gap: var(--uix-space-3); height: 36px; padding: 0 var(--uix-space-3);
708
- border-radius: var(--uix-radius-sm); color: var(--uix-text-hushed); cursor: pointer; text-decoration: none;
709
- border: 0; background: transparent; font: inherit; font-size: var(--uix-text-body); width: 100%; text-align: left;
710
- transition: background-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
711
- }
712
- .uix-navitem:hover { background: var(--uix-bg-hover); color: var(--uix-text); text-decoration: none; }
713
- /* active uses --uix-link (the brightened-on-dark accent) not raw --uix-accent: the deep accent
714
- fails AA as text on the brand-muted tint in dark; link reads legibly in both themes. */
715
- .uix-navitem[aria-current="page"] { background: var(--uix-brand-muted); color: var(--uix-link); font-weight: 500; }
716
- .uix-navitem__icon { width: var(--uix-icon-md); height: var(--uix-icon-md); flex: none; }
717
- .uix-navitem__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
718
- .uix-navitem__badge { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
719
- /* on the active tint, muted badge dips below AA — hushed composites darker on the tint */
720
- .uix-navitem[aria-current="page"] .uix-navitem__badge { color: var(--uix-text-hushed); }
721
- .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); }
722
- .uix-navitem__star svg { width: 15px; height: 15px; }
723
- .uix-navitem:hover .uix-navitem__star { opacity: 1; }
724
- .uix-navitem__star[data-on] { opacity: 1; color: var(--uix-warning); }
725
- .uix-navitem__star[data-on] svg { fill: currentColor; }
726
-
727
- /* collapsible group */
728
- .uix-navgroup { }
729
- .uix-navgroup__trigger .uix-navgroup__chevron { margin-left: auto; transition: transform var(--uix-dur) var(--uix-ease-out); }
730
- .uix-navgroup__trigger[aria-expanded="false"] .uix-navgroup__chevron { transform: rotate(-90deg); }
731
- .uix-navgroup__chevron { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
732
- .uix-navgroup__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--uix-dur) var(--uix-ease-out); }
733
- .uix-navgroup__trigger[aria-expanded="false"] + .uix-navgroup__panel { grid-template-rows: 0fr; }
734
- .uix-navgroup__panel > div { overflow: hidden; }
735
- .uix-subitem { padding-left: var(--uix-space-5); }
736
- .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; }
737
-
738
- /* collapsed rail */
739
- .uix-sidebar[data-collapsed], .uix-sidebar[data-nav="rail"] { width: var(--uix-sidebar-w-rail); }
740
- .uix-sidebar[data-collapsed] .uix-navitem__label,
741
- .uix-sidebar[data-collapsed] .uix-navitem__badge,
742
- .uix-sidebar[data-collapsed] .uix-navitem__star,
743
- .uix-sidebar[data-collapsed] .uix-sidebar__eyebrow,
744
- .uix-sidebar[data-collapsed] .uix-sidebar__brand,
745
- .uix-sidebar[data-collapsed] .uix-navgroup__chevron,
746
- .uix-sidebar[data-collapsed] .uix-navgroup__panel { display: none; }
747
- /* center the icon-only rail; head keeps just the toggle, centered */
748
- .uix-sidebar[data-collapsed] .uix-navitem { justify-content: center; padding: 0; gap: 0; }
749
- .uix-sidebar[data-collapsed] .uix-sidebar__head { justify-content: center; padding-inline: 0; }
750
- }
751
- /* uix breadcrumbs — depends only on --uix-* tokens. */
752
- @layer uix.components {
753
- .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); }
754
- .uix-breadcrumbs a { color: var(--uix-text-muted); text-decoration: none; }
755
- /* already a quiet link by its own design — hover/focus parity with the quiet-link
756
- contract in link.css, so the keyboard state matches the pointer state. */
757
- .uix-breadcrumbs a:is(:hover, :focus-visible) { color: var(--uix-text); text-decoration: underline; }
758
- .uix-breadcrumbs__sep { opacity: .55; }
759
- .uix-breadcrumbs [aria-current="page"] { color: var(--uix-text); font-weight: 500; }
760
- }
761
- /* uix tabs — line / enclosed / pill. Depends only on --uix-* tokens. */
762
- @layer uix.components {
763
- .uix-tabs { display: flex; gap: var(--uix-space-1); }
764
- .uix-tab {
765
- border: 0; background: transparent; font: inherit; font-size: var(--uix-text-body); font-weight: 500;
766
- color: var(--uix-text-hushed); padding: var(--uix-space-3) var(--uix-space-3); cursor: pointer; position: relative;
767
- transition: color var(--uix-dur-fast) var(--uix-ease-out), background-color var(--uix-dur-fast) var(--uix-ease-out);
768
- }
769
- .uix-tab:hover { color: var(--uix-text); }
770
- .uix-tab[aria-selected="true"] { color: var(--uix-text); }
771
- .uix-tab:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: -2px; border-radius: var(--uix-radius-sm); }
772
-
773
- /* line */
774
- .uix-tabs--line { border-bottom: 1px solid var(--uix-border); }
775
- .uix-tabs--line .uix-tab::after {
776
- content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px;
777
- background: var(--uix-accent); border-radius: var(--uix-radius-pill);
778
- transform: scaleX(0); transition: transform var(--uix-dur) var(--uix-ease-out);
779
- }
780
- .uix-tabs--line .uix-tab[aria-selected="true"]::after { transform: scaleX(1); }
781
-
782
- /* enclosed */
783
- .uix-tabs--enclosed { gap: 0; border-bottom: 1px solid var(--uix-border); }
784
- .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; }
785
- .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); }
786
-
787
- /* pill */
788
- .uix-tabs--pill { display: inline-flex; background: var(--uix-bg-subtle); padding: var(--uix-space-1); border-radius: var(--uix-radius-md); }
789
- .uix-tabs--pill .uix-tab { padding: var(--uix-space-2) var(--uix-space-4); border-radius: calc(var(--uix-radius-md) - 3px); }
790
- .uix-tabs--pill .uix-tab[aria-selected="true"] { background: var(--uix-surface); box-shadow: var(--uix-shadow-sm); }
791
- }
792
- /* uix pagination — depends only on --uix-* tokens. */
793
- @layer uix.components {
794
- .uix-pagination { display: inline-flex; align-items: center; gap: var(--uix-space-1); }
795
- .uix-pagination__btn {
796
- min-width: 32px; height: 32px; padding: 0 var(--uix-space-2); display: inline-flex; align-items: center; justify-content: center;
797
- border: 1px solid var(--uix-border); border-radius: var(--uix-radius-sm); background: var(--uix-surface);
798
- color: var(--uix-text); font: inherit; font-size: var(--uix-text-meta); line-height: 1; cursor: pointer;
799
- transition: background-color var(--uix-dur-fast) var(--uix-ease-out), border-color var(--uix-dur-fast) var(--uix-ease-out);
800
- }
801
- .uix-pagination__btn:hover { background: var(--uix-bg-hover); }
802
- .uix-pagination__btn[aria-current="page"] { background: var(--uix-accent); border-color: var(--uix-accent); color: var(--uix-accent-fg); }
803
- .uix-pagination__btn:disabled { opacity: .45; pointer-events: none; }
804
- .uix-pagination__ellipsis { padding: 0 var(--uix-space-1); color: var(--uix-text-muted); }
805
- }
806
- /* uix steps / wizard — depends only on --uix-* tokens. */
807
- @layer uix.components {
808
- .uix-steps { display: flex; align-items: center; gap: 0; }
809
- .uix-step { display: flex; align-items: center; gap: var(--uix-space-3); color: var(--uix-text-muted); }
810
- .uix-step__marker {
811
- width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center;
812
- border: 1px solid var(--uix-border-strong); background: var(--uix-surface); font-size: var(--uix-text-meta); font-weight: 600;
813
- line-height: 1; /* hug the glyph so place-items:center truly centers single digits/symbols */
814
- }
815
- .uix-step__label { font-size: var(--uix-text-meta); font-weight: 500; }
816
- .uix-step__connector { flex: 1; height: 1px; min-width: 28px; background: var(--uix-border); margin: 0 var(--uix-space-3); }
817
- .uix-step[data-state="active"] { color: var(--uix-text); }
818
- .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); }
819
- .uix-step[data-state="done"] { color: var(--uix-text); }
820
- .uix-step[data-state="done"] .uix-step__marker { background: var(--uix-accent); border-color: var(--uix-accent); color: var(--uix-accent-fg); }
821
- .uix-step[data-state="done"] + .uix-step__connector,
822
- .uix-step__connector[data-done] { background: var(--uix-accent); }
823
- }
824
- /* uix command palette (⌘K) — inner surface; mounts in a dialog/popover (overlay mechanics in motion + overlays). */
825
- @layer uix.components {
826
- .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; }
827
- .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); }
828
- .uix-cmdk__input:focus { outline: none; }
829
- .uix-cmdk__list { max-height: 320px; overflow-y: auto; padding: var(--uix-space-2); }
830
- .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); }
831
- .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); }
832
- .uix-cmdk__item svg { width: var(--uix-icon-md); height: var(--uix-icon-md); color: var(--uix-text-muted); }
833
- .uix-cmdk__item:hover, .uix-cmdk__item[data-active] { background: var(--uix-bg-hover); }
834
- .uix-cmdk__item .uix-kbd { margin-left: auto; }
835
- /* ⌘K is keyboard-triggered and high-frequency → open instantly, no animation (Emil's rule) */
836
- dialog[data-uix-cmdk-dialog], dialog[data-uix-cmdk-dialog]::backdrop { transition: none; }
837
- }
838
- /* uix menu / dropdown / context menu — popover-anchored surface. Depends only on --uix-* tokens. */
839
- @layer uix.components {
840
- .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); }
841
- .uix-menu__item {
842
- display: flex; align-items: center; gap: var(--uix-space-3); width: 100%; text-align: left; padding: var(--uix-space-2) var(--uix-space-3);
843
- border: 0; background: transparent; border-radius: var(--uix-radius-sm); color: var(--uix-text); font: inherit; font-size: var(--uix-text-body); cursor: pointer;
844
- }
845
- .uix-menu__item svg { width: var(--uix-icon-md); height: var(--uix-icon-md); color: var(--uix-text-muted); }
846
- .uix-menu__item:hover, .uix-menu__item[data-active] { background: var(--uix-bg-hover); }
847
- .uix-menu__item--danger { color: var(--uix-danger-text); }
848
- .uix-menu__item--danger svg { color: var(--uix-danger-text); }
849
- .uix-menu__item .uix-kbd { margin-left: auto; }
850
- .uix-menu__sep { height: 1px; background: var(--uix-border); margin: var(--uix-space-1) 0; }
851
- .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); }
852
- }
853
- /* uix page header — title/subtitle/actions row. Depends only on --uix-* tokens. */
854
- @layer uix.components {
855
- .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); }
856
- .uix-page-header__titles { flex: 1; min-width: 220px; }
857
- .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); }
858
- .uix-page-header__title { font-size: var(--uix-text-h2); font-weight: 600; letter-spacing: var(--uix-tracking-tight); }
859
- .uix-page-header__subtitle { color: var(--uix-text-muted); font-size: var(--uix-text-meta); margin-top: var(--uix-space-2); max-width: 70ch; }
860
- .uix-page-header__actions { display: flex; gap: var(--uix-space-2); align-items: center; flex-wrap: wrap; }
861
- }
862
- /* uix keyboard-shortcut chip — depends only on --uix-* tokens. */
863
- @layer uix.components {
864
- .uix-kbd {
865
- display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--uix-space-2);
866
- font-family: var(--uix-font-mono); font-size: var(--uix-text-eyebrow); color: var(--uix-text-muted);
867
- background: var(--uix-bg-subtle); border: 1px solid var(--uix-border); border-bottom-width: 2px; border-radius: var(--uix-radius-xs);
868
- }
869
- }
870
- /* uix card — depends only on --uix-* tokens. */
871
- @layer uix.components {
872
- .uix-card { background: var(--uix-surface); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); box-shadow: var(--uix-shadow-sm); }
873
- .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); }
874
- .uix-card__title { font-size: var(--uix-text-h3); font-weight: 600; }
875
- .uix-card__subtitle { font-size: var(--uix-text-meta); color: var(--uix-text-muted); margin-top: var(--uix-space-1); }
876
- .uix-card__body { padding: var(--uix-space-6); }
877
- .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; }
878
- }
879
- /* uix KPI / stat tile — depends only on --uix-* tokens. */
880
- @layer uix.components {
881
- .uix-stat { background: var(--uix-surface); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); padding: var(--uix-space-6); }
882
- .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); }
883
- .uix-stat__label svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
884
- .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); }
885
- .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); }
886
- .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); }
887
- .uix-stat__trend--up { color: var(--uix-success); background: var(--uix-success-bg); }
888
- .uix-stat__trend--down { color: var(--uix-danger-text); background: var(--uix-danger-bg); }
889
- }
890
- /* uix status pill — tone API (status / priority / SLA). Depends only on --uix-* tokens. */
891
- @layer uix.components {
892
- .uix-pill {
893
- 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);
894
- font-size: var(--uix-text-meta); font-weight: 500; line-height: 1.4;
895
- background: var(--tone-bg, var(--uix-bg-active)); color: var(--tone-fg, var(--uix-text-hushed));
896
- }
897
- .uix-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tone-dot, currentColor); flex: none; }
898
- .uix-pill--neutral { --tone-bg: var(--uix-bg-active); --tone-fg: var(--uix-text-hushed); --tone-dot: var(--uix-text-muted); }
899
- .uix-pill--success { --tone-bg: var(--uix-success-bg); --tone-fg: var(--uix-success); --tone-dot: var(--uix-success); }
900
- .uix-pill--info { --tone-bg: var(--uix-info-bg); --tone-fg: var(--uix-info-text); --tone-dot: var(--uix-info); }
901
- .uix-pill--warning { --tone-bg: var(--uix-warning-bg); --tone-fg: var(--uix-warning-text); --tone-dot: var(--uix-warning); }
902
- .uix-pill--danger { --tone-bg: var(--uix-danger-bg); --tone-fg: var(--uix-danger-text); --tone-dot: var(--uix-danger); }
903
- /* critical = the one SOLID fill (most urgent); muted = a quiet, chrome-less label */
904
- .uix-pill--critical { --tone-bg: var(--uix-danger); --tone-fg: var(--uix-danger-fg); --tone-dot: var(--uix-danger-fg); }
905
- .uix-pill--muted { --tone-bg: transparent; --tone-fg: var(--uix-text-muted); --tone-dot: var(--uix-text-muted); }
906
- /* time-pressure tones (U1 tokens — distinct from severity and validation-error) */
907
- .uix-pill--attention { --tone-bg: var(--uix-attention-bg); --tone-fg: var(--uix-attention-text); --tone-dot: var(--uix-attention); }
908
- .uix-pill--overdue { --tone-bg: var(--uix-overdue-bg); --tone-fg: var(--uix-overdue-text); --tone-dot: var(--uix-overdue); }
909
- /* SLA tones — ok=success, at-risk=attention, breached=overdue */
910
- .uix-pill--sla-ok { --tone-bg: var(--uix-success-bg); --tone-fg: var(--uix-success); --tone-dot: var(--uix-success); }
911
- .uix-pill--sla-at-risk { --tone-bg: var(--uix-attention-bg); --tone-fg: var(--uix-attention-text); --tone-dot: var(--uix-attention); }
912
- .uix-pill--sla-breached { --tone-bg: var(--uix-overdue-bg); --tone-fg: var(--uix-overdue-text); --tone-dot: var(--uix-overdue); }
913
- /* Priority/severity tones — P1=danger, P2=warning, P3=amber, P4=info, P5=neutral (complete 5-tier ramp) */
914
- .uix-pill--p1 { --tone-bg: var(--uix-danger-bg); --tone-fg: var(--uix-danger-text); --tone-dot: var(--uix-danger); }
915
- .uix-pill--p2 { --tone-bg: var(--uix-warning-bg); --tone-fg: var(--uix-warning-text); --tone-dot: var(--uix-warning); }
916
- .uix-pill--p3 { --tone-bg: var(--uix-amber-bg); --tone-fg: var(--uix-amber-text); --tone-dot: var(--uix-amber); }
917
- .uix-pill--p4 { --tone-bg: var(--uix-info-bg); --tone-fg: var(--uix-info-text); --tone-dot: var(--uix-info); }
918
- .uix-pill--p5 { --tone-bg: var(--uix-bg-active); --tone-fg: var(--uix-text-hushed); --tone-dot: var(--uix-text-muted); }
919
-
920
- /* outline treatment — transparent fill, tone-tinted border, tone-colored text. The border tints
921
- the tone hue (--tone-fg) at 40%; neutral/muted use the structural borders, critical reads strongest. */
922
- .uix-pill--outline { background: transparent; border: 1px solid var(--tone-line, color-mix(in srgb, var(--tone-fg) 40%, transparent)); }
923
- .uix-pill--outline.uix-pill--neutral { --tone-line: var(--uix-border-strong); }
924
- .uix-pill--outline.uix-pill--muted { --tone-line: var(--uix-border); }
925
- .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); }
926
- }
927
- /* uix data table — zebra, sticky header, sort, selection, density, pinned rows,
928
- column sizing, bulk actions, row actions, expandable rows, inline edit, resize,
929
- search highlight, responsive ladder + compare. Depends only on --uix-* tokens. */
930
- @layer uix.components {
931
- .uix-table-wrap { overflow: auto; max-height: 460px; border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); background: var(--uix-surface); }
932
- .uix-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--uix-text-body); }
933
-
934
- .uix-table thead th {
935
- position: sticky; top: 0; z-index: var(--uix-z-raised); background: var(--uix-surface); text-align: left;
936
- font-size: var(--uix-text-meta); font-weight: 600; color: var(--uix-text-hushed);
937
- padding: 0 var(--uix-space-4); height: 44px; border-bottom: 1px solid var(--uix-border); white-space: nowrap;
938
- }
939
- .uix-table th[data-sort] { cursor: pointer; user-select: none; }
940
- .uix-table th[data-sort]:hover { color: var(--uix-text); }
941
- .uix-table th[data-sort]::after { content: " ↕"; opacity: .35; }
942
- .uix-table th[aria-sort="ascending"]::after { content: " ↑"; opacity: 1; color: var(--uix-accent); }
943
- .uix-table th[aria-sort="descending"]::after { content: " ↓"; opacity: 1; color: var(--uix-accent); }
944
- /* multi-column sort ordinal (⇧+click adds a secondary key) */
945
- .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); }
946
-
947
- .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; }
948
- .uix-table tbody tr { background: var(--uix-row); }
949
- .uix-table tbody tr:nth-child(even) { background: var(--uix-row-alt); }
950
- .uix-table--no-zebra tbody tr, .uix-table--no-zebra tbody tr:nth-child(even) { background: var(--uix-row); }
951
- .uix-table tbody tr[data-pinned] { background: var(--uix-row-pinned-bg); }
952
- .uix-table tbody tr[aria-selected="true"] { background: var(--uix-row-selected-bg); }
953
- .uix-table tbody tr:hover { background: var(--uix-bg-hover); }
954
- .uix-table[data-density="compact"] td, .uix-table--compact td { height: var(--uix-row-h-compact); }
955
- .uix-table[data-density="comfortable"] td { height: var(--uix-row-h-comfortable); }
956
-
957
- .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); }
958
- .uix-table tbody tr:hover .uix-table__pin, .uix-table__pin[data-on] { opacity: 1; }
959
- .uix-table__pin:hover { background: var(--uix-bg-active); color: var(--uix-text); }
960
- .uix-table__pin[data-on] { color: var(--uix-accent); }
961
- .uix-table__pin svg { width: 15px; height: 15px; }
962
- .uix-table__pin[data-on] svg { fill: currentColor; }
963
-
964
- /* frozen first column (opt-in via .uix-table--pinned-col) */
965
- .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); }
966
- .uix-table--pinned-col thead th:first-child { z-index: var(--uix-z-sticky); background: var(--uix-surface); }
967
- .uix-table--pinned-col tbody tr td:first-child { background: var(--uix-row); }
968
- .uix-table--pinned-col tbody tr:nth-child(even) td:first-child { background: var(--uix-row-alt); }
969
- .uix-table--pinned-col.uix-table--no-zebra tbody tr td:first-child,
970
- .uix-table--pinned-col.uix-table--no-zebra tbody tr:nth-child(even) td:first-child { background: var(--uix-row); }
971
- .uix-table--pinned-col tbody tr[data-pinned] td:first-child { background: var(--uix-row-pinned-bg); }
972
- .uix-table--pinned-col tbody tr[aria-selected="true"] td:first-child { background: var(--uix-row-selected-bg); }
973
- .uix-table--pinned-col tbody tr:hover td:first-child { background: var(--uix-bg-hover); }
974
-
975
- /* ── column sizing + cell behaviour (a shared vocabulary, not per-app px) ──────── */
976
- .uix-table--fixed { table-layout: fixed; width: 100%; }
977
- .uix-col--w-xs { width: var(--uix-col-w-xs); }
978
- .uix-col--w-sm { width: var(--uix-col-w-sm); }
979
- .uix-col--w-md { width: var(--uix-col-w-md); }
980
- .uix-col--w-lg { width: var(--uix-col-w-lg); }
981
- .uix-col--w-xl { width: var(--uix-col-w-xl); }
982
- .uix-col--flex,
983
- .uix-col--primary { width: auto; min-width: var(--uix-col-title-min); }
984
- .uix-col--truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
985
- .uix-col--wrap { white-space: normal; overflow-wrap: anywhere; }
986
- .uix-col--num { font-variant-numeric: tabular-nums; }
987
- .uix-table th.uix-col--num, .uix-table td.uix-col--num { text-align: right; }
988
-
989
- /* ── cell content vocabulary — a fixed set of renderers keeps tables consistent ── */
990
- .uix-cell-strong { font-weight: 600; }
991
- .uix-cell-sub { display: block; font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
992
- .uix-cell-mono { font-family: var(--uix-font-mono); font-size: var(--uix-text-meta); }
993
-
994
- /* ── id cell — the canonical row click-through (row → peek, ↗ → full record) ───── */
995
- .uix-id-cell__btn {
996
- border: 0; background: transparent; cursor: pointer; padding: 0;
997
- color: var(--uix-text); font: inherit;
998
- display: inline-flex; align-items: center; gap: var(--uix-space-1); white-space: nowrap;
999
- }
1000
- .uix-id-cell__btn:hover { color: var(--uix-accent); }
1001
- .uix-id-cell__btn:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; border-radius: var(--uix-radius-xs); }
1002
- .uix-id-cell__arrow {
1003
- width: var(--uix-icon-sm); height: var(--uix-icon-sm); flex-shrink: 0; color: var(--uix-text-muted);
1004
- opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
1005
- }
1006
- .uix-table tbody tr:hover .uix-id-cell__arrow { opacity: 1; }
1007
-
1008
- /* ── selection column + select-all ────────────────────────────────────────────── */
1009
- .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; }
1010
-
1011
- /* contextual bulk-action bar — appears when >=1 row is selected */
1012
- .uix-bulkbar {
1013
- display: flex; align-items: center; gap: var(--uix-space-3);
1014
- padding: var(--uix-space-2) var(--uix-space-3); margin-bottom: var(--uix-space-3);
1015
- border: 1px solid var(--uix-accent); border-radius: var(--uix-radius-md);
1016
- background: var(--uix-brand-muted); color: var(--uix-text);
1017
- animation: uix-bulkbar-in var(--uix-dur) var(--uix-ease-out);
1018
- }
1019
- .uix-bulkbar[hidden] { display: none; }
1020
- .uix-bulkbar__count { font-size: var(--uix-text-meta); font-weight: 600; color: var(--uix-accent); font-variant-numeric: tabular-nums; }
1021
- .uix-bulkbar__spacer { flex: 1; }
1022
- @keyframes uix-bulkbar-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
1023
- @media (prefers-reduced-motion: reduce) { .uix-bulkbar { animation: none; } }
1024
-
1025
- /* ── row hover actions + kebab ─────────────────────────────────────────────────── */
1026
- .uix-table__actions { width: 84px; text-align: right; white-space: nowrap; }
1027
- .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); }
1028
- .uix-rowact svg { width: 16px; height: 16px; display: block; }
1029
- .uix-table tbody tr:hover .uix-rowact, .uix-rowact:focus-visible, .uix-rowact[aria-expanded="true"] { opacity: 1; }
1030
- .uix-rowact:hover { background: var(--uix-bg-active); color: var(--uix-text); }
1031
-
1032
- /* ── expandable inline row ─────────────────────────────────────────────────────── */
1033
- .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; }
1034
- .uix-table__expand svg { width: 16px; height: 16px; transition: transform var(--uix-dur-fast) var(--uix-ease-out); }
1035
- .uix-table__expand[aria-expanded="true"] svg { transform: rotate(90deg); }
1036
- .uix-table__expand:hover { background: var(--uix-bg-active); color: var(--uix-text); }
1037
- tr.uix-table__detail > td { background: var(--uix-bg-subtle); padding: 0 var(--uix-space-4); }
1038
- .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); }
1039
- .uix-kv { font-size: var(--uix-text-meta); }
1040
- .uix-kv__k { color: var(--uix-text-muted); margin-bottom: var(--uix-space-1); }
1041
- .uix-kv__v { color: var(--uix-text); }
1042
- @media (prefers-reduced-motion: reduce) { .uix-table__expand svg { transition: none; } }
1043
-
1044
- /* ── inline cell edit ──────────────────────────────────────────────────────────── */
1045
- .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); }
1046
- .uix-cell-edit:hover { background: var(--uix-bg-active); }
1047
- .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); }
1048
- .uix-table tbody tr:hover .uix-cell-edit__pencil { opacity: 1; }
1049
- .uix-cell-edit[data-editing] { background: var(--uix-surface); box-shadow: 0 0 0 2px var(--uix-ring); cursor: default; }
1050
- .uix-cell-edit__ok { color: var(--uix-success); width: 14px; height: 14px; opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
1051
- .uix-cell-edit[data-saved] .uix-cell-edit__ok { opacity: 1; }
1052
- .uix-cell-edit input, .uix-cell-edit select { border: 0; background: transparent; font: inherit; color: inherit; outline: none; }
1053
-
1054
- /* ── column resize grip (drag the header's right edge) ─────────────────────────── */
1055
- .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; }
1056
- .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); }
1057
- .uix-table thead th:hover .uix-table__resize::after, .uix-table__resize[data-drag]::after { background: var(--uix-accent); }
1058
-
1059
- /* ── search match highlight ────────────────────────────────────────────────────── */
1060
- .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); }
1061
-
1062
- /* ── responsive ladder — priority-column drop, then card transform ─────────────── */
1063
- .uix-table--priority th[data-priority="low"], .uix-table--priority td[data-priority="low"] { display: none; }
1064
- .uix-table--priority-mid th[data-priority="low"], .uix-table--priority-mid td[data-priority="low"],
1065
- .uix-table--priority-mid th[data-priority="mid"], .uix-table--priority-mid td[data-priority="mid"] { display: none; }
1066
-
1067
- .uix-table--cards { display: block; }
1068
- .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; }
1069
- .uix-table--cards tbody, .uix-table--cards tr, .uix-table--cards td { display: block; width: auto; }
1070
- .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); }
1071
- .uix-table--cards tbody tr[aria-selected="true"] { box-shadow: 0 0 0 2px var(--uix-accent); }
1072
- .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; }
1073
- .uix-table--cards td:last-child { border-bottom: 0; }
1074
- .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; }
1075
- .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); }
1076
- .uix-table--cards td[data-col="id"]::before { display: none; }
1077
- .uix-table--cards td[data-col="select"], .uix-table--cards td[data-col="actions"], .uix-table--cards td[data-col="expand"] { display: none; }
1078
-
1079
- /* ── compare view — two records field-by-field on a narrow screen ──────────────── */
1080
- .uix-compare { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); overflow: hidden; font-size: var(--uix-text-meta); }
1081
- .uix-compare__head, .uix-compare__row { display: grid; grid-template-columns: 1fr 1fr; }
1082
- .uix-compare__head > div, .uix-compare__cell { padding: var(--uix-space-3); background: var(--uix-surface); border-top: 1px solid var(--uix-border); }
1083
- .uix-compare__head > div { font-weight: 600; border-top: 0; }
1084
- .uix-compare__head > div + div, .uix-compare__cell + .uix-compare__cell { border-left: 1px solid var(--uix-border); }
1085
- .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); }
1086
- }
1087
- /* uix table toolbar + two-row filter bar (status / type). Depends only on --uix-* tokens. */
1088
- @layer uix.components {
1089
- .uix-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-2); margin-bottom: var(--uix-space-3); }
1090
- .uix-toolbar__spacer { flex: 1; }
1091
-
1092
- /* responsive: the status + type groups sit on ONE line when they fit, wrap to two only when cramped */
1093
- .uix-filterbar { display: flex; flex-wrap: wrap; gap: var(--uix-space-2) var(--uix-space-5); margin-bottom: var(--uix-space-3); }
1094
- .uix-filterrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-2); }
1095
- .uix-filterrow__label { font-size: var(--uix-text-meta); color: var(--uix-text-muted); width: 54px; flex: none; }
1096
-
1097
- .uix-chip {
1098
- 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);
1099
- border: 1px solid var(--uix-border); background: var(--uix-surface); color: var(--uix-text-hushed);
1100
- font: inherit; font-size: var(--uix-text-meta); cursor: pointer;
1101
- 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);
1102
- }
1103
- .uix-chip:hover { border-color: var(--uix-border-strong); color: var(--uix-text); }
1104
- .uix-chip[data-on] { background: var(--uix-brand-muted); border-color: var(--uix-accent); color: var(--uix-accent); }
1105
- .uix-chip__count { font-variant-numeric: tabular-nums; opacity: .7; }
1106
- }
1107
- /* uix table View menu — consolidates density / zebra / freeze / columns into one popover.
1108
- Reuses .uix-popover (surface + animation), .uix-segmented, .uix-switch. Depends only on --uix-* tokens. */
1109
- @layer uix.components {
1110
- .uix-view-menu { min-width: 248px; padding: var(--uix-space-2); }
1111
- .uix-view-menu__group { padding: var(--uix-space-2) var(--uix-space-2); }
1112
- .uix-view-menu__group + .uix-view-menu__group { border-top: 1px solid var(--uix-border); }
1113
- .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); }
1114
- .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; }
1115
- .uix-view-menu__row + .uix-view-menu__row { margin-top: var(--uix-space-3); }
1116
- .uix-view-menu .uix-segmented { display: flex; width: 100%; }
1117
- .uix-view-menu .uix-segmented__option { flex: 1; text-align: center; }
1118
- .uix-view-menu__cols { display: flex; flex-direction: column; gap: var(--uix-space-1); max-height: 180px; overflow: auto; }
1119
- .uix-view-menu__cols .uix-menu__item { font-size: var(--uix-text-meta); }
1120
- }
1121
- /* uix list + list-item — depends only on --uix-* tokens. */
1122
- @layer uix.components {
1123
- .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); }
1124
- .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); }
1125
- .uix-list__item:last-child { border-bottom: 0; }
1126
- .uix-list__item:hover { background: var(--uix-bg-hover); }
1127
- .uix-list__title { font-weight: 500; }
1128
- .uix-list__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
1129
- .uix-list__trail { margin-left: auto; display: flex; align-items: center; gap: var(--uix-space-2); }
1130
- }
1131
- /* uix description / key-value list — depends only on --uix-* tokens. */
1132
- @layer uix.components {
1133
- .uix-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--uix-space-3) var(--uix-space-6); }
1134
- .uix-dl dt { color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
1135
- .uix-dl dd { color: var(--uix-text); font-size: var(--uix-text-body); margin: 0; }
1136
- }
1137
- /* uix typography utilities — class-based application of the --uix-text-* scale.
1138
- A `<span class="uix-text-h3">` reads identically to an `<h3>`; consumers reach
1139
- for these instead of re-deriving the scale inline. (House products migrating
1140
- off bespoke `type-*` classes map 1:1 onto these — same sizes/leading/weights.)
1141
- Depends only on --uix-* tokens. */
1142
- @layer uix.components {
1143
- .uix-text-display {
1144
- font-size: var(--uix-text-display); line-height: var(--uix-leading-display);
1145
- font-weight: 400; letter-spacing: var(--uix-tracking-tight); color: var(--uix-text);
1146
- }
1147
- .uix-text-h1 {
1148
- font-size: var(--uix-text-display); line-height: var(--uix-leading-display);
1149
- font-weight: 400; letter-spacing: var(--uix-tracking-tight); color: var(--uix-text);
1150
- }
1151
- .uix-text-h2 {
1152
- font-size: var(--uix-text-h2); line-height: var(--uix-leading-h2);
1153
- font-weight: 400; letter-spacing: -0.01em; color: var(--uix-text);
1154
- }
1155
- .uix-text-h3 {
1156
- font-size: var(--uix-text-h3); line-height: var(--uix-leading-h3);
1157
- font-weight: 700; color: var(--uix-text);
1158
- }
1159
- .uix-text-body {
1160
- font-size: var(--uix-text-body); line-height: var(--uix-leading-body);
1161
- font-weight: 400; color: var(--uix-text);
1162
- }
1163
- .uix-text-body-hushed {
1164
- font-size: var(--uix-text-body); line-height: var(--uix-leading-body);
1165
- font-weight: 400; color: var(--uix-text-hushed);
1166
- }
1167
- .uix-text-meta {
1168
- font-size: var(--uix-text-meta); line-height: var(--uix-leading-meta);
1169
- font-weight: 400; color: var(--uix-text-hushed);
1170
- }
1171
- .uix-text-eyebrow {
1172
- font-size: var(--uix-text-eyebrow); line-height: var(--uix-leading-eyebrow);
1173
- font-weight: 700; letter-spacing: var(--uix-tracking-eyebrow);
1174
- text-transform: uppercase; color: var(--uix-text-hushed);
1175
- }
1176
- .uix-text-data-hero {
1177
- font-size: var(--uix-text-data-hero); line-height: 1.1;
1178
- font-weight: 400; letter-spacing: -0.01em; color: var(--uix-text);
1179
- font-variant-numeric: tabular-nums;
1180
- }
1181
- }
1182
- /* uix avatar / avatar-group / user-chip — depends only on --uix-* tokens. */
1183
- @layer uix.components {
1184
- .uix-avatar {
1185
- width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--uix-bg-active); color: var(--uix-text);
1186
- display: inline-flex; align-items: center; justify-content: center; font-size: var(--uix-text-meta); font-weight: 600;
1187
- line-height: 1; overflow: hidden; position: relative;
1188
- }
1189
- .uix-avatar img { width: 100%; height: 100%; object-fit: cover; }
1190
- .uix-avatar--sm { width: 24px; height: 24px; font-size: var(--uix-text-eyebrow); }
1191
- .uix-avatar--lg { width: 44px; height: 44px; }
1192
- .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); }
1193
- .uix-avatar-group { display: inline-flex; }
1194
- .uix-avatar-group .uix-avatar { box-shadow: 0 0 0 2px var(--uix-surface); margin-left: calc(-1 * var(--uix-space-2)); }
1195
- .uix-avatar-group .uix-avatar:first-child { margin-left: 0; }
1196
- .uix-user-chip { display: inline-flex; align-items: center; gap: var(--uix-space-2); }
1197
- .uix-user-chip__name { font-size: var(--uix-text-body); font-weight: 500; }
1198
- .uix-user-chip__sub { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
1199
-
1200
- /* editable avatar — hover/focus overlay for "change photo"; empty = upload placeholder */
1201
- .uix-avatar--editable { cursor: pointer; }
1202
- .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); }
1203
- .uix-avatar__edit svg { width: 45%; height: 45%; }
1204
- .uix-avatar--editable:hover .uix-avatar__edit, .uix-avatar--editable:focus-visible .uix-avatar__edit { opacity: 1; }
1205
- .uix-avatar--empty { background: var(--uix-bg-subtle); border: 1.5px dashed var(--uix-border-strong); color: var(--uix-text-muted); }
1206
- }
1207
- /* uix tooltip. Two flavours, both depend only on --uix-* tokens:
1208
- • .uix-tooltip__bubble — the React <Tooltip>: renders in the top layer via the
1209
- Popover API, so it escapes any overflow:hidden/scroll ancestor (UIX-FIX-02).
1210
- JS sets position/left/top; CSS owns appearance + the fade.
1211
- • [data-uix-tip] — the legacy CSS-only tooltip, kept for back-compat. It is
1212
- position:absolute and so is clipped by an overflow ancestor; prefer <Tooltip>. */
1213
- @layer uix.components {
1214
- .uix-tooltip { display: inline-flex; }
1215
-
1216
- .uix-tooltip__bubble {
1217
- position: fixed; margin: 0; inset: auto; border: 0;
1218
- width: max-content; max-width: 16rem;
1219
- background: var(--uix-text); color: var(--uix-bg-app);
1220
- font-size: var(--uix-text-meta); font-weight: 500; line-height: 1.4;
1221
- padding: var(--uix-space-2) var(--uix-space-3); border-radius: var(--uix-radius-sm);
1222
- box-shadow: var(--uix-shadow-popover); white-space: normal; pointer-events: none;
1223
- opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
1224
- }
1225
- .uix-tooltip__bubble:popover-open { opacity: 1; }
1226
- @starting-style { .uix-tooltip__bubble:popover-open { opacity: 0; } }
1227
-
1228
- /* legacy CSS-only tooltip — clipped by overflow ancestors; superseded by .uix-tooltip__bubble */
1229
- [data-uix-tip] { position: relative; }
1230
- [data-uix-tip]::after {
1231
- content: attr(data-uix-tip); position: absolute; bottom: calc(100% + 6px); left: 50%;
1232
- transform: translateX(-50%) translateY(var(--uix-lift));
1233
- background: var(--uix-text); color: var(--uix-bg-app); font-size: var(--uix-text-meta); font-weight: 500;
1234
- padding: var(--uix-space-2) var(--uix-space-3); border-radius: var(--uix-radius-sm); white-space: nowrap; box-shadow: var(--uix-shadow-popover);
1235
- opacity: 0; pointer-events: none; z-index: var(--uix-z-tooltip);
1236
- transition: opacity var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-out);
1237
- }
1238
- [data-uix-tip]:hover::after, [data-uix-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
1239
- /* when JS upgrades [data-uix-tip] to a top-layer bubble, drop the clipped CSS-only one */
1240
- .uix-has-js-tip [data-uix-tip]::after { content: none; }
1241
- }
1242
- /* uix progress bar + ring — depends only on --uix-* tokens. */
1243
- @layer uix.components {
1244
- .uix-progress { height: 8px; background: var(--uix-bg-active); border-radius: var(--uix-radius-pill); overflow: hidden; }
1245
- .uix-progress__bar { height: 100%; background: var(--uix-accent); border-radius: inherit; transition: width var(--uix-dur) var(--uix-ease-out); }
1246
- .uix-progress--indeterminate { position: relative; }
1247
- .uix-progress--indeterminate .uix-progress__bar { width: 40%; animation: uix-progress-slide 1.2s var(--uix-ease-in-out) infinite; }
1248
- @keyframes uix-progress-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(280%); } }
1249
-
1250
- .uix-ring { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
1251
- background: conic-gradient(var(--uix-accent) calc(var(--val, .66) * 360deg), var(--uix-bg-active) 0); }
1252
- .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; }
1253
- }
1254
- /* uix meter / utilization bar (threshold tones) — depends only on --uix-* tokens. */
1255
- @layer uix.components {
1256
- .uix-meter { height: 8px; background: var(--uix-bg-active); border-radius: var(--uix-radius-pill); overflow: hidden; }
1257
- .uix-meter__fill { height: 100%; border-radius: inherit; background: var(--uix-success); transition: width var(--uix-dur) var(--uix-ease-out); }
1258
- .uix-meter__fill[data-tone="warning"] { background: var(--uix-warning); }
1259
- .uix-meter__fill[data-tone="danger"] { background: var(--uix-danger); }
1260
- .uix-meter__fill[data-tone="attention"] { background: var(--uix-attention); }
1261
- .uix-meter__fill[data-tone="overdue"] { background: var(--uix-overdue); }
1262
- }
1263
- /* uix timeline / activity feed — depends only on --uix-* tokens. */
1264
- @layer uix.components {
1265
- .uix-timeline { display: flex; flex-direction: column; }
1266
- .uix-timeline__item { display: grid; grid-template-columns: 24px 1fr; gap: var(--uix-space-3); }
1267
- .uix-timeline__rail { display: flex; flex-direction: column; align-items: center; }
1268
- .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); }
1269
- .uix-timeline__line { width: 1px; flex: 1; background: var(--uix-border); margin: var(--uix-space-1) 0; }
1270
- .uix-timeline__item:last-child .uix-timeline__line { display: none; }
1271
- .uix-timeline__body { padding-bottom: var(--uix-space-5); }
1272
- .uix-timeline__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
1273
- }
1274
- /* uix tree view — WAI-ARIA tree (role=tree/treeitem/group). Depends only on --uix-* tokens.
1275
- ARIA (aria-expanded / aria-selected / aria-level) lives on the treeitem <li>, so the chevron,
1276
- selection, and collapse styling all key off the item, not the row (UIX-FIX-04). */
1277
- @layer uix.components {
1278
- .uix-tree, .uix-tree ul { list-style: none; margin: 0; padding: 0; }
1279
- .uix-tree__group { padding-left: var(--uix-space-5); }
1280
- .uix-tree__item { outline: none; } /* the focus ring is drawn on the row, below */
1281
- .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); }
1282
- .uix-tree__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1283
- .uix-tree__item > .uix-tree__row:hover { background: var(--uix-bg-hover); }
1284
- .uix-tree__item[aria-selected="true"] > .uix-tree__row { background: var(--uix-bg-active); }
1285
- .uix-tree__item:focus-visible > .uix-tree__row { outline: 2px solid var(--uix-ring); outline-offset: -2px; }
1286
- .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); }
1287
- .uix-tree__toggle svg { width: 14px; height: 14px; }
1288
- .uix-tree__item[aria-expanded="false"] > .uix-tree__row .uix-tree__toggle { transform: rotate(-90deg); }
1289
- .uix-tree__item[aria-expanded="false"] > .uix-tree__group { display: none; }
1290
- }
1291
- /* uix calendar (shared by date pickers) — depends only on --uix-* tokens. */
1292
- @layer uix.components {
1293
- .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); }
1294
- .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); }
1295
- .uix-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--uix-space-1); }
1296
- .uix-calendar__dow { text-align: center; font-size: var(--uix-text-eyebrow); color: var(--uix-text-muted); padding: var(--uix-space-1) 0; }
1297
- .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; }
1298
- .uix-calendar__day:hover { background: var(--uix-bg-hover); }
1299
- .uix-calendar__day[data-muted] { color: var(--uix-text-muted); opacity: .45; }
1300
- .uix-calendar__day[data-today] { box-shadow: inset 0 0 0 1px var(--uix-border-strong); }
1301
- .uix-calendar__day[data-range] { background: var(--uix-brand-muted); border-radius: 0; }
1302
- .uix-calendar__day[aria-selected="true"] { background: var(--uix-accent); color: var(--uix-accent-fg); }
1303
- }
1304
- /* uix states — empty + skeleton loaders. Depends only on --uix-* tokens. */
1305
- @layer uix.components {
1306
- .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); }
1307
- .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); }
1308
- .uix-empty__icon svg { width: 22px; height: 22px; }
1309
- .uix-empty__title { font-size: var(--uix-text-h3); font-weight: 600; color: var(--uix-text); }
1310
- /* error tone — ErrorState reuses .uix-empty with a danger-toned icon */
1311
- .uix-empty__icon--danger { background: var(--uix-danger-bg); color: var(--uix-danger); }
1312
-
1313
- .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); }
1314
- .uix-skeleton--text { height: 12px; border-radius: var(--uix-radius-pill); }
1315
- .uix-skeleton--circle { border-radius: 50%; }
1316
- }
1317
- /* uix chart container + legend — palette + framing only; pair sample SVGs / a chart lib using --uix-chart-*. */
1318
- @layer uix.components {
1319
- .uix-chart { background: var(--uix-surface); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); padding: var(--uix-space-5); }
1320
- .uix-chart__title { font-size: var(--uix-text-h3); font-weight: 600; }
1321
- .uix-chart__subtitle { font-size: var(--uix-text-meta); color: var(--uix-text-muted); margin-bottom: var(--uix-space-4); }
1322
- .uix-legend { display: flex; flex-wrap: wrap; gap: var(--uix-space-3); margin-top: var(--uix-space-3); }
1323
- .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); }
1324
- .uix-legend__swatch { width: 10px; height: 10px; border-radius: var(--uix-radius-xs); flex: none; }
1325
- }
1326
- /* uix alert / inline banner — tone API. Depends only on --uix-* tokens. */
1327
- @layer uix.components {
1328
- .uix-alert {
1329
- display: flex; gap: var(--uix-space-3); padding: var(--uix-space-3) var(--uix-space-4); border-radius: var(--uix-radius-md);
1330
- border: 1px solid var(--tone-border, var(--uix-border)); background: var(--tone-bg, var(--uix-bg-subtle));
1331
- color: var(--uix-text); font-size: var(--uix-text-body);
1332
- }
1333
- .uix-alert__icon { color: var(--tone-fg, var(--uix-text)); flex: none; }
1334
- .uix-alert__icon svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
1335
- .uix-alert__title { font-weight: 600; margin-bottom: var(--uix-space-1); }
1336
- .uix-alert__body { font-size: var(--uix-text-meta); color: var(--uix-text-hushed); }
1337
- .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); }
1338
- .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); }
1339
- .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); }
1340
- .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); }
1341
- }
1342
- /* uix toast / notification — depends only on --uix-* tokens. JS appends to .uix-toaster. */
1343
- @layer uix.components {
1344
- .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); }
1345
- .uix-toast {
1346
- 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);
1347
- background: var(--uix-surface-2); border: 1px solid var(--uix-border); box-shadow: var(--uix-shadow-popover);
1348
- animation: uix-slide-in-right var(--uix-dur-slow) var(--uix-ease-out);
1349
- }
1350
- .uix-toast[data-leaving] { animation: uix-toast-out var(--uix-dur) var(--uix-ease-in) forwards; }
1351
- @keyframes uix-toast-out { to { opacity: 0; transform: translateX(16px); } }
1352
- .uix-toast__icon { flex: none; margin-top: 1px; }
1353
- .uix-toast__icon svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
1354
- .uix-toast__body { flex: 1; }
1355
- .uix-toast__title { font-weight: 600; font-size: var(--uix-text-body); }
1356
- .uix-toast__msg { font-size: var(--uix-text-meta); color: var(--uix-text-muted); margin-top: var(--uix-space-1); }
1357
- .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); }
1358
- .uix-toast__close:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
1359
- .uix-toast--success .uix-toast__icon { color: var(--uix-success); }
1360
- .uix-toast--danger .uix-toast__icon { color: var(--uix-danger); }
1361
- .uix-toast--info .uix-toast__icon { color: var(--uix-info); }
1362
- }
1363
- /* uix modal / dialog — native <dialog>, animated enter/exit via @starting-style + allow-discrete. */
1364
- @layer uix.components {
1365
- .uix-dialog {
1366
- margin: auto; width: 100%; max-width: min(520px, 92vw); padding: 0; color: var(--uix-text);
1367
- border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg);
1368
- background: var(--uix-surface-2); box-shadow: var(--uix-shadow-overlay);
1369
- opacity: 0; transform: translateY(8px) scale(.98);
1370
- transition: opacity var(--uix-dur-slow) var(--uix-ease-out), transform var(--uix-dur-slow) var(--uix-ease-out),
1371
- overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
1372
- /* Author display values for both states required for the fade-in to animate: the allow-discrete
1373
- `display` transition only engages with author values, which also lets @starting-style fire.
1374
- With only the UA dialog display, the modal stays at opacity:0. Closed = none; open = block. */
1375
- display: none;
1376
- }
1377
- .uix-dialog[open] { opacity: 1; transform: none; display: block; }
1378
- @starting-style { .uix-dialog[open] { opacity: 0; transform: translateY(8px) scale(.98); } }
1379
- .uix-dialog::backdrop {
1380
- background: var(--uix-scrim); opacity: 0;
1381
- transition: opacity var(--uix-dur-slow) var(--uix-ease-out), overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
1382
- }
1383
- .uix-dialog[open]::backdrop { opacity: 1; }
1384
- @starting-style { .uix-dialog[open]::backdrop { opacity: 0; } }
1385
-
1386
- .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); }
1387
- .uix-dialog__title { font-size: var(--uix-text-h3); font-weight: 600; }
1388
- .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); }
1389
- .uix-dialog__close:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
1390
- .uix-dialog__close svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
1391
- .uix-dialog__body { padding: var(--uix-space-5); color: var(--uix-text-hushed); }
1392
- .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); }
1393
- }
1394
- /* uix drawer / side sheet — native <dialog> sliding from the right edge. */
1395
- @layer uix.components {
1396
- .uix-drawer {
1397
- margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(420px, 100vw); padding: 0; color: var(--uix-text);
1398
- border: 0; border-left: 1px solid var(--uix-border); border-radius: 0;
1399
- background: var(--uix-surface); box-shadow: var(--uix-shadow-overlay);
1400
- transform: translateX(100%);
1401
- transition: transform var(--uix-dur-slow) var(--uix-ease-out),
1402
- overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
1403
- /* Author display values for both states required for the slide-in (see peek.css). Closed = none. */
1404
- display: none;
1405
- }
1406
- .uix-drawer[open] { transform: none; display: flex; flex-direction: column; }
1407
- @starting-style { .uix-drawer[open] { transform: translateX(100%); } }
1408
- .uix-drawer::backdrop {
1409
- background: var(--uix-scrim); opacity: 0;
1410
- transition: opacity var(--uix-dur-slow) var(--uix-ease-out), overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
1411
- }
1412
- .uix-drawer[open]::backdrop { opacity: 1; }
1413
- @starting-style { .uix-drawer[open]::backdrop { opacity: 0; } }
1414
- .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); }
1415
- .uix-drawer__body { padding: var(--uix-space-5); overflow-y: auto; flex: 1; }
1416
- .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); }
1417
- }
1418
- /* uix side-peek drawer (the §5.8 peek pattern, reused by table rows + sidebar items).
1419
- Native <dialog>, slides from the right; keyboard ↑/↓ navigates records (app.js). */
1420
- @layer uix.components {
1421
- .uix-peek {
1422
- margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: var(--uix-peek-w); padding: 0; color: var(--uix-text);
1423
- border: 0; border-left: 1px solid var(--uix-border); border-radius: 0;
1424
- background: var(--uix-surface); box-shadow: var(--uix-shadow-overlay);
1425
- transform: translateX(100%);
1426
- transition: transform var(--uix-dur-slow) var(--uix-ease-out),
1427
- overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
1428
- /* Author display values for BOTH states are required for the slide-in to animate: the
1429
- allow-discrete `display` transition only engages with author values, and that gating also
1430
- lets the @starting-style entrance fire. With only the UA dialog display, the panel stays
1431
- parked at translateX(100%). Closed = none; open = flex. */
1432
- display: none;
1433
- }
1434
- .uix-peek[open] { transform: none; display: flex; flex-direction: column; }
1435
- @starting-style { .uix-peek[open] { transform: translateX(100%); } }
1436
- .uix-peek::backdrop {
1437
- background: var(--uix-scrim); opacity: 0;
1438
- transition: opacity var(--uix-dur-slow) var(--uix-ease-out), overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
1439
- }
1440
- .uix-peek[open]::backdrop { opacity: 1; }
1441
- @starting-style { .uix-peek[open]::backdrop { opacity: 0; } }
1442
-
1443
- .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); }
1444
- .uix-peek__nav { display: inline-flex; gap: var(--uix-space-1); }
1445
- .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; }
1446
- .uix-peek__navbtn:hover { background: var(--uix-bg-hover); }
1447
- .uix-peek__title { font-size: var(--uix-text-h3); font-weight: 600; }
1448
- .uix-peek__title a { color: var(--uix-link); }
1449
- .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); }
1450
- .uix-peek__close:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
1451
- .uix-peek__body { padding: var(--uix-space-5); overflow-y: auto; flex: 1; }
1452
- .uix-peek__hint { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
1453
- .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); }
1454
-
1455
- /* a table wired to open the peek (app.js sets data-uix-rowpeek): its rows read as clickable,
1456
- since clicking a ticket row is the queue's primary way to open the side-peek. */
1457
- [data-uix-rowpeek] tbody tr { cursor: pointer; }
1458
- [data-uix-rowpeek] tbody tr:hover td { background: var(--uix-bg-hover); }
1459
-
1460
- /* Column sizing + the id-cell click-through pattern now live in table.css (one story for
1461
- "table cells"). Size columns with .uix-col--w-* / .uix-col--flex + .uix-col--truncate
1462
- instead of the old [data-uix-table-v2] :nth-child(2) title cap. */
1463
- }
1464
- /* uix popover — generic anchored surface via the native Popover API; animated with @starting-style. */
1465
- @layer uix.components {
1466
- .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); }
1467
- [popover].uix-popover {
1468
- opacity: 0; transform: translateY(calc(-1 * var(--uix-lift)));
1469
- transition: opacity var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-out),
1470
- overlay var(--uix-dur-fast) allow-discrete, display var(--uix-dur-fast) allow-discrete;
1471
- }
1472
- [popover].uix-popover:popover-open { opacity: 1; transform: none; }
1473
- @starting-style { [popover].uix-popover:popover-open { opacity: 0; transform: translateY(calc(-1 * var(--uix-lift))); } }
1474
- }
1475
- /* uix spinner + progress overlay — depends only on --uix-* tokens. */
1476
- @layer uix.components {
1477
- .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; }
1478
- .uix-spinner--accent { border-color: var(--uix-accent); border-right-color: transparent; }
1479
- .uix-spinner--lg { width: 32px; height: 32px; border-width: 3px; }
1480
- .uix-overlay-progress {
1481
- position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit;
1482
- background: color-mix(in srgb, var(--uix-bg-app) 60%, transparent); backdrop-filter: blur(2px);
1483
- }
1484
- }
1485
- /* uix detail layout — two-column record (main + side meta). Depends only on --uix-* tokens. */
1486
- @layer uix.components {
1487
- .uix-detail { display: grid; grid-template-columns: 1fr 280px; gap: var(--uix-space-5); align-items: start; }
1488
- .uix-detail__main { min-width: 0; display: flex; flex-direction: column; gap: var(--uix-space-4); }
1489
- .uix-detail__side { display: flex; flex-direction: column; gap: var(--uix-space-4); }
1490
- @media (max-width: 820px) { .uix-detail { grid-template-columns: 1fr; } }
1491
- }
1492
- /* uix comments thread + composer (@mention) — depends only on --uix-* tokens. */
1493
- @layer uix.components {
1494
- .uix-comments { display: flex; flex-direction: column; gap: var(--uix-space-4); }
1495
- .uix-comment { display: grid; grid-template-columns: 32px 1fr; gap: var(--uix-space-3); }
1496
- .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); }
1497
- .uix-comment__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); margin-bottom: var(--uix-space-1); }
1498
- .uix-comment__author { font-weight: 600; color: var(--uix-text); }
1499
- .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; }
1500
- .uix-composer { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); }
1501
- .uix-composer:focus-within { border-color: var(--uix-ring); box-shadow: 0 0 0 3px var(--uix-brand-muted); }
1502
- .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; }
1503
- .uix-composer textarea:focus { outline: none; }
1504
- .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); }
1505
- /* Block so the thumbnail drops onto its own line below the comment text (not inline with it). */
1506
- .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; }
1507
- .uix-comment__image img { display: block; width: 100%; height: auto; }
1508
- }
1509
- /* uix emoji reactions — pills with counts + an add-reaction picker popover. Depends only on --uix-* tokens. */
1510
- @layer uix.components {
1511
- .uix-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-2); margin-top: var(--uix-space-2); }
1512
- .uix-reaction {
1513
- display: inline-flex; align-items: center; gap: var(--uix-space-2); padding: 1px var(--uix-space-2); line-height: 1.7;
1514
- border-radius: var(--uix-radius-pill); border: 1px solid var(--uix-border); background: var(--uix-surface);
1515
- color: var(--uix-text-hushed); font: inherit; font-size: var(--uix-text-meta); cursor: pointer;
1516
- }
1517
- .uix-reaction:hover { border-color: var(--uix-border-strong); }
1518
- .uix-reaction[data-mine] { background: var(--uix-brand-muted); border-color: var(--uix-accent); color: var(--uix-accent); }
1519
- .uix-reaction__count { font-variant-numeric: tabular-nums; }
1520
- .uix-reaction-add {
1521
- display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 24px;
1522
- border-radius: var(--uix-radius-pill); border: 1px dashed var(--uix-border-strong); background: transparent;
1523
- color: var(--uix-text-muted); cursor: pointer;
1524
- }
1525
- .uix-reaction-add:hover { color: var(--uix-text); border-color: var(--uix-text-muted); }
1526
- .uix-reaction-add svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
1527
- .uix-emoji-picker { display: flex; flex-wrap: wrap; gap: var(--uix-space-1); width: 196px; }
1528
- .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; }
1529
- .uix-emoji-picker__btn:hover { background: var(--uix-bg-hover); }
1530
- }
1531
- /* uix media / device-asset card — image (or icon placeholder) + name + meta. Depends only on --uix-* tokens. */
1532
- @layer uix.components {
1533
- .uix-media { display: flex; gap: var(--uix-space-3); align-items: center; }
1534
- .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; }
1535
- .uix-media__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
1536
- .uix-media__thumb svg { width: 28px; height: 28px; color: var(--uix-text-muted); }
1537
- .uix-media__name { font-weight: 600; }
1538
- .uix-media__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
1539
- }
1540
- /* uix image lightbox — native <dialog>, click a thumbnail to enlarge. Depends only on --uix-* tokens. */
1541
- @layer uix.components {
1542
- /* margin:auto centers the modal <dialog> in the viewport. Set explicitly (not
1543
- left to the UA default) so centering is robust regardless of any consumer
1544
- reset — base.css scopes its margin reset to typographic/form elements and
1545
- deliberately leaves <dialog> alone. Matches .uix-dialog. */
1546
- .uix-lightbox { margin: auto; border: 0; background: transparent; padding: 0; max-width: 92vw; max-height: 92vh; box-shadow: var(--uix-shadow-overlay); overflow: visible; }
1547
- /* A definite width is required: an SVG with a viewBox but no intrinsic width/height collapses to
1548
- 0×0 under width:auto, which then shrink-wraps the fit-content <dialog> to nothing (nothing shows
1549
- on open). min() keeps it within the viewport; height:auto preserves the aspect ratio. */
1550
- .uix-lightbox img { display: block; width: min(720px, 92vw); height: auto; max-height: 92vh; border-radius: var(--uix-radius-md); }
1551
- .uix-lightbox::backdrop { background: var(--uix-scrim-strong); }
1552
- }
1553
- /* uix prose content card + note callouts — for KB articles, descriptions, release notes. Depends only on --uix-* tokens. */
1554
- @layer uix.components {
1555
- .uix-prose { max-width: 66ch; color: var(--uix-text); }
1556
- .uix-prose > * + * { margin-top: var(--uix-space-3); }
1557
- .uix-prose h3 { font-size: var(--uix-text-h2); font-weight: 600; }
1558
- .uix-prose h4 { font-size: var(--uix-text-h3); font-weight: 600; margin-top: var(--uix-space-5); }
1559
- .uix-prose p { line-height: var(--uix-leading-body); color: var(--uix-text-hushed); }
1560
- .uix-prose a { color: var(--uix-link); }
1561
- .uix-prose ul, .uix-prose ol { padding-left: var(--uix-space-5); }
1562
- .uix-prose li + li { margin-top: var(--uix-space-1); }
1563
- .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); }
1564
- .uix-prose blockquote { border-left: 3px solid var(--uix-border-strong); padding-left: var(--uix-space-3); color: var(--uix-text-muted); }
1565
-
1566
- .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); }
1567
- .uix-note__icon { flex: none; }
1568
- .uix-note__icon svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
1569
- .uix-note__body { font-size: var(--uix-text-body); color: var(--uix-text); }
1570
- .uix-note__body > * + * { margin-top: var(--uix-space-2); }
1571
- .uix-note--info { background: var(--uix-info-bg); border-color: color-mix(in srgb, var(--uix-info) 30%, transparent); }
1572
- .uix-note--info .uix-note__icon { color: var(--uix-info); }
1573
- .uix-note--success { background: var(--uix-success-bg); border-color: color-mix(in srgb, var(--uix-success) 30%, transparent); }
1574
- .uix-note--success .uix-note__icon { color: var(--uix-success); }
1575
- .uix-note--warning { background: var(--uix-warning-bg); border-color: color-mix(in srgb, var(--uix-warning) 30%, transparent); }
1576
- .uix-note--warning .uix-note__icon { color: var(--uix-warning); }
1577
- .uix-note--danger { background: var(--uix-danger-bg); border-color: color-mix(in srgb, var(--uix-danger) 30%, transparent); }
1578
- .uix-note--danger .uix-note__icon { color: var(--uix-danger); }
1579
- }
1580
- /* uix kanban board / column — depends only on --uix-* tokens. */
1581
- @layer uix.components {
1582
- .uix-kanban { display: flex; gap: var(--uix-space-4); overflow-x: auto; padding-bottom: var(--uix-space-2); }
1583
- .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; }
1584
- .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); }
1585
- .uix-kanban__count { margin-left: auto; color: var(--uix-text-muted); font-weight: 500; }
1586
- .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; }
1587
- .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); }
1588
- .uix-kanban__card:hover { box-shadow: var(--uix-shadow-popover); }
1589
- @media (hover: hover) and (pointer: fine) { .uix-kanban__card:hover { transform: translateY(calc(-1 * var(--uix-lift))); } }
1590
- .uix-kanban__card:active { cursor: grabbing; }
1591
- .uix-kanban__card-title { font-weight: 500; font-size: var(--uix-text-body); margin-bottom: var(--uix-space-2); }
1592
- .uix-kanban__card-meta { display: flex; align-items: center; gap: var(--uix-space-2); }
1593
- }
1594
- /* uix inbox master-detail — depends only on --uix-* tokens. */
1595
- @layer uix.components {
1596
- .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; }
1597
- .uix-inbox__list { border-right: 1px solid var(--uix-border); overflow-y: auto; background: var(--uix-surface); }
1598
- .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; }
1599
- .uix-inbox__item:hover { background: var(--uix-bg-hover); }
1600
- .uix-inbox__item[aria-selected="true"] { background: linear-gradient(to right, var(--uix-accent) 3px, var(--uix-brand-muted) 3px); }
1601
- .uix-inbox__item[data-unread] .uix-inbox__subject { font-weight: 600; }
1602
- .uix-inbox__subject { font-size: var(--uix-text-body); }
1603
- .uix-inbox__preview { font-size: var(--uix-text-meta); color: var(--uix-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1604
- .uix-inbox__detail { overflow-y: auto; padding: var(--uix-space-5); background: var(--uix-bg-app); }
1605
- @media (max-width: 700px) { .uix-inbox { grid-template-columns: 1fr; } .uix-inbox__detail { display: none; } }
1606
- }
1607
- /* uix notification center — depends only on --uix-* tokens. */
1608
- @layer uix.components {
1609
- .uix-notifs { background: var(--uix-surface-2); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); overflow: hidden; }
1610
- .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; }
1611
- .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); }
1612
- .uix-notif:last-child { border-bottom: 0; }
1613
- .uix-notif[data-unread] { background: var(--uix-brand-muted); }
1614
- .uix-notif__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--uix-accent); margin-top: var(--uix-space-2); }
1615
- .uix-notif[data-unread] .uix-notif__dot { background: var(--uix-accent); }
1616
- .uix-notif:not([data-unread]) .uix-notif__dot { background: transparent; }
1617
- .uix-notif__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
1618
- /* on the unread brand-muted tint, muted meta dips below AA — hushed composites darker on the tint */
1619
- .uix-notif[data-unread] .uix-notif__meta { color: var(--uix-text-hushed); }
1620
- }
1621
- /* uix label / tag taxonomy — colored via --label-color (set to a --uix-chart-* token). */
1622
- @layer uix.components {
1623
- .uix-label {
1624
- display: inline-flex; align-items: center; gap: var(--uix-space-2); padding: 1px var(--uix-space-2); border-radius: var(--uix-radius-sm);
1625
- font-size: var(--uix-text-meta); font-weight: 500;
1626
- background: color-mix(in srgb, var(--label-color, var(--uix-accent)) 16%, transparent);
1627
- /* Pull the hue toward the theme foreground so the text clears WCAG AA on its own 16% tint.
1628
- Raw chart hues (esp. amber #F59E0B at 1.9:1) are tuned for fills, not text-on-tint; the dot
1629
- keeps the full hue. --uix-text flips per theme, so this darkens on light and lightens on dark. */
1630
- color: color-mix(in srgb, var(--label-color, var(--uix-accent)) 55%, var(--uix-text));
1631
- }
1632
- .uix-label__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--label-color, var(--uix-accent)); }
1633
- }
1634
- /* uix attachment list — depends only on --uix-* tokens. */
1635
- @layer uix.components {
1636
- .uix-attachments { display: flex; flex-direction: column; gap: var(--uix-space-2); }
1637
- .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); }
1638
- .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); }
1639
- .uix-attachment__icon svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
1640
- .uix-attachment__name { font-size: var(--uix-text-body); }
1641
- .uix-attachment__size { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
1642
- .uix-attachment__actions { margin-left: auto; }
1643
- }
1644
- /* uix deal / pipeline stage bar — depends only on --uix-* tokens. */
1645
- @layer uix.components {
1646
- .uix-pipeline { display: flex; gap: var(--uix-space-1); }
1647
- .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); }
1648
- .uix-pipeline__stage:first-child { border-radius: var(--uix-radius-pill) 0 0 var(--uix-radius-pill); }
1649
- .uix-pipeline__stage:last-child { border-radius: 0 var(--uix-radius-pill) var(--uix-radius-pill) 0; }
1650
- .uix-pipeline__stage[data-state="done"] { background: var(--uix-accent); color: var(--uix-accent-fg); }
1651
- .uix-pipeline__stage[data-state="active"] { background: var(--uix-brand-muted); color: var(--uix-link); font-weight: 600; }
1652
- }
1653
- /* uix flow — workflow & pipeline diagrams: boxed nodes + connectors.
1654
- Depends only on --uix-* tokens. Edges are decorative inline SVG (aria-hidden);
1655
- straight runs use pure-CSS connectors. Node state follows the tone-API pattern
1656
- (see status-pill.css): state --modifiers set only --tone-* vars, the base reads them. */
1657
- @layer uix.components {
1658
-
1659
- /* ============================================================ node */
1660
- .uix-node {
1661
- position: relative;
1662
- display: inline-grid; grid-template-columns: auto 1fr; align-items: center;
1663
- gap: var(--uix-space-3); min-width: 132px; width: max-content; max-width: 220px; padding: var(--uix-space-3) var(--uix-space-3);
1664
- background: var(--uix-surface);
1665
- border: 1px solid var(--tone-border, var(--uix-border-strong));
1666
- border-radius: var(--uix-radius-md);
1667
- box-shadow: var(--uix-shadow-sm);
1668
- color: var(--uix-text); font-size: var(--uix-text-body); text-align: left;
1669
- }
1670
- .uix-node__icon {
1671
- display: grid; place-items: center; width: 30px; height: 30px; flex: none;
1672
- border-radius: var(--uix-radius-sm);
1673
- background: var(--tone-bg, var(--uix-bg-subtle));
1674
- color: var(--tone-fg, var(--uix-text-muted));
1675
- }
1676
- .uix-node__icon svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
1677
- .uix-node__body { min-width: 0; }
1678
- .uix-node__title { font-weight: 500; line-height: 1.25; }
1679
- .uix-node__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
1680
- .uix-node__status {
1681
- display: inline-flex; align-items: center; gap: var(--uix-space-2); margin-top: var(--uix-space-1);
1682
- font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow);
1683
- text-transform: uppercase; color: var(--tone-fg, var(--uix-text-muted));
1684
- }
1685
- .uix-node__status::before {
1686
- content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%;
1687
- background: var(--tone-dot, var(--uix-text-muted));
1688
- }
1689
-
1690
- /* connection handles — decorative connection-point affordance */
1691
- .uix-node__handle {
1692
- position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%;
1693
- background: var(--uix-surface); border: 1.5px solid var(--uix-border-strong);
1694
- transform: translateY(-50%);
1695
- }
1696
- .uix-node__handle--in { left: -5px; }
1697
- .uix-node__handle--out { right: -5px; }
1698
-
1699
- /* ---- state modifiers: set tone vars only ---- */
1700
- .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); }
1701
- .uix-node--active { --tone-bg: var(--uix-brand-muted); --tone-fg: var(--uix-link); --tone-dot: var(--uix-accent); --tone-border: var(--uix-accent); }
1702
- .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); }
1703
- .uix-node--done { --tone-bg: var(--uix-success-bg); --tone-fg: var(--uix-success); --tone-dot: var(--uix-success); --tone-border: var(--uix-success); }
1704
- .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); }
1705
- /* active/running read as "current" via a soft halo in their own tone */
1706
- .uix-node--active, .uix-node--running { box-shadow: var(--uix-shadow-sm), 0 0 0 3px var(--tone-bg); }
1707
-
1708
- /* running node spins its icon */
1709
- .uix-node--running .uix-node__icon svg { animation: uix-flow-spin 1s linear infinite; }
1710
-
1711
- /* ---- decision / diamond ---- */
1712
- .uix-node--decision {
1713
- min-width: 0; width: 112px; height: 112px; padding: 0; overflow: visible;
1714
- /* reset the base node's `auto 1fr` columns to one full-width track, else the lone title is
1715
- trapped in the left `auto` column and place-items:center can't center it over the diamond. */
1716
- display: grid; grid-template-columns: 1fr; place-items: center; background: transparent; border: 0; box-shadow: none;
1717
- }
1718
- .uix-node--decision::before {
1719
- content: ""; position: absolute; left: 50%; top: 50%; width: 78px; height: 78px;
1720
- transform: translate(-50%, -50%) rotate(45deg);
1721
- background: var(--tone-bg, var(--uix-surface));
1722
- border: 1px solid var(--tone-border, var(--uix-border-strong));
1723
- border-radius: var(--uix-radius-sm); box-shadow: var(--uix-shadow-sm);
1724
- }
1725
- .uix-node--decision .uix-node__title {
1726
- position: relative; z-index: var(--uix-z-raised); max-width: 88px; text-align: center;
1727
- font-size: var(--uix-text-meta); color: var(--tone-fg, var(--uix-text));
1728
- }
1729
-
1730
- /* ---- start / end terminals (pills) ---- */
1731
- .uix-node--start, .uix-node--end {
1732
- grid-template-columns: 1fr; min-width: 0; justify-items: center;
1733
- padding: var(--uix-space-2) var(--uix-space-5); border-radius: var(--uix-radius-pill);
1734
- background: var(--uix-bg-active); color: var(--uix-text-hushed); font-weight: 500;
1735
- }
1736
-
1737
- /* ============================================================ flow + edges */
1738
- .uix-flow {
1739
- position: relative; width: 100%;
1740
- color: var(--uix-border-strong); /* edges inherit via currentColor */
1741
- }
1742
- .uix-flow__edges {
1743
- position: absolute; inset: 0; width: 100%; height: 100%;
1744
- overflow: visible; pointer-events: none; /* never block node hover/focus */
1745
- }
1746
- .uix-flow__edge { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
1747
- .uix-flow__edge--branch-yes { stroke: var(--uix-success); }
1748
- .uix-flow__edge--branch-no { stroke: var(--uix-danger); }
1749
- .uix-flow__edge--loop { stroke: var(--uix-accent); stroke-dasharray: 5 4; }
1750
- .uix-flow__arrow { fill: currentColor; }
1751
- .uix-flow__edge-label { fill: var(--uix-text-muted); font-family: var(--uix-font-sans); font-size: var(--uix-text-eyebrow); }
1752
- .uix-flow__edge-label--loop { fill: var(--uix-accent); }
1753
-
1754
- /* hovering/focusing a diagram sets its edges "flowing" (marching dashes) to read direction */
1755
- @media (hover: hover) and (pointer: fine) {
1756
- .uix-flow:hover .uix-flow__edge,
1757
- .uix-flow:focus-within .uix-flow__edge {
1758
- stroke-dasharray: 5 4; animation: uix-flow-march var(--uix-dur-slow) linear infinite;
1759
- }
1760
- }
1761
-
1762
- /* ---- linear: flex row of nodes + pure-CSS connectors (no SVG) ---- */
1763
- .uix-flow--linear .uix-flow__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--uix-space-1); }
1764
- .uix-flow__connector {
1765
- position: relative; flex: 1 1 30px; min-width: 30px; height: 0;
1766
- border-top: 1.5px solid var(--uix-border-strong); margin: 0 var(--uix-space-1);
1767
- }
1768
- .uix-flow__connector::after {
1769
- content: ""; position: absolute; right: -1px; top: 50%; width: 6px; height: 6px;
1770
- border-top: 1.5px solid var(--uix-border-strong); border-right: 1.5px solid var(--uix-border-strong);
1771
- transform: translate(0, -50%) rotate(45deg);
1772
- }
1773
- .uix-flow__connector[data-done] { border-color: var(--uix-success); }
1774
- .uix-flow__connector[data-done]::after { border-color: var(--uix-success); }
1775
-
1776
- /* ---- branch / loop / mindmap: absolutely-positioned nodes over an SVG edge layer.
1777
- Container aspect-ratio matches each SVG viewBox so % node positions and path
1778
- coordinates scale together (uniform), keeping edges glued to nodes at any width. */
1779
- .uix-flow--branch, .uix-flow--loop { aspect-ratio: 5 / 2; }
1780
- .uix-flow--mindmap { aspect-ratio: 2 / 1; }
1781
- .uix-flow--branch .uix-node,
1782
- .uix-flow--loop .uix-node,
1783
- .uix-flow--mindmap .uix-node,
1784
- .uix-flow--canvas .uix-node { position: absolute; transform: translate(-50%, -50%); }
1785
-
1786
- /* mindmap leaves sit tighter than default nodes */
1787
- .uix-flow--mindmap .uix-node { min-width: 0; }
1788
- .uix-flow--mindmap .uix-node--hub { min-width: 120px; }
1789
-
1790
- /* ============================================================ builder canvas */
1791
- .uix-flow--canvas {
1792
- display: grid; grid-template-columns: 188px 1fr;
1793
- border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg);
1794
- overflow: hidden; background: var(--uix-surface); width: 100%;
1795
- }
1796
- .uix-flow__palette {
1797
- display: flex; flex-direction: column; gap: var(--uix-space-2); padding: var(--uix-space-4);
1798
- border-right: 1px solid var(--uix-border); background: var(--uix-surface);
1799
- }
1800
- .uix-flow__palette-title {
1801
- font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow);
1802
- text-transform: uppercase; color: var(--uix-text-muted); margin-bottom: var(--uix-space-1);
1803
- }
1804
- .uix-flow__chip {
1805
- display: flex; align-items: center; gap: var(--uix-space-2); padding: var(--uix-space-2) var(--uix-space-3);
1806
- border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md);
1807
- background: var(--uix-surface); color: var(--uix-text);
1808
- font-size: var(--uix-text-meta); cursor: grab; box-shadow: var(--uix-shadow-sm);
1809
- transition: box-shadow var(--uix-dur-fast) var(--uix-ease-out),
1810
- transform var(--uix-dur-fast) var(--uix-ease-out);
1811
- }
1812
- .uix-flow__chip svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); color: var(--uix-text-muted); flex: none; }
1813
- .uix-flow__chip:active { cursor: grabbing; }
1814
- @media (hover: hover) and (pointer: fine) {
1815
- .uix-flow__chip:hover { box-shadow: var(--uix-shadow-popover); transform: translateY(calc(-1 * var(--uix-lift))); }
1816
- }
1817
- /* the canvas: a dotted grid, free-placed nodes, one SVG edge layer */
1818
- .uix-flow__canvas {
1819
- position: relative; aspect-ratio: 16 / 9; min-height: 280px;
1820
- background-color: var(--uix-bg-subtle);
1821
- background-image: radial-gradient(var(--uix-border-strong) 1px, transparent 1px);
1822
- background-size: 22px 22px; background-position: -1px -1px;
1823
- }
1824
- .uix-flow--canvas .uix-node { cursor: grab; }
1825
- .uix-flow--canvas .uix-node:active { cursor: grabbing; }
1826
-
1827
- /* selected node ring — mirrors the focus-ring construction (double box-shadow on --uix-ring) */
1828
- .uix-flow .uix-node[data-selected] {
1829
- border-color: var(--uix-ring);
1830
- box-shadow: 0 0 0 2px var(--uix-surface), 0 0 0 4px var(--uix-ring);
1831
- }
1832
- /* keyboard/click selection on focusable canvas pieces — no JS needed */
1833
- .uix-flow__chip:focus-visible,
1834
- .uix-flow--canvas .uix-node:focus-visible {
1835
- outline: none; border-color: var(--uix-ring);
1836
- box-shadow: 0 0 0 2px var(--uix-surface), 0 0 0 4px var(--uix-ring);
1837
- }
1838
-
1839
- /* ============================================================ motion */
1840
- @keyframes uix-flow-spin { to { transform: rotate(360deg); } }
1841
- @keyframes uix-flow-march { to { stroke-dashoffset: -18; } }
1842
-
1843
- @media (prefers-reduced-motion: reduce) {
1844
- .uix-node--running .uix-node__icon svg,
1845
- .uix-flow:hover .uix-flow__edge,
1846
- .uix-flow:focus-within .uix-flow__edge { animation: none; }
1847
- }
1848
- }
1849
- /* uix audit-log entry — depends only on --uix-* tokens. */
1850
- @layer uix.components {
1851
- .uix-audit { display: flex; flex-direction: column; }
1852
- .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); }
1853
- .uix-audit__row:last-child { border-bottom: 0; }
1854
- .uix-audit__actor { font-weight: 500; color: var(--uix-text); }
1855
- .uix-audit__detail { color: var(--uix-text-hushed); }
1856
- .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); }
1857
- .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); }
1858
- .uix-audit__time { color: var(--uix-text-muted); white-space: nowrap; }
1859
- }
1860
- /* uix contact / customer card (CRM) — depends only on --uix-* tokens. */
1861
- @layer uix.components {
1862
- .uix-contact { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--uix-space-1); padding: var(--uix-space-5); }
1863
- .uix-contact__name { font-size: var(--uix-text-h3); font-weight: 600; margin-top: var(--uix-space-2); }
1864
- .uix-contact__role { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
1865
- .uix-contact__actions { display: flex; gap: var(--uix-space-2); margin-top: var(--uix-space-3); align-self: stretch; }
1866
- .uix-contact__actions > .uix-btn { flex: 1; }
1867
- .uix-contact__stats { display: flex; gap: var(--uix-space-5); margin-top: var(--uix-space-4); }
1868
- .uix-contact__stat { text-align: center; }
1869
- .uix-contact__stat b { display: block; font-size: var(--uix-text-h3); }
1870
- .uix-contact__stat span { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
1871
- }
1872
- /* uix SLA indicator / timer (breach states) — depends only on --uix-* tokens. */
1873
- @layer uix.components {
1874
- .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); }
1875
- .uix-sla svg { width: 14px; height: 14px; }
1876
- .uix-sla[data-state="ok"] { color: var(--uix-success); }
1877
- .uix-sla[data-state="at-risk"] { color: var(--uix-warning-text); }
1878
- .uix-sla[data-state="breach"] { color: var(--uix-danger-text); }
1879
- }
1880
- /* uix utility/typography bits — code, pre, blockquote, divider, status dots. Depends only on --uix-* tokens. */
1881
- @layer uix.components {
1882
- .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); }
1883
- .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); }
1884
- .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; }
1885
- .uix-divider { height: 1px; background: var(--uix-border); border: 0; margin: var(--uix-space-4) 0; }
1886
- .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; }
1887
- .uix-divider--label::before, .uix-divider--label::after { content: ""; flex: 1; height: 1px; background: var(--uix-border); }
1888
- .uix-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--uix-text-muted); }
1889
- .uix-dot--success { background: var(--uix-success); }
1890
- .uix-dot--warning { background: var(--uix-warning); }
1891
- .uix-dot--danger { background: var(--uix-danger); }
1892
- .uix-dot--info { background: var(--uix-info); }
1893
- }
1894
- /* uix heartbeat / live status indicator — a pulsing ping. Respects reduced-motion (guard stops the ping). */
1895
- @layer uix.components {
1896
- .uix-heartbeat { position: relative; display: inline-grid; place-items: center; width: 8px; height: 8px; flex: none; }
1897
- .uix-heartbeat__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--uix-success); z-index: var(--uix-z-raised); }
1898
- .uix-heartbeat__ping { position: absolute; inset: 0; border-radius: 50%; background: var(--uix-success); animation: uix-ping 1.6s var(--uix-ease-out) infinite; }
1899
- @keyframes uix-ping { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.8); opacity: 0; } }
1900
- .uix-heartbeat--warning .uix-heartbeat__dot, .uix-heartbeat--warning .uix-heartbeat__ping { background: var(--uix-warning); }
1901
- .uix-heartbeat--danger .uix-heartbeat__dot, .uix-heartbeat--danger .uix-heartbeat__ping { background: var(--uix-danger); }
1902
- .uix-heartbeat--idle .uix-heartbeat__dot { background: var(--uix-text-muted); }
1903
- .uix-heartbeat--idle .uix-heartbeat__ping { display: none; }
1904
- .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); }
1905
- }
1906
- /* uix editorial-home kit — the intranet "editorial" landing patterns (INTRA-04):
1907
- * page intro + search, shortcut grid, notice queue, featured stage + rundown,
1908
- * section heads, content/rail grids, news lead, content list, resource grid,
1909
- * stat line, event + status rows. Ported 1:1 from the approved TENSOR intranet
1910
- * prototype (Docs/prototypes/intranet-reimagined/mockups.css); spacing/type
1911
- * snapped to the --uix-* scales per the contract gate, editorial display sizes
1912
- * justified in tests/raw-value-allowlist.json. Depends only on --uix-* tokens. */
1913
- @layer uix.components {
1914
- /* ── page intro — kicker/title/lede beside the search well ─────────────────── */
1915
- .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); }
1916
- .uix-page-intro .uix-page-lede { margin-top: var(--uix-space-2); }
1917
- .uix-page-kicker { margin: 0 0 var(--uix-space-2); color: var(--uix-text-hushed); font-size: var(--uix-text-meta); }
1918
- .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; }
1919
- .uix-page-lede { max-width: 680px; margin: var(--uix-space-3) 0 0; color: var(--uix-text-hushed); font-size: var(--uix-text-h3); }
1920
- .uix-intro-search__label { margin: 0 0 var(--uix-space-2); color: var(--uix-text-hushed); font-size: var(--uix-text-meta); }
1921
-
1922
- .uix-searchbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--uix-space-2); }
1923
- .uix-searchbar .uix-input { min-height: 44px; padding-left: 42px; }
1924
- .uix-searchbar__wrap { position: relative; }
1925
- .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; }
1926
-
1927
- .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); }
1928
- .uix-shortcut-grid .uix-btn { min-height: 42px; justify-content: flex-start; }
1929
-
1930
- /* ── notice queue — rotating "important updates" banner ────────────────────── */
1931
- .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); }
1932
- .uix-notice__copy { margin: 0; font-size: var(--uix-text-body); }
1933
- .uix-notice__copy strong { font-weight: 600; }
1934
- .uix-notice__content { min-width: 0; }
1935
- .uix-notice__meta { margin: var(--uix-space-1) 0 0; color: var(--uix-text-hushed); font-size: var(--uix-text-eyebrow); }
1936
- .uix-notice__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--uix-space-2); }
1937
- .uix-notice__position { margin-right: var(--uix-space-1); color: var(--uix-text-hushed); font-size: var(--uix-text-eyebrow); white-space: nowrap; }
1938
- .uix-notice__arrow--previous svg { transform: rotate(180deg); }
1939
-
1940
- /* ── featured briefing — ONE card: stage + rundown are zones inside it, split
1941
- by an internal hairline. The selected rundown item grows a caret that sits
1942
- on (and breaks) that hairline toward the stage, and its ordinal becomes a
1943
- filled chip echoed by .uix-featured__now in the stage eyebrow — that chip
1944
- pairing is what carries the selection link once the card stacks. ─────────── */
1945
- .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); }
1946
- .uix-page-intro + .uix-featured { margin-top: var(--uix-space-6); }
1947
-
1948
- .uix-featured__stage { min-width: 0; min-height: 302px; display: grid; grid-template-columns: minmax(260px, 0.95fr) minmax(300px, 1.05fr); }
1949
- .uix-featured__visual {
1950
- min-height: 302px; padding: var(--uix-space-6) var(--uix-space-7); display: flex; align-items: flex-end;
1951
- position: relative; overflow: hidden;
1952
- background:
1953
- linear-gradient(135deg, transparent 20%, color-mix(in srgb, var(--uix-text) 8%, transparent)),
1954
- var(--uix-bg-subtle);
1955
- }
1956
- .uix-featured__visual::before,
1957
- .uix-featured__visual::after { content: ""; position: absolute; border: 1px solid var(--uix-border-strong); border-radius: 50%; }
1958
- .uix-featured__visual::before { width: 240px; height: 240px; top: -78px; right: -42px; }
1959
- .uix-featured__visual::after { width: 144px; height: 144px; top: 72px; right: 56px; }
1960
- .uix-featured__content { padding: var(--uix-space-7); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
1961
- .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; }
1962
- .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; }
1963
- .uix-featured__description { margin: var(--uix-space-3) 0 var(--uix-space-5); color: var(--uix-text-hushed); }
1964
- .uix-featured__meta { margin: 0 0 var(--uix-space-5); color: var(--uix-text-hushed); font-size: var(--uix-text-meta); }
1965
- .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; }
1966
-
1967
- .uix-story-signal { position: absolute; top: 26px; left: 28px; z-index: var(--uix-z-raised); }
1968
- .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; }
1969
- .uix-story-signal__label { display: block; margin-top: var(--uix-space-2); color: var(--uix-text-hushed); font-size: var(--uix-text-meta); }
1970
-
1971
- .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); }
1972
- .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); }
1973
- .uix-story-diagram__bar:nth-child(2) { min-height: 104px; }
1974
- .uix-story-diagram__bar:nth-child(3) { min-height: 126px; background: var(--uix-text); }
1975
-
1976
- .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); }
1977
- .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); }
1978
- .uix-rundown__eyebrow { margin: 0; color: var(--uix-text-hushed); font-size: var(--uix-text-eyebrow); letter-spacing: 0.05em; text-transform: uppercase; }
1979
- .uix-rundown__title { margin: var(--uix-space-1) 0 0; font-family: var(--uix-font-heading); font-size: 18px; font-weight: 400; }
1980
- .uix-rundown__items { min-width: 0; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: var(--uix-space-2); }
1981
- .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; }
1982
- .uix-rundown__item:hover { background: var(--uix-bg-hover); }
1983
- .uix-rundown__item[data-selected="true"] { border-color: var(--uix-border); background: var(--uix-bg-active); }
1984
- /* caret centered on the internal divider (16px zone pad + 1px hairline + half of the 12px glyph) */
1985
- .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); }
1986
- .uix-rundown__number { color: var(--uix-text-hushed); font-size: var(--uix-text-eyebrow); font-variant-numeric: tabular-nums; }
1987
- .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); }
1988
- .uix-rundown__topic,
1989
- .uix-rundown__item-title { display: block; }
1990
- .uix-rundown__topic { color: var(--uix-text-hushed); font-size: var(--uix-text-eyebrow); }
1991
- .uix-rundown__item-title { margin-top: var(--uix-space-1); font-weight: 600; line-height: 1.2; }
1992
-
1993
- /* ── section heads ─────────────────────────────────────────────────────────── */
1994
- .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); }
1995
- .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); }
1996
- .uix-section-link { color: var(--uix-text-hushed); font-size: var(--uix-text-meta); text-decoration: none; }
1997
- /* already a quiet link by its own design — hover/focus parity with link.css */
1998
- .uix-section-link:is(:hover, :focus-visible) { color: var(--uix-text); text-decoration: underline; }
1999
-
2000
- /* ── content grid + rail ───────────────────────────────────────────────────── */
2001
- .uix-content-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr); gap: var(--uix-space-7); align-items: start; }
2002
- .uix-content-grid--balanced { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2003
- .uix-content-grid > * { min-width: 0; }
2004
- .uix-rail { display: grid; gap: var(--uix-space-4); }
2005
- .uix-rail-card { padding: var(--uix-space-5); }
2006
- .uix-rail-card__title { margin: 0; font-family: var(--uix-font-heading); font-size: 18px; font-weight: 400; }
2007
- .uix-rail-card__meta { margin: var(--uix-space-1) 0 0; color: var(--uix-text-hushed); font-size: var(--uix-text-meta); }
2008
-
2009
- /* ── news lead + content list ──────────────────────────────────────────────── */
2010
- .uix-news-lead { padding: 0 0 var(--uix-space-5); border-bottom: 1px solid var(--uix-border); }
2011
- .uix-news-lead__meta,
2012
- .uix-list-meta { color: var(--uix-text-hushed); font-size: var(--uix-text-meta); }
2013
- .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); }
2014
- .uix-news-lead__summary { margin: 0; color: var(--uix-text-hushed); }
2015
-
2016
- .uix-content-list { margin: 0; padding: 0; list-style: none; }
2017
- .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); }
2018
- .uix-content-list__item:last-child { border-bottom: 0; }
2019
- .uix-content-list__title { margin: 0; font-weight: 600; }
2020
- .uix-content-list__meta { margin: var(--uix-space-1) 0 0; color: var(--uix-text-hushed); font-size: var(--uix-text-meta); }
2021
-
2022
- /* ── resource grid ─────────────────────────────────────────────────────────── */
2023
- .uix-resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--uix-space-2); }
2024
- .uix-resource-grid .uix-btn { min-height: 44px; justify-content: flex-start; }
2025
-
2026
- /* ── stat line ─────────────────────────────────────────────────────────────── */
2027
- .uix-stat-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--uix-border); }
2028
- .uix-stat-line__item { padding: var(--uix-space-4) var(--uix-space-2) var(--uix-space-1) 0; }
2029
- .uix-stat-line__value { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
2030
- .uix-stat-line__label { color: var(--uix-text-hushed); font-size: var(--uix-text-eyebrow); }
2031
-
2032
- /* ── event + status rows ───────────────────────────────────────────────────── */
2033
- .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); }
2034
- .uix-event-row:last-child { border-bottom: 0; }
2035
- .uix-event-date { text-align: center; }
2036
- .uix-event-date__month { display: block; color: var(--uix-text-hushed); font-size: var(--uix-text-eyebrow); text-transform: uppercase; }
2037
- .uix-event-date__day { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
2038
- .uix-event-row__title { margin: 0; font-weight: 600; }
2039
- .uix-event-row__meta { margin: var(--uix-space-1) 0 0; color: var(--uix-text-hushed); font-size: var(--uix-text-meta); }
2040
-
2041
- .uix-status-row { min-height: 48px; display: flex; align-items: center; gap: var(--uix-space-3); border-bottom: 1px solid var(--uix-border); }
2042
- .uix-status-row:last-child { border-bottom: 0; }
2043
- .uix-status-row__name { flex: 1; }
2044
-
2045
- /* ── responsive — ported 1:1 from the prototype's 920/620 breakpoints ──────── */
2046
- @media (max-width: 920px) {
2047
- .uix-page-intro,
2048
- .uix-content-grid,
2049
- .uix-content-grid--balanced,
2050
- .uix-featured { grid-template-columns: 1fr; }
2051
-
2052
- .uix-rundown { border-left: 0; border-top: 1px solid var(--uix-border); }
2053
- .uix-rundown__items { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr; }
2054
- /* stacked zones: the caret flips to point up at the stage above */
2055
- .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); }
2056
-
2057
- .uix-shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2058
- }
2059
-
2060
- @media (max-width: 620px) {
2061
- .uix-featured__stage { grid-template-columns: 1fr; }
2062
- .uix-featured__visual { min-height: 190px; }
2063
- .uix-featured__content { padding: var(--uix-space-6); }
2064
-
2065
- .uix-rundown__items { grid-template-columns: 1fr; grid-template-rows: repeat(3, auto); }
2066
- /* vertical item stack: the directional caret stops making sense — the
2067
- ordinal chips (item number + .uix-featured__now) carry the pairing */
2068
- .uix-rundown__item[data-selected="true"]::before { display: none; }
2069
-
2070
- .uix-notice { grid-template-columns: auto minmax(0, 1fr); }
2071
- .uix-notice > .uix-btn { grid-column: 2; justify-self: start; }
2072
- .uix-notice__actions { grid-column: 1 / -1; width: 100%; justify-content: flex-start; flex-wrap: wrap; }
2073
- .uix-notice__position { flex: 1; }
2074
-
2075
- .uix-searchbar { grid-template-columns: 1fr; }
2076
- .uix-searchbar .uix-btn { min-height: 44px; }
2077
-
2078
- .uix-page-intro { margin-top: var(--uix-space-5); gap: var(--uix-space-5); }
2079
- .uix-shortcut-grid { grid-template-columns: 1fr 1fr; }
2080
- .uix-shortcut-grid .uix-btn { min-height: 48px; }
2081
-
2082
- .uix-story-signal { top: 20px; left: 20px; }
2083
- .uix-story-signal__value { font-size: var(--uix-text-display); }
2084
-
2085
- .uix-resource-grid { grid-template-columns: 1fr; }
2086
-
2087
- .uix-stat-line { grid-template-columns: 1fr; }
2088
- .uix-stat-line__item { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--uix-border); }
2089
- }
2090
- }
2091
- /* uix link patterns — the quiet link, for anchors whose CONTAINER is the affordance.
2092
- *
2093
- * The base layer styles anchors as in-text content links: --uix-link colour, and
2094
- * classless [href] anchors carry a persistent underline (WCAG 1.4.1 / link-in-text-block —
2095
- * a link sitting inside a run of same-coloured prose must not be distinguished by colour
2096
- * alone). That contract is right for prose and wrong for composition slots where the
2097
- * surrounding row/card already communicates interactivity: framework <Link>s passed into
2098
- * kit title slots and table cells rendered brand-blue + bold + underlined — unreadable
2099
- * noise at list density (TENSOR INTRA-04, operator-rejected).
2100
- *
2101
- * A quiet link inherits the surrounding text colour and shows its underline on
2102
- * hover/focus. The global :focus-visible ring (base.css) still fires, so the keyboard
2103
- * affordance never rests on the underline alone. WCAG 1.4.1 is not in play for anything
2104
- * below: the link is the WHOLE text of its block — a title, a name, a data cell — or it
2105
- * is the block itself. It is never a phrase inside a sentence.
2106
- *
2107
- * A slot earns quiet-BY-DEFAULT only when BOTH hold:
2108
- * (i) the anchor fills a named title/name slot or a data cell — the link text IS the
2109
- * block, not a phrase inside running copy; and
2110
- * (ii) the surrounding row/card/tile already reads as interactive (hover state, cursor,
2111
- * bordered unit), or the slot is that record's primary label.
2112
- *
2113
- * Deliberate exclusions, so the next person doesn't "finish the job":
2114
- * • Prose and message bodies — .uix-prose, .uix-note, .uix-notice__copy,
2115
- * .uix-timeline__body, .uix-audit__detail, .uix-notif copy. Links there sit inside
2116
- * sentences: 1.4.1 applies and the base treatment is correct.
2117
- * • .uix-alert, .uix-toast, .uix-peek__title — nothing else in those containers signals
2118
- * that the link navigates, so the colour IS the affordance. peek.css sets --uix-link
2119
- * on its title anchor on purpose; do not quiet it.
2120
- * • .uix-comment__author — a byline renders "Author · 22m ago", so the name is a phrase
2121
- * inside a text run, not the whole block, and .uix-comment__meta is not interactive.
2122
- * It fails test (i) above. Products wanting the GitHub-style quiet byline opt in with
2123
- * .uix-link--quiet; that is what the utility is for.
2124
- * • .uix-navitem, .uix-breadcrumbs a, .uix-section-link are already quiet by their own
2125
- * design and need no class here.
2126
- *
2127
- * Four forms:
2128
- * 1 · `.uix-link--quiet` — the opt-in utility, for block links outside the registry.
2129
- * 2 · TITLE / NAME SLOTS — quiet by default. `:not(.uix-btn)` so an anchor deliberately
2130
- * styled as a button inside a title slot keeps its button treatment.
2131
- * 3 · DATA CELLS — table cells and description-list values. `:not([class])` so
2132
- * class-bearing anchors (`.uix-btn--link`, pills, tags) stay styled.
2133
- * 4 · CONTAINER ANCHORS — the anchor IS the kit block (`<a class="uix-card">`). Without
2134
- * this the base `a { color }` tints every word in the block brand-blue.
2135
- * Depends only on --uix-* tokens. */
2136
- @layer uix.components {
2137
- .uix-link--quiet,
2138
-
2139
- /* 2 · title / name slots */
2140
- :is(
2141
- /* editorial-home */
2142
- .uix-featured__title, .uix-rail-card__title, .uix-news-lead__title,
2143
- .uix-content-list__title, .uix-rundown__item-title, .uix-event-row__title,
2144
- .uix-status-row__name,
2145
- /* records, rows, cards */
2146
- .uix-card__title, .uix-list__title, .uix-inbox__subject, .uix-kanban__card-title,
2147
- .uix-media__name, .uix-attachment__name, .uix-contact__name, .uix-user-chip__name,
2148
- .uix-audit__actor
2149
- ) a:not(.uix-btn),
2150
-
2151
- /* 3 · data cells */
2152
- :is(.uix-table td, .uix-dl dd) a:not([class]),
2153
-
2154
- /* 4 · container anchors */
2155
- a:is(
2156
- .uix-card, .uix-stat, .uix-list__item, .uix-inbox__item, .uix-kanban__card,
2157
- .uix-notif, .uix-media, .uix-attachment, .uix-contact, .uix-cmdk__item,
2158
- .uix-content-list__item, .uix-event-row, .uix-status-row
2159
- ) { color: inherit; text-decoration: none; }
2160
-
2161
- .uix-link--quiet:is(:hover, :focus-visible),
2162
-
2163
- :is(
2164
- .uix-featured__title, .uix-rail-card__title, .uix-news-lead__title,
2165
- .uix-content-list__title, .uix-rundown__item-title, .uix-event-row__title,
2166
- .uix-status-row__name,
2167
- .uix-card__title, .uix-list__title, .uix-inbox__subject, .uix-kanban__card-title,
2168
- .uix-media__name, .uix-attachment__name, .uix-contact__name, .uix-user-chip__name,
2169
- .uix-audit__actor
2170
- ) a:not(.uix-btn):is(:hover, :focus-visible),
2171
-
2172
- :is(.uix-table td, .uix-dl dd) a:not([class]):is(:hover, :focus-visible) { text-decoration: underline; }
2173
-
2174
- /* Container anchors never underline: the anchor wraps the whole block, so an underline
2175
- would strike through every word in it. They take the kit's standard row-hover tint
2176
- instead — the same --uix-bg-hover that .uix-list__item / .uix-inbox__item / .uix-cmdk__item
2177
- already use, so containers with a hover of their own just restate it. */
2178
- a:is(
2179
- .uix-card, .uix-stat, .uix-list__item, .uix-inbox__item, .uix-kanban__card,
2180
- .uix-notif, .uix-media, .uix-attachment, .uix-contact, .uix-cmdk__item,
2181
- .uix-content-list__item, .uix-event-row, .uix-status-row
2182
- ):is(:hover, :focus-visible) { background: var(--uix-bg-hover); }
2183
-
2184
- /* Container anchors that declare no display of their own would render inline as an <a>.
2185
- The rest of form 4 (flex/grid rows) set theirs already and must NOT be overridden —
2186
- link.css is imported last, so a blanket display here would flatten them. */
2187
- a:is(.uix-card, .uix-stat, .uix-kanban__card) { display: block; }
2188
- }
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}}