html,
body {
    height: 100%;
}

#map {
    position: relative;
    width: 100%;
    height: min(70vh, 40rem);
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* Canvas underlay */
#map canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* SVG overlay */
#map svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Circles themselves can still receive hover/click */
#map svg circle {
    pointer-events: auto;
}

/* Shared color mixing for stations + legend blocks */
:root {
    --color-departures: steelblue;
    --color-arrivals: darkorange;
}

/* Use the same mixing formula for circles and legend blocks */
#map svg circle,
.legend>div {
    --color: color-mix(in oklch,
            var(--color-departures) calc(100% * var(--departure-ratio)),
            var(--color-arrivals));
    background-color: var(--color);
    /* for legend blocks */
    fill: var(--color);
    /* for circles */
}