/* ============================================================
   BlueHook — shared SIGN-IN experience (bh-auth)
   Full-page, branded, split-screen. One look across the console,
   the client portal and the district training portal. Reads the
   canonical tokens (bh-tokens.css), so it darkens with the app.
   Markup contract:
     <div class="bh-auth">
       <aside class="bh-auth-hero"> big white logo + tagline + points </aside>
       <main  class="bh-auth-panel"> <div class="bh-auth-card"> … </div></main>
     </div>
   ============================================================ */
.bh-auth.hidden,.bh-auth[hidden]{display:none!important}  /* portal/app toggle this on #login */
.bh-auth{min-height:100vh;min-height:100dvh;display:flex;background:var(--bh-bg-body);
  font-family:var(--bh-font,'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);color:var(--bh-text)}

/* ---------- branded hero (left) ---------- */
.bh-auth-hero{position:relative;flex:0 0 48%;max-width:1024px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:26px;padding:64px 60px;
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(59,116,241,.30) 0%, rgba(59,116,241,0) 55%),
    radial-gradient(80% 80% at 100% 100%, rgba(56,189,248,.20) 0%, rgba(56,189,248,0) 60%),
    linear-gradient(155deg,#0a1322 0%,#0f2340 52%,#173a6e 100%);
  color:#fff;isolation:isolate}
/* faint grid pattern overlay */
.bh-auth-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(90% 90% at 30% 20%,#000 0%,transparent 80%)}
.bh-auth-logo{width:min(320px,78%);height:auto;display:block;filter:drop-shadow(0 6px 20px rgba(0,0,0,.35))}
/* !important + container class: the console's bluehook.css forces `h1..h6{color:var(--bh-text)!important}` */
.bh-auth .bh-auth-hero h2{font-size:30px;line-height:1.18;font-weight:700;letter-spacing:-.02em;margin:6px 0 0;max-width:15ch;text-wrap:balance;color:#fff!important}
.bh-auth-hero h2 .accent{color:#7fb0ff}
.bh-auth-hero .lede{font-size:15.5px;line-height:1.6;color:#c3d2ea;margin:0;max-width:42ch}
.bh-auth-points{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.bh-auth-points li{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;color:#dbe6f7;line-height:1.45}
.bh-auth-points svg{flex:0 0 22px;width:22px;height:22px;margin-top:1px;color:#57b7ff}
.bh-auth-hero .hero-foot{position:absolute;left:60px;bottom:34px;font-size:12px;letter-spacing:.04em;color:#7f93b5}

/* ---------- form side (right) ---------- */
.bh-auth-panel{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:40px 28px}
.bh-auth-card{width:100%;max-width:410px}
.bh-auth-mark{display:none} /* small logo shown only on narrow screens (see media) */
.bh-auth-card h1{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:0 0 8px;color:var(--bh-text)}
.bh-auth-sub{font-size:14.5px;color:var(--bh-text-muted);margin:0 0 28px;line-height:1.55}
.bh-auth-field{margin-bottom:18px;text-align:left}
.bh-auth-label{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--bh-text-secondary);margin:0 0 7px}
.bh-auth-input{width:100%;box-sizing:border-box;padding:13px 15px;font-size:15px;font-family:inherit;
  color:var(--bh-text);background:var(--bh-bg-input);border:1px solid var(--bh-border-strong);border-radius:11px;
  transition:border-color .15s,box-shadow .15s}
.bh-auth-input::placeholder{color:var(--bh-text-faint)}
.bh-auth-input:focus{outline:none;border-color:var(--bh-primary);box-shadow:0 0 0 3px var(--bh-primary-glow)}
.bh-auth-btn{width:100%;margin-top:6px;padding:14px 18px;font-size:15px;font-weight:600;font-family:inherit;
  color:#fff;background:var(--bh-primary-grad,linear-gradient(180deg,#3B74F1,#2563EB));border:0;border-radius:11px;
  cursor:pointer;box-shadow:0 1px 2px rgba(14,26,43,.10),inset 0 1px 0 rgba(255,255,255,.18);
  transition:filter .15s,transform .06s}
.bh-auth-btn:hover{filter:brightness(1.05)}
.bh-auth-btn:active{transform:translateY(1px)}
.bh-auth-btn:disabled{opacity:.65;cursor:default}
.bh-auth-err{min-height:20px;margin:12px 0 0;font-size:13px;color:var(--bh-danger);text-align:center}
.bh-auth-foot{margin-top:26px;padding-top:18px;border-top:1px solid var(--bh-border-light);
  font-size:12px;color:var(--bh-text-faint);text-align:center}
.bh-auth-foot b{color:var(--bh-text-secondary);font-weight:600}

/* ---------- responsive: stack, hero becomes a branded banner ---------- */
@media (max-width:900px){
  .bh-auth{flex-direction:column}
  .bh-auth-hero{flex:none;max-width:none;padding:40px 28px 34px;gap:16px;align-items:center;text-align:center}
  .bh-auth-hero .hero-foot{display:none}
  .bh-auth-logo{width:min(240px,72%)}
  .bh-auth-hero h2{font-size:22px;margin:2px 0 0}
  .bh-auth-hero .lede,.bh-auth-points{display:none}
  .bh-auth-panel{padding:34px 22px 48px}
}
@media (max-width:900px) and (min-width:1px){ .bh-auth-hero::before{mask-image:none;opacity:.35} }

/* deep-navy hero stays dark in dark mode too; just make sure the ground matches */
body.bh-app.dark-mode .bh-auth,:root[data-theme="dark"] .bh-auth{background:var(--bh-bg-body)}

@media (prefers-reduced-motion:reduce){.bh-auth-input,.bh-auth-btn{transition:none}}