/* ═══════════════════════════════════════════
   step-progress-ui — Discrete-dash step progress indicator
   Replaces bespoke `[data-onb-progress]` + `[data-reg-progress]` markup.
   ═══════════════════════════════════════════ */

@scope (step-progress-ui) {
  :where(:scope) {
    --step-progress-gap:        var(--a-space-2);
    --step-progress-track-gap:  var(--a-space-1);
    --step-progress-dash-h:     4px;
    --step-progress-dash-radius: var(--a-radius-full);
    --step-progress-dash-bg:    var(--a-border-subtle);
    --step-progress-dash-bg-active: var(--a-accent);
    --step-progress-caption-fg: var(--a-fg-muted);
    --step-progress-caption-size: var(--a-ui-sm);

    /* Sizing — match the bespoke flex shape in registration + onboarding
       (flex:0 1 18rem; min-width:10rem). Consumers can override. */
    --step-progress-flex:       0 1 18rem;
    --step-progress-min-width:  10rem;
  }

  :scope {
    display: flex;
    flex-direction: column;
    gap: var(--step-progress-gap);
    flex: var(--step-progress-flex);
    min-width: var(--step-progress-min-width);
  }

  /* Caption row — small, muted text. Hidden when no caption provided
     (the [hidden] attribute is set by the JS). */
  [slot="caption"] {
    color: var(--step-progress-caption-fg);
    font-size: var(--step-progress-caption-size);
    line-height: 1.4;
  }

  [slot="caption"][hidden] {
    display: none;
  }

  /* Discrete-dash track — one <span> per step. Each dash is a flex
     item so the track scales with the column width. */
  [slot="track"] {
    display: flex;
    gap: var(--step-progress-track-gap);
  }

  [slot="track"] > span {
    flex: 1;
    height: var(--step-progress-dash-h);
    border-radius: var(--step-progress-dash-radius);
    background: var(--step-progress-dash-bg);
    transition: background var(--a-duration-fast, 150ms) var(--a-easing, ease);
  }

  [slot="track"] > span[data-active] {
    background: var(--step-progress-dash-bg-active);
  }
}
