/*
 * Candide AI branding for wp-login.php, loaded after core's `login` stylesheet.
 * The group's brand, not an estate's, so its values live here, not in ATMOS.
 * See docs/platform.md#login-screen.
 */

@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/instrument-sans-latin-ext-wght-normal.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/instrument-sans-latin-wght-normal.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Instrument Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/instrument-serif-latin-ext-400-normal.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Instrument Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/instrument-serif-latin-400-normal.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.login {
	--candide-login-page: #272d33;
	--candide-login-field: #1f2429;
	--candide-login-content: #e9eaeb;
	--candide-login-heading: #fff;
	--candide-login-muted: #9699a0;
	--candide-login-rule: #d7d8db;
	--candide-login-accent: #64a2a2;
	--candide-login-on-accent: #272d33;
	--candide-login-button: #e9eaeb;
	--candide-login-button-hover: #fff;
	--candide-login-button-active: #d7d8db;
	--candide-login-on-button: #272d33;
	--candide-login-error: #f2a19b;
	--candide-login-logo: url(candide-logo.svg);
	--candide-login-font: "Instrument Sans", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
	--candide-login-display: "Instrument Serif", georgia, "Times New Roman", serif;

	/* Core's login and form styles read these for links, focus and checkboxes. */
	--wp-admin-theme-color: var(--candide-login-accent);
	--wp-admin-theme-color-darker-10: var(--candide-login-content);
	--wp-admin-theme-color-darker-20: var(--candide-login-accent);

	position: relative;
	box-sizing: border-box;
	min-height: 100%;
	height: auto;
	padding: 112px 16px 48px;
	background: var(--candide-login-page);
	color: var(--candide-login-content);
	font-family: var(--candide-login-font);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * The re-authentication dialog frames this page in core's light grey box,
 * and core makes the html transparent; this light variant lets it show.
 */
body.login.interim-login {
	--candide-login-page: transparent;
	--candide-login-field: #fff;
	--candide-login-content: #272d33;
	--candide-login-heading: #272d33;
	--candide-login-muted: #5f646b;
	--candide-login-rule: #272d33;
	--candide-login-accent: #3d7a7a;
	--candide-login-on-accent: #fff;
	--candide-login-button: #272d33;
	--candide-login-button-hover: #1b1f23;
	--candide-login-button-active: #3a424a;
	--candide-login-on-button: #e9eaeb;
	--candide-login-error: #b3261e;
	--candide-login-logo: url(candide-logo-on-light.svg);

	padding: 64px 16px 16px;
}

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

body.login ::selection {
	background: var(--candide-login-accent);
	color: var(--candide-login-on-accent);
}

/* The logo sits at the top of the page; the page title takes the centre. */
body.login h1.wp-login-logo {
	position: absolute;
	top: 40px;
	inset-inline: 0;
	margin: 0;
}

body.login h1.wp-login-logo a {
	width: 190px;
	height: 37px;
	margin: 0 auto;
	background-image: var(--candide-login-logo);
	background-size: contain;
	background-position: center;
	border-radius: 4px;
	color: transparent;
	text-decoration: none;
}

body.login h1.wp-login-logo a:focus-visible {
	outline: 2px solid var(--candide-login-accent);
	outline-offset: 6px;
	box-shadow: none;
}

/* Core's visually hidden page title ("Log In") becomes the display heading. */
body.login > h1.screen-reader-text {
	position: static;
	width: auto;
	max-width: 400px;
	height: auto;
	margin: 0 auto 32px;
	overflow: visible;
	clip-path: none;
	color: var(--candide-login-heading);
	font-family: var(--candide-login-display);
	font-size: 48px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.5px;
	text-align: center;
}

body.login #login {
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	padding: 0;
}

/* Core's login-action forms; the language switcher stays plain. */
body.login :is(#loginform, #lostpasswordform, #resetpassform, #registerform, .admin-email-confirm-form) {
	margin: 0 0 24px;
	padding: 32px;
	overflow: visible;
	background: transparent;
	border: 1px solid var(--candide-login-muted);
	border-radius: 16px;
	box-shadow: none;
}

/* Field labels follow the brand's meta-label style. */
body.login :is(#loginform, #lostpasswordform, #resetpassform, #registerform) label {
	display: block;
	margin-bottom: 8px;
	color: var(--candide-login-content);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.84px;
	text-transform: uppercase;
}

body.login :is(#loginform, #lostpasswordform, #resetpassform, #registerform) :is(.input, input[type="text"], input[type="password"], input[type="email"]) {
	width: 100%;
	min-height: 48px;
	margin: 0 0 24px;
	padding: 10px 16px;
	background: var(--candide-login-field);
	color: var(--candide-login-content);
	border: 1px solid var(--candide-login-muted);
	border-radius: 8px;
	box-shadow: none;
	font-family: var(--candide-login-font);
	font-size: 16px;
	line-height: 1.5;
}

body.login :is(#loginform, #lostpasswordform, #resetpassform, #registerform) :is(.input, input[type="text"], input[type="password"], input[type="email"]):hover {
	border-color: var(--candide-login-rule);
}

body.login :is(#loginform, #lostpasswordform, #resetpassform, #registerform) :is(.input, input[type="text"], input[type="password"], input[type="email"]):focus {
	border-color: var(--candide-login-accent);
	outline: 2px solid var(--candide-login-accent);
	outline-offset: 1px;
	box-shadow: none;
}

body.login input.password-input {
	font-family: var(--candide-login-font);
	letter-spacing: 0.5px;
}

/*
 * Core keeps the password field left to right in every locale (`ltr` class,
 * `rtl:ignore`), so the visibility toggle and its room stay on the right.
 */
body.js.login input.password-input {
	padding-right: 52px;
}

/* Browsers paint autofilled fields light; this keeps the field colour. */
body.login input:-webkit-autofill,
body.login input:-webkit-autofill:hover,
body.login input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--candide-login-content);
	caret-color: var(--candide-login-content);
	box-shadow: 0 0 0 1000px var(--candide-login-field) inset;
	transition: background-color 9999s;
}

body.login .button.wp-hide-pw {
	top: 4px;
	right: 4px;
	width: 40px;
	height: 40px;
	min-height: 40px;
	padding: 0;
	color: var(--candide-login-muted);
	border: 1px solid transparent;
	border-radius: 999px;
}

body.login .button.wp-hide-pw:hover {
	color: var(--candide-login-content);
}

body.login .button.wp-hide-pw:focus {
	color: var(--candide-login-content);
	border-color: transparent;
	outline: 2px solid var(--candide-login-accent);
	outline-offset: 0;
	box-shadow: none;
}

body.login .button.wp-hide-pw .dashicons {
	position: static;
	width: 20px;
	height: 20px;
	color: inherit;
	font-size: 20px;
}

/*
 * Remember me and its help toggle on one row, the button full width beneath.
 * The id outranks core's `#login form p` margin reset.
 */
body.login #loginform .forgetmenot {
	float: none;
	min-height: 0;
	margin: 0 0 24px;
	gap: 10px;
}

body.login #loginform .forgetmenot label,
body.login :is(#resetpassform, #registerform) .pw-weak label {
	display: inline;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

body.login input[type="checkbox"] {
	position: relative;
	width: 20px;
	height: 20px;
	margin: 0;
	background: var(--candide-login-field);
	border: 1px solid var(--candide-login-muted);
	border-radius: 4px;
	box-shadow: none;
}

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

/* Core's tick is a white image; a mask lets it take the variant's colour. */
body.login input[type="checkbox"]:checked::before {
	content: "";
	position: absolute;
	inset: -2px;
	width: auto;
	height: auto;
	margin: 0;
	background: var(--candide-login-on-accent);
	/* stylelint-disable-next-line @stylistic/max-line-length */
	mask: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%2F%3E%3C%2Fsvg%3E) center / contain no-repeat;
}

body.login input[type="checkbox"]:focus {
	outline: 2px solid var(--candide-login-accent);
	outline-offset: 2px;
	box-shadow: none;
}

body.login .wp-tooltip__toggle {
	color: var(--candide-login-muted);
	border-radius: 999px;
}

body.login .wp-tooltip__toggle:hover {
	color: var(--candide-login-content);
}

body.login .wp-tooltip__toggle:focus-visible {
	outline: 2px solid var(--candide-login-accent);
	outline-offset: 2px;
	box-shadow: none;
}

/* Pill buttons: the primary filled, the rest outlined. */
body.login .button:not(.wp-hide-pw) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	font-family: var(--candide-login-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	text-shadow: none;
	border-radius: 999px;
	box-shadow: none;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

body.login .button.button-primary {
	float: none;
	width: 100%;
	background: var(--candide-login-button);
	color: var(--candide-login-on-button);
	border: 1px solid var(--candide-login-button);
}

body.login .button.button-primary:hover,
body.login .button.button-primary:focus {
	background: var(--candide-login-button-hover);
	color: var(--candide-login-on-button);
	border-color: var(--candide-login-button-hover);
}

body.login .button.button-primary:focus {
	outline: 2px solid var(--candide-login-accent);
	outline-offset: 3px;
	box-shadow: none;
}

body.login .button.button-primary:active {
	background: var(--candide-login-button-active);
	border-color: var(--candide-login-button-active);
	color: var(--candide-login-on-button);
}

body.login .button:not(.button-primary):not(.wp-hide-pw) {
	background: transparent;
	color: var(--candide-login-content);
	border: 1px solid var(--candide-login-muted);
}

body.login .button:not(.button-primary):not(.wp-hide-pw):hover,
body.login .button:not(.button-primary):not(.wp-hide-pw):focus {
	color: var(--candide-login-heading);
	background: transparent;
	border-color: var(--candide-login-rule);
}

body.login .button:not(.button-primary):not(.wp-hide-pw):focus {
	outline: 2px solid var(--candide-login-accent);
	outline-offset: 3px;
	box-shadow: none;
}

body.login .reset-pass-submit {
	gap: 12px;
}

body.login .reset-pass-submit .button {
	flex: 1 1 auto;
	margin: 0;
}

/* Notices: border-only like the card; edge and tint tell error from info. */
body.login :is(.notice, .message, .success) {
	margin: 0 0 24px;
	padding: 12px 16px;
	background: rgba(100, 162, 162, 0.12);
	color: var(--candide-login-content);
	border: 1px solid var(--candide-login-accent);
	border-inline-start-width: 4px;
	border-radius: 12px;
	box-shadow: none;
}

body.login :is(.notice, .message, .success) p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

body.login .notice p + p {
	margin-top: 8px;
}

body.login .notice-error {
	background: rgba(242, 161, 155, 0.12);
	border-color: var(--candide-login-error);
}

/* Only the "Error:" prefix; a later <strong> is the username echoed back. */
body.login .notice-error strong:first-child {
	color: var(--candide-login-error);
	font-weight: 600;
}

body.login .notice a {
	color: var(--candide-login-content);
}

body.login .login-error-list {
	margin: 0;
	padding: 0;
}

/* Links keep the text colour, underlined in the accent; accent on hover. */
body.login a {
	color: var(--candide-login-content);
	text-decoration: underline;
	text-decoration-color: var(--candide-login-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

body.login a:hover {
	color: var(--candide-login-accent);
}

body.login a:focus {
	color: var(--candide-login-content);
	border-radius: 2px;
	outline: 2px solid var(--candide-login-accent);
	outline-offset: 3px;
	box-shadow: none;
}

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

body.login #nav a,
body.login #backtoblog a {
	color: var(--candide-login-content);
}

body.login #nav a:hover,
body.login #backtoblog a:hover {
	color: var(--candide-login-accent);
}

body.login #backtoblog a {
	color: var(--candide-login-muted);
	text-decoration-color: currentcolor;
}

body.login .privacy-policy-page-link {
	margin: 32px 0 0;
	font-size: 14px;
}

/* stylelint-disable-next-line selector-id-pattern -- core's id. */
body.login #pass-strength-result {
	margin: 12px 0 24px;
	border-radius: 8px;
	font-family: var(--candide-login-font);
	font-size: 14px;
}

/* stylelint-disable-next-line selector-id-pattern -- core's id. */
body.login :is(.indicator-hint, #reg_passmail, .description) {
	color: var(--candide-login-muted);
	font-size: 14px;
}

body.login .language-switcher {
	margin-top: 32px;
	padding: 0;
}

body.login .language-switcher form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

body.login .language-switcher label {
	margin: 0;
	color: var(--candide-login-muted);
}

body.login .language-switcher label .dashicons {
	margin: 0;
	margin-inline-start: 4px;
	color: inherit;
}

body.login .language-switcher select {
	min-height: 40px;
	margin: 0;
	padding-block: 0;
	padding-inline: 12px 32px;
	background-color: var(--candide-login-field);
	/* stylelint-disable-next-line @stylistic/max-line-length -- muted arrow */
	background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%239699a0%22%2F%3E%3C%2Fsvg%3E);
	color: var(--candide-login-content);
	border: 1px solid var(--candide-login-muted);
	border-radius: 8px;
	font-family: var(--candide-login-font);
	font-size: 14px;
}

body.login .language-switcher select:hover {
	color: var(--candide-login-content);
	border-color: var(--candide-login-rule);
}

body.login .language-switcher select:focus {
	color: var(--candide-login-content);
	border-color: var(--candide-login-accent);
	outline: 2px solid var(--candide-login-accent);
	outline-offset: 1px;
	box-shadow: none;
}

body.login .language-switcher .button:not(.wp-hide-pw) {
	min-height: 40px;
	padding: 8px 20px;
	font-size: 14px;
}

body.login.interim-login h1.wp-login-logo {
	top: 16px;
}

body.login.interim-login h1.wp-login-logo a {
	width: 158px;
	height: 31px;
}

body.login.interim-login > h1.screen-reader-text {
	margin-bottom: 16px;
	font-size: 32px;
}

body.login.interim-login :is(#loginform, #lostpasswordform, #resetpassform) {
	padding: 24px 20px;
}

@media (max-width: 480px) {

	body.login:not(.interim-login) {
		padding-top: 96px;
	}

	body.login:not(.interim-login) h1.wp-login-logo {
		top: 32px;
	}

	body.login h1.wp-login-logo a {
		width: 158px;
		height: 31px;
	}

	body.login:not(.interim-login) > h1.screen-reader-text {
		margin-bottom: 24px;
		font-size: 40px;
	}

	body.login :is(#loginform, #lostpasswordform, #resetpassform, #registerform, .admin-email-confirm-form) {
		padding: 24px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {

	body.login .button {
		transition: none;
	}
}