/* ═══ ETL_LABEL_0906 — единый вид меток ══════════════════════════════════════

   Почему отдельный файл, а не final_overrides.css. Тот, вопреки названию,
   подключается девятым — раньше и страничных <style>, и dark_contrast.css.
   Каждое правило приходилось перебивать специфичностью, и на трёх семействах
   это всё равно не сработало. Этот файл подключается ПОСЛЕДНИМ, после всех
   ссылок и всех страничных стилей, поэтому при равной специфичности выигрывает
   он. Бороться больше не нужно.

   Что было. На одном экране главной жили два разных вида: «АВТО» — розовая
   заливка без рамки, «С 1 сентября 2026» — красная рамка без заливки. По сайту
   таких семейств набралось два десятка, у каждого свой радиус и своя заливка.
   Розовая заливка — фирменный красный на 8 % прозрачности; на белом он читается
   как «выключено», а не как название категории.

   Главное — красный у метки был такой же громкий, как у кнопки. На экране
   маршрутов красным нарисованы и метка, и стрелка, и ссылка, и кнопка заявки.
   Метка, самое неважное на экране, кричала наравне с действием. Поэтому цвет
   она теряет, а красный остаётся тому, что можно нажать.

   ЧТО СЮДА НЕ ВХОДИТ — обходом всех 94 страниц нашлось 24 семейства, но они
   разнородны, и красить их одним было бы ошибкой:

     • номера шагов — «01» без заливки (multi-step-badge, pickup-flow-badge,
       packing-stage-num и другие). Это отдельный компонент порядковой нумерации.
       Между собой они тоже разнобойные — радиусы 8, 12 и 999, где-то плотный
       красный, где-то бледный. Это отдельная задача, здесь не трогаем;
     • svc-kicker — надстрочник секции («РЕШЕНИЯ ДЛЯ ВАШЕГО ГРУЗА»), не метка,
       подложка ему не нужна;
     • svc-pill — раньше был чипом, но hero_facts.css намеренно снял ему фон,
       и сейчас это строка-перечисление с иконкой, а не пилюля. Возвращать ей
       подложку значит спорить с чужим осознанным решением;
     • pdf-chip — оказался не меткой, а КНОПКОЙ фильтра на /pricing: «Все / Авто /
       Море», у выбранной красная заливка. Красный там означает состояние, а не
       украшение, и трогать его нельзя. Проверено по тегу и наличию is-active;
     • multi-rate-chip, nav-badge, rate-pill — вообще не метки: карточка тарифа,
       счётчик уведомлений в кабинете и числовой переключатель.

   Контраст посчитан, а не подобран на глаз: 6,3 в светлой теме и 10,0 в тёмной
   при норме 4,5 для мелкого текста. */

:root {
  --etl-label-bg:     rgba(29, 29, 27, .06);
  --etl-label-ink:    rgba(29, 29, 27, .72);
  --etl-label-icon:   rgba(29, 29, 27, .50);
  --etl-label-radius: 6px;
}
html[data-theme="dark"] {
  --etl-label-bg:   rgba(255, 255, 255, .08);
  --etl-label-ink:  rgba(255, 255, 255, .78);
  --etl-label-icon: rgba(255, 255, 255, .55);
}

html:root body#top :is(
  .task-card__mode,
  .etl-notice__tag,
  .blog-cat-badge,
  .case-tag,
  .svc-rate-badge,
  .pdf-doc__pill,
  .docreg-tag,
  .sitemap-card__meta,
  .about2-tag,
  .why-badge,
  .route-badge,
  .cargo-kicker,
  .mt-eyebrow,
  .map-badge,
  .svc-filter-panel__eyebrow,
  .tfind__mode,
  .trk-kicker,
  .rq-eyebrow,
  .cargo-pill,
  .warehouse-rate-pill
),
html[data-theme="dark"]:root body#top :is(
  .task-card__mode,
  .etl-notice__tag,
  .blog-cat-badge,
  .case-tag,
  .svc-rate-badge,
  .pdf-doc__pill,
  .docreg-tag,
  .sitemap-card__meta,
  .about2-tag,
  .why-badge,
  .route-badge,
  .cargo-kicker,
  .mt-eyebrow,
  .map-badge,
  .svc-filter-panel__eyebrow,
  .tfind__mode,
  .trk-kicker,
  .rq-eyebrow,
  .cargo-pill,
  .warehouse-rate-pill
) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 10px !important;
  border: 0 !important;
  border-radius: var(--etl-label-radius) !important;
  background: var(--etl-label-bg) !important;
  background-image: none !important;
  color: var(--etl-label-ink) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  /* «Ж/Д + КОНТЕЙНЕР» рвался на две строки, и метка превращалась
     в рваный двухстрочный блок. */
  white-space: nowrap !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

html:root body#top :is(
  .task-card__mode, .etl-notice__tag, .blog-cat-badge, .case-tag,
  .svc-rate-badge, .pdf-doc__pill, .docreg-tag, .sitemap-card__meta,
  .about2-tag, .why-badge, .route-badge, .cargo-kicker,
  .mt-eyebrow, .map-badge, .svc-filter-panel__eyebrow, .tfind__mode,
  .trk-kicker, .rq-eyebrow, .cargo-pill, .warehouse-rate-pill
) i {
  color: var(--etl-label-icon) !important;
  font-size: 14px !important;
}


/* Ordered steps use tabular digits without a filled badge. Interactive
   selection belongs to the enclosing tab, not to the decorative number.
   sf__dot remains a status indicator and keeps its own state colours. */

html:root body#top :is(
  .multi-step-badge,
  .multi-case-badge,
  .avia-step-badge,
  .pickup-flow-badge,
  .exp-flow-badge,
  .rail-step-badge,
  .packing-stage-num,
  .prr-stage-num,
  .thanks-step-num
),
html[data-theme="dark"]:root body#top :is(
  .multi-step-badge,
  .multi-case-badge,
  .avia-step-badge,
  .pickup-flow-badge,
  .exp-flow-badge,
  .rail-step-badge,
  .packing-stage-num,
  .prr-stage-num,
  .thanks-step-num
) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-image: none !important;
  color: var(--ui-muted, var(--etl-label-ink)) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}


/* ═══ ETL_TOUCH_0906 — доводка под палец ═════════════════════════════════════

   Найдено измерением на ширинах 320, 360, 390 и 414 px с включённым
   тач-режимом. Горизонтальной прокрутки нет ни на одной — это уже хорошо.
   Осталось три вещи, которые чувствуются пальцем.

   1. ПОЛЯ ВВОДА МЕЛЬЧЕ 16px. На форме контактов поля заданы 14,2 px. Safari
      на iOS при фокусе в поле мельче 16 px увеличивает страницу — и обратно
      не возвращает. Человек начинает заполнять форму и оказывается в
      увеличенном макете, из которого надо выбираться щипком. Это самая
      заметная поломка «ощущения приложения» из всех найденных.
      16 px ставим только на узких экранах: на десктопе размер не при чём.

   2. ЧЕКБОКСЫ 14–22 px. Согласие на обработку данных — обязательная галочка,
      без неё форма не отправится. Попасть в квадратик 14 px пальцем трудно.
      Норма — 44 px (Apple HIG) или 48 (Material). Делаем сам квадрат 24 px,
      а зону нажатия расширяем псевдоэлементом до 44: вид не грубеет, а
      промахнуться становится нельзя.

   3. ФИЛЬТРЫ УСЛУГ высотой 40 px — четырёх не хватало до нормы. */

@media (max-width: 1099px), (pointer: coarse) {
  /* iOS не зумит поле от 16 px и больше */
  html body#top :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
    font-size: 16px !important;
  }

  /* Галочка согласия: квадрат 24 px вместо 14–22.

     Расширять зону нажатия псевдоэлементом НЕ НУЖНО, и я это проверил, а не
     предположил: сама галочка лежит внутри <label>, то есть нажимается вся
     подпись целиком — 318×49 px. Тап по дальнему углу текста переключает её.
     Первая версия этого правила добавляла ::after на 44×44, и он рисовал
     лишнюю светлую рамку над квадратом — починка того, что не сломано.

     Остаётся только размер самого квадрата: 14 px выглядят как опечатка,
     24 — как элемент управления. */
  html body#top :is(input[type="checkbox"], input[type="radio"]) {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    flex: 0 0 auto !important;
  }

  /* Полоса фильтров на страницах услуг.

     Селектор с :root не для красоты. Первая попытка была
     «html body#top :is(.svc-quicknav a, …)» — и не сработала: :is() берёт
     вес САМОГО ТЯЖЁЛОГО аргумента, а не всей цепочки, то есть один класс.
     А конкурент — body#top.services-page .svc-quicknav a — несёт два класса
     и потому выигрывает, несмотря на !important и более позднюю загрузку.
     :root добавляет недостающий класс. Проверено измерением: до правки
     высота оставалась 40 px. */
  html:root body#top .svc-quicknav a,
  html:root body#top .svc-filter-panel a,
  html:root body#top .svc-filter-panel button,
  html:root body#top .p-mobile-subsection > a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ETL_SAFEAREA_0906 — вырезы и «домашняя полоска» iPhone.

   Мобильные стили сайта с самого начала писались под safe-area: в
   mobile_app.css шапка считает padding-top как env(safe-area-inset-top) + 14px,
   нижняя панель — padding-bottom как env(safe-area-inset-bottom). Но env()
   отдаёт нули, пока в <meta name="viewport"> нет viewport-fit=cover, а его не
   было ни на одной странице, кроме двух. То есть весь слой отступов под вырез
   не работал ни разу: в установленном на экран «Домой» приложении шапка
   уезжала под чёлку, а нижняя панель — под полоску жеста.

   Теперь viewport-fit=cover стоит на всех страницах. Ниже — единственное, чего
   не хватало в самих стилях: боковые вырезы в горизонтальной ориентации.
   Вертикальную не трогаем — там боковых отступов нет и быть не должно.
   ────────────────────────────────────────────────────────────────────────── */
@supports (padding: env(safe-area-inset-left)) {
  @media (max-width: 1099px) and (orientation: landscape) {
    html:root body#top {
      padding-left:  env(safe-area-inset-left, 0px);
      padding-right: env(safe-area-inset-right, 0px);
    }
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ETL_TOUCH_0906B — две цели касания, до которых не дошли прошлые правила.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1099px), (pointer: coarse) {

  /* Поле ввода ИИ-помощника. В mobile_touch.css ему уже задавали min-height:44px,
     но сборка островов (etl-islands.css) ставит .etlai .etlai__input
     { min-height:0 !important } — это снимало отступы вместе с высотой, и поле
     оставалось 37 px. Возвращаем высоту здесь: etl_labels.css подключён
     последним, значит при равной важности выигрывает он. Подложка плейсхолдера
     .etlai__ph-host растянута inset:0, так что тянется следом. */
  html:root body#top .etlai .etlai__input {
    min-height: 44px !important;
  }

  /* «Или заполните калькулятор самостоятельно» — самостоятельная ссылка-действие,
     а не ссылка внутри абзаца: 16 px высоты для пальца мало. */
  html:root body#top .home-ai__manual {
    min-height: 44px !important;
    align-items: center !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ETL_TOUCH_TABLET_0906 — то, что пропустила проверка «только на телефоне».

   Матрица из 18 устройств показала: всё, что шире 1099 px и при этом с
   сенсорным экраном — планшет в альбомной ориентации, раскрытый Pixel Fold —
   получало десктопные размеры органов управления. Чекбокс 18 px вместо 24,
   пилюли 37 px вместо 48, кнопка отправки в форме отслеживания 22×22.
   Слой mobile_touch.css сам подключён по условию
   «(max-width:1099px), (pointer:coarse) and (min-width:1100px)» — то есть
   про такие устройства в проекте знали. Мои прошлые правки — нет.
   Блоки выше теперь тоже читаются как «узкий экран ИЛИ палец».
   ────────────────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {

  /* Пилюли-ссылки разделов: на телефоне их уже поднимают до 48 px правилом,
     закрытым в @media (max-width:768px), — туда не лезем, иначе понизим до 44.
     Проблема была только шире 768 px, где то правило не действует. */
  @media (min-width: 769px) {
    html:root body#top .pill {
      min-height: 44px !important;
      display: inline-flex !important;
      align-items: center !important;
    }
  }

  /* Мелкие круглые кнопки в узких полях: отправка номера ЭР в верхней полосе
     (22×22) и лупа плавающего поиска (20×20). Растянуть их нельзя — полоса
     высотой 40 px, кнопка станет выше строки. Поэтому расширяем не саму
     кнопку, а область касания: прозрачная накладка 44×44 по центру.
     ::before, а не ::after — у .etl-notice__link ::after занят стрелкой. */
  html:root body#top :is(.p-track__go, .etl-floating-search__subm, .etl-notice__link) {
    position: relative;
  }
  html:root body#top :is(.p-track__go, .etl-floating-search__subm, .etl-notice__link)::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
    background: transparent;
    border: 0;
    pointer-events: auto;
  }
}

/* Планшет в портрете и раскрытая «книжка»: 769–1099 px.
   В подвале-приложении две главные кнопки — «Отправить заявку» и «Позвонить» —
   рисовались текстом 10,5 px на кнопке шириной под 400 px. Правило с нормальным
   размером закрыто в @media (max-width:768px) и до этой полосы не доходило. */
@media (min-width: 769px) and (max-width: 1099px) {
  html:root body#top footer.mobile-app-footer-ready .m-app-footer__btn {
    font-size: 13px !important;
    min-height: 46px !important;
  }
}