/* ============================================================
   listen.openshack.com — public listen-in web client
   Mobile-first, adaptive light/dark. No framework.
   Visual reference: web-listen-page-mockup.html (approved).
   ============================================================ */

:root {
  --bg:#f3f3ee; --surface:#ffffff; --border:rgba(0,0,0,0.12);
  --text:#1a1a18; --text2:#5f5e5a; --text3:#8a8980;
  --info-bg:#e6f1fb; --info-tx:#0c447c; --info-bd:#378add;
  --ok-bg:#e1f5ee; --ok-tx:#0f6e56;
  --tx-bg:#fcebeb; --tx-tx:#a32d2d; --tx-dot:#e24b4a;
  --warn-bg:#fdf3e3; --warn-tx:#8a5a16;
  --mono:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#16161a; --surface:#1f1f24; --border:rgba(255,255,255,0.14);
    --text:#ececec; --text2:#a8a8a2; --text3:#7a7a74;
    --info-bg:#0c447c; --info-tx:#cfe3fb; --info-bd:#378add;
    --ok-bg:#085041; --ok-tx:#9fe1cb;
    --tx-bg:#791f1f; --tx-tx:#f7c1c1; --tx-dot:#e24b4a;
    --warn-bg:#4a3711; --warn-tx:#f0d49a;
  }
}

* { box-sizing:border-box; }

html, body { height:100%; }

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  display:flex;
  min-height:100vh;
  min-height:100dvh;
  align-items:center;
  justify-content:center;
  padding:24px;
  padding:max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
          max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  -webkit-font-smoothing:antialiased;
}

/* ---- Card / phone frame ---- */
.phone {
  position:relative;
  width:100%;
  max-width:360px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:22px;
  padding:20px 18px;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-height:480px;
  box-shadow:0 10px 40px rgba(0,0,0,0.06);
}

.row { display:flex; align-items:center; justify-content:space-between; }

/* ---- Top bar ---- */
.top-row { min-height:24px; }
.top-meta { display:flex; align-items:center; gap:12px; flex:none; }

/* ---- Host / client identity (compact: label + callsign, never a headline) ---- */
.ids { display:flex; flex-direction:column; gap:1px; min-width:0; }
.id-line { display:flex; align-items:baseline; gap:7px; }
/* The explicit display above overrides the UA [hidden]{display:none} rule, so a
   hidden line would otherwise still show as an empty "HOST"/"CLIENT" label. */
.id-line[hidden] { display:none; }
.id-label {
  font-size:10px; text-transform:uppercase; letter-spacing:.7px;
  color:var(--text3); min-width:34px; flex:none;
}
.id-call { font-weight:600; letter-spacing:.3px; word-break:break-word; }
.ids-entry { align-items:center; gap:4px; margin:2px 0 12px; }
.ids-entry .id-call { font-size:17px; }

.live-badge { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text2); }
.listeners { display:flex; align-items:center; gap:5px; color:var(--text3); font-size:12px; }

.dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--tx-dot); display:inline-block;
  animation:pulse 1.4s infinite;
}

/* ---- Center column ---- */
.center {
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
}

.freq-block { text-align:center; }
.freq {
  font-family:var(--mono);
  font-size:36px;
  font-weight:600;
  text-align:center;
  letter-spacing:.5px;
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.hint { color:var(--text3); font-size:12px; }
.muted { color:var(--text2); }

.chips-row { justify-content:center; gap:6px; margin-top:10px; }
.chip {
  font-size:12px; padding:4px 11px; border-radius:999px;
  background:var(--bg); color:var(--text2);
  border:1px solid var(--border);
}

/* ---- RX / TX status pill ---- */
.status-pill {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px; border-radius:10px; font-weight:500;
  transition:background .18s ease, color .18s ease;
}
.status-pill.is-rx { background:var(--ok-bg); color:var(--ok-tx); }
.status-pill.is-tx { background:var(--tx-bg); color:var(--tx-tx); }
.status-pill.is-idle { background:var(--bg); color:var(--text3); }

/* ---- Equalizer ---- */
.eq {
  display:flex; align-items:flex-end; justify-content:center;
  gap:4px; height:28px;
}
.eqb {
  width:4px; height:26px; border-radius:2px;
  background:var(--text2); transform-origin:bottom;
  animation:eqb .9s ease-in-out infinite;
}
.eq.paused .eqb { animation-play-state:paused; transform:scaleY(.25); }

/* ---- Banner (waiting / reconnecting / error) ---- */
.banner {
  text-align:center; font-size:13px;
  padding:9px 12px; border-radius:10px;
  background:var(--warn-bg); color:var(--warn-tx);
}
.banner.is-error { background:var(--tx-bg); color:var(--tx-tx); }
.banner.is-info { background:var(--info-bg); color:var(--info-tx); }

/* ---- Controls ---- */
.controls-row { gap:12px; }
.btn {
  cursor:pointer; border:1px solid var(--border);
  background:transparent; color:var(--text);
  border-radius:50%; width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  flex:none; transition:opacity .15s ease;
}
.btn:disabled { opacity:.4; cursor:default; }
.btn-icon {
  cursor:pointer; border:none; background:transparent;
  padding:0; display:flex; align-items:center; flex:none;
}
.ic {
  width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
input[type=range] { flex:1; accent-color:var(--info-bd); height:24px; }

.footer {
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
/* Subtle "marketing" link back to the OpenShack product page. */
.footer-link {
  font-size:11px; letter-spacing:.2px;
  color:var(--text2); text-decoration:none;
  transition:color .15s ease;
}
.footer-link:hover, .footer-link:focus-visible { color:var(--info-bd); }

/* ---- Entry overlay ---- */
.entry {
  position:absolute; inset:0;
  background:var(--surface); border-radius:22px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:8px; padding:24px; text-align:center;
  transition:opacity .25s ease;
}
.entry.hide { opacity:0; pointer-events:none; }
.entry-chips { margin:4px 0 14px; }

.cta {
  width:100%; max-width:240px; padding:14px; border-radius:999px;
  border:1px solid var(--info-bd); background:var(--info-bg);
  color:var(--info-tx); font-size:16px; font-weight:500;
  display:flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; transition:filter .15s ease;
}
.cta:hover { filter:brightness(1.03); }
.cta:disabled { opacity:.5; cursor:default; }

/* ---- Animations ---- */
@keyframes eqb { 0%,100%{transform:scaleY(.25)} 50%{transform:scaleY(1)} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

@media (prefers-reduced-motion: reduce) {
  .eqb, .dot { animation:none !important; }
  .eq.paused .eqb { transform:scaleY(.5); }
}