/* ==========================================================
   IROZON DESIGN SYSTEM — Progress (canonical, v1)
   A determinate, 0-100 linear progress bar for a single ongoing task —
   distinct from .iz-process, which lays out an ordered sequence of
   named stages rather than a live percentage. Reach for Progress when
   there is one real number to report (a batch job, an upload, a
   multi-step wizard's overall percentage); reach for Process when the
   value is "which named stage am I on", not a percentage.

   Public API:
     <div
       class="iz-progress"
       role="progressbar"
       aria-valuemin="0"
       aria-valuemax="100"
       aria-valuenow="42"
       aria-label="Uploading files"
       style="--iz-progress-value: 42"
     >
       <div class="iz-progress__fill"></div>
     </div>
   The host element carries the full ARIA progressbar contract
   (role="progressbar" + aria-valuemin/aria-valuemax/aria-valuenow, plus
   an accessible name via aria-label or aria-labelledby) since this
   package ships no JavaScript to set it for you. `--iz-progress-value`
   (a unitless 0-100 number) is the single source of truth for the
   rendered fill width — keep it in sync with aria-valuenow yourself;
   this CSS has no way to read the ARIA attribute back into layout.
   ========================================================== */

.iz-progress {
  --iz-progress-value: 0;
  --iz-progress-track-size: 8px;

  display: block;
  inline-size: 100%;
  block-size: var(--iz-progress-track-size);
  border-radius: var(--r-pill);
  background: var(--color-border);
  overflow: hidden;
}

.iz-progress__fill {
  display: block;
  block-size: 100%;
  inline-size: calc(var(--iz-progress-value) * 1%);
  border-radius: inherit;
  background: var(--color-action-primary);
  transition: inline-size var(--motion-duration-standard) var(--motion-ease-standard);
}

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