@24vlh/vds 0.3.4 → 0.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/accordion.css +0 -9
- package/dist/components/action-bar.css +0 -3
- package/dist/components/authoring.css +0 -9
- package/dist/components/authoring.min.css +1 -1
- package/dist/components/avatar.css +0 -6
- package/dist/components/badge-tag.css +0 -6
- package/dist/components/badge-tag.min.css +1 -1
- package/dist/components/buttons.css +0 -12
- package/dist/components/buttons.min.css +1 -1
- package/dist/components/charts.css +0 -14
- package/dist/components/charts.min.css +1 -1
- package/dist/components/command.css +1 -21
- package/dist/components/command.min.css +1 -1
- package/dist/components/content-blocks.css +0 -21
- package/dist/components/content-blocks.min.css +1 -1
- package/dist/components/description-list.css +0 -5
- package/dist/components/description-list.min.css +1 -1
- package/dist/components/doc-block.css +0 -24
- package/dist/components/doc-block.min.css +1 -1
- package/dist/components/feedback.css +3 -20
- package/dist/components/feedback.min.css +1 -1
- package/dist/components/flows.css +0 -14
- package/dist/components/flows.min.css +1 -1
- package/dist/components/forms-advanced.css +0 -13
- package/dist/components/forms-advanced.min.css +1 -1
- package/dist/components/forms.css +0 -28
- package/dist/components/forms.min.css +1 -1
- package/dist/components/guidance.css +0 -14
- package/dist/components/guidance.min.css +1 -1
- package/dist/components/header-footer.css +0 -10
- package/dist/components/header-footer.min.css +1 -1
- package/dist/components/hero.css +0 -12
- package/dist/components/hero.min.css +1 -1
- package/dist/components/icons.css +60 -19
- package/dist/components/icons.min.css +1 -1
- package/dist/components/inbox.css +0 -54
- package/dist/components/inbox.min.css +1 -1
- package/dist/components/navigation.css +0 -13
- package/dist/components/navigation.min.css +1 -1
- package/dist/components/overlays.css +0 -15
- package/dist/components/overlays.min.css +1 -1
- package/dist/components/progress.css +0 -5
- package/dist/components/progress.min.css +1 -1
- package/dist/components/sections.css +0 -16
- package/dist/components/sections.min.css +1 -1
- package/dist/components/skeleton.css +0 -11
- package/dist/components/state.css +0 -3
- package/dist/components/tables.css +0 -18
- package/dist/components/tables.min.css +1 -1
- package/dist/components/tabs.css +0 -10
- package/dist/components/tabs.min.css +1 -1
- package/dist/components/toasts.css +0 -8
- package/dist/components/toasts.min.css +1 -1
- package/dist/components/tooltips-popovers.css +0 -13
- package/dist/components/tooltips-popovers.min.css +1 -1
- package/dist/components/typography.css +0 -3
- package/dist/components/utilities.css +0 -28
- package/dist/components/utilities.min.css +1 -1
- package/dist/core.css +2 -2
- package/dist/core.min.css +1 -1
- package/dist/identity.css +2 -7
- package/dist/identity.min.css +1 -1
- package/dist/themes/carbon.css +0 -2
- package/dist/themes/graphite.css +0 -2
- package/dist/themes/navy.css +0 -2
- package/dist/themes/slate.css +0 -2
- package/dist/vds.css +75 -32
- package/dist/vds.min.css +1 -1
- package/package.json +1 -1
|
@@ -26,7 +26,6 @@
|
|
|
26
26
|
- Backdrop + centering
|
|
27
27
|
- Open/closed states via class or data attribute
|
|
28
28
|
--------------------------------------------------------- */
|
|
29
|
-
|
|
30
29
|
[data-vds-commands],
|
|
31
30
|
.vds-commands {
|
|
32
31
|
--command-backdrop-bg: color-mix(in srgb, var(--color-bg) 60%, #000 55%);
|
|
@@ -140,7 +139,6 @@
|
|
|
140
139
|
2. PANEL SHELL
|
|
141
140
|
- Actual dialog surface
|
|
142
141
|
--------------------------------------------------------- */
|
|
143
|
-
|
|
144
142
|
.command__panel {
|
|
145
143
|
position: relative;
|
|
146
144
|
width: 100%;
|
|
@@ -182,7 +180,6 @@
|
|
|
182
180
|
/* ---------------------------------------------------------
|
|
183
181
|
3. HEADER & SEARCH ROW
|
|
184
182
|
--------------------------------------------------------- */
|
|
185
|
-
|
|
186
183
|
.command__header {
|
|
187
184
|
display: grid;
|
|
188
185
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
@@ -290,7 +287,6 @@
|
|
|
290
287
|
/* ---------------------------------------------------------
|
|
291
288
|
4. BODY, SECTIONS & LIST
|
|
292
289
|
--------------------------------------------------------- */
|
|
293
|
-
|
|
294
290
|
.command__body {
|
|
295
291
|
position: relative;
|
|
296
292
|
display: flex;
|
|
@@ -426,7 +422,7 @@
|
|
|
426
422
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--command-item-border-active) 40%, transparent);
|
|
427
423
|
}
|
|
428
424
|
|
|
429
|
-
@supports (color: color-mix(in lch, red, blue))
|
|
425
|
+
@supports (color: color-mix(in lch, red, blue)) {
|
|
430
426
|
.command__item--active,
|
|
431
427
|
.command__item[aria-selected="true"] {
|
|
432
428
|
box-shadow: 0 0 0 var(--border-width, 1px) color-mix(in srgb, var(--command-item-border-active) 40%, transparent);
|
|
@@ -460,7 +456,6 @@
|
|
|
460
456
|
/* ---------------------------------------------------------
|
|
461
457
|
5. EMPTY STATE
|
|
462
458
|
--------------------------------------------------------- */
|
|
463
|
-
|
|
464
459
|
.command__empty {
|
|
465
460
|
padding: var(--space-6) var(--space-4) var(--space-5);
|
|
466
461
|
text-align: center;
|
|
@@ -475,7 +470,6 @@
|
|
|
475
470
|
/* ---------------------------------------------------------
|
|
476
471
|
6. FOOTER (HELPER TEXT / STATUS)
|
|
477
472
|
--------------------------------------------------------- */
|
|
478
|
-
|
|
479
473
|
.command__footer {
|
|
480
474
|
padding: var(--space-2_5) var(--space-4);
|
|
481
475
|
border-top: 1px solid var(--command-panel-border);
|
|
@@ -508,7 +502,6 @@
|
|
|
508
502
|
/* ---------------------------------------------------------
|
|
509
503
|
7. SCROLLBARS & OVERRIDES
|
|
510
504
|
--------------------------------------------------------- */
|
|
511
|
-
|
|
512
505
|
.command__body,
|
|
513
506
|
.command__scroll {
|
|
514
507
|
scrollbar-width: thin;
|
|
@@ -534,7 +527,6 @@
|
|
|
534
527
|
/* ---------------------------------------------------------
|
|
535
528
|
8. COMMAND PAGE FOUNDATION (Landing / Hub)
|
|
536
529
|
--------------------------------------------------------- */
|
|
537
|
-
|
|
538
530
|
.command-page {
|
|
539
531
|
display: flex;
|
|
540
532
|
flex-direction: column;
|
|
@@ -617,7 +609,6 @@
|
|
|
617
609
|
/* ---------------------------------------------------------
|
|
618
610
|
9. COMMAND TOOLBAR
|
|
619
611
|
--------------------------------------------------------- */
|
|
620
|
-
|
|
621
612
|
.command-toolbar {
|
|
622
613
|
display: flex;
|
|
623
614
|
flex-wrap: wrap;
|
|
@@ -648,7 +639,6 @@
|
|
|
648
639
|
/* ---------------------------------------------------------
|
|
649
640
|
10. GRID + VARIANTS
|
|
650
641
|
--------------------------------------------------------- */
|
|
651
|
-
|
|
652
642
|
.command-grid {
|
|
653
643
|
display: grid;
|
|
654
644
|
grid-gap: var(--command-surface-gap);
|
|
@@ -758,7 +748,6 @@
|
|
|
758
748
|
/* ---------------------------------------------------------
|
|
759
749
|
11. CARD + SURFACE
|
|
760
750
|
--------------------------------------------------------- */
|
|
761
|
-
|
|
762
751
|
.command-card {
|
|
763
752
|
--command-variant-rail: var(--command-accent);
|
|
764
753
|
--command-variant-tint: var(--command-accent-soft);
|
|
@@ -819,7 +808,6 @@
|
|
|
819
808
|
/* ---------------------------------------------------------
|
|
820
809
|
12. PILLS / TAGS
|
|
821
810
|
--------------------------------------------------------- */
|
|
822
|
-
|
|
823
811
|
.command-pill {
|
|
824
812
|
--command-variant-rail: var(--command-pill-border);
|
|
825
813
|
--command-variant-tint: var(--command-pill-bg);
|
|
@@ -843,7 +831,6 @@
|
|
|
843
831
|
/* ---------------------------------------------------------
|
|
844
832
|
13. ACTIONS (Tiles + Rows)
|
|
845
833
|
--------------------------------------------------------- */
|
|
846
|
-
|
|
847
834
|
.command-action {
|
|
848
835
|
--command-variant-rail: var(--command-accent);
|
|
849
836
|
--command-variant-tint: var(--command-accent-soft);
|
|
@@ -947,7 +934,6 @@
|
|
|
947
934
|
/* ---------------------------------------------------------
|
|
948
935
|
14. NEXT STEPS
|
|
949
936
|
--------------------------------------------------------- */
|
|
950
|
-
|
|
951
937
|
.command-steps {
|
|
952
938
|
list-style: none;
|
|
953
939
|
margin: 0;
|
|
@@ -1028,7 +1014,6 @@
|
|
|
1028
1014
|
/* ---------------------------------------------------------
|
|
1029
1015
|
15. QUEUE + LANES
|
|
1030
1016
|
--------------------------------------------------------- */
|
|
1031
|
-
|
|
1032
1017
|
.command-lanes {
|
|
1033
1018
|
display: grid;
|
|
1034
1019
|
grid-gap: var(--space-3);
|
|
@@ -1161,7 +1146,6 @@
|
|
|
1161
1146
|
/* ---------------------------------------------------------
|
|
1162
1147
|
16. GLANCE METRICS
|
|
1163
1148
|
--------------------------------------------------------- */
|
|
1164
|
-
|
|
1165
1149
|
.command-glance-grid {
|
|
1166
1150
|
display: grid;
|
|
1167
1151
|
grid-gap: var(--space-3);
|
|
@@ -1212,7 +1196,6 @@
|
|
|
1212
1196
|
/* ---------------------------------------------------------
|
|
1213
1197
|
17. NUDGES
|
|
1214
1198
|
--------------------------------------------------------- */
|
|
1215
|
-
|
|
1216
1199
|
.command-nudge {
|
|
1217
1200
|
--command-variant-rail: var(--command-accent);
|
|
1218
1201
|
--command-variant-tint: var(--command-accent-soft);
|
|
@@ -1273,7 +1256,6 @@
|
|
|
1273
1256
|
/* ---------------------------------------------------------
|
|
1274
1257
|
18. ACTIVITY STREAM
|
|
1275
1258
|
--------------------------------------------------------- */
|
|
1276
|
-
|
|
1277
1259
|
.command-activity {
|
|
1278
1260
|
list-style: none;
|
|
1279
1261
|
margin: 0;
|
|
@@ -1319,7 +1301,6 @@
|
|
|
1319
1301
|
/* ---------------------------------------------------------
|
|
1320
1302
|
19. EMPTY STATE
|
|
1321
1303
|
--------------------------------------------------------- */
|
|
1322
|
-
|
|
1323
1304
|
.command-empty {
|
|
1324
1305
|
padding: var(--space-6);
|
|
1325
1306
|
border-radius: var(--command-surface-radius);
|
|
@@ -1352,7 +1333,6 @@
|
|
|
1352
1333
|
/* ---------------------------------------------------------
|
|
1353
1334
|
20. REDUCED MOTION SAFETY (optional extra)
|
|
1354
1335
|
--------------------------------------------------------- */
|
|
1355
|
-
|
|
1356
1336
|
@media (prefers-reduced-motion: reduce) {
|
|
1357
1337
|
.command,
|
|
1358
1338
|
.command::before,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.vds-commands,[data-vds-commands]{--command-backdrop-bg:color-mix(in srgb,var(--color-bg) 60%,#000 55%);--command-panel-bg:var(--color-surface);--command-panel-border:var(--color-border-subtle);--command-panel-radius:var(--radius-xl);--command-panel-shadow:var(--shadow-xl);--command-panel-max-width:42rem;--command-panel-max-height:min(26rem,70vh);--command-header-bg:var(--color-surface-subtle);--command-input-bg:transparent;--command-input-border:transparent;--command-input-placeholder:var(--color-placeholder);--command-item-radius:var(--radius-md);--command-item-gap:var(--space-3);--command-item-pad-y:var(--space-2);--command-item-pad-x:var(--space-3);--command-item-bg-hover:var(--color-surface-subtle);--command-item-bg-active:var(--color-accent-soft);--command-item-border-active:var(--color-accent);--command-divider:var(--color-border-subtle);--command-label-muted:var(--color-text-muted);--command-scrollbar-thumb:var(--color-border-subtle);--command-scrollbar-track:transparent;--command-page-bg:var(--color-bg);--command-page-gap:var(--space-6);--command-page-padding:var(--space-6);--command-page-max-width:var(--content-width-xl);--command-surface-bg:var(--color-surface);--command-surface-border:var(--color-border-subtle);--command-surface-radius:var(--radius-lg);--command-surface-shadow:var(--shadow-sm);--command-surface-pad:var(--space-4);--command-surface-gap:var(--space-3);--command-surface-title:var(--color-text);--command-surface-muted:var(--color-text-muted);--command-rail-width:var(--border-width-strong);--command-accent:var(--color-accent);--command-accent-soft:var(--color-accent-soft);--command-accent-text:var(--color-on-accent);--command-pill-bg:var(--color-surface-subtle);--command-pill-border:var(--color-border-subtle);--command-pill-text:var(--color-text-muted);--command-progress-track:var(--color-muted-bg);--command-progress-fill:var(--color-accent)}.command{align-items:flex-start;display:flex;justify-content:center;padding:var(--space-10) var(--space-4) var(--space-6);pointer-events:none;transition:opacity .18s ease-out,visibility .18s ease-out;transition:opacity var(--transition-normal,.18s ease-out),visibility var(--transition-normal,.18s ease-out);visibility:hidden;z-index:90;z-index:var(--z-modal,90)}.command,.command:before{bottom:0;left:0;opacity:0;position:fixed;right:0;top:0}.command:before{background:var(--command-backdrop-bg);content:"";transition:opacity .18s ease-out;transition:opacity var(--transition-normal,.18s ease-out)}.command--open,.command[aria-hidden=false],.command[data-command-open=true]{opacity:1;pointer-events:auto;visibility:visible}.command--open:before,.command[aria-hidden=false]:before,.command[data-command-open=true]:before{opacity:1}.command--center{align-items:center}@media (max-width:640px){.command{align-items:stretch;padding:var(--space-6) var(--space-2)}}.command__panel{background:var(--command-panel-bg);border:var(--border-width,1px) solid var(--command-panel-border);border-radius:var(--command-panel-radius);box-shadow:var(--command-panel-shadow);color:var(--color-text);display:flex;flex-direction:column;max-height:var(--command-panel-max-height);max-width:var(--command-panel-max-width);opacity:0;overflow:hidden;position:relative;transform:translateY(8px) scale(.98);transition:opacity .18s ease-out,transform .18s ease-out;transition:opacity var(--transition-normal,.18s ease-out),transform var(--transition-normal,.18s ease-out);width:100%}.command--open .command__panel,.command[aria-hidden=false] .command__panel,.command[data-command-open=true] .command__panel{opacity:1;transform:translateY(0) scale(1)}@media (max-width:640px){.command__panel{border-radius:var(--radius-lg);max-height:calc(100vh - var(--space-12));max-width:100%}}.command__header{grid-gap:var(--space-3);align-items:center;background:var(--command-header-bg);border-bottom:var(--border-width,1px) solid var(--command-panel-border);display:grid;gap:var(--space-3);grid-template-columns:auto minmax(0,1fr) auto;padding:var(--space-3) var(--space-4)}.command__leading-icon{align-items:center;color:var(--command-label-muted);display:inline-flex;height:1.25rem;height:var(--icon-md,1.25rem);justify-content:center;width:1.25rem;width:var(--icon-md,1.25rem)}.command__leading-icon .icon,.command__leading-icon svg{height:100%;width:100%}.command__input{background:var(--command-input-bg);border:0;color:var(--color-text);font:inherit;line-height:inherit;min-width:0;padding:0;width:100%}.command__input::-moz-placeholder{color:var(--command-input-placeholder)}.command__input::placeholder{color:var(--command-input-placeholder)}.command__input:focus{outline:none}.command__hint{align-items:center;color:var(--command-label-muted);display:inline-flex;font-size:var(--text-xs);gap:var(--space-2);white-space:nowrap}.command__hint-text,.command__shortcut{align-items:center;display:inline-flex;gap:var(--space-1)}.command__kbd-key{align-items:center;background:var(--color-surface-subtle);border:var(--border-width,1px) solid var(--command-panel-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-xs);display:inline-flex;font-family:var(--font-family-mono),monospace;font-size:.8em;justify-content:center;line-height:1.4;min-width:1.6em;padding:.05em .45em}@media (max-width:640px){.command__header{gap:var(--space-2);padding-left:var(--space-3);padding-right:var(--space-3)}.command__hint-text{display:none}}.command__body{display:flex;flex-direction:column;overflow:hidden;padding:var(--space-2) var(--space-2) var(--space-3);position:relative}.command__scroll{max-height:100%;overflow-y:auto;padding-left:var(--space-2);padding-right:var(--space-2)}.command__body{overflow-y:auto}.command__section{padding:var(--space-2) var(--space-2) var(--space-1)}.command__section+.command__section{border-top:var(--border-width,1px) solid var(--command-divider);margin-top:var(--space-1);padding-top:var(--space-3)}.command__section-label{color:var(--command-label-muted);font-size:var(--text-xs);font-weight:500;font-weight:var(--font-weight-medium,500);letter-spacing:.08em;margin-bottom:var(--space-1);text-transform:uppercase}.command__list{list-style:none;margin:0;padding:0}.command__item{align-items:center;background:transparent;border-radius:var(--command-item-radius);color:var(--color-text);cursor:pointer;display:flex;gap:var(--command-item-gap);justify-content:space-between;padding:var(--command-item-pad-y) var(--command-item-pad-x);position:relative;transition:background-color .12s ease-out,border-color .12s ease-out,box-shadow .12s ease-out,transform .12s ease-out;transition:background-color var(--transition-fast,.12s ease-out),border-color var(--transition-fast,.12s ease-out),box-shadow var(--transition-fast,.12s ease-out),transform var(--transition-fast,.12s ease-out)}.command__item-main{display:flex;flex-direction:column;gap:0;min-width:0}.command__item-label{font-size:var(--text-sm);font-weight:500;font-weight:var(--font-weight-medium,500)}.command__item-description,.command__item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.command__item-description{color:var(--command-label-muted);font-size:var(--text-xs)}.command__item-icon{align-items:center;color:var(--command-label-muted);display:inline-flex;height:1rem;height:var(--icon-sm,1rem);justify-content:center;margin-right:var(--space-2);width:1rem;width:var(--icon-sm,1rem)}.command__item-icon .icon,.command__item-icon svg{height:100%;width:100%}.command__item-meta{align-items:center;color:var(--command-label-muted);display:inline-flex;font-size:var(--text-xs);gap:var(--space-1);margin-left:auto;white-space:nowrap}.command__item:hover{background-color:var(--command-item-bg-hover)}.command__item:focus-visible{box-shadow:0 0 0 2px var(--focus-ring-color,var(--color-accent));box-shadow:0 0 0 var(--border-width-strong,2px) var(--focus-ring-color,var(--color-accent));outline:none}.command__item--active,.command__item[aria-selected=true]{background-color:var(--command-item-bg-active);border:var(--border-width,1px) solid var(--command-item-border-active);box-shadow:0 0 0 1px color-mix(in srgb,var(--command-item-border-active) 40%,transparent)}@supports (color:color-mix(in lch,red,blue)) and (top:var(--f )){.command__item--active,.command__item[aria-selected=true]{box-shadow:0 0 0 var(--border-width,1px) color-mix(in srgb,var(--command-item-border-active) 40%,transparent)}}.command__item--active .command__item-label,.command__item[aria-selected=true] .command__item-label{color:var(--color-on-accent)}.command__item--active .command__item-meta,.command__item[aria-selected=true] .command__item-meta{color:color-mix(in srgb,var(--color-on-accent) 65%,transparent)}.command__item--disabled,.command__item[aria-disabled=true]{cursor:not-allowed;opacity:.55}.command--compact .command__item{font-size:var(--text-xs);padding:var(--space-1_5) var(--space-2_5)}.command__empty{color:var(--command-label-muted);font-size:var(--text-sm);padding:var(--space-6) var(--space-4) var(--space-5);text-align:center}.command__empty p{margin:0}.command__footer{align-items:center;background:var(--color-surface-subtle);border-top:var(--border-width,1px) solid var(--command-panel-border);color:var(--command-label-muted);display:flex;font-size:var(--text-xs);gap:var(--space-2);justify-content:space-between;padding:var(--space-2_5) var(--space-4)}.command__footer span{align-items:center;display:inline-flex;gap:var(--space-1)}@media (max-width:640px){.command__footer{align-items:flex-start;flex-direction:column;padding-left:var(--space-3);padding-right:var(--space-3)}}.command__body,.command__scroll{scrollbar-color:var(--command-scrollbar-thumb) var(--command-scrollbar-track);scrollbar-width:thin}.command__body::-webkit-scrollbar,.command__scroll::-webkit-scrollbar{width:6px}.command__body::-webkit-scrollbar-track,.command__scroll::-webkit-scrollbar-track{background:var(--command-scrollbar-track)}.command__body::-webkit-scrollbar-thumb,.command__scroll::-webkit-scrollbar-thumb{background:var(--command-scrollbar-thumb);border-radius:999px}.command-page{color:var(--command-surface-title);display:flex;flex-direction:column;gap:var(--command-page-gap);margin:0 auto;max-width:var(--command-page-max-width)}.command-page--dense{--command-page-gap:var(--space-4)}.command-page__header{display:flex;flex-direction:column;gap:var(--space-2)}.command-page__kicker{color:var(--command-surface-muted);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase}.command-page__title{font-size:var(--text-2xl);font-weight:600;font-weight:var(--font-weight-semibold,600)}.command-page__subtitle{color:var(--command-surface-muted);font-size:var(--text-sm);max-width:60ch}.command-page__actions,.command-page__meta{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2)}.command-page__meta{color:var(--command-surface-muted);font-size:var(--text-xs)}.command-layout{grid-gap:var(--space-6);display:grid;gap:var(--space-6);grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.command-layout--balanced{grid-template-columns:repeat(2,minmax(0,1fr))}@media (max-width:1024px){.command-layout,.command-layout--balanced{grid-template-columns:1fr}}.command-stack{display:flex;flex-direction:column;gap:var(--command-surface-gap)}.command-stack--loose{gap:var(--space-5)}.command-toolbar{align-items:center;background:var(--command-surface-bg);border:var(--border-width,1px) solid var(--command-surface-border);border-radius:var(--command-surface-radius);box-shadow:var(--command-surface-shadow);display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;padding:var(--space-3) var(--space-4)}.command-toolbar__actions,.command-toolbar__group{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2)}.command-toolbar__search{flex:1 1 14rem;min-width:12rem}.command-grid{grid-gap:var(--command-surface-gap);display:grid;gap:var(--command-surface-gap);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}.command-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.command-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.command-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width:1024px){.command-grid--3,.command-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:720px){.command-grid--2,.command-grid--3,.command-grid--4{grid-template-columns:1fr}}:where(.command-card,.command-action,.command-nudge,.command-glance,.command-pill,.command-step)[data-variant=info]{--command-variant-rail:var(--semantic-info-border,var(--color-info));--command-variant-tint:var(--semantic-info-bg,var(--color-info-soft));--command-variant-text:var(--semantic-info-text,var(--color-text));--command-variant-muted:var(--semantic-info-text,var(--color-text-muted))}:where(.command-card,.command-action,.command-nudge,.command-glance,.command-pill,.command-step)[data-variant=success]{--command-variant-rail:var(--semantic-success-border,var(--color-success));--command-variant-tint:var(--semantic-success-bg,var(--color-success-soft));--command-variant-text:var(--semantic-success-text,var(--color-text));--command-variant-muted:var(--semantic-success-text,var(--color-text-muted))}:where(.command-card,.command-action,.command-nudge,.command-glance,.command-pill,.command-step)[data-variant=warning]{--command-variant-rail:var(--semantic-warning-border,var(--color-warning));--command-variant-tint:var(--semantic-warning-bg,var(--color-warning-soft));--command-variant-text:var(--semantic-warning-text,var(--color-text));--command-variant-muted:var(--semantic-warning-text,var(--color-text-muted))}:where(.command-card,.command-action,.command-nudge,.command-glance,.command-pill,.command-step)[data-variant=danger]{--command-variant-rail:var(--semantic-danger-border,var(--color-danger));--command-variant-tint:var(--semantic-danger-bg,var(--color-danger-soft));--command-variant-text:var(--semantic-danger-text,var(--color-text));--command-variant-muted:var(--semantic-danger-text,var(--color-text-muted))}:where(.command-card,.command-action,.command-nudge,.command-glance,.command-pill,.command-step)[data-variant=accent]{--command-variant-rail:var(--accent-soft-border,var(--color-accent));--command-variant-tint:var(--accent-soft-surface,var(--color-accent-soft));--command-variant-text:var(--accent-soft-on,var(--color-on-accent));--command-variant-muted:var(--accent-soft-on,var(--color-on-accent))}:where(.command-card,.command-action,.command-nudge,.command-glance,.command-pill,.command-step)[data-variant=neutral]{--command-variant-rail:var(--color-border-strong);--command-variant-tint:var(--color-surface-subtle);--command-variant-text:var(--color-text);--command-variant-muted:var(--color-text-muted)}.command-card{--command-variant-rail:var(--command-accent);--command-variant-tint:var(--command-accent-soft);--command-variant-text:var(--command-surface-title);--command-variant-muted:var(--command-surface-muted);background:var(--command-surface-bg);border:var(--border-width,1px) solid var(--command-surface-border);border-radius:var(--command-surface-radius);box-shadow:var(--command-surface-shadow);color:var(--command-variant-text);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--command-surface-pad)}.command-card--rail{border-left:var(--command-rail-width) solid var(--command-variant-rail)}.command-card--tint{background:var(--command-variant-tint)}.command-card--flat{box-shadow:none}.command-card__kicker{color:var(--command-variant-muted);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.command-card__title{font-size:var(--text-md);font-weight:600;font-weight:var(--font-weight-semibold,600)}.command-card__subtitle{color:var(--command-variant-muted);font-size:var(--text-sm)}.command-card__footer,.command-card__meta{color:var(--command-variant-muted);display:flex;flex-wrap:wrap;font-size:var(--text-xs);gap:var(--space-2)}.command-pill{--command-variant-rail:var(--command-pill-border);--command-variant-tint:var(--command-pill-bg);--command-variant-text:var(--command-pill-text);align-items:center;background:var(--command-variant-tint);border:var(--border-width,1px) solid var(--command-variant-rail);border-radius:var(--radius-pill);display:inline-flex;font-size:var(--text-xxs);letter-spacing:.08em;padding:0 var(--space-2);text-transform:uppercase;white-space:nowrap}.command-action,.command-pill{color:var(--command-variant-text);gap:var(--space-1)}.command-action{--command-variant-rail:var(--command-accent);--command-variant-tint:var(--command-accent-soft);--command-variant-text:var(--command-surface-title);--command-variant-muted:var(--command-surface-muted);background:var(--command-surface-bg);border:var(--border-width,1px) solid var(--command-surface-border);border-radius:var(--command-surface-radius);box-shadow:var(--shadow-xs);display:flex;flex-direction:column;padding:var(--command-surface-pad);position:relative;-webkit-text-decoration:none;text-decoration:none;transition:transform .12s ease-out,box-shadow .12s ease-out,border-color .12s ease-out,background-color .12s ease-out;transition:transform var(--transition-fast,.12s ease-out),box-shadow var(--transition-fast,.12s ease-out),border-color var(--transition-fast,.12s ease-out),background-color var(--transition-fast,.12s ease-out)}.command-action:hover{background:var(--command-variant-tint);border-color:var(--command-variant-rail);transform:translateY(-1px)}.command-action--primary{grid-column:span 2;padding:var(--space-5)}.command-action--row{align-items:center;flex-direction:row;gap:var(--space-3);justify-content:space-between}.command-action--row .command-action__content{flex:1}.command-action--row .command-action__meta{margin-left:auto}@media (max-width:720px){.command-action--primary{grid-column:span 1}}.command-action__icon{align-items:center;color:var(--command-variant-rail);display:inline-flex;height:1.25rem;height:var(--icon-md,1.25rem);justify-content:center;width:1.25rem;width:var(--icon-md,1.25rem)}.command-action__icon .icon,.command-action__icon svg{height:100%;width:100%}.command-action__content{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}.command-action__title{font-size:var(--text-sm);font-weight:600;font-weight:var(--font-weight-semibold,600)}.command-action__desc,.command-action__meta{color:var(--command-variant-muted);font-size:var(--text-xs)}.command-action__meta{display:flex;flex-wrap:wrap;gap:var(--space-2)}.command-steps{grid-gap:var(--space-2);display:grid;gap:var(--space-2);list-style:none;margin:0;padding:0}.command-step{--command-variant-rail:var(--command-accent);--command-variant-tint:var(--command-accent-soft);--command-variant-text:var(--command-surface-title);--command-variant-muted:var(--command-surface-muted);grid-gap:var(--space-3);align-items:start;background:var(--command-surface-bg);border:var(--border-width,1px) solid var(--command-surface-border);border-radius:var(--command-surface-radius);display:grid;gap:var(--space-3);grid-template-columns:auto minmax(0,1fr) auto;padding:var(--space-3)}.command-step__index{align-items:center;background:var(--command-variant-tint);border-radius:999px;color:var(--command-variant-text);display:inline-flex;font-size:var(--text-xs);font-weight:600;font-weight:var(--font-weight-semibold,600);height:var(--space-6);justify-content:center;width:var(--space-6)}.command-step__content{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}.command-step__title{font-size:var(--text-sm);font-weight:600;font-weight:var(--font-weight-semibold,600)}.command-step__desc,.command-step__meta{color:var(--command-variant-muted);font-size:var(--text-xs)}.command-step__meta{display:flex;flex-wrap:wrap;gap:var(--space-2)}.command-step__actions{align-items:center;display:flex;gap:var(--space-2)}.command-step--done{opacity:.7}.command-lanes{grid-gap:var(--space-3);display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}.command-lane{background:var(--command-surface-bg);border:var(--border-width,1px) solid var(--command-surface-border);border-radius:var(--command-surface-radius);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3)}.command-lane__header{align-items:center;display:flex;gap:var(--space-2);justify-content:space-between}.command-lane__title{letter-spacing:.08em;text-transform:uppercase}.command-lane__count,.command-lane__title{color:var(--command-surface-muted);font-size:var(--text-xs)}.command-queue{grid-gap:var(--space-2);display:grid;gap:var(--space-2)}.command-queue__item{grid-gap:var(--space-3);align-items:center;background:var(--command-surface-bg);border:var(--border-width,1px) solid var(--command-surface-border);border-radius:var(--command-surface-radius);display:grid;gap:var(--space-3);grid-template-columns:auto minmax(0,1fr) auto;padding:var(--space-3)}.command-queue__status{background:var(--color-info);border-radius:999px;height:.6rem;width:.6rem}.command-queue__status--success{background:var(--color-success)}.command-queue__status--warning{background:var(--color-warning)}.command-queue__status--danger{background:var(--color-danger)}.command-queue__content{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}.command-queue__title{font-size:var(--text-sm);font-weight:600;font-weight:var(--font-weight-semibold,600)}.command-queue__meta{color:var(--command-surface-muted);display:flex;flex-wrap:wrap;font-size:var(--text-xs);gap:var(--space-2)}.command-queue__actions{align-items:center;display:flex;gap:var(--space-2)}.command-progress{background:var(--command-progress-track);border-radius:999px;height:.35rem;overflow:hidden}.command-progress__bar{background:var(--command-progress-fill);height:100%;transition:width .18s ease-out;transition:width var(--transition-normal,.18s ease-out);width:0}.command-progress--success{--command-progress-fill:var(--color-success)}.command-progress--warning{--command-progress-fill:var(--color-warning)}.command-progress--danger{--command-progress-fill:var(--color-danger)}.command-glance-grid{grid-gap:var(--space-3);display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}.command-glance{--command-variant-rail:var(--command-accent);--command-variant-tint:var(--command-accent-soft);--command-variant-text:var(--command-surface-title);--command-variant-muted:var(--command-surface-muted);background:var(--command-surface-bg);border:var(--border-width,1px) solid var(--command-surface-border);border-radius:var(--radius-md);color:var(--command-variant-text);display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3)}.command-glance--tint{background:var(--command-variant-tint);border-color:var(--command-variant-rail)}.command-glance__value{font-size:var(--text-lg);font-weight:600;font-weight:var(--font-weight-semibold,600)}.command-glance__label{color:var(--command-variant-muted);font-size:var(--text-xxs);letter-spacing:.08em;text-transform:uppercase}.command-glance__meta{color:var(--command-variant-muted);font-size:var(--text-xs)}.command-nudge{--command-variant-rail:var(--command-accent);--command-variant-tint:var(--command-accent-soft);--command-variant-text:var(--command-surface-title);--command-variant-muted:var(--command-surface-muted);align-items:flex-start;background:var(--command-surface-bg);border:var(--border-width,1px) solid var(--command-surface-border);border-radius:var(--command-surface-radius);color:var(--command-variant-text);display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4)}.command-nudge--tint{background:var(--command-variant-tint);border-color:var(--command-variant-rail)}.command-nudge__icon{align-items:center;color:var(--command-variant-rail);display:inline-flex;flex-shrink:0;height:1.25rem;height:var(--icon-md,1.25rem);justify-content:center;width:1.25rem;width:var(--icon-md,1.25rem)}.command-nudge__body{display:flex;flex-direction:column;gap:var(--space-1)}.command-nudge__title{font-size:var(--text-sm);font-weight:600;font-weight:var(--font-weight-semibold,600)}.command-nudge__text{color:var(--command-variant-muted);font-size:var(--text-xs)}.command-nudge__actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}.command-activity{grid-gap:var(--space-2);display:grid;gap:var(--space-2);list-style:none;margin:0;padding:0}.command-activity__item{grid-gap:var(--space-3);align-items:start;border-bottom:var(--border-width,1px) solid var(--command-surface-border);display:grid;gap:var(--space-3);grid-template-columns:auto minmax(0,1fr);padding-bottom:var(--space-2)}.command-activity__item:last-child{border-bottom:0;padding-bottom:0}.command-activity__time{color:var(--command-surface-muted);font-size:var(--text-xs);white-space:nowrap}.command-activity__title{font-size:var(--text-sm);font-weight:600;font-weight:var(--font-weight-semibold,600)}.command-activity__meta{color:var(--command-surface-muted);font-size:var(--text-xs)}.command-empty{border:var(--border-width,1px) dashed var(--command-surface-border);border-radius:var(--command-surface-radius);color:var(--command-surface-muted);padding:var(--space-6);text-align:center}.command-empty__title{color:var(--command-surface-title);font-size:var(--text-md);font-weight:600;font-weight:var(--font-weight-semibold,600)}.command-empty__body{font-size:var(--text-sm);margin-top:var(--space-1)}.command-empty__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;margin-top:var(--space-3)}@media (prefers-reduced-motion:reduce){.command,.command-action,.command-progress__bar,.command:before,.command__item,.command__panel{transition:none!important}}
|
|
1
|
+
.vds-commands,[data-vds-commands]{--command-backdrop-bg:color-mix(in srgb,var(--color-bg) 60%,#000 55%);--command-panel-bg:var(--color-surface);--command-panel-border:var(--color-border-subtle);--command-panel-radius:var(--radius-xl);--command-panel-shadow:var(--shadow-xl);--command-panel-max-width:42rem;--command-panel-max-height:min(26rem,70vh);--command-header-bg:var(--color-surface-subtle);--command-input-bg:transparent;--command-input-border:transparent;--command-input-placeholder:var(--color-placeholder);--command-item-radius:var(--radius-md);--command-item-gap:var(--space-3);--command-item-pad-y:var(--space-2);--command-item-pad-x:var(--space-3);--command-item-bg-hover:var(--color-surface-subtle);--command-item-bg-active:var(--color-accent-soft);--command-item-border-active:var(--color-accent);--command-divider:var(--color-border-subtle);--command-label-muted:var(--color-text-muted);--command-scrollbar-thumb:var(--color-border-subtle);--command-scrollbar-track:transparent;--command-page-bg:var(--color-bg);--command-page-gap:var(--space-6);--command-page-padding:var(--space-6);--command-page-max-width:var(--content-width-xl);--command-surface-bg:var(--color-surface);--command-surface-border:var(--color-border-subtle);--command-surface-radius:var(--radius-lg);--command-surface-shadow:var(--shadow-sm);--command-surface-pad:var(--space-4);--command-surface-gap:var(--space-3);--command-surface-title:var(--color-text);--command-surface-muted:var(--color-text-muted);--command-rail-width:var(--border-width-strong);--command-accent:var(--color-accent);--command-accent-soft:var(--color-accent-soft);--command-accent-text:var(--color-on-accent);--command-pill-bg:var(--color-surface-subtle);--command-pill-border:var(--color-border-subtle);--command-pill-text:var(--color-text-muted);--command-progress-track:var(--color-muted-bg);--command-progress-fill:var(--color-accent)}.command{align-items:flex-start;display:flex;justify-content:center;padding:var(--space-10) var(--space-4) var(--space-6);pointer-events:none;transition:opacity .18s ease-out,visibility .18s ease-out;transition:opacity var(--transition-normal,.18s ease-out),visibility var(--transition-normal,.18s ease-out);visibility:hidden;z-index:90;z-index:var(--z-modal,90)}.command,.command:before{bottom:0;left:0;opacity:0;position:fixed;right:0;top:0}.command:before{background:var(--command-backdrop-bg);content:"";transition:opacity .18s ease-out;transition:opacity var(--transition-normal,.18s ease-out)}.command--open,.command[aria-hidden=false],.command[data-command-open=true]{opacity:1;pointer-events:auto;visibility:visible}.command--open:before,.command[aria-hidden=false]:before,.command[data-command-open=true]:before{opacity:1}.command--center{align-items:center}@media (max-width:640px){.command{align-items:stretch;padding:var(--space-6) var(--space-2)}}.command__panel{background:var(--command-panel-bg);border:var(--border-width,1px) solid var(--command-panel-border);border-radius:var(--command-panel-radius);box-shadow:var(--command-panel-shadow);color:var(--color-text);display:flex;flex-direction:column;max-height:var(--command-panel-max-height);max-width:var(--command-panel-max-width);opacity:0;overflow:hidden;position:relative;transform:translateY(8px) scale(.98);transition:opacity .18s ease-out,transform .18s ease-out;transition:opacity var(--transition-normal,.18s ease-out),transform var(--transition-normal,.18s ease-out);width:100%}.command--open .command__panel,.command[aria-hidden=false] .command__panel,.command[data-command-open=true] .command__panel{opacity:1;transform:translateY(0) scale(1)}@media (max-width:640px){.command__panel{border-radius:var(--radius-lg);max-height:calc(100vh - var(--space-12));max-width:100%}}.command__header{align-items:center;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-gap:var(--space-3);background:var(--command-header-bg);border-bottom:var(--border-width,1px) solid var(--command-panel-border);gap:var(--space-3);padding:var(--space-3) var(--space-4)}.command__leading-icon{align-items:center;color:var(--command-label-muted);display:inline-flex;height:1.25rem;height:var(--icon-md,1.25rem);justify-content:center;width:1.25rem;width:var(--icon-md,1.25rem)}.command__leading-icon .icon,.command__leading-icon svg{height:100%;width:100%}.command__input{background:var(--command-input-bg);border:0;color:var(--color-text);font:inherit;line-height:inherit;min-width:0;padding:0;width:100%}.command__input::-moz-placeholder{color:var(--command-input-placeholder)}.command__input::placeholder{color:var(--command-input-placeholder)}.command__input:focus{outline:none}.command__hint{align-items:center;color:var(--command-label-muted);display:inline-flex;font-size:var(--text-xs);gap:var(--space-2);white-space:nowrap}.command__hint-text,.command__shortcut{align-items:center;display:inline-flex;gap:var(--space-1)}.command__kbd-key{align-items:center;background:var(--color-surface-subtle);border:var(--border-width,1px) solid var(--command-panel-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-xs);display:inline-flex;font-family:var(--font-family-mono),monospace;font-size:.8em;justify-content:center;line-height:1.4;min-width:1.6em;padding:.05em .45em}@media (max-width:640px){.command__header{gap:var(--space-2);padding-left:var(--space-3);padding-right:var(--space-3)}.command__hint-text{display:none}}.command__body{display:flex;flex-direction:column;overflow:hidden;padding:var(--space-2) var(--space-2) var(--space-3);position:relative}.command__scroll{max-height:100%;overflow-y:auto;padding-left:var(--space-2);padding-right:var(--space-2)}.command__body{overflow-y:auto}.command__section{padding:var(--space-2) var(--space-2) var(--space-1)}.command__section+.command__section{border-top:var(--border-width,1px) solid var(--command-divider);margin-top:var(--space-1);padding-top:var(--space-3)}.command__section-label{color:var(--command-label-muted);font-size:var(--text-xs);font-weight:500;font-weight:var(--font-weight-medium,500);letter-spacing:.08em;margin-bottom:var(--space-1);text-transform:uppercase}.command__list{list-style:none;margin:0;padding:0}.command__item{align-items:center;background:transparent;border-radius:var(--command-item-radius);color:var(--color-text);cursor:pointer;display:flex;gap:var(--command-item-gap);justify-content:space-between;padding:var(--command-item-pad-y) var(--command-item-pad-x);position:relative;transition:background-color .12s ease-out,border-color .12s ease-out,box-shadow .12s ease-out,transform .12s ease-out;transition:background-color var(--transition-fast,.12s ease-out),border-color var(--transition-fast,.12s ease-out),box-shadow var(--transition-fast,.12s ease-out),transform var(--transition-fast,.12s ease-out)}.command__item-main{display:flex;flex-direction:column;gap:0;min-width:0}.command__item-label{font-size:var(--text-sm);font-weight:500;font-weight:var(--font-weight-medium,500)}.command__item-description,.command__item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.command__item-description{color:var(--command-label-muted);font-size:var(--text-xs)}.command__item-icon{align-items:center;color:var(--command-label-muted);display:inline-flex;height:1rem;height:var(--icon-sm,1rem);justify-content:center;margin-right:var(--space-2);width:1rem;width:var(--icon-sm,1rem)}.command__item-icon .icon,.command__item-icon svg{height:100%;width:100%}.command__item-meta{align-items:center;color:var(--command-label-muted);display:inline-flex;font-size:var(--text-xs);gap:var(--space-1);margin-left:auto;white-space:nowrap}.command__item:hover{background-color:var(--command-item-bg-hover)}.command__item:focus-visible{box-shadow:0 0 0 2px var(--focus-ring-color,var(--color-accent));box-shadow:0 0 0 var(--border-width-strong,2px) var(--focus-ring-color,var(--color-accent));outline:none}.command__item--active,.command__item[aria-selected=true]{background-color:var(--command-item-bg-active);border:var(--border-width,1px) solid var(--command-item-border-active);box-shadow:0 0 0 1px color-mix(in srgb,var(--command-item-border-active) 40%,transparent)}@supports (color:color-mix(in lch,red,blue)){.command__item--active,.command__item[aria-selected=true]{box-shadow:0 0 0 var(--border-width,1px) color-mix(in srgb,var(--command-item-border-active) 40%,transparent)}}.command__item--active .command__item-label,.command__item[aria-selected=true] .command__item-label{color:var(--color-on-accent)}.command__item--active .command__item-meta,.command__item[aria-selected=true] .command__item-meta{color:color-mix(in srgb,var(--color-on-accent) 65%,transparent)}.command__item--disabled,.command__item[aria-disabled=true]{cursor:not-allowed;opacity:.55}.command--compact .command__item{font-size:var(--text-xs);padding:var(--space-1_5) var(--space-2_5)}.command__empty{color:var(--command-label-muted);font-size:var(--text-sm);padding:var(--space-6) var(--space-4) var(--space-5);text-align:center}.command__empty p{margin:0}.command__footer{align-items:center;background:var(--color-surface-subtle);border-top:var(--border-width,1px) solid var(--command-panel-border);color:var(--command-label-muted);display:flex;font-size:var(--text-xs);gap:var(--space-2);justify-content:space-between;padding:var(--space-2_5) var(--space-4)}.command__footer span{align-items:center;display:inline-flex;gap:var(--space-1)}@media (max-width:640px){.command__footer{align-items:flex-start;flex-direction:column;padding-left:var(--space-3);padding-right:var(--space-3)}}.command__body,.command__scroll{scrollbar-color:var(--command-scrollbar-thumb) var(--command-scrollbar-track);scrollbar-width:thin}.command__body::-webkit-scrollbar,.command__scroll::-webkit-scrollbar{width:6px}.command__body::-webkit-scrollbar-track,.command__scroll::-webkit-scrollbar-track{background:var(--command-scrollbar-track)}.command__body::-webkit-scrollbar-thumb,.command__scroll::-webkit-scrollbar-thumb{background:var(--command-scrollbar-thumb);border-radius:999px}.command-page{color:var(--command-surface-title);display:flex;flex-direction:column;gap:var(--command-page-gap);margin:0 auto;max-width:var(--command-page-max-width)}.command-page--dense{--command-page-gap:var(--space-4)}.command-page__header{display:flex;flex-direction:column;gap:var(--space-2)}.command-page__kicker{color:var(--command-surface-muted);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase}.command-page__title{font-size:var(--text-2xl);font-weight:600;font-weight:var(--font-weight-semibold,600)}.command-page__subtitle{color:var(--command-surface-muted);font-size:var(--text-sm);max-width:60ch}.command-page__actions,.command-page__meta{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2)}.command-page__meta{color:var(--command-surface-muted);font-size:var(--text-xs)}.command-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-gap:var(--space-6);gap:var(--space-6)}.command-layout--balanced{grid-template-columns:repeat(2,minmax(0,1fr))}@media (max-width:1024px){.command-layout,.command-layout--balanced{grid-template-columns:1fr}}.command-stack{display:flex;flex-direction:column;gap:var(--command-surface-gap)}.command-stack--loose{gap:var(--space-5)}.command-toolbar{align-items:center;background:var(--command-surface-bg);border:var(--border-width,1px) solid var(--command-surface-border);border-radius:var(--command-surface-radius);box-shadow:var(--command-surface-shadow);display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;padding:var(--space-3) var(--space-4)}.command-toolbar__actions,.command-toolbar__group{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2)}.command-toolbar__search{flex:1 1 14rem;min-width:12rem}.command-grid{display:grid;grid-gap:var(--command-surface-gap);gap:var(--command-surface-gap);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}.command-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.command-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.command-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width:1024px){.command-grid--3,.command-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:720px){.command-grid--2,.command-grid--3,.command-grid--4{grid-template-columns:1fr}}:where(.command-card,.command-action,.command-nudge,.command-glance,.command-pill,.command-step)[data-variant=info]{--command-variant-rail:var(--semantic-info-border,var(--color-info));--command-variant-tint:var(--semantic-info-bg,var(--color-info-soft));--command-variant-text:var(--semantic-info-text,var(--color-text));--command-variant-muted:var(--semantic-info-text,var(--color-text-muted))}:where(.command-card,.command-action,.command-nudge,.command-glance,.command-pill,.command-step)[data-variant=success]{--command-variant-rail:var(--semantic-success-border,var(--color-success));--command-variant-tint:var(--semantic-success-bg,var(--color-success-soft));--command-variant-text:var(--semantic-success-text,var(--color-text));--command-variant-muted:var(--semantic-success-text,var(--color-text-muted))}:where(.command-card,.command-action,.command-nudge,.command-glance,.command-pill,.command-step)[data-variant=warning]{--command-variant-rail:var(--semantic-warning-border,var(--color-warning));--command-variant-tint:var(--semantic-warning-bg,var(--color-warning-soft));--command-variant-text:var(--semantic-warning-text,var(--color-text));--command-variant-muted:var(--semantic-warning-text,var(--color-text-muted))}:where(.command-card,.command-action,.command-nudge,.command-glance,.command-pill,.command-step)[data-variant=danger]{--command-variant-rail:var(--semantic-danger-border,var(--color-danger));--command-variant-tint:var(--semantic-danger-bg,var(--color-danger-soft));--command-variant-text:var(--semantic-danger-text,var(--color-text));--command-variant-muted:var(--semantic-danger-text,var(--color-text-muted))}:where(.command-card,.command-action,.command-nudge,.command-glance,.command-pill,.command-step)[data-variant=accent]{--command-variant-rail:var(--accent-soft-border,var(--color-accent));--command-variant-tint:var(--accent-soft-surface,var(--color-accent-soft));--command-variant-text:var(--accent-soft-on,var(--color-on-accent));--command-variant-muted:var(--accent-soft-on,var(--color-on-accent))}:where(.command-card,.command-action,.command-nudge,.command-glance,.command-pill,.command-step)[data-variant=neutral]{--command-variant-rail:var(--color-border-strong);--command-variant-tint:var(--color-surface-subtle);--command-variant-text:var(--color-text);--command-variant-muted:var(--color-text-muted)}.command-card{--command-variant-rail:var(--command-accent);--command-variant-tint:var(--command-accent-soft);--command-variant-text:var(--command-surface-title);--command-variant-muted:var(--command-surface-muted);background:var(--command-surface-bg);border:var(--border-width,1px) solid var(--command-surface-border);border-radius:var(--command-surface-radius);box-shadow:var(--command-surface-shadow);color:var(--command-variant-text);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--command-surface-pad)}.command-card--rail{border-left:var(--command-rail-width) solid var(--command-variant-rail)}.command-card--tint{background:var(--command-variant-tint)}.command-card--flat{box-shadow:none}.command-card__kicker{color:var(--command-variant-muted);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.command-card__title{font-size:var(--text-md);font-weight:600;font-weight:var(--font-weight-semibold,600)}.command-card__subtitle{color:var(--command-variant-muted);font-size:var(--text-sm)}.command-card__footer,.command-card__meta{color:var(--command-variant-muted);display:flex;flex-wrap:wrap;font-size:var(--text-xs);gap:var(--space-2)}.command-pill{--command-variant-rail:var(--command-pill-border);--command-variant-tint:var(--command-pill-bg);--command-variant-text:var(--command-pill-text);align-items:center;background:var(--command-variant-tint);border:var(--border-width,1px) solid var(--command-variant-rail);border-radius:var(--radius-pill);display:inline-flex;font-size:var(--text-xxs);letter-spacing:.08em;padding:0 var(--space-2);text-transform:uppercase;white-space:nowrap}.command-action,.command-pill{color:var(--command-variant-text);gap:var(--space-1)}.command-action{--command-variant-rail:var(--command-accent);--command-variant-tint:var(--command-accent-soft);--command-variant-text:var(--command-surface-title);--command-variant-muted:var(--command-surface-muted);background:var(--command-surface-bg);border:var(--border-width,1px) solid var(--command-surface-border);border-radius:var(--command-surface-radius);box-shadow:var(--shadow-xs);display:flex;flex-direction:column;padding:var(--command-surface-pad);position:relative;-webkit-text-decoration:none;text-decoration:none;transition:transform .12s ease-out,box-shadow .12s ease-out,border-color .12s ease-out,background-color .12s ease-out;transition:transform var(--transition-fast,.12s ease-out),box-shadow var(--transition-fast,.12s ease-out),border-color var(--transition-fast,.12s ease-out),background-color var(--transition-fast,.12s ease-out)}.command-action:hover{background:var(--command-variant-tint);border-color:var(--command-variant-rail);transform:translateY(-1px)}.command-action--primary{grid-column:span 2;padding:var(--space-5)}.command-action--row{align-items:center;flex-direction:row;gap:var(--space-3);justify-content:space-between}.command-action--row .command-action__content{flex:1}.command-action--row .command-action__meta{margin-left:auto}@media (max-width:720px){.command-action--primary{grid-column:span 1}}.command-action__icon{align-items:center;color:var(--command-variant-rail);display:inline-flex;height:1.25rem;height:var(--icon-md,1.25rem);justify-content:center;width:1.25rem;width:var(--icon-md,1.25rem)}.command-action__icon .icon,.command-action__icon svg{height:100%;width:100%}.command-action__content{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}.command-action__title{font-size:var(--text-sm);font-weight:600;font-weight:var(--font-weight-semibold,600)}.command-action__desc,.command-action__meta{color:var(--command-variant-muted);font-size:var(--text-xs)}.command-action__meta{display:flex;flex-wrap:wrap;gap:var(--space-2)}.command-steps{display:grid;list-style:none;margin:0;padding:0;grid-gap:var(--space-2);gap:var(--space-2)}.command-step{--command-variant-rail:var(--command-accent);--command-variant-tint:var(--command-accent-soft);--command-variant-text:var(--command-surface-title);--command-variant-muted:var(--command-surface-muted);display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-gap:var(--space-3);align-items:start;background:var(--command-surface-bg);border:var(--border-width,1px) solid var(--command-surface-border);border-radius:var(--command-surface-radius);gap:var(--space-3);padding:var(--space-3)}.command-step__index{align-items:center;background:var(--command-variant-tint);border-radius:999px;color:var(--command-variant-text);display:inline-flex;font-size:var(--text-xs);font-weight:600;font-weight:var(--font-weight-semibold,600);height:var(--space-6);justify-content:center;width:var(--space-6)}.command-step__content{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}.command-step__title{font-size:var(--text-sm);font-weight:600;font-weight:var(--font-weight-semibold,600)}.command-step__desc,.command-step__meta{color:var(--command-variant-muted);font-size:var(--text-xs)}.command-step__meta{display:flex;flex-wrap:wrap;gap:var(--space-2)}.command-step__actions{align-items:center;display:flex;gap:var(--space-2)}.command-step--done{opacity:.7}.command-lanes{display:grid;grid-gap:var(--space-3);gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}.command-lane{background:var(--command-surface-bg);border:var(--border-width,1px) solid var(--command-surface-border);border-radius:var(--command-surface-radius);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3)}.command-lane__header{align-items:center;display:flex;gap:var(--space-2);justify-content:space-between}.command-lane__title{letter-spacing:.08em;text-transform:uppercase}.command-lane__count,.command-lane__title{color:var(--command-surface-muted);font-size:var(--text-xs)}.command-queue{display:grid;grid-gap:var(--space-2);gap:var(--space-2)}.command-queue__item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-gap:var(--space-3);align-items:center;background:var(--command-surface-bg);border:var(--border-width,1px) solid var(--command-surface-border);border-radius:var(--command-surface-radius);gap:var(--space-3);padding:var(--space-3)}.command-queue__status{background:var(--color-info);border-radius:999px;height:.6rem;width:.6rem}.command-queue__status--success{background:var(--color-success)}.command-queue__status--warning{background:var(--color-warning)}.command-queue__status--danger{background:var(--color-danger)}.command-queue__content{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}.command-queue__title{font-size:var(--text-sm);font-weight:600;font-weight:var(--font-weight-semibold,600)}.command-queue__meta{color:var(--command-surface-muted);display:flex;flex-wrap:wrap;font-size:var(--text-xs);gap:var(--space-2)}.command-queue__actions{align-items:center;display:flex;gap:var(--space-2)}.command-progress{background:var(--command-progress-track);border-radius:999px;height:.35rem;overflow:hidden}.command-progress__bar{background:var(--command-progress-fill);height:100%;transition:width .18s ease-out;transition:width var(--transition-normal,.18s ease-out);width:0}.command-progress--success{--command-progress-fill:var(--color-success)}.command-progress--warning{--command-progress-fill:var(--color-warning)}.command-progress--danger{--command-progress-fill:var(--color-danger)}.command-glance-grid{display:grid;grid-gap:var(--space-3);gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}.command-glance{--command-variant-rail:var(--command-accent);--command-variant-tint:var(--command-accent-soft);--command-variant-text:var(--command-surface-title);--command-variant-muted:var(--command-surface-muted);background:var(--command-surface-bg);border:var(--border-width,1px) solid var(--command-surface-border);border-radius:var(--radius-md);color:var(--command-variant-text);display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3)}.command-glance--tint{background:var(--command-variant-tint);border-color:var(--command-variant-rail)}.command-glance__value{font-size:var(--text-lg);font-weight:600;font-weight:var(--font-weight-semibold,600)}.command-glance__label{color:var(--command-variant-muted);font-size:var(--text-xxs);letter-spacing:.08em;text-transform:uppercase}.command-glance__meta{color:var(--command-variant-muted);font-size:var(--text-xs)}.command-nudge{--command-variant-rail:var(--command-accent);--command-variant-tint:var(--command-accent-soft);--command-variant-text:var(--command-surface-title);--command-variant-muted:var(--command-surface-muted);align-items:flex-start;background:var(--command-surface-bg);border:var(--border-width,1px) solid var(--command-surface-border);border-radius:var(--command-surface-radius);color:var(--command-variant-text);display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4)}.command-nudge--tint{background:var(--command-variant-tint);border-color:var(--command-variant-rail)}.command-nudge__icon{align-items:center;color:var(--command-variant-rail);display:inline-flex;flex-shrink:0;height:1.25rem;height:var(--icon-md,1.25rem);justify-content:center;width:1.25rem;width:var(--icon-md,1.25rem)}.command-nudge__body{display:flex;flex-direction:column;gap:var(--space-1)}.command-nudge__title{font-size:var(--text-sm);font-weight:600;font-weight:var(--font-weight-semibold,600)}.command-nudge__text{color:var(--command-variant-muted);font-size:var(--text-xs)}.command-nudge__actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}.command-activity{display:grid;list-style:none;margin:0;padding:0;grid-gap:var(--space-2);gap:var(--space-2)}.command-activity__item{display:grid;grid-template-columns:auto minmax(0,1fr);grid-gap:var(--space-3);align-items:start;border-bottom:var(--border-width,1px) solid var(--command-surface-border);gap:var(--space-3);padding-bottom:var(--space-2)}.command-activity__item:last-child{border-bottom:0;padding-bottom:0}.command-activity__time{color:var(--command-surface-muted);font-size:var(--text-xs);white-space:nowrap}.command-activity__title{font-size:var(--text-sm);font-weight:600;font-weight:var(--font-weight-semibold,600)}.command-activity__meta{color:var(--command-surface-muted);font-size:var(--text-xs)}.command-empty{border:var(--border-width,1px) dashed var(--command-surface-border);border-radius:var(--command-surface-radius);color:var(--command-surface-muted);padding:var(--space-6);text-align:center}.command-empty__title{color:var(--command-surface-title);font-size:var(--text-md);font-weight:600;font-weight:var(--font-weight-semibold,600)}.command-empty__body{font-size:var(--text-sm);margin-top:var(--space-1)}.command-empty__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;margin-top:var(--space-3)}@media (prefers-reduced-motion:reduce){.command,.command-action,.command-progress__bar,.command:before,.command__item,.command__panel{transition:none!important}}
|
|
@@ -21,7 +21,6 @@
|
|
|
21
21
|
/* ---------------------------------------------------------
|
|
22
22
|
1. CONTENT BLOCK TOKEN DEFINITIONS
|
|
23
23
|
--------------------------------------------------------- */
|
|
24
|
-
|
|
25
24
|
[data-vds-content-block],
|
|
26
25
|
.vds-content-block {
|
|
27
26
|
--content-block-tag-size-sm: var(--space-4);
|
|
@@ -85,7 +84,6 @@
|
|
|
85
84
|
/* ---------------------------------------------------------
|
|
86
85
|
2. GENERIC INTERACTIVE / DISABLED
|
|
87
86
|
--------------------------------------------------------- */
|
|
88
|
-
|
|
89
87
|
.interactive {
|
|
90
88
|
cursor: pointer;
|
|
91
89
|
transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal);
|
|
@@ -115,7 +113,6 @@
|
|
|
115
113
|
/* ---------------------------------------------------------
|
|
116
114
|
3. CARD
|
|
117
115
|
--------------------------------------------------------- */
|
|
118
|
-
|
|
119
116
|
.card {
|
|
120
117
|
background-color: var(--color-surface);
|
|
121
118
|
border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
|
|
@@ -217,7 +214,6 @@
|
|
|
217
214
|
/* ---------------------------------------------------------
|
|
218
215
|
4. CARD GRID
|
|
219
216
|
--------------------------------------------------------- */
|
|
220
|
-
|
|
221
217
|
.card-grid {
|
|
222
218
|
display: grid;
|
|
223
219
|
grid-template-columns: repeat(auto-fit, minmax(var(--content-block-card-min-width), 1fr));
|
|
@@ -240,7 +236,6 @@
|
|
|
240
236
|
/* ---------------------------------------------------------
|
|
241
237
|
5. MEDIA BLOCK
|
|
242
238
|
--------------------------------------------------------- */
|
|
243
|
-
|
|
244
239
|
.media {
|
|
245
240
|
display: flex;
|
|
246
241
|
align-items: center;
|
|
@@ -313,7 +308,6 @@
|
|
|
313
308
|
/* ---------------------------------------------------------
|
|
314
309
|
6. LIST GROUP
|
|
315
310
|
--------------------------------------------------------- */
|
|
316
|
-
|
|
317
311
|
.list-group {
|
|
318
312
|
display: flex;
|
|
319
313
|
flex-direction: column;
|
|
@@ -370,7 +364,6 @@
|
|
|
370
364
|
/* ---------------------------------------------------------
|
|
371
365
|
7. CALLOUTS (Semantic Variants)
|
|
372
366
|
--------------------------------------------------------- */
|
|
373
|
-
|
|
374
367
|
.callout {
|
|
375
368
|
border-radius: var(--radius-md);
|
|
376
369
|
padding: var(--content-block-component-pad-md);
|
|
@@ -446,7 +439,6 @@
|
|
|
446
439
|
/* ---------------------------------------------------------
|
|
447
440
|
8. EMPTY STATE
|
|
448
441
|
--------------------------------------------------------- */
|
|
449
|
-
|
|
450
442
|
.empty {
|
|
451
443
|
text-align: center;
|
|
452
444
|
background-color: var(--color-surface);
|
|
@@ -496,7 +488,6 @@
|
|
|
496
488
|
/* ---------------------------------------------------------
|
|
497
489
|
9. STATS BLOCK
|
|
498
490
|
--------------------------------------------------------- */
|
|
499
|
-
|
|
500
491
|
.stats {
|
|
501
492
|
display: flex;
|
|
502
493
|
flex-wrap: wrap;
|
|
@@ -533,7 +524,6 @@
|
|
|
533
524
|
/* ---------------------------------------------------------
|
|
534
525
|
10. METRIC TITLE
|
|
535
526
|
--------------------------------------------------------- */
|
|
536
|
-
|
|
537
527
|
.metric-title {
|
|
538
528
|
font-size: var(--text-xs);
|
|
539
529
|
letter-spacing: 0.04em;
|
|
@@ -545,7 +535,6 @@
|
|
|
545
535
|
/* ---------------------------------------------------------
|
|
546
536
|
11. TAGS / CHIPS / BADGES + INTERACTIVE
|
|
547
537
|
--------------------------------------------------------- */
|
|
548
|
-
|
|
549
538
|
.tag,
|
|
550
539
|
.chip,
|
|
551
540
|
.badge {
|
|
@@ -647,7 +636,6 @@
|
|
|
647
636
|
/* ---------------------------------------------------------
|
|
648
637
|
11b. CHIP GROUPS (LABEL + ACTIONS)
|
|
649
638
|
--------------------------------------------------------- */
|
|
650
|
-
|
|
651
639
|
.chip-group {
|
|
652
640
|
display: inline-flex;
|
|
653
641
|
align-items: center;
|
|
@@ -756,7 +744,6 @@
|
|
|
756
744
|
/* ---------------------------------------------------------
|
|
757
745
|
12. AVATAR + STATUS
|
|
758
746
|
--------------------------------------------------------- */
|
|
759
|
-
|
|
760
747
|
.avatar {
|
|
761
748
|
position: relative;
|
|
762
749
|
width: var(--avatar-size-md);
|
|
@@ -794,7 +781,6 @@
|
|
|
794
781
|
/* ---------------------------------------------------------
|
|
795
782
|
13. FEATURE BLOCK
|
|
796
783
|
--------------------------------------------------------- */
|
|
797
|
-
|
|
798
784
|
.feature {
|
|
799
785
|
display: flex;
|
|
800
786
|
flex-direction: column;
|
|
@@ -846,7 +832,6 @@
|
|
|
846
832
|
/* ---------------------------------------------------------
|
|
847
833
|
14. PROCESS BLOCK
|
|
848
834
|
--------------------------------------------------------- */
|
|
849
|
-
|
|
850
835
|
.process {
|
|
851
836
|
display: grid;
|
|
852
837
|
grid-template-columns: repeat(auto-fit, minmax(var(--content-block-process-step-min-width), 1fr));
|
|
@@ -892,7 +877,6 @@
|
|
|
892
877
|
/* ---------------------------------------------------------
|
|
893
878
|
15. HIGHLIGHT BLOCK
|
|
894
879
|
--------------------------------------------------------- */
|
|
895
|
-
|
|
896
880
|
.highlight {
|
|
897
881
|
background-color: var(--color-surface-subtle);
|
|
898
882
|
border-left: var(--content-block-highlight-border-width) solid var(--color-accent);
|
|
@@ -927,7 +911,6 @@
|
|
|
927
911
|
/* ---------------------------------------------------------
|
|
928
912
|
16. FACT BLOCK
|
|
929
913
|
--------------------------------------------------------- */
|
|
930
|
-
|
|
931
914
|
.fact {
|
|
932
915
|
text-align: center;
|
|
933
916
|
background-color: var(--color-surface);
|
|
@@ -973,7 +956,6 @@
|
|
|
973
956
|
/* ---------------------------------------------------------
|
|
974
957
|
17. CONTENT BLOCK (NEW STRUCTURAL BLOCK)
|
|
975
958
|
--------------------------------------------------------- */
|
|
976
|
-
|
|
977
959
|
.content-block {
|
|
978
960
|
--content-block-pad: 0;
|
|
979
961
|
--content-block-title-size: var(--content-block-title-size-base);
|
|
@@ -1026,7 +1008,6 @@
|
|
|
1026
1008
|
/* ---------------------------------------------------------
|
|
1027
1009
|
17.1 CONTENT BLOCK - VARIANTS
|
|
1028
1010
|
--------------------------------------------------------- */
|
|
1029
|
-
|
|
1030
1011
|
.content-block[data-variant="info"] {
|
|
1031
1012
|
--content-block-variant-rail: var(--semantic-info-border, var(--color-info));
|
|
1032
1013
|
--content-block-variant-tint: var(--semantic-info-bg, var(--color-info-soft));
|
|
@@ -1154,7 +1135,6 @@
|
|
|
1154
1135
|
/* ---------------------------------------------------------
|
|
1155
1136
|
17.2 CONTENT BLOCK - REGIONS
|
|
1156
1137
|
--------------------------------------------------------- */
|
|
1157
|
-
|
|
1158
1138
|
.content-block__header {
|
|
1159
1139
|
display: flex;
|
|
1160
1140
|
flex-direction: column;
|
|
@@ -1243,7 +1223,6 @@
|
|
|
1243
1223
|
/* ---------------------------------------------------------
|
|
1244
1224
|
17.3 CONTENT BLOCK - LISTS, GRIDS, KPIS
|
|
1245
1225
|
--------------------------------------------------------- */
|
|
1246
|
-
|
|
1247
1226
|
.content-block__grid {
|
|
1248
1227
|
display: grid;
|
|
1249
1228
|
grid-template-columns: repeat(auto-fit, minmax(var(--content-block-grid-min), 1fr));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.vds-content-block,[data-vds-content-block]{--content-block-tag-size-sm:var(--space-4);--content-block-tag-size-md:var(--space-5);--content-block-tag-size-lg:var(--space-6);--content-block-component-disabled--opacity:0.3;--content-block-component-pad-sm:var(--space-3);--content-block-component-pad-md:var(--space-6);--content-block-component-pad-lg:var(--space-8);--content-block-component-border-sm:var(--border-width);--content-block-card-min-width:16.25rem;--content-block-card-gap:var(--space-4);--content-block-card-pad:var(--space-8);--content-block-card-pad-mobile:var(--space-6);--content-block-fact-pad:var(--space-10);--content-block-process-gap:var(--space-10);--content-block-process-step-min-width:15rem;--content-block-media-gap:var(--space-6);--content-block-empty-pad-vertical:var(--space-14);--content-block-empty-pad-horizontal:var(--space-6);--content-block-empty-gap:var(--space-4);--content-block-highlight-border-width:var(--border-width-strong);--content-block-highlight-pad:var(--space-6);--content-block-rail-width:var(--border-width-strong);--content-block-hero-pad:var(--space-12);--content-block-hero-title-size:var(--text-xl);--content-block-hero-subtitle-size:var(--text-md);--content-block-split-gap:var(--space-10);--content-block-split-main:minmax(0,1.2fr);--content-block-split-aside:minmax(0,0.8fr);--content-block-grid-min:14rem;--content-block-grid-gap:var(--space-6);--content-block-list-gap:var(--space-3);--content-block-row-gap:var(--space-3);--content-block-row-pad:var(--space-3);--content-block-title-size-base:var(--text-lg);--content-block-subtitle-size-base:var(--text-sm);--content-block-meta-size:var(--text-xs);--content-block-eyebrow-size:var(--text-xxs);--content-block-kpi-gap:var(--space-4);--content-block-kpi-value-size:var(--text-lg);--content-block-kpi-label-size:var(--text-xs)}.interactive{cursor:pointer;transition:background-color var(--transition-normal),border-color var(--transition-normal),box-shadow var(--transition-normal),color var(--transition-normal)}.interactive:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-strong)}.interactive:active{background-color:var(--color-surface-subtle)}.interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.is-disabled{cursor:not-allowed;opacity:.5;opacity:var(--content-block-component-disabled--opacity,.5);pointer-events:none}.card{background-color:var(--color-surface);border:var(--content-block-component-border-sm) solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:var(--content-block-card-gap);padding:var(--content-block-card-pad);transition:background-color var(--transition-normal),border-color var(--transition-normal),box-shadow var(--transition-normal)}.card--soft{background-color:var(--color-surface-subtle)}.card--muted{background-color:var(--color-muted-bg)}.card--tone-accent{background-color:var(--color-accent-soft)}@media (max-width:640px){.card{padding:var(--content-block-card-pad-mobile)}}.card--flat{box-shadow:none}.card--raised{box-shadow:var(--shadow-2)}.card--interactive{cursor:pointer}.card--interactive:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-strong);box-shadow:var(--shadow-2)}.card--interactive:active{background-color:var(--color-surface-subtle)}.card--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.card--selected{border-color:var(--color-accent);box-shadow:var(--shadow-2)}.card--disabled{cursor:not-allowed;opacity:.5;opacity:var(--content-block-component-disabled--opacity,.5);pointer-events:none}.card__body,.card__header{width:100%}.card__footer{display:flex;gap:var(--component-gap-md);justify-content:flex-end;margin-top:var(--component-gap-lg)}.card__body-stack,.card__header-stack,.card__section-stack{display:flex;flex-direction:column;gap:var(--component-gap-md)}.card__body-inline,.card__footer-inline,.card__section-inline{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--component-gap-md)}.card-grid{grid-gap:var(--component-gap-lg);display:grid;gap:var(--component-gap-lg);grid-template-columns:repeat(auto-fit,minmax(var(--content-block-card-min-width),1fr))}.card-grid--compact{gap:var(--component-gap-md)}.card-grid--tight{gap:var(--component-gap-xs)}.card-grid--wide{gap:var(--component-gap-xl)}.media{align-items:center;display:flex;gap:var(--content-block-media-gap)}.media--stack{align-items:flex-start;flex-direction:column}.media--horizontal{align-items:center;flex-direction:row}.media--interactive{cursor:pointer;transition:background-color var(--transition-normal)}.media--interactive:hover{background-color:var(--color-surface-hover)}@media (max-width:768px){.media{align-items:flex-start;flex-direction:column}}.media__icon,.media__img{align-items:center;display:flex;flex-shrink:0;height:var(--icon-container-lg);justify-content:center;width:var(--icon-container-lg)}.media__icon svg,.media__img img{border-radius:var(--radius-sm);height:100%;-o-object-fit:contain;object-fit:contain;width:100%}.media__icon .icon{display:block;height:100%;width:100%}.media__body{display:flex;flex-direction:column;gap:var(--component-gap-xs)}.media__meta{color:var(--color-text-muted);font-size:var(--text-xs)}.list-group{display:flex;flex-direction:column;gap:var(--component-gap-xs)}.list-group__item{border-bottom:var(--content-block-component-border-sm) solid var(--color-border-subtle);display:flex;gap:var(--component-gap-md);padding:var(--component-gap-md) 0}.list-group--borderless .list-group__item,.list-group__item:last-child{border-bottom:none}.list-group--tight .list-group__item{padding:var(--component-gap-xs) 0}.list-group__item--interactive{cursor:pointer;transition:background-color var(--transition-normal)}.list-group__item--interactive:hover{background-color:var(--color-surface-hover)}.list-group__item--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.list-group__item--selected{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-left-color:var(--accent-soft-border,var(--color-accent));box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px var(--accent-soft-shadow,transparent);color:var(--accent-soft-on,var(--color-on-accent))}.list-group__item--disabled{cursor:not-allowed;opacity:var(--content-block-component-disabled--opacity);pointer-events:none}.callout{background-color:var(--color-muted-bg);border:var(--content-block-component-border-sm) solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--content-block-component-pad-md)}.callout--compact{padding:var(--content-block-component-pad-sm)}.callout--outline{background-color:var(--color-surface);border-color:var(--color-border-strong)}.callout--minimal{background-color:transparent;border-color:transparent}.callout__title{font-size:var(--text-sm);font-weight:600}.callout__body{margin-top:var(--component-gap-xs)}.callout__icon{margin-bottom:var(--component-gap-xs)}.callout--interactive{cursor:pointer;transition:background-color var(--transition-normal),border-color var(--transition-normal)}.callout--interactive:hover{background:color-mix(in srgb,currentColor 10%,transparent)}.callout--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.semantic-info{background-color:var(--semantic-info-bg);border-color:var(--semantic-info-border);color:var(--semantic-info-text)}.semantic-success{background-color:var(--semantic-success-bg);border-color:var(--semantic-success-border);color:var(--semantic-success-text)}.semantic-warning{background-color:var(--semantic-warning-bg);border-color:var(--semantic-warning-border);color:var(--semantic-warning-text)}.semantic-danger{background-color:var(--semantic-danger-bg);border-color:var(--semantic-danger-border);color:var(--semantic-danger-text)}.empty{background-color:var(--color-surface);border:var(--content-block-component-border-sm) solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--content-block-empty-pad-vertical) var(--content-block-empty-pad-horizontal);text-align:center}.empty--compact{padding:var(--content-block-component-pad-md)}.empty--inline{align-items:center;display:inline-flex;text-align:left}.empty__icon{stroke:var(--color-text-muted);align-items:center;display:flex;height:var(--space-16);justify-content:center;margin:0 auto var(--content-block-empty-gap);width:var(--space-16)}.empty--inline .empty__icon{margin:0 var(--component-gap-md) 0 0}.empty__icon .icon{display:block;height:100%;width:100%}.empty__actions{display:flex;gap:var(--component-gap-md);justify-content:center;margin-top:var(--component-gap-lg)}.stats{display:flex;flex-wrap:wrap;gap:var(--component-gap-xl)}@media (max-width:768px){.stats{gap:var(--component-gap-lg)}}.stats__item{display:flex;flex-direction:column;gap:var(--component-gap-xs)}.stats--center .stats__item{align-items:center}.stats__value{color:var(--color-text);font-size:var(--text-lg);font-weight:600}.metric-title,.stats__label{color:var(--color-text-muted);font-size:var(--text-xs)}.metric-title{font-weight:600;letter-spacing:.04em;text-transform:uppercase}.badge,.chip,.tag{align-items:center;background-color:var(--color-surface);border:var(--content-block-component-border-sm) solid var(--color-border-subtle);border-radius:9999px;color:var(--color-text);display:inline-flex;font-size:var(--text-xs);gap:var(--component-gap-xs);height:var(--content-block-tag-size-md);padding:var(--component-gap-sm) var(--component-gap-md)}.badge--sm,.chip--sm,.tag--sm{height:var(--content-block-tag-size-sm)}.badge--lg,.chip--lg,.tag--lg{height:var(--content-block-tag-size-lg)}.badge--soft,.chip--soft,.tag--soft{background-color:var(--color-surface-subtle)}.badge--outline,.chip--outline,.tag--outline{background-color:transparent;border-color:var(--color-border-strong)}.badge--interactive,.chip--interactive,.tag--interactive{cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}.badge--interactive:hover,.chip--interactive:hover,.tag--interactive:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-strong)}.badge--interactive:focus-visible,.chip--interactive:focus-visible,.tag--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.badge--disabled,.chip--disabled,.tag--disabled{cursor:not-allowed;opacity:.5;opacity:var(--content-block-component-disabled--opacity,.5);pointer-events:none}.badge.semantic-info,.chip.semantic-info,.tag.semantic-info{background-color:var(--semantic-info-bg);color:var(--semantic-info-text)}.badge.semantic-warning,.chip.semantic-warning,.tag.semantic-warning{background-color:var(--semantic-warning-bg);color:var(--semantic-warning-text)}.badge.semantic-success,.chip.semantic-success,.tag.semantic-success{background-color:var(--semantic-success-bg);color:var(--semantic-success-text)}.badge.semantic-danger,.chip.semantic-danger,.tag.semantic-danger{background-color:var(--semantic-danger-bg);color:var(--semantic-danger-text)}.chip-group{align-items:center;background-color:var(--color-surface);border:var(--content-block-component-border-sm) solid var(--color-border-subtle);border-radius:9999px;color:var(--color-text);display:inline-flex;font-size:var(--text-xs);gap:var(--component-gap-xs);height:var(--content-block-tag-size-md);padding:var(--component-gap-sm) var(--component-gap-md)}.chip-group--sm{height:var(--content-block-tag-size-sm)}.chip-group--lg{height:var(--content-block-tag-size-lg)}.chip-group--soft{background-color:var(--color-surface-subtle)}.chip-group--outline{background-color:transparent;border-color:var(--color-border-strong)}.chip-group--interactive{cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}.chip-group--interactive:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-strong)}.chip-group--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.chip-group--disabled{cursor:not-allowed;opacity:.5;opacity:var(--content-block-component-disabled--opacity,.5);pointer-events:none}.chip-group.semantic-info{background-color:var(--semantic-info-bg);color:var(--semantic-info-text)}.chip-group.semantic-warning{background-color:var(--semantic-warning-bg);color:var(--semantic-warning-text)}.chip-group.semantic-success{background-color:var(--semantic-success-bg);color:var(--semantic-success-text)}.chip-group.semantic-danger{background-color:var(--semantic-danger-bg);color:var(--semantic-danger-text)}.chip-group__action,.chip-group__label{align-items:center;background:transparent;border:0;color:inherit;display:inline-flex;font:inherit;gap:var(--component-gap-xs);line-height:1;padding:0}.chip-group__label{cursor:default}.chip-group__action{border-left:var(--content-block-component-border-sm) solid var(--color-border-subtle);cursor:pointer;padding:0 var(--space-2)}.chip-group__action:hover{background-color:var(--color-surface-hover)}.chip-group__action:focus-visible,.chip-group__label:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.avatar{align-items:center;background-color:var(--color-muted-bg);border-radius:50%;display:inline-flex;height:var(--avatar-size-md);justify-content:center;overflow:hidden;position:relative;width:var(--avatar-size-md)}.avatar--sm{height:var(--avatar-size-sm);width:var(--avatar-size-sm)}.avatar--lg{height:var(--avatar-size-lg);width:var(--avatar-size-lg)}.avatar--status:after{background-color:var(--color-success);border:var(--border-width) solid var(--color-surface);border-radius:50%;bottom:0;content:"";height:var(--avatar-status-size);position:absolute;right:0;width:var(--avatar-status-size)}.feature{display:flex;flex-direction:column;gap:var(--component-gap-xs)}.feature--horizontal{align-items:center;flex-direction:row}.feature__icon{align-items:center;display:flex;flex-shrink:0;height:var(--icon-container-lg);justify-content:center;width:var(--icon-container-lg)}.feature__icon .icon{display:block;height:100%;width:100%}.feature--interactive{cursor:pointer;transition:background-color var(--transition-normal)}.feature--interactive:hover{background-color:var(--color-surface-hover)}.feature--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}@media (max-width:640px){.feature--horizontal{align-items:flex-start;flex-direction:column}}.process{grid-gap:var(--content-block-process-gap);display:grid;gap:var(--content-block-process-gap);grid-template-columns:repeat(auto-fit,minmax(var(--content-block-process-step-min-width),1fr))}@media (max-width:768px){.process{gap:var(--component-gap-lg)}}.process__step{background-color:var(--color-surface);border:var(--content-block-component-border-sm) solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);display:flex;flex-direction:column;gap:var(--component-gap-md);padding:var(--content-block-component-pad-md)}.process__step--active{background-color:var(--accent-soft-surface);border-color:var(--accent-soft-border);color:var(--accent-soft-on)}.process__step--complete{background-color:var(--success-soft-surface);border-color:var(--success-soft-border);color:var(--success-soft-on)}.process__step--disabled{cursor:not-allowed;opacity:var(--content-block-component-disabled--opacity);pointer-events:none}.highlight{background-color:var(--color-surface-subtle);border-left:var(--content-block-highlight-border-width) solid var(--color-accent);border-radius:var(--radius-sm);padding:var(--content-block-highlight-pad)}.highlight--compact{padding:var(--content-block-component-pad-sm)}.highlight--info{background-color:var(--semantic-info-bg);border-color:var(--semantic-info-border)}.highlight--success{background-color:var(--semantic-success-bg);border-color:var(--semantic-success-border)}.highlight--warning{background-color:var(--semantic-warning-bg);border-color:var(--semantic-warning-border)}.highlight--danger{background-color:var(--semantic-danger-bg);border-color:var(--semantic-danger-border)}.fact{background-color:var(--color-surface);border:var(--content-block-component-border-sm) solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--content-block-fact-pad);text-align:center}.fact--horizontal{align-items:center;display:flex;gap:var(--component-gap-lg);justify-content:center;text-align:left}.fact--compact{padding:var(--content-block-component-pad-md)}.fact--interactive{cursor:pointer;transition:background-color var(--transition-normal),border-color var(--transition-normal)}.fact--interactive:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-strong)}.fact--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.fact--disabled{cursor:not-allowed;opacity:.5;opacity:var(--content-block-component-disabled--opacity,.5);pointer-events:none}.content-block{--content-block-pad:0;--content-block-title-size:var(--content-block-title-size-base);--content-block-subtitle-size:var(--content-block-subtitle-size-base);--content-block-variant-rail:var(--color-border-strong);--content-block-variant-tint:var(--color-surface-subtle);--content-block-variant-text:var(--color-text);--content-block-variant-muted:var(--color-text-muted);--content-block-variant-border:var(--color-border-subtle);color:var(--content-block-variant-text);display:flex;flex-direction:column;gap:var(--component-gap-md);width:100%}.content-block--surface{--content-block-pad:var(--content-block-component-pad-lg);background-color:var(--color-surface);border:var(--content-block-component-border-sm) solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-1);padding:var(--content-block-pad)}.content-block--inset{--content-block-pad:var(--content-block-component-pad-md);background-color:var(--color-surface-subtle);border-radius:var(--radius-md);padding:var(--content-block-pad)}.content-block--compact{gap:var(--component-gap-xs)}.content-block--surface.content-block--compact{--content-block-pad:var(--content-block-component-pad-md)}.content-block--inset.content-block--compact{--content-block-pad:var(--content-block-component-pad-sm)}.content-block--bordered{border:var(--content-block-component-border-sm) solid var(--color-border-strong)}.content-block[data-variant=info]{--content-block-variant-rail:var(--semantic-info-border,var(--color-info));--content-block-variant-tint:var(--semantic-info-bg,var(--color-info-soft));--content-block-variant-text:var(--semantic-info-text,var(--color-text));--content-block-variant-muted:var(--semantic-info-text,var(--color-text-muted));--content-block-variant-border:var(--semantic-info-border,var(--color-border-subtle))}.content-block[data-variant=success]{--content-block-variant-rail:var(--semantic-success-border,var(--color-success));--content-block-variant-tint:var(--semantic-success-bg,var(--color-success-soft));--content-block-variant-text:var(--semantic-success-text,var(--color-text));--content-block-variant-muted:var(--semantic-success-text,var(--color-text-muted));--content-block-variant-border:var(--semantic-success-border,var(--color-border-subtle))}.content-block[data-variant=warning]{--content-block-variant-rail:var(--semantic-warning-border,var(--color-warning));--content-block-variant-tint:var(--semantic-warning-bg,var(--color-warning-soft));--content-block-variant-text:var(--semantic-warning-text,var(--color-text));--content-block-variant-muted:var(--semantic-warning-text,var(--color-text-muted));--content-block-variant-border:var(--semantic-warning-border,var(--color-border-subtle))}.content-block[data-variant=danger]{--content-block-variant-rail:var(--semantic-danger-border,var(--color-danger));--content-block-variant-tint:var(--semantic-danger-bg,var(--color-danger-soft));--content-block-variant-text:var(--semantic-danger-text,var(--color-text));--content-block-variant-muted:var(--semantic-danger-text,var(--color-text-muted));--content-block-variant-border:var(--semantic-danger-border,var(--color-border-subtle))}.content-block[data-variant=accent]{--content-block-variant-rail:var(--accent-soft-border,var(--color-accent));--content-block-variant-tint:var(--accent-soft-surface,var(--color-accent-soft));--content-block-variant-text:var(--accent-soft-on,var(--color-on-accent));--content-block-variant-muted:var(--accent-soft-on,var(--color-on-accent));--content-block-variant-border:var(--accent-soft-border,var(--color-border-subtle))}.content-block[data-variant=neutral]{--content-block-variant-rail:var(--color-border-strong);--content-block-variant-tint:var(--color-surface-subtle);--content-block-variant-text:var(--color-text);--content-block-variant-muted:var(--color-text-muted);--content-block-variant-border:var(--color-border-subtle)}.content-block--tint{background-color:var(--content-block-variant-tint);border-color:var(--content-block-variant-rail)}.content-block--outline{border:var(--content-block-component-border-sm) solid var(--content-block-variant-rail)}.content-block--rail{border-left:var(--content-block-rail-width) solid var(--content-block-variant-rail)}.content-block--hero{--content-block-title-size:var(--content-block-hero-title-size);--content-block-subtitle-size:var(--content-block-hero-subtitle-size);--content-block-pad:var(--content-block-hero-pad);gap:var(--component-gap-lg)}.content-block--center{align-items:center;text-align:center}.content-block--center .content-block__actions,.content-block--center .content-block__footer,.content-block--center .content-block__meta{justify-content:center}.content-block--elevated{box-shadow:var(--shadow-2)}.content-block--flat{box-shadow:none}.content-block--split{grid-gap:var(--content-block-split-gap);align-items:start;display:grid;gap:var(--content-block-split-gap);grid-template-areas:"main aside";grid-template-columns:var(--content-block-split-main) var(--content-block-split-aside)}.content-block--split-reverse{grid-template-areas:"aside main"}.content-block__main{grid-area:main}.content-block__aside,.content-block__main{display:flex;flex-direction:column;gap:var(--component-gap-md)}.content-block__aside{grid-area:aside}@media (max-width:900px){.content-block--split,.content-block--split-reverse{grid-template-areas:"main" "aside";grid-template-columns:minmax(0,1fr)}}.content-block__header{display:flex;flex-direction:column;gap:var(--component-gap-xs)}.content-block__header--inline{align-items:center;flex-direction:row;gap:var(--component-gap-md);justify-content:space-between}.content-block__eyebrow{color:var(--content-block-variant-muted);font-size:var(--content-block-eyebrow-size);letter-spacing:.08em;text-transform:uppercase}.content-block__title{font-size:var(--content-block-title-size);font-weight:600}.content-block__subtitle{color:var(--content-block-variant-muted);font-size:var(--content-block-subtitle-size)}.content-block__meta{color:var(--content-block-variant-muted);font-size:var(--content-block-meta-size)}.content-block__actions,.content-block__meta{display:flex;flex-wrap:wrap;gap:var(--component-gap-sm)}.content-block__actions{align-items:center}.content-block__body{display:flex;flex-direction:column;gap:var(--component-gap-md)}.content-block__media{align-items:center;display:flex;justify-content:center;width:100%}.content-block__media img,.content-block__media picture,.content-block__media svg{border-radius:var(--radius-sm);height:auto;max-width:100%}.content-block__media--bleed{border-radius:var(--radius-md);margin:calc(var(--content-block-pad)*-1);overflow:hidden}.content-block__media--bleed img,.content-block__media--bleed picture,.content-block__media--bleed svg{border-radius:0}.content-block__footer{display:flex;gap:var(--component-gap-md);justify-content:flex-end;margin-top:var(--component-gap-lg)}.content-block__grid{grid-gap:var(--content-block-grid-gap);display:grid;gap:var(--content-block-grid-gap);grid-template-columns:repeat(auto-fit,minmax(var(--content-block-grid-min),1fr))}.content-block__grid--tight{gap:var(--component-gap-sm)}.content-block__grid--loose{gap:var(--component-gap-xl)}.content-block__list{display:flex;flex-direction:column;gap:var(--content-block-list-gap)}.content-block__list-item{align-items:center;border-bottom:var(--content-block-component-border-sm) solid var(--content-block-variant-border);display:flex;gap:var(--component-gap-md);justify-content:space-between;padding:var(--content-block-row-pad) 0}.content-block__list-item:last-child{border-bottom:none;padding-bottom:0}.content-block__rows{display:flex;flex-direction:column;gap:var(--content-block-row-gap)}.content-block__row{align-items:center;border-bottom:var(--content-block-component-border-sm) solid var(--content-block-variant-border);display:flex;gap:var(--component-gap-md);justify-content:space-between;padding:var(--content-block-row-pad) 0}.content-block__row:last-child{border-bottom:none;padding-bottom:0}.content-block__kv{grid-gap:var(--component-gap-sm) var(--component-gap-lg);display:grid;gap:var(--component-gap-sm) var(--component-gap-lg);grid-template-columns:minmax(0,1fr) minmax(0,2fr)}.content-block__kv-label{color:var(--content-block-variant-muted);font-size:var(--text-xs);letter-spacing:.04em;text-transform:uppercase}.content-block__kv-value{color:var(--content-block-variant-text);font-size:var(--text-sm)}.content-block__kpis{grid-gap:var(--content-block-kpi-gap);display:grid;gap:var(--content-block-kpi-gap);grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}.content-block__kpi{display:flex;flex-direction:column;gap:var(--component-gap-xs)}.content-block__kpi-value{font-size:var(--content-block-kpi-value-size);font-weight:600}.content-block__kpi-label{color:var(--content-block-variant-muted);font-size:var(--content-block-kpi-label-size)}@media (max-width:720px){.content-block__kv{grid-template-columns:minmax(0,1fr)}}.content-block--interactive{cursor:pointer;transition:background-color var(--transition-normal),border-color var(--transition-normal),box-shadow var(--transition-normal)}.content-block--interactive:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-strong);box-shadow:var(--shadow-2)}.content-block--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.content-block--disabled{cursor:not-allowed;opacity:.5;opacity:var(--content-block-component-disabled--opacity,.5);pointer-events:none}
|
|
1
|
+
.vds-content-block,[data-vds-content-block]{--content-block-tag-size-sm:var(--space-4);--content-block-tag-size-md:var(--space-5);--content-block-tag-size-lg:var(--space-6);--content-block-component-disabled--opacity:0.3;--content-block-component-pad-sm:var(--space-3);--content-block-component-pad-md:var(--space-6);--content-block-component-pad-lg:var(--space-8);--content-block-component-border-sm:var(--border-width);--content-block-card-min-width:16.25rem;--content-block-card-gap:var(--space-4);--content-block-card-pad:var(--space-8);--content-block-card-pad-mobile:var(--space-6);--content-block-fact-pad:var(--space-10);--content-block-process-gap:var(--space-10);--content-block-process-step-min-width:15rem;--content-block-media-gap:var(--space-6);--content-block-empty-pad-vertical:var(--space-14);--content-block-empty-pad-horizontal:var(--space-6);--content-block-empty-gap:var(--space-4);--content-block-highlight-border-width:var(--border-width-strong);--content-block-highlight-pad:var(--space-6);--content-block-rail-width:var(--border-width-strong);--content-block-hero-pad:var(--space-12);--content-block-hero-title-size:var(--text-xl);--content-block-hero-subtitle-size:var(--text-md);--content-block-split-gap:var(--space-10);--content-block-split-main:minmax(0,1.2fr);--content-block-split-aside:minmax(0,0.8fr);--content-block-grid-min:14rem;--content-block-grid-gap:var(--space-6);--content-block-list-gap:var(--space-3);--content-block-row-gap:var(--space-3);--content-block-row-pad:var(--space-3);--content-block-title-size-base:var(--text-lg);--content-block-subtitle-size-base:var(--text-sm);--content-block-meta-size:var(--text-xs);--content-block-eyebrow-size:var(--text-xxs);--content-block-kpi-gap:var(--space-4);--content-block-kpi-value-size:var(--text-lg);--content-block-kpi-label-size:var(--text-xs)}.interactive{cursor:pointer;transition:background-color var(--transition-normal),border-color var(--transition-normal),box-shadow var(--transition-normal),color var(--transition-normal)}.interactive:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-strong)}.interactive:active{background-color:var(--color-surface-subtle)}.interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.is-disabled{cursor:not-allowed;opacity:.5;opacity:var(--content-block-component-disabled--opacity,.5);pointer-events:none}.card{background-color:var(--color-surface);border:var(--content-block-component-border-sm) solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:var(--content-block-card-gap);padding:var(--content-block-card-pad);transition:background-color var(--transition-normal),border-color var(--transition-normal),box-shadow var(--transition-normal)}.card--soft{background-color:var(--color-surface-subtle)}.card--muted{background-color:var(--color-muted-bg)}.card--tone-accent{background-color:var(--color-accent-soft)}@media (max-width:640px){.card{padding:var(--content-block-card-pad-mobile)}}.card--flat{box-shadow:none}.card--raised{box-shadow:var(--shadow-2)}.card--interactive{cursor:pointer}.card--interactive:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-strong);box-shadow:var(--shadow-2)}.card--interactive:active{background-color:var(--color-surface-subtle)}.card--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.card--selected{border-color:var(--color-accent);box-shadow:var(--shadow-2)}.card--disabled{cursor:not-allowed;opacity:.5;opacity:var(--content-block-component-disabled--opacity,.5);pointer-events:none}.card__body,.card__header{width:100%}.card__footer{display:flex;gap:var(--component-gap-md);justify-content:flex-end;margin-top:var(--component-gap-lg)}.card__body-stack,.card__header-stack,.card__section-stack{display:flex;flex-direction:column;gap:var(--component-gap-md)}.card__body-inline,.card__footer-inline,.card__section-inline{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--component-gap-md)}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--content-block-card-min-width),1fr));grid-gap:var(--component-gap-lg);gap:var(--component-gap-lg)}.card-grid--compact{gap:var(--component-gap-md)}.card-grid--tight{gap:var(--component-gap-xs)}.card-grid--wide{gap:var(--component-gap-xl)}.media{align-items:center;display:flex;gap:var(--content-block-media-gap)}.media--stack{align-items:flex-start;flex-direction:column}.media--horizontal{align-items:center;flex-direction:row}.media--interactive{cursor:pointer;transition:background-color var(--transition-normal)}.media--interactive:hover{background-color:var(--color-surface-hover)}@media (max-width:768px){.media{align-items:flex-start;flex-direction:column}}.media__icon,.media__img{align-items:center;display:flex;flex-shrink:0;height:var(--icon-container-lg);justify-content:center;width:var(--icon-container-lg)}.media__icon svg,.media__img img{border-radius:var(--radius-sm);height:100%;-o-object-fit:contain;object-fit:contain;width:100%}.media__icon .icon{display:block;height:100%;width:100%}.media__body{display:flex;flex-direction:column;gap:var(--component-gap-xs)}.media__meta{color:var(--color-text-muted);font-size:var(--text-xs)}.list-group{display:flex;flex-direction:column;gap:var(--component-gap-xs)}.list-group__item{border-bottom:var(--content-block-component-border-sm) solid var(--color-border-subtle);display:flex;gap:var(--component-gap-md);padding:var(--component-gap-md) 0}.list-group--borderless .list-group__item,.list-group__item:last-child{border-bottom:none}.list-group--tight .list-group__item{padding:var(--component-gap-xs) 0}.list-group__item--interactive{cursor:pointer;transition:background-color var(--transition-normal)}.list-group__item--interactive:hover{background-color:var(--color-surface-hover)}.list-group__item--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.list-group__item--selected{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-left-color:var(--accent-soft-border,var(--color-accent));box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px var(--accent-soft-shadow,transparent);color:var(--accent-soft-on,var(--color-on-accent))}.list-group__item--disabled{cursor:not-allowed;opacity:var(--content-block-component-disabled--opacity);pointer-events:none}.callout{background-color:var(--color-muted-bg);border:var(--content-block-component-border-sm) solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--content-block-component-pad-md)}.callout--compact{padding:var(--content-block-component-pad-sm)}.callout--outline{background-color:var(--color-surface);border-color:var(--color-border-strong)}.callout--minimal{background-color:transparent;border-color:transparent}.callout__title{font-size:var(--text-sm);font-weight:600}.callout__body{margin-top:var(--component-gap-xs)}.callout__icon{margin-bottom:var(--component-gap-xs)}.callout--interactive{cursor:pointer;transition:background-color var(--transition-normal),border-color var(--transition-normal)}.callout--interactive:hover{background:color-mix(in srgb,currentColor 10%,transparent)}.callout--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.semantic-info{background-color:var(--semantic-info-bg);border-color:var(--semantic-info-border);color:var(--semantic-info-text)}.semantic-success{background-color:var(--semantic-success-bg);border-color:var(--semantic-success-border);color:var(--semantic-success-text)}.semantic-warning{background-color:var(--semantic-warning-bg);border-color:var(--semantic-warning-border);color:var(--semantic-warning-text)}.semantic-danger{background-color:var(--semantic-danger-bg);border-color:var(--semantic-danger-border);color:var(--semantic-danger-text)}.empty{background-color:var(--color-surface);border:var(--content-block-component-border-sm) solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--content-block-empty-pad-vertical) var(--content-block-empty-pad-horizontal);text-align:center}.empty--compact{padding:var(--content-block-component-pad-md)}.empty--inline{align-items:center;display:inline-flex;text-align:left}.empty__icon{align-items:center;display:flex;height:var(--space-16);justify-content:center;margin:0 auto var(--content-block-empty-gap);stroke:var(--color-text-muted);width:var(--space-16)}.empty--inline .empty__icon{margin:0 var(--component-gap-md) 0 0}.empty__icon .icon{display:block;height:100%;width:100%}.empty__actions{display:flex;gap:var(--component-gap-md);justify-content:center;margin-top:var(--component-gap-lg)}.stats{display:flex;flex-wrap:wrap;gap:var(--component-gap-xl)}@media (max-width:768px){.stats{gap:var(--component-gap-lg)}}.stats__item{display:flex;flex-direction:column;gap:var(--component-gap-xs)}.stats--center .stats__item{align-items:center}.stats__value{color:var(--color-text);font-size:var(--text-lg);font-weight:600}.metric-title,.stats__label{color:var(--color-text-muted);font-size:var(--text-xs)}.metric-title{font-weight:600;letter-spacing:.04em;text-transform:uppercase}.badge,.chip,.tag{align-items:center;background-color:var(--color-surface);border:var(--content-block-component-border-sm) solid var(--color-border-subtle);border-radius:9999px;color:var(--color-text);display:inline-flex;font-size:var(--text-xs);gap:var(--component-gap-xs);height:var(--content-block-tag-size-md);padding:var(--component-gap-sm) var(--component-gap-md)}.badge--sm,.chip--sm,.tag--sm{height:var(--content-block-tag-size-sm)}.badge--lg,.chip--lg,.tag--lg{height:var(--content-block-tag-size-lg)}.badge--soft,.chip--soft,.tag--soft{background-color:var(--color-surface-subtle)}.badge--outline,.chip--outline,.tag--outline{background-color:transparent;border-color:var(--color-border-strong)}.badge--interactive,.chip--interactive,.tag--interactive{cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}.badge--interactive:hover,.chip--interactive:hover,.tag--interactive:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-strong)}.badge--interactive:focus-visible,.chip--interactive:focus-visible,.tag--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.badge--disabled,.chip--disabled,.tag--disabled{cursor:not-allowed;opacity:.5;opacity:var(--content-block-component-disabled--opacity,.5);pointer-events:none}.badge.semantic-info,.chip.semantic-info,.tag.semantic-info{background-color:var(--semantic-info-bg);color:var(--semantic-info-text)}.badge.semantic-warning,.chip.semantic-warning,.tag.semantic-warning{background-color:var(--semantic-warning-bg);color:var(--semantic-warning-text)}.badge.semantic-success,.chip.semantic-success,.tag.semantic-success{background-color:var(--semantic-success-bg);color:var(--semantic-success-text)}.badge.semantic-danger,.chip.semantic-danger,.tag.semantic-danger{background-color:var(--semantic-danger-bg);color:var(--semantic-danger-text)}.chip-group{align-items:center;background-color:var(--color-surface);border:var(--content-block-component-border-sm) solid var(--color-border-subtle);border-radius:9999px;color:var(--color-text);display:inline-flex;font-size:var(--text-xs);gap:var(--component-gap-xs);height:var(--content-block-tag-size-md);padding:var(--component-gap-sm) var(--component-gap-md)}.chip-group--sm{height:var(--content-block-tag-size-sm)}.chip-group--lg{height:var(--content-block-tag-size-lg)}.chip-group--soft{background-color:var(--color-surface-subtle)}.chip-group--outline{background-color:transparent;border-color:var(--color-border-strong)}.chip-group--interactive{cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}.chip-group--interactive:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-strong)}.chip-group--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.chip-group--disabled{cursor:not-allowed;opacity:.5;opacity:var(--content-block-component-disabled--opacity,.5);pointer-events:none}.chip-group.semantic-info{background-color:var(--semantic-info-bg);color:var(--semantic-info-text)}.chip-group.semantic-warning{background-color:var(--semantic-warning-bg);color:var(--semantic-warning-text)}.chip-group.semantic-success{background-color:var(--semantic-success-bg);color:var(--semantic-success-text)}.chip-group.semantic-danger{background-color:var(--semantic-danger-bg);color:var(--semantic-danger-text)}.chip-group__action,.chip-group__label{align-items:center;background:transparent;border:0;color:inherit;display:inline-flex;font:inherit;gap:var(--component-gap-xs);line-height:1;padding:0}.chip-group__label{cursor:default}.chip-group__action{border-left:var(--content-block-component-border-sm) solid var(--color-border-subtle);cursor:pointer;padding:0 var(--space-2)}.chip-group__action:hover{background-color:var(--color-surface-hover)}.chip-group__action:focus-visible,.chip-group__label:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.avatar{align-items:center;background-color:var(--color-muted-bg);border-radius:50%;display:inline-flex;height:var(--avatar-size-md);justify-content:center;overflow:hidden;position:relative;width:var(--avatar-size-md)}.avatar--sm{height:var(--avatar-size-sm);width:var(--avatar-size-sm)}.avatar--lg{height:var(--avatar-size-lg);width:var(--avatar-size-lg)}.avatar--status:after{background-color:var(--color-success);border:var(--border-width) solid var(--color-surface);border-radius:50%;bottom:0;content:"";height:var(--avatar-status-size);position:absolute;right:0;width:var(--avatar-status-size)}.feature{display:flex;flex-direction:column;gap:var(--component-gap-xs)}.feature--horizontal{align-items:center;flex-direction:row}.feature__icon{align-items:center;display:flex;flex-shrink:0;height:var(--icon-container-lg);justify-content:center;width:var(--icon-container-lg)}.feature__icon .icon{display:block;height:100%;width:100%}.feature--interactive{cursor:pointer;transition:background-color var(--transition-normal)}.feature--interactive:hover{background-color:var(--color-surface-hover)}.feature--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}@media (max-width:640px){.feature--horizontal{align-items:flex-start;flex-direction:column}}.process{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--content-block-process-step-min-width),1fr));grid-gap:var(--content-block-process-gap);gap:var(--content-block-process-gap)}@media (max-width:768px){.process{gap:var(--component-gap-lg)}}.process__step{background-color:var(--color-surface);border:var(--content-block-component-border-sm) solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);display:flex;flex-direction:column;gap:var(--component-gap-md);padding:var(--content-block-component-pad-md)}.process__step--active{background-color:var(--accent-soft-surface);border-color:var(--accent-soft-border);color:var(--accent-soft-on)}.process__step--complete{background-color:var(--success-soft-surface);border-color:var(--success-soft-border);color:var(--success-soft-on)}.process__step--disabled{cursor:not-allowed;opacity:var(--content-block-component-disabled--opacity);pointer-events:none}.highlight{background-color:var(--color-surface-subtle);border-left:var(--content-block-highlight-border-width) solid var(--color-accent);border-radius:var(--radius-sm);padding:var(--content-block-highlight-pad)}.highlight--compact{padding:var(--content-block-component-pad-sm)}.highlight--info{background-color:var(--semantic-info-bg);border-color:var(--semantic-info-border)}.highlight--success{background-color:var(--semantic-success-bg);border-color:var(--semantic-success-border)}.highlight--warning{background-color:var(--semantic-warning-bg);border-color:var(--semantic-warning-border)}.highlight--danger{background-color:var(--semantic-danger-bg);border-color:var(--semantic-danger-border)}.fact{background-color:var(--color-surface);border:var(--content-block-component-border-sm) solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--content-block-fact-pad);text-align:center}.fact--horizontal{align-items:center;display:flex;gap:var(--component-gap-lg);justify-content:center;text-align:left}.fact--compact{padding:var(--content-block-component-pad-md)}.fact--interactive{cursor:pointer;transition:background-color var(--transition-normal),border-color var(--transition-normal)}.fact--interactive:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-strong)}.fact--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.fact--disabled{cursor:not-allowed;opacity:.5;opacity:var(--content-block-component-disabled--opacity,.5);pointer-events:none}.content-block{--content-block-pad:0;--content-block-title-size:var(--content-block-title-size-base);--content-block-subtitle-size:var(--content-block-subtitle-size-base);--content-block-variant-rail:var(--color-border-strong);--content-block-variant-tint:var(--color-surface-subtle);--content-block-variant-text:var(--color-text);--content-block-variant-muted:var(--color-text-muted);--content-block-variant-border:var(--color-border-subtle);color:var(--content-block-variant-text);display:flex;flex-direction:column;gap:var(--component-gap-md);width:100%}.content-block--surface{--content-block-pad:var(--content-block-component-pad-lg);background-color:var(--color-surface);border:var(--content-block-component-border-sm) solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-1);padding:var(--content-block-pad)}.content-block--inset{--content-block-pad:var(--content-block-component-pad-md);background-color:var(--color-surface-subtle);border-radius:var(--radius-md);padding:var(--content-block-pad)}.content-block--compact{gap:var(--component-gap-xs)}.content-block--surface.content-block--compact{--content-block-pad:var(--content-block-component-pad-md)}.content-block--inset.content-block--compact{--content-block-pad:var(--content-block-component-pad-sm)}.content-block--bordered{border:var(--content-block-component-border-sm) solid var(--color-border-strong)}.content-block[data-variant=info]{--content-block-variant-rail:var(--semantic-info-border,var(--color-info));--content-block-variant-tint:var(--semantic-info-bg,var(--color-info-soft));--content-block-variant-text:var(--semantic-info-text,var(--color-text));--content-block-variant-muted:var(--semantic-info-text,var(--color-text-muted));--content-block-variant-border:var(--semantic-info-border,var(--color-border-subtle))}.content-block[data-variant=success]{--content-block-variant-rail:var(--semantic-success-border,var(--color-success));--content-block-variant-tint:var(--semantic-success-bg,var(--color-success-soft));--content-block-variant-text:var(--semantic-success-text,var(--color-text));--content-block-variant-muted:var(--semantic-success-text,var(--color-text-muted));--content-block-variant-border:var(--semantic-success-border,var(--color-border-subtle))}.content-block[data-variant=warning]{--content-block-variant-rail:var(--semantic-warning-border,var(--color-warning));--content-block-variant-tint:var(--semantic-warning-bg,var(--color-warning-soft));--content-block-variant-text:var(--semantic-warning-text,var(--color-text));--content-block-variant-muted:var(--semantic-warning-text,var(--color-text-muted));--content-block-variant-border:var(--semantic-warning-border,var(--color-border-subtle))}.content-block[data-variant=danger]{--content-block-variant-rail:var(--semantic-danger-border,var(--color-danger));--content-block-variant-tint:var(--semantic-danger-bg,var(--color-danger-soft));--content-block-variant-text:var(--semantic-danger-text,var(--color-text));--content-block-variant-muted:var(--semantic-danger-text,var(--color-text-muted));--content-block-variant-border:var(--semantic-danger-border,var(--color-border-subtle))}.content-block[data-variant=accent]{--content-block-variant-rail:var(--accent-soft-border,var(--color-accent));--content-block-variant-tint:var(--accent-soft-surface,var(--color-accent-soft));--content-block-variant-text:var(--accent-soft-on,var(--color-on-accent));--content-block-variant-muted:var(--accent-soft-on,var(--color-on-accent));--content-block-variant-border:var(--accent-soft-border,var(--color-border-subtle))}.content-block[data-variant=neutral]{--content-block-variant-rail:var(--color-border-strong);--content-block-variant-tint:var(--color-surface-subtle);--content-block-variant-text:var(--color-text);--content-block-variant-muted:var(--color-text-muted);--content-block-variant-border:var(--color-border-subtle)}.content-block--tint{background-color:var(--content-block-variant-tint);border-color:var(--content-block-variant-rail)}.content-block--outline{border:var(--content-block-component-border-sm) solid var(--content-block-variant-rail)}.content-block--rail{border-left:var(--content-block-rail-width) solid var(--content-block-variant-rail)}.content-block--hero{--content-block-title-size:var(--content-block-hero-title-size);--content-block-subtitle-size:var(--content-block-hero-subtitle-size);--content-block-pad:var(--content-block-hero-pad);gap:var(--component-gap-lg)}.content-block--center{align-items:center;text-align:center}.content-block--center .content-block__actions,.content-block--center .content-block__footer,.content-block--center .content-block__meta{justify-content:center}.content-block--elevated{box-shadow:var(--shadow-2)}.content-block--flat{box-shadow:none}.content-block--split{display:grid;grid-template-columns:var(--content-block-split-main) var(--content-block-split-aside);grid-gap:var(--content-block-split-gap);align-items:start;gap:var(--content-block-split-gap);grid-template-areas:"main aside"}.content-block--split-reverse{grid-template-areas:"aside main"}.content-block__main{grid-area:main}.content-block__aside,.content-block__main{display:flex;flex-direction:column;gap:var(--component-gap-md)}.content-block__aside{grid-area:aside}@media (max-width:900px){.content-block--split,.content-block--split-reverse{grid-template-areas:"main" "aside";grid-template-columns:minmax(0,1fr)}}.content-block__header{display:flex;flex-direction:column;gap:var(--component-gap-xs)}.content-block__header--inline{align-items:center;flex-direction:row;gap:var(--component-gap-md);justify-content:space-between}.content-block__eyebrow{color:var(--content-block-variant-muted);font-size:var(--content-block-eyebrow-size);letter-spacing:.08em;text-transform:uppercase}.content-block__title{font-size:var(--content-block-title-size);font-weight:600}.content-block__subtitle{color:var(--content-block-variant-muted);font-size:var(--content-block-subtitle-size)}.content-block__meta{color:var(--content-block-variant-muted);font-size:var(--content-block-meta-size)}.content-block__actions,.content-block__meta{display:flex;flex-wrap:wrap;gap:var(--component-gap-sm)}.content-block__actions{align-items:center}.content-block__body{display:flex;flex-direction:column;gap:var(--component-gap-md)}.content-block__media{align-items:center;display:flex;justify-content:center;width:100%}.content-block__media img,.content-block__media picture,.content-block__media svg{border-radius:var(--radius-sm);height:auto;max-width:100%}.content-block__media--bleed{border-radius:var(--radius-md);margin:calc(var(--content-block-pad)*-1);overflow:hidden}.content-block__media--bleed img,.content-block__media--bleed picture,.content-block__media--bleed svg{border-radius:0}.content-block__footer{display:flex;gap:var(--component-gap-md);justify-content:flex-end;margin-top:var(--component-gap-lg)}.content-block__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--content-block-grid-min),1fr));grid-gap:var(--content-block-grid-gap);gap:var(--content-block-grid-gap)}.content-block__grid--tight{gap:var(--component-gap-sm)}.content-block__grid--loose{gap:var(--component-gap-xl)}.content-block__list{display:flex;flex-direction:column;gap:var(--content-block-list-gap)}.content-block__list-item{align-items:center;border-bottom:var(--content-block-component-border-sm) solid var(--content-block-variant-border);display:flex;gap:var(--component-gap-md);justify-content:space-between;padding:var(--content-block-row-pad) 0}.content-block__list-item:last-child{border-bottom:none;padding-bottom:0}.content-block__rows{display:flex;flex-direction:column;gap:var(--content-block-row-gap)}.content-block__row{align-items:center;border-bottom:var(--content-block-component-border-sm) solid var(--content-block-variant-border);display:flex;gap:var(--component-gap-md);justify-content:space-between;padding:var(--content-block-row-pad) 0}.content-block__row:last-child{border-bottom:none;padding-bottom:0}.content-block__kv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);grid-gap:var(--component-gap-sm) var(--component-gap-lg);gap:var(--component-gap-sm) var(--component-gap-lg)}.content-block__kv-label{color:var(--content-block-variant-muted);font-size:var(--text-xs);letter-spacing:.04em;text-transform:uppercase}.content-block__kv-value{color:var(--content-block-variant-text);font-size:var(--text-sm)}.content-block__kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));grid-gap:var(--content-block-kpi-gap);gap:var(--content-block-kpi-gap)}.content-block__kpi{display:flex;flex-direction:column;gap:var(--component-gap-xs)}.content-block__kpi-value{font-size:var(--content-block-kpi-value-size);font-weight:600}.content-block__kpi-label{color:var(--content-block-variant-muted);font-size:var(--content-block-kpi-label-size)}@media (max-width:720px){.content-block__kv{grid-template-columns:minmax(0,1fr)}}.content-block--interactive{cursor:pointer;transition:background-color var(--transition-normal),border-color var(--transition-normal),box-shadow var(--transition-normal)}.content-block--interactive:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-strong);box-shadow:var(--shadow-2)}.content-block--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.content-block--disabled{cursor:not-allowed;opacity:.5;opacity:var(--content-block-component-disabled--opacity,.5);pointer-events:none}
|
|
@@ -14,7 +14,6 @@
|
|
|
14
14
|
/* ---------------------------------------------------------
|
|
15
15
|
1. TOKENS
|
|
16
16
|
--------------------------------------------------------- */
|
|
17
|
-
|
|
18
17
|
[data-vds-description-list],
|
|
19
18
|
.vds-description-list {
|
|
20
19
|
--dl-gap: var(--space-4);
|
|
@@ -29,7 +28,6 @@
|
|
|
29
28
|
/* ---------------------------------------------------------
|
|
30
29
|
2. BASE LIST
|
|
31
30
|
--------------------------------------------------------- */
|
|
32
|
-
|
|
33
31
|
.description-list {
|
|
34
32
|
display: grid;
|
|
35
33
|
grid-gap: var(--dl-gap);
|
|
@@ -58,7 +56,6 @@
|
|
|
58
56
|
/* ---------------------------------------------------------
|
|
59
57
|
3. LAYOUT VARIANTS
|
|
60
58
|
--------------------------------------------------------- */
|
|
61
|
-
|
|
62
59
|
.description-list--inline .description-list__item {
|
|
63
60
|
grid-template-columns: minmax(0, var(--dl-term-width)) 1fr;
|
|
64
61
|
align-items: start;
|
|
@@ -79,7 +76,6 @@
|
|
|
79
76
|
/* ---------------------------------------------------------
|
|
80
77
|
4. STYLE VARIANTS
|
|
81
78
|
--------------------------------------------------------- */
|
|
82
|
-
|
|
83
79
|
.description-list--bordered .description-list__item {
|
|
84
80
|
padding: var(--dl-pad);
|
|
85
81
|
border: 1px solid var(--dl-border);
|
|
@@ -99,7 +95,6 @@
|
|
|
99
95
|
/* ---------------------------------------------------------
|
|
100
96
|
5. DENSITY
|
|
101
97
|
--------------------------------------------------------- */
|
|
102
|
-
|
|
103
98
|
.description-list--compact {
|
|
104
99
|
--dl-gap: var(--space-2);
|
|
105
100
|
--dl-pad: var(--space-3);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.vds-description-list,[data-vds-description-list]{--dl-gap:var(--space-4);--dl-term-width:12rem;--dl-term-color:var(--color-text-muted);--dl-desc-color:var(--color-text);--dl-border:var(--color-border-subtle);--dl-radius:var(--radius-md);--dl-pad:var(--space-4)}.description-list{grid-gap:var(--dl-gap);
|
|
1
|
+
.vds-description-list,[data-vds-description-list]{--dl-gap:var(--space-4);--dl-term-width:12rem;--dl-term-color:var(--color-text-muted);--dl-desc-color:var(--color-text);--dl-border:var(--color-border-subtle);--dl-radius:var(--radius-md);--dl-pad:var(--space-4)}.description-list{display:grid;grid-gap:var(--dl-gap);gap:var(--dl-gap)}.description-list__item{display:grid;grid-gap:var(--space-2);gap:var(--space-2)}.description-list__term{color:var(--dl-term-color);font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase}.description-list__desc{color:var(--dl-desc-color);font-size:var(--text-sm)}.description-list--inline .description-list__item{align-items:start;grid-template-columns:minmax(0,var(--dl-term-width)) 1fr}.description-list--stacked .description-list__item{grid-template-columns:1fr}.description-list--columns{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.description-list--columns .description-list__item{grid-template-columns:1fr}.description-list--bordered .description-list__item{background:var(--color-surface);border:1px solid var(--dl-border)}.description-list--bordered .description-list__item,.description-list--striped .description-list__item{border-radius:var(--dl-radius);padding:var(--dl-pad)}.description-list--striped .description-list__item:nth-child(odd){background:var(--color-surface-subtle)}.description-list--compact{--dl-gap:var(--space-2);--dl-pad:var(--space-3)}.description-list--spacious{--dl-gap:var(--space-6);--dl-pad:var(--space-5)}@media (max-width:768px){.description-list--inline .description-list__item{grid-template-columns:1fr}}
|