/*
 * wp-login.php, wearing the app's clothes.
 *
 * Same tokens as everything else, emitted inline by Lifeos_Login. WordPress's
 * own ids are used because this is WordPress's markup, not ours.
 */

body.login {
	background: var(--canvas);
	color: var(--card);
	font-family: var(--font-ui);
}

.login h1 a {
	background: none;
	width: auto;
	height: auto;
	margin: 0 auto 22px;
	padding: 0;
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--card);
	text-indent: 0;
	text-decoration: none;
	overflow: visible;
}

.login form {
	background: var(--card);
	color: var(--ink);
	border: 0;
	border-radius: 14px;
	box-shadow: none;
	padding: 26px 24px;
	margin-top: 0;
}

.login label {
	color: var(--ink);
	font-size: 13px;
	font-weight: 600;
}

.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	background: var(--card-pure);
	border: 1px solid var(--line);
	border-radius: 10px;
	color: var(--ink);
	font-size: 16px;
	padding: 10px 12px;
	box-shadow: none;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: var(--brand);
	outline: 2px solid var(--brand);
	outline-offset: 1px;
	box-shadow: none;
}

.login .button-primary {
	background: var(--brand);
	border: 1px solid var(--brand);
	border-radius: 10px;
	color: var(--on-brand);
	font-size: 14px;
	font-weight: 500;
	text-shadow: none;
	box-shadow: none;
	padding: 6px 18px;
	height: auto;
	min-height: 42px;
	float: none;
	width: 100%;
}

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

.login .forgetmenot { float: none; margin-bottom: 12px; }
.login .forgetmenot label { display: inline; font-weight: 400; }
.login .submit { display: block; }

.login #login_error,
.login .message,
.login .notice {
	background: var(--card);
	border-inline-start: 4px solid var(--brand);
	border-radius: 10px;
	color: var(--ink);
	box-shadow: none;
	font-size: 14px;
}

.login #nav,
.login #backtoblog {
	padding: 0 24px;
	text-align: center;
}

.login #nav a,
.login #backtoblog a {
	color: color-mix(in srgb, var(--card) 62%, transparent);
	font-size: 13px;
}

.login #nav a:hover,
.login #backtoblog a:hover { color: var(--brand-lift); }

/* Ours, appended after the form. */

.los-login__extra {
	max-width: 320px;
	margin: 18px auto 0;
	text-align: center;
}

.los-login__signup {
	font-size: 13px;
	color: color-mix(in srgb, var(--card) 62%, transparent);
	margin: 0 0 22px;
}

.los-login__signup a { color: var(--brand-lift); text-decoration: none; }
.los-login__signup a:hover { text-decoration: underline; }

.los-login__credit {
	font-size: 12px;
	color: color-mix(in srgb, var(--card) 40%, transparent);
	margin: 0;
}

.los-login__name { color: color-mix(in srgb, var(--card) 58%, transparent); }

.login .language-switcher { display: none; }