/* Satellite loop with a compact badge, frame time and touch/keyboard timeline. */
#weather-radar[hidden] { display: none !important; }
#weather-radar { width: 100%; min-width: 0; margin: 0 !important; padding: 0; color: #e9edf3; text-align: left; }
#weather-radar .radar-panel { width: 100%; height: var(--radar-panel-height, 327px); position: relative; background: #0a1825; border-radius: 0; overflow: hidden; touch-action: pan-y pinch-zoom; font: 12px/1.4 Arial, sans-serif; }
#weather-radar .radar-panel::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.16); border-radius: inherit; box-sizing: border-box; pointer-events: none; z-index: 1; }
#weather-radar .radar-map { height: 100%; position: relative; overflow: hidden; background: #12354b; }
#weather-radar .radar-map svg { display: block; width: 100%; height: 100%; }
#weather-radar .radar-raster, #weather-radar .radar-raster-previous { image-rendering: auto; }
#weather-radar .radar-flow-layer canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
#weather-radar image[data-kind="infrared"] { filter: brightness(1.65); }
#weather-radar .radar-label, #weather-radar .radar-frame-time { position: absolute; top: 10px; z-index: 2; padding: 3px 7px; border-radius: 4px; background: rgba(15,23,42,.82); color: #f8fafc; font-size: 11px; font-weight: 650; line-height: 1; letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0,0,0,.45); pointer-events: none; }
#weather-radar .radar-label { left: 10px; padding: 0; border-radius: 0; background: transparent; text-shadow: 0 1px 2px rgba(0,0,0,.65); }
#weather-radar .radar-frame-time { right: 10px; font-variant-numeric: tabular-nums; }
#weather-radar[data-state="stale"] .radar-frame-time { color: #e4c688; }
#weather-radar .radar-toggle { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #f8fafc; box-shadow: none; cursor: pointer; touch-action: pan-y pinch-zoom; -webkit-tap-highlight-color: transparent; }
#weather-radar .radar-toggle:focus-visible { outline: 2px solid #bde8ff; outline-offset: -3px; }
#weather-radar .radar-toggle-icon { position: absolute; right: 10px; bottom: 35px; width: 14px; height: 14px; opacity: .6; filter: drop-shadow(0 1px 2px rgba(0,0,0,.75)); pointer-events: none; }
#weather-radar .radar-toggle:hover .radar-toggle-icon, #weather-radar .radar-toggle:focus-visible .radar-toggle-icon, #weather-radar[data-paused="true"] .radar-toggle-icon { opacity: 1; }
#weather-radar .radar-icon-play, #weather-radar[data-paused="true"] .radar-icon-pause { display: none; }
#weather-radar[data-paused="true"] .radar-icon-play { display: block; }
#weather-radar .radar-timeline { position: absolute; z-index: 4; bottom: 0; left: 0; right: 0; height: 32px; background: transparent; touch-action: pan-y; user-select: none; }
#weather-radar .radar-timeline::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, #ffffffa6 var(--radar-position, 0%), #ffffff38 var(--radar-position, 0%)); box-shadow: 0 -1px 4px rgba(0,0,0,.85), 0 -2px 8px rgba(0,0,0,.5); pointer-events: none; }
#weather-radar .radar-timeline::after { content: ''; position: absolute; bottom: -2px; left: clamp(0px, var(--radar-position, 0%), calc(100% - 2px)); width: 2px; height: 10px; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.95), 0 0 5px rgba(0,0,0,.8); pointer-events: none; }
#weather-radar .radar-seek { position: absolute; inset: 0; width: 100%; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; opacity: 0; cursor: ew-resize; touch-action: none; }
#weather-radar .radar-timeline:has(.radar-seek:focus-visible)::before { height: 2px; background: #ffffffa6; }
#weather-radar .radar-timeline:has(.radar-seek:disabled) { opacity: .4; }
#weather-radar .radar-time-labels { position: absolute; bottom: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; font-size: 9px; line-height: 1; font-variant-numeric: tabular-nums; color: #ffffffa6; text-shadow: 0 1px 3px #000; pointer-events: none; }
#weather-radar .radar-buffer-status { position: absolute; left: 10px; bottom: 35px; z-index: 2; padding: 3px 6px; border-radius: 3px; background: #0f172ad1; color: #d4e5ef; font-size: 11px; pointer-events: none; }
#weather-radar .radar-status { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; color: #afc2d1; font-size: 12px; background: #0a18258c; text-align: center; }
#weather-radar [hidden] { display: none !important; }
#weather-radar .radar-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#spot-map-radar-row[hidden], #satellite-widget-row[hidden] { display: none !important; }
#spot-map-radar-row { width: 100%; display: flex; flex-direction: column; gap: 5px; margin-top: 5px; }
#spot-map-radar-row > .weather-section { width: 100% !important; max-width: none; margin: 0 !important; }
#spot-map-radar-row > .weather-section > div { display: block; width: 100%; max-width: none; margin: 0; }
#spot-map-radar-row img { display: block; }
#spot-map-radar-row .desktop-static-map img { max-width: 100%; margin: 0; }
@media (min-width: 768px) {
  #spot-map-radar-row { width: calc(100% - 40px); max-width: 1200px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; margin-top: 15px; align-items: start; }
  #spot-map-radar-row > #desktop-webcam-container { width: 100%; margin: 0; min-height: 0; bottom: 0; align-self: start; }
  #spot-map-radar-row.radar-five-panels { row-gap: 15px; }
  #spot-map-radar-row.radar-five-panels > #desktop-windguru-container { width: 100% !important; max-width: none; min-width: 0; margin: 0; }
  #spot-map-radar-row.radar-five-panels > #weather-radar { grid-column: 1 / -1; width: calc((100% - 20px) / 2) !important; justify-self: center; }
  #satellite-widget-row { width: calc(50% - 30px); max-width: 590px; margin-top: 15px; }
  #satellite-widget-row > #desktop-windguru-container { margin-top: 0; min-height: 328px; }
}
@media (max-width: 767px) {
  #weather-radar .radar-panel { border-radius: 0; }
  .mobile-only[id*="-map-container"] img { display: block; }
}