/* The one loading spinner — `<span class="warp-spinner warp-spinner-gap"></span>` before status text,
   `+spinWait()` in Pug, or `setStatus(message, "loading")`, which prepends one.
   Sized in em, so it is exactly as tall as the text it belongs to; coloured from the theme.
   Replaces anim_spinCircleGreen.gif, whose 1-bit alpha fringed on dark backgrounds and could not be
   recoloured. Linked from header_res.pug (every app page) and login.pug, which has no header.
   It lives in public/, not styles/, because /styles is served only after sign-in and the login
   page shows it. */
.warp-spinner {
	display: inline-block;
	flex: none;
	/* centred on the text whether it sits inline or as a flex item beside it */
	align-self: center;
	box-sizing: border-box;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	border: 0.125em solid var(--border-color);
	border-top-color: var(--spinner-color, var(--color-1));
	border-radius: 50%;
	animation: warp-spinner-spin 0.9s linear infinite;
}
/* the space between a spinner and the status text after it */
.warp-spinner.warp-spinner-gap {
	margin-right: 0.5em;
}
/* Only for a spinner that stands ALONE as a panel's centrepiece — never beside text, which it should
   match. px, not rem: the root font size differs between pages, and these should not. */
.warp-spinner.warp-spinner-lg {
	font-size: 24px;
}
.warp-spinner.warp-spinner-xl {
	font-size: 42px;
}
@keyframes warp-spinner-spin {
	to { transform: rotate(360deg); }
}
/* slowed, never stopped: a spinner that stands still reads as a page that has hung */
@media (prefers-reduced-motion: reduce) {
	.warp-spinner {
		animation-duration: 2.7s;
	}
}