/* reading-progress.css — the reading bar, in three rules.
   ====================================================================
   Paired with reading-progress.js, which creates `.rp-bar > .rp-fill`
   and then writes exactly one thing: `--rp-progress`, an integer 0-100
   on the track. Everything else — height, colour, easing — is here, so
   the bar can be re-weighted without reopening the JavaScript.

   Rules this file keeps, matching mobile.css:
   - No raw hex / rgba. --m-track is the progress-track token the stat
     bars already use (.ms-bar-track); --accent-bright is documented in
     styles.css as the GRAPHICAL step, "progress fills, toggle tracks",
     which is precisely this. No new tokens are declared: a two-element
     hairline does not need its own vocabulary.
   - No !important outside the reduced-motion block below.
   ==================================================================== */

/* The track. `flex:none` because the bar's home is a `.ms-sheet` — a flex
   column of grab, head, body, foot — and it is a rule between two of
   them, not a panel that should absorb slack. Full bleed on purpose: it
   doubles as the head/body separator, which is why nothing here draws a
   second hairline. `overflow:hidden` is belt-and-braces on a fill that
   the JS already clamps to 100. */
.rp-bar{
  display:block;flex:none;
  position:relative;overflow:hidden;
  width:100%;height:3px;
  background:var(--m-track);
}

/* The fill. scaleX rather than width so a scroll — the one input this
   component has — never costs a layout: it is a compositor transform on
   every frame the reader drags.

   The gradient rides the transform, so it is squashed into whatever the
   fill currently spans instead of being sampled from a fixed-width bar.
   That is deliberate: the leading edge stays --accent-bright at every
   percentage, so the head of the bar reads the same at 4% as at 96%. */
.rp-fill{
  display:block;
  width:100%;height:100%;
  transform-origin:0 50%;
  transform:scaleX(calc(var(--rp-progress,0) / 100));
  background:linear-gradient(90deg,var(--accent-deep),var(--accent-bright));
  transition:transform .14s cubic-bezier(.2,.9,.3,1);
}

/* Reduced motion: the fill jumps, it does not glide. `!important` is
   load-bearing here and is the only use of it in this file. The bar's
   usual host is `.ms-sheet`, and mobile.css neutralises motion with a
   blanket `.ms-sheet *{transition-duration:1ms !important}` — a rule
   this one would otherwise lose to, leaving the component's own promise
   dependent on whose stylesheet loaded last. A preference stated this
   strongly should not ride on a cascade race. */
@media (prefers-reduced-motion:reduce){
  .rp-fill{transition:none !important;}
}