/*
 * Plinth — login screen (0.2 mockup): dotted ground, one 400px card with the
 * brand row, "Sign in" heading, fields and a full-width button; links and a
 * credit line underneath. Colours come from the same token block as the admin.
 */
body.plinth.login {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 0.3.15 (L-H1): "safe" — when the page is taller than the screen (a
	   short phone, an error message, the language switcher) it starts at the
	   top and scrolls, instead of centring the top of the card off-screen.
	   Core's height: 100% is lifted for the same reason. */
	justify-content: center;
	justify-content: safe center;
	box-sizing: border-box;
	height: auto;
	min-height: 100vh;
	margin: 0;
	padding: 40px 0 76px;
	background-color: var(--pl-bg);
	/* --pl-dot: the branded login tints the grid toward the kit's Primary. */
	background-image: radial-gradient(var(--pl-dot, var(--pl-border-strong)) 1px, transparent 1.5px);
	background-size: 24px 24px;
	color: var(--pl-text);
	font-family: "Plinth Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 13px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}
body.plinth.login :is(input, button, label, a, p, select, h1):not(.dashicons) {
	font-family: inherit;
}
body.plinth.login .pl-ico {
	display: inline-block;
	flex: none;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: var(--ico) center / contain no-repeat;
	mask: var(--ico) center / contain no-repeat;
}
body.plinth.login #login {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: 400px;
	max-width: calc(100vw - 32px);
	margin: 0;
	padding: 0;
}
/* Core's logo heading is replaced by the brand row inside the card. */
body.plinth.login.pl-login-ready #login > h1,
body.plinth.login.pl-login-ready #login > #nav,
body.plinth.login.pl-login-ready #login > #backtoblog,
body.plinth.login.pl-login-ready .privacy-policy-page-link {
	display: none;
}

.pl-login-card {
	display: flex;
	flex-direction: column;
	gap: 22px;
	width: 100%;
	box-sizing: border-box;
	padding: 32px;
	background: var(--pl-surface);
	border: 1px solid var(--pl-border);
	border-radius: 16px;
	box-shadow: 0 12px 32px var(--pl-shadow-color);
}
.pl-login-brand {
	display: flex;
	align-items: center;
	gap: 10px;
}
.pl-login-badge {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	overflow: hidden;
	border-radius: 9px;
	background: var(--pl-accent);
	color: var(--pl-on-accent);
	font-size: 16px;
	font-weight: 700;
}
.pl-login-badge img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pl-login-name {
	font-size: 15px;
	font-weight: 600;
}
.pl-login-intro {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
body.plinth.login .pl-login-intro h1 {
	margin: 0;
	text-align: left;
	padding: 0;
	color: var(--pl-text);
	font-size: 22px;
	font-weight: 650;
	letter-spacing: -0.015em;
	line-height: 1.2;
}
body.plinth.login .pl-login-intro p {
	margin: 0;
	color: var(--pl-text-2);
	font-size: 13.5px;
}

/* The form itself: core markup, restyled. */
body.plinth.login .pl-login-card form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
}
body.plinth.login .pl-login-card form p,
body.plinth.login .pl-login-card form .user-pass-wrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}
body.plinth.login .pl-login-card form label {
	color: var(--pl-text-2);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.4;
}
.pl-login-labelrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
body.plinth.login a.pl-login-lost {
	color: color-mix(in srgb, var(--pl-accent) 55%, var(--pl-text));
	font-size: 12.5px;
	font-weight: 500;
	text-decoration: none;
}
body.plinth.login a.pl-login-lost:hover {
	text-decoration: underline;
}
body.plinth.login form .input,
body.plinth.login input[type="text"],
body.plinth.login input[type="password"],
body.plinth.login input[type="email"] {
	width: 100%;
	height: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0 12px;
	box-sizing: border-box;
	background: var(--pl-surface-2);
	border: 1px solid var(--pl-border-strong);
	border-radius: 8px;
	box-shadow: none;
	color: var(--pl-text);
	font-size: 13.5px;
}
body.plinth.login form .input:focus,
body.plinth.login input:focus {
	border-color: var(--pl-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pl-accent) 35%, transparent);
	outline: none;
}
body.plinth.login .wp-pwd {
	position: relative;
}
body.plinth.login .wp-pwd input.password-input {
	padding-right: 44px;
}
body.plinth.login .wp-pwd .button.wp-hide-pw {
	position: absolute;
	top: 4px;
	right: 4px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	min-height: 32px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	box-shadow: none;
	color: var(--pl-text-2);
}
body.plinth.login .wp-pwd .button.wp-hide-pw:hover {
	background: var(--pl-surface-3);
	color: var(--pl-text);
}
/* Board: 16px lucide eye / eye-off line icons in place of the dashicons glyphs.
   Core's user-profile.js still swaps dashicons-visibility <-> dashicons-hidden. */
body.plinth.login .wp-pwd .button.wp-hide-pw .dashicons {
	position: static;
	top: 0;
	display: block;
	width: 16px;
	height: 16px;
	font-size: 16px;
	line-height: 1;
	background-color: currentColor;
	-webkit-mask: var(--pl-i-eye) center / 16px 16px no-repeat;
	mask: var(--pl-i-eye) center / 16px 16px no-repeat;
}
body.plinth.login .wp-pwd .button.wp-hide-pw .dashicons-hidden {
	-webkit-mask-image: var(--pl-i-eye-off);
	mask-image: var(--pl-i-eye-off);
}
body.plinth.login .wp-pwd .button.wp-hide-pw .dashicons::before {
	content: none;
}
body.plinth.login .pl-login-card .forgetmenot {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	float: none;
}
body.plinth.login .forgetmenot label {
	color: var(--pl-text-2);
	font-size: 13px;
	font-weight: 400;
}
body.plinth.login input[type="checkbox"] {
	width: 15px;
	height: 15px;
	min-width: 15px;
	margin: 0;
	border: 1px solid var(--pl-border-strong);
	border-radius: 4px;
	background: var(--pl-surface-2);
	box-shadow: none;
}
body.plinth.login input[type="checkbox"]:checked {
	border-color: var(--pl-accent);
	background: var(--pl-accent);
}
body.plinth.login input[type="checkbox"]:checked::before {
	filter: brightness(0) invert(1);
}
body.plinth.login .wp-tooltip__toggle {
	border: 0;
	background: transparent;
	box-shadow: none;
}
body.plinth.login .wp-tooltip__toggle .dashicons {
	color: var(--pl-text-3);
}
body.plinth.login .pl-login-card p.submit {
	float: none;
	margin: 0;
	padding: 0;
}
body.plinth.login .pl-login-submit,
body.plinth.login .pl-login-card .button-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 42px;
	min-height: 42px;
	float: none;
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: 9px;
	background: var(--pl-accent);
	box-shadow: none;
	color: var(--pl-on-accent);
	font-size: 14px;
	font-weight: 600;
	text-shadow: none;
	cursor: pointer;
}
body.plinth.login .pl-login-submit:hover,
body.plinth.login .pl-login-card .button-primary:hover {
	filter: brightness(1.1);
}
body.plinth.login .pl-login-submit:focus-visible {
	outline: 2px solid var(--pl-accent);
	outline-offset: 2px;
}

/* Messages inside the card. */
body.plinth.login .pl-login-card .message,
body.plinth.login .pl-login-card .notice,
body.plinth.login .pl-login-card .success,
body.plinth.login .pl-login-card #login_error {
	margin: 0;
	padding: 10px 12px;
	background: color-mix(in srgb, var(--pl-accent) 8%, var(--pl-surface));
	border: 1px solid var(--pl-border);
	border-left: 3px solid var(--pl-accent);
	border-radius: 8px;
	box-shadow: none;
	color: var(--pl-text);
	font-size: 13px;
}
body.plinth.login .pl-login-card #login_error,
body.plinth.login .pl-login-card .notice-error {
	background: color-mix(in srgb, var(--pl-crit) 8%, var(--pl-surface));
	border-left-color: var(--pl-crit);
}
body.plinth.login .pl-login-card .success {
	border-left-color: var(--pl-success);
}
body.plinth.login .pl-login-card a {
	color: color-mix(in srgb, var(--pl-accent) 55%, var(--pl-text));
}

/* Under the card. */
.pl-login-nav {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 12.5px;
}
body.plinth.login .pl-login-nav a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--pl-text-2);
	text-decoration: none;
}
body.plinth.login .pl-login-nav a:hover {
	color: var(--pl-text);
	text-decoration: underline;
}
.pl-login-nav .pl-ico {
	width: 14px;
	height: 14px;
}
.pl-login-dot {
	color: var(--pl-text-3);
}
.pl-login-foot {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 28px;
	color: var(--pl-text-3);
	font-size: 12px;
	text-align: center;
}
@supports not (justify-content: safe center) {
	body.plinth.login:not(.pl-interim) {
		justify-content: flex-start;
	}
	body.plinth.login:not(.pl-interim) #login {
		margin-top: auto;
	}
	body.plinth.login:not(.pl-interim)::after {
		content: "";
		margin-top: auto;
	}
}
html:has(> body.plinth.login) {
	height: auto;
}

/* Language switcher (0.3.15, L-L1): one compact row under the links —
   globe · select · Change — no wider than the card. Core's "Language" label
   stays for screen readers; the icon says it visually. */
body.plinth.login .language-switcher {
	box-sizing: border-box;
	width: 100%;
	max-width: 400px;
	margin: 16px auto 0;
	padding: 0 16px;
}
body.plinth.login #language-switcher {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}
body.plinth.login #language-switcher label {
	display: inline-flex;
	align-items: center;
	margin: 0;
	color: var(--pl-text-3);
	font-size: 0;
	line-height: 1;
}
body.plinth.login #language-switcher label .dashicons {
	width: 18px;
	height: 18px;
	margin: 0;
	color: var(--pl-text-3);
	font-size: 18px;
	line-height: 1;
}
body.plinth.login .language-switcher select,
body.plinth.login .language-switcher .button {
	box-sizing: border-box;
	height: 36px;
	min-height: 36px;
	margin: 0;
	border: 1px solid var(--pl-border-strong);
	border-radius: 7px;
	background-color: var(--pl-surface);
	color: var(--pl-text);
	font-size: 13px;
	line-height: 1;
	box-shadow: none;
}
body.plinth.login .language-switcher select {
	width: auto;
	min-width: 0;
	max-width: 220px;
	padding: 0 32px 0 10px;
	/* L-M1: Plinth's chevron, readable in both modes (core's is #1e1e1e). */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A6AAB1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 10px center;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	-webkit-appearance: none;
	appearance: none;
}
body.plinth-light.login .language-switcher select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2357606B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: light) {
	body.plinth-auto.login .language-switcher select {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2357606B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	}
}
body.plinth.login .language-switcher .button {
	padding: 0 14px;
	font-weight: 500;
}
body.plinth.login .language-switcher .button:hover {
	border-color: var(--pl-text-3);
	background-color: var(--pl-surface-2, var(--pl-surface));
	color: var(--pl-text);
}
body.plinth.login .language-switcher :is(select, .button):focus {
	border-color: var(--pl-accent);
	outline: none;
	box-shadow: 0 0 0 1.5px var(--pl-accent);
}
body.plinth.login a:focus {
	box-shadow: none;
	outline: 2px solid var(--pl-accent);
	outline-offset: 2px;
}

/* Session expired — interim sign-in inside wp-auth-check's dialog
   (Core WordPress, rethought → Editor interruptions). */
body.plinth.login.pl-interim {
	justify-content: flex-start;
	/* Fill the dialog's frame, so no strip of the page colour shows under the card. */
	min-height: 100vh;
	padding: 0;
	background: var(--pl-surface);
	background-image: none;
}
body.plinth.login.pl-interim #login {
	width: 100%;
	max-width: none;
	gap: 0;
}
body.plinth.login.pl-interim .pl-login-card {
	gap: 16px;
	padding: 26px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}
body.plinth.login.pl-interim .pl-login-nav,
body.plinth.login.pl-interim .pl-login-foot,
body.plinth.login.pl-interim .pl-login-labelrow .pl-login-lost,
body.plinth.login.pl-interim .forgetmenot {
	display: none !important;
}
.pl-interim-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--pl-accent-soft, color-mix(in srgb, var(--pl-accent) 14%, transparent));
	color: color-mix(in srgb, var(--pl-accent) 70%, var(--pl-text));
}
body.plinth.login .pl-interim-ico .pl-ico {
	width: 20px;
	height: 20px;
}
body.plinth.login.pl-interim .pl-login-intro h1 {
	font-size: 18px;
}
body.plinth.login.pl-interim .pl-login-intro p {
	font-size: 13px;
	line-height: 1.55;
}
body.plinth.login.pl-interim #user_login.is-locked {
	color: var(--pl-text-2);
	background: var(--pl-surface-2);
}
body.plinth.login.pl-interim .pl-login-submit {
	height: 38px;
}
.pl-interim-other {
	align-self: center;
	color: var(--pl-text-3);
	font-size: 12.5px;
	text-decoration: none;
}
.pl-interim-other:hover {
	text-decoration: underline;
}

/* ===== errors: Lost password flow =====
   Sign-in error → request link → check email → new password → done
   (Flows & states → Lost password flow). */
.pl-login-step {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
body.plinth.login .pl-login-step .pl-login-intro p {
	line-height: 1.55;
}
body.plinth.login .pl-login-intro strong {
	color: var(--pl-text);
	font-weight: 600;
}

/* Error alert (wrong password etc.). */
body.plinth.login .pl-login-card #login_error.pl-alert {
	display: flex;
	gap: 10px;
	padding: 12px 14px;
	border: 0;
	border-radius: 10px;
	background: color-mix(in srgb, var(--pl-crit) 14%, transparent);
	box-shadow: inset 3px 0 0 var(--pl-crit);
	color: var(--pl-text);
	font-size: 13px;
	line-height: 1.5;
}
body.plinth.login #login_error.pl-alert > .pl-ico {
	width: 17px;
	height: 17px;
	margin-top: 1px;
	color: var(--pl-crit);
}
.pl-alert__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
body.plinth.login .pl-alert__body p {
	margin: 0;
	padding: 0;
}
body.plinth.login .pl-alert__body strong {
	font-weight: 600;
}
body.plinth.login .pl-login-card a.pl-alert__link {
	align-self: flex-start;
	color: color-mix(in srgb, var(--pl-accent) 55%, var(--pl-text));
	font-size: 12.5px;
	font-weight: 500;
	text-decoration: none;
}
body.plinth.login a.pl-alert__link:hover {
	text-decoration: underline;
}
body.plinth.login input.pl-invalid,
body.plinth.login input.pl-invalid:focus {
	border-color: var(--pl-crit);
}

/* "← Back to sign in". */
body.plinth.login .pl-login-card a.pl-login-back {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 6px;
	color: var(--pl-text-2);
	font-size: 12.5px;
	font-weight: 500;
	text-decoration: none;
}
body.plinth.login a.pl-login-back:hover {
	text-decoration: underline;
}
body.plinth.login .pl-login-back .pl-ico {
	width: 14px;
	height: 14px;
}
body.plinth.login .pl-login-note {
	margin: 0;
	color: var(--pl-text-3);
	font-size: 12.5px;
	line-height: 1.55;
}
body.plinth.login #lostpasswordform {
	gap: 20px;
}
body.plinth.login .pl-login-submit {
	text-decoration: none;
}
body.plinth.login .pl-login-card a.pl-login-submit {
	color: var(--pl-on-accent);
}

/* Icon circle (check email, done). */
.pl-login-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
}
body.plinth.login .pl-login-icon .pl-ico {
	width: 24px;
	height: 24px;
}
.pl-login-icon--accent {
	background: color-mix(in srgb, var(--pl-accent) 16%, transparent);
	color: color-mix(in srgb, var(--pl-accent) 55%, var(--pl-text));
}
.pl-login-icon--success {
	background: color-mix(in srgb, var(--pl-success) 14%, transparent);
	color: var(--pl-success);
}

/* Check email: inbox preview + back / resend row. */
.pl-mail {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--pl-border);
	border-radius: 12px;
}
.pl-mail__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: var(--pl-surface-2);
	border-bottom: 1px solid var(--pl-border);
}
.pl-mail__avatar {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--pl-accent);
	color: var(--pl-on-accent);
	font-size: 9px;
	font-weight: 700;
}
.pl-mail__meta {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-width: 0;
}
.pl-mail__subject {
	font-size: 12.5px;
	font-weight: 600;
}
.pl-mail__from {
	overflow: hidden;
	color: var(--pl-text-3);
	font-size: 11.5px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pl-mail__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px;
	color: var(--pl-text-2);
	font-size: 12.5px;
	line-height: 1.55;
}
.pl-mail__body strong {
	color: var(--pl-text);
	font-weight: 600;
}
.pl-mail__btn {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	height: 28px;
	padding: 0 10px;
	border-radius: 7px;
	background: var(--pl-accent);
	color: var(--pl-on-accent);
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
}
.pl-login-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
body.plinth.login .pl-login-btn2 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 28px;
	padding: 0 10px;
	border: 1px solid var(--pl-border-strong);
	border-radius: 7px;
	background: var(--pl-surface-2);
	color: var(--pl-text);
	font-size: 12.5px;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
}
body.plinth.login .pl-login-btn2:hover {
	background: var(--pl-surface-3);
}
body.plinth.login .pl-login-btn2 .pl-ico {
	width: 14px;
	height: 14px;
}
body.plinth.login .pl-login-btn2.is-sent {
	opacity: 0.6;
	cursor: default;
}

/* New password: field + generate, strength meter, weak confirm. */
body.plinth.login #resetpassform {
	gap: 20px;
}
body.plinth.login #resetpassform .user-pass1-wrap {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
body.plinth.login #resetpassform .user-pass1-wrap > p {
	margin: 0;
}
.pl-pw-row {
	display: flex;
	gap: 8px;
}
body.plinth.login .pl-pw-row .wp-pwd {
	position: relative;
	flex-grow: 1;
	margin: 0;
}
body.plinth.login #resetpassform #pass1 {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
}
body.plinth.login .pl-pw-row .button.pl-pw-gen {
	display: flex !important; /* user-profile.js calls .show() on it */
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--pl-border-strong);
	border-radius: 8px;
	background: var(--pl-surface-2);
	box-shadow: none;
	color: var(--pl-text-2);
}
body.plinth.login .pl-pw-row .button.pl-pw-gen:hover {
	background: var(--pl-surface-3);
	color: var(--pl-text);
}
/* Eye / eye-off in Lucide instead of dashicons. */
body.plinth.login .wp-pwd .button.wp-hide-pw .dashicons::before {
	content: none;
}
body.plinth.login .wp-pwd .button.wp-hide-pw .dashicons {
	background-color: currentColor;
	-webkit-mask: var(--pl-i-eye) center / contain no-repeat;
	mask: var(--pl-i-eye) center / contain no-repeat;
}
body.plinth.login .wp-pwd .button.wp-hide-pw .dashicons-hidden {
	-webkit-mask-image: var(--pl-i-eye-off);
	mask-image: var(--pl-i-eye-off);
}
body.plinth.login #resetpassform #pass-strength-result,
body.plinth.login #resetpassform .indicator-hint,
body.plinth.login #resetpassform .user-pass2-wrap {
	display: none !important;
}
.pl-meter {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pl-meter__segs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
}
.pl-meter__segs span {
	height: 4px;
	border-radius: 2px;
	background: var(--pl-surface-3);
}
.pl-meter__status {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 12px;
}
.pl-meter__label {
	color: var(--pl-text-3);
	font-weight: 600;
}
.pl-meter__hint {
	color: var(--pl-text-3);
	text-align: right;
}
.pl-meter[data-level="1"] { --pl-meter: var(--pl-crit); }
.pl-meter[data-level="2"],
.pl-meter[data-level="3"] { --pl-meter: var(--pl-warn); }
.pl-meter[data-level="4"] { --pl-meter: var(--pl-success); }
.pl-meter__segs span.is-on {
	background: var(--pl-meter);
}
.pl-meter:not([data-level="0"]) .pl-meter__label {
	color: var(--pl-meter);
}
body.plinth.login #resetpassform .pw-weak {
	margin: 0;
	color: var(--pl-text-2);
	font-size: 13px;
}
body.plinth.login #resetpassform .pw-weak input {
	vertical-align: middle;
}
body.plinth.login #resetpassform .pw-weak label {
	margin-left: 8px;
	color: var(--pl-text-2);
	font-size: 13px;
	font-weight: 400;
	vertical-align: middle;
	cursor: pointer;
}
body.plinth.login #resetpassform p.reset-pass-submit {
	display: block;
	margin: 0;
}
body.plinth.login #resetpassform #wp-submit:disabled {
	opacity: 0.5;
	filter: none;
	cursor: not-allowed;
}

/* Phones: 16 px field text so iOS Safari doesn't zoom in on tap. */
@media screen and (max-width: 782px) {
	body.login.plinth :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], select) {
		font-size: 16px;
	}
}

/* The brand icon follows the login's mode (Branding & login → LoginModes):
   both are in the page, CSS shows one. */
.pl-login-badge.has-icon {
	background: transparent;
}
.pl-login-badge img {
	display: none;
}
body.plinth-dark .pl-login-badge img.pl-icon--dark,
body.plinth-light .pl-login-badge img.pl-icon--light,
body.plinth-auto .pl-login-badge img.pl-icon--light {
	display: block;
}
@media (prefers-color-scheme: dark) {
	body.plinth-auto .pl-login-badge img.pl-icon--light {
		display: none;
	}
	body.plinth-auto .pl-login-badge img.pl-icon--dark {
		display: block;
	}
}
.pl-login-badge img {
	object-fit: contain;
}
.pl-login-badge img.is-tile {
	box-sizing: border-box;
	padding: 3px;
	border-radius: 9px;
	background: #fff;
}
.pl-login-badge img.has-edge {
	border-radius: 9px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}