/* Общие стили 3D-карты — корневой index.html и страницы маршрутов
   (/routes/<slug>/, серверная карточка того же вида). Пути к ассетам —
   корневые абсолютные, стиль живёт в /app.css у обоих типов страниц. */
html, body { margin: 0; height: 100%; }
#map { position: absolute; inset: 0; }
#panel {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(20, 24, 28, .92); color: #eee; border-radius: 8px;
  font: 13px/1.45 system-ui, sans-serif; padding: 10px 12px;
  max-height: calc(100% - 20px); overflow: auto; min-width: 250px;
  max-width: min(340px, calc(100% - 20px));
}
/* заголовок панели: h1 — на корневой, .ptitle — на страницах маршрутов
   (там h1 занимает название маршрута в карточке) */
#panel h1, #panel .ptitle { font-size: 14px; margin: 0 0 6px; }
/* переключатель локаций: стрелки-ссылки ‹ › вокруг имени места
   (сервер рендерит ту же структуру — loc_switch в make_pages.py) */
.locswitch { display: flex; align-items: center; gap: 8px; }
.locswitch h1, .locswitch > span { flex: 1; text-align: center; margin: 0; }
.loc-arrow { flex: none; display: inline-flex; align-items: center;
             justify-content: center; width: 28px; height: 28px;
             border: 1px solid #55606b; border-radius: 999px;
             background: #2a323a; color: #cdd6dd;
             font: 18px/1 system-ui, sans-serif; text-decoration: none;
             cursor: pointer; user-select: none; }
.loc-arrow:hover { border-color: #7d8994; color: #fff; }
#panel .legend { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
#panel .legend span { display: inline-flex; align-items: center; gap: 4px; }
#panel .legend i { width: 14px; height: 3px; display: inline-block; }
.catbtns { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.catbtn { display: inline-flex; align-items: center; gap: 6px;
          padding: 5px 11px; border: 1px solid #3a4046; border-radius: 999px;
          background: #1b1f24; color: #9aa4ad; font: 12px/1 system-ui, sans-serif;
          cursor: pointer; user-select: none; }
.catbtn:hover { border-color: #5a6570; color: #cdd6dd; }
.catbtn.on { color: var(--c); border-color: var(--c);
             background: color-mix(in srgb, var(--c) 16%, #1b1f24); }
.catbtn svg { display: block; }
.filters { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px;
           border-top: 1px solid #333; padding-top: 8px; }
.filters .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filters label { cursor: pointer; user-select: none; }
.filters select { background: #222; color: #eee; border: 1px solid #444;
                  border-radius: 4px; font: inherit; padding: 1px 4px; }
#routes .r { padding: 5px 6px; border-radius: 5px; cursor: pointer; }
/* элементы списка — настоящие ссылки на /routes/<slug>/ (перехватываются
   в app.js; средний клик/Ctrl открывают страницу в новой вкладке) */
#routes a.r { display: block; color: inherit; text-decoration: none; }
#routes .r:hover, #routes .r.sel { background: #333; }
#routes .r small { color: #9ab; }
#routes .empty { color: #9ab; padding: 4px 6px; }
.catdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
          margin-right: 5px; }
/* Панель листается между двумя видами: список трасс ↔ карточка маршрута.
   Переключает класс card-open на #panel (на страницах маршрутов его ставит
   сервер — карточка открыта сразу); возврат — кнопка «← вернуться
   к трассам» или клик по пустому месту карты */
#panel-card { display: none; }
#panel.card-open #panel-list { display: none; }
#panel.card-open #panel-card { display: block; animation: flip-in .22s ease-out; }
#panel.back-flip #panel-list { animation: flip-in-back .22s ease-out; }
@keyframes flip-in { from { transform: translateX(18px); opacity: 0; } }
@keyframes flip-in-back { from { transform: translateX(-18px); opacity: 0; } }
#backToList {
  display: block; width: 100%; box-sizing: border-box;
  margin: 0 0 8px; padding: 7px 10px;
  background: #1b1f24; border: 1px solid #3a4046; border-radius: 6px;
  color: #cdd6dd; font: 12px/1.2 system-ui, sans-serif; cursor: pointer;
  text-align: left;
}
#backToList:hover { border-color: #5a6570; color: #fff; }
/* h1 — серверная карточка на странице маршрута, h2 — клиентская на карте;
   крестика нет: возврат к списку — кнопка #backToList над карточкой */
#card h1, #card h2 { font-size: 15px; margin: 0; }
#card .cat { color: #9ab; margin: 2px 0 6px; }
#card .desc { color: #cdd6dd; margin: 0 0 6px; white-space: pre-line; }
#card .links { display: flex; gap: 12px; margin-top: 6px; }
#card .stats { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 4px 0 8px; }
#card .stats b { font-weight: 600; }
#card .classes { display: flex; height: 6px; border-radius: 3px; overflow: hidden;
                 margin: 4px 0 2px; background: #222; }
#card .classes i { height: 100%; }
#card .classes-cap { color: #9ab; font-size: 11px; margin-bottom: 6px; }
#card .access { border-top: 1px solid #333; margin-top: 8px; padding-top: 6px; }
#card h3.access-title { color: #9ab; font-size: 11px; margin: 0 0 4px; }
#card .step { display: flex; gap: 7px; margin: 3px 0; }
#card .step[data-point] { cursor: pointer; }
#card .step[data-point]:hover b { color: #fff; }
#card .step svg { flex: none; margin-top: 2px; color: #9ab; }
#card .step .d { color: #9ab; font-size: 11px; }
#card .variant { display: flex; gap: 7px; margin: 5px 0; }
#card .vnum { flex: none; width: 15px; height: 15px; margin-top: 2px;
              border: 1px solid #4a545d; border-radius: 50%; color: #9ab;
              font: 10px/14px system-ui, sans-serif; text-align: center; }
#card .coords { display: flex; align-items: center; gap: 6px; margin: 7px 0 2px;
                flex-wrap: wrap; }
#card .coords code { background: #222; border-radius: 4px; padding: 2px 7px;
                     font: 11px ui-monospace, monospace; color: #cdd6dd; }
.pill { background: #1b1f24; border: 1px solid #3a4046; border-radius: 999px;
        color: #cdd6dd; font: 11px/1 system-ui, sans-serif; padding: 4px 10px;
        cursor: pointer; text-decoration: none; user-select: none; }
.pill:hover { border-color: #5a6570; color: #fff; }
#card svg.profile { width: 100%; height: 84px; display: block;
                    background: #16191d; border-radius: 4px; }
#card a { color: #7fb3ff; font-size: 11px; }
/* ориентиры на маршруте и перелинковка «тем же путём в другой сезон» */
#card .card-pois { border-top: 1px solid #333; margin-top: 8px; padding-top: 6px; }
#card .card-pois ul { margin: 0; padding: 0; list-style: none; }
#card .card-pois li { margin: 2px 0; }
#card .card-pois .ele { color: #9ab; font-size: 11px; }
#card .twin { margin: 6px 0 0; font-size: 12px; }
/* без JS карта не грузится — карточку на странице маршрута сопровождает
   статичная миниатюра рельефа (OG-картинка) */
#card img.hero { width: 100%; border-radius: 6px; display: block;
                 margin: 4px 0 6px; border: 1px solid #333; }
#hint { color: #9ab; margin-top: 8px; }
/* подвал панели: внутренние ссылки (каталог/карта) — в т.ч. для роботов */
#panel .pfoot { color: #78838d; font-size: 11px; margin-top: 10px;
                border-top: 1px solid #333; padding-top: 8px; }
#panel .pfoot a { color: #9ab; }
/* справа сверху — иконка телеграм-канала: место навигационного контрола
   MapLibre (убран как дубль: зум колесом/щипком, наклон — правой кнопкой) */
#tg-ctrl {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 6px;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
#tg-ctrl svg { width: 20px; height: 20px; fill: #2aa5dc; display: block; }
#tg-ctrl:hover svg { fill: #157ba8; }

/* ---- мобильная вёрстка: панель — нижняя шторка ----
   На узких экранах (<760px — как narrow-ветка fitBounds в app.js) левый
   сайдбар съедает карту целиком, поэтому панель переклеивается к нижнему
   краю и тянется за «ручку» #sheet-grip между тремя состояниями:
   sheet-peek / sheet-half / sheet-full (драг и прилипание — app.js).
   Ручку вставляет app.js, на десктопе она скрыта. Десктоп не тронут. */
#sheet-grip { display: none; }
@media (max-width: 760px) {
  #panel {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; min-width: 0; max-width: none; max-height: none;
    border-radius: 14px 14px 0 0;
    padding: 0 14px calc(12px + env(safe-area-inset-bottom));
    height: 55vh; height: 55dvh;
    transition: height .28s ease-out;
    box-shadow: 0 -6px 18px rgba(0,0,0,.35);
    overscroll-behavior: contain;
  }
  #panel.sheet-peek { height: calc(54px + env(safe-area-inset-bottom)); }
  #panel.sheet-half { height: 55vh; height: 55dvh; }
  #panel.sheet-full { height: calc(100vh - 44px); height: calc(100dvh - 44px); }
  #panel.dragging   { transition: none; }
  /* ручка: липнет к верху скролла панели, тянется пальцем, тап — шаг
     по состояниям; подпись — контекст (список или имя маршрута) */
  #sheet-grip {
    display: block; position: sticky; top: 0; z-index: 1;
    margin: 0 -14px 6px; padding: 9px 14px 7px;
    background: rgba(20,24,28,.97); border-bottom: 1px solid #333;
    border-radius: 14px 14px 0 0;
    text-align: center; cursor: grab; touch-action: none; user-select: none;
  }
  #sheet-grip:active { cursor: grabbing; }
  #sheet-grip span {
    display: block; width: 38px; height: 4px; border-radius: 2px;
    background: #5a6570; margin: 0 auto 6px;
  }
  #sheet-grip b {
    display: block; font: 600 13px/1.2 system-ui, sans-serif; color: #cdd6dd;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #hint { display: none; } /* Ctrl+drag — подсказка десктопа */
}