/* ============================================================
   Аптечная карта — визуальный язык в духе ventusky.com:
   полноэкранная карта + плавающие белые пиллы/панели,
   синий акцент, крупный нижний таймлайн.
   ============================================================ */

:root {
  /* Карта — тёмная «кибер», а плавающие панели — СВЕТЛЫЕ пиллы: на тёмной подложке
     они чётко отделяются, и красный логотип МФО на белом читается (тёмные панели
     топили и панель в карте, и логотип в панели). Акцент — синий, читаемый на белом
     (на карте узлы/лучи — cyan --node). */
  --panel:        #eef4fa;   /* молочно-голубые панели, почти белые */
  --panel-fill:   #dde8f2;   /* бейджи, трек — голубее глубже */
  --panel-hover:  #cedcea;   /* ховер пунктов/кнопок */
  --ink:          #26374a;   /* основной текст — тёмный сине-серый */
  --ink-2:        #6b7885;   /* приглушённые подписи */
  --accent:       #2f80ed;   /* синий — акцент */
  --accent-dark:  #1f6ad4;
  --node:         #38e1ff;   /* cyan узлов/лучей на карте (= NODE в app.js) */
  --active:       #2f80ed;   /* активный пилл «Регионы» — синий, чтобы не сливался с картой */
  --active-ic:    #f6a623;   /* оранжевая иконка активного */
  --danger:       #e2574c;
  --shadow:       0 2px 14px rgba(19, 42, 72, 0.28);
  --shadow-sm:    0 1px 6px rgba(19, 42, 72, 0.24);
  --line:         rgba(19, 42, 72, 0.08); /* еле заметный кант светлой панели */
  --r-pill:       22px;
  --r-panel:      16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'PT Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

#map {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Canvas лучей-связей: живёт ВНУТРИ движка карты перед слоем меток (порядок задаёт
   JS вставкой), поэтому z-index НЕ задаём — иначе всплыл бы над метками. Курсор
   проходит сквозь. */
.beam-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Плавающие панели над картой */
.topbar, .zoom, .layers, .stats, .timeline { z-index: 5; }

/* ---------- Верхний левый: логотип ---------- */

.topbar-left {
  position: fixed;
  top: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 30px;
  box-shadow: var(--shadow);
}

.brand {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--ink);
}
.brand-logo {
  display: block;
  height: 34px;
  width: auto;
}
.brand-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ---------- Верхний правый: иконки ---------- */

.topbar-right {
  position: fixed;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow);
}
.icon-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 140ms ease;
}
.icon-btn:hover { background: var(--panel-fill); }

/* ---------- Зум ---------- */

.zoom {
  position: fixed;
  top: 74px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.zoom button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 140ms ease;
}
.zoom button:hover { background: var(--panel-hover); }

/* ---------- Левая панель: разбивка по регионам ---------- */

.regions {
  position: fixed;
  top: 76px;
  left: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-height: calc(100vh - 76px - 150px);
  max-height: calc(100dvh - 76px - 150px); /* мобильный Chrome: vh не учитывает адресную строку */
}
.regions[hidden] { display: none; }

.regions-head {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 16px 0 14px;
  border-radius: var(--r-pill);
  background: var(--active);
  border: 1px solid var(--line);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: var(--shadow);
  white-space: nowrap;
  cursor: pointer;
  list-style: none;              /* убрать штатный треугольник <summary> */
  user-select: none;
}
.regions-head::-webkit-details-marker { display: none; }
.regions-head .ic { display: flex; color: var(--active-ic); }
.regions-chevron { margin-left: 2px; transition: transform 160ms ease; }
details.regions[open] .regions-chevron { transform: rotate(180deg); }

.regions-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-height: 0;              /* внутри flex-колонки <details> иначе не сжимается */
  /* своя граница высоты: <details> не прокидывает max-height контейнера в список,
     поэтому overflow не срабатывал (панель раскрывалась во весь экран). */
  max-height: calc(100vh - 76px - 150px - 56px);
  max-height: calc(100dvh - 76px - 150px - 56px);
  overflow-y: auto;
  padding: 2px 4px 2px 0;
  scrollbar-width: none;      /* Firefox: полосу скрыть, колесо работает */
  -ms-overflow-style: none;   /* старый Edge */
}
.regions-list::-webkit-scrollbar { width: 0; height: 0; } /* WebKit */

.region-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 8px 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  transition: background 140ms ease;
}
.region-item:hover { background: var(--panel-hover); }
.region-count {
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-fill);
  color: var(--accent);
  border-radius: 11px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Правая KPI-карточка ---------- */

.stats {
  position: fixed;
  right: 116px;             /* слева от кнопок в правом верхнем углу */
  top: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px 14px;
  min-width: 0;
  /* Непрозрачность 60% — решение заказчика: карта должна просвечивать сквозь KPI.
     Полупрозрачным делаем ФОН, а не весь элемент через opacity: иначе поблёкли бы и
     цифры. blur — чтобы крупные значения не терялись на пёстрой подложке. --panel
     в rgb: #eef4fa. */
  background: rgba(238, 244, 250, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow);
}
.stat { display: flex; flex-direction: column; gap: 1px; }
.stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.stat-value {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ---------- Нижний таймлайн ---------- */

/* Полностью прозрачный бар: не перекрывает копирайт Яндекса нигде.
   pointer-events: none — пустые зоны пропускают клики к рефереру под баром. */
.timeline {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  /* низ увеличен: подписи шкалы висят ниже трека и без этого запаса
     наезжали на копирайт Яндекса («Открыть в Картах», «© Яндекс») */
  padding: 14px 22px 96px;
  pointer-events: none;
  background: none;
}
.timeline > * { pointer-events: auto; position: relative; }

/* Шкала гаснет, пока ею не пользуются: карта внизу не перегорожена подписями, но сам
   ползунок остаётся на месте — виден настолько, чтобы понять, что он там есть.
   Прозрачность вешаем на .tl-track, а НЕ на .timeline: у контейнера pointer-events:none
   (под ним копирайт Яндекса), :hover на нём не сработал бы вовсе. */
.tl-track {
  width: 100%;
  padding: 0 14px;
  opacity: 0.28;
  transition: opacity 180ms ease;
}
/* Зона наведения шире самой шкалы — «рядом с ней» тоже проявляет. Расширяем только
   ВВЕРХ: снизу копирайт Яндекса и кнопка «Открыть в Картах», перехватывать курсор
   над ними нельзя (условие бесплатной лицензии). */
.tl-track::before {
  content: '';
  position: absolute;
  inset: -34px 0 0 0;
}
.tl-track:hover,
.tl-track:focus-within { opacity: 1; }
/* Ручку тянут — курсор может уйти за зону, но шкала обязана оставаться видимой */
.tl-track:has(.noUi-active) { opacity: 1; }

/* Тач-устройства: наведения не бывает, гасить шкалу там — значит спрятать её насовсем */
@media (hover: none) {
  .tl-track { opacity: 1; }
  .tl-track::before { content: none; }
}

/* noUiSlider — облегчённый трек в стиле Ventusky */
#slider { margin: 0; }
.noUi-target {
  background: none;
  border: none;
  box-shadow: none;
}
.noUi-horizontal { height: 8px; }
.noUi-target, .noUi-base { border-radius: 4px; }
.noUi-connects { border-radius: 4px; background: rgba(255, 255, 255, 0.14); }
.noUi-connect { background: var(--accent); }

/* Ручка: сам блок — прозрачный, только позиционирование и зона захвата.
   Видимый кружок рисует ::before и растёт из центра через transform (без рефлоу
   и без смещения — right/top якорят блок). Тултип-квартал живёт отдельным
   потомком, поэтому при захвате он не масштабируется вместе с кружком. */
.noUi-horizontal .noUi-handle {
  width: 20px;
  height: 20px;
  /* Штатное центрирование noUiSlider: right = -половина ширины, top = -(ручка-трек)/2.
     Пиксельные «доводки» отсюда убраны: при зуме браузера ≠100% (или масштабе
     Windows) кружок, тултип и засечка округляются в device-пикселях независимо,
     и ручной сдвиг одного рассинхронит остальные. Единый якорь = минимум расхождений. */
  right: -10px;
  top: -6px;
  background: none;
  border: none;
  box-shadow: none;
  cursor: grab;
}
.noUi-handle::before {   /* видимый кружок */
  content: '';
  position: absolute;
  /* Центрируем кружок через translate(-50%,-50%) от середины бокса — так же, как
     noUiSlider ставит тултип. Прежний left:0;width:100% давал кружок СИСТЕМНО на
     +3px правее засечки и тултипа (замерено на масштабах 1.0/1.25/1.5 — это не
     дрожание округления, а реальный сдвиг). Явные 20px обязательны: дефолт
     noUiSlider (width:1px) иначе схлопывает кружок в полоску. */
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid var(--accent);
  background: #fff;
  /* ровная тень без вертикального сдвига: любой offset вниз визуально «ронял»
     кружок под линию шкалы */
  box-shadow: 0 0 3px rgba(19, 42, 72, 0.32);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.noUi-handle::after {    /* невидимая увеличенная зона попадания (~56px) */
  content: '';
  display: block;
  position: absolute;
  top: -16px;
  left: -16px;
  width: 52px;
  height: 52px;
  background: none;       /* гасим серую полоску-грип из дефолта noUiSlider */
}
/* scale комбинируем с центрирующим translate, иначе кружок «прыгает» из центра */
.noUi-handle:hover::before { transform: translate(-50%, -50%) scale(1.1); }
.noUi-handle.noUi-active { cursor: grabbing; }
.noUi-handle.noUi-active::before {  /* при захвате кружок расширяется */
  transform: translate(-50%, -50%) scale(1.4);
  box-shadow: 0 0 0 6px rgba(56, 225, 255, 0.22), 0 3px 10px rgba(0, 0, 0, 0.45);
}
.noUi-handle:focus { outline: none; }
.noUi-handle:focus::before { box-shadow: 0 0 0 5px rgba(56, 225, 255, 0.35); }

/* Пузырь-тултип на ручке (текущий период) — подпись над ползунком */
.noUi-tooltip {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  /* хвостик-стрелку убрали: при захвате кружок растёт (scale 1.4) и наезжал на неё.
     Подняли выше, чтобы тень активного кружка (кольцо 6px + блюр) не доставала пузырь */
  bottom: 215%;
}

/* Подписи кварталов вдоль трека */
.noUi-pips { color: var(--ink-2); top: 14px; height: 40px; }
.noUi-value {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  margin-top: 6px;
}
.noUi-marker { background: rgba(255, 255, 255, 0.22); }
.noUi-marker-large { height: 8px; }

/* ---------- Фокус ---------- */

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Адаптив ---------- */

/* KPI остаётся в верхнем ряду на любой ширине — после того как ушёл поиск, пилла с
   названием кончается на x=402, а сама карточка ужата до 198 px (решение заказчика по
   скриншоту 883 px: «вполне помещается рядом с заголовком, можно уменьшить»).
   Единственная тесная точка — коридор чуть выше 720 px, где название ещё видно:
   402 + 8 зазора против left карточки (W − 116 − 198). Поэтому название прячем уже с
   780 px, а не с 720 — там пилла становится ~100 px и места хватает с запасом.
   Прежнее правило «увести карточку под кнопки с 1040 px» удалено: оно было рассчитано
   на пиллу с полем поиска (622 px). */
@media (max-width: 780px) {
  .brand-name { display: none; }
}

/* Телефон: панели ужимаем, чтобы верхние пиллы влезли в 360–430 px по ширине,
   а KPI и шкала не съели половину экрана. Тач-цели держим ≥ 36 px. */
@media (max-width: 560px) {
  /* Верхний ряд на телефоне: слева пилла с логотипом (по содержимому), справа — KPI
     (решение заказчика: «рядом с заголовком»). Кнопки «полный экран/о проекте» и зум
     уезжают в правую колонку ПОД карточку. Их отступы сверху — от максимальной высоты
     KPI (три показателя ≈ 150 px), а не от текущего содержимого: числа меняются с
     кварталом, и привязка к фактической высоте гуляла бы. */
  .topbar-left { top: 8px; left: 8px; gap: 8px; padding: 5px 10px; }
  .brand-logo { height: 28px; }

  .topbar-right { top: 166px; right: 8px; padding: 4px; gap: 4px; }
  .icon-btn { width: 36px; height: 36px; }

  .zoom { top: 216px; right: 10px; gap: 6px; }
  .zoom button { width: 38px; height: 38px; font-size: 21px; }

  .regions { top: 58px; left: 8px; }
  .regions-head { height: 36px; font-size: 14px; }
  .region-item { height: 34px; font-size: 13px; max-width: calc(100vw - 24px); }
  .region-name { overflow: hidden; text-overflow: ellipsis; }

  /* KPI — в верхнем ряду справа от логотипа. Ширина ограничена остатком строки:
     8 (левый отступ) + пилла с лого ≈ 100 + 8 зазора. */
  .stats { top: 8px; right: 8px; min-width: 0; max-width: calc(100vw - 124px); padding: 8px 11px; gap: 7px; }
  .stat-label { font-size: 9px; letter-spacing: 0.04em; }
  .stat-value { font-size: 16px; }

  /* Копирайт Яндекса на телефоне идёт в ДВА ряда («Открыть в Картах» + «Условия
     использования») — 96 px запаса, иначе подписи шкалы садятся прямо на него.
     Боковой паддинг трека 42 px: крайние подписи и тултип ручки центрируются по
     краю трека и без него вылезают за кромку экрана. */
  .timeline { padding: 10px 8px 122px; }
  .tl-track { padding: 0 42px; }
  .noUi-value { font-size: 10px; }
  .noUi-tooltip { font-size: 12px; padding: 3px 8px; }

  /* Штатные контролы v3 стоят в одном нижнем ряду: кнопка «Открыть в Яндекс Картах»
     слева (164 px), копирайт справа (340 px) — в 390 px они не помещаются, и кнопка
     накрывала «© Яндекс» с «Условиями использования». Заслонённый копирайт — прямое
     нарушение free-лицензии, поэтому разводим их по вертикали: ничего не прячем,
     оба элемента целиком видны и кликабельны. Запас таймлайна выше (122 px) — под
     этот второй ряд. Кнопку прижимаем к правому краю — она встаёт над логотипом
     «Яндекс Карты», и нижний угол читается одним блоком, а не лесенкой. */
  .ymaps3--controls_bottom { transform: translateY(-28px); }
  .ymaps3--controls_bottom.ymaps3--controls_left { left: auto; right: 0; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── Метки и кластеры карты (v3): светящиеся cyan-узлы на тёмной подложке ── */
.map-pin {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--node); border: none;
  box-shadow: 0 0 5px 1px rgba(56, 225, 255, 0.6), 0 0 12px 3px rgba(56, 225, 255, 0.28);
  cursor: pointer; box-sizing: border-box;
}
.map-pin--multi {
  width: 24px; height: 24px;
  background: rgba(10, 26, 40, 0.9); border: 1.5px solid var(--node);
  display: flex; align-items: center; justify-content: center;
  font: 700 12px 'PT Sans', sans-serif; color: #cdefff;
}
/* Тач: в узел 12 px пальцем не попасть — расширяем зону невидимым кругом,
   сам узел не растёт (иначе карта превратится в кашу из пятен). */
@media (hover: none) {
  .map-pin { position: relative; }
  .map-pin::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 40px; height: 40px; transform: translate(-50%, -50%);
  }
}
.map-cluster {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: 999px;
  background: rgba(12, 32, 48, 0.88); border: 1.5px solid var(--node);
  display: flex; align-items: center; justify-content: center;
  font: 700 13px 'PT Sans', sans-serif; color: #cdefff;
  box-shadow: 0 0 8px 2px rgba(56, 225, 255, 0.45), inset 0 0 8px rgba(56, 225, 255, 0.22);
  cursor: pointer; box-sizing: border-box;
}
/* Градуировка от числа аптек: мелкие — тише (меньше и тусклее), крупные — центры
   плотности. Пороги — clusterSizeClass в logic.js (10/100/1000). */
.map-cluster--sm {
  min-width: 21px; height: 21px; padding: 0 5px; font-size: 10px;
  border-width: 1px; opacity: 0.82;
  box-shadow: 0 0 4px 1px rgba(56, 225, 255, 0.3);
}
.map-cluster--md { min-width: 30px; height: 30px; font-size: 12px; }
.map-cluster--lg {
  min-width: 42px; height: 42px; font-size: 14px;
  box-shadow: 0 0 12px 3px rgba(56, 225, 255, 0.55), inset 0 0 10px rgba(56, 225, 255, 0.25);
}
.map-cluster--xl {
  min-width: 54px; height: 54px; font-size: 16px; border-width: 2px;
  box-shadow: 0 0 16px 5px rgba(56, 225, 255, 0.6), inset 0 0 14px rgba(56, 225, 255, 0.3);
}

/* ── Попап карты (v3 без встроенных балунов): светлая карточка как и панели ── */
.map-popup {
  /* --dx проставляет clampPopupX в app.js: у кромки экрана центрированный по метке
     попап уезжал за неё (на узком экране — половиной текста). */
  transform: translate(calc(-50% + var(--dx, 0px)), calc(-100% - 16px));
  width: max-content; max-width: min(460px, calc(100vw - 24px)); padding: 10px 30px 10px 14px;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow);
  font: 400 15px 'PT Sans', sans-serif; line-height: 1.35;
  position: relative;
}
/* hover-тултип: не перехватывает курсор (иначе метка теряет hover → мерцание) */
.map-popup--hover { pointer-events: none; padding-right: 14px; }
/* DOM-тултип адреса (не map-объект): fixed по проекции точки, поверх панелей */
.map-tip { position: fixed; z-index: 6; margin: 0; }
.map-tip[hidden] { display: none; }
.map-popup b { color: var(--accent); }
.map-popup ul { margin: 0; padding: 0; list-style: none; max-height: 240px; overflow-y: auto; }
.map-popup li { padding: 6px 0; border-top: 1px solid var(--line); }
.map-popup li:first-child { border-top: none; }
.map-popup-close {
  position: absolute; top: 6px; right: 8px;
  border: none; background: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--ink-2);
}

/* ── Центрирование + анимации появления меток и отклика кластеров ──
   v3 YMapMarker якорит DOM по верх-левому углу → без translate(-50%,-50%)
   пузырь смещён вниз-вправо от точки. Центрирующий translate ВЕЗДЕ входит в
   transform (и в keyframes, и в :hover), иначе анимация/ховер сбрасывают его. */
@keyframes map-pin-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.map-pin, .map-cluster {
  transform: translate(-50%, -50%);
  animation: map-pin-in 240ms ease-out;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

/* Мягкое «дыхание» свечения узла — только box-shadow, transform (центрирование) не трогаем. */
@keyframes node-glow {
  0%, 100% { box-shadow: 0 0 5px 1px rgba(56, 225, 255, 0.55), 0 0 12px 3px rgba(56, 225, 255, 0.25); }
  50%      { box-shadow: 0 0 8px 2px rgba(56, 225, 255, 0.9),  0 0 20px 6px rgba(56, 225, 255, 0.45); }
}
.map-pin:not(.map-pin--multi) {
  animation: map-pin-in 240ms ease-out, node-glow 2.6s ease-in-out infinite;
}

.map-cluster:hover {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 0 12px 3px rgba(56, 225, 255, 0.6), inset 0 0 8px rgba(56, 225, 255, 0.25);
}

.map-pin:hover { transform: translate(-50%, -50%) scale(1.3); }