:root{
    --page:#ffffff;--surface:#f6f8f7;--band:#e7f0ea;--border:#dde6e0;
    --ink:#31454f;--body:#4a5a60;--muted:#7b8a85;
    --moss:#585f47;--moss-strong:#474d39;--slate:#3c5464;
    --sky:#84acc4;--sky-deep:#5f8ba6;--khaki:#868850;--footer:#31454f;
    --radius:11px;--maxw:1180px;
    --fd:Georgia,"Times New Roman",serif;--fb:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;background:var(--page);color:var(--body);font-family:var(--fb);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;}
  a{color:var(--slate);text-decoration:none;cursor:pointer;} a:hover{text-decoration:underline;}
  h1,h2,h3{font-family:var(--fd);color:var(--ink);font-weight:400;margin:0;line-height:1.15;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;}
  .wrap-flush{padding-left:0;padding-right:0;}
  button{font-family:inherit;}
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--sky-deep);outline-offset:2px;border-radius:4px;}
  .arw{display:inline-block;transition:transform .15s ease;} .link:hover .arw,.btn:hover .arw{transform:translateX(3px);}
  .btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:11px 18px;border-radius:var(--radius);border:0;cursor:pointer;transition:.15s ease;}
  .btn-moss{background:var(--moss);color:#fff;} .btn-moss:hover{background:var(--moss-strong);}
  .btn-sky{background:var(--sky);color:#20323d;} .btn-sky:hover{background:var(--sky-deep);color:#fff;}
  .btn-ghost{background:#fff;border:1px solid var(--border);color:var(--slate);} .btn-ghost:hover{border-color:var(--sky);}
  .link{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;color:var(--slate);cursor:pointer;}

  .hdr{position:sticky;top:0;z-index:1100;background:rgba(255,255,255,.97);backdrop-filter:blur(6px);border-bottom:1px solid var(--border);}
  .hdr-row{display:flex;align-items:center;justify-content:space-between;gap:20px;height:82px;}
  .wm{display:flex;align-items:center;gap:14px;cursor:pointer;}
  .wm .logo{width:52px;height:52px;display:flex;align-items:center;justify-content:center;flex:none;}
  .wm-name{font-family:var(--fd);font-size:28px;color:var(--ink);line-height:1;}
  .wm-tag{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.35;margin-top:5px;display:block;}
  .nav{display:flex;align-items:center;gap:22px;}
  .nav a{color:var(--body);font-size:14.5px;font-weight:500;padding:6px 0;position:relative;}
  .nav a:hover{color:var(--ink);text-decoration:none;} .nav a.on{color:var(--ink);}
  .nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--moss);border-radius:2px;}
  .menu{display:none;background:none;border:1px solid var(--border);border-radius:8px;padding:11px 14px;color:var(--ink);cursor:pointer;font-size:18px;min-width:44px;min-height:44px;}
  .mobnav{display:none;flex-direction:column;padding:4px 20px 16px;background:#fff;border-top:1px solid var(--border);}
  .mobnav.open{display:flex;}
  .mobnav a{padding:12px 2px;font-size:15px;color:var(--body);border-bottom:1px solid var(--border);}
  .mobnav a.on{color:var(--ink);font-weight:600;}
  .mobnav a.btn{margin-top:12px;border-bottom:0;justify-content:center;color:#fff;}
  @media(min-width:961px){.mobnav{display:none!important;}}

  .pagehead{padding:40px 0 6px;}
  .pagehead-actions{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;}
  .pagehead-actions .ck-actions{margin-bottom:0;}
  .pagehead .eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-deep);}
  .pagehead h1{font-size:38px;margin:8px 0 6px;}
  .pagehead p{color:var(--muted);max-width:680px;margin:0;}

  /* hero + home reused */
  .hero{position:relative;background:var(--slate);color:#fff;overflow:hidden;}
  .hero .ph{position:absolute;right:0;top:0;bottom:0;width:54%;filter:saturate(1.28) contrast(1.07);transition:opacity .35s ease;}
  .hero .sky{position:absolute;inset:0;background:linear-gradient(180deg,var(--sky) 0%,var(--sky-deep) 100%);}
  .hero .trees{position:absolute;left:0;right:0;top:46%;height:15%;background:var(--moss-strong);}
  .hero .water{position:absolute;left:0;right:0;top:61%;height:20%;background:var(--sky-deep);}
  .hero .sand{position:absolute;left:0;right:0;top:81%;bottom:0;background:color-mix(in srgb, var(--khaki) 45%, white);}
  .hero .grass{position:absolute;left:0;right:0;top:70%;bottom:0;background:linear-gradient(180deg,rgba(71,77,57,0),rgba(71,77,57,.6));}
  .hero .fade{position:absolute;inset:0;background:linear-gradient(90deg,var(--slate) 4%,rgba(60,84,100,0) 60%);}
  .hero .note{position:absolute;right:14px;bottom:10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);z-index:3;}
  .hero .credit{display:none;position:absolute;right:14px;bottom:10px;z-index:3;background:rgba(24,36,42,.55);color:#fff;font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;letter-spacing:.02em;pointer-events:none;}
  .hero .credit a{color:#fff;text-decoration:none;pointer-events:auto;}
  .hero .credit a:hover{text-decoration:underline;}
  /* max-width is capped in vw (not just px) so the text column can never reach
     the photo, which starts at 46vw (.ph is 54% wide) — 44vw leaves a gutter. */
  .hero .in{position:relative;z-index:2;max-width:min(540px,44vw);padding:74px 0 78px;}
  .hero .pill{display:inline-flex;gap:8px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.34);color:#e2edf2;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 13px;border-radius:20px;}
  .hero h1{color:#fff;font-size:clamp(40px,6vw,60px);margin:18px 0 4px;text-shadow:0 1px 14px rgba(18,32,40,.5);}
  /* longer species names step down to a smaller clamp so they still fit
     on one line instead of wrapping awkwardly or crowding the photo */
  @media(min-width:701px){
    .hero h1[data-len="md"]{font-size:clamp(30px,4.6vw,46px);}
    .hero h1[data-len="lg"]{font-size:clamp(24px,3.8vw,36px);}
  }
  .hero .sci{font-family:var(--fd);font-style:italic;font-size:22px;color:#c7dae5;text-shadow:0 1px 14px rgba(18,32,40,.5);}
  .hero .rule{width:64px;height:2px;background:var(--sky);border:0;margin:18px 0;}
  .hero .facts{display:flex;gap:30px;margin-bottom:24px;}
  .hero .facts .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#a9c2cd;}
  .hero .facts .v{color:#fff;font-size:16px;margin-top:2px;}
  .stats{background:var(--band);border-bottom:1px solid var(--border);}
  .stats-inner{display:flex;align-items:center;flex-wrap:wrap;}
  .stats-row{display:flex;flex-wrap:wrap;flex:1 1 auto;min-width:0;}
  a.stats-link{color:inherit;text-decoration:none;cursor:pointer;transition:background .15s;}
  a.stats-link:hover{background:rgba(60,84,100,.05);}
  a.stats-link:hover .n{color:var(--sky-deep);}
  a.stats-link:focus-visible{outline:2px solid var(--sky-deep);outline-offset:-2px;}
  .stat{flex:1;min-width:150px;padding:22px 26px;border-right:1px solid rgba(60,84,100,.12);}
  .stat:last-child{border-right:0;}
  .stat .n{font-family:var(--fd);font-size:30px;color:var(--ink);line-height:1;}
  .stat .l{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:6px;}
  .stats-src{flex:none;padding-left:26px;white-space:nowrap;}
  .stats-src a{font-size:11.5px;letter-spacing:.03em;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:5px;}
  .stats-src a:hover{color:var(--sky-deep);text-decoration:underline;}
  .stats-src a .arw{font-size:12px;text-decoration:none;}
  .sect{padding:50px 0;}
  .sect.alt{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
  .sect-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px;}
  .sect-head h2{font-size:26px;}
  .sub-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:34px 0 16px;}
  .sub-head h3{font-size:20px;color:var(--ink);}
  .eyebrow{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--sky-deep);}
  .explore{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
  .xcard{display:block;color:inherit;} .xcard:hover{text-decoration:none;}
  .thumb{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);aspect-ratio:16/10;transition:.18s ease;}
  .thumb.a{background:#dfeaf0;}.thumb.b{background:#e3ede4;}.thumb.c{background:#e7ecdd;}
  /* explore-card thumbnails carry real photos set at runtime */
  .xcard .thumb[data-xthumb]{background-color:#dfeae4;background-size:cover;background-position:center;background-repeat:no-repeat;}
  .thumb .tnote{position:absolute;left:12px;bottom:10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(49,69,79,.4);}
  .xcard:hover .thumb{transform:translateY(-3px);border-color:var(--sky);}
  .xcard h3{font-family:var(--fd);font-size:19px;color:var(--ink);margin:14px 0 2px;}
  .xcard .s{color:var(--muted);font-size:13.5px;}
  .sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  #home-rare,#home-recent{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}

  .scard{display:block;color:inherit;background:var(--page);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:.16s ease;}
  .scard:hover{text-decoration:none;transform:translateY(-3px);border-color:var(--sky);}
  .sthumb{position:relative;aspect-ratio:4/3;background:#dfe9ef;}
  .sthumb.k{background:#e8ecdb;}
  .sthumb .pn{position:absolute;left:9px;bottom:8px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(49,69,79,.38);}
  .sbody{padding:12px 13px 14px;}
  .scommon{font-weight:600;color:var(--ink);font-size:15px;}
  .smeta{color:var(--muted);font-size:12.5px;margin-top:5px;}
  .g2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .panel{background:var(--page);border:1px solid var(--border);border-radius:14px;padding:18px 20px;}
  .panel .ph3{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px;}
  .panel h3{font-family:var(--fd);font-size:18px;color:var(--ink);}
  .lst{list-style:none;margin:0;padding:0;}
  .lst li{display:flex;gap:11px;align-items:center;padding:9px 0;border-top:1px solid var(--border);}
  .lst li:first-child{border-top:0;}
  .nm{font-weight:600;color:var(--ink);font-size:14px;}
  .mt{color:var(--muted);font-size:12.5px;}
  .more-row{margin-top:16px;}
  .hotspot-foot{margin-top:16px;}
  .disclaimer{font-size:12px;color:var(--muted);font-style:italic;margin:12px 0 0;max-width:680px;line-height:1.55;border-top:1px solid var(--border);padding-top:12px;}
  .samplebar{margin-top:28px;} .samplebar span{display:inline-block;font-size:12.5px;color:var(--muted);background:var(--page);border:1px solid var(--border);border-radius:20px;padding:5px 14px;}
  .toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:6px 0 22px;}
  .loc-sort-label{font-size:13px;font-weight:600;color:var(--muted);margin-left:2px;}
  .loc-sort{font-weight:600;cursor:pointer;}
  .loc-sort:hover{border-color:var(--sky);}
  .fld{border:1px solid var(--border);border-radius:9px;padding:9px 13px;font:inherit;font-size:16px;color:var(--ink);background:#fff;}
  /* "Dragonflies" / "Damselflies" act as selectable group filters; bold them so
     they read as section headers within the family dropdown. */
  .family-select option.fam-group-opt{font-weight:700;}
  .search{flex:1;min-width:220px;}
  .count-note{color:var(--muted);font-size:13.5px;margin-left:auto;}

  /* Species page: "mark what I've seen" controls */
  .toolbar-user{margin-top:-8px;}
  .user-inp-wrap{position:relative;flex:1;min-width:260px;display:flex;align-items:center;}
  .user-inp{flex:1;padding-left:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b8a85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:11px center;}
  .user-status{position:absolute;right:12px;font-size:12px;font-weight:600;pointer-events:none;}
  .user-status.loading{color:var(--muted);}
  .user-status.ok{color:var(--moss);}
  .user-status.err{color:#a5563f;}
  .user-scope{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden;}
  .scope-btn{font:inherit;font-size:13px;font-weight:600;color:var(--slate);background:#fff;border:none;padding:9px 14px;cursor:pointer;}
  .scope-btn + .scope-btn{border-left:1px solid var(--border);}
  .scope-btn.on{background:var(--slate);color:#fff;}
  .seen-select{font-weight:600;}
  /* Seen checkmark badge on species photos (top-right) */
  .sp-seen-check{position:absolute;top:10px;right:10px;z-index:4;width:30px;height:30px;border-radius:50%;background:var(--moss);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(31,45,55,.35);border:2px solid #fff;}
  .sp-seen-check svg{width:16px;height:16px;display:block;}
  .sp-seen-check[data-scope="everywhere"]{background:var(--sky-deep);}
  @media(max-width:720px){.sp-seen-check{width:26px;height:26px;top:8px;right:8px;}.sp-seen-check svg{width:14px;height:14px;}}

  /* pills / tags */

  /* SPECIES rich cards */

  /* LOCATIONS */
  .locmap-row{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;margin-bottom:20px;}
  .mapcol .mapbox{flex:1;}
.mapbox{position:relative;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#e9eef0;min-height:380px;}
  .mapbox .land{position:absolute;inset:0;background:#e6ede4;}.mapbox .bay{position:absolute;right:0;top:0;bottom:0;width:34%;background:#bcd2dc;}
  .mapbox .mlabel{position:absolute;left:14px;bottom:12px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(49,69,79,.45);}
  .pin{position:absolute;width:15px;height:15px;background:var(--moss);border:2px solid #fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.25);}
  .pin.sky{background:var(--sky-deep);}
  .mapcol{display:flex;flex-direction:column;gap:14px;}
.featcol{display:flex;flex-direction:column;gap:14px;}
  .featttl{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
  .featcard{display:block;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;transition:.16s ease;}
  .featcard:hover{border-color:var(--sky);transform:translateY(-2px);}
  .featcard .ft{position:relative;width:100%;aspect-ratio:16/9;background:#dfe9ef;}
  .featcard .ft .tnote{position:absolute;left:11px;bottom:9px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(49,69,79,.4);}
  .featcard .ft .ft-credit{position:absolute;right:8px;bottom:7px;max-width:82%;font-size:10px;line-height:1.3;color:#fff;background:rgba(0,0,0,.42);padding:2px 7px;border-radius:6px;letter-spacing:.01em;text-align:right;}
  .featcard .ft a.ft-credit{text-decoration:none;cursor:pointer;}
  .featcard .ft a.ft-credit:hover,.featcard .ft a.ft-credit:focus-visible{background:rgba(0,0,0,.62);text-decoration:underline;}
  .featcard .fb{padding:13px 15px;}
  .featcard .nm{font-family:var(--fd);font-size:16px;color:var(--ink);}.featcard .mt{font-size:12.5px;margin-top:2px;}
  .loc2{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;align-items:start;}
  .lc-head:hover{background:var(--surface);}
  .lc-head .lc-name{display:block;font-family:var(--fd);font-size:15.5px;color:var(--ink);line-height:1.2;}
  .lc-head .lc-city{color:var(--slate);font-weight:600;}
  .lc-head .lc-town{font-size:11.5px;color:var(--muted);margin-top:2px;}
  .loccard2.open{grid-column:1 / -1;}
  .lc-foot{display:flex;align-items:center;gap:16px;justify-content:space-between;margin-top:18px;padding-top:14px;border-top:1px solid var(--border);}
  .lc-foot .disc{font-size:12.5px;color:var(--muted);line-height:1.5;}
  .ck2tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:22px;}
  .ck2tab{padding:11px 20px;font-size:15px;font-weight:600;color:var(--muted);background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;margin-bottom:-1px;}
  .ck2tab.on{color:var(--ink);border-bottom-color:var(--moss);}
  .ck2tab .cnt-b{font-size:12px;font-weight:600;color:var(--slate);background:var(--band);border-radius:11px;padding:1px 8px;margin-left:7px;}
  .ck-pane[hidden]{display:none;}
  .saved-list{display:flex;flex-direction:column;gap:12px;}
  .saved-item{display:flex;align-items:center;gap:14px;border:1px solid var(--border);border-radius:12px;padding:14px 18px;background:#fff;}
  .saved-item .nm{font-family:var(--fd);font-size:16px;color:var(--ink);}
  .saved-item .mt{font-size:13px;color:var(--muted);margin-top:2px;}
  .saved-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;}
  .saved-actions .btn{padding:8px 14px;font-size:13px;}
  .saved-actions .saved-del{color:#8a3a2e;}
  .saved-actions .saved-del:hover{border-color:#b45c4c;background:#fbf2f0;}
  .saved-empty{color:var(--muted);font-size:14px;line-height:1.6;padding:22px 2px;}

  /* TIMELINE (phenology grid) */
  .tl-note{color:var(--muted);font-size:13.5px;margin:0 0 14px;}
  .tl-scrollhint{display:none;font-size:12px;color:var(--muted);margin:0 0 10px;}
  @media(max-width:700px){
    .tl-scrollhint{display:block;}
  }

  /* CHECKLIST */
  .ck-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
  .ck-meta{display:grid;grid-template-columns:1fr 150px 1.6fr 1.6fr;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:16px;}
  .field label{display:block;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
  .field .fld{width:100%;} .wxrow{display:flex;gap:8px;} .wxrow .fld{flex:1;min-width:0;}
  .ck-sticky{position:sticky;top:82px;z-index:20;background:var(--page);padding:12px 0;margin-bottom:6px;border-bottom:1px solid var(--border);display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
  .ck-colhead{display:grid;grid-template-columns:minmax(140px,1.4fr) 78px 78px 78px 78px minmax(120px,1.6fr);gap:8px;padding:10px 4px 8px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:center;position:sticky;top:150px;background:var(--page);z-index:10;}
  .ck-colhead .sp{text-align:left;}
  .grand{display:flex;justify-content:flex-end;gap:14px;align-items:baseline;margin-top:16px;padding-top:14px;border-top:2px solid var(--border);}
  .grand .gl{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);} .grand .gv{font-family:var(--fd);font-size:24px;color:var(--ink);}

  .ftr{background:var(--footer);color:#c9d6d3;}
  .ftr-top{display:grid;grid-template-columns:1.7fr 1fr 1fr;grid-template-areas:"brand explore involved" "disc explore involved";align-items:start;gap:30px;padding:48px 0 38px;}
  .fbrand{grid-area:brand;}
  .fcol-a{grid-area:explore;}
  .fcol-b{grid-area:involved;}
  .ftr .wm-name{color:#fff;} .ftr .wm-tag{color:#93a8a6;}
  .ftr-disclaimer{grid-area:disc;margin:6px 0 0;max-width:430px;font-size:12px;line-height:1.6;color:#89a09b;font-style:italic;}
  .fblurb{font-size:13.5px;color:#a3b4b1;margin-top:16px;max-width:250px;}
  .fcol h4{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#89a09b;margin:0 0 14px;}
  .fcol a{display:block;color:#c9d6d3;font-size:14px;padding:5px 0;cursor:pointer;} .fcol a:hover{color:#fff;text-decoration:none;}
  .fbot{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:#89a09b;}
  .fbot a{color:inherit;text-decoration:none;opacity:.75;}
  .fbot a:hover{opacity:1;text-decoration:underline;}

  @media(max-width:960px){
    .nav{display:none;}.menu{display:inline-flex;}
    .explore,.g3{grid-template-columns:1fr;}.g2{grid-template-columns:1fr;}
    .sgrid{grid-template-columns:repeat(2,1fr);}
    .locmap-row{grid-template-columns:1fr;}.loc2{grid-template-columns:1fr;}
    .ck-meta{grid-template-columns:1fr 1fr;}
    .ftr-top{grid-template-columns:1fr 1fr;grid-template-areas:"brand brand" "explore involved" "disc disc";}
    .stat{min-width:calc(50% - 1px);flex:none;}.hero .ph{opacity:.55;}
    .stats-src{width:100%;padding:8px 26px;}
  }
  @media(max-width:600px){
    .wrap{padding:0 18px;}
    .hdr-row{height:64px;gap:10px;}
    .wm .logo{width:42px;height:42px;}
    .wm-name{font-size:21px;}
    .wm-tag{display:none;}
    .hdr-row .btn-moss{display:none;}
    .pagehead{padding:26px 0 4px;}.pagehead h1{font-size:28px;}
    .sect{padding:34px 0;}.sect-head h2{font-size:22px;}
  }
  @media(max-width:480px){.sgrid{grid-template-columns:1fr;}.ck-meta{grid-template-columns:1fr;}}
  @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto;}}

/* ---- port additions: view display uses .view.active (app contract), not .page ---- */
.page{display:none;} .view.active{display:block;}
/* ---- ported view-internal styles not in the prototype base ---- */
#home-recent .sthumb,#home-rare .sthumb{height:120px;border-radius:8px 8px 0 0;background:#d8e5e0;position:relative;}
.ldr-list{list-style:none;margin:0;padding:0;}
.ldr-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:14px;}
.ldr-av{width:30px;height:30px;border-radius:50%;background:var(--band) center/cover;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);}
.ldr-name{flex:1;color:var(--ink);} .ldr-val{font-weight:600;color:var(--moss);}
.lst-empty{color:var(--muted);font-size:13px;font-style:italic;padding:10px 0;list-style:none;}

.pill{border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;border:1px solid var(--border);background:var(--band);color:var(--slate);white-space:nowrap;}
.pill-family{background:var(--band);color:var(--moss);}
button.pill-fam-link{cursor:pointer;font-family:inherit;transition:background .15s,color .15s,border-color .15s;}
button.pill-fam-link:hover{background:var(--moss);color:#fff;border-color:var(--moss);}
button.pill-fam-link:focus-visible{outline:2px solid var(--moss);outline-offset:1px;}
.pill-ab.pill-abundant{background:#e3ede6;color:var(--moss);}
.pill-ab.pill-common{background:#e7f0ea;color:var(--slate);}
.pill-ab.pill-uncommon{background:#eef0e2;color:var(--khaki);}
.pill-ab.pill-rare{background:#f2ece0;color:#8a6d3b;}
.pill-likely{background:#e3ede6;color:var(--moss);}
.pill-off{background:#eef1f0;color:var(--muted);}

/* ===== locations view (production) ===== */
.loccard2{border:1px solid var(--border);border-radius:12px;background:#fff;overflow:hidden;margin-bottom:0;}
.loccard2 .lc-head{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;background:#fff;border:0;cursor:pointer;text-align:left;}
.lc-chevron{background:var(--band);border-radius:999px;padding:5px 11px;font-size:12px;color:var(--muted);white-space:nowrap;transition:transform .15s;}
.loccard2.open .lc-chevron{transform:rotate(180deg);}
.lc-body{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 16px;}
.loccard2.open .lc-body{padding:0 16px 14px;}
.loc-stats{display:flex;gap:24px;padding:14px 0;border-top:1px solid var(--border);margin-top:4px;flex-wrap:wrap;}
.loc-stats > div{display:flex;flex-direction:column;}
.loc-stats b{font-family:var(--fd);font-size:20px;color:var(--ink);}
.loc-stats span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:2px;}
.loc-sp-grid-title{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin:8px 0 10px;}
.loc-sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
.loc-sp-card{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff;display:block;color:inherit;text-decoration:none;}
.loc-sp-thumb{aspect-ratio:4/3;background:#e3ede7;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.loc-sp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.loc-sp-unconfirmed{position:absolute;left:8px;top:8px;z-index:2;background:rgba(49,69,79,.82);color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px;box-shadow:0 1px 3px rgba(49,69,79,.28);}
.loc-sp-thumb .tnote{color:var(--muted);font-size:11px;}
.loc-sp-body{padding:10px 12px;}
.loc-sp-body b{display:block;font-size:13.5px;color:var(--ink);line-height:1.3;margin-bottom:4px;}
.loc-sp-body span{font-size:11px;color:var(--muted);}
.loc-sp-body small{display:block;font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.4;}
.loc-sp-body small b{display:inline;font-size:11.5px;color:var(--body);margin:0;}
.loc-stat-note{display:block;font-size:9.5px;color:var(--muted);font-style:italic;margin-top:2px;font-family:monospace;}
.loc-other{margin-top:16px;border-top:1px solid var(--border);padding-top:14px;}
.loc-other-title{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-bottom:8px;}
.loc-other-list{display:flex;flex-wrap:wrap;gap:6px;}
.loc-other-list span{background:var(--band);border-radius:999px;padding:4px 11px;font-size:12px;color:var(--slate);}
/* ---- Recent activity timeline ---- */
.act-note{font-size:13.5px;color:var(--muted);line-height:1.5;margin:0 0 18px;max-width:640px;}
.act-clear{background:none;border:none;color:var(--sky-deep);font-size:13px;font-weight:600;cursor:pointer;padding:0;}
.act-clear:hover{text-decoration:underline;}
.act-empty{font-size:13.5px;color:var(--muted);padding:24px 0;}
.act-summary{font-size:13.5px;color:var(--slate);background:var(--band);border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin-bottom:20px;}
.act-summary b{color:var(--ink);font-weight:700;}
.act-timeline{position:relative;padding-left:26px;}
.act-timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--border);border-radius:2px;}
.act-group{position:relative;margin-bottom:26px;scroll-margin-top:100px;}
.act-group::before{content:"";position:absolute;left:-26px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--page);border:3px solid var(--sky);box-shadow:0 0 0 3px var(--page);}
.act-daylabel{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sky-deep,var(--slate));margin-bottom:6px;}
.act-ghead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px;flex-wrap:wrap;}
.act-hotspot{font-family:var(--fd);font-size:18px;color:var(--ink);line-height:1.2;cursor:pointer;background:none;border:none;padding:0;text-align:left;}
.act-hotspot:hover{color:var(--sky-deep,var(--sky));}
.act-place-head{cursor:default;}
.act-place-head:hover{color:var(--ink);}
.act-group-place::before{border-color:var(--khaki,#a9a06a);}
.act-gmeta{font-size:12px;color:var(--muted);white-space:nowrap;}
.act-species{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.act-card{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff;display:block;color:inherit;text-decoration:none;transition:.16s ease;}
a.act-card:hover{transform:translateY(-3px);border-color:var(--sky);text-decoration:none;}
.act-thumb{aspect-ratio:4/3;background:#e3ede7;display:flex;align-items:center;justify-content:center;position:relative;background-size:cover;background-position:center;}
.act-thumb .tnote{color:var(--muted);font-size:11px;}
.act-pills{position:absolute;left:8px;top:8px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
.act-pill{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;box-shadow:0 1px 3px rgba(49,69,79,.22);}
.act-pill-rare{background:#8a6d3b;color:#fff;}
.act-pill-uncommon{background:#e9eed8;color:#5f6b3a;}
.act-pill-needsid{background:#6b5f7a;color:#fff;}
.act-card-needsid{border-style:dashed;}
.act-card-needsid .act-body b{color:var(--slate);font-style:italic;}
.act-unconfirmed{display:inline-block;margin-left:5px;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:1px 6px;border-radius:999px;background:#efe2c9;color:#7a5b23;vertical-align:1px;}
.act-first-tag{display:inline-block;margin-left:5px;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:1px 6px;border-radius:999px;background:var(--sky-deep);color:#fff;vertical-align:1px;}
.act-ghead-left{display:flex;align-items:center;gap:9px;min-width:0;}
.act-observers{display:flex;align-items:center;gap:5px;flex:none;}
.act-avatar{width:22px;height:22px;border-radius:50%;background-color:var(--band);background-size:cover;background-position:center;border:2px solid var(--page);box-shadow:0 0 0 1px var(--border);flex:none;}
.act-avatar-link{display:inline-flex;flex:none;border-radius:50%;text-decoration:none;}
.act-avatar-link:hover{text-decoration:none;}
.act-avatar-link:hover .act-avatar{box-shadow:0 0 0 1px var(--sky-deep);}
.act-avatar-initials{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--slate);text-transform:uppercase;}
.act-group-flash{outline:3px solid var(--sky);outline-offset:6px;border-radius:10px;animation:actGroupFlash 1.6s ease forwards;}
@keyframes actGroupFlash{0%{outline-color:var(--sky);}100%{outline-color:rgba(132,172,196,0);}}
.act-body{padding:9px 11px;}
.act-body b{display:block;font-size:13.5px;color:var(--ink);line-height:1.3;}
.act-body small{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;}
@media (max-width:720px){ .act-species{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;} .act-hotspot{font-size:16px;} }
.map-fallback{display:flex;align-items:center;justify-content:center;height:100%;padding:20px;text-align:center;color:var(--muted);font-size:13px;}

.sp-inat-count{font-size:12.5px;font-weight:600;color:var(--moss);margin-top:10px;}
.sp-inat-count.sp-inat-none{color:var(--muted);font-weight:500;font-style:italic;}
a.sp-inat-count.sp-inat-link{display:inline-block;text-decoration:none;cursor:pointer;}
a.sp-inat-count.sp-inat-link .arw{opacity:0;transition:opacity .15s;}
a.sp-inat-count.sp-inat-link:hover{color:var(--sky-deep);text-decoration:underline;}
a.sp-inat-count.sp-inat-link:hover .arw{opacity:1;}

/* ===== timeline (production phenology grid) ===== */
.tl-filters{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;margin:14px 0;}
.tl-filter-tabs{display:flex;flex-wrap:wrap;gap:8px;}
.tl-sortbar{display:flex;align-items:center;gap:8px;}
.tl-sortbar label{font-size:12.5px;font-weight:600;color:var(--muted);}
.tl-sortbar select{font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--border);border-radius:8px;padding:7px 10px;cursor:pointer;}
.tl-sortbar select:hover{border-color:var(--sky);}
.tl-filter-btn{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--slate);background:#fff;border:1px solid var(--border);border-radius:20px;padding:7px 14px;cursor:pointer;transition:.15s ease;}
.tl-filter-btn:hover{border-color:var(--sky);}
.tl-filter-btn .cnt{color:var(--muted);font-weight:600;}
.tl-filter-btn[data-status="now"].on{background:var(--moss);border-color:var(--moss);color:#fff;}
.tl-filter-btn[data-status="now"].on .cnt{color:rgba(255,255,255,.75);}
.tl-filter-btn[data-status="soon"].on{background:var(--sky-deep);border-color:var(--sky-deep);color:#fff;}
.tl-filter-btn[data-status="soon"].on .cnt{color:rgba(255,255,255,.75);}
.tl-filter-btn[data-status="later"].on{background:var(--khaki);border-color:var(--khaki);color:#fff;}
.tl-filter-btn[data-status="later"].on .cnt{color:rgba(255,255,255,.75);}
.tl-filter-btn[data-status="over"].on{background:var(--muted);border-color:var(--muted);color:#fff;}
.tl-filter-btn[data-status="over"].on .cnt{color:rgba(255,255,255,.75);}
.tl-filter-btn[data-status="all"].on{background:var(--ink);border-color:var(--ink);color:#fff;}
.tl-filter-btn[data-status="all"].on .cnt{color:rgba(255,255,255,.75);}
.tl-dot{width:8px;height:8px;border-radius:50%;flex:none;}
.tl-filter-btn[data-status="now"] .tl-dot{background:var(--moss);}
.tl-filter-btn[data-status="soon"] .tl-dot{background:var(--sky-deep);}
.tl-filter-btn[data-status="later"] .tl-dot{background:var(--khaki);}
.tl-filter-btn[data-status="over"] .tl-dot{background:var(--muted);}
.tl-filter-btn.on .tl-dot{background:#fff;}
.phenogrid-wrap{border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.pg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.pg-inner{min-width:900px;position:relative;--pg-namew:345px;}
.pg-headrow{display:grid;grid-template-columns:195px 150px 1fr;background:var(--surface);border-bottom:1px solid var(--border);position:relative;z-index:3;}
.m-abbr{display:none;}
.pg-h{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:8px 12px;align-self:center;}
.pg-mlabels{display:flex;padding:0;}
.pg-mlabel{flex:1;text-align:center;font-size:10.5px;font-weight:600;color:var(--muted);padding:8px 0;}
.pg-mlabel.now{color:var(--moss);}
.pg-groupdiv{background:var(--slate);color:#fff;font-family:var(--fd);font-size:16px;padding:9px 16px;cursor:pointer;user-select:none;display:flex;align-items:center;gap:9px;}
.pg-groupdiv::before{content:"▾";font-size:11px;color:rgba(255,255,255,.7);transition:transform .15s ease;flex:none;}
.pg-groupdiv.collapsed::before{transform:rotate(-90deg);}
.pg-family{}
.pg-famname{background:var(--band);color:var(--ink);font-weight:600;font-size:12.5px;padding:6px 16px;border-top:1px solid var(--border);cursor:pointer;user-select:none;display:flex;align-items:center;gap:7px;}
.pg-famname::before{content:"▾";font-size:9px;color:var(--muted);transition:transform .15s ease;flex:none;}
.pg-famname.collapsed::before{transform:rotate(-90deg);}
.pg-row{display:grid;grid-template-columns:195px 150px 1fr;border-top:1px solid var(--border);align-items:center;cursor:pointer;}
.pg-row:hover{background:var(--surface);}
.pg-name{padding:8px 12px;font-size:13px;font-weight:600;color:var(--ink);position:sticky;left:0;background:#fff;z-index:2;box-shadow:1px 0 0 var(--border);white-space:nowrap;}
.pg-row:hover .pg-name{background:var(--surface);color:var(--sky-deep);}
.pg-flight{padding:8px 12px;font-size:11.5px;color:var(--muted);white-space:nowrap;}
.pg-chart{display:flex;height:38px;align-items:flex-end;}
.pg-slot{flex:1;display:flex;align-items:flex-end;justify-content:center;height:100%;padding-bottom:4px;}
.pg-slot.mstart{box-shadow:inset 1px 0 0 rgba(0,0,0,.04);}
.pg-nowband{position:absolute;top:0;bottom:0;background:rgba(88,95,71,.09);pointer-events:none;z-index:1;}
.pg-bar{width:78%;background:var(--sky-deep);border-radius:2px 2px 0 0;}
.pg-bar.zero{opacity:0 !important;}
.pg-row[data-status="now"] .pg-bar{background:var(--moss);}
.pg-row[data-status="soon"] .pg-bar{background:var(--sky-deep);}
.pg-row[data-status="later"] .pg-bar{background:var(--khaki);}
.pg-row[data-status="over"] .pg-bar{background:var(--muted);}
.itl-grid{position:relative;}
.itl-count{position:absolute;top:-1px;left:4px;z-index:2;font-size:11px;font-weight:600;color:var(--moss);}
a.itl-count{text-decoration:none;cursor:pointer;}
a.itl-count .arw{opacity:0;transition:opacity .15s;}
a.itl-count:hover{color:var(--sky-deep);text-decoration:underline;}
a.itl-count:hover .arw{opacity:1;}
.map-popup-name{font-family:var(--fd);font-size:14px;color:var(--ink);}
.map-popup-stats{font-size:12px;color:var(--muted);margin:3px 0 7px;}
.map-popup-link{display:inline-block;font-size:12.5px;font-weight:600;color:var(--sky-deep);text-decoration:none;}
.map-popup-link:hover{text-decoration:underline;}

/* ===== checklist (production) ===== */
.entry-section{background:var(--slate);color:#fff;font-family:var(--fd);font-size:15px;padding:8px 14px;border-radius:8px;margin:16px 0 6px;}
.entry-family{background:var(--band);color:var(--ink);font-weight:600;font-size:12.5px;padding:6px 12px;border-radius:6px;margin:8px 0 2px;}
.entry-row{display:grid;grid-template-columns:minmax(140px,1.4fr) 78px 78px 78px 78px minmax(120px,1.6fr);gap:8px;align-items:center;padding:8px 4px;border-bottom:1px solid var(--border);}
.entry-row.observed{background:rgba(95,139,166,.06);}
.entry-row.selected{box-shadow:inset 3px 0 0 var(--sky-deep);}
.entry-name{align-self:center;font-size:13.5px;color:var(--ink);}
.ck-count{display:flex;align-items:center;justify-content:center;}
.ck-stepper{display:flex;align-items:center;border:1px solid var(--border);border-radius:7px;overflow:hidden;background:#fff;width:100%;max-width:76px;}
.ck-stepper button{flex:none;width:20px;height:30px;border:0;background:var(--surface);color:var(--ink);font-size:15px;cursor:pointer;padding:0;line-height:1;}
.ck-stepper button:hover{background:var(--band);}
.ck-stepper input{flex:1;min-width:0;width:100%;height:30px;border:0;text-align:center;font-size:13px;color:var(--ink);-moz-appearance:textfield;padding:0;background:transparent;}
.ck-stepper input::-webkit-outer-spin-button,.ck-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.entry-row .notes-wrap{display:flex;align-items:center;position:relative;}
.entry-row .notes-wrap input{width:100%;border:1px solid var(--border);border-radius:7px;padding:7px 10px;font-size:12.5px;color:var(--ink);text-transform:none;letter-spacing:0;transition:box-shadow .12s;}
.entry-row .notes-wrap input:focus{min-width:340px;box-shadow:0 2px 8px rgba(49,69,79,.12);outline:1px solid var(--sky-deep);}
.ck-empty{color:var(--muted);font-size:13px;padding:20px 4px;}
@media(max-width:600px){
  .ck-stepper{max-width:none;}
  .ck-stepper button{width:40px;height:44px;font-size:18px;}
  .ck-stepper input{height:44px;font-size:15px;}
}
.map-disclaimer{font-size:11.5px;color:var(--muted);margin:8px 2px 0;line-height:1.4;}
.loc-disclaimer{font-size:11px;color:var(--muted);margin:14px 0 2px;line-height:1.45;font-style:italic;}
.lst-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:13.5px;}
.lst-row:last-child{border-bottom:0;}
.lst-name{color:var(--ink);}
.lst-meta{color:var(--muted);font-size:12px;white-space:nowrap;}
.lst-spct{color:var(--slate);font-weight:700;}
.ldr-initials{display:inline-flex;align-items:center;justify-content:center;background:var(--band);color:var(--muted);font-size:11px;font-weight:600;}
.loc-sp-none{color:var(--muted);font-style:italic;}
#home-rare .loc-sp-card b{display:block;font-family:var(--fd);font-size:15px;color:var(--ink);}
.loc-sp-hotspot{color:var(--slate);font-weight:600;display:flex;align-items:center;gap:3px;}

  /* --- header --- */
  .hdr{position:sticky;top:0;z-index:1100;background:rgba(255,255,255,.97);backdrop-filter:blur(6px);border-bottom:1px solid var(--border);}

  /* nav: prototype look. Neutralize any inherited toolbar grid/flex from old app. */
  .nav.toolbar{display:flex;align-items:center;gap:22px;background:none;border:0;box-shadow:none;padding:0;margin:0;width:auto;max-width:none;grid-template-columns:none;position:static;}
  .nav .tab{color:var(--body);font-size:14.5px;font-weight:500;padding:6px 0;position:relative;background:none;border:0;min-height:0;box-shadow:none;cursor:pointer;}
  .nav .tab:hover{color:var(--ink);text-decoration:none;}
  /* app applies `.active`; prototype used `.on`. Support BOTH for the underline. */
  .nav .tab.active,.nav .tab.on{color:var(--ink);}
  .nav .tab.active::after,.nav .tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--moss);border-radius:2px;}

  .mobnav .tab{padding:12px 2px;font-size:15px;color:var(--body);border-bottom:1px solid var(--border);position:relative;}
  .mobnav .tab.active,.mobnav .tab.on{color:var(--ink);font-weight:600;}
  .mobnav .btn{margin-top:12px;border-bottom:0;justify-content:center;color:#fff;}

  /* --- footer --- */
  /* --- responsive (prototype breakpoints) --- */
  @media(max-width:960px){
    .nav.toolbar{display:none;}
    .menu{display:inline-flex;}
  }

/* ============================================================
   SPECIES CARD — consolidated styles (single source of truth)
   ============================================================ */
/* card shell */
  .spcard{display:grid;grid-template-columns:minmax(360px,42%) 1fr;background:var(--page);border:1px solid var(--border);border-radius:18px;overflow:hidden;margin-bottom:22px;box-shadow:0 1px 2px rgba(49,69,79,.04);align-items:stretch;}

/* photo + gallery */
/* aspect-ratio sets the natural/minimum height; stretch (from .spcard's
   align-items) lets the gallery grow to fill any extra row height left by a
   taller body column, instead of leaving blank space below the image.
   width:100% is required here: without an explicit width, aspect-ratio would
   recompute the width FROM the stretched height once height becomes taller
   than the 4:3 default, which is what caused the image to overflow into the
   text column. With width pinned to 100% of the grid track, both dimensions
   are explicit, aspect-ratio no longer touches width, and the extra height is
   simply cropped by the slides' existing background-size:cover. */
.spgal{position:relative;background:#d8e5e0;overflow:hidden;aspect-ratio:4/3;width:100%;height:100%;align-self:stretch;background-repeat:no-repeat;}
@media(max-width:720px){.spcard{grid-template-columns:1fr;}.spgal{aspect-ratio:3/2;}.spbody,.spgal{min-width:0;}}
.spslide{position:absolute;inset:0;background-color:#d8e5e0;background-size:cover;background-position:center;background-repeat:no-repeat;display:none;}
.spslide.on{display:block;}
.spgal .tnote{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;}
.spcredit-on{position:absolute;right:10px;bottom:10px;background:rgba(49,69,79,.78);color:#fff;font-size:11px;font-weight:600;padding:4px 9px;border-radius:6px;letter-spacing:.02em;text-decoration:none;max-width:calc(100% - 20px);}
/* non-link credit stays click-through (home explore cards sit under it); only the
   anchor form (species gallery / hero observation link) is interactive */
span.spcredit-on{pointer-events:none;}
a.spcredit-on{pointer-events:auto;cursor:pointer;}
a.spcredit-on:hover{background:rgba(49,69,79,.92);text-decoration:underline;}
/* the gallery is horizontally swipeable on touch; keep vertical page scroll */
.spgal{touch-action:pan-y;}
.galnav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:50%;background:rgba(40,55,63,.55);color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.galnav:hover{background:rgba(40,55,63,.8);}
.galnav.prev{left:10px;}
.galnav.next{right:10px;}
.galdots{position:absolute;left:0;right:0;bottom:14px;display:flex;gap:6px;justify-content:center;}
.galdots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;}
.galdots i.on{background:#fff;}
.sp-spotted{position:absolute;left:12px;top:12px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.03em;padding:5px 11px;border-radius:999px;color:#fff;box-shadow:0 1px 3px rgba(49,69,79,.25);}
.sp-spotted-today{background:#c2603a;}
.sp-spotted-week{background:var(--moss);}
.sp-spotted-month{background:var(--sky-deep);}

/* body + title row */
.spbody{padding:24px 28px;}
.sp-titlerow{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.sp-nameblock .spname{font-family:var(--fd);font-size:30px;line-height:1.1;color:var(--ink);margin:0;}
.sp-nameblock .spsci{font-style:italic;color:var(--muted);margin:2px 0 4px;}
.sp-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}

/* INATURALIST REPORTS timeline */
.itl{border:1px solid var(--border);border-radius:12px;padding:10px 14px 4px;margin:14px 0 4px;}
.itl-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.itl-title{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);}
.itl-range{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--sky-deep);}
.itl-mheads{display:flex;border-top:1px solid var(--border);}
.itl-mhead{flex:1;text-align:center;font-size:11px;font-weight:600;color:var(--muted);padding:2px 0;}
.itl-mhead.now{color:var(--sky-deep);}
.itl-cols{display:flex;height:38px;align-items:flex-end;gap:0;}
.itl-mcol{flex:1;display:flex;justify-content:stretch;gap:1px;align-items:flex-end;height:100%;padding:6px 0 0;}
.itl-mcol.now{background:rgba(132,172,196,.14);border-radius:4px;}
/* faint dividers between months on the species timelines */
.itl-cols .itl-mcol + .itl-mcol{border-left:1px solid rgba(49,69,79,.12);}
.itl-mheads .itl-mhead + .itl-mhead{border-left:1px solid rgba(49,69,79,.10);}
.itl-week{flex:1;display:flex;align-items:flex-end;justify-content:stretch;height:100%;}
.itl-week i{display:block;width:100%;background:var(--sky-deep);border-radius:2px 2px 0 0;}

/* find-it + locations */
.sp-find{font-size:14.5px;line-height:1.6;color:var(--body);margin:14px 0 0;}
.sp-locs{margin-top:16px;border-top:1px solid var(--border);padding-top:14px;}
.sp-locs-title{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:8px;}
.sp-locs-list{display:flex;flex-wrap:wrap;gap:6px;}
.sp-loc{display:inline-flex;align-items:center;gap:6px;background:var(--page);border:1px solid var(--border);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;color:var(--ink);font-family:inherit;cursor:pointer;transition:border-color .15s,color .15s;}
.sp-loc:hover{border-color:var(--sky-deep);color:var(--sky-deep);}
.sp-loc-ct{display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:0 5px;height:16px;border-radius:999px;background:rgba(60,84,100,.1);color:var(--slate);font-size:10.5px;font-weight:700;line-height:1;}
.sp-loc.is-hidden{display:none;}
.sp-loc-more{display:inline-flex;align-items:center;background:none;border:none;padding:3px 4px;font-size:12px;font-weight:700;color:var(--sky-deep);cursor:pointer;font-family:inherit;}
.sp-loc-more[hidden]{display:none;}
.sp-loc-more:hover{text-decoration:underline;}
/* locations popup (species "see all") */
.locpop-back{position:fixed;inset:0;z-index:1000;background:rgba(31,44,52,.5);display:flex;align-items:center;justify-content:center;padding:20px;}
.locpop-back[hidden]{display:none;}
.locpop{background:var(--page);border-radius:14px;max-width:440px;width:100%;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(31,44,52,.28);overflow:hidden;}
.locpop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px 12px;border-bottom:1px solid var(--border);}
.locpop-title{font-family:var(--fd);font-size:17px;color:var(--ink);line-height:1.2;}
.locpop-sub{font-size:12px;color:var(--muted);margin-top:3px;}
.locpop-x{flex:none;background:none;border:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:0 2px;}
.locpop-x:hover{color:var(--ink);}
.locpop-list{overflow-y:auto;padding:6px 0;}
.locpop-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 18px;width:100%;background:none;border:none;text-align:left;font-family:inherit;cursor:pointer;transition:background .15s;}
.locpop-row:hover{background:rgba(132,172,196,.12);}
.locpop-row:hover .locpop-nm{color:var(--sky-deep);}
.locpop-row + .locpop-row{border-top:1px solid var(--border);}
.locpop-nm{font-size:13.5px;font-weight:600;color:var(--ink);transition:color .15s;}
.locpop-ct{flex:none;font-size:12.5px;font-weight:600;color:var(--sky-deep);}
.locpop-ct.none{color:var(--muted);font-weight:500;}
.sp-locs-none{font-size:13px;color:var(--muted);font-style:italic;}
.sp-loading,.sp-empty{padding:40px 4px;color:var(--muted);font-size:15px;}

/* ===== Mobile refinements & standalone components ===== */
/* These media queries rely only on natural document order (they come after
   their base rules) — no ID-specificity or reordering tricks are needed. */
  /* floating back-to-top button */
  #to-top{position:fixed;right:18px;bottom:18px;z-index:120;width:46px;height:46px;border-radius:50%;border:0;
    background:var(--slate);color:#fff;font-size:20px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(49,69,79,.32);
    opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s;}
  #to-top.show{opacity:.94;visibility:visible;transform:translateY(0);}
  #to-top:hover{opacity:1;background:var(--sky-deep);}
  @media(max-width:600px){#to-top{right:14px;bottom:14px;width:44px;height:44px;}}

  /* footer on phones: keep Explore / Get involved as parallel columns, with the
     disclaimer below them (grid areas defined in the 960px block above). */
  @media(max-width:600px){
    .ftr-top{gap:24px 20px;padding:36px 0 26px;}
    .ftr-disclaimer{max-width:none;margin:4px 0 0;}
    .fblurb{max-width:none;}
    .fbot{justify-content:center;text-align:center;padding:16px 0 28px;}
  }

  /* hero / Ode of the day on mobile: full-width photo with readable overlay */
  @media(max-width:700px){
    .hero .ph{width:100%;opacity:.9;}
    .hero .fade{background:linear-gradient(180deg,rgba(34,52,62,.22) 0%,rgba(34,52,62,.50) 45%,rgba(34,52,62,.86) 100%);}
    .hero .in{max-width:none;padding:118px 0 34px;}
    .hero .note{opacity:.8;}
    .hero .facts{gap:22px;flex-wrap:wrap;}
  }
  @media(max-width:600px){
    .hero h1{font-size:32px;line-height:1.08;}
    .hero .sci{font-size:18px;}
    .hero .in{padding:96px 0 30px;}
  }

  /* Data page: season curve card */
  .data-card{}
  .data-card .card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:24px;flex-wrap:wrap;}
  .data-card .card-title{font-family:var(--fd);font-size:16px;color:var(--ink);}
  .hs-lb-toggle{display:flex;gap:6px;}
  .hs-lb-btn{font-size:12px;font-weight:600;color:var(--slate);background:#fff;border:1px solid var(--border);border-radius:16px;padding:5px 12px;cursor:pointer;transition:.15s ease;}
  .hs-lb-btn:hover{border-color:var(--sky);}
  .hs-lb-btn.on{background:var(--slate);border-color:var(--slate);color:#fff;}
  .hs-lb-row{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--border);}
  .hs-lb-row:first-child{border-top:none;}
  .hs-lb-rank{font-family:var(--fd);font-size:15px;color:var(--muted);text-align:center;}
  .hs-lb-row:nth-child(1) .hs-lb-rank,.hs-lb-row:nth-child(2) .hs-lb-rank,.hs-lb-row:nth-child(3) .hs-lb-rank{color:var(--sky-deep);}
  .hs-lb-main{min-width:0;}
  .hs-lb-name{font-family:var(--fd);font-size:15px;color:var(--ink);background:none;border:none;padding:0;cursor:pointer;text-align:left;line-height:1.2;}
  .hs-lb-name:hover{color:var(--sky-deep);text-decoration:underline;}
  .hs-lb-bar{height:6px;border-radius:3px;background:var(--sky-deep);margin-top:5px;min-width:3px;transition:width .3s ease;}
  .hs-lb-val{font-family:var(--fd);font-size:16px;color:var(--ink);white-space:nowrap;}
  .hs-lb-val small{font-family:var(--fb);font-size:11px;color:var(--muted);font-weight:600;margin-left:3px;}
  /* Paired Data-page leaderboards: hotspots + observers */
  .lb-shared-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
  .lb-shared-metric,.lb-shared-range{display:flex;align-items:center;gap:10px;}
  .lb-shared-label{font-size:12px;font-weight:600;color:var(--muted);}
  .lb-year-select{font-size:12px;font-weight:600;color:var(--slate);background:#fff;border:1px solid var(--border);border-radius:16px;padding:5px 12px;cursor:pointer;transition:.15s ease;}
  .lb-year-select:hover{border-color:var(--sky);}
  .lb-year-select:focus-visible{outline:2px solid var(--sky);outline-offset:1px;}
  .lb-2col{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;}
  @media(max-width:820px){
    .lb-2col{grid-template-columns:1fr;}
  }

  /* Top species: observation-proportional horizontal photo mosaic.
     The first species occupies a full-height column. The remaining species are
     stacked in pairs: each pair-column's WIDTH follows its combined observation
     count, while the two tile HEIGHTS follow their individual counts. Minimum
     dimensions keep low-count tiles readable without erasing the hierarchy. */
  .sp-mosaic-wrap{width:100%;overflow-x:auto;padding-bottom:4px;}
  .sp-mosaic-wrap::-webkit-scrollbar{height:7px;}
  .sp-mosaic-wrap::-webkit-scrollbar-track{background:var(--band);border-radius:4px;}
  .sp-mosaic-wrap::-webkit-scrollbar-thumb{background:var(--muted);border-radius:4px;}
  .sp-mosaic{display:flex;gap:10px;width:100%;min-width:920px;height:348px;}
  .sp-mosaic-col{display:grid;grid-template-rows:minmax(78px,var(--row-a,1fr)) minmax(78px,var(--row-b,1fr));gap:10px;flex:var(--weight,1) 1 0;min-width:116px;min-height:0;}
  .sp-mosaic-col.sp-mosaic-lead,.sp-mosaic-col.sp-mosaic-single{display:block;}
  .sp-mosaic-col.sp-mosaic-lead{min-width:205px;}
  .sp-mosaic-col > .sp-mosaic-tile{width:100%;height:100%;}
  .sp-mosaic-tile{position:relative;display:block;overflow:hidden;border-radius:11px;background:var(--band);border:1px solid var(--border);color:#fff;text-decoration:none;isolation:isolate;min-width:0;min-height:0;}
  .sp-mosaic-tile:hover{text-decoration:none;border-color:var(--sky-deep);}
  .sp-mosaic-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,38,45,.01) 18%,rgba(25,38,45,.9) 100%);z-index:1;}
  .sp-mosaic-photo{position:absolute;inset:0;background-color:#d8e5e0;background-position:center;background-size:cover;transition:transform .2s ease;}
  .sp-mosaic-tile:hover .sp-mosaic-photo{transform:scale(1.025);}
  .sp-mosaic-copy{position:absolute;left:11px;right:11px;bottom:10px;z-index:2;line-height:1.18;}
  .sp-mosaic-name{display:block;font-family:var(--fd);font-size:14px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);}
  .sp-mosaic-meta{display:block;font-size:10.5px;color:rgba(255,255,255,.9);margin-top:4px;}
  .sp-mosaic-rank{position:absolute;left:9px;top:9px;z-index:2;width:25px;height:25px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(49,69,79,.82);border:1px solid rgba(255,255,255,.7);font-family:var(--fd);font-size:12px;color:#fff;}
  .sp-mosaic-lead .sp-mosaic-copy{left:17px;right:17px;bottom:16px;}
  .sp-mosaic-lead .sp-mosaic-name{font-size:23px;line-height:1.08;}
  .sp-mosaic-lead .sp-mosaic-meta{font-size:12px;margin-top:6px;}
  .sp-mosaic-lead .sp-mosaic-rank{left:14px;top:14px;width:31px;height:31px;font-size:15px;}
  .sp-mosaic-other{background:var(--slate);}
  .sp-mosaic-other::before{background:linear-gradient(180deg,rgba(49,69,79,.1),rgba(49,69,79,.96));}
  .sp-mosaic-other .sp-mosaic-copy{left:12px;right:12px;}
  .sp-mosaic-other .sp-mosaic-name{font-size:15px;}
  /* "All other species" as a photomosaic of the next-most-popular species. The
     collage fills the tile behind the gradient/label; thin slate gaps read as a
     grid. A lighter top gradient lets the photos show through while the bottom
     stays dark enough for the label to stay legible. */
  .sp-mosaic-collage{position:absolute;inset:0;z-index:0;display:grid;grid-auto-rows:1fr;gap:1px;background:var(--slate);}
  .sp-mosaic-cell{background-color:#c9d8d2;background-position:center;background-size:cover;}
  .sp-mosaic-other-collage::before{background:linear-gradient(180deg,rgba(25,38,45,.12) 0%,rgba(25,38,45,.24) 42%,rgba(25,38,45,.9) 100%);}
  .sp-mosaic-other-collage:hover .sp-mosaic-cell{transform:none;}

  @media(max-width:980px){
    .sp-mosaic{width:max-content;min-width:920px;}
  }
  @media(max-width:640px){
    .sp-mosaic-wrap{overflow:visible;padding-bottom:0;}
    .sp-mosaic{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:210px;grid-auto-rows:138px;width:100%;min-width:0;height:auto;gap:8px;}
    .sp-mosaic-col{display:contents;}
    .sp-mosaic-col.sp-mosaic-lead,.sp-mosaic-col.sp-mosaic-single{display:contents;}
    .sp-mosaic-tile{height:138px;}
    .sp-mosaic-lead .sp-mosaic-tile{grid-column:1 / 3;height:100%;}
    .sp-mosaic-lead .sp-mosaic-name{font-size:21px;}
  }

  .data-sub{font-size:13.5px;color:var(--muted);line-height:1.5;margin:5px 0 0;}

  /* Year coverage by rarity class (accordion) */
  .cov-row{border-top:1px solid var(--border);}
  .cov-row:first-child{border-top:none;}
  .cov-A{--rc:#585f47;} .cov-C{--rc:#3c5464;} .cov-U{--rc:#868850;} .cov-R{--rc:#84acc4;}
  .cov-head{display:flex;align-items:center;gap:12px;padding:12px 2px;cursor:pointer;user-select:none;background:none;border:none;width:100%;text-align:left;font:inherit;color:inherit;}
  .cov-head:hover .cov-cls{color:var(--sky-deep);}
  .cov-cls{font-family:var(--fd);font-size:16px;color:var(--ink);width:96px;flex:none;}
  .cov-frac{font-size:13px;color:var(--body);flex:none;}
  .cov-frac b{color:var(--ink);}
  .cov-track{flex:1;height:16px;border-radius:5px;background:var(--band);overflow:hidden;min-width:60px;}
  .cov-fill{display:block;height:100%;border-radius:5px;background:var(--rc);min-width:3px;transition:width .4s ease;}
  .cov-chev{color:var(--muted);font-size:11px;flex:none;transition:transform .18s;}
  .cov-row.open .cov-chev{transform:rotate(180deg);}
  .cov-panel{max-height:0;overflow:hidden;transition:max-height .3s ease;}
  .cov-panel-inner{padding:4px 2px 16px;}
  .cov-seclabel{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:12px 0 7px;}
  .cov-seclabel:first-child{margin-top:2px;}
  .cov-chips{display:flex;flex-wrap:wrap;gap:6px;}
  .cov-chip{font-size:12px;padding:3px 10px;border-radius:20px;white-space:nowrap;text-decoration:none;}
  .cov-chip.seen{background:var(--rc);color:#fff;}
  .cov-chip.seen.lite{color:#2b3a33;}
  a.cov-chip.seen:hover{filter:brightness(1.08);text-decoration:none;}
  .cov-chip.unseen{background:#fff;border:1px dashed var(--border);color:var(--muted);}
  .cov-legend{display:flex;gap:16px;margin-top:14px;font-size:11.5px;color:var(--body);}
  .cov-legend .cov-k{display:inline-flex;align-items:center;gap:6px;}
  .cov-legend .cov-sw{width:12px;height:12px;border-radius:3px;background:var(--slate);}
  .cov-legend .cov-sw.un{background:#fff;border:1.5px dashed var(--border);}
  @media(max-width:640px){.cov-cls{width:auto;}.cov-head{flex-wrap:wrap;}.cov-track{order:5;flex-basis:100%;}}
  .data-card .legend{display:flex;gap:14px;font-size:11px;color:var(--muted);flex-wrap:wrap;justify-content:flex-end;max-width:340px;}
  .data-card .swatch{display:inline-block;width:9px;height:8px;border-radius:2px;margin-right:5px;vertical-align:-1px;}
  .data-card .stat-row{display:flex;gap:8px;margin-top:26px;}
  .data-card .stat{text-align:center;flex:1;min-width:0;}
  .data-loading,.data-empty{color:var(--muted);font-size:13px;padding:30px 0;text-align:center;}
  .data-note{font-size:11.5px;color:var(--muted);margin:22px 0 0;line-height:1.5;font-style:italic;}

  /* Data page: range vs abundance scatter */
  .rva-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
  .rva-toolbar input[type=text]{background:#fff;border:1px solid var(--border);color:var(--ink);border-radius:6px;padding:6px 10px;font-size:13px;width:220px;font-family:var(--fb);}
  .rva-toolbar button{background:none;border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:6px 12px;font-size:12.5px;cursor:pointer;font-family:var(--fb);}
  .rva-toolbar button:hover{color:var(--ink);border-color:var(--sky-deep);}
  .rva-hint{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;}
  .rva-hint i{font-size:8px;color:var(--khaki);font-style:normal;}
  #rva-chart svg text{font-family:var(--fb);fill:var(--body);}
  .rva-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:10px;}
  .rva-legend .sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px;}
  .rva-tip{position:fixed;pointer-events:none;background:#fff;border:1px solid var(--border);border-radius:7px;padding:8px 11px;font-size:12px;color:var(--body);z-index:1200;max-width:240px;line-height:1.45;box-shadow:0 6px 18px rgba(49,69,79,.18);display:none;}
  .rva-tip .t2{color:var(--muted);}
  .rva-tip-name{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:2px;font-family:var(--fd);}
  .rva-tip-sci{font-style:italic;color:var(--muted);font-size:12px;margin-bottom:5px;}
  .rva-tip-photo{width:100%;max-width:200px;height:120px;object-fit:cover;border-radius:6px;margin-bottom:8px;display:block;}
  .rva-tip-photo-placeholder{width:200px;height:120px;border-radius:6px;margin-bottom:8px;background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px;text-align:center;}

  /* Data page: one-hit wonders */
  .ohw-badge{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sky-deep);background:var(--band);border-radius:20px;padding:2px 8px;margin-bottom:12px;}
  .ohw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;align-items:start;}
  .ohw-col{min-width:0;}
  .ohw-col + .ohw-col{border-left:1px solid var(--border);padding-left:28px;}
  table.ohw-table{width:100%;border-collapse:collapse;font-size:13.5px;table-layout:fixed;}
  table.ohw-table col.ohw-species-col{width:52%;}
  table.ohw-table col.ohw-date-col{width:20%;}
  table.ohw-table col.ohw-hotspot-col{width:28%;}
  table.ohw-table th{text-align:left;font-size:10.5px;letter-spacing:.065em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:0 8px 10px;border-bottom:1px solid var(--border);}
  table.ohw-table td{padding:10px 8px;border-bottom:1px solid var(--border);vertical-align:middle;overflow-wrap:anywhere;}
  table.ohw-table td:nth-child(2){white-space:nowrap;}
  table.ohw-table tbody tr:last-child td{border-bottom:0;}
  table.ohw-table tbody tr.ohw-row-link{cursor:pointer;}
  table.ohw-table tbody tr.ohw-row-link:hover{background:var(--surface);}
  @media(max-width:820px){
    .ohw-grid{grid-template-columns:1fr;gap:0;}
    .ohw-col + .ohw-col{border-left:0;padding-left:0;}
    /* Stacked: the first column's final row keeps a normal row divider so the
       two halves read as one continuous, evenly-divided list rather than two
       blocks separated by a heavier divider. */
    .ohw-grid .ohw-col:first-child table.ohw-table tbody tr:last-child td{border-bottom:1px solid var(--border);}
  }
  .ohw-sp{display:flex;align-items:center;gap:11px;}
  .ohw-sp img{width:40px;height:40px;border-radius:8px;object-fit:cover;background:var(--band);flex:none;display:block;}
  .ohw-sp .ohw-photo-placeholder{width:40px;height:40px;border-radius:8px;background:var(--band);flex:none;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:8px;text-align:center;line-height:1.2;}
  .ohw-sp .ohw-name{font-family:var(--fd);font-size:14.5px;color:var(--ink);}
  .ohw-sp .ohw-sci{font-style:italic;font-size:11.5px;color:var(--muted);margin-top:1px;}
  /* Odonata Year — species status snapshot, re-themed to match the site */
  .oy-note{font-size:12px;color:var(--muted);margin:0 0 20px;line-height:1.5;}
  .oy-eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;}
  .oy-section{margin-top:44px;padding-top:32px;border-top:1px solid var(--border);}
  .oy-section h3{font-family:var(--fd);font-size:18px;font-weight:400;color:var(--ink);margin:0 0 6px;}
  .oy-section > p{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0 0 20px;}

  /* stat row reuses .data-card .stat-row / .stat / .n / .l already defined;
     just add the three status colors the ported JS applies via s.cls */
  .data-card .n.oy-teal{color:var(--sky-deep);}
  .data-card .n.oy-amber{color:#8a5a12;}
  .data-card .n.oy-violet{color:#5f6f68;}

  /* horizontal scrollable timeline */
  .oy-tl-hint-overlay{position:absolute;top:50%;left:20px;transform:translateY(-50%);background:rgba(255,255,255,.94);border:1px solid var(--border);border-radius:8px;padding:9px 14px;font-size:12.5px;font-style:italic;color:var(--muted);pointer-events:none;z-index:7;box-shadow:0 2px 10px rgba(49,69,79,.09);transition:opacity .3s ease;white-space:nowrap;}
  .oy-tl-hint-overlay.oy-hidden{opacity:0;}
  .oy-tl-scroll-wrap{position:relative;}
  .oy-tl-scroll-wrap::before,.oy-tl-scroll-wrap::after{content:"";position:absolute;top:0;bottom:0;width:48px;z-index:6;pointer-events:none;}
  .oy-tl-scroll-wrap::before{left:0;background:linear-gradient(to right, var(--page), transparent);}
  .oy-tl-scroll-wrap::after{right:0;background:linear-gradient(to left, var(--page), transparent);}
  .oy-tl-scroll{overflow-x:auto;overflow-y:hidden;margin:0 -24px;padding:0 24px;}
  .oy-tl-scroll::-webkit-scrollbar{height:8px;}
  .oy-tl-scroll::-webkit-scrollbar-track{background:var(--band);border-radius:4px;}
  .oy-tl-scroll::-webkit-scrollbar-thumb{background:var(--muted);border-radius:4px;}
  .oy-tl-inner{position:relative;}
  .oy-tl-month-band{position:absolute;top:0;bottom:0;background:var(--surface);z-index:0;}
  .oy-tl-spine-h{position:absolute;left:0;right:0;height:1px;background:var(--border);}
  .oy-tl-month-label{position:absolute;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;}
  .oy-tl-today-col{position:absolute;width:2px;background:var(--sky-deep);}
  .oy-tl-today-tag{position:absolute;font-size:10px;color:var(--sky-deep);transform:translateX(-50%);white-space:nowrap;letter-spacing:.04em;font-weight:700;text-transform:uppercase;}
  .oy-tl-node{position:absolute;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);}
  .oy-tl-node.oy-confirmed{background:var(--sky-deep);border:2px solid var(--page);box-shadow:0 0 0 1px var(--sky-deep);}
  .oy-tl-node.oy-ghost{background:var(--page);border:2px dashed #9aa89f;}
  .oy-tl-connector{position:absolute;width:1px;background:var(--border);}
  .oy-tl-connector.oy-ghost{background-image:linear-gradient(var(--border) 60%, transparent 40%);background-size:1px 6px;background-color:transparent;}
  .oy-tl-card{position:absolute;width:180px;display:flex;gap:9px;align-items:center;border-radius:10px;padding:8px 10px;min-height:70px;text-decoration:none;color:inherit;}
  .oy-tl-card.oy-confirmed{background:var(--page);border:1px solid var(--border);box-shadow:0 1px 5px rgba(49,69,79,.07);cursor:pointer;}
  .oy-tl-card.oy-confirmed:hover{border-color:var(--sky-deep);}
  .oy-tl-card.oy-ghost{background:var(--surface);border:1px dashed var(--border);}
  .oy-tl-thumb{width:42px;height:42px;border-radius:7px;object-fit:cover;flex-shrink:0;background:var(--band);border:1px solid var(--border);}
  .oy-tl-thumb.oy-ghosted{filter:grayscale(1) contrast(.9);opacity:.55;}
  .oy-tl-thumb-fallback{width:42px;height:42px;border-radius:7px;flex-shrink:0;background:var(--band);border:1px solid var(--border);}
  .oy-tl-text{min-width:0;flex:1;}
  .oy-tl-common{font-family:var(--fd);font-size:12.5px;color:var(--ink);line-height:1.22;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .oy-tl-card.oy-ghost .oy-tl-common{color:var(--body);}
  .oy-tl-tag{font-size:9.5px;color:var(--sky-deep);font-weight:700;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px;}
  .oy-tl-tag.oy-overdue-tag{color:#8a5a12;}
  .oy-tl-tag.oy-future-tag{color:#5f6f68;}
  .oy-tl-observer{font-size:9.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}

  /* watchlists */
  .oy-watch-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
  @media(max-width:720px){.oy-watch-grid{grid-template-columns:1fr;}}
  .oy-watch-col h4{font-family:var(--fd);font-size:16px;font-weight:400;margin:0 0 4px;}
  .oy-watch-col.oy-overdue h4{color:#8a5a12;}
  .oy-watch-col.oy-future h4{color:#5f6f68;}
  .oy-watch-col .oy-w-note{font-size:12.5px;color:var(--muted);margin:0 0 16px;line-height:1.5;}
  .oy-watch-row{padding:10px 0;border-bottom:1px solid var(--border);}
  .oy-watch-row:last-child{border-bottom:none;}
  .oy-watch-row-top{display:flex;gap:11px;align-items:center;}
  .oy-watch-thumb{width:36px;height:36px;border-radius:7px;object-fit:cover;flex-shrink:0;border:1px solid var(--border);filter:grayscale(1);opacity:.65;}
  .oy-watch-body{flex:1;min-width:0;}
  .oy-watch-common{font-family:var(--fd);font-size:13.5px;color:var(--ink);line-height:1.25;}
  .oy-watch-sci{font-style:italic;font-size:10.5px;color:var(--muted);}
  .oy-watch-tag{font-size:10.5px;white-space:nowrap;text-align:right;flex-shrink:0;line-height:1.4;}
  .oy-watch-col.oy-overdue .oy-watch-tag{color:#8a5a12;}
  .oy-watch-col.oy-future .oy-watch-tag{color:#5f6f68;}
  .oy-watch-tag .oy-sub{display:block;color:var(--muted);font-size:9.5px;margin-top:2px;}
  .oy-watch-mini{position:relative;height:13px;margin-top:8px;background:var(--surface);border-radius:3px;overflow:visible;}
  .oy-watch-mini-today{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--muted);}
  .oy-watch-mini-mark{position:absolute;top:50%;width:7px;height:7px;border-radius:50%;transform:translate(-50%,-50%);}
  .oy-watch-col.oy-overdue .oy-watch-mini-mark{background:#c98f4a;}
  .oy-watch-col.oy-future .oy-watch-mini-mark{background:var(--page);border:1.5px solid #9aa89f;}
  .oy-watch-col.oy-overdue .oy-watch-mini-range{position:absolute;top:0;bottom:0;background:linear-gradient(90deg, rgba(201,143,74,.30), rgba(201,143,74,.04));border-radius:3px;}

  @media(max-width:600px){
    .oy-tl-card{width:150px;}
    .oy-tl-scroll{margin:0 -18px;padding:0 18px;}
  }
  .data-card .delta{font-size:10.5px;margin-top:5px;display:flex;align-items:center;justify-content:center;gap:3px;font-weight:600;min-height:14px;}
  .data-card .delta svg{flex:none;}
  .data-card .delta.up{color:#474d39;}
  .data-card .delta.down{color:#6b5a2e;}
  .data-card .delta-note{font-size:10px;color:var(--muted);font-weight:400;margin-left:2px;}
  @media(max-width:560px){
    .data-card .card-head{flex-direction:column;}
    .data-card .legend{justify-content:flex-start;max-width:none;}
  }

  /* ==========================================================================
     DATA PAGE — mobile responsiveness
     Desktop layout is untouched; these rules only reflow the cramped pieces at
     phone widths (the four-across stat strip and the 3-column one-hit-wonders
     table), plus a couple of small toolbar/spacing tidy-ups.
     ========================================================================== */

  /* "2026 so far" stats: 4-across is unreadable on a phone — go 2×2. */
  @media(max-width:560px){
    .data-card .stat-row{display:grid;grid-template-columns:1fr 1fr;gap:16px 10px;}
    .data-card .stat .n{font-size:25px;}
    .data-card .stat .l{font-size:10.5px;}
  }

  /* One-hit-wonders: the fixed 3-column table doesn't fit — hotspot names force
     tall, ragged rows. Below 600px, reflow each record into a stacked block:
     species on top, then date and hotspot as labelled meta lines. */
  @media(max-width:600px){
    table.ohw-table{display:block;}
    table.ohw-table thead{display:none;}
    table.ohw-table tbody{display:block;}
    table.ohw-table colgroup{display:none;}
    table.ohw-table tr{display:block;padding:14px 0;border-bottom:1px solid var(--border);}
    table.ohw-table tr:first-child{padding-top:0;}
    .ohw-col + .ohw-col table.ohw-table tr:first-child{padding-top:14px;}
    table.ohw-table td{display:block;padding:0;border:0;}
    table.ohw-table td:first-child{margin-bottom:7px;}
    /* date + hotspot become muted, labelled lines under the species */
    table.ohw-table td:nth-child(2),
    table.ohw-table td:nth-child(3){
      font-size:12.5px;color:var(--muted);white-space:normal;padding-left:51px;line-height:1.4;
    }
    table.ohw-table td:nth-child(2)::before{content:"First seen ";color:var(--body);font-weight:600;}
    table.ohw-table td:nth-child(3)::before{content:"at ";color:var(--body);font-weight:600;}
    /* the 51px left indent lines the meta up under the species name, past its
       40px photo + 11px gap */
  }

  /* Range-vs-abundance toolbar: let the search field use the full row instead of
     a fixed 220px that leaves an awkward gap. */
  @media(max-width:600px){
    .rva-toolbar{gap:8px;}
    .rva-toolbar input[type=text]{width:100%;flex:1 1 100%;}
    .rva-hint{flex:1 1 100%;}
  }

  /* Tighten the big 48px inter-card gaps a touch on phones so the page isn't
     mostly whitespace. (Cards set this inline, so override with the same
     specificity + !important is unavailable on inline — instead we lean on the
     top margins that aren't inline; the lb grid + shared controls below.) */
  @media(max-width:600px){
    .lb-shared-controls{margin-top:32px !important;}
    .lb-2col{margin-top:16px !important;}
  }
  /* checklist: stacked card rows with a large notes field on phones */
  .ck-clabel{display:none;}
  @media(max-width:600px){
    .ck-colhead{display:none;}
    .ck-sticky{top:64px;padding:10px 0;gap:8px;}
    .ck-sticky .search{flex:1 1 100%;}
    .ck-actions .btn{flex:1 1 auto;justify-content:center;}
    .entry-family{margin-top:16px;}
    .entry-row{grid-template-columns:repeat(4,1fr);
      grid-template-areas:"name name name name" "male female teneral total" "notes notes notes notes";
      gap:10px 8px;padding:14px 12px;border:1px solid var(--border);border-radius:12px;margin-bottom:12px;background:var(--surface);}
    .entry-row.observed{background:rgba(95,139,166,.10);}
    .entry-name{grid-area:name;font-size:16px;font-weight:600;}
    .entry-row > .ck-count{flex-direction:column;gap:5px;}
    .entry-row > .ck-count:nth-child(2){grid-area:male;}
    .entry-row > .ck-count:nth-child(3){grid-area:female;}
    .entry-row > .ck-count:nth-child(4){grid-area:teneral;}
    .entry-row > .ck-count:nth-child(5){grid-area:total;}
    .entry-row .notes-wrap{grid-area:notes;}
    .ck-clabel{display:block;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-align:center;}
    .entry-row .notes-wrap input{min-height:46px;font-size:15px;padding:12px 12px;}
    .entry-row .notes-wrap input:focus{min-width:0;}
  }
  /* homepage hotspot rows are tappable (deep-link to the location card) */
  .lst-row[data-open-hotspot],.lst-row[data-open-activity]{cursor:pointer;}
  .lst-row[data-open-hotspot]:hover .lst-name,.lst-row[data-open-activity]:hover .lst-name{color:var(--sky-deep);}

  /* flight timeline: compact layout on phones */
  @media(max-width:600px){
    /* Fit the whole chart on screen — no horizontal scrolling. Dropping the
       inner horizontal-scroll container also lets the month header actually
       float (an overflow-x container silently breaks position:sticky). */
    .phenogrid-wrap{overflow:visible;border-radius:0;}
    .pg-scroll{overflow-x:visible;}
    .pg-inner{min-width:0;--pg-namew:98px;}
    .tl-scrollhint{display:none;}
    .pg-row,.pg-headrow{grid-template-columns:98px 1fr;grid-template-areas:"name chart" "flight chart";}
    .pg-name{grid-area:name;width:98px;padding:4px 7px 0;font-size:12px;font-weight:600;white-space:normal;line-height:1.08;align-self:end;background:#fff;box-shadow:1px 0 0 var(--border);}
    .pg-flight{grid-area:flight;display:block;width:98px;padding:0 7px 4px;font-size:9px;color:var(--muted);white-space:normal;line-height:1.05;align-self:start;background:#fff;box-shadow:1px 0 0 var(--border);}
    .pg-row:hover .pg-name,.pg-row:hover .pg-flight{background:var(--surface);}
    .pg-h.pg-flight{align-self:start;}
    .pg-chart{grid-area:chart;align-self:end;height:24px;}
    .pg-bar{width:86%;}
    .pg-groupdiv{font-size:13px;padding:5px 12px;}
    .pg-famname{font-size:10.5px;padding:3px 12px;}
    /* month labels: single letter + float below the app header while scrolling */
    .pg-headrow{position:sticky;top:64px;}
    .pg-h{padding:5px 6px;font-size:9px;}
    .m-full{display:none;}
    .m-abbr{display:inline;}
    .pg-mlabel{font-size:10px;padding:5px 0;}
    .tl-note{font-size:12px;}
  }

  /* location card bottom collapse button */
  .lc-collapse{display:block;width:100%;margin-top:16px;padding:11px 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--slate);font:inherit;font-weight:600;font-size:13px;cursor:pointer;}
  .lc-collapse:hover{border-color:var(--sky);background:var(--band);color:var(--ink);}
  /* species card deep-link focus highlight (from the Ode of the day CTA) */
  .spcard{scroll-margin-top:96px;}
  .spcard.sp-focus{box-shadow:0 0 0 3px var(--sky-deep);transition:box-shadow .3s ease;}
  /* iNaturalist project link on the homepage */
  .inat-project{margin:14px 0 0;font-size:14px;}
  .inat-project a{color:var(--sky-deep);font-weight:600;}