/* =========================================================================
   MERIDIAN CONTROL — board.css
   The big board: projection-wall orbital map (SVG) and the mission timeline.
   Drag-first: pointer drag pans, wheel/pinch zooms, double-click re-centers.
   ========================================================================= */

#bigboard {
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  box-shadow: inset 0 0 60px rgba(20, 60, 70, 0.14);
}

#mapwrap {
  flex: 1; position: relative; min-height: 0; overflow: hidden;
  cursor: grab; touch-action: none;
  background:
    radial-gradient(900px 400px at 50% 40%, rgba(30, 70, 90, 0.12), transparent 70%),
    #060c11;
}
#mapwrap.dragging { cursor: grabbing; }
#map { width: 100%; height: 100%; display: block; }

#map text { font-family: var(--mono); pointer-events: none; }
.map-grid line { stroke: #12222d; stroke-width: 1; }
.body-earth { fill: url(#earthgrad); stroke: #2b6f8e; stroke-width: 1.2; }
.body-moon { fill: #b9c2c9; stroke: #77828c; stroke-width: 1; }
.atmo-ring { fill: none; stroke: rgba(111, 211, 255, 0.16); stroke-width: 10; }
.moon-orbit { fill: none; stroke: #1c3040; stroke-width: 1; stroke-dasharray: 3 6; }
.gstation { fill: #23414f; stroke: var(--cyan); stroke-width: 1; }
.gstation-label { fill: #4d7484; font-size: 9px; letter-spacing: 0.08em; }
.trail { fill: none; stroke: rgba(111, 242, 196, 0.55); stroke-width: 1.4; }
.prediction { fill: none; stroke: rgba(111, 211, 255, 0.5); stroke-width: 1.2; stroke-dasharray: 5 5; }
.veh-dot { fill: #eafffa; stroke: var(--phos); stroke-width: 2; filter: drop-shadow(0 0 4px rgba(111, 242, 196, 0.9)); }
.target-dot { fill: #ffd9a8; stroke: var(--amber); stroke-width: 1.5; }
.target-label { fill: var(--amber); font-size: 9.5px; letter-spacing: 0.08em; }
.veh-label { fill: var(--phos); font-size: 10px; letter-spacing: 0.1em; }
.lanch-site { fill: none; stroke: var(--green); stroke-width: 1.4; }
.site-label { fill: #4d8a68; font-size: 9px; letter-spacing: 0.1em; }

.mapbtns { position: absolute; top: 8px; right: 10px; display: flex; flex-direction: column; gap: 5px; z-index: 5; }
.mapbtns button { padding: 3px 8px; font-size: 10px; background: rgba(13, 22, 30, 0.85); }
.mapbtns button.on { border-color: var(--cyan); color: var(--cyan); }
#mapscale {
  position: absolute; left: 12px; bottom: 8px; font-family: var(--mono);
  font-size: 10px; color: var(--faint); z-index: 5;
}
#mapmodebar { position: absolute; top: 8px; left: 10px; display: flex; gap: 5px; z-index: 5; }
#mapmodebar button { padding: 3px 9px; font-size: 10px; background: rgba(13, 22, 30, 0.85); }
#mapmodebar button.on { border-color: var(--phos); color: var(--phos); }

.map-flash { animation: mapflash 0.8s ease-out; }
@keyframes mapflash { from { opacity: 0; } }

/* countdown banner over the map */
#cdbanner {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  text-align: center; z-index: 6; display: none; pointer-events: none;
}
#cdbanner.on { display: block; }
#cdbanner .t {
  font-family: var(--mono); font-size: clamp(26px, 4vw, 42px); letter-spacing: 0.08em;
  color: var(--phos); text-shadow: var(--glow-phos); font-variant-numeric: tabular-nums;
}
#cdbanner.hold .t { color: var(--amber); text-shadow: var(--glow-amber); }
#cdbanner .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.4em; color: var(--dim); }

/* ---------------- timeline ---------------- */
#timeline { border-top: 1px solid var(--line); padding: 6px 12px 8px; min-height: 64px; }
#timeline .tl-head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--dim); letter-spacing: 0.12em; margin-bottom: 4px; }
#tlstrip { position: relative; height: 34px; border: 1px solid var(--line); border-radius: 4px; background: #081016; overflow: hidden; }
.tl-seg {
  position: absolute; top: 0; bottom: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; color: #06110d;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.tl-cursor {
  position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--phos);
  box-shadow: var(--glow-phos); z-index: 3; transition: left 0.2s linear;
}
.tl-ev {
  position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px;
  border-radius: 50%; background: var(--cyan); border: 1px solid #0a141c; z-index: 2;
}
.tl-ev.anom { background: var(--amber); }
.tl-ev.done { background: #274; }

/* ---------------- data columns under the board (grid readouts) ---------- */
#boarddata {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 4px 14px; padding: 8px 12px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px;
}
#boarddata .d { display: flex; justify-content: space-between; gap: 8px; }
#boarddata .d .k { color: var(--faint); letter-spacing: 0.06em; }
#boarddata .d .v { color: var(--ink); font-variant-numeric: tabular-nums; }
#boarddata .d .v.good { color: var(--green); }
#boarddata .d .v.warn { color: var(--amber); }
#boarddata .d .v.bad { color: var(--red); }