/* Мобильный вид навигатора и панели маршрута.
 *
 * Отдельный файл: в index.html стили писались под компьютер, и дописывать
 * мобильные правила вперемешку с ними — верный способ сломать десктоп.
 *
 * Два правила, которые держат весь этот файл:
 *   * всё, что нажимают на ходу, — не меньше 48px: палец не курсор, а в
 *     машине он ещё и трясётся;
 *   * низ и верх уважают safe-area — у телефонов с чёлкой и полоской жеста
 *     угол экрана физически недоступен, кнопка там просто не нажмётся.
 */

/* ---------- панель маршрута: лист снизу вместо «пилюли» ---------- */
/* Пилюля висела под шапкой — то есть у самого дальнего от пальца края.
   Всё, что нажимают, переезжает вниз, в зону большого пальца. */
.route-panel {
  position: fixed;
  left: 8px; right: 8px; bottom: 0;
  top: auto; transform: none;
  width: auto; max-width: none;
  margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: #0b1220;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  padding: 12px 14px 14px;
  box-shadow: 0 -6px 28px rgba(0, 0, 0, .45);
  z-index: 1300;
  display: none;
  gap: 10px;
  white-space: normal;
  font-size: 14px;
}
.route-panel.show { display: block; }
body.d3active #routePanel { z-index: 1300; top: auto; bottom: 0; }

#routeTitle {
  font-size: 15px; font-weight: 600; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#routeInfo {
  display: block; font-size: 20px; font-weight: 700;
  color: #7fc4ff; margin: 2px 0 10px;
}
#routeBtns { display: flex; align-items: center; gap: 8px; }

/* Кнопки панели: прямоугольные и крупные вместо кружков 24px. */
.route-panel button {
  background: #1b2740; border: 1px solid #2e4066; color: #fff;
  min-width: 52px; height: 52px; border-radius: 14px;
  font-size: 20px; display: flex; align-items: center; justify-content: center;
  padding: 0 12px; cursor: pointer; flex: none;
}
.route-panel button:active { background: #27365a; }
#routeGo {
  flex: 1; background: #0969da; border-color: #0969da;
  font-size: 16px; font-weight: 700; gap: 8px;
}
#routeGo:active { background: #0b5ed7; }
#routeClose { background: transparent; border-color: #3a4a70; font-size: 17px; }

/* Кнопка «в навигатор телефона» — заметная, но уже не главная:
   главная теперь «Вести», и пульс перешёл бы ей дорогу. */
#routeNav { background: #fff; color: #0969da; border-color: #fff; animation: none; }

/* ---------- режим ведения ---------- */
#navBox {
  display: none; position: fixed; z-index: 1400;
  left: 8px; right: 8px; top: calc(8px + env(safe-area-inset-top, 0px));
  background: rgba(8, 13, 24, .95);
  backdrop-filter: blur(10px);
  color: #fff; border-radius: 18px; padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}
#navBox.show { display: block; }

#navTop { display: flex; align-items: center; gap: 14px; }
#navArrow { font-size: 46px; line-height: 1; color: #4da3ff; flex: none; width: 52px; text-align: center; }
#navDist { font-size: 34px; font-weight: 800; line-height: 1 }
#navText { color: #c3d6ea; margin-top: 4px; font-size: 15px; line-height: 1.25 }

/* Подсказка о следующем манёвре: водителю нужно знать не только текущий
   поворот, но и что сразу за ним — иначе после поворота он не успевает
   перестроиться. */
#navNext {
  display: none; margin-top: 10px; padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: #8fa9c4; font-size: 13px;
}
#navNext.show { display: block; }

/* Нижняя плашка — отдельно от верхней: цифры поездки смотрят вниз,
   манёвр вверх, и взгляд не ищет их в одном нагромождении. */
#navBar {
  display: none; position: fixed; z-index: 1400;
  left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 13, 24, .95); backdrop-filter: blur(10px);
  color: #fff; border-radius: 18px; padding: 10px 12px;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .5);
  align-items: center; gap: 10px;
}
#navBar.show { display: flex; }
#navStats { flex: 1; min-width: 0 }
#navEta { font-size: 19px; font-weight: 700; line-height: 1.1 }
#navRest { color: #9fb6cc; font-size: 13px; margin-top: 2px }
#navBar button {
  border: none; color: #fff; min-width: 52px; height: 52px;
  border-radius: 14px; font-size: 20px; cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center;
}
#navMuteBtn, #navCenterBtn { background: #1b2740 }
#navStopBtn { background: #d13438; font-size: 15px; font-weight: 700; padding: 0 16px }

/* Камеру можно отпустить и посмотреть карту руками; кнопка возвращает
   слежение. Без неё любое касание карты ломало бы навигацию насовсем. */
#navCenterBtn.off { background: #0969da }

/* В режиме ведения всё лишнее убирается: на ходу читают дорогу, а не
   фильтры по районам. */
body.navigating #topbar,
body.navigating .layers-ctrl,
body.navigating #hdr3d,
body.navigating #routePanel,
body.navigating .maplibregl-ctrl-bottom-left,
body.navigating .leaflet-control-zoom { display: none !important; }

/* Альбомная ориентация: по высоте места нет, поэтому манёвр слева,
   цифры справа, карта между ними. */
@media (orientation: landscape) and (max-height: 500px) {
  #navBox { right: auto; width: 46%; max-width: 330px }
  #navArrow { font-size: 36px; width: 40px }
  #navDist { font-size: 26px }
  #navBar { left: auto; width: 46%; max-width: 330px }
}

/* Компьютер: панели не растягиваются на всю ширину экрана. */
@media (min-width: 700px) {
  .route-panel { left: auto; right: 14px; width: 360px; bottom: 14px }
  #navBox { left: auto; right: 14px; width: 360px }
  #navBar { left: auto; right: 14px; width: 360px }
}

/* ---------- правки по живой проверке на экране 375x812 ---------- */
/* Три кнопки по 52px съедали половину плашки, и «10:57 · 4 мин» ломалось
   на три строки. Цифры — главное в этой плашке, им и место. */
#navEta, #navRest { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
#navEta { font-size: 17px }
#navBar button { min-width: 46px; height: 46px }
#navStopBtn { font-size: 14px; padding: 0 12px }

/* В режиме ведения сотни точек POI поверх дороги мешают видеть сам маршрут.
   Не прячем совсем — они подсказывают, где ты едешь, — но уводим в фон. */
body.navigating .leaflet-marker-icon:not(.nav-puck),
body.navigating .marker-cluster { opacity: .28 }
body.navigating .nav-puck { opacity: 1 }

/* Слово «Завершить» съедало 110px из 375, и часы прибытия превращались в
   «10:57 · …». На узком экране крест понятен без слова, на широком слово
   возвращается. */
#navStopBtn { font-size: 0; min-width: 46px; padding: 0 }
#navStopBtn::before { content: '\2715'; font-size: 19px }
@media (min-width: 420px) {
  #navStopBtn { font-size: 14px; padding: 0 14px }
  #navStopBtn::before { content: none }
}

/* #navBar button (id + тег) специфичнее, чем #navStopBtn (один id), поэтому
   прошлое правило проигрывало и слово оставалось видимым рядом с крестом. */
#navBar #navStopBtn { font-size: 0; min-width: 46px; padding: 0 }
#navBar #navStopBtn::before { content: '\2715'; font-size: 19px }
@media (min-width: 420px) {
  #navBar #navStopBtn { font-size: 14px; padding: 0 14px }
  #navBar #navStopBtn::before { content: none }
}

/* ---------- колонка управления в режиме ведения ---------- */
/* «Нет кнопки моего местоположения, нет выбора языка» — они были: ◎ в
   нижней плашке и флаг в шапке. Но шапка в ведении скрыта целиком, а ◎
   опознать невозможно, поэтому обе кнопки считались отсутствующими.
   Теперь они стоят столбиком у правого края: место, где их ищет большой
   палец, и единственное направление, в котором плашке не тесно. */
#navCtl {
  display: none; position: fixed; z-index: 1400;
  right: 8px; bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  flex-direction: column; gap: 10px;
}
body.navigating #navCtl { display: flex; }
#navCtl button {
  width: 52px; height: 52px; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(8, 13, 24, .95); backdrop-filter: blur(10px);
  color: #fff; font-size: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#navCtl button:active { background: #27365a; }
/* Синяя — значит «камера отпущена, нажми чтобы вернуть слежение».
   Спокойный цвет = слежение уже идёт, жать не надо. */
#navCenterBtn.off { background: #0969da; border-color: #0969da; }
#navLangBtn { font-size: 20px; }

/* Кнопки уехали из плашки, и прежние уступки тесноте больше не нужны:
   «Завершить» снова пишется словом, высота вернулась к 52px. */
#navBar #navStopBtn { font-size: 15px; min-width: 112px; padding: 0 18px; height: 52px }
#navBar #navStopBtn::before { content: none }
#navEta { font-size: 20px }
#navRest { font-size: 14px }

/* Альбомная: плашки сужены до 46%, колонка встаёт выше них. */
@media (orientation: landscape) and (max-height: 500px) {
  #navCtl { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- карточка объекта: клик по метке во время ведения ---------- */
/* Лист снизу, а не всплывашка у метки: метку закрывает палец, а нижний
   край — единственное место, куда дотягиваются не отрывая руки. */
#navTgt {
  display: none; position: fixed; z-index: 1450;
  left: 8px; right: 8px; bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 13, 24, .97); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px;
  padding: 13px 15px; color: #fff;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .6);
}
#navTgt.show { display: block; }
#navTgt .nm { font-size: 16px; font-weight: 700 }
#navTgt .ad { color: #9fb6cc; font-size: 13px; margin-top: 2px }
#navTgt .dd { color: #7fc4ff; font-size: 14px; margin-top: 5px; min-height: 19px }
#navTgt .bb { display: flex; gap: 8px; margin-top: 12px }
#navTgt .go {
  flex: 1; height: 50px; border: none; border-radius: 14px;
  background: #0969da; color: #fff; font: 700 16px/1 inherit; cursor: pointer;
  touch-action: manipulation;
}
/* Ждём маршрут — видно, что кнопка ещё не готова, а не «не нажимается». */
#navTgt .go:disabled { background: #223354; color: #8ca0b8; cursor: default }
#navTgt .no {
  width: 96px; height: 50px; border-radius: 14px; cursor: pointer;
  background: transparent; color: #c3d6ea; border: 1px solid #3a4a70;
  font: 15px/1 inherit; touch-action: manipulation;
}

/* Пока карточка открыта, кнопки и спидометр поднимаются над ней. Иначе
   карточка легла бы ровно на «Где я» и на скорость — на то самое, чем
   пользуются, не глядя. */
body:has(#navTgt.show) #navCtl { bottom: calc(252px + env(safe-area-inset-bottom, 0px)) }
body:has(#navTgt.show) #navSpeed { bottom: calc(252px + env(safe-area-inset-bottom, 0px)) }
body:has(#navTgt.show) #navHaz { bottom: calc(272px + env(safe-area-inset-bottom, 0px)) }

@media (min-width: 700px) {
  #navTgt { left: auto; right: 14px; width: 360px }
}

/* ================= главный экран: раскладка навигаторов ================= */
/* По образцу MAPS.ME: частое — внизу, под большим пальцем; сверху — только
   поиск. В шапке было шесть элементов на 375px, и поле поиска сжималось
   до двух букв «Пс». Кнопки никуда не делись: они спрятаны и нажимаются
   из новых мест (см. ui.js), со всеми прежними обработчиками. */
#topbar .home-btn, #geoBtn, #btnTheme, #btnAlerts, #langBtn { display: none !important }

/* Круглые кнопки по краям карты. */
.fab {
  position: fixed; z-index: 950; width: 52px; height: 52px; border-radius: 50%;
  border: none; background: #fff; color: #1f2937; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .22); touch-action: manipulation;
}
.fab:active { background: #eef2f7 }
.fab-layers { left: 12px; top: 124px }
.fab-loc { right: 12px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); color: #0969da }

/* Слои — всплывают по кнопке, а не висят всегда: раскрытая панель
   закрывала четверть карты. */
.layers-ctrl { display: none; left: 74px; right: auto; top: 124px;
  border-radius: 14px; min-width: 176px; box-shadow: 0 8px 28px rgba(0, 0, 0, .25) }
.layers-ctrl.open { display: block }
.layers-ctrl button { padding: 13px 15px; font-size: 15px }

/* Масштаб — справа посередине, крупнее: в углу у левого края его
   доставал только второй рукой. */
.leaflet-top.leaflet-left { top: 50%; left: auto; right: 12px; transform: translateY(-50%) }
.leaflet-control-zoom { border: none !important; border-radius: 26px !important; overflow: hidden;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .22) !important; margin: 0 !important }
.leaflet-control-zoom a { width: 52px !important; height: 50px !important;
  line-height: 50px !important; font-size: 24px !important }

/* «© OpenStreetMap» прятать под вкладками нельзя: показ атрибуции —
   условие лицензии OSM. Поднимаем её над панелью. */
.leaflet-bottom { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) }

/* Нижние вкладки — плавающая плашка, как у MAPS.ME. */
.tabbar {
  position: fixed; z-index: 1000; left: 10px; right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex; background: #fff; border-radius: 22px; padding: 6px 4px;
  box-shadow: 0 4px 22px rgba(0, 0, 0, .18);
}
.tab {
  flex: 1; min-width: 0; border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 5px 2px; min-height: 56px; color: #374151;
  font: 600 11.5px/1.15 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  touch-action: manipulation; border-radius: 14px;
}
.tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100% }
.tab:active { background: rgba(9, 105, 218, .08) }
.tab.on { color: #0969da }

/* Лист «Ещё» — значение справа в строке (язык, переключатель темы). */
#moreSheet .mv { flex: none; color: #8ca0b8; font-size: 15px }

/* Открыт лист — вкладки уходят под него, а «где я» поднимается над ним:
   иначе лист маршрута лёг бы ровно на панель и на кнопку. */
body:has(#routePanel.show) .tabbar,
body:has(#offlineSheet.show) .tabbar,
body:has(#alertsSheet.show) .tabbar,
body:has(#moreSheet.show) .tabbar { display: none }
body:has(#routePanel.show) .fab-loc { bottom: calc(196px + env(safe-area-inset-bottom, 0px)) }
body:has(#routePanel.show) .leaflet-bottom { bottom: calc(180px + env(safe-area-inset-bottom, 0px)) }

/* В ведении и в 3D своя раскладка — новые элементы там лишние. */
body.navigating .tabbar, body.navigating .fab,
body.d3active .tabbar, body.d3active .fab { display: none !important }
body.navigating .leaflet-bottom { bottom: 0 }

body.theme-dark .fab, body.theme-dark .tabbar { background: #1a2438; color: #dde2eb }
body.theme-dark .fab-loc { color: #4da3ff }
body.theme-dark .tab { color: #a8b6c8 }
body.theme-dark .tab.on { color: #4da3ff }
body.theme-dark .leaflet-control-zoom a { background: #1a2438 !important; color: #dde2eb !important;
  border-color: #2a3245 !important }

@media (min-width: 700px) {
  .tabbar { left: 50%; right: auto; width: 520px; transform: translateX(-50%) }
}

/* ================= участники карты (contrib.js) ================= */
.c-form { padding: 6px 16px 16px; display: flex; flex-direction: column; gap: 10px }
.c-f { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: #8ca0b8 }
.c-f input, .c-f select, .c-f textarea {
  font: 16px/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;  /* 16px: iOS не приближает поле */
  padding: 11px 12px; border-radius: 11px; border: 1px solid #2a3550;
  background: #121b2e; color: #fff; outline: none; width: 100%;
}
.c-f input:focus, .c-f select:focus, .c-f textarea:focus { border-color: #0969da }
.c-tabs { display: flex; gap: 6px; padding: 10px 16px 2px }
.c-tabs button { flex: 1; height: 42px; border-radius: 11px; cursor: pointer; font: 600 14px/1 inherit;
  background: #162036; color: #c3d6ea; border: 1px solid #2a3550 }
.c-tabs button.on { background: #0969da; border-color: #0969da; color: #fff }
.c-go { height: 50px; border: none; border-radius: 14px; background: #0969da; color: #fff;
  font: 700 16px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; cursor: pointer; touch-action: manipulation }
.c-go:disabled { background: #223354; color: #8ca0b8 }
.c-close { height: 46px; border-radius: 14px; background: transparent; color: #f0a5a5;
  border: 1px solid #5a2a35; font: 600 14px/1 system-ui, sans-serif; cursor: pointer }
.c-err { color: #ff8b8b; font-size: 13.5px; min-height: 0 }
.c-err:empty { display: none }
.c-lic, .c-loc { color: #8ca0b8; font-size: 12.5px; line-height: 1.4 }
.c-st { flex: none; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 10px; background: #223354; color: #c3d6ea }
.c-st.c-applied { background: #123d24; color: #7ee2a8 }
.c-st.c-rejected { background: #4a1d24; color: #ff9a9a }
.c-out { padding: 14px 16px }

/* «+» слева внизу, как у MAPS.ME: добавить место на карту. */
.fab-add { left: 12px; bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  color: #fff; background: #f08c00; font: 400 30px/1 system-ui, sans-serif }
.fab-add:active { background: #d97c00 }

/* Новое место: булавка в центре карты, внизу «Отмена / Здесь».
   Ставят, двигая карту под булавку, — пальцем по самой точке на
   телефоне точно не попасть. */
.c-pin { display: none; position: absolute; z-index: 1000; left: 50%; top: 50%;
  transform: translate(-50%, -100%); font-size: 40px; pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)) }
body.picking .c-pin { display: block }
.c-pickbar { display: none; position: fixed; z-index: 1300; left: 8px; right: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(8, 13, 24, .96);
  color: #fff; border-radius: 18px; padding: 12px 14px; box-shadow: 0 -8px 28px rgba(0, 0, 0, .5) }
body.picking .c-pickbar { display: block }
.c-pickbar .c-hint { font-size: 14px; margin-bottom: 10px; color: #c3d6ea }
.c-pickbar .c-row { display: flex; gap: 8px }
.c-pickbar .c-go { flex: 1 }
.c-pickbar .ol-sec { height: 50px; border-radius: 14px; padding: 0 18px; background: transparent;
  color: #c3d6ea; border: 1px solid #3a4a70; font: 600 15px/1 system-ui, sans-serif }
body.picking .tabbar, body.picking .fab, body.picking #routePanel { display: none !important }

body:has(.c-sheet.show) .tabbar { display: none }
body.navigating .fab-add, body.d3active .fab-add { display: none !important }
@media (min-width: 700px) { .c-pickbar { left: auto; right: 14px; width: 380px } }

/* ================= компас (compass.js) ================= */
/* Над «где я», как у MAPS.ME. Вкл — синее кольцо. */
.fab-compass { right: 12px; bottom: calc(156px + env(safe-area-inset-bottom, 0px)) }
.fab-compass.on { box-shadow: 0 0 0 3px #0969da, 0 3px 12px rgba(0, 0, 0, .22) }
.fab-compass .needle { display: flex; transition: transform .12s linear }
body:has(#routePanel.show) .fab-compass { bottom: calc(260px + env(safe-area-inset-bottom, 0px)) }
body.picking .fab-compass { display: none }

/* Луч «куда смотрю» на метке «где я». Рисует CSS по углу --heading —
   коду метки знать про компас не нужно. Сужается к точке и тает к краю,
   как у привычных карт. */
body.has-heading .geo-pin { position: relative }
body.has-heading .geo-pin::before {
  content: ''; position: absolute; left: 50%; bottom: 50%; z-index: -1;
  width: 58px; height: 54px; transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(var(--heading, 0deg));
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background: linear-gradient(to top, rgba(9, 105, 218, .55), rgba(9, 105, 218, 0));
  pointer-events: none;
}

/* ================= меню слоёв: вид и карта ================= */
.layers-ctrl .lc-h { padding: 10px 15px 4px; font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: #8c959f }
.layers-ctrl .lc-h:empty { padding: 0; border-top: 1px solid #e0e6ed; margin-top: 4px }
.layers-ctrl .lc-seg { display: flex; gap: 6px; padding: 2px 10px 6px }
.layers-ctrl .lc-seg button { flex: 1; width: auto; text-align: center; border: 1px solid #d0d7de !important;
  border-radius: 10px; padding: 9px 0; font-weight: 700 }
.layers-ctrl .lc-seg button + button { border-top: 1px solid #d0d7de }
.layers-ctrl small { display: block; font-size: 11px; opacity: .75; margin-top: 2px }
body.theme-dark .layers-ctrl .lc-seg button { border-color: #2a3245 !important }

/* ================= меню правой кнопки, флаги языка ================= */
.ctx-pop .leaflet-popup-content { margin: 6px 0 }
.ctx-pop .leaflet-popup-content-wrapper { border-radius: 12px; padding: 0 }
.ctx-menu { display: flex; flex-direction: column; min-width: 210px }
.ctx-menu button { border: none; background: none; text-align: left; cursor: pointer;
  padding: 10px 16px; font: 500 14.5px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: #1f2328 }
.ctx-menu button:hover { background: #f0f3f6 }

.lang-flags { position: fixed; z-index: 950; right: 12px; top: 124px; display: flex; gap: 4px;
  background: #fff; border-radius: 12px; padding: 5px; box-shadow: 0 3px 12px rgba(0, 0, 0, .22) }
.lang-flags button { border: 2px solid transparent; border-radius: 6px; padding: 2px; background: none;
  cursor: pointer; line-height: 0; opacity: .55; touch-action: manipulation }
.lang-flags button svg { border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12) }
.lang-flags button.on { border-color: #0969da; opacity: 1 }
body.theme-dark .lang-flags { background: #1a2438 }
body.navigating .lang-flags, body.d3active .lang-flags, body.picking .lang-flags { display: none }

/* ================= профиль, избранное, сохранённые точки ================= */
/* Кнопка профиля — в ряду флагов, только на широком экране; на телефоне
   профиль открывается из листа «Ещё». */
.lang-flags .pf-btn { display: none; border: none; background: none; cursor: pointer; color: #374151;
  border-left: 1px solid #d0d7de; border-radius: 0; margin-left: 3px; padding: 0 3px 0 9px; line-height: 0;
  touch-action: manipulation }
body.signed-in .lang-flags .pf-btn { color: #0969da }
body.theme-dark .lang-flags .pf-btn { color: #dde2eb; border-left-color: #2a3245 }
body.theme-dark.signed-in .lang-flags .pf-btn { color: #4da3ff }
@media (min-width: 700px) { .lang-flags .pf-btn { display: block } }

.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px 16px }
.pf-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; text-align: left;
  min-height: 96px; padding: 14px; border-radius: 16px; border: 1px solid #2a3550; background: #162036;
  color: #fff; cursor: pointer; font: 600 15px/1.25 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  touch-action: manipulation }
.pf-tile:active { background: #1d2b48 }
.pf-tile .pf-i { font-size: 27px; line-height: 1 }
.pf-tile small { color: #8ca0b8; font-weight: 400; font-size: 12.5px }
.pf-tile small:empty { display: none }

.sv-del { flex: none; width: 40px; height: 40px; border-radius: 12px; border: none; background: transparent;
  color: #8ca0b8; font-size: 16px; cursor: pointer; touch-action: manipulation }
.sv-del:active { background: rgba(255, 255, 255, .08) }
#savedSheet .as-tx b { overflow-wrap: anywhere }

/* Сохранённая точка на карте. */
.pt-star { width: 28px; height: 28px; border-radius: 50%; background: #f59e0b; color: #fff; font-size: 16px;
  line-height: 24px; text-align: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4) }

body:has(#profileSheet.show) .tabbar, body:has(#savedSheet.show) .tabbar { display: none }

/* Жалоба на место: причины списком, радио — на всю строку. */
.c-rs { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid #2a3550; background: #162036; color: #fff; font-size: 15px; cursor: pointer }
.c-rs input { width: 20px; height: 20px; accent-color: #0969da; flex: none }