/* Login — 1:1 port of "AVA Login (final).dc.html" (+ mobile fallback).
   Layout lives inline in the markup (as in the dc.html); this file holds the
   dc.html <style> block classes + the root/wrapper. */

.login-bg {
    min-height: 100dvh;
    width: 100%;
    max-width: 100vw;
    background: #001E30;
    font-family: 'Inter', system-ui, sans-serif;
    overflow-x: hidden;
}
.login-bg * { box-sizing: border-box; }
.login-bg ::placeholder { color: #859AA1; }

.login-root {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    overflow-x: hidden;
    font-family: 'Inter', system-ui, sans-serif;
    background: #001E30;
    color: #EAF6F8;
}
.login-formpanel { overflow-x: hidden; }

/* Stable height for the login/register/forgot content so switching forms doesn't jump
   (desktop). On mobile this is released so the column can shrink to fit the screen. */
.li-content { min-height: 430px; }

/* Inputs */
.li-in {
    width: 100%;
    background: #001E30;
    border: 1px solid rgba(159,182,190,0.20);
    border-radius: 12px;
    color: #EAF6F8;
    font: 400 15px Inter;
    padding: 13px 15px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.li-in:focus { border-color: rgba(10,243,219,0.55); box-shadow: 0 0 0 3px rgba(10,243,219,0.14); }

/* Links */
.li-link { color: #0AF3DB; text-decoration: none; font-weight: 500; padding: 0; }
.li-link:hover { text-decoration: underline; }

/* Primary CTA */
.li-primary { transition: filter .15s, transform .05s; }
.li-primary:hover:not(:disabled) { filter: brightness(1.06); }
.li-primary:active:not(:disabled) { transform: translateY(1px); }
.li-primary:disabled { opacity: .85; cursor: default; }

/* Inline loading spinner for the CTA (dark, on the aqua button) */
.li-spin {
    display: inline-block;
    width: 15px; height: 15px;
    border: 2px solid rgba(0,30,48,0.30);
    border-top-color: #001E30;
    border-radius: 50%;
    vertical-align: -3px;
    margin-right: 9px;
    animation: liSpin .7s linear infinite;
}
@keyframes liSpin { to { transform: rotate(360deg); } }

/* Brain fills the 360px container from the markup */
.login-brain { width: 100%; margin: 0; }

/* Logo shown only on mobile (desktop shows it in the brand panel) */
.login-mobile-logo { display: none; height: 40px; width: auto; object-fit: contain; margin: 0 auto 22px; }

/* Message slot (error on login, status on register/forgot) */
.li-msg { display: none; margin: 0 0 16px; padding: 10px 13px; border-radius: 10px; font: 500 13px Inter; text-align: center; }
.li-msg.show { display: block; }
.li-msg.error { background: rgba(156,86,81,0.14); border: 1px solid rgba(156,86,81,0.40); color: #e2938d; }
.li-msg.success { background: rgba(20,243,161,0.12); border: 1px solid rgba(20,243,161,0.34); color: #14f3a1; }

/* Mobile: single column, brand panel hidden (dc.html mobile is a one-column form) */
/* Mobile is the SAME page, responsive (matches "AVA Login (mobile).dc.html"):
   brand panel drops away; single centred column with brain + logo on top; all text centred. */
/* Mobile: single-column, full-width, no sideways scroll (only vertical if the form
   is taller than the screen). The brand panel drops away entirely. */
@media (max-width: 900px) {
    /* stack as a block so the flex side-by-side can never force width overflow */
    .login-root { display: block !important; width: 100% !important; max-width: 100vw !important; overflow-x: hidden; }

    /* inline `display:flex` on the brand panel outranks a plain rule → needs !important */
    .login-brand { display: none !important; }

    .login-formpanel {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100dvh;
        padding: 24px 20px !important;
        align-items: stretch !important;
        justify-content: center !important;   /* centre the column; fit without scroll */
    }
    /* the inner column: centred, capped, never wider than the screen */
    .login-formpanel > div { width: 100% !important; max-width: 400px !important; margin: 0 auto; }

    /* release the desktop min-height so the column shrinks to fit the viewport */
    .li-content { min-height: 0 !important; }

    .login-mobile-logo { display: block; margin: 0 auto 10px; }

    /* Brain is the visual anchor on mobile: sized generously, capped so the whole
       column still fits one screen without scrolling. */
    .login-brain-wrap { width: 100% !important; max-width: 240px !important; margin: 0 auto 8px !important; }

    /* tighten vertical rhythm so the whole form fits on one screen */
    .login-formpanel h1 { text-align: center !important; font-size: 24px !important; margin: 0 !important; }
    .login-formpanel p { text-align: center !important; margin: 6px 0 14px !important; }
    .login-formpanel .li-msg { text-align: center; }

    /* 16px inputs stop iOS from auto-zooming (and mis-restoring) on focus */
    .li-in { font-size: 16px !important; }
}

/* Shorter viewports: keep shrinking the brain (then drop it) instead of scrolling. */
@media (max-width: 900px) and (max-height: 740px) {
    .login-brain-wrap { max-width: 185px !important; margin-bottom: 6px !important; }
    .login-mobile-logo { height: 32px; margin-bottom: 8px; }
    .login-formpanel p { margin: 6px 0 14px !important; }
}
@media (max-width: 900px) and (max-height: 640px) {
    .login-brain-wrap { display: none !important; }
    .login-mobile-logo { height: 30px; margin-bottom: 8px; }
}

@media (max-width: 480px) {
    .login-formpanel { padding: 20px 16px !important; }
    .login-brain-wrap { max-width: 210px !important; }
    .li-in { padding: 13px 15px; }
}