/* ============================================================
   Design tokens — single source of truth for colors, spacing, radius.
   Templates that hard-code Tailwind utility classes still work; new
   surfaces should reach for these vars first.
   ============================================================ */
:root {
  /* Surfaces */
  --c-bg:           #fafaf9;
  --c-surface:      #ffffff;
  --c-surface-2:    #f4f4f5;
  --c-overlay:      rgba(0, 0, 0, 0.55);
  /* Text */
  --c-fg:           #111827;
  --c-fg-muted:     #6b7280;   /* AA-compliant secondary text on white */
  --c-fg-faint:     #9ca3af;   /* meta text — never carries primary info */
  --c-fg-invert:    #ffffff;
  /* Borders */
  --c-border:       #e5e7eb;
  --c-border-soft:  #f0f0f0;
  --c-border-strong:#d1d5db;
  /* Brand */
  --c-accent:       #ef4444;
  --c-accent-hi:    #dc2626;
  --c-accent-soft:  #fef2f2;
  /* Status */
  --c-success:      #10b981;
  --c-success-soft: #ecfdf5;
  --c-warning:      #f59e0b;
  --c-warning-soft: #fffbeb;
  --c-info:         #0ea5e9;
  --c-info-soft:    #f0f9ff;
  --c-rose-soft:    #fff1f2;
  /* Radii */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 9999px;
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.10);
  /* Focus ring */
  --ring: 0 0 0 3px rgba(239, 68, 68, 0.18);
  /* Map / data viz */
  --c-cheap:  #10b981;
  --c-fair:   #f59e0b;
  --c-pricey: #f43f5e;
}

/* Dark theme — opt-in via [data-theme="dark"] OR auto from prefers-color-scheme. */
[data-theme="dark"] {
  --c-bg:           #0b0b0c;
  --c-surface:      #18181b;
  --c-surface-2:    #232326;
  --c-overlay:      rgba(0, 0, 0, 0.65);
  --c-fg:           #f5f5f5;
  --c-fg-muted:     #b5b5b8;
  --c-fg-faint:     #71717a;
  --c-fg-invert:    #0b0b0c;
  --c-border:       #2a2a2e;
  --c-border-soft:  #1f1f23;
  --c-border-strong:#3a3a40;
  --c-accent:       #f87171;
  --c-accent-hi:    #ef4444;
  --c-accent-soft:  #2a1213;
  --c-success-soft: #06241a;
  --c-warning-soft: #2a1f08;
  --c-info-soft:    #052033;
  --c-rose-soft:    #2a1213;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  --ring: 0 0 0 3px rgba(248, 113, 113, 0.30);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg:           #0b0b0c;
    --c-surface:      #18181b;
    --c-surface-2:    #232326;
    --c-overlay:      rgba(0, 0, 0, 0.65);
    --c-fg:           #f5f5f5;
    --c-fg-muted:     #b5b5b8;
    --c-fg-faint:     #71717a;
    --c-fg-invert:    #0b0b0c;
    --c-border:       #2a2a2e;
    --c-border-soft:  #1f1f23;
    --c-border-strong:#3a3a40;
    --c-accent:       #f87171;
    --c-accent-hi:    #ef4444;
    --c-accent-soft:  #2a1213;
    --c-success-soft: #06241a;
    --c-warning-soft: #2a1f08;
    --c-info-soft:    #052033;
    --c-rose-soft:    #2a1213;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
    --ring: 0 0 0 3px rgba(248, 113, 113, 0.30);
  }
}

html, body {
  background: var(--c-bg);
  color: var(--c-fg);
  color-scheme: light dark;
}

/* Skip-link surfaces from sr-only on focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--c-fg);
  color: var(--c-fg-invert);
  padding: 8px 14px;
  border-radius: var(--r-md);
  z-index: 10000;
  font-weight: 600;
  font-size: 13px;
}
.skip-link:focus { left: 8px; }

/* Helpers the Tailwind CDN doesn't include */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* ============================================================
   Card surface — anchored on tokens so dark mode flips cleanly
   ============================================================ */
.card-surface {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.card-surface:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-border-strong);
}
.card-meta { color: var(--c-fg-muted); }
.card-faint { color: var(--c-fg-faint); }

/* Touch-target enforced minimum for the hide / wishlist buttons */
.iconbtn-touch {
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-fg-muted);
  transition: background 120ms, color 120ms;
}
.iconbtn-touch:hover {
  background: var(--c-surface-2);
  color: var(--c-fg);
}
.iconbtn-touch:focus-visible {
  outline: 0;
  box-shadow: var(--ring);
}

/* Theme toggle pill */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  color: var(--c-fg);
  font-size: 14px;
  cursor: pointer;
  border: 0;
  transition: background 120ms;
}
.theme-toggle:hover { background: var(--c-border); }
.theme-toggle:focus-visible { outline: 0; box-shadow: var(--ring); }

/* Map legend control */
.map-legend {
  background: var(--c-surface);
  color: var(--c-fg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.4;
  box-shadow: var(--shadow-sm);
  max-width: 220px;
}
.map-legend summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.map-legend summary::-webkit-details-marker { display: none; }
.map-legend ul { margin: 6px 0 0; padding: 0; list-style: none; }
.map-legend li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.map-legend .swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}

/* ============================================================
   Unified control design system — shared across all pages.
   Keep Tailwind for layout; use these for buttons/chips/inputs.
   ============================================================ */

/* Base form inputs */
.ctl-input, .ctl-select {
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
  color: #111827;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: border-color 120ms, box-shadow 120ms;
}
.ctl-input::placeholder { color: #9ca3af; }
.ctl-input:focus, .ctl-select:focus {
  outline: 0;
  border-color: #6b7280;
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.12);
}
.ctl-select {
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  appearance: none;
  cursor: pointer;
}
.ctl-input-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  overflow: hidden;
  transition: border-color 120ms, box-shadow 120ms;
}
.ctl-input-group:focus-within {
  border-color: #6b7280;
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.12);
}
.ctl-input-group > input {
  padding: 6px 8px;
  font-size: 12px;
  border: 0;
  background: transparent;
  outline: 0;
  width: 68px;
}
.ctl-input-group > span {
  color: #9ca3af;
  padding: 0 2px;
  font-size: 11px;
  user-select: none;
}

/* Chip-toggle: native checkbox made to look like a pill toggle */
.chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.chip-toggle:hover { background: #f9fafb; border-color: #d1d5db; }
.chip-toggle input { display: none; }
.chip-toggle:has(input:checked) {
  background: #111827;
  color: white;
  border-color: #111827;
}
.chip-toggle.chip-tone-rose:has(input:checked) {
  background: #ef4444; border-color: #dc2626;
}
.chip-toggle.chip-tone-amber:has(input:checked) {
  background: #f59e0b; border-color: #d97706; color: #1f2937;
}
.chip-toggle.chip-tone-emerald:has(input:checked) {
  background: #10b981; border-color: #059669;
}

/* Preset pill (anchor-style, like Fish league) */
.preset-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  text-decoration: none;
  transition: all 120ms;
  white-space: nowrap;
}
.preset-pill:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1e40af;
  transform: translateY(-1px);
}
.preset-pill.active {
  background: linear-gradient(180deg, #38bdf8, #0ea5e9);
  color: white;
  border-color: #0284c7;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.3);
}
.preset-pill.active:hover { transform: none; }

/* Button variants */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  font-size: 12px; font-weight: 500;
  border-radius: 8px;
  border: 1px solid transparent;
  background: white;
  color: #374151;
  cursor: pointer;
  transition: all 120ms;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: #ef4444; color: white;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3);
}
.btn-primary:hover { background: #dc2626; }
.btn-secondary { border-color: #e5e7eb; }
.btn-secondary:hover { background: #f9fafb; border-color: #d1d5db; }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: #f3f4f6; }
.btn-accent {
  background: linear-gradient(90deg, #ef4444, #f59e0b);
  color: white;
}
.btn-accent:hover { filter: brightness(1.1); }
.btn-sm { padding: 4px 10px; font-size: 11px; }

/* Segmented control (map mode) */
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  transition: all 120ms;
  white-space: nowrap;
}
.seg-btn:hover { color: #111827; }
.seg-btn.active {
  background: white;
  color: #111827;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Filter bar section container */
.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.filter-label {
  font-size: 10px;
  font-weight: 500;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 2px;
}

/* Active filter chip */
.active-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  font-size: 11px;
  color: #374151;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  text-decoration: none;
  transition: all 120ms;
}
.active-chip:hover {
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}
.active-chip .x-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  color: #6b7280;
  font-size: 10px;
  line-height: 1;
}
.active-chip:hover .x-icon { background: #dc2626; color: white; }

/* Loading progress bar — HTMX adds `htmx-loading` to body while in-flight */
@keyframes shimmer {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}
body.htmx-loading #htmx-progress { opacity: 1; }

/* Toast notifications */
.toast {
  pointer-events: auto;
  padding: 12px 16px;
  border-radius: 10px;
  color: white;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  max-width: 360px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast.toast-info    { background: #111827; }
.toast.toast-success { background: #059669; }
.toast.toast-warn    { background: #d97706; }
.toast.toast-error   { background: #dc2626; }

/* Modal */
#modal-root .modal-backdrop {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  animation: modal-fade-in 150ms ease-out;
}
#modal-root .modal-panel {
  background: white;
  border-radius: 16px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.25);
  width: 100%; max-width: 440px; margin: 0 16px;
  overflow: hidden;
  animation: modal-pop-in 180ms ease-out;
}
@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#modal-root .modal-head { padding: 16px 20px; border-bottom: 1px solid #e5e7eb; font-weight: 600; font-size: 15px; }
#modal-root .modal-body { padding: 16px 20px; font-size: 14px; color: #374151; }
#modal-root .modal-body input[type=text] {
  width: 100%; padding: 8px 12px;
  border: 1px solid #d1d5db; border-radius: 8px;
  font-size: 14px; margin-top: 8px;
}
#modal-root .modal-foot {
  padding: 12px 20px; background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  display: flex; gap: 8px; justify-content: flex-end;
}
#modal-root .modal-btn {
  padding: 7px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent;
  transition: background 100ms;
}
#modal-root .modal-btn-primary  { background: #ef4444; color: white; }
#modal-root .modal-btn-primary:hover { background: #dc2626; }
#modal-root .modal-btn-danger   { background: #dc2626; color: white; }
#modal-root .modal-btn-secondary { background: white; color: #111; border-color: #d1d5db; }
#modal-root .modal-btn-secondary:hover { background: #f3f4f6; }

/* "Search this area" floating button on the map */
#search-area-btn {
  position: absolute;
  top: 12px; left: 50%; transform: translate(-50%, -12px);
  z-index: 450;
  padding: 8px 16px; border-radius: 999px;
  background: #ef4444; color: white;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
  border: 0;
}
#search-area-btn.visible {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, 0);
}
#search-area-btn:hover { background: #dc2626; }

/* --- Leaflet tuning --- */
.leaflet-popup-content { margin: 10px 12px; }
.leaflet-popup-content-wrapper {
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}
.leaflet-popup-tip { box-shadow: none; }
.leaflet-container { font-family: inherit; }

/* Reset Leaflet.draw toolbar cruft; modernize buttons */
.leaflet-draw-toolbar a {
  background-color: #fff !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.leaflet-draw-toolbar a:hover {
  background-color: #fef2f2 !important;
}
.leaflet-bar a:first-child { border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; }
.leaflet-bar a:last-child  { border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; }
.leaflet-bar { box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important; border: none !important; }

/* --- Price pill markers (Airbnb-style) --- */
.price-pill {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #111;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  white-space: nowrap;
  width: auto !important;
  height: auto !important;
  transform: translate(-50%, -100%);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.price-pill:hover {
  transform: translate(-50%, -100%) scale(1.08);
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  z-index: 1000 !important;
}
.price-pill.pill-wishlist {
  background: linear-gradient(180deg, #fecdd3, #fda4af) !important;
  border-color: #f43f5e;
  color: #881337;
}
.price-pill.pill-top-gf {
  background: linear-gradient(180deg, #fde68a, #fbbf24) !important;
  border-color: #b45309;
  color: #78350f;
}
.price-pill.pill-hidden { opacity: 0.4; }

/* Price-mode heatmap recolor */
.price-pill.pill-cheap {
  background: #d1fae5 !important;
  border-color: #10b981;
  color: #064e3b;
}
.price-pill.pill-fair {
  background: #fef3c7 !important;
  border-color: #f59e0b;
  color: #78350f;
}
.price-pill.pill-pricey {
  background: #fee2e2 !important;
  border-color: #ef4444;
  color: #7f1d1d;
}

/* --- Cluster bubbles --- */
.cluster-wrapper { background: transparent !important; }
.cluster-bubble {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(17,24,39,0.9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.cluster-bubble b { font-weight: 600; }

/* --- POI overlay dots --- */
.poi-icon-beach, .poi-icon-town, .poi-icon-airport {
  border: 2px solid white;
  border-radius: 50%;
  width: 14px !important; height: 14px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.35);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.poi-icon-beach   { background: #0ea5e9; }
.poi-icon-town    { background: #f59e0b; }
.poi-icon-airport { background: #6366f1; }
.poi-icon-beach:hover, .poi-icon-town:hover, .poi-icon-airport:hover {
  transform: scale(1.35);
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
  z-index: 900 !important;
}

/* POI popup action buttons */
.poi-chip-btn {
  display: inline-block;
  padding: 3px 9px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  color: #111;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transition: background 100ms ease, transform 100ms ease;
}
.poi-chip-btn:hover {
  background: #ef4444;
  color: #fff;
  border-color: #dc2626;
  transform: scale(1.05);
}

/* Fullscreen button styling tweak */
.leaflet-control-fullscreen a {
  background: #fff !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ============================================================
   Compact topbar (2025 redesign) — vertical density first.
   Row 1 (main) ≈ 44px, Row 2 (ribbon) ≈ 34px → header ≈ 78px.
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #e5e7eb;
}
.topbar-row {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-main { height: 44px; }
.topbar-ribbon {
  height: 34px;
  border-top: 1px solid #f3f4f6;
  gap: 6px;
}

/* Brand (icon + tiny stat) */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  flex-shrink: 0;
  color: inherit;
}
.brand-icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, #f43f5e, #dc2626);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.brand-stat {
  font-size: 10px;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  text-align: left;
}
.brand-stat b { color: #111827; font-weight: 600; }
.brand-stat .sub { font-size: 9px; color: #9ca3af; }

/* Unified search/ask input */
.search-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 180px;
}
.search-wrap > input[type=text] {
  width: 100%;
  padding: 7px 40px 7px 30px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #f9fafb;
  font-size: 12px;
  color: #111827;
  outline: 0;
  transition: all 120ms;
}
.search-wrap > input[type=text]:focus {
  border-color: #9ca3af;
  background: white;
  box-shadow: 0 0 0 3px rgba(107,114,128,0.12);
}
.search-wrap .search-icon {
  position: absolute;
  left: 10px;
  width: 14px; height: 14px;
  color: #9ca3af;
  pointer-events: none;
}
.search-wrap .ask-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 9px;
  background: linear-gradient(90deg, #f43f5e, #f59e0b);
  color: white;
  border: 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
  box-shadow: 0 1px 3px rgba(244,63,94,0.3);
}
.search-wrap .ask-btn:hover { filter: brightness(1.08); }

/* Active-chip rail (inline, scrollable) */
.chip-rail {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  flex-shrink: 1;
  min-width: 0;
  max-width: 46%;
  scrollbar-width: none;
  mask-image: linear-gradient(to right, black calc(100% - 18px), transparent);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 18px), transparent);
}
.chip-rail::-webkit-scrollbar { display: none; }
.chip-rail:empty { display: none; }
.chip-rail .active-chip {
  padding: 2px 3px 2px 9px;
  font-size: 10.5px;
  flex-shrink: 0;
}
.chip-rail .active-chip .x-icon {
  width: 14px; height: 14px;
  font-size: 9px;
}

/* Primary action trigger — Filters button with badge */
.filters-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: white;
  color: #111827;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 120ms;
}
.filters-trigger:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}
.filters-trigger.has-active {
  border-color: #fecaca;
  background: #fff5f5;
  color: #b91c1c;
}
.filters-trigger .count {
  background: #ef4444;
  color: white;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.45;
}

/* Compact scrape button */
.scrape-btn-sm {
  padding: 5px 11px;
  background: #ef4444;
  color: white;
  border: 0;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms;
  flex-shrink: 0;
  line-height: 1.3;
}
.scrape-btn-sm:hover { background: #dc2626; }
.scrape-btn-sm:disabled { opacity: 0.55; cursor: wait; }

/* Icon button */
.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: white;
  color: #6b7280;
  cursor: pointer;
  font-size: 13px;
  transition: all 120ms;
  text-decoration: none;
  flex-shrink: 0;
}
.iconbtn:hover { background: #f3f4f6; color: #111827; }

/* Trip tabs */
.trip-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 1;
  min-width: 0;
  align-items: center;
}
.trip-tabs::-webkit-scrollbar { display: none; }
.trip-tab {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  transition: all 100ms;
  flex-shrink: 0;
}
.trip-tab:hover { background: #f3f4f6; color: #111827; }
.trip-tab.active {
  background: #111827;
  color: white;
}
.trip-tab-add {
  padding: 4px 9px;
  font-size: 11px;
  color: #6b7280;
  border: 1px dashed #d1d5db;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.trip-tab-add::-webkit-details-marker { display: none; }
.trip-tab-add:hover { color: #111827; border-color: #6b7280; }

/* Vertical separator between ribbon groups */
.ribbon-sep {
  width: 1px;
  height: 14px;
  background: #e5e7eb;
  margin: 0 2px;
  flex-shrink: 0;
}

/* Fish pills — ultra compact */
.fish-rail {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
}
.fish-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 3px 9px;
  font-size: 12px;
  color: #374151;
  text-decoration: none;
  border-radius: 999px;
  background: white;
  border: 1px solid #e5e7eb;
  transition: all 120ms;
  white-space: nowrap;
  line-height: 1.3;
}
.fish-pill .m {
  font-size: 9px;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.fish-pill:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1e40af;
}
.fish-pill:hover .m { color: #3b82f6; }
.fish-pill.active {
  background: linear-gradient(180deg, #38bdf8, #0ea5e9);
  color: white;
  border-color: #0284c7;
  box-shadow: 0 1px 3px rgba(14,165,233,0.3);
}
.fish-pill.active .m { color: rgba(255,255,255,0.85); }
.fish-pill-clear {
  padding: 3px 8px;
  font-size: 10px;
  color: #9ca3af;
  text-decoration: none;
  border-radius: 999px;
  transition: color 100ms;
}
.fish-pill-clear:hover { color: #dc2626; }

/* Sort picker (native <details>) */
.sort-picker { position: relative; flex-shrink: 0; }
.sort-picker summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: #111827;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4;
}
.sort-picker summary::-webkit-details-marker { display: none; }
.sort-picker summary::after {
  content: "▾";
  font-size: 8px;
  color: #9ca3af;
  margin-left: 1px;
}
.sort-picker summary:hover { background: #f3f4f6; }
.sort-picker[open] summary {
  background: #111827;
  color: white;
  border-color: #111827;
}
.sort-picker[open] summary::after { color: rgba(255,255,255,0.7); }
.sort-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  padding: 4px;
  min-width: 180px;
  animation: sort-pop 120ms ease-out;
}
@keyframes sort-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sort-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  font-size: 12px;
  color: #374151;
  text-decoration: none;
  border-radius: 6px;
  transition: all 100ms;
  white-space: nowrap;
}
.sort-menu a:hover { background: #f3f4f6; color: #111827; }
.sort-menu a.active {
  background: #fef2f2;
  color: #dc2626;
  font-weight: 500;
}
.sort-menu a.active::after {
  content: "✓";
  font-size: 11px;
}

/* Add-search popover (from "+ Add" ribbon tab) */
.add-search-pop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  padding: 10px;
  min-width: 480px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  animation: sort-pop 120ms ease-out;
}

/* ============================================================
   Filters drawer (off-canvas right)
   ============================================================ */
.filters-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
}
.filters-drawer.open { display: block; }
.filters-drawer .drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: drawer-fade-in 150ms ease-out;
}
.filters-drawer .drawer-panel {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 380px;
  max-width: 100vw;
  background: white;
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 40px rgba(0,0,0,0.15);
  animation: drawer-slide-in 220ms cubic-bezier(0.4,0,0.2,1);
}
@keyframes drawer-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawer-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.drawer-head {
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.drawer-head h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.drawer-head .close-btn {
  width: 28px; height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.drawer-head .close-btn:hover { background: #f3f4f6; color: #111827; }
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
}
.drawer-foot {
  padding: 12px 18px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

/* Field-group inside drawer */
.field-group {
  margin-bottom: 20px;
}
.field-group:last-child { margin-bottom: 0; }
.field-group > h3 {
  font-size: 10px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px 0;
}
.field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.field-grid-1 { display: grid; grid-template-columns: 1fr; gap: 8px; }
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field > .flabel {
  color: #6b7280;
  font-size: 10.5px;
  font-weight: 500;
}
.field > input[type=number],
.field > input[type=text],
.field > select {
  width: 100%;
  padding: 6px 9px;
  font-size: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  background: white;
  color: #111827;
  outline: 0;
  transition: all 120ms;
}
.field > input:focus, .field > select:focus {
  border-color: #9ca3af;
  box-shadow: 0 0 0 2px rgba(107,114,128,0.12);
}
.field > select {
  padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  appearance: none;
  cursor: pointer;
}
.drawer-range {
  display: flex;
  align-items: center;
  gap: 6px;
}
.drawer-range > input {
  width: 100%;
  padding: 6px 9px;
  font-size: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  background: white;
  outline: 0;
}
.drawer-range > input:focus {
  border-color: #9ca3af;
  box-shadow: 0 0 0 2px rgba(107,114,128,0.12);
}
.drawer-range > span {
  color: #9ca3af;
  font-size: 11px;
}

/* Toggle rows in drawer */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  font-size: 12px;
  color: #111827;
  cursor: pointer;
  transition: all 120ms;
  user-select: none;
}
.toggle-row:hover { background: #f3f4f6; }
.toggle-row input { display: none; }
.toggle-row .tsw {
  width: 30px; height: 17px;
  background: #e5e7eb;
  border-radius: 999px;
  position: relative;
  transition: background 120ms;
  flex-shrink: 0;
}
.toggle-row .tsw::after {
  content: "";
  position: absolute;
  left: 2px; top: 2px;
  width: 13px; height: 13px;
  background: white;
  border-radius: 50%;
  transition: transform 120ms;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.toggle-row:has(input:checked) .tsw { background: #10b981; }
.toggle-row.tone-rose:has(input:checked) .tsw { background: #ef4444; }
.toggle-row.tone-amber:has(input:checked) .tsw { background: #f59e0b; }
.toggle-row:has(input:checked) .tsw::after { transform: translateX(13px); }
.toggle-row .tlabel { flex: 1; }
.toggle-row .thint {
  font-size: 10px;
  color: #9ca3af;
  margin-right: 6px;
}

/* Map mode: tinier segmented control */
.segmented.seg-sm {
  padding: 2px;
  border-radius: 8px;
}
.segmented.seg-sm .seg-btn {
  padding: 3px 8px;
  font-size: 10.5px;
}

/* Compact listing card body — every pixel matters */
.card-body {
  padding: 8px 10px 10px 10px;
}