/* MPlay Viewer: Real America's Voice design system (see design/HANDOFF.md).
   Mobile first; the desktop layout starts at 900px. */

@font-face {
  font-family: "ITC Avant Garde Gothic";
  src: url("fonts/ITCAvantGardeGothic-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0c0a18;
  --panel: #14112c;
  --hairline: rgba(255,255,255,.08);
  --line: rgba(255,255,255,.12);
  --text: #ffffff;
  --text-2: #b8b5c6;
  --muted: #8b879e;
  --disabled: #55516a;
  --navy: #1d145a;
  --navy-2: #2a1e85;
  --navy-deep: #110a3a;
  --red: #c30000;
  --red-text: #ff6b6b;
  --royal: #0d3c85;
  --royal-bright: #1c4fb0;
  --steel: #b3c3db;
  --success: #1f9d55;
  --warning: #e08a00;

  --grad-navy: linear-gradient(180deg, #2a1e85, #110a3a);
  --grad-red: linear-gradient(180deg, #d8201f, #a50000);
  --grad-royal: linear-gradient(180deg, #1c4fb0, #0d3c85);
  --focus: 0 0 0 3px rgba(28,79,176,.30);
  --ease: 120ms cubic-bezier(.4,0,.2,1);

  --font-display: "ITC Avant Garde Gothic", "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, sans-serif;
  --font-narrow: "Archivo Narrow", "Archivo", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.4 var(--font-body); -webkit-text-size-adjust: 100%; }
body { padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); min-height: 100dvh; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }

.desk { display: none; }
.eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---------- logo mark ---------- */
.mark { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 2px; background: var(--grad-royal);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  font: 700 19px/1 var(--font-display); color: #fff; }
.mark.big { width: 56px; height: 56px; font-size: 38px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 6px 20px rgba(0,0,0,.35); }

/* ---------- header ---------- */
.bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px;
  height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0 16px;
  background: var(--grad-navy); border-bottom: 3px solid var(--red); }
.wordmark { font: 700 18px/1 var(--font-display); letter-spacing: .01em; }
.bar-spacer { flex: 1; }
.bar-divider { width: 1px; height: 22px; background: rgba(255,255,255,.2); }
.bar-title { font: 600 12px/1 var(--font-narrow); letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.room-chip { font-size: 12px; font-weight: 600; color: var(--steel); background: rgba(255,255,255,.08); padding: 5px 10px; border-radius: 4px; }

.session { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 6px;
  background: rgba(0,0,0,.25); border: 1px solid var(--line); }
.session .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.session.warn .dot { background: var(--warning); }
.session-lbl { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
#sessionLeft { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }

.hbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  width: 44px; height: 44px; padding: 0; border-radius: 6px; border: 0; background: transparent; color: #fff;
  transition: filter var(--ease), transform var(--ease); }
.hbtn svg { width: 20px; height: 20px; }
.hbtn.danger { width: 40px; height: 40px; background: var(--grad-red); }
.hbtn:hover { filter: brightness(1.08); }
.hbtn:active { transform: translateY(1px); }
.signout { display: none; align-items: center; gap: 6px; color: var(--steel); text-decoration: none; font-size: 13px; font-weight: 600; }

/* ---------- clocks ---------- */
.clocks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px 0; }
.clock { display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 10px 12px 11px; background: var(--panel); border: 1px solid var(--hairline);
  border-top: 3px solid var(--warning); border-radius: 6px; transition: border-color var(--ease); }
.clock.event { border-top-color: var(--royal-bright); }
.clock:has(.clock-value.soon) { border-top-color: var(--warning); }
.clock:has(.clock-value.now) { border-top-color: var(--red-text); }
/* Mobile order: label, value, sub-line. */
.clock-text { display: contents; }
.clock .eyebrow { order: 1; }
.clock-value { order: 2; font: 700 34px/1.05 var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.clock-sub { order: 3; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clock-value.soon { color: var(--warning); }
.clock-value.now { color: var(--red-text); }
.clocks.stale .clock-value { opacity: .5; }

/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 14px 16px; }
@media (orientation: landscape) and (min-width: 700px) { .tiles { grid-template-columns: 1fr 1fr; } }
.tile { position: relative; min-width: 0; background: var(--panel); border: 1px solid var(--hairline); border-radius: 6px; }
.tile.menu-open { z-index: 30; }

.tile-head { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; }
.tile-name { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile:not(.live) .tile-name { color: var(--muted); font-weight: 600; }
.live-badge { display: none; align-items: center; gap: 6px; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; }
.live-badge i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.2s ease-in-out infinite; }
.tile.live .live-badge { display: inline-flex; }
@keyframes pulse { 50% { opacity: .25; } }

.video-wrap { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-wrap video { width: 100%; height: 100%; object-fit: contain; display: block; }
.video-wrap:fullscreen, .video-wrap:-webkit-full-screen { aspect-ratio: auto; width: 100%; height: 100%; }
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 12px; text-align: center; pointer-events: none; color: var(--muted); }
.overlay svg { width: 32px; height: 32px; stroke-width: 1.6; margin-bottom: 4px; }
.overlay-msg { font-weight: 600; font-size: 15px; }
.overlay-hint { font-size: 13px; color: var(--disabled); }
.tile:not(.empty) .overlay-hint, .tile:not(.empty) .overlay svg { display: none; }
.tile.live .overlay { display: none; }
.fsbtn { position: absolute; right: 8px; bottom: 8px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: rgba(12,10,24,.7); color: #fff; }
.fsbtn svg { width: 18px; height: 18px; stroke-width: 2.2; }

.controls { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "dd stop" "segs segs"; gap: 8px; padding: 10px; }
.controls .dd { grid-area: dd; }
.controls .stop { grid-area: stop; }
.stop { grid-area: stop; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px;
  background: transparent; border: 1px solid rgba(230,59,59,.6); border-radius: 6px; color: var(--red-text);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: background var(--ease); }
.stop b { width: 12px; height: 12px; background: currentColor; border-radius: 1px; }
.stop:hover:not(:disabled) { background: rgba(195,0,0,.15); }
.stop:disabled { border-color: var(--line); color: var(--disabled); cursor: default; }

.tapsound { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); padding: 12px 20px; border: 0; border-radius: 6px;
  background: var(--grad-red); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

.signout-bottom { display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; margin: 0 16px 16px;
  color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600; }

/* ---------- gate & login ---------- */
.gate { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
  background: radial-gradient(120% 80% at 50% 0%, #2a1e85 0%, #110a3a 55%, #0c0a18 100%); overflow: auto; }
.gate-col { display: flex; flex-direction: column; gap: 28px; width: 100%; max-width: 380px; }
.lockup { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.lockup h1 { margin: 0; font: 700 34px/1.02 var(--font-display); letter-spacing: .01em; }
.lockup-sub { margin-top: 10px; font: 600 11px/1 var(--font-narrow); letter-spacing: .22em; text-transform: uppercase; color: var(--steel); }
.gate-card { display: flex; flex-direction: column; gap: 16px; padding: 22px; background: rgba(12,10,24,.6);
  border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: 6px; }
.gate-card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.gate-card p b { color: #fff; }
.field-label { display: block; margin-bottom: -8px; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field { width: 100%; height: 50px; padding: 0 14px; background: var(--bg); border: 1px solid rgba(255,255,255,.16); border-radius: 6px;
  font-size: 17px; transition: border-color var(--ease), box-shadow var(--ease); }
.field:focus { outline: none; border-color: var(--royal-bright); box-shadow: var(--focus); }
.primary { width: 100%; padding: 16px 34px; border: 0; border-radius: 6px; background: var(--grad-red); color: #fff;
  font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 2px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18); transition: filter var(--ease), transform var(--ease); }
.primary:hover { filter: brightness(1.08); }
.primary:active { transform: translateY(1px); }
.primary:disabled { filter: grayscale(.6) brightness(.8); cursor: default; }

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  .desk { display: initial; }
  .mob { display: none !important; }
  .eyebrow { font-size: 11px; }

  .bar { height: 64px; padding: 0 24px; gap: 16px; }
  .mark { width: 30px; height: 30px; font-size: 20px; }
  .wordmark { font-size: 20px; }
  .session { height: auto; padding: 7px 12px; }
  .hbtn { width: auto; height: 36px; padding: 0 14px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08);
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .hbtn svg { width: 16px; height: 16px; }
  .hbtn.danger { width: auto; height: 36px; border: 0; background: var(--grad-red); }
  .signout { display: inline-flex; }

  .clocks { gap: 20px; padding: 24px 24px 0; }
  .clock { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; }
  .clock-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .clock-sub { font-size: 13px; }
  .clock-value { font-size: 56px; line-height: 1; }

  .tiles { grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px 24px 24px; }
  .tile-head { height: 44px; padding: 0 14px; border-bottom: 1px solid var(--hairline); }
  .fsbtn { width: 36px; height: 36px; right: 10px; bottom: 10px; }
  .controls { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
  .segs { display: flex; height: 44px; flex: none; }
  .seg { width: 52px; }
  .seg[data-v="all"] { width: 46px; }
  .seg[data-v="off"] { width: 42px; }
  .seg.aux i { width: 34px; }

  .gate { background: radial-gradient(90% 90% at 50% 0%, #2a1e85 0%, #110a3a 50%, #0c0a18 100%); }
  .gate-col { max-width: 420px; gap: 32px; }
  .lockup { flex-direction: row; align-items: center; gap: 16px; text-align: left; }
  .lockup .mark.big { width: 52px; height: 52px; font-size: 35px; }
  .lockup h1 { font-size: 30px; }
  .lockup-sub { margin-top: 8px; }
  .gate-card { padding: 28px; gap: 18px; }
}

/* Info link (header) and technical-overview link (Start screen) */
a.hbtn { text-decoration: none; }
.gate-link { align-self: center; color: var(--steel); font-size: 13px; font-weight: 600; text-decoration: none; }
.gate-link:hover { text-decoration: underline; }

/* Per-stream connection stats (diagnosis) */
.statsbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); flex: none; }
.statsbtn[aria-pressed="true"] { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
.stats { position: absolute; left: 8px; top: 8px; z-index: 2; margin: 0; padding: 8px 10px; max-width: calc(100% - 16px);
  background: rgba(12,10,24,.82); border: 1px solid var(--line); border-radius: 6px; color: #e6e4ef;
  font: 11.5px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; pointer-events: none; }
.stats .bad { color: var(--red-text); }
.stats .warn { color: var(--warning); }

/* Viewer count on the Start screen */
.gate-count { align-self: center; font-size: 13px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.gate-count:empty { display: none; }
.gate-count.full { color: var(--red-text); }

/* ---------- panel order: Program on top on phones; Audio return left on desktop ---------- */
.tile[data-tile="1"] { order: -1; }
@media (orientation: landscape) and (min-width: 700px) { .tile[data-tile="1"] { order: 0; } }
@media (min-width: 900px) { .tile[data-tile="1"] { order: 0; } }
.tile-head { border-radius: 6px 6px 0 0; }
.video-wrap { overflow: hidden; }

/* ---------- stream dropdown ---------- */
.dd { position: relative; flex: 1; min-width: 0; }
.dd-btn { display: flex; align-items: center; gap: 8px; width: 100%; height: 44px; padding: 0 12px; text-align: left;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px; font-weight: 600; font-size: 15px;
  transition: border-color var(--ease), box-shadow var(--ease); }
.dd-btn:focus-visible, .dd-btn[aria-expanded="true"] { outline: none; border-color: var(--royal-bright); box-shadow: var(--focus); }
.dd-btn:disabled { color: var(--muted); cursor: default; }
.dd-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-label b { color: var(--red-text); font-weight: 800; }
.dd-btn svg { color: var(--muted); }

.dd-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 40; max-height: min(62vh, 520px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px; box-shadow: 0 18px 48px -12px rgba(0,0,0,.6);
  overscroll-behavior: contain; }
.dd-section { padding: 10px 8px 6px; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dd-section.red { color: var(--red-text); }
.dd-empty { padding: 8px; color: var(--muted); font-size: 13px; }

.dd-room { border-left: 3px solid var(--red); border-radius: 4px; margin: 2px 0 4px; background: rgba(195,0,0,.08); }
.dd-room-btn { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name chev" "sub chev"; align-items: center; width: 100%;
  padding: 9px 10px; border: 0; background: transparent; text-align: left; border-radius: 0 4px 4px 0; }
.dd-room-btn:hover:not(:disabled) { background: rgba(195,0,0,.14); }
.dd-room-name { grid-area: name; font-weight: 800; font-size: 15px; color: var(--red-text); }
.dd-room-sub { grid-area: sub; font-size: 12px; color: var(--text-2); }
.dd-room-btn svg { grid-area: chev; color: var(--red-text); transition: transform var(--ease); }
.dd-room.open .dd-room-btn svg { transform: rotate(180deg); }
.dd-room.current .dd-room-name::after { content: " ●"; font-size: 10px; vertical-align: middle; }
.dd-room.offline { border-left-color: var(--disabled); background: transparent; }
.dd-room.offline .dd-room-name, .dd-room.offline .dd-room-sub, .dd-room.offline svg { color: var(--disabled); }
.dd-room.offline .dd-room-btn { cursor: default; }

.dd-auxes { display: none; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 8px 10px 10px; }
.dd-room.open .dd-auxes { display: grid; }
.dd-aux { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 4px 8px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg); font-size: 13px; font-weight: 700; }
.dd-aux:hover { border-color: var(--royal-bright); }
.dd-aux.selected { background: var(--navy-2); border-color: var(--navy-2); }
.dd-aux i { position: relative; width: 70%; height: 3px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.dd-aux i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--lvl, 0%); background: var(--success); transition: width .15s; }

.dd-item { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 4px; background: transparent; text-align: left;
  font-size: 14px; font-weight: 500; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.dd-item.current { background: var(--navy-2); color: #fff; font-weight: 700; }

.dd-backdrop { display: none; }
/* Phones: the list opens as a sheet from the bottom of the screen. */
@media (max-width: 899px) {
  .dd-menu { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); top: auto; max-height: 72dvh; z-index: 60;
    border-radius: 12px; padding: 8px 8px 12px; }
  .dd-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(5,6,8,.55); }
  .tile.menu-open { z-index: auto; }
  .dd-room-btn { padding: 12px 10px; }
  .dd-aux { padding: 12px 4px 10px; font-size: 14px; }
  .dd-item { padding: 12px 10px; font-size: 15px; }
}
@media (min-width: 900px) {
  .dd-menu { bottom: auto; top: calc(100% + 6px); }
}

/* ---------- Aux control (per panel) ---------- */
.segs { grid-area: segs; display: grid; grid-template-columns: .8fr 1fr 1fr 1fr 1fr .8fr; gap: 2px; height: 46px; padding: 3px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.segs.disabled { opacity: .4; }
.seg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 0;
  border: 0; border-radius: 4px; background: transparent; color: var(--text-2); font-size: 12px; font-weight: 600;
  transition: background var(--ease), color var(--ease); }
.seg:disabled { cursor: default; }
.seg.selected { background: var(--navy-2); color: #fff; font-weight: 700; }
.seg[data-v="off"].selected { background: rgba(255,255,255,.1); }
.seg.aux i { position: relative; width: 70%; height: 3px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.seg.aux i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--lvl, 0%); background: var(--success); transition: width .15s; }
.seg.aux.unheard:not(.absent) { color: var(--muted); }
.seg.absent { color: var(--disabled); }
.seg.absent i { background: rgba(255,255,255,.06); }
@media (min-width: 900px) {
  .segs { display: flex; height: 44px; flex: none; }
  .seg { width: 52px; }
  .seg[data-v="all"] { width: 46px; }
  .seg[data-v="off"] { width: 42px; }
  .seg.aux i { width: 34px; }
}

/* Viewer name on the Start screen */
.name-hint { margin-top: -8px; font-size: 12px; color: var(--muted); }
.name-hint b { color: var(--text-2); font-weight: 700; }
.name-hint.error { color: var(--red-text); }
.field.invalid { border-color: rgba(230,59,59,.8); }

/* Video on/off (audio only) per panel */
.videobtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; min-width: 32px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); flex: none; font-size: 12px; font-weight: 700; }
.videobtn .v-off { display: none; }
.videobtn[aria-pressed="true"] { background: rgba(224,138,0,.15); border-color: rgba(224,138,0,.6); color: var(--warning); }
.videobtn[aria-pressed="true"] .v-on { display: none; }
.videobtn[aria-pressed="true"] .v-off { display: block; }
.tile.audio-only .video-wrap { aspect-ratio: 32 / 9; }
.tile.audio-only.live .overlay { display: flex; color: var(--text-2); }
.tile.audio-only .fsbtn { display: none; }

/* "Reconnecting…" strip under the header */
.signal-notice { margin: 10px 16px 0; padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: 600;
  background: rgba(224,138,0,.12); border: 1px solid rgba(224,138,0,.45); color: var(--warning); }
@media (min-width: 900px) { .signal-notice { margin: 16px 24px 0; } }

/* "Site updated" strip */
.update-notice { display: block; width: calc(100% - 32px); margin: 10px 16px 0; padding: 9px 12px; border-radius: 6px; text-align: left;
  font-size: 13px; font-weight: 700; background: rgba(28,79,176,.18); border: 1px solid rgba(28,79,176,.6); color: #cfe0ff; }
@media (min-width: 900px) { .update-notice { width: calc(100% - 48px); margin: 16px 24px 0; } }
.update-notice[hidden] { display: none; }

/* ---------- mode picker (start screen) ---------- */
.mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; text-align: left;
  background: var(--bg); border: 1px solid rgba(255,255,255,.16); border-radius: 6px; color: var(--text-2); font: inherit; cursor: pointer; }
.mode-btn b { font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.mode-btn span { font-size: 12px; line-height: 1.3; }
.mode-btn[aria-checked="true"] { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); background: rgba(195,0,0,.12); }

/* ---------- Live mode ---------- */
.live-card { position: relative; min-width: 0; background: var(--panel); border: 1px solid var(--hairline); border-top: 3px solid var(--line); border-radius: 6px; }
.live-card.on-air { border-top-color: var(--red); }
.air-badge { display: none; align-items: center; gap: 6px; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; }
.air-badge i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.2s ease-in-out infinite; }
.live-card.on-air .air-badge { display: inline-flex; }
.live-card .tile-name { color: #fff; }
.live-preview-wrap video { transform: scaleX(-1); object-fit: cover; }
.live-meter { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.15); overflow: hidden; }
.live-meter i { display: block; height: 100%; width: 0; background: #6fdc9f; transition: width 120ms linear; }
.live-controls { display: flex; flex-direction: column; gap: 8px; }
.live-status { font-size: 13px; color: var(--text-2); min-height: 18px; }
.live-card.on-air .live-status { color: #fff; font-weight: 700; }
.live-row { display: flex; gap: 8px; }
.live-row > * { flex: 1; min-width: 0; }
.live-select { height: 40px; font-size: 14px; padding: 0 10px; color: var(--text); }
.live-mic { height: 44px; border-radius: 6px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #fff;
  font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.live-mic.muted { border-color: var(--warning); color: var(--warning); background: rgba(224,138,0,.12); }
.live-go { height: 44px; margin: 0; }
.live-go.stopping { background: transparent; border: 1px solid rgba(230,59,59,.6); color: var(--red-text); }
.live-go:disabled { filter: grayscale(.7) brightness(.7); }

/* Program large, the return as sound only, and the camera card. */
.live-mode .tile[data-tile="1"] { order: -2; }
.live-mode .tile[data-tile="0"] { order: 0; }
.live-mode .live-card { order: -1; }
.live-mode .tile[data-tile="0"] .videobtn { display: none; }
.live-mode .tile[data-tile="0"] .video-wrap { aspect-ratio: auto; height: 56px; }
.live-mode .tile[data-tile="0"] .overlay svg, .live-mode .tile[data-tile="0"] .overlay-hint { display: none; }
@media (orientation: landscape) and (min-width: 700px) {
  .live-mode .tiles { grid-template-columns: 2fr 1fr; grid-template-areas: "prog cam" "ret cam"; align-items: start; }
  .live-mode .tile[data-tile="1"] { grid-area: prog; }
  .live-mode .tile[data-tile="0"] { grid-area: ret; }
  .live-mode .live-card { grid-area: cam; }
}
@media (min-width: 900px) {
  .live-mode .tiles { grid-template-columns: 2fr 1fr; grid-template-areas: "prog cam" "ret cam"; align-items: start; }
  .live-mode .tile[data-tile="1"] { grid-area: prog; }
  .live-mode .tile[data-tile="0"] { grid-area: ret; }
  .live-mode .live-card { grid-area: cam; }
}
.live-card .live-controls { align-items: stretch; text-align: left; }
.live-row { width: 100%; }
.live-go, .live-mic { white-space: nowrap; padding: 0 12px; display: flex; align-items: center; justify-content: center; }
.control-notice { background: rgba(58,91,255,.14); border-color: rgba(120,150,255,.5); color: #c9d4ff; }
@media (min-width: 900px) { .control-notice { margin: 16px 24px 0; } }

/* Live on a phone held upright: ask for landscape (the station's picture is 16:9). */
.rotate-hint { display: none; align-items: center; gap: 10px; margin: 0 10px 10px; padding: 10px 12px; border-radius: 6px;
  background: rgba(224,138,0,.14); border: 1px solid rgba(224,138,0,.5); color: var(--warning); font-size: 14px; font-weight: 700; line-height: 1.3; }
.rotate-hint svg { flex: none; width: 28px; height: 28px; stroke-width: 2; animation: tilt 1.6s ease-in-out infinite; }
@keyframes tilt { 50% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 899px) { .live-mode .rotate-hint { display: flex; } }
/* Phone buttons: keep "Stop sending" inside its box. */
@media (max-width: 899px) {
  .live-go, .live-mic { font-size: 13px; letter-spacing: .02em; padding: 0 8px; }
  .live-row .live-go { flex: 1.4; }
}

/* Sound output (both modes) and the Live mic picker */
.output-bar { display: flex; align-items: center; gap: 10px; margin: 10px 16px 0; padding: 8px 12px; border-radius: 6px;
  background: var(--panel); border: 1px solid var(--hairline); font-size: 13px; color: var(--text-2); }
.output-bar svg { flex: none; width: 18px; height: 18px; stroke-width: 2; color: var(--muted); }
.output-pick { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; white-space: nowrap; }
.output-pick select { flex: 1; min-width: 0; max-width: 420px; height: 34px; }
.output-hint { line-height: 1.35; }
@media (min-width: 900px) { .output-bar { margin: 16px 24px 0; } }
.live-mic-row { align-items: center; }
.live-mic-row .live-mic-lbl { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.live-mic-row select { flex: 1; }