/* barkhood — concept demo styles (shared across landing + animal profiles) */
:root{
  --ink:#142A33; --navy:#1B3A4B; --teal:#2E6E6E; --amber:#F2A65A;
  --coral:#E8743B; --cream:#F7F4EF; --white:#fff; --mute:#6B7B82;
  --line:#E7E1D8; --good:#2E8B6E;
  --shadow:0 1px 3px rgba(20,42,51,.08), 0 8px 24px rgba(20,42,51,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px; margin:0 auto; padding:0 22px}
.narrow{max-width:880px}
.mono{font-family:"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
a{color:var(--teal)}
h1,h2,h3{line-height:1.15; margin:0 0 .4em}
section{padding:62px 0}
.eyebrow{font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--coral); margin:0 0 14px}
.lead{color:var(--mute); font-size:1.06rem; max-width:62ch}

/* demo ribbon */
.demo{background:#2a2118; color:#f3d9bf; text-align:center; font-size:.8rem; padding:7px 12px; letter-spacing:.02em}
.demo b{color:#fff}
.demo a{color:var(--amber); text-decoration:underline; text-underline-offset:2px; font-weight:700;
  white-space:nowrap; padding:4px 2px; display:inline-block}
.demo a:hover{color:#fff}

/* nav */
nav{position:sticky; top:0; z-index:40; background:rgba(27,58,75,.97); backdrop-filter:saturate(140%) blur(6px); color:#fff; border-bottom:1px solid rgba(255,255,255,.08)}
nav .wrap{display:flex; align-items:center; gap:16px; height:62px; flex-wrap:nowrap}
.logo{font-weight:800; font-size:1.32rem; letter-spacing:-.02em; color:#fff; text-decoration:none}
.logo span{color:var(--amber)}
.chip-chapter{font-size:.74rem; color:#cdd9de; border:1px solid rgba(255,255,255,.18); border-radius:99px; padding:3px 10px}
nav .links{margin-left:auto; display:flex; gap:18px; align-items:center; flex-wrap:nowrap}
nav .links a{color:#dfe7ea; text-decoration:none; font-size:.92rem; font-weight:600; white-space:nowrap}
nav .links a:hover{color:#fff}
/* Donate lives in the toolbar (outside .links). Desktop: sits just right of the
   right-aligned links group with a tidy gap. Mobile: pushed to the right with the
   hamburger (see ≤820px block). ≥44px tap target on mobile. */
.navdonate{margin-left:18px}
/* mobile nav disclosure — hidden on desktop (shown only ≤820px below) */
.navtoggle{display:none; margin-left:auto; width:44px; height:44px; padding:0;
  background:transparent; border:1px solid rgba(255,255,255,.22); border-radius:10px;
  cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px}
.navtoggle span{display:block; width:20px; height:2px; border-radius:2px; background:#dfe7ea;
  transition:transform .18s ease, opacity .18s ease}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.btn{display:inline-block; border:0; border-radius:10px; padding:11px 18px; font-weight:800; font-size:.95rem; cursor:pointer; text-decoration:none; transition:transform .06s ease, box-shadow .15s ease}
.btn:active{transform:translateY(1px)}
.btn-amber{background:var(--amber); color:var(--navy); box-shadow:0 6px 16px rgba(242,166,90,.35)}
.btn-amber:hover{box-shadow:0 8px 22px rgba(242,166,90,.5)}
.btn-ghost{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.4)}
.btn-outline{background:#fff; color:var(--navy); border:1.5px solid var(--line)}
.btn-sm{padding:8px 14px; font-size:.86rem}

/* hero */
.hero{background:linear-gradient(160deg,#173341 0%, #1B3A4B 55%, #224b5e 100%); color:#fff}
.hero .wrap{padding-top:70px; padding-bottom:64px}
.hero h1{font-size:clamp(2.2rem,5vw,3.5rem); font-weight:800; letter-spacing:-.02em}
.hero h1 .u{color:var(--amber)}
.hero p.sub{color:#cfe0e6; font-size:1.18rem; max-width:60ch; margin:.2em 0 1.6em}
.hero .cta{display:flex; gap:14px; flex-wrap:wrap}
.heroStats{display:flex; gap:34px; flex-wrap:wrap; margin-top:42px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14)}
.heroStats div{min-width:120px}
.heroStats b{display:block; font-size:1.75rem; font-weight:800; color:#fff}
.heroStats span{font-size:.82rem; color:#b8c9d0}

/* generic cards / grids */
.card{background:var(--white); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow)}
.pad{padding:22px 24px}
.grid{display:grid; gap:16px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(6,1fr)}

/* stat tiles */
.stat{background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 16px; box-shadow:var(--shadow)}
.stat b{display:block; font-size:1.5rem; font-weight:800; color:var(--navy)}
.stat .lbl{font-size:.74rem; color:var(--mute); text-transform:uppercase; letter-spacing:.06em; margin-top:2px}
.stat.alt b{color:var(--teal)}

/* save ticket */
.ticket{display:grid; grid-template-columns:108px 1fr; gap:20px}
.avatar{width:108px; height:108px; border-radius:16px; display:grid; place-items:center; font-size:50px;
  background:radial-gradient(120% 120% at 30% 20%, #ffd9b0, #f2a65a 70%, #e8743b)}
.avatar.cat{background:radial-gradient(120% 120% at 30% 20%, #cfe7e2, #2E6E6E 75%, #255b5b)}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:800; padding:4px 10px; border-radius:99px; letter-spacing:.02em}
.b-teal{background:#e3f0ec; color:#1f6e57}
.b-amber{background:#fbecd9; color:#b66a23}
.b-coral{background:#fbe3d8; color:#c0461f}
.b-navy{background:#e4ebef; color:#274b5e}
.route{color:var(--mute); font-size:.92rem; margin:2px 0 12px}
.route b{color:var(--ink)}
.lineitems{width:100%; border-collapse:collapse; margin:4px 0 10px; font-size:.92rem}
.lineitems td{padding:6px 0; border-bottom:1px dashed var(--line)}
.lineitems td:last-child{text-align:right; font-weight:700}
.lineitems tr.total td{border-bottom:0; font-weight:800; color:var(--navy); padding-top:10px}
.progress{height:10px; background:#eee6db; border-radius:99px; overflow:hidden}
.progress > span{display:block; height:100%; width:0; background:linear-gradient(90deg,#f2a65a,#e8743b); border-radius:99px; transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.progress.done > span{background:linear-gradient(90deg,#3f9e9e,#2E8B6E)}
.pmeta{display:flex; justify-content:space-between; font-size:.82rem; color:var(--mute); margin-top:7px}

/* ledger */
.tabs{display:flex; gap:8px; margin:0 0 4px}
.tab{border:1px solid var(--line); background:#fff; color:var(--mute); border-radius:99px; padding:6px 14px; font-size:.85rem; font-weight:700; cursor:pointer}
.tab.on{background:var(--navy); color:#fff; border-color:var(--navy)}
table.ledger{width:100%; border-collapse:collapse; font-size:.9rem}
table.ledger th{ text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--mute); padding:10px 10px; border-bottom:2px solid var(--line)}
table.ledger td{padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
table.ledger tr:last-child td{border-bottom:0}
.amt{font-weight:800; text-align:right; white-space:nowrap}
.amt.in{color:var(--good)}
.amt.out{color:var(--coral)}
.tok{font-size:.82rem; color:var(--navy)}
.sub2{font-size:.76rem; color:var(--mute)}
.receipt{font-size:.78rem; font-weight:700; text-decoration:none; color:var(--teal); border:1px solid #cfe0db; border-radius:7px; padding:2px 8px; white-space:nowrap}
.dir{display:inline-block; width:22px; height:22px; border-radius:6px; text-align:center; line-height:22px; font-weight:900; font-size:.8rem}
.dir.in{background:#e3f0ec; color:#1f6e57}
.dir.out{background:#fbe3d8; color:#c0461f}

/* prevention bar */
.pfbar{height:30px; border-radius:9px; overflow:hidden; display:flex; border:1px solid var(--line)}
.pfbar i{display:flex; align-items:center; justify-content:center; color:#fff; font-size:.74rem; font-weight:800; font-style:normal}
.seg-spay{background:#2E8B6E} .seg-div{background:#3f9e9e} .seg-place{background:#9bb0b8}
.floormark{position:relative; height:18px; margin-top:6px}
.floormark .m{position:absolute; left:45%; top:0; transform:translateX(-50%); font-size:.72rem; color:var(--coral); font-weight:800}
.floormark .m::before{content:""; position:absolute; left:50%; top:-12px; height:10px; width:2px; background:var(--coral)}

/* outcomes */
.outcome{display:flex; align-items:center; gap:12px; padding:13px 16px; border:1px solid var(--line); border-radius:11px; background:#fff; text-decoration:none; color:inherit}
a.outcome:hover{border-color:var(--teal); box-shadow:var(--shadow)}
.outcome .nm{font-weight:800}
.outcome .ds{font-size:.85rem; color:var(--mute)}
.o-chip{margin-left:auto; font-size:.72rem; font-weight:800; padding:4px 11px; border-radius:99px; letter-spacing:.03em}
.o-placed{background:#e3f0ec; color:#1f6e57}
.o-redir{background:#e9eef5; color:#3a5a8a}
.o-lost{background:#f1ece6; color:#7a6a5a}
.o-active{background:#fbecd9; color:#b66a23}

/* how / pillars */
.flow{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:10px; align-items:stretch}
.flow .step{background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:var(--shadow)}
.flow .step h4{margin:.2em 0 .3em; color:var(--navy)}
.flow .step p{margin:0; font-size:.88rem; color:var(--mute)}
.flow .arr{align-self:center; color:var(--amber); font-size:1.6rem; font-weight:900}
.gate{display:flex; gap:10px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-left:4px solid var(--teal); border-radius:10px; padding:13px 15px}
.gate b{color:var(--navy)}
.pillar h4{color:var(--navy); margin:.1em 0 .35em}
.pillar p{margin:0; color:var(--mute); font-size:.92rem}
.pillar .n{font-weight:800; color:var(--amber); font-size:1.1rem}

/* animal gallery (landing) */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.animal-card{display:block; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); transition:transform .08s ease, box-shadow .15s ease}
.animal-card:hover{transform:translateY(-3px); box-shadow:0 10px 28px rgba(20,42,51,.14)}
.animal-card .photo{height:130px; display:grid; place-items:center; font-size:56px; background:radial-gradient(130% 130% at 30% 15%, #ffe2c2, #f2a65a 72%, #e8743b)}
.animal-card .photo.cat{background:radial-gradient(130% 130% at 30% 15%, #d6ece7, #3f9e9e 72%, #255b5b)}
.animal-card .photo.lost{background:radial-gradient(130% 130% at 30% 15%, #e9e3dc, #b9a89a 75%, #8a7a6a); filter:grayscale(.25)}
.animal-card .body{padding:14px 16px}
.animal-card .nm{font-weight:800; font-size:1.05rem}
.animal-card .meta{font-size:.82rem; color:var(--mute); margin:1px 0 9px}
.animal-card .more{font-size:.82rem; color:var(--teal); font-weight:700; margin-top:8px}

/* cta band */
.ctaband{background:linear-gradient(135deg,#2E6E6E,#255b5b); color:#fff; border-radius:18px; padding:40px 38px; text-align:center}
.ctaband h2{font-size:2rem; color:#fff}
.ctaband p{color:#d7ebe9; max-width:60ch; margin:.3em auto 1.4em}

footer{background:var(--navy); color:#cdd9de; padding:46px 0 38px; margin-top:20px}
footer .wrap{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:26px}
footer h5{color:#fff; font-size:.95rem; margin:0 0 10px}
footer a{color:#bcd0d6; text-decoration:none; display:block; font-size:.9rem; margin-bottom:6px}
footer .fine{grid-column:1/-1; border-top:1px solid rgba(255,255,255,.12); margin-top:18px; padding-top:18px; font-size:.78rem; color:#8fa6ae}

.sectionhead{display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:22px}
.promise{display:flex; align-items:center; gap:10px; font-size:.86rem; color:var(--mute)}
.dot{width:8px;height:8px;border-radius:99px;background:var(--good)}

/* ===== animal profile page ===== */
.back{display:inline-flex; align-items:center; gap:6px; color:var(--mute); text-decoration:none; font-size:.9rem; font-weight:600; margin-bottom:18px}
.back:hover{color:var(--ink)}
.profile-hero{display:grid; grid-template-columns:240px 1fr; gap:30px; align-items:start}
.bigphoto{width:240px; height:240px; border-radius:20px; display:grid; place-items:center; font-size:108px; box-shadow:var(--shadow);
  background:radial-gradient(130% 130% at 30% 15%, #ffe2c2, #f2a65a 72%, #e8743b)}
.bigphoto.cat{background:radial-gradient(130% 130% at 30% 15%, #d6ece7, #3f9e9e 72%, #255b5b)}
.bigphoto.lost{background:radial-gradient(130% 130% at 30% 15%, #e9e3dc, #b9a89a 75%, #8a7a6a); filter:grayscale(.25)}
.photo-note{font-size:.72rem; color:var(--mute); text-align:center; margin-top:8px}
.profile-hero h1{font-size:2.4rem; margin-bottom:.1em}
.vitals{display:flex; flex-wrap:wrap; gap:8px 22px; color:var(--mute); font-size:.92rem; margin:6px 0 16px}
.vitals b{color:var(--ink)}
.story p{font-size:1.05rem; max-width:64ch; margin:0 0 1em}
.story p:first-letter{}
/* timeline */
.timeline{position:relative; margin:6px 0 0; padding-left:26px}
.timeline::before{content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--line)}
.tl-item{position:relative; padding:0 0 20px 0}
.tl-item::before{content:""; position:absolute; left:-26px; top:3px; width:16px; height:16px; border-radius:99px; background:#fff; border:3px solid var(--amber)}
.tl-item.done::before{background:var(--teal); border-color:var(--teal)}
.tl-item.now::before{background:var(--amber); border-color:var(--amber); box-shadow:0 0 0 4px rgba(242,166,90,.25)}
.tl-item.lost::before{background:#8a7a6a; border-color:#8a7a6a}
.tl-date{font-size:.76rem; color:var(--mute); font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.tl-item h4{margin:.1em 0 .15em; font-size:1rem; color:var(--navy)}
.tl-item p{margin:0; font-size:.9rem; color:var(--mute)}

@media(max-width:1024px){ .chip-chapter{display:none} }
@media(max-width:820px){
  .g3{grid-template-columns:1fr 1fr} .g4{grid-template-columns:1fr 1fr 1fr}
  .flow{grid-template-columns:1fr} .flow .arr{transform:rotate(90deg); justify-self:center}
  footer .wrap{grid-template-columns:1fr 1fr}

  /* mobile nav: hamburger visible; links collapse into a dropdown panel
     (replaces the old "hide every link but the button" behavior).
     Toolbar reads: logo · Donate · ☰  (links are the absolute dropdown). */
  .navtoggle{display:flex; margin-left:10px}
  /* .links is position:absolute (out of flow), so margin-left:auto on Donate
     pushes the Donate+hamburger group to the right edge of the toolbar. */
  .navdonate{margin-left:auto; min-height:44px; display:inline-flex; align-items:center}
  nav .links{
    position:absolute; top:62px; right:0; left:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(20,42,51,.99); backdrop-filter:saturate(140%) blur(8px);
    border-bottom:1px solid rgba(255,255,255,.12); box-shadow:0 12px 24px rgba(0,0,0,.28);
    padding:6px 16px 14px; margin-left:0;
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition:max-height .22s ease, opacity .18s ease, visibility .18s;
  }
  nav .links.open{max-height:80vh; opacity:1; visibility:visible; overflow:auto}
  nav .links a{
    display:flex; align-items:center; min-height:48px; width:100%;
    font-size:1rem; padding:6px 4px; border-bottom:1px solid rgba(255,255,255,.08);
  }
  nav .links a:last-child{border-bottom:0}
  nav .links a.btn{justify-content:center; margin-top:12px; min-height:48px}
  nav .links a.acct-chip{justify-content:flex-start}

  .ticket{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .profile-hero{grid-template-columns:1fr; justify-items:center; text-align:center}
  .profile-hero .info{text-align:left}
  .vitals{justify-content:center}
}
@media(max-width:560px){ .g3,.g4{grid-template-columns:1fr 1fr} .gallery{grid-template-columns:1fr 1fr} .heroStats div{min-width:90px} }

/* ===== donor private account ===== */
.private-banner{background:#10242e; color:#cfe0e6}
.private-banner .wrap{display:flex; align-items:center; gap:12px; padding:11px 22px; font-size:.9rem; flex-wrap:wrap}
.private-banner .lock{font-size:1.05rem}
.private-banner b{color:#fff}
.private-banner .tok{margin-left:auto; font-size:.78rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:99px; padding:4px 12px; color:#dfe7ea}
.acct-chip{display:flex; align-items:center; gap:8px; font-size:.84rem; color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:99px; padding:4px 12px 4px 5px; text-decoration:none}
.acct-chip .av{width:25px; height:25px; border-radius:99px; background:var(--amber); color:var(--navy); display:grid; place-items:center; font-weight:800; font-size:.74rem}
.recurring{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.recurring .big{font-size:1.5rem; font-weight:800; color:var(--navy)}
.gift-animal{display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid var(--line); border-radius:11px; background:#fff; text-decoration:none; color:inherit}
.gift-animal:hover{border-color:var(--teal); box-shadow:var(--shadow)}
.gift-animal .em{width:46px; height:46px; border-radius:11px; display:grid; place-items:center; font-size:24px; flex:0 0 auto; background:radial-gradient(120% 120% at 30% 20%, #ffd9b0, #f2a65a 75%, #e8743b)}
.gift-animal .em.cat{background:radial-gradient(120% 120% at 30% 20%, #cfe7e2, #2E6E6E 78%, #255b5b)}
.gift-animal .nm{font-weight:700}
.gift-animal .what{font-size:.82rem; color:var(--mute)}
.gift-animal .ga-amt{margin-left:auto; font-weight:800; color:var(--good); white-space:nowrap}
.privacy-card{background:#fff; border:1px solid var(--line); border-left:4px solid var(--good); border-radius:12px; padding:18px 22px}
.privacy-card ul{margin:10px 0 0; padding-left:18px}
.privacy-card li{margin-bottom:7px; color:var(--ink); font-size:.94rem}

/* ===== data / transparency dashboard ===== */
.databoard{position:relative; width:100%; aspect-ratio:13/10; background:linear-gradient(125deg,#e9f1ee 0 47%, #f4efe6 53% 100%); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow)}
.potomac{position:absolute; left:-10%; top:18%; width:130%; height:0; border-top:3px solid rgba(63,158,158,.35); transform:rotate(34deg); transform-origin:left center; pointer-events:none}
.region-label{position:absolute; font-size:.82rem; font-weight:800; letter-spacing:.16em; color:#aebcb7; pointer-events:none}
.county{position:absolute; border:0; border-radius:9px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.4); cursor:pointer; outline:2px solid rgba(255,255,255,.55); box-shadow:0 2px 6px rgba(20,42,51,.14); transition:transform .08s ease, box-shadow .12s ease; padding:2px; font-family:inherit}
.county:hover{transform:translateY(-2px); box-shadow:0 7px 18px rgba(20,42,51,.24)}
.county.sel{outline:3px solid var(--navy); z-index:6}
.county.dc{outline:2px solid #fff; box-shadow:0 0 0 3px var(--amber), 0 2px 6px rgba(20,42,51,.2)}
.county .nm{font-size:.62rem; font-weight:700; line-height:1.05}
.county .pct{font-size:1rem; font-weight:800; line-height:1.05}
.sev1{background:#1f7a5e; fill:#1f7a5e} .sev2{background:#3f9e7a; fill:#3f9e7a} .sev3{background:#d98a3c; fill:#d98a3c} .sev4{background:#d2602f; fill:#d2602f} .sev5{background:#b23b2e; fill:#b23b2e}
.sev-nodata{background:#9fb0b5; fill:#cdd6d9} svg.dmvmap path.county.sev-nodata{fill:#cdd6d9}
/* real geographic choropleth */
.mapframe{background:#eef2f0; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:10px}
svg.dmvmap{width:100%; height:auto; display:block}
svg.dmvmap path.county{stroke:#fff; stroke-width:1; cursor:pointer; outline:none; transition:stroke-width .1s ease, filter .1s ease}
svg.dmvmap path.county:hover{transform:none; stroke-width:2; filter:brightness(1.08)}
svg.dmvmap path.county.sel{stroke:#142A33; stroke-width:2.5}
svg.dmvmap path.county.dc{stroke:#F2A65A; stroke-width:1.6}
svg.dmvmap path.county.dc.sel{stroke:#142A33}
svg.dmvmap text.clbl{font-size:11px; font-weight:700; fill:#fff; text-anchor:middle; paint-order:stroke; stroke:rgba(0,0,0,.32); stroke-width:2.2px; pointer-events:none}
svg.dmvmap text.clbl.pct{font-size:11.5px; font-weight:800}
svg.dmvmap text.statelbl{font-size:13px; font-weight:800; fill:#9fb0ab; letter-spacing:.14em; pointer-events:none}
.legend{display:flex; gap:0; align-items:center; flex-wrap:wrap; margin-top:14px; font-size:.78rem; color:var(--mute)}
.legend .sw{display:inline-flex; align-items:center; gap:6px; margin-right:16px}
.legend .box{width:16px; height:16px; border-radius:4px; display:inline-block}
.detailpanel .big{font-size:2.4rem; font-weight:800; line-height:1}
.kv{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.92rem}
.kv:last-child{border-bottom:0}
.kv span{color:var(--mute)} .kv b{color:var(--navy)}
.trend-up{color:var(--coral); font-weight:800}
.trend-down{color:var(--good); font-weight:800}
.linechart{width:100%; height:auto; display:block}
.lc-grid{stroke:#e7e1d8; stroke-width:1}
.lc-axis{stroke:#cfc7bb; stroke-width:1.2}
.lc-line{fill:none; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round}
.lc-lbl{font-size:11px; fill:#8a949a}
.lc-dot{stroke:#fff; stroke-width:1.5}
.chart-legend{display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; font-size:.84rem}
.chart-legend span{display:inline-flex; align-items:center; gap:7px; color:var(--ink)}
.chart-legend i{width:18px; height:4px; border-radius:99px; display:inline-block}
.sev-dot{width:10px; height:10px; border-radius:99px; display:inline-block; margin-right:7px; vertical-align:middle}
table.datatable{width:100%; border-collapse:collapse; font-size:.9rem}
table.datatable th{text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--mute); padding:10px; border-bottom:2px solid var(--line)}
table.datatable td{padding:11px 10px; border-bottom:1px solid var(--line)}
table.datatable td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
table.datatable tr:last-child td{border-bottom:0}
table.datatable tr.src td{background:#fbf1ee}
@media(max-width:760px){ .databoard{aspect-ratio:1/1} .county .nm{font-size:.52rem} .county .pct{font-size:.8rem} }

/* ===== wide data tables =====
   Desktop: a normal table. The .tablescroll wrapper is a harmless no-op here
   (it only scrolls if a table somehow exceeds its container). On mobile (≤760px)
   each row becomes a labeled card — see the responsive block below. */
.tablecard{overflow:hidden}
.tablescroll{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin}

/* accessible visually-hidden: keep <thead> for screen readers when we card-ify */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ===== mobile responsive: data page + county pages ===== */
@media(max-width:760px){
  section{padding:42px 0}
  .wrap{padding:0 16px}

  /* nav: links are hidden <820px; keep the donate button tappable & from overflowing */
  nav .wrap{gap:10px}
  nav .links{gap:10px}
  nav .links a.btn{padding:9px 13px}

  /* hero stat strip: 2-up grid instead of a cramped wrapping flex row */
  .heroStats{display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; margin-top:28px; padding-top:20px}
  .heroStats div{min-width:0}
  .heroStats b{font-size:1.45rem}

  /* DATA PAGE — choropleth: stack map over detail panel, panel un-sticks and reflows below */
  .mapgrid{grid-template-columns:1fr !important; gap:16px}
  .detailpanel{position:static !important; top:auto !important}
  .detailpanel .big{font-size:2rem}

  /* COUNTY PAGE — above-fold (headline | trend) and methodology (two-col) stack.
     LANDING PAGE reuses .twocol (custody gates) — same breakpoint, no new system. */
  .abovefold{grid-template-columns:1fr !important}
  .twocol{grid-template-columns:1fr !important}

  /* LANDING PAGE — glass-wall split (save ticket | prevention floor) stacks */
  .splitcol{grid-template-columns:1fr !important}

  /* LANDING PAGE — opt-in full-width for pillars + outcomes only (.g3.stack).
     Higher specificity (0,2,0) than the .g3 2-up rule (0,1,0), so the other
     .g3/.g4/.gallery grids keep their 2-up behavior untouched. */
  .g3.stack{grid-template-columns:1fr}

  /* "where the dogs went" stacked-bar legend already auto-fits; ensure single column */
  .ob-row b{min-width:42px}

  /* LANDING PAGE — ledger filter tabs: bump to ≥44px touch targets, allow wrap */
  .tabs{flex-wrap:wrap}
  .tab{padding:11px 16px; min-height:44px}

  /* ===== wide tables -> stacked cards on mobile =====
     Each <tr> becomes a card; each <td> a labeled line (label from data-label,
     value right-aligned). <thead> is visually hidden but kept for a11y. Applies
     to .datatable (data.html "by shelter", county per-shelter) and .ledger. */
  .tablescroll{overflow:visible}                    /* no side-scroll: we stack instead */
  .tablescroll table.datatable,
  .tablescroll table.ledger{display:block; min-width:0; font-size:.92rem}
  .tablescroll table.datatable thead,
  .tablescroll table.ledger thead{                  /* sr-only: hidden, still read */
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .tablescroll table.datatable tbody,
  .tablescroll table.ledger tbody{display:block}
  .tablescroll table.datatable tr,
  .tablescroll table.ledger tr{
    display:block; background:#fff; border:1px solid var(--line);
    border-radius:11px; box-shadow:var(--shadow); padding:6px 14px; margin-bottom:12px;
  }
  /* source-row highlight (data.html) keeps its tint as a card */
  .tablescroll table.datatable tr.src{background:#fbf1ee}
  .tablescroll table.datatable td,
  .tablescroll table.ledger td{
    display:flex; align-items:baseline; justify-content:space-between; gap:14px;
    padding:8px 0; border:0; border-bottom:1px solid var(--line);
    text-align:right; white-space:normal; min-height:40px;
  }
  .tablescroll table.datatable tr td:last-child,
  .tablescroll table.ledger tr td:last-child{border-bottom:0}
  /* label on the left from data-label; hide on cells that don't carry one */
  .tablescroll table.datatable td[data-label]::before,
  .tablescroll table.ledger td[data-label]::before{
    content:attr(data-label); text-align:left; flex:0 0 auto;
    font-size:.7rem; text-transform:uppercase; letter-spacing:.06em;
    color:var(--mute); font-weight:700; padding-top:1px;
  }
  /* first cell (shelter name / direction+name) reads as the card title */
  .tablescroll table.datatable td:first-child,
  .tablescroll table.ledger td:first-child{
    text-align:left; font-weight:700; font-size:1rem;
  }
  .tablescroll table.datatable td:first-child::before,
  .tablescroll table.ledger td:first-child::before{display:none}
  /* numbers stay tabular & on the right; badge/links sit right too */
  .tablescroll table.datatable td.num,
  .tablescroll table.ledger td.amt{font-variant-numeric:tabular-nums}
  /* LEDGER ONLY — Detail leads the card, no label; Date drops its label too.
     Make the ledger card a flex column so `order` can float Detail to the top
     WITHOUT reordering the HTML columns (desktop column order is preserved). */
  .tablescroll table.ledger tr{display:flex; flex-direction:column}
  .tablescroll table.ledger td[data-label="Detail"]{
    order:-1; text-align:left; font-weight:700; font-size:1rem;
  }
  .tablescroll table.ledger td[data-label="Detail"]::before,
  .tablescroll table.ledger td[data-label="Date"]::before{display:none}  /* self-evident: no label */
  /* the ledger's tiny direction-arrow cell is decorative; fold it away on mobile */
  .tablescroll table.ledger td.dircell{display:none}
  /* empty cells (e.g. a donation row's blank Receipt) collapse — no empty line */
  .tablescroll table.datatable td:empty,
  .tablescroll table.ledger td:empty{display:none}
}

/* very small phones (~360px): tighten type so nothing overflows the viewport */
@media(max-width:380px){
  .heroStats{grid-template-columns:1fr}
  .heroStats b{font-size:1.6rem}
  .hero h1{font-size:clamp(1.7rem,8vw,2.2rem)}
  .ctaband{padding:30px 20px}
  .ctaband h2{font-size:1.5rem}
}