/* Delaware Odes — stylesheet
   ---------------------------------------------------------------------------
   The token block is lifted from Calvert Odes deliberately. This is a sibling
   site, not a new identity, and the two should read as the same hand. Only
   --tide is new: Delaware's odonate story is a coastal-plain one, and the
   hotspot views lean on a marsh/inland distinction that Calvert never needed. */
: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;--tide:#9a7f52;
  --radius:11px;--maxw:1180px;
  --fd:Georgia,"Times New Roman",serif;
  --fb:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fm:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{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;}
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;}
.skip-link{position:absolute;left:26px;top:-64px;z-index:1200;padding:8px 15px;border-radius:0 0 10px 10px;background:var(--ink);color:#fff;font-weight:600;font-size:13px;box-shadow:0 3px 10px rgba(49,69,79,.2);transition:top .16s ease;}
.skip-link:focus{top:0;}
.skip-link:hover,.skip-link:focus{text-decoration:none;}
#main:focus{outline:none;}
.view h1:focus{outline:none;}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* 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);}
.hdr-row{display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px;}
.wm{display:flex;align-items:center;gap:13px;cursor:pointer;background:none;border:0;padding:0;text-align:left;}
.wm-mark{width:44px;height:44px;flex:none;}
.wm-name{font-family:var(--fd);font-size:26px;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 button{background:none;border:0;color:var(--body);font-size:14.5px;font-weight:500;padding:6px 0;position:relative;cursor:pointer;}
.nav button:hover{color:var(--ink);}
.nav button.on{color:var(--ink);}
.nav button.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--moss);border-radius:2px;}

/* sample banner */
.sample{background:#fdf6e6;border-bottom:1px solid #ecdcb4;color:#6b5524;font-size:13.5px;}
.sample .wrap{padding-top:10px;padding-bottom:10px;}
.sample b{font-weight:600;}

/* page head */
.pagehead{padding:38px 0 4px;}
.pagehead .eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-deep);}
.pagehead h1{font-size:36px;margin:8px 0 6px;}
.pagehead p{margin:0;max-width:66ch;color:var(--body);}
.view{display:none;}
.view.on{display:block;}

/* stat strip */
.stats{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 4px;}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;min-width:132px;}
.stat b{display:block;font-family:var(--fd);font-size:24px;color:var(--ink);line-height:1.1;}
.stat span{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:24px 0 18px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);}
.filters input,.filters select{font-family:inherit;font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--border);border-radius:8px;padding:9px 11px;min-height:40px;}
.filters input{flex:1 1 220px;min-width:180px;}
.filters .count{margin-left:auto;font-size:13px;color:var(--muted);}
.clear{background:none;border:0;color:var(--slate);font-size:13px;font-weight:600;cursor:pointer;padding:6px;}

/* species grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px;margin:0 0 40px;}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:0;overflow:hidden;text-align:left;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;display:flex;flex-direction:column;}
.card:hover{border-color:var(--sky);box-shadow:0 3px 12px rgba(49,69,79,.08);}
.card-ph{aspect-ratio:4/3;background:var(--band);position:relative;overflow:hidden;}
.card-ph img{width:100%;height:100%;object-fit:cover;display:block;}
.card-ph .none{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase;}
.card-b{padding:13px 15px 15px;flex:1;display:flex;flex-direction:column;gap:3px;}
.card-b .cn{font-family:var(--fd);font-size:17px;color:var(--ink);line-height:1.25;}
.card-b .sn{font-style:italic;font-size:13px;color:var(--muted);}
.card-b .fam{font-size:12px;color:var(--body);margin-top:4px;}
.card-meta{display:flex;align-items:center;gap:8px;margin-top:9px;}

/* abundance pip */
.ab{font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:20px;border:1px solid;}
.ab-A{background:#e7f0ea;border-color:#c3d9cb;color:#3f5c48;}
.ab-C{background:#eaf1f6;border-color:#c9dcea;color:#3c5464;}
.ab-U{background:#f4f1e6;border-color:#e0d9c0;color:#6b6540;}
.ab-R{background:#f8ecea;border-color:#e8ccc6;color:#8a4b3d;}
.recs{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;}

/* detail panel */
.detail{border:1px solid var(--border);border-radius:var(--radius);background:#fff;margin:0 0 30px;overflow:hidden;}
.detail-top{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:0;}
.detail-ph{background:var(--band);min-height:210px;position:relative;}
.detail-ph img{width:100%;height:100%;object-fit:cover;display:block;}
.detail-ph .none{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;}
.detail-body{padding:20px 22px 22px;}
.detail-body h2{font-size:27px;}
.detail-body .sn{font-style:italic;color:var(--muted);margin:3px 0 0;}
.detail-close{float:right;background:none;border:1px solid var(--border);border-radius:8px;color:var(--slate);font-size:13px;font-weight:600;padding:7px 12px;cursor:pointer;}
.detail-close:hover{border-color:var(--sky);}
.kv{display:flex;flex-wrap:wrap;gap:6px 26px;margin:14px 0 0;padding:0;list-style:none;}
.kv li{font-size:13.5px;}
.kv b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.credit{font-size:11.5px;color:var(--muted);padding:7px 10px;line-height:1.4;}

/* phenology */
.pheno{padding:18px 22px 4px;border-top:1px solid var(--border);}
.pheno h3,.hs-list h3{font-size:15px;letter-spacing:.02em;}
.bars{display:flex;gap:2px;align-items:flex-end;height:76px;margin:14px 0 4px;}
.bar-mo{flex:1;display:flex;gap:1px;align-items:flex-end;height:100%;border-bottom:1px solid var(--border);}
.bar{flex:1;background:var(--sky);border-radius:2px 2px 0 0;min-height:1px;transition:background .15s ease;}
.bar.dry{background:var(--band);}
.bar.peak{background:var(--sky-deep);}
.molabels{display:flex;gap:2px;margin-bottom:16px;}
.molabels span{flex:1;text-align:center;font-size:10.5px;color:var(--muted);letter-spacing:.04em;}
.thin{font-size:12.5px;color:var(--tide);margin:0 0 14px;}

/* ranked hotspots inside detail */
.hs-list{padding:18px 22px 22px;border-top:1px solid var(--border);}
.rank{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;}
.rank li{display:flex;align-items:center;gap:11px;font-size:14px;}
.rank .n{font-family:var(--fm);font-size:11.5px;color:var(--muted);width:20px;flex:none;}
.rank .nm{flex:1;min-width:0;}
.rank .meter{flex:0 0 108px;height:7px;background:var(--band);border-radius:4px;overflow:hidden;}
.rank .meter i{display:block;height:100%;background:var(--moss);}
.rank .c{font-variant-numeric:tabular-nums;font-size:13px;color:var(--body);width:44px;text-align:right;flex:none;}

/* hotspot cards */
.hs-grid{display:flex;flex-direction:column;gap:12px;margin:0 0 40px;}
.hs{border:1px solid var(--border);border-radius:var(--radius);background:#fff;overflow:hidden;}
.hs-head{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;padding:16px 18px;cursor:pointer;text-align:left;}
.hs-head:hover{background:var(--surface);}
.hs-title{flex:1;min-width:0;}
.hs-title .nm{font-family:var(--fd);font-size:18px;color:var(--ink);line-height:1.25;}
.hs-title .loc{font-size:12.5px;color:var(--muted);margin-top:2px;}
.hs-nums{display:flex;gap:20px;flex:none;}
.hs-nums div{text-align:right;}
.hs-nums b{display:block;font-family:var(--fd);font-size:19px;color:var(--ink);line-height:1.15;font-variant-numeric:tabular-nums;}
.hs-nums span{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.chev{flex:none;color:var(--muted);transition:transform .18s ease;font-size:13px;}
.hs.open .chev{transform:rotate(90deg);}
.hs-body{display:none;padding:2px 18px 20px;border-top:1px solid var(--border);}
.hs.open .hs-body{display:block;}
.closed-pill{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#8a4b3d;background:#f8ecea;border:1px solid #e8ccc6;border-radius:20px;padding:3px 9px;}
.closed-note{margin:14px 0 0;padding:11px 13px;background:#f8ecea;border:1px solid #e8ccc6;
  border-radius:9px;color:#6d3d33;font-size:13px;line-height:1.5;}
.closed-note b{font-weight:700;}
.pill-poly{color:#3f5c48;background:var(--band);border-color:#c3d9cb;}
.pill-circle{color:#6b6540;background:#f4f1e6;border-color:#e0d9c0;}
.srcpill{display:inline-block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);border-radius:20px;padding:2px 9px;margin:14px 0 4px;}

/* records + candidates */
.sec{font-size:21px;margin:34px 0 4px;padding-top:22px;border-top:1px solid var(--border);}
.cand-lede{margin:10px 0 18px;max-width:70ch;}
.cand{border:1px solid var(--border);border-radius:var(--radius);background:#fff;
  padding:16px 18px;margin:0 0 12px;}
.cand-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.cand-n{font-family:var(--fm);font-size:11.5px;color:var(--muted);flex:none;}
.cand-name{font-family:var(--fd);font-size:18px;color:var(--ink);flex:1;min-width:0;}
.cand-nums{font-size:13px;color:var(--body);font-variant-numeric:tabular-nums;}
.cand-nums b{color:var(--ink);}
.cand-v{margin:10px 0 0;padding:9px 12px;border-radius:8px;font-size:13px;line-height:1.5;}
.cand-add{background:var(--band);border:1px solid #c3d9cb;color:#3f5c48;}
.cand-widen{background:#f4f1e6;border:1px solid #e0d9c0;color:#6b6540;}
.cand-kv{display:flex;flex-wrap:wrap;gap:6px 26px;margin:13px 0 0;padding:0;list-style:none;}
.cand-kv li{font-size:13.5px;}
.cand-kv b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:600;}
.cand-alt{margin:11px 0 0;font-size:12.5px;color:var(--muted);}
.cand-code{margin-top:13px;}
.cand-code summary{font-size:13px;font-weight:600;color:var(--slate);cursor:pointer;}
.cand-code pre{background:var(--surface);border:1px solid var(--border);border-radius:8px;
  padding:11px 13px;margin:10px 0 6px;font:12px/1.6 var(--fm);color:var(--ink);
  white-space:pre-wrap;overflow-x:auto;}
.dim{color:var(--muted);font-size:12.5px;}
table.ob{border-collapse:collapse;width:100%;font-size:13.5px;}
table.ob th,table.ob td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);}
table.ob th{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  font-weight:600;}
td.ob-d,td.ob-c{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--body);}
td.ob-c{font-size:12.5px;color:var(--muted);}
.ob-un{color:var(--tide);}
.btn-more{display:block;margin:18px auto 40px;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);color:var(--slate);font-size:14px;font-weight:600;
  padding:11px 20px;cursor:pointer;}
.btn-more:hover{border-color:var(--sky);}

/* empty + footer */
.empty{border:1px dashed var(--border);border-radius:var(--radius);padding:34px 22px;text-align:center;color:var(--muted);margin:0 0 40px;}
.empty b{display:block;color:var(--ink);font-family:var(--fd);font-size:18px;margin-bottom:5px;}
.ft{background:var(--ink);color:#c9d5da;margin-top:40px;padding:26px 0;font-size:13px;}
.ft a{color:#fff;}

@media(max-width:640px){
  table.ob td.ob-c,table.ob th:nth-child(4){display:none;}
}
@media(max-width:760px){
  .hdr-row{height:66px;}
  .wm-name{font-size:21px;}
  .wm-tag{display:none;}
  .nav{gap:15px;}
  .pagehead h1{font-size:29px;}
  .detail-top{grid-template-columns:1fr;}
  .detail-ph{min-height:190px;}
  .hs-head{flex-wrap:wrap;}
  .hs-nums{gap:16px;}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
  html{scroll-behavior:auto;}
}