/* /login — email-code auth. Mobile-first; tokens only (color/typography
   from the plugin's tokens.css, loaded before this file; dark/midnight is
   pinned site-wide via header.php). Joins the upcoming mobile audit. */

.abc-login {
	max-width: 380px;
	margin: 0 auto;
	padding: 48px 4px 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.abc-login__title {
	font-size: 22px;
	margin: 0;
	color: var(--ink);
}

.abc-login__intro {
	color: var(--ink-2);
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}

.abc-login__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.abc-login__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-2);
}

.abc-login__input {
	width: 100%;
	padding: 12px 14px;
	font: inherit;
	font-size: 16px; /* keeps iOS from zooming in on focus */
	border-radius: var(--radius-sm, 6px);
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
}

.abc-login__input:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

.abc-login__input--code {
	letter-spacing: 0.3em;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.abc-login__submit {
	border: 0;
	cursor: pointer;
	font-size: 15px;
	font-family: inherit;
}

.abc-login__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.abc-login__status {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink-2);
	margin: 0;
}

.abc-login__error {
	font-size: 13.5px;
	line-height: 1.5;
	color: #b5533a;
	margin: 0;
}

.abc-login__fallback {
	font-size: 13px;
	color: var(--ink-3);
	text-align: center;
	margin: 0;
}

.abc-login__fallback a {
	color: var(--ink-2);
}