/* Mark 2: labelled navigation, paper cards, and map-anchored popups.
   Kept separate from the legacy feed/shelf styles for a bounded redesign. */
:root {
  --ui-paper: #fff9ed;
  --ui-ink: #142239;
  --ui-muted: #6d695f;
  --ui-line: #e5dece;
}

.topbar {
  background: #101d30;
  box-shadow: 0 3px 14px #07182d18;
  backdrop-filter: none;
}

.brand-name { display: grid; gap: 3px; font-size: 21px; }
.brand-name small { font-size: 8px; font-weight: 550; letter-spacing: 1.4px; color: #d1c8b6; }
.brand-mark { box-shadow: none; }
.top-actions { gap: 6px; }
.top-actions .icon-button {
  display: flex;
  gap: 7px;
  width: auto;
  min-width: 78px;
  min-height: 44px;
  height: auto;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  color: #f7efde;
}
.top-actions .icon-button:hover,
.top-actions .icon-button[aria-expanded="true"] {
  border-color: #f5c54260;
  background: #f5c54214;
  color: #f5c542;
}
.top-actions .icon-button .nav-label { white-space: nowrap; font-size: 12px; font-weight: 650; color: inherit; }
.top-actions .account-button-initial { position: static; }
.top-actions .account-button-icon,
.top-actions .account-button-initial { width: auto; height: auto; flex-shrink: 0; }
.search-icon { display: none; }
#searchInput { background: var(--ui-paper); box-shadow: none; padding: 0 18px; font-size: 14px; }
#searchInput::placeholder { color: var(--ui-muted); }
.map-panel::after { opacity: .3; }

.place-heading { display: flex; align-items: center; gap: 12px; padding-right: 4px; }
.place-heading-copy { flex: 1; min-width: 0; }
.place-meta { display: block; color: var(--ui-muted); font-size: 12px; font-weight: 550; line-height: 1.5; }
.place-heading h2 { margin: 5px 0 0; color: var(--ui-ink); font-size: 20px; font-weight: 750; line-height: 1.35; overflow-wrap: anywhere; letter-spacing: -.5px; }
.place-book-art { display: grid; flex: 0 0 54px; width: 54px; height: 62px; place-items: center; background: #f1eadb; border: 1px solid #e4dac7; border-radius: 9px 13px 13px 9px; }
.place-book-art svg { width: 46px; stroke: #556754; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.place-book-art .book-art-bookmark { fill: #e4b643; stroke: #e4b643; }
.place-description { margin: 14px 0; color: #4f514d; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.place-address { color: var(--ui-muted); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.place-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; }
.place-actions button { min-height: 44px; border: 1px solid var(--ui-line); border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.place-action-secondary { background: transparent; color: var(--ui-ink); }
.place-actions .place-action-primary { background: var(--ui-ink); color: var(--ui-paper); border-color: var(--ui-ink); }
.place-action-primary span { margin-left: 8px; color: #f5c542; }
.place-actions button:hover { filter: brightness(.94); }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid #d8aa32; outline-offset: 3px; }

.map-store-marker.stage-1 .map-feed-card.place-card {
  width: 290px;
  padding: 18px;
  border: 1px solid var(--ui-line);
  border-top: 3px solid #e4b643;
  border-radius: 15px;
  background: var(--ui-paper);
  backdrop-filter: none;
  box-shadow: 0 10px 28px #07182d26;
}
.map-store-marker.stage-1 .map-feed-card.place-card::before { display: none; }
.map-store-marker.stage-1 .map-feed-card.place-card::after { background: var(--ui-paper); width: 14px; height: 14px; bottom: -8px; border-color: var(--ui-line); }
.place-card .place-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nearby-index-list { width: 156px; }
.nearby-index { width: 156px; box-shadow: 0 3px 9px #07182d12; background: var(--ui-paper); animation: none; }
.nearby-index-copy strong { font-size: 11px; }
.nearby-index-copy small { font-size: 10px; }
.store-directory-panel { background: var(--ui-paper); box-shadow: -6px 0 24px #07182d1a; }
.store-directory-header { background: #101d30; }
.store-directory-search input { box-shadow: none; }
.store-directory-item-copy strong { font-weight: 700; }
.store-directory-address { font-size: 12px; }


@media (max-width: 640px) {
  html, body { height: 100%; overflow: hidden; }
  .topbar { position: fixed; inset: 0 0 auto; height: 116px; min-height: 0; padding: 9px 14px 10px; gap: 8px; grid-template-columns: auto 1fr; }
  .brand { gap: 7px; }
  .brand-mark { width: 29px; height: 32px; }
  .topbar .brand > .brand-name { display: grid; font-size: 19px; }
  .brand-name small { display: none; }
  .top-actions { gap: 3px; }
  .top-actions .icon-button { flex-direction: column; justify-content: center; gap: 3px; min-width: 50px; min-height: 46px; padding: 4px 6px; border-radius: 9px; font-size: 16px; line-height: 1; }
  .top-actions .icon-button .nav-label { font-size: 10px; line-height: 1.3; }
  .search-wrap { grid-column: 1 / -1; }
  #searchInput { min-height: 42px; height: 42px; font-size: 16px; border-radius: 12px; }
  .app-shell { min-height: 0; }
  .map-panel { position: fixed; inset: 116px 0 0; width: 100%; height: auto; min-height: 0; }
  .map-store-marker.stage-1 .main-info-card-wrapper {
    --main-card-shift-x: 0px;
    display: block;
    bottom: 24px;
    left: 50%;
    transform: translateX(calc(-50% + var(--popup-shift-x, 0px)));
  }
  .map-store-marker.stage-1 .main-info-card-wrapper.popup-below { bottom: auto; top: 24px; }
  .map-store-marker.stage-1 .map-pin-label { display: none; }
  .map-store-marker.stage-1 .map-dot { box-shadow: 0 0 0 4px #fff9ed, 0 0 0 6px #e4b643; }
  .map-store-marker.stage-1 .map-feed-card.place-card {
    width: min(292px, calc(100vw - 28px));
    max-height: var(--popup-max-height, calc(100dvh - 160px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px;
    border-radius: 16px;
    animation: none;
  }
  .map-store-marker.stage-1 .map-feed-card.place-card::after { display: none; }
  .map-store-marker.stage-1 .main-info-card-wrapper::after {
    position: absolute; bottom: -7px; left: var(--popup-tail-x, 50%);
    width: 13px; height: 13px; background: var(--ui-paper);
    border-right: 1px solid var(--ui-line); border-bottom: 1px solid var(--ui-line);
    transform: translateX(-50%) rotate(45deg); content: ""; pointer-events: none;
  }
  .map-store-marker.stage-1 .main-info-card-wrapper.popup-below::after {
    bottom: auto; top: -6px; transform: translateX(-50%) rotate(225deg);
    background: #e4b643; border: 0;
  }
  .place-heading { gap: 10px; padding-right: 24px; }
  .place-heading h2 { font-size: 19px; }
  .place-book-art { flex-basis: 44px; width: 44px; height: 52px; }
  .place-book-art svg { width: 40px; }
  .place-description { margin: 12px 0; font-size: 12px; }
  .place-card .place-description { -webkit-line-clamp: 1; margin: 8px 0 12px; }
  .popup-nearby { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ui-line); }
  .popup-distance-note { display: flex; justify-content: space-between; gap: 4px; margin: 0 0 8px; font-size: 11px; font-weight: 650; color: var(--ui-ink); }
  .popup-distance-note span { font-size: 10px; font-weight: 400; color: var(--ui-muted); }
  .popup-nearby .nearby-index-list { position: static; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .popup-nearby .nearby-index { display: block; position: relative; width: 100%; height: 68px; min-height: 44px; padding: 7px 6px; border: 1px solid var(--ui-line); border-radius: 9px; transform: none; box-shadow: none; }
  .popup-nearby .nearby-index::before { display: none; }
  .popup-nearby .nearby-index-rank { position: absolute; right: 6px; bottom: 7px; width: 14px; height: 14px; font-size: 9px; }
  .popup-nearby .nearby-index-copy { display: grid; gap: 4px; }
  .popup-nearby .nearby-index-copy strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; overflow-wrap: anywhere; height: 29px; font-size: 11px; line-height: 1.3; }
  .popup-nearby .nearby-index-copy small { font-size: 10px; line-height: 14px; }
  .popup-nearby .nearby-index-arrow { display: none; }
  .nearby-button { right: 16px; bottom: 22px; width: 44px; height: 44px; }
  .location-status { bottom: 76px; }
  .store-directory-panel { top: 116px; bottom: 0; width: min(390px, 100%); max-height: calc(100dvh - 116px); }
  .feed-toggle-button.is-feed-locked { opacity: .85; }
}

.place-popup-close { position: absolute; z-index: 3; right: 4px; top: 5px; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: var(--ui-muted); font-size: 22px; cursor: pointer; }
.place-card .place-heading { padding-right: 22px; }

/* Directional droplets: the inner half stays under the paper card. */
.map-store-marker.stage-1 .main-info-card-wrapper { isolation: isolate; bottom: 24px; }
.map-store-marker.stage-1 .map-feed-card.place-card { position: relative; z-index: 2; }
.liquid-neighbors.nearby-index-list { inset: 0; width: 100%; height: 100%; display: block; z-index: 1; pointer-events: none; }
.liquid-neighbors .liquid-drop {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 112px; height: 66px; padding: 5px; border: 1px solid var(--ui-line);
  border-radius: 48%; overflow: visible; text-align: center; cursor: pointer;
  background: var(--ui-paper);
  color: var(--ui-ink);
  box-shadow: 0 5px 12px #14223912;
  transform: translate(-50%, -50%); transform-origin: var(--drop-origin);
  animation: droplet-emerge 850ms var(--index-delay) cubic-bezier(.2,.8,.25,1.3) both;
  transition: border-radius 350ms, background 200ms, border-color 200ms, scale 280ms;
}
.liquid-neighbors .liquid-drop::before { display: none; }
.liquid-neighbors .drop-north, .liquid-neighbors .drop-south { left: var(--drop-slot); width: 70px; height: 108px; }
.liquid-neighbors .drop-north { top: 0; padding-bottom: 54px; --drop-origin: 50% 100%; --birth-x: 0px; --birth-y: 36px; }
.liquid-neighbors .drop-south { top: 100%; padding-top: 54px; --drop-origin: 50% 0%; --birth-x: 0px; --birth-y: -36px; }
.liquid-neighbors .drop-east { left: 100%; top: var(--drop-slot); padding-left: 56px; --drop-origin: 0% 50%; --birth-x: -36px; --birth-y: 0px; }
.liquid-neighbors .drop-west { left: 0; top: var(--drop-slot); padding-right: 56px; --drop-origin: 100% 50%; --birth-x: 36px; --birth-y: 0px; }
.liquid-neighbors .nearby-index-copy { display: grid; gap: 3px; min-width: 0; }
.liquid-neighbors .nearby-index-copy strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; overflow-wrap: anywhere; font-size: 10px; font-weight: 650; letter-spacing: -.2px; line-height: 1.35; }
.liquid-neighbors .nearby-index-copy small { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 9px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ui-muted); }
.liquid-neighbors .nearby-index-copy small::before { content: ""; flex: 0 0 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--index-color); box-shadow: 0 0 0 1px #1422390c; }
.liquid-neighbors .nearby-index-rank, .liquid-neighbors .nearby-index-arrow { display: none; }
.liquid-neighbors .liquid-drop:hover, .liquid-neighbors .liquid-drop:focus-visible { transform: translate(-50%, -50%); scale: 1.04; border-radius: 44% 53% 47% 51%; background: color-mix(in srgb, var(--index-color) 9%, var(--ui-paper)); border-color: #d6c7a5; }
.liquid-neighbors .liquid-drop.is-selecting { animation: none; scale: .9; }
@keyframes droplet-emerge {
  0% { opacity: 0; transform: translate(calc(-50% + var(--birth-x)), calc(-50% + var(--birth-y))) scale(.3); }
  45% { opacity: 1; border-radius: 40% 57% 42% 55%; }
  70% { transform: translate(-50%, -50%) scale(1.09,.94); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (max-width: 640px) {
  .map-store-marker.stage-1 .map-feed-card.place-card { width: min(292px, calc(100vw - 128px)); padding: 13px; }
  .map-store-marker.stage-1 .main-info-card-wrapper { bottom: 24px; }
  .map-store-marker.stage-1 .main-info-card-wrapper.popup-below { top: 24px; }
  .place-heading { gap: 7px; }
  .place-heading h2 { font-size: 17px; }
  .place-book-art { flex-basis: 32px; width: 32px; height: 42px; }
  .place-book-art svg { width: 30px; }
  .place-meta { font-size: 10px; }
  .place-actions button { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .liquid-neighbors .liquid-drop { animation: none; transition: none; }
}

.liquid-neighbors .drop-north, .liquid-neighbors .drop-south { width: min(70px, 32%); }
.main-info-card-wrapper:has(.drop-east ~ .drop-east ~ .drop-east) .place-card,
.main-info-card-wrapper:has(.drop-west ~ .drop-west ~ .drop-west) .place-card { min-height: 220px; }

/* Filter only the shared background: labels and controls remain crisp. */
.map-store-marker.stage-1 .main-info-card-wrapper {
  --main-card-shift-x: 0px;
  transform: translateX(calc(-50% + var(--popup-shift-x, 0px)));
}
.map-store-marker.stage-1 .main-info-card-wrapper.popup-below { bottom: auto; top: 24px; }
.liquid-surface-shell, .liquid-surface { position: absolute; inset: 0; pointer-events: none; }
.liquid-surface-shell { z-index: 0; filter: drop-shadow(0 4px 9px #14223926); }
.liquid-surface { filter: url(#bookgolmok-surface-tension); }
.liquid-card-body { position: absolute; inset: 0; border-radius: 16px; background: var(--ui-paper); }
.liquid-surface .liquid-drop { border: 0; box-shadow: none; pointer-events: none; }
.map-store-marker.stage-1 .map-feed-card.place-card { background: transparent; border-color: transparent; box-shadow: none; }
.map-store-marker.stage-1 .map-feed-card.place-card::after { display: none; }
nav.liquid-neighbors .liquid-drop,
nav.liquid-neighbors .liquid-drop:hover,
nav.liquid-neighbors .liquid-drop:focus-visible { background: transparent; border-color: transparent; box-shadow: none; }
.map-store-marker.stage-1 .main-info-card-wrapper::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: var(--popup-tail-x, 50%); bottom: -26px; top: auto;
  width: 26px; height: 30px; background: var(--ui-paper); border: 0;
  transform: translateX(-50%); clip-path: polygon(0 0, 100% 0, 67% 50%, 50% 100%, 33% 50%);
}
.map-store-marker.stage-1 .main-info-card-wrapper.popup-below::after {
  top: -26px; bottom: auto; background: var(--ui-paper); transform: translateX(-50%) rotate(180deg);
}
.main-info-card-wrapper:has(.nearby-index-rank1:hover) .surface-rank1, .main-info-card-wrapper:has(.nearby-index-rank1:focus-visible) .surface-rank1 { scale: 1.08; border-radius: 43% 55% 46% 52%; }
.main-info-card-wrapper:has(.nearby-index-rank2:hover) .surface-rank2, .main-info-card-wrapper:has(.nearby-index-rank2:focus-visible) .surface-rank2 { scale: 1.08; border-radius: 43% 55% 46% 52%; }
.main-info-card-wrapper:has(.nearby-index-rank3:hover) .surface-rank3, .main-info-card-wrapper:has(.nearby-index-rank3:focus-visible) .surface-rank3 { scale: 1.08; border-radius: 43% 55% 46% 52%; }

/* Color gathers at the outward tip; the shared neck stays paper-colored. */
.liquid-surface .surface-rank1 { --tip-color: #edc35e; }
.liquid-surface .surface-rank2 { --tip-color: #b9a1db; }
.liquid-surface .surface-rank3 { --tip-color: #87bca9; }
.liquid-surface .drop-north { --tip-direction: to top; }
.liquid-surface .drop-east { --tip-direction: to right; }
.liquid-surface .drop-south { --tip-direction: to bottom; }
.liquid-surface .drop-west { --tip-direction: to left; }
.liquid-surface .liquid-drop {
  background: linear-gradient(var(--tip-direction), var(--ui-paper) 0%, var(--ui-paper) 48%, color-mix(in srgb, var(--tip-color) 35%, var(--ui-paper)) 72%, var(--tip-color) 100%);
}

/* Bookshop dots remain readable over roads and map labels. */
.map-store-marker.stage-4 { width: 14px; height: 14px; }
.map-store-marker .map-dot {
  width: 14px; height: 14px; box-sizing: border-box;
  border: 3px solid #fff9ed; background: #142239;
  box-shadow: 0 0 0 1px #14223966, 0 2px 5px #14223940;
}
.map-store-marker.neighbor-rank-1 { --neighbor-color: #edc35e; }
.map-store-marker.neighbor-rank-2 { --neighbor-color: #b9a1db; }
.map-store-marker.neighbor-rank-3 { --neighbor-color: #87bca9; }
.map-store-marker:is(.neighbor-rank-1,.neighbor-rank-2,.neighbor-rank-3) .map-dot {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 18px; height: 18px; border-color: var(--neighbor-color);
  box-shadow: 0 0 0 2px #fff9ed, 0 3px 7px #14223940;
}
.map-store-marker.stage-1 .map-dot {
  width: 20px; height: 20px; border: 3px solid #e4b643; background: #142239;
  box-shadow: 0 0 0 3px #fff9ed, 0 3px 9px #14223940;
}
.map-store-marker.is-entering.stage-4 .map-dot { animation: none; }
.map-store-marker.is-entering.stage-1 .map-dot::after {
  content: ""; position: absolute; inset: -7px; border: 2px solid #e4b643;
  border-radius: 50%; pointer-events: none; animation: selected-dot-ripple 650ms ease-out both;
}
@keyframes selected-dot-ripple { from { transform: scale(.8); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map-store-marker.is-entering.stage-1 .map-dot::after { animation: none; display: none; } }

/* The approved image pair activates this entrance; otherwise the existing intro remains. */
.intro-screen.has-book-alley { background: #fff9ed; }
.has-book-alley .intro-page-stack, .has-book-alley .intro-mark,
.has-book-alley .intro-studio, .has-book-alley .intro-paper-grain { display: none; }
.has-book-alley::before, .has-book-alley::after { display: none; }
.has-book-alley .intro-skip { width: 100%; min-height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 32px; padding: 24px 0; }
.book-alley-canvas { display: block; max-width: 100%; }
.book-alley-enter { padding: 14px 28px; border-radius: 999px; background: #142239; color: #fff9ed; font-size: 15px; font-weight: 650; opacity: 0; transform: translateY(8px); transition: opacity 450ms, transform 450ms; }
.book-alley-complete .book-alley-enter { opacity: 1; transform: none; }
.book-alley-skip { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); color: #6d695f; font-size: 12px; }
.book-alley-complete .book-alley-skip { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .book-alley-enter { transition: none; } }
.has-book-alley .intro-skip:focus-visible { outline: none; }
.has-book-alley .intro-skip:focus-visible .book-alley-enter { outline: 2px solid #9a8258; outline-offset: 5px; }
.book-alley-canvas { mix-blend-mode: multiply; }

/* The outpainted scene fills the surrounding viewport; the central art is not faded away. */
.has-book-alley .intro-skip { height: 100%; padding: 0; gap: 0; overflow: hidden; }
.has-book-alley .book-alley-canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; mix-blend-mode: normal; }
.has-book-alley .book-alley-enter { position: absolute; z-index: 1; bottom: max(7vh, 32px); box-shadow: 0 4px 24px #fff9ed66; }
.has-book-alley .book-alley-skip { z-index: 1; padding: 7px 14px; border-radius: 20px; background: #fff9edcc; }

/* Primary category sets the center; selection and distance keep their outer rings. */
.map-store-marker .map-dot.place-symbol { background: var(--category-color); }
.place-symbol.category-bookstore { border-radius: 50%; }
.place-symbol.category-independent_bookstore { border-radius: 3px; }
.place-symbol.category-book_cafe { border-radius: 3px 8px 3px 8px; }
.place-symbol.category-library { border-radius: 5px 5px 2px 2px; }
.place-symbol.category-stationery { border-radius: 3px; rotate: 45deg; }
.place-symbol.category-other { border-radius: 50%; }
.place-symbol.category-other::before { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: #fff9ed; }
.map-store-marker .map-dot.category-other { position: relative; }
.map-store-marker:is(.neighbor-rank-1,.neighbor-rank-2,.neighbor-rank-3) .map-dot.category-other { position: absolute; }
.place-map-legend {
  position: absolute; z-index: 5; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 15px;
  width: max-content; max-width: calc(100% - 140px); padding: 10px 15px;
  border: 1px solid #1422391a; border-radius: 14px; background: #fff9edf2;
  box-shadow: 0 2px 12px #14223912; color: #454b50; font-size: 11px;
}
.map-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.map-legend-item .place-symbol { position: relative; display: inline-block; flex: 0 0 10px; width: 10px; height: 10px; background: var(--category-color); box-shadow: 0 0 0 1px #14223933; }
@media (max-width: 640px) {
  .place-map-legend { left: 12px; right: 62px; bottom: max(16px, env(safe-area-inset-bottom)); transform: none; width: auto; max-width: none; gap: 7px 12px; padding: 9px 10px; font-size: 10px; }
}

/* A compact, always-visible mobile sign leaves room for the place popup. */
@media (max-width: 640px) {
  .feed-shelf-dock .feed-toggle-button.is-feed-locked {
    top: 4px; width: 84px; height: 64px; opacity: 1;
  }
  .feed-toggle-button.is-feed-locked .book-cover-label { font-size: 8px; width: 34px; height: 14px; }
  .feed-toggle-button.is-feed-locked .feed-construction-sign {
    top: 49px; left: 48%; width: 62px; min-height: 25px; padding: 8px 3px 4px;
    background-size: 100% 4px; box-shadow: 0 2px 5px #14223920;
  }
  .feed-toggle-button.is-feed-locked .feed-construction-sign strong { font-size: 10px; }
  .feed-toggle-button.is-feed-locked .feed-construction-sign small { display: none; }
  .feed-toggle-button.is-feed-locked .feed-construction-sign::before { top: -8px; height: 9px; }
}

/* Illustrated neighborhood stays below markers and never captures map gestures. */
.map-illustration-overlay.neighborhood-art {
  border: 0; border-radius: 0; mix-blend-mode: normal; filter: none; box-shadow: none;
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 0%, #000 56%, #000000eb 64%, #000000ad 75%, #00000059 85%, #00000017 94%, transparent 100%);
  mask-image: radial-gradient(circle closest-side at 50% 50%, #000 0%, #000 56%, #000000eb 64%, #000000ad 75%, #00000059 85%, #00000017 94%, transparent 100%);
}
.map-illustration-overlay.neighborhood-art img { object-fit: fill; }
.illustration-map-button { position: absolute; z-index: 5; top: 14px; right: 14px; padding: 10px 13px; border: 1px solid #14223926; border-radius: 12px; background: #fff9edf2; color: #142239; font-size: 12px; font-weight: 650; box-shadow: 0 2px 10px #14223915; cursor: pointer; }
.illustration-map-button[aria-pressed="true"] { background: #142239; color: #fff9ed; }
.illustration-map-button:focus-visible { outline: 2px solid #b78520; outline-offset: 3px; }

/* Frosted glass sits outside the goo filter, so map blur never touches text. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .map-store-marker.stage-1 .main-info-card-wrapper::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    border-radius: 16px; background: rgba(242, 250, 255, .18);
    -webkit-backdrop-filter: blur(28px) saturate(1.2);
    backdrop-filter: blur(28px) saturate(1.2);
    box-shadow: 0 0 0 1px #39576c40, 0 16px 34px #1422394d, 0 3px 9px #1422392e;
  }
  .map-store-marker.stage-1 .liquid-surface-shell { opacity: .68; }
  .map-store-marker.stage-1 .map-feed-card.place-card {
    background:
      radial-gradient(ellipse 80% 65% at 50% 45%, #ffffffa6 0%, #f8fcff80 48%, #f2faff0a 100%),
      linear-gradient(180deg, #ffffffb3 0%, #ffffff26 5%, transparent 16%, transparent 88%, #d1e7f54d 100%);
    border: 1px solid #ffffffd9;
    box-shadow: inset 0 2px 2px #ffffffed, inset 2px 0 5px #ffffff80,
      inset -2px -3px 8px #7aa7c538, inset 0 -1px 1px #ffffffb3;
  }
  .map-store-marker.stage-1 nav.liquid-neighbors .liquid-drop {
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    backdrop-filter: blur(22px) saturate(1.2);
    background: radial-gradient(ellipse at 28% 15%, #ffffff94 0%, #ffffff24 36%, transparent 65%);
    box-shadow: inset 0 1px 1px #ffffff99, inset 0 -2px 5px #93bad324;
  }
  .map-store-marker.stage-1 .main-info-card-wrapper::after,
  .map-store-marker.stage-1 .main-info-card-wrapper.popup-below::after {
    background: #f2faffb3;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

/* Keep the card and its liquid neighbors clear of the illustrated landmark. */
.map-store-marker.stage-1 .main-info-card-wrapper {
  bottom: calc(24px + var(--popup-building-gap, 0px));
}
.map-store-marker.stage-1 .main-info-card-wrapper.popup-below {
  bottom: auto;
  top: calc(24px + var(--popup-building-gap, 0px));
}

.map-store-marker.stage-1 .main-info-card-wrapper.popup-near-building {
  bottom: var(--popup-building-offset, 8px);
}
.map-store-marker.stage-1 .main-info-card-wrapper.popup-near-building.popup-below {
  bottom: auto; top: var(--popup-building-offset, 8px);
}
.map-store-marker.stage-1 .main-info-card-wrapper.popup-near-building::after {
  height: 6px; width: 12px; bottom: -5px;
}
.map-store-marker.stage-1 .main-info-card-wrapper.popup-near-building.popup-below::after {
  bottom: auto; top: -5px;
}

/* Clear text on both the base map and the illustrated map. */
.map-store-marker.stage-1 .place-heading h2 { color: #102139; font-size: 22px; font-weight: 800; line-height: 1.3; }
@media (max-width: 640px) { .map-store-marker.stage-1 .place-heading h2 { font-size: 20px; } }
.map-store-marker.stage-1 .place-description { color: #405166; }
.map-store-marker.stage-1 .place-meta,
.map-store-marker.stage-1 .nearby-index-copy small { color: #48515d; }
.map-store-marker.stage-1 .nearby-index-copy strong { color: #142239; font-weight: 750; }

/* Cool glass is scoped to the popup; the site palette stays independent. */
.map-store-marker.stage-1 .main-info-card-wrapper {
  --ui-paper: #f2faff;
  --ui-line: #b0c4d47a;
}
.map-store-marker.stage-1 .place-book-art {
  background: #e8f1f74d; border-color: #ffffffa6;
  box-shadow: inset 0 1px 0 #ffffffb3;
}
.map-store-marker.stage-1 .place-book-art svg { stroke: #39576c; }

.map-illustration-overlay.neighborhood-art { z-index: 0; }
.map-bookstore-illustration { position: absolute; z-index: 1; pointer-events: none; object-fit: contain; }
.map-bookstore-illustration[hidden] { display: none; }

.place-introduction { margin: -5px 0 10px; color: #35485a; font-size: 12px; line-height: 1.5; }
.place-visit-info { margin: 0 0 12px; color: #48515d; font-size: 11px; line-height: 1.7; }
.place-visit-info summary { cursor: pointer; color: #203b50; font-weight: 650; }
.place-visit-info a { color: #164f75; text-underline-offset: 2px; }

/* Scale the complete popup, including the liquid neighbor buttons. */
.map-store-marker.stage-1 .main-info-card-wrapper {
  transform: translateX(calc(-50% + var(--popup-shift-x, 0px))) scale(var(--popup-scale, .8));
  transform-origin: 50% 100%;
}
.map-store-marker.stage-1 .main-info-card-wrapper.popup-below { transform-origin: 50% 0%; }

/* A quiet corner notice, independent of place selection and map layers. */
.map-event-notice {
  position: absolute; z-index: 6; right: 16px; bottom: 90px; width: 216px;
  color: #273249; background: #edf0f9ed; border: 1px solid #ffffffc9;
  border-radius: 18px; box-shadow: 0 6px 24px #18283c24;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.map-event-notice[hidden] { display: none; }
.map-event-notice summary { display: flex; align-items: center; gap: 10px; padding: 12px; cursor: pointer; list-style: none; }
.map-event-notice summary::-webkit-details-marker { display: none; }
.map-event-notice summary:focus-visible, .event-notice-body a:focus-visible { outline: 2px solid #7161a8; outline-offset: 3px; border-radius: 12px; }
.event-ticket { display: grid; place-items: center; width: 32px; height: 36px; border-radius: 9px; background: #7161a818; color: #7161a8; font-size: 22px; }
.event-summary-copy { display: grid; gap: 4px; }
.event-status { font-size: 10px; font-weight: 650; color: #74618e; }
.is-live .event-status { color: #34756b; }
.is-live .event-status::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #429584; }
.event-summary-copy strong { font-size: 14px; letter-spacing: -.3px; }
.event-chevron { margin-left: auto; color: #768296; }
.map-event-notice:not([open]) .event-chevron { transform: rotate(180deg); }
.event-notice-body { padding: 0 14px 13px; }
.event-notice-body p { margin: 0; }
.event-notice-body .event-tagline { margin-bottom: 11px; font-size: 11px; color: #637087; }
.event-date { font-size: 13px; font-weight: 700; }
.event-date span { font-size: 10px; font-weight: 400; color: #637087; }
.event-notice-body .event-venue { margin-top: 5px; font-size: 11px; }
.event-notice-body .event-hours { margin-top: 4px; font-size: 10px; color: #637087; }
.event-notice-body a { display: flex; justify-content: space-between; align-items: center; min-height: 36px; margin-top: 10px; padding: 0 10px; border-radius: 10px; background: #7161a813; color: #514274; text-decoration: none; font-size: 11px; font-weight: 650; }
@media (max-width: 640px) { .map-event-notice { right: 14px; bottom: max(82px, calc(env(safe-area-inset-bottom) + 66px)); width: 200px; } }

/* Map controls: stacked navigation below, event popover anchored above. */
.illustration-map-button {
  top: auto; bottom: 76px; right: 22px; width: 44px; height: 44px;
  padding: 0; display: grid; place-items: center; border-radius: 50%;
  background: #edf2f5ed; backdrop-filter: blur(16px); z-index: 520;
}
.map-event-notice {
  top: 14px; right: 14px; bottom: auto; width: 44px;
  border: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  z-index: 521;
}
.map-event-notice summary {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 1px solid #ffffffc9; border-radius: 50%;
  background: #edf0f9f0; color: #625087; box-shadow: 0 3px 14px #18283c24;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.map-event-notice[open] summary { background: #625087; color: #fff; }
.event-indicator { position: absolute; right: 1px; top: 1px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #a28dc6; }
.is-live .event-indicator { background: #429584; }
.map-event-notice .event-notice-body {
  position: absolute; top: 0; right: 56px; width: min(240px, calc(100vw - 84px));
  box-sizing: border-box; padding: 15px; border: 1px solid #ffffffc9; border-radius: 18px;
  background: #edf0f9ed; box-shadow: 0 8px 28px #18283c2b;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transform-origin: calc(100% + 12px) 22px; animation: event-popover-in 180ms ease-out;
}
.event-notice-body::before { content: ""; position: absolute; top: 17px; right: -5px; width: 10px; height: 10px; background: #edf0f9; transform: rotate(45deg); border-radius: 2px; }
.event-notice-body .event-summary-copy { margin-bottom: 10px; }
@keyframes event-popover-in { from { opacity: 0; transform: translateX(5px) scale(.94); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .illustration-map-button { right: 16px; bottom: 76px; }
  .map-event-notice { top: 14px; right: 14px; bottom: auto; width: 44px; }
}
@media (prefers-reduced-motion: reduce) { .map-event-notice .event-notice-body { animation: none; } }

/* Keep the icon rail clear while each event opens to its left. */
.map-event-stack { position: absolute; top: 14px; right: 14px; z-index: 521; display: flex; flex-direction: column; gap: 10px; width: 44px; }
.map-event-stack .map-event-notice { position: relative; top: auto; right: auto; bottom: auto; width: 44px; flex: 0 0 auto; }

/* Multiple events retain a clear icon rail; paging avoids covering navigation. */
.map-event-stack { gap: 20px; }
.map-event-stack[hidden], .event-pager[hidden] { display: none; }
.event-icon-caption { position: absolute; top: 43px; left: 0; width: 44px; text-align: center; font-size: 9px; font-weight: 700; line-height: 15px; color: #3d3652; text-shadow: 0 1px 3px #fff, 0 0 5px #fff; }
.event-pager { display: grid; justify-items: center; gap: 2px; padding: 3px 0; border-radius: 18px; background: #edf0f9ed; box-shadow: 0 3px 14px #18283c24; }
.event-pager button { width: 44px; height: 30px; border: 0; background: transparent; color: #514274; font-size: 20px; cursor: pointer; }
.event-pager button:disabled { opacity: .3; cursor: default; }
.event-pager button:focus-visible { outline: 2px solid #7161a8; border-radius: 12px; }
.event-page-label { font-size: 10px; color: #514274; }
.map-event-stack .event-notice-body::before { display: none; }
.map-event-stack .map-event-notice[open]::after { content: ""; position: absolute; top: 17px; right: 51px; width: 10px; height: 10px; background: #edf0f9; transform: rotate(45deg); border-radius: 2px; pointer-events: none; }
.map-event-notice .event-notice-body { overflow-y: auto; overscroll-behavior: contain; }
.event-notice-body .event-verification { margin-top: 8px; color: #815323; font-size: 10px; }

/* Event-specific illustrated badges, with readable names before opening. */
.map-event-stack { width: 64px; gap: 8px; }
.map-event-stack .map-event-notice { width: 64px; }
.map-event-stack .map-event-notice summary { width: 64px; height: 78px; padding: 4px 3px; box-sizing: border-box; grid-template-rows: 48px 24px; gap: 1px; border-radius: 19px; background: #f3f6faed; }
.event-art-icon { display: block; width: 48px; height: 48px; border-radius: 50%; }
.map-event-stack .event-icon-caption { position: static; width: 58px; white-space: pre-line; font-size: 10px; line-height: 12px; letter-spacing: -.4px; color: #35445c; text-shadow: none; }
.map-event-stack .map-event-notice[open] summary { background: #ded8ecf5; border-color: #9583b6; box-shadow: 0 0 0 2px #ffffffb3, 0 4px 16px #26324b26; }
.map-event-stack .event-indicator { right: 5px; top: 5px; }
.map-event-stack .event-notice-body { right: 76px; width: min(240px, calc(100vw - 106px)); }
.map-event-stack .map-event-notice[open]::after { right: 71px; top: 23px; }
.event-pager { width: 44px; justify-self: center; align-self: center; }

/* Independent map category toggles preserve the map center and zoom. */
button.map-legend-item { border: 0; border-radius: 7px; padding: 6px 3px; margin: -4px 0; background: transparent; color: inherit; font: inherit; cursor: pointer; min-height: 28px; }
button.map-legend-item[aria-pressed="false"] { opacity: .42; text-decoration: line-through; }
button.map-legend-item[aria-pressed="false"] .place-symbol { background: #a9adb0; }
button.map-legend-item:focus-visible { outline: 2px solid #5c6d88; outline-offset: 3px; }
button.map-legend-item:hover { background: #1422390b; }

/* Convex liquid event buttons: the illustration stays sharp below a glass sheen. */
.map-event-stack .map-event-notice summary {
  height: 90px; padding: 0; gap: 3px; grid-template-rows: 61px 26px;
  border: 0; border-radius: 32px; background: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.event-droplet {
  position: relative; display: grid; place-items: center; width: 61px; height: 61px;
  box-sizing: border-box; isolation: isolate;
  border-radius: 48% 52% 49% 51% / 46% 48% 52% 54%;
  border: 1px solid #ffffffb8;
  background: radial-gradient(ellipse at 27% 16%, #ffffffed, transparent 46%),
    radial-gradient(ellipse at 74% 87%, #b4cbe799, transparent 60%),
    linear-gradient(145deg, #eff8ff96, #c8d6ef70 55%, #f5eeffa8);
  box-shadow: inset 2px 3px 5px #ffffffed, inset -3px -5px 8px #8299c06b,
    inset 0 -1px 2px #fff, 0 6px 9px #23385529, 0 1px 2px #21395826;
  backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
  transition: transform 220ms ease, border-radius 300ms ease, box-shadow 250ms ease;
}
.event-droplet .event-art-icon { width: 43px; height: 43px; opacity: .94; }
.event-droplet::before {
  content: ''; position: absolute; z-index: 1; top: 5px; left: 9px; width: 36px; height: 18px;
  border-radius: 50%; transform: rotate(-23deg);
  background: linear-gradient(180deg, #ffffffda, #ffffff08);
  pointer-events: none;
}
.event-droplet::after {
  content: ''; position: absolute; z-index: 1; inset: 2px; border-radius: inherit;
  background: radial-gradient(ellipse at 86% 71%, #ffffffb5, transparent 22%),
    radial-gradient(ellipse at 46% 100%, #ffffffb0, transparent 33%);
  box-shadow: inset 0 0 0 1px #ffffff44; pointer-events: none;
}
.map-event-stack .map-event-notice[open] summary { background: transparent; border: 0; box-shadow: none; }
.map-event-stack .map-event-notice[open] .event-droplet {
  border-color: #fff; border-radius: 44% 56% 48% 52% / 51% 46% 54% 49%;
  box-shadow: inset 2px 3px 5px #fff, inset -3px -5px 8px #8d7bb563,
    0 0 0 2px #a298cf70, 0 7px 15px #55518233;
  animation: event-droplet-settle 480ms ease-out;
}
.map-event-stack .map-event-notice summary:active .event-droplet { transform: scale(.92, .86); }
.map-event-stack .event-icon-caption {
  width: max-content; max-width: 74px; padding: 2px 5px; box-sizing: border-box;
  border-radius: 9px; background: #f4f8fce8; box-shadow: 0 1px 5px #243c521a;
  color: #304159; font-weight: 650; line-height: 11px; pointer-events: none;
}
.map-event-stack .map-event-notice[open] .event-icon-caption { background: #e7e1f5f5; color: #514271; }
.map-event-stack .event-indicator { top: 3px; right: 4px; z-index: 2; box-shadow: 0 1px 3px #2e36532e; }
@media (hover: hover) {
  .map-event-stack .map-event-notice summary:hover .event-droplet { transform: translateY(-2px) scale(1.035, 1.015); }
}
@keyframes event-droplet-settle {
  0% { transform: scale(.88, .92); }
  42% { transform: scale(1.08, .94); }
  72% { transform: scale(.97, 1.04); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .event-droplet { transition: none; }
  .map-event-stack .map-event-notice[open] .event-droplet { animation: none; }
  .map-event-stack .map-event-notice summary:hover .event-droplet,
  .map-event-stack .map-event-notice summary:active .event-droplet { transform: none; }
}

.calendar-launch { display: grid; justify-items: center; gap: 3px; width: 64px; height: 90px; padding: 0; border: 0; background: transparent; cursor: pointer; color: #415879; }
.calendar-date-icon { display: grid; place-items: center; width: 35px; height: 35px; padding-top: 5px; box-sizing: border-box; border: 2px solid #7895b5; border-top: 8px solid #7895b5; border-radius: 8px; background: #ffffffc9; font-size: 21px; font-weight: 750; }
.event-calendar, .footprint-notice { border: 1px solid #ffffffd9; background: #edf3faf5; color: #26374e; border-radius: 24px; box-shadow: 0 18px 65px #142b4940; backdrop-filter: blur(24px); padding: 20px; box-sizing: border-box; }
.event-calendar::backdrop, .footprint-notice::backdrop { background: #1f30431c; }
.event-calendar { position: fixed; margin: 0; left: auto; right: 96px; top: 90px; bottom: auto; width: 360px; max-width: calc(100vw - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; }
.event-calendar header { display: flex; justify-content: space-between; align-items: center; }
.event-calendar h2 { font-size: 19px; margin: 3px 0 12px; }
.event-calendar small { font-size: 11px; color: #69809b; }
.panel-close { border: 0; border-radius: 50%; width: 34px; height: 34px; font-size: 24px; background: #ffffffa8; color: #52627b; cursor: pointer; }
.calendar-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.calendar-nav button { border: 0; border-radius: 10px; background: #fff9; padding: 6px 10px; color: #435775; min-height: 34px; cursor: pointer; }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.calendar-weekdays { font-size: 11px; color: #6f7e92; margin-bottom: 6px; }
.calendar-day { position: relative; height: 36px; border: 0; border-radius: 10px; background: transparent; color: #304259; font-size: 13px; cursor: pointer; padding-bottom: 6px; }
.calendar-day[aria-current] { box-shadow: inset 0 0 0 1px #7a8ca7; font-weight: 750; }
.calendar-day[aria-pressed="true"] { background: #566c8f; color: white; }
.calendar-dots { position: absolute; bottom: 4px; left: 0; right: 0; display: flex; justify-content: center; gap: 3px; }
.calendar-dots i, .calendar-key i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #479c93; }
.calendar-dots .art-dot, .calendar-key i:nth-of-type(2) { background: #b58ad3; }
.calendar-key { font-size: 10px; color: #6b7b90; }
#calendarSelectedDate { font-size: 13px; margin: 14px 0 9px; }
.calendar-events { max-height: 210px; overflow-y: auto; overscroll-behavior: contain; }
.calendar-event { background: #ffffff94; border-radius: 13px; padding: 12px; margin: 0 0 8px; }
.calendar-event a { color: #344f76; font-size: 13px; font-weight: 700; text-decoration: none; }
.calendar-event p, .calendar-empty { font-size: 11px; line-height: 1.5; margin: 4px 0 0; }
.calendar-event .event-verification { color: #98662e; }
.calendar-footnote { font-size: 10px; line-height: 1.5; color: #738196; margin: 10px 0 0; }
.footprint-notice { width: 360px; max-width: calc(100vw - 32px); text-align: center; }
.footprint-notice form { text-align: right; }
.construction-art { font-size: 52px; margin: 0 0 18px; }
.footprint-notice h2 { font-size: 21px; }
.footprint-notice p { line-height: 1.7; font-size: 13px; }
@media (max-width: 640px) {
  .event-calendar { top: auto; right: 0; left: 0; bottom: 0; width: 100%; max-width: none; max-height: 88dvh; border-radius: 24px 24px 0 0; padding: 17px 20px max(18px, env(safe-area-inset-bottom)); }
  .calendar-events { max-height: 170px; }
}
@media (prefers-reduced-motion: no-preference) {
  .event-calendar[open] { animation: event-popover-in 180ms ease-out; }
  @media (max-width: 640px) { .event-calendar[open] { animation: calendar-rise 230ms ease-out; } }
  @keyframes calendar-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
}
.event-calendar h2, .footprint-notice h2 { color: #26374e; }

/* Week-spanning event bars, split only at week boundaries and non-operating days. */
.calendar-days { display: block; }
.calendar-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 0; row-gap: 3px; padding: 3px 0 7px; border-bottom: 1px solid #7186a11c; }
.calendar-week .calendar-day { height: 28px; padding: 0; margin: 0 2px 2px; }
.calendar-event-bar { display: block; min-width: 0; height: 17px; margin: 0 1px; padding: 1px 4px; border: 0; border-radius: 5px; background: var(--event-bar-color); color: #fff; font-family: inherit; font-size: 9px; line-height: 15px; font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.calendar-event-bar.continues-before { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.calendar-event-bar.continues-after { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.calendar-event-bar:hover { filter: brightness(1.1); }
.calendar-event-bar:focus-visible { outline: 2px solid #283b59; outline-offset: 1px; }
.calendar-event.is-highlighted { background: #fff; box-shadow: inset 0 0 0 1px #788cab; }
.event-calendar { width: 420px; }
@media (max-width: 640px) { .event-calendar { width: 100%; } }

/* A quiet slate tint behind all illustrated overlays and map controls. */
.base-map-tone { position: absolute; z-index: -1; pointer-events: none; background: rgba(20, 34, 57, .14); }
/* The tone pane has 512px overscan on each side; keep the vignette at viewport size. */
.base-map-tone::after {
  content: "";
  position: absolute;
  inset: 512px;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(20, 34, 57, 0) 42%,
    rgba(20, 34, 57, .025) 65%,
    rgba(20, 34, 57, .075) 85%,
    rgba(20, 34, 57, .13) 100%);
}

/* Keep the active place and its three nearby destinations in the foreground. */
.map-store-marker .map-dot { transition: opacity 180ms ease, filter 180ms ease; }
body.has-map-popup .map-store-marker:not(.stage-1):not(.neighbor-rank-1):not(.neighbor-rank-2):not(.neighbor-rank-3) .map-dot {
  opacity: .48;
  filter: saturate(.65);
  box-shadow: 0 0 0 1px #14223926;
}
body.has-map-popup .map-store-marker:not(.stage-1):hover .map-dot {
  opacity: 1;
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .map-store-marker .map-dot { transition: none; }
}

/* Admin-only visitor overview inside My account. */
.visitor-stats { margin: 20px 0; padding: 18px; border: 1px solid #d7e2ec; border-radius: 18px; background: #f5f9fc; color: #23364b; }
.visitor-stats[hidden] { display: none; }
.visitor-stats h3 { margin: 0; font-size: 17px; }
.visitor-stats-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 16px 0; }
.visitor-stats-grid > div { display: flex; flex-direction: column; gap: 5px; }
.visitor-stats-grid strong { font-size: 32px; font-variant-numeric: tabular-nums; }
.visitor-stats small, #visitorStatsStatus { font-size: 12px; line-height: 1.6; color: #596a7c; }