/**
 * ReampZone -- WordPress login screen
 *
 * Covers wp-login.php in all its modes: log in, lost password, reset password
 * and register. Core serves this page itself and fires `login_enqueue_scripts`
 * rather than `wp_enqueue_scripts`, so none of the theme's CSS -- or the rest
 * of this plugin's -- is present. Nothing here overrides anything; it is a
 * standalone skin over core's own markup.
 *
 * The palette is duplicated rather than imported for the same reason: there is
 * no other stylesheet on the page to inherit custom properties from.
 */

:root {
	--rz-ink:       #0f1214;
	--rz-surface:   #191f22;
	--rz-raised:    #222a2e;
	--rz-line:      #2c3539;
	--rz-text:      #e8ecee;
	--rz-text-dim:  #9fadb4;
	--rz-cyan:      #00d8ff;
	--rz-cyan-ink:  #00d8ff;
	--rz-yellow:    #ffd400;
	--rz-ease:      cubic-bezier(.4, 0, .2, 1);
}

body.login {
	background-color: var(--rz-ink);
	background-image:
		radial-gradient(900px 600px at 12% 8%,  rgba(0, 216, 255, .055), transparent 60%),
		radial-gradient(800px 520px at 88% 92%, rgba(255, 212, 0, .045), transparent 60%),
		repeating-linear-gradient(135deg,
			rgba(255, 255, 255, .014) 0px,
			rgba(255, 255, 255, .014) 1px,
			transparent 1px,
			transparent 7px),
		linear-gradient(180deg, #131a1d 0%, var(--rz-ink) 55%, #0c0f11 100%);
	color: var(--rz-text);
}

/* --- The ReampZone wordmark in place of the WordPress logo ---------------- */

body.login h1 a {
	background-image: none;
	width: auto;
	height: auto;
	margin: 0 auto 22px;
	padding: 0;
	font-family: inherit;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: .01em;
	line-height: 1.2;
	text-indent: 0;
	text-decoration: none;
	color: var(--rz-text);
	overflow: visible;
}

body.login h1 a::after {
	content: "ReampZone";
	color: var(--rz-text);
}

body.login h1 a:hover::after,
body.login h1 a:focus::after { color: var(--rz-cyan); }

/* --- The form card -------------------------------------------------------- */

/* `#login` is core's white card wrapping the whole block -- logo, form and the
   links underneath. The form gets its own surface below, so this one only
   needs to stop being white; otherwise the nav links sit on a white slab. */
body.login #login {
	background: transparent;
	padding: 6% 0 0;
}

body.login form {
	background: var(--rz-surface);
	background-image: linear-gradient(180deg, #1e262a, var(--rz-surface));
	border: 1px solid var(--rz-line);
	border-radius: 14px;
	box-shadow: 0 18px 46px rgba(0, 0, 0, .45);
	padding: 26px 24px 24px;
	margin-top: 18px;
}

/* Same ID story as the submit button: core's inline block carries
   `#login form p:not([class]) { color: #555d66 }` at (1,1,1), which is what
   greyed out "Registration confirmation will be emailed to you" down to
   2.49:1. Scoping through `#login` reaches (1,2,1) and wins. */
body.login #login form label,
body.login #login form p,
body.login form label,
body.login .privacy-policy-page-link { color: var(--rz-text-dim); }

body.login form .forgetmenot label { color: var(--rz-text-dim); }

/* --- Inputs --------------------------------------------------------------- */

body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"],
body.login input[type="search"] {
	background-color: #171e21;
	color: var(--rz-text);
	border: 1px solid var(--rz-line);
	border-radius: 10px;
	padding: 10px 14px;
	box-shadow: none;
	font-size: 15px;
	transition: border-color .16s var(--rz-ease), box-shadow .16s var(--rz-ease);
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
	border-color: var(--rz-cyan);
	box-shadow: 0 0 0 4px rgba(0, 216, 255, .12);
	outline: none;
}

body.login input::placeholder { color: #8b979d; opacity: 1; }

/* --- Jetpack Protect's maths captcha ---------------------------------------
   Jetpack prints, inside #loginform:
     <div style="margin:5px 0 20px"><p style="font-size:14px">Prove your humanity</p>
     <br><label for="jetpack_protect_answer" style="vertical-align:super">3 + 4 =</label>
     <input type="number" id="jetpack_protect_answer" style="width:50px;height:25px;…">
   All inline, all light-theme: measured on production a 50×40 white box with
   grey text beside a super-aligned label, plus a stray <br>. Inline styles
   outrank any selector, hence the !important on exactly those properties. */

body.login #loginform div:has(> #jetpack_protect_answer) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 18px !important;
}

body.login #loginform div:has(> #jetpack_protect_answer) > p {
	flex: 0 0 100%;
	margin: 0;
	font-size: 14px !important;
	color: var(--rz-text-dim);
}

body.login #loginform div:has(> #jetpack_protect_answer) > br { display: none; }

body.login #loginform label[for="jetpack_protect_answer"] {
	vertical-align: middle !important;
	color: var(--rz-text);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .04em;
	white-space: nowrap;
}

body.login #jetpack_protect_answer {
	width: 76px !important;
	height: 48px !important;
	font-size: 15px !important;
	vertical-align: middle !important;
	margin: 0;
	padding: 10px 12px;
	text-align: center;
	background-color: #171e21;
	color: var(--rz-text);
	border: 1px solid var(--rz-line);
	border-radius: 10px;
	box-shadow: none;
	-moz-appearance: textfield;
}

body.login #jetpack_protect_answer::-webkit-outer-spin-button,
body.login #jetpack_protect_answer::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

body.login #jetpack_protect_answer:focus {
	border-color: var(--rz-cyan);
	box-shadow: 0 0 0 4px rgba(0, 216, 255, .12);
	outline: none;
}

/* --- Remember me: core's white 16px box with a blue border ---------------- */

/* `#login` is load-bearing here too: the admin colour scheme prints
   `.wp-core-ui #login input[type=checkbox]` rules (blue border, blue checked
   fill) at (1,2,1); measured, a `#loginform`-only selector kept the blue. */
body.login #login #loginform input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	margin: -3px 8px 0 0;
	background: #171e21;
	border: 1px solid var(--rz-line);
	/* LoginPress prints inline `input[type=checkbox] { border-color: … !important }`
	   and a `!important` checked fill; measured, nothing short of matching wins. */
	border-color: var(--rz-line) !important;
	border-radius: 5px;
	box-shadow: none;
	vertical-align: middle;
	cursor: pointer;
	transition: border-color .16s var(--rz-ease), background-color .16s var(--rz-ease);
}

body.login #login #loginform input[type="checkbox"]::before { content: none; }

body.login #login #loginform input[type="checkbox"]:hover { border-color: #3a464c !important; }

body.login #login #loginform input[type="checkbox"]:checked {
	background-color: var(--rz-cyan) !important;
	border-color: var(--rz-cyan) !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%230f1214' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/></svg>");
	background-size: 14px 14px;
	background-position: center;
	background-repeat: no-repeat;
}

body.login #login #loginform input[type="checkbox"]:focus-visible {
	border-color: var(--rz-cyan) !important;
	box-shadow: 0 0 0 4px rgba(0, 216, 255, .12);
	outline: none;
}

/* Core's "?" toggletip next to Remember me. Measured 4.5px above the label's
   centreline; the span is inline-block with baseline alignment. */
body.login .forgetmenot .wp-tooltip { vertical-align: middle; margin-top: -3px; }
body.login .wp-tooltip__toggle {
	color: var(--rz-text-dim);
	background: transparent;
	border: 0;
	box-shadow: none;
}
body.login .wp-tooltip__toggle:hover,
body.login .wp-tooltip__toggle:focus-visible { color: var(--rz-cyan); }
body.login .wp-tooltip__content {
	background: var(--rz-raised);
	color: var(--rz-text);
	border: 1px solid var(--rz-line);
}

/* Core's show/hide-password control sits inside the field wrapper. */
body.login .wp-pwd .button.wp-hide-pw {
	background: transparent;
	border: 0;
	color: var(--rz-text-dim);
	box-shadow: none;
}

body.login .wp-pwd .button.wp-hide-pw:hover { color: var(--rz-text); }

/* --- Submit --------------------------------------------------------------- */

/* The `#login` ID here is load-bearing, not decoration. WordPress prints an
   inline admin-colour-scheme block on this page containing
   `.wp-core-ui #login .button-primary { color: #fff }` -- specificity (1,2,0).
   A class-only selector loses to it no matter how many classes are stacked or
   how late the file loads, so the submit button kept core's white-on-yellow
   text. Matching their ID brings this to (1,2,1) and wins on merit rather
   than with `!important`. */
body.login #login .button-primary,
body.login #login input[type="submit"],
body.login input[type="submit"].button-primary {
	background-color: var(--rz-yellow);
	background-image: linear-gradient(180deg, #ffdc33, var(--rz-yellow));
	border: 0;
	border-radius: 999px;
	color: #0f1214;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-shadow: none;
	box-shadow: 0 6px 18px rgba(255, 212, 0, .18);
	min-height: 44px;
	padding: 0 24px;
	float: none;
	width: 100%;
	transition: transform .16s var(--rz-ease), box-shadow .16s var(--rz-ease);
}

body.login #login .button-primary:hover,
body.login #login .button-primary:focus,
body.login #login input[type="submit"]:hover,
body.login #login input[type="submit"]:focus {
	background-color: #ffdc33;
	color: #0f1214;
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(255, 212, 0, .26);
}

body.login .submit { text-align: center; }

/* --- Links below the form ------------------------------------------------- */

body.login #nav,
body.login #backtoblog { padding: 12px 0 0; text-align: center; }

body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a {
	color: var(--rz-text-dim);
	text-decoration: none;
	transition: color .16s var(--rz-ease);
}

body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .privacy-policy-page-link a:hover {
	color: var(--rz-cyan);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Messages and errors -------------------------------------------------- */

body.login .message,
body.login .notice,
body.login #login_error {
	background: var(--rz-raised);
	border-left: 4px solid var(--rz-cyan);
	border-radius: 10px;
	color: var(--rz-text);
	box-shadow: none;
	padding: 12px 14px;
}

body.login #login_error { border-left-color: #ff6b6b; }

body.login .message a,
body.login #login_error a { color: var(--rz-cyan-ink); }

/* Core renders the "check your email" confirmation in this block. */
body.login .login .notice.notice-success { border-left-color: #5ad18f; }

/* --- Focus visibility ----------------------------------------------------- */

body.login a:focus-visible,
body.login input:focus-visible,
body.login button:focus-visible {
	outline: 2px solid var(--rz-cyan);
	outline-offset: 2px;
}

/* --- Language switcher core adds at the foot of the page ------------------- */

body.login .language-switcher select {
	background-color: #171e21;
	color: var(--rz-text);
	border: 1px solid var(--rz-line);
	border-radius: 8px;
}

body.login .language-switcher option { background-color: #171e21; color: var(--rz-text); }