/* Wintery, penguiny UI — v3. */
:root{
  --snow:#F7F9FB;
  --paper:#EEF3F6;
  --ice:#DCE7F0;
  --ink:#1E2A32;
  --graphite:#4A5963;

  --adelie:#E07B5F;
  --chinstrap:#6C7A86;
  --gentoo:#D7A85F;
  --emperor:#C7B35A;

  --shadow:0 10px 30px rgba(0,0,0,.16);
  --radius:14px;
  --uiBlur:blur(8px);
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--snow);}

.topbar{
  position:relative; z-index:9000;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid rgba(30,42,50,.10);
  background:rgba(247,249,251,.85);
  backdrop-filter:var(--uiBlur);
}
.title{margin:0;font-size:18px;letter-spacing:.2px;}
.subtitle{margin-top:2px;font-size:12px;color:var(--graphite);}

.btn{
  border:1px solid rgba(30,42,50,.14);
  background:white; color:var(--ink);
  border-radius:999px;
  padding:8px 12px;
  font-weight:700;
  cursor:pointer;
}
.btn-ghost{background:rgba(255,255,255,.6);}
.btn:hover{background:rgba(255,255,255,.92);}
.btn-solid{
  width:100%;
  margin-top: 10px;
  background: rgba(220,231,240,.8);
}
.btn-solid:hover{ background: rgba(220,231,240,1); }

.app{position:relative;height:calc(100vh - 56px);}
#map{position:absolute;inset:0;z-index:1;}

/* Legend */
.legend{
  position:absolute; z-index:8000;
  left:14px; bottom:14px;
  width:260px;
  background:rgba(238,243,246,.90);
  border:1px solid rgba(30,42,50,.14);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:var(--uiBlur);
  overflow:hidden;
}
.legend-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;}
.legend-title{font-weight:800;font-size:13px;letter-spacing:.2px;}
.legend-toggle{border:none;background:transparent;font-size:18px;line-height:1;cursor:pointer;color:var(--graphite);}
.legend-body{padding:8px 12px 12px 12px;}

.legend-row{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(30,42,50,.08);
  background: rgba(247,249,251,.55);
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  text-align:left;
}
.legend-row + .legend-row{ margin-top: 8px; }
.legend-row:hover{ background: rgba(247,249,251,.85); }
.legend-row[aria-pressed="true"]{
  background: rgba(220,231,240,.95);
  border-color: rgba(30,42,50,.18);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.legend-hint{margin-top:10px;font-size:12px;color:var(--graphite);}

/* Swatches */
.swatch{width:12px;height:12px;border-radius:999px;border:1px solid rgba(30,42,50,.25);display:inline-block;}
.sw-adelie{background:var(--adelie);}
.sw-chinstrap{background:var(--chinstrap);}
.sw-gentoo{background:var(--gentoo);}
.sw-emperor{background:var(--emperor);}

/* Loading pill */
.loading{
  position:absolute; z-index:8500;
  right:14px; bottom:14px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(247,249,251,.92);
  border:1px solid rgba(30,42,50,.14);
  box-shadow:var(--shadow);
  color:var(--graphite);
  font-size:12px;
}

/* Popups: more breathing room below divider */
.leaflet-popup-content-wrapper{border-radius:14px;border:1px solid rgba(30,42,50,.14);box-shadow:var(--shadow);}
.leaflet-popup-content{margin:12px 12px 12px 12px;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);}
.popup{width:280px;}
.popup .p-top{display:flex;gap:12px;align-items:flex-start;}
.popup img{
  width:104px;height:104px;object-fit:cover;border-radius:12px;
  border:1px solid rgba(30,42,50,.12);background:var(--paper);
}
.popup .p-title{font-weight:900;font-size:14px;line-height:1.15;margin-bottom:4px;}
.popup .p-site{font-size:12px;color:var(--graphite);margin-bottom:8px;}
.popup .p-count{font-size:13px;font-weight:800;margin:6px 0 2px 0;}
.popup .p-meta{font-size:12px;color:var(--graphite);line-height: 1.45;}
.popup .p-more{
  margin-top:12px;
  border-top:1px solid rgba(30,42,50,.10);
  padding-top:10px;
  font-size:12px;
  color:var(--graphite);
  line-height: 1.55;
}
.popup .p-more .row{ margin-top: 6px; }
.popup .spark-wrap{ margin-top: 10px; }
.popup .spark-title{ font-weight: 800; color: var(--ink); font-size: 12px; margin-bottom: 6px; }
.popup .spark-meta{ font-size: 11px; color: var(--graphite); display:flex; justify-content:space-between; gap:10px; }
.popup svg{ width: 100%; height: 34px; display:block; }
.nowrap{white-space:nowrap;}

/* Modal */
.modal{
  position:fixed; inset:0; z-index:9999;
  display:none; align-items:center; justify-content:center;
  padding:18px;
  background:rgba(30,42,50,.35);
}
.modal[aria-hidden="false"]{display:flex;}
.modal-card{
  width:min(720px,95vw);
  max-height:85vh;
  overflow:auto;
  background:rgba(247,249,251,.96);
  border-radius:18px;
  border:1px solid rgba(30,42,50,.16);
  box-shadow:var(--shadow);
  backdrop-filter:var(--uiBlur);
}
.modal-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(30,42,50,.10);
}
.modal-title{font-weight:900;}
.modal-subtitle{font-size:12px;color:var(--graphite);margin-top:2px;}
.modal-body{padding:12px 16px 18px 16px;}
.modal-body h3{margin:14px 0 8px 0;}
.modal-body p{margin:0 0 10px 0;color:var(--graphite);line-height:1.45;}
.modal-body code{background:rgba(220,231,240,.7);padding:2px 6px;border-radius:8px;}

/* Mobile: keep full disk by giving fitBounds extra top padding (handled in JS),
   and keep legend narrower to preserve map width. */
@media (max-width: 520px){
  .legend{ width: 210px; left: 10px; bottom: 10px; }
  .topbar{ padding: 10px 12px; }
  .title{ font-size: 16px; }
}