/* ============ GHOSTSHIP · Hormuz Exit Dossier — dark intel console ============ */
@font-face{font-family:'PlexMono';src:url('fonts/plexmono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'PlexMono';src:url('fonts/plexmono-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'PlexMono';src:url('fonts/plexmono-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Saira';src:url('fonts/saira-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Saira';src:url('fonts/saira-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --bg:#070a0f; --bg2:#0c1119; --panel:#0f151f; --panel2:#131b27;
  --line:#1c2735; --line2:#283648;
  --txt:#cdd6e2; --muted:#71808f; --dim:#4a5663;
  --amber:#f2a73b; --amber-dim:#7a5a22;
  --gulf:#46a6e8; --out:#ef5142; --darktrack:#8493a4;
  --hi:#36d07f; --med:#f2a73b; --lo:#ef5142;
  --sanc:#ff3355; --iran:#2fbf6b;
  --teal:#39d3c9;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);
  font-family:'PlexMono',ui-monospace,monospace;font-size:13px;-webkit-font-smoothing:antialiased;overflow:hidden}
h1,h2,h3,.disp{font-family:'Saira','PlexMono',sans-serif;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin:0}
a{color:var(--amber);text-decoration:none}

/* atmospheric backdrop: faint grid + vignette + grain */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;opacity:.16;mask-image:radial-gradient(ellipse at 30% 20%,#000 0%,transparent 80%)}
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

#app{position:relative;z-index:1;display:grid;grid-template-columns:340px 1fr;height:100vh}

/* ============ SIDEBAR ============ */
#side{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--bg2),var(--bg));
  border-right:1px solid var(--line2);min-height:0}
.brand{padding:16px 16px 12px;border-bottom:1px solid var(--line)}
.brand .kicker{font-size:10px;letter-spacing:.34em;color:var(--amber);text-transform:uppercase}
.brand h1{font-size:30px;line-height:.92;margin-top:5px;color:var(--txt)}
.brand h1 b{color:var(--amber)}
.brand .sub{font-size:10.5px;color:var(--muted);margin-top:7px;line-height:1.5}
.brand .sub .hot{color:var(--out)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.stat{background:var(--bg2);padding:9px 10px;text-align:left}
.stat .n{font-family:'Saira';font-size:23px;font-weight:700;line-height:1}
.stat .l{font-size:9px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-top:3px}
.stat.hi .n{color:var(--hi)} .stat.med .n{color:var(--med)} .stat.lo .n{color:var(--lo)}
.stat.sanc .n{color:var(--sanc)} .stat.iran .n{color:var(--iran)} .stat.tot .n{color:var(--txt)}

.filters{display:flex;flex-wrap:wrap;gap:5px;padding:11px 12px;border-bottom:1px solid var(--line)}
.chip{font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border:1px solid var(--line2);
  border-radius:2px;color:var(--muted);cursor:pointer;background:transparent;user-select:none;transition:.12s}
.chip:hover{border-color:var(--dim);color:var(--txt)}
.chip.on{background:var(--amber);border-color:var(--amber);color:#0a0d12;font-weight:600}
.chip.on.s{background:var(--sanc);border-color:var(--sanc);color:#fff}
.chip.on.i{background:var(--iran);border-color:var(--iran);color:#04130a}
#search{flex:1 1 100%;margin-top:2px;background:#070b11;border:1px solid var(--line2);color:var(--txt);
  font-family:inherit;font-size:11px;padding:6px 9px;border-radius:2px;outline:none}
#search:focus{border-color:var(--amber)}
#search::placeholder{color:var(--dim)}

#list{flex:1;overflow-y:auto;min-height:0}
.row{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;padding:9px 12px;
  border-bottom:1px solid var(--line);cursor:pointer;transition:background .1s}
.row:hover{background:var(--panel)}
.row.sel{background:var(--panel2);box-shadow:inset 3px 0 0 var(--amber)}
.row .rk{font-family:'Saira';font-size:18px;font-weight:700;color:var(--dim);text-align:center}
.row.sel .rk{color:var(--amber)}
.row .vid{font-size:12px;font-weight:500;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .meta{font-size:10px;color:var(--muted);margin-top:2px;display:flex;gap:7px;align-items:center}
.row .badges{display:flex;gap:4px;align-items:center;justify-self:end}
.pill{font-size:8.5px;font-weight:600;letter-spacing:.06em;padding:2px 5px;border-radius:2px;text-transform:uppercase}
.pill.HIGH{background:rgba(54,208,127,.15);color:var(--hi);border:1px solid rgba(54,208,127,.4)}
.pill.MEDIUM{background:rgba(242,167,59,.15);color:var(--med);border:1px solid rgba(242,167,59,.4)}
.pill.LOW{background:rgba(239,81,66,.15);color:var(--lo);border:1px solid rgba(239,81,66,.4)}
.flag{font-size:8.5px;font-weight:700;width:17px;height:17px;display:grid;place-items:center;border-radius:2px}
.flag.s{background:var(--sanc);color:#fff} .flag.i{background:var(--iran);color:#04130a}
.foot{padding:9px 12px;border-top:1px solid var(--line);font-size:9.5px;color:var(--dim);line-height:1.5}

/* ============ MAIN ============ */
#main{position:relative;display:grid;grid-template-rows:1fr 168px;min-height:0;min-width:0}
#mapwrap{position:relative;min-height:0}
#map{position:absolute;inset:0}
#inset{position:absolute;top:14px;right:14px;width:288px;height:230px;border:1px solid var(--line2);
  border-radius:3px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.6);background:#0a0d12;z-index:5}
#insetmap{position:absolute;inset:0}
#inset .cap{position:absolute;top:0;left:0;right:0;z-index:6;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);background:linear-gradient(180deg,rgba(7,10,15,.9),transparent);padding:5px 8px;pointer-events:none}

/* detail header overlay (top-left of map) */
#detail{position:absolute;top:14px;left:14px;z-index:5;max-width:min(46%,560px);
  background:linear-gradient(180deg,rgba(10,14,20,.93),rgba(10,14,20,.82));border:1px solid var(--line2);
  border-left:3px solid var(--amber);border-radius:3px;padding:11px 14px;backdrop-filter:blur(3px)}
#detail .vh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
#detail .vh .id{font-family:'Saira';font-size:22px;font-weight:700;letter-spacing:.03em}
#detail .vh .cf{font-size:10px;font-weight:600;letter-spacing:.1em;padding:2px 7px;border-radius:2px;text-transform:uppercase}
#detail .alerts{display:flex;gap:6px;margin:8px 0 6px;flex-wrap:wrap}
.alert{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:2px;display:flex;gap:6px;align-items:center}
.alert.s{background:var(--sanc);color:#fff} .alert.i{background:var(--iran);color:#04130a}
#detail .grid{display:grid;grid-template-columns:repeat(4,auto);gap:3px 16px;font-size:11px;margin-top:4px}
#detail .grid .k{color:var(--muted);font-size:9px;letter-spacing:.1em;text-transform:uppercase}
#detail .grid .v{color:var(--txt);font-weight:500}
#detail .grid .v .g{color:var(--gulf)} #detail .grid .v .o{color:var(--out)}
#detail .timeline{font-size:10.5px;color:var(--muted);margin-top:7px}
#detail .timeline b{color:var(--txt);font-weight:500}

#legend{position:absolute;bottom:14px;left:14px;z-index:5;background:rgba(10,14,20,.85);border:1px solid var(--line);
  border-radius:3px;padding:8px 11px;font-size:10px;display:flex;flex-direction:column;gap:4px}
#legend .li{display:flex;align-items:center;gap:7px;color:var(--muted)}
.dot{width:11px;height:11px;border-radius:50%;flex:none}
.dot.gulf{background:var(--gulf)} .dot.out{background:var(--out)}
.dot.hollow{background:transparent;border:2px solid var(--darktrack)}
.ln{width:16px;height:0;border-top:2px solid var(--darktrack)}
.ln.dash{border-top-style:dotted}

/* ============ CHIP FILMSTRIP ============ */
#strip{background:linear-gradient(180deg,var(--bg2),var(--bg));border-top:1px solid var(--line2);
  display:flex;flex-direction:column;min-height:0}
#strip .sh{display:flex;justify-content:space-between;align-items:center;padding:6px 14px;border-bottom:1px solid var(--line)}
#strip .sh .t{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
#strip .sh .lg{font-size:9.5px;color:var(--dim);display:flex;gap:14px}
#chips{flex:1;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:10px 14px;align-items:center}
.chipcard{flex:none;width:96px;text-align:center;cursor:pointer;transition:transform .1s}
.chipcard:hover{transform:translateY(-3px)}
.chipcard img{width:96px;height:96px;object-fit:cover;border:2px solid var(--line2);border-radius:2px;display:block;background:#0a0d12}
.chipcard.gulf img{border-color:var(--gulf)} .chipcard.out img{border-color:var(--out)}
.chipcard.hot img{box-shadow:0 0 0 2px var(--amber),0 0 16px rgba(242,167,59,.5)}
.chipcard .cl{font-size:8.5px;color:var(--muted);margin-top:3px;line-height:1.3}
.chipcard .cl .r{font-weight:600} .chipcard.gulf .cl .r{color:var(--gulf)} .chipcard.out .cl .r{color:var(--out)}
.empty{color:var(--dim);font-size:11px;padding:30px;text-align:center;width:100%}

/* mapbox popup restyle */
.mapboxgl-popup-content{background:#0c1119;border:1px solid var(--line2);color:var(--txt);font-family:'PlexMono',monospace;
  font-size:10.5px;padding:8px 10px;border-radius:3px;box-shadow:0 6px 24px rgba(0,0,0,.6)}
.mapboxgl-popup-content img{width:118px;height:118px;object-fit:cover;display:block;margin-bottom:6px;border-radius:2px}
.mapboxgl-popup-tip{display:none}
.mapboxgl-ctrl-logo,.mapboxgl-ctrl-attrib{opacity:.35}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--dim)}

#loader{position:fixed;inset:0;z-index:99999;background:var(--bg);display:grid;place-items:center;transition:opacity .4s}
#loader .l{font-family:'Saira';font-size:14px;letter-spacing:.3em;color:var(--amber);text-transform:uppercase;animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
@media(max-width:880px){#app{grid-template-columns:1fr}#side{display:none}}