/* SeaTrace Pro — Naval Intelligence Console. Scoped to #stc, #st-hud, .st-* ; does not touch Bootstrap. */
:root{--st-bg0:#02070B;--st-bg1:#031018;--st-bg2:#061923;--st-bg3:#081F2A;--st-line:#0D3340;--st-line2:#134556;
--st-g:#00E676;--st-g2:#00FF88;--st-b:#38BDF8;--st-b2:#64D8FF;--st-w:#FFD166;--st-d:#FF4D67;--st-tx:#CFE8EE;--st-mu:#6E909B;
--st-mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace}

/* ---- status dots ---- */
.st-state{display:inline-flex;align-items:center;gap:6px;font:600 10px/1 var(--st-mono);letter-spacing:.12em}
.st-state i{width:7px;height:7px;border-radius:50%;background:var(--st-mu)}
.st-state.live{color:var(--st-g)}.st-state.live i{background:var(--st-g);box-shadow:0 0 6px var(--st-g)}
.st-state.stale{color:var(--st-w)}.st-state.stale i{background:var(--st-w)}
.st-state.offline{color:#7C8F97}.st-state.offline i{background:#5F7A86}
.st-state.live i{animation:stpulse 2.4s ease-in-out infinite}
@keyframes stpulse{50%{opacity:.35}}

/* ---- buttons ---- */
.st-btn{background:rgba(0,230,118,.08);color:var(--st-g2);border:1px solid rgba(0,230,118,.45);padding:5px 10px;font:600 10px/1 var(--st-mono);
letter-spacing:.12em;cursor:pointer;border-radius:1px;text-decoration:none;display:inline-block}
.st-btn:hover{background:rgba(0,230,118,.18)}.st-btn:disabled{opacity:.4;cursor:default}
.st-btn.ghost{background:transparent;color:var(--st-b2);border-color:var(--st-line2)}.st-btn.ghost:hover{border-color:var(--st-b);background:rgba(56,189,248,.08)}
.st-seg{background:transparent;color:var(--st-mu);border:1px solid var(--st-line);padding:4px 8px;font:600 10px/1 var(--st-mono);letter-spacing:.08em;cursor:pointer;margin-right:-1px;border-radius:0}
.st-seg.on{color:var(--st-g2);border-color:var(--st-g);background:rgba(0,230,118,.1);position:relative;z-index:1}

/* ---- HUD ---- */
#st-hud{position:absolute;top:16px;left:500px;z-index:5;background:rgba(2,7,11,.88);border:1px solid var(--st-line2);border-left:2px solid var(--st-g);
padding:7px 12px;font:600 10px/1.5 var(--st-mono);letter-spacing:.12em;color:var(--st-tx);pointer-events:none;min-width:150px}
#st-hud .st-hud-row{display:flex;align-items:center;gap:7px}
#st-hud .st-dot{width:7px;height:7px;border-radius:50%;background:var(--st-g);box-shadow:0 0 6px var(--st-g)}
#st-hud.warn{border-left-color:var(--st-w)}#st-hud.warn .st-dot{background:var(--st-w);box-shadow:none}
#st-hud.bad{border-left-color:var(--st-d)}#st-hud.bad .st-dot{background:var(--st-d);box-shadow:none}
#st-hud .st-hud-sub,#st-hud .st-hud-mode{color:var(--st-mu);font-weight:500}#st-hud .st-hud-sub:empty,#st-hud .st-hud-mode:empty{display:none}
@media(max-width:900px){#st-hud{left:10px;top:auto;bottom:34px}}

/* ---- search ---- */
#search-box{background:rgba(2,7,11,.92)!important;border:1px solid var(--st-line2);border-radius:1px!important;box-shadow:0 4px 18px rgba(0,0,0,.5)!important}
#search-box input{background:var(--st-bg1);color:var(--st-tx);border:1px solid var(--st-line2);border-radius:1px}
#search-box input::placeholder{color:var(--st-mu)}
#search-box .btn{background:rgba(0,230,118,.12);border:1px solid var(--st-g);color:var(--st-g2);border-radius:1px;font:600 11px var(--st-mono);letter-spacing:.1em}
#st-search-results{position:absolute;left:0;right:0;top:100%;margin-top:2px;background:var(--st-bg1);border:1px solid var(--st-line2);max-height:320px;overflow:auto;z-index:6;font-family:var(--st-mono)}
#st-search-results .sr-h{padding:7px 10px;font-size:9px;letter-spacing:.2em;color:var(--st-mu);border-bottom:1px solid var(--st-line)}
#st-search-results .sr-e{padding:9px 10px;font-size:10px;letter-spacing:.1em;color:var(--st-w)}
#st-search-results .sr-i{display:block;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--st-line);padding:8px 10px;color:var(--st-tx);cursor:pointer}
#st-search-results .sr-i:hover{background:rgba(0,230,118,.08)}
#st-search-results .sr-i b{display:block;font-size:12px;color:#fff;letter-spacing:.04em}
#st-search-results .sr-i span{font-size:10px;color:var(--st-mu);letter-spacing:.06em}

/* ---- compact popup (Mapbox override) ---- */
.st-popup .mapboxgl-popup-content{background:var(--st-bg1);border:1px solid var(--st-line2);border-top:2px solid var(--st-g);border-radius:1px;padding:10px 12px;box-shadow:0 6px 24px rgba(0,0,0,.6);color:var(--st-tx)}
.st-popup .mapboxgl-popup-tip{border-top-color:var(--st-line2)!important;border-bottom-color:var(--st-line2)!important}
.st-pop-name{font:700 13px/1.2 system-ui,sans-serif;color:#fff;margin-bottom:2px}
.st-pop-type{font:500 9px var(--st-mono);letter-spacing:.14em;color:var(--st-b2);margin-bottom:8px}
.st-pop-grid{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font:500 11px var(--st-mono);margin-bottom:9px}
.st-pop-grid span{color:var(--st-mu);letter-spacing:.1em}.st-pop-grid b{color:var(--st-g2);font-weight:600}
.st-pop-foot{display:flex;justify-content:space-between;align-items:center;gap:12px}

/* ---- console ---- */
#stc{position:fixed;top:0;right:0;bottom:0;width:min(540px,100vw);z-index:1040;pointer-events:none;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--st-tx)}
#stc[hidden]{display:none}
#stc .stc-frame{pointer-events:auto;height:100%;display:flex;flex-direction:column;background:
 linear-gradient(rgba(13,51,64,.18) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(13,51,64,.18) 1px,transparent 1px) 0 0/28px 28px,
 linear-gradient(180deg,var(--st-bg1),var(--st-bg0));border-left:1px solid var(--st-line2);box-shadow:-12px 0 40px rgba(0,0,0,.55);transform:translateX(18px);opacity:0;transition:transform .18s ease,opacity .18s ease;overflow:hidden;position:relative}
#stc.in .stc-frame{transform:none;opacity:1}
#stc .stc-frame:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(var(--st-g),transparent 70%)}
.stc-head{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--st-line);background:rgba(2,7,11,.7);position:relative;overflow:hidden}
.stc-head:after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--st-g),transparent);opacity:.5}
.stc-radar{width:26px;height:26px;fill:none;stroke:var(--st-g);stroke-width:2;opacity:.8;flex:none}
.stc-brand{font:700 11px var(--st-mono);letter-spacing:.18em;color:#fff;flex:1}.stc-brand i{color:var(--st-g);font-style:normal}
.stc-sig{font:500 9px var(--st-mono);letter-spacing:.14em;color:var(--st-mu);display:flex;align-items:center;gap:8px}
.stc-sig .st-state b{font-weight:700}
.stc-x{background:transparent;border:1px solid var(--st-line2);color:var(--st-tx);width:28px;height:28px;cursor:pointer;border-radius:1px;font-size:12px}.stc-x:hover{border-color:var(--st-d);color:var(--st-d)}
.stc-ident{padding:12px 16px 10px;border-bottom:1px solid var(--st-line)}
.stc-name{font:700 21px/1.15 system-ui,sans-serif;color:#fff;letter-spacing:.01em}
.stc-ids{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font:500 10px var(--st-mono);letter-spacing:.08em;color:var(--st-mu)}
.stc-ids b{color:var(--st-tx);font-weight:600}.stc-ids em{font-style:normal;color:var(--st-mu)}
.stc-ids .stat{color:var(--st-b2)}
.stc-tools{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.stc-tools .bookmark-toggle{font-size:14px;padding:3px 10px;color:var(--st-w);border-color:rgba(255,209,102,.5);background:rgba(255,209,102,.06)}
.stc-grid{flex:1;overflow-y:auto;padding:12px 14px 24px;display:grid;grid-template-columns:1fr;gap:10px;align-content:start;scrollbar-width:thin;scrollbar-color:var(--st-line2) transparent}
.stc-sec{border:1px solid var(--st-line);background:rgba(6,25,35,.72);position:relative}
.stc-sec:before{content:"";position:absolute;left:-1px;top:-1px;width:8px;height:8px;border-left:1px solid var(--st-g);border-top:1px solid var(--st-g)}
.stc-sh{display:flex;justify-content:space-between;gap:10px;padding:6px 10px;border-bottom:1px solid var(--st-line);background:rgba(2,7,11,.5);font:600 9px var(--st-mono);letter-spacing:.2em}
.stc-st{color:var(--st-g)}.stc-src{color:var(--st-mu);letter-spacing:.1em;text-align:right}
.stc-sb{padding:9px 10px}
.stc-r{display:flex;align-items:baseline;gap:10px;padding:3px 0;border-bottom:1px dotted rgba(19,69,86,.55);font:500 11px var(--st-mono)}
.stc-r:last-child{border-bottom:0}
.stc-r span{color:var(--st-mu);letter-spacing:.1em;min-width:104px;font-size:10px}
.stc-r b{color:var(--st-tx);font-weight:600;letter-spacing:.03em;flex:1;word-break:break-word}
.stc-r em{font-style:normal;font-size:8px;letter-spacing:.12em;color:var(--st-b);border:1px solid var(--st-line2);padding:1px 4px}
.stc-live{display:flex;gap:12px;align-items:center}.stc-rows{flex:1;min-width:0}
.stc-compass{width:96px;height:96px;flex:none;fill:none;stroke:var(--st-line2);stroke-width:1}
.stc-compass .f{stroke:var(--st-line)}.stc-compass .t{fill:var(--st-mu);stroke:none;font:600 8px var(--st-mono);text-anchor:middle;dominant-baseline:middle}
.stc-compass .n{fill:var(--st-g2);stroke:none}.stc-compass .c{stroke:var(--st-w);stroke-width:2}.stc-compass .d{fill:var(--st-g);stroke:none}
.stc-note{margin-top:8px;padding:6px 8px;border:1px solid rgba(255,209,102,.35);color:var(--st-w);font:500 10px/1.4 var(--st-mono);letter-spacing:.06em;background:rgba(255,209,102,.05)}
.stc-flag{margin:6px 0;padding:4px 8px;border-left:2px solid var(--st-w);font:600 9px var(--st-mono);letter-spacing:.12em;color:var(--st-w)}.stc-flag em{font-style:normal;color:var(--st-mu);margin-left:6px}
.stc-flag.mute{border-left-color:var(--st-line2);color:var(--st-mu)}
.stc-msg{display:flex;flex-direction:column;gap:3px;padding:8px 10px;border:1px dashed var(--st-line2);font:600 10px var(--st-mono);letter-spacing:.14em;color:var(--st-tx);align-items:flex-start;margin-bottom:6px}
.stc-msg span{color:var(--st-mu);font-weight:500}.stc-msg .st-btn{margin-top:6px}
.stc-skel{height:12px;margin:8px 0;background:linear-gradient(90deg,var(--st-bg3),var(--st-line),var(--st-bg3));background-size:200% 100%;animation:stsk 1.4s linear infinite}
@keyframes stsk{to{background-position:-200% 0}}
.stc-img{position:relative;aspect-ratio:16/9;background:var(--st-bg0);border:1px solid var(--st-line);overflow:hidden;display:flex;align-items:center;justify-content:center}
.stc-img img{width:100%;height:100%;object-fit:cover;display:block;animation:stfade .35s ease}@keyframes stfade{from{opacity:0}}
.stc-img .c{position:absolute;width:12px;height:12px;border:0 solid var(--st-g)}.stc-img .tl{left:4px;top:4px;border-left-width:1px;border-top-width:1px}
.stc-img .tr{right:4px;top:4px;border-right-width:1px;border-top-width:1px}.stc-img .bl{left:4px;bottom:4px;border-left-width:1px;border-bottom-width:1px}.stc-img .br{right:4px;bottom:4px;border-right-width:1px;border-bottom-width:1px}
.stc-img.ph span{position:absolute;bottom:8px;left:0;right:0;text-align:center;font:600 9px var(--st-mono);letter-spacing:.2em;color:var(--st-mu)}
.stc-sil{width:62%;fill:rgba(0,230,118,.06);stroke:var(--st-g);stroke-width:1.2;opacity:.75}.stc-sil .w{fill:none;stroke:var(--st-b);opacity:.6}.stc-sil .g{fill:none;stroke:var(--st-line2);stroke-width:.6}
.stc-ranges{display:flex;margin-bottom:8px}
.stc-trk{display:flex;flex-wrap:wrap;gap:4px 14px;font:500 10px var(--st-mono);letter-spacing:.08em;color:var(--st-mu);margin:6px 0}
.stc-replay{margin-top:8px;padding:8px;border:1px solid var(--st-line);background:rgba(2,7,11,.5);display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center}
.stc-replay input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--st-g)}.stc-replay .stc-rr{grid-column:1/-1}
.stc-speeds{display:flex}
.stc-tlh{margin:10px 0 4px;font:600 9px var(--st-mono);letter-spacing:.2em;color:var(--st-mu)}
.stc-tl{list-style:none;margin:0;padding:0 0 0 12px;border-left:1px solid var(--st-line2)}
.stc-tl li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:0 8px;padding:5px 0;font:500 10px var(--st-mono)}
.stc-tl li:before{content:"";position:absolute;left:-16px;top:10px;width:7px;height:7px;background:var(--st-bg0);border:1px solid var(--st-b)}
.stc-tl li.sig:before{border-color:var(--st-g);background:var(--st-g)}.stc-tl li.gap:before{border-color:var(--st-w)}
.stc-tl time{color:var(--st-mu)}.stc-tl b{color:var(--st-tx);letter-spacing:.1em;font-weight:600}.stc-tl span{grid-column:2;color:var(--st-mu);letter-spacing:.04em}

/* ---- responsive: tablet two-column, phone full-screen with a priority order ---- */
@media(min-width:680px) and (max-width:1100px){#stc{width:min(760px,100vw)}.stc-grid{grid-template-columns:1fr 1fr}#stc-track,#stc-activity{grid-column:1/-1}}
@media(max-width:680px){
 #stc{width:100vw}#stc .stc-frame{border-left:0}.stc-name{font-size:18px}
 .stc-grid{display:flex;flex-direction:column}
 #stc-live{order:1}#stc-image{order:2}#stc-nav{order:3}#stc-track{order:4}#stc-activity{order:5}#stc-part{order:6}
 .stc-r span{min-width:84px}.stc-compass{width:80px;height:80px}
}
@media(prefers-reduced-motion:reduce){#stc .stc-frame{transition:none}.st-state.live i{animation:none}.stc-skel{animation:none}}
/* keep the Mapbox attribution/controls clear of the console on desktop */
body.stc-open .mapboxgl-ctrl-top-right{margin-right:540px}
@media(max-width:1100px){body.stc-open .mapboxgl-ctrl-top-right{margin-right:0}}

/* ---- marker legend + hover popup ---- */
#st-hud .st-legend{display:flex;flex-wrap:wrap;gap:3px 10px;margin-top:6px;padding-top:6px;border-top:1px solid var(--st-line);font-weight:500;color:var(--st-mu);font-size:9px;max-width:300px}
#st-hud .st-legend i{display:inline-block;width:9px;height:9px;margin-right:4px;border-radius:50%;vertical-align:-1px;box-shadow:0 0 0 1px rgba(2,7,11,.9)}
.st-hover{pointer-events:none}
.st-hover .mapboxgl-popup-content{pointer-events:none}
.st-pop-hint{font:500 8px var(--st-mono);letter-spacing:.14em;color:var(--st-mu)}