/* ============================================================================
 * scoreboard-tv-module.css — Scoreboard TV board styling.
 * Uses brand tokens from styles.css :root (never hardcode hex except the
 * derived alarm-red, which is intentionally a strobe color).
 * ==========================================================================*/

.sbtv { position: relative; display: flex; flex-direction: column; gap: 16px; }

/* ---- top bar: title + heartbeat + mute -------------------------------- */
.sbtv-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.sbtv-title { font-size: 20px; font-weight: 700; letter-spacing:.2px; }
.sbtv-mode-tag { font-size:11px; font-weight:600; color:var(--rr-bg); background:var(--rr-cyan);
  padding:2px 8px; border-radius:999px; margin-left:8px; vertical-align:middle; }
.sbtv--desk .sbtv-mode-tag { background:var(--rr-text-muted); color:var(--rr-bg); }
.sbtv-topbar-right { display:flex; align-items:center; gap:12px; }
.sbtv-heartbeat { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--rr-text-muted);
  display:inline-flex; align-items:center; gap:6px; }
.sbtv-heartbeat::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--rr-cyan);
  box-shadow:0 0 8px var(--rr-cyan); animation:sbtv-pulse 1.8s ease-in-out infinite; }
@keyframes sbtv-pulse { 0%,100%{opacity:.35} 50%{opacity:1} }

.sbtv-mute { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:18px;
  background:var(--rr-violet-2); color:var(--rr-text); border:1px solid var(--rr-border);
  border-radius:999px; padding:6px 12px; }
.sbtv-mute:hover { border-color:var(--rr-pink); }
.sbtv-mute-pill { font-size:11px; font-weight:600; color:var(--rr-text-muted); }

/* ---- TV mode = bigger, full-bleed feel -------------------------------- */
.sbtv--tv { font-size: 1.08em; }
.sbtv--tv .sbtv-title { font-size: 28px; }

/* ---- one-time launch overlay (TV) ------------------------------------- */
.sbtv-launch { position:fixed; inset:0; z-index:9000; background:rgba(10,1,24,.96);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.sbtv-launch-btn { font-size:26px; font-weight:700; color:var(--rr-bg);
  background:linear-gradient(90deg,var(--rr-pink),var(--rr-cyan)); border:none; cursor:pointer;
  padding:18px 36px; border-radius:14px; box-shadow:0 0 40px rgba(242,57,247,.45); }
.sbtv-launch-sub { color:var(--rr-text-muted); font-size:14px; }

/* ---- metric panels (§3) ----------------------------------------------- */
.sbtv-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:900px){ .sbtv-metrics { grid-template-columns:1fr; } }
/* Neon Glass tiles: tint + edges only — NO backdrop-filter on big TV board
   tiles (blur over the flat page bg adds cost, no depth on a kiosk screen). */
.sbtv-card { background:var(--ng-sheen), var(--ng-tint-card); border:1px solid var(--ng-edge-pink);
  border-radius:16px; padding:16px;
  box-shadow:inset 0 1px 0 var(--ng-edge-spec), inset 0 0 0 1px var(--ng-edge-cyan),
    var(--ng-shadow), var(--ng-glow); }
.sbtv-card h3 { margin:0 0 12px; font-size:15px; display:flex; align-items:center; gap:8px; }
.sbtv-card .sbtv-card-sub { font-size:11px; color:var(--rr-text-muted); font-weight:500; }

.sbtv-metric { margin:10px 0; }
.sbtv-metric-row { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:5px; }
.sbtv-metric-label { font-size:12px; color:var(--rr-text-muted); }
.sbtv-metric-val { font-family:'JetBrains Mono',monospace; font-size:15px; font-weight:600; }
.sbtv-metric-val .tgt { color:var(--rr-text-muted); font-weight:400; }
.sbtv-bar { height:10px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.sbtv-bar > i { display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--rr-pink),var(--rr-cyan)); transition:width .6s ease; }
.sbtv-bar.full > i { background:var(--rr-cyan); }

/* ---- two-column grid: leaderboard + announcements --------------------- */
.sbtv-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:900px){ .sbtv-grid2 { grid-template-columns:1fr; } }
.sbtv-pane { background:var(--ng-sheen), var(--ng-tint-card); border:1px solid var(--ng-edge-pink); /* glass tile — see .sbtv-card note */
  border-radius:16px; padding:16px;
  box-shadow:inset 0 1px 0 var(--ng-edge-spec), inset 0 0 0 1px var(--ng-edge-cyan),
    var(--ng-shadow), var(--ng-glow); }
.sbtv-pane-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.sbtv-pane-h h3 { margin:0; font-size:15px; }

/* ---- alarm banner + strobe (§4) --------------------------------------- */
.sbtv-alarm { border-radius:14px; padding:14px 16px; margin:2px 0; display:flex; align-items:center;
  justify-content:space-between; gap:12px; border:1px solid var(--rr-pink); background:rgba(242,57,247,.10); }
.sbtv-alarm-msg { font-weight:700; font-size:16px; }
.sbtv-alarm-sub { font-size:12px; color:var(--rr-text-muted); }
.sbtv-alarm-actions { display:flex; gap:8px; }
.sbtv-ack { cursor:pointer; background:var(--rr-violet-2); color:var(--rr-text); border:1px solid var(--rr-border);
  border-radius:10px; padding:8px 12px; font-size:13px; }
.sbtv-alarm.tier-soft   { animation:sbtv-edge-soft 1.6s ease-in-out infinite; }
.sbtv-alarm.tier-medium { animation:sbtv-edge-med 0.8s ease-in-out infinite; }
.sbtv-alarm.tier-hard   { animation:sbtv-edge-hard 0.5s ease-in-out infinite; }
@keyframes sbtv-edge-soft { 0%,100%{box-shadow:0 0 0 rgba(242,57,247,0)} 50%{box-shadow:0 0 22px rgba(242,57,247,.55)} }
@keyframes sbtv-edge-med  { 0%,100%{box-shadow:0 0 4px rgba(242,57,247,.3)} 50%{box-shadow:0 0 34px rgba(242,57,247,.85)} }
@keyframes sbtv-edge-hard { 0%,100%{box-shadow:0 0 8px rgba(255,45,85,.4); background:rgba(255,45,85,.12)}
  50%{box-shadow:0 0 48px rgba(255,45,85,1); background:rgba(255,45,85,.28)} }

/* full-board red strobe — TV ONLY (desk caps at static banner, §4) */
.sbtv-root-strobe.sbtv--tv { animation:sbtv-fullred 0.6s steps(2,end) infinite; }
@keyframes sbtv-fullred { 0%{background:transparent} 50%{background:rgba(255,45,85,.35)} 100%{background:transparent} }
.sbtv-alarm-huge { font-size:34px; font-weight:800; text-align:center; padding:8px 0; }
.sbtv--desk .sbtv-alarm.tier-hard { animation:none; background:rgba(255,45,85,.16); } /* no strobe on laptops */

/* ---- leaderboard rows (§6) -------------------------------------------- */
.sbtv-lb-row { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.sbtv-lb-rank { width:30px; font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--rr-text-muted); }
.sbtv-lb-rank.medal { color:var(--rr-yellow); }
.sbtv-lb-name { flex:1; font-weight:600; }
.sbtv-lb-checks { font-size:11px; color:var(--rr-text-muted); }
.sbtv-lb-avg { font-family:'JetBrains Mono',monospace; font-size:18px; font-weight:700; min-width:74px; text-align:right; }
.sbtv-lb-meterwrap { width:90px; height:6px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.sbtv-lb-meterwrap > i { display:block; height:100%; background:linear-gradient(90deg,var(--rr-pink),var(--rr-cyan)); }
.sbtv-lb-winner { background:linear-gradient(90deg,rgba(242,57,247,.18),rgba(88,249,244,.18));
  border:1px solid var(--rr-pink); border-radius:12px; padding:10px 12px; margin-bottom:8px; font-weight:700; }

/* ---- announcements (§7) ----------------------------------------------- */
.sbtv-ann { background:var(--rr-violet-2); border:1px solid var(--rr-border); border-radius:12px;
  padding:10px 12px; margin-bottom:8px; }
.sbtv-ann.pinned { border-color:var(--rr-yellow); }
.sbtv-ann-top { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--rr-text-muted); margin-bottom:4px; }
.sbtv-ann-body { font-size:14px; }
.sbtv-ann-glyph { font-size:15px; }
.sbtv-composer { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.sbtv-composer input[type=text]{ flex:1; min-width:180px; background:var(--rr-bg); color:var(--rr-text);
  border:1px solid var(--rr-border); border-radius:10px; padding:9px 12px; font-family:inherit; }
.sbtv-composer select{ background:var(--rr-bg); color:var(--rr-text); border:1px solid var(--rr-border);
  border-radius:10px; padding:9px; }

/* ---- daily check-average broadcast (§6) ------------------------------- */
.sbtv-checkavg-hero { background:linear-gradient(135deg,rgba(242,57,247,.16),rgba(88,249,244,.14));
  border:1px solid var(--rr-pink); border-radius:14px; padding:16px; margin-bottom:12px; text-align:center; }
.sbtv-checkavg-k { font-size:12px; color:var(--rr-text-muted); display:flex; align-items:center;
  justify-content:center; gap:8px; }
.sbtv-checkavg-v { font-family:'JetBrains Mono',monospace; font-weight:800; line-height:1.05;
  font-size:46px; margin:6px 0 2px;
  background:linear-gradient(90deg,var(--rr-pink),var(--rr-cyan)); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; }
.sbtv--tv .sbtv-checkavg-v { font-size:64px; }
.sbtv-checkavg-sub { font-size:12px; color:var(--rr-text-muted); }
.sbtv-checkavg-mtd { font-size:13px; margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.08); }
.sbtv-checkavg-note { font-size:12px; color:var(--rr-text-muted); background:var(--rr-violet-2);
  border:1px dashed var(--rr-border); border-radius:10px; padding:10px 12px; line-height:1.5; }
.sbtv-lb-title { font-size:12px; font-weight:700; color:var(--rr-text-muted); margin:6px 0 4px; }

/* ---- Slack #general feed (§9) ----------------------------------------- */
.sbtv-slack .sbtv-pane-h h3 { display:flex; align-items:center; gap:8px; }
.sbtv-slack-live { font-size:11px; font-weight:600; color:var(--rr-text-muted); }
.sbtv-slack-live.on { color:var(--rr-cyan); }
.sbtv-slack-list { display:flex; flex-direction:column; gap:8px; max-height:340px; overflow-y:auto; }
.sbtv--tv .sbtv-slack-list { max-height:none; }
.sbtv-slack-msg { background:var(--rr-violet-2); border:1px solid var(--rr-border); border-radius:12px; padding:10px 12px; }
.sbtv-slack-top { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--rr-text-muted); margin-bottom:4px; }
.sbtv-slack-author { font-weight:700; color:var(--rr-text); }
.sbtv-slack-time { color:var(--rr-text-muted); }
.sbtv-slack-react { margin-left:auto; color:var(--rr-cyan); }
.sbtv-slack-body { font-size:14px; white-space:pre-wrap; word-break:break-word; }
.sbtv-slack-connect { text-align:center; padding:26px 16px; background:var(--rr-violet-2);
  border:1px dashed var(--rr-border); border-radius:14px; }
.sbtv-slack-connect-glyph { font-size:34px; margin-bottom:6px; }
.sbtv-slack-connect-title { font-weight:700; font-size:16px;
  background:linear-gradient(90deg,var(--rr-pink),var(--rr-cyan)); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; }
.sbtv-slack-connect-sub { font-size:12px; color:var(--rr-text-muted); margin-top:6px; line-height:1.5; max-width:360px; margin-left:auto; margin-right:auto; }
.sbtv-slack-reason { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--rr-text-muted);
  margin-top:8px; opacity:.7; }

/* ---- broadcast (§8) --------------------------------------------------- */
.sbtv-broadcast-overlay { position:fixed; inset:0; z-index:8000; background:#000;
  display:flex; align-items:center; justify-content:center; }
.sbtv-broadcast-overlay video { width:100%; height:100%; object-fit:contain; background:#000; }
.sbtv-live-badge { position:absolute; top:18px; left:18px; display:flex; align-items:center; gap:8px;
  background:rgba(255,45,85,.92); color:#fff; font-weight:800; padding:8px 14px; border-radius:999px; font-size:16px; }
.sbtv-live-badge::before { content:''; width:12px; height:12px; border-radius:50%; background:#fff; animation:sbtv-pulse 1s infinite; }
.sbtv-bcast-controls { display:flex; gap:8px; align-items:center; }
