/* Reusable five-stage onboarding progress indicator. */
.ui-v2 .onboarding-progress-bar {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-v2 .onboarding-progress-segment {
  flex: 0 0 40px;
  width: 40px;
  height: 6px;
  border-radius: 999px;
  background-color: var(--color-onboarding-progress-inactive);
}

.ui-v2 .onboarding-progress-segment[aria-current="step"],
.ui-v2 .onboarding-progress-segment[data-state="complete"],
.ui-v2 .onboarding-progress-segment.is-complete {
  background-color: var(--color-onboarding-black);
}

/* Account Type keeps its approved ink; the remaining stages share normalized ink. */
.ui-v2 [data-onboarding-progress] .onboarding-progress-segment[aria-current="step"],
.ui-v2 [data-onboarding-progress] .onboarding-progress-segment[data-state="complete"] {
  background-color: var(--color-onboarding-ink);
}

@media (width < 640px) {
  .ui-v2 .onboarding-progress-bar {
    gap: 8px;
  }

  .ui-v2 .onboarding-progress-segment {
    flex-basis: 24px;
    width: 24px;
  }

  .ui-v2 [data-onboarding-progress] .onboarding-progress-segment {
    height: 4px;
  }
}