@ttt-productions/theme-core 0.1.23 → 0.1.24

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 (3) hide show
  1. package/dist/styles/components.css +966 -621
  2. package/dist/styles/hooks.css +38 -11
  3. package/package.json +1 -1
package/dist/styles/components.css CHANGED
@@ -1,633 +1,978 @@
1
- @layer components {
2
- /* =========================================================
3
- FOUNDATIONS (icon + layout bundles) — replaces inline utils
4
- ========================================================= */
5
-
6
- /* Icons */
7
- .icon-xxs { @apply h-3 w-3; }
8
- .icon-xs { @apply h-4 w-4; }
9
- .icon-sm { @apply h-5 w-5; }
10
- .icon-md { @apply h-6 w-6; }
11
- .icon-lg { @apply h-8 w-8; }
12
- .icon-xl { @apply h-10 w-10; }
13
- .icon-2xl { @apply h-12 w-12; }
14
-
15
- /* Spinners */
16
- .spinner-xs { @apply icon-xs animate-spin; color: hsl(var(--primary)); }
17
- .spinner-sm { @apply icon-sm animate-spin; color: hsl(var(--primary)); }
18
- .spinner-md { @apply icon-md animate-spin; color: hsl(var(--primary)); }
19
- .spinner-lg { @apply icon-lg animate-spin; color: hsl(var(--primary)); }
20
- .spinner-xl { @apply icon-xl animate-spin; color: hsl(var(--primary)); }
21
- .spinner-with-gap { @apply mr-2; }
22
-
23
- /* Common centering */
24
- .center-row { @apply flex items-center justify-center; }
25
- .center-col { @apply flex flex-col items-center justify-center; }
26
- .loading-block { @apply center-row py-8; }
27
- .loading-block-padded { @apply center-row p-8; }
28
- .loading-screen { @apply flex flex-col h-screen-mobile w-screen items-center justify-center bg-background space-y-4; }
29
-
30
- /* Stacks */
31
- .stack-1 { @apply space-y-1; }
32
- .stack-2 { @apply space-y-2; }
33
- .stack-4 { @apply space-y-4; }
34
- .stack-6 { @apply space-y-6; }
35
-
36
- /* =========================================================
37
- PAGE LAYOUT
38
- ========================================================= */
39
- .page-container {
40
- @apply flex-1 w-full mx-auto py-4;
41
- }
42
-
43
- .page-card {
44
- @apply w-full bg-card text-card-foreground shadow-xl rounded-lg border-2 border-border;
45
- }
46
1
 
2
+ /* =========================================================
3
+ FOUNDATIONS (icon + layout bundles) — replaces inline utils
4
+ ========================================================= */
5
+
6
+ /* Icons */
7
+ .icon-xxs { height: 0.75rem; width: 0.75rem; }
8
+ .icon-xs { height: 1rem; width: 1rem; }
9
+ .icon-sm { height: 1.25rem; width: 1.25rem; }
10
+ .icon-md { height: 1.5rem; width: 1.5rem; }
11
+ .icon-lg { height: 2rem; width: 2rem; }
12
+ .icon-xl { height: 2.5rem; width: 2.5rem; }
13
+ .icon-2xl { height: 3rem; width: 3rem; }
14
+
15
+ /* Spinners */
16
+ .spinner-xs {
17
+ height: 1rem;
18
+ width: 1rem;
19
+ animation: spin 1s linear infinite;
20
+ color: hsl(var(--primary));
21
+ }
22
+ .spinner-sm {
23
+ height: 1.25rem;
24
+ width: 1.25rem;
25
+ animation: spin 1s linear infinite;
26
+ color: hsl(var(--primary));
27
+ }
28
+ .spinner-md {
29
+ height: 1.5rem;
30
+ width: 1.5rem;
31
+ animation: spin 1s linear infinite;
32
+ color: hsl(var(--primary));
33
+ }
34
+ .spinner-lg {
35
+ height: 2rem;
36
+ width: 2rem;
37
+ animation: spin 1s linear infinite;
38
+ color: hsl(var(--primary));
39
+ }
40
+ .spinner-xl {
41
+ height: 2.5rem;
42
+ width: 2.5rem;
43
+ animation: spin 1s linear infinite;
44
+ color: hsl(var(--primary));
45
+ }
46
+ .spinner-with-gap { margin-right: 0.5rem; }
47
+
48
+ @keyframes spin {
49
+ from { transform: rotate(0deg); }
50
+ to { transform: rotate(360deg); }
51
+ }
52
+
53
+ /* Common centering */
54
+ .center-row {
55
+ display: flex;
56
+ align-items: center;
57
+ justify-content: center;
58
+ }
59
+ .center-col {
60
+ display: flex;
61
+ flex-direction: column;
62
+ align-items: center;
63
+ justify-content: center;
64
+ }
65
+ .loading-block {
66
+ display: flex;
67
+ align-items: center;
68
+ justify-content: center;
69
+ padding-top: 2rem;
70
+ padding-bottom: 2rem;
71
+ }
72
+ .loading-block-padded {
73
+ display: flex;
74
+ align-items: center;
75
+ justify-content: center;
76
+ padding: 2rem;
77
+ }
78
+ .loading-screen {
79
+ display: flex;
80
+ flex-direction: column;
81
+ height: 100vh;
82
+ height: calc(var(--vh, 1vh) * 100);
83
+ width: 100vw;
84
+ align-items: center;
85
+ justify-content: center;
86
+ background-color: hsl(var(--background));
87
+ }
88
+ .loading-screen > * + * {
89
+ margin-top: 1rem;
90
+ }
91
+
92
+ /* Stacks */
93
+ .stack-1 > * + * { margin-top: 0.25rem; }
94
+ .stack-2 > * + * { margin-top: 0.5rem; }
95
+ .stack-4 > * + * { margin-top: 1rem; }
96
+ .stack-6 > * + * { margin-top: 1.5rem; }
97
+
98
+ /* =========================================================
99
+ PAGE LAYOUT
100
+ ========================================================= */
101
+ .page-container {
102
+ flex: 1 1 0%;
103
+ width: 100%;
104
+ margin-left: auto;
105
+ margin-right: auto;
106
+ padding-top: 1rem;
107
+ padding-bottom: 1rem;
108
+ }
109
+
110
+ .page-card {
111
+ width: 100%;
112
+ background-color: hsl(var(--card));
113
+ color: hsl(var(--card-foreground));
114
+ box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
115
+ border-radius: 0.5rem;
116
+ border-width: 2px;
117
+ border-color: hsl(var(--border));
118
+ }
119
+
120
+ .page-card-header {
121
+ text-align: center;
122
+ padding: 1rem;
123
+ align-items: center;
124
+ }
125
+ @media (min-width: 640px) {
47
126
  .page-card-header {
48
- @apply text-center p-4 sm:p-6 items-center;
127
+ padding: 1.5rem;
49
128
  }
129
+ }
50
130
 
131
+ .page-card-header-left {
132
+ padding: 1rem;
133
+ text-align: left;
134
+ }
135
+ @media (min-width: 640px) {
51
136
  .page-card-header-left {
52
- @apply p-4 sm:p-6 text-left;
53
- }
54
-
55
- .page-card-title {
56
- @apply text-3xl font-bold text-foreground;
57
- }
58
-
137
+ padding: 1.5rem;
138
+ }
139
+ }
140
+
141
+ .page-card-title {
142
+ font-size: 1.875rem;
143
+ line-height: 2.25rem;
144
+ font-weight: 700;
145
+ color: hsl(var(--foreground));
146
+ }
147
+
148
+ .page-card-content {
149
+ padding-left: 0.5rem;
150
+ padding-right: 0.5rem;
151
+ padding-bottom: 1rem;
152
+ }
153
+ @media (min-width: 640px) {
59
154
  .page-card-content {
60
- @apply px-2 sm:px-6 pb-4;
61
- }
62
-
63
- .inner-card-container {
64
- @apply px-4 py-2;
65
- }
66
-
67
- /* =========================================================
68
- TYPOGRAPHY (high-level)
69
- ========================================================= */
70
- .text-body {
71
- @apply text-sm font-medium;
72
- color: hsl(var(--foreground));
73
- }
74
-
75
- .text-muted {
76
- @apply text-sm font-medium;
77
- color: hsl(var(--muted-foreground));
78
- }
79
-
80
- .text-caption {
81
- @apply text-xs font-medium;
82
- color: hsl(var(--muted-foreground));
83
- }
84
-
85
- .text-small {
86
- @apply text-sm font-bold;
87
- color: hsl(var(--foreground));
88
- }
89
-
90
- .text-xs-bold {
91
- @apply text-xs font-bold;
92
- color: hsl(var(--foreground));
93
- }
94
-
95
- .text-label {
96
- @apply font-bold;
97
- color: hsl(var(--foreground));
98
- }
99
-
100
- .text-counter {
101
- @apply text-sm font-bold;
102
- color: hsl(var(--muted-foreground));
103
- }
104
-
105
- .empty-state-text {
106
- @apply text-center py-8 font-bold;
107
- color: hsl(var(--muted-foreground));
108
- }
109
-
110
- .card-description {
111
- @apply text-sm font-bold;
112
- color: hsl(var(--muted-foreground));
113
- }
114
-
115
- .input-description {
116
- @apply text-xs;
117
- color: hsl(var(--muted-foreground));
118
- }
119
-
120
- .disclaimer-text {
121
- @apply text-sm font-bold text-center;
122
- color: hsl(var(--muted-foreground));
123
- }
124
-
125
- /* Error blocks / inline */
126
- .text-error {
127
- @apply text-sm font-bold;
128
- color: hsl(var(--destructive));
129
- }
130
-
131
- .text-error-block {
132
- @apply text-center p-4 font-bold rounded-md border;
133
- color: hsl(var(--destructive));
134
- border-color: hsl(var(--destructive) / 0.5);
135
- background-color: hsl(var(--destructive) / 0.10);
136
- }
137
-
138
- /* =========================================================
139
- LINKS
140
- ========================================================= */
141
- .auth-link {
142
- @apply text-sm underline font-semibold;
143
- color: hsl(var(--primary));
144
- }
145
-
146
- /* =========================================================
147
- CHAT
148
- ========================================================= */
149
- .chat-date-separator {
150
- @apply text-xs font-bold bg-muted px-3 py-1 rounded-full;
151
- color: hsl(var(--foreground));
152
- }
153
-
154
- /* Status pills (replaces bg-blue-100/text-blue-700 etc.) */
155
- .status-pill {
156
- @apply text-xs-bold px-2 py-0.5 rounded-full inline-flex items-center;
157
- }
158
-
159
- .status-pill--info {
160
- background-color: hsl(var(--info) / 0.15);
161
- color: hsl(var(--info));
162
- }
163
-
164
- .status-pill--success {
165
- background-color: hsl(var(--success) / 0.15);
166
- color: hsl(var(--success));
167
- }
168
-
169
- .status-pill--warning {
170
- background-color: hsl(var(--warning) / 0.15);
171
- color: hsl(var(--warning));
172
- }
173
-
174
- .status-pill--muted {
175
- background-color: hsl(var(--muted));
176
- color: hsl(var(--muted-foreground));
177
- }
178
-
179
- /* High contrast pills: pure B/W */
180
- .high-contrast .status-pill--info,
181
- .high-contrast .status-pill--success,
182
- .high-contrast .status-pill--warning,
183
- .high-contrast .status-pill--muted {
184
- background-color: hsl(var(--background));
185
- color: hsl(var(--foreground));
186
- border: 2px solid hsl(var(--border));
187
- }
188
-
189
- /* ===================
190
- SCREEN ADAPTIVE VIEW
191
- =================== */
192
- .screen-adaptive-root {
193
- @apply flex flex-1 flex-col w-full;
194
- }
195
-
196
- .screen-adaptive-inner {
197
- @apply mx-auto w-full;
198
- }
199
-
200
- /* Max width variants */
201
- .screen-max-w-none { max-width: none; }
202
- .screen-max-w-full { max-width: 100%; }
203
-
204
- .screen-max-w-sm { max-width: 24rem; } /* 384px */
205
- .screen-max-w-md { max-width: 28rem; } /* 448px */
206
- .screen-max-w-lg { max-width: 32rem; } /* 512px */
207
- .screen-max-w-xl { max-width: 36rem; } /* 576px */
208
-
209
- .screen-max-w-2xl { max-width: 42rem; } /* 672px */
210
- .screen-max-w-3xl { max-width: 48rem; } /* 768px */
211
- .screen-max-w-4xl { max-width: 56rem; } /* 896px */
212
- .screen-max-w-5xl { max-width: 64rem; } /* 1024px */
213
- .screen-max-w-6xl { max-width: 72rem; } /* 1152px */
214
- .screen-max-w-7xl { max-width: 80rem; } /* 1280px */
215
-
216
- /* =========================================================
217
- RULE CARDS
218
- ========================================================= */
219
- .rule-card {
220
- @apply p-4 rounded-lg border-2 border-border bg-card;
221
- }
222
-
223
- .rule-card-title {
224
- @apply font-bold mb-2;
225
- color: hsl(var(--foreground));
226
- }
227
-
228
- .rule-card-description {
229
- @apply text-sm leading-relaxed font-bold;
230
- color: hsl(var(--muted-foreground));
231
- }
232
-
233
- /* =========================================================
234
- ACCORDION
235
- ========================================================= */
236
- .accordion-trigger {
237
- @apply p-6 hover:no-underline rounded-t-lg;
238
- }
239
-
240
- .accordion-icon-container {
241
- @apply p-2 rounded-lg;
242
- background-color: hsl(var(--primary) / 0.10);
243
- color: hsl(var(--primary));
244
- }
245
-
246
- .accordion-title {
247
- @apply text-lg font-semibold;
248
- color: hsl(var(--foreground));
249
- }
250
-
251
- .accordion-content-container {
252
- @apply px-6 py-4 rounded-b-lg space-y-4 bg-card;
253
- }
254
-
255
- /* =========================================================
256
- DETAILS (nested accordions)
257
- ========================================================= */
258
- .details-summary {
259
- @apply flex items-center justify-between cursor-pointer list-none p-4 rounded-lg border-2 border-border bg-card transition-all;
260
- }
261
-
262
- .details-summary:hover {
263
- border-color: hsl(var(--primary));
264
- background-color: hsl(var(--primary) / 0.05);
265
- }
266
-
267
- .details-icon-container {
268
- @apply p-2 rounded-lg transition-colors;
269
- background-color: hsl(var(--primary) / 0.10);
270
- color: hsl(var(--primary));
271
- }
272
-
273
- .group\/details:hover .details-icon-container {
274
- background-color: hsl(var(--primary));
275
- color: hsl(var(--primary-foreground));
276
- }
277
-
278
- .details-title {
279
- @apply font-semibold text-base;
280
- color: hsl(var(--foreground));
281
- }
282
-
283
- .details-chevron {
284
- color: hsl(var(--primary));
285
- }
286
-
287
- /* =========================================================
288
- AGREEMENT LIST ITEMS
289
- ========================================================= */
290
- .agreement-list-item {
291
- @apply flex gap-2 text-sm font-bold;
292
- color: hsl(var(--muted-foreground));
293
- }
294
-
295
- /* =========================================================
296
- FUTURE PLANS / MEDIA
297
- ========================================================= */
298
- .future-plan-description {
299
- @apply text-base whitespace-pre-wrap leading-relaxed max-w-prose font-bold;
300
- color: hsl(var(--muted-foreground));
301
- }
302
-
303
- .future-plan-media {
304
- @apply w-full aspect-video rounded-lg overflow-hidden border;
305
- border-color: hsl(var(--border));
306
- background-color: hsl(var(--muted));
307
- }
308
-
309
- /* Media helpers (replaces repeated w/full/max-w/aspect) */
310
- .media-image-sm-centered {
311
- @apply w-full h-auto max-w-sm mx-auto;
312
- }
313
-
314
- .media-square-centered {
315
- @apply w-full max-w-[400px] mx-auto aspect-square rounded-md overflow-hidden;
316
- background-color: hsl(var(--muted));
317
- }
318
-
319
- .media-wide {
320
- @apply w-full aspect-video rounded-lg overflow-hidden border;
321
- border-color: hsl(var(--border));
322
- background-color: hsl(var(--muted));
323
- }
324
-
325
- /* =========================================================
326
- INFO SECTIONS
327
- ========================================================= */
328
- .info-section {
329
- @apply flex items-start gap-4;
330
- }
331
-
332
- .info-section-icon {
333
- @apply mt-1;
334
- color: hsl(var(--primary));
335
- }
336
-
337
- .info-section-title {
338
- @apply font-semibold;
339
- color: hsl(var(--foreground));
340
- }
341
-
342
- .info-section-description {
343
- @apply text-sm font-bold;
344
- color: hsl(var(--muted-foreground));
345
- }
346
-
347
- .info-section-divider {
348
- @apply w-full h-px;
349
- background-color: hsl(var(--border));
350
- }
351
-
352
- .info-section-header {
353
- @apply text-lg font-semibold text-center pt-4;
354
- color: hsl(var(--foreground));
355
- }
356
-
357
- /* =========================================================
358
- ATTRIBUTION SECTIONS
359
- ========================================================= */
360
- .attribution-item {
361
- @apply flex items-start gap-4;
362
- }
363
-
364
- .attribution-icon {
365
- @apply mt-1;
366
- color: hsl(var(--primary));
367
- }
368
-
369
- .attribution-title {
370
- @apply font-semibold;
371
- color: hsl(var(--foreground));
372
- }
373
-
374
- .attribution-cost {
375
- @apply text-sm font-semibold;
376
- color: hsl(var(--primary));
377
- }
378
-
379
- .attribution-description {
380
- @apply text-sm mt-1 font-bold;
381
- color: hsl(var(--muted-foreground));
382
- }
383
-
384
- /* =========================================================
385
- DEDICATION SECTIONS
386
- ========================================================= */
387
- .dedication-section {
388
- @apply text-center space-y-2;
389
- }
390
-
391
- .dedication-header {
392
- @apply inline-flex items-center gap-2;
393
- }
394
-
395
- .dedication-title {
396
- @apply font-semibold text-lg;
397
- color: hsl(var(--foreground));
398
- }
399
-
400
- .dedication-content {
401
- @apply font-bold;
402
- color: hsl(var(--muted-foreground));
403
- }
404
-
405
- /* =========================================================
406
- DMCA INFO
407
- ========================================================= */
408
- .dmca-section-title {
409
- @apply text-lg font-semibold;
410
- color: hsl(var(--foreground));
411
- }
412
-
413
- .dmca-info-container {
414
- @apply space-y-2 pl-4 border-l-2;
415
- border-color: hsl(var(--border));
416
- }
417
-
155
+ padding-left: 1.5rem;
156
+ padding-right: 1.5rem;
157
+ }
158
+ }
159
+
160
+ .inner-card-container {
161
+ padding-left: 1rem;
162
+ padding-right: 1rem;
163
+ padding-top: 0.5rem;
164
+ padding-bottom: 0.5rem;
165
+ }
166
+
167
+ /* =========================================================
168
+ TYPOGRAPHY (high-level)
169
+ ========================================================= */
170
+ .text-body {
171
+ font-size: 0.875rem;
172
+ line-height: 1.25rem;
173
+ font-weight: 500;
174
+ color: hsl(var(--foreground));
175
+ }
176
+
177
+ .text-muted {
178
+ font-size: 0.875rem;
179
+ line-height: 1.25rem;
180
+ font-weight: 500;
181
+ color: hsl(var(--muted-foreground));
182
+ }
183
+
184
+ .text-caption {
185
+ font-size: 0.75rem;
186
+ line-height: 1rem;
187
+ font-weight: 500;
188
+ color: hsl(var(--muted-foreground));
189
+ }
190
+
191
+ .text-small {
192
+ font-size: 0.875rem;
193
+ line-height: 1.25rem;
194
+ font-weight: 700;
195
+ color: hsl(var(--foreground));
196
+ }
197
+
198
+ .text-xs-bold {
199
+ font-size: 0.75rem;
200
+ line-height: 1rem;
201
+ font-weight: 700;
202
+ color: hsl(var(--foreground));
203
+ }
204
+
205
+ .text-label {
206
+ font-weight: 700;
207
+ color: hsl(var(--foreground));
208
+ }
209
+
210
+ .text-counter {
211
+ font-size: 0.875rem;
212
+ line-height: 1.25rem;
213
+ font-weight: 700;
214
+ color: hsl(var(--muted-foreground));
215
+ }
216
+
217
+ .empty-state-text {
218
+ text-align: center;
219
+ padding-top: 2rem;
220
+ padding-bottom: 2rem;
221
+ font-weight: 700;
222
+ color: hsl(var(--muted-foreground));
223
+ }
224
+
225
+ .card-description {
226
+ font-size: 0.875rem;
227
+ line-height: 1.25rem;
228
+ font-weight: 700;
229
+ color: hsl(var(--muted-foreground));
230
+ }
231
+
232
+ .input-description {
233
+ font-size: 0.75rem;
234
+ line-height: 1rem;
235
+ color: hsl(var(--muted-foreground));
236
+ }
237
+
238
+ .disclaimer-text {
239
+ font-size: 0.875rem;
240
+ line-height: 1.25rem;
241
+ font-weight: 700;
242
+ text-align: center;
243
+ color: hsl(var(--muted-foreground));
244
+ }
245
+
246
+ /* Error blocks / inline */
247
+ .text-error {
248
+ font-size: 0.875rem;
249
+ line-height: 1.25rem;
250
+ font-weight: 700;
251
+ color: hsl(var(--destructive));
252
+ }
253
+
254
+ .text-error-block {
255
+ text-align: center;
256
+ padding: 1rem;
257
+ font-weight: 700;
258
+ border-radius: 0.375rem;
259
+ border-width: 1px;
260
+ color: hsl(var(--destructive));
261
+ border-color: hsl(var(--destructive) / 0.5);
262
+ background-color: hsl(var(--destructive) / 0.10);
263
+ }
264
+
265
+ /* =========================================================
266
+ LINKS
267
+ ========================================================= */
268
+ .auth-link {
269
+ font-size: 0.875rem;
270
+ line-height: 1.25rem;
271
+ text-decoration: underline;
272
+ font-weight: 600;
273
+ color: hsl(var(--primary));
274
+ }
275
+
276
+ /* =========================================================
277
+ CHAT
278
+ ========================================================= */
279
+ .chat-date-separator {
280
+ font-size: 0.75rem;
281
+ line-height: 1rem;
282
+ font-weight: 700;
283
+ background-color: hsl(var(--muted));
284
+ padding-left: 0.75rem;
285
+ padding-right: 0.75rem;
286
+ padding-top: 0.25rem;
287
+ padding-bottom: 0.25rem;
288
+ border-radius: 9999px;
289
+ color: hsl(var(--foreground));
290
+ }
291
+
292
+ /* Status pills (replaces bg-blue-100/text-blue-700 etc.) */
293
+ .status-pill {
294
+ font-size: 0.75rem;
295
+ line-height: 1rem;
296
+ font-weight: 700;
297
+ color: hsl(var(--foreground));
298
+ padding-left: 0.5rem;
299
+ padding-right: 0.5rem;
300
+ padding-top: 0.125rem;
301
+ padding-bottom: 0.125rem;
302
+ border-radius: 9999px;
303
+ display: inline-flex;
304
+ align-items: center;
305
+ }
306
+
307
+ .status-pill--info {
308
+ background-color: hsl(var(--info) / 0.15);
309
+ color: hsl(var(--info));
310
+ }
311
+
312
+ .status-pill--success {
313
+ background-color: hsl(var(--success) / 0.15);
314
+ color: hsl(var(--success));
315
+ }
316
+
317
+ .status-pill--warning {
318
+ background-color: hsl(var(--warning) / 0.15);
319
+ color: hsl(var(--warning));
320
+ }
321
+
322
+ .status-pill--muted {
323
+ background-color: hsl(var(--muted));
324
+ color: hsl(var(--muted-foreground));
325
+ }
326
+
327
+ /* High contrast pills: pure B/W */
328
+ .high-contrast .status-pill--info,
329
+ .high-contrast .status-pill--success,
330
+ .high-contrast .status-pill--warning,
331
+ .high-contrast .status-pill--muted {
332
+ background-color: hsl(var(--background));
333
+ color: hsl(var(--foreground));
334
+ border: 2px solid hsl(var(--border));
335
+ }
336
+
337
+ /* ===================
338
+ SCREEN ADAPTIVE VIEW
339
+ =================== */
340
+ .screen-adaptive-root {
341
+ display: flex;
342
+ flex: 1 1 0%;
343
+ flex-direction: column;
344
+ width: 100%;
345
+ }
346
+
347
+ .screen-adaptive-inner {
348
+ margin-left: auto;
349
+ margin-right: auto;
350
+ width: 100%;
351
+ }
352
+
353
+ /* Max width variants */
354
+ .screen-max-w-none { max-width: none; }
355
+ .screen-max-w-full { max-width: 100%; }
356
+
357
+ .screen-max-w-sm { max-width: 24rem; } /* 384px */
358
+ .screen-max-w-md { max-width: 28rem; } /* 448px */
359
+ .screen-max-w-lg { max-width: 32rem; } /* 512px */
360
+ .screen-max-w-xl { max-width: 36rem; } /* 576px */
361
+
362
+ .screen-max-w-2xl { max-width: 42rem; } /* 672px */
363
+ .screen-max-w-3xl { max-width: 48rem; } /* 768px */
364
+ .screen-max-w-4xl { max-width: 56rem; } /* 896px */
365
+ .screen-max-w-5xl { max-width: 64rem; } /* 1024px */
366
+ .screen-max-w-6xl { max-width: 72rem; } /* 1152px */
367
+ .screen-max-w-7xl { max-width: 80rem; } /* 1280px */
368
+
369
+ /* =========================================================
370
+ RULE CARDS
371
+ ========================================================= */
372
+ .rule-card {
373
+ padding: 1rem;
374
+ border-radius: 0.5rem;
375
+ border-width: 2px;
376
+ border-color: hsl(var(--border));
377
+ background-color: hsl(var(--card));
378
+ }
379
+
380
+ .rule-card-title {
381
+ font-weight: 700;
382
+ margin-bottom: 0.5rem;
383
+ color: hsl(var(--foreground));
384
+ }
385
+
386
+ .rule-card-description {
387
+ font-size: 0.875rem;
388
+ line-height: 1.625;
389
+ font-weight: 700;
390
+ color: hsl(var(--muted-foreground));
391
+ }
392
+
393
+ /* =========================================================
394
+ ACCORDION
395
+ ========================================================= */
396
+ .accordion-trigger {
397
+ padding: 1.5rem;
398
+ border-radius: 0.5rem 0.5rem 0 0;
399
+ }
400
+ .accordion-trigger:hover {
401
+ text-decoration: none;
402
+ }
403
+
404
+ .accordion-icon-container {
405
+ padding: 0.5rem;
406
+ border-radius: 0.5rem;
407
+ background-color: hsl(var(--primary) / 0.10);
408
+ color: hsl(var(--primary));
409
+ }
410
+
411
+ .accordion-title {
412
+ font-size: 1.125rem;
413
+ line-height: 1.75rem;
414
+ font-weight: 600;
415
+ color: hsl(var(--foreground));
416
+ }
417
+
418
+ .accordion-content-container {
419
+ padding-left: 1.5rem;
420
+ padding-right: 1.5rem;
421
+ padding-top: 1rem;
422
+ padding-bottom: 1rem;
423
+ border-radius: 0 0 0.5rem 0.5rem;
424
+ background-color: hsl(var(--card));
425
+ }
426
+ .accordion-content-container > * + * {
427
+ margin-top: 1rem;
428
+ }
429
+
430
+ /* =========================================================
431
+ DETAILS (nested accordions)
432
+ ========================================================= */
433
+ .details-summary {
434
+ display: flex;
435
+ align-items: center;
436
+ justify-content: space-between;
437
+ cursor: pointer;
438
+ list-style: none;
439
+ padding: 1rem;
440
+ border-radius: 0.5rem;
441
+ border-width: 2px;
442
+ border-color: hsl(var(--border));
443
+ background-color: hsl(var(--card));
444
+ transition-property: all;
445
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
446
+ transition-duration: 150ms;
447
+ }
448
+
449
+ .details-summary:hover {
450
+ border-color: hsl(var(--primary));
451
+ background-color: hsl(var(--primary) / 0.05);
452
+ }
453
+
454
+ .details-icon-container {
455
+ padding: 0.5rem;
456
+ border-radius: 0.5rem;
457
+ transition-property: color, background-color;
458
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
459
+ transition-duration: 150ms;
460
+ background-color: hsl(var(--primary) / 0.10);
461
+ color: hsl(var(--primary));
462
+ }
463
+
464
+ .group\/details:hover .details-icon-container {
465
+ background-color: hsl(var(--primary));
466
+ color: hsl(var(--primary-foreground));
467
+ }
468
+
469
+ .details-title {
470
+ font-weight: 600;
471
+ font-size: 1rem;
472
+ line-height: 1.5rem;
473
+ color: hsl(var(--foreground));
474
+ }
475
+
476
+ .details-chevron {
477
+ color: hsl(var(--primary));
478
+ }
479
+
480
+ /* =========================================================
481
+ AGREEMENT LIST ITEMS
482
+ ========================================================= */
483
+ .agreement-list-item {
484
+ display: flex;
485
+ gap: 0.5rem;
486
+ font-size: 0.875rem;
487
+ line-height: 1.25rem;
488
+ font-weight: 700;
489
+ color: hsl(var(--muted-foreground));
490
+ }
491
+
492
+ /* =========================================================
493
+ FUTURE PLANS / MEDIA
494
+ ========================================================= */
495
+ .future-plan-description {
496
+ font-size: 1rem;
497
+ line-height: 1.5rem;
498
+ white-space: pre-wrap;
499
+ line-height: 1.625;
500
+ max-width: 65ch;
501
+ font-weight: 700;
502
+ color: hsl(var(--muted-foreground));
503
+ }
504
+
505
+ .future-plan-media {
506
+ width: 100%;
507
+ aspect-ratio: 16 / 9;
508
+ border-radius: 0.5rem;
509
+ overflow: hidden;
510
+ border-width: 1px;
511
+ border-color: hsl(var(--border));
512
+ background-color: hsl(var(--muted));
513
+ }
514
+
515
+ /* Media helpers (replaces repeated w/full/max-w/aspect) */
516
+ .media-image-sm-centered {
517
+ width: 100%;
518
+ height: auto;
519
+ max-width: 24rem;
520
+ margin-left: auto;
521
+ margin-right: auto;
522
+ }
523
+
524
+ .media-square-centered {
525
+ width: 100%;
526
+ max-width: 400px;
527
+ margin-left: auto;
528
+ margin-right: auto;
529
+ aspect-ratio: 1 / 1;
530
+ border-radius: 0.375rem;
531
+ overflow: hidden;
532
+ background-color: hsl(var(--muted));
533
+ }
534
+
535
+ .media-wide {
536
+ width: 100%;
537
+ aspect-ratio: 16 / 9;
538
+ border-radius: 0.5rem;
539
+ overflow: hidden;
540
+ border-width: 1px;
541
+ border-color: hsl(var(--border));
542
+ background-color: hsl(var(--muted));
543
+ }
544
+
545
+ /* =========================================================
546
+ INFO SECTIONS
547
+ ========================================================= */
548
+ .info-section {
549
+ display: flex;
550
+ align-items: flex-start;
551
+ gap: 1rem;
552
+ }
553
+
554
+ .info-section-icon {
555
+ margin-top: 0.25rem;
556
+ color: hsl(var(--primary));
557
+ }
558
+
559
+ .info-section-title {
560
+ font-weight: 600;
561
+ color: hsl(var(--foreground));
562
+ }
563
+
564
+ .info-section-description {
565
+ font-size: 0.875rem;
566
+ line-height: 1.25rem;
567
+ font-weight: 700;
568
+ color: hsl(var(--muted-foreground));
569
+ }
570
+
571
+ .info-section-divider {
572
+ width: 100%;
573
+ height: 1px;
574
+ background-color: hsl(var(--border));
575
+ }
576
+
577
+ .info-section-header {
578
+ font-size: 1.125rem;
579
+ line-height: 1.75rem;
580
+ font-weight: 600;
581
+ text-align: center;
582
+ padding-top: 1rem;
583
+ color: hsl(var(--foreground));
584
+ }
585
+
586
+ /* =========================================================
587
+ ATTRIBUTION SECTIONS
588
+ ========================================================= */
589
+ .attribution-item {
590
+ display: flex;
591
+ align-items: flex-start;
592
+ gap: 1rem;
593
+ }
594
+
595
+ .attribution-icon {
596
+ margin-top: 0.25rem;
597
+ color: hsl(var(--primary));
598
+ }
599
+
600
+ .attribution-title {
601
+ font-weight: 600;
602
+ color: hsl(var(--foreground));
603
+ }
604
+
605
+ .attribution-cost {
606
+ font-size: 0.875rem;
607
+ line-height: 1.25rem;
608
+ font-weight: 600;
609
+ color: hsl(var(--primary));
610
+ }
611
+
612
+ .attribution-description {
613
+ font-size: 0.875rem;
614
+ line-height: 1.25rem;
615
+ margin-top: 0.25rem;
616
+ font-weight: 700;
617
+ color: hsl(var(--muted-foreground));
618
+ }
619
+
620
+ /* =========================================================
621
+ DEDICATION SECTIONS
622
+ ========================================================= */
623
+ .dedication-section {
624
+ text-align: center;
625
+ }
626
+ .dedication-section > * + * {
627
+ margin-top: 0.5rem;
628
+ }
629
+
630
+ .dedication-header {
631
+ display: inline-flex;
632
+ align-items: center;
633
+ gap: 0.5rem;
634
+ }
635
+
636
+ .dedication-title {
637
+ font-weight: 600;
638
+ font-size: 1.125rem;
639
+ line-height: 1.75rem;
640
+ color: hsl(var(--foreground));
641
+ }
642
+
643
+ .dedication-content {
644
+ font-weight: 700;
645
+ color: hsl(var(--muted-foreground));
646
+ }
647
+
648
+ /* =========================================================
649
+ DMCA INFO
650
+ ========================================================= */
651
+ .dmca-section-title {
652
+ font-size: 1.125rem;
653
+ line-height: 1.75rem;
654
+ font-weight: 600;
655
+ color: hsl(var(--foreground));
656
+ }
657
+
658
+ .dmca-info-container {
659
+ padding-left: 1rem;
660
+ border-left-width: 2px;
661
+ border-color: hsl(var(--border));
662
+ }
663
+ .dmca-info-container > * + * {
664
+ margin-top: 0.5rem;
665
+ }
666
+
667
+ .dmca-info-row {
668
+ display: flex;
669
+ flex-direction: column;
670
+ }
671
+ @media (min-width: 640px) {
418
672
  .dmca-info-row {
419
- @apply flex flex-col sm:flex-row sm:items-center;
420
- }
421
-
673
+ flex-direction: row;
674
+ align-items: center;
675
+ }
676
+ }
677
+
678
+ .dmca-label {
679
+ width: 100%;
680
+ font-weight: 600;
681
+ flex-shrink: 0;
682
+ color: hsl(var(--foreground));
683
+ }
684
+ @media (min-width: 640px) {
422
685
  .dmca-label {
423
- @apply w-full sm:w-40 font-semibold shrink-0;
424
- color: hsl(var(--foreground));
425
- }
426
-
427
- .dmca-value {
428
- @apply break-all font-bold;
429
- color: hsl(var(--muted-foreground));
430
- }
431
-
432
- /* =========================================================
433
- BUTTONS
434
- ========================================================= */
435
- .primary-action-button {
436
- @apply w-full text-lg py-6;
437
- }
438
-
686
+ width: 10rem;
687
+ }
688
+ }
689
+
690
+ .dmca-value {
691
+ word-break: break-all;
692
+ font-weight: 700;
693
+ color: hsl(var(--muted-foreground));
694
+ }
695
+
696
+ /* =========================================================
697
+ BUTTONS
698
+ ========================================================= */
699
+ .primary-action-button {
700
+ width: 100%;
701
+ font-size: 1.125rem;
702
+ line-height: 1.75rem;
703
+ padding-top: 1.5rem;
704
+ padding-bottom: 1.5rem;
705
+ }
706
+
707
+ .secondary-action-grid {
708
+ display: grid;
709
+ grid-template-columns: repeat(2, minmax(0, 1fr));
710
+ gap: 1rem;
711
+ margin-top: 1.5rem;
712
+ }
713
+ @media (min-width: 768px) {
439
714
  .secondary-action-grid {
440
- @apply grid grid-cols-2 md:grid-cols-3 gap-4 mt-6;
441
- }
442
-
443
- .secondary-action-button {
444
- @apply justify-center;
445
- }
446
-
447
- /* =========================================================
448
- FOOTER
449
- ========================================================= */
450
- .app-footer {
451
- @apply w-full h-12 flex-shrink-0 bg-secondary pt-4;
452
- }
453
-
454
- /* =========================================================
455
- CUSTOM FORM ELEMENTS
456
- ========================================================= */
457
- .form-select-trigger {
458
- @apply font-semibold rounded-xl h-11 px-4 shadow-sm border-2;
459
- background-color: hsl(var(--background));
460
- border-color: hsl(var(--border)) !important;
461
- color: hsl(var(--foreground));
462
- }
463
-
464
- /* =========================================================
465
- SAFE AREA UTILITIES
466
- ========================================================= */
467
- .fixed-header {
468
- padding-top: max(1rem, var(--sat));
469
- }
470
-
471
- .fixed-footer {
472
- padding-bottom: max(1rem, var(--sab));
473
- }
474
-
475
- /* =========================================================
476
- LANDING PAGE
477
- ========================================================= */
478
- .landing-tabs-list {
479
- @apply grid w-full grid-cols-2 bg-transparent p-0 gap-2 mb-4;
480
- }
481
-
482
- .landing-tab-trigger {
483
- @apply flex-1;
484
- }
485
-
486
- .landing-section-title {
487
- @apply text-xl font-semibold text-center;
488
- color: hsl(var(--foreground));
489
- }
490
-
491
- .landing-section-description {
492
- @apply text-center font-bold;
493
- color: hsl(var(--muted-foreground));
494
- }
495
-
496
- .landing-video-container {
497
- @apply aspect-video w-full rounded-lg overflow-hidden border;
498
- border-color: hsl(var(--border));
499
- background-color: hsl(var(--muted));
500
- }
501
-
502
- /* =========================================================
503
- APP HEADER
504
- ========================================================= */
505
- .app-header {
506
- @apply flex items-center h-[60px] shadow-md;
507
- background-color: hsl(var(--secondary));
508
- border-bottom: 2px solid hsl(var(--border));
509
- }
510
-
511
- .app-header-container {
512
- @apply flex items-center justify-between w-full px-0.5;
513
- }
514
-
515
- .app-header-actions {
516
- @apply flex items-center space-x-3;
517
- }
518
-
519
- .app-header-menu-button {
520
- @apply flex items-center space-x-2 h-10 px-3 rounded-full;
521
- }
522
-
523
- .app-dropdown-menu {
524
- @apply w-56 border-2;
525
- background-color: hsl(var(--card));
526
- border-color: hsl(var(--border));
527
- }
528
-
529
- .app-dropdown-item {
530
- @apply flex items-center cursor-pointer font-bold;
531
- color: hsl(var(--foreground)) !important;
532
- }
533
-
534
- .app-dropdown-item:hover,
535
- .app-dropdown-item:focus {
536
- background-color: hsl(var(--accent));
537
- color: hsl(var(--accent-foreground)) !important;
538
- }
539
-
540
- /* =========================================================
541
- POPOVERS
542
- ========================================================= */
543
- .app-popover {
544
- @apply w-80 p-2 border-2;
545
- background-color: hsl(var(--card));
546
- border-color: hsl(var(--border));
547
- color: hsl(var(--card-foreground));
548
- }
549
-
550
- /* =========================================================
551
- HELP DIALOG
552
- ========================================================= */
553
- .help-dialog-title {
554
- @apply font-semibold;
555
- color: hsl(var(--foreground)) !important;
556
- }
557
-
715
+ grid-template-columns: repeat(3, minmax(0, 1fr));
716
+ }
717
+ }
718
+
719
+ .secondary-action-button {
720
+ justify-content: center;
721
+ }
722
+
723
+ /* =========================================================
724
+ FOOTER
725
+ ========================================================= */
726
+ .app-footer {
727
+ width: 100%;
728
+ height: 3rem;
729
+ flex-shrink: 0;
730
+ background-color: hsl(var(--secondary));
731
+ padding-top: 1rem;
732
+ }
733
+
734
+ /* =========================================================
735
+ CUSTOM FORM ELEMENTS
736
+ ========================================================= */
737
+ .form-select-trigger {
738
+ font-weight: 600;
739
+ border-radius: 0.75rem;
740
+ height: 2.75rem;
741
+ padding-left: 1rem;
742
+ padding-right: 1rem;
743
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
744
+ border-width: 2px;
745
+ background-color: hsl(var(--background));
746
+ border-color: hsl(var(--border)) !important;
747
+ color: hsl(var(--foreground));
748
+ }
749
+
750
+ /* =========================================================
751
+ SAFE AREA UTILITIES
752
+ ========================================================= */
753
+ .fixed-header {
754
+ padding-top: max(1rem, var(--sat));
755
+ }
756
+
757
+ .fixed-footer {
758
+ padding-bottom: max(1rem, var(--sab));
759
+ }
760
+
761
+ /* =========================================================
762
+ LANDING PAGE
763
+ ========================================================= */
764
+ .landing-tabs-list {
765
+ display: grid;
766
+ width: 100%;
767
+ grid-template-columns: repeat(2, minmax(0, 1fr));
768
+ background-color: transparent;
769
+ padding: 0;
770
+ gap: 0.5rem;
771
+ margin-bottom: 1rem;
772
+ }
773
+
774
+ .landing-tab-trigger {
775
+ flex: 1 1 0%;
776
+ }
777
+
778
+ .landing-section-title {
779
+ font-size: 1.25rem;
780
+ line-height: 1.75rem;
781
+ font-weight: 600;
782
+ text-align: center;
783
+ color: hsl(var(--foreground));
784
+ }
785
+
786
+ .landing-section-description {
787
+ text-align: center;
788
+ font-weight: 700;
789
+ color: hsl(var(--muted-foreground));
790
+ }
791
+
792
+ .landing-video-container {
793
+ aspect-ratio: 16 / 9;
794
+ width: 100%;
795
+ border-radius: 0.5rem;
796
+ overflow: hidden;
797
+ border-width: 1px;
798
+ border-color: hsl(var(--border));
799
+ background-color: hsl(var(--muted));
800
+ }
801
+
802
+ /* =========================================================
803
+ APP HEADER
804
+ ========================================================= */
805
+ .app-header {
806
+ display: flex;
807
+ align-items: center;
808
+ height: 60px;
809
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
810
+ background-color: hsl(var(--secondary));
811
+ border-bottom: 2px solid hsl(var(--border));
812
+ }
813
+
814
+ .app-header-container {
815
+ display: flex;
816
+ align-items: center;
817
+ justify-content: space-between;
818
+ width: 100%;
819
+ padding-left: 0.125rem;
820
+ padding-right: 0.125rem;
821
+ }
822
+
823
+ .app-header-actions {
824
+ display: flex;
825
+ align-items: center;
826
+ }
827
+ .app-header-actions > * + * {
828
+ margin-left: 0.75rem;
829
+ }
830
+
831
+ .app-header-menu-button {
832
+ display: flex;
833
+ align-items: center;
834
+ height: 2.5rem;
835
+ padding-left: 0.75rem;
836
+ padding-right: 0.75rem;
837
+ border-radius: 9999px;
838
+ }
839
+ .app-header-menu-button > * + * {
840
+ margin-left: 0.5rem;
841
+ }
842
+
843
+ .app-dropdown-menu {
844
+ width: 14rem;
845
+ border-width: 2px;
846
+ background-color: hsl(var(--card));
847
+ border-color: hsl(var(--border));
848
+ }
849
+
850
+ .app-dropdown-item {
851
+ display: flex;
852
+ align-items: center;
853
+ cursor: pointer;
854
+ font-weight: 700;
855
+ color: hsl(var(--foreground)) !important;
856
+ }
857
+
858
+ .app-dropdown-item:hover,
859
+ .app-dropdown-item:focus {
860
+ background-color: hsl(var(--accent));
861
+ color: hsl(var(--accent-foreground)) !important;
862
+ }
863
+
864
+ /* =========================================================
865
+ POPOVERS
866
+ ========================================================= */
867
+ .app-popover {
868
+ width: 20rem;
869
+ padding: 0.5rem;
870
+ border-width: 2px;
871
+ background-color: hsl(var(--card));
872
+ border-color: hsl(var(--border));
873
+ color: hsl(var(--card-foreground));
874
+ }
875
+
876
+ /* =========================================================
877
+ HELP DIALOG
878
+ ========================================================= */
879
+ .help-dialog-title {
880
+ font-weight: 600;
881
+ color: hsl(var(--foreground)) !important;
882
+ }
883
+
884
+ .help-dialog-body {
885
+ font-weight: 700 !important;
886
+ color: hsl(var(--muted-foreground)) !important;
887
+ }
888
+
889
+ @media (prefers-contrast: more) {
558
890
  .help-dialog-body {
559
- font-weight: 700 !important;
560
- color: hsl(var(--muted-foreground)) !important;
561
- }
562
-
563
- @media (prefers-contrast: more) {
564
- .help-dialog-body {
565
- color: #ffffff !important;
566
- }
567
- }
568
-
569
- /* =========================================================
570
- FILTER & SORT (GENERIC)
571
- ========================================================= */
891
+ color: #ffffff !important;
892
+ }
893
+ }
894
+
895
+ /* =========================================================
896
+ FILTER & SORT (GENERIC)
897
+ ========================================================= */
898
+ .filter-select-trigger,
899
+ .sort-select-trigger {
900
+ width: 100%;
901
+ border-radius: 0.75rem;
902
+ height: 2.75rem;
903
+ padding-left: 1rem;
904
+ padding-right: 1rem;
905
+ font-weight: 700;
906
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
907
+ border-width: 2px;
908
+ background-color: hsl(var(--primary));
909
+ border-color: hsl(var(--border));
910
+ color: hsl(var(--primary-foreground));
911
+ }
912
+ @media (min-width: 640px) {
572
913
  .filter-select-trigger,
573
914
  .sort-select-trigger {
574
- @apply w-full sm:w-auto rounded-xl h-11 px-4 font-bold shadow-sm border-2;
575
- background-color: hsl(var(--primary));
576
- border-color: hsl(var(--border));
577
- color: hsl(var(--primary-foreground));
578
- }
579
-
580
- .filter-select-content,
581
- .sort-select-content {
582
- background-color: hsl(var(--popover));
583
- border-color: hsl(var(--border));
584
- color: hsl(var(--popover-foreground));
585
- }
586
-
587
- .filter-select-item,
588
- .sort-select-item {
589
- @apply font-bold;
590
- color: hsl(var(--foreground));
591
- }
592
-
593
- .filter-select-item:hover,
594
- .sort-select-item:hover {
595
- background-color: hsl(var(--accent));
596
- color: hsl(var(--accent-foreground));
597
- }
598
-
599
- /* High contrast behavior */
600
- .high-contrast .filter-select-trigger,
601
- .high-contrast .sort-select-trigger {
602
- background-color: hsl(var(--background));
603
- border-color: hsl(var(--border));
604
- color: hsl(var(--foreground));
605
- }
606
-
607
- .high-contrast .filter-select-content,
608
- .high-contrast .sort-select-content {
609
- background-color: hsl(var(--background));
610
- border-color: hsl(var(--border));
611
- color: hsl(var(--foreground));
612
- }
613
-
614
- .high-contrast .filter-select-item:hover,
615
- .high-contrast .sort-select-item:hover {
616
- background-color: hsl(var(--foreground));
617
- color: hsl(var(--background));
618
- }
619
-
620
- /* =========================================================
621
- VIEW TOGGLE (GENERIC)
622
- ========================================================= */
623
- .view-toggle-container {
624
- @apply flex items-center p-1 rounded-xl border-2 shadow-sm;
625
- background-color: hsl(var(--muted));
626
- border-color: hsl(var(--border));
627
- }
628
-
629
- .view-toggle-button {
630
- @apply rounded-lg h-8 w-8;
631
- color: hsl(var(--foreground));
632
- }
633
- }
915
+ width: auto;
916
+ }
917
+ }
918
+
919
+ .filter-select-content,
920
+ .sort-select-content {
921
+ background-color: hsl(var(--popover));
922
+ border-color: hsl(var(--border));
923
+ color: hsl(var(--popover-foreground));
924
+ }
925
+
926
+ .filter-select-item,
927
+ .sort-select-item {
928
+ font-weight: 700;
929
+ color: hsl(var(--foreground));
930
+ }
931
+
932
+ .filter-select-item:hover,
933
+ .sort-select-item:hover {
934
+ background-color: hsl(var(--accent));
935
+ color: hsl(var(--accent-foreground));
936
+ }
937
+
938
+ /* High contrast behavior */
939
+ .high-contrast .filter-select-trigger,
940
+ .high-contrast .sort-select-trigger {
941
+ background-color: hsl(var(--background));
942
+ border-color: hsl(var(--border));
943
+ color: hsl(var(--foreground));
944
+ }
945
+
946
+ .high-contrast .filter-select-content,
947
+ .high-contrast .sort-select-content {
948
+ background-color: hsl(var(--background));
949
+ border-color: hsl(var(--border));
950
+ color: hsl(var(--foreground));
951
+ }
952
+
953
+ .high-contrast .filter-select-item:hover,
954
+ .high-contrast .sort-select-item:hover {
955
+ background-color: hsl(var(--foreground));
956
+ color: hsl(var(--background));
957
+ }
958
+
959
+ /* =========================================================
960
+ VIEW TOGGLE (GENERIC)
961
+ ========================================================= */
962
+ .view-toggle-container {
963
+ display: flex;
964
+ align-items: center;
965
+ padding: 0.25rem;
966
+ border-radius: 0.75rem;
967
+ border-width: 2px;
968
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
969
+ background-color: hsl(var(--muted));
970
+ border-color: hsl(var(--border));
971
+ }
972
+
973
+ .view-toggle-button {
974
+ border-radius: 0.5rem;
975
+ height: 2rem;
976
+ width: 2rem;
977
+ color: hsl(var(--foreground));
978
+ }