/* BerryThemeContrast (6 Nov 2026): the map's see-through panels follow the look. --glass/--glass2: the panels' colour (r,g,b for rgba());
   --hair: hairlines over them; --ctrl-icon: MapLibre's dark zoom icons, inverted only on a dark surface. Dark keeps the exact old values. */
:root{--glass:11,11,11;--glass2:20,20,20;--hair:255,255,255;--ctrl-icon:invert(1) brightness(1.15)}
html[data-theme="light"]{--glass:255,255,255;--glass2:255,255,255;--hair:22,22,22;--ctrl-icon:none}
html[data-theme="warm"]{--glass:252,248,241;--glass2:252,248,241;--hair:42,36,28;--ctrl-icon:none}
html[data-contrast="high"]{--glass:0,0,0;--glass2:7,7,7;--hair:255,255,255;--ctrl-icon:invert(1) brightness(1.15)}
/* Berry property map: Berry's dark and gold. Uses the site's own tokens (style.css). Panels sit inside .mapapp so the sidebar and header stay. */
.map-page main{padding:0}
.mapapp{position:relative;height:calc(100vh - 76px);height:calc(100dvh - 76px);min-height:540px;background:var(--bg2);overflow:hidden;color:var(--ink);font:400 .9rem/1.45 var(--sans)}
.mapapp.embed{height:100vh;height:100dvh;min-height:320px}
.mapapp #map{position:absolute;inset:0}
.mapapp .maplibregl-ctrl-attrib{font-size:.7rem;background:rgba(var(--glass),.8);color:var(--muted)}
.mapapp .maplibregl-ctrl-attrib a{color:var(--gold-hi)}
.mapfail,.mapoffline{position:absolute;z-index:5;top:64px;left:50%;transform:translateX(-50%);margin:0;padding:var(--s2) var(--s3);background:var(--surface);border:1px solid var(--gold);border-radius:var(--r-sm)}
.mapbar{position:absolute;z-index:3;top:10px;right:56px;font-size:.8rem;color:var(--ink);background:rgba(var(--glass),.82);border:1px solid var(--line);border-radius:999px;padding:3px 12px}
/* price plates: dark plate, light ink; the border carries the price band */
.pinlbl,.clusterpin{font:700 .8rem/1.15 var(--sans);white-space:nowrap;cursor:pointer;border-radius:8px;box-shadow:0 3px 12px rgba(0,0,0,.55)}
.pinlbl{background:var(--surface);color:var(--ink);padding:5px 9px;border:2px solid var(--gold-hi)}
.pinlbl.approx{border-style:dashed;font-style:italic} /* BerryListingCompleteness: near a neighbour or in the middle of town, not the home's own spot */
.clusterpin{display:flex;align-items:baseline;gap:6px;background:var(--gold);color:var(--on-gold);padding:5px 11px;border:2px solid var(--gold-hi)}
.clusterpin b{font-size:.95rem}.clusterpin span{font-weight:600}
.pinlbl:hover,.clusterpin:hover{filter:brightness(1.08)}
.pinlbl:focus-visible,.clusterpin:focus-visible{outline:3px solid #fff;outline-offset:3px}
.addrpin{width:16px;height:16px;border-radius:50%;background:var(--gold-hi);border:3px solid #fff;font-size:0;box-shadow:0 2px 8px rgba(0,0,0,.6)}
#searchbox{position:absolute;z-index:6;top:10px;left:50%;transform:translateX(-50%);width:min(360px,calc(100% - 140px))}
#search{width:100%;min-height:44px;padding:8px 14px;border-radius:var(--r-sm);border:1px solid var(--line-ui);background:var(--surface);color:var(--ink);font:inherit;box-shadow:0 4px 16px rgba(0,0,0,.5)}
#searchresults{margin-top:4px;background:var(--surface);border:1px solid var(--line-ui);border-radius:var(--r-sm);overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.6)}
#searchresults ul{list-style:none;margin:0;padding:0}
#searchresults button{display:block;width:100%;text-align:left;min-height:44px;padding:8px 12px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:inherit;cursor:pointer}
#searchresults button:hover{background:var(--surface2)}#searchresults span{display:block;color:var(--muted);font-size:.78rem}
#searchresults .none{margin:0;padding:10px 12px;color:var(--muted)}
/* bottom control panel */
#ctlmore{display:none}@media (max-width:700px){#ctlmore{display:inline-block}}
#controls{position:absolute;z-index:4;left:50%;bottom:12px;transform:translateX(-50%);width:max-content;max-width:min(1100px,calc(100% - 20px));max-height:52%;overflow-y:auto;background:rgba(var(--glass2),.96);border:1px solid var(--line-ui);border-radius:var(--r);padding:9px 12px;box-shadow:0 8px 28px rgba(0,0,0,.6)}
#controls button{min-height:40px;padding:5px 12px;background:var(--surface2);color:var(--ink);border:1px solid var(--line-ui);border-radius:var(--r-sm);font:600 .82rem var(--sans);cursor:pointer}
#controls button:hover{border-color:var(--gold)}
#controls button[aria-pressed="true"],#stylesw button[aria-checked="true"]{background:var(--gold);color:var(--on-gold);border-color:var(--gold-hi)}
#controls :focus-visible,.proppanel :focus-visible,#listpanel :focus-visible,#cmppanel :focus-visible,#searchbox :focus-visible{outline:3px solid var(--gold-hi);outline-offset:2px}
.cprimary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
#stylesw{display:inline-flex;gap:0;border-radius:var(--r-sm);overflow:hidden}
#stylesw button{border-radius:0;margin-left:-1px}
/* BerryBuyerFixes (8 Nov 2026): the Map / List switch, one pill of two halves; the side shown is gold (aria-pressed), the other plain.
   (Was #btnlist always gold, so "Listings" looked pressed whether the list was open or not.) */
.viewsw{display:inline-flex;border-radius:var(--r-sm);overflow:hidden;border:2px solid var(--gold)}
#controls .viewsw button{border:0;border-radius:0;min-width:64px;min-height:44px;font-weight:700}
#controls .viewsw button[aria-pressed="true"]{background:var(--gold);color:var(--on-gold)}
#controls .viewsw button[aria-pressed="false"]{background:var(--surface);color:var(--ink)}
.lpcount{color:var(--muted);font-weight:600;font-size:.9rem}
.lp-filters{margin:0 0 8px;border:1px solid var(--line);border-radius:var(--r-sm)}
.lp-filters>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;padding:0 12px;font-weight:700}
.lp-filters[open]{padding:0 8px 8px}.lp-filters[open]>summary{padding:0 4px}
.cl{color:var(--muted);font-size:.8rem}
.cgroups{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.cgrp{border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(var(--glass),.7)}
.cgrp>summary{list-style:none;cursor:pointer;padding:7px 12px;min-height:40px;font-weight:700;display:flex;align-items:center;gap:6px;white-space:nowrap}
.cgrp>summary::-webkit-details-marker{display:none}.cgrp>summary::before{content:"▸";color:var(--gold);transition:transform .12s}.cgrp[open]>summary::before{transform:rotate(90deg)}
.gon{font-size:.7rem;font-weight:800;color:var(--on-gold);background:var(--gold);border-radius:9px;padding:1px 7px}.gon:empty{display:none}
.gbody{display:flex;gap:6px;flex-wrap:wrap;padding:2px 9px 9px;align-items:center;max-width:340px}
.gnote{flex:1 1 100%;margin:2px 0 0;font-size:.75rem;color:var(--muted)}
#sunctl{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.8rem}#sunctl input{width:90px}
.chint{margin:8px 0 0;text-align:center;color:var(--muted);font-size:.8rem}.chint b{color:var(--ink)}
.leg{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:6px 0 0;justify-content:center;color:var(--muted);font-size:.75rem}
.lg{width:12px;height:12px;border-radius:3px;display:inline-block;margin:0 6px 0 2px;border:1px solid var(--line-ui)}.lg.g{background:#f2f2f2}.lg.t{background:#8fb0f5}.lg.y{background:#e4c57c}.lg.r{background:#ff8f8f}.lg.n{background:#a0a0a0}
.touch-only{display:none}@media (pointer:coarse){.mouse-only{display:none}.touch-only{display:inline}}
.whobox{margin:0 0 8px;border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 10px}.whobox legend{font-weight:700;padding:0 6px}
.whobox #who{display:flex;flex-wrap:wrap;gap:4px 14px}.whobox label{display:inline-flex;align-items:center;gap:5px;min-height:34px}.soonbox{display:flex;gap:6px;margin-top:4px;min-height:34px;align-items:center}
#controls .fold,.proppanel .fold{margin-top:8px;border:1px solid var(--line);border-radius:var(--r-sm)}
.fold>summary{cursor:pointer;padding:8px 12px;font-weight:700;min-height:40px}.foldbody{padding:0 12px 10px}.fine{font-size:.75rem;color:var(--muted)}
/* panels */
.proppanel,#parcelpanel,#listpanel,#cmppanel{position:absolute;z-index:7;background:var(--surface);border:1px solid var(--line-ui);border-radius:var(--r);box-shadow:0 14px 44px rgba(0,0,0,.7);overflow:auto}
.proppanel{top:64px;right:10px;width:360px;max-width:calc(100% - 20px);max-height:calc(100% - 76px)}
.proppanel .ph{display:block}.proppanel img{display:block;width:100%;height:170px;object-fit:cover;border-radius:var(--r) var(--r) 0 0;background:var(--bg)}
.proppanel .body{padding:12px 16px 16px}.proppanel h2{font-size:1.15rem;margin:0}.proppanel h4{margin:10px 0 4px;font:700 .85rem var(--sans);color:var(--gold-hi)}
.proppanel .sub{margin:0;color:var(--muted)}.proppanel .row{margin:6px 0;color:var(--ink)}.proppanel .price{font-weight:700;color:var(--gold-hi);margin:6px 0}
.proppanel .x,.pcx{position:absolute;top:8px;right:10px;width:36px;height:36px;border-radius:50%;background:rgba(var(--glass),.85);color:var(--ink);border:1px solid var(--line-ui);font-size:1.1rem;cursor:pointer;z-index:2}
.infobox{background:var(--surface2);border:1px solid var(--line-ui);border-radius:var(--r-sm);padding:8px 12px;margin:10px 0}.infobox.warn{border-color:var(--gold)}
.infobox .lab{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-hi);font-weight:700}.infobox .v{font-weight:700}.infobox .hint{font-size:.78rem;color:var(--muted)}
.linkbtn{background:none;border:0;padding:4px 0;color:var(--gold-hi);text-decoration:underline;font:inherit;cursor:pointer;min-height:36px;text-align:left}
.mbtn{display:block;width:100%;min-height:44px;text-align:center;padding:10px;margin-top:8px;border-radius:var(--r-sm);font:700 .9rem var(--sans);cursor:pointer;background:var(--surface2);color:var(--ink);border:1px solid var(--line-ui);text-decoration:none}
.mbtn.gold{background:var(--gold);color:var(--on-gold);border-color:var(--gold-hi)}
.nearlist{list-style:none;margin:0;padding:0}.nearlist button{display:flex;justify-content:space-between;gap:10px;width:100%;min-height:44px;text-align:left;padding:6px 4px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:inherit;cursor:pointer}
.nearlist .sub{display:block;font-size:.74rem;color:var(--muted)}.nearlist .dist{flex:0 0 auto;text-align:right;font-size:.76rem;color:var(--gold-hi)}
#parcelpanel{left:10px;top:64px;width:300px;max-width:calc(100% - 20px);padding:14px 16px}.pchd{font-size:1rem;margin:0 0 8px}
.pcrow{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--line)}.pcrow span{color:var(--muted)}.pcrow b{text-align:right}
#listpanel{left:10px;top:64px;width:340px;max-width:calc(100% - 20px);max-height:calc(100% - 270px);padding:14px 14px 10px}.lphd{font-size:1rem;margin:0 0 8px;color:var(--gold-hi)}
#fpresets{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{min-height:36px;padding:4px 10px;border:1px solid var(--line-ui);border-radius:20px;background:var(--bg);color:var(--ink);font:inherit;font-size:.78rem;cursor:pointer}.chip:hover{border-color:var(--gold)}
.frow{display:flex;flex-wrap:wrap;gap:6px 10px;margin-bottom:10px;font-size:.8rem}.frow input[type=number]{width:84px}.frow input,.frow select{min-height:36px;padding:4px 6px;border-radius:6px;border:1px solid var(--line-ui);background:var(--bg);color:var(--ink);font:inherit}
.lrow{display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--line)}.lrow:hover{background:var(--surface2)}
.lrow button{background:none;border:0;font:inherit;color:var(--ink);cursor:pointer;min-height:44px;padding:4px 6px}.lfav.on{color:#ff9ad5}.lcmp.on{color:#a9c0f5;font-weight:700}
.lopen{flex:1;min-width:0;display:flex;align-items:center;gap:8px;text-align:left}.lmain{flex:1;min-width:0;display:block}.laddr{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lsub{display:block;font-size:.74rem;color:var(--muted)}.lprice{flex:0 0 auto;font-size:.76rem;color:var(--gold-hi);font-weight:700;max-width:92px;text-align:right}.lnone{padding:14px;text-align:center;color:var(--muted)}
#cmppanel{left:50%;top:80px;transform:translateX(-50%);width:520px;max-width:calc(100% - 20px);padding:16px 18px}.cmphd{font-size:1rem;margin:0 0 10px;color:var(--gold-hi)}
.cmpgrid{display:grid;grid-template-columns:90px 1fr 1fr;gap:4px 12px;font-size:.85rem}.cmpgrid .h{color:var(--gold-hi);font-weight:700}.cmpgrid .lbl{color:var(--muted)}.cmpgrid>div{padding:3px 0;border-bottom:1px solid var(--line)}
.maplibregl-popup-content{background:var(--surface);color:var(--ink);border:1px solid var(--gold);font:600 .85rem var(--sans)}.maplibregl-popup-tip{border-top-color:var(--gold)!important}
.maplibregl-ctrl-group{background:var(--surface)}
/* Will 4 Nov 11:19: the zoom/compass/tilt icons were black on black. MapLibre's icons are dark SVGs, so invert them on our dark surface. */
.maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:var(--ctrl-icon)} /* BerryThemeContrast: only on a dark surface (style.css --ctrl-icon) */
.maplibregl-ctrl-group button+button{border-top-color:rgba(var(--hair),.18)}
.maplibregl-ctrl-group button:hover{background:rgba(var(--hair),.08)}
.nearlist .dirs{display:block;font-size:.8rem;padding:0 12px 8px}.nearlist .dirs a{color:var(--gold-hi)}
@media (min-width:1101px){#controls{max-width:min(1240px,calc(100% - 24px))}.cgroups{flex-wrap:nowrap;align-items:flex-start}.cgrp{flex:1 1 0}.gbody{max-width:none}}
@media (max-width:700px){
  .mapapp{height:calc(100dvh - 64px)}
  #controls{left:6px;right:6px;bottom:calc(var(--bar-h,68px) + 6px + env(safe-area-inset-bottom));transform:none;width:auto;max-width:none;max-height:46%} /* BerryReWalkRemaining B19: above the site's bottom bar, not under it */
  .mapapp.embed #controls{bottom:6px}
  .chint,.leg{display:none}.cgrp{flex:1 1 auto}.gbody{max-width:none}
  /* BerryReWalkRemaining B19: the map first. The style switch and Listings stay; the rest opens with More options. */
  #controls:not(.opts) .cgroups,#controls:not(.opts) #ffit,#controls:not(.opts) #frandom,#controls:not(.opts) #bdraw,#controls:not(.opts) #fcount{display:none}
  #searchbox{left:6px;right:60px;transform:none;width:auto}.mapbar{display:none}
  .proppanel{left:6px;right:6px;top:60px;width:auto;max-height:calc(100% - 70px)}.proppanel img{height:130px}
  #listpanel,#parcelpanel{left:6px;right:6px;width:auto;top:60px;max-height:calc(100% - 200px)}
  /* BerryBuyerFixes: the list on a phone reaches down to the controls, so several homes are in view at once */
  .mapapp.listview #listpanel{max-height:none;bottom:calc(var(--bar-h,68px) + 120px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.cgrp>summary::before{transition:none}}
/* a listing's small map on its own page: one button, the map loads when asked */
.mini-map{margin:var(--s4) 0}.mini-map iframe{display:block;width:100%;height:420px;border:1px solid var(--line-ui);border-radius:var(--r)}
/* data and licences: a small pill under the header, open on request */
.mapinfo{position:absolute;z-index:3;top:62px;left:10px;max-width:min(420px,calc(100% - 20px))}
.mapinfo>summary{list-style:none;cursor:pointer;display:inline-block;min-height:36px;padding:6px 14px;background:rgba(var(--glass2),.94);border:1px solid var(--line-ui);border-radius:999px;font-size:.8rem;font-weight:600}
.mapinfo>summary::-webkit-details-marker{display:none}
.mapinfo[open]{z-index:9;max-height:calc(100% - 80px);overflow:auto;background:var(--surface);border:1px solid var(--line-ui);border-radius:var(--r)}
.mapinfo[open]>summary{border:0;background:none}.mapinfo .foldbody{padding:0 14px 12px}.mapinfo ul{padding-left:0;list-style:none}.mapinfo li{margin:0 0 8px;font-size:.78rem}
.proppanel,#parcelpanel,#listpanel{top:108px}
.proppanel{top:64px}
@media (max-width:700px){.mapinfo{top:58px}.proppanel{top:58px}#listpanel,#parcelpanel{top:100px}}
/* BerryLayoutScan (5 Nov 2026): on a phone the "tiles did not load" notice sat on the "Data and licences" button (both at the top); it goes under it */
@media (max-width:700px){.mapfail,.mapoffline{top:104px;width:max-content;max-width:calc(100% - 20px)}}
/* embedded in a listing or place guide: only the style switch and the search stay; everything else is on the full map */
.mapapp.embed .cgroups,.mapapp.embed .chint,.mapapp.embed .leg,.mapapp.embed .cprimary>:not(#stylesw){display:none}
.mapapp.embed #controls{max-width:calc(100% - 20px)}
.nearlist button{align-items:flex-start}.nearlist .nm{flex:1 1 auto;min-width:0}.nearlist .dist{flex:0 0 138px}
.mapapp[data-mode="agent"] .chint{display:none}
.whobox{padding:4px 10px}.whobox legend{font-size:.85rem}
/* BerryMapsQuiet (6 Nov 2026): the 3D map tour (public/map/tour.js). While it plays the map's own controls step aside; "Explore on my own" brings them back. */
.mapapp.touring #controls,.mapapp.touring #searchbox,.mapapp.touring .mapbar,.mapapp.touring #panel{display:none}
.tour{position:absolute;z-index:7;left:50%;bottom:12px;transform:translateX(-50%);width:min(640px,calc(100% - 20px));background:rgba(var(--glass2),.96);border:1px solid var(--line-ui);border-radius:var(--r);box-shadow:0 8px 28px rgba(0,0,0,.45);overflow:hidden}
.tour-bar{height:6px;background:rgba(var(--hair),.14)}.tour-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .4s}
.tour-txt{padding:10px 14px 4px}.tour-h{margin:0;font:600 1.05rem/1.3 var(--serif);color:var(--ink)}.tour-c{margin:4px 0 0;color:var(--ink)}.tour-n{margin:4px 0 0;font-size:.78rem;color:var(--muted)}
.tour-btns{display:flex;flex-wrap:wrap;gap:8px;padding:8px 14px 12px}
.tour-btns button{min-height:44px;min-width:44px;padding:6px 14px;background:var(--surface2);color:var(--ink);border:1px solid var(--line-ui);border-radius:var(--r-sm);font:600 .85rem var(--sans);cursor:pointer}
.tour-btns button[data-t=free]{margin-left:auto;background:var(--gold);color:var(--on-gold);border-color:var(--gold-hi)}
.tour-btns button:disabled{opacity:.5;cursor:default}.tour-btns :focus-visible{outline:3px solid var(--gold-hi);outline-offset:2px}
.tour-home,.tour-place{width:18px;height:18px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.6)}.tour-home{background:var(--gold-hi)}.tour-place{background:#2f7dd1}
@media (max-width:480px){.tour-btns button{flex:1 1 40%}.tour-btns button[data-t=free]{margin-left:0}}