/*
 * The centered form card shared by the login and register pages, over a geometric backdrop.
 */

/* The backdrop: long straight lines and faint triangle shards like pieces of the logo (shared/img/backdrop.svg),
   kept to the sides so the logo and card stay calm */
.auth-page {
	background-image: url("/shared/img/backdrop.svg");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 1400px 900px;
}
.auth {
	display: flex;
	flex-direction: column;
	align-items: center; /* the card fits its form instead of stretching down to the footer */
	gap: var(--space-6);
	padding-top: var(--space-16);
}

/* The logo above the card links home (the login page has no nav bar) */
.auth__home {
	display: block;
	width: 72px;
	height: 72px;
	transition: filter var(--transition);
}

.auth__home:hover {
	filter: brightness(1.25) drop-shadow(0 0 8px var(--accent-glow));
}

.auth__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	width: 100%;
	max-width: 400px;
}

/* The hero's type: light and tight, centred with its subtitle */
.auth__title {
	font-size: 1.625rem;
	text-align: center;
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.auth__subtitle {
	margin-top: calc(-1 * var(--space-2));
	text-align: center;
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.auth__submit {
	width: 100%;
	margin-top: var(--space-2);
}

.auth__switch {
	color: var(--text-muted);
	font-size: var(--text-sm);
	text-align: center;
}