/* coqui-kuleana front end. Panels follow prefers-color-scheme; map imagery stays as is. */
:root{
  --bg:#f6f5f1; --panel:#ffffff; --ink:#1d2321; --mute:#586360; --line:#d5d9d3;
  --accent:#1f6b57; --on-accent:#ffffff; --bad:#b3261e; --ok:#1b6e3a; --warn:#8a5a00;
  --field:#fbfbf9; --shadow:0 -4px 24px rgba(0,0,0,.28);
  --c-yes:#ff6b1a; --c-no:#4a7cff; --z-controlled:#2f9bff; --z-working:#c77dff; --z-uncontrolled:#b0b7bd;
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#8a5cc7;   /* progress chart: managed / unmanaged / willing (validated light + dark) */
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
  color-scheme:light dark;   /* native date pickers, selects, scrollbars follow the theme */
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#151816; --panel:#1f2321; --ink:#e8ebe8; --mute:#a3ada8; --line:#3a413e;
    --accent:#6cc3a8; --on-accent:#08201a; --bad:#ff8f86; --ok:#7fd69c; --warn:#f0c36a;
    --field:#171a19; --shadow:0 -4px 24px rgba(0,0,0,.6);
    --series-1:#3987e5; --series-2:#d95926; --series-3:#a67ee6;
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{display:flex;flex-direction:column;background:var(--bg);color:var(--ink);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
a{color:var(--accent)}
h1,h2,h3,h4{margin:0}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:var(--panel);color:var(--ink);padding:8px 12px;border-radius:8px;z-index:5000}
.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---------- header ---------- */
#top{display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand auth" "search search";
  gap:6px 8px;align-items:center;padding:8px 10px;position:relative;z-index:2000}   /* colours, logo, name, support line: site.css .site-header */
.brand{grid-area:brand;min-width:0;display:flex;align-items:center;gap:8px}
.brand .logo{flex:none;display:block}
/* phones: drop the logo when it would push the support line onto a third line (width depends on the sign-in buttons) */
@media (max-width:699px){.brand{container-type:inline-size}}
@container (max-width:240px){.brand .logo{display:none}}
.auth{grid-area:auth;display:flex;gap:6px;align-items:center;position:relative}
.search{grid-area:search;position:relative}
.search input{width:100%;min-height:46px;font:inherit;font-size:16px;color:var(--ink);background:color-mix(in srgb,var(--accent) 8%,var(--field));
  border:2px solid color-mix(in srgb,var(--accent) 70%,var(--line));border-radius:10px;padding:8px 12px 8px 42px}
.search input::placeholder{color:var(--mute);opacity:1;font-weight:600}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.search .qicon{position:absolute;left:13px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--accent);pointer-events:none}
#qlist{position:absolute;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.3);z-index:2100;max-height:60vh;overflow:auto}
#qlist li{padding:10px 10px;border-radius:7px;cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px}
#qlist li[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 18%,transparent)}
#qlist li small{color:var(--mute);white-space:nowrap}
#qlist li.none{cursor:default;color:var(--mute)}

/* ---------- buttons / fields ---------- */
.btn{font:inherit;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:10px;
  padding:8px 14px;min-height:44px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn,.seg button,.tabs button,#menu button{transition:transform 140ms var(--ease-out),background-color 140ms ease,border-color 140ms ease,box-shadow 140ms ease}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled{opacity:.55;cursor:default}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:600}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 55%,var(--line))}
.btn.small{min-height:44px;padding:6px 10px;font-size:14px}
.btn.link{background:none;border:0;color:var(--accent);text-decoration:underline;padding:6px 4px;min-height:44px}
/* busy: a small spinner, so a slow request reads as working, not broken */
.btn[aria-busy="true"]::after{content:"";width:14px;height:14px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.badge{display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;background:var(--bad);color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center}
.field{display:grid;gap:4px;margin-top:10px}
.field label,.lbl{font-weight:600;font-size:13.5px}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=date],.field input[type=search],.field input[type=password],
.field select,.field textarea,input.in,select.in{width:100%;font:inherit;color:var(--ink);background:var(--field);
  border:1px solid var(--line);border-radius:8px;padding:9px 10px;min-height:44px}
.field textarea{min-height:76px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;margin-top:12px;min-height:44px}
.check input{width:22px;height:22px;margin-top:2px;flex:none}
.choices .choice{margin-top:6px}
.choices .choice b{font-weight:600}
.hint{color:var(--mute);font-size:14px}
.err{color:var(--bad);font-weight:600;font-size:14px;margin-top:8px}
.ok{color:var(--ok);font-weight:600;font-size:14px;margin-top:8px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{font:inherit;color:var(--ink);background:var(--field);border:0;padding:8px 4px;min-height:46px;cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:color-mix(in srgb,var(--c,var(--accent)) 28%,var(--panel));font-weight:700;box-shadow:inset 0 -4px 0 var(--c,var(--accent))}

/* ---------- map area ---------- */
#main{position:relative;flex:1;min-height:0;overflow:hidden}
#map{position:absolute;inset:0;background:#1b1f1d}
.leaflet-container{font:inherit}
.legend{position:absolute;left:8px;bottom:24px;z-index:900;max-width:230px;background:var(--panel);background:color-mix(in srgb,var(--panel) 94%,transparent);
  color:var(--ink);border:1px solid var(--line);border-radius:16px;font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,.25);
  max-height:calc(100% - 130px);overflow:auto;overscroll-behavior:contain}   /* stays clear of the zoom buttons */
.legend summary{padding:8px 12px;cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.legend .lb{padding:0 12px 10px;display:grid;gap:5px}
.legend .it{display:flex;gap:8px;align-items:center}
.legend details.more{margin-top:2px}
.legend details.more>summary{cursor:pointer;font-weight:600;min-height:36px;display:flex;align-items:center;color:var(--accent)}
.legend details.more>summary::marker{color:var(--mute)}
.legend details.more[open]>summary{margin-bottom:4px}
.legend .lrow{display:flex;align-items:center;gap:6px}
.legend .lrow .govtoggle{flex:1}
.legend .qbtn{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;font:700 14px/1 system-ui,sans-serif;color:var(--mute)}
.legend .qbtn[aria-expanded="true"]{color:var(--ink);border-color:var(--ink)}
.legend .lnote{margin:-2px 0 4px 26px}
/* on phones the open legend is a sheet from the bottom, like the lot panel, with a Close; closed it stays the chip (review 2026-10-21 F4/F5) */
@media (max-width:699px){
  .legend[open]{left:0;right:0;bottom:0;max-width:none;max-height:50%;border-radius:16px 16px 0 0;border-bottom:0;background:var(--panel);box-shadow:var(--shadow)}
  .legend[open]>summary{position:sticky;top:0;z-index:1;background:var(--panel);padding:10px 16px}
  .legend[open]>summary::after{content:"Close";margin-left:auto;color:var(--accent)}
  .legend[open] .lb{padding:0 16px calc(12px + env(safe-area-inset-bottom))}
}
/* the zoom buttons follow the tokens, light and dark (review 2026-10-21 F6) */
.leaflet-container .leaflet-bar{border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.leaflet-container .leaflet-bar a,.leaflet-container .leaflet-bar a:hover,.leaflet-container .leaflet-bar a:focus{background:var(--panel);color:var(--ink);border-bottom:1px solid var(--line)}
.leaflet-container .leaflet-bar a:last-child{border-bottom:0}
.leaflet-container .leaflet-bar a.leaflet-disabled{background:var(--field);color:var(--mute)}
.sw{width:18px;height:14px;border-radius:3px;flex:none;border:2px solid transparent;background-color:#1b1f1d;box-shadow:0 0 0 2px #1b1f1d}
.sw.heat{background:#e5261f;opacity:.8;border-radius:4px;height:8px;align-self:center}
.sw.quiet{background:#3fb8ff;opacity:.7;border-radius:4px;height:8px;align-self:center}
.sw.unsurv{background:#c9cdc5;opacity:.85;border-radius:4px;height:5px;align-self:center}
.sw.outside{background:repeating-linear-gradient(45deg,rgba(242,242,234,.55) 0 1.5px,rgba(0,0,0,.35) 1.5px 6px);border:1.5px dashed rgba(242,242,234,.7)}

/* a gulch stretch: the report colour, cross-hatched (gulch.js) */
.sw.gulch{--c:#ff6b1a;border:1px solid var(--c);background:color-mix(in srgb,var(--c) 60%,transparent)}   /* heard: solid (2026-10-23); likely keeps the hatch */
.sw.gulch.l1{--c:#ffb04a}.sw.gulch.l3{--c:#e8181c}.sw.gulch.q{--c:#4a7cff}
.sw.likely{border:1px dashed #ffc078;background:repeating-linear-gradient(45deg,#ffc078 0 1px,transparent 1px 7px),repeating-linear-gradient(-45deg,#ffc078 0 1px,transparent 1px 7px)}
svg.defs{position:absolute;width:0;height:0;overflow:hidden}
#gulchbar label{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:14px}
.sw.water{background:rgba(196,140,255,.35);border:2px dashed #e06bff}
.sw.proj{background:#ff6b1a;opacity:.85;border-color:transparent;box-shadow:0 0 0 1px rgba(27,31,29,.5)}   /* the projection layer: one flat blob (shape.js) */
/* the projection on (shape.js body.shape): the blob under the lot lines, the grey roads and the MISC zones; the report
   decorations are not drawn (the lots restyle to outlines in app.js, the heat in roadheat.js). Not in mapping mode or
   Map my property, where the lots are the work. */
body.shape:not(.mapping):not(.property) .leaflet-spots-pane,body.shape:not(.mapping):not(.property) .leaflet-hear-pane,
body.shape:not(.mapping):not(.property) .leaflet-hearDot-pane,body.shape:not(.mapping):not(.property) .leaflet-gulch-pane,body.shape:not(.mapping):not(.property) .leaflet-likely-pane,
body.shape:not(.mapping):not(.property) .leaflet-hoods-pane,body.shape:not(.mapping):not(.property) .leaflet-pins-pane{display:none}
.sw.yes{background:color-mix(in srgb,var(--c-yes) 60%,#1b1f1d);border-color:var(--c-yes)}
/* coqui levels (user, 2026-10-12): 1 a few, 2 a chorus (the plain orange), 3 overwhelming */
.sw.yes.l1{--c-yes:#ffb04a}.sw.yes.l3{--c-yes:#e8181c}
.sw.heat.l1{background:#ff9a2e}.sw.heat.l3{background:#c40030}
.swrow{display:inline-flex;gap:3px;flex:none}
.sw.no{background:color-mix(in srgb,var(--c-no) 60%,#1b1f1d);border-color:var(--c-no)}
.sw.none{border-color:#c9b64d}
.sw.vis{border-style:dashed}   /* a visitor's lot mark: not checked (app.js styleOf dashes the lot too) */
.sw.zc{border:3px solid var(--z-controlled)}.sw.zw{border:3px solid var(--z-working)}.sw.zl{border:3px dashed var(--z-uncontrolled)}
#sync{color:var(--mute);font-size:13px;margin-top:2px}

/* map markers */
.bd{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;background:rgba(18,22,20,.78);color:#fff;font:600 11px/1 system-ui,sans-serif;
  padding:3px 6px;border-radius:9px;display:inline-flex;align-items:center;gap:4px;pointer-events:none}
.bd i{width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(255,255,255,.9);display:inline-block}
.bd i.yes{background:var(--c-yes)}.bd i.no{background:var(--c-no)}
.bd i.yes.l1{background:#ffb04a}.bd i.yes.l3{background:#e8181c}
.bd.sel{outline:2px solid #fff}.bd.pick{background:#007c91}
.bd .own{font-size:12px;opacity:.9}
.zl-wrap{position:absolute;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap}
.zlabel{display:inline-block;width:max-content;text-align:center;line-height:1.2 !important;background:rgba(18,22,20,.8);color:#fff;font:700 12px/1 system-ui,sans-serif;padding:4px 8px;border-radius:9px;border:2px solid var(--zc,#fff)}
.zlabel.controlled{--zc:var(--z-controlled)}.zlabel.working{--zc:var(--z-working)}.zlabel.uncontrolled{--zc:var(--z-uncontrolled)}

#pickbar,#spotbar,#gulchbar{position:absolute;left:8px;right:8px;top:8px;z-index:1400;background:var(--panel);border:2px solid #00b8d4;border-radius:12px;
  padding:8px 10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;box-shadow:0 4px 18px rgba(0,0,0,.4)}
#pickbar .t,#spotbar .t,#gulchbar .t{flex:1;min-width:160px;font-weight:600}

/* ---------- lot panel ---------- */
.panel{position:absolute;z-index:1200;left:0;right:0;bottom:0;max-height:64%;overflow:auto;background:var(--panel);
  border-radius:16px 16px 0 0;box-shadow:var(--shadow);padding:6px 16px 20px;overscroll-behavior:contain}
.panel::before{content:"";display:block;width:44px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 6px}
.ph{display:flex;gap:8px;align-items:flex-start;justify-content:space-between}
.ph h2{font-size:19px}
.ph h2:focus{outline:none}
.meta{color:var(--mute);font-size:14px;margin-top:2px}
.sec{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.sec h3{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px}   /* sentence case, not tracked capitals (review 2026-10-21 F12) */
.status{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-weight:700;font-size:16px}
.dot{width:14px;height:14px;border-radius:50%;flex:none;border:2px solid rgba(0,0,0,.35)}
.dot.yes{background:var(--c-yes)}.dot.no{background:var(--c-no)}.dot.yes.l1{background:#ffb04a}.dot.yes.l3{background:#e8181c}.dot.none{background:transparent;border-color:var(--mute)}
.tagpill{font-size:12px;font-weight:600;border:1px solid var(--accent);color:var(--accent);border-radius:8px;padding:1px 7px}
.card{border:1px solid var(--line);border-radius:16px;padding:10px 12px;margin-top:8px;background:var(--field)}   /* 16: the surfaces' radius */
.card .who{font-weight:600}
.contact{margin-top:4px;font-size:14px;display:grid;gap:2px;overflow-wrap:anywhere}
.mail{color:var(--mute)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:14px}
.kv dt{color:var(--mute)}.kv dd{margin:0;overflow-wrap:anywhere}
.zoneline{display:flex;gap:8px;align-items:center;margin-top:6px}
.spothandle span{display:block;width:18px;height:18px;margin:6px;border-radius:50%;background:#fff;border:3px solid #00e5ff;box-shadow:0 1px 4px rgba(0,0,0,.6);cursor:grab}
#spotbar .spotsize{display:flex;gap:8px;align-items:center;flex-basis:100%;font-size:14px}#spotbar .spotsize input{flex:1;min-width:120px}
.spotlist{margin-top:8px}.spotrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}.spotrow .what{flex:1;min-width:140px}.spotrow .err{flex-basis:100%}
.zoneline .sw{border-width:3px}
.notice{font-size:14px;color:var(--mute);margin-top:10px}
.cnt{font-size:13px;color:var(--mute);text-align:right}

/* ---------- drawer ---------- */
.drawer{position:absolute;z-index:1600;inset:0;background:var(--bg);display:flex;flex-direction:column}
.dh{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--line)}
.dh h2{font-size:18px}.dh h2:focus{outline:none}
.db{flex:1;overflow:auto;padding:4px 14px 40px;overscroll-behavior:contain}
.db .sec:first-child{border-top:0;margin-top:8px}
/* the drawer's own action row (the welcome): outside the scroller, so it never covers the text or the video */
.df{flex:none;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;padding:10px 14px;background:var(--panel);border-top:1px solid var(--line)}
/* the welcome on phones: a bottom sheet over the map, like the lot panel (views.js openDrawer opt.sheet) */
.scrim{position:absolute;inset:0;z-index:1550;background:rgba(0,0,0,.25)}
@media (max-width:899px){
  .drawer.sheet{top:auto;max-height:62%;background:var(--panel);border-radius:16px 16px 0 0;box-shadow:var(--shadow);overflow:hidden}
  .drawer.sheet::before{content:"";display:block;flex:none;width:44px;height:4px;border-radius:2px;background:var(--line);margin:10px auto 0}
  .drawer.sheet .dh{background:none;padding:6px 16px 10px}
  .drawer.sheet .db{min-height:0;padding:4px 16px 16px}
  .drawer.sheet .df{padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
}
@media (max-width:400px){.df{flex-wrap:nowrap;gap:6px}.df .btn{flex:1 1 auto;padding:8px 6px;font-size:15px;white-space:nowrap}}   /* both actions on one row on an iPhone SE */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 4px}
.tabs button{font:inherit;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:10px;padding:8px 12px;min-height:44px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:600}
.tablewrap{overflow-x:auto;margin-top:8px;border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:13.5px;background:var(--panel)}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mute);white-space:nowrap}
td .row{margin-top:0}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chip{display:inline-flex;gap:4px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:2px 4px 2px 10px;background:var(--field)}
.chip button{font:inherit;border:0;background:none;color:var(--bad);cursor:pointer;min-width:32px;min-height:32px;border-radius:16px}
.newdot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--bad);margin-right:6px}

/* ---------- menu / toast / footer ---------- */
#menu{position:absolute;right:0;top:calc(100% + 6px);min-width:220px;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.35);padding:6px;z-index:2200;display:grid}
#menu button{font:inherit;color:var(--ink);background:none;border:0;text-align:left;padding:10px 12px;min-height:46px;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;align-items:center}
#menu button:focus-visible{background:color-mix(in srgb,var(--accent) 16%,transparent)}
#menu .who{padding:8px 12px;color:var(--mute);font-size:14px;border-bottom:1px solid var(--line);margin-bottom:4px;overflow-wrap:anywhere}
#toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,8px);background:#202624;color:#fff;padding:10px 16px;border-radius:12px;z-index:5000;
  max-width:90vw;opacity:0;pointer-events:none;transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}
#toast.on{opacity:1;transform:translate(-50%,0)}
footer{background:var(--panel);border-top:1px solid var(--line);padding:6px 12px;font-size:13px;color:var(--mute);line-height:1.35}
footer b{color:var(--ink);font-weight:600}
/* the same text is in About; give short screens and open lot panels the room */
@media (max-height:640px){footer{display:none}}
body:has(#panel:not([hidden])) footer,body:has(#drawer:not([hidden])) footer{display:none}

@media (min-width:700px){
  #top{grid-template-columns:auto minmax(260px,420px) 1fr;grid-template-areas:"brand search auth";gap:12px;padding:8px 14px}
  .auth{justify-content:flex-end}
}
@media (min-width:900px){
  .panel{left:auto;top:0;right:0;bottom:0;width:410px;max-height:none;border-radius:0;box-shadow:-4px 0 24px rgba(0,0,0,.3);padding-top:14px}
  .panel::before{display:none}
  #main.panel-open .leaflet-right{margin-right:410px}
  #main.panel-open .legend{left:8px}
  .drawer{left:auto;width:min(620px,100%);box-shadow:-4px 0 24px rgba(0,0,0,.35)}
}
@media (max-width:420px){
  .btn{padding:8px 11px}
}
/* hover only where there is a real pointer: on phones a tapped button would keep its hover look */
@media (hover:hover) and (pointer:fine){
  .btn:hover{border-color:var(--accent)}
  #qlist li:hover,#menu button:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}
}
/* enter-only motion: quiet, short, ease-out; nothing animates on the way out */
.panel:not([hidden]){animation:sheet-in 200ms var(--ease-drawer)}
.drawer:not([hidden]){animation:drawer-in 220ms var(--ease-drawer)}
@media (max-width:899px){.drawer.sheet:not([hidden]){animation:sheet-in 200ms var(--ease-drawer)}}
.scrim:not([hidden]){animation:fade-in 200ms ease}
#menu{transform-origin:top right;animation:pop 140ms var(--ease-out)}
#pickbar:not([hidden]),#spotbar:not([hidden]),#gulchbar:not([hidden]),#movebar{animation:bar-in 160ms var(--ease-out)}
@keyframes sheet-in{from{opacity:0;transform:translateY(16px)}}
@keyframes drawer-in{from{opacity:0;transform:translateY(12px)}}
@keyframes pop{from{opacity:0;transform:scale(.97)}}
@keyframes bar-in{from{opacity:0;transform:translateY(-8px)}}
@keyframes fade-in{from{opacity:0}}
@media (min-width:900px){
  @keyframes sheet-in{from{opacity:0;transform:translateX(24px)}}
  @keyframes drawer-in{from{opacity:0;transform:translateX(32px)}}
}
/* the lot sheet keeps some height while it loads, so the body doesn't jump the sheet upward */
@media (max-width:899px){#panelBody{min-height:30vh}}
/* reduced motion: keep plain fades (they help comprehension), drop movement and the spinner's spin */
@media (prefers-reduced-motion:reduce){
  .panel:not([hidden]),.drawer:not([hidden]),.drawer.sheet:not([hidden]),#menu,#pickbar:not([hidden]),#spotbar:not([hidden]),#gulchbar:not([hidden]),#movebar{animation:fade-in 150ms ease}
  .btn:active:not(:disabled){transform:none}
  #toast,#toast.on{transform:translate(-50%,0);transition:opacity .15s}
  .btn[aria-busy="true"]::after{animation:none;border:0;width:auto;height:auto;content:"…"}
}

/* Netlify Identity modal: its inline z-index (99) is below the header and Leaflet panes/controls */
#netlify-identity-widget{z-index:100000 !important;color-scheme:normal}   /* keep its overlay as before: a scheme mismatch would make the iframe backdrop opaque */

/* neighbourhood group name (overview zooms) */
.roadname{font:600 12.5px system-ui,sans-serif;letter-spacing:.03em;fill:#fff;stroke:rgba(10,14,12,.82);stroke-width:3.2px;stroke-linejoin:round;paint-order:stroke}
.sw.rd{font:700 10px/14px system-ui,sans-serif;color:#fff;background:#3a4440;text-align:center}
.leaflet-control-attribution.roadcredit{font:11px system-ui,sans-serif;background:rgba(255,255,255,.75)}
.hlabel{display:inline-block;transform:translate(-50%,-50%);white-space:normal;width:max-content;text-align:center;overflow-wrap:normal;font:700 13px/1.2 system-ui,sans-serif;color:#fff;background:rgba(16,32,26,.78);border:1.5px dashed #fff;border-radius:8px;padding:3px 8px;pointer-events:none}
.sw.hg{border:2.5px dashed #fff}
.hh{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}
.hhlist{margin:6px 0}
.hhlist .lbl{font-weight:600;font-size:13px}
.post .ptext,.reply .ptext{white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0}
.replies{border-left:3px solid var(--line);margin:6px 0 6px 4px;padding-left:10px}
.reply{margin:6px 0}
.tagpill.warn{background:#7a3b00;color:#fff}
.bd .tmk{opacity:.7;font-style:italic}
.geocheck{margin-top:10px;padding-top:8px;border-top:1px solid var(--line, #ddd)}
/* coqui pins: thumb-sized one-tap buttons, bottom right (above the attribution) */
  display:flex;align-items:center;gap:10px;justify-content:center}
.legend .sw.pin{border-radius:50%;width:12px;height:12px;background:#ff6b1a;border:2px solid #fff}
.pinpop .row{margin-top:6px}
.linkbtn{font:inherit;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;position:relative}
.linkbtn::after{content:"";position:absolute;inset:-12px -4px}   /* 44px tap area, text line unchanged */
.btn.link.copylink{padding:0;margin-top:2px;font-size:14px}
a.btn{text-decoration:none}
.invite summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.invite summary::before{content:'▸';margin-right:8px;color:var(--mute)}
.invite[open] summary::before{content:'▾'}
#movebar{position:absolute;left:8px;right:8px;top:8px;z-index:1400;background:var(--panel);border:2px solid #ff6b1a;border-radius:12px;padding:8px 10px;display:flex;gap:10px;align-items:center;justify-content:space-between}
/* quiet-night progress */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.tile .k{font-size:13px;color:var(--mute);display:flex;align-items:center;gap:6px}
.tile .v{font-size:30px;font-weight:700;color:var(--ink);line-height:1.15}
.tile .s{font-size:12px;color:var(--mute)}
.key{display:inline-block;width:12px;height:4px;border-radius:2px}
.pchart{position:relative;margin-top:6px}
.pchart svg{display:block;width:100%;height:auto;overflow:visible}
.pchart .grid{stroke:var(--line);stroke-width:1}
.pchart .axis{fill:var(--mute);font-size:11px}
.pchart .lbl{font-size:12px;font-weight:600;fill:var(--ink)}
.pchart .tip{position:absolute;pointer-events:none;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;
  padding:6px 8px;font-size:12px;box-shadow:0 4px 14px rgba(0,0,0,.2);white-space:nowrap;transform:translate(-50%,-110%)}
.legendrow{display:flex;gap:14px;font-size:13px;color:var(--ink);margin-top:4px}
.ptable{width:100%;border-collapse:collapse;font-size:13px}
.ptable th,.ptable td{text-align:right;padding:3px 6px;border-bottom:1px solid var(--line)}
.ptable th:first-child,.ptable td:first-child{text-align:left}
.post.pinned{border-color:var(--accent);border-width:2px}
.tagpill.pin{display:inline-block;margin-bottom:4px}
#creditsLink{justify-self:start}
.lead{font-size:17px;font-weight:600;line-height:1.4;margin:0 0 10px}
.nots li::marker{content:'✕  ';color:var(--bad)}
.explainer{margin:10px 0 12px}.explainer video{display:block;width:100%;aspect-ratio:16/9;border-radius:8px;background:#0e1f17}.explainer figcaption{margin-top:4px}
a.btn{display:inline-flex;align-items:center;text-decoration:none}
.leglinks{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin-top:2px;font-size:14px}
.leglinks a,.leglinks .linkbtn{color:var(--accent);min-height:44px;display:inline-flex;align-items:center}
.leglinks .linkbtn::after{display:none}
.sw.gv{border:2.5px dotted #2ad4c4}
.sw.tr{background:linear-gradient(135deg,#f1eee8 35%,#9097a2);box-shadow:inset -4px -4px 0 rgba(120,110,230,.55)}
.sw.mz{border:2px dashed #3dff8e;box-shadow:0 0 0 1.5px rgba(17,17,17,.6),inset 0 0 0 1.5px rgba(17,17,17,.6)}
.zlbl{transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;color:#3dff8e;background:rgba(17,17,17,.72);border:1px solid #3dff8e;border-radius:4px;padding:1px 6px;font:600 12px/1.3 system-ui,sans-serif}
.govtoggle{cursor:pointer}.govtoggle input{margin:0 4px 0 0}
.miscnote{margin:6px 0 2px;font-size:14px;padding:6px 8px;border-left:4px solid #ff9f1a;background:color-mix(in srgb,#ff9f1a 14%,transparent);border-radius:4px;line-height:1.45}
.publand{margin:4px 0 2px;font-size:14px;padding:4px 8px;border-left:4px solid #2ad4c4;background:color-mix(in srgb,#2ad4c4 12%,transparent);border-radius:4px}
/* Leaflet zoom buttons: 44px for thumbs */
.leaflet-touch .leaflet-bar a{width:44px;height:44px;line-height:44px;font-size:24px}
/* pin popups follow the theme */
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--panel);color:var(--ink)}
.leaflet-container a.leaflet-popup-close-button{color:var(--mute);width:32px;height:32px;font-size:22px;line-height:30px}
/* shown until the lot outlines arrive (slow rural links) */
.maploading{position:absolute;inset:0;z-index:950;display:grid;place-items:center;pointer-events:none}
.maploading span{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:10px 16px;font-weight:600;box-shadow:0 4px 18px rgba(0,0,0,.35)}

/* ---------- mapping mode (mapping.js) ---------- */
#mapFab{position:absolute;right:12px;bottom:30px;z-index:950;box-shadow:0 4px 16px rgba(0,0,0,.35)}
/* "I hear a coqui" (hearings.js, /hear): for everyone, top right of the map, the brightest thing on it */
.hearfab{position:absolute;right:10px;top:10px;z-index:950;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:8px 16px 8px 12px;
  border-radius:999px;background:#ff6b1a;color:#1b0d03;font-weight:800;font-size:16px;text-decoration:none;box-shadow:0 4px 16px rgba(0,0,0,.35);
  transition:transform 140ms var(--ease-out)}
.hearfab:active{transform:scale(.97)}
.hearfab:focus-visible{outline:3px solid #fff;outline-offset:2px}
.hearfab .dot{width:12px;height:12px;border-radius:50%;background:#1b0d03;box-shadow:0 0 0 3px rgba(27,13,3,.25)}
body.mapping .hearfab,body.property .hearfab{display:none!important}
/* not drawn while mapping (phone memory, 2026-10-21): the grey land outside the lot map, visitors' reports, and the
   fire areas (their layer is off there, but the empty layer still cost a full turned surface, 2026-10-27), the projection (2026-11-01) */
body.mapping .leaflet-outside-pane,body.mapping .leaflet-hear-pane,body.mapping .leaflet-hearDot-pane,body.mapping .leaflet-fire-pane,body.mapping .leaflet-shape-pane{display:none}
@media (max-width:699px){body:has(#panel:not([hidden])) .hearfab{display:none}}
@media (min-width:900px){body:has(#panel:not([hidden])) .hearfab{right:420px}}   /* left of the 410 px side panel (a bottom sheet below 900 px) */
.sw.hear{width:16px;height:16px;border-radius:50%;border:2px dashed #ff6b1a;background:rgba(255,107,26,.18);box-shadow:none}
.hearpop{display:grid;gap:3px;font-size:14px;line-height:1.35;max-width:220px}
.hearpop .hint{font-size:12.5px}
@media (min-width:700px){#mapFab{display:none}}   /* phones get the button; elsewhere it's in the account menu */
body:has(#panel:not([hidden])) #mapFab{display:none}
body.mapping #top,body.mapping footer,body.mapping .legend,body.mapping #panel,body.mapping #mapFab{display:none!important}
body.mapping .leaflet-pins-pane,body.mapping .leaflet-pins-pane *{pointer-events:none}   /* pins show (the Listen breadcrumbs) but a dot must not catch the tap meant for its lot */
body.mapping #toast{bottom:auto;top:calc(72px + env(safe-area-inset-top))}   /* under the bar: at the bottom it covered Listen and the switch */
.mapbar{position:absolute;left:8px;right:8px;top:8px;z-index:1400;display:flex;gap:8px;align-items:center;flex-wrap:wrap;max-width:100%;box-sizing:border-box;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.mapbar .exit{font-weight:700}
.mstat{flex:1;min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapbar .btn{padding:6px 10px;font-size:14px}
.mstat.warn{color:var(--warn)}
.mq{background:var(--warn);color:#fff;border-radius:10px;padding:2px 8px;font-size:13px;font-weight:700}
.recenter{position:absolute;right:12px;top:76px;z-index:1400;box-shadow:0 4px 16px rgba(0,0,0,.35)}
body.mapping .leaflet-top.leaflet-left{top:64px}
/* Flip: the phone is held upside down (microphone forward). The map turns 180° (mapping.js); the overlays swap ends and
   turn so they read right way up, with the switch near the hand and the status bar at the far end. */
body.flipped .mapbar{top:auto;bottom:max(8px,env(safe-area-inset-bottom));transform:rotate(180deg)}
body.flipped .mapctl{bottom:auto;top:max(10px,env(safe-area-inset-top));transform:rotate(180deg)}
body.flipped .recenter{top:auto;right:auto;bottom:76px;left:12px;transform:rotate(180deg)}
body.flipped .leaflet-top.leaflet-left{top:auto;bottom:64px;transform:rotate(180deg)}
body.flipped #toast{top:auto;bottom:calc(72px + env(safe-area-inset-bottom));transform:translate(-50%,0) rotate(180deg)}
body.flipped .bd{transform:translate(-50%,-50%) rotate(180deg)}
body.flipped .leaflet-control-attribution{transform:rotate(180deg)}
.mapctl{position:absolute;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));z-index:1400;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;max-width:560px;margin:0 auto}
@media (max-width:480px){.mswitch{padding:4px;gap:4px}.mswitch button{min-height:44px;font-size:16px}.mlisten .btn{padding:6px 10px}}
.mapctl>*{min-width:0;max-width:100%}
/* the note ("Coqui heard · dropping a pin…", lot saved + Undo) covers the Listen row while it shows, in the same cell:
   a row of its own cost 44 px of map, and the stack keeps one height so the map never jumps when a note comes or goes */
.mapctl>.mnote,.mapctl>.mlisten{grid-area:1/1}
.mapctl>.mnote{position:relative;z-index:1}
.mnote{display:flex;gap:8px;align-items:center;background:#202624;color:#fff;border-radius:12px;padding:6px 6px 6px 14px;min-height:44px;
  opacity:0;transform:translateY(6px);transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out);pointer-events:none}
.mnote.on{opacity:1;transform:none;pointer-events:auto}
.mnote .t{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mnote .btn{background:#fff;color:#202624;border-color:#fff;font-weight:700}
.mlisten{display:flex;gap:8px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:4px 8px 4px 4px;
  box-shadow:0 4px 18px rgba(0,0,0,.35)}
.mlisten .btn{white-space:nowrap}
.mlisten.on .btn{background:var(--c-yes);border-color:var(--c-yes);color:#1d1205}
.mlisten .lvl{display:inline-flex;gap:3px;align-items:flex-end;height:22px;width:14px;flex:none}
.mlisten .lvl i{display:block;width:5px;height:22px;border-radius:2px;background:#6fb1ff;transform:scaleY(0);transform-origin:bottom;transition:transform 80ms linear}
.mlisten .lvl i.qui{background:var(--c-yes)}
.mlisten .t{flex:1;min-width:0;font-size:13px;font-weight:600;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mlisten .btn{flex:none}
.mlisten .t.warn{color:var(--warn);opacity:1}
.mrecsave{display:grid;gap:6px}.mrecsave .btn{min-height:48px;font-size:16px}
.mlisten .rec.live{background:var(--bad);border-color:var(--bad);color:#fff;font-variant-numeric:tabular-nums;animation:recpulse 1.2s ease-in-out infinite}
.mlisten .rec.armed{border-color:var(--warn);color:var(--warn)}
@keyframes recpulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.55)}50%{box-shadow:0 0 0 6px rgba(220,38,38,0)}}
@media (prefers-reduced-motion:reduce){.mlisten .rec.live{animation:none}}
.mlisten #mapRecSave:empty{display:none}
.mswitch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:6px;
  box-shadow:0 4px 18px rgba(0,0,0,.35)}
.mswitch button{font:inherit;font-size:17px;font-weight:700;min-height:50px;border-radius:12px;border:2px solid var(--line);min-width:0;padding:4px 6px;line-height:1.15;overflow-wrap:anywhere;
  background:var(--field);color:var(--ink);cursor:pointer;transition:transform 140ms var(--ease-out),background-color 140ms ease}
.mswitch button:active{transform:scale(.97)}
.mswitch button.yes[aria-checked="true"]{background:var(--c-yes);border-color:var(--c-yes);color:#1d1205}
.mswitch button.yes.l1[aria-checked="true"]{background:#ffb04a;border-color:#ffb04a}
.mswitch button.yes.l3[aria-checked="true"]{background:#e8181c;border-color:#e8181c;color:#fff}
.mswitch button.no[aria-checked="true"]{background:var(--c-no);border-color:var(--c-no);color:#fff}
.me{position:relative;width:0;height:0}
.me .acc{position:absolute;box-sizing:border-box;border-radius:50%;background:rgba(26,115,232,.12);border:1px solid rgba(26,115,232,.6)}
.me .medot{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#1a73e8;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.4)}
.me .arrow{position:absolute;left:-20px;top:-20px;width:40px;height:40px;transform-origin:50% 50%;transition:transform 300ms linear}
.me .arrow svg{display:block;transform:translateY(-14px)}
.stale .medot{background:#8a9099}
.mstart{position:fixed;inset:0;z-index:4000;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:16px}
.mstart .card{background:var(--panel);color:var(--ink);border-radius:16px;padding:18px;max-width:440px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.5);
  display:flex;flex-direction:column;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
.mstart .body{overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0;overscroll-behavior:contain}
.mstart .row{flex:none;margin-top:12px}
.mstart h2{font-size:20px;margin-bottom:8px}
.mstart .warnline{font-weight:700;color:var(--warn)}
@media (prefers-reduced-motion:reduce){.me .arrow,.mnote{transition:none}}

/* ---------- owner's stance: first thing in the lot's number badge (and the legend) ---------- */
.bd .st{display:block;width:15px;height:15px;margin:-2px 0 -2px -2px}
.bd .st svg,.sti svg{display:block;width:100%;height:100%}
.sti{width:22px;height:22px;flex:none;padding:2px;border-radius:50%;background:rgba(20,26,24,.88)}

/* ---------- Map my property (property.js) ---------- */
body.property #top,body.property footer,body.property .legend,body.property #panel,body.property #mapFab{display:none!important}
body.property .leaflet-top.leaflet-left{top:96px}
body.property #toast{bottom:calc(130px + env(safe-area-inset-bottom))}
.mapbar .paddr{order:-1;flex-basis:100%;font-weight:700;font-size:15px;padding:0 4px}
.pnote{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-weight:600;font-size:14px;
  box-shadow:0 4px 18px rgba(0,0,0,.35)}
.pnote:empty{display:none}
.pbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pbtns button{font:inherit;font-size:18px;font-weight:700;min-height:64px;border-radius:14px;border:2px solid var(--line);cursor:pointer;
  display:flex;gap:8px;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(0,0,0,.35);transition:transform 140ms var(--ease-out)}
.pbtns button:active{transform:scale(.97)}
.pbtns button:disabled{opacity:.6}
.pbtns .heard{background:#ff6b1a;border-color:#ff6b1a;color:#1d2321}
.pbtns .quiet{background:var(--panel);color:var(--ink)}
.pbtns .pdot{width:14px;height:14px;border-radius:50%;border:2px solid #fff;background:#4a7cff}
.pbtns .heard .pdot{background:#ff6b1a;border-color:#1d2321}

/* Admin → Settings → Funnel (views.js funnelSection): 14 day columns, scrolls sideways */
.funnel{border-collapse:collapse;font-size:13px;white-space:nowrap}
.funnel th,.funnel td{padding:2px 6px;text-align:right;border-bottom:1px solid var(--line);font-weight:400}
.funnel th{font-weight:600}
.funnel td:first-child,.funnel th:first-child{text-align:left}