/*
  стили главной ХОЛОД’ОК. все размеры в 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); }

/* второй блок: услуги, плитки 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;
}

/* выбранное и фокус у плиток, сегментов и чипов */
.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; }
/* согласие на обработку персональных данных под кнопкой: по 152-ФЗ его надо показать до отправки телефона */
.step__legal { margin-top: 10px; padding: 0 8px; text-align: center; color: var(--ink-400); font-weight: 400; font-size: 12px; line-height: 16px; }
.step__legal a { color: var(--ink-600); text-decoration: underline; text-underline-offset: 2px; }
/* второй экран входа: код, звонок и профиль */
.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); }
.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); }
/* вне зоны плашку у метки и погоду не показываем, плитки и время ближайшего остаются заглушками, кнопка серая */
body.is-out .weather, body.is-out .engineer, 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: 24px;
  color: var(--ink-600); font-weight: 400; font-size: 13px; line-height: 16px; white-space: nowrap;
}
/* fit-content, чтобы рамка была ровно по тексту: по ней app.js прячет маркеры, которые задевают подвал */
.footer__copy { width: fit-content; margin-top: 6px; color: var(--ink-400); font-weight: 400; font-size: 12px; 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 { opacity: 0; }
.engineer.is-new, .engineer.is-gone, .engineer.is-hidden { pointer-events: none; }
body.bots-far .engineer { display: none; }
/* инженер на заказе: белый кружок и голубая снежинка */
.engineer.is-busy .engineer__body { background: var(--white); color: var(--ice-700); }
/* подсказка над маркером. 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; }

/* плитки «Что случилось?», пока боты не встали на карту: переливается вся плитка, иконку и текст не видно,
   нажать нельзя. потом иконка и текст плавно проявляются */
.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 {
  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 { 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); }
  .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); }
}

/* низкое окно, меньше 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; }
}
@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 (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; }

  /* маркеры на телефоне поменьше: круг 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; }
}

/* узкий телефон, от 320 до 359 */
@media (max-width: 359px) {
  .brand__word { font-size: 16px; }
  .tile { width: 92px; }
}

/* низкий телефон, например 390 на 664 в Safari с панелью или 360 на 720 в Chrome: карте нужно место */
@media (max-width: 600px) and (max-height: 760px) {
  .field__input, .photo { 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; }
}