/* ==========================================================================
   StanzaMap — premium navy/amber interactive map (homepage + /search)
   Brand tokens from app.css / listings.css (var(--ink) navy · var(--gold) amber
   · var(--serif) Cormorant · var(--ui) Hanken · var(--mono) PlexMono). Fallback
   hexes are baked into every var() so the map looks right even if a host page
   omits a token. Pairs with /map.js (window.StanzaMap) + self-hosted MapLibre.
   ========================================================================== */

/* ---------- container ---------- */
.stanza-map{
  position:relative;
  width:100%;
  height:100%;
  min-height:380px;
  /* deep navy fills the frame before (or instead of) tiles — never a white flash */
  background:
    radial-gradient(120% 90% at 78% -12%, rgba(245,162,0,.10), transparent 58%),
    linear-gradient(168deg, #0b1f4a 0%, #06143a 70%);
  border-radius:6px;
  overflow:hidden;
  isolation:isolate;
  color:var(--t-onink,#e9eefb);
  font-family:var(--ui,"Hanken",sans-serif);
}
.stanza-map .maplibregl-canvas{outline:none}
.stanza-map .maplibregl-map{font-family:var(--ui,"Hanken",sans-serif)}

/* crosshair while drawing an area */
.stanza-map.is-drawing .maplibregl-canvas,
.stanza-map.is-drawing{cursor:crosshair}
.stanza-map.is-drawing .maplibregl-canvas-container{cursor:crosshair}

/* ---------- graceful-degrade placeholder (MapLibre unavailable) ---------- */
.smap-ph{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;text-align:center;padding:24px;
}
.smap-ph .ph-dot{
  width:12px;height:12px;border-radius:50%;background:var(--gold,#f5a200);
  box-shadow:0 0 0 0 rgba(245,162,0,.55);animation:smap-ping 2.2s ease-out infinite;
}
.smap-ph .ph-t{
  font-family:var(--serif,Georgia,serif);font-size:1.35rem;font-weight:600;color:#fff;letter-spacing:.01em;
}
.smap-ph .ph-s{
  font-family:var(--mono,monospace);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-onink-2,#aeb9d6);
}
@keyframes smap-ping{0%{box-shadow:0 0 0 0 rgba(245,162,0,.5)}70%,100%{box-shadow:0 0 0 16px rgba(245,162,0,0)}}
@media (prefers-reduced-motion:reduce){.smap-ph .ph-dot{animation:none}}

/* a faint corner note when the basemap tiles are offline but pins are live */
.smap-note{
  position:absolute;left:12px;bottom:12px;z-index:3;display:none;align-items:center;gap:7px;
  font-family:var(--mono,monospace);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--t-onink-2,#aeb9d6);background:rgba(6,20,58,.72);
  border:1px solid rgba(245,162,0,.28);border-radius:3px;padding:5px 9px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);pointer-events:none;
}
.stanza-map.is-flat .smap-note{display:inline-flex}
.smap-note .nd{width:6px;height:6px;border-radius:50%;background:var(--gold,#f5a200)}

/* ---------- cooperative-gesture / scroll hint ---------- */
.smap-hint{
  position:absolute;inset:0;z-index:4;display:none;align-items:center;justify-content:center;
  pointer-events:none;background:rgba(6,20,58,.30);opacity:0;transition:opacity .25s;
}
.smap-hint.show{display:flex;opacity:1}
.smap-hint span{
  font-family:var(--ui,sans-serif);font-weight:600;font-size:14px;color:#fff;
  background:rgba(8,24,72,.86);border:1px solid rgba(245,162,0,.4);border-radius:4px;
  padding:11px 18px;box-shadow:0 18px 40px -18px rgba(0,0,0,.7);letter-spacing:.01em;
}

/* ---------- price-bubble markers ---------- */
.smk{
  /* MapLibre owns this element's transform (it sets translate(-50%,-100%) translate(x,y)
     every frame to place the pin). The root MUST stay out of normal flow and shrink to
     its content — otherwise it lays out as a full-width block and MapLibre's "-50%"
     centres on HALF THE MAP WIDTH instead of half the pill, pushing every pin ~hundreds
     of px left of its true coordinate. (maplibre-gl.css gives .maplibregl-marker
     position:absolute; we restate it here so map.css load-order can't override it back to
     static/relative.) Do NOT put a transition/transform on the root: MapLibre rewrites the
     transform constantly, so a transition makes pins lag the basemap during pan/zoom.
     All hover/selected visuals live on .smk-pill instead. */
  position:absolute;top:0;left:0;width:max-content;
  cursor:pointer;user-select:none;-webkit-user-select:none;will-change:transform;
}
.smk-pill{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono,monospace);font-weight:600;font-size:12px;line-height:1;
  letter-spacing:.01em;white-space:nowrap;color:var(--ink,#0a2562);
  background:var(--foil,linear-gradient(135deg,#ffc63f,#f5a200 50%,#d98a00));
  padding:6px 11px;border-radius:999px;border:1.5px solid rgba(255,255,255,.92);
  box-shadow:0 4px 12px -4px rgba(4,12,40,.75),0 1px 0 rgba(255,255,255,.5) inset;
  transform-origin:50% 100%;transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s;
}
/* downward tip */
.smk-pill::after{
  content:"";position:absolute;left:50%;bottom:-5px;width:9px;height:9px;
  background:#f5a200;border-right:1.5px solid rgba(255,255,255,.92);
  border-bottom:1.5px solid rgba(255,255,255,.92);
  transform:translateX(-50%) rotate(45deg);border-radius:0 0 2px 0;
}
.smk:hover{z-index:4}
.smk:hover .smk-pill{transform:scale(1.09) translateY(-1px);box-shadow:0 9px 20px -6px rgba(4,12,40,.8)}

/* highlighted (list↔map sync / clicked) — invert to navy block, amber text */
.smk.is-hi{z-index:6}
.smk.is-hi .smk-pill{
  transform:scale(1.14) translateY(-2px);
  color:var(--gold-bright,#ffc23d);background:var(--ink,#0a2562);
  border-color:rgba(245,162,0,.85);
  box-shadow:0 0 0 4px rgba(245,162,0,.28),0 12px 26px -8px rgba(4,12,40,.85);
}
.smk.is-hi .smk-pill::after{background:#0a2562;border-color:rgba(245,162,0,.85)}
.smk.is-active{z-index:7}
.smk.is-active .smk-pill{
  color:var(--gold-bright,#ffc23d);background:var(--ink,#0a2562);
  border-color:rgba(245,162,0,.9);
  box-shadow:0 0 0 3px rgba(245,162,0,.35),0 12px 26px -8px rgba(4,12,40,.85);
}
.smk.is-active .smk-pill::after{background:#0a2562;border-color:rgba(245,162,0,.9)}
@media (prefers-reduced-motion:reduce){.smk-pill{transition:none}}

/* ---------- cluster bubbles ---------- */
.scl{
  display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;
  color:var(--ink,#0a2562);font-family:var(--mono,monospace);font-weight:600;
  background:var(--foil,radial-gradient(circle at 38% 32%,#ffd873,#f5a200 62%,#d98a00));
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 6px 18px -5px rgba(4,12,40,.7),0 0 0 6px rgba(245,162,0,.14);
  transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s;will-change:transform;
}
.scl:hover{transform:scale(1.07);box-shadow:0 10px 24px -6px rgba(4,12,40,.8),0 0 0 8px rgba(245,162,0,.18)}
.scl .scl-n{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.scl.s{width:36px;height:36px;font-size:12px}
.scl.m{width:46px;height:46px;font-size:13px}
.scl.l{width:58px;height:58px;font-size:15px}
@media (prefers-reduced-motion:reduce){.scl{transition:none}}

/* ---------- branded popup ---------- */
.maplibregl-popup.map-popup{max-width:300px!important;z-index:9}
.map-popup .maplibregl-popup-content{
  padding:0;border-radius:8px;overflow:hidden;background:var(--card,#fff);
  border:1px solid var(--line-2,#d3dae9);
  box-shadow:0 24px 60px -24px rgba(8,24,72,.6);font-family:var(--ui,sans-serif);
}
.map-popup .maplibregl-popup-tip{border-top-color:var(--card,#fff)!important;
  border-bottom-color:var(--card,#fff)!important}
.map-popup .maplibregl-popup-close-button{
  width:26px;height:26px;font-size:18px;line-height:24px;color:#fff;right:6px;top:6px;
  background:rgba(8,24,72,.55);border-radius:50%;transition:background .2s;z-index:2;
}
.map-popup .maplibregl-popup-close-button:hover{background:var(--gold,#f5a200);color:var(--ink,#0a2562)}

.mp-card{display:block;color:inherit;text-decoration:none}
.mp-ph{position:relative;height:148px;background:
  linear-gradient(150deg,#0d2a66,#06143a);overflow:hidden}
.mp-ph img{width:100%;height:100%;object-fit:cover;display:block}
.mp-ph.no img{display:none}
.mp-ph .mp-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono,monospace);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--t-onink-2,#aeb9d6)}
.mp-ph .mp-tag{position:absolute;left:10px;top:10px;font-family:var(--mono,monospace);
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink,#0a2562);
  background:var(--gold,#f5a200);padding:4px 8px;border-radius:2px;font-weight:600}
.mp-body{padding:13px 15px 15px}
.mp-price{font-family:var(--mono,monospace);font-weight:600;font-size:1.18rem;
  color:var(--ink,#0a2562);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mp-addr{font-family:var(--serif,Georgia,serif);font-size:1.18rem;font-weight:600;line-height:1.2;
  color:var(--t-ink,#15213b);margin:3px 0 0}
.mp-meta{margin-top:7px;font-size:13px;color:var(--t-mid,#48526a)}
.mp-meta b{color:var(--t-ink,#15213b);font-weight:600}
.mp-cta{margin-top:12px;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono,monospace);
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep,#0a2562);
  border-bottom:1.5px solid var(--gold,#f5a200);padding-bottom:2px}
.mp-card:hover .mp-cta{color:var(--gold,#f5a200)}
.mp-cta .ar{transition:transform .2s}
.mp-card:hover .mp-cta .ar{transform:translateX(4px)}

/* ---------- MapLibre control chrome → brand ---------- */
.stanza-map .maplibregl-ctrl-group{
  background:rgba(255,255,255,.96);border:1px solid var(--line-2,#d3dae9);border-radius:4px;
  box-shadow:0 6px 18px -8px rgba(8,24,72,.5);overflow:hidden;
}
.stanza-map .maplibregl-ctrl-group button{width:32px;height:32px;background:transparent}
.stanza-map .maplibregl-ctrl-group button+button{border-top:1px solid var(--line,#e2e7f0)}
.stanza-map .maplibregl-ctrl-group button:hover{background:var(--gold-soft,rgba(245,162,0,.12))}
.stanza-map .maplibregl-ctrl button .maplibregl-ctrl-icon{filter:none}
.stanza-map .maplibregl-ctrl-attrib{
  background:rgba(255,255,255,.82)!important;border-radius:3px 0 0 0;
  font-family:var(--ui,sans-serif);font-size:10px;color:var(--t-faint,#8b94a8);
}
.stanza-map .maplibregl-ctrl-attrib a{color:var(--gold-deep,#0a2562)}

/* custom "Draw area" control */
.smap-ctrl .smap-ctrl-btn{
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  background:transparent;border:0;color:var(--ink,#0a2562);
}
.smap-ctrl .smap-ctrl-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
.smap-ctrl .smap-ctrl-btn:hover{background:var(--gold-soft,rgba(245,162,0,.12))}
.smap-ctrl .smap-ctrl-btn.is-on{background:var(--ink,#0a2562);color:var(--gold-bright,#ffc23d)}
.smap-ctrl .smap-ctrl-btn.is-hidden{display:none}

/* live drag rectangle while drawing */
.smap-drawbox{
  position:absolute;z-index:5;pointer-events:none;display:none;
  border:1.5px dashed var(--gold,#f5a200);background:rgba(245,162,0,.12);border-radius:3px;
  box-shadow:0 0 0 9999px rgba(6,20,58,.18);
}
.smap-drawbox.show{display:block}

/* floating "Drawn area" / clear chip (bottom-center) */
.smap-drawn{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6;display:none;
  align-items:center;gap:10px;font-family:var(--ui,sans-serif);font-size:13px;font-weight:600;color:#fff;
  background:rgba(8,24,72,.9);border:1px solid rgba(245,162,0,.4);border-radius:5px;padding:8px 10px 8px 14px;
  box-shadow:0 16px 36px -16px rgba(0,0,0,.7);
}
.stanza-map.has-draw .smap-drawn{display:flex}
.smap-drawn .dx{
  border:0;background:var(--gold,#f5a200);color:var(--ink,#0a2562);font-family:var(--mono,monospace);
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:3px;
  cursor:pointer;transition:filter .2s;
}
.smap-drawn .dx:hover{filter:brightness(1.08)}

/* keep popups/markers above the maplibre canvas on small screens */
@media (max-width:640px){
  .stanza-map{min-height:320px}
  .maplibregl-popup.map-popup{max-width:260px!important}
  .mp-ph{height:128px}
}