.beach-layout { display:grid; grid-template-columns:minmax(0, 2fr) minmax(18rem, 1fr); gap:1rem; }
.beach-map-canvas { min-height: min(72vh, 50rem); background:#e2f0f3; border-radius:1rem; z-index:0; }
.beach-panel { border:1px solid #ccdce1; border-radius:1rem; padding:1rem; }
.beach-panel label { display:block; font-weight:600; margin:.6rem 0 .25rem; }
.beach-readings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; margin-top:.75rem; }
.beach-readings div { padding:.55rem; border-radius:.5rem; background:#edf5f6; color:#173540; }
.beach-readings dd { margin:0; }
@media (max-width: 767px) {
    .beach-layout { grid-template-columns:1fr; }
    .beach-map-canvas { min-height: 42vh; }
}