/* CompDNA login page (wp-login.php): the sheet-on-desk look of the site. Tokens mirror style.css. */

:root {
	--ink: #14202e;
	--ink-2: #3d4b5c;
	--ink-3: #5b6878;
	--paper: #ffffff;
	--desk: #eceff3;
	--band: #f3f5f7;
	--rule: #d5dbe2;
	--rule-strong: #aab4c0;
	--accent: #0062CC;
	--accent-hover: #00194C;
	--accent-soft: #E6F2FF;
	--btn-bg: #0072E8;
	--btn-hover: #00194C;
	--good-fill: #c6efce;
	--good-ink: #006100;
	--bad-fill: #ffc7ce;
	--bad-ink: #9c0006;
	--logo: url(compdna-logo.svg);
	--font: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--ink: #e8edf3;
		--ink-2: #b8c3cf;
		--ink-3: #93a0ae;
		--paper: #161d26;
		--desk: #0f141b;
		--band: #1c2530;
		--rule: #2b3643;
		--rule-strong: #3d4a59;
		--accent: #5AA9FF;
		--accent-hover: #8CC4FF;
		--accent-soft: #0B2240;
		--btn-hover: #0062CC;
		--good-fill: #173d24;
		--good-ink: #8fe0a6;
		--bad-fill: #4a1a20;
		--bad-ink: #ffb3bb;
		--logo: url(compdna-logo-reversed.svg);
		color-scheme: dark;
	}
}

body.login {
	background: var(--desk);
	color: var(--ink);
	font-family: var(--font);
	font-size: .875rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.login #login { width: 360px; max-width: calc(100% - 32px); padding: 9vh 0 24px; }
.login :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }

/* Logo */
.login h1, .login .signin-brand { margin: 0 0 24px; }
.login h1 a, .login .signin-brand a {
	display: block; width: 176px; height: 36px; margin: 0 auto;
	background: var(--logo) center / contain no-repeat;
}
.login h1 a:focus { box-shadow: none; }

/* The sheet */
.login form {
	margin: 0; padding: 24px;
	background: var(--paper);
	border: 1px solid var(--rule); border-radius: 0;
	box-shadow: none;
	overflow: visible;
}
.login form p { margin: 0; }
.login label { display: block; margin-bottom: 4px; font-size: .875rem; font-weight: 600; color: var(--ink); }
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	width: 100%; min-height: 40px; margin: 0 0 16px; padding: 7px 10px;
	background: var(--paper); color: var(--ink);
	border: 1px solid var(--rule-strong); border-radius: 3px;
	box-shadow: none;
	font: 400 1rem/1.4 var(--font);
}
.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 0; box-shadow: none; }
.login .wp-pwd { position: relative; }
.login .wp-pwd .input { padding-right: 44px; }
.login .button.wp-hide-pw { top: 0; right: 0; width: 40px; height: 40px; min-height: 40px; color: var(--ink-3); border-radius: 3px; }
.login .button.wp-hide-pw:hover, .login .button.wp-hide-pw:focus { color: var(--ink); background: none; border-color: transparent; box-shadow: none; }
.login .button.wp-hide-pw:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.login .forgetmenot { float: none; display: flex; align-items: center; gap: 8px; margin: 0 0 16px; }
.login .forgetmenot label { margin: 0; font-weight: 400; color: var(--ink-2); }
.login input[type="checkbox"] {
	width: 16px; height: 16px; min-width: 16px; margin: 0;
	background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 3px; box-shadow: none;
}
.login input[type="checkbox"]:checked { background: var(--btn-bg); border-color: var(--btn-bg); }
.login input[type="checkbox"]:checked::before {
	content: ""; width: 9px; height: 5px; margin: 3px 0 0 2.5px; float: none; display: block;
	border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.login input[type="checkbox"]:focus { border-color: var(--accent); box-shadow: none; }

/* Buttons */
.login .submit { display: block; }
.login .button-primary,
.login .button.button-large {
	float: none; width: 100%; min-height: 40px; padding: 7px 14px;
	background: var(--btn-bg); border: 1px solid var(--btn-bg); border-radius: 3px;
	color: #fff; box-shadow: none; text-shadow: none;
	font: 600 .875rem/1.5 var(--font);
	transition: background-color .15s ease-out, border-color .15s ease-out;
}
.login .button-primary:hover,
.login .button-primary:focus,
.login .button.button-large:hover,
.login .button.button-large:focus { background: var(--btn-hover); border-color: var(--btn-hover); color: #fff; box-shadow: none; }
.login .button:not(.button-primary):not(.wp-hide-pw) {
	background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 3px; color: var(--ink);
	font: 600 .875rem/1.5 var(--font);
}
.login .button:not(.button-primary):not(.wp-hide-pw):hover { background: var(--band); border-color: var(--ink-3); color: var(--ink); }
.login .reset-pass-submit { display: flex; flex-wrap: wrap; gap: 8px; }
.login .reset-pass-submit .button { width: auto; flex: 1 1 auto; margin: 0; }

/* Messages: a ruled note in the status fill, never colour alone (each carries its text). */
.login .message, .login .notice, .login .success, .login #login_error {
	margin: 0 0 16px; padding: 10px 14px;
	background: var(--accent-soft); color: var(--ink);
	border: 1px solid var(--accent); border-radius: 0;
	box-shadow: none;
	font-size: .875rem;
}
.login .success { background: var(--good-fill); border-color: var(--good-ink); }
.login #login_error, .login .notice-error { background: var(--bad-fill); border-color: var(--bad-ink); }
.login .message a, .login .notice a, .login #login_error a { color: inherit; }
.login .indicator-hint, .login .description { color: var(--ink-2); font-size: .75rem; }
.login #pass-strength-result { margin: -8px 0 12px; border-radius: 3px; font-size: .75rem; }

/* Links under the sheet */
.login #nav, .login #backtoblog { margin: 14px 0 0; padding: 0 2px; font-size: .875rem; color: var(--ink-3); }
.login #backtoblog { margin-top: 6px; }
.login #nav a, .login #backtoblog a, .login .privacy-policy-link { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.login #nav a:hover, .login #backtoblog a:hover, .login .privacy-policy-link:hover,
.login #nav a:focus, .login #backtoblog a:focus { color: var(--accent); box-shadow: none; }
.login .privacy-policy-page-link { margin: 24px 0 0; text-align: left; padding: 0 2px; }

.language-switcher { display: none; }

/* ---------- Standalone pages in the login design (landing.php) ---------- */
.firmo-signin { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.firmo-signin #login { flex: 1; display: flex; flex-direction: column; margin: 0 auto; padding-bottom: 16px; }
.firmo-signin .button-primary { cursor: pointer; }
.firmo-signin .button-primary:active { transform: translateY(1px); }
.firmo-signin #nav a, .firmo-signin #backtoblog a { display: inline-flex; align-items: center; min-height: 24px; }
.firmo-signin .signin-foot {
	margin-top: auto; padding: 32px 2px 0;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px;
	font-size: .75rem; color: var(--ink-3);
}
.firmo-signin .signin-foot p { margin: 0; }
.firmo-signin .signin-foot nav { display: flex; gap: 16px; }
.firmo-signin .signin-foot a { display: inline-flex; align-items: center; min-height: 24px; color: var(--ink-2); text-underline-offset: 2px; }
.firmo-signin .signin-foot a:hover { color: var(--accent); }

/* ---------- Landing page for signed-out visitors (landing.php) ---------- */
.firmo-landing #login { width: 440px; }
.firmo-landing .landing-sheet { padding: 32px 24px 24px; background: var(--paper); border: 1px solid var(--rule); }
.firmo-landing .landing-title { margin: 0; text-align: left; font: 700 1.75rem/1.15 var(--font); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.firmo-landing #login .landing-lede { margin: 8px 0 0; font-size: 1rem; font-weight: 600; color: var(--ink-2); }
.firmo-landing #login .landing-desc { margin: 16px 0 24px; color: var(--ink-2); }
.firmo-landing #login .submit { margin: 0; padding: 0; }
.firmo-landing .button-primary { display: block; text-align: center; text-decoration: none; }

@media (max-width: 480px) {
	.login #login { padding-top: 32px; }
	.login form, .firmo-landing .landing-sheet { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.login .button-primary { transition: none; }
}