/* ==========================================================================
   Earth Scan Systems (escan-systems.com) Theme & Palette
   Color Palette:
   - Primary: #334B35 (Deep Forest Green)
   - Accent: #8DC63F (Vibrant Agri-Green / Lime)
   - Secondary: #8B5E3C (Terra Earth Brown)
   - Cream / Light: #F6F4EC / #ECEAE0
   - Muted Sage: #B3C5B5
   ========================================================================== */

:root {
  --wr-brand-primary: #334B35;
  --wr-brand-dark: #1a2a1d;
  --wr-accent: #8DC63F;
  --wr-accent-dark: #75a733;
  --wr-accent-glow: rgba(141, 198, 63, 0.45);
  --wr-secondary: #8B5E3C;
  --wr-secondary-dark: #6e482d;
  --wr-bg-trans: rgba(26, 42, 29, 0.85);
  --wr-bg-btn: rgba(51, 75, 53, 0.92);
  --wr-bg-btn-active: #8DC63F;
  --wr-border: rgba(141, 198, 63, 0.35);
  --wr-border-light: rgba(246, 244, 236, 0.2);
  --wr-text-light: #F6F4EC;
  --wr-text-muted: #B3C5B5;
  --font-main: 'DM Sans', -apple-system, sans-serif;
  --font-heading: 'Open Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-main);
  background-color: #142218;
}

.wr-body {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.wr-app-viewport {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Full-Screen Map Viewport */
.wr-map-fullscreen {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: #0b140e;
}

/* Natural Lush Green Satellite Terrain (Matching Zoom Earth Reference) */
.leaflet-container {
  background: #0b140e !important;
}

/* Day Mode (AccuWeather / MSN Topo Style) */
#map.day-mode {
  background: #e2e8f0 !important;
}

#map.day-mode .leaflet-tile-pane img {
  filter: brightness(0.98) contrast(1.12) saturate(1.15) !important;
}

/* Night Mode (Windy / Dark Satellite Style) */
#map.night-mode {
  background: #0b140e !important;
}

#map.night-mode .leaflet-tile-pane img {
  filter: brightness(0.72) contrast(1.3) saturate(1.4) !important;
}

/* --------------------------------------------------------------------------
   RADAR PANE — AccuWeather / MSN / Weather Channel Soft Fluid Doppler Blob
   -------------------------------------------------------------------------- */
#map .leaflet-pane.leaflet-radarPane-pane {
  z-index: 380;
  filter: saturate(1.4) contrast(1.12) brightness(1.05);
  opacity: 0.95;
}

#map .leaflet-pane.leaflet-cloudPane-pane {
  z-index: 320;
  filter: brightness(1.3) contrast(0.85) blur(1.5px);
  opacity: 0.55;
}

#map .leaflet-pane.leaflet-hazardPane-pane {
  z-index: 420;
}

/* Crisp Clean English Town Dots & Place Names (Matching Zoom Earth Reference) */
#map .leaflet-pane.leaflet-cityLabelsPane-pane {
  z-index: 480;
  pointer-events: none;
}

#map .leaflet-pane.leaflet-cityLabelsPane-pane img {
  filter: brightness(1.15) contrast(1.12) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.95)) !important;
}

#map .leaflet-pane.leaflet-redPinPane-pane {
  z-index: 950;
}

/* ==========================================================================
   1. Top Navigation Bar (Earth Scan Theme)
   ========================================================================== */

.wr-top-bar {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  pointer-events: none;
}

.wr-top-bar * {
  pointer-events: auto;
}

.wr-circle-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--wr-bg-btn);
  border: 1px solid var(--wr-border);
  color: var(--wr-text-light);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: all 0.2s;
  backdrop-filter: blur(8px);
}

.wr-pill-toggle-btn {
  height: 44px;
  border-radius: 22px;
  padding: 0 14px;
  background: var(--wr-bg-btn);
  border: 1px solid var(--wr-border);
  color: var(--wr-text-light);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: all 0.2s;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}

.wr-pill-toggle-btn.active {
  background: var(--wr-accent);
  color: #1a2a1d;
  border-color: var(--wr-accent);
  box-shadow: 0 0 14px var(--wr-accent-glow);
}

.wr-circle-btn:hover,
.wr-pill-toggle-btn:hover {
  background: var(--wr-accent);
  color: #1a2a1d;
  border-color: var(--wr-accent);
  transform: translateY(-1px);
  box-shadow: 0 0 14px var(--wr-accent-glow);
}

.wr-brand-pill {
  background: linear-gradient(135deg, rgba(26, 44, 30, 0.95), rgba(11, 20, 14, 0.95));
  border: 1.5px solid var(--wr-accent);
  border-radius: 9999px;
  padding: 6px 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 16px rgba(141, 198, 63, 0.3);
  backdrop-filter: blur(12px);
}

.wr-brand-header-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wr-brand-main {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15.5px;
  letter-spacing: -0.2px;
}

.wr-brand-accent {
  color: var(--wr-accent);
}

.wr-brand-white {
  color: #FFFFFF;
}

.wr-brand-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: #cbd5e1;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.wr-top-left-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wr-top-right-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   5 Analytical Modes Switcher Bar (A. WEATHER -> E. ADVISORY)
   ========================================================================== */

.ess-mode-switcher-bar {
  position: absolute;
  top: 68px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(11, 20, 14, 0.92);
  border: 1px solid rgba(141, 198, 63, 0.4);
  padding: 4px 6px;
  border-radius: 30px;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
}

.ess-mode-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #cbd5e1;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
  white-space: nowrap;
}

.ess-mode-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.ess-mode-btn.active {
  background: var(--wr-accent);
  color: #1a2a1d;
  font-weight: 800;
  box-shadow: 0 0 10px var(--wr-accent-glow);
}

.ess-check-loc-btn {
  background: linear-gradient(135deg, #e11d48, #be123c);
  border: 1px solid #fda4af;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 10px rgba(225, 29, 72, 0.5);
  transition: all 0.2s;
  white-space: nowrap;
  animation: locPulse 2.5s infinite;
}

.ess-check-loc-btn:hover {
  transform: scale(1.05);
  background: #f43f5e;
}

@keyframes locPulse {
  0% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(225, 29, 72, 0); }
  100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); }
}

@media (max-width: 900px) {
  .ess-mode-switcher-bar {
    top: 60px;
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    overflow-x: auto;
    justify-content: flex-start;
    scroll-snap-type: x proximity;
    /* Fades the trailing edge so a horizontally-scrollable row reads as
       scrollable rather than as content abruptly clipped by the viewport. */
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  }

  .ess-mode-btn {
    font-size: 10px;
    padding: 6px 10px;
    scroll-snap-align: start;
  }

  .ess-mode-btn span {
    white-space: nowrap;
  }

  .ess-check-loc-btn {
    font-size: 10px;
    padding: 6px 10px;
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   Search Overlay & Instant Autocomplete Dropdown
   ========================================================================== */

.wr-search-overlay {
  position: absolute;
  top: 70px;
  left: 14px;
  width: min(420px, calc(100vw - 28px));
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wr-search-box {
  background: rgba(26, 42, 29, 0.95);
  border: 1px solid var(--wr-accent);
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(141, 198, 63, 0.2);
  backdrop-filter: blur(14px);
}

.wr-search-icon {
  color: var(--wr-accent);
  font-size: 15px;
}

.wr-search-box input {
  flex: 1;
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 13px;
  font-family: var(--font-main);
  outline: none;
}

.wr-search-box input::placeholder {
  color: var(--wr-text-muted);
}

.wr-search-close-btn {
  background: transparent;
  border: none;
  color: var(--wr-text-muted);
  font-size: 14px;
  cursor: pointer;
}

.wr-search-close-btn:hover {
  color: var(--wr-accent);
}

.wr-search-results {
  background: rgba(26, 42, 29, 0.96);
  border: 1px solid var(--wr-border);
  border-radius: 12px;
  max-height: 220px;
  overflow-y: auto;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.wr-search-item {
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--wr-text-light);
  cursor: pointer;
  border-bottom: 1px solid rgba(141, 198, 63, 0.15);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
}

.wr-search-item:last-child {
  border-bottom: none;
}

.wr-search-item:hover {
  background: rgba(141, 198, 63, 0.25);
  color: #FFFFFF;
}

.wr-search-item i {
  color: var(--wr-accent);
  font-size: 13px;
}

/* ==========================================================================
   2. Right-Side Vertical Layer Toolbar
   ========================================================================== */

.wr-vertical-toolbar {
  position: absolute;
  top: 74px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
}

.wr-layer-action-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--wr-bg-btn);
  border: 1px solid var(--wr-border);
  color: var(--wr-text-light);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: all 0.2s;
  backdrop-filter: blur(8px);
}

.wr-layer-action-btn:hover {
  background: var(--wr-secondary);
  color: #FFFFFF;
  border-color: var(--wr-accent);
  transform: scale(1.05);
}

.wr-layer-action-btn.active {
  background: var(--wr-accent);
  color: #1a2a1d;
  border-color: #FFFFFF;
  box-shadow: 0 0 16px var(--wr-accent-glow);
}

.wr-camera-btn {
  background: var(--wr-secondary);
  border-color: var(--wr-accent);
}

.wr-camera-btn:hover {
  background: var(--wr-accent);
  color: #1a2a1d;
}

/* ==========================================================================
   3. Interactive Station Badges & City Labels
   ========================================================================== */

.wr-city-div-icon {
  background: transparent !important;
  border: none !important;
}

.wr-city-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.wr-weather-row {
  display: flex;
  align-items: center;
  gap: 3px;
}

.wr-sun-ico {
  color: #facc15;
  font-size: 15px;
  filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.8));
}

.wr-temp-num {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  color: #f43f5e;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.wr-temp-num.cool {
  color: #38bdf8;
}

.wr-temp-num.rain {
  color: #00e5ff;
}

.wr-city-name {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  letter-spacing: 0.2px;
}

/* ==========================================================================
   4. Draggable Red Target Pin
   ========================================================================== */

.wr-pin-icon {
  background: transparent !important;
  border: none !important;
}

.wr-draggable-red-pin {
  position: relative;
  width: 32px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: grab;
  user-select: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wr-draggable-red-pin:active {
  cursor: grabbing;
  transform: scale(1.2) translateY(-8px);
}

.wr-pin-svg {
  display: block;
}

/* ==========================================================================
   5. Bottom Floating Time Controller & Loop Player
   ========================================================================== */

.wr-bottom-dock {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
  pointer-events: none;
}

.wr-bottom-dock * {
  pointer-events: auto;
}

.wr-interval-strip {
  display: flex;
  gap: 6px;
}

.wr-interval-pill {
  background: var(--wr-bg-btn);
  border: 1px solid var(--wr-border);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.2s;
}

.wr-interval-pill.active {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
}

.wr-slider-row {
  background: var(--wr-bg-trans);
  border: 1px solid var(--wr-border);
  border-radius: 14px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.wr-time-readout {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  min-width: 65px;
}

.wr-track-container {
  flex: 1;
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
}

.wr-track-progress {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 5px;
  background: var(--wr-accent);
  border-radius: 3px;
  pointer-events: none;
  z-index: 1;
}

.wr-now-marker {
  position: absolute;
  top: -16px;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wr-now-marker span {
  background: #f59e0b;
  color: #0f172a;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.wr-now-marker::after {
  content: '';
  width: 2px;
  height: 12px;
  background: #f59e0b;
  margin-top: 1px;
}

.wr-slider-input {
  position: relative;
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  z-index: 2;
  -webkit-appearance: none;
}

.wr-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--wr-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.wr-play-circle-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0284c7;
  border: none;
  color: #ffffff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.5);
  transition: transform 0.15s;
}

.wr-play-circle-btn:hover {
  transform: scale(1.08);
}

.wr-speed-pill {
  height: 32px;
  padding: 0 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.wr-speed-pill:hover {
  background: var(--wr-accent);
  color: #1a2a1d;
  border-color: var(--wr-accent);
}

/* AccuWeather / MSN Meteorological dBZ Legend */
.wr-meteorological-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px 12px;
}

.wr-leg-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wr-leg-label {
  font-size: 9.5px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wr-leg-bar.rain-bar {
  height: 7px;
  border-radius: 3px;
  background: linear-gradient(to right, 
    rgba(34, 197, 94, 0.8) 0%, 
    #22c55e 25%, 
    #eab308 50%, 
    #f97316 75%, 
    #ef4444 90%, 
    #d946ef 100%
  );
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}

.wr-leg-steps {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  color: #cbd5e1;
  font-weight: 600;
}

.wr-leg-types {
  display: flex;
  gap: 6px;
}

.type-pill {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.type-pill.rain {
  border-color: rgba(34, 197, 94, 0.5);
  color: #4ade80;
}

/* PMD Doppler Radar Tower Markers */



.wr-date-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}

.wr-date-pill {
  flex: 1;
  background: var(--wr-bg-btn);
  border: 1px solid var(--wr-border);
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  white-space: nowrap;
  transition: all 0.2s;
}

.wr-date-pill:hover {
  background: rgba(2, 132, 199, 0.6);
}

.wr-date-pill.active {
  background: var(--wr-accent);
  border-color: #FFFFFF;
  color: #1a2a1d;
  box-shadow: 0 0 10px var(--wr-accent-glow);
}

/* ==========================================================================
   6. ESS Decision Intelligence Dashboard & Analytics Drawer
   ========================================================================== */

.wr-info-drawer {
  position: absolute;
  top: 115px;
  left: 14px;
  width: min(440px, calc(100vw - 28px));
  max-height: calc(100vh - 230px);
  overflow-y: auto;
  background: rgba(15, 26, 18, 0.95);
  border: 1.5px solid var(--wr-accent);
  border-radius: 16px;
  padding: 16px;
  z-index: 1000;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(141, 198, 63, 0.25);
  backdrop-filter: blur(16px);
  color: var(--wr-text-light);
  animation: slideInDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.wr-info-drawer::-webkit-scrollbar {
  width: 5px;
}

.wr-info-drawer::-webkit-scrollbar-thumb {
  background: var(--wr-accent);
  border-radius: 4px;
}

.wr-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.wr-drawer-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wr-drawer-title i {
  color: var(--wr-accent);
}

/* Provenance Badge (OBSERVED / FORECAST / MODELLED / VERIFIED) */
.ess-provenance-tag {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ess-provenance-tag.observed {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.ess-provenance-tag.forecast {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.ess-provenance-tag.modelled {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.ess-provenance-tag.verified {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

/* National Situation Summary KPI Grid */
.ess-national-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.ess-kpi-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
}

.ess-kpi-num {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
}

.ess-kpi-num.danger { color: #f43f5e; }
.ess-kpi-num.warning { color: #f59e0b; }
.ess-kpi-num.info { color: #38bdf8; }

.ess-kpi-label {
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  margin-top: 2px;
  line-height: 1.2;
}

/* Cumulative & Forecast Rainfall Matrix */
.ess-rainfall-matrix-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 12px;
}

.ess-section-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11.5px;
  color: #FFFFFF;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ess-matrix-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  text-align: center;
}

.ess-matrix-cell {
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 4px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.ess-matrix-cell .val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  color: #38bdf8;
}

.ess-matrix-cell .lbl {
  font-size: 8.5px;
  color: #94a3b8;
  margin-top: 2px;
  font-weight: 600;
}

/* 4-Hazard Decomposition Grid */
.ess-4hazard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}

.ess-hazard-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ess-hazard-name {
  font-size: 10.5px;
  font-weight: 700;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 5px;
}

.ess-hazard-status {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  margin-top: 4px;
}

.status-high { color: #f43f5e; }
.status-moderate { color: #f59e0b; }
.status-low { color: #22c55e; }
.status-normal { color: #38bdf8; }

/* River Hydrograph Box */
.ess-hydrograph-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 12px;
}

.ess-hydrograph-svg {
  width: 100%;
  height: 85px;
  margin-top: 6px;
}

/* Agricultural & Exposure Box */
.ess-exposure-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 12px;
}

.ess-exposure-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  text-align: center;
  margin-bottom: 8px;
}

.ess-crop-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ess-crop-pill {
  background: rgba(141, 198, 63, 0.12);
  border: 1px solid rgba(141, 198, 63, 0.3);
  color: #F6F4EC;
  font-size: 9.5px;
  padding: 3px 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.ess-crop-pill strong {
  color: var(--wr-accent);
}

/* Public Advisory Action Box */
.ess-advisory-box {
  background: rgba(225, 29, 72, 0.12);
  border: 1.5px solid #e11d48;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
}

.ess-advisory-header {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  color: #fda4af;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.ess-advisory-list {
  margin: 0;
  padding-left: 16px;
  font-size: 11px;
  color: #F6F4EC;
  line-height: 1.4;
}

.ess-advisory-list li {
  margin-bottom: 4px;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUpSheet {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.wr-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--wr-border);
  padding-bottom: 8px;
}

.wr-info-header h3 {
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--wr-accent);
  display: flex;
  align-items: center;
  gap: 6px;
}

.close-drawer-btn {
  background: transparent;
  border: none;
  color: var(--wr-text-muted);
  font-size: 16px;
  cursor: pointer;
}

.close-drawer-btn:hover {
  color: var(--wr-accent);
}

.wr-headline-box {
  font-size: 12px;
  line-height: 1.4;
  color: var(--wr-text-light);
  margin-bottom: 12px;
}

.wr-metric-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.wr-m-tile {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(141, 198, 63, 0.2);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.m-lbl {
  font-size: 9px;
  color: var(--wr-text-muted);
}

.m-val {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #FFFFFF;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 20, 12, 0.75);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 16px;
}

.modal-dialog {
  width: min(520px, 100%);
  background: #1a2a1d;
  border: 1px solid var(--wr-accent);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(141, 198, 63, 0.25);
  color: #FFFFFF;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(141, 198, 63, 0.25);
}

.modal-header h3 {
  font-size: 15px;
  font-family: var(--font-heading);
  color: var(--wr-accent);
  display: flex;
  align-items: center;
  gap: 8px;
}

.close-modal-btn {
  background: transparent;
  border: none;
  color: var(--wr-text-muted);
  font-size: 16px;
  cursor: pointer;
}

.close-modal-btn:hover {
  color: var(--wr-accent);
}

.snapshot-preview-box {
  width: 100%;
  height: 240px;
  background: #0f1c12;
  border: 1px solid rgba(141, 198, 63, 0.25);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  overflow: hidden;
}

.snapshot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.export-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.export-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(141, 198, 63, 0.3);
  border-radius: 8px;
  color: #FFFFFF;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.export-btn:hover {
  background: var(--wr-secondary);
  border-color: var(--wr-accent);
}

.export-btn.primary-export {
  background: var(--wr-accent);
  border-color: #FFFFFF;
  color: #1a2a1d;
  font-weight: 700;
}

.export-btn.primary-export:hover {
  background: #FFFFFF;
  color: #1a2a1d;
}

.hidden {
  display: none !important;
}

.radar-tooltip {
  background: rgba(26, 42, 29, 0.95) !important;
  border: 1px solid var(--wr-accent) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 10px rgba(141, 198, 63, 0.3) !important;
  color: #FFFFFF !important;
  font-family: var(--font-main) !important;
  padding: 6px 10px !important;
}

/* ==========================================================================
   Road Blockage & Flood Hazard Visuals
   ========================================================================== */

.wr-hazard-marker-container {
  background: transparent !important;
  border: none !important;
}

.wr-hazard-icon-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(239, 68, 68, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 9999px;
  padding: 3px 7px;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 9.5px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
  white-space: nowrap;
  animation: hazardPulse 2.5s infinite;
  cursor: pointer;
  transform-origin: center;
}

.wr-hazard-icon-pill.flood {
  background: rgba(2, 132, 199, 0.95);
  border-color: #38bdf8;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.6), 0 0 16px rgba(56, 189, 248, 0.8);
  animation: floodPulse 1.8s infinite;
}

@keyframes hazardPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.7);
  }

  70% {
    transform: scale(1.06);
    box-shadow: 0 0 0 12px rgba(244, 63, 94, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(244, 63, 94, 0);
  }
}

@keyframes floodPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7);
  }

  70% {
    transform: scale(1.06);
    box-shadow: 0 0 0 12px rgba(56, 189, 248, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
  }
}

.wr-hover-probe-pill {
  position: absolute;
  pointer-events: none;
  z-index: 1500;
  background: rgba(18, 30, 20, 0.95);
  border: 1px solid var(--wr-accent);
  border-radius: 8px;
  padding: 6px 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 10px rgba(141, 198, 63, 0.3);
  backdrop-filter: blur(8px);
  text-align: center;
  font-family: var(--font-main);
  line-height: 1.3;
  transition: opacity 0.15s ease;
}

/* ==========================================================================
   Responsive Mobile & Tablet Viewport Adaptations
   ========================================================================== */

@media (max-width: 768px) {
  .wr-top-bar {
    top: max(10px, env(safe-area-inset-top, 10px));
    left: 10px;
    right: 10px;
  }

  .wr-vertical-toolbar {
    top: 64px;
    right: 10px;
    gap: 6px;
  }

  .wr-bottom-dock {
    bottom: max(10px, env(safe-area-inset-bottom, 10px));
    left: 10px;
    right: 10px;
    gap: 8px;
  }

  .wr-info-drawer {
    top: 64px;
    left: 10px;
    right: 10px;
    width: min(360px, calc(100vw - 20px));
  }
}

@media (max-width: 540px) {
  .wr-top-bar {
    top: max(6px, env(safe-area-inset-top, 6px));
    left: 6px;
    right: 6px;
  }

  .wr-circle-btn {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .wr-top-right-group {
    gap: 5px;
  }

  /* At phone width there is no room for the full wordmark + tagline without
     wrapping across several lines — which was inflating the whole top bar to
     ~150px tall and pushing the mode switcher underneath it. Collapse to a
     single-line monogram instead of letting it wrap. */
  .wr-brand-pill {
    padding: 6px 12px;
    gap: 0;
  }

  .wr-brand-header-text {
    flex-direction: row;
  }

  .wr-brand-sub {
    display: none;
  }

  .wr-brand-white {
    display: none;
  }

  .wr-brand-main {
    font-size: 15px;
    white-space: nowrap;
  }

  .wr-brand-amp {
    font-size: 15px;
  }

  .wr-vertical-toolbar {
    top: 52px;
    right: 6px;
    gap: 5px;
  }

  .wr-layer-action-btn {
    width: 36px;
    height: 36px;
    font-size: 13px;
    border-radius: 9px;
  }

  .wr-bottom-dock {
    bottom: max(6px, env(safe-area-inset-bottom, 6px));
    left: 6px;
    right: 6px;
    gap: 6px;
  }

  .wr-interval-pill {
    padding: 4px 10px;
    font-size: 10px;
    border-radius: 6px;
  }

  .wr-slider-row {
    padding: 5px 8px;
    gap: 8px;
    border-radius: 10px;
  }

  .wr-time-readout {
    font-size: 11px;
    min-width: 50px;
  }

  .wr-slider-input::-webkit-slider-thumb {
    width: 15px;
    height: 15px;
  }

  .wr-play-circle-btn {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }

  .wr-date-strip {
    gap: 3px;
  }

  .wr-date-pill {
    padding: 5px 4px;
    font-size: 9.5px;
    border-radius: 6px;
  }

  /* Bottom sheet on phones: the map, top bar and mode switcher stay visible
     above it at all times, instead of the drawer covering the entire screen
     (as an absolute top-anchored panel it would need to, to fit its content,
     since there is no room beside it at this width). */
  .wr-info-drawer {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 62vh;
    padding: 14px 10px 10px;
    border-radius: 16px 16px 0 0;
    border-width: 1.5px 0 0 0;
    animation: slideUpSheet 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .wr-info-drawer::before {
    content: '';
    position: sticky;
    top: -14px;
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto 10px;
    border-radius: 4px;
    background: rgba(246, 244, 236, 0.35);
  }

  .wr-metric-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }

  .wr-city-name {
    font-size: 11px;
  }

  .wr-temp-num {
    font-size: 11px;
  }

  .wr-sun-ico {
    font-size: 13px;
  }

  .modal-dialog {
    padding: 14px;
    width: 95vw;
  }

  .snapshot-preview-box {
    height: 190px;
  }

  .export-options-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}
/* ==========================================================================
   Live satellite control — Meteosat-9 IODC product switcher (Cloudburst mode)
   ========================================================================== */
.ess-sat-control {
  position: absolute;
  top: 74px;
  /* Clear of the vertical toolbar on the right, and of the left-anchored
     decision drawer, so both stay usable at once. */
  right: 70px;
  width: 232px;
  background: var(--wr-bg-trans);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--wr-border);
  border-radius: 12px;
  padding: 10px;
  z-index: 1000;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
}

.ess-sat-control.hidden {
  display: none;
}

.ess-sat-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--wr-text-light);
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}

.ess-sat-latency {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--wr-brand-dark);
  background: var(--wr-accent);
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Amber once the newest scan is older than a full scan cycle — the feed is
   late, and that has to be visible rather than silently shown as current. */
.ess-sat-latency.stale {
  background: #fbbf24;
}

.ess-sat-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.ess-sat-product-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--wr-border-light);
  color: var(--wr-text-muted);
  font-family: var(--font-main);
  font-size: 9.5px;
  font-weight: 700;
  padding: 6px 5px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s;
  line-height: 1.25;
  text-align: center;
}

.ess-sat-product-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--wr-text-light);
}

.ess-sat-product-btn.active {
  background: var(--wr-accent);
  border-color: var(--wr-accent);
  color: var(--wr-brand-dark);
  font-weight: 800;
}

/* Daylight-only products stay clickable at night, but say so. */
.ess-sat-product-btn.night-limited::after {
  content: ' ☾';
  opacity: 0.75;
}

.ess-sat-legend {
  width: 100%;
  margin-top: 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  padding: 2px;
}

.ess-sat-legend.hidden {
  display: none;
}

/* IR 10.8 is a greyscale product: warm ground is near-black and cold cloud
   tops are near-white. Screen-blending drops the black to transparent so the
   basemap stays readable and only the cloud actually reads as cloud. The
   colour products (Convection RGB, rain rate, cloud top) carry their own
   palette and are composited normally. */
.leaflet-pane.satellite-blend-screen {
  mix-blend-mode: screen;
}

.ess-sat-attrib {
  margin-top: 7px;
  font-size: 8.5px;
  line-height: 1.4;
  color: var(--wr-text-muted);
}

/* Detected convective cell labels drawn on the map */
.ess-cell-label {
  background: none;
  border: none;
}

.ess-cell-chip {
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 10px;
  white-space: nowrap;
  color: #0b1220;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -180%);
  display: inline-block;
}

/* The in-drawer copy of the switcher: used only where the floating panel
   cannot fit without covering the map or the drawer. */
.ess-sat-inline {
  display: none;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .ess-sat-control {
    display: none;
  }

  .ess-sat-inline {
    display: block;
  }
}