/* auth.css — shared styling for the standalone, pre-tenant pages (login,
 * password reset, 404, legal, consent). These pages deliberately do NOT load
 * tailwind.css (preflight would restyle them — see tests/test_assets.py), so
 * this is plain, self-contained CSS. Fonts come from the self-hosted Inter in
 * fonts.css; no third-party origins. Dark mode follows the OS preference only
 * (these pages have no in-app theme toggle). Mirrors the v2 token palette. */

:root{
  --accent:#2563EB; --accent-2:#3B82F6; --accent-strong:#1D4ED8; --on-accent:#fff;
  --ground:#EAEEF4; --surface:#ffffff; --surface-2:#F4F6FA;
  --ink:#0F1729; --ink-2:#54607A; --ink-3:#8B95A9;
  --hairline:rgba(15,23,42,.10); --hairline-2:rgba(15,23,42,.06);
  --bad:#B91C1C; --bad-bg:#FEF2F2; --bad-line:#FECACA;
  --good:#15803D; --good-bg:#EAF7EF;
  --shadow:0 1px 2px rgba(15,23,42,.05), 0 22px 48px -24px rgba(37,99,235,.28);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0A0F1C; --surface:#111A2B; --surface-2:#0E1626;
    --ink:#E9EEF7; --ink-2:#9FABC4; --ink-3:#6B7891;
    --hairline:rgba(255,255,255,.12); --hairline-2:rgba(255,255,255,.07);
    --bad:#F87171; --bad-bg:#2A1414; --bad-line:#5A2626;
    --good:#4ADE80; --good-bg:#0F2A1B;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 26px 52px -26px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
body{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; margin:0;
  min-height:100vh; background:var(--ground); color:var(--ink);
  -webkit-font-smoothing:antialiased; }
a{ color:var(--accent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:8px; }
.num{ font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }

/* ── Split layout (login): brand hero + form ── */
.auth-split{ min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }
.auth-hero{ position:relative; overflow:hidden; color:#fff; padding:56px 52px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:linear-gradient(150deg,#1D4ED8,#2563EB 45%,#3B82F6); }
.auth-hero::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px circle at 80% 8%,rgba(255,255,255,.18),transparent 55%),
             radial-gradient(520px circle at 8% 92%,rgba(255,255,255,.10),transparent 50%); }
.auth-hero>*{ position:relative; z-index:1; }
.auth-hero .big{ font-size:2.3rem; font-weight:800; line-height:1.1; letter-spacing:-.03em; text-wrap:balance; }
.auth-hero .lede{ color:#DBEAFE; font-size:15px; max-width:38ch; margin-top:14px; line-height:1.55; }
.auth-points{ list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:12px; }
.auth-points li{ display:flex; gap:11px; align-items:flex-start; color:#EAF1FF; font-size:14.5px; }
.auth-points svg{ flex:none; margin-top:2px; }
.auth-hero .foot{ color:#BFD3F5; font-size:12.5px; }

/* ── Form / card side ── */
.auth-panel{ display:grid; place-items:center; padding:40px 28px; }
.auth-box{ width:100%; max-width:380px; }
.brandmark{ display:flex; align-items:center; gap:10px; margin-bottom:26px; }
.brandmark .mark{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 3px 10px rgba(37,99,235,.4); }
.brandmark .mark span{ color:#fff; font-weight:800; font-size:14px; }
.brandmark b{ font-weight:700; font-size:16px; letter-spacing:-.02em; }
h1{ font-size:1.55rem; font-weight:800; letter-spacing:-.02em; margin:0 0 6px; text-wrap:balance; }
.sub{ font-size:14px; color:var(--ink-2); margin:0 0 24px; }

label{ display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:6px; }
input[type=email],input[type=password],input[type=text]{ width:100%; padding:11px 13px; margin-bottom:16px;
  border:1px solid var(--hairline); border-radius:11px; font-size:14px; font-family:inherit;
  background:var(--surface); color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s; }
input::placeholder{ color:var(--ink-3); }
input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent); }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-4px 0 4px; }
.check{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); }
.link{ font-size:13px; font-weight:600; color:var(--accent); text-decoration:none; }
.link:hover{ text-decoration:underline; }

.btn{ width:100%; padding:12px; margin-top:18px; border:0; border-radius:11px; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 4px 12px rgba(37,99,235,.32); transition:filter .15s, transform .05s; }
.btn:hover{ filter:brightness(1.05); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ filter:none; opacity:.6; cursor:not-allowed; }

.alert{ background:var(--bad-bg); border:1px solid var(--bad-line); color:var(--bad);
  border-radius:10px; padding:10px 14px; font-size:13px; margin-bottom:18px; }
.alert.good{ background:var(--good-bg); border-color:transparent; color:var(--good); }
.after{ text-align:center; margin-top:20px; font-size:13px; color:var(--ink-3); }

/* ── Single-column card (forgot/reset/consent/error) ── */
.auth-single{ min-height:100vh; display:grid; place-items:center; padding:24px 16px; }
.auth-card{ width:100%; max-width:400px; background:var(--surface); border:1px solid var(--hairline-2);
  border-radius:18px; padding:34px; box-shadow:var(--shadow); }

/* ── Legal / long-form (legal, privacy) ── */
.auth-doc{ max-width:760px; margin:0 auto; padding:48px 22px 80px; }
.auth-doc h1{ font-size:1.9rem; }
.auth-doc h2{ font-size:1.15rem; font-weight:700; margin:32px 0 8px; }
.auth-doc p, .auth-doc li{ color:var(--ink-2); line-height:1.7; font-size:15px; }
.auth-doc a{ color:var(--accent); }

/* ── 404 / status ── */
.auth-status{ text-align:center; }
.auth-status .code{ font-size:4.5rem; font-weight:800; letter-spacing:-.04em;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); -webkit-background-clip:text;
  background-clip:text; color:transparent; line-height:1; }

@media (max-width:820px){
  .auth-split{ grid-template-columns:1fr; }
  .auth-hero{ padding:36px 28px 30px; }
  .auth-hero .big{ font-size:1.85rem; }
  .auth-points{ margin-top:20px; }
}
@media (pointer:coarse){
  .btn{ min-height:48px; }
  input[type=email],input[type=password],input[type=text]{ min-height:46px; }
  .link,.check{ min-height:34px; display:inline-flex; align-items:center; }
}