/* pace-theme.css — custom Pace.js theme matching this app's brand
   (see static/js/vendor/pace.min.js). Pace injects:
   <div class="pace pace-active">
     <div class="pace-progress" data-progress-text="45%" data-progress="45">
       <div class="pace-progress-inner"></div>
     </div>
     <div class="pace-activity"></div>
   </div>
   Real progress — data-progress reflects Pace's own estimate from
   watching the document, active XHR/fetch, and EventSource connections,
   not a fixed-duration fake animation. */

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  user-select: none;
  /* Clipping container for the bar below. Pace slides a FULL-WIDTH bar
     with translate3d, so mid-animation the element's box extends past
     the viewport edge — which made the whole document briefly scrollable
     sideways on every page load (measurable: a 360px-wide bar sitting at
     right=504 on a 360px viewport). Turning .pace into a fixed, 3px-tall
     overflow:hidden strip and positioning the bar absolutely inside it
     keeps the visual identical while making that escape impossible. */
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: 3px;
  overflow: hidden;
  z-index: 2000;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  /* Pace sets `transform: translate3d(<progress-100>%, 0, 0)` on this
     element per tick (a full-width bar slid left, revealed as progress
     advances) rather than animating width — position/size/color are
     ours to theme, the transform value itself is Pace's, driven by its
     real progress estimate. */
  position: absolute;   /* inside the .pace clipping strip above */
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent, #e11d48), var(--accent-2, #fb7185));
  box-shadow: 0 0 10px 1px var(--accent, #e11d48), 0 0 4px 1px var(--accent-2, #fb7185);
  transition: transform 0.15s ease;
}

.pace .pace-activity {
  display: none;
}