/* =============================================================
   Design System — shared wizard step indicator
   Loaded globally (design layer) so no wizard template can render
   it unstyled; the step list is resolved in Python (wizard_steps_for)
   and never reconstructed here. No inline styles, no color literals.
   ============================================================= */

.wizard-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0 0 var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-dark-1);
  border: 1px solid var(--line-dark-1);
  border-radius: var(--r-lg);
}

.wizard-step {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--ink-invert-3);
}

.wizard-step:not(:last-child)::after {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--line-dark-2);
}

.wizard-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: 700;
  background: var(--surface-dark-2);
  color: var(--ink-invert-3);
}

.wizard-step--done {
  color: var(--ink-invert-2);
}

.wizard-step--done .wizard-step-index {
  background: var(--brand-emerald);
  color: var(--surface-dark-0);
}

.wizard-step--current {
  color: var(--ink-invert-1);
}

.wizard-step--current .wizard-step-index {
  background: var(--brand-lime);
  color: var(--surface-dark-0);
}

@media (max-width: 992px) {
  .wizard-steps {
    gap: var(--s-1);
    padding: var(--s-2);
  }

  .wizard-step {
    font-size: var(--fs-12);
    padding: var(--s-1);
  }

  .wizard-step:not(:last-child)::after {
    width: 8px;
  }
}