@tensor_1/tokens 2.11.0 → 2.13.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.
- package/README.md +8 -0
- package/build/css/components.css +1 -1847
- package/build/css/styles.css +1 -2188
- package/package.json +12 -2
- package/styles/components/alert.css +16 -0
- package/styles/components/app-shell.css +37 -0
- package/styles/components/attachment.css +10 -0
- package/styles/components/audit-log.css +11 -0
- package/styles/components/avatar.css +25 -0
- package/styles/components/brand-profiles.css +12 -0
- package/styles/components/breadcrumbs.css +10 -0
- package/styles/components/builder-canvas.css +17 -0
- package/styles/components/button.css +49 -0
- package/styles/components/calendar.css +13 -0
- package/styles/components/card.css +9 -0
- package/styles/components/chart.css +9 -0
- package/styles/components/checkbox.css +20 -0
- package/styles/components/color-picker.css +14 -0
- package/styles/components/combobox.css +16 -0
- package/styles/components/command-palette.css +14 -0
- package/styles/components/comments.css +17 -0
- package/styles/components/contact-card.css +12 -0
- package/styles/components/date-range-picker.css +16 -0
- package/styles/components/description-list.css +6 -0
- package/styles/components/detail-layout.css +7 -0
- package/styles/components/diff-viewer.css +14 -0
- package/styles/components/drawer.css +24 -0
- package/styles/components/editorial-home.css +188 -0
- package/styles/components/file-upload.css +14 -0
- package/styles/components/flow.css +196 -0
- package/styles/components/form.css +14 -0
- package/styles/components/heartbeat.css +12 -0
- package/styles/components/inbox.css +13 -0
- package/styles/components/input.css +39 -0
- package/styles/components/kanban.css +14 -0
- package/styles/components/kbd.css +8 -0
- package/styles/components/labels.css +13 -0
- package/styles/components/license-position-bar.css +8 -0
- package/styles/components/lightbox.css +13 -0
- package/styles/components/link.css +98 -0
- package/styles/components/list.css +10 -0
- package/styles/components/match-review.css +11 -0
- package/styles/components/media.css +9 -0
- package/styles/components/menu.css +15 -0
- package/styles/components/meter.css +9 -0
- package/styles/components/metric-input.css +9 -0
- package/styles/components/modal.css +31 -0
- package/styles/components/notification-center.css +14 -0
- package/styles/components/page-header.css +9 -0
- package/styles/components/pagination.css +14 -0
- package/styles/components/peek.css +46 -0
- package/styles/components/pipeline.css +9 -0
- package/styles/components/popover.css +11 -0
- package/styles/components/progress.css +12 -0
- package/styles/components/prose.css +27 -0
- package/styles/components/radio.css +20 -0
- package/styles/components/reactions.css +22 -0
- package/styles/components/relationship-graph.css +21 -0
- package/styles/components/rule-builder.css +17 -0
- package/styles/components/scheduling-calendar.css +22 -0
- package/styles/components/segmented.css +12 -0
- package/styles/components/select.css +23 -0
- package/styles/components/sidebar.css +102 -0
- package/styles/components/sla.css +8 -0
- package/styles/components/slider.css +16 -0
- package/styles/components/spinner.css +10 -0
- package/styles/components/stat-tile.css +11 -0
- package/styles/components/states.css +13 -0
- package/styles/components/status-pill.css +37 -0
- package/styles/components/stepper.css +13 -0
- package/styles/components/steps.css +18 -0
- package/styles/components/switch.css +19 -0
- package/styles/components/table-toolbar.css +20 -0
- package/styles/components/table.css +160 -0
- package/styles/components/tabs.css +31 -0
- package/styles/components/tag-input.css +16 -0
- package/styles/components/textarea.css +15 -0
- package/styles/components/timeline.css +11 -0
- package/styles/components/toast.css +21 -0
- package/styles/components/tooltip.css +35 -0
- package/styles/components/tree.css +17 -0
- package/styles/components/typography.css +45 -0
- package/styles/components/utility-bits.css +14 -0
- package/styles/components/view-menu.css +14 -0
- package/styles/motion.css +35 -0
- package/styles/utilities.css +26 -0
package/build/css/styles.css
CHANGED
|
@@ -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);align-items:center}.uix-searchbar .uix-input{min-height:44px;padding-left:42px}.uix-searchbar .uix-btn{min-height:44px}.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-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}}@layer uix.components{.uix-rule-builder{display:grid;gap:var(--uix-space-4);color:var(--uix-text)}.uix-rule-builder__group,.uix-rule-builder__actions{min-width:0;padding:var(--uix-space-4);border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);background:var(--uix-surface)}.uix-rule-builder__group-heading{display:flex;align-items:center;gap:var(--uix-space-3);padding:0 var(--uix-space-2);font-weight:600}.uix-rule-builder__group-heading label{display:flex;align-items:center;gap:var(--uix-space-2);font-size:var(--uix-text-meta);font-weight:400}.uix-rule-builder__rows{display:grid;gap:var(--uix-space-3)}.uix-rule-builder__condition,.uix-rule-builder__action{display:grid;grid-template-columns:minmax(9rem,1fr) minmax(9rem,1fr) minmax(10rem,1.4fr) auto;gap:var(--uix-space-2);align-items:start;padding:var(--uix-space-3);border-radius:var(--uix-radius-md);background:var(--uix-bg-subtle)}.uix-rule-builder__nested{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--uix-space-2);align-items:start}.uix-rule-builder__nested .uix-rule-builder__group{border-left:3px solid var(--uix-accent)}.uix-rule-builder__row-actions,.uix-rule-builder__add{display:flex;flex-wrap:wrap;gap:var(--uix-space-1)}.uix-rule-builder__add{margin-top:var(--uix-space-3)}.uix-rule-builder__actions{display:grid;gap:var(--uix-space-3)}.uix-rule-builder__validation{padding:var(--uix-space-3);border-radius:var(--uix-radius-md);background:var(--uix-bg-subtle);color:var(--uix-text-muted)}.uix-rule-builder__validation:has(ul),.uix-rule-builder__invalid{color:var(--uix-danger-text);background:var(--uix-danger-bg)}.uix-rule-builder--summary{padding:var(--uix-space-4);border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);background:var(--uix-surface)}@media(max-width:760px){.uix-rule-builder__condition,.uix-rule-builder__action,.uix-rule-builder__nested{grid-template-columns:1fr}}}@layer uix.components{.uix-builder-canvas{display:grid;grid-template-columns:minmax(11rem,.7fr) minmax(16rem,1.5fr) minmax(12rem,1fr);min-height:24rem;border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);overflow:hidden;background:var(--uix-surface);color:var(--uix-text)}.uix-builder-canvas>aside,.uix-builder-canvas__workspace{min-width:0;padding:var(--uix-space-4)}.uix-builder-canvas__palette,.uix-builder-canvas__workspace{border-right:1px solid var(--uix-border)}.uix-builder-canvas h3{margin-bottom:var(--uix-space-3);font-size:var(--uix-text-h3)}.uix-builder-canvas ul,.uix-builder-canvas ol{display:grid;gap:var(--uix-space-2);margin:0;padding:0;list-style:none}.uix-builder-canvas__palette button,.uix-builder-canvas__item-main{width:100%;display:grid;gap:var(--uix-space-1);padding:var(--uix-space-3);border:1px solid var(--uix-border);border-radius:var(--uix-radius-md);background:var(--uix-surface);color:var(--uix-text);text-align:left}.uix-builder-canvas__palette button:hover,.uix-builder-canvas__item-main:hover{background:var(--uix-bg-hover)}.uix-builder-canvas__palette button span,.uix-builder-canvas__item-main span{color:var(--uix-text-muted);font-size:var(--uix-text-meta)}.uix-builder-canvas__item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--uix-space-2);padding:var(--uix-space-2);border:1px solid var(--uix-border);border-radius:var(--uix-radius-md);background:var(--uix-surface-2)}.uix-builder-canvas__item--selected{border-color:var(--uix-accent);box-shadow:0 0 0 2px var(--uix-ring)}.uix-builder-canvas__item-actions{display:grid;gap:var(--uix-space-1)}.uix-builder-canvas__item-actions button{border:0;background:transparent;color:var(--uix-link);font-size:var(--uix-text-meta)}.uix-builder-canvas__state{display:grid;justify-items:start;gap:var(--uix-space-3);padding:var(--uix-space-6);border:1px dashed var(--uix-border-strong);border-radius:var(--uix-radius-md);color:var(--uix-text-muted)}.uix-builder-canvas__properties dl{display:grid;grid-template-columns:auto 1fr;gap:var(--uix-space-2)}.uix-builder-canvas__properties dt{color:var(--uix-text-muted)}@media(max-width:800px){.uix-builder-canvas{grid-template-columns:1fr}.uix-builder-canvas__palette,.uix-builder-canvas__workspace{border-right:0;border-bottom:1px solid var(--uix-border)}}}@layer uix.components{.uix-scheduling-calendar{display:grid;gap:var(--uix-space-3);color:var(--uix-text)}.uix-scheduling-calendar__header{display:flex;align-items:center;justify-content:space-between;gap:var(--uix-space-3);flex-wrap:wrap}.uix-scheduling-calendar__grid{display:grid;grid-template-columns:repeat(7,minmax(6.5rem,1fr));border-top:1px solid var(--uix-border);border-left:1px solid var(--uix-border);overflow:auto}.uix-scheduling-calendar__day{min-height:8rem;padding:var(--uix-space-2);border-right:1px solid var(--uix-border);border-bottom:1px solid var(--uix-border);background:var(--uix-surface)}.uix-scheduling-calendar__day[data-outside]{background:var(--uix-bg-subtle);color:var(--uix-text-muted)}.uix-scheduling-calendar__date{display:block;width:100%;border:0;background:transparent;color:inherit;text-align:right;font-size:var(--uix-text-meta)}.uix-scheduling-calendar__overlay{display:block;margin-block:var(--uix-space-1);padding:var(--uix-space-1) var(--uix-space-2);border-radius:var(--uix-radius-sm);background:var(--uix-info-bg);color:var(--uix-info-text);font-size:var(--uix-text-meta)}.uix-scheduling-calendar__overlay[data-kind=blackout]{background:var(--uix-danger-bg);color:var(--uix-danger-text)}.uix-scheduling-calendar__entries{display:grid;gap:var(--uix-space-1)}.uix-scheduling-calendar__entry{min-width:100%;padding:var(--uix-space-1) var(--uix-space-2);border:0;border-left:3px solid var(--uix-info);border-radius:var(--uix-radius-sm);background:var(--uix-info-bg);color:var(--uix-info-text);overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;font-size:var(--uix-text-meta)}.uix-scheduling-calendar__entry[data-state=conflicted],.uix-scheduling-calendar__entry[data-state=blackout-violation]{border-color:var(--uix-danger);background:var(--uix-danger-bg);color:var(--uix-danger-text)}.uix-scheduling-calendar__entry[data-state=in-progress]{border-color:var(--uix-success);background:var(--uix-success-bg);color:var(--uix-text)}.uix-scheduling-calendar__entry:not([data-range-start]){border-top-left-radius:0;border-bottom-left-radius:0}.uix-scheduling-calendar__entry:not([data-range-end]){border-top-right-radius:0;border-bottom-right-radius:0}.uix-scheduling-calendar__agenda ol{display:grid;gap:var(--uix-space-2);margin:0;padding:0;list-style:none}.uix-scheduling-calendar__agenda li>button{width:100%;display:flex;justify-content:space-between;gap:var(--uix-space-3);padding:var(--uix-space-3);border:1px solid var(--uix-border);border-radius:var(--uix-radius-md);background:var(--uix-surface);color:var(--uix-text);text-align:left}.uix-scheduling-calendar__agenda li>button>span:first-child{display:grid;gap:var(--uix-space-1)}.uix-scheduling-calendar__agenda li>button span span{color:var(--uix-text-muted);font-size:var(--uix-text-meta)}.uix-scheduling-calendar__legend{display:flex;flex-wrap:wrap;gap:var(--uix-space-3);font-size:var(--uix-text-meta);color:var(--uix-text-muted)}.uix-scheduling-calendar__legend span:before{content:"";display:inline-block;width:.75rem;height:.75rem;margin-right:var(--uix-space-1);border:2px solid var(--uix-info);border-radius:var(--uix-radius-xs);background:var(--uix-info-bg);vertical-align:middle}.uix-scheduling-calendar__legend span[data-state=conflicted]:before,.uix-scheduling-calendar__legend span[data-state=blackout-violation]:before{border-color:var(--uix-danger);background:var(--uix-danger-bg)}.uix-scheduling-calendar__legend span[data-state=in-progress]:before{border-color:var(--uix-success);background:var(--uix-success-bg)}.uix-scheduling-calendar__state{padding:var(--uix-space-8);border:1px dashed var(--uix-border-strong);border-radius:var(--uix-radius-lg);text-align:center}}@layer uix.components{.uix-date-range-picker{display:grid;gap:var(--uix-space-3);max-width:46rem;padding:var(--uix-space-4);border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);background:var(--uix-surface);color:var(--uix-text)}.uix-date-range-picker__header{display:flex;justify-content:space-between;gap:var(--uix-space-3);align-items:center}.uix-date-range-picker__header>div{display:flex;gap:var(--uix-space-1)}.uix-date-range-picker__months{display:grid;grid-template-columns:repeat(2,minmax(15rem,1fr));gap:var(--uix-space-4)}.uix-date-range-picker__month h4{margin-bottom:var(--uix-space-2);text-align:center}.uix-date-range-picker__weekdays,.uix-date-range-picker__grid{display:grid;grid-template-columns:repeat(7,1fr)}.uix-date-range-picker__weekdays span{padding:var(--uix-space-1);color:var(--uix-text-muted);text-align:center;font-size:var(--uix-text-meta)}.uix-date-range-picker__grid button{aspect-ratio:1;min-width:2rem;border:0;border-radius:0;background:transparent;color:var(--uix-text)}.uix-date-range-picker__grid button:hover{background:var(--uix-bg-hover)}.uix-date-range-picker__grid button[data-in-range]{background:var(--uix-brand-muted)}.uix-date-range-picker__grid button[data-range-edge]{border-radius:var(--uix-radius-pill);background:var(--uix-accent);color:var(--uix-accent-fg);font-weight:600}.uix-date-range-picker__grid button:disabled{color:var(--uix-text-hushed);text-decoration:line-through}.uix-date-range-picker__selection{color:var(--uix-text-muted);font-size:var(--uix-text-meta)}.uix-date-range-picker--invalid{border-color:var(--uix-danger)}@media(max-width:640px){.uix-date-range-picker__months{grid-template-columns:1fr}}}@layer uix.components{.uix-relationship-graph{display:grid;gap:var(--uix-space-3);color:var(--uix-text)}.uix-relationship-graph__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--uix-space-1)}.uix-relationship-graph__toolbar button,.uix-relationship-graph__list-actions button{padding:var(--uix-space-2);border:1px solid var(--uix-border);border-radius:var(--uix-radius-sm);background:var(--uix-surface);color:var(--uix-text)}.uix-relationship-graph__toolbar span,.uix-relationship-graph__bounded{color:var(--uix-text-muted);font-size:var(--uix-text-meta)}.uix-relationship-graph__visual{min-height:22rem;border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);overflow:hidden;background:var(--uix-bg-subtle)}.uix-relationship-graph__visual svg{display:block;width:100%;height:22rem}.uix-relationship-graph__edge{stroke:var(--uix-border-strong);stroke-width:2}.uix-relationship-graph__edge[data-highlighted]{stroke:var(--uix-accent);stroke-width:4}.uix-relationship-graph__edge[data-conflicted]{stroke:var(--uix-danger);stroke-dasharray:6 4}.uix-relationship-graph__node{cursor:pointer}.uix-relationship-graph__node rect{fill:var(--uix-surface);stroke:var(--uix-border-strong);stroke-width:2}.uix-relationship-graph__node text{fill:var(--uix-text);font-family:var(--uix-font-sans);font-size:var(--uix-text-meta)}.uix-relationship-graph__node[data-selected] rect,.uix-relationship-graph__node[data-highlighted] rect{fill:var(--uix-brand-muted);stroke:var(--uix-accent);stroke-width:3}.uix-relationship-graph__node[data-conflicted] rect{fill:var(--uix-danger-bg);stroke:var(--uix-danger);stroke-dasharray:4 2}.uix-relationship-graph__node:focus-visible rect{stroke:var(--uix-ring);stroke-width:4}.uix-relationship-graph__legend{display:flex;gap:var(--uix-space-4);flex-wrap:wrap;margin:0;padding:0;list-style:none;color:var(--uix-text-muted);font-size:var(--uix-text-meta)}.uix-relationship-graph__legend li:before{content:"";display:inline-block;width:.8rem;height:.8rem;margin-right:var(--uix-space-1);border:2px solid var(--uix-chart-1);border-radius:var(--uix-radius-pill);vertical-align:middle}.uix-relationship-graph__list{padding:var(--uix-space-3);border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);background:var(--uix-surface)}.uix-relationship-graph__list>ul{display:grid;gap:var(--uix-space-2);margin:var(--uix-space-2) 0 0;padding:0;list-style:none}.uix-relationship-graph__list li{display:flex;justify-content:space-between;gap:var(--uix-space-2);padding:var(--uix-space-2);border-radius:var(--uix-radius-md);background:var(--uix-bg-subtle)}.uix-relationship-graph__list li>button:first-child{display:grid;gap:var(--uix-space-1);flex:1;border:0;background:transparent;color:var(--uix-text);text-align:left}.uix-relationship-graph__list li>button span{color:var(--uix-text-muted);font-size:var(--uix-text-meta)}.uix-relationship-graph__list-actions{display:flex;flex-wrap:wrap;gap:var(--uix-space-1)}.uix-relationship-graph--compact .uix-relationship-graph__visual,.uix-relationship-graph--compact .uix-relationship-graph__visual svg{min-height:16rem;height:16rem}.uix-relationship-graph--state{padding:var(--uix-space-8);border:1px dashed var(--uix-border-strong);border-radius:var(--uix-radius-lg)}@media(max-width:640px){.uix-relationship-graph__list li{display:grid}}}@layer uix.components{.uix-match-review{display:grid;gap:var(--uix-space-3);color:var(--uix-text)}.uix-match-review__summary{display:grid;gap:var(--uix-space-3);padding:var(--uix-space-4);border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);background:var(--uix-surface)}.uix-match-review__summary>div:first-child{display:flex;justify-content:space-between;gap:var(--uix-space-3)}.uix-match-review__summary>div:first-child span{color:var(--uix-text-muted)}.uix-match-review__incoming{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:var(--uix-space-2)}.uix-match-review__incoming span{display:grid;gap:var(--uix-space-1)}.uix-match-review__incoming b{color:var(--uix-text-muted);font-size:var(--uix-text-meta)}.uix-match-review__bulk{display:flex;align-items:center;gap:var(--uix-space-2);padding:var(--uix-space-2) var(--uix-space-3);border-radius:var(--uix-radius-md);background:var(--uix-brand-muted)}.uix-match-review__table-wrap{overflow:auto;border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg)}.uix-match-review__table{min-width:54rem}.uix-match-review__table tr[data-status=resolved]{background:var(--uix-success-bg)}.uix-match-review__confidence{font-variant-numeric:tabular-nums;font-weight:600}.uix-match-review__actions{display:flex;flex-wrap:wrap;gap:var(--uix-space-1)}.uix-match-review--state{justify-items:start;padding:var(--uix-space-6);border:1px dashed var(--uix-border-strong);border-radius:var(--uix-radius-lg)}}@layer uix.components{.uix-metric-input{display:grid;gap:var(--uix-space-2);color:var(--uix-text)}.uix-metric-input__control{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:stretch;max-width:22rem}.uix-metric-input__control .uix-input{border-top-right-radius:0;border-bottom-right-radius:0;font-variant-numeric:tabular-nums}.uix-metric-input__unit{display:flex;align-items:center;padding-inline:var(--uix-space-3);border-block:1px solid var(--uix-border-strong);background:var(--uix-bg-subtle);color:var(--uix-text-muted)}.uix-metric-input__steps{display:grid;width:2.5rem}.uix-metric-input__step{border:1px solid var(--uix-border-strong);background:var(--uix-surface);color:var(--uix-text);line-height:1}.uix-metric-input__step:first-child{border-top-right-radius:var(--uix-radius-md)}.uix-metric-input__step:last-child{border-top:0;border-bottom-right-radius:var(--uix-radius-md)}.uix-metric-input__step:hover{background:var(--uix-bg-hover)}.uix-metric-input--invalid .uix-metric-input__control{color:var(--uix-danger-text)}}@layer uix.components{.uix-license-position{display:grid;gap:var(--uix-space-2);color:var(--uix-text)}.uix-license-position__header{display:flex;align-items:center;justify-content:space-between;gap:var(--uix-space-3)}.uix-license-position__value{font-variant-numeric:tabular-nums;font-weight:600}.uix-license-position__track{position:relative;padding-bottom:var(--uix-space-2)}.uix-license-position__overflow{position:absolute;top:100%;right:0;height:var(--uix-space-2);border-radius:var(--uix-radius-pill);background:var(--uix-danger-solid)}.uix-license-position--over .uix-meter{outline:2px solid var(--uix-danger);outline-offset:2px}}@layer uix.components{.uix-brand-profiles{display:grid;grid-template-columns:minmax(16rem,.8fr) minmax(18rem,1.2fr);gap:var(--uix-space-5);color:var(--uix-text)}.uix-brand-profiles__form{display:grid;align-content:start;gap:var(--uix-space-3)}.uix-brand-profiles__form label{display:grid;gap:var(--uix-space-2);font-weight:600}.uix-brand-profiles__colors{display:grid;grid-template-columns:1fr 1fr;gap:var(--uix-space-3)}.uix-brand-profiles__upload{padding:var(--uix-space-3);border:1px dashed var(--uix-border-strong);border-radius:var(--uix-radius-md);background:var(--uix-bg-subtle)}.uix-brand-profiles__preview{overflow:hidden;align-self:start;border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);background:var(--uix-surface);box-shadow:var(--uix-shadow-sm);font-family:var(--uix-font-sans)}.uix-brand-profiles__preview-header{display:flex;align-items:center;gap:var(--uix-space-3);padding:var(--uix-space-4);background:var(--uix-accent);color:var(--uix-accent-fg)}.uix-brand-profiles__preview-header img,.uix-brand-profiles__logo-placeholder{display:grid;place-items:center;width:3rem;height:3rem;border-radius:var(--uix-radius-md);background:var(--uix-surface);color:var(--uix-text);object-fit:contain}.uix-brand-profiles__preview-body{display:grid;justify-items:start;gap:var(--uix-space-3);padding:var(--uix-space-6)}.uix-brand-profiles__preview-body h3{font-family:var(--uix-font-heading)}@media(max-width:720px){.uix-brand-profiles,.uix-brand-profiles__colors{grid-template-columns:1fr}}}@layer uix.components{.uix-diff-viewer{display:grid;gap:var(--uix-space-4);color:var(--uix-text)}.uix-diff-viewer__summary{display:flex;flex-wrap:wrap;gap:var(--uix-space-2)}.uix-diff-viewer__summary span{padding:var(--uix-space-2) var(--uix-space-3);border-radius:var(--uix-radius-pill);background:var(--uix-bg-subtle);color:var(--uix-text-muted);font-size:var(--uix-text-meta)}.uix-diff-viewer__group{display:grid;gap:var(--uix-space-2)}.uix-diff-viewer__group>h3{display:flex;gap:var(--uix-space-2);align-items:center}.uix-diff-viewer__group>h3 span{color:var(--uix-text-muted);font-size:var(--uix-text-meta)}.uix-diff-viewer__entry{border:1px solid var(--uix-border);border-left:4px solid var(--uix-info);border-radius:var(--uix-radius-md);background:var(--uix-surface);overflow:hidden}.uix-diff-viewer__entry[data-kind=conflicted]{border-left-color:var(--uix-danger)}.uix-diff-viewer__entry[data-kind=added]{border-left-color:var(--uix-success)}.uix-diff-viewer__entry[data-kind=removed]{border-left-color:var(--uix-warning)}.uix-diff-viewer__entry summary{display:flex;justify-content:space-between;align-items:center;gap:var(--uix-space-3);padding:var(--uix-space-3);cursor:pointer;background:var(--uix-bg-subtle)}.uix-diff-viewer__versions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--uix-border)}.uix-diff-viewer__versions>div{min-width:0;padding:var(--uix-space-3);border-right:1px solid var(--uix-border);background:var(--uix-surface)}.uix-diff-viewer__versions>div:last-child{border-right:0}.uix-diff-viewer__versions strong{color:var(--uix-text-muted);font-size:var(--uix-text-meta)}.uix-diff-viewer__versions pre{max-height:14rem;overflow:auto;margin-top:var(--uix-space-2);color:var(--uix-text);font-family:var(--uix-font-mono);white-space:pre-wrap;overflow-wrap:anywhere}.uix-diff-viewer__actions{display:flex;flex-wrap:wrap;gap:var(--uix-space-2);padding:var(--uix-space-3);border-top:1px solid var(--uix-border)}.uix-diff-viewer--empty{padding:var(--uix-space-6);border:1px dashed var(--uix-border-strong);border-radius:var(--uix-radius-lg);color:var(--uix-text-muted)}@media(max-width:720px){.uix-diff-viewer__versions{grid-template-columns:1fr}}}@layer uix.components{.uix-color-picker{position:relative;display:inline-block;color:var(--uix-text);font-weight:400}.uix-color-picker__trigger{display:flex;align-items:center;gap:var(--uix-space-2);min-height:var(--uix-control-h);padding:var(--uix-space-2) var(--uix-space-3);border:1px solid var(--uix-border-strong);border-radius:var(--uix-radius-md);background:var(--uix-surface);color:var(--uix-text);font-family:var(--uix-font-mono)}.uix-color-picker__swatch,.uix-color-picker__preset{width:1.5rem;height:1.5rem;border:1px solid var(--uix-border-strong);border-radius:var(--uix-radius-sm)}.uix-color-picker__popover{position:absolute;z-index:var(--uix-z-dropdown);top:calc(100% + var(--uix-space-2));left:0;display:grid;gap:var(--uix-space-3);width:min(20rem,calc(100vw - var(--uix-space-8)));padding:var(--uix-space-4);border:1px solid var(--uix-border);border-radius:var(--uix-radius-lg);background:var(--uix-surface);box-shadow:var(--uix-shadow-popover)}.uix-color-picker__popover[hidden]{display:none}.uix-color-picker__preview{display:grid;place-items:center;min-height:5rem;border:1px solid var(--uix-border);border-radius:var(--uix-radius-md);font-size:var(--uix-text-h2);font-weight:700}.uix-color-picker__range,.uix-color-picker__hex{display:grid;grid-template-columns:1fr auto;gap:var(--uix-space-1);color:var(--uix-text-muted);font-size:var(--uix-text-meta)}.uix-color-picker__range input{grid-column:1/-1;width:100%;accent-color:var(--uix-accent)}.uix-color-picker__hex-row{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:var(--uix-space-2)}.uix-color-picker__palettes{display:grid;gap:var(--uix-space-2)}.uix-color-picker__palettes fieldset{border:0}.uix-color-picker__palettes legend{margin-bottom:var(--uix-space-1);color:var(--uix-text-muted);font-size:var(--uix-text-meta)}.uix-color-picker__palettes fieldset>div{display:flex;flex-wrap:wrap;gap:var(--uix-space-2)}.uix-color-picker__preset{padding:0}.uix-color-picker__contrast{padding:var(--uix-space-2);border-radius:var(--uix-radius-md);font-size:var(--uix-text-meta)}.uix-color-picker__contrast--pass{background:var(--uix-success-bg);color:var(--uix-text)}.uix-color-picker__contrast--fail{background:var(--uix-danger-bg);color:var(--uix-danger-text)}}
|