/**
 * Blue Stories — Midnight Blue skin for the WordPress auth screens
 * (login / register / lost password / reset). The battle-tested core flows are
 * kept; only the presentation is ours. Self-contained: wp-login.php loads no
 * theme stylesheet, so the tokens are restated here (mirror blue-stories.css).
 */

:root {
	color-scheme: dark;
}

body.login {
	background:
		radial-gradient(1200px 600px at 80% -10%, rgba(79, 139, 255, 0.12), transparent 60%),
		radial-gradient(900px 500px at 0% 0%, rgba(110, 168, 255, 0.08), transparent 55%),
		#0b1220;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #e8edf7;
}

#login {
	padding: 7vh 16px 32px;
}

/* The lock-up (mark + wordmark, assets/img/brand/, generated from art/brand/)
 * instead of the WordPress logo. Until 22/09/2026 this pointed at the old
 * Blue Stories logo, a file that never reached live: the login page's mark
 * was a 404. */
.login h1 a {
	background-image: url(../img/brand/logo.svg);
	background-size: contain;
	background-position: center;
	width: 230px;
	height: 60px;
	margin-bottom: 18px;
}

/* The card. */
.login form {
	background: #101a2e;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-left: 3px solid #4f8bff;
	border-radius: 16px;
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
	padding: 26px 24px 28px;
}

/* "Remember Me" and its help bubble, on one line.
 *
 * WordPress 6.9 hung a `?` toggle off this label (.wp-tooltip). Its button is
 * an inline-block with the checkbox's own baseline, so it floated a few pixels
 * ABOVE the words it belongs to — the owner spotted it before the text was even
 * translated. Laying the row out as a flex line puts all three on one centre
 * line and stops the checkbox, the label and the mark drifting apart. */
.login form .forgetmenot {
	margin-top: 4px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.login form .forgetmenot label {
	margin: 0;
	line-height: 1.2;
}

/* The mark itself: quiet until wanted, and the same muted ink as the label. */
.login .wp-tooltip__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: #5b6980;
	cursor: pointer;
	transition: color 0.15s ease;
}

.login .wp-tooltip__toggle:hover,
.login .wp-tooltip__toggle:focus-visible {
	color: #6ea8ff;
}

.login .wp-tooltip__toggle .dashicons {
	width: 18px;
	height: 18px;
	font-size: 18px;
	line-height: 1;
}

/* The bubble is a native popover, which paints on the browser's top layer —
 * it inherits nothing from this page, so it states its own colours or it
 * arrives as white-on-white for a reader in dark mode. */
.login .wp-tooltip__bubble {
	max-width: 320px;
	padding: 12px 14px;
	background: #0f1930;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
	color: #e8edf7;
	font-size: 13px;
	line-height: 1.5;
}

.login .wp-tooltip__close {
	background: none;
	border: 0;
	color: #93a1ba;
	cursor: pointer;
}

.login .wp-tooltip__close:hover,
.login .wp-tooltip__close:focus-visible {
	color: #e8edf7;
}

.login label {
	color: #93a1ba;
	font-size: 13px;
}

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	background: #0d1526;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	color: #e8edf7;
	font-size: 15px;
	padding: 9px 12px;
	box-shadow: none;
}

/* The public-name field is ours, not core's, so it needs the same full width
 * core gives #user_login/#user_email — plus room for its explanation. */
.login #bs_public_name,
.login #bs_pass,
.login #bs_pass2 { width: 100%; box-sizing: border-box; }

/* ---- Password fields: reveal eye + live strength meter ----
 * The reveal button uses core's own `.wp-pwd > .wp-hide-pw` markup, so it is
 * the SAME control as the one on the sign-in screen — identical by
 * construction rather than by imitation, and it stays that way if WordPress
 * ever restyles it. Only the two things core has no opinion about are ours:
 * the field spacing (core's inputs carry a 16px bottom margin that would push
 * the strength bar away) and the bar itself. */
.login .bs-pw-field { margin-bottom: 16px; }
.login .bs-pw-field .wp-pwd .input { margin-bottom: 0; }
/* Both eyes ship together; CSS decides which one shows. FLEX everywhere in
 * the button: dashicons are inline-y and sit on the text BASELINE, which
 * dragged the register-form eye below centre — flex centring is geometric
 * and immune to font metrics. */
.login .wp-hide-pw {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
}
.login .wp-hide-pw .dashicons {
	width: 20px;
	height: 20px;
	font-size: 20px;
	line-height: 1;
}
.login .wp-hide-pw .bs-pw__on { display: inline-flex; line-height: 1; }
.login .wp-hide-pw .bs-pw__off { display: none; }
.login .wp-hide-pw.is-on .bs-pw__on { display: none; }
.login .wp-hide-pw.is-on .bs-pw__off { display: inline-flex; line-height: 1; }
/* The eye sits DEAD CENTRE of its field, whatever height our skin gives the
 * input (core positions it with a fixed offset tuned to core's own sizes,
 * which left it riding low here). */
.login .wp-pwd { position: relative; }
/* The wrapper must be EXACTLY the input's box: core gives the input a bottom
 * margin INSIDE the wrapper, which dragged the 50% anchor below the visual
 * centre. Kill it here; the between-fields spacing moves to the wrapper. */
.login .wp-pwd .input,
.login .wp-pwd input { margin: 0 !important; }
.login .user-pass-wrap:not(.bs-pw-field) .wp-pwd { margin-bottom: 16px; }
.login .wp-hide-pw {
	position: absolute !important;
	top: 50% !important;
	right: 6px !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	width: auto !important;
	padding: 6px 8px !important;
}

/* Same discipline as the account page: no hover/focus box behind the eye
 * (core's .button styles paint a light square on our dark skin), no movement —
 * the only affordance is the colour change. */
.login .wp-hide-pw,
.login .wp-hide-pw:hover,
.login .wp-hide-pw:focus,
.login .wp-hide-pw:active {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
	color: #93a1ba !important;
}
.login .wp-hide-pw:hover,
.login .wp-hide-pw:focus { color: #e8edf7 !important; }
.login .bs-pw-meter {
	display: block;
	height: 4px;
	margin: 8px 0 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.10);
	overflow: hidden;
}
.login .bs-pw-meter i { display: block; height: 100%; width: 0; border-radius: 999px; transition: width 0.25s ease, background 0.25s ease; }
.login .bs-pw-meter.is-1 i { width: 25%; background: #e0556a; }
.login .bs-pw-meter.is-2 i { width: 50%; background: #e2a33c; }
.login .bs-pw-meter.is-3 i { width: 75%; background: #4f8bff; }
.login .bs-pw-meter.is-4 i { width: 100%; background: #3dd68c; }
.login .bs-pw-label { display: block; margin: 0 0 14px; font-size: 12px; color: #93a1ba; }
.login .bs-pw-label.is-ok { color: #7ddba3; }
.login .bs-pw-label.is-bad { color: #f0a0ae; }
.login .bs-login-hint {
	display: block;
	margin: 6px 0 14px;
	font-size: 12px;
	line-height: 1.5;
	color: #93a1ba;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: #4f8bff;
	box-shadow: 0 0 0 3px rgba(79, 139, 255, 0.25);
	outline: none;
}

.login .button.wp-hide-pw {
	color: #93a1ba;
}
.login .button.wp-hide-pw:focus {
	box-shadow: 0 0 0 2px rgba(79, 139, 255, 0.35);
}

.login .wp-pwd .pw-weak {
	color: #93a1ba;
}

/* Primary action. */
.login .button-primary {
	background: #4f8bff;
	border: 1px solid #4f8bff;
	border-radius: 10px;
	color: #071021;
	font-weight: 700;
	text-shadow: none;
	box-shadow: none;
	padding: 4px 18px;
	transition: filter 0.15s ease;
}
.login .button-primary:hover,
.login .button-primary:focus {
	background: #6ea0ff;
	border-color: #6ea0ff;
	color: #071021;
}
.login .button-primary:focus {
	box-shadow: 0 0 0 3px rgba(79, 139, 255, 0.35);
}

/* Checkbox. */
.login input[type="checkbox"] {
	background: #0d1526;
	border: 1px solid rgba(255, 255, 255, 0.2);
}
.login input[type="checkbox"]:checked {
	background: #4f8bff;
	border-color: #4f8bff;
}

/* Notices: errors + messages as dark cards with a coloured edge. */
.login #login_error,
.login .notice,
.login .message,
.login .success {
	background: #101a2e;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-left: 4px solid #4f8bff;
	border-radius: 12px;
	color: #e8edf7;
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
}
.login #login_error {
	border-left-color: #e0556a;
}
.login #login_error a,
.login .message a,
.login .notice a {
	color: #6ea0ff;
}

/* "Register / Lost password" + "Back to site" links. */
.login #nav,
.login #backtoblog {
	text-align: center;
}
.login #nav a,
.login #backtoblog a {
	color: #93a1ba;
	transition: color 0.15s ease;
}
.login #nav a:hover,
.login #backtoblog a:hover,
.login #nav a:focus,
.login #backtoblog a:focus {
	color: #e8edf7;
}

/* Registration extras. */
.login #reg_passmail,
.login .privacy-policy-page-link a {
	color: #93a1ba;
}

/* The login-locale dropdown (shows when multiple locales are installed). */
.login .language-switcher label {
	color: #93a1ba;
}
.login .language-switcher select {
	background: #0d1526;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	color: #e8edf7;
}

/* The registration door: a single clear button between the sign-in card and
 * the "Register | Lost your password?" links (JS slots it there; the same
 * styles also work in its no-JS fallback position at the page bottom). */
.bs-login-cta__btn {
	display: block;
	width: 320px;
	max-width: calc(100vw - 32px);
	margin: 16px auto 4px;
	padding: 11px 16px;
	border-radius: 10px;
	background: transparent;
	border: 1px solid #4f8bff;
	color: #6ea0ff !important;
	font-weight: 700;
	font-size: 14px;
	text-align: center;
	text-decoration: none !important;
	box-sizing: border-box;
	transition: background 0.15s ease, color 0.15s ease;
}
#login .bs-login-cta__btn { width: auto; } /* inside the column: full width */
.bs-login-cta__btn:hover,
.bs-login-cta__btn:focus {
	background: #4f8bff;
	color: #071021 !important;
}

/* ================================================================
 * THE SIGN-IN SCREENS AS SHARED PAGES (owner, 25/09/2026)
 * ================================================================
 *
 * inc/auth-chrome.php puts the site's own bar and footer around wp-login.php and marks
 * the body `bs-auth bs-lobby`, so the bar and the footer come in the lobby neutral by
 * themselves (game-ui/solo.css § THE LOBBY). What is left is the form, which wore the
 * Solo HUD: the blue honeycomb floor, the chamfered blue card, HUD capitals. On a shared
 * page it wears what the contact form wears there (§ THE SHARED PAGES TAKE THE SKIN OFF
 * THEIR CONTENT): a rounded hairline card, neutral fields, and a light button in the
 * site's own type, because signing in is nobody's half.
 *
 * `body.bs-auth.login` outranks the game UI's `.login …` rules, which load after this file
 * and carry !important of their own. */
body.bs-auth.login {
	background: transparent !important;
	font-family: var(--bs-sans, 'Spline Sans', 'Manrope', 'Segoe UI', system-ui, sans-serif) !important;
	color: #ECEFF5;
}
/* The card sits in the page between the bar and the footer, as a shared page's content does. */
body.bs-auth.login #login {
	padding: clamp(28px, 7vh, 72px) 16px 40px;
}
/* The bar already carries the name, so the card does not repeat it; it stays the page's
 * heading for a screen reader. */
body.bs-auth.login h1.wp-login-logo {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}
/* "Back to PlayWhydunit", and the bar's own "Sign in" on the sign-in screen itself: the
 * bar is the way back, and the form is the sign-in. */
body.bs-auth.login #backtoblog,
body.bs-auth .bs-site-header .bs-user__btn--login {
	display: none !important;
}
body.bs-auth.login form {
	border-radius: 14px !important;
	border: 1px solid rgba(236, 239, 245, 0.2) !important;
	background: rgba(236, 239, 245, 0.035) !important;
	box-shadow: none !important;
	clip-path: none !important;
}
body.bs-auth.login #login label {
	font-family: inherit !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #D5DAE3 !important;
}
body.bs-auth.login #login form .forgetmenot label,
body.bs-auth.login #login label:has(input[type="checkbox"]) {
	font-weight: 500 !important;
	color: #A3ABBB !important;
}
/* ⚠️ THE BAR HAS LABELS TOO, AND THIS SCREEN STYLES EVERY LABEL (measured, 390px: the
 * burger came out as an empty square with one bar in it). The phone menu is a checkbox
 * and three labels — the burger, the drawer's close, the backdrop — and core's
 * `.login label` (display: inline-block, 14px, 1.5, 3px below) outranks the bar's own
 * `.bs-burger`, while the game UI's `.login label` adds the form's HUD capitals and
 * blue. So on these screens the bar's labels are told again what the bar tells them in
 * style.css (display per width, § max-width: 760px) and take nothing from the form's. */
body.bs-auth .bs-site-header label {
	margin: 0;
	font-size: inherit !important;
	line-height: normal;
	font-family: inherit !important;
	font-weight: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: inherit !important;
}
body.bs-auth .bs-site-header .bs-burger,
body.bs-auth .bs-site-header .bs-nav__close,
body.bs-auth .bs-site-header .bs-nav-backdrop { display: none; }
@media (max-width: 760px) {
	body.bs-auth .bs-site-header .bs-burger { display: inline-flex; }
	body.bs-auth .bs-site-header .bs-nav__close { display: flex; margin: 0 0 10px; }
	body.bs-auth .bs-site-header .bs-nav-backdrop { display: block; }
}
body.bs-auth.login #login form .input,
body.bs-auth.login #login input[type="text"],
body.bs-auth.login #login input[type="password"],
body.bs-auth.login #login input[type="email"] {
	border-radius: 10px !important;
	border: 1px solid rgba(236, 239, 245, 0.22) !important;
	background: rgba(7, 9, 14, 0.7) !important;
	color: #ECEFF5 !important;
}
body.bs-auth.login #login form .input:focus,
body.bs-auth.login #login input[type="text"]:focus,
body.bs-auth.login #login input[type="password"]:focus,
body.bs-auth.login #login input[type="email"]:focus {
	border-color: rgba(236, 239, 245, 0.55) !important;
	box-shadow: 0 0 0 2px rgba(236, 239, 245, 0.14) !important;
}
body.bs-auth.login #login input[type="checkbox"] { border-radius: 4px !important; }
/* The shared pages' two buttons (owner, 25/09/2026), from the tokens in game-ui/solo.css
 * § THE SHARED PAGES' BUTTONS, which this screen loads: the primary is Solo's blue running
 * into Friends' amber, the secondary the same run as an edge around a faint wash of it.
 * The values after each var() are the same tokens, for a screen that lost solo.css. */
body.bs-auth.login .button-primary,
body.bs-auth.login .bs-login-cta__btn {
	border-radius: 10px !important;
	clip-path: none !important;
	font-family: inherit !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	box-shadow: none !important;
	border: 1px solid transparent !important;
}
/* The shared pages' pair (game-ui/solo.css § THE SHARED PAGES' BUTTONS, the neon amber
 * edge of 25/09): the tokens where the sign-in screens have them, the same values written
 * out where they do not. */
body.bs-auth.login .button-primary {
	background: var(--lobby-cta-fill, rgba(240, 169, 60, 0.07)) !important;
	border: 1.5px solid var(--lobby-cta-edge, #FFB547) !important;
	color: var(--lobby-cta-ink, #FFF3DF) !important;
	box-shadow: var(--lobby-cta-glow, 0 0 18px rgba(255, 170, 60, 0.35), inset 0 0 12px rgba(255, 170, 60, 0.12)) !important;
}
body.bs-auth.login .button-primary:hover,
body.bs-auth.login .button-primary:focus {
	background: var(--lobby-cta-fill-hover, rgba(240, 169, 60, 0.16)) !important;
	color: var(--lobby-cta-ink, #FFF3DF) !important;
	box-shadow: var(--lobby-cta-glow-hover, 0 0 28px rgba(255, 170, 60, 0.55), inset 0 0 14px rgba(255, 170, 60, 0.18)) !important;
}
body.bs-auth.login .bs-login-cta__btn {
	background: var(--lobby-cta2-fill, rgba(110, 168, 255, 0.05)) !important;
	border: 1px solid var(--lobby-cta2-edge, rgba(110, 168, 255, 0.85)) !important;
	color: var(--lobby-cta2-ink, #DCE8FF) !important;
	box-shadow: var(--lobby-cta2-glow, 0 0 12px rgba(110, 168, 255, 0.25)) !important;
}
body.bs-auth.login .bs-login-cta__btn:hover,
body.bs-auth.login .bs-login-cta__btn:focus {
	background: var(--lobby-cta2-fill-hover, rgba(110, 168, 255, 0.12)) !important;
	color: #fff !important;
	box-shadow: var(--lobby-cta2-glow-hover, 0 0 20px rgba(110, 168, 255, 0.42)) !important;
}
body.bs-auth.login .button-primary:focus-visible,
body.bs-auth.login .bs-login-cta__btn:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px; }
body.bs-auth.login #login_error,
body.bs-auth.login .notice,
body.bs-auth.login .message,
body.bs-auth.login .success {
	border-radius: 10px !important;
	background: rgba(236, 239, 245, 0.05) !important;
}
body.bs-auth.login #nav a,
body.bs-auth.login .privacy-policy-page-link a { color: #A3ABBB; }
body.bs-auth.login #nav a:hover,
body.bs-auth.login .privacy-policy-page-link a:hover { color: #fff; }

/* The RESET screen runs OUR password controls (the plugin injects the same
 * meter + eye the registration form carries and retires user-profile.js) —
 * hide core's zxcvbn meter, the weak-password row, its hint paragraph and
 * the now-inert Generate button. */
.login #pass-strength-result,
.login .pw-weak,
.login .indicator-hint,
.login .wp-generate-pw { display: none !important; }