/* 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%;color:var(--text);font-family:var(--ui);}
/* Backdrop: a faint topographic-contour pattern under a soft glow — drawn in
   CSS/SVG so the login page still loads nothing beyond this file. */
body{
  background-color:#15181d;
  background-image:
    radial-gradient(ellipse at 50% 35%, rgba(61,167,224,0.16), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cg fill='none' stroke='%233da7e0' stroke-opacity='0.09' stroke-width='1.2'%3E%3Cpath d='M-20 120c80-60 160 40 260-10s170-70 300 0'/%3E%3Cpath d='M-20 170c90-50 170 50 270 0s160-60 290 10'/%3E%3Cpath d='M-20 230c100-40 180 60 280 10s150-50 280 20'/%3E%3Cpath d='M-20 300c110-30 190 70 290 20s140-40 270 30'/%3E%3Cpath d='M-20 370c120-20 200 80 300 30s130-30 260 40'/%3E%3Cpath d='M-20 440c130-10 210 90 310 40s120-20 250 50'/%3E%3Cellipse cx='130' cy='80' rx='60' ry='30'/%3E%3Cellipse cx='130' cy='80' rx='30' ry='14'/%3E%3Cellipse cx='400' cy='470' rx='70' ry='32'/%3E%3Cellipse cx='400' cy='470' rx='36' ry='15'/%3E%3C/g%3E%3C/svg%3E");
  background-size:auto, 520px 520px;
}

/* ---------- Activation Gate ---------- */
#activation-gate{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:24px 16px;
}
#activation-card{
  width:100%;max-width:380px;background:rgba(39,42,47,0.94);border:1px solid rgba(255,255,255,0.14);
  border-radius:14px;padding:30px 28px 22px;text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(61,167,224,0.06);
  backdrop-filter:blur(6px);
}
/* 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:172px;height:auto;margin-bottom:14px;}
#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);}
/* Usage-stats notice at the bottom of the card (see netlify/functions/_lib/usage.mjs). */
#activation-privacy{margin-top:16px;font-size:10.5px;line-height:1.4;color:var(--text-faint);text-wrap:balance;}

/* ---------- Log In / Activate tabs ---------- */
#auth-tabs{display:flex;gap:4px;padding:4px;margin:0 0 18px;background:rgba(0,0,0,0.25);border-radius:9px;}
#activation-card #auth-tabs button{
  flex:1;width:auto;padding:8px 0;background:transparent;color:var(--text-dim);
  font-weight:600;border-radius:6px;transition:background .15s,color .15s;
}
#activation-card #auth-tabs button:hover{color:var(--text);filter:none;}
#activation-card #auth-tabs button.on{background:var(--bg-panel-raised);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,0.35);}
#auth-tabs[hidden]{display:none;}
/* The tabs are the headings now, and they replace "Already activated? Log in instead". */
#login-form h1, #claim-form h1{display:none;}
#activation-card button#claim-goto-login{display:none;}

/* ---------- Show / hide password ---------- */
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:38px !important;}
#activation-card .pw-wrap button.pw-toggle{
  position:absolute;right:4px;top:4px;width:30px;height:28px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--text-faint);border-radius:5px;
}
#activation-card .pw-wrap button.pw-toggle:hover{color:var(--text);background:rgba(255,255,255,0.06);filter:none;}
#activation-card .pw-wrap button.pw-toggle.on{color:var(--accent);}

/* ---------- Busy spinner on Log In / Activate / Send ---------- */
#activation-card button.busy{position:relative;color:transparent !important;}
#activation-card button.busy::after{
  content:'';position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2px solid rgba(11,31,44,0.35);border-top-color:#0b1f2c;border-radius:50%;
  animation:lg-spin .7s linear infinite;
}
@keyframes lg-spin{to{transform:rotate(360deg);}}

#activation-card input{transition:border-color .15s, box-shadow .15s;}
#activation-card input:focus{box-shadow:0 0 0 3px rgba(61,167,224,0.18);}

/* ---------- Footer under the card ---------- */
#activation-footer{display:flex;gap:8px;font-size:11.5px;color:var(--text-faint);}
#activation-footer a{color:var(--text-dim);text-decoration:none;}
#activation-footer a:hover{color:var(--text);text-decoration:underline;}

@media (prefers-reduced-motion: reduce){ #activation-card button.busy::after{animation-duration:2s;} }

/* ---------- Split layout: brand half + login half ---------- */
.auth-shell{
  width:100%;max-width:1020px;min-height:600px;display:grid;grid-template-columns:1.15fr 1fr;
  border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 24px 70px rgba(0,0,0,0.55);background:rgba(39,42,47,0.96);
}
.auth-brand{
  position:relative;overflow:hidden;padding:40px 40px 0;display:flex;flex-direction:column;
  background:linear-gradient(160deg,#1d3550 0%,#152436 55%,#111a26 100%);
}
.auth-brand::before{ /* soft glow behind the headline */
  content:'';position:absolute;left:-120px;top:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(61,167,224,0.28),transparent 65%);pointer-events:none;
}
.auth-brand > *{position:relative;}
.auth-brand-logo{width:190px;height:auto;margin-bottom:26px;}
.auth-brand-head{font-size:27px;line-height:1.25;font-weight:800;color:#fff;letter-spacing:-0.01em;}
.auth-brand-head span{color:#4cc3d9;}
.auth-brand-sub{margin-top:12px;font-size:13.5px;line-height:1.55;color:#b7c4d3;max-width:400px;}
.auth-brand-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.auth-brand-pills span{font-size:12px;padding:5px 12px;border-radius:999px;color:#cfe9f5;
  background:rgba(76,195,217,0.10);border:1px solid rgba(76,195,217,0.35);}
/* The app window from the social-preview image, peeking up from the bottom. */
.auth-brand-shot{
  flex:1;min-height:200px;margin:28px -40px 0 30px;border-radius:12px 0 0 0;
  background:url("../data/og-image.jpg") no-repeat;background-size:205% auto;background-position:93% 22%;
  box-shadow:-10px -10px 40px rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.10);border-right:none;border-bottom:none;
}
/* The login half: the card sits flat inside the shell. */
.auth-shell #activation-card{
  max-width:none;border:none;border-radius:0;box-shadow:none;background:transparent;backdrop-filter:none;
  padding:48px 52px 30px;display:flex;flex-direction:column;justify-content:center;
}
.auth-shell #activation-card > *{width:100%;max-width:340px;margin-left:auto;margin-right:auto;}
.auth-shell #activation-logo{display:none;}
.auth-shell #login-form h1, .auth-shell #claim-form h1{display:block;font-size:22px;text-align:left;margin:4px 0 4px;}
.auth-shell #login-form > p, .auth-shell #claim-form > p, .auth-shell #activation-request-panel > p{text-align:left;color:var(--text-dim);}
.auth-shell #activation-request-panel h1{text-align:left;}
.auth-shell #activation-card input{padding:11px 12px;font-size:14px;border:1px solid rgba(255,255,255,0.14);border-radius:8px;}
.auth-shell #activation-card button#login-continue,
.auth-shell #activation-card button#claim-continue,
.auth-shell #activation-card button#activation-request-send{padding:11px 0;font-size:14px;border-radius:8px;margin-top:4px;
  background:linear-gradient(180deg,#4bb4ec,#2f97d3);color:#06202f;box-shadow:0 6px 18px rgba(61,167,224,0.28);}
.auth-shell #activation-card .pw-wrap button.pw-toggle{top:6px;}

@media (max-width: 860px){
  .auth-shell{grid-template-columns:1fr;max-width:440px;min-height:0;}
  .auth-brand{padding:22px 24px 20px;}
  .auth-brand-logo{width:150px;margin-bottom:10px;}
  .auth-brand-head{font-size:19px;}
  .auth-brand-sub, .auth-brand-shot{display:none;}
  .auth-brand-pills{margin-top:10px;}
  .auth-shell #activation-card{padding:26px 22px 22px;}
}

/* Secondary buttons (Request access, First time here?, Forgot password, Back):
   brighter text on a slightly stronger tint so they read clearly. */
.auth-shell #activation-card button#activation-request-open,
.auth-shell #activation-card button#activation-request-back,
.auth-shell #activation-card button#login-goto-claim,
.auth-shell #activation-card button#login-goto-forgot{
  padding:9px 16px;font-size:12.5px;font-weight:600;color:#d8f1ff;
  background:rgba(61,167,224,0.20);border:1px solid rgba(110,195,240,0.60);border-radius:8px;
}
.auth-shell #activation-card button#activation-request-open:hover,
.auth-shell #activation-card button#activation-request-back:hover,
.auth-shell #activation-card button#login-goto-claim:hover,
.auth-shell #activation-card button#login-goto-forgot:hover{
  color:#fff;background:rgba(61,167,224,0.32);border-color:rgba(140,210,245,0.85);
}

/* Thin light border around the login/activation card, and a faint line
   between its two halves. */
.auth-shell{border:1px solid rgba(110,195,240,0.45);}
.auth-brand{border-right:1px solid rgba(110,195,240,0.18);}
@media (max-width: 860px){
  .auth-brand{border-right:none;border-bottom:1px solid rgba(110,195,240,0.18);}
}

/* App screenshot (data/login-preview.jpg), framed and centred in the space
   under the pills. */
.auth-brand-shot{
  flex:1;min-height:200px;margin:0;padding:26px 0 40px;border:none;border-radius:0;box-shadow:none;
  background:none;display:flex;align-items:center;justify-content:center;
}
.auth-brand-shot img{
  display:block;width:100%;max-width:470px;height:auto;border-radius:10px;
  border:1px solid rgba(110,195,240,0.35);box-shadow:0 16px 40px rgba(0,0,0,0.45);
}
/* A little more depth on the screenshot: a deeper drop shadow plus a faint
   blue glow, since a dark shadow alone barely shows on the dark panel. */
.auth-brand-shot img{box-shadow:0 22px 48px rgba(0,0,0,0.65), 0 6px 14px rgba(0,0,0,0.45), 0 0 28px rgba(61,167,224,0.22);}

/* First / last name side by side on the Activate form */
.name-row{display:flex;gap:10px;}
.name-row > div{flex:1;min-width:0;}
.name-row .opt{color:#c3ccd6;font-weight:400;}