/* Lobbyden design tokens and shared controls: the Night stadium look (WO19). Rules and reasons: store/DESIGN.md. */
@font-face { font-family:"Chakra Petch"; src:url(fonts/chakra-petch-500.woff2) format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Chakra Petch"; src:url(fonts/chakra-petch-700.woff2) format("woff2"); font-weight:700; font-display:swap; }
:root {
  color-scheme:dark;
  /* The pitch, darkest first. Flat surfaces, separated by hairlines, never by gradients. */
  --bg:#050506; --surface-1:#0c0c0e; --surface-2:#131316; --surface-3:#1b1b1f; --inset:#08080a;
  --scrim:rgba(0,0,0,.66); --float:rgba(12,12,14,.9);
  --line:#232327; --line-strong:#34343a;
  /* Text */
  --text:#f4f4ef; --text-2:#a3a39b; --text-3:#8a8a83;
  /* One accent: volt is what is live and what you tap next. Ink is the text on volt. */
  --volt:#d4ff3a; --volt-hover:#e2ff70; --volt-press:#b8e01f; --volt-ink:#0b0d02; --volt-soft:rgba(212,255,58,.14);
  --accent:var(--volt); --accent-text:var(--volt); --on-accent:var(--volt-ink); --live:var(--volt);
  /* The floodlight: one soft light from above, on the page background only */
  --flood:radial-gradient(640px 420px at 50% -120px, rgba(236,255,190,.09), transparent 70%) no-repeat;
  /* Meaning */
  --speaking:var(--volt); --danger:#ff5a52; --danger-fill:#ff4545; --danger-ink:#1a0303; --success:#3ddc84; --warn:#ffb23a;
  --warn-bg:rgba(255,178,58,.08); --warn-line:rgba(255,178,58,.38);
  /* Type: display for headings, numbers and buttons; system UI for reading. rem, so zoom and text size settings scale it. */
  --display:"Chakra Petch", ui-sans-serif, system-ui, sans-serif;
  --body:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fs-1:.75rem; --fs-2:.875rem; --fs-3:1rem; --fs-4:1.25rem; --fs-5:1.75rem; --fs-6:2.5rem; --fs-7:4rem;
  /* Space (4 px base) and radius */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:48px;
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;
  /* Elevation: only things that float get a shadow; the live thing gets a volt glow */
  --e-float:0 16px 40px rgba(0,0,0,.6); --e-sheet:0 -16px 48px rgba(0,0,0,.6); --glow:0 0 0 1px var(--volt), 0 0 32px rgba(212,255,58,.2);
  /* Motion: 120 to 220 ms, ease-out */
  --t-fast:120ms; --t-med:160ms; --t-slow:220ms; --ease:cubic-bezier(.2,.8,.2,1);
  --tap:48px;
}
*, *::before, *::after { box-sizing:border-box; }
* { -webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; background:var(--bg); }
body { margin:0; color:var(--text); font:var(--fs-3)/1.5 var(--body); background:var(--flood), var(--bg); }
[hidden] { display:none !important; }
a { color:var(--volt); text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--volt); outline-offset:3px; }
::selection { background:var(--volt); color:var(--volt-ink); }

/* Buttons: .btn (quiet), .btn-primary (volt, one per screen), .btn-link */
.btn { min-height:var(--tap); padding:0 var(--s-5); display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  font:700 var(--fs-2)/1.2 var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--text); text-decoration:none; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--r-md);
  transition:transform var(--t-fast) var(--ease), background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), opacity var(--t-med) var(--ease); }
.btn-primary { background:var(--volt); border-color:var(--volt); color:var(--volt-ink); }
@media (hover:hover) {
  .btn:hover:not(:disabled) { background-color:var(--surface-3); border-color:#4a4a52; }
  .btn-primary:hover:not(:disabled) { background-color:var(--volt-hover); border-color:var(--volt-hover); }
}
.btn:active:not(:disabled) { transform:scale(.97); }
.btn-primary:active:not(:disabled) { background-color:var(--volt-press); border-color:var(--volt-press); }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.btn[aria-busy=true] { cursor:progress; }
.btn[aria-busy=true]::after { content:""; width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:spin .7s linear infinite; }
.btn-link { min-height:var(--tap); padding:0 var(--s-2); display:inline-flex; align-items:center; background:none; border:0; color:var(--text-2);
  font:500 var(--fs-2) var(--body); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:4px; cursor:pointer; border-radius:var(--r-sm);
  transition:color var(--t-med) var(--ease), text-decoration-color var(--t-med) var(--ease); }
@media (hover:hover) { .btn-link:hover { color:var(--text); text-decoration-color:currentColor; } }

/* The brand mark: volt tile with the sound bars, then the spaced-out word */
.mark { display:inline-flex; align-items:center; gap:var(--s-3); color:var(--text); text-decoration:none; font:700 var(--fs-2)/1 var(--display); letter-spacing:.32em; }
.mark .logo { width:32px; height:32px; padding:6px; border-radius:9px; background:var(--volt); color:var(--volt-ink); stroke-width:2.6; flex:none; }

/* Static pages: privacy, terms, support, download, accessibility */
.doc { max-width:680px; margin:0 auto; padding:calc(env(safe-area-inset-top) + var(--s-5)) var(--s-4) calc(env(safe-area-inset-bottom) + var(--s-8)); overflow-wrap:anywhere; line-height:1.65; }
.doc .back { display:inline-flex; align-items:center; gap:var(--s-2); min-height:var(--tap); color:var(--text-2); text-decoration:none; font:700 var(--fs-1) var(--display); letter-spacing:.2em; text-transform:uppercase; border-radius:var(--r-sm); }
@media (hover:hover) { .doc .back:hover { color:var(--text); } }
.doc h1 { font:700 var(--fs-6)/1 var(--display); letter-spacing:.02em; text-transform:uppercase; margin:var(--s-6) 0 var(--s-3); }
.doc .sub { color:var(--text-2); margin:0 0 var(--s-7); font-size:var(--fs-2); }
.doc .card, .doc section { padding:var(--s-6) 0; border-top:1px solid var(--line); }
.doc .muted { color:var(--text-2); }
.doc h2 { font:700 var(--fs-1)/1.3 var(--display); letter-spacing:.2em; text-transform:uppercase; color:var(--volt); margin:0 0 var(--s-3); }
.doc b, .doc strong { color:#fff; }
.doc p { margin:0 0 var(--s-3); } .doc p:last-child, .doc ul:last-child, .doc ol:last-child { margin-bottom:0; }
.doc ul, .doc ol { margin:0 0 var(--s-3); padding-left:var(--s-5); } .doc li { margin:0 0 var(--s-2); }
.doc li::marker { color:var(--text-3); }
.doc .foot { display:flex; justify-content:center; flex-wrap:wrap; gap:0 var(--s-2); color:var(--text-2); font-size:var(--fs-2); margin-top:var(--s-6); padding-top:var(--s-4); border-top:1px solid var(--line); }
.doc .foot a { color:var(--text-2); display:inline-flex; align-items:center; min-height:var(--tap); padding:0 var(--s-2); }

@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
.btn-primary:focus-visible { outline-color:#fff; }