/* =============================================================================
   rain_gauge.css — virtual rain gauge styling.
     - Greens (--brand) for accents, light blue gradient for the gauge water
     - Black for value text (gauge readout, multi-day totals)
     - Top grid: input + gauge + live mini map (stacks on mobile)
   Inherits site theme variables (--brand, --ring, --card, --muted, --ink, --bg)
   from the main stylesheet loaded by includes/header.php.
   Previous version archived as rain_gauge_2026-04-30.css.
   ============================================================================= */

:root {
  --rg-green:        #047857;  /* matches site --brand */
  --rg-green-light:  #10b981;
  --rg-green-bg:     #ecfdf5;
  --rg-pos:          #047857;  /* above normal — green */
  --rg-neg:          #b45309;  /* below normal — amber */
  --rg-card-radius:  14px;
  --rg-pad:          16px;
  --rg-gap:          16px;
}

/* Page container ---------------------------------------------------------- */
.rg-main {
  background: var(--bg, #f8fafc);
  padding-bottom: 16px;
  /* No min-height: with the trimmed page (no charts), 100vh would push the
     global footer below the fold on desktop. Body background matches, so the
     viewport stays visually continuous when content is shorter than 100vh. */
  /* Safety net: prevent any descendant from causing horizontal page scroll on
     mobile (e.g. a tight flex row that can't shrink quite enough). `clip` is
     preferred over `hidden` because it doesn't create a new scroll container,
     so absolutely-positioned dropdowns (saved locations, awesomplete) still
     escape the box vertically. Falls back to `hidden` on older browsers. */
  overflow-x: hidden;
  overflow-x: clip;
}

.rg-section { padding: 12px 0; }
.rg-section--header { padding-top: 20px; padding-bottom: 4px; }

/* Small elegant page title — centered, small caps with tracking */
.rg-page-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  padding: 18px 16px 6px;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted, #64748b);
}
.rg-page-title i {
  color: var(--rg-green);
  font-size: 1.05rem;
}
.rg-section--footer { padding-top: 24px; text-align: center; }

.rg-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--rg-pad);
}

/* Visually-hidden label for the location input (still announced by SR) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* =============================================================================
   Location picker — single compact row, vertically-centered.
   ============================================================================= */
.gdd-controls {
  background: var(--card, #fff);
  border: 1px solid var(--ring, #e2e8f0);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 1.25rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  position: relative;
  /* Sits above Leaflet's controls (z-index 1000 on .leaflet-top) so the
     saved-locations dropdown and Awesomplete suggestions clear the zoom
     pill when they open over the mini map below. */
  z-index: 1500;
}
.gdd-controls__row {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center;   /* << center the buttons against the input */
}
.gdd-controls__field { display: flex; flex-direction: column; gap: 6px; }
.gdd-controls__field--grow { flex: 1 1 320px; min-width: 240px; }
.gdd-controls__buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Saved locations dropdown -------------------------------------------------- */
.loc-input-wrapper {
  display: flex; gap: 4px; align-items: stretch;
}
.saved-locations-dropdown { position: relative; display: inline-flex; }
.btn-saved-locations {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--ring, #e5e7eb);
  border-radius: 12px;
  padding: 0 12px;
  color: var(--rg-green);
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  transition: all 0.2s ease;
  /* Unified 44px control height — matches .loc-input and .btn-toggle-map. */
  height: 44px;
  min-width: 44px;
}
.btn-saved-locations:hover {
  background: rgba(4,120,87,0.05);
  border-color: var(--rg-green);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
/* "Pro" badge — matches local_wx.php styling (#0f766e teal, uppercase pill). */
.pro-badge {
  font-size: 0.6rem;
  font-weight: 700;
  color: #0f766e;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}
.saved-locations-menu {
  position: absolute;
  top: calc(100% + 4px); left: 0;
  min-width: 250px; max-width: 350px;
  background: var(--card, #fff);
  border: 1px solid var(--ring, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 2500;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  max-height: 400px; overflow-y: auto;
}
.saved-locations-dropdown.is-open .saved-locations-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.saved-location-item {
  display: block; width: 100%;
  padding: 12px 16px; border: none; background: none;
  text-align: left; color: var(--ink, #0f172a);
  font-weight: 500; font-size: 15px;
  cursor: pointer; transition: all 0.2s ease;
  border-bottom: 1px solid rgba(226,232,240,0.3);
  text-decoration: none; font-family: inherit;
}
.saved-location-item:last-child { border-bottom: none; }
.saved-location-item:hover {
  background: rgba(4,120,87,0.05);
  color: var(--rg-green);
}
.saved-location-item i {
  margin-right: 8px; color: var(--rg-green);
  width: 16px; display: inline-block;
}
.saved-location-coords {
  display: block; font-size: 12px;
  color: var(--muted, #6b7280);
  margin-top: 2px; margin-left: 24px;
}
.manage-locations-link {
  display: block; width: 100%;
  padding: 12px 16px; text-align: center;
  background: rgba(4,120,87,0.05);
  color: var(--rg-green);
  font-weight: 600; font-size: 14px;
  text-decoration: none;
  border-radius: 0 0 12px 12px;
  transition: all 0.2s ease;
}
.manage-locations-link:hover { background: rgba(4,120,87,0.1); }

/* Free / logged-out users: single dropdown row prompting them to upgrade.
   Re-uses .saved-location-item dimensions, but the wrapper itself isn't
   clickable — only the inline "Ag Wx Pro" anchor is. */
.saved-location-prompt {
  display: block; width: 100%;
  padding: 12px 16px;
  color: var(--ink, #0f172a);
  font-weight: 500; font-size: 15px;
  line-height: 1.35;
  white-space: nowrap;
}
.saved-location-prompt a {
  color: var(--rg-green);
  font-weight: 700;
  text-decoration: none;
}
.saved-location-prompt a:hover {
  color: color-mix(in oklab, var(--rg-green) 80%, black 20%);
}
@media (max-width: 640px) {
  .saved-locations-menu { min-width: 280px; max-width: calc(100vw - 32px); }

  /* One-line top row on mobile: pin icon + input + crosshairs icon.
     min-width: 0 must propagate down every flex/grid level so the input can
     actually shrink — otherwise the row overflows the viewport and the rest
     of the page (gauge, map) appears to bleed off the right edge. */
  .gdd-controls__row { flex-wrap: nowrap; gap: 8px; }
  .gdd-controls__field--grow { flex: 1 1 0; min-width: 0; }
  .gdd-controls__buttons { flex-wrap: nowrap; flex-shrink: 0; }
  .loc-input-wrapper { min-width: 0; flex: 1 1 0; }
  .loc-input { min-width: 0; grid-template-columns: 20px minmax(0, 1fr) auto auto; }
  /* Awesomplete wraps the input in its own div — that div is the actual grid
     cell, so it also needs min-width: 0 to allow the column to shrink. */
  .loc-input .awesomplete { min-width: 0; }
  .loc-input #cityInput { min-width: 0; width: 100%; }

}

/* Location input ---------------------------------------------------------- */
.loc-input {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--ring, #e2e8f0);
  border-radius: 12px;
  padding: 0 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  flex: 1;
  /* Unified 44px control height — matches .btn-saved-locations and
     .btn-toggle-map. Inner submit button (34px) centers vertically. */
  height: 44px;
}
.loc-input:focus-within {
  border-color: var(--rg-green);
  box-shadow: 0 0 0 3px rgba(4,120,87,0.1);
}
.loc-input i.loc-input__icon { font-size: 16px; color: #6b7280; }
.loc-input #cityInput {
  width: 100%; font-size: 16px;
  border: 0; outline: 0; background: transparent;
  padding: 4px 2px; font-family: inherit;
  color: var(--ink, #0f172a);
}
.btn-submit-loc {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rg-green); color: #fff;
  border: none; border-radius: 8px;
  width: 34px; height: 34px;
  cursor: pointer; touch-action: manipulation;
  transition: all 0.2s ease; flex-shrink: 0;
}
.btn-submit-loc:hover {
  background: color-mix(in oklab, var(--rg-green) 90%, black 10%);
}
.btn-submit-loc i { font-size: 13px; color: #fff; }
.mini-spinner {
  display: none; width: 16px; height: 16px;
  border: 2px solid rgba(0,0,0,.15);
  border-top-color: var(--rg-green);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Awesomplete ------------------------------------------------------------- */
.awesomplete { width: 100% !important; z-index: 2000 !important; }
.awesomplete > ul {
  background: var(--card, #fff);
  border: 1px solid var(--ring, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  padding: 6px 0; margin-top: 4px;
  list-style: none;
  z-index: 10000 !important;
  max-height: 280px;
  overflow-y: auto;
}
.awesomplete > ul > li {
  padding: 10px 14px; font-size: 15px; font-weight: 500;
  color: var(--ink, #0f172a); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.awesomplete > ul > li:first-child { border-radius: 10px 10px 0 0; }
.awesomplete > ul > li:last-child  { border-radius: 0 0 10px 10px; }
.awesomplete > ul > li:hover,
.awesomplete > ul > li[aria-selected="true"] {
  background: rgba(4,120,87,0.08);
  color: var(--rg-green);
}
.awesomplete > ul > li mark,
.awesomplete > ul > li[aria-selected="true"] mark {
  background: none; color: var(--rg-green); font-weight: 700;
}
@media (max-width: 720px) {
  .awesomplete > ul {
    max-height: 240px;
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
    z-index: 12000 !important;
  }
  .awesomplete > ul > li {
    padding: 8px 12px; font-size: 14px; line-height: 1.25;
  }
}

/* "Use My Location" — icon-only on every breakpoint, sized to match
   .btn-saved-locations (44x44 square) so the three top controls line up. */
.btn-toggle-map {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0;
  border: 1px solid rgba(4,120,87,0.3);
  background: transparent;
  color: var(--rg-green);
  padding: 0 12px;
  border-radius: 12px;
  font-weight: 600; font-size: 18px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(4,120,87,0.1);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  height: 44px;
  min-width: 44px;
}
/* Text label is in the markup for screen readers (and as a fallback) but is
   visually hidden everywhere — the aria-label on the button covers a11y. */
.btn-toggle-map__label { display: none; }
.btn-toggle-map:hover {
  background: var(--rg-green);
  color: #fff;
  border-color: var(--rg-green);
  box-shadow: 0 4px 12px rgba(4,120,87,0.2);
}
.btn-toggle-map.is-loading { opacity: 0.6; pointer-events: none; }

/* Cards ------------------------------------------------------------------- */
.rg-card {
  background: var(--card, #fff);
  border: 1px solid var(--ring, #e2e8f0);
  border-radius: var(--rg-card-radius);
  padding: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.rg-card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.rg-card-header h2 {
  margin: 0; font-size: 1.05rem; font-weight: 700;
  color: var(--ink, #0f172a);
  display: flex; align-items: center; gap: 8px;
}
.rg-card-header h2 i { color: var(--rg-green); }

.rg-card-hint {
  margin: 0 0 12px; font-size: 0.82rem;
  color: var(--muted, #64748b); line-height: 1.4;
}

/* Pill toggle (24/48/72hr) ------------------------------------------------- */
.rg-toggle {
  display: inline-flex; background: #f1f5f9;
  border-radius: 999px; padding: 3px; gap: 2px;
}
.rg-toggle-btn {
  border: none; background: transparent;
  padding: 6px 14px; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600;
  color: var(--muted, #64748b);
  cursor: pointer; transition: all 0.15s ease;
}
.rg-toggle-btn.is-active {
  background: var(--rg-green); color: #fff;
  box-shadow: 0 1px 3px rgba(4,120,87,0.3);
}

/* Hero gauge -------------------------------------------------------------- */
.rg-gauge-wrap {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; padding: 16px 0 8px;
}
/* SVG viewBox is 200x320 (5:8) — keep this ratio in width/height */
.rg-gauge-svg { width: 160px; height: 256px; flex-shrink: 0; transform: translateX(-20px); }

.rg-gauge-readout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  transform: translateX(-22px);
}
.rg-gauge-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}
.rg-gauge-eyebrow i {
  color: var(--rg-green);
  font-size: 0.85rem;
}
.rg-gauge-value-line {
  display: flex;
  align-items: baseline;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* The value and its unit are wrapped together in a single inline-flex cluster
   so they're physically coupled — width behavior (min-width, text-align,
   future tweaks) applies at the cluster level rather than to the digits and
   unit independently. The unit is anchored to the value via margin-left, not
   a separate flex gap, so the two stay together as one unit. */
.rg-gauge-value-cluster {
  display: inline-flex;
  align-items: baseline;
}
.rg-gauge-value {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink, #0f172a);
}
.rg-gauge-unit-suffix {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--muted, #64748b);
  margin-left: 4px;
}

/* Gauge readout loading state — keep the previous value (or "—") visible and
   apply a subtle breathing pulse instead of swapping in a "…" placeholder.
   Data usually returns in <300ms, so we (a) delay the pulse 200ms so quick
   loads show no dim at all, and (b) keep the dim shallow (0.6 ↔ 0.9) so when
   it does appear it feels gentle, not a flash. */
.rg-gauge-readout {
  transition: opacity 0.18s ease-out;
}
.rg-gauge-readout.is-loading {
  animation: rg-gauge-loading-pulse 1.1s ease-in-out 0.2s infinite;
}
@keyframes rg-gauge-loading-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 0.9; }
}
.rg-gauge-source {
  margin: 6px 0 0; font-size: 0.75rem;
  color: var(--muted, #64748b); text-align: center; font-style: italic;
}

/* 14/30/60/90 day cards --------------------------------------------------- */
.rg-windows-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.rg-windows-grid.is-loading { opacity: 0.5; }
.rg-window-card {
  background: var(--bg, #f8fafc);
  border: 1px solid var(--ring, #e2e8f0);
  border-radius: 10px;
  padding: 12px 14px;
}
.rg-window-label {
  font-size: 0.75rem; font-weight: 600;
  color: var(--muted, #64748b);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.rg-window-total {
  font-size: 1.6rem; font-weight: 800;
  color: var(--ink, #0f172a); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.rg-window-total .val { color: var(--ink, #0f172a); }   /* black, not green */
.rg-window-anom-in,
.rg-window-anom-pct {
  font-size: 0.78rem; color: var(--muted, #64748b);
  margin-top: 4px; font-variant-numeric: tabular-nums;
}
.rg-window-anom-in .val,
.rg-window-anom-pct .val {
  font-weight: 700; color: var(--ink, #0f172a);
}
/* Anomaly indicators keep semantic green/amber */
.rg-window-anom-in.is-pos .val,
.rg-window-anom-pct.is-pos .val { color: var(--rg-pos); }
.rg-window-anom-in.is-neg .val,
.rg-window-anom-pct.is-neg .val { color: var(--rg-neg); }

/* Free-tier: 30/60/90 cards render as locked teasers linking to ag_wx_pro. */
a.rg-window-card.is-locked {
  display: flex; flex-direction: column; justify-content: space-between;
  text-decoration: none;
  background: rgba(15, 118, 110, 0.04);
  border-style: dashed;
  border-color: rgba(15, 118, 110, 0.35);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  min-height: 92px;
}
a.rg-window-card.is-locked:hover {
  background: rgba(15, 118, 110, 0.08);
  border-color: #0f766e;
}
.rg-window-locked {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
  color: #0f766e;
  font-size: 1.1rem;
}

/* Footer ------------------------------------------------------------------ */
.rg-disclaimer {
  font-size: 0.75rem; color: var(--muted, #64748b);
  margin: 4px 0; line-height: 1.4;
}

/* =============================================================================
   Top grid — input controls + gauge + selected-location mini map.
   Mobile (<860px): single column, DOM order (input → gauge → map).
   Desktop (≥860px): two columns. Gauge spans both rows on the right; input
   and map stack on the left.
   ============================================================================= */
.rg-top-grid {
  display: grid;
  gap: 14px;
  /* Single implicit column on mobile defaults to `auto` (sizes to the widest
     child). If any child wants more than viewport width, the grid widens and
     all three top cards bleed past the right edge. Pin the column to
     minmax(0, 1fr) so children are constrained to the parent's width. */
  grid-template-columns: minmax(0, 1fr);
}
/* Inside the grid the controls card no longer needs its own bottom margin */
.rg-top-grid .gdd-controls { margin-bottom: 0; }

@media (min-width: 860px) {
  .rg-top-grid {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "input gauge"
      "map   gauge";
    align-items: start;
    gap: 16px;
  }
  .rg-top-grid__input { grid-area: input; }
  .rg-top-grid__gauge { grid-area: gauge; align-self: stretch; }
  .rg-top-grid__map   { grid-area: map; }
}

/* Selected-location mini map ----------------------------------------------- */
.rg-selected-map {
  width: 100%;
  height: 280px;
  border-radius: var(--rg-card-radius);
  border: 1px solid var(--ring, #e2e8f0);
  overflow: hidden;
  background: #f1f5f9;
  cursor: crosshair;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.rg-selected-map__hint {
  margin: 6px 4px 0;
  font-size: 0.72rem;
  color: var(--muted, #64748b);
  text-align: center;
  font-style: italic;
}

/* Glass pill controls — zoom (top-left) and reset (bottom-left). Borrowed
   from /v3/location_map and scoped to the mini map so other Leaflet maps
   elsewhere on the site keep their default styling. */
.rg-selected-map .leaflet-control-zoom,
.rg-selected-map .rg-map-reset {
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: blur(32px) saturate(220%);
  -webkit-backdrop-filter: blur(32px) saturate(220%);
}
.rg-selected-map .leaflet-control-zoom a,
.rg-selected-map .rg-map-reset a {
  background: rgba(255, 255, 255, 0.65) !important;
  color: #1a1a1a !important;
  border: none !important;
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  transition: background 0.15s;
}
.rg-selected-map .leaflet-control-zoom a:hover,
.rg-selected-map .rg-map-reset a:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #000 !important;
}
.rg-selected-map .leaflet-control-zoom-in {
  border-radius: 20px 20px 0 0 !important;
}
.rg-selected-map .leaflet-control-zoom-out {
  border-radius: 0 0 20px 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
}
/* Single-button reset pill — fully rounded since there's no neighbor */
.rg-selected-map .rg-map-reset a {
  border-radius: 20px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.rg-selected-map .rg-map-reset a i { font-size: 13px; }

/* Unlock pill (top-right) — visible while the map is locked. Click/tap
   enables scroll/pinch/dblclick/drag; desktop re-locks on mouseleave, mobile
   re-locks after 5s idle. Same glass aesthetic as the zoom and reset pills. */
.rg-selected-map .rg-map-unlock {
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: blur(32px) saturate(220%);
  -webkit-backdrop-filter: blur(32px) saturate(220%);
}
.rg-selected-map .rg-map-unlock a {
  background: rgba(255, 255, 255, 0.65) !important;
  color: #1a1a1a !important;
  border: none !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 0 12px !important;
  height: 32px !important;
  width: auto !important;
  border-radius: 20px !important;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s;
}
.rg-selected-map .rg-map-unlock a:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #000 !important;
}
.rg-selected-map .rg-map-unlock a i { font-size: 12px; }
/* Hide the pill once the map is unlocked */
.rg-selected-map.is-unlocked .rg-map-unlock { display: none; }
/* Tighter label on small phones — keep the pill snug */
@media (max-width: 380px) {
  .rg-selected-map .rg-map-unlock a { padding: 0 10px !important; font-size: 11px; }
}
@media (min-width: 860px) {
  .rg-selected-map { height: 380px; }
}

/* Tighter gauge card in the top grid — no longer occupies a full row, so it
   doesn't need full-width padding. */
@media (min-width: 860px) {
  .rg-gauge-card {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
  }
  .rg-gauge-card .rg-card-header {
    margin-bottom: 6px;
  }
  .rg-gauge-card .rg-gauge-wrap {
    gap: 12px;
    padding: 8px 0 4px;
  }
  /* Pin the MRMS source to the bottom of the (stretched) card so it sits
     flush at the bottom edge instead of floating just under the gauge. */
  .rg-gauge-card .rg-gauge-source {
    margin-top: auto;
    padding-top: 6px;
  }
}

/* Small phones ------------------------------------------------------------ */
@media (max-width: 380px) {
  .rg-gauge-wrap { gap: 18px; }
  .rg-gauge-svg { width: 110px; height: 176px; }
  .rg-gauge-value { font-size: 2.3rem; }
  .rg-gauge-unit-suffix { font-size: 1rem; }
  .rg-window-total { font-size: 1.35rem; }
  .rg-toggle-btn { padding: 5px 10px; font-size: 0.78rem; }
  .rg-selected-map { height: 200px; }
}

/* Tablets and up ---------------------------------------------------------- */
@media (min-width: 720px) {
  .rg-windows-grid { grid-template-columns: repeat(4, 1fr); }
  .rg-gauge-svg { width: 200px; height: 320px; }
  .rg-gauge-value { font-size: 3.4rem; }
  .rg-card { padding: 22px; }
}

/* Laptops and desktops ---------------------------------------------------- */
@media (min-width: 1024px) {
  .rg-wrap { max-width: 1280px; }
  .rg-gauge-svg { width: 230px; height: 368px; }
  .rg-gauge-value { font-size: 3.75rem; }
}