/* ============================================
   Progress — linear + circular, determinate + indeterminate.

   The indicator (linear fill / circular arc / sweep) is the ONE coral
   accent: var(--md-sys-color-primary). The unfilled track is a neutral
   surface tier that reads on both surface families and both themes
   (AD-1, UX-DR3, AD-13). Progress is display-only chrome — never a
   severity hue.

   The circular indeterminate spin ALIGNS with primitives' <xm-spinner>
   motion: one rotation source at 0.7s linear infinite (matching
   @keyframes ds-spin). We do NOT introduce a second rotation speed.

   BEM block: `progress`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
   Elements: __track, __fill, __ring, __ring-svg, __ring-track,
   __ring-indicator, __label. Modifiers: --linear / --circular /
   --indeterminate / --xs / --sm / --md / --lg.
   ============================================ */

.progress {
  --progress-color: var(--md-sys-color-primary);
  --progress-track: var(--md-sys-color-surface-container-highest);
  /* Linear track thickness per size (set by the size modifiers). */
  --progress-thickness: 6px;
  /* Circular ring diameter per size. */
  --progress-ring-size: 32px;
  display: inline-flex;
  align-items: center;
}

/* ---------- Size axis ---------- */
.progress--xs { --progress-thickness: 3px; --progress-ring-size: 18px; }
.progress--sm { --progress-thickness: 4px; --progress-ring-size: 24px; }
.progress--md { --progress-thickness: 6px; --progress-ring-size: 32px; }
.progress--lg { --progress-thickness: 8px; --progress-ring-size: 44px; }

/* ---------- Linear ---------- */
.progress--linear {
  display: block;
  width: 100%;
}

.progress__track {
  display: block;
  position: relative;
  width: 100%;
  height: var(--progress-thickness);
  background: var(--progress-track);
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden;
}

.progress__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--progress-color);
  border-radius: var(--md-sys-shape-corner-full);
  /* Determinate value changes ease at short4 standard. */
  transition: width var(--md-sys-motion-duration-short4)
    var(--md-sys-motion-easing-standard);
}

/* Linear indeterminate — a fixed-width sweep travelling the track. Opacity /
   translate only; no gradient. */
.progress--linear.progress--indeterminate .progress__fill {
  width: 40%;
  transition: none;
  animation: progress-sweep var(--md-sys-motion-duration-extra-long2)
    var(--md-sys-motion-easing-standard) infinite;
}

@keyframes progress-sweep {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(260%);
  }
}

/* ---------- Circular ---------- */
.progress--circular {
  display: inline-flex;
}

.progress__ring {
  display: inline-flex;
  width: var(--progress-ring-size);
  height: var(--progress-ring-size);
}

.progress__ring-svg {
  width: 100%;
  height: 100%;
  /* Start the determinate arc at 12 o'clock. */
  transform: rotate(-90deg);
}

.progress__ring-track {
  stroke: var(--progress-track);
}

.progress__ring-indicator {
  stroke: var(--progress-color);
  /* Determinate arc grows smoothly at short4 standard. */
  transition: stroke-dashoffset var(--md-sys-motion-duration-short4)
    var(--md-sys-motion-easing-standard);
}

/* Circular indeterminate — rotate the whole svg at the spinner's tempo:
   0.7s linear infinite (aligned with @keyframes ds-spin). One spin source. */
.progress--circular.progress--indeterminate .progress__ring-svg {
  transform: none;
  transform-origin: center;
  animation: progress-spin 0.7s linear infinite;
}
.progress--circular.progress--indeterminate .progress__ring-indicator {
  transition: none;
}

@keyframes progress-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Segmented: part-to-whole ---------- */
.progress--segmented {
  display: flex;
  align-items: stretch;
  gap: var(--s-1);
  width: 100%;
  height: var(--progress-thickness);
}

.progress__segment {
  flex-basis: 0;
  min-width: 2px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-on-surface-variant);
  transition: flex-grow var(--md-sys-motion-duration-short4)
    var(--md-sys-motion-easing-standard);
}
.progress__segment:nth-of-type(2) {
  background: var(--xm-color-on-surface-soft);
}
.progress__segment:nth-of-type(3) {
  background: var(--md-sys-color-outline);
}
.progress__segment:nth-of-type(n + 4) {
  background: var(--md-sys-color-surface-container-highest);
}
.progress__segment.progress__segment--accent {
  background: var(--md-sys-color-primary);
}

.progress__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  margin-top: var(--s-2);
  font-family: var(--xm-typescale-mono-font);
  font-size: var(--md-sys-typescale-label-medium-size);
  font-variant-numeric: tabular-nums;
  color: var(--md-sys-color-on-surface-variant);
}
.progress__legend-item--accent {
  color: var(--md-sys-color-primary);
}

/* ---------- Value caption ---------- */
.progress__label {
  margin-left: var(--s-2);
  font-family: var(--md-sys-typescale-label-medium-font);
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  color: currentColor;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .progress--indeterminate .progress__fill,
  .progress--circular.progress--indeterminate .progress__ring-svg {
    animation-duration: var(--md-sys-motion-duration-extra-long4);
  }
}