:root {
  --bg: #0b1220;
  --panel: #101a2e;
  --panel-2: #17223b;
  --text: #e7eef9;
  --muted: #9aa7bf;
  --accent: #4da3ff;
  --accent-2: #6fd0ff;
  --warn: #ffb545;
  --danger: #ff4d4f;
  --border: #1e2a47;
  --radius: 12px;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* -------- Header -------- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: linear-gradient(180deg, #13203a 0%, #0b1220 100%);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 500;
}

.title-block h1 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0.2px;
}

.location-label {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* Install-app button: small accent-colored chip under the location label.
   Only visible when the browser confirms the site is installable (or when
   we detect iOS Safari, which has no auto-prompt). */
.install-btn {
  margin-top: 6px;
  padding: 4px 10px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #04121f;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.install-btn:hover { filter: brightness(1.1); }
.install-btn:disabled { opacity: 0.5; cursor: wait; }

.search-form {
  display: flex;
  gap: 6px;
  align-items: center;
  position: relative;
}

.search-form input[type="text"] {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  min-width: 260px;
  font-size: 14px;
  outline: none;
}

.search-form input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.2);
}

.search-form button {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
}

.search-form button:hover { background: #22304f; }

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  list-style: none;
  padding: 6px 0;
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 600;
  box-shadow: var(--shadow);
}

.search-results li {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}

.search-results li:hover { background: var(--panel-2); }

/* -------- Alert banner -------- */
.alert-banner {
  background: linear-gradient(90deg, #3a1010, #6a1717);
  border-bottom: 1px solid #a02b2b;
  color: #ffeaea;
  padding: 10px 20px;
  font-size: 14px;
}

.alert-banner.warning {
  background: linear-gradient(90deg, #4a2a00, #7a4400);
  border-bottom-color: #b57800;
  color: #fff3d9;
}

.alert-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.alert-inner p { margin: 0; flex: 1; }
.alert-inner strong { letter-spacing: 0.3px; }

#alert-toggle {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: inherit;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.alert-list {
  list-style: none;
  padding: 10px 0 0;
  margin: 10px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  max-height: 220px;
  overflow-y: auto;
}

.alert-list li {
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.4;
}

.alert-list li .event {
  display: inline-block;
  font-weight: 600;
  margin-right: 6px;
}

/* -------- Layout -------- */
.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 360px 1fr;
  min-height: 0;
}

.panel {
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding: 18px;
  overflow-y: auto;
}

.panel h2 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin: 22px 0 10px;
}

/* -------- Current conditions card -------- */
.current-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.current-main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.current-icon {
  font-size: 52px;
  line-height: 1;
  /* Many weather emojis render with very dark cloud bodies (especially ⛈
     and ☁️) that disappear into the navy panel. A soft white drop-shadow
     gives them a glow halo so they stay legible on dark backgrounds. */
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.55))
          drop-shadow(0 0 1px rgba(255, 255, 255, 0.7));
}

.current-temp {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.current-desc {
  color: var(--muted);
  font-size: 14px;
  margin-top: 2px;
}

.current-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  font-size: 14px;
}

.current-grid > div {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}

.current-grid .label { color: var(--muted); }

/* UV cell: holds label + button + popover. Position relative so the
   popover can anchor to it. */
.uv-cell { position: relative; }

.uv-button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline dotted var(--muted);
  text-underline-offset: 3px;
}
.uv-button:hover { color: var(--accent-2); }

/* Popover floats below the UV button. On small screens it spans the panel. */
.uv-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 600;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 12px 14px;
  min-width: 260px;
  max-width: 320px;
  font-size: 12px;
  color: var(--text);
}
.uv-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.uv-pop-head strong { font-size: 13px; }
.uv-pop-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.uv-pop-close:hover { color: var(--text); }
.uv-pop-hint { color: var(--muted); margin: 0 0 8px; font-size: 11px; line-height: 1.4; }
.uv-pop-table { width: 100%; border-collapse: collapse; }
.uv-pop-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.uv-pop-table tr:last-child td { border-bottom: none; }
.uv-pop-table td:first-child  { color: var(--muted); width: 50px; }
.uv-pop-table td:nth-child(2) { color: var(--text);  }
.uv-pop-table td:last-child   { text-align: right; color: var(--accent-2); font-weight: 600; }
.uv-pop-table tr.current td {
  background: rgba(77, 163, 255, 0.15);
}
.uv-pop-table tr.current td:first-child {
  color: var(--accent-2);
}
.uv-pop-foot {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

/* Source attribution under the current-conditions card. Helps the user
   know whether they're looking at a real station reading or a forecast
   model output. */
.current-source {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.current-source .src-station { color: var(--accent-2); font-weight: 600; }
.current-source .src-model   { color: var(--muted); font-style: italic; }

/* -------- Forecast grid -------- */
.forecast-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.forecast-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 120ms, transform 120ms;
}

.forecast-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.forecast-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.forecast-card.active {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--panel-2), rgba(77, 163, 255, 0.08));
}

.forecast-card .day {
  font-weight: 600;
  color: var(--accent-2);
}

.forecast-card .date {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}

.forecast-card .icon {
  font-size: 24px;
  margin: 4px 0;
  /* Same halo as .current-icon — keeps dark emoji (thunderstorm, clouds)
     readable on the dark card. */
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5))
          drop-shadow(0 0 1px rgba(255, 255, 255, 0.7));
}

.hourly-table .icon-cell {
  /* Smaller glow for table cells — too bright would dominate the row. */
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.45));
}

.forecast-card .hi {
  /* High temp pops with a warm gold so it's instantly readable against
     the dark panel — also visually cues "high = warm" vs the muted
     blue-gray low below it. */
  font-weight: 700;
  font-size: 16px;
  color: #ffd76b;
  margin: 2px 0 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.forecast-card .lo {
  color: var(--muted);
  font-size: 12px;
}

/* -------- Status row -------- */
.status-row {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}

.refresh-btn {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #04121f;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
}

.refresh-btn:hover { filter: brightness(1.1); }
.refresh-btn:disabled { opacity: 0.5; cursor: wait; }

.refresh-status { flex: 1; text-align: center; }

.refresh-mode {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(77, 163, 255, 0.15);
  color: var(--accent-2);
  font-weight: 600;
}

.refresh-mode.alert {
  background: rgba(255, 77, 79, 0.18);
  color: #ff9ea0;
}

/* -------- Map -------- */
.map-wrap {
  position: relative;
  min-height: 0;
}

#map {
  width: 100%;
  height: 100%;
  min-height: 400px;
  background: #071129;
}

.map-controls {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(11, 18, 32, 0.88);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  font-size: 13px;
  backdrop-filter: blur(6px);
}

.map-controls-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.map-controls-row--secondary {
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
}

.map-controls button {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  min-width: 40px;
}

.map-controls button:hover { background: #22304f; }

#radar-timeline {
  flex: 1;
  accent-color: var(--accent);
  cursor: pointer;
}

.radar-timestamp {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 140px;
  text-align: right;
}

.radar-count { font-size: 11px; }

.opacity-control {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.opacity-control input { width: 110px; accent-color: var(--accent); }

/* -------- Day-detail overlay -------- */
.day-detail {
  position: absolute;
  inset: 0;
  z-index: 1100;
  background: var(--bg);
  overflow-y: auto;
  padding: 18px 20px 28px;
}

.detail-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.detail-back {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}

.detail-back:hover { background: #22304f; }

.detail-title-block { flex: 1; }
.detail-title-block h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.2px;
}

.detail-subtitle {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.detail-narrative {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 18px;
  color: #d8e4f5;
}

.detail-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.detail-section h3 {
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}

.detail-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.detail-section-row h3 { margin: 0; }

.detail-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 10px;
}

.detail-hourly {
  /* Make the hourly table its own scroll container. With a fixed
     max-height, the sticky thead inside locks at the top while the
     body scrolls — Excel-style "freeze top row". The exact height
     leaves the section header + a few rows visible at once. */
  overflow: auto;
  max-height: 60vh;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  /* Smooth momentum scrolling on iOS */
  -webkit-overflow-scrolling: touch;
}

.hourly-table {
  width: 100%;
  border-collapse: separate;     /* required so sticky th can carry a border */
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.hourly-table th,
.hourly-table td {
  padding: 6px 8px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.hourly-table th {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  text-align: right;
  /* Frozen top row */
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--panel-2);
  /* Faux border-bottom that scrolls with the header (real border-bottom
     on a sticky element gets clipped in some browsers). */
  box-shadow: inset 0 -1px 0 var(--border);
}

.hourly-table th:first-child,
.hourly-table td:first-child {
  text-align: left;
}

.hourly-table .icon-cell { font-size: 16px; text-align: center; }
.hourly-table .icon-cell, .hourly-table th.icon-col { text-align: center; }

.hourly-table .wind-cell { line-height: 1.15; }
.hourly-table .wind-from {
  display: block;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.hourly-table tr.now td {
  background: rgba(77, 163, 255, 0.10);
}

.hourly-table tr.now td:first-child {
  font-weight: 600;
  color: var(--accent-2);
}

.spc-toggle {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #04121f;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
}

.spc-toggle:hover { filter: brightness(1.1); }

.spc-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

/* Plain link list (no image embeds — just routes to spc.noaa.gov) */
.spc-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.spc-link-list li { margin: 0; }
.spc-link-list a {
  display: block;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--accent-2);
  text-decoration: none;
  font-size: 14px;
}
.spc-link-list a:hover {
  border-color: var(--accent);
  background: #1a2845;
}

.spc-image {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}

.spc-image a { display: block; line-height: 0; }

.spc-image img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.spc-image-fallback {
  background: #f4f6fb;
  color: #1a2942;
  border: 1px dashed #aab4cc;
  border-radius: 6px;
  padding: 28px 12px;
  font-size: 13px;
  text-align: center;
  line-height: 1.45;
}

.spc-image .source a {
  color: #2566c4;
  text-decoration: none;
}

.spc-image .source a:hover { text-decoration: underline; }

.spc-image .label {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #1a2942;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.spc-image .source {
  font-size: 10px;
  color: #6a7795;
  margin-top: 2px;
}

/* -------- Leaflet layer control (override default white styling) -------- */
.leaflet-control-layers {
  background: rgba(11, 18, 32, 0.92) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow);
}

.leaflet-control-layers-expanded {
  padding: 10px 12px !important;
  font-size: 13px;
}

.leaflet-control-layers label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 4px 0 !important;
  cursor: pointer;
}

.leaflet-control-layers input[type="checkbox"],
.leaflet-control-layers input[type="radio"] {
  accent-color: var(--accent);
}

.leaflet-control-layers-separator {
  border-top-color: var(--border) !important;
}

/* Popup styling to match dark theme */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
}

.leaflet-popup-content { margin: 10px 14px; font-size: 13px; }
.leaflet-popup-content a { color: var(--accent-2); }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }

/* -------- Footer -------- */
.app-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px;
  background: #0a111f;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}

/* -------- Responsive -------- */
@media (max-width: 900px) {
  /* On mobile, the whole page scrolls as one document instead of locking
     the panel and map to fixed viewport heights. That way you can swipe
     down naturally from the forecast cards into the radar map and back,
     and the browser's normal scrollbar takes care of position. */
  html, body { height: auto; }
  body {
    min-height: 100vh;
    display: block;             /* was flex column on desktop */
  }
  .layout {
    display: block;             /* was grid on desktop */
    min-height: 0;
  }
  .panel {
    max-height: none;
    overflow-y: visible;        /* let it grow with content */
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  /* Map needs an explicit height now that nothing flexes. ~70vh keeps it
     usable without dominating the page; users scroll past it to get to
     the footer. */
  .map-wrap {
    display: block;
    height: auto;
  }
  #map {
    height: 70vh;
    min-height: 360px;
  }
  .app-header { flex-direction: column; align-items: stretch; }
  .search-form input[type="text"] { min-width: 0; flex: 1; }
  .search-form { flex-wrap: wrap; }

  /* Collapsed layer control: shows as a tappable icon instead of a panel
     covering the map. Tap to expand the layer list. */
  .leaflet-control-layers {
    margin-top: 8px !important;
    margin-right: 8px !important;
  }
  .leaflet-control-layers-toggle {
    width: 40px !important;
    height: 40px !important;
    background-size: 22px 22px !important;
  }
  /* When the user taps it open, keep the panel within viewport */
  .leaflet-control-layers-expanded {
    max-width: 80vw;
    max-height: 50vh;
    overflow-y: auto;
  }

  /* On mobile, take the radar controls OUT of the map overlay and place
     them as a normal block below the map. Otherwise they cover whatever
     part of the radar is most interesting. */
  .map-wrap {
    display: flex;
    flex-direction: column;
  }
  #map { flex: 1 1 auto; }
  .map-controls {
    position: static;
    margin: 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--border);
    background: var(--panel);
    backdrop-filter: none;
    padding: 10px 12px;
    font-size: 12px;
    box-shadow: none;
  }
  .map-controls-row { gap: 8px; }
  .radar-timestamp { min-width: 0; font-size: 11px; }
  .opacity-control input { width: 80px; }

  /* Status row stacks cleanly on small panels */
  .status-row { flex-wrap: wrap; }
  .refresh-status { flex: 1 1 100%; text-align: left; order: 3; }

  /* Tighter hourly table on phones; the frozen top row stays visible
     while the body scrolls inside its container. Cap height a bit
     shorter so the section header + a few rows are visible at once
     without thumb-stretching. */
  .detail-hourly {
    max-height: 55vh;
    font-size: 12px;
  }
  .hourly-table th,
  .hourly-table td {
    padding: 5px 6px;
  }
  .hourly-table .wind-from { font-size: 9px; }
}