/* токены, каркас панели, верх панели (поиск и фильтры), список, метки в панели
   Вынесено из index.html в фазе 3; переписано под ходы 7 и 8 дизайн-документа
   «Evrohod Panel» (замечания владельца 06.09.2026). Порядок подключения в <head>
   значим: файлы идут ровно в том порядке, в каком эти правила шли внутри <style>. */
/* ===== Токены панели =====
   Правило двух красок: чёрная держит структуру, красная отвечает за действие. Синего
   #2a71d0 в интерфейсе нет — он читался как дефолт любого приложения. Остальной цвет
   принадлежит данным на карте. С хода 7 красная краска в панели одна — кнопка
   «Написать по рекламе»; галочки, радио и кнопки продукта — чернилами. */
:root {
  --eh-ink:        #1a1a1a;  /* текст, линейка раздела, знаки тепловых слоёв */
  --eh-body:       #58554e;  /* вторичный текст, выключенные слои */
  --eh-muted:      #a8a49b;  /* счётчики разделов */
  --eh-faint:      #b3aea4;  /* годы, «нет данных», источники */
  --eh-line:       #e0dcd4;  /* волосок: чипы, поиск, кнопка, переключатель */
  --eh-line-2:     #f0ede7;  /* самый светлый разделитель */
  --eh-hover:      #faf9f7;  /* светлая подложка блока: заметка у формы метки */
  --eh-action:     #d33a20;  /* КРАСНАЯ КРАСКА: только действие */
  --eh-action-hi:  #a72d16;  /* её hover (ход 12) */
  --eh-danger:     #c0392b;  /* ошибки и удаление — сигнал, а не действие */
  --eh-head:       #8f8b83;  /* подписи над списком, заметки, подписи полей */
  /* ===== Ход 12: наведения =====
     Два правила на всю панель. Плоское (строка списка) под курсором заливается
     тёплым серым и получает чёрную засечку слева. Обведённое (чип, кнопка, знак
     в рамке) заливается чернилами и выворачивается в белое — наведение показывает,
     чем элемент станет после клика; уже чёрное, наоборот, белеет. Переход один
     на всю панель: 90 мс линейно, только цвет — ничего не растёт и не всплывает. */
  --eh-paper:      #fff;     /* подложка панели: в неё выворачивается чёрное */
  --eh-row-hover:  #f2efe9;  /* заливка строки под курсором */
  --eh-notch:      3px;      /* чёрная засечка слева у строки под курсором */
  --eh-rule:       #c9c5bd;  /* линейка поиска в покое (под курсором — чернила) */
  --eh-x:          #d8d4cc;  /* крестик в покое (под курсором — чернила) */
  --eh-ctl-off:    #d6d1c8;  /* контур выключенного контрола слоя (макет «Контрол слоя») */
  --eh-ctl-blocked:#c9c5bd;  /* название страны сверх предела «не больше 4» */
  --eh-hover-ms:   90ms;     /* один переход на всю панель */
}

html, body {
  height: 100%;
  margin: 0;
  font-family: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Страница целиком скроллиться не должна — скроллится только панель. Без этого на
     iPad/iOS вся вёрстка ездит по вертикали вместе с панелями Safari. */
  overflow: hidden;
  overscroll-behavior: none;                         /* и никакой «резинки» при протяжке */
}

#app {
  display: grid;
  grid-template-columns: 1fr 360px;
  height: 100vh;
  /* 100vh на iOS считается по виду с убранными панелями Safari, поэтому фактически больше
     видимой области → появляется вертикальный скролл. 100dvh меряет реальный вид. */
  height: 100dvh;
  width: 100%;                                       /* не 100vw: тот включает ширину скроллбара */
  overflow: hidden;                                  /* панель уезжает за правый край */
  transition: grid-template-columns 0.22s ease;
}
#app.sidebar-collapsed { grid-template-columns: 1fr 0; }
/* Снимается в первом rAF — иначе панель «уезжает» на глазах при загрузке страницы. */
#app.no-anim, #app.no-anim #sidebar, #app.no-anim .sidebar-handle { transition: none; }

#map { position: relative; width: 100%; height: 100%; }
/* Прицел режима метки — красная цель из макета 7D (замечание владельца 06.09.2026:
   «крестик-цель возьми, но карту не меняй»): это курсор, а не что-то на карте.
   Белый кант под красным держит цель на любой подложке; запасной курсор —
   системный crosshair. И над пинами, линиями и заливками тоже: Leaflet ставит
   там «руку», и режим метки ровно над тем, куда собрались кликнуть, выглядел
   выключенным. */
#map.adding-flag,
#map.adding-flag .leaflet-grab,
#map.adding-flag .leaflet-interactive,
#map.adding-flag .leaflet-marker-icon {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 48 48' fill='none' stroke-linecap='round'%3E%3Cg stroke='%23fff' stroke-width='6'%3E%3Ccircle cx='24' cy='24' r='9'/%3E%3Cpath d='M24 4v9M24 35v9M4 24h9M35 24h9'/%3E%3C/g%3E%3Cg stroke='%23d33a20' stroke-width='2.5'%3E%3Ccircle cx='24' cy='24' r='9'/%3E%3Cpath d='M24 4v9M24 35v9M4 24h9M35 24h9'/%3E%3C/g%3E%3C/svg%3E") 16 16, crosshair;
}
/* В режиме метки подсказки по наведению (линии ж/д, заливки) не показываются:
   человек целится в точку, а не читает про линию под курсором — владелец
   назвал это «синий квадратик появляется». */
#map.adding-flag .leaflet-tooltip { display: none; }

#sidebar {
  /* Панель целиком не прокручивается (замечание владельца 05.09.2026): марка, поиск
     и фильтры стоят сверху, низ — «Поставить метку», реклама, кнопка письма —
     прибит, прокручивается только список (.sidebar-scroll). */
  overflow: hidden;
  /* Блок «Ссылка на этот вид» накрывает колонку изнутри (.share-sheet): отсюда
     position, а isolation держит его слои при себе и не пускает спорить с картой. */
  position: relative;
  isolation: isolate;
  background: #fff;
  box-shadow: -2px 0 12px rgba(0,0,0,0.08);
  padding: 0;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  /* Фиксированная ширина: колонка схлопывается до 0, а содержимое не переливается. */
  width: 360px;
  box-sizing: border-box;
  flex: none;
}
/* Верх панели: блок метки (7D/7E), поиск, фильтры. Не сжимается и не прокручивается:
   при длинном списке место отдаёт только середина (замечание владельца 06.09.2026 —
   у шапки появлялся свой скролл, потому что верх ужимался наравне со списком).
   Одно исключение — форма метки (7E) в низком окне: список в этом состоянии спрятан,
   и верх прокручивается сам, не отнимая низ. */
.panel-top {
  flex: none;
  padding: 4px 18px 0;
  background: #fff;
  /* Верх лежит поверх списка, и его фон продлён на пиксель вниз: граница
     прокручиваемой середины приходится на дробный пиксель, и без этого из-под
     фильтров выглядывал волосок уезжающей строки. */
  position: relative;
  z-index: 4;
  box-shadow: 0 1px 0 #fff;
}
#sidebar.editing .panel-top { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Докрутив середину до конца, не утягиваем за собой страницу под ней. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 18px 14px;
}
.sidebar-foot {
  flex: none;
  /* Прибит к низу и в форме метки (7E), где список спрятан целиком: без этого
     свободное место оставалось под подвалом, и он повисал посреди панели
     (замечание владельца 06.09.2026 — «подвал поплыл»). */
  margin-top: auto;
  padding: 8px 18px 16px;
}
.sidebar-foot #add-flag { margin: 0 0 12px; }

/* ===== Язычок: свернуть / развернуть панель ===== */
.sidebar-handle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  /* см. комментарий у .legend — поверх всех Leaflet-pane */
  z-index: 10000;
  width: 34px;
  height: 60px;
  padding: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-right: none;
  border-radius: 6px 0 0 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: #555;
}
.sidebar-handle:hover { background: #f5f5f5; color: #222; }
.sidebar-handle { display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* Направление — единственное, что зависит от состояния панели. */
.ship-dir { display: block; line-height: 0; }
.ship { display: block; width: 28px; height: auto; overflow: visible; }
/* Судно всегда смотрит в одну сторону — язычок не флюгер, направление ничего не сообщает.
   Состояние говорит цветом: панель свёрнута (на экране одна карта) — судно красное,
   это единственный оставшийся вход обратно. Панель открыта — судно чернилами, чтобы
   не спорить с красной кнопкой метки. Вода в обоих случаях цвета чернил. */
.ship-hull { color: var(--eh-ink); transition: color 0.22s ease; }
.ship-light { stroke: currentColor; }
.ship-wave { stroke: var(--eh-ink); }
#app.sidebar-collapsed .ship-hull { color: var(--eh-action); }
html.dark #app.sidebar-collapsed .ship-hull { color: #e04a2e; }
@media (prefers-reduced-motion: reduce) {
  .ship-hull { transition: none; }
}
.ship-hull { transform-origin: 34px 40px; }   /* центр корпуса — точка качки */
.sidebar-handle.sailing .ship-hull { animation: ship-bob 0.62s ease-in-out; }
.sidebar-handle.sailing .ship-wave { animation: ship-wave 0.62s linear; }
@keyframes ship-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  20%      { transform: translateY(-3px) rotate(-9deg); }
  48%      { transform: translateY(2px) rotate(7deg); }
  74%      { transform: translateY(-1.4px) rotate(-3.5deg); }
}
@keyframes ship-wave {
  from { transform: translateX(0); }
  to   { transform: translateX(-34px); }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-handle.sailing .ship-hull,
  .sidebar-handle.sailing .ship-wave { animation: none; }
}
/* Марка стоит над прокручиваемой серединой: список под ней длинный, а знак — точка
   возврата, он не должен уезжать вместе со строками. */
.brand-bar {
  flex: none;
  padding: 16px 18px 12px;
  background: #fff;
  /* Ход 9: марка слева, шаринг и тема справа, обе группы по НИЖНЕЙ линии слова.
     По центру блока кнопки висели бы над волной без опоры. */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
/* Логотип (static/css/brand.css) — по нижней линии строки, вместе с кнопками справа. */
.brand-bar > .brand { align-self: flex-end; }
/* Ход 12: рамка ОДНА на все знаки, внутри они разделены линейками. Раньше это были
   отдельные кнопки через зазор, и группа читалась как несколько разных вещей. Рамка
   поднята над волной полем margin, а не padding: padding ушёл бы внутрь рамки
   и сделал бы её выше знаков. */
.brand-actions {
  flex: none;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--eh-line);
  /* Оптическая посадка на ту же линию, где кончается слово: у h2 снизу 12px воды. */
  margin-bottom: 5px;
}
/* Прямой угол: круглых элементов в панели нет — круг живёт внутри знаков и в марке. */
.brand-act {
  width: 28px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 0; background: var(--eh-paper);
  cursor: pointer; color: var(--eh-head);
  transition: background var(--eh-hover-ms) linear, color var(--eh-hover-ms) linear;
}
/* Линейка между знаками — та же, что у рамки; отдельного разделителя в разметке нет.
   Оба `:not([hidden])` обязательны: «вернуть свой набор» стоит первым и обычно
   спрятан, и без них линейка рисовалась бы у левого края рамки, перед шарингом. */
.brand-act:not([hidden]) + .brand-act:not([hidden]) { border-left: 1px solid var(--eh-line); }
.brand-act svg { width: 14px; height: 14px; }
/* Обведённое под курсором заливается чернилами и выворачивается в белое. */
.brand-act:hover { background: var(--eh-ink); color: var(--eh-paper); }
.brand-act:disabled { opacity: .35; cursor: default; }
.brand-act:disabled:hover { background: var(--eh-paper); color: var(--eh-head); }
.brand-act[hidden] { display: none; }
.brand-act:focus-visible { outline: 2px solid var(--eh-ink); outline-offset: 2px; }
/* Залита та кнопка, которая сейчас решает: раскрытый шаринг, «авто» или выбранная
   руками тема. То же правило, что у включённого фильтра. Под курсором она, наоборот,
   белеет (ход 12): рамка остаётся, размер не меняется, и наведение показывает, чем
   кнопка станет после клика. */
.brand-act.on { background: var(--eh-ink); color: var(--eh-paper); }
.brand-act.on:hover { background: var(--eh-paper); color: var(--eh-ink); }
/* Шаринг — единственный знак, который залит и в покое: он один выносит наружу
   (12B). Раскрытый вывернут, и под курсором возвращается к чёрному. */
#share-toggle { background: var(--eh-ink); color: var(--eh-paper); }
#share-toggle:hover, #share-toggle.on { background: var(--eh-paper); color: var(--eh-ink); }
#share-toggle.on:hover { background: var(--eh-ink); color: var(--eh-paper); }
/* Стрелка «вернуть свой набор» встаёт на место шаринга и ЗАЛИТА красным, знак белый
   (макет «Евроход — share», блок 11A; замечание владельца 12.09.2026 — до этого был
   красный знак на прозрачном и терялся между чёрными значками шапки). Единственное
   красное в шапке говорит «ты не у себя» (docs/BRAND.md §11). Своего размера знаку больше
   не нужно: 14px, как у соседей, — на заливке он и так крупнее прежнего.
   Заливка одна на обе темы, тёмная её не переопределяет; белизну знака там
   приходится повторить — `html.dark .brand-act` весит больше (theme.css). */
.brand-act.link-back { background: var(--eh-action); color: #fff; }
.brand-act.link-back:hover { background: var(--eh-action-hi); color: #fff; }

/* ===== Блок «Ссылка на этот вид» =====
   Замечание владельца 12.09.2026: блок не сдвигает колонку, а накрывает её слоем
   с размытием в цвет темы; карта остаётся как была. На широком экране блок стоит
   сверху — «Скопировать» оказывается рядом со значком, на который только что нажали;
   на телефоне снизу, под пальцем (responsive.css). Рамки нет: заголовок, ссылка,
   кнопка и подпись стоят по полям колонки, как поиск и фильтры под ними. */
.share-sheet {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column; justify-content: flex-start;
  background: rgba(255,255,255,0.74);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.share-sheet[hidden] { display: none; }
.share-sheet.open { opacity: 1; }
/* Шапка блока встаёт на ту же строку, где стоят значки шапки: крестик приходится
   ровно в тот угол, куда человек уже смотрит. */
.share-card {
  padding: 21px 18px 20px;
  transform: translateY(-10px);
  transition: transform 0.22s ease;
}
.share-sheet.open .share-card { transform: none; }
/* Уход. Быстрый — крестик, Esc, клик мимо. Неспешный (`slow`) — после «Скопировано»:
   человек успевает увидеть, что ссылка у него, и блок спокойно отъезжает. */
.share-sheet.leaving { transition: opacity 0.22s ease; }
.share-sheet.leaving .share-card { transform: translateY(-14px); transition: transform 0.22s ease; }
.share-sheet.leaving.slow { transition: opacity 0.72s ease; }
.share-sheet.leaving.slow .share-card { transition: transform 0.72s cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion: reduce) {
  .share-sheet, .share-card { transition: none; }
}
.share-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 24px;
}
.share-mark {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--eh-head);
}
/* Крестик стоит в том же столбце, что крайний значок шапки, и набран как у плашки
   «в этом окне пусто»: тот же размер, тот же цвет. */
.share-x {
  flex: none; width: 26px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: 19px; line-height: 1; color: var(--eh-faint);
}
.share-x:hover { color: var(--eh-ink); }
/* Ссылка короткая и печатается одной строкой. Длинная — запасной путь, когда код
   завести не удалось: тем же местом, помельче и с многоточием, чтобы блок не рос. */
.share-url {
  margin: 13px 0 14px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 15px; line-height: 1.4; color: var(--eh-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-user-select: all; user-select: all;
}
.share-url.pending { color: var(--eh-faint); }
.share-url.long { font-size: 11.5px; }
/* Вторая красная кнопка в панели. Правило docs/BRAND.md §11 переписано: красным
   помечены оба действия, выносящие наружу, — письмо нам и ссылка от вас. */
.share-copy {
  display: block; width: 100%;
  padding: 11px; border: none; border-radius: 0; cursor: pointer;
  background: var(--eh-action); color: #fff;
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 500; font-size: 13px;
  letter-spacing: 0.09em; text-transform: uppercase;
}
.share-copy:hover { background: var(--eh-action-hi); }
/* Ссылка ещё не пришла — копировать нечего. */
.share-copy:disabled { opacity: .5; cursor: default; }
.share-copy:disabled:hover { background: var(--eh-action); }
.share-copy:focus-visible, .share-x:focus-visible {
  outline: 2px solid var(--eh-ink); outline-offset: 2px;
}
.share-note {
  margin: 11px 0 0;
  font-size: 12.5px; line-height: 1.45;
  color: var(--eh-body);
}
/* Логотип — знак, слово, волна, «отчаливание» — живёт в static/css/brand.css: он общий
   для карты и страниц сайта. */

/* ===== Поиск (ход 8): строка на чёрной линейке, знак лупы слева, крестик справа =====
   Поле — не коробка: рамка вокруг ввода добавляла бы второй контур там, где линейка
   уже держит структуру. С набранным запросом линейка становится вдвое толще (8E). */
/* Ход 12: в покое линейка светлая (#C9C5BD), под курсором темнеет до чернил —
   поле отзывается раньше клика. Курсор текстовый на всей полосе, а не только
   над самим input: промах мимо тонкой строки не должен ощущаться промахом. */
.search-wrap {
  display: flex; align-items: center; gap: 9px;
  padding-bottom: 8px; border-bottom: 1px solid var(--eh-rule);
  cursor: text;
  transition: border-color var(--eh-hover-ms) linear;
}
.search-wrap:hover { border-bottom-color: var(--eh-ink); }
.search-wrap:focus-within { border-bottom-color: var(--eh-ink); border-bottom-width: 2px; padding-bottom: 7px; }
.search-wrap .search-icon { color: var(--eh-ink); }
.panel-search {
  flex: 1; min-width: 0; padding: 0; border: none; border-radius: 0; background: transparent;
  font: inherit; font-size: 13.5px; color: var(--eh-ink);
}
.panel-search::placeholder { color: var(--eh-muted); transition: color var(--eh-hover-ms) linear; }
.search-wrap:hover .panel-search::placeholder { color: var(--eh-head); }
.panel-search:focus { outline: none; box-shadow: none; }
.search-clear {
  flex: none; border: none; background: none; padding: 0 2px; cursor: pointer;
  color: var(--eh-x); font-size: 15px; line-height: 1;
  transition: color var(--eh-hover-ms) linear;
}
.search-clear:hover { color: var(--eh-ink); }
.search-clear[hidden] { display: none; }

/* ===== Фильтры: пять слов в одну строку, без знаков (замечание владельца 06.09.2026).
   Прямой угол, как у всего набора; включённый — чернилами. Число справа от слова:
   у «Стран» — сколько направлений включено, при поиске — сколько совпадений;
   фильтр без совпадений гаснет (8E). ===== */
.filters { display: flex; gap: 5px; padding: 12px 0 14px; }
.filter {
  flex: 0 1 auto; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 4px 7px; border: 1px solid var(--eh-line); border-radius: 0; background: #fff;
  color: var(--eh-body); cursor: pointer; white-space: nowrap; line-height: 1.3;
  font-family: 'Jost', system-ui, sans-serif; font-weight: 500; font-size: 11px;
  letter-spacing: 0.07em; text-transform: uppercase;
}
/* Ход 12: чип — обведённый элемент, и под курсором он заливается чернилами.
   Включённый чип уже чёрный, поэтому белеет: рамка остаётся на месте, размер
   не меняется, и наведение показывает, чем чип станет после клика. */
.filter { transition: background var(--eh-hover-ms) linear, color var(--eh-hover-ms) linear, border-color var(--eh-hover-ms) linear; }
.filter:hover { background: var(--eh-ink); color: var(--eh-paper); border-color: var(--eh-ink); }
.filter.active { background: var(--eh-ink); color: #fff; border-color: var(--eh-ink); }
.filter.active:hover { background: var(--eh-paper); color: var(--eh-ink); }
/* Кольцо фокуса с клавиатуры — чернилами, а не синим браузера: синего в панели нет. */
.filter:focus-visible, .list-act:focus-visible, .row-x:focus-visible, .sym-opt:focus-visible,
.flag-state-cancel:focus-visible, .search-clear:focus-visible {
  outline: 2px solid var(--eh-ink); outline-offset: 2px;
}
.filter.empty { color: var(--eh-faint); }
.filter .filter-n { font-weight: 400; letter-spacing: 0; color: var(--eh-faint); }
/* Число на залитом чипе — той же краской, что и слово, но вполсилы: и когда чип
   залит выбором, и когда он залит под курсором. */
.filter.active .filter-n, .filter:hover .filter-n { color: var(--eh-paper); opacity: 0.65; }
.filter.active:hover .filter-n { color: var(--eh-faint); opacity: 1; }
.filter .filter-n[hidden] { display: none; }

/* ===== Список: подпись над списком, линейка между включённым и остальным =====
   Шапка прибита к верху списка во всех фильтрах (замечание владельца 06.09.2026):
   правило раздела и его действие («Выключить все», «Выключить», «Скрыть все»,
   «Не больше 4») не должны уезжать вместе со строками. Отрицательные поля —
   чтобы белая подложка перекрывала и боковые отступы .sidebar-scroll, иначе
   строки просвечивают в зазоре по краям. */
.panel-body { padding-top: 2px; }
.list-head {
  position: sticky; top: 0; z-index: 3; background: #fff;
  display: flex; align-items: baseline; gap: 8px;
  margin: 0 -18px; padding: 4px 18px 6px;
  font-family: 'Jost', system-ui, sans-serif; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--eh-head);
}
.list-head > span { min-width: 0; }
.list-act {
  margin-left: auto; flex: none; border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap;
  color: var(--eh-body); border-bottom: 1px solid #d6d2ca;
}
.list-act:hover { color: var(--eh-ink); border-bottom-color: var(--eh-ink); }
.list-act[data-list-action="countries-limit"] { color: var(--eh-faint); border-bottom: none; cursor: default; }
.list-rule { height: 1px; background: var(--eh-line); margin: 12px 0 4px; }
/* Смена слоя двигает строки (slideRows в sidebar.js): включённая всплывает над
   линейку, погашенная опускается. Пока строка едет, она непрозрачна и лежит поверх
   соседей — иначе тексты двух встречных строк накладываются. Зона, которую вытеснила
   только что включённая, подсвечена и гаснет за пару секунд: в «Все» зоны стоят
   флажками, и без этого вторая галочка выглядела бы так, будто первая пропала сама.
   Новая строка списка проявляется. */
.row.moving { position: relative; z-index: 1; background: #fff; }
html.dark .row.moving { background: #16171a; }
.row.swapped-out { animation: row-swapped-out 1.6s ease-out 0.3s both; }
@keyframes row-swapped-out {
  from, 55% { background: var(--eh-line-2); }
  to        { background: transparent; }
}
.row.row-enter { animation: row-enter 0.3s ease; }
@keyframes row-enter { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .row.swapped-out, .row.row-enter { animation: none; }
}
.panel-note { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--eh-head); }

/* Слой, которого нет, просят прямо из поиска (8E): фраза и кнопка в рамке-волоске. */
.request { margin-top: 14px; padding: 13px 0 14px; border-top: 1px solid var(--eh-line); border-bottom: 1px solid var(--eh-line); }
.request p { margin: 0 0 9px; font-size: 12.5px; line-height: 1.5; color: var(--eh-head); }
.request-layer {
  display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid var(--eh-line);
  font-family: 'Jost', system-ui, sans-serif; font-weight: 500; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--eh-ink); text-decoration: none;
}
.request-layer { transition: background var(--eh-hover-ms) linear, color var(--eh-hover-ms) linear, border-color var(--eh-hover-ms) linear; }
.request-layer:hover { background: var(--eh-ink); border-color: var(--eh-ink); color: var(--eh-paper); }

/* Кнопка письма — единственная красная в панели. */
.request-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin: 7px 0 0; padding: 11px; border-radius: 0;
  background: #fff; color: var(--eh-ink); border: 1px solid var(--eh-line);
  font-family: 'Jost', system-ui, sans-serif; font-weight: 500; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.09em;
  text-align: center; text-decoration: none; box-sizing: border-box;
}
.request-btn:hover { background: var(--eh-ink); color: var(--eh-paper); border-color: var(--eh-ink); }

/* ===== Метка в панели =====
   Режим постановки (7D): чёрный блок над поиском говорит, чего ждёт карта; поиск,
   фильтры и список приглушены, но видны — данные никуда не делись. Форма (7E)
   занимает верх панели одна: координаты в шапке, название, знак из общего листа.
   Кнопка «Поставить метку» в обоих состояниях спрятана — выход через «Отменить»,
   «Отмена» или Esc. */
#flag-state[hidden] { display: none; }
.flag-state { margin: 0 0 14px; padding: 12px 14px; background: var(--eh-ink); color: #fff; }
.flag-state-mark {
  font-family: 'Jost', system-ui, sans-serif; font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--eh-faint); margin-bottom: 6px;
}
.flag-state p { margin: 0 0 11px; font-size: 12.5px; line-height: 1.5; }
.flag-state-foot { display: flex; align-items: center; gap: 12px; }
.flag-state-cancel {
  border: none; background: none; padding: 0; cursor: pointer; color: #fff;
  font-family: 'Jost', system-ui, sans-serif; font-weight: 500; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid #fff; line-height: 1.3;
}
.flag-state-foot span { font-size: 11.5px; color: var(--eh-faint); }
#sidebar.placing .search-wrap, #sidebar.placing .filters, #sidebar.placing .sidebar-scroll { opacity: 0.4; pointer-events: none; }
#sidebar.placing #add-flag, #sidebar.editing #add-flag { display: none; }
#sidebar.editing .search-wrap, #sidebar.editing .filters, #sidebar.editing .sidebar-scroll { display: none; }

.flag-form { padding: 2px 0 12px; }
.flag-form-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--eh-ink);
}
.flag-form-title {
  font-family: 'Jost', system-ui, sans-serif; font-weight: 600; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: 0.11em; color: var(--eh-ink);
}
.flag-form-coords { font-family: 'Jost', system-ui, sans-serif; font-size: 12px; color: var(--eh-muted); font-variant-numeric: tabular-nums; }
.field-label {
  display: block; margin: 14px 0 5px;
  font-family: 'Jost', system-ui, sans-serif; font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--eh-head);
}
.flag-name {
  width: 100%; box-sizing: border-box; padding: 8px 0; border: none; border-radius: 0;
  border-bottom: 1px solid var(--eh-ink); background: transparent;
  font: inherit; font-size: 13.5px; color: var(--eh-ink);
}
.flag-name:focus { outline: none; border-bottom-width: 2px; padding-bottom: 7px; }
.sym-picker { display: flex; gap: 6px; }
.sym-opt {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--eh-line); border-radius: 0; background: #fff; color: var(--eh-ink);
  padding: 0; cursor: pointer;
}
.sym-opt svg { width: 16px; height: 16px; overflow: visible; }
.sym-opt { transition: background var(--eh-hover-ms) linear, color var(--eh-hover-ms) linear, border-color var(--eh-hover-ms) linear; }
.sym-opt:hover { background: var(--eh-ink); border-color: var(--eh-ink); color: var(--eh-paper); }
.sym-opt.selected { background: var(--eh-ink); border-color: var(--eh-ink); color: #fff; }
.sym-opt.selected:hover { background: var(--eh-paper); color: var(--eh-ink); }
.flag-note {
  display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 10px 12px;
  background: var(--eh-hover); font-size: 12px; line-height: 1.45; color: var(--eh-body);
}
.flag-note .eh-icon { color: var(--eh-head); flex: none; }
.flag-form-actions { display: flex; gap: 8px; margin-top: 16px; }
.flag-form-actions .btn { width: auto; flex: 1; margin: 0; }
.flag-form-actions .btn:last-child { flex: none; padding: 11px 16px; color: var(--eh-body); }

/* Фильтр «Мое» (7F): строка метки устроена как строка слоя (замечание владельца
   06.09.2026) — галочка показывает и прячет, крестик удаляет, «переим.» стоит
   в том столбце, где у слоя подпись типа. Раскрывающейся полки действий под строкой
   больше нет. Кнопка набрана как подпись — тем же кеглем и цветом, — и темнеет под
   курсором, чтобы читаться кнопкой, а не ярлыком. Имя при переименовании
   становится полем прямо в строке. */
.row .row-rename {
  border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; font-family: 'Jost', system-ui, sans-serif; font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--eh-faint); line-height: 1.3;
}
.row .row-rename:hover { color: var(--eh-ink); }
.row .row-rename:focus-visible { outline: 2px solid var(--eh-ink); outline-offset: 2px; }
/* Поле переименования — обычное текстовое: правила контрола слоя (`.ctl input`) его
   не касаются, поэтому свой размер и сброс системного вида заданы здесь. */
.flag-rename {
  flex: 1; min-width: 0; margin: 0; padding: 3px 4px; box-sizing: border-box; height: 24px;
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--eh-ink); border-radius: 0;
  background: #fff; font: inherit; font-size: 13px; color: var(--eh-ink);
}
.flag-rename:focus { outline: none; }

/* Маршрут парохода: цвет живёт в CSS, чтобы переключаться вместе с темой. */
.steamer-route { stroke: #1a1a1a; }
html.dark .steamer-route { stroke: #f2f3f5; }
.steamer-port {
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 3px solid #1a1a1a; box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
html.dark .steamer-port { background: #16171a; border-color: #f2f3f5; }

.steamer-img {
  display: block; width: 100%; height: auto; max-height: 300px; object-fit: contain;
  margin: 7px 0 3px; border-radius: 4px; border: 1px solid #ddd; background: #fff;
}
html.dark .steamer-img { border-color: #33373e; }
.steamer-credit { font-size: 10px; color: #999; margin-bottom: 4px; }
.steamer-voyage { margin-top: 6px; }
.steamer-who { color: #666; }
html.dark .steamer-who { color: #9aa0a8; }
.steamer-tail { margin-top: 8px; font-size: 11px; color: #888; }