/* ═══════════════════════════════════════════════════════════════
   ORBITAL EXPLOIT — Mission Control Dashboard
   Dark space theme · JetBrains Mono · Real-time telemetry
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg:         #000508;
  --bg-panel:   #05090f;
  --bg-card:    #080e18;
  --bg-inset:   #0b1422;
  --border:     #111e2e;
  --border-hi:  #1a2e44;

  --iss:        #0099ff;
  --iss-dim:    rgba(0,153,255,0.07);
  --iss-glow:   0 0 14px rgba(0,153,255,0.28);

  --red:        #ff2222;
  --red-dim:    rgba(255,34,34,0.10);

  --green:      #00cc66;
  --green-dim:  rgba(0,204,102,0.08);

  --amber:      #ff9900;
  --amber-dim:  rgba(255,153,0,0.10);

  --teal:       #00d4aa;
  --teal-dim:   rgba(0,212,170,0.08);

  /* legacy aliases */
  --ok:         #00cc66;
  --warn:       #ff9900;
  --warn-dim:   rgba(255,153,0,0.10);
  --crit:       #ff2222;
  --crit-dim:   rgba(255,34,34,0.10);

  --text:       #b0c4d8;
  --text-mid:   #304c64;
  --text-dim:   #182434;

  --metal-1:   #101923;   /* console-module bezel gradient, top */
  --metal-2:   #080d15;   /* console-module bezel gradient, bottom */
  --bevel-hi:  rgba(255,255,255,.05);
  --bevel-lo:  rgba(0,0,0,.55);

  --f: 'JetBrains Mono', 'Courier New', monospace;
  --r: 3px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f);
  font-size: 12px;
  overflow: hidden;
  line-height: 1.4;
}

/* Subtle scanline texture */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.04) 3px,
    rgba(0,0,0,0.04) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ── LAYOUT ───────────────────────────────────────────────────────── */
/* Two independent header cells side by side, not one bar spanning both columns: .side-head owns
   only the sidebar's width (just a title, no controls), .map-topbar owns only the map's width
   (every control that used to be in a page-wide topbar, minus the logo). They share a row so
   they line up horizontally, but nothing in one affects the other's layout. */
.layout {
  display: grid;
  grid-template:
    "sidehead maphead" auto
    "left     map"     1fr
    / 480px 1fr;
  height: 100vh;
  gap: 1px;
  background: #020810;
}

/* First media query in this codebase — defensive only, keeps the sidebar at (near)
   today's width on small laptop screens rather than crushing the map. */
@media (max-width: 1200px) {
  .layout { grid-template-columns: 400px 1fr; }
}
.layout.signal-interference { animation: interference .22s; }
@keyframes interference { 0%,100%{opacity:1;filter:none} 15%{opacity:.35;filter:brightness(3) contrast(1.6)} 30%{opacity:1;filter:none} 45%{opacity:.55;filter:brightness(2.2)} 60%{opacity:1;filter:none} }

/* ── SIDEBAR TITLE (its own header cell, not shared with the map side) ─── */
.side-head {
  grid-area: sidehead;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 12px 20px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}
.side-head-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.side-head-title {
  font-size: 15px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: var(--text);
}

/* ── MAP-SIDE HEADER (spans only the map column; no logo) ──────────────── */
.map-topbar {
  grid-area: maphead;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  min-height: 96px;
  padding: 12px 16px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.tb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; row-gap: 6px; }
.tb-row-main    { width: 100%; justify-content: flex-end; }
.tb-row-actions { width: 100%; justify-content: flex-end; }

.tb-pill {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 12px;
  border: 1px solid var(--border-hi);
  border-radius: 20px;
  background: var(--iss-dim);
  cursor: default;
  transition: border-color .3s, background .3s;
  flex-shrink: 0;
}
.tb-pill.pill-ok   { border-color: rgba(0,153,255,0.25); }
.tb-pill.pill-warn { border-color: rgba(255,153,0,.40); background: var(--amber-dim); }
.tb-pill.pill-crit { border-color: rgba(255,34,34,.50); background: var(--red-dim); animation: crit-flash .8s infinite; }
.tb-pill.pill-lost { border-color: var(--border); background: rgba(255,255,255,.02); }

.tb-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-dim); flex-shrink: 0;
}
.tb-dot.dot-iss   { background: var(--iss);  box-shadow: 0 0 6px var(--iss);  animation: blink 2s infinite; }
.tb-dot.dot-warn  { background: var(--warn); box-shadow: 0 0 6px var(--warn); animation: blink 1s infinite; }
.tb-dot.dot-crit  { background: var(--crit); box-shadow: 0 0 6px var(--crit); animation: blink .5s infinite; }
.tb-dot.dot-lost  { background: var(--border-hi); }

.tb-pill-name { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--text); white-space: nowrap; }
.tb-pill-mode { font-size: 9px; letter-spacing: 1.5px; color: var(--text-mid); white-space: nowrap; }

/* ── View toggle (MAP / STATION) ──────────────────────────────────── */
.view-toggle {
  position:relative; display:flex; align-items:center; flex-shrink:0;
  border:1px solid var(--border-hi); border-radius:20px;
  background:var(--bg-card); padding:3px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5);
}
.view-toggle::before {
  content:''; position:absolute; top:3px; left:3px;
  width:calc(50% - 3px); height:calc(100% - 6px);
  background:linear-gradient(135deg, var(--iss), #33c3ff); border-radius:16px; z-index:0;
  box-shadow:0 0 12px rgba(0,153,255,.55), 0 1px 3px rgba(0,0,0,.35);
  transition:transform .22s cubic-bezier(.4,0,.2,1), background .22s ease, box-shadow .22s ease;
}
.view-toggle.station-active::before {
  transform:translateX(100%);
  background:linear-gradient(135deg, var(--teal), #33ffd9);
  box-shadow:0 0 12px rgba(0,212,170,.55), 0 1px 3px rgba(0,0,0,.35);
}
.vt-btn {
  position:relative; z-index:1; flex:1 1 0; width:80px; text-align:center;
  padding:6px 0; border:none; background:transparent;
  color:var(--text-mid); font-family:var(--f); font-size:9.5px; font-weight:700;
  letter-spacing:1.5px; border-radius:16px; cursor:pointer; transition:color .18s ease;
}
.vt-btn:not(.active):hover { color:var(--text); }
.vt-btn.active { color:#02141f; }

/* ── Master alarm bar (shared across both views, Section 4.6) ───────── */
.master-alarm-bar {
  grid-area:map; align-self:start; justify-self:stretch; z-index:700;
  display:flex; align-items:center; gap:8px;
  padding:0 16px; max-height:0; opacity:0; overflow:hidden; pointer-events:none;
  font-size:10px; font-weight:700; letter-spacing:1.5px;
  border-bottom:1px solid transparent; background:var(--bg-panel);
  transition:max-height .25s ease, opacity .25s ease, padding .25s ease;
}
.master-alarm-bar.show { max-height:30px; opacity:1; padding:8px 16px; pointer-events:auto; }
.master-alarm-bar.tone-warn { background:var(--amber-dim); color:var(--amber); border-bottom-color:rgba(255,153,0,.4); animation:alarm-pulse-warn .9s infinite; }
.master-alarm-bar.tone-crit { background:var(--red-dim);   color:var(--crit); border-bottom-color:rgba(255,34,34,.5); animation:alarm-pulse-crit .5s infinite; }
.master-alarm-bar.tone-lost { background:#0a0606; color:var(--text-mid); border-bottom-color:var(--border); }

@keyframes alarm-pulse-warn { 0%,100%{opacity:1} 50%{opacity:.55} }
@keyframes alarm-pulse-crit { 0%,100%{opacity:1;filter:brightness(1)} 50%{opacity:.6;filter:brightness(1.5)} }

@keyframes master-alarm-flash { 0%{filter:none} 12%{filter:brightness(1.8) saturate(1.4)} 25%{filter:none} 40%{filter:brightness(1.5)} 55%{filter:none} }
.layout.master-alarm-flash { animation:master-alarm-flash .5s ease; }

.station-view { position:relative; grid-area:map; height:100%; display:flex; flex-direction:column; background:var(--bg); overflow:hidden; }

/* Status chips */
.tb-chips { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.tb-chip {
  display: flex; align-items: center; gap: 5px;
  font-size: 8.5px; letter-spacing: 1px;
  color: var(--text-mid);
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--bg-card);
  flex-shrink: 0; white-space: nowrap;
}
/* Least essential topbar content (informational badges, not controls) — first to go so the
   pill/toggle/clocks never have to shrink or overlap on a narrower window. */
@media (max-width: 1300px) {
  .tb-chips { display: none; }
}
.chip-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.chip-live { background: var(--green); box-shadow: 0 0 4px var(--green); animation: blink 2.5s infinite; }

.tb-clock-block {
  display: flex; flex-direction: column; align-items: flex-end;
  flex-shrink: 0;
}
.tb-clock-label { font-size: 8px; letter-spacing: 2px; color: var(--text-mid); white-space: nowrap; }
.tb-clock-val   { font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--text); white-space: nowrap; }

.help-btn { width:22px; height:22px; border-radius:50%; background:transparent;
  border:1px solid var(--border-hi); color:var(--text-mid); font-family:var(--f); font-size:11px;
  font-weight:700; cursor:pointer; flex-shrink:0; transition:border-color .15s,color .15s,background .15s; }
.help-btn:hover { border-color:var(--iss); color:var(--iss); background:var(--iss-dim); }

.manual-btn {
  padding:5px 12px; border-radius:3px; flex-shrink:0; white-space:nowrap;
  background:transparent; border:1px solid var(--border-hi); color:var(--text-mid);
  font-family:var(--f); font-size:9px; font-weight:700; letter-spacing:1.5px;
  text-decoration:none; cursor:pointer; transition:border-color .15s,color .15s,background .15s;
}
.manual-btn:hover { border-color:var(--teal); color:var(--teal); background:var(--teal-dim); }

@keyframes blink      { 0%,100%{opacity:1} 50%{opacity:.2}  }
@keyframes crit-flash { 0%,100%{opacity:1} 50%{opacity:.5}  }
@keyframes ripple     { 0%{transform:scale(.5);opacity:.9} 100%{transform:scale(2.5);opacity:0} }
@keyframes pulse-in   { 0%{opacity:0;transform:translateY(4px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes mode-flash { 0%{transform:scale(1);filter:brightness(1)} 30%{transform:scale(1.16);filter:brightness(1.6)} 100%{transform:scale(1);filter:brightness(1)} }
.flash-once { animation: mode-flash .5s ease; }

/* ── LEFT PANEL ───────────────────────────────────────────────────── */
.panel {
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 640px 260px at 50% -8%, rgba(0,153,255,.05), transparent 60%),
    linear-gradient(180deg, #0a0f17, var(--bg-panel) 60%);
  overflow-y: auto; overflow-x: hidden;
  position: relative;
  padding-bottom: 20px;
  scrollbar-width: thin; scrollbar-color: var(--border-hi) transparent; /* Firefox */
}
/* Chromium/WebKit: an overlay-style scrollbar, invisible at rest, that fades in on hover or
   while actively scrolling (.scrolling toggled in app.js on the 'scroll' event) and fades back
   out after it stops, rather than sitting there as a permanent thick bar. */
.panel::-webkit-scrollbar { width: 5px; }
.panel::-webkit-scrollbar-track { background: transparent; }
.panel::-webkit-scrollbar-thumb {
  background: rgba(26,46,68,0); border-radius: 3px;
  transition: background .35s ease;
}
.panel:hover::-webkit-scrollbar-thumb,
.panel.scrolling::-webkit-scrollbar-thumb {
  background: var(--border-hi);
}
.panel::-webkit-scrollbar-thumb:hover { background: var(--iss); }

/* Mode badges */
.mode-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 2px;
  padding: 3px 8px; border-radius: 3px;
  box-shadow: inset 0 0 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08), 0 0 8px currentColor;
}
.mode-nominal   { background: rgba(0,204,102,.09);  color: var(--green); border: 1px solid rgba(0,204,102,.22); }
.mode-safe      { background: rgba(255,153,0,.09);   color: var(--amber); border: 1px solid rgba(255,153,0,.28); animation: blink .9s infinite; }
.mode-emergency { background: var(--red-dim);        color: var(--crit);  border: 1px solid rgba(255,34,34,.40); animation: blink .5s infinite; }
.mode-lost      { background: rgba(20,35,50,.2);     color: var(--text-mid); border: 1px solid var(--border); }

/* Lives in the topbar now (next to the ISS pill), not the sidebar, so it reads as a primary,
   always-visible action rather than a buried per-panel control: given red weight to match. */
.reset-btn {
  flex-shrink: 0; white-space: nowrap;
  padding: 5px 12px;
  background: var(--red-dim);
  border: 1px solid rgba(255,34,34,.4);
  color: var(--crit);
  font-family: var(--f); font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  cursor: pointer; border-radius: 3px;
  transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 3px rgba(0,0,0,.4);
}
.reset-btn:hover { border-color: var(--crit); color:#fff; background: rgba(255,34,34,.28); box-shadow: 0 0 10px rgba(255,34,34,.35), inset 0 1px 0 rgba(255,255,255,.08); }
.reset-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 3px rgba(0,0,0,.6); }
.reset-btn:disabled { opacity: .5; cursor: default; }

/* ── Console modules (bezeled instrument clusters, replaces flat sections) ──────── */
.console-module {
  position: relative;
  margin: 0 10px 10px;
  padding: 12px 14px 14px;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%),
    linear-gradient(165deg, var(--metal-1), var(--metal-2));
  box-shadow:
    inset 1px 1px 0 var(--bevel-hi),
    inset -1px -1px 0 var(--bevel-lo),
    0 2px 6px rgba(0,0,0,.4);
}

.console-module::after {
  content: '';
  position: absolute; inset: 0; border-radius: 4px; pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
  background-size:
    11px 2px, 2px 11px,  11px 2px, 2px 11px,
    11px 2px, 2px 11px,  11px 2px, 2px 11px;
  background-position:
    top 6px left 6px,     top 6px left 6px,
    top 6px right 6px,    top 6px right 6px,
    bottom 6px left 6px,  bottom 6px left 6px,
    bottom 6px right 6px, bottom 6px right 6px;
  opacity: .55;
}

.module-power  { --accent: var(--iss); }
.module-orbit  { --accent: var(--teal); }
.module-ground { --accent: var(--teal); }
.module-scope  { --accent: var(--iss); }

/* ── Section Headers ──────────────────────────────────────────────── */
.sec-hdr {
  font-size: 8px; font-weight: 700; letter-spacing: 3px;
  color: var(--text-mid);
  padding: 10px 12px 6px;
  display: flex; align-items: center; gap: 8px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,.7), 0 -1px 0 rgba(255,255,255,.04);
}
.sec-hdr::after {
  content: ''; flex: 1; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, var(--accent, var(--iss)), transparent);
  box-shadow: 0 0 6px var(--accent, var(--iss));
}
.rec-dot {
  font-size: 7.5px; letter-spacing: 1px; color: var(--crit);
  animation: blink 1.4s infinite; cursor: pointer;
}

/* ── Battery ──────────────────────────────────────────────────────── */
.bat-block { padding: 4px 12px 4px; }
.bat-row {
  display: flex; justify-content: space-between;
  align-items: baseline; margin-bottom: 7px;
}
.bat-label { font-size: 9px; color: var(--text-mid); letter-spacing: 1px; }
.bat-pct   { font-size: 22px; font-weight: 700; color: var(--text); transition: color .5s; }
.bat-pct.warn { color: var(--amber); }
.bat-pct.crit { color: var(--crit); animation: blink .7s infinite; }

.bat-arc-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; margin-bottom:8px; }
.dash-bat-arc { width:150px; height:85px; }
.dash-bat-arc-track { fill:none; stroke:var(--border); stroke-width:4; }
.dash-bat-arc-fill  { fill:none; stroke:var(--iss); stroke-width:4; stroke-linecap:round;
                       transition:stroke-dashoffset 1s ease, stroke .5s; }
.dash-bat-arc-fill.tier-warn { stroke:var(--amber); }
.dash-bat-arc-fill.tier-crit { stroke:var(--crit); animation:blink .8s infinite; }
.dash-bat-arc-val { font-size:20px; font-weight:700; color:var(--text); text-shadow:0 0 8px currentColor; }
.dash-bat-arc-val.tier-warn { color:var(--amber); }
.dash-bat-arc-val.tier-crit { color:var(--crit); animation:blink .7s infinite; }

.bat-track {
  height: 10px; background: var(--bg-inset);
  border-radius: 3px; overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
}
.bat-track::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 3px;
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(2,6,10,.55) 7px 9px);
}
.bat-fill {
  height: 100%; border-radius: 3px;
  transition: width 1s ease, background .5s;
}
.iss-fill       { background: linear-gradient(90deg, #0044bb, #0099ff 55%, #55ccff); }
.bat-fill.bat-warn { background: linear-gradient(90deg, #994400, var(--amber)) !important; }
.bat-fill.bat-crit { background: linear-gradient(90deg, #660000, var(--crit)) !important; animation: blink .8s infinite; }

.bat-ticks {
  display: flex; justify-content: space-between;
  font-size: 7px; color: var(--text-dim);
  margin-top: 4px; padding: 0 1px;
}

@keyframes bat-gulp  { 0%,100%{opacity:1} 40%{opacity:.35} 70%{opacity:.8} }
.bat-fill.gulp { animation: bat-gulp .5s ease; }
@keyframes pct-pulse { 0%{transform:scale(1)} 40%{transform:scale(1.25)} 100%{transform:scale(1)} }
.bat-pct.pulse { animation: pct-pulse .45s ease; }

/* Battery threshold-crossing banner */
.batt-banner { margin:0 12px 8px; padding:5px 9px; border-radius:var(--r); font-size:9px; letter-spacing:.5px; border:1px solid transparent; opacity:0; max-height:0; overflow:hidden; transition:opacity .25s, max-height .25s; }
.batt-banner.show { opacity:1; max-height:24px; }
.batt-banner.warn-tone { background:var(--amber-dim); border-color:rgba(255,153,0,.35); color:var(--amber); }
.batt-banner.crit-tone { background:var(--red-dim); border-color:rgba(255,34,34,.4); color:var(--crit); }
.batt-banner.ok-tone   { background:var(--green-dim); border-color:rgba(0,204,102,.3); color:var(--green); }

/* ── Power Rails ──────────────────────────────────────────────────── */
.rails-block { padding: 4px 12px 10px; }
.rails-label { font-size: 7.5px; letter-spacing: 2px; color: var(--text-mid); margin-bottom: 6px; }
.rails-row   { display: flex; gap: 5px; }

.rail-indicator {
  flex: 1; display:flex; flex-direction:column; align-items:center; gap:5px;
  padding: 9px 6px 8px;
  background: linear-gradient(180deg, #161d27, #0a0e15);
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -2px 3px rgba(0,0,0,.5);
  transition: border-color .3s, background .3s;
}
.rail-indicator.live { border-color: rgba(0,204,102,.25); }
.rail-indicator.dead { border-color: rgba(255,34,34,.35); }

.rail-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--text-dim); transition: background .3s, box-shadow .3s;
}
.rail-dot.rail-live { background: var(--green); box-shadow: 0 0 5px var(--green); animation: blink 3s infinite; }
.rail-dot.rail-dead { background: var(--crit);  box-shadow: 0 0 5px var(--crit);  animation: blink .6s infinite; }

.rail-paddle {
  width: 22px; height: 12px; border-radius: 3px;
  background: linear-gradient(180deg, #232b36, #0b0f15);
  border: 1px solid #050709;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.rail-indicator.live .rail-paddle { transform: translateY(-1px); box-shadow: inset 0 1px 1px rgba(255,255,255,.08), 0 0 7px rgba(0,204,102,.55); }
.rail-indicator.dead .rail-paddle { transform: translateY(1px);  box-shadow: inset 0 1px 1px rgba(255,255,255,.05), 0 0 7px rgba(255,34,34,.45); }

.rail-name   { font-size: 8px; letter-spacing: 1px; color: var(--text-mid); }
.rail-status { font-size: 8px; font-weight: 700; letter-spacing: 1px; color: var(--text-dim); }
.rail-indicator.live .rail-status { color: var(--green); }
.rail-indicator.dead .rail-status { color: var(--crit); }

@keyframes rail-trip { 0%{transform:translateX(0);filter:brightness(1)} 20%{transform:translateX(-3px);filter:brightness(2.4)} 40%{transform:translateX(3px)} 60%{transform:translateX(-2px)} 80%{transform:translateX(1px)} 100%{transform:translateX(0);filter:brightness(1)} }
.rail-indicator.trip { animation: rail-trip .4s ease; }

/* extends the EXISTING .rail-indicator.trip keyframe (rail-trip, unchanged) with a
   matching paddle-snap, driven by the same .trip class app.js already adds/removes */
.rail-indicator.trip .rail-paddle { animation: paddle-snap .4s ease; }
@keyframes paddle-snap {
  0%   { transform: translateY(-1px); }
  30%  { transform: translateY(2px) rotate(-3deg); }
  60%  { transform: translateY(-2px) rotate(2deg); }
  100% { transform: translateY(1px); }
}

/* ── Data Grid ────────────────────────────────────────────────────── */
.data-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; padding: 0 12px 10px;
}
.dc {
  background: var(--bg-card);
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  display: flex; flex-direction: column; gap: 4px;
}
.dc.span2  { grid-column: span 2; }
.dc-lbl    { font-size: 7.5px; letter-spacing: 2px; color: var(--text-mid); }
.dc-val    { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: .5px; }
.dc-val.warn { color: var(--amber); }
.dc-val.crit { color: var(--crit); }
.dc-val.ok   { color: var(--green); }
.iss-sol     { color: var(--iss); }
.sol-eclipse { color: var(--text-mid) !important; }
.mono-sm     { font-size: 11px; }

.data-grid.detail-grid .dc { padding: 6px 8px 6px 10px; }
.data-grid.detail-grid .dc-val { font-size: 12px; }

.dc { position: relative; }
.dc-val { font-variant-numeric: tabular-nums; text-shadow: 0 0 6px currentColor; }

.dc-gauge { padding-right: 20px !important; }
.dc-tape {
  position: absolute; top: 8px; right: 8px; bottom: 8px; width: 4px;
  background: var(--bg-inset); border: 1px solid var(--border); border-radius: 2px; overflow: hidden;
}
.dc-tape-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: linear-gradient(180deg, #0044bb, var(--iss));
  box-shadow: 0 0 6px rgba(0,153,255,.5);
  transition: height .6s ease;
}
/* Temperature is the one tile with real warn/crit thresholds in app.js today (see setDcVal
   call for iss-temp) — mirror that existing color via :has(), no extra JS needed for color. */
.dc:has(.dc-val.warn) .dc-tape-fill { background: linear-gradient(180deg,#994400,var(--amber)); box-shadow:0 0 6px rgba(255,153,0,.5); }
.dc:has(.dc-val.crit) .dc-tape-fill { background: linear-gradient(180deg,#660000,var(--crit));  box-shadow:0 0 6px rgba(255,34,34,.5); animation: blink .8s infinite; }

/* ── Ground Stations ──────────────────────────────────────────────── */
.gs-list { padding: 0 12px 10px; display: flex; flex-direction: column; gap: 3px; }
.gs-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg-card);
  font-size: 10px;
}
.gs-row.waiting { color: var(--text-mid); font-style: italic; justify-content: center; font-size: 9px; }
.gs-row.gs-los  { color: var(--text-mid); }
.gs-row.gs-aos  { color: var(--green); border-color: rgba(0,204,102,.28); background: rgba(0,204,102,.04); }

.gs-row { position: relative; padding-left: 14px; }
.gs-row::before {
  content: ''; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--text-dim);
}
.gs-row.gs-aos::before { background: var(--green); box-shadow: 0 0 5px var(--green); animation: blink 2.5s infinite; }
.gs-row.gs-los::before { background: var(--border-hi); }
.gs-name { font-weight: 700; letter-spacing: 1px; }
.gs-el   { font-size: 9px; color: inherit; }
.gs-tag  { font-size: 8px; letter-spacing: 1px; padding: 1px 5px; border-radius: 2px; }
.gs-tag.aos-tag { background: rgba(0,204,102,.12); color: var(--green); border: 1px solid rgba(0,204,102,.25); }
.gs-tag.los-tag { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }

/* ── Charts ───────────────────────────────────────────────────────── */
.chart-bank {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border-hi); border-radius: 4px;
  background:
    repeating-linear-gradient(0deg,  transparent 0 11px, rgba(0,153,255,.025) 11px 12px),
    repeating-linear-gradient(90deg, transparent 0 11px, rgba(0,153,255,.025) 11px 12px),
    var(--bg-inset);
}
.chart-row {
  padding: 8px 10px; border-right: 1px solid var(--border);
  /* Grid items default to min-width:auto (content's intrinsic size). A bare <canvas> defaults
     to 300px wide before Chart.js's responsive resize gets a chance to run, so without this the
     grid track grows to fit that 300px and three columns blow the sidebar out to 900px+. */
  min-width: 0;
}
.chart-row:last-child { border-right: none; }
.chart-meta {
  display: flex; justify-content: space-between;
  align-items: baseline; margin-bottom: 4px;
}
.ch-lbl { font-size: 8.5px; letter-spacing: 2px; color: var(--text-mid); }
.ch-now { font-size: 13px; font-weight: 700; color: var(--text); }
.chart-wrap { height: 58px; width: 100%; min-width: 0; position: relative; }

/* ── MAP ──────────────────────────────────────────────────────────── */
.map-area { grid-area: map; position: relative; background: var(--bg); }
#map { width: 100%; height: 100%; background: #000508; }

/* Coordinate HUD */
.coord-hud {
  position: absolute;
  bottom: 52px; left: 14px;
  background: rgba(5,9,15,0.92);
  border: 1px solid var(--border-hi);
  border-radius: var(--r);
  padding: 10px 14px;
  z-index: 500;
  backdrop-filter: blur(6px);
  min-width: 175px;
  animation: pulse-in .4s ease;
}
.hud-title {
  font-size: 7.5px; font-weight: 700; letter-spacing: 3px;
  color: var(--iss); margin-bottom: 8px;
  text-shadow: 0 0 8px rgba(0,153,255,0.35);
}
.hud-grid {
  display: grid; grid-template-columns: 26px 1fr;
  gap: 4px 8px; align-items: baseline;
}
.hud-lbl { font-size: 8px; letter-spacing: 1px; color: var(--text-mid); }
.hud-val { font-size: 11px; font-weight: 700; color: var(--text); letter-spacing: .5px; }

.map-legend {
  position: absolute;
  bottom: 14px; right: 14px;
  background: rgba(5,9,15,0.92);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 8px 12px; z-index: 500;
  display: flex; flex-direction: column; gap: 5px;
  backdrop-filter: blur(6px);
}
.ml-item { display: flex; align-items: center; gap: 7px; font-size: 9px; color: var(--text-mid); }
.ml-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ml-dot.iss { background: var(--iss); box-shadow: 0 0 4px var(--iss); }
.ml-tri  { font-size: 10px; color: var(--text-mid); }

/* Satellite map markers — outer wrap owns status color/blink/glow/ripple,
   inner rot layer owns only the glyph + heading rotation, so the two never fight. */
.sat-marker-wrap { position:absolute; color:var(--iss); }
.sat-marker-rot  { width:100%; height:100%; transform-origin:50% 50%; will-change:transform; }
.sat-marker-rot svg { width:100%; height:100%; display:block; filter:drop-shadow(0 0 11px currentColor); }
.sat-marker-wrap::after {
  content:''; position:absolute; inset:-9px; border-radius:50%;
  border:2px solid currentColor; animation:ripple 2s infinite; opacity:0;
}
.sat-marker-wrap.mk-iss  { color:var(--iss); }
.sat-marker-wrap.mk-warn { color:var(--warn); animation:blink .6s infinite; }
.sat-marker-wrap.mk-crit { color:var(--crit); animation:blink .4s infinite; }
.sat-marker-wrap.mk-crit::after { inset:-10px; border-width:2.5px; }
.sat-marker-wrap.mk-crit .sat-marker-rot svg { filter:drop-shadow(0 0 14px currentColor); }
.sat-marker-wrap.mk-lost { color:#1a2a3a; opacity:.55; }
.sat-marker-wrap.mk-lost::after { display:none; }
.sat-marker-wrap.mk-lost .sat-marker-rot { animation: tumble 6s ease-in-out infinite; }
.sat-marker-wrap.mk-lost .sat-marker-rot svg { filter:drop-shadow(0 0 6px currentColor); }

@keyframes tumble { 0%{transform:rotate(0deg)} 35%{transform:rotate(15deg)} 70%{transform:rotate(-10deg)} 100%{transform:rotate(0deg)} }

/* Ground station triangle markers (AOS/LOS) */
.gs-marker-wrap { position:relative; color:#3a3a3a; }
.gs-marker-tri  { font-size:12px; line-height:1; font-family:monospace; color:currentColor; text-shadow:0 0 6px currentColor; transition:color .3s; }
.gs-marker-wrap.gs-aos .gs-marker-tri { text-shadow:0 0 9px currentColor, 0 0 3px currentColor; }
.gs-marker-wrap.gs-aos::after {
  content:''; position:absolute; inset:-5px; border-radius:50%;
  border:1.5px solid currentColor; animation:ripple 1.4s infinite; opacity:0;
}
.gs-beam { animation: beam-flow .5s linear infinite; }
@keyframes beam-flow { to { stroke-dashoffset: -11; } }

/* Leaflet overrides */
.leaflet-control-attribution { display: none; }
.leaflet-container { background: #000508 !important; }
.leaflet-tooltip {
  background: rgba(5,9,15,.92); border: 1px solid var(--border-hi);
  color: var(--text-mid); font-family: var(--f); font-size: 9px;
  padding: 4px 8px; box-shadow: none; border-radius: 2px;
  white-space: normal; width: max-content; max-width: 190px; line-height: 1.5;
}

/* ── SIGNAL LOST OVERLAY ──────────────────────────────────────────── */
.slo {
  position: absolute; inset: 0; z-index: 100;
  background: rgba(0,4,10,.96);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,34,34,0.10);
  opacity: 0; transform: scale(.97);
}
.slo.slo-showing { opacity: 1; transform: scale(1); transition: opacity .38s ease, transform .38s ease; }
.slo-icon   { font-size: 54px; color: var(--crit); animation: blink .6s infinite; line-height: 1; }
.slo-title  { font-size: 26px; font-weight: 700; letter-spacing: 6px; color: var(--crit); }
.slo-id     { font-size: 9px; letter-spacing: 2px; color: var(--text-mid); }
.slo-status { font-size: 10px; letter-spacing: 2px; color: var(--amber); animation: blink 1.5s infinite; margin-top: 6px; }
.slo-alt    { font-size: 32px; font-weight: 700; color: var(--amber); letter-spacing: 1px; margin-top: 4px; }
.slo-reentry{ font-size: 10px; letter-spacing: 2px; color: var(--crit); min-height: 14px; text-align: center; animation: blink 1s infinite; }
.slo-reset-btn {
  margin-top: 22px; padding: 8px 28px;
  background: transparent; border: 1px solid var(--border-hi);
  color: var(--text-mid); font-family: var(--f); font-size: 10px; letter-spacing: 2px;
  cursor: pointer; border-radius: 2px;
  transition: border-color .15s, color .15s, background .15s;
}
.slo-reset-btn:hover { border-color: var(--iss); color: var(--iss); background: var(--iss-dim); }

/* ── STATION VIEW (Cupola deck) ───────────────────────────────────── */
.sv-window  { flex:1 1 62%; min-height:0; position:relative; display:flex; align-items:center; justify-content:center; padding:24px; }
.sv-console {
  flex:0 0 auto; display:flex; gap:16px; align-items:center; padding:12px 20px;
  border-top:1px solid var(--border-hi);
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.015) 0 2px, transparent 2px 5px),
    radial-gradient(circle at 15% 0%, rgba(255,255,255,.05), transparent 60%),
    var(--bg-card);
}

/* ── Bezel / porthole ── */
.sv-bezel {
  position:relative; width:min(64vh,92%); aspect-ratio:1/1; border-radius:50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.08), transparent 42%),
    repeating-conic-gradient(from 0deg at 50% 50%, #1b232c 0deg 1.2deg, #222c36 1.2deg 2.4deg),
    radial-gradient(circle at 35% 30%, #2a3644, #0d1420 70%);
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.06),
    inset -3px -4px 8px rgba(0,0,0,.65),
    inset 0 0 0 6px #060a10,
    inset 0 0 0 8px #1a2432,
    0 0 30px rgba(0,0,0,.6);
}
.sv-bezel::before {
  content:''; position:absolute; inset:16px; border-radius:50%; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), inset 0 0 0 3px rgba(0,0,0,.35);
}
.sv-bezel-collar {
  position:absolute; inset:6px; border-radius:50%; pointer-events:none;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.05), transparent 55%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 0 6px rgba(0,0,0,.5);
}
.sv-bolt {
  position:absolute; width:5px; height:5px; margin:-2.5px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #4a5a6c, #1a2432 70%);
  box-shadow: 0 1px 1px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.25);
}
/* 12-point ring: the 4 existing rivets at 0/90/180/270deg plus these 8 at the
   remaining 30deg steps around the collar */
.sv-bolt-1 { top:10.16%; left:73%;   }
.sv-bolt-2 { top:27%;    left:89.8%; }
.sv-bolt-3 { top:73%;    left:89.8%; }
.sv-bolt-4 { top:89.8%;  left:73%;   }
.sv-bolt-5 { top:89.8%;  left:27%;   }
.sv-bolt-6 { top:73%;    left:10.2%; }
.sv-bolt-7 { top:27%;    left:10.2%; }
.sv-bolt-8 { top:10.16%; left:27%;   }

.sv-viewport { position:absolute; inset:14px; border-radius:50%; overflow:hidden; background:#000; }
.sv-viewport::before {
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:6;
  box-shadow: inset 0 0 0 3px rgba(180,210,255,.06), inset 0 0 14px rgba(0,10,20,.65);
}
/* W7: the real Cupola has 6 trapezoidal side windows (W1-W6, the .sv-shutter panels) plus one
   large circular window, this one, that's actually the biggest of the seven. Labeled to match
   the others so the "seven-window module" in its tooltip is visibly true at a glance. */
.sv-viewport::after {
  content:'W7'; position:absolute; bottom:6%; left:50%; transform:translateX(-50%);
  font-family:var(--f); font-size:6px; letter-spacing:1px; color:rgba(255,255,255,.22); z-index:6;
}

.sv-rivet {
  position:absolute; width:6px; height:6px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #4a5a6c, #1a2432 70%);
  box-shadow: 0 1px 1px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.25);
}
.sv-rivet-n { top:2px; left:50%; transform:translateX(-50%); }
.sv-rivet-s { bottom:2px; left:50%; transform:translateX(-50%); }
.sv-rivet-e { right:2px; top:50%; transform:translateY(-50%); }
.sv-rivet-w { left:2px; top:50%; transform:translateY(-50%); }

.sv-shutter {
  position:absolute; width:15%; height:22%; top:50%; left:50%;
  background:
    linear-gradient(90deg, transparent 48%, rgba(0,0,0,.35) 49%, rgba(255,255,255,.05) 50%, transparent 51%),
    radial-gradient(circle at 14% 12%, rgba(255,255,255,.22) 0, transparent 1.6px),
    radial-gradient(circle at 86% 12%, rgba(255,255,255,.22) 0, transparent 1.6px),
    radial-gradient(circle at 14% 88%, rgba(255,255,255,.22) 0, transparent 1.6px),
    radial-gradient(circle at 86% 88%, rgba(255,255,255,.22) 0, transparent 1.6px),
    linear-gradient(160deg,#2b3946,#141c26 55%,#0a0f16);
  border:2px solid #060a10; border-radius:6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 4px rgba(0,0,0,.7), inset 0 0 8px rgba(0,0,0,.6);
  transform-origin:center; --a:0deg;
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(-135%) rotate(calc(-1 * var(--a)));
}
.sv-shutter::after {
  position:absolute; bottom:3px; left:50%; transform:translateX(-50%);
  font-family:var(--f); font-size:5px; letter-spacing:1px; color:rgba(255,255,255,.18);
}
.sv-shutter-1{--a:0deg;} .sv-shutter-2{--a:60deg;} .sv-shutter-3{--a:120deg;}
.sv-shutter-4{--a:180deg;} .sv-shutter-5{--a:240deg;} .sv-shutter-6{--a:300deg;}
.sv-shutter-1::after{content:'W1';} .sv-shutter-2::after{content:'W2';} .sv-shutter-3::after{content:'W3';}
.sv-shutter-4::after{content:'W4';} .sv-shutter-5::after{content:'W5';} .sv-shutter-6::after{content:'W6';}
.sv-placard { position:absolute; bottom:2%; left:50%; transform:translateX(-50%); font-size:7px; letter-spacing:3px; color:var(--text-dim); }

/* ── Ambient cabin light (mode-tinted, reads the existing mode-safe/mode-emergency
   classes updateStationView() already toggles on #station-view every tick) ── */
.sv-cabin-light {
  position:absolute; inset:0; pointer-events:none; z-index:40;
  background: radial-gradient(circle at 22% 8%, rgba(223,232,240,.06), transparent 55%);
  transition: background 1s ease;
}
.station-view.mode-safe      .sv-cabin-light { background: radial-gradient(circle at 22% 8%, rgba(255,180,60,.08), transparent 55%); }
.station-view.mode-emergency .sv-cabin-light { background: radial-gradient(circle at 22% 8%, rgba(255,40,40,.10),  transparent 55%); }

/* ── Stars ── */
.sv-stars {
  position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 8% 22%,#fff 100%,transparent),  radial-gradient(1px 1px at 18% 63%,#cfe8ff 100%,transparent),
    radial-gradient(1.5px 1.5px at 27% 11%,#fff 100%,transparent), radial-gradient(1px 1px at 34% 48%,#fff 100%,transparent),
    radial-gradient(1px 1px at 41% 8%,#cfe8ff 100%,transparent),  radial-gradient(1.5px 1.5px at 52% 30%,#fff 100%,transparent),
    radial-gradient(1px 1px at 61% 14%,#fff 100%,transparent),   radial-gradient(1px 1px at 69% 40%,#cfe8ff 100%,transparent),
    radial-gradient(1.5px 1.5px at 76% 6%,#fff 100%,transparent), radial-gradient(1px 1px at 84% 26%,#fff 100%,transparent),
    radial-gradient(1px 1px at 91% 17%,#cfe8ff 100%,transparent), radial-gradient(1px 1px at 13% 35%,#fff 100%,transparent),
    radial-gradient(1px 1px at 47% 20%,#fff 100%,transparent),   radial-gradient(1.5px 1.5px at 58% 5%,#fff 100%,transparent),
    radial-gradient(1px 1px at 72% 33%,#cfe8ff 100%,transparent), radial-gradient(1px 1px at 88% 45%,#fff 100%,transparent),
    radial-gradient(1px 1px at 22% 4%,#fff 100%,transparent),    radial-gradient(1px 1px at 96% 8%,#fff 100%,transparent);
  animation: star-twinkle 5s ease-in-out infinite;
}
@keyframes star-twinkle { 0%,100%{opacity:.75} 50%{opacity:1} }

/* ── Earth (day/night cross-fade) ── */
.sv-earth-day, .sv-earth-night {
  position:absolute; left:-30%; right:-30%; bottom:-120%; width:160%; height:160%; border-radius:50%;
  overflow:hidden;
  animation: earth-drift 220s linear infinite alternate;
  transition: opacity 1.6s ease;
}
.sv-earth-day   { opacity:1; }
.sv-earth-night { opacity:0; }
.sv-earth-day svg, .sv-earth-night svg { width:100%; height:100%; display:block; }
.station-view.eclipse .sv-earth-day   { opacity:0; }
.station-view.eclipse .sv-earth-night { opacity:1; }
@keyframes earth-drift { 0%{transform:translateX(-2%)} 100%{transform:translateX(2%)} }

.sv-limb-glow {
  position:absolute; left:-10%; right:-10%; bottom:calc(-120% + 2px); width:120%; height:120%; border-radius:50%;
  box-shadow:0 0 46px 12px rgba(90,180,255,.6); pointer-events:none; transition:box-shadow 1.6s ease;
}
.station-view.eclipse .sv-limb-glow { box-shadow:0 0 26px 7px rgba(60,90,140,.28); }

.sv-terminator-sweep {
  position:absolute; inset:0; pointer-events:none; opacity:0; transform:translateX(-120%);
  background:linear-gradient(100deg, transparent 40%, rgba(255,244,214,.55) 50%, transparent 60%);
}
.sv-terminator-sweep.sweep { animation: terminator-sweep 2.5s ease; }
@keyframes terminator-sweep { 0%{opacity:0;transform:translateX(-120%)} 15%{opacity:1} 85%{opacity:1} 100%{opacity:0;transform:translateX(120%)} }

.sv-glare {
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.08) 0%, transparent 22%),
    linear-gradient(200deg, rgba(255,255,255,.05) 0%, transparent 16%);
}

/* ── Alert washes (fault-driven, Section 4) ── */
.sv-amber-wash, .sv-red-wash { position:absolute; inset:0; opacity:0; pointer-events:none; }
.sv-amber-wash { background:radial-gradient(circle, rgba(255,153,0,.35) 0%, rgba(255,153,0,.12) 60%, transparent 100%); }
.sv-red-wash   { background:radial-gradient(circle, rgba(255,34,34,.42) 0%, rgba(255,34,34,.16) 55%, transparent 100%); }
.station-view.mode-safe      .sv-amber-wash { opacity:1; animation: sv-wash-breathe 1.8s ease-in-out infinite; }
.station-view.mode-emergency .sv-red-wash   { opacity:1; animation: sv-wash-breathe-crit 1s ease-in-out infinite; }
@keyframes sv-wash-breathe      { 0%,100%{opacity:.35} 50%{opacity:.7} }
@keyframes sv-wash-breathe-crit { 0%,100%{opacity:.5}  50%{opacity:.85} }

/* ── Signal-loss static ── */
.sv-static {
  position:absolute; inset:0; opacity:0; pointer-events:none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,.05) 2px, rgba(255,255,255,.05) 3px),
              repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(255,255,255,.03) 3px, rgba(255,255,255,.03) 4px);
  animation: crt-static-jitter .12s steps(2) infinite;
  transition: opacity .4s ease;
}
@keyframes crt-static-jitter { 0%{background-position:0 0,0 0} 100%{background-position:0 3px,3px 0} }
.sv-los-tag { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
              font-size:11px; letter-spacing:3px; color:var(--crit); opacity:0; }

.station-view.signal-lost .sv-static  { opacity:.8; }
.station-view.signal-lost .sv-los-tag { opacity:1; animation: blink .6s infinite; }
.station-view.signal-lost .sv-earth-day, .station-view.signal-lost .sv-earth-night, .station-view.signal-lost .sv-stars {
  animation-play-state:paused;
}
.station-view.signal-lost .sv-window { animation: tumble 6s ease-in-out infinite; }
.station-view.signal-lost .sv-red-wash { opacity:.3; animation: sv-wash-dying 2.6s infinite; }
@keyframes sv-wash-dying { 0%{opacity:.5} 8%{opacity:.1} 14%{opacity:.6} 30%{opacity:.15} 33%{opacity:.4} 55%{opacity:.05} 70%{opacity:.5} 100%{opacity:.1} }
.station-view.signal-lost::before { content:''; position:absolute; inset:0; background:rgba(120,10,10,.18); pointer-events:none; z-index:2; }
.station-view.signal-lost .sv-console .sv-lamp,
.station-view.signal-lost .sv-rail-lamp,
.station-view.signal-lost .sv-gauge-fill { opacity:.15 !important; animation:none !important; }

.station-view.reentry .sv-viewport, .station-view.reentry .sv-console > * { opacity:0; transition:opacity 1.2s ease; }

/* ── Cabin flicker (one-shot) ── */
@keyframes cabin-flicker { 0%{filter:brightness(1)} 10%{filter:brightness(.25)} 20%{filter:brightness(1.3)} 32%{filter:brightness(.4)} 45%{filter:brightness(1)} 60%{filter:brightness(.6)} 75%{filter:brightness(1)} }
.station-view.cabin-flicker-once { animation: cabin-flicker .6s steps(1,end); }

/* ── Console blocks ── */
.sv-block { display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 10px;
            border:1px solid var(--border); border-radius:var(--r); background:var(--bg-inset);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 5px rgba(0,0,0,.5); }
.sv-block-mode { flex-direction:row; gap:8px; }
.sv-block-lbl { font-size:7.5px; letter-spacing:2px; color:var(--text-mid); }

.sv-lamp {
  width:10px; height:10px; border-radius:50%; background:var(--text-dim); opacity:.25;
  box-shadow:0 0 0 2px #0a0f16, 0 0 0 3px #2a3644, inset 0 1px 2px rgba(0,0,0,.7);
  transition:opacity .3s, box-shadow .3s;
}
.sv-lamp-nominal.active   { background:var(--green); opacity:1; box-shadow:0 0 0 2px #0a0f16, 0 0 0 3px #2a3644, inset 0 1px 1px rgba(255,255,255,.4), 0 0 6px var(--green); }
.sv-lamp-safe.active      { background:var(--amber); opacity:1; box-shadow:0 0 0 2px #0a0f16, 0 0 0 3px #2a3644, inset 0 1px 1px rgba(255,255,255,.4), 0 0 6px var(--amber); animation:blink .9s infinite; }
.sv-lamp-emergency.active { background:var(--crit);  opacity:1; box-shadow:0 0 0 2px #0a0f16, 0 0 0 3px #2a3644, inset 0 1px 1px rgba(255,255,255,.4), 0 0 8px var(--crit);  animation:blink .5s infinite; }

.sv-block-rails { flex-direction:row; gap:10px; flex-wrap:wrap; justify-content:center; }
.sv-rail-switch { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; }
.sv-rail-lamp { width:9px; height:9px; border-radius:50%; background:var(--text-dim); display:block; }
.sv-rail-lamp.rail-live { background:var(--green); box-shadow:0 0 5px var(--green); animation:blink 3s infinite; }
.sv-rail-lamp.rail-dead { background:var(--crit);  box-shadow:0 0 5px var(--crit);  animation:blink .6s infinite; }
.sv-rail-lbl { font-size:7.5px; letter-spacing:1px; color:var(--text-mid); }

/* Physical toggle lever, driven purely by CSS off the existing rail-live/rail-dead
   class on the preceding .sv-rail-lamp sibling and the existing one-shot .trip class
   on the switch itself — both already set by updateStationView()/updateCard(). */
.sv-toggle-lever { position:relative; width:10px; height:14px; margin-top:2px; }
.sv-toggle-lever::before {
  content:''; position:absolute; inset:0; border:1px solid #2a3644; border-radius:3px;
}
.sv-toggle-lever::after {
  content:''; position:absolute; left:50%; bottom:1px; width:2px; height:10px;
  background:linear-gradient(#9fb4c6,#5a6c7c); border-radius:1px;
  transform-origin:bottom center; transform:translateX(-50%) rotate(0deg);
  transition:transform .25s ease, filter .25s ease;
}
.sv-rail-lamp.rail-dead ~ .sv-toggle-lever::after { transform:translateX(-50%) rotate(-28deg); filter:brightness(.45); }
.sv-rail-switch.trip .sv-toggle-lever::after { animation: lever-trip .4s ease; }
@keyframes lever-trip { 0%{transform:translateX(-50%) rotate(0deg)} 100%{transform:translateX(-50%) rotate(-28deg)} }

.sv-rail-switch.trip { animation: rail-trip .4s ease; }
.sv-rail-lamp.arc    { animation: rail-arc .42s ease-out forwards; }
@keyframes rail-arc { 0%{background:var(--green);box-shadow:0 0 4px var(--green)} 15%{background:#fff;box-shadow:0 0 14px 4px #fff} 35%,100%{background:var(--crit);box-shadow:0 0 8px var(--crit)} }
.sv-rail-switch.trip::before, .sv-rail-switch.trip::after {
  content:''; position:absolute; top:0; left:50%; width:3px; height:3px; border-radius:50%;
  background:#fff; box-shadow:0 0 6px 2px rgba(255,220,120,.9);
  animation: console-spark .42s ease-out forwards;
}
.sv-rail-switch.trip::after { animation-delay:.08s; --dx:-10px; }
@keyframes console-spark { 0%{opacity:1;transform:translate(0,0) scale(1)} 100%{opacity:0;transform:translate(var(--dx,10px),-10px) scale(.4)} }

.sv-block-batt { position:relative; }
.sv-gauge-ticks line { stroke: var(--border-hi); stroke-width:1.5; }
.sv-block-batt::before {
  content:''; position:absolute; top:4px; left:50%; transform:translateX(-50%);
  width:66px; height:38px; border-radius:33px 33px 4px 4px; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 2px 4px rgba(0,0,0,.5);
}
.sv-gauge { width:60px; height:34px; }
.sv-gauge-track { fill:none; stroke:var(--border); stroke-width:4; }
.sv-gauge-fill   { fill:none; stroke:var(--iss); stroke-width:4; stroke-linecap:round; transition:stroke-dashoffset 1s ease, stroke .5s; }
.sv-gauge-fill.tier-warn { stroke:var(--amber); }
.sv-gauge-fill.tier-crit { stroke:var(--crit); animation:blink .8s infinite; }
.sv-gauge-val { font-size:11px; font-weight:700; color:var(--text); }
.sv-gauge-val.tier-warn { color:var(--amber); }
.sv-gauge-val.tier-crit { color:var(--crit); animation:blink .7s infinite; }
.sv-gauge-val.flicker   { animation: sv-digit-flicker .5s steps(4); }
@keyframes sv-digit-flicker { 0%,100%{opacity:1} 25%,75%{opacity:.15} }

.sv-solar-lamp { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; }
.sv-solar-lamp.sunlit  { background:gold; box-shadow:0 0 6px gold; }
.sv-solar-lamp.eclipse { background:#274a66; box-shadow:0 0 4px #274a66; }

.sv-block-readout {
  align-items:flex-start; position:relative; background:#03070d;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 0 8px rgba(0,0,0,.7);
  background-image:
    radial-gradient(circle at 6px 6px, rgba(255,255,255,.15) 0, transparent 1.4px),
    radial-gradient(circle at calc(100% - 6px) 6px, rgba(255,255,255,.15) 0, transparent 1.4px);
}
.sv-block-readout::before {
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:var(--r);
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,212,170,.03) 2px 3px);
}
.sv-readout-row { display:flex; gap:8px; font-size:9px; color:var(--text-mid); }
.sv-readout-row span:last-child { color:var(--teal); text-shadow:0 0 4px rgba(0,212,170,.5); font-weight:700; }
.sv-block-readout.standby { opacity:.25; filter:grayscale(.6); }

/* ── Station-view signal-lost overlay (visually identical to the map's #slo-ISS) ── */
.sv-slo { position:absolute; inset:0; z-index:50; background:rgba(0,4,10,.96); display:flex; flex-direction:column;
          align-items:center; justify-content:center; gap:10px; backdrop-filter:blur(4px); opacity:0; transform:scale(.97); }
.sv-slo.sv-slo-showing { opacity:1; transform:scale(1); transition:opacity .38s ease, transform .38s ease; }
.sv-slo-icon   { font-size:44px; color:var(--crit); animation:blink .6s infinite; }
.sv-slo-title  { font-size:20px; font-weight:700; letter-spacing:5px; color:var(--crit); }
.sv-slo-status { font-size:10px; letter-spacing:2px; color:var(--amber); animation:blink 1.5s infinite; }
.sv-slo-alt    { font-size:24px; font-weight:700; color:var(--amber); }
.sv-slo-reset-btn { margin-top:16px; padding:8px 24px; background:transparent; border:1px solid var(--border-hi);
  color:var(--text-mid); font-family:var(--f); font-size:10px; letter-spacing:2px; cursor:pointer; border-radius:2px; }
.sv-slo-reset-btn:hover { border-color:var(--iss); color:var(--iss); background:var(--iss-dim); }

/* Global scrollbar */
::-webkit-scrollbar { width: 2px; height: 2px; }
::-webkit-scrollbar-track { background: var(--bg-panel); }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 2px; }

/* ── TOOLTIP DECODER LAYER ────────────────────────────────────────── */
/* Fixed bottom-right card, click-to-open only (see showTip() in app.js) — never follows the
   cursor or the clicked element, so it can never overlap/clip against page content again. */
.tt {
  position:fixed; right:20px; bottom:20px; z-index:10000; width:300px;
  background:rgba(6,11,18,.97); border:1px solid var(--border-hi); border-radius:6px;
  box-shadow:0 12px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(0,153,255,.06);
  font-family:var(--f); color:var(--text);
  opacity:0; transform:translateY(14px) scale(.98); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.tt.show { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.tt-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 10px; border-bottom:1px solid var(--border);
  font-size:8px; font-weight:700; letter-spacing:2.5px; color:var(--iss);
  text-shadow:0 0 8px rgba(0,153,255,.35);
}
.tt-close {
  background:none; border:none; color:var(--text-mid); font-size:14px; line-height:1;
  cursor:pointer; padding:0 2px; transition:color .15s ease;
}
.tt-close:hover { color:var(--text); }
.tt-body { padding:10px 12px 11px; font-size:10.5px; line-height:1.6; }
.tt-timer { height:2px; background:var(--border); overflow:hidden; border-radius:0 0 6px 6px; }
.tt-timer::after {
  content:''; display:block; height:100%; width:100%;
  background:linear-gradient(90deg, var(--iss), var(--teal));
  transform-origin:left; transform:scaleX(1);
}
.tt-timer.run::after { animation:tt-countdown 10s linear forwards; }
.tt-timer.run.paused::after { animation-play-state:paused; }
@keyframes tt-countdown { to { transform:scaleX(0); } }
[data-tip] { cursor:pointer; }
/* NOTE: intentionally `.labelish` alone, not `.labelish[data-tip]` — most labelish
   targets (bat-label, dc-lbl, rails-label, ch-lbl) sit *inside* the element that
   actually carries data-tip (their wrapping .bat-block/.dc/.rails-block/.chart-row),
   so a compound selector requiring both on the same node would never match them. */
.labelish { border-bottom:1px dotted var(--text-mid); cursor:help; }

/* ── HELP MODAL ───────────────────────────────────────────────────── */
.help-modal { position:fixed; inset:0; z-index:9998; background:rgba(0,4,10,.85);
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.help-card { width:min(480px,90vw); max-height:80vh; overflow-y:auto; background:var(--bg-panel);
  border:1px solid var(--border-hi); border-radius:var(--r); animation:pulse-in .25s ease; }
.help-hdr { display:flex; justify-content:space-between; align-items:center; padding:12px 16px;
  border-bottom:1px solid var(--border); font-size:11px; letter-spacing:2px; color:var(--iss); }
.help-close { background:none; border:none; color:var(--text-mid); font-size:16px; cursor:pointer; }
.help-body { padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.help-sec-title { font-size:8.5px; letter-spacing:2px; color:var(--text-mid); margin-bottom:4px; }
.help-sec p { font-size:10.5px; line-height:1.6; color:var(--text); }
.help-ftr { padding:10px 16px; border-top:1px solid var(--border); font-size:8.5px; letter-spacing:1px; color:var(--text-mid); text-align:center; }