/*
 * Freedom UTM — ОФОРМЛЕНИЕ ПОДСКАЗКИ О ЗОНЕ. ОДНО НА ВСЕ ЭКРАНЫ.
 *
 * ЗАЧЕМ ОТДЕЛЬНЫЙ ФАЙЛ (28.08.2026). Логику подсказки мы вынесли в общую
 * `public/js/zone-tooltip.js` и подключили к четырём экранам — а ОФОРМЛЕНИЕ
 * осталось лежать в `public/css/map.css`, то есть только у публичной карты.
 * В кабинете и в пульте УВД подсказка честно строилась и вставлялась в
 * страницу — и была НЕВИДИМА: без `position`, фона, рамки и `z-index` это
 * просто текст под холстом карты. Владелец так и описал: «кнопка появилась,
 * но не работает».
 *
 * УРОК, КОТОРЫЙ СТОИТ ЗАПОМНИТЬ. Общей была сделана ПОЛОВИНА — разметка и
 * данные; вторая половина, без которой первая не видна, осталась частной.
 * Если что-то объявляется общим для всех экранов, общим должно стать всё, что
 * нужно для его показа: разметка, данные И оформление.
 */

/* ---------------------------------------------------------------------- */
/* M4b — ховер-тултип зон (2D + 3D, общий DOM-элемент)                      */
/* ---------------------------------------------------------------------- */

.zone-tooltip {
  position: fixed;
  z-index: 300;
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 0.75rem 0.9rem;
  font-size: 0.8rem;
  color: var(--text);
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.zone-tooltip[hidden] {
  display: none;
}

.zone-tooltip__title {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  word-break: break-word;
}

.zone-info__row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.15rem 0;
  color: var(--muted);
}

.zone-info__row span:last-child {
  color: var(--text);
  text-align: right;
}

/* Пояснение к строке высоты: ЧТО именно эта высота ограничивает. Тише самого
   значения, но читаемо — без него «300 м» у запретной зоны читается как
   «до 300 можно», что и было дефектом класса п. 7 (DOCS_INDEX.md). */
.zone-info__hint {
  color: var(--muted);
  font-size: 0.9em;
}

/* E78 (28.08.2026): разделитель между несколькими зонами под курсором —
   общая библиотека формирует список (`zone-tooltip.js::renderManyHtml`),
   поэтому оформление здесь общее тоже (ожог E71: не довезли CSS общей
   разметки на два экрана). */
.zone-tooltip__divider {
  border-top: 1px solid var(--hairline);
  margin: 0.5rem 0;
}

.zone-tooltip__msg {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  white-space: pre-wrap;
  max-height: 160px;
  overflow-y: auto;
}