/* Plot maps (/maps and /maps/<slug>). Loaded only on map pages, after leaflet.css; tokens come from site.css. */
:root{ --m-avail:#7DB532; --m-res:#E9A940; --m-sold:#8A938C; --m-info:#3B82C4; --m-shadow:0 10px 30px rgba(8,12,9,.22) }

.mapsec{padding:0}
section.mapsec + section > .wrap{border-top:0}
.mapx{position:relative;background:var(--sunk);border-block:1px solid var(--line)}
.mcanvas{height:min(78vh,760px);min-height:420px;background:var(--sunk);z-index:0}
@media (max-width:639px){ .mcanvas{height:70vh;min-height:380px} }
.leaflet-container{background:var(--sunk);font:inherit;font-size:.9rem}

/* toolbar */
.mbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px max(16px,env(safe-area-inset-left,0px));background:var(--surface);border-bottom:1px solid var(--line);font-size:.88rem}
.mseg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--bg)}
.mseg button{border:0;background:transparent;color:var(--muted);font:600 .84rem var(--f-body);padding:8px 13px;cursor:pointer;min-height:36px}
.mseg button + button{border-inline-start:1px solid var(--line)}
.mseg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.mop{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
.mop input{width:110px;accent-color:var(--accent)}
.mavail{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-weight:600;min-height:36px}
.mavail input{width:18px;height:18px;accent-color:var(--accent)}
.mfind{flex:1 1 180px;max-width:300px}
.mfind input{width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font:inherit;min-height:36px}
.mfull{margin-inline-start:auto;display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);cursor:pointer}
.mfull svg{width:18px;height:18px}
@media (max-width:639px){ .mop{display:none} .mfind{order:5;flex-basis:100%;max-width:none} }

/* full screen (the API, or the iPhone fallback) */
.mapx:fullscreen{display:flex;flex-direction:column;border:0}
.mapx:fullscreen .mcanvas{flex:1;height:auto}
.mapx.is-full{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;border:0;padding-top:env(safe-area-inset-top,0px)}
.mapx.is-full .mcanvas{flex:1;height:auto;min-height:0}
html.map-full{overflow:hidden}

/* legend and notes under the map */
.mfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-block:14px 0}
.mlegend{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;margin:0;padding:0;font-size:.86rem}
.mlegend li{display:inline-flex;align-items:center;gap:7px}
.mdot{width:12px;height:12px;border-radius:3px;display:inline-block}
.mdot-available{background:var(--m-avail)} .mdot-reserved{background:var(--m-res)} .mdot-sold{background:var(--m-sold)} .mdot-info{background:var(--m-info)}
.mfoot .fine{max-width:70ch}

/* status chips */
.mchip{display:inline-block;padding:3px 9px;border-radius:999px;font:700 .72rem/1.3 var(--f-body);letter-spacing:.02em;white-space:nowrap}
.mchip-available{background:color-mix(in oklab,var(--m-avail) 22%,transparent);color:#3F6512}
.mchip-reserved{background:color-mix(in oklab,var(--m-res) 26%,transparent);color:#8A5A07}
.mchip-sold{background:color-mix(in oklab,var(--m-sold) 26%,transparent);color:#4A524C}
.mchip-info{background:color-mix(in oklab,var(--m-info) 20%,transparent);color:#1F5592}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .mchip-available{color:#B5E07A} :root:not([data-theme="light"]) .mchip-reserved{color:#F3C77A} :root:not([data-theme="light"]) .mchip-sold{color:#C4CBC5} :root:not([data-theme="light"]) .mchip-info{color:#9CC3F0} }
:root[data-theme="dark"] .mchip-available{color:#B5E07A} :root[data-theme="dark"] .mchip-reserved{color:#F3C77A} :root[data-theme="dark"] .mchip-sold{color:#C4CBC5} :root[data-theme="dark"] .mchip-info{color:#9CC3F0}

/* hover bubble */
.leaflet-tooltip.mtip{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:var(--m-shadow);padding:10px 12px;white-space:normal;width:max-content;max-width:min(280px,70vw);font-size:.86rem;line-height:1.4}
.leaflet-tooltip.mtip::before{display:none}
.mtip-in{display:grid;gap:4px}
.mtip-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mtip-in strong{font:700 1rem/1.25 var(--f-display)}
.mtip-in p{color:var(--muted)}
.mtip-in .mtip-top b{color:var(--ink)}
.mtip-cta{font-size:.78rem;color:var(--accent)!important;font-weight:600}

/* contact card: popup (desktop) */
.mpop .leaflet-popup-content-wrapper{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:var(--m-shadow)}
.mpop .leaflet-popup-tip{background:var(--surface);border:1px solid var(--line)}
.mpop .leaflet-popup-content{margin:14px 16px;max-width:min(280px,70vw);font-size:.9rem;line-height:1.45}
.mpop a.leaflet-popup-close-button{color:var(--muted);width:30px;height:30px;font:22px/30px var(--f-body)}
.mplot{display:grid;gap:8px}
.mpop .mplot p{margin:0}
.mplot-top{display:flex;align-items:center;gap:10px;padding-inline-end:22px}
.mplot-price{font:800 1.05rem/1.2 var(--f-display)}
.mplot h3{font-size:1.1rem;line-height:1.25}
.mplot-d{color:var(--muted)}
.mplot-img{display:block;margin:-2px 0 2px;border-radius:10px;overflow:hidden;aspect-ratio:5/3;background:var(--sunk)}
.mplot-img img{display:block;width:100%;height:100%;object-fit:cover}
.mplot-f,.mtip-f{font-size:.84rem;color:var(--ink)!important;font-weight:600}
.mplot-on{font-size:.82rem}
.mplot-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.mplot .btn{padding:10px 14px;font-size:.88rem;min-height:40px}
.mpop .mplot .btn-wa,.msheet .mplot .btn-wa{color:var(--accent-ink)}
.mpop .mplot .btn-ghost,.msheet .mplot .btn-ghost{color:var(--ink)}

/* contact card: bottom sheet (phones, touch) */
.msheet{position:absolute;inset:auto 0 0 0;z-index:900;background:var(--surface);color:var(--ink);border-top:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:0 -12px 30px rgba(8,12,9,.25);padding:20px 18px calc(18px + env(safe-area-inset-bottom,0px));max-height:70%;overflow:auto;transform:translateY(105%);transition:transform .25s ease;touch-action:pan-x}
.msheet.on{transform:translateY(0)}
.msheet-grip{position:absolute;top:7px;left:50%;width:42px;height:5px;margin-left:-21px;border-radius:9px;background:var(--line)}
.msheet-x{position:absolute;top:8px;right:10px;width:40px;height:40px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:1.1rem;cursor:pointer}
.msheet .mplot .btn{flex:1 1 auto;justify-content:center}

/* explorer labels */
.mlabel-icon{background:none;border:0}
.mlabel{display:inline-block;transform:translate(-50%,-50%);white-space:nowrap;padding:6px 11px;border-radius:999px;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 4px 14px rgba(8,12,9,.2);font:700 .82rem/1.2 var(--f-body);cursor:pointer}
.mlabel::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--m-avail);margin-inline-end:7px;vertical-align:1px}
.mlabel-pin::before{background:var(--muted)}
.mlabel:hover{background:var(--ink);color:var(--bg)}
.mcanvas.is-close .mlabel{opacity:.55}
/* listings placed by pin or by block (approximate: dashed ring), and block outlines */
.mpin-icon{background:none;border:0}
.mpin{display:block;width:100%;height:100%;cursor:pointer;transform-origin:50% 100%;transition:transform .15s;filter:drop-shadow(0 3px 4px rgba(8,12,9,.45))}
.mpin svg{display:block;width:100%;height:100%;overflow:visible}
.mpin-body{fill:var(--m-avail);stroke:#fff;stroke-width:2}
.mpin-house{fill:#fff}
.mpin-reserved .mpin-body{fill:var(--m-res)} .mpin-sold .mpin-body{fill:var(--m-sold)} .mpin-info .mpin-body{fill:var(--m-info)}
.mpin-a .mpin-body{stroke-dasharray:4 3}
.mpin-icon.is-hot .mpin,.mpin:hover{transform:scale(1.2)}
.leaflet-tooltip.mblock-label{background:none;border:0;box-shadow:none;padding:0;color:#3A1D73;font:800 .85rem/1 var(--f-body);letter-spacing:.04em;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 6px #fff}
.leaflet-tooltip.mblock-label::before{display:none}
.mapprox{font:600 .72rem var(--f-body);color:var(--muted);margin-inline-start:4px}
@media (prefers-reduced-motion: reduce){.mpin{transition:none}}

/* Leaflet controls in the site's colours */
.leaflet-bar a,.leaflet-bar a:hover{background:var(--surface);color:var(--ink);border-bottom-color:var(--line)}
.leaflet-bar{border:1px solid var(--line)!important;box-shadow:0 2px 8px rgba(8,12,9,.15)!important}
.leaflet-control-attribution{background:color-mix(in oklab,var(--surface) 82%,transparent)!important;color:var(--muted)}
.leaflet-control-attribution a{color:var(--muted)}

/* plot table and cards */
.mtable table{width:100%;border-collapse:collapse;font-size:.92rem}
.mtable th,.mtable td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:start;vertical-align:middle}
.mtable thead th{font:600 .75rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--surface)}
.mtable tbody tr:last-child > *{border-bottom:0}
.mshow{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 12px;font:600 .82rem var(--f-body);cursor:pointer;white-space:nowrap}
.mshow:hover{border-color:var(--accent)}
.mcard .lcard-media{aspect-ratio:1200/630}
.mcard .lcard-media img{object-fit:contain;background:#F3F5F1}

@media (prefers-reduced-motion: reduce){ .msheet{transition:none} }

/* block outlines open a plot-alert card */
.leaflet-interactive.mblock{cursor:pointer}
.leaflet-interactive.mblock:hover{fill-opacity:.12}
.mblock-n{font-weight:600;color:var(--accent)}
/* plot alerts under the map */
.malert{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px}
.malert label{display:grid;gap:6px;font-size:.85rem;font-weight:600;color:var(--muted)}
.malert select{min-width:180px;min-height:46px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit;font-size:1rem}
.malert .btn{min-height:46px}
@media (max-width:560px){.malert label,.malert select,.malert .btn{width:100%}.malert .btn{justify-content:center}}