/* ==========================================================================
   Progress Indicators — determinate progress bars
   ========================================================================== */

/* Component block.
   Owns the stack only; parent components own placement. */
.ds-progress {
  width: 100%;
  display: grid;
  gap: var(--space-2);
}

/* Compact consumer variant for narrow placements such as sidebars. */
.ds-progress--compact {
  max-width: 260px;
}

/* Label/value row. */
.ds-progress__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

/* TY-01 eyebrow-kicker */
.ds-progress__label {
  min-width: 0;
  color: var(--helper-text);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* TY-07 compact-control-label */
.ds-progress__value {
  flex: 0 0 auto;
  color: var(--helper-text);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* Track */
.ds-progress__bar {
  height: 4px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--border-02);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035);
}

/* Fill */
.ds-progress__fill {
  width: var(--ds-progress-value, 0%);
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--tab-active-underline), var(--success-note-accent));
  transition: width 320ms ease;
}

.ds-progress.is-empty .ds-progress__fill {
  width: 0%;
}

.ds-progress.is-complete .ds-progress__fill {
  background: var(--success-note-accent);
}

.ds-progress--muted .ds-progress__fill {
  background: rgba(255,255,255,0.28);
}

.ds-progress--muted .ds-progress__label-row,
.ds-progress--muted .ds-progress__meta {
  opacity: 0.72;
}

/* TY-04 subtext-meta-copy */
.ds-progress__meta {
  margin: 0;
  color: var(--helper-text);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .ds-progress__fill {
    transition: none;
  }
}