/* Layout: full-height tool — genplan map on the left (pan/zoom), working panel on the right; stacks map-over-panel on phones. */
:root{
  --bg:#eef1ec; --surface:#ffffff; --surface-2:#f6f8f4; --ink:#1b2220; --muted:#5f6a64; --line:#d8ded6;
  --accent:#b02a55; --accent-soft:#f6e3ea; --accent-ink:#ffffff; --mapbg:#dfe5da;
  --ok:#2b9450; --warn:#d99a12; --no:#8b9097; --focus:#b02a55;
  --f-display:"Unbounded","Golos Text",system-ui,sans-serif;
  --f-ui:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-num:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --r:10px;
  /* map palette */
  --m-ground:#dde8c6; --m-grass:#cddbb0; --m-forest:#93bf7f; --m-crown:#7fb06c; --m-crown-2:#a8cf93; --m-field:#efe2b0; --m-field-2:#e2d196;
  --m-water:#5fa8d8; --m-bank:#c9e3f1; --m-water-ink:#2f6f9c; --m-terr:#f6f8ee; --m-road:#e6d9bb; --m-road-edge:#cdbb94;
  --m-plot:#b4d48e; --m-plot-1:#a8cd83; --m-plot-2:#bedb9a; --m-plot-3:#c9dfa0; --m-plot-corp:#c4c7c9; --m-plot-ink:#2b3a20; --m-plot-ink-2:#2b3a20;
  --m-hw:#8f9399; --m-hw-line:#ffffff; --m-rail:#6b5b4e; --m-label:#4d5b44; --hl-band:#f2c3d2; --m-dirt:#c9b48f;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#121614; --surface:#1a1f1d; --surface-2:#202624; --ink:#e7ece9; --muted:#9aa6a0; --line:#2d3532;
  --accent:#e45c86; --accent-soft:#3a2129; --accent-ink:#1a0d12; --mapbg:#0d100f;
  --ok:#47be70; --warn:#f0b43a; --no:#7d848b; --focus:#e45c86;
  --m-ground:#1a2316; --m-grass:#212c1c; --m-forest:#16301b; --m-crown:#1d3d22; --m-crown-2:#244a29; --m-field:#37321f; --m-field-2:#403a25;
  --m-water:#2f6c96; --m-bank:#1d3340; --m-water-ink:#7fb8de; --m-terr:#20291c; --m-road:#4a4231; --m-road-edge:#5a503b;
  --m-plot:#4a6e3e; --m-plot-1:#43653a; --m-plot-2:#527845; --m-plot-3:#5a7f4b; --m-plot-corp:#4a4f52; --m-plot-ink:#e9f2dc; --m-plot-ink-2:#e9f2dc;
  --m-hw:#3b3f44; --m-hw-line:#c9cdd2; --m-rail:#a59584; --m-label:#a3b394; --hl-band:#6b2e43; --m-dirt:#6e6046; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#121614; --surface:#1a1f1d; --surface-2:#202624; --ink:#e7ece9; --muted:#9aa6a0; --line:#2d3532;
  --accent:#e45c86; --accent-soft:#3a2129; --accent-ink:#1a0d12; --mapbg:#0d100f;
  --ok:#47be70; --warn:#f0b43a; --no:#7d848b; --focus:#e45c86;
  --m-ground:#1a2316; --m-grass:#212c1c; --m-forest:#16301b; --m-crown:#1d3d22; --m-crown-2:#244a29; --m-field:#37321f; --m-field-2:#403a25;
  --m-water:#2f6c96; --m-bank:#1d3340; --m-water-ink:#7fb8de; --m-terr:#20291c; --m-road:#4a4231; --m-road-edge:#5a503b;
  --m-plot:#4a6e3e; --m-plot-1:#43653a; --m-plot-2:#527845; --m-plot-3:#5a7f4b; --m-plot-corp:#4a4f52; --m-plot-ink:#e9f2dc; --m-plot-ink-2:#e9f2dc;
  --m-hw:#3b3f44; --m-hw-line:#c9cdd2; --m-rail:#a59584; --m-label:#a3b394; --hl-band:#6b2e43; --m-dirt:#6e6046; color-scheme:dark }

html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:14px;line-height:1.45}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.app{height:100%;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:16px;padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));border-bottom:1px solid var(--line);background:var(--surface)}
.brand{display:flex;align-items:baseline;gap:10px;min-width:0}
.logo{font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--accent)}
.sub{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .sp{flex:1}
.switch{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer;user-select:none}
.switch input{appearance:none;width:34px;height:20px;border-radius:20px;background:var(--line);position:relative;cursor:pointer;transition:background .15s}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--surface);transition:left .15s}
.switch input:checked{background:var(--accent)}
.switch input:checked::after{left:17px}

.body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 380px}
.mapwrap{position:relative;overflow:hidden;background:var(--m-ground);touch-action:none;cursor:grab}
.mapwrap.drawing{cursor:crosshair}
.mapwrap.dragging{cursor:grabbing}
.stage{position:absolute;left:0;top:0;width:1904px;height:2395px;transform-origin:0 0;will-change:transform}
.stage img{display:none;position:absolute;inset:0;width:1904px;height:2395px;max-width:none;user-select:none;-webkit-user-drag:none}
.stage.raster img{display:block}
.stage.raster #gBase{display:none}
.stage svg{position:absolute;inset:0;width:1904px;height:2395px;overflow:visible}

/* base map */
.b-forest{fill:url(#patForest)}
.b-bg{fill:url(#patGrass)}
.b-field{fill:url(#patField)}
.pg-base{fill:var(--m-ground)}.pg-dot{fill:var(--m-grass)}
.pf-base{fill:var(--m-forest)}.pf-c1{fill:var(--m-crown)}.pf-c2{fill:var(--m-crown-2)}
.pd-base{fill:var(--m-field)}.pd-row{fill:var(--m-field-2)}
.b-hole{fill:url(#patGrass)}
.b-terr{fill:var(--m-terr)}
.b-road{fill:var(--m-road);stroke:var(--m-road-edge);stroke-width:2}
.st-ex,.st-pr{display:none}
.st-pr{fill:none;stroke:var(--m-road-edge);stroke-width:2.5;stroke-dasharray:6 8;stroke-linecap:round}
#gStHit{display:none}
.roadedit #gStHit{display:inline}
.st-hit{fill:none;stroke:transparent;stroke-width:24;stroke-linecap:round;cursor:pointer;pointer-events:stroke}
.st-hit:hover{stroke:color-mix(in srgb,var(--accent) 35%,transparent)}
.stage.raster #gStreets{display:none}
.b-bank{fill:none;stroke:var(--m-bank);stroke-width:26;stroke-linecap:round;stroke-linejoin:round}
.b-river{fill:none;stroke:var(--m-water);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.b-hw-edge{fill:none;stroke:var(--m-road-edge);stroke-width:52}
.b-hw{fill:none;stroke:var(--m-hw);stroke-width:44}
.b-hw-line{fill:none;stroke:var(--m-hw-line);stroke-width:2.5;stroke-dasharray:26 22}
.b-rail-bed{fill:none;stroke:var(--m-road);stroke-width:16}
.b-rail{fill:none;stroke:var(--m-rail);stroke-width:12;stroke-dasharray:2.5 7}
.b-rail2{fill:none;stroke:var(--m-rail);stroke-width:2.2}
.b-q{stroke:none;opacity:.55}
.b-q1{fill:#c9a400}.b-q2{fill:#3c9a3c}.b-q3{fill:#1a9bb0}
.b-label.water{fill:var(--m-water-ink)}
.b-label.hw{fill:var(--m-label);font-style:normal;font-size:24px;letter-spacing:.06em}
.b-label{fill:var(--m-label);paint-order:stroke;stroke:color-mix(in srgb,var(--m-ground) 80%,transparent);stroke-width:5px;font-family:var(--f-ui);font-size:30px;font-style:italic;letter-spacing:.02em}
.b-label.big{font-size:34px;font-style:normal;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.b-pt circle{fill:var(--surface);stroke:var(--ink);stroke-width:3}
.b-pt text{fill:var(--ink);font:600 15px var(--f-ui);text-anchor:middle;dominant-baseline:central}

/* plots */
.stage:not(.muted) .plot.v1:not(.sel):not(.hov){fill:var(--m-plot-1)}
.stage:not(.muted) .plot.v2:not(.sel):not(.hov){fill:var(--m-plot-2)}
.stage:not(.muted) .plot.v3:not(.sel):not(.hov){fill:var(--m-plot-3)}
.plot{fill:var(--m-plot);stroke:var(--m-terr);stroke-width:1.8px;vector-effect:non-scaling-stroke;stroke-linejoin:round;cursor:pointer}
.plot.d-corp{fill:var(--m-plot-corp)}
.raster .plot{fill:transparent;stroke:transparent}
/* groups: drawn under the plots; a thick accent stroke becomes the outer border,
   a lighter inner stroke bridges the gaps, so neighbouring plots of one owner read as one shape */
.grp-o{fill:var(--accent);stroke:var(--accent);stroke-width:var(--hlw,10px);stroke-linejoin:round}
.grp-i polygon{stroke-width:4.5px;stroke-linejoin:round}
#gSel,#gHover{pointer-events:none}
#gHover .grp-o{fill:color-mix(in srgb,var(--accent) 75%,transparent);stroke:color-mix(in srgb,var(--accent) 75%,transparent)}
.plot.hov{fill:color-mix(in srgb,var(--hl-band) 55%,var(--m-plot-2))}
.plot.sel{fill:var(--hl-band)}
.muted .plot.hov{fill:color-mix(in srgb,var(--accent) 18%,var(--m-terr))}
.plot.s-paid.hov,.plot.s-paid.sel{fill:var(--ok)}
.plot.s-pledged.hov,.plot.s-pledged.sel{fill:var(--warn)}
.raster .plot.hov,.raster .plot.sel{fill:color-mix(in srgb,var(--accent) 30%,transparent)}
.raster .grp-i{fill:transparent;stroke:color-mix(in srgb,var(--accent) 30%,transparent)}
.plot.pick{fill:color-mix(in srgb,var(--accent) 45%,var(--m-plot))}
.muted .plot{fill:color-mix(in srgb,var(--m-plot) 62%,var(--m-terr))}
.muted .plot.scope:not(.s-paid):not(.s-pledged):not(.s-refused){fill:var(--m-plot)}
.plot.s-paid{fill:var(--ok)}
.plot.s-pledged{fill:var(--warn)}
.plot.s-refused{fill:color-mix(in srgb,var(--no) 75%,var(--m-terr))}
.plabels{pointer-events:none;font-family:var(--f-ui);text-anchor:middle;dominant-baseline:central}
.plabels text{fill:var(--m-plot-ink);font-weight:600;font-variant-numeric:tabular-nums}
.plabels text.dk{fill:var(--m-plot-ink-2)}
.plabels tspan.ar{font-size:.7em;font-weight:400;opacity:.85}
.stage.z-lo .plabels{display:none}
.stage:not(.z-hi) .plabels tspan.ar{display:none}
.raster .plabels{display:none}
.shape-line-u{fill:none;stroke:#101414;stroke-opacity:.55;stroke-linecap:round;stroke-linejoin:round}
.shape-line{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:.92}
.shape-area{stroke-width:4;fill-opacity:.28;stroke-opacity:.95;stroke-dasharray:14 8}
.draft{fill:none;stroke:var(--accent);stroke-width:6;stroke-dasharray:12 8}
.draft-pt{fill:var(--surface);stroke:var(--accent);stroke-width:4}
.draft.route{stroke-dasharray:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:.85}

.mapctl{position:absolute;right:calc(12px + env(safe-area-inset-right,0px));top:12px;display:flex;flex-direction:column;gap:6px}
.mapctl button{width:38px;height:38px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-size:18px;font-weight:600;cursor:pointer;display:grid;place-items:center;box-shadow:0 1px 3px rgb(0 0 0 / .12)}
.mapctl button:hover{border-color:var(--accent);color:var(--accent)}
.legend{position:absolute;left:calc(12px + env(safe-area-inset-left,0px));bottom:12px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;max-width:calc(100% - 24px);box-shadow:0 1px 3px rgb(0 0 0 / .1)}
.legend b{font-weight:600;width:100%;font-size:12px}
.lg{display:flex;align-items:center;gap:6px;color:var(--muted)}
.dot{width:12px;height:12px;border-radius:3px;flex:none}
.d-paid{background:var(--ok)}.d-pledged{background:var(--warn)}.d-refused{background:var(--no)}.d-none{background:transparent;border:1.5px solid var(--muted)}
.drawbar{position:absolute;left:50%;top:12px;transform:translateX(-50%);background:var(--ink);color:var(--bg);border-radius:10px;padding:8px 8px 8px 14px;display:flex;align-items:center;gap:8px;font-size:13px;box-shadow:0 4px 14px rgb(0 0 0 / .25);max-width:calc(100% - 80px);flex-wrap:wrap}
.drawbar button{border:0;border-radius:7px;padding:6px 10px;cursor:pointer;background:color-mix(in srgb,var(--bg) 18%,transparent);color:var(--bg);font-weight:500}
.drawbar button.primary{background:var(--accent);color:var(--accent-ink)}
.tip{position:fixed;pointer-events:none;z-index:20;background:var(--ink);color:var(--bg);padding:7px 10px;border-radius:8px;font-size:12.5px;line-height:1.35;max-width:240px;box-shadow:0 4px 14px rgb(0 0 0 / .25)}
.tip .n{font-family:var(--f-num);font-size:13px}
.tip .m{opacity:.75}

.panel{border-left:1px solid var(--line);background:var(--surface);overflow-y:auto;min-width:0;padding-block:16px 32px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.panel>*+*{margin-top:16px}
h2{font-family:var(--f-display);font-weight:500;font-size:17px;line-height:1.25;margin:0;text-wrap:balance}
h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:0;font-weight:600}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:8px}
.back{border:0;background:none;padding:0;color:var(--muted);cursor:pointer;font-size:13px}
.back:hover{color:var(--accent)}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 12px;cursor:pointer;font-weight:500;font-size:13px}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08);color:var(--accent-ink)}
.btn.danger{color:#c0392b;border-color:color-mix(in srgb,#c0392b 40%,var(--line))}
.btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.btn:disabled{opacity:.5;cursor:default}
.search{display:flex;gap:8px}
.search input{flex:1;min-width:0}
input[type=text],input[type=number],input[type=search],select,textarea{border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:7px 10px;width:100%}
textarea{resize:vertical;min-height:64px}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);min-width:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.tasks{display:flex;flex-direction:column;gap:10px}
.task{border:1px solid var(--line);border-radius:var(--r);padding:12px;cursor:pointer;background:var(--surface);text-align:left;display:flex;flex-direction:column;gap:8px;width:100%}
.task:hover{border-color:var(--accent)}
.task .t{font-weight:600;font-size:14.5px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:11.5px;border-radius:20px;padding:2px 8px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.chip.st-collecting{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.chip.st-in_progress{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.chip.st-done{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.legend-in{display:flex;flex-direction:column;gap:6px;font-size:13px}
.legend-in .lg{color:var(--ink)}
.sw-ex{width:22px;height:6px;border-radius:3px;background:var(--m-dirt);flex:none}
.sw-pr{width:22px;height:0;border-top:2.5px dashed var(--m-road-edge);flex:none}
.pchip{cursor:pointer;font-family:var(--f-num);font-size:12px;color:var(--ink)}
.pchip:hover,.pchip.on{border-color:var(--accent);color:var(--accent)}
.pchip.on{background:var(--accent-soft)}
.linkbtn{border:0;background:none;padding:0;font:600 15px var(--f-ui);color:var(--accent);cursor:pointer;text-align:left}
.linkbtn:hover{text-decoration:underline}
.ownerbox{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:var(--r);padding:12px}
.swatch{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:0}
.bar{height:8px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.bar .p{background:var(--ok)}.bar .q{background:var(--warn)}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.money{font-variant-numeric:tabular-nums;white-space:nowrap}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:var(--surface-2);border-radius:8px;padding:8px 10px}
.stat .v{font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.stat .k{font-size:11.5px;color:var(--muted)}
.list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-top:1px solid var(--line);background:var(--surface)}
.li:first-child{border-top:0}
.li.click{cursor:pointer}
.li.click:hover{background:var(--surface-2)}
.li .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn{font-family:var(--f-num);font-weight:500;min-width:44px}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:0;background:var(--surface);padding:6px 9px;font-size:12px;cursor:pointer;border-left:1px solid var(--line)}
.seg button:first-child{border-left:0}
.seg button.on.v-paid{background:var(--ok);color:#fff}
.seg button.on.v-pledged{background:var(--warn);color:#1b1404}
.seg button.on.v-refused{background:var(--no);color:#fff}
.seg button.on.v-none{background:var(--surface-2);font-weight:600}
.big{font-family:var(--f-display);font-size:30px;font-weight:700;line-height:1;color:var(--accent)}
.note{background:var(--surface-2);border-radius:8px;padding:10px 12px;font-size:12.5px;color:var(--muted)}
.empty{border:1px dashed var(--line);border-radius:var(--r);padding:16px;color:var(--muted);text-align:center;font-size:13px}
.colors{display:flex;gap:6px}
.colors button{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.colors button.on{border-color:var(--ink)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:8px;font-size:13px;z-index:30;box-shadow:0 4px 14px rgb(0 0 0 / .25)}

@media (max-width:820px){
  .body{display:flex;flex-direction:column;overflow-y:auto}
  .mapwrap{height:60vh;height:60dvh;flex:none}
  .panel{border-left:0;border-top:1px solid var(--line);overflow:visible}
  .sub{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
html{-webkit-text-size-adjust:100%}
body{margin:0}
[hidden]{display:none!important}
.acct{display:flex;align-items:center;gap:10px}
.who{display:flex;align-items:center;gap:8px;font-size:13px;max-width:180px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.who img{width:26px;height:26px;border-radius:50%}
.modal{position:fixed;inset:0;background:rgb(0 0 0 / .45);display:grid;place-items:center;z-index:40;padding:16px}
.modal-card{background:var(--surface);border-radius:14px;padding:20px;max-width:380px;width:100%;display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 40px rgb(0 0 0 / .3)}
.check{display:flex;gap:8px;align-items:flex-start;font-size:13px;cursor:pointer}
.check input{margin-top:2px}
.claim{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.audit-row{font-size:12.5px;padding:8px 10px;border-top:1px solid var(--line)}
.audit-row:first-child{border-top:0}
a.btn{text-decoration:none;display:inline-block}
@media (max-width:820px){.who span{display:none}}
a.btn{color:var(--ink)}
.plot.vt-yes{fill:var(--ok)}
.plot.vt-no{fill:#c8553d}
.dv-yes{background:var(--ok)}.dv-no{background:#c8553d}.dv-none{background:transparent;border:1.5px solid var(--muted)}
.seg2{display:flex;gap:6px;flex-wrap:wrap}
.exp{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;padding:8px 10px;border-top:1px solid var(--line);font-size:13px}
.exp:first-child{border-top:0}
.exp img{width:44px;height:44px;object-fit:cover;border-radius:6px;cursor:zoom-in}
.thumb{max-width:100%;border-radius:8px;display:block}
.tabs{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;width:max-content;max-width:100%}
.tabs button{border:0;background:var(--surface);padding:6px 12px;font-size:13px;cursor:pointer;border-left:1px solid var(--line)}
.tabs button:first-child{border-left:0}
.tabs button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.debt{color:#c8553d}
.pin{cursor:pointer}
.pin-i{transform:scale(var(--ps,1))}
.pin path{fill:#e0592a;stroke:#fff;stroke-width:2}
.pin.st-work path{fill:var(--warn)}
.pin.on path{fill:var(--accent)}
.pin text{fill:#fff;font:700 15px var(--f-ui);text-anchor:middle;dominant-baseline:central;pointer-events:none}
details summary{cursor:pointer;color:var(--accent)}
@media (max-width:480px){.stats{grid-template-columns:1fr 1fr}.stat .k{overflow-wrap:anywhere}}
.me-dot{fill:#2f80ed;stroke:#fff;stroke-width:3px;vector-effect:non-scaling-stroke}
.me-acc{fill:color-mix(in srgb,#2f80ed 18%,transparent);stroke:#2f80ed;stroke-width:1px;vector-effect:non-scaling-stroke}
.mapctl button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.plot.pick{fill:var(--hl-band)!important}
@media (max-width:480px){.logo{font-size:17px}}
.newsi{padding:10px 12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.newsi:first-child{border-top:0}
.newsi.pin-n{background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.ntext{white-space:pre-wrap;font-size:13.5px}
.ntext.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.admmenu{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.admmenu summary{font-weight:600;color:var(--ink)}
.admgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.admgrid .btn{text-align:center}
.rtab{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.rtab td{padding:6px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.rtab thead td{font-size:11px;color:var(--muted)}
.rtab td.r{text-align:right;white-space:nowrap}
.rtab td:first-child{min-width:7.5em}
.tscroll{overflow-x:auto;max-width:100%}
.rtab tr.tot td{font-weight:700;border-bottom:0}
.report{display:flex;flex-direction:column;gap:12px}
.ficon{font:700 10px var(--f-ui);background:var(--accent-soft);color:var(--accent);border-radius:6px;padding:8px 6px;letter-spacing:.04em}
.exp a{color:var(--ink);font-weight:500}
@media print{
  body.printing .top, body.printing .mapwrap, body.printing .noprint, body.printing .tip, body.printing .toast{display:none!important}
  body.printing .body{display:block}
  body.printing .panel{border:0;overflow:visible;padding:0;max-width:none}
  body.printing{background:#fff;color:#000}
}
.layersmenu{position:absolute;right:calc(58px + env(safe-area-inset-right,0px));top:12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;box-shadow:0 4px 14px rgb(0 0 0 / .15);z-index:5;max-width:260px}
.zone polygon{fill:color-mix(in srgb,var(--zc) 38%,transparent);stroke:var(--zc);stroke-width:3px;vector-effect:non-scaling-stroke}
.heat{fill:url(#heatGrad)}
.heat.old{opacity:.35}
.obj{cursor:pointer}
.obj-i{transform:scale(var(--oki,1))}
.obj-d{transform:scale(var(--okd,1))}
.obj .core{fill:var(--surface);stroke:var(--m-label);stroke-width:1.5px;vector-effect:non-scaling-stroke}
.obj .obj-hit{fill:transparent;stroke:none}
.obj.st-broken .core{stroke:#d0402c;stroke-width:2.5px;fill:#fde3dc}
.obj.st-planned .core{stroke-dasharray:2 2;fill:transparent}
.obj text{font-size:10px;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.paybox .qr{width:180px;max-width:100%;align-self:center;background:#fff;padding:6px;border-radius:8px}
.paybox .qr svg{width:100%;height:auto;display:block}
.sel{user-select:all;-webkit-user-select:all;font-variant-numeric:tabular-nums}
label.check.li{padding:10px 12px}
.markmenu{position:absolute;z-index:6;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px;min-width:180px;box-shadow:0 6px 18px rgb(0 0 0 / .2)}
.btn.armed,.linkbtn.armed{background:#c0392b!important;color:#fff!important;border-color:#c0392b!important}
@media (max-width:820px){
  input,select,textarea{font-size:16px}
  .btn{min-height:40px;padding:9px 14px}
  .seg button{padding:10px 10px}
  body{font-size:15px}
}
.net{fill:none;stroke:var(--lc);stroke-width:3.5px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.net.planned{stroke-dasharray:8 6}
.net.on{stroke-width:6px}
.net-power10{stroke-width:4.5px}
.draft-net{stroke-dasharray:4 4;opacity:.8}
.net-hit{fill:none;stroke:transparent;stroke-width:18px;vector-effect:non-scaling-stroke;cursor:pointer;pointer-events:stroke}
.obj.on .core{stroke:var(--accent);stroke-width:3px}
.otypes{display:flex;flex-wrap:wrap;gap:6px}
.otypes .btn{font-size:12.5px;padding:6px 9px}
.nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0}
.nav::-webkit-scrollbar{display:none}
.nav button{border:0;background:none;padding:8px 12px;border-radius:8px;font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap}
@media (hover:hover){.nav button:hover{color:var(--ink);background:var(--surface-2)}}
.nav button.on{color:var(--accent);background:var(--accent-soft)}
.nav .cnt{font-size:11px;background:var(--accent);color:var(--accent-ink);border-radius:10px;padding:1px 6px;margin-left:2px}
.app.page .mapwrap{display:none}
.app.page .body{grid-template-columns:minmax(0,1fr);overflow-y:auto}
.app.page .panel{border-left:0;width:100%;max-width:860px;margin:0 auto;overflow:visible;padding-block:24px 40px}
.app.page{background:var(--bg)}
.hero{background:linear-gradient(135deg,color-mix(in srgb,var(--m-plot) 60%,var(--surface)),color-mix(in srgb,var(--m-forest) 70%,var(--surface)));border-radius:14px;padding:22px 20px;display:flex;flex-direction:column;gap:8px}
.hero-t{font-family:var(--f-display);font-size:28px;font-weight:700;color:var(--m-plot-ink);line-height:1.1}
.small-hero .hero-t{font-size:22px}
.hero-s{color:var(--m-plot-ink);opacity:.85}
.asec{display:flex;flex-direction:column;gap:6px}
.atext{white-space:pre-wrap;line-height:1.55}
.atext a{color:var(--accent)}
.fchips{display:flex;flex-wrap:wrap;gap:6px}
.fchips .chip{cursor:pointer;font-size:13px;padding:5px 11px;color:var(--ink)}
.fchips .chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.chip.radio input{display:none}
.chip.radio:has(input:checked){background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.adgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.adcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);cursor:pointer;text-align:left;padding:0}
.adcard:hover{border-color:var(--accent)}
.adcard img,.adph{width:100%;aspect-ratio:4/3;object-fit:cover;display:grid;place-items:center;font-weight:600}
.adb{display:flex;flex-direction:column;gap:3px;padding:10px 12px}
.adk{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.adp{font-weight:700;font-variant-numeric:tabular-nums}
.adp.big2{font-size:22px}
.adphotos{display:flex;gap:8px;overflow-x:auto}
.adphotos img{height:180px;border-radius:10px;display:block}
.phx{position:relative}.phx img{height:90px}
.phx button{position:absolute;top:4px;right:4px;border:0;border-radius:50%;width:24px;height:24px;background:rgb(0 0 0 / .6);color:#fff;cursor:pointer}
.partners{display:flex;flex-direction:column;gap:10px}
.pblock{border:1px dashed var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;background:var(--surface-2);position:relative}
.plabel{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.pin2{display:flex;gap:12px;align-items:center}
.pin2 img{width:56px;height:56px;object-fit:contain;border-radius:8px;background:#fff}
.pmeta{font-size:11px;color:var(--muted)}
.sfoot{margin-top:24px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 14px}
.sfoot a{color:var(--muted)}
@media (max-width:820px){
  .top{flex-wrap:wrap;row-gap:4px}
  .nav{order:5;width:100%;flex:1 0 100%}
  .app.page .panel{padding-block:16px 32px}
}
.adph{aspect-ratio:16/7!important;font-size:13px}
@media (max-width:520px){.adgrid{grid-template-columns:1fr 1fr;gap:8px}.adb{padding:8px 10px}.adb b{font-size:13.5px}}
.obj.dot .glow{fill:#ffd23f;opacity:.35;stroke:none}
.obj.dot.st-broken .core{fill:#d0402c;stroke:#fff}
.obj.dot.st-broken .glow{fill:#d0402c;opacity:.25}
.stage.z-lo .obj.dot .glow{display:none}
.net{stroke-width:2.5px}
.obj.dot .core{stroke:#fff;stroke-width:1.2px}
.obj .pin-c{fill:#3d3a35}
.obj.dot.st-broken .core{fill:#d0402c!important;stroke:#fff;stroke-width:2px}
.obj.dot.st-planned .core{fill:#fff!important;stroke:#555;stroke-dasharray:2 1.5}
.odot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:0;border:1px solid rgb(0 0 0 / .15)}
.odot.big{width:14px;height:14px}
.olegend{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:8px;font-size:12px;color:var(--muted)}
.olegend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.olegend b{display:inline-block;width:14px;height:3px;margin-right:6px;vertical-align:3px}
/* issued address: house number on the map, full address in the card */
.plabels tspan.hs{fill:color-mix(in srgb,var(--accent) 75%,var(--m-plot-ink));font-weight:700}
.addr{font-weight:600;margin:2px 0 6px}

/* ---------- urgent alerts ---------- */
.alertbar{background:#fff3cd;border-bottom:1px solid #f0d77b;color:#4a3800}
.alertbar .al{display:flex;gap:10px;align-items:flex-start;padding:8px 16px;max-width:1400px}
.alertbar .al+.al{border-top:1px solid #f0d77b}
.al-i{flex:none;width:22px;height:22px;border-radius:50%;background:#e0a100;color:#fff;font-weight:800;display:grid;place-items:center;font-size:14px;margin-top:1px}
.al-t{flex:1;min-width:0;font-size:14px;line-height:1.35}.al-t span{opacity:.9}.al-u{display:block;font-size:12px;opacity:.7}
.al-x{flex:none;border:0;background:none;font-size:22px;line-height:1;color:inherit;opacity:.6;padding:0 4px;min-width:32px;min-height:32px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .alertbar{background:#3a2f0b;border-color:#5a4a14;color:#ffe8a3}}
/* ---------- calendar ---------- */
.cal{border:1px solid var(--line);border-radius:12px;padding:10px;margin:10px 0}
.cal-h{font-weight:700;text-transform:capitalize;margin-bottom:6px}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;font-size:13px}
.cal-g b{font-weight:500;color:var(--muted);font-size:11px;padding:2px 0}
.cal-g .cd{position:relative;padding:7px 0 9px;border-radius:8px}
.cal-g .cd.now{background:var(--accent-soft);font-weight:700}
.cal-g .cd.has{cursor:pointer;font-weight:600}
.cal-g .cd i{position:absolute;left:50%;bottom:3px;width:6px;height:6px;margin-left:-3px;border-radius:50%}
.evday{padding:8px 0}.evd{font-weight:700;text-transform:capitalize;margin-bottom:4px}
.ev{display:flex;gap:10px;align-items:flex-start;padding:6px 0}.evk{flex:none;width:10px;height:10px;border-radius:50%;margin-top:6px}
/* ---------- tables, dues, history ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0}
.tbl th{font-weight:600;color:var(--muted);font-size:12px;text-align:left;padding:4px 6px;border-bottom:1px solid var(--line)}
.tbl td{padding:6px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl .r{text-align:right;white-space:nowrap}
.okc{color:var(--ok);font-weight:600}.note.okn{border-color:var(--ok)}
.paidin{width:90px;text-align:right}
.tl{border-left:2px solid var(--line);margin:12px 0 12px 10px;padding-left:14px}
.tli{position:relative;display:flex;gap:10px;padding:6px 0}
.tlk{position:absolute;left:-27px;top:6px;width:24px;height:24px;border-radius:50%;background:var(--bg,#fff);border:1px solid var(--line);display:grid;place-items:center;font-size:12px}
.row.wrap{flex-wrap:wrap}
/* ---------- courier ---------- */
.courier .big{font-size:26px;font-weight:800;line-height:1.2;margin:4px 0}
.route{fill:none;stroke:#e5322d;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 12;opacity:.95}
.route-start{fill:#e5322d;stroke:#fff;stroke-width:3}
@media print{.top,.nav,.mapwrap,.alertbar,#bk,#hPrint{display:none!important}.app,.app.page{display:block}.panel{position:static;overflow:visible;max-height:none;width:auto}}
/* header: the logo never wraps, the menu scrolls sideways with a soft edge */
.brand{flex:none}.logo{white-space:nowrap}
.nav{mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:24px}
.cal-h,.evd{text-transform:none}.cal-h::first-letter,.evd::first-letter{text-transform:uppercase}
.tbl input.paidin{width:90px;min-width:0;padding:4px 6px}
.tbl{display:block;overflow-x:auto}
/* ---------- mobile & touch audit ---------- */
input[type=date],input[type=time],input[type=month],input[type=datetime-local],input[type=tel],input[type=email],input[type=url]{border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:7px 10px;width:100%;font:inherit;color:inherit;min-height:36px}
input[type=file]{font:inherit;font-size:13px;max-width:100%;color:var(--muted)}
input[type=file]::file-selector-button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 12px;margin-right:8px;font:inherit;font-weight:500;color:var(--ink);cursor:pointer}
@media (pointer:coarse){
  .linkbtn{min-height:36px;padding-block:8px}
  .back{min-height:40px;padding:8px 0;font-size:14px}
  label.check{min-height:40px;align-items:center}
  label.check input[type=checkbox],label.check input[type=radio]{width:20px;height:20px;flex:none}
  .chip.pchip,.pchip{min-height:34px;padding:6px 12px}
  .tbl .linkbtn{min-height:32px}
  .al-x{min-width:40px;min-height:40px}
}
@media (max-width:820px){
  .top{padding-block:6px;gap:8px}
  .nav button{padding:6px 10px;font-size:14px}
  .switch{font-size:0;gap:0}            /* the toggle alone; the label returns on wider screens */
  .switch input{width:40px;height:24px}.switch input::after{width:18px;height:18px}.switch input:checked::after{left:19px}
  .alertbar .al{padding:6px 12px;gap:8px}
  .al-t{font-size:13px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .al-t.open{display:block}
  .al-u{display:inline;margin-left:6px}
  .al-i{width:18px;height:18px;font-size:12px}
  .courier .big{font-size:22px}
}

/* ================= calendar: schedule board ================= */
.ctoday{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 12px}
.ctoday>div{background:var(--surface-2);border-radius:12px;padding:12px 14px;min-width:0}
.ctoday>div.has{background:var(--accent-soft)}
.ctoday span{display:block;font-size:12.5px;color:var(--muted)}
.ctoday b{display:block;margin-top:2px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.cweek{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-bottom:6px}
.cwd{border:0;background:none;border-radius:10px;padding:6px 0 8px;display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--ink);cursor:pointer;font:inherit}
.cwd span{font-size:11.5px;color:var(--muted)}
.cwd b{font-family:var(--f-display);font-weight:600;font-size:17px;line-height:1.2}
.cwd i{display:flex;gap:3px;height:6px}.cwd em{width:6px;height:6px;border-radius:50%}
.cwd.now{background:var(--ink);color:var(--surface)}.cwd.now span{color:inherit;opacity:.7}
.cwd.sel:not(.now){background:var(--surface-2)}
.cday-pop{background:var(--surface-2);border-radius:10px;padding:10px 12px;margin-bottom:10px;font-size:14px;display:grid;gap:4px}
.cchips{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.cchips button{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:6px 13px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.cchips button.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.cchips.small-chips{margin:0}.cchips.small-chips button{padding:4px 10px;font-size:12.5px}
.chd{font-family:var(--f-display);font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.croutine{border:1px dashed var(--line);border-radius:12px;padding:12px 14px;margin:6px 0 4px}
.crt{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:4px 0;font-size:14px}
.crt span:not(.ckd){color:var(--muted);font-size:13px}
.ckd{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none;margin-right:6px}
.crt .ckd{margin-right:0}
.csch{border-top:2px solid var(--ink);margin-top:14px}
.cmh{font-family:var(--f-display);font-size:13px;font-weight:600;color:var(--muted);padding:16px 0 4px}
.cmh::first-letter{text-transform:uppercase}
.crow{display:grid;grid-template-columns:58px 72px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line);scroll-margin-top:80px}
.crow.old{opacity:.6}
.cdt{display:flex;flex-direction:column;align-items:center;border-radius:10px;background:var(--surface-2);padding:6px 0}
.cdt.now{background:var(--ink);color:var(--surface)}
.cdt b{font-family:var(--f-display);font-size:19px;line-height:1.15}.cdt span{font-size:11.5px;opacity:.75}
.ctm{font-weight:600;padding-top:8px;font-variant-numeric:tabular-nums}.ctm.any{font-weight:400;font-size:13px;color:var(--muted)}
.ctt{padding-top:6px;min-width:0}.ctt b{font-weight:600}.ctt>div:not(.cact){font-size:13.5px;color:var(--muted);margin-top:1px}
.cact{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:6px}
.cgo{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:4px 12px;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.cgo.on{background:var(--ok);border-color:var(--ok);color:#fff}
.clink{border:0;background:none;padding:0;font:inherit;font-size:13px;color:var(--accent);cursor:pointer}
.ctag{--kc:#888;margin-top:8px;font-size:12px;font-weight:600;border-radius:6px;padding:3px 8px;white-space:nowrap;color:var(--kc);background:color-mix(in srgb,var(--kc) 13%,transparent)}
.cpast{margin-top:12px}.cpast summary{cursor:pointer;color:var(--muted);font-size:14px;padding:8px 0}
.csub{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:22px 0 4px;padding-top:16px;border-top:1px solid var(--line)}
.csub .small{flex:1;min-width:200px}
@media (max-width:600px){
  .crow{grid-template-columns:52px minmax(0,1fr);gap:4px 12px}
  .crow .ctm{grid-column:2;grid-row:1;padding-top:4px;font-size:13px}
  .crow .ctt{grid-column:2;grid-row:2;padding-top:0}
  .crow .ctag{grid-column:2;grid-row:3;justify-self:start;margin-top:4px}
  .crow .cdt{grid-row:1/4}
  .ctoday{grid-template-columns:1fr}
}

/* ================= dues: summary first ================= */
.dsum{border-radius:12px;padding:12px 16px;margin:16px 0 4px;font-size:15px}
.dsum.is-debt{background:var(--accent-soft)}.dsum.is-clear{background:color-mix(in srgb,var(--ok) 12%,var(--surface))}
.dsum b{font-family:var(--f-display);color:var(--accent)}
.dstate{border-radius:16px;padding:18px 20px;margin:14px 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 18px;align-items:start}
.dstate.is-debt{background:var(--accent-soft)}
.dstate.is-clear{background:color-mix(in srgb,var(--ok) 12%,var(--surface))}
.dstate.is-none{background:var(--surface-2)}
.dk{font-size:13.5px;color:var(--muted)}
.dv{font-family:var(--f-display);font-size:30px;font-weight:700;line-height:1.15;margin:2px 0 4px;letter-spacing:-.01em}
.dstate.is-debt .dv{color:var(--accent)}.dstate.is-clear .dv{color:var(--ok)}.dstate.is-none .dv{font-size:22px;color:var(--muted)}
.dwhy{font-size:14px}
.dyears{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.dy{border:0;background:var(--surface);border-radius:7px;padding:4px 9px;font:inherit;font-size:13px;cursor:pointer;font-variant-numeric:tabular-nums}
.dy.ok{color:var(--ok)}.dy.no{color:var(--accent);font-weight:600}.dy.part{color:#9c6b00;font-weight:600}
.dbtns{display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:140px}
.dbtns .linkbtn{align-self:center}
.btn.p{background:var(--accent);border-color:var(--accent);color:#fff}
.dwhere{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:18px 0}
.dw2{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:8px;font-size:14px;color:var(--muted)}.dw2 b{color:var(--ink)}
.dwr{display:grid;grid-template-columns:minmax(0,1.2fr) 1fr auto;gap:10px;align-items:center;font-size:13.5px;padding:3px 0}
.dwr span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dwr i{height:8px;border-radius:4px;background:color-mix(in srgb,var(--accent) 55%,var(--surface))}
.dadm{border-top:1px solid var(--line);margin-top:24px;padding-top:18px}
.dring-wrap{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:center;margin-top:10px}
.dring{--p:0;width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--ok) calc(var(--p)*1%),var(--line) 0);display:grid;place-items:center}
.dring>div{width:114px;height:114px;border-radius:50%;background:var(--surface);display:grid;place-items:center;text-align:center;align-content:center}
.dring b{font-family:var(--f-display);font-size:26px;line-height:1}.dring span{font-size:12px;color:var(--muted);margin-top:4px}
.dnums b{font-family:var(--f-display);font-size:20px}.dnums>div:first-child span{color:var(--muted);margin-left:6px}
.dleg{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin:8px 0 12px}
.dleg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.dleg i.ok{background:var(--ok)}.dleg i.part{background:var(--warn)}.dleg i.no{background:var(--line)}
.dbtns2{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ddl{display:grid;gap:2px}
.ddr{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:baseline;border:0;background:none;text-align:left;font:inherit;color:var(--ink);padding:8px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.ddr b{font-family:var(--f-display);font-weight:600}
.ddr span{color:var(--muted);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ddr em{font-style:normal;font-weight:600;color:var(--accent)}
@media (hover:hover){.ddr:hover{background:var(--surface-2)}}
.dcheck{margin-top:22px;border-top:1px solid var(--line);padding-top:10px}
.dcheck summary{cursor:pointer;color:var(--muted);font-size:14px;padding:6px 0}
@media (max-width:600px){
  .dstate{grid-template-columns:1fr;padding:16px}
  .dbtns{flex-direction:row;flex-wrap:wrap;min-width:0}
  .dbtns .btn{flex:1 1 auto}
  .dv{font-size:26px}
  .dring-wrap{grid-template-columns:1fr;justify-items:center;text-align:center}
  .dleg,.dbtns2{justify-content:center}
}
.tnum{font-variant-numeric:tabular-nums}
@media (max-width:600px){.cchips:not(.small-chips){flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}.cchips::-webkit-scrollbar{display:none}.cchips button{flex:none}}


/* ================= season photo heroes ================= */
.ph-hero{position:relative;overflow:hidden;padding:0;min-height:220px;justify-content:flex-end;background:color-mix(in srgb,var(--m-forest) 55%,var(--surface))}
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgb(10 20 14 / 0) 20%,rgb(10 20 14 / .62) 100%)}
.ph-hero .hero-in{position:relative;padding:22px 22px 20px;display:flex;flex-direction:column;gap:8px;max-width:600px}
.ph-hero .hero-t,.ph-hero .hero-s{color:#fff;text-shadow:0 1px 10px rgb(0 0 0 / .35)}
.ph-hero .hero-s{font-size:15px;opacity:.95}
.ph-credit{position:absolute;right:10px;top:8px;font-size:11px;color:#fff;opacity:.8;text-decoration:none;background:rgb(0 0 0 / .28);padding:2px 7px;border-radius:10px}
.app.page .ph-hero{min-height:280px;margin-bottom:10px}
@media (max-width:820px){.ph-hero{min-height:200px}.app.page .ph-hero{min-height:220px}}
.phset{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.phset figure{margin:0;display:flex;flex-direction:column;gap:6px}
.phset img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:var(--surface-2)}
.phset figcaption{font-size:13px;display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}
@media (max-width:600px){.phset{grid-template-columns:1fr 1fr}}
@media (pointer:coarse){.clink{min-height:34px;padding:6px 0}}

/* ---------- walking distance, legend, watercolour ---------- */
.walk-r{fill:none;stroke:#2f80ed;stroke-width:3;stroke-dasharray:14 10;vector-effect:non-scaling-stroke;opacity:.8}
.walk-r.near{fill:color-mix(in srgb,#2f80ed 6%,transparent);stroke-dasharray:none}
.walk-t{font-family:var(--f-ui);font-size:30px;font-weight:700;fill:#1d5fa8;text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:6px}
.walk-n{font-family:var(--f-ui);font-size:26px;font-weight:600;fill:#1b2220;text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:6px}
.mlegend{border-top:1px solid var(--line);padding-top:6px}.mlegend summary{cursor:pointer;font-size:13px;padding:4px 0}
.olegend em{display:inline-block;width:16px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.lg-plot{background:var(--m-plot);border:1px solid #fff}.lg-road{background:var(--m-road)}.lg-forest{background:var(--m-forest)}.lg-field{background:var(--m-field)}
.lg-water{background:var(--m-water);height:4px!important;vertical-align:2px!important}.lg-rail{background:repeating-linear-gradient(90deg,var(--m-rail) 0 3px,transparent 3px 6px);height:4px!important;vertical-align:2px!important}.lg-hw{background:var(--m-hw);height:6px!important;vertical-align:1px!important}
/* watercolour: soft, uneven edges on the surroundings and a paper tint */
.stage.paint #gBase{filter:url(#wcolor)}
.stage.paint #gPlots{filter:url(#wsoft)}
.stage.paint #ov{background:#f7f3e8}
/* ---------- where we are, passport, photo chronicle, street profile ---------- */
.where{width:100%;height:auto;display:block;margin:6px 0}
.wh-bg{fill:color-mix(in srgb,var(--m-ground) 70%,var(--surface))}
.wh-river{fill:none;stroke:var(--m-water);stroke-width:4;stroke-linecap:round;opacity:.7}
.wh-line{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 5}.wh-arrow{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 5;marker-end:none}
.wh-town{fill:var(--surface);stroke:var(--ink);stroke-width:2}.wh-me{fill:var(--accent)}.wh-me-h{fill:color-mix(in srgb,var(--accent) 22%,transparent)}
.wh-t{font:600 15px var(--f-ui);fill:var(--ink)}.wh-d{font:400 13px var(--f-ui);fill:var(--muted)}
.wh-mt{font:700 15px var(--f-display);fill:var(--accent)}.wh-far{font:600 13px var(--f-ui);fill:var(--muted);text-anchor:end}.wh-note{font:11px var(--f-ui);fill:var(--muted)}
.pass{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin:8px 0}
.pass div{background:var(--surface-2);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column}
.pass b{font-family:var(--f-display);font-size:20px;line-height:1.2}.pass span{font-size:12.5px;color:var(--muted)}
.phup{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 14px}.phup input[type=text]{flex:1;min-width:180px}.phup select{width:auto}
.phgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.phgrid figure{margin:0;display:flex;flex-direction:column;gap:6px}
.phgrid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--surface-2);display:block}
.phgrid figcaption{display:flex;flex-direction:column;gap:2px;font-size:14px}
.profile{width:100%;height:auto;display:block;margin:4px 0 8px}
.pr-ground{stroke:var(--m-terr);stroke-width:2}.pr-road{fill:#8f9399}.pr-shoulder{fill:var(--m-road);stroke:var(--m-road-edge)}.pr-ditch{fill:color-mix(in srgb,var(--m-water) 30%,transparent);stroke:var(--m-water-ink);stroke-width:1.5}
.pr-t{font:15px var(--f-ui);fill:var(--muted);text-anchor:middle}.pr-m{font:600 16px var(--f-ui);fill:var(--ink);text-anchor:middle}
.pr-dim{stroke:var(--muted);stroke-width:1;fill:none}.pr-tot{font:600 15px var(--f-ui);fill:var(--muted);text-anchor:middle;paint-order:stroke;stroke:var(--surface);stroke-width:5px}
/* ---------- audit round 4: pay page, dues waiting, compact alerts ---------- */
.dy.wait{color:var(--warn,#9c6b00);font-style:italic}
.rtab td.cpyc{width:40px;text-align:right;padding-left:4px}.rtab .cpy{border:1px solid var(--line);background:var(--surface);color:var(--accent);border-radius:8px;width:36px;height:36px;font-size:17px;cursor:pointer}.rtab .cpy.done{color:var(--ok);border-color:var(--ok)}
.al-u{display:inline;font-size:12px;opacity:.75;font-weight:600;white-space:nowrap}
.al-more{flex:none;white-space:nowrap}
.btn.p{color:var(--accent-ink)}
@media (max-width:820px){
  .alertbar .al{align-items:center}
  .alertbar .al-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
  .alertbar .al-t.open{white-space:normal}
  .prow{width:100%}.prow .btn{flex:1;min-height:44px}
}
/* ---------- phone tab bar ---------- */
.tabbar{display:none}
@media (max-width:820px){
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface,#fff);border-top:1px solid var(--line);padding:2px 4px calc(2px + env(safe-area-inset-bottom))}
  .tabbar button{flex:1;min-height:52px;border:0;background:none;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:500;border-radius:10px}
  .tabbar button.on{color:var(--accent)}
  .tabsheet{position:fixed;right:8px;bottom:calc(62px + env(safe-area-inset-bottom));z-index:41;background:var(--surface,#fff);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:6px;display:flex;flex-direction:column;min-width:200px}
  .tabsheet button{border:0;background:none;text-align:left;padding:12px 14px;min-height:44px;font-size:15px;border-radius:8px;color:var(--ink)}
  .tabsheet button.on{color:var(--accent);background:var(--accent-soft)}
  header.top .nav{display:none}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  .app .body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
}
@media print{.tabbar,.tabsheet{display:none!important}}
.dsum.is-wait,.dstate.is-wait{background:color-mix(in srgb,#e0a100 14%,var(--surface))}
.dstate.is-wait .dv{color:#9c6b00;font-size:26px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dstate.is-wait .dv{color:#f0c35a}}
:root[data-theme="dark"] .dstate.is-wait .dv{color:#f0c35a}
.rtab td{vertical-align:middle}
@media (max-width:820px){.toast{bottom:calc(70px + env(safe-area-inset-bottom,0px));z-index:45;max-width:calc(100vw - 32px)}}