/* ============================================================================
   Stepper — "Step N of 3" + a progress bar

   The DS has two candidate sets and neither fits as-is:

     · `Step / Anchor` (§18.1, a CLAUDE.md reference implementation) is the
       numbered-node stepper. It draws one node per step with tails between
       them. The ticket asks for a *label plus a bar*, not nodes, so the set
       would have to be misused to get there.
     · `Progress bar / Upload` (§19.2) is the right shape but the wrong
       bindings: track `RAW #f6f6f6` and radius `RAW 2`, and §19 F2 records
       the Slider page as "entirely unbound — Slider will not follow theme".

   So this is §19.2's geometry with real tokens: `#f6f6f6` is the off-palette
   grey §2 F6 also flags (nearest `Neutral/300`), and `soft/neutral/default` is
   the semantic token for a recessed neutral band. The fill is
   `solid/brand/default` with `on-solid/brand` never needed — no ink sits on it.

   §19 F4 notes two progress-bar implementations already exist (here and
   Table). This does not add a third: it is the §19.2 recipe, bound.

   Percentages are fixed by the ticket: 33 / 66 / 90.

   TODO(tokens): every bare px length in this file is a SIZE.
   ========================================================================== */

.stepper {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.stepper__label {
  color: var(--color-content-secondary);
  font-family: var(--font-family-text);
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
  font-weight: var(--font-weight-medium);
}

.stepper__track {
  /* TODO(tokens): size not built. 4px is §19.2's bar height. */
  block-size: 4px;
  background: var(--color-soft-neutral-default);
  /* §19.2 uses RAW 2. `radius/xs` is the scale step that band belongs to. */
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.stepper__fill {
  block-size: 100%;
  inline-size: 0;
  background: var(--color-solid-brand-default);
  border-radius: var(--radius-xs);
  transition: inline-size 200ms ease; /* TODO(tokens): motion scale not built */
}

/* Reduced motion: the bar still moves, it just does not animate. */
@media (prefers-reduced-motion: reduce) {
  .stepper__fill {
    transition: none;
  }
}

/* `display: flex` on the class outranks the UA's `[hidden] { display: none }`
   — the trap button.css documents for `.btn[hidden]`. A stepper is hidden
   whenever a dialog reaches a step that is not one of N: checkout.css's Stripe
   hand-off and confirmation are outside its count, and a bar frozen at 100%
   there would claim the payment was done before it was. No-op for the
   telehealth modal, which never hides its stepper. */
.stepper[hidden] {
  display: none;
}