/* The sign-in gate. Self-contained on purpose: it renders before any of the
   app's own stylesheet has had to work, so it borrows nothing from it. */

#authGate{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:#F7FAFC;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark){ #authGate{ background:#0B1220; } }

#authGate .ag-card{
  width:min(92vw, 380px); padding:40px 32px 32px;
  background:#fff; border-radius:14px; text-align:center;
  box-shadow:0 1px 2px rgba(16,24,40,.06), 0 12px 32px rgba(16,24,40,.10);
}
@media (prefers-color-scheme: dark){
  #authGate .ag-card{ background:#131C2E; box-shadow:0 12px 32px rgba(0,0,0,.45); }
}

/* The real logo, not a typed stand-in. Light and dark are different files —
   see the wordmark note in index.html. */
#authGate .ag-mark{
  height:96px; margin:0 auto;
  background:url("../assets/kooltrax-full.png") center/contain no-repeat;
}
@media (prefers-color-scheme: dark){
  #authGate .ag-mark{ background-image:url("../assets/kooltrax-full-dark.png"); }
}

#authGate .ag-sub{
  margin:6px 0 28px; font-size:13px; color:#5A6B85;
}
@media (prefers-color-scheme: dark){ #authGate .ag-sub{ color:#8FA3BF; } }

#authGate .ag-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:12px 16px;
  font:inherit; font-size:15px; font-weight:600; color:#1B2A41;
  background:#fff; border:1px solid #C9D4E2; border-radius:8px; cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
#authGate .ag-btn:hover{ border-color:#0070E0; box-shadow:0 0 0 3px rgba(0,112,224,.12); }
#authGate .ag-btn:focus-visible{ outline:2px solid #0070E0; outline-offset:2px; }
@media (prefers-color-scheme: dark){
  #authGate .ag-btn{ color:#E6EEF9; background:#1B263B; border-color:#2C3A52; }
}

#authGate .ag-note{ margin:16px 0 0; font-size:12.5px; color:#7A8AA3; }

#authGate .ag-err{
  margin:0 0 18px; padding:11px 13px; text-align:left;
  font-size:13px; line-height:1.45; color:#8A2020;
  background:#FDF2F2; border:1px solid #F4CACA; border-radius:8px;
}
@media (prefers-color-scheme: dark){
  #authGate .ag-err{ color:#FFC9C9; background:#2A1315; border-color:#5A2226; }
}