html, body {
  margin: 0;
  height: 100%;
  font-family: system-ui, sans-serif;
}

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

#card {
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: 320px;
  max-width: calc(100vw - 24px);
  overflow-y: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  padding: 16px;
  z-index: 10;
}

#card-close, #modal-close {
  float: right;
  border: 0;
  background: none;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}

.muted {
  color: #666;
  font-size: 0.9em;
}

#card-photo img {
  max-width: 100%;
  border-radius: 6px;
}

#card-nearest {
  list-style: none;
  padding: 0;
}

#card-nearest li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}

#card-nearest .grow {
  flex: 1;
}

button {
  cursor: pointer;
}

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

#modal[hidden], #card[hidden] {
  display: none;
}

#modal-box {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  max-width: 720px;
  width: calc(100vw - 48px);
}

#modal-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

#layer-switch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  gap: 4px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  padding: 4px;
}

#layer-switch button {
  border: 0;
  background: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.9em;
}

#layer-switch button.active {
  background: #1a73e8;
  color: #fff;
}

#route-tools {
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
}

#route-tools button {
  background: #fff;
  color: #1a73e8;
  border: 1px solid #1a73e8;
  border-radius: 8px;
  padding: 6px 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

#route-tools button.active {
  background: #1a73e8;
  color: #fff;
}

#route-panel {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 15;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  max-width: 360px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

#route-panel[hidden] {
  display: none;
}

#yandex-attr {
  position: absolute;
  right: 12px;
  bottom: 28px;
  z-index: 15;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85em;
  display: flex;
  gap: 10px;
  align-items: center;
}

#yandex-attr[hidden] {
  display: none;
}

#site-header {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 16;
  max-width: 340px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  padding: 10px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

#site-header h1 {
  margin: 0 0 4px;
  font-size: 1.15em;
}

#site-header p {
  margin: 0;
  font-size: 0.9em;
  color: #333;
  white-space: pre-wrap;
}

#site-header.collapsed p {
  display: none;
}

#header-toggle {
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  line-height: 1;
  flex-shrink: 0;
}

#map-warning {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 15;
  background: #fff3cd;
  border: 1px solid #e0b800;
  border-radius: 6px;
  padding: 10px 14px;
  max-width: 320px;
  font-size: 0.95em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

#map-warning[hidden] {
  display: none;
}

.video-stub {
  border: 1px dashed #999;
  border-radius: 6px;
  padding: 12px;
  margin: 8px 0;
  background: #fafafa;
}

/* ---------- Мобильная раскладка (< 768px). Десктопные правила выше не изменены. ---------- */

#card-handle {
  display: none;
}

/* Полоса управления карточкой: на десктопе виден только крестик (справа сверху). */
.card-topbar {
  position: relative;
  height: 40px;
  flex-shrink: 0;
}
.card-topbar-actions {
  position: absolute;
  top: 6px;
  right: 8px;
  display: flex;
  gap: 4px;
}
#card-close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #f0f1f3;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
#card .card-scroll {
  padding-top: 4px;
}

#card-chevron {
  display: none;
}

@media (max-width: 767px) {
  /* Шапка — компактная пилюля слева сверху */
  #site-header {
    top: 10px;
    left: 10px;
    max-width: 62vw;
    padding: 8px 14px;
    border-radius: 999px;
    gap: 8px;
    align-items: center;
  }
  #site-header h1 {
    font-size: 0.95em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(62vw - 70px);
  }
  #site-header p {
    font-size: 0.85em;
    max-height: 30vh;
    overflow-y: auto;
  }
  #header-toggle {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    font-size: 18px;
  }

  /* Слои: одна круглая кнопка справа сверху + шторка */
  #layer-switch {
    display: none;
  }
  #layer-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
    width: 48px;
    height: 48px;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #1a73e8;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
  }
  #layer-sheet {
    position: absolute;
    top: 92px;
    right: 10px;
    z-index: 20;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    padding: 8px;
    min-width: 190px;
  }
  #layer-sheet .layer-sheet-title {
    margin: 2px 6px 8px;
    font-size: 0.8em;
    color: #666;
  }
  #layer-sheet button {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #111;
    text-align: left;
    font-size: 0.95em;
  }
  #layer-sheet button.active {
    background: #1a73e8;
    color: #fff;
  }

  /* Контролы карты: зум под кнопкой слоёв, атрибуция — влево под шапку */
  .maplibregl-ctrl-top-right {
    margin-top: 66px;
    margin-right: 10px;
  }
  .maplibregl-ctrl-bottom-right {
    right: auto;
    left: 10px;
    bottom: auto;
    top: 64px;
  }

  /* Карточка — нижняя панель (bottom sheet) */
  #card {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-width: none;
    height: 25vh;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.3);
    padding: 0;
    transition: height 0.18s ease-out;
    z-index: 17;
  }
  #card.sheet-full {
    height: 85vh;
  }
  #card-scroll, .card-scroll {
    overflow-y: auto;
    max-height: calc(100% - 8px);
    padding: 4px 16px 16px;
  }
  /* На карточке FAB слоёв и шторка отключаются (нет пересечений с полосой). */
  body.sheet-open #layer-fab,
  body.sheet-open #layer-sheet {
    display: none !important;
  }

  /* Полоса управления: ручка по центру, [шеврон][крестик] справа — одна строка. */
  .card-topbar {
    height: 52px;
    touch-action: none;
  }
  #card-handle {
    display: block;
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 44px;
    min-height: 44px;
    border: 0;
    background: none;
    cursor: pointer;
  }
  #card-handle::after {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 20px auto 0;
    border-radius: 2px;
    background: #bbb;
  }
  .card-topbar-actions {
    top: 4px;
    right: 8px;
    gap: 8px;
  }
  #card-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: 50%;
    background: #f0f1f3;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
  }
  #card.sheet-full #card-chevron {
    transform: rotate(180deg);
  }
  #card-close {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  #card h2 {
    margin-top: 2px;
    font-size: 1.1em;
    padding-right: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #card-photo img {
    max-height: 110px;
  }

  /* Пик: только ручка, название, категория, фото-превью */
  #card.sheet-peak #card-description,
  #card.sheet-peak #card-video,
  #card.sheet-peak h3,
  #card.sheet-peak #card-nearest,
  #card.sheet-peak #card-route-info {
    display: none;
  }
  #card.sheet-peak #card-close {
    display: none;
  }
  #card.sheet-peak h2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #card.sheet-peak #card-photo img {
    max-height: 60px;
  }

  /* Панель маршрута / кнопка «Маршрут отсюда» — строка внизу, над нижней панелью */
  #route-tools {
    top: auto;
    left: 12px;
    right: 12px;
    bottom: 12px;
    transform: none;
    z-index: 16;
  }
  #route-tools button {
    width: 100%;
    min-height: 48px;
    font-size: 1em;
  }
  #route-panel {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    min-height: 48px;
    font-size: 0.95em;
  }
  body.sheet-peak #route-tools,
  body.sheet-peak #route-panel {
    bottom: calc(25vh + 10px);
  }
  body.sheet-full #route-tools,
  body.sheet-full #route-panel {
    bottom: calc(85vh + 10px);
  }
  body.routebar-on #route-tools {
    display: none;
  }

  /* Атрибуция Яндекса — левая колонка под строкой attribution (не пересекается ни с чем) */
  #yandex-attr {
    top: 92px;
    left: 10px;
    right: auto;
    bottom: auto;
    max-width: 70vw;
    flex-wrap: wrap;
  }

  /* Сенсорные цели карточки ≥ 44px */
  #card-nearest button,
  #card-video button,
  #card-video a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* RuTube-модалка — во весь экран */
}

/* ---------- Фото-метки (А), свайп панели (Б), полный список (В) ---------- */

/* Маркер: булавка + круглая миниатюра 48px НАД ней (видна при body.zoom-thumbs, z>=16) */
/* Геометрия маркера (Д3): wrap 0x0 = точка-якорь; все размеры вычислены
   (rotate -45° bounding box = 28*sqrt(2) = 39.6px; визуальный низ pin = top+33.8). */
.m-wrap {
  position: relative;
  width: 0;
  height: 0;
  overflow: visible;
  cursor: pointer;
}
.m-pin {
  position: absolute;
  left: -14px;
  top: -34px;
  width: 24px;
  height: 24px;
  background: #c33;
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  margin: 0;
}
.m-pin::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: #fff;
  border-radius: 50%;
}
.m-thumb {
  position: absolute;
  left: -25px;
  top: -92px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
  object-fit: cover;
  background: #eee;
  display: none;
}
body.zoom-thumbs .m-thumb:not(.no-thumb) {
  display: block;
}

/* Выделение выбранной метки (релиз «selhl», итерация 2 по гейту оператора).
   z<16 или без фото: булавка +15% и темнее, кольца нет. Масштаб вокруг центра pin
   смещает остриё на 14*sqrt(2)*0.15 = 2.97px — компенсация translateY(-2.97px). */
.m-pin {
  transition: transform 180ms ease, background-color 180ms ease;
}
.m-thumb {
  transition: width 180ms ease, height 180ms ease, left 180ms ease, top 180ms ease;
}
.m-wrap.selected {
  z-index: 15;
}
.m-wrap.selected .m-pin {
  transform: translateY(-2.97px) rotate(-45deg) scale(1.15);
  background: #8f1d1d;
}
/* z>=16 с фото: булавка обычная, миниатюра 64px с одной спокойной рамкой. */
body.zoom-thumbs .m-wrap.selected:has(.m-thumb:not(.no-thumb)) .m-pin {
  transform: rotate(-45deg);
  background: #c33;
}
body.zoom-thumbs .m-wrap.selected .m-thumb:not(.no-thumb) {
  width: 64px;
  height: 64px;
  left: -32px;
  top: -108px;
  border: 2px solid #2563eb;
  box-shadow: 0 0 0 2px #ffffff, 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Полный список соседних: своя прокрутка */
#card-nearest {
  max-height: 240px;
  overflow-y: auto;
}
#card-nearest .nearest-item {
  cursor: pointer;
  min-height: 44px;
  border-radius: 8px;
}
#card-nearest .nearest-item:hover {
  background: #f0f4ff;
}
#card-nearest .nearest-item:active {
  background: #e2eaff;
}

/* --- Б. Фасад RuTube --- */
.video-stub {
  display: none;
}
.vf-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: linear-gradient(135deg, #3a3f47 0%, #14161a 100%);
  overflow: hidden;
  cursor: pointer;
  min-height: 44px;
  margin: 8px 0 6px;
}
.vf-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.vf-frame.has-preview .vf-img {
  display: block;
}
.vf-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #c62828;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.vf-frame:hover .vf-play,
.vf-frame:active .vf-play {
  background: #ffffff;
  transform: translate(-50%, -50%) scale(1.06);
}
.vf-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  text-align: center;
  color: #fff;
  font-size: 0.9em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.vf-external {
  font-size: 0.9em;
}

/* --- В. Модалка видео --- */
#modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#modal.modal-visible {
  opacity: 1;
}
.modal-panel {
  position: relative;
  width: 100%;
  max-width: 900px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  transform: scale(0.96);
  transition: transform 0.2s ease;
  padding: 0 0 6px;
}
#modal.modal-visible .modal-panel {
  transform: scale(1);
}
#modal-video {
  aspect-ratio: 16 / 9;
  background: #000;
}
#modal-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
#modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
#modal-error {
  margin: 6px 12px 2px;
  font-size: 0.9em;
}
body.modal-open {
  overflow: hidden;
}
#modal[hidden] {
  display: none;
}

@media (max-width: 767px) {
  #modal {
    align-items: flex-end;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .modal-panel {
    max-width: 100%;
    border-radius: 16px;
  }
}

/* Шеврон рядом с ручкой (виден только на телефоне) */

@media (max-width: 767px) {
  /* Зоны свайпа: ручка и шапка карточки; содержимое прокручивается отдельно */
  #card-handle {
    height: 44px;
    touch-action: none;
  }
  #card-title,
  #card-category {
    touch-action: none;
  }
  .card-scroll {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

}