/* rem not em: Leaflet sets font-size:12px on .leaflet-container, so em
   would resolve to 12px there instead of the body 16px. */

.region-cols {
    display: grid;
    grid-template-columns: 32rem 1fr;
    column-gap: 1rem;
    row-gap: 0.5rem;
    align-items: start;
}

.header { grid-column: 1 / span 2; grid-row: 1; }
.map { width: 32rem; height: 32rem; grid-column: 1; grid-row: 2; }
.details-panel {
    height: 32rem;
    grid-column: 2; grid-row: 2;
    overflow-y: auto;
    border: 1px solid #ccc;
    box-sizing: border-box;
    padding: 0.5rem;
}
.status-bar {
    grid-column: 1 / span 2;
    grid-row: 3;
    font-size: 0.85rem;
    color: #444;
}

.details-panel dl { margin: 0; }
.details-panel dt { font-weight: bold; margin-top: 0.4rem; }
.details-panel dd { margin: 0 0 0 1.2rem; word-break: break-word; }

.legend {
    display: inline-block;
    width: 0.8em; height: 0.8em;
    border-radius: 50%;
    border: 1px solid #444;
    vertical-align: middle;
    margin-right: 0.3em;
}