/*
 * BuddyNext — Auth stylesheet (v2 design system)
 *
 * Composes the global v2 primitives (.bn-btn[data-variant], .bn-input,
 * .bn-badge[data-tone], .bn-tabs/.bn-tab, .bn-progress[data-indeterminate])
 * defined in bn-base.css. This file owns only the auth-specific layout
 * vocabulary:
 *
 *   .bn-auth-page         — full-viewport canvas
 *   .bn-auth-card         — centered card (login + register tabs)
 *   .bn-auth-hero         — gradient header strip on the card
 *   .bn-auth-divider      — "or continue with" rule
 *   .bn-auth-social       — three-up social provider row
 *   .bn-verify-page       — same canvas, narrower card for verify states
 *
 * Token-only. Dark mode flips automatically through --bn-* tokens.
 * Mobile ≤640px: card becomes edge-to-edge.
 */

/* ── Auth canvas (login + register + verify) ────────────────────────── */

.bn-auth-page {
	min-height: 100vh;
	background: var(--bn-canvas);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--bn-s6);
	font-family: var(--bn-font-ui);
	color: var(--bn-ink);
}

.bn-auth-card {
	background: var(--bn-surface);
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-lg);
	width: 100%;
	max-width: 420px;
	overflow: hidden;
	box-shadow: var(--bn-shadow-sm);
}

.bn-auth-card[data-variant="register"] {
	max-width: 480px;
}

.bn-auth-card[data-variant="verify"] {
	max-width: 440px;
	text-align: center;
}

/* ── Split-panel shell (brand aside + form) ────────────────────────────
 * Wraps the auth surfaces (login / signup / verify) in a two-column card:
 * a branded gradient/image aside next to the form column. Admin-configurable
 * via Settings → Registration → "Login & Sign-up Panel"; falls back to site
 * identity so it is branded out of the box. data-panel="off" → single column. */
.bn-auth-shell {
	display: flex;
	width: 100%;
	/* Height comes from the stretch chain off .bn-app--auth (which is sized to
	 * the viewport minus the theme chrome) — never a hard 100vh, which would
	 * overflow below the kept header/footer and force a page scroll. */
	min-height: 0;
	background: var(--bn-surface);
	overflow: hidden;
}

/* Panel off → no image side; the form centers on the full canvas. */
.bn-auth-shell[data-panel="off"] {
	justify-content: center;
}

/* The aside: gradient by default, or a full-bleed image when configured. */
.bn-auth-aside {
	flex: 0 0 56%;
	position: relative;
	display: flex;
	align-items: stretch;
	background: linear-gradient(150deg, var(--auth-grad-from) 0%, var(--auth-grad-via) 55%, var(--auth-grad-to) 100%);
	color: #fff;
	padding: var(--bn-s12) var(--bn-s10);
	overflow: hidden;
}

/* Cover photo + a brand-tinted scrim so overlaid text stays legible on any image. */
.bn-auth-aside[data-has-image] {
	background-image:
		linear-gradient(165deg, color-mix(in oklab, var(--auth-grad-from) 62%, transparent) 0%, color-mix(in oklab, var(--auth-grad-to) 72%, transparent) 100%),
		var(--bn-auth-aside-image);
	background-size: cover, cover;
	background-position: center, center;
}

.bn-auth-aside__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--bn-s6);
	width: 100%;
	height: 100%;
}

/* Featured quote — the visual centre of the panel. The compound selector beats
 * host-theme `blockquote` rules (background / border / italic / dark text) that
 * would otherwise bleed in. */
.bn-auth-aside blockquote.bn-auth-aside__quote {
	position: relative;
	margin: 0;
	padding: var(--bn-s8) 0 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	quotes: none;
	color: #fff;
	font-family: var(--bn-font-display);
	font-size: var(--bn-text-2xl);
	font-style: normal;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.01em;
	max-width: 24ch;
}

.bn-auth-aside blockquote.bn-auth-aside__quote::after {
	content: none;
}

.bn-auth-aside__quote::before {
	content: "\201C";
	position: absolute;
	top: -0.15em;
	left: -0.04em;
	font-size: 4.5rem;
	line-height: 1;
	opacity: 0.35;
}

.bn-auth-aside__foot {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--bn-s2);
}

.bn-auth-aside__heading {
	font-family: var(--bn-font-display);
	font-size: var(--bn-text-3xl, 1.875rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0;
	color: inherit;
	overflow-wrap: anywhere;
}

.bn-auth-aside__tagline {
	font-size: var(--bn-text-base);
	line-height: 1.55;
	margin: 0;
	color: inherit;
	opacity: 0.9;
	max-width: 34ch;
}

/* Form column: the existing card/verify-card drops its own chrome inside the
 * shell so the shell owns the border, radius, and shadow. */
.bn-auth-shell .bn-auth-card,
.bn-auth-shell .bn-verify-card {
	flex: 1 1 auto;
	max-width: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Keep the form readable: cap its measure and center it in the form column. */
.bn-auth-shell .bn-auth-body,
.bn-auth-shell .bn-verify-body {
	width: 100%;
	max-width: 400px;
	margin-inline: auto;
	padding: var(--bn-s8) var(--bn-s8);
}

/* The old top gradient strip is redundant once the aside carries the brand. */
.bn-auth-shell .bn-auth-hero {
	display: none;
}

/* Gradient hero strip (logo + brand) sits above the card body. */
.bn-auth-hero {
	background: linear-gradient(135deg, var(--auth-grad-from) 0%, var(--auth-grad-via) 60%, var(--auth-grad-to) 100%);
	color: var(--bn-accent-fg);
	padding: var(--bn-s5) var(--bn-s6);
	display: flex;
	align-items: center;
	gap: var(--bn-s3);
}

.bn-auth-hero__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
}

.bn-auth-hero__logo .bn-icon {
	width: 28px;
	height: 28px;
}

.bn-auth-hero__wordmark {
	font-family: var(--bn-font-display);
	font-size: var(--bn-text-lg);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.bn-auth-hero__wordmark span {
	opacity: 0.78;
	font-weight: 600;
}

.bn-auth-body {
	padding: var(--bn-s6);
}

.bn-auth-body[data-align="center"] {
	text-align: center;
}

/* Form-side brand logo (above the title) for a branded login/signup. */
.bn-auth-formlogo {
	margin: 0 0 var(--bn-s5);
}

.bn-auth-formlogo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 200px;
	max-height: 46px;
}

.bn-auth-title {
	font-family: var(--bn-font-display);
	font-size: var(--bn-text-2xl);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--bn-ink);
	margin: 0 0 var(--bn-s2);
	line-height: 1.2;
}

.bn-auth-sub {
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-3);
	margin: 0 0 var(--bn-s5);
	line-height: 1.5;
}

/* Tabs strip — uses primitive .bn-tabs but compact centered variant. */
.bn-auth-tabs {
	margin: 0 0 var(--bn-s5);
}

/* Form rows */
.bn-auth-form {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s4);
}

.bn-auth-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bn-auth-field__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--bn-s3);
}

.bn-auth-label {
	font-size: var(--bn-text-sm);
	font-weight: var(--bn-fw-medium-semibold);
	color: var(--bn-ink);
}

.bn-auth-hint {
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-3);
	line-height: 1.45;
}

.bn-auth-field__msg {
	font-size: var(--bn-text-xs);
	color: var(--bn-danger);
	min-height: 0;
}

/*
 * Honeypot — taken out of the visual + a11y tree without display:none or
 * [hidden] (which well-behaved bots skip). Kept in the layout flow but pushed
 * off-screen and made non-interactive so real users never see or tab into it.
 */
.bn-auth-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Link-styled button (e.g. "Email me a code instead" on the 2FA step). */
.bn-auth-linkbtn {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--bn-accent, #2563eb);
	cursor: pointer;
	text-decoration: underline;
}

.bn-auth-linkbtn:hover {
	text-decoration: none;
}

.bn-auth-linkbtn:disabled {
	color: var(--bn-ink-3);
	cursor: default;
	text-decoration: none;
}

.bn-auth-field__msg[data-tone="success"] {
	color: var(--bn-success);
}

/* Success notice block (e.g. "reset link sent" on the password-reset screen). */
.bn-auth-notice {
	font-size: var(--bn-text-sm);
	color: var(--bn-success);
	background: var(--bn-success-bg, rgba(22, 163, 74, 0.08));
	border: 1px solid var(--bn-success);
	border-radius: var(--bn-radius-md, 8px);
	padding: var(--bn-s3, 12px) var(--bn-s4, 16px);
	margin-block-end: var(--bn-s4, 16px);
}

/* Required-field asterisk on registration profile fields. */
.bn-auth-required {
	color: var(--bn-danger);
	margin-inline-start: 2px;
}

/* Secondary action row under an auth form (e.g. "Back to sign in"). */
.bn-auth-alt {
	margin-block-start: var(--bn-s4, 16px);
	font-size: var(--bn-text-sm);
	text-align: center;
}

/* Full-width button helper for auth + block forms. */
.bn-auth-card .bn-btn[data-full],
.bn-block-login-form .bn-btn[data-full],
.bn-block-registration-form .bn-btn[data-full],
.bn-verify-card .bn-btn[data-full] {
	width: 100%;
}

/* Footer row for switch + terms */
.bn-auth-foot {
	margin-top: var(--bn-s5);
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-3);
	text-align: center;
	line-height: 1.5;
}

.bn-auth-foot a {
	color: var(--bn-accent);
	font-weight: var(--bn-fw-medium-semibold);
	text-decoration: none;
}

.bn-auth-foot a:hover {
	text-decoration: underline;
}

.bn-auth-foot--terms {
	margin-top: var(--bn-s4);
	font-size: var(--bn-text-xs);
}

/* "or continue with" divider */
.bn-auth-divider {
	display: flex;
	align-items: center;
	gap: var(--bn-s3);
	margin: var(--bn-s5) 0;
	color: var(--bn-ink-4);
	font-size: var(--bn-text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.bn-auth-divider::before,
.bn-auth-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--bn-line);
}

/* Social-login row */
.bn-auth-social {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bn-s2);
}

.bn-auth-social .bn-btn[data-variant] {
	width: 100%;
	padding: 0 var(--bn-s2);
}

/* Password-strength meter (composes .bn-progress) */
.bn-auth-strength {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s1);
}

.bn-auth-strength__label {
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-3);
	font-weight: 500;
}

/* Tab-content visibility (login vs register) */
.bn-auth-panel { display: none; }
.bn-auth-panel[data-active] { display: block; }

/* Two-step verification step on the login card: a class on the card swaps the
 * credentials panel out for the 2FA panel (SSR-safe — no data-active needed). */
.bn-2fa-loginpanel { display: none; }
.bn-auth-card.bn-2fa-active .bn-auth-panel[data-active] { display: none; }
.bn-auth-card.bn-2fa-active .bn-2fa-loginpanel { display: block; }

/* ── Verify-page card content ───────────────────────────────────────── */

.bn-verify-page {
	/* Fill the auth wrapper. .bn-verify-page is the full-canvas centring frame,
	   but it sits inside the flex .bn-auth shell; without an explicit width it
	   shrinks to its card's content and lands flush-left, so its own
	   justify-content:center had no room to centre the card. */
	width: 100%;
	min-height: 100vh;
	background: var(--bn-canvas);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--bn-s6);
	font-family: var(--bn-font-ui);
	color: var(--bn-ink);
}

.bn-verify-card {
	background: var(--bn-surface);
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-lg);
	max-width: 440px;
	width: 100%;
	overflow: hidden;
	box-shadow: var(--bn-shadow-sm);
}

.bn-verify-body {
	padding: var(--bn-s8) var(--bn-s6) var(--bn-s6);
	text-align: center;
}

.bn-verify-icon {
	width: 56px;
	height: 56px;
	border-radius: var(--bn-r-full);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--bn-s4);
}

.bn-verify-icon .bn-icon {
	width: 28px;
	height: 28px;
}

.bn-verify-icon[data-tone="success"] {
	background: var(--bn-success-bg);
	color: var(--bn-success);
}

.bn-verify-icon[data-tone="danger"] {
	background: var(--bn-danger-bg);
	color: var(--bn-danger);
}

.bn-verify-icon[data-tone="info"] {
	background: var(--bn-accent-100);
	color: var(--bn-accent-700);
}

.bn-verify-badge-row {
	margin: 0 0 var(--bn-s3);
}

.bn-verify-email-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--bn-sunken);
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-full);
	padding: 4px var(--bn-s3);
	font-size: var(--bn-text-xs);
	font-weight: 500;
	color: var(--bn-ink-2);
	margin: var(--bn-s2) 0 var(--bn-s5);
}

.bn-verify-email-chip .bn-icon {
	width: 14px;
	height: 14px;
}

.bn-verify-actions {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s3);
	margin-top: var(--bn-s5);
}

.bn-verify-actions .bn-btn[data-variant] {
	width: 100%;
}

.bn-verify-progress {
	margin: var(--bn-s4) auto var(--bn-s5);
	max-width: 220px;
}

.bn-verify-footer {
	border-top: 1px solid var(--bn-line-faint);
	padding: var(--bn-s4) var(--bn-s6);
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-3);
	text-align: center;
}

.bn-verify-footer a {
	color: var(--bn-accent);
	text-decoration: none;
}

.bn-verify-footer a:hover {
	text-decoration: underline;
}

/* ── Block-form variants (Gutenberg login + registration blocks) ───── */

.bn-block-login-form,
.bn-block-registration-form {
	background: var(--bn-surface);
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-lg);
	padding: var(--bn-s6);
	max-width: 420px;
	width: 100%;
	font-family: var(--bn-font-ui);
	color: var(--bn-ink);
}

.bn-block-heading {
	font-family: var(--bn-font-display);
	font-size: var(--bn-text-xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--bn-ink);
	margin: 0 0 var(--bn-s5);
}

.bn-block-form-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-3);
}

.bn-block-form-row label {
	display: inline-flex;
	align-items: center;
	gap: var(--bn-s2);
	cursor: pointer;
}

.bn-block-form-row input[type="checkbox"] {
	accent-color: var(--bn-accent);
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.bn-block-form-row a {
	color: var(--bn-accent);
	text-decoration: none;
}

.bn-block-form-row a:hover {
	text-decoration: underline;
}

/* ── wp_login_form() overrides ─────────────────────────────────────── */
/*
 * wp_login_form() injects its own #loginform with hardcoded labels,
 * inputs and submit. We restyle inputs + submit to match v2 primitives.
 */

.bn-auth-wp-login-wrap #loginform p {
	margin: 0 0 var(--bn-s4);
}

.bn-auth-wp-login-wrap #loginform label {
	display: block;
	font-size: var(--bn-text-sm);
	font-weight: var(--bn-fw-medium-semibold);
	color: var(--bn-ink);
	margin-bottom: 6px;
}

.bn-auth-wp-login-wrap #loginform input[type="text"],
.bn-auth-wp-login-wrap #loginform input[type="password"] {
	width: 100%;
	padding: 0 var(--bn-s3);
	height: 36px;
	background: var(--bn-surface);
	border: 1px solid var(--bn-line-strong);
	border-radius: var(--bn-r-md);
	color: var(--bn-ink);
	font-family: var(--bn-font-ui);
	font-size: var(--bn-text-sm);
	box-sizing: border-box;
	transition: border-color var(--bn-dur) var(--bn-ease),
				box-shadow var(--bn-dur) var(--bn-ease);
}

.bn-auth-wp-login-wrap #loginform input[type="text"]:focus-visible,
.bn-auth-wp-login-wrap #loginform input[type="password"]:focus-visible {
	outline-color: transparent;
	box-shadow: var(--bn-ring);
	border-color: var(--bn-accent);
}

.bn-auth-wp-login-wrap #loginform .forgetmenot {
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-3);
}

.bn-auth-wp-login-wrap #loginform .forgetmenot label {
	display: inline-flex;
	align-items: center;
	gap: var(--bn-s2);
	font-weight: 500;
	margin-bottom: 0;
	cursor: pointer;
}

.bn-auth-wp-login-wrap #loginform .submit input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bn-s2);
	height: 44px;
	width: 100%;
	padding: 0 var(--bn-s5);
	background: var(--bn-accent);
	color: var(--bn-accent-fg);
	border: 1px solid transparent;
	border-radius: var(--bn-r-md);
	font-family: var(--bn-font-ui);
	font-size: var(--bn-text-base);
	font-weight: var(--bn-fw-medium-semibold);
	letter-spacing: -0.005em;
	cursor: pointer;
	transition: background var(--bn-dur) var(--bn-ease);
}

.bn-auth-wp-login-wrap #loginform .submit input[type="submit"]:hover {
	background: var(--bn-accent-700);
}

.bn-auth-wp-login-wrap #loginform .submit input[type="submit"]:focus-visible {
	outline-color: transparent;
	box-shadow: var(--bn-ring);
}

/* ── Mobile ≤640px ─────────────────────────────────────────────────── */

@media (max-width: 640px) {
	.bn-auth-page,
	.bn-verify-page {
		padding: 0;
		align-items: stretch;
	}

	.bn-auth-card,
	.bn-auth-card[data-variant="register"],
	.bn-auth-card[data-variant="verify"],
	.bn-verify-card {
		max-width: 100%;
		border-radius: 0;
		border-left: none;
		border-right: none;
		min-height: 100vh;
	}

	.bn-auth-field__row {
		grid-template-columns: 1fr;
	}

	.bn-auth-social {
		grid-template-columns: 1fr;
	}

	.bn-block-login-form,
	.bn-block-registration-form {
		border-radius: 0;
		border-left: none;
		border-right: none;
		max-width: 100%;
	}
}

/* ── Split-panel shell responsive ──────────────────────────────────────
 * Tablet and down: stack the aside above the form as a compact brand band. */
@media (max-width: 860px) {
	.bn-auth-shell {
		flex-direction: column;
		min-height: 0;
	}

	.bn-auth-aside {
		flex: 0 0 auto;
		min-height: 36vh;
		align-items: flex-end;
		padding: var(--bn-s8) var(--bn-s6) var(--bn-s6);
	}

	.bn-auth-aside__heading {
		font-size: var(--bn-text-2xl);
	}

	.bn-auth-aside__tagline {
		max-width: none;
	}

	.bn-auth-shell .bn-auth-body,
	.bn-auth-shell .bn-verify-body {
		max-width: 440px;
		padding: var(--bn-s6);
	}
}

@media (max-width: 640px) {
	.bn-auth-aside {
		min-height: 28vh;
		padding: var(--bn-s6);
	}
}

/* ── Auth shell: slim centered column ──────────────────────────────────── */
.bn-app--auth {
	min-height: 100vh;
	background: var(--bn-canvas);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--bn-s6) var(--bn-s4);
}
.bn-app--auth .bn-auth {
	width: 100%;
	max-width: 480px;
}

/* Full-canvas auth (login / signup / verify only — NOT onboarding, which shares
 * the .bn-app--auth shell but keeps its centered wizard column). The split shell
 * fills the viewport edge-to-edge between the theme header and footer. */
body.bn-hub-auth .bn-app--auth {
	/* .bn-app is a flex COLUMN; the inner wrapper grows to fill it. Height is
	 * sized by the theme's sticky-footer flex chain (see Reign's BN compat),
	 * which makes the content area EXACTLY viewport - header - footer — no magic
	 * numbers, no page scroll. Falls back to a sensible floor on themes that do
	 * not provide the chain. */
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	padding: 0;
	flex: 1 0 auto;
	min-height: 70vh;
}
body.bn-hub-auth .bn-app--auth .bn-auth {
	flex: 1 1 auto;
	max-width: none;
	display: flex;
	align-items: stretch;
}
body.bn-hub-auth .bn-auth-page {
	min-height: 0;
	padding: 0;
	align-items: stretch;
	flex: 1;
}

/* NOTE: the host theme's own content-wrapper padding (e.g. Reign's
 * .site-content) is zeroed by the theme's BuddyNext compat layer, not here —
 * the theme owns that markup. See reign-buddynext-functions.php. */

/* Inline field error message + check row */
.bn-auth-field--check {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--bn-s3);
	flex-wrap: wrap;
}
.bn-auth-check {
	display: inline-flex;
	align-items: center;
	gap: var(--bn-s2);
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-2);
	cursor: pointer;
}
.bn-auth-link {
	color: var(--bn-accent);
	text-decoration: none;
	font-size: var(--bn-text-sm);
}
.bn-auth-link:hover { text-decoration: underline; }

/* Field invalid outline */
.bn-input[aria-invalid="true"] {
	border-color: var(--bn-danger);
	box-shadow: 0 0 0 3px var(--bn-danger-100, rgba(220, 38, 38, 0.12));
}

/* Verify feedback chip — visible only when state.feedback set */
.bn-verify-feedback {
	margin: var(--bn-s3) auto;
	display: inline-flex;
}

/* Password show/hide toggle — the button sits inside the input on the trailing
   edge; the input reserves room so typed text never runs under it. */
.bn-auth-pw {
	position: relative;
}
.bn-auth-pw__input {
	padding-inline-end: 4.5rem;
}
.bn-auth-pw__toggle {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: var(--bn-s2, 8px);
	transform: translateY(-50%);
	padding: var(--bn-s1, 4px) var(--bn-s2, 8px);
	border: 0;
	background: transparent;
	color: var(--bn-accent, #2563eb);
	font: inherit;
	font-size: var(--bn-text-sm, 0.875rem);
	font-weight: 600;
	cursor: pointer;
	border-radius: var(--bn-r-sm, 6px);
}
.bn-auth-pw__toggle:hover {
	text-decoration: underline;
}
.bn-auth-pw__toggle:focus-visible {
	outline: none;
	box-shadow: var(--bn-ring);
}