/*
 * Anthem Karaoke Guest — mobile-first stylesheet.
 *
 * Constraints:
 *   - Mobile-first: most pixels render on a 4-6" phone screen,
 *     held in portrait, sometimes one-handed. Tap targets >=48 px,
 *     vertical stacking, no horizontal scroll.
 *   - Dark theme: lower battery draw on AMOLED phones, easier on
 *     the eyes during a karaoke party (lights are usually low).
 *   - Tailwind / framework: NO. The whole stylesheet is ~150 lines
 *     and stays inline-readable, which matches the build-step-free
 *     stack decision in app.js.
 *   - Anthem orange (#ff8a00) is the brand accent — copied from
 *     the spike's primary button. Same hex used in the macOS app
 *     for visual continuity when scanning the host's QR.
 */

* { box-sizing: border-box; }

:root {
  --bg: #0a0a0a;
  --bg-elev-1: #111111;
  --bg-elev-2: #1a1a1a;
  --border: #2a2a2a;
  --text: #f0f0f0;
  --text-dim: #888888;
  --accent: #ff8a00;
  --accent-on: #000000;
  --success: #51d88a;
  --warning: #ffb84d;
  --danger: #ff6b6b;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* `min-height: 100dvh` (dynamic viewport height) accounts for
     the Safari URL bar: 100vh would let our root extend past the
     visible area when the bar is shown. */
  min-height: 100dvh;
}

main {
  max-width: 480px;
  margin: 0 auto;
  /* Use `env(safe-area-inset-*)` so the page respects iPhone's
     notch + Dynamic Island + home-indicator safe areas. The
     `viewport-fit=cover` meta tag in HTML enables them. */
  padding:
    calc(env(safe-area-inset-top, 0) + 16px)
    calc(env(safe-area-inset-right, 0) + 16px)
    calc(env(safe-area-inset-bottom, 0) + 16px)
    calc(env(safe-area-inset-left, 0) + 16px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- Header ---------- */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

h1 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--accent);
}

/* Status pill — compact, neutral, color-coded by state. */
.status {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-elev-2);
  color: var(--text-dim);
}
.status-idle       { background: var(--bg-elev-2); color: var(--text-dim); }
.status-connecting { background: #1c2d3d; color: #66c5ff; }
.status-connected  { background: #133a1a; color: var(--success); }
.status-error      { background: #3a1313; color: var(--danger); }

/* ---------- View switching ---------- */
/*
 * The body's data-view attribute determines which <section> is
 * visible. CSS-driven so the JS doesn't need to add/remove `hidden`
 * imperatively, and we get free transitions in a future iteration.
 */
.view { display: none; }
body[data-view="manual"] #view-manual { display: flex; flex-direction: column; gap: 12px; }
body[data-view="auto"]   #view-auto   { display: flex; flex-direction: column; gap: 16px; }
body[data-view="error"]  #view-error  { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }

/* ---------- Manual form ---------- */

.hint {
  font-size: 14px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.45;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

input[type="text"],
input[type="url"] {
  font-family: inherit;
  /* `font-size: 16px` is the magic number that prevents iOS Safari
     from auto-zooming when the user focuses an input. Don't drop
     it just because design wants smaller — auto-zoom is a worse
     UX problem than a few extra pixels. */
  font-size: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-elev-1);
  color: var(--text);
  width: 100%;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
input:focus {
  border-color: var(--accent);
  background: var(--bg-elev-2);
}

/* ---------- Buttons ---------- */

.btn {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  /* 48 px = WCAG touch-target minimum. The padding here yields
     ~52 px after the 16 px font; plenty of headroom. */
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-elev-1);
  color: var(--text);
  cursor: pointer;
  /* Disable iOS Safari's tap-highlight overlay. We provide our own
     :active state. */
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.05s;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:hover:not(:disabled) { background: var(--bg-elev-2); }

.btn-primary {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
}
.btn-primary:hover:not(:disabled) { background: #ffa733; }

.btn-secondary { /* default, but explicit class for readability */ }

/* The big mic toggle is the visual anchor of the auto view. */
.btn-mic {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 18px;
  padding: 22px 16px;
  border-radius: 16px;
  background: var(--bg-elev-1);
  border-color: var(--border);
}
.btn-mic.on {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
}
.btn-mic .mic-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  /* Pure-CSS microphone glyph — circle on a pill. Avoids shipping
     an SVG/PNG asset for the v1.0 first-cut. Replace with the
     Anthem brand mic icon when one exists. */
  background:
    radial-gradient(circle at 50% 35%, currentColor 4px, transparent 5px),
    linear-gradient(currentColor, currentColor) center 35% / 8px 14px no-repeat;
  border-radius: 4px;
  position: relative;
}

/* ---------- Auto view: video frame ---------- */
/*
 * Video container for the host's karaoke screen. Mobile-first:
 *   - Full-width container, max viewport width
 *   - 16:9 aspect-ratio enforced via the `aspect-ratio` property
 *     (instead of the historical padding-bottom hack — supported on
 *     iOS Safari 15+ and we're targeting 16+ already)
 *   - Black background fills letterbox bars when the host's display
 *     happens to be 4:3 or unusual
 *   - Rounded corners + subtle border consistent with the rest of
 *     the dark theme
 *
 * The `[hidden]` attribute on `.video-frame` collapses it to zero
 * height when no video track is subscribed, so the layout doesn't
 * reserve empty space.
 */
.video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.video-frame[hidden] { display: none; }
.video-frame video {
  width: 100%;
  height: 100%;
  /* `object-fit: contain` letterboxes content rather than cropping.
     Karaoke screens carry essential information (lyrics) in the
     full frame — we'd rather show black bars than crop a word. */
  object-fit: contain;
  display: block;
}

/* Lyric overlay (Phase 3 polish #5).
 *
 * Positioned absolutely over the bottom third of the video frame.
 * Hidden by default; `.visible` class fades it in when a cue
 * lands. Two-line gradient backdrop ensures contrast against
 * any video content (white-on-white karaoke screens, dark
 * concert-style backgrounds, anything in between).
 *
 * Font sizing: 24 px on phones (320–480 px wide), scales up via
 * a clamp() so larger devices get bigger text without overflowing
 * narrow ones. `text-wrap: balance` (CSS Text 4) splits long
 * lyric phrases across lines naturally — falls back gracefully
 * on browsers without support.
 */
.lyric-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px 16px 16px;
  /* Bottom-up gradient mask. Stronger at the lyric line, fading
     to fully transparent above. Lets the karaoke-rendered video
     remain readable above the overlay even when the cue text
     is showing. */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0) 100%
  );
  color: #ffffff;
  font-size: clamp(20px, 4vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  letter-spacing: 0.01em;
  /* Subtle text shadow so single-color background frames don't
     wash out the cue. */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  /* Hidden state: zero opacity + slight downward translation so
     fade-in carries vertical motion. iOS Safari respects
     prefers-reduced-motion to skip the translate. */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.lyric-overlay.visible {
  opacity: 1;
  transform: translateY(0);
}
.lyric-overlay:empty {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .lyric-overlay {
    transition: opacity 100ms linear;
    transform: none;
  }
  .lyric-overlay.visible {
    transform: none;
  }
}

/* ---------- Auto view: room card ---------- */

.room-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding: 16px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.room-card-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.room-card-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
  /* `tabular-nums` keeps short codes from shifting when partially
     entered (defensive — we're showing committed values here). */
  font-variant-numeric: tabular-nums;
}

/* ---------- Auto view: participants ---------- */

.participants {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.participants h2 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
#participantsList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#participantsList li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
#participantsList li.empty {
  color: var(--text-dim);
  font-style: italic;
}
.participant-name { color: var(--text); }
.participant-label {
  font-size: 12px;
  color: var(--text-dim);
}

/* ---------- Error view ---------- */

#view-error h2 {
  margin: 0;
  font-size: 18px;
  color: var(--danger);
}
.error-message {
  font-size: 15px;
  color: var(--text);
  line-height: 1.45;
  margin: 0;
}

/* ---------- Diagnostics ---------- */

.diagnostics {
  margin-top: auto;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
}
.diagnostics summary {
  cursor: pointer;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.diagnostics summary:hover { color: var(--text); }
#log {
  margin: 8px 0 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  line-height: 1.4;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  color: var(--text-dim);
}
.log-line { margin: 0; }
.log-line.error    { color: var(--danger); }
.log-line.success  { color: var(--success); }
.log-line.info     { color: #66c5ff; }

/* ---------- Reduce motion preference ---------- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .btn:active { transform: none; }
}