/* Stockpile around WordPress: the login screen (with tokens.css and theme.css)
   and the "Stock system" link in the WordPress admin top bar. Nothing else in
   the WordPress admin is restyled. */

/* WordPress admin top bar: the link back to the stock system, icon aligned like the core items. */
#wpadminbar #wp-admin-bar-sp-stock-system .ab-icon { top: 2px; }

/* =========================================================================
   Login, lost password and reset screens. A roomy centred column: the app's
   mark, name and a short intro (Chrome::login_message), then the card. Fields
   are --sp-login-field tall; the show/hide eye sits inside the password field.
   ========================================================================= */
body.login.sp-shell {
	--sp-login-field: 48px;
	--sp-login-gap: 20px;
	min-height: 100vh;
	background:
		radial-gradient(900px 520px at 50% -8%, color-mix(in srgb, var(--sp-primary) 16%, transparent), transparent 70%),
		radial-gradient(700px 500px at 100% 110%, color-mix(in srgb, var(--sp-primary) 7%, transparent), transparent 70%),
		var(--sp-bg);
	background-attachment: fixed;
	font-family: var(--sp-font); color: var(--sp-text);
}
body.login.sp-shell #login { width: min(440px, calc(100% - 32px)); padding: clamp(32px, 9vh, 96px) 0 48px; margin: 0 auto; }

/* Brand: the logo over the site name. assets/img/logo.png is a 360px copy of
   /assets/logo-evil-bone-water.png, cropped to the circle (shown at 168px, so sharp at 2x). */
body.login.sp-shell h1.wp-login-logo, body.login.sp-shell #login h1 { margin: 0; }
body.login.sp-shell .wp-login-logo a, body.login.sp-shell #login h1 a { display: flex; flex-direction: column; align-items: center; gap: 16px; width: auto !important; height: auto !important; margin: 0 auto; padding: 0; background: none !important; text-indent: 0 !important; overflow: visible; line-height: 1.2; font-family: var(--sp-font-heading); font-size: 30px; font-weight: var(--sp-heading-weight, 700); letter-spacing: var(--sp-heading-spacing, -0.01em); color: var(--sp-text); text-decoration: none; }
body.login.sp-shell .wp-login-logo a::before, body.login.sp-shell #login h1 a::before { content: ""; display: block; width: 168px; height: 168px; border-radius: 50%; background: url("../img/logo.png") center / contain no-repeat; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.28)); }
body.login.sp-shell .wp-login-logo a:focus, body.login.sp-shell #login h1 a:focus { box-shadow: none; outline: none; }
body.login.sp-shell .wp-login-logo a:focus-visible::before, body.login.sp-shell #login h1 a:focus-visible::before { outline: 3px solid var(--sp-primary-ring); outline-offset: 3px; }
body.login.sp-shell .sp-login-intro { margin: 10px 0 0; text-align: center; color: var(--sp-muted); font-size: 15px; line-height: 1.5; }

/* The card. */
body.login.sp-shell #login form { margin: 28px 0 0; padding: 36px 36px 32px; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 24px 48px -16px rgba(0, 0, 0, 0.35); overflow: visible; }
body.login.sp-shell #login form p, body.login.sp-shell #login form .user-pass-wrap { margin: 0; }
body.login.sp-shell #login form label { display: block; color: var(--sp-text); font-size: 14px; font-weight: 600; line-height: 1.4; }
body.login.sp-shell #login form .input, body.login.sp-shell #login input[type="text"], body.login.sp-shell #login input[type="password"], body.login.sp-shell #login input[type="email"] { width: 100%; height: var(--sp-login-field); min-height: var(--sp-login-field); margin: 8px 0 var(--sp-login-gap); padding: 0 14px; box-sizing: border-box; background: var(--sp-bg); color: var(--sp-text); border: 1px solid var(--sp-border-strong); border-radius: 10px; box-shadow: none; font-family: var(--sp-font); font-size: 16px; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; }
body.login.sp-shell #login form .input:hover, body.login.sp-shell #login input[type="password"]:hover { border-color: color-mix(in srgb, var(--sp-primary) 45%, var(--sp-border-strong)); }
body.login.sp-shell #login form .input:focus, body.login.sp-shell #login input[type="text"]:focus, body.login.sp-shell #login input[type="password"]:focus, body.login.sp-shell #login input[type="email"]:focus { background: var(--sp-surface); border-color: var(--sp-primary); box-shadow: 0 0 0 4px var(--sp-primary-ring); outline: none; }

/* Show/hide password: an icon inside the right end of the field, lined up with it. */
body.login.sp-shell .wp-pwd { position: relative; }
body.login.sp-shell #login .wp-pwd input { padding-right: 52px; }
body.login.sp-shell.wp-core-ui .wp-pwd .button.wp-hide-pw { position: absolute; top: 9px; right: 1px; display: flex; align-items: center; justify-content: center; width: 48px; height: calc(var(--sp-login-field) - 2px); min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0 9px 9px 0; background: transparent; color: var(--sp-muted); box-shadow: none; }
body.login.sp-shell.wp-core-ui .wp-pwd .button.wp-hide-pw .dashicons { position: static; top: auto; width: 20px; height: 20px; font-size: 20px; line-height: 1; }
body.login.sp-shell.wp-core-ui .wp-pwd .button.wp-hide-pw:hover { color: var(--sp-primary); background: transparent; }
body.login.sp-shell.wp-core-ui .wp-pwd .button.wp-hide-pw:focus-visible { color: var(--sp-primary); outline: none; box-shadow: inset 0 0 0 2px var(--sp-primary-ring); }

/* Field errors (login.js): red outline plus a message under the field. */
body.login.sp-shell #login form input.sp-invalid { border-color: var(--sp-danger-fg, #d63638); }
body.login.sp-shell #login form input.sp-invalid:focus { border-color: var(--sp-danger-fg, #d63638); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sp-danger-fg, #d63638) 22%, transparent); }
body.login.sp-shell #login form .input:has(+ .sp-field-error), body.login.sp-shell #login form .wp-pwd:has(+ .sp-field-error) input { margin-bottom: 0; }
body.login.sp-shell #login form .sp-field-error { display: flex; align-items: center; gap: 8px; margin: 8px 0 var(--sp-login-gap); color: var(--sp-danger-fg, #d63638); font-size: 13.5px; line-height: 1.35; }
body.login.sp-shell .sp-field-error::before { content: "!"; flex: 0 0 auto; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--sp-danger-fg, #d63638); color: var(--sp-surface); font-family: var(--sp-font); font-size: 11px; font-weight: 800; line-height: 1; }

/* Remember Me, its help, and "Lost your password?" (moved here by login.js) on one row. */
body.login.sp-shell #login form .forgetmenot { float: none; display: flex; align-items: center; gap: 10px; margin: 4px 0 24px; }
body.login.sp-shell #login form .forgetmenot label { display: inline; font-weight: 500; color: var(--sp-text-2); }
body.login.sp-shell input[type="checkbox"] { margin: 0; border-radius: 5px; border-color: var(--sp-border-strong); background: var(--sp-surface); }
body.login.sp-shell input[type="checkbox"]:checked { background: var(--sp-primary); border-color: var(--sp-primary); }
body.login.sp-shell input[type="checkbox"]:checked::before { filter: brightness(0) invert(1); }
body.login.sp-shell .wp-tooltip__toggle { color: var(--sp-muted); }
body.login.sp-shell .wp-tooltip__toggle:hover, body.login.sp-shell .wp-tooltip__toggle:focus-visible { color: var(--sp-primary); }
body.login.sp-shell .wp-tooltip__bubble { background: var(--sp-surface); color: var(--sp-text); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm); box-shadow: var(--sp-shadow-lg); font-family: var(--sp-font); }
body.login.sp-shell .sp-login-forgot { margin-left: auto; color: var(--sp-primary); font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
body.login.sp-shell .sp-login-forgot:hover { text-decoration: underline; }
body.login.sp-shell .sp-login-forgot:focus-visible { outline: none; border-radius: 4px; box-shadow: 0 0 0 3px var(--sp-primary-ring); }

/* The main button: full width, as tall as the fields. */
body.login.sp-shell #login form p.submit, body.login.sp-shell #login form .submit { float: none; margin: 0; padding: 0; clear: both; }
body.login.sp-shell #login form .submit::after { content: ""; display: table; clear: both; }
body.login.sp-shell.wp-core-ui #login .button-primary { float: none; display: block; width: 100%; height: var(--sp-login-field); min-height: var(--sp-login-field); padding: 0 20px; background: var(--sp-primary); border: 1px solid var(--sp-primary); border-radius: 10px; color: var(--sp-on-primary); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--sp-primary) 80%, transparent); text-shadow: none; font-family: var(--sp-font); font-size: 15.5px; font-weight: 700; letter-spacing: 0.01em; transition: background 0.15s, transform 0.1s; }
body.login.sp-shell.wp-core-ui #login .button-primary:hover { background: var(--sp-primary-hover); border-color: var(--sp-primary-hover); }
body.login.sp-shell.wp-core-ui #login .button-primary:active { transform: translateY(1px); }
body.login.sp-shell.wp-core-ui #login .button-primary:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--sp-primary-ring); }
/* Reset password: WordPress's "Generate password" sits beside the main button. */
body.login.sp-shell.wp-core-ui #login .submit .button:not(.button-primary) { margin: 0 0 12px; width: 100%; height: 42px; }

/* Under the card: the remaining links (Log in, on the lost password screen). */
body.login.sp-shell #nav { margin: 20px 0 0; padding: 0; text-align: center; font-size: 14px; color: var(--sp-muted); }
body.login.sp-shell #nav a { color: var(--sp-primary); font-weight: 500; text-decoration: none; }
body.login.sp-shell #nav a:hover { text-decoration: underline; }

/* Notices above the card ("You are now logged out", errors, lost password help). */
body.login.sp-shell #login_error, body.login.sp-shell #login .message, body.login.sp-shell #login .success, body.login.sp-shell #login .notice { margin: 24px 0 0; padding: 14px 18px; border: 1px solid var(--sp-border); border-left: 4px solid var(--sp-primary); border-radius: 12px; box-shadow: none; background: var(--sp-surface); color: var(--sp-text); font-size: 14px; line-height: 1.5; }
body.login.sp-shell #login_error, body.login.sp-shell #login .notice-error { border-color: var(--sp-danger-border); border-left-color: var(--sp-danger-fg); background: var(--sp-danger-bg); color: var(--sp-danger-fg); }
body.login.sp-shell #login_error a { color: inherit; font-weight: 600; }
body.login.sp-shell #login .message + form, body.login.sp-shell #login_error + form, body.login.sp-shell #login .notice + form { margin-top: 16px; }
body.login.sp-shell #backtoblog, body.login.sp-shell .language-switcher, body.login.sp-shell .privacy-policy-page-link { display: none; }

@media (max-width: 480px) {
	body.login.sp-shell #login { padding-top: 28px; }
	body.login.sp-shell #login form { padding: 26px 22px 24px; border-radius: 14px; }
	body.login.sp-shell .wp-login-logo a, body.login.sp-shell #login h1 a { font-size: 25px; gap: 12px; }
	body.login.sp-shell .wp-login-logo a::before, body.login.sp-shell #login h1 a::before { width: 128px; height: 128px; }
}