/* ==========================================================================
   COMPONENTS · STEPPER — a linear step indicator for multi-step flows
   (checkout: Cart › Payment › Confirm). Mono ordinals in keyline discs joined
   by a hairline rail; the path up to the current step is inked, ahead a faint
   hairline. Ink only — the rubric is never spent on wayfinding.
   ========================================================================== */

.op-stepper {
  --num-size: 2.2rem;
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}

.op-stepper__step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  min-inline-size: 0;
  text-align: center;
}

/* The rail arriving from the previous ordinal: it spans from this disc's centre
   back to the one before. Inked once we've reached this step (done/current), a
   faint hairline ahead. The first step carries no rail. */
.op-stepper__step:not(:first-child)::before {
  content: "";
  position: absolute;
  z-index: var(--z-base);
  top: calc(var(--num-size) / 2);
  right: 50%;
  inline-size: 100%;
  block-size: 2px;
  background: var(--rule);
  transform: translateY(-50%);
}
.op-stepper__step[data-state="done"]::before,
.op-stepper__step[data-state="current"]::before { background: var(--rule-strong); }

/* The ordinal disc — base is the muted upcoming ring */
.op-stepper__num {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  place-content: center;
  inline-size: var(--num-size);
  block-size: var(--num-size);
  border: 1px solid var(--rule);
  border-radius: var(--radius-seal);
  background: var(--surface);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-muted);
  transition: var(--transition-ink);
}

/* — done: a solid ink imprint carrying a mono check — */
.op-stepper__step[data-state="done"] .op-stepper__num {
  background: var(--surface-inverse);
  border-color: var(--surface-inverse);
  color: var(--text-inverse);
}

/* — current: an ink keyline ring, lifted a hair off the page — */
.op-stepper__step[data-state="current"] .op-stepper__num {
  border-color: var(--surface-inverse);
  color: var(--text);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-raised);
}

/* The furniture label under each disc */
.op-stepper__label {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  color: var(--text-muted);
}
.op-stepper__step[data-state="done"] .op-stepper__label { color: var(--text-secondary); }
.op-stepper__step[data-state="current"] .op-stepper__label {
  color: var(--text);
  font-weight: var(--weight-semibold);
}

/* An optional mono running-position caption ("Step 02 / 03") */
.op-stepper__count {
  font-family: var(--font-data);
  font-size: var(--text-3xs);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-muted);
}

/* Steps that are links/buttons keep a visible focus ring */
.op-stepper__step :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Narrow: keep the discs + the rail, surface only the current label */
@media (max-width: 40rem) {
  .op-stepper__label { display: none; }
  .op-stepper__step[data-state="current"] .op-stepper__label { display: block; }
}