/* Golos Text (OFL 1.1, fonts/OFL.txt) — свой хостинг вместо Google Fonts: без
   блокирующего CSS с чужого домена и без передачи IP посетителя Google (GDPR).
   Переменный шрифт: один файл на подмножество — все начертания 400–800.
   Подмножества и unicode-range — как у Google Fonts; ?v= — хэш содержимого
   (webassets.py) → immutable-кэш на год. */
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/golos-text-cyrillic.woff2?v=2f175b8fc4) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/golos-text-latin-ext.woff2?v=90256a7b8e) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/golos-text-latin.woff2?v=f8d7109111) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Токены дизайна (направление 1a: карта + шторка). Контраст текста ≥ 4.5:1
   на --card и на своих подложках (--*-bg) в обеих темах. */
:root {
  --bg: #f1f0ec;          /* фон приложения / вторичные подложки */
  --card: #ffffff;        /* шторка, карточки */
  --surface2: #f5f4f1;    /* вложенные блоки на карточке */
  --text: #111316;
  --muted: #595e66;
  --accent: #1d5bd6;
  --accent-fg: #1a4fbd;   /* текст акцента на --accent-bg */
  --accent-bg: #e6eefc;
  --ok: #0a6a39;
  --ok-dot: #13a35a;
  --ok-bg: #ddf3e6;
  --ok-glow: rgba(19,163,90,.5);
  --sched: #484d55;
  --sched-bg: #ecebe8;
  --warn: #6f4700;
  --warn-bg: #fbefd0;
  --bad: #b3261e;
  --bad-bg: #fde7e4;
  --border: #e3e1dc;
  --shadow: 0 2px 12px rgba(17,19,22,.14);
  --r-sheet: 20px;
  --r-card: 16px;
  --r-ctl: 14px;
  --font: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --star: #b07800;        /* избранное: 4.5:1 на --card */
  --accent-on: #ffffff;   /* текст на заливке --accent (бейдж линии без цвета из GTFS) */
  /* безопасные зоны (вырез, жестовая панель): viewport-fit=cover в index.html */
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  /* верх поисковой пилюли = 12 px + вырез; пилюля 52 px; ниже — 12 px до кнопок */
  --pill-bottom: calc(var(--sa-t) + 64px);
  --sheet-full-y: max(6dvh, calc(var(--pill-bottom) + 10px));
}
/* Тёмная тема управляется атрибутом data-theme на <html> (ставит инлайн-скрипт
   в index.html: явный выбор из localStorage mp_theme, иначе системная тема). */
/* системные элементы (полосы прокрутки, поле даты) — в цвет темы */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] {
  --bg: #0f1114;
  --card: #1a1d22;
  --surface2: #22262c;
  --text: #f2f3f5;
  --muted: #a4abb6;
  --accent: #7fa7ff;
  --accent-fg: #a9c3ff;
  --accent-bg: #1e2a44;
  --ok: #5fd896;
  --ok-dot: #4cd48c;
  --ok-bg: #12321f;
  --ok-glow: rgba(76,212,140,.5);
  --sched: #b9c0cb;
  --sched-bg: #2a2e35;
  --warn: #f2c662;
  --warn-bg: #33290f;
  --bad: #ff8f86;
  --bad-bg: #3b1d1b;
  --border: #30353d;
  --shadow: 0 2px 14px rgba(0,0,0,.5);
  --star: #f5c542;
  --accent-on: #0f1114;   /* белый на #7fa7ff — 2.4:1 */
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}
button, input, select { font-family: inherit; }
/* иконки: 24-сетка, обводка 2, currentColor (icon() в app.js) */
svg.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
svg.ic.ic-fill { fill: currentColor; }
/* иконка внутри строки текста — по высоте строчных букв */
.home-hint .ic, .ic-inline { width: 1.15em; height: 1.15em; vertical-align: -.22em; }
.home-hint .ic { color: var(--text); }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
/* заголовок карточки — цель программного фокуса (tabindex=-1, focusCardTitle) для
   диктора, а не элемент управления: после Enter в поиске рамка на нём — шум */
[tabindex="-1"]:focus { outline: none; }
#app { position: fixed; inset: 0; }
.loading { color: var(--muted); text-align: center; padding: 40px 0; }
.error-banner { background: var(--bad-bg); color: var(--bad); border-radius: var(--r-ctl); padding: 12px 16px; margin: 12px 0; font-weight: 500; }

/* --- map (главный холст) --- */
#map { position: absolute; inset: 0; z-index: 0; background: var(--bg); }
/* атрибуция карты: на телефоне её контейнер переносится в #sheet (над кромкой
   шторки), на десктопе — левый нижний угол карты (см. placeAttribution) */
.leaflet-control-attribution {
  font: 10.5px/1.4 var(--font); color: var(--muted); padding: 2px 8px; border-radius: 8px;
  background: color-mix(in srgb, var(--card) 86%, transparent) !important;
}
.leaflet-control-attribution a { color: inherit; text-decoration: underline; text-underline-offset: 1px; }
.leaflet-control-attribution svg { display: none !important; } /* флаг Leaflet — шум на 360 px */
/* десктоп: не дальше 12 px до колонки кнопок (она у панели: 404 + 48) */
.leaflet-left .leaflet-control-attribution { margin: 0 0 12px 12px; max-width: calc(100vw - 476px); }
#sheet > .leaflet-control-attribution {
  position: absolute; left: calc(8px + var(--sa-l)); bottom: 100%; margin: 0 0 8px; float: none;
  max-width: calc(100% - 92px); z-index: 1; transition: opacity .2s;
}
/* развёрнутая шторка закрывает карту целиком — подпись не нужна и легла бы на пилюлю */
.sheet--full > .leaflet-control-attribution { opacity: 0; pointer-events: none; }
/* Векторная подложка (MapLibre) имеет свой тёмный стиль. Инверсия — только для
   отката на растр OSM (#map.map-raster), маркеры/линии остаются штатными. */
:root[data-theme="dark"] #map.map-raster .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9); }

/* --- верхняя панель: поиск-пилюля «MiParada | поиск | Скан» --- */
#topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 600;
  padding: calc(12px + var(--sa-t)) calc(12px + var(--sa-r)) 12px calc(12px + var(--sa-l));
  display: flex; gap: 8px; align-items: flex-start; pointer-events: none;
}
#topbar > * { pointer-events: auto; }
.search-pill {
  flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 52px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 3px 3px 18px;
  box-shadow: var(--shadow);
}
.brand { font-weight: 800; font-size: 16px; white-space: nowrap; letter-spacing: -.01em; }
.brand b { color: var(--accent); font-weight: 800; }
.brand-sep { width: 1px; align-self: stretch; margin: 8px 0; background: var(--border); flex: none; }
.search-pill:focus-within { border-color: var(--accent); }
/* при фокусе поиск расширяется: прячем бренд и селектор оператора — виден весь placeholder */
#topbar.searching .brand, #topbar.searching .brand-sep { display: none; }
#topbar.searching #op { display: none; }
.result.search-hint { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.45; cursor: default; }
.result.search-hint:hover { background: none; }
.search-hint b { color: var(--text); font-weight: 600; }
.search-pill input {
  flex: 1; min-width: 0; border: none; background: none; color: var(--text);
  font-size: 16px; outline: none; padding: 0; height: 44px; /* тач-цель — вся высота пилюли */
}
.search-pill input::placeholder { color: var(--muted); opacity: 1; }
.scan-btn {
  flex: none; width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%;
  background: var(--sched-bg); color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.scan-btn .ic { width: 22px; height: 22px; }
.scan-btn:active { filter: brightness(.94); }
#op {
  max-width: 120px; min-height: 44px; background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-ctl); padding: 7px 6px; font-size: 12.5px;
  box-shadow: var(--shadow);
}
/* выбор города — на главном экране; на табло/маршруте место отдано поиску */
#topbar #op { display: none; }
.home-city { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.home-city select { flex: 1; min-width: 0; min-height: 44px; border: 1px solid var(--border); border-radius: var(--r-ctl);
  background: var(--card); color: var(--text); font-size: 15px; font-weight: 600; padding: 0 10px; }
.results {
  position: absolute; top: calc(var(--pill-bottom) + 8px); left: calc(12px + var(--sa-l)); right: calc(12px + var(--sa-r));
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card);
  overflow: hidden; box-shadow: 0 8px 28px rgba(0,0,0,.24); max-height: 50vh; overflow-y: auto;
}
.results:empty { display: none; }
.result {
  display: flex; justify-content: space-between; gap: 8px; min-height: 44px; align-items: center;
  padding: 10px 16px; cursor: pointer; border-bottom: 1px solid var(--border);
}
.result:last-child { border-bottom: none; }
.result:hover { background: var(--surface2); }
.result .code { color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- плавающие кнопки карты: одна колонка справа, шаг 12 px ---
   телефон: под поисковой пилюлей (выравнены по её правому краю), сверху вниз
   «Маршрут» · где я · тема; зум на тач-экранах скрыт — масштаб щипком (как в
   Google Maps). Десктоп: у левого края боковой панели, снизу, с зумом. */
#mapfabs {
  position: absolute; z-index: 500; right: calc(12px + var(--sa-r)); top: calc(var(--pill-bottom) + 12px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none;
}
#mapfabs > * { pointer-events: auto; }
.fab {
  width: 48px; height: 48px; padding: 0; border-radius: 50%;
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  cursor: pointer; box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
}
.fab .ic { width: 22px; height: 22px; }
.fab:active { background: var(--surface2); }
/* доминирующий вход в планировщик — расширенный FAB с подписью (MD3) */
.fab.fab-ext { width: auto; border-radius: 24px; padding: 0 20px 0 16px; gap: 8px;
  background: var(--accent-bg); border-color: transparent; color: var(--accent-fg); font-weight: 700; }
.fab-ext .ic { width: 20px; height: 20px; }
.fab-ext .fab-tx { font-size: 15px; line-height: 1; }
/* зум Leaflet перенесён в колонку: те же 48 px ширины, радиус и тень, что у FAB */
#mapfabs .leaflet-control-zoom {
  margin: 0; float: none; clear: none; border: 1px solid var(--border); border-radius: 24px;
  box-shadow: var(--shadow); overflow: hidden; background: var(--card);
}
#mapfabs .leaflet-control-zoom a {
  display: flex; align-items: center; justify-content: center; width: 46px; height: 44px;
  background: var(--card); color: var(--text); border: none; border-radius: 0; text-decoration: none;
}
#mapfabs .leaflet-control-zoom a + a { border-top: 1px solid var(--border); }
#mapfabs .leaflet-control-zoom a:hover { background: var(--surface2); }
#mapfabs .leaflet-control-zoom a.leaflet-disabled { color: var(--muted); background: var(--card); cursor: default; }
#mapfabs .leaflet-control-zoom .ic { width: 20px; height: 20px; }
@media (pointer: coarse) { #mapfabs .leaflet-control-zoom { display: none; } }
/* узкое окно с мышью: зум в колонке под пилюлей влезает над полушторкой (44%)
   только при высоте ≥ 820 px; ниже — колесо/щипок, без кнопок */
@media (max-width: 819.98px) and (max-height: 819.98px) { #mapfabs .leaflet-control-zoom { display: none; } }
/* телефон боком: колонка не влезает над полушторкой — строка под пилюлей */
@media (max-width: 819.98px) and (max-height: 520px) {
  #mapfabs { flex-direction: row; align-items: center; }
}

/* --- bottom sheet --- */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 700;
  height: 100%; height: 100dvh; /* dvh — динамическая высота вьюпорта (учитывает URL-бар мобильного Chrome) */
  background: var(--card); border-top-left-radius: var(--r-sheet); border-top-right-radius: var(--r-sheet);
  box-shadow: 0 -6px 28px rgba(0,0,0,.2);
  display: flex; flex-direction: column;
  transition: transform .26s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
/* vh — фолбэк для старых браузеров, dvh — точное значение на мобильных */
.sheet--full { transform: translateY(6vh); transform: translateY(var(--sheet-full-y)); }
.sheet--half { transform: translateY(44vh); transform: translateY(44dvh); }
.sheet--peek { transform: translateY(calc(100vh - 168px)); transform: translateY(calc(100dvh - 168px - var(--sa-b))); }
.sheet-handle {
  padding: 12px 0 8px; cursor: grab; touch-action: none; flex: none;
  min-height: 44px; display: flex; align-items: center; justify-content: center;
}
.sheet-handle .grip {
  display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--border);
}
.sheet-status { flex: none; color: var(--muted); font-size: 12.5px; text-align: center; padding: 0 16px 4px; min-height: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-status:empty { display: none; }
/* на табло остановки строка статуса карты не нужна: она отодвигала первое время ниже сгиба */
.sheet:has(#board > .board) .sheet-status { display: none; }
#sheetContent { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0 calc(16px + var(--sa-r)) calc(24px + var(--sa-b)) calc(16px + var(--sa-l)); }
/* Шторка высотой 100dvh сдвинута вниз transform'ом: нижняя её часть за экраном.
   Без компенсации конец списка в half недостижим прокруткой. */
@media (max-width: 819.98px) {
  .sheet--half #sheetContent { padding-bottom: calc(44vh + 24px); padding-bottom: calc(44dvh + 24px + var(--sa-b)); }
  .sheet--full #sheetContent { padding-bottom: calc(6vh + 24px); padding-bottom: calc(var(--sheet-full-y) + 24px + var(--sa-b)); }
}

/* сводка в свёрнутой шторке (peek) — видна ТОЛЬКО в состоянии peek,
   иначе дублирует шапку табло в half/full */
.peekbar { flex: none; padding: 0 16px 10px; display: none; }
.sheet--peek .peekbar.active { display: block; cursor: pointer; }
.peek-name { font-weight: 800; font-size: 19px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peek-name.peek-route { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.peek-arrs { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; overflow: hidden; }
.peek-arr { display: flex; align-items: center; gap: 8px; min-width: 0; }
.peek-dest { flex: 1; min-width: 0; color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* в свёрнутой шторке — только сводка: начало табло под ней обрезалось краем экрана */
@media (max-width: 819.98px) { .sheet--peek:has(.peekbar.active) #sheetContent { visibility: hidden; } }
.peekbar .badge { min-width: 34px; font-size: 13px; padding: 4px 7px; }
.peek-eta { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.peek-eta.strike { text-decoration: line-through; color: var(--muted); }
.peek-arr .tlabel { padding: 0; }
.peek-none { color: var(--muted); font-size: 14px; }
.alerts-tr { font-size: 13px; color: var(--muted); padding: 2px 4px 0; }
.alerts-tr-btn { border: 0; background: none; padding: 10px 0; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
/* свёрнутая шторка маршрута: итог выбранного варианта в три строки */
.peek-dir-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.peek-dir-dur { font-weight: 800; font-size: 20px; letter-spacing: -.01em; white-space: nowrap; }
.peek-dir-times { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peek-dir-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: none; }
.peek-dir-step { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface2); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; }
.peek-dir-pos { min-width: 30px; text-align: center; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.peek-dir-mid { display: flex; align-items: center; gap: 10px; margin-top: 4px; min-width: 0; }
.peek-dir-mid .dir-chain { flex: 1; min-width: 0; overflow: hidden; flex-wrap: nowrap; margin-top: 0; }
.peek-dir-mid > span { flex: none; }
.peek-dir-hint { margin-top: 6px; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.home-hint { color: var(--muted); font-size: 14.5px; padding: 6px 2px 14px; }
/* язык интерфейса — тихая строка внизу главной */
.home-lang { display: flex; justify-content: center; padding: 8px 0 4px; }
.home-lang .seg-btn { min-height: 36px; padding: 0 12px; font-size: 13.5px; }
.home-hint p { margin: 10px 0 0; }
.home-near { margin-top: 0; width: 100%; }
.home-hint b { color: var(--text); }

/* --- избранное --- */
.favs { margin-bottom: 4px; }
/* избранное — быстрый вход с главной; на табло/маршруте/месте оно сдвигало шапку вниз */
body[data-view]:not([data-view="home"]) .favs { display: none; }
.fav-title, .sec-title, .dir-label {
  font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
}
.fav-title { margin: 10px 0 6px; }
.fav-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.fav-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 44px;
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer;
  text-align: left;
}
.fav-chip:active { background: var(--surface2); }
.fav-chip .code { color: var(--muted); }
.fav-chip .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-chip.route .badge { min-width: 30px; font-size: 12.5px; padding: 2px 6px; }

/* --- карточка (табло/маршрут/планировщик) --- */
.card { padding: 4px 0 8px; }
.stop-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.sh-title { flex: 1; min-width: 0; }
/* карточка линии: «Назад» и звезда остаются на виду при прокрутке длинного термометра */
.route-head { position: sticky; top: 0; z-index: 2; background: var(--card); padding: 4px 0 6px; margin-bottom: 4px; }
.stop-head h2 { font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.015em; margin: 2px 0 3px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.stop-head .code { color: var(--muted); font-size: 14px; line-height: 1.3; }
.round-btn, .star {
  border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 21px; cursor: pointer;
  flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  line-height: 1;
}
.round-btn:active, .star:active { background: var(--surface2); }
.star.active { color: #c98a00; border-color: #e9c45a; }
:root[data-theme="dark"] .star.active { color: #f5c542; border-color: #8a6d1c; }
.back-btn { border-color: transparent; background: var(--surface2); }

/* действия табло: «Как доехать сюда» + дата */
.stop-actions { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.dir-here-btn {
  flex: 1; min-width: 0; min-height: 46px; display: block; width: 100%;
  border: none; background: var(--accent-bg); color: var(--accent-fg);
  border-radius: var(--r-ctl); padding: 10px 12px; font-size: 15.5px; font-weight: 700; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dir-here-btn:active { filter: brightness(.96); }
.date-ctl {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 50px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-ctl);
  background: var(--card); color: var(--text); font-size: 15.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.date-ctl.other { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.date-ctl:focus-within { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.date-caret { font-size: 13px; }
/* нативный выбор даты — прозрачный поверх подписи: тап открывает системный пикер */
.date-ctl .date-input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
  border: none; padding: 0; margin: 0; font-size: 16px;
}
.date-ctl .date-input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.date-ctl.date-link { min-height: 44px; margin-top: 8px; padding: 0 4px; border: none; background: none; color: var(--muted);
  font-size: 13.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.board-ctl .dir-here-btn { flex: 1 1 0; width: auto; }
.board-ctl .seg-btn { padding: 0 12px; }
.date-strip {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  background: var(--warn-bg); color: var(--warn); border-radius: var(--r-ctl); padding: 6px 6px 6px 14px;
  font-size: 13.5px; font-weight: 500; margin: -2px 0 12px;
}
.date-reset { flex: none; min-height: 40px; border: none; border-radius: 10px; padding: 0 14px;
  background: var(--card); color: var(--text); font-weight: 700; font-size: 13.5px; cursor: pointer; }

.date-chip { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px; padding: 0 16px; font-size: 13.5px; font-weight: 500; cursor: pointer; min-height: 44px; }
.date-chip.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-fg); font-weight: 700; }
.dir-switch { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.dir-switch .date-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.date-input { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 10px; padding: 4px 8px; font-size: 13.5px; }

/* оповещения оператора: компактная плашка, тап раскрывает список */
.alerts { margin: 0 0 8px; }
.alerts-plaque {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; text-align: left;
  border: none; border-radius: var(--r-ctl); padding: 8px 12px 8px 16px; cursor: pointer;
  background: var(--warn-bg); color: var(--warn); font-size: 14.5px;
}
.alerts-plaque b { flex: none; font-weight: 700; }
.ap-first { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ap-first::before { content: "· "; }
.ap-chev { flex: none; font-size: 22px; line-height: 1; transition: transform .18s ease; }
.alerts.open .ap-chev { transform: rotate(90deg); }
.alerts-list { padding: 2px 0 0; }
.alerts-list[hidden] { display: none; }

.warn-note { background: var(--warn-bg); color: var(--warn); border-radius: var(--r-ctl); padding: 12px 16px; font-size: 14px; margin: 8px 0; }
.warn-note.clamp:not(.open) > span { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.warn-note.clamp { cursor: pointer; }
.warn-note a { color: inherit; font-weight: 700; text-decoration: underline; display: inline-block; padding: 12px 6px; margin: -12px -2px; }
.dir-geo-wait { color: var(--muted); font-size: 14px; margin: 4px 2px 10px; }
.geo-fail-acts { display: grid; gap: 8px; margin: 0 0 8px; }
.geo-fail-acts .dir-here-btn { white-space: normal; }
.empty { color: var(--muted); text-align: center; padding: 18px 0; }

/* переключатели вида/фильтра */
.board-ctl { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; margin: 0; }
.seg { display: inline-flex; background: var(--sched-bg); border-radius: 12px; padding: 2px; gap: 2px; }
.seg-btn { border: none; background: none; color: var(--muted); font-size: 14px; font-weight: 600;
  min-height: 44px; padding: 0 16px; border-radius: 10px; cursor: pointer; }
.seg-btn.active { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.14); }

.sec-title { flex: none; }
.sec-upd { font-variant-numeric: tabular-nums; }
/* живые данные догружаются: ненавязчивая пульсация вместо «вживую» */
.sec-upd.pending, .dir-status.pending { animation: rt-pending 1.2s ease-in-out infinite; }
.sec-upd.stale { color: var(--warn); font-weight: 600; }
@keyframes rt-pending { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .sec-upd.pending, .dir-status.pending { animation: none; } }
.help-btn { flex: none; border: none; background: none; color: var(--muted); font-size: 13px; font-weight: 800; cursor: pointer;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; position: relative; }
.help-btn::before { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; top: 12px; left: 12px; box-sizing: border-box; }
.help-btn:active { background: var(--surface2); }

/* --- группы прибытий: линия + направление --- */
.grp-list { display: flex; flex-direction: column; }
.grp {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 0;
  border-bottom: 1px solid var(--border); position: relative;
}
.grp-list > .grp:last-child { border-bottom: none; }
.grp.clickable { cursor: pointer; }
.grp.clickable:hover { background: linear-gradient(90deg, transparent, var(--surface2) 8%, var(--surface2) 92%, transparent); }
.grp.clickable:active { background: var(--surface2); }
.grp > .badge { margin-top: 1px; }
.grp-body { flex: 1; min-width: 0; }
.grp-dest { font-weight: 700; font-size: 17px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-arrow { color: var(--muted); font-weight: 500; }
.grp-chev { flex: none; align-self: center; color: var(--muted); font-size: 24px; line-height: 1; }
.grp-times { display: flex; align-items: flex-end; gap: 6px 14px; margin-top: 8px; flex-wrap: wrap; }
.tlabel { font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; padding-bottom: 3px; }
.tlabel.ok { color: var(--ok); } .tlabel.ok::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok-dot); }
.tlabel.sched { color: var(--muted); } .tlabel.warn { color: var(--warn); } .tlabel.bad { color: var(--bad); }
/* последний рейс линии с остановки (как LAST у Transit): форма + текст, не только цвет */
.tlast { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: .02em;
  color: var(--warn); border: 1.5px solid currentColor; border-radius: 6px; padding: 0 5px; white-space: nowrap; }
.tcell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.tval { font-size: 19px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.tval b { font-weight: 800; }
.tval .unit { font-size: .62em; font-weight: 700; margin-left: 2px; }
.tcell.first .tval { font-size: 30px; letter-spacing: -.02em; }
.tcell.sched .tval { color: var(--sched); }
.tcell.first.sched .tval { color: var(--text); }
.tcell.strike .tval { text-decoration: line-through; color: var(--muted); }
.tcell .chip { margin: 0; }
.grp-sub { margin-top: 8px; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.grp-note { margin-top: 6px; font-size: 13.5px; color: var(--warn); }
.grp-nodata { margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--warn); }
/* линии без прибытий в окне */
.grp.grp-off, .grp.grp-nodata, .grp.grp-done, .grp.grp-later { align-items: center; }
.grp-list > .grp.grp-off, .grp-list > .grp.grp-nodata, .grp-list > .grp.grp-done {
  border: 1.5px dashed var(--border); border-radius: var(--r-card); padding: 12px 12px 12px 14px; margin: 10px 0 0;
}
.grp-list > .grp.grp-off { border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.grp-stitle { font-weight: 700; font-size: 15.5px; }
.grp-off .grp-stitle { color: var(--bad); }
.grp-ssub { font-size: 13.5px; color: var(--muted); margin-top: 1px; }
.badge.badge-off { background: transparent; color: var(--bad); box-shadow: inset 0 0 0 2px var(--bad); }
.grp-later .badge { opacity: .85; }

.badge { min-width: 46px; text-align: center; font-weight: 800; font-size: 16px; line-height: 1.2; border-radius: 10px; padding: 7px 8px; background: var(--accent); color: var(--accent-on); flex: none; font-variant-numeric: tabular-nums; }
.badge.clickable { cursor: pointer; }
.badge.clickable:hover { outline: 2px solid var(--accent); outline-offset: 1px; }

/* статус-чипы: ВЖИВУЮ / ПО РАСПИСАНИЮ / НЕТ ДАННЫХ / НЕ ХОДИТ */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .025em; border-radius: 999px; padding: 3px 8px; margin-top: 4px; white-space: nowrap; }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.ok::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok-dot); flex: none;
  animation: livepulse 1.8s ease-out infinite;
}
.chip.sched { background: var(--sched-bg); color: var(--sched); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }

/* «живое» прибытие пульсирует — сразу видно, что данные realtime, а не расписание */
@keyframes livepulse {
  0%   { box-shadow: 0 0 0 0 var(--ok-glow); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* --- шкала «ближайший час» --- */
.tl { margin: 4px 0 8px; --lab: 76px; }
.tl-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.tl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tl-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tl-dot.ok { background: var(--text); }
.tl-dot.sched { border: 2px solid var(--text); }
.tl-hatch { width: 16px; height: 10px; border-radius: 3px; display: inline-block;
  background: repeating-linear-gradient(135deg, var(--muted) 0 2px, transparent 2px 5px); opacity: .7; }
.tl-axis { display: grid; grid-template-columns: var(--lab) 1fr; position: sticky; top: 0; z-index: 3; /* выше .tl-tip (2): подсказка не наезжает на липкую ось */
  background: var(--card); padding: 4px 0 6px; }
.tl-axis .tl-track { height: 18px; }
.tl-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-tick.first { transform: none; font-weight: 700; color: var(--text); }
.tl-tick.last { transform: translateX(-100%); }
.tl-lanes { position: relative; }
.tl-lanes::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--lab) + 8px); width: 2px; background: var(--accent); border-radius: 1px; opacity: .8; }
.tl-lane { display: grid; grid-template-columns: var(--lab) 1fr; align-items: center; min-height: 52px; border-radius: 12px; }
.tl-lane.clickable { cursor: pointer; }
.tl-lane.clickable:active { background: var(--surface2); }
.tl-lane.has-near { min-height: 66px; padding-top: 14px; }
.tl-lab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding-right: 8px; }
.tl-lab .badge { min-width: 44px; font-size: 14.5px; padding: 5px 7px; }
.tl-dest { font-size: 11.5px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-track { position: relative; height: 30px; margin: 0 10px 0 8px; }
.tl-lane .tl-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--border); }
.tl-pt { --lc: var(--accent); position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; z-index: 1; }
.tl-pt.ok { background: var(--lc); box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--text); }
.tl-pt.sched { background: var(--card); border: 3px solid var(--lc); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 35%, transparent); }
.tl-pt.warn { background: var(--card); border: 2.5px dashed var(--warn); }
.tl-pt.bad { background: var(--card); border: 2.5px solid var(--bad); }
.tl-pt.near { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
.tl-pt.near.ok { box-shadow: 0 0 0 3px var(--card), 0 0 0 7px color-mix(in srgb, var(--lc) 35%, transparent); }
.tl-tip { position: absolute; bottom: calc(50% + 15px); transform: translateX(-50%); z-index: 2;
  background: var(--text); color: var(--card); font-size: 12.5px; font-weight: 700; padding: 2px 8px; border-radius: 8px; white-space: nowrap; }
.tl-nodata, .tl-text { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 1; }
.tl-nodata { height: 28px; line-height: 28px; text-align: center; border-radius: 8px; color: var(--text);
  background: repeating-linear-gradient(135deg, var(--sched-bg) 0 6px, var(--card) 6px 11px); box-shadow: inset 0 0 0 1px var(--border); }
.tl-nodata { padding: 0 6px; }
.tl-text { background: var(--card); padding: 0 2px 0 8px; white-space: normal; line-height: 1.25; font-size: 12.5px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.tl-text.bad { color: var(--bad); }
.tl-text.muted { color: var(--muted); font-weight: 500; }
.tl-nearest { margin-top: 6px; }
.tl-nearest > .grp { background: var(--surface2); border-radius: var(--r-card); padding: 14px; border: none; }

@media (max-width: 380px) {
  /* узкий экран: два времени в строке группы, а не три */
  .grp-times .tcell:nth-child(3) { display: none; }
  .tl { --lab: 64px; }
  .stop-head h2 { font-size: 24px; }
  .dir-here-btn { font-size: 15px; padding: 10px; }
  .date-ctl { padding: 0 11px; font-size: 15px; }
  .search-pill { gap: 8px; padding-left: 16px; }
}

/* --- маркеры карты: одна система, как в Google/Apple Maps ---
   синяя точка с ореолом и «лучом» — вы; белое кольцо с тёмным ободом — начало
   маршрута; красная капля — выбранное место, остановка или цель. Различаются
   формой, а не только цветом (дальтонизм), и не путаются между собой. */
:root { --me: #1a73e8; --pin: #ea4335; --pin-dark: #b3261e; }
.me-div { background: none; border: none; }
.me-dot { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; background: var(--me); border: 3px solid #fff; z-index: 2;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 1px 5px rgba(0,0,0,.45); }
/* мягкий пульс при появлении позиции (3 раза, не бесконечно: вечная анимация
   держит компоситор в 60 к/с и тратит батарею) — только у вас */
.me-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: var(--me); opacity: 0; animation: mepulse 2.4s ease-out 3; z-index: -1; }
@keyframes mepulse {
  0%   { transform: scale(1); opacity: .45; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
/* луч направления взгляда (компас): клин 70°, тает к краю */
.me-beam { position: absolute; left: 50%; top: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px;
  border-radius: 50%; pointer-events: none; z-index: 1;
  background: conic-gradient(from -35deg, rgba(26,115,232,.55) 0deg 70deg, transparent 70deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 70%);
  mask-image: radial-gradient(circle, #000 18%, transparent 70%); }
.me-beam[hidden] { display: none; }
/* позиция не подтверждена > 60 с (нет фикса, вкладка была в фоне) — серая, без луча:
   не выдаём старое место за текущее */
.me-div.stale .me-dot { background: #8a97a8; }
.me-div.stale .me-dot::after, .me-div.stale .me-beam { display: none; }
.origin-div { background: none; border: none; }
.origin-ring { display: block; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  border: 4.5px solid #202124; box-shadow: 0 0 0 1.5px #fff, 0 1px 5px rgba(0,0,0,.45); }
/* капля: квадрат со скруглением, повёрнутый остриём вниз; острие — точка на карте */
.pin-div { background: none; border: none; }
.pin { display: block; position: relative; width: 32px; height: 32px; border-radius: 50% 50% 50% 3px;
  transform: rotate(-45deg); background: var(--pin); border: 2px solid var(--pin-dark);
  box-shadow: 0 0 0 1.5px #fff, 0 3px 8px rgba(0,0,0,.4); }
.pin-ic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: rotate(45deg); }
.pin-ic .ic { width: 17px; height: 17px; color: #fff; stroke-width: 2.4; }
.pin-hole { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: #fff; }
/* пеший путь по улицам: серые точки с белым ободком (по прямой — штрихи, цвет в app.js) */
.walk-dots { stroke: #566274; }
.walk-halo { stroke: #fff; }
:root[data-theme="dark"] .walk-dots { stroke: #c3cad6; }
:root[data-theme="dark"] .walk-halo { stroke: #0f1114; }
/* построен маршрут — прочие остановки приглушены, маршрут читается первым
   (как в Google Maps); тапать по ним по-прежнему можно */
.leaflet-stops-pane { transition: opacity .2s; }
body[data-view="directions"].has-journey .leaflet-stops-pane { opacity: .4; }
/* те же знаки в форме «Откуда / Куда» — связь поля с маркером на карте */
.ep-mark { display: inline-block; vertical-align: -1px; margin-right: 6px; flex: none; }
.ep-mark.from { width: 10px; height: 10px; border-radius: 50%; border: 3px solid var(--text); background: var(--card); box-sizing: border-box; }
.ep-mark.to { width: 10px; height: 10px; border-radius: 50% 50% 50% 1px; transform: rotate(-45deg) translate(1px, -1px);
  background: var(--pin); position: relative; }
.ep-mark.to::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .chip.ok::before, .me-dot::after, .dir-status.live::before,
  .skel-badge, .skel-line, .skel-eta, .star.pop, .dir-opt, .help-modal { animation: none; }
  .sheet, .ap-chev { transition: none; }
}

.lines { display: flex; flex-wrap: wrap; gap: 8px; }
.lines[hidden] { display: none; }
.fold-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; margin: 8px 0 0;
  border: none; background: none; padding: 0; cursor: pointer; text-align: left; font: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.fold-btn.open .ap-chev { transform: rotate(90deg); }
.line-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text);
  border-radius: 12px; padding: 6px 10px 6px 6px; font-size: 13.5px; min-height: 44px; font-family: inherit; }
.line-chip.clickable { cursor: pointer; }
.line-chip.clickable:hover { border-color: var(--accent); }
.line-chip .badge { min-width: 34px; font-size: 13.5px; padding: 4px 6px; }
.line-chip .hours { color: var(--muted); font-variant-numeric: tabular-nums; }

.board-foot { color: var(--muted); font-size: 13px; margin-top: 16px; }
.feedback-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.feedback-link:hover { color: var(--accent); }

/* --- строки статусов в справке «?» --- */
.help-row { display: flex; align-items: baseline; gap: 10px; font-size: 14px; margin: 8px 0; line-height: 1.4; }
.help-row .chip { flex: none; margin: 0; min-width: 116px; justify-content: center; }

/* --- справка «?»: статусы + источник данных --- */
.help-modal { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); padding: 20px; animation: help-fade .15s ease; }
@keyframes help-fade { from { opacity: 0; } to { opacity: 1; } }
.help-box { width: 100%; max-width: 440px; background: var(--card); color: var(--text);
  border-radius: var(--r-sheet); padding: 18px 20px; box-shadow: 0 12px 40px rgba(0,0,0,.3);
  max-height: calc(100dvh - 40px); overflow-y: auto; }
.help-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 18px; margin-bottom: 10px; }
.help-close { border: none; background: var(--surface2); color: var(--text); cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%; }
.help-src { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--muted); line-height: 1.55; }

.help-theme { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.help-theme .seg-btn { padding: 0 10px; font-size: 13px; }

/* --- retry-кнопка в edge-состояниях --- */
.retry-btn { margin-top: 10px; border: none; background: var(--accent-bg); color: var(--accent-fg);
  border-radius: var(--r-ctl); padding: 10px 18px; font-size: 15px; font-weight: 700; cursor: pointer; min-height: 46px; }
.retry-btn:active { filter: brightness(.96); }

/* --- skeleton-загрузка табло --- */
.skel { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.skel:last-child { border-bottom: none; }
.skel-badge { width: 46px; height: 34px; border-radius: 10px; flex: none; }
.skel-mid { flex: 1; }
.skel-line { height: 13px; border-radius: 6px; margin: 5px 0; }
.skel-line.w60 { width: 60%; } .skel-line.w40 { width: 40%; }
.skel-eta { width: 56px; height: 26px; border-radius: 8px; flex: none; }
.skel-badge, .skel-line, .skel-eta {
  background: linear-gradient(90deg, var(--sched-bg) 25%, var(--border) 37%, var(--sched-bg) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* --- «pop» при добавлении в избранное --- */
@keyframes starpop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.star.pop { animation: starpop .32s ease; }

/* --- термометр маршрута --- */
.thermo { margin-top: 8px; }
.thermo-stop { display: flex; align-items: center; gap: 10px; padding: 7px 4px; cursor: pointer; position: relative; }
.thermo-stop:hover { background: var(--sched-bg); border-radius: 8px; }
.thermo-dot { width: 13px; height: 13px; border-radius: 50%; border: 3px solid var(--accent); background: var(--card); flex: none; z-index: 1; }
.thermo-stop:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 50%; height: 100%; width: 3px; background: var(--border); z-index: 0; }
.thermo-name { font-size: 14.5px; }
.thermo-stop.current { font-weight: 700; }
.thermo-stop.current .thermo-dot { background: var(--accent); width: 15px; height: 15px; }
.thermo-stop.current .thermo-name { color: var(--accent); }

/* --- построение маршрута --- */
/* поля «Откуда/Куда» подряд, ⇅ — справа по центру между ними (как у Google/Apple
   Maps): отдельной строкой посередине он висел оторванно и съедал ~80 px высоты */
.dir-form { display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "from swap" "to swap";
  column-gap: 8px; row-gap: 10px; margin: 4px 0 8px; }
.dir-form > .dir-field:first-child { grid-area: from; }
.dir-form > .dir-field:last-child { grid-area: to; }
.dir-form > .dir-swap { grid-area: swap; align-self: center; margin: 0; }
.dir-field { min-width: 0; }
.dir-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 3px 2px; }
.dir-inputrow { display: flex; align-items: center; gap: 6px; }
.dir-input {
  flex: 1; min-width: 0; border: 1px solid var(--border); background: var(--card); color: var(--text);
  border-radius: 12px; padding: 9px 12px; font-size: 15px; min-height: 46px; outline: none;
}
.dir-input:focus { border-color: var(--accent); }
.dir-iconbtn {
  flex: none; width: 46px; height: 46px; border: 1px solid var(--border); background: var(--card); color: var(--text);
  border-radius: 12px; font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.dir-iconbtn:active { background: var(--sched-bg); }
.dir-swap {
  flex: none; width: 44px; height: 44px; border: 1px solid var(--border); background: var(--card);
  color: var(--muted); border-radius: 50%; cursor: pointer;
}
.dir-swap:active { background: var(--sched-bg); }
.dir-timerow { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.dir-nowchip { border: 1px solid var(--border); background: var(--card); color: var(--text);
  border-radius: 999px; padding: 0 16px; font-size: 13.5px; cursor: pointer; min-height: 44px; }
.dir-nowchip.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-fg); font-weight: 700; }
.dir-timeinput { border: 1px solid var(--border); background: var(--card); color: var(--text);
  border-radius: 12px; padding: 0 12px; font-size: 13.5px; min-height: 44px; font-variant-numeric: tabular-nums; }
/* ≤ 340 px: «Уехать в · Приехать к · Сейчас» в один ряд, время и день — во второй
   (иначе три ряда, 148 px шторки при 320 px) */
@media (max-width: 340px) {
  .dir-timerow { gap: 6px; }
  .dir-nowchip { padding: 0 11px; }
}
.dir-timebtn { margin: 0 0 10px; }
/* строка-итог при готовых вариантах: «A → B · Сейчас ▾» рядом с «Назад» */
.dir-summary { flex: 1; min-width: 0; min-height: 44px; border: 1px solid var(--border); background: var(--card);
  color: var(--text); border-radius: 12px; padding: 0 12px; font-size: 14px; font-weight: 600; text-align: left;
  display: flex; align-items: center; gap: 6px; cursor: pointer; }
.dir-summary-route { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-summary-time { flex: none; white-space: nowrap; color: var(--accent-fg); }
.dir-favs { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 8px; padding-bottom: 2px; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent; } /* без белой системной полосы в тёмной теме */
.dir-favs::-webkit-scrollbar { height: 4px; }
.dir-favs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.dir-favchip { flex: none; border: 1px solid var(--border); background: var(--card); color: var(--text);
  border-radius: 999px; padding: 0 14px 0 12px; font-size: 13.5px; cursor: pointer; white-space: nowrap;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; min-height: 44px; }
.dir-favchip:active { background: var(--sched-bg); }
.dir-chip {
  display: flex; align-items: center; gap: 8px; min-height: 46px;
  border: 1px solid var(--border); background: var(--surface2); border-radius: 12px; padding: 0 0 0 12px;
}
.dir-chip-txt { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-clear { flex: none; width: 44px; height: 44px; margin: 0; border: none; background: none; color: var(--muted); cursor: pointer; border-radius: 11px; }
.dir-clear:active { background: var(--border); }
.dir-drop { display: flex; flex-direction: column; }
.dir-drop:empty { display: none; }
.dir-pickhint { background: var(--warn-bg); color: var(--warn); border-radius: 12px; padding: 8px 12px; font-size: 13px; margin: 4px 0 8px; }
.dir-maptip { color: var(--muted); font-size: 12.5px; margin: 0 0 8px; }

@keyframes dir-fadeup { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dir-opt { border: 1px solid var(--border); border-radius: var(--r-card); padding: 12px 16px; margin: 8px 0; cursor: pointer;
  animation: dir-fadeup .2s ease both; }
.dir-opt:active { background: var(--sched-bg); }
.dir-opt.sel { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent) inset; }
.dir-opt-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dir-dur { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.dir-times { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; flex: 1; white-space: nowrap; }
.dir-times-note { display: block; font-size: 11.5px; line-height: 1.2; }
.dir-transfers { font-size: 12.5px; color: var(--muted); }
.dir-status { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.dir-status.sched { background: var(--sched-bg); color: var(--sched); }
.dir-status.live { background: var(--ok-bg); color: var(--ok); display: inline-flex; align-items: center; gap: 5px; }
.dir-status.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok-dot);
  animation: livepulse 1.8s ease-out infinite; }
.tl-live { color: var(--ok); font-weight: 600; }
.tl-live.stale { color: var(--muted); font-weight: 400; }
/* отправление по живому прогнозу в карточке варианта; устаревшее — серым + «обновить» */
.dir-live { font-size: 13px; color: var(--ok); font-weight: 600; margin-top: 6px; font-variant-numeric: tabular-nums; }
.dir-live.stale { color: var(--muted); font-weight: 400; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.dir-warn { font-size: 13px; color: var(--warn); background: var(--warn-bg); border-radius: 8px; padding: 4px 8px; margin-top: 6px; }
.dir-refresh { border: 1px solid var(--border); background: var(--card); color: var(--accent); border-radius: 999px;
  padding: 4px 10px; font-size: 12.5px; cursor: pointer; min-height: 30px; }
.dir-refresh:active { background: var(--sched-bg); }
.dir-chain { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.dir-chain .badge.dir-badge { min-width: 30px; font-size: 12.5px; padding: 3px 7px; }
.dir-sep { color: var(--muted); font-size: 15px; }
.dir-walk { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.dir-more { font-size: 12px; color: var(--accent); margin-top: 8px; }
.dir-opt.expanded .dir-more { display: none; }
.dir-detail { margin-top: 4px; }
.dir-detail:empty { display: none; }

.tl-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.tl-row:first-child { border-top: none; }
.tl-clickable { cursor: pointer; }
.tl-clickable:active { background: var(--sched-bg); }
.tl-walk { width: 30px; text-align: center; font-size: 16px; flex: none; color: var(--muted); }
.tl-mid { flex: 1; min-width: 0; }
.tl-main { font-size: 14px; }
.tl-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; font-variant-numeric: tabular-nums; }

/* --- маркеры автобусов --- */
.bus-div { background: none; border: none; }
.bus-rot { width: 34px; height: 34px; position: relative; display: flex; align-items: center; justify-content: center; }
.bus-pin { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; font-family: var(--font); border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.5); }
.bus-arrow { position: absolute; top: -3px; left: 50%; margin-left: -6px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid #fff; filter: drop-shadow(0 -1px 1px rgba(0,0,0,.4)); }
.leaflet-popup-content { font: 13.5px/1.4 var(--font); }

/* поповер «Маршрут сюда» при тапе по точке карты */
.route-here-pop .leaflet-popup-content-wrapper {
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: 0 6px 24px rgba(0,0,0,.3);
}
.route-here-pop .leaflet-popup-tip { background: var(--card); box-shadow: none; }
.route-here-pop .leaflet-popup-content { margin: 12px 14px; }
.route-here-pop a.leaflet-popup-close-button { color: var(--muted); }
.route-here { text-align: center; }
.rh-title { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.rh-title + .attrib-note { margin: -4px 0 8px; font-size: 11px; }
.rh-btn {
  border: none; background: var(--accent-bg); color: var(--accent-fg); font-family: inherit;
  border-radius: 12px; padding: 9px 14px; font-size: 14px; font-weight: 600;
  cursor: pointer; min-height: 42px; white-space: nowrap;
}
.rh-btn:active { background: var(--sched-bg); }

/* --- QR-сканер --- */
.scan-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.75); display: flex; align-items: center; justify-content: center; padding: 16px; }
.scan-modal.hidden { display: none; }
.scan-box { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sheet); width: 100%; max-width: 420px; overflow: hidden; }
.scan-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; font-weight: 600; border-bottom: 1px solid var(--border); }
.scan-close { border: none; background: var(--surface2); color: var(--text); cursor: pointer; width: 44px; height: 44px; border-radius: 50%; }
.scan-video { width: 100%; max-height: 60vh; background: #000; display: block; }
.scan-msg { padding: 12px 14px; font-size: 13.5px; color: var(--muted); }

/* --- десктоп/планшет: боковая панель вместо нижней шторки --- */
@media (min-width: 820px) {
  .sheet {
    left: auto; right: 12px; top: 64px; bottom: 12px; width: 380px; height: auto;
    border-radius: var(--r-sheet); transform: none !important; box-shadow: 0 6px 30px rgba(0,0,0,.28);
  }
  .sheet-handle { display: none; }
  .peekbar { display: none; } /* на десктопе полная карточка всегда видна */
  /* топбар не должен залезать под боковую панель (панель = 380 + отступы) */
  #topbar { max-width: calc(100% - 404px); }
  /* колонка кнопок — у левого края боковой панели (12 px), снизу, с зумом */
  #mapfabs { top: auto; bottom: calc(24px + var(--sa-b)); right: calc(404px + var(--sa-r)); }
}

/* Вне главной расширенный FAB «Маршрут» сжимается до круглой кнопки: fitPad
   оставляет справа 72 px, и конец маршрута/автобус прятался под подписью
   (на телефоне — пункт «Playa de San Juan» ровно под кнопкой). */
@media (max-width: 819.98px) {
  body[data-view]:not([data-view="home"]) #dirFab { width: 48px; padding: 0; gap: 0; border-radius: 50%; }
  body[data-view]:not([data-view="home"]) #dirFab .ic { width: 22px; height: 22px; }
  /* шторка развёрнута — карта закрыта; кнопки не торчат тенью из-под кромки */
  body:has(.sheet--full) #mapfabs { opacity: 0; visibility: hidden; }
  body[data-view]:not([data-view="home"]) #dirFab .fab-tx { display: none; }
}

/* в самом планировщике кнопка «Маршрут» открыла бы его же — не показываем */
body[data-view="directions"] #dirFab { display: none; }

/* указание источника расписания (CC-BY Generalitat Valenciana) */
.attrib-note { color: var(--muted); font-size: 12px; margin-top: 8px; }

/* --- универсальный поиск: секции «Остановки» / «Места» --- */
/* --vvh — высота видимой области (минус экранная клавиатура): иначе конец списка
   уходил под клавиатуру и до него нельзя было доскроллить */
.results { max-height: min(60vh, 520px, calc(var(--vvh, 100vh) - 80px)); }
.sr-head {
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); padding: 10px 16px 4px; background: var(--card);
}
.sr-opt { justify-content: flex-start; gap: 12px; min-height: 52px; padding: 8px 14px; }
.sr-opt.active, .sr-opt:hover { background: var(--surface2); }
.sr-opt.active { box-shadow: inset 3px 0 0 var(--accent); }
.sr-ic { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--surface2);
  display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; }
.sr-opt.active .sr-ic, .sr-opt:hover .sr-ic { background: var(--card); }
.sr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sr-title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-meta { flex: none; font-size: 12.5px; white-space: nowrap; }
.sr-stale { opacity: .55; }
.sr-geocode .sr-title { color: var(--accent-fg); font-weight: 600; font-size: 14px; }
.sr-geocode .sr-ic { background: var(--accent-bg); }
.sr-note { padding: 10px 16px; font-size: 13.5px; color: var(--muted); }
.sr-note.sr-empty { color: var(--text); font-weight: 600; padding-bottom: 2px; }
.sr-note.sr-attrib { font-size: 11px; padding: 6px 16px 8px; border-top: 1px solid var(--border); }
.sr-note.search-hint { line-height: 1.45; }
.sr-note.search-hint b { color: var(--text); font-weight: 600; }
@keyframes sr-pulse { 50% { opacity: .45; } }
.sr-loading { animation: sr-pulse 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .sr-loading { animation: none; } }
/* в полях «откуда/куда» — компактнее, без тени выпадашки */
.dir-drop .sr-opt { min-height: 46px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.dir-drop .sr-head { padding: 8px 8px 2px; }
.dir-drop .sr-note { padding: 8px; }
.dir-drop .sr-ic { width: 28px; height: 28px; font-size: 15px; }
.dir-drop .sr-title { font-size: 14px; }

/* --- карточка места --- */
.place-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--muted); }
.place-kind { background: var(--accent-bg); color: var(--accent-fg); border-radius: 999px;
  padding: 2px 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.place-addr { overflow-wrap: anywhere; }
.place-dist { margin-top: 3px; font-size: 13.5px; }
.place-from { font-size: 14.5px; }
.place-near { margin-top: 6px; }
.place-near-title { display: block; margin: 6px 0 6px; }
.place-near-list { display: flex; flex-direction: column; gap: 6px; }
.place-stop {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--card); color: var(--text);
  padding: 8px 12px; cursor: pointer; font: inherit;
}
.place-stop:active, .place-stop:hover { background: var(--surface2); }
/* открытый список подсказок — над шторкой (иначе секция «Места» уходила под неё) */
#topbar:has(.results:not(:empty)) { z-index: 800; }

/* телефон: поле «откуда/куда» в фокусе — запас прокрутки, чтобы поле поднялось
   к верху шторки и подсказки поместились над экранной клавиатурой */
@media (max-width: 819.98px) {
  #sheetContent:has(.dir-input:focus) { padding-bottom: 70vh; }
}

/* --- иконки в кнопках, чипах и подсказках --- */
.round-btn .ic { width: 22px; height: 22px; }
.back-btn .ic { width: 22px; height: 22px; }
.star .ic { width: 22px; height: 22px; }
.star.active { color: var(--star); }
.help-close, .scan-close { display: flex; align-items: center; justify-content: center; padding: 0; }
.help-close .ic, .scan-close .ic { width: 18px; height: 18px; }
.dir-here-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.dir-here-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.retry-btn, .dir-refresh, .rh-btn, .seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.retry-btn .ic { width: 18px; height: 18px; }
.dir-refresh .ic, .seg-btn .ic { width: 15px; height: 15px; }
.seg-btn .ic-star { color: var(--star); }
.rh-btn .ic { width: 18px; height: 18px; }
.feedback-link { gap: 6px; }
.feedback-link .ic { width: 15px; height: 15px; }
.warn-note a .ic { width: 13px; height: 13px; margin-left: 3px; vertical-align: -1px; }
.sr-ic .ic { width: 18px; height: 18px; color: var(--muted); }
.sr-geocode .sr-ic .ic { color: var(--accent-fg); }
.dir-drop .sr-ic .ic { width: 16px; height: 16px; }
.sr-meta { display: inline-flex; align-items: center; gap: 4px; }
.sr-meta .ic { width: 14px; height: 14px; }
.dir-maptip { display: flex; align-items: flex-start; gap: 8px; }
.dir-maptip > .ic { width: 16px; height: 16px; margin-top: 1px; color: var(--warn); }
.dir-maptip .ic-inline { width: 15px; height: 15px; margin: 0; vertical-align: -.2em; color: var(--muted); }
.place-kind { display: inline-flex; align-items: center; gap: 5px; }
.place-kind .ic { width: 14px; height: 14px; }
.peek-name.peek-place { display: flex; align-items: center; gap: 8px; }
.peek-place .ic { width: 20px; height: 20px; color: var(--accent); }
.peek-place > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fav-title { display: flex; align-items: center; gap: 6px; }
.fav-title .ic, .fav-chip .ic, .dir-favchip .ic-star { width: 15px; height: 15px; color: var(--star); }
.dir-favchip { display: inline-flex; align-items: center; gap: 6px; }
.dir-favchip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dir-favchip .ic { width: 15px; height: 15px; flex: none; }
.dir-iconbtn .ic { width: 20px; height: 20px; }
.dir-swap { display: flex; align-items: center; justify-content: center; padding: 0; }
.dir-swap .ic { width: 18px; height: 18px; }
.dir-clear { display: flex; align-items: center; justify-content: center; }
.dir-clear .ic { width: 18px; height: 18px; }
.dir-chip-ic { width: 18px; height: 18px; color: var(--accent); }
.grp-chev { display: flex; }
.grp-chev .ic, .ap-chev .ic { width: 20px; height: 20px; }
.ap-chev { display: flex; }
.dir-sep { display: inline-flex; }
.dir-sep .ic { width: 14px; height: 14px; }
.dir-walk { display: inline-flex; align-items: center; gap: 2px; }
.dir-walk .ic { width: 15px; height: 15px; }
.dir-more { display: inline-flex; align-items: center; gap: 2px; }
.dir-more .ic { width: 14px; height: 14px; }
.tl-walk { display: flex; justify-content: center; padding-top: 1px; }
.tl-walk .ic { width: 18px; height: 18px; }
.date-caret { display: flex; }
.date-caret .ic { width: 16px; height: 16px; }
.warn-note:has(> .ic), .dir-warn { display: flex; align-items: flex-start; gap: 8px; }
.warn-note > .ic, .dir-warn > .ic { width: 18px; height: 18px; margin-top: 1px; }
.dir-warn > .ic { width: 15px; height: 15px; margin-top: 2px; }

/* --- «Рядом с вами» на главной --- */
#nearby:empty { display: none; }
#nearby:not(:empty) ~ .home-hint { display: none; } /* подсказка «нажмите ◎» уже выполнена */
.nb-title { margin: 4px 0 8px; }
.nb-stop { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--card);
  padding: 10px 12px 8px; margin-bottom: 8px; cursor: pointer; }
.nb-stop:active { background: var(--surface2); }
.nb-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; min-height: 24px; }
.nb-name { font-weight: 700; font-size: 15.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-meta { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.nb-meta .ic { width: 14px; height: 14px; }
.nb-head .grp-chev { margin-left: -2px; }
.nb-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid var(--border); }
.nb-row:first-of-type { border-top: none; }
.nb-row .badge { min-width: 40px; font-size: 14px; padding: 4px 6px; border-radius: 8px; }
.nb-dest { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.nb-time { font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nb-time.strike { text-decoration: line-through; }
.nb-row .tlabel { padding-bottom: 0; font-size: 12px; }
.nb-none { color: var(--muted); font-size: 13.5px; padding: 4px 0 2px; }
.nb-time .unit { font-size: .72em; font-weight: 700; margin-left: 2px; }

/* --- тост: «ссылка скопирована» и т.п. --- */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 2000;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  background: var(--text); color: var(--card); padding: 10px 16px; border-radius: 12px; font-size: 14px;
  max-width: calc(100vw - 32px); overflow-wrap: anywhere; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
.share-btn { margin-right: 6px; }

/* --- особое расписание в ближайшие дни (из календаря фида) --- */
.special-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 0; padding: 8px 8px 8px 12px;
  border-radius: var(--r-ctl); background: var(--accent-bg); color: var(--accent-fg); font-size: 14px; line-height: 1.35; }
.special-note > .ic { width: 18px; height: 18px; flex: none; }
.special-note > span { flex: 1 1 160px; min-width: 0; } /* узко — кнопка уходит под текст */
.special-note > .special-go { margin-left: auto; }
.special-go { flex: none; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit;
  font-weight: 700; font-size: 13px; border-radius: 999px; padding: 6px 12px; min-height: 44px; cursor: pointer; }

/* старт без связи с сервером (showOfflineBar) */
.offline-bar { position: fixed; z-index: 1200; left: 16px; right: 76px; /* справа — колонка кнопок карты */
  top: calc(env(safe-area-inset-top, 0px) + 72px); max-width: 560px;
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  border-left: 4px solid var(--bad); border-radius: 12px; padding: 10px 12px;
  font-size: 13.5px; box-shadow: var(--shadow); }

/* «Рядом» пусто — ближайшая остановка или расстояние до зоны оператора */
.nb-nearest { display: block; width: 100%; text-align: left; margin-top: 8px; min-height: 44px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--accent-fg);
  font: inherit; font-size: 14px; font-weight: 600; padding: 10px 12px; cursor: pointer; }

/* подпись, которая на узком экране не помещается целиком («Маршрут сюда» → «Маршрут») */
@media (max-width: 360px) { .wide-only { display: none; } }

/* «Рядом с вами» на узком экране: статус — под временем, направлению — место
   («Puerta d…», «Colonia Req…» на 320 px) */
@media (max-width: 360px) {
  .nb-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "b d t" "b d l"; column-gap: 10px; row-gap: 0; }
  .nb-row > .badge { grid-area: b; align-self: center; }
  .nb-row > .nb-dest { grid-area: d; align-self: center; }
  .nb-row > .nb-time { grid-area: t; justify-self: end; line-height: 1.15; }
  .nb-row > .tlabel { grid-area: l; justify-self: end; font-size: 11.5px; }
}

/* другой день на табло: «с 07:00» — с какого времени показывать рейсы */
.date-from { display: block; margin-top: 6px; white-space: nowrap; }
.date-from input { font: inherit; font-variant-numeric: tabular-nums; min-height: 32px; padding: 0 6px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); }

/* день поездки в планировщике (как контрол даты на табло) */
.dir-date { min-height: 44px; flex: none; font-size: 13.5px; font-weight: 600; border-radius: 12px; padding: 0 12px; }