:root{--teal:#092B38;--green:#75A739;--white:#fff;--ink:#0b1a20;--red:#b3261e;--gray:#5b6b70}
*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:17px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--white)}
.skip{position:absolute;left:-999px;top:0;background:var(--white);color:var(--teal);padding:12px;z-index:100}
.skip:focus{left:8px;top:8px}
.site-header{position:relative;background:var(--teal);color:var(--white);padding:14px 16px 12px;border-bottom:6px solid var(--green)}
.brand{margin:0;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
h1{margin:2px 0 0;font-size:1.75rem;line-height:1.15;display:flex;align-items:center;gap:10px}
.h1-mark{width:40px;height:40px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.subtitle{margin:4px 0 0;font-size:1rem}
.layout{display:block}
.map-wrap{margin:0}
.map{position:relative;width:100%;line-height:0;background:#cfd8d3}
.map img{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:fill}
.markers{position:absolute;inset:0}
.marker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
  border:3px solid var(--white);background:var(--teal);color:var(--white);font:800 18px/1 system-ui,sans-serif;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  box-shadow:0 0 0 2px var(--teal),0 2px 6px rgba(0,0,0,.6)}
.marker:hover{background:#0f4459}
.marker[aria-pressed="true"]{background:var(--green);color:var(--teal);border-color:var(--white);box-shadow:0 0 0 3px var(--teal),0 0 0 7px var(--white),0 2px 8px rgba(0,0,0,.6);z-index:2}
.marker:focus-visible,button:focus-visible,a:focus-visible{outline:4px solid #ffd400;outline-offset:2px}
.hint{margin:0;padding:8px 16px;font-size:.9rem;color:var(--gray);line-height:1.4;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px}
.replay{min-height:44px;padding:0 4px;border:0;background:none;color:var(--teal);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.replay[hidden]{display:inline-block;visibility:hidden}
/* Flyover intro: the video and the photo use the SAME crop (x 680-3080, y 240-2160 of the 3842x2160 drone frame, 5:4)
   and the video's held last frame is the photo, so the video simply sits on top of the photo box (same size, same
   object-fit, no transforms) and crossfades away. */
.map{overflow:hidden}
.map picture{display:block}
.intro{position:absolute;inset:0;z-index:3}
.intro[hidden]{display:none}
.intro-stage{position:absolute;inset:0}
.intro-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;background:#cfd8d3}
.map.intro-on:not(.intro-fade) picture{opacity:0}
.map.intro-fade .intro-stage video{opacity:0;transition:opacity .3s linear}
.map.intro-fade .skip-intro{opacity:0;pointer-events:none;transition:opacity .2s}
.skip-intro{position:absolute;right:10px;bottom:10px;min-height:44px;min-width:44px;padding:0 16px;border:2px solid var(--white);
  background:rgba(9,43,56,.82);color:var(--white);font:700 16px/1 system-ui,sans-serif;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.4)}
.skip-intro:hover{background:var(--teal)}
.map.markers-hidden .markers{visibility:hidden}
.map.markers-pop .marker{animation:pop .42s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i,0) * 60ms)}
@keyframes pop{from{opacity:0;transform:translate(-50%,-50%) scale(.2)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.map.markers-pop .marker{animation:none}.map.intro-fade .intro-stage video{transition:none}}
/* v5: tap-to-focus. The photo layer is transformed only while a plant is in focus (none at rest, so the intro
   handoff is untouched). Markers are positioned with the `translate` property and glide on the same timing. */
.zoom-layer{transform-origin:0 0;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.map.focused .zoom-layer{will-change:transform}
.map img{-webkit-user-drag:none}
.map.use-translate .marker,.map.use-translate .pin-dot{left:0;top:0}
.marker,.pin-dot{transition:translate .45s cubic-bezier(.4,0,.2,1),left .45s cubic-bezier(.4,0,.2,1),top .45s cubic-bezier(.4,0,.2,1),opacity .3s,visibility 0s}
.marker.off{visibility:hidden;opacity:0;transition:translate .45s cubic-bezier(.4,0,.2,1),left .45s cubic-bezier(.4,0,.2,1),top .45s cubic-bezier(.4,0,.2,1),opacity .3s,visibility 0s linear .45s}
.marker.nudged{z-index:1}
.map.focused .marker:not([aria-pressed="true"]){opacity:.65}
.marker[aria-pressed="true"]::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid var(--white);pointer-events:none;animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.95}70%{opacity:0}100%{transform:scale(1.7);opacity:0}}
.map.no-anim .zoom-layer,.map.no-anim .marker,.map.no-anim .pin-dot{transition:none!important}
.north{transition:opacity .25s,visibility 0s}
.map.focused .north{opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s linear .25s}
.marker.off{visibility:hidden}
.pin-dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--white);border:2px solid var(--teal);display:none;pointer-events:none}
.pin-dot.on{display:block}
.map.intro-on .north,.map.markers-hidden .north{display:none}
@media (prefers-reduced-motion:reduce){.zoom-layer,.marker,.pin-dot{transition:none!important}.marker[aria-pressed="true"]::after{animation:none;opacity:.8}}
/* v4: north arrow (hidden unless confirmed) */
.north{position:absolute;left:8px;top:8px;z-index:2;width:52px;height:52px;background:rgba(255,255,255,.92);border:2px solid var(--teal);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;pointer-events:none}
.north[hidden]{display:none}
.north svg{width:48px;height:48px}
.north span{font:800 12px/1 system-ui,sans-serif;color:var(--teal);margin-top:1px}
/* v4: native / invasive colours. TBD keeps the teal look. */
.marker.native{background:var(--green);color:var(--teal);box-shadow:0 0 0 2px var(--teal),0 2px 6px rgba(0,0,0,.6)}
.marker.native:hover{background:#86b94a}
.marker.invasive{background:var(--red);color:var(--white);border-style:dashed;box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--red),0 2px 6px rgba(0,0,0,.6)}
.marker.invasive:hover{background:#8f1d17}
.marker .cue{position:absolute;right:-9px;top:-9px;width:20px;height:20px;border-radius:50%;background:var(--white);color:var(--red);
  border:2px solid var(--red);font:900 13px/16px system-ui,sans-serif;text-align:center}
.marker.native[aria-pressed="true"]{background:var(--green);color:var(--teal)}
.marker.invasive[aria-pressed="true"]{background:var(--red);color:var(--white)}
.pin-dot.native{border-color:var(--green)}
.pin-dot.invasive{border-color:var(--red)}
.plant-list .n.native{background:var(--green);color:var(--teal)}
.plant-list .n.invasive{background:var(--red);color:var(--white)}
.legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:10px 16px 2px}
.legend[hidden]{display:none}
.legend-keys{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.9rem;color:var(--ink)}
.legend-keys li{display:flex;align-items:center;gap:6px}
.legend-keys li[hidden]{display:none}
.legend .k{width:18px;height:18px;border-radius:50%;border:2px solid var(--white);box-shadow:0 0 0 2px var(--teal);display:inline-flex;align-items:center;justify-content:center;font:900 11px/1 system-ui,sans-serif}
.legend .k.native{background:var(--green)}
.legend .k.invasive{background:var(--red);color:var(--white);border-style:dashed;box-shadow:0 0 0 2px var(--red)}
.legend .k.tbd{background:var(--teal)}
.filter{display:flex}
.filter button{min-height:40px;padding:0 14px;border:2px solid var(--teal);background:var(--white);color:var(--teal);font:700 .9rem system-ui,sans-serif;cursor:pointer}
.filter button+button{border-left:0}
.filter button[aria-pressed="true"]{background:var(--teal);color:var(--white)}
.plant-list li[hidden]{display:none}
/* v4: add-to-home-screen tip */
.a2hs{position:fixed;left:8px;right:8px;bottom:8px;z-index:40;display:flex;align-items:center;gap:10px;padding:10px 6px 10px 12px;
  background:var(--white);color:var(--ink);border:2px solid var(--teal);border-top:5px solid var(--green);box-shadow:0 4px 18px rgba(0,0,0,.35);
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
.a2hs[hidden]{display:none}
.a2hs-icon{flex:none;width:36px;height:36px}
.a2hs-text{margin:0;flex:1;font-size:.92rem;line-height:1.35}
.share-glyph{width:15px;height:18px;vertical-align:-3px;color:#0a6cff;margin:0 1px}
.a2hs-install{flex:none;min-height:44px;padding:0 14px;border:2px solid var(--teal);background:var(--teal);color:var(--white);font:800 .95rem system-ui,sans-serif;cursor:pointer}
.a2hs-close{flex:none;width:44px;height:44px;border:0;background:none;color:var(--teal);font-size:28px;line-height:1;cursor:pointer}
body.sheet-open .a2hs{display:none}
@media (min-width:900px){.a2hs{left:auto;right:16px;max-width:420px}}
/* Card: bottom sheet on mobile */
.card{position:fixed;left:0;right:0;bottom:0;z-index:50;max-height:72vh;overflow:auto;background:var(--white);
  border-top:6px solid var(--green);padding:16px 16px 20px;box-shadow:0 -6px 24px rgba(0,0,0,.35)}
.card[hidden]{display:none}
.card-close{position:absolute;top:6px;right:6px;width:48px;height:48px;border:2px solid var(--teal);background:var(--white);color:var(--teal);font-size:30px;line-height:1;cursor:pointer}
.card-num{margin:0;font-weight:800;color:var(--teal);font-size:.9rem;letter-spacing:.05em;text-transform:uppercase}
.card h2{margin:2px 56px 0 0;font-size:1.5rem;line-height:1.2;color:var(--teal)}
.card-sci{margin:2px 0 0;font-style:italic;color:var(--gray)}
.card-sci:empty{display:none}
.tag{display:inline-block;margin:10px 0 0;padding:4px 10px;font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;border:2px solid currentColor}
.tag.native{background:var(--green);color:var(--teal);border-color:var(--green)}
.tag.invasive{background:var(--red);color:var(--white);border-color:var(--red)}
.tag.tbd{background:var(--white);color:var(--teal)}
.photo{margin:12px 0 0}
.photo img{display:block;width:100%;height:auto;max-height:240px;object-fit:cover}
.photo .ph{display:flex;align-items:center;justify-content:center;height:96px;border:2px dashed #9aa9ad;color:var(--gray);font-size:.9rem;background:#f3f6f5}
.card-blurb{margin:12px 0 0}
.card-nav{display:flex;gap:10px;margin-top:16px}
.card-nav button{flex:1;min-height:48px;border:2px solid var(--teal);background:var(--teal);color:var(--white);font:700 1rem system-ui,sans-serif;cursor:pointer}
.card-nav button:hover{background:#0f4459}
/* List */
.list-wrap{padding:8px 16px 24px}
.list-wrap h2{font-size:1.25rem;color:var(--teal);margin:8px 0 10px}
.plant-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--teal)}
.plant-list li{border-bottom:1px solid #c7d1d3}
.plant-list button{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 4px;border:0;background:none;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.plant-list button:hover{background:#eef4e6}
.plant-list button[aria-pressed="true"]{background:#e3efd4}
.plant-list .n{flex:0 0 36px;height:36px;border-radius:50%;background:var(--teal);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:800}
.plant-list button[aria-pressed="true"] .n{background:var(--green);color:var(--teal)}
.plant-list .t{display:block;font-weight:700}
.plant-list .s{display:block;font-size:.85rem;color:var(--gray)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* AWE footer */
.site-footer{background:var(--teal);color:var(--white);padding:18px 16px 14px;font-size:.95rem;border-top:6px solid var(--green)}
.site-footer p{margin:0}
.foot-line{font-weight:700;font-size:1.02rem;line-height:1.35}
.foot-btns{display:flex;gap:10px;margin:14px 0 6px;flex-wrap:wrap}
.site-footer .btn{flex:1 1 0;min-width:120px;max-width:220px;display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;
  font:800 1rem/1 system-ui,sans-serif;text-decoration:none;letter-spacing:.02em;border:2px solid var(--green)}
.btn-donate{background:var(--green);color:var(--teal)}
.btn-donate:hover{background:#86b94a}
.btn-volunteer{background:transparent;color:var(--white)}
.btn-volunteer:hover{background:rgba(117,167,57,.2)}
.foot-meta{font-size:.85rem;color:#c9d6d9}
.foot-meta a{color:var(--white);font-weight:700;display:inline-block;padding:10px 0;min-height:44px;text-decoration-color:var(--green);text-underline-offset:3px}
.foot-meta .sep{margin:0 8px}
body.sheet-open .list-wrap,body.sheet-open .site-footer{padding-bottom:var(--sheet-h,0)}
body.has-tip .site-footer{padding-bottom:calc(var(--tip-h,80px) + 14px)}
/* Desktop: side panel */
@media (min-width:900px){
  .layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"map card" "list card";align-items:start}
  .map-wrap{grid-area:map}
  .list-wrap{grid-area:list}
  .card{grid-area:card;position:sticky;top:0;max-height:100vh;box-shadow:none;border-top:0;border-left:6px solid var(--green);padding:20px 20px 24px;align-self:start;min-height:100vh}
  .card[hidden]{display:block}
  .card.empty>*{display:none}
  .card.empty::before{content:attr(data-empty);display:block;color:var(--gray);font-size:1.05rem;padding-top:8px}
  body.sheet-open .list-wrap,body.sheet-open .site-footer{padding-bottom:inherit}
}
@media (prefers-reduced-motion:no-preference){.card{animation:up .18s ease-out}@keyframes up{from{transform:translateY(20px);opacity:.6}to{transform:none;opacity:1}}}
@media (min-width:900px){.card{animation:none}}
/* v6: language toggle, season banner, share, toast */
.lang-btn{position:absolute;top:10px;right:10px;min-height:40px;min-width:44px;padding:0 12px;border:2px solid var(--green);background:transparent;color:var(--white);
  font:700 .9rem system-ui,sans-serif;cursor:pointer}
.lang-btn:hover{background:rgba(117,167,57,.25)}
.site-header .brand{padding-right:96px}
.season{margin:0;padding:8px 16px;background:#eef4e6;border-bottom:2px solid var(--green);color:var(--teal);font-size:.95rem;line-height:1.35}
.season[hidden]{display:none}
.season b{margin-right:4px}
.hint-actions{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap}
.share-btn{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border:2px solid var(--teal);border-bottom:4px solid var(--green);
  background:var(--teal);color:var(--white);font:700 .95rem system-ui,sans-serif;cursor:pointer}
.share-btn svg{width:15px;height:18px}
.share-btn:hover{background:#0f4459}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;padding:10px 16px;background:var(--teal);color:var(--white);
  border-left:6px solid var(--green);font:700 .95rem system-ui,sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.toast[hidden]{display:none}
/* v6: compact language button on the brand row so it never overlaps the title; ::after keeps a ~44px touch target */
.lang-btn{top:6px;right:8px;min-height:30px;padding:0 10px;font-size:.85rem;line-height:1}
.lang-btn::after{content:"";position:absolute;inset:-7px -4px}

/* ===== Polish pass: depth + rhythm (square corners throughout) ===== */
:root{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--muted:#4a5a5f;--sand:#f6f4ee;
  --lift:0 1px 2px rgba(9,43,56,.10),0 4px 14px rgba(9,43,56,.10);--lift-hi:0 2px 4px rgba(9,43,56,.14),0 12px 32px rgba(9,43,56,.22)}
body{background:var(--sand) linear-gradient(180deg,#fff 0,var(--sand) 520px) no-repeat}
/* Header: faint teal gradient + soft shadow falling onto the photo */
.site-header{z-index:7;background:linear-gradient(180deg,#0e3a4b 0%,var(--teal) 70%);box-shadow:0 3px 6px rgba(9,43,56,.18),0 10px 24px rgba(9,43,56,.20)}
h1{font-weight:800;letter-spacing:-.01em}
.subtitle{color:#d9e4e7}
/* Map frame. One vignette layer sits ABOVE both the intro video and the photo, so it is identical before and
   after the crossfade (no jump). .intro no longer makes its own stacking context; its children are layered instead. */
.map{isolation:isolate}
.intro{z-index:auto}
.intro-stage{z-index:3}
.map::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(9,43,56,.18),inset 0 0 56px rgba(0,30,40,.24)}
.markers{z-index:5}
.north{z-index:6}
.skip-intro{z-index:6}
.map-wrap{position:relative;z-index:1}
.map{box-shadow:0 2px 4px rgba(9,43,56,.12),0 10px 26px rgba(9,43,56,.20)}
/* Markers: layered shadow, pressed state, softer focus pulse */
.marker{box-shadow:0 0 0 2px var(--teal),0 1px 2px rgba(0,0,0,.45),0 4px 10px rgba(0,0,0,.35);
  transition:translate .45s cubic-bezier(.4,0,.2,1),left .45s cubic-bezier(.4,0,.2,1),top .45s cubic-bezier(.4,0,.2,1),scale .14s ease-out,opacity .3s,visibility 0s}
.marker:active{scale:.9}
.marker.native{box-shadow:0 0 0 2px var(--teal),0 1px 2px rgba(0,0,0,.45),0 4px 10px rgba(0,0,0,.35)}
.marker[aria-pressed="true"]{box-shadow:0 0 0 3px var(--teal),0 0 0 7px var(--white),0 2px 4px rgba(0,0,0,.4),0 8px 20px rgba(0,0,0,.4)}
.marker[aria-pressed="true"]::after{inset:-7px;border:2px solid rgba(255,255,255,.95);box-shadow:0 0 0 2px rgba(117,167,57,.55);animation:pulse 2s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(1.65);opacity:0}}
/* North arrow: frosted glass with a solid fallback */
.north{background:rgba(255,255,255,.94);box-shadow:0 1px 2px rgba(0,0,0,.25),0 6px 16px rgba(0,0,0,.25)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .north{background:rgba(255,255,255,.80);-webkit-backdrop-filter:blur(8px) saturate(1.3);backdrop-filter:blur(8px) saturate(1.3)}}
/* Hint row: one tidy line of actions */
.hint{padding:var(--s3) var(--s4);color:var(--muted)}
.replay{min-height:40px;padding:0 var(--s1)}
.share-btn{box-shadow:0 1px 2px rgba(9,43,56,.25),0 3px 8px rgba(9,43,56,.18);transition:background .15s,transform .1s}
.share-btn:active,.card-nav button:active,.site-footer .btn:active{transform:translateY(1px)}
/* List: a raised white panel with tactile rows */
.list-wrap{padding:var(--s2) var(--s4) var(--s5)}
.list-wrap h2{font-weight:800;letter-spacing:-.005em;margin:var(--s3) 0 var(--s3)}
.plant-list{background:var(--white);box-shadow:var(--lift)}
.plant-list li{border-bottom-color:#dde4e5}
.plant-list li:last-child{border-bottom:0}
.plant-list button{padding:var(--s2) var(--s3);transition:background .15s,box-shadow .15s}
.plant-list button:hover{background:#f2f7eb;box-shadow:inset 4px 0 0 var(--green)}
.plant-list button:active{background:#e6f0da}
.plant-list button[aria-pressed="true"]{background:#e8f2dc;box-shadow:inset 4px 0 0 var(--green)}
.plant-list .n{box-shadow:0 1px 2px rgba(9,43,56,.3)}
.plant-list .s,.card-sci,.photo .ph{color:var(--muted)}
/* Card / bottom sheet: clear elevation, scrim above it on phones, eased slide-up */
.card{box-shadow:0 -2px 6px rgba(9,43,56,.14),0 -14px 36px rgba(9,43,56,.30)}
.card-nav button{box-shadow:0 1px 2px rgba(9,43,56,.25),0 3px 8px rgba(9,43,56,.16);transition:background .15s,transform .1s}
.card-close{box-shadow:0 1px 3px rgba(9,43,56,.18)}
@media (max-width:899px){
  body.sheet-open::after{content:"";position:fixed;left:0;right:0;bottom:var(--sheet-h,0);height:44px;z-index:49;pointer-events:none;
    background:linear-gradient(to top,rgba(9,43,56,.16),rgba(9,43,56,0))}}
@media (prefers-reduced-motion:no-preference){.card{animation:up .3s cubic-bezier(.22,1,.36,1)}
  @keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}}
/* Footer: gradient band with a thin top highlight under the green rule */
.site-footer{background:linear-gradient(180deg,#0c3645 0%,var(--teal) 55%,#07222c 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.site-footer .btn{box-shadow:0 1px 2px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.22);transition:background .15s,transform .1s}
.a2hs{box-shadow:0 2px 4px rgba(9,43,56,.18),0 12px 32px rgba(9,43,56,.30)}
.toast{box-shadow:0 2px 4px rgba(0,0,0,.2),0 10px 24px rgba(0,0,0,.3)}
/* Desktop: the photo and the plant panel sit on the page as two raised surfaces */
@media (min-width:900px){
  .layout{grid-template-columns:minmax(0,1fr) 380px;column-gap:var(--s5);padding:var(--s5) var(--s5) 0}
  .card{top:var(--s5);min-height:0;max-height:calc(100vh - 48px);border-left:0;border-top:6px solid var(--green);box-shadow:var(--lift-hi)}
  .card.empty::before{padding-top:0}
  .hint{padding:var(--s3) 0}
  /* width a multiple of 5px => the 5:4 photo gets a whole-pixel height, so video and photo rasterize identically at the handoff */
  .map{width:round(down,100%,5px)}
  .list-wrap{padding:var(--s2) 0 var(--s5)}
  body.sheet-open .list-wrap{padding-bottom:var(--s5)}
}
@media (prefers-reduced-motion:reduce){.marker,.share-btn,.card-nav button,.plant-list button,.site-footer .btn{transition:none!important}.marker:active{scale:1}}
/* ===== v7: semi-transparent markers. The fill lets the plant underneath show through; the number, white
   outline, teal ring and drop shadow stay fully opaque (outer box-shadows never paint under the badge).
   The pressed / focused marker goes to a solid fill. Status colours keep working once data exists. ===== */
:root{--fill-a:.6;--fill-hover-a:.78}
.marker{background:rgba(9,43,56,var(--fill-a));text-shadow:0 0 2px rgba(9,43,56,.95),0 1px 3px rgba(0,0,0,.7)}
.marker:hover{background:rgba(15,68,89,var(--fill-hover-a))}
.marker.native{background:rgba(117,167,57,var(--fill-a));text-shadow:0 0 2px rgba(255,255,255,.9),0 0 4px rgba(255,255,255,.6)}
.marker.native:hover{background:rgba(134,185,74,var(--fill-hover-a))}
.marker.invasive{background:rgba(179,38,30,var(--fill-a))}
.marker.invasive:hover{background:rgba(143,29,23,var(--fill-hover-a))}
.marker[aria-pressed="true"]{background:var(--green);color:var(--teal);text-shadow:none}
.marker.native[aria-pressed="true"]{background:var(--green);color:var(--teal);text-shadow:none}
.marker.invasive[aria-pressed="true"]{background:var(--red);color:var(--white);text-shadow:none}
@media (prefers-contrast:more),(forced-colors:active){.marker{background:var(--teal)}.marker.native{background:var(--green)}.marker.invasive{background:var(--red)}}
/* v7: north arrow slightly see-through (whole badge incl. arrow and "N" at 72%); the zoom fade-out still wins */
.north{opacity:.72}
.map.focused .north{opacity:0}
/* v7b: selected / focused marker is mostly solid green (78%) so the plant shows through slightly; number + rings stay opaque */
.marker[aria-pressed="true"],.marker.native[aria-pressed="true"]{background:rgba(117,167,57,.78);text-shadow:0 0 2px rgba(255,255,255,.85)}
.marker.invasive[aria-pressed="true"]{background:rgba(179,38,30,.78)}
@media (prefers-contrast:more),(forced-colors:active){.marker[aria-pressed="true"],.marker.native[aria-pressed="true"]{background:var(--green)}.marker.invasive[aria-pressed="true"]{background:var(--red)}}
/* ===== v9: 3D view (depth parallax). The canvas sits in the zoom layer over the photo and is shown only while the
   effect is live; at rest the real <img> shows (identical frame), so the intro handoff and tap-to-focus are untouched. ===== */
.p3d-canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block;opacity:0;pointer-events:none}
.p3d-canvas.on{opacity:1}
.map.p3d-live .marker,.map.p3d-live .pin-dot{transition:scale .14s ease-out,opacity .3s,visibility 0s!important}
.btn-3d[hidden]{display:none}
.btn-3d{background:var(--white);color:var(--teal);border-color:var(--teal);border-bottom-color:var(--green);gap:6px;padding:0 12px}
.btn-3d svg{width:17px;height:17px}
.btn-3d:hover{background:#eef4e6}
.btn-3d[aria-pressed="true"]{background:var(--green);color:var(--teal);border-color:var(--teal)}
.btn-3d[aria-busy="true"]{opacity:.7;cursor:progress}
.p3d-hint{position:absolute;left:50%;bottom:14px;z-index:6;transform:translateX(-50%);max-width:calc(100% - 32px);padding:9px 14px;
  background:rgba(9,43,56,.88);color:var(--white);border-left:5px solid var(--green);font:700 .95rem/1.3 system-ui,sans-serif;
  pointer-events:none;box-shadow:0 2px 4px rgba(0,0,0,.2),0 8px 20px rgba(0,0,0,.3);transition:opacity .35s;text-align:center}
.p3d-hint[hidden]{display:none}
.p3d-hint.out{opacity:0}
.map.intro-on .p3d-canvas{opacity:0!important}
@media (prefers-reduced-motion:reduce){.btn-3d{display:none!important}}
/* ===== v10: walking gopher tortoise. A drawn sprite on the sandy paths, BELOW the plant markers (z 4 < markers z 5,
   and the markers layer lets taps through to it), semi-transparent like the markers. ===== */
.markers{pointer-events:none}
.marker{pointer-events:auto}
.critters{position:absolute;inset:0;z-index:4;pointer-events:none}
.tortoise{position:absolute;left:0;top:0;width:44px;height:44px;margin:0;padding:0;border:0;background:none;cursor:pointer;
  pointer-events:auto;opacity:.76;transition:opacity .2s;-webkit-tap-highlight-color:transparent;will-change:transform;line-height:0}
.tortoise:hover,.tortoise:focus-visible,.tortoise[aria-pressed="true"]{opacity:.94}
.tortoise .t-rot{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.tortoise svg{display:block;overflow:visible;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.55))}
.tortoise .leg-a,.tortoise .leg-b,.tortoise .tail,.tortoise .head ellipse{fill:#8c7b52;stroke:#092B38;stroke-width:1.3}
.tortoise .eye{fill:#092B38}
.tortoise .rim{fill:#fff}
.tortoise .shell{fill:#6a5631;stroke:#092B38;stroke-width:1.6}
.tortoise .scute{fill:none;stroke:#2f2615;stroke-width:1.2;stroke-linejoin:round}
.tortoise .scute-hi{fill:#9a8556;opacity:.85}
.tortoise[aria-pressed="true"] .rim{fill:#75A739}
.tortoise:focus-visible{outline:4px solid #ffd400;outline-offset:0}
.tortoise.walking .leg-a{animation:t-step 1.1s ease-in-out infinite}
.tortoise.walking .leg-b{animation:t-step 1.1s ease-in-out infinite -.55s}
.tortoise.walking .head{animation:t-bob 2.2s ease-in-out infinite}
@keyframes t-step{0%,100%{transform:translateX(-1.3px)}50%{transform:translateX(1.3px)}}
@keyframes t-bob{0%,100%{transform:translateX(0)}50%{transform:translateX(.8px)}}
.map.focused .critters,.map.markers-hidden .critters,.map.intro-on .critters{visibility:hidden;opacity:0}
.critters{transition:opacity .3s}
@media (prefers-reduced-motion:reduce){.tortoise.walking .leg-a,.tortoise.walking .leg-b,.tortoise.walking .head{animation:none}.critters,.tortoise{transition:none}}
/* Wildlife card: the same panel as the plant card, with the plant-only parts hidden */
.critter-body{display:none}
.card.critter>.critter-body{display:block}
.card.critter>:not(.critter-body):not(.card-close){display:none}
.critter-body .photo img{max-height:200px}
@media (min-width:900px){.critter-body .photo img{max-height:260px}}
.critter-link{margin:14px 0 0}
.critter-link a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:2px solid var(--teal);background:var(--teal);color:#fff;
  font-weight:700;text-decoration:none;border-radius:0}
.critter-link a:hover{background:#0f4459}

/* v10: the tortoise is a hidden Easter egg (long-press the title or press "t") */
.tortoise[hidden]{display:none}
.site-header h1.egg-target{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.tortoise.arrive{animation:t-arrive .6s ease-out}
@keyframes t-arrive{from{opacity:0}to{opacity:.76}}
.tortoise.leave{animation:t-leave .6s ease-in forwards}
@keyframes t-leave{from{opacity:.76}to{opacity:0}}
@media (prefers-reduced-motion:reduce){.tortoise.arrive,.tortoise.leave{animation:none}}
/* draft4: long toasts (the tortoise hint) use the full width instead of wrapping at half the screen (left:50% shrink-to-fit) */
.toast{width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;text-align:center}