@24vlh/vds 0.1.0 → 0.1.1

package/dist/components/flows.css

@@ -1,1101 +1 @@
-/************************************************************
- * VLAH DESIGN SYSTEM (VDS) - Flows & Timelines
- *
- *  Responsibilities:
- *    - Provide multi-step flow architecture: horizontal/vertical steps,
- *      state transitions, process nodes, journeys, branching flows,
- *      form-flow scaffolding, and rich timelines
- *    - Implement progress bars (solid, striped, reversed, segmented)
- *      with CSS-only animation and semantic variants
- *    - Expose interaction patterns: clickable, disabled, upcoming,
- *      error/success/warning/info states, density modes, and icon variants
- *    - Deliver layout scaffolding for complex journeys and workflows,
- *      ensuring predictable spacing, sizing, and semantic signalling
- *
- *  System Notes:
- *    - Fully token-driven: flow gaps, insets, radii, bullet sizes,
- *      timeline points, stripe sizes, and animation speeds
- *    - 100% CSS; reduced-motion fallbacks defined for animated stripes
- *    - Composable: integrates with cards, content blocks, utilities,
- *      and documentation previews without overrides
- ************************************************************/
-
-/* ---------------------------------------------------------
-   1. FLOW TOKEN DEFINITIONS
---------------------------------------------------------- */
-
-[data-vds-flow],
-.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;
-}
-
-/* ---------------------------------------------------------
-   2. GLOBAL FLOW MODIFIERS
---------------------------------------------------------- */
-
-.flow--compact .flow {
-    gap: var(--flow-gap-lg);
-}
-
-.flow--compact .flow__body {
-    gap: var(--flow-gap-md);
-}
-
-.flow--compact .steps {
-    gap: var(--flow-gap-sm);
-}
-
-.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);
-}
-
-.journey__stage--upcoming,
-.process-flow__node--upcoming,
-.flow-branch__option--upcoming,
-.state-flow__item--upcoming {
-    border-color: var(--color-border-subtle);
-    background-color: var(--color-surface-subtle);
-    color: var(--color-text-muted);
-}
-
-.steps__item:focus-visible,
-.steps__item--clickable:focus-visible,
-.journey__stage--clickable:focus-visible,
-.process-flow__node--clickable:focus-visible,
-.flow-branch__option--clickable: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"] {
-    opacity: var(--flow-component-disabled-opacity);
-    cursor: not-allowed;
-}
-
-.journey__stage--disabled,
-.journey__stage[aria-disabled="true"],
-.process-flow__node--disabled,
-.process-flow__node[aria-disabled="true"],
-.flow-branch__option--disabled,
-.flow-branch__option[aria-disabled="true"] {
-    opacity: var(--flow-component-disabled-opacity);
-    pointer-events: none;
-}
-
-/* ---------------------------------------------------------
-   3. FLOW CONTAINER / WIZARD
---------------------------------------------------------- */
-
-.flow {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-8);
-}
-
-.flow__header {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-}
-
-.flow__title {
-    font-size: var(--text-lg);
-    font-weight: 600;
-}
-
-.flow__subtitle {
-    font-size: var(--text-sm);
-    color: var(--color-text-muted);
-}
-
-.flow__body {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-6);
-}
-
-.flow__nav {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--space-4);
-}
-
-/* ---------------------------------------------------------
-   4. STEP INDICATOR (HORIZONTAL)
---------------------------------------------------------- */
-
-.steps {
-    display: flex;
-    align-items: center;
-    gap: var(--space-4);
-}
-
-.steps__item {
-    display: flex;
-    align-items: center;
-    gap: var(--flow-gap-sm);
-    font-size: var(--text-xs);
-    color: var(--color-text-muted);
-}
-
-.steps__item--clickable {
-    cursor: pointer;
-}
-
-.steps__item--clickable:hover .steps__label {
-    color: var(--color-text);
-}
-
-.steps__item--clickable:active {
-    transform: translateY(1px);
-    opacity: 0.95;
-}
-
-.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 {
-    width: var(--flow-step-bullet-md);
-    height: var(--flow-step-bullet-md);
-    border-radius: 999px;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    border: var(--border-width) solid var(--color-border-subtle);
-    background-color: var(--color-surface-subtle);
-    color: var(--color-text-muted);
-
-    font-size: var(--text-xxs);
-    flex-shrink: 0;
-}
-
-.steps__label {
-    white-space: nowrap;
-}
-
-.steps__line {
-    flex: 1;
-    height: var(--border-width);
-    background-color: var(--color-border-subtle);
-}
-
-.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: 0.7;
-}
-
-.steps__item--active,
-.steps__item--complete {
-    color: var(--color-text);
-}
-
-.steps--a .steps__bullet {
-    width: var(--flow-step-bullet-lg);
-    height: var(--flow-step-bullet-lg);
-}
-
-.steps--c .steps__bullet {
-    width: var(--flow-step-bullet-sm);
-    height: var(--flow-step-bullet-sm);
-    font-size: var(--text-xxs);
-}
-
-/* ---------------------------------------------------------
-   5. STEP INDICATOR (VERTICAL)
---------------------------------------------------------- */
-
-.steps--vertical {
-    flex-direction: column;
-    align-items: flex-start;
-}
-
-.steps--vertical .steps__item {
-    align-items: flex-start;
-}
-
-.steps--vertical .steps__line {
-    width: var(--border-width);
-    min-height: var(--flow-gap-xl);
-    height: auto;
-    background-color: var(--color-border-subtle);
-    margin-left: calc(var(--flow-step-bullet-md) / 2 - var(--border-width) / 2);
-    flex: auto;
-}
-
-/* ---------------------------------------------------------
-   6. FLOW PROGRESS BARS
---------------------------------------------------------- */
-
-.flow-progress {
-    width: 100%;
-    height: var(--border-width-strong);
-    background-color: var(--color-muted-bg);
-    border-radius: var(--radius-sm);
-    overflow: hidden;
-}
-
-.flow-progress__bar {
-    height: 100%;
-    width: 0;
-    background-color: var(--color-muted-bg);
-    transition: width 0.2s ease;
-}
-
-.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--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 {
-    from {
-        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 {
-    from {
-        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 {
-    display: flex;
-    height: var(--border-width-strong);
-    overflow: hidden;
-    border-radius: var(--radius-sm);
-}
-
-.flow-progress__segment {
-    flex: 1;
-    background-color: var(--color-muted-bg);
-}
-
-.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);
-}
-
-/* ---------------------------------------------------------
-   7. MINIMAL TIMELINE (A)
---------------------------------------------------------- */
-
-.timeline {
-    display: flex;
-    flex-direction: column;
-    gap: var(--flow-gap-md);
-}
-
-.timeline__item {
-    display: flex;
-    align-items: stretch;
-    gap: var(--flow-gap-sm);
-}
-
-.timeline__point-wrap {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--flow-gap-xs);
-}
-
-.timeline__point {
-    width: var(--flow-timeline-point-sm);
-    height: var(--flow-timeline-point-sm);
-    border-radius: 999px;
-    border: var(--border-width-strong) solid var(--color-accent);
-    background-color: var(--color-surface);
-    flex-shrink: 0;
-}
-
-.timeline__point--upcoming {
-    border-color: var(--color-border-subtle);
-}
-
-.timeline__point--error {
-    border-color: var(--color-danger);
-    background-color: var(--color-danger-soft);
-}
-
-.timeline__point--warning {
-    border-color: var(--warning-soft-border, var(--color-warning));
-    background-color: var(--warning-soft-surface, var(--color-warning-soft));
-}
-
-.timeline__point--success {
-    border-color: var(--danger-soft-border, var(--color-danger));
-    background-color: var(--danger-soft-surface, var(--color-danger-soft));
-}
-
-.timeline__point--info {
-    border-color: var(--info-soft-border, var(--color-info));
-    background-color: var(--info-soft-surface, var(--color-info-soft));
-}
-
-.timeline__icon {
-    width: var(--flow-icon-size-md);
-    height: var(--flow-icon-size-md);
-    color: var(--color-icon-muted);
-}
-
-.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 {
-    flex: 1;
-    width: var(--border-width-strong);
-    background-color: var(--color-border-subtle);
-}
-
-.timeline__content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: var(--flow-gap-xs);
-}
-
-.timeline__label {
-    font-size: var(--text-sm);
-    font-weight: 500;
-
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-}
-
-.timeline__note {
-    font-size: var(--text-xs);
-    color: var(--color-text-muted);
-}
-
-.timeline--horizontal {
-    flex-direction: row;
-    align-items: flex-start;
-}
-
-.timeline--horizontal .timeline__item {
-    flex-direction: column;
-    align-items: center;
-}
-
-.timeline--horizontal .timeline__point-wrap {
-    flex-direction: row;
-}
-
-.timeline--horizontal .timeline__line {
-    width: var(--component-gap-xl);
-    height: var(--border-width-strong);
-}
-
-.timeline--compact .timeline__item {
-    gap: var(--flow-gap-xs);
-}
-
-.timeline--compact .timeline__note {
-    font-size: var(--text-xxs);
-}
-
-.timeline--compact .timeline__point {
-    width: var(--flow-timeline-point-xs);
-    height: var(--flow-timeline-point-xs);
-}
-
-.timeline--compact .timeline__icon {
-    width: var(--flow-icon-size-sm);
-    height: var(--flow-icon-size-sm);
-}
-
-/* ---------------------------------------------------------
-   8. RICH TIMELINE (B)
---------------------------------------------------------- */
-
-.timeline--rich {
-    display: flex;
-    flex-direction: column;
-    gap: var(--flow-gap-lg);
-}
-
-.timeline--rich .timeline__item {
-    display: flex;
-    align-items: stretch;
-    gap: var(--flow-gap-md);
-    border-radius: var(--radius-sm);
-    padding: var(--flow-inset-sm);
-    border: var(--border-width) solid var(--color-border-subtle);
-    background-color: var(--flow-zebra-bg-alt);
-}
-
-.timeline--rich .timeline__item:nth-child(even) {
-    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 {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--flow-gap-xs);
-    flex-shrink: 0;
-}
-
-.timeline--rich .timeline__point {
-    width: var(--flow-timeline-point-md);
-    height: var(--flow-timeline-point-md);
-}
-
-.timeline--rich .timeline__line {
-    flex: 1;
-    width: var(--border-width-strong);
-    background-color: var(--color-border-subtle);
-    border-radius: var(--radius-sm);
-}
-
-.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 {
-    font-size: var(--text-xxs);
-    color: var(--color-text-soft);
-}
-
-.timeline__meta {
-    font-size: var(--text-xs);
-    color: var(--color-text-muted);
-}
-
-.timeline__body {
-    font-size: var(--text-sm);
-    color: var(--color-text);
-    margin-top: var(--flow-gap-xs);
-}
-
-.timeline--audit .timeline__label {
-    font-size: var(--text-xs);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-.timeline--audit .timeline__body {
-    font-size: var(--text-xs);
-}
-
-/* ---------------------------------------------------------
-   9. JOURNEY MAP (HIGH-LEVEL FLOWS)
---------------------------------------------------------- */
-
-.journey {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--flow-gap-lg);
-}
-
-.journey--compact {
-    gap: var(--flow-gap-md);
-}
-
-.journey__stage {
-    flex: 1 1 var(--flow-stage-min-width);
-    min-width: var(--flow-stage-min-width);
-
-    display: flex;
-    flex-direction: column;
-    gap: var(--flow-gap-sm);
-
-    padding: var(--flow-inset-md);
-    border-radius: var(--radius-md);
-    border: var(--border-width) solid var(--color-border-subtle);
-    background-color: var(--color-surface);
-}
-
-.journey__stage--clickable {
-    cursor: pointer;
-}
-
-.journey__stage--clickable:hover {
-    border-color: var(--color-accent);
-}
-
-.journey__stage--clickable:active {
-    transform: translateY(1px);
-    opacity: 0.96;
-}
-
-.journey__stage--disabled {
-    opacity: var(--flow-component-disabled-opacity);
-    pointer-events: none;
-}
-
-.journey__stage--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));
-}
-
-.journey__stage--complete,
-.journey__stage--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));
-}
-
-.journey__stage--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));
-}
-
-.journey__stage--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));
-}
-
-.journey__stage--info {
-    border-color: var(--color-accent);
-    background-color: var(--info-soft-surface, var(--color-info-soft));
-    color: var(--info-soft-on, var(--color-on-info));
-}
-
-.journey__icon {
-    width: var(--flow-icon-size-lg);
-    height: var(--flow-icon-size-lg);
-    color: var(--color-icon-muted);
-}
-
-.journey__marker {
-    font-size: var(--text-xs);
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    color: var(--color-text-muted);
-}
-
-.journey__title {
-    font-size: var(--text-md);
-    font-weight: 600;
-}
-
-.journey__details {
-    font-size: var(--text-sm);
-    color: var(--color-text-muted);
-}
-
-/* ---------------------------------------------------------
-   10. PROCESS FLOW (NODE-BASED)
---------------------------------------------------------- */
-
-.process-flow {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--flow-gap-md);
-}
-
-.process-flow--compact {
-    gap: var(--flow-gap-sm);
-}
-
-.process-flow__node {
-    min-width: var(--flow-node-min-width);
-    padding: var(--flow-inset-sm) var(--flow-inset-md);
-    border-radius: var(--radius-md);
-    border: var(--border-width) solid var(--color-border-subtle);
-    background-color: var(--color-surface);
-    font-size: var(--text-sm);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    gap: var(--flow-gap-xs);
-}
-
-.process-flow__node--clickable {
-    cursor: pointer;
-}
-
-.process-flow__node--clickable:hover {
-    border-color: var(--color-accent);
-}
-
-.process-flow__node--clickable:active {
-    transform: translateY(1px);
-    opacity: 0.96;
-}
-
-.process-flow__node--disabled {
-    opacity: var(--flow-component-disabled-opacity);
-    pointer-events: none;
-}
-
-.process-flow__node--active {
-    border-color: var(--color-accent);
-    background-color: var(--accent-soft-surface, var(--color-accent-soft));
-}
-
-.process-flow__node--complete,
-.process-flow__node--success {
-    border-color: var(--color-success);
-    background-color: var(--success-soft-surface, var(--color-success-soft));
-}
-
-.process-flow__node--error {
-    border-color: var(--color-danger);
-    background-color: var(--danger-soft-surface, var(--color-danger-soft));
-}
-
-.process-flow__node--warning {
-    border-color: var(--color-warning);
-    background-color: var(--warning-soft-surface, var(--color-warning-soft));
-}
-
-.process-flow__node--info {
-    border-color: var(--color-accent);
-    background-color: var(--info-soft-surface, var(--color-info-soft));
-}
-
-.process-flow__icon {
-    width: var(--flow-icon-size-md);
-    height: var(--flow-icon-size-md);
-    color: var(--color-icon-muted);
-    margin-bottom: 0;
-    flex-shrink: 0;
-}
-
-.process-flow__arrow {
-    width: var(--space-6);
-    height: var(--border-width);
-    background-color: var(--color-border-subtle);
-    flex-shrink: 0;
-}
-
-.process-flow__arrow--error {
-    background-color: var(--color-danger);
-}
-
-.process-flow__arrow--warning {
-    background-color: var(--color-warning);
-}
-
-.process-flow--vertical {
-    flex-direction: column;
-    align-items: flex-start;
-}
-
-.process-flow--vertical .process-flow__arrow {
-    width: var(--border-width);
-    height: var(--space-6);
-    margin-left: calc(
-            var(--flow-node-min-width) / 2 - var(--border-width) / 2
-    );
-}
-
-/* ---------------------------------------------------------
-   11. STATE FLOW (STATUS STEPS)
---------------------------------------------------------- */
-
-.state-flow {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--flow-gap-sm);
-    flex-wrap: wrap;
-}
-
-.state-flow__item {
-    padding: var(--flow-inset-xs) var(--flow-inset-sm);
-    font-size: var(--text-xs);
-    border-radius: 999px;
-    border: var(--border-width) solid var(--color-border-subtle);
-    background-color: var(--color-surface-subtle);
-    color: var(--color-text-muted);
-}
-
-.state-flow__item--active {
-    border-color: var(--color-accent);
-    color: var(--accent-soft-on, var(--color-on-accent));
-    background-color: var(--accent-soft-surface, var(--color-accent-soft));
-}
-
-.state-flow__item--complete {
-    border-color: var(--color-success);
-    color: var(--success-soft-on, var(--color-on-success));
-    background-color: var(--success-soft-surface, var(--color-success-soft));
-}
-
-.state-flow__item--error {
-    border-color: var(--color-danger);
-    color: var(--danger-soft-on, var(--color-on-danger));
-    background-color: var(--danger-soft-surface, var(--color-danger-soft));
-}
-
-.state-flow__item--warning {
-    border-color: var(--color-warning);
-    color: var(--warning-soft-on, var(--color-on-warning));
-    background-color: var(--warning-soft-surface, var(--color-warning-soft));
-}
-
-.state-flow__item--info {
-    border-color: var(--color-accent);
-    color: var(--info-soft-on, var(--color-on-info));
-    background-color: var(--info-soft-surface, var(--color-info-soft));
-}
-
-/* ---------------------------------------------------------
-   12. MULTI-STEP FORM SCAFFOLDING
---------------------------------------------------------- */
-
-.form-flow {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: var(--flow-gap-lg);
-}
-
-.form-flow__step {
-    display: flex;
-    flex-direction: column;
-    gap: var(--flow-gap-md);
-}
-
-.form-flow__step--error {
-    border-left: var(--border-width-strong) solid var(--color-danger);
-    padding-left: var(--flow-inset-sm);
-    background-color: var(--color-danger-soft);
-}
-
-.form-flow__step--warning {
-    border-left: var(--border-width-strong) solid var(--color-warning);
-    padding-left: var(--flow-inset-sm);
-    background-color: var(--color-warning-soft);
-}
-
-.form-flow__step--valid,
-.form-flow__step--success {
-    border-left: var(--border-width-strong) solid var(--color-success);
-    padding-left: var(--flow-inset-sm);
-    background-color: var(--color-success-soft);
-}
-
-.form-flow__actions {
-    display: flex;
-    justify-content: space-between;
-    gap: var(--flow-gap-md);
-}
-
-.form-flow__actions-right {
-    margin-left: auto;
-    display: inline-flex;
-    gap: var(--flow-gap-md);
-}
-
-/* ---------------------------------------------------------
-   13. BRANCHING FLOW CALLOUTS
---------------------------------------------------------- */
-
-.flow-branch {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(var(--flow-grid-min-md), 1fr));
-    grid-gap: var(--flow-gap-lg);
-    gap: var(--flow-gap-lg);
-}
-
-.flow-branch__icon {
-    width: var(--flow-icon-size-md);
-    height: var(--flow-icon-size-md);
-    color: var(--color-icon-muted);
-    flex-shrink: 0;
-}
-
-.flow-branch__title {
-    font-size: var(--text-md);
-    font-weight: 600;
-    color: var(--color-text);
-}
-
-.flow-branch__details {
-    font-size: var(--text-sm);
-    color: var(--color-text-muted);
-    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 {
-    border-radius: var(--radius-md);
-    border: var(--border-width) solid var(--color-border-subtle);
-    background-color: var(--color-surface);
-    padding: var(--flow-inset-md);
-
-    display: flex;
-    flex-direction: column;
-    gap: var(--flow-gap-sm);
-
-    font-size: var(--text-sm);
-}
-
-.flow-branch__option--clickable {
-    cursor: pointer;
-}
-
-.flow-branch__option--clickable:hover {
-    border-color: var(--color-accent);
-}
-
-.flow-branch__option--clickable:active {
-    transform: translateY(1px);
-    opacity: 0.96;
-}
-
-.flow-branch__option--disabled {
-    opacity: var(--flow-component-disabled-opacity);
-    pointer-events: none;
-}
-
-.flow-branch__option--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));
-}
-
-.flow-branch__option--complete,
-.flow-branch__option--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));
-}
-
-.flow-branch__option--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));
-}
-
-.flow-branch__option--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));
-}
-
-.flow-branch__option--info {
-    border-color: var(--color-accent);
-    background-color: var(--info-soft-surface, var(--color-info-soft));
-    color: var(--info-soft-on, var(--color-on-info));
-}
-
-.flow-branch__arrow {
-    width: var(--space-6);
-    height: var(--border-width);
-    background-color: var(--color-border-subtle);
-    margin-left: auto;
-    margin-right: auto;
-    flex-shrink: 0;
-}
-
-.flow-branch__arrow--error {
-    background-color: var(--color-danger);
-}
-
-.flow-branch__arrow--warning {
-    background-color: var(--color-warning);
-}
-
-/* ---------------------------------------------------------
-   14. RESPONSIVE
---------------------------------------------------------- */
-
-@media (max-width: 768px) {
-
-    .steps {
-        flex-wrap: wrap;
-    }
-
-    .process-flow {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    .process-flow__arrow {
-        width: var(--border-width);
-        height: var(--space-4);
-    }
-
-    .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--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%}}