/* ============================================================
   COMPONENT · PROGRESS
   A slim, calm forward-momentum bar for the guided review. It
   shows how far THROUGH the ritual you've come — a positive — so
   it is deliberately NOT a c-gauge: no caution chroma, no
   fill-toward-a-cap "capacity/debt" framing. The fill rides
   --color-ok (a gentle lime), the track is a sunken theme
   surface, and the whole thing flips for free between themes
   because it touches only semantic tokens (no rgba(0,0,0,*)).

   Markup: a native <progress> drives the fill via its value/max
   attributes — attribute-driven, so it stays CSP-safe (no inline
   style=) and is announced to assistive tech as a percentage.
   Built minimum here — chunk 13 absorbs it into the styleguide.
   ============================================================ */

.c-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.c-progress__bar {
  /* Strip the native chrome so the bar reads as part of the system. */
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  overflow: hidden;
}

/* The track (Firefox addresses the element itself; WebKit needs the bar pseudo). */
.c-progress__bar::-webkit-progress-bar {
  background: var(--color-surface-sunken);
  border-radius: var(--radius-pill);
}

/* The fill — a calm forward motion, eased so it grows rather than jumps. */
.c-progress__bar::-webkit-progress-value {
  background: var(--color-ok);
  border-radius: var(--radius-pill);
  transition: width var(--dur-medium, 240ms) var(--ease-settle, ease-out);
}
.c-progress__bar::-moz-progress-bar {
  background: var(--color-ok);
  border-radius: var(--radius-pill);
}

.c-progress__label {
  font-family: var(--font-data);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-wide);
}