* { box-sizing: border-box; }
html,body,#app { height:100%; margin:0; font-family: system-ui, sans-serif; }
#app { display:flex; }
#panel { width:320px; min-width:280px; border-right:1px solid #ddd; display:flex; flex-direction:column; }
#panel header { padding:10px; border-bottom:1px solid #eee; }
#panel h1 { font-size:16px; margin:0 0 8px; }
#panel h1 .ver { font-size:11px; font-weight:normal; color:#999; }
#search { width:100%; padding:6px 8px; }
#list { overflow:auto; flex:1; }
#map { flex:1; }
#attribution { position:fixed; bottom:0; right:0; background:rgba(255,255,255,.8); font-size:11px; padding:2px 6px; }
.route-item { padding:6px 10px; cursor:pointer; border-bottom:1px solid #f2f2f2; }
.route-item:hover { background:#f7f7f7; }
.route-item.selected { font-weight:bold; }
.route-check { margin-right:6px; vertical-align:middle; cursor:pointer; }
.route-swatch { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:middle; }
#basemap{position:absolute;top:10px;right:10px;z-index:1;}
#legend{position:absolute;left:330px;top:10px;background:rgba(255,255,255,.9);padding:8px;font-size:12px;z-index:1;border-radius:4px;}
@media (max-width:640px){ #app{flex-direction:column;} #panel{width:auto;height:45%;} }
.section-hdr { padding:6px 10px; background:#eef; font-size:12px; font-weight:bold; color:#446; position:sticky; top:0; }
#detail { font-size:12px; border-top:1px solid #eee; color:#333; max-height:40%; overflow:auto; }
#detail:empty { display:none; }
.hover-popup .maplibregl-popup-content { pointer-events:none; font-size:12px; padding:6px 9px; }
.hover-popup { pointer-events:none; }
.hover-popup .ids { color:#888; font-size:11px; }
.fac-item { padding:5px 10px; cursor:pointer; font-size:13px; border-bottom:1px solid #f0f0f0; }
.fac-item:hover { background:#f2f7ff; }
#layertoggle { position:absolute; top:44px; right:10px; z-index:1; }
#layertoggle button { padding:4px 8px; font-size:12px; background:#fff; border:1px solid #bbb; border-radius:4px; cursor:pointer; }
#layertoggle button.on { background:#8e44ad; color:#fff; border-color:#8e44ad; }
.detail-row { padding:8px 28px 8px 10px; border-bottom:1px solid #f2f2f2; position:relative; cursor:pointer; }
.detail-row:hover { background:#f7f7f7; }
.detail-row.current { background:#eef4ff; }
.detail-row:last-child { border-bottom:none; }
.detail-remove { position:absolute; top:6px; right:8px; border:none; background:none; color:#999; cursor:pointer; font-size:12px; padding:2px 4px; }
.detail-remove:hover { color:#333; }
.detail-hdr { position:sticky; top:0; background:#fff; padding:4px 10px; border-bottom:1px solid #f2f2f2; text-align:right; }
.detail-zoom-all { border:1px solid #bbb; background:#fff; border-radius:4px; font-size:11px; padding:2px 8px; cursor:pointer; }
.detail-zoom-all:hover { background:#f0f0f0; }
#detail kbd { border:1px solid #ccc; border-radius:3px; padding:0 3px; font-size:10px; background:#f7f7f7; }
#legend .keys { color:#666; font-size:11px; }
#vp-only-label { display:block; margin-top:6px; font-size:12px; color:#333; cursor:pointer; }
#facets { margin-top:4px; }
#facets details { border-top:1px solid #f2f2f2; }
#facets summary { font-size:12px; padding:4px 2px; cursor:pointer; color:#446; }
#filters > summary { font-size:12px; font-weight:bold; padding:4px 2px; cursor:pointer; color:#446; }
#filters > summary .summary-text { display:inline-block; max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; }
.facet-opts { padding:0 2px 6px; display:flex; flex-wrap:wrap; gap:0 10px; }
.facet-opt { font-size:12px; padding:1px 2px; cursor:pointer; white-space:nowrap; }
.facet-opt .opt-count { color:#999; font-size:11px; }
.facet-opt.zero { color:#bbb; }
.facet-opt.zero .opt-count { color:#ccc; }