/* Login page (login.html). Its own small file because it's served to
   people who aren't logged in yet — netlify/edge-functions/gate.js keeps
   css/style.css (and the rest of the app) behind the login. The colour
   tokens mirror the top of css/style.css. */
:root{
  --bg-app:#1e1f22;
  --bg-panel:#272a2f;
  --bg-panel-raised:#2f3238;
  --accent:#3da7e0;
  --text:#e7e9ec;
  --text-dim:#9aa3ad;
  --text-faint:#6b7480;
  --danger:#e0635a;
  --ok:#5ec98f;
  --ui: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;min-height:100%;background:var(--bg-app);color:var(--text);font-family:var(--ui);}

/* ---------- Activation Gate ---------- */
#activation-gate{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
#activation-card{
  width:100%;max-width:368px;background:var(--bg-panel);border:1px solid white;
  border-radius:10px;padding:28px 26px;text-align:center;
  box-shadow:0 8px 32px rgba(0,0,0,0.45);
}
/* data/logo2.png is a wide rectangular lockup (~2.88:1), not square — a
   fixed 150x150 box let object-fit:contain shrink it to fit the width and
   leave ~49px of empty transparent space above/below inside the box,
   which read as an oversized gap before "Log In". width + height:auto
   lets it size to its own aspect ratio instead, no dead space. */
#activation-logo{width:150px;height:auto;margin-bottom:1px;}
#activation-card h1{font-size:18px;margin:0 0 6px;color:var(--text);}
#activation-card p{font-size:12.5px;color:white;margin:0 0 18px;}
#activation-card label{display:block;text-align:left;font-size:11.5px;color:white;margin-bottom:4px;}
#activation-card input{
  width:100%;padding:9px 10px;font-size:13px;background:var(--bg-panel-raised);
  border:0.5px solid rgb(174, 174, 144);border-radius:6px;color:var(--text);margin-bottom:12px;
}
#activation-card input:focus{outline:none;border-color:var(--accent);}
#activation-card button{
  width:100%;padding:9px 0;font-size:13px;font-weight:600;background:var(--accent);
  border:none;border-radius:6px;color:#0b1f2c;cursor:pointer;
}
#activation-card button:hover{filter:brightness(1.08);}
#activation-card button:disabled{opacity:0.6;cursor:default;filter:none;}
#activation-request-status{min-height:18px;font-size:12px;margin-top:10px;}
#activation-request-status.err{color:var(--danger);}
#activation-request-status.ok{color:var(--ok);}

/* Text-link-style buttons (Request Access, Back, and the login/claim
   panel-switch links) — override the solid accent look #activation-card
   button gets by default. Selectors are qualified with #activation-card
   button (not just the bare id) so their specificity (2 ids + 1 type)
   beats the base #activation-card button rule (1 id + 1 type) — a bare
   id selector alone loses that fight regardless of source order. */
#activation-card button#activation-request-open,
#activation-card button#activation-request-back,
#activation-card button#login-goto-claim,
#activation-card button#login-goto-forgot,
#activation-card button#claim-goto-login{
  width:auto;display:block;margin:10px auto 0;padding:2px 4px;
  background:transparent;font-size:11.5px;font-weight:normal;
  color:var(--text-faint);
}
#activation-card button#activation-request-open:hover,
#activation-card button#activation-request-back:hover,
#activation-card button#login-goto-claim:hover,
#activation-card button#login-goto-forgot:hover,
#activation-card button#claim-goto-login:hover{color:var(--text-dim);filter:none;text-decoration:underline;}

/* All five panel-switch links get a light accent-blue pill wrapper so
   they read as (secondary) buttons rather than plain text links — same
   specificity pattern as the shared rule above (2 ids + 1 type) so
   source order decides, and this comes after it. Tinted with --accent
   (the same blue as the solid Log In/Activate buttons) rather than a
   plain white/gray wrapper, so these read as related actions, just
   lighter-weight. No text-decoration:underline on hover here — a
   background brighten fits a button better than an underline would. */
#activation-card button#activation-request-open,
#activation-card button#activation-request-back,
#activation-card button#login-goto-claim,
#activation-card button#login-goto-forgot,
#activation-card button#claim-goto-login{
  padding:8px 14px;background:rgba(61,167,224,0.12);
  border:1px solid rgba(61,167,224,0.35);border-radius:6px;
  color:var(--accent);
}
#activation-card button#activation-request-open:hover,
#activation-card button#activation-request-back:hover,
#activation-card button#login-goto-claim:hover,
#activation-card button#login-goto-forgot:hover,
#activation-card button#claim-goto-login:hover{
  background:rgba(61,167,224,0.2);border-color:rgba(61,167,224,0.5);
  color:var(--accent);text-decoration:none;
}
#login-form[hidden],
#claim-form[hidden],
#activation-request-panel[hidden]{display:none;}
#claim-status,
#login-status{min-height:18px;font-size:12px;margin-top:10px;}
#claim-status.err,
#login-status.err{color:var(--danger);}
#claim-status.ok,
#login-status.ok{color:var(--ok);}