/* ─────────────────────────────────────────────────────────────────────────
   London Uncovered — map surface, markers, clusters, floating map controls
   ───────────────────────────────────────────────────────────────────────── */

.leaflet-container { font-family: var(--font-sans); background: #E8EAE6; }

.leaflet-control-zoom { display: none; }        /* replaced by our own stack */

/* One quiet line above the tab bar. Full credits live in the About sheet. */
.leaflet-control-attribution {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(8px);
  font-size: 10px !important;
  line-height: 1.5;
  color: var(--ink-500) !important;
  padding: 2px 7px !important;
  border-radius: var(--r-sm) 0 0 0;
  max-width: 100vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.leaflet-control-attribution a { color: var(--ink-600) !important; }
.leaflet-bottom.leaflet-right { margin-bottom: calc(var(--nav-h) + var(--safe-b)); }

/* ── Markers ───────────────────────────────────────────────────────────── */

.pin {
  border-radius: 50%;
  background: var(--blue);
  border: 2px solid rgba(255,255,255,.92);
  box-shadow: 0 1px 4px rgba(20,32,43,.34);
  transition: transform var(--dur-1) var(--ease-out);
}
.pin-0 { background: #7C9EC2; border-width: 1.5px; box-shadow: 0 1px 3px rgba(20,32,43,.24); }
.pin-2 { border-width: 2.5px; box-shadow: 0 1px 6px rgba(20,32,43,.36); }
.pin-3 {
  border-color: var(--gold);
  border-width: 3px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 2px 8px rgba(110,83,32,.4);
}

.pin-collected {
  background: var(--white);
  border-color: var(--blue);
  border-width: 2px;
  display: grid; place-items: center;
  box-shadow: 0 1px 5px rgba(20,32,43,.28);
}
.pin-collected.pin-3 { border-color: var(--gold); background: var(--gold-100); }
.pin-collected svg { width: 60%; height: 60%; display: block; }
.pin-collected path { stroke: var(--blue); stroke-width: 3.4; }
.pin-collected.pin-3 path { stroke: var(--gold-700); }

.pin-target {
  box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 0 0 7px rgba(20,86,160,.32),
              0 3px 12px rgba(20,32,43,.34);
  animation: target-ring 2.4s var(--ease) infinite;
}
@keyframes target-ring {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 0 0 6px  rgba(20,86,160,.34), 0 3px 12px rgba(20,32,43,.34); }
  50%      { box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 0 0 13px rgba(20,86,160,.05), 0 3px 12px rgba(20,32,43,.34); }
}

.pin-just-collected { animation: pin-pop var(--dur-4) var(--ease-out); }
@keyframes pin-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.55); }
  100% { transform: scale(1); }
}

/* ── Clusters ──────────────────────────────────────────────────────────── */

.cluster {
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  background: var(--blue);
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 2px 10px rgba(20,32,43,.3);
}
.cluster-iconic {
  background: var(--gold);
  box-shadow: 0 2px 10px rgba(110,83,32,.36);
}
.leaflet-marker-icon.leaflet-interactive:focus-visible { outline: 3px solid var(--blue-800); }

/* ── Iconic name labels ────────────────────────────────────────────────── */

.leaflet-tooltip.plaque-label {
  background: none; border: 0; box-shadow: none; padding: 0;
  font-size: 11px; font-weight: 650; letter-spacing: -0.01em;
  color: var(--gold-900);
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 6px #fff;
  white-space: nowrap;
}
.leaflet-tooltip.plaque-label::before { display: none; }
#map.zoomed-out .leaflet-tooltip.plaque-label { display: none; }

/* ── User location ─────────────────────────────────────────────────────── */

.userdot {
  width: 18px; height: 18px; border-radius: 50%;
  background: #1A73E8;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(26,115,232,.4), 0 2px 8px rgba(20,32,43,.4);
}
.leaflet-accuracy { stroke: #1A73E8; fill: #1A73E8; }

/* ── Map controls: search + chips ──────────────────────────────────────── */

#map-controls {
  position: fixed;
  top: calc(var(--safe-t) + 62px);
  left: calc(var(--safe-l) + var(--sp-3));
  right: calc(var(--safe-r) + var(--sp-3));
  z-index: var(--z-mapui);
  display: flex; flex-direction: column; gap: var(--sp-2);
  pointer-events: none;
}
#map-controls > * { pointer-events: auto; }

.searchrow {
  display: flex; gap: var(--sp-2); align-items: stretch;
  position: relative;
  z-index: 2;            /* the suggestion list must sit above the chip row */
}

.searchbox {
  position: relative;
  flex: 1;
  display: flex; align-items: center;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-1);
  min-height: var(--tap);
  padding: 0 var(--sp-2) 0 var(--sp-4);
  transition: box-shadow var(--dur-1);
}
.searchbox:focus-within { box-shadow: var(--sh-2), 0 0 0 2px var(--blue-200); }
.searchbox svg { width: 17px; height: 17px; color: var(--ink-400); flex-shrink: 0; }
#search {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: none;
  padding: 0 var(--sp-2);
  font-size: var(--fs-base);
}
#search::placeholder { color: var(--ink-400); }
#search::-webkit-search-cancel-button { display: none; }
#search-clear { display: none; width: 32px; height: 32px; }
.searchbox.has-value #search-clear { display: inline-flex; }

.filter-btn {
  position: relative;
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--sh-1);
  color: var(--ink-600);
  flex-shrink: 0;
}
.filter-btn svg { width: 19px; height: 19px; }
.filter-btn[data-active="true"] { background: var(--blue); color: #fff; }
.filter-badge {
  position: absolute; top: 4px; right: 3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--gold); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px #fff;
}

/* ── Category chips ────────────────────────────────────────────────────── */

.chips {
  position: relative;
  z-index: 1;
  display: flex; gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0 4px;
  margin: -2px 0 -4px;
  scroll-padding-inline: var(--sp-3);
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  min-height: 34px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--sh-1);
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--ink-600);
  white-space: nowrap;
  transition: background var(--dur-1), color var(--dur-1), transform var(--dur-1);
}
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { background: var(--blue); color: #fff; box-shadow: var(--sh-1); }

/* ── Map action stack (right rail) ─────────────────────────────────────── */

#map-actions {
  position: fixed;
  right: calc(var(--safe-r) + var(--sp-3));
  bottom: calc(var(--safe-b) + var(--nav-h) + 96px);
  z-index: var(--z-mapui);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.map-btn {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--sh-2);
  color: var(--ink-600);
  transition: color var(--dur-1), background var(--dur-1), transform var(--dur-1);
}
.map-btn:active { transform: scale(.94); }
.map-btn svg { width: 21px; height: 21px; }
.map-btn[data-active="true"] { color: #1A73E8; }
.map-btn.locating svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Primary gameplay CTA ──────────────────────────────────────────────── */

#find-next {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--safe-b) + var(--nav-h) + 26px);
  z-index: var(--z-mapui);
  box-shadow: 0 4px 20px rgba(20,86,160,.34), var(--sh-2);
  padding: 0 var(--sp-6);
  max-width: calc(100vw - var(--sp-8));
}
#find-next:active { transform: translateX(-50%) scale(.975); }
#find-next svg { width: 18px; height: 18px; }

/* ── Map count pill ────────────────────────────────────────────────────── */

#map-count {
  position: fixed;
  left: calc(var(--safe-l) + var(--sp-3));
  bottom: calc(var(--safe-b) + var(--nav-h) + 100px);
  z-index: var(--z-mapui);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--sh-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  transition: opacity var(--dur-2);
}

/* ── Map hidden while another tab is showing (mobile) ──────────────────── */

body[data-tab="quest"] #map-controls,
body[data-tab="quest"] #map-actions,
body[data-tab="quest"] #find-next,
body[data-tab="quest"] #map-count,
body[data-tab="mylondon"] #map-controls,
body[data-tab="mylondon"] #map-actions,
body[data-tab="mylondon"] #find-next,
body[data-tab="mylondon"] #map-count { display: none; }

/* ── Desktop ───────────────────────────────────────────────────────────── */

@media (min-width: 900px) {
  .leaflet-bottom.leaflet-right { margin-bottom: 0; }

  #map-controls {
    position: static;
    padding: var(--sp-4) var(--sp-5) var(--sp-3);
    background: var(--ivory);
    border-bottom: 1px solid var(--ink-100);
  }
  .searchbox, .chip, .filter-btn { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .searchbox { background: var(--white); box-shadow: inset 0 0 0 1px var(--ink-200); }
  .searchbox:focus-within { box-shadow: inset 0 0 0 2px var(--blue), var(--sh-1); }
  .chip { background: var(--white); box-shadow: inset 0 0 0 1px var(--ink-200); }
  .chip[aria-pressed="true"] { box-shadow: none; }
  .filter-btn { background: var(--white); box-shadow: inset 0 0 0 1px var(--ink-200); }
  .chips { scroll-padding-inline: var(--sp-5); }

  #map-actions {
    right: auto; bottom: auto;
    left: var(--sp-4); top: var(--sp-4);
    z-index: var(--z-mapui);
  }
  #map-count { left: var(--sp-4); bottom: var(--sp-6); }

  #find-next {
    position: static;
    transform: none;
    margin: var(--sp-4) var(--sp-5) 0;
    max-width: none;
  }
  #find-next:active { transform: scale(.985); }

  body[data-tab="quest"] #map-controls,
  body[data-tab="mylondon"] #map-controls,
  body[data-tab="quest"] #find-next,
  body[data-tab="mylondon"] #find-next { display: none; }
  body[data-tab="quest"] #map-actions,
  body[data-tab="mylondon"] #map-actions,
  body[data-tab="quest"] #map-count,
  body[data-tab="mylondon"] #map-count { display: flex; }
}