/* css/style.css */



html, body {

  height: 100%;

  margin: 0;

}



#map {

  height: 100vh;

  width: 100%;

}



/* --- Control panel --- */

.panel{

  position: absolute;

  top: 14px;

  left: 60px;

  z-index: 2000;

  width: 300px;

  padding: 12px 12px 10px;

  background: rgba(255,255,255,0.92);

  border: 1px solid rgba(0,0,0,0.08);

  border-radius: 12px;

  box-shadow: 0 8px 20px rgba(0,0,0,0.10);

  backdrop-filter: blur(6px);

}


.panel-head{

  display:flex;

  align-items:center;

  justify-content: space-between;

  gap: 10px;

  margin-bottom: 10px;

}



.panel-title{

  font: 700 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  color: #111;

}


/* Collapse/expand button */

.panel-toggle{

  width: 34px;

  height: 30px;

  border-radius: 9px;

  border: 1px solid rgba(0,0,0,0.12);

  background: #fff;

  cursor: pointer;

  font: 700 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  display:flex;

  align-items:center;

  justify-content:center;

}



.panel-toggle:hover{

  background: #f3f3f3;

}



.panel-section{

  margin-bottom: 8px;

}



.panel-label{

  font: 700 11px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  color: #444;

  margin: 6px 0 10px;

  text-transform: uppercase;

  letter-spacing: .06em;

}



.chk{

  display: flex;

  align-items: center;

  gap: 8px;

  font: 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  margin: 8px 0;

  cursor: pointer;

  user-select: none;

}



.chk input{

  transform: translateY(1px);

}



.swatch{

  width: 12px;

  height: 12px;

  border-radius: 3px;

  border: 1px solid rgba(0,0,0,0.12);

  flex: 0 0 auto;

}



.btnrow{

  display: flex;

  gap: 8px;

  margin-top: 10px;

}



.btnrow button{

  flex: 1;

  font: 700 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  padding: 9px 10px;

  border-radius: 10px;

  border: 1px solid rgba(0,0,0,0.12);

  background: #fff;

  cursor: pointer;

}



.btnrow button:hover{

  background: #f3f3f3;

}



.panel-foot{

  font: 12px/1.25 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  color: #555;

  margin-top: 8px;

}



/* collapsed state */

.panel.collapsed #panelBody{

  display:none;

}



.panel.collapsed{

  width: 220px;

  padding-bottom: 12px;

}

#controls.collapsed #panelBody { 
  display: none !important; 
}

/* --- Popup styling --- */

.popup { font: 14px/1.25 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

.popup-title { font-weight: 800; margin-bottom: 4px; }

.popup-sub { color: #666; margin-bottom: 8px; }

.popup-meta div { margin: 2px 0; }

.popup-notes { margin-top: 8px; color: #333; }