/* Общие CSS-переменные, сброс стилей и базовые компоненты для dashboard и video
 *
 * Тем две, и обе живут ЗДЕСЬ: тёмная в `:root`, светлая в
 * `:root[data-theme="light"]`. Атрибут ставит СЕРВЕР по куке `pano_theme`
 * (`scoping.account_context` → `<html data-theme="…">`), а не скрипт в теле
 * страницы: общего базового шаблона в проекте нет, скрипту пришлось бы стоять
 * внутри `<body>`, то есть выполняться уже ПОСЛЕ того, как браузер покрасил
 * фон тёмным. Каждая загрузка у светлого пользователя начиналась бы со вспышки.
 *
 * Правило простое: цвет в правилах пишется ТОЛЬКО через `var(--…)`. Литерал,
 * рассчитанный на тёмный фон, во второй теме молча промахивается — а хуже
 * всего полупрозрачные накладки: белое с малой альфой на светлом не видно
 * вовсе. Ради них заведены `--hover`, `--th-bg`, `--overlay`, `--pop`,
 * `--shadow`, `--grid`, `--tick`.
 */
:root {
  /* Полосы прокрутки, поля ввода, выпадающие списки и подложка окна рисуются
     БРАУЗЕРОМ, и ни одна наша переменная до них не достаёт: пока тема не
     объявлена, он красит их по своему умолчанию — то есть светлыми поверх
     тёмного кабинета. `color-scheme` и есть то единственное место, где ему об
     этом говорят; менять её надо ВМЕСТЕ с набором токенов ниже. */
  color-scheme: dark;

  --bg: #0A0F1E;
  --surface: #111827;
  --card: #131929;
  --border: #1E2D4A;
  --border2: #253553;
  --text: #E2E8F0;
  --muted: #64748B;
  --accent: #3B82F6;
  --accent-hover: #2563EB;
  --green: #10B981;
  --amber: #F59E0B;
  --red: #EF4444;
  --purple: #7C3AED;
  --teal: #06B6D4;

  --hover: rgba(255,255,255,.02);
  --th-bg: rgba(0,0,0,.15);
  --overlay: rgba(0,0,0,.7);
  --pop: #0d1524;
  --shadow: 0 12px 32px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-sm: 0 8px 24px rgba(0,0,0,.4);
  --grid: rgba(255,255,255,0.05);
  --tick: #64748B;
  --dot-glow: 0 0 5px var(--green);

  /* Вторая плоскость: поля ввода и вложенные блоки ВНУТРИ карточки.
     Эти два имени уже используются в retrans.css (11 правил) и gate.css, но
     нигде не были определены — то есть `var(--card-2, #0F172A)` всегда брал
     запасное значение и оставался тёмным в ОБЕИХ темах. Выглядело как
     тематизированный код, работало как литерал; поиск литералов такого не
     находит. */
  --card-2: #0F172A;
  --bg-2: #0F172A;

  /* Заливки и рамки плашек. Своими токенами, а не `color-mix`: тот
     поддерживается не везде, а промах даёт НЕВИДИМУЮ плашку — отказ, который
     на глаз выглядит как пропавший элемент. */
  --accent-tint: rgba(59,130,246,.10);
  --green-tint: rgba(16,185,129,.15);
  --green-edge: rgba(16,185,129,.30);
  --amber-tint: rgba(245,158,11,.15);
  --red-tint: rgba(239,68,68,.15);
  --red-soft: rgba(239,68,68,.05);
  --red-edge: rgba(239,68,68,.40);

  /* Onest — ближайший свободный родственник SF Pro, кириллица у него родная, а
     не дорисованная. JetBrains Mono читаемее IBM Plex в мелких цифрах, которых
     здесь много. Оба лежат у себя (static/fonts), CDN в проекте запрещён.
     Inter и IBM Plex остаются в fonts.css запасными — на случай отката. */
  --mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  --sans: 'Onest', 'Inter', system-ui, sans-serif;
  --sidebar-w: 220px;

  /* Скругления и стекло — одной шкалой, а не литералами по десятку файлов.
     Величины «эппловские»: у них радиусы заметно крупнее привычных 6–8. */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --blur: 18px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.28);
  /* Стекло панелей поверх карт и видео: в тёмной теме тёмное, в светлой светлое.
     Одно имя вместо восьми разных rgba по файлам. */
  --glass: rgba(17,24,39,.86);
  --glass-edge: rgba(255,255,255,.10);
}

/* «Дневной пост» — холодный сине-серый: тот же характер, что у тёмной темы,
   только на свету. Подложка серо-синяя, панели белые — разделение планов
   держится на ней, а не на тенях.

   Семантические цвета притемнены НЕ для красоты: #10B981 на белом даёт около
   2,5:1 и не проходит по читаемости, #059669 — проходит. Цель AA (4.5:1). */
:root[data-theme="light"] {
  color-scheme: light;          /* см. пояснение у тёмной темы выше */

  /* Подложка ЗАМЕТНО серее белого, панели белые — так делает сама Apple, и так
     же снят упрёк «слишком бело»: белое остаётся, но его меньше и оно всегда
     что-то значит (панель, поле, кнопка), а не заливает экран. */
  --bg: #E9EDF3;
  --surface: #FFFFFF;
  --card: #FFFFFF;
  --border: #DCE3EC;
  --border2: #C7D2E0;
  --text: #0F172A;
  --muted: #5A6B85;
  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  /* Замерено, а не подобрано на глаз (WCAG 2.1, цель AA 4.5:1 на белом):
     #059669 давал 3,77:1, #D97706 — 3,19:1, то есть «Online» и предупреждения
     не дотягивали для мелкого текста. На тон глубже — 5,48 и 5,02. */
  --green: #047857;
  --amber: #B45309;
  --red: #DC2626;
  --purple: #6D28D9;
  --teal: #0891B2;

  --hover: rgba(15,23,42,.035);
  --th-bg: #EEF2F7;
  --overlay: rgba(15,23,42,.45);
  --pop: #FFFFFF;
  --shadow: 0 8px 24px rgba(15,23,42,.10), 0 0 0 1px rgba(15,23,42,.06);
  --shadow-sm: 0 6px 18px rgba(15,23,42,.10);
  --grid: rgba(15,23,42,.08);
  --tick: #5A6B85;
  /* Свечение точки «в сети» на белом читается грязным пятном, а не свечением. */
  --dot-glow: none;

  /* Альфа чуть выше тёмной: 15 % рассчитаны на почти чёрное поле, а на белом
     той же плашки практически не видно. */
  --accent-tint: rgba(37,99,235,.10);
  --green-tint: rgba(4,120,87,.12);
  --green-edge: rgba(4,120,87,.35);
  --amber-tint: rgba(180,83,9,.14);
  --red-tint: rgba(220,38,38,.12);
  --red-soft: rgba(220,38,38,.06);
  --red-edge: rgba(220,38,38,.35);

  /* Вторая плоскость на свету — не белая, иначе поле ввода не отличить от
     карточки, на которой оно лежит. */
  --card-2: #F4F6FA;
  --bg-2: #F4F6FA;
  --shadow-card: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.07);
  /* Светлое стекло: панели над картой не должны затемнять её. */
  --glass: rgba(255,255,255,.82);
  --glass-edge: rgba(15,23,42,.08);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  /* 15 px, а не 14: у Apple основной текст крупнее, и мелкий кегль был главной
     причиной, по которой интерфейс читался «плотным». */
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

.layout { display: flex; min-height: 100vh; }
.main { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-width: 0; }
.content { padding: 20px 24px; flex: 1; }

.live-badge { display: flex; align-items: center; gap: 5px; background: var(--green-tint); border: 1px solid var(--green-edge); border-radius: 20px; padding: 4px 10px; color: var(--green); font-size: 11px; font-weight: 500; white-space: nowrap; }

/* ── Шипящий телевизор: экран там, где нет кадра ─────────────────────────────
 *
 * Живёт ЗДЕСЬ, а не в video.css, потому что мест таких два и они в разных
 * файлах: плитка видеостены (`.cam-offline`) и кадр камеры на КПП
 * (`.gt-view.is-off`), а gate.css видеостену не подключает. Две копии
 * означали бы, что «нет сигнала» выглядит по-разному в зависимости от того,
 * с какой страницы смотреть.
 *
 * Экран остаётся ТЁМНЫМ в обеих темах: телевизор со снегом не бывает белым.
 */
:root {
  /* Испытательная таблица вместо снега. Отдельным файлом, а не data-URI:
     внутри есть кириллица (подписи мер), а её в data-URI пришлось бы
     кодировать побайтно — молчаливая поломка при первой же правке. */
  /* Метка версии нужна и картинке: статика отдаётся `immutable` на 30 суток,
     и правка таблицы иначе не доехала бы до вернувшегося клиента. */
  --tv-card: url("/static/img/testcard.svg?v=20260828");
  /* Чисел плашки здесь БОЛЬШЕ НЕТ. «Объекты» кладут поверх таблицы свою такую
     же плашку со строкой состояния, и раньше её место считалось в пикселях по
     этим токенам, вручную повторяя арифметику `background-size: cover`. Теперь
     плашка нарисована вложенным SVG с тем же листом 1280×720 и правилом
     `xMidYMid slice` — совмещает их браузер, и промахнуться нечему.
     Источник чисел — сам `static/img/testcard.svg`; десктоп держит их копию в
     `config.TESTCARD_BAR`, и сверяет копию с оригиналом самотест. */
}

/* Кадровая развёртка — единственное, что осталось подвижным: медленная полоса
   сверху вниз. Таблица сама по себе неподвижна, и без неё экран читается как
   застывшая картинка ошибки, а не как включённый телевизор. Одна анимация на
   экран вместо прежних трёх — и по расходу это уже ничто. */
@keyframes tvRoll { 0% { top: -30%; } 100% { top: 100%; } }

/* На скрытой вкладке гасим и её. Селекторы перечислены явно, а не через общий
   класс: состояние «нет кадра» на КПП — это модификатор `.is-off` на самом
   кадре, отдельного элемента там нет, и ради одного класса пришлось бы править
   frames.js. */
body.pano-hidden .cam-offline::after,
body.pano-hidden .gt-view.is-off::before,
body.pano-hidden .gt-cam-view.is-off::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .cam-offline::after,
  .gt-view.is-off::before, .gt-cam-view.is-off::before { animation: none !important; }
}
.pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.85)} }