/* radio-webplayer v5 login + setup page. Direction "Tally" (docs/v5/A6-design.md §4).
   Tokens copied from A6 §4.1; red (--tally) is used only for the live state:
   the "On air" lamp lights after a successful sign-in. */

@font-face { font-family: 'Sofia Sans'; font-weight: 1 1000; font-display: swap; src: url(/static/v5/fonts/sofia-sans-latin-wght-normal.woff2) format('woff2-variations'), url(/static/v5/fonts/sofia-sans-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Sofia Sans'; font-weight: 1 1000; font-display: swap; src: url(/static/v5/fonts/sofia-sans-latin-ext-wght-normal.woff2) format('woff2-variations'), url(/static/v5/fonts/sofia-sans-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Sofia Sans Extra Condensed'; font-weight: 1 1000; font-display: swap; src: url(/static/v5/fonts/sofia-sans-extra-condensed-latin-wght-normal.woff2) format('woff2-variations'), url(/static/v5/fonts/sofia-sans-extra-condensed-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  color-scheme: light;
  --bg: #F1F1F2;
  --surface: #FFFFFF;
  --surface-2: #E7E7EA;
  --ink: #111216;
  --ink-2: #4A4E57;
  --ink-3: #656A74;
  --line: rgba(17, 18, 22, .10);
  --line-2: rgba(17, 18, 22, .20);
  --tally: #C8102B;
  --tally-soft: rgba(200, 16, 43, .10);
  --ok: #0F7F45;
  --warn: #9A6200;
  --shadow-float: 0 24px 64px -24px rgba(17, 18, 22, .35), 0 2px 6px rgba(17, 18, 22, .06);
  --btn-ink: #FFFFFF;
  /* poster band: the "racing" and "saffron" ident palettes (A6 §9.3) */
  --st-bg: #0E5C44; --st-ink: #F4EFE3; --st-acc: #F7C23E;
  --f-ui: 'Sofia Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-disp: 'Sofia Sans Extra Condensed', 'Arial Narrow', 'Sofia Sans', system-ui, sans-serif;
  --r-ctl: 12px; --r-sheet: 20px; --r-pill: 999px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000; --surface: #121316; --surface-2: #1C1D21;
  --ink: #F2F2F4; --ink-2: #A6A9B1; --ink-3: #80858E;
  --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .18);
  --tally: #FF3548; --tally-soft: rgba(255, 53, 72, .16); --ok: #3DD68C; --warn: #F2B544;
  --shadow-float: 0 24px 64px -20px rgba(0, 0, 0, .9); --btn-ink: #000000;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #000000; --surface: #121316; --surface-2: #1C1D21;
    --ink: #F2F2F4; --ink-2: #A6A9B1; --ink-3: #80858E;
    --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .18);
    --tally: #FF3548; --tally-soft: rgba(255, 53, 72, .16); --ok: #3DD68C; --warn: #F2B544;
    --shadow-float: 0 24px 64px -20px rgba(0, 0, 0, .9); --btn-ink: #000000;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 400 15px/1.45 var(--f-ui);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
button, input { font: inherit; color: inherit; }

/* ---------- poster (left on desktop, top band on mobile) ---------- */
.poster {
  position: relative; overflow: hidden;
  background: var(--st-bg); color: var(--st-ink);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 40px 48px;
}
.poster svg.art { position: absolute; inset: 0; width: 100%; height: 100%; }
.poster .chip {
  position: relative; align-self: flex-start;
  font: 700 13px/1 var(--f-ui); letter-spacing: .01em;
  padding: 8px 12px; border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .28); color: var(--st-ink);
  display: inline-flex; align-items: center; gap: 8px;
}
.lamp { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }
body[data-live="1"] .lamp { background: var(--tally); opacity: 1; animation: pulse 1.2s var(--ease-out) infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px transparent; transform: scale(1.25); } }
.poster .wordmark {
  position: relative; margin: 0;
  font: 830 clamp(84px, 13vw, 176px)/.84 var(--f-disp);
  letter-spacing: -.01em; text-transform: uppercase;
  color: var(--st-ink);
}
.poster .tag { position: relative; margin: 12px 0 0; font: 600 20px/1.2 var(--f-ui); max-width: 22ch; opacity: .92; }

/* ---------- panel ---------- */
.panel {
  display: flex; align-items: center; justify-content: center;
  padding: 48px 32px;
}
.sheet { width: 100%; max-width: 400px; }
.sheet h1 {
  margin: 0 0 8px; font: 820 44px/.95 var(--f-disp); letter-spacing: -.005em;
}
.sheet .lede { margin: 0 0 32px; color: var(--ink-2); }

.field { display: block; margin: 0 0 16px; }
.field span { display: block; margin: 0 0 6px; font: 700 13px/1.2 var(--f-ui); color: var(--ink-2); }
.field small { display: block; margin: 6px 0 0; font: 500 12px/1.35 var(--f-ui); color: var(--ink-3); }
.field input {
  width: 100%; height: 48px; padding: 0 14px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-ctl);
  font-size: 17px; transition: border-color 120ms var(--ease-out);
}
.field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.field input.code { font: 780 30px/1 var(--f-disp); letter-spacing: .28em; text-align: center; font-variant-numeric: tabular-nums; }

.btn {
  width: 100%; height: 52px; margin: 8px 0 0; border: 0; cursor: pointer;
  border-radius: 18px; background: var(--ink); color: var(--btn-ink);
  font: 780 25px/1 var(--f-disp); letter-spacing: .01em;
  transition: transform 120ms var(--ease-out), opacity 120ms var(--ease-out);
}
.btn:active { transform: scale(.985); }
.btn[disabled] { opacity: .55; cursor: progress; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }

.msg { min-height: 20px; margin: 12px 0 0; font: 600 14px/1.4 var(--f-ui); color: var(--warn); }
.msg.ok { color: var(--ok); }

.divider {
  display: flex; align-items: center; gap: 12px; margin: 32px 0 20px;
  color: var(--ink-3); font: 700 13px/1.2 var(--f-ui);
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink); font: 700 14px/1.4 var(--f-ui); text-decoration: underline; text-underline-offset: 3px;
}
.hint { margin: 16px 0 0; color: var(--ink-3); font: 500 13px/1.45 var(--f-ui); }

.setup code {
  display: block; margin: 16px 0; padding: 14px 16px; overflow-x: auto;
  background: var(--surface-2); border-radius: var(--r-ctl);
  font: 600 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink);
}

/* state switch: data-state="login" | "setup" on <body> */
body[data-state="login"] .setup { display: none; }
body[data-state="setup"] .auth { display: none; }

@media (max-width: 820px) {
  body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .poster { min-height: 34vh; padding: 20px 16px 24px; }
  .poster .wordmark { font-size: clamp(72px, 26vw, 128px); }
  .poster .tag { font-size: 17px; }
  .panel { align-items: flex-start; padding: 28px 16px 40px; }
  .sheet h1 { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}