html, body, #map { height: 100%; margin: 0; }
.overlay { position: fixed; background: rgba(255, 255, 255, 0.95); padding: 10px 14px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.25); z-index: 1000; }
.overlay-left { top: 12px; left: 56px; display: flex; align-items: center; gap: 14px; }
.brand-logo { height: 72px; width: auto; display: block; }
.title-block { font-family: Arial, Helvetica, sans-serif; line-height: 1.15; white-space: nowrap; }
.title-block .title { font-size: 18px; font-weight: 700; color: #111; }
.overlay-weather { left: 56px; top: 110px; width: 260px; }
.overlay-status { top: 12px; right: 12px; }
.status-block { font-family: Arial, Helvetica, sans-serif; line-height: 1.2; text-align: left; white-space: nowrap; min-width: 240px; }
.phone-label { font-size: 14px; font-weight: 700; color: #b30000; }
.phone-number { font-size: 16px; font-weight: 800; color: #b30000; margin-top: 2px; }
.ts { margin-top: 6px; font-size: 12px; color: #555; font-weight: 600; }
.totals { margin-top: 6px; font-size: 13px; color: #111; font-weight: 800; }
.weather-title { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 800; color: #111; margin-bottom: 8px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.toggle-state { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 900; width: 34px; text-align: left; color: #111; }
.switch { position: relative; width: 44px; height: 24px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background-color: #c9c9c9; transition: .2s; border-radius: 24px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.slider:before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background-color: white; transition: .2s; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.switch input:checked + .slider { background-color: #2f7dff; }
.switch input:checked + .slider:before { transform: translateX(20px); }
.opacity-block { margin-top: 10px; font-family: Arial, Helvetica, sans-serif; }
.opacity-label-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 800; color: #111; margin-bottom: 6px; }
#radarOpacity { width: 100%; }
#radarOpacity[disabled] { opacity: 0.45; }
.radar-time { margin-top: 10px; font-size: 12px; font-weight: 700; color: #333; }
.cluster-bubble { border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: Arial, Helvetica, sans-serif; font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,0.35); border: 2px solid rgba(255,255,255,0.85); user-select: none; }
.leaflet-marker-icon.leaflet-div-icon { background: transparent; border: none; }
.legend { position: fixed; left: 12px; bottom: 12px; background: rgba(255, 255, 255, 0.95); padding: 8px 12px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.25); z-index: 1000; font-family: Arial, Helvetica, sans-serif; min-width: 180px; }
.legend-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #111; margin: 4px 0; font-weight: 700; }
.legend-swatch { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.85); box-shadow: 0 1px 3px rgba(0,0,0,0.25); flex: 0 0 auto; }
.legend-low  { background: rgba(0,160,0,0.92); }
.legend-med  { background: rgba(255,215,0,0.92); }
.legend-high { background: rgba(255,140,0,0.92); }
.refresh-note { margin-top: 4px; font-size: 11px; color: #777; font-weight: 700; }
.town-label { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 600; color: #333; white-space: nowrap; text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff; pointer-events: none; transform: translate(-50%, -100%); padding-bottom: 4px; }
.phone-link { color: inherit; text-decoration: none; }

/* --- Mobile brand bar (hidden on desktop) --- */
.mobile-brand { display: none; }

/* --- Hamburger button (hidden on desktop) --- */
.menu-toggle { display: none; }
.drawer-close { display: none; }
.drawer-backdrop { display: none; }
.drawer-panel { display: contents; }

/* --- Mobile layout (600px and below) --- */
@media (max-width: 600px) {
  /* Hamburger button */
  .menu-toggle {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 8px; left: 10px; z-index: 1200;
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.95); border: none; border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    font-size: 24px; color: #111; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-toggle.hidden { display: none; }

  /* Brand bar at top of screen */
  .mobile-brand {
    display: flex; align-items: center; gap: 10px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 1100;
    background: rgba(255,255,255,0.95);
    padding: 8px 14px 8px 62px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  }
  .mobile-brand .brand-logo { height: 44px; }
  .mobile-brand .title { font-size: 16px; }

  /* Hide brand panel inside drawer on mobile */
  .drawer-panel[aria-label="Brand banner"] { display: none; }

  /* Backdrop */
  .drawer-backdrop {
    display: none; position: fixed; inset: 0; z-index: 1300;
    background: rgba(0,0,0,0.4);
  }
  .drawer-backdrop.open { display: block; }

  /* Drawer */
  .drawer {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 290px; max-width: 85vw;
    z-index: 1400;
    background: #f5f5f5;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 16px 14px 24px;
    box-shadow: 2px 0 12px rgba(0,0,0,0.3);
  }
  .drawer.open { transform: translateX(0); }

  /* Close button inside drawer */
  .drawer-close {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: none; border: none;
    font-size: 28px; color: #555; cursor: pointer;
    margin-left: auto; margin-bottom: 8px;
    -webkit-tap-highlight-color: transparent;
  }

  /* Drawer panels stack vertically */
  .drawer-panel {
    display: block;
    margin-bottom: 12px;
  }

  /* Reset overlays inside drawer — no fixed positioning */
  .drawer .overlay {
    position: static;
    width: auto;
    box-shadow: none;
    border-radius: 6px;
    background: #fff;
  }
  .drawer .overlay-left {
    top: auto; left: auto;
    flex-direction: row; align-items: center; gap: 10px;
  }
  .drawer .brand-logo { height: 52px; }
  .drawer .overlay-weather { left: auto; top: auto; width: auto; }
  .drawer .overlay-status { top: auto; right: auto; }
  .drawer .status-block { min-width: 0; white-space: normal; }
  .drawer .phone-number { font-size: 20px; }
  .drawer .phone-link { text-decoration: underline; }
  .drawer .legend {
    position: static;
    min-width: 0; width: auto;
    box-shadow: none;
  }
  .drawer .legend-swatch { width: 18px; height: 18px; }
  .drawer .legend-row { font-size: 14px; gap: 10px; margin: 6px 0; }

  /* Larger touch targets for toggle */
  .drawer .switch { width: 50px; height: 28px; }
  .drawer .slider:before { height: 22px; width: 22px; }
  .drawer .switch input:checked + .slider:before { transform: translateX(22px); }

  /* Range slider taller tap area */
  .drawer #radarOpacity { height: 28px; }
}