/* =========================================================================
   WebGIS TNGHS — Blok Gunung Bunder II
   Tema: "Catatan Survei Topografi" — kontur peta sungguhan sebagai motif,
   panel putih susu, aksen tinta kontur & sungai. Dirancang khusus untuk
   subjek ini, bukan palet template (bukan krem+terracotta generik).
   ========================================================================= */

:root{
  /* surfaces */
  --milk:#faf7f0;            /* panel utama — putih susu */
  --paper:#ffffff;            /* kartu, popup — lapisan di atas milk */
  --sand-50:#faf7f0;          /* alias kompatibilitas: panel putih susu */
  --sand-100:#f2eee2;
  --sand-200:#e7e1cf;

  /* dark surfaces (topbar / app frame) */
  --forest-950:#101c17;
  --forest-900:#152820;
  --forest-800:#22392e;
  --forest-700:#2f4c3d;

  /* signature accent — coklat kontur, diambil dari warna garis kontur
     pada layer topografi asli (bukan terracotta generik) */
  --terracotta-600:#93613a;
  --terracotta-500:#a97847;
  --terracotta-100:#ecdfca;

  /* aksen sekunder — biru sungai, dari layer Sungai */
  --river-600:#3c6c82;
  --river-500:#5187a0;
  --river-100:#dde8ec;

  /* aksen tersier — hijau tapak/vegetasi (dipakai hemat) */
  --moss-500:#4c8064;
  --moss-400:#699f80;
  --moss-100:#e1ebe3;

  --amber-500:#bb9142;

  --ink-900:#1a221c;
  --ink-600:#4c574e;
  --ink-400:#7d8880;
  --line:#e5decb;

  --shadow-soft:0 8px 24px -8px rgba(16,28,23,0.22);
  --shadow-pop:0 18px 45px -12px rgba(16,28,23,0.35);
  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:8px;

  --font-display:'Newsreader','Iowan Old Style',Georgia,serif;
  --font-body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
}

*,*::before,*::after{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; margin:0; padding:0; overflow-x:hidden; }
body{
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--forest-950);
  overflow:hidden;
}

/* ---------- App shell ---------- */
#app{
  position:relative;
  width:100vw;
  height:100vh;
  display:flex;
  flex-direction:column;
}

/* ---------- Top bar ---------- */
#topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:1500;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  background:
    repeating-radial-gradient(circle at 88% -40%, rgba(255,255,255,0.05) 0 1px, transparent 1px 16px),
    linear-gradient(90deg, var(--forest-950), var(--forest-800) 65%, var(--forest-700));
  border-bottom:3px solid var(--terracotta-600);
  color:var(--milk);
  flex:0 0 auto;
  height:60px;
  min-width:0;
}
#hamburger{
  display:none;
  width:38px;height:38px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.06);
  color:var(--sand-50);
  align-items:center;justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
  font-size:16px;
}
#brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 auto;
  min-width:0;
}
#brand .mark{
  width:36px;height:36px;
  border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.5) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 32% 28%, var(--moss-400), var(--forest-800) 72%);
  display:flex;align-items:center;justify-content:center;
  color:var(--milk);
  font-size:16px;
  border:1px solid rgba(255,255,255,0.25);
  flex:0 0 auto;
}

#brand .mark img{
  height:38px;
  width:auto;
  object-fit:contain;
  display:block;
}
#brand .text{ min-width:0; }
#brand .text h1{
  font-family:var(--font-display);
  font-size:15.5px;
  font-weight:600;
  line-height:1.2;
  margin:0;
  letter-spacing:.1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#brand .text p{
  margin:1px 0 0;
  font-size:10px;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:var(--amber-500);
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#topbar-search{
  flex:1 1 auto;
  max-width:420px;
  margin-left:8px;
  position:relative;
}
#topbar-search input{
  width:100%;
  padding:9px 14px 9px 36px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.1);
  color:var(--sand-50);
  font-size:13px;
  font-family:var(--font-body);
  outline:none;
  transition:background .15s, border-color .15s;
}
#topbar-search input::placeholder{ color:rgba(248,245,236,0.6); }
#topbar-search input:focus{ background:rgba(255,255,255,0.18); border-color:var(--amber-500); }
#topbar-search i.icon-search{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  color:rgba(248,245,236,0.65); font-size:12.5px; pointer-events:none;
}
#search-results{
  position:absolute;
  top:calc(100% + 8px);
  left:0; right:0;
  background:var(--paper);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-pop);
  max-height:360px;
  overflow-y:auto;
  display:none;
  z-index:1400;
  border:1px solid var(--line);
}
#search-results.show{ display:block; }
.sr-item{
  display:flex; gap:10px; align-items:center;
  padding:9px 12px;
  cursor:pointer;
  border-bottom:1px solid var(--sand-100);
}
.sr-item:last-child{ border-bottom:none; }
.sr-item:hover{ background:var(--sand-100); }
.sr-thumb{
  width:36px;height:36px;border-radius:8px;background-size:cover;background-position:center;
  flex:0 0 auto; background-color:var(--sand-200);
  border:1px solid var(--line);
}
.sr-meta{ min-width:0; }
.sr-meta .n{ font-size:12.5px; font-weight:600; color:var(--ink-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sr-meta .t{ font-size:10.5px; color:var(--ink-400); text-transform:uppercase; letter-spacing:.5px;}
#search-empty{ padding:14px 12px; font-size:12.5px; color:var(--ink-400); }

#topbar-actions{ display:flex; gap:8px; margin-left:auto; flex:0 0 auto; }
#fab-search-mobile{ display:none; }
.tbtn{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.07);
  color:var(--sand-50);
  cursor:pointer;
  font-size:14px;
  transition:background .15s;
}
.tbtn:hover{ background:rgba(255,255,255,0.18); }
.tbtn.active{ background:var(--moss-500); border-color:var(--moss-500); }

/* ---------- Body: sidebar + map ---------- */
#body-wrap{ flex:1 1 auto; display:flex; min-height:0; position:relative; padding-top:60px; }

#sidebar{
  width:388px;
  flex:0 0 auto;
  background:var(--sand-50);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  min-height:0;
  z-index:900;
}

#sidebar-tabs{
  display:flex;
  border-bottom:1px solid var(--line);
  background:var(--paper);
  flex:0 0 auto;
  position:sticky;
  top:0;
  z-index:1301;
}
.stab{
  flex:1 1 0;
  padding:11px 4px 10px;
  text-align:center;
  font-size:11px;
  font-weight:600;
  letter-spacing:.3px;
  color:var(--ink-400);
  cursor:pointer;
  border-bottom:3px solid transparent;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.stab i{ font-size:14px; }
.stab.active{ color:var(--forest-800); border-bottom-color:var(--terracotta-600); }
.stab .count{
  display:inline-block; margin-left:3px; font-family:var(--font-mono);
}

#sidebar-panels{ flex:1 1 auto; overflow-y:auto; min-height:0; }
.panel{ display:none; padding:16px 16px 26px; }
.panel.active{ display:block; }

.panel-title{
  font-family:var(--font-display);
  font-size:15px;
  color:var(--forest-800);
  margin:2px 0 3px;
  font-weight:600;
}
.panel-sub{ font-size:11.5px; color:var(--ink-400); margin:0 0 14px; line-height:1.5; }

/* Layer groups */
.layer-group{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  margin-bottom:12px;
  overflow:hidden;
}
.layer-group-head{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  cursor:pointer;
  background:linear-gradient(180deg, var(--sand-100), var(--paper));
  border-bottom:1px solid var(--line);
}
.layer-group-head i.chev{ margin-left:auto; font-size:10px; color:var(--ink-400); transition:transform .15s;}
.layer-group.collapsed .chev{ transform:rotate(-90deg); }
.layer-group.collapsed .layer-group-body{ display:none; }
.layer-group-head .gicon{
  width:22px;height:22px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  color:#fff; font-size:11px; flex:0 0 auto;
}
.layer-group-head span.gt{ font-size:12.5px; font-weight:700; color:var(--ink-900); }
.layer-group-body{ padding:6px 12px 10px; }

.layer-row{
  display:flex; align-items:center; gap:9px;
  padding:6px 0;
  font-size:12.5px;
  color:var(--ink-900);
}
.layer-row .swatch{
  width:16px;height:16px;border-radius:4px; flex:0 0 auto;
  border:1px solid rgba(0,0,0,0.15);
}
.layer-row .swatch.line{ border-radius:2px; height:4px; align-self:center; border:none; }
.layer-row .layer-name{ flex:1 1 auto; cursor:default; }
.layer-row small{ color:var(--ink-400); font-family:var(--font-mono); font-size:10.5px; }
.switch{
  position:relative; width:34px; height:19px; flex:0 0 auto; cursor:pointer;
}
.switch input{
  display:block;
  opacity:0; position:absolute; inset:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:2;
}
.switch .track{
  position:absolute; inset:0; background:#c9c2ac; border-radius:999px; transition:.15s; z-index:1; pointer-events:none;
}
.switch .track::before{
  content:''; position:absolute; width:15px;height:15px; left:2px; top:2px;
  background:#fff; border-radius:50%; transition:.15s; box-shadow:0 1px 2px rgba(0,0,0,0.3);
}
.switch input:checked + .track{ background:var(--moss-500); }
.switch input:checked + .track::before{ transform:translateX(15px); }

/* Cards (Wisata / Penginapan) */
.searchbox-mini{
  position:relative; margin-bottom:12px;
}
.searchbox-mini input{
  width:100%; padding:8px 12px 8px 32px; border-radius:999px;
  border:1px solid var(--line); background:var(--paper); font-size:12.5px; outline:none;
}
.searchbox-mini input:focus{ border-color:var(--moss-500); }
.searchbox-mini i{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--ink-400); font-size:11px;}

.poi-card{
  display:flex; gap:10px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:9px;
  margin-bottom:9px;
  cursor:pointer;
  transition:box-shadow .15s, transform .15s, border-color .15s;
}
.poi-card:hover{ box-shadow:var(--shadow-soft); transform:translateY(-1px); border-color:var(--moss-500); }
.poi-thumb{
  width:66px;height:66px; border-radius:10px; flex:0 0 auto;
  background-size:cover; background-position:center; background-color:var(--sand-200);
  position:relative;
}
.poi-thumb .badge-no{
  position:absolute; top:-6px; left:-6px;
  background:var(--terracotta-600); color:#fff; font-family:var(--font-mono);
  font-size:9.5px; font-weight:700; width:18px;height:18px; border-radius:50%;
  display:flex;align-items:center;justify-content:center; border:2px solid var(--paper);
}
.poi-body{ min-width:0; flex:1 1 auto; }
.poi-body h4{
  margin:0 0 3px; font-size:12.8px; font-weight:700; color:var(--forest-800);
  line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.poi-tags{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.tag{
  font-size:9.5px; font-weight:600; padding:2px 7px; border-radius:999px;
  background:var(--moss-100); color:var(--forest-800); font-family:var(--font-mono);
  white-space:nowrap;
}
.tag.alt{ background:var(--terracotta-100); color:var(--terracotta-600); }
.poi-desc{ font-size:11px; color:var(--ink-400); margin-top:3px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

#no-results{ display:none; text-align:center; padding:26px 10px; color:var(--ink-400); font-size:12px; }

/* Info panel */
.info-block{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:13px 14px; margin-bottom:12px;
}
.info-block h5{
  margin:0 0 8px; font-size:11.5px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--terracotta-600); font-weight:700;
}
.info-block p{ margin:0 0 8px; font-size:12.3px; line-height:1.6; color:var(--ink-900); }
.info-block p:last-child{ margin-bottom:0; }

.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.stat-card{
  background:linear-gradient(160deg, var(--forest-800), var(--forest-900));
  color:var(--sand-50); border-radius:var(--radius-sm); padding:10px 12px;
}
.stat-card .v{ font-family:var(--font-mono); font-size:19px; font-weight:700; color:var(--amber-500); }
.stat-card .l{ font-size:9.8px; text-transform:uppercase; letter-spacing:.5px; color:rgba(248,245,236,0.75); margin-top:2px;}

.legend-row{ display:flex; align-items:center; gap:8px; font-size:11.8px; padding:3px 0; }
.legend-swatch{ width:14px;height:14px;border-radius:4px; flex:0 0 auto; border:1px solid rgba(0,0,0,0.15); }
.legend-swatch.ln{ height:3px; border-radius:2px; border:none; }

.credit{ font-size:10.5px; color:var(--ink-400); text-align:center; margin-top:6px; line-height:1.6; }

/* ---------- Map area ---------- */
#map-wrap{ flex:1 1 auto; position:relative; min-width:0; }
#map{ position:absolute; inset:0; background:#dfe7df; }

.leaflet-control-attribution{ font-size:9.5px !important; }

/* Leaflet controls: add transitions so they can animate when hidden */
.leaflet-control-zoom,
.leaflet-control-scale{
  transition:opacity .18s ease, transform .18s ease;
  will-change:opacity, transform;
}

/* basemap floating switcher */
#basemap-switch{
  position:fixed; right:14px; top:74px; z-index:1400;
  background:var(--paper); border-radius:var(--radius-md); box-shadow:var(--shadow-soft);
  display:flex; overflow:hidden; border:1px solid var(--line);
  transition:opacity .18s ease, transform .18s ease;
  will-change:opacity, transform;
}
#basemap-switch button{
  border:none; background:transparent; padding:8px 12px; font-size:11px; font-weight:600;
  color:var(--ink-600); cursor:pointer; font-family:var(--font-body);
  border-right:1px solid var(--line);
}
#basemap-switch button:last-child{ border-right:none; }
#basemap-switch button.active{ background:var(--forest-800); color:#fff; }

/* hide map controls when sidebar is open to avoid overlap (use animation) */
#sidebar.open ~ #map-wrap #basemap-switch,
#sidebar.open ~ #map-wrap #map-legend,
#sidebar.open ~ #map-wrap #map-fabs,
#sidebar.open ~ #map-wrap .leaflet-control-zoom,
#sidebar.open ~ #map-wrap .leaflet-control-scale{
  opacity:0 !important; transform:translateY(6px) !important; pointer-events:none !important;
}

/* floating map legend (zonasi) */
#map-legend{
  position:absolute; left:70px; bottom:28px; z-index:800;
  background:rgba(255,253,248,0.96); border:1px solid var(--line);
  border-radius:var(--radius-md); box-shadow:var(--shadow-soft);
  padding:10px 12px; max-width:220px; font-size:11.3px;
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
#map-legend.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
#map-legend.collapsed .legend-body{ display:none; }
#map-legend .legend-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; cursor:pointer;
}
#map-legend .legend-header h6{
  margin:0; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--forest-800); font-weight:700;
}
#map-legend .legend-toggle{
  border:none; background:transparent; color:var(--forest-800);
  font-size:10px; font-weight:700; cursor:pointer; padding:4px 6px;
}
#map-legend .legend-body{ margin-top:10px; max-height:260px; overflow:auto; }
#map-legend .legend-section{ margin-bottom:10px; }
#map-legend .legend-section-title{
  display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700;
  color:var(--ink-900); margin-bottom:6px;
}
#map-legend .legend-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:10.5px; }
#map-legend .legend-row:last-child{ margin-bottom:0; }
#map-legend .legend-swatch{ width:12px; height:12px; border-radius:4px; flex:0 0 auto; border:1px solid rgba(0,0,0,0.15); }
#map-legend .legend-swatch.ln{ height:4px; width:18px; border-radius:2px; border:none; }

@media (max-width: 860px){
  #map-legend{ left:auto; right:10px; bottom:10px; max-width:180px; padding:10px; }
  #map-legend .legend-body{ max-height:200px; }
}

/* map floating action buttons (locate/fullscreen) */
#map-fabs{
  position:absolute; right:14px; bottom:28px; z-index:800;
  display:flex; flex-direction:column; gap:8px;
}
.fab{
  width:38px;height:38px; border-radius:50%; background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--shadow-soft); display:flex;align-items:center;justify-content:center;
  cursor:pointer; color:var(--forest-800); font-size:14px;
}
.fab:hover{ background:var(--sand-100); }

/* transition for fabs to match legend & basemap-switch */
#map-fabs{ transition:opacity .18s ease, transform .18s ease; will-change:opacity, transform; }

/* Leaflet popup restyle */
.leaflet-popup-content-wrapper{
  border-radius:14px; padding:0; overflow:hidden; box-shadow:var(--shadow-pop);
  font-family:var(--font-body);
}
.leaflet-popup-content{ margin:0; width:290px !important; }
.leaflet-popup-tip{ background:var(--paper); }
.pop-photo{
  width:100%; height:150px; background-size:cover; background-position:center; background-color:var(--sand-200);
  position:relative;
}
.pop-photo .pop-cat{
  position:absolute; top:9px; left:9px; background:rgba(15,36,25,0.78); color:#fff;
  font-size:9.5px; letter-spacing:.5px; text-transform:uppercase; font-weight:700;
  padding:3px 9px; border-radius:999px; font-family:var(--font-mono);
}
.pop-body{ padding:12px 14px 14px; }
.pop-body h3{
  font-family:var(--font-display); font-size:15px; color:var(--forest-800); margin:0 0 6px; line-height:1.25;
}
.pop-row{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.pop-chip{
  font-size:10.3px; font-weight:700; padding:3px 8px; border-radius:999px;
  background:var(--moss-100); color:var(--forest-800); font-family:var(--font-mono);
}
.pop-chip.tc{ background:var(--terracotta-100); color:var(--terracotta-600); }
.pop-chip.am{ background:#fbeecb; color:#8a6412; }
.pop-desc{ font-size:11.8px; line-height:1.55; color:var(--ink-600); margin:0 0 8px;}
.pop-table{ width:100%; border-collapse:collapse; font-size:11.3px; }
.pop-table td{ padding:3px 0; vertical-align:top; }
.pop-table td.k{ color:var(--ink-400); width:38%; }
.pop-table td.v{ color:var(--ink-900); font-weight:600; }
.pop-foot{ font-size:10px; color:var(--ink-400); margin-top:6px; border-top:1px dashed var(--line); padding-top:6px;}

/* custom marker icons */
.poi-marker{
  width:38px;height:38px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  border:2.5px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,0.35);
  background-size:cover; background-position:center; background-color:var(--sand-200);
}
.poi-marker-icon{
  width:34px;height:34px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  border:2.5px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,0.35);
  display:flex; align-items:center; justify-content:center;
}
.poi-marker-icon i{ transform:rotate(45deg); color:#fff; font-size:14px; }
.trail-marker{
  width:22px;height:22px;border-radius:50%; background:var(--terracotta-600); color:#fff;
  border:2.5px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center; font-family:var(--font-mono);
  font-size:10px; font-weight:700;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* mobile scrim (shared) */
#sidebar-scrim{ display:none; position:absolute; inset:0; background:rgba(16,28,23,0.45); z-index:850; }

/* ---- Tablet / small laptop ---- */
@media (max-width: 1024px){
  #sidebar{ width:330px; }
  #topbar-search{ max-width:300px; }
}

/* ---- Phones & narrow tablets: mobile drawer below the green header ---- */
@media (max-width: 860px){
  #hamburger{ display:flex; }
  #topbar-search{
    display:none;
    position:fixed; left:10px; right:10px; top:66px; z-index:1300;
    max-width:none; margin:0;
  }
  #body-wrap{ padding-top:66px; }
  #topbar-search.mobile-open{ display:block; }
  #topbar-search.mobile-open input{ background:var(--paper); color:var(--ink-900); box-shadow:var(--shadow-pop); }
  #topbar-search.mobile-open input::placeholder{ color:var(--ink-400); }
  #topbar-search.mobile-open i.icon-search{ color:var(--ink-400); }
  #fab-search-mobile{ display:flex; }

  #sidebar{
    position:fixed; left:0; top:55px; right:0; bottom:0; width:100%; max-width:none;
    transform:translateX(-105%); transition:transform .22s ease; box-shadow:var(--shadow-pop);
    z-index:1100; border-right:1px solid var(--line);
  }
  #sidebar.open{ transform:translateX(0); z-index:1200; }
  #sidebar-scrim.show{ display:block; }

  #basemap-switch{ position:fixed; top:74px; right:10px; z-index:1400; }
  #map-legend{ left:56px; right:auto; max-width:150px; padding:8px 10px; font-size:10.3px; }
}

/* ---- Phones ---- */
@media (max-width: 640px){
  #topbar{ height:auto; padding:8px 12px; gap:8px; align-items:flex-start; }
  #brand .mark{ width:32px; height:32px; font-size:14px; }
  /* allow title to wrap to two lines and subtitle to wrap below it */
  #brand .text h1{ font-size:13.5px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.05; }
  #brand .text p{
    display:block;
    font-size:10px;
    white-space:normal;
    overflow:hidden;
    text-overflow:ellipsis;
    color:var(--amber-500);
    font-weight:600;
    line-height:1.05;
    margin-top:2px;
  }
  #topbar-search{ top:60px; }
  #body-wrap{ padding-top:56px; }
  #map-legend{ left:54px; max-width:140px; }
  #map-legend .legend-header{ gap:6px; }
  #map-legend .legend-toggle{ padding:3px 5px; font-size:9.5px; }
  #map-legend .legend-body{ max-height:180px; }
  #map-legend .legend-section-title{ font-size:10px; }
  #map-legend .legend-row{ font-size:9.8px; gap:6px; }
  .tbtn{ width:34px; height:34px; }

  .stab{ padding:9px 2px 8px; font-size:9.8px; gap:3px; }
  .stab i{ font-size:13px; }
  .panel{ padding:14px 12px 22px; }

  .leaflet-popup-content{ width:min(82vw, 280px) !important; }
  .pop-photo{ height:130px; }

  #map-fabs{ right:10px; bottom:18px; gap:6px; }
  .fab{ width:36px; height:36px; font-size:13px; }
  #basemap-switch button{ padding:7px 9px; font-size:10.3px; }
}

/* ---- Small phones ---- */
@media (max-width: 380px){
  .leaflet-popup-content{ width:80vw !important; max-width:250px !important; }
  .poi-thumb{ width:56px; height:56px; }
  #brand .text h1{ font-size:12.5px; }
  .stat-grid{ gap:6px; }
  .stat-card{ padding:8px 9px; }
  .stat-card .v{ font-size:16px; }
}

/* ---- Landscape phones (short viewport height) ---- */
@media (max-width: 900px) and (max-height: 420px){
  #topbar{ height:48px; }
  #topbar-search{ top:52px; }
  .pop-photo{ height:100px; }
}

/* scrollbars */
#sidebar-panels::-webkit-scrollbar, #search-results::-webkit-scrollbar{ width:7px; }
#sidebar-panels::-webkit-scrollbar-thumb, #search-results::-webkit-scrollbar-thumb{ background:#cfc6a8; border-radius:10px; }

.leaflet-bar a{ color:var(--forest-800) !important; }