/* Flow roots contain child margins/floats so the sentinel is the real body end. */
#reading-content { display: flow-root; }
#reading-content-end { height: 0; clear: both; }
#reading-progress {
    position: fixed;
    inset: 0 0 auto;
    height: 2px;
    z-index: 9999;
    pointer-events: none;
}
.reading-progress__bar {
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: var(--links);
    transition: transform 80ms linear;
    will-change: transform;
}
#reading-eta {
    display: block;
    margin: .5em 0;
    font-size: 1.3rem;
    line-height: 1.6;
    color: var(--fg);
    opacity: .6;
    font-variant-numeric: tabular-nums;
}
#reading-eta[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
    .reading-progress__bar { transition: none; }
}
@media print {
    #reading-progress, #reading-eta { display: none !important; }
}