/* Login page styles (moved from login.html <style> block) */
body {
    font-family: 'Inter', sans-serif;
    --checkbox-tick-svg: url('data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27rgb(255,255,255)%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e');
}

/* ── Returning-client session restore ─────────────────────────────────────────
   js/loginBoot.js adds .session-check to <html> pre-paint whenever this browser
   holds a stored idToken, i.e. a client who is about to be redirected into the
   portal as soon as POST /refresh answers. While that is in flight the card
   shows the restoring state instead of a sign-in form the client is not meant
   to use. portalLogin.js removes the class (_endSessionRestore) as soon as the
   page becomes interactive — no session, an MFA/challenge screen, or an error.
   Deliberately hand-written rather than Tailwind utilities: login.html's
   compiled CSS only carries classes the build has seen, so plain CSS here
   cannot go silently unstyled. */
html.session-check #loginFormContainer { display: none; }
html.session-check .session-restoring  { display: flex; }

.session-restoring {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 0;
    text-align: center;
}
.session-restoring-spinner {
    width: 3rem;
    height: 3rem;
    border: 4px solid #e2e8f0;      /* slate-200 */
    border-top-color: #0d59f2;      /* primary — matches index.html's auth overlay */
    border-radius: 9999px;
    animation: session-restoring-spin 0.8s linear infinite;
}
.session-restoring-text {
    font-size: 0.875rem;
    color: #64748b;                 /* slate-500 */
}
@keyframes session-restoring-spin { to { transform: rotate(360deg); } }

/* Inline "resend code" button in the MFA resend notice */
.otp-resend-btn {
    color: #2563eb;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.otp-resend-btn.is-disabled,
.otp-resend-btn:disabled {
    color: #94a3b8;
    cursor: not-allowed;
    font-weight: 500;
}

/* Brand wordmark image in the login card header */
.login-brand-img {
    height: 2.5rem;
    width: auto;
    display: block;
    margin: 0 auto;
}

/* Password show/hide control.

   The button was only as big as its 20px glyph — measured 20x26 — which is a
   hard target to land on a phone. The element selector is deliberate: it beats
   Tailwind's .right-4 (login.css is linked BEFORE tailwind.login.css, so equal
   specificity would lose), letting the hit box grow to 44x44 inside the input's
   pr-12 padding instead of hanging over the typed text. Tailwind keeps the
   absolute positioning and the vertical centring. */
button.login-pw-toggle {
    right: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
}