/* Satellite content only. HUD, dock, buttons, sliders and legend geometry come
   unchanged from the supplied Interactive.html in map-reference.css. */
#satelliteMap { position:absolute; inset:0; width:100%; height:100%; }
.leaflet-tile-container img { max-width:none !important; }
[hidden] { display:none !important; }
#legendGradientH { background:linear-gradient(90deg,#000,#fff); }
.satellite-source { font-size:.72rem; color:var(--muted); }
#freshness { margin-left:auto; }
.status-dot { width:7px; height:7px; flex:none; border-radius:50%; background:#7b8b97; }
.status-dot.fresh { background:#21885a; }
.status-dot.stale { background:#ba6a08; }
.satellite-detail-body { border-bottom:0; }
.satellite-detail-body p, .satellite-note { font-size:.75rem; color:var(--muted); line-height:1.5; margin:8px 0; }
.satellite-row { margin-top:6px; }
#displayDetails label[for=showLabels] { flex:1 1 auto; }
#displayDetails output { min-width:3ch; font-size:.72rem; }
#loopHours { font-size:.8rem; padding:4px 6px; border-radius:6px; border:1px solid #999; background:#fafafa; flex:1; min-width:0; }
#live.active { outline:2px solid var(--brand); }
button:disabled { opacity:.4; cursor:default; }
#loadingBox:not([hidden]) { display:block; z-index:4100; pointer-events:none; }
.satellite-notice { position:absolute; top:10px; left:56px; z-index:4100; max-width:min(520px,calc(100% - 420px)); background:#fff8e9; border:1px solid #e0bb72; color:#76511a; border-radius:8px; padding:9px 12px; font:12px/1.5 Arial,sans-serif; box-shadow:var(--shadow); pointer-events:none; }
.satellite-noscript { position:absolute; inset:30% 10% auto; z-index:4500; background:#fff; padding:20px; text-align:center; }
#viewer:fullscreen { width:100vw; height:100dvh; }
.leaflet-control-combined a[aria-disabled=true] { color:#aaa; cursor:default; }
@media (max-width:767px), (pointer:coarse) and (hover:none) {
  .satellite-notice { top:72px; left:8px; right:8px; max-width:none; font-size:12px; }
}

/* Haloed reference text and borders remain legible on dark land and bright clouds. */
.satellite-reference-layer .leaflet-tile { filter:drop-shadow(0 0 1px rgba(255,255,255,.95)); }

/* RGB colors describe the scene; these swatches are not a numeric temperature scale. */
#legendGradientH[data-kind=natural] { background:linear-gradient(to right,#173f68 0%,#173f68 25%,#4d7242 25%,#4d7242 50%,#bca47c 50%,#bca47c 75%,#fff 75%,#fff 100%); }