@layer design-system.components{.vds-stepper{--stepper-gap:var(--vds-space-4,1rem);--stepper-horizontal-item-min:8.5rem;--stepper-step-gap:var(--vds-space-3,.75rem);--stepper-content-gap:var(--vds-space-1,.25rem);--stepper-content-offset:var(--vds-space-2,.5rem);--stepper-content-padding:var(--vds-space-3,.75rem);--stepper-indicator-size:2rem;--stepper-indicator-icon-size:1rem;--stepper-indicator-radius:var(--vds-radius-full,9999px);--stepper-indicator-border-width:1px;--stepper-indicator-font:var(--vds-text-sm,.875rem);--stepper-indicator-weight:var(--vds-font-weight-semibold,600);--stepper-ring-size:4px;--stepper-connector-size:3px;--stepper-connector-radius:var(--vds-radius-full,9999px);--stepper-connector-gap:var(--vds-space-2,.5rem);--stepper-connector-min-block:var(--vds-space-10,2.5rem);--stepper-connector-color:var(--vds-color-border-muted,#d1d5db);--stepper-connector-complete:var(--stepper-tone-solid);--stepper-tone-bg-subtle:var(--vds-color-primary-bg-subtle,#eef2ff);--stepper-tone-bg:var(--vds-color-primary-bg,#e0e7ff);--stepper-tone-bg-hover:var(--vds-color-primary-bg-hover,#c7d2fe);--stepper-tone-border:var(--vds-color-border-primary,#a5b4fc);--stepper-tone-border-strong:var(--vds-color-border-primary-strong,#4f46e5);--stepper-tone-solid:var(--vds-color-primary-solid,#4f46e5);--stepper-tone-text:var(--vds-color-primary-text,#3730a3);--stepper-tone-on:var(--vds-color-on-primary,#fff);--stepper-tone-ring:color-mix(in oklab, var(--stepper-tone-solid) 18%, transparent);--stepper-pending-bg:var(--vds-color-surface,#fff);--stepper-pending-text:var(--vds-color-text-subtle,#6b7280);--stepper-pending-border:var(--vds-color-border-muted,#e5e7eb);--stepper-pending-shadow:var(--vds-shadow-xs,0 1px 2px #0000000d);--stepper-active-bg:var(--stepper-tone-solid);--stepper-active-text:var(--stepper-tone-on);--stepper-active-border:var(--stepper-tone-solid);--stepper-active-ring:var(--stepper-tone-ring);--stepper-active-shadow:0 10px 22px -14px var(--stepper-tone-solid);--stepper-complete-bg:var(--stepper-tone-solid);--stepper-complete-text:var(--stepper-tone-on);--stepper-complete-border:var(--stepper-tone-solid);--stepper-complete-shadow:var(--vds-shadow-xs,0 1px 2px #0000000d);--stepper-error-bg:var(--vds-color-danger-solid,#ef4444);--stepper-error-text:var(--vds-color-on-danger,#fff);--stepper-error-border:var(--vds-color-danger-solid,#ef4444);--stepper-error-ring:color-mix(in oklab, var(--vds-color-danger-solid,#ef4444) 18%, transparent);--stepper-card-bg:var(--vds-surface-bg,var(--vds-color-surface,#fff));--stepper-card-bg-hover:var(--vds-color-surface-hover,#f3f4f6);--stepper-card-border:var(--vds-color-border-muted,#e5e7eb);--stepper-card-radius:var(--vds-radius-card,.75rem);--stepper-card-shadow:var(--vds-surface-shadow,var(--vds-shadow-xs,0 1px 2px #0000000d));--stepper-label-size:var(--vds-text-sm,.875rem);--stepper-label-weight:var(--vds-font-weight-semibold,600);--stepper-label-color:var(--vds-color-text,currentColor);--stepper-desc-size:var(--vds-text-xs,.75rem);--stepper-desc-color:var(--vds-color-text-muted,#6b7280);--stepper-transition:var(--vds-transition-base,.2s ease-out);--stepper-transition-spring:var(--vds-transition-spring,.3s cubic-bezier(.22, 1.2, .36, 1));--stepper-entrance-duration:var(--vds-duration-slow,.3s);--stepper-stagger:42ms}.vds-stepper[data-tone=neutral]{--stepper-tone-bg-subtle:var(--vds-color-bg-subtle,#f9fafb);--stepper-tone-bg:var(--vds-color-bg-muted,#f3f4f6);--stepper-tone-bg-hover:var(--vds-color-surface-hover,#f3f4f6);--stepper-tone-border:var(--vds-color-border,#d1d5db);--stepper-tone-border-strong:var(--vds-color-border-strong,#9ca3af);--stepper-tone-solid:var(--vds-color-bg-inverse,#111827);--stepper-tone-text:var(--vds-color-text,#111827);--stepper-tone-on:var(--vds-color-text-inverse,#fff)}.vds-stepper[data-tone=success]{--stepper-tone-bg-subtle:var(--vds-color-success-bg-subtle,#f0fdf4);--stepper-tone-bg:var(--vds-color-success-bg,#dcfce7);--stepper-tone-bg-hover:var(--vds-color-success-bg-hover,#bbf7d0);--stepper-tone-border:var(--vds-color-border-success,#86efac);--stepper-tone-border-strong:var(--vds-color-border-success-strong,#22c55e);--stepper-tone-solid:var(--vds-color-success-solid,#22c55e);--stepper-tone-text:var(--vds-color-success-text,#166534);--stepper-tone-on:var(--vds-color-on-success,#fff)}.vds-stepper[data-tone=warning]{--stepper-tone-bg-subtle:var(--vds-color-warning-bg-subtle,#fffbeb);--stepper-tone-bg:var(--vds-color-warning-bg,#fef3c7);--stepper-tone-bg-hover:var(--vds-color-warning-bg-hover,#fde68a);--stepper-tone-border:var(--vds-color-border-warning,#fbbf24);--stepper-tone-border-strong:var(--vds-color-border-warning-strong,#f59e0b);--stepper-tone-solid:var(--vds-color-warning-solid,#f59e0b);--stepper-tone-text:var(--vds-color-warning-text,#92400e);--stepper-tone-on:var(--vds-color-on-warning,#111827)}.vds-stepper[data-tone=danger]{--stepper-tone-bg-subtle:var(--vds-color-danger-bg-subtle,#fef2f2);--stepper-tone-bg:var(--vds-color-danger-bg,#fee2e2);--stepper-tone-bg-hover:var(--vds-color-danger-bg-hover,#fecaca);--stepper-tone-border:var(--vds-color-border-danger,#fca5a5);--stepper-tone-border-strong:var(--vds-color-border-danger-strong,#ef4444);--stepper-tone-solid:var(--vds-color-danger-solid,#ef4444);--stepper-tone-text:var(--vds-color-danger-text,#991b1b);--stepper-tone-on:var(--vds-color-on-danger,#fff)}.vds-stepper[data-tone=info]{--stepper-tone-bg-subtle:var(--vds-color-info-bg-subtle,#eff6ff);--stepper-tone-bg:var(--vds-color-info-bg,#dbeafe);--stepper-tone-bg-hover:var(--vds-color-info-bg-hover,#bfdbfe);--stepper-tone-border:var(--vds-color-border-info,#93c5fd);--stepper-tone-border-strong:var(--vds-color-border-info-strong,#3b82f6);--stepper-tone-solid:var(--vds-color-info-solid,#3b82f6);--stepper-tone-text:var(--vds-color-info-text,#1d4ed8);--stepper-tone-on:var(--vds-color-on-info,#fff)}.vds-stepper[data-tone=accent]{--stepper-tone-bg-subtle:var(--vds-color-accent-bg-subtle,#f5f3ff);--stepper-tone-bg:var(--vds-color-accent-bg,#ede9fe);--stepper-tone-bg-hover:var(--vds-color-accent-bg-hover,#ddd6fe);--stepper-tone-border:var(--vds-color-border-accent,#c4b5fd);--stepper-tone-border-strong:var(--vds-color-border-accent-strong,#8b5cf6);--stepper-tone-solid:var(--vds-color-accent-solid,#8b5cf6);--stepper-tone-text:var(--vds-color-accent-text,#6d28d9);--stepper-tone-on:var(--vds-color-on-accent,#fff)}.vds-stepper[data-variant=soft]{--stepper-pending-bg:var(--vds-color-bg-subtle,#f9fafb);--stepper-pending-border:transparent;--stepper-pending-shadow:none;--stepper-active-bg:var(--stepper-tone-bg);--stepper-active-text:var(--stepper-tone-text);--stepper-active-border:var(--stepper-tone-border);--stepper-active-shadow:none;--stepper-complete-bg:var(--stepper-tone-bg);--stepper-complete-text:var(--stepper-tone-text);--stepper-complete-border:var(--stepper-tone-border);--stepper-complete-shadow:none}.vds-stepper[data-variant=outlined]{--stepper-pending-bg:transparent;--stepper-pending-shadow:none;--stepper-active-bg:var(--vds-color-surface,#fff);--stepper-active-text:var(--stepper-tone-text);--stepper-active-border:var(--stepper-tone-solid);--stepper-complete-bg:var(--vds-color-surface,#fff);--stepper-complete-text:var(--stepper-tone-text);--stepper-complete-border:var(--stepper-tone-solid);--stepper-complete-shadow:none}.vds-stepper[data-variant=minimal]{--stepper-gap:var(--vds-space-3,.75rem);--stepper-content-offset:var(--vds-space-1-5,.375rem);--stepper-connector-size:2px;--stepper-pending-bg:transparent;--stepper-pending-border:var(--vds-color-border-muted,#e5e7eb);--stepper-pending-shadow:none;--stepper-active-shadow:none;--stepper-complete-shadow:none}.vds-stepper[data-variant=cards]{--stepper-content-gap:var(--vds-space-1-5,.375rem);--stepper-content-padding:var(--vds-space-4,1rem);--stepper-gap:var(--vds-space-5,1.25rem)}.vds-stepper[data-size=sm]{--stepper-horizontal-item-min:5rem;--stepper-indicator-size:1.625rem;--stepper-indicator-icon-size:.8125rem;--stepper-indicator-font:var(--vds-text-xs,.75rem);--stepper-connector-size:2px;--stepper-label-size:var(--vds-text-xs,.75rem);--stepper-desc-size:.6875rem}.vds-stepper[data-size=lg]{--stepper-horizontal-item-min:10rem;--stepper-indicator-size:2.5rem;--stepper-indicator-icon-size:1.25rem;--stepper-indicator-font:var(--vds-text-base,1rem);--stepper-step-gap:var(--vds-space-4,1rem);--stepper-label-size:var(--vds-text-base,1rem);--stepper-desc-size:var(--vds-text-sm,.875rem)}}
@layer design-system.components{.vds-stepper{box-sizing:border-box;inline-size:100%;min-inline-size:0;max-inline-size:100%;color:var(--stepper-label-color);margin:0;padding:0;list-style:none}.vds-stepper *,.vds-stepper :before,.vds-stepper :after{box-sizing:border-box}.vds-stepper[data-orientation=horizontal]{grid-auto-columns:minmax(var(--stepper-horizontal-item-min), 1fr);gap:var(--stepper-gap);overscroll-behavior-inline:contain;padding-block:var(--stepper-ring-size) var(--vds-space-2,.5rem);scroll-snap-type:inline proximity;scrollbar-width:thin;grid-auto-flow:column;align-items:start;display:grid;overflow-x:auto}.vds-stepper[data-orientation=vertical]{flex-direction:column;display:flex}.vds-stepper-step{--_stepper-indicator-bg:var(--stepper-pending-bg);--_stepper-indicator-color:var(--stepper-pending-text);--_stepper-indicator-border:var(--stepper-pending-border);--_stepper-indicator-shadow:var(--stepper-pending-shadow);--_stepper-label-color:var(--stepper-label-color);--_stepper-connector-fill:var(--stepper-connector-complete);--_stepper-connector-progress:0;min-inline-size:0;max-inline-size:100%;position:relative}.vds-stepper-step[data-status=active]{--_stepper-indicator-bg:var(--stepper-active-bg);--_stepper-indicator-color:var(--stepper-active-text);--_stepper-indicator-border:var(--stepper-active-border);--_stepper-indicator-shadow:0 0 0 var(--stepper-ring-size) var(--stepper-active-ring), var(--stepper-active-shadow);--_stepper-label-color:var(--stepper-tone-text)}.vds-stepper-step[data-status=complete]{--_stepper-indicator-bg:var(--stepper-complete-bg);--_stepper-indicator-color:var(--stepper-complete-text);--_stepper-indicator-border:var(--stepper-complete-border);--_stepper-indicator-shadow:var(--stepper-complete-shadow);--_stepper-label-color:var(--stepper-label-color);--_stepper-connector-progress:1}.vds-stepper-step[data-status=error]{--_stepper-indicator-bg:var(--stepper-error-bg);--_stepper-indicator-color:var(--stepper-error-text);--_stepper-indicator-border:var(--stepper-error-border);--_stepper-indicator-shadow:0 0 0 var(--stepper-ring-size) var(--stepper-error-ring);--_stepper-label-color:var(--vds-color-danger-text,#991b1b);--_stepper-connector-fill:var(--stepper-error-bg);--_stepper-connector-progress:1}.vds-stepper[data-orientation=horizontal] .vds-stepper-step{grid-template-rows:var(--stepper-indicator-size) auto;min-inline-size:var(--stepper-horizontal-item-min);scroll-snap-align:start;justify-items:center;display:grid}.vds-stepper[data-orientation=vertical] .vds-stepper-step{grid-template-columns:var(--stepper-indicator-size) minmax(0, 1fr);grid-template-rows:auto minmax(var(--stepper-connector-min-block), 1fr);column-gap:var(--stepper-step-gap);display:grid}.vds-stepper-header{align-items:center;min-inline-size:0;display:flex}.vds-stepper[data-orientation=horizontal] .vds-stepper-header{grid-area:1/1;justify-content:center;inline-size:100%}.vds-stepper[data-orientation=vertical] .vds-stepper-header{flex-direction:column;grid-area:1/1/3;align-items:center}.vds-stepper-indicator{z-index:1;inline-size:var(--stepper-indicator-size);block-size:var(--stepper-indicator-size);border:var(--stepper-indicator-border-width) solid var(--_stepper-indicator-border);border-radius:var(--stepper-indicator-radius);background-color:var(--_stepper-indicator-bg);color:var(--_stepper-indicator-color);box-shadow:var(--_stepper-indicator-shadow);font-size:var(--stepper-indicator-font);font-weight:var(--stepper-indicator-weight);transition:background-color var(--stepper-transition), border-color var(--stepper-transition), color var(--stepper-transition), box-shadow var(--stepper-transition), transform var(--stepper-transition-spring);flex:none;justify-content:center;align-items:center;line-height:1;display:inline-flex;position:relative;transform:translateZ(0)}.vds-stepper-indicator>svg{inline-size:var(--stepper-indicator-icon-size);block-size:var(--stepper-indicator-icon-size);flex:none}.vds-stepper-indicator:after{content:"";inset:calc(-1 * var(--stepper-ring-size));z-index:-1;border-radius:inherit;background:var(--stepper-active-ring);opacity:0;position:absolute;scale:.86}.vds-stepper-connector{border-radius:var(--stepper-connector-radius);background-color:var(--stepper-connector-color);transition:background-color var(--stepper-transition);flex:auto;position:relative;overflow:hidden}.vds-stepper-connector:before{content:"";border-radius:inherit;background:var(--_stepper-connector-fill);transform:scaleX(var(--_stepper-connector-progress));transform-origin:0;transition:background var(--stepper-transition), transform var(--stepper-transition-spring);position:absolute;inset:0}:where([dir=rtl]) .vds-stepper[data-orientation=horizontal] .vds-stepper-connector:before{transform-origin:100%}.vds-stepper[data-orientation=horizontal] .vds-stepper-connector{block-size:var(--stepper-connector-size);position:absolute;inset-block-start:calc((var(--stepper-indicator-size) - var(--stepper-connector-size)) / 2);inset-inline-start:calc(50% + (var(--stepper-indicator-size) / 2) + var(--stepper-connector-gap));inset-inline-end:calc(-50% - var(--stepper-gap) + (var(--stepper-indicator-size) / 2) + var(--stepper-connector-gap))}.vds-stepper[data-orientation=vertical] .vds-stepper-connector{inline-size:var(--stepper-connector-size);min-block-size:var(--stepper-connector-min-block);margin-block:var(--stepper-connector-gap) 0}.vds-stepper[data-orientation=vertical] .vds-stepper-connector:before{transform:scaleY(var(--_stepper-connector-progress));transform-origin:top}.vds-stepper[data-line=dashed] .vds-stepper-connector,.vds-stepper[data-line=dashed] .vds-stepper-connector:before{color:inherit;background:repeating-linear-gradient(90deg,currentColor 0 .375rem,#0000 .375rem .625rem)}.vds-stepper[data-line=dashed] .vds-stepper-connector{color:var(--stepper-connector-color)}.vds-stepper[data-line=dashed] .vds-stepper-connector:before{color:var(--_stepper-connector-fill)}.vds-stepper[data-orientation=vertical][data-line=dashed] .vds-stepper-connector,.vds-stepper[data-orientation=vertical][data-line=dashed] .vds-stepper-connector:before{background:repeating-linear-gradient(currentColor 0 .375rem,#0000 .375rem .625rem)}.vds-stepper[data-line=gradient] .vds-stepper-connector:before{background:linear-gradient(90deg, var(--stepper-tone-solid), var(--vds-color-accent-solid,var(--stepper-tone-solid)))}.vds-stepper-content{gap:var(--stepper-content-gap);min-inline-size:0;max-inline-size:100%;color:var(--stepper-desc-color);transition:background-color var(--stepper-transition), border-color var(--stepper-transition), box-shadow var(--stepper-transition), color var(--stepper-transition), transform var(--stepper-transition);flex-direction:column;display:flex}.vds-stepper[data-orientation=horizontal] .vds-stepper-content{inline-size:100%;text-align:center;grid-area:2/1;align-items:center;padding-block-start:var(--stepper-content-offset)}.vds-stepper[data-orientation=vertical] .vds-stepper-content{grid-area:1/2/3;padding-block-end:var(--vds-space-6,1.5rem)}.vds-stepper-label{max-inline-size:100%;color:var(--_stepper-label-color);font-size:var(--stepper-label-size);font-weight:var(--stepper-label-weight);line-height:var(--vds-leading-snug,1.375);overflow-wrap:anywhere;transition:color var(--stepper-transition)}.vds-stepper-step[data-status=pending] .vds-stepper-label{color:var(--stepper-desc-color)}.vds-stepper-description{max-inline-size:100%;color:var(--stepper-desc-color);font-size:var(--stepper-desc-size);line-height:var(--vds-leading-normal,1.5);overflow-wrap:anywhere}.vds-stepper[data-variant=cards] .vds-stepper-content{inline-size:100%;padding:var(--stepper-content-padding);border:1px solid var(--stepper-card-border);border-radius:var(--stepper-card-radius);background-color:var(--stepper-card-bg);box-shadow:var(--stepper-card-shadow)}.vds-stepper[data-variant=cards] .vds-stepper-step[data-status=active] .vds-stepper-content{border-color:var(--stepper-tone-border);background-color:var(--stepper-tone-bg-subtle)}.vds-stepper[data-variant=cards] .vds-stepper-step[data-status=complete] .vds-stepper-content{border-color:color-mix(in oklab, var(--stepper-tone-border) 72%, var(--stepper-card-border))}.vds-stepper[data-variant=minimal] .vds-stepper-content{gap:var(--vds-space-0-5,.125rem)}.vds-stepper[data-variant=minimal] .vds-stepper-indicator{box-shadow:none}.vds-stepper[data-animation=fade] .vds-stepper-step,.vds-stepper[data-animation=slide] .vds-stepper-step,.vds-stepper[data-animation=scale] .vds-stepper-step,.vds-stepper[data-animation=pulse] .vds-stepper-step{animation-duration:var(--stepper-entrance-duration);animation-fill-mode:both;animation-timing-function:var(--vds-ease-out,ease-out);animation-delay:var(--stepper-step-delay,0s)}.vds-stepper[data-animation=fade] .vds-stepper-step{animation-name:vds-stepper-fade-in}.vds-stepper[data-animation=slide] .vds-stepper-step,.vds-stepper[data-animation=pulse] .vds-stepper-step{animation-name:vds-stepper-slide-in}.vds-stepper[data-animation=scale] .vds-stepper-step{animation-name:vds-stepper-scale-in;animation-timing-function:var(--vds-ease-spring,cubic-bezier(.22, 1.2, .36, 1))}.vds-stepper[data-animation=scale] .vds-stepper-step[data-status=active] .vds-stepper-indicator,.vds-stepper[data-animation=pulse] .vds-stepper-step[data-status=active] .vds-stepper-indicator{animation:vds-stepper-indicator-pop var(--stepper-entrance-duration) var(--vds-ease-spring,ease-out) both}.vds-stepper[data-animation=pulse] .vds-stepper-step[data-status=active] .vds-stepper-indicator:after{animation:vds-stepper-pulse 1.8s var(--vds-ease-out,ease-out) infinite}@media (hover:hover){.vds-stepper-step:hover .vds-stepper-indicator{transform:translateY(-1px)scale(1.03)}.vds-stepper[data-variant=cards] .vds-stepper-step:hover .vds-stepper-content{background-color:var(--stepper-card-bg-hover);border-color:var(--stepper-tone-border)}}@media (max-width:720px){.vds-stepper[data-orientation=horizontal]{grid-auto-columns:minmax(9rem,72vw)}}@media (prefers-reduced-motion:reduce){.vds-stepper *,.vds-stepper :before,.vds-stepper :after{transition-duration:0s!important;animation:none!important}}@keyframes vds-stepper-fade-in{0%{opacity:0}to{opacity:1}}@keyframes vds-stepper-slide-in{0%{opacity:0;transform:translateY(.375rem)}to{opacity:1;transform:translateY(0)}}@keyframes vds-stepper-scale-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes vds-stepper-indicator-pop{0%{transform:scale(.82)}to{transform:scale(1)}}@keyframes vds-stepper-pulse{0%{opacity:.42;scale:.86}70%{opacity:0;scale:1.55}to{opacity:0;scale:1.55}}}