/**
 * NTW Wiki — login screen.
 *
 * The hub sits behind a forced login, so this page is the team's front
 * door. Same palette as css/portal.css (kept literal here — wp-login
 * doesn't load the portal stylesheet), with the mascot on duty above the
 * form and dozing in the corner.
 */

body.login {
	background: #f4f6f2;
}

/* A faint capybara dozing in the corner of the room. */
body.login::after {
	content: "";
	position: fixed;
	right: -30px;
	bottom: -14px;
	width: 300px;
	height: 244px;
	background: url(../images/capy/capy5.webp) no-repeat center bottom / contain;
	opacity: .14;
	pointer-events: none;
	filter: saturate(.85);
}

#login {
	padding-top: 4%;
}

/* The parade (spawned by js/capy.js): drifters behind the form, exactly
   like the dashboard. Duplicated from css/portal.css because wp-login
   doesn't load the portal stylesheet. */
.ntw-capy-sky {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}

.ntw-capy-drifter {
	position: absolute;
	top: 0;
	left: 0;
	height: auto;
	opacity: 0;
	visibility: hidden;
	will-change: transform, opacity;
	filter: drop-shadow(0 8px 10px rgba(36, 26, 18, .12)) saturate(.92);
}

/* The mascot replaces the WordPress logo. */
.login h1 a {
	background-image: url(../images/capy/capy1.webp);
	background-size: contain;
	background-position: center bottom;
	width: 132px;
	height: 156px;
	margin-bottom: 14px;
	filter: drop-shadow(0 12px 14px rgba(36, 26, 18, .2));
}

/* The form card. */
.login form {
	border: 1px solid #e2e6df;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .08);
	padding: 26px 24px 30px;
}

.login label {
	color: #241a12;
	font-weight: 600;
}

.login form .input,
.login input[type="text"],
.login input[type="password"] {
	border-radius: 8px;
	border-color: #e2e6df;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {
	border-color: #3fa62a;
	box-shadow: 0 0 0 3px rgba(63, 166, 42, .18);
	outline: none;
}

.login .button.wp-hide-pw {
	color: #6b6a62;
}

.login .button.wp-hide-pw:focus {
	border-color: #3fa62a;
	box-shadow: 0 0 0 3px rgba(63, 166, 42, .18);
}

.wp-core-ui .button-primary {
	background: #3fa62a;
	border-color: #2e7d1f;
	border-radius: 8px;
	text-shadow: none;
	font-weight: 600;
	transition: background 160ms ease;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: #2e7d1f;
	border-color: #2e7d1f;
}

.wp-core-ui .button-primary:focus {
	box-shadow: 0 0 0 3px rgba(63, 166, 42, .28);
}

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

.login #nav a,
.login #backtoblog a {
	color: #6b6a62;
}

.login #nav a:hover,
.login #backtoblog a:hover {
	color: #2e7d1f;
}

/* Notices pick up the portal's rounding too. */
.login .notice,
.login .message,
.login #login_error {
	border-radius: 10px;
	border-left-width: 4px;
}

.login .message {
	border-left-color: #3fa62a;
}

/* The language switcher sits oddly close on some WP versions; breathe. */
.login .language-switcher {
	margin-top: 1.5em;
}