/**
 * No Signal Media Auth Wrapper
 * WordPress owns the auth forms; this file owns the house frame.
 */

:root {
	--nsm-auth-bg: #0f1010;
	--nsm-auth-panel: rgba(23, 25, 25, 0.94);
	--nsm-auth-text: #f4f2ea;
	--nsm-auth-muted: rgba(244, 242, 234, 0.64);
	--nsm-auth-border: rgba(244, 242, 234, 0.14);
	--nsm-auth-accent: #dfd37a;
	--nsm-auth-ink: #0f1010;
	--nsm-auth-max: 1120px;
}

html,
body.login {
	min-height: 100%;
	background:
		linear-gradient(135deg, rgba(223, 211, 122, 0.10), transparent 36%),
		linear-gradient(180deg, #151717 0%, var(--nsm-auth-bg) 54%, #090a0a 100%);
	color: var(--nsm-auth-text);
}

body.login {
	display: block;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.login div#login {
	width: min(100% - 40px, 430px) !important;
	max-width: none;
	margin: 0 auto;
	padding: clamp(300px, 36vh, 390px) 0 72px;
	transform: translateX(300px);
	box-sizing: border-box;
}

body.login div#login > h1 {
	display: none;
}

.nsm-auth-topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	min-height: 76px;
	padding: 0 clamp(20px, 4vw, 48px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	border-bottom: 1px solid var(--nsm-auth-border);
	background: rgba(15, 16, 16, 0.88);
	backdrop-filter: blur(14px);
	box-sizing: border-box;
}

.nsm-auth-brand {
	margin-left: max(0px, calc((100vw - var(--nsm-auth-max)) / 2));
	color: var(--nsm-auth-text);
	text-decoration: none;
	font-size: 1.08rem;
	font-weight: 800;
	letter-spacing: 0;
}

.nsm-auth-brand:hover,
.nsm-auth-brand:focus {
	color: var(--nsm-auth-accent);
}

.nsm-auth-label {
	margin-right: max(0px, calc((100vw - var(--nsm-auth-max)) / 2));
}

.nsm-auth-label,
.nsm-auth-kicker {
	color: var(--nsm-auth-muted);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.nsm-auth-intro {
	position: fixed;
	top: clamp(150px, 22vh, 230px);
	left: max(20px, calc((100vw - var(--nsm-auth-max)) / 2));
	z-index: 1;
	max-width: 600px;
	text-align: left;
}

.nsm-auth-intro h1 {
	margin: 14px 0 18px;
	color: var(--nsm-auth-text);
	font-size: clamp(4.2rem, 7vw, 6.8rem);
	line-height: 0.92;
	letter-spacing: 0;
	text-align: left;
}

.nsm-auth-intro p {
	max-width: 520px;
	margin: 0;
	color: var(--nsm-auth-muted);
	font-size: clamp(1.05rem, 2vw, 1.4rem);
	line-height: 1.48;
	text-align: left;
}

body.login form {
	width: 100%;
	margin: 0;
	padding: 28px;
	border: 1px solid var(--nsm-auth-border);
	border-radius: 8px;
	background: var(--nsm-auth-panel);
	color: var(--nsm-auth-text);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
	box-sizing: border-box;
	overflow: visible;
}

body.login #loginform,
body.login #registerform,
body.login #lostpasswordform,
body.login #resetpassform,
body.login #confirm-admin-email,
body.login form[name="loginform"],
body.login .message,
body.login .notice,
body.login .success,
body.login #login_error,
body.login #nav,
body.login #backtoblog,
body.login .privacy-policy-page-link {
	width: 100%;
	box-sizing: border-box;
}

body.login label,
body.login form .forgetmenot label,
body.login #nav,
body.login #backtoblog,
body.login .privacy-policy-page-link {
	color: var(--nsm-auth-muted);
	font-size: 0.92rem;
}

body.login form .input,
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--nsm-auth-border);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--nsm-auth-text);
	box-shadow: none;
	font-size: 1rem;
	box-sizing: border-box;
}

body.login form .input:focus,
body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
	border-color: rgba(223, 211, 122, 0.78);
	box-shadow: 0 0 0 2px rgba(223, 211, 122, 0.18);
	outline: 0;
}

body.login .button.wp-hide-pw {
	color: var(--nsm-auth-accent);
}

body.login form .forgetmenot {
	display: flex;
	align-items: center;
	min-height: 46px;
	margin: 0;
	float: none;
}

body.login form .submit {
	display: flex;
	justify-content: flex-end;
	margin: 18px 0 0;
	padding: 0;
	float: none;
	clear: none;
}

body.login .button-primary {
	min-height: 46px;
	min-width: 82px;
	padding: 0 22px;
	border: 1px solid var(--nsm-auth-accent);
	border-radius: 8px;
	background: var(--nsm-auth-text);
	color: var(--nsm-auth-ink);
	font-weight: 800;
	text-shadow: none;
	box-shadow: none;
}

body.login #loginform .forgetmenot + .submit {
	margin-top: -46px;
}

body.login .button-primary:hover,
body.login .button-primary:focus {
	border-color: var(--nsm-auth-accent);
	background: var(--nsm-auth-accent);
	color: var(--nsm-auth-ink);
}

body.login .message,
body.login .notice,
body.login .success {
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1px solid rgba(223, 211, 122, 0.32);
	border-left: 4px solid var(--nsm-auth-accent);
	border-radius: 8px;
	background: rgba(223, 211, 122, 0.08);
	color: var(--nsm-auth-text);
	box-shadow: none;
}

body.login #login_error {
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1px solid rgba(220, 92, 92, 0.45);
	border-left: 4px solid #dc5c5c;
	border-radius: 8px;
	background: rgba(220, 92, 92, 0.12);
	color: var(--nsm-auth-text);
	box-shadow: none;
}

body.login #nav,
body.login #backtoblog {
	margin: 18px 0 0;
	padding: 0;
}

body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a {
	color: var(--nsm-auth-text);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .privacy-policy-page-link a:hover {
	color: var(--nsm-auth-accent);
}

.nsm-auth-footer {
	width: min(100% - 40px, 430px);
	margin: 0 auto;
	padding: 0 0 48px;
	transform: translateX(300px);
	color: var(--nsm-auth-muted);
	font-size: 0.95rem;
	text-align: left;
}

@media (max-width: 1120px) {
	body.login div#login,
	.nsm-auth-footer {
		transform: translateX(220px);
	}

	.nsm-auth-intro {
		max-width: 440px;
	}
}

@media (max-width: 960px) {
	body.login div#login,
	.nsm-auth-footer {
		transform: none;
	}

	body.login div#login {
		padding-top: clamp(360px, 48vh, 430px);
	}

	.nsm-auth-intro {
		right: 20px;
		max-width: none;
	}

	.nsm-auth-intro h1 {
		font-size: clamp(3.4rem, 14vw, 5.4rem);
	}
}

@media (max-width: 520px) {
	body.login div#login {
		width: min(100% - 28px, 430px) !important;
		padding-top: 340px;
	}

	.nsm-auth-topbar {
		min-height: 68px;
		padding: 0 18px;
	}

	.nsm-auth-brand,
	.nsm-auth-label {
		margin-left: 0;
		margin-right: 0;
	}

	.nsm-auth-label {
		display: none;
	}

	.nsm-auth-intro {
		top: 112px;
		left: 18px;
		right: 18px;
	}

	.nsm-auth-intro h1 {
		font-size: clamp(2.7rem, 16vw, 4.4rem);
	}

	body.login form {
		padding: 22px;
	}

	.nsm-auth-footer {
		width: min(100% - 28px, 430px);
	}
}