/* Стили слоя карты (таск 05). Палитра — только токены из styles.css
   (--bg/--card/--text/--hint/--link/--button/--button-text/--border) и общая
   шкала (--sp-*/--fs-*/--r-*/--shadow-*), своих цветов и размеров не заводим.
   Вид блока (фон, рамка, радиус, тень) и высота .map заданы в styles.css
   общим правилом .dash-block/.filters/.map/.banner/.state/.card. */

/* z-index: 0 замыкает панели Leaflet (тайлы 200–400, контролы 1000, легенда 1100)
   внутри карты: иначе при прокрутке они рисуются поверх липкой шапки калькулятора
   (z-index 5), и карта «вылезает» над полем суммы. */
.map-host { position: relative; z-index: 0; }

/* Плашка «упрощённая карта» — одна строка поверх карты, клики пропускает.
   Стоит справа от зума: центр верха на 360 px делит с переключателем зон
   (правый верхний угол), и плашка с ним сталкивалась. z-index выше панелей
   Leaflet (тайлы ~200, контролы 1000). */
.map-note {
  position: absolute;
  top: 10px;
  left: 54px;
  z-index: 1100;
  max-width: calc(100% - 54px - 140px);
  padding: 3px var(--sp-3);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--hint-strong);
  box-shadow: var(--shadow-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* Обёртка divIcon: свой класс вместо leaflet-div-icon, чтобы не тянуть
   его белый фон и рамку. */
.cambio-ico { background: none; border: none; }

/* Обычная метка — кружок в цвет кнопки темы; лучшая — крупнее (размер задаёт
   iconSize в map.js, тут только заливка на всю обёртку). */
.cambio-pin {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--button);
  border: 2px solid var(--card);
  box-shadow: var(--shadow-1);
  cursor: pointer;
}

/* Лучший курс по выбранной паре (серверный признак best): смысловой зелёный
   вместо синего плюс ореол тем же цветом — крупного размера мало, на пёстрых
   тайлах он читается как «просто ещё одна метка». Ореол берёт цвет от --ok,
   а тот выводится из --text, поэтому работает и на инвертированных тайлах. */
.cambio-pin.best {
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(128, 128, 128, 0.35), var(--shadow-1);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 45%, transparent), var(--shadow-1);
}

/* Без курса или протухший — приглушённая, чтобы глаз шёл к живым точкам */
.cambio-pin.muted { background: var(--hint); }

/* Кластер, внутри которого есть лучшая точка: тот же ореол, что у метки.
   Заливку не трогаем — число внутри читается по паре --button/--button-text. */
.cambio-cluster.best {
  border-color: var(--ok);
  box-shadow: 0 0 0 4px rgba(128, 128, 128, 0.35), var(--shadow-1);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 45%, transparent), var(--shadow-1);
}

/* Кластер — кружок с числом точек внутри */
.cambio-cluster {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--button);
  color: var(--button-text);
  border: 2px solid var(--card);
  box-shadow: var(--shadow-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
}

/* Своя позиция (R03.1, G22): человечек в светлом кружке с акцентной обводкой —
   не «ещё одна синяя точка» (слово заказчика 21.08). Некликабельная. */
.cambio-user {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card);
  color: var(--link);
  border: 2.5px solid var(--link);
  /* Ореол из токена темы. Первая строка — фолбэк для webview без color-mix:
     нейтральный серый, потому что зашитый голубой оставался светлым в тёмной
     теме. Как и прочие тени проекта, от темы не зависит. */
  box-shadow: 0 0 0 4px rgba(128, 128, 128, 0.35), var(--shadow-1);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--link) 25%, transparent), var(--shadow-1);
}
.cambio-user svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* Тёмная тема: тайлы OSM всегда светлые. Гашения яркостью не хватало — плита
   карты оставалась самым светлым пятном экрана и выбивалась из ряда блоков.
   Инверсия с поворотом тона переводит светлую подложку в тёмную и возвращает
   воде и зелени их цвета, а надписям — светлый цвет на тёмном.
   Класс map-dark ставит map.js и только он — по фактическому фону страницы,
   поэтому одинаково работает и при тёмной теме Telegram на светлой ОС, и при
   ручном выборе: theme.js шлёт cambio:theme, map.js на него пересчитывает класс. */
.map-dark .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.92) saturate(0.8);
}
.map-dark .leaflet-control-zoom a {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}

/* Кнопка «Где я» (G21): правый нижний угол, как «моё местоположение» в картах.
   Единственный кликабельный элемент поверх карты — у легенды и плашки
   pointer-events нет. Вид — кнопка темы (--button), чтобы читалась действием,
   а не подписью; высота --tap. Пока ищем позицию — приглушена (aria-busy). */
.map-locate {
  position: absolute;
  right: var(--sp-2);
  bottom: var(--sp-2);
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-pill);
  background: var(--button);
  color: var(--button-text);
  box-shadow: var(--shadow-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.map-locate:active { filter: brightness(0.92); }
.map-locate[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* Переключатель слоя зон доставки (G18/G25): правый верхний угол. Выключен —
   вид карточки, включён — вид кнопки темы. Кликабелен, как «Где я». */
.map-zones {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 1100;
  min-height: 32px;
  padding: 0 var(--sp-3);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-1);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.map-zones[aria-pressed="true"] {
  background: var(--button);
  color: var(--button-text);
  border-color: var(--button);
}
/* плашка-вспышка (зоны не загрузились) — та же .map-note, но появляется и уходит */
.map-note-flash { top: 44px; max-width: calc(100% - 54px - var(--sp-2)); }
.map-note-flash[hidden] { display: none; }

/* Подпись зоны по тапу — попап Leaflet в токенах темы; leaflet.css подключается
   позже map.css, поэтому селекторы через .map-host (как у tooltip «Вы здесь») */
.map-host .zone-popup .leaflet-popup-content-wrapper,
.map-host .zone-popup .leaflet-popup-tip {
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-2);
  border-radius: var(--r-md);
}
.map-host .zone-popup .leaflet-popup-content {
  margin: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.map-host .zone-popup .leaflet-popup-close-button { color: var(--hint-strong); }
.zone-title { font-weight: 700; font-size: var(--fs-md); margin-bottom: 2px; }
.zone-terms { color: var(--text); }
.zone-note { color: var(--hint-strong); margin-top: 2px; }
.zone-source { color: var(--hint-strong); font-size: var(--fs-xs); margin-top: var(--sp-1); }
/* Google InfoWindow всегда белый — в тёмной теме токены дали бы светлый текст на
   белом; внутри .gm-style цвета фиксированные (ветка без ключа не проверяема) */
.gm-style .zone-card { color: #16171a; font-size: 13px; line-height: 1.4; }
.gm-style .zone-card .zone-terms { color: #16171a; }
.gm-style .zone-card .zone-note,
.gm-style .zone-card .zone-source { color: #6a6a70; }

/* Легенда: одна строка в углу карты, объясняет зелёную метку. Кликов не ловит,
   поэтому не мешает тянуть карту; правый нижний угол занят кнопкой «Где я» —
   встаём в левый нижний. */
.map-legend {
  position: absolute;
  left: var(--sp-2);
  bottom: var(--sp-2);
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px var(--sp-2);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--hint-strong);
  box-shadow: var(--shadow-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}
.map-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.map-legend-item + .map-legend-item { margin-left: var(--sp-2); }
.map-legend-item[hidden] { display: none; }
.map-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ok);
  flex: 0 0 auto;
}
/* «вы здесь» в легенде — тот же вид, что у человечка: светлый кружок с обводкой */
.map-legend-dot.you {
  box-sizing: border-box;
  background: var(--card);
  border: 2px solid var(--link);
}

/* Подпись «Вы здесь» над своей точкой (Leaflet tooltip): без неё синий кружок
   читался как ещё одна метка. Селектор через .map-host — leaflet.css
   подключается позже map.css и при равной специфичности перекрыл бы вид;
   стрелку прячем — подпись и так стоит над точкой. */
.map-host .leaflet-tooltip.cambio-user-tip {
  padding: 1px var(--sp-2);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.3;
}
.map-host .leaflet-tooltip.cambio-user-tip::before { display: none; }

/* Кнопка «Маршрут» (R03.4) наследует вид .contact-btn из styles.css;
   здесь только отступ ряда, чтобы не липла к курсам. */
.map-route-row { margin-top: var(--sp-3); }

/* Контролы Leaflet на общей шкале скруглений — чтобы карта не выбивалась
   из блочной вёрстки соседей. */
.leaflet-control-zoom a {
  border-radius: var(--r-sm) !important;
}