/* The sign-in screen in the page-shell look (owner, 2026-10-15): a blurred
   landscape moving in the wind behind it (loginScene.js), the storybook fox,
   a cream paper card with Lora headings and Inter text, forest-green primary
   buttons, outlined secondary ones, and "Try a sample problem" as a small
   text link. Night uses the slate tokens.

   The colours come from pages.css's --c-* tokens (:root and
   html[data-theme="dark"]). html.has-pages may be missing while signed out,
   so every rule here is scoped to #loginOverlay and works either way. This
   file loads after style.css, studio.css and signature.css; the !important
   marks only answer theirs. */

#loginOverlay {
    --lg-page: var(--c-ivory, #efebe1);
    --lg-card: var(--c-card, #faf8f2);
    --lg-ink: var(--c-ink, #22272a);
    --lg-soft: var(--c-soft, #6b706a);
    --lg-line: var(--c-line, #e0dbcf);
    --lg-line-strong: var(--c-line-strong, #d3cec1);
    --lg-accent: var(--c-accent, #2f5b47);
    --lg-accent-hover: var(--c-accent-hover, #264b3a);
    --lg-accent-ink: var(--c-accent-ink, #ffffff);
    --lg-accent-soft: var(--c-accent-soft, #e6ece4);
    --lg-field: var(--c-field, #f2f0e8);
    --lg-focus: var(--c-focus, #1f6fd1);
    --lg-serif: var(--serif, 'Lora', Georgia, 'Times New Roman', serif);
    --lg-sans: var(--sans, 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif);
    --lg-shadow: 0 22px 56px rgba(28, 36, 30, 0.20), 0 2px 8px rgba(28, 36, 30, 0.10);
    --lg-veil: rgba(250, 248, 242, 0.16);

    /* A column that always scrolls to the card's last line: margin:auto on
       the card centres it when it fits and lets it start at the top when
       it does not (a centred grid item taller than the screen could be cut
       off). The landscape sits in a fixed layer of its own, so it never
       scrolls away. No backdrop-filter here: it would turn that fixed layer
       into one that scrolls with the card. */
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 28px 16px;
    background: var(--lg-page);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--lg-ink);
    font-family: var(--lg-sans);
}

html[data-theme="dark"] #loginOverlay {
    --lg-shadow: 0 22px 56px rgba(0, 0, 0, 0.50), 0 2px 8px rgba(0, 0, 0, 0.30);
    --lg-veil: rgba(12, 16, 22, 0.28);
}

/* app-shell.css keeps the card out of the notch in the iPhone app. */
html.native-app #loginOverlay {
    padding-top: calc(16px + var(--safe-top, 0px));
    padding-bottom: calc(16px + var(--safe-bottom, 0px));
}

#loginOverlay > .login-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

#loginOverlay > .login-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 46%, var(--lg-veil), transparent 72%);
}

#loginOverlay > .login-backdrop.is-still * {
    animation: none !important;
    transition: none !important;
}

#loginOverlay > .login-backdrop.is-still .cb-bd-leaf {
    display: none;
}

/* ---------------------------------------------------------------- card */

#loginOverlay > .login-card {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    margin: auto 0;
    width: min(400px, 100%);
    box-sizing: border-box;
    padding: 22px 28px 20px;
    background: var(--lg-card);
    color: var(--lg-ink);
    border: 1px solid var(--lg-line);
    border-radius: 22px;
    box-shadow: var(--lg-shadow);
    font-family: var(--lg-sans);
}

#loginOverlay .login-mark.mascot-mark {
    width: 76px;
    height: 106px;
    margin: 0 auto 2px;
}

#loginOverlay .login-fox {
    display: block;
    width: 100%;
    height: 100%;
}

#loginOverlay .login-fox img {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s ease;
}

#loginOverlay .login-fox.is-drawn img {
    opacity: 1;
}

#loginOverlay .login-card h2 {
    margin: 2px 0 6px;
    font-family: var(--lg-serif);
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--lg-ink);
}

#loginOverlay .login-card p {
    color: var(--lg-soft);
    font-size: 0.9rem;
    line-height: 1.45;
}

#loginOverlay .login-value-props {
    margin: 0 0 10px;
    gap: 5px;
    color: var(--lg-ink);
    font-size: 0.86rem;
}

#loginOverlay .login-value-props span::before {
    background: var(--lg-accent);
}

/* -------------------------------------------------------------- fields */

#loginOverlay .login-card input:not([type="checkbox"]):not([type="radio"]) {
    background: var(--lg-field);
    border: 1px solid var(--lg-line-strong);
    border-radius: 12px;
    color: var(--lg-ink);
    font-family: var(--lg-sans);
}

#loginOverlay .login-card input::placeholder {
    color: var(--lg-soft);
    opacity: 1;
}

#loginOverlay .login-card input:focus-visible,
#loginOverlay .login-card input:focus {
    outline: 2px solid var(--lg-focus);
    outline-offset: 1px;
    border-color: transparent;
}

#loginOverlay .login-card input[aria-invalid="true"] {
    border-color: var(--c-late, #b0533b);
}

#loginOverlay .login-card a,
#loginOverlay #loginTermsRow a,
#loginOverlay .signup-consent-fields a {
    color: var(--lg-accent);
    font-weight: 600;
}

html[data-theme="dark"] #loginOverlay .login-card a,
html[data-theme="dark"] #loginOverlay #loginTermsRow a,
html[data-theme="dark"] #loginOverlay .signup-consent-fields a {
    color: var(--c-bar, #9cbda7);
}

#loginOverlay .login-data-consent {
    background: var(--lg-accent-soft);
}

#loginOverlay .login-card input[type="checkbox"] {
    accent-color: var(--lg-accent);
}

/* ------------------------------------------------------------- buttons */

/* Everything on the card starts as an outlined secondary button... */
#loginOverlay .login-card button {
    font-family: var(--lg-sans);
    background: transparent;
    background-image: none;
    color: var(--lg-ink);
    border: 1px solid var(--lg-line-strong);
    border-radius: 999px;
    box-shadow: none;
    font-weight: 600;
    letter-spacing: 0;
}

#loginOverlay .login-card button:hover:not(:active):not(:disabled) {
    transform: none;
    border-color: var(--lg-accent);
    box-shadow: none;
    background: color-mix(in srgb, var(--lg-accent) 6%, transparent);
}

#loginOverlay .login-card button:focus-visible {
    outline: 2px solid var(--lg-focus);
    outline-offset: 2px;
}

/* ...and the one next step is filled forest green. */
#loginOverlay .login-card :is(#createAccountBtn, #loginSubmitBtn, #testingStartBtn, #googleFinishBtn,
    #forgotPasswordSubmitBtn, #resetPasswordSubmitBtn) {
    background: var(--lg-accent) !important;
    background-image: none !important;
    border: 1px solid var(--lg-accent) !important;
    color: var(--lg-accent-ink) !important;
    box-shadow: 0 1px 2px rgba(20, 30, 24, 0.16) !important;
    padding: 12px 16px !important;
    font-size: 0.95rem;
    font-weight: 600;
}

#loginOverlay .login-card :is(#createAccountBtn, #loginSubmitBtn, #testingStartBtn, #googleFinishBtn,
    #forgotPasswordSubmitBtn, #resetPasswordSubmitBtn):hover:not(:disabled) {
    background: var(--lg-accent-hover) !important;
    border-color: var(--lg-accent-hover) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--lg-accent) 30%, transparent) !important;
}

#loginOverlay .login-card #loginRevealBtn {
    margin-top: 8px;
}

/* Text links (New here?, Forgot password?, Back to sign in). */
#loginOverlay .login-card .login-mode-toggle {
    width: auto;
    margin: 2px auto 0;
    display: block;
    color: var(--lg-soft) !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    border-radius: 6px;
}

#loginOverlay .login-card .login-mode-toggle:hover:not(:disabled) {
    color: var(--lg-ink) !important;
    background: none !important;
}

/* "Try a sample problem": small and quiet, never a big button. */
#loginOverlay .landing-sample {
    margin: 0 0 10px;
    text-align: center;
}

#loginOverlay #landingSampleToggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    min-height: 32px;
    margin: 0 auto;
    padding: 4px 10px;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--lg-accent);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

#loginOverlay #landingSampleToggle::after {
    content: "\2192";
    text-decoration: none;
}

#loginOverlay #landingSampleToggle[aria-expanded="true"]::after {
    content: "";
}

html[data-theme="dark"] #loginOverlay #landingSampleToggle {
    color: var(--c-bar, #9cbda7);
}

#loginOverlay #landingSampleToggle:hover:not(:active) {
    background: none;
    color: var(--lg-accent-hover);
}

#loginOverlay .landing-sample #landingSamplePanel {
    background: var(--lg-field);
    border: 1px solid var(--lg-line);
    border-radius: 14px;
}

#loginOverlay .landing-sample pre,
#loginOverlay .landing-sample .sample-label,
#loginOverlay .landing-sample #landingSampleFeedback {
    color: var(--lg-ink);
}

/* ---------------------------------------------------- Sign in with Google */

#loginOverlay .google-signin {
    width: 100%;
    margin: 0 0 2px;
}

#loginOverlay .google-signin-slot {
    display: flex;
    justify-content: center;
    min-height: 44px;
    color-scheme: normal;
}

/* One button per form: "Sign in with Google" or "Sign up with Google". */
#loginOverlay:has(#loginSignupFields:not(.hidden)) #googleSignInSlot,
#loginOverlay:has(#loginSignupFields.hidden) #googleSignUpSlot {
    display: none;
}

#loginOverlay .login-card .google-signin-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 12px;
    color: var(--lg-soft);
    font-size: 0.76rem;
}

#loginOverlay .google-signin-divider::before,
#loginOverlay .google-signin-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--lg-line);
}

/* Finishing a Google sign-up: only the permissions and the one button. */
#loginOverlay .google-finish {
    width: 100%;
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

#loginOverlay .google-finish[hidden] {
    display: none;
}

#loginOverlay.is-google-finish :is(#googleSignInBlock, #loginSignupFields, #loginOnlyFields, #loginPasswordInput,
    #signupConfirmPasswordInput, #loginSubmitBtn, #loginModeToggleBtn, #forgotPasswordBtn, #resendVerificationBtn) {
    display: none !important;
}

/* ------------------------------------------------------- short windows */

/* A laptop window 500-700 px tall: tighter, and the column scrolls to the
   bottom (see the overlay above). */
@media (max-height: 720px) {
    #loginOverlay {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    #loginOverlay > .login-card {
        padding: 16px 24px 14px;
    }

    #loginOverlay .login-mark.mascot-mark {
        width: 54px;
        height: 76px;
    }

    #loginOverlay .login-card h2 {
        font-size: 1.35rem;
    }

    #loginOverlay .login-card p {
        margin-bottom: 8px;
    }

    #loginOverlay .login-value-props {
        gap: 2px;
        font-size: 0.82rem;
    }
}

@media (max-width: 480px) {
    #loginOverlay > .login-card {
        padding: 18px 18px 16px;
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #loginOverlay .login-fox img {
        transition: none;
    }
}