/* rem not em: Leaflet sets font-size:12px on .leaflet-container, so em
   would resolve to 12px there instead of the body 16px. */
.map { width: 32rem; height: 18rem; }

.feature-panel {
    height: 18rem;
    overflow-y: auto;
    border: 1px solid #ccc;
    box-sizing: border-box;
    padding-left: 0.5rem;
}

.region-cols {
    display: grid;
    grid-template-columns: 32rem 1fr 1fr 1fr;
    column-gap: 1rem;
    align-items: start;
}
input[type=text] { font-family: monospace; }
.spinner::before {
    content: '';
    display: inline-block;
    width: 0.8em; height: 0.8em;
    border: 2px solid #ccc; border-top-color: #333;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 0.4em;
}
@keyframes spin { to { transform: rotate(360deg); } }
.map-controls { min-height: 1.4em; margin: 0; }
.map-controls label { margin-right: 0.4em; }
.map-controls select { font-family: monospace; }
.wms-source { overflow-wrap: break-word; word-break: break-word; }
.prop-note { font-size: 0.85em; color: #888; }