@font-face{font-family:Manrope;src:url(fonts/manrope.woff) format("woff");font-weight:200 800;font-display:swap}
:root{--ink:#10212e;--muted:#5a6a78;--bg:#f4f6f5;--card:#fff;--line:#e3e8e6;--brand:#0e7c47;--brand-d:#0a5c35;--navy:#0d2438;
 --pass-bg:#e4f6ea;--pass-tx:#0f5c2e;--pass:#1a9a52;--cond-bg:#fff1cf;--cond-tx:#7a4a00;--cond:#f0a500;--closed-bg:#fde4e4;--closed-tx:#8c1a1a;--closed:#d93636;
 --r:18px;--sh:0 1px 2px rgba(16,33,46,.06),0 8px 24px rgba(16,33,46,.07);--nav:64px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:16px/1.45 Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom))}
a{color:var(--brand-d)}
h1,h2,h3{letter-spacing:-.02em;line-height:1.15}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.muted{color:var(--muted)}.small{font-size:13px}

/* top bar + nav */
.topbar{position:sticky;top:0;z-index:600;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top));background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:18px;font-weight:600;letter-spacing:-.02em}
.brand b{color:var(--brand);font-weight:800}.logo{border-radius:10px;display:block}
.install{border:0;background:var(--brand);color:#fff;font:inherit;font-weight:700;font-size:13px;padding:8px 14px;border-radius:99px;cursor:pointer}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:700;display:flex;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.tabs button{flex:1;position:relative;border:0;background:none;font:inherit;font-size:11.5px;font-weight:600;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;cursor:pointer;border-radius:12px}
.tabs button .ic{width:23px;height:23px}
.tabs button.on{color:var(--brand)}
.tabs button.on .ic{fill:rgba(14,124,71,.14)}
.tabs em{position:absolute;top:1px;left:calc(50% + 6px);min-width:17px;height:17px;border-radius:99px;background:var(--closed);color:#fff;font:700 10.5px/17px Manrope,sans-serif;font-style:normal;text-align:center;padding:0 4px}
.tabs button:focus-visible,.chip:focus-visible,.card:focus-visible,.tile:focus-visible,.btn:focus-visible,.favbtn:focus-visible{outline:3px solid #7cc79d;outline-offset:2px}

main{max-width:980px;margin:auto;padding:0 16px 24px}
.tab{display:none}.tab.on{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pg{font-size:28px;margin:22px 0 6px}

/* hero */
.hero{position:relative;margin:0 -16px 0;overflow:hidden;color:#fff;background:var(--navy);border-radius:0 0 28px 28px}
.hero-img{position:absolute;left:0;top:0;width:100%;height:370px;object-fit:cover;object-position:8% 40%}
.hero-shade{position:absolute;left:0;top:0;width:100%;height:371px;background:linear-gradient(180deg,rgba(7,24,38,.25) 0%,rgba(7,24,38,0) 30%,rgba(7,24,38,0) 55%,var(--navy) 100%)}
.hero-in{position:relative;width:100%;max-width:980px;margin:auto;padding:300px 18px 30px}
.eyebrow{display:inline-block;margin:0 0 10px;padding:5px 12px;border-radius:99px;background:rgba(255,255,255,.2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:12.5px;font-weight:700;letter-spacing:.02em}
.hero h1{margin:0;font-size:46px;font-weight:800;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.lede{margin:10px 0 18px;font-size:17px;font-weight:500;opacity:.96;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.searchbox{display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border-radius:18px;padding:0 16px;height:58px;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.searchbox .ic{color:var(--brand);width:22px;height:22px}
.searchbox input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:17px;font-weight:500;color:var(--ink)}
.searchbox:focus-within{box-shadow:0 0 0 3px #7cc79d,0 10px 30px rgba(0,0,0,.28)}
.chips{display:flex;gap:8px;margin-top:14px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1.5px solid rgba(255,255,255,.55);background:rgba(255,255,255,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font:inherit;font-weight:700;font-size:14px;padding:8px 14px;border-radius:99px;cursor:pointer;transition:background .15s}
.chip .ic{width:16px;height:16px;stroke-width:2.6}
.chip.on{background:#fff;color:var(--ink);border-color:#fff}
.chip.on.c-pass{background:#d7f5e1;color:var(--pass-tx)}.chip.on.c-cond{background:#ffecb8;color:var(--cond-tx)}.chip.on.c-closed{background:#fcd5d5;color:var(--closed-tx)}
.hero-credit{position:absolute;right:10px;top:8px;font-size:10.5px;color:rgba(255,255,255,.85);text-decoration:none;background:rgba(0,0,0,.28);padding:2px 8px;border-radius:99px}

/* stats */
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:-22px 0 8px;position:relative;z-index:2}
.stat{background:var(--card);border-radius:16px;padding:12px 12px 10px;box-shadow:var(--sh)}
.stat b{display:block;font-size:22px;letter-spacing:-.02em;font-weight:800}
.stat span{display:block;font-size:11.5px;line-height:1.25;color:var(--muted);margin-top:2px}
.stat.s-closed b{color:var(--closed-tx)}.stat.s-cond b{color:var(--cond-tx)}.stat.s-pass b{color:var(--pass-tx)}
.stat.extra{display:none}

.sec{font-size:21px;margin:26px 0 12px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sec .small{font-weight:500}

/* tiles */
.tiles{display:flex;gap:12px;overflow-x:auto;margin:0 -16px;padding:2px 16px 10px;scroll-snap-type:x mandatory;scrollbar-width:none}
.tiles::-webkit-scrollbar{display:none}
.tile{position:relative;flex:0 0 62%;max-width:260px;aspect-ratio:4/5;border:0;border-radius:var(--r);overflow:hidden;padding:0;cursor:pointer;scroll-snap-align:start;background:var(--navy);box-shadow:var(--sh);transition:transform .2s}
.tile:hover{transform:translateY(-3px)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,24,38,.85))}
.tile span{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;color:#fff;font:800 18px/1.15 Manrope,sans-serif;letter-spacing:-.02em;text-align:left}

/* controls + cards */
.controls{display:flex;gap:10px}
select{flex:1;min-width:0;font:inherit;font-weight:600;font-size:15px;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235a6a78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}
#count,#rcount{margin:14px 2px 8px;font-size:14px;font-weight:600}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.card{position:relative;display:flex;gap:10px;align-items:center;background:var(--card);border-radius:var(--r);padding:14px 12px 14px 18px;cursor:pointer;box-shadow:var(--sh);overflow:hidden;transition:transform .15s,box-shadow .15s}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:#aab4bd}
.card.k-Pass::before{background:var(--pass)}.card.k-ConditionalPass::before{background:var(--cond)}.card.k-Closed::before{background:var(--closed)}
.card:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(16,33,46,.08),0 12px 28px rgba(16,33,46,.11)}
.card .t{flex:1;min-width:0}
.card .nm{font-weight:800;font-size:16.5px;letter-spacing:-.01em;overflow-wrap:anywhere}
.card .ad{font-size:13.5px;color:var(--muted);margin-top:1px}
.card .meta{margin-top:8px;display:flex;gap:6px 10px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.upd{font-size:11.5px;font-weight:800;color:#fff;background:var(--navy);padding:2px 8px;border-radius:99px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 8px;border-radius:99px;font-size:12.5px;font-weight:800;white-space:nowrap}
.badge .ic{width:14px;height:14px;stroke-width:3}
.b-Pass{background:var(--pass-bg);color:var(--pass-tx)}
.b-ConditionalPass{background:var(--cond-bg);color:var(--cond-tx)}
.b-Closed{background:var(--closed-bg);color:var(--closed-tx)}
.b-Other{background:#e9edf0;color:#37424d}
.favbtn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:42px;height:42px;border:0;border-radius:14px;background:#f1f4f3;color:#8795a1;cursor:pointer;font:inherit;font-weight:700;font-size:14px;transition:transform .15s,background .15s}
.favbtn:hover{background:#e7ecea}
.favbtn:active{transform:scale(.9)}
.favbtn.on{background:#fde4ea;color:#d9304f}.favbtn.on .ic{fill:currentColor}
.favbtn.big{width:auto;padding:0 16px;height:44px;border-radius:99px}
.btn{display:block;margin:16px auto;padding:12px 24px;border:0;background:var(--brand);color:#fff;border-radius:99px;font:inherit;font-weight:800;cursor:pointer;box-shadow:0 6px 16px rgba(14,124,71,.28)}
.btn[hidden]{display:none}

/* banner headers */
.banner{position:relative;margin:14px 0 14px;border-radius:var(--r);overflow:hidden;min-height:130px;display:flex;align-items:flex-end;color:#fff;background:var(--navy)}
.banner.tall{min-height:190px}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,24,38,.1),rgba(7,24,38,.82))}
.banner div{position:relative;z-index:1;padding:16px}
.banner h2{margin:0;font-size:24px;font-weight:800;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.banner p{margin:4px 0 0;font-size:14px;opacity:.95}
.soon{display:flex;gap:14px;align-items:center;width:100%;margin:28px 0 0;padding:10px;background:var(--card);border:0;border-radius:var(--r);box-shadow:var(--sh);text-align:left;font:inherit;color:inherit;cursor:pointer}
.soon.static{cursor:default;margin-top:22px}
.soon img{width:84px;height:84px;object-fit:cover;border-radius:12px;flex:none}
.soon b{display:block;font-size:16px}.soon small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.placeholder{background:#fff;border:2px dashed #b9c6c0;border-radius:var(--r);padding:16px}
.note{background:#eaf5ee;border-radius:14px;padding:12px 14px;font-size:14px;margin:14px 0}

/* map */
#map{height:60vh;min-height:360px;border-radius:var(--r);box-shadow:var(--sh);z-index:1}
.legend{display:flex;gap:16px;font-size:13px;font-weight:600;margin:8px 0;flex-wrap:wrap}.d{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.d.pass{background:var(--pass)}.d.cond{background:var(--cond)}.d.closed{background:var(--closed)}
.leaflet-popup-content{font-family:Manrope,sans-serif}

/* empty */
.empty{background:var(--card);border-radius:var(--r);padding:28px 20px;text-align:center;box-shadow:var(--sh)}
.empty .ic{width:44px;height:44px;color:#c4ced6;margin-bottom:6px}
.empty p{margin:4px 0}

/* about */
.legend-list{list-style:none;padding:0;display:grid;gap:10px}
.legend-list li{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.credits{padding-left:18px;font-size:13px;color:var(--muted)}.credits li{margin:5px 0}
#tab-about h3{margin:24px 0 8px;font-size:18px}

/* detail sheet */
.sheet{position:fixed;inset:0;background:var(--bg);z-index:1000;overflow:auto;animation:slide .25s ease}
@keyframes slide{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.sheet-in{max-width:760px;margin:auto;padding:0 16px 80px}
.sheet-bar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:calc(10px + env(safe-area-inset-top)) 0 10px;background:linear-gradient(var(--bg) 70%,transparent)}
.back{display:inline-flex;align-items:center;gap:4px;border:0;background:#fff;box-shadow:var(--sh);padding:10px 16px 10px 10px;border-radius:99px;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
.dhead{border-radius:24px;padding:20px 18px 18px;color:#fff;position:relative;overflow:hidden}
.dhead.k-Pass{background:linear-gradient(135deg,#17944d,#0b5c33)}
.dhead.k-ConditionalPass{background:linear-gradient(135deg,#f3b21a,#c98200)}
.dhead.k-Closed{background:linear-gradient(135deg,#e04444,#9c1c1c)}
.dhead.k-Other{background:linear-gradient(135deg,#6d7b87,#3f4b56)}
.dhead.k-ConditionalPass{color:#2b1a00}
.dhead h2{margin:0;font-size:28px;font-weight:800;overflow-wrap:anywhere}
.dhead .ad{margin-top:4px;opacity:.92;font-size:15px}
.dhead .ty{font-size:13px;opacity:.85;margin-top:2px}
.dres{margin-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dres .big{display:inline-flex;align-items:center;gap:8px;background:#fff;padding:8px 16px 8px 12px;border-radius:99px;font-weight:800;font-size:17px}
.dres .big .ic{width:20px;height:20px;stroke-width:3}
.dres .dt{font-weight:700;font-size:15px}
.dcard{background:var(--card);border-radius:var(--r);padding:14px 16px;margin:12px 0;box-shadow:var(--sh)}
.dcard h3{margin:0 0 6px;font-size:17px}
.insp .hd{display:flex;justify-content:space-between;gap:8px;align-items:center}
.inf{border-top:1px solid var(--line);margin-top:10px;padding-top:8px;font-size:14px}
.sev{display:inline-block;font-size:11.5px;font-weight:800;padding:1px 8px;border-radius:6px;background:#e9edf0;margin-right:6px}
.sev.C{background:var(--closed-bg);color:var(--closed-tx)}.sev.S{background:var(--cond-bg);color:var(--cond-tx)}
.court{font-size:13px;color:#37424d;margin-top:3px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.actions a{flex:1;min-width:150px;text-align:center;text-decoration:none;font-weight:800;font-size:14px;padding:12px 14px;border-radius:14px;background:#fff;color:var(--brand-d);box-shadow:var(--sh)}

/* footer */
.foot{max-width:980px;margin:8px auto 0;padding:18px 16px 28px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}
.foot p{margin:0 0 8px}

/* bigger screens */
@media(min-width:760px){
  body{padding-bottom:0}
  .topbar{padding:12px max(24px,calc((100vw - 980px)/2 + 16px))}
  .tabs{position:static;background:none;border:0;backdrop-filter:none;padding:0;gap:4px;flex:none}
  .tabs button{flex:none;flex-direction:row;gap:7px;font-size:14px;padding:9px 14px}
  .tabs button .ic{width:19px;height:19px}
  .tabs button.on{background:rgba(14,124,71,.1)}
  .tabs em{position:static;margin-left:2px}
  .install{order:3}
  .hero{margin:16px 0 0;border-radius:28px;min-height:540px;display:flex;align-items:flex-end}
  .hero-img{inset:0;height:100%;object-position:0% 40%}
  .hero-shade{inset:0;width:auto;height:auto;background:linear-gradient(90deg,rgba(7,24,38,0) 18%,rgba(7,24,38,.55) 52%,rgba(7,24,38,.82) 100%),linear-gradient(180deg,rgba(7,24,38,.3),rgba(7,24,38,0) 30%)}
  .hero h1{font-size:60px}
  .lede{font-size:19px}
  .hero-in{padding:44px;margin:0 0 0 auto;max-width:560px}
  .searchbox{height:64px}
  .summary{grid-template-columns:repeat(6,1fr);margin:-34px 22px 8px}
  .stat.extra{display:block}
  .tiles{margin:0;padding:2px 0 10px;overflow:visible;display:grid;grid-template-columns:repeat(5,1fr)}
  .tile{flex:none;max-width:none}
  .cards{grid-template-columns:1fr 1fr}
  .tile span{font-size:16px}
  .sheet-in{padding:0 24px 80px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.card .meta .ty{color:var(--muted);background:#eef2f1;padding:1px 8px;border-radius:99px;font-size:12px;font-weight:600}
