*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Arial, Helvetica, sans-serif}
:root{--vh:100vh}

#app{position:relative;height:calc(var(--vh));display:flex;flex-direction:row}
#mobileHeader{display:none;position:fixed;top:0;left:0;right:0;height:48px;background:#0b5fff;color:#fff;z-index:1001;display:none;align-items:center;padding:0 12px;font-weight:600}
#mobileHeader .brand{margin-left:8px}
#mobileHeader #menuToggle{appearance:none;background:transparent;border:none;color:#fff;font-size:22px;line-height:1;cursor:pointer}

#sidebar{width:380px;max-width:95vw;padding:16px;border-right:1px solid #e5e7eb;background:#fff;overflow:auto;z-index:1000}
#sidebar h1{font-size:1.3rem;margin:0 0 6px 0}
#sidebar .author{margin:0 0 8px 0;color:#444}
#sidebar h2{font-size:1.1rem;margin:10px 0 4px 0}
#sidebar label{display:block;font-weight:600;margin-top:10px}
#sidebar input,#sidebar select,#sidebar button{width:100%;padding:10px;margin-top:6px;border:1px solid #d1d5db;border-radius:6px}
#sidebar button{cursor:pointer}
#sidebar .hint{font-size:.85rem;color:#555}

#map{flex:1;min-width:0;height:calc(var(--vh))}

.leaflet-popup-content{max-width:min(86vw,520px);}
.leaflet-popup-content h3{margin:.2rem 0 0.3rem;font-size:1.15rem}
.leaflet-popup-content div{margin:.15rem 0}

.floating{
  position:absolute;right:14px;bottom:14px;z-index:1100;
  border:0;border-radius:999px;padding:12px 16px;
  background:#0b5fff;color:#fff;font-weight:600;cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}

@media (max-width: 820px){
  #mobileHeader{display:flex}
  #app{height:calc(var(--vh));padding-top:48px}
  #sidebar{
    position:fixed;top:48px;bottom:0;left:0;
    width:min(92vw,420px);
    transform:translateX(-100%);
    transition:transform .25s ease;
    border-right:1px solid #e5e7eb;
    box-shadow:0 2px 14px rgba(0,0,0,.12);
  }
  #sidebar.open{transform:translateX(0)}
  #map{height:calc(var(--vh))}
  #sidebar input,#sidebar select,#sidebar button{font-size:16px}
}


/* Small primary button for links in popups */
.btn{
  display:inline-block;
  padding:8px 12px;
  border-radius:8px;
  background:#0b5fff;
  color:#fff !important;
  text-decoration:none;
  font-weight:600;
  border:1px solid #0848c9;
}
.btn:hover{ filter:brightness(0.95); }


.inline-row{display:flex;align-items:center;gap:.5rem;margin-top:.35rem}
.inline-row label.inline{margin-top:0;font-weight:500}