/**
 * TiorAI reading progress — the shared reading-position indicator.
 *
 * Companion to template-parts/shared/reading-progress.php and
 * assets/js/reading-progress.js.
 *
 * The line is drawn exactly like the section nav's
 * (`.tr-section-nav__progress-fill`) — same 2px, same brand fill, same
 * `scaleX()` on a transparent track — because it reports the same thing and the
 * two long-form documents should not have two different indicators. What differs
 * is what it is attached to: the nav's line is absolutely positioned inside a
 * sticky bar, and this one is `position: fixed`, because the page that renders it
 * has no bar.
 *
 * NO TRACK, deliberately. A tinted rail behind the fill shows a brand-coloured
 * line across the viewport at 0% — the indicator at its loudest exactly when it
 * has nothing to report. The fill is the only thing that ever appears.
 */

.tr-progress {
	position: fixed;

	/*
	 * Under the site header, not over it.
	 *
	 * The offset is MEASURED and published by the runtime, because the header is
	 * `position: sticky; top: 0` and its height changes with the viewport — and
	 * because a logged-in visitor also has the admin bar above it. Deriving it
	 * from a literal here would need one rule per breakpoint plus an
	 * `.admin-bar` fork, and all of them would be wrong the day the header's
	 * padding changes.
	 *
	 * The 0 fallback is what the bar does with no script: it renders at the very
	 * top of the viewport at zero width, i.e. nothing.
	 */
	top: var(--tiorai-progress-top, 0px);
	inset-inline: 0;

	height: var(--tiorai-progress-height, 2px);
	background: transparent;
	pointer-events: none;

	/* Above the page, and above the sticky rail whose top edge it meets. The
	   header itself is `--z-sticky` and this sits BELOW the header's box, so the
	   two never paint over each other. */
	z-index: calc(var(--z-sticky, 200) + 1);
}

.tr-progress__fill {
	display: block;
	height: 100%;
	background: var(--color-primary);

	/*
	 * `transform: scaleX()`, never `width`.
	 *
	 * Width is a layout property: animating it from a scroll handler runs layout
	 * and paint every frame. A transform is composited, so the per-frame cost is
	 * a matrix update on one element and the main thread does no work at all.
	 *
	 * No `transition`. The fill tracks the scroll position directly, so easing it
	 * would make the line lag the page it is reporting on — the one place where a
	 * smooth animation is less honest than an instant one. That is also why there
	 * is no `prefers-reduced-motion` rule here: there is no motion of its own to
	 * reduce.
	 */
	transform-origin: left center;
	transform: scaleX(var(--tiorai-progress, 0));
	will-change: transform;
}

[dir="rtl"] .tr-progress__fill {
	transform-origin: right center;
}

/* Forced colours: the fill is painted with a system colour, or the whole
   component disappears — a `background` is not guaranteed to survive. */
@media (forced-colors: active) {
	.tr-progress__fill {
		background: Highlight;
	}
}

@media print {
	.tr-progress {
		display: none;
	}
}