/* Watermelon Maps — Palestinian solidarity palette
   rind #1e8a3c · flesh #e02434 · flag green #007a3d · black #111 · off-white #f6f3ea */
:root{
  --rind:#1e8a3c; --flesh:#e02434; --green:#007a3d; --black:#141414; --cream:#f6f3ea;
  --ink:#0d1f12; --panel:rgba(13,26,16,.92); --line:rgba(246,243,234,.14);
  --villages:#e02434; --settlements:#f4b400; --checkpoints:#8a8f98;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'IBM Plex Mono',monospace;background:var(--ink);color:var(--cream);overflow:hidden;-webkit-tap-highlight-color:transparent}
#map{position:absolute;inset:0}
.hidden{display:none!important}
a{color:#7fe0a0}

/* ── Top bar ── */
#topbar{position:fixed;top:0;left:0;right:0;height:56px;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 16px;
  background:linear-gradient(180deg,rgba(13,26,16,.95),rgba(13,26,16,0));pointer-events:none}
#brand{display:flex;align-items:center;gap:10px;pointer-events:auto}
#melon{display:flex;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
#wordmark{display:flex;flex-direction:column;line-height:1}
#wordmark strong{font-family:'Syne',sans-serif;font-weight:800;font-size:16px;letter-spacing:.06em}
#wordmark span{font-size:9px;letter-spacing:.42em;text-transform:uppercase;color:#8fbf9c;margin-top:2px}
#about-btn{pointer-events:auto;background:rgba(246,243,234,.08);border:1px solid var(--line);color:var(--cream);
  font-family:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border-radius:8px;cursor:pointer;transition:.15s}
#about-btn:hover{background:var(--flesh);border-color:var(--flesh)}

/* ── Legend / layer toggles ── */
#legend{position:fixed;left:14px;bottom:14px;z-index:20;width:236px;background:var(--panel);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.legend-head{font-family:'Syne',sans-serif;font-weight:800;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#8fbf9c;margin:2px 4px 10px}
.layer-toggle{width:100%;display:flex;align-items:center;gap:11px;background:transparent;border:none;color:var(--cream);
  font-family:inherit;text-align:left;padding:8px 6px;border-radius:9px;cursor:pointer;transition:.15s;opacity:.45}
.layer-toggle:hover{background:rgba(246,243,234,.05)}
.layer-toggle.active{opacity:1}
.swatch{width:14px;height:14px;border-radius:50%;flex-shrink:0;border:2px solid rgba(0,0,0,.35);box-shadow:0 0 0 1px rgba(246,243,234,.2)}
.sw-villages{background:var(--villages)}
.sw-settlements{background:var(--settlements)}
.sw-checkpoints{background:var(--checkpoints)}
.sw-barrier{background:#141414;box-shadow:0 0 0 2px rgba(224,36,52,.55)}
.layer-toggle:not(.active) .swatch{background:transparent;box-shadow:inset 0 0 0 2px rgba(246,243,234,.3);border-color:transparent}
.lt-label{display:flex;flex-direction:column;font-size:12px;line-height:1.25}
.lt-label small{font-size:9px;letter-spacing:.06em;color:#8fbf9c;text-transform:uppercase;margin-top:2px}
.legend-foot{font-size:9px;line-height:1.4;color:#6f8f78;padding:9px 5px 2px;margin-top:6px;border-top:1px solid var(--line)}

/* ── Markers ── */
.wm-marker{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.9);cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;font-size:11px;transition:transform .12s}
.wm-marker:hover{transform:scale(1.25)}
.wm-villages{background:var(--villages)}
.wm-settlements{background:var(--settlements)}
.wm-checkpoints{background:var(--checkpoints)}

/* ── Popups ── */
.maplibregl-popup-content{background:#12241a;color:var(--cream);border:1px solid var(--line);border-radius:12px;
  font-family:'IBM Plex Mono',monospace;padding:14px 16px;box-shadow:0 12px 34px rgba(0,0,0,.55);max-width:270px}
.maplibregl-popup-tip{border-top-color:#12241a!important;border-bottom-color:#12241a!important}
.maplibregl-popup-close-button{color:#8fbf9c;font-size:18px;padding:2px 7px}
.pop-name{font-family:'Syne',sans-serif;font-weight:800;font-size:15px;letter-spacing:.02em;margin-bottom:1px}
.pop-ar{font-size:15px;color:#7fe0a0;margin-bottom:7px;direction:rtl;text-align:left}
.pop-meta{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#8fbf9c;margin-bottom:7px}
.pop-note{font-size:11.5px;line-height:1.5;color:#dfe7e0}
.pop-badge{display:inline-block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:5px;margin-bottom:7px}
.pop-badge.illegal{background:rgba(244,180,0,.16);color:#f4b400;border:1px solid rgba(244,180,0,.4)}
.pop-src{font-size:9px;color:#6f8f78;margin-top:8px;border-top:1px solid var(--line);padding-top:6px}

/* ── About overlay ── */
#about-overlay{position:fixed;inset:0;z-index:40;background:rgba(6,14,9,.72);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:20px}
#about-card{position:relative;max-width:520px;width:100%;max-height:88vh;overflow-y:auto;background:#0f2115;
  border:1px solid var(--line);border-radius:18px;padding:32px 30px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
#about-close{position:absolute;top:14px;right:16px;background:transparent;border:none;color:#8fbf9c;font-size:18px;cursor:pointer}
.about-melon{font-size:38px;margin-bottom:8px}
#about-card h1{font-family:'Syne',sans-serif;font-weight:800;font-size:26px;letter-spacing:.01em;
  background:linear-gradient(90deg,var(--rind),var(--cream) 45%,var(--flesh));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:6px}
.lede{font-size:13px;color:#a9d0b5;margin-bottom:16px}
#about-card p{font-size:12.5px;line-height:1.65;color:#dfe7e0;margin-bottom:13px}
#about-card ul{margin:0 0 14px;padding-left:18px}
#about-card li{font-size:12.5px;line-height:1.6;color:#dfe7e0;margin-bottom:5px}
.about-data{background:rgba(246,243,234,.04);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:11.5px!important}
.about-foot{color:#8fbf9c;font-size:11px!important;border-top:1px solid var(--line);padding-top:13px}

@media(max-width:560px){
  #legend{width:calc(100vw - 28px);max-width:236px}
}