/* Live — the radio's front door. Loaded after /screen/screen.css: below the bar this page
   IS the venue screen, so nothing here restyles that view. It adds the bar, and it lets
   the big-display layout survive a phone. */

/* ─── the bar ──────────────────────────────────────────────────────────────── */

.live-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8vh 1.6vw;
  padding: 1vh 1.2vw;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  background: rgba(10, 12, 17, 0.55);
  user-select: none;
  -webkit-user-select: none;
}

/* On air is the one thing here that should be readable from across a room. Red only
   while something is actually playing; off air is a grey dot, not a dimmer red — a dim
   red light still says "live". */
.live-onair {
  display: flex; align-items: center; gap: 0.6em;
  font-size: clamp(13px, 1vw, 26px);
  font-weight: 700;
  color: var(--fg-faint);
}
html[lang="en"] .live-onair { letter-spacing: 0.14em; text-transform: uppercase; }
.live-dot {
  width: 0.7em; height: 0.7em; border-radius: 50%;
  background: var(--fg-faint);
}
.live-onair[data-state="on"] { color: var(--fg); }
.live-onair[data-state="on"] .live-dot {
  background: var(--danger);
  box-shadow: 0 0 0.9em rgba(227, 86, 74, 0.7);
  animation: live-pulse 1.8s ease-in-out infinite;
}
@keyframes live-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .live-onair .live-dot { animation: none; } }

.live-listeners {
  font-size: clamp(13px, 1vw, 26px);
  color: var(--fg-muted);
  padding-inline-start: 1.2vw;
  border-inline-start: 1px solid var(--panel-line);
}
.live-listeners[hidden] { display: none; }

/* The clock takes the slack, so it sits in the middle of the bar in both directions.
   tabular-nums, or the whole readout shivers every tenth of a second as digit widths
   change under it. */
.live-clock {
  flex: 1 1 auto;
  display: flex; align-items: baseline; justify-content: center; gap: 1.1vw;
  color: var(--fg-muted);
  font-size: clamp(13px, 1vw, 26px);
  white-space: nowrap;
}
.live-date { font-family: var(--font); }
.live-time {
  color: var(--fg);
  font-size: 1.35em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.live-tenth { color: var(--accent); }

.live-actions { display: flex; align-items: center; gap: 0.9vw; }

.live-note {
  font-size: clamp(11px, 0.8vw, 20px);
  color: var(--fg-faint);
  max-width: 34ch;
  text-align: end;
}
.live-note[hidden] { display: none; }
.live-note.is-error { color: var(--danger); }

.live-listen {
  font: inherit;
  font-size: clamp(14px, 1.05vw, 28px);
  font-weight: 700;
  padding: 0.55em 1.5em;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #1a1204;
  cursor: pointer;
  white-space: nowrap;
}
.live-listen:hover { filter: brightness(1.06); }
.live-listen:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
/* While listening the button is the way out, so it steps back: a ghost, not a call. */
.live-listen.is-on { background: transparent; color: var(--accent); }
/* No signal (server/public.mjs): still visibly the station's button, just not live. */
.live-listen:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }

.live-lang-toggle {
  font-size: clamp(12px, 0.9vw, 22px);
  padding: 0.5em 1.1em;
  border-radius: 999px;
  cursor: pointer;
}

/* ─── what the front door leaves out ───────────────────────────────────────────
   The side column is the room's business: "next in line" names the guests waiting to
   sing, and the signup QR asks a stranger to scan a code for a party they may be nowhere
   near. Hidden, not removed — /screen/app.js renders into #queue-list, #qr-small and the
   rest, and needs them to exist (scripts/test-live.mjs pins that). The stage gives the
   freed track to the song instead of leaving a hole where the column was. */
body.live .side { display: none; }
body.live .stage { grid-template-columns: minmax(0, 1fr); }

/* ─── phones ───────────────────────────────────────────────────────────────────
   The venue screen is drawn for a projector: a fixed viewport, vw-sized type, two
   columns. The front door is mostly opened on a phone held upright, where that layout
   leaves the lyrics a few lines tall beside a queue nobody can read. One column, and the
   page may scroll. */
@media (max-width: 900px), (orientation: portrait) {
  html, body { height: auto; min-height: 100%; overflow: auto; }
  body.live { gap: 14px; padding: 14px; }
  .live-bar { border-radius: 18px; padding: 10px 14px; gap: 8px 14px; }
  .live-clock { order: 5; flex-basis: 100%; justify-content: space-between; font-size: 14px; }
  .live-note { order: 6; flex-basis: 100%; max-width: none; text-align: start; font-size: 12px; }
  .live-actions { display: contents; }
  .live-listen { margin-inline-start: auto; font-size: 15px; }
  .live-lang-toggle { font-size: 13px; }
  .live-onair, .live-listeners { font-size: 14px; }
  body.live .stage { display: flex; flex-direction: column; gap: 14px; }
  body.live .performance { min-height: 72vh; }
  body.live .standby { min-height: 60vh; }
}

/* ─── immersive view (immersive.js) ─────────────────────────────────────── */
.live-immersive-btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  background: transparent; color: var(--fg); border: 1px solid var(--panel-line, #ffffff33);
  border-radius: 999px; padding: 0.45em 0.95em; font: inherit; font-size: clamp(13px, 0.9vw, 20px); cursor: pointer;
}
.live-immersive-btn:hover { border-color: var(--fg-muted, #fff9); }
.live-immersive-btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.live-immersive-btn[aria-pressed="true"] { background: var(--fg); color: var(--bg, #000); }
.live-immersive-icon { width: 30px; height: 18px; display: block; }
.live-immersive {
  position: fixed; inset: 0; z-index: 100; background: #000; overflow: hidden;
}
.live-immersive[hidden] { display: none; }
.live-immersive canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.live-immersive-bar {
  position: absolute; inset-inline: 0; top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px; background: linear-gradient(#000c, #0000);
  opacity: 0; transition: opacity .3s;
}
.live-immersive.ui .live-immersive-bar { opacity: 1; }
.live-immersive-bar button {
  background: #ffffff1a; color: #fff; border: 1px solid #ffffff44; border-radius: 999px;
  padding: 8px 14px; font: inherit; font-size: 15px; cursor: pointer;
}
.live-immersive-bar button[aria-pressed="true"] { background: #fff; color: #000; }
.live-immersive-modes { display: flex; flex-wrap: wrap; gap: 8px; }
.live-immersive-spacer { flex: 1; }
.live-immersive-title {
  position: absolute; inset-inline: 0; bottom: 8vh; text-align: center; color: #fff; font-size: 4vh; font-weight: 600;
  text-shadow: 0 0 18px #000, 0 0 40px #000; letter-spacing: .02em; opacity: .9; pointer-events: none;
}
.live-immersive-title[hidden] { display: none; }
.live-immersive:not(.ui) { cursor: none; }
html.immersive-open { overflow: hidden; }
@media (max-width: 720px) {
  .live-immersive-bar button { padding: 6px 10px; font-size: 13px; }
  .live-immersive-btn span { display: none; }
  .live-immersive-btn { padding: 0.45em 0.6em; }
}

/* ─── shout-out link ────────────────────────────────────────────────────── */
.live-shout-btn {
  display: inline-flex; align-items: center; background: transparent; color: var(--fg);
  border: 1px solid var(--panel-line, #ffffff33); border-radius: 999px; padding: 0.45em 0.95em;
  font-size: clamp(13px, 0.9vw, 20px); text-decoration: none; white-space: nowrap;
}
.live-shout-btn[hidden] { display: none; }
.live-shout-btn:hover { border-color: var(--fg-muted, #fff9); }
.live-shout-btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

/* The public door (server/public.mjs stamps <html data-signal="none|radio">): there is no
   event behind the page, so nothing may invite a visitor to scan a code or request a
   song -- the standby column drops the call, the QR and the guest URL. */
[data-signal] .standby-call,
[data-signal] #qr-large,
[data-signal] #signup-url-lg,
[data-signal] .signup-panel { display: none; }
/* On the radio the standby column is the now-playing card. */
[data-signal="radio"] .standby-name { unicode-bidi: plaintext; }
[data-signal="radio"] .standby-artist { margin-top: 0.4em; color: var(--fg-muted); font-size: 0.5em; }