:root{
  --bg:#dfe9e1;
  --ocean:#dbe7df;
  --ink:#1b2b22;
  --panel:#f5f2eaee;
  --panel-border:#cfc9b9;
  --soft:#6d736d;
  --accent:#d7ecff;
  --accent-stroke:#cfe8ff;
  --green-0:#ffffff;
  --green-1:#edf5e7;
  --green-2:#cfe4bf;
  --green-3:#9bc37d;
  --green-4:#5d9e49;
  --green-5:#2f6d28;
  --purple-1:#efe7f6;
  --purple-2:#cdb8e4;
  --purple-3:#9a79c5;
}
*{box-sizing:border-box}
html,body,#app{height:100%;margin:0}
body{
  font-family:Inter,system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  overflow:hidden;
}
a{color:#305b7a}
#mapWrap{position:relative;width:100%;height:100%}
#mapSvg{
  width:100%;
  height:100%;
  display:block;
  background:linear-gradient(180deg,#e7efe7 0%, #dbe7df 100%);
}
.map-panel{
  position:absolute;
  z-index:40;
  background:var(--panel);
  backdrop-filter: blur(5px);
  border:1px solid var(--panel-border);
  box-shadow:0 10px 30px rgba(36,43,36,.12);
  border-radius:8px;
}
#mapHeader{
  left:0px;
  top:0px;
  width: 100%;
  padding:12px 14px 12px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.header-title{
  font-family:Fraunces,serif;
  font-size:clamp(22px,1.5vw,30px);
  line-height:1.15;
  color:#33493d;
}
#legendPanel{
  right:24px;
  bottom:24px;
  width:320px;
  padding:10px;
}
.legend-top{
  display:grid;
  grid-template-columns:32px 1fr 32px;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.legend-title{
  font-family:Fraunces,serif;
  font-size:20px;
  text-align:center;
  color:#31483c;
}
#legendBody{display:block}
#legendPanel.minimized #legendBody{display:none}
#treemapWrap{
  position:relative;
  margin:6px 0 10px 0;
  border:1px solid #d8d2c6;
  border-radius:8px;
  background:#fffdf9cc;
  padding:8px 8px 30px 8px;
}
#treemapSvg{width:100%;height:auto;display:block}
#clearClassSelection{
  position:absolute;
  right:8px;
  bottom:6px;
}
.subtle-label{
  display:block;
  font-size:12px;
  color:var(--soft);
  margin:2px 0 4px 2px;
}
#classificationSelect{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #d2cdc0;
  background:#fffefb;
  color:#31483c;
  font-size:14px;
}
#legendScale{
  margin-top:10px;
  min-height:32px;
  font-size:12px;
  color:#536156;
}
.icon-btn,.small-btn{
  border:1px solid #cfc9bb;
  background:#fffdfa;
  color:#31483c;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.icon-btn:hover,.small-btn:hover{background:#f1eee5}
.icon-btn{
  width:32px;height:32px;border-radius:999px;font-size:18px;display:grid;place-items:center;
}
.small-btn{
  padding:4px 8px;border-radius:8px;font-size:12px;
}
#loading{
  position:absolute;
  inset:0;
  z-index:100;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:#edf2ec;
  color:#31483c;
  letter-spacing:.02em;
}
#loading.hidden{display:none}
.spinner{
  width:36px;height:36px;border-radius:50%;
  border:3px solid #c8d4c8;border-top-color:#577d63;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

#tooltip{
  position:absolute;
  z-index:55;
  pointer-events:none;
  background:#223126f2;
  color:#f7faf7;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  padding:8px 10px;
  font-size:12px;
  line-height:1.45;
  min-width:160px;
  box-shadow:0 8px 26px rgba(12,18,14,.24);
  opacity:0;
  transform:translate(12px,12px);
  transition:opacity .12s ease;
}
#tooltip.visible{opacity:1}

#popupContainer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:60;
}
.info-popup{
  position:absolute;
  width:min(320px,32vw);
  pointer-events:auto;
  background:#fcfbf8f5;
  border:1px solid #d5d0c3;
  border-radius:8px;
  box-shadow:0 12px 32px rgba(27,37,29,.18);
  overflow:hidden;
}
.popup-inner{padding:12px 14px}
.popup-place{
  font-size:14px;
  color:#778078;
  margin-bottom:8px;
}
.popup-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
  padding:5px 0;
  border-top:1px solid #ece6d8;
}
.popup-row:first-of-type{border-top:0}
.popup-label{color:#6f786f}
.state-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  padding:2px 8px;
  border-radius:999px;
  background:#edf2ec;
  border:1px solid #d8e1d6;
  color:#36503f;
  font-weight:600;
  font-size:12px;
}
.popup-image-wrap{
  margin-top:10px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid #ddd6c8;
  cursor:pointer;
}
.popup-image-wrap img{
  display:block;
  width:100%;
  height:auto;
}
.map-note{
  font-size:11px;
  color:#7a8178;
  margin-top:8px;
}

.modal.hidden{display:none}
.modal{
  position:absolute; inset:0; z-index:120;
}
.modal-scrim{
  position:absolute; inset:0; background:rgba(13,18,15,.42);
}
.modal-card, .image-modal-card{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  background:#fcfbf8;
  border:1px solid #d7d1c3;
  border-radius:8px;
  box-shadow:0 20px 50px rgba(10,16,13,.24);
}
.modal-card{
  width:min(760px,88vw);
  max-height:min(76vh,760px);
  overflow:auto;
}
.modal-header{
  position:sticky; top:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px;
  background:#fcfbf8;
  border-bottom:1px solid #eee7d7;
}
.modal-header h2{
  margin:0; font-family:Fraunces,serif; color:#31483c;
}
.modal-content{padding:18px}
.prov-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.prov-label{
  display:block;
  color:#6f786f;
  font-size:12px;
  margin-bottom:4px;
}
.campaign-note,.made-with{margin-top:18px;color:#516156}
.source-links{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:16px;
}
.image-modal-card{
  padding:10px;
  max-width:min(92vw,1100px);
  max-height:92vh;
}
.image-modal-card img{
  display:block;
  max-width:100%;
  max-height:calc(92vh - 20px);
  border-radius:8px;
}
.close-btn{position:absolute; right:10px; top:10px}

.hexagon{
  stroke:none;
  cursor:pointer;
}
.hexagon.hovered,.hexagon.selected,.hexagon.class-selected{
  stroke:var(--accent-stroke);
  stroke-width:1.4px;
}
.state-fill{fill:none}
.state-borders{
  fill:none;
  stroke:#f8fbf8;
  stroke-opacity:.72;
  stroke-width:.7px;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
}
.nation-outline{
  fill:none;
  stroke:#a9b9ae;
  stroke-width:1px;
  vector-effect:non-scaling-stroke;
  opacity:.6;
}
.bird-point{
  cursor:pointer;
}
.bird-point image{
  overflow:visible;
}
.treemap-empty{
  fill:#fffefb;
  stroke:#ddd7ca;
}
.treemap-hint{
  fill:#6f786f;
  font-size:14px;
}
.treemap-cell{
  cursor:pointer;
  stroke:#fffdf8;
  stroke-width:2px;
}
.treemap-cell.selected{
  stroke:var(--accent-stroke);
  stroke-width:3px;
}
.treemap-label{
  fill:#243329;
  font-size:12px;
  pointer-events:none;
}
@media (max-width: 980px){
  #mapHeader{
    left:16px; right:16px; bottom:132px; width:auto; min-width:0;
  }
  #legendPanel{
    width:min(320px, calc(100vw - 32px));
  }
  .info-popup{width:min(300px, 75vw)}
}