/**
 * Top scroll progress bar — favicon palette via CSS vars.
 * Gradient is sized to 100vw so color stops stay locked; bar width
 * reveals the strip (does not stretch/compress the gradient).
 */

:root {
	/* Match --toby-wf-* when present; fallbacks = favicon / brand hues */
	--toby-scroll-sage: var(--toby-wf-sage, #797d62);
	--toby-scroll-gold: var(--toby-wf-gold, #ffcb69);
	--toby-scroll-purple: #955ba5;
	--toby-scroll-magenta: #cc66a1;
	--toby-scroll-track: color-mix(
		in srgb,
		var(--toby-wf-charcoal, #252525) 35%,
		transparent
	);
}

.toby-scroll-progress {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	height: 4px;
	width: 0;
	z-index: 99999;
	overflow: hidden;
	background-color: var(--toby-scroll-track);
	pointer-events: none;
	background-image: linear-gradient(
		90deg,
		var(--toby-scroll-sage),
		var(--toby-scroll-gold),
		var(--toby-scroll-purple),
		var(--toby-scroll-magenta)
	);
	background-size: 100vw 100%;
	background-repeat: no-repeat;
	background-position: left center;
	transition: width 0.12s linear;
}