/**
 * UserWP auth pages -- login, register, forgot, reset, change -- plus
 * the Wordfence 2FA state the uwp-wordfence-2fa-bridge injects.
 *
 * The card chrome lives on UWP's .card wrapper (NOT on form.uwp_form):
 * the wrapper also contains the footer links and social block, and the
 * 2FA bridge replaces only the inner form, so the card must survive
 * that swap. See docs/superpowers/specs/2026-07-17-auth-pages-restyle-design.md.
 */

/* Page ground */
body.uwp_page .entry-content {
	background: var(--ml-canvas);
}

/* The card: UWP renders .uwp_page > .row > .card.container-fluid full
   width; constrain and skin it here. The crawl's sign-in pages render in
   ML Coming Soon's event document, whose content wrapper is
   .mlcs-event-content instead of .entry-content; without it their form ran
   the full 1,160px page width. */
body.uwp_page .entry-content .uwp_page > .row > .card,
body.uwp_page .mlcs-event-content .uwp_page > .row > .card {
	max-width: 520px;
	margin: 0 auto var(--ml-space-6);
	background: var(--ml-surface);
	border: 1px solid var(--ml-rule-soft, rgba(20, 20, 18, 0.12));
	border-top: 3px solid var(--ml-accent-large);
	border-radius: 0;
	box-shadow: none;
}

body.uwp_page .entry-content .uwp_page > .row > .card > .card-body,
body.uwp_page .mlcs-event-content .uwp_page > .row > .card > .card-body {
	padding: 40px;
}

/* The login card is self-explanatory, so its page heading is hidden from
   sight, but it stays the page's H1 for screen readers (display: none left
   the route with no heading at all). Other auth routes show their titles. */
body.uwp_login_page .entry-header {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Page rhythm (DESIGN.md): register uses GP's full-width layout, whose
   `.full-width-content.one-container .site-content { padding: 0 }` (0,3,0)
   outranks the shell's 24px, so the title sat flush on the masthead. Auth
   routes restore the shell space and the head adds the surface's 16. */
body.uwp_page.full-width-content.one-container .site-content {
	padding-block-start: var(--ml-space-5);
}

body.uwp_page .entry-header {
	margin-block-start: var(--ml-space-4);
}

@media (max-width: 768px) {
	body.uwp_page.full-width-content.one-container .site-content {
		padding-block-start: var(--ml-space-4);
	}
}

/* Page headings on register, forgot, reset, and change-password routes.
   T2: sign-in pages take the utility head. */
body.uwp_page h1 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--ml-fs-title);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ml-text);
	text-align: center;
}

/* Labels: UWP ships them sr-only; surface every field label in the mono
   treatment. The static/clip resets undo sr-only / visually-hidden.
   form-check labels (remember me) keep body type below. */
body.uwp_page .uwp_form label:not(.form-check-label),
body.uwp_page .validate_2fa_form label:not(.form-check-label),
body.uwp_page .uwp-wf-2fa-form label:not(.form-check-label) {
	position: static;
	width: auto;
	height: auto;
	margin: 0 0 6px;
	padding: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	border: 0;
	display: block;
	font-family: var(--ml-font-body);
	font-size: var(--ml-field-label-size);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ml-text-soft);
}

/* UsersWP's own two-factor form (validate_2fa_form) marks its label
   .visually-hidden, which AyeCode UI hides with !important. */
body.uwp_page .validate_2fa_form label.visually-hidden {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 0 6px !important;
	overflow: visible !important;
	clip: auto !important;
	white-space: normal !important;
}

/* UWP marks required with a red span; inherit the label color instead so
   asterisks match the login form's plain-text ones. Bootstrap's
   .text-danger utility is !important, so this must be too. */
body.uwp_page .uwp_form label .text-danger {
	color: inherit !important;
}

/* Placeholders that repeat the label are blanked server-side, but UWP's
   register confirm-password field hardcodes its placeholder with no
   filter (class-forms.php register_confirm_password_field). Labels are
   always visible now, so hide any placeholder that sneaks through.
   Scoped to .uwp_form only -- the 2FA form's 000000 format hint stays. */
body.uwp_page .uwp_form input::placeholder {
	color: transparent;
	opacity: 0;
}

/* Inputs */
body.uwp_page .uwp_form .form-control,
body.uwp_page .validate_2fa_form .form-control,
body.uwp_page .uwp-wf-2fa-form .form-control,
body.uwp_page .uwp_form input[type="text"],
body.uwp_page .uwp_form input[type="email"],
body.uwp_page .uwp_form input[type="password"],
body.uwp_page .uwp_form input[type="url"] {
	background: var(--ml-canvas);
	border: 1px solid var(--ml-rule, rgba(20, 20, 18, 0.22));
	border-radius: 0;
	padding: 14px 16px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	color: var(--ml-text);
	min-height: 48px;
	box-shadow: none;
	transition: border-color 180ms ease, background 180ms ease;
}

body.uwp_page .uwp_form .form-control:focus,
body.uwp_page .validate_2fa_form .form-control:focus,
body.uwp_page .uwp-wf-2fa-form .form-control:focus,
body.uwp_page .uwp_form input[type="text"]:focus,
body.uwp_page .uwp_form input[type="email"]:focus,
body.uwp_page .uwp_form input[type="password"]:focus {
	outline: 0;
	border-color: var(--ml-accent-large);
	background: var(--ml-canvas);
	box-shadow: inset 0 -2px 0 var(--ml-clay);
}

/* Password eye toggle: keep the input-group on one line with the toggle
   inside the field's right edge. position:static neutralizes AUI's
   top-0/end-0 absolute placement. */
body.uwp_page .uwp_form .input-group {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
}

body.uwp_page .uwp_form .input-group > .form-control {
	flex: 1 1 auto;
	width: 1%;
	min-width: 0;
	/* AUI gives form-controls a bottom margin; inside the flex group it
	   inflates the row so the toggle hangs 20px below the field. */
	margin-bottom: 0;
}

body.uwp_page .uwp_form .input-group-text {
	position: static;
	display: flex;
	align-items: center;
	padding: 0 14px;
	background: var(--ml-canvas);
	border: 1px solid var(--ml-rule, rgba(20, 20, 18, 0.22));
	border-left: 0;
	border-radius: 0;
	color: var(--ml-text-soft);
}

/* Primary submit -- login/register/forgot/reset/change and the 2FA
   Verify button (bridge renders .btn-primary). */
body.uwp_page .uwp_form .btn-primary,
body.uwp_page .validate_2fa_form .btn-primary,
body.uwp_page .uwp-wf-2fa-form .btn-primary,
body.uwp_page .uwp_form button[type="submit"],
body.uwp_page .uwp_form input[type="submit"] {
	background: var(--ml-btn-primary-bg);
	border: 1.5px solid var(--ml-btn-primary-bg);
	border-radius: var(--ml-radius-0);
	padding: 0 var(--ml-space-6);
	font-family: var(--ml-font-body);
	font-size: var(--ml-btn-label-size);
	font-weight: 600;
	letter-spacing: var(--ml-btn-label-track);
	text-transform: none;
	color: var(--ml-btn-primary-fg);
	min-height: var(--ml-control-h-lg);
	transition: background-color var(--ml-dur-base) var(--ml-ease-out), color var(--ml-dur-base) var(--ml-ease-out), border-color var(--ml-dur-base) var(--ml-ease-out), transform var(--ml-dur-fast) var(--ml-ease-out);
	cursor: pointer;
	width: 100%;
	box-shadow: none;
}

body.uwp_page .uwp_form .btn-primary:active,
body.uwp_page .validate_2fa_form .btn-primary:active,
body.uwp_page .uwp-wf-2fa-form .btn-primary:active,
body.uwp_page .uwp_form button[type="submit"]:active {
	transform: scale(.97);
}

body.uwp_page .uwp_form .btn-primary:hover,
body.uwp_page .uwp_form .btn-primary:focus-visible,
body.uwp_page .validate_2fa_form .btn-primary:hover,
body.uwp_page .uwp-wf-2fa-form .btn-primary:hover,
body.uwp_page .validate_2fa_form .btn-primary:focus-visible,
body.uwp_page .uwp-wf-2fa-form .btn-primary:focus-visible,
body.uwp_page .uwp_form button[type="submit"]:hover,
body.uwp_page .uwp_form button[type="submit"]:focus-visible {
	background: var(--ml-btn-primary-hover);
	border-color: var(--ml-btn-primary-hover);
	color: var(--ml-btn-primary-fg);
}

/* Checkbox (remember me / remember device): flex row so the box centers
   against the 44px label instead of hanging off its top. */
body.uwp_page .uwp_form .form-check,
body.uwp_page .uwp-wf-2fa-form .form-check {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-left: 0;
	margin-bottom: 0;
}

body.uwp_page .uwp_form .form-check .form-check-input,
body.uwp_page .uwp-wf-2fa-form .form-check .form-check-input {
	float: none;
	margin: 0;
	flex-shrink: 0;
}

body.uwp_page .form-check-input {
	width: 20px;
	height: 20px;
	border: 1px solid var(--ml-rule, rgba(20, 20, 18, 0.22));
	border-radius: 2px;
}

body.uwp_page .form-check-input:checked {
	background-color: var(--ml-clay-deep);
	border-color: var(--ml-clay-deep);
}

/* UWP's users-wp.css hides ALL labels in its login/register/forgot forms
   at (0,2,1); these selectors sit at (0,3,1) so the remember-me label
   survives regardless of stylesheet order. */
body.uwp_page .uwp_form .form-check-label,
body.uwp_page .uwp-wf-2fa-form .form-check-label {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-bottom: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: var(--ml-text-soft);
	letter-spacing: 0;
	text-transform: none;
}

/* Links inside the card: footer links (Create account / Forgot
   password / Login) and any inline form links. */
body.uwp_page .uwp-footer-links {
	display: flex;
	justify-content: center;
	gap: 28px;
	margin-top: 20px;
}

body.uwp_page .uwp-footer-links .uwp-footer-link {
	float: none;
}

body.uwp_page .uwp_form a,
body.uwp_page .uwp-footer-links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--ml-fs-label);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ml-link);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 180ms ease;
}

body.uwp_page .uwp_form a:hover,
body.uwp_page .uwp-footer-links a:hover {
	border-bottom-color: var(--ml-link);
}

/* Social row: theme-owned divider label (PHP echoes it), addon hr/br
   and any addon title suppressed, buttons centered on one line. Class
   uses the mlauth- prefix (not ml-) because AUI's bs-conversion rewrites
   class prefixes matching ml- to ms- inside UWP output. */
body.uwp_page .mlauth-social-heading {
	margin: 28px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--ml-rule-soft, rgba(20, 20, 18, 0.12));
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--ml-fs-label);
	letter-spacing: var(--ml-track-label);
	text-transform: uppercase;
	text-align: center;
	color: var(--ml-text-muted);
}

/* The prod-only legacy styling layer may render a DOM title
   (div.text-muted.h5) in some cached copies; hide any variant so it
   cannot stack above the theme's own divider label. */
body.uwp_page .uwp-social-class hr,
body.uwp_page .uwp-social-class br,
body.uwp_page .uwp-social-class .widget-title,
body.uwp_page .uwp-social-class .h5 {
	display: none;
}

/* Legacy UWP styling injects a "Login Via Social" pseudo-title from an
   inline body style block; out-specify it (0,3,1 vs 0,2,1) instead of
   using !important. */
body.uwp_page .entry-content .uwp_widget_social_login::before {
	content: none;
}

/* Providers: two matching secondary buttons, stacked full width, each with
   its mark and a "Continue with" label. The add-on ships Google as a picture
   of Google's blue button and Facebook as an icon-only circle; neither is
   restyled inside, so the picture is hidden and the label drawn here. */
body.uwp_page .uwp-social-class .bsui {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--ml-space-2);
	padding-top: 16px;
}

body.uwp_page .uwp-social-class .btn-facebook,
body.uwp_page .uwp_social_login_icon_google {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ml-space-3);
	width: 100%;
	height: auto;
	min-height: var(--ml-control-h);
	margin: 0 !important;
	padding: 0 var(--ml-space-5);
	border: 1.5px solid var(--ml-btn-secondary-bd) !important;
	border-radius: var(--ml-radius-0);
	background: transparent;
	color: var(--ml-btn-secondary-fg);
	font-family: var(--ml-font-body);
	font-size: var(--ml-btn-label-size);
	font-weight: 600;
	letter-spacing: var(--ml-btn-label-track);
	text-transform: none;
	text-decoration: none;
	transition: background-color var(--ml-dur-base) var(--ml-ease-out), transform var(--ml-dur-fast) var(--ml-ease-out);
}

body.uwp_page .uwp-social-class .btn-facebook:active,
body.uwp_page .uwp_social_login_icon_google:active {
	transform: scale(.97);
}

body.uwp_page .uwp-social-class .btn-facebook:hover,
body.uwp_page .uwp-social-class .btn-facebook:focus-visible,
body.uwp_page .uwp_social_login_icon_google:hover,
body.uwp_page .uwp_social_login_icon_google:focus-visible {
	background: var(--ml-btn-secondary-hover);
	color: var(--ml-btn-secondary-fg);
}

body.uwp_page .uwp-social-class .btn-facebook::after {
	content: "Continue with Facebook";
}

body.uwp_page .uwp_social_login_icon_google img {
	display: none;
}

body.uwp_page .uwp_social_login_icon_google::before {
	content: "";
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 13 4 4 13 4 24s9 20 20 20 20-9 20-20c0-1.3-.1-2.4-.4-3.5z'/><path fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/><path fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-8l-6.5 5C9.5 39.6 16.2 44 24 44z'/><path fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.4-.4-3.5z'/></svg>") center / contain no-repeat;
}

body.uwp_page .uwp_social_login_icon_google::after {
	content: "Continue with Google";
}

/* Notices/alerts (UWP notices and the 2FA bridge's alert messages) */
/* C1 (ml-system 2026-10-08): recess, hairline on every side, an info icon in
   pine. No side stripe, and no italic: a notice is not a quote. */
body.uwp_page .uwp-alert,
body.uwp_page .alert {
	position: relative;
	border: 1px solid var(--ml-rule-soft, rgba(20, 20, 18, 0.12));
	border-radius: 0;
	background: var(--ml-recess);
	padding: 14px 16px 14px 44px;
	font-family: var(--ml-font-body);
	font-style: normal;
	font-size: 15px;
	color: var(--ml-text-soft);
}

body.uwp_page .uwp-alert::before,
body.uwp_page .alert::before {
	/* The info icon, drawn as a mask so it takes the pine. Kept here, not in the
	   inline tokens, so pages without notices do not carry it. */
	--ml-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.3' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='M8 7v4.5M8 4.6v.2' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
	content: "";
	position: absolute;
	top: 18px;
	left: 16px;
	width: 16px;
	height: 16px;
	background: var(--ml-link);
	-webkit-mask: var(--ml-notice-icon) center / contain no-repeat;
	mask: var(--ml-notice-icon) center / contain no-repeat;
}

body.uwp_page .uwp-wf-2fa-network-error p {
	margin: 0 0 12px;
}

body.uwp_page .uwp-wf-2fa-fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border: 1px solid var(--ml-link);
	border-radius: 0;
	padding: 9px 14px;
	background: transparent;
	color: var(--ml-link);
	font-family: var(--wp--preset--font-family--body);
	font-style: normal;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
}

body.uwp_page .uwp-wf-2fa-fallback:hover,
body.uwp_page .uwp-wf-2fa-fallback:focus,
body.uwp_page .uwp-wf-2fa-fallback:focus-visible {
	background: var(--ml-pine);
	color: var(--ml-on-fill);
}

/* Forgot-page helper line (PHP echoes it). Class uses the mlauth- prefix
   (not ml-) because AUI's bs-conversion rewrites class prefixes matching
   ml- to ms- inside UWP output. */
body.uwp_page .mlauth-helper {
	font-family: var(--wp--preset--font-family--accent);
	font-style: italic;
	font-size: 15px;
	color: var(--ml-text-soft);
	text-align: center;
	margin: 0 0 24px;
}

/* Two-factor state: the bridge swaps form.uwp-login-form for
   form.uwp-wf-2fa-form inside the surviving card. */
body.uwp_page .uwp-wf-2fa-heading {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 26px;
	letter-spacing: -0.01em;
	color: var(--ml-text);
	text-align: center;
	margin: 0 0 8px;
}

body.uwp_page .uwp-wf-2fa-prompt,
body.uwp_page .validate_2fa_form > p {
	font-family: var(--wp--preset--font-family--accent);
	font-style: italic;
	font-size: 15px;
	color: var(--ml-text-soft);
	text-align: center;
	margin: 0 0 24px;
}

body.uwp_page .uwp-wf-2fa-form input[name="wfls-token"] {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 18px;
	letter-spacing: 0.35em;
	text-align: center;
}

/* Mid-2FA, account links and social sign-in are noise; hide them while
   the 2FA form is present. Fallback (no :has support) is the current
   visible state -- harmless. */
body.uwp_page .card-body:has(.uwp-wf-2fa-form) .uwp-footer-links,
body.uwp_page .card-body:has(.uwp-wf-2fa-form) .uwp-social-class,
body.uwp_page .card-body:has(.uwp-wf-2fa-form) .mlauth-social-heading,
body.uwp_page .card-body:has(.validate_2fa_form) .uwp-footer-links,
body.uwp_page .card-body:has(.validate_2fa_form) .uwp-social-class,
body.uwp_page .card-body:has(.validate_2fa_form) .mlauth-social-heading {
	display: none;
}

/* Register page: Community Card hero rendered by the CC plugin with an
   inline style block at specificity 0,1,0; these 0,1,1 selectors win.
   Flatten the radius, use the site's type, drop the drift animation. */
body.uwp_page .cc-uwp-hero {
	border-radius: 0;
	margin: 0 0 32px;
	animation: none;
}

body.uwp_page .cc-uwp-hero__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	letter-spacing: -0.02em;
	font-size: var(--ml-fs-title);
}

body.uwp_page .cc-uwp-hero__tagline {
	font-family: var(--wp--preset--font-family--body);
}

/* Mobile */
@media (max-width: 640px) {
	body.uwp_page .entry-content .uwp_page > .row > .card {
		margin: 0 16px var(--ml-space-6);
	}

	body.uwp_page .entry-content .uwp_page > .row > .card > .card-body {
		padding: 28px 20px;
	}

	body.uwp_page .uwp-footer-links {
		gap: 20px;
	}
}

/* Signed-out /login/: "Sign in" and what an account is for (inc/auth.php).
   Desktop sets it beside the card; phones put the form first and the
   guide under it, never hidden. */
.mlauth-intro__title {
	margin: 0 0 var(--ml-space-5);
	font-family: var(--ml-font-display);
	font-weight: 400;
	font-size: clamp(2.75rem, 6vw, 5.5rem);
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: var(--ml-text);
}

.mlauth-intro__lede {
	max-width: 30ch;
	margin: 0 0 var(--ml-space-7);
	font-family: var(--ml-font-display);
	font-style: italic;
	font-size: 1.375rem;
	line-height: 1.35;
	color: var(--ml-accent);
}

.mlauth-intro__list {
	max-width: 34rem;
	margin: 0;
	border-top: 1px solid var(--ml-rule);
}

.mlauth-intro__list > div {
	display: grid;
	grid-template-columns: 11rem 1fr;
	gap: var(--ml-space-5);
	padding: 20px 0;
	border-bottom: 1px solid var(--ml-rule);
}

.mlauth-intro__list dt {
	margin: 0;
	font-family: var(--ml-font-display);
	font-size: var(--ml-fs-subhead);
	line-height: 1.3;
	color: var(--ml-text);
}

.mlauth-intro__list dd {
	margin: 0;
	line-height: var(--ml-lh-body);
	color: var(--ml-ink-soft);
}

@media (min-width: 1024px) {
	body.uwp_login_page:not(.logged-in):not(.mlauth-framed) .inside-article {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 480px;
		column-gap: var(--ml-space-9);
		align-items: start;
		box-sizing: border-box;
		max-width: var(--container);
		margin-inline: auto;
		padding: var(--ml-section) var(--gutter-x) var(--ml-space-9);
	}

	.mlauth-intro {
		grid-column: 1;
		grid-row: 1;
		padding-top: var(--ml-space-2);
	}

	body.uwp_login_page:not(.logged-in):not(.mlauth-framed) .entry-content {
		grid-column: 2;
		grid-row: 1;
		background: none;
	}

	body.uwp_login_page:not(.logged-in):not(.mlauth-framed) .entry-content .uwp_page > .row > .card {
		max-width: none;
		margin: 0;
	}
}

@media (max-width: 1023px) {
	body.uwp_login_page:not(.logged-in):not(.mlauth-framed) .inside-article {
		display: flex;
		flex-direction: column;
		background: var(--ml-canvas);
	}

	body.uwp_login_page:not(.logged-in):not(.mlauth-framed) .entry-content {
		order: 1;
	}

	.mlauth-intro {
		order: 2;
		padding: var(--ml-space-6) var(--gutter-x) var(--ml-space-7);
	}

	/* The form already says "Sign in"; on phones the guide follows it. */
	.mlauth-intro__title {
		display: none;
	}

	.mlauth-intro__lede {
		margin-bottom: 28px;
		font-size: 1.2rem;
	}

	.mlauth-intro__list > div {
		grid-template-columns: 1fr;
		gap: 6px;
		padding: var(--ml-space-4) 0;
	}
}

/* ---------------------------------------------------------------------------
   The auth frame (inc/auth-frame.php; the final library's sign-in screens,
   A2c): the site's own /login/, /register/, /forgot/ and /reset/, signed
   out. GeneratePress's .inside-article holds, in order, the head, an
   optional state block, the (empty) entry header, UsersWP's card, the
   phone-only line to List your business and the aside. Phones show the form
   only; from 701px the aside (photo, what the account is for, a quiet box)
   takes the left column and the form sits beside it, 450px at most. Every
   rule is scoped to body.mlauth-framed, so the crawl Passport's sign-in
   pages and the change page keep the rules above.
   --------------------------------------------------------------------------- */
body.mlauth-framed .site.grid-container {
	width: 100%;
	max-width: none;
	padding-inline: 0;
}

body.mlauth-framed .site-content,
body.mlauth-framed.full-width-content.one-container .site-content {
	padding: 0;
}

body.mlauth-framed .inside-article {
	box-sizing: border-box;
	max-width: var(--container);
	margin-inline: auto;
	padding: 20px var(--gutter-x) var(--ml-space-9, 72px);
	background: none;
}

body.mlauth-framed .entry-header {
	display: none;
}

body.mlauth-framed .entry-content {
	margin: 0;
	background: none;
}

/* The register page's content wraps the form in a Bootstrap .container
   group, which adds its own gutter and bottom margin. */
body.mlauth-framed .entry-content > .wp-block-group.container {
	max-width: none;
	margin: 0;
	padding-inline: 0;
}

/* Head: kicker, the utility head left aligned (body.uwp_page h1 centres),
   the lede, and on sign-in where it returns to. */
body.mlauth-framed .mlauth-head {
	margin-bottom: 22px;
}

body.mlauth-framed .mlauth-head .ml-kicker {
	margin-bottom: 8px;
}

body.mlauth-framed .mlauth-head h1 {
	margin: 0;
	font-size: clamp(2.25rem, 1.6rem + 2vw, 3.0625rem);
	line-height: 1.15;
	text-align: left;
}

body.mlauth-framed .mlauth-head .ml-lede {
	margin-top: 12px;
	font-size: var(--ml-fs-small);
	line-height: 1.5;
}

body.mlauth-framed .mlauth-return {
	margin: 18px 0 0;
	padding: 10px 13px;
	border-left: 3px solid var(--ml-clay);
	background: var(--ml-recess);
	font-family: var(--ml-font-body);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--ml-text);
}

/* States drawn in the lead (register sent, forgot sent, reset done). */
body.mlauth-framed .mlauth-state {
	margin-bottom: 22px;
}

body.mlauth-framed .mlauth-state .ml-notice {
	margin: 0 0 8px;
}

body.mlauth-framed .mlauth-state .ml-actions {
	margin-top: 0;
}

/* The card: UsersWP's own, drawn as the library's open form panel. */
body.mlauth-framed.uwp_page .entry-content .uwp_page > .row {
	margin: 0;
}

body.mlauth-framed.uwp_page .entry-content .uwp_page > .row > .card {
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

body.mlauth-framed.uwp_page .entry-content .uwp_page > .row > .card > .card-body {
	padding: 0;
}

/* The expired reset draws UsersWP's forgot form inside its own card. */
body.mlauth-framed.uwp_page .entry-content .uwp_page > .row > .card .card-body .row,
body.mlauth-framed.uwp_page .entry-content .uwp_page > .row > .card .card-body .card {
	margin: 0;
	padding: 0;
	max-width: none;
	background: none;
	border: 0;
}

body.mlauth-framed.uwp_page .entry-content .uwp_page > .row > .card .card-body .card-body {
	padding: 0;
}

body.mlauth-framed.uwp_page .entry-content .uwp_page > .row > .card .card-body .card-body h2,
body.mlauth-framed.uwp_page .entry-content .uwp_page > .row > .card .card-body .card-title {
	display: none;
}

/* Fields: white, a firmer hairline, 46px tall with 16px text (no zoom on a
   phone), and no required asterisk (every field here is required and says
   so to assistive tech with `required`). */
body.mlauth-framed.uwp_page .uwp_form .form-control,
body.mlauth-framed.uwp_page .validate_2fa_form .form-control,
body.mlauth-framed.uwp_page .uwp-wf-2fa-form .form-control,
body.mlauth-framed.uwp_page .uwp_form input[type="text"],
body.mlauth-framed.uwp_page .uwp_form input[type="email"],
body.mlauth-framed.uwp_page .uwp_form input[type="password"],
body.mlauth-framed.uwp_page .uwp_form .input-group-text {
	min-height: 46px;
	padding-block: 10px;
	background: var(--ml-surface);
	border-color: var(--ml-rule-strong);
	font-size: 16px;
}

body.mlauth-framed.uwp_page .uwp_form label .text-danger {
	display: none;
}

body.mlauth-framed.uwp_page .uwp_form label:not(.form-check-label),
body.mlauth-framed.uwp_page .validate_2fa_form label:not(.form-check-label) {
	font-size: var(--ml-fs-small);
	color: var(--ml-text);
}

body.mlauth-framed.uwp_page .uwp_form .form-text,
body.mlauth-framed.uwp_page .uwp_form .uwp-field-description {
	margin-top: 7px;
	font-size: 13px;
	color: var(--ml-text-muted);
}

/* Code Snippets snippet 39 ("All CSS") hides every small.form-text.text-muted.d-block
   sitewide with !important to drop GeoDirectory's add-listing package hints, which
   also hid the password rule. Show the hints again inside the frame only. */
body.mlauth-framed .uwp_form small.form-text {
	display: block !important;
}

body.mlauth-framed.uwp_page .uwp_form .form-check-label {
	font-size: 15px;
	color: var(--ml-text);
}

/* Show: auth-frame.js puts a button inside the field's right edge in place
   of AyeCode UI's eye. */
body.mlauth-framed .uwp_form .input-group {
	position: relative;
}

body.mlauth-framed .uwp_form .input-group:has(.mlauth-reveal) > .form-control {
	padding-right: 68px;
}

body.mlauth-framed .mlauth-reveal {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	min-width: 60px;
	padding: 0 12px;
	border: 0;
	background: none;
	font-family: var(--ml-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--ml-link);
	cursor: pointer;
}

body.mlauth-framed .mlauth-reveal:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.mlauth-framed .mlauth-reveal:focus-visible {
	outline: 2px solid var(--ml-link);
	outline-offset: -4px;
}

/* Register: first and last name side by side from 480px. */
@media (min-width: 480px) {
	body.mlauth-framed--register .uwp-registration-form,
	body.mlauth-framed--register .uwp_form.uwp-register-form {
		display: flex;
		flex-wrap: wrap;
		column-gap: 18px;
	}

	body.mlauth-framed--register .uwp_form > * {
		flex: 1 1 100%;
	}

	body.mlauth-framed--register .uwp_form > [data-argument="first_name"],
	body.mlauth-framed--register .uwp_form > [data-argument="last_name"] {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* Buttons: the library's pine, sentence case, as written. The site-wide
   submit rule above reads the primary tokens, so the frame swaps them; the
   hover is .ml-btn--dark's 88% on the page. */
body.mlauth-framed .entry-content {
	--ml-btn-primary-bg: var(--ml-btn-dark-bg);
	--ml-btn-primary-fg: var(--ml-btn-dark-fg);
	--ml-btn-primary-hover: color-mix(in srgb, var(--ml-btn-dark-bg) 88%, var(--ml-canvas));
}

body.mlauth-framed.uwp_page :is(.uwp_form, .validate_2fa_form, .uwp-wf-2fa-form) :is(.btn-primary, button[type="submit"], input[type="submit"]) {
	margin-top: 4px;
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none !important; /* over Bootstrap's .text-uppercase utility */
}

/* Links: plain body type, underlined, pine. UsersWP's own footer links are
   replaced by .mlauth-links on every screen (its way back to sign in opens
   its sign-in window or the crawl's page). */
body.mlauth-framed .uwp-footer-links {
	display: none;
}

body.mlauth-framed .mlauth-links,
body.mlauth-framed.uwp_page .uwp_form .mlauth-terms {
	font-family: var(--ml-font-body);
	letter-spacing: 0;
	text-transform: none;
}

body.mlauth-framed .mlauth-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 20px;
	margin: 16px 0 0;
	font-size: var(--ml-fs-small);
	text-align: left;
	color: var(--ml-text);
}

body.mlauth-framed .mlauth-terms a,
body.mlauth-framed .mlauth-links a,
body.mlauth-framed .mlauth-back a {
	margin: 0;
	font-family: var(--ml-font-body);
	font-size: inherit;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ml-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	border: 0;
}

/* Every link but the terms' inline ones is a 44px target. */
body.mlauth-framed .mlauth-links a,
body.mlauth-framed .mlauth-back a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* The terms' links run in the sentence: the site-wide UsersWP link rule
   above makes every form link a 44px box. */
body.mlauth-framed.uwp_page .uwp_form .mlauth-terms a {
	display: inline;
	min-height: 0;
}

body.mlauth-framed .mlauth-links a:hover,
body.mlauth-framed .mlauth-terms a:hover,
body.mlauth-framed .mlauth-back a:hover {
	color: var(--ml-link-hover);
	text-decoration-thickness: 2px;
}

body.mlauth-framed.uwp_page .uwp_form .mlauth-terms {
	margin: 4px 0 18px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ml-text-soft);
}

body.mlauth-framed .mlauth-back {
	margin: 16px 0 0;
	font-size: var(--ml-fs-small);
}

/* UsersWP's wrapper around the links and social row centres its text and
   keeps a bottom margin; with no provider configured the social block is an
   empty shell, so it goes. */
body.mlauth-framed .card-body > .text-center {
	margin-bottom: 0 !important;
	text-align: left !important;
}

body.mlauth-framed .uwp-social-class:not(:has(a)) {
	display: none;
}

/* Providers: Google then Facebook under a quiet rule, side by side where the
   column is wide enough. */
body.mlauth-framed .mlauth-social-heading {
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--ml-rule);
	font-family: var(--ml-font-body);
	font-size: var(--ml-fs-label);
	letter-spacing: 0;
	text-transform: none;
	color: var(--ml-text-soft);
}

body.mlauth-framed .uwp-social-class .bsui {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	padding-top: 10px;
}

body.mlauth-framed .uwp_social_login_icon_google {
	order: -1;
}

body.mlauth-framed .uwp-social-class .btn-facebook,
body.mlauth-framed .uwp_social_login_icon_google {
	min-height: 46px;
	padding: 0 11px;
	font-size: 14px;
	white-space: normal;
}

@media (min-width: 901px) {
	body.mlauth-framed .uwp-social-class .bsui {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	body.mlauth-framed .uwp-social-class .btn-facebook,
	body.mlauth-framed .uwp_social_login_icon_google {
		gap: 6px;
		font-size: 13px;
	}
}

/* Errors: UsersWP's own alert as the error box, under the heading
   auth-frame.js gives it on sign-in. */
body.mlauth-framed.uwp_page .alert-danger {
	margin-bottom: 20px;
	padding: 16px 18px;
	border: 1px solid var(--ml-error);
	background: var(--ml-surface);
	background: color-mix(in srgb, var(--ml-error) 7%, var(--ml-surface));
	font-size: var(--ml-fs-small);
	line-height: 1.5;
	color: var(--ml-text-soft);
}

body.mlauth-framed.uwp_page .alert-danger::before,
body.mlauth-framed.uwp_page .alert-danger > i {
	display: none;
}

body.mlauth-framed .mlauth-error-title {
	margin: 0 0 6px;
	font-family: var(--ml-font-display);
	font-size: 1.4375rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ml-text);
}

/* The second step: the page head says it (auth-frame.js), UsersWP's prompt
   is the notice, and the code takes the mono figures. Only the way back to
   sign in stays under it. */
body.mlauth-framed .uwp-wf-2fa-heading {
	display: none;
}

body.mlauth-framed .validate_2fa_form > p,
body.mlauth-framed .uwp-wf-2fa-prompt {
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid var(--ml-rule-soft);
	background: var(--ml-recess);
	font-family: var(--ml-font-body);
	font-style: normal;
	font-size: var(--ml-fs-small);
	line-height: 1.5;
	text-align: left;
	color: var(--ml-text-soft);
}

body.mlauth-framed .validate_2fa_form input[name="authcode"] {
	font-family: var(--ml-font-mono);
	letter-spacing: 0.2em;
}

/* The second step's form hides the social row already (above). */
body.mlauth-step .mlauth-links,
body.mlauth-step .mlauth-business,
body.mlauth-step .mlauth-return {
	display: none;
}

/* Phones: the way to List your business, under the form. */
body.mlauth-framed .mlauth-business {
	margin: 10px 0 0;
	padding-top: 16px;
	font-size: 13px;
	color: var(--ml-text-soft);
}

body.mlauth-framed .mlauth-business a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
	color: var(--ml-link);
}

/* The aside: from 701px only. Its picture gives phones an empty image, so
   they never download the photograph. */
body.mlauth-framed .mlauth-aside {
	display: none;
}

/* The photo and the heading under it are the shared photo and utility head;
   components.css loads after this sheet, so these overrides carry the aside. */
.mlauth-photo .ml-photo__frame {
	display: block;
	height: 430px;
}

.mlauth-aside .mlauth-aside__title {
	margin-top: 25px;
	font-size: clamp(1.875rem, 1.2rem + 1.4vw, 2.25rem);
}

.mlauth-aside__text {
	max-width: 460px;
	margin: 12px 0 0;
	line-height: var(--ml-lh-body);
	color: var(--ml-text-soft);
}

@media (min-width: 701px) {
	body.mlauth-framed .inside-article {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto auto auto 1fr;
		grid-template-areas:
			"aside head"
			"aside state"
			"aside card"
			"aside .";
		column-gap: 35px;
		align-items: start;
		padding-top: 38px;
		padding-bottom: 45px;
	}

	body.mlauth-framed .mlauth-head,
	body.mlauth-framed .mlauth-state,
	body.mlauth-framed .entry-content {
		width: 100%;
		max-width: 450px;
	}

	body.mlauth-framed .mlauth-head {
		grid-area: head;
	}

	body.mlauth-framed .mlauth-head .ml-lede {
		font-size: 1rem;
	}

	body.mlauth-framed .mlauth-state {
		grid-area: state;
	}

	body.mlauth-framed .entry-content {
		grid-area: card;
	}

	body.mlauth-framed .mlauth-business {
		display: none;
	}

	body.mlauth-framed .mlauth-aside {
		display: block;
		grid-area: aside;
	}
}

@media (min-width: 1001px) {
	body.mlauth-framed .inside-article {
		column-gap: 64px;
	}

	.mlauth-photo .ml-photo__frame {
		height: 530px;
	}
}