*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text)}

/* Dark (default) */
:root{--bg:#161618;--surface:#1c1c1f;--chrome:#1e1e21;--border:#2c2c30;--text:#d0d0d4;--text-dim:#aaa;--text-faint:#777;--heading:#fff;--bold:#e0e0e4;--accent:#6ea8fe;--highlight:#e8c44a;--popup-bg:#222225;--popup-text:#ddd;--popup-bold:#fff;--legend-text:#bbb;--legend-bold:#fff}

/* Light */
.light{--bg:#f2f3f5;--surface:#fff;--chrome:#fff;--border:#ddd;--text:#333;--text-dim:#555;--text-faint:#888;--heading:#111;--bold:#111;--accent:#1a6dd4;--highlight:#b8860b;--popup-bg:#fff;--popup-text:#333;--popup-bold:#111;--legend-text:#555;--legend-bold:#111}

a{color:var(--accent)}

/* Theme toggle — shared */
.theme-toggle{background:none;border:1px solid var(--border);border-radius:50%;width:28px;height:28px;cursor:pointer;font-size:.9rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:border-color .2s;color:var(--text)}
.theme-toggle:hover{border-color:var(--accent)}

/* ==========  Map page layout  ========== */
.site{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:380px 1fr;height:100vh}
header{grid-column:1/-1;background:var(--chrome);padding:14px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px}
header h1{font-size:1.4rem;color:var(--heading);white-space:nowrap}
#search-wrap{position:relative;margin-left:auto}
#search-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--border);border-radius:50%;width:34px;height:34px;cursor:pointer;font-size:1rem;line-height:1;align-items:center;justify-content:center;transition:border-color .2s;color:var(--text)}
#search-toggle:hover{border-color:var(--accent)}
#search{width:260px;padding:7px 32px 7px 12px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);font-size:.85rem;outline:none;transition:border-color .2s}
#search:focus{border-color:var(--accent)}
#search::placeholder{color:var(--text-faint)}
#search-results{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--popup-bg);border:1px solid var(--border);border-radius:8px;max-height:320px;overflow-y:auto;z-index:1000;display:none;box-shadow:0 4px 16px rgba(0,0,0,.3)}
#search-results.open{display:block}
.sr-item{padding:8px 12px;cursor:pointer;font-size:.84rem;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border)}
.sr-item:last-child{border-bottom:none}
.sr-item:hover,.sr-item.active{background:var(--accent);color:#fff}
.sr-item .sr-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.sr-item .sr-type{font-size:.75rem;opacity:.6;margin-left:auto;white-space:nowrap}
#panel{background:var(--surface);padding:32px 28px;overflow-y:auto;display:flex;flex-direction:column;gap:24px}
#panel h1{font-size:1.3rem;color:var(--heading);line-height:1.3}
#panel p{font-size:.88rem;line-height:1.7;color:var(--text-dim)}
#panel p b{color:var(--bold)}
#panel .highlight{color:var(--highlight);font-weight:600}
#panel .caveat{font-size:.82rem;color:var(--text-faint);line-height:1.6}
#panel .caveat a{color:var(--text-faint);text-decoration:underline;text-decoration-color:var(--border)}
#panel .caveat a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.legend{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.legend-item{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--legend-text)}
.legend-item i{width:14px;height:14px;border-radius:3px;flex-shrink:0}
.legend-item b{color:var(--legend-bold);min-width:28px}
.legend-item.clickable{cursor:pointer;border-radius:4px;padding:2px 4px;margin:-2px -4px;transition:background .15s}
.legend-item.clickable:hover{background:color-mix(in srgb, var(--accent) 15%, transparent)}
.legend-popup{position:fixed;background:var(--popup-bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.35);max-height:60vh;width:340px;overflow:hidden;z-index:2000;display:none}
.legend-popup.open{display:flex;flex-direction:column}
.legend-popup-header{padding:12px 16px;border-bottom:1px solid var(--border);font-size:.85rem;font-weight:600;color:var(--heading);display:flex;align-items:center;gap:8px}
.legend-popup-header i{width:12px;height:12px;border-radius:3px;flex-shrink:0}
.legend-popup-list{overflow-y:auto;flex:1}
.legend-popup-list .lp-item{padding:6px 16px;font-size:.82rem;color:var(--text-dim);border-bottom:1px solid var(--border);cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .12s}
.legend-popup-list .lp-item:last-child{border-bottom:none}
.legend-popup-list .lp-item:hover{background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--text)}
.legend-popup-list .lp-type{font-size:.72rem;opacity:.5;margin-left:auto;white-space:nowrap}
.meta{margin-top:auto;font-size:.75rem;color:var(--text-faint);line-height:1.6}
.meta a{color:var(--accent);text-decoration:none}
#map{min-height:0}
footer{grid-column:1/-1;background:var(--chrome);border-top:1px solid var(--border);padding:14px 20px;font-size:.75rem;color:var(--text-faint);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 16px;position:relative}
footer a{color:var(--text-faint);text-decoration:none}
footer a:hover{text-decoration:underline}
footer .theme-toggle{position:absolute;right:20px;top:50%;transform:translateY(-50%)}
.leaflet-popup-content-wrapper{background:var(--popup-bg);color:var(--popup-text);border-radius:8px;box-shadow:0 3px 14px rgba(0,0,0,.25)}
.leaflet-popup-tip{background:var(--popup-bg)}
.leaflet-popup-content{font:13px/1.6 sans-serif}
.leaflet-popup-content b{color:var(--popup-bold)}
.leaflet-popup-content .note{display:block;margin-top:4px;font-size:.78rem;color:var(--text-faint);font-style:italic}

/* Tablet: narrower panel */
@media(max-width:1024px){
  .site{grid-template-columns:320px 1fr}
  #panel{padding:24px 22px;gap:20px}
  #panel h1{font-size:1.15rem}
  #panel p{font-size:.84rem}
}

/* Mobile: stacked, map first then panel */
@media(max-width:768px){
  html,body{overflow:auto}
  .site{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;height:auto;min-height:100vh}
  header{grid-column:1;order:1;padding:10px 14px;gap:10px}
  header h1{font-size:.95rem}
  #search-toggle{display:flex}
  #search-wrap{display:none;position:absolute;top:100%;left:0;right:0;padding:8px 14px;background:var(--chrome);border-bottom:1px solid var(--border)}
  #search-wrap.open{display:block}
  #search{width:100%}
  #map{order:2;min-height:max(55vh, 350px)}
  #panel{order:3;padding:24px 20px;gap:16px;overflow:visible}
  footer{order:4;grid-column:1;justify-content:center;text-align:center;padding-right:20px}
  footer .theme-toggle{position:static;transform:none;margin-left:8px}
  .meta{margin-top:16px}
}

/* Small phones */
@media(max-width:400px){
  #panel{padding:20px 16px;gap:14px}
  #panel h1{font-size:1.05rem}
  #panel p{font-size:.82rem;line-height:1.6}
  .legend-item{font-size:.8rem}
  footer{font-size:.7rem;padding:8px 12px}
}

/* ==========  About page (om.html)  ========== */
.doc{max-width:640px;margin:40px auto;padding:0 20px;color:var(--text);line-height:1.7;position:relative}
.doc h1{font-size:1.4rem;margin-bottom:24px;color:var(--heading)}
.doc h2{font-size:1.05rem;margin-top:28px;margin-bottom:8px;color:var(--heading)}
.doc p{color:var(--text-dim)}
.doc p b{color:var(--bold)}
.doc ul{padding-left:20px;color:var(--text-dim)}
.doc li{margin-bottom:6px}
.doc .back{margin-top:32px;display:inline-block}
.doc .page-toggle{position:absolute;top:0;right:20px}
@media(max-width:680px){
  .doc{margin:24px auto}
  .doc .page-toggle{top:24px;right:20px}
}