/*
 * Navigation progress: a thin bar under the top edge while the next page is on its way, so a move inside
 * the site never feels stuck. nav-progress.js sets data-zf-navigating on <html> a moment after a link or
 * a filter form is followed, and clears it when the page comes back from the cache.
 */
.zf-nav-progress {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 2147483000;
	block-size: 3px;
	pointer-events: none;
	background: var(--green, #0f5123);
	box-shadow: 0 0 8px
		color-mix(in oklch, var(--green, #0f5123) 60%, transparent);
	opacity: 0;
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: opacity 0.2s ease;
}
html[dir='rtl'] .zf-nav-progress {
	transform-origin: 100% 50%;
}
html[data-zf-navigating] {
	cursor: progress;
}
html[data-zf-navigating] .zf-nav-progress {
	opacity: 1;
	animation: zf-nav-progress 8s cubic-bezier(0.1, 0.7, 0.2, 1) forwards;
}
@keyframes zf-nav-progress {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(0.94);
	}
}
@media (prefers-reduced-motion: reduce) {
	html[data-zf-navigating] .zf-nav-progress {
		animation: none;
		transform: scaleX(1);
	}
}