/* Listen player surfaces that used to ship as an injected <style>.
   scripts/build.mjs ensure: views-listen-player hashes this file and links it
   AFTER views-admin — the cascade position that <style> had — so
   equal-specificity rules still win. Dev, with no hashed link yet,
   appends <link href="styles/views-listen-player.css">.
   Chart and meter colours stay on the existing tokens and literals. */

.lp-root { display:flex; flex-direction:column; gap:14px; }
.lp-summary { font-family:var(--font-mono); font-size:12px; color:var(--text-2);
  display:flex; flex-wrap:wrap; gap:14px; }
.lp-summary b { color:var(--text-1); font-weight:600; }
.lp-hint { font-size:11px; color:var(--text-muted); margin:0; }

.lp-tuning { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.lp-field { display:flex; flex-direction:column; gap:3px; min-width:120px; }
.lp-field label { font-family:var(--font-mono); font-size:9px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); }
.lp-field input, .lp-field select {
  background:var(--bg-input); border:1px solid var(--border); border-radius:var(--r-sm);
  color:var(--text-1); font-family:var(--font-ui); font-size:13px; padding:6px 8px;
  outline:none; width:var(--field-l); max-width:100%; box-sizing:border-box; }
.lp-field input.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.lp-field input:focus, .lp-field select:focus { border-color:var(--accent); box-shadow:var(--ring); }

.lp-transport { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.lp-feed { margin-left:4px; }
.lp-offset { font-family:var(--font-mono); font-size:11px; color:var(--text-muted); margin-top:-8px; }

.lp-slider-row { display:flex; flex-direction:column; gap:4px; }
.lp-slider-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.lp-slider-head label { font-family:var(--font-mono); font-size:9px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); }
.lp-slider-val { font-family:var(--font-mono); font-size:12px; color:var(--text-2);
  font-variant-numeric:tabular-nums; }
.lp-range { width:100%; appearance:none; -webkit-appearance:none; height:6px;
  border-radius:var(--r-pill); background:var(--bg-input); border:1px solid var(--border);
  outline:none; cursor:pointer; }
.lp-range::-webkit-slider-thumb { -webkit-appearance:none; width:15px; height:15px;
  border-radius:50%; background:var(--accent); border:2px solid var(--bg-0); cursor:grab; }
.lp-range::-moz-range-thumb { width:15px; height:15px; border-radius:50%;
  background:var(--accent); border:2px solid var(--bg-0); cursor:grab; }

.lp-meter-row { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; }
.lp-meter-lbl { font-family:var(--font-mono); font-size:9px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); }
.lp-meter-track { position:relative; height:14px; border-radius:var(--r-sm);
  background:var(--bg-input); border:1px solid var(--border); overflow:hidden; }
.lp-meter-bar { position:absolute; left:0; top:0; height:100%; width:0%;
  background:var(--ok); transition:width .08s linear, background .15s; }
.lp-meter-read { font-family:var(--font-mono); font-size:11px; color:var(--text-2);
  font-variant-numeric:tabular-nums; min-width:62px; text-align:right; }

.lp-rfstatus { font-family:var(--font-mono); font-size:12px; color:var(--text-2);
  display:flex; flex-wrap:wrap; gap:6px; }
.lp-rfstatus b { color:var(--text-1); font-weight:600; }

.lp-recrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border-top:1px solid var(--border-subtle); padding-top:10px; }
.lp-recstate { font-family:var(--font-mono); font-size:12px; color:var(--text-muted); }
.lp-recdot { width:9px; height:9px; border-radius:50%; background:var(--danger);
  display:inline-block; animation:lp-pulse 1s ease-in-out infinite; }
@keyframes lp-pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.35;transform:scale(.7);} }
.lp-recbadge { align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em;
  color:var(--danger); border:1px solid var(--danger); border-radius:var(--r-pill);
  padding:2px 10px 2px 8px; }
.lp-recbadge[hidden] { display:none; }
.lp-recline { display:inline-flex; align-items:center; gap:6px; }
.lp-pastlink { font-size:12px; color:var(--accent-text); text-decoration:none; margin-left:auto; }
.lp-pastlink:hover { text-decoration:underline; }
.lp-empty { font-size:12px; color:var(--text-muted); font-family:var(--font-mono); padding:8px 0; }
.lp-relaynote { font-size:12px; color:var(--text-2); line-height:1.45; margin:0; }
.lp-dv1 { display:flex; flex-direction:column; gap:10px; }
.lp-dv1-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.lp-dv1-nick { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--text-1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.lp-dv1-badge { font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ok); white-space:nowrap; }
.lp-dv1[data-dv1-state="stale"] .lp-dv1-badge, .lp-dv1[data-dv1-state="offline"] .lp-dv1-badge { color:var(--text-muted); }
.lp-dv1[data-dv1-state="stale"] .lp-dv1-live { color:var(--text-muted); }
.lp-dv1-live { display:flex; flex-wrap:wrap; gap:4px 14px; }
.lp-dv1 .lp-tuning .lp-field { flex:1 1 140px; min-width:0; }
.lp-dv1 .lp-tuning .lp-field.wide { flex-basis:100%; }
.lp-dv1-status { font-size:12px; margin:0; line-height:1.4; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lp-dv1-status[data-dv1-pending="pending"] { color:var(--text-2); }
.lp-dv1-status[data-dv1-pending="timeout"] { color:var(--warn); }
.lp-dv1-status[data-dv1-pending="matched"] { color:var(--ok); }