/* ============================================================
   site-auth.css — shared EduFinder login modal styling

   Single source of truth for the auth modal's custom classes,
   loaded by every static page that signs a user in (index +
   the tool pages). The card/header/step LAYOUT comes from
   Tailwind utility classes carried in the injected markup (see
   site-auth.js); this file owns the bespoke .auth-* controls.

   Colors are hardcoded hex on purpose (mirroring site-nav.css):
   the tool pages define no :root design tokens, so a var(--…)
   with no fallback would compute to `transparent` (e.g. an
   unstyled Verify button). Values equal index.html's resolved
   tokens — brand blue #3b82f6 / hover #2563eb, navy #1f2937 /
   #111827, border rgba(31,41,55,.12), warm rgba(31,41,55,.04),
   text #1f2937 / rgba(31,41,55,.78).

   This file is NOT part of the Tailwind @source glob, so editing
   it never requires rebuilding public/site-tailwind.css.
   ============================================================ */

body.auth-gate-active {
    overflow: hidden;
}
body.auth-gate-active > :not(#auth-modal):not(#toast-container) {
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
    transition: filter .2s ease;
}
#auth-modal {
    background: rgba(17, 24, 39, .35);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.auth-input {
    width: 100%;
    border-radius: .6rem;
    border: 1px solid rgba(31, 41, 55, .12);
    padding: .85rem 1rem;
    font-size: 1rem;
    line-height: 1.4;
    color: #1f2937;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}
.auth-input.code-input {
    letter-spacing: .5em;
    text-align: center;
    font-size: 1.15rem;
}

.auth-primary-btn {
    width: 100%;
    border-radius: .7rem;
    background: #3b82f6;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: .9rem 1rem;
    box-shadow: 0 4px 14px rgba(59,130,246,.25);
    transition: background .15s ease, transform .05s ease;
}
.auth-primary-btn:hover { background: #2563eb; }
.auth-primary-btn:active { transform: translateY(1px); }
.auth-primary-btn:disabled { opacity: .6; cursor: not-allowed; }
.auth-primary-btn.is-verify { background: #1f2937; box-shadow: 0 4px 14px rgba(31,41,55,.22); }
.auth-primary-btn.is-verify:hover { background: #111827; }

.auth-secondary-btn {
    flex: 1;
    border-radius: .7rem;
    border: 1px solid rgba(31, 41, 55, .12);
    background: #fff;
    color: rgba(31, 41, 55, .78);
    font-weight: 600;
    padding: .85rem 1rem;
    font-size: .95rem;
    transition: background .15s ease;
}
.auth-secondary-btn:hover { background: rgba(31, 41, 55, .04); }

.auth-helper-link {
    display: block;
    width: 100%;
    text-align: center;
    font-size: .9rem;
    color: #3b82f6;
    font-weight: 600;
    padding: .6rem 0 .1rem;
}
.auth-helper-link:hover { text-decoration: underline; }

.auth-google-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    border-radius: .7rem;
    border: 1px solid #d1d5db;
    background: #fff;
    color: rgba(31, 41, 55, .78);
    font-weight: 600;
    font-size: 1rem;
    padding: .85rem 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    transition: background .15s ease, transform .05s ease;
}
.auth-google-btn:hover { background: rgba(31, 41, 55, .04); }
.auth-google-btn:active { transform: translateY(1px); }
.auth-google-btn:disabled { opacity: .6; cursor: not-allowed; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .15rem 0;
}
.auth-divider > span.auth-divider-rule {
    height: 1px;
    flex: 1;
    background: #e5e7eb;
}
.auth-divider-text {
    font-size: .75rem;
    font-weight: 500;
    color: #9ca3af;
}

/* Local-preview note (opt-in via SiteAuthConfig.localNote; shown only
   on localhost). Hidden everywhere else. */
.auth-local-note {
    display: none;
    border-radius: .7rem;
    border: 1px solid rgba(59, 130, 246, .22);
    background: #eff6ff;
    color: #1d4ed8;
    font-size: .82rem;
    line-height: 1.5;
    padding: .8rem .9rem;
}
.auth-local-note.is-visible { display: block; }