/* ─── Page-progress bar ──────────────────────────────────────────────────────
   Thin loading bar shown across the very top of the viewport while the
   browser navigates between full pages. Fragment-level loading uses the
   busy-pill (`.js-table-busy-pill`) inside the page; this bar only covers
   the full-page navigation gap.

   Show/hide and the fill animation are driven by `src/shell/page-progress.ts`
   (setTimeout-based JS animation). This file owns only the visual styling.

   On slow networks the bar creeps from 0 to ~92% of the viewport over 3 s;
   on fast networks the page usually loads while the bar is still early in
   its growth, so the JS handler triggers a 350 ms completion animation that
   eases the current width up to 100% before fading the bar out. The user
   always sees a full "grow → complete → fade" cycle.
   ────────────────────────────────────────────────────────────────────────── */
.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  overflow: hidden;
  z-index: 900;
  pointer-events: none;
}

.page-progress[hidden] {
  display: none;
}

.page-progress-bar {
  width: 100%;
  height: 100%;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 1;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .page-progress-bar {
    transform: scaleX(0.5);
  }
}