/* ============================================================
   PlinkExchange — Range Directory (No. 04) v2
   New components only. All foundational tokens, header, footer,
   typography, hero, finder, methodology, and disclaimer come
   from the shared design system in styles.css.
============================================================ */

/* ============================================================
   FILTER BAR (mode-pills row above map)
   Uses the same .mode-pill markup pattern as the laws map's
   .modes section, applied inline above the map.
============================================================ */
.dir-filter-bar {
  background: linear-gradient(to bottom, var(--paper) 0%, var(--paper-warm) 100%);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--s-4) var(--gutter);
}
.dir-filter-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.dir-filter-toggle {
  appearance: none;
  border: 1.5px solid var(--rule-2);
  background: white;
  color: var(--charcoal);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: all 0.14s ease;
}
.dir-filter-toggle svg { width: 14px; height: 14px; flex: 0 0 auto; }
.dir-filter-toggle-chev {
  transition: transform 0.18s ease;
}
.dir-filter-toggle[aria-expanded="true"] .dir-filter-toggle-chev {
  transform: rotate(180deg);
}
.dir-filter-toggle:hover {
  border-color: var(--charcoal-3);
  background: var(--paper);
}
.dir-filter-toggle[aria-expanded="true"] {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--paper);
}
.dir-filter-toggle-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  background: var(--orange);
  color: white;
  border-radius: 999px;
  padding: 1px 6px;
  letter-spacing: 0.04em;
  margin-left: 1px;
}
.dir-filter-toggle-count[hidden] { display: none; }

/* Active filter chips — small inline summary so the user can see what's active without expanding */
.dir-filter-active {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.dir-filter-active:empty { display: none; }
.dir-filter-active-chip {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal-2);
  background: rgba(45,54,61,0.07);
  border-radius: var(--r-pill);
  padding: 4px 10px 4px 11px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  border: none;
  transition: background 0.14s ease;
}
.dir-filter-active-chip:hover { background: rgba(45,54,61,0.13); }
.dir-filter-active-chip svg { width: 10px; height: 10px; opacity: 0.6; }

/* Expanded filter groups */
.dir-filter-groups {
  max-width: var(--content-max);
  margin: var(--s-4) auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  align-items: flex-start;
}
.dir-filter-groups[hidden] { display: none; }
.dir-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.dir-filter-grouplabel {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-deep);
}
.dir-filter-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.dir-filter-pill {
  appearance: none;
  border: 1.5px solid var(--rule-2);
  background: rgba(255,255,255,0.7);
  color: var(--charcoal);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 5px 10px 5px 11px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.14s ease;
  white-space: nowrap;
  cursor: pointer;
}
.dir-filter-pill:hover {
  border-color: var(--charcoal-3);
  background: white;
}
.dir-filter-pill .fp-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--charcoal-3);
  background: var(--paper-warm);
  padding: 1px 5px;
  border-radius: var(--r-pill);
  letter-spacing: 0.04em;
}
.dir-filter-pill.is-active {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--paper);
  font-weight: 600;
}
.dir-filter-pill.is-active .fp-count {
  background: rgba(242,92,31,0.28);
  color: var(--orange-soft);
}
.dir-filter-pill.is-disabled { opacity: 0.4; cursor: not-allowed; }

.dir-filter-clear {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--charcoal-3);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 4px;
}
.dir-filter-clear:hover { color: var(--orange-deep); }
.dir-filter-clear[hidden] { display: none; }

/* ============================================================
   FINDER ROW (search + state select + locate me)
============================================================ */
.dir-finder-section {
  padding: var(--s-7) var(--gutter) var(--s-3);
}
.dir-finder {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(220px, 280px) auto;
  gap: var(--s-4);
  align-items: center;
}

.dir-locate-btn {
  appearance: none;
  border: 1.5px solid var(--charcoal);
  background: var(--charcoal);
  color: var(--paper);
  font: 600 var(--t-sm) 'DM Sans', sans-serif;
  letter-spacing: -0.005em;
  padding: 13px 18px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.16s ease;
}
.dir-locate-btn:hover {
  background: var(--orange);
  border-color: var(--orange);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(242,92,31,0.45);
}
.dir-locate-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.dir-locate-btn.is-loading { opacity: 0.6; cursor: progress; }
.dir-locate-btn.is-active {
  background: var(--orange);
  border-color: var(--orange);
}

.dir-locate-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-eye);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-deep);
  font-weight: 600;
  display: none;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.dir-locate-status.is-shown { display: inline-flex; }
.dir-locate-status::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  animation: pulse 1.4s ease-in-out infinite;
}
.dir-locate-clear {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--charcoal-3);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 50%;
  margin-left: 2px;
}
.dir-locate-clear:hover { background: var(--rule); color: var(--charcoal); }

/* ============================================================
   MAP — real US map (d3 + topojson)
============================================================ */
.dir-map-section {
  padding: var(--s-3) var(--gutter) var(--s-9);
}
.dir-map-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
}
.dir-map-card {
  position: relative;
  background: linear-gradient(135deg, #FFFCF6 0%, var(--paper) 100%);
  border: 1.5px solid var(--rule);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  aspect-ratio: 1.6 / 1;
  min-height: 480px;
}
.dir-map-card #dir-map { display: block; width: 100%; height: 100%; }
.dir-map-loading {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-warm);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-xs);
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dir-map-corner-tl, .dir-map-corner-tr {
  position: absolute;
  z-index: 5;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--rule);
  padding: 8px 12px;
  border-radius: var(--r);
  font-size: var(--t-xs);
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: var(--shadow-sm);
}
.dir-map-corner-tl { top: var(--s-4); left: var(--s-4); }
.dir-map-corner-tr { top: var(--s-4); right: var(--s-4); align-items: flex-end; }
.dir-map-eye {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.dir-map-name {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--charcoal);
  letter-spacing: -0.01em;
}
.dir-map-counter-num {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: var(--t-xl);
  color: var(--charcoal);
  line-height: 1;
}
.dir-map-counter-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dir-map-watermark {
  position: absolute;
  bottom: 14px;
  right: 16px;
  width: 110px;
  height: auto;
  opacity: 0.28;
  pointer-events: none;
  z-index: 1;
  user-select: none;
  filter: saturate(0.85);
}

/* "Back to US" pill — visible only when zoomed into a state */
.dir-map-back {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  z-index: 6;
  appearance: none;
  border: 1.5px solid var(--charcoal);
  background: var(--charcoal);
  color: var(--paper);
  font: 600 var(--t-sm) 'DM Sans', sans-serif;
  padding: 8px 14px 8px 11px;
  border-radius: var(--r-pill);
  display: none;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: all 0.14s ease;
}
.dir-map-back:hover {
  background: var(--orange);
  border-color: var(--orange);
}
.dir-map-back svg { width: 12px; height: 12px; }
.dir-map-back.is-shown { display: inline-flex; }
/* When zoomed, hide the corner tr counter to avoid stack with back button */
.dir-map-card.is-drilled .dir-map-corner-tr { display: none; }

/* state shapes — choropleth */
.dir-state {
  stroke: rgba(255,255,255,0.92);
  stroke-width: 0.7;
  stroke-linejoin: round;
  cursor: pointer;
  transition: filter 0.16s ease, stroke-width 0.16s ease;
}
.dir-state:hover {
  filter: brightness(1.08) saturate(1.1);
  stroke: var(--charcoal);
  stroke-width: 1.4;
}
.dir-state.is-empty { fill: var(--paper-deep); cursor: default; }
.dir-state.is-empty:hover { filter: none; stroke: rgba(255,255,255,0.92); stroke-width: 0.7; }
.dir-state.is-selected {
  stroke: var(--charcoal-2);
  stroke-width: 2.2;
}

/* When drilled in, the single state should be a calm backdrop for the pins,
   not a screaming density color. Override density classes on the selected state. */
.dir-map-card.is-drilled .dir-state.is-selected,
.dir-map-card.is-drilled .dir-state.is-selected.d-1,
.dir-map-card.is-drilled .dir-state.is-selected.d-2,
.dir-map-card.is-drilled .dir-state.is-selected.d-3,
.dir-map-card.is-drilled .dir-state.is-selected.d-4,
.dir-map-card.is-drilled .dir-state.is-selected.d-5 {
  fill: var(--paper-warm);
  stroke: var(--charcoal-3);
  stroke-width: 1.5;
}

.dir-state-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  fill: rgba(255,255,255,0.95);
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke fill;
  stroke: rgba(45,54,61,0.4);
  stroke-width: 1px;
}
.dir-state-label.label-dark {
  fill: var(--charcoal-2);
  stroke: rgba(255,255,255,0.85);
  stroke-width: 1px;
}
/* Hide state labels when drilled — single state, label irrelevant */
.dir-map-card.is-drilled .dir-state-label { display: none; }

/* density ramp (orange family — positive density, not severity) */
.dir-state.d-1 { fill: #FCEAD9; }
.dir-state.d-2 { fill: #F8C99B; }
.dir-state.d-3 { fill: #F2A063; }
.dir-state.d-4 { fill: #E07024; }
.dir-state.d-5 { fill: #B23A1A; }

/* PIN markers (drilled mode) */
.dir-pin {
  cursor: pointer;
}
.dir-pin .pin-shadow {
  fill: rgba(45,54,61,0.25);
}
.dir-pin .pin-body {
  fill: var(--orange-deep);
  stroke: white;
  stroke-width: 2;
  filter: drop-shadow(0 2px 3px rgba(45,54,61,0.25));
  transition: fill 0.14s ease, filter 0.14s ease;
}
.dir-pin .pin-dot {
  fill: white;
}
/* Larger hit area expands the click/hover target without changing visual size */
.dir-pin .pin-hit {
  fill: transparent;
}
/* Hover affordance: color + slight shadow lift only — no geometry changes.
   Scaling SVG groups on hover causes the pin to jump because CSS
   transform-origin on SVG elements is interpreted inconsistently across
   browsers; that jump can re-trigger mouseleave/mouseenter in a loop, which
   reads as a visible shake. A color change alone reads as interactive and
   stays geometrically stable. */
.dir-pin:hover .pin-body {
  fill: var(--orange);
  filter: drop-shadow(0 3px 5px rgba(45,54,61,0.4));
}

/* ============================================================
   CITY ANCHORS (drilled view only)
   Subtle gray dots + labels for major cities in the drilled state.
   These help users orient ("that pin is near Pittsburgh") without
   competing visually with the range pins.
============================================================ */
.dir-city-anchor {
  pointer-events: none; /* labels never intercept clicks */
}
.city-dot {
  fill: rgba(45, 54, 61, 0.32);
}
.city-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  fill: rgba(45, 54, 61, 0.55);
  letter-spacing: -0.005em;
  /* paint-order:stroke fill so the white outline goes UNDER the gray text */
  paint-order: stroke fill;
  stroke: var(--paper-warm);
  stroke-width: 2.5px;
  stroke-linejoin: round;
  user-select: none;
}
/* Fuzzy pins (city-level geocode) — less saturated, no dashed stroke */
.dir-pin.is-fuzzy .pin-body {
  fill: var(--orange-soft);
  stroke: white;
  stroke-width: 2;
  opacity: 0.85;
}
.dir-pin.is-fuzzy .pin-dot {
  fill: var(--orange-deep);
}
.dir-pin.is-active .pin-body {
  fill: var(--charcoal);
  stroke: white;
  stroke-width: 2.5;
  opacity: 1;
}
.dir-pin.is-active .pin-dot {
  fill: var(--orange);
}

/* "Locate me" marker */
.dir-userpin .userpin-pulse {
  fill: rgba(45, 54, 61, 0.18);
}
.dir-userpin .userpin-core {
  fill: var(--charcoal);
  stroke: white;
  stroke-width: 2.5;
}

/* tooltip (hover popover on state or pin) */
.dir-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 60;
  background: var(--charcoal-2);
  color: var(--paper);
  padding: 10px 14px;
  border-radius: var(--r);
  font-size: 12.5px;
  line-height: 1.45;
  box-shadow: var(--shadow-lg);
  max-width: 280px;
  opacity: 0;
  transform: translate(-50%, -120%) translateY(8px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.dir-tooltip[data-visible="true"] {
  opacity: 1;
  transform: translate(-50%, -120%) translateY(0);
}
.dir-tooltip .tt-name {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: var(--t-sm);
  margin-bottom: 4px;
}
.dir-tooltip .tt-loc {
  font-size: var(--t-xs);
  color: var(--orange-soft);
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.dir-tooltip .tt-hint { margin-top: 4px; font-size: 11px; color: rgba(244,241,234,0.65); }

/* PIN POPOVER (click on pin → small card overlaid on map) */
.dir-pin-popover {
  position: absolute;
  z-index: 50;
  width: 280px;
  background: white;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 14px 16px;
  display: none;
  pointer-events: auto;
  transform: translate(-50%, calc(-100% - 18px));
}
.dir-pin-popover.is-shown { display: block; animation: popoverIn 0.16s ease; }
@keyframes popoverIn {
  from { opacity: 0; transform: translate(-50%, calc(-100% - 14px)); }
  to   { opacity: 1; transform: translate(-50%, calc(-100% - 18px)); }
}
.dir-pin-popover::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px; height: 14px;
  background: white;
  border-right: 1.5px solid var(--rule);
  border-bottom: 1.5px solid var(--rule);
}
.popover-eye {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-bottom: 4px;
}
.popover-name {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 15.5px;
  letter-spacing: -0.018em;
  color: var(--charcoal);
  line-height: 1.2;
  margin-bottom: 6px;
}
.popover-loc {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--charcoal-3);
  margin-bottom: 8px;
}
.popover-loc svg { width: 12px; height: 12px; color: var(--muted); flex-shrink: 0; }
.popover-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 10px;
}
.popover-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--paper-warm);
  color: var(--charcoal-3);
  border: 1px solid var(--rule);
}
.popover-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--orange-deep);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s ease;
}
.popover-cta:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}
.popover-cta svg { width: 11px; height: 11px; }
.popover-close {
  position: absolute;
  top: 6px;
  right: 8px;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
}
.popover-close:hover { background: var(--paper-warm); color: var(--charcoal); }

/* Disciplines as a tighter, distinct row of orange-tinted chips */
.popover-disc {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 8px;
}
.popover-disc-chip {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--orange-tint);
  color: var(--orange-deep);
  border: 1px solid #F0CFB0;
}

/* Two-up stat rows — distance, FPE, fees, hours */
.popover-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin: 4px 0 8px;
  padding: 8px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.popover-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.popover-stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal-3);
}
.popover-stat-value {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: var(--charcoal);
  line-height: 1.35;
  font-weight: 500;
  word-wrap: break-word;
}

/* Short snippet of the airgun policy text. Italic, small, set apart. */
.popover-allowance {
  margin: 6px 0 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px;
  font-style: italic;
  color: var(--charcoal-2);
  line-height: 1.5;
}

/* Actions row at the bottom — primary "Full listing" + secondary "Directions" */
.popover-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.popover-secondary {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--charcoal-3);
  text-decoration: none;
}
.popover-secondary:hover {
  color: var(--charcoal);
  text-decoration: underline;
}

/* fuzzy-location warning banner inside popover */
.popover-fuzzy {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--charcoal-3);
  background: var(--paper-warm);
  padding: 4px 8px;
  border-radius: var(--r);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.popover-fuzzy::before {
  content: '!';
  display: inline-flex;
  width: 14px; height: 14px;
  align-items: center;
  justify-content: center;
  background: var(--tier-3);
  color: white;
  border-radius: 50%;
  font-family: 'Archivo';
  font-weight: 800;
  font-size: 10px;
}

/* "Drill in" hint that appears in default map */
.dir-map-hint {
  position: absolute;
  bottom: 14px;
  left: 16px;
  z-index: 4;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--rule);
  padding: 7px 12px;
  border-radius: var(--r);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--charcoal-3);
  font-weight: 600;
}

/* ============================================================
   RESULTS HEADER (count + sort)
============================================================ */
.dir-results-header {
  max-width: var(--content-max);
  margin: 0 auto var(--s-4);
  padding: var(--s-7) var(--gutter) 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}

/* Prominent banner shown when the user has activated "Find closest to me"
   AND distance sort is active. Replaces the easily-missed inline subtext. */
.dir-nearest-banner {
  max-width: var(--content-max);
  margin: 0 auto var(--s-4);
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--orange-tint) 0%, #FCE3CD 100%);
  border: 1.5px solid var(--orange-soft);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 14px -6px rgba(242,92,31,0.25);
}
.dir-nearest-banner[hidden] { display: none; }
.nearest-banner-icon {
  width: 38px; height: 38px;
  flex: 0 0 auto;
  background: var(--orange);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
}
.nearest-banner-icon svg { width: 18px; height: 18px; }
.nearest-banner-icon::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(242, 92, 31, 0.25);
  animation: nearest-pulse 2s ease-in-out infinite;
  z-index: -1;
}
@keyframes nearest-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 0.3; }
}
.nearest-banner-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.nearest-banner-text strong {
  font: 700 var(--t-base) 'DM Sans', sans-serif;
  color: var(--charcoal);
  letter-spacing: -0.01em;
}
.nearest-banner-text span {
  font-size: var(--t-sm);
  color: var(--charcoal-2);
  font-family: 'DM Sans', sans-serif;
}
.nearest-banner-clear {
  appearance: none;
  border: 1.5px solid var(--charcoal);
  background: transparent;
  color: var(--charcoal);
  font: 600 13px 'DM Sans', sans-serif;
  letter-spacing: -0.005em;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all 0.14s ease;
  flex: 0 0 auto;
  white-space: nowrap;
}
.nearest-banner-clear:hover {
  background: var(--charcoal);
  color: var(--paper);
}

@media (max-width: 600px) {
  .dir-nearest-banner {
    flex-wrap: wrap;
  }
  .nearest-banner-clear {
    width: 100%;
  }
}
.dir-results-count {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: var(--t-2xl);
  letter-spacing: -0.022em;
  color: var(--charcoal);
}
.dir-results-count em {
  font-style: normal;
  color: var(--orange-deep);
  font-weight: 800;
}
.dir-results-sub {
  font-size: var(--t-sm);
  color: var(--charcoal-3);
  margin-left: 8px;
  font-weight: 400;
}
.dir-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dir-sort-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-eye);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.dir-sort-wrap { position: relative; display: inline-flex; align-items: center; }
.dir-sort-wrap select {
  appearance: none;
  border: 1.5px solid var(--rule-2);
  background: white;
  border-radius: var(--r-pill);
  padding: 8px 30px 8px 14px;
  font: 500 var(--t-sm) 'DM Sans', sans-serif;
  color: var(--charcoal);
  cursor: pointer;
  outline: none;
}
.dir-sort-wrap select:hover, .dir-sort-wrap select:focus { border-color: var(--orange); }
.dir-sort-wrap::after {
  content: '';
  position: absolute;
  right: 12px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--charcoal-3);
  border-bottom: 2px solid var(--charcoal-3);
  transform: translateY(-30%) rotate(45deg);
  pointer-events: none;
}

/* ============================================================
   RANGE GRID (cards) — same visual as v1
============================================================ */
.dir-ranges-section {
  padding: 0 var(--gutter) var(--s-7);
}
.dir-ranges-grid {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--s-4);
}
.range-card {
  background: white;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  box-shadow: var(--shadow-sm);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.range-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rule);
  transition: background 0.16s ease;
}
.range-card[data-venue="private_club"]::before { background: linear-gradient(90deg, var(--orange) 0%, var(--orange-deep) 100%); }
.range-card[data-venue="club"]::before { background: linear-gradient(90deg, var(--orange-soft) 0%, var(--orange) 100%); }
.range-card[data-venue="public"]::before { background: linear-gradient(90deg, var(--tier-4) 0%, #3A6225 100%); }
.range-card[data-venue="commercial"]::before { background: linear-gradient(90deg, var(--charcoal-3) 0%, var(--charcoal) 100%); }
.range-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--rule-2);
}

.range-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-3);
}
.range-card-name {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: var(--t-lg);
  letter-spacing: -0.018em;
  color: var(--charcoal);
  line-height: 1.2;
  margin: 0;
  flex: 1;
}
.range-state-badge {
  flex-shrink: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 11px;
  color: var(--orange-deep);
  background: var(--orange-tint);
  padding: 4px 9px;
  border-radius: var(--r-pill);
  letter-spacing: 0.04em;
}
.range-card-loc {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-sm);
  color: var(--charcoal-3);
}
.range-card-loc svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--muted); }
.range-card-distance {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--orange-deep);
  letter-spacing: 0.04em;
  margin-left: auto;
}

.range-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.range-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--paper-warm);
  color: var(--charcoal-3);
  border: 1px solid var(--rule);
  white-space: nowrap;
}
.range-tag.t-venue-private_club { background: var(--orange-tint); color: var(--orange-deep); border-color: #F0CFB0; }
.range-tag.t-venue-club { background: #FBF0D8; color: #8C5E14; border-color: #E5C078; }
.range-tag.t-venue-public { background: #EDF3DE; color: #3A6225; border-color: #C6D8A5; }
.range-tag.t-venue-commercial { background: #ECEDEF; color: var(--charcoal-2); border-color: #C4C8CD; }
.range-tag.t-io-indoor { background: #E8EEF2; color: #2C4F66; border-color: #B8CADA; }
.range-tag.t-io-outdoor { background: #EDF3DE; color: #3A6225; border-color: #C6D8A5; }
.range-tag.t-io-both { background: #F4ECFA; color: #5C2E7A; border-color: #D8C5E5; }
.range-tag.t-access-public { background: #EDF3DE; color: #3A6225; border-color: #C6D8A5; }
.range-tag.t-access-members_only { background: #FBE5DC; color: #7A2812; border-color: #E5B5A1; }
.range-tag.t-access-matches { background: #FBF0D8; color: #8C5E14; border-color: #E5C078; }

.range-card-summary {
  font-size: var(--t-sm);
  color: var(--charcoal-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.range-card-discs {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 2px;
}
.range-disc {
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--charcoal-3);
  background: white;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
}
.range-card-foot {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px dashed var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.range-card-conf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.conf-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rule-2);
}
.conf-dot.c-high { background: var(--tier-4); }
.conf-dot.c-medium-high { background: var(--rank-2); }
.conf-dot.c-medium { background: var(--tier-3); }
.conf-dot.c-low { background: var(--tier-1); }
.range-card-arrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--orange-deep);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Empty state */
.dir-ranges-empty {
  max-width: 600px;
  margin: var(--s-9) auto;
  text-align: center;
  padding: var(--s-9) var(--s-6);
  background: var(--paper-warm);
  border: 1.5px dashed var(--rule-2);
  border-radius: var(--r-xl);
}
.dir-ranges-empty h3 {
  font-family: 'Archivo', sans-serif;
  font-size: var(--t-2xl);
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--charcoal);
  margin: 0 0 var(--s-3);
}
.dir-ranges-empty p {
  font-size: var(--t-base);
  color: var(--charcoal-3);
  margin: 0 0 var(--s-5);
}

/* ============================================================
   PAGINATION
============================================================ */
.dir-pagination {
  max-width: var(--content-max);
  margin: var(--s-7) auto 0;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.dir-page-btn {
  appearance: none;
  border: 1.5px solid var(--rule-2);
  background: white;
  color: var(--charcoal);
  font: 600 var(--t-sm) 'DM Sans', sans-serif;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all 0.14s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 40px;
  justify-content: center;
}
.dir-page-btn:hover:not([disabled]):not(.is-current) {
  border-color: var(--charcoal-3);
  background: var(--paper-warm);
  transform: translateY(-1px);
}
.dir-page-btn[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}
.dir-page-btn.is-current {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--paper);
  cursor: default;
}
.dir-page-btn svg { width: 12px; height: 12px; }
.dir-page-ellipsis {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-sm);
  color: var(--muted);
  font-weight: 600;
  padding: 0 4px;
}
.dir-page-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-eye);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-left: var(--s-4);
}

/* ============================================================
   COVERAGE GAPS SECTION (unchanged from v1)
============================================================ */
.gaps-section {
  padding: var(--section-y) var(--gutter);
  background: linear-gradient(to bottom, var(--paper) 0%, var(--paper-warm) 100%);
  border-top: 1px solid var(--rule);
}
.gaps-inner { max-width: var(--content-max); margin: 0 auto; }
.gaps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-4);
}
.gap-card {
  background: white;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  position: relative;
  overflow: hidden;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.gap-card:hover {
  border-color: var(--rule-2);
  box-shadow: 0 6px 18px -10px rgba(45,54,61,0.18);
}
.gap-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--orange);
}
.gap-region {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: var(--t-md);
  letter-spacing: -0.015em;
  color: var(--charcoal);
  line-height: 1.25;
}
.gap-states {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.gap-state {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  background: var(--paper-warm);
  color: var(--charcoal-3);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  letter-spacing: 0.05em;
}
.gap-note {
  font-size: var(--t-sm);
  color: var(--charcoal-2);
  line-height: 1.5;
  margin: 0;
  flex: 1 1 auto;
}
/* Suggest-a-range button on each gap tile — pulls people directly from
   "this region needs help" to the suggest form with the state pre-filled. */
.gap-suggest-btn {
  appearance: none;
  border: 1.5px solid var(--rule-2);
  background: var(--paper-warm);
  color: var(--charcoal);
  font: 600 var(--t-sm) 'DM Sans', sans-serif;
  letter-spacing: -0.005em;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: all 0.14s ease;
  margin-top: var(--s-2);
}
.gap-suggest-btn:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: white;
}
.gap-suggest-btn svg {
  width: 12px; height: 12px;
  flex-shrink: 0;
}

/* ============================================================
   CONTRIBUTE SECTION (Submit + Claim)
============================================================ */
.contribute-section {
  padding: var(--section-y) var(--gutter);
  background: var(--charcoal);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.contribute-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' seed='6'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events: none;
  opacity: 0.5;
}
.contribute-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  position: relative;
}
.contribute-head {
  text-align: center;
  margin-bottom: var(--s-9);
  max-width: 720px;
  margin-inline: auto;
}
.contribute-head .eye { color: var(--orange); }
.contribute-head h2 {
  font-size: var(--t-4xl);
  font-weight: 900;
  letter-spacing: -0.028em;
  color: var(--paper);
  margin: var(--s-3) 0 var(--s-4);
  line-height: 1.05;
}
.contribute-head h2 em {
  font-style: normal;
  color: var(--orange);
  font-weight: 900;
}
.contribute-head p {
  font-size: var(--t-lg);
  color: rgba(244,241,234,0.78);
  line-height: 1.55;
}

.contribute-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
}
.contribute-card {
  background: rgba(244,241,234,0.04);
  border: 1.5px solid rgba(244,241,234,0.12);
  border-radius: var(--r-xl);
  padding: var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.contribute-card-eye {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-eye);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}
.contribute-card-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: var(--t-2xl);
  letter-spacing: -0.022em;
  color: var(--paper);
  line-height: 1.15;
  margin: 0;
}
.contribute-card-text {
  font-size: var(--t-base);
  color: rgba(244,241,234,0.78);
  line-height: 1.55;
  margin: 0;
}
.contribute-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-3);
}
.contribute-btn {
  appearance: none;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: var(--t-base);
  letter-spacing: -0.005em;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.16s ease;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.contribute-btn--primary {
  background: var(--orange);
  color: var(--paper);
  border-color: var(--orange);
}
.contribute-btn--primary:hover {
  background: var(--orange-deep);
  border-color: var(--orange-deep);
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(242,92,31,0.5);
}
.contribute-btn--ghost {
  background: transparent;
  color: var(--paper);
  border-color: rgba(244,241,234,0.35);
}
.contribute-btn--ghost:hover {
  background: rgba(244,241,234,0.08);
  border-color: var(--paper);
  color: var(--paper);
}

/* ============================================================
   FORM MODAL (Submit a range / Claim listing)
   Reuses .detail-overlay close pattern
============================================================ */
.form-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 37, 40, 0.55);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--s-7) var(--s-4);
  overflow-y: auto;
  animation: overlayFade 0.18s ease;
}
.form-overlay[hidden] { display: none; }
@keyframes overlayFade { from { opacity: 0; } to { opacity: 1; } }

.form-modal {
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 640px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: modalRise 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes modalRise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.form-modal-head {
  position: relative;
  padding: var(--s-6) var(--s-7) var(--s-4);
  background: linear-gradient(135deg, #FFFCF6 0%, var(--paper-warm) 100%);
  border-bottom: 1px solid var(--rule);
}
.form-modal-eye {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-eye);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-deep);
  display: block;
  margin-bottom: var(--s-2);
}
.form-modal-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: var(--t-2xl);
  letter-spacing: -0.022em;
  color: var(--charcoal);
  line-height: 1.1;
  margin: 0 0 var(--s-2);
  padding-right: 50px;
}
.form-modal-sub {
  font-size: var(--t-sm);
  color: var(--charcoal-3);
  margin: 0;
}
.form-modal-close {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  appearance: none;
  border: 1.5px solid var(--rule-2);
  background: white;
  color: var(--charcoal-3);
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.14s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.form-modal-close:hover {
  background: var(--charcoal);
  color: var(--paper);
  border-color: var(--charcoal);
  transform: rotate(90deg);
}

.form-modal-body {
  padding: var(--s-6) var(--s-7) var(--s-7);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--s-4);
}
.form-row.row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.form-row.row-split > * { display: flex; flex-direction: column; gap: 6px; }

.form-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal-3);
}
.form-label .req { color: var(--orange-deep); margin-left: 2px; }

.form-input, .form-textarea, .form-select {
  appearance: none;
  border: 1.5px solid var(--rule-2);
  background: white;
  border-radius: var(--r-md);
  padding: 11px 14px;
  font: 500 var(--t-base) 'DM Sans', sans-serif;
  color: var(--charcoal);
  outline: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
  width: 100%;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--orange);
  box-shadow: var(--focus-ring);
}
.form-textarea { min-height: 100px; resize: vertical; line-height: 1.55; }

/* File input — styled to match the other form inputs visually */
.form-file {
  appearance: none;
  border: 1.5px dashed var(--rule-2);
  background: var(--paper-warm);
  border-radius: var(--r-md);
  padding: 14px;
  font: 500 var(--t-sm) 'DM Sans', sans-serif;
  color: var(--charcoal);
  outline: none;
  transition: border-color 0.14s ease, background 0.14s ease;
  width: 100%;
  cursor: pointer;
}
.form-file:hover {
  border-color: var(--orange);
  background: white;
}
.form-file:focus {
  border-color: var(--orange);
  box-shadow: var(--focus-ring);
}
.form-file::file-selector-button {
  appearance: none;
  border: 1.5px solid var(--charcoal);
  background: var(--charcoal);
  color: var(--paper);
  font: 600 13px 'DM Sans', sans-serif;
  letter-spacing: -0.005em;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  margin-right: 12px;
  transition: background 0.14s ease;
}
.form-file::file-selector-button:hover {
  background: var(--charcoal-2);
}

/* Checkbox row — horizontal label + box */
.form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 var(--t-base) 'DM Sans', sans-serif;
  color: var(--charcoal);
  cursor: pointer;
  user-select: none;
}
.form-check input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--rule-2);
  background: white;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.14s ease;
  position: relative;
}
.form-check input[type="checkbox"]:hover {
  border-color: var(--charcoal-3);
}
.form-check input[type="checkbox"]:checked {
  background: var(--orange);
  border-color: var(--orange);
}
.form-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(45deg);
}
.form-check input[type="checkbox"]:focus-visible {
  box-shadow: var(--focus-ring);
}
.form-select-wrap { position: relative; }
.form-select-wrap::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--charcoal-3);
  border-bottom: 2px solid var(--charcoal-3);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.form-help {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  font-style: italic;
}

.form-actions {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.form-submit {
  appearance: none;
  border: none;
  background: var(--orange);
  color: var(--paper);
  font: 700 var(--t-base) 'DM Sans', sans-serif;
  letter-spacing: -0.005em;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all 0.14s ease;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  justify-content: center;
}
.form-submit:hover {
  background: var(--orange-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(242,92,31,0.5);
}
.form-cancel {
  appearance: none;
  border: 1.5px solid var(--rule-2);
  background: transparent;
  color: var(--charcoal-3);
  font: 500 var(--t-base) 'DM Sans', sans-serif;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all 0.14s ease;
}
.form-cancel:hover {
  background: white;
  color: var(--charcoal);
  border-color: var(--charcoal);
}

.form-success {
  background: #EDF3DE;
  border: 1.5px solid #C6D8A5;
  border-radius: var(--r-md);
  padding: var(--s-5);
  text-align: center;
  display: none;
}
.form-success.is-shown { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.form-success-eye {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-eye);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #3A6225;
  display: block;
  margin-bottom: var(--s-2);
}
.form-success-text {
  font-size: var(--t-base);
  color: var(--charcoal-2);
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
   PER-RANGE LISTING PAGE
   (used in /ranges/<slug>.html)
============================================================ */
.listing-section {
  padding: var(--s-9) var(--gutter) var(--s-7);
}
.listing-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.listing-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-eye);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: var(--s-5);
}
.listing-breadcrumb a {
  color: var(--orange-deep);
  text-decoration: none;
}
.listing-breadcrumb a:hover { color: var(--orange); }
.listing-breadcrumb-sep { color: var(--rule-2); }

.listing-header {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--s-7);
}
.listing-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  /* Scale with viewport. Min 28px, ideal 4vw, max 52px. */
  font-size: clamp(28px, 4vw, 52px);
  letter-spacing: -0.03em;
  color: var(--charcoal);
  line-height: 1.05;
  margin: 0 0 var(--s-3);
}
.listing-loc {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-lg);
  color: var(--charcoal-3);
  margin-bottom: var(--s-4);
}
.listing-loc svg { width: 18px; height: 18px; color: var(--orange-deep); }

.listing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* Static map preview on listing page */
.listing-map-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 1.4 / 1;
  background: var(--paper-warm);
  border: 1.5px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.listing-map-preview svg { width: 100%; height: 100%; display: block; }
.listing-map-preview-eye {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal-3);
  background: rgba(255,255,255,0.85);
  padding: 4px 9px;
  border-radius: var(--r);
  font-weight: 600;
}

/* Photos section — placeholder grid */
.listing-photos {
  margin-bottom: var(--s-9);
}
.listing-photos-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-4);
}
.listing-photos-head h2 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: var(--t-2xl);
  letter-spacing: -0.022em;
  color: var(--charcoal);
  margin: 0;
}
.listing-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-3);
}
.photo-placeholder {
  aspect-ratio: 4 / 3;
  background: var(--paper-warm);
  border: 1.5px dashed var(--rule-2);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: var(--t-xs);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.photo-placeholder svg { width: 32px; height: 32px; opacity: 0.4; }

/* Two-column body */
.listing-body {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--s-9);
  margin-bottom: var(--s-9);
}

/* Listing-main flex column.
   Gap is the SINGLE source of vertical rhythm between the description,
   callouts, disciplines, venue type, restrictions, state policy, reviews,
   and source blocks. Each child block contributes its own internal padding
   (callout fills, card frames, etc) but never an outer margin — that would
   stack with the gap and create the hard-blocked spacing that the earlier
   build had. */
.listing-main {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}

/* Reset the global "section { padding: var(--section-y) 0 }" rule that
   the vendored dev-base.css applies to bare <section> elements. That rule
   is intended for top-level page sections (Hero, About, Pricing) and adds
   ~96-144px of vertical padding — way too much when sections are stacked
   children inside a content column.

   Using :where() keeps this reset's specificity at 0 so any component
   that legitimately wants its own padding (like .reviews-placeholder
   with its dashed-border card treatment) still wins. */
:where(.listing-main) > section {
  padding: 0;
  position: static;
}

.listing-side {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.listing-block-eye {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-eye);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-deep);
  display: block;
  margin-bottom: var(--s-3);
}
.listing-block-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: var(--t-xl);
  letter-spacing: -0.02em;
  color: var(--charcoal);
  margin: 0 0 var(--s-3);
}
.listing-prose {
  font-size: var(--t-base);
  color: var(--charcoal-2);
  line-height: 1.65;
  margin: 0;
}

.listing-callout {
  background: white;
  border: 1.5px solid var(--rule);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-5);
  font-size: var(--t-base);
  color: var(--charcoal-2);
  line-height: 1.6;
}
.listing-callout.is-warning {
  border-left-color: var(--tier-2);
  background: #FBF6EC;
}

/* Cover image — full-width hero at the top of the listing. Same aspect
   ratio (16:9) for every listing whether or not we have a photo, so layout
   doesn't shift between pages. v22 introduces cover_image_source_url which
   is sometimes a direct image URL, sometimes a venue-page URL we'd OG-scrape
   server-side later — when it's not a direct image we render the placeholder
   icon. */
.listing-cover-image {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-warm);
  box-shadow: 0 4px 16px -8px rgba(45,54,61,0.18);
  aspect-ratio: 16 / 9;
  position: relative;
  /* Hard cap so on very wide screens the image doesn't get unreasonably
     tall. With main-column maxing around 830px the natural 16:9 height is
     ~467px, which is fine; the cap kicks in only if the layout grows. */
  max-height: 500px;
}
.listing-cover-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.listing-cover-image--placeholder {
  background: linear-gradient(135deg, var(--paper) 0%, var(--paper-warm) 60%, #F2DCC2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--rule);
  box-shadow: none;
}
.listing-cover-image--placeholder svg {
  width: 88px;
  height: 88px;
  color: var(--charcoal-3);
  opacity: 0.35;
}

/* Quick-info strip — address / hours / phone / website featured prominently
   under the title. Each cell is a small icon + label/value pair. Items that
   are clickable (address-with-directions, phone, website) become anchor
   tags that hover into orange. */
.listing-quick-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
  padding: var(--s-5) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.listing-info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 0;
  text-decoration: none;
  color: inherit;
  transition: color 0.14s ease;
  min-width: 0;
}
a.listing-info-item:hover {
  color: var(--orange-deep);
}
a.listing-info-item:hover .listing-info-icon {
  background: var(--orange);
  color: white;
  border-color: var(--orange);
}
.listing-info-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  color: var(--charcoal-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.14s ease;
}
.listing-info-icon svg { width: 14px; height: 14px; }
.listing-info-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.listing-info-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal-3);
}
.listing-info-value {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.4;
  word-break: break-word;
}

/* Range description block — featured prominently when v22 prose is present.
   Larger leading, slightly bigger size, and a left-edge accent that signals
   this is curated content (not just data fields). */
.listing-description {
  margin: 0;
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  border-left: 3px solid var(--orange);
}
.listing-description-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}
.listing-description .listing-block-eye {
  display: block;
  margin-bottom: 0;
  color: var(--orange-deep);
}
.listing-description .listing-prose {
  font-size: var(--t-md);
  line-height: 1.65;
  color: var(--charcoal);
  margin: 0 0 var(--s-3);
}
.listing-description .listing-prose:last-child {
  margin-bottom: 0;
}

/* Evidence-tier badge — surfaces v22's airgun_evidence_tier field so users
   know whether the description is grounded in current sources (strong),
   plausible inference from state policy (moderate), or honest "we couldn't
   confirm — call ahead" (weak). Three semantic color treatments. */
.evidence-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.evidence-badge--strong {
  background: #E0F0E2;
  color: #2D5F32;
  border: 1px solid #C7E5C9;
}
.evidence-badge--moderate {
  background: #F4E4C0;
  color: #7A5810;
  border: 1px solid #EBD8B5;
}
.evidence-badge--weak {
  background: #FBE6DC;
  color: #8A3A1C;
  border: 1px solid #F0C8B6;
}

/* Sidebar map card — smaller than the old header version since it now lives
   in the right rail. Removes the giant state-letter backdrop per design
   feedback. */
.listing-map-card {
  padding: var(--s-4) !important;
}
.listing-map-card .listing-block-eye {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--charcoal-3);
}
.listing-map-card #listing-map {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  background: #FCEAD9;
}

/* State-level airgun policy section. Inline section (not a dropdown),
   placed between "About the venue" and "Reviews" on the listing page.
   Subdued visual treatment so it never visually competes with the
   range-specific content above it, but clearly labeled as state-level
   information so the user immediately understands the scope.

   Single instance on the page — the old bottom-of-page dropdown variant
   was removed per design feedback.  */
.state-policy-section {
  margin: 0;
}
.state-policy-eye {
  display: block;
  margin-bottom: var(--s-3);
  color: var(--charcoal-3);
}
.state-policy-card {
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.state-policy-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}
.state-policy-tier-badge {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--charcoal);
  color: var(--paper);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.state-policy-tier-desc {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--charcoal-2);
  line-height: 1.5;
  font-style: italic;
  flex: 1 1 auto;
  min-width: 200px;
}
.state-policy-summary {
  margin: 0 0 var(--s-3);
  font-size: var(--t-sm);
  color: var(--charcoal);
  line-height: 1.55;
}
.state-policy-evidence,
.state-policy-restrictions {
  margin: 0 0 var(--s-3);
  font-size: 13px;
  color: var(--charcoal-2);
  line-height: 1.55;
}
.state-policy-row-label {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal-3);
  margin-right: 4px;
}
.state-policy-disclaimer {
  margin: var(--s-4) 0 0;
  padding: var(--s-3) var(--s-4);
  background: white;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--charcoal-3);
  line-height: 1.5;
}
.state-policy-disclaimer strong { color: var(--charcoal); }

.listing-side-card {
  background: white;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
}
.listing-side-card h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-eye);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin: 0 0 var(--s-4);
}
.listing-fact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--s-3) 0;
  border-bottom: 1px dashed var(--rule);
}
.listing-fact:last-child { border-bottom: none; padding-bottom: 0; }
.listing-fact:first-of-type { padding-top: 0; }
.listing-fact-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.listing-fact-value {
  font-size: var(--t-sm);
  color: var(--charcoal);
  line-height: 1.45;
  font-weight: 500;
  word-break: break-word;
}
.listing-fact-value a { color: var(--orange-deep); font-weight: 600; word-break: break-all; }
.listing-fact-value a:hover { color: var(--orange); text-decoration: underline; }
.listing-fact-empty { color: var(--muted); font-style: italic; font-weight: 400; }

.listing-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.listing-action-btn {
  appearance: none;
  border: 1.5px solid;
  font: 600 var(--t-sm) 'DM Sans', sans-serif;
  letter-spacing: -0.005em;
  padding: 11px 16px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all 0.14s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
}
.listing-action-btn--block { width: 100%; }
.listing-action-btn--primary {
  background: var(--orange);
  border-color: var(--orange);
  color: white;
}
.listing-action-btn--primary:hover {
  background: var(--orange-deep);
  border-color: var(--orange-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(242,92,31,0.4);
}
/* Solid charcoal "secondary" — stands out more than ghost. Used for
   Visit website + Call buttons so they read as real CTAs rather than
   afterthoughts. */
.listing-action-btn--secondary {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--paper);
}
.listing-action-btn--secondary:hover {
  background: var(--charcoal-2);
  border-color: var(--charcoal-2);
  color: var(--paper);
  transform: translateY(-1px);
}
.listing-action-btn--ghost {
  background: white;
  border-color: var(--rule-2);
  color: var(--charcoal);
}
.listing-action-btn--ghost:hover {
  background: var(--paper-warm);
  border-color: var(--charcoal-3);
}
.listing-action-btn svg { width: 13px; height: 13px; }

/* Sidebar action-card variants — give the Take Action card slight visual
   prominence so it reads as the most important sidebar block. */
.listing-actions-card {
  background: linear-gradient(135deg, #FFFCF6 0%, var(--orange-tint) 100%);
  border-color: #F0CFB0;
  box-shadow: 0 6px 18px -8px rgba(242,92,31,0.18);
}
.listing-actions-card h3 { color: var(--orange-deep); }

.listing-owner-card {
  background: var(--paper-warm);
  border-color: var(--rule-2);
}
.listing-owner-card h3 { color: var(--charcoal); margin-bottom: var(--s-2); }
.listing-owner-text {
  font-size: var(--t-sm);
  color: var(--charcoal-3);
  line-height: 1.55;
  margin: 0 0 var(--s-3);
}
.listing-owner-card .listing-action-btn--block + .listing-action-btn--block {
  margin-top: 8px;
}

.listing-actions-empty {
  font-size: var(--t-sm);
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
  margin: 0;
}

/* Reviews placeholder */
.reviews-placeholder {
  background: var(--paper-warm);
  border: 1.5px dashed var(--rule-2);
  border-radius: var(--r-lg);
  padding: var(--s-9) var(--s-6);
  text-align: center;
  color: var(--charcoal-3);
}
.reviews-placeholder h3 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: var(--t-lg);
  color: var(--charcoal);
  margin: 0 0 var(--s-3);
  letter-spacing: -0.018em;
}
.reviews-placeholder p {
  font-size: var(--t-sm);
  margin: 0;
  max-width: 480px;
  margin-inline: auto;
  line-height: 1.55;
}

/* Source / verification block on listing — just date + link, no confidence */
.listing-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  color: var(--charcoal-3);
  border-radius: var(--r-md);
  flex-wrap: wrap;
}
.listing-source-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.listing-source-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-eye);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.listing-source-date {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--t-sm);
  color: var(--charcoal-2);
  font-weight: 600;
}
.listing-source-link {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--t-sm);
  color: var(--orange-deep);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  word-break: break-all;
  text-decoration: none;
}
.listing-source-link:hover { color: var(--orange); border-bottom-color: var(--orange); }

/* Disciplines pills inside listing */
.listing-disc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: var(--s-4);
}
.listing-disc {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--t-sm);
  font-weight: 500;
  background: var(--orange-tint);
  color: var(--orange-deep);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid #F0CFB0;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1180px) {
  .dir-finder { grid-template-columns: 1fr 1fr; }
  .dir-finder .finder-or { display: none; }
  .listing-body { grid-template-columns: 1fr; }
  .contribute-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  /* Trim nav: drop secondary anchors at this breakpoint to prevent overflow */
  .hdr-nav .nav-secondary { display: none; }

  .dir-filter-bar { padding: var(--s-6) var(--gutter); }
  .dir-filter-inner { gap: var(--s-5); }
  .dir-filter-group { width: 100%; }
  .dir-filter-grouplabel { font-size: 11px; color: var(--orange-deep); }

  .dir-finder { grid-template-columns: 1fr; gap: 8px; }
  .dir-finder .finder-or { display: none; }

  .dir-map-card { aspect-ratio: 1.3 / 1; min-height: 320px; }
  .dir-map-corner-tr { display: none; }
  .dir-map-watermark { width: 80px; bottom: 8px; right: 8px; }
  .dir-map-hint { display: none; }

  .dir-pin-popover { width: 240px; }

  .dir-results-header { flex-direction: column; align-items: flex-start; }
  .dir-ranges-grid { grid-template-columns: 1fr; }

  .form-overlay { padding: var(--s-3); }
  .form-modal-head { padding: var(--s-5); }
  .form-modal-body { padding: var(--s-5); }
  .form-row.row-split { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column-reverse; }
  .form-cancel, .form-submit { width: 100%; }

  .listing-section { padding: var(--s-6) var(--gutter); }
  .listing-title { font-size: var(--t-4xl); }
}

@media (max-width: 560px) {
  .hdr-nav { gap: var(--s-3); }
  .hdr-nav .nav-tertiary { display: none; }
  .hdr-nav a { font-size: 12px; font-weight: 600; }
  .dir-pagination { gap: 6px; }
  .dir-page-meta { display: none; }
}

/* ============================================================
   SEARCH AUTOCOMPLETE DROPDOWN
   Sits as the top layer above everything else when typing.
   
   IMPORTANT: position: fixed (not absolute) is required because
   body has overflow-x: hidden which creates a containing block
   that would otherwise clip an absolute-positioned dropdown. By
   using fixed positioning + JS-computed coordinates (set in
   app.js), the dropdown floats above ALL page elements.
============================================================ */
.search-autocomplete {
  position: fixed;
  /* top/left set dynamically by JS to track the input */
  background: white;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 48px -12px rgba(45, 54, 61, 0.32), 0 4px 12px -4px rgba(45, 54, 61, 0.12);
  max-height: 420px;
  overflow-y: auto;
  z-index: 9999;
  padding: 6px 0;
  font-family: 'DM Sans', sans-serif;
}
.search-autocomplete[hidden] { display: none; }

.search-autocomplete-group {
  padding: 8px 14px 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-eye);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  background: linear-gradient(180deg, #FFFCF6 0%, transparent 100%);
}

.search-autocomplete-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--charcoal);
  cursor: pointer;
  transition: background 0.12s ease;
}
.search-autocomplete-item:hover,
.search-autocomplete-item.is-active {
  background: var(--paper-warm);
  outline: none;
}

.search-autocomplete-icon {
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-top: 2px;
  color: var(--orange-deep);
}
.search-autocomplete-icon svg { width: 16px; height: 16px; display: block; }

.search-autocomplete-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-autocomplete-name {
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.3;
  color: var(--charcoal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-autocomplete-meta {
  font-size: var(--t-sm);
  color: var(--muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-autocomplete-name mark,
.search-autocomplete-meta mark {
  background: rgba(242, 92, 31, 0.18);
  color: inherit;
  padding: 0;
  border-radius: 2px;
  font-weight: 700;
}

.search-autocomplete-badge {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--paper-warm);
  color: var(--charcoal-3);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  align-self: center;
}
.search-autocomplete-badge.is-strong {
  background: rgba(46, 152, 100, 0.12);
  color: #1f6e47;
}

.search-autocomplete-empty,
.search-autocomplete-more {
  padding: 12px 14px;
  font-size: var(--t-sm);
  color: var(--muted);
  text-align: left;
  border-top: 1px dashed var(--rule);
  margin-top: 4px;
}
.search-autocomplete-empty:first-child,
.search-autocomplete-more:first-child {
  border-top: none;
  margin-top: 0;
}
.search-autocomplete-more strong { color: var(--charcoal); font-weight: 700; }

@media (max-width: 720px) {
  .search-autocomplete { max-height: 60vh; }
  .search-autocomplete-name { font-size: 14px; }
}

/* ============================================================
   AIRGUN CONFIRMATION TAGS
   .t-airgun-confirmed: venue-level evidence of airgun acceptance
   .t-airgun-unconfirmed: acceptance inferred from state law only,
   needs phone confirmation. This is the most important signal on
   a card — placed first so users see it before anything else.
============================================================ */
.range-tag.t-airgun-confirmed {
  background: rgba(46, 152, 100, 0.14);
  color: #1f6e47;
  border: 1px solid rgba(46, 152, 100, 0.32);
  font-weight: 700;
}
.range-tag.t-airgun-unconfirmed {
  background: rgba(242, 152, 32, 0.16);
  color: #8a5512;
  border: 1px solid rgba(242, 152, 32, 0.35);
  font-weight: 700;
}

/* Autocomplete: orange "Call ahead" badge for unconfirmed records */
.search-autocomplete-badge.is-unconfirmed {
  background: rgba(242, 152, 32, 0.16);
  color: #8a5512;
}

/* ============================================================
   LISTING PAGE: AIRGUN POLICY CALLOUT
   When a record is airgun_confirmed=false, the listing page shows
   a prominent banner explaining that acceptance is inferred from
   state law and the venue should be called to confirm.
============================================================ */
.airgun-policy-banner {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(242, 152, 32, 0.08) 0%, rgba(242, 92, 31, 0.06) 100%);
  border: 1.5px solid rgba(242, 152, 32, 0.35);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-5);
  align-items: flex-start;
}
.airgun-policy-banner-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(242, 152, 32, 0.22);
  color: #8a5512;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  flex-shrink: 0;
}
.airgun-policy-banner-content {
  flex: 1;
  min-width: 0;
}
.airgun-policy-banner-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: var(--t-base);
  letter-spacing: -0.01em;
  color: #6b4012;
  margin: 0 0 4px;
  line-height: 1.3;
}
.airgun-policy-banner-text {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--t-sm);
  color: var(--charcoal-2);
  line-height: 1.5;
  margin: 0;
}
.airgun-policy-banner-text strong {
  color: var(--charcoal);
  font-weight: 700;
}

/* Confirmed-airgun banner (green, less prominent — celebratory) */
.airgun-confirmed-banner {
  display: flex;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(46, 152, 100, 0.08);
  border: 1.5px solid rgba(46, 152, 100, 0.28);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-5);
  align-items: center;
}
.airgun-confirmed-banner-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: #1f6e47;
}
.airgun-confirmed-banner-text {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--t-sm);
  color: #1f6e47;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}

/* Location-pending card (shown when geo_quality is state-only) */
.listing-map-pending {
  background: linear-gradient(135deg, rgba(45, 54, 61, 0.04) 0%, var(--paper-warm) 100%);
  border: 1.5px dashed var(--rule-2);
}
.listing-map-pending-text {
  font-size: var(--t-sm);
  color: var(--charcoal-2);
  margin: 8px 0 0;
}

/* ============================================================
   PIN CONFIRMATION COLORING (added with v121 update)
   - Default (no modifier): orange-deep — moderate confirmation
   - .is-confirmed-strong: green — direct venue-level evidence
   - .is-unconfirmed: amber/orange-soft — state-law inference, call ahead
   
   These compose with .is-fuzzy (city/state-level geocode) and .is-active
   (currently selected pin). The classes preserve all existing transitions
   and the hover-color-change behavior.
============================================================ */
.dir-pin.is-confirmed-strong .pin-body {
  fill: #2e9864;          /* green — venue-confirmed */
  stroke: white;
}
.dir-pin.is-confirmed-strong:hover .pin-body {
  fill: #38b376;
  filter: drop-shadow(0 3px 5px rgba(46, 152, 100, 0.4));
}
.dir-pin.is-unconfirmed .pin-body {
  fill: #d99a3e;          /* amber — call ahead */
  stroke: white;
}
.dir-pin.is-unconfirmed:hover .pin-body {
  fill: #ecaf4c;
  filter: drop-shadow(0 3px 5px rgba(217, 154, 62, 0.4));
}

/* Fuzzy + confirmed-strong: muted green */
.dir-pin.is-confirmed-strong.is-fuzzy .pin-body {
  fill: rgba(46, 152, 100, 0.62);
  opacity: 0.85;
}
.dir-pin.is-confirmed-strong.is-fuzzy .pin-dot {
  fill: #2e9864;
}
/* Fuzzy + unconfirmed: muted amber */
.dir-pin.is-unconfirmed.is-fuzzy .pin-body {
  fill: rgba(217, 154, 62, 0.6);
  opacity: 0.85;
}
.dir-pin.is-unconfirmed.is-fuzzy .pin-dot {
  fill: #d99a3e;
}

/* ============================================================
   PIN COLOR LEGEND (drilled-state view only)
   Hidden by default; revealed when .dir-map-card has the
   .is-drilled class. Positioned at the bottom-left of the map.
============================================================ */
.dir-map-pinlegend {
  display: none;
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(255, 252, 246, 0.95);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 8px 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--charcoal-2);
  display: none;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  z-index: 5;
  backdrop-filter: blur(3px);
  max-width: calc(100% - 24px);
}
.dir-map-card.is-drilled .dir-map-pinlegend {
  display: flex;
}
.dir-map-pinlegend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.dir-map-pinlegend-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid white;
  box-shadow: 0 1px 2px rgba(45, 54, 61, 0.25);
}
.dir-map-pinlegend-dot.is-strong {
  background: #2e9864;
}
.dir-map-pinlegend-dot.is-moderate {
  background: var(--orange-deep);
}
.dir-map-pinlegend-dot.is-unconfirmed {
  background: #d99a3e;
}
@media (max-width: 720px) {
  .dir-map-pinlegend {
    font-size: 10.5px;
    padding: 6px 10px;
    gap: 10px;
  }
  .dir-map-pinlegend-dot {
    width: 9px; height: 9px;
  }
}

/* ============================================================
   QUALITY TOGGLE PILL
   Sits above the results header. Default state: shows verified-only,
   tells user how many call-ahead venues are hidden, button to show all.
   When auto-expanded (sparse-area fallback) shows different copy.
   When user has toggled to 'all' shows different copy.
============================================================ */
.dir-quality-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: var(--s-4) var(--gutter) var(--s-3);
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: rgba(46, 152, 100, 0.07);
  border: 1.5px solid rgba(46, 152, 100, 0.25);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--t-sm);
}
.dir-quality-toggle[data-mode="all"] {
  background: rgba(217, 154, 62, 0.08);
  border-color: rgba(217, 154, 62, 0.32);
}
.dir-quality-toggle[data-auto-expanded="true"] {
  background: rgba(217, 154, 62, 0.08);
  border-color: rgba(217, 154, 62, 0.32);
}
.quality-toggle-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(46, 152, 100, 0.18);
  color: #1f6e47;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quality-toggle-icon svg {
  width: 14px;
  height: 14px;
}
.dir-quality-toggle[data-mode="all"] .quality-toggle-icon,
.dir-quality-toggle[data-auto-expanded="true"] .quality-toggle-icon {
  background: rgba(217, 154, 62, 0.22);
  color: #8a5512;
}
.quality-toggle-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.quality-toggle-label {
  color: var(--charcoal);
  font-size: var(--t-sm);
}
.quality-toggle-label strong {
  font-weight: 700;
  color: var(--charcoal);
}
.quality-toggle-count {
  color: var(--muted);
  font-size: var(--t-xs);
}
.quality-toggle-action {
  flex-shrink: 0;
  background: white;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--charcoal);
  cursor: pointer;
  transition: all 0.14s ease;
  white-space: nowrap;
}
.quality-toggle-action:hover {
  background: var(--charcoal);
  color: white;
  border-color: var(--charcoal);
}

@media (max-width: 720px) {
  .dir-quality-toggle {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  .quality-toggle-action {
    width: 100%;
    padding: 8px;
  }
}