@24vlh/vds 0.1.10 → 0.2.1

package/dist/components/description-list.css

@@ -0,0 +1,117 @@
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Description Lists
+ *
+ *  Responsibilities:
+ *    - Provide consistent key/value presentation for metadata
+ *    - Support inline, stacked, bordered, and striped layouts
+ *    - Allow compact and spacious density modes
+ *
+ *  System Notes:
+ *    - Works with <dl> semantics (dt/dd) or div wrappers
+ *    - Token-driven spacing and typography
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. TOKENS
+--------------------------------------------------------- */
+
+[data-vds-description-list],
+.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);
+}
+
+/* ---------------------------------------------------------
+   2. BASE LIST
+--------------------------------------------------------- */
+
+.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 {
+    font-size: var(--text-xs);
+    font-weight: 600;
+    color: var(--dl-term-color);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+
+.description-list__desc {
+    font-size: var(--text-sm);
+    color: var(--dl-desc-color);
+}
+
+/* ---------------------------------------------------------
+   3. LAYOUT VARIANTS
+--------------------------------------------------------- */
+
+.description-list--inline .description-list__item {
+    grid-template-columns: minmax(0, var(--dl-term-width)) 1fr;
+    align-items: start;
+}
+
+.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;
+}
+
+/* ---------------------------------------------------------
+   4. STYLE VARIANTS
+--------------------------------------------------------- */
+
+.description-list--bordered .description-list__item {
+    padding: var(--dl-pad);
+    border: 1px solid var(--dl-border);
+    border-radius: var(--dl-radius);
+    background: var(--color-surface);
+}
+
+.description-list--striped .description-list__item {
+    padding: var(--dl-pad);
+    border-radius: var(--dl-radius);
+}
+
+.description-list--striped .description-list__item:nth-child(odd) {
+    background: var(--color-surface-subtle);
+}
+
+/* ---------------------------------------------------------
+   5. DENSITY
+--------------------------------------------------------- */
+
+.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;
+    }
+}

package/dist/components/description-list.min.css

@@ -0,0 +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);display:grid;gap:var(--dl-gap)}.description-list__item{grid-gap:var(--space-2);display:grid;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}}

package/dist/components/flows.css

@@ -57,13 +57,16 @@
 
     --flow-progress-stripe-size: var(--space-3);
     --flow-progress-stripe-speed: 1.2s;
+    --flow-progress-track: var(--color-muted-bg);
+    --flow-progress-fill: var(--color-accent);
 }
 
 /* ---------------------------------------------------------
    2. GLOBAL FLOW MODIFIERS
 --------------------------------------------------------- */
 
-.flow--compact .flow {
+.flow--compact .flow,
+.flow--compact.flow {
     gap: var(--flow-gap-lg);
 }
 
@@ -71,6 +74,10 @@
     gap: var(--flow-gap-md);
 }
 
+.flow--compact .flow__nav {
+    gap: var(--flow-gap-sm);
+}
+
 .flow--compact .steps {
     gap: var(--flow-gap-sm);
 }
@@ -305,6 +312,10 @@
     flex: auto;
 }
 
+.steps--vertical .steps__label {
+    white-space: normal;
+}
+
 /* ---------------------------------------------------------
    6. FLOW PROGRESS BARS
 --------------------------------------------------------- */
@@ -312,7 +323,7 @@
 .flow-progress {
     width: 100%;
     height: var(--border-width-strong);
-    background-color: var(--color-muted-bg);
+    background-color: var(--flow-progress-track);
     border-radius: var(--radius-sm);
     overflow: hidden;
 }
@@ -320,64 +331,56 @@
 .flow-progress__bar {
     height: 100%;
     width: 0;
-    background-color: var(--color-muted-bg);
-    transition: width 0.2s ease;
+    background-color: var(--flow-progress-fill, var(--color-accent));
+    transition: width var(--transition-normal);
 }
 
-.flow-progress--striped .flow-progress__bar {
-    background-image: repeating-linear-gradient(
-            45deg,
-            var(--color-text-soft) 0,
-            var(--color-text-soft) var(--flow-progress-stripe-size),
-            var(--color-muted-bg) var(--flow-progress-stripe-size),
-            var(--color-muted-bg) calc(var(--flow-progress-stripe-size) * 2)
-    );
-    animation: flow-progress-stripes var(--flow-progress-stripe-speed) linear infinite;
+.flow-progress__bar--success {
+    --flow-progress-fill: var(--color-success);
 }
 
-.flow-progress--striped .flow-progress__bar--error {
-    background-image: repeating-linear-gradient(
-            45deg,
-            var(--color-danger) 0,
-            var(--color-danger) var(--flow-progress-stripe-size),
-            var(--color-danger-soft) var(--flow-progress-stripe-size),
-            var(--color-danger-soft) calc(var(--flow-progress-stripe-size) * 2)
-    );
+.flow-progress__bar--warning {
+    --flow-progress-fill: var(--color-warning);
 }
 
-.flow-progress--striped .flow-progress__bar--warning {
-    background-image: repeating-linear-gradient(
-            45deg,
-            var(--color-warning) 0,
-            var(--color-warning) var(--flow-progress-stripe-size),
-            var(--color-warning-soft) var(--flow-progress-stripe-size),
-            var(--color-warning-soft) calc(var(--flow-progress-stripe-size) * 2)
-    );
+.flow-progress__bar--error {
+    --flow-progress-fill: var(--color-danger);
 }
 
-@keyframes flow-progress-stripes {
-    from {
-        background-position: 0 0;
-    }
-    to {
-        background-position: calc(var(--flow-progress-stripe-size) * -2.828) 0;
-    }
+.flow-progress__bar--info {
+    --flow-progress-fill: var(--color-info);
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .flow-progress--striped .flow-progress__bar {
-        animation: none;
-        background-position: 0 0;
+    .flow-progress__bar {
+        transition: none;
     }
 }
 
+.flow-progress--striped .flow-progress__bar,
 .flow-progress--striped-right .flow-progress__bar {
-    animation: flow-progress-stripes-right var(--flow-progress-stripe-speed) linear infinite;
+    background-image: linear-gradient(
+            45deg,
+            rgba(255, 255, 255, 0.22) 25%,
+            transparent 25%,
+            transparent 50%,
+            rgba(255, 255, 255, 0.22) 50%,
+            rgba(255, 255, 255, 0.22) 75%,
+            transparent 75%,
+            transparent
+    );
+    background-size: calc(var(--flow-progress-stripe-size) * 2)
+        calc(var(--flow-progress-stripe-size) * 2);
+    animation: flow-progress-stripes var(--flow-progress-stripe-speed) linear infinite;
+}
+
+.flow-progress--striped-right .flow-progress__bar {
+    animation-direction: reverse;
 }
 
-@keyframes flow-progress-stripes-right {
+@keyframes flow-progress-stripes {
     from {
-        background-position: calc(var(--flow-progress-stripe-size) * -2.828) 0;
+        background-position: calc(var(--flow-progress-stripe-size) * 2) 0;
     }
     to {
         background-position: 0 0;
@@ -385,6 +388,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+    .flow-progress--striped .flow-progress__bar,
     .flow-progress--striped-right .flow-progress__bar {
         animation: none;
         background-position: 0 0;
@@ -415,6 +419,10 @@
     background-color: var(--color-warning);
 }
 
+.flow-progress__segment--info {
+    background-color: var(--color-info);
+}
+
 /* ---------------------------------------------------------
    7. MINIMAL TIMELINE (A)
 --------------------------------------------------------- */
@@ -462,8 +470,8 @@
 }
 
 .timeline__point--success {
-    border-color: var(--danger-soft-border, var(--color-danger));
-    background-color: var(--danger-soft-surface, var(--color-danger-soft));
+    border-color: var(--success-soft-border, var(--color-success));
+    background-color: var(--success-soft-surface, var(--color-success-soft));
 }
 
 .timeline__point--info {
@@ -714,7 +722,7 @@
 }
 
 .journey__stage--info {
-    border-color: var(--color-accent);
+    border-color: var(--color-info);
     background-color: var(--info-soft-surface, var(--color-info-soft));
     color: var(--info-soft-on, var(--color-on-info));
 }
@@ -793,27 +801,32 @@
 .process-flow__node--active {
     border-color: var(--color-accent);
     background-color: var(--accent-soft-surface, var(--color-accent-soft));
+    color: var(--accent-soft-on, var(--color-on-accent));
 }
 
 .process-flow__node--complete,
 .process-flow__node--success {
     border-color: var(--color-success);
     background-color: var(--success-soft-surface, var(--color-success-soft));
+    color: var(--success-soft-on, var(--color-on-success));
 }
 
 .process-flow__node--error {
     border-color: var(--color-danger);
     background-color: var(--danger-soft-surface, var(--color-danger-soft));
+    color: var(--danger-soft-on, var(--color-on-danger));
 }
 
 .process-flow__node--warning {
     border-color: var(--color-warning);
     background-color: var(--warning-soft-surface, var(--color-warning-soft));
+    color: var(--warning-soft-on, var(--color-on-warning));
 }
 
 .process-flow__node--info {
-    border-color: var(--color-accent);
+    border-color: var(--color-info);
     background-color: var(--info-soft-surface, var(--color-info-soft));
+    color: var(--info-soft-on, var(--color-on-info));
 }
 
 .process-flow__icon {
@@ -1049,7 +1062,7 @@
 }
 
 .flow-branch__option--info {
-    border-color: var(--color-accent);
+    border-color: var(--color-info);
     background-color: var(--info-soft-surface, var(--color-info-soft));
     color: var(--info-soft-on, var(--color-on-info));
 }

package/dist/components/flows.min.css

@@ -1 +1 @@
-.vds-flow,[data-vds-flow]{--flow-component-disabled-opacity:0.48;--flow-step-bullet-sm:var(--space-5);--flow-step-bullet-md:var(--space-5_5);--flow-step-bullet-lg:var(--space-6);--flow-timeline-point-sm:var(--space-2);--flow-timeline-point-md:var(--space-3);--flow-timeline-point-xs:var(--space-1_5);--flow-node-min-width:var(--space-40);--flow-stage-min-width:var(--space-48);--flow-grid-min-md:var(--flow-stage-min-width);--flow-icon-size-sm:var(--space-3);--flow-icon-size-md:var(--space-4);--flow-icon-size-lg:var(--space-5);--flow-gap-xs:var(--space-1);--flow-gap-sm:var(--space-2);--flow-gap-md:var(--space-3);--flow-gap-lg:var(--space-4);--flow-gap-xl:var(--space-8);--flow-inset-xs:var(--space-2);--flow-inset-sm:var(--space-3);--flow-inset-md:var(--space-4);--flow-inset-lg:var(--space-6);--flow-progress-stripe-size:var(--space-3);--flow-progress-stripe-speed:1.2s}.flow--compact .flow{gap:var(--flow-gap-lg)}.flow--compact .flow__body{gap:var(--flow-gap-md)}.flow--compact .steps,.flow--compact .timeline{gap:var(--flow-gap-sm)}.flow--compact .journey{gap:var(--flow-gap-md)}.flow--compact .process-flow{gap:var(--flow-gap-sm)}.flow--compact .state-flow{gap:var(--flow-gap-xs)}.flow--compact .form-flow{gap:var(--flow-gap-md)}.steps__item--upcoming{color:var(--color-text-soft)}.flow-branch__option--upcoming,.journey__stage--upcoming,.process-flow__node--upcoming,.state-flow__item--upcoming{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text-muted)}.flow-branch__option--clickable:focus-visible,.journey__stage--clickable:focus-visible,.process-flow__node--clickable:focus-visible,.steps__item--clickable:focus-visible,.steps__item:focus-visible{outline:var(--focus-ring-width) solid var(--color-accent);outline-offset:var(--focus-ring-offset)}.steps__item--disabled,.steps__item[aria-disabled=true]{cursor:not-allowed;opacity:var(--flow-component-disabled-opacity)}.flow-branch__option--disabled,.flow-branch__option[aria-disabled=true],.journey__stage--disabled,.journey__stage[aria-disabled=true],.process-flow__node--disabled,.process-flow__node[aria-disabled=true]{opacity:var(--flow-component-disabled-opacity);pointer-events:none}.flow{gap:var(--space-8)}.flow,.flow__header{display:flex;flex-direction:column}.flow__header{gap:var(--space-2)}.flow__title{font-size:var(--text-lg);font-weight:600}.flow__subtitle{color:var(--color-text-muted);font-size:var(--text-sm)}.flow__body{display:flex;flex-direction:column;gap:var(--space-6)}.flow__nav{justify-content:flex-end}.flow__nav,.steps{display:flex;gap:var(--space-4)}.steps,.steps__item{align-items:center}.steps__item{color:var(--color-text-muted);display:flex;font-size:var(--text-xs);gap:var(--flow-gap-sm)}.steps__item--clickable{cursor:pointer}.steps__item--clickable:hover .steps__label{color:var(--color-text)}.steps__item--clickable:active{opacity:.95;transform:translateY(1px)}.steps__item--error{color:var(--color-danger-strong)}.steps__item--error .steps__bullet{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--danger-soft-border,var(--color-danger));color:var(--danger-soft-on,var(--color-on-danger))}.steps__item--warning{color:var(--color-warning-strong)}.steps__item--warning .steps__bullet{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--warning-soft-border,var(--color-warning));color:var(--warning-soft-on,var(--color-on-warning))}.steps__item[aria-current=step],.steps__item[aria-current=step] .steps__label{color:var(--color-text)}.steps__bullet{align-items:center;background-color:var(--color-surface-subtle);border:var(--border-width) solid var(--color-border-subtle);border-radius:999px;color:var(--color-text-muted);display:flex;flex-shrink:0;font-size:var(--text-xxs);height:var(--flow-step-bullet-md);justify-content:center;width:var(--flow-step-bullet-md)}.steps__label{white-space:nowrap}.steps__line{background-color:var(--color-border-subtle);flex:1;height:var(--border-width)}.steps__item--active .steps__bullet{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--accent-soft-border,var(--color-accent));color:var(--accent-soft-on,var(--color-on-accent))}.steps__item--complete .steps__bullet{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--success-soft-border,var(--color-success));color:var(--success-soft-on,var(--color-on-success));opacity:.7}.steps__item--active,.steps__item--complete{color:var(--color-text)}.steps--a .steps__bullet{height:var(--flow-step-bullet-lg);width:var(--flow-step-bullet-lg)}.steps--c .steps__bullet{font-size:var(--text-xxs);height:var(--flow-step-bullet-sm);width:var(--flow-step-bullet-sm)}.steps--vertical{flex-direction:column}.steps--vertical,.steps--vertical .steps__item{align-items:flex-start}.steps--vertical .steps__line{background-color:var(--color-border-subtle);flex:auto;height:auto;margin-left:calc(var(--flow-step-bullet-md)/2 - var(--border-width)/2);min-height:var(--flow-gap-xl);width:var(--border-width)}.flow-progress{border-radius:var(--radius-sm);height:var(--border-width-strong);overflow:hidden;width:100%}.flow-progress,.flow-progress__bar{background-color:var(--color-muted-bg)}.flow-progress__bar{height:100%;transition:width .2s ease;width:0}.flow-progress--striped .flow-progress__bar{animation:flow-progress-stripes var(--flow-progress-stripe-speed) linear infinite;background-image:repeating-linear-gradient(45deg,var(--color-text-soft) 0,var(--color-text-soft) var(--flow-progress-stripe-size),var(--color-muted-bg) var(--flow-progress-stripe-size),var(--color-muted-bg) calc(var(--flow-progress-stripe-size)*2))}.flow-progress--striped .flow-progress__bar--error{background-image:repeating-linear-gradient(45deg,var(--color-danger) 0,var(--color-danger) var(--flow-progress-stripe-size),var(--color-danger-soft) var(--flow-progress-stripe-size),var(--color-danger-soft) calc(var(--flow-progress-stripe-size)*2))}.flow-progress--striped .flow-progress__bar--warning{background-image:repeating-linear-gradient(45deg,var(--color-warning) 0,var(--color-warning) var(--flow-progress-stripe-size),var(--color-warning-soft) var(--flow-progress-stripe-size),var(--color-warning-soft) calc(var(--flow-progress-stripe-size)*2))}@keyframes flow-progress-stripes{0%{background-position:0 0}to{background-position:calc(var(--flow-progress-stripe-size)*-2.828) 0}}@media (prefers-reduced-motion:reduce){.flow-progress--striped .flow-progress__bar{animation:none;background-position:0 0}}.flow-progress--striped-right .flow-progress__bar{animation:flow-progress-stripes-right var(--flow-progress-stripe-speed) linear infinite}@keyframes flow-progress-stripes-right{0%{background-position:calc(var(--flow-progress-stripe-size)*-2.828) 0}to{background-position:0 0}}@media (prefers-reduced-motion:reduce){.flow-progress--striped-right .flow-progress__bar{animation:none;background-position:0 0}}.flow-progress--segments{border-radius:var(--radius-sm);display:flex;height:var(--border-width-strong);overflow:hidden}.flow-progress__segment{background-color:var(--color-muted-bg);flex:1}.flow-progress__segment--complete{background-color:var(--color-success)}.flow-progress__segment--error{background-color:var(--color-danger)}.flow-progress__segment--warning{background-color:var(--color-warning)}.timeline{display:flex;flex-direction:column;gap:var(--flow-gap-md)}.timeline__item{align-items:stretch;display:flex;gap:var(--flow-gap-sm)}.timeline__point-wrap{align-items:center;display:flex;flex-direction:column;gap:var(--flow-gap-xs)}.timeline__point{background-color:var(--color-surface);border:var(--border-width-strong) solid var(--color-accent);border-radius:999px;flex-shrink:0;height:var(--flow-timeline-point-sm);width:var(--flow-timeline-point-sm)}.timeline__point--upcoming{border-color:var(--color-border-subtle)}.timeline__point--error{background-color:var(--color-danger-soft);border-color:var(--color-danger)}.timeline__point--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--warning-soft-border,var(--color-warning))}.timeline__point--success{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--danger-soft-border,var(--color-danger))}.timeline__point--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--info-soft-border,var(--color-info))}.timeline__icon{color:var(--color-icon-muted);height:var(--flow-icon-size-md);width:var(--flow-icon-size-md)}.timeline__icon--left{margin-right:var(--flow-gap-xs)}.timeline__icon--right{margin-left:var(--flow-gap-xs)}.timeline__icon--top{margin-bottom:var(--flow-gap-xs)}.timeline__line{background-color:var(--color-border-subtle);flex:1;width:var(--border-width-strong)}.timeline__content{display:flex;flex:1;flex-direction:column;gap:var(--flow-gap-xs)}.timeline__label{align-items:center;display:flex;font-size:var(--text-sm);font-weight:500;gap:var(--space-2)}.timeline__note{color:var(--color-text-muted);font-size:var(--text-xs)}.timeline--horizontal{align-items:flex-start;flex-direction:row}.timeline--horizontal .timeline__item{align-items:center;flex-direction:column}.timeline--horizontal .timeline__point-wrap{flex-direction:row}.timeline--horizontal .timeline__line{height:var(--border-width-strong);width:var(--component-gap-xl)}.timeline--compact .timeline__item{gap:var(--flow-gap-xs)}.timeline--compact .timeline__note{font-size:var(--text-xxs)}.timeline--compact .timeline__point{height:var(--flow-timeline-point-xs);width:var(--flow-timeline-point-xs)}.timeline--compact .timeline__icon{height:var(--flow-icon-size-sm);width:var(--flow-icon-size-sm)}.timeline--rich{display:flex;flex-direction:column;gap:var(--flow-gap-lg)}.timeline--rich .timeline__item{align-items:stretch;background-color:var(--flow-zebra-bg-alt);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-sm);display:flex;gap:var(--flow-gap-md);padding:var(--flow-inset-sm)}.timeline--rich .timeline__item:nth-child(2n){background-color:var(--flow-zebra-bg)}.timeline--rich .timeline__item:nth-child(odd){background-color:var(--flow-zebra-bg-alt)}.timeline--rich .timeline__point-wrap{align-items:center;display:flex;flex-direction:column;flex-shrink:0;gap:var(--flow-gap-xs)}.timeline--rich .timeline__point{height:var(--flow-timeline-point-md);width:var(--flow-timeline-point-md)}.timeline--rich .timeline__line{background-color:var(--color-border-subtle);border-radius:var(--radius-sm);flex:1;width:var(--border-width-strong)}.timeline--rich .timeline__item:last-child .timeline__line{display:none}.timeline-events{display:flex;flex-direction:column;gap:var(--space-4)}.timeline-events .timeline__item{align-items:flex-start;gap:var(--space-4)}.timeline__timestamp{color:var(--color-text-soft);font-size:var(--text-xxs)}.timeline__meta{color:var(--color-text-muted);font-size:var(--text-xs)}.timeline__body{color:var(--color-text);font-size:var(--text-sm);margin-top:var(--flow-gap-xs)}.timeline--audit .timeline__label{font-size:var(--text-xs);letter-spacing:.05em;text-transform:uppercase}.timeline--audit .timeline__body{font-size:var(--text-xs)}.journey{display:flex;flex-wrap:wrap;gap:var(--flow-gap-lg)}.journey--compact{gap:var(--flow-gap-md)}.journey__stage{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;flex:1 1 var(--flow-stage-min-width);flex-direction:column;gap:var(--flow-gap-sm);min-width:var(--flow-stage-min-width);padding:var(--flow-inset-md)}.journey__stage--clickable{cursor:pointer}.journey__stage--clickable:hover{border-color:var(--color-accent)}.journey__stage--clickable:active{opacity:.96;transform:translateY(1px)}.journey__stage--disabled{opacity:var(--flow-component-disabled-opacity);pointer-events:none}.journey__stage--active{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--color-accent);color:var(--accent-soft-on,var(--color-on-accent))}.journey__stage--complete,.journey__stage--success{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--color-success);color:var(--success-soft-on,var(--color-on-success))}.journey__stage--error{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--color-danger);color:var(--danger-soft-on,var(--color-on-danger))}.journey__stage--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--color-warning);color:var(--warning-soft-on,var(--color-on-warning))}.journey__stage--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--color-accent);color:var(--info-soft-on,var(--color-on-info))}.journey__icon{color:var(--color-icon-muted);height:var(--flow-icon-size-lg);width:var(--flow-icon-size-lg)}.journey__marker{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase}.journey__title{font-size:var(--text-md);font-weight:600}.journey__details{color:var(--color-text-muted);font-size:var(--text-sm)}.process-flow{align-items:center;display:flex;flex-wrap:wrap;gap:var(--flow-gap-md)}.process-flow--compact{gap:var(--flow-gap-sm)}.process-flow__node{align-items:center;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;flex-direction:column;font-size:var(--text-sm);gap:var(--flow-gap-xs);min-width:var(--flow-node-min-width);padding:var(--flow-inset-sm) var(--flow-inset-md);text-align:center}.process-flow__node--clickable{cursor:pointer}.process-flow__node--clickable:hover{border-color:var(--color-accent)}.process-flow__node--clickable:active{opacity:.96;transform:translateY(1px)}.process-flow__node--disabled{opacity:var(--flow-component-disabled-opacity);pointer-events:none}.process-flow__node--active{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--color-accent)}.process-flow__node--complete,.process-flow__node--success{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--color-success)}.process-flow__node--error{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--color-danger)}.process-flow__node--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--color-warning)}.process-flow__node--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--color-accent)}.process-flow__icon{color:var(--color-icon-muted);flex-shrink:0;height:var(--flow-icon-size-md);margin-bottom:0;width:var(--flow-icon-size-md)}.process-flow__arrow{background-color:var(--color-border-subtle);flex-shrink:0;height:var(--border-width);width:var(--space-6)}.process-flow__arrow--error{background-color:var(--color-danger)}.process-flow__arrow--warning{background-color:var(--color-warning)}.process-flow--vertical{align-items:flex-start;flex-direction:column}.process-flow--vertical .process-flow__arrow{height:var(--space-6);margin-left:calc(var(--flow-node-min-width)/2 - var(--border-width)/2);width:var(--border-width)}.state-flow{align-items:center;display:inline-flex;flex-wrap:wrap;gap:var(--flow-gap-sm)}.state-flow__item{background-color:var(--color-surface-subtle);border:var(--border-width) solid var(--color-border-subtle);border-radius:999px;color:var(--color-text-muted);font-size:var(--text-xs);padding:var(--flow-inset-xs) var(--flow-inset-sm)}.state-flow__item--active{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--color-accent);color:var(--accent-soft-on,var(--color-on-accent))}.state-flow__item--complete{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--color-success);color:var(--success-soft-on,var(--color-on-success))}.state-flow__item--error{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--color-danger);color:var(--danger-soft-on,var(--color-on-danger))}.state-flow__item--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--color-warning);color:var(--warning-soft-on,var(--color-on-warning))}.state-flow__item--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--color-accent);color:var(--info-soft-on,var(--color-on-info))}.form-flow{gap:var(--flow-gap-lg);justify-content:center}.form-flow,.form-flow__step{display:flex;flex-direction:column}.form-flow__step{gap:var(--flow-gap-md)}.form-flow__step--error{background-color:var(--color-danger-soft);border-left:var(--border-width-strong) solid var(--color-danger);padding-left:var(--flow-inset-sm)}.form-flow__step--warning{background-color:var(--color-warning-soft);border-left:var(--border-width-strong) solid var(--color-warning);padding-left:var(--flow-inset-sm)}.form-flow__step--success,.form-flow__step--valid{background-color:var(--color-success-soft);border-left:var(--border-width-strong) solid var(--color-success);padding-left:var(--flow-inset-sm)}.form-flow__actions{display:flex;gap:var(--flow-gap-md);justify-content:space-between}.form-flow__actions-right{display:inline-flex;gap:var(--flow-gap-md);margin-left:auto}.flow-branch{grid-gap:var(--flow-gap-lg);display:grid;gap:var(--flow-gap-lg);grid-template-columns:repeat(auto-fit,minmax(var(--flow-grid-min-md),1fr))}.flow-branch__icon{color:var(--color-icon-muted);flex-shrink:0;height:var(--flow-icon-size-md);width:var(--flow-icon-size-md)}.flow-branch__title{color:var(--color-text);font-size:var(--text-md);font-weight:600}.flow-branch__details{color:var(--color-text-muted);font-size:var(--text-sm);line-height:var(--line-height-normal)}.flow-branch--compact{gap:var(--flow-gap-md)}.flow-branch--compact .flow-branch__title{font-size:var(--text-sm)}.flow-branch--compact .flow-branch__details{font-size:var(--text-xs)}.flow-branch__option{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;flex-direction:column;font-size:var(--text-sm);gap:var(--flow-gap-sm);padding:var(--flow-inset-md)}.flow-branch__option--clickable{cursor:pointer}.flow-branch__option--clickable:hover{border-color:var(--color-accent)}.flow-branch__option--clickable:active{opacity:.96;transform:translateY(1px)}.flow-branch__option--disabled{opacity:var(--flow-component-disabled-opacity);pointer-events:none}.flow-branch__option--active{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--color-accent);color:var(--accent-soft-on,var(--color-on-accent))}.flow-branch__option--complete,.flow-branch__option--success{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--color-success);color:var(--success-soft-on,var(--color-on-success))}.flow-branch__option--error{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--color-danger);color:var(--danger-soft-on,var(--color-on-danger))}.flow-branch__option--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--color-warning);color:var(--warning-soft-on,var(--color-on-warning))}.flow-branch__option--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--color-accent);color:var(--info-soft-on,var(--color-on-info))}.flow-branch__arrow{background-color:var(--color-border-subtle);flex-shrink:0;height:var(--border-width);margin-left:auto;margin-right:auto;width:var(--space-6)}.flow-branch__arrow--error{background-color:var(--color-danger)}.flow-branch__arrow--warning{background-color:var(--color-warning)}@media (max-width:768px){.steps{flex-wrap:wrap}.process-flow{align-items:flex-start;flex-direction:column}.process-flow__arrow{height:var(--space-4);width:var(--border-width)}.journey{flex-direction:column}.journey__stage{width:100%}}
+.vds-flow,[data-vds-flow]{--flow-component-disabled-opacity:0.48;--flow-step-bullet-sm:var(--space-5);--flow-step-bullet-md:var(--space-5_5);--flow-step-bullet-lg:var(--space-6);--flow-timeline-point-sm:var(--space-2);--flow-timeline-point-md:var(--space-3);--flow-timeline-point-xs:var(--space-1_5);--flow-node-min-width:var(--space-40);--flow-stage-min-width:var(--space-48);--flow-grid-min-md:var(--flow-stage-min-width);--flow-icon-size-sm:var(--space-3);--flow-icon-size-md:var(--space-4);--flow-icon-size-lg:var(--space-5);--flow-gap-xs:var(--space-1);--flow-gap-sm:var(--space-2);--flow-gap-md:var(--space-3);--flow-gap-lg:var(--space-4);--flow-gap-xl:var(--space-8);--flow-inset-xs:var(--space-2);--flow-inset-sm:var(--space-3);--flow-inset-md:var(--space-4);--flow-inset-lg:var(--space-6);--flow-progress-stripe-size:var(--space-3);--flow-progress-stripe-speed:1.2s;--flow-progress-track:var(--color-muted-bg);--flow-progress-fill:var(--color-accent)}.flow--compact .flow,.flow--compact.flow{gap:var(--flow-gap-lg)}.flow--compact .flow__body{gap:var(--flow-gap-md)}.flow--compact .flow__nav,.flow--compact .steps,.flow--compact .timeline{gap:var(--flow-gap-sm)}.flow--compact .journey{gap:var(--flow-gap-md)}.flow--compact .process-flow{gap:var(--flow-gap-sm)}.flow--compact .state-flow{gap:var(--flow-gap-xs)}.flow--compact .form-flow{gap:var(--flow-gap-md)}.steps__item--upcoming{color:var(--color-text-soft)}.flow-branch__option--upcoming,.journey__stage--upcoming,.process-flow__node--upcoming,.state-flow__item--upcoming{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text-muted)}.flow-branch__option--clickable:focus-visible,.journey__stage--clickable:focus-visible,.process-flow__node--clickable:focus-visible,.steps__item--clickable:focus-visible,.steps__item:focus-visible{outline:var(--focus-ring-width) solid var(--color-accent);outline-offset:var(--focus-ring-offset)}.steps__item--disabled,.steps__item[aria-disabled=true]{cursor:not-allowed;opacity:var(--flow-component-disabled-opacity)}.flow-branch__option--disabled,.flow-branch__option[aria-disabled=true],.journey__stage--disabled,.journey__stage[aria-disabled=true],.process-flow__node--disabled,.process-flow__node[aria-disabled=true]{opacity:var(--flow-component-disabled-opacity);pointer-events:none}.flow{gap:var(--space-8)}.flow,.flow__header{display:flex;flex-direction:column}.flow__header{gap:var(--space-2)}.flow__title{font-size:var(--text-lg);font-weight:600}.flow__subtitle{color:var(--color-text-muted);font-size:var(--text-sm)}.flow__body{display:flex;flex-direction:column;gap:var(--space-6)}.flow__nav{justify-content:flex-end}.flow__nav,.steps{display:flex;gap:var(--space-4)}.steps,.steps__item{align-items:center}.steps__item{color:var(--color-text-muted);display:flex;font-size:var(--text-xs);gap:var(--flow-gap-sm)}.steps__item--clickable{cursor:pointer}.steps__item--clickable:hover .steps__label{color:var(--color-text)}.steps__item--clickable:active{opacity:.95;transform:translateY(1px)}.steps__item--error{color:var(--color-danger-strong)}.steps__item--error .steps__bullet{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--danger-soft-border,var(--color-danger));color:var(--danger-soft-on,var(--color-on-danger))}.steps__item--warning{color:var(--color-warning-strong)}.steps__item--warning .steps__bullet{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--warning-soft-border,var(--color-warning));color:var(--warning-soft-on,var(--color-on-warning))}.steps__item[aria-current=step],.steps__item[aria-current=step] .steps__label{color:var(--color-text)}.steps__bullet{align-items:center;background-color:var(--color-surface-subtle);border:var(--border-width) solid var(--color-border-subtle);border-radius:999px;color:var(--color-text-muted);display:flex;flex-shrink:0;font-size:var(--text-xxs);height:var(--flow-step-bullet-md);justify-content:center;width:var(--flow-step-bullet-md)}.steps__label{white-space:nowrap}.steps__line{background-color:var(--color-border-subtle);flex:1;height:var(--border-width)}.steps__item--active .steps__bullet{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--accent-soft-border,var(--color-accent));color:var(--accent-soft-on,var(--color-on-accent))}.steps__item--complete .steps__bullet{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--success-soft-border,var(--color-success));color:var(--success-soft-on,var(--color-on-success));opacity:.7}.steps__item--active,.steps__item--complete{color:var(--color-text)}.steps--a .steps__bullet{height:var(--flow-step-bullet-lg);width:var(--flow-step-bullet-lg)}.steps--c .steps__bullet{font-size:var(--text-xxs);height:var(--flow-step-bullet-sm);width:var(--flow-step-bullet-sm)}.steps--vertical{flex-direction:column}.steps--vertical,.steps--vertical .steps__item{align-items:flex-start}.steps--vertical .steps__line{background-color:var(--color-border-subtle);flex:auto;height:auto;margin-left:calc(var(--flow-step-bullet-md)/2 - var(--border-width)/2);min-height:var(--flow-gap-xl);width:var(--border-width)}.steps--vertical .steps__label{white-space:normal}.flow-progress{background-color:var(--flow-progress-track);border-radius:var(--radius-sm);height:var(--border-width-strong);overflow:hidden;width:100%}.flow-progress__bar{background-color:var(--flow-progress-fill,var(--color-accent));height:100%;transition:width var(--transition-normal);width:0}.flow-progress__bar--success{--flow-progress-fill:var(--color-success)}.flow-progress__bar--warning{--flow-progress-fill:var(--color-warning)}.flow-progress__bar--error{--flow-progress-fill:var(--color-danger)}.flow-progress__bar--info{--flow-progress-fill:var(--color-info)}@media (prefers-reduced-motion:reduce){.flow-progress__bar{transition:none}}.flow-progress--striped .flow-progress__bar,.flow-progress--striped-right .flow-progress__bar{animation:flow-progress-stripes var(--flow-progress-stripe-speed) linear infinite;background-image:linear-gradient(45deg,hsla(0,0%,100%,.22) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.22) 0,hsla(0,0%,100%,.22) 75%,transparent 0,transparent);background-size:calc(var(--flow-progress-stripe-size)*2) calc(var(--flow-progress-stripe-size)*2)}.flow-progress--striped-right .flow-progress__bar{animation-direction:reverse}@keyframes flow-progress-stripes{0%{background-position:calc(var(--flow-progress-stripe-size)*2) 0}to{background-position:0 0}}@media (prefers-reduced-motion:reduce){.flow-progress--striped .flow-progress__bar,.flow-progress--striped-right .flow-progress__bar{animation:none;background-position:0 0}}.flow-progress--segments{border-radius:var(--radius-sm);display:flex;height:var(--border-width-strong);overflow:hidden}.flow-progress__segment{background-color:var(--color-muted-bg);flex:1}.flow-progress__segment--complete{background-color:var(--color-success)}.flow-progress__segment--error{background-color:var(--color-danger)}.flow-progress__segment--warning{background-color:var(--color-warning)}.flow-progress__segment--info{background-color:var(--color-info)}.timeline{display:flex;flex-direction:column;gap:var(--flow-gap-md)}.timeline__item{align-items:stretch;display:flex;gap:var(--flow-gap-sm)}.timeline__point-wrap{align-items:center;display:flex;flex-direction:column;gap:var(--flow-gap-xs)}.timeline__point{background-color:var(--color-surface);border:var(--border-width-strong) solid var(--color-accent);border-radius:999px;flex-shrink:0;height:var(--flow-timeline-point-sm);width:var(--flow-timeline-point-sm)}.timeline__point--upcoming{border-color:var(--color-border-subtle)}.timeline__point--error{background-color:var(--color-danger-soft);border-color:var(--color-danger)}.timeline__point--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--warning-soft-border,var(--color-warning))}.timeline__point--success{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--success-soft-border,var(--color-success))}.timeline__point--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--info-soft-border,var(--color-info))}.timeline__icon{color:var(--color-icon-muted);height:var(--flow-icon-size-md);width:var(--flow-icon-size-md)}.timeline__icon--left{margin-right:var(--flow-gap-xs)}.timeline__icon--right{margin-left:var(--flow-gap-xs)}.timeline__icon--top{margin-bottom:var(--flow-gap-xs)}.timeline__line{background-color:var(--color-border-subtle);flex:1;width:var(--border-width-strong)}.timeline__content{display:flex;flex:1;flex-direction:column;gap:var(--flow-gap-xs)}.timeline__label{align-items:center;display:flex;font-size:var(--text-sm);font-weight:500;gap:var(--space-2)}.timeline__note{color:var(--color-text-muted);font-size:var(--text-xs)}.timeline--horizontal{align-items:flex-start;flex-direction:row}.timeline--horizontal .timeline__item{align-items:center;flex-direction:column}.timeline--horizontal .timeline__point-wrap{flex-direction:row}.timeline--horizontal .timeline__line{height:var(--border-width-strong);width:var(--component-gap-xl)}.timeline--compact .timeline__item{gap:var(--flow-gap-xs)}.timeline--compact .timeline__note{font-size:var(--text-xxs)}.timeline--compact .timeline__point{height:var(--flow-timeline-point-xs);width:var(--flow-timeline-point-xs)}.timeline--compact .timeline__icon{height:var(--flow-icon-size-sm);width:var(--flow-icon-size-sm)}.timeline--rich{display:flex;flex-direction:column;gap:var(--flow-gap-lg)}.timeline--rich .timeline__item{align-items:stretch;background-color:var(--flow-zebra-bg-alt);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-sm);display:flex;gap:var(--flow-gap-md);padding:var(--flow-inset-sm)}.timeline--rich .timeline__item:nth-child(2n){background-color:var(--flow-zebra-bg)}.timeline--rich .timeline__item:nth-child(odd){background-color:var(--flow-zebra-bg-alt)}.timeline--rich .timeline__point-wrap{align-items:center;display:flex;flex-direction:column;flex-shrink:0;gap:var(--flow-gap-xs)}.timeline--rich .timeline__point{height:var(--flow-timeline-point-md);width:var(--flow-timeline-point-md)}.timeline--rich .timeline__line{background-color:var(--color-border-subtle);border-radius:var(--radius-sm);flex:1;width:var(--border-width-strong)}.timeline--rich .timeline__item:last-child .timeline__line{display:none}.timeline-events{display:flex;flex-direction:column;gap:var(--space-4)}.timeline-events .timeline__item{align-items:flex-start;gap:var(--space-4)}.timeline__timestamp{color:var(--color-text-soft);font-size:var(--text-xxs)}.timeline__meta{color:var(--color-text-muted);font-size:var(--text-xs)}.timeline__body{color:var(--color-text);font-size:var(--text-sm);margin-top:var(--flow-gap-xs)}.timeline--audit .timeline__label{font-size:var(--text-xs);letter-spacing:.05em;text-transform:uppercase}.timeline--audit .timeline__body{font-size:var(--text-xs)}.journey{display:flex;flex-wrap:wrap;gap:var(--flow-gap-lg)}.journey--compact{gap:var(--flow-gap-md)}.journey__stage{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;flex:1 1 var(--flow-stage-min-width);flex-direction:column;gap:var(--flow-gap-sm);min-width:var(--flow-stage-min-width);padding:var(--flow-inset-md)}.journey__stage--clickable{cursor:pointer}.journey__stage--clickable:hover{border-color:var(--color-accent)}.journey__stage--clickable:active{opacity:.96;transform:translateY(1px)}.journey__stage--disabled{opacity:var(--flow-component-disabled-opacity);pointer-events:none}.journey__stage--active{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--color-accent);color:var(--accent-soft-on,var(--color-on-accent))}.journey__stage--complete,.journey__stage--success{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--color-success);color:var(--success-soft-on,var(--color-on-success))}.journey__stage--error{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--color-danger);color:var(--danger-soft-on,var(--color-on-danger))}.journey__stage--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--color-warning);color:var(--warning-soft-on,var(--color-on-warning))}.journey__stage--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--color-info);color:var(--info-soft-on,var(--color-on-info))}.journey__icon{color:var(--color-icon-muted);height:var(--flow-icon-size-lg);width:var(--flow-icon-size-lg)}.journey__marker{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase}.journey__title{font-size:var(--text-md);font-weight:600}.journey__details{color:var(--color-text-muted);font-size:var(--text-sm)}.process-flow{align-items:center;display:flex;flex-wrap:wrap;gap:var(--flow-gap-md)}.process-flow--compact{gap:var(--flow-gap-sm)}.process-flow__node{align-items:center;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;flex-direction:column;font-size:var(--text-sm);gap:var(--flow-gap-xs);min-width:var(--flow-node-min-width);padding:var(--flow-inset-sm) var(--flow-inset-md);text-align:center}.process-flow__node--clickable{cursor:pointer}.process-flow__node--clickable:hover{border-color:var(--color-accent)}.process-flow__node--clickable:active{opacity:.96;transform:translateY(1px)}.process-flow__node--disabled{opacity:var(--flow-component-disabled-opacity);pointer-events:none}.process-flow__node--active{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--color-accent);color:var(--accent-soft-on,var(--color-on-accent))}.process-flow__node--complete,.process-flow__node--success{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--color-success);color:var(--success-soft-on,var(--color-on-success))}.process-flow__node--error{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--color-danger);color:var(--danger-soft-on,var(--color-on-danger))}.process-flow__node--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--color-warning);color:var(--warning-soft-on,var(--color-on-warning))}.process-flow__node--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--color-info);color:var(--info-soft-on,var(--color-on-info))}.process-flow__icon{color:var(--color-icon-muted);flex-shrink:0;height:var(--flow-icon-size-md);margin-bottom:0;width:var(--flow-icon-size-md)}.process-flow__arrow{background-color:var(--color-border-subtle);flex-shrink:0;height:var(--border-width);width:var(--space-6)}.process-flow__arrow--error{background-color:var(--color-danger)}.process-flow__arrow--warning{background-color:var(--color-warning)}.process-flow--vertical{align-items:flex-start;flex-direction:column}.process-flow--vertical .process-flow__arrow{height:var(--space-6);margin-left:calc(var(--flow-node-min-width)/2 - var(--border-width)/2);width:var(--border-width)}.state-flow{align-items:center;display:inline-flex;flex-wrap:wrap;gap:var(--flow-gap-sm)}.state-flow__item{background-color:var(--color-surface-subtle);border:var(--border-width) solid var(--color-border-subtle);border-radius:999px;color:var(--color-text-muted);font-size:var(--text-xs);padding:var(--flow-inset-xs) var(--flow-inset-sm)}.state-flow__item--active{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--color-accent);color:var(--accent-soft-on,var(--color-on-accent))}.state-flow__item--complete{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--color-success);color:var(--success-soft-on,var(--color-on-success))}.state-flow__item--error{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--color-danger);color:var(--danger-soft-on,var(--color-on-danger))}.state-flow__item--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--color-warning);color:var(--warning-soft-on,var(--color-on-warning))}.state-flow__item--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--color-accent);color:var(--info-soft-on,var(--color-on-info))}.form-flow{gap:var(--flow-gap-lg);justify-content:center}.form-flow,.form-flow__step{display:flex;flex-direction:column}.form-flow__step{gap:var(--flow-gap-md)}.form-flow__step--error{background-color:var(--color-danger-soft);border-left:var(--border-width-strong) solid var(--color-danger);padding-left:var(--flow-inset-sm)}.form-flow__step--warning{background-color:var(--color-warning-soft);border-left:var(--border-width-strong) solid var(--color-warning);padding-left:var(--flow-inset-sm)}.form-flow__step--success,.form-flow__step--valid{background-color:var(--color-success-soft);border-left:var(--border-width-strong) solid var(--color-success);padding-left:var(--flow-inset-sm)}.form-flow__actions{display:flex;gap:var(--flow-gap-md);justify-content:space-between}.form-flow__actions-right{display:inline-flex;gap:var(--flow-gap-md);margin-left:auto}.flow-branch{grid-gap:var(--flow-gap-lg);display:grid;gap:var(--flow-gap-lg);grid-template-columns:repeat(auto-fit,minmax(var(--flow-grid-min-md),1fr))}.flow-branch__icon{color:var(--color-icon-muted);flex-shrink:0;height:var(--flow-icon-size-md);width:var(--flow-icon-size-md)}.flow-branch__title{color:var(--color-text);font-size:var(--text-md);font-weight:600}.flow-branch__details{color:var(--color-text-muted);font-size:var(--text-sm);line-height:var(--line-height-normal)}.flow-branch--compact{gap:var(--flow-gap-md)}.flow-branch--compact .flow-branch__title{font-size:var(--text-sm)}.flow-branch--compact .flow-branch__details{font-size:var(--text-xs)}.flow-branch__option{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;flex-direction:column;font-size:var(--text-sm);gap:var(--flow-gap-sm);padding:var(--flow-inset-md)}.flow-branch__option--clickable{cursor:pointer}.flow-branch__option--clickable:hover{border-color:var(--color-accent)}.flow-branch__option--clickable:active{opacity:.96;transform:translateY(1px)}.flow-branch__option--disabled{opacity:var(--flow-component-disabled-opacity);pointer-events:none}.flow-branch__option--active{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--color-accent);color:var(--accent-soft-on,var(--color-on-accent))}.flow-branch__option--complete,.flow-branch__option--success{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--color-success);color:var(--success-soft-on,var(--color-on-success))}.flow-branch__option--error{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--color-danger);color:var(--danger-soft-on,var(--color-on-danger))}.flow-branch__option--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--color-warning);color:var(--warning-soft-on,var(--color-on-warning))}.flow-branch__option--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--color-info);color:var(--info-soft-on,var(--color-on-info))}.flow-branch__arrow{background-color:var(--color-border-subtle);flex-shrink:0;height:var(--border-width);margin-left:auto;margin-right:auto;width:var(--space-6)}.flow-branch__arrow--error{background-color:var(--color-danger)}.flow-branch__arrow--warning{background-color:var(--color-warning)}@media (max-width:768px){.steps{flex-wrap:wrap}.process-flow{align-items:flex-start;flex-direction:column}.process-flow__arrow{height:var(--space-4);width:var(--border-width)}.journey{flex-direction:column}.journey__stage{width:100%}}