/*
 * progress.css — reading progress bar fixed to the bottom of the viewport.
 * Fills from left to right as the user scrolls down the page.
 */

.reading-progress {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: hsl(var(--border));
    z-index: 100;
    pointer-events: none;
}

.reading-progress-bar {
    height: 100%;
    width: 0%;
    background: hsl(var(--muted-foreground));
    transition: width 50ms linear;
}

/* Hide on very short pages where scrolling isn't meaningful */
.reading-progress--hidden {
    display: none;
}