/* Pipeline stepper (ui.md): Record → Transcribe → Analyze → Confirm → Draft → Review → Sign.
   Each step's data-state is done, current, failed, or todo. The state is also in text for
   screen readers; the marker's icon and colour only reinforce it. When its container is
   narrow (a phone, a half-width card), only the current step shows its label, so the row
   fits on one line. */

.stepper-frame {
  container-type: inline-size;
}

.stepper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.stepper__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.stepper__step + .stepper__step::before {
  content: "";
  width: var(--space-3);
  height: 1px;
  background: var(--color-border-strong);
}

.stepper__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.stepper__marker .icon {
  display: none;
  width: 1rem;
  height: 1rem;
}

.stepper__step[data-state="done"] .stepper__marker {
  border-color: var(--color-success);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.stepper__step[data-state="current"] {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

.stepper__step[data-state="current"] .stepper__marker {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.stepper__step[data-state="failed"] {
  color: var(--color-danger);
  font-weight: var(--weight-medium);
}

.stepper__step[data-state="failed"] .stepper__marker {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.stepper__step[data-state="done"] .stepper__done,
.stepper__step[data-state="failed"] .stepper__failed {
  display: inline-block;
}

.stepper__step[data-state="done"] .stepper__number,
.stepper__step[data-state="failed"] .stepper__number {
  display: none;
}

@container (max-width: 48rem) {
  .stepper {
    flex-wrap: nowrap;
    gap: var(--space-1);
  }

  .stepper__step {
    gap: var(--space-1);
  }

  .stepper__step + .stepper__step::before {
    width: var(--space-2);
  }

  .stepper__marker {
    width: 1.5rem;
    height: 1.5rem;
  }

  .stepper__step:not([data-state="current"], [data-state="failed"]) .stepper__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}