/* Layout: a night-walk map. Header with the lit count, a search bar, then the path itself
   (landscape on wide screens, rotated to a tall scroll on phones), a tap card for each home. */
:root{
  /* Christmas palette: evergreen night ground (cool, low chroma) so the one warm hue,
     incandescent gold, owns the attention. Cranberry is green's complement, kept for the
     secondary "planning to" state. The path reads as fresh snow. */
  --night:#0a1712; --night-2:#0f211a; --mapbg:#0f211a; --lot:#183126; --lot-edge:#2a4a3b; --context:#112219;
  --path:#e4efe9; --street:#173126; --text:#f4ecdc; --muted:#a3b8ad;
  --gold:#ffc861; --gold-deep:#f2a93b; --maybe:#d9434f; --berry:#b32636; --pine:#2f7a52; --focus:#ffe7b0;
  --display:"DM Serif Display", Georgia, serif; --body:Figtree, "Helvetica Neue", Arial, sans-serif;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{background:var(--night);color:var(--text)}
body{margin:0}
body{font-family:var(--body);font-size:15px;line-height:1.45}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:20px 40px;display:flex;flex-direction:column;gap:16px}
header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.eyebrow{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--maybe);font-weight:700}
h1{margin:4px 0 0;font-family:var(--display);font-weight:400;font-style:italic;font-size:clamp(34px,6vw,54px);line-height:1;text-wrap:balance}
.lede{margin:8px 0 0;color:var(--muted);max-width:56ch}
.count{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:0}
.count .num{font-family:var(--display);font-size:clamp(30px,5vw,44px);line-height:1;font-variant-numeric:tabular-nums}
.count .num b{color:var(--gold);font-weight:400}
.count .lbl{font-size:13px;color:var(--muted)}
.bar{width:min(260px,70vw);height:8px;border-radius:99px;background:var(--lot);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold));box-shadow:0 0 12px var(--gold)}
.tools{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between}
.search{position:relative;flex:1 1 300px;max-width:420px}
.search input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--text);background:var(--night-2);border:1px solid var(--lot-edge);border-radius:12px;padding:12px 14px}
.search input:focus{outline:2px solid var(--focus);outline-offset:1px}
.sugg{position:absolute;z-index:5;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;background:var(--night-2);border:1px solid var(--lot-edge);border-radius:12px;max-height:280px;overflow:auto;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.sugg li button{width:100%;text-align:left;font:inherit;color:var(--text);background:none;border:0;padding:9px 10px;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.sugg li button:hover,.sugg li button:focus{background:var(--lot);outline:none}
.sugg small{color:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0;padding:0;list-style:none;font-size:13px;color:var(--muted)}
.legend li{display:flex;align-items:center;gap:7px}
.sw{width:14px;height:14px;border-radius:3px;border:1px solid var(--lot-edge);background:var(--lot)}
.sw.lit{background:var(--gold);border-color:var(--gold);box-shadow:0 0 8px var(--gold)}
.sw.maybe{background:transparent;border:2px dashed var(--maybe)}
.sw.path{background:rgba(228,239,233,.35);border-color:rgba(228,239,233,.5)}
.mapbox{position:relative;background:var(--mapbg);border:1px solid var(--lot-edge);border-radius:16px;overflow:hidden}
.mapbox.tall{}
svg.map{display:block;width:100%;height:auto}
.ctx{fill:var(--context);stroke:#1a2742;stroke-width:1}
.tract{fill:var(--path);opacity:.22}
.street-edge{fill:none;stroke:none;stroke-width:11;stroke-linecap:round;stroke-linejoin:round}
.street{fill:none;stroke:var(--street);stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.slabel{fill:#7f9a8c;font:600 13px var(--body);letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.home{fill:var(--lot);stroke:var(--lot-edge);stroke-width:1.2;cursor:pointer;transition:fill .3s}
.home.near{opacity:.6}
.home:hover{stroke:var(--focus)}
.home.maybe{fill:#2a1a1d;stroke:var(--maybe);stroke-width:2.2;stroke-dasharray:5 3}
.home.lit{fill:var(--gold);stroke:#fff1c9;stroke-width:1.2;filter:url(#glow)}
.home.sel{stroke:#ffffff;stroke-width:3;stroke-dasharray:none}
.compass{fill:var(--muted);font:600 12px var(--body)}
.card{position:sticky;bottom:12px;z-index:4;background:var(--night-2);border:1px solid var(--lot-edge);border-radius:16px;padding:16px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.card h2{margin:0;font-family:var(--display);font-weight:400;font-size:26px;line-height:1.1}
.card p{margin:4px 0 0;color:var(--muted);font-size:14px}
.card .st{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:99px;background:var(--lot);color:var(--muted)}
.card .st.lit{background:var(--gold);color:#3a2600}
.card .st.maybe{background:transparent;border:1px dashed var(--maybe);color:var(--maybe)}
.btn{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-weight:700;font-size:15px;text-decoration:none;color:#2b1c00;background:var(--gold);border-radius:12px;padding:12px 18px;box-shadow:0 0 18px rgba(255,198,92,.35)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn.ghost{background:transparent;color:var(--gold);border:1px solid var(--gold-deep);box-shadow:none}
.close{font:inherit;color:var(--muted);background:none;border:0;cursor:pointer;padding:6px}
@media (max-width:640px){.count{align-items:flex-start}}
.foot{color:var(--muted);font-size:13px;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}
@media (prefers-reduced-motion:no-preference){.home.lit{animation:tw 3.2s ease-in-out infinite}.home.lit:nth-child(3n){animation-delay:-1.1s}.home.lit:nth-child(3n+1){animation-delay:-2.2s}}
@keyframes tw{0%,100%{fill:var(--gold)}50%{fill:#ffd88a}}

.lights{display:block;width:100%;height:46px;margin-bottom:-6px}
.lights .bulb{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){.lights .bulb{animation:blink 2.6s ease-in-out infinite}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.55}}
.snow{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.snow i{position:absolute;top:-10px;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.35}
@media (prefers-reduced-motion:no-preference){.snow i{animation:fall linear infinite}}
@keyframes fall{to{transform:translate3d(20px,105vh,0)}}
.wrap{position:relative;z-index:1}
.feedstate{font-size:12px;color:var(--muted)}

.sheet{position:fixed;inset:0;z-index:20;background:rgba(4,10,8,.72);display:flex;align-items:flex-end;justify-content:center;padding:12px;padding-top:max(12px,env(safe-area-inset-top,0px))}
@media (min-width:700px){.sheet{align-items:center}}
.panel{width:100%;max-width:620px;max-height:100%;overflow:auto;box-sizing:border-box;background:var(--night-2);border:1px solid var(--lot-edge);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.panel h2{margin:4px 0 0;font-family:var(--display);font-weight:400;font-size:28px;line-height:1.1}
.phead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.field{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}
.field label,.field legend{font-size:13px;font-weight:600;color:var(--muted);padding:0}
.field legend{margin-bottom:8px}
.panel input[type=text],.panel input:not([type]),.panel input[type=tel],.panel input[type=email],.panel textarea{font:inherit;font-size:16px;color:var(--text);background:var(--night);border:1px solid var(--lot-edge);border-radius:10px;padding:11px 12px;width:100%;box-sizing:border-box}
.panel textarea{resize:vertical}
.panel input:focus,.panel textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.panel .bad{border-color:var(--maybe)!important}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices.col{flex-direction:column}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;padding:9px 13px;border:1px solid var(--lot-edge);border-radius:99px;font-size:14px;background:var(--night);transition:background .15s,border-color .15s}
.choices.col .chip span{border-radius:10px;display:block}
.chip input:checked + span{background:var(--gold);border-color:var(--gold);color:#2b1c00;font-weight:600}
.chip input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}
.more{border-top:1px solid var(--lot-edge);border-bottom:1px solid var(--lot-edge);padding:12px 0;display:block}
.more summary{cursor:pointer;font-weight:600}
.more summary small{color:var(--muted);font-weight:400}
.more[open]{display:flex;flex-direction:column;gap:14px}
.confirm{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4;cursor:pointer}
.confirm input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--gold);flex:none}
.err{margin:0;color:#ff9aa3;font-size:14px}
.actions{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.actions .btn{border:0;cursor:pointer}
.btn[disabled]{opacity:.6;cursor:progress}
.fine{font-size:12px;color:var(--muted);flex:1 1 220px}
.done{align-items:flex-start}
.done p{margin:0;color:var(--muted)}
button.btn{border:0;cursor:pointer;font-family:inherit}

.involve{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:640px){.involve{grid-template-columns:1fr}}
.ib{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:14px;border:1px solid var(--lot-edge);background:var(--night-2);color:var(--text);text-decoration:none}
.ib b{font-family:var(--display);font-weight:400;font-size:21px;color:var(--gold-deep)}
.ib span{font-size:14px;color:var(--muted)}
.ib:hover{border-color:var(--gold-deep)}
.ib:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.fbcard{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:14px;border:1px solid var(--lot-edge);background:var(--night-2);color:var(--text);text-decoration:none}
.fbcard svg{width:26px;height:26px;flex:none;color:var(--gold-deep)}
.fbcard span{display:flex;flex-direction:column;gap:2px;flex:1}
.fbcard b{font-size:15px}
.fbcard small{font-size:13px;color:var(--muted)}
.fbcard i{font-style:normal;color:var(--muted);font-size:18px}
.fbcard:hover{border-color:var(--gold-deep)}
.fbcard:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.pg .fine{flex:none;margin:0}
.pg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:22px;align-items:start}
@media (max-width:860px){.pg{grid-template-columns:1fr}}
.pg .panel{max-width:none;max-height:none;overflow:visible}
.ideas{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.ideas li{padding:13px 15px;border-radius:14px;border:1px solid var(--lot-edge);background:var(--night-2)}
.ideas b{display:block;font-size:15px}
.ideas span{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.note{padding:12px 14px;border-radius:12px;border:1px dashed var(--gold-deep);font-size:14px}
.other{margin-top:8px}

.linkbtn{font:inherit;color:var(--gold);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}

/* TREES:START  lit pine silhouettes along the bottom of the page */
.forest{position:fixed;left:0;right:0;bottom:0;height:min(34vh,300px);z-index:0;pointer-events:none}
.forest svg{width:100%;height:100%;display:block}
.forest .tw{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){.forest .tw{animation:twk 3s ease-in-out infinite}}
@keyframes twk{0%,100%{opacity:1}50%{opacity:.35}}
.wrap{padding-bottom:min(26vh,220px)}
/* TREES:END */

/* DAY MODE: cream snow-day palette. Same layout, light ground. Toggle top right. */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
.nav{display:flex;flex-wrap:wrap;gap:4px}
.nav a{font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;padding:7px 12px;border-radius:99px;border:1px solid transparent}
.nav a:hover{color:var(--text);border-color:var(--lot-edge)}
.nav a[aria-current=page]{color:var(--text);background:var(--night-2);border-color:var(--lot-edge)}
.nav a:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.theme{flex:none;display:flex;gap:2px;padding:3px;border-radius:99px;background:var(--night-2);border:1px solid var(--lot-edge);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.theme button{font:inherit;font-size:13px;font-weight:600;color:var(--muted);background:none;border:0;border-radius:99px;padding:6px 11px;cursor:pointer;display:flex;align-items:center;gap:5px}
.theme button[aria-pressed="true"]{background:var(--gold);color:#2b1c00}
.theme button:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.theme svg{width:14px;height:14px}
@media (max-width:640px){.theme button{padding:6px 8px}.theme .tl{display:none}.nav a{padding:6px 9px;font-size:13px}.topbar{align-items:flex-start}}
.forest-day,.mist-day{display:none}
:root[data-theme="light"]{
  --night:#fcf9f0; --night-2:#fffdf7; --mapbg:#dfedda; --lot:#c4e2c6; --lot-edge:#6f9a7c; --context:#d6e8d2;
  --path:#9fbf9e; --street:#fcfbf4; --text:#0b3a2b; --muted:#3c5a4c;
  --gold:#f7bd3c; --gold-deep:#e59a16; --maybe:#d22f39; --berry:#b32636; --pine:#2f7a52; --focus:#0b3a2b;
  color-scheme:light;
}
:root[data-theme="light"] .lede{color:#284539}
:root[data-theme="light"] .count .num{color:#0b3a2b}
:root[data-theme="light"] .count .num b{color:#f0ac14}
:root[data-theme="light"] .bar{background:#b9d0b8}
:root[data-theme="light"] .bar i{box-shadow:none}
:root[data-theme="light"] .search input{background:#fffdf8;border-color:#3d6b55}
:root[data-theme="light"] .sugg,:root[data-theme="light"] .card,:root[data-theme="light"] .panel{box-shadow:0 12px 30px rgba(30,60,45,.18)}
:root[data-theme="light"] .sw{background:#c4dcc3;border-color:#6f9a7c}
:root[data-theme="light"] .sw.lit{background:#facc70;border-color:#e59a16;box-shadow:none}
:root[data-theme="light"] .sw.maybe{background:transparent;border:2px dashed #e0383f}
:root[data-theme="light"] .sw.path{background:#b3c9b0;border-color:#b3c9b0}
:root[data-theme="light"] .mapbox{border-color:#74997c}
:root[data-theme="light"] .ctx{fill:#dcebd7;stroke:#8fb59a}
:root[data-theme="light"] .tract{opacity:.45}
:root[data-theme="light"] .street-edge{stroke:#7fa58a}
:root[data-theme="light"] .slabel{fill:#16352a;font-weight:700}
:root[data-theme="light"] .compass{fill:#16352a}
:root[data-theme="light"] .home{fill:#c4e2c6;stroke:#6f9a7c}
:root[data-theme="light"] .home:hover{stroke:#0b3a2b}
:root[data-theme="light"] .home.maybe{fill:#fdf2ea;stroke:#d22f39}
:root[data-theme="light"] .home.lit{fill:#f7bd3c;stroke:#e08e10;filter:none}
:root[data-theme="light"] .home.sel{stroke:#0b3a2b}
:root[data-theme="light"] .btn{box-shadow:0 4px 12px rgba(229,154,22,.3)}
:root[data-theme="light"] .btn.ghost{color:#9a6200;border-color:#e59a16}
:root[data-theme="light"] .linkbtn{color:#9a6200}
:root[data-theme="light"] .sheet{background:rgba(25,50,38,.45)}
:root[data-theme="light"] .panel input,:root[data-theme="light"] .panel textarea,:root[data-theme="light"] .chip span{background:#fff}
:root[data-theme="light"] .chip input:checked + span{background:var(--gold)}
:root[data-theme="light"] .err{color:#b3212c}
:root[data-theme="light"] .lights polyline,:root[data-theme="light"] .lights rect{stroke:#1d4433;fill:#1d4433}
:root[data-theme="light"] .lights polyline{fill:none}
:root[data-theme="light"] .lights .bulb{stroke:rgba(40,30,10,.25);stroke-width:.8}
:root[data-theme="light"] .lights{filter:drop-shadow(0 0 3px rgba(255,190,80,.45))}
:root[data-theme="light"] .snow i{opacity:.95;box-shadow:0 0 2px rgba(110,140,120,.55)}
:root[data-theme="light"] .forest{display:none}
:root[data-theme="light"] body{min-height:100vh;display:flex;flex-direction:column}
:root[data-theme="light"] .wrap{flex:1 0 auto;width:100%;box-sizing:border-box}
:root[data-theme="light"] .forest-day{display:block;position:relative;z-index:0;height:min(461px,44vh);margin-top:-70px;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34%);mask-image:linear-gradient(to bottom,transparent 0,#000 34%)}
.forest-day svg{position:relative;display:block;width:100%;height:100%}
.forest-day::before{content:"";position:absolute;inset:-12px;background:url(trees-day.webp) center bottom/cover no-repeat;filter:blur(7px) saturate(.85);opacity:.75}
.forest-day .gl{mix-blend-mode:screen;opacity:.25}
.forest-day .co{opacity:.35}
@media (prefers-reduced-motion:no-preference){.forest-day .gl{animation:dglow 2.6s ease-in-out infinite}.forest-day .co{animation:dcore 2.6s ease-in-out infinite}}
@keyframes dglow{0%,100%{opacity:.12}50%{opacity:.95}}
@keyframes dcore{0%,100%{opacity:.15}50%{opacity:1}}
:root[data-theme="light"] .mist-day{display:block;position:absolute;z-index:0;pointer-events:none;top:120px;right:22%;width:265px;height:147px;background:url(mist-day.webp) center/cover no-repeat;opacity:.9;-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
:root[data-theme="light"] .wrap{padding-bottom:40px}
@media (max-width:640px){:root[data-theme="light"] .mist-day{display:none}}
:root[data-theme="light"] .lights{height:54px}
:root[data-theme="light"] .lights g:nth-of-type(4n+1) .bulb{fill:#e3262f}
:root[data-theme="light"] .lights g:nth-of-type(4n+2) .bulb{fill:#1f9a4f}
:root[data-theme="light"] .lights g:nth-of-type(4n+3) .bulb{fill:#f5a623}
:root[data-theme="light"] .lights g:nth-of-type(4n+4) .bulb{fill:#fff6dd}