/*
  стили главной ХОЛОД’ОК. все размеры в CSS-пикселях, взяты из СПЕКА.md.
  разметка одна: по умолчанию десктоп, телефон включается на @media (max-width: 600px).
  в окне ниже 932 колонка уплотняется (раньше порог был 980), ниже 884 ещё сильнее, а если и так
  не влезает, колонка становится тесной и листается внутри. ширины между 600 и 1366 спека не задаёт,
  для них ниже пара правил, чтобы ничего не наезжало (блок про промежуточные ширины).
  где и почему отошли от спеки после критики, записано в СПЕКА.md.
*/

/* токены: цвета, радиусы, тени */
:root {
  /* серые тёплые и нейтральные, как у Яндекс Go (#21201F, #9E9B98, #F5F4F2). были сине-серые,
     но голубоватые серые и такие же тени делали макет похожим на ИИ-шаблон */
  --ink-900: #21201F;
  --ink-600: #6F6D69;   /* вторичный текст, контраст 4,7 к 1 на --fill */
  --ink-400: #9E9B98;
  --line: #ECEAE6;
  --fill: #F5F4F2;
  --fill-hover: #EDEBE7;
  --white: #FFFFFF;
  --skeleton: #F2F1EF;        /* заглушка загрузки; у Яндекс Go #F2F2F2 с бликом #FEFEFE */
  --skeleton-glow: #FEFEFE;
  --ice-500: #5FD0EE;
  --ice-600: #45C4E6;
  --ice-100: #E3F6FC;
  --ice-700: #0A7EA4;
  /* всего три цвета, как у Яндекса с его чёрным, жёлтым и красным: чёрный #21201F, «лёд» для кнопок и выбранного,
     «жар» для метки адреса клиента, солнца в погоде и срочного. зелёного нет, «на линии» показываем точкой льда */
  --heat: #FF7A00;
  --free: var(--ice-500);
  --sun: var(--heat);
  --handle: #DCD9D4;   /* ручка шторки на телефоне */

  --r-24: 24px;        /* острова, блоки, карточки */
  --r-16: 16px;        /* поля, плитки, кнопки, сегменты */
  --r-12: 12px;        /* бегунок сегментов, чипы */
  --r-pill: 999px;     /* плашки и круги */

  /* тени сняли с Яндекс Go: у шапки 0 8 20 с прозрачностью .12, а блоки колонки там вообще без тени */
  --shadow-island: 0 8px 20px rgba(0, 0, 0, .12);            /* шапка: ровно как у Яндекс Go */
  --shadow-card: 0 8px 20px rgba(117, 115, 111, .2);         /* карточки и кнопки карты: как «Стать водителем» */
  --shadow-block: none;                                      /* блоки колонки у Яндекса без тени */
  --shadow-marker: 0 2px 8px rgba(0, 0, 0, .20);
  --shadow-runner: 0 1px 3px rgba(0, 0, 0, .12);             /* бегунок в сегментах */
  --shadow-sheet: 0 -4px 20px rgba(117, 115, 111, .2);       /* шторка на телефоне */

  --font: Onest, system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* база: сброс и общие настройки */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--fill);
  color: var(--ink-900);
  font: 500 16px/20px var(--font);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
button { padding: 0; border: 0; background: none; cursor: pointer; }
svg { display: block; flex: none; }
[hidden] { display: none !important; }

/* фокус с клавиатуры: обводка 2px цветом --ice-700 и отступ 2 */
:focus-visible { outline: 2px solid var(--ice-700); outline-offset: 2px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* радио в плитках, сегментах и чипах не видно, но с клавиатуры оно работает, на экране только подпись */
.radio {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px; margin: 0;
  opacity: 0; pointer-events: none;
}

/* до первого кадра анимации выключены, иначе состояния вроде ?time=1 «приезжают» при загрузке */
.is-preload *, .is-preload *::before, .is-preload *::after { transition: none !important; }

/* толщина иконок. в спрайте stroke-width="var(--icon-stroke, 1.75)" в сетке 24, и обводка растёт вместе
   с иконкой. чтобы на экране везде было 1.75 px, для 28 px ставим 1.5, для 22 ставим 1.91, для 20 ставим 2.1,
   для 18 ставим 2.33, а 24 оставляем по умолчанию.
   2.6 у шеврона «Стать инженером» не действует: ниже в .become__chev его перебивает 2.33 */
.tile__icon { --icon-stroke: 1.5; }
.field__icon, .photo__icon, .menu__chev { --icon-stroke: 2.1; }
.seg__icon { --icon-stroke: 2.33; }
.become__chev { --icon-stroke: 2.6; }

/* карта и подложка под подвалом */
#map { position: fixed; inset: 0; z-index: 0; background: var(--fill); }
/* канвас на весь экран: обводку фокуса рисуем внутрь, иначе её не видно */
#map .maplibregl-canvas:focus-visible { outline-offset: -4px; }
/* белая подложка под подвалом, чтобы текст читался поверх карты. других градиентов на странице нет */
.fade {
  position: fixed; z-index: 1;
  left: 0; right: 0; bottom: 0; height: 96px;
  background: linear-gradient(to top, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* шапка: белый остров сверху, как у Яндекс Go */
/* замер taxi.yandex.ru на 1920 на 1080 при масштабе 100 %: остров 16 от краёв, высота 72, радиус 24,
   поля 0 16, меню 15/400. скриншот Саши был снят при 125 %, поэтому раньше и выходило 88 и 18/500 */
.topbar {
  position: fixed; z-index: 30;
  top: 16px; left: 16px; right: 16px; height: 72px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px 0 20px;
  background: var(--white);
  border-radius: var(--r-24);
  box-shadow: var(--shadow-island);
}
.brand { display: flex; align-items: center; gap: 8px; border-radius: 8px; }
/* логотип крупнее: у Яндекс Go он примерно 29 px в высоту и держит левый край шапки */
.brand__mark { width: 28px; height: 28px; color: var(--ice-700); }
.brand__word { font-weight: 700; font-size: 25px; line-height: 28px; letter-spacing: -0.02em; white-space: nowrap; }

/* меню ставим ровно по центру острова, а не посередине между логотипом и «Войти» */
.nav {
  position: absolute; top: 0; bottom: 0; left: 50%;
  display: flex; align-items: center;
  transform: translateX(-50%);
}
.nav__list { display: flex; gap: 28px; }
.nav__item { position: relative; }
/* пункты меню как у Яндекс Go: 15/400 и шеврон, по нажатию выпадает список */
.nav__link {
  display: flex; align-items: center; gap: 4px; height: 40px;
  font-weight: 400; font-size: 15px; line-height: 20px; white-space: nowrap;
  border-radius: 8px;
  transition: color .15s;
}
.nav__chev { width: 16px; height: 16px; color: var(--ink-400); --icon-stroke: 2.6; transition: transform .2s var(--ease); }
.nav__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
/* список как у Яндекс Go («Пользователям»): левый край по началу пункта меню, верх чуть заходит на шапку,
   ширина 288, строки 38, текст 15/400 с отступом 20, справа шеврон 16 в 16 от края */
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 288px; padding: 8px;
  border-radius: var(--r-24); background: var(--white); box-shadow: var(--shadow-card);
}
/* невидимый «мостик» над списком: курсор идёт от пункта меню к списку и не теряет наведение */
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.dropdown__link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 38px; padding: 0 8px 0 12px;
  border-radius: 12px;
  font-weight: 400; font-size: 15px; line-height: 20px; white-space: nowrap;
  transition: background-color .15s;
}
.dropdown__chev { flex: none; width: 16px; height: 16px; color: var(--ink-900); --icon-stroke: 2.2; }

.topbar__end { display: flex; align-items: center; gap: 4px; }
/* «войти» просто текстом с иконкой, без серой таблетки, как у Яндекс Go */
.login {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 12px;
  border-radius: var(--r-12);
  font-weight: 400; font-size: 15px; line-height: 20px; white-space: nowrap;
  transition: background-color .15s;
}
.login__icon { width: 20px; height: 20px; --icon-stroke: 2.1; }
/* после входа с фото вместо значка человека маленькое фото */
.login__avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.menu-toggle { display: none; }

/* левая колонка с заказом */
/* колонка шире блоков на 16 с каждой стороны, чтобы не обрезались тени островов (у тесной колонки окно
   ровно по блокам, это ниже). нижнее поле 16, но не больше, чем осталось до низа окна: --order-pb считает
   app.js, и меньше 8 оно не бывает. так колонка, которая влезает, не прокручивается на пару пикселей */
.order {
  position: fixed; z-index: 10;
  top: 88px; left: 0; width: 392px;           /* блоки начинаются с 104, слева 16, ширина 360, как у Яндекс Go */
  max-height: calc(100% - 88px);
  padding: 16px 16px var(--order-pb, 16px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  pointer-events: none;
}
.order::-webkit-scrollbar { display: none; }
.sheet-handle { display: none; }
.order__form { display: flex; flex-direction: column; gap: 8px; }
.block {
  pointer-events: auto;
  background: var(--white);
  border-radius: var(--r-24);
  box-shadow: var(--shadow-block);
}
.block--order { padding: 16px 16px 4px; }
.block--services, .block--when, .block--cta { padding: 16px; }

/* колонка не влезает в окно, классы вешает app.js. сначала прячем подсказку «Ближайший инженер…»,
   потом подпись «Что случилось?». если всё равно не влезает, колонка становится тесной: видно только окно
   до --tight-clip со скруглением 24, как у блока, чтобы срезанный блок выглядел блоком. блоки листаются
   внутри, а блок с кнопкой стоит на 8 ниже окна. срез идёт по низу текста в ряду плиток: названия и цены
   видно, низ плиток срезан, и сразу понятно, что колонка продолжается.
   окно ровно по ширине блоков, поэтому боковая тень у них обрезается, так решили на критике */
@media (min-width: 601px) {
  .order--tight {
    top: 104px; left: 16px; width: 360px;
    max-height: calc(var(--tight-clip, 100%) - 104px);
    padding: 0;
    border-radius: var(--r-24);
  }
  .order--tight .block--cta { position: fixed; z-index: 1; left: 16px; top: calc(var(--tight-clip, 0px) + 8px); width: 360px; }
  .order--tight .order__form { pointer-events: auto; }   /* колесо над зазором крутит колонку, а не зумит карту */
  .order--nohint .hint { display: none; }
  .order--nolabel .section-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

/* первый блок: заказ */
/* строки адреса и фото как «Откуда / Куда» у Яндекс Go: без заливки, высота 52, иконка слева,
   между строками тонкий разделитель */
.title { font-weight: 600; font-size: 20px; line-height: 26px; letter-spacing: -0.01em; white-space: nowrap; }
.address { display: flex; flex-direction: column; margin-top: 4px; }
.field { position: relative; min-width: 0; }
.field__icon {
  position: absolute; left: 0; top: 50%;
  width: 20px; height: 20px; margin-top: -10px;
  color: var(--ice-700); pointer-events: none;
}
.field__input {
  display: block; width: 100%; height: 52px;
  padding: 0 0 0 32px;
  border: 0; border-radius: 0;
  background: transparent;
  font-weight: 400; font-size: 16px; line-height: 20px;
  color: var(--ink-900);
  text-overflow: ellipsis;
}
.address .field__input:focus-visible { outline: 0; }
.address .field:has(.field__input:focus-visible) { box-shadow: 0 2px 0 var(--ice-500); }
.field__input::placeholder { color: var(--ink-400); opacity: 1; }
/* подъезд плашкой справа в строке адреса: длинный адрес обрежется троеточием, а подъезд видно всегда */
.entrance-chip {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; height: 28px; padding: 0 10px;
  border-radius: 14px; background: var(--fill); color: var(--ink-900);
  font-weight: 500; font-size: 13px; line-height: 16px; white-space: nowrap;
  pointer-events: none;
}
.field__input.has-entrance { padding-right: 100px; }
.field__input--tel { height: 52px; padding: 0 16px; border-radius: var(--r-16); background: var(--fill); }

/* кнопка «Добавить фото поломки» идёт второй строкой, как «Куда?», и разделитель над ней начинается от текста */
.photo {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; height: 52px; padding: 0;
  color: var(--ink-600);
  font-weight: 400; font-size: 16px; line-height: 20px; text-align: left;
  transition: color .15s;
}
.photo::before { content: ""; position: absolute; top: 0; left: 32px; right: 0; height: 1px; background: var(--line); }
.photo__icon { width: 20px; height: 20px; color: var(--ink-400); }
/* число выбранных фото: видно только на квадратной кнопке низкого экрана, там миниатюрам места нет */
.photo__count {
  display: none; position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--ice-500); color: var(--ink-900);
  font-weight: 600; font-size: 11px; line-height: 18px; text-align: center;
}
/* фото выбраны: вместо кнопки строка той же высоты. значок камеры слева, как у адреса, дальше миниатюры 40
   со скруглением 10 и крестиком в углу, последним «плюс», пока фото меньше трёх */
.shots { display: flex; align-items: center; gap: 8px; min-width: 0; }
.shots--form { display: none; position: relative; height: 52px; }
.shots--form::before { content: ""; position: absolute; top: 0; left: 32px; right: 0; height: 1px; background: var(--line); }
.address.has-shots .photo { display: none; }
.address.has-shots .shots--form { display: flex; }
.shots__icon { width: 20px; height: 20px; margin-right: 4px; color: var(--ink-400); --icon-stroke: 2.1; }
.shot { position: relative; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--fill); }
.shot img { display: block; width: 100%; height: 100%; border-radius: 10px; object-fit: cover; }
.shot__del {
  position: absolute; top: -6px; right: -6px;
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink-900); color: var(--white); box-shadow: 0 0 0 2px var(--white);
}
.shot__del svg { width: 12px; height: 12px; --icon-stroke: 3.5; }
.shot__del::after { content: ""; position: absolute; inset: -10px; }       /* цель касания 40 */
.shot--add { display: grid; place-items: center; color: var(--ink-600); transition: background-color .15s; }
.shot--add svg { width: 20px; height: 20px; --icon-stroke: 2.1; }
/* адреса без номера дома: тонкая линия «жара» под строкой, пока человек не поправит */
.address .field.is-wrong, .address .field.is-wrong:has(.field__input:focus-visible) { box-shadow: 0 2px 0 var(--heat); }

/* второй блок: услуги, плитки 104 на 84, как тарифы у Яндекс Go */
.section-label { margin-bottom: 10px; font-weight: 500; font-size: 15px; line-height: 20px; color: var(--ink-600); }
.tiles { display: grid; grid-template-columns: repeat(3, 104px); gap: 8px; }
.tile {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  height: 84px; padding: 10px 12px;
  border-radius: var(--r-16); background: var(--fill);
  cursor: pointer; user-select: none;
  transition: background-color .15s, box-shadow .15s;
}
.tile__icon { width: 24px; height: 24px; color: var(--ink-900); transition: color .15s; }
.tile__text { display: block; }
.tile__name { display: block; font-weight: 500; font-size: 14px; line-height: 18px; white-space: nowrap; }
/* в ценах и времени цифры пропорциональные, это отступление от спеки: у табличной «1» в Onest широкие поля,
   и «17:00», «от 1 500 ₽», «15:30» читаются как «1 7:00», «от 1  500». сравнение в shots/check_digits_tabular_vs_proportional.png.
   табличные цифры оставили только живым счётчикам вроде «38», чтобы ширина не прыгала */
.tile__price {
  display: block; font-weight: 400; font-size: 13px; line-height: 16px;
  color: var(--ink-600); white-space: nowrap;
}
/* неразрывный пробел в «1 500» сужаем до 0,11 em, чтобы читалось одним числом, а не «1» отдельным словом */
.tile__price .nb { letter-spacing: -0.16em; }

/* третий блок: «Когда» */
.seg {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  height: 44px; padding: 4px;
  border-radius: 14px; background: var(--fill);
}
.seg__runner {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 10px; background: var(--white); box-shadow: var(--shadow-runner);
  transition: transform .25s var(--ease);
}
.seg:has(input[value="time"]:checked) .seg__runner { transform: translateX(100%); }
.seg__opt {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 10px;
  color: var(--ink-600);
  font-weight: 500; font-size: 14px; line-height: 20px; white-space: nowrap;   /* надпись «Как можно скорее» с иконкой занимает 141 px из 160 */
  cursor: pointer; user-select: none;
  transition: color .15s;
}
.seg__opt:has(:checked) { color: var(--ink-900); }
.seg__icon { width: 18px; height: 18px; }
.seg__sub, .seg__check { display: none; }

.hint {
  position: relative;
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  color: var(--ink-600); font-weight: 400; font-size: 13px; line-height: 16px;
}
.hint__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--free); }

/* режим «Ко времени»: один ряд из четырёх чипов 96 на 40, в чипе день и время в две строки */
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.chip {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 40px; padding: 0 4px;
  border-radius: var(--r-12); background: var(--fill);
  font-weight: 500; font-size: 12px; line-height: 15px; white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: background-color .15s, box-shadow .15s;
}
.chip__day, .chip__time { display: block; }
.chip__time { font-weight: 400; color: var(--ink-600); transition: color .15s; }
.chip:has(:checked) .chip__time { color: var(--ink-900); }

/* четвёртый блок: кнопка */
.cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 56px;
  border-radius: var(--r-16); background: var(--ice-500); color: var(--ink-900);
  font-weight: 500; font-size: 17px; line-height: 22px;
  transition: background-color .15s, transform .12s var(--ease);
}
.cta:active { transform: scale(.985); }
.cta:disabled { background: var(--fill); color: var(--ink-600); cursor: default; transform: none; }
.cta-note {
  margin-top: 10px; text-align: center;
  color: var(--ink-600); font-weight: 400; font-size: 13px; line-height: 16px;
}
/* заказы сейчас не принимаются: спокойная серая плашка над серой кнопкой, без красного и восклицаний */
.off { margin-bottom: 12px; padding: 12px 16px; border-radius: var(--r-16); background: var(--fill); }
.off__title { font-weight: 500; font-size: 15px; line-height: 20px; }
.off__text { margin-top: 2px; color: var(--ink-600); font-weight: 400; font-size: 14px; line-height: 18px; text-wrap: pretty; }
.off__links { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 4px; }
.off__link { display: flex; align-items: center; min-height: 32px; color: var(--ice-700); font-weight: 500; font-size: 14px; line-height: 18px; border-radius: 6px; }
.off:not([hidden]) ~ .cta-note { display: none; }

/* выбранное и фокус у плиток, сегментов и чипов */
.tile:has(:checked), .chip:has(:checked) { background: var(--ice-100); box-shadow: inset 0 0 0 2px var(--ice-500); }
.tile:has(:checked) .tile__icon { color: var(--ice-700); }
.tile:has(:focus-visible), .seg__opt:has(:focus-visible), .chip:has(:focus-visible) {
  outline: 2px solid var(--ice-700); outline-offset: 2px;
}

/* шаг «Телефон для связи», открывается по «Вызвать инженера» и по «Войти» */
.step { padding: 16px; }
.step__back {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-12); background: var(--fill); color: var(--ink-900);
  transition: background-color .15s;
}
.step__back svg { width: 24px; height: 24px; }
.step__title { margin-top: 16px; }
.step__form { margin-top: 20px; }
.field__input--tel { padding-left: 16px; }
.step__cta { margin-top: 12px; }
/* переключатель «Войти по почте» или «Войти по телефону» есть только на шаге «Вход»: Саша просил вход и по телефону, и по почте.
   текст начинается с 16, как в поле. высота 44 и текст по центру, так что до поля и до кнопки по 12 */
.step__switch {
  display: flex; align-items: center; width: fit-content;
  height: 44px; padding: 0 16px;
  border-radius: var(--r-12);
  color: var(--ice-700);
  font-weight: 500; font-size: 15px; line-height: 20px; white-space: nowrap;
  transition: background-color .15s;
}
.step__switch:not([hidden]) + .step__cta { margin-top: 0; }
/* согласие на обработку персональных данных: отдельная галочка над «Получить код», не отмеченная заранее.
   квадрат 22 со скруглением 6, отмеченный заливается «льдом» с белой галочкой. цель касания вся строка */
.consent {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 12px; padding: 0 4px;
  color: var(--ink-600); font-weight: 400; font-size: 13px; line-height: 18px;
  cursor: pointer;
}
.consent__box {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 22px; height: 22px; margin: -2px 0 0;
  border: 2px solid var(--ink-400); border-radius: 6px; background: var(--white);
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.consent__box:checked {
  border-color: var(--ice-500);
  background: var(--ice-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2321201F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.consent__text a { color: var(--ink-900); text-decoration: underline; text-decoration-color: var(--ink-400); text-underline-offset: 2px; }
.consent + .step__cta, .consent__error + .step__cta { margin-top: 12px; }
.consent__error { padding: 0 4px; }

/* «Проверьте заказ»: строки как «Откуда / Куда», та же высота и разделитель от текста */
.review { margin: -4px 0 0; padding: 0; list-style: none; }
.review__row {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0;
  font-weight: 400; font-size: 16px; line-height: 20px;
}
.review__row + .review__row::before { content: ""; position: absolute; top: 0; left: 32px; right: 0; height: 1px; background: var(--line); }
.review__text { min-width: 0; overflow-wrap: anywhere; }
.review__text .nb { letter-spacing: -0.16em; }
.review__row .shots { padding: 4px 0; }
.review__off { color: var(--ink-600); }
/* что передать инженеру: квартира, этаж и домофон одной строкой из трёх серых полей, подпись мелко сверху поля.
   первое шире, в нём самая длинная подпись. ниже поле «Что случилось?», растёт под текст */
.extra { margin-top: 12px; }
.extra__row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.extra__field { position: relative; display: block; height: 52px; border-radius: var(--r-12); background: var(--fill); cursor: text; }
.extra__field:has(.extra__input:focus-visible) { box-shadow: inset 0 0 0 2px var(--ice-500); }
.extra__label {
  position: absolute; left: 12px; right: 6px; top: 7px;
  overflow: hidden; white-space: nowrap; pointer-events: none;
  color: var(--ink-600); font-weight: 400; font-size: 12px; line-height: 14px;
}
.extra__short { display: none; }
.extra__input {
  display: block; width: 100%; height: 100%; padding: 22px 12px 6px;
  border: 0; border-radius: inherit; background: transparent;
  font-weight: 400; font-size: 16px; line-height: 20px; color: var(--ink-900);
}
.extra__input:focus-visible { outline: 0; }
/* многострочное поле в стиле полей шага: серое, скругление 16, шрифт 16 (меньше айфон увеличивает страницу) */
.area {
  display: block; width: 100%; min-height: 52px; max-height: 132px; padding: 15px 16px;
  border: 0; border-radius: var(--r-16); background: var(--fill); resize: none;
  font: 400 16px/22px var(--font); color: var(--ink-900);
}
.area::placeholder { color: var(--ink-400); opacity: 1; }
.area:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--ice-500); }
.extra__note { margin-top: 8px; }
/* «Вызвать инженера» в «Проверьте заказ» видна всегда: на низком экране строки и поля листаются под ней,
   белое поле вокруг кнопки закрывает то, что уходит под неё */
#review-cta { position: sticky; bottom: 8px; z-index: 1; box-shadow: 0 0 0 8px var(--white); }
.extra__left { margin-top: 6px; padding: 0 4px; text-align: right; color: var(--ink-600); font-weight: 400; font-size: 13px; line-height: 16px; }
/* второй экран входа: код, звонок и профиль */
.step__lead { margin-bottom: 12px; color: var(--ink-600); font-weight: 400; font-size: 15px; line-height: 20px; }
.field__input--code { font-weight: 500; font-size: 20px; letter-spacing: .3em; }
.field__input--code::placeholder { font-weight: 400; font-size: 16px; letter-spacing: 0; }
.step__error { margin-top: 8px; padding: 0 16px; color: var(--heat); font-weight: 400; font-size: 14px; line-height: 18px; }
.step__dev { display: block; margin-top: 8px; padding: 0 16px; color: var(--ice-700); font-weight: 400; font-size: 13px; line-height: 16px; text-align: left; }
.step__dev[hidden], .step__error[hidden] { display: none; }
.step__dev--flush { padding: 0; }      /* на экране звонка всё ровно по левому краю текста */
.step__call { display: block; color: var(--ink-900); font-weight: 600; font-size: 26px; line-height: 32px; letter-spacing: -0.01em; white-space: nowrap; }
.step__wait { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--ink-600); font-weight: 400; font-size: 14px; line-height: 18px; }
/* пока ждём звонок, рядом мигает точка «льда» */
.step__wait::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ice-500); animation: wait-blink 1.2s ease-in-out infinite; }
.step__wait.is-over::before { background: var(--heat); animation: none; }
@keyframes wait-blink { 50% { opacity: .25; } }
/* профиль как в Telegram: круглое фото 96 с камерой «льда» в углу, без фото первая буква имени, ниже имя
   и строки «Имя», «Телефон», «Почта» со значками. значение справа цветом ссылки, если его можно поменять или добавить */
.profile__head { display: grid; justify-items: center; gap: 8px; padding: 0 0 12px; }
.profile__avatar { position: relative; width: 96px; height: 96px; border-radius: 50%; background: var(--ice-100); color: var(--ice-700); transition: opacity .15s; }
.profile__avatar.is-busy { opacity: .5; pointer-events: none; }
.profile__img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.profile__initial { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 600; font-size: 38px; line-height: 1; }
.profile__img:not([hidden]) + .profile__initial { display: none; }
.profile__cam {
  position: absolute; right: -2px; bottom: -2px;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ice-500); color: var(--white); box-shadow: 0 0 0 3px var(--white);
}
.profile__cam svg { width: 18px; height: 18px; --icon-stroke: 2; }
.profile__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 20px; line-height: 26px; }
.profile__remove { color: var(--ink-600); font-weight: 400; font-size: 13px; line-height: 16px; }
.profile__rows { margin-bottom: 12px; border-top: 1px solid var(--line); }
.profile__row {
  display: grid; grid-template-columns: 22px auto 1fr; align-items: center; gap: 14px;
  width: 100%; min-height: 52px; padding: 0 4px; border-bottom: 1px solid var(--line);
  color: var(--ink-900); font-weight: 400; font-size: 15px; line-height: 20px; text-align: left;
}
.profile__row svg { width: 22px; height: 22px; color: var(--ink-600); --icon-stroke: 1.9; }
.profile__row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: var(--ice-700); font-weight: 400; }
.profile__row:disabled { cursor: default; }
.profile__row:disabled b { color: var(--ink-600); }
/* регистрация: слева от поля имени круг 52 с камерой, как в Telegram. фото по желанию, выбрал, и камера сменилась фото */
.reg { display: flex; align-items: center; gap: 12px; }
.reg .field { flex: 1; min-width: 0; }
.reg__photo {
  position: relative; flex: none; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--ice-100); color: var(--ice-700); transition: opacity .15s;
}
.reg__photo.is-busy { opacity: .5; pointer-events: none; }
.reg__photo .profile__img { position: absolute; inset: 0; }
.reg__cam { width: 24px; height: 24px; --icon-stroke: 1.9; }
.profile__img:not([hidden]) + .reg__cam { display: none; }
.cta--quiet { background: var(--fill); }
/* «Удалить аккаунт» тихой серой строкой под «Выйти», чтобы не нажать случайно; вопрос как у отмены заказа */
.profile__delete {
  display: block; margin: 12px auto 0; padding: 8px 12px; border-radius: var(--r-12);
  color: var(--ink-600); font-weight: 400; font-size: 14px; line-height: 18px;
}
.profile__confirm { margin-top: 16px; }
.profile__warn { margin: -4px 0 12px; text-align: center; color: var(--ink-600); font-weight: 400; font-size: 14px; line-height: 18px; text-wrap: pretty; }
.nowrap { white-space: nowrap; }
/* «Отправить ещё раз через 0:59» пока нельзя нажать: серым и без подсветки, как у Яндекс Go */
.step__switch:disabled { color: var(--ink-400); background: none; cursor: default; }
@media (prefers-reduced-motion: reduce) { .step__wait::before { animation: none; } }

/* погода и карточка «Стать инженером» */
/* погода стоит по центру свободного места между колонкой (392) и карточкой (справа 16 + 352 + 16 = 384):
   (392 + 100% − 384) / 2 = 50% + 4. app.js потом ставит left целым числом */
.weather {
  position: fixed; z-index: 10;
  top: 104px; left: calc(50% + 4px);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px 0 12px;
  border-radius: var(--r-pill); background: var(--white); box-shadow: var(--shadow-card);
  font-weight: 500; font-size: 14px; line-height: 18px; white-space: nowrap;
}
/* значок погоды: части красятся переменными, подложка под облаком цвета плашки */
.weather__icon {
  flex: none; width: 18px; height: 18px; color: var(--ink-600); --icon-stroke: 2.33;
  --wx-sun: var(--sun); --wx-moon: var(--ice-700); --wx-cloud: var(--ink-400); --wx-drop: var(--ice-700); --wx-bg: var(--white);
}
/* пока погода грузится, в плашке переливается заглушка; не загрузилась, плашку прячем */
.weather.is-loading { width: 150px; }
.weather.is-loading > * { visibility: hidden; }
.weather.is-loading::before { content: ""; position: absolute; left: 14px; right: 16px; top: 13px; height: 14px; border-radius: 7px; }
.weather.is-off { display: none; }

/* карточка «Стать инженером» как «Стать водителем» у Яндекс Go: высота 96, заголовок 20/500, подпись 15/400,
   справа фото 104 на всю высоту. фото прижато к правому краю, скругление карточки его обрезает */
.become {
  position: fixed; z-index: 10;
  top: 104px; right: 16px; width: 352px; height: 96px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 0 0 20px; overflow: hidden;
  border-radius: var(--r-24); background: var(--white); box-shadow: var(--shadow-card);
}
.become__text { display: block; min-width: 0; }
.become__title { display: flex; align-items: center; font-weight: 500; font-size: 20px; line-height: 24px; white-space: nowrap; }
.become__chev { width: 18px; height: 18px; margin-left: 2px; transition: transform .2s var(--ease); --icon-stroke: 2.33; }
.become__sub { display: block; margin-top: 2px; color: var(--ink-600); font-weight: 400; font-size: 15px; line-height: 20px; }
.become__photo { position: relative; flex: none; align-self: stretch; width: 104px; }
.become__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s, transform .3s linear; }
.become__photo.is-loading img { opacity: 0; }

/* кнопки карты */
/* как у Яндекс Go: плюс и минус в одной пилюле шириной 48, геолокация кругом 48 */
.map-ctrl {
  position: fixed; z-index: 10;
  right: 16px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px;
}
.zoom { width: 48px; border-radius: var(--r-24); background: var(--white); box-shadow: var(--shadow-card); }
.zoom__btn {
  position: relative; display: grid; place-items: center;
  width: 48px; height: 48px; color: var(--ink-900);
  transition: background-color .15s;
}
.zoom__btn:first-child { border-radius: 24px 24px 0 0; }
.zoom__btn:last-child { border-radius: 0 0 24px 24px; }
.zoom__btn + .zoom__btn::before {
  content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px;
  background: var(--line);
}
.locate {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: var(--r-pill);
  background: var(--white); box-shadow: var(--shadow-card); color: var(--ink-900);
  transition: background-color .15s;
}
.map-ctrl svg { width: 22px; height: 22px; --icon-stroke: 1.91; }
/* нет доступа к геопозиции: белая плашка слева от кнопки «где я», по центру её высоты */
.geo-off {
  position: absolute; right: calc(100% + 8px); bottom: 8px;
  display: flex; align-items: center; height: 32px; padding: 0 12px;
  border-radius: var(--r-pill); background: var(--white); box-shadow: var(--shadow-card);
  font-weight: 400; font-size: 14px; line-height: 18px; white-space: nowrap;
}
.geo-off[hidden] { display: none; }
.locate.is-busy svg { animation: locate-pulse 1s ease-in-out infinite; }
@keyframes locate-pulse { 50% { opacity: .35; } }
/* в низком окне кнопки по центру наезжают на карточку (её низ на 200), поэтому ставим их на 16 ниже */
@media (min-width: 1024px) and (max-height: 599px) {
  .map-ctrl { top: 216px; transform: none; }
}

/* сообщения поверх карты: «нет доступа к геопозиции» и «здесь нас пока нет» */
.toast {
  position: fixed; z-index: 40; left: 50%; bottom: 72px; transform: translateX(-50%);
  display: flex; align-items: center; min-height: 40px; padding: 10px 16px;
  border-radius: var(--r-12); background: var(--ink-900); color: var(--white);
  font-weight: 400; font-size: 14px; line-height: 18px;
  box-shadow: var(--shadow-island);
}
/* адрес вне зоны выезда, как у Яндекс Go: всё затемнено, по центру окно 500 с отступами 24 сверху и 16 по краям,
   заголовок 24/28, текст 16/20, кнопка 56 и под ней серая ссылка 13/25, между ними по 16 */
.zone {
  position: fixed; z-index: 50; inset: 0;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(31, 32, 33, .6);
}
.zone[hidden] { display: none; }
.zone__box {
  width: 500px; max-width: 100%; padding: 24px 16px 16px;
  border-radius: var(--r-24); background: var(--white);
}
.zone__box:focus { outline: none; }   /* фокус ставим на само окно, чтобы кнопка не горела рамкой с первой секунды */
.zone__title { font-weight: 500; font-size: 24px; line-height: 28px; }
.zone__text { margin-top: 16px; font-weight: 400; font-size: 16px; line-height: 20px; text-wrap: pretty; }   /* без одинокого слова в последней строке */
.zone__cta { width: 100%; margin-top: 16px; }
.zone__link {
  display: block; margin-top: 16px; text-align: center;
  color: var(--ink-400); font-weight: 400; font-size: 13px; line-height: 25px;
  transition: color .15s;
}
.zone__link:hover { color: var(--ink-600); }
/* вне зоны плашку у метки и погоду не показываем, плитки и время ближайшего остаются заглушками, кнопка серая.
   инженера, который едет по своему заказу (.is-mine), не прячем никогда */
body.is-out .weather, body.is-out .engineer:not(.is-mine), body.is-out .pin__plate, body.is-out .block--cta .cta-note { display: none; }

/* подвал поверх карты */
.footer { position: fixed; z-index: 10; left: 392px; right: 16px; bottom: 16px; pointer-events: none; }
.footer a { pointer-events: auto; border-radius: 4px; transition: color .15s; }
.footer__links {
  display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 6px;
  color: var(--ink-600); font-weight: 400; font-size: 13px; line-height: 16px; white-space: nowrap;
}
/* строка компании как у Яндекс Go: тем же размером и цветом, что ссылки, на 10 ниже.
   fit-content, чтобы рамка была ровно по тексту: по ней app.js прячет маркеры, которые задевают подвал */
.footer__copy { width: fit-content; margin-top: 10px; color: var(--ink-600); font-weight: 400; font-size: 13px; line-height: 16px; }
.footer__credit { display: none; }

/* маркеры, это элементы maplibregl.Marker */
/* .maplibregl-map ставит свой шрифт, возвращаем Onest */
.engineer, .pin { font-family: var(--font); color: var(--ink-900); }
/* инженер на карте это снежинка: белая снежинка в голубом круге, «холод» против оранжевой метки «жара» */
.engineer { width: 34px; height: 34px; }
.engineer:hover { z-index: 3; }
.engineer__body {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ice-500); box-shadow: 0 0 0 2px var(--white), var(--shadow-marker); color: var(--white);
}
.engineer__icon { width: 22px; height: 22px; }
/* боты появляются, исчезают и прячутся под островами плавно; издалека (зум меньше 13) их не видно.
   гасим кружок внутри: прозрачность самого маркера MapLibre пишет себе в style и перебивает классы */
.engineer__body { transition: opacity .3s; }
.engineer.is-new .engineer__body, .engineer.is-gone .engineer__body, .engineer.is-hidden .engineer__body,
.engineer.is-new .engineer__dir, .engineer.is-gone .engineer__dir, .engineer.is-hidden .engineer__dir { opacity: 0; }
.engineer.is-new, .engineer.is-gone, .engineer.is-hidden { pointer-events: none; }
body.bots-far .engineer:not(.is-mine) { display: none; }
/* инженер на заказе: белый кружок и голубая снежинка */
.engineer.is-busy .engineer__body { background: var(--white); color: var(--ice-700); }
/* едет к клиенту: та же снежинка и маленькая стрелка по ходу движения. карта не вращается, поэтому курс
   это просто поворот на экране (--hd ставит app.js, угол копится без скачка через 360) */
.engineer__dir {
  position: absolute; inset: 0; display: none; pointer-events: none;
  transform: rotate(var(--hd, 0deg)); transition: transform .6s var(--ease), opacity .3s;
}
.engineer__dir svg { position: absolute; left: 50%; top: -12px; width: 14px; height: 10px; margin-left: -7px; }
.engineer.is-way.has-hd .engineer__dir, .engineer.is-mine.has-hd .engineer__dir { display: block; }
/* инженер по своему заказу: всегда сверху. пока он не принял заказ, кружок серый */
.engineer.is-mine { z-index: 3; }
.engineer.is-mine .engineer__body { transition: opacity .3s, background-color .3s; }
.engineer.is-mine.is-pending .engineer__body { background: var(--ink-400); }
/* когда инженер уже назначен, чужие метки убираем, чтобы тот же человек не стоял на карте дважды */
body.track-solo .engineer:not(.is-mine) { display: none; }
/* подсказка над маркером. app.js ставит целый left через --tip-left вместо сдвига на −50 % */
.engineer__tip {
  position: absolute; left: var(--tip-left, 50%); bottom: calc(100% + 8px);
  display: flex; align-items: center; height: 28px; padding: 0 12px;
  border-radius: var(--r-pill); background: var(--white); box-shadow: var(--shadow-marker);
  font-weight: 500; font-size: 13px; line-height: 16px; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(var(--tip-dx, -50%), 4px);
  transition: opacity .15s, visibility .15s, transform .15s var(--ease);
}
.engineer:hover .engineer__tip { opacity: 1; visibility: visible; transform: translate(var(--tip-dx, -50%), 0); }

.pin { --pin-fill: var(--heat); width: 44px; height: 54px; z-index: 2; }
.pin__svg { width: 44px; height: 54px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .20)); transition: transform .15s var(--ease); }
/* метка стоит в центре карты, как у Яндекс Go: пока карту двигают, она поднята, отпустили, и она встаёт на адрес */
.pin::before {
  content: ""; position: absolute; left: 50%; bottom: -3px;
  width: 10px; height: 4px; margin-left: -5px; border-radius: 50%;
  background: rgba(0, 0, 0, .28); opacity: 0; transition: opacity .15s;
}
.pin.is-lifted .pin__svg { transform: translateY(-12px); }
.pin.is-lifted::before { opacity: 1; }
.pin.is-lifted .pin__plate { opacity: 0; }
.pin__plate { transition: opacity .15s; }
/* плашка справа на 12, по центру головки метки (y 22) */
.pin__plate {
  position: absolute; left: 54px; top: 6px;
  display: flex; align-items: center; height: 32px; padding: 0 12px;
  border-radius: var(--r-pill); background: var(--white); box-shadow: var(--shadow-marker);
  font-weight: 500; font-size: 14px; line-height: 18px; white-space: nowrap;
}

/* пока боты не выехали, в плашке у метки заглушка */
.pin__plate.is-loading { color: transparent; }
.pin__plate.is-loading::before { content: ""; position: absolute; left: 12px; right: 12px; top: 9px; height: 14px; border-radius: 7px; }
.pin__plate.is-off { display: none; }
/* во время заказа метка не в центре: если справа плашке не хватает места, она слева от метки */
.pin__plate.is-left { left: auto; right: 54px; }

/* ищем инженера: от точки заказа расходятся круги «льда», как радар у Яндекс Go. без свечения, просто заливка,
   которая растёт и тает. круги под каплей метки, центр в её острие */
.pin__svg { position: relative; z-index: 1; }
.pin__radar { position: absolute; left: 22px; top: 53px; width: 0; height: 0; display: none; pointer-events: none; }
.pin.is-searching .pin__radar { display: block; }
.pin__radar::before, .pin__radar::after {
  content: ""; position: absolute; left: -110px; top: -110px; width: 220px; height: 220px;
  border-radius: 50%; background: var(--ice-500); box-shadow: inset 0 0 0 2px var(--ice-600);
  opacity: 0; transform: scale(.1);
  animation: radar 2.6s cubic-bezier(.25, .6, .4, 1) infinite;
}
.pin__radar::after { animation-delay: 1.3s; }
@keyframes radar { 0% { opacity: .5; transform: scale(.1); } 100% { opacity: 0; transform: scale(1); } }

/* слежение за заказом в колонке (на телефоне в шторке): статус и карточка инженера, адрес с услугой, отмена */
.track { display: flex; flex-direction: column; gap: 8px; }
.track__main { padding: 16px; }
.track__title { white-space: normal; text-wrap: balance; }
.track__sub { margin-top: 4px; color: var(--ink-600); font-weight: 400; font-size: 15px; line-height: 20px; text-wrap: pretty; }
.track__sub:empty { display: none; }
/* карточка выезжает по высоте (grid 0fr в 1fr) и так же схлопывается, когда инженер отказался */
.track__slot { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s var(--ease), opacity .3s; }
.track__slot.is-collapsed { grid-template-rows: 0fr; opacity: 0; }
.track__inner { min-height: 0; overflow: hidden; }
.track__card { display: flex; align-items: center; gap: 12px; padding-top: 16px; }
/* круг с первой буквой имени, как в профиле. серый, пока инженер не ответил, «лёд», когда принял заказ */
.track__avatar {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--ice-100); color: var(--ice-700);
  font-weight: 600; font-size: 20px; line-height: 1;
  transition: background-color .3s, color .3s;
}
.track__avatar.is-pending { background: var(--fill); color: var(--ink-400); }
/* фото инженера вместо буквы (ставит он сам в кабинете) */
.track__avatar.has-photo { overflow: hidden; background: var(--fill); }
.track__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.track__who { display: flex; flex-direction: column; min-width: 0; }
.track__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 17px; line-height: 22px; }
.track__rating { margin-top: 2px; color: var(--ink-600); font-weight: 400; font-size: 14px; line-height: 18px; white-space: nowrap; }
.track__wait { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--ink-600); font-weight: 400; font-size: 14px; line-height: 18px; }
.track__wait::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ice-500); animation: wait-blink 1.2s ease-in-out infinite; }
.track__wait[hidden] { display: none; }
/* поиск: по светлой дорожке внизу блока бежит отрезок «льда», как полоска поиска у Яндекс Go */
.track__bar { position: relative; height: 4px; margin-top: 16px; overflow: hidden; border-radius: 2px; background: var(--fill); }
.track__bar span {
  position: absolute; top: 0; bottom: 0; left: 0; width: 34%; border-radius: 2px; background: var(--ice-500);
  animation: track-run 1.5s ease-in-out infinite;
}
@keyframes track-run { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
/* ко времени: шаги как у доставки. сделанные с галочкой и временем, текущий с мигающей точкой, будущие серые */
.track__steps { margin: 12px 0 0; padding: 0; list-style: none; }
.track__step {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 36px;
  color: var(--ink-400); font-weight: 400; font-size: 15px; line-height: 20px;
}
.track__step.is-done, .track__step.is-now { color: var(--ink-900); }
.track__step + .track__step::before { content: ""; position: absolute; left: 9px; top: -8px; width: 2px; height: 16px; background: var(--line); }
.track__step.is-done + .track__step::before { background: var(--ice-500); }
.track__mark { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--fill); }
.track__mark::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-400); }
.track__mark svg { width: 14px; height: 14px; --icon-stroke: 2.6; }
.track__step.is-done .track__mark { background: var(--ice-500); color: var(--white); }
.track__step.is-done .track__mark::before { display: none; }
.track__step.is-now .track__mark { background: var(--ice-100); }
.track__step.is-now .track__mark::before { width: 8px; height: 8px; background: var(--ice-500); animation: wait-blink 1.2s ease-in-out infinite; }
.track__step-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track__time { margin-left: auto; padding-left: 8px; color: var(--ink-600); font-size: 13px; line-height: 16px; }
/* адрес и услуга строками, как «Откуда / Куда» */
.track__order { padding: 0 16px; }
.track__row {
  position: relative; display: flex; align-items: center; gap: 12px; height: 52px;
  font-weight: 400; font-size: 16px; line-height: 20px;
}
.track__row + .track__row::before { content: ""; position: absolute; top: 0; left: 32px; right: 0; height: 1px; background: var(--line); }
.track__icon { width: 20px; height: 20px; color: var(--ink-400); --icon-stroke: 2.1; }
.track__icon--pin { color: var(--ice-700); }
.track__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track__text .nb { letter-spacing: -0.16em; }
.track__actions { padding: 16px; }
.track__ask { margin-bottom: 12px; text-align: center; font-weight: 500; font-size: 17px; line-height: 22px; }
.track__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* под ответом сервера две строки (отменён: фраза и кто отменил). нет связи: последние минуты серым */
.track__sub { white-space: pre-line; }
.track__sub.is-stale { color: var(--ink-400); }
.pin__plate.is-stale { color: var(--ink-400); }
/* строка фото в заказе: «Фото у инженера» или «Фото не отправилось» и справа «Повторить» */
.track__retry {
  flex: none; margin-left: auto; height: 32px; padding: 0 12px; border-radius: var(--r-12);
  background: var(--fill); font-weight: 500; font-size: 14px; line-height: 18px; transition: background-color .15s;
}
.track__row.is-bad .track__icon { color: var(--heat); }
/* связаться: две тихие ссылки по центру под кнопкой заказа, есть на любом шаге */
.contact { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.contact__link {
  display: flex; align-items: center; min-height: 40px; padding: 0 8px; border-radius: var(--r-12);
  color: var(--ice-700); font-weight: 500; font-size: 15px; line-height: 20px; white-space: nowrap;
  transition: background-color .15s;
}
.contact__link:not([hidden]) ~ .contact__link:not([hidden])::before { content: "·"; margin: 0 10px 0 -2px; color: var(--ink-400); }
.track__actions.is-contact-only { padding-top: 4px; padding-bottom: 4px; }
.track__actions.is-contact-only .contact { margin-top: 0; }
/* работа выполнена: подпись мелко серым, ниже значение, строки через 12 */
.result { margin-top: 4px; }
.result__row { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.result__label { color: var(--ink-600); font-weight: 400; font-size: 13px; line-height: 16px; }
.result__value { font-weight: 400; font-size: 16px; line-height: 21px; overflow-wrap: anywhere; }
.result__value .nb { letter-spacing: -0.16em; }
/* оценка: пять звёзд по 48, выбранные «жаром», как солнце в погоде. потом короткие кнопки и пара слов */
.rate { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.rate__ask { text-align: center; font-weight: 500; font-size: 17px; line-height: 22px; }
.rate__stars { display: flex; justify-content: center; gap: 2px; margin-top: 8px; }
.rate__star {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-12);
  color: var(--ink-400); --star-fill: none;
  transition: color .15s, transform .12s var(--ease);
}
.rate__star svg { width: 36px; height: 36px; --icon-stroke: 1.3; }
.rate__star.is-on { color: var(--heat); --star-fill: var(--heat); }
.rate__star:active { transform: scale(.9); }
.rate__stars--small { margin-top: 4px; }
.rate__stars--small .rate__star { width: 40px; height: 40px; }
.rate__stars--small .rate__star svg { width: 28px; height: 28px; --icon-stroke: 1.5; }
.rate__stars.is-busy { opacity: .6; pointer-events: none; }
.rate__more { margin-top: 12px; }
.rate__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.rate__tag {
  height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--fill);
  font-weight: 500; font-size: 14px; line-height: 18px; white-space: nowrap;
  transition: background-color .15s, box-shadow .15s;
}
.rate__tag[aria-pressed="true"] { background: var(--ice-100); box-shadow: inset 0 0 0 2px var(--ice-500); }
.rate__comment, .rate__send { margin-top: 12px; }
.rate__done { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; }
.rate__thanks { color: var(--ink-600); font-weight: 400; font-size: 15px; line-height: 20px; text-wrap: pretty; }
.rate__chat { margin-top: 12px; }
/* заказ одной карточкой (Саша, 11.10): статус, инженер, адрес и кнопки в одном белом блоке, части через тонкую линию.
   окно низкое: листается вся карточка, а кнопки заказа держатся у её нижнего края. колонка начинается со 104,
   внизу её поле --order-pb */
@media (min-width: 601px) {
  .track {
    max-height: calc(100vh - 104px - var(--order-pb, 16px)); gap: 0; pointer-events: auto;
    background: var(--white); border-radius: var(--r-24); box-shadow: var(--shadow-block);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
  .track > .block { flex: none; background: none; box-shadow: none; border-radius: 0; }
  .track > .block + .block:not([hidden]) { border-top: 1px solid var(--line); }
  /* кнопки заказа держатся снизу, пока заказ идёт; фон обязательно белый, иначе под ними просвечивает то, что листается.
     заказ закончился: кнопки встают на своё место под оценкой и ничего не закрывают */
  .track > .track__actions { position: sticky; bottom: 0; z-index: 1; background: var(--white); }
  body.track-fin .track > .track__actions { position: static; }
}
/* на телефоне тоже одна белая шторка без серых щелей между частями */
@media (max-width: 600px) {
  .track { gap: 0; }
  .track > .block + .block:not([hidden]) { border-top: 1px solid var(--line); }
  body.track-fin .track > .track__actions { position: static; box-shadow: none; }
}

/* статус над картой: по центру свободного места, на месте плашки погоды (во время заказа погоды нет) */
.track-pill {
  position: fixed; z-index: 12;
  top: 104px; left: calc(50% + 4px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px 0 14px;
  border-radius: var(--r-pill); background: var(--white); box-shadow: var(--shadow-card);
  font-weight: 500; font-size: 14px; line-height: 18px; white-space: nowrap;
}
.track-pill::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ice-500); }
.track-pill.is-waiting::before { animation: wait-blink 1.2s ease-in-out infinite; }
.track-pill.is-over::before { background: var(--ink-400); }
.track-pill[hidden] { display: none; }
body.is-tracking .weather { display: none; }
/* карта не загрузилась: тихая плашка под погодой (или статусом заказа), серая мигающая точка, нажимать нечего */
.map-err {
  position: fixed; z-index: 12;
  top: 152px; left: calc(50% + 4px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px 0 12px;
  border-radius: var(--r-pill); background: var(--white); box-shadow: var(--shadow-card);
  color: var(--ink-600); font-weight: 500; font-size: 14px; line-height: 18px; white-space: nowrap;
  pointer-events: none;
}
.map-err::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-400); animation: wait-blink 1.2s ease-in-out infinite; }
.map-err[hidden] { display: none; }

/* «Другое время»: окно поверх карты, как окно вне зоны. дни в ряд, время сеткой по 30 минут */
.pick__box { width: 440px; }
.pick__days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.pick__times { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.pick__opt {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 40px; border-radius: var(--r-12); background: var(--fill);
  font-weight: 500; font-size: 14px; line-height: 18px; white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: background-color .15s, box-shadow .15s;
}
.pick__opt:has(:checked) { background: var(--ice-100); box-shadow: inset 0 0 0 2px var(--ice-500); }
.pick__opt:has(:focus-visible) { outline: 2px solid var(--ice-700); outline-offset: 2px; }
.pick__opt:has(:disabled) { color: var(--ink-400); cursor: default; }
/* «Помощь» и «Мои заказы»: там же, где заказ (колонка, на телефоне шторка), одним белым островом.
   сверху стрелка «назад» и заголовок, как у шага входа, под ними список тем строками, как меню телефона, или тема */
.help, .orders { display: flex; flex-direction: column; }
.help__head { padding: 16px 16px 4px; border-radius: var(--r-24) var(--r-24) 0 0; }
.help__head .step__title:focus { outline: none; }   /* фокус туда ставит app.js при открытии, рамка не нужна */
.help > .block:not(.help__head), .orders > .block:not(.help__head) { border-radius: 0 0 var(--r-24) var(--r-24); }
.help__list { padding: 4px 16px 8px; }
.help__row {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 10px 0;
  border-radius: 12px;
}
.help__row + .help__row::before, .help__topic > .help__row + .help__row::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line);
}
.help__text { flex: 1; min-width: 0; }
.help__name { display: block; font-weight: 500; font-size: 16px; line-height: 20px; }
.help__sub { display: block; margin-top: 2px; color: var(--ink-600); font-weight: 400; font-size: 14px; line-height: 18px; }
.help__chev { width: 20px; height: 20px; color: var(--ink-400); --icon-stroke: 2.1; }
.help__row--off { color: var(--ink-600); cursor: default; }
.help__row--off .help__name { font-weight: 400; }
.help__topic { padding: 12px 16px 16px; }
.help__p { font-weight: 400; font-size: 15px; line-height: 21px; text-wrap: pretty; }
.help__p + .help__p, .help__prices + .help__p, .help__steps + .help__p { margin-top: 12px; }
.help__muted { color: var(--ink-600); }
.help__topic > .help__row + .help__p { margin-top: 8px; }
.help__cta { margin-top: 16px; }
.help__cta + .help__cta { margin-top: 8px; }
.help__p + .help__muted:not([hidden]) { margin-top: 12px; }
.help__a { color: var(--ink-900); text-decoration: underline; text-decoration-color: var(--ink-400); text-underline-offset: 2px; }
/* цены строками: значок плитки, название, «от N ₽» справа */
.help__prices { margin: -8px 0 4px; padding: 0; list-style: none; }
.help__price {
  position: relative; display: flex; align-items: center; gap: 12px; height: 48px;
  font-weight: 400; font-size: 16px; line-height: 20px;
}
.help__price + .help__price::before { content: ""; position: absolute; top: 0; left: 32px; right: 0; height: 1px; background: var(--line); }
.help__icon { width: 20px; height: 20px; color: var(--ink-400); --icon-stroke: 2.1; }
.help__pname { flex: 1; min-width: 0; }
.help__pval { color: var(--ink-600); white-space: nowrap; }
.help__pval .nb { letter-spacing: -0.16em; }
/* как мы работаем: шаги с номерами в кругах «льда» */
.help__steps { margin: 0; padding: 0; list-style: none; counter-reset: help-step; }
.help__steps li {
  position: relative; padding: 2px 0 0 36px; min-height: 24px;
  font-weight: 400; font-size: 15px; line-height: 21px; counter-increment: help-step;
}
.help__steps li + li { margin-top: 12px; }
.help__steps li::before {
  content: counter(help-step); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ice-100); color: var(--ice-700); font-weight: 600; font-size: 13px; line-height: 16px;
}
.help__steps b { font-weight: 500; }
/* частые вопросы: вопрос строкой с шевроном, ответ раскрывается под ним */
.faq + .faq { border-top: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 8px 0;
  font-weight: 500; font-size: 15px; line-height: 20px;
  list-style: none; cursor: pointer; border-radius: 8px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; flex: none; width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E9B98' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 20px no-repeat;
  transition: transform .2s var(--ease);
}
.faq[open] .faq__q::after { transform: rotate(180deg); }
.faq__a { padding: 0 0 14px; color: var(--ink-600); font-weight: 400; font-size: 15px; line-height: 21px; text-wrap: pretty; }
.help__topic > .faq:first-child .faq__q { margin-top: -8px; }
.help__topic > .faq:last-child[open] .faq__a { padding-bottom: 0; }

/* мои заказы: строка на заказ. значок услуги, что делали и статус, номер и дата, адрес, инженер, сумма, гарантия.
   идущий заказ нажимается и открывает слежение, отменённый бледнее */
.orders__body { padding: 4px 16px 8px; }
.orders__row {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  width: 100%; padding: 14px 0; text-align: left;
  border-radius: 12px;
}
.orders__row + .orders__row::before { content: ""; position: absolute; top: 0; left: 32px; right: 0; height: 1px; background: var(--line); }
.orders__row .track__icon { margin-top: 0; }
.orders__row .help__chev { align-self: center; }
.orders__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.orders__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.orders__what { font-weight: 500; font-size: 16px; line-height: 20px; }
.orders__stage { flex: none; color: var(--ink-600); font-weight: 400; font-size: 13px; line-height: 16px; }
.orders__row.is-active .orders__stage { color: var(--ice-700); font-weight: 500; }
.orders__line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-600); font-weight: 400; font-size: 14px; line-height: 18px; }
.orders__line .nb { letter-spacing: -0.16em; }
.orders__row.is-off .orders__what, .orders__row.is-off .track__icon { color: var(--ink-600); }
.orders__row:disabled { opacity: .6; cursor: default; }
.orders__empty { padding: 20px 0; text-align: center; color: var(--ink-600); font-weight: 400; font-size: 15px; line-height: 20px; }
.orders__retry { margin: 0 0 12px; }
.orders__skel { height: 64px; margin: 12px 0; border-radius: var(--r-16); }
/* выполненный заказ без оценки: под строками «Оценить», серая таблетка, как кнопки «что понравилось» под звёздами */
.orders__rate {
  align-self: flex-start; height: 36px; margin-top: 8px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--fill); color: var(--ink-900); font-weight: 500; font-size: 14px; line-height: 18px; white-space: nowrap;
  transition: background-color .15s;
}
.orders__rate:disabled { opacity: .6; cursor: default; }
@media (hover: hover) { .orders__rate:not(:disabled):hover { background: var(--fill-hover); } }

/* поддержка поверх страницы (Саша, 12.10): вид последних айфонов (Liquid Glass из iOS 26). полосы шапки нет:
   над перепиской парят человечек с подписью «Поддержка» в стеклянной капсуле и крестик в стеклянном круге, снизу поле
   капсулой; переписка уходит под них и растворяется. у стекла светлый ободок по краю, как у iOS. облачка как в «Сообщениях».
   текста минимум, снежинок нет. шрифт Onest: на всех сайтах шрифт один. движение: открытие мягкое без отскока,
   закрытие быстрее, двигаем только transform и opacity */
.sup {
  --sup-gray: #E9E9EB;                       /* облачко собеседника в «Сообщениях» */
  --sup-out: cubic-bezier(.23, 1, .32, 1);
  --sup-sheet: cubic-bezier(.32, .72, 0, 1);  /* кривая шторки iOS */
  --sup-pb: 72px;                             /* высота поля и звёзд снизу, ставит app.js */
  position: fixed; z-index: 35; right: 16px; bottom: 16px;
  width: 400px; height: min(680px, calc(100vh - 224px)); height: min(680px, calc(100dvh - 224px));   /* верх окна ниже карточки «Стать инженером» */
  border-radius: 36px; overflow: hidden;
  background: rgba(252, 252, 251, .9);
  -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 32px 80px rgba(0, 0, 0, .18), 0 8px 24px rgba(0, 0, 0, .07);
  transform-origin: 100% 100%;
  opacity: 0; transform: translateY(12px) scale(.96);
  transition: opacity .16s ease, transform .2s ease-out;
}
.sup.is-open { opacity: 1; transform: none; transition: opacity .2s ease, transform .34s var(--sup-out); }
/* стекло: полупрозрачная заливка, размытие под ним, светлый ободок (ярче сверху слева и снизу справа) */
.sup-glass, .sup-fab, .sup-peek {
  position: relative;
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .07), 0 6px 20px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .05);
}
.sup::after, .sup-glass::before, .sup-fab::before, .sup-peek::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .25) 35%, rgba(255, 255, 255, .06) 62%, rgba(255, 255, 255, .7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}

/* верх: человечек по центру, под ним «Поддержка» стеклянной капсулой, справа крестик */
.sup__top { position: absolute; z-index: 2; top: 0; right: 0; left: 0; display: flex; flex-direction: column; align-items: center; padding-top: 12px; pointer-events: none; }
.sup__top > * { pointer-events: auto; }
.sup-ava {
  flex: none; display: block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(180deg, #CFCBC6, #A8A49F); color: var(--white); box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}
.sup-ava svg { display: block; width: 100%; height: 100%; }
.sup__title { margin-top: -5px; padding: 3px 11px; border-radius: var(--r-pill); font-weight: 600; font-size: 13px; line-height: 18px; color: var(--ink-900); }
.sup__title:focus { outline: none; }
.sup__close {
  position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  color: var(--ink-900); --icon-stroke: 2.2; transition: transform .16s var(--ease), background-color .15s;
}
.sup__close:active { transform: scale(.92); }

/* переписка во всю высоту окна: верх и низ уходят под стекло и растворяются */
.sup__list {
  position: absolute; inset: 0; display: flex; flex-direction: column; padding: 96px 12px var(--sup-pb);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .2) 36px, #000 92px);
  mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .2) 36px, #000 92px);
}
.sup__list::-webkit-scrollbar { display: none; }
/* облачка: подряд от одного идут плотно, у соседних углы со стороны соседа острее, у последнего острый нижний (хвостик) */
.sup-msg {
  position: relative; flex: none; max-width: 78%; margin-top: 8px; padding: 8px 13px;
  border-radius: 19px; font-weight: 400; font-size: 16px; line-height: 21px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.sup-msg.is-next { margin-top: 2px; }
.sup-msg--me { align-self: flex-end; background: var(--ice-500); color: var(--ink-900); transform-origin: 100% 100%; }
.sup-msg--op { align-self: flex-start; background: var(--sup-gray); color: #000000; transform-origin: 0 100%; }
.sup-msg--me.is-next { border-top-right-radius: 6px; }
.sup-msg--op.is-next { border-top-left-radius: 6px; }
.sup-msg--me.is-tail { border-bottom-right-radius: 6px; }
.sup-msg--op.is-tail { border-bottom-left-radius: 6px; }
.sup-msg.is-pending { opacity: .5; }
.sup-msg.is-new, .sup-sys.is-new, .sup-login.is-new { animation: sup-in .26s var(--sup-out) both; }
@keyframes sup-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.sup-name { align-self: flex-start; margin: 10px 0 -4px 13px; color: var(--ink-400); font-weight: 400; font-size: 12px; line-height: 16px; }
.sup-when { align-self: center; margin: 14px 0 2px; color: var(--ink-400); font-weight: 500; font-size: 12px; line-height: 16px; }
.sup-sys { align-self: center; max-width: 86%; margin: 12px 0 2px; color: var(--ink-400); font-weight: 400; font-size: 12px; line-height: 16px; text-align: center; }
.sup-state { align-self: flex-end; margin: 3px 4px 0; color: var(--ink-400); font-weight: 400; font-size: 12px; line-height: 15px; }
.sup-hint { margin: auto 0; padding: 0 24px; color: var(--ink-400); font-weight: 400; font-size: 15px; line-height: 20px; text-align: center; }
.sup-skel { flex: none; height: 38px; margin-top: 10px; border-radius: 19px; }
.sup-skel--op { align-self: flex-start; width: 62%; }
.sup-skel--me { align-self: flex-end; width: 44%; }
.sup-note { margin: auto 0; padding: 0 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--ink-600); font-weight: 400; font-size: 15px; line-height: 20px; text-align: center; }
/* написал до входа: под облачком одна строка и кнопка «Войти по номеру» */
.sup-login { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-top: 4px; }
.sup-login__t { margin-right: 4px; color: var(--ink-400); font-weight: 400; font-size: 12px; line-height: 15px; }
.sup-pill {
  height: 36px; padding: 0 16px; border-radius: 18px; background: var(--ice-500); color: var(--ink-900);
  font-weight: 500; font-size: 15px; line-height: 20px; transition: background-color .15s, transform .16s var(--ease);
}
.sup-pill:active { transform: scale(.97); }

/* низ: звёзды, подсказки и поле парят над перепиской */
.sup__bottom { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; pointer-events: none; }
.sup__bottom > * { pointer-events: auto; }
.sup-tips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 4px 0; }
.sup-chip {
  flex: none; height: 34px; padding: 0 14px; border-radius: 17px; color: var(--ink-900);
  font-weight: 400; font-size: 14px; line-height: 20px; white-space: nowrap; transition: transform .16s var(--ease);
}
.sup-chip:active { transform: scale(.97); }
/* «Оцените помощь» и пять звёзд одной стеклянной капсулой над полем */
.sup-rate {
  align-self: center; display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 18px; border-radius: 26px;
  animation: sup-rise .36s var(--sup-out) both;
}
@keyframes sup-rise { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.sup-rate__t { position: relative; z-index: 2; font-weight: 600; font-size: 15px; line-height: 20px; white-space: nowrap; }
.sup-rate__stars { position: relative; z-index: 2; gap: 0; margin: 0; }
.sup-rate__stars .rate__star { width: 38px; height: 38px; border-radius: 50%; }
.sup-rate__stars .rate__star svg { width: 26px; height: 26px; --icon-stroke: 1.5; }
.sup-rate.is-thanks .sup-rate__stars { pointer-events: none; }
/* поле как в «Сообщениях» последних айфонов: стеклянная капсула, стрелка появляется, только когда есть текст */
.sup__field { display: flex; align-items: flex-end; min-height: 44px; border-radius: 22px; }
.sup__input {
  position: relative; z-index: 2; flex: 1; min-width: 0; min-height: 44px; max-height: 132px; padding: 11px 8px 11px 18px;
  border: 0; outline: 0; background: none; resize: none; font: 400 16px/22px var(--font); color: var(--ink-900);
}
.sup__input::placeholder { color: var(--ink-400); opacity: 1; }
.sup__send {
  position: relative; z-index: 2; flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: 6px; border-radius: 50%;
  background: var(--ice-500); color: var(--ink-900); --icon-stroke: 2.6;
  transition: opacity .16s ease, transform .22s cubic-bezier(.23, 1, .32, 1);
}
.sup__send:disabled { opacity: 0; transform: scale(.6); pointer-events: none; }
.sup__send:not(:disabled):active { transform: scale(.9); }

/* кнопка «Поддержка» справа внизу: только пока идёт разговор. стеклянная капсула, число новых ответов на уголке */
.sup-fab {
  position: fixed; z-index: 11; right: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 15px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .75); color: var(--ink-900); font-weight: 500; font-size: 15px; line-height: 20px;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .07), var(--shadow-card);
  transition: opacity .2s ease, transform .24s cubic-bezier(.23, 1, .32, 1), background-color .15s;
}
@starting-style { .sup-fab { opacity: 0; transform: scale(.9); } }
.sup-fab svg { width: 20px; height: 20px; --icon-stroke: 2; }
.sup-fab:active { transform: scale(.97); }
.sup-badge {
  position: absolute; z-index: 2; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--heat); color: var(--white); font-weight: 600; font-size: 12px; line-height: 20px; text-align: center;
  box-shadow: 0 0 0 2px var(--white);
}
.sup-map { position: relative; }
@media (min-width: 601px) { .sup-map { display: none !important; } }
/* новый ответ при закрытом окне: плашка как уведомление айфона, над кнопкой */
.sup-peek {
  position: fixed; z-index: 36; right: 16px; bottom: 76px; width: 340px;
  display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 26px; text-align: left;
  background: rgba(255, 255, 255, .75); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 16px 40px rgba(0, 0, 0, .14);
  opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .16s ease, transform .2s ease-out;
}
.sup-peek.is-on { opacity: 1; transform: none; transition: opacity .22s ease, transform .36s cubic-bezier(.23, 1, .32, 1); }
.sup-ava--peek { width: 38px; height: 38px; }
.sup-peek__main { position: relative; z-index: 2; flex: 1; min-width: 0; }
.sup-peek__top { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 19px; }
.sup-peek__top b { font-weight: 600; }
.sup-peek__top span { color: var(--ink-400); font-weight: 400; font-size: 13px; }
.sup-peek__text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--ink-900); font-weight: 400; font-size: 14px; line-height: 19px;
}
/* окно уже 1180: ссылки подвала доходят до правого края, кнопку и плашку поднимаем над подвалом, окно не шире экрана */
@media (min-width: 601px) and (max-width: 1180px) {
  .sup-fab { bottom: 64px; }
  .sup-peek { bottom: 124px; }
  .sup { width: min(400px, calc(100vw - 32px)); }
}

.pick__note { margin-top: 12px; color: var(--ink-600); font-weight: 400; font-size: 14px; line-height: 18px; }

/* плитки «Что случилось?», пока боты не встали на карту: переливается вся плитка, иконку и текст не видно,
   нажать нельзя. потом иконка и текст плавно проявляются */
.tile > * { transition: opacity .3s; }
.tiles.is-loading .tile { pointer-events: none; box-shadow: none; }
.tiles.is-loading .tile > * { opacity: 0; }
/* время ближайшего инженера: пока считаем, вместо текста полоска заглушки */
.hint.is-loading { color: transparent; }
.hint.is-loading .hint__dot { visibility: hidden; }
.hint.is-loading::before { content: ""; position: absolute; left: 0; top: 1px; width: 236px; height: 14px; border-radius: 7px; }
.seg__sub.is-loading { position: relative; color: transparent; }
.seg__sub.is-loading::before { content: ""; position: absolute; left: 0; top: 2px; width: 200px; height: 12px; border-radius: 6px; }

/* заглушки загрузки, как у Яндекс Go: серая плашка, по которой слева направо бежит светлый блик */
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.become__photo.is-loading, .weather.is-loading::before, .pin__plate.is-loading::before,
.tiles.is-loading .tile, .hint.is-loading::before, .seg__sub.is-loading::before, .orders__skel.is-loading,
.shot.is-loading, .sup-skel.is-loading {
  background: linear-gradient(90deg, var(--skeleton) 40%, var(--skeleton-glow) 50%, var(--skeleton) 60%) var(--skeleton);
  background-size: 300% 100%;
  animation: shimmer 1.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .become__photo.is-loading, .weather.is-loading::before, .pin__plate.is-loading::before,
  .tiles.is-loading .tile, .hint.is-loading::before, .seg__sub.is-loading::before, .orders__skel.is-loading,
  .shot.is-loading, .sup-skel.is-loading, .map-err::before { animation: none; }
  html .sup, html .sup.is-open, .sup-peek, .sup-peek.is-on, .sup-fab { transform: none; transition: opacity .2s ease; }
  html .sup { opacity: 0; }
  html .sup.is-open { opacity: 1; }
  .sup-msg.is-new, .sup-sys.is-new, .sup-login.is-new, .sup-rate { animation: none; }
  .faq__q::after { transition: none; }
  /* поиск без движения: один бледный круг и стоящий отрезок полоски, точки не мигают */
  .pin__radar::before { animation: none; opacity: .2; transform: scale(.55); }
  .pin__radar::after { display: none; }
  .track__bar span { animation: none; left: 33%; }
  .track__wait::before, .track__step.is-now .track__mark::before, .track-pill.is-waiting::before { animation: none; }
}

/* меню телефона, на десктопе его не показываем */
.menu { display: none; }

/* hover только для мыши, на тачскрине он залипает после касания */
@media (hover: hover) {
  .nav__link:hover { color: var(--ice-700); }
  .login:hover { background: var(--fill); }
  .dropdown__link:hover { background: var(--fill); }
  .photo:hover { color: var(--ink-900); }
  .tile:not(:has(:checked)):hover, .chip:not(:has(:checked)):hover { background: var(--fill-hover); }
  .seg__opt:hover { color: var(--ink-900); }
  .cta:not(:disabled):hover { background: var(--ice-600); }
  .cta--quiet:not(:disabled):hover { background: var(--fill-hover); }
  .pick__opt:not(:has(:checked)):not(:has(:disabled)):hover { background: var(--fill-hover); }
  .step__back:hover { background: var(--fill-hover); }
  .step__switch:not(:disabled):hover { background: var(--fill); }
  .become:hover .become__chev { transform: translateX(3px); }
  /* как у Яндекс Go: при наведении фото уезжает на 8 вправо, его край прячет скругление карточки */
  .become:hover .become__photo img { transform: translateX(8px); }
  .zoom__btn:hover, .locate:hover { background: var(--fill); }
  .footer__links a:hover { color: var(--ink-900); }
  /* строки «Помощи» и заказов: при наведении шеврон чуть уезжает вправо, как у «Стать инженером» */
  a.help__row:hover .help__chev, .orders__row.is-active:hover .help__chev { transform: translateX(3px); }
  .help__chev { transition: transform .2s var(--ease); }
  .faq__q:hover, a.help__row:hover .help__name, .orders__row.is-active:hover .orders__what { color: var(--ice-700); }
  .profile__delete:hover { background: var(--fill); color: var(--ink-900); }
  .consent__box:not(:checked):hover { border-color: var(--ink-600); }
  .shot--add:hover, .track__retry:hover { background: var(--fill-hover); }
  .contact__link:hover, .off__link:hover { color: var(--ink-900); }
  .rate__star:not(.is-on):hover { color: var(--ink-600); }
  .rate__tag[aria-pressed="false"]:hover { background: var(--fill-hover); }
  .sup__send:not(:disabled):hover, .sup-pill:hover { background: var(--ice-600); }
  .sup-fab:hover, .sup-chip:hover, .sup__close:hover, .sup-peek:hover { background: rgba(255, 255, 255, .92); }
}

/* низкое окно, меньше 800: ноутбук 1366 на 768 с панелями браузера даёт примерно 657.
   заголовок прячем (экранный диктор его всё равно читает), «Добавить фото» становится кнопкой с камерой
   справа от адреса, плитки 76. колонка 104 + 68 + 8 + 222 + 8 + 102 + 8 + 114, примерно 634, влезает целиком */
@media (min-width: 601px) and (max-height: 799px) {
  .block--order { padding: 8px 8px 8px 16px; }
  .block--order .title {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .address { flex-direction: row; align-items: center; gap: 8px; margin-top: 0; }
  .field { flex: 1; }
  .photo { flex: none; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-12); background: var(--fill); }
  .photo::before { display: none; }
  .photo__icon { color: var(--ink-600); }
  .photo__text {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .tile { height: 76px; padding: 8px 10px; }
  .seg { height: 40px; }
  /* миниатюрам рядом с адресом места нет: кнопка остаётся квадратной с числом фото, сами фото видны в «Проверьте заказ» */
  .address.has-shots .photo { display: flex; }
  .address.has-shots .shots--form { display: none; }
  .address.has-shots .photo__count { display: block; }
  /* «Проверьте заказ» плотнее, чтобы кнопка влезла в окно 1366 на 657 без прокрутки */
  .review__row { min-height: 44px; padding: 4px 0; }
}
@media (min-width: 601px) and (max-height: 799px) and (hover: hover) {
  .photo:hover { background: var(--fill-hover); }
}

/* промежуточные ширины, в спеке их нет: следим, чтобы ничего ни на что не наезжало */
/* плашка погоды (178 px) влезает между колонкой и карточкой с зазором 24 при ширине от 1154, в окне поуже прячем */
@media (min-width: 601px) and (max-width: 959px) { .weather { display: none; } }
/* меню (468 px по центру) упирается в логотип, когда ширина меньше 1040 */
@media (min-width: 988px) and (max-width: 1039px) { .nav__list { gap: 24px; } }
/* когда окно уже 1100, карточка «Стать инженером» съедает карту, а ссылки подвала переносятся, так что прячем их. копирайт OSM остаётся */
@media (min-width: 601px) and (max-width: 1023px) { .become, .footer__links { display: none; } }
/* от 601 до 987, это планшет, макета для него в спеке нет: карте остаётся примерно 300 px. кнопки карты
   убираем, зумят жестами и колёсиком. плашку метки тоже: справа от метки ей нужно 228 px, и она уезжает за край экрана */
@media (min-width: 601px) and (max-width: 987px) { .map-ctrl, .pin__plate { display: none; } }
/* без карточки «Стать инженером» статус заказа встаёт по центру карты справа от колонки */
@media (min-width: 601px) and (max-width: 1023px) { .track-pill, .map-err { left: calc(50% + 196px); } }

/* меню на весь экран: телефон и узкие окна, где меню не лезет в шапку */
@media (max-width: 987px) {
  .nav { display: none; }
  .topbar__end { gap: 8px; }
  .menu-toggle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-12); background: var(--fill); }
  .menu-toggle svg { width: 24px; height: 24px; }
  .menu-toggle__close, .menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }

  .menu:not([hidden]) {
    position: fixed; inset: 0; z-index: 20;
    display: flex; flex-direction: column;
    padding: 104px 16px 16px;                    /* под шапкой 16 + 72 + 16 */
    background: var(--white);
    overflow-y: auto;
  }
  .menu__list, .menu__bottom { width: 100%; max-width: 360px; }
  /* строки ровно по 72: разделитель лежит поверх верхнего пикселя строки, а не добавляет его */
  .menu__item { position: relative; }
  .menu__item + .menu__item::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: var(--line); pointer-events: none;
  }
  .menu__link { display: flex; align-items: center; gap: 12px; height: 72px; border-radius: 12px; }
  .menu__text { flex: 1; min-width: 0; }
  .menu__title { display: block; font-weight: 500; font-size: 18px; line-height: 24px; }
  .menu__sub { display: block; margin-top: 2px; color: var(--ink-600); font-weight: 400; font-size: 14px; line-height: 18px; }
  .menu__chip {
    display: flex; align-items: center; height: 28px; padding: 0 10px;
    border-radius: var(--r-12); background: var(--fill);
    font-weight: 500; font-size: 12px; line-height: 16px; white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .menu__chev { width: 20px; height: 20px; color: var(--ink-400); }
  .menu__bottom { margin-top: auto; padding-top: 24px; }
  /* ссылки доверия и политика по 152-ФЗ: с телефона их больше никак не открыть. строки 20 через 8,
     чтобы был плотный блок, а не два этажа по 44. цель касания 44 добираем невидимым ::after, как у чипов */
  .menu__links {
    display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 16px;
    color: var(--ink-600); font-weight: 400; font-size: 14px; line-height: 20px;
  }
  .menu__links a { position: relative; display: block; border-radius: 4px; }
  .menu__links a::after { content: ""; position: absolute; inset: -12px 0; }
  .menu__login {
    display: flex; align-items: center; justify-content: center;
    height: 56px; border-radius: var(--r-16); background: var(--ice-500);
    font-weight: 500; font-size: 17px; line-height: 22px;
  }
  .menu__note { margin-top: 10px; text-align: center; color: var(--ink-600); font-weight: 400; font-size: 13px; line-height: 16px; }
}

/* телефон, делаем как мобильный Яндекс Go. шапки нет, слева сверху одна плашка «меню + логотип».
   шторка серая (--fill), в ней стопка белых секций: адрес и фото строками по 56 с разделителем, как «Откуда / Куда»,
   услуги лентой плиток 96 на 84, «Когда» двумя строками с галочкой, кнопка в нижней белой секции.
   заголовка, погоды и «таблеток» здесь нет */
@media (max-width: 600px) {
  /* плашка «меню + логотип»: кнопка меню слева через row-reverse, а «Войти» переехало в меню */
  .topbar {
    top: 12px; left: 12px; right: auto; height: 48px;
    flex-direction: row-reverse; justify-content: flex-end; gap: 0;
    padding: 0 16px 0 4px; border-radius: 24px;
    box-shadow: var(--shadow-card);
  }
  .brand { gap: 6px; min-height: 44px; }
  .brand__mark { width: 20px; height: 20px; }
  .brand__word { font-size: 17px; line-height: 20px; letter-spacing: -0.01em; }
  .login { display: none; }
  .topbar__end { gap: 0; }
  .menu-toggle { width: 40px; height: 40px; border-radius: 50%; background: none; }
  .menu-toggle svg { width: 22px; height: 22px; --icon-stroke: 1.91; }

  .weather { display: none; }
  .zone__title { font-size: 22px; line-height: 26px; }
  .toast { bottom: calc(var(--sheet-h, 436px) + 12px); }
  .become, .fade, .footer__links, .footer__copy { display: none; }
  /* на телефоне из кнопок карты только «где я»: справа над шторкой и над подписью карты (её строка на 8..24
     над шторкой), чтобы плашка «Нет доступа к геопозиции» её не закрывала. высоту шторки app.js пишет в --sheet-h */
  .map-ctrl { top: auto; bottom: calc(var(--sheet-h, 436px) + 32px); transform: none; }
  .map-ctrl .zoom { display: none; }

  /* подпись карты над шторкой, высоту шторки app.js пишет в --sheet-h */
  .footer { left: 12px; right: auto; bottom: calc(var(--sheet-h, 436px) + 8px); }
  .footer__credit {
    display: block;
    color: var(--ink-400); font-weight: 400; font-size: 11px; line-height: 14px;
    text-shadow: 0 0 2px var(--white), 0 0 2px var(--white), 0 0 2px var(--white);
  }
  .footer__credit a { position: relative; }
  .footer__credit a::after { content: ""; position: absolute; inset: -15px 0; }   /* цель касания 44 */

  /* шторка: серый фон, белые секции через 8 */
  .order {
    top: auto; left: 0; right: 0; bottom: 0; width: auto;
    max-height: calc(100% - 72px);
    padding: 0 0 env(safe-area-inset-bottom);
    background: var(--fill);
    border-radius: 24px 24px 0 0;
    box-shadow: var(--shadow-sheet);
    pointer-events: auto;
  }
  /* ручка 36 на 4 на белом, сливается с первой секцией. тап или свайп вниз сворачивает шторку до «адрес + кнопка» */
  .sheet-handle {
    display: flex; justify-content: center;
    width: 100%; height: 20px; padding-top: 8px;
    background: var(--white); border-radius: 24px 24px 0 0;
    touch-action: none; cursor: grab;
  }
  .sheet-handle::before { content: ""; width: 36px; height: 4px; border-radius: 2px; background: var(--handle); }
  .sheet-handle:focus-visible { outline-offset: -2px; }
  .order--collapsed .block--services, .order--collapsed .block--when,
  .order--collapsed .step__back, .order--collapsed .step__title { display: none; }
  .order__form { gap: 8px; }
  .block { padding: 0 16px; border-radius: 0; background: var(--white); box-shadow: none; }
  .block--order .title {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }

  /* адрес и фото строками по 56 */
  .address { margin-top: 0; }
  .field__input { height: 56px; }
  .photo { height: 56px; }

  /* услуги лентой плиток 96 на 84, лента уходит под край экрана */
  .block--services { padding: 12px 0; }
  .section-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .tiles {
    display: flex; gap: 8px;
    margin: -4px 0; padding: 4px 16px;             /* 4 px оставляем под обводку фокуса */
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    scrollbar-width: none;
  }
  .tiles::-webkit-scrollbar { display: none; }
  .tile { flex: none; width: 96px; height: 84px; padding: 10px; scroll-snap-align: start; }
  .tile__icon { width: 24px; height: 24px; --icon-stroke: 1.75; }
  .tile__name { font-size: 14px; line-height: 18px; }
  .tile__price { font-size: 12px; line-height: 16px; }

  /* блок «Когда» двумя строками с галочкой вместо переключателя-таблетки */
  .seg { display: block; height: auto; padding: 0; border-radius: 0; background: none; }
  .seg__runner { display: none; }
  .seg__opt {
    justify-content: flex-start; gap: 12px;
    min-height: 60px; padding: 10px 0; border-radius: 0;
    color: var(--ink-900); font-weight: 400; font-size: 16px; line-height: 20px; white-space: normal;
  }
  .seg__opt + .seg__opt::before { content: ""; position: absolute; top: 0; left: 32px; right: 0; height: 1px; background: var(--line); }
  .seg__icon { width: 20px; height: 20px; color: var(--ink-400); --icon-stroke: 2.1; }
  .seg__opt:has(:checked) .seg__icon { color: var(--ice-700); }
  .seg__text { display: flex; flex-direction: column; min-width: 0; }
  .seg__sub { display: block; margin-top: 2px; color: var(--ink-600); font-size: 13px; line-height: 16px; }
  .seg__check { display: block; margin-left: auto; width: 22px; height: 22px; color: var(--ice-700); --icon-stroke: 1.91; opacity: 0; transition: opacity .15s; }
  .seg__opt:has(:checked) .seg__check { opacity: 1; }
  .hint { display: none; }                         /* «ближайший инженер…» тут уходит второй строкой в «Как можно скорее» */
  .chips {
    display: flex; gap: 8px;
    margin: 0 -16px; padding: 4px 16px 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    scrollbar-width: none;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; flex-direction: row; gap: .27em; padding: 0 14px; font-size: 14px; line-height: 18px; scroll-snap-align: start; }
  .chip__time { font-weight: 500; color: inherit; }
  .chip::after { content: ""; position: absolute; inset: -2px 0; }       /* цель касания 44 */

  /* кнопка в нижней белой секции */
  .block--cta { padding: 12px 16px; }
  .cta { height: 56px; font-size: 17px; line-height: 22px; }
  .cta-note { display: none; }

  /* шаг «Телефон для связи» в шторке */
  .step { padding: 0 16px 16px; }
  .step__title { margin-top: 12px; }
  .step__form { margin-top: 12px; }

  /* заказ в шторке: те же белые секции через 8, статус под ручкой, кнопка в нижней секции.
     свёрнутая шторка оставляет только статус и карточку инженера */
  .track__main { padding: 4px 16px 16px; }
  .track__order { padding: 0 16px; }
  .track__row { height: 56px; }
  .track__actions { padding: 12px 16px; }
  .order--collapsed .track__order, .order--collapsed .track__actions, .order--collapsed .track__steps { display: none; }
  .track-pill { top: 72px; left: 50%; }
  /* во время заказа карте нужно место под метку и инженера: шторка не выше 64 % экрана, остальное листается.
     только пока видно сам заказ: профиль и вход поверх заказа открываются в обычную высоту */
  body.is-tracking .order:has(> #track:not([hidden])) { max-height: min(calc(100% - 72px), 64%); }
  /* кнопки заказа («Отменить заказ», вопрос с «Да, отменить») всегда видны внизу шторки, остальное листается под ними.
     место под полоской «домой» у iPhone внутри белого блока, а не под ним, иначе в этой щели было бы видно то, что листается */
  .track__actions {
    position: sticky; bottom: 0; z-index: 1;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -1px 0 var(--line);      /* когда под кнопками листаются шаги, видно, где кончается список */
  }
  .order:not(.order--collapsed):has(> #track:not([hidden]) > .track__actions:not([hidden])) { padding-bottom: 0; }
  .track__step { min-height: 32px; }
  .track__step + .track__step::before { top: -6px; height: 12px; }

  /* маркеры на телефоне поменьше: круг 30, снежинка 20 */
  .engineer, .engineer__body { width: 30px; height: 30px; }
  .engineer__icon { width: 20px; height: 20px; }
  .pin__plate { left: 52px; top: 6px; height: 32px; padding: 0 12px; font-size: 13px; line-height: 16px; }

  /* меню: белый экран под плашкой, сверху 12 + 48 + 12 */
  .menu:not([hidden]) { padding: 72px 12px calc(16px + env(safe-area-inset-bottom)); }
  .menu__list, .menu__bottom { max-width: none; }
  .menu__link { padding: 0 8px 0 16px; }
  .menu__links { padding: 0 16px; }

  /* «Помощь» и «Мои заказы» в шторке: как шаг входа, белые секции во всю ширину через 8.
     свёрнутая шторка оставляет только заголовок */
  .help__head { padding: 0 16px 4px; }
  .help__head .step__title { margin-top: 12px; }
  .help__list, .orders__body { padding: 0 16px; }
  .help__topic { padding: 12px 16px 16px; }
  .help > .block:not(.help__head), .orders > .block:not(.help__head) { border-radius: 0; }
  .help__row { min-height: 68px; }
  .orders__body { padding-bottom: 8px; }
  .order--collapsed .help > :not(.help__head), .order--collapsed .orders > :not(.help__head) { display: none; }
  .order--collapsed .help__head .step__back { display: none; }

  /* фото строкой той же высоты, что адрес */
  .shots--form { height: 56px; }
  /* поддержка во весь экран, выезжает снизу, как шторка айфона. высоту и верх под клавиатуру ставит app.js */
  .sup {
    top: 0; right: 0; bottom: auto; left: 0; width: 100%; height: 100vh; height: 100dvh; border-radius: 0;
    background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
    opacity: 1; transform: translateY(100%); transition: transform .24s var(--sup-sheet);
  }
  .sup.is-open { transform: none; transition: transform .42s var(--sup-sheet); }
  .sup::after { display: none; }
  .sup__top { padding-top: calc(10px + env(safe-area-inset-top)); }
  .sup__close { top: calc(12px + env(safe-area-inset-top)); }
  .sup__list { padding-top: calc(94px + env(safe-area-inset-top)); }
  .sup__bottom { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .sup-msg { max-width: 82%; }
  .sup-fab { display: none !important; }
  .sup-peek { top: calc(8px + env(safe-area-inset-top)); right: 8px; bottom: auto; left: 8px; width: auto; transform: translateY(-12px) scale(.98); }
  /* заказ выполнен или отменён: карта уже не главное, шторка в обычную высоту, чтобы влезли итог и оценка */
  body.is-tracking.track-fin .order:has(> #track:not([hidden])) { max-height: calc(100% - 72px); }
  .track__actions.is-contact-only { padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
  .map-err { top: 72px; left: 50%; }
  body.is-tracking .map-err { top: 120px; }
  /* чат и итог заказа занимают шторку почти целиком, статус сверху лёг бы на их заголовок (а итог он и так повторяет) */
  body.is-chat .track-pill, body.is-chat .map-err, body.track-fin .track-pill { display: none; }
  /* шторка почти во весь экран, над ней меньше 92 (класс sheet-tall ставит app.js): от карты остаётся полоска под шапкой.
     «где я», плашка у метки и статус туда не влезают, их прячем. подпись карты двумя строками справа от шапки */
  body.sheet-tall .map-ctrl, body.sheet-tall .pin__plate, body.sheet-tall .track-pill, body.sheet-tall .map-err { display: none; }
  body.sheet-tall .footer { top: 12px; right: 16px; bottom: auto; left: auto; display: flex; align-items: center; height: 48px; }
  body.sheet-tall .footer__credit { display: flex; flex-direction: column; align-items: flex-end; }
  body.sheet-tall .footer__credit a::after { inset: -2px 0; }
}

/* узкий телефон, от 320 до 359: «Квартира или офис» в узкое поле не влезает, подпись короче */
@media (max-width: 359px) {
  .brand__word { font-size: 16px; }
  .tile { width: 92px; }
  .extra__full { display: none; }
  .extra__short { display: inline; }
}

/* низкий телефон, например 390 на 664 в Safari с панелью или 360 на 720 в Chrome: карте нужно место */
@media (max-width: 600px) and (max-height: 760px) {
  .field__input, .photo, .shots--form { height: 52px; }
  .tile { height: 76px; padding-top: 8px; padding-bottom: 8px; }
  .seg__opt { min-height: 52px; padding: 6px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
}