/* ═══════════════════════════════════════════════
   REALTRAC PROTOTYPE — ПРОТОТИПЫ МОДУЛЕЙ (views/module.js)
   Плашка «в стадии разработки», блок «Информация к модулю для разработчика» (сценарий, API, MVP, пилот,
   варианты), а ниже — стили рабочих экранов модулей: «Эвакуация» (views/evacuation.js) и
   «Разбор инцидента» (views/incident.js). Цвета — из токенов (tokens.css) и переменных зон (map.css),
   цвета треков участников — из playback.css (класс .playback на экране).
═══════════════════════════════════════════════ */

/* ── Плашки ── «в стадии разработки» — жёлтая с полосой цвета жёлтой зоны; «рекомендация» — синяя акцентная */

.mod-stage, .mod-recommend { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); font-size: var(--text-sm); line-height: 1.5; }
.mod-stage { color: #5C3D00; background: #FFF1CC; border-left: 3px solid var(--zone-notice); }
/* В тёмной теме жёлтая плашка — тёмно-янтарная со светлым текстом: контраст без «крика» */
[data-theme="dark"] .mod-stage { color: #FFE7A3; background: #3A2F12; }
.mod-stage > svg, .mod-recommend > svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.mod-recommend { margin-top: var(--space-5); background: var(--color-primary-highlight); border-left: 3px solid var(--color-primary); }
.mod-recommend > svg { color: var(--color-primary); }

/* ── Информация для разработчика ── четыре карточки в две колонки */
.mod-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.mod-card { padding: var(--space-5); font-size: var(--text-sm); line-height: 1.55; }
.mod-card h2 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--text-base); font-weight: 600; }
.mod-card h2 svg { width: 18px; height: 18px; color: var(--color-primary); }
.mod-card h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.mod-card p + p { margin-top: var(--space-3); }
.mod-muted { color: var(--color-text-muted); }

/* Списки «что добавить», «пилот», пункты вариантов; .mod-api — методы API: плашка метода, путь, пояснение */
.mod-list { display: flex; flex-direction: column; gap: var(--space-2); padding-left: 1.2em; }
.mod-api { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-3); }
.mod-api li { display: flex; gap: var(--space-3); align-items: flex-start; }
.mod-method { flex-shrink: 0; min-width: 44px; padding: 1px 4px; font-size: var(--text-xs); font-weight: 700; text-align: center; color: var(--color-primary); background: var(--color-primary-highlight); }
.mod-api code { font-size: var(--text-xs); word-break: break-all; }
.mod-note { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }

/* Заголовок «Варианты реализации» — дисплейный шрифт, как заголовки групп на главной */
.mod-section-title { margin: var(--space-8) 0 var(--space-3); font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); letter-spacing: .02em; }
/* Три варианта в ряд одной высоты: список пунктов растягивается, трудоёмкость прижата к низу */
.mod-variants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.mod-variant { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); font-size: var(--text-sm); line-height: 1.5; }
.mod-variant header { display: flex; align-items: flex-start; gap: var(--space-3); }
.mod-variant header b { display: block; font-size: var(--text-base); line-height: 1.3; }
/* Буква варианта — квадрат акцентного цвета дисплейным шрифтом */
.mod-letter { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 20px; color: #fff; background: var(--color-primary); }
.mod-tag { display: inline-block; margin-top: 2px; font-size: var(--text-xs); color: var(--color-text-muted); }
.mod-variant .mod-list { flex: 1; }
/* Ограничение варианта (жёлтый значок) и трудоёмкость (над чертой, заметнее остального текста) */
.mod-limit, .mod-effort { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-xs); color: var(--color-text-muted); }
.mod-limit svg, .mod-effort svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.mod-limit svg { color: var(--zone-notice); }
.mod-effort { padding-top: var(--space-3); border-top: 1px solid var(--color-divider); color: var(--color-text); font-weight: 500; }

/* Ссылки «уже есть в прототипе» — в текущей разметке не используются, оставлены для страницы-концепции */
.mod-related { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted); }

/* Узкие экраны: варианты и карточки — в одну колонку */
@media (max-width: 1100px) { .mod-variants { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .mod-grid { grid-template-columns: 1fr; } }

/* Информация к модулю для разработчика — раскрывается внизу рабочего экрана */
.mod-dev { margin-top: var(--space-8); border-top: 1px solid var(--color-border); }
.mod-dev > summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) 0; font-weight: 600; cursor: pointer; color: var(--color-primary); list-style: none; }
.mod-dev > summary::-webkit-details-marker { display: none; }
.mod-dev > summary svg { width: 18px; height: 18px; }
/* Свой маркер раскрытия вместо браузерного треугольника; поворачивается при открытии */
.mod-dev > summary::after { content: '▸'; margin-left: var(--space-1); transition: transform var(--transition); }
.mod-dev[open] > summary::after { transform: rotate(90deg); }
.mod-dev-body { padding-bottom: var(--space-6); }
/* Вариант, реализованный в прототипе, — зелёная полоса сверху (как «готово» у плиток на главной) */
.mod-variant.is-chosen { border-top: 3px solid var(--color-success); }

/* ═══ ЭВАКУАЦИЯ (views/evacuation.js) ═══
   Статусы — всегда цвет + значок + подпись: неизвестно (серый), опасная зона (красный), в пути (синий),
   в точке сбора (зелёный), проверен ответственным (бирюзовый). */
/* Цвета статусов — переменные на странице и на метках карты (метки живут в контейнере Leaflet, вне .page-wide);
   «проверен» — бирюзовый из палитры треков, в тёмной теме светлее */
.page-wide, .evac-pin { --ev-unknown: var(--color-offline); --ev-danger: var(--rt-red); --ev-moving: var(--color-primary); --ev-assembly: var(--color-success); --ev-checked: #0E9384; }
[data-theme="dark"] .page-wide, [data-theme="dark"] .evac-pin { --ev-checked: #2DD4BF; }
/* Переключатель источника данных («Симуляция» / «Демо-сервер») в шапке экрана */
.evac-source .filter-btn { display: inline-flex; align-items: center; gap: var(--space-1); }
.evac-source svg { width: 14px; height: 14px; }

/* ── Полоса хода эвакуации ── фаза и таймер | итог с полосой статусов | кнопки */
.evac-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-6); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.evac-phase { display: flex; flex-direction: column; gap: 2px; min-width: 190px; }
.evac-phase-label { font-size: var(--text-sm); color: var(--color-text-muted); }
.evac-phase-label.is-on { color: var(--rt-red); font-weight: 600; }
/* Таймер — крупные табличные цифры, чтобы не «дёргался» при смене знаков */
.evac-timer { font-size: 32px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.evac-total-head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); }
#evac-total { font-size: var(--text-lg); font-weight: 600; }
.evac-total-sub { font-size: var(--text-xs); color: var(--color-text-muted); }
/* Полоса «часть целого» по статусам: зазор 2 px между сегментами, скруглены только края (как на оперативной панели) */
.evac-meter { display: flex; gap: 2px; height: 14px; }
.evac-seg:first-child { border-radius: 4px 0 0 4px; }
.evac-seg:last-child { border-radius: 0 4px 4px 0; }
.evac-seg:only-child { border-radius: 4px; }
.evac-seg.is-empty { background: var(--color-surface-offset); }
.evac-seg.is-unknown, .evac-key.is-unknown { background: var(--ev-unknown); }
.evac-seg.is-danger, .evac-key.is-danger { background: var(--ev-danger); }
.evac-seg.is-moving, .evac-key.is-moving { background: var(--ev-moving); }
.evac-seg.is-assembly, .evac-key.is-assembly { background: var(--ev-assembly); }
.evac-seg.is-checked, .evac-key.is-checked { background: var(--ev-checked); }
/* Легенда полосы: цветной квадрат + значок + подпись + число — статус никогда не передаётся одним цветом */
.evac-legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.evac-legend li { display: inline-flex; align-items: center; gap: var(--space-1); }
.evac-legend svg { width: 13px; height: 13px; }
.evac-legend b { color: var(--color-text); }
.evac-key { width: 10px; height: 10px; display: inline-block; }
.evac-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }

/* ── Карта и очередь ── карта с кнопками этажей, справа очередь «найти и проверить» фиксированной ширины */
.evac-main { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-4); margin-bottom: var(--space-4); }
.evac-map-card { display: flex; flex-direction: column; min-height: 520px; }
.evac-floors { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); }
.evac-floors .filter-btn { display: inline-flex; align-items: center; gap: var(--space-2); }
.evac-floors .count { min-width: 18px; line-height: 18px; padding: 0 4px; }
.evac-map { flex: 1; min-height: 460px; }
/* Точка сбора на карте — зелёный пунктир поверх остальных зон */
.evac-assembly { stroke: var(--color-success); fill: var(--color-success); fill-opacity: .22; stroke-dasharray: 6 4; }
/* Метки людей: цвет по статусу; «в пути» остаётся синим по умолчанию .carrier-pin (map.css);
   в опасной зоне — пульсация (анимация pin-pulse из map.css) */
.carrier-pin.evac-pin.is-unknown { background: var(--ev-unknown); }
.carrier-pin.evac-pin.is-unknown::after { border-top-color: var(--ev-unknown); }
.carrier-pin.evac-pin.is-danger { background: var(--ev-danger); animation: pin-pulse 1.2s infinite; }
.carrier-pin.evac-pin.is-danger::after { border-top-color: var(--ev-danger); }
.carrier-pin.evac-pin.is-assembly { background: var(--ev-assembly); }
.carrier-pin.evac-pin.is-assembly::after { border-top-color: var(--ev-assembly); }
.carrier-pin.evac-pin.is-checked { background: var(--ev-checked); }
.carrier-pin.evac-pin.is-checked::after { border-top-color: var(--ev-checked); }

/* Очередь ограничена по высоте и прокручивается, чтобы не растягивать строку с картой */
.evac-queue { display: flex; flex-direction: column; max-height: 580px; }
.evac-queue-body { overflow-y: auto; padding: 0 var(--space-4) var(--space-4); }
.evac-queue h3 { display: flex; align-items: center; justify-content: space-between; margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.evac-queue ul { list-style: none; display: flex; flex-direction: column; }
.evac-q-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); }
.evac-q-icon { display: flex; }
.evac-q-icon svg { width: 18px; height: 18px; }
.evac-q-row.is-unknown .evac-q-icon { color: var(--ev-unknown); }
.evac-q-row.is-danger .evac-q-icon { color: var(--ev-danger); }
.evac-q-row.is-assembly .evac-q-icon { color: var(--ev-assembly); }
.evac-q-text { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: var(--text-sm); }
.evac-q-text > span { font-size: var(--text-xs); color: var(--color-text-muted); }
.evac-q-empty { padding: var(--space-2) 0; font-size: var(--text-sm); }
/* Имя человека — кнопка-ссылка к нему на карте */
.evac-who { text-align: left; font-weight: 600; color: var(--color-text); }
.evac-who:hover { color: var(--color-primary); }

/* ── Таблица людей ── имя и должность в одной ячейке столбиком */
.evac-table-card { margin-bottom: var(--space-4); }
.evac-table-card .card-header { justify-content: space-between; }
.evac-table td { vertical-align: middle; font-size: var(--text-sm); }
.evac-table td:first-child > * { display: block; }
.evac-muted { color: var(--color-text-muted); font-size: var(--text-xs); }
/* Плашка статуса: цветная левая полоса + значок + подпись; фон — полупрозрачный цвет статуса */
.evac-status { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; border-left: 3px solid; }
.evac-status svg { width: 13px; height: 13px; }
.evac-status.is-unknown { border-color: var(--ev-unknown); background: var(--color-surface-offset); }
.evac-status.is-danger { border-color: var(--ev-danger); color: var(--color-error); background: color-mix(in srgb, var(--ev-danger) 10%, transparent); }
.evac-status.is-moving { border-color: var(--ev-moving); color: var(--color-primary); background: var(--color-primary-highlight); }
.evac-status.is-assembly { border-color: var(--ev-assembly); color: var(--color-success); background: color-mix(in srgb, var(--ev-assembly) 12%, transparent); }
.evac-status.is-checked { border-color: var(--ev-checked); color: var(--ev-checked); background: color-mix(in srgb, var(--ev-checked) 12%, transparent); }
/* Ячейки признаков: зелёная галочка «есть», красный крест «не доставлена»; кнопка «Подтвердить» компактная */
.evac-flag { white-space: nowrap; }
.evac-flag svg { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 2px; color: var(--color-success); }
.evac-warn { color: var(--color-error); }
.evac-warn svg { color: var(--color-error); }
.evac-check { padding: 2px var(--space-2); font-size: var(--text-xs); }
.evac-check svg { width: 14px; height: 14px; }

/* ── Настройки модуля ── пометка «пример», сетка флажков зон, порог «неизвестно» */
.evac-settings { margin-bottom: var(--space-4); }
.evac-example { margin-left: var(--space-2); padding: 1px 6px; font-size: var(--text-xs); font-weight: 500; color: #7A5200; background: #FFF1CC; }
[data-theme="dark"] .evac-example { color: #FFD54F; background: #3A2F12; }
.evac-settings-body { display: flex; flex-wrap: wrap; gap: var(--space-6); padding: var(--space-4) var(--space-5); font-size: var(--text-sm); }
.evac-settings fieldset { border: 0; padding: 0; flex: 1 1 420px; }
.evac-settings legend { margin-bottom: var(--space-2); font-weight: 600; }
.evac-zone-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-1) var(--space-4); }
.evac-zone { display: flex; align-items: baseline; gap: var(--space-2); }
.evac-zone .evac-muted { margin-left: auto; text-align: right; }
.evac-field { display: flex; flex-direction: column; gap: var(--space-2); font-weight: 600; }
.evac-field select { width: max-content; padding: var(--space-1) var(--space-2); }

@media (max-width: 1100px) {
  /* Узкие экраны: полоса хода и карта с очередью — в одну колонку */
  .evac-bar { grid-template-columns: 1fr; }
  .evac-actions { justify-content: flex-start; }
  .evac-main { grid-template-columns: 1fr; }
}

/* ═══ РАЗБОР ИНЦИДЕНТА (views/incident.js) ═══
   Участники — цвета треков «Истории перемещений» (синий, фиолетовый, бирюзовый); красный и жёлтый — только зоны.
   Пропуск координат — штриховка, тревога — красная отметка, принятие — зелёная. */
/* Общий внутренний отступ карточек раздела */
.inc-pad { padding: var(--space-4) var(--space-5); }
/* ── Список тревог для выбора ── слева полоса уровня (красная / жёлтая), справа кнопка «Разобрать» */
.inc-pick { list-style: none; }
.inc-pick-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-divider); border-left: 3px solid var(--rt-red); color: var(--color-text); text-decoration: none; }
.inc-pick-row.level-WARNING { border-left-color: var(--zone-notice); }
.inc-pick-row:hover { background: var(--color-primary-highlight); }
.inc-pick-text { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: var(--text-sm); }
.inc-pick-text b { font-weight: 600; }
.inc-pick-text span, .inc-pick-state { font-size: var(--text-xs); color: var(--color-text-muted); }
.inc-pick-row .btn { padding: 2px var(--space-3); }
.inc-lvl { display: flex; }
.inc-lvl svg { width: 20px; height: 20px; color: var(--rt-red); }
.level-WARNING .inc-lvl svg { color: var(--zone-notice); }

/* Инструменты карточки в шапке: окно ±N мин, CSV, печать */
.inc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.inc-window { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.inc-window select { padding: var(--space-1) var(--space-2); }

/* ── Шапка карточки ── тревога | факты (принятие, окно) | участники с цветами треков */
.inc-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.inc-alarm { display: flex; gap: var(--space-3); align-items: flex-start; }
.inc-alarm b { display: block; font-size: var(--text-base); }
.inc-alarm span { font-size: var(--text-xs); color: var(--color-text-muted); }
.inc-facts { display: flex; flex-direction: column; gap: var(--space-2); }
.inc-facts > div { display: flex; flex-direction: column; font-size: var(--text-sm); }
.inc-facts > div > span { font-size: var(--text-xs); color: var(--color-text-muted); }
.inc-people { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); }
.inc-people li { display: flex; gap: var(--space-2); align-items: flex-start; }
.inc-people li > span:last-child { display: flex; flex-direction: column; }
.inc-people li > span:last-child > span { font-size: var(--text-xs); color: var(--color-text-muted); }
/* Квадрат цвета трека — класс .pb-swatch из playback.css, здесь задаётся только размер */
.inc-people .pb-swatch, .inc-ev .pb-swatch, .inc-lane-name .pb-swatch, .inc-q .pb-swatch { display: inline-block; width: 10px; height: 10px; margin-top: 4px; flex-shrink: 0; }

/* ── Карта и лента ── лента событий фиксированной ширины, прокручивается внутри карточки */
.inc-main { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-4); margin-bottom: var(--space-4); }
.inc-map-card { display: flex; flex-direction: column; min-height: 480px; }
.inc-map { flex: 1; min-height: 430px; }
/* Место тревоги на карте — красный пунктирный круг */
.inc-alarm-point { stroke: var(--rt-red); fill: var(--rt-red); fill-opacity: .2; stroke-dasharray: 3 3; }
.inc-events { display: flex; flex-direction: column; max-height: 540px; }
.inc-ev-list { list-style: none; overflow-y: auto; }
/* Событие ленты — кнопка во всю ширину: время | значок | текст; события до курсора — обычным цветом, после — приглушены */
.inc-ev { display: grid; grid-template-columns: 64px 18px minmax(0, 1fr); gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-4); text-align: left; font-size: var(--text-sm); color: var(--color-text-muted); background: none; border: 0; border-top: 1px solid var(--color-divider); cursor: pointer; }
.inc-ev.is-past { color: var(--color-text); }
.inc-ev:hover { background: var(--color-primary-highlight); }
.inc-ev-time { font-variant-numeric: tabular-nums; font-size: var(--text-xs); padding-top: 2px; }
.inc-ev-icon svg { width: 16px; height: 16px; }
.inc-ev.is-alarm .inc-ev-icon, .inc-ev.is-zone-danger .inc-ev-icon, .inc-ev.level-DANGER .inc-ev-icon { color: var(--rt-red); }
.inc-ev.is-zone-notice .inc-ev-icon, .inc-ev.level-WARNING .inc-ev-icon { color: var(--zone-notice); }
.inc-ev.is-confirm .inc-ev-icon { color: var(--color-success); }
.inc-ev.is-gap .inc-ev-icon { color: var(--color-offline); }
.inc-ev.is-alarm { font-weight: 600; }
.inc-ev-text { display: flex; flex-direction: column; gap: 2px; }
.inc-ev-text > span { display: flex; gap: var(--space-1); align-items: center; font-size: var(--text-xs); color: var(--color-text-muted); }
.inc-ev-text > span .pb-swatch { margin-top: 0; }

/* ── Шкала времени ── слева 200 px под имена дорожек, поверх дорожек overlay с отметками и курсором, ниже ползунок */
.inc-timeline { padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.inc-tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.inc-now { font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.inc-tl-legend { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.inc-tl-legend .inc-zone, .inc-tl-legend .inc-gap { position: static; display: inline-block; width: 14px; height: 10px; }
.inc-tl { position: relative; padding-left: 200px; }
.inc-lanes { display: flex; flex-direction: column; gap: var(--space-2); }
.inc-lane { position: relative; display: flex; align-items: center; height: 22px; }
.inc-lane-name { position: absolute; left: -200px; width: 190px; display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-xs); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.inc-lane-name .pb-swatch { margin-top: 0; }
/* Дорожка участника: серая подложка, поверх — цветные зоны и штриховка пропусков */
.inc-lane-bar { position: relative; flex: 1; height: 14px; background: var(--color-surface-offset); }
.inc-lane-marks .inc-lane-bar { background: none; border-bottom: 1px solid var(--color-divider); }
.inc-zone { position: absolute; top: 0; bottom: 0; }
.inc-zone.is-danger { background: var(--rt-red); }
.inc-zone.is-notice { background: var(--zone-notice); }
/* Пропуск координат — диагональная штриховка цветом «не в сети» */
.inc-gap { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--color-offline) 0 2px, transparent 2px 6px); opacity: .9; }
/* Уведомления участников — тонкие засечки цвета уровня на отдельной дорожке */
.inc-tick { position: absolute; top: 1px; width: 3px; height: 12px; margin-left: -1px; background: var(--color-primary); }
.inc-tick.level-DANGER { background: var(--rt-red); }
.inc-tick.level-WARNING { background: var(--zone-notice); }
/* Отметки «тревога» / «принята» и курсор — поверх всех дорожек; клики проходят сквозь к дорожкам (pointer-events) */
.inc-tl-overlay { position: absolute; left: 200px; right: 0; top: 0; bottom: 34px; pointer-events: none; }
.inc-mark, .inc-cursor { position: absolute; top: -6px; bottom: 0; width: 2px; margin-left: -1px; }
.inc-mark.is-alarm { background: var(--rt-red); }
.inc-mark.is-confirm { background: var(--color-success); }
.inc-mark span { position: absolute; top: -14px; left: 4px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.inc-mark.is-alarm span { color: var(--rt-red); }
.inc-mark.is-confirm span { color: var(--color-success); }
.inc-cursor { background: var(--color-text); width: 2px; }
.inc-range { width: 100%; margin-top: var(--space-3); }
.inc-tl-scale { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-text-faint); font-variant-numeric: tabular-nums; }

/* ── Низ карточки ── полнота данных и форма разбора в две колонки */
.inc-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.inc-q td, .inc-q th { font-size: var(--text-sm); }
.inc-q td.num, .inc-q th.num { text-align: right; font-variant-numeric: tabular-nums; }
.inc-quality p { margin-top: var(--space-3); }
.inc-notes .card-header { justify-content: space-between; }
/* Форма заметок: поля наследуют шрифт страницы, textarea тянется по вертикали */
.inc-form { display: flex; flex-direction: column; gap: var(--space-3); }
.inc-form label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); font-weight: 600; }
.inc-form input, .inc-form textarea { font: inherit; font-weight: 400; padding: var(--space-2); color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); resize: vertical; }

@media (max-width: 1100px) {
  /* Узкие экраны: всё в одну колонку, имена дорожек — в потоке слева от полосы */
  .inc-head, .inc-main, .inc-bottom { grid-template-columns: 1fr; }
  .inc-tl { padding-left: 0; }
  .inc-lane-name { position: static; width: 120px; flex-shrink: 0; }
  .inc-tl-overlay { left: 120px; }
}

/* Печать карточки (PDF): без шапки, меню и элементов управления */
@media print {
  .topbar, .sections-menu, .alarm-toasts, .toast-host, .inc-tools, .inc-range, #inc-play, .mod-stage, .mod-dev, .leaflet-control-container { display: none !important; }
  .page { padding: 0; }
  .inc-main, .inc-bottom, .inc-head { grid-template-columns: 1fr; }
  .card { box-shadow: none; break-inside: avoid; }
  .inc-events { max-height: none; }
}

/* Эвакуация: сценарий симуляции — свёрнутый блок над картой */
.evac-scenario { margin-bottom: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); }
.evac-scenario > summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); font-weight: 600; color: var(--color-primary); cursor: pointer; list-style: none; }
.evac-scenario > summary::-webkit-details-marker { display: none; }
.evac-scenario > summary svg { width: 18px; height: 18px; }
.evac-scenario > summary::after { content: "▸"; transition: transform var(--transition); }
.evac-scenario[open] > summary::after { transform: rotate(90deg); }
.evac-scenario-body { padding: 0 var(--space-5) var(--space-5); font-size: var(--text-sm); line-height: 1.6; max-width: 110ch; }
.evac-scenario-body ol { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0; padding-left: 1.4em; }
.evac-scenario-body ul { margin-top: var(--space-1); padding-left: 1.2em; }
.evac-scenario-body code { font-size: var(--text-xs); }