/* =========================================================================
   Plantbaes login (wp-login.php) — UI-POLISH-6 §L.

   Cam: the login "looks very WordPress. Super basic/not aesthetic like our
   site." This restyles the stock form in place rather than replacing it —
   wp-login's markup carries a decade of security and edge-case handling
   (interim login, password reset, lockouts, redirects) that a custom form
   would have to re-earn. CSS repaints; it cannot break a login flow.

   Tokens are the design system's (root CLAUDE.md): cream canvas like the
   tools pages, card white, mauve CTA, Fraunces reserved for the one big
   welcome line, Manrope for everything functional — the same split the
   member area settled on earlier today (§F).

   Fraunces arrives via @import because wp-login enqueues none of the theme's
   fonts. display=swap so the welcome line renders in the system stack for
   the first frames rather than blanking.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..600;1,9..144,400..600&family=Manrope:wght@400..700&display=swap');

/* The html canvas matches the gradient's end colour, so wherever the body's
   painted box stops, the page continues in the same cream — this is the fix
   for the hard line Cam saw under "Lost your password?": gradients tile by
   default, and past the body's box the linear ramp was restarting from its
   lighter end. no-repeat + fixed attachment + a matching canvas means there
   is no edge to see. */
html:has(body.login) {
	background: #f7f3ee !important;
}

body.login {
	/* The tools pages' cream, with the planner's soft radial tints so the
	   page reads as "one of ours" before a single component is seen. */
	background:
		radial-gradient(ellipse 80% 60% at 50% -10%, #e9dee4 0%, transparent 60%),
		radial-gradient(ellipse 50% 40% at 10% 80%, rgba(184, 154, 172, 0.18) 0%, transparent 55%),
		linear-gradient(180deg, #faf6f1 0%, #f7f3ee 100%) !important;
	background-color: #f7f3ee !important;
	background-repeat: no-repeat !important;
	background-attachment: fixed !important;
	min-height: 100vh;
	font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* ---- Logo + welcome ---------------------------------------------------- */

/* One lockup row — the round mark beside the welcome line, matching the
   logged-out gate's banner (Cam's ask). The h1 becomes the row; the anchor
   inside it is the mark (whoever set the image via the customizer keeps
   owning it — only its size is constrained here), and the welcome text is
   the h1's ::after.

   CSS content is acceptable for the text: the site is single-language US
   English by convention (root CLAUDE.md), and wp-login offers no filterable
   slot here without PHP running on every login request. */
body.login h1 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 24px !important;
}

body.login h1 a {
	width: 44px !important;
	height: 44px !important;
	background-size: contain !important;
	background-position: center !important;
	margin: 0 !important;
	flex: 0 0 auto;
}

body.login h1::after {
	content: 'Welcome back.';
	font-family: "Fraunces", Georgia, serif;
	font-variation-settings: 'opsz' 144, 'SOFT' 50;
	font-weight: 500;
	font-size: 24px;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: #4a2f3d;
}

/* ---- The card ---------------------------------------------------------- */

body.login #loginform,
body.login #lostpasswordform,
body.login #resetpassform {
	background: #ffffff !important;
	border: 1px solid #e8e2e6 !important;
	border-radius: 18px !important;
	box-shadow: 0 18px 50px -22px rgba(74, 47, 61, 0.25) !important;
	padding: 26px 24px 24px !important;
	margin-top: 0 !important;
}

/* ---- Labels + fields --------------------------------------------------- */

body.login form label {
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: #8a7e86 !important;
	margin-bottom: 6px !important;
}

body.login form .input,
body.login form input[type='text'],
body.login form input[type='password'],
body.login form input[type='email'] {
	background: #ffffff !important;
	border: 1.5px solid #e8e2e6 !important;
	border-radius: 12px !important;
	padding: 12px 14px !important;
	/* 16px, not a point less: under 16 iOS zooms the page on focus, and in
	   the app that zoom is a trap (app-mode §8a fixes it there; the login
	   page should simply never trigger it anywhere). */
	font-size: 16px !important;
	line-height: 1.4 !important;
	color: #2a2127 !important;
	box-shadow: none !important;
	margin-bottom: 4px !important;
}

body.login form .input:focus,
body.login form input[type='text']:focus,
body.login form input[type='password']:focus,
body.login form input[type='email']:focus {
	border-color: #775973 !important;
	box-shadow: 0 0 0 3px rgba(119, 89, 115, 0.14) !important;
	outline: none !important;
}

/* WP's password-reveal eye, recoloured off "browser blue". */
body.login .wp-hide-pw {
	color: #8a7e86 !important;
}
body.login .wp-hide-pw:hover,
body.login .wp-hide-pw:focus {
	color: #775973 !important;
	box-shadow: none !important;
}

/* ---- Remember me + submit --------------------------------------------- */

body.login .forgetmenot {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 4px 0 20px !important;
}

body.login .forgetmenot label {
	/* The checkbox label is a sentence, not a field caption. */
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #2a2127 !important;
	margin: 0 !important;
}

/* Fully custom, not accent-color: WP's login stylesheet draws its own
   dashicon check in a ::before, which is why the first pass showed a blue
   box with a check spilling out of it — two checkbox designs fighting.
   appearance:none clears the field and both states are drawn here: a round
   cream-bordered dot, filling mauve when checked, with an inline-SVG tick
   sized to the circle (Cam: circular, purple, "make sure it fits nicely"). */
body.login input[type='checkbox'] {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 22px !important;
	height: 22px !important;
	border: 1.5px solid #e8e2e6 !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	box-shadow: none !important;
	margin: 0 !important;
	position: relative !important;
	cursor: pointer;
	flex: 0 0 auto;
}
/* The tick is a BACKGROUND on the input, not a ::before. Pseudo-elements on
   form controls are a WebKit courtesy rather than a spec guarantee, and the
   courtesy positioned ours off-centre on device. A background on the input
   itself has no such wobble: one box, one centre, done. WP's own dashicon
   ::before is suppressed below so nothing admin-flavoured leaks through. */
body.login input[type='checkbox']:checked {
	background-color: #775973 !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.8l4.6 4.6L19.5 6.8'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 12px 12px !important;
	border-color: #775973 !important;
}
body.login input[type='checkbox']::before,
body.login input[type='checkbox']:checked::before {
	content: none !important;
}
body.login input[type='checkbox']:focus-visible {
	box-shadow: 0 0 0 3px rgba(119, 89, 115, 0.14) !important;
	outline: none !important;
}

/* Primary CTA, per the design system: solid mauve, radius 8, semibold —
   and full-width, which is what stops the stock corner-crammed button
   reading as an afterthought. */
body.login .submit {
	margin-top: 18px !important;
}
body.login .submit .button-primary {
	width: 100% !important;
	float: none !important;
	background: #775973 !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 12px 20px !important;
	height: auto !important;
	min-height: 0 !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: #ffffff !important;
	text-shadow: none !important;
	box-shadow: none !important;
	transition: background 0.15s ease, transform 0.12s ease;
}
body.login .submit .button-primary:hover,
body.login .submit .button-primary:focus {
	background: #5e4659 !important;
}
body.login .submit .button-primary:active {
	transform: translateY(1px);
}

/* ---- Below-card links -------------------------------------------------- */

body.login #nav,
body.login #backtoblog {
	text-align: center !important;
	padding: 0 !important;
	font-size: 14px !important;
}
body.login #nav {
	margin: 20px 0 0 !important;
}
body.login #backtoblog {
	margin: 10px 0 0 !important;
}
body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a {
	color: #775973 !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}
body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .privacy-policy-page-link a:hover {
	color: #4a2f3d !important;
	text-decoration: underline !important;
}
body.login .privacy-policy-page-link {
	margin: 18px 0 48px !important;
}
body.login .privacy-policy-page-link a {
	font-weight: 500 !important;
	color: #8a7e86 !important;
}

/* ---- Notices ----------------------------------------------------------- */

/* WP's error/message boxes, in the card language instead of admin-blue. */
body.login .notice,
body.login #login_error,
body.login .message,
body.login .success {
	border: 1px solid #e8e2e6 !important;
	border-left: 4px solid #775973 !important;
	border-radius: 10px !important;
	box-shadow: 0 8px 24px -16px rgba(74, 47, 61, 0.2) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #2a2127 !important;
}
body.login #login_error {
	border-left-color: #b4544f !important;
}

/* The language switcher is admin furniture on a member-facing door. */
body.login .language-switcher {
	display: none !important;
}