:root {
  --bg: #f3f4f1;
  --surface: #ffffff;
  --line: #dce2dd;
  --text: #17221e;
  --muted: #65726c;
  --accent: #0b7867;
  --radius: 20px;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }

.map-app { min-height: 100svh; padding: 20px; }
.map-header, .map-layout { width: min(1680px, 100%); margin-inline: auto; }
.map-header { padding: 0 6px 18px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.eyebrow { margin: 0 0 5px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(25px, 3vw, 40px); line-height: 1; letter-spacing: -.045em; }
.search { width: min(370px, 100%); display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.search input { height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; outline: none; color: var(--text); background: var(--surface); }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11,120,103,.13); }

.map-layout { min-height: calc(100svh - 130px); display: grid; grid-template-columns: 250px minmax(0,1fr) 290px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 14px 48px rgba(20,37,30,.12); }
.map-sidebar, .details { padding: 24px; background: var(--surface); }
.map-sidebar { border-right: 1px solid var(--line); }
.details { border-left: 1px solid var(--line); }
.map-sidebar h2 { margin: 0 0 16px; font-size: 18px; letter-spacing: -.025em; }

.filters { display: grid; gap: 7px; }
.filter { width: 100%; padding: 10px; display: flex; align-items: center; gap: 9px; border: 1px solid transparent; border-radius: 11px; color: #43514b; text-align: left; background: transparent; }
.filter:hover { background: #f5f8f6; }
.filter.is-active { color: var(--text); border-color: var(--line); background: #ebf7f4; }
.filter-dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--category-color); }
.filter-label { flex: 1; font-size: 14px; }
.filter-count { color: var(--muted); font-size: 12px; }
.help { margin: 24px 0 0; padding: 13px; border-radius: 14px; color: var(--muted); font-size: 12px; line-height: 1.48; background: #f1f7f4; }

.map-area { position: relative; min-width: 0; overflow: hidden; background: #fbfbf9; }
.viewport { height: 100%; min-height: 650px; overflow: hidden; outline: none; touch-action: none; cursor: grab; background: linear-gradient(90deg, rgba(7,112,93,.03) 1px, transparent 1px), linear-gradient(rgba(7,112,93,.03) 1px, transparent 1px); background-size: 28px 28px; }
.viewport.is-dragging { cursor: grabbing; }
.viewport:focus-visible { box-shadow: inset 0 0 0 3px rgba(11,120,103,.34); }
.map-svg { width: 100%; height: 100%; display: block; background: #fff; }

/* Базовый слой не участвует в hit-testing, поэтому не перекрывает цветовые зоны. */
#base-layer { fill: none; pointer-events: none; }
#base-layer path, #base-layer circle { vector-effect: non-scaling-stroke; }

/*
  Все зоны по умолчанию имеют одинаковую заливку:
  rgb(194 194 194 / 70%).
  Исходные цвета SVG сохранены в CSS-переменных через app.js и возвращаются только при hover.
*/
#zones-layer [data-zone="true"] {
  pointer-events: all;
  cursor: pointer;
  stroke: transparent;
  stroke-width: 14;
  paint-order: stroke fill;
  outline: none;
  fill: rgb(194 194 194 / 70%) !important;
  fill-opacity: 1 !important;
  opacity: 1 !important;
  transition: fill 220ms ease, fill-opacity 220ms ease, opacity 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* Только при наведении показывается исходный цвет конкретной зоны. */
#zones-layer [data-zone="true"].is-hovered {
  outline: none;
  stroke: transparent;
  stroke-width: 14;
  fill: var(--zone-original-fill) !important;
  fill-opacity: var(--zone-original-fill-opacity) !important;
  opacity: var(--zone-original-opacity) !important;
}

/* Клик только открывает карточку — без дополнительной обводки или заливки. */
#zones-layer [data-zone="true"].is-active,
#zones-layer [data-zone="true"]:focus,
#zones-layer [data-zone="true"]:focus-visible {
  outline: none;
  stroke: transparent;
  stroke-width: 14;
}

/* Скрытые фильтром зоны остаются серыми и не окрашиваются при hover. */
#zones-layer [data-zone="true"].is-muted,
#zones-layer [data-zone="true"].is-muted.is-hovered {
  fill: rgb(194 194 194 / 70%) !important;
  fill-opacity: 1 !important;
  opacity: .14 !important;
}

@media (prefers-reduced-motion: reduce) {
  #zones-layer [data-zone="true"] { transition: none; }
}

.map-controls { z-index: 5; position: absolute; top: 16px; right: 16px; display: flex; gap: 7px; padding: 7px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.95); box-shadow: 0 8px 22px rgba(21,31,27,.11); }
.map-controls button { width: 37px; height: 37px; display: grid; place-items: center; border: 0; border-radius: 9px; color: var(--text); font-size: 21px; background: #edf3f0; }
.map-controls button:hover { color: white; background: var(--accent); }

.tooltip { z-index: 20; position: fixed; max-width: 240px; padding: 8px 10px; border-radius: 10px; color: white; font-size: 13px; line-height: 1.35; pointer-events: none; background: rgba(17,29,25,.93); box-shadow: 0 8px 22px rgba(0,0,0,.17); }
.details-empty { min-height: 100%; display: grid; align-content: center; justify-items: start; }
.details-empty > span { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 13px; color: var(--accent); font-size: 26px; background: #e8f5f1; }
.details h2 { margin: 13px 0 0; font-size: 22px; letter-spacing: -.04em; }
.details p { color: var(--muted); font-size: 14px; line-height: 1.5; }
.card { min-height: 100%; display: flex; flex-direction: column; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-category { padding: 6px 10px; border-radius: 999px; color: white; font-size: 12px; font-weight: 700; background: var(--card-color, var(--accent)); }
.card-close { width: 34px; height: 34px; border: 0; border-radius: 9px; color: var(--muted); font-size: 24px; background: #f2f5f3; }
.card-close:hover { color: var(--text); background: #e8eeea; }
.card-title { margin: 23px 0 9px; font-size: 25px; line-height: 1.08; letter-spacing: -.04em; }
.card-text { margin: 0; }
.card-facts { margin: 24px 0; display: grid; gap: 11px; }
.card-fact { padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.card-fact dt { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.card-fact dd { margin: 4px 0 0; font-size: 14px; }
.card-focus { width: 100%; min-height: 44px; margin-top: auto; border: 0; border-radius: 11px; color: white; font-weight: 700; background: var(--accent); }
.card-focus:hover { background: #075d50; }

@media (max-width: 1120px) {
  .map-layout { grid-template-columns: 240px minmax(0,1fr); }
  .details { grid-column: 1 / -1; min-height: 230px; border-top: 1px solid var(--line); border-left: 0; }
  .card { min-height: auto; }
  .details-empty { min-height: 150px; }
}
@media (max-width: 760px) {
  .map-app { padding: 0; }
  .map-header { padding: 18px; display: grid; align-items: start; }
  .map-layout { min-height: 100svh; border: 0; border-radius: 0; grid-template-columns: 1fr; }
  .map-sidebar { padding: 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .filters { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .filter { padding: 8px; }
  .filter-label { font-size: 12px; }
  .filter-count { display: none; }
  .help { display: none; }
  .map-area, .viewport { min-height: 58svh; }
  .details { padding: 18px; }
}
@media (max-width: 420px) { .filters { grid-template-columns: 1fr; } }