/* auth.css — shared styling for the auth pages (login, signup, forgot, verify, reset).
 *
 * Same design language as the marketing homepage (ui/index.html): self-hosted Inter +
 * Newsreader, the teal/brass/navy palette, the woven-thread wordmark. Deliberately NO
 * external CDN — these pages make zero third-party requests, which keeps faith with the
 * "private by design" pitch and lets a strict CSP lock the origin down.
 *
 * CJK: these faces carry only Latin glyphs; Chinese/Japanese text falls back to the OS
 * serif/sans via the generic families at the end of each stack (the app + auth pages have
 * always used system CJK fonts — only the homepage self-hosts subset CJK webfonts).
 *
 * Contract with the pages' inline JS: the .d-none utility and the .spinner element are
 * toggled by classList in the page scripts — keep both. Element IDs and data-i18n hooks
 * live in the HTML; this file only styles. */

@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/newsreader.woff2?v=1) format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 600;font-display:swap;src:url(fonts/newsreader-italic.woff2?v=1) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter.woff2?v=1) format('woff2')}

:root{
  --ink:#12283C; --navy:#1F3A5F; --teal:#2F6F8F; --teal-bright:#3E8FB4;
  --brass:#C6923E; --brass-soft:#D8AE6A;
  --paper:#F5F8FB; --mist:#E7EEF4; --line:#D8E2EC;
  --text:#25333F; --muted:#5D6B79; --white:#ffffff;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:16px;
  --shadow:0 18px 40px -24px rgba(18,40,60,.45);
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;
  font-family:var(--sans);color:var(--text);background:var(--paper);line-height:1.6;
  -webkit-font-smoothing:antialiased;font-size:16px}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--teal-bright);text-decoration:underline}

/* ── Top bar: the woven wordmark, linking home ──────────────────────────────── */
.auth-header{background:var(--ink);border-bottom:1px solid rgba(255,255,255,.08)}
.auth-header .inner{max-width:1140px;margin:0 auto;padding:0 24px;height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;
  font-family:var(--serif);font-size:1.24rem;font-weight:600;letter-spacing:-.01em}
.brand:hover{text-decoration:none;color:#fff}
.brand svg{flex:none}
.auth-header .home-link{color:rgba(255,255,255,.72);font-size:.9rem;font-weight:500;
  display:inline-flex;align-items:center;gap:.4em}
.auth-header .home-link:hover{color:#fff;text-decoration:none}

/* ── Centered card ──────────────────────────────────────────────────────────── */
main.auth-main{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.auth-card{width:100%;max-width:400px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:2.2rem 2rem}
.auth-head{text-align:center;margin-bottom:1.6rem}
.auth-mark{width:40px;height:40px;margin:0 auto .8rem;display:flex;align-items:center;justify-content:center;
  background:var(--mist);border-radius:12px}
.auth-card h1{font-family:var(--serif);font-weight:500;color:var(--navy);
  font-size:1.6rem;line-height:1.12;letter-spacing:-.015em;margin:0}
.auth-sub{color:var(--muted);font-size:.95rem;margin:.45rem 0 0}

/* ── Form controls ──────────────────────────────────────────────────────────── */
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.86rem;font-weight:600;color:var(--text);margin-bottom:.4rem}
.field input{width:100%;font:inherit;font-size:.98rem;color:var(--text);background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding:.72rem .85rem;
  transition:border-color .15s,box-shadow .15s}
.field input::placeholder{color:#9aa7b4}
.field input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(47,111,143,.14);background:#fff}
.hint{font-size:.8rem;color:var(--muted);margin-top:.4rem;line-height:1.45}
.hint code{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:.92em;
  background:var(--mist);border-radius:4px;padding:.05em .35em;color:var(--navy)}

/* ── Buttons (match the homepage) ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);
  font-weight:600;font-size:.98rem;border-radius:999px;padding:.75em 1.35em;border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:transform .15s ease,background .2s,box-shadow .2s}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:default;transform:none}
.btn-primary{background:var(--brass);color:#20140a;box-shadow:0 8px 22px -10px rgba(198,146,62,.7)}
.btn-primary:hover:not(:disabled){background:var(--brass-soft);text-decoration:none}
.btn-block{width:100%}

/* ── Links / footer rows under the form ─────────────────────────────────────── */
.auth-links{text-align:center;font-size:.9rem;color:var(--muted);margin-top:1.1rem}
.auth-links a{font-weight:500}
.auth-links .sep{margin:0 .5em;color:var(--line)}
.auth-fineprint{text-align:center;font-size:.8rem;color:var(--muted);line-height:1.5;margin:1rem 0 0}
.auth-fineprint a{font-weight:500}
.lang-row{text-align:center;margin-top:1.3rem}
#lang-switcher{font-family:var(--sans);font-size:.85rem;font-weight:500;color:var(--muted);
  background:var(--white);border:1px solid var(--line);border-radius:999px;padding:.35em .8em;cursor:pointer}
#lang-switcher:focus{outline:none;border-color:var(--teal)}

/* ── Alerts (toggled by JS via .d-none; text set by JS) ─────────────────────── */
.alert{border-radius:10px;padding:.65rem .85rem;font-size:.9rem;margin-bottom:1rem;border:1px solid transparent}
.alert-danger{background:#fbeaea;border-color:#f0c9c9;color:#a3352f}
.alert-success{background:#e9f6ee;border-color:#c2e6d0;color:#1f7a4d}

/* ── Spinner (element kept in markup; JS toggles .d-none) ───────────────────── */
.spinner{display:inline-block;width:1em;height:1em;vertical-align:-.15em;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;animation:auth-spin .6s linear infinite}
.spinner-lg{width:1.9em;height:1.9em;border-width:3px;color:var(--teal);margin:.4rem auto}
@keyframes auth-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:1.4s}}

/* Turnstile widget container (present on login/signup/forgot/verify). */
.captcha{display:flex;justify-content:center;margin-bottom:1rem}

.text-center{text-align:center}
.d-none{display:none!important}

@media(max-width:460px){.auth-card{padding:1.7rem 1.3rem}.auth-header .inner{padding:0 16px}}