/* 2FA steps on wp-login.php. */
.realist-portal-lede { margin-bottom: 1rem; }
.realist-portal-steps { padding-left: 1.2rem; margin: 0 0 1rem; }
.realist-portal-steps li { margin-bottom: .75rem; }
.realist-portal-qr { margin: .5rem 0; }
.realist-portal-qr svg { width: 180px; height: 180px; background: #fff; }
.realist-portal-secret { display: block; font-size: 1.05em; letter-spacing: .05em; word-break: break-all; margin: .25rem 0; }
.realist-portal-otpauth { font-size: .9em; }
.realist-portal-recovery-toggle { margin: .5rem 0 1rem; font-size: .9em; }
.realist-portal-codes { columns: 2; list-style: none; padding: 0; margin: 1rem 0; }
.realist-portal-codes code { font-size: 1.05em; }

/* The agency's own sign-in screen. Every colour is a token the theme defines, handed here by
   Front\Branding because wp-login.php never loads the theme and so cannot read them itself. The
   fallbacks are WordPress's own login colours, so a portal on a theme without theme.json looks like
   wp-login.php rather than like nothing. */
body.login {
	background: var(--rp-login-bg, #f0f0f1);
	color: var(--rp-login-fg, #3c434a);
}
body.login h1 a {
	margin-bottom: 1.5rem;
}
body.login form {
	background: var(--rp-login-panel, #fff);
	border: 1px solid color-mix(in srgb, var(--rp-login-fg, #3c434a) 12%, transparent);
	border-radius: .5rem;
	box-shadow: none;
}
body.login label,
body.login form .input,
body.login #backtoblog a,
body.login #nav a {
	color: var(--rp-login-fg, #3c434a);
}
body.login form .input:focus,
body.login input[type="text"]:focus,
body.login input[type="password"]:focus {
	border-color: var(--rp-login-accent, #2271b1);
	box-shadow: 0 0 0 1px var(--rp-login-accent, #2271b1);
}
body.login .button-primary {
	background: var(--rp-login-accent, #2271b1);
	border-color: var(--rp-login-accent, #2271b1);
	color: var(--rp-login-bg, #fff);
	text-shadow: none;
	box-shadow: none;
}
body.login .button-primary:hover,
body.login .button-primary:focus {
	background: var(--rp-login-accent2, #135e96);
	border-color: var(--rp-login-accent2, #135e96);
	color: var(--rp-login-bg, #fff);
}
body.login #nav a:hover,
body.login #backtoblog a:hover {
	color: var(--rp-login-accent, #2271b1);
}

/* "Send a new code" on the emailed-code step: its own form, so asking for another code never posts
   whatever half-typed code is in the box above. Sits under the card, where the sign-in screen keeps
   its other secondary links, and takes the agency's colour like them. */
/* WordPress's login.css gives EVERY form on this screen the white card (.login form, 0,1,1), which
   made this one link look like a second, empty card. Undone at (0,2,2). */
body.login form.realist-portal-resend {
	margin: .75rem 0 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	text-align: center;
	overflow: visible;
}
body.login .realist-portal-resend .button-link {
	color: var(--rp-login-accent, #2271b1);
	text-decoration: underline;
	font-size: 1em;
	cursor: pointer;
}