/* =========================================================================
   wp-login.php, wearing the portal's front door.

   The portal has its own sign-in page and families never see this screen.
   Staff do — and a two-factor step happens here, whichever plugin provides
   it, because every one of them renders its "enter the code" form through
   wp-login.php. A studio that has just been asked for a code should not be
   looking at a different website while they read it out of their phone.

   Not scoped with .lmsx-app: this is the whole document, and it is not a
   portal panel. It borrows the tokens and the auth card's shape and stops
   there — WordPress owns the markup, so everything here is written against
   the classes core emits.
   ========================================================================= */

/* Centred in the window, not stranded at the top of it. Core pins the card
   near the top and leaves the rest of a tall screen empty — which reads as a
   page that failed to finish loading. */
body.login {
	background: var(--surface);
	color: var(--ink);
	font-family: var(--body, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
}

body.login #login {
	width: 100%;
	max-width: 404px;
	padding: 24px 20px;
	margin: 0;
}

/* A logo, where the studio has given one for a light card. */
body.login h1 a img.authlogo {
	display: block;
	margin: 0 auto;
	height: auto;
	max-height: 52px;
	max-width: min(240px, 80%);
	width: auto;
}

body.login #loginform,
body.login #lostpasswordform,
body.login #registerform,
body.login .login-action-validate_2fa form,
body.login form.shake {
	background: var(--base);
	border: 1px solid var(--edge, color-mix(in srgb, var(--muted) 14%, transparent));
	border-radius: 26px;
	box-shadow: var(--shadow-md, 0 18px 50px rgba(22, 19, 15, .10));
	padding: 32px 24px;
	margin-top: 0;
}

/* The wordmark, in place of core's WordPress logo. */
body.login h1 a {
	background: none;
	width: auto;
	height: auto;
	margin: 0 0 18px;
	padding: 0;
	font-family: var(--display, inherit);
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--ink);
	text-indent: 0;
	text-decoration: none;
	overflow: visible;
}
body.login h1 a:hover,
body.login h1 a:focus {
	color: var(--ink);
	box-shadow: none;
}
body.login h1 a s {
	color: var(--accent);
	text-decoration: none;
}

/* Labels and fields, in the portal's grammar rather than core's. */
body.login label {
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--muted);
}
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"],
body.login input[type="tel"],
body.login input[type="number"] {
	background: var(--surface);
	border: 2px solid var(--edge, color-mix(in srgb, var(--muted) 14%, transparent));
	border-radius: 14px;
	padding: 12px 14px;
	font-size: .95rem;
	color: var(--ink);
	box-shadow: none;
	transition: border-color .2s ease, background .2s ease;
}
body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus,
body.login input[type="tel"]:focus,
body.login input[type="number"]:focus {
	background: var(--base);
	border-color: var(--accent);
	box-shadow: none;
	outline: 0;
}

/* The sixteen-pixel floor, said again here for anything on this screen that
   is not ours: a phone zooms the whole page when a field smaller than this
   is tapped, and never zooms back. tokens.css says it for controls the
   portal draws; another plugin's field on this same screen is covered by
   the same rule, and this repeats it at a specificity its own stylesheet
   will not out-weigh. */
@media (pointer: coarse) {
	body.login :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="button"]) {
		font-size: 16px !important;
	}
}

/* A one-time code is read off a phone and typed once: give it room and
   keep the digits apart, the way every other code field in the world
   does. Core's 2FA field is #authcode; some providers use their own. */
body.login input#authcode::placeholder,
body.login input[autocomplete="one-time-code"]::placeholder {
	color: var(--line);
	font-weight: 700;
	letter-spacing: .3em;
}
body.login input#authcode,
body.login input[name="authcode"],
body.login input[name="two-factor-email-code"],
body.login input[autocomplete="one-time-code"] {
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: .3em;
	text-align: center;
	padding: 12px 8px 12px 16px;
}

/* The same metrics as .authcard .go on the portal's own front door, so the
   two doors are the same door. Core's own login button is much larger. */
body.login #login .button-primary,
body.login #login input[type="submit"],
body.login #login button[type="submit"],
body.login .button-primary,
body.login input[type="submit"] {
	background: var(--accent);
	border: 2px solid transparent;
	border-radius: 999px;
	box-shadow: none;
	color: #fff;
	display: block;
	float: none;
	font-family: inherit;
	font-size: .9rem;
	font-weight: 600;
	height: auto;
	line-height: 1.3;
	margin-top: 20px;
	padding: 12px 20px;
	text-shadow: none;
	width: 100%;
	transition: background .3s ease;
}
body.login #login .button-primary:hover,
body.login #login .button-primary:focus,
body.login #login input[type="submit"]:hover,
body.login .button-primary:hover,
body.login .button-primary:focus,
body.login input[type="submit"]:hover {
	background: var(--accent-ink);
	border-color: transparent;
	box-shadow: none;
	color: var(--on-fill);
}
/* Another method, or resend: a way out of the screen, not the thing to
   press. Sized down from the primary and no longer the width of the card. */
body.login .button:not(.button-primary) {
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: var(--muted);
	display: inline-block;
	font-size: .82rem;
	font-weight: 600;
	height: auto;
	line-height: 1.4;
	margin: 12px auto 0;
	padding: 6px 10px;
	text-decoration: underline;
	text-underline-offset: 3px;
	width: auto;
}
body.login .button:not(.button-primary):hover {
	background: transparent;
	color: var(--accent-ink);
}

/* The show/hide eye is a button, but not that kind of button.
   It ships as <button class="button button-secondary hide-if-no-js
   wp-hide-pw">, so the rule directly above — the quiet "use another method"
   link that sits under the card — caught it and handed it that link's
   underline and its 12px top margin. That is the line drawn under the eye
   and the reason it sat below the middle of the field instead of level with
   the text. Put back where it belongs: centred against the field's right
   edge, no rule under it, and the field given room so a long password never
   runs beneath it. Written one class deeper than the rule it corrects, so
   it wins on specificity rather than on the order of the file. */
/* The gap under the field belongs to the wrapper, not to the field. Core
   hangs a 16px bottom margin on the input itself, which made this wrapper
   64px tall around a 48px field — so centring the eye in the wrapper landed
   it 8px below the middle of the box it is supposed to sit in. Same gap,
   moved up one level, and the wrapper is now exactly the field. */
body.login .wp-pwd {
	position: relative;
	margin-bottom: 16px;
}
body.login .wp-pwd input[type="password"],
body.login .wp-pwd input[type="text"] {
	padding-right: 48px;
	margin-bottom: 0;
}
body.login .wp-pwd .button.wp-hide-pw {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	padding: 0;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 0;
	border-radius: 12px;
	box-shadow: none;
	color: var(--muted);
	text-decoration: none;
}
body.login .wp-pwd .button.wp-hide-pw:hover,
body.login .wp-pwd .button.wp-hide-pw:focus {
	background: var(--surface);
	color: var(--ink);
	text-decoration: none;
}
body.login .wp-pwd .button.wp-hide-pw .dashicons {
	width: 22px;
	height: 22px;
	font-size: 22px;
	line-height: 1;
}

/* What core says between the fields: "check your email", the method list. */
body.login #login .message,
body.login #login .notice,
body.login #login #login_error {
	background: var(--base);
	border: 0;
	border-left: 4px solid var(--accent);
	border-radius: 14px;
	box-shadow: var(--shadow-sm, 0 6px 18px rgba(22, 19, 15, .06));
	color: var(--ink-2);
	font-size: .86rem;
	line-height: 1.55;
	margin-bottom: 16px;
	padding: 12px 16px;
}
body.login #login .message {
	border-left-color: var(--ok);
}

body.login #loginform > p:has(> .button:not(.button-primary)),
body.login .backup-methods-wrap {
	text-align: center;
	margin: 0;
}
body.login p.forgetmenot,
body.login .login-remember {
	display: flex;
	align-items: center;
	gap: 8px;
}
body.login p.forgetmenot label,
body.login .login-remember label {
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink-2);
	display: flex;
	align-items: center;
	gap: 8px;
}
body.login p.forgetmenot input[type="checkbox"],
body.login .login-remember input[type="checkbox"] {
	margin: 0;
	width: 18px;
	height: 18px;
	border: 1px solid var(--edge, color-mix(in srgb, var(--muted) 35%, transparent));
	border-radius: 5px;
}

/* The links under the card. */
body.login #nav,
body.login #backtoblog {
	padding: 0;
	margin: 14px 0 0;
	text-align: center;
}
body.login #nav a,
body.login #backtoblog a {
	color: var(--muted);
	font-size: .82rem;
	font-weight: 600;
}
body.login #nav a:hover,
body.login #backtoblog a:hover {
	color: var(--accent-ink);
}

body.login .privacy-policy-page-link {
	display: none;   /* the studio's front door has one, and it is enough */
}

@media (prefers-reduced-motion: no-preference) {
	body.login form.shake {
		animation: lmsx-login-shake .4s ease;
	}
}
@keyframes lmsx-login-shake {
	10%, 90% { translate: -2px 0; }
	30%, 70% { translate: 4px 0; }
	50%      { translate: -6px 0; }
}

/* ------------------------------------------------- the session-expired modal
   WordPress reopens this same screen inside a ~380px frame (wp-auth-check)
   when a session expires mid-visit. The full page's card was wider than
   that frame, so its corners and shadows were cut off and the whole thing
   read as broken. In the frame everything tightens: the mark smaller, one
   card that fits, the message worn as the quiet notice it is — and no
   sideways scrolling, ever. */
body.interim-login {
	justify-content: flex-start;
	min-height: 0;
	overflow-x: hidden;
	padding: 6px 0 14px;
}
body.interim-login #login {
	max-width: 100%;
	padding: 10px 14px;
}
body.interim-login h1 a {
	font-size: 1.15rem;
	margin: 4px 0 12px;
}
body.interim-login h1 a img.authlogo {
	max-height: 38px;
}
body.interim-login #loginform,
body.interim-login form.shake {
	border-radius: 18px;
	box-shadow: var(--shadow-sm, 0 6px 18px rgba(22, 19, 15, .06));
	padding: 20px 18px;
}
body.interim-login #login .message,
body.interim-login #login .notice,
body.interim-login #login #login_error {
	border-radius: 12px;
	font-size: .82rem;
	margin-bottom: 12px;
	padding: 10px 14px;
}
body.interim-login label {
	font-size: .68rem;
}
body.interim-login .wp-pwd {
	margin-bottom: 10px;
}
body.interim-login #login .button-primary,
body.interim-login #login input[type="submit"] {
	margin-top: 14px;
}