/* 3D satellite hero (sat-viewer.js): model canvas, leader lines and live callouts */
.sat {
  position: relative; height: min(78svh, 680px); overflow: hidden; touch-action: pan-y;
  background:
    radial-gradient(120% 70% at 50% 120%, rgba(47, 111, 180, 0.35), transparent 60%),
    radial-gradient(60% 50% at 70% 20%, rgba(255, 244, 230, 0.06), transparent 70%), #03050a;
}
.sat::before {   /* starfield */
  content: ""; position: absolute; inset: 0; opacity: 0.7; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 72% 12%, #fff, transparent),
    radial-gradient(1px 1px at 38% 64%, #cfe, transparent), radial-gradient(1.5px 1.5px at 88% 46%, #fff, transparent),
    radial-gradient(1px 1px at 22% 82%, #fff, transparent), radial-gradient(1px 1px at 58% 34%, #dfe, transparent),
    radial-gradient(1px 1px at 8% 52%, #fff, transparent), radial-gradient(1px 1px at 92% 78%, #fff, transparent);
}
.sat canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.sat svg.leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sat svg path { fill: none; stroke: rgba(126, 232, 162, 0.7); stroke-width: 1.2; }
.sat svg path[data-st="watch"] { stroke: rgba(250, 178, 25, 0.8); }
.sat svg path[data-st="warn"] { stroke: rgba(236, 131, 90, 0.85); }
.sat svg path[data-st="crit"] { stroke: rgba(255, 90, 90, 0.9); }
.callouts { position: absolute; inset: 0; pointer-events: none; }
.callout {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: 1px; min-width: 128px;
  padding: 9px 12px; border-radius: 12px; background: rgba(6, 10, 16, 0.62); border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px) saturate(1.3);
}
.c-name { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.c-val { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: #7ee8a2; font-variant-numeric: tabular-nums; }
.c-part { font-size: 11px; color: #9aa6ad; }
.callout[data-st="watch"] .c-val { color: #fab219; }
.callout[data-st="warn"] .c-val { color: #ec835a; }
.callout[data-st="crit"] .c-val { color: #ff5a5a; }
.c-dot { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #7ee8a2; box-shadow: 0 0 0 4px rgba(126, 232, 162, 0.2), 0 0 12px #7ee8a2; }
.c-dot[data-st="watch"] { background: #fab219; box-shadow: 0 0 0 4px rgba(250, 178, 25, 0.2), 0 0 12px #fab219; }
.c-dot[data-st="warn"] { background: #ec835a; box-shadow: 0 0 0 4px rgba(236, 131, 90, 0.2), 0 0 12px #ec835a; }
.c-dot[data-st="crit"] { background: #ff5a5a; box-shadow: 0 0 0 4px rgba(255, 90, 90, 0.22), 0 0 12px #ff5a5a; }
.dbg-tag { position: absolute; left: 0; top: 0; font: 11px monospace; color: #ff0; background: rgba(0,0,0,.6); padding: 1px 4px; }
.day { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--muted); }
.credit { position: absolute; right: 12px; bottom: 12px; font-size: 10px; color: rgba(255, 255, 255, 0.4); }
@media (max-width: 560px) {
  .callout { min-width: 0; padding: 6px 8px; border-radius: 10px; }
  .c-name { font-size: 8.5px; letter-spacing: 0.08em; }
  .c-val { font-size: 14px; }
  .day { font-size: 9.5px; white-space: nowrap; bottom: 10px; }
  .c-part { display: none; }
  .credit { display: none; }