/* ============================================================
   Night Cap — Prototype Dashboard
   Dark, neon-accented nightlife theme. Mobile-first.
   ============================================================ */

:root {
  /* Surfaces */
  --bg: 260 32% 6%;
  --bg-elevated: 260 26% 10%;
  --surface: 258 24% 13%;
  --surface-2: 258 20% 17%;
  --border: 258 18% 22%;

  /* Text */
  --text: 260 40% 96%;
  --text-muted: 258 16% 74%;
  --text-faint: 258 14% 64%;

  /* Accents */
  --accent-pink: 330 100% 63%;
  --accent-teal: 168 78% 55%;
  --accent-amber: 40 100% 60%;
  --accent-violet: 262 90% 68%;

  /* Event type colors */
  --c-trivia: 168 78% 55%;
  --c-karaoke: 330 100% 63%;
  --c-live-music: 262 90% 68%;
  --c-comedy: 6 90% 64%;
  --c-bingo: 40 100% 60%;
  --c-game-night: 210 100% 66%;
  --c-sports-watch-party: 142 71% 58%;
  --c-themed-event: 285 85% 68%;
  --c-concerts: 320 85% 62%;
  --c-other: 240 8% 62%;

  --font-display: 'Clash Display', 'General Sans', system-ui, sans-serif;
  --font-body: 'General Sans', system-ui, sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --dialog-radius: 18px;
  --dialog-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  --venue-title-size: 15px;
  --venue-title-weight: 600;

  --footer-h: 30px;
  --bottom-nav-h: 62px;
  --chrome-bottom: calc(var(--footer-h) + var(--bottom-nav-h));
}

* { box-sizing: border-box; }

.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
/* Guard: some components set display:flex/inline-flex/grid on classes that can
   also receive the `hidden` attribute (e.g. .btn--small). Author rules of equal
   specificity beat the UA [hidden] default, so force it explicitly. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }

body {
  background: hsl(var(--bg));
  color: hsl(var(--text));
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: hsl(var(--accent-pink));
  color: #1a0a12;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  z-index: 4200;
  font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; }

button { font-family: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, [role="tab"]:focus-visible {
  outline: 2px solid hsl(var(--accent-teal));
  outline-offset: 3px;
}
input:focus-visible, select:focus-visible { outline: 2px solid hsl(var(--accent-teal)); outline-offset: 1px; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; }

/* ---------- Topbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: hsl(var(--bg-elevated) / 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid hsl(var(--border));
  position: sticky;
  top: 0;
  z-index: 500;
}
.topbar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.brand-mark { color: hsl(var(--accent-pink)); flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.brand-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, hsl(var(--accent-pink)), hsl(var(--accent-violet)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.brand-sub {
  font-size: 11px;
  color: hsl(var(--text-faint));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.topbar__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

@media (max-width: 480px) {
  .topbar { padding: 10px 12px; gap: 8px; }
  .pill { display: none; }
  .brand-sub { display: none; }
}

.pill {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: hsl(var(--surface-2));
  color: hsl(var(--text-muted));
  white-space: nowrap;
}

.btn {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--surface));
  color: hsl(var(--text));
  font-size: 13px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: background .15s, border-color .15s, transform .1s;
}
.btn:hover { background: hsl(var(--surface-2)); }
.btn:active { transform: scale(0.97); }
.btn--ghost { background: transparent; }
.btn--primary {
  background: linear-gradient(90deg, hsl(var(--accent-pink)), hsl(var(--accent-violet)));
  border: none;
  color: #17091a;
  font-weight: 700;
}
.btn--primary:hover { background: linear-gradient(90deg, hsl(var(--accent-pink)), hsl(var(--accent-violet))); filter: brightness(1.08); }
.btn--icon { padding: 6px 10px; }
.filter-badge {
  background: hsl(var(--accent-pink));
  color: #1a0a12;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
}

/* ---------- Global venue search ---------- */
.search-bar-wrap {
  position: sticky;
  top: 57px;
  z-index: 420;
  background: hsl(var(--bg));
  border-bottom: 1px solid hsl(var(--border));
  padding: 10px 16px;
}
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  padding: 9px 14px;
  transition: border-color .15s;
}
.search-bar:focus-within { border-color: hsl(var(--accent-teal)); }
.search-bar__icon { font-size: 14px; color: hsl(var(--text-faint)); flex-shrink: 0; line-height: 1; }
.search-bar__input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: hsl(var(--text));
  font-size: 14px;
  font-family: var(--font-body);
}
.search-bar__input::placeholder { color: hsl(var(--text-faint)); }
.search-bar__clear {
  border: none;
  background: hsl(var(--surface-2));
  color: hsl(var(--text-faint));
  border-radius: 50%;
  width: 22px;
  height: 22px;
  min-height: 0;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
}
.search-bar__clear:hover { color: hsl(var(--text)); background: hsl(var(--border)); }

.search-results {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 100%;
  margin-top: -2px;
  background: hsl(var(--bg-elevated));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px hsl(var(--bg) / 0.6);
  max-height: min(60vh, 420px);
  overflow-y: auto;
  z-index: 430;
}
.search-results[hidden] { display: none; }
.search-results__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid hsl(var(--border));
  background: none;
  color: hsl(var(--text));
  cursor: pointer;
  font-family: var(--font-body);
}
.search-results__item:last-child { border-bottom: none; }
.search-results__item:hover,
.search-results__item:focus-visible,
.search-results__item.is-active {
  background: hsl(var(--accent-pink) / 0.12);
  outline: none;
}
.search-results__name {
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.search-results__meta {
  font-size: 12px;
  color: hsl(var(--text-faint));
  margin-top: 2px;
}
.search-results__empty {
  padding: 16px 14px;
  font-size: 13px;
  color: hsl(var(--text-faint));
  line-height: 1.5;
}
.search-results__empty a { color: hsl(var(--accent-teal)); }

/* ---------- Quick filters ---------- */
.quickfilters {
  display: flex;
  min-width: 0;
  gap: 8px;
  padding: 10px 52px 10px 16px;
  overflow-x: auto;
  scroll-padding-right: 52px;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--bg));
  position: sticky;
  top: 111px;
  z-index: 400;
  scrollbar-width: none;
}
.quickfilters::-webkit-scrollbar { display: none; }

.chip {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--surface));
  color: hsl(var(--text));
  font-size: 13px;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .15s;
}
.chip--quick.is-active {
  background: hsl(var(--accent-pink) / 0.18);
  border-color: hsl(var(--accent-pink));
  color: hsl(var(--accent-pink));
}
.chip--clear { margin-left: auto; color: hsl(var(--text-faint)); }
.chip:hover { border-color: hsl(var(--accent-pink) / 0.6); }

/* ---------- Floating filter button (overlays map/list, always reachable) ---------- */
.floating-filter-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  background: hsl(var(--bg-elevated) / 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid hsl(var(--accent-pink) / 0.55);
  color: hsl(var(--text));
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 999px;
  min-height: 44px;
  box-shadow: 0 8px 24px hsl(var(--bg) / 0.4);
  transition: background .15s, border-color .15s, transform .1s;
}
.floating-filter-btn:hover { background: hsl(var(--accent-pink) / 0.16); border-color: hsl(var(--accent-pink)); }
.floating-filter-btn:active { transform: scale(0.97); }

/* ---------- Map-area list filter (Zillow/Airbnb-style "search this area"), floating pill ---------- */
.area-filter-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 78px;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
.area-filter-pill[hidden] { display: none; }
.chip--area {
  background: hsl(var(--bg-elevated) / 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px hsl(var(--bg) / 0.4);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.chip--area.is-active {
  background: hsl(var(--accent-teal) / 0.22);
  border-color: hsl(var(--accent-teal));
  color: hsl(var(--accent-teal));
}
.area-filter-bar__hint {
  font-size: 11.5px;
  color: hsl(var(--text-faint));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  background: hsl(var(--bg-elevated) / 0.85);
  backdrop-filter: blur(6px);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.area-filter-bar__hint[hidden] { display: none; }
.empty-state__action { margin-top: 10px; }
@media (max-width: 480px) {
  .area-filter-pill { right: 68px; }
  .floating-filter-btn { padding: 10px 12px; }
}

/* ---------- Filter drawer ---------- */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 900;
}
.filter-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: min(380px, 100%);
  background: hsl(var(--bg-elevated));
  border-left: 1px solid hsl(var(--border));
  z-index: 950;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .25s ease;
}
.filter-drawer.is-open { transform: translateX(0); }
.filter-drawer__inner { padding: 16px; padding-bottom: 90px; }
.filter-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.filter-group { margin-bottom: 20px; }
.filter-group h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--text-faint));
  margin-bottom: 10px;
  font-weight: 600;
}
.chip-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-grid .chip { font-size: 12.5px; padding: 6px 11px; }
.chip-grid .chip.is-active {
  background: hsl(var(--accent-teal) / 0.18);
  border-color: hsl(var(--accent-teal));
  color: hsl(var(--accent-teal));
}

/* ---------- Game-type filter chips (icon + label) ---------- */
.chip-grid--icons .chip--icon { display: inline-flex; align-items: center; gap: 6px; }
.chip__icon { display: inline-flex; width: 15px; height: 15px; flex-shrink: 0; }
.chip__icon svg { width: 100%; height: 100%; display: block; }

/* "?" info button next to the "Games on site" filter heading, opens the icon legend modal */
.filter-group h3 { display: flex; align-items: center; gap: 6px; justify-content: flex-start; }
.filter-group__info-btn {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid hsl(var(--text-faint));
  color: hsl(var(--text-faint));
  background: none;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  padding: 0;
}
.filter-group__info-btn:hover { border-color: hsl(var(--accent-teal)); color: hsl(var(--accent-teal)); }

/* ---------- Game icons (map popup / list card / detail sheet, and legend) ---------- */
.game-icons-row { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.game-icon { display: inline-flex; width: 15px; height: 15px; color: hsl(var(--text-faint)); flex-shrink: 0; cursor: default; }
.game-icon svg { width: 100%; height: 100%; display: block; }
.game-icons-row:hover .game-icon,
.game-icon:hover { color: hsl(var(--accent-teal)); }
.game-icon--lg { width: 26px; height: 26px; color: hsl(var(--accent-teal)); }

.detail-games-grid { display: flex; flex-direction: column; gap: 12px; }
.detail-game-row { display: flex; align-items: flex-start; gap: 10px; }
.detail-game-row__label { font-size: 13px; font-weight: 600; color: hsl(var(--text)); margin-bottom: 2px; }

.game-legend-grid { display: flex; flex-direction: column; gap: 14px; }
.game-legend-row { display: flex; align-items: flex-start; gap: 12px; }
.game-legend-row__label { font-size: 13.5px; font-weight: 600; color: hsl(var(--text)); }
.game-legend-row__desc { font-size: 12px; color: hsl(var(--text-faint)); margin-top: 1px; line-height: 1.45; }
.toggle-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: hsl(var(--text));
  padding: 7px 0;
  cursor: pointer;
}
.toggle-row input { width: 16px; height: 16px; accent-color: hsl(var(--accent-pink)); }

.filter-drawer__footer {
  position: sticky;
  bottom: 0;
  padding: 10px 0 4px;
  background: hsl(var(--bg-elevated));
}
.filter-drawer__live-count {
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: hsl(var(--accent-teal));
  padding: 6px 0;
  margin-bottom: 6px;
  background: hsl(var(--accent-teal) / 0.1);
  border: 1px solid hsl(var(--accent-teal) / 0.3);
  border-radius: var(--radius-sm);
}
.filter-drawer__footer-row { display: flex; gap: 8px; }
.filter-drawer__footer-row .btn { flex: 1; text-align: center; }

/* ---------- Mode view wrappers (Discover / Build a Night / Trending / Options) ---------- */
#discoverView, #crawlView, #trendingView, #optionsView {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#discoverView[hidden], #crawlView[hidden], #trendingView[hidden], #optionsView[hidden] {
  display: none;
}

/* ---------- Layout (Map / List tabs, mutually exclusive) ---------- */
.layout {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

.map-pane, .list-pane {
  display: none;
  flex: 1;
  min-height: 0;
}
.map-pane.is-active, .list-pane.is-active { display: flex; }

.map-pane {
  position: relative;
  flex-direction: column;
  /* Leaflet's internal panes use z-index up to 700-800 (marker/tooltip/popup panes),
     which would otherwise paint over our floating filter button/area pill (z-index 55-60)
     since #map has no z-index of its own to contain them. Giving .map-pane an explicit
     z-index traps all of Leaflet's internal stacking within this box. */
  z-index: 1;
}
#map { position: absolute; inset: 0; background: hsl(var(--surface)); }

.legend {
  position: absolute;
  left: 8px;
  bottom: calc(8px + var(--chrome-bottom));
  background: hsl(var(--bg-elevated) / 0.92);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  padding: 8px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  max-width: calc(100% - 16px);
  z-index: 40;
  font-size: 10.5px;
  color: hsl(var(--text-muted));
  opacity: 1;
  transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease;
}
.legend.is-hidden {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}
.legend__item { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot--trivia { background: hsl(var(--c-trivia)); }
.dot--karaoke { background: hsl(var(--c-karaoke)); }
.dot--live-music { background: hsl(var(--c-live-music)); }
.dot--comedy { background: hsl(var(--c-comedy)); }
.dot--bingo { background: hsl(var(--c-bingo)); }
.dot--game-night { background: hsl(var(--c-game-night)); }
.dot--sports-watch-party { background: hsl(var(--c-sports-watch-party)); }
.dot--themed-event { background: hsl(var(--c-themed-event)); }
.dot--other { background: hsl(var(--c-other)); }
.dot--live { background: #ff4d4f; box-shadow: 0 0 0 2px rgba(255,77,79,0.25); }

.list-pane {
  flex-direction: column;
}

.list-pane__header {
  padding: 10px 14px 0;
  border-bottom: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tabbar { display: flex; gap: 4px; overflow-x: auto; }
.list-pane__filter-slot { display: flex; align-items: center; flex-shrink: 0; padding-bottom: 8px; }

/* When docked inline in the list header (instead of floating over the map),
   the filter button drops its absolute position/shadow and sits flush. */
.floating-filter-btn--docked {
  position: static;
  top: auto; right: auto;
  min-height: 36px;
  padding: 7px 12px;
  font-size: 12.5px;
  box-shadow: none;
  backdrop-filter: none;
}
.tab {
  border: none; background: none; color: hsl(var(--text-faint));
  font-size: 13px; font-weight: 600; padding: 8px 10px;
  border-bottom: 2px solid transparent;
}
.tab.is-active { color: hsl(var(--accent-teal)); border-color: hsl(var(--accent-teal)); }

.list-pane__body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px calc(24px + var(--chrome-bottom));
}

.day-heading {
  font-family: var(--font-display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--accent-teal));
  margin: 18px 0 8px;
  padding-top: 4px;
  border-top: 1px solid hsl(var(--border));
}
.day-heading:first-child { border-top: none; margin-top: 4px; }

/* ---------- Event card ---------- */
.event-card {
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  padding: 12px 13px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.event-card:hover { border-color: hsl(var(--accent-pink) / 0.5); }
.event-card:active { transform: scale(0.99); }

.event-card__top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
}
.event-card__venue {
  font-family: var(--font-display);
  font-weight: var(--venue-title-weight);
  font-size: var(--venue-title-size);
  color: hsl(var(--text));
}
.event-card__city { font-size: 12px; color: hsl(var(--text-faint)); margin-top: 1px; }
.event-card__count {
  font-size: 11px;
  font-weight: 700;
  color: hsl(var(--accent-teal));
  background: hsl(var(--accent-teal) / 0.12);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.event-card__meta {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.tag {
  font-size: 11px;
  cursor: default;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.tag--time { background: hsl(var(--surface-2)); color: hsl(var(--text-muted)); }
.tag--verified { background: hsl(142 71% 58% / 0.18); color: hsl(142 71% 62%); }
.tag--verified-month { background: hsl(var(--accent-amber) / 0.18); color: hsl(var(--accent-amber)); }
.tag--unconfirmed { background: hsl(var(--c-other) / 0.2); color: hsl(var(--c-other)); }

.etype-tag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: capitalize; }
.etype-tag--trivia { background: hsl(var(--c-trivia) / 0.18); color: hsl(var(--c-trivia)); }
.etype-tag--karaoke { background: hsl(var(--c-karaoke) / 0.18); color: hsl(var(--c-karaoke)); }
.etype-tag--live-music { background: hsl(var(--c-live-music) / 0.2); color: hsl(var(--c-live-music)); }
.etype-tag--comedy { background: hsl(var(--c-comedy) / 0.18); color: hsl(var(--c-comedy)); }
.etype-tag--bingo { background: hsl(var(--c-bingo) / 0.18); color: hsl(var(--c-bingo)); }
.etype-tag--game-night { background: hsl(var(--c-game-night) / 0.18); color: hsl(var(--c-game-night)); }
.etype-tag--sports-watch-party { background: hsl(var(--c-sports-watch-party) / 0.18); color: hsl(var(--c-sports-watch-party)); }
.etype-tag--themed-event { background: hsl(var(--c-themed-event) / 0.18); color: hsl(var(--c-themed-event)); }
.etype-tag--concerts { background: hsl(var(--c-concerts) / 0.18); color: hsl(var(--c-concerts)); }
.etype-tag--other { background: hsl(var(--c-other) / 0.18); color: hsl(var(--c-other)); }

.empty-state {
  text-align: center;
  color: hsl(var(--text-faint));
  padding: 60px 20px;
  font-size: 14px;
}
.empty-state strong { display: block; color: hsl(var(--text-muted)); font-size: 16px; margin-bottom: 6px; font-family: var(--font-display); }

/* ---------- Leaflet marker/popup theming ---------- */
.leaflet-container { background: hsl(var(--surface)) !important; font-family: var(--font-body); }
.leaflet-control-attribution { background: hsl(var(--bg-elevated) / 0.82) !important; color: hsl(var(--text-muted)) !important; }
.leaflet-control-attribution a { color: hsl(var(--accent-teal)) !important; }
.pad-pin {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.35), 0 0 8px currentColor;
}
.leaflet-popup-content-wrapper {
  background: hsl(var(--bg-elevated));
  color: hsl(var(--text));
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--border));
}
.leaflet-popup-tip { background: hsl(var(--bg-elevated)); }
.leaflet-popup-content { margin: 12px 14px; font-size: 13px; }
.popup-title { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; margin-bottom: 4px; }
.popup-line { color: hsl(var(--text-muted)); margin-bottom: 2px; }
.popup-link { color: hsl(var(--accent-teal)); text-decoration: none; font-weight: 600; background: none; border: 0; padding: 0; }
.marker-cluster-custom {
  background: hsl(var(--accent-pink) / 0.85);
  color: #1a0a12;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
  border: 2px solid rgba(255,255,255,0.6);
}

/* ---------- Detail sheet (venue detail) ---------- */
.detail-sheet {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.detail-sheet { opacity: 0; transition: opacity .2s ease; }
.detail-sheet.is-open { opacity: 1; }
.detail-sheet[hidden] { display: none; }
.detail-sheet__inner { transform: translateY(18px); transition: transform .2s ease; }
.detail-sheet.is-open .detail-sheet__inner { transform: translateY(0); }
@media (min-width: 700px) {
  .detail-sheet { align-items: center; }
}
.detail-sheet__inner {
  background: hsl(var(--bg-elevated));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  overflow-y: auto;
  padding: 22px 20px 28px;
  position: relative;
}
@media (min-width: 700px) {
  .detail-sheet__inner { border-radius: var(--radius-lg); max-height: 80vh; }
}
.detail-close {
  position: absolute; top: 14px; right: 14px;
  background: hsl(var(--surface-2)); border: none; color: hsl(var(--text));
  width: 44px; height: 44px; border-radius: 50%; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
}
.detail-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-bottom: 2px; padding-right: 34px; }
.detail-sub { color: hsl(var(--text-faint)); font-size: 13px; margin-bottom: 14px; }
.detail-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.detail-section { margin-bottom: 16px; }
.detail-section h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: hsl(var(--text-faint)); margin-bottom: 8px; font-weight: 700;
}
.detail-event-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid hsl(var(--border));
  font-size: 13.5px;
}
.detail-event-row:last-child { border-bottom: none; }
.detail-links { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-links a {
  color: hsl(var(--accent-teal)); text-decoration: none; font-size: 13.5px; font-weight: 700;
  border: 1px solid hsl(var(--accent-teal) / 0.5); background: hsl(var(--accent-teal) / 0.1);
  padding: 9px 14px; border-radius: 999px; min-height: 44px;
  display: inline-flex; align-items: center; transition: background .15s, border-color .15s;
}
.detail-links a:hover { background: hsl(var(--accent-teal) / 0.2); border-color: hsl(var(--accent-teal)); }

/* Per-event "View source" pill — credits the venue/listing site the event data came from */
.source-link-btn {
  color: hsl(var(--accent-teal)) !important;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid hsl(var(--accent-teal) / 0.5);
  background: hsl(var(--accent-teal) / 0.1);
  padding: 8px 12px;
  border-radius: 999px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.source-link-btn:hover { background: hsl(var(--accent-teal) / 0.22); border-color: hsl(var(--accent-teal)); }
.detail-note { font-size: 12.5px; color: hsl(var(--text-muted)); line-height: 1.55; }

/* Verbatim quote pulled directly from the source page for each event — the credibility anchor of the app */
.detail-source-quote {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-left: 3px solid hsl(var(--accent-teal) / 0.6);
  background: hsl(var(--accent-teal) / 0.06);
  border-radius: 4px;
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
  color: hsl(var(--text-secondary, var(--text-muted)));
}
.detail-source-quote footer {
  margin-top: 4px;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: hsl(var(--text-faint));
}
.detail-source-quote footer a {
  color: hsl(var(--accent-teal));
  text-decoration: none;
}
.detail-source-quote footer a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
.app-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--footer-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px env(safe-area-inset-bottom);
  font-size: 10.5px;
  color: hsl(var(--text-faint));
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--bg-elevated) / 0.85);
  backdrop-filter: blur(8px);
  z-index: 300;
}
.app-footer__legal {
  flex-shrink: 0;
  margin: 0;
  white-space: nowrap;
}
.app-footer__legal a { color: hsl(var(--text-faint)); text-decoration: underline; display: inline-block; padding: 14px 4px; margin: -14px -4px; }
.app-footer__note {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}

/* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: hsl(var(--surface-2)); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Shuffle tab ---------- */
.shuffle-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px 32px;
  gap: 14px;
}
.shuffle-intro {
  margin: 0;
  color: hsl(var(--text-muted));
  font-size: 14px;
  max-width: 360px;
}
.shuffle-intro strong { color: hsl(var(--accent-teal)); }
.shuffle-tip {
  margin: -4px 0 0;
  font-size: 12.5px;
  color: hsl(var(--text-faint));
  max-width: 340px;
}
.shuffle-tip strong { color: hsl(var(--text-muted)); }

.shuffle-reel {
  width: 100%;
  max-width: 340px;
  min-height: 92px;
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border));
  background: linear-gradient(155deg, hsl(var(--surface)) 0%, hsl(var(--bg-elevated)) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.shuffle-reel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  background: linear-gradient(120deg, hsl(var(--accent-pink) / 0.5), hsl(var(--accent-violet) / 0.5), hsl(var(--accent-teal) / 0.5)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.6;
  pointer-events: none;
}
.shuffle-reel.is-spinning { animation: shuffle-pulse 0.3s ease-in-out infinite; }
@keyframes shuffle-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}
@media (prefers-reduced-motion: reduce) {
  .shuffle-reel.is-spinning { animation: none; }
}
.shuffle-reel__placeholder { color: hsl(var(--text-faint)); font-size: 14px; }
.shuffle-reel__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: hsl(var(--text));
}
.shuffle-reel__type {
  font-size: 12.5px;
  color: hsl(var(--accent-teal));
}

.shuffle-progress { display: flex; gap: 6px; }
.shuffle-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: hsl(var(--surface-2));
  border: 1px solid hsl(var(--border));
}
.shuffle-dot.is-used { background: hsl(var(--accent-pink)); border-color: hsl(var(--accent-pink)); }

.shuffle-actions { display: flex; gap: 10px; align-items: center; }
.btn--spin {
  background: linear-gradient(120deg, hsl(var(--accent-pink)), hsl(var(--accent-violet)));
  color: #1a0a12;
  font-weight: 600;
  border: none;
  padding: 12px 26px;
  border-radius: var(--radius-md);
  font-size: 14.5px;
}
.btn--spin:hover {
  background: linear-gradient(120deg, hsl(var(--accent-pink)), hsl(var(--accent-violet)));
  filter: brightness(1.08);
}
.btn--spin:disabled { opacity: 0.55; cursor: default; filter: none; }

.shuffle-result { width: 100%; max-width: 360px; }
.shuffle-result__card {
  border: 1px solid hsl(var(--accent-teal) / 0.45);
  background: hsl(var(--accent-teal) / 0.08);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shuffle-result__details {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 13px;
  color: hsl(var(--accent-teal));
}

/* ============================================================
   Bottom tab bar (Map / Build a Night / List) — primary nav
   ============================================================ */
.bottom-tabbar {
  position: fixed;
  left: 0; right: 0;
  bottom: var(--footer-h);
  height: var(--bottom-nav-h);
  z-index: 1000;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  padding: 0;
  padding-left: max(env(safe-area-inset-left), 0px);
  padding-right: max(env(safe-area-inset-right), 0px);
  background: hsl(var(--bg-elevated) / 0.96);
  backdrop-filter: blur(14px);
  border-top: 1px solid hsl(var(--border));
  transition: transform .2s ease, opacity .2s ease;
}
/* Hidden while the filter drawer is open, so it can't overlap the drawer's "Show results" button */
.bottom-tabbar.is-hidden {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}
/* Every tab occupies an equal-width column (25%) so the bar reads as one
   balanced row: no tab floats above the others, and each sits flush against
   its own edge of the screen (Map at the true left corner, Options at the
   true right corner) instead of being inset by side padding. */
.bottom-tab {
  background: transparent;
  border: none;
  color: hsl(var(--text-faint));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 4px;
  min-height: 100%;
  transition: color 0.15s, background 0.15s;
}
.bottom-tab__icon { width: 20px; height: 20px; }
.bottom-tab:hover { color: hsl(var(--text)); }
.bottom-tab.is-active {
  color: hsl(var(--accent-teal));
  background: hsl(var(--accent-teal) / 0.12);
}
/* The Build tab keeps its own visual weight through color and a badge icon,
   not through size or position — so it can't overlap or crowd its neighbors
   while still reading as the featured action in the row. */
.bottom-tab--plus { color: hsl(var(--text-faint)); }
.bottom-tab--plus:hover { color: hsl(var(--text)); }
.bottom-tab--plus .bottom-tab__badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, hsl(var(--accent-pink)), hsl(var(--accent-violet)));
  color: #17091a;
}
.bottom-tab--plus .bottom-tab__badge svg { width: 15px; height: 15px; }
.bottom-tab--plus.is-active {
  color: hsl(var(--accent-pink));
  background: transparent;
}
.bottom-tab--plus.is-active .bottom-tab__badge {
  box-shadow: 0 0 0 3px hsl(var(--accent-teal) / 0.55);
}

/* ---------- Trending icon shortcut in topbar ---------- */
.btn--icon.mode-tab.is-active {
  background: hsl(var(--accent-teal) / 0.18);
  border-color: hsl(var(--accent-teal));
}

/* ============================================================
   Event card additions: price, cover status, happy hour, vibes
   ============================================================ */
.event-card__price { color: hsl(var(--accent-amber)); font-weight: 500; font-size: 12.5px; }
.event-card__vibes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tag--vibe { background: hsl(var(--accent-violet) / 0.16); color: hsl(var(--accent-violet)); }
.tag--free { background: hsl(142 71% 58% / 0.18); color: hsl(142 71% 62%); }
.tag--cover { background: hsl(var(--accent-amber) / 0.16); color: hsl(var(--accent-amber)); }
.tag--happy { background: hsl(var(--accent-pink) / 0.16); color: hsl(var(--accent-pink)); }
.tag--demand { background: hsl(6 90% 64% / 0.16); color: hsl(6 90% 68%); }

/* ============================================================
   Detail drawer additions
   ============================================================ */
.detail-badges--vibe { margin-top: -10px; margin-bottom: 16px; }
.detail-kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 5px 0;
  border-bottom: 1px solid hsl(var(--border) / 0.6);
}
.detail-kv:last-child { border-bottom: none; }
.detail-kv span:first-child { color: hsl(var(--text-faint)); }
.detail-kv span:last-child { color: hsl(var(--text)); text-align: right; max-width: 60%; }
.detail-note--faint { color: hsl(var(--text-faint)); font-size: 11.5px; margin-top: 8px; }
.detail-note--warn {
  margin-top: 6px;
  padding: 6px 9px;
  background: hsl(6 90% 64% / 0.12);
  color: hsl(6 90% 72%);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.detail-section--demand {
  background: hsl(var(--surface-2));
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.demand-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.detail-section--verify {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid hsl(var(--border));
}
.detail-verify-date { font-size: 11.5px; color: hsl(var(--text-faint)); }

/* ============================================================
   Crawl Builder ("Build a Night")
   ============================================================ */
.crawl-wrap {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 16px calc(48px + var(--chrome-bottom));
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.crawl-intro h2 {
  font-family: var(--font-display);
  font-size: 20px;
  margin-bottom: 6px;
}
.crawl-intro p { color: hsl(var(--text-muted)); font-size: 13.5px; line-height: 1.55; margin-bottom: 20px; }

.crawl-form {
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 20px;
}
.crawl-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.crawl-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: hsl(var(--text-muted));
  font-weight: 500;
}
.crawl-field[hidden] { display: none; }
.crawl-field--full { margin-bottom: 16px; }
.crawl-field__label { display: block; margin-bottom: 8px; }
.crawl-field input,
.crawl-field select {
  width: 100%;
  max-width: 100%;
  background: hsl(var(--surface-2));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  color: hsl(var(--text));
  padding: 9px 10px;
  font-size: 13.5px;
  font-family: var(--font-body);
}
.crawl-field input:focus,
.crawl-field select:focus { outline: 2px solid hsl(var(--accent-teal) / 0.6); outline-offset: 1px; }
.crawl-form__actions { display: flex; justify-content: flex-end; }

.crawl-result { margin-top: 4px; }
.crawl-empty {
  padding: 20px;
  text-align: center;
  color: hsl(var(--text-faint));
  background: hsl(var(--surface));
  border: 1px dashed hsl(var(--border));
  border-radius: var(--radius-md);
  font-size: 13.5px;
}
.crawl-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.crawl-summary__item {
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.crawl-summary__item span { font-size: 11px; color: hsl(var(--text-faint)); }
.crawl-summary__item strong { font-size: 15px; }

.crawl-route { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; }
.crawl-stop {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid hsl(var(--border) / 0.6);
}
.crawl-stop:last-child { border-bottom: none; }
.crawl-stop__order {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: hsl(var(--accent-teal) / 0.18);
  color: hsl(var(--accent-teal));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
}
.crawl-stop__body { flex: 1; min-width: 0; }
.crawl-stop__role {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsl(var(--accent-violet));
  font-weight: 600;
  margin-bottom: 2px;
}
.crawl-stop__venue { font-weight: 600; font-size: 14.5px; }
.crawl-stop__meta { font-size: 12.5px; color: hsl(var(--text-muted)); margin-top: 2px; }
.crawl-stop__day { color: hsl(var(--text-muted)); }
.crawl-stop__day--flag {
  color: hsl(6 90% 68%);
  font-weight: 600;
}
.crawl-stop__travel { font-size: 11.5px; color: hsl(var(--text-faint)); margin-top: 4px; }

.crawl-disclaimer {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: hsl(var(--accent-amber) / 0.1);
  border: 1px solid hsl(var(--accent-amber) / 0.35);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 12.5px;
  line-height: 1.5;
  color: hsl(var(--text-muted));
}
.crawl-disclaimer__icon { flex-shrink: 0; font-size: 15px; line-height: 1.4; }
.crawl-disclaimer strong { color: hsl(var(--text)); }

.crawl-saved {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid hsl(var(--border));
}
.crawl-saved h3 { font-size: 14px; margin-bottom: 10px; color: hsl(var(--text-muted)); }
.crawl-saved__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  padding: 8px 10px;
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  color: hsl(var(--text-muted));
}
.crawl-saved__info { flex: 1; min-width: 0; }
.crawl-saved__actions { display: flex; gap: 6px; flex-shrink: 0; }

.btn--small { padding: 5px 10px; font-size: 12px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

.crawl-share-link {
  margin-top: 14px;
  padding: 14px;
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--accent-pink) / 0.45);
  border-radius: var(--dialog-radius);
  box-shadow: 0 12px 32px hsl(var(--bg) / 0.22);
}
.crawl-share-link__title { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin-bottom: 3px; }
.crawl-share-link__copy { color: hsl(var(--text-muted)); font-size: 12.5px; line-height: 1.45; margin: 0 0 12px; }
.crawl-share-row { display: flex; gap: 8px; margin-top: 6px; }
.crawl-share-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--surface-2));
  color: hsl(var(--text));
  font-size: 12.5px;
}
.crawl-share-actions { display: flex; justify-content: flex-end; margin-top: 10px; }

.crawl-shared__banner {
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--accent-teal));
  margin-bottom: 14px;
}
#crawlSharedExitBtn { margin-top: 18px; }

/* ---------- Shared crawl party / RSVP ---------- */
.crawl-party {
  margin-top: 18px;
  padding: 16px;
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border));
  border-radius: var(--dialog-radius);
  box-shadow: var(--dialog-shadow);
}
.crawl-party__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid hsl(var(--border));
}
.crawl-party__header h3 { font-size: 16px; }
.crawl-party__header p { margin: 2px 0 0; color: hsl(var(--text-faint)); font-size: 12px; }
.crawl-party__live {
  flex-shrink: 0;
  color: hsl(var(--accent-teal));
  background: hsl(var(--accent-teal) / 0.12);
  border: 1px solid hsl(var(--accent-teal) / 0.28);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
}
.crawl-party__members {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 14px 0 2px;
  margin: 0;
}
.crawl-party__member {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 4px 10px 4px 5px;
  color: hsl(var(--text));
  background: hsl(var(--surface-2));
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
}
.crawl-party__initials {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  color: #17091a;
  background: linear-gradient(135deg, hsl(var(--accent-pink)), hsl(var(--accent-violet)));
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}
.crawl-party__empty { width: 100%; color: hsl(var(--text-faint)); font-size: 12.5px; line-height: 1.45; }
.crawl-party__copy, .crawl-party__status { margin: 14px 0 10px; color: hsl(var(--text-muted)); font-size: 13px; line-height: 1.45; }
.crawl-party__status {
  padding: 10px 12px;
  color: hsl(var(--accent-teal));
  background: hsl(var(--accent-teal) / 0.1);
  border: 1px solid hsl(var(--accent-teal) / 0.28);
  border-radius: var(--radius-sm);
}
.crawl-party__join { display: flex; flex-direction: column; gap: 10px; }
.crawl-party__join .crawl-field { color: hsl(var(--text-muted)); }
.crawl-party__join .btn { align-self: flex-start; }
.crawl-party__error {
  padding: 8px 10px;
  color: hsl(6 90% 72%);
  background: hsl(6 90% 64% / 0.14);
  border: 1px solid hsl(6 90% 64% / 0.3);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.crawl-party__error[hidden] { display: none; }

@media (min-width: 700px) {
  .crawl-form__grid { grid-template-columns: repeat(2, 1fr); }
  .crawl-summary { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
  .crawl-share-row { flex-direction: column; }
  .crawl-share-row .btn, .crawl-share-actions .btn, .crawl-party__join .btn { width: 100%; }
  .crawl-party__header { flex-direction: column; }
  .crawl-party__live { align-self: flex-start; }
}

/* ============================================================
   Accounts, Trending tab, Map coverage-gap markers
   ============================================================ */

/* ---------- Account button ---------- */
.btn--account {
  background: hsl(var(--surface-2));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--text));
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 160px;
  min-height: 44px;
}
.btn--account span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn--account:hover { background: hsl(var(--accent-pink) / 0.16); border-color: hsl(var(--accent-pink) / 0.7); color: hsl(var(--accent-pink)); }

/* ---------- Account modal ---------- */
.account-modal {
  position: fixed; inset: 0; z-index: 1300;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.account-modal[hidden] { display: none; }
.account-modal__backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.6);
}
.account-modal__panel {
  position: relative;
  background: hsl(var(--bg-elevated));
  border: 1px solid hsl(var(--border));
  border-radius: var(--dialog-radius);
  box-shadow: var(--dialog-shadow);
  width: 100%;
  max-width: 380px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px 22px 22px;
}
.account-modal__title { font-size: 19px; margin-bottom: 4px; padding-right: 30px; }
.account-modal__hint { color: hsl(var(--text-faint)); font-size: 13px; margin: 0 0 18px; line-height: 1.5; }
.account-modal__panel--wide { max-width: 480px; }
.account-modal__error {
  background: hsl(6 90% 64% / 0.14);
  color: hsl(6 90% 72%);
  border: 1px solid hsl(6 90% 64% / 0.3);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 12.5px;
  margin-bottom: 14px;
  line-height: 1.45;
}
.account-tabs {
  display: flex;
  gap: 4px;
  background: hsl(var(--surface));
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 18px;
}
.account-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: hsl(var(--text-muted));
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 999px;
}
.account-tab.is-active {
  background: hsl(var(--accent-pink));
  color: #1a0a12;
}
.account-field__optional { color: hsl(var(--text-faint)); font-weight: 400; font-size: 11.5px; }
.account-divider {
  display: flex; align-items: center; gap: 10px;
  color: hsl(var(--text-faint)); font-size: 11.5px;
  margin: 18px 0 14px;
}
.account-divider::before, .account-divider::after {
  content: ""; flex: 1; height: 1px; background: hsl(var(--border));
}
.account-oauth { display: flex; flex-direction: column; gap: 8px; }
.btn--oauth {
  width: 100%;
  justify-content: space-between;
  display: flex;
  align-items: center;
  border: 1px solid hsl(var(--border));
  font-size: 13px;
}
.btn--oauth:disabled { opacity: 0.55; cursor: not-allowed; }
.account-oauth__soon {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsl(var(--text-faint));
  background: hsl(var(--surface-2));
  padding: 2px 7px;
  border-radius: 999px;
}
#authForm .crawl-field { margin-bottom: 14px; }
.account-password-help {
  color: hsl(var(--text-faint));
  font-size: 11.5px;
  margin: -8px 0 10px;
  line-height: 1.4;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.account-password-checklist {
  list-style: none;
  margin: -2px 0 14px;
  padding: 10px 12px;
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.account-password-checklist[hidden] { display: none; }
.account-password-checklist li {
  font-size: 13px;
  line-height: 1.4;
  min-height: 20px;
  color: hsl(var(--text-muted));
  display: flex;
  align-items: center;
  gap: 8px;
}
.account-password-checklist__icon {
  flex-shrink: 0;
  width: 14px;
  display: inline-flex;
  justify-content: center;
}
.account-password-checklist__icon::before {
  content: "○";
  color: hsl(var(--text-faint));
  font-size: 13px;
}
.account-password-checklist li.is-met {
  color: hsl(150 70% 68%);
}
.account-password-checklist li.is-met .account-password-checklist__icon::before {
  content: "✓";
  color: hsl(150 70% 62%);
  font-weight: 700;
}

.announcement-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: hsl(var(--accent-pink) / 0.16);
  border-bottom: 1px solid hsl(var(--accent-pink) / 0.35);
  color: hsl(var(--text));
  font-size: 13px;
  line-height: 1.4;
  padding: 10px 44px 10px 16px;
  position: relative;
  text-align: center;
}
.announcement-banner[hidden] { display: none; }
.announcement-banner__dismiss {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: hsl(var(--text-muted));
  font-size: 15px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
}
.announcement-banner__dismiss:hover { color: hsl(var(--text)); }
.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: hsl(var(--accent-teal));
  font-weight: 600;
  font-size: inherit;
  text-decoration: underline;
}

/* ---------- Trending tab ---------- */
.trending-wrap {
  padding: 18px 16px calc(48px + var(--chrome-bottom));
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.trending-section { margin-top: 30px; }
.trending-section h3 { font-size: 17px; margin-bottom: 4px; }
.trending-section__sub { color: hsl(var(--text-faint)); font-size: 12.5px; margin: 0 0 14px; }
.trending-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 640px) {
  .trending-grid { grid-template-columns: repeat(2, 1fr); }
}
.trending-card {
  text-align: left;
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  padding: 14px;
  color: hsl(var(--text));
  display: flex;
  flex-direction: column;
  gap: 6px;
}
button.trending-card:hover { border-color: hsl(var(--accent-teal) / 0.5); }
.trending-card--crawl { gap: 8px; }
.trending-card__name { font-family: var(--font-display); font-weight: var(--venue-title-weight); font-size: var(--venue-title-size); }
.trending-card .btn { text-decoration: none; align-self: flex-start; }
.trending-card__meta { color: hsl(var(--text-faint)); font-size: 12px; }
.trending-card__vibes { display: flex; flex-wrap: wrap; gap: 5px; }
.trending-card__count { color: hsl(var(--accent-teal)); font-size: 12px; font-weight: 600; }
.trending-grid--crawls { grid-template-columns: 1fr; }
.trending-empty {
  grid-column: 1 / -1;
  background: hsl(var(--surface));
  border: 1px dashed hsl(var(--border));
  border-radius: var(--radius-md);
  padding: 22px 18px;
  color: hsl(var(--text-muted));
  font-size: 13.5px;
  line-height: 1.55;
  text-align: center;
}
.trending-loading {
  grid-column: 1 / -1;
  color: hsl(var(--text-faint));
  font-size: 13px;
  padding: 16px 0;
}

/* ---------- Map coverage-gap pins ---------- */
.pad-pin--coverage {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: hsl(258 12% 48% / 0.65);
  border: 1px solid hsl(258 12% 65% / 0.5);
}
.popup-line--coverage {
  color: hsl(var(--accent-teal));
  font-weight: 600;
  margin-top: 4px;
}

/* PWA install banner */
.install-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + var(--chrome-bottom, 0px));
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: hsl(var(--bg-elevated));
  border: 1px solid hsl(var(--border));
  border-radius: var(--dialog-radius);
  padding: 12px 14px;
  box-shadow: var(--dialog-shadow);
  max-width: 480px;
  margin: 0 auto;
}
.install-banner[hidden] { display: none; }
.install-banner__text {
  flex: 1 1 220px;
  font-size: 13px;
  color: hsl(var(--text));
  line-height: 1.4;
}
.install-banner__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .install-banner { left: 10px; right: 10px; bottom: 10px; }
}

/* ---------- Toast notifications ---------- */
.pad-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--chrome-bottom, 0px));
  transform: translate(-50%, 12px);
  background: hsl(var(--text));
  color: hsl(var(--bg));
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 3000;
  max-width: 90vw;
  text-align: center;
}
.pad-toast--show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Account modal: danger zone ---------- */
.account-modal__danger {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid hsl(var(--border));
}
.link-btn--danger { color: hsl(var(--danger, 0 70% 55%)); }

/* ---------- Quick filters: mobile scroll-fade affordance ---------- */
.quickfilters-wrap { position: relative; }
.quickfilters-fade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
  background: linear-gradient(to right, transparent, hsl(var(--bg)) 70%);
  color: hsl(var(--text-faint));
  font-size: 16px;
  pointer-events: none;
  z-index: 401;
  transition: opacity 0.15s ease;
}
.quickfilters-fade[hidden] { display: none; }

/* ---------- First-run onboarding overlay ---------- */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.onboarding-overlay[hidden] { display: none; }
.onboarding-card {
  background: hsl(var(--bg-elevated));
  border: 1px solid hsl(var(--border));
  border-radius: var(--dialog-radius);
  padding: 28px 24px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: var(--dialog-shadow);
}
.onboarding-card__emoji { font-size: 34px; margin-bottom: 8px; }
.onboarding-card__title { font-size: 19px; font-weight: 700; margin-bottom: 10px; color: hsl(var(--text)); }
.onboarding-card__body { font-size: 14px; line-height: 1.5; color: hsl(var(--text-muted)); margin-bottom: 20px; }
.onboarding-card__actions { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Age gate ---------- */
.age-gate-overlay {
  position: fixed;
  inset: 0;
  background: hsl(var(--bg));
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.age-gate-overlay[hidden] { display: none; }
.age-gate-card {
  max-width: 380px;
  width: 100%;
  text-align: center;
  background: hsl(var(--bg-elevated));
  border: 1px solid hsl(var(--border));
  border-radius: var(--dialog-radius);
  box-shadow: var(--dialog-shadow);
  padding: 28px 24px;
}
.age-gate-card__emoji { font-size: 40px; margin-bottom: 10px; }
.age-gate-card__title { font-size: 20px; font-weight: 700; margin-bottom: 10px; color: hsl(var(--text)); }
.age-gate-card__body { font-size: 14px; line-height: 1.5; color: hsl(var(--text-muted)); margin-bottom: 22px; }
.age-gate-card__actions { display: flex; gap: 10px; justify-content: center; }


/* ---------- Validation, loading, and interaction polish ---------- */
.field-required, .account-field__required { color: hsl(var(--accent-pink)); font-size: 11.5px; font-weight: 600; }
.field-optional { color: hsl(var(--text-faint)); font-size: 11.5px; font-weight: 400; }
.field-error { color: hsl(6 90% 72%); font-size: 12px; margin: 5px 0 0; line-height: 1.35; }
[aria-invalid="true"] { border-color: hsl(6 90% 64%) !important; outline-color: hsl(6 90% 68%) !important; }
.account-forgot-password { margin: -4px 0 14px; align-self: flex-start; }
.account-reset-request { background: hsl(var(--accent-teal) / 0.1); border: 1px solid hsl(var(--accent-teal) / 0.35); border-radius: var(--radius-sm); color: hsl(var(--text-muted)); font-size: 12.5px; line-height: 1.45; padding: 9px 11px; margin: -2px 0 14px; }
.account-reset-request a { color: hsl(var(--accent-teal)); font-weight: 600; }
.main-loading { position: absolute; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: hsl(var(--bg) / .88); color: hsl(var(--text-muted)); font-size: 13px; }
.main-loading[hidden] { display: none; }
.neon-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid hsl(var(--accent-violet) / .22); border-top-color: hsl(var(--accent-pink)); border-right-color: hsl(var(--accent-teal)); animation: neon-spin .75s linear infinite; }
.btn.is-loading::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: neon-spin .75s linear infinite; }
@keyframes neon-spin { to { transform: rotate(360deg); } }
.view-enter { animation: view-fade .2s ease both; }
@keyframes view-fade { from { opacity: .25; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
  .chip--quick { min-height: 44px; }
  #filterCloseBtn, .detail-close { min-width: 44px; min-height: 44px; }
  .event-card__meta .tag, .event-card__vibes .tag, .detail-badges .tag, .etype-tag { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .neon-spinner, .btn.is-loading::before { animation: none; }
  .detail-sheet, .detail-sheet__inner, .view-enter { transition: none; animation: none; }
}

/* One circular close-control treatment across dialogs, sheets, and drawers. */
button[aria-label^="Close"] {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   Options view (Account / Trending shortcut / Legal) — consolidates
   controls that used to live scattered across the topbar and footer.
   ============================================================ */
.options-wrap {
  padding: 18px 16px calc(48px + var(--chrome-bottom));
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.options-section {
  margin-top: 22px;
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.options-section__title {
  padding: 14px 16px 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsl(var(--text-faint));
}
.options-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid hsl(var(--border));
  color: hsl(var(--text));
  text-align: left;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.options-row:last-child { border-bottom: none; }
.options-row:hover, .options-row:focus-visible { background: hsl(var(--surface-2)); }
.options-row.is-active { background: hsl(var(--accent-teal) / 0.1); }
.options-row__icon { font-size: 19px; flex-shrink: 0; width: 24px; text-align: center; }
.options-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.options-row__label { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.options-row__sub { font-size: 12px; color: hsl(var(--text-faint)); }
.options-row__chevron { color: hsl(var(--text-faint)); font-size: 18px; flex-shrink: 0; }
.options-footnote { margin: 22px 0 4px; text-align: center; color: hsl(var(--text-faint)); font-size: 12px; }

/* ============================================================
   Circle location sharing — ephemeral, opt-in, per-plan presence.
   Lives inside the shared crawl view, visible only to plan insiders.
   ============================================================ */
.circle-location {
  margin-top: 18px;
  padding: 16px;
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border));
  border-radius: var(--dialog-radius);
  box-shadow: var(--dialog-shadow);
}
.circle-location__header { padding-bottom: 12px; border-bottom: 1px solid hsl(var(--border)); }
.circle-location__header h3 { font-size: 16px; }
.circle-location__header p { margin: 2px 0 0; color: hsl(var(--text-faint)); font-size: 12px; }
.circle-location__toggle {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  padding: 4px;
  background: hsl(var(--surface-2));
  border-radius: 999px;
}
.circle-location__toggle-btn {
  flex: 1;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: hsl(var(--text-faint));
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.circle-location__toggle-btn:hover { color: hsl(var(--text)); }
.circle-location__toggle-btn.is-active[data-mode="off"] { background: hsl(var(--surface)); color: hsl(var(--text)); }
.circle-location__toggle-btn.is-active[data-mode="approx"] { background: hsl(var(--accent-amber)); color: #241900; }
.circle-location__toggle-btn.is-active[data-mode="live"] { background: hsl(var(--accent-teal)); color: #041312; }
.circle-location__error {
  margin-top: 10px;
  padding: 8px 10px;
  color: hsl(6 90% 72%);
  background: hsl(6 90% 64% / 0.14);
  border: 1px solid hsl(6 90% 64% / 0.3);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.circle-location__error[hidden] { display: none; }
.circle-location__map {
  margin-top: 14px;
  height: 180px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid hsl(var(--border));
}
.circle-location__map[hidden] { display: none; }
.circle-location__map-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: #17091a;
  background: linear-gradient(135deg, hsl(var(--accent-teal)), hsl(var(--accent-violet)));
  border: 2px solid hsl(var(--bg-elevated));
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.4);
}
.circle-location__pin-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.circle-location__pin {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: hsl(var(--surface-2));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.circle-location__pin-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.circle-location__pin-tag {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}
.circle-location__pin-tag--live { color: hsl(var(--accent-teal)); background: hsl(var(--accent-teal) / 0.14); }
.circle-location__pin-tag--approx { color: hsl(var(--accent-amber)); background: hsl(var(--accent-amber) / 0.16); }
.circle-location__pin-time { flex-shrink: 0; color: hsl(var(--text-faint)); font-size: 11px; }
.circle-location__empty { color: hsl(var(--text-faint)); font-size: 12.5px; line-height: 1.45; list-style: none; }
.circle-location__privacy-note { margin: 14px 0 0; color: hsl(var(--text-muted)); font-size: 11.5px; line-height: 1.5; }

@media (max-width: 480px) {
  .circle-location__toggle-btn { font-size: 11.5px; padding: 8px 6px; }
}