/* Map Page Specific Styles */
/* Mobile-first: base = narrowest layout; min-width queries scale up. */
.map-toolbar{position:sticky;top:var(--nav-h-mobile);z-index:800;background:rgba(11,17,32,0.93);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:10px 16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.toolbar-group{display:flex;align-items:center;gap:10px}
.toolbar-group label{font-size:0.7rem;font-weight:700;color:var(--g500);text-transform:uppercase;letter-spacing:0.08em}
.toolbar-group label i{color:var(--gold);margin-right:4px}
.toolbar-select{padding:8px 32px 8px 12px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--g300);font-size:0.84rem;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='%237A8599'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;transition:var(--tr)}
.toolbar-select:focus{outline:none;border-color:var(--gold)}
.toolbar-btn{padding:6px 12px;border:1px solid var(--g700);border-radius:6px;background:transparent;color:var(--g300);font-size:0.78rem;font-weight:600;cursor:pointer;transition:var(--tr)}
.toolbar-btn:hover{border-color:var(--gold);color:var(--gold)}
.toolbar-count{margin-left:auto;font-size:0.84rem;color:var(--g500)}
.toolbar-count span{color:var(--gold);font-weight:800}
.map-view{height:50vh;min-height:360px}
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px}
.data-table{width:100%;border-collapse:collapse;font-size:0.84rem;line-height:1.5}
.data-table th{padding:10px 8px;text-align:left;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--g500);border-bottom:1px solid var(--border)}
.data-table td{padding:10px 8px;border-bottom:1px solid var(--border);color:var(--g300)}
.data-table tr:hover td{background:rgba(180,154,90,0.02)}
@media(min-width:600px){
    .map-toolbar{padding:10px 20px;gap:10px}
    .toolbar-btn{padding:8px 16px;font-size:0.82rem}
    .table-wrap{padding:24px}
    .data-table th,.data-table td{padding:12px 14px}
}
@media(min-width:768px){.map-toolbar{top:var(--nav-h);padding:12px 32px;gap:24px}.map-view{height:55vh}}
@media(min-width:1024px){.map-toolbar{padding:14px 48px}.map-view{height:65vh;min-height:500px}}

/* ===== Data Explorer tabs (explore.html) ===== */
/* Sticky bar holds a centered segmented (pill) control. The active segment is a
   filled gold pill so the switch reads as a clear state change, not a subtle
   underline. */
.explore-tabs{display:flex;justify-content:center;padding:14px 16px;border-bottom:1px solid var(--border);background:rgba(11,17,32,0.93);backdrop-filter:blur(20px);position:sticky;top:var(--nav-h-mobile);z-index:801}
.explore-tabs-inner{display:flex;gap:4px;padding:5px;border:1px solid var(--g700);border-radius:999px;background:var(--surface);width:100%;max-width:480px}
.explore-tab{flex:1;justify-content:center;min-width:0;padding:10px 14px;background:transparent;border:none;border-radius:999px;color:var(--g500);font-size:0.82rem;font-weight:700;letter-spacing:0.01em;cursor:pointer;transition:var(--tr);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.explore-tab span{overflow:hidden;text-overflow:ellipsis}
.explore-tab i{transition:var(--tr)}
.explore-tab:hover:not(.active){color:var(--g100);background:var(--gold-dim)}
.explore-tab.active{background:linear-gradient(135deg,var(--gold-bright),var(--gold));color:var(--base);box-shadow:0 4px 14px rgba(180,154,90,0.35)}
.explore-tab.active i{color:var(--base)}

/* Panels fade + slide in on activation so switching feels deliberate. (CSS
   can't transition display:none→block, so this runs as a one-shot animation
   each time a panel gains .active.) */
.explore-panel{display:none}
.explore-panel.active{display:block;animation:explorePanelIn 0.4s cubic-bezier(0.25,0.1,0.25,1)}
@keyframes explorePanelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.explore-panel.active{animation:none}}

/* Tabs already provide a sticky context; keep the map toolbar in flow so the
   two bars don't stack and overlap. */
#panel-map .map-toolbar{position:static;top:auto}
@media(min-width:768px){.explore-tabs{top:var(--nav-h)}.explore-tab{padding:11px 26px;font-size:0.9rem}}