/* Progress bar — the shared .global-progress component. One line that says
   how far a piece of work has got. Tokens: --progress-h, --progress-track,
   --progress-fill (tokens.css), --progress-fill-ms. The fill is the fixed
   action ink every in-app bar wears (the brand colour is for chrome and
   the filled CTA, which is what the button under a bar carries) and turns
   --color-success when the work is done.

   Markup:
     <div class="global-progress" role="progressbar"
          aria-valuemin="0" aria-valuemax="100" aria-valuenow="40">
       <div class="global-progress__fill" style="width: 40%"></div>
     </div>

   --busy: there is no number to show — a short run slides across instead
   of filling (give the fill NO inline width, or the slide is pinned).
   --done: the fill turns green.
   A light sweeps the filled part so a bar waiting between two marks still
   reads as moving; reduced motion stops the sweep and the slide.

   Live on the worker's role page over the Start Editing door
   (app/assignments/_role_connect_card.html). The bookings stage readout
   (.opportunities-stage-progress) is a different thing: a whole readout of
   stage name, bar and count, not the bare bar. */
.global-progress {
    height: var(--progress-h);
    border-radius: var(--radius-pill);
    background: var(--progress-track);
    overflow: hidden;
}
.global-progress__fill {
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--progress-fill);
    transition: width var(--progress-fill-ms) ease;
}
.global-progress__fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, white 45%, transparent), transparent);
    animation: global-progress-shine 1.6s linear infinite;
}
.global-progress--done .global-progress__fill { background: var(--color-success); }
.global-progress--done .global-progress__fill::after,
.global-progress--busy .global-progress__fill::after { animation: none; }
.global-progress--busy .global-progress__fill {
    width: 35%;
    animation: global-progress-slide 1.4s ease-in-out infinite;
}
@keyframes global-progress-shine {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}
@keyframes global-progress-slide {
    from { transform: translateX(-100%); }
    to { transform: translateX(300%); }
}
@media (prefers-reduced-motion: reduce) {
    .global-progress__fill { transition: none; }
    .global-progress__fill::after { animation: none; }
    .global-progress--busy .global-progress__fill { animation: none; width: 100%; opacity: 0.35; }
}