/* строка слоя: контрол (знак внутри переключателя), название, подпись типа, крестик
   Вынесено из index.html в фазе 3; сворачиваемых разделов с хода 8 нет — один
   список, строки одной формы для точек, зон, линий, меток и стран. Порядок
   подключения в <head> значим: файлы идут ровно в том порядке, в каком эти
   правила шли внутри <style>. */
/* Строка-ведомость: знак различает слой, подпись типа стоит колонкой по правому
   краю. Числа записей в строке нет (замечание владельца 06.09.2026) — счётчик
   живёт в легенде на карте, в справочном блоке слева внизу. */
/* 31px, а не 33 (06.09.2026): владелец попросил чуть плотнее — «буквально 1–2 пикселя на слой».
   Ниже 30 не опускаемся: галочка и крестик перестанут различаться по попаданию.

   Ход 12: заливка под курсором идёт ВО ВСЮ ШИРИНУ панели, а не по колонке текста —
   поэтому отрицательные поля и такой же padding обратно. Боковой отступ панели
   (.sidebar-scroll) — 18px; если он поменяется, эти два числа меняются вместе с ним.
   Засечка слева нарисована внутренней тенью, а не рамкой и не псевдоэлементом:
   рамка сдвинула бы содержимое строки на три пикселя, а по правилу хода текст
   и знак под курсором не двигаются. */
.row {
  display: flex; align-items: center; gap: 10px; height: 31px; cursor: pointer; min-width: 0;
  margin: 0 -18px; padding: 0 18px; box-sizing: border-box;
  transition: background var(--eh-hover-ms) linear, box-shadow var(--eh-hover-ms) linear;
}
.row:hover { background: var(--eh-row-hover); box-shadow: inset var(--eh-notch) 0 0 var(--eh-ink); }
/* Контрол слоя — значок и переключатель в одном (макет «Контрол слоя», вариант 1B
   «Чёрная заливка», решение владельца 04.10.2026; docs/brand/mockups/).

   Форма говорит о типе, заливка — о состоянии. Круг — зона: на карте она одна.
   Квадрат — точки, линии, большие объекты и метки: их сколько угодно. Скруглённый
   квадрат с флагом — страна. Выключен — серый контур, значок своим цветом (у точек —
   цвет пина, у зон — цвет понятия, которое слой меряет). Включён — плашка чернилами,
   значок цвета бумаги: в тёмной теме чернила светлые, бумага тёмная, и выворот
   получается сам, без зеркальных правил.

   До этого в строке стояли две вещи — галочка или кружок 15px и знак рядом (ходы 7
   и 12). Поле ввода осталось настоящим: оно растянуто на всю кнопку, знак лежит
   поверх и указатель не перехватывает — щелчок по знаку попадает в само поле.
   Поэтому мышь, Tab, пробел, стрелки по зонам и экранный чтец работают как раньше.
   Системный переключатель не годится по той же причине, что в ходе 12: кольцо
   выключенного рисует браузер и не отдаёт.

   Цвет значка приходит переменной `--c` на обёртке, а не `style="color"` на самом
   знаке: строчный стиль сильнее правила, и включённый знак не смог бы побелеть. */
.ctl {
  position: relative; flex: none; width: 26px; height: 26px;
  --c: var(--eh-ink);
}
.ctl input {
  position: absolute; inset: 0; margin: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  width: 26px; height: 26px; box-sizing: border-box;
  border: 1.4px solid var(--eh-ctl-off); border-radius: 0;
  background: var(--eh-paper);
  transition: border-color var(--eh-hover-ms) linear, background-color var(--eh-hover-ms) linear;
}
.ctl-zone input { border-radius: 50%; }
.ctl-cty input { border-radius: 6px; }
/* Ход 12 остаётся: под курсором контур выключенного темнеет до чернил. */
.row:hover .ctl input { border-color: var(--eh-ink); }
.ctl input:checked { border-color: var(--eh-ink); background-color: var(--eh-ink); }
.ctl input:focus-visible { outline: 2px solid var(--eh-ink); outline-offset: 2px; }
/* Знак 15px по центру кнопки 26px. Указатель сквозь него уходит в поле: иначе щелчок
   по центру кнопки доставался бы знаку, а у метки ещё и уводил бы карту к ней вместо
   «показать / скрыть». */
.ctl .eh-icon, .ctl .row-flag, .ctl .ctl-flag { position: absolute; pointer-events: none; }
.ctl .eh-icon { left: 5.5px; top: 5.5px; }
.row .ctl .eh-icon { color: var(--c); transition: color var(--eh-hover-ms) linear; }
.row .ctl input:checked + .eh-icon { color: var(--eh-paper); }
/* Флаг страны — полосами 15×10, как в макете: эмодзи-флаг на Windows рисуется парой
   букв, а в чёрной плашке ещё и теряется. Полосы есть у шести стран первого этапа;
   у остальных — прежний эмодзи по центру кнопки. */
.ctl .ctl-flag {
  left: 5.5px; top: 8px; width: 15px; height: 10px;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.18);
}
.ctl .row-flag { left: 0; top: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.row .row-name {
  flex: 1;
  min-width: 0;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--eh-ink);
}
/* Выключенный слой — вторичным цветом, включённый — чернилами (8A). */
.row.off .row-name, .row.off .row-date { color: var(--eh-body); }
/* Совпавшая часть в поиске — жирным (8E). */
.row .hl { font-weight: 600; }
/* Подпись, чем слой рисуется: точки, зоны, линии, мое; у стран — сколько слоёв. */
.row .row-tag {
  flex: none;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--eh-faint);
}
.row .row-date {
  flex: none; min-width: 42px; text-align: right;
  font-family: 'Jost', system-ui, sans-serif; font-size: 11.5px; color: var(--eh-faint);
  font-variant-numeric: tabular-nums;
}
.row .row-note { flex: none; font-size: 11.5px; color: var(--eh-faint); }
/* Флаг остаётся эмодзи: это данные о стране, а не знак интерфейса. Цвет всё равно
   задаётся: на большинстве машин эмодзи-флаг цветной и цвет текста не берёт, но
   там, где цветного флага в системе нет (Windows рисует его парой букв), глиф
   падает на currentColor — и без этой строки он был бы браузерным чёрным, мимо
   палитры, как и знаки слоёв до 12.09.2026. */
.row .row-flag { flex: none; font-size: 14px; line-height: 1; color: var(--eh-ink); }
/* Знак слоя. Точечные наследуют цвет слоя (тот же, что у пина), тепловые — чернила:
   цвет тепловой карты живёт в градиенте, дублировать его в списке нечем. */
.eh-icon { width: 15px; height: 15px; flex: none; overflow: visible; }
/* «Чернила» знака — токен палитры, а не браузерный чёрный. Знак рисуется
   currentColor, а цвета строке не задавал никто: в светлой теме он приходил от
   `body` как #000 и был чернее любого другого чёрного в панели (чернила — #1a1a1a),
   в тёмной `body` цвет задан, и знак шёл за темой. Оттого разнобой и был виден
   только в светлой: знак зоны, метки и страны не совпадал ни с именем строки,
   ни с чем-либо ещё в колонке. Правило цветные точечные слои не трогает — у них
   цвет стоит в `style=`, он сильнее класса; у строки без данных сильнее её
   собственное правило ниже. Здесь же и остальные списки панели: «Моё» и «Страны». */
.row .eh-icon { color: var(--eh-ink); }
/* Слой без данных не сломан — данных просто нет; порча текста читалась как «сломано». */
.row.unavailable {
  color: var(--eh-faint);
  cursor: not-allowed;
}
.row.unavailable .row-name { color: var(--eh-faint); }
.row.unavailable .ctl .eh-icon { color: #c9c4bb; }
.row.unavailable .ctl input { pointer-events: none; }
.row.unavailable .ctl { opacity: 0.55; }
.row.unavailable:hover .ctl input { border-color: var(--eh-ctl-off); }
/* Страна сверх предела (4 из 4): кнопка как у выключенной, название гаснет, курсор
   «нельзя», подсказка в title — так в макете. Контур под курсором не темнеет:
   потемнение обещает, что щелчок сработает. */
.row.full { cursor: not-allowed; }
.row.full .row-name { color: var(--eh-ctl-blocked); }
.row.full .ctl input { cursor: not-allowed; }
.row.full:hover .ctl input { border-color: var(--eh-ctl-off); }
/* Крестик — убрать слой (гасит и убирает из обзора «Все»). Где крестика у строки
   нет, стоит пустая распорка той же ширины, чтобы правый край держал колонку. */
.row-x, .row-x-slot { flex: none; width: 14px; box-sizing: border-box; }
.row-x {
  padding: 0; margin: 0;
  border: none; background: none; cursor: pointer;
  color: var(--eh-x); font-size: 14px; line-height: 1;
  transition: color var(--eh-hover-ms) linear;
}
/* Ход 12: под курсором крестик чёрный, а не красный. Красный читался как «удалить
   насовсем», а крестик слоя только убирает строку из обзора. */
.row-x:hover { color: var(--eh-ink); }
/* Исключение — крестик метки: он удаляет её насовсем, и это сигнал, а не действие. */
.row-x[data-flag-act="delete"]:hover { color: var(--eh-danger); }