/*
  BATTLEMAP — дизайн-система прототипа интерфейса, v0.1 (2026-09-10).
  Единственный источник цветов и размеров: всё, что ниже блока :root, берёт значения только через var(--…).
  Литералы цвета (#…, rgba) и размера (px) живут только в :root. Исключение, которое CSS не позволяет
  убрать, — границы медиазапросов (var() в @media не работает); они записаны в em и перечислены в конце :root.
  Правила применения — docs/DESIGN.md. Карта — Leaflet + тайлы OpenStreetMap (D-003).
*/
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Condensed:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

:root {
  /* ── Поверхности и текст: тёмная тактическая тема ── */
  --c-bg: #0A0E11;
  --c-surface-1: #11171B;
  --c-surface-2: #182025;
  --c-surface-3: #212B32;
  --c-overlay: rgba(10, 14, 17, 0.86);
  --c-line: #2A363F;
  --c-line-strong: #3D4C57;
  --c-text: #DCE4E8;
  --c-text-2: #9AAAB4;
  --c-text-3: #67777F;

  /* ── Акцент интерфейса: действие и решение ИИ. Применяется точечно: кнопка, решение к подтверждению, фокус выбора ── */
  --c-accent: #A493FF;
  --c-accent-strong: #C4B9FF;
  --c-accent-bg: rgba(164, 147, 255, 0.14);
  --c-on-accent: #0A0E11;
  --c-link: #C4B9FF;
  --c-focus: #FFFFFF;

  /* ── Принадлежность (по APP-6 / ATAK): форма знака говорит «кто», цвет дублирует ── */
  --c-friend: #5CC8FF;
  --c-friend-fill: rgba(92, 200, 255, 0.20);
  --c-hostile: #FF5A5F;
  --c-hostile-fill: rgba(255, 90, 95, 0.20);
  --c-task: #F2F5F7;
  --c-route: #8EE8FF;
  --c-route-old: #9AAAB4;

  /* ── Уровни риска зоны: SAFE → CRITICAL и UNKNOWN (нет данных — штриховка, а не цвет уровня) ── */
  --risk-safe: #3DBE7A;
  --risk-low: #A3C940;
  --risk-medium: #E9C23D;
  --risk-high: #F0853A;
  --risk-critical: #E5484D;
  --risk-unknown: #8C93A8;

  /* ── Связь ── */
  --link-ok: #3DBE7A;
  --link-lost: #F0A23A;

  /* ── Служебное прототипа: светлая полоса сценария и заглушки — чтобы их нельзя было спутать с продуктом ── */
  --c-proto-bg: #E6EAED;
  --c-proto-text: #0A0E11;
  --c-proto-text-2: #45525B;
  --c-proto-line: #B9C2C8;
  --c-stub: #8797A1;
  --c-stub-hatch: rgba(135, 151, 161, 0.10);

  /* ── Карта ── */
  --map-bg: #0E1316;
  --map-halo: #05080A;
  --map-filter: invert(1) hue-rotate(180deg) brightness(0.84) contrast(0.92) saturate(0.55);
  --text-halo: 0 0 2px #05080A, 0 0 3px #05080A, 0 0 5px #05080A;

  /* ── Прозрачности ── */
  --o-disabled: 0.45;
  --o-zone-safe: 0.12;
  --o-zone-low: 0.16;
  --o-zone-medium: 0.20;
  --o-zone-high: 0.26;
  --o-zone-critical: 0.34;
  --o-zone-line: 0.9;
  --o-sector: 0.14;
  --o-accuracy: 0.10;

  /* ── Типографика: реальные веса IBM Plex (кириллица есть), табличные цифры везде ── */
  --font-sans: "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --font-cond: "IBM Plex Sans Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
  --fs-2xs: 0.6875rem;   /* 11 — подписи на карте, служебные метки */
  --fs-xs: 0.75rem;      /* 12 */
  --fs-sm: 0.8125rem;    /* 13 */
  --fs-md: 0.875rem;     /* 14 — основной текст инструмента */
  --fs-lg: 1rem;         /* 16 — основной текст телефона */
  --fs-xl: 1.25rem;      /* 20 */
  --fs-2xl: 1.75rem;     /* 28 */
  --fs-map-label: 0.75rem;
  --lh-tight: 1.2;
  --lh: 1.45;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --ls-caps: 0.06em;
  --ls-brand: 0.14em;

  /* ── Отступы: шаг 4 ── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* ── Линии и радиусы: строго, почти без скруглений ── */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-focus: 2px;
  --focus-offset: 2px;
  --r-1: 2px;
  --r-2: 4px;
  --r-phone: 28px;
  --dot: 8px;

  /* ── Сетка и размеры ── */
  --bar-h: 3rem;
  --scen-min-h: 2.75rem;
  --panel-w: 24rem;
  --panel-w-compact: 21rem;
  --content-max: 82rem;
  --lead-w: 48rem;        /* вводный абзац страницы-документа */
  --rules-w: 60rem;       /* список правил на листе знаков */
  --grid-2-min: 30rem;    /* минимальная ширина колонки сетки в две */
  --grid-4-min: 17rem;    /* минимальная ширина колонки сетки в четыре */
  --scen-text-basis: 24rem; /* текст шага в служебной полосе */
  --underline-offset: 0.2em;
  --underline-offset-ex: 0.25em; /* пунктир «пример» — ниже обычной ссылки */
  --control-h: 2.25rem;
  --tap-min: 2.75rem;     /* 44 — минимальная область касания на телефоне */
  --tag-h: 1.25rem;
  --step-n-w: 2.75rem;
  --legend-min: 20rem;
  --map-min-h: 20rem;
  --map-sheet-h: 34rem;
  --map-sheet-h-phone: 26rem;
  --phone-w: 390px;
  --phone-h: 844px;
  --swatch: 2.5rem;

  /* ── Условные знаки (единицы viewBox 0 0 40 40, кроме размеров на экране) ── */
  --sign-sheet: 4rem;     /* крупно — лист знаков */
  --sign-map: 28px;       /* в масштабе карты */
  --sign-stroke: 2.5;
  --sign-halo: 6;
  --sign-glyph-fs: 17px;
  --sign-badge-fs: 9px;
  --dash-mid: 5 3;
  --dash-low: 1.5 3.5;
  --route-w: 4px;
  --route-halo-w: 8px;
  --route-old-w: 2px;
  --zone-stroke: 1.5px;
  --zone-stroke-strong: 2.5px;
  --sector-stroke: 1px;
  --accuracy-stroke: 1px;
  --hatch-size: 8px;
  --hatch-line: 2px;

  /* ── Экран с картой: плавающие элементы ── */
  --decision-w: 34rem;
  --layers-w: 11.5rem;
  --video-w: 21rem;
  --detect-size: 3.5rem;
  --row-icon: 1.75rem;
  --seg-h: 1.75rem;
  --check: 1rem;
  --area-stroke: 2px;
  --o-plan: 0.10;
  --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.55);
  --sign-self: 36px;      /* своё положение на терминале бойца — крупнее знаков отделения */
  --compass: 3.5rem;
  --tap-big: 4.5rem;      /* выбор класса контакта на телефоне */

  /* ── Место оператора (Э-4) ── */
  --telemetry-w: 12rem;
  --telemetry-w-tablet: 9.5rem;
  --panel-w-tablet: 20rem;
  --bw-ctl: 3px;          /* рамка кадра: кто ведёт аппарат */
  --bw-ctl-strong: 5px;   /* ведёте вы — рамка толще */
  --cross: 2.5rem;
  --cam-filter: grayscale(1) contrast(1.35) brightness(0.85);
  --cam-scan: rgba(255, 255, 255, 0.05);
  --cam-vignette: rgba(0, 0, 0, 0.6);
  --tablet-w: 1024px;
  --tablet-h: 768px;
  --term-list-w: 24rem;  /* терминал подразделения на планшете: колонка задач и парка */

  /* ── Администрирование (Э-3) ── */
  --rail-w: 15rem;
  --page-w: 46rem;

  /* ── Центр управления группировкой (Э-1 первого этапа) ── */
  --c-unknown: #E9C23D;   /* «обнаружен, не привязан»: неизвестная принадлежность по APP-6 — жёлтый */
  --sign-code-fs: 12px;   /* сокращение класса внутри знака, единицы viewBox */
  --ring-w: 3;            /* кольцо хода подготовки или задания вокруг знака */
  --pending-w: 2;         /* кольцо команды, ждущей подтверждения */
  --attn-w: 1.5;          /* кольцо «требует внимания» — непрочитанное уведомление об аппарате */
  --slash-w: 3;           /* «Неисправен» — знак перечёркнут (APP-6: повреждён) */
  --mark-w: 1.5;          /* значок состояния в углу знака */
  --o-ring-track: 0.28;
  --o-base: 0.07;
  --base-cell: 50px;      /* шаг сетки аппаратов на базе — в пикселях экрана, не в метрах: не расползается при масштабе */
  --base-row: 44px;
  --base-cell-far: 32px;  /* мелкий масштаб: без подписей-кодов, плотнее */
  --base-row-far: 32px;
  --filters-w: 14rem;
  --prog-h: 0.375rem;
  --pct: 1%;             /* ход в процентах: ширина полосы = --p × --pct */
  --legend-float-w: 20rem;
  --list-max-h: 22rem;

  /* ── Слои ── */
  --z-map-ui: 900;
  --z-float: 1050;   /* выше элементов управления Leaflet (1000) */
  --z-bar: 1100;

  /* ── Движение ── */
  --t-fast: 120ms;

  /* Границы медиазапросов (литералы, var() в @media не работает):
     87.5em = 1400px — боковая панель командирских экранов сужается;
     68.75em = 1100px — место оператора переходит в вариант «планшет»: панель и телеметрия уже, кнопки под палец;
     48em   = 768px  — служебная полоса прототипа сворачивается;
     30em   = 480px  — рамка телефона исчезает, экран бойца на весь экран. */
}

/* ───────────── База ───────────── */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--c-link); text-underline-offset: var(--underline-offset); }
:focus-visible { outline: var(--bw-focus) solid var(--c-focus); outline-offset: var(--focus-offset); }
h1, h2, h3 { margin: 0; line-height: var(--lh-tight); font-weight: var(--fw-semibold); }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0; }
.mono, code { font-family: var(--font-mono); }
.muted { color: var(--c-text-2); }
.faint { color: var(--c-text-3); }
.caps {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-text-2);
}
.sr-only {
  position: absolute; width: var(--bw-1); height: var(--bw-1);
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ───────────── Верхняя полоса продукта ───────────── */
.bar {
  position: relative;
  z-index: var(--z-bar);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--bar-h);
  padding: 0 var(--sp-4);
  background: var(--c-surface-1);
  border-bottom: var(--bw-1) solid var(--c-line);
}
.bar__brand {
  font-family: var(--font-cond);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-brand);
  color: var(--c-text);
  text-decoration: none;
}
.bar__sep { align-self: stretch; width: var(--bw-1); margin: var(--sp-3) 0; background: var(--c-line); }
.bar__title { font-weight: var(--fw-medium); }
.bar__meta { color: var(--c-text-2); font-size: var(--fs-sm); }
.bar__spacer { flex: 1; }

/* ───────────── Служебная полоса прототипа (не часть продукта) ───────────── */
.scen {
  position: relative;
  z-index: var(--z-bar);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  min-height: var(--scen-min-h);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-proto-bg);
  color: var(--c-proto-text);
  border-bottom: var(--bw-1) solid var(--c-proto-line);
}
.scen__id { font-family: var(--font-mono); font-weight: var(--fw-semibold); }
.scen__who { color: var(--c-proto-text-2); }
.scen__text { flex: 1 1 var(--scen-text-basis); }
.scen__nav { display: flex; gap: var(--sp-2); }
.scen a { color: var(--c-proto-text); }
.scen .btn { background: transparent; color: var(--c-proto-text); border-color: var(--c-proto-line); }
.scen .btn:hover { border-color: var(--c-proto-text-2); background: transparent; }
.scen :focus-visible { outline-color: var(--c-proto-text); }

/* ───────────── Кнопки: Default · Hover · Focus · Active · Disabled · Loading ───────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--control-h);
  padding: 0 var(--sp-4);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--r-2);
  background: var(--c-surface-2);
  color: var(--c-text);
  font: inherit;
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.btn:hover { background: var(--c-surface-3); border-color: var(--c-text-3); }
.btn:active { background: var(--c-line); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: var(--o-disabled); cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.btn--primary:hover { background: var(--c-accent-strong); border-color: var(--c-accent-strong); }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--touch { min-height: var(--tap-min); min-width: var(--tap-min); }

/* ───────────── Метки ───────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--tag-h);
  padding: 0 var(--sp-2);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--r-1);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-text-2);
  white-space: nowrap;
}
.tag--screen { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; color: var(--c-text); }
.tag--virtual { border-style: dashed; color: var(--c-friend); border-color: var(--c-friend); }
.tag--stub { border-style: dashed; color: var(--c-stub); border-color: var(--c-stub); }
.tag--proto { color: var(--c-proto-text-2); border-color: var(--c-proto-line); }

/* Уровень риска: цвет + текст уровня, никогда только цвет */
.risk { --risk: var(--risk-unknown); color: var(--risk); border-color: var(--risk); }
.risk--safe { --risk: var(--risk-safe); }
.risk--low { --risk: var(--risk-low); }
.risk--medium { --risk: var(--risk-medium); }
.risk--high { --risk: var(--risk-high); }
.risk--critical { --risk: var(--risk-critical); }
.risk--unknown { --risk: var(--risk-unknown); border-style: dashed; }

/* Связь: форма точки (сплошная / пустая) + цвет + текст */
.linkstate { display: inline-flex; align-items: center; gap: var(--sp-2); }
.linkstate::before {
  content: "";
  width: var(--dot); height: var(--dot);
  border-radius: 50%;
  background: var(--link-ok);
  border: var(--bw-2) solid var(--link-ok);
}
.linkstate--lost { color: var(--link-lost); }
.linkstate--lost::before { background: transparent; border-color: var(--link-lost); }

/* ───────────── Честная заглушка ───────────── */
.stub {
  padding: var(--sp-3) var(--sp-4);
  border: var(--bw-1) dashed var(--c-stub);
  border-radius: var(--r-2);
  color: var(--c-text-2);
  background: repeating-linear-gradient(135deg, var(--c-stub-hatch) 0 var(--hatch-size), transparent var(--hatch-size) calc(var(--hatch-size) * 2));
}
.stub__label {
  display: block;
  margin-bottom: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-stub);
}
.stub ul { margin: 0; padding-left: var(--sp-4); }
.stub li + li { margin-top: var(--sp-1); }

/* ───────────── Карточки, списки ───────────── */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--c-surface-1);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--r-2);
}
.card--link { color: inherit; text-decoration: none; transition: border-color var(--t-fast); }
.card--link:hover { border-color: var(--c-line-strong); }
.card__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); margin: 0; }
.kv dt { color: var(--c-text-2); }
.kv dd { margin: 0; }

/* ───────────── Страница-документ (index, лист знаков) ───────────── */
.page { max-width: var(--content-max); margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-7); }
.page > section + section { margin-top: var(--sp-7); }
.page__lead { max-width: var(--lead-w); margin-top: var(--sp-3); color: var(--c-text-2); font-size: var(--fs-lg); }
.section-head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-2-min)), 1fr)); gap: var(--sp-5); }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-4-min)), 1fr)); gap: var(--sp-3); }

/* Проход по сценарию: последовательность шагов */
.steps { list-style: none; margin: 0; padding: 0; }
.step {
  display: grid;
  grid-template-columns: var(--step-n-w) 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: var(--bw-1) solid var(--c-line);
}
.step__n {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-text-2);
}
.step__body { display: flex; flex-direction: column; gap: var(--sp-1); }
.step__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.step__who { font-weight: var(--fw-semibold); }
.step__go { justify-self: start; margin-top: var(--sp-1); }

/* Образцы токенов */
.swatches { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.swatch { display: flex; align-items: center; gap: var(--sp-2); }
.swatch__chip {
  width: var(--swatch); height: var(--swatch);
  border-radius: var(--r-1);
  border: var(--bw-2) solid var(--risk);
  background: color-mix(in srgb, var(--risk) 30%, transparent);
}
.swatch__chip--unknown {
  border-style: dashed;
  background: repeating-linear-gradient(45deg, var(--risk) 0 var(--hatch-line), transparent var(--hatch-line) var(--hatch-size));
}

/* ───────────── Оболочка экрана ───────────── */
.shell { display: grid; grid-template-rows: auto auto 1fr; height: 100vh; height: 100dvh; }
.shell__main { display: grid; grid-template-columns: 1fr var(--panel-w); min-height: 0; }
.shell__main--solo { grid-template-columns: 1fr; }
.panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 0;
  overflow: auto;
  padding: var(--sp-4);
  background: var(--c-surface-1);
  border-left: var(--bw-1) solid var(--c-line);
}

/* Телефон бойца: рамка 390×844 на компьютере, весь экран на телефоне */
.phone-stage { display: grid; place-items: center; min-height: 0; overflow: auto; padding: var(--sp-5); }
.phone {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: var(--phone-w);
  height: var(--phone-h);
  max-width: 100%;
  overflow: hidden;
  background: var(--c-bg);
  border: var(--bw-2) solid var(--c-line-strong);
  border-radius: var(--r-phone);
  font-size: var(--fs-lg);
}
.phone__top, .phone__bottom { padding: var(--sp-3) var(--sp-4); background: var(--c-surface-1); }
.phone__top { border-bottom: var(--bw-1) solid var(--c-line); }
.phone__bottom { border-top: var(--bw-1) solid var(--c-line); }
.phone .map { min-height: 0; }

/* ───────────── Карта ───────────── */
.map { position: relative; min-height: var(--map-min-h); background: var(--map-bg); }
.map--sheet { height: var(--map-sheet-h); border: var(--bw-1) solid var(--c-line); border-radius: var(--r-2); overflow: hidden; }
.map.leaflet-container { background: var(--map-bg); font-family: var(--font-sans); font-size: var(--fs-xs); }
.map .leaflet-tile-pane { filter: var(--map-filter); }
.map--raw .leaflet-tile-pane { filter: none; }
.map .leaflet-control-attribution {
  background: var(--c-overlay);
  color: var(--c-text-2);
  font-size: var(--fs-2xs);
  padding: var(--sp-1) var(--sp-2);
}
.map .leaflet-control-attribution a { color: var(--c-text); }
.map .leaflet-control-scale-line {
  background: var(--c-overlay);
  border-color: var(--c-text-2);
  color: var(--c-text);
  font-size: var(--fs-2xs);
}
.map .leaflet-bar { border: var(--bw-1) solid var(--c-line-strong); box-shadow: none; }
.map .leaflet-bar a { background: var(--c-surface-2); color: var(--c-text); border-bottom-color: var(--c-line); }
.map .leaflet-bar a:hover { background: var(--c-surface-3); }
.map__msg {
  position: absolute;
  inset: var(--sp-5);
  z-index: var(--z-map-ui);
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--c-overlay);
}
.map__area {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: var(--z-map-ui);
  padding: var(--sp-1) var(--sp-2);
  background: var(--c-overlay);
  border-radius: var(--r-1);
  font-size: var(--fs-2xs);
  color: var(--c-text-2);
}
.map__tools { position: absolute; left: var(--sp-3); bottom: var(--sp-6); z-index: var(--z-map-ui); display: flex; gap: var(--sp-2); }

/* Знаки на карте */
.map-sign-icon { background: none; border: 0; }
.map-sign { position: relative; width: 100%; height: 100%; }
.map-sign .sign { display: block; width: 100%; height: 100%; }
.map-sign__label {
  position: absolute;
  left: calc(100% + var(--sp-1));
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--font-cond);
  font-size: var(--fs-map-label);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--c-text);
  text-shadow: var(--text-halo);
  pointer-events: none;
}
.map-sign__label small { display: block; font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--c-text-2); }
.map-sign__label--hostile { color: var(--c-hostile); }
.map-sign__label--lost { color: var(--link-lost); }

/* Пути Leaflet: CSS перекрывает атрибуты, поэтому геометрия в JS, вид — только здесь */
.map path.zone {
  --z-c: var(--risk-unknown);
  stroke: var(--z-c);
  fill: var(--z-c);
  fill-opacity: var(--o-zone-medium);
  stroke-width: var(--zone-stroke);
  stroke-opacity: var(--o-zone-line);
}
.map path.zone--safe { --z-c: var(--risk-safe); fill-opacity: var(--o-zone-safe); }
.map path.zone--low { --z-c: var(--risk-low); fill-opacity: var(--o-zone-low); }
.map path.zone--medium { --z-c: var(--risk-medium); fill-opacity: var(--o-zone-medium); }
.map path.zone--high { --z-c: var(--risk-high); fill-opacity: var(--o-zone-high); }
.map path.zone--critical { --z-c: var(--risk-critical); fill-opacity: var(--o-zone-critical); stroke-width: var(--zone-stroke-strong); }
.map path.zone--unknown { fill: url(#bm-hatch-unknown); fill-opacity: 1; stroke-dasharray: var(--dash-mid); }
.map path.route-halo { fill: none; stroke: var(--map-halo); stroke-width: var(--route-halo-w); stroke-opacity: 1; stroke-linecap: round; stroke-linejoin: round; }
.map path.route { fill: none; stroke: var(--c-route); stroke-width: var(--route-w); stroke-opacity: 1; stroke-linecap: round; stroke-linejoin: round; }
.map path.route--old { stroke: var(--c-route-old); stroke-width: var(--route-old-w); stroke-dasharray: var(--dash-low); }
.map path.sector { fill: var(--c-friend); fill-opacity: var(--o-sector); stroke: var(--c-friend); stroke-width: var(--sector-stroke); stroke-opacity: 1; stroke-dasharray: var(--dash-mid); }
.map path.accuracy { fill: var(--c-hostile); fill-opacity: var(--o-accuracy); stroke: var(--c-hostile); stroke-width: var(--accuracy-stroke); stroke-opacity: 1; stroke-dasharray: var(--dash-low); }
.hatch-bg { fill: var(--risk-unknown); fill-opacity: var(--o-zone-safe); }
.hatch-line { stroke: var(--risk-unknown); stroke-width: var(--hatch-line); stroke-opacity: var(--o-zone-line); }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.map .leaflet-tooltip.zone-label {
  --z-c: var(--risk-unknown);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--z-c);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-shadow: var(--text-halo);
}
.map .leaflet-tooltip.zone-label::before { display: none; }
.map .leaflet-tooltip.zone-label--critical { --z-c: var(--risk-critical); }
.map .leaflet-tooltip.zone-label--safe { --z-c: var(--risk-safe); }
.map .leaflet-tooltip.zone-label--low { --z-c: var(--risk-low); }
.map .leaflet-tooltip.zone-label--medium { --z-c: var(--risk-medium); }
.map .leaflet-tooltip.zone-label--high { --z-c: var(--risk-high); }

/* ───────────── Условные знаки (SVG, viewBox 0 0 40 40) ───────────── */
.sign {
  --sign-c: var(--c-text);
  --sign-f: transparent;
  width: var(--sign-map);
  height: var(--sign-map);
  overflow: visible;
  flex: none;
}
.sign--friend { --sign-c: var(--c-friend); --sign-f: var(--c-friend-fill); }
.sign--hostile { --sign-c: var(--c-hostile); --sign-f: var(--c-hostile-fill); }
.sign--task { --sign-c: var(--c-task); --sign-f: transparent; }
.sign.is-lost { --sign-c: var(--link-lost); --sign-f: transparent; }
.sign .s-halo { fill: none; stroke: var(--map-halo); stroke-width: var(--sign-halo); stroke-linejoin: round; stroke-linecap: round; }
.sign .s-frame { fill: var(--sign-f); stroke: var(--sign-c); stroke-width: var(--sign-stroke); stroke-linejoin: round; }
.sign .s-glyph { fill: none; stroke: var(--sign-c); stroke-width: var(--sign-stroke); stroke-linecap: round; stroke-linejoin: round; }
.sign .s-solid { fill: var(--sign-c); stroke: none; }
.sign .s-text {
  fill: var(--sign-c);
  font-family: var(--font-mono);
  font-size: var(--sign-glyph-fs);
  font-weight: var(--fw-semibold);
  text-anchor: middle;
  dominant-baseline: central;
}
.sign .s-badge { fill: var(--c-bg); stroke: var(--sign-c); stroke-width: var(--sign-stroke); }
.sign .s-badge-text {
  fill: var(--sign-c);
  font-family: var(--font-sans);
  font-size: var(--sign-badge-fs);
  font-weight: var(--fw-semibold);
  text-anchor: middle;
  dominant-baseline: central;
}
.sign--conf-mid .s-frame { stroke-dasharray: var(--dash-mid); }
.sign--conf-low .s-frame { stroke-dasharray: var(--dash-low); }
.sign.is-lost .s-frame { stroke-dasharray: var(--dash-mid); }

/* Лист знаков */
.legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--legend-min)), 1fr)); gap: var(--sp-3); }
.legend__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-4);
  background: var(--c-surface-1);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--r-2);
}
.legend__art { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.legend__art .sign--big { width: var(--sign-sheet); height: var(--sign-sheet); }
.legend__small {
  display: grid;
  place-items: center;
  width: var(--sign-sheet);
  padding: var(--sp-2) 0;
  background: var(--map-bg);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--r-1);
}
.legend__text { display: flex; flex-direction: column; gap: var(--sp-1); }
.legend__name { font-weight: var(--fw-semibold); }
.legend__note { color: var(--c-text-2); font-size: var(--fs-sm); }
.legend__sample { font-family: var(--font-cond); font-size: var(--fs-map-label); color: var(--c-text); }
.rules { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); max-width: var(--rules-w); }
.line-sample { width: var(--sign-sheet); height: var(--swatch); }
.line-sample .ln { fill: none; stroke-linecap: round; }
.line-sample .ln--halo { stroke: var(--map-halo); stroke-width: var(--route-halo-w); }
.line-sample .ln--route { stroke: var(--c-route); stroke-width: var(--route-w); }
.line-sample .ln--old { stroke: var(--c-route-old); stroke-width: var(--route-old-w); stroke-dasharray: var(--dash-low); }
.line-sample .ln--sector { fill: var(--c-friend); fill-opacity: var(--o-sector); stroke: var(--c-friend); stroke-width: var(--sector-stroke); stroke-dasharray: var(--dash-mid); }
.line-sample .ln--acc { fill: var(--c-hostile); fill-opacity: var(--o-accuracy); stroke: var(--c-hostile); stroke-width: var(--accuracy-stroke); stroke-dasharray: var(--dash-low); }

/* ───────────── Экран с картой: плавающие элементы, панель обстановки (Э-1 и далее) ───────────── */
[hidden] { display: none !important; }
.map-wrap { position: relative; min-width: 0; min-height: 0; }
.map-wrap > .map { position: absolute; inset: 0; min-height: 0; }
.map.is-drawing, .map.is-drawing .leaflet-grab, .map.is-drawing .leaflet-interactive { cursor: crosshair; }
.float {
  position: absolute;
  z-index: var(--z-float);
  background: var(--c-overlay);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-float);
}
input[type="checkbox"], input[type="radio"] { width: var(--check); height: var(--check); margin: 0; accent-color: var(--c-accent); }

/* Слои карты */
.layers { top: var(--sp-3); left: var(--sp-3); width: var(--layers-w); margin: 0; min-inline-size: 0; padding: var(--sp-1) var(--sp-3) var(--sp-2); }
.layers legend { padding: 0 var(--sp-1); }
.layers label { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--seg-h); font-size: var(--fs-sm); cursor: pointer; }

/* Переключатель в полосе продукта: выбранное — рамка + фон + цвет */
.seg { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1); background: var(--c-bg); border: var(--bw-1) solid var(--c-line); border-radius: var(--r-2); }
.seg__label { padding: 0 var(--sp-2); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-text-2); }
.seg button {
  min-height: var(--seg-h);
  padding: 0 var(--sp-3);
  border: var(--bw-1) solid transparent;
  border-radius: var(--r-1);
  background: transparent;
  color: var(--c-text-2);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.seg button:hover { color: var(--c-text); background: var(--c-surface-2); }
.seg button[aria-pressed="true"] { color: var(--c-accent-strong); background: var(--c-accent-bg); border-color: var(--c-accent); }
.bar__clock { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--c-text-2); }

/* Решение ИИ к подтверждению — центральный элемент картины командира */
.decision {
  top: var(--sp-3);
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--decision-w), calc(100% - 2 * var(--layers-w) - 4 * var(--sp-3)));
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--c-surface-1);
  border: var(--bw-2) solid var(--c-accent);
}
.decision--notice { border-color: var(--c-line-strong); }
.decision__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.decision__mode { font-size: var(--fs-xs); color: var(--c-text-2); }
.decision__title { font-size: var(--fs-lg); }
.decision__basis { font-size: var(--fs-sm); color: var(--c-text-2); }
.decision__note { font-size: var(--fs-xs); color: var(--c-stub); }
.tag--ai { color: var(--c-accent-strong); border-color: var(--c-accent); }

/* Видео с аппарата — появляется при визуальном контакте */
.video-win { right: var(--sp-3); bottom: var(--sp-6); width: var(--video-w); overflow: hidden; background: var(--c-surface-1); }
.video-win__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3); border-bottom: var(--bw-1) solid var(--c-line); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.video-win__body { position: relative; aspect-ratio: 16 / 9; background: var(--map-bg); }
.video-win__body > .map { position: absolute; inset: 0; min-height: 0; }
.video-win__body > .stub { position: absolute; inset: var(--sp-3); display: grid; align-content: center; }
.video-win__foot { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-2xs); color: var(--c-text-2); }
.detect {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: var(--z-float);
  width: var(--detect-size);
  height: var(--detect-size);
  transform: translate(-50%, -50%);
  border: var(--bw-2) solid var(--c-hostile);
  pointer-events: none;
}
.detect__label {
  position: absolute;
  left: calc(-1 * var(--bw-2));
  bottom: 100%;
  padding: 0 var(--sp-1);
  background: var(--c-hostile);
  color: var(--c-on-accent);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

/* Уведомление и подсказка поверх карты */
.toast { left: var(--sp-3); bottom: var(--sp-7); max-width: calc(100% - var(--video-w) - 3 * var(--sp-3)); padding: var(--sp-2) var(--sp-4); background: var(--c-surface-1); font-size: var(--fs-sm); }
.toast--top { top: var(--sp-3); bottom: auto; left: 50%; transform: translateX(-50%); max-width: var(--decision-w); border-color: var(--c-accent); }

/* Панель обстановки */
.sec { display: flex; flex-direction: column; gap: var(--sp-1); }
.sec + .sec { padding-top: var(--sp-3); border-top: var(--bw-1) solid var(--c-line); }
.sec__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: var(--seg-h); }
.tree-root { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-text-2); }
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.row {
  display: grid;
  grid-template-columns: var(--row-icon) 1fr;
  gap: var(--sp-3);
  align-items: start;
  width: 100%;
  padding: var(--sp-2);
  background: transparent;
  border: var(--bw-1) solid transparent;
  border-radius: var(--r-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.row:hover { background: var(--c-surface-2); }
.row[aria-current="true"] { background: var(--c-surface-2); border-color: var(--c-line-strong); }
.row .sign { width: var(--row-icon); height: var(--row-icon); }
.row--child { padding-left: var(--sp-4); }
.row__body { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.row__title { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-weight: var(--fw-medium); }
.row__meta { font-size: var(--fs-sm); color: var(--c-text-2); }
.row--lost .row__title { color: var(--link-lost); }
.empty-note { font-size: var(--fs-sm); color: var(--c-text-3); padding: var(--sp-1) var(--sp-2); }
.alert { padding: var(--sp-3); border: var(--bw-1) solid var(--link-lost); border-radius: var(--r-2); color: var(--link-lost); font-size: var(--fs-sm); }
.card--focus { border-color: var(--c-line-strong); }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.btn--sm { min-height: var(--seg-h); padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn--block { width: 100%; justify-content: space-between; }
.btn--icon { min-height: var(--seg-h); min-width: var(--seg-h); padding: 0; }
.attn-row { display: flex; align-items: center; gap: var(--sp-2); }
.attn-row .row { flex: 1; }
.form-steps { margin: 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.form-steps li > .actions { margin-top: var(--sp-2); }
.checks { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-1); }
.checks label { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; }

/* Пример значения: в ЭКРАНЫ.md его нет — пунктирное подчёркивание, подсказка при наведении */
.ex { text-decoration: underline dashed var(--c-stub); text-decoration-thickness: var(--bw-1); text-underline-offset: var(--underline-offset-ex); cursor: help; }
.scen__state { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.scen select { min-height: var(--seg-h); padding: 0 var(--sp-2); background: var(--c-proto-bg); color: var(--c-proto-text); border: var(--bw-1) solid var(--c-proto-line); border-radius: var(--r-1); font: inherit; }
.scen__ex { font-size: var(--fs-xs); color: var(--c-proto-text-2); }

/* Карта: выбор, район миссии, план ИИ, предлагаемый маршрут */
.map-sign.is-selected::before { content: ""; position: absolute; inset: calc(-1 * var(--sp-1)); border: var(--bw-2) solid var(--c-focus); border-radius: var(--r-2); }
.map path.area { fill: none; stroke: var(--c-accent); stroke-width: var(--area-stroke); stroke-opacity: 1; stroke-dasharray: var(--dash-mid); }
.map path.plan-sector { fill: var(--c-accent); fill-opacity: var(--o-plan); stroke: var(--c-accent); stroke-width: var(--sector-stroke); stroke-opacity: 1; }
.map path.route--proposed { stroke: var(--c-accent); stroke-dasharray: var(--dash-mid); }
.map .leaflet-tooltip.plan-label { --z-c: var(--c-accent-strong); }

/* ───────────── Терминал бойца (Э-2): один взгляд, одна рука ───────────── */
.phone--term { grid-template-rows: auto 1fr auto; }
.term-head { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--c-surface-1); border-bottom: var(--bw-1) solid var(--c-line); }
.term-status { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sm); }
.term-status__unit { font-weight: var(--fw-semibold); }
.term-head .stub { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); }
.seg--wide { display: grid; grid-template-columns: 1fr 1fr; }
.seg--wide button { min-height: var(--tap-min); font-size: var(--fs-md); font-weight: var(--fw-medium); }
.term-task { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-3); min-height: var(--tap-min); }
.term-task__body { display: flex; flex-direction: column; min-width: 0; }
.term-task__title { font-weight: var(--fw-semibold); }
.term-task__meta { font-size: var(--fs-sm); color: var(--c-text-2); }
.term-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-3); background: var(--c-surface-1); border-top: var(--bw-1) solid var(--c-line); }
.term-actions .btn { min-height: var(--tap-min); font-size: var(--fs-md); white-space: normal; }
.term-actions .stub { grid-column: 1 / -1; padding: var(--sp-1) var(--sp-3); text-align: center; font-size: var(--fs-xs); }
.term-actions .stub__label { display: inline; margin: 0 var(--sp-2) 0 0; }

/* Сообщение поверх карты: «маршрут изменён» (акцент) и «нет связи» (янтарный) — разные рамка, значок и текст */
.banner {
  --banner-c: var(--c-line-strong);
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  right: var(--sp-2);
  z-index: var(--z-float);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface-1);
  border: var(--bw-2) solid var(--banner-c);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-float);
}
.banner--route { --banner-c: var(--c-accent); }
.banner--offline { --banner-c: var(--link-lost); }
.banner__icon { font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--banner-c); }
.banner__text { display: flex; flex: 1; flex-direction: column; font-size: var(--fs-sm); }
.banner__text strong { font-size: var(--fs-md); }
.banner--offline .banner__text strong { color: var(--link-lost); }
.map-wrap.is-offline::after { content: ""; position: absolute; inset: 0; z-index: var(--z-float); border: var(--bw-2) solid var(--link-lost); pointer-events: none; }
.map-wrap.is-offline .leaflet-tile-pane { filter: var(--map-filter) grayscale(1); }
.map-wrap.is-offline path.route { stroke: var(--c-route-old); }

.compass { right: var(--sp-2); bottom: var(--sp-6); display: grid; place-items: center; width: var(--compass); height: var(--compass); border-radius: 50%; }
.compass svg { width: 70%; height: 70%; overflow: visible; }
.compass .c-ring { fill: none; stroke: var(--c-line-strong); stroke-width: var(--sign-stroke); }
.compass .c-n { fill: var(--c-text-2); font-family: var(--font-sans); font-size: var(--sign-badge-fs); font-weight: var(--fw-semibold); text-anchor: middle; dominant-baseline: central; }
.compass .c-needle { fill: var(--c-friend); }
.compass__deg { position: absolute; bottom: var(--sp-1); font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--c-text-2); }
.phone .toast { left: var(--sp-2); right: calc(var(--compass) + var(--sp-4)); bottom: var(--sp-6); max-width: none; }
.map-sign.is-self .map-sign__label { color: var(--c-friend); }

/* Лист «сообщить контакт» снизу — верх карты остаётся видимым */
.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-float);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  background: var(--c-surface-1);
  border-top: var(--bw-2) solid var(--c-hostile);
  box-shadow: var(--shadow-float);
}
.sheet__head { display: flex; align-items: center; justify-content: space-between; }
.sheet__classes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: var(--tap-big);
  padding: var(--sp-2);
  background: var(--c-surface-2);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--r-2);
  color: inherit;
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.choice[aria-pressed="true"] { background: var(--c-hostile-fill); border-color: var(--c-hostile); }
.choice .sign { width: var(--row-icon); height: var(--row-icon); }

/* ───────────── Место оператора БПЛА (Э-4): кадр, телеметрия рядом, карта ниже ───────────── */
.shell--two { grid-template-rows: auto 1fr; }
.op { --ctl-c: var(--c-line-strong); display: grid; grid-template-columns: 1fr var(--panel-w); min-height: 0; }
.op[data-ctl="ai"] { --ctl-c: var(--c-accent); }
.op[data-ctl="manual"] { --ctl-c: var(--c-friend); }
.op__left { display: grid; grid-template-columns: 1fr var(--telemetry-w); grid-template-rows: auto 1fr; gap: var(--sp-3); min-width: 0; min-height: 0; padding: var(--sp-3); }
.op__map { position: relative; grid-column: 1 / -1; min-height: 0; border: var(--bw-1) solid var(--c-line); border-radius: var(--r-2); overflow: hidden; }
.op__map > .map { position: absolute; inset: 0; min-height: 0; }

/* Кадр: рамка = кто ведёт (пунктир — не принят, акцент — ИИ, голубая толстая — вы) */
.cam {
  position: relative;
  align-self: start;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--map-bg);
  border: var(--bw-ctl) solid var(--ctl-c);
  border-radius: var(--r-2);
}
.op[data-ctl="offered"] .cam { border-style: dashed; }
.op[data-ctl="manual"] .cam { border-width: var(--bw-ctl-strong); }
.cam > .map { position: absolute; inset: 0; min-height: 0; }
.cam--real .map .leaflet-tile-pane { filter: var(--cam-filter); }
.cam--virtual .map .leaflet-tile-pane { filter: none; }
.cam__fx { position: absolute; inset: 0; z-index: var(--z-float); pointer-events: none; }
.cam--real .cam__fx {
  background:
    repeating-linear-gradient(0deg, var(--cam-scan) 0 var(--bw-1), transparent var(--bw-1) var(--bw-ctl)),
    radial-gradient(ellipse at center, transparent 55%, var(--cam-vignette) 100%);
}
.cam__cross {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: var(--z-float);
  width: var(--cross);
  height: var(--cross);
  transform: translate(-50%, -50%);
  pointer-events: none;
  background:
    linear-gradient(var(--ctl-c), var(--ctl-c)) center / var(--bw-1) 100% no-repeat,
    linear-gradient(var(--ctl-c), var(--ctl-c)) center / 100% var(--bw-1) no-repeat;
}
.cam__hud { position: absolute; z-index: var(--z-float); padding: var(--sp-1) var(--sp-2); background: var(--c-overlay); border-radius: var(--r-1); font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--c-text); }
.cam__hud--tl { top: var(--sp-2); left: var(--sp-2); }
.cam__hud--bl { bottom: var(--sp-2); left: var(--sp-2); max-width: 60%; }
.cam__hud .stub__label { display: inline; margin: 0 var(--sp-1) 0 0; }
.det { position: relative; width: 100%; height: 100%; border: var(--bw-2) solid var(--c-hostile); }
.det--ai { border-style: dashed; }
.det .detect__label { left: calc(-1 * var(--bw-2)); }
.cam .map.is-drawing, .cam .map.is-drawing .leaflet-grab { cursor: crosshair; }

/* Кто ведёт аппарат — метка: значок + рамка + цвет */
.ctl-chip {
  --chip-c: var(--c-line-strong);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--seg-h);
  padding: 0 var(--sp-3);
  border: var(--bw-2) solid var(--chip-c);
  border-radius: var(--r-2);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.ctl-chip--offered { border-style: dashed; }
.ctl-chip--ai { --chip-c: var(--c-accent); color: var(--c-accent-strong); background: var(--c-accent-bg); }
.ctl-chip--manual { --chip-c: var(--c-friend); color: var(--c-friend); background: var(--c-friend-fill); }
.ctl-chip__icon { font-family: var(--font-mono); font-size: var(--fs-md); }

/* Телеметрия — колонка рядом с кадром */
.tele { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.tele__item { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); background: var(--c-surface-1); border: var(--bw-1) solid var(--c-line); border-radius: var(--r-2); }
.tele__val { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: var(--fw-semibold); }

/* Ручное управление */
.pad { display: grid; grid-template-columns: repeat(3, var(--tap-min)); gap: var(--sp-1); }
.pad .btn { min-height: var(--tap-min); padding: 0; font-family: var(--font-mono); font-size: var(--fs-lg); }
.pad__gap { visibility: hidden; }

/* Распознанное в кадре */
.detrow { display: grid; grid-template-columns: var(--row-icon) 1fr; gap: var(--sp-3); padding: var(--sp-2); border: var(--bw-1) solid var(--c-line); border-radius: var(--r-2); }
.detrow + .detrow { margin-top: var(--sp-2); }
.detrow .sign { width: var(--row-icon); height: var(--row-icon); }
.detrow .actions { margin-top: var(--sp-2); }
.detrow--rejected { opacity: var(--o-disabled); }
.detrow--human { border-color: var(--c-line-strong); }
.choices-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.choices-row .choice { min-height: var(--tap-min); flex-direction: row; }
.map path.route--ai { stroke: var(--c-accent); stroke-width: var(--route-old-w); }

/* Вариант «планшет» — та же страница в рамке 1024×768 */
.tablet-stage { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); min-height: 0; overflow: auto; padding: var(--sp-4); }
.tablet-cap { max-width: var(--tablet-w); color: var(--c-text-2); font-size: var(--fs-sm); }
.tablet-frame { flex: none; width: var(--tablet-w); height: var(--tablet-h); max-width: 100%; background: var(--c-bg); border: var(--bw-2) solid var(--c-line-strong); border-radius: var(--r-2); }

/* ───────────── Администрирование и журнал (Э-3) ───────────── */
.adm { position: relative; display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 0; }
.rail { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); background: var(--c-surface-1); border-right: var(--bw-1) solid var(--c-line); }
.rail__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--control-h);
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: var(--bw-1) solid transparent;
  border-radius: var(--r-2);
  color: var(--c-text-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rail__item:hover { background: var(--c-surface-2); color: var(--c-text); }
.rail__item[aria-current="page"] { background: var(--c-surface-2); border-color: var(--c-line-strong); color: var(--c-text); font-weight: var(--fw-semibold); }
.rail__n { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-text-3); }
.rail__item .tag { margin-left: auto; }
.adm__page, .adm__map { grid-column: 2; min-width: 0; min-height: 0; }
.adm__page { overflow: auto; padding: var(--sp-5); }
.adm-page { display: flex; flex-direction: column; gap: var(--sp-4); max-width: var(--page-w); }
.adm__map { display: grid; grid-template-columns: 1fr var(--panel-w); }
.adm-toast { left: calc(var(--rail-w) + var(--sp-3)); bottom: var(--sp-5); max-width: var(--page-w); }
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.input {
  min-height: var(--control-h);
  padding: 0 var(--sp-3);
  background: var(--c-bg);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--r-2);
  color: var(--c-text);
  font: inherit;
}
.input::placeholder { color: var(--c-text-3); }
.input:hover { border-color: var(--c-text-3); }
/* Видно только администратору — красная пунктирная рамка и слова, а не только цвет */
.secret { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); background: var(--c-hostile-fill); border: var(--bw-2) dashed var(--c-hostile); border-radius: var(--r-2); }
.secret__tag { align-self: start; color: var(--c-hostile); border-color: var(--c-hostile); }
.map-secret { top: var(--sp-3); left: var(--sp-3); padding: var(--sp-1) var(--sp-3); border: var(--bw-2) dashed var(--c-hostile); color: var(--c-hostile); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
/* Развилка к решению владельца — пунктир акцента */
.variant { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: var(--bw-1) dashed var(--c-accent); border-radius: var(--r-2); }
.variant .tag { align-self: start; }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.checklist li { display: flex; gap: var(--sp-2); }
.check__mark { width: var(--check); font-family: var(--font-mono); font-weight: var(--fw-semibold); }
.check--ok .check__mark { color: var(--link-ok); }
.check--no { color: var(--c-text-3); }
.score { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.score span { display: flex; flex-direction: column; padding: var(--sp-2); background: var(--c-surface-2); border-radius: var(--r-2); font-size: var(--fs-sm); color: var(--c-text-2); }
.score strong { font-family: var(--font-mono); font-size: var(--fs-xl); color: var(--c-text); }
.plain { margin: 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); }
.row--plain { grid-template-columns: 1fr; }
.row--missed .sign, .map-sign.is-missed .sign { --sign-c: var(--c-text-3); --sign-f: transparent; }
.map-sign.is-missed .map-sign__label { color: var(--c-text-2); }

/* ───────────── Центр управления группировкой (Э-1 первого этапа) ───────────── */
/* Знак беспилотного средства: группа состояния — цвет и заливка; кольцо — ход; углы — связь, «В», оператор, значок состояния */
.sign--g-reserve, .sign--g-prep, .sign--g-after, .sign--g-fault, .sign--g-off { --sign-c: var(--c-text-2); --sign-f: transparent; }
.sign--g-ready { --sign-c: var(--c-friend); --sign-f: transparent; }
.sign--g-unknown { --sign-c: var(--c-unknown); --sign-f: transparent; }
.sign--g-unknown .s-frame { stroke-dasharray: var(--dash-mid); }
.sign .s-code {
  fill: var(--sign-c);
  font-family: var(--font-cond);
  font-size: var(--sign-code-fs);
  font-weight: var(--fw-semibold);
  text-anchor: middle;
  dominant-baseline: central;
}
.sign--g-active .s-code, .sign--g-mission .s-code { fill: var(--c-text); }
.sign .s-ring-track { fill: none; stroke: var(--sign-c); stroke-width: var(--ring-w); stroke-opacity: var(--o-ring-track); }
.sign .s-ring { fill: none; stroke: var(--sign-c); stroke-width: var(--ring-w); }
.sign--g-prep .s-ring { stroke: var(--c-text); }
.sign .s-pending { fill: none; stroke: var(--c-accent); stroke-width: var(--pending-w); stroke-dasharray: var(--dash-mid); }
.sign .s-attn { fill: none; stroke: var(--link-lost); stroke-width: var(--attn-w); stroke-dasharray: var(--dash-mid); }
.sign .s-slash { fill: none; stroke: var(--c-text); stroke-width: var(--slash-w); stroke-linecap: round; }
.sign .s-mark { fill: none; stroke: var(--sign-c); stroke-width: var(--mark-w); stroke-linecap: round; stroke-linejoin: round; }
.map-sign__label--below { left: 50%; top: calc(100% + var(--bw-2)); transform: translateX(-50%); text-align: center; font-size: var(--fs-2xs); }
.map.is-far .map-sign__label--below, .map.is-far .map-sign__label small { display: none; }
.map.is-far .map-sign__label--above small,
.map.is-far .map-sign.is-selected .map-sign__label--below, .map.is-far .map-sign.is-selected .map-sign__label small { display: block; }
.map-sign__label--above { left: 50%; top: auto; bottom: calc(100% + var(--bw-2)); transform: translateX(-50%); text-align: center; }
.map-sign__label--unknown { color: var(--c-unknown); }
.map-sign__label--dim { color: var(--c-text-2); }
.base-box { background: var(--c-friend-fill); border: var(--bw-1) dashed var(--c-line-strong); border-radius: var(--r-2); opacity: var(--o-disabled); pointer-events: none; }
.tag--unknown { color: var(--c-unknown); border-color: var(--c-unknown); border-style: dashed; }
.map path.base-area { fill: var(--c-friend); fill-opacity: var(--o-base); stroke: var(--c-line-strong); stroke-width: var(--sector-stroke); stroke-dasharray: var(--dash-mid); stroke-opacity: 1; }
.map path.uncert { fill: var(--c-friend); fill-opacity: var(--o-accuracy); stroke: var(--c-friend); stroke-width: var(--accuracy-stroke); stroke-dasharray: var(--dash-low); stroke-opacity: 1; }
.map path.task-area { fill: var(--c-route); fill-opacity: var(--o-plan); stroke: var(--c-route); stroke-width: var(--sector-stroke); stroke-dasharray: var(--dash-mid); stroke-opacity: 1; }
.map path.route--task { stroke-width: var(--route-old-w); }
.map path.route--draft { stroke: var(--c-accent); stroke-width: var(--route-old-w); stroke-dasharray: var(--dash-mid); }
.map path.draft-pt { fill: var(--c-accent); stroke: var(--map-halo); stroke-width: var(--bw-2); fill-opacity: 1; stroke-opacity: 1; }
.map path.task-pt { fill: var(--c-route); stroke: var(--map-halo); stroke-width: var(--bw-2); fill-opacity: 1; stroke-opacity: 1; }
.map .leaflet-tooltip.task-label { --z-c: var(--c-route); }

/* Фильтры — поверх карты слева сверху */
.filters { top: var(--sp-3); left: var(--sp-3); width: var(--filters-w); margin: 0; min-inline-size: 0; padding: var(--sp-1) var(--sp-3) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.filters legend { padding: 0 var(--sp-1); }
.filters .input { min-height: var(--seg-h); padding: 0 var(--sp-2); font-size: var(--fs-sm); width: 100%; }
.filters__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.envs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1); }
.chip {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--seg-h);
  padding: 0 var(--sp-2);
  background: transparent;
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--r-1);
  color: var(--c-text-2);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.chip:hover { color: var(--c-text); background: var(--c-surface-2); }
.chip[aria-pressed="true"] { color: var(--c-accent-strong); background: var(--c-accent-bg); border-color: var(--c-accent); }
.chip .sign { width: var(--check); height: var(--check); }

/* Сводка группировки: строки — состояния, колонки — среды; ячейка — фильтр */
.sum { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.sum th, .sum td { padding: 0; border-bottom: var(--bw-1) solid var(--c-line); text-align: right; }
.sum thead th { padding: var(--sp-1) 0; font-size: var(--fs-2xs); font-weight: var(--fw-medium); line-height: var(--lh-tight); color: var(--c-text-2); vertical-align: bottom; }
.sum thead th .sign { display: block; margin: 0 0 var(--sp-1) auto; width: var(--check); height: var(--check); }
.sum tbody th { padding: var(--sp-1) var(--sp-1) var(--sp-1) 0; text-align: left; font-weight: var(--fw-regular); color: var(--c-text-2); white-space: nowrap; }
.sum tr.sum__total th, .sum tr.sum__total td { font-weight: var(--fw-semibold); color: var(--c-text); }
.sum td button {
  width: 100%;
  min-height: var(--seg-h);
  padding: 0 var(--sp-1);
  background: transparent;
  border: var(--bw-1) solid transparent;
  border-radius: var(--r-1);
  color: inherit;
  font: inherit;
  font-family: var(--font-mono);
  text-align: right;
  cursor: pointer;
}
.sum td button:hover { background: var(--c-surface-2); border-color: var(--c-line-strong); }
.sum td button[aria-pressed="true"] { color: var(--c-accent-strong); background: var(--c-accent-bg); border-color: var(--c-accent); }
.sum td .zero { color: var(--c-text-3); }
.sum__lost { color: var(--link-lost); }
.sum-note { font-size: var(--fs-xs); color: var(--c-text-3); }
.sum-unbound { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2); border: var(--bw-1) dashed var(--c-unknown); border-radius: var(--r-2); font-size: var(--fs-sm); color: var(--c-unknown); }

/* Ход: полоса процента — ширина задаётся через --p */
.prog { position: relative; height: var(--prog-h); background: var(--c-surface-3); border-radius: var(--r-1); overflow: hidden; }
.prog::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * var(--pct)); background: var(--c-friend); }
.prog--prep::after { background: var(--c-text); }
.prog--lost::after { background: var(--link-lost); }
.prog-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sm); }
.prog-line strong { font-family: var(--font-mono); }

/* Три оси аппарата — состояние, связь, кто ведёт — отдельными строками */
.axes { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); margin: 0; padding: var(--sp-2) var(--sp-3); background: var(--c-bg); border: var(--bw-1) solid var(--c-line); border-radius: var(--r-2); }
.axes dt { color: var(--c-text-2); font-size: var(--fs-sm); }
.axes dd { margin: 0; font-weight: var(--fw-medium); }
.path { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--c-text); }
.code { font-family: var(--font-mono); font-weight: var(--fw-semibold); }
.op-chip { color: var(--c-friend); }
.op-chip::before { content: ""; display: inline-block; width: var(--dot); height: var(--dot); margin-right: var(--sp-1); border-radius: 50%; background: var(--c-friend); vertical-align: middle; }

/* Команда, ждущая ответа, и отказ */
.pending { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: var(--bw-1) dashed var(--c-accent); border-radius: var(--r-2); font-size: var(--fs-sm); }
.pending strong { color: var(--c-accent-strong); }
.refusal { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: var(--bw-1) solid var(--link-lost); border-radius: var(--r-2); font-size: var(--fs-sm); }
.refusal strong { color: var(--link-lost); }

/* Имитация ответа подразделения или аппарата — служебное прототипа, светлое, в продукт не переезжает */
.sim { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--c-proto-bg); color: var(--c-proto-text); border-radius: var(--r-2); font-size: var(--fs-xs); }
.sim__label { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-proto-text-2); }
.sim .btn { background: transparent; color: var(--c-proto-text); border-color: var(--c-proto-line); }
.sim .btn:hover { border-color: var(--c-proto-text-2); background: transparent; }
.sim :focus-visible { outline-color: var(--c-proto-text); }
.sim .input { background: var(--c-proto-bg); color: var(--c-proto-text); border-color: var(--c-proto-line); }

/* Чек-лист подготовки: ✓ отмечено, ▸ текущий пункт, — впереди */
.check--cur { color: var(--c-text); font-weight: var(--fw-semibold); }
.check--cur .check__mark { color: var(--c-accent-strong); }
.check__note { margin-left: auto; font-size: var(--fs-xs); color: var(--c-text-2); }
.sim .btn, .refusal .btn, .panel .actions .btn { white-space: normal; text-align: left; }
.sim .input { min-height: var(--seg-h); font-size: var(--fs-xs); }
.slow { color: var(--link-lost); font-weight: var(--fw-semibold); }

/* Параметры и сведения раскрытием */
.more { border-top: var(--bw-1) solid var(--c-line); padding-top: var(--sp-2); }
.more summary { cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text-2); }
.more[open] summary { margin-bottom: var(--sp-2); color: var(--c-text); }
.kv--sm { font-size: var(--fs-sm); }
.list-scroll { max-height: var(--list-max-h); overflow: auto; }
.row__side { justify-self: end; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--c-text-2); }
.row--3 { grid-template-columns: var(--row-icon) 1fr auto; }
.row--unknown .row__title { color: var(--c-unknown); }
.row--off { opacity: var(--o-disabled); }
.opt-list { display: flex; flex-direction: column; gap: var(--sp-1); }
.opt-list label { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-size: var(--fs-sm); }
.opt-list--off { font-size: var(--fs-xs); color: var(--c-text-3); }
.count { display: inline-grid; grid-template-columns: var(--seg-h) auto var(--seg-h); align-items: center; gap: var(--sp-2); }
.count output { min-width: var(--sp-5); text-align: center; font-family: var(--font-mono); }
.field--row { flex-direction: row; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.field--row .input { flex: 1; }

/* Лист условных знаков поверх карты */
.signs-float { right: var(--sp-3); bottom: var(--sp-6); width: var(--legend-float-w); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-xs); background: var(--c-surface-1); }
.signs-float ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.signs-float li { display: grid; grid-template-columns: var(--row-icon) 1fr; gap: var(--sp-2); align-items: center; }
.signs-float .sign { width: var(--row-icon); height: var(--row-icon); }
.signs-btn { right: var(--sp-3); bottom: var(--sp-6); }

/* ───────────── Терминал подразделения (Э-6): оболочка терминала бойца, содержимое по роли ───────────── */
/* Телефон — одна колонка: список → подробность с «← назад»; планшет — список слева, подробность справа */
.phone--tablet { width: var(--tablet-w); height: var(--tablet-h); border-radius: var(--r-2); }
.term-body { min-height: 0; overflow: auto; padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }
.term-split { display: grid; grid-template-columns: var(--term-list-w) 1fr; min-height: 0; }
.term-split > .term-body + .term-body { border-left: var(--bw-1) solid var(--c-line); }
.term-who { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-2); }
.term-back { align-self: start; }
.term-actions--one { grid-template-columns: 1fr; }
.term-actions:empty { display: none; }
.term-body .banner { position: static; box-shadow: none; }
.inbox { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); background: var(--c-surface-1); border: var(--bw-1) solid var(--c-line-strong); border-radius: var(--r-2); }
.inbox--new { border-color: var(--c-accent); }
.inbox--done { opacity: var(--o-disabled); }
.inbox__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.inbox__title { font-weight: var(--fw-semibold); }
.inbox__meta { font-size: var(--fs-sm); color: var(--c-text-2); }
.inbox .btn, .term-body .actions .btn { min-height: var(--tap-min); white-space: normal; }
.inbox .input, .term-body .input { min-height: var(--tap-min); font-size: var(--fs-md); }
.term-body textarea.input { min-height: calc(var(--tap-min) * 2); padding: var(--sp-2) var(--sp-3); resize: vertical; }
.choices-col { display: grid; gap: var(--sp-2); }
.choices-col .choice { min-height: var(--tap-min); flex-direction: row; justify-content: flex-start; padding: 0 var(--sp-3); font-size: var(--fs-md); }
.choice[aria-pressed="true"].choice--neutral { background: var(--c-accent-bg); border-color: var(--c-accent); }
/* Пункт чек-листа — вся строка под палец */
.tick {
  display: grid;
  grid-template-columns: var(--tap-min) 1fr auto;
  align-items: center;
  width: 100%;
  min-height: var(--tap-min);
  padding: 0 var(--sp-3) 0 0;
  background: var(--c-surface-1);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--r-2);
  color: var(--c-text-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tick + .tick { margin-top: var(--sp-1); }
.tick__mark { justify-self: center; font-family: var(--font-mono); font-weight: var(--fw-semibold); }
.tick[aria-pressed="true"] { color: var(--c-text); }
.tick[aria-pressed="true"] .tick__mark { color: var(--link-ok); }
.tick--cur { border-color: var(--c-accent); color: var(--c-text); font-weight: var(--fw-semibold); }
.tick--cur .tick__mark { color: var(--c-accent-strong); }
.tick__note { font-size: var(--fs-xs); color: var(--c-text-3); font-weight: var(--fw-regular); }
.tag--unsent { color: var(--link-lost); border-color: var(--link-lost); border-style: dashed; }
.warn { color: var(--link-lost); font-weight: var(--fw-semibold); }
.view-wedge { fill: var(--c-accent); fill-opacity: 0.18; stroke: var(--c-accent); stroke-width: 1; }
.opx { display: grid; grid-template-columns: 1fr var(--panel-w); grid-template-areas: "head head" "map side" "note side"; gap: var(--sp-3); padding: var(--sp-3); align-items: start; }
.opx__head { grid-area: head; display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }
.opx__follow { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--c-text-2); }
.opx__map { grid-area: map; min-width: 0; border: var(--bw-1) solid var(--c-line); border-radius: var(--r-2); overflow: hidden; }
.opx[data-ctl="manual"] .opx__map { border-color: var(--c-friend); border-width: var(--bw-ctl-strong); }
.opx > .empty-note { grid-area: note; }
.opx__side { grid-area: side; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.opx .btn--touch, .opx .input { min-height: var(--tap-min); }
@media (max-width: 68.75em) { .opx { grid-template-columns: 1fr var(--panel-w-tablet); } }
.term-cols { display: flex; flex-direction: column; gap: var(--sp-3); }
.term-list, .term-detail { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.only-narrow { display: none; }
/* Планшет и шире — список слева, карточка аппарата справа; телефон — одна колонка, карточка вместо списка с «← Задачи и парк» */
@media (min-width: 48.01em) {
  .term-cols--open { display: grid; grid-template-columns: var(--term-list-w) 1fr; align-items: start; }
  .term-cols--open .term-back { display: none; }
}
@media (max-width: 48em) {
  .term-cols--open .term-list { display: none; }
  .only-wide { display: none; }
  .only-narrow { display: block; }
}
.empty-big { display: grid; place-items: center; gap: var(--sp-2); min-height: var(--map-min-h); text-align: center; color: var(--c-text-2); }

/* ───────────── Точки перелома (по поведению, см. конец :root) ───────────── */
@media (max-width: 87.5em) {
  .adm__map { grid-template-columns: 1fr var(--panel-w-compact); }
  .shell__main { grid-template-columns: 1fr var(--panel-w-compact); }
  .shell__main--solo { grid-template-columns: 1fr; }  /* экран без панели (телефонные терминалы) остаётся в одну колонку */
  .op { grid-template-columns: 1fr var(--panel-w-compact); }
  /* телеметрия в строку «метка — значение»: колонка не выше кадра, карте остаётся место */
  .tele__item { flex-direction: row; align-items: baseline; justify-content: space-between; padding: var(--sp-1) var(--sp-2); }
  .tele__val { font-size: var(--fs-md); }
}
@media (max-width: 68.75em) {
  /* планшет оператора (вариант): панель и телеметрия уже, все кнопки — под палец */
  .op { grid-template-columns: 1fr var(--panel-w-tablet); }
  .op__left { grid-template-columns: 1fr var(--telemetry-w-tablet); }
  .op .btn { min-height: var(--tap-min); }
  .tele__item { padding: var(--sp-1) var(--sp-2); }
  .tele__val { font-size: var(--fs-md); }
}
@media (max-width: 48em) {
  .bar { gap: var(--sp-2); padding: 0 var(--sp-3); }
  .bar__meta, .bar__sep, .bar .tag--stub { display: none; }
  .bar__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .scen__text { flex-basis: 100%; }
  .scen { gap: var(--sp-1) var(--sp-2); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); line-height: var(--lh-tight); }
  .scen .tag--proto, .scen__who, .scen__ex { display: none; }
  .scen__state { font-size: var(--fs-xs); }
  .scen .btn { min-height: var(--tag-h); padding: 0 var(--sp-2); }
  .page { padding: var(--sp-5) var(--sp-4) var(--sp-6); }
  .map--sheet { height: var(--map-sheet-h-phone); }
  .shell__main { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .panel { border-left: 0; border-top: var(--bw-1) solid var(--c-line); max-height: 40vh; }
}
@media (max-width: 30em) {
  .phone-stage { padding: 0; place-items: stretch; }
  .phone { width: 100%; height: 100%; border: 0; border-radius: 0; }
}