/**
 * Reading Progress Bar (LYC-562 / REQ-26 / Pass-3 Phase 5).
 *
 * Fixed-position 3px bar pinned to the very top of the viewport on
 * single-article pages. Inner `.reading-progress__fill` is driven by
 * `assets/js/reading-progress.js`, which writes `width: N%` as the reader
 * scrolls. The outer track stays transparent so the bar reads as a thin
 * claret accent rather than a full-width chrome band.
 *
 * Stacking: z-index 70 sits above the sticky header (50) and mega-menu
 * panel (60) and below the mobile drawer (1100) and skip link (9999), so
 * the progress indicator is visible when the header is sticky but never
 * blocks a modal overlay.
 *
 * Accessibility:
 *   - `aria-hidden` on the host element (set in single.php) keeps the bar
 *     out of the a11y tree; it is decorative and conveys no state that is
 *     not also reflected by native scroll position.
 *   - Hidden entirely below 640px. On phones the bar competes for attention
 *     with the article itself and adds little value.
 *   - Respects `prefers-reduced-motion`: no transition on the fill width.
 *
 * Voice rule: zero em dashes.
 */

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 70;
  pointer-events: none;
}

.reading-progress__fill {
  height: 100%;
  width: 0;
  background-color: var(--color-claret);
  transition: width 120ms linear;
  will-change: width;
}

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

@media (max-width: 640px) {
  .reading-progress {
    display: none;
  }
}