:root {
  --map-green: #224b43;
  --map-green-dark: #17372f;
  --map-cream: #f7f3ec;
  --map-warm: #9a5128;
  --map-line: #dddcd6;
  --map-muted: #66716d;
  --map-shadow: 0 18px 48px rgba(29, 54, 48, 0.13);
}

/* Component display rules must never override the native hidden state. */
[hidden] { display: none !important; }

.brand-link { color: inherit; text-decoration: none; }
.map-nav-link { font-weight: 700; color: var(--map-green) !important; }
.map-page { background: #fbfaf7; min-height: 100vh; padding-top: 14px; }

.map-intro,
.discovery-panel,
.map-workspace,
.community-note {
  width: min(1440px, calc(100% - 64px));
  margin: 0 auto;
}

.map-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 52px 0 30px;
}

.map-eyebrow,
.results-kicker {
  margin: 0 0 8px;
  color: var(--map-warm);
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.map-intro h1 { font-size: clamp(38px, 5vw, 68px); line-height: 1; }
.map-lead { margin: 16px 0 0; max-width: 680px; color: var(--map-muted); font-size: 19px; }
.intro-actions { display: flex; gap: 10px; flex-wrap: wrap; }

button, input, select { font: inherit; }
.quiet-button, .text-button { cursor: pointer; }
.quiet-button {
  border: 1px solid var(--map-green);
  background: transparent;
  color: var(--map-green);
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 700;
}
.quiet-button:hover, .quiet-button:focus-visible { background: var(--map-green); color: #fff; }

.discovery-panel {
  background: #fff;
  border: 1px solid var(--map-line);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 8px 32px rgba(34, 75, 67, .06);
}

.step-heading,
.step-heading > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.step-heading > div { justify-content: flex-start; }
.step-heading h2 { margin: 0; color: var(--map-green); font-size: 18px; }
.step-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--map-green);
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
}
.selection-note { color: var(--map-muted); font-size: 14px; }
.filter-heading-actions { justify-content: flex-end !important; }
.filter-tool { border: 1px solid var(--map-line); border-radius: 999px; background: #fff; color: var(--map-green); padding: 7px 11px; cursor: pointer; font-size: 12px; font-weight: 700; }
.filter-tool:hover, .filter-tool:focus-visible { border-color: var(--map-green); background: var(--map-green); color: #fff; }
.filter-toggle { border: 0; background: none; color: var(--map-warm); padding: 6px; cursor: pointer; font-size: 13px; font-weight: 700; }
.category-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }

.discovery-panel.is-collapsed { padding-top: 18px; padding-bottom: 18px; }
.discovery-panel.is-collapsed .category-grid,
.discovery-panel.is-collapsed .subcategory-region,
.discovery-panel.is-collapsed .search-row { display: none; }
.discovery-panel.is-collapsed .active-filter-row { margin-top: 12px; }

.category-button {
  min-height: 94px;
  border: 1px solid var(--map-line);
  border-radius: 16px;
  background: #fff;
  color: var(--map-green);
  cursor: pointer;
  padding: 14px 12px;
  text-align: left;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.category-button:hover { transform: translateY(-2px); border-color: var(--category-color); }
.category-button.is-active { background: var(--category-color); border-color: var(--category-color); color: #fff; }
.category-icon { display: block; width: max-content; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 23px; line-height: 1; margin-bottom: 10px; }
.category-name { display: block; font-family: Poppins, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.25; }
.category-count { display: block; margin-top: 4px; font-size: 12px; opacity: .72; }

.subcategory-region { border-top: 1px solid var(--map-line); margin-top: 24px; padding-top: 22px; }
.step-heading.compact { margin-bottom: 14px; }
.text-button { border: 0; background: none; color: var(--map-warm); font-size: 13px; font-weight: 700; padding: 6px; }
.subcategory-group + .subcategory-group { margin-top: 14px; }
.subcategory-label { display: block; margin-bottom: 8px; color: var(--map-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.subcategory-chips, .active-filter-chips, .nearby-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.subcategory-chip, .active-chip, .nearby-button {
  border: 1px solid var(--map-line);
  border-radius: 999px;
  background: #fff;
  color: var(--map-green);
  padding: 8px 13px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
.subcategory-chip.is-active { background: var(--map-green); border-color: var(--map-green); color: #fff; }

.search-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(200px, .8fr); gap: 14px; border-top: 1px solid var(--map-line); margin-top: 24px; padding-top: 22px; }
.search-control, .select-control { display: grid; gap: 7px; color: var(--map-muted); font-size: 12px; font-weight: 700; }
.search-control input, .select-control select {
  width: 100%;
  border: 1px solid var(--map-line);
  border-radius: 12px;
  background: #fff;
  color: #202b28;
  min-height: 48px;
  padding: 10px 14px;
  outline: none;
}
.search-control input:focus, .select-control select:focus { border-color: var(--map-green); box-shadow: 0 0 0 3px rgba(34, 75, 67, .12); }
.active-filter-row { align-items: center; gap: 12px; margin-top: 18px; }
.active-filter-row:not([hidden]) { display: flex; }
.active-filter-label { color: var(--map-muted); font-size: 13px; font-weight: 700; }
.active-chip { background: var(--map-cream); cursor: default; }

.map-workspace { display: block; padding: 22px 0 48px; }
.map-column, .results-column { min-width: 0; }
.map-frame { position: relative; height: min(72vh, 780px); min-height: 560px; border-radius: 22px; overflow: hidden; background: #e9eee9; box-shadow: var(--map-shadow); }
#global-map { width: 100%; height: 100%; }
.map-empty { position: absolute; inset: 0; z-index: 500; display: grid; place-content: center; text-align: center; background: linear-gradient(135deg, #e8efe9, #f3eee4); color: var(--map-green); }
.map-empty strong { font: 700 25px Poppins, sans-serif; }
.map-empty span { color: var(--map-muted); margin-top: 5px; }
.map-expand { position: absolute; z-index: 600; right: 12px; top: 12px; border: 0; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--map-green); padding: 9px 14px; font-weight: 700; cursor: pointer; box-shadow: 0 5px 18px rgba(0,0,0,.15); }
.map-show-all { position: absolute; z-index: 600; right: 150px; top: 12px; border: 0; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--map-green); padding: 9px 14px; font-weight: 700; cursor: pointer; box-shadow: 0 5px 18px rgba(0,0,0,.15); }
.map-show-all:hover, .map-show-all:focus-visible, .map-expand:hover, .map-expand:focus-visible { background: var(--map-green); color: #fff; }
.map-status { position: absolute; z-index: 610; left: 50%; bottom: 18px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); border-radius: 999px; background: rgba(255,255,255,.96); color: var(--map-green); padding: 9px 14px; box-shadow: 0 5px 18px rgba(0,0,0,.15); font-size: 12px; font-weight: 700; text-align: center; }
body.map-expanded { overflow: hidden; }
body.map-expanded .map-frame { position: fixed; inset: 0; z-index: 1000; width: 100vw; height: 100vh; min-height: 0; border-radius: 0; }

.results-column { margin-top: 20px; background: #fff; border: 1px solid var(--map-line); border-radius: 22px; overflow: hidden; }
.results-heading { display: flex; justify-content: space-between; gap: 12px; padding: 20px; border-bottom: 1px solid var(--map-line); }
.results-heading h2 { margin: 0; color: var(--map-green); font-size: 21px; }
.results-kicker { margin-bottom: 3px; }
.results-heading-actions { display: flex; align-items: center; gap: 14px; }
.map-ready-note { max-width: 150px; color: var(--map-muted); font-size: 11px; text-align: right; line-height: 1.3; }
.results-arrows { display: flex; gap: 8px; }
.results-arrow { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--map-line); border-radius: 50%; background: #fff; color: var(--map-green); cursor: pointer; font-family: Poppins, sans-serif; font-size: 25px; font-weight: 600; line-height: 1; }
.results-arrow:hover:not(:disabled), .results-arrow:focus-visible:not(:disabled) { border-color: var(--map-green); background: var(--map-green); color: #fff; }
.results-arrow:disabled { cursor: default; opacity: .35; }
.results-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 244px); gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 16px 18px 20px; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-color: var(--map-warm) #eeeae2; scrollbar-width: thin; }
.results-list::-webkit-scrollbar { height: 9px; }
.results-list::-webkit-scrollbar-track { background: #eeeae2; border-radius: 999px; }
.results-list::-webkit-scrollbar-thumb { background: var(--map-warm); border-radius: 999px; }
.results-prompt { grid-column: 1 / -1; width: min(560px, calc(100vw - 80px)); padding: 32px 18px; color: var(--map-muted); text-align: left; }
.result-card { display: flex; flex-direction: column; width: 100%; min-height: 286px; overflow: hidden; border: 1px solid var(--map-line); border-radius: 15px; background: #fff; padding: 0; text-align: left; cursor: pointer; color: inherit; scroll-snap-align: start; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.result-card:hover { border-color: rgba(154,81,40,.5); box-shadow: 0 9px 22px rgba(34,75,67,.12); transform: translateY(-2px); }
.result-card.is-active { border: 2px solid var(--map-warm); box-shadow: 0 0 0 3px rgba(154,81,40,.13), 0 9px 22px rgba(34,75,67,.12); }
.result-image { width: 100%; height: 145px; flex: 0 0 auto; object-fit: cover; background: #e6e6e2; }
.result-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 13px 14px 15px; }
.result-type { display: block; color: var(--map-warm); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.result-name { display: block; color: var(--map-green); font: 700 15px/1.25 Poppins, sans-serif; margin: 5px 0 7px; }
.result-address { display: block; margin-top: auto; color: var(--map-muted); font-size: 12px; line-height: 1.35; }
.pin-pending { display: inline-block; margin-top: 5px; color: #86632d; font-size: 10px; font-weight: 700; }

.place-detail { position: relative; display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr); margin-top: 20px; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--map-shadow); }
.detail-close { position: absolute; right: 12px; top: 12px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--map-green); cursor: pointer; font-size: 24px; line-height: 1; }
.detail-image { width: 100%; height: 100%; min-height: 340px; object-fit: cover; background: #ecebe7; }
.detail-body { padding: 28px; }
.detail-category { color: var(--map-warm); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.detail-body h2 { margin: 6px 0 8px; color: var(--map-green); font-size: 27px; line-height: 1.15; }
.detail-body p { color: var(--map-muted); }
.detail-address { margin: 0 0 14px; font-weight: 700; }
.amenity-summary { background: var(--map-cream); border-radius: 12px; padding: 12px 14px; color: var(--map-muted); font-size: 13px; }
.amenity-list { display: flex; flex-wrap: wrap; gap: 7px; }
.amenity-pill { background: #fff; border: 1px solid var(--map-line); border-radius: 999px; padding: 5px 9px; color: var(--map-green); font-weight: 700; }
.detail-actions { display: flex; gap: 9px; margin: 18px 0; }
.primary-button, .secondary-button { border-radius: 999px; padding: 10px 16px; text-decoration: none; font-weight: 700; text-align: center; }
.primary-button { background: var(--map-green); color: #fff; }
.secondary-button { border: 1px solid var(--map-green); color: var(--map-green); }
.nearby-panel { border-top: 1px solid var(--map-line); padding-top: 18px; }
.nearby-panel h3 { margin: 0; color: var(--map-green); font-size: 16px; }
.nearby-panel p { margin: 3px 0 10px; font-size: 13px; }
.nearby-button:hover { background: var(--map-green); color: #fff; }

.community-note { display: grid; grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr); gap: 42px; align-items: start; border-top: 1px solid var(--map-line); padding: 44px 0 60px; }
.community-note h2 { margin: 0; color: var(--map-green); font-size: 30px; }
.community-intro > p:last-child { margin: 14px 0 0; color: var(--map-muted); font-size: 16px; line-height: 1.65; }
.contribution-panel { overflow: hidden; border: 1px solid var(--map-line); border-radius: 22px; background: #fff; box-shadow: 0 10px 32px rgba(34,75,67,.08); }
.contribution-choices { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--map-line); }
.contribution-choice { display: grid; gap: 3px; min-height: 88px; border: 0; background: #fff; color: var(--map-green); padding: 18px 20px; text-align: left; cursor: pointer; }
.contribution-choice + .contribution-choice { border-left: 1px solid var(--map-line); }
.contribution-choice strong { font-family: Poppins, sans-serif; font-size: 15px; }
.contribution-choice span { color: var(--map-muted); font-size: 12px; line-height: 1.4; }
.contribution-choice.is-active { background: var(--map-green); color: #fff; }
.contribution-choice.is-active span { color: rgba(255,255,255,.78); }
.contribution-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 24px; }
.place-fields { display: contents; }
.full-width { grid-column: 1 / -1; }
.form-field { display: grid; gap: 7px; }
.form-field label { color: var(--map-green); font-size: 12px; font-weight: 700; }
.form-field label span { color: var(--map-muted); font-weight: 500; }
.form-field input, .form-field textarea { width: 100%; border: 1px solid var(--map-line); border-radius: 11px; background: #fff; color: #202b28; padding: 11px 13px; outline: none; resize: vertical; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--map-green); box-shadow: 0 0 0 3px rgba(34,75,67,.11); }
.address-confirm-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.secondary-form-button, .text-form-button, .contribution-submit { cursor: pointer; font-weight: 700; }
.secondary-form-button { border: 1px solid var(--map-green); border-radius: 11px; background: #fff; color: var(--map-green); padding: 9px 14px; }
.secondary-form-button:hover, .secondary-form-button:focus-visible { background: var(--map-green); color: #fff; }
.pin-confirmation { overflow: hidden; border: 1px solid var(--map-line); border-radius: 14px; background: #f7f8f5; }
.pin-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 15px; }
.pin-heading > div { display: grid; gap: 2px; }
.pin-heading strong { color: var(--map-green); font-size: 13px; }
.pin-heading span { color: var(--map-muted); font-size: 11px; }
.text-form-button { border: 0; background: none; color: var(--map-warm); padding: 5px; font-size: 12px; }
#contribution-map { height: 260px; background: #e9eee9; }
.contact-fields { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 18px; border-top: 1px solid var(--map-line); padding-top: 18px; }
.contribution-submit-row { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 20px; }
.contribution-submit-row p { max-width: 560px; margin: 0; color: var(--map-muted); font-size: 11px; line-height: 1.5; }
.contribution-submit { flex: 0 0 auto; border: 0; border-radius: 999px; background: var(--map-warm); color: #fff; padding: 11px 18px; }
.contribution-submit:hover, .contribution-submit:focus-visible { background: #b45f30; }
.contribution-submit:disabled { cursor: wait; opacity: .62; }
.contribution-message { grid-column: 1 / -1; border-radius: 11px; background: #e9f2ed; color: var(--map-green); padding: 11px 13px; font-size: 13px; font-weight: 700; }
.contribution-message.is-error { background: #f8e9e4; color: #873f24; }
.bot-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.map-marker { background: transparent; border: 0; }
.map-marker span { display: grid; place-items: center; width: 34px; height: 34px; border: 3px solid #fff; border-radius: 50% 50% 50% 10%; transform: rotate(-45deg); background: var(--marker-color); box-shadow: 0 4px 12px rgba(0,0,0,.25); font-size: 15px; }
.map-marker-provisional span { outline: 3px dashed #f4c95d; outline-offset: 2px; }
.map-marker span b { transform: rotate(45deg); font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 17px; font-weight: 400; line-height: 1; }
.marker-cluster-rust { width: 54px !important; height: 54px !important; border-radius: 50%; background: transparent; cursor: pointer; }
.marker-cluster-rust div { display: grid; place-items: center; width: 48px; height: 48px; margin: 3px; border: 3px solid #fff; border-radius: 50%; background: var(--map-warm); color: #fff; box-shadow: 0 7px 18px rgba(34,75,67,.3); font-family: Poppins, sans-serif; font-size: 17px; font-weight: 800; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform 150ms ease, background 150ms ease; }
.marker-cluster-rust:hover div { background: #b45f30; transform: scale(1.08); }
.marker-cluster-rust span { line-height: 1; }
.leaflet-popup-content-wrapper { border-radius: 12px; }
.leaflet-popup-content { font: 700 13px Poppins, sans-serif; color: var(--map-green); }

@media (max-width: 1120px) {
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .map-page { padding-top: 10px; }
  .map-intro, .discovery-panel, .map-workspace, .community-note { width: min(100% - 28px, 1440px); }
  .map-intro { align-items: flex-start; flex-direction: column; padding-top: 30px; }
  .map-intro h1 { font-size: 40px; }
  .map-lead { font-size: 16px; }
  .discovery-panel { padding: 18px; border-radius: 18px; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-button { min-height: 84px; }
  .search-row { grid-template-columns: 1fr; }
  .step-heading { align-items: flex-start; }
  .selection-note, .step-heading .text-button { display: none; }
  .filter-heading-actions { display: block !important; }
  .map-frame { min-height: 480px; height: 64vh; border-radius: 18px; }
  .map-show-all { left: 12px; right: auto; top: 58px; }
  .results-heading { align-items: flex-end; padding: 16px; }
  .results-heading-actions { align-items: flex-end; flex-direction: column; gap: 7px; }
  .map-ready-note { display: none; }
  .results-list { grid-auto-columns: minmax(220px, 78vw); padding: 14px 14px 18px; }
  .result-card { min-height: 276px; }
  .place-detail { grid-template-columns: 1fr; }
  .detail-image { min-height: 220px; max-height: 300px; }
  .detail-body { padding: 20px; }
  .detail-actions { flex-direction: column; }
  .community-note { grid-template-columns: 1fr; gap: 18px; }
  .contribution-form, .contact-fields { grid-template-columns: 1fr; }
  .contribution-choices { grid-template-columns: 1fr; }
  .contribution-choice + .contribution-choice { border-left: 0; border-top: 1px solid var(--map-line); }
  .address-confirm-row { grid-template-columns: 1fr; }
  .pin-heading, .contribution-submit-row { align-items: flex-start; flex-direction: column; }
  .contribution-submit { width: 100%; }
  .header-meta .hub-link:not(.active):not(.map-nav-link) { display: none; }
}
