/* ============================================================================
   Rooted Stack — Experience Map
   Presentation layer over Leaflet. Functionality (RsDiscover, rs:pin-selected,
   geolocation) is untouched — this only restyles container, pins and popups.
   The pin: circle + rotated square, aperture is a hole in the pin. Tip touches
   the exact spot. Ochre marks position — and nothing else.
   ============================================================================ */

.rs-map, #rs-map, #rs-home-map {
    border-radius: var(--rs-radius-lg);
    border: 1px solid var(--rs-line);
    overflow: hidden;
    background: var(--rs-land-tint);
    box-shadow: var(--rs-shadow-card);
}

/* Custom teardrop pin (L.divIcon markup: .rs-pin > .rs-pin-aperture). */
.rs-pin {
    width: 26px; height: 26px;
    background: var(--rs-ochre);
    border-radius: var(--rs-radius-pin);
    transform: rotate(-45deg);
    box-shadow: var(--rs-shadow-raised);
    display: grid; place-items: center;
    border: 2px solid #fff;
}
.rs-pin-aperture { width: 9px; height: 9px; border-radius: 50%; background: var(--rs-chart-paper); }
.rs-pin--live { background: var(--rs-hibiscus); }
.rs-pin--sel { box-shadow: var(--rs-glow-pin), var(--rs-shadow-pop); z-index: 500; }

/* Category glyph primitives — six categories, six shapes. */
.rs-glyph { display: inline-block; width: 12px; height: 12px; background: currentColor; color: var(--rs-teal-400); flex: none; }
.rs-glyph--stays { border-radius: 2px; }                        /* SQUARE */
.rs-glyph--experiences { border-radius: 2px; transform: rotate(45deg); }  /* DIAMOND */
.rs-glyph--food { border-radius: 50%; }                         /* CIRCLE */
.rs-glyph--transport { background: transparent; border: 2px solid currentColor; border-radius: 50%; } /* RING */
.rs-glyph--shopping { border-radius: 99px; width: 16px; height: 9px; }     /* PILL */
.rs-glyph--services { border-radius: 12px 12px 0 0; height: 7px; }         /* HALF */

/* Leaflet popup -> Rooted Stack card */
.leaflet-popup-content-wrapper {
    border-radius: var(--rs-radius-md) !important;
    box-shadow: var(--rs-shadow-pop) !important;
    border: 1px solid var(--rs-line);
}
.leaflet-popup-content { font-family: var(--rs-sans) !important; margin: 12px 14px !important; color: var(--rs-text); }
.leaflet-popup-content .rs-pop-title { font-weight: 600; color: var(--rs-text-strong); }
.leaflet-popup-content .rs-pop-price { font-family: var(--rs-mono); font-size: var(--rs-fs-xs); color: var(--rs-text-muted); }
.leaflet-popup-content .rs-pop-live { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--rs-hibiscus); }
.leaflet-popup-content .rs-pop-link { color: var(--rs-link); font-weight: 600; font-size: var(--rs-fs-sm); }
.leaflet-popup-tip { border: 1px solid var(--rs-line); }
.leaflet-container { font-family: var(--rs-sans); }
.leaflet-bar a { color: var(--rs-deep-water) !important; }

/* Map controls / chrome overlay */
.rs-map-controls { display: flex; gap: 6px; flex-wrap: wrap; }

/* Island selector — sub-charts, mono codes */
.rs-islands { display: inline-flex; gap: 4px; padding: 4px; background: var(--rs-surface); border: 1px solid var(--rs-line); border-radius: var(--rs-radius-pill); }
.rs-island {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font-family: var(--rs-mono); font-size: var(--rs-fs-xs); text-transform: uppercase; letter-spacing: .1em;
    color: var(--rs-text-muted); background: transparent; border: 0; border-radius: var(--rs-radius-pill);
    padding: 5px 12px; text-decoration: none;
    transition: background var(--rs-dur-2) var(--rs-ease), color var(--rs-dur-2) var(--rs-ease);
}
.rs-island:hover { color: var(--rs-deep-water); text-decoration: none; }
.rs-island[aria-current="true"], .rs-island--on { background: var(--rs-deep-water); color: var(--rs-on-ink); }

/* Map preview card (hover/selected listing) */
.rs-map-preview {
    position: absolute; left: 14px; bottom: 14px; z-index: 500; max-width: 280px;
    background: var(--rs-surface); border: 1px solid var(--rs-line);
    border-radius: var(--rs-radius-md); box-shadow: var(--rs-shadow-pop);
    padding: 12px 14px;
}

/* Loading / skeleton for the map region */
.rs-map-loading { display: grid; place-items: center; color: var(--rs-text-muted); font-size: var(--rs-fs-sm); }
.rs-skeleton { position: relative; overflow: hidden; background: var(--rs-line-soft); border-radius: var(--rs-radius-md); }
.rs-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: rs-shimmer 1.4s infinite; }
@keyframes rs-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .rs-skeleton::after { animation: none; } }