/* Styles for the markers and popups atlasMap.js builds. Versioned with the script. */
.atlas-map-shell {
    height: 60vh;
    min-height: 22rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .12);
}

.atlas-popup {
    min-width: 11rem;
    font-size: .85rem;
}

.atlas-popup-count {
    font-size: 1.15rem;
    font-weight: 700;
}

.atlas-popup-title {
    font-weight: 700;
    margin-bottom: .15rem;
}

.atlas-popup-sub {
    color: #555;
    margin-bottom: .45rem;
}

.atlas-popup-btn {
    border: 1px solid #114A6B;
    background: #fff;
    color: #114A6B;
    border-radius: 4px;
    padding: .25rem .55rem;
    font-size: .8rem;
    cursor: pointer;
}

.atlas-popup-btn:hover {
    background: #114A6B;
    color: #fff;
}

.atlas-popup-link {
    font-weight: 600;
}

.atlas-cell {
    transition: fill-opacity .15s ease;
}

.atlas-cell:hover {
    fill-opacity: .8;
}

/* Density legend under the map. */
.atlas-legend {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: .6rem;
    font-size: .8rem;
    color: var(--bc-ink-muted, #666);
}

.atlas-legend-scale {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.atlas-legend-swatch {
    display: inline-block;
    width: 1.1rem;
    height: .7rem;
    border-radius: 2px;
}