/* login.css - the logged-out sign-in screen. Consumes the design tokens in
   tokens.css so it tracks the app theme (data-bs-theme) and the Phase 5
   restyle without its own palette. Only the EU/US region accents are local. */

.login-screen {
    /* region accents, local to this screen */
    --eu: #2563eb;
    --eu-soft: rgba(37, 99, 235, .10);
    --us: #b45309;
    --us-soft: rgba(180, 83, 9, .10);
    --l-soft: rgba(var(--accent-rgb), .10);

    min-height: calc(100dvh - 2px);
    display: grid;
    grid-template-rows: auto 1fr;
    background:
        radial-gradient(1100px 560px at 12% -12%, var(--l-soft) 0%, transparent 55%),
        radial-gradient(900px 520px at 108% 112%, var(--eu-soft) 0%, transparent 52%),
        var(--bg);
    font-family: var(--q-font);
    color: var(--text);
}
[data-bs-theme="dark"] .login-screen {
    --eu: #6aa0ff;
    --eu-soft: rgba(106, 160, 255, .14);
    --us: #e7a35a;
    --us-soft: rgba(231, 163, 90, .14);
}

.login-topbar { display: flex; justify-content: flex-end; padding: 16px clamp(14px, 4vw, 30px); }
.login-theme {
    appearance: none; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-dim);
    width: 38px; height: 38px; border-radius: var(--r-sm); cursor: pointer; display: grid; place-items: center;
    transition: color .15s, border-color .15s, transform .12s; font-size: 1.05rem;
}
.login-theme:hover { color: var(--text); border-color: var(--accent); }
.login-theme:active { transform: scale(.94); }

.login-stage { display: grid; place-items: center; padding: 0 16px 30px; }

.login-card {
    width: 100%; max-width: 940px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow);
    overflow: hidden; display: grid; grid-template-columns: 1.02fr 1fr;
}

/* left: what this is */
.login-intro {
    background:
        radial-gradient(600px 300px at 0% 0%, rgba(var(--accent-rgb), .10) 0%, transparent 60%),
        var(--surface-2);
    border-right: 1px solid var(--border);
    padding: clamp(24px, 3.2vw, 38px); display: flex; flex-direction: column; gap: 17px;
}
.login-intro .login-logo { height: 42px; display: block; }
.login-intro .login-logo img { height: 42px; width: auto; max-width: 74%; }
.login-intro h1 { margin: 0; font-size: var(--step-2); line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; font-weight: 600; }
.login-intro .login-sub { margin: 0; color: var(--text-dim); font-size: var(--step-0); line-height: 1.5; }
.login-intro .login-sub b { color: var(--text); font-weight: 600; }

.login-benefits { list-style: none; margin: 3px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.login-benefits li { display: flex; gap: 11px; align-items: flex-start; font-size: var(--step--1); line-height: 1.4; color: var(--text); }
.login-benefits .ic { width: 26px; height: 26px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--l-soft); color: var(--accent); }
.login-benefits .ic i { font-size: .9rem; }

.login-eu {
    margin-top: auto; display: flex; gap: 9px; align-items: flex-start;
    background: var(--eu-soft); border: 1px solid color-mix(in srgb, var(--eu) 30%, transparent);
    border-radius: var(--r-sm); padding: 10px 12px; font-size: var(--step--1); line-height: 1.4; color: var(--text);
}
.login-eu i { color: var(--eu); margin-top: 1px; }
.login-eu b { font-weight: 600; }

/* right: sign in */
.login-auth { padding: clamp(24px, 3.2vw, 38px); display: flex; flex-direction: column; gap: 17px; }

.login-step { display: flex; flex-direction: column; gap: 10px; }
.login-step-label { display: flex; align-items: center; gap: 9px; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); }
.login-step-label .n { width: 19px; height: 19px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: .68rem; background: var(--l-soft); color: var(--accent); }

.login-segment { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 5px; }
.login-segment button {
    appearance: none; border: 1px solid transparent; background: transparent; cursor: pointer; font-family: inherit;
    color: var(--text-dim); font-size: var(--step-0); font-weight: 600; padding: 9px 8px; border-radius: 8px;
    display: flex; flex-direction: column; align-items: center; gap: 2px; transition: background .15s, color .15s, border-color .15s;
}
.login-segment button .sub { font-size: .71rem; font-weight: 500; color: var(--text-faint); }
.login-segment button:hover { color: var(--text); }
.login-segment button[aria-pressed="true"][data-region="eu"] { background: var(--eu-soft); color: var(--eu); border-color: color-mix(in srgb, var(--eu) 38%, transparent); }
.login-segment button[aria-pressed="true"][data-region="eu"] .sub { color: color-mix(in srgb, var(--eu) 80%, var(--text-dim)); }
.login-segment button[aria-pressed="true"][data-region="us"] { background: var(--us-soft); color: var(--us); border-color: color-mix(in srgb, var(--us) 38%, transparent); }
.login-segment button[aria-pressed="true"][data-region="us"] .sub { color: color-mix(in srgb, var(--us) 80%, var(--text-dim)); }
.login-region-note { margin: 0; font-size: .81rem; line-height: 1.45; color: var(--text-dim); min-height: 2.4em; }
.login-region-note b { color: var(--text); font-weight: 600; }
/* Reassurance: the region gates where the account (and each interview) is stored,
   but one account can work in both regions. */
.login-region-switch { margin: 6px 0 0; font-size: .76rem; line-height: 1.4; color: var(--text-faint); }

.login-divider { height: 1px; background: var(--border); border: 0; margin: 0; }

/* FirebaseUI widget: strip its card chrome so it sits inside our step */
#firebaseui-widget .firebaseui-container { max-width: 100%; background: transparent; box-shadow: none; color: var(--text); }
#firebaseui-widget .firebaseui-card-content, #firebaseui-widget .firebaseui-card-footer { padding: 0; }
#firebaseui-widget .mdl-card { min-height: 0; }
#firebaseui-widget .firebaseui-idp-button, #firebaseui-widget .firebaseui-tenant-button { max-width: 100%; box-shadow: var(--shadow-sm); border-radius: 10px; }
#firebaseui-widget .firebaseui-idp-list > .firebaseui-list-item { margin-bottom: 0; }

.login-credits {
    display: flex; align-items: flex-start; gap: 10px; background: var(--l-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: var(--r-sm);
    padding: 11px 13px; font-size: .85rem; line-height: 1.45; color: var(--text);
}
.login-credits i { color: var(--accent); margin-top: 1px; }
.login-credits b { font-weight: 700; }

.login-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: auto; padding-top: 4px; }
.login-foot button.linkish, .login-foot a { color: var(--text-dim); text-decoration: none; font-size: .82rem; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.login-foot button.linkish:hover, .login-foot a:hover { color: var(--accent); text-decoration: underline; }
.login-foot .dot { color: var(--text-faint); }

.login-legal { text-align: center; color: var(--text-faint); font-size: .74rem; line-height: 1.5; margin: 16px auto 0; max-width: 420px; }
.login-legal a { color: var(--text-dim); }

/* popover */
.login-scrim { position: fixed; inset: 0; background: rgba(10, 20, 15, .55); backdrop-filter: blur(2px); display: none; place-items: center; padding: 20px; z-index: 1080; }
.login-scrim.open { display: grid; }
.login-pop { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px 24px; color: var(--text); }
.login-pop h3 { margin: 0 0 8px; font-size: var(--step-1); letter-spacing: -.01em; }
.login-pop p { margin: 0 0 10px; color: var(--text-dim); font-size: .9rem; line-height: 1.55; }
.login-pop p b { color: var(--text); }
.login-pop ul { margin: 0 0 12px; padding-left: 18px; color: var(--text-dim); font-size: .9rem; line-height: 1.5; }
.login-pop .pop-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.login-pop .pop-actions a { color: var(--accent); font-weight: 600; font-size: .88rem; text-decoration: none; }
.login-pop .pop-actions a:hover { text-decoration: underline; }
.login-pop .close { appearance: none; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-dim); border-radius: 8px; padding: 7px 14px; font-family: inherit; font-size: .88rem; cursor: pointer; }
.login-pop .close:hover { color: var(--text); border-color: var(--accent); }

/* Hide the in-app navbar until the user is signed in (the class is toggled on
   <html> from localStorage before paint and kept in step by the auth handler). */
html:not(.is-logged-in) .main-navbar { display: none !important; }

/* Same gate for the floating Interview Advisor: it must not appear over the
   sign-in screen. */
html:not(.is-logged-in) .advisor-container { display: none !important; }

/* Conversely, hide the sign-in screen for a returning (logged-in) visitor before
   JS runs, so its full-height card never flashes over the app. The auth handler
   also sets an inline display, which agrees with this. */
html.is-logged-in #firebaseui-auth-container { display: none; }

@media (max-width: 760px) {
    .login-card { grid-template-columns: 1fr; max-width: 460px; }
    .login-intro { border-right: 0; border-bottom: 1px solid var(--border); }
    .login-eu { margin-top: 4px; }
}