/* nps-progress.css — linear bar, spinner, steps. */

.nps-progress {
  display: flex;
  flex-direction: column;
  gap: var(--nps-space-2);
  margin-bottom: var(--nps-space-2);
}

.nps-progress__track {
  height: 0.5rem;
  background: var(--nps-surface-inset);
  border: 1px solid var(--nps-border);
  border-radius: var(--nps-radius-pill);
  overflow: hidden;
}

.nps-progress__bar {
  height: 100%;
  width: var(--nps-progress, 0%);
  background: var(--nps-accent);
  border-radius: inherit;
}

.nps-progress__label {
  font-family: var(--nps-font-mono);
  font-size: var(--nps-fs-micro);
  font-variant-numeric: tabular-nums;
  color: var(--nps-ink-muted);
}

.nps-spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--nps-border-strong);
  border-top-color: var(--nps-accent);
  border-radius: 50%;
  animation: nps-spin var(--nps-duration-slow) linear infinite;
}

.nps-steps {
  display: flex;
  gap: var(--nps-space-3);
  flex-wrap: wrap;
}

.nps-step {
  display: flex;
  align-items: center;
  gap: var(--nps-space-2);
  font-size: var(--nps-fs-caption);
  color: var(--nps-ink-muted);
}

.nps-step__n {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--nps-font-mono);
  font-size: var(--nps-fs-micro);
  border: 1px solid var(--nps-border-strong);
}

.nps-step.is-done { color: var(--nps-success-fg); }
.nps-step.is-done .nps-step__n {
  background: var(--nps-success);
  color: var(--nps-ink-inverse);
  border-color: var(--nps-success);
}
.nps-step.is-current { color: var(--nps-ink-strong); font-weight: var(--nps-fw-semibold); }
.nps-step.is-current .nps-step__n {
  background: var(--nps-accent);
  color: var(--nps-ink-onAccent);
  border-color: var(--nps-accent-press);
}