/* Djaunt progress bar — a thin fill-driven meter for "N of M done" or a
   percent-complete readout. Blended from djaunt-bean-guide's
   pot-progress-bar/pot-progress-fill and cartoonist-drawing-curriculum's
   bar-track/bar-fill/bar-label, which had each built this independently.
   Width is driven from JS (inline style="width: N%"); this file only
   styles the track and fill. Consumes role variables from tokens.css only. */

.dj-bar-label {
  font-size: 12.5px;
  color: var(--dj-text-muted);
  margin-bottom: 6px;
}

.dj-bar-track {
  background: var(--dj-surface-raised);
  border: var(--dj-border-width) solid var(--dj-border);
  border-radius: var(--dj-radius-sm);
  height: 6px;
  overflow: hidden;
}

.dj-bar-fill {
  background: var(--dj-accent);
  height: 100%;
  width: 0%;
  transition: width var(--dj-dur-slow) var(--dj-ease);
}

.dj-bar-fill-success {
  background: var(--dj-success);
}

.dj-bar-fill-warning {
  background: var(--dj-warning);
}

.dj-bar-fill-danger {
  background: var(--dj-danger);
}