/* ── Design tokens ───────────────────────────────────────── */
:root {
  --green-primary:  #15734A;
  --green-dark:     #0F3D2E;
  --bg:             #F8FAF9;
  --surface:        #FFFFFF;
  --text:           #1A2421;
  --text-secondary: #5B6B64;
  --border:         #DDE8E2;
  --shadow-sm:  0 1px 3px rgba(15,61,46,.07), 0 1px 2px rgba(15,61,46,.05);
  --shadow-md:  0 4px 16px rgba(15,61,46,.10), 0 2px 6px rgba(15,61,46,.06);
  --shadow-lg:  0 12px 40px rgba(15,61,46,.13), 0 4px 12px rgba(15,61,46,.07);
  --topbar-h:   56px;
  --panel-w:    380px;
  --r-sm:  8px;
  --r-md: 14px;
  --r-lg: 20px;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { height: 100%; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

button { cursor: pointer; border: none; background: none; font: inherit; }
a      { font: inherit; }

/* ── Top bar ─────────────────────────────────────────────── */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--topbar-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-icon { display: flex; align-items: center; }
.brand-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--green-dark);
  letter-spacing: -0.02em;
}

/* Search */
.search-wrap {
  flex: 1;
  max-width: 620px;
  margin: 0 auto;
  position: relative;
}
.search-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.search-icon {
  position: absolute;
  left: 0.875rem;
  pointer-events: none;
}
.search-input {
  width: 100%;
  height: 38px;
  padding: 0 1rem 0 2.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}
.search-input::placeholder { color: var(--text-secondary); }
.search-input:focus {
  border-color: var(--green-primary);
  box-shadow: 0 0 0 3px rgba(21,115,74,.12);
}
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  list-style: none;
  padding: 0.375rem 0;
  z-index: 100;
  max-height: 260px;
  overflow-y: auto;
}
.search-dropdown[hidden] { display: none; }

.location-type-select {
  height: 38px;
  padding: 0 1.875rem 0 0.75rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  color: var(--text);
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4.5l4 4 4-4' stroke='%235B6B64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.5rem center;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  transition: border-color 150ms, box-shadow 150ms;
}
.location-type-select:focus {
  border-color: var(--green-primary);
  box-shadow: 0 0 0 3px rgba(21,115,74,.12);
}

.search-results-btn {
  height: 38px;
  padding: 0 1rem;
  background: var(--green-primary);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  border-radius: var(--r-sm);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 150ms;
}
.search-results-btn:hover { background: #12633f; }

.suggestion-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-size: 0.88rem;
  transition: background 100ms;
}
.suggestion-item:hover,
.suggestion-item[aria-selected="true"] { background: var(--bg); }

.suggestion-chip {
  width: 34px;
  height: 20px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  font-weight: 500;
  color: #fff;
  flex-shrink: 0;
}
.suggestion-name  { font-weight: 500; color: var(--text); }
.suggestion-name--full { padding: 0.1rem 0; }
.suggestion-name--direct { padding: 0.1rem 0; color: var(--text-secondary); font-style: italic; }
.suggestion-name--direct::before { content: 'Search '; font-size: 0.8em; font-style: normal; }
.suggestion-label { font-size: 0.78rem; color: var(--text-secondary); margin-left: auto; }

/* Methodology link */
.methodology-link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 150ms;
}
.methodology-link:hover { color: var(--green-primary); }

/* ── Map section (full-viewport hero) ───────────────────── */
.map-section {
  position: relative;
  height: 70vh;
  margin-top: var(--topbar-h);
  overflow: hidden;
}

/* ── Map ─────────────────────────────────────────────────── */
#map {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Overrides Leaflet's own default (flat #ddd gray) — shows at pan
     boundaries and before tiles load, so it should read as calm water,
     not an empty void. */
  background: #DCE6EC;
}

/* Soften Leaflet attribution */
.leaflet-control-attribution {
  font-size: 0.62rem !important;
  background: rgba(255,255,255,.75) !important;
}
.leaflet-control-zoom a {
  font-family: 'Inter', sans-serif !important;
}

/* The zoom control defaults to the map's bottom-left corner, which the score
   panel (also bottom-left, sliding in from the left) sits directly on top
   of — so opening any location's panel hid the zoom buttons entirely. Slide
   the control's anchor to the panel's right edge whenever it's open, same
   corner-style positioning, just relocated to stay clickable. Desktop only:
   on mobile the panel becomes a bottom sheet (full-width), not a left
   sidebar, so this horizontal shift doesn't apply there. */
@media (min-width: 681px) {
  .leaflet-bottom.leaflet-left {
    transition: left 320ms cubic-bezier(.22,1,.36,1);
  }
  #map.panel-open .leaflet-bottom.leaflet-left {
    left: var(--panel-w);
  }
}

/* ── Score panel ─────────────────────────────────────────── */
.score-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--panel-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 500;
  transform: translateX(calc(-1 * var(--panel-w)));
  transition: transform 320ms cubic-bezier(.22,1,.36,1);
  display: flex;
  flex-direction: column;
}
.score-panel.open { transform: translateX(0); }

.panel-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Mobile drag handle (hidden on desktop) */
.panel-handle {
  display: none;
  align-items: center;
  justify-content: center;
  height: 28px;
  margin: -1.5rem -1.5rem 1rem;
  padding: 10px 0 0;
  background: var(--surface);
  cursor: grab;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  flex-shrink: 0;
}
.panel-handle-pill {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 999px;
}

/* Close button */
.panel-close {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  width: 30px;
  height: 30px;
  background: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: background 150ms, color 150ms;
}
.panel-close:hover { background: var(--border); color: var(--text); }

/* Town → tract tab strip — all tabs always visible in one row, like browser
   tabs: each one shrinks as more are added rather than wrapping or scrolling. */
.panel-tabs {
  display: flex;
  align-items: stretch;
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 2rem;
  gap: 0.3rem;
  margin-bottom: 0.875rem;
}
.panel-tabs[hidden] { display: none !important; }
.panel-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.35rem 0.5rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  color: var(--text-secondary);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  visibility: visible;
  opacity: 1;
  transition: background 150ms, color 150ms, border-color 150ms;
  /* Equal-share shrink: all tabs start from their own content width, then
     shrink together (never grow) as the row fills up, down to min-width —
     exactly how browser tabs behave when you open more of them. */
  flex: 0 1 auto;
  min-width: 1.9rem;
  max-width: 7rem;
  overflow: hidden;
}
.panel-tab.active {
  background: var(--green-primary);
  border-color: var(--green-primary);
  color: #fff;
}
.panel-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.panel-tab-close {
  flex-shrink: 0;
  font-size: 0.9rem;
  line-height: 1;
  opacity: 0.7;
}
.panel-tab-close:hover { opacity: 1; }

.tract-toggle-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  margin-bottom: 0.875rem;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--green-primary);
  transition: background 150ms, border-color 150ms;
}
.tract-toggle-btn:hover {
  background: var(--border);
  border-color: var(--green-primary);
}

.tract-clip-note {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.5rem 0.7rem;
  margin: -0.4rem 0 0.875rem;
}

/* Neighborhood name */
.panel-neighborhood {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  padding-right: 2rem;
}

/* Score row */
.panel-score-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.panel-score-number {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 5.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--score-color, var(--text));
}
.panel-score-details {
  padding-bottom: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.panel-score-denom {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.95rem;
  color: var(--text-secondary);
}
.panel-score-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--score-color, var(--text));
}

/* Divider */
.panel-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.125rem 0;
}

/* Section label */
.panel-section-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  margin-bottom: 0.875rem;
}

/* Factor bars */
.factor-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 0.25rem;
}
.factor-row { display: flex; flex-direction: column; gap: 0.45rem; }
.factor-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.factor-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
}
.factor-value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.factor-track {
  height: 6px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.factor-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 700ms cubic-bezier(.22,1,.36,1);
  width: 0%;
}

/* Explanation */
.panel-explanation {
  font-size: 0.88rem;
  line-height: 1.78;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

/* Export button */
.export-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1.25rem;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  transition: background 150ms, border-color 150ms;
  margin-top: auto;
}
.export-btn:hover {
  background: var(--border);
  border-color: var(--text-secondary);
}

/* ── Legend ──────────────────────────────────────────────── */
.map-reset-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 450;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  background: var(--green-primary);
  color: #fff;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background 150ms;
}
.map-reset-btn:hover { background: var(--green-dark); }

.map-legend {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 400;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  padding: 0.75rem 1rem;
  min-width: 164px;
}
.legend-title {
  font-size: 0.67rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}
.legend-tier {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--text);
}
.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.legend-tier-range {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  color: var(--text-secondary);
  min-width: 3.6em;
}
.legend-tier-label { color: var(--text); }

/* ── Tract summary box ──────────────────────────────────────
   Vertically centered on the right edge — top: 50% / translateY(-50%) puts
   it an equal distance from .map-reset-btn (anchored top: 1.5rem) and
   .map-legend (anchored bottom: 1.5rem) without hardcoding either's height. */
.tract-summary-box {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  z-index: 400;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  padding: 0.75rem 1rem;
  min-width: 164px;
  max-width: 210px;
}
.tract-summary-box[hidden] { display: none; }
.tract-summary-row {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text);
}
.tract-summary-row + .tract-summary-row { margin-top: 0.55rem; }
.tract-summary-label {
  display: block;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.6rem;
  color: var(--text-secondary);
  margin-bottom: 0.2rem;
}
.tract-summary-link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--green-primary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tract-summary-link:hover { color: var(--green-dark); }

/* ── Map loading badge ───────────────────────────────────── */
.map-loading[hidden] { display: none; }
.map-loading {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.map-loading-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--green-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Scroll cue ──────────────────────────────────────────── */
.scroll-cue {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 650;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  pointer-events: auto;
  cursor: pointer;
  opacity: 1;
  transition: opacity 500ms;
}
.scroll-cue.hidden { opacity: 0; pointer-events: none; }

.scroll-cue:hover .scroll-cue-label {
  border-color: var(--green-primary);
  color: var(--text);
}

.scroll-cue-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  background: rgba(248,250,249,.88);
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.scroll-cue-chevron {
  color: var(--text-secondary);
  animation: cue-bounce 1.8s ease-in-out infinite;
}
@keyframes cue-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}

/* ── Methodology modal ───────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(15,61,46,.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.modal-backdrop[hidden] { display: none; }

.modal {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 2rem;
  max-width: 520px;
  width: 100%;
  position: relative;
  max-height: 85vh;
  overflow-y: auto;
}
.modal-close-btn {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 30px; height: 30px;
  background: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: background 150ms;
}
.modal-close-btn:hover { background: var(--border); }

.modal-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 0.875rem;
  padding-right: 2rem;
}
.modal-text {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}
.modal-text strong { color: var(--text); }
.modal-text a { color: var(--green-primary); }
.modal-note { margin-bottom: 0; }

.modal-factor-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.modal-factor-card {
  display: flex;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  background: var(--bg);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--green-primary);
  align-items: flex-start;
}
.modal-factor-svg { flex-shrink: 0; margin-top: 2px; }
.modal-factor-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.3rem;
}
.modal-factor-weight {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-secondary);
  margin-left: 0.4rem;
}
.modal-factor-desc {
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.modal-subtitle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 0.875rem;
}

.modal-limitations-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  list-style: none;
}
.modal-limitation-item {
  padding: 0.875rem 1rem;
  background: var(--bg);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--text-secondary);
}
.modal-limitation-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.3rem;
}
.modal-limitation-desc {
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
.modal-limitations-closing {
  font-style: italic;
}

/* Contact modal info rows */
.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.contact-info-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--bg);
  border-radius: var(--r-sm);
}
.contact-info-icon { flex-shrink: 0; }
.contact-info-link,
.contact-info-text {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
}
.contact-info-link {
  color: var(--green-primary);
  font-weight: 600;
  text-decoration: none;
}
.contact-info-link:hover { text-decoration: underline; }

/* ── Leaflet tooltip override ────────────────────────────── */
.hl-tooltip {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 6px 10px !important;
  white-space: nowrap;
}
.hl-tooltip::before { display: none !important; }

/* ── Information section ─────────────────────────────────── */
.info-section {
  background: var(--bg);
  padding: 5rem 1.5rem 4.5rem;
}

.info-container {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Header */
.info-header { max-width: 640px; }

.info-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--green-primary);
  margin-bottom: 0.75rem;
}

.info-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--green-dark);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}

.info-subtitle {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

/* Grid layouts */
.info-grid {
  display: grid;
  gap: 1.25rem;
}
.info-grid--2 { grid-template-columns: repeat(2, 1fr); }
.info-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Cards */
.info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}

.info-card-icon {
  width: 40px;
  height: 40px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.125rem;
}

.info-card-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.info-card-body {
  font-size: 0.9rem;
  line-height: 1.78;
  color: var(--text-secondary);
}

/* Score methodology card */
.info-card--score {
  border-left: 3px solid var(--green-primary);
}

/* Score factor chips */
.score-breakdown {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.5rem 0 0;
}

.sfc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 1rem 1.25rem;
  min-width: 116px;
}

.sfc-weight {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--green-primary);
  line-height: 1;
}

.sfc-name {
  font-size: 0.73rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
}

.sfc-op {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.25rem;
  color: var(--text-secondary);
  flex-shrink: 0;
  margin-top: -0.5rem;
}

/* Formula block */
.score-formula {
  background: var(--green-dark);
  border-radius: var(--r-sm);
  padding: 0.875rem 1.25rem;
  margin-top: 1.375rem;
  overflow-x: auto;
}

.score-formula code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.9rem;
  color: #A8E6C3;
  white-space: nowrap;
}

.info-card-note {
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-top: 0.875rem;
}

/* Lists (data / research / limitations) */
.info-list {
  list-style: none;
  padding: 0;
  margin: 0.875rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.info-list li {
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--text-secondary);
  padding-left: 1.125rem;
  position: relative;
}

.info-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  background: var(--green-primary);
  border-radius: 50%;
  flex-shrink: 0;
}

.info-list strong { color: var(--text); font-weight: 600; }
.info-list em { font-style: italic; }

/* CTA strip */
.info-cta {
  background: var(--green-dark);
  border-radius: var(--r-lg);
  padding: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
}

.info-cta-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem;
}

.info-cta-text {
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgba(255,255,255,.7);
}

.info-cta-body { flex: 1; }

.info-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  background: var(--green-primary);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-sm);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 150ms;
}
.info-cta-btn:hover { background: #12633f; }

/* Footer */
.info-footer {
  border-top: 1px solid var(--border);
  padding-top: 1.75rem;
  text-align: center;
}

.info-footer p {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ── Mobile — bottom sheet ───────────────────────────────── */
@media (max-width: 680px) {
  :root {
    --topbar-h: 52px;
    --panel-w: 100%;
  }

  .methodology-link { font-size: 0.78rem; }
  .search-wrap { max-width: none; }

  /* Panel becomes a bottom sheet */
  .score-panel {
    top: auto;
    bottom: 0;
    left: 0; right: 0;
    width: 100%;
    max-height: 74vh;
    border-right: none;
    border-top: 1px solid var(--border);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(100%);
    box-shadow: 0 -8px 40px rgba(15,61,46,.13);
    transition: transform 320ms cubic-bezier(.22,1,.36,1);
  }
  .score-panel.open { transform: translateY(0); }

  .panel-handle { display: flex; }

  .panel-scroll { padding: 0 1.25rem 1.5rem; }

  .panel-close { top: 0.625rem; right: 0.875rem; }

  .map-legend {
    bottom: 1rem;
    right: 1rem;
    min-width: 140px;
  }

  /* Scroll cue hidden on mobile (legend overlaps) */
  .scroll-cue { display: none; }

  /* Info section */
  .info-section { padding: 3.5rem 1.25rem 3rem; }
  .info-grid--2 { grid-template-columns: 1fr; }
  .info-grid--3 { grid-template-columns: 1fr; }
  .info-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .score-breakdown { gap: 0.75rem; }
  .sfc { min-width: 100px; padding: 0.875rem 1rem; }
}

@media (max-width: 400px) {
  .topbar { gap: 0.625rem; padding: 0 0.875rem; }
  .brand-name { font-size: 1rem; }
  .methodology-link svg { display: none; }
  .location-type-select { font-size: 0.78rem; padding-right: 1.5rem; }
  .search-results-btn { padding: 0 0.625rem; font-size: 0.78rem; }
}

@media (min-width: 681px) and (max-width: 960px) {
  .info-grid--3 { grid-template-columns: 1fr 1fr; }
}