/* /css/login.css - the pre-login page (html/login.html). No header/nav/tab
   chrome exists on this page at all, so this only ever needs to coexist
   with tokens.css + base.css's bare-element rules, never any other page's
   own CSS. */

.login-main {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 1.5rem;
}

.login-card {
	width: 100%;
	max-width: 22rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--panel-radius);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Same stacked mark-over-caption language as the app header's own
   .logo-link (css/header.css), just sized for a standalone card instead of
   a corner mark -- this page has no header.css loaded, so nothing here
   reuses its rules, only the same visual idea. */
.login-logo {
	margin: 0 0 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	color: var(--heading);
}

.login-logo .logo {
	height: 3.5rem;
	width: auto;
}

.login-logo-text {
	font-size: 1.1rem;
	letter-spacing: 0.15em;
	text-transform: lowercase;
}

.login-card form,
#login-passkey-step {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Any author rule that sets `display` (above) beats the UA stylesheet's own
   [hidden] { display: none } regardless of specificity -- origin order
   (author beats user-agent) is decided before specificity is ever compared.
   Without this, ts/login.ts's el.hidden = true left the passkey step and
   the password form both rendered alongside the username step at once.
   Restated explicitly, !important, so this holds regardless of what else
   here ever touches display on the same elements. */
[hidden] {
	display: none !important;
}

.login-card label {
	font-size: 0.875rem;
	color: var(--muted-strong);
}

.login-account {
	margin: 0;
	color: var(--muted);
	font-size: 0.9rem;
}

/* A plain link, not a button -- "go back and try a different account" is a
   way out of the current step, not the step's own action. */
.login-switch {
	background: none;
	border: none;
	color: var(--accent);
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	font-size: 0.85rem;
	align-self: center;
}

.login-error {
	background: color-mix(in srgb, var(--danger) 12%, var(--surface));
	color: var(--danger);
	border: 1px solid var(--danger);
	border-radius: var(--control-radius);
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
}