/* ═══════════════════════════════════════════════════════════════════════════
   SHARED AUTH CARD — styles
   ═══════════════════════════════════════════════════════════════════════════
   There is ONE login card and ONE sign-up card in Commissaire. This file and
   auth.js are the only place either is defined. Both index.html (the app) and
   landing.html load them.

   SCOPED TO #login-modal, NOT .modal-overlay. Two reasons, both load-bearing:

   1. `.modal-overlay` is shared with #season-modal and #support-modal in the
      app. Restyling the class would silently restyle those too.

   2. An id gives specificity (1,0,0), which beats index.html's `.modal-overlay`
      (0,1,0) no matter which stylesheet loads first. Nothing here depends on
      source order, and NO rule was removed from index.html's <style>.

   Variables are declared on #login-modal rather than :root so that loading
   this file on the landing page — which has a completely different design
   system — cannot disturb anything else on that page.
   ═══════════════════════════════════════════════════════════════════════════ */

#login-modal{
  /* DARK GLASS CONTEXT.
     auth.js styles its markup entirely with var(--…) and has no hard-coded
     colours, so redefining the palette here flips the whole card to the glass
     treatment without touching a single line of markup. Verified: the only
     variables auth.js uses are the nine below. */
  --text:rgba(255,255,255,0.95);
  --muted:rgba(255,255,255,0.60);
  --border:rgba(255,255,255,0.18);
  --white:rgba(255,255,255,0.10);
  --border-strong:rgba(255,255,255,0.30);
  --purple:rgba(255,255,255,0.92);
  --purple-dark:#e0003f;
  --purple-pale:rgba(255,255,255,0.16);
  /* Lifted off #ff0048 for link text: the brand red only reaches ~4:1 against
     this backdrop. The PRIMARY BUTTON keeps the true brand red explicitly
     below, because white-on-#ff0048 is fine at button size. */
  --accent:#ff5c85;
  --off-white:rgba(255,255,255,0.07);
  --paper:rgba(255,255,255,0.95);
  --ink:rgba(255,255,255,0.12);

  display:none;position:fixed;inset:0;z-index:200;
  align-items:center;justify-content:center;padding:20px;

  /* Same overlay as .champ-celebration-overlay and .about-overlay — one glass
     family. Replaces the old rgba(255,0,72,.25), which washed the page pink. */
  background:rgba(10,4,20,0.65);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:authFade .3s ease;
}
@keyframes authFade{from{opacity:0}to{opacity:1}}
#login-modal.open{display:flex}

/* ── GLASS CARD ────────────────────────────────────────────────────────────
   Values lifted verbatim from .champ-celebration-card so the auth card joins
   the existing glass family (info card, About card, champion celebration).
   The sweep is identical to .ic-sweep / .champ-celeb-sweep — the app's own
   comment says "if you retune one, retune both"; that now means all four.

   overflow:hidden clips the sweep to the rounded corners, so SCROLLING moves
   to .auth-inner. Putting it on .modal instead would cut the sweep off. */
#login-modal .modal{
  position:relative;
  width:min(480px,100%);
  border-radius:16px;
  background:rgba(255,255,255,0.11);
  border:1.5px solid rgba(255,255,255,0.22);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  overflow:hidden;
  box-shadow:0 26px 70px rgba(0,0,0,.5);
  animation:authSlideUp .4s cubic-bezier(.16,1,.3,1);
  font-family:Barlow,system-ui,sans-serif;
  color:var(--text);
  text-align:left;
}
@keyframes authSlideUp{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}

#login-modal .auth-sweep{
  position:absolute;top:0;bottom:0;width:40%;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.10) 45%,transparent);
  animation:authSweep 5.5s ease-in-out infinite;
}
@keyframes authSweep{0%{left:-45%}55%{left:120%}100%{left:120%}}

/* Content sits above the sweep and owns the scrolling. */
#login-modal .auth-inner{
  position:relative;z-index:5;
  padding:2rem;max-height:90vh;overflow-y:auto;
}
/* A soft top wash, as on .champ-celeb-head — gives the glass a light source. */
#login-modal .auth-inner::before{
  content:'';position:absolute;left:0;right:0;top:0;height:120px;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,transparent 100%);
  pointer-events:none;
}

#login-modal .modal-header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;
}
#login-modal .modal-close{
  background:none;border:none;color:var(--muted);font-size:1.5rem;cursor:pointer;line-height:1;
}
#login-modal .modal-close:hover{color:#fff}

#login-modal .card-title{
  font-family:Barlow Condensed,sans-serif;font-weight:800;font-size:.82rem;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.72);margin:0;
}

#login-modal .form-group{margin-bottom:1rem}
#login-modal .form-label{
  display:block;font-family:Barlow Condensed,sans-serif;font-weight:700;
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-bottom:.4rem;
}
/* Fields are a darker well rather than more glass — typed text needs to sit on
   something stable, not on whatever is drifting past behind the card. */
#login-modal .form-control{
  width:100%;
  background:rgba(0,0,0,0.28);
  border:1.5px solid rgba(255,255,255,0.20);
  border-radius:6px;color:#fff;padding:.6rem .85rem;
  font-family:Barlow Condensed,sans-serif;font-size:.9rem;
  transition:border-color .15s,background .15s;
}
#login-modal .form-control::placeholder{color:rgba(255,255,255,.38)}
#login-modal .form-control:focus{
  outline:none;border-color:rgba(255,255,255,.55);
  background:rgba(0,0,0,0.38);
  box-shadow:0 0 0 3px rgba(255,0,72,.22);
}
/* Chrome paints autofilled fields near-white, which would blow a hole in the
   glass. Mask it with an inset shadow and force the text light. */
#login-modal .form-control:-webkit-autofill,
#login-modal .form-control:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px rgba(28,16,40,0.96) inset;
  caret-color:#fff;
}

#login-modal .btn{
  display:inline-flex;align-items:center;gap:6px;padding:.42rem 1.1rem;
  border-radius:6px;border:none;font-family:Barlow Condensed,sans-serif;
  font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;transition:all .15s;
}
/* True brand red here, not the lightened --accent: white on #ff0048 is
   perfectly legible at button size, and this is the one place the brand
   colour should stay exact. */
#login-modal .btn-primary{background:#ff0048;color:#fff}
#login-modal .btn-primary:hover{background:#e0003f}
#login-modal .btn-primary:disabled{opacity:.6;cursor:default}
#login-modal .btn-secondary{
  background:rgba(255,255,255,0.10);color:#fff;
  border:1.5px solid rgba(255,255,255,0.28);
}
#login-modal .btn-secondary:hover{background:rgba(255,255,255,0.18)}
#login-modal .btn-sm{padding:.3rem .9rem;font-size:.75rem}

#login-modal a{color:var(--accent)}

#login-modal .spinner{
  display:inline-block;width:16px;height:16px;
  border:2px solid rgba(255,255,255,.25);border-top-color:#fff;
  border-radius:50%;animation:auth-spin .6s linear infinite;
}
@keyframes auth-spin{to{transform:rotate(360deg)}}

/* Checkboxes render as tiny white boxes by default; tint them to the brand. */
#login-modal input[type=checkbox]{accent-color:#ff0048}

/* Divider rules inside the card bodies are set inline to var(--border), which
   is already remapped above — nothing more needed here. */

/* Without backdrop-filter the glass would read as a flat grey panel, so make
   the card solid dark instead — still legible, still on-family. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #login-modal{background:rgba(10,4,20,0.86)}
  #login-modal .modal{background:rgba(32,22,48,0.98)}
}