#rm-explore { display: flex; flex-direction: column; height: calc(100vh - 81px); }

#rm-stats-row {
    display: flex;
    gap: var(--rm-space-3);
    padding: var(--rm-space-3) var(--rm-space-6);
    background: var(--rm-parchment-deep);
    flex-wrap: wrap;
    position: relative;
    z-index: 9;
}

.rm-stat-pill {
    display: flex;
    align-items: baseline;
    gap: 7px;
    background: var(--rm-white);
    border-radius: var(--rm-radius-full);
    padding: 7px 17px;
    box-shadow: var(--rm-shadow-sm);
}
.rm-stat-count {
    font-family: var(--rm-font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--rm-forest);
}
.rm-stat-label {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--rm-fog);
}

.rm-explore-toolbar {
    display: flex;
    align-items: center;
    gap: var(--rm-space-4);
    padding: var(--rm-space-4) var(--rm-space-6);
    background: var(--rm-white);
    box-shadow: var(--rm-shadow-sm);
    flex-wrap: wrap;
    position: relative;
    /* Needs to clear Leaflet's internal controls (typically z-index:1000)
       since #rm-map's container doesn't establish its own stacking context -
       10 was trapping the POI/Layers dropdown menus underneath the map. */
    z-index: 1100;
}

.rm-search-box {
    display: flex;
    align-items: center;
    gap: var(--rm-space-2);
    background: var(--rm-parchment);
    border: 1.5px solid transparent;
    border-radius: var(--rm-radius-full);
    padding: 10px 18px;
    min-width: 280px;
    color: var(--rm-fog);
    transition: border-color var(--rm-transition), box-shadow var(--rm-transition);
}
.rm-search-box:focus-within {
    border-color: var(--rm-moss);
    box-shadow: 0 0 0 4px rgba(61,107,79,0.1);
    background: var(--rm-white);
}
.rm-search-box input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.92rem;
    color: var(--rm-forest);
    width: 100%;
}

.rm-filter-pills { display: flex; gap: var(--rm-space-2); flex-wrap: wrap; }
.rm-pill {
    font-size: 0.84rem;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: var(--rm-radius-full);
    border: 1.5px solid var(--rm-fog-light);
    background: var(--rm-white);
    color: var(--rm-fog);
    cursor: pointer;
    transition: all var(--rm-transition);
    white-space: nowrap;
}
.rm-pill:hover { border-color: var(--rm-moss-bright); color: var(--rm-moss-dark); transform: translateY(-1px); }
.rm-pill--active { background: var(--rm-moss); border-color: var(--rm-moss); color: var(--rm-white); box-shadow: var(--rm-shadow-sm); }
.rm-pill--active:hover { transform: none; }

.rm-explore-body { flex: 1; display: flex; overflow: hidden; }

#rm-map { flex: 1; height: 100%; }

.rm-list-panel {
    width: 420px;
    flex-shrink: 0;
    background: var(--rm-parchment);
    box-shadow: -4px 0 20px rgba(20,32,25,0.06);
    display: flex;
    flex-direction: column;
}

.rm-list-header {
    padding: var(--rm-space-4) var(--rm-space-5);
    background: var(--rm-white);
    box-shadow: var(--rm-shadow-sm);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rm-fog);
}

.rm-list { flex: 1; overflow-y: auto; padding: var(--rm-space-4); }

.rm-spot-card {
    display: block;
    background: var(--rm-white);
    border-radius: var(--rm-radius-md);
    border-left: 5px solid var(--rm-moss);
    padding: var(--rm-space-4) var(--rm-space-5);
    margin-bottom: var(--rm-space-3);
    text-decoration: none !important;
    color: var(--rm-forest);
    box-shadow: var(--rm-shadow-md);
    transition: box-shadow var(--rm-transition), transform var(--rm-transition);
}
.rm-spot-card:hover { box-shadow: var(--rm-shadow-lg); transform: translateY(-2px); }

.rm-spot-card-top { display: flex; gap: var(--rm-space-2); margin-bottom: var(--rm-space-3); flex-wrap: wrap; }
.rm-spot-card h3 { font-size: 1.1rem; margin-bottom: var(--rm-space-2); font-weight: 650; }
.rm-spot-card-desc { font-size: 0.86rem; color: var(--rm-fog); margin-bottom: var(--rm-space-3); line-height: 1.6; }
.rm-spot-card-coords { font-size: 0.74rem; color: var(--rm-fog); }

.rm-empty { text-align: center; padding: var(--rm-space-8) var(--rm-space-4); color: var(--rm-fog); }
.rm-empty-sub { font-size: 0.88rem; }

@media (max-width: 900px) {
    .rm-explore-body { flex-direction: column; }
    #rm-map { height: 45vh; }
    .rm-list-panel { width: 100%; box-shadow: none; border-top: 1px solid var(--rm-fog-light); }
}

/* Scale control: sit beside (not below) the zoom control, top-aligned.
   Pulled out of the normal top-left control stack (which is a flex column)
   via absolute positioning so it sits to the right of the zoom buttons
   instead of underneath them. */
.leaflet-top.leaflet-left {
    position: relative;
}
.leaflet-control-scale {
    position: absolute !important;
    top: 16px !important;
    left: 56px !important;
    margin: 0 !important;
}