/* Shared styling for the auth pages (login + join): two-panel hero + card.
   Colours come from tokens.css (loaded first), so these pages now match the
   rest of the app and follow light/dark. The hero panel stays light in both
   themes because the artwork itself is light. */
*{box-sizing:border-box}
html,body{margin:0;height:100%;font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--ink)}
body{display:flex;height:100vh;height:100dvh;overflow:hidden;background:var(--bg)}

/* Hero (left) — rendered artwork, always fully visible (scales to fit). */
.hero{position:relative;flex:1;min-width:0;background:var(--hero-bg) url('/assets/login-hero.png') center center / contain no-repeat}

/* Night (dark theme): swap to the night artwork. Its sky/edges are near-black
   navy, so the letterbox bars and the form panel blend into it seamlessly.
   If the PNG is missing the panel is simply dark — never a light block. */
[data-theme="dark"] .hero{background:#0a1222 url('/assets/login-hero-night.png') center center / contain no-repeat}

/* Wordmark laid over the night sky (top-left) — the day artwork has the logo
   baked in, so this overlay only exists in dark mode. Same construction as
   the day logo: italic, with the map pin standing in for the O of SORT. */
.hero-mark{display:none}
[data-theme="dark"] .hero-mark{display:block;position:absolute;top:8%;left:7%;z-index:2;font-style:italic}
.hero-mark .w{font-weight:900;letter-spacing:.5px;font-size:clamp(26px,3.4vw,42px);line-height:1;white-space:nowrap}
.hero-mark .w .a{color:#4da3ff;text-shadow:0 0 12px rgba(77,163,255,.7),0 0 30px rgba(77,163,255,.4)}
.hero-mark .w .b{color:#ff3b52;text-shadow:0 0 12px rgba(255,59,82,.7),0 0 30px rgba(255,59,82,.4)}
.hero-mark .pin{display:inline-block;height:.92em;width:auto;margin:0 .01em;
  vertical-align:baseline;transform:translateY(.10em) skewX(-8deg);
  filter:drop-shadow(0 0 6px rgba(255,59,82,.8)) drop-shadow(0 0 16px rgba(255,59,82,.45))}
.hero-mark .tag{margin-top:7px;font-size:clamp(9px,1vw,12px);font-weight:800;letter-spacing:.18em;
  color:#dbe8ff;text-shadow:0 0 8px rgba(120,170,255,.5)}

/* Form panel (right) */
.auth{width:460px;max-width:100%;flex:none;display:flex;align-items:center;justify-content:center;
  padding:30px;background:var(--surface);box-shadow:-8px 0 30px rgba(20,30,60,.06);overflow-y:auto}
.card{width:100%;max-width:360px;background:transparent;border:0;box-shadow:none;padding:0}

.logo{text-align:center;font-size:30px;font-weight:900;letter-spacing:.5px;margin-bottom:18px}
.logo .a{color:var(--brand-navy)}
.logo .b{color:var(--brand-red)}
[data-theme="dark"] .logo .a{color:#4da3ff;text-shadow:0 0 10px rgba(77,163,255,.6),0 0 24px rgba(77,163,255,.32)}
[data-theme="dark"] .logo .b{color:#ff3b52;text-shadow:0 0 10px rgba(255,59,82,.6),0 0 24px rgba(255,59,82,.32)}

h1{font-size:24px;text-align:center;margin:0 0 4px;color:var(--ink)}
.sub{text-align:center;color:var(--muted);margin:0 0 22px;font-size:14px}
.sub strong{color:var(--ink)}
.err{background:var(--err-bg);color:var(--err);padding:10px 12px;border-radius:var(--radius-sm);font-size:13px;margin-bottom:14px;text-align:center}

.field{position:relative;margin-bottom:14px}
.field .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:15px}
.field input{width:100%;padding:13px 42px;border:1px solid var(--border-input);border-radius:var(--radius);font-size:16px;background:var(--input-bg);color:var(--ink)}
.field input:focus{outline:none;border-color:var(--focus);box-shadow:var(--ring)}
.eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;color:var(--muted);font-size:16px;padding:4px}

.row{display:flex;align-items:center;justify-content:space-between;margin:6px 2px 20px;font-size:13px;color:var(--muted)}
.row label{display:flex;align-items:center;gap:6px;cursor:pointer}

button.signin{width:100%;padding:14px;border:0;border-radius:var(--radius);background:var(--primary);color:var(--primary-ink);
  font-size:15px;font-weight:700;cursor:pointer;transition:filter .12s ease,transform .05s ease}
button.signin:hover{filter:brightness(1.06)}
button.signin:active{transform:translateY(1px)}
button.signin:focus-visible{outline:none;box-shadow:var(--ring)}

.foot{text-align:center;color:var(--muted);font-size:12px;margin-top:18px}
.foot a{color:var(--link);text-decoration:none}

@media (max-width:820px){
  .hero{display:none}
  .auth{width:100%;box-shadow:none;background:var(--bg)}
}