:root {
  color-scheme: dark;
  --top-inset: 0px; /* высота полоски заголовка окна установленного приложения, см. window-controls-overlay */
  --light-panel: #fff;
  --light-hover: #f1f3f4;
  --light-text: #3c4043;
  --light-muted: #70757a;
  --light-accent: #1a73e8;
  /* серый нажатых/активных кнопок и чипов — светлее прежнего #aab0b6/#9aa0a6 (Грегори, 2026-10-04:
     «серый цвет при нажатии всех кнопок можно сделать еще более светлым») */
  --active-grey: #b7bdc3;
  --active-grey-dark: #a2a8ae;
  /* плеер экскурсии/разговорника — «негатив светло-синего» вместо прежнего оранжевого (Грегори,
     2026-10-04), сдвинут на тон светлее (Грегори, 2026-10-09: «синий немного посветлей») —
     --player-blue-dark занял место прежнего --player-blue, совпадавшего с --accent тёмной темы */
  --player-blue: #6ab4ff;
  --player-blue-dark: #4da3ff;
  /* кнопки «Экскурсии»/«Языки» в строке поиска — свой цвет вместо общего серого, чтобы было видно,
     какое окно открыто, даже если обе кнопки могли бы казаться «нажатыми» (Грегори, 2026-10-10):
     красный — тот же, что у номеров остановок и значков экскурсий (TOUR_ICON_COLOR в app.js) */
  --tour-red: #e53935;
  --tour-red-dark: #c62828;
  /* ещё светлее прежнего (Грегори, 2026-10-10 продолжение: «цвет близко не тот, ещё посветлей») —
     старый основной тон ушёл в -dark, как раньше с --player-blue выше */
  --lang-green: #81c784;
  --lang-green-dark: #66bb6a;
  /* «Мои альбомы» — тот же цвет, что у значков альбомов на карте (MY_COLOR в app.js), чтобы
     кнопка в строке поиска сразу узнавалась (Грегори, 2026-10-11: «делаем кнопку Мои альбомы
     самой правой в окне поиска со своей панелью») */
  --my-color: #7c4dff;
  --my-color-dark: #6a35e0;
  --bg: #1b1b1f;
  --panel: #26262c;
  --accent: #4da3ff;
  --text: #e8e8ec;
  --muted: #9a9aa5;
  font-family: "Poppins", system-ui, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  background: #000;
  color: var(--text);
}

#map {
  position: fixed;
  inset: 0;
}

/* звёздное небо под прозрачным холстом карты — рисует app.js */
#stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* окно "О программе" перенесено из photo-editor */
.modal-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
}


/* строка слева от плитки карт, в её высоту: шкала и ⓘ (собирает app.js); панель карт,
   раскрываясь влево, ложится поверх */
.bottom-row {
  position: absolute;
  right: 96px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  /* по нижнему краю плитки карт (Грегори) */
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
  height: 76px;
}

/* столбик кнопок MapLibre — над плиткой карт */
.maplibregl-ctrl-bottom-right {
  bottom: 88px;
}

.bottom-row .maplibregl-ctrl {
  margin: 0;
}

/* шкала без подложки: белые линия и цифры с тёмной обводкой видны и на карте, и на звёздах */
.bottom-row .maplibregl-ctrl-scale {
  background: transparent;
  border-color: #fff;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000);
}

/* ячейка под ⓘ: раскрытая строка источников растёт влево поверх шкалы */
.attrib-slot {
  position: relative;
  width: 32px;
  height: 32px;
}

.attrib-slot .maplibregl-ctrl-attrib {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: max-content;
  max-width: calc(100vw - 120px);
}

/* ⓘ крупная и без подложки; белая подложка — только у раскрытой строки */
.attrib-slot .maplibregl-ctrl-attrib.maplibregl-compact {
  min-height: 32px;
  padding: 0 32px 0 0;
  border-radius: 16px;
  background: transparent;
}

.attrib-slot .maplibregl-ctrl-attrib.maplibregl-compact-show {
  display: flex;
  align-items: center;
  padding: 4px 36px 4px 10px;
  background: #fff;
  box-sizing: border-box;
}

.attrib-slot .maplibregl-ctrl-attrib-button {
  top: auto;
  bottom: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: transparent;
  background-size: 32px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.5' fill='%233c4043' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='6.6' r='1.1' fill='%23fff'/%3E%3Crect x='9' y='8.8' width='2' height='5.2' rx='1' fill='%23fff'/%3E%3C/svg%3E");
}

/* шестерёнка — свой контрол MapLibre */
#settings-btn img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* верхняя панель по образцу Google Maps: поиск, язык подписей, чипы категорий —
   белая, как кнопки MapLibre справа внизу */
.top-bar {
  position: fixed;
  top: calc(var(--top-inset) + 10px);
  left: 10px;
  right: 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  /* выше переключателя карт/ленты фото (оба 10-11) — список Экскурсий открывается отсюда и не
     должен прятаться под ними, когда растянут зуммером вниз (Грегори, 2026-10-10 продолжение:
     «нужно что бы эти окна были по верх всего») */
  z-index: 15;
  pointer-events: none; /* пустое место панели не должно мешать тащить карту */
}

.top-bar > * {
  pointer-events: auto;
}

/* установленное приложение: заголовок окна прозрачный (window-controls-overlay в
   manifest.json), под ним видны глобус и звёзды. Полоска заголовка остаётся, чтобы
   таскать окно, а верхняя панель опускается под неё */
.titlebar-drag {
  display: none;
}

@media (display-mode: window-controls-overlay) {
  .titlebar-drag {
    display: block;
    position: fixed;
    left: env(titlebar-area-x, 0);
    top: env(titlebar-area-y, 0);
    width: env(titlebar-area-width, 100%);
    height: env(titlebar-area-height, 0);
    app-region: drag;
    -webkit-app-region: drag;
    z-index: 20;
  }
  /* всё, что привязано к верху окна, опускается вместе с верхней панелью (--top-inset) */
  :root {
    --top-inset: env(titlebar-area-height, 0px);
  }
}

/* на телефоне поиск сжимается, чтобы рядом поместились кнопки языка и "Места" */
.search-wrap {
  position: relative;
  flex: 0 1 340px;
  min-width: 0;
}

.search-box {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 6px 0 16px;
  background: var(--light-panel);
  border-radius: 22px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.search-box input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--light-text);
  font: inherit;
  font-size: 0.95rem;
}

.search-box input::-webkit-search-cancel-button {
  display: none; /* своя кнопка-крестик */
}

.search-box button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--light-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.search-box button:hover {
  background: var(--light-hover);
}

.search-results {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
  background: var(--light-panel);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* поиск экскурсий — под строкой поиска, той же формы (видно со слоем «Экскурсии») */
.search-results {
  z-index: 2;
}

/* значок экскурсий в строке поиска — серый, как лупа; включён — красным (тот же цвет, что у
   номеров остановок и значков экскурсий, --tour-red): видно, какое именно окно открыто, когда
   кнопки «Экскурсии»/«Языки» больше не могут включаться вместе (Грегори, 2026-10-10: «кнопку
   Языки... в светло-зелёном, а Экскурсии в красном — тот же цвет, что и номера пунктов») */
#search-tour-btn.on {
  background: var(--tour-red);
  color: #fff;
}

/* без этого при наведении на включённую кнопку выигрывала .search-box button:hover (тот же
   приоритет у класса, но позже в файле) — фон светлел почти до белого и подсказка срабатывала
   без видимой реакции (Грегори, 2026-10-09: «кнопка карты не реагирует на наведение»); с ID в
   селекторе это правило всегда сильнее независимо от порядка */
#search-tour-btn.on:hover {
  background: var(--tour-red-dark);
}

/* «Языки» в строке поиска — между лупой и «Экскурсиями» (Грегори, 2026-10-10); светло-зелёным,
   тот же приём негатива и сброс тона при наведении (см. выше) */
#lang-list-btn.on {
  background: var(--lang-green);
  color: #fff;
}

#lang-list-btn.on:hover {
  background: var(--lang-green-dark);
}

/* «Мои альбомы» — крайняя правая кнопка строки поиска, та же схема, что у «Экскурсии»/«Языки»
   выше, но своим цветом (--my-color, тот же, что у значков альбомов на карте) */
#my-albums-btn.on {
  background: var(--my-color);
  color: #fff;
}

#my-albums-btn.on:hover {
  background: var(--my-color-dark);
}

/* список экскурсий: под строкой поиска, до кнопки «Слои». Те же отступы, что у .tour-panel —
   так шапка (.tour-head, margin: 0 -16px) ложится точно по краям, как у окна «Языки» (Грегори,
   2026-10-10: «окно Экскурсии оформить на подобие окна Языки»). Фон непрозрачный — тоже его
   пожелание («прозрачность окна это не удачный вариант, делаем все окна не прозрачные») */
.tour-list {
  top: 50px;
  z-index: 1;
  max-height: 85vh; /* потолок для resize (Грегори, 2026-10-10: «можно было окно растягивать»),
    а не для панели — изначально она короче, как раньше */
  min-height: 120px;
  padding: 0 16px 18px;
  background: var(--light-panel);
  /* без этого шапка наследовала светлый цвет текста тёмной темы страницы (var(--text)) поверх
     белого фона — заголовок «Экскурсии» был почти не виден (Грегори, 2026-10-10 продолжение:
     «надпись не видно»); строки списка этого не показывали — у них свой color (.tour-row) */
  color: var(--light-text);
  /* было thin — казалось безвредной парой к scrollbar-color для Firefox (Chrome эту пару раньше
     игнорировал, толщиной управлял только ::-webkit-scrollbar ниже), но текущий Chrome сам стал
     понимать scrollbar-width — и thin сжимал полосу там до ~10px вместо заданных в
     ::-webkit-scrollbar 16px; это и есть причина, по которой прошлая правка ширины ниже на практике
     не сработала («полоса прокрутки... по-прежнему очень узкая», Грегори, 2026-10-10 продолжение:
     «вертикальный ползунок сделай такой же ширины, как и нижний» — то есть как «зуммер», тоже 16px) */
  scrollbar-width: auto;
  scrollbar-color: #c4c7c5 transparent;
  scrollbar-gutter: stable; /* место под полосу зарезервировано всегда, не только когда контент
     длиннее окна — иначе кнопки шапки чуть сдвигались при появлении/исчезновении полосы (Грегори,
     2026-10-10 продолжение: «отступи с права сразу, чтобы кнопки не прыгали при появлении ползунка») */
  /* родной уголок resize убран — свой «зуммер» вместо него, крупный и по центру нижнего края
     (Грегори, 2026-10-10: «зуммер... очень маленький, нужно намного больше и по центру нижнего
     края окна»); см. .panel-resize-handle и attachResizeHandle() в app.js */
}

/* всё окно свёрнуто — остаётся шапка (как у .tour-panel.min). height:auto перекрывает высоту,
   заданную инлайново перетаскиванием «зуммера» (panel.style.height) — без этого свёрнутое окно
   после resize оставалось пустой высокой коробкой вместо одной строки шапки (Грегори, 2026-10-10
   продолжение: «сворачивались вместе с панелью в линию»); min-height:0 — без него свёрнутое окно
   всё равно не опускалось ниже базового min-height:120px (та же причина, другое свойство) */
.tour-list.min {
  height: auto !important;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
}

.tour-list.min > :not(.tour-head) {
  display: none;
}

/* свёрнутое окно — тоньше самого заголовка в развёрнутом виде (Грегори, 2026-10-10 продолжение:
   «сворачиваемость окна по максимуму... прям в одну линию»), не просто без рамки снизу */
.tour-list.min .tour-head {
  border-bottom: none;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* полоса прокрутки в Chrome/Safari (телефон и компьютер) — тот же светло-серый тонкий вид, что
   задан для Firefox через scrollbar-width/-color выше. На телефоне системная полоса была почти
   чёрной и слишком узкой, чтобы в неё попасть пальцем (Грегори, 2026-10-10); border + background-
   clip вместо сплошной ширины — зазор по краям, палец цепляет её увереннее */
/* шире прежних 10px — тонкая с виду полоса (border + background-clip ниже оставляют зазор по
   краям) по-прежнему была мала, чтобы уверенно попасть пальцем/курсором (Грегори, 2026-10-10
   продолжение: «полоса прокрутки... по-прежнему очень узкая») */
*::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: #c4c7c5;
  border: 4px solid transparent;
  border-radius: 8px;
  background-clip: content-box;
}

/* свой «зуммер» для .tour-list/.tour-panel — по центру нижнего края, крупный, вместо родного
   уголка resize (Грегори, 2026-10-10: «зуммер... очень маленький, нужно намного больше и по
   центру нижнего края окна»); fixed и сам по себе (не внутри панели), чтобы не пропадать при
   каждой перерисовке содержимого (replaceChildren стирает только детей, не сам элемент панели —
   см. attachResizeHandle() в app.js); позиция пересчитывается под реальный нижний край панели */
.panel-resize-handle {
  position: fixed;
  width: 72px;
  height: 16px;
  /* JS ставит left/top точкой нижнего края панели (центр по ширине) — transform центрирует саму
     метку на этой точке, а не растягивает от неё */
  transform: translate(-50%, -50%);
  border-radius: 8px;
  background: var(--active-grey);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: ns-resize;
  touch-action: none; /* иначе перетаскивание на телефоне скроллит страницу вместо resize */
  z-index: 20;
}

.panel-resize-handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 4px;
  margin: -2px 0 0 -16px;
  border-radius: 2px;
  background: #fff;
  opacity: 0.9;
}

.panel-resize-handle:hover,
.panel-resize-handle.dragging {
  background: var(--active-grey-dark);
}

/* ползунок-дублёр для .tour-list/.tour-panel на тач-устройствах — ::-webkit-scrollbar* выше
   стилизует полосу только там, где браузер вообще рисует кастомную полосу (компьютерный Chrome/
   Safari); мобильный Chrome/Safari эти псевдо-элементы игнорируют и показывает только тонкую
   системную, которую видно плохо или не видно совсем (Грегори, 2026-10-10 продолжение: «на
   телефоне полосы прокрутки не видно») — там, где нет мыши (pointer: coarse), JS включает этот
   свой fixed-ползунок вместо системного; см. attachCustomScrollbar() в app.js. Трек той же
   толщины (16px), что и зарезервированный scrollbar-gutter, палец — 8px с зазором по краям, тот
   же вид, что и у одобренного ::-webkit-scrollbar-thumb */
.panel-scrollbar-track {
  position: fixed;
  width: 16px;
  z-index: 20;
  touch-action: none;
}

.panel-scrollbar-thumb {
  position: absolute;
  left: 4px;
  width: 8px;
  border-radius: 4px;
  background: #c4c7c5;
}

.panel-scrollbar-thumb.dragging {
  background: #9aa0a6;
}


.tour-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--light-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tour-row:hover,
.tour-row.active {
  background: rgba(255, 255, 255, 0.75);
}

.tour-row.active {
  outline: 2px solid #e91e63;
  outline-offset: -2px;
}

.tour-flag {
  flex: none;
  width: 20px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

span.tour-flag {
  box-shadow: none;
}

/* страна — светло-синяя, город — светло-зелёный (одинаковый шрифт) */
.tour-row-country,
.tour-row-group {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tour-row-country {
  color: #1e88e5;
}

.tour-row-group {
  color: #15213b;
}

.tour-row-group-icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  color: #ffc107;
}

/* тот же значок-группа в панели альбома — это CHIP_ICONS.myphotos (иконка альбома), а не папка
   городов «Экскурсий»: жёлтый цвет пришёл по наследству от общего .tour-row-group-icon и получался
   не в тон кнопке «Мои альбомы»/значкам альбомов на карте — тот же рисунок, но два разных цвета
   без причины (Грегори, 2026-10-12: «цвета иконок везде разные… должна быть логика расцветки»).
   В альбомах — фирменный сиреневый (var(--my-color)), как у остальных значков альбома; у городов
   «Экскурсий» жёлтый остаётся как был */
.tour-panel .tour-row-group-icon {
  color: var(--my-color);
}

/* кнопки шапки «Мои альбомы» (обновить/сортировка/свернуть все страны/свернуть окно) — серые, как
   у «Экскурсий»/«Языков», хотя сам треугольник-плеер рядом уже фирменного сиреневого (--my-color,
   .album-play-btn выше) — тот же повод, что и у значка группы-даты (Грегори, 2026-10-12: «поменяй
   цвет иконки в мои альбомы»). Крестик «закрыть» — свой класс (.tour-close), сюда не попадает */
#albums-list .tour-bar .tour-edit {
  color: var(--my-color);
}

.tour-row-group-icon svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

.tour-row-name {
  flex: 1;
  min-width: 0;
}

.tour-row-count {
  font-weight: 600;
  opacity: 0.7;
}

.tour-row-chevron {
  display: inline-grid;
  transition: transform 0.15s;
}

.tour-row-chevron.open {
  transform: rotate(180deg);
}

.in-country {
  padding-left: 20px;
}

.in-group {
  padding-left: 34px;
}

/* экскурсия — как пункт в панели экскурсии: оранжевая метка, жирное название, строка фактов */
/* метка экскурсии — как на карте (Грегори, 2026-10-04): без кружка-подложки, белый кант вместо тени */
.tour-row-pin {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #e53935;
}

.tour-row-pin svg {
  width: 20px;
  height: 20px;
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

.tour-icon-text {
  font-size: 1rem;
  line-height: 1;
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

/* шапка окна «Экскурсии» теперь той же разметки, что у «Языки» — .tour-head/.tour-bar/.tour-edit
   (Грегори, 2026-10-10: «окно Экскурсии оформить на подобие окна Языки»); «Языки» сама переехала
   в строку поиска (#lang-list-btn), поэтому здесь больше нет отдельных .tour-list-top/-tool */
.tour-list-help {
  margin: 0 4px 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  font-size: 0.78rem;
  color: var(--light-text);
}

.tour-list-help p {
  margin: 0 0 6px;
}

.tour-list-help pre {
  margin: 0 0 6px;
  font: 0.76rem/1.4 Consolas, "Cascadia Mono", monospace;
  color: #8a3c00;
}

.tour-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px 4px;
}

.tour-icon-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tour-row-text {
  display: flex;
  flex-direction: column;
  flex: 1; /* растягивается на всю строку — без этого счётчик фото внутри .tour-row-title жался к
    названию, а не к правому краю строки (Грегори, 2026-10-11 продолжение: «число фото нужно
    прижать в право, как в других панелях») */
  min-width: 0;
}

/* flex-строка — название слева (резиновое, обрезается многоточием), счётчик справа вплотную к
   краю, тот же приём, что у .tour-row-name/.tour-row-count в заголовках стран/групп выше (Грегори,
   2026-10-11: «число фото нужно прижать в право, как в других панелях» — одно margin-left не
   прижимало его к краю строки, только отодвигало от названия). Один ребёнок (просто текст, без
   .tour-row-title-text) у Экскурсий/Разговорника — display:flex тут их не меняет */
.tour-row-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 600;
}

.tour-row-title-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-row-sub {
  font-size: 0.74rem;
  color: #5f6368;
}

/* число фото у строки альбома — в одну строку с названием, прижато вправо (Грегори, 2026-10-11
   продолжение: «количество фотографий ставим правее от названия альбома, а не 3 строкой», затем
   «число фото нужно прижать в право, как в других панелях»). Своё имя класса — .tour-row-count
   уже занят счётчиком экскурсий/языков в строке страны/группы (другой размер/цвет), совпадение
   имён раньше молча перекрашивало и те счётчики тоже */
.album-row-count {
  flex: none;
  font-size: 0.78rem;
  font-weight: 400;
  color: #5f6368;
  white-space: nowrap;
}

/* панель одного альбома (renderAlbumPanel) — список его фото, миниатюра + имя файла, по образцу
   строк остальных списков (.tour-row), только своя метка-миниатюра вместо значка-иконки */
.album-photo-thumb {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  overflow: hidden;
  background: #e0e0e0;
}

.album-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tour-list-empty {
  padding: 10px;
  color: var(--light-muted);
  font-size: 0.85rem;
}

.search-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--light-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.search-item:hover {
  background: var(--light-hover);
}

/* выделение стрелками вверх/вниз из поля поиска — по образцу .tour-row.active
   (Грегори, 2026-10-11: «переходить из окна поиска в окно списка запросов стрелой вниз») */
.search-item.active {
  background: var(--light-hover);
  outline: 2px solid var(--light-accent);
  outline-offset: -2px;
}

.search-item-title {
  font-size: 0.9rem;
}

.search-item-sub {
  font-size: 0.75rem;
  color: var(--light-muted);
}

/* строка истории: ручка перетаскивания, место, крестик "удалить" */
.search-history-row {
  display: flex;
  align-items: center;
  border-radius: 6px;
}

.search-history-row .search-item {
  flex: 1;
  min-width: 0;
  padding-left: 4px;
}

.search-drag {
  flex-shrink: 0;
  display: flex;
  padding: 8px 4px 8px 6px;
  color: var(--light-muted);
  cursor: grab;
  touch-action: none; /* палец тащит строку, а не прокручивает список */
}

.search-history-row.dragging {
  background: var(--light-hover);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.search-history-row.dragging .search-drag {
  cursor: grabbing;
}

.search-delete {
  flex-shrink: 0;
  display: flex;
  padding: 8px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--light-muted);
  cursor: pointer;
}

.search-delete:hover {
  background: var(--light-hover);
  color: var(--light-text);
}

.search-history-clear {
  display: block;
  margin: 4px 10px 2px auto;
  padding: 4px 0;
  border: none;
  background: none;
  color: var(--light-accent);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.search-note {
  padding: 8px 10px;
  font-size: 0.85rem;
  color: var(--light-muted);
}

/* живёт внутри .search-box, перед лупой — лупа теперь разделитель между полем поиска и кнопками-
   значками справа (Грегори: «поменяй местами лупу и кнопку Ру, она относится к окну поиска, а не
   экскурсиям»). Своя высота 34px, как у круглых кнопок рядом, а не во всю высоту строки поиска.
   #lang-btn (id), а не .lang-btn — иначе более специфичный общий `.search-box button`
   (класс+тег) забивал бы ширину/радиус/фон. position:relative убран — больше не точка привязки
   для .lang-menu (см. ниже, меню привязано к .search-wrap, а не к этой узкой обёртке) */
.lang-wrap {
  flex-shrink: 0;
  margin-left: 0;
}

/* круглая, как соседние кнопки-значки, а не вытянутая таблетка (Грегори, скрин 26.png: «кнопка
   должна быть круглая») — тот же размер 34x34, что у .search-box button */
#lang-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--light-text);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

#lang-btn:hover {
  background: var(--light-hover);
}

/* якорь — .search-wrap (как у .search-results выше), а не узкая .lang-wrap — но, в отличие от
   .search-results, не на всю ширину окна поиска: список языков короткий, во всю ширину он просто
   растягивал текст пунктов и ничего не выигрывал (Грегори, скрин 26.png: «окно должно быть в 3
   раза уже, выровнено по правому краю окна поиска»). 150px — не буквально треть 340px, а
   наименьшая ширина, на которой самый длинный пункт («Местные названия») ещё помещается в одну
   строку без переноса («текст окна не должен выходить за пределы окна») */
.lang-menu {
  position: absolute;
  top: 50px;
  left: auto;
  right: 0;
  width: 150px;
  /* тот же z-index, что у .search-results, оставлял их конфликтовать — если история поиска всё
     ещё открыта (а её специально не закрывают, см. el("search-input").focus() у lang-btn/
     search-btn в app.js), список языков должен просто лечь поверх, не толкаясь с ней (Грегори,
     2026-10-11, скрин 42.png: «список языков открывай поверх поиска... не корректно дёргать окно
     запросов, пусть остаётся открытым, просто поменяй видимость») */
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--light-panel);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* меню профилей магазинов — поверх карты, координаты ставит app.js; своя ширина (не 150px
   .lang-menu выше — профили магазинов там длиннее названий языков) */
.shop-menu {
  position: fixed;
  left: auto; /* прижато к правому краю чипа — right ставит app.js */
  width: 190px;
  z-index: 11;
}

.lang-item {
  padding: 7px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--light-text);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

.lang-item:hover {
  background: var(--light-hover);
}

.lang-item.active {
  color: var(--light-accent);
  font-weight: 500;
}

/* свой фокус-хайлайт по форме самой кнопки, тем же цветом, что и активный пункт — без него после
   клика/табуляции браузер рисовал вокруг текста кнопки узкий эллиптический контур по умолчанию
   (форма самой кнопки тоже была эллипсом до правки border-radius ниже, см. .lang-menu .lang-item)
   (Грегори, 2026-10-11, скрин 41.png: «поменять эти элипсы на подсветку фокуса на нормальные
   овалы, наподобие кнопок») */
.lang-item:focus {
  outline: 2px solid var(--light-accent);
  outline-offset: -2px;
}

/* #lang-menu живёт внутри .search-box (через .lang-wrap) — более специфичное `.search-box button`
   (класс+тег, см. выше) перебивало собственные width/height/padding/border-radius пункта и
   сжимало его до круглой кнопки 34x34, из-за чего «Местные названия»/«Без подписей» переносились
   на 2 строки даже в широком меню — это была настоящая причина кривого переноса на скрине 26.png
   (Грегори: «текст окна не должен выходить за пределы окна»), а не ширина самого меню. Два класса
   в селекторе перевешивают класс+тег независимо от порядка в файле. border-radius: 50% тогда не
   трогали (ширина/высота казались единственной проблемой) — на широкой прямоугольной кнопке это
   давало вытянутый эллипс вместо скруглённого прямоугольника и у подсветки наведения, и у новой
   рамки фокуса ниже (Грегори, 2026-10-11, скрин 41.png: «поменять эти элипсы... на нормальные
   овалы, наподобие кнопок») */
.lang-menu .lang-item {
  width: auto;
  height: auto;
  border-radius: 6px;
}

/* кнопка "Места" в правом верхнем углу и выпадающий под ней столбик категорий */
.places-wrap {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
}

.places-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: 22px;
  background: var(--light-panel);
  color: var(--light-text);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.places-btn {
  width: 44px;
  padding: 0;
  justify-content: center;
}

.places-btn:hover {
  background: var(--light-hover);
}

/* синий, как уже подсвеченные чипы слоёв внутри (--player-blue) — Грегори, 2026-10-10
   продолжение: «кнопка слоёв не стала синей», раньше тут был нейтральный серый */
.places-btn.active {
  background: var(--player-blue);
  color: #fff;
}

.places-btn.active:hover {
  background: var(--player-blue-dark);
}

/* панель «Места и слои»: две колонки чипов под кнопкой — места слева, слои справа (2026-10-04,
   Грегори: короткий список слева, длинный справа); длинная колонка прокручивается, не уходя под
   кнопки внизу */
.menu-panel {
  position: absolute;
  top: 48px;
  right: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none; /* промежутки между кнопками не мешают тащить карту */
}

.menu-panel[hidden] {
  display: none;
}

.category-chips,
.layers-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  padding: 2px 4px 6px;
  scrollbar-width: none;
}

.category-chips {
  align-items: flex-end;
}

.layers-chips {
  align-items: flex-end;
}

.category-chips > * {
  pointer-events: auto;
}

.chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 18px;
  background: var(--light-panel);
  color: var(--light-text);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.chip:hover {
  background: var(--light-hover);
}

/* включённый фильтр — негативом, чтобы не забыть его выключить */
.chip.active {
  background: var(--active-grey);
  color: #fff;
}

.chip.active:hover {
  background: var(--active-grey-dark);
}

/* панель слоёв — тот же приём, но светло-синим негативом плеера, а не серым (Грегори, 2026-10-10:
   «все кнопки панели слоёв сделать в негативе светло-синий, как кнопка плеера озвучки»); селектор
   с #id сильнее общего .chip.active независимо от порядка в файле */
#layers-chips .chip.active {
  background: var(--player-blue);
  color: #fff;
}

#layers-chips .chip.active:hover {
  background: var(--player-blue-dark);
}

/* "Магазины": название включает/выключает, стрелка открывает выбор профиля */
.chip-split {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.chip-split button {
  height: 100%;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.chip-split .chip-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 14px;
}

.chip-split .chip-arrow {
  padding: 0 12px 0 10px;
  border-left: 1px solid rgba(0, 0, 0, 0.15);
}

.chip-split.active .chip-arrow {
  border-left-color: rgba(255, 255, 255, 0.35);
}

.chip-split button:hover {
  background: rgba(0, 0, 0, 0.06);
}

.chip-split.active button:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* сам контейнер-чип подсвечивает половины по отдельности */
.chip-split:hover,
.chip-split.active:hover {
  background: var(--light-panel);
}

.chip-split.active:hover {
  background: var(--active-grey-dark); /* темнее базового активного (--active-grey) — тот же приём, что .chip.active:hover */
}

.chip-icon {
  display: inline-flex;
}

/* подсказки внизу по центру над строкой шкалы, без подложки — белый текст с тёмной
   обводкой (как подписи на спутнике) читается и на карте, и на звёздах. По бокам место плитки карт и кнопок */
.map-status {
  position: fixed;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 200px);
  text-align: center;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-shadow: 0 0 2px #000, 0 0 3px #000, 0 0 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 10;
}

/* попапы мест и результата поиска */
.maplibregl-popup-content {
  font-family: "Poppins", system-ui, "Segoe UI", sans-serif;
  color: #222;
  border-radius: 10px;
}

.popup-title {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 2px;
}

.popup-kind {
  font-size: 0.78rem;
  color: #666;
}

.popup-row {
  font-size: 0.8rem;
  margin-top: 4px;
}

.popup-photo {
  display: block;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 6px;
  background: #eee;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal-content {
  position: relative;
  background: var(--panel);
  border-radius: 10px;
  padding: 24px;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-content h2 { margin: 0; font-size: 0.9rem; font-weight: 400; }

/* шапка окна закреплена: при прокрутке настроек заголовок и крестик остаются наверху (Грегори) */
.modal-head {
  position: sticky;
  top: -24px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -24px -24px 16px;
  padding: 12px 12px 12px 24px;
  background: var(--panel);
  border-bottom: 1px solid #3a3a42;
}

.about-divider {
  border: none;
  border-top: 1px solid #3a3a42;
  margin: 0 0 16px;
}

.about-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  margin: 0 0 16px;
}

.about-logo {
  width: 160px;
  height: 160px;
  object-fit: contain;
  border-radius: 24px;
}

.about-wordmark {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
}

.modal-content .about-text {
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 8px;
}

.modal-content .about-credits {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0 0 16px;
}

.modal-content a { color: var(--accent); text-decoration: none; }
.modal-content a:hover { text-decoration: underline; }

.about-install-hint {
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0 0 12px;
}

.about-install-hint code {
  font: inherit;
  background: var(--bg);
  border: 1px solid #3a3a42;
  border-radius: 4px;
  padding: 1px 5px;
}

.text-btn {
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid #3a3a42;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.text-btn:hover:not(:disabled) {
  border-color: var(--accent);
}

.text-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* установка — первый раздел ⚙: описание слева, кнопки справа */
.install-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.install-lead {
  flex: 1;
}

.install-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: none;
}

.install-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  text-decoration: none;
}

.install-btn[hidden] {
  display: none;
}

.install-logo {
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  margin-right: 4px;
}

.install-btn .install-logo {
  margin: 0;
}

.install-howto {
  margin: 0 0 12px;
  font-size: 0.85rem;
}

.install-howto summary {
  cursor: pointer;
  color: var(--accent, #8ab4f8);
}

.install-howto ol {
  margin: 8px 0;
  padding-left: 20px;
  line-height: 1.5;
}

.install-howto li {
  margin-bottom: 6px;
}

.install-section.flash {
  animation: install-flash 1.6s ease-out 2;
  border-radius: 8px;
}

@keyframes install-flash {
  from { background: rgba(138, 180, 248, 0.25); }
  to { background: transparent; }
}

.modal-content a.install-btn {
  color: var(--text);
}

.is-mobile .desktop-only,
html:not(.is-mobile) .phone-only {
  display: none;
}

/* настройки: мои фото */
.settings-title {
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 600;
}

.my-photos-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.my-photos-folder {
  flex: 1;
  min-width: 120px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* «Открыть мои фото» / «Открыть экскурсии» — после перезапуска Chrome разрешение на папку
   нужно дать щелчком; кнопки столбиком вверху по центру */
.access-bar {
  position: fixed;
  top: calc(var(--top-inset) + 64px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.folder-access {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: none;
  border-radius: 18px;
  background: #fff;
  color: #3c4043;
  font: inherit;
  font-size: 0.85rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

/* панель экскурсии справа: дайджест — маршрут, точки, особенности, справки, источники */
.tour-panel {
  position: fixed;
  top: calc(var(--top-inset) + 62px);
  left: 10px;
  max-height: 90vh; /* не впритык к прежнему пределу (Грегори, 2026-10-10: «можно было окно
    растягивать») — настоящий потолок для resize, а не для самой панели: контент обычно короче */
  /* выше переключателя карт/ленты фото, как .top-bar (Грегори, 2026-10-10 продолжение: «эти
     окна были по верх всего») — список экскурсий (внутри .top-bar, z-index:15) по-прежнему
     ложится поверх при открытии, порядок между ними самими тут ни при чём */
  z-index: 15;
  width: 340px;
  min-width: 240px;
  min-height: 160px;
  max-width: calc(100vw - 20px);
  overflow-y: auto;
  padding: 0 16px 18px; /* сверху без отступа — шапка прилегает к краю, щели над ней нет */
  background: var(--light-panel); /* сплошной, без прозрачности (Грегори, 2026-10-10: «прозрачность
    окна это не удачный вариант, делаем все окна не прозрачные») */
  color: #222;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  font-size: 0.86rem;
  line-height: 1.45;
  /* было thin — та же причина отмены, что у .tour-list выше: текущий Chrome тоже слушает
     scrollbar-width и сжимает полосу до ~10px вместо 16px из ::-webkit-scrollbar */
  scrollbar-width: auto;
  scrollbar-color: #c4c7c5 transparent; /* без пары к scrollbar-width Chrome берёт свой тёмный
    цвет по умолчанию — тот самый чёрный, что на скрине у Языков (Грегори, 2026-10-10) */
  scrollbar-gutter: stable; /* см. то же свойство у .tour-list выше — тот же «прыгающий» при
     появлении полосы край шапки, только в открытой экскурсии/языке вместо списка */
  /* родной уголок resize убран — свой «зуммер» (см. .tour-list выше и .panel-resize-handle ниже) */
}

/* шапка панели — одной строкой и не прокручивается (Грегори) */
.tour-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 -16px;
  padding: 10px 10px 10px 16px;
  background: var(--light-panel); /* сплошной — прокрученный под шапку текст не просвечивает, и
    заодно не прозрачный (Грегори, 2026-10-10) */
  border-bottom: 1px solid #eee;
}

.tour-head h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* название альбома — переносится по словам, а не обрезается многоточием (Грегори, 2026-10-12:
   «можно выводить название альбома с переносом строки»); и выглядит как активная ссылка на
   галерею этого альбома (клик — см. renderAlbumPanel), курсор и подчёркивание при наведении —
   единственная подсказка, что по названию можно щёлкнуть */
.tour-head h2.album-title {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  cursor: pointer;
}
.tour-head h2.album-title:hover {
  text-decoration: underline;
}

/* главное фото альбома — под заголовком, во всю ширину шапки (Грегори, 2026-10-13:
   «рандомное фото из кучи... в альбоме под заголовком»); hidden снят в renderAlbumPanel,
   когда миниатюра готова, — до этого рамки не видно */
.album-cover {
  display: block;
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 6px;
  margin-top: 2px;
}

.tour-head + .tour-meta {
  margin-top: 8px;
}

/* «Информация» — синтаксис файла экскурсии */
.tour-help {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8f9fa;
  font-size: 0.78rem;
}

.tour-help-title {
  font-weight: 600;
  margin-bottom: 6px;
}

/* первая строка справки — ссылка на промт для ИИ (Грегори, 2026-10-04: «в справке первой строкой
   должно быть — промт экскурсии и ссылка») */
.tour-help-prompt {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e0e0e0;
}

.tour-help-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 4px 0;
  border-top: 1px solid #eee;
}

.tour-help-row pre {
  margin: 0;
  font: 0.74rem/1.4 Consolas, "Cascadia Mono", monospace;
  white-space: pre-wrap;
  color: #8a3c00;
}

.tour-help-row span {
  color: #5f6368;
}

/* инфо и карандаш в «нажатом» виде — тот же серый-негатив, что у остальных кнопок (Грегори:
   «нажатие инфо должно быть таким же, как и все наши кнопки, с инверсией серого») */
.tour-edit.on {
  background: var(--active-grey);
  color: #fff;
}

.tour-edit {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #5f6368;
  cursor: pointer;
}

.tour-edit:hover {
  background: #f1f3f4;
}

/* кнопка «обновить» альбомы — крутящийся значок, пока идёт обход папки (Грегори, 2026-10-12:
   «обновление замирает. Может колесико выводить?»); сама кнопка не крутится, только рисунок —
   иначе круглый фон при наведении «дрожал» бы вместе со значком */
.tour-edit.spinning svg {
  animation: my-refresh-spin 1s linear infinite;
}
@keyframes my-refresh-spin {
  to { transform: rotate(360deg); }
}

/* у .tour-edit.on и .tour-edit:hover одинаковый приоритет (0,2,0) — без явного .on:hover наведение
   на включённую кнопку выигрывало по порядку в файле и сбрасывало серый почти до белого, а белый
   значок на этом фоне пропадал из виду (Грегори, 2026-10-09: «серый негатив совсем не посветлел,
   зато при наведении становится просто белым… кнопка инфо просто пропадает»); с третьим классом
   в селекторе это правило сильнее независимо от порядка в файле */
.tour-edit.on:hover {
  background: var(--active-grey-dark);
}

/* инфо и альбом/фотоаппарат — только подсказка при наведении, тон вообще не меняется (Грегори,
   2026-10-09: «на кнопке инфо при наведении тон не менять», «на фотоаппарате при наведении
   выдавать только подсказку, тон не менять») — перекрывает оба правила выше для этих двух кнопок */
.tour-help-btn:hover,
.tour-album-btn:hover {
  background: transparent;
}

.tour-help-btn.on:hover,
.tour-album-btn.on:hover {
  background: var(--active-grey);
}

/* обзорная экскурсия: плеер под шапкой и слайд-шоу — негатив светло-синего вместо прежнего
   оранжевого тона-подсветки (Грегори, 2026-10-04: «плеер можно везде сделать на негативе
   светло-синего»): включено — сплошная заливка и белый значок, как у остальных активных кнопок */
.tour-play.on {
  background: var(--player-blue);
  color: #fff;
}

/* шапка панели: строка кнопок (плеер слева, остальные справа), под ней название во всю ширину */
.tour-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: -6px;
}

.tour-bar-gap {
  flex: 1;
}

.tour-player {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--player-blue-dark);
}

.tour-player .tour-edit:disabled {
  opacity: 0.35;
  cursor: default;
  background: transparent;
}

/* кнопка-иконка «Мои альбомы» в шапке списка — синяя на белом, а не обычный серый .tour-edit
   (Грегори, Round 67: «иконка рядом с Мои альбомы должна быть синяя на белом фоне»). Цвет —
   var(--my-color), тот же тёмно-сиреневый, что уже у значков альбомов на карте и у кнопки «Мои
   альбомы» в строке поиска (--my-color, см. выше) — player-blue-dark (цвет плеера аудиогида)
   оказался рядом с ним заметно бледнее (Грегори, Round 68: «цвет иконки слишком бледный») */
.album-play-btn {
  background: #fff;
  color: var(--my-color);
}
.album-play-btn:hover {
  background: #fff;
}

/* не тускнеет, пока альбом ещё не выбран — обычные .tour-player .tour-edit:disabled гаснут до
   35% непрозрачности (назад/дальше/стоп и так понятны серыми), а этот значок — тот же, что у
   кнопки «Мои альбомы» в строке поиска и у остальных значков альбома, и побледневшим выглядел
   просто сломанным, другого цвета (Грегори, 2026-10-13: «можно сделать иконку Мои альбомы тоже
   синюю?» — про этот самый значок, пока альбом не выбран). Три класса в селекторе — как у
   .tour-player .tour-edit:disabled выше, иначе та правка перевешивает по специфичности */
.tour-player .album-play-btn:disabled {
  opacity: 1;
}

/* треугольник плея заметно мельче соседей (14px иконка против 18px у назад/дальше/стоп) и вообще
   весь плеер-кластер мог бы быть крупнее (Грегори, Round 63: «треугольник очень маленький. Делай
   кнопки плайера больше») — увеличиваем саму кнопку и её иконку только в плеере (назад/плей/
   дальше/стоп), остальные кнопки шапки (i/свернуть/закрыть) прежнего размера */
.tour-player .tour-edit {
  width: 34px;
  height: 34px;
}
.tour-player .tour-edit svg {
  width: 22px;
  height: 22px;
}

/* кнопка «идёт озвучка» (говорящее лицо) — была синей (--player-blue, как и остальной плеер),
   Грегори не смог привыкнуть: «не могу привыкнуть к синей кнопки озвучить. Пусть будет светло-
   серая» — светло-серый такой же, как у обычных info-кнопок (--active-grey). Промежуточный шаг —
   «инверсия» (прозрачный фон + серая иконка вместо заливки) — Грегори пересмотрел сразу после
   скриншота: «озвучка — белая фигура в сером круге», т.е. обратно к заливке, тому же виду, что и
   у остальных «негативных» активных кнопок (языки/экскурсии/слои). Поэтому своего правила тут
   больше нет — работает общее .tour-edit.on (серый кружок, белая иконка) без изменений */

/* подпись «Языки» с иконкой слева в строке кнопок — у этой панели нет плеера, поэтому она
   занимает его обычное место (Грегори, 2026-10-09, см. renderLanguagesList) */
.tour-list-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tour-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tour-title-icon {
  flex: none;
}

.tour-player-label {
  color: var(--player-blue-dark);
  min-width: 0;
  margin-left: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tour-slides {
  position: fixed;
  right: 64px;
  bottom: 96px;
  z-index: 11;
  width: min(320px, calc(100vw - 440px));
  aspect-ratio: 4 / 3;
  border: 2px solid #fff;
  border-radius: 12px;
  overflow: hidden;
  background: #222;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.tour-slides {
  cursor: zoom-in;
}

.tour-slides[hidden] {
  display: none;
}

.tour-slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s;
}

.tour-slides img.on {
  opacity: 1;
}

.tour-slides-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 10px 5px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
  color: #fff;
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .tour-slides {
    left: 10px;
    right: 10px;
    bottom: auto;
    top: calc(var(--tour-panel-bottom, calc(var(--top-inset) + 56px)) + 8px);
    width: auto;
    aspect-ratio: 16 / 9;
  }
}

/* выделенная остановка (щелчок на карте или в панели) — тон темнее обычного номера, но из той
   же красной семьи (--tour-red-dark), не отдельный несвязанный розовый, как раньше */
.tour-section.current {
  margin-left: -8px;
  padding-left: 6px;
  border-left: 2px solid var(--tour-red-dark);
}

.tour-section.current .tour-num {
  background: var(--tour-red-dark);
}

.voice-row span {
  font-size: 0.85rem;
}

.voice-select {
  max-width: 200px;
  padding: 4px 6px;
  border-radius: 6px;
  font: inherit;
  font-size: 0.82rem;
}

/* был текстовый символ «×» (font-size 1.4rem) — заменён на SVG-крестик (CLOSE_ICON в app.js),
   поэтому размеры/центрирование теперь как у соседних круглых кнопок .tour-edit (Грегори,
   2026-10-10 продолжение: «хочется, чтобы и квадрат, и крестик тоже не отставали» — по весу
   рисунка, как у уже одобренной крупной стрелки свёртывания панели) */
.tour-close {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #5f6368;
  cursor: pointer;
}

.tour-close:hover {
  background: #f1f3f4;
}

.tour-meta,
.tour-facts,
.tour-file {
  color: #5f6368;
  font-size: 0.78rem;
}

.tour-file {
  margin-top: 8px;
}

.tour-file-link {
  color: #1a73e8;
  word-break: break-all;
}

.tour-idea {
  margin: 8px 0 0;
}

/* пункты — плотнее (Грегори: «подсобрать») */
.tour-section {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #eee;
}

.tour-section p {
  margin: 4px 0 0;
}

.tour-sec-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tour-sec-row .tour-sec-title {
  flex: 1;
  min-width: 0;
}

.tour-fold {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #5f6368;
  cursor: pointer;
  transform: rotate(180deg);
  transition: transform 0.15s;
}

.tour-fold:hover {
  background: #f1f3f4;
}

/* свёрнутый пункт: стрелка вниз, текст скрыт (заголовок и факты остаются) */
.tour-section.shut .tour-sec-body,
.tour-panel.titles .tour-section:not(.open) .tour-sec-body {
  display: none;
}

.tour-section.shut .tour-fold,
.tour-panel.titles .tour-section:not(.open) .tour-fold {
  transform: none;
}

.tour-section[data-n] .tour-facts,
.tour-section[data-n] .tour-sec-body {
  margin-left: 32px;
}

.tour-about .tour-sec-title,
.tour-sources .tour-sec-title {
  color: #5f6368;
  font-size: 0.8rem;
}

/* вся экскурсия свёрнута — остаётся шапка */
/* height:auto — та же причина, что у .tour-list.min выше (сброс высоты, заданной зуммером);
   min-height:0 — тот же базовый min-height:160px (.tour-panel) иначе не даёт сжаться до шапки */
.tour-panel.min {
  height: auto !important;
  min-height: 0;
  bottom: auto;
  overflow: hidden;
  padding-bottom: 0;
}

.tour-panel.min > :not(.tour-head) {
  display: none;
}

/* сворачиваем шапку до одной строки — только .tour-bar (кнопки), без .tour-title-row и
   .tour-player-label. Раньше заголовок вставлялся в ту же строку (order:-1, Грегори, 2026-10-10
   продолжение: «вместе с заголовком?») — но в этой строке кнопкам и так тесно (плеер + правка +
   справка + свернуть + закрыть), и заголовок выталкивал «назад» (кнопку плеера |<) за пределы
   видимого (Грегори, 2026-10-10 продолжение: «пропадает кнопка назад... не будем помещать
   заголовок или значок... панель должна оставаться неизменной, как в развёрнутом окне») — теперь
   .tour-bar в свёрнутом виде ничем не отличается от развёрнутого, просто единственная видимая
   строка шапки */
.tour-panel.min .tour-head {
  border-bottom: none;
  padding-top: 4px;
  padding-bottom: 4px;
}

.tour-panel.min .tour-title-row {
  display: none;
}

.tour-panel.min .tour-player-label {
  display: none;
}

.tour-panel.min .album-cover {
  display: none;
}

.tour-sec-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 600;
  text-align: left;
  color: inherit;
}

button.tour-sec-title {
  cursor: pointer;
}

button.tour-sec-title:hover {
  color: #ef6c00;
}

/* тот же красный, что у значков на карте (TOUR_ICON_COLOR/--tour-red) — раньше был отдельный
   оранжевый, никак не связанный с картой (Грегори, 2026-10-10: «цвет карты сильно отличается
   от цвета номера пункта экскурсии») */
.tour-num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tour-red);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
}

.tour-points {
  margin-top: 4px;
}

.tour-features {
  margin: 4px 0 0;
  padding-left: 18px;
}

.tour-history,
.tour-quote {
  margin-top: 6px;
  padding: 6px 10px 8px;
  border-radius: 8px;
  background: #fff3e0;
}

.tour-quote {
  background: #f1f3f4;
  font-style: italic;
}

.tour-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
  font-weight: 600;
  font-style: normal;
  color: #8a3c00;
}

.tour-block-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.tour-block-chevron {
  display: inline-grid;
  transform: rotate(180deg);
  transition: transform 0.15s;
}

.shut > .tour-block-head .tour-block-chevron {
  transform: none;
}

.tour-history.shut > p,
.tour-quote.shut > p {
  display: none;
}

.tour-history.shut,
.tour-quote.shut {
  padding-bottom: 2px;
}

.tour-quote .tour-block-head {
  color: #5f6368;
}

.tour-speak {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.tour-speak:hover,
.tour-speak.speaking {
  background: rgba(0, 0, 0, 0.08);
}

.tour-speak.speaking {
  color: #ef6c00;
}

.tour-source {
  margin-top: 4px;
}

.tour-source a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #1a73e8;
}

/* телефон: панель экскурсии — сверху под поиском, слайд-шоу — под ней (--tour-panel-bottom из
   app.js), ниже до кнопок — карта с остановкой (Грегори, 2026-10-03: раньше панель была шторкой снизу) */
@media (max-width: 600px) {
  .tour-panel {
    left: 10px;
    right: 10px;
    width: auto;
    /* было 32vh — зуммеру было почти некуда тянуть («ползунок... сильно ограничен в передвижении»,
       Грегори, 2026-10-10 продолжение); теперь можно растянуть почти до самого низа экрана */
    max-height: calc(100vh - var(--top-inset) - 70px);
  }

  /* список экскурсий был привязан шириной к search-wrap (узкому, сжатому ради кнопок языка/мест
     рядом) — заметно уже окна «Языки»/открытой экскурсии (Грегори, 2026-10-10 продолжение: «ширина
     перечня экскурсий на телефоне сильно уже других окон»); тот же fixed-приём, что у .tour-panel
     выше, вместо унаследованного от .search-results absolute-позиционирования внутри узкого блока */
  .tour-list {
    position: fixed;
    top: calc(var(--top-inset) + 62px);
    left: 10px;
    right: 10px;
    width: auto;
    max-height: calc(100vh - var(--top-inset) - 70px);
  }
}

/* лента фото внизу — в уровень и в высоту плитки переключателя карт (76 px, снизу 10 px, как справа, рамка
   2 px как у плитки), до
   правого края; кнопки справа внизу (шкала, ⓘ, шестерёнка, масштаб) — поверх неё (z-index 2 у
   углов MapLibre), поэтому справа запас прокрутки, чтобы последние снимки из-под них выезжали */
.photo-strip {
  position: fixed;
  left: 10px;
  right: 250px;
  bottom: 10px;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  gap: 2px;
  width: max-content;
  max-width: calc(100vw - 260px);
  height: 76px;
  margin: 0 auto;
  padding: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.photo-strip.scrolls::after {
  content: "";
  flex: none;
  width: 150px;
}

/* узкий экран (Грегори, 2026-10-04): лента — в самом низу во всю ширину, поверх плитки карт, шкалы,
   ⓘ и кнопок (z-index выше переключателя карт, а он — вне контейнера карты, поэтому лента переносится
   в body); пять снимков в ряд; карточка снимка — над лентой */
@media (max-width: 600px) {
  .photo-strip {
    right: 10px;
    width: auto;
    max-width: none;
    z-index: 11;
  }

  .photo-strip .photo-strip-item {
    width: calc((100vw - 32px) / 5);
  }

  .photo-strip.scrolls::after {
    width: 0;
  }

  body.has-photo-strip .maplibregl-popup.photo-sheet {
    bottom: 94px;
  }
}

.photo-strip[hidden] {
  display: none;
}

.photo-strip-item {
  position: relative;
  flex: none;
  width: 72px;
  height: 72px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: #eee;
  overflow: hidden;
  cursor: pointer;
}

.photo-strip-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* рамка — поверх снимка, размер не меняется */
.photo-strip-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid transparent;
  border-radius: 6px;
}

.photo-strip-item.hover::after {
  border-color: var(--active-grey-dark);
}

.photo-strip-item.active::after {
  border-color: #e91e63;
}

body.has-photo-strip .map-status {
  bottom: 96px;
}

/* окно снимка на узком экране — карточкой над лентой во всю ширину, чтобы не уходило за
   край; !important перебивает положение, которое MapLibre пишет в style каждый кадр */
.maplibregl-popup.photo-sheet {
  position: fixed;
  top: auto !important;
  left: 10px !important;
  right: 10px;
  bottom: 108px;
  max-width: none !important;
  transform: none !important;
  z-index: 11; /* над кнопками карты и «Слоями» */
}

.photo-sheet .maplibregl-popup-tip {
  display: none;
}

.photo-sheet .maplibregl-popup-content {
  width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.photo-sheet .popup-photo {
  width: 100%;
  height: auto;
  max-height: 30vh;
}

/* подпись к своему снимку из экскурсии */
.popup-caption {
  font-style: italic;
  color: #444;
}

.popup-muted {
  color: #999;
}

.layers-chips > * {
  pointer-events: auto;
  white-space: nowrap;
}

/* переключатель карт внизу слева — по образцу Google Maps: плитка "другого" вида +
   ряд всех вариантов, раскрывающийся при наведении */
.basemap-switcher {
  position: fixed;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: row-reverse; /* ряд карт раскрывается влево — поверх шкалы и ⓘ */
  align-items: flex-end;
  gap: 8px;
  z-index: 10;
}

.basemap-main {
  position: relative;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.basemap-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.basemap-main .basemap-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 4px 4px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  text-align: center;
}

.basemap-panel {
  display: none;
  gap: 2px;
  padding: 2px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* :focus-visible, а не :focus-within — иначе после клика мышью фокус остаётся на кнопке
   и ряд не закрывается, пока не кликнешь куда-нибудь ещё */
.basemap-switcher:hover .basemap-panel,
.basemap-switcher:has(:focus-visible) .basemap-panel {
  display: flex;
}

.basemap-item {
  position: relative;
  width: 72px;
  height: 72px;
  padding: 0;
  border: none;
  border-radius: 6px;
  overflow: hidden;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.basemap-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* рамка выбора — поверх снимка, размер плитки не меняется (ничего не прыгает) */
.basemap-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 6px;
}

.basemap-item:hover::after {
  border-color: #dadce0;
}

.basemap-item.active::after {
  border-color: var(--light-accent);
}

.basemap-item .basemap-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 2px 3px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: #fff;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

/* кнопка "моё местоположение": выключено — пустой центр, слежу, но карта сдвинута —
   серый центр, карта идёт за мной — синий */
.geo-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #3c4043;
}

.geo-btn .geo-center {
  fill: none;
}

.geo-btn.on .geo-center {
  fill: var(--active-grey);
}

.geo-btn.follow .geo-center {
  fill: var(--light-accent);
}

/* я на карте — синяя точка с расходящимся кругом */
.geo-dot {
  width: 16px;
  height: 16px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--light-accent);
  animation: geo-pulse 2s ease-out infinite;
}

@keyframes geo-pulse {
  from { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(26, 115, 232, 0.5); }
  to { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 0 0 0 18px rgba(26, 115, 232, 0); }
}

/* описание из Википедии в попапе — не больше нескольких строк */
.popup-wiki {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 6px 0;
  font-size: 0.8rem;
  line-height: 1.35;
}

/* координаты в попапе — щелчок копирует */
.popup-coords {
  padding: 0;
  border: none;
  background: none;
  color: var(--light-text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: copy;
}

/* разговорник: ссылка на него в «Об экскурсии», фраза — кнопка (щелчок — послушать):
   по-русски мелко, на языке страны — крупно, подсказка произношения — оранжевым */
.pb-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid #fde0c2;
  border-radius: 8px;
  background: #fff8f1;
  color: #3c4043;
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}

.pb-link svg {
  flex: none;
  color: #ef6c00;
}

.pb-link:hover {
  background: #ffefdf;
}

.pb-hint,
.pb-note {
  color: #5f6368;
  font-size: 0.78rem;
}

.pb-sub {
  margin: 10px 0 2px;
  color: #ef6c00;
  font-size: 0.78rem;
  font-weight: 700;
}

.pb-phrase {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 5px 8px;
  border: none;
  border-radius: 8px;
  background: #f8f9fa;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pb-phrase:hover {
  background: #f1f3f4;
}

.pb-phrase.speaking {
  background: #fff3e0;
}

.pb-ru {
  color: #5f6368;
  font-size: 0.78rem;
}

.pb-foreign {
  color: #202124;
  font-size: 0.95rem;
  font-weight: 600;
}

.pb-say {
  color: #ef6c00;
  font-size: 0.8rem;
}

.tour-lang-icon {
  display: inline-grid;
  place-items: center;
  color: #ef6c00;
}

.tour-lang-icon svg {
  width: 18px;
  height: 18px;
}

/* в разговорнике «О языке» и «Источники» — такие же разделы, как остальные (Грегори: «другим шрифтом и не выделяется») */
.tour-panel.phrasebook .tour-about .tour-sec-title,
.tour-panel.phrasebook .tour-sources .tour-sec-title {
  color: inherit;
  font-size: inherit;
}

.tour-panel.phrasebook .tour-about .tour-sec-title:hover,
.tour-panel.phrasebook .tour-sources .tour-sec-title:hover {
  color: #ef6c00;
}

/* без доступа к папкам (телефон) — разделы «Мои фото» и «Экскурсии» с выбором папок не нужны:
   экскурсии, языки и альбомы приходят из репозитория (Грегори: «не актуально, только мешают») */
.no-folders .folders-only,
.no-folders .access-bar {
  display: none;
}

/* крестик альбома (слайд-шоу) */
.tour-slides-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 22px;
  line-height: 30px;
  cursor: pointer;
}

.tour-album-btn:not(.on) {
  opacity: 0.55;
}

/* телефон: альбом (слайд-шоу) — внизу, над лентой фото или плиткой карт, всегда на одной высоте — не
   прыгает, когда появляется лента (Грегори, 2026-10-04); панель сверху своего размера не меняет, карта
   с остановкой — между ними */
@media (max-width: 600px) {
  .tour-slides {
    top: auto !important;
    bottom: 94px;
  }
}

/* на тач-устройствах системная полоса (тонкая, своя у ОС) всё равно норовит промелькнуть поверх
   нашего fixed-ползунка во время скролла — рядом друг с другом они читались как «полоска двойная»
   (Грегори, 2026-10-11); тут её прячем насовсем, раз свой ползунок уже решает ту же задачу —
   scrollbar-gutter (зарезервированное место, чтобы кнопки шапки не прыгали) при этом не трогается,
   он не зависит от видимости самой полосы. Round 37: этот блок раньше жил сразу после объявления
   .panel-scrollbar-track (рядом по смыслу), но .tour-panel САМ задаёт свой scrollbar-width: auto
   дальше по файлу — при равной специфичности (.tour-panel вес 0,1,0) побеждает то, что позже в
   исходнике, так что на реальном телефоне эта медиа-правка для .tour-panel тихо перезаписывалась
   и системная полоса не пряталась — «на телефоне две прокрутки» (Грегори). У .tour-list такого
   конфликта не было (её scrollbar-width стоит раньше этого блока), поэтому баг был виден только в
   открытой экскурсии, не в списке. Вынесено в самый конец файла, чтобы впредь не теряться за любой
   будущей правкой .tour-list/.tour-panel выше */
@media (pointer: coarse) {
  .tour-list,
  .tour-panel {
    scrollbar-width: none;
  }

  .tour-list::-webkit-scrollbar,
  .tour-panel::-webkit-scrollbar {
    display: none;
  }
}