/* login.php — page-specific styles. Tokens come from landing.css (loaded
   first by head.php); everything below is this page's own bespoke layout
   (dark gradient body, centered card, minimal nav/footer) which doesn't
   share markup with the marketing pages, so it isn't trying to reuse
   landing.css's .container/nav/footer rules — it overrides them on purpose.

   This is the canonical auth-shell pattern: forgot-password.php has always
   shared this file, and register.css was rewritten to mirror these same
   body/nav/footer rules (register.php used to have its own plain
   light-gray shell with no nav/footer at all). accept-invite.php still
   hasn't been brought onto this pattern. */

body {
    background: radial-gradient(ellipse at top right, #16233b 0%, var(--ink) 55%);
    color: #cbd5e1;
    line-height: 1.6;
    min-height: 100vh; display: flex; flex-direction: column;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
nav { border-bottom: 1px solid rgba(255,255,255,0.16); }
/* Centered header: logo on its own row, "Back to site" beneath it — reads
   as a deliberate, minimal auth-page mark instead of a leftover marketing
   nav bar with an empty right side. */
nav .container { padding: 22px 24px; }
.nav-content { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* .logo (landing.css) hardcodes var(--navy) text/stroke for the marketing
   nav's white background. This page's nav sits on the dark gradient body
   above instead, so without this override the wordmark and shield outline
   (both currentColor) were nearly invisible against it — only the gold key
   mark showed, reading as a broken logo. Mirrors .tn-logo's white-on-dark
   treatment used by the site's real dark nav (public-nav.php). */
.logo { color: white; }
.nav-links a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 13px; }
.nav-links a:hover { color: white; }
.login-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 20px; }
.login-card { width: 100%; max-width: 400px; background: white; border: 1px solid var(--line); border-radius: 16px; padding: 36px 34px; box-shadow: 0 25px 60px -20px rgba(0,0,0,0.45); position: relative; overflow: hidden; }
.login-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--green-bright), var(--green)); }
.login-card-title { font-family: 'Playfair Display', Georgia, serif; font-size: 24px; color: var(--navy); margin: 0 0 6px; text-align: center; }
.login-card-sub { color: #64748b; font-size: 14px; margin: 0 0 26px; text-align: center; }
.error-box { display: flex; align-items: flex-start; gap: 9px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 20px; }
.error-box svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.login-field { margin-bottom: 18px; }
.login-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.login-field input { width: 100%; box-sizing: border-box; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 14.5px; color: #1e293b; font-family: inherit; }
.login-field input::placeholder { color: #94a3b8; }
.login-field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(55,86,124,0.12); }
/* Chrome/Edge paint autofilled fields with their own opaque yellow fill
   that ignores background-color entirely — without this, a returning
   user's browser-remembered email/password render as two mismatched
   yellow blocks the instant the page loads. The inset box-shadow trick is
   the only way to override it; the absurd transition delay stops Chrome's
   own fill-color flash from reappearing on blur. */
.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: #1e293b;
    -webkit-box-shadow: 0 0 0 1000px var(--paper) inset;
    box-shadow: 0 0 0 1000px var(--paper) inset;
    caret-color: #1e293b;
    transition: background-color 9999s ease-in-out 0s;
}
.password-wrap { position: relative; }
.password-wrap input { padding-right: 42px; }
.show-pass-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #94a3b8; cursor: pointer; padding: 4px; display: flex; align-items: center; }
.show-pass-btn:hover { color: var(--navy); }
.show-pass-btn svg { width: 18px; height: 18px; }
.forgot-row { text-align: right; margin: -8px 0 18px; }
.forgot-row a { font-size: 13px; color: var(--blue); text-decoration: none; }
.forgot-row a:hover { text-decoration: underline; }
.login-submit { width: 100%; padding: 13px; border: none; border-radius: 10px; background: var(--green); color: white; font-weight: 700; font-size: 15px; cursor: pointer; transition: background 0.15s ease; }
.login-submit:hover { background: #7a5a26; }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; font-size: 11.5px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.register-row { text-align: center; font-size: 14px; color: #64748b; }
.register-row a { color: var(--navy); font-weight: 700; text-decoration: none; }
.register-row a:hover { text-decoration: underline; }
footer { background: transparent; padding: 24px 0; border-top: 1px solid rgba(255,255,255,0.1); }

@media (max-width: 480px) { .login-card { padding: 28px 22px; } }