/* map.css — map app specific styles. Global tokens in css/global.css */
.state-clickable{cursor:pointer!important;}
.state-label{background:none!important;border:none!important;pointer-events:none!important;}

body{font-family:'Nunito',sans-serif;background:var(--forest);color:var(--text-dark);height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;}
/* Admin bar (36px, position:fixed) override for map page.
   global.css adds body.tb-has-admin-bar{padding-top:36px} which breaks our
   100vh flex column (content overflows viewport by 36px). Here we carve
   out the 36px from the body itself and let header sit at top:0 of the
   shifted body instead of top:36px of the viewport.
   100dvh with 100vh fallback: iOS Safari's address-bar collapse shifts 100vh
   dynamically and jumps the sheet on drag; 100dvh is stable. */
body.tb-has-admin-bar{padding-top:0!important;height:calc(100vh - 36px)!important;height:calc(100dvh - 36px)!important;margin-top:36px;}
body.tb-has-admin-bar header{top:0!important;}
#loading-overlay{position:fixed;inset:0;background:var(--forest);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .5s;}
#loading-overlay.fade{opacity:0;pointer-events:none;}
.loading-logo{font-family:'Cabin',sans-serif;font-size:28px;font-weight:700;color:var(--fern);display:flex;align-items:center;gap:10px;}
.loading-logo .lm{width:40px;height:40px;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.loading-bar-wrap{width:240px;height:3px;background:rgba(122,171,110,0.2);border-radius:2px;overflow:hidden;}
.loading-bar{height:100%;background:var(--moss);border-radius:2px;width:0%;transition:width .15s ease;}
.loading-status{font-size:12px;color:rgba(181,212,160,0.6);letter-spacing:.04em;max-width:320px;text-align:center;}
/* Shared header adjustments for map page */
header{flex-shrink:0;position:relative;z-index:2;}
#error-banner{display:none;position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:1001;background:#5c1a0a;color:#f2c27a;font-size:11px;padding:7px 16px;border-radius:20px;white-space:nowrap;}
#app{display:flex;flex:1;overflow:hidden;position:relative;z-index:1;}
#sidebar{width:320px;background:var(--panel-bg);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;border-right:1px solid var(--card-border);}
#filters{padding:12px 14px;border-bottom:1px solid var(--card-border);background:var(--parchment);}
.filter-label{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:5px;}
.chip-row{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px;}
.chip-row:last-child{margin-bottom:0;}
.chip{font-size:11px;font-family:'Nunito',sans-serif;padding:3px 10px;border-radius:20px;border:1px solid rgba(74,124,89,0.25);background:transparent;color:var(--text-mid);cursor:pointer;transition:all .15s;white-space:nowrap;}
.chip:hover{border-color:var(--sage);background:rgba(74,124,89,0.06);}
.chip.on{background:var(--forest);color:var(--fern);border-color:var(--forest);}
.chip.amber.on{background:#5c3a10;color:var(--amber-light);border-color:var(--amber);}
#results-header{padding:8px 14px 5px;display:flex;align-items:center;justify-content:space-between;gap:6px;}
.results-count{font-size:12px;color:var(--text-muted);}
.sort-select{font-size:11px;font-family:'Nunito',sans-serif;background:transparent;border:1px solid var(--card-border);border-radius:6px;padding:3px 7px;color:var(--text-mid);cursor:pointer;outline:none;}
.show-all-btn{font-size:11px;font-family:'Nunito',sans-serif;padding:3px 9px;border-radius:6px;border:1px solid var(--sage);background:var(--sage);color:#fff;cursor:pointer;}
.show-all-btn:hover{background:var(--forest);}
#results{overflow-y:auto;flex:1;padding:5px 8px 10px;}
#results::-webkit-scrollbar{width:4px;}
#results::-webkit-scrollbar-thumb{background:var(--fern);border-radius:2px;}
.trail-card{background:white;border:1px solid var(--card-border);border-radius:var(--radius);padding:11px 12px;margin-bottom:6px;cursor:pointer;transition:border-color .15s,box-shadow .15s;position:relative;overflow:hidden;}
.trail-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--moss);opacity:0;transition:opacity .15s;}
.trail-card:hover{border-color:var(--sage);box-shadow:0 2px 12px rgba(26,58,42,0.08);}
.trail-card:hover::before,.trail-card.active::before{opacity:1;}
.trail-card.active{border-color:var(--sage);box-shadow:var(--shadow);}
.trail-card.hs-highlighted{border-color:var(--amber);box-shadow:0 0 0 2px rgba(212,130,42,0.25);background:#fdf6ec;}
.trail-card.is-hotspot-only{border-left:3px solid #6a8fd8;}
.trail-card.is-hotspot-only::before{background:#6a8fd8;}
/* Active hotspot expanded card */
.trail-card.hs-active{border-color:var(--sage);box-shadow:0 2px 16px rgba(26,58,42,0.14);}
.trail-card.hs-active::before{opacity:1;}
.hs-active-body{padding:10px 12px 4px;border-top:1px solid var(--card-border);}
.hs-active-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:12px;}
.hs-active-stat{background:var(--parchment);border-radius:7px;padding:7px 4px;text-align:center;}
.hs-stat-v{font-size:13px;font-weight:700;color:var(--forest);font-family:'Cabin',sans-serif;line-height:1;}
.hs-stat-l{font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-top:3px;}
.hs-name{font-family:'Cabin',sans-serif;font-size:15px;font-weight:700;color:var(--forest);line-height:1.3;margin-bottom:2px;}
.hs-sub{font-size:12px;color:var(--text-muted);margin-bottom:12px;}
.rare-stat{background:#fde0d0;}
.rare-stat .rare-v{color:#7a2510;}

/* ── Hotspot card: Parks section ────────────────────────────────────────── */
.hs-parks-section{margin-bottom:10px;}
.hs-park-contained-label{font-size:10px;font-weight:700;color:var(--forest);text-transform:uppercase;letter-spacing:.04em;margin:4px 0 4px;}
.hs-park-nearby-label{font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin:8px 0 4px;}
.hs-park-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px dashed var(--card-border);font-size:12px;}
.hs-park-row:last-child{border-bottom:none;}
.hs-park-name{font-weight:600;color:var(--forest);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hs-park-meta{font-size:10px;color:var(--text-muted);font-family:'Cabin',sans-serif;white-space:nowrap;flex-shrink:0;}
.hs-park-type{font-size:9px;color:var(--text-muted);background:var(--parchment);padding:1px 6px;border-radius:10px;margin-right:4px;text-transform:capitalize;}
.card-name{font-family:'Cabin',sans-serif;font-size:13px;font-weight:500;color:var(--forest);line-height:1.3;margin-bottom:4px;}
.badge-row{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:7px;}
.badge{font-size:10px;padding:2px 7px;border-radius:20px;font-weight:500;}
.badge-park-link{background:var(--parchment);color:var(--forest);border:1px solid var(--sage);text-decoration:none;cursor:pointer;transition:background .15s;}
.badge-park-link:hover{background:var(--sage);color:white;}
/* "Inside a park" badge variant — stronger sage fill, indicates polygon containment */
.badge-inside-park{background:rgba(111,168,82,0.18) !important;border-color:#6fa852 !important;color:#2a5a34 !important;font-weight:600;}
.badge-inside-park:hover{background:#6fa852 !important;color:white !important;}
.b-amber{background:#fdefd4;color:#7a4710;}.b-rust{background:#fde0d0;color:#7a2510;}.b-green{background:#e0f0d8;color:#2d5c30;}
.rare-card{background:white;border-radius:var(--radius);border:1px solid #f5c4b3;margin-bottom:10px;overflow:hidden;cursor:pointer;transition:box-shadow .15s;}
.rare-card:hover{box-shadow:0 2px 12px rgba(176,58,16,0.12);}
.rare-card-header{background:#fde8e0;padding:9px 12px 8px;border-bottom:1px solid #f5c4b3;}
.rare-card-species{font-family:'Cabin',sans-serif;font-size:13px;font-weight:700;color:#7a2510;}
.rare-card-date{font-size:10px;color:#b03a10;margin-top:1px;}
.rare-card-body{padding:9px 12px;}
.rare-card-hotspot{font-size:12px;font-weight:600;color:var(--forest);margin-bottom:3px;}
.rare-card-trails{font-size:11px;color:var(--text-muted);margin-bottom:7px;}
.rare-card-btn{display:inline-block;font-size:11px;font-family:'Cabin',sans-serif;font-weight:600;color:white;background:var(--rust);border:none;border-radius:4px;padding:4px 10px;cursor:pointer;transition:background .15s;}
.rare-card-btn:hover{background:#8a2a0a;}
.rare-empty{text-align:center;padding:30px 16px;color:var(--text-muted);font-size:12px;}
.rare-empty-icon{font-size:32px;margin-bottom:10px;}
.rare-mode-label{font-size:11px;color:var(--text-muted);margin-bottom:10px;padding:0 2px;}
.type-pill{font-size:9px;font-weight:600;padding:2px 6px;border-radius:3px;text-transform:uppercase;letter-spacing:.04em;}
.tp-state{background:#d4e8da;color:#1a5a2a;}.tp-state-forest{background:#dce8d4;color:#2a4a1a;}
.tp-national{background:#d4e0f0;color:#1a2a5a;}.tp-county{background:#f0e8d4;color:#5a3a1a;}
.tp-nature{background:#e8f0d4;color:#3a5a1a;}.tp-hotspot{background:#eaf0fd;color:#1a3a7a;}.tp-other{background:#ebebeb;color:#555;}
.card-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;}
.stat{background:var(--parchment);border-radius:6px;padding:5px 4px;text-align:center;}
.stat-val{font-size:13px;font-weight:500;color:var(--forest);line-height:1;}
.stat-lbl{font-size:9px;color:var(--text-muted);margin-top:2px;text-transform:uppercase;letter-spacing:.04em;}
.card-trail-section{display:none;border-top:1px solid var(--card-border);padding:7px 10px 4px;background:rgba(245,240,232,0.4);}
.trail-card.active .card-trail-section{display:block;}
.card-trail-header{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px;}
.trail-list-item{display:flex;align-items:center;gap:6px;padding:5px 7px;border-bottom:1px solid #f0ede6;font-size:11px;color:var(--text-mid);cursor:pointer;border-radius:5px;transition:background .15s;}
.trail-list-item:last-child{border-bottom:none;}
.trail-list-item:hover,.trail-list-item.selected{background:var(--parchment);}
.trail-list-item.selected .tli-name{color:var(--forest);font-weight:600;}
.diff-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.species-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid #f0ede6;font-size:11px;}
.species-row:last-child{border-bottom:none;}
.sp-name{color:var(--text-mid);font-style:italic;flex:1;padding-right:6px;}
.sp-tag{font-size:9px;padding:1px 7px;border-radius:20px;font-style:normal;font-weight:500;white-space:nowrap;}
.sp-rare{background:#fde0d0;color:#7a2510;}.sp-uncommon{background:#fdefd4;color:#7a4710;}.sp-common{background:#e0f0d8;color:#2d5c30;}
#map-wrap{flex:1;position:relative;}
#map{width:100%;height:100%;}
.leaflet-container{font-family:'Nunito',sans-serif;}
.county-label{ background:transparent;border:none;box-shadow:none; }
.county-label-inner{ display:flex;flex-direction:column;align-items:center;gap:3px; }
.county-label-name{ font-size:10px;font-weight:700;color:#fff;letter-spacing:.05em;text-transform:uppercase;text-shadow:0 1px 3px rgba(0,0,0,0.9),0 0 8px rgba(0,0,0,0.6);white-space:nowrap;line-height:1.2; }
.county-label-dots{ display:flex;gap:4px;align-items:center; }
.county-dot{ width:8px;height:8px;border-radius:50%;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.5);transition:transform .15s;flex-shrink:0; }
.county-dot:hover{ transform:scale(1.5); }
.dot-rare{   background:#c0392b; }
.dot-recent{ background:#4a9c5a; }
.dot-high{   background:#d4822a; }
/* County sidebar cards */
.county-card{ cursor:pointer;padding:10px 12px; }
.county-card:hover{ background:#f5f0e4; }
.county-card-row{ display:flex;align-items:center;justify-content:space-between;margin-bottom:4px; }
.county-card-name{ font-size:13px;font-weight:600;color:var(--forest); }
.county-card-dots{ display:flex;gap:4px;align-items:center; }
.county-card-meta{ display:flex;gap:8px;flex-wrap:wrap;align-items:center; }
.county-card-meta span{ font-size:11px; }
.ccs-rare{   color:#c0392b;font-weight:600; }
.ccs-recent{ color:#2a6c3a;font-weight:600; }
.ccs-high{   color:#8a4a10;font-weight:600; }
.ccs-total{  color:var(--text-muted); }
#zoom-hint{position:absolute;top:60px;left:50%;transform:translateX(-50%);z-index:800;background:rgba(26,58,42,0.88);color:var(--fern);font-size:11px;padding:5px 14px;border-radius:20px;pointer-events:none;transition:opacity .4s;white-space:nowrap;}
#zoom-hint.hidden{opacity:0;}
#detail-panel{display:none;}
/* ── Shared bird/hotspot row styles ── */
.hs-section-label{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:600;margin-bottom:6px;margin-top:2px;}
.hs-bird-row{display:flex;align-items:center;padding:5px 0;border-bottom:1px solid #f0ede6;gap:5px;font-size:12px;}
.hs-bird-row:last-child{border-bottom:none;}
.hs-bird-name{font-style:italic;color:var(--text-mid);flex:1;}
.hs-bird-count{font-size:11px;color:var(--sage);font-weight:600;}
.hs-bird-date{font-size:10px;color:var(--text-muted);}
.hs-rare-badge{font-size:9px;font-weight:600;padding:2px 6px;border-radius:3px;background:#fde0d0;color:#7a2510;flex-shrink:0;}
.hs-rare-badge.unconfirmed{background:#f0ede6;color:#8a7a6a;border:1px dashed #c4a882;}
.hs-divider{border:none;border-top:1px solid var(--card-border);margin:8px 0;}
.hs-ebird-link{display:block;font-size:10px;color:var(--sage);text-decoration:none;padding:5px 0 2px;border-top:1px solid var(--card-border);margin-top:4px;}
.hs-ebird-link:hover{text-decoration:underline;}
.hs-empty{font-size:11px;color:var(--text-muted);padding:4px 0;}
.radius-select{font-size:11px;font-family:'Nunito',sans-serif;background:transparent;border:1px solid var(--card-border);border-radius:5px;padding:2px 5px;color:var(--text-mid);cursor:pointer;outline:none;}
/* ── Park card inline expand ── */
.hs-expand-item{border-radius:8px;margin-bottom:5px;border:1px solid transparent;overflow:hidden;transition:border-color .15s;background:white;}
.hs-expand-item.hovered{border-color:var(--amber);background:#fffbf5;}
.hs-expand-item.active{border-color:var(--sage);}
.hs-expand-header{display:flex;align-items:center;padding:7px 10px;background:var(--parchment);cursor:pointer;gap:8px;transition:background .15s;border-radius:7px;}
.hs-expand-item.active .hs-expand-header{border-radius:7px 7px 0 0;background:#f0ede4;}
.hs-expand-header:hover{background:#fdefd4;}
.hs-expand-hname{flex:1;font-size:12px;font-weight:600;color:var(--forest);}
.hs-expand-hsp{font-size:10px;color:var(--sage);font-weight:600;white-space:nowrap;}
.hs-expand-chevron{font-size:14px;color:var(--sage);transition:transform .2s;flex-shrink:0;}
.hs-expand-item.active .hs-expand-chevron{transform:rotate(90deg);}
.hs-expand-detail{display:none;padding:10px 10px 8px;border-top:1px solid var(--card-border);}
.hs-expand-item.active .hs-expand-detail{display:block;}
/* Hotspot tooltip above pin */
.hs-tooltip{background:rgba(30,58,20,0.92);color:var(--fern);font-size:11px;font-family:'Nunito',sans-serif;padding:4px 9px;border-radius:5px;white-space:nowrap;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,0.2);}
#trail-panel{position:absolute;top:0;right:-400px;z-index:850;width:360px;height:100%;background:white;box-shadow:-4px 0 24px rgba(0,0,0,0.12);display:flex;flex-direction:column;transition:right .3s ease;overflow:hidden;}
#trail-panel.visible{right:0;}
#trail-panel-handle{background:var(--forest);padding:12px 14px;display:flex;align-items:center;gap:10px;flex-shrink:0;}
#trail-panel-body{overflow-y:auto;flex:1;padding:10px 12px;}
#trail-panel-body::-webkit-scrollbar{width:4px;}
#trail-panel-body::-webkit-scrollbar-thumb{background:var(--fern);border-radius:2px;}
.tp-radius-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--card-border);}
.tp-trail-item{border-radius:8px;margin-bottom:5px;border:1px solid transparent;overflow:hidden;transition:border-color .15s;}
.tp-trail-item.active{border-color:var(--amber);}
.tp-trail-item.map-hovered .tp-trail-header{background:#fdefd4;}
.tp-trail-header{display:flex;align-items:center;padding:8px 10px;background:var(--parchment);cursor:pointer;gap:8px;transition:background .15s;border-radius:7px;}
.tp-trail-item.active .tp-trail-header{background:#fdefd4;border-radius:7px 7px 0 0;}
.tp-trail-header:hover{background:#fdefd4;}
.tp-trail-type{flex-shrink:0;width:22px;display:flex;align-items:center;justify-content:center;}
.tt-icon{width:16px;height:16px;stroke:var(--sage);flex-shrink:0;}
.tp-trail-hinfo{flex:1;min-width:0;}
.tp-trail-hname{font-size:12px;font-weight:500;color:var(--forest);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tp-trail-hmeta{display:flex;gap:6px;align-items:center;margin-top:2px;flex-wrap:wrap;}
.tp-trail-hmiles{font-size:10px;color:var(--forest);font-weight:600;white-space:nowrap;}
.tp-trail-htime{font-size:10px;color:var(--sage);white-space:nowrap;}
.tp-trail-hsurface{font-size:9px;color:var(--text-muted);white-space:nowrap;}
.tp-trail-hloop{font-size:9px;color:var(--amber);font-weight:600;white-space:nowrap;}
.tp-trail-hdist{font-size:9px;color:var(--text-muted);margin-top:1px;}
.tp-trail-chevron{font-size:14px;color:var(--sage);transition:transform .2s;flex-shrink:0;}
.tp-trail-item.active .tp-trail-chevron{transform:rotate(90deg);}
.tp-trail-detail{display:none;padding:10px 10px 8px;background:white;border-top:1px solid var(--card-border);}
.tp-trail-item.active .tp-trail-detail{display:block;}
.tp-detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:10px;}
.tp-detail-stat{background:var(--parchment);border-radius:6px;padding:5px 4px;text-align:center;}
.tp-detail-stat-v{font-size:13px;font-weight:700;color:var(--forest);font-family:'Cabin',sans-serif;}
.tp-detail-stat-l{font-size:8px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}
.tp-detail-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px;}
.tp-tag{display:inline-flex;align-items:center;gap:3px;font-size:10px;color:var(--text-mid);background:var(--parchment);border:1px solid var(--card-border);border-radius:10px;padding:2px 8px;white-space:nowrap;}
.tp-tag .tt-icon{width:12px;height:12px;}
.tp-directions-btn{display:flex;align-items:center;gap:6px;width:100%;padding:8px 12px;background:var(--forest);color:var(--fern);border:none;border-radius:8px;font-size:12px;font-family:'Nunito',sans-serif;font-weight:600;text-decoration:none;cursor:pointer;margin-bottom:8px;transition:background .15s;justify-content:center;}
.tp-directions-btn:hover{background:var(--forest-mid);}
.tp-directions-btn svg{stroke:var(--fern);flex-shrink:0;}
.tp-detail-section{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:600;margin-bottom:5px;margin-top:8px;}
.tp-detail-bird-row{display:flex;align-items:center;padding:3px 0;border-bottom:1px solid #f0ede6;font-size:11px;gap:5px;}
.tp-detail-bird-row:last-child{border-bottom:none;}
.tp-detail-bird-name{font-style:italic;color:var(--text-mid);flex:1;}
.tp-detail-bird-count{font-size:10px;color:var(--sage);font-weight:600;}
.tp-detail-bird-date{font-size:10px;color:var(--text-muted);}
.tp-month-wrap{display:flex;flex-direction:column;gap:2px;}
.tp-month-bars{display:flex;gap:2px;height:28px;align-items:flex-end;}
.tp-mbar{flex:1;background:var(--moss);border-radius:2px 2px 0 0;opacity:.65;min-height:2px;}
.tp-mbar.current{background:var(--amber);opacity:1;}
.tp-mlabels{display:flex;gap:2px;}
.tp-mlabel{flex:1;font-size:7px;color:var(--text-muted);text-align:center;}
.tp-empty{font-size:11px;color:var(--text-muted);padding:20px 0;text-align:center;}
.hs-trails-btn{background:none;border:none;cursor:pointer;font-family:'Nunito',sans-serif;width:100%;text-align:center;padding:0;}
.tp-section{margin-bottom:14px;}
.tp-section-label{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:600;margin-bottom:6px;}
.tp-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px;}
.tp-stat{background:var(--parchment);border-radius:6px;padding:7px 6px;text-align:center;}
.tp-stat-v{font-size:14px;font-weight:600;color:var(--forest);font-family:'Cabin',sans-serif;}
.tp-stat-l{font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}
.tp-bird-row{display:flex;align-items:center;padding:4px 0;border-bottom:1px solid #f0ede6;font-size:11px;gap:6px;}
.tp-bird-row:last-child{border-bottom:none;}
.tp-bird-name{font-style:italic;color:var(--text-mid);flex:1;}
.tp-bird-date{font-size:10px;color:var(--text-muted);}
.tp-elevation{width:100%;height:80px;background:var(--parchment);border-radius:6px;overflow:hidden;}
.tp-month-bar{display:flex;align-items:flex-end;gap:2px;height:40px;}
.tp-mbar{flex:1;background:var(--moss);border-radius:2px 2px 0 0;opacity:0.7;transition:opacity .15s;}
.tp-mbar:hover{opacity:1;}
.tp-month-labels{display:flex;gap:2px;margin-top:2px;}
.tp-mlabel{flex:1;font-size:7px;color:var(--text-muted);text-align:center;}
#panel-handle{background:var(--forest);padding:10px 13px 9px;cursor:grab;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
#panel-handle:active{cursor:grabbing;}
.panel-drag-hint{font-size:9px;color:rgba(181,212,160,0.4);letter-spacing:.05em;text-transform:uppercase;margin-top:2px;}
#panel-close{background:none;border:none;color:rgba(181,212,160,0.6);font-size:18px;cursor:pointer;line-height:1;padding:0;flex-shrink:0;margin-top:-2px;}
#panel-close:hover{color:var(--fern);}
.popup-body{padding:11px 13px;overflow-y:auto;max-height:340px;}
.popup-section-label{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:500;margin-bottom:5px;}
.popup-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:9px;}
.ps{background:var(--parchment);border-radius:6px;padding:5px 4px;text-align:center;cursor:pointer;border:1.5px solid transparent;transition:background .15s,border-color .15s;}
.ps:hover{background:#fdefd4;border-color:var(--amber);}
.ps.ps-active{background:#fdefd4;border-color:var(--amber);}
.ps.ps-active-rare{background:#fde0d0;border-color:var(--rust);}
.ps-v{font-size:13px;font-weight:500;color:var(--forest);line-height:1;}
.ps-l{font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;}
.bird-panel{margin-bottom:8px;border-top:1px solid var(--card-border);padding-top:8px;}
.bird-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid #f0ede6;font-size:11px;}
.bird-row:last-child{border-bottom:none;}
.bird-name{color:var(--text-mid);font-style:italic;flex:1;padding-right:6px;}
.bird-count{font-size:10px;color:var(--sage);font-weight:500;margin-right:6px;white-space:nowrap;}
.bird-date{font-size:10px;color:var(--text-muted);white-space:nowrap;}
.bird-more{font-size:10px;color:var(--text-muted);text-align:center;padding:5px 0 2px;}
.bird-more a{color:var(--sage);text-decoration:none;}
.bird-more a:hover{text-decoration:underline;}
.bird-loading{font-size:11px;color:var(--text-muted);padding:8px 0;text-align:center;}
.bird-rare-badge{font-size:9px;font-weight:600;padding:2px 6px;border-radius:3px;background:#fde0d0;color:#7a2510;margin-right:4px;flex-shrink:0;}
.popup-btn{width:100%;margin-top:9px;padding:7px;background:var(--forest);color:var(--fern);border:none;border-radius:7px;font-size:12px;font-family:'Nunito',sans-serif;font-weight:500;cursor:pointer;transition:background .15s;}
.popup-btn:hover{background:var(--forest-mid);}
.nearest-trail-box{padding:7px 9px;background:var(--parchment);border-radius:7px;margin-bottom:4px;display:flex;align-items:center;gap:7px;cursor:pointer;transition:background .15s,border-color .15s;border:1px solid transparent;}
.nearest-trail-box:hover{background:#fdefd4;border-color:var(--amber);}
.nearest-trail-box.map-hovered{background:#fdefd4;border-color:var(--amber);}
.nearest-trail-box.selected{background:var(--fern);border-color:var(--sage);}
.nearest-trail-box.selected span{color:var(--forest);font-weight:600;}
/* Trail prompt button — tab on right edge of map */
.trail-tab{
  position:absolute;
  top:50%;
  right:0;
  transform:translateY(-50%);
  z-index:810;
  background:var(--forest);
  color:var(--fern);
  border:2px solid var(--sage);
  border-right:none;
  border-radius:10px 0 0 10px;
  padding:10px 12px 10px 10px;
  font-size:12px;
  font-family:'Nunito',sans-serif;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:5px;
  box-shadow:-3px 2px 12px rgba(0,0,0,0.2);
  transition:background .15s;
}
.trail-tab:hover{ background:var(--forest-mid); }
.trail-prompt-btn{
  position:absolute;
  top:50%;
  right:0;
  transform:translateY(-50%);
  z-index:810;
  background:var(--forest);
  color:var(--fern);
  border:2px solid var(--sage);
  border-right:none;
  border-radius:10px 0 0 10px;
  padding:12px 14px 12px 12px;
  font-size:13px;
  font-family:'Nunito',sans-serif;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  box-shadow:-4px 2px 16px rgba(0,0,0,0.25);
  transition:background .15s, padding-right .15s;
}
.trail-prompt-btn:hover{ background:var(--forest-mid); padding-right:20px; }
.trail-prompt-pulse{
  animation: trailPromptPulse 0.6s ease-in-out 3;
}
@keyframes trailPromptPulse{
  0%,100%{ box-shadow:-4px 2px 16px rgba(0,0,0,0.25); }
  50%{ box-shadow:-4px 2px 20px rgba(74,124,89,0.6), 0 0 0 4px rgba(74,124,89,0.15); }
}

/* Container passes clicks through so hotspot pins that end up under it
   stay clickable. Individual .map-ctl buttons re-enable events below. */
#map-controls{position:absolute;top:14px;right:14px;z-index:800;display:flex;flex-direction:column;gap:6px;pointer-events:none;}
#map-controls > *{pointer-events:auto;}
.map-ctl{width:36px;height:36px;background:white;border:1px solid var(--card-border);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:var(--forest);box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:background .15s;}
/* Touch-target guard (P1 2026-04-17): tablets + phones get 44×44 */
@media(max-width:768px){
  .map-ctl{width:44px;height:44px;}
  .layer-btn{min-width:44px;min-height:44px;}
}
.map-ctl:hover{background:var(--parchment);}
#stats-bar{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:800;display:flex;gap:6px;pointer-events:none;}
.stat-pill{background:white;border:1px solid var(--card-border);border-radius:20px;padding:5px 12px;font-size:11px;color:var(--text-mid);box-shadow:0 2px 8px rgba(0,0,0,0.08);display:flex;align-items:center;gap:4px;white-space:nowrap;}
.stat-pill strong{color:var(--forest);font-weight:500;}
.stat-pill .dot{width:7px;height:7px;border-radius:50%;}
.stat-county{background:var(--forest);border-color:var(--forest);}
.stat-county strong{color:var(--fern);font-family:'Cabin',sans-serif;font-size:12px;}
/* Zoom display — bottom left of map */
/* Legend is purely informational — no interactive children, so pass all
   clicks through. Otherwise hotspot pins in the bottom-left corner become
   unclickable when they render under the legend's opaque background. */
#legend{position:absolute;bottom:8px;left:14px;z-index:800;background:white;border:1px solid var(--card-border);border-radius:var(--radius);padding:9px 13px;box-shadow:0 2px 12px rgba(0,0,0,0.1);pointer-events:none;}
.leg-updated{color:var(--text-muted);font-size:10px;margin-top:2px;border-top:1px solid var(--card-border);padding-top:4px;}
.leg-item{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text-mid);margin-bottom:4px;}
.leg-item:last-child{margin-bottom:0;}
.leg-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.leg-line{width:18px;height:3px;border-radius:2px;flex-shrink:0;}
@media(max-width:680px){
  #sidebar{width:100%;position:absolute;bottom:0;left:0;right:0;z-index:900;height:55%;}
  #map-wrap{height:45%;}#app{flex-direction:column-reverse;}
}
/* Pin hover state when mousing over sidebar card */
.pin-hovered > div {
  transform: scale(1.25) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45) !important;
  transition: transform 0.1s, box-shadow 0.1s;
}

/* Zoom level in legend */
.leg-zoom{ color:var(--text-muted);font-size:10px;margin-top:2px;border-top:1px solid var(--card-border);padding-top:4px; }
.leg-zoom span{ font-weight:700;color:var(--text-mid); }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — bottom sheet layout (≤680px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:680px){

  /* ── Header adjustments for mobile map ── */
  header{padding:8px 12px;}

  /* ── App layout ── */
  #app{
    flex-direction:column;
    overflow:hidden;
    position:relative;
  }

  /* ── Map — fills top portion, sized by JS sheet height ── */
  #map-wrap{
    position:absolute;
    top:0;left:0;right:0;
    /* height set dynamically by bottom sheet position */
    height:55%;
    z-index:1;
  }

  /* ── Bottom sheet ── */
  #sidebar{
    position:absolute;
    bottom:0;left:0;right:0;
    width:100%;
    z-index:900;
    background:var(--panel-bg);
    border-radius:14px 14px 0 0;
    border-right:none;
    border-top:1px solid var(--card-border);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    /* height controlled by JS via --sheet-h CSS var */
    height:var(--sheet-h, 45%);
    transition:height 0.3s cubic-bezier(0.32,0.72,0,1);
    will-change:height;
  }
  #sidebar.sheet-animating{ transition:height 0.3s cubic-bezier(0.32,0.72,0,1); }
  #sidebar.sheet-dragging{ transition:none; }

  /* Drag handle — sits above filters. Slim band; the bar is the affordance. */
  #sheet-handle{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:8px 12px 4px;
    cursor:grab;
    flex-shrink:0;
    touch-action:none;
    user-select:none;
  }
  #sheet-handle:active{ cursor:grabbing; }
  #sheet-handle-bar{
    width:36px;height:4px;
    background:rgba(74,124,89,0.35);
    border-radius:2px;
    margin-bottom:3px;
  }

  /* Sheet snap labels (peek / mid / full) — always informative */
  #sheet-state-label{
    font-size:11px;
    color:var(--text-mid);
    font-weight:500;
    letter-spacing:.01em;
    line-height:1.2;
    max-width:88vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    transition:opacity .2s;
  }
  #sheet-state-label:empty{ display:none; }

  /* Filters: horizontally scrollable */
  #filters{
    padding:6px 12px 8px;
    overflow-x:auto;
    overflow-y:hidden;
    flex-shrink:0;
    /* hide scrollbar */
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  #filters::-webkit-scrollbar{ display:none; }

  /* Turn the vertical filter layout into a horizontal scroll row */
  #filters > .filter-label{ display:none; } /* hide "SHOW HOTSPOTS" labels */
  #filters .chip-row{
    display:inline-flex;
    flex-wrap:nowrap;
    gap:6px;
    margin-bottom:0;
    white-space:nowrap;
  }
  /* Chip rows scroll horizontally, radius dropdown on its own line below */
  #filters{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  #filters .chip-row{ flex-shrink:0; }
  /* Radius row: own line below filter chips */
  #filters .chip-row:last-child{
    flex-shrink:0;
  }
  .radius-select{ font-size:11px;padding:2px 5px; }

  /* Results header */
  #results-header{
    padding:4px 12px 6px;
    flex-shrink:0;
  }

  /* Results list — scrollable in sheet */
  #results{
    padding:4px 8px 80px; /* bottom pad so last card isn't behind home indicator */
    overflow-y:auto;
    flex:1;
    -webkit-overflow-scrolling:touch;
  }

  /* Trail cards: slightly more compact */
  .trail-card{ padding:10px 11px;margin-bottom:5px; }
  .card-name{ font-size:13px; }

  /* ── Trail panel — full-screen overlay on mobile ── */
  #trail-panel{
    position:fixed;
    top:50px; /* below topbar */
    left:0;right:0;bottom:0;
    width:100%;
    height:auto;
    border-radius:0;
    z-index:950;
    transform:translateX(100%);
    transition:transform .3s ease;
  }
  #trail-panel.visible{
    transform:translateX(0);
  }
  /* Trail panel handle area: add back button */
  #trail-panel-handle{
    padding:12px 14px;
    position:relative;
  }

  /* Trail tab: smaller on mobile */
  .trail-tab{ padding:8px 6px;font-size:10px; }

  /* ── Legend — horizontal bar pinned below header, clear of map controls ── */
  #legend{
    top:0;left:0;right:60px;bottom:auto;
    display:flex;flex-direction:row;align-items:center;
    gap:12px;padding:5px 10px;font-size:10px;
    border-radius:0 0 8px 0;
    overflow-x:auto;white-space:nowrap;
    -webkit-overflow-scrolling:touch;
  }
  #legend .leg-item{margin-bottom:0;flex-shrink:0;}
  #legend .leg-full{display:none;}
  #legend .leg-updated{display:none;}
  #legend .leg-zoom{
    margin-top:0;border-top:none;padding-top:0;
    border-left:1px solid var(--card-border);
    padding-left:12px;flex-shrink:0;
  }

  /* ── Zoom hint ── */
  #zoom-hint{ top:56px; }

  /* ── Stats bar — hidden on mobile (sidebar conveys same info) ── */
  #stats-bar{ display:none; }

  /* ── Map controls — 44px touch targets per WCAG AAA / Apple HIG ── */
  #map-controls{ top:10px;right:10px;gap:8px; }
  .map-ctl{ width:44px;height:44px;font-size:16px; }

  /* ── Filter chips — 44px tall touch targets (mobile P1 2026-04-17) ── */
  .chip{ padding:11px 14px;font-size:12px;min-height:44px; }

  /* ── Error banner ── */
  #error-banner{ top:10px;font-size:10px;padding:6px 14px; }

  /* County cards: more compact */
  .county-card{ padding:8px 11px; }
  .county-card-name{ font-size:12px; }
  .county-card-meta span{ font-size:10px; }

  /* Hotspot expanded: stat row */
  .hs-active-stat-row{ gap:4px; }
  .hs-active-stat{ padding:6px 3px; }
  .hs-stat-v{ font-size:12px; }

  /* Rare cards */
  .rare-card-header{ padding:8px 11px 7px; }
  .rare-card-body{ padding:8px 11px; }

  /* Sort select — 16px to avoid iOS zoom-on-focus (mobile P1 2026-04-17) */
  .sort-select{ font-size:16px; }
  /* Radius select on the parks-nearby panel — same iOS-zoom guard */
  #parks-nearby-radius{ font-size:16px; }

  /* Feedback modal full-screen */
  #feedback-dialog{
    width:100%;max-width:none;
    border-radius:16px 16px 0 0;
  }
  #feedback-modal{ align-items:flex-end; }
}
/* ══════════════════════════════════════════════════════════════════════════
   MAP.CSS ADDITIONS — Append to end of map.css
   Unified colors for filter chips matching county dots and hotspot markers
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Filter chips with category colors ── */
.chip-high.on { background: #2d5c30; color: #a8dca0; border-color: #4a9c5a; }
.chip-high:hover { border-color: #4a9c5a; background: rgba(74,156,90,0.1); }

.chip-recent.on { background: #5c3a10; color: #f2c27a; border-color: #d4822a; }
.chip-recent:hover { border-color: #d4822a; background: rgba(212,130,42,0.1); }

.chip-rare.on { background: #5c1a10; color: #f2a090; border-color: #c0392b; }
.chip-rare:hover { border-color: #c0392b; background: rgba(192,57,43,0.1); }

/* ── Stats bar pill colors ── */
.stat-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.stat-pill.stat-high .dot { background: #4a9c5a; }
.stat-pill.stat-recent .dot { background: #d4822a; }
.stat-pill.stat-rare .dot { background: #c0392b; }
/* stat-location removed — county label is now its own element */

/* ── Legend dot colors (consistency) ── */
.leg-dot.dot-high { background: #4a9c5a; }
.leg-dot.dot-recent { background: #d4822a; }
.leg-dot.dot-rare { background: #c0392b; }

/* ── Feed Map Mode ── */
#feed-map-banner {
  background: var(--forest, #1a3a2a);
  color: #fff;
  padding: 10px 16px;
  z-index: 1000;
  position: relative;
}
.feed-map-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 14px;
  font-weight: 600;
  gap: 12px;
  flex-wrap: wrap;
}
.feed-map-banner-actions {
  display: flex;
  gap: 8px;
}
.feed-map-btn {
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  transition: background 0.15s;
}
.feed-map-btn:hover {
  background: rgba(255,255,255,0.1);
}
.feed-map-btn-primary {
  background: var(--sage, #4a7c3f);
  border-color: var(--sage, #4a7c3f);
}
.feed-map-btn-primary:hover {
  background: var(--forest-mid, #2d5a3a);
}
.feed-map-popup {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  line-height: 1.5;
}
.feed-map-popup-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--forest, #1a3a2a);
  margin-bottom: 2px;
}
.feed-map-popup-region {
  font-size: 12px;
  color: #666;
  margin-bottom: 6px;
}
.feed-map-popup-species {
  margin-bottom: 8px;
}
.feed-map-popup-link {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--sage, #4a7c3f);
  text-decoration: none;
}
.feed-map-popup-link:hover {
  text-decoration: underline;
}

/* ── Landscape phone: sheet shouldn't swallow the map (P1 2026-04-17) ──
   In landscape on a phone (e.g. 667×375 iPhone rotated), the bottom sheet
   expanding to ~55% vertical leaves only a narrow map strip. Compress it
   hard and let users expand deliberately. */
@media (orientation: landscape) and (max-height: 500px) {
  #sheet:not(.expanded),
  .map-sheet:not(.expanded) { max-height: 40vh; max-height: 40dvh; }
  #map-wrap { height: 60%; min-height: 60%; }
}