/*
Theme Name: Cellfix
Theme URI: https://randybarham.com
Author: Randy Barham
Author URI: https://randybarham.com
Description: Sentinel — Middle East Conflict Monitor. Dark-steel tactical console on the front page.
Version: 5.3.1
License: GPL v2 or later
Text Domain: cellfix
*/

/* ============================================================
   Sentinel — fixed-viewport tactical monitor
   Gunmetal steel panels, deep navy, red c8102e accents,
   mono/stencil labels, HUD scanlines + crosshair motifs.
   ============================================================ */

:root {
  --stl-bg: #0d1117;
  --stl-panel: #131a22;
  --stl-panel-2: #0f151d;
  --stl-navy: #0a1628;
  --stl-steel: #1b232e;
  --stl-line: #26303c;
  --stl-txt: #d7dee6;
  --stl-dim: #8a97a5;
  --stl-red: #c8102e;
  --stl-red-hi: #ff3b52;
  --stl-cyan: #4cc9f0;
  --stl-amber: #e6a817;
  --stl-green: #3ddc84;
  --stl-mono: 'JetBrains Mono', ui-monospace, monospace;
  --stl-disp: 'Orbitron', 'JetBrains Mono', sans-serif;
}

* { box-sizing: border-box; }

body.home {
  margin: 0;
  background: var(--stl-bg);
  color: var(--stl-txt);
  font-family: 'Inter', system-ui, sans-serif;
  overflow: hidden;
  height: 100dvh;
}

/* fixed app shell */
.stl {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(76, 201, 240, .05), transparent 60%),
    radial-gradient(900px 420px at 8% 110%, rgba(200, 16, 46, .07), transparent 60%),
    linear-gradient(180deg, #0d1117 0%, #0a1628 100%);
}
/* fine scanline texture over shell */
.stl::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px);
  pointer-events: none;
  z-index: 1;
}

/* ══ TOP BAR ══ */
.stl-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px;
  background: linear-gradient(180deg, #10161f, #0c1119);
  border-bottom: 1px solid var(--stl-line);
  position: relative;
  z-index: 3;
}
.stl-bar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,16,46,.55), transparent);
}
.stl-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.stl-mark { width: 34px; height: 34px; flex: 0 0 auto; filter: drop-shadow(0 2px 6px rgba(200,16,46,.35)); }
.stl-brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.stl-brand-txt strong {
  font-family: var(--stl-disp); font-size: 16px; letter-spacing: .22em; color: #f2f6fa;
}
.stl-brand-sub {
  font-family: var(--stl-mono); font-size: 8.5px; letter-spacing: .18em; color: #6c7a88;
}

.stl-tabs { display: flex; gap: 4px; margin-left: auto; }
.stl-tab {
  font-family: var(--stl-mono); font-size: 10.5px; letter-spacing: .14em;
  color: #7d8b99; background: transparent; border: 1px solid transparent;
  padding: 8px 12px; cursor: pointer; border-radius: 2px;
}
.stl-tab-k { color: #4a5561; margin-right: 5px; font-size: 9px; }
.stl-tab:hover { color: var(--stl-cyan); border-color: rgba(76,201,240,.25); }
.stl-tab.is-on {
  color: #f2f6fa; border-color: var(--stl-line); background: #151d27;
  box-shadow: inset 0 -2px 0 var(--stl-red);
}
.stl-tab.is-on .stl-tab-k { color: var(--stl-red); }

.stl-bar-right { display: flex; gap: 8px; align-items: center; margin-left: 10px; }

/* chips */
.stl-chip {
  font-family: var(--stl-mono); font-size: 9.5px; letter-spacing: .12em;
  border: 1px solid var(--stl-line); padding: 5px 9px; border-radius: 2px;
  color: #a9b5c1; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.stl-chip b { color: #fff; }
.stl-chip-live { color: var(--stl-green); border-color: rgba(61,220,132,.35); }
.stl-chip-live i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--stl-green);
  animation: stlPulse 1.6s infinite;
}
.stl-chip-ghost { background: #0e141c; }
.stl-chip-defcon { color: var(--stl-red-hi); border-color: rgba(200,16,46,.5); background: rgba(200,16,46,.08); }
@keyframes stlPulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }

/* ══ PANELS ══ */
.stl-panel {
  flex: 1 1 auto; min-height: 0;
  display: none; flex-direction: column;
  padding: 16px 18px;
  overflow-y: auto;
  position: relative; z-index: 2;
}
.stl-panel.is-on { display: flex; }

.stl-head { margin-bottom: 10px; }
.stl-h1 {
  font-family: var(--stl-disp); font-size: 17px; letter-spacing: .2em;
  margin: 4px 0 4px; color: #eef3f8;
}
.stl-lede { margin: 0; font-size: 12.5px; color: #77848f; }
.stl-label {
  font-family: var(--stl-mono); font-size: 9px; letter-spacing: .18em; color: #5f6d7a;
  text-transform: uppercase;
}

/* ══ SITUATION ══ */
.stl-defcon {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(200,16,46,.45); background: linear-gradient(180deg, rgba(200,16,46,.1), rgba(200,16,46,.03));
  padding: 8px 14px; border-radius: 3px; position: relative;
}
.stl-defcon-l { font-family: var(--stl-disp); font-size: 10px; letter-spacing: .25em; color: #77848f; }
.stl-defcon-n {
  font-family: var(--stl-disp); font-size: 26px; line-height: 1; color: var(--stl-red-hi);
  text-shadow: 0 0 14px rgba(255,59,82,.5);
}
.stl-defcon-d { font-family: var(--stl-mono); font-size: 9px; letter-spacing: .12em; color: #a9b5c1; }
.stl-defcon-meter { display: flex; gap: 3px; }
.stl-defcon-meter b { width: 5px; height: 16px; background: #232c36; border-radius: 1px; }
.stl-defcon-meter b.is-hot { background: var(--stl-red-hi); box-shadow: 0 0 8px rgba(255,59,82,.6); }

/* status chips */
.stl-status {
  font-family: var(--stl-mono); font-size: 8.5px; letter-spacing: .14em;
  padding: 3px 8px; border-radius: 2px; border: 1px solid; white-space: nowrap;
}
.stl-status-ESCALATED { color: var(--stl-red-hi); border-color: rgba(200,16,46,.6); background: rgba(200,16,46,.14); }
.stl-status-ACTIVE { color: var(--stl-amber); border-color: rgba(230,168,23,.5); background: rgba(230,168,23,.1); }
.stl-status-CONTAINED { color: var(--stl-cyan); border-color: rgba(76,201,240,.45); background: rgba(76,201,240,.08); }
.stl-status-CEASEFIRE { color: var(--stl-green); border-color: rgba(61,220,132,.45); background: rgba(61,220,132,.08); }

.stl-updated { font-family: var(--stl-mono); font-size: 8.5px; color: #5f6d7a; letter-spacing: .08em; }

/* ══ INCIDENTS ══ */
.stl-filters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.stl-filter-row { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.stl-fbtn {
  font-family: var(--stl-mono); font-size: 9.5px; letter-spacing: .1em;
  background: #10161f; color: #8a97a5; border: 1px solid var(--stl-line);
  padding: 5px 10px; border-radius: 2px; cursor: pointer;
}
.stl-fbtn:hover { color: var(--stl-cyan); }
.stl-fbtn.is-on { color: #fff; background: #1a2330; border-color: rgba(76,201,240,.4); box-shadow: inset 0 -2px 0 var(--stl-cyan); }
.stl-fbtn[data-v="CRITICAL"].is-on { box-shadow: inset 0 -2px 0 var(--stl-red-hi); }

.stl-log {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: #2a3440 transparent;
}
.stl-log-item {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 12px; align-items: baseline;
  border: 1px solid var(--stl-line); border-left: 3px solid var(--stl-line);
  background: linear-gradient(180deg, #131a23, #10161e);
  border-radius: 3px; padding: 9px 12px;
}
.stl-log-item[data-sev="CRITICAL"] { border-left-color: var(--stl-red-hi); }
.stl-log-item[data-sev="HIGH"] { border-left-color: var(--stl-amber); }
.stl-log-item[data-sev="MODERATE"] { border-left-color: var(--stl-cyan); }
.stl-log-item[data-sev="LOW"] { border-left-color: #4a5561; }
.stl-li-date { font-family: var(--stl-mono); font-size: 10px; color: #77848f; letter-spacing: .05em; }
.stl-li-main b.stl-li-loc { display: block; font-size: 11.5px; color: #eef3f8; font-weight: 600; margin-bottom: 2px; }
.stl-li-main span { font-size: 11.5px; color: #96a3b0; line-height: 1.45; display: block; }
.stl-li-th { font-family: var(--stl-mono); font-size: 8.5px; color: #5f6d7a; letter-spacing: .12em; margin-right: 8px; }
.stl-sev {
  font-family: var(--stl-mono); font-size: 8.5px; letter-spacing: .1em;
  padding: 3px 7px; border-radius: 2px; border: 1px solid; white-space: nowrap;
}
.stl-sev-CRITICAL { color: var(--stl-red-hi); border-color: rgba(200,16,46,.6); background: rgba(200,16,46,.12); }
.stl-sev-HIGH { color: var(--stl-amber); border-color: rgba(230,168,23,.5); background: rgba(230,168,23,.09); }
.stl-sev-MODERATE { color: var(--stl-cyan); border-color: rgba(76,201,240,.45); background: rgba(76,201,240,.07); }
.stl-sev-LOW { color: #8a97a5; border-color: var(--stl-line); background: #131a23; }
.stl-log-count { font-family: var(--stl-mono); font-size: 9px; color: #5f6d7a; letter-spacing: .12em; margin: 8px 0 0; }

/* ══ THEATER DETAIL ══ */
.stl-btn-back {
  align-self: flex-start; font-family: var(--stl-mono); font-size: 10px; letter-spacing: .12em;
  background: #10161f; color: var(--stl-cyan); border: 1px solid rgba(76,201,240,.4);
  padding: 7px 12px; border-radius: 2px; cursor: pointer; margin-bottom: 10px;
}
.stl-btn-back:hover { background: #151d27; }
#stl-theater-body { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; padding-right: 4px; }
.stl-td-hero {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--stl-line); border-radius: 4px; padding: 14px 16px;
  background:
    radial-gradient(400px 160px at 90% 0%, rgba(200,16,46,.1), transparent 60%),
    linear-gradient(180deg, #161d27, #0f151d);
}
.stl-td-name { font-family: var(--stl-disp); font-size: 20px; letter-spacing: .16em; color: #eef3f8; margin: 2px 0 6px; }
.stl-td-sum { font-size: 12.5px; color: #96a3b0; max-width: 560px; line-height: 1.5; }
.stl-td-spark { border: 1px solid var(--stl-line); border-radius: 4px; padding: 12px 14px; background: linear-gradient(180deg, #131a23, #10161e); }
.stl-td-spark svg { display: block; }
.stl-td-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.stl-td-col { border: 1px solid var(--stl-line); border-radius: 4px; padding: 12px 14px; background: linear-gradient(180deg, #131a23, #10161e); }
.stl-td-col .stl-label { margin-bottom: 8px; }
.stl-td-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.stl-td-col li { font-size: 11.5px; color: #a9b5c1; padding-left: 12px; position: relative; }
.stl-td-col li::before { content: '▸'; position: absolute; left: 0; color: var(--stl-red); font-size: 9px; top: 1px; }
.stl-td-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.stl-td-stat {
  border: 1px solid var(--stl-line); border-radius: 3px; padding: 7px 9px;
  font-family: var(--stl-mono); font-size: 9.5px; color: #8a97a5; letter-spacing: .08em;
}
.stl-td-stat b { display: block; color: #eef3f8; font-size: 12px; margin-top: 3px; letter-spacing: .04em; font-weight: 500; }

/* ══ BRIEF ══ */
.stl-brief {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start;
}
.stl-card {
  border: 1px solid var(--stl-line); border-radius: 4px; padding: 14px 16px;
  background: linear-gradient(180deg, #131a23, #10161e);
}
.stl-card .stl-label { margin-bottom: 8px; color: var(--stl-cyan); }
.stl-card p { margin: 0; font-size: 12.5px; line-height: 1.6; color: #a9b5c1; }
.stl-card code { font-family: var(--stl-mono); font-size: 11px; color: var(--stl-cyan); }
.stl-brief-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.stl-brief-list li { font-size: 12px; line-height: 1.55; color: #a9b5c1; padding-left: 14px; position: relative; }
.stl-brief-list li::before { content: '—'; position: absolute; left: 0; color: var(--stl-red); }
.stl-card-disc { grid-column: 1 / -1; border-color: rgba(200,16,46,.45); background: linear-gradient(180deg, rgba(200,16,46,.07), #10161e); }
.stl-card-disc .stl-label { color: var(--stl-red-hi); }

/* ══ FOOT ══ */
.stl-foot {
  flex: 0 0 auto; display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 18px; border-top: 1px solid var(--stl-line);
  background: linear-gradient(0deg, #0c1119, #10161f);
  font-family: var(--stl-mono); font-size: 8.5px; letter-spacing: .14em; color: #5f6d7a;
  position: relative; z-index: 3;
}
.stl-foot-demo { color: var(--stl-amber); }

/* shared */
.stl-est-empty { font-family: var(--stl-mono); font-size: 10px; color: #5f6d7a; padding: 18px; letter-spacing: .1em; }

/* ══ SPLASH (single post pages) ══ */
body.single, body.error404, body.archive, body.search, body.page:not(.home) {
  margin: 0; min-height: 100dvh; background: var(--stl-bg); color: var(--stl-txt);
  display: flex; flex-direction: column; font-family: 'Inter', system-ui, sans-serif;
}
.stl-splash {
  flex: 1 1 auto; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 48px 24px; position: relative; overflow: hidden;
  background:
    radial-gradient(700px 320px at 50% -10%, rgba(76,201,240,.06), transparent 60%),
    radial-gradient(700px 320px at 50% 110%, rgba(200,16,46,.1), transparent 60%),
    linear-gradient(180deg, #0d1117, #0a1628);
}
.stl-splash::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(76,201,240,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(76,201,240,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(closest-side, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 90%);
  pointer-events: none;
}
.stl-splash-mark { width: 58px; height: 58px; margin-bottom: 22px; }
.stl-splash-kicker {
  font-family: var(--stl-mono); font-size: 10px; letter-spacing: .3em; color: #5f6d7a; margin-bottom: 12px;
}
.stl-splash h1 {
  font-family: var(--stl-disp); font-size: clamp(26px, 4.5vw, 44px); letter-spacing: .08em;
  color: #eef3f8; margin: 0 0 14px; max-width: 760px; line-height: 1.2;
}
.stl-splash-content {
  max-width: 680px; font-size: 14.5px; line-height: 1.7; color: #a9b5c1; margin: 0 0 30px;
}
.stl-splash-content a { color: var(--stl-cyan); }
.stl-splash-cta {
  display: inline-block; font-family: var(--stl-mono); font-size: 11.5px; letter-spacing: .2em;
  color: #fff; text-decoration: none; padding: 13px 26px; border-radius: 3px;
  background: linear-gradient(180deg, #c8102e, #9b0c24);
  border: 1px solid rgba(255,59,82,.5); box-shadow: 0 0 20px rgba(200,16,46,.3);
  transition: filter .15s, transform .15s;
}
.stl-splash-cta:hover { filter: brightness(1.15); transform: translateY(-1px); }

/* ══ RESPONSIVE ══ */
@media (max-width: 1100px) {
  .stl-td-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .stl-bar { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .stl-tabs { order: 3; width: 100%; margin-left: 0; }
  .stl-tab { flex: 1 1 auto; text-align: center; padding: 7px 6px; font-size: 9.5px; }
  .stl-bar-right { margin-left: auto; }
  .stl-brand-sub { display: none; }
  .stl-td-cols { grid-template-columns: 1fr; }
  .stl-defcon { flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .stl-panel { padding: 12px; overflow-y: auto; }
  .stl-panel, .stl-log, #stl-theater-body, .stl-brief { scrollbar-width: none; }
  .stl-panel::-webkit-scrollbar, .stl-log::-webkit-scrollbar,
  #stl-theater-body::-webkit-scrollbar, .stl-brief::-webkit-scrollbar { display: none; }
  .stl-defcon { padding: 5px 10px; gap: 8px; }
  .stl-defcon-n { font-size: 20px; }
  .stl-defcon-d { display: none; }
  .stl-defcon-meter b { height: 12px; }
  .stl-log-item { grid-template-columns: 1fr; gap: 5px; }
  .stl-li-date { order: 2; }
  .stl-brand-txt strong { font-size: 13.5px; }
  .stl-chip-defcon { display: none; }
  .stl-h1 { font-size: 15px; }
  .stl-td-cols { grid-template-columns: 1fr; }
  .stl-td-stats { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════════════════════
   v5.0.0 — LIVE WIRE, VIDEO, MAP PANEL, STAT TILES
   ══════════════════════════════════════════════════════════════ */

/* ticker */
.stl-ticker {
  flex: 0 0 auto; display: flex; align-items: center; gap: 0;
  border-bottom: 1px solid var(--stl-line);
  background: #0b1017; overflow: hidden; position: relative; z-index: 3; height: 26px;
}
.stl-ticker-tag {
  font-family: var(--stl-mono); font-size: 8.5px; letter-spacing: .2em; color: #fff;
  background: var(--stl-red); padding: 0 10px; align-self: stretch; display: flex; align-items: center;
  flex: 0 0 auto; position: relative; z-index: 2;
}
.stl-ticker-track {
  display: flex; gap: 34px; white-space: nowrap; align-items: center;
  padding-left: 14px; animation: stlTicker 70s linear infinite;
}
.stl-ticker:hover .stl-ticker-track { animation-play-state: paused; }
@keyframes stlTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.stl-ticker-item { font-family: var(--stl-mono); font-size: 9.5px; letter-spacing: .08em; color: #a9b5c1; }
.stl-ticker-item b { color: var(--stl-cyan); font-weight: 500; margin-right: 8px; }
.stl-ticker-item.dim { color: #5f6d7a; }

/* overview panel */
.stl-ov { display: flex; flex-direction: column; gap: 12px; min-height: 0; flex: 1 1 auto; }
.stl-ov-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex: 0 0 auto; }
.stl-ov-main {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(340px, 1.15fr) minmax(300px, 1fr); gap: 12px;
}
.stl-video {
  margin: 0; border: 1px solid var(--stl-line); border-radius: 4px; overflow: hidden;
  background: #05080c; position: relative; display: flex; flex-direction: column; min-height: 0;
}
.stl-video iframe { flex: 1 1 auto; width: 100%; border: 0; display: block; min-height: 0; }
.stl-video figcaption {
  flex: 0 0 auto; padding: 6px 10px; border-top: 1px solid rgba(76,201,240,.2);
  background: linear-gradient(0deg, #0b1017, #0e141c);
}
.stl-video figcaption a { color: var(--stl-cyan); text-decoration: none; }
.stl-video figcaption a:hover { text-decoration: underline; }
.stl-wire {
  border: 1px solid var(--stl-line); border-radius: 4px; padding: 10px 12px;
  background: linear-gradient(180deg, #10161f, #0d131b);
  display: flex; flex-direction: column; gap: 8px; min-height: 0;
}
.stl-wire-feed { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.stl-news-item {
  border: 1px solid var(--stl-line); border-left: 3px solid var(--stl-red);
  background: linear-gradient(180deg, #131a23, #10161e);
  border-radius: 3px; padding: 8px 10px; text-decoration: none; display: block;
  transition: border-color .15s;
}
.stl-news-item:hover { border-color: rgba(76,201,240,.5); }
.stl-news-meta {
  display: flex; gap: 10px; align-items: baseline;
  font-family: var(--stl-mono); font-size: 8.5px; letter-spacing: .12em; color: #5f6d7a; margin-bottom: 3px;
}
.stl-news-src { color: var(--stl-red-hi); }
.stl-news-ttl { font-size: 12px; line-height: 1.45; color: #d7dee6; display: block; }

/* stat tiles */
.stl-tiles { flex: 0 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.stl-tile {
  border: 1px solid var(--stl-line); border-radius: 4px; padding: 9px 12px;
  background: linear-gradient(180deg, #161d27, #10161f);
}
.stl-tile .stl-label { margin-bottom: 4px; }
.stl-tile-v { font-family: var(--stl-disp); font-size: 17px; color: #eef3f8; letter-spacing: .06em; line-height: 1.1; }
.stl-tile-v.red { color: var(--stl-red-hi); }
.stl-tile-s { font-family: var(--stl-mono); font-size: 8px; color: #5f6d7a; letter-spacing: .08em; margin-top: 4px; }

/* map panel */
.stl-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.stl-map-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.stl-map-big {
  flex: 1 1 auto; min-height: 0; border: 1px solid var(--stl-line); border-radius: 4px;
  overflow: hidden; position: relative;
}
.stl-map-big svg { width: 100%; height: 100%; display: block; position: absolute; inset: 0; }
.stl-map-pin { cursor: pointer; }
.stl-map-pin text { font-family: var(--stl-mono); font-size: 8.5px; letter-spacing: .1em; fill: #a9b5c1; }
.stl-map-pin .pin-ring { animation: stlBlip 2.4s infinite; }
.stl-map-legend { display: flex; gap: 18px; align-items: center; }
.stl-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.stl-map-legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.stl-lg-red { background: var(--stl-red-hi); }
.stl-lg-amber { background: var(--stl-amber); }
.stl-lg-cyan { background: var(--stl-cyan); }
.stl-lg-green { background: var(--stl-green); }

@media (max-width: 1100px) {
  .stl-ov-main { grid-template-columns: 1fr; }
  .stl-video { min-height: 220px; }
  .stl-wire { min-height: 200px; }
  .stl-tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .stl-ticker-track { animation-duration: 45s; }
  .stl-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .stl-ov { gap: 8px; }
  .stl-ov-top { flex-wrap: wrap; gap: 8px; }
  .stl-ov-main { grid-template-columns: 1fr; gap: 8px; }
  .stl-video { min-height: 230px; }
  .stl-vid-facade { min-height: 0; padding: 14px; gap: 8px; }
  .stl-video iframe { min-height: 170px; }
  .stl-wire { min-height: 160px; padding: 8px; }
  .stl-tiles { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .stl-tile { padding: 7px 9px; }
  .stl-tile-v { font-size: 14px; }
  .stl-ticker { height: 24px; }
  .stl-map-legend { flex-wrap: wrap; gap: 8px 14px; }
}

/* ══════════════════════════════════════════════════════════════
   v5.1.0 — INTERACTION POLISH: clickable tiles/log, wire refresh
   ══════════════════════════════════════════════════════════════ */

.stl-tile { appearance: none; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.stl-tile:hover { border-color: rgba(76,201,240,.45); }
.stl-tile:active { transform: translateY(1px); }
.stl-tile .stl-label, .stl-tile-v, .stl-tile-s { display: block; }

.stl-log-item { appearance: none; width: 100%; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.stl-log-item:hover { border-color: rgba(76,201,240,.45); background: linear-gradient(180deg, #16202b, #111823); }
.stl-log-item:hover .stl-li-loc { color: var(--stl-cyan); }

.stl-wire-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stl-wire-refresh {
  font-family: var(--stl-mono); font-size: 8.5px; letter-spacing: .14em;
  background: #10161f; color: var(--stl-cyan); border: 1px solid rgba(76,201,240,.4);
  padding: 4px 9px; border-radius: 2px; cursor: pointer; flex: 0 0 auto;
  transition: background .15s ease;
}
.stl-wire-refresh:hover { background: #1a2330; }
.stl-wire-refresh:active { transform: translateY(1px); }

.stl-fbtn:focus-visible, .stl-log-item:focus-visible, .stl-tile:focus-visible,
.stl-wire-refresh:focus-visible, .stl-btn-back:focus-visible, .stl-tab:focus-visible {
  outline: 2px solid var(--stl-cyan); outline-offset: 1px;
}

/* ══════════════════════════════════════════════════════════════
   v5.2.0 — VIDEO FACADE + CHANNEL SWITCHER
   ══════════════════════════════════════════════════════════════ */

.stl-video iframe {
  flex: 1 1 auto; width: 100%; border: 0; display: block;
  min-height: 220px; /* never flex to zero on short viewports */
}
.stl-vid-facade {
  flex: 1 1 auto; min-height: 220px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; cursor: pointer; position: relative; text-align: center; padding: 18px;
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(76,201,240,.02) 5px 6px),
    radial-gradient(340px 170px at 50% 40%, rgba(200,16,46,.12), transparent 70%),
    linear-gradient(180deg, #0a0f16, #0d1420);
}
.stl-vid-facade::before {
  content: ''; position: absolute; inset: 10px; pointer-events: none;
  border: 1px dashed rgba(76,201,240,.25); border-radius: 3px;
}
.stl-vid-facade:hover { background: radial-gradient(340px 170px at 50% 40%, rgba(200,16,46,.16), transparent 70%), linear-gradient(180deg, #0c1119, #101827); }
.stl-vid-facade:focus-visible { outline: 2px solid var(--stl-cyan); outline-offset: 2px; }
.stl-vid-live {
  font-family: var(--stl-mono); font-size: 9px; letter-spacing: .22em;
  color: var(--stl-green); border: 1px solid rgba(61,220,132,.4);
  padding: 3px 9px; border-radius: 2px; display: inline-flex; align-items: center; gap: 6px;
}
.stl-vid-live i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--stl-green);
  animation: stlPulse 1.6s infinite;
}
.stl-vid-ch {
  font-family: var(--stl-disp); font-size: 15px; letter-spacing: .18em; color: #eef3f8;
}
.stl-vid-play {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(200,16,46,.6); background: rgba(200,16,46,.14);
  color: #fff; font-size: 16px; display: grid; place-items: center;
  text-indent: 3px; box-shadow: 0 0 18px rgba(200,16,46,.28);
  transition: transform .15s ease, background .15s ease;
}
.stl-vid-facade:hover .stl-vid-play { transform: scale(1.07); background: rgba(200,16,46,.26); }
.stl-vid-hint { font-family: var(--stl-mono); font-size: 8.5px; letter-spacing: .16em; color: #5f6d7a; }

.stl-vid-channels {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 4px;
  padding: 8px 10px; border-top: 1px solid var(--stl-line); background: #0b1017;
}
.stl-vid-btn {
  appearance: none; font: inherit; cursor: pointer;
  font-family: var(--stl-mono); font-size: 9px; letter-spacing: .12em;
  color: #8a97a5; background: #10161f; border: 1px solid var(--stl-line);
  padding: 4px 9px; border-radius: 2px;
}
.stl-vid-btn:hover { color: var(--stl-cyan); border-color: rgba(76,201,240,.35); }
.stl-vid-btn.is-on {
  color: #fff; background: #1a2330; border-color: rgba(76,201,240,.4);
  box-shadow: inset 0 -2px 0 var(--stl-cyan);
}

@media (prefers-reduced-motion: reduce) {
  .stl-ticker-track { animation: none; }
  .stl-chip-live i, .stl-vid-live i, .stl-map-pin .pin-ring { animation: none; }
}

/* ── 5.3.0 — map zoom/pan + notation popups ───────────────────────────── */
#stl-map-svg { cursor: grab; touch-action: none; }
#stl-map-svg.is-panning { cursor: grabbing; }
#stl-map-svg .stl-map-pin { cursor: pointer; }
#stl-map-svg .stl-map-pin:focus-visible { outline: none; }
#stl-map-svg .stl-map-pin:focus-visible .pin-ring { stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(76,201,240,0.8)); }
#stl-map-svg .stl-map-region { pointer-events: none; opacity: .55; }
.stl-map-zoom {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  display: flex; gap: 4px;
}
.stl-map-zoom button {
  font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .08em;
  color: #cdd6e0; background: rgba(10,16,26,0.85); border: 1px solid #2c3c4e;
  border-radius: 2px; padding: 4px 10px; cursor: pointer; transition: border-color .2s, color .2s;
}
.stl-map-zoom button:hover { color: #fff; border-color: #4cc9f0; }
.stl-map-pop {
  position: absolute; z-index: 6; width: min(340px, 88%);
  background: rgba(10,16,26,0.96); border: 1px solid #3a4a5e; border-radius: 3px;
  padding: 14px 16px 12px; box-shadow: 0 14px 44px rgba(0,0,0,0.6);
}
.stl-pop-x {
  position: absolute; top: 6px; right: 8px; background: none; border: none;
  color: #6b7c8e; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 2px 6px;
}
.stl-pop-x:hover { color: #fff; }
.stl-pop-name { font-size: 1rem; letter-spacing: .06em; margin: 6px 0 6px; color: #e8eef4; }
.stl-pop-sum { font-size: .8rem; color: #9fb0c0; line-height: 1.55; margin: 8px 0 10px; }
.stl-pop-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 10px; }
.stl-pop-stats div { border: 1px solid #22303e; border-radius: 2px; padding: 6px 8px; }
.stl-pop-stats b { display: block; font-size: .8rem; color: #e8eef4; font-weight: 600; }
.stl-pop-stats span { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: #6b7c8e; }
.stl-pop-links { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 10px; }
.stl-pop-links a {
  font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: #4cc9f0; text-decoration: none;
}
.stl-pop-links a:hover { color: #fff; text-decoration: underline; }
.stl-pop-brief {
  width: 100%; font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: #0a101a; background: #4cc9f0; border: none;
  border-radius: 2px; padding: 7px 0; cursor: pointer; transition: filter .2s;
}
.stl-pop-brief:hover { filter: brightness(1.15); }