/* fill the viewport and remove default body gap */
html, body { height: 100%; margin: 0; }

/* two-pane layout: sidebar + map */
#container { display: flex; min-height: 100vh; }

/* sidebar can scroll */
#sidebar { width: 320px; max-width: 90vw; overflow: auto; }

/* map pane fills the rest and anchors children */
#main { position: relative; flex: 1; }

/* map stretches to the edges of #main */
#map { position: absolute; inset: 0; }

/* profile sheet overlays the map (optional, but tidy) */
#profileChartArea { position: absolute; left: 0; right: 0; bottom: 0; }

/* ---------- Base / Typography ---------- */
:root{
  --accent:#0d6efd;
  --accent-dark:#094bac;
  --bg-lt:#f8f9fb;
  --border-clr:#d0d7de;
  --text-muted:#6c757d;
  --radius:6px;
  --shadow-sm:0 2px 4px rgba(0,0,0,.05);
  --sheetH:40dvh; /* default mobile sheet height */
}
html,body{
  height:100%;
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:#222;
  background:#fff;
  font-size:15px;
  line-height:1.45;
}
button{
  display:inline-block;
  padding:6px 12px;
  margin:3px 2px;
  font:600 .85rem/1 Arial,Helvetica,sans-serif;
  color:#fff;
  background:var(--accent);
  border:0;
  border-radius:4px;
  cursor:pointer;
  transition:background .15s ease;
}
button:not([disabled]):hover{background:var(--accent-dark);}
button[disabled]{opacity:.4;cursor:not-allowed;}

/* ---------- Layout containers ---------- */
#container{ position:relative; height:100dvh; min-height:100dvh; }
#main{ position:relative; height:100%; }
#map{ position:absolute; inset:0; min-height:320px; }   /* <- absolute, always fills */

/* Desktop split only when open */
#main.profiler-open{ display:grid; grid-template-rows:55% 45%; }
#main.profiler-open #map{ position:relative; inset:auto; height:auto; }

/* ---------- Floating hamburger ---------- */
.menu-fab{
  position:fixed; top:10px; left:10px; z-index:1001;
  width:40px; height:40px; border:0; border-radius:8px;
  background:#fff; box-shadow:0 4px 10px rgba(0,0,0,.25);
  font:700 20px/40px system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#333; cursor:pointer;
}

/* ---------- Sidebar (floating overlay) ---------- */
#sidebar{
  position:fixed; top:10px; left:56px; width:280px;
  max-height:calc(100dvh - 20px);
  background:rgba(255,255,255,.95);
  border-radius:6px; box-shadow:0 4px 10px rgba(0,0,0,.2);
  z-index:999; overflow-y:auto; -webkit-overflow-scrolling:touch;
  border:1px solid #e5e8ee;
  transform:translateX(0);
  transition:transform .28s ease, opacity .2s ease, box-shadow .2s ease;
}
body.menu-closed #sidebar{
  transform:translateX(-360px); opacity:0; box-shadow:none; pointer-events:none;
}

/* ---------- Panels / Accordion ---------- */
.field-title{font-size:1.1em;font-weight:700;padding:10px 12px;margin:0;background:#fafafa;border-bottom:1px solid #ccc;}
.accordion-item{background:#fff;}
.accordion-header{
  padding:10px 12px; cursor:pointer; user-select:none; background:#fff;
  border-top:1px solid #eee; border-bottom:1px solid #ddd;
  font-weight:600; display:flex; justify-content:space-between; align-items:center;
  transition:background .2s ease;
}
.accordion-header:hover{background:#f1f4f9;}
.accordion-header.active{background:#e9f3ff;}
.accordion-content{display:none; padding:8px 12px;}
.accordion-content.active{display:block;}
.layer-group-header{font-size:.95em;font-weight:600;margin:8px 0 4px;color:#333;border-bottom:1px solid #ddd;}
.layer-item.disabled label{color:#999;}
.field-link.active{background:#e9f3ff;font-weight:600;}

/* GPS dot */
.gps-blip{width:22px;height:22px;margin-left:-11px;margin-top:-11px;border:3px solid #fff;border-radius:50%;background:#ff2055;box-shadow:0 0 6px 2px rgba(0,0,0,.45);}

/* DEM legend */
.dem-legend{
  background:rgba(255,255,255,.9);border:1px solid #bbb;border-radius:4px;padding:6px 8px;
  font:12px/1.2 Arial,Helvetica,sans-serif;color:#111;box-shadow:0 2px 4px rgba(0,0,0,.1);pointer-events:none;
}
.dem-legend .swatch{width:18px;height:10px;border:1px solid #999;margin-right:6px;display:inline-block;}
.exp-note{font-size:.8em;margin:6px 0 12px;color:#555;line-height:1.25;}

/* ---------- Leaflet tweaks ---------- */
.leaflet-control-container .leaflet-top.leaflet-left{ top:auto; bottom:20px; }
.leaflet-popup.elev-label .leaflet-popup-content-wrapper{
  background:rgba(255,255,255,.8)!important;padding:2px 4px!important;border-radius:4px;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.leaflet-popup.elev-label .leaflet-popup-content{margin:0;font-size:12px;font-weight:700;line-height:1;white-space:nowrap;}
.leaflet-popup.elev-label .leaflet-popup-tip{display:none;}
.leaflet-popup-pane{z-index:650!important;}

/* Attribution styling */
.leaflet-control-attribution {
  background: rgba(255,255,255,0.8);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 11px;
}
.leaflet-control-attribution img {
  height:16px; vertical-align:middle;
}
body.profiler-open .leaflet-control-attribution {
  font-size: 10px;
  opacity: .6;
  margin-bottom: calc(var(--sheetH) + 10px);
}

/* Keep controls/legend above mobile safe area */
.leaflet-control-container .leaflet-bottom.leaflet-left,
.leaflet-control-container .leaflet-bottom.leaflet-right{ bottom:20px; }
@supports (bottom: env(safe-area-inset-bottom)){
  .leaflet-control-container .leaflet-bottom.leaflet-left,
  .leaflet-control-container .leaflet-bottom.leaflet-right{
    bottom:calc(20px + env(safe-area-inset-bottom));
  }
}
.dem-legend{ margin-bottom:0; }
@supports (margin-bottom: env(safe-area-inset-bottom)){
  .dem-legend{ margin-bottom:env(safe-area-inset-bottom); }
}

/* ===== Profiler (mobile bottom-sheet by default) ===== */
#profileChartArea{
  display:none;
  position:fixed; left:0; right:0; bottom:0;
  background:#fff; box-shadow:0 -6px 20px rgba(0,0,0,.18);
  border-top-left-radius:10px; border-top-right-radius:10px;
  transform:translateY(100%); transition:transform .25s ease;
  z-index:700; flex-direction:column; height:var(--sheetH); max-height:80dvh;
}
#profileSheetHandle{height:14px; display:flex; align-items:center; justify-content:center;}
#profileSheetHandle::before{content:""; width:44px; height:4px; border-radius:3px; background:#c9c9c9;}
#profileChart{width:100%; height:100%;}

body.profiler-open #profileChartArea{
  display:flex;
  transform:translateY(0);
}

body.profiler-open .leaflet-control-container .leaflet-bottom.leaflet-left,
body.profiler-open .leaflet-control-container .leaflet-bottom.leaflet-right{
  bottom:calc(var(--sheetH) + 16px);
}
@supports (bottom: env(safe-area-inset-bottom)){
  body.profiler-open .leaflet-control-container .leaflet-bottom.leaflet-left,
  body.profiler-open .leaflet-control-container .leaflet-bottom.leaflet-right{
    bottom:calc(var(--sheetH) + 16px + env(safe-area-inset-bottom));
  }
}
body.profiler-open .dem-legend{ margin-bottom:calc(var(--sheetH) + 4px); }
@supports (margin-bottom: env(safe-area-inset-bottom)){
  body.profiler-open .dem-legend{
    margin-bottom:calc(var(--sheetH) + 4px + env(safe-area-inset-bottom));
  }
}

/* ----- Desktop/tablet split view ----- */
@media (min-width:1024px){
  #profileChartArea{
    display:none;
    position:relative;
    transform:none; box-shadow:none; border-radius:0; height:100%; max-height:none;
  }
  #main.profiler-open{
    display:grid;
    grid-template-rows:55% 45%;
  }
  #main.profiler-open #profileChartArea{ display:block; }
  #main.profiler-open #map{ position:relative; inset:auto; height:auto; }
}

/* Profile stats box */
#profileStats{
  background:#fff;
  border:1px solid #ddd;
  border-radius:6px;
  padding:10px 12px;
  font-size:.95em;
  line-height:1.4;
  color:#222;
  box-shadow:var(--shadow-sm);
  margin-top:8px;
}
#profileStats dl{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:10px;
  row-gap:6px;
  margin:0;
}
#profileStats dt{ font-weight:600; color:#555; }
#profileStats dd{ margin:0; text-align:right; color:#000; }

#gl3d{ position:absolute; inset:0; display:none; }
body.gl-on #gl3d{ display:block; }
body.gl-on #map{ visibility:hidden; } /* keep layout so the sheet/controls still place correctly */