/* Страница остановок города (/<город>/stop/), шаблон stops.html, логика static/js/stops-N.js.
 * Десктоп: список слева, карта справа прилипает при прокрутке.
 * До 768px: карта на весь экран под шапкой сайта, список — шторка снизу, как в поиске пути.
 * Цвета плашек маршрутов — по виду транспорта, та же палитра, что TTYPE_COLOR в dir_map-N.js.
 */

:root {
  --st-ink:     #212121;
  --st-ink-2:   #434641;
  --st-muted:   #6f6b64;
  --st-line:    #ebe7df;
  --st-soft:    #f5f2ec;
  --st-yellow:  #FFE216;
  --st-red:     #b30000;
  --st-top:     64px;   /* высота шапки сайта; на телефоне JS уточняет */
  --st-bottom:  0px;    /* нижняя панель сайта на телефоне; задаёт JS */
  --st-sheet-h: 45dvh;  /* высота шторки на телефоне; задаёт JS */
}

#st-app [hidden] { display: none !important; }

/* ---------- Виды транспорта: цвет плашки, иконки, точки на карте ---------- */
.st-app .t0 { --c: #1565c0; } .st-app .t1 { --c: #00897b; } .st-app .t2 { --c: #c62828; }
.st-app .t3 { --c: #f9a825; } .st-app .t4 { --c: #00838f; } .st-app .t5 { --c: #6a1b9a; }
.st-app .t6 { --c: #455a64; } .st-app .t7 { --c: #d84315; } .st-app .t8 { --c: #8d6e63; }
.st-app .t9 { --c: #0288d1; }
.st-row.tt0 { --tc: #1565c0; } .st-row.tt1 { --tc: #00897b; } .st-row.tt2 { --tc: #c62828; }
.st-row.tt3 { --tc: #c88a00; } .st-row.tt4 { --tc: #00838f; } .st-row.tt5 { --tc: #6a1b9a; }
.st-row.tt6 { --tc: #455a64; } .st-row.tt7 { --tc: #d84315; } .st-row.tt8 { --tc: #8d6e63; }
.st-row.tt9 { --tc: #0288d1; }

/* ---------- Раскладка: десктоп ---------- */
.st-app { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start;
  color: var(--st-ink); margin-bottom: 24px; }
.st-panel { min-width: 0; display: flex; flex-direction: column; }
.st-scroll, .st-all { display: contents; }
.st-grip, .st-area, .st-mode { display: none; }

.st-crumbs { order: 1; margin: 2px 0 8px; font-size: 14px !important; }
.st-title { order: 2; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 18px; row-gap: 2px;
  margin-bottom: 14px; }
.st-title h1 { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.3px; color: var(--st-ink); }
.st-title h1 span { color: var(--st-ink-2); font-weight: 400; }
.st-total { color: var(--st-muted); font-size: 15px; }
.st-search { order: 3; display: flex; gap: 8px; margin-bottom: 14px; }
.st-abc { order: 4; }
.st-top { order: 5; }
.st-ad { order: 6; margin: 10px 0 4px; }
.st-groups { order: 7; }
.st-none { order: 8; }
.st-seo { order: 9; }

/* ---------- Поиск ---------- */
.st-sbox { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; height: 48px;
  padding: 0 6px 0 42px; background: #fff; border: 1px solid var(--st-line); border-radius: 12px;
  transition: border-color .12s ease, box-shadow .12s ease; }
.st-sbox:focus-within { border-color: #e0c700; box-shadow: 0 0 0 3px rgba(255,226,22,.35); }
.st-search-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--st-muted); pointer-events: none; }
#st-q { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 16px; color: var(--st-ink); -webkit-appearance: none; appearance: none; }
#st-q::-webkit-search-cancel-button { display: none; }
#st-q::placeholder { color: #9a958c; }
.st-clear { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent;
  color: var(--st-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.st-clear:hover { background: var(--st-soft); color: var(--st-ink); }
.st-mode { flex: none; width: 50px; height: 50px; border: 0; border-radius: 14px; background: #fff; color: var(--st-ink);
  cursor: pointer; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.14); }
.st-app[data-mode="map"] .st-ic-map, .st-app[data-mode="list"] .st-ic-list { display: none; }

/* ---------- Алфавитный указатель ---------- */
.st-abc { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 6px; }
.st-abc a, .st-abc span { min-width: 30px; height: 30px; padding: 0 4px; border-radius: 8px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 15px; font-weight: 700; text-decoration: none; }
.st-abc a { color: var(--st-ink); }
.st-abc a:hover { background: var(--st-soft); }
.st-abc a.on { background: var(--st-ink); color: #fff; }
.st-abc span { color: #c9c4ba; font-weight: 400; }

/* ---------- Группы и строки ---------- */
.st-group { scroll-margin-top: calc(var(--st-top) + 16px); }
/* отступ слева — как у строк (тикет 4871) */
.st-gh { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 0; padding: 0 8px 8px;
  border-bottom: 1px solid var(--st-line); font-size: 21px; font-weight: 800; color: var(--st-ink); }
.st-gh span { font-size: 13px; font-weight: 400; color: var(--st-muted); }
.st-rows { list-style: none; margin: 0; padding: 0; }

.st-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; row-gap: 8px;
  align-items: center; padding: 9px 8px; border-bottom: 1px solid var(--st-line); cursor: pointer;
  transition: background .1s ease; }
.st-row:hover, .st-row.hl { background: #fbf9f4; }
.st-row.open { background: #fffbe0; }
.st-row.sel { background: #fff3f0; }
/* иконка: автобусная остановка серым, рельсовая — цветом своего вида транспорта */
.st-row::before { content: ''; grid-column: 1; grid-row: 1; width: 18px; height: 18px; background: #a9a49a;
  -webkit-mask: var(--st-ic-bus) center / contain no-repeat; mask: var(--st-ic-bus) center / contain no-repeat; }
.st-app { --st-ic-bus-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23434641' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='4' width='16' height='12' rx='2.5'/%3E%3Cpath d='M4 10h16M8 20v-4M16 20v-4'/%3E%3C/svg%3E");
    --st-ic-rail-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23434641' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3' width='12' height='14' rx='3'/%3E%3Cpath d='M6 10h12M9 21l1.5-4M15 21l-1.5-4'/%3E%3C/svg%3E");
    --st-ic-bus-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='4' width='16' height='12' rx='2.5'/%3E%3Cpath d='M4 10h16M8 20v-4M16 20v-4'/%3E%3C/svg%3E");
    --st-ic-rail-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3' width='12' height='14' rx='3'/%3E%3Cpath d='M6 10h12M9 21l1.5-4M15 21l-1.5-4'/%3E%3C/svg%3E"); }
.st-row.rail::before { background: var(--tc, #455a64);
  -webkit-mask-image: var(--st-ic-rail); mask-image: var(--st-ic-rail); }
.st-app { --st-ic-bus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='4' width='16' height='12' rx='2.5'/%3E%3Cpath d='M4 10h16M8 20v-4M16 20v-4'/%3E%3C/svg%3E");
  --st-ic-rail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3' width='12' height='14' rx='3'/%3E%3Cpath d='M6 10h12M9 21l1.5-4M15 21l-1.5-4'/%3E%3Ccircle cx='9.5' cy='13.5' r='.6'/%3E%3Ccircle cx='14.5' cy='13.5' r='.6'/%3E%3C/svg%3E"); }

.st-name { grid-column: 2; grid-row: 1; min-width: 0; font-size: 16px; font-weight: 700; line-height: 1.3;
  color: var(--st-ink) !important; text-decoration: none; overflow-wrap: anywhere; }
.st-name:hover { text-decoration: underline; text-decoration-color: rgba(0,0,0,.3); }
.st-bs { grid-column: 3; grid-row: 1; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }

/* плашка маршрута */
.st-bs b, .st-ex .st-b, .st-card .st-b { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 23px;
  padding: 0 6px; border-radius: 6px; background: var(--c, #1565c0); color: #fff; font-size: 12.5px; font-weight: 700;
  line-height: 1; white-space: nowrap; text-decoration: none; }
.st-app .t3.st-b, .st-bs b.t3 { color: #212121; }
a.st-b:hover { filter: brightness(1.08); text-decoration: none; color: #fff; }
.st-more { height: 23px; min-width: 34px; padding: 0 7px; border: 0; border-radius: 6px; background: var(--st-soft);
  color: var(--st-ink-2); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.st-more:hover { background: var(--st-line); }
.st-row.open .st-bs { display: none; }

/* раскрытая строка: все маршруты ссылками и табло */
.st-ex { grid-column: 2 / -1; grid-row: 2; display: flex; flex-direction: column; gap: 10px; padding-bottom: 2px; cursor: default; }
.st-ex-bs { display: flex; flex-wrap: wrap; gap: 5px; }
.st-ex-board { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: 9px; background: var(--st-ink); color: #fff !important; font-weight: 700; font-size: 14px; text-decoration: none; }
.st-ex-board:hover { background: #3a3733; }
/* «Табло» в выбранной строке — то же, что в карточке на карте (тикет 4871); у раскрытой
   строки табло уже есть в .st-ex */
.st-row-board { grid-column: 2 / -1; justify-self: start; height: 30px; font-size: 13.5px; }
.st-row.open .st-row-board { display: none; }

/* ---------- Популярные и ближайшие — начало списка (тикет 4875) ---------- */
.st-topsec .st-gh { align-items: center; }
.st-near-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: 1px solid var(--st-line); border-radius: 9px; background: transparent; color: var(--st-ink);
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.st-near-btn:hover { background: var(--st-soft); }
.st-near-btn[disabled] { opacity: .6; cursor: progress; }
.st-near-msg { margin: 10px 8px 0; color: var(--st-muted); font-size: 14px; }
.st-dist { grid-column: 2; grid-row: 2; font-size: 12.5px; color: var(--st-muted); }

.st-none { margin: 24px 0; text-align: center; color: var(--st-muted); }

.st-seo { margin: 28px 0 8px; color: var(--st-muted); font-size: 14.5px; line-height: 1.6; max-width: 70ch; }
.st-seo h2 { font-size: 17px; color: var(--st-ink); margin: 0 0 8px; }
.st-seo p { margin: 0 0 8px; }

/* ---------- Поиск и алфавит прилипают к верху (тикет 4871) ---------- */
/* --st-stick-h (поиск + алфавит) меряет JS: на эту высоту уходит отступ при переходе к букве */
.st-app { --st-stick-bg: #fff; }
html.dark_theme .st-app { --st-stick-bg: var(--dk-surface); }
@media (min-width: 769px) {
  .st-search { position: sticky; top: var(--st-top); z-index: 5; margin-bottom: 0; padding: 8px 0;
    background: var(--st-stick-bg); }
  .st-abc { position: sticky; top: calc(var(--st-top) + 64px); z-index: 5; margin-bottom: 0; padding-bottom: 6px;
    background: var(--st-stick-bg); box-shadow: 0 1px 0 var(--st-line); }
  .st-group, .st-topsec { scroll-margin-top: calc(var(--st-top) + var(--st-stick-h, 110px) + 8px); }
}

/* ---------- Карта: десктоп ---------- */
/* Semantic UI ставит .pusher (обёртка всего содержимого base.html) overflow: hidden. Такой
   блок становится для sticky прокручиваемым предком, но сам не прокручивается — и карта
   уезжала вместе со списком (тикет 4833). overflow-x: clip режет по горизонтали так же, но
   прокручиваемым блоком не становится; файл грузится только на этой странице. */
.pushable > .pusher, .pusher { overflow: visible; overflow-x: clip; }
.st-mapcol { position: sticky; top: calc(var(--st-top) + 20px); height: calc(100vh - var(--st-top) - 40px);
  min-height: 360px; border: 1px solid var(--st-line); border-radius: 14px; overflow: hidden; background: #efebe3; }
#st-map { position: absolute; inset: 0; }
.st-expand { position: absolute; top: 10px; left: 10px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 9px;
  background: #fff; color: var(--st-ink); cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 6px rgba(0,0,0,.18); }
.st-expand:hover { background: var(--st-soft); }
.st-app.map-full .st-mapcol { position: fixed; top: var(--st-top); left: 0; right: 0; bottom: 0; height: auto;
  z-index: 1000; border: 0; border-radius: 0; }
/* карточка выбранной остановки поверх карты (десктоп) */
/* между кнопкой «развернуть» слева и зумом справа — не перекрывает ни то, ни другое */
.st-card { position: absolute; top: 10px; left: 56px; right: 52px; z-index: 3; display: flex; flex-direction: column;
  gap: 10px; padding: 14px 16px; background: #fff; border: 2px solid var(--st-ink); border-radius: 14px;
  box-shadow: 0 6px 24px rgba(28,26,23,.18); }
.st-card-head { display: flex; align-items: center; gap: 10px; }
.st-card-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 2.5px var(--tc, #1565c0);
  background: #fff var(--st-ic-bus-c) center / 16px no-repeat; }
.st-card.rail .st-card-ic { background-image: var(--st-ic-rail-c); }
.st-card-head b { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.st-card-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 8px; background: var(--st-soft);
  color: var(--st-ink-2); font-size: 18px; line-height: 1; cursor: pointer; }
.st-card-x:hover { background: var(--st-line); }
.st-card-bs { display: flex; flex-wrap: wrap; gap: 4px; max-height: 40vh; overflow-y: auto; }
.st-card.tt0 { --tc: #1565c0; } .st-card.tt1 { --tc: #00897b; } .st-card.tt2 { --tc: #c62828; } .st-card.tt3 { --tc: #c88a00; }
.st-card.tt4 { --tc: #00838f; } .st-card.tt5 { --tc: #6a1b9a; } .st-card.tt6 { --tc: #455a64; } .st-card.tt7 { --tc: #d84315; }
.st-card.tt8 { --tc: #8d6e63; } .st-card.tt9 { --tc: #0288d1; }

.st-app .maplibregl-popup-content { padding: 6px 10px; border-radius: 8px; font: 600 13px/1.3 inherit; }

/* ---------- До 768px: карта на весь экран, список — шторка ---------- */
@media (max-width: 768px) {
  html, body { overflow: hidden !important; height: 100%; }
  .st-app { position: fixed; top: var(--st-top); left: 0; right: 0; bottom: 0; z-index: 900; display: block; margin: 0;
    background: #efebe3; }
  .st-mapcol { position: absolute; inset: 0; height: auto; min-height: 0; border: 0; border-radius: 0; }
  .st-expand { display: none; }

  /* поиск и кнопка «список / карта» — поверх карты */
  .st-search { position: fixed; top: calc(var(--st-top) + 12px); left: 12px; right: 12px; z-index: 1001; margin: 0; }
  .st-sbox { height: 50px; border: 0; border-radius: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.14); }
  .st-mode { display: flex; }

  .st-panel { position: fixed; left: 0; right: 0; bottom: var(--st-bottom); z-index: 1000;
    height: var(--st-sheet-h); max-height: calc(100dvh - var(--st-top) - var(--st-bottom) - 74px);
    background: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.16);
    transition: height .26s cubic-bezier(.22,.61,.36,1); }
  .st-panel.dragging { transition: none; }
  .st-grip { display: flex; flex: none; height: 24px; align-items: center; justify-content: center; cursor: grab; touch-action: none; }
  .st-grip::before { content: ''; width: 42px; height: 5px; border-radius: 3px; background: #d7d2c8; }
  .st-scroll { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; padding: 0 16px 16px; }

  .st-app[data-mode="map"] .st-all { display: none; }
  .st-app[data-mode="map"] .st-area { display: block; }
  .st-app[data-mode="list"] .st-all { display: block; }
  .st-area-head { display: flex; align-items: baseline; gap: 10px; padding: 2px 0 6px; }
  .st-area-head b { font-size: 19px; font-weight: 800; }
  .st-area-head span { color: var(--st-muted); font-size: 15px; }
  .st-title h1 { font-size: 24px; }
  .st-crumbs { display: block; }
  .st-gh { font-size: 19px; margin-top: 16px; padding-left: 0; padding-right: 0; }
  /* в шторке алфавит прилипает к верху её прокрутки — одной строкой с горизонтальной
     прокруткой, чтобы не съедал полшторки */
  .st-abc { position: sticky; top: 0; z-index: 2; margin: 0 -16px 6px; padding: 4px 16px;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    background: var(--st-stick-bg); box-shadow: 0 1px 0 var(--st-line); }
  .st-abc::-webkit-scrollbar { display: none; }
  .st-abc a, .st-abc span { flex: none; }
  .st-group, .st-topsec { scroll-margin-top: calc(var(--st-stick-h, 40px) + 8px); }
  .st-dist { grid-row: 3; }

  /* строка: иконка в кружке, название, плашки ниже, стрелка справа */
  .st-row { grid-template-columns: 34px minmax(0, 1fr) 14px; padding: 11px 0; column-gap: 12px; row-gap: 6px; align-items: start; }
  .st-row::before { grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; background: #fff;
    -webkit-mask: none; mask: none; box-shadow: inset 0 0 0 2.5px var(--tc, #1565c0);
    background-image: var(--st-ic-bus-c); background-size: 18px; background-position: center; background-repeat: no-repeat; }
  .st-row.rail::before { -webkit-mask: none; mask: none; background: #fff var(--st-ic-rail-c) center / 18px no-repeat; }
  .st-row.sel::before { background: var(--st-red) var(--st-ic-bus-w) center / 18px no-repeat; box-shadow: none; }
  .st-row.sel.rail::before { background: var(--st-red) var(--st-ic-rail-w) center / 18px no-repeat; }
  .st-row::after { content: ''; grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 8px; height: 8px;
    border-right: 2px solid #b5b0a6; border-bottom: 2px solid #b5b0a6; transform: rotate(-45deg); }
  .st-row.open::after { transform: rotate(45deg); }
  .st-name { grid-row: 1; font-size: 16px; }
  .st-bs { grid-column: 2; grid-row: 2; }
  .st-ex { grid-column: 2; grid-row: 2; }
  .st-row.sel { background: #fff7f5; }

  /* кнопки зума — над шторкой. Готовое значение из JS, а не calc(var()): на /map при
     смене переменной внутри calc движок не пересчитывал bottom. */
  .st-app .maplibregl-ctrl-top-right { top: auto; bottom: var(--st-ctrl-bottom, 45vh); }
}

@media (max-width: 768px) {
  .st-card { display: none !important; }
}