/* ============================================================================
   NEVOD — боевой HUD: карта на весь экран, все данные — ОДНОЙ колонкой слева.
   Колонка заполнена целиком (без пустот), панели одинаковой ширины и выровнены
   по краям. Переключатель «Только цели» живёт в шапке.
   Подключается последним: перекрывает сайдбар (battle.css) и лист (battle-mobile.css).
   ========================================================================= */

html,
body {
  height: 100%;
  max-height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
}

body {
  display: block !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* --- Карта: на весь экран, под панелями --------------------------------- */

#map {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  z-index: 1;
}

/* Секции панели выходят из потока и становятся плашками.
   Важно: у позиционированных элементов display:contents не работает, поэтому
   сначала снимаем позиционирование, затем «расклеиваем» панель. */
#panel {
  display: contents !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  backdrop-filter: none !important;
}

.section {
  position: fixed;
  z-index: 30;
  margin: 0 !important;
  padding: 8px 9px 9px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(9, 12, 18, 0.93), rgba(7, 10, 16, 0.86));
  backdrop-filter: blur(18px) saturate(130%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

#panel .section-header {
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex: 0 0 auto;
}

/* --- Геометрия: шапка + колонка из трёх плашек, заполняющих высоту ------ */

:root {
  --hud-gap: 8px;
  --hud-header-h: 56px;
  --hud-col-w: clamp(272px, 21.5vw, 348px);
  /* Высота ленты событий = ровно 4 однострочные строки + заголовок плашки.
     Меньше нельзя: четвёртая строка обрезается (проверено на 1600×900 и 1366×768). */
  --hud-events-h: clamp(172px, 19.4vh, 188px);
  /* свободная высота под колонку: экран минус шапка, отступы и лента событий */
  --hud-free: calc(100vh - var(--hud-gap) - var(--hud-header-h) - var(--hud-gap)
                   - var(--hud-gap) - var(--hud-events-h) - var(--hud-gap));
  --hud-nodes-h: calc(var(--hud-free) * 0.54);
  --hud-targets-h: calc(var(--hud-free) * 0.46 - var(--hud-gap));
  --hud-top: calc(var(--hud-gap) + var(--hud-header-h) + var(--hud-gap));
}

#header {
  position: fixed !important;
  top: var(--hud-gap) !important;
  left: var(--hud-gap) !important;
  right: var(--hud-gap) !important;
  height: var(--hud-header-h);
  min-height: var(--hud-header-h);
  max-height: var(--hud-header-h);
  box-sizing: border-box;
  overflow: hidden;
  z-index: 40;
  padding: 0 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(9, 12, 18, 0.95), rgba(7, 10, 16, 0.88));
  backdrop-filter: blur(18px) saturate(130%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Колонка: одна ширина у всех трёх плашек, высоты в сумме дают колонку */
#panel .section-nodes {
  flex: 0 0 auto;
  max-height: none;
  min-height: 0;
  left: var(--hud-gap);
  top: var(--hud-top);
  width: var(--hud-col-w);
  height: var(--hud-nodes-h);
}

#panel .section-targets {
  flex: 0 0 auto;
  max-height: none;
  min-height: 0;
  left: var(--hud-gap);
  top: calc(var(--hud-top) + var(--hud-nodes-h) + var(--hud-gap));
  width: var(--hud-col-w);
  height: var(--hud-targets-h);
}

#panel .section-events {
  flex: 0 0 auto;
  max-height: none;
  min-height: 0;
  left: var(--hud-gap);
  bottom: var(--hud-gap);
  width: var(--hud-col-w);
  height: var(--hud-events-h);
}

/* Плашка фильтров в боевом режиме не нужна: переключатель «Только цели»
   живёт в шапке (см. battle-hud.js) — никакой непонятной области. */
#panel .section-map-tools {
  display: none !important;
}

/* Ряд «Все / Подтв. / GPS / Off / Архив» — то же самое: в бою он не нужен, а
   20 px высоты забирает у списка узлов (из-за него не влезала вторая плитка). */
#panel .section-nodes .filter-bar {
  display: none !important;
}

/* --- Списки: без прокрутки, обрезка по слотам --------------------------- */

#node-list,
#target-list,
#alert-stream {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Строки списков держат свою высоту: сжимать их нельзя (иначе все 18 событий
   втискиваются в панель и превращаются в кашу). Лишние строки скрываются,
   а их число показывает бейдж «+N». */
#node-list > *,
#target-list > *,
#alert-stream > * {
  flex: 0 0 auto;
}

#panel .section-events #alert-stream .alert-item {
  padding: 4px 9px;
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Сколько строк списка реально влезает, считает battle-hud.js и пишет числом в
   data-hud-rows. Здесь скрывается всё, что дальше этого числа, — поэтому списки
   не обрезаются посередине строки ни на одном разрешении. Приложение
   перерисовывает списки по нескольку раз в секунду, но атрибут живёт на самом
   списке и переживает перерисовку. */
#node-list[data-hud-rows="0"] > *,
#target-list[data-hud-rows="0"] > *,
#alert-stream[data-hud-rows="0"] > *,
#node-list[data-hud-rows="1"] > :nth-child(n + 2),
#target-list[data-hud-rows="1"] > :nth-child(n + 2),
#alert-stream[data-hud-rows="1"] > :nth-child(n + 2),
#node-list[data-hud-rows="2"] > :nth-child(n + 3),
#target-list[data-hud-rows="2"] > :nth-child(n + 3),
#alert-stream[data-hud-rows="2"] > :nth-child(n + 3),
#node-list[data-hud-rows="3"] > :nth-child(n + 4),
#target-list[data-hud-rows="3"] > :nth-child(n + 4),
#alert-stream[data-hud-rows="3"] > :nth-child(n + 4),
#node-list[data-hud-rows="4"] > :nth-child(n + 5),
#target-list[data-hud-rows="4"] > :nth-child(n + 5),
#alert-stream[data-hud-rows="4"] > :nth-child(n + 5),
#node-list[data-hud-rows="5"] > :nth-child(n + 6),
#target-list[data-hud-rows="5"] > :nth-child(n + 6),
#alert-stream[data-hud-rows="5"] > :nth-child(n + 6),
#node-list[data-hud-rows="6"] > :nth-child(n + 7),
#target-list[data-hud-rows="6"] > :nth-child(n + 7),
#alert-stream[data-hud-rows="6"] > :nth-child(n + 7),
#node-list[data-hud-rows="7"] > :nth-child(n + 8),
#target-list[data-hud-rows="7"] > :nth-child(n + 8),
#alert-stream[data-hud-rows="7"] > :nth-child(n + 8),
#node-list[data-hud-rows="8"] > :nth-child(n + 9),
#target-list[data-hud-rows="8"] > :nth-child(n + 9),
#alert-stream[data-hud-rows="8"] > :nth-child(n + 9) {
  display: none !important;
}

/* Страховка, если скрипт не успел посчитать (или отключён): списки всё равно не
   растягиваются бесконечно. */
#node-list > :nth-child(n + 9),
#target-list > :nth-child(n + 9),
#alert-stream > :nth-child(n + 9) {
  display: none !important;
}

/* Совсем узкий экран: даже одной строке не хватает места — тогда заголовок
   плашки сжимается до счётчика «+N» (название раздела и кнопки убираем),
   чтобы строка влезла целиком, а не обрезалась. */
#panel .section.hud-tight .section-header {
  margin-bottom: 3px;
  padding-bottom: 0;
  border-bottom: none;
}

#panel .section.hud-tight .section-header .s-title,
#panel .section.hud-tight .section-header .s-meta,
#panel .section.hud-tight .section-header .btn,
#panel .section.hud-tight .section-header .map-chip {
  display: none !important;
}

#panel .section-events #alert-stream .alert-group-title {
  margin: 2px 0 0;
  flex: 0 0 auto;
}

/* Плитка узла в боевом режиме компактнее: время и координаты (7 px, нечитаемо)
   живут в карточке по тапу, а строка статуса и чипы — в одну строку. Иначе при
   узкой колонке (ландшафт телефона) плитка вырастает выше панели и не видно
   ни одного узла. */
#panel .section-nodes .n-item .n-foot {
  display: none !important;
}

#panel .section-nodes .n-item .n-sub {
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#panel .section-nodes .n-item .n-chips {
  flex-wrap: nowrap;
  overflow: hidden;
  margin-top: 3px;
}

/* Чип не переносится по словам: иначе «2,5 км» ломается на две строки, тянут за
   собой соседей (align-items: stretch) и плитка вырастает вдвое. */
#panel .section-nodes .n-item .n-chips .n-chip {
  white-space: nowrap;
  flex: 0 0 auto;
}

.hud-more {
  margin-left: auto;
  font-size: 10px;
  color: var(--dim);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* --- Служебное ----------------------------------------------------------- */

#selected-node-quick-card,
#selected-node-quick-card.quick-card--panel,
.sheet-handle,
.sheet-tabs,
.sheet-scrim {
  display: none !important;
}

.offline-chip {
  display: inline-flex !important;
}

/* Переключатель «Только цели» в шапке */
.hud-targets-toggle {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 11px;
  border-radius: 11px;
  border: 1px solid rgba(251, 146, 60, 0.3);
  background: rgba(251, 146, 60, 0.14);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.hud-targets-toggle.off {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--dim-strong);
}

@media (pointer: coarse) {
  .btn,
  .map-chip,
  .stat-pill,
  .theme-toggle,
  .hud-targets-toggle {
    min-height: 40px;
  }
}

/* --- Телефон: карта плашкой сверху, данные — под ней --------------------- */

@media (max-width: 760px) {
  :root {
    --hud-gap: 6px;
    --hud-header-h: 48px;
    --hud-events-h: clamp(96px, 15vh, 136px);
    /* Карта занимает верх экрана: панели идут ниже и её больше не закрывают.
       Держим её крупнее любой из плашек — это главный элемент экрана. */
    --hud-map-h: clamp(150px, 40vh, 380px);
    /* Остаток высоты делят узлы и цели */
    --hud-rest: calc(100vh - var(--hud-gap) - var(--hud-header-h) - var(--hud-gap)
                     - var(--hud-map-h) - var(--hud-gap)
                     - var(--hud-events-h) - var(--hud-gap));
  }

  #header {
    padding: 0 8px;
    gap: 6px;
  }

  .logo {
    font-size: 11.5px;
  }

  /* Карта — не фон, а своя плашка: так её центр виден, а не спрятан под
     панелями, и элементы управления карты остаются внутри неё. */
  #map {
    inset: auto !important;
    top: var(--hud-top) !important;
    left: var(--hud-gap) !important;
    right: var(--hud-gap) !important;
    width: auto !important;
    height: var(--hud-map-h) !important;
    border-radius: 14px !important;
    overflow: hidden;
  }

  #panel .section-nodes,
  #panel .section-targets,
  #panel .section-events {
    left: var(--hud-gap);
    right: var(--hud-gap);
    width: auto;
  }

  #panel .section-nodes {
    top: calc(var(--hud-top) + var(--hud-map-h) + var(--hud-gap));
    height: calc(var(--hud-rest) * 0.55);
  }

  #panel .section-targets {
    top: calc(var(--hud-top) + var(--hud-map-h) + var(--hud-gap) + var(--hud-rest) * 0.55 + var(--hud-gap));
    height: calc(var(--hud-rest) * 0.45 - var(--hud-gap));
  }

  #panel .section-events {
    bottom: var(--hud-gap);
    height: var(--hud-events-h);
  }

  .n-item,
  .target-card {
    padding: 6px 8px;
  }

  .n-item .n-sub {
    display: none;
  }
}

/* --- Ландшафт телефона/планшета: колонка уже, лента ниже ---------------- */

@media (max-height: 560px) and (max-width: 1100px) {
  :root {
    --hud-gap: 4px;
    --hud-header-h: 40px;
    --hud-col-w: clamp(196px, 25vw, 262px);
    --hud-events-h: clamp(84px, 23vh, 122px);
  }

  /* В ландшафте карта встаёт справа от колонки — тоже не под панелями. */
  #map {
    inset: auto !important;
    top: var(--hud-top) !important;
    left: calc(var(--hud-gap) + var(--hud-col-w) + var(--hud-gap)) !important;
    right: var(--hud-gap) !important;
    bottom: var(--hud-gap) !important;
    width: auto !important;
    height: auto !important;
    border-radius: 12px !important;
    overflow: hidden;
  }

  /* В ландшафте плитки узлов ниже, поэтому панель узлов шире: две плитки
     должны быть видны целиком без обрезки. */
  #panel .section-nodes {
    height: calc(var(--hud-free) * 0.64);
  }

  #panel .section-targets {
    top: calc(var(--hud-top) + var(--hud-free) * 0.64 + var(--hud-gap));
    height: calc(var(--hud-free) * 0.36 - var(--hud-gap));
  }

  /* Кнопки в заголовке (GPX/CSV) в ландшафте мельче — заголовок ниже. */
  #panel .section-header .btn,
  #panel .section-header .map-chip {
    padding: 1px 6px;
    font-size: 9.5px;
  }

  .logo {
    font-size: 11px;
  }

  #panel .section-nodes,
  #panel .section-targets,
  #panel .section-events {
    padding: 5px 7px 6px;
    border-radius: 11px;
  }

  .n-item,
  .target-card {
    padding: 4px 6px;
    font-size: 10.5px;
  }

  .n-item .n-sub,
  .target-sub {
    display: none;
  }

  #panel .section-header {
    margin-bottom: 3px;
    padding-bottom: 3px;
  }
}

@media (max-width: 420px) {
  .section-header .s-title {
    font-size: 10px;
  }
}

/* --- Контрольные точки полигона (эталон для проверки лучей) -------------- */

.cp-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: none;
  user-select: none;
}

.cp-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #67e8f9;
  background: rgba(8, 47, 73, 0.85);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18), 0 6px 14px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cp-dot span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e0f2fe;
}

.cp-label {
  padding: 4px 7px;
  border-radius: 9px;
  border: 1px solid rgba(103, 232, 249, 0.35);
  background: rgba(3, 9, 18, 0.88);
  color: var(--text, #e6edf7);
  font-size: 10.5px;
  line-height: 1.3;
  white-space: nowrap;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

.cp-marker .cp-name {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cp-marker .cp-local,
.cp-marker .cp-links {
  color: var(--dim-strong, #9fb0c7);
  font-size: 9.5px;
}

.cp-marker .cp-link {
  display: inline-block;
  margin: 0 3px;
}

.cp-marker .cp-link b {
  color: #67e8f9;
  font-weight: 600;
}

.cp-mid {
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(103, 232, 249, 0.4);
  background: rgba(3, 9, 18, 0.9);
  color: #a5f3fc;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}

.cp-marker .cp-note {
  color: #fcd34d;
  font-size: 9px;
  max-width: 190px;
  white-space: normal;
  line-height: 1.25;
}

/* --- Выбор подложки карты: схема / спутник / гибрид ---------------------- */

.hud-basemap-toggle {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border-radius: 11px;
  border: 1px solid rgba(56, 189, 248, 0.32);
  background: rgba(56, 189, 248, 0.14);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.hud-basemap-toggle.off {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--dim-strong);
}

/* Снимки не грузятся — нет интернета: в поле остаётся схема */
.hud-basemap-toggle.warn {
  border-color: rgba(248, 113, 113, 0.55);
  color: #fca5a5;
}

@media (pointer: coarse) {
  .hud-basemap-toggle {
    min-height: 40px;
  }
}

/* На узком экране название проекта убираем: место нужно кнопкам */
@media (max-width: 480px) {
  .logo {
    font-size: 0;
    letter-spacing: 0;
  }

  .hud-basemap-toggle {
    padding: 0 8px;
    font-size: 10.5px;
  }
}

/* --- Кнопка «Звук»: прослушивание записей узлов ------------------------- */

.hud-audio-toggle {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border-radius: 11px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(148, 163, 184, 0.14);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

@media (pointer: coarse) {
  .hud-audio-toggle {
    min-height: 40px;
  }
}

/* На телефоне счётчики в шапке дублируют панели — освобождаем место кнопкам */
@media (max-width: 640px) {
  #header .stats .stat-pill:not(.ws-indicator) {
    display: none;
  }
}

/* Тесная шапка на телефоне: подтягиваем отступы, чтобы кнопки влезали */
@media (max-width: 640px) {
  #header {
    padding: 0 6px;
    gap: 5px;
  }

  .hud-audio-toggle,
  .hud-basemap-toggle,
  .hud-targets-toggle {
    padding: 0 7px;
    font-size: 11px;
  }
}

.hud-audio-toggle {
  text-decoration: none;
}

/* Контрольные точки: номер в маркере и свой цвет у каждой,
   чтобы рядом стоящие точки не путались */
.cp-marker--2 .cp-dot { border-color: #fbbf24; background: rgba(69, 26, 3, 0.85); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18), 0 6px 14px rgba(0, 0, 0, 0.45); }
.cp-marker--3 .cp-dot { border-color: #a78bfa; background: rgba(46, 16, 101, 0.85); box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18), 0 6px 14px rgba(0, 0, 0, 0.45); }
.cp-marker--4 .cp-dot { border-color: #34d399; background: rgba(6, 78, 59, 0.85); box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18), 0 6px 14px rgba(0, 0, 0, 0.45); }

.cp-marker .cp-dot span {
  width: auto;
  height: auto;
  background: none;
  color: #e0f2fe;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.cp-marker--2 .cp-dot span { color: #fde68a; }
.cp-marker--3 .cp-dot span { color: #ddd6fe; }
.cp-marker--4 .cp-dot span { color: #a7f3d0; }

/* В подписи контрольной точки поясняем, что это отсчёт от узлов */
.cp-marker .cp-links-title {
  color: var(--dim, #8798ad);
  font-size: 9px;
  text-align: left;
  margin-bottom: 1px;
}

.cp-marker .cp-link {
  display: block;
  margin: 0;
  text-align: left;
}

/* ============================================================================
   Карточка-подсказка по наведению (узлы, контрольные точки).
   Маленькая, появляется рядом с объектом, не закрывает карту.
   ========================================================================== */

#nevod-hover-card {
  position: fixed;
  z-index: 160;
  display: none;
  min-width: 210px;
  max-width: min(340px, 82vw);
  padding: 9px 11px 8px;
  border-radius: 13px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(6, 10, 17, 0.92);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  color: var(--text);
  font-size: 11.5px;
  line-height: 1.35;
}

.hover-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.hover-card-title {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hover-card-hint {
  color: var(--dim, #8798ad);
  font-size: 9.5px;
}

.hover-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.hover-row + .hover-row {
  margin-top: 3px;
}

.hover-key {
  flex: 0 0 78px;
  color: var(--dim, #8798ad);
  font-size: 10px;
}

.hover-val {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.hover-dim {
  color: var(--dim, #8798ad);
}

.hover-health-ok { color: #4ade80; }
.hover-health-warn { color: #fbbf24; }
.hover-health-critical { color: #f87171; }

.hover-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 7px;
}

.hover-btn {
  padding: 4px 10px;
  border-radius: 9px;
  border: 1px solid rgba(56, 189, 248, 0.32);
  background: rgba(56, 189, 248, 0.14);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

/* ============================================================================
   Разгрузка боевого режима на странице оператора:
   плашка «Узлы» убрана (статистика узла — в карточке по наведению),
   колонка сузилась, «Цели» занимают освободившееся место.
   ========================================================================== */

body.hud-operator #panel .section-nodes {
  display: none !important;
}

body.hud-operator #panel .section-targets {
  top: var(--hud-top);
  height: var(--hud-free);
}

/* Шапка и плашки прозрачнее: карта просвечивает, но текст читается */
body.hud-operator #header {
  background: linear-gradient(180deg, rgba(9, 12, 18, 0.72), rgba(7, 10, 16, 0.62));
  backdrop-filter: blur(12px) saturate(125%);
}

body.hud-operator #panel .section {
  background: rgba(7, 10, 16, 0.62);
  backdrop-filter: blur(12px) saturate(125%);
}

@media (max-width: 760px) {
  body.hud-operator #panel .section-targets {
    top: calc(var(--hud-top) + var(--hud-map-h) + var(--hud-gap));
    height: var(--hud-rest);
  }
}

@media (max-height: 560px) and (max-width: 1100px) {
  body.hud-operator #panel .section-targets {
    top: var(--hud-top);
    height: var(--hud-free);
  }
}

/* Контрольные точки: постоянная подпись убрана, подробности — по наведению */
.cp-marker .cp-label {
  display: none;
}

/* ============================================================================
   Оформление маркеров узлов: свечение и пульсация в цвете состояния.
   Пульсация — на псевдоэлементе (opacity + scale у ::after): transform самого
   маркера трогать нельзя, на нём maplibre держит позицию.
   ========================================================================== */

.tower-marker-wrap {
  /* Обязательно absolute, как в maplibre: этот элемент — маркер карты, у него
     позиция задаётся inline-трансформом. С relative он попадает в обычный поток
     контейнера карты, и каждый следующий маркер съезжает вниз на свою высоту —
     значок узла уезжал от начала луча. */
  position: absolute;
  top: 0;
  left: 0;
}

.tower-marker-wrap::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

.tower-online::after {
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.55), 0 0 18px 4px rgba(34, 197, 94, 0.35);
  animation: nevod-tower-pulse 2.6s ease-out infinite;
}

.tower-degraded::after {
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.6), 0 0 18px 4px rgba(245, 158, 11, 0.35);
  animation: nevod-tower-pulse 2.2s ease-out infinite;
}

.tower-offline::after {
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.6), 0 0 18px 4px rgba(239, 68, 68, 0.3);
  animation: nevod-tower-pulse 1.9s ease-out infinite;
}

@keyframes nevod-tower-pulse {
  0% { opacity: 0.85; transform: scale(0.72); }
  70% { opacity: 0; transform: scale(1.25); }
  100% { opacity: 0; transform: scale(1.25); }
}

/* Контрольные точки: лёгкое свечение маркера */
.cp-marker .cp-dot {
  animation: nevod-cp-glow 3.4s ease-in-out infinite;
}

@keyframes nevod-cp-glow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16), 0 6px 14px rgba(0, 0, 0, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(34, 211, 238, 0.10), 0 6px 18px rgba(0, 0, 0, 0.5); }
}

/* ============================================================================
   Инструменты на карте: панель кнопок, капсула координат, линейка, слои.
   Всё позиционируется внутри контейнера карты — значит, всегда в её видимой
   части (на телефоне карта занимает верх экрана, на десктопе весь экран).
   ========================================================================== */

.nevod-toolbar {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nevod-tool-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(6, 10, 17, 0.78);
  backdrop-filter: blur(10px);
  color: var(--dim-strong, #b7c4d6);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.nevod-tool-btn:hover {
  color: var(--text);
  border-color: rgba(148, 163, 184, 0.42);
}

.nevod-tool-btn.active {
  color: #67e8f9;
  border-color: rgba(103, 232, 249, 0.55);
  background: rgba(8, 47, 73, 0.72);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.25);
}

.nevod-tool-layers {
  position: absolute;
  right: 46px;
  bottom: 0;
  min-width: 176px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(6, 10, 17, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);
  color: var(--text);
  font-size: 11.5px;
}

.tool-layers-title {
  color: var(--dim, #8798ad);
  font-size: 10px;
  margin-bottom: 6px;
}

.tool-layer-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
  cursor: pointer;
}

.tool-layer-row input {
  accent-color: #22d3ee;
}

.nevod-tool-capsule {
  position: absolute;
  z-index: 5;
  display: none;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(103, 232, 249, 0.4);
  background: rgba(3, 9, 18, 0.9);
  color: #a5f3fc;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: auto;
  cursor: copy;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

.nevod-tool-capsule.copied {
  border-color: rgba(74, 222, 128, 0.6);
  color: #bbf7d0;
}

.nevod-tool-capsule--ruler {
  border-color: rgba(251, 191, 36, 0.45);
  color: #fde68a;
  cursor: default;
}

.nevod-tool-capsule .tool-note {
  color: var(--dim-strong, #9fb0c7);
  font-weight: 500;
  margin-left: 6px;
}

/* Скрытые контрольные точки (тумблер в слоях) */
body.hide-control-points .cp-marker {
  display: none !important;
}

/* Телефон: событий ровно три строки (статичный предел в дополнение к замеру),
   а плашку «локальная подложка» убираем — её роль показывают кнопки карты */
@media (max-width: 760px) {
  #panel .section-events #alert-stream > :nth-child(n + 4) {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .offline-chip {
    display: none !important;
  }
}

/* ============================================================================
   Правки по замечаниям: тонкий луч, современные иконки узла и цели,
   шапка без фона, компас в стиле кнопок, кликабельные контрольные точки.
   ========================================================================== */

/* Контрольные точки: карточка по наведению работает, значит точка должна
   ловить курсор (раньше у всего маркера стоял pointer-events: none) */
.cp-marker .cp-dot {
  pointer-events: auto;
  cursor: pointer;
}

/* Шапка без фона: остаётся только содержимое поверх карты.
   Раньше правило висело на body.hud-operator — на инженерной странице в дневной
   теме оставалась светлая полоса, поэтому теперь шапка прозрачна в обеих темах
   и на обеих страницах (селектор с :root[data-theme] перебивает тему по порядку). */
#header,
body.hud-operator #header,
:root[data-theme="light"] #header,
:root[data-theme="dark"] #header {
  background: none;
  border-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

body.hud-operator .logo {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}

/* Маркер узла: современный значок — скруглённый бейдж со «антенной», светится
   в цвете состояния. Встроенный SVG приложения прячем, рисуем свой через
   ::before, чтобы он переживал перерисовки маркера. */
.tower-marker-wrap svg {
  display: none !important;
}

.tower-marker-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background-color: rgba(9, 13, 20, 0.92);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8eef7' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21v-7'/><path d='M8.5 21h7'/><path d='M12 14a5 5 0 0 1 5-5'/><path d='M12 14a5 5 0 0 0-5-5'/><circle cx='12' cy='14' r='1.6' fill='%23e8eef7' stroke='none'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tower-online::before {
  border-color: rgba(34, 197, 94, 0.75);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.45), 0 6px 14px rgba(0, 0, 0, 0.45);
}

.tower-degraded::before {
  border-color: rgba(245, 158, 11, 0.8);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.45), 0 6px 14px rgba(0, 0, 0, 0.45);
}

.tower-offline::before {
  border-color: rgba(239, 68, 68, 0.8);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4), 0 6px 14px rgba(0, 0, 0, 0.45);
}

/* Маркер цели: тот же стиль бейджа, цвет — по классу цели */
.target-marker-el > svg {
  display: none !important;
}

.target-marker-el::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(12, 8, 8, 0.92);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fda4af' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l2.6 5.6 6.4.8-4.7 4.3 1.2 6.3L12 17l-5.5 3 1.2-6.3L3 9.4l6.4-.8z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.35), 0 6px 14px rgba(0, 0, 0, 0.45);
}

/* Компас — в стиле кнопок инструментов */
#nevod-compass-rose {
  width: 58px !important;
  height: 58px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  background: rgba(6, 10, 17, 0.72) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

#nevod-compass-rose > div {
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

#nevod-compass-rose span {
  color: #cbd5e1 !important;
  font-size: 11px !important;
}

/* Ряд служебных переключателей над кнопками инструментов */
.nevod-toolbar {
  align-items: flex-end;
}

.nevod-tool-util {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 2px;
  max-width: min(420px, 86vw);
}

.nevod-tool-util > * {
  height: 32px;
  min-height: 32px;
  padding: 0 9px;
  border-radius: 10px;
  font-size: 11px;
}

.nevod-tool-util > .theme-toggle {
  width: 32px;
  padding: 0;
}

/* ============================================================================
   Единый столбец кнопок: инструменты и служебные переключатели в одном стиле.
   ========================================================================== */

.nevod-toolbar {
  gap: 6px;
}

.nevod-tool-util {
  display: contents;   /* кнопки встают в тот же столбец, без отдельного ряда */
}

.nevod-toolbar > .nevod-tool-btn,
.nevod-toolbar > .hud-basemap-toggle,
.nevod-toolbar > .hud-audio-toggle,
.nevod-toolbar > .hud-targets-toggle,
.nevod-toolbar > .theme-toggle {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(6, 10, 17, 0.78);
  backdrop-filter: blur(10px);
  color: var(--dim-strong, #b7c4d6);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.nevod-toolbar > .hud-basemap-toggle.off,
.nevod-toolbar > .hud-targets-toggle.off {
  color: var(--dim-strong, #b7c4d6);
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(6, 10, 17, 0.78);
}

.nevod-toolbar > .hud-basemap-toggle:not(.off),
.nevod-toolbar > .hud-targets-toggle:not(.off) {
  color: #67e8f9;
  border-color: rgba(103, 232, 249, 0.55);
  background: rgba(8, 47, 73, 0.72);
}

.nevod-toolbar > .hud-basemap-toggle.warn {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.55);
}

/* Разделитель между инструментами и служебными кнопками */
.nevod-toolbar > .hud-basemap-toggle {
  margin-top: 8px;
  position: relative;
}

.nevod-toolbar > .hud-basemap-toggle::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 4px;
  right: 4px;
  height: 1px;
  background: rgba(148, 163, 184, 0.28);
}

/* Компас — такая же кнопка, как остальные */
#nevod-compass-rose {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
}

#nevod-compass-rose span {
  font-size: 8px !important;
}

#nevod-compass-rose span:nth-child(3),
#nevod-compass-rose span:nth-child(4),
#nevod-compass-rose span:nth-child(5) {
  display: none !important;   /* оставляем только «N» и стрелку — чище в маленьком размере */
}

/* Плашки «Цели» и «События» прозрачнее */
body.hud-operator #panel .section {
  background: rgba(7, 10, 16, 0.42);
  backdrop-filter: blur(9px) saturate(120%);
}

/* Кнопки лежат внутри .nevod-tool-util (display: contents), поэтому вложенные
   селекторы, а не дочерние — иначе стиль не применялся к переключателям. */
.nevod-toolbar .nevod-tool-btn,
.nevod-toolbar .hud-basemap-toggle,
.nevod-toolbar .hud-audio-toggle,
.nevod-toolbar .hud-targets-toggle,
.nevod-toolbar .theme-toggle {
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 12px !important;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(6, 10, 17, 0.78);
  color: var(--dim-strong, #b7c4d6);
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.nevod-toolbar .hud-basemap-toggle:not(.off),
.nevod-toolbar .hud-targets-toggle:not(.off) {
  color: #67e8f9;
  border-color: rgba(103, 232, 249, 0.55);
  background: rgba(8, 47, 73, 0.72);
}

.nevod-toolbar .hud-basemap-toggle.warn {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.55);
}

.nevod-toolbar .nevod-tool-btn.active {
  color: #67e8f9;
  border-color: rgba(103, 232, 249, 0.55);
  background: rgba(8, 47, 73, 0.72);
}

.nevod-toolbar .hud-basemap-toggle {
  margin-top: 8px;
  position: relative;
}

.nevod-toolbar .hud-basemap-toggle::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 4px;
  right: 4px;
  height: 1px;
  background: rgba(148, 163, 184, 0.28);
}

/* Полоска-разделитель над кнопкой подложки убрана (оператор её не просил) */
.nevod-toolbar .hud-basemap-toggle::before {
  display: none !important;
}

/* Компас в общем столбце кнопок: снимаем его фиксированное позиционирование */
#nevod-compass-rose {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
  z-index: auto !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
}

/* Плашки «Цели» и «События» ещё прозрачнее */
body.hud-operator #panel .section {
  background: rgba(7, 10, 16, 0.28);
  backdrop-filter: blur(7px) saturate(115%);
}

/* ============================================================================
   Круглые значки узлов и больше живого движения.
   Все анимации — на псевдоэлементах: transform самого маркера трогать нельзя,
   на нём maplibre держит позицию.
   ========================================================================== */

.tower-marker-wrap::before {
  border-radius: 50%;
  background-size: 18px 18px;
  animation: nevod-node-breathe 3.2s ease-in-out infinite;
}

@keyframes nevod-node-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* Значок контрольной точки держит кольцо-эхо, значит ему нужен свой контекст */
.cp-marker .cp-dot {
  position: relative;
}

/* Отключённые (выключенные оператором) кнопки не светятся */
.nevod-toolbar .hud-basemap-toggle.off,
.nevod-toolbar .hud-targets-toggle.off {
  animation: none !important;
}

/* Контрольные точки: расходящееся кольцо вокруг значка */
.cp-marker .cp-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(34, 211, 238, 0.5);
  animation: nevod-cp-ring 2.8s ease-out infinite;
  pointer-events: none;
}

.cp-marker--2 .cp-dot::after { border-color: rgba(251, 191, 36, 0.55); }
.cp-marker--3 .cp-dot::after { border-color: rgba(167, 139, 250, 0.55); }
.cp-marker--4 .cp-dot::after { border-color: rgba(52, 211, 153, 0.55); }

@keyframes nevod-cp-ring {
  0% { opacity: 0.85; transform: scale(0.75); }
  70% { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* Цели: кольцо вокруг значка, цвет общий для засечённых целей */
.target-marker-el::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(244, 63, 94, 0.55);
  animation: nevod-cp-ring 2.2s ease-out infinite;
  pointer-events: none;
}

/* Кнопки: мягкий подъём при наведении и живое свечение у включённых.
   Свечение делаем через filter, а не box-shadow: box-shadow у кнопок занят
   состояниями (вкл/выкл/ошибка подложки), а filter свободен. */
.nevod-toolbar button,
.nevod-toolbar a,
.nevod-toolbar .nevod-tool-btn {
  transition: transform 0.15s ease, color 0.15s ease, border-color 0.15s ease,
              background 0.15s ease, filter 0.2s ease;
}

.nevod-toolbar button:hover,
.nevod-toolbar a:hover,
.nevod-toolbar .nevod-tool-btn:hover {
  transform: translateY(-1px);
  color: #e6edf7;
  border-color: rgba(148, 163, 184, 0.45);
}

.nevod-toolbar .nevod-tool-btn.active,
.nevod-toolbar .hud-targets-toggle:not(.off),
.nevod-toolbar .hud-basemap-toggle:not(.off) {
  animation: nevod-btn-glow 2.8s ease-in-out infinite;
}

@keyframes nevod-btn-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(34, 211, 238, 0)); }
  50%      { filter: drop-shadow(0 0 7px rgba(34, 211, 238, 0.55)); }
}

/* Карточка-подсказка появляется мягко */
#nevod-hover-card {
  animation: nevod-card-in 0.16s ease-out;
}

@keyframes nevod-card-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Стрелка курса цели: поворачиваем внутренний блок, а не сам маркер —
   у маркера inline-трансформ maplibre, и его перезапись сбивала позицию. */
.arrow-marker-el .arrow-rot {
  width: 10px;
  height: 10px;
  transform-origin: center;
}

/* Хвост трека длиннее (две минуты), поэтому линия трейла чуть тоньше —
   на длинном маршруте толстая лента перекрывает карту. */

/* Оценка высоты цели по углу места — отдельное поле в строке цели.
   Подпись «оценка» обязательна: угол места с вертикальной базы 17 см грубый. */
.t-alt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--dim-strong, #b7c4d6);
}

.t-alt-note {
  color: var(--dim, #8798ad);
  font-size: 9.5px;
  letter-spacing: 0.02em;
}

/* Кнопка самописца полёта: идёт запись — красная пульсация, команда в пути —
   приглушённая кнопка. Размер и форму берёт из общего стиля инструментов. */
.nevod-toolbar .nevod-recorder-btn.pending {
  opacity: 0.55;
  pointer-events: none;
}

.nevod-toolbar .nevod-recorder-btn.recording {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(69, 10, 10, 0.55);
  animation: nevod-btn-glow 2.4s ease-in-out infinite;
}

.nevod-toolbar .nevod-recorder-btn.recording .rec-dot {
  animation: nevod-rec-pulse 1.6s ease-in-out infinite;
}

@keyframes nevod-rec-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Телефон: кнопок в столбце стало десять (компас, инструменты, самописец), и в
   высоту карты столбец больше не влезает — верхние кнопки уезжали за экран.
   Ужимаем кнопки и разрешаем столбцу разложиться во второй ряд. */
@media (max-width: 760px) {
  .nevod-toolbar {
    right: 8px;
    bottom: 8px;
    gap: 5px;
    max-width: 78px;
    max-height: calc(100% - 16px);
    flex-wrap: wrap-reverse;
    justify-content: flex-end;
    align-content: flex-start;
  }

  /* Служебные переключатели заданы более точными селекторами с !important,
     поэтому перечисляем их и здесь — иначе в столбце остаются две разные ширины. */
  .nevod-toolbar .nevod-tool-btn,
  .nevod-toolbar .hud-basemap-toggle,
  .nevod-toolbar .hud-audio-toggle,
  .nevod-toolbar .hud-targets-toggle,
  .nevod-toolbar .theme-toggle,
  .nevod-toolbar #theme-toggle,
  .nevod-toolbar button,
  .nevod-toolbar a,
  #nevod-compass-rose {
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 10px !important;
  }

  .nevod-toolbar .hud-basemap-toggle {
    margin-top: 0;
  }
}