.map-panel[data-panel-key="rainfall"] { grid-column: 1 / -1; }
.map-panel .mini-map.rainfall-frame { height: 440px; }
.rainfall-frame { display: flex; min-height: 0; background: #f5f9fc; color: #163a50; }
.rainfall-canvas { flex: 1; min-width: 0; min-height: 200px; }
.rainfall-tools { box-sizing: border-box; width: 310px; padding: 12px; overflow: auto; font-size: 12px; line-height: 1.45; background: #f5f9fc; }
.rainfall-tools label, .rainfall-tools small { display: block; margin: 8px 0; }
.rainfall-tools select { display: block; box-sizing: border-box; width: 100%; margin-top: 4px; }
.rainfall-tools input[type="range"] { width: 100%; }
.rainfall-tools .rainfall-check { display: flex; gap: 6px; align-items: center; }
.rainfall-tools .rainfall-check input { width: auto; margin: 0; }
.rainfall-tools p { margin: 8px 0; }
.rainfall-status { font-weight: 600; }
.rainfall-warning, .rainfall-alert { background: #fff3d7; padding: 8px; border-left: 3px solid #c57800; }
.rainfall-tools summary { cursor: pointer; font-weight: 600; }
.rainfall-tools a { color: #125c86; text-decoration: underline; }
.rainfall-legend { width: 100%; height: auto; background: white; }
.rainfall-frame .leaflet-rainfall-pane img { image-rendering: pixelated; }
@media (max-width: 700px) {
  .rainfall-frame { flex-direction: column; }
  .map-panel .mini-map.rainfall-frame { height: 630px; }
  .rainfall-tools { width: 100%; max-height: 320px; flex-shrink: 0; }
}

/* Seven matched display colors; no-data is separate from the rainfall scale. */
.rain-rate-legend { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:12px 0; padding:12px; border:1px solid #a9becd; border-radius:8px; background:#fff; color:#163a50; font-size:11px; }
.rain-rate-legend strong,.rain-rate-legend p { grid-column:1/-1; }
.rain-rate-legend span { display:flex; align-items:center; gap:6px; }
.rain-rate-legend i { flex:none; width:23px; height:18px; border:1px solid #64748b; border-radius:3px; }
.rain-place { font-weight:700; margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid #cbd5e1; }
.rainfall-frame .leaflet-rainfall-pane canvas { image-rendering:pixelated; }