@loomlyne/ui-system-react 0.0.0-stage → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +18 -2
  3. package/dist/Avatar.d.ts +21 -0
  4. package/dist/Icon.d.ts +448 -0
  5. package/dist/Logo.d.ts +33 -0
  6. package/dist/Motion.d.ts +40 -0
  7. package/dist/Root.d.ts +64 -0
  8. package/dist/bundle.d.ts +2 -0
  9. package/dist/context.d.ts +13 -0
  10. package/dist/index.d.ts +9 -0
  11. package/dist/index.js +8977 -0
  12. package/dist/nav/back.d.ts +59 -0
  13. package/dist/nav/front.d.ts +69 -0
  14. package/dist/nav/shared.d.ts +48 -0
  15. package/dist/primitives.d.ts +243 -0
  16. package/dist/ui.css +485 -0
  17. package/dist/uis.bundle.js +176 -0
  18. package/package.json +53 -3
package/dist/ui.css ADDED
@@ -0,0 +1,485 @@
1
+ /*
2
+ * UI System components. Framework-free: every class reads the --uis-*
3
+ * variables that theme.css (or <Root>) provides, so one config restyles all.
4
+ * Use with React (@loomlyne/ui-system-react) or as plain HTML classes.
5
+ */
6
+
7
+ /* ---------- Base ---------- */
8
+ .uis { font-family: var(--uis-font-body); color: var(--uis-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
9
+ .uis *, .uis *::before, .uis *::after { box-sizing: border-box; }
10
+ .uis-page { background: var(--uis-bg); color: var(--uis-ink); min-height: 100%; }
11
+ .uis :focus-visible { outline: 2px solid var(--uis-focus); outline-offset: 2px; }
12
+ :where(.uis) .uis-icon { width: 1.25em; height: 1.25em; flex-shrink: 0; display: block; }
13
+ .uis-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
14
+
15
+ /* ---------- Type ---------- */
16
+ .uis-display-2xl, .uis-display-xl, .uis-display-l, .uis-display-m { font-family: var(--uis-font-display); font-weight: var(--uis-display-weight); letter-spacing: var(--uis-display-tracking); text-transform: var(--uis-display-case); font-stretch: var(--uis-display-stretch); margin: 0; text-wrap: balance; }
17
+ .uis-display-2xl { font-size: clamp(48px, 6.2vw, 80px); line-height: 0.96; }
18
+ .uis-display-xl { font-size: clamp(40px, 5vw, 64px); line-height: 1; }
19
+ .uis-display-l { font-size: clamp(34px, 3.8vw, 48px); line-height: 1.04; }
20
+ .uis-display-m { font-size: clamp(28px, 2.8vw, 36px); line-height: 1.1; }
21
+ .uis-h1 { font: var(--uis-heading-weight) 30px/1.2 var(--uis-heading-font); letter-spacing: var(--uis-h1-tracking); text-transform: var(--uis-heading-case); font-stretch: var(--uis-heading-stretch); margin: 0; }
22
+ .uis-h2 { font: var(--uis-heading-weight) 24px/1.25 var(--uis-heading-font); letter-spacing: var(--uis-h2-tracking); text-transform: var(--uis-heading-case); font-stretch: var(--uis-heading-stretch); margin: 0; }
23
+ .uis-h3 { font: var(--uis-heading-weight) 20px/1.35 var(--uis-heading-font); letter-spacing: var(--uis-h3-tracking); text-transform: var(--uis-heading-case); font-stretch: var(--uis-heading-stretch); margin: 0; }
24
+ .uis-body-l { font-size: 18px; line-height: 1.6; margin: 0; text-wrap: pretty; }
25
+ .uis-body { font-size: 16px; line-height: 1.55; margin: 0; text-wrap: pretty; }
26
+ .uis-body-s { font-size: 14px; line-height: 1.5; margin: 0; }
27
+ .uis-caption { font-size: 12px; line-height: 1.4; letter-spacing: 0.01em; color: var(--uis-ink-3); }
28
+ .uis-overline { font: 600 11px/1.2 var(--uis-font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--uis-ink-3); }
29
+ .uis-mono { font-family: var(--uis-font-mono); }
30
+ .uis-muted { color: var(--uis-ink-2); }
31
+ .uis-subtle { color: var(--uis-ink-3); }
32
+ .uis-link { color: var(--uis-primary-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
33
+
34
+ /* ---------- Buttons ---------- */
35
+ .uis-btn {
36
+ --_bg: var(--uis-surface); --_ink: var(--uis-ink); --_bd: var(--uis-line-strong);
37
+ display: inline-flex; align-items: center; justify-content: center; gap: 8px;
38
+ height: var(--uis-h-md); padding: 0 18px; border-radius: var(--uis-r-control);
39
+ border: 1px solid var(--_bd); background: var(--_bg); color: var(--_ink);
40
+ font-family: var(--uis-btn-font); font-weight: var(--uis-btn-weight); font-stretch: var(--uis-btn-stretch); font-size: var(--uis-btn-size); line-height: 1;
41
+ letter-spacing: var(--uis-btn-tracking); text-transform: var(--uis-btn-case);
42
+ text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
43
+ transition: background var(--uis-dur-fast) ease, border-color var(--uis-dur-fast) ease, color var(--uis-dur-fast) ease, transform var(--uis-dur-fast) ease, box-shadow var(--uis-dur-fast) ease;
44
+ }
45
+ .uis-btn:hover { --_bg: var(--uis-surface-2); }
46
+ .uis-btn:active { transform: var(--uis-press); }
47
+ .uis-btn:disabled, .uis-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
48
+ .uis-btn .uis-icon { width: 18px; height: 18px; }
49
+ .uis-btn--primary { --_bg: var(--uis-primary); --_ink: var(--uis-primary-ink); --_bd: transparent; }
50
+ .uis-btn--primary:hover { --_bg: var(--uis-primary-hover); }
51
+ .uis-btn--accent { --_bg: var(--uis-accent); --_ink: var(--uis-accent-ink); --_bd: transparent; }
52
+ .uis-btn--accent:hover { --_bg: var(--uis-accent-hover); }
53
+ .uis-btn--secondary { --_bg: var(--uis-surface-2); --_bd: transparent; }
54
+ .uis-btn--secondary:hover { --_bg: var(--uis-surface-3); }
55
+ .uis-btn--outline { --_bg: transparent; }
56
+ .uis-btn--outline:hover { --_bg: var(--uis-surface-2); }
57
+ .uis-btn--ghost { --_bg: transparent; --_bd: transparent; }
58
+ .uis-btn--ghost:hover { --_bg: var(--uis-surface-3); }
59
+ .uis-btn--soft { --_bg: var(--uis-primary-soft); --_ink: var(--uis-primary-soft-ink); --_bd: transparent; }
60
+ .uis-btn--soft:hover { --_bg: color-mix(in oklab, var(--uis-primary-soft), var(--uis-primary) 10%); }
61
+ .uis-btn--danger { --_bg: var(--uis-danger); --_ink: var(--uis-danger-ink); --_bd: transparent; }
62
+ .uis-btn--danger:hover { --_bg: var(--uis-danger-hover); }
63
+ .uis-btn--light { --_bg: var(--uis-on-image); --_ink: var(--uis-neutral-950); --_bd: transparent; }
64
+ .uis-btn--light:hover { --_bg: var(--uis-neutral-100); }
65
+ .uis-btn--glass { --_bg: rgba(255, 255, 255, 0.12); --_ink: var(--uis-on-image); --_bd: rgba(255, 255, 255, 0.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
66
+ .uis-btn--glass:hover { --_bg: rgba(255, 255, 255, 0.22); }
67
+ .uis-btn--sm { height: var(--uis-h-sm); padding: 0 14px; font-size: calc(var(--uis-btn-size) - 1px); gap: 6px; }
68
+ .uis-btn--sm .uis-icon { width: 16px; height: 16px; }
69
+ .uis-btn--lg { height: var(--uis-h-lg); padding: 0 26px; font-size: calc(var(--uis-btn-size) + 1px); }
70
+ .uis-btn--icon { padding: 0; width: var(--uis-h-md); }
71
+ .uis-btn--icon.uis-btn--sm { width: var(--uis-h-sm); }
72
+ .uis-btn--icon.uis-btn--lg { width: var(--uis-h-lg); }
73
+ .uis-btn--block { width: 100%; }
74
+
75
+ /* Icon-only button used inside navs and toolbars */
76
+ .uis-iconbtn { position: relative; display: inline-grid; place-items: center; width: var(--uis-h-sm); height: var(--uis-h-sm); flex-shrink: 0; padding: 0; border: 0; border-radius: var(--uis-r-control); background: transparent; color: inherit; cursor: pointer; transition: background var(--uis-dur-fast) ease; text-decoration: none; }
77
+ .uis-iconbtn:hover { background: var(--uis-surface-3); }
78
+ .uis-iconbtn .uis-icon { width: 19px; height: 19px; }
79
+ .uis-count { position: absolute; top: 1px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--uis-accent); color: var(--uis-accent-ink); font: 700 10px/17px var(--uis-font-body); text-align: center; box-shadow: 0 0 0 2px var(--uis-float-bg); }
80
+ .uis-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--uis-accent); box-shadow: 0 0 0 2px var(--uis-surface); }
81
+
82
+ /* ---------- Badges ---------- */
83
+ .uis-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--uis-r-chip); background: var(--uis-surface-3); color: var(--uis-ink-2); font: 600 12px/1 var(--uis-font-body); white-space: nowrap; }
84
+ .uis-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
85
+ .uis-badge--primary { background: var(--uis-primary-soft); color: var(--uis-primary-soft-ink); }
86
+ .uis-badge--accent { background: var(--uis-accent-soft); color: var(--uis-accent-soft-ink); }
87
+ .uis-badge--success { background: var(--uis-success-soft); color: var(--uis-success-soft-ink); }
88
+ .uis-badge--warning { background: var(--uis-warning-soft); color: var(--uis-warning-soft-ink); }
89
+ .uis-badge--danger { background: var(--uis-danger-soft); color: var(--uis-danger-soft-ink); }
90
+ .uis-badge--info { background: var(--uis-info-soft); color: var(--uis-info-soft-ink); }
91
+ .uis-badge--solid.uis-badge--primary { background: var(--uis-primary); color: var(--uis-primary-ink); }
92
+ .uis-badge--solid.uis-badge--accent { background: var(--uis-accent); color: var(--uis-accent-ink); }
93
+ .uis-badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--uis-line-strong); }
94
+
95
+ /* ---------- Fields ---------- */
96
+ .uis-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
97
+ .uis-label { font: 600 13px/1.2 var(--uis-font-body); color: var(--uis-ink); }
98
+ /* One reserved line (hints and errors are written as one line); a longer message still wraps rather than clipping. */
99
+ .uis-hint { min-height: var(--uis-hint-reserve, 18px); font: 400 12.5px/1.4 var(--uis-font-body); color: var(--uis-ink-3); }
100
+ .uis-hint:empty { display: var(--uis-hint-slot, block); }
101
+ .uis-hint--error { color: var(--uis-danger-text); }
102
+ .uis-control { position: relative; display: flex; align-items: center; }
103
+ .uis-control > .uis-icon { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--uis-ink-3); pointer-events: none; }
104
+ .uis-control > .uis-kbd { position: absolute; right: 10px; }
105
+ .uis-input, .uis-select, .uis-textarea {
106
+ width: 100%; height: var(--uis-h-md); padding: 0 16px; border-radius: var(--uis-r-field);
107
+ border: 1px solid var(--uis-line-strong); background: var(--uis-surface); color: var(--uis-ink);
108
+ font: 400 15px/1.2 var(--uis-font-body); outline: none; appearance: none; -webkit-appearance: none;
109
+ transition: border-color var(--uis-dur-fast) ease, box-shadow var(--uis-dur-fast) ease;
110
+ }
111
+ .uis-input::placeholder, .uis-textarea::placeholder { color: var(--uis-ink-3); }
112
+ .uis-input:hover, .uis-select:hover, .uis-textarea:hover { border-color: var(--uis-ink-3); }
113
+ .uis-input:focus, .uis-select:focus, .uis-textarea:focus { border-color: var(--uis-focus-field); box-shadow: 0 0 0 var(--uis-focus-ring-width) var(--uis-focus-ring); }
114
+ .uis-control--icon .uis-input { padding-left: 42px; }
115
+ .uis-control--kbd .uis-input { padding-right: 52px; }
116
+ /* Password show/hide: physical right in every direction (owner rule), 40px hit area inside the field. */
117
+ .uis-control--reveal .uis-input { padding-right: 48px; }
118
+ .uis-reveal { position: absolute; right: 4px; top: 50%; translate: 0 -50%; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--uis-r-control); background: transparent; color: var(--uis-ink-3); cursor: pointer; transition: color var(--uis-dur-fast) ease, background var(--uis-dur-fast) ease; }
119
+ .uis-reveal:hover { color: var(--uis-ink); background: var(--uis-surface-3); }
120
+ .uis-reveal:focus-visible { outline: 2px solid var(--uis-focus); outline-offset: -2px; }
121
+ .uis-reveal .uis-icon { width: 18px; height: 18px; }
122
+ .uis-reveal:disabled { cursor: default; opacity: 0.5; background: transparent; }
123
+ /* Password + kbd hint: the hint sits left of the eye. */
124
+ .uis-control--reveal > .uis-kbd { right: 48px; }
125
+ .uis-control--reveal.uis-control--kbd .uis-input { padding-right: 92px; }
126
+ .uis-input--sm { height: var(--uis-h-sm); font-size: 14px; }
127
+ .uis-input--search { border-radius: var(--uis-r-search); background: var(--uis-search-bg); border-color: var(--uis-search-border); }
128
+ .uis-input--search:hover:not(:focus) { border-color: var(--uis-search-border-hover); }
129
+ .uis-input--invalid { border-color: var(--uis-danger); }
130
+ .uis-select { padding-right: 42px; cursor: pointer; }
131
+ .uis-control > .uis-select + .uis-icon { left: auto; right: 14px; }
132
+ .uis-textarea { height: auto; min-height: 104px; padding: 12px 16px; line-height: 1.5; resize: vertical; border-radius: min(var(--uis-r-field), 20px); }
133
+
134
+ .uis-switch, .uis-check { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 500 14px/1.3 var(--uis-font-body); color: var(--uis-ink); user-select: none; }
135
+ .uis-switch input, .uis-check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
136
+ .uis-switch__track { position: relative; width: 42px; height: 24px; flex-shrink: 0; border-radius: min(var(--uis-r-control), 12px); background: var(--uis-line-strong); transition: background var(--uis-dur) var(--uis-ease-out); }
137
+ .uis-switch__thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: min(var(--uis-r-control), 9px); background: var(--uis-neutral-0); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform var(--uis-dur) var(--uis-ease-out); }
138
+ .uis-switch input:checked + .uis-switch__track { background: var(--uis-primary); }
139
+ .uis-switch input:checked + .uis-switch__track .uis-switch__thumb { transform: translateX(18px); background: var(--uis-primary-ink); }
140
+ .uis-switch input:focus-visible + .uis-switch__track { outline: 2px solid var(--uis-focus); outline-offset: 2px; }
141
+ .uis-check__box { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: min(var(--uis-r-chip), 6px); border: var(--uis-check-border) solid var(--uis-line-strong); background: var(--uis-surface); color: transparent; transition: all var(--uis-dur-fast) ease; }
142
+ .uis-check__box .uis-icon { width: 14px; height: 14px; }
143
+ .uis-check input:checked + .uis-check__box { background: var(--uis-primary); border-color: var(--uis-primary); color: var(--uis-primary-ink); }
144
+ .uis-check input:focus-visible + .uis-check__box { outline: 2px solid var(--uis-focus); outline-offset: 2px; }
145
+
146
+ /* ---------- Surfaces ---------- */
147
+ .uis-card { background: var(--uis-surface); border: 1px solid var(--uis-card-border); border-radius: var(--uis-r-card); padding: var(--uis-pad-card); box-shadow: var(--uis-shadow-sm); }
148
+ .uis-card--flat { box-shadow: none; }
149
+ .uis-card--raised { box-shadow: var(--uis-shadow-md); }
150
+ .uis-card--sunken { background: var(--uis-surface-2); box-shadow: none; }
151
+ .uis-card--interactive { cursor: pointer; transition: box-shadow var(--uis-dur) var(--uis-ease-out), border-color var(--uis-dur) var(--uis-ease-out); }
152
+ .uis-card--interactive:hover { box-shadow: var(--uis-shadow-md); border-color: var(--uis-line-strong); }
153
+ .uis-card--flush { padding: 0; overflow: hidden; }
154
+ .uis-media { border-radius: var(--uis-r-media); overflow: hidden; background: var(--uis-surface-3); }
155
+ .uis-media > img, .uis-media > video { width: 100%; height: 100%; object-fit: cover; display: block; }
156
+ .uis-float { background: var(--uis-float-bg); border: 1px solid var(--uis-float-border); backdrop-filter: var(--uis-float-blur); -webkit-backdrop-filter: var(--uis-float-blur); box-shadow: var(--uis-shadow-float); }
157
+ .uis-divider { height: 1px; width: 100%; border: 0; margin: 0; background: var(--uis-line); flex-shrink: 0; }
158
+ .uis-divider--v { width: 1px; height: 20px; }
159
+ .uis-kbd { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border-radius: min(var(--uis-r-chip), 6px); border: 1px solid var(--uis-line); background: var(--uis-surface-2); color: var(--uis-ink-3); font: 500 11px/1 var(--uis-font-mono); }
160
+
161
+ /* ---------- Tabs ---------- */
162
+ .uis-tabs { display: inline-flex; align-items: center; gap: 4px; }
163
+ .uis-tab { display: inline-flex; align-items: center; gap: 8px; height: var(--uis-h-sm); padding: 0 14px; border: 0; border-radius: var(--uis-r-control); background: transparent; color: var(--uis-ink-2); font: 500 14px/1 var(--uis-font-body); white-space: nowrap; cursor: pointer; text-decoration: none; transition: background var(--uis-dur-fast) ease, color var(--uis-dur-fast) ease; }
164
+ .uis-tab:hover { color: var(--uis-ink); background: var(--uis-surface-3); }
165
+ .uis-tab[aria-selected="true"] { color: var(--uis-ink); background: var(--uis-surface-3); font-weight: 600; }
166
+ .uis-tabs--segmented { padding: 4px; border-radius: calc(var(--uis-r-control) + 4px); background: var(--uis-surface-2); border: 1px solid var(--uis-line); }
167
+ .uis-tabs--segmented .uis-tab:hover { background: transparent; }
168
+ .uis-tabs--segmented .uis-tab[aria-selected="true"] { background: var(--uis-surface); box-shadow: var(--uis-shadow-sm); }
169
+ .uis-tabs--pill .uis-tab[aria-selected="true"] { background: var(--uis-primary); color: var(--uis-primary-ink); }
170
+ .uis-tabs--underline { gap: 24px; border-bottom: 1px solid var(--uis-line); display: flex; }
171
+ .uis-tabs--underline .uis-tab { height: 44px; padding: 0; border-radius: 0; background: transparent; box-shadow: inset 0 -2px 0 transparent; }
172
+ .uis-tabs--underline .uis-tab[aria-selected="true"] { background: transparent; box-shadow: inset 0 -2px 0 var(--uis-ink); }
173
+
174
+ /* ---------- Avatar ---------- */
175
+ .uis-avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; overflow: hidden; border-radius: var(--uis-r-avatar); background: var(--uis-accent-soft); color: var(--uis-accent-soft-ink); font: 600 13px/1 var(--uis-font-body); }
176
+ .uis-avatar img { width: 100%; height: 100%; object-fit: cover; }
177
+ .uis-avatar--art { background: var(--uis-surface-3); }
178
+ .uis-avatar__art, .uis-avatar__art svg { display: block; width: 100%; height: 100%; }
179
+ .uis-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
180
+ .uis-avatar--lg { width: 48px; height: 48px; font-size: 16px; }
181
+ .uis-avatar--xl { width: 72px; height: 72px; font-size: 24px; }
182
+ .uis-avatars { display: inline-flex; }
183
+ .uis-avatars .uis-avatar { box-shadow: 0 0 0 2px var(--uis-surface); }
184
+ .uis-avatars .uis-avatar + .uis-avatar { margin-left: -8px; }
185
+
186
+ /* ---------- Overlays ---------- */
187
+ @keyframes uis-pop { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
188
+ @keyframes uis-fade { from { opacity: 0; } to { opacity: 1; } }
189
+ @keyframes uis-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
190
+ @keyframes uis-rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
191
+ .uis-popover { border-radius: var(--uis-r-panel); padding: 20px; min-width: 260px; display: flex; flex-direction: column; gap: 12px; color: var(--uis-ink); animation: uis-pop var(--uis-dur) var(--uis-ease-out); transform-origin: bottom center; }
192
+ .uis-popover__title { font: 600 15px/1.3 var(--uis-font-body); margin: 0; }
193
+ .uis-menu { display: flex; flex-direction: column; gap: 2px; }
194
+ .uis-menu__item { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: min(var(--uis-r-control), 14px); color: var(--uis-ink); font: 500 14px/1.2 var(--uis-font-body); text-decoration: none; cursor: pointer; }
195
+ .uis-menu__item:hover { background: var(--uis-surface-3); }
196
+ .uis-menu__item .uis-icon { color: var(--uis-ink-3); width: 18px; height: 18px; }
197
+ .uis-menu__item .uis-kbd { margin-left: auto; }
198
+ .uis-chips { display: flex; flex-wrap: wrap; gap: 8px; }
199
+ .uis-chip { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: var(--uis-r-control); background: var(--uis-surface-3); color: var(--uis-ink); font: 500 14.5px/1 var(--uis-font-body); text-decoration: none; white-space: nowrap; }
200
+ .uis-chip:hover { background: var(--uis-line); }
201
+ .uis-scrim { position: absolute; inset: 0; background: var(--uis-scrim); animation: uis-fade var(--uis-dur) ease; z-index: 60; }
202
+ .uis-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); z-index: 61; display: flex; flex-direction: column; background: var(--uis-surface); border-left: 1px solid var(--uis-line); box-shadow: var(--uis-shadow-lg); animation: uis-slide var(--uis-dur-slow) var(--uis-ease-out); color: var(--uis-ink); }
203
+ .uis-drawer--floating { top: 12px; right: 12px; bottom: 12px; border: 1px solid var(--uis-line); border-radius: var(--uis-r-panel); overflow: hidden; }
204
+ .uis-drawer--left { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--uis-line); }
205
+ .uis-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 16px 24px; border-bottom: 1px solid var(--uis-line); }
206
+ .uis-drawer__title { font: 600 18px/1.3 var(--uis-font-body); margin: 0; }
207
+ .uis-drawer__body { flex: 1; overflow: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
208
+ .uis-drawer__foot { display: flex; gap: 12px; padding: 16px 24px 20px; border-top: 1px solid var(--uis-line); }
209
+ .uis-dialog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 61; width: min(480px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 16px; padding: 28px; background: var(--uis-surface); border: 1px solid var(--uis-line); border-radius: var(--uis-r-panel); box-shadow: var(--uis-shadow-lg); color: var(--uis-ink); }
210
+ .uis-dialog__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
211
+ .uis-tooltip { display: inline-block; padding: 7px 10px; border-radius: min(var(--uis-r-chip), 8px); background: var(--uis-inverse); color: var(--uis-inverse-ink); font: 500 12px/1.2 var(--uis-font-body); white-space: nowrap; box-shadow: var(--uis-shadow-md); pointer-events: none; }
212
+ .uis-toast { display: flex; align-items: flex-start; gap: 12px; width: 360px; max-width: 100%; padding: 14px 14px 14px 16px; border-radius: min(var(--uis-r-card), 20px); background: var(--uis-inverse); color: var(--uis-inverse-ink); box-shadow: var(--uis-shadow-lg); font: 400 14px/1.45 var(--uis-font-body); animation: uis-rise var(--uis-dur) var(--uis-ease-out); }
213
+ .uis-toast__icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--uis-success); margin-top: 1px; }
214
+ .uis-toast strong { display: block; font-weight: 600; margin-bottom: 2px; }
215
+ .uis-toast .uis-btn--ghost, .uis-toast .uis-btn--outline { --_ink: var(--uis-inverse-ink); --_bd: transparent; }
216
+ .uis-toast .uis-btn--ghost:hover, .uis-toast .uis-btn--outline:hover { --_bg: color-mix(in oklab, var(--uis-inverse-ink) 14%, transparent); }
217
+ .uis-alert { display: flex; gap: 12px; padding: 14px 16px; border-radius: min(var(--uis-r-card), 16px); font: 400 14px/1.5 var(--uis-font-body); background: var(--uis-info-soft); color: var(--uis-info-soft-ink); }
218
+ .uis-alert--success { background: var(--uis-success-soft); color: var(--uis-success-soft-ink); }
219
+ .uis-alert--warning { background: var(--uis-warning-soft); color: var(--uis-warning-soft-ink); }
220
+ .uis-alert--danger { background: var(--uis-danger-soft); color: var(--uis-danger-soft-ink); }
221
+
222
+ /* ---------- Data ---------- */
223
+ /* container-type sizes the value to the stat's width but gives it no content width of its own,
224
+ so a floor keeps it from collapsing inside flex rows and other shrink-to-fit parents. */
225
+ .uis-stat { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-inline-size: 8rem; container-type: inline-size; }
226
+ .uis-stat__label { font: 500 13px/1.3 var(--uis-font-body); color: var(--uis-ink-3); display: flex; align-items: center; gap: 8px; }
227
+ .uis-stat__value { font-family: var(--uis-font-display); font-weight: var(--uis-display-weight); font-size: clamp(20px, 15cqi, 32px); line-height: 1.05; letter-spacing: var(--uis-display-tracking); color: var(--uis-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
228
+ .uis-stat__delta { font: 600 12.5px/1 var(--uis-font-body); display: inline-flex; align-items: center; gap: 4px; }
229
+ .uis-stat__delta--up { color: var(--uis-success-text); }
230
+ .uis-stat__delta--down { color: var(--uis-danger-text); }
231
+ .uis-table-wrap { border: 1px solid var(--uis-card-border); border-radius: var(--uis-r-card); overflow: hidden; overflow-x: auto; background: var(--uis-surface); }
232
+ .uis-table { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 14px/1.4 var(--uis-font-body); color: var(--uis-ink-2); }
233
+ .uis-table th { text-align: left; font: 600 12px/1.2 var(--uis-font-body); color: var(--uis-ink-3); padding: 12px 16px; background: var(--uis-surface-2); border-bottom: 1px solid var(--uis-line); white-space: nowrap; }
234
+ .uis-table td { padding: 14px 16px; border-bottom: 1px solid var(--uis-line); vertical-align: middle; }
235
+ .uis-table tr:last-child td { border-bottom: 0; }
236
+ .uis-table tbody tr:hover td { background: var(--uis-surface-2); }
237
+ .uis-table td strong { color: var(--uis-ink); font-weight: 600; }
238
+ .uis-progress { height: 6px; border-radius: 999px; background: var(--uis-surface-3); overflow: hidden; }
239
+ .uis-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--uis-primary); }
240
+
241
+ /* ---------- Logo ---------- */
242
+ .uis-logo { --_mark: 30px; --_word: 19px; display: inline-flex; align-items: center; gap: calc(var(--_mark) * 0.34); color: inherit; text-decoration: none; line-height: 1; flex-shrink: 0; }
243
+ .uis-logo--sm { --_mark: 24px; --_word: 16px; }
244
+ .uis-logo--lg { --_mark: 42px; --_word: 26px; }
245
+ .uis-logo--xl { --_mark: 64px; --_word: 40px; }
246
+ .uis-logo--stacked { flex-direction: column; gap: calc(var(--_mark) * 0.45); text-align: center; --_mark: 48px; }
247
+ .uis-logo--stacked.uis-logo--sm { --_mark: 36px; }
248
+ .uis-logo--stacked.uis-logo--lg { --_mark: 72px; }
249
+ .uis-logo--stacked.uis-logo--xl { --_mark: 104px; }
250
+ .uis-logo__mark { width: var(--_mark); height: var(--_mark); display: block; flex-shrink: 0; overflow: visible; }
251
+ .uis-logo__img { height: calc(var(--_mark) * 1.1); width: auto; display: block; }
252
+ .uis-logo__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
253
+ .uis-logo--stacked .uis-logo__text { align-items: center; gap: 6px; }
254
+ .uis-logo__word { font-family: var(--uis-wordmark-font); font-weight: var(--uis-wordmark-weight); font-stretch: var(--uis-wordmark-stretch); font-size: var(--_word); letter-spacing: var(--uis-wordmark-tracking); text-transform: var(--uis-wordmark-case); white-space: nowrap; color: var(--uis-wordmark); }
255
+ /* A brand wordmark color is for the page; on photos and inverse panels the wordmark follows the text. */
256
+ [data-tone="image"] .uis-logo__word, .uis-overlaymenu--split .uis-logo__word, .uis-overlaymenu__panel .uis-logo__word, .uis-stacked__utility .uis-logo__word { color: inherit; }
257
+ [data-tone="image"] .uis-float .uis-logo__word { color: var(--uis-wordmark); }
258
+ .uis-logo__caption { font: 500 calc(var(--_word) * 0.46)/1 var(--uis-font-mono); letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.62; white-space: nowrap; color: inherit; }
259
+
260
+ /* ---------- Nav: shared ---------- */
261
+ .uis-navlink { display: inline-flex; align-items: center; gap: 8px; height: var(--uis-h-sm); padding: 0 14px; border-radius: var(--uis-r-control); color: var(--uis-ink-2); font: 500 14px/1 var(--uis-font-body); text-decoration: none; white-space: nowrap; transition: background var(--uis-dur-fast) ease, color var(--uis-dur-fast) ease; }
262
+ .uis-navlink:hover { color: var(--uis-ink); background: var(--uis-surface-3); }
263
+ .uis-navlink[aria-current="page"] { color: var(--uis-ink); background: var(--uis-surface-3); font-weight: 600; }
264
+ .uis-navlink .uis-icon { width: 18px; height: 18px; }
265
+ [data-tone="image"] { color: var(--uis-on-image); }
266
+ [data-tone="image"] .uis-navlink { color: rgba(255, 255, 255, 0.82); }
267
+ [data-tone="image"] .uis-navlink:hover, [data-tone="image"] .uis-navlink[aria-current="page"] { color: var(--uis-on-image); background: rgba(255, 255, 255, 0.14); }
268
+ [data-tone="image"] .uis-iconbtn:hover { background: rgba(255, 255, 255, 0.14); }
269
+ .uis-navsep { width: 1px; height: 20px; background: var(--uis-line); margin: 0 4px; flex-shrink: 0; }
270
+ [data-tone="image"] .uis-navsep { background: rgba(255, 255, 255, 0.24); }
271
+ [data-tone="image"] .uis-float { color: var(--uis-ink); }
272
+ [data-tone="image"] .uis-float .uis-navlink { color: var(--uis-ink-2); }
273
+ [data-tone="image"] .uis-float .uis-navlink:hover, [data-tone="image"] .uis-float .uis-navlink[aria-current="page"] { color: var(--uis-ink); background: var(--uis-surface-3); }
274
+ [data-tone="image"] .uis-float .uis-iconbtn:hover { background: var(--uis-surface-3); }
275
+ [data-tone="image"] .uis-float .uis-navsep { background: var(--uis-line); }
276
+
277
+ /* Dock: floating bottom bar with popover panels (logo sits at the top of the page) */
278
+ .uis-docklayer { position: absolute; inset: 0; z-index: 40; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(16px, 3vw, 36px) clamp(16px, 4vw, 48px) max(clamp(16px, 3vw, 36px), env(safe-area-inset-bottom)); }
279
+ .uis-docklayer[data-fixed] { position: fixed; }
280
+ .uis-docklayer__head { display: flex; align-items: center; pointer-events: auto; }
281
+ .uis-docklayer__head[data-placement="center"] { justify-content: center; }
282
+ .uis-docklayer__head[data-placement="right"] { justify-content: flex-end; }
283
+ .uis-dockwrap { position: relative; align-self: center; pointer-events: auto; max-width: 100%; }
284
+ .uis-dock { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: var(--uis-r-shell); color: var(--uis-ink); }
285
+ .uis-dock .uis-btn { flex-shrink: 0; }
286
+ .uis-dock__panel { position: absolute; left: 0; right: 0; bottom: 0; min-width: 300px; z-index: 0; padding: 24px 24px calc(var(--uis-h-sm) + 44px); border-radius: max(var(--uis-r-panel), min(var(--uis-r-shell), 28px)); display: flex; flex-direction: column; gap: 14px; color: var(--uis-ink); animation: uis-pop var(--uis-dur) var(--uis-ease-out); transform-origin: bottom center; }
287
+
288
+ /* Island: detached floating top bar */
289
+ .uis-islandlayer { position: absolute; top: clamp(12px, 2vw, 24px); left: 0; right: 0; z-index: 40; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
290
+ .uis-islandlayer[data-fixed] { position: fixed; }
291
+ .uis-island { pointer-events: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; width: min(100%, 1040px); padding: 6px 6px 6px 18px; border-radius: var(--uis-r-shell); color: var(--uis-ink); }
292
+ .uis-island > :nth-child(1) { justify-self: start; display: flex; align-items: center; gap: 2px; }
293
+ .uis-island > :nth-child(2) { justify-self: center; display: flex; align-items: center; gap: 2px; }
294
+ .uis-island > :nth-child(3) { justify-self: end; display: flex; align-items: center; gap: 6px; }
295
+
296
+ /* Bar: classic full-width top bar */
297
+ .uis-bar { position: relative; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: 72px; padding: 0 clamp(16px, 4vw, 48px); background: var(--uis-surface); border-bottom: 1px solid var(--uis-line); color: var(--uis-ink); }
298
+ .uis-bar[data-transparent] { position: absolute; top: 0; left: 0; right: 0; height: 92px; background: transparent; border-bottom: 0; }
299
+ .uis-bar__pill { display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: var(--uis-r-shell); background: color-mix(in srgb, var(--uis-neutral-950) 30%, transparent); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45); }
300
+ .uis-bar__brand { display: inline-flex; align-items: center; padding: 0 10px 0 8px; }
301
+ .uis-bar__brand--center { padding: 0; }
302
+ .uis-bar[data-transparent] .uis-navlink { height: 34px; }
303
+ .uis-bar[data-transparent] .uis-btn--light { height: 34px; }
304
+ .uis-bar[data-sticky] { position: sticky; top: 0; }
305
+ .uis-bar > :nth-child(1) { justify-self: start; display: flex; align-items: center; gap: 2px; }
306
+ .uis-bar > :nth-child(2) { justify-self: center; display: flex; align-items: center; gap: 2px; }
307
+ .uis-bar > :nth-child(3) { justify-self: end; display: flex; align-items: center; gap: 8px; }
308
+
309
+ /* Stacked: utility row + logo row + link row (commerce, editorial) */
310
+ .uis-stacked { position: relative; z-index: 40; background: var(--uis-surface); border-bottom: 1px solid var(--uis-line); color: var(--uis-ink); }
311
+ .uis-stacked__utility { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 38px; padding: 0 clamp(16px, 4vw, 48px); background: var(--uis-inverse); color: var(--uis-inverse-ink); font: 500 12.5px/1 var(--uis-font-body); }
312
+ .uis-stacked__utility a { color: inherit; text-decoration: none; opacity: 0.82; }
313
+ .uis-stacked__utility a:hover { opacity: 1; }
314
+ .uis-stacked__utility > div { display: flex; align-items: center; gap: 20px; }
315
+ .uis-stacked__main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: 84px; padding: 0 clamp(16px, 4vw, 48px); }
316
+ .uis-stacked__main > :nth-child(1) { justify-self: start; display: flex; align-items: center; gap: 8px; }
317
+ .uis-stacked__main > :nth-child(2) { justify-self: center; }
318
+ .uis-stacked__main > :nth-child(3) { justify-self: end; display: flex; align-items: center; gap: 4px; }
319
+ .uis-stacked__links { display: flex; align-items: center; justify-content: center; gap: 4px; height: 52px; border-top: 1px solid var(--uis-line); }
320
+
321
+ /* Minimal: logo + menu button, opens a full-screen menu */
322
+ .uis-minimal { position: absolute; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 84px; padding: 0 clamp(16px, 4vw, 48px); color: var(--uis-ink); }
323
+ .uis-minimal[data-placement="center"] { display: grid; grid-template-columns: 1fr auto 1fr; }
324
+ .uis-minimal[data-placement="center"] > :nth-child(1) { justify-self: start; }
325
+ .uis-minimal[data-placement="center"] > :nth-child(3) { justify-self: end; }
326
+ .uis-minimal[data-placement="right"] { flex-direction: row-reverse; }
327
+ .uis-minimal__actions { display: flex; align-items: center; gap: 8px; }
328
+ .uis-menubtn { display: inline-flex; align-items: center; gap: 10px; height: var(--uis-h-md); padding: 0 18px 0 14px; border-radius: var(--uis-r-control); border: 1px solid var(--uis-float-border); background: var(--uis-float-bg); backdrop-filter: var(--uis-float-blur); -webkit-backdrop-filter: var(--uis-float-blur); color: var(--uis-ink); font: 600 var(--uis-btn-size)/1 var(--uis-font-body); letter-spacing: var(--uis-btn-tracking); text-transform: var(--uis-btn-case); cursor: pointer; }
329
+ .uis-menubtn .uis-icon { width: 18px; height: 18px; }
330
+ .uis-overlaymenu { position: absolute; inset: 0; z-index: 39; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; padding: 128px clamp(16px, 4vw, 48px) 48px; background: var(--uis-surface); color: var(--uis-ink); animation: uis-fade var(--uis-dur) ease; }
331
+ .uis-overlaymenu__links { display: flex; flex-direction: column; gap: 6px; }
332
+ .uis-overlaymenu__links a { display: flex; align-items: baseline; gap: 18px; color: var(--uis-ink); text-decoration: none; font-family: var(--uis-font-display); font-weight: var(--uis-display-weight); letter-spacing: var(--uis-display-tracking); text-transform: var(--uis-display-case); font-stretch: var(--uis-display-stretch); font-size: clamp(36px, 4.6vw, 64px); line-height: 1.08; }
333
+ .uis-overlaymenu__links a span { font: 500 13px/1 var(--uis-font-mono); color: var(--uis-ink-3); letter-spacing: 0; }
334
+ .uis-overlaymenu__links a:hover, .uis-overlaymenu__links a[aria-current="page"] { color: var(--uis-primary-text); }
335
+ .uis-overlaymenu__aside { display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; font: 400 15px/1.6 var(--uis-font-body); color: var(--uis-ink-2); }
336
+ .uis-overlaymenu__links a .uis-icon { width: 0.5em; height: 0.5em; margin-left: auto; opacity: 0; transform: translate(-8px, 8px); transition: opacity var(--uis-dur) var(--uis-ease-out), transform var(--uis-dur) var(--uis-ease-out); align-self: center; }
337
+ .uis-overlaymenu__links a:hover .uis-icon { opacity: 1; transform: none; }
338
+ .uis-overlaymenu__links a { border-bottom: 1px solid var(--uis-line); padding: 6px 0 10px; }
339
+ /* split: dark index + brand panel */
340
+ .uis-overlaymenu--split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0; padding: 0; background: var(--uis-inverse); color: var(--uis-inverse-ink); }
341
+ .uis-overlaymenu--split .uis-overlaymenu__main { padding: 128px clamp(16px, 4vw, 48px) 48px; }
342
+ .uis-overlaymenu--split .uis-overlaymenu__links a { color: var(--uis-inverse-ink); border-bottom-color: color-mix(in srgb, var(--uis-inverse-ink) 16%, transparent); }
343
+ .uis-overlaymenu--split .uis-overlaymenu__links a span { color: color-mix(in srgb, var(--uis-inverse-ink) 55%, transparent); }
344
+ .uis-overlaymenu--split .uis-overlaymenu__links a:hover { color: var(--uis-accent); }
345
+ .uis-overlaymenu__panel { display: flex; flex-direction: column; justify-content: space-between; padding: 128px clamp(16px, 3vw, 40px) 48px; background: var(--uis-primary); color: var(--uis-primary-ink); }
346
+ .uis-overlaymenu__panel .uis-overlaymenu__aside { color: inherit; opacity: 0.85; }
347
+ /* drawer: side panel */
348
+ .uis-overlaymenu--drawer { inset: 12px 12px 12px auto; width: min(460px, calc(100% - 24px)); z-index: 62; display: flex; flex-direction: column; gap: 24px; padding: 20px 28px 28px; border-radius: var(--uis-r-panel); box-shadow: var(--uis-shadow-lg); animation: uis-slide var(--uis-dur-slow) var(--uis-ease-out); }
349
+ .uis-overlaymenu--drawer .uis-overlaymenu__links a { font-size: clamp(28px, 3vw, 40px); }
350
+ .uis-overlaymenu--drawer .uis-overlaymenu__aside { margin-top: auto; }
351
+ .uis-overlaymenu__top { display: flex; align-items: center; justify-content: space-between; }
352
+ /* corners: text-only bar */
353
+ .uis-minimal--corners { display: grid; grid-template-columns: 1fr auto 1fr; }
354
+ .uis-minimal--corners > :first-child { justify-self: start; }
355
+ .uis-minimal--corners > :last-child { justify-self: end; }
356
+ .uis-textbtn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0; border: 0; background: none; color: inherit; font: 600 12px/1 var(--uis-font-body); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
357
+ .uis-textbtn--line { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 calc(50% + 10px); background-repeat: no-repeat; }
358
+ .uis-textbtn:hover { opacity: 0.72; }
359
+ /* capsule: centered floating Menu capsule */
360
+ .uis-minimal--capsule { display: grid; grid-template-columns: 1fr auto 1fr; }
361
+ .uis-minimal--capsule > :last-child { justify-self: end; }
362
+ .uis-capsule { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--uis-r-shell); color: var(--uis-ink); }
363
+ .uis-capsule__menu { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 10px; border: 0; border-radius: var(--uis-r-control); background: var(--uis-inverse); color: var(--uis-inverse-ink); font: 600 13px/1 var(--uis-font-body); cursor: pointer; }
364
+ .uis-capsule__menu .uis-icon { width: 16px; height: 16px; }
365
+ .uis-capsule__chip { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: var(--uis-r-control); color: var(--uis-ink-2); font: 500 13px/1 var(--uis-font-body); text-decoration: none; }
366
+ .uis-capsule__chip:hover { background: var(--uis-surface-3); color: var(--uis-ink); }
367
+
368
+ /* Mobile */
369
+ .uis-mbar { position: relative; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 64px; padding: 0 12px 0 16px; background: var(--uis-surface); border-bottom: 1px solid var(--uis-line); color: var(--uis-ink); }
370
+ .uis-mbar[data-transparent] { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom-color: transparent; }
371
+ .uis-mbar[data-placement="center"] { display: grid; grid-template-columns: 1fr auto 1fr; }
372
+ .uis-mbar[data-placement="center"] > :nth-child(1) { justify-self: start; }
373
+ .uis-mbar[data-placement="center"] > :nth-child(3) { justify-self: end; }
374
+ .uis-mbar__actions { display: flex; align-items: center; gap: 2px; }
375
+ .uis-sheet { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 61; display: flex; flex-direction: column; padding: 8px 8px 12px; border-radius: max(var(--uis-r-panel), 12px); background: var(--uis-surface); box-shadow: var(--uis-shadow-lg); color: var(--uis-ink); animation: uis-rise var(--uis-dur-slow) var(--uis-ease-out); }
376
+ .uis-sheet__handle { width: 36px; height: 4px; border-radius: 2px; background: var(--uis-line-strong); margin: 4px auto 12px; }
377
+ .uis-sheet__link { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 16px; border-radius: min(var(--uis-r-control), 16px); color: var(--uis-ink); font: 500 17px/1.2 var(--uis-font-body); text-decoration: none; }
378
+ .uis-sheet__link[aria-current="page"] { background: var(--uis-surface-3); font-weight: 600; }
379
+ .uis-sheet__link .uis-icon { width: 18px; height: 18px; color: var(--uis-ink-3); }
380
+ .uis-sheet__foot { display: flex; gap: 8px; padding: 12px 8px 0; }
381
+ .uis-sheet__foot .uis-btn { flex: 1; }
382
+ .uis-tabbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; padding: 8px 8px max(10px, env(safe-area-inset-bottom)); background: var(--uis-float-bg); border-top: 1px solid var(--uis-float-border); backdrop-filter: var(--uis-float-blur); -webkit-backdrop-filter: var(--uis-float-blur); color: var(--uis-ink); }
383
+ .uis-tabbar--floating { left: 12px; right: 12px; bottom: 12px; padding: 6px; border: 1px solid var(--uis-float-border); border-radius: var(--uis-r-shell); box-shadow: var(--uis-shadow-float); }
384
+ .uis-tabbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; border-radius: var(--uis-r-control); color: var(--uis-ink-3); font: 500 11px/1 var(--uis-font-body); text-decoration: none; position: relative; }
385
+ .uis-tabbar__item .uis-icon { width: 22px; height: 22px; }
386
+ .uis-tabbar__item[aria-current="page"] { color: var(--uis-ink); font-weight: 600; }
387
+ .uis-tabbar--floating .uis-tabbar__item[aria-current="page"] { background: var(--uis-surface-3); }
388
+
389
+ /* ---------- App shells (backend) ---------- */
390
+ .uis-app { position: relative; display: grid; height: 100%; min-height: 0; background: var(--uis-bg); color: var(--uis-ink); overflow: hidden; }
391
+ .uis-app--sidebar { grid-template-columns: 264px minmax(0, 1fr); }
392
+ .uis-app--rail { grid-template-columns: 76px minmax(0, 1fr); }
393
+ .uis-app--inset { grid-template-columns: 252px minmax(0, 1fr); background: var(--uis-surface-2); padding: 10px 10px 10px 0; }
394
+ .uis-app--topbar { grid-template-rows: auto minmax(0, 1fr); }
395
+ .uis-app--dock { grid-template-rows: auto minmax(0, 1fr); }
396
+ .uis-app__main { min-width: 0; min-height: 0; overflow: auto; }
397
+ .uis-app--inset .uis-app__main { background: var(--uis-bg); border: 1px solid var(--uis-line); border-radius: var(--uis-r-panel); box-shadow: var(--uis-shadow-sm); }
398
+ .uis-app--dock .uis-app__main { position: relative; }
399
+ .uis-app--dock .uis-app__pad { padding-bottom: 96px; }
400
+
401
+ .uis-sidebar { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: auto; padding: 16px 12px; background: var(--uis-nav-bg); border-right: 1px solid var(--uis-line); }
402
+ .uis-app--inset .uis-sidebar { background: transparent; border-right: 0; padding: 8px 12px; }
403
+ .uis-sidebar__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 6px; }
404
+ .uis-sidebar__head[data-placement="center"] { justify-content: center; }
405
+ .uis-sidebar__head[data-placement="right"] { flex-direction: row-reverse; }
406
+ .uis-workspace { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 1px solid var(--uis-line); border-radius: min(var(--uis-r-control), 14px); background: var(--uis-surface); color: var(--uis-ink); cursor: pointer; text-align: left; font-family: var(--uis-font-body); }
407
+ .uis-workspace__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
408
+ .uis-workspace__name { font: 600 13.5px/1.2 var(--uis-font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
409
+ .uis-workspace__plan { font: 400 12px/1.2 var(--uis-font-body); color: var(--uis-ink-3); }
410
+ .uis-workspace__glyph { display: grid; place-items: center; width: 30px; height: 30px; border-radius: min(var(--uis-r-control), 10px); background: var(--uis-primary); color: var(--uis-primary-ink); font: 700 12px/1 var(--uis-font-body); flex-shrink: 0; }
411
+ .uis-navgroup { display: flex; flex-direction: column; gap: 2px; }
412
+ .uis-navgroup__label { padding: 10px 10px 6px; font: 600 11px/1 var(--uis-font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--uis-ink-3); }
413
+ .uis-navitem { position: relative; display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 0 10px; border-radius: var(--uis-r-control); color: var(--uis-ink-2); font: 500 14px/1.2 var(--uis-font-body); text-decoration: none; transition: background var(--uis-dur-fast) ease, color var(--uis-dur-fast) ease; }
414
+ .uis-navitem .uis-icon { width: 18px; height: 18px; color: var(--uis-ink-3); }
415
+ .uis-navitem:hover { background: var(--uis-surface-3); color: var(--uis-ink); }
416
+ .uis-navitem[aria-current="page"] { background: var(--uis-nav-active-bg); color: var(--uis-nav-active-ink); font-weight: 600; }
417
+ .uis-navitem[aria-current="page"]::before, .uis-rail .uis-railitem[aria-current="page"]::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 2px; background: var(--uis-nav-active-bar); }
418
+ .uis-navitem[aria-current="page"] .uis-icon { color: currentColor; }
419
+ .uis-app--inset .uis-navitem[aria-current="page"] { background: var(--uis-surface); color: var(--uis-ink); box-shadow: var(--uis-shadow-sm); }
420
+ .uis-navitem__badge { margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: var(--uis-r-chip); background: var(--uis-surface-3); color: var(--uis-ink-2); font: 600 11px/1 var(--uis-font-body); }
421
+ .uis-navitem[aria-current="page"] .uis-navitem__badge { background: var(--uis-primary); color: var(--uis-primary-ink); }
422
+ .uis-sidebar__foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 6px 2px; border-top: 1px solid var(--uis-line); }
423
+ .uis-account { width: 100%; padding: 10px 8px; border: 0; border-top: 1px solid var(--uis-line); background: transparent; color: var(--uis-ink); text-align: left; font-family: var(--uis-font-body); cursor: pointer; border-radius: 0; }
424
+ .uis-account:hover { background: var(--uis-surface-3); border-radius: min(var(--uis-r-control), 14px); border-top-color: transparent; }
425
+ .uis-user { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
426
+ .uis-user__name { font: 600 13.5px/1.2 var(--uis-font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
427
+ .uis-user__meta { font: 400 12px/1.2 var(--uis-font-body); color: var(--uis-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
428
+
429
+ .uis-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; padding: 16px 0; background: var(--uis-nav-bg); border-right: 1px solid var(--uis-line); }
430
+ .uis-rail__head { display: grid; place-items: center; height: 44px; margin-bottom: 10px; }
431
+ .uis-rail__group { display: flex; flex-direction: column; align-items: center; gap: 4px; }
432
+ .uis-rail__foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
433
+ .uis-railitem { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--uis-r-control); color: var(--uis-ink-3); text-decoration: none; transition: background var(--uis-dur-fast) ease, color var(--uis-dur-fast) ease; }
434
+ .uis-railitem .uis-icon { width: 20px; height: 20px; }
435
+ .uis-railitem:hover { background: var(--uis-surface-3); color: var(--uis-ink); }
436
+ .uis-railitem[aria-current="page"] { background: var(--uis-primary-soft); color: var(--uis-primary-soft-ink); }
437
+ .uis-rail .uis-railitem[aria-current="page"] { background: var(--uis-nav-active-bg); color: var(--uis-nav-active-ink); }
438
+ .uis-railitem > .uis-tooltip { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); z-index: 5; opacity: 0; transition: opacity var(--uis-dur-fast) ease; }
439
+ .uis-railitem:hover > .uis-tooltip, .uis-railitem > .uis-tooltip[data-show] { opacity: 1; }
440
+ .uis-appdock .uis-railitem > .uis-tooltip { left: 50%; top: auto; bottom: calc(100% + 12px); transform: translateX(-50%); }
441
+ .uis-railitem > .uis-dot { top: 8px; right: 8px; }
442
+
443
+ .uis-topbar { position: relative; z-index: 20; display: flex; align-items: center; gap: 20px; height: 64px; padding: 0 20px 0 24px; background: var(--uis-surface); border-bottom: 1px solid var(--uis-line); color: var(--uis-ink); }
444
+ .uis-topbar__nav { display: flex; align-items: center; gap: 2px; }
445
+ .uis-topbar__end { margin-left: auto; display: flex; align-items: center; gap: 6px; }
446
+ .uis-topbar__search { width: 280px; margin-right: 6px; }
447
+ .uis-topbar[data-placement="center"] { display: grid; grid-template-columns: 1fr auto 1fr; }
448
+ .uis-topbar[data-placement="center"] > :nth-child(1) { justify-self: start; }
449
+ .uis-topbar[data-placement="center"] > :nth-child(3) { justify-self: end; margin-left: 0; }
450
+
451
+ .uis-appdocklayer { position: absolute; left: 0; right: 0; bottom: clamp(12px, 2vw, 24px); z-index: 40; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
452
+ .uis-appdock { pointer-events: auto; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: var(--uis-r-shell); color: var(--uis-ink); }
453
+ .uis-appdock .uis-railitem { width: 42px; height: 42px; }
454
+ .uis-appdock__search { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 10px 0 14px; border-radius: var(--uis-r-control); background: var(--uis-surface-3); color: var(--uis-ink-3); font: 500 14px/1 var(--uis-font-body); min-width: 200px; cursor: pointer; border: 0; }
455
+ .uis-appdock__search .uis-kbd { margin-left: auto; }
456
+ .uis-appdock__search .uis-icon { width: 17px; height: 17px; }
457
+ .uis-apphead { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; padding: 0 24px; }
458
+
459
+ .uis-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; padding: 28px clamp(16px, 3vw, 32px) 20px; }
460
+ .uis-pagehead__title { font-family: var(--uis-font-display); font-weight: var(--uis-display-weight); letter-spacing: var(--uis-display-tracking); text-transform: var(--uis-display-case); font-stretch: var(--uis-display-stretch); font-size: 28px; line-height: 1.15; margin: 0; }
461
+ .uis-pagehead__desc { font: 400 14.5px/1.5 var(--uis-font-body); color: var(--uis-ink-2); margin: 6px 0 0; }
462
+ .uis-pagehead__actions { display: flex; gap: 8px; flex-shrink: 0; }
463
+ .uis-crumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font: 500 13px/1 var(--uis-font-body); color: var(--uis-ink-3); }
464
+ .uis-crumbs a { color: inherit; text-decoration: none; }
465
+ .uis-crumbs .uis-icon { width: 14px; height: 14px; }
466
+
467
+ /* Tone on photography wins over each nav's default ink */
468
+ :is(.uis-minimal, .uis-bar, .uis-mbar, .uis-islandlayer, .uis-docklayer, .uis-stacked)[data-tone="image"] { color: var(--uis-on-image); }
469
+
470
+ @media (prefers-reduced-motion: reduce) {
471
+ .uis *, .uis *::before, .uis *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
472
+ }
473
+ /* Phones: sidebar, inset and rail shells hand navigation to the dock; the dock search folds to an icon */
474
+ .uis-app__phonedock { display: none; }
475
+ @media (max-width: 767px) {
476
+ .uis-app--sidebar, .uis-app--rail, .uis-app--inset { grid-template-columns: minmax(0, 1fr); padding: 0; }
477
+ .uis-app--sidebar > .uis-sidebar, .uis-app--inset > .uis-sidebar, .uis-app--rail > .uis-rail { display: none; }
478
+ .uis-app__phonedock { display: flex; }
479
+ .uis-app--sidebar .uis-app__main, .uis-app--rail .uis-app__main, .uis-app--inset .uis-app__main { padding-bottom: 88px; border: 0; border-radius: 0; box-shadow: none; }
480
+ .uis-appdock { max-width: 100%; }
481
+ .uis-appdock__search { min-width: 0; width: 42px; padding: 0; justify-content: center; }
482
+ .uis-appdock__search .uis-appdock__label, .uis-appdock__search .uis-kbd { display: none; }
483
+ }
484
+ /* config.motion.enabled: false switches CSS micro states off too, same as reduced motion */
485
+ .uis[data-uis-motion="off"] *, .uis[data-uis-motion="off"] *::before, .uis[data-uis-motion="off"] *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }