/*
 * RINSE & SHINE — оболочка приложения.
 *
 * Лежит поверх styles.css заглушки и его не трогает.
 *
 * Телефон (≤767px): нижняя панель Home · Services · Book · Area · More, Book —
 * центральная круглая кнопка; цветная брендовая зона сверху, светлая рабочая
 * поверхность под ней — решение 19.09.2026.
 *
 * Широкий экран (≥768px): то же приложение, только панель стоит справа от
 * текста — светлая карточка с полосой вкладок вместо стеклянной панели услуг,
 * и разделы переключаются там же (правка 20.09.2026).
 *
 * Первый раздел — общий: поверхность и её части выглядят одинаково в обеих
 * оболочках, потому что это один и тот же интерфейс.
 */

/* ═══ Общее ═══════════════════════════════════════════════════════════════ */

:root {
  --rs-muted: #6f6a7c;
  --rs-soft: rgba(21, 19, 26, 0.72);
  --rs-line: rgba(53, 35, 105, 0.12);
  --rs-side: 20px;
  --rs-bar-h: 72px;
  --rs-tab-h: 64px;
  --rs-lift: 20px; /* на сколько круг записи поднят над панелью */
  --rs-safe-t: env(safe-area-inset-top, 0px);
  --rs-safe-b: env(safe-area-inset-bottom, 0px);
}

/* Подпись записи белая, кнопка остаётся оранжевой — правка 20.09.2026.
   Кружок со стрелкой не трогаем: он вырезан из белой заливки, и белая стрелка
   на нём исчезла бы. */
.epl-cta--book { --epl-cta-text: #ffffff; }

/* Фраза, которую нельзя рвать посреди: уезжает на следующую строку целиком. */
.keep { white-space: nowrap; }

/* ── Светлая поверхность: общие части ────────────────────────────────────── */

.sheet__head,
.menu__head,
.screen__head,
.contact__head {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rs-muted);
}

.picks {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rs-line);
}

.picks > li { border-bottom: 1px solid var(--rs-line); }

/* Строка списка, а не кнопка: ведёт на экран услуг. Подсветка идёт до краёв
   поверхности, линейки остаются в ширину текста. */
.pick {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  margin: 0 calc(var(--rs-side) * -1);
  padding: 8px var(--rs-side);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  transition: background-color 160ms ease;
}

.pick, .pick * { -webkit-user-select: none; user-select: none; }

.pick:hover,
.pick:focus-visible { background-color: rgba(88, 28, 252, 0.06); }

.pick:focus-visible { outline: 2px solid var(--rs-purple); outline-offset: -2px; }

.pick__name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--rs-display);
  font-size: 18px;
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1.3;
  text-transform: uppercase;
}

.pick__time {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--rs-muted);
}

.pick__go {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--rs-purple);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Строка звонка под списком услуг. Живёт по законам списка, а не кнопки:
   подсветка до краёв поверхности, линейка в ширину текста. Залитой кнопкой её
   делать нельзя — на экране уже есть оранжевая запись, и вторая кнопка спорила
   бы с ней (правка 20.09.2026). */
/* Линейка сверху, а не снизу: строка стоит последней в блоке и отбивается от
   того, что над ней. На экране More её роль играет подпись «Contact». */
.dial--foot { border-top: 1px solid var(--rs-line); }

.dial__link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  margin: 0 calc(var(--rs-side) * -1);
  padding: 8px var(--rs-side);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  transition: background-color 160ms ease;
}

.dial__link, .dial__link * { -webkit-user-select: none; user-select: none; }

.dial__link:hover,
.dial__link:focus-visible { background-color: rgba(88, 28, 252, 0.06); }

.dial__link:focus-visible { outline: 2px solid var(--rs-purple); outline-offset: -2px; }

/* Подписи над номером нет намеренно: трубка в кружке и сам номер узнаются
   без неё, а лишняя строка сталкивала бы города Home за нижний край. */
.dial__num {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--rs-display);
  font-size: 21px;
  font-style: italic;
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--rs-purple);
}

/* Кружок с трубкой — тот же знак «нажимается», что стрелка у строк услуг. */
.dial__glyph {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(88, 28, 252, 0.1);
  color: var(--rs-purple);
  transition: background-color 160ms ease, color 160ms ease;
}

/* Трубка зеркальна по горизонтали: дуга загнута в другую сторону, как на
   образце владелицы (правка 20.09.2026). Поворот на 180° сюда не годится — он
   разворачивает трубку, но оставляет изгиб прежним. */
.dial__glyph svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
  transform: scaleX(-1);
}

.dial__link:hover .dial__glyph,
.dial__link:focus-visible .dial__glyph { background: var(--rs-purple); color: #ffffff; }

.sheet__area,
.towns {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--rs-soft);
}

.sheet__area-lead,
.towns__lead {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--rs-muted);
}

.screen__lede {
  margin: 16px 0 0;
  max-width: 40ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--rs-soft);
}

/* ── Services: панель заглушки на светлой поверхности ────────────────────── */

.screen--services .menu {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.screen--services .menu__list { margin-top: 14px; }

.screen--services .menu__row,
.screen--services .menu__row:first-child { border-color: var(--rs-line); }

.screen--services .menu__row { padding: 18px 0; }
.screen--services .menu__name { font-size: 19px; }
.screen--services .menu__time { color: var(--rs-muted); }
.screen--services .menu__what { font-size: 14px; color: var(--rs-soft); }

.screen--services .menu__extra {
  margin-top: 18px;
  font-size: 13px;
  color: var(--rs-muted);
}

/* ── Area: схема зоны выезда ─────────────────────────────────────────────── */

.zone {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 22px auto 0;
  padding: 16px 12px;
  border-radius: 24px;
  background: #fff;
}

.zone__spokes line {
  stroke: rgba(88, 28, 252, 0.34);
  stroke-width: 1.5;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
}

.zone__towns circle { fill: var(--rs-purple); }

.zone__towns text {
  font-family: var(--rs-font);
  /* Схема ужимается вместе с экраном: на 320px 14px превращаются в 11,2px —
     нижняя граница функционального текста. */
  font-size: 14px;
  font-weight: 600;
  fill: var(--rs-ink);
}

.zone__base circle { fill: var(--rs-orange); }
.zone__base .zone__halo { fill: rgba(253, 110, 2, 0.2); }

.zone__base text {
  font-family: var(--rs-display);
  font-size: 15px;
  font-style: italic;
  font-weight: 800;
  font-stretch: 112%;
  fill: var(--rs-ink);
}

/* ── More: как это работает, контакт ─────────────────────────────────────── */

.steps {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rs-line);
}

.step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 5px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rs-line);
}

.step__no {
  grid-row: 1 / span 2;
  font-family: var(--rs-display);
  font-size: 19px;
  font-style: italic;
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.3;
  color: var(--rs-purple);
}

.step__name {
  font-family: var(--rs-display);
  font-size: 18px;
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1.3;
  text-transform: uppercase;
}

.step__what { font-size: 14px; line-height: 1.45; color: var(--rs-soft); }

.contact { margin-top: 30px; }

.colophon {
  margin: 30px 0 0;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--rs-muted);
}

/* Подпись вкладки одна на обе оболочки: размер задаёт своя. */
.tab__label {
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.screen:focus { outline: none; }

/* Экран Home начинается не с этой секции, а с обложки над ней. Без этого вход
   по адресу #home браузер понимал буквально и прокручивал страницу к светлой
   поверхности, пряча кадр и заголовок. */
.screen--home { scroll-margin-top: 100svh; }

@keyframes rs-screen-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ═══ Телефон: оболочка приложения ════════════════════════════════════════ */

/* Не только узкий экран, но и низкий: телефон лёжа шире 767px, а места по
   высоте у него меньше, чем в портрете. Панель приложения там уместнее
   карточки справа. */
@media (max-width: 767px), (max-height: 430px) {
  :root { color-scheme: light; }

  body { background: var(--rs-paper); color: var(--rs-ink); }

  .hero.app {
    display: block;
    min-height: 100svh;
    padding: 0;
    overflow: visible;
  }

  /* Кадр на весь экран и нижняя строка городов — части широкой раскладки. */
  .hero.app > .hero__media,
  .hero.app > .hero__area { display: none; }

  /* ── Шапка: логотип слева, звонок справа — как в заглушке, но прибита ──── */

  /* Логотип и звонок стоят на той же вертикали, что текст экрана: поле шапки
     — тот же --rs-side. */
  .bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    height: calc(var(--rs-bar-h) + var(--rs-safe-t));
    padding:
      var(--rs-safe-t)
      calc(env(safe-area-inset-right, 0px) + var(--rs-side))
      0
      calc(env(safe-area-inset-left, 0px) + var(--rs-side));
    gap: 14px;
    background-color: var(--rs-purple-deep);
    transition: background-color 200ms ease;
  }

  /* Прозрачной шапка бывает только над кадром и только при живом скрипте:
     без него .is-solid никто не поставит, и белый логотип остался бы на
     светлой поверхности. Умолчание — сплошная плашка. */
  .app[data-ready]:not(.is-solid) .bar { background-color: rgba(36, 19, 95, 0); }

  /* Ширина как в заглушке (178px), но на узком экране логотип и звонок в неё
     не влезают: 46vw опускает его до 150px на 320. */
  .bar__logo img { width: clamp(150px, 46vw, 178px); filter: none; }

  /* Тень логотипа рассчитана на кадр. На сплошной плашке она вылезает из-под
     шапки серым пятном на светлую поверхность. */
  .app[data-ready]:not(.is-solid) .bar__logo img {
    filter: drop-shadow(0 6px 28px rgba(10, 6, 30, 0.45));
  }

  /* ── Экраны ───────────────────────────────────────────────────────────── */

  .hero__body.screens { display: block; width: auto; }

  /* Без скрипта экраны идут лентой, и вкладки работают якорями. Со скриптом
     (data-ready) виден один — активный. */
  .screen { display: block; }

  /* Со скриптом вкладки не прокручивают страницу, поэтому окном для прокрутки
     к фокусу считается полоса между шапкой и панелью: иначе элемент под
     клавиатурой уезжает под панель. Без скрипта этих полей нет — там вкладки
     работают якорями, и верхнее поле секции уже отбивает её от шапки. */
  html:has(.app[data-ready]) {
    scroll-padding-top: calc(var(--rs-bar-h) + var(--rs-safe-t));
    scroll-padding-bottom: calc(var(--rs-tab-h) + var(--rs-lift) + var(--rs-safe-b) + 16px);
  }

  .app[data-ready] .screen { display: none; }

  .app[data-ready] .screen.is-active {
    display: block;
    animation: rs-screen-in 180ms ease-out;
  }

  /* Контент живёт между шапкой и панелью: верхнее поле — под шапку, нижнее —
     под панель с поднятым кругом, чтобы последняя строка не уходила под них. */
  .screen--services,
  .screen--area,
  .screen--more {
    min-height: 100svh;
    padding:
      calc(var(--rs-bar-h) + var(--rs-safe-t) + 28px)
      var(--rs-side)
      calc(var(--rs-tab-h) + var(--rs-lift) + var(--rs-safe-b) + 28px);
  }

  .screen--home {
    padding-bottom: calc(var(--rs-tab-h) + var(--rs-lift) + var(--rs-safe-b) + 24px);
  }

  /* ── Home: обложка ────────────────────────────────────────────────────── */

  /* Обложка — верх экрана Home, а не отдельный экран: на других вкладках её
     нет, и появляется она тем же движением, что и они. */
  .app[data-ready]:not([data-tab="home"]) .cover { display: none; }

  .app[data-ready][data-tab="home"] .cover { animation: rs-screen-in 180ms ease-out; }

  /* Высоту задаёт содержимое, половина экрана — только пол: на низком
     телефоне обложка растёт за текстом, а не режет его. */
  .cover {
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    max-width: none;
    min-height: 50svh;
    padding:
      calc(var(--rs-bar-h) + var(--rs-safe-t) + 16px)
      var(--rs-side)
      58px;
    color: #fff;
    overflow: hidden;
  }

  /* В колонке-флексе плашка статуса растянулась бы на всю ширину; в заглушке
     она по размеру текста. */
  .cover > .badge { align-self: flex-start; }

  /* Кегль заголовка в заглушке растёт от ширины. Лёжа телефон широкий и
     низкий, и заголовок съедал обложку целиком — потолок берётся от высоты
     окна. В портрете 12svh больше 92px, и правило молчит. */
  .cover .hero__title { font-size: min(clamp(44px, 9.4vw, 92px), 12svh); }

  .cover__media { display: block; position: absolute; inset: 0; z-index: -1; }

  .cover__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 46% 62%;
  }

  .cover__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(36, 19, 95, 0.8) 0%, rgba(36, 19, 95, 0.3) 36%, rgba(14, 10, 32, 0.88) 100%),
      linear-gradient(108deg, rgba(88, 28, 252, 0.44) 0%, rgba(88, 28, 252, 0) 66%);
  }

  /* Записывает центральная кнопка панели; вторая оранжевая кнопка на том же
     экране с ней спорит. Честную строку по нажатию повторяет .toast. */
  .cover .hero__actions,
  .cover .hero__note { display: none; }

  /* Телефон лёжа: высоты всего 375px, и отбивка до светлой поверхности
     уводила последнюю строку лида под нижнюю панель. */
  @media (max-height: 430px) and (orientation: landscape) {
    .cover {
      min-height: 0;
      padding-top: calc(var(--rs-bar-h) + var(--rs-safe-t) + 10px);
      padding-bottom: 22px;
    }

    .cover .hero__title { margin-top: 10px; }
    .cover .hero__eyebrow { margin-bottom: 8px; }
    .cover .hero__lede { margin-top: 12px; font-size: 15px; }
  }

  /* ── Home: светлая поверхность ────────────────────────────────────────── */

  /* Просвет над строкой звонка: она закрывает поверхность снизу, а не идёт
     следующим пунктом списка. Своей линейки у строки здесь нет — список услуг
     и так кончается линейкой, и две подряд читались пустым рядом. На широком
     экране линейка остаётся: там строку уносит вниз панели пустое поле. */
  .sheet .dial--foot { margin-top: 20px; border-top: 0; }

  /* Строка городов идёт под номером: крупный номер первым, перечисление —
     вторым (её правка 20.09.2026). */
  .sheet .dial--foot + .sheet__area { margin-top: 12px; }

  .sheet {
    display: block;
    position: relative;
    margin-top: -28px;
    padding: 26px var(--rs-side) 0;
    border-radius: 28px 28px 0 0;
    background: var(--rs-paper);
  }

  /* ── Заголовок экрана ─────────────────────────────────────────────────── */

  /* Тот же голос, что у «We come to you.»: extended italic, две строки,
     перенос задан разметкой, а не подбором браузера. На широком экране его
     работу делает полоса вкладок. */
  .screen__title {
    display: block;
    margin: 0;
    font-family: var(--rs-display);
    font-size: 40px;
    font-style: italic;
    font-weight: 800;
    font-stretch: 118%;
    line-height: 0.92;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    text-wrap: nowrap;
    color: var(--rs-ink);
  }

  /* Имя панели остаётся в разметке ради aria-labelledby; на экране его
     говорит заголовок — он же говорит и за список шагов. */
  .screen--services .menu__head,
  .screen__head { display: none; }
  .screen--services .menu { margin-top: 24px; }
  .screen--services .menu__list { margin-top: 0; }

  .zone { margin-top: 24px; }
  .steps { margin-top: 24px; }
  .colophon { margin-top: 34px; }

  /* ── Честная строка по нажатию ────────────────────────────────────────── */

  .toast {
    display: block;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(var(--rs-tab-h) + var(--rs-lift) + var(--rs-safe-b) + 20px);
    z-index: 40;
    margin: 0;
    padding: 13px 16px;
    border-radius: 16px;
    background: var(--rs-ink);
    color: #ffd3ac;
    font-size: 14px;
    line-height: 1.45;
  }

  /* ── Нижняя панель ────────────────────────────────────────────────────── */

  .tabbar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    height: calc(var(--rs-tab-h) + var(--rs-safe-b));
    padding:
      0
      calc(env(safe-area-inset-right, 0px) + 6px)
      var(--rs-safe-b)
      calc(env(safe-area-inset-left, 0px) + 6px);
    border-top: 1px solid var(--rs-line);
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
  }

  .tab,
  .tab-book {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    min-width: 0;
    height: var(--rs-tab-h);
    margin: 0;
    padding: 8px 0 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--rs-muted);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  .tab, .tab *,
  .tab-book, .tab-book * { -webkit-user-select: none; user-select: none; }

  .tab__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 30px;
    border-radius: 15px;
    transition: background-color 160ms ease;
  }

  .tab__icon svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .tab__icon--dots svg { fill: currentColor; stroke: none; }

  .tab__label { font-size: 11px; }

  /* Наведение и «выбрано» — разные знаки: наведение кладёт подложку под
     значок, выбранная вкладка перекрашивается в фиолетовый. */
  .tab:hover .tab__icon,
  .tab:focus-visible .tab__icon { background-color: rgba(88, 28, 252, 0.1); }

  .tab[aria-current="page"] { color: var(--rs-purple); }

  .tab:focus-visible,
  .tab-book:focus-visible { outline: none; }

  .tab:focus-visible .tab__icon { outline: 2px solid var(--rs-purple); outline-offset: 3px; }

  /* Book — центральная круглая кнопка. Элемент один, поэтому ничего не едет
     (закон кнопок, раздел 4): заливка слева направо, механика типа B. Стрелка
     и её прокрутка по нажатию — те же, что у кнопки записи заглушки. */
  .tab-book {
    --_circle: 58px;
    --_glyph: 24px;
    --_dur: 0.56s;
    --_ease: cubic-bezier(0.4, 0, 0.2, 1);
    /* Зазор между кругом и подписью был 3px — круг стоял к «Book» вплотную.
       Подъёма на 6px не хватило: у круга белое кольцо в 5px (box-shadow), оно
       съедает зазор, и глазом круг по-прежнему лежал на буквах. Считаем по
       кольцу: подъём 11px даёт видимых 9px. Подпись остаётся на одном уровне
       с подписями соседних вкладок — колонка поднимается ровно на те же 11px,
       на которые вырос зазор. */
    --_raise: 11px;

    gap: calc(3px + var(--_raise));
    height: calc(var(--rs-tab-h) + var(--rs-lift) + var(--_raise));
    margin-top: calc((var(--rs-lift) + var(--_raise)) * -1);
    padding-top: 0;
    color: var(--rs-ink);
  }

  /* Стрелка белая, а не тёмная — правка 20.09.2026. */
  /* Цель нажатия — сам круг и подпись, а не прямоугольник вокруг них: пустые
     углы над панелью открывали Square. */
  .tab-book { pointer-events: none; }
  .tab-book__disc,
  .tab-book > .tab__label { pointer-events: auto; }

  .tab-book__disc {
    position: relative;
    isolation: isolate;
    flex: none;
    width: var(--_circle);
    height: var(--_circle);
    min-height: var(--_circle);
    max-height: var(--_circle);
    border-radius: 50%;
    overflow: hidden;
    background: var(--rs-orange);
    color: #ffffff;
    box-shadow: 0 0 0 5px #fff, 0 10px 22px rgba(36, 19, 95, 0.24);
  }

  /* Заливка фиолетовая, а не белая, как у кнопки записи заглушки: там белое
     ложится на тёмный кадр, здесь панель сама белая, и белый круг на ней
     пропадал бы целиком. */
  .tab-book__fill {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: var(--rs-purple);
    color: #fff;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 240ms cubic-bezier(0.77, 0, 0.175, 1);
    pointer-events: none;
  }

  .tab-book:hover .tab-book__fill,
  .tab-book:focus-visible .tab-book__fill { clip-path: inset(0); }

  .tab-book:focus-visible .tab-book__disc { outline: 2px solid var(--rs-purple); outline-offset: 3px; }

  @media (prefers-reduced-motion: reduce) {
    .bar,
    .pick,
    .dial__link,
    .dial__glyph,
    .tab__icon,
    .tab-book__fill { transition: none; }
    .app[data-ready] .screen.is-active,
    .app[data-ready][data-tab="home"] .cover { animation: none; }
  }

  @media (forced-colors: active) {
    .tab-book__fill { display: none; }
  }
}

/* ═══ Широкий экран: то же приложение панелью справа ══════════════════════ */

@media (min-width: 768px) and (min-height: 431px) {
  /* Части, которые есть только на телефоне: кадр внутри обложки (здесь кадр
     на весь экран), заголовок экрана (его работу делает полоса вкладок),
     всплывающая строка (честная строка стоит под кнопкой записи) и круглая
     кнопка записи (она здесь оранжевой кнопкой в тексте). Города под панелью
     повторяли бы нижнюю строку экрана. */
  .cover__media,
  .screen__title,
  .toast,
  .tab-book,
  .tab__icon,
  .sheet__area,
  .towns { display: none; }

  /* ── Рама экрана ──────────────────────────────────────────────────────── */

  /* Поля и просветы уже, чем в заглушке: ряду нужна высота, чтобы панель была
     вторым блоком экрана, а не сноской сбоку (правка 20.09.2026).

     Числа полей заданы ею 20.09.2026: по бокам 64px вместо потолка заглушки в
     72, сверху ровно 30px. Сверху число твёрдое, а не clamp: поле под шапкой
     не должно расти вместе с окном — на высоком экране оно уводило бы кадр
     вниз, а весь запас высоты нужен ритму текста ниже. Низ остаётся
     подвижным: на нём стоит строка городов. */
  /* Звонок выровнен по верху логотипа, а не по его середине (её правка
     20.09.2026). В логотипе две части: начертание имени и мелкая строка
     «mobile car care». По центру всего блока кнопка вставала напротив мелкой
     строки и читалась ниже ряда, в котором человек считывает шапку. По верху
     она стоит в одном ряду с именем. */
  .bar { align-items: flex-start; }

  .hero.app {
    --rs-gutter: 64px;
    padding-block: 30px clamp(28px, 4.4vh, 44px);
    gap: clamp(24px, 4vh, 40px);
  }

  /* ── Вертикальный ритм обложки ────────────────────────────────────────── */

  /* Просветы в левой колонке были посчитаны от телефона и упирались в потолок
     уже на 900px высоты: на MacBook и на 2К блок стоял сбитым в комок
     (её правка 20.09.2026). Здесь у ритма свои числа и свои потолки, поэтому
     на высоком экране он расходится, а не замирает.

     Ритм групповой, а не равномерный: надзаголовок принадлежит заголовку и
     держится к нему ближе всех, кнопка отбита сильнее всего — она конец
     мысли, а не следующая строка текста. */
  /* Под плашкой просвет меньше остальных (её правка 20.09.2026): у плашки
     есть собственное поле внутри контура, и общий ритм здесь читается больше,
     чем он есть. Отсчёт группы начинается от её нижней границы, а не от
     текста. */
  .cover .hero__title { margin-top: clamp(18px, 2.2vh, 26px); }
  .cover .hero__eyebrow { margin-bottom: clamp(16px, 2.4vh, 28px); }
  .cover .hero__lede { margin-top: clamp(24px, 3.6vh, 44px); }
  .cover .hero__actions { margin-top: clamp(34px, 5.6vh, 72px); }

  /* ── Панель приложения ────────────────────────────────────────────────── */

  /* Высота панели постоянная и не зависит от раздела: панель стоит в центре
     ряда, и если бы она росла под содержимое, полоса вкладок ездила бы вверх-
     вниз при каждом переключении — вкладку пришлось бы ловить мышью
     (правка 20.09.2026). Число считается от окна, чтобы первый экран оставался
     равен экрану; что не влезло — прокручивается внутри карточки. */
  .deck {
    --rs-side: 26px; /* внутреннее поле панели */

    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    width: min(520px, 36vw);
    height: clamp(280px, calc(100svh - 300px), 640px);
    border-radius: 32px;
    overflow: hidden;
    background: var(--rs-paper);
    color: var(--rs-ink);
    box-shadow: 0 26px 60px rgba(8, 5, 24, 0.44);
  }

  .deck .screen {
    flex: 1 1 auto;
    min-height: 0;
    padding: 26px var(--rs-side) 30px;
    overflow: hidden auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  /* Раздел длиннее панели прокручивается внутри неё. Полоска у нижнего края
     показывает, что текст продолжается: на неподвижном разделе её не видно —
     под ней тот же цвет. */
  .deck::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    background: linear-gradient(to top, var(--rs-paper) 30%, rgba(246, 243, 255, 0));
    pointer-events: none;
  }

  .app[data-ready] .deck .screen { display: none; }

  .app[data-ready] .deck .screen.is-active {
    display: block;
    animation: rs-screen-in 180ms ease-out;
  }

  /* Без скрипта разделы идут лентой внутри карточки, и вкладки работают
     якорями — карточка растёт под них. */
  .app:not([data-ready]) .deck { height: auto; }
  .app:not([data-ready]) .deck .screen { flex: none; overflow: visible; }

  /* ── Полоса вкладок: шапка панели ─────────────────────────────────────── */

  /* Сегменты равной ширины: это управление разделами, а не список ссылок. */
  .tabbar {
    display: flex;
    flex: none;
    gap: 6px;
    padding: 14px;
    border-bottom: 1px solid var(--rs-line);
    background: #ffffff;
  }

  /* Ширина сегмента растёт от подписи, а не делится поровну: на узкой панели
     «Services» не сжимается под соседей и подписи не сталкиваются. */
  .tab {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 10px;
    border-radius: 14px;
    color: var(--rs-muted);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 160ms ease, color 160ms ease;
  }

  .tab, .tab * { -webkit-user-select: none; user-select: none; }

  .tab__label { font-size: 13px; }

  /* Кнопка записи шире на треть: в прежней ширине подпись и круг стояли
     впритык и кнопка читалась сжатой (правка 20.09.2026). Вся прибавка ушла в
     просвет до круга, поле слева осталось прежним — подпись стоит по левому
     краю, а не посередине пилюли. Кегль, высота и механика заливки не
     меняются: это брендовые параметры кнопки, а не новая кнопка. */
  .hero__actions .epl-cta--book {
    --epl-cta-gap: 76px;
  }

  /* ── Кегли панели ─────────────────────────────────────────────────────── */

  /* Панель шире телефонной, и шкала в ней крупнее на шаг: строка услуги
     читается заголовком, а не подписью. */
  .sheet__head,
  .menu__head,
  .screen__head,
  .contact__head { font-size: 13px; }

  /* Строка списка крупнее телефонной: на широком экране это главный вход в
     услуги, и он должен весить как кнопка, а не как пункт меню. */
  .picks { margin-top: 18px; }
  .pick { min-height: 84px; gap: 14px; }
  .pick__name { font-size: 21px; }
  .pick__time { font-size: 13px; }
  .pick__go { width: 20px; height: 20px; }

  .screen--services .menu__list { margin-top: 16px; }
  .screen--services .menu__row { padding: 20px 0; }
  .screen--services .menu__name { font-size: 21px; }
  .screen--services .menu__what { margin-top: 7px; font-size: 15px; }

  .screen__lede { font-size: 17px; max-width: none; }

  /* Карта тянется до низа панели: поле под ней равно боковым, и белый блок
     вписан в панель, а не висит в её верхней половине (правка 20.09.2026).
     Рисунок внутри остаётся пропорциональным — лишняя высота уходит в поля
     карточки, точки и подписи не растягиваются. */
  .app[data-ready] .deck .screen--area.is-active { display: flex; flex-direction: column; }

  .deck .screen--area { padding-bottom: var(--rs-side); }

  .deck .screen--area .zone { flex: 1 1 auto; min-height: 0; }

  .zone { max-width: none; margin-top: 20px; padding: 16px; }
  .zone__base text { font-size: 16px; }

  .steps { margin-top: 16px; }
  .step { grid-template-columns: 50px minmax(0, 1fr); padding: 20px 0; }
  .step__no { font-size: 20px; }
  .step__name { font-size: 20px; }
  .step__what { font-size: 15px; }

  /* Номер стоит по низу панели: пустое поле над ним — это и есть просвет,
     которого просила владелица (правка 20.09.2026). Поверхность Home тянется
     на всю высоту панели, и строка прижимается к её нижнему краю. */
  .app[data-ready] .deck .screen--home.is-active { display: flex; flex-direction: column; }

  .deck .screen--home .sheet {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  .deck .screen--home .dial--foot { margin-top: auto; padding-top: 18px; }

  /* Под номером не остаётся ничего: строка ложится на нижний край панели.
     Поле низа снимается только у Home — у остальных разделов оно отбивает
     последнюю строку от края. */
  .deck .screen--home { padding-bottom: 0; }

  /* Полоска-подсказка о продолжении текста легла бы прямо на номер и высветлила
     бы его; на Home прокручивать нечего — раздел короче панели. */
  .app[data-tab="home"] .deck::after { display: none; }

  .dial__link { min-height: 84px; gap: 14px; }
  .dial__num { font-size: 25px; }
  .dial__glyph { width: 44px; height: 44px; }
  .dial__glyph svg { width: 22px; height: 22px; }

  .contact { margin-top: 28px; }
  .colophon { margin-top: 26px; font-size: 13px; }

  /* Наведение и «выбрано» — разные знаки: под наведением подложка светлая,
     выбранный раздел залит целиком. */
  .tab:hover,
  .tab:focus-visible { background-color: rgba(88, 28, 252, 0.1); color: var(--rs-purple); }

  .tab[aria-current="page"] { background-color: var(--rs-purple); color: #ffffff; }

  .tab:focus-visible { outline: 2px solid var(--rs-purple); outline-offset: 3px; }

  /* ── Раскладка ────────────────────────────────────────────────────────── */

  /* Панель уходит под текст позже, чем панель услуг заглушки (1180px): узкая
     карточка на 420px живёт в ряду до 1000px, и на ноутбуке 1024×768 экран
     перестаёт прокручиваться — всё встаёт в окно. */
  @media (max-width: 1180px) and (min-width: 900px) {
    .hero__body {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }

    /* Заголовок не переносится по словам, поэтому в ряду он и задаёт, сколько
       остаётся панели. Ниже 1180px он идёт на полшага мельче — иначе панель
       выдавливает за правое поле. */
    .hero__title { font-size: clamp(56px, 7.8vw, 92px); }
  }

  @media (max-width: 899px) {
    .deck {
      width: 100%;
      max-width: 640px;
      height: clamp(280px, calc(100svh - 300px), 440px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pick,
    .dial__link,
    .dial__glyph,
    .tab { transition: none; }
    .app[data-ready] .deck .screen.is-active { animation: none; }
  }
}