:root{
  --bg:#ffffff;          /* Bengawalk white */
  --panel:#ffffff;
  --ink:#1a1a18;
  --muted:#8c8c88;
  --line:#e9e9e6;
  --accent:#02a650;      /* Bengawalk green */
  --shadow:0 1px 2px rgba(20,20,18,.06);
  --font-serif:"IBM Plex Serif",Georgia,serif;
  --font-sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font-sans);color:var(--ink);background:var(--bg)}
#app{display:flex;height:100vh;overflow:hidden}

/* Sidebar */
#sidebar{width:340px;min-width:340px;height:100%;overflow-y:auto;
  background:var(--panel);border-right:1px solid var(--line)}
#brand{padding:20px 20px 14px;border-bottom:1px solid var(--line)}
#brand h1{font-family:var(--font-serif);font-size:32px;font-weight:600;letter-spacing:-.5px;margin:0;color:var(--ink)}
.tagline{margin:3px 0 0;font-size:12px;color:var(--muted);letter-spacing:.2px}

.panel{padding:16px 20px;border-bottom:1px solid var(--line)}
.panel h2{font-family:var(--font-serif);font-size:16px;margin:0 0 10px;font-weight:600}
.panel h3{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:12px 0 6px}
.muted{color:var(--muted);font-size:12px;line-height:1.5}
.fine{font-size:11px;opacity:.85}
code{background:#f2f2ef;padding:1px 5px;border-radius:4px;font-size:11.5px;font-family:"IBM Plex Mono",ui-monospace,monospace}

/* Related-tools links */
.links{list-style:none;margin:0;padding:0}
.links li{padding:5px 0;border-bottom:1px solid var(--line)}
.links li:last-child{border-bottom:none}
.links a{color:var(--ink);text-decoration:none;font-size:13px;font-weight:500}
.links a:hover{color:var(--accent)}
a{color:var(--accent)}

.viewbtns{display:flex;gap:6px;margin-bottom:8px}
.viewbtn{flex:1;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fff;
  font-size:13px;cursor:pointer;font-weight:600;color:var(--muted);transition:all .12s}
.viewbtn:hover{border-color:var(--muted)}
.viewbtn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

#search,#place-search{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;
  background:#fff;font-size:14px}
#place-search:focus{outline:none;border-color:var(--accent)}
#search:focus{outline:none;border-color:var(--accent)}

.toggle{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:4px 0;cursor:pointer}
.toggle input{accent-color:var(--accent)}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;padding:4px 10px;border-radius:20px;border:1px solid var(--line);
  background:#fff;cursor:pointer;user-select:none;display:flex;align-items:center;gap:6px;
  transition:all .12s}
.chip .dot{width:9px;height:9px;border-radius:50%}
.chip.off{opacity:.4;text-decoration:line-through}
.chip:hover{border-color:var(--muted)}

.legend{display:flex;flex-direction:column;gap:4px;font-size:12px}
.legend .row{display:flex;align-items:center;gap:8px}
.legend .swatch{width:18px;height:12px;border-radius:2px;border:1px solid rgba(0,0,0,.1)}

.count{font-size:12px;color:var(--muted);font-weight:400}
#project-list{list-style:none;margin:0;padding:0}
#project-list li{padding:9px 10px;border-radius:8px;cursor:pointer;border:1px solid transparent}
#project-list li:hover{background:#f0e8d8}
#project-list li.hidden{display:none}
#project-list .pname{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:7px}
#project-list .pmeta{font-size:11.5px;color:var(--muted);margin-top:2px}
.pdot{width:10px;height:10px;border-radius:50%;flex:none}

/* Map */
#map{flex:1;height:100%;background:#dce6ea}
.leaflet-container{font-family:var(--font-sans)}

/* Popups */
.leaflet-popup-content-wrapper{border-radius:10px}
.pop h3{margin:0 0 4px;font-family:var(--font-serif);font-size:15px}
.pop .tags{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.pop .tag{font-size:10.5px;padding:2px 7px;border-radius:12px;color:#fff}
.pop .tag.status{background:#333}
.pop p{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:#333}
.pop .stats{font-size:11.5px;color:var(--muted);margin-top:6px}
.pop a{color:var(--accent);font-size:12px}

.river-label{background:transparent;border:none;box-shadow:none;color:#1f6f8b;
  font-size:11px;font-style:italic;font-weight:600;text-shadow:0 0 3px #fff,0 0 3px #fff}

/* Metro station labels — hidden until zoomed in (body.metro-zoom) */
.stn-label{background:rgba(255,255,255,.82);border:none;box-shadow:none;padding:0 3px;
  border-radius:3px;color:#20180f;font-size:10.5px;font-weight:600;
  text-shadow:0 0 2px #fff;display:none}
.stn-label::before{display:none}
body.metro-zoom .stn-label{display:block}
.rail-icon{background:none;border:none;font-size:12px;line-height:16px;text-align:center}

/* Live-train cars */
.train-ico{background:none;border:none}
.trainrot{width:22px;height:10px;transition:transform .18s linear}
.trainrot svg{display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
.sim{font-size:9px;text-transform:uppercase;letter-spacing:.4px;color:#fff;
  background:var(--accent);border-radius:3px;padding:1px 4px;vertical-align:middle;margin-left:2px}
#train-status{margin:3px 0 0 26px;color:var(--muted)}

/* District info box */
#info-box{position:absolute;bottom:22px;right:22px;width:250px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:16px 18px;z-index:1000}
#info-box .close{position:absolute;top:8px;right:10px;border:none;background:none;font-size:20px;
  line-height:1;cursor:pointer;color:var(--muted)}
#info-box h3{font-family:var(--font-serif);margin:0 0 10px;font-size:17px}
#info-box .row{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0}
#info-box .row span{color:var(--muted)}
#info-box .bar{height:8px;background:#e6ddca;border-radius:5px;overflow:hidden;margin:8px 0 4px}
#info-box .bar span{display:block;height:100%;background:var(--accent)}
#info-box .pct{font-size:11px;color:var(--muted)}

.hidden{display:none}
/* Mobile menu button + backdrop — hidden on desktop */
#menu-btn,#backdrop{display:none}

@media (max-width:760px){
  #app{display:block}
  /* Map fills the screen */
  #map{position:fixed;inset:0;width:100%;height:100%}
  /* Sidebar becomes a slide-in drawer */
  #sidebar{position:fixed;top:0;left:0;bottom:0;height:100%;width:86%;max-width:360px;min-width:0;
    z-index:1200;transform:translateX(-100%);transition:transform .25s ease;
    box-shadow:2px 0 20px rgba(0,0,0,.2);
    -webkit-overflow-scrolling:touch}
  body.drawer-open #sidebar{transform:translateX(0)}
  /* Floating hamburger / close button (stays above the drawer) */
  #menu-btn{display:flex;position:fixed;top:10px;left:10px;z-index:1300;
    width:44px;height:44px;align-items:center;justify-content:center;
    background:var(--panel);border:1px solid var(--line);border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.15);font-size:20px;line-height:1;cursor:pointer;color:var(--ink)}
  /* Dim backdrop behind the open drawer */
  #backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1150;
    opacity:0;pointer-events:none;transition:opacity .25s}
  body.drawer-open #backdrop{opacity:1;pointer-events:auto}
  /* Bigger touch targets + keep zoom control clear of the menu button */
  .toggle{padding:9px 0;font-size:14px}
  .viewbtn{padding:11px}
  #search,#place-search{padding:11px;font-size:16px}   /* 16px avoids iOS zoom-on-focus */
  .leaflet-top.leaflet-left{margin-top:56px}
  #info-box{left:10px;right:10px;bottom:10px;width:auto}
  #brand{padding-left:64px}   /* clear the ✕ close button */
}