/* ============================================================
   session.css - login modal additions, the session banner, the
   account gate and the casino handoff strip.

   base.css already styles .overlay / .auth-card / .auth-tabs /
   .auth-body / .field / .close-x. This file only adds what the
   real (as opposed to fake) login flow needs: an error block, a
   busy state, and the honest "we could not verify you" states.

   DARK-THEME PASS (ui-ux, 15 Oct 2026). R-012 (26 Sep) made dark the
   site's default; the login error block, the session banner's two tones
   and the transaction-provenance labels still carried light-theme
   literals, so they rendered as pale boxes on the navy card. Every colour
   in those rules is now a base.css token (dark values at
   base.css:265-268, light values in the [data-theme="light"] block),
   using the inset-accent treatment sports.css adopted for the slip's
   result card (R16-01) and account.css adopted on 15 Oct. The casino
   handoff tints below are NOT touched: R-032 retinted them for the dark
   default on 10 Oct with its own stated reasoning, and this window is one
   change. Sizes untouched for the same reason.
   ============================================================ */

/* ---------- login modal ---------- */
.auth-card form{margin:0}
.auth-error{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:inset 3px 0 0 var(--bad);
  padding:10px 12px;margin-bottom:14px;font-size:12.5px;line-height:1.45;
}
.auth-error b{display:block;color:var(--bad);font-size:12.5px;margin-bottom:2px}
.auth-error span{display:block;color:var(--muted)}
.auth-note{
  color:var(--muted);font-size:11px;line-height:1.5;margin:12px 0 0;
}

/* ---------- header, while a session is held but not yet verified ---------- */
/* Sits on the brand bar, which is navy in BOTH themes: white text and a
   translucent white chip are right there, so these stay. */
.session-pending{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.14);color:#fff;
  font-size:11.5px;font-weight:800;white-space:nowrap;
}
.session-pending::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--gold);
}

/* F1-04: shown once, in the anonymous header, right after an expired/invalid
   session was dropped - a logout or a page with nothing ever stored shows
   nothing here. Muted, not alarmed: the punter did nothing wrong. */
.session-expired-note{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.14);color:#fff;
  font-size:11.5px;font-weight:700;white-space:nowrap;
}

/* ---------- session banner (inside the main column) ---------- */
.session-banner{
  border-radius:var(--radius);padding:11px 14px;margin-bottom:14px;
  font-size:12.5px;line-height:1.5;border:1px solid var(--line);background:var(--card);
}
.session-banner.checking{color:var(--warn);box-shadow:inset 3px 0 0 var(--warn)}
.session-banner.blocked{color:var(--bad);box-shadow:inset 3px 0 0 var(--bad)}
.session-banner .btn{margin-left:8px;padding:5px 10px;font-size:11px}

/* ---------- the account gate ---------- */
.account-gate{max-width:560px}
.account-gate h3{margin-top:0}
.account-gate p{color:var(--muted);font-size:13px;line-height:1.55}

/* ---------- transaction provenance label ---------- */
.tx-source{
  font-size:10px;font-weight:800;letter-spacing:.3px;
  margin:0 0 8px;padding:6px 8px;border-radius:6px;background:var(--panel-tile);
}
.tx-source.live{color:var(--ok)}
.tx-source.sample{color:var(--warn)}

/* ---------- casino handoff ---------- */
.casino-handoff{
  border-radius:var(--radius);padding:11px 14px;margin:14px 0;
  font-size:12.5px;line-height:1.5;border:1px solid var(--line);background:var(--card);
}
/* R-032 (10 Oct): retinted for the dark-default theme -- these were still
   the light pastel colours from before R-012's retint (#fff9e6 etc.), which
   read as a bright, wrong-looking box on the dark navy page. Same dark-tint
   convention base.css's own .demo-banner.status-live/status-offline
   already use for exactly this "status box on a dark page" shape, not a
   new palette invented for this one component. No [data-theme="light"]
   override, matching .demo-banner's own precedent -- that banner has
   never had a separate light-theme variant either. */
.casino-handoff.checking{background:#3d2e0a;border-color:#6b5300;color:#f2e4c9}
.casino-handoff.ready{background:#0a3d1f;border-color:#1f6b3d;color:#c9f2d6}
.casino-handoff.blocked{background:#3d0a0a;border-color:#6b1d1d;color:#f2c9c9}
.casino-handoff a{text-decoration:underline;font-weight:800;color:inherit}

/* R-032: the same strip, floating over whatever page the punter is on
   (casinoNavLaunch() no longer navigates to a dedicated page first). */
.casino-handoff-toast{
  position:fixed;right:16px;bottom:16px;z-index:60;max-width:340px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.casino-handoff-toast .casino-handoff{margin:0;padding-right:32px}
.casino-handoff-toast-x{
  position:absolute;top:6px;right:8px;background:none;border:none;color:inherit;
  opacity:.7;font-size:16px;line-height:1;cursor:pointer;padding:4px;
}
.casino-handoff-toast-x:hover{opacity:1}
/* .mobile-nav (base.css) becomes fixed-bottom at this same 980px breakpoint
   -- match it exactly, or the toast sits under the nav bar for part of the
   range instead of clearing it the whole time that bar is visible. */
@media(max-width:980px){.casino-handoff-toast{left:16px;right:16px;max-width:none;bottom:72px}}
@media(max-width:480px){.casino-handoff-toast{left:12px;right:12px}}