/*
 * The sign-in page, and only it. Loaded after app.css, which supplies the
 * card, field and button components this page reuses.
 *
 * What is here is what is peculiar to signing in: the blurred backdrop, and a
 * single card centred in the viewport with no navigation around it. A page
 * offering links a visitor cannot yet follow is worse than one offering none.
 */

/*
 * The backdrop is a real <img> rather than a CSS background so the browser
 * treats it as the cacheable asset it is. object-fit: cover reproduces what a
 * background-size: cover would have done; the negative z-index keeps it behind
 * the card without taking it out of the document.
 */
.system .backdrop {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

.system-main {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100dvh;
	padding: 2rem 1rem;
	margin: 0;
	max-width: none;
}

/* The sign-in card floats on the spheres: translucent, with the backdrop
 * blurred behind it, so the colour shows through without ever competing with
 * the text on top of it. The blur is progressive enhancement — without it the
 * card is simply a translucent white panel, which is still perfectly legible. */
.system-main .card {
	width: 100%;
	max-width: 22rem;
	margin: 0;
	padding: 2rem;
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(18px) saturate(140%);
	box-shadow: 0 1.5rem 3rem rgba(16, 42, 67, 0.14);
}

.system-main .card-title {
	margin-bottom: 1.5rem;
	font-size: 1.375rem;
}

/* The sentence under a card's title that says what the form is for, on the
 * pages that need one: asking for a new password, and choosing it. */
.system-main .card-lead {
	margin: -0.75rem 0 1.25rem;
	color: var(--muted);
	font-size: 0.9375rem;
}

.system-main .field-input {
	background: rgba(255, 255, 255, 0.85);
}

.system-main .button {
	width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.system-main .alert { animation: alert-in 120ms ease-out; }
	@keyframes alert-in { from { opacity: 0; } to { opacity: 1; } }
}