/* Popular-area controls share the mobile map search capsule and light surfaces. */
#explore-panel .filter-options{display:block;width:min(100%,440px);margin:0 0 24px;padding:0;border:0;border-radius:0;background:transparent;animation:area-filter-reveal .12s ease-out}
#filter-options .filter-field{position:relative;display:grid;gap:8px;min-width:0}
#filter-options .filter-field>label{padding-left:18px;font-size:12px;font-weight:500;line-height:1.5;color:var(--muted)}
.filter-field.filter-select{position:relative;min-width:0}
.filter-select .filter-select-control{position:relative;min-width:0}
.filter-select .filter-select-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:48px;margin:0;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font:400 14px/1.5 var(--font);text-align:left;text-decoration:none;cursor:pointer;box-shadow:0 3px 14px #17231e05}
.filter-select .filter-select-toggle>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filter-select .filter-select-toggle>svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .12s}
.filter-select .filter-select-toggle:hover{border-color:var(--muted)}
.filter-select .filter-select-toggle[aria-expanded=true],.filter-select .filter-select-toggle:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px #14745d18;outline:0}
.filter-select .filter-select-toggle[aria-expanded=true]>svg{transform:rotate(180deg)}
.filter-select .filter-select-options{position:absolute;z-index:750;top:calc(100% + 8px);left:0;right:0;max-height:320px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:6px;border:1px solid var(--line);border-radius:20px;background:var(--bg);box-shadow:0 6px 20px #17231e0b;animation:area-filter-reveal .12s ease-out}
.filter-select .filter-select-options>button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;margin:0;padding:10px 12px;border:0;border-radius:14px;background:transparent;color:var(--ink);font:400 14px/1.5 var(--font);text-align:left;text-decoration:none;cursor:pointer}
.filter-select .filter-select-options>button svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;visibility:hidden}
.filter-select .filter-select-options>button:hover{background:var(--surface)}
.filter-select .filter-select-options>button[aria-selected=true]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.filter-select .filter-select-options>button[aria-selected=true] svg{visibility:visible}
.filter-select .filter-select-options>button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;background:var(--elevated)}
#filter-options .filter-select-toggle{padding-right:56px}
#filter-options #close-filters{position:absolute;z-index:2;top:28px;right:2px;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
#filter-options #close-filters>span{display:flex}
#filter-options #close-filters svg{width:18px;height:18px}
#filter-options #close-filters:hover{background:var(--accent-soft);color:var(--accent)}
#filter-options #close-filters:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
body[data-page=list] .catalog-filters .filter-field.filter-select{flex-basis:220px}
@keyframes area-filter-reveal{from{opacity:0}to{opacity:1}}
@media(max-width:640px){
 #explore-panel .filter-options{width:100%;margin-bottom:20px}
 .filter-select .filter-select-toggle{font-size:16px}
 .filter-select .filter-select-options{position:relative;top:auto;bottom:auto;left:auto;right:auto;margin-top:8px}
 .filter-select .filter-select-options>button{font-size:15px}
 body[data-page=list] .catalog-filters .filter-field.filter-select{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){.filter-select .filter-select-options,#explore-panel .filter-options{animation:none}.filter-select .filter-select-toggle>svg{transition:none}}

/* INDEX opens the area list directly beneath its filter icon. */
#explore-panel .collection-actions{position:relative}
#explore-panel .collection-actions .filter-options{position:absolute;z-index:1050;top:calc(100% + 8px);right:0;width:min(360px,calc(100vw - 56px));margin:0;padding:12px 6px 6px;border:1px solid var(--line);border-radius:20px;background:var(--bg);box-shadow:0 6px 20px #17231e0b}
#filter-options .filter-field{gap:8px}
#filter-options .filter-field>label{padding:0 44px 0 12px;line-height:28px}
#filter-options .filter-select-toggle{display:none}
#filter-options .filter-select-control .filter-select-options{position:relative;inset:auto;margin:0;border:0;border-radius:14px;box-shadow:none;padding:0;max-height:min(320px,45dvh)}
#filter-options #close-filters{top:-8px;right:0}
/* Shared capsule geometry for search, both pickers and reset. */
body[data-page=list] .catalog-filters .filter-field label{padding-left:18px;font-size:12px;font-weight:500;line-height:1.5;color:var(--muted)}
body[data-page=list] .catalog-filters .filter-field input,
body[data-page=list] .catalog-filters .filter-field select,
body[data-page=list] .catalog-filters .filter-select-toggle,
body[data-page=list] .catalog-filters .filter-reset{height:48px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font:400 14px/1.5 var(--font);padding:0 18px;box-shadow:0 3px 14px #17231e05}
body[data-page=list] .catalog-filters .filter-reset{flex:0 0 auto;cursor:pointer}
body[data-page=list] .catalog-filters .filter-reset:hover{background:var(--surface);border-color:var(--muted)}
body[data-page=list] .catalog-filters .filter-field input:focus-visible,
body[data-page=list] .catalog-filters .filter-select-toggle:focus-visible,
body[data-page=list] .catalog-filters .filter-select-toggle[aria-expanded=true]{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px #14745d18}
@media(max-width:640px){
 body[data-page=list] .catalog-filters{align-items:stretch}
 body[data-page=list] .catalog-filters .filter-field{flex:1 1 100%}
 body[data-page=list] .catalog-filters .filter-field input,
 body[data-page=list] .catalog-filters .filter-field select,
 body[data-page=list] .catalog-filters .filter-select-toggle,
 body[data-page=list] .catalog-filters .filter-reset{font-size:16px}
 body[data-page=list] .catalog-filters .filter-reset{flex:1 1 100%;height:48px}
}