*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0f1623;color:#e0e0e0;display:flex;flex-direction:column;height:100dvh;overflow:hidden}

header{background:#1e3a2f;padding:.6rem 1rem;display:flex;align-items:center;gap:.75rem;flex-shrink:0;border-bottom:1px solid #0d2318}
header h1{font-size:1.05rem;color:#fff;font-weight:700;flex-shrink:0}
header a{color:#a8d8ea;font-size:.82rem;text-decoration:none;white-space:nowrap;flex-shrink:0}
header a:hover{text-decoration:underline}

.map-nav{display:flex;gap:4px;flex-shrink:0}
/* #7a8fa8 passes on the dark sidebar but only reaches 3.7:1 on the header's
   lighter green, so the inactive switcher link is lightened just here */
.map-nav-btn{color:#8ca0b8;font-size:.82rem;text-decoration:none;padding:.3rem .65rem;border-radius:6px;border:1px solid #1e2a42;white-space:nowrap;transition:background .12s,color .12s}
.map-nav-btn:hover{background:#1a2540;color:#c0d0e0;text-decoration:none}
.map-nav-btn.active{background:#162038;border-color:#3a6aaa;color:#d0e4f8}
.drawer-nav{display:flex;gap:6px;margin-bottom:.3rem}
.drawer-nav .map-nav-btn{flex:1;text-align:center}

.search-wrap{flex:1;position:relative;min-width:0}
#search-input{width:100%;background:#0d1c2e;border:1px solid #2a3a5a;border-radius:7px;padding:.38rem .75rem;color:#c0d8f0;font-size:.83rem;outline:none;transition:border-color .15s}
#search-input::placeholder{color:#6e88a2}
#search-input:focus{border-color:#3a6aaa}
#search-drop{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#111827;border:1px solid #2a3a5a;border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.7);z-index:100;display:none;overflow:hidden;max-height:280px;overflow-y:auto}
.s-result{padding:.5rem .75rem;cursor:pointer;display:flex;align-items:baseline;gap:.5rem;font-size:.83rem}
.s-result:hover{background:#1a2540}
.s-type{font-size:.68rem;color:#6e88a2;white-space:nowrap;flex-shrink:0;min-width:70px}
.s-name{color:#c0d8f0;min-width:0}

.layout{display:flex;flex:1;overflow:hidden;position:relative}

.sidebar{width:220px;flex-shrink:0;background:#111827;border-right:1px solid #1e2a42;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.2rem}
.sec-label{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#7a8aa0;padding:.6rem 0 .3rem}
.sec-label:first-child{padding-top:0}
.sec-label-notop{padding-top:0}
.layer-btn{display:flex;align-items:center;gap:.6rem;width:100%;padding:.55rem .8rem;border-radius:7px;border:1px solid #1e2a42;cursor:pointer;background:#151e30;color:#7a8fa8;font-size:.84rem;text-align:left;transition:background .12s,color .12s,border-color .12s;user-select:none;line-height:1.3}
.layer-btn:hover{background:#1a2540;color:#c0d0e0}
.layer-btn.active{border-color:#3a6aaa;color:#d0e4f8;background:#162038}
.layer-swatch{width:14px;height:14px;border-radius:3px;flex-shrink:0}
.sidebar-hint{margin-top:auto;padding-top:1rem;font-size:.75rem;color:#6a8898;line-height:1.55}
.mobile-hint{display:none}

.map-wrap{flex:1;position:relative;overflow:hidden;background:#0c111e;touch-action:none}
#map{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#map:active{cursor:grabbing}
.state-base{fill:#111926;stroke:#1e2a42;stroke-width:.5;cursor:pointer}
.state-fill{pointer-events:none}
.state-label{font-size:9px;fill:#7090b0;pointer-events:none;user-select:none;text-anchor:middle;dominant-baseline:central;font-weight:600;letter-spacing:.02em}
.grotto-dot{fill:#f0c040;stroke:#90780a;stroke-width:1;pointer-events:none}
.grotto-hit{fill:transparent;cursor:pointer}
.nat-dot{fill:#d0e8ff;stroke:#5080b0;stroke-width:1.5;pointer-events:none}
.nat-hit{fill:transparent;cursor:pointer}

#tooltip{position:absolute;pointer-events:none;background:#0d1420;border:1px solid #2a3a5a;border-radius:8px;padding:.65rem .9rem;max-width:240px;font-size:.81rem;box-shadow:0 4px 20px rgba(0,0,0,.7);display:none;z-index:30}
.tt-label{font-size:.68rem;color:#7a90a8;margin-bottom:.3rem}
.tt-org{margin-bottom:.2rem}
.tt-type{font-size:.68rem;color:#7a90a8}
.tt-name{color:#c0d8f0;font-weight:600}
.tt-more{margin-top:.3rem;font-size:.7rem;color:#6e88a2;font-style:italic}
.tt-caves{font-size:.68rem;color:#6a94b8;margin-top:.1rem}
.tt-spaced{margin-top:.15rem}

#panel{position:absolute;right:.9rem;top:.9rem;width:285px;max-height:calc(100% - 1.8rem);overflow-y:auto;background:#111827;border:1px solid #2a3a5a;border-radius:10px;padding:1rem 1.1rem;font-size:.84rem;box-shadow:0 4px 28px rgba(0,0,0,.7);display:none;z-index:20}
#panel-close{float:right;cursor:pointer;color:#6a8898;font-size:1.3rem;line-height:.9;padding:0 0 .5rem .5rem;background:none;border:none}
#panel-close:hover{color:#a0b8d0}

.info-state{font-size:1rem;font-weight:700;color:#a8d8ea;margin-bottom:.4rem}
.info-caves{font-size:.75rem;color:#6a94b8;margin-bottom:.8rem}
.info-org{margin-bottom:1rem}
.info-org+.info-org{border-top:1px solid #1e2a42;padding-top:1rem}
.info-type{font-size:.68rem;color:#7a90a8;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.2rem}
.info-name{font-weight:700;color:#c8dff2;margin-bottom:.45rem;font-size:.92rem}
.info-row{margin-bottom:.28rem}
.info-row dt{display:inline;font-weight:600;color:#7a90a8;font-size:.78rem}
.info-row dt::after{content:": "}
.info-row dd{display:inline;font-size:.82rem}
.info-row a{color:#64b5f6;text-decoration:none}
.info-row a:hover{text-decoration:underline}
.info-link-btn{display:block;margin-top:.6rem;padding:.4rem .75rem;background:#0d1c30;border:1px solid #2a5080;border-radius:6px;color:#64b5f6;font-size:.8rem;text-decoration:none;text-align:center;transition:background .12s,border-color .12s}
.info-link-btn:hover{background:#112040;border-color:#4080b0;color:#90c8f8}
.info-notes{margin-top:.45rem;font-size:.76rem;color:#7a90a8;font-style:italic;border-top:1px solid #1a2438;padding-top:.45rem}
.info-empty{font-size:.82rem;color:#7a90a8;font-style:italic}

/* positioned against .layout, so the offset clears the sidebar's 220px */
#legend{position:absolute;bottom:1rem;left:calc(220px + 1rem);background:rgba(13,20,32,.93);border:1px solid #1e2a42;border-radius:8px;padding:.6rem .85rem;font-size:.75rem;z-index:10;max-height:calc(100% - 5rem);overflow-y:auto}
.leg-row{display:flex;align-items:center;gap:.5rem;color:#7a8fa8;margin-bottom:.25rem}
.leg-row:last-child{margin-bottom:0}
.leg-swatch{width:14px;height:10px;border-radius:2px;flex-shrink:0}
.leg-dashed{width:22px;height:0;border-top:2.5px dashed #c07030;flex-shrink:0}
.leg-dot{width:9px;height:9px;border-radius:50%;background:#f0c040;border:1px solid #90780a;flex-shrink:0}
.leg-nat{width:10px;height:10px;border-radius:50%;background:#d0e8ff;border:1.5px solid #5080b0;flex-shrink:0}
.leg-divider{border-top:1px solid #1e2a42;margin:.35rem 0}
.leg-section-label{font-size:.65rem;color:#7a8a9a;text-transform:uppercase;letter-spacing:.07em;margin-bottom:.2rem}
.leg-note{font-size:.65rem;color:#7a8a9a;font-style:italic;margin-top:.3rem;line-height:1.45}

/* initial hidden state for optional legend rows — JS sets display via element.style */
#leg-conservation,#leg-grottos,#leg-national,#leg-regional-wrap{display:none}

/* layer swatch colors */
.swatch-surveys{background:#1e4a7a}
.swatch-regional{background:#2d6b3a;opacity:.8}
.swatch-conservation{background:transparent;border:2px dashed #c07030}
.swatch-grottos{background:#f0c040;border:1px solid #90780a;border-radius:50%}
.swatch-national{background:#d0e8ff;border:1.5px solid #5080b0;border-radius:50%}
.swatch-cb{background:linear-gradient(90deg,#E69F00 33%,#56B4E9 33% 66%,#009E73 66%);border-radius:3px}

#zoom-ctrl{position:absolute;top:.9rem;left:.9rem;display:flex;flex-direction:column;gap:3px;z-index:10}
.zoom-btn{width:40px;height:40px;background:rgba(13,20,32,.93);border:1px solid #1e2a42;border-radius:6px;color:#7a8fa8;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:background .12s,color .12s}
.zoom-btn:hover{background:#1a2540;color:#c0d0e0}
.zoom-btn.reset{font-size:.7rem;font-weight:700}
#zoom-locate{font-size:.8rem}
.zoom-btn:focus-visible,.map-nav-btn:focus-visible,.layer-btn:focus-visible{outline:2px solid #64b5f6;outline-offset:2px}
.s-result.focused{background:#1a2540}

#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#6e88a2;font-size:.9rem;pointer-events:none;text-align:center;padding:1rem}

#hint{position:absolute;bottom:5rem;left:50%;transform:translateX(-50%);background:rgba(13,20,32,.88);border:1px solid #2a4a6a;border-radius:20px;padding:.45rem 1.1rem;font-size:.78rem;color:#6090b0;pointer-events:none;white-space:nowrap;z-index:10;opacity:0;transition:opacity .6s}
#hint.show{opacity:1}

#mob-fab{display:none;position:fixed;bottom:1.25rem;right:1rem;z-index:50;background:#1e3a2f;color:#a8d8ea;border:1px solid #2d6b3a;border-radius:24px;padding:.65rem 1.1rem;font-size:.88rem;font-weight:600;cursor:pointer;box-shadow:0 3px 16px rgba(0,0,0,.5);align-items:center;gap:.4rem}
#mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60}
#mob-overlay.show{display:block}
.bottom-panel{position:fixed;bottom:0;left:0;right:0;background:#111827;border-top:1px solid #2a3a5a;border-radius:16px 16px 0 0;padding:0 1rem 1.5rem;z-index:70;transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);display:none}
.bottom-panel.open{transform:translateY(0)}
.drawer-handle{width:40px;height:4px;background:#2a3a5a;border-radius:2px;margin:.75rem auto .8rem}
#mob-drawer{max-height:55vh;overflow-y:auto;padding-bottom:2rem}
#mob-sheet{max-height:72vh;overflow-y:auto;padding-bottom:2.5rem}
#mob-sheet-close{float:right;cursor:pointer;color:#6a8898;font-size:1.3rem;line-height:.9;padding:0 0 .5rem .5rem;margin-top:.1rem;background:none;border:none}
#mob-sheet-close:hover{color:#a0b8d0}

@media(max-width:768px){
  .sidebar{display:none}
  #mob-fab{display:flex}
  .bottom-panel{display:block}
  #panel{display:none!important}
  #tooltip{display:none!important}
  #hint{display:none}
  #legend{bottom:4.5rem;left:1rem;font-size:.71rem} /* sidebar is hidden here */
  #zoom-ctrl{top:.6rem;left:.6rem}
  header{flex-wrap:wrap;row-gap:.45rem}
  header h1{font-size:.9rem;flex:1}
  .search-wrap{flex:1 1 100%;order:5}
  #search-input{font-size:16px} /* below 16px iOS zooms the page on focus */
  .map-nav{display:none}
}
/* Portrait phones: the map is width-constrained, so a full-height container
   left it floating in a tall empty band. Size the container to the map itself
   and move the reclaimed space below it, where the hint text can live. The
   height floor matters: below width*0.625 the fit flips to height-constrained
   and the map would start shrinking. */
@media(max-width:768px) and (orientation:portrait){
  .layout{flex-direction:column;overflow-y:auto}
  .map-wrap{flex:0 0 auto;height:min(80vw,58dvh)}
  /* the legend leaves the map and stacks underneath it. flex-shrink:0 matters:
     on a short phone the column overflows, and without it the browser squashes
     these boxes (clipping the legend) instead of letting .layout scroll */
  #legend{position:static;align-self:flex-start;flex-shrink:0;margin:.85rem 1.15rem 0;max-height:none}
  /* a horizontal row in the empty ocean at the map's bottom-right: the vertical
     stack covered the West Coast once the map got short */
  #zoom-ctrl{top:auto;bottom:.5rem;left:auto;right:.5rem;flex-direction:row}
  .zoom-btn{width:36px;height:36px}
  /* deep bottom padding keeps the last line clear of the floating Layers button */
  .mobile-hint{display:block;flex-shrink:0;padding:.9rem 1.15rem 5.5rem;font-size:.8rem;color:#8aa4b8;line-height:1.6}
  .mobile-hint strong{color:#a8d8ea;font-weight:600;white-space:nowrap}
}
@media(hover:none){#tooltip{display:none!important}}

#toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(2rem);background:rgba(13,20,32,.97);border:1px solid #2a5080;border-radius:20px;padding:.45rem 1.2rem;font-size:.8rem;color:#a0c8e8;pointer-events:none;z-index:200;opacity:0;transition:opacity .2s,transform .2s}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

#permalink-btn{float:right;cursor:pointer;background:none;border:none;color:#7a8a9a;font-size:1rem;line-height:.9;padding:0 0 .5rem .4rem;margin-top:.05rem;transition:color .12s}
#permalink-btn:hover{color:#80b8d8}

#cb-toggle,#cb-toggle-mob{margin-top:.5rem;font-size:.75rem;padding:.4rem .8rem;gap:.45rem}

@media print{
  header,#zoom-ctrl,#legend,#tooltip,#hint,#mob-fab,#mob-overlay,.bottom-panel,#panel-close,#permalink-btn,#loading{display:none!important}
  body{background:#fff;color:#111;overflow:auto;height:auto}
  .layout{display:block}
  .sidebar{display:none}
  .map-wrap{height:72vh;border-bottom:1px solid #ccc}
  #map{background:#fff}
  .state-base{fill:#e8ecf0;stroke:#aab !important}
  #panel{display:block!important;position:static;max-height:none;width:100%;border:none;border-top:1px solid #ccc;border-radius:0;box-shadow:none;padding:1rem 0}
  .info-link-btn{border:1px solid #aaa;color:#336;background:#f5f5f5}
}