body.login {
	/*
	 * The admin colour scheme isn't loaded on the login screen, so anything
	 * core builds on these variables (e.g. the help icon beside "Remember
	 * Me") falls back to WordPress's default blue unless they're set here.
	 */
	--wp-admin-theme-color: var(--lt-coral);
	--wp-admin-theme-color-darker-10: var(--lt-coral-hover);
	--wp-admin-theme-color-darker-20: var(--lt-coral-active);
	--wp-admin-theme-color--rgb: 253, 147, 87;

	background: var(--lt-backdrop);
	font-family: var(--lt-font);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	margin: 0;
}

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

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

body.login .lt-login-logo {
	text-align: center;
	margin-bottom: 24px;
}

body.login .lt-login-logo svg {
	display: inline-block;
	height: 28px;
	width: auto;
}

/* Every wp-login.php action has its own form ID - lost password, reset and register included. */
body.login #loginform,
body.login #lostpasswordform,
body.login #resetpassform,
body.login #registerform {
	margin: 0 0 24px;
	background: var(--lt-glass);
	border: 1px solid var(--lt-glass-border);
	border-radius: 20px;
	padding: 36px 32px;
	box-shadow: var(--lt-shadow-on-dark);
}

body.login label {
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
}

body.login .input,
body.login input[type="text"],
body.login input[type="email"],
body.login input[type="password"],
body.login select {
	background-color: var(--lt-input-on-dark);
	border: 1px solid var(--lt-input-border-on-dark);
	border-radius: 10px;
	color: #ffffff;
	box-shadow: none;
}

/* Core's chevron is dark grey - redrawn white to show on the dark field. */
body.login select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 6l5 5 5-5 2 1-7 7-7-7z' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* The open dropdown list is drawn by the browser, on its own light background. */
body.login select option {
	color: var(--lt-navy);
}

body.login .input:focus,
body.login input[type="text"]:focus,
body.login input[type="email"]:focus,
body.login input[type="password"]:focus,
body.login select:focus {
	border-color: var(--lt-coral);
	box-shadow: 0 0 0 3px var(--lt-coral-ring);
}

body.login .forgetmenot {
	float: left;
	margin: 0;
	display: flex;
	align-items: center;
	height: 40px;
}

body.login .forgetmenot label {
	font-size: 13px;
	font-weight: 400;
	color: rgba(255, 255, 255, .6);
}

body.login .forgetmenot :is(a, button, .dashicons) {
	color: rgba(255, 255, 255, .6);
	box-shadow: none;
}

body.login .forgetmenot :is(a, button, .dashicons):hover,
body.login .forgetmenot :is(a, button, .dashicons):focus {
	color: var(--lt-coral);
}

body.login .wp-hide-pw {
	border: none;
	background: transparent;
	box-shadow: none;
}

body.login .wp-hide-pw .dashicons {
	color: rgba(255, 255, 255, .5);
}

body.login .wp-hide-pw:hover .dashicons,
body.login .wp-hide-pw:focus .dashicons {
	color: #ffffff;
}

body.login .submit {
	float: right;
	margin: 0;
}

/* --- Reset password / register extras --- */

/* Core's grey hint and description text is too dark to read on the glass panel. */
body.login .description,
body.login .indicator-hint,
body.login #reg_passmail {
	color: rgba(255, 255, 255, .6);
}

body.login .pw-weak label {
	font-weight: 400;
}

body.login #pass-strength-result {
	border-radius: 10px;
}

body.login .reset-pass-submit {
	float: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

body.login .reset-pass-submit .button {
	float: none;
	margin: 0;
}

/* --- Buttons --- */

body.login .button-primary,
body.login .button:not(.button-primary, .wp-hide-pw) {
	border-radius: var(--lt-radius-pill);
	font-weight: 700;
	text-shadow: none;
	box-shadow: none;
	transition: background-color var(--lt-transition), border-color var(--lt-transition), color var(--lt-transition);
}

body.login .button-primary {
	width: auto;
	height: 40px;
	padding: 0 24px;
	line-height: 38px;
	background: var(--lt-coral);
	border-color: var(--lt-coral);
	color: var(--lt-navy);
}

/* :not(:disabled) matches core's own hover selectors in buttons.css. */
body.login .button-primary:not(:disabled):hover {
	background: var(--lt-coral-hover);
	border-color: var(--lt-coral-hover);
	color: var(--lt-navy);
}

body.login .button-primary:not(:disabled):active {
	background: var(--lt-coral-active);
	border-color: var(--lt-coral-active);
	color: var(--lt-navy);
}

body.login .button:not(.button-primary, .wp-hide-pw) {
	height: auto;
	padding: 4px 16px;
	line-height: 2;
	background: transparent;
	border: 1px solid var(--lt-coral);
	color: var(--lt-coral);
}

body.login .button:not(.button-primary, .wp-hide-pw):hover {
	background: var(--lt-coral);
	color: var(--lt-navy);
}

body.login .button-primary:focus,
body.login .button:not(.button-primary, .wp-hide-pw):focus {
	box-shadow: none;
	outline: none;
}

body.login .button-primary:focus-visible,
body.login .button:not(.button-primary, .wp-hide-pw):focus-visible {
	box-shadow: 0 0 0 3px var(--lt-coral-ring);
}

/* --- Links --- */

body.login a {
	color: var(--lt-coral);
	text-decoration: none;
	transition: color var(--lt-transition);
}

body.login a:hover,
body.login a:focus {
	color: #ffffff;
}

body.login #nav,
body.login #backtoblog {
	text-align: center;
}

/* Core colours these by ID, which outranks the plain link rule above. */
body.login #nav a,
body.login #backtoblog a {
	color: var(--lt-coral);
	font-size: 13px;
}

body.login #nav a:hover,
body.login #nav a:focus,
body.login #backtoblog a:hover,
body.login #backtoblog a:focus {
	color: #ffffff;
}

/* --- Notices --- */

body.login #login_error,
body.login .message,
body.login .success {
	background: rgba(253, 147, 87, .12);
	border-left-color: var(--lt-coral);
	color: #ffe4d3;
	box-shadow: none;
}

body.login #login_error strong,
body.login .message strong {
	color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
	body.login .button,
	body.login a {
		transition: none;
	}
}