/**
 * Component: Progress
 * Visual language borrowed from build/compile progress bars — reinforces
 * the "learning is shipping code" theme without being decorative for
 * decoration's sake.
 * Markup: <div class="progress" role="progressbar" aria-valuenow="60"
 *           aria-valuemin="0" aria-valuemax="100"><span class="progress__fill" style="width:60%"></span></div>
 */

.progress {
  --progress-height: 8px;
  height: var(--progress-height);
  width: 100%;
  background: var(--sf-border);
  border-radius: var(--sf-radius-full);
  overflow: hidden;
}

.progress__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--sf-green), #38c78c);
  border-radius: var(--sf-radius-full);
  transition: width var(--sf-duration-slow) var(--sf-ease);
}

.progress--sm { --progress-height: 4px; }
.progress--lg { --progress-height: 12px; }

.progress-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-xs);
  color: var(--sf-slate-600);
  margin-bottom: var(--sf-space-2);
}

/* Step/build style progress (e.g. curriculum stepper) */
.progress-steps {
  display: flex;
  gap: var(--sf-space-1);
}
.progress-steps__step {
  flex: 1;
  height: 4px;
  background: var(--sf-border);
  border-radius: var(--sf-radius-full);
}
.progress-steps__step.is-complete { background: var(--sf-green); }
.progress-steps__step.is-current { background: var(--sf-indigo); }