/* The login and sign-up pages: one card on the brand's navy, loaded after brand.css. */
body.auth {
	margin: 0;
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 24px 16px;
	box-sizing: border-box;
	background: linear-gradient(160deg, var(--brand-ink) 0%, var(--brand-ink-2) 60%, #0b3b39 100%);
	color: #1c2733;
}
.auth-card {
	width: 100%;
	max-width: 400px;
	background: #fff;
	border-radius: 14px;
	padding: 28px 28px 22px;
	box-shadow: 0 18px 50px rgb(0 0 0 / 30%);
	box-sizing: border-box;
	border-top: 4px solid var(--brand-teal);
}
.auth-brand { display: flex; align-items: center; gap: 10px; color: var(--brand-ink); text-decoration: none; margin-bottom: 18px; }
.auth-brand .brand-mark { width: 38px; height: 38px; flex: none; }
.auth-brand .brand-name { display: block; font-weight: 700; font-size: 17px; }
.auth-brand .brand-sub { display: block; color: #5b6b7b; font-size: 12px; }
.auth-card h1 { font-size: 22px; margin: 0 0 12px; color: var(--brand-ink); }
.auth-card form { display: grid; gap: 14px; }
.auth-card form[hidden] { display: none; }
.auth-card label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: #34495e; }
.auth-card label.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.auth-card input[type=text], .auth-card input[type=email], .auth-card input[type=password] {
	font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid #c8d3de; border-radius: 8px; background: #fff; color: #1c2733;
}
.auth-card input:focus { outline: 2px solid var(--brand-teal); outline-offset: 1px; border-color: var(--brand-teal); }
.auth-card button {
	font: inherit; font-weight: 700; padding: 11px 14px; border: 0; border-radius: 8px; cursor: pointer;
	background: var(--brand-teal); color: #fff;
}
.auth-card button:hover { background: #115e59; }
.auth-card button:disabled { opacity: .6; cursor: default; }
.auth-hint { color: #5b6b7b; font-size: 13px; font-weight: 400; margin: 0 0 12px; }
label .auth-hint { margin: 0; }
.auth-message { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #fdecec; color: #8a1c1c; font-size: 14px; }
.auth-message.ok { background: #dcf3ef; color: #115e59; }
.auth-switch { margin: 16px 0 0; font-size: 14px; color: #5b6b7b; text-align: center; }
.auth-switch a { color: var(--brand-teal); font-weight: 600; }

@media (prefers-color-scheme: dark) {
	.auth-card { background: #13202d; color: #e5edf5; }
	.auth-brand, .auth-card h1 { color: #f4f7fa; }
	.auth-card label { color: #c8d6e3; }
	.auth-card input[type=text], .auth-card input[type=email], .auth-card input[type=password] { background: #0d1823; color: #e5edf5; border-color: #2d4256; }
	.auth-hint, .auth-brand .brand-sub, .auth-switch { color: #9fb1c3; }
	.auth-switch a { color: #5eead4; }
	.auth-message { background: #3d1717; color: #ffc9c9; }
	.auth-message.ok { background: #123f3c; color: #99f6e4; }
}