#mcs-explorer{
--mcs-ink:#17202A;
--mcs-body:#171212;
--mcs-line:#E2E5E8;
--mcs-soft:#F5F5F5;
--mcs-white:#FFFFFF;
--mcs-accent:#88CB00;
--mcs-accent-soft:rgba(136,203,0,.16);
font-family:"Sarabun",system-ui,sans-serif;
color:var(--mcs-body);
max-width:1280px;
margin:0 auto;
padding:0 10px;
-webkit-font-smoothing:antialiased;
}
#mcs-explorer *{box-sizing:border-box;}#mcs-explorer .mcs-shell{
display:grid;
grid-template-columns:400px 1fr;
background:var(--mcs-white);
border:1px solid var(--mcs-line);
border-radius:12px;
overflow:hidden;
box-shadow:none;
}

#mcs-explorer .mcs-panel{
display:flex;flex-direction:column;min-width:0;
border-right:1px solid var(--mcs-line);
background:var(--mcs-white);
height:520px;
}

#mcs-explorer .mcs-rail{padding:18px 18px 14px;border-bottom:1px solid var(--mcs-line);background:var(--mcs-soft);}
#mcs-explorer .mcs-county{
display:flex;align-items:center;gap:11px;width:100%;
padding:10px 12px;margin:0 0 6px;
border:1px solid var(--mcs-line);border-radius:8px;
background:var(--mcs-white);cursor:pointer;
font-family:"Manrope","Sarabun",sans-serif;font-size:14px;font-weight:700;line-height:1.2;
color:var(--mcs-ink);text-align:left;
transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
#mcs-explorer .mcs-county:last-child{margin-bottom:0;}
#mcs-explorer .mcs-county:hover{border-color:var(--mcs-ink);}
#mcs-explorer .mcs-county:focus-visible{outline:2px solid var(--mcs-ink);outline-offset:2px;}
#mcs-explorer .mcs-county .mcs-dot{
width:9px;height:9px;border-radius:50%;flex:0 0 9px;background:var(--c);
transition:transform .16s ease;
}
#mcs-explorer .mcs-county .mcs-cname{flex:1;}
#mcs-explorer .mcs-county .mcs-cnum{
font-size:12px;font-weight:600;color:#5A6472;
background:var(--mcs-white);border:1px solid var(--mcs-line);
padding:2px 8px;border-radius:20px;
}
#mcs-explorer .mcs-county[aria-selected="true"]{
background:#88CB00;
border-color:#88CB00;
color:#17202A;
}
#mcs-explorer .mcs-county[aria-selected="true"] .mcs-dot{background:#17202A;}
#mcs-explorer .mcs-county[aria-selected="true"] .mcs-cnum{background:rgba(23,32,42,.10);border-color:transparent;color:#17202A;}

#mcs-explorer .mcs-listhead{
display:flex;align-items:baseline;justify-content:space-between;
padding:18px 22px 10px;
}
#mcs-explorer .mcs-listlabel{
font-size:12px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:#5A6472;
}
#mcs-explorer .mcs-listcount{font-size:13px;color:#5A6472;}

#mcs-explorer .mcs-cities{--c:var(--mcs-accent);
list-style:none;margin:0;padding:0 12px 14px;
flex:1;overflow-y:auto;min-height:0;
scrollbar-width:thin;
}
#mcs-explorer .mcs-cities::-webkit-scrollbar{width:8px;}
#mcs-explorer .mcs-cities::-webkit-scrollbar-thumb{background:#CFD4DA;border-radius:8px;}
#mcs-explorer .mcs-cities li{margin:0 0 2px;}
#mcs-explorer .mcs-city{
display:flex;align-items:center;gap:10px;width:100%;
padding:9px 10px;border-radius:6px;
font-size:15px;line-height:1.3;color:var(--mcs-ink);
text-decoration:none;background:transparent;
border:0;font-family:inherit;text-align:left;
transition:background .15s ease,padding-left .15s ease;
}
#mcs-explorer button.mcs-city{cursor:pointer;appearance:none;-webkit-appearance:none;}
#mcs-explorer .mcs-city .mcs-pip{display:inline-flex;flex:0 0 13px;color:var(--c,#5A6472);opacity:.85;}
#mcs-explorer .mcs-city .mcs-pip svg{display:block;}
#mcs-explorer .mcs-city .mcs-nm{flex:1;}
#mcs-explorer button.mcs-city:hover{background:var(--mcs-accent-soft);padding-left:16px;}
#mcs-explorer button.mcs-city:focus-visible{outline:2px solid var(--mcs-accent);outline-offset:-2px;}
#mcs-explorer .mcs-city.is-selected{background:var(--mcs-accent-soft);font-weight:600;}
#mcs-explorer .mcs-city.is-selected .mcs-pip{opacity:1;}
#mcs-explorer .mcs-city.is-hot{background:var(--mcs-accent-soft);}

#mcs-explorer .mcs-mapwrap{display:flex;flex-direction:column;min-width:0;height:520px;background:var(--mcs-soft);}
#mcs-explorer .mcs-maptop{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:20px 24px;border-bottom:1px solid var(--mcs-line);background:var(--mcs-white);
}
#mcs-explorer .mcs-maptitle{font-family:"Manrope","Sarabun",sans-serif;font-size:17px;font-weight:700;color:var(--mcs-ink);}
#mcs-explorer .mcs-mapcount{
display:inline-flex;align-items:center;gap:7px;
font-size:13px;font-weight:600;color:var(--mcs-accent);
border:1px solid var(--mcs-line);border-radius:20px;padding:5px 12px;background:var(--mcs-white);
}
#mcs-explorer .mcs-mapcount::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mcs-accent);}
#mcs-explorer #mcs-map{flex:1;min-height:0;background:#E9ECEF;}

#mcs-explorer .mcs-pin{display:block;filter:drop-shadow(0 2px 3px rgba(23,32,42,.28));transition:transform .18s ease;}
#mcs-explorer .leaflet-marker-icon:hover .mcs-pin{transform:translateY(-2px) scale(1.06);}
#mcs-explorer .leaflet-container{font-family:"Sarabun",system-ui,sans-serif;}
#mcs-explorer .leaflet-popup-content-wrapper{
border-radius:11px;box-shadow:0 10px 26px rgba(23,32,42,.18);padding:0;border:1px solid var(--mcs-line);
}
#mcs-explorer .leaflet-popup-content{margin:0;padding:14px 16px;min-width:160px;}
#mcs-explorer .leaflet-popup-tip{box-shadow:none;}
#mcs-explorer .mcs-pop-city{display:block;font-size:15.5px;font-weight:700;color:var(--mcs-ink);}
#mcs-explorer .mcs-pop-link{
display:inline-block;margin-top:8px;font-size:14px;font-weight:600;
color:var(--mcs-accent);text-decoration:none;
}
#mcs-explorer .mcs-pop-link:hover{text-decoration:underline;}

#mcs-explorer .mcs-note{font-size:13px;color:#5A6472;margin:14px 0 0;}

@media (max-width:1024px){
#mcs-explorer .mcs-shell{grid-template-columns:1fr;}
#mcs-explorer .mcs-panel{border-right:0;border-bottom:1px solid var(--mcs-line);height:auto;}
#mcs-explorer .mcs-mapwrap{height:auto;}
#mcs-explorer .mcs-cities{--c:var(--mcs-accent);max-height:284px;flex:none;}
#mcs-explorer #mcs-map{height:360px;flex:none;}
#mcs-explorer .mcs-rail{display:flex;gap:8px;min-width:0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:14px;scrollbar-width:none;}
#mcs-explorer .mcs-rail::-webkit-scrollbar{display:none;}
#mcs-explorer .mcs-county{margin:0;width:auto;flex:0 0 auto;white-space:nowrap;background:var(--mcs-white);border-color:var(--mcs-line);}
#mcs-explorer .mcs-county[aria-selected="true"]{box-shadow:none;background:var(--c);border-color:var(--c);color:#fff;}
#mcs-explorer .mcs-county[aria-selected="true"] .mcs-dot{background:#fff;}
#mcs-explorer .mcs-county[aria-selected="true"] .mcs-cnum{background:rgba(255,255,255,.16);border-color:transparent;color:#fff;}}

@media (max-width:767px){
#mcs-explorer{padding:0 10px;}#mcs-explorer .mcs-shell{border-radius:12px;}
#mcs-explorer .mcs-cities{--c:var(--mcs-accent);max-height:246px;flex:none;padding:0 8px 12px;}
#mcs-explorer .mcs-city{padding:12px 10px;font-size:15px;}
#mcs-explorer .mcs-maptop{padding:15px 16px;}
#mcs-explorer .mcs-maptitle{font-size:15.5px;}
#mcs-explorer #mcs-map{height:360px;flex:none;}
#mcs-explorer .mcs-listhead{padding:15px 16px 8px;}
}

/* Policy 02: highlighted current city inside a City Hub */
#mcs-explorer .mcs-city.is-current{background:var(--mcs-accent-soft);font-weight:600;}
#mcs-explorer .mcs-city.is-current .mcs-pip{opacity:1;}

/* wired city rows link straight to their City Hub */
.mcs-explorer a.mcs-city{text-decoration:none;}
.mcs-explorer .mcs-city .mcs-arrow{margin-left:auto;padding-left:10px;color:var(--mcs-accent,#88CB00);font-weight:700;opacity:0;transform:translateX(-4px);transition:opacity .18s ease,transform .18s ease;}
.mcs-explorer a.mcs-city:hover .mcs-arrow,.mcs-explorer a.mcs-city:focus-visible .mcs-arrow,.mcs-explorer a.mcs-city.is-hot .mcs-arrow{opacity:1;transform:translateX(0);}
.mcs-explorer a.mcs-city.is-current .mcs-arrow{opacity:1;transform:translateX(0);}


/* Policy 04 S44: all five counties must be visible without horizontal scrolling.
   The rail is a single-line scroller on desktop; on mobile it wraps instead, so
   every county tab is fully readable and reachable by tap. Buttons size to their
   own content rather than the full row so two fit per line at 375px. */
@media (max-width:767px){
#mcs-explorer .mcs-rail{flex-wrap:wrap;overflow-x:visible;row-gap:8px;padding:12px;}
#mcs-explorer .mcs-rail .mcs-county{width:auto;flex:0 1 auto;margin:0;padding:9px 11px;font-size:13px;gap:8px;}
#mcs-explorer .mcs-rail .mcs-county .mcs-cname{flex:0 1 auto;}
#mcs-explorer .mcs-rail .mcs-county .mcs-cnum{font-size:11px;padding:2px 7px;}
}