body {
    font-family: sans-serif;
    padding: 20px;
}

#map {
    height: 500px;
    width: 100%;
    border: 1px solid #ccc;
    margin-bottom: 20px;
}

.controls {
    margin-bottom: 20px;
}

.controls label {
    margin-right: 10px;
}

#country-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.country-item {
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 5px;
}

#selected-country {
    border: 2px solid #3498db;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
}

/* Targets interactive SVG paths used by Leaflet polygons/rectangles. Without
 * this, selecting a country shows a giant rectangle around it. */
path.leaflet-interactive:focus {
    outline: none;
}