:root {
  --surface: #fff8e7;
  --accent: #ef7047;
  --accent-dark: #24766e;
}

html, body { height: 100%; }
body { margin: 0; color: #25313c; background: #bdd6dc; }
.map-navbar { position: fixed; left: 0; right: 0; }
.map-shell, #uvMap { width: 100%; height: 100%; }
.map-shell { height: 100dvh; }
#uvMap { background: #d1cfbd; }
.leaflet-top { top: 70px; }

.uv-panel {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 700;
  width: min(380px, calc(100% - 40px));
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
  padding: 20px;
  border: 1px solid #aaa;
  background: var(--surface);
}

.panel-kicker { margin: 0 0 12px; }
.search-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.search-input, .search-select { width: 100%; min-width: 0; padding: 10px; border: 1px solid #aaa; font-size: 16px; }
.search-picker { display: none; margin-top: 12px; }
.place-name { margin: 16px 0; font-size: 24px; }
.uv-row { display: flex; align-items: center; gap: 16px; }
.uv-value { font-size: 56px; }
.risk-pill { padding: 8px; background: #ddd; }
.risk-low { background: #ccebd2; }
.risk-moderate { background: #fff0af; }
.risk-high { background: #ffd1a8; }
.risk-very-high { background: #ffc5c5; }
.risk-extreme { background: #e2c9f3; }
.guidance { line-height: 1.5; }
.coords { font-size: 13px; }
.city-time-box { margin: 16px 0; }
.city-time-box span { display: block; font-size: 13px; }
.city-time-box time { font-size: 24px; }
.panel-actions { display: flex; gap: 8px; }
.action-button { padding: 10px; border: 0; color: #fff; background: var(--accent-dark); cursor: pointer; }
.location-pin { background: transparent; border: 0; }
.location-pin svg { max-width: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .uv-panel {
    left: 10px;
    bottom: 20px;
    width: calc(100% - 20px);
    max-height: 45dvh;
    padding: 12px;
  }
  .place-name { margin: 10px 0; font-size: 20px; }
  .uv-value { font-size: 40px; }
}