/* The sign-in page (DESIGN.md → Sign-in page). One sheet of paper holds every
   way in: the llq-signin block, then the password form, then the small links.
   From 900px wide the fox at the desk sits beside it on the parchment; below
   that the sheet is the whole page and the lockup is the only fox. */

body.login {
	min-height: 100vh;
	background: var(--ap-paper);
	font-family: var(--ap-font-sans);
	color: var(--ap-warm-ink);
	caret-color: var(--ap-warm-ink);
}
body.login ::selection { background: var(--ap-stone-200); color: var(--ap-warm-ink); }

/* The column. A flex row that wraps, so the three small links share one line. */
.login #login {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 16px;
	width: min(376px, 100% - 32px);
	margin: 0 auto;
	padding: 40px 0;
}
.login #login > * { flex: 1 1 100%; }

/* The AuthorFox lockup (DESIGN.md Brand), left-aligned at the head of the
   sheet. The link text from login_headertext stays for screen readers. */
.login h1 { margin: 0 0 32px; text-align: left; }
.login h1 a {
	width: 160px;
	height: 50px;
	margin: 0;
	background: url(../images/authorfox-logo.webp) left center / contain no-repeat;
	text-indent: -9999px;
	overflow: hidden;
}

/* The picture panel is printed by the theme (authorpilot_login_scene) and
   shows only beside the sheet. */
.ap-login-scene { display: none; }

@media (min-width: 900px) {
	body.login:not(.interim-login) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(460px, 44%);
		grid-template-rows: auto;
		background: var(--ap-parchment);
	}
	/* The sheet: paper with the hairline, the full height of the window. */
	body.login:not(.interim-login)::before {
		content: "";
		grid-column: 2;
		grid-row: 1;
		background: var(--ap-paper);
		border-left: 1px solid var(--ap-stone-200);
	}
	body.login:not(.interim-login) > :not(#login):not(.ap-login-scene) { grid-column: 1 / -1; }
	body.login:not(.interim-login) #login {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
		position: relative;
		padding: 48px 0;
	}
	.ap-login-scene {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		justify-self: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		max-width: 480px;
		padding: 48px 40px;
		text-align: center;
	}
	.ap-login-scene .ap-art { display: block; width: min(360px, 100%); height: auto; }
	.ap-login-scene__line {
		margin: 24px 0 0;
		font: 600 34px/1.2 var(--ap-font-serif);
		letter-spacing: -1.02px;
		color: var(--ap-warm-ink);
		text-wrap: balance;
	}
}
@media (min-width: 900px) and (max-height: 760px) {
	.ap-login-scene .ap-art { width: min(240px, 100%); }
	.ap-login-scene__line { font-size: 28px; letter-spacing: -0.56px; }
}

/* Every form on this page sits on the sheet itself: no card of its own. */
.login form {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

/* Labels and fields, shared by the email link and the password form. Inputs
   take the landing form's stone-500 boundary (3:1 against paper, WCAG 1.4.11). */
.login label,
.login .llq-signin__label {
	display: block;
	margin: 0 0 6px;
	font: 500 13px/1.3 var(--ap-font-sans);
	color: var(--ap-stone-700);
}
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"],
.login .llq-signin__input {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--ap-stone-500);
	border-radius: var(--ap-radius);
	background: var(--ap-paper);
	color: var(--ap-warm-ink);
	font: 400 15px/1.4 var(--ap-font-sans);
	box-shadow: none;
	transition: border-color 120ms ease-out;
}
.login form .input:hover,
.login .llq-signin__input:hover { border-color: var(--ap-stone-700); }
.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus,
.login .llq-signin__input:focus {
	border-color: var(--ap-warm-ink);
	outline: 2px solid var(--ap-warm-ink);
	outline-offset: 2px;
	box-shadow: none;
}

/* llq-signin's block (spec 2026-10-21 §1.1): the plugin brings its layout;
   the hub sets its variables and the pill buttons from the tokens. */
.login .ap-login-block { margin: 0; }
.login .ap-login-block .llq-signin {
	--llq-signin-accent: var(--ap-warm-ink);
	--llq-signin-on-accent: var(--ap-paper);
	--llq-signin-radius: var(--ap-radius);
	--llq-signin-font: var(--ap-font-sans);
	gap: 10px;
}
.login .llq-signin__heading {
	margin: 0 0 10px;
	font: 600 28px/1.25 var(--ap-font-serif);
	letter-spacing: -0.56px;
	color: var(--ap-warm-ink);
	text-wrap: balance;
}
.login .llq-signin__text { font-size: 14px; line-height: 1.45; color: var(--ap-stone-700); }
.login .llq-signin__link { gap: 0; }
.login .llq-signin__link .llq-signin__button { margin-top: 10px; }
.login .llq-signin__button {
	min-height: 44px;
	border-radius: var(--ap-radius-pill);
	font: 500 14px/1 var(--ap-font-sans);
	transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
/* Outlined pills take stone-500, the weight of Google's own #747775 border,
   so the two methods read as a pair. */
.login .llq-signin__button--passkey {
	background: var(--ap-paper);
	border-color: var(--ap-stone-500);
	color: var(--ap-warm-ink);
}
.login .llq-signin__button--passkey:hover { background: var(--ap-mist); border-color: var(--ap-stone-700); }
/* Google's own button keeps its colours (their branding rules); a light hover. */
.login .llq-signin__button--google.llq-signin__button--light:hover { background: #f8f8f8; }
.login .llq-signin__button--primary:hover { background: var(--ap-charcoal); border-color: var(--ap-charcoal); }
.login .llq-signin__button:focus-visible { outline: 2px solid var(--ap-warm-ink); outline-offset: 2px; }
.login .llq-signin__button--primary:focus-visible { box-shadow: 0 0 0 2px var(--ap-paper); }

/* The two "or" lines: the plugin's between its methods and the hub's above
   the password form, drawn alike. */
.login .llq-signin__divider,
.login .ap-login-or {
	display: flex;
	align-items: center;
	gap: 12px;
	font: 500 13px/1.3 var(--ap-font-sans);
	color: var(--ap-stone-600);
	opacity: 1;
}
.login .llq-signin__divider { margin: 6px 0; }
.login .llq-signin__divider::before,
.login .llq-signin__divider::after,
.login .ap-login-or::before,
.login .ap-login-or::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--ap-stone-200);
	opacity: 1;
}
.login .ap-login-or { margin: 28px 0 16px; text-align: left; }

/* The plugin's notices (link sent, link expired): hairline slips with a tint. */
.login .llq-signin__notice { padding: 10px 12px; font-size: 14px; line-height: 1.45; color: var(--ap-warm-ink); }
.login .llq-signin__notice--ok { background: var(--ap-ok-tint); color: var(--ap-ok-700); }
.login .llq-signin__notice--error { background: var(--ap-danger-tint); color: var(--ap-danger-700); }

/* The password form: two fields, then Remember me and the button on one row. */
.login #loginform,
.login #lostpasswordform,
.login #resetpassform { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.login #loginform > *,
.login #lostpasswordform > *,
.login #resetpassform > * { flex: 1 1 100%; margin: 0; }
.login #loginform > .forgetmenot,
.login #loginform > .submit { flex: 0 0 auto; }
.login .user-pass-wrap { margin: 0; }
.login .wp-pwd { position: relative; }
.login #user_pass { padding-right: 44px; }
.login .forgetmenot { float: none; display: flex; align-items: center; gap: 8px; }
.login .forgetmenot label { display: inline; margin: 0; font: 400 13px/1.3 var(--ap-font-sans); color: var(--ap-stone-700); }
.login p.submit { padding: 0; }
.login .button-primary {
	float: none;
	min-height: 40px;
	padding: 0 18px;
	background: var(--ap-warm-ink);
	border: 1px solid var(--ap-warm-ink);
	border-radius: var(--ap-radius-pill);
	color: var(--ap-paper);
	font: 500 14px/1 var(--ap-font-sans);
	box-shadow: none;
	text-shadow: none;
	transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.login .button-primary:hover,
.login .button-primary:focus { background: var(--ap-charcoal); border-color: var(--ap-charcoal); color: var(--ap-paper); }
/* Dark pill focus (DESIGN.md Motion → Focus): a paper inner ring flush
   against the button plus a warm-ink outer ring, as .ap-btn--primary. */
.login .button-primary:focus-visible { outline: 2px solid var(--ap-warm-ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ap-paper); }
/* Under the sign-in block the email link is the one filled pill; the
   password form's Log In steps back to a ghost pill. */
.login .ap-login-block ~ #loginform .button-primary { background: var(--ap-paper); border-color: var(--ap-stone-500); color: var(--ap-warm-ink); }
.login .ap-login-block ~ #loginform .button-primary:hover,
.login .ap-login-block ~ #loginform .button-primary:focus { background: var(--ap-mist); border-color: var(--ap-stone-700); color: var(--ap-warm-ink); }
.login .ap-login-block ~ #loginform .button-primary:focus-visible { box-shadow: none; }

/* WordPress's own controls default to the admin-scheme blue (#3858e9): the
   show-password eye, the help toggle and the checked box. DESIGN.md allows
   no blue, so they take stone and warm-ink like the rest of the form. */
.login .button.wp-hide-pw { top: 0; right: 0; width: 44px; height: 44px; min-height: 44px; margin: 0; border: 0; background: none; }
.login .button.wp-hide-pw,
.login .button.wp-hide-pw:hover,
.login .button.wp-hide-pw .dashicons,
.login .wp-tooltip__toggle,
.login .wp-tooltip__toggle .dashicons { color: var(--ap-stone-600); }
.login .button.wp-hide-pw:focus-visible,
.login .wp-tooltip__toggle:focus-visible { outline: 2px solid var(--ap-warm-ink); outline-offset: 2px; border-color: transparent; box-shadow: none; }
.login input[type="checkbox"] { margin: 0; border-color: var(--ap-stone-500); border-radius: 4px; box-shadow: none; }
.login input[type="checkbox"]:checked { background: var(--ap-warm-ink); border-color: var(--ap-warm-ink); }
.login input[type="checkbox"]:checked::before { filter: brightness(0) invert(1); }
.login input[type="checkbox"]:focus-visible { outline: 2px solid var(--ap-warm-ink); outline-offset: 2px; box-shadow: none; }

/* Messages about the page as a whole (logged out, wrong password): one slip
   at the head of the sheet. No coloured side stripe. */
.login .message,
.login .notice,
.login .success,
.login #login_error {
	margin: 0 0 24px;
	padding: 10px 12px;
	border: 1px solid var(--ap-stone-300);
	border-radius: var(--ap-radius);
	background: var(--ap-paper);
	box-shadow: none;
	font: 500 14px/1.45 var(--ap-font-sans);
	color: var(--ap-warm-ink);
}
.login #login_error,
.login .notice-error { border-color: transparent; background: var(--ap-danger-tint); color: var(--ap-danger-700); }
.login .success { border-color: transparent; background: var(--ap-ok-tint); color: var(--ap-ok-700); }
.login #login_error a { color: inherit; }

/* The three small links share one line under the forms. */
.login #nav,
.login #backtoblog,
.login #login > .privacy-policy-page-link {
	flex: 0 0 auto;
	width: auto;
	margin: 28px 0 0;
	padding: 0;
	font: 400 13px/1.3 var(--ap-font-sans);
	text-align: left;
}
.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a {
	color: var(--ap-stone-600);
	text-decoration: underline;
	text-decoration-color: var(--ap-stone-300);
	text-underline-offset: 3px;
	transition: color 120ms ease-out, text-decoration-color 120ms ease-out;
}
.login #nav a:hover,
.login #backtoblog a:hover,
.login .privacy-policy-page-link a:hover { color: var(--ap-warm-ink); text-decoration-color: currentColor; }
.login a:focus-visible { outline: 2px solid var(--ap-warm-ink); outline-offset: 2px; border-radius: 2px; box-shadow: none; }

/* Short laptop windows: the sheet tightens so every way in still fits. */
@media (min-width: 900px) and (max-height: 760px) {
	body.login:not(.interim-login) #login { padding: 16px 0; }
	.login h1 { margin-bottom: 20px; }
	.login .ap-login-or { margin: 20px 0 12px; }
	.login #nav,
	.login #backtoblog,
	.login #login > .privacy-policy-page-link { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.login * { transition-duration: 1ms !important; }
}