/**
 * Login Security — second-factor screen.
 *
 * wp-login.php loads none of the plugin's design system, so these few rules
 * stand alone. They only fill gaps WordPress's own login styles leave open;
 * anything WordPress already styles (inputs, buttons, the form card) is left
 * exactly as it is, so the challenge looks like part of the login screen rather
 * than a plugin bolted onto it.
 */

.be-2fa-intro {
	margin: 0 0 16px;
}

#be_2fa_form label {
	display: block;
	margin-bottom: 4px;
}

#be_2fa_code {
	font-size: 20px;
	letter-spacing: 4px;
	padding: 6px 8px;
	width: 100%;
}

/* wp-login.php floats .button-primary right so it pairs with the "Remember me"
   checkbox on its left. This challenge has no such pair: the button is the only
   thing on its row, so the float just strands it against the right edge while
   every other line starts at the left. Full width instead — one screen, one
   action. */
#be_2fa_form .submit {
	margin: 0 0 16px;
	padding: 0;
}

#be_2fa_form .submit .button-primary {
	float: none;
	width: 100%;
}

/* min-height reserves the line so the button below does not jump when the
   status text changes between "waiting", "cancelled" and an error. */
#be-2fa-webauthn-status {
	margin: 16px 0;
	min-height: 1.4em;
}

.be-2fa-trust {
	clear: both;
	margin: 12px 0 0;
}

/* Flex rather than inline: the label runs onto two lines on a narrow screen,
   and inline leaves the second line hanging under the checkbox. */
.be-2fa-trust label {
	align-items: baseline;
	display: flex;
	font-size: 13px;
	gap: 6px;
}

.be-2fa-trust input[type="checkbox"] {
	flex: none;
	margin: 0;
}

.be-2fa-alt {
	clear: both;
	margin-top: 16px;
	font-size: 13px;
}

.be-2fa-alt ul {
	margin: 4px 0 0;
	padding-left: 18px;
}

.be-2fa-alt li {
	margin-bottom: 4px;
}