/*
 * components/progress.css — Progress bar component (Session 5: UI Lab).
 *
 * Paired with templates/components/progress.html. Token-driven (D5).
 * Determinate variant uses width %; indeterminate uses a shimmer animation.
 */

.progress {
  margin-bottom: var(--space-4);
  max-width: 30rem;
}

.progress__labels {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
}

.progress__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-fg);
}

.progress__value {
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  font-variant-numeric: tabular-nums;
}

.progress__track {
  background: var(--color-surface-2);
  border: var(--border-1);
  border-radius: var(--radius-pill);
  height: 0.5rem;
  overflow: hidden;
}

.progress__bar {
  background: var(--color-accent);
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width var(--dur-base) var(--ease-standard);
}

.progress__track--success .progress__bar { background: var(--color-success-fg); }
.progress__track--danger .progress__bar { background: var(--color-danger-fg); }

.progress__bar--indeterminate {
  width: 40%;
  animation: progress-indeterminate 1.4s var(--ease-standard) infinite;
}

@keyframes progress-indeterminate {
  0% { margin-left: -40%; }
  100% { margin-left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .progress__bar { transition: none; }
  .progress__bar--indeterminate { animation: none; }
}