/* Sign in, create account and account recovery (/login, /register, /forgot-password, /reset-password,
   /verify-email, /two-factor). One sheet for the three pages; atmosphere.css and vo-theme.css load after it and
   give the main button its green.

   Desktop: a rounded panel on the left, lit from the top with the site's green and grain: the mark's bell curve drawn
   large with the fair line and the edge past it, then the mark, a heading, the three steps when signing up, and the
   sportsbooks the prices come from; the form centred on the right. The panel is sticky and one window tall,
   so a long form scrolls beside it. Under 1024px the panel goes and the mark sits above the form. */

body:has(> .auth-shell) {
  --auth-bg:#09090b; --auth-field:#141417; --auth-panel:#0e0e11;
  --auth-line:rgb(255 255 255/.07); --auth-line-2:rgb(255 255 255/.1); --auth-line-3:rgb(255 255 255/.16);
  --auth-text:#f4f4f5; --auth-text-2:#c4c4cc; --auth-text-3:#9b9ba5; --auth-text-4:#71717a;
  --auth-green:#2BD07F; --auth-green-text:#5ce5a3;
  /* The panel's light, in the site green: a core just under the top edge over a broad wash that is gone by about
     60% of the way down. */
  --auth-light-core:.22;
  --auth-light:.1;
  --auth-grain:.09;
  --auth-font:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  min-width:320px; min-height:100svh; margin:0; background:var(--auth-bg); color:var(--auth-text);
  font:15px/1.5 var(--auth-font); color-scheme:dark;
}
:where(body:has(> .auth-shell)) :where(*, *::before, *::after) { box-sizing:border-box; }
:where(body:has(> .auth-shell)) [hidden] { display:none !important; }
:where(body:has(> .auth-shell)) :where(h1, h2, p, ol) { margin:0; }
:where(body:has(> .auth-shell)) :where(a) { color:inherit; text-decoration:none; }
:where(body:has(> .auth-shell)) :where(button, input) { font:inherit; }
:where(body:has(> .auth-shell)) :where(button) { cursor:pointer; }
:where(body:has(> .auth-shell)) :where(button:disabled) { cursor:wait; opacity:.6; }
body:has(> .auth-shell) :is(a, button, input[type=checkbox]):focus-visible { outline:2px solid var(--auth-green); outline-offset:2px; }

.account-skip { position:absolute; left:16px; top:-100px; z-index:5; padding:10px 14px; border-radius:10px; background:var(--auth-green); font-weight:650; }
.account-skip:focus { top:12px; }

/* ------------------------------------------------------------------ frame */
.auth-shell { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:100svh; }
.auth-main { display:flex; flex-direction:column; align-items:center; min-width:0; padding:24px 40px; }
/* The top row: a way back to the site on the left; on small screens the mark joins it in the middle. */
.auth-top { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:100%; min-height:40px; }
.auth-top .auth-brand { display:none; }
.auth-back {
  display:inline-flex; justify-self:start; align-items:center; gap:8px; height:36px; padding:0 14px 0 10px; border:1px solid var(--auth-line-2); border-radius:10px;
  color:var(--auth-text-2); font-size:14px; font-weight:550; white-space:nowrap; transition:background-color .15s, border-color .15s, color .15s;
}
.auth-back:hover { border-color:var(--auth-line-3); background:rgb(255 255 255/.04); color:var(--auth-text); }
.auth-back svg { width:16px; height:16px; }
.auth-brand { display:inline-flex; align-items:center; padding:6px; color:var(--auth-text); }
.auth-brand .brand-logo { display:block; width:auto; height:28px; }
.auth-form { width:min(100%, 400px); margin-block:auto; padding-block:32px; }
.auth-foot { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 18px; color:var(--auth-text-4); font-size:12.5px; }
.auth-foot a:hover { color:var(--auth-text-2); }

/* ------------------------------------------------------------------ the panel */
.auth-panel {
  position:sticky; top:12px; order:-1; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  height:calc(100svh - 24px); min-height:560px; margin:12px 0 12px 12px; padding:40px 40px 36px; overflow:hidden;
  border-radius:24px; background:var(--auth-panel); box-shadow:inset 0 0 0 1px var(--auth-line); text-align:center;
}
.auth-panel::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 62% 34% at 50% 0%,
      rgb(43 208 127/var(--auth-light-core)) 0%, rgb(43 208 127/calc(var(--auth-light-core) * .55)) 40%, rgb(43 208 127/calc(var(--auth-light-core) * .18)) 75%, rgb(43 208 127/0) 100%),
    radial-gradient(ellipse 95% 62% at 50% 0%,
    rgb(43 208 127/var(--auth-light)) 0%, rgb(43 208 127/calc(var(--auth-light) * .78)) 35%,
    rgb(43 208 127/calc(var(--auth-light) * .45)) 60%, rgb(43 208 127/calc(var(--auth-light) * .15)) 82%, rgb(43 208 127/0) 100%);
}
.auth-panel::after {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:var(--auth-grain); background-size:220px 220px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.4 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
.auth-art { display:flex; flex:1 1 auto; align-items:flex-end; justify-content:center; width:100%; min-height:0; padding-bottom:48px; }
.auth-art svg { display:block; width:min(100%, 520px); height:auto; max-height:100%; }
.auth-art text { font:600 12px var(--auth-font); letter-spacing:.01em; }
.auth-art .auth-art-fair { fill:var(--auth-text-3); }
.auth-art .auth-art-edge { fill:var(--auth-green-text); }
.auth-panel-inner { display:flex; flex-direction:column; align-items:center; width:min(100%, 360px); }
.auth-panel .auth-brand .brand-logo { height:34px; }
.auth-panel h2 { margin-top:24px; color:var(--auth-text); font-size:30px; font-weight:650; letter-spacing:-.03em; line-height:1.15; text-wrap:balance; }
.auth-panel-inner p { margin-top:12px; color:var(--auth-text-2); font-size:15.5px; line-height:1.55; text-wrap:balance; }

.auth-steps { display:grid; gap:10px; width:100%; margin-top:36px; padding:0; list-style:none; text-align:left; }
.auth-steps li {
  display:flex; align-items:center; gap:12px; min-height:52px; padding:0 16px; border-radius:14px;
  background:rgb(255 255 255/.03); box-shadow:inset 0 0 0 1px var(--auth-line); color:var(--auth-text-3); font-size:14.5px; font-weight:550;
}
.auth-steps li > span { display:grid; place-items:center; flex:none; width:24px; height:24px; border-radius:50%; background:rgb(255 255 255/.07); color:var(--auth-text-2); font-size:12px; font-weight:650; }
.auth-steps li[aria-current] { background:#232329; box-shadow:inset 0 0 0 1px var(--auth-line-2), inset 0 1px 0 rgb(255 255 255/.06); color:var(--auth-text); }
.auth-steps li[aria-current] > span { background:var(--auth-green); color:#04140b; }

.auth-books { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 12px; margin-top:40px; color:var(--auth-text-3); font-size:13.5px; }
.auth-book-stack { display:flex; gap:6px; }
.auth-book-stack img { display:block; width:24px; height:24px; border-radius:7px; }

/* ------------------------------------------------------------------ the form */
.auth-form h1 { color:var(--auth-text); font-size:28px; font-weight:650; letter-spacing:-.025em; line-height:1.2; text-align:center; }
.account-subtitle { margin-top:8px; color:var(--auth-text-3); font-size:15px; text-align:center; }
:is(#account-form, #recovery-form) { margin-top:32px; }
#recovery-fields > .recovery-links { justify-content:center; margin-top:28px; }

.account-field { margin:0 0 16px; }
.account-field label { display:block; margin:0 0 8px; color:var(--auth-text-2); font-size:13.5px; font-weight:550; }
.account-field input {
  display:block; width:100%; height:46px; padding:0 14px; border:1px solid var(--auth-line); border-radius:10px; outline:none;
  background:var(--auth-field); color:var(--auth-text); font-size:15px; transition:border-color .15s, box-shadow .15s;
}
.account-field input::placeholder { color:var(--auth-text-4); opacity:1; }
.account-field input:hover { border-color:var(--auth-line-3); }
.account-field input:focus { border-color:rgb(43 208 127/.6); box-shadow:0 0 0 3px rgb(43 208 127/.14); }
.account-field input:focus-visible { outline:none; }
.account-field input:-webkit-autofill { -webkit-box-shadow:0 0 0 40px var(--auth-field) inset; -webkit-text-fill-color:var(--auth-text); caret-color:var(--auth-text); }
.account-field input:-webkit-autofill:focus { -webkit-box-shadow:0 0 0 40px var(--auth-field) inset, 0 0 0 3px rgb(43 208 127/.14); }
.account-password-field { position:relative; }
.account-password-field input { padding-right:76px; }
.account-password-field button {
  position:absolute; top:50%; right:6px; transform:translateY(-50%); height:34px; min-width:56px; padding:0 10px; border:0; border-radius:7px;
  background:transparent; color:var(--auth-text-3); font-size:13px; font-weight:600;
}
.account-password-field button:hover { background:rgb(255 255 255/.06); color:var(--auth-text); }
.account-help { margin:8px 0 0; color:var(--auth-text-4); font-size:12.5px; line-height:1.55; }

.account-check { display:flex; align-items:flex-start; gap:10px; margin:12px 0 0; color:var(--auth-text-2); font-size:13.5px; line-height:1.5; text-wrap:pretty; cursor:pointer; }
.account-check input { flex:none; width:16px; height:16px; margin:2px 0 0; accent-color:var(--auth-green); cursor:pointer; }
.account-check a { color:var(--auth-green-text); }
.account-check a:hover { text-decoration:underline; text-underline-offset:3px; }
.account-field + .account-check { margin-top:18px; }
.account-form-options { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; margin-top:4px; }
.account-form-options .account-check { margin:0; }
.account-form-options > a { color:var(--auth-text-2); font-size:13.5px; font-weight:550; }
.account-form-options > a:hover { color:var(--auth-green-text); }

/* The main button takes its green from atmosphere.css and vo-theme.css, like every primary button on the site. */
.account-submit { display:flex; align-items:center; justify-content:center; width:100%; min-height:46px; margin-top:22px; padding:0 18px; border:0; font-size:15px; font-weight:650; }

/* Google first, then "or", then the email form (shown only when the server has Google configured). */
.account-social { display:grid; gap:20px; margin-bottom:20px; }
.account-divider { display:flex; align-items:center; gap:12px; color:var(--auth-text-4); font-size:12.5px; }
.account-divider::before, .account-divider::after { content:''; flex:1; height:1px; background:var(--auth-line); }
.account-google {
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:46px; padding:0 18px; border:1px solid var(--auth-line-2); border-radius:10px;
  background:transparent; color:var(--auth-text); font-size:15px; font-weight:600; transition:background-color .15s, border-color .15s;
}
.account-google:hover { border-color:var(--auth-line-3); background:rgb(255 255 255/.04); }
.account-google svg { width:18px; height:18px; }

.account-status { margin-top:16px; padding:12px 14px; border:1px solid var(--auth-line-2); border-radius:10px; background:#141417; color:var(--auth-text-2); font-size:13.5px; line-height:1.55; overflow-wrap:anywhere; }
.account-status[data-tone=success] { border-color:rgb(43 208 127/.3); }
.account-status[data-tone=error] { border-color:rgb(255 107 107/.38); background:rgb(255 107 107/.06); color:#ffc9c9; }
.account-status a { color:var(--auth-green-text); text-decoration:underline; text-underline-offset:3px; }

.account-switch { margin-top:24px; color:var(--auth-text-3); font-size:14px; text-align:center; }
.account-switch a, .recovery-links a { color:var(--auth-green-text); font-weight:600; }
.account-switch a:hover, .recovery-links a:hover { text-decoration:underline; text-underline-offset:3px; }
.recovery-links { display:flex; flex-wrap:wrap; gap:12px 24px; font-size:14px; }
.auth-note { max-width:36ch; margin:10px auto 0; color:var(--auth-text-4); font-size:12.5px; line-height:1.55; text-align:center; }

/* Local design preview only (lib/preview-login.mjs): one-click test sign-ins, kept quiet so the real form leads. */
.account-guest { display:grid; gap:6px; margin-top:12px; }
.account-guest button { width:100%; min-height:42px; border:1px dashed var(--auth-line-3); border-radius:10px; background:transparent; color:var(--auth-text-2); font-size:14px; font-weight:600; }
.account-guest button:hover { background:rgb(255 255 255/.04); color:var(--auth-text); }
.account-guest small { color:var(--auth-text-4); font-size:12px; text-align:center; }

/* Laptop-height windows: a little less air around the form, so the longest one (create account) still fits. */
@media (max-height:1000px) and (min-width:1024px) { .auth-main { padding-block:16px; } .auth-form { padding-block:16px; } .auth-panel h2 { font-size:28px; } }
/* Short windows: the illustration gives its room to the heading and steps. */
@media (max-height:680px) and (min-width:1024px) { .auth-art { display:none; } .auth-panel { justify-content:flex-end; } }

/* ------------------------------------------------------------------ tablets and phones */
@media (max-width:1023px) {
  .auth-shell { grid-template-columns:minmax(0,1fr); }
  .auth-panel { display:none; }
  .auth-top .auth-brand { display:inline-flex; }
}
@media (max-width:640px) {
  .auth-main { padding:16px 20px 24px; }
  .auth-back-long { display:none; }
  .auth-form { margin-block:0 auto; padding-block:32px 36px; }
  .auth-form h1 { font-size:26px; }
  .account-field input { font-size:16px; }
  .account-check, .account-form-options > a { font-size:14px; }
  .account-check input { width:18px; height:18px; margin-top:1px; }
}
@media (prefers-reduced-motion:reduce) { body:has(> .auth-shell) * { transition:none !important; } }