/* Shared presentation for login, registration and password recovery. */

/* Use the same sanitized palettes and mode bootstrap as the public site. */
:root {
    --cb-login-bg: var(--cb-background);
    --cb-login-surface: var(--cb-surface);
    --cb-login-input: var(--cb-surface-soft);
    --cb-login-text: var(--cb-text);
    --cb-login-muted: var(--cb-text-muted);
    --cb-login-border: var(--cb-border);
    --cb-login-accent: var(--cb-accent);
    --cb-login-link: var(--cb-accent);
    --cb-login-hover: var(--cb-accent-hover);
    --cb-login-button-text: var(--cb-button-text);
    --cb-login-glow: rgba(var(--cb-accent-rgb), 0.10);
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

body.login {
	min-height: 100vh;
	margin: 0;
	background:
		radial-gradient(ellipse at top, var(--cb-login-glow), transparent 65%),
		var(--cb-login-bg);
	color: var(--cb-login-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
		Inter, Helvetica, Arial, sans-serif;
}

body.login * {
	box-sizing: border-box;
}

body.login #login {
	width: min(440px, calc(100% - 32px));
	padding: clamp(32px, 8vh, 80px) 0 24px;
}

.login h1 a {
	width: 100%;
	height: auto;
	margin: 0 auto 28px;
	padding: 4px;
	background-image: none;
	color: var(--cb-login-text);
	font-size: clamp(25px, 5vw, 32px);
	font-weight: 750;
	line-height: 1.2;
	letter-spacing: -0.035em;
	text-indent: 0;
	text-decoration: none;
}

.login form {
	margin-top: 20px;
	padding: clamp(24px, 5vw, 36px);
	border: 1px solid var(--cb-login-border);
	border-radius: 24px;
	background: var(--cb-login-surface);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06);
	color: var(--cb-login-text);
}

.login label {
	margin-bottom: 8px;
	color: var(--cb-login-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	min-height: 52px;
	padding: 10px 14px;
	border: 1px solid var(--cb-login-border);
	border-radius: 12px;
	background: var(--cb-login-input);
	color: var(--cb-login-text);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	box-shadow: none;
}

.login .wp-pwd input {
	padding-right: 48px;
}

.login input:focus,
.login select:focus,
.login button:focus-visible,
.login a:focus-visible {
	outline: 2px solid var(--cb-login-link);
	outline-offset: 3px;
	box-shadow: none;
}

.login .button.wp-hide-pw {
	width: 48px;
	height: 52px;
	color: var(--cb-login-link);
}

.login .button-primary {
	min-height: 48px;
	padding: 10px 22px;
	border: 1px solid var(--cb-login-accent);
	border-radius: 12px;
	background: var(--cb-login-accent);
	color: var(--cb-login-button-text);
	font-family: inherit;
	font-size: 15px;
	font-weight: 650;
	text-shadow: none;
	box-shadow: none;
}

.login .button-primary:hover,
.login .button-primary:focus,
.login .button-primary:active {
	border-color: var(--cb-login-hover);
	background: var(--cb-login-hover);
	color: var(--cb-login-button-text);
}

.login .button-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.login form .forgetmenot {
	float: none;
	margin: 4px 0 20px;
}

.login .forgetmenot label {
	color: var(--cb-login-muted);
	font-weight: 400;
}

.login form .submit {
	margin-top: 20px;
}

.login form .submit .button-primary {
	float: none;
	width: 100%;
}

.login #nav,
.login #backtoblog {
	padding: 0 8px;
	text-align: center;
	line-height: 1.8;
}

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

.login #nav a:hover,
.login #backtoblog a:hover,
.login #nav a:focus,
.login #backtoblog a:focus {
	color: var(--cb-login-text);
}

.login .message,
.login .notice,
.login #login_error {
	padding: 16px 20px;
	border-radius: 12px;
	background: var(--cb-login-surface);
	color: var(--cb-login-text);
	line-height: 1.65;
	box-shadow: none;
}

.login #reg_passmail,
.login .description,
.login .indicator-hint {
	color: var(--cb-login-muted);
	line-height: 1.65;
}

.login .language-switcher {
	padding: 0 16px 32px;
	color: var(--cb-login-muted);
}

.login .language-switcher select,
.login .language-switcher .button {
	min-height: 40px;
	border: 1px solid var(--cb-login-border);
	border-radius: 8px;
	background: var(--cb-login-surface);
	color: var(--cb-login-text);
}

@media (max-width: 480px) {
	.login .language-switcher form {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
	}
}

/* Keep the site title readable in every interaction state. */
body.login h1 a,
body.login h1 a:visited {
	color: var(--cb-login-text);
}

body.login h1 a:hover,
body.login h1 a:focus,
body.login h1 a:active {
	color: var(--cb-login-link);
	background-color: transparent;
}

body.login h1 a:focus-visible {
	outline: 2px solid var(--cb-login-link);
	outline-offset: 5px;
	border-radius: 8px;
}

/* Keep native autofill and checkbox states readable in either site palette. */
.login input:-webkit-autofill {
    -webkit-text-fill-color: var(--cb-login-text);
    -webkit-box-shadow: 0 0 0 1000px var(--cb-login-input) inset;
    caret-color: var(--cb-login-text);
}
.login input[type="checkbox"] {
    background: var(--cb-login-input);
    border-color: var(--cb-login-border);
}
.login input[type="checkbox"]:checked::before {
    content: "\2713";
    color: var(--cb-login-accent);
    font: 700 14px/16px system-ui;
    margin: 0;
    width: 16px;
}
.login .message {
    border-left-color: var(--cb-login-accent);
}

.login .button.wp-hide-pw:hover,
.login .button.wp-hide-pw:focus,
.login .button.wp-hide-pw:active {
    color: var(--cb-login-hover);
    border-color: transparent;
    box-shadow: none;
}
.login .button.wp-hide-pw:focus-visible {
    outline: 2px solid var(--cb-login-link);
    outline-offset: 3px;
}
.login input[type="checkbox"]:focus {
    border-color: var(--cb-login-accent);
    box-shadow: none;
}