/* ==========================================================================
   M. Curtis McCoy — Agency Console UI
   Login screen: near-black console, studio-lit backdrop, single card.
   ========================================================================== */

:root{
	--mcm-bg:#08090A;
	--mcm-ink:#F4F5F6;
	--mcm-muted:#8A9099;
	--mcm-faint:#5A6069;
	--mcm-line:rgba(255,255,255,.10);
	--mcm-line-soft:rgba(255,255,255,.06);
	--mcm-field:#0E1012;
	--mcm-accent:#FFFFFF;
	--mcm-accent-ink:#0A0B0C;
	--mcm-accent-soft:rgba(255,255,255,.14);
	--mcm-status:#35D07F;
	--mcm-status-soft:rgba(53,208,127,.18);
	--mcm-danger:#E5484D;
}

html{ background:var(--mcm-bg); }

body.login{
	/* Three-point lighting: warm key from top, cool fill lower right, near-black base. */
	background:
		radial-gradient(1240px 700px at 50% -16%, #25292E 0%, rgba(37,41,46,0) 60%),
		radial-gradient(900px 600px at 92% 112%, rgba(150,158,168,.13) 0%, rgba(150,158,168,0) 70%),
		var(--mcm-bg);
	background-attachment:fixed;
	min-height:100vh;
	min-height:100svh;
	margin:0;
	padding:48px 0 40px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	color:var(--mcm-ink);
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

/* Layout ------------------------------------------------------------------ */

.login #login{
	width:100%;
	max-width:428px;
	padding:0 24px;
	margin:0 auto;
	box-sizing:border-box;
}

/* Wordmark ---------------------------------------------------------------- */

.login h1{ margin:0; }

.login h1 a,
.login .wp-login-logo a{
	background-image:none;
	background:none;
	width:auto;
	height:auto;
	margin:0 auto;
	padding:0;
	text-indent:0;
	overflow:visible;
	display:block;
	text-align:center;
	font-size:23px;
	line-height:1.28;
	font-weight:600;
	letter-spacing:.055em;
	text-transform:none;
	color:var(--mcm-ink);
	text-decoration:none;
	transition:color .15s ease;
}

.login h1 a:hover,
.login h1 a:focus{ color:#fff; box-shadow:none; }

.login h1 a:focus-visible{
	outline:2px solid var(--mcm-accent);
	outline-offset:6px;
	border-radius:4px;
}

.mcm-subline{
	text-align:center;
	margin:8px 0 28px;
	font-size:10.5px;
	font-weight:600;
	letter-spacing:.36em;
	text-transform:uppercase;
	color:var(--mcm-muted);
}

/* Card -------------------------------------------------------------------- */

.login form{
	background:linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.022) 100%);
	border:1px solid var(--mcm-line);
	border-radius:16px;
	padding:30px 28px 26px;
	margin:0;
	box-shadow:
		0 34px 74px -30px rgba(0,0,0,.92),
		0 2px 10px rgba(0,0,0,.35),
		inset 0 1px 0 rgba(255,255,255,.055);
	overflow:visible;
}

@supports (backdrop-filter:blur(10px)){
	.login form{ backdrop-filter:blur(10px); }
}

/* Core login.css sets these margins with equal-or-higher specificity, so the
   console rhythm is enforced rather than merely proposed. */
.login form p,
.login form .user-pass-wrap{ margin:0 0 18px !important; }
.login form p.forgetmenot{ margin:0 0 4px !important; float:none; display:block; }
.login form p.submit{ margin:22px 0 0 !important; }

/* The core "Remember Me" help toggletip is noise on a private console. */
.login .forgetmenot .wp-tooltip{ display:none !important; }

/* Fields ------------------------------------------------------------------ */

.login label{
	display:block;
	color:var(--mcm-muted);
	font-size:10.5px;
	font-weight:600;
	letter-spacing:.15em;
	text-transform:uppercase;
	line-height:1.4;
}

.login form .input,
.login form input[type="text"],
.login form input[type="email"],
.login form input[type="password"],
.login input[type="text"],
.login input[type="password"]{
	display:block;
	width:100%;
	box-sizing:border-box;
	margin:9px 0 0;
	padding:0 14px;
	height:46px;
	line-height:44px;
	background:var(--mcm-field);
	border:1px solid var(--mcm-line);
	border-radius:10px;
	color:var(--mcm-ink);
	font-size:15px;
	font-weight:400;
	box-shadow:none;
	outline:none;
	transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.login form .input:hover,
.login input[type="text"]:hover,
.login input[type="password"]:hover{ border-color:rgba(255,255,255,.16); }

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus{
	border-color:var(--mcm-accent);
	box-shadow:0 0 0 3px var(--mcm-accent-soft);
	background:#101315;
}

.login input::placeholder{ color:var(--mcm-faint); }

/* Kill the light autofill wash Chrome paints over dark fields. */
.login input:-webkit-autofill,
.login input:-webkit-autofill:hover,
.login input:-webkit-autofill:focus,
.login input:-webkit-autofill:active{
	-webkit-text-fill-color:var(--mcm-ink);
	-webkit-box-shadow:0 0 0 1000px var(--mcm-field) inset;
	box-shadow:0 0 0 1000px var(--mcm-field) inset;
	caret-color:var(--mcm-ink);
	transition:background-color 100000s ease-in-out 0s;
}

/* Show/hide password ------------------------------------------------------ */

.login .wp-pwd{ position:relative; }

.login .wp-pwd input[type="password"],
.login .wp-pwd input[type="text"]{ padding-right:48px; }

.login .wp-pwd .button.wp-hide-pw{
	position:absolute;
	right:3px;
	bottom:0;
	top:auto;
	width:44px;
	height:46px;
	margin:0;
	padding:0;
	background:transparent;
	border:0;
	border-radius:8px;
	color:var(--mcm-muted);
	box-shadow:none;
	transition:color .15s ease, background-color .15s ease;
}

.login .wp-pwd .button.wp-hide-pw:hover{ color:var(--mcm-ink); background:rgba(255,255,255,.05); }
.login .wp-pwd .button.wp-hide-pw:focus{ box-shadow:0 0 0 3px var(--mcm-accent-soft); color:var(--mcm-ink); }
.login .wp-pwd .button.wp-hide-pw .dashicons{ width:20px; height:20px; font-size:20px; }
.login input[type="password"]::-ms-reveal{ display:none; }

/* Remember me ------------------------------------------------------------- */

.login .forgetmenot label{
	display:inline-flex;
	align-items:center;
	gap:9px;
	font-size:13px;
	font-weight:400;
	letter-spacing:.01em;
	text-transform:none;
	color:var(--mcm-muted);
	cursor:pointer;
}

.login input[type="checkbox"]{
	appearance:none;
	-webkit-appearance:none;
	width:18px;
	height:18px;
	min-width:18px;
	margin:0;
	background:var(--mcm-field);
	border:1px solid var(--mcm-line);
	border-radius:5px;
	box-shadow:none;
	transition:background-color .12s ease, border-color .12s ease;
}

.login input[type="checkbox"]:checked{
	background:var(--mcm-accent);
	border-color:var(--mcm-accent);
}

.login input[type="checkbox"]:checked::before{
	content:"";
	display:block;
	width:5px;
	height:9px;
	margin:2px 0 0 5px;
	border:solid var(--mcm-accent-ink);
	border-width:0 2px 2px 0;
	transform:rotate(45deg);
	background:none;
	float:none;
}

.login input[type="checkbox"]:focus{ box-shadow:0 0 0 3px var(--mcm-accent-soft); }

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

.login .button-primary,
.login #wp-submit{
	display:block;
	float:none;
	width:100%;
	height:48px;
	line-height:48px;
	padding:0;
	background:var(--mcm-accent);
	border:0;
	border-radius:10px;
	color:var(--mcm-accent-ink);
	font-size:12.5px;
	font-weight:700;
	letter-spacing:.15em;
	text-transform:uppercase;
	text-shadow:none;
	box-shadow:0 8px 22px -12px rgba(0,0,0,.9);
	cursor:pointer;
	transition:opacity .13s ease, transform .1s ease;
}

.login .button-primary:hover,
.login #wp-submit:hover{ opacity:.88; }
.login .button-primary:active,
.login #wp-submit:active{ transform:translateY(1px); }
.login .button-primary:focus,
.login #wp-submit:focus{ box-shadow:0 0 0 3px var(--mcm-accent-soft); }

/* Secondary links --------------------------------------------------------- */

.login #nav,
.login #backtoblog{
	text-align:center;
	padding:0;
	margin:18px 0 0;
	font-size:12.5px;
	text-shadow:none;
}

.login #backtoblog{ margin-top:10px; }

.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a{
	color:var(--mcm-muted);
	text-decoration:none;
	transition:color .15s ease;
}

.login #nav a:hover,
.login #backtoblog a:hover,
.login .privacy-policy-page-link a:hover{ color:var(--mcm-ink); }

.login #nav a:focus,
.login #backtoblog a:focus{ box-shadow:none; outline:2px solid var(--mcm-accent); outline-offset:3px; border-radius:3px; }

.login .privacy-policy-page-link{ margin:14px 0 0; }
.login .privacy-policy-page-link a{ font-size:11.5px; color:var(--mcm-faint); }

/* Notices ----------------------------------------------------------------- */

.login #login_error,
.login .notice,
.login .message,
.login .success{
	background:rgba(255,255,255,.045);
	border:1px solid var(--mcm-line);
	border-left:3px solid var(--mcm-accent);
	border-radius:10px;
	box-shadow:none;
	color:var(--mcm-ink);
	padding:14px 16px;
	margin:0 0 18px;
	font-size:13.5px;
	line-height:1.55;
}

.login #login_error{ border-left-color:var(--mcm-danger); }
.login .success{ border-left-color:var(--mcm-status); }

.login #login_error a,
.login .message a,
.login .notice a{ color:var(--mcm-ink); text-decoration:underline; }

/* Console footer ---------------------------------------------------------- */

.mcm-login-foot{
	width:100%;
	max-width:428px;
	margin:26px auto 0;
	padding:0 24px;
	box-sizing:border-box;
	text-align:center;
}

.mcm-status{
	display:inline-flex;
	align-items:center;
	gap:9px;
	margin:0;
	font-size:10.5px;
	font-weight:600;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--mcm-muted);
}

.mcm-status i{
	display:inline-block;
	width:7px;
	height:7px;
	border-radius:50%;
	background:var(--mcm-status);
	box-shadow:0 0 0 3px var(--mcm-status-soft);
}

.mcm-legal{
	margin:12px 0 0;
	font-size:11px;
	letter-spacing:.05em;
	color:var(--mcm-faint);
}

/* Trim WordPress chrome we do not want on a private console --------------- */

.login #language-switcher{ display:none; }
.login .language-switcher{ display:none; }

/* Interim-login modal reuses the same surface. */
.login.interim-login #login{ padding:0 18px; }
.interim-login #login form{ margin-top:0; }

/* Narrow screens ---------------------------------------------------------- */

@media screen and (max-width:480px){
	body.login{ padding:32px 0 28px; }
	.login #login{ padding:0 18px; }
	.mcm-login-foot{ padding:0 18px; }
	.login form{ padding:26px 20px 22px; border-radius:14px; }
	.login h1 a{ font-size:20px; letter-spacing:.04em; }
	.mcm-subline{ letter-spacing:.3em; margin-bottom:24px; }
}

@media (prefers-reduced-motion:reduce){
	.login *,
	.login *::before,
	.login *::after{ transition:none !important; animation:none !important; }
}