/* Hush Street — Brooklyn Development Map
   Palette reuses the real HushStreet production accents already live in
   wordpress/mu-plugins/*.php (the #ff2c00 link/accent color, the #a8895a
   timeline/status bronze, the #181415/#2c2c2c charcoal ink) rather than
   inventing a new brand.

   EVERY rule in this file is scoped under .hs-brooklyn-map (never a bare
   html/body/*/.panel/etc. selector) so it's safe to enqueue on the real
   WordPress homepage, alongside Kadence's own global styles, without
   repainting or colliding with anything else on the page. The local
   prototype's index.html wraps its whole page in this same class purely
   for parity with the production markup -- see map.js and the mu-plugin
   for the two places that actually render `.hs-brooklyn-map`. */

.hs-brooklyn-map, .hs-brooklyn-map * {
  box-sizing: border-box;
}

.hs-brooklyn-map {
  --ink: #181415;
  --ink-soft: #2c2c2c;
  --paper: #faf7f0;
  --paper-deep: #f1ebdd;
  --accent: #ff2c00;
  --accent-deep: #c92200;
  --accent-soft: #a8895a;
  --line: #ddd6c4;
  /* Pale stone/limestone — the neutral geographic surface across
     treatments, replacing an earlier, muddier tan/brown pass. */
  --stone-100: #efe9db;
  --stone-300: #ddd4bf;
  --stone-500: #c7bca3;
  --stone-700: #a89c81;

  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
}

/* Only the standalone local-prototype page needs full-viewport chrome;
   the WordPress shortcode embeds inline in the middle of the homepage
   and must NOT force page height/flex on itself. */
.hs-brooklyn-map.is-standalone-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Header / treatment switcher (prototype-only chrome; not
   rendered by the WordPress shortcode at all) ---------- */

.hs-brooklyn-map .hs-header {
  background: var(--ink);
  color: #fff;
  padding: 14px 20px;
}
.hs-brooklyn-map .hs-header-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.hs-brooklyn-map .hs-wordmark {
  font: 700 15px/1.3 Arial, sans-serif;
  letter-spacing: 0.08em;
}
.hs-brooklyn-map .hs-wordmark span {
  font-weight: 400;
  letter-spacing: normal;
  color: #b9b3ac;
  font-size: 12px;
  margin-left: 8px;
}
.hs-brooklyn-map .treatment-switcher {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.hs-brooklyn-map .treatment-switcher button {
  font: 600 12px/1 Arial, sans-serif;
  letter-spacing: 0.03em;
  color: #e7e2d8;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  padding: 8px 14px;
  cursor: pointer;
}
.hs-brooklyn-map .treatment-switcher button[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.hs-brooklyn-map .treatment-switcher button:focus-visible,
.hs-brooklyn-map .map-svg :focus-visible,
.hs-brooklyn-map .nbhd-list button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Layout ---------- */

.hs-brooklyn-map .hs-map-feature {
  flex: 1;
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 28px 20px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
  gap: 30px;
  align-items: start;
}
@media (max-width: 1000px) {
  .hs-brooklyn-map .hs-map-feature {
    grid-template-columns: 1fr;
  }
}

.hs-brooklyn-map .map-stage { min-width: 0; }

.hs-brooklyn-map .map-canvas-wrap {
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px;
  overflow: hidden;
}

.hs-brooklyn-map .map-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.hs-brooklyn-map .map-legend {
  font: 600 12px/1.5 Arial, sans-serif;
  color: #6b6456;
  margin: 10px 4px 0;
}

/* ---------- Side rail: panel + accessible list ---------- */

.hs-brooklyn-map .side-rail {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hs-brooklyn-map .panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 26px 28px 24px;
  min-height: 168px;
}
.hs-brooklyn-map .panel-eyebrow {
  font: 700 11px/1 Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent);
  margin: 0 0 10px;
}
.hs-brooklyn-map .panel-title {
  font: 700 26px/1.15 Georgia, serif;
  margin: 0 0 10px;
}
.hs-brooklyn-map .panel-lede {
  font-size: 15px;
  line-height: 1.55;
  color: #3d3730;
  margin: 0 0 16px;
}
.hs-brooklyn-map .panel-stats {
  display: flex;
  gap: 22px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}
.hs-brooklyn-map .panel-stat-num {
  display: block;
  font: 700 30px/1 Georgia, serif;
  color: var(--ink);
}
.hs-brooklyn-map .panel-stat-label {
  display: block;
  font: 600 11px/1.4 Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a8272;
  margin-top: 4px;
}
.hs-brooklyn-map .panel-note {
  font-size: 12.5px;
  line-height: 1.5;
  color: #8a8272;
  font-style: italic;
  margin: 0 0 14px;
}
.hs-brooklyn-map .panel-summary {
  font-size: 15px;
  line-height: 1.6;
  color: #3d3730;
  margin: 0 0 20px;
}
.hs-brooklyn-map .panel-featured {
  background: var(--paper-deep);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  padding: 12px 16px;
  margin: 0 0 20px;
}
.hs-brooklyn-map .panel-featured-label {
  font: 700 10.5px/1 Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent-deep);
  margin: 0 0 6px;
}
.hs-brooklyn-map .panel-featured-title {
  font: 600 14.5px/1.4 Georgia, serif;
  color: var(--ink);
  margin: 0;
}
.hs-brooklyn-map .panel-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 14px/1 Arial, sans-serif;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px;
}
.hs-brooklyn-map .panel-link:hover { opacity: 0.75; }
.hs-brooklyn-map .panel-uncovered-badge {
  display: inline-block;
  font: 700 11px/1 Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a8272;
  background: #efe9db;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 6px 12px;
  margin-bottom: 4px;
}
/* A geographic alias (e.g. Fort Hamilton, covered inside the Dyker
   Heights Tracker) is covered, not muted -- same badge shape as
   .panel-uncovered-badge above, but accent-tinted so it doesn't read as
   either an ordinary standalone Tracker or a coverage gap. */
.hs-brooklyn-map .panel-alias-badge {
  display: inline-block;
  font: 700 11px/1 Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
  background: var(--paper-deep);
  border: 1px solid var(--accent-soft);
  border-radius: 20px;
  padding: 6px 12px;
  margin-bottom: 4px;
}

.hs-brooklyn-map .nbhd-list-wrap { min-width: 0; }
.hs-brooklyn-map .nbhd-list-heading {
  font: 700 13px/1.3 Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 4px;
}
.hs-brooklyn-map .nbhd-list-sub {
  font: 400 12px/1.5 Arial, sans-serif;
  color: #8a8272;
  margin: 0 0 10px;
}
.hs-brooklyn-map .nbhd-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}
.hs-brooklyn-map .nbhd-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid #efe9db;
  padding: 9px 14px;
  font: 400 13.5px/1.3 Arial, sans-serif;
  color: var(--ink);
  cursor: pointer;
}
.hs-brooklyn-map .nbhd-list button:last-child { border-bottom: none; }
.hs-brooklyn-map .nbhd-list button:hover { background: var(--paper-deep); }
.hs-brooklyn-map .nbhd-list button[aria-selected="true"] {
  background: var(--ink);
  color: #fff;
}
.hs-brooklyn-map .nbhd-list button .dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-soft);
}
.hs-brooklyn-map .nbhd-list button.is-uncovered .dot { background: #c9c2b3; }
.hs-brooklyn-map .nbhd-list button .count {
  font-size: 11.5px;
  color: #8a8272;
  flex-shrink: 0;
}
.hs-brooklyn-map .nbhd-list button[aria-selected="true"] .count { color: #cfcabf; }

.hs-brooklyn-map .hs-footnote {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px 26px;
}
.hs-brooklyn-map .hs-footnote p {
  font: 400 11.5px/1.6 Arial, sans-serif;
  color: #a49c8c;
  max-width: 780px;
}

/* ==========================================================================
   Map SVG structure (shared across all three treatments):
   - .bg-feature          water / park background shapes (non-interactive)
   - .nbhd                one <g> per neighborhood, focusable, clickable
   - .nbhd-base            extrusion/"side" copy of the polygon (may be hidden)
   - .nbhd-top             the actual top-face fill the user reads as the shape
   - .nbhd-label           small text label (rendered only for larger shapes)
   ========================================================================== */

.hs-brooklyn-map .bg-feature { pointer-events: none; }
.hs-brooklyn-map .bg-feature.water { fill: #d7dee0; }
.hs-brooklyn-map .bg-feature.park { fill: #d9ddc9; }

.hs-brooklyn-map .nbhd { cursor: pointer; }
.hs-brooklyn-map .nbhd-top { transition: transform 160ms ease, filter 160ms ease; }
.hs-brooklyn-map .nbhd-base { transition: opacity 160ms ease; }

.hs-brooklyn-map .nbhd-label {
  font: 600 8.5px/1 Arial, sans-serif;
  fill: var(--ink);
  pointer-events: none;
  text-anchor: middle;
  opacity: 0.82;
  transition: transform 160ms ease;
}
.hs-brooklyn-map .nbhd-label.is-uncovered { opacity: 0.5; }
.hs-brooklyn-map .nbhd-label.is-hover { transform: translateY(-3px); }
.hs-brooklyn-map .nbhd-label.is-selected { transform: translateY(-11px); }

/* Three-step lift hierarchy, shared by every treatment:
     resting   -- baked into geometry depth (build_geometry.py), not here
     hover     -- a small, restrained preview lift; never persists
     selected  -- a visibly larger lift + stronger shadow; persists until
                  another neighborhood is chosen (map.js owns that state,
                  not CSS) */
.hs-brooklyn-map .nbhd:hover .nbhd-top,
.hs-brooklyn-map .nbhd.is-hover .nbhd-top {
  transform: translateY(-3px);
  filter: brightness(1.08);
}

.hs-brooklyn-map .nbhd.is-selected .nbhd-top {
  transform: translateY(-11px);
  filter: drop-shadow(0 11px 8px rgba(24,20,21,0.32));
}

@media (prefers-reduced-motion: reduce) {
  .hs-brooklyn-map .nbhd-top,
  .hs-brooklyn-map .nbhd-base,
  .hs-brooklyn-map .nbhd-label {
    transition: none !important;
  }
}

/* -------------------- Treatment A: Editorial Flat -------------------- */

.hs-brooklyn-map [data-treatment="editorial-flat"] .map-canvas-wrap { background: var(--paper); }
.hs-brooklyn-map [data-treatment="editorial-flat"] .nbhd-base { display: none; }
.hs-brooklyn-map [data-treatment="editorial-flat"] .nbhd-top {
  stroke: var(--ink);
  stroke-width: 1.1;
  fill: var(--stone-300);
}
.hs-brooklyn-map [data-treatment="editorial-flat"] .nbhd:hover .nbhd-top,
.hs-brooklyn-map [data-treatment="editorial-flat"] .nbhd.is-hover .nbhd-top {
  fill: var(--stone-500);
}
.hs-brooklyn-map [data-treatment="editorial-flat"] .nbhd.is-uncovered .nbhd-top {
  fill: var(--paper);
  stroke: var(--stone-500);
  stroke-dasharray: 2 2;
}
.hs-brooklyn-map [data-treatment="editorial-flat"] .nbhd.is-selected .nbhd-top {
  fill: var(--accent);
  stroke: var(--ink);
  transform: none; /* flat treatment: color change reads as selection, not lift */
  filter: none;
}
.hs-brooklyn-map [data-treatment="editorial-flat"] .bg-feature { fill: var(--stone-100); stroke: var(--stone-300); stroke-width: 0.6; }

/* -------------------- Treatment B: Isometric City (V1 / primary) ----- */

.hs-brooklyn-map [data-treatment="isometric-city"] .map-canvas-wrap {
  background: linear-gradient(180deg, #f6f2e7 0%, #ece4d1 100%);
}
.hs-brooklyn-map [data-treatment="isometric-city"] .nbhd-top {
  stroke: rgba(24,20,21,0.28);
  stroke-width: 0.6;
  fill: var(--stone-300);
}
.hs-brooklyn-map [data-treatment="isometric-city"] .nbhd-base {
  fill: var(--stone-700);
}
.hs-brooklyn-map [data-treatment="isometric-city"] .nbhd.is-uncovered .nbhd-top { fill: var(--stone-100); }
.hs-brooklyn-map [data-treatment="isometric-city"] .nbhd.is-uncovered .nbhd-base { fill: var(--stone-500); }
.hs-brooklyn-map [data-treatment="isometric-city"] .nbhd:hover .nbhd-top,
.hs-brooklyn-map [data-treatment="isometric-city"] .nbhd.is-hover .nbhd-top {
  fill: #e6dcc4;
}
.hs-brooklyn-map [data-treatment="isometric-city"] .nbhd.is-selected .nbhd-top {
  fill: #ffcabb;
  stroke: var(--accent);
  stroke-width: 1.2;
}
.hs-brooklyn-map [data-treatment="isometric-city"] .nbhd.is-selected .nbhd-base { fill: var(--accent-deep); }
.hs-brooklyn-map [data-treatment="isometric-city"] .bg-feature.water { fill: #c7d3d3; }
.hs-brooklyn-map [data-treatment="isometric-city"] .bg-feature.park { fill: #c9d0b7; }

/* -------------------- Treatment C: Data Landscape --------------------- */

.hs-brooklyn-map [data-treatment="data-landscape"] .map-canvas-wrap {
  background: linear-gradient(180deg, #eee7d7 0%, #e2d8bd 100%);
}
.hs-brooklyn-map [data-treatment="data-landscape"] .nbhd-top {
  stroke: rgba(24,20,21,0.35);
  stroke-width: 0.6;
  fill: var(--nbhd-fill, #cbbf9e);
}
.hs-brooklyn-map [data-treatment="data-landscape"] .nbhd-base {
  fill: var(--nbhd-fill-side, #948a68);
}
.hs-brooklyn-map [data-treatment="data-landscape"] .nbhd.is-uncovered .nbhd-top { fill: #d8d2c0; }
.hs-brooklyn-map [data-treatment="data-landscape"] .nbhd.is-uncovered .nbhd-base { fill: #b2ab97; }
.hs-brooklyn-map [data-treatment="data-landscape"] .nbhd.is-selected .nbhd-top {
  stroke: var(--accent);
  stroke-width: 1.3;
}
.hs-brooklyn-map [data-treatment="data-landscape"] .nbhd.is-selected .nbhd-base { filter: brightness(0.85); }
.hs-brooklyn-map [data-treatment="data-landscape"] .bg-feature.water { fill: #c3cfd1; }
.hs-brooklyn-map [data-treatment="data-landscape"] .bg-feature.park { fill: #c6cdb2; }

/* ==========================================================================
   Five-borough map additions (prototypes/nyc-map, 2026-10-27).
   Everything above is the Brooklyn map's stylesheet, unchanged. The wrapper
   carries both .hs-brooklyn-map (so those rules apply) and .hs-nyc-map.
   --u (set on the SVG by map.js) = viewBox width / 1000: 1 at Brooklyn's
   original scale, so lift, stroke and label sizes in SVG user units look
   the same at every zoom.
   ========================================================================== */

.hs-nyc-map .map-svg { aspect-ratio: 1 / 1; }
/* --u = SVG user units per CSS pixel (map.js), so these are screen pixels. */
.hs-nyc-map .nbhd-label { font-size: calc(10.5px * var(--u, 1)); }
.hs-nyc-map .borough-label {
  font: 700 calc(12px * var(--u, 1)) / 1 Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-anchor: middle;
  fill: var(--ink);
  opacity: 0.7;
  pointer-events: none;
  paint-order: stroke;
  stroke: #f6f2e7;
  stroke-width: calc(3px * var(--u, 1));
}
.hs-nyc-map:not([data-view="all"]) .borough-labels { display: none; }
.hs-nyc-map .nbhd-label { paint-order: stroke; stroke: rgba(239,233,219,0.85); stroke-width: calc(2.5px * var(--u, 1)); }
.hs-nyc-map .nbhd-label.is-hover { transform: translateY(calc(-2px * var(--u, 1))); }
.hs-nyc-map .nbhd-label.is-selected { transform: translateY(calc(-7px * var(--u, 1))); }
.hs-nyc-map .nbhd:hover .nbhd-top,
.hs-nyc-map .nbhd.is-hover .nbhd-top { transform: translateY(calc(-2px * var(--u, 1))); }
.hs-nyc-map .nbhd.is-selected .nbhd-top {
  transform: translateY(calc(-7px * var(--u, 1)));
  filter: drop-shadow(0 calc(7px * var(--u, 1)) calc(5px * var(--u, 1)) rgba(24,20,21,0.32));
}
.hs-nyc-map [data-treatment="isometric-city"] .nbhd-top { stroke-width: calc(0.5px * var(--u, 1)); }
.hs-nyc-map [data-treatment="isometric-city"] .nbhd.is-selected .nbhd-top { stroke-width: calc(1.2px * var(--u, 1)); }
.hs-nyc-map .nbhd.is-out { opacity: 0.38; }
.hs-nyc-map .nbhd.is-out:not(.is-selected) .nbhd-top { filter: saturate(0.4); }
.hs-nyc-map .nbhd:focus { outline: none; }
.hs-nyc-map .nbhd:focus-visible .nbhd-top { stroke: var(--accent); stroke-width: calc(1.6px * var(--u, 1)); }

/* Borough selector */
.hs-nyc-map .map-tabs {
  max-width: 1320px;
  margin: 0 auto;
  padding: 22px 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hs-nyc-map .map-tab {
  font: 700 13px/1 Arial, sans-serif;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 15px;
  cursor: pointer;
}
.hs-nyc-map .map-tab:hover { border-color: var(--stone-700); }
.hs-nyc-map .map-tab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.hs-nyc-map .map-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hs-nyc-map .hs-map-feature { padding-top: 16px; }

.hs-nyc-map .panel-covers {
  font: 400 13px/1.5 Arial, sans-serif;
  color: #6b6456;
  margin: -6px 0 14px;
}
.hs-nyc-map .panel .panel-link + .panel-link { margin-left: 14px; }

/* Crawlable tracker index (server-rendered links) */
.hs-nyc-map .nyc-index {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}
.hs-nyc-map .nyc-index h3 {
  margin: 0;
  padding: 8px 14px;
  font: 700 10.5px/1 Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a8272;
  background: #faf7ef;
  position: sticky;
  top: 0;
}
.hs-nyc-map .nyc-index h3 a { color: inherit; text-decoration: none; }
.hs-nyc-map .nyc-index h3 a:hover { color: var(--accent-deep); }
.hs-nyc-map .nyc-index ul { list-style: none; margin: 0; padding: 0; }
.hs-nyc-map .nyc-index li { margin: 0; border-bottom: 1px solid #efe9db; }
.hs-nyc-map .nyc-index li:last-child { border-bottom: none; }
.hs-nyc-map .nyc-index li a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  font: 400 13.5px/1.3 Arial, sans-serif;
  color: var(--ink);
  text-decoration: none;
}
.hs-nyc-map .nyc-index li a:hover,
.hs-nyc-map .nyc-index li a:focus-visible { background: var(--paper-deep); outline: none; }
.hs-nyc-map .nyc-index li a .count { font-size: 11.5px; color: #8a8272; flex-shrink: 0; }

@media (max-width: 1000px) {
  .hs-nyc-map .nyc-index { max-height: 300px; }
}
@media (max-width: 560px) {
  .hs-nyc-map .map-tabs { padding: 16px 12px 0; gap: 6px; }
  .hs-nyc-map .map-tab { padding: 8px 11px; font-size: 12px; }
  .hs-nyc-map .hs-map-feature { padding: 12px 12px 8px; gap: 18px; }
  .hs-nyc-map .map-canvas-wrap { padding: 8px; }
  .hs-nyc-map .panel { padding: 20px 18px; }
  .hs-nyc-map .panel-title { font-size: 22px; }
}