/* rado2loc app component (not in the design system yet): listings map, R2l::MapComponent.
   MapLibre's own stylesheet is loaded on demand; the popup and credits are restyled here with the tokens
   (two-class selectors, so they win over maplibre-gl.css whatever the loading order). */

/* isolation keeps MapLibre's z-indexes (controls 2, the Ctrl/⌘ + scroll hint 99999) inside the map,
   so nothing from it paints over the sticky navbar when the page scrolls. */
.r2l-map { position: relative; isolation: isolate; width: 100%; height: 420px; border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-sunken); }
@media (max-width: 720px) { .r2l-map { height: 320px; } }

/* Popups above the controls: on phones the credits box starts open and would hide the popup's last line. */
.r2l-map .maplibregl-popup { z-index: 3; }
.r2l-map .maplibregl-popup-content { padding: 0; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-pop); font-family: var(--font-sans); }
.r2l-map .maplibregl-popup-anchor-top .maplibregl-popup-tip, .r2l-map .maplibregl-popup-anchor-top-left .maplibregl-popup-tip, .r2l-map .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--surface-raised); }
.r2l-map .maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .r2l-map .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, .r2l-map .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--surface-raised); }
.r2l-map .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface-raised); }
.r2l-map .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface-raised); }
.r2l-map .maplibregl-popup-close-button { top: 6px; right: 6px; width: 28px; height: 28px; border-radius: var(--radius-pill); font-size: 20px; line-height: 1; color: var(--ink-muted); }
.r2l-map .maplibregl-popup-close-button:hover { background: var(--primary-soft); color: var(--primary); }

/* Each raft is a link filling its part of the popup (a click anywhere opens the listing). */
.r2l-map-popup-item { display: block; padding: var(--space-4) var(--space-8) var(--space-4) var(--space-4); color: inherit; text-decoration: none; transition: background-color .15s ease; }
.r2l-map-popup-item:hover { background: var(--primary-soft); }
.r2l-map-popup-item:focus-visible { outline-offset: -3px; }
.r2l-map-popup-item + .r2l-map-popup-item { border-top: 1px solid var(--line); }
.r2l-map-popup-title { font-family: var(--font-display); font-size: 17px; line-height: 22px; font-weight: 500; color: var(--ink); }
.r2l-map-popup-spec { margin-top: 2px; font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink); }
.r2l-map-popup-meta { margin-top: 2px; font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.r2l-map .maplibregl-ctrl-attrib { font-family: var(--font-sans); }
.r2l-map .maplibregl-cooperative-gesture-screen { font-family: var(--font-sans); }