/* ═══════════════════════════════════════════════════════════════════════════
   zl-map.css — the ZL discovery map.

   REBUILT 2026-08-31 alongside zl-map.js. The previous file was ~46KB and about
   a third of it existed only to repair an earlier version of itself: three
   generations of floating-control rules, two sheet implementations, a region
   strip that no longer exists, and overrides layered on overrides. This is one
   pass, written against the current markup only.

   BRAND. Teal carries the identity, gold marks a single accent (selection,
   price, recommendation), and the ground is warm neutral — not brown, not grey.
   Nothing on this page is dark.
   ═══════════════════════════════════════════════════════════════════════════ */

.zmap-page{
  /* palette */
  --zt:#00ABC7;            /* ZL teal — the identity */
  --zt-d:#008BA6;
  --zt-deep:#004F6C;       /* ink-teal, for text on light */
  --zg:#E6B563;            /* gold — accent only */
  --zg-d:#B57F2A;
  --zi:#123540;            /* primary ink */
  --zi2:#4E6A74;           /* secondary ink */
  --zi3:#8AA0A8;           /* tertiary ink */
  --zbg:#F6FBFC;           /* page ground: warm-cool neutral, never brown */
  --zsurf:#FFFFFF;
  --zline:#E3EEF1;
  --zr:18px;               /* the one radius for floating things */
  --zsh:0 6px 22px rgba(18,53,64,.10), 0 1px 3px rgba(18,53,64,.06);
  --zsh-lift:0 14px 40px rgba(18,53,64,.16);
  --nav:var(--zm-nav,64px);
  background:var(--zbg);
}

/* the page scrolls normally; the map is a panel in it, not the document */
html:has(body.zmap-page){height:auto; overflow:visible}
body.zmap-page{background:var(--zbg); overflow-x:hidden}

.zmap{position:relative; padding:0 0 4px}
.zmap-in{max-width:1560px; margin:0 auto; padding:0 20px}

/* ── the one heading line ──────────────────────────────────────────────────
   The map is the hero, so the page above it is a single line, not a block. */
.zmap-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:14px 4px 10px}
.zmap-h1{font-size:clamp(1.15rem,2.2vw,1.6rem); font-weight:800; color:var(--zi);
  margin:0; letter-spacing:-.01em}
.zmap-h1 .hl{color:var(--zt)}
.zmap-hsub{margin:0; color:var(--zi2); font-size:.9rem}

/* ── layout: canvas + rail ─────────────────────────────────────────────── */
.zmap-layout{display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:16px;
  align-items:start}

/* ── the canvas ────────────────────────────────────────────────────────── */
.zmap-canvas{position:relative; border-radius:22px; overflow:hidden;
  background:#EAF4F7; box-shadow:var(--zsh); border:1px solid var(--zline);
  height:min(78vh,780px)}
#zmapMap{position:absolute; inset:0; background:#EAF4F7}
#zmapMap .leaflet-control-attribution{
  background:rgba(255,255,255,.82); backdrop-filter:blur(6px);
  font-size:10px; color:var(--zi3); padding:2px 8px; border-radius:8px 0 0 0}
#zmapMap .leaflet-control-attribution a{color:var(--zi2)}

/* Leaflet's own counter-rule covers only `.leaflet-overlay-pane svg`, while
   style.css @media (max-width:520px) applies `max-width:100%` to canvas and
   svg site-wide — and a Leaflet pane is a zero-width box, so 100% of it is 0.
   Below 520px that silently erased every vector on the map. */
.leaflet-container .leaflet-pane canvas,
.leaflet-container .leaflet-pane svg,
.leaflet-container .leaflet-pane img{
  max-width:none !important; max-height:none !important;
  max-inline-size:none !important; max-block-size:none !important;
}

/* ── floating controls: ONE size, ONE radius, ONE shadow ──────────────────
   Search, lenses, weather and the dock are visually one family. Every value
   below is shared; nothing overrides it per-control. */
.zmap-fsearch,.zmap-lens,.zmap-weather,.zmap-btn{
  background:var(--zsurf); border:1px solid var(--zline); border-radius:var(--zr);
  box-shadow:var(--zsh); color:var(--zi); font-family:inherit;
}

.zmap-top{position:absolute; z-index:620; top:14px; inset-inline:14px;
  display:flex; flex-direction:column; gap:10px; pointer-events:none}
.zmap-top > *{pointer-events:auto}

.zmap-fsearch{display:flex; align-items:center; gap:10px; padding:0 16px;
  height:52px; max-width:520px; width:100%}
.zmap-fsearch svg{flex:none; color:var(--zt)}
.zmap-fsearch input{flex:1; min-width:0; border:0; background:transparent; outline:0;
  font:inherit; font-size:.95rem; color:var(--zi)}
.zmap-fsearch input::placeholder{color:var(--zi3)}

/* discovery lenses — the primary axis */
.zmap-lenses{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  padding:2px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch}
.zmap-lenses::-webkit-scrollbar{display:none}
.zmap-lens{flex:none; height:38px; padding:0 15px; border-radius:999px;
  font-size:.855rem; font-weight:700; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px; scroll-snap-align:start;
  transition:background .16s, color .16s, border-color .16s, transform .12s}
.zmap-lens:hover{transform:translateY(-1px)}
.zmap-lens.on{background:var(--zt); border-color:var(--zt); color:#fff;
  box-shadow:0 6px 18px rgba(0,171,199,.30)}
.zmap-lens.reg svg{opacity:.65; transition:transform .18s}
.zmap-lens.reg[aria-expanded="true"] svg{transform:rotate(180deg)}

/* regions: the secondary axis, in a sheet the visitor opens on purpose */
.zmap-regionsheet{position:absolute; z-index:640; top:112px; inset-inline-start:14px;
  width:min(420px,calc(100% - 28px)); max-height:min(52vh,380px); overflow:auto;
  background:var(--zsurf); border:1px solid var(--zline); border-radius:var(--zr);
  box-shadow:var(--zsh-lift); padding:12px; display:none}
.zmap-regionsheet.open{display:block; animation:zmapPop .16s ease-out}
@keyframes zmapPop{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
.zmap-regions{display:flex; flex-wrap:wrap; gap:7px}
.zmap-rg{border:1px solid var(--zline); background:#fff; color:var(--zi);
  border-radius:999px; padding:8px 13px; font:inherit; font-size:.83rem; font-weight:700;
  cursor:pointer; transition:background .14s,color .14s,border-color .14s}
.zmap-rg:hover{border-color:var(--zt); color:var(--zt-d)}
.zmap-rg.on{background:var(--zt-deep); border-color:var(--zt-deep); color:#fff}

/* weather — compact, never stretched: top and bottom are never both set */
.zmap-weather{position:absolute; z-index:600; top:14px; inset-inline-end:14px;
  bottom:auto; height:auto; padding:9px 13px; display:flex; gap:9px;
  align-items:center}
.zmap-weather[hidden]{display:none}
.zmap-weather .wx-t{font-size:1.12rem; font-weight:800; color:var(--zt-deep)}
.zmap-weather .wx-b{display:flex; flex-direction:column; line-height:1.22}
.zmap-weather .wx-c{font-size:.74rem; font-weight:700; color:var(--zi2)}
.zmap-weather .wx-p{font-size:.68rem; color:var(--zi3)}

/* control dock */
.zmap-dock{position:absolute; z-index:600; inset-inline-end:14px; bottom:38px;
  display:flex; flex-direction:column; gap:8px}
.zmap-btn{width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
  font-size:.95rem; color:var(--zt-deep); transition:background .14s,color .14s,transform .12s}
.zmap-btn:hover{background:var(--zt); color:#fff; transform:translateY(-1px)}
.zmap-btn.busy{opacity:.6; pointer-events:none}
.zmap-btn.busy i{animation:zmapSpin .9s linear infinite}
@keyframes zmapSpin{to{transform:rotate(360deg)}}

/* ── markers ──────────────────────────────────────────────────────────────
   The renderer draws the SVG; CSS only carries motion and shadow. */
.zmap-pin,.zmap-poi{background:none !important; border:0 !important}
.zmap-pin svg{display:block; filter:drop-shadow(0 4px 6px rgba(18,53,64,.30));
  transition:transform .16s cubic-bezier(.2,.9,.3,1.3)}
.zmap-pin:hover svg{transform:translateY(-3px) scale(1.06)}
.zmap-pin.sel svg{transform:scale(1.16); transform-origin:50% 100%;
  filter:drop-shadow(0 6px 12px rgba(230,181,99,.55))}
.zmap-poi svg{display:block; filter:drop-shadow(0 2px 4px rgba(18,53,64,.22));
  transition:transform .16s}
.zmap-poi:hover svg{transform:scale(1.14)}

/* clusters — a ZL bubble with a soft ring, not an analytics badge */
.zmap-cluster{background:none !important; border:0 !important}
.zmap-cluster .ring,.zmap-cluster .n{position:absolute; inset:0; border-radius:50%;
  display:grid; place-items:center}
.zmap-cluster .ring{background:rgba(0,171,199,.20); animation:zmapRing 2.6s ease-out infinite}
.zmap-cluster .n{margin:5px; background:var(--zt); color:#fff; font-weight:800;
  font-size:.92rem; border:2.5px solid #fff;
  box-shadow:0 6px 16px rgba(0,79,108,.28); transition:transform .16s}
.zmap-cluster.m .n{background:#0092AE; font-size:.98rem}
.zmap-cluster.l .n{background:var(--zt-deep); font-size:1.02rem}
.zmap-cluster:hover .n{transform:scale(1.07)}
@keyframes zmapRing{0%{transform:scale(.86);opacity:.55}70%{transform:scale(1.12);opacity:0}100%{opacity:0}}

/* ── the result rail ───────────────────────────────────────────────────── */
.zmap-railslot{position:relative}
.zmap-panel{background:transparent; display:flex; flex-direction:column; gap:10px}
.zmap-railh{display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin:0; padding:2px 4px}
.zmap-railh b{font-size:1rem; font-weight:800; color:var(--zi)}
.zmap-railh span{font-size:.78rem; color:var(--zi3); font-weight:700}
.zmap-list{display:flex; flex-direction:column; gap:10px;
  max-height:calc(min(78vh,780px) - 44px); overflow:auto; padding:2px 4px 10px;
  scrollbar-width:thin}

.zmap-lc{display:grid; grid-template-columns:104px 1fr; gap:12px; text-align:start;
  background:var(--zsurf); border:1px solid var(--zline); border-radius:16px;
  padding:9px; cursor:pointer; font:inherit; align-items:center;
  transition:border-color .16s, box-shadow .16s, transform .12s}
.zmap-lc:hover{border-color:var(--zt); box-shadow:var(--zsh); transform:translateY(-1px)}
.zmap-lc.on{border-color:var(--zg); box-shadow:0 0 0 2px rgba(230,181,99,.35), var(--zsh)}
.zmap-lc .ph{position:relative; width:104px; height:82px; border-radius:12px;
  overflow:hidden; background:#E8F2F5; display:block; flex:none}
.zmap-lc .ph img{width:100%; height:100%; object-fit:cover; display:block}
.zmap-lc .b{display:flex; flex-direction:column; gap:3px; min-width:0}
.zmap-lc .nm{font-weight:800; font-size:.95rem; color:var(--zi); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.zmap-lc .mt{font-size:.76rem; color:var(--zi3); font-weight:600}
.zmap-lc .pr{font-size:.83rem; font-weight:700; color:var(--zg-d)}
.zmap-lc .poi{font-size:.76rem; color:var(--zi2); font-weight:700}
.zmap-lc .np{font-size:.72rem; color:#A2703B; font-weight:700}
.zmap-lc.nopin .ph{filter:saturate(.75)}

/* badges — every one of them is a fact in the data */
.zmap-bdg{position:absolute; inset-inline-start:6px; top:6px; z-index:2;
  font-size:.63rem; font-weight:800; padding:3px 7px; border-radius:999px;
  background:rgba(255,255,255,.94); color:var(--zt-deep); box-shadow:0 2px 6px rgba(18,53,64,.18)}
.zmap-bdg.rec{background:var(--zg); color:#3A2B0E}
.zmap-bdg.wk{top:auto; bottom:6px; background:var(--zt); color:#fff}

/* ── notice + preview ──────────────────────────────────────────────────── */
.zmap-notice{position:absolute; z-index:610; inset-inline:16px; bottom:16px;
  background:var(--zsurf); border:1px solid var(--zline); border-radius:var(--zr);
  box-shadow:var(--zsh); padding:12px 15px; display:flex; flex-direction:column; gap:2px}
.zmap-notice[hidden]{display:none}
.zmap-notice b{font-size:.92rem; color:var(--zi)}
.zmap-notice{font-size:.8rem; color:var(--zi2)}

.zmap-detail{position:absolute; z-index:650; inset-inline-start:14px; bottom:14px;
  width:min(340px,calc(100% - 28px)); background:var(--zsurf);
  border:1px solid var(--zline); border-radius:20px; box-shadow:var(--zsh-lift);
  overflow:hidden; opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .18s, transform .18s}
.zmap-detail.open{opacity:1; transform:none; pointer-events:auto}
.zmap-hero{position:relative; height:132px; background:#E8F2F5}
.zmap-hero img{width:100%; height:100%; object-fit:cover; display:block}
.zmap-hero.poi{background:color-mix(in srgb, var(--poi) 14%, #fff)}
.zmap-x{position:absolute; top:8px; inset-inline-end:8px; width:30px; height:30px;
  border-radius:50%; border:0; background:rgba(255,255,255,.94); cursor:pointer;
  font-size:.9rem; color:var(--zi); box-shadow:0 2px 8px rgba(18,53,64,.2)}
.zmap-recflag{position:absolute; inset-inline-start:8px; top:8px; background:var(--zg);
  color:#3A2B0E; font-size:.68rem; font-weight:800; padding:4px 9px; border-radius:999px}
.zmap-body{padding:12px 14px; display:flex; flex-direction:column; gap:7px}
.zmap-body h2{margin:0; font-size:1rem; font-weight:800; color:var(--zi); line-height:1.35}
.zmap-metarow{display:flex; gap:7px; flex-wrap:wrap; font-size:.76rem; color:var(--zi3)}
.zmap-kind{background:rgba(0,171,199,.12); color:var(--zt-deep); font-weight:700;
  padding:3px 9px; border-radius:999px}
.zmap-fact{display:flex; align-items:center; gap:7px; font-size:.8rem; color:var(--zi2)}
.zmap-fact i{color:var(--zt); width:14px; text-align:center}
.zmap-fact.muted{color:var(--zi3)}
.zmap-fact.muted i{color:var(--zi3)}
.zmap-price{font-size:1.02rem; font-weight:800; color:var(--zg-d)}
.zmap-price small{font-size:.7rem; font-weight:700; color:var(--zi3)}
.zmap-acts{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 14px 14px}
.zmap-acts button{border-radius:12px; padding:11px 10px; font:inherit; font-weight:800;
  font-size:.86rem; cursor:pointer; border:1px solid var(--zline); background:#fff;
  color:var(--zt-deep); display:inline-flex; align-items:center; justify-content:center; gap:7px}
.zmap-acts .book{background:var(--zt); border-color:var(--zt); color:#fff;
  box-shadow:0 6px 16px rgba(0,171,199,.30)}
.zmap-acts button:hover{filter:brightness(1.04)}

/* ── recommendations — an extension of the map, not a second section ────── */
#zmapRecs{margin:14px 0 6px}
#zmapRecs[hidden]{display:none}
.zmap-recsh{margin:0 4px 9px; font-size:.98rem; font-weight:800; color:var(--zi)}
.zmap-recs{display:flex; gap:12px; overflow-x:auto; padding:2px 4px 10px;
  scrollbar-width:none; scroll-snap-type:x proximity}
.zmap-recs::-webkit-scrollbar{display:none}
.zmap-rec{flex:none; width:218px; scroll-snap-align:start; text-align:start;
  background:var(--zsurf); border:1px solid var(--zline); border-radius:16px;
  overflow:hidden; cursor:pointer; font:inherit; padding:0;
  transition:border-color .16s, box-shadow .16s, transform .12s}
.zmap-rec:hover{border-color:var(--zt); box-shadow:var(--zsh); transform:translateY(-2px)}
.zmap-rec .ph{display:block; height:118px; background:#E8F2F5}
.zmap-rec .ph img{width:100%; height:100%; object-fit:cover; display:block}
.zmap-rec .b{display:flex; flex-direction:column; gap:3px; padding:10px 11px 12px}
.zmap-rec .nm{font-weight:800; font-size:.87rem; color:var(--zi); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.zmap-rec .mt{font-size:.72rem; color:var(--zi3); font-weight:600}
.zmap-rec .pr{font-size:.8rem; font-weight:700; color:var(--zg-d)}

/* ── toast ─────────────────────────────────────────────────────────────── */
.zmap-toast{position:fixed; z-index:9000; inset-inline:0; bottom:26px; margin:auto;
  width:max-content; max-width:86vw; background:var(--zi); color:#fff;
  padding:11px 18px; border-radius:999px; font-size:.87rem; font-weight:700;
  opacity:0; transform:translateY(10px); pointer-events:none; transition:.2s}
.zmap-toast.on{opacity:1; transform:none}

/* ── the mobile sheet ──────────────────────────────────────────────────────
   Absolute INSIDE the canvas — a fixed sheet floated over the footer once the
   page scrolled. Only the grab handle takes the gesture, so the map stays
   draggable at every detent. */
.zmap-sheet{display:none}
.zmap-grab{width:100%; border:0; background:transparent; padding:9px 0 7px;
  display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer;
  font:inherit; touch-action:none}
.zmap-grab .bar{width:42px; height:4px; border-radius:99px; background:#C9DBE1}
.zmap-grab .sum{font-size:.78rem; font-weight:700; color:var(--zi2)}

/* ══ TABLET ═══════════════════════════════════════════════════════════════
   Not a squeezed desktop: the rail goes under the map at full width and turns
   into a two-column grid, and the map keeps the whole viewport width. */
@media (max-width:1100px){
  .zmap-in{padding:0 14px}
  .zmap-layout{grid-template-columns:1fr; gap:14px}
  .zmap-canvas{height:min(62vh,620px)}
  /* The rail scrolls in place. Left to grow, sixty cards in a two-column grid
     made the tablet page 5,480px tall — the map became a header on a long list
     instead of the subject of the page. */
  .zmap-list{max-height:560px; overflow:auto;
    display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px;
    align-content:start}
  .zmap-detail{width:min(360px,calc(100% - 28px))}
}

/* ══ PHONE ════════════════════════════════════════════════════════════════
   Map-first: the canvas is the viewport, results live in the sheet, and the
   page below it is short — no 4000px column of stacked cards. */
@media (max-width:767px){
  .zmap-in{padding:0 10px}
  .zmap-head{padding:10px 2px 8px}
  .zmap-hsub{display:none}
  .zmap-canvas{height:calc(100dvh - var(--nav) - 92px); min-height:420px;
    border-radius:18px}

  .zmap-top{top:10px; inset-inline:10px; gap:8px}
  .zmap-fsearch{height:46px; padding:0 13px; max-width:none}
  .zmap-fsearch input{font-size:.88rem}
  .zmap-lens{height:34px; padding:0 13px; font-size:.8rem}
  .zmap-regionsheet{top:auto; bottom:0; inset-inline:0; width:auto;
    border-radius:20px 20px 0 0; max-height:56vh; z-index:680}

  .zmap-weather{top:auto; bottom:calc(var(--sheet,72px) + 12px); inset-inline-start:10px;
    inset-inline-end:auto; padding:7px 10px}
  .zmap-weather .wx-t{font-size:1rem}
  .zmap-dock{bottom:calc(var(--sheet,72px) + 12px); inset-inline-end:10px; gap:7px}
  .zmap-btn{width:40px; height:40px}
  .is-sheet-open .zmap-dock,.is-sheet-open .zmap-weather{opacity:0; pointer-events:none}
  .zmap-dock,.zmap-weather{transition:opacity .18s}

  /* Above Leaflet's corner containers, which are z-index 1000 (`.leaflet-bottom`)
     — not the 800 of `.leaflet-control`. The attribution is anchored to the
     bottom of the canvas and was printing over the result cards. It stays
     readable at the closed detent, which is where the map is being looked at. */
  .zmap-sheet{display:flex; flex-direction:column; position:absolute; z-index:1100;
    inset-inline:0; bottom:0; height:var(--detent,72px);
    background:var(--zsurf); border-top:1px solid var(--zline);
    border-radius:20px 20px 0 0; box-shadow:0 -10px 34px rgba(18,53,64,.16);
    transition:height .24s cubic-bezier(.22,.9,.28,1)}
  .zmap-sheet.md{height:var(--detent,52%)}
  .zmap-sheet.full{height:var(--detent,86%)}
  .zmap-sheet-body{flex:1; min-height:0; overflow:auto; padding:0 12px 14px;
    -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
  .zmap-sheet[data-detent="sm"] .zmap-sheet-body{overflow:hidden}
  .zmap-panel{gap:9px}
  .zmap-railh{padding:0 2px 2px}
  .zmap-list{max-height:none; overflow:visible; display:flex; padding:0 0 8px}
  .zmap-lc{grid-template-columns:92px 1fr; padding:8px}
  .zmap-lc .ph{width:92px; height:74px}

  /* the preview replaces the sheet's own content rather than stacking on it */
  .zmap-detail{inset-inline:10px; bottom:calc(var(--detent,72px) + 10px);
    width:auto; max-width:none}
  .zmap-sheet.showdetail .zmap-sheet-body{opacity:.35}

  #zmapRecs{margin:12px 0 4px}
  .zmap-rec{width:190px}
  .zmap-rec .ph{height:104px}
}

/* honour reduced motion: the ring and the lifts are decoration */
@media (prefers-reduced-motion:reduce){
  .zmap-cluster .ring{animation:none}
  .zmap-pin svg,.zmap-poi svg,.zmap-lc,.zmap-rec,.zmap-btn{transition:none}
}