/* GrayCloud Radar controls - shared between the apex forecast view's
   inline + modal radar and the standalone radar at maps.graycloud.app.
   Mounted via window.GrayCloudRadar.mount() (radar-controls.js).

   Layout: the `.rdr-controls` root pins to `inset: 0` of the nearest
   positioned ancestor. The host page is responsible for positioning that
   ancestor (e.g., `.radar-wrap` on the apex, a fixed-inset wrapper on
   maps.html). Children use absolute positioning relative to `.rdr-controls`.

   Aesthetic mirrors the iOS RadarView: capsule-shaped solid-dark
   containers (black @ 78%), hairline borders, soft drop shadows. The
   bottom bar still uses the glassy `--rdr-panel` token; the right rail
   pill is solid to match iOS. Class names use the `rdr-` prefix so they
   don't collide with the apex's existing `.radar-*` rules. */

.rdr-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  color: #f1f4f9;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;

  --rdr-ink:        #f1f4f9;
  --rdr-ink-2:      #aab3bf;
  --rdr-ink-3:      #6e7682;
  --rdr-panel:        rgba(20, 26, 36, 0.58);
  --rdr-panel-strong: rgba(20, 26, 36, 0.78);
  --rdr-panel-edge:   rgba(255, 255, 255, 0.10);
  --rdr-panel-hover:  rgba(255, 255, 255, 0.15);
  --rdr-accent:       #3aa0ff;
  --rdr-accent-on:    #ffffff;
  --rdr-shadow:       0 6px 20px rgba(0, 0, 0, 0.32);
  --rdr-shadow-lg:    0 12px 36px rgba(0, 0, 0, 0.42);
  --rdr-hairline:     0.5px;
  --rdr-easing:       cubic-bezier(.22, .61, .36, 1);

  /* Heights so JS can read them if needed; ensures the bottom bar and rail
     don't drift independently. */
  --rdr-bar-h: 56px;
}
.rdr-controls * { box-sizing: border-box; }

/* ---------- Right rail (layer / PWS / info / expand) ---------- */
.rdr-rail {
  position: absolute;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--rdr-bar-h) + 24px);
  display: flex; flex-direction: column-reverse; align-items: flex-end;
  gap: 8px;
}
.rdr-rail > * { pointer-events: auto; }

.rdr-rail-group {
  display: flex; flex-direction: column;
  /* Matches iOS RadarView's right rail: solid black 78% (not glass), 8%
     hairline, soft drop shadow, full pill regardless of button count. */
  background: rgba(0, 0, 0, 0.78);
  border: var(--rdr-hairline) solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  padding: 4px 0;
  overflow: hidden;
}

.rdr-rail-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  color: var(--rdr-ink);
  cursor: pointer;
  transition: background 140ms var(--rdr-easing), color 140ms var(--rdr-easing), transform 80ms var(--rdr-easing);
}
.rdr-rail-btn:hover { background: var(--rdr-panel-hover); }
.rdr-rail-btn:active { transform: scale(0.94); }
.rdr-rail-btn[aria-pressed="true"] { color: var(--rdr-accent); }
.rdr-rail-btn[aria-expanded="true"] { background: var(--rdr-panel-hover); }
.rdr-rail-btn svg { width: 19px; height: 19px; }

/* GPS recenter button - `location.north.fill` rotated 45° to match iOS
   RadarView's right-rail treatment. */
.rdr-recenter-btn svg { transform: rotate(45deg); }

/* Layer menu popup. */
.rdr-rail-menu {
  display: flex; flex-direction: column;
  min-width: 200px;
  padding: 6px;
  background: var(--rdr-panel-strong);
  border: var(--rdr-hairline) solid var(--rdr-panel-edge);
  border-radius: 14px;
  box-shadow: var(--rdr-shadow-lg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  transform-origin: bottom right;
  animation: rdr-pop-in 160ms var(--rdr-easing);
}
.rdr-rail-menu[hidden] { display: none; }
.rdr-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  background: transparent;
  border: 0; border-radius: 8px;
  color: var(--rdr-ink);
  font: inherit; font-size: 13px; font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 120ms var(--rdr-easing);
}
.rdr-menu-item:hover { background: var(--rdr-panel-hover); }
.rdr-menu-icon { width: 16px; height: 16px; color: var(--rdr-ink-2); flex: 0 0 auto; }
.rdr-menu-label { flex: 1; }
.rdr-menu-check { width: 15px; height: 15px; color: var(--rdr-accent); opacity: 0; flex: 0 0 auto; }
.rdr-menu-item[aria-checked="true"] .rdr-menu-check { opacity: 1; }
.rdr-menu-item[aria-checked="true"] .rdr-menu-icon { color: var(--rdr-accent); }

/* Divider between the layer picker (radar/temperature/cloudcover) and
   the stations toggle row below it, mirroring iOS's SwiftUI Picker +
   Divider() + Toggle layout. */
.rdr-menu-divider {
  height: var(--rdr-hairline);
  margin: 4px 6px;
  background: rgba(255, 255, 255, 0.10);
}

/* Stations toggle is a menuitemcheckbox, not a radio - its icon stays
   ink-2 even when checked (the check glyph is the affordance, not the
   icon recolor). */
.rdr-menu-item--toggle[aria-checked="true"] .rdr-menu-icon { color: var(--rdr-ink-2); }

/* ---------- Bottom bar (play + scrubber + readout) ---------- */
.rdr-bottom-bar {
  position: absolute;
  left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  transform: translateX(-50%);
  pointer-events: auto;
  display: flex; align-items: center;
  padding: 10px 14px;
  background: var(--rdr-panel);
  border: var(--rdr-hairline) solid var(--rdr-panel-edge);
  border-radius: 999px;
  box-shadow: var(--rdr-shadow);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  width: min(420px, calc(100% - 24px));
}

.rdr-bb-empty {
  flex: 1;
  font-size: 12px; color: var(--rdr-ink-2);
  text-align: center;
  padding: 4px 0;
}
.rdr-bb-empty[hidden] { display: none; }

.rdr-bb-controls {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
}
.rdr-bb-controls[hidden] { display: none; }

.rdr-play {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--rdr-accent);
  color: var(--rdr-accent-on);
  border: 0; border-radius: 50%;
  cursor: pointer;
  transition: background 140ms var(--rdr-easing), transform 80ms var(--rdr-easing), opacity 140ms var(--rdr-easing);
}
.rdr-play:hover:not([disabled]) { background: #4ab0ff; }
.rdr-play:active:not([disabled]) { transform: scale(0.94); }
.rdr-play[disabled] { opacity: 0.45; cursor: default; }
.rdr-play svg { width: 14px; height: 14px; }
.rdr-play .rdr-play-icon { margin-left: 1px; /* optical centering for the triangle */ }

/* Custom track + tick marks overlaid on a native range input. The native
   input remains the source of truth for keyboard a11y and gesture
   handling; we hide its track/thumb and paint our own. */
.rdr-timeline {
  position: relative;
  flex: 1; min-width: 0;
  height: 32px;
  display: flex; align-items: center;
}
.rdr-timeline-track {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 6px;
  margin-top: -3px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  pointer-events: none;
}
.rdr-timeline-fill {
  position: absolute; left: 0; top: 50%;
  height: 6px;
  margin-top: -3px;
  width: 0;
  background: var(--rdr-accent);
  border-radius: 999px;
  pointer-events: none;
  transition: width 120ms var(--rdr-easing);
}
.rdr-timeline-ticks {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 10px;
  margin-top: -5px;
  pointer-events: none;
}
.rdr-timeline-ticks span {
  position: absolute; top: 0;
  width: 1px; height: 8px;
  background: rgba(255, 255, 255, 0.22);
  transform: translateX(-0.5px);
}
.rdr-timeline-now {
  position: absolute; top: 50%;
  width: 2px; height: 14px;
  margin-top: -7px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 1px;
  pointer-events: none;
  transform: translateX(-1px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.rdr-timeline-now[hidden] { display: none; }

.rdr-scrubber {
  position: absolute; left: 0; right: 0; top: 0;
  width: 100%; height: 100%;
  appearance: none; -webkit-appearance: none;
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
  margin: 0; padding: 0;
}
.rdr-scrubber:disabled { cursor: default; }
/* Size the (invisible) runnable-track to match the visible track height
   (.rdr-timeline-track at 6 px). WebKit centers the thumb on the
   runnable-track's vertical axis - if we leave the track at the full
   input height (32 px) the thumb's "center" lands on a different y than
   the painted track does in some Chromium / Safari versions, and the
   thumb visibly floats above or below the line. Matching the heights and
   pulling the thumb up by `(track − thumb) / 2` puts its geometric
   center exactly on the track's center. */
.rdr-scrubber::-webkit-slider-runnable-track { height: 6px; background: transparent; border: 0; }
.rdr-scrubber::-moz-range-track              { height: 6px; background: transparent; border: 0; }
.rdr-scrubber::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px;
  margin-top: -6px;  /* (6 − 18) / 2 - sits the thumb's center on the track */
  background: var(--rdr-accent);
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 80ms var(--rdr-easing);
}
.rdr-scrubber:active::-webkit-slider-thumb { transform: scale(1.1); }
.rdr-scrubber::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--rdr-accent);
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.rdr-scrubber:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(58, 160, 255, 0.35), 0 1px 3px rgba(0, 0, 0, 0.35);
}

.rdr-readout {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 1px;
  white-space: nowrap;
  min-width: 64px;
}
.rdr-readout-time {
  font-size: 13px; font-weight: 600;
  color: var(--rdr-ink);
  font-variant-numeric: tabular-nums;
}
.rdr-readout-layer {
  font-size: 10px; font-weight: 500;
  color: var(--rdr-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- Compact / short-container modifier ---------- */
/* `.rdr-controls--compact` is set by the host (or by JS) when the
   container is too short to fit a full-height bottom-right rail. Buttons
   shrink to 36px and the rail tucks closer to the bar so it fits inside
   a 200-px-tall apex mini radar without overflowing the top. */
.rdr-controls--compact .rdr-rail-btn { width: 36px; height: 36px; }
.rdr-controls--compact .rdr-rail-btn svg { width: 17px; height: 17px; }
.rdr-controls--compact .rdr-rail {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--rdr-bar-h) + 12px);
}
.rdr-controls--compact .rdr-bottom-bar { padding: 8px 12px; }
.rdr-controls--compact .rdr-readout-layer { display: none; }
.rdr-controls--compact .rdr-readout { min-width: 0; }
.rdr-controls--compact .rdr-play { width: 32px; height: 32px; }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .rdr-rail-btn { width: 38px; height: 38px; }
  .rdr-rail-btn svg { width: 17px; height: 17px; }
  .rdr-rail-menu { min-width: 180px; }
  .rdr-bottom-bar {
    left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    transform: none;
    width: auto;
    padding: 8px 10px;
  }
  .rdr-bb-controls { gap: 10px; }
  .rdr-readout { min-width: 0; }
  .rdr-readout-layer { display: none; }
}

@media (max-width: 380px) {
  .rdr-bb-controls { gap: 8px; }
  .rdr-play { width: 32px; height: 32px; }
}

/* ---------- Accessibility ---------- */
.rdr-rail-btn:focus-visible,
.rdr-play:focus-visible,
.rdr-menu-item:focus-visible {
  outline: 2px solid var(--rdr-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .rdr-controls,
  .rdr-controls * { transition: none !important; animation: none !important; }
}

/* ---------- Inline-expand layer menu ---------- */
/* Replaces the popover with a morph-out-of-rail animation, mirroring the
   iOS 26 Liquid Glass radar layer control. The menu still anchors at
   `bottom right` (where the layer button lives), but the entrance keyframes
   ease the inflation so it reads as the rail itself expanding upward. */
@keyframes rdr-pop-in {
  0%   { opacity: 0; transform: translateY(8px) scale(0.86); }
  60%  { opacity: 1; transform: translateY(0)   scale(1.03); }
  100% { opacity: 1; transform: translateY(0)   scale(1.00); }
}

/* ---------- Color legend (clientside layers only) ---------- */
/* Thin pill below the readout that surfaces the active layer's color ramp
   so users can read absolute values out of multi-hue LUTs. Only shown for
   the clientside layers - radar is binned/intensity rather than continuous
   and reads better without a numeric scale. */
.rdr-legend {
  pointer-events: none;
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--rdr-bar-h) + 10px);
  display: flex; flex-direction: column; align-items: stretch;
  gap: 4px;
  width: min(280px, calc(100vw - 24px));
  padding: 8px 10px 9px;
  background: var(--rdr-panel-strong);
  border: var(--rdr-hairline) solid var(--rdr-panel-edge);
  border-radius: 12px;
  box-shadow: var(--rdr-shadow);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  font-variant-numeric: tabular-nums;
  transition: opacity 180ms var(--rdr-easing);
}
.rdr-legend[hidden] { display: none; }
.rdr-legend-bar {
  height: 12px;
  border-radius: 6px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.rdr-legend-ticks {
  display: flex; justify-content: space-between;
  font-size: 10px; font-weight: 500;
  color: var(--rdr-ink-2);
}

/* ---------- Settings sheet ---------- */
/* Secondary rail button opens a sheet with animation speed, reduced
   motion, and base map. Pinned bottom-right, slides up from the rail. */
.rdr-settings-sheet {
  pointer-events: auto;
  position: absolute;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--rdr-bar-h) + 24px);
  width: 220px;
  padding: 10px;
  background: var(--rdr-panel-strong);
  border: var(--rdr-hairline) solid var(--rdr-panel-edge);
  border-radius: 14px;
  box-shadow: var(--rdr-shadow-lg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  animation: rdr-pop-in 160ms var(--rdr-easing);
  z-index: 20;
}
.rdr-settings-sheet[hidden] { display: none; }
.rdr-settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 4px;
  font-size: 12px; font-weight: 500;
  color: var(--rdr-ink);
}
.rdr-settings-row + .rdr-settings-row {
  border-top: var(--rdr-hairline) solid rgba(255, 255, 255, 0.06);
}
.rdr-segmented {
  display: inline-flex; padding: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}
.rdr-segmented button {
  appearance: none; border: 0; background: transparent;
  color: var(--rdr-ink-2);
  padding: 4px 10px;
  font: inherit; font-size: 11px; font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms var(--rdr-easing), color 120ms var(--rdr-easing);
}
.rdr-segmented button[aria-pressed="true"] {
  background: var(--rdr-ink);
  color: #0c1017;
}

/* ---------- Cursor readout chip ---------- */
/* Tiny floating chip pinned to the cursor (desktop) or anchored above
   the last tap point (mobile). Driven by radar-controls.js querying the
   clientside layer for the value at the projected lon/lat. */
.rdr-cursor-chip {
  pointer-events: none;
  position: absolute;
  padding: 5px 9px;
  background: rgba(12, 16, 23, 0.88);
  border: var(--rdr-hairline) solid var(--rdr-panel-edge);
  border-radius: 8px;
  font-size: 11px; font-weight: 600;
  color: var(--rdr-ink);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--rdr-shadow);
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 10px));
  transition: opacity 100ms var(--rdr-easing);
}
.rdr-cursor-chip[hidden] { display: none; }

/* ---------- Compare swipe divider ---------- */
/* A draggable vertical handle that splits the viewport. The right pane's
   clientside layer is clipped to `clip-path` driven by the handle's `--rdr-split`
   CSS variable so dragging is jank-free without per-frame layer updates. */
.rdr-compare-handle {
  pointer-events: auto;
  position: absolute;
  top: 0; bottom: 0;
  left: var(--rdr-split, 50%);
  width: 4px;
  margin-left: -2px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.55);
  cursor: col-resize;
  z-index: 15;
}
.rdr-compare-handle::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.rdr-compare-handle[hidden] { display: none; }