/*
 * sd-region-map.css — shared geographic map primitive (Doc 31 §K).
 * Pairs with sd-region-map.js. Loaded once per pane that consumes
 * the primitive.
 *
 * Aspect ratio matches the SVG world map's viewBox (1200 × 626 ≈
 * 1.917). Width fills the container; height follows naturally.
 */

.lp-region-map {
    width: 100%;
}

.lp-region-map-svg {
    /* Full pane width; height follows the SVG's natural Mercator
       aspect (1200 / 626 ≈ 1.917). Designer-tested legible from
       ~1500px wide down to ~340px wide, so we don't cap either
       dimension — the map shrinks + grows with its host column.
       (Earlier draft used max-height: 320px which produced empty
       horizontal bars on wide panes due to preserveAspectRatio
       letterboxing.) */
    width: 100%;
    aspect-ratio: 1200 / 626;
    display: block;
}

/* The world-map background (loaded as <image> from
   /embed/world-map/world-{variant}.svg). */
.lp-region-map-bg {
    /* The four colour variants are designed to be drop-in; they
       carry their own ocean + land fills. No CSS overrides here. */
    pointer-events: none;
}

.lp-region-map-dot {
    cursor: pointer;
    transition: filter 100ms ease, r 120ms ease;
}

.lp-region-map-dot:hover,
.lp-region-map-dot:focus-visible {
    filter: brightness(0.85);
    outline: none;
}

.lp-region-map-caption {
    font-size: 11px;
    color: var(--lp-pane-ink-faint);
    font-style: italic;
    text-align: center;
    margin-top: 6px;
    padding: 0 var(--lp-pane-pad-x);
}

/* No narrow-container override — aspect-ratio scales the map down
   on its own. The SVG's underlying paths are designed (Natural
   Earth 1:50m, simplified at ε ≈ 1.2 px) to remain legible from
   1500px wide down to 340px wide; below 340px the country shapes
   start to merge but the AWS region pins still convey usable
   geographic context. */