/* ████████████████████████████████████████████████████████ */
/* ██  map.css — map panel, Leaflet, venue list, filters  ██ */
/* ████████████████████████████████████████████████████████ */

#p-map{padding:14px 18px 72px;gap:12px;position:relative}
.map-wrap{display:none}
#leaflet-map{width:100%;height:100%;min-height:300px}
.map-pin{cursor:pointer;transition:transform 0.15s}
.map-pin:hover{transform:scale(1.15)}
.map-pin:hover .pin-body{filter:brightness(1.2)}

/* ── LEAFLET OVERRIDES ─────────────────────────────────── */
.leaflet-container{border-radius:18px;font-family:'Plus Jakarta Sans',sans-serif}
.leaflet-control-attribution{font-size:9px!important}
/* Tile-seam mitigation. Dark mode applies a CSS `filter` to the tile pane
   (see applyMapFilter in map.js) for the recoloured-night look. That
   filter forces each tile <img> onto its own compositing layer, and
   browser subpixel rounding then paints visible seams between them — the
   "grid of squares" effect users see. Same fix as the landing-page hero
   map: pin tiles to the pixel grid and skip Leaflet's tile fade-in
   transition (which is a second source of per-tile compositing layers). */
#leaflet-map .leaflet-tile {
  box-sizing: content-box !important;
  opacity: 1 !important;
  transition: none !important;
  will-change: auto !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.leaflet-popup-content-wrapper{border-radius:14px!important;box-shadow:0 4px 20px rgba(0,0,0,0.18)!important;padding:4px!important;border:none!important;background:var(--surf)!important;color:var(--tx)!important}
.leaflet-popup-content{color:var(--tx)!important}
.leaflet-popup-tip-container{display:none}

/* ── FILTER PILLS ──────────────────────────────────────── */
.mfilters{display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;padding-bottom:2px;flex-shrink:0;touch-action:pan-x;overscroll-behavior-y:contain}
.mfilters::-webkit-scrollbar{display:none}
.fp{padding:6px 13px;border-radius:var(--pill);flex-shrink:0;font-size:0.72rem;font-weight:600;background:var(--surf);color:var(--muted);border:1.5px solid var(--border);cursor:pointer;transition:all 0.15s}
.fp.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.fp:hover:not(.on){border-color:var(--border2);color:var(--tx)}

/* ── VENUE LIST ────────────────────────────────────────── */
.vlist{display:flex;flex-direction:column;gap:9px;padding-bottom:8px}
.vc{background:var(--surf);border:1px solid var(--border);border-radius:16px;padding:13px 15px;display:flex;gap:12px;align-items:center;cursor:pointer;transition:all 0.15s;box-shadow:0 1px 4px rgba(194,65,12,0.04)}
.vc:hover{background:var(--surf2);transform:translateX(3px);border-color:var(--border2)}
.vic{width:44px;height:44px;border-radius:13px;background:var(--surf2);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}
.vi{flex:1;min-width:0}
.vn{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.9rem;color:var(--tx);margin-bottom:2px}
.vm{font-size:0.71rem;color:var(--muted);display:flex;gap:9px;flex-wrap:wrap}
.vb{display:inline-block;padding:2px 8px;border-radius:var(--pill);font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-top:4px}
.bt{background:rgba(194,65,12,0.1);color:var(--acc)}
.bc{background:rgba(29,78,216,0.10);color:#1d4ed8}
.bk{background:rgba(124,58,237,0.10);color:#7c3aed}
.vg{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.88rem;color:var(--muted);text-align:right;flex-shrink:0}
.vg span{display:block;font-size:0.6rem;font-weight:500;color:var(--dim)}
/* Push the Leaflet attribution to the right-bottom so it doesn't overlap the zoom control in the bottom-left */
.leaflet-bottom.leaflet-left .leaflet-control-zoom{margin-bottom:30px}
.leaflet-control-attribution{font-size:0.6rem!important;opacity:0.7}
.map-filter-summary{color:rgba(255,255,255,0.55);text-shadow:0 1px 4px rgba(0,0,0,0.6)}
body.light .map-filter-summary{color:rgba(0,0,0,0.45);text-shadow:0 1px 3px rgba(255,255,255,0.5)}
/* Map search wrapper — block layout with absolutely positioned decorations,
   so the input is NOT a flex child. Flex layout + Chromium's caret pass can
   produce a clipped sliver caret; a plain block input avoids this entirely. */
#map-loc-wrap{
  position:relative;
  height:38px;
  background:rgba(22,22,24,0.92);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:22px;
  box-sizing:border-box;
}
body.light #map-loc-wrap{
  background:var(--surf2);
  border-color:var(--border);
}
/* Magnifying-glass icon — absolutely positioned overlay */
#map-loc-icon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
}
body.light #map-loc-icon{stroke:var(--muted)}
/* Clear ✕ button — absolutely positioned overlay on the right */
#map-loc-clear{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  display:none;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  color:rgba(255,255,255,0.5);
  font-size:1rem;
  line-height:1;
}
body.light #map-loc-clear{color:var(--muted)}
/* The input itself — plain block box, full wrapper size, padded to leave
   room for the icon on the left and the ✕ button on the right. */
#map-loc-input{
  box-sizing:border-box;
  display:block;
  width:100%;
  height:100%;
  padding:0 38px 0 38px;
  margin:0;
  background:transparent;
  border:none;
  outline:none;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:15px;
  line-height:36px; /* match inner height (wrap 38 − 2 border) */
  font-weight:400;
  font-style:normal;
  color:#fff;
  caret-color:#fff;
  -webkit-appearance:none;
  appearance:none;
}
#map-loc-input::placeholder{color:rgba(255,255,255,0.45)}
body.light #map-loc-input{color:var(--tx);caret-color:var(--tx)}
body.light #map-loc-input::placeholder{color:var(--dim)}
.map-filter-pill{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:100px;background:rgba(22,22,24,0.72);backdrop-filter:blur(10px);border:1px solid var(--acc);color:var(--acc);cursor:pointer;transition:all 0.15s;max-width:100%;overflow:hidden;text-overflow:ellipsis;text-shadow:none}
.map-filter-pill:hover,.map-filter-pill:focus-visible{background:var(--acc);color:#fff;outline:none}
body.light .map-filter-pill{background:rgba(255,255,255,0.9);color:var(--acc)}
body.light .map-filter-pill:hover,body.light .map-filter-pill:focus-visible{background:var(--acc);color:#fff}
.map-sug-spinner{width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,0.25);border-top-color:var(--gold);animation:mapSugSpin 0.8s linear infinite;flex-shrink:0}
body.light .map-sug-spinner{border-color:rgba(0,0,0,0.12);border-top-color:var(--acc)}
@keyframes mapSugSpin{to{transform:rotate(360deg)}}
/* Pin hover tooltip — colored chips, no surrounding box */
.leaflet-tooltip.cm-pin-tip{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  margin:0;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:0.7rem;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.leaflet-tooltip.cm-pin-tip:before{display:none}
.cm-tip-row{
  display:inline-block;
  padding:5px 10px;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
}
.cm-tip-friend{
  background:#38bdf8;
  color:#fff;
}
.cm-tip-started{
  background:#888;
  color:#fff;
}
.cm-tip-ended{
  background:#2a2a2a;
  color:rgba(255,255,255,0.85);
}

/* ────────────────────────────────────────────────────────────
   Rim presence — an orbiting highlight ring snug against the
   shape plus a steady feathered halo. No scale pulse. Two
   color variants share one structure:
     .cm-own-rim   → gold  (own meetups + in-progress banner)
     .cm-rsvp-rim  → light green (events you've RSVP'd to)
   On dot-mode map pins the orbit is disabled; only the halo
   remains. Works on any rounded shape via `border-radius:inherit`.
   ──────────────────────────────────────────────────────────── */
@property --cm-orbit {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes cm-own-orbit { to { --cm-orbit: 360deg; } }

.cm-own-rim,.cm-rsvp-rim{position:relative;isolation:isolate}

/* Orbiting ring — `--cm-rim-r` lets non-pill consumers (like the
   rounded-rect meetup banner) pass their exact corner radius so
   the ring is perfectly concentric with the parent. Defaults to
   999px so pill / circular parents stay snug automatically. */
.cm-own-rim::before,.cm-rsvp-rim::before{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:calc(var(--cm-rim-r, 999px) + 3px);
  padding:3px;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite:exclude;
  animation:cm-own-orbit 3.5s linear infinite;
  pointer-events:none;
  z-index:-1;
}

/* Steady outer halo — follows the parent's rounded shape via
   box-shadow spread. Layered for the feathered look. */
.cm-own-rim::after,.cm-rsvp-rim::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:-2;
}

/* ── Gold (own) ─────────────────────────────────────────── */
.cm-own-rim::before{
  background:conic-gradient(
    from var(--cm-orbit),
    #fff3c4 0deg,
    #fde68a 12deg,
    #C2A15A 40deg,
    rgba(194,161,90,0.55) 90deg,
    rgba(194,161,90,0.38) 170deg,
    rgba(194,161,90,0.38) 260deg,
    rgba(194,161,90,0.55) 310deg,
    #C2A15A 340deg,
    #fff3c4 360deg
  );
  filter:drop-shadow(0 0 3px rgba(253,230,138,0.85)) drop-shadow(0 0 7px rgba(194,161,90,0.5));
}
.cm-own-rim::after{
  box-shadow:
    0 0 0 1px rgba(253,230,138,0.55),
    0 0 10px 2px rgba(253,230,138,0.6),
    0 0 22px 6px rgba(194,161,90,0.42),
    0 0 38px 14px rgba(194,161,90,0.24);
}

/* ── Emerald (RSVP'd) ───────────────────────────────────
   Matched to gold's luminance hierarchy: a near-white
   highlight → bright mint → richer emerald base. Earlier
   palette sat too tight in the 75-90% lightness band, so
   the orbit spot didn't pop like the gold one does. */
.cm-rsvp-rim::before{
  background:conic-gradient(
    from var(--cm-orbit),
    #ecfdf5 0deg,
    #a7f3d0 12deg,
    #34d399 40deg,
    rgba(52,211,153,0.55) 90deg,
    rgba(52,211,153,0.38) 170deg,
    rgba(52,211,153,0.38) 260deg,
    rgba(52,211,153,0.55) 310deg,
    #34d399 340deg,
    #ecfdf5 360deg
  );
  filter:drop-shadow(0 0 3px rgba(167,243,208,0.85)) drop-shadow(0 0 7px rgba(52,211,153,0.5));
}
.cm-rsvp-rim::after{
  box-shadow:
    0 0 0 1px rgba(167,243,208,0.55),
    0 0 10px 2px rgba(167,243,208,0.6),
    0 0 22px 6px rgba(52,211,153,0.42),
    0 0 38px 14px rgba(52,211,153,0.24);
}

/* ── Yellow (followed-org host) ─────────────────────────
   Same orbit/halo machinery as the own/rsvp rims, in a
   warm-yellow palette. Applied to events hosted by an
   organisation the viewer follows, but only when the gold
   "your event" rim and the green "RSVP'd" rim aren't
   already claiming the slot — own > rsvp > follow. */
.cm-follow-rim,.cm-friend-rim{position:relative;isolation:isolate}
.cm-follow-rim::before,.cm-friend-rim::before{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:calc(var(--cm-rim-r, 999px) + 3px);
  padding:3px;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite:exclude;
  animation:cm-own-orbit 3.5s linear infinite;
  pointer-events:none;
  z-index:-1;
}
.cm-follow-rim::after,.cm-friend-rim::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:-2;
}
.cm-follow-rim::before{
  background:conic-gradient(
    from var(--cm-orbit),
    #fefce8 0deg,
    #fde68a 12deg,
    #facc15 40deg,
    rgba(250,204,21,0.55) 90deg,
    rgba(250,204,21,0.35) 170deg,
    rgba(250,204,21,0.35) 260deg,
    rgba(250,204,21,0.55) 310deg,
    #facc15 340deg,
    #fefce8 360deg
  );
  filter:drop-shadow(0 0 3px rgba(254,240,138,0.85)) drop-shadow(0 0 7px rgba(250,204,21,0.5));
}
.cm-follow-rim::after{
  box-shadow:
    0 0 0 1px rgba(254,240,138,0.55),
    0 0 10px 2px rgba(254,240,138,0.6),
    0 0 22px 6px rgba(250,204,21,0.42),
    0 0 38px 14px rgba(202,138,4,0.24);
}
/* Friend-host rim — cyan, same animation, used when the host is in your
   friends list (and not an org you follow). Visual hierarchy ends up:
   own > rsvp > follow-org > friend > nothing. */
.cm-friend-rim::before{
  background:conic-gradient(
    from var(--cm-orbit),
    #ecfeff 0deg,
    #a5f3fc 12deg,
    #38bdf8 40deg,
    rgba(56,189,248,0.55) 90deg,
    rgba(56,189,248,0.35) 170deg,
    rgba(56,189,248,0.35) 260deg,
    rgba(56,189,248,0.55) 310deg,
    #38bdf8 340deg,
    #ecfeff 360deg
  );
  filter:drop-shadow(0 0 3px rgba(165,243,252,0.85)) drop-shadow(0 0 7px rgba(56,189,248,0.5));
}
.cm-friend-rim::after{
  box-shadow:
    0 0 0 1px rgba(165,243,252,0.55),
    0 0 10px 2px rgba(165,243,252,0.6),
    0 0 22px 6px rgba(56,189,248,0.42),
    0 0 38px 14px rgba(14,165,233,0.24);
}

/* ── Dot-mode variants ──────────────────────────────────
   Orbit disabled at small scale; halo turned up slightly. */
.cm-own-rim.cm-own-rim-sm::before,
.cm-rsvp-rim.cm-rsvp-rim-sm::before,
.cm-follow-rim.cm-follow-rim-sm::before,
.cm-friend-rim.cm-friend-rim-sm::before{display:none}
.cm-follow-rim.cm-follow-rim-sm::after{
  box-shadow:
    0 0 0 1.5px rgba(254,240,138,0.85),
    0 0 8px 2px rgba(254,240,138,0.7),
    0 0 16px 5px rgba(250,204,21,0.5),
    0 0 26px 10px rgba(202,138,4,0.28);
}
.cm-friend-rim.cm-friend-rim-sm::after{
  box-shadow:
    0 0 0 1.5px rgba(165,243,252,0.85),
    0 0 8px 2px rgba(165,243,252,0.7),
    0 0 16px 5px rgba(56,189,248,0.5),
    0 0 26px 10px rgba(14,165,233,0.28);
}
.cm-own-rim.cm-own-rim-sm::after{
  box-shadow:
    0 0 0 1.5px rgba(253,230,138,0.85),
    0 0 8px 2px rgba(253,230,138,0.7),
    0 0 16px 5px rgba(194,161,90,0.5),
    0 0 26px 10px rgba(194,161,90,0.28);
}
.cm-rsvp-rim.cm-rsvp-rim-sm::after{
  box-shadow:
    0 0 0 1.5px rgba(167,243,208,0.9),
    0 0 8px 2px rgba(167,243,208,0.75),
    0 0 16px 5px rgba(52,211,153,0.55),
    0 0 26px 10px rgba(52,211,153,0.3);
}
/* Search history delete button */
.map-history-del{
  flex-shrink:0;
  width:22px;height:22px;
  border:none;
  background:rgba(255,255,255,0.08);
  border-radius:50%;
  color:rgba(255,255,255,0.35);
  font-size:0.65rem;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.12s,color 0.12s;
}
.map-history-del:hover{background:rgba(255,80,80,0.25);color:#ff6b6b}
body.light .map-history-del{background:rgba(0,0,0,0.06);color:rgba(0,0,0,0.3)}
body.light .map-history-del:hover{background:rgba(255,80,80,0.18);color:#d33}