/* ========================================================================
   WILO LOGIN — wp-login.php in the kit's look (DENSE §1, §10, §17, §19)
   One card on the canvas with the Wilo mark above: login, lost / reset password (with the strength meter), the
   check-your-email, logged-out and error banners, and the interim login wp-admin shows in a popup (body.interim-login).
   WordPress's markup stays; Wilo_Login adds wilo-login.js (the eye's aria-pressed, the busy submit). No user setting
   exists before login, so light / dark follows the system. The tokens mirror wilo-kit.css :root.
   ======================================================================== */

:root {
    color-scheme: light dark;
    --wk-font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --wk-bg: #FAFAF9; --wk-surface: #FFFFFF; --wk-surface-2: #F5F5F4;
    --wk-border: #E7E5E4; --wk-border-2: #D6D3D1;
    --wk-ink-1: #1C1917; --wk-ink-2: #44403C; --wk-ink-3: #6A645D;
    --wk-accent: #C2410C; --wk-accent-strong: #9A3412; --wk-accent-soft: #FFF1E7; --wk-accent-border: rgba(204, 74, 12, .45);
    --wk-accent-fill: #CC4A0C; --wk-accent-fill-hover: #B23F0A; --wk-accent-fill-active: #9A3412;
    --wk-ring: rgba(204, 74, 12, .30);
    --wk-good: #15803D; --wk-good-soft: #E7F5EC;
    --wk-warn: #A16207; --wk-warn-soft: #FEF9C3;
    --wk-crit: #B91C1C; --wk-crit-soft: #FDEDED;
    --wk-card-sh: 0 1px 2px rgba(28, 25, 23, .06), 0 12px 32px rgba(28, 25, 23, .08);
    --wk-focus: 0 0 0 2px var(--wk-surface), 0 0 0 4px var(--wk-accent);
    --wl-head: 72px;   /* the mark row above the card: 40 + a 32 gap */
    --wl-check: 16px;
    --wl-i-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    --wl-i-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.73 5.08a10.74 10.74 0 0 1 11.2 6.57 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-1.44 2.49'/%3E%3Cpath d='M14.08 14.16a3 3 0 0 1-4.24-4.24'/%3E%3Cpath d='M17.48 17.5a10.75 10.75 0 0 1-15.42-5.15 1 1 0 0 1 0-.7 10.75 10.75 0 0 1 4.45-5.14'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
    --wl-i-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
    --wl-i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
    --wl-i-crit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
    --wl-i-good: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
    :root {
        --wk-bg: #0C0A09; --wk-surface: #1C1917; --wk-surface-2: #262220;
        --wk-border: #2E2926; --wk-border-2: #44403C;
        --wk-ink-1: #FAFAF9; --wk-ink-2: #D6D3D1; --wk-ink-3: #A8A29E;
        --wk-accent: #FB923C; --wk-accent-strong: #FDBA74; --wk-accent-soft: rgba(251, 146, 60, .16); --wk-accent-border: rgba(251, 146, 60, .45);
        --wk-accent-fill-hover: #D9520B; --wk-accent-fill-active: #B23F0A;
        --wk-ring: rgba(251, 146, 60, .35);
        --wk-good: #4ADE80; --wk-good-soft: rgba(74, 222, 128, .12);
        --wk-warn: #FACC15; --wk-warn-soft: rgba(250, 204, 21, .14);
        --wk-crit: #F87171; --wk-crit-soft: rgba(248, 113, 113, .12);
        --wk-card-sh: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .5);
    }
}
@media (max-width: 782px) {
    :root { --wl-check: 20px; }
}

/* ── Page: the canvas, the card centred on it ── */
body.login {
    display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; box-sizing: border-box;
    padding: max(32px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: var(--wk-bg); color: var(--wk-ink-1);
    font: 400 14px/20px var(--wk-font); -webkit-font-smoothing: antialiased;
}
body.login #login {
    position: relative; isolation: isolate; box-sizing: border-box;
    width: 360px; max-width: 100%; margin: 0; padding: 0 24px 24px;
}
/* The card is painted under everything below the mark: WordPress puts the banners, the form and the links side by side in #login. */
body.login #login::before {
    content: ""; position: absolute; z-index: -1; inset: var(--wl-head) 0 0;
    background: var(--wk-surface); border: 1px solid var(--wk-border); border-radius: 16px; box-shadow: var(--wk-card-sh);
}

/* ── The mark + "Wilo" above the card ── */
body.login h1.wp-login-logo { margin: 0 0 calc(var(--wl-head) - 40px + 24px); text-align: center; line-height: 0; }
body.login h1.wp-login-logo a {
    display: inline-flex; align-items: center; gap: 10px; width: auto; height: 40px; margin: 0; padding: 0 4px;
    overflow: visible; text-indent: 0; background: none; border-radius: 10px; outline: none;
    color: var(--wk-ink-1); font: 700 20px/28px var(--wk-font); letter-spacing: -.01em; text-transform: capitalize; text-decoration: none;
}
body.login h1.wp-login-logo a::before {
    content: ""; flex: none; width: 40px; height: 40px; border-radius: 10px;
    background: var(--wk-accent-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7l3.6 10L12 9.5 16.4 17 20 7'/%3E%3C/svg%3E") center / 24px no-repeat;
}
body.login h1.wp-login-logo a:hover { color: var(--wk-ink-1); }
body.login h1.wp-login-logo a:focus-visible { box-shadow: var(--wk-focus); }

/* ── The form sits flat inside the card ── */
body.login form {
    margin: 0; padding: 0; overflow: visible; background: none; border: 0; box-shadow: none;
}
body.login form.shake { animation: none; transform: none; } /* the error banner says it */
body.login #login form p,
body.login #login form .user-pass-wrap,
body.login #login form .user-pass1-wrap { margin: 0 0 16px; }
body.login label {
    display: block; margin: 0 0 6px; color: var(--wk-ink-2); font: 500 13px/18px var(--wk-font);
}
body.login #login form p.description,
body.login #login form .indicator-hint { margin: 0 0 16px; color: var(--wk-ink-3); font-size: 12px; line-height: 18px; }

/* ── Fields: 40px, 16px text (no iOS zoom), the kit's focus ring ── */
body.login form .input,
body.login input[type="text"],
body.login input[type="email"],
body.login input[type="password"] {
    box-sizing: border-box; width: 100%; height: 40px; min-height: 40px; margin: 0; padding: 0 12px;
    background: var(--wk-surface); border: 1px solid var(--wk-border-2); border-radius: 8px; box-shadow: none; outline: none;
    color: var(--wk-ink-1); font: 400 16px/24px var(--wk-font);
    transition: border-color .12s ease, box-shadow .12s ease;
}
body.login.js input.password-input { padding-right: 44px; font-family: var(--wk-font); }
body.login form .input:hover,
body.login input[type="text"]:hover,
body.login input[type="password"]:hover { border-color: var(--wk-ink-3); }
body.login form .input:focus,
body.login input[type="text"]:focus,
body.login input[type="email"]:focus,
body.login input[type="password"]:focus { border-color: var(--wk-accent); box-shadow: 0 0 0 3px var(--wk-ring); outline: none; }
/* Autofill: no yellow, no white field in dark */
body.login input:-webkit-autofill { -webkit-text-fill-color: var(--wk-ink-1); box-shadow: 0 0 0 40px var(--wk-surface) inset; caret-color: var(--wk-ink-1); }
body.login input:-webkit-autofill:focus { box-shadow: 0 0 0 40px var(--wk-surface) inset, 0 0 0 3px var(--wk-ring); }

/* ── The eye: show / hide the password (WordPress's button; wilo-login.js keeps aria-pressed) ── */
body.login .wp-pwd { position: relative; }
body.login .button.wp-hide-pw {
    position: absolute; top: 0; right: 0; display: grid; place-items: center;
    width: 40px; height: 40px; min-width: 40px; min-height: 40px; margin: 0; padding: 0;
    background: none; border: 0; border-radius: 8px; box-shadow: none; color: var(--wk-ink-3); cursor: pointer;
}
body.login .button.wp-hide-pw:hover { background: none; color: var(--wk-ink-1); }
body.login .button.wp-hide-pw:focus { background: none; border: 0; box-shadow: none; outline: none; }
body.login .button.wp-hide-pw:focus-visible { box-shadow: inset 0 0 0 2px var(--wk-accent); }
body.login .button.wp-hide-pw .dashicons {
    position: static; width: 18px; height: 18px; top: 0;
    background: currentColor; -webkit-mask: var(--wl-i-eye) center / 18px no-repeat; mask: var(--wl-i-eye) center / 18px no-repeat;
}
body.login .button.wp-hide-pw .dashicons::before { content: none; }
body.login .button.wp-hide-pw .dashicons-hidden { -webkit-mask-image: var(--wl-i-eye-off); mask-image: var(--wl-i-eye-off); }

/* ── Password strength (reset password) ── */
body.login #pass-strength-result {
    box-sizing: border-box; width: 100%; margin: 8px 0 0; padding: 2px 10px;
    background: var(--wk-surface-2); border: 1px solid var(--wk-border); border-radius: 6px;
    color: var(--wk-ink-2); font: 500 12px/20px var(--wk-font); text-align: left;
}
body.login #pass-strength-result.short,
body.login #pass-strength-result.bad { background: var(--wk-crit-soft); border-color: color-mix(in srgb, var(--wk-crit) 25%, transparent); color: var(--wk-crit); }
body.login #pass-strength-result.good { background: var(--wk-warn-soft); border-color: color-mix(in srgb, var(--wk-warn) 30%, transparent); color: var(--wk-warn); }
body.login #pass-strength-result.strong { background: var(--wk-good-soft); border-color: color-mix(in srgb, var(--wk-good) 25%, transparent); color: var(--wk-good); }
body.login #pass1.short, body.login #pass1.bad { border-color: var(--wk-crit); }
body.login #pass1.good { border-color: var(--wk-warn); }
body.login #pass1.strong { border-color: var(--wk-good); }
body.login .pw-weak { margin: 0 0 16px; }
body.login .pw-weak,
body.login .forgetmenot { align-items: center; gap: 8px; }
body.login .pw-weak[style*="block"] { display: flex !important; } /* WordPress shows it with an inline display */

/* ── Checkboxes: the kit's (Remember me, Confirm use of weak password) ── */
body.login .forgetmenot { display: flex; float: none; margin: 0 0 20px; }
body.login .forgetmenot label,
body.login .pw-weak label { display: inline; margin: 0; color: var(--wk-ink-2); font: 400 14px/20px var(--wk-font); cursor: pointer; }
body.login input[type="checkbox"] {
    flex: none; width: var(--wl-check); height: var(--wl-check); min-width: 0; margin: 0; padding: 0;
    background: var(--wk-surface) center / calc(var(--wl-check) - 4px) no-repeat; border: 1px solid var(--wk-border-2); border-radius: 4px;
    box-shadow: none; appearance: none; -webkit-appearance: none; cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}
body.login input[type="checkbox"]::before { content: none; }
body.login input[type="checkbox"]:hover { border-color: var(--wk-ink-3); }
body.login input[type="checkbox"]:checked {
    background-color: var(--wk-accent-fill); border-color: var(--wk-accent-fill);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
body.login input[type="checkbox"]:focus { box-shadow: none; outline: none; }
body.login input[type="checkbox"]:focus-visible { box-shadow: var(--wk-focus); }

/* ── Buttons: the primary is full width and orange; Generate password is the kit's secondary ── */
body.login #login form p.submit { display: flex; flex-direction: column; gap: 8px; position: relative; margin: 0; padding: 0; }
body.login .button.button-primary,
body.login .button.wp-generate-pw {
    float: none; box-sizing: border-box; width: 100%; height: 40px; min-height: 40px; margin: 0; padding: 0 16px;
    border-radius: 8px; box-shadow: none; text-shadow: none; font: 500 15px/38px var(--wk-font); cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
body.login .button.button-primary { background: var(--wk-accent-fill); border: 1px solid var(--wk-accent-fill); color: #FFF; }
body.login .button.button-primary:hover { background: var(--wk-accent-fill-hover); border-color: var(--wk-accent-fill-hover); color: #FFF; }
body.login .button.button-primary:active { background: var(--wk-accent-fill-active); border-color: var(--wk-accent-fill-active); color: #FFF; }
body.login .button.wp-generate-pw { background: var(--wk-surface); border: 1px solid var(--wk-border-2); color: var(--wk-ink-1); }
body.login .button.wp-generate-pw:hover { background: var(--wk-surface-2); border-color: var(--wk-border-2); color: var(--wk-ink-1); }
body.login .button.button-primary:focus,
body.login .button.wp-generate-pw:focus { box-shadow: none; outline: none; }
body.login .button.button-primary:focus-visible,
body.login .button.wp-generate-pw:focus-visible { box-shadow: var(--wk-focus); }
body.login .button.button-primary:disabled,
body.login .button.button-primary[disabled] { background: var(--wk-surface-2) !important; border-color: var(--wk-border) !important; color: var(--wk-ink-3) !important; cursor: not-allowed; }
/* Busy (wilo-login.js, on submit): the label gives way to a spinner; the button is the form's last one */
body.login form.is-busy .button-primary { color: transparent; pointer-events: none; }
body.login form.is-busy p.submit::after {
    content: ""; position: absolute; left: 50%; bottom: 11px; width: 14px; height: 14px; margin-left: -9px;
    border: 2px solid #FFF; border-right-color: transparent; border-radius: 50%; animation: wl-spin 600ms linear infinite;
}
@keyframes wl-spin { to { transform: rotate(360deg); } }

/* ── Links: Lost your password? · ‹ Back to log in — no underline ── */
body.login a { color: var(--wk-accent); text-decoration: none; }
body.login a:hover { color: var(--wk-accent-strong); }
body.login a:focus { box-shadow: none; outline: none; }
body.login a:focus-visible { border-radius: 4px; box-shadow: var(--wk-focus); }
body.login #nav { margin: 16px 0 0; padding: 0; text-align: center; font: 500 13px/20px var(--wk-font); color: var(--wk-ink-3); }
body.login #nav a { color: var(--wk-accent); }
body.login #nav a:hover { color: var(--wk-accent-strong); }
body.login #nav .wp-login-log-in { display: inline-flex; align-items: center; gap: 2px; }
body.login #nav .wp-login-log-in::before {
    content: ""; width: 16px; height: 16px; margin-left: -4px;
    background: currentColor; -webkit-mask: var(--wl-i-back) center / 16px no-repeat; mask: var(--wl-i-back) center / 16px no-repeat;
}
/* The frontend is private: no "← Go to site" (the language switcher is off in Wilo_Login) */
body.login #backtoblog { display: none; }

/* ── Banners: errors (crit), notices (info), done (good) — inside the card ── */
body.login #login .notice,
body.login #login .message,
body.login #login .success {
    display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 10px 12px;
    background: var(--wk-accent-soft); border: 1px solid var(--wk-accent-border); border-radius: 10px; box-shadow: none;
    color: var(--wk-ink-1); font: 400 13px/20px var(--wk-font); overflow-wrap: anywhere;
}
body.login #login .notice::before,
body.login #login .message::before,
body.login #login .success::before {
    content: ""; flex: none; width: 16px; height: 20px; color: var(--wk-accent-strong);
    background: currentColor; -webkit-mask: var(--wl-i-info) center / 16px no-repeat; mask: var(--wl-i-info) center / 16px no-repeat;
}
body.login #login .notice-error {
    background: var(--wk-crit-soft); border-color: color-mix(in srgb, var(--wk-crit) 25%, transparent);
}
body.login #login .notice-error::before { color: var(--wk-crit); -webkit-mask-image: var(--wl-i-crit); mask-image: var(--wl-i-crit); }
body.login #login .success,
body.login #login .notice-success,
body.login #login .reset-pass,
body.login.interim-login-success #login .message {
    background: var(--wk-good-soft); border-color: color-mix(in srgb, var(--wk-good) 25%, transparent);
}
body.login #login .success::before,
body.login #login .notice-success::before,
body.login #login .reset-pass::before,
body.login.interim-login-success #login .message::before { color: var(--wk-good); -webkit-mask-image: var(--wl-i-good); mask-image: var(--wl-i-good); }
body.login #login .notice p,
body.login #login .notice ul { margin: 0; padding: 0; font: inherit; }
body.login #login .notice ul { list-style: none; display: grid; gap: 4px; }
body.login #login .notice a { font-weight: 500; }
body.login #login .notice strong { font-weight: 600; }

/* ── The interim login: wp-admin's session-expired popup frames it (Wilo_Login::popup) ── */
body.login.interim-login { display: block; min-height: 100%; padding: 0; background: var(--wk-surface); }
body.login.interim-login #login { width: auto; max-width: 420px; margin: 0 auto; padding: 20px 24px 24px; } /* opened on its own, it stays a column */
body.login.interim-login #login::before { content: none; }
body.login.interim-login h1.wp-login-logo { margin: 0 0 16px; }
body.login.interim-login h1.wp-login-logo a { height: 32px; gap: 8px; font-size: 17px; }
body.login.interim-login h1.wp-login-logo a::before { width: 32px; height: 32px; border-radius: 8px; background-size: 20px; }

/* ── Phones: the card fills the width between the 16px gutters ── */
@media (max-width: 480px) {
    body.login { place-items: start center; padding-top: max(48px, env(safe-area-inset-top)); }
    body.login #login { width: 100%; padding: 0 20px 20px; }
    body.login.interim-login #login { padding: 16px 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    body.login form.is-busy p.submit::after { animation-duration: 1.6s; }
}