/* Водительская PWA — отдельный визуальный слой. Функциональные компоненты и тексты остаются в te5.css/driver.js; здесь только композиция, бренд и две цветовые вариации: light «лёд» и dark «ночной кобальт». */ body.te5-driver-redesign, body.te5-driver-access { --driver-canvas: #edf3fb; --driver-surface: rgba(255, 255, 255, .86); --driver-surface-strong: #ffffff; --driver-accent: #075cff; --driver-accent-2: #2788ff; --driver-accent-glow: rgba(7, 92, 255, .22); --driver-card-border: rgba(31, 66, 120, .14); /* 🛑 Радиус корпуса шапки — ОДНО число на два правила: саму карточку (`.te5-mobile-head`) и фон липкого `#driverHead` под ней. Разъедутся — в скруглениях карточки снова покажется прямоугольный угол фона, тот самый «фантомный угол» (владелец 14.09.2026, TE-407). Держит `test_driver_sticky_nav.py`. */ --driver-head-radius: 22px; --driver-shadow: 0 22px 60px rgba(20, 54, 101, .14); --driver-text: #0b1930; --driver-text-soft: #52647e; --driver-grid: rgba(7, 92, 255, .065); --driver-danger: #d94444; --driver-success: #15865a; --te5-logo-bg: #080d16; --te5-logo-img: url("/icons/bit-glyph.svg"); --te5-logo-ring: inset 0 0 0 1px rgba(255, 255, 255, .10); --te5-bg: var(--driver-canvas); --te5-text: var(--driver-text); --te5-text-2: var(--driver-text-soft); --te5-muted: #7a8aa3; --te5-primary: var(--driver-accent); --te5-primary-hover: #004bd9; --te5-primary-bg: rgba(7, 92, 255, .10); --te5-primary-ln: rgba(7, 92, 255, .28); --te5-card: var(--driver-surface); --te5-border: var(--driver-card-border); --te5-border-2: rgba(31, 66, 120, .09); --te5-row-ln: rgba(31, 66, 120, .10); --te5-row-hover: rgba(7, 92, 255, .06); --te5-hover-bg: rgba(7, 92, 255, .07); --te5-input-ln: rgba(31, 66, 120, .20); --te5-ok: var(--driver-success); --te5-ok-bg: rgba(21, 134, 90, .10); --te5-ok-ln: rgba(21, 134, 90, .24); --te5-warn: #a46900; --te5-warn-bg: rgba(226, 155, 16, .12); --te5-warn-ln: rgba(193, 127, 0, .25); --te5-bad: var(--driver-danger); --te5-bad-bg: rgba(217, 68, 68, .09); --te5-bad-ln: rgba(217, 68, 68, .24); --te5-open: #5c6f8c; --te5-open-bg: rgba(92, 111, 140, .10); --te5-open-ln: rgba(92, 111, 140, .22); /* Статус-чип СВЕТЛОЙ темы — непрозрачная пара «подложка/текст». 🛑 До 31.08.2026 светлая тема сюда ничего не объявляла и падала на fallback `var(--driver-chip-*, var(--te5-*))`, то есть на полупрозрачные `rgba(…, .10)` выше. Половину цвета при этом задаёт поверхность под чипом, а карточка красится литералом #fffefb — и на нём четыре тона из пяти оказались ниже порога 4.5: success 3.994, warning 4.111, danger 3.796, neutral 4.478. Тёмная тема это лечила ещё 04.08.2026 тем же приёмом; светлую тогда просто не измерили — шапка теста прямо называла её «не затронутой», и это было верно про механизм, но не про контраст. Подложки — те же цвета, что видны сейчас (композит rgba на #fffefb), поэтому вид не меняется; текст затемнён минимально, оттенок сохранён. */ --driver-chip-ok-bg: #e8f2eb; --driver-chip-ok-fg: #137951; --driver-chip-warn-bg: #fcf2df; --driver-chip-warn-fg: #9a6200; --driver-chip-bad-bg: #fcedeb; --driver-chip-bad-fg: #cf2a2a; --driver-chip-info-bg: #e6eefb; --driver-chip-info-fg: #075cff; --driver-chip-open-bg: #eff0f0; --driver-chip-open-fg: #5a6d89; } /* 🛑 ЭТОТ БЛОК И СИСТЕМНЫЙ БЛИЗНЕЦ НИЖЕ — МЁРТВАЯ ПАЛИТРА (снята 04.08.2026 при переходе на Primer). Каждое значение здесь перекрыто одноимённым объявлением в конце файла — «закон холста». Читать отсюда цвета НЕЛЬЗЯ: полотно тут #050912, а применяется #1b2027. Почему не удалено, хотя владелец 09.08 сказал «старый не нужен»: за блок держится `test_driver_redesign_defines_two_complete_color_variations` (`tests/app/test_driver_visual_redesign.py:65-74`) — он требует полный набор токенов в ПЕРВОМ вхождении каждой ветки, то есть проверяет мёртвый слой как живой. Уборка — своя задача (снять пять таких ассертов и пин splash), она заведена пунктом каталога; тихо выдернуть строки нельзя, тест покраснеет на верном коде. Действующие значения обеих тёмных веток тождественны и пинятся `test_both_dark_delivery_paths_declare_the_same_palette` (сравнение НАБОРОВ, не списка имён — рукописный перечень и был причиной, по которой расхождение дожило до 09.08). */ :root[data-theme="dark"] body.te5-driver-redesign, :root[data-theme="dark"] body.te5-driver-access { --driver-canvas: #050912; --driver-surface: rgba(13, 22, 38, .86); --driver-surface-strong: #0d1626; --driver-accent: #1265ff; --driver-accent-2: #2e8bff; --driver-accent-glow: rgba(18, 101, 255, .34); --driver-card-border: rgba(142, 178, 232, .16); --driver-shadow: 0 26px 70px rgba(0, 0, 0, .46); --driver-text: #f7f9fd; --driver-text-soft: #9eadc4; --driver-grid: rgba(52, 125, 255, .075); --driver-danger: #ff6f72; --driver-success: #4ed29a; --te5-logo-bg: #080d16; --te5-logo-img: url("/icons/bit-glyph.svg"); --te5-logo-ring: inset 0 0 0 1px rgba(255, 255, 255, .10); --te5-bg: var(--driver-canvas); --te5-text: var(--driver-text); --te5-text-2: var(--driver-text-soft); --te5-muted: #75849b; --te5-primary: var(--driver-accent-2); --te5-primary-hover: #4b9cff; --te5-primary-bg: rgba(18, 101, 255, .15); --te5-primary-ln: rgba(64, 137, 255, .34); --te5-card: var(--driver-surface); --te5-border: var(--driver-card-border); --te5-border-2: rgba(142, 178, 232, .10); --te5-row-ln: rgba(142, 178, 232, .11); --te5-row-hover: rgba(47, 105, 196, .13); --te5-hover-bg: rgba(47, 105, 196, .13); --te5-input-ln: rgba(142, 178, 232, .24); --te5-ok: var(--driver-success); --te5-ok-bg: rgba(36, 174, 116, .12); --te5-ok-ln: rgba(78, 210, 154, .28); --te5-warn: #f0bd51; --te5-warn-bg: rgba(216, 154, 36, .13); --te5-warn-ln: rgba(240, 189, 81, .27); --te5-bad: var(--driver-danger); --te5-bad-bg: rgba(255, 91, 95, .12); --te5-bad-ln: rgba(255, 111, 114, .28); --te5-open: #a9b7cc; --te5-open-bg: rgba(135, 153, 181, .12); --te5-open-ln: rgba(169, 183, 204, .23); /* Статус-чип смены — НЕПРОЗРАЧНАЯ пара «подложка/текст». 🛑 Полупрозрачная подложка не может нести гарантию контраста: вторую половину цвета задаёт поверхность под ней, поэтому чип менял читаемость вместе с палитрой, без единой правки самого чипа. Замер 04.08 в тёмной теме показал провал ТРЁХ тонов из пяти, и хуже всего на карточке: «На базе» 4.20 · «В пути» 2.74 · «Ошибка» 3.32 при пороге 4.5. Здесь пара замкнута сама на себя — от карточки не зависит. Значения подобраны замером: подмес тона 25 % в холст даёт видимую цветную плашку, оттенок состояния сохраняется. У «В пути» и «Ошибки» текст осветлён ТОЛЬКО в чипе (кнопки и ссылки держат свой --te5-primary). Светлая тема этих токенов не объявляет и берёт прежние значения через fallback в правиле ниже. */ --driver-chip-open-bg: #3e4650; --driver-chip-open-fg: #a9b7cc; /* 4.70 */ --driver-chip-info-bg: #203b5d; --driver-chip-info-fg: #62a8ff; /* 4.64 */ --driver-chip-ok-bg: #284c44; --driver-chip-ok-fg: #4ed29a; /* 4.99 */ --driver-chip-warn-bg: #504732; --driver-chip-warn-fg: #f0bd51; /* 5.29 */ --driver-chip-bad-bg: #54343a; --driver-chip-bad-fg: #ff8587; /* 4.64 */ } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.te5-driver-redesign, :root:not([data-theme="light"]) body.te5-driver-access { --driver-canvas: #050912; --driver-surface: rgba(13, 22, 38, .86); --driver-surface-strong: #0d1626; --driver-accent: #1265ff; --driver-accent-2: #2e8bff; --driver-accent-glow: rgba(18, 101, 255, .34); --driver-card-border: rgba(142, 178, 232, .16); --driver-shadow: 0 26px 70px rgba(0, 0, 0, .46); --driver-text: #f7f9fd; --driver-text-soft: #9eadc4; --driver-grid: rgba(52, 125, 255, .075); --driver-danger: #ff6f72; --driver-success: #4ed29a; --te5-logo-bg: #080d16; --te5-logo-img: url("/icons/bit-glyph.svg"); --te5-logo-ring: inset 0 0 0 1px rgba(255, 255, 255, .10); --te5-bg: var(--driver-canvas); --te5-text: var(--driver-text); --te5-text-2: var(--driver-text-soft); --te5-muted: #75849b; --te5-primary: var(--driver-accent-2); --te5-primary-hover: #4b9cff; --te5-primary-bg: rgba(18, 101, 255, .15); --te5-primary-ln: rgba(64, 137, 255, .34); --te5-card: var(--driver-surface); --te5-border: var(--driver-card-border); --te5-border-2: rgba(142, 178, 232, .10); --te5-row-ln: rgba(142, 178, 232, .11); --te5-row-hover: rgba(47, 105, 196, .13); --te5-hover-bg: rgba(47, 105, 196, .13); --te5-input-ln: rgba(142, 178, 232, .24); --te5-ok: var(--driver-success); --te5-ok-bg: rgba(36, 174, 116, .12); --te5-ok-ln: rgba(78, 210, 154, .28); --te5-warn: #f0bd51; --te5-warn-bg: rgba(216, 154, 36, .13); --te5-warn-ln: rgba(240, 189, 81, .27); --te5-bad: var(--driver-danger); --te5-bad-bg: rgba(255, 91, 95, .12); --te5-bad-ln: rgba(255, 111, 114, .28); --te5-open: #a9b7cc; --te5-open-bg: rgba(135, 153, 181, .12); --te5-open-ln: rgba(169, 183, 204, .23); /* Те же непрозрачные пары, что в тумблерной ветке выше. 🛑 Держать синхронно: этот путь ОСНОВНОЙ (атрибут data-theme появляется только после нажатия тумблера), и правка, доехавшая лишь до соседней ветки, уже приводила к регрессии на проде. Синхронность пинит тест. */ --driver-chip-open-bg: #3e4650; --driver-chip-open-fg: #a9b7cc; --driver-chip-info-bg: #203b5d; --driver-chip-info-fg: #62a8ff; --driver-chip-ok-bg: #284c44; --driver-chip-ok-fg: #4ed29a; --driver-chip-warn-bg: #504732; --driver-chip-warn-fg: #f0bd51; --driver-chip-bad-bg: #54343a; --driver-chip-bad-fg: #ff8587; } } /* --te5-bg нужен и на :root/html, не только на body: theme.js читает getComputedStyle(document.documentElement).--te5-bg (theme.js) для meta[theme-color], а te5.css — html{background:var(--te5-bg)} (overscroll). Холст редизайна живёт на body → дублируем его на :root через :has() ТОЛЬКО для driver-страниц, иначе статус-бар/overscroll показывают te5-базовый цвет и splash-унификация #edf3fb откатывается в рантайме. */ :root:has(body.te5-driver-redesign), :root:has(body.te5-driver-access) { --te5-bg: #edf3fb; } :root[data-theme="dark"]:has(body.te5-driver-redesign), :root[data-theme="dark"]:has(body.te5-driver-access) { --te5-bg: #050912; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):has(body.te5-driver-redesign), :root:not([data-theme="light"]):has(body.te5-driver-access) { --te5-bg: #050912; } } body.te5-driver-redesign, body.te5-driver-access { position: relative; background-color: var(--driver-canvas); background-image: radial-gradient(circle at 84% 8%, var(--driver-accent-glow), transparent 31rem), radial-gradient(circle at 8% 92%, rgba(33, 128, 255, .12), transparent 25rem), linear-gradient(var(--driver-grid) 1px, transparent 1px), linear-gradient(90deg, var(--driver-grid) 1px, transparent 1px); background-size: auto, auto, 44px 44px, 44px 44px; background-attachment: fixed; } body.te5-driver-redesign::before, body.te5-driver-access::before { content: ""; position: fixed; z-index: 0; top: -110px; right: -150px; width: 340px; height: 340px; border-radius: 72px; background: linear-gradient(135deg, rgba(46, 139, 255, .88), rgba(7, 92, 255, .08) 68%), var(--driver-accent); opacity: .32; transform: rotate(31deg); pointer-events: none; } body.te5-driver-redesign::after, body.te5-driver-access::after { content: ""; position: fixed; z-index: 0; left: -94px; bottom: 8vh; width: 170px; height: 170px; border: 34px solid var(--driver-accent); opacity: .12; transform: rotate(45deg); pointer-events: none; } .te5-driver-redesign .driver-shell, .te5-driver-access .te5-login { position: relative; z-index: 1; } .te5-driver-redesign .driver-shell { box-sizing: border-box; width: min(100%, 540px); max-width: 540px; /* 🛑 Верхний отступ ОДИН на оболочку и на липкую шапку — она забирает его себе (`#driverHead` ниже: отрицательный сдвиг плюс собственное поле). Пока число стояло литералом в обоих правилах, правка одного уводила шапку вверх ровно на разницу, и по отдельности оба правила выглядели верными. Поэтому токен, а не число; переопределяет его тот, кому нужен свой отступ (экран прораба — ниже). */ --driver-shell-top: max(18px, env(safe-area-inset-top, 0px)); padding: var(--driver-shell-top) 18px max(44px, env(safe-area-inset-bottom, 0px)); } /* Экран подтверждения: сверху до первого блока столько же, сколько между блоками (TE-420, автор задачи 17.09.2026 — «уменьшить отступ сверху до первого блока, сделать таким же, как отступ между блоками»). Замер до правки на 390×844: 18px сверху против 14px между блоками. 🛑 Число НЕ писать литералом: «столько же, сколько между блоками» — это ссылка на `--gap-card`, канонический шаг стыков (объявлен ниже в этом же файле). Литерал разъедется с ним при первой же правке шага, и просьба перестанет выполняться молча — ровно тем способом, каким стыки уже расходились на 14 / 24 / 28 / 28. 🛑 `env(safe-area-inset-top)` из формулы не убирать: на телефоне с вырезом системная полоса больше нашего числа, и `max()` обязан её пережить. 🛑 Скоуп — `#custShell`, оболочка `customer.html`. Это экран подтверждения ТРЁХ ролей: прораба, заказчика и главного инженера (`customer_web` подставляет в один шаблон разный `app_kind`, id при этом статический). Задача говорила про прораба, остальным двум достаётся та же унификация — сознательно, ролевого разделения тут нет. У водителя своя оболочка и свой отступ, его правка не касается. Лендинг прораба (`customer_auth`, `main.driver-shell` без этого id) остаётся на 18px. */ .te5-driver-redesign #custShell { --driver-shell-top: max(var(--gap-card), env(safe-area-inset-top, 0px)); } .te5-driver-redesign .driver-body { margin-top: 14px !important; } /* 🛑 Масштабирование щипком выключено на полевых поверхностях (водитель, прораб): в TWA и на iOS мета `user-scalable=no` не действует, держит только `touch-action` — и его пересечение считается по цепочке предков, поэтому объявлено на `body`, а не на оболочке. Прокрутка по осям остаётся; случайный зум двумя пальцами в перчатке — нет (владелец 03.09.2026). */ body.te5-driver-redesign, body.te5-driver-access { touch-action: pan-x pan-y; } .te5-driver-redesign .te5-mobile-head, .te5-driver-redesign .te5-screen-nav { position: relative; min-height: 72px; padding: 10px; border: 1px solid var(--driver-card-border); border-radius: var(--driver-head-radius); background: linear-gradient(145deg, var(--driver-surface-strong), var(--driver-surface)); box-shadow: var(--driver-shadow); /* 🛑 Размытия нет намеренно (снято 10.08.2026): оба конца градиента — плоские `#455366` / `#384352`, сквозь шапку не видно ничего. Здесь это стоило дороже прочих мест: шапка ЛИПКАЯ, под ней при каждом скролле проезжает контент, то есть GPU-readback шёл на каждом кадре ради эффекта, которого не существует. 🛑 И заезд меню под шапку держится ровно на её НЕПРОЗРАЧНОСТИ — вернуть стекло значит показать пункты меню сквозь корпус. */ } .te5-driver-redesign .te5-mobile-head { flex-wrap: nowrap; gap: 8px; /* Тот же канонический шаг стыков, что у карточек ниже: под шапкой начинается обычный ритм блоков. Был литералом 14px — совпадал с `--gap-card` случайно, и правка токена оставила бы его одного (TE-420, 19.09.2026). */ margin-bottom: var(--gap-card); } .te5-driver-redesign .te5-mobile-head__brand { gap: 10px; flex-basis: auto; } .te5-driver-redesign .te5-mobile-head__mark, .te5-driver-access .te5-login__mark { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; /* Подложка знака берёт токен, а не своё число: значение и так совпадало, но копия в правиле разошлась бы с определением при первой же правке темы. Сам логотип рисует базовый te5.css через `background-image: var(--te5-logo-img)` — редизайн его не переопределяет, поэтому в прототипе на file:// виден пустой квадрат (абсолютный путь /icons/ не резолвится), а на сервере знак на месте. */ background-color: var(--te5-logo-bg); box-shadow: var(--te5-logo-ring), 0 8px 20px rgba(5, 13, 28, .18); } .te5-driver-redesign .te5-mobile-head__title { font-family: var(--te5-font); font-size: max(12px, calc(17px * var(--driver-zoom-comp, 1))); font-weight: 800; letter-spacing: -.02em; } .te5-driver-redesign .x-shift-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 64px; margin-bottom: 12px; padding: 10px 14px; border: 1px solid var(--driver-card-border); border-radius: 18px; background: var(--driver-surface); box-shadow: var(--driver-shadow); color: var(--driver-text); text-align: left; cursor: pointer; } .te5-driver-redesign .x-shift-strip__main { display: grid; gap: 3px; min-width: 0; } .te5-driver-redesign .x-shift-strip__label, .te5-driver-redesign .x-shift-strip__meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .te5-driver-redesign .x-shift-strip__label { font-size: max(13px, calc(18px * var(--driver-zoom-comp, 1))); font-weight: 800; } .te5-driver-redesign .x-shift-strip__meta { color: var(--driver-text-soft); font-size: var(--type-meta); } .te5-driver-redesign .x-shift-strip__chev { color: var(--driver-text-soft); font-size: var(--type-ref); } @media (hover: hover) { .te5-driver-redesign .x-shift-strip:hover { background: var(--driver-surface-strong); } } .te5-driver-redesign .te5-mobile-head__copy .te5-sub { margin-top: 2px; color: var(--driver-text-soft); font-size: max(11px, calc(12px * var(--driver-zoom-comp, 1))); } /* Кнопки шапки — ОДИН квадрат на всех: бургер, «?», тема, «Войти как» (админский переключатель из view-as-bar.js, до 06.09.2026 стоял 38px кита рядом с 48px соседями) и «Назад» под-экрана. Рамка — `--line-control`, край цели нажатия (j 06.09.2026: «рамка вокруг кнопок светлее»), а не `--line-soft`, которым разделяют поверхности: на тёмной карточке та рамка почти не читалась. */ .te5-driver-redesign .te5-mobile-burger, .te5-driver-redesign .te5-driver-help, /* 🛑 `.te5-help-btn` — «?» ЛЕНДИНГА ПРОРАБА, и он тут не за компанию: лендинг берёт эту же телефонную шапку, но кнопку одевал общий с кабинетом `HELP_CSS` — рамка оттуда приезжала бледная (`--te5-border` против `--line-control` у соседей), а кегль фиксированный, без системного зума. Владелец 09.09.2026: «почему у знака вопроса нет обводки как у других», «вопрос другого формата». Кабинета это не касается: там нет `.te5-driver-redesign`, и он остаётся на своей консольной шапке. */ .te5-driver-redesign .te5-help-btn, .te5-driver-redesign .te5-theme-toggle, .te5-driver-redesign .te5-viewas, .te5-driver-redesign .te5-screen-nav__back, .te5-driver-access .te5-theme-toggle { width: 48px; min-width: 48px; height: 48px; min-height: 48px; flex: 0 0 48px; border: 1px solid var(--line-control, var(--driver-card-border)); border-radius: 15px; background: var(--driver-surface); color: var(--driver-text); box-shadow: none; font-size: max(15px, calc(22px * var(--driver-zoom-comp, 1))); } /* Наведение и нажатие — одно состояние на все кнопки шапки (j 06.09.2026: «чтоб на „?“ при наведении было так же, как на смене темы»): до этого у темы и бургера были свои ховеры из te5.css, у «?» и «Войти как» — никакого. `:hover` только под (hover: hover) и со своим `:active`: на таче подсветка залипает на уже отпущенной кнопке. */ @media (hover: hover) { .te5-driver-redesign .te5-mobile-burger:hover, .te5-driver-redesign .te5-driver-help:hover, .te5-driver-redesign .te5-help-btn:hover, .te5-driver-redesign .te5-theme-toggle:hover, .te5-driver-redesign .te5-viewas:hover, .te5-driver-redesign .te5-screen-nav__back:hover { border-color: var(--te5-primary); background: var(--driver-surface-strong); } } .te5-driver-redesign .te5-mobile-burger:active, .te5-driver-redesign .te5-driver-help:active, .te5-driver-redesign .te5-help-btn:active, .te5-driver-redesign .te5-theme-toggle:active, .te5-driver-redesign .te5-viewas:active, .te5-driver-redesign .te5-screen-nav__back:active { border-color: var(--te5-primary); background: var(--driver-surface-strong); } /* Кнопка темы — вариант B прототипа (j 28.09.2026): подложка цветом значка (`--te5-toggle-bg`, te5.css). Рамка и её синева на наведении/нажатии — от общего набора кнопок шапки выше (j по кадру прода 28.09: «рамка тоже должна быть, как у остальных»); здесь только подложка и её тёмный тон вместо `--driver-surface-strong`. 🛑 Объявлено ПОСЛЕ общего набора кнопок шапки и его `:hover`/`:active` — специфичность равная, решает порядок; кнопка из набора не выходит (`test_customer_help` пинит состав). */ .te5-driver-redesign .te5-theme-toggle, .te5-driver-access .te5-theme-toggle { background: var(--te5-toggle-bg); } @media (hover: hover) { .te5-driver-redesign .te5-theme-toggle:hover { background: var(--te5-toggle-bg-strong); } } .te5-driver-redesign .te5-theme-toggle:active, .te5-driver-access .te5-theme-toggle:active { background: var(--te5-toggle-bg-strong); } .te5-driver-redesign .te5-driver-help { position: relative; font-weight: 900; font-family: inherit; } .te5-driver-redesign .te5-driver-help__dot { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border: 2px solid var(--driver-surface); border-radius: 50%; background: var(--te5-bad); } .te5-driver-redesign .te5-mobile-burger { order: initial; padding: 0; } /* Полоски бургера — SVG размером со значок смены темы (j 06.09.2026); центр у SVG геометрический, глиф «☰» сидел ниже центра квадрата из-за базовой линии шрифта. Второй SVG в той же кнопке — крестик открытого меню; какой виден, решает класс `is-open` (driver.js::setMenuOpen), узлы не пересоздаются. */ .te5-driver-redesign .te5-mobile-burger__icon { width: 24px; height: 24px; display: block; } .te5-driver-redesign .te5-mobile-burger__icon--close, .te5-driver-redesign .te5-mobile-burger.is-open .te5-mobile-burger__icon--lines { display: none; } .te5-driver-redesign .te5-mobile-burger.is-open .te5-mobile-burger__icon--close { display: block; } .te5-driver-redesign .te5-mobile-head__brand { order: initial; } .te5-driver-redesign .te5-mobile-head__actions { order: initial; } .te5-driver-redesign .te5-screen-nav__title { font-size: max(13px, calc(18px * var(--driver-zoom-comp, 1))); letter-spacing: -.01em; } .te5-driver-redesign .te5-mobile-menu { margin: -4px 0 14px; border: 1px solid var(--driver-card-border); border-radius: 18px; background: var(--driver-surface-strong); box-shadow: var(--driver-shadow); } .te5-driver-redesign .te5-mobile-menu__item { display: flex; align-items: center; /* Значок 24px (класс `te5-icon--lg`) — как у кнопок шапки «?» и темы; зазор 14px, а не 10: j 28.09.2026 по кадру — «приплюснуты… отступы от иконки, и побольше их». */ gap: 14px; min-height: 56px; padding: 0 18px; background: transparent; font-size: max(11px, calc(16px * var(--driver-zoom-comp, 1))); /* Скругление нужно самому пункту: подсветка наведения иначе рисуется прямоугольником поверх скруглённых углов панели и вылезает за них. */ border-radius: 12px; transition: background-color 120ms ease-out; } /* Наведение и нажатие — просьба владельца 08.08.2026 («когда навожу на Профиль и Выйти, чтоб у них тоже ховер был»). 🛑 `:hover` без `@media (hover: hover)` на телефоне залипает после тапа: тач-устройство «наводит» и не «уводит», подсветка остаётся на пункте закрытого меню. Поэтому наведение — только для мыши, а для пальца отдельное `:active`, которое гаснет само. */ @media (hover: hover) { .te5-driver-redesign .te5-mobile-menu__item:hover { background: var(--driver-surface-strong); } } .te5-driver-redesign .te5-mobile-menu__item:active { background: var(--driver-surface-strong); } .te5-driver-redesign .te5-driver-statusbar { margin-bottom: 12px; } .te5-driver-redesign .te5-driver-statusbar .te5-chip { min-height: 54px; max-width: none; border-width: 1px; border-radius: 18px; /* цвет/фон НЕ форсим — держим tone-классы te5.css (--open/--ok/--bad/--warn), иначе статус теряет цветовой код состояния (всё синим). Форма (радиус/высота/шрифт) — от редизайна. */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035); font-size: max(12px, calc(17px * var(--driver-zoom-comp, 1))); font-weight: 800; letter-spacing: -.01em; } /* Пара «подложка/текст» ПО ТОНАМ — цветовой код состояния сохраняется, меняется только способ его задать: непрозрачно вместо полупрозрачно. Это не нарушает правило выше (там запрет на ОДИН цвет поверх всех тонов, из-за которого статус становился сплошь синим) — здесь у каждого тона свой цвет. ВНИМАНИЕ: fallback ниже (`var(--driver-chip-*, var(--te5-*))`) с 31.08.2026 живого случая НЕ имеет — светлая ветка объявляет всю пару так же, как тёмная (её тоны провалили порог: 3.796-4.478 при 4.5, замер по краске карточки #fffefb). Прежняя редакция комментария утверждала обратное («в светлой --driver-chip-* не объявлены») и после той правки стала ложной. Сам fallback оставлен намеренно, как страховка на случай, когда класс .te5-driver-redesign окажется не на body: убирать его — правка ради краткости в файле, где перекрытия решает порядок объявления. */ .te5-driver-redesign .te5-chip--neutral { background: var(--driver-chip-open-bg, var(--te5-open-bg)); color: var(--driver-chip-open-fg, var(--te5-open)); } .te5-driver-redesign .te5-chip--info { background: var(--driver-chip-info-bg, var(--te5-primary-bg)); color: var(--driver-chip-info-fg, var(--te5-primary)); } .te5-driver-redesign .te5-chip--success { background: var(--driver-chip-ok-bg, var(--te5-ok-bg)); color: var(--driver-chip-ok-fg, var(--te5-ok)); } .te5-driver-redesign .te5-chip--warning { background: var(--driver-chip-warn-bg, var(--te5-warn-bg)); color: var(--driver-chip-warn-fg, var(--te5-warn)); } .te5-driver-redesign .te5-chip--danger { background: var(--driver-chip-bad-bg, var(--te5-bad-bg)); color: var(--driver-chip-bad-fg, var(--te5-bad)); } /* Пустое состояние «Нет активной смены» — единственный экран, который водитель видит до начала смены, и на нём заголовок был набран кеглем служебной подписи (15px), а подсказка ниже пола читаемости (13px при полу 15). 🛑 Правим driver-scoped: базовый `.te5-empty` живёт в te5.css и обслуживает пустые состояния КОНСОЛИ — глобальная правка уехала бы туда же. Нужное соотношение даёт РОСТ заголовка: подсказку опускать некуда, 15px это пол. */ .te5-driver-redesign .te5-empty { padding: 40px 20px; } /* 🛑 Правило `.te5-hint-host > .te5-empty { padding-left/right: 44px }` СНЯТО 15.09.2026 (TE-411, нашла вторая голова на ревью). Оно отодвигало пустое состояние карточки со значком «i» от правого края (ревью 03.09.2026), но с TE-411 его единственный потребитель — foreman-scan-card — задаёт боковые отступы сам и с important: ширина кнопки «Сканировать QR» и ширина списка запросов обязаны считаться от ОДНОЙ базы, а 44px по бокам эту базу сдвигали. Оставленное «умолчанием для следующей карточки» правило было бы вторым автором той же геометрии, который ничего не одевает и читается как живой. Место под значок теперь резервирует ЗАГОЛОВОК пустого состояния своим padding-inline (ниже, `.foreman-scan-card .te5-empty__title`) — заводя карточку со значком и пустым состоянием, повторяй это, а не воскрешай общее правило. */ .te5-driver-redesign .te5-empty__title { font-size: max(18px, calc(26px * var(--driver-zoom-comp, 1))); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; } .te5-driver-redesign .te5-empty__text { margin-top: 10px; font-size: max(11px, calc(16px * var(--driver-zoom-comp, 1))); line-height: 1.5; } /* Значок «i» в углу карточки (кит `te5-hint`): на полевой поверхности идёт одним набором с кнопками — те же 13px скругления и та же подложка, что у `.te5-btn` ниже. Видимый квадрат 32px (владелец 03.09.2026: 40px были «слишком большими»), цель нажатия 48px даёт `::before` из базового правила в te5.css. */ .te5-driver-redesign .te5-hint__btn { width: 32px; height: 32px; border-radius: 13px; border-color: var(--driver-card-border); background: var(--driver-surface-strong); font-size: max(11px, calc(16px * var(--driver-zoom-comp, 1))); } /* 🛑 Шапка карточки СО ЗНАЧКОМ не может быть ниже самого значка (TE-413, владелец 14.09.2026: «i заезжает НА линии - то есть линии тогда ниже надо»). Значок абсолютный, шапка о нём не знает: `padding: 12px` кита плюс строка заголовка давали шапку в 41px против 44px у значка (12px сверху + квадрат 32px), и линия под шапкой проходила ровно по его нижнему краю. Число выведено, а не подобрано: отступ значка сверху (12px из `te5.css`) + его квадрат + такой же отступ снизу. Тронешь квадрат в правиле выше - пересчитай здесь; связь держит `test_the_card_hint_does_not_lie_on_the_head_rule`. */ .te5-driver-redesign .te5-hint-host > .te5-card__head { min-height: 56px; } .te5-driver-redesign .te5-hint__panel { border-radius: 20px; font-size: max(11px, calc(16px * var(--driver-zoom-comp, 1))); } /* Затемнение под окном «i» — то же, что под окном профиля и под меню: один токен плотности и одно размытие (владелец 03.09.2026: «чтоб всё блюрилось на фоне, как когда профиль нажимаю»). Фолбэк внутри `var()` — для движков, где `::backdrop` ещё не наследует токены от документа (Safari до 17.4, Chrome до 122): там окно хотя бы затемняет, как в ките. */ .te5-driver-redesign .te5-hint__panel::backdrop { background: var(--driver-scrim, rgba(2, 7, 15, .45)); backdrop-filter: blur(var(--driver-scrim-blur, 18px)); -webkit-backdrop-filter: blur(var(--driver-scrim-blur, 18px)); } /* Заготовка страницы подтверждения (`customer.html`) — повторяет экран, который её сменит: шапка, карточка «Что подтверждаете» и три кнопки ответа. Габариты кнопок — из той же шкалы, что у настоящих `.te5-cta` / `.te5-cta--secondary` (владелец 03.09.2026: «скелетом грузились плашки точно так же, как кнопки стоять будут»). */ .te5-driver-redesign .te5-cust-skel__title { height: 20px; width: 58%; margin: 2px 0 6px; } .te5-driver-redesign .te5-cust-skel__sub { height: 14px; width: 72%; } .te5-driver-redesign .te5-cust-skel__line { height: 16px; margin: 9px 0; } .te5-driver-redesign .te5-cust-skel__line--short { width: 64%; } .te5-driver-redesign .te5-cust-skel__cta { height: var(--tap-primary); margin-bottom: 12px; border-radius: 20px; } .te5-driver-redesign .te5-cust-skel__cta--secondary { height: var(--tap-secondary); } /* Плашка «Доступна новая версия» на полевой поверхности — как главная кнопка: тот же градиент, свечение и скругление, белый текст (владелец 03.09.2026). Отступ снизу равен отступу сверху: над ней шапка с `margin-bottom: 14px`, под ней — `--gap-card` (14px). */ .te5-driver-redesign .te5-sw-update { margin: 0 0 var(--gap-card); border: 1px solid rgba(255, 255, 255, .16); border-radius: 20px; background: radial-gradient(circle at 86% 0, rgba(255, 255, 255, .28), transparent 42%), linear-gradient(135deg, var(--driver-accent-2), var(--driver-accent)); box-shadow: 0 12px 26px var(--driver-accent-glow); color: #fff; } .te5-driver-redesign .te5-sw-update__btn { border-color: #fff; border-radius: 14px; } .te5-driver-redesign .te5-sw-update__btn--reload { background: #fff; color: var(--driver-accent); } .te5-driver-redesign .te5-sw-update__btn--later { color: #fff; } .te5-driver-redesign .te5-banner { padding: 14px 16px; border-radius: 16px; font-size: max(11px, calc(14px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign .te5-cta { min-height: 88px; margin-bottom: 12px !important; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); border-radius: 20px; background: radial-gradient(circle at 86% 0, rgba(255, 255, 255, .28), transparent 42%), linear-gradient(135deg, var(--driver-accent-2), var(--driver-accent)); box-shadow: 0 16px 34px var(--driver-accent-glow); font-size: max(14px, calc(20px * var(--driver-zoom-comp, 1))); font-weight: 850; letter-spacing: -.015em; transition: transform .16s ease, filter .16s ease; } .te5-driver-redesign .te5-cta:hover { background: radial-gradient(circle at 86% 0, rgba(255, 255, 255, .32), transparent 42%), linear-gradient(135deg, #4298ff, #075cff); filter: saturate(1.06); } .te5-driver-redesign .te5-cta:active { transform: translateY(1px) scale(.992); box-shadow: 0 10px 22px var(--driver-accent-glow); } /* Занятость: тап принят, идут координаты и отправка (до 10 с на холодном приёмнике). 🛑 Объявляется ПОСЛЕ `:hover`/`:active` — специфичность у них равная, и раньше по файлу это правило не действовало бы (тот же класс, что мёртвая высота вторичной кнопки ниже). 🛑 Цвет ТЕКСТА не трогаем: он читается контраст-гейтом водителя, а приглушать подпись ради «выключенного вида» значит менять контраст ровно там, где человек читает на солнце. Занятость показывают снятый блик, ровный фон и пульс тени. */ /* 🛑 `:not(.te5-cta--secondary)` обязателен: у занятости специфичность (0,3,0) против (0,2,0) у вторичной кнопки, то есть без него занятость перекрасила бы ей ФОН, оставив тёмный `--driver-text` — 3.33 при пороге 4.5, и только в светлой теме. Контраст-гейт `.is-busy` не разбирает вовсе, так что упало бы молча. */ .te5-driver-redesign .te5-cta:not(.te5-cta--secondary).is-busy, .te5-driver-redesign .te5-cta:not(.te5-cta--secondary).is-busy:hover { background: linear-gradient(135deg, var(--driver-accent), var(--driver-accent)); filter: none; cursor: progress; } /* Вторичные и подтверждающие кнопки (закрытие обеда, простоя): у них СВОЙ фон, и подпись мы им не подменяем (она несёт выбор времени) — признак занятости несёт заливка. */ .te5-driver-redesign .te5-cta--secondary.is-busy, .te5-driver-redesign .te5-confirm__yes.is-busy, .te5-driver-redesign .te5-confirm__no.is-busy { filter: brightness(.94); cursor: progress; } /* 🛑 Пульса тени здесь НЕТ, и это не забывчивость: в этом же файле записан замер — «box-shadow из transition убран: тень растрируется на CPU, и её анимация репейнтит КАЖДЫЙ кадр — на дешёвом Android это заметно». Бесконечная анимация тени на самом крупном элементе экрана в течение всех десяти секунд ожидания — та же цена, только дороже; отзывчивость чинится, а не тратится. Признак несут подпись и ровная заливка. Отдельный `prefers-reduced-motion` тоже не нужен — общий блок выше гасит анимации по `.te5-driver-redesign *`, о чём в файле есть прямая пометка. */ .te5-driver-redesign .te5-cta--secondary { border-color: var(--driver-card-border); background: linear-gradient(145deg, var(--driver-surface-strong), var(--driver-surface)); color: var(--driver-text); box-shadow: 0 12px 28px rgba(10, 32, 68, .10); /* Кегль И ГАБАРИТ объявлены НИЖЕ, после общего правила кнопки: специфичность у обоих блоков одинаковая, поэтому здесь они не действовали. Стоявшая тут высота 72px была мёртвой — браузер брал 92px из шкалы, — и правка этих 72px не дала бы ничего. */ } /* 🛑 Вторичная кнопка при наведении/нажатии берёт синюю заливку главной (правило `.te5-cta:hover` выше не знает о модификаторе и красит и её), а цвет текста оставался тёмным `--driver-text` — чёрная подпись на синем (владелец 03.09.2026: «Включить уведомления», «Запрещено в настройках телефона»). Подпись на синем — белая, как у главной кнопки. `:hover` без `@media (hover: hover)` намеренно — та же форма, что у `.te5-cta:hover` выше: на тач-устройстве браузер снимает `:hover` вместе с `:active`. */ .te5-driver-redesign .te5-cta--secondary:hover, .te5-driver-redesign .te5-cta--secondary:active { background: radial-gradient(circle at 86% 0, rgba(255, 255, 255, .32), transparent 42%), linear-gradient(135deg, #4298ff, #075cff); color: #fff; } .te5-driver-redesign .te5-cta--nag { min-height: 64px; font-size: max(11px, calc(15px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign .te5-cta .te5-tile__emo { /* CTA-эмодзи — плоский абсолютный глиф (T18 «текст центрируется будто эмодзи нет»); сбрасываем 48px-чип из .te5-tile__emo, иначе на ≤320px синий чип наезжает на подпись. */ left: 14px; width: auto; min-width: 0; height: auto; flex: none; border-radius: 0; background: none; box-shadow: none; } .te5-driver-redesign .te5-driver-section-label { margin: 22px 2px 10px !important; color: var(--driver-text); font-size: max(12px, calc(17px * var(--driver-zoom-comp, 1))); font-weight: 850; letter-spacing: -.015em; text-transform: none; } .te5-driver-redesign .te5-driver-actions { gap: 12px; } .te5-driver-redesign .te5-tile { min-height: 88px; gap: 10px; overflow: hidden; padding: 12px; border: 1px solid var(--driver-card-border); border-radius: 20px; background: linear-gradient(145deg, rgba(255, 255, 255, .045), transparent 54%), var(--driver-surface); color: var(--driver-text); box-shadow: 0 12px 30px rgba(13, 38, 77, .09); font-size: max(11px, calc(16px * var(--driver-zoom-comp, 1))); font-weight: 780; line-height: 1.18; transition: transform .15s ease, border-color .15s ease; } .te5-driver-redesign .te5-tile:hover { border-color: var(--te5-primary-ln); box-shadow: 0 16px 34px var(--driver-accent-glow); } .te5-driver-redesign .te5-tile:active { transform: translateY(1px) scale(.985); } .te5-driver-redesign .te5-tile__emo { display: inline-grid; place-items: center; width: 48px; min-width: 48px; height: 48px; flex: 0 0 48px; border-radius: 15px; background: radial-gradient(circle at 25% 20%, rgba(255, 255, 255, .30), transparent 38%), linear-gradient(145deg, var(--driver-accent-2), var(--driver-accent)); color: #ffffff; box-shadow: 0 10px 24px var(--driver-accent-glow); font-family: "Segoe UI Symbol", "Apple Symbols", sans-serif; font-size: max(18px, calc(25px * var(--driver-zoom-comp, 1))); font-variant-emoji: text; line-height: 1; } .te5-driver-redesign .te5-driver-actions .te5-tile { justify-content: flex-start; gap: 10px; padding: 12px; } .te5-driver-redesign .te5-driver-actions .te5-tile .te5-tile__label { flex: 1 1 auto; text-align: left; } .te5-driver-redesign .te5-driver-actions .te5-tile:not(.te5-tile--full) .te5-tile__emo { width: 44px; min-width: 44px; height: 44px; font-size: max(15px, calc(22px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign .te5-card { overflow: hidden; border: 1px solid var(--driver-card-border); border-radius: 20px; background: linear-gradient(145deg, rgba(255, 255, 255, .035), transparent 55%), var(--driver-surface); box-shadow: 0 14px 36px rgba(10, 32, 68, .09); /* 🛑 Размытия здесь НЕТ намеренно: нижний слой фона — плоский `--driver-surface`, сквозь него не видно ничего, и `backdrop-filter` считался бы каждый кадр скролла впустую. Стекло тут работало, пока палитра была полупрозрачной; после перевода на плоские hex (04-09.08.2026) оно умерло побочным эффектом и было снято 10.08. Возвращать — только вместе с полупрозрачной поверхностью, иначе это чистая плата GPU за невидимое. */ } .te5-driver-redesign .te5-card__body { padding: 10px 16px !important; } /* 🛑 Тумблер роли «я прораб / я заказчик» (TE-217) — тот же `.te5-modeswitch`, что у диспетчерской: раздел один, меняется взгляд на него. Переопределяется только РАЗМЕР — кабинет и лендинг прораба открывают на объекте, с телефоном в руке, и 48px тут та же величина и по той же причине, что у целей нажатия на экране водителя. 🛑 Правило `[hidden]` обязательно и стоит ПЕРВЫМ по важности: `[hidden] { display:none }` живёт в UA-таблице, и ЛЮБОЕ авторское `display:` на том же элементе его перебивает. Без него тумблер в кабинете, где он закрыт до ответа сервера, показывался бы ВСЕМ — включая приёмщика без единого закрепления, — а атрибут в разметке выглядел бы работающим. */ .te5-driver-redesign .te5-modeswitch[hidden] { display: none; } .te5-driver-redesign .te5-modeswitch { display: flex; width: 100%; margin: 0 0 12px; } .te5-driver-redesign .te5-modeswitch a { flex: 1; min-height: 48px; display: flex; align-items: center; justify-content: center; font-size: max(11px, calc(15px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign .foreman-requests { margin: 0; margin-top: var(--gap-card); } .te5-driver-redesign .foreman-requests > .te5-card__body { padding: 22px 10px 20px !important; } /* Заголовок «Запросы» и пустое состояние — по центру карточки, симметричный отступ под значок «i» с обеих сторон, чтобы центр не съезжал (владелец 03.09.2026). Селектор через `.foreman-requests` — той же специфичности (0,3,0), что правило кита `.te5-hint-host > .te5-card__body > :first-child { padding-right: 44px }`, и стоит в файле, который грузится после te5.css, поэтому оба поля отсюда действуют. */ .te5-driver-redesign .foreman-requests .foreman-requests__title { margin: 0 0 14px; padding: 0 44px; text-align: center; font-size: max(15px, calc(21px * var(--driver-zoom-comp, 1))); line-height: 1.15; font-weight: 900; letter-spacing: 0; } .te5-driver-redesign .foreman-requests__none, .te5-driver-redesign .foreman-requests__more { text-align: center; } .te5-driver-redesign .foreman-requests__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .te5-driver-redesign .foreman-requests__list { display: grid; gap: 8px; } /* Карточка — КНОПКА, а не ссылка: capability выпускается только по нажатию. */ .te5-driver-redesign .foreman-request { min-width: 0; width: 100%; font: inherit; cursor: pointer; text-decoration: none; } /* 🛑 Скругление — ТО ЖЕ, что у главной кнопки водителя (`.te5-driver-redesign .te5-cta`, 20px), а не своё (TE-410, владелец 14.09.2026: «скругления у кнопок не такие, как у кнопок водителя - делать более круглые»). Число не подбирать по соседней строке: в этом файле живёт разнобой 8/12/13/14/15/16/17/18/20/22/24px, и «как у соседа» плодит ещё одно. Связь держит `test_the_foreman_buttons_are_as_round_as_the_drivers`. */ .te5-driver-redesign .foreman-request--compact, .te5-driver-redesign .foreman-request--detail { border: 0; border-radius: 20px; background: radial-gradient(circle at 86% 0, rgba(255, 255, 255, .24), transparent 42%), linear-gradient(135deg, var(--driver-accent-2), var(--driver-accent)); box-shadow: 0 5px 12px var(--driver-accent-glow); color: #fff; } .te5-driver-redesign .foreman-request--compact { display: flex; align-items: center; justify-content: center; min-height: 62px; padding: 8px 4px; text-align: center; } /* 🛑 ДВЕ СТРОКИ, а не три колонки в ряд (TE-411). Прежняя раскладка `72px 1fr 72px` отдавала данным середину, и после сужения плашки до ширины кнопки «Сканировать QR» (250px, просьба владельца) середина стала 82px: фамилия водителя, телефон и площадка обрезались до «Куз…», «Тел…», «Площ…» — то есть просьба про ширину выполнялась ценой содержимого, ради которого на плашку и смотрят. Теперь верхняя строка несёт то, что коротко и стоит по краям (госномер и время), а данные идут НИЖЕ во всю ширину. */ .te5-driver-redesign .foreman-request--detail { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; min-height: 78px; padding: 10px 12px; text-align: left; } .te5-driver-redesign .foreman-request--detail .foreman-request__vehicle { grid-area: 1 / 1; text-align: left; } .te5-driver-redesign .foreman-request--detail .foreman-request__when { grid-area: 1 / 2; text-align: right; } .te5-driver-redesign .foreman-request--detail .foreman-request__copy { grid-area: 2 / 1 / 3 / -1; justify-self: stretch; width: auto; max-width: 100%; text-align: left; } .te5-driver-redesign .foreman-request__when { min-width: 0; text-align: center; font-size: var(--type-ref); font-weight: 800; font-style: normal; white-space: nowrap; } /* Ожидание ответа сервера видно: пока ссылка выпускается, повторный тап заблокирован. */ .te5-driver-redesign .foreman-request:disabled { opacity: .6; cursor: progress; } .te5-driver-redesign .foreman-request__vehicle { min-width: 0; font-size: var(--type-data); line-height: 1.1; font-weight: 900; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .te5-driver-redesign .foreman-request__copy { display: grid; gap: 4px; min-width: 0; } .te5-driver-redesign .foreman-request__driver, .te5-driver-redesign .foreman-request__object { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .te5-driver-redesign .foreman-request__driver { font-size: var(--type-ref); font-weight: 800; } .te5-driver-redesign .foreman-request__object { color: rgba(255, 255, 255, .82); font-size: var(--type-meta); } /* 🛑 Боковой отступ РАВЕН отступу тела карточки «Запросы» (`22px 10px 20px` выше), и это несущее равенство, а не совпадение (TE-411): ширину столбца обе карточки считают `min(100%, …)` от СВОЕГО тела, и при разных отступах кнопка с плашками разъезжаются на узком экране, где каждая упирается в свои 100%. Раньше здесь стояло 44px - место под значок «i», - из-за чего кнопка была 250px при плашках 318px (замер 14.09.2026, 390px). Место под значок теперь держит САМ заголовок, которому оно и нужно. */ .te5-driver-redesign .foreman-scan-card .te5-empty { padding: 22px 10px 20px !important; } .te5-driver-redesign .foreman-scan-card .te5-empty__title { box-sizing: border-box; max-width: 310px; margin-inline: auto; /* 34px + 10px тела = те же 44px от края карточки, что у заголовка «Запросов». */ padding-inline: 34px; font-size: max(15px, calc(21px * var(--driver-zoom-comp, 1))); line-height: 1.15; } /* Скругление берётся у `.te5-driver-redesign .te5-cta` (20px) — своего здесь больше нет (TE-410): второй автор на то же свойство и делал кнопку прораба «квадратнее» водительской. */ .te5-driver-redesign .foreman-scan-card .te5-cta { min-height: 72px; margin: 14px auto 0 !important; font-size: max(15px, calc(21px * var(--driver-zoom-comp, 1))); } /* 🛑 ОДНА ширина на кнопку «Сканировать QR» и на список запросов (TE-411, владелец 14.09.2026: «сделать, чтобы ширина была как ширина кнопки сверху»). Число — замер той самой кнопки, которую владелец назвал эталоном: 250px на 390px до правки. Оно названо переменной, а не повторено дважды: повторённое разъедется при первой же правке одной из карточек, и разъезд будет виден только глазом на живом экране. `min(100%, …)` оставляет узкому экрану всю доступную ширину — а поскольку боковые отступы у обеих карточек теперь равны, «вся доступная» у них одна и та же. */ .te5-driver-redesign .foreman-scan-card, .te5-driver-redesign .foreman-requests { --foreman-action-w: 250px; } /* 🛑 Плотная сетка (`__grid`, от четырёх запросов) сюда НЕ входит намеренно: там три колонки в ряд, и 250px на всю сетку дали бы ~78px на госномер — жалоба владельца была про список из трёх плашек, а не про сетку. */ .te5-driver-redesign .foreman-scan-card .te5-cta, .te5-driver-redesign .foreman-requests__list { width: min(100%, var(--foreman-action-w)); margin-inline: auto; } .te5-driver-redesign .foreman-request:focus-visible { outline: 3px solid rgba(37, 99, 235, .32); outline-offset: 4px; } .te5-driver-redesign .te5-driver-log-row { position: relative; min-height: 72px; /* Левый отступ = left точки + её внешний размер + 16px воздуха до текста. 🛑 Меняешь размер точки — пересчитай здесь же: 8 + 30 + 16 = 54. */ padding: 15px 0 15px 54px; border-bottom: 0; /* Текст и время — на ОДНОЙ линии через центр кружка (j 06.09.2026: «фраза будто выше кружочка, и время на той же линии»): база te5.css ставит `align-items: start`, и первая строка текста садилась на 8px выше центра точки. Точка и линия ниже привязаны к 50% высоты строки, поэтому центр общий при любой высоте текста. */ align-items: center; font-size: max(11px, calc(15px * var(--driver-zoom-comp, 1))); line-height: 1.35; } .te5-driver-redesign .te5-driver-log-row::before { content: ""; position: absolute; top: 50%; left: 8px; /* 🛑 box-sizing у ПСЕВДОЭЛЕМЕНТА свой, он не наследует border-box строки: 24px + 6px рамки с каждой стороны давали внешние 36px и центр на 26px, тогда как линия ниже центрирована на 20px — она шла левее кружка на 6px. Замер computed это НЕ ловил, пока смотрел box-sizing строки, а не точки. */ box-sizing: border-box; /* 30px вместо 24px — правка владельца 03.08 «кружок побольше радиус». Зависимые числа пересчитаны в том же коммите: padding строки (54px), left линии (22px) и сдвиг вверх на половину размера (15px). */ width: 30px; height: 30px; margin-top: -15px; /* центр точки = центр строки */ /* Цвет кольца — тот же синий, что у главной кнопки (--te5-primary), а не приглушённый: лента и действие принадлежат одному экрану. */ border: 6px solid var(--te5-primary); border-radius: 50%; /* Середина — светлая подложка эмодзи главной кнопки, одинаковая в обеих темах (j 06.09.2026: «кружочек закрась в центре белым, как подложку за эмодзи»), а не цвет карточки: точка читается маркером, а не дыркой в линии. */ background: var(--driver-cta-emo-bg); box-shadow: 0 0 0 5px var(--te5-primary-bg); z-index: 1; /* поверх линии: ::after рисуется позже и иначе накрыл бы точку */ } .te5-driver-redesign .te5-driver-log-row::after { content: ""; position: absolute; /* Линия идёт через ВСЮ строку и прячется под точкой; у первой и последней строки обрезана до центра. Так она соединяет соседние точки при любой высоте строк — прежний вариант отсчитывал старт от фиксированного `top` точки. */ top: 0; bottom: 0; /* Центр кружка = left(8) + 30/2 = 23px при border-box; линия шириной 2px центрируется на нём, поэтому 22px. Меняешь размер точки — пересчитай. */ left: 22px; width: 2px; background: var(--te5-primary-ln); } .te5-driver-redesign .te5-driver-log-row:first-child::after { top: 50%; } .te5-driver-redesign .te5-driver-log-row:last-child::after { bottom: 50%; } .te5-driver-redesign .te5-driver-log-row__time { color: var(--driver-text-soft); font-size: max(11px, calc(13px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign .te5-route-event-edit, .te5-driver-redesign .te5-btn { border-color: var(--driver-card-border); border-radius: 13px; background: var(--driver-surface-strong); } /* 🛑 Перебил заливку — задай и цвет текста, ИНАЧЕ КНОПКА СТАНЕТ ПУСТОЙ. Правило выше меняет фон у ЛЮБОЙ `.te5-btn` водителя и по специфичности (0,2,0) сильнее модификатора `.te5-btn--primary` в te5.css (0,1,0) — но `color: #fff` оттуда остаётся, потому что мы его не трогали. На светлой поверхности это 1:1. Прод-дефект 09.08.2026: владелец прислал кадр экрана водителя, где под адресами в блоке «Маршрут обновлён» виден пустой белый прямоугольник — это кнопка «Принял». Задеты были все пять `.te5-btn--primary` (ещё «Готово» нампада, «Сменить пароль», «Закрыть» в QR, «Переоткрыть смену»), в тёмной теме те же кнопки давали 7.83:1 — поэтому дефект и не замечали. Цвет — токеном по темам: акцент читается на белом (5.27:1), но на тёмной поверхности проваливается (2.33:1). Пинит `test_driver_contrast_gate.py`. */ .te5-driver-redesign .te5-btn--primary { color: var(--driver-btn-primary-fg); } /* Запасной путь под главной кнопкой («Я уже на объекте»). Выглядит ссылкой намеренно: он не должен спорить за палец с основным сценарием дня. Но ЦЕЛЬ у него кнопочная — `--tap-small` и во всю ширину: в перчатке подчёркнутый текст в одну строку не берётся, а промах здесь стоит записи в путевом листе. Габарит берём из общей шкалы, а не своим числом: пол проекта 48px, и собственные 44 (потолок WCAG AAA) тихо выпали бы из-под гейта шкалы. Кегль 16px, не мельче: последняя ступень перед служебным полом 15px. */ .te5-driver-redesign .x-alt-act { display: block; width: 100%; min-height: var(--tap-small); margin: -2px 0 10px; font-size: max(11px, calc(16px * var(--driver-zoom-comp, 1))); text-align: center; color: var(--driver-link-fg); } .te5-driver-redesign .te5-driver-work-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 15px 0; font-size: max(11px, calc(15px * var(--driver-zoom-comp, 1))); } /* Полноширинный ряд — ТОЛЬКО 3-й+ ребёнок (кнопки Править/Удалить или пометка в списке работ). 2-детей ряды (Маршрут, Итого по объектам) остаются title|value в один ряд — иначе value уезжает под заголовок (grid-template-columns тут minmax(0,1fr) auto). */ .te5-driver-redesign .te5-driver-work-row > :nth-child(n+3) { grid-column: 1 / -1; } .te5-driver-redesign .te5-picker__head { margin: 22px 2px 10px; color: var(--driver-text); font-size: max(13px, calc(18px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign .te5-picker__grid { gap: 12px; } .te5-driver-redesign .te5-picker__grid .te5-tile { min-height: 88px; font-size: max(11px, calc(16px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign .te5-form__hint, .te5-driver-redesign .te5-input, .te5-driver-redesign .te5-textarea, .te5-driver-redesign .te5-odo__manual, .te5-driver-redesign .te5-stepper__val, .te5-driver-redesign .te5-time-date, .te5-driver-redesign .te5-odo__display { border-color: var(--driver-card-border); background: var(--driver-surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); } .te5-driver-redesign .te5-stepper__btn, .te5-driver-redesign .te5-numpad__key, .te5-driver-redesign .te5-time-row, .te5-driver-redesign .te5-form__cmt { border-color: var(--driver-card-border); background: var(--driver-surface-strong); } .te5-driver-redesign .te5-save, .te5-driver-redesign .te5-confirm__yes { background: linear-gradient(135deg, #35c88b, var(--driver-success)); box-shadow: 0 14px 30px rgba(21, 134, 90, .20); } /* ✓ на нампаде — плоский синий, а НЕ зелёный градиент: белый глиф на нём даёт 1.91–2.15:1 (замер авторов рядом, `.x-pad__ok`), то есть главный орган подтверждения хуже всего виден именно на солнце. На `--driver-accent` — 6.36:1. Решение и число уже были в файле; не подключены к живому классу, потому что `.x-pad` разметкой не выпускается. Правило обслуживает ОБА нампада (одометр и время) — они делят разметку клавиш. */ .te5-driver-redesign .te5-numpad__key--success { background: var(--driver-accent); border-color: var(--driver-accent); color: #fff; box-shadow: none; } /* 🛑 Плотность берётся из ОБЩЕГО токена `--driver-scrim` (объявлен в действующем блоке палитры), а не своим числом: разошедшиеся значения и породили жалобу владельца 09.08.2026 про «чёрный экран» вместо размытия. Размытие при этом УСИЛЕНО с 14 до 18px — оно и есть то, что несёт глубину, когда заливка перестала гасить экран насухо; под окном профиля лежат ФИО и номер путевого, и они обязаны остаться неразборчивыми. */ .te5-driver-redesign .te5-modal-backdrop { padding: 18px; background: var(--driver-scrim); backdrop-filter: blur(var(--driver-scrim-blur)); -webkit-backdrop-filter: blur(var(--driver-scrim-blur)); } .te5-driver-redesign .te5-modal-backdrop--support { display: grid; place-items: center; padding-top: max(12px, env(safe-area-inset-top)); padding-right: max(12px, env(safe-area-inset-right)); padding-bottom: max(12px, env(safe-area-inset-bottom)); padding-left: max(12px, env(safe-area-inset-left)); } .te5-driver-redesign .te5-modal { border: 1px solid var(--driver-card-border); border-radius: 22px; background: var(--driver-surface-strong); box-shadow: var(--driver-shadow); /* Крестик позиционируется от окна. */ position: relative; } /* Кегль полевых модалок: жалоба владельца 08.08.2026 была именно про профиль — «ФИО и вообще все шрифты как guest1, побольше сделай». Базовый te5 рассчитан на консоль (13-16px), водитель смотрит в перчатке и на солнце. */ .te5-driver-redesign .te5-modal__title { font-size: max(15px, calc(22px * var(--driver-zoom-comp, 1))); margin-bottom: 16px; } .te5-driver-redesign .te5-modal .te5-field > span { font-size: max(11px, calc(15px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign .te5-reg { font-size: max(15px, calc(22px * var(--driver-zoom-comp, 1))); } /* 🛑 Между полями воздуха БОЛЬШЕ, чем внутри поля. `.te5-field` — колонка с зазором 5px между меткой и значением, и без внешнего отступа оба расстояния равны: метка следующего поля встаёт вплотную к значению предыдущего, и список читается сплошной кашей («Гость Тестовый» / «Логин» слитно — жалоба владельца по кадру 10.08.2026: «сделай чтоб не так приплюснуто было»). Группировка «метка + её значение» держится на РАЗНИЦЕ зазоров, а не на их наличии — закон близости. Скоуп до модалки водителя намеренно: `.te5-field` общий на консоль и экран заказчика, где своя плотность. */ .te5-driver-redesign .te5-modal .te5-field + .te5-field { margin-top: 18px; } /* Служебные числа замера экрана: они здесь для проверки компенсации системного увеличения, а не для водителя, — поэтому отделены линией от его данных. В одном ряду с ФИО и логином они читались бы как ещё одно поле учётной записи. */ /* 🛑 `margin-top` здесь НЕ задаём, хотя просится: отступ уже приходит от правила выше, у которого специфичность ВЫШЕ (соседний селектор `+` добавляет вес). Объявление рядом с рамкой выглядело бы работающим и не действовало — замер в браузере поймал ровно это: заданные 20px, на экране 18px. Нужно другое расстояние — менять общее правило, а не дописывать сюда. */ .te5-driver-redesign .te5-modal .te5-field--diag { padding-top: 14px; border-top: 1px solid var(--driver-card-border); } .te5-driver-redesign .te5-modal__text { font-size: max(12px, calc(17px * var(--driver-zoom-comp, 1))); line-height: 1.45; color: var(--driver-text-soft); } .te5-driver-redesign .te5-modal--shifts { width: min(420px, calc(100vw - 36px)) !important; } .te5-driver-redesign .x-shift-list { display: grid; gap: 10px; } .te5-driver-redesign .x-shift-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 72px; padding: 12px 14px; border: 1px solid var(--driver-card-border); border-radius: 16px; background: var(--driver-surface); color: var(--driver-text); text-align: left; cursor: pointer; } .te5-driver-redesign .x-shift-row.is-active { border-color: var(--driver-accent-2); } .te5-driver-redesign .x-shift-row__main, .te5-driver-redesign .x-shift-row__meta { display: grid; min-width: 0; } .te5-driver-redesign .x-shift-row__label { font-size: var(--type-data); font-weight: 800; } .te5-driver-redesign .x-shift-row__date, .te5-driver-redesign .x-shift-row__meta { color: var(--driver-text-soft); font-size: var(--type-meta); } .te5-driver-redesign .x-shift-row__meta { text-align: right; } /* Крестик закрытия: цель нажатия 48px — иначе не берётся пальцем в перчатке. 🛑 Заголовку нужен правый отступ, иначе длинный текст уезжает под крестик. */ .te5-driver-redesign .te5-modal__close { position: absolute; top: 10px; right: 10px; min-width: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 14px; background: transparent; color: var(--driver-text-soft); font-size: max(20px, calc(28px * var(--driver-zoom-comp, 1))); line-height: 1; cursor: pointer; } @media (hover: hover) { .te5-driver-redesign .te5-modal__close:hover { background: var(--driver-surface); } } .te5-driver-redesign .te5-modal__close:active { background: var(--driver-surface); } .te5-driver-redesign .te5-modal__title { padding-right: 52px; } .te5-driver-redesign .te5-modal.te5-modal--support { width: min(480px, calc(100vw - 28px)) !important; height: min(720px, calc(100dvh - 28px)); max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px); overflow: clip; } .te5-driver-redesign .te5-support-modal { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto; height: 100%; min-height: 0; } .te5-driver-redesign .te5-support-chat__header { grid-row: 1; padding: 20px 58px 12px 20px; border-bottom: 1px solid var(--driver-card-border); } .te5-driver-redesign .te5-support-modal__title { margin: 0; font-size: max(18px, calc(26px * var(--driver-zoom-comp, 1))); line-height: 1.08; letter-spacing: -.035em; } .te5-driver-redesign .te5-support-modal__lead { margin: 6px 0 0; color: var(--driver-text-soft); font-size: max(11px, calc(16px * var(--driver-zoom-comp, 1))); line-height: 1.35; } .te5-driver-redesign .te5-support-chat__history { grid-row: 3; min-height: 0; padding: 14px 16px; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; } .te5-driver-redesign .te5-support-chat__date, .te5-driver-redesign .te5-support-chat__state, .te5-driver-redesign .te5-support-chat__stale { color: var(--driver-text-soft); font-size: max(11px, calc(14px * var(--driver-zoom-comp, 1))); line-height: 1.35; text-align: center; } .te5-driver-redesign .te5-support-chat__date { margin: 12px 0 8px; font-weight: 800; } .te5-driver-redesign .te5-support-chat__message { width: fit-content; max-width: 88%; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--driver-card-border); border-radius: 16px 16px 16px 5px; background: var(--driver-surface); } .te5-driver-redesign .te5-support-chat__message.is-own { margin-left: auto; border-color: var(--te5-primary); border-radius: 16px 16px 5px 16px; background: var(--te5-primary-bg); } .te5-driver-redesign .te5-support-chat__meta { margin-bottom: 4px; color: var(--driver-text-soft); font-size: max(11px, calc(13px * var(--driver-zoom-comp, 1))); font-weight: 800; } .te5-driver-redesign .te5-support-chat__text { color: var(--driver-text); font-size: max(12px, calc(17px * var(--driver-zoom-comp, 1))); line-height: 1.35; overflow-wrap: anywhere; white-space: pre-wrap; } .te5-driver-redesign .te5-support-modal__textarea { min-height: 48px; max-height: 96px; padding: 11px 13px; resize: none; line-height: 1.35; } .te5-driver-redesign .te5-support-chat__composer { grid-row: 7; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--driver-card-border); background: var(--driver-surface-strong); } .te5-driver-redesign .te5-support-modal__send { min-height: 48px; min-width: 112px; margin: 0 !important; border-radius: 16px; } .te5-driver-redesign .te5-support-chat__older, .te5-driver-redesign .te5-support-chat__new, .te5-driver-redesign .te5-support-chat__retry { min-height: 48px; margin: 8px 16px !important; } .te5-driver-redesign .te5-support-chat__older { grid-row: 2; } .te5-driver-redesign .te5-support-chat__new { grid-row: 4; } .te5-driver-redesign .te5-support-chat__stale { grid-row: 5; } .te5-driver-redesign .te5-support-modal > .te5-banner { grid-row: 6; } .te5-driver-redesign .te5-support-chat__new { color: var(--te5-primary); font-weight: 800; } .te5-driver-redesign .te5-support-chat__stale, .te5-driver-redesign .te5-support-modal > .te5-banner { margin: 0 16px 8px; } .te5-driver-redesign .te5-support-modal__send { box-shadow: 0 10px 22px var(--driver-accent-glow); font-size: max(13px, calc(18px * var(--driver-zoom-comp, 1))); } @media (max-width: 520px) { .te5-driver-redesign .te5-modal-backdrop--support { padding: 0; } .te5-driver-redesign .te5-modal.te5-modal--support { width: 100vw !important; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; } } /* Опасное действие (выход) — красная заливка, чтобы не путалась с «Отмена». */ .te5-driver-redesign .te5-btn--danger { background: var(--te5-bad); border-color: var(--te5-bad); color: #1b2027; font-weight: 700; } .te5-driver-redesign :focus-visible, .te5-driver-access :focus-visible { outline: 3px solid var(--driver-accent-2); outline-offset: 3px; } /* 🛑 Кольцо фокуса рисуется по ВИДИМОМУ кругу, а не по цели нажатия (TE-413, ревью 15.09.2026). У кнопок маршрута и звонка в карточке «Что подтверждаете» цель 44px и НЕВИДИМА — правило выше обводило бы пустой квадрат, который с учётом толщины и отступа выходит за 50px при строке около 39px и снова ложится на разделители: ровно тот дефект, ради снятия которого размеры и разводили, только для клавиатуры. Гашение здесь законно потому, что замена рисуется тем же токеном строкой ниже; целью нажатия ссылка остаётся. Сторож — test_foreman_ui_polish.py::test_the_focus_ring_follows_the_visible_circle. */ .te5-driver-redesign #markMap:focus-visible, .te5-driver-redesign #driverPhone:focus-visible { outline: none; } .te5-driver-redesign #markMap:focus-visible > span, .te5-driver-redesign #driverPhone:focus-visible > span { outline: 3px solid var(--driver-accent-2); outline-offset: 2px; } /* Вход и смена пароля: тот же брендовый язык, без новых блоков и рекламного текста. */ .te5-driver-access .te5-login--driver { width: min(100%, 470px); margin: 0 auto; gap: 20px; padding: max(28px, env(safe-area-inset-top, 0px)) 20px max(32px, env(safe-area-inset-bottom, 0px)); } .te5-driver-access .te5-login__brand { width: 100%; gap: 14px; padding: 0 4px; } .te5-driver-access .te5-login__title { color: var(--driver-text); font-size: max(17px, calc(24px * var(--driver-zoom-comp, 1))); font-weight: 850; letter-spacing: -.025em; } .te5-driver-access .te5-login__sub { margin-top: 2px; color: var(--driver-text-soft); font-size: max(11px, calc(13px * var(--driver-zoom-comp, 1))); } /* 🛑 Отступ карточки и толщина её рамки — ОДНА величина на двоих: от них же считается ширина бейджа MAX-бота ниже. Он лежит ЗА карточкой и потому по умолчанию растягивался на всю колонку — замер прода 09.08.2026 дал 430px против 376px у кнопки «Войти», при том что комментарий в разметке уверял «в габаритах кнопки». Разводить эти числа по двум местам нельзя: разъедутся молча, глазами пара пикселей не ловится. */ .te5-driver-access { --login-card-pad: 26px; --login-card-bw: 1px; } .te5-driver-access .te5-login__card { width: 100%; padding: var(--login-card-pad); border: var(--login-card-bw) solid var(--driver-card-border); border-radius: 24px; background: radial-gradient(circle at 100% 0, var(--driver-accent-glow), transparent 42%), var(--driver-surface); box-shadow: var(--driver-shadow); /* Размытия нет по той же причине, что у карточки: фон непрозрачный (см. там). */ } .te5-driver-access .te5-login__card h1 { color: var(--driver-text); font-size: max(20px, calc(28px * var(--driver-zoom-comp, 1))); font-weight: 900; letter-spacing: -.035em; } .te5-driver-access .te5-login__hint { color: var(--driver-text-soft); font-size: max(11px, calc(14px * var(--driver-zoom-comp, 1))); line-height: 1.5; } /* Объяснение неудачной ссылки автологина. Не подсказка, а причина отказа: если оформить её как обычный серый хинт, водитель прочитает форму как «просто вход» и не поймёт, что делать (прод-инцидент 08.08.2026). Цвет — токен предупреждения, он уже посчитан по контрасту для обеих тем (`--te5-warn`: #a46900 светлая / #f0bd51 тёмная). 🛑 Не подставлять свой hex: тёмная ветка тут отдельная. */ .te5-driver-access .te5-login__hint--warning { color: var(--te5-warn); font-weight: 600; margin-bottom: 12px; } .te5-driver-access .te5-field > span { color: var(--driver-text-soft); font-size: max(11px, calc(13px * var(--driver-zoom-comp, 1))); } .te5-driver-access .te5-input { min-height: 56px; padding: 0 15px; border-color: var(--driver-card-border); border-radius: 15px; background: var(--driver-surface-strong); color: var(--driver-text); font-size: max(11px, calc(16px * var(--driver-zoom-comp, 1))); } .te5-driver-access .te5-cta { min-height: 62px; border-radius: 17px; background: radial-gradient(circle at 84% 0, rgba(255, 255, 255, .24), transparent 40%), linear-gradient(135deg, var(--driver-accent-2), var(--driver-accent)); box-shadow: 0 16px 34px var(--driver-accent-glow); font-size: max(12px, calc(17px * var(--driver-zoom-comp, 1))); } /* Бейдж MAX-бота: второй равноправный выход со страницы, поэтому габарит у него как у «Войти» — карточка минус её внутренние поля и рамка с каждой стороны. 🛑 ОБЪЯВЛЯЕТСЯ ПОСЛЕ `.te5-driver-access .te5-cta` — специфичность у них РАВНАЯ (0,2,0), и решает порядок. Пока цвет стоял инлайном, он бил любой селектор; сняли инлайн ради правки габарита — и кнопка молча покрасилась градиентом входа, то есть стала синей вместо фиолетовой. Поймал живой замер по кадру, ни один структурный тест этого не видел. Переставишь блок выше — вернёшь тот же дефект; порядок пинит тест. Оформление ЗДЕСЬ, а не инлайном: инлайн бьёт классовый селектор и делает правку размера недостижимой (этот класс уже ловили на кнопке «Принял» и на кегле `.te5-reg`). */ .te5-driver-access .te5-login__maxbot { width: calc(100% - 2 * (var(--login-card-pad) + var(--login-card-bw))); margin-inline: auto; margin-top: 14px; background: var(--driver-maxbot-bg); /* Свечение приглушено вместе с заливкой: под ярким #7950f2 оно было заметным ореолом и спорило с кнопкой входа за внимание. */ box-shadow: 0 14px 30px rgba(109, 91, 164, .22); color: #fff; text-decoration: none; } @media (max-width: 768px) { body.te5.te5-driver-redesign { font-size: max(11px, calc(16px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign .te5-screen-nav .te5-theme-toggle { width: 48px; min-width: 48px; height: 48px; min-height: 48px; flex-basis: 48px; border-radius: 15px; font-size: max(15px, calc(22px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign .te5-driver-section-label { font-size: max(11px, calc(15px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign .te5-route-event-edit { min-height: 44px; padding: 0 12px; font-size: max(11px, calc(14px * var(--driver-zoom-comp, 1))); } } @media (max-width: 390px) { .te5-driver-redesign .driver-shell { padding-left: 12px; padding-right: 12px; } .te5-driver-redesign .te5-mobile-head, .te5-driver-redesign .te5-screen-nav { padding: 8px; border-radius: 19px; } .te5-driver-redesign .te5-tile { min-height: 84px; } } @media (max-width: 340px) { .te5-driver-redesign .te5-driver-actions { grid-template-columns: 1fr; } .te5-driver-redesign .te5-mobile-head__copy .te5-sub { display: none; } } @media (prefers-reduced-motion: reduce) { .te5-driver-redesign *, .te5-driver-access * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* ══════════════════════════════════════════════════════════════════════════ ПОЛИШ ЭКРАНА ВОДИТЕЛЯ — 01.08.2026, утверждён владельцем, замерен в прототипе (prototypes/driver-20260801/). Слой АДДИТИВНЫЙ: ничего не переименовывает, только переопределяет значения — поэтому он и лёг сюда целиком, в конец. Комментарии внутри несут ЗАМЕРЫ и причины: это единственное место, где записано, почему именно такое число. Не срезать их при правках. Инварианты, которые легко нарушить, продублированы в .claude/rules/te5-frontend.md. ══════════════════════════════════════════════════════════════════════════ */ /* ПРЕДЛОЖЕНИЕ — аддитивный слой поверх driver.css. Ничего не переименовывает, только переопределяет значения: так же ляжет в driver.css. ══════════════════════════════════════════════════════════════════════════ ШКАЛА ПО РОЛИ ТЕКСТА. Одна роль — один размер, везде. Шаг ~1.2. Меняешь ступень ЗДЕСЬ — меняется во всех местах сразу, разъехаться не может. --type-action 28 текст главной кнопки читается не глядя --type-op 20 объект в баннере, база ведёт следующее действие --type-data 19 маршрут, итоги по объектам читают в движении; пол для 40+ --type-ref 17 лента событий сверка постфактум --type-meta 15 время, метки, подписи не читают подряд 🛑 Пол: 16px для читаемого текста, 15px только служебному. Ниже — нельзя. ══════════════════════════════════════════════════════════════════════════ */ body.te5-driver-redesign, body.te5-driver-access { /* ── типографика ── Ступени тоже идут через множитель компенсации системного увеличения (j 06.09.2026: «чтоб наш интерфейс не зумился, даже если у них зум стоит») — до этого множитель ужимал только цели нажатия, а текст оставался в ×1.3 от системы. Полы — ≈0.7 базы: скрипт и так не опускает множитель ниже 1/1.5, `max` страхует от вранья замера. Контракт тот же, что у целей нажатия ниже: дефолт фолбэком в самой функции, отдельного объявления переменной нет нигде (см. ниже, почему). */ --type-action: max(20px, calc(28px * var(--driver-zoom-comp, 1))); --type-op: max(14px, calc(20px * var(--driver-zoom-comp, 1))); --type-data: max(13px, calc(19px * var(--driver-zoom-comp, 1))); --type-ref: max(12px, calc(17px * var(--driver-zoom-comp, 1))); --type-meta: max(11px, calc(15px * var(--driver-zoom-comp, 1))); /* ── габариты целей нажатия (MIL-STD-1472H: 15 мм + 5 мм на перчатку) ── 🛑 Каждая цель считается через множитель компенсации системного увеличения (`--driver-zoom-comp`, ставит `driver.js`) И через `max(...)` с полом. Пол здесь, а не в скрипте, намеренно: скрипт меряет платформу, а платформа умеет врать — сломанный шрифт или экзотический движок дадут завышенный множитель, и цель ужмётся до непопадаемой. `max` делает это механически невозможным: что бы ни намерил замер, ниже названного числа размер не опустится. Числа пола — решение владельца 09.08.2026: «цель нажатия не ниже 48, у полевых держим ≈72 — перчатка и тряска никуда не делись». Компенсируем не в ноль. 🛑 Дефолт задан ФОЛБЭКОМ в самой функции — `var(--driver-zoom-comp, 1)`, — и отдельного объявления у переменной нет НИГДЕ. Это не экономия: объявление на `body` перебило бы значение, которое скрипт ставит на корне (собственное значение элемента всегда сильнее унаследованного), и компенсация выглядела бы применённой, не меняя ничего. Замер в браузере 10.08.2026 поймал ровно это: множитель 0.3 при объявлении на `body` оставлял кнопку ровно 132px. Не «навести порядок», добавив объявление сюда, — это вернёт дефект; пинит `test_driver_system_scale.py`. */ --tap-primary: max(72px, calc(132px * var(--driver-zoom-comp, 1))); /* главное действие ≈23 мм */ --tap-secondary: max(64px, calc(92px * var(--driver-zoom-comp, 1))); --tap-tile: max(56px, calc(104px * var(--driver-zoom-comp, 1))); /* legacy-плитки ≈19 мм */ --tap-small: max(48px, calc(56px * var(--driver-zoom-comp, 1))); /* вторичные цели */ /* 🛑 Зазор — 28px, а не 18px. Замер разведки: MIL-STD-1472H требует 5 мм «первого контакта» между соседними целями, и 5 мм на плотности телефона это ≈28px, а не 18px. Прототип считал от 5 мм как от размера, а не как от зазора — и получил вдвое меньше нормы. Промах по соседней кнопке в перчатке необратим (отметил не тот объект), поэтому расстояние важнее высоты. */ --gap-safe: 28px; /* ── линии: ДВЕ роли, а не одна ── --line-control — край того, во что ЦЕЛЯТСЯ (кнопка, тап-заголовок). Обязан быть ≥3:1 (WCAG 1.4.11): в перчатке и на бликующем экране водитель метится по видимому краю, а не читает подпись. --line-soft — разделение поверхностей. Тут 3:1 не требуется и вредит: жирный контур у каждой карточки делает экран решётчатым. */ --line-control: #7d8da8; --line-soft: #d3dced; /* ── палитра светлой темы: плоско, без стекла ── */ --driver-surface: #ffffff; /* было rgba(255,255,255,.86) — под стекло */ --driver-surface-strong: #ffffff; /* 🛑 Текст главной кнопки СЧИТАЕТСЯ К ПОВЕРХНОСТИ, на которой она лежит. te5.css красит `.te5-btn--primary` в #fff под свою синюю заливку, а мы заливку перебиваем (правило `.te5-driver-redesign .te5-btn`) — белый остаётся на белом, и кнопка выглядит пустым прямоугольником. Замер: акцент на #ffffff = 5.27:1. */ --driver-btn-primary-fg: #075cff; /* 🛑 Подпись СИНЕЙ кнопки кита (`.te5-cta` → `color: var(--te5-on-primary)`) — белая в ЛЮБОЙ теме (владелец 03.09.2026: «если кнопка наша синяя, текст внутри белый»). Кит в тёмной теме красит свой `--te5-primary` бледным #9fb8d8 и потому ставит подпись тёмной (#10151d); полевая палитра перекрывает синий насыщенным градиентом, и без этого токена тёмная подпись кита ложилась на наш синий — «Вернуть в работу» и «Сканировать QR» чёрным. Объявлять во ВСЕХ трёх блоках палитры. Замер: белый на #075cff = 5.27, на #0f52e0 = 6.36; подпись кита на #0f52e0 = 2.88 — ниже порога. */ --te5-on-primary: #ffffff; /* Ссылка-действие на карточке («Я уже на объекте»). Свой токен, а не общий `--te5-primary`: тот в тёмной теме уезжает в `--driver-accent-2` (#3b86ff), и на карточке #384352 это 2.89:1 при пороге 4.5 — замер 09.08. В светлой акцент проходит сам: 5.23:1. */ --driver-link-fg: #075cff; /* Пин Яндекс.Карт — ОДИН значок на две поверхности: кнопка навигатора у водителя и значок маршрута в карточке прораба. Токеном, а не литералом в SVG: фоны под ним РАЗНЫЕ (белая кнопка/карточка светлой темы, #455366 у водителя и #384352 у прораба в тёмной), и одного значения на все четыре сочетания не существует — замер 09.09.2026: #FF5529 даёт 3.19 на белом и 3.14 на карточке прораба, но всего 2.45 на кнопке водителя при пороге 3:1 для значка (WCAG 1.4.11). Светлая ветка держит брендовый оттенок, тёмная — осветлённый. 🛑 Светлый оттенок ушёл темнее (#FF5529 → #F24A1F) вместе с подложкой кнопки: на сером #EFF0F0 прежний давал 2.79, то есть ЛЮБОЙ различимый серый ронял значок ниже порога. Замер после правки: 3.19 на подложке кнопки, 3.64 на белой карточке прораба. */ --pin-yandex: #f24a1f; /* Подложка и рамка КНОПКИ-ЗНАЧКА — своя пара, а не подложка карточки. Прежде кнопка носила класс `te5-btn` и получала `--driver-surface-strong`, то есть ровно тот же цвет, что у карточки под ней: в тёмной теме она читалась светлой заплатой, в светлой не отделялась вовсе (владелец 09.09.2026, три кадра подряд). Серый взят из нашей же гаммы — тот самый, которым залит чип «На базе» по соседству (--driver-chip-open-bg), а рамка вдвое плотнее карточной: у кнопок шапки прораба она видима, у нашей не была. */ --driver-iconbtn-bg: #eff0f0; --driver-card-border: var(--line-soft); --driver-shadow: 0 1px 2px rgba(20, 54, 101, .08); /* --driver-accent / -2 / -glow НЕ трогаем: градиент и свечение кнопки владельцу нравятся */ --te5-border: var(--driver-card-border); --te5-card: var(--driver-surface); } :root[data-theme="dark"] body.te5-driver-redesign, :root[data-theme="dark"] body.te5-driver-access { /* ТЁМНО-СИНЯЯ ЛЕСТНИЦА — взята из мокапов владельца и разведена по яркости. Мокапы дают холст #010713 / #0c0d11: это ниже комфортного диапазона (Material называет #121212) и не оставляет места ступеням — поднимаю базу, сохраняя синий подтон. Шаг между ступенями ~1.2 по яркости. */ --driver-canvas: #1b2027; --driver-surface: #384352; /* карточка */ --driver-surface-strong: #455366; /* вложенное / нажатое */ /* Здесь акцент как ТЕКСТ не годится: #2e8bff на #455366 = 2.33:1. Берём светлый текст темы — 7.43:1. Значение обязано совпадать с системно-тёмной веткой. */ --driver-btn-primary-fg: #f7f9fd; /* Светлый голубой вместо акцента: 5.14:1 на карточке. Тот же тон, что у тёмной консоли — язык ссылок общий. Значение обязано совпадать с системно-тёмной веткой. */ --driver-link-fg: #8cbcff; /* 3.39:1 на #455366 (кнопка водителя) и 4.35:1 на #384352 (карточка прораба). Значение обязано совпадать с системно-тёмной веткой. */ --pin-yandex: #ff8a6b; /* 4.14:1 к пину. Значения обязаны совпадать с системно-тёмной веткой. */ --driver-iconbtn-bg: #3e4650; --line-control: #8596b7; /* 3:1 — край цели нажатия */ --line-soft: #23304a; /* разделение поверхностей */ --driver-card-border: var(--line-soft); --driver-shadow: none; /* акцент — синий из мокапов (#066afc / #0353f2), разведён в градиент кнопки */ --driver-accent: #0f52e0; --driver-accent-2: #3b86ff; --driver-accent-glow: rgba(28, 96, 232, .30); --driver-text: #eef3fb; --driver-text-soft: #aebcd3; --te5-muted: #a7b3c8; /* было 4.77:1 — на грани */ --te5-border: var(--driver-card-border); --te5-card: var(--driver-surface); --te5-primary: var(--driver-accent-2); --te5-on-primary: #ffffff; /* белая подпись на нашем синем, см. светлый блок */ } :root:has(body.te5-driver-redesign), :root:has(body.te5-driver-access) { --te5-bg: #edf3fb; } :root[data-theme="dark"]:has(body.te5-driver-redesign), :root[data-theme="dark"]:has(body.te5-driver-access) { --te5-bg: #080e1a; } /* ── 1. Декор: вместо 4 слоёв, сетки и двух фигур — ОДИН мягкий градиент ──── Вертикальный, едва заметный, не прокручивается отдельно от контента (background-attachment:fixed снят — он же первая статья скролл-джанка). Даёт глубину «дорогого тёмного», не мешая читать на солнце. */ body.te5-driver-redesign, body.te5-driver-access { background-image: none; background-attachment: scroll; } :root[data-theme="dark"] body.te5-driver-redesign, :root[data-theme="dark"] body.te5-driver-access { background-image: linear-gradient(180deg, #1f242c 0%, #1b2027 46%, #161b20 100%); /* стопы вокруг холста, см. гейт согласования */ background-repeat: no-repeat; background-size: 100% 100%; } body.te5-driver-redesign::before, body.te5-driver-access::before, body.te5-driver-redesign::after, body.te5-driver-access::after { display: none; } .te5-driver-redesign .te5-mobile-head, .te5-driver-redesign .te5-screen-nav, .te5-driver-redesign .te5-card, .te5-driver-redesign .te5-banner, .te5-driver-redesign .te5-tile, .te5-driver-redesign .te5-cta { backdrop-filter: none; -webkit-backdrop-filter: none; } /* ── 2. Главная кнопка: 88 → 132px, шрифт 20 → 28, плоская заливка ────────── */ .te5-driver-redesign .te5-cta { min-height: var(--tap-primary); font-size: var(--type-action); /* градиент и свечение ОСТАВЛЕНЫ (нравятся владельцу) — из декора снят только фон страницы и стекло. Кнопка одна на экране, ей блик не мешает, а выделяет её. */ } /* 🛑 Кегль вторичной кнопки объявляется ЗДЕСЬ по той же причине, что у нуджа ниже: специфичность у `.te5-cta--secondary` и `.te5-cta` одинаковая (0,2,0), поэтому решает ПОРЯДОК. Своё объявление стояло выше `.te5-cta` — то есть значение не действовало вовсе, и вторичная кнопка рисовалась размером главной. 🛑 РЕШЕНИЕ ПЕРЕСМОТРЕНО ВЛАДЕЛЬЦЕМ 11.08.2026, и переписано, а не дополнено. 09.08 он по кадру с телефона просил «слишком большие кнопки и буквы» — кегль ушёл на ступень ленты событий (17). Сегодня, глядя на «Завершить день» рядом с «Прибыл на объект»: «почему шрифт не такой, как у „Прибыл на объект“, по размеру?.. ну оставь её [кнопку], просто шрифт внутри побольше сделай». Разница между решениями не в размере кнопки, а в том, ЧТО именно уменьшать: ГАБАРИТ остаётся вторичным (`--tap-secondary` против `--tap-primary` — кнопка ниже и светлее, иерархия читается), а ТЕКСТ обязан читаться не глядя, как на главной. Возвращать сюда `--type-ref` без нового решения владельца нельзя — это снятое. */ .te5-driver-redesign .te5-cta--secondary { min-height: var(--tap-secondary); font-size: var(--type-action); } /* Composer — не полевая CTA: 48px достаточно, иначе общая 132px-кнопка съедает клавиатуре половину мобильного окна. Правило ниже общей `.te5-cta`, потому что специфичность равная и порядок решает каскад. */ .te5-driver-redesign .te5-support-modal__send { min-height: 48px; height: 48px; padding: 0 16px; font-size: max(12px, calc(17px * var(--driver-zoom-comp, 1))); } /* 🛑 Здесь стояло правило-исключение, поднимавшее кегль кнопки возврата на экране завершения смены. Снято 11.08.2026: та же ступень стала общей для ВСЕХ вторичных кнопок (блок выше, решение владельца того же дня), а исключение, повторяющее общее правило, — мёртвый код, который читается как живой: следующий агент решит, что без него кегль просядет, и не тронет ни то, ни другое. Имя снятого класса намеренно не цитируется: рядом стоит `not in`-ассерт, и он ловит прозу так же, как код. */ /* 🛑 Кегль нуджа объявляется ЗДЕСЬ, а не рядом с остальными его свойствами выше: специфичность у `.te5-cta--nag` и `.te5-cta` одинаковая (0,2,0), поэтому решает ПОРЯДОК. Прежнее объявление стояло выше `.te5-cta` — то есть 15px не действовали вовсе, и нудж рисовался размером с главную кнопку (28px). Владелец 04.08: «включить уведомления шрифтом как всё остальное в нуджах, а то огромное». Ступень `--type-op` — та же, что у баннера-подсказки рядом. */ .te5-driver-redesign .te5-cta--nag { font-size: var(--type-op); } /* Компактная кнопка в стиле главной — для действий внутри карточек и окон («Сменить пароль» в профиле прораба): тот же градиент/подложка, что у `.te5-cta`, но габарит мелкой цели нажатия и кегль операции, а не 132px во всю ширину (владелец 03.09.2026: «не как „Сканировать QR“»). Объявлена ПОСЛЕ шкалы главной и вторичной кнопки — специфичность равная, решает порядок. */ .te5-driver-redesign .te5-cta--compact { min-height: var(--tap-small); padding: 0 18px; border-radius: 16px; font-size: var(--type-op); box-shadow: 0 10px 22px var(--driver-accent-glow); } .te5-driver-redesign .te5-cta--secondary.te5-cta--compact { box-shadow: 0 8px 18px rgba(10, 32, 68, .10); } /* 🛑 Был `--gap-safe` (28px) — вдвое больше общего шага, как защита от промаха в перчатке по соседней кнопке. Владелец 04.08 увидел это как «дырку» на фоне ровного ритма и попросил общий шаг; риск назван вслух, решение его. Рядом стоят «Обновить» и «Завершить день» — вторая необратима, поэтому защита не отменена, а осталась единственным своим носителем: мёртвой зоной внутри чека (`--gap-dead`). */ .te5-driver-redesign .te5-cta + .te5-cta { margin-top: var(--gap-card); } /* Эмодзи и текст — ОДНОЙ парой по центру, а не эмодзи у края отдельно от текста. Отменяет T18-«будто эмодзи нет»: там глиф absolute слева, из-за чего на широкой кнопке между ним и подписью зияет дыра. Симметричный паддинг больше не нужен. */ .te5-driver-redesign .te5-cta--emo { padding-left: 20px; padding-right: 20px; } .te5-driver-redesign .te5-cta .te5-tile__emo { position: static; transform: none; font-size: max(24px, calc(34px * var(--driver-zoom-comp, 1))); line-height: 1; } /* 🛑 Эмодзи ВТОРИЧНОЙ кнопки: соразмерное тексту и оптически на его уровне. Чипа здесь нет намеренно — подложка `--driver-cta-emo-bg` на белой поверхности даёт 1.28:1, то есть невидимый квадрат (замер прода 11.08.2026). Голый глиф обнажил обе беды сразу: он рисовался 34px против текста 17 — вдвое крупнее строки — и сидел выше неё. Второе НЕ раскладка: боксы центрированы (замер: расхождение центров 0.0px), выше середины сидит САМ РИСУНОК глифа, под ним пустой descent шрифта. Лечится тем же приёмом, что у чипа первичной: паддинг опускает содержимое на половину своей величины. Заказ владельца 11.08: «чтоб галочка на одном уровне, по середине, стояла с текстом». 🛑 Объявляется ПОСЛЕ правила выше — специфичность равная (0,3,0), и решает порядок. Первая редакция стояла на 30 строк выше и не действовала вовсе: замер показал те же 34px. Ровно тот класс, который в этом файле уже стоил двух правок вслепую. */ .te5-driver-redesign .te5-cta--secondary .te5-tile__emo { font-size: max(18px, calc(26px * var(--driver-zoom-comp, 1))); padding-top: 0; /* SVG набора, не эмодзи — descent-паддинг снят (PR-Z) */ } .te5-driver-redesign .te5-cta { gap: 14px; } /* ── 3. Типографика — только ссылки на ступени, ни одной своей цифры ──────── */ body.te5.te5-driver-redesign { font-size: var(--type-op); } .te5-driver-redesign .te5-banner { font-size: var(--type-op); } .te5-driver-redesign .te5-mobile-head__title { font-size: var(--type-data); } .te5-driver-redesign .te5-driver-work-row { font-size: var(--type-data); } .te5-driver-redesign .te5-driver-log-row { font-size: var(--type-ref); } .te5-driver-redesign .te5-driver-section-label { font-size: var(--type-meta); } .te5-driver-redesign .te5-driver-log-row__time { font-size: var(--type-meta); } .te5-driver-redesign .te5-cta__sub { font-size: var(--type-meta); } /* ── 4. Плоские карточки и баннеры: край вместо тени и градиента ──────────── */ .te5-driver-redesign .te5-card, .te5-driver-redesign .te5-banner { background: var(--driver-surface); border: 1px solid var(--line-soft); box-shadow: none; } /* шапка — контейнер бургера и тумблера темы, то есть цель нажатия */ /* Навбар — фон, а не элемент: обводить его нечем и незачем (см. закон рамки). Отделяется от полотна только собственной заливкой. 🛑 В ТЁМНОЙ теме это перестаёт работать, и закон там развёрнут — см. правило ниже: заливка корпуса и полотно сходятся слишком близко, отделять нечем. */ .te5-driver-redesign .te5-mobile-head { background: var(--driver-surface); border: none; box-shadow: none; } /* 🛑 ИСКЛЮЧЕНИЕ из закона рамки — только тёмная тема (TE-421, автор задачи 17.09.2026: «у карточек ниже границу видно, у неё — нет; добавить такую же светлую обводку, как у кнопок внутри неё. Светлую тему не трогать»). Замер 19.09.2026: заливка шапки rgb(56,67,82) на полотне rgb(27,32,39) — корпус не читается, тогда как бургер внутри неё обведён 0.8px. 🛑 Цвет — ТА ЖЕ пара, что у кнопок ВНУТРИ шапки (`--line-control` с запасным `--driver-card-border`, объявление выше в этом же файле), а не новое число и не соседний токен: первая редакция взяла `--te5-border` — тоже переменная, тоже «граница», но замер дал rgb(35,48,74) против rgb(133,150,183) у бургера, то есть рамка была, а совпадения не было. Три элемента одного корпуса — один набор. 🛑 Ветки ДВЕ намеренно: тема приезжает и тумблером, и системной настройкой; покрыть одну — оставить половину телефонов с прежним дефектом. */ :root[data-theme="dark"] .te5-driver-redesign .te5-mobile-head { border: 1px solid var(--line-control, var(--driver-card-border)); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .te5-driver-redesign .te5-mobile-head { border: 1px solid var(--line-control, var(--driver-card-border)); } } /* ── 5. ПОЧИНКА БАГА ПРОДА: наезд текста в «Итого по объектам» ───────────── Причина: .te5-driver-log-row__time несёт font-family:mono + white-space:nowrap, а в строке итогов он ещё и flex-column → подпись «сейчас на объекте с ДД.ММ ЧЧ:ММ:СС» имеет огромную неснижаемую ширину и выдавливает название объекта. Моноширинный ставили ради выравнивания цифр — tabular-nums даёт то же без ширины. */ .te5-driver-redesign .te5-driver-log-row__time { font-family: inherit; font-variant-numeric: tabular-nums; letter-spacing: 0; } .te5-driver-redesign .te5-driver-work-row > span:first-child { min-width: 0; } .te5-driver-redesign .te5-object-total-row .te5-driver-log-row__time { min-width: 0; } .te5-driver-redesign .te5-object-total-row .te5-cta__sub { white-space: normal; } /* 🛑 min-width:0 НЕДОСТАТОЧНО: колонка `auto` в гриде берёт ширину по nowrap-содержимому и отжимает название объекта в ноль (замер на 320px: 252 из 262). Снимаем nowrap. */ .te5-driver-redesign .te5-object-total-row .te5-driver-log-row__time { white-space: normal; } /* 🛑 КОРЕНЬ, а не кегль: обе строки — grid `minmax(0,1fr) auto` (te5.css:944 лента, driver.css:543 маршрут). Трек `auto` берёт max-content, поэтому длинная вторая колонка отжимает первую в НОЛЬ, и `min-width:0` с `white-space:normal` этого не лечат — они про содержимое, а не про трек. Замер 320px: колонки стали `0px 252px`. Тот же класс, что строка автопарка в консоли. Лечится раскладкой: длинную вторую колонку ставим ПОД первую. */ .te5-driver-redesign .te5-object-total-row { grid-template-columns: minmax(0, 1fr); } .te5-driver-redesign .te5-object-total-row .te5-driver-log-row__time { align-items: flex-start; text-align: left; } @media (max-width: 360px) { .te5-driver-redesign .te5-driver-log-row { grid-template-columns: minmax(0, 1fr); } /* 🛑 Перенос обязателен: на 320px в строке нужно 180px (время 64 + gap 12 + «Править» 104), а доступно 167 — кнопка выезжала за край строки. Ужать её нельзя, это цель нажатия; значит переносим под время. Замер прогоном всех состояний в браузере 04.08, поймано в `last` и `long`. */ .te5-driver-redesign .te5-driver-log-row__meta { min-width: 0; align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 12px; } .te5-driver-redesign .te5-driver-log-row__time { white-space: normal; } } /* ── 6. «Править» в ленте: 44 → 56px (была самая мелкая цель на экране) ───── */ .te5-driver-redesign .te5-route-event-edit { min-height: var(--tap-small); font-size: var(--type-ref); padding: 0 16px; } /* ══ ВАРИАНТ «БЕЗ ДУБЛЕЙ»: статус внутрь баннера, сверка под тап ═══════════ Требует правок разметки в driver.js (head + renderSimpleObjectRoute). На основном варианте эти правила неактивны — нужных узлов там нет. */ /* Статус — микрометка НАД названием объекта (как в мокапе владельца), а не отдельная полоса в 66px ради двух слов. Тон-классы сохранены. */ .te5-driver-redesign .te5-banner .x-status { display: inline-block; margin-bottom: 6px; padding: 2px 10px; font-size: var(--type-meta); font-weight: 700; } /* Складные блоки — нативный
, без библиотеки и без жестов: открывается обычным тапом по заголовку (полевая аудитория свайпы не читает). */ /* 🛑 ОДНА коробка, а не две склеенные. Рамка живёт на самом
, `overflow: clip` обрезает содержимое по скруглению — стыка не существует физически, поэтому зазубрин на границе нет. Прошлая версия (рамка у шапки + рамка у карточки + сужение) давала рваный шов на светлой теме. */ /* 🛑 ЗАКОН РАМКИ (решение владельца 03.08.2026): рамка — СИГНАЛ СОСТОЯНИЯ, а не оформление. Рамка есть ровно там, где она что-то сообщает: оранжевая у «не отправлено» — единственное на экране, что требует реакции водителя. Норма кричать не должна, поэтому у складных блоков, чека «Записано» и навбара контура нет: экран из пяти обведённых прямоугольников читается как форма, а не как ответ на вопрос «что дальше». Край тап-цели при этом обязан остаться различимым (WCAG 1.4.11, 3:1) — его даёт ЗАЛИВКА поверхности против фона страницы, как в grouped inset list у Apple. Замер контраста заливки к фону — в тесте, не на глаз. */ .te5-driver-redesign .x-fold { margin: 12px 0 0; border: none; border-radius: 16px; overflow: clip; background: var(--driver-surface); } .te5-driver-redesign .x-fold[open] > summary { border-bottom: 1px solid var(--line-soft); } .te5-driver-redesign .x-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap-small); padding: 0 14px; border: none; border-radius: 0; background: transparent; color: var(--te5-text); font-size: var(--type-data); font-weight: 700; cursor: pointer; list-style: none; } .te5-driver-redesign .x-fold > summary::-webkit-details-marker { display: none; } .te5-driver-redesign .x-fold > summary::after { content: "▾"; color: var(--te5-muted); font-size: var(--type-data); } .te5-driver-redesign .x-fold[open] > summary::after { content: "▴"; } .te5-driver-redesign .x-fold__peek { /* Прижимает вправо заголовок своим `margin-right: auto` — см. слой ниже. */ color: var(--te5-muted); font-size: var(--type-ref); font-weight: 400; } /* Содержимое внутри общей коробки — БЕЗ своей рамки, фона и радиуса. Иначе получается коробка в коробке и рваный шов на границе. */ .te5-driver-redesign .x-fold > .te5-card { margin: 0; border: none; border-radius: 0; background: transparent; box-shadow: none; } /* ── Смягчение: плавное раскрытие вместо рывка ───────────────────────────── ::details-content + interpolate-size — способ 2025 года анимировать height:auto без JS. Где не поддержано — просто раскрывается мгновенно, ничего не ломается. Уважает системный запрет анимаций. */ :root { interpolate-size: allow-keywords; } @media (prefers-reduced-motion: no-preference) { .te5-driver-redesign .x-fold::details-content { block-size: 0; overflow: clip; transition: block-size .22s ease, content-visibility .22s allow-discrete; } .te5-driver-redesign .x-fold[open]::details-content { block-size: auto; } .te5-driver-redesign .x-fold > summary::after { transition: transform .2s ease; } } /* ── 7. Плитки и picker (legacy-экраны, на прод-пути их нет) ──────────────── */ .te5-driver-redesign .te5-driver-actions { grid-template-columns: 1fr; gap: 12px; } .te5-driver-redesign .te5-tile { min-height: var(--tap-tile); font-size: max(17px, calc(24px * var(--driver-zoom-comp, 1))); box-shadow: none; } .te5-driver-redesign .te5-picker__grid { grid-template-columns: 1fr; } .te5-driver-redesign .te5-picker__grid .te5-tile { min-height: var(--tap-tile); font-size: max(17px, calc(24px * var(--driver-zoom-comp, 1))); } /* мёртвое правило width:44px перебивалось flex:0 0 48px — чинится flex-basis */ .te5-driver-redesign .te5-driver-actions .te5-tile:not(.te5-tile--full) .te5-tile__emo { flex-basis: 44px; } /* ФИНАЛЬНЫЙ СЛОЙ — грузится ПОСЛЕ proposed.css. Здесь: (а) правки аудита, (б) четыре платформенные фичи 2026. Размеры НИ РАЗУ не уменьшаются — всё, что аудит просил показать, выводится на виду, а не ужимается. ══════════════════════════════════════════════════════════════════════ */ body.te5-driver-redesign, body.te5-driver-access { --tap-row: 72px; /* тапабельная строка-заголовок: аудит поднял 56 → 72 */ /* Плашка карточки состояния в заготовке. Единственная величина заготовки, которой нет в шкале целей нажатия: настоящая карточка (`.x-hero`) высоту не фиксирует, она растёт от чипа и заголовка. Держим токеном, а не числом в правиле, — чтобы у неё было одно место, как у остальных плашек. */ --skel-hero: 96px; /* 🛑 Мёртвая зона под главной кнопкой: промах ВВЕРХ необратим — водитель метится в «Править», берёт выше и записывает убытие. Значение подобрано ЖИВЫМ замером расстояния до «Править», а не арифметикой на бумаге: при `align-items: center` и `min-height: 72px` padding сдвигает содержимое не один к одному. Замер 04.08 (низ кнопки → верх «Править»): 4px → 23 · 9px → 26 · 14px → 28 · 19px → 32 · 24px → 37. Норма MIL-STD-1472H — 28px «первого контакта»; взято 19px, чтобы не стоять на пороге впритык (в этом проекте уже был край 3.01 при пороге 3). 🛑 Правишь `--gap-card` или внешний margin чека — ПЕРЕМЕРЬ здесь: величина считается от них обоих. */ --gap-dead: 19px; /* Шаг между самостоятельными карточками. 14px — не вкус, а ЗАМЕР: столько между навбаром и баджем статуса, и владелец выбрал этот зазор эталоном (03.08). Один токен на все стыки — иначе они разъезжаются поодиночке, как уже случилось: было 14 / 24 / 28 / 28 на четырёх соседних стыках. */ --gap-card: 14px; /* 🛑 Замер контраста на СВЕТЛОЙ теме: приглушённый текст давал 3.5:1 на белой карточке — ниже порога WCAG AA 4.5:1 для обычного текста. Тёмная тема при этом честные 6.2:1, то есть дефект был ровно там, где .impeccable называет дневной дефолт и прямое солнце. #5b6b85 = 5.4:1. */ --te5-muted: #5b6b85; } /* ── 1. АВАРИЙНЫЙ СЛОТ ───────────────────────────────────────────────────── Раньше headBadges() рисовал очередь/карантин в #driverHead — ВНЕ тела, которое перерисовывается. Новая шапка его не описывала → решение снималось молча. Возвращаю явным контейнером над баннером: всё, что кричит, — здесь. */ .te5-driver-redesign .x-alerts { display: grid; gap: 10px; } .te5-driver-redesign .x-alerts:empty { display: none; } /* Аварийный баннер и карточка объекта стояли впритык (замер: 4px) — читались как одна слипшаяся плашка. Баннер — отдельная сущность, ему нужен воздух. */ .te5-driver-redesign .x-alerts:not(:empty) { margin-bottom: 14px; } .te5-driver-redesign .x-alert { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-control); background: var(--driver-surface-strong); font-size: var(--type-ref); font-weight: 600; line-height: 1.25; } .te5-driver-redesign .x-alert__glyph { font-size: max(17px, calc(24px * var(--driver-zoom-comp, 1))); line-height: 1; flex: none; } .te5-driver-redesign .x-alert__body { min-width: 0; flex: 1 1 auto; } .te5-driver-redesign .x-alert__sub { display: block; font-size: var(--type-meta); font-weight: 400; color: var(--te5-muted); } .te5-driver-redesign .x-alert__act { flex: none; min-height: 48px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line-control); background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; } .te5-driver-redesign .x-alert--warn { border-color: #d0902a; } .te5-driver-redesign .x-alert--info { border-color: var(--driver-accent-2); } /* ФИЧА 4 · @starting-style — баннер въезжает, а не выпрыгивает. Он вставляется в DOM живьём (сеть пропала / диспетчер сменил маршрут), поэтому обычный transition на него не действует: не с чего стартовать. Смягчение 240 мс — ниже порога, за которым урывочное внимание рвётся. */ @media (prefers-reduced-motion: no-preference) { .te5-driver-redesign .x-alert { opacity: 1; block-size: auto; overflow: clip; transition: opacity .24s ease, block-size .24s ease, transform .24s ease; } @starting-style { .te5-driver-redesign .x-alert { opacity: 0; block-size: 0; transform: translateY(-6px); } } } /* ── 2. ГЕРОЙ: единственное место, где называется объект ──────────────────── Было три (подзаголовок шапки, баннер, список маршрута) + полоса статуса в 66px ради двух слов. Осталось одно, и статус сидит меткой внутри. */ /* `position: relative` — якорь для кнопки навигатора справа (см. `.x-hero__route`). */ .te5-driver-redesign .x-hero { padding: 14px 16px; position: relative; } /* 🛑 Название объекта — НЕЙТРАЛЬНЫМ цветом, хотя баннер тонирован. Цветовой код состояний несёт метка «На объекте»; если тем же зелёным покрашено ещё и название, сигнал состояния размывается по всей карточке и перестаёт читаться как состояние (.impeccable: цвет состояния нельзя тратить на что-то, кроме состояния). */ .te5-driver-redesign .x-hero__name { font-size: var(--type-op); font-weight: 700; line-height: 1.2; color: var(--te5-text); } /* 🛑 Замер: адрес наследовал .te5-sub и рендерился в 11.5px — не просто ниже пола 16px, а ниже даже служебных 15px. Глазами это не ловится: рядом стоит 20px название, и мелкое читается как «подпись». А в состоянии «в пути» адрес — не подпись, а сама задача: по нему водитель едет. Ставлю ступень справки; ниже неё на этом экране не опускается ничего. */ .te5-driver-redesign .x-hero .te5-sub { font-size: var(--type-ref); } /* Хвост экрана: под шеллом было 44px пустоты под несуществующий футер. Забираю их в пользу контента — это не уменьшение, а удаление пустого места. */ .te5-driver-redesign .driver-shell { padding-bottom: 12px; } /* 🛑 Адрес объекта прячем ТОЛЬКО когда водитель на него уже приехал. Пока он в пути — адрес и есть задача, и убрать его нельзя. После прибытия это справка: он стоит на месте, а адрес остаётся в списке «Дальше». Замер: реальный адрес занимает две строки, то есть 52px в состоянии, где он ни разу не нужен. Правило по СОСТОЯНИЮ, а не по кеглю. */ .te5-driver-redesign .x-hero--here .te5-sub { display: none; } /* ── 3. ЧЕК ЗАПИСИ + ОТКАТ — постоянно на виду ────────────────────────────── 🛑 Отметка применяется ОПТИМИСТИЧНО (сначала рисуем, потом шлём), поэтому офлайн выглядит как успех. Единственное место, где было видно «не отправлено», пряталось внутри свёрнутой ленты — то есть ровно полевой страх водителя уехал под тап. Здесь чек всегда виден и несёт СЕРВЕРНОЕ время. «Править» справа, а не под кнопкой: промах вниз с CTA попадает в текст. */ .te5-driver-redesign .x-receipt { display: flex; align-items: center; gap: 10px; /* 🛑 Мёртвая зона 24px ДО чека, а не после: опасен промах ВВЕРХ. Водитель метится в «Править», берёт выше — и записывает убытие, то есть необратимую отметку в путевом листе. Замер показал 18px — цель попадала в горизонтальный коридор кнопки, добираю до нормы. */ /* 🛑 Снаружи — общий шаг карточек; защита от промаха ушла ВНУТРЬ, в padding-top. Иначе пришлось бы выбирать между ровным ритмом (просьба владельца) и безопасностью цели: водитель метится в «Править», берёт выше — и попадает в «Убыл с объекта», необратимую отметку. Внутренний отступ отодвигает кнопку ровно так же, не ломая внешнюю сетку. */ margin-top: var(--gap-card); /* Высота по --tap-row, а не по сумме строк: две строки в 56px читались ужатыми (замер: 38px текста на 18px воздуха = по 9px сверху и снизу). Норма — чтобы воздуха было не меньше трети блока, иначе тесно выглядит намеренно-дешёво. 72px даёт 12px сверху и снизу при тех же строках. */ min-height: var(--tap-row); /* Правый отступ был 6px — под кнопку «Править», которая сама держала поле от края. Кнопку сняли 09.08.2026, и текст чека остался прижатым к краю: 6px против 14px слева и у всех соседних карточек. Возвращаем симметрию — это не «новый дизайн», а устранение перекоса, который создало удаление. */ padding: calc(12px + var(--gap-dead) - var(--gap-card)) 14px 12px 14px; border-radius: 14px; /* 🛑 Рамка ПРОЗРАЧНАЯ, а не отсутствует: закон рамки говорит, что контур несёт состояние, и состояние «не отправлено» зажигает его через border-color. Убрать border совсем — и оранжевый контур нечем включить, а замена на outline сдвинула бы соседей. */ border: 1px solid transparent; background: var(--driver-surface); font-size: var(--type-ref); } .te5-driver-redesign .x-receipt__mark { font-size: max(14px, calc(20px * var(--driver-zoom-comp, 1))); line-height: 1; flex: none; } .te5-driver-redesign .x-receipt__text { min-width: 0; flex: 1 1 auto; line-height: 1.2; font-weight: 700; } .te5-driver-redesign .x-receipt__text b { font-variant-numeric: tabular-nums; } .te5-driver-redesign .x-receipt__sub { display: block; margin-top: 2px; font-size: var(--type-meta); font-weight: 400; line-height: 1.25; color: var(--te5-muted); } .te5-driver-redesign .x-receipt__undo { flex: none; min-height: 44px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--line-control); background: transparent; color: inherit; font: inherit; font-size: var(--type-meta); font-weight: 700; cursor: pointer; } .te5-driver-redesign .x-receipt--ok .x-receipt__mark { color: var(--te5-ok, #1f9d6b); } .te5-driver-redesign .x-receipt--pending { border-color: #d0902a; background: color-mix(in srgb, #d0902a 8%, var(--driver-surface)); } /* Чек и первый складной блок — разные вещи, но чек уже не цель нажатия целиком, поэтому здесь достаточно обычного зазора. */ /* Тот же шаг, что между складными блоками ниже: чек и блоки — самостоятельные поверхности, и разделять их по-разному значит показать группу там, где её нет. Замер до фикса (390×844): 14px после чека против 28px между блоками — «Журнал» читался оторванным. Мёртвая зона ДО чека к этому ритму не относится: у неё своя причина и свой токен (см. `.x-receipt`). */ .te5-driver-redesign .x-receipt + * { margin-top: var(--gap-card); } /* ── 4. СКЛАДНЫЕ БЛОКИ: ответ ВСЕГДА в заголовке, под тапом только детали ─── GOV.UK запрещает прятать в details то, что нужно большинству. Поэтому «Дальше» не спрятан: имя следующего объекта стоит в самом заголовке, свёрнута только остальная часть списка. Отступ между блоками задаётся ниже одним правилом — здесь его не дублируем. */ .te5-driver-redesign .x-fold > summary { min-height: var(--tap-row); /* аудит: 56 → 72 */ padding: 0 14px; gap: 12px; /* +3px слака бокса svg = 15px оптических */ } /* 🛑 Свободное место забирает ЗАГОЛОВОК, а не peek. Прижимать вправо через `margin-left: auto` у peek нельзя: когда объезжать больше нечего, `routePeek()` отдаёт пустую строку, узел не рендерится вовсе — и вместе с ним пропадает единственный auto-отступ полоски. Оставшиеся три ребёнка раскладывает `justify-content: space-between`, и счётчик встаёт ровно посередине (жалоба владельца 11.08.2026 по кадру: «когда все маршруты пройдены, бадж уезжает на середину»). Заголовок есть всегда, поэтому положение счётчика больше не зависит от того, остались ли точки. Второй auto здесь запрещён: два auto делят промежуток пополам и увели бы peek в середину. */ .te5-driver-redesign .x-fold__label { flex: none; font-weight: 700; margin-right: auto; } .te5-driver-redesign .x-fold__peek { min-width: 0; text-align: right; font-size: var(--type-ref); font-weight: 600; color: var(--te5-text); /* было muted — это ОТВЕТ, а не подпись */ /* 🛑 Замер на реальном названии («Северо-Восточная водопроводная станция») расплющил заголовок на три строки — ответ длиной в абзац перестаёт быть ответом. Две строки: узнать объект хватает, остальное открывается тапом. Демо-строка «МВК» этого не показывала — габаритный guard, проверенный удобными данными, ничего не защищает. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* ── СЧЁТЧИК ТОЧЕК МАРШРУТА ──────────────────────────────────────────────── Вторая половина ответа «куда дальше»: имя следующего объекта + сколько точек ещё впереди. Цифрой, а не словами — «ещё 1» стоило 30px из 98 и читалось дольше, чем цифра. 🛑 Отдельный узел, а НЕ часть peek. В peek стоит -webkit-line-clamp, и цифра внутри такого контейнера ведёт себя как обычный текст: срывается на вторую строку и уходит под обрез. Замер: «Ивантеевская 25а — площадка складирования» со счётчиком 12 прятала счётчик целиком — то есть он пропадал ровно там, где нужнее всего (много точек = длинный день). Роли разные, поэтому и узлы разные: имя сжимается и обрезается, счётчик не сжимается НИКОГДА. 🛑 Тон НЕЙТРАЛЬНЫЙ, хотя у Apple бейдж красный. Красный там значит «требует внимания», а у нас это уже занято оранжевым «не отправлено» — единственным, что требует реакции. Два привлекающих цвета на экране означают ноль привлекающих цветов. Маршрут — это справка, не тревога. Замер контраста: цифра на подложке 13.7:1 при пороге 4.5. */ .te5-driver-redesign .x-fold__count { flex: none; /* см. выше: не сжимается */ display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin-left: 8px; padding: 0 7px; /* Радиус ПРОПОРЦИОНАЛЬНЫЙ, а не в пикселях — так он рифмуется с соседями сам и переживёт смену размера бейджа. Замер долей на экране: кнопка «Править» рядом — 11px при 44px = 25 %; эмодзи-чип главной кнопки — 20/88 = 23 %. Наши 23 % от 26px дают 6px и попадают ровно в эту семью. Фиксированные 8px дали бы 31 % — заметно мягче соседа при том же взгляде. */ border-radius: 23%; background: var(--driver-cta-emo-bg); /* та же подложка, что у эмодзи CTA */ /* 🛑 Цвет цифры ФИКСИРОВАННЫЙ, а не var(--te5-text). Подложка одинакова в обеих темах (так задумано — это подложка эмодзи), а --te5-text в тёмной становится светлым: замер дал 1.15:1, то есть цифра пропадала целиком, и заметить это можно было только замером — на светлой всё было в порядке (13.7:1). Тот же класс, что порог подложки эмодзи: провал молчаливый и только в одной теме. */ color: #0b1930; font-size: var(--type-ref); font-weight: 700; font-variant-numeric: tabular-nums; /* цифры не пляшут при смене значения */ } /* Маркер: шеврон, а не треугольник (NN/g, n=136: caret — «the safest icon choice»). Инлайновый — обведённый путь с КРУГЛЫМИ концами И круглым стыком: строгая CSP запрещает SVG-файл и data:-URI, но узел в разметке ресурсом не считается, и только он даёт настоящее скругление апекса. Геометрия снята с эталонов ЗАМЕРОМ: SF Symbols chevron.down Regular — штрих 9.04% от кегля, апекс 88.5°, ink-аспект 1.77:1; Lucide/Tabler 2/24 = 8.3%; Linear/Geist/Octicons/Stripe 1.5/16 = 9.4%. Здесь бокс 20, штрих 2 (10%), плечи 45°, ink ровно 14×8 по центру бокса — поэтому поворот на 180° визуально не «гуляет». 🛑 Прежний вариант (квадрат 18×18, border 3px, rotate 45°) выносил краску ЗА layout-бокс на 3.73px с каждой стороны ((√2−1)/2·18): заявленный gap 10 превращался в 6.3, padding 14 — в 10.3. Отсюда и было «вплотную». */ /* 🛑 Снимаем ОБЕ формы текстовой стрелки, а не только базовую. В слое ниже объявлены `summary::after{content:"▾"}` (0,2,1) и `[open] > summary::after{content:"▴"}` (0,3,1). Снимающее правило со специфичностью базового перебивает только первое — и стрелка вылезала РОВНО в раскрытом состоянии, рядом с настоящим шевроном. Класс: снимающее правило обязано быть не слабее самого сильного из тех, что оно снимает. */ .te5-driver-redesign .x-fold > summary::after, .te5-driver-redesign .x-fold[open] > summary::after { content: none; } .te5-driver-redesign .x-fold__chev { flex: none; inline-size: 20px; block-size: 20px; fill: none; /* 🛑 НЕ --line-control: штрих похудел с 3px до 2px, а экран смотрят на солнце. Тонкой краске нужен запас контраста — --te5-muted даёт 5.4:1 на светлой. */ stroke: var(--te5-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 50%; } .te5-driver-redesign .x-fold[open] .x-fold__chev { transform: rotate(180deg); } /* Подпись кнопки в две строки («Прибыл на объект») растягивала свой блок на всю ширину, и эмодзи отъезжало к левому краю — та самая дыра T18, только по другой причине. Обе части ужимаем по содержимому. */ .te5-driver-redesign .te5-cta > span { flex: 0 1 auto; } /* Точки таймлайна — синий главного действия (правка владельца 03.08: «кружки должны быть того же синего цвета, что и кнопка»). 🛑 Прежнее решение было ОБРАТНЫМ и с причиной: кольца акцента на КАЖДОМ событии спорили с главной кнопкой — «три кнопки в ленте перетягивали взгляд с той одной, которую надо нажать», поэтому акцент оставляли только последнему. Риск назван владельцу, решение принято им. Если взгляд снова начнёт цепляться за ленту — не возвращать серый молча, а уменьшить ВЕС кольца (тоньше рамка), сохранив цвет: жалоба была про иерархию, а не про оттенок. Размер трогать нельзя: на нём стоит отступ 48px. */ .te5-driver-redesign .x-fold .te5-driver-log-row::before { border-color: var(--te5-primary); box-shadow: none; } /* 🛑 НЕ `:first-child`: первый ребёнок коробки — строка итогов, а не событие, поэтому правило не срабатывало ни разу и все точки оставались серыми. Первое событие — то, что стоит сразу за разделителем. */ .te5-driver-redesign .x-fold .x-fold__rule + .te5-driver-log-row::before { border-color: var(--driver-accent-2); } /* «Править» в ленте — вторичное действие: то же слово, что в чеке наверху, не должно выглядеть весомее самого чека. */ .te5-driver-redesign .x-fold .te5-route-event-edit { background: transparent; color: var(--te5-muted); font-weight: 600; } /* Разделитель внутри «Смены»: итоги и лента — разные вещи в одной коробке */ .te5-driver-redesign .x-fold__rule { height: 1px; margin: 8px -14px; background: var(--line-soft); } /* 🛑 А под ПОСЛЕДНЕЙ строкой итогов линий было две: её собственная черта (`.te5-driver-work-row` в te5.css) и этот разделитель сразу за ней. Глазу это читается как висячая черта «в никуда» — жалоба TE-420 с созвона 17.09.2026. Снимаем черту у строки, ЗА КОТОРОЙ идёт разделитель секции: `:last-child` тут не годится и зелёным быть не может — строка не последняя в контейнере, после неё лежат сам rule и лента отметок (замер 19.09.2026 в браузере). */ .te5-driver-redesign .x-fold .te5-driver-work-row:has(+ .x-fold__rule) { border-bottom: none; } /* Строки внутри блоков — тоже не мельче 72px по высоте касания. 🛑 Только `padding-block`. Шорткат `padding` сносил `padding-left: 48px` у строки ленты (driver.css:496), а эти 48px — зарезервированное место под точку таймлайна `::before` (absolute, left:8px). Без них синий кружок ложился прямо на название события. Правя чужой отступ, меняй ту ось, которую правишь: шорткат обнуляет и ту, о которой ты не думал. */ .te5-driver-redesign .x-fold .te5-driver-work-row, .te5-driver-redesign .x-fold .te5-driver-log-row { padding-block: 12px; } /* ── ФИЧА 1 · ::details-content + ФИЧА 2 · interpolate-size ───────────────── До сентября 2025 у
не было стилизуемой обёртки содержимого, а height:auto нельзя было анимировать — оба лечатся платформой, без JS. Симметрично: открытие и закрытие одной длительности (рывок на закрытии для урывочного внимания хуже, чем полное отсутствие анимации). */ :root { interpolate-size: allow-keywords; } @media (prefers-reduced-motion: no-preference) { .te5-driver-redesign .x-fold::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size .18s ease, opacity .18s ease, content-visibility .18s allow-discrete; } .te5-driver-redesign .x-fold[open]::details-content { block-size: auto; opacity: 1; } /* 160мс — в бюджете <=180мс и совпадает с длительностью раскрытия ниже */ .te5-driver-redesign .x-fold__chev { transition: transform .16s cubic-bezier(.4, 0, .2, 1); } } /* ── ФИЧА 3 · name= — эксклюзивный аккордеон нулём JS ─────────────────────── Открылся один блок — соседний закрылся сам. Это не украшение: оно ставит ПОТОЛОК высоте экрана, поэтому «всё крупно» и «влезает» перестают спорить. Правил не требует: атрибут name= в разметке. Стиль ниже — только маркер активного блока, чтобы взгляд после автозакрытия соседа не терялся. */ /* Раскрытый блок различается не рамкой (её нет), а поднятой ступенью поверхности и развёрнутым шевроном — оба сигнала уже есть. */ .te5-driver-redesign .x-fold[open] { box-shadow: var(--el-2, none); } /* ── 5. «Дальше» внутри открытого блока: следующая точка выделена ───────────*/ .te5-driver-redesign .x-row--next { font-weight: 700; } .te5-driver-redesign .x-row--done { color: var(--te5-muted); } /* ── 6. Фокус клавиатуры виден на обеих темах (аудит: контур терялся) ───────*/ .te5-driver-redesign .x-fold > summary:focus-visible, .te5-driver-redesign .x-receipt__undo:focus-visible, .te5-driver-redesign .x-alert__act:focus-visible { outline: 3px solid var(--driver-accent-2); outline-offset: 2px; } /* ── ПОДЛОЖКА ПОД ЭМОДЗИ ГЛАВНОЙ КНОПКИ (правка j 01.08) ──────────────────── Скруглённый квадрат цветом ХОЛСТА приложения. Токен резолвится лениво, поэтому одна декларация даёт светлый холст на светлой теме и тёмный на тёмной — дублировать в тема-блоках не нужно. */ /* 🛑 Чип СВЕТЛЫЙ в ОБЕИХ темах, а не цвет текущего холста (решение j 01.08 по живому скрину). Причина не эстетическая: глифы — цветные эмодзи, и у 🏁 «Убыл с объекта» и ▶️ «Простой закончился» крупные ЧЁРНЫЕ области. На тёмном холсте (#080e1a) они сливались с подложкой, и флаг читался как белые клетки на пустом квадрате. Светлая подложка ведёт себя одинаково в обеих темах — ровно то, подо что эмодзи и рисуют. */ body.te5-driver-redesign, body.te5-driver-access { --driver-cta-emo-bg: #dde4ee; } /* Оттенок подобран ЗАМЕРОМ против фактического среднего тона кнопки, а не на глаз: WCAG 1.4.11 требует 3:1 для границы элемента интерфейса. Чистый холст #edf3fb давал 4.20:1 и читался белым; #dde4ee — УТВЕРЖДЁН j 01.08 для ОБЕИХ тем — заметно дымчатый и с запасом к порогу. 🛑 Пороги СЧИТАНЫ ПО ОБЕИМ ТЕМАМ, и они разные: кнопка на светлой теме светлее, поэтому со светлым чипом контраст ниже. Замер 01.08: #dde4ee = 3.66:1 тёмная / 3.36:1 светлая — запас 0.36. #d4dce8 = 3.39 / 3.11 — на светлой впритык, отвергнут владельцем. #cbd4e2 = 3.14 / 2.88 — светлая уже НИЖЕ порога. Отсюда правило: правишь градиент кнопки — пересчитай чип, иначе провалится молча, и заметит это только замер, а не человек. */ /* Только ПЕРВИЧНАЯ кнопка: «Установить приложение» и «Включить уведомления» тоже несут te5-cta--emo, но стоят на светлой поверхности — там чип цвета холста растворился бы в невидимый квадрат. */ .te5-driver-redesign .te5-cta:not(.te5-cta--secondary) .te5-tile__emo { display: inline-grid; place-items: center; inline-size: 48px; block-size: 48px; flex: none; /* 23% = ровно 20/88, отношение радиуса к высоте самой кнопки → тот же характер скругления при любом размере чипа. Проценты допустимы только потому, что чип КВАДРАТНЫЙ; на широкой кнопке они дали бы эллипс. */ border-radius: 23%; background: var(--driver-cta-emo-bg); box-shadow: 0 2px 8px rgba(6, 24, 56, .18); font-size: max(18px, calc(26px * var(--driver-zoom-comp, 1))); /* Паддинга под descent эмодзи больше нет (PR-Z, j 28.09.2026: «значки по середине ровно внутри чипа»): в слоте теперь SVG набора ровно 1em×1em, и грид центрирует его сам; `.3em` сверху сдвигал значок вниз на ~4px. */ padding-top: 0; } @media (max-width: 360px) { .te5-driver-redesign .te5-cta:not(.te5-cta--secondary) .te5-tile__emo { inline-size: 42px; block-size: 42px; font-size: max(16px, calc(23px * var(--driver-zoom-comp, 1))); } } /* Непрерывные углы — кнопке И чипу ВМЕСТЕ. Порознь вышел бы squircle-чип внутри round-кнопки, то есть ровно то расхождение характера, которое просили убрать. corner-shape: Chrome/Edge 139+, Chrome Android 150 — наш парк почти весь; Safari и Firefox не поддерживают, у них @supports не срабатывает и оба элемента остаются согласованно круглыми. */ @supports (corner-shape: squircle) { /* 🛑 Плашки запросов прораба входят в ЭТОТ набор, а не только в базовые 20px (TE-410): иначе в Chrome водительская кнопка squircle-26, а соседняя синяя плашка — round-20, и «как у водителя» выполнено ровно в тех браузерах, где владелец это НЕ смотрит. */ .te5-driver-redesign .te5-cta, .te5-driver-redesign .foreman-request--compact, .te5-driver-redesign .foreman-request--detail { border-radius: 26px; corner-shape: squircle; } .te5-driver-redesign .te5-cta:not(.te5-cta--secondary) .te5-tile__emo { border-radius: 30%; corner-shape: squircle; } } /* ── Удаление перерыва: необратимо и стоит денег, поэтому оно НЕ соседствует вплотную с «Сохранить». Та же логика, что мёртвая зона под главной кнопкой: промах вниз с зелёной кнопки не должен попадать в удаление. */ .te5-driver-redesign .x-danger { margin-top: 32px; border-color: var(--te5-bad); color: var(--te5-bad); background: transparent; box-shadow: none; } .te5-driver-redesign .x-danger:active { transform: scale(.98); } /* ══════════════════════════════════════════════════════════════════════════ ПРАВКА ВРЕМЕНИ (замена четырёх степлеров, 01.08) Ход не в виджете, а в постановке: правится ОДИН момент за раз, а не четыре числа сразу. Длительность — производная и потому не редактируется; она эхо над кнопками (было — чек ПОД четырьмя степлерами, за фолдом). Два уровня, один язык: .x-span — интервал перерыва: две плитки-входа «Начало»/«Конец» .x-pad — набор одного момента цифрами (прод-класс .te5-numpad) Прибытию/убытию уровень 1 не нужен: у них одно значение, «Править» в чеке ведёт прямо на .x-pad. Один компонент, две точки входа. ЗАКОН ЛИНИИ на этих экранах (закрывает C3 и C4 аудита): цель нажатия — 2px --line-control (3.01:1 светлая / 3.46:1 тёмная) поверхность — 1px --line-soft данные — линии нет вовсе Различие «жмётся / не жмётся» КАТЕГОРИАЛЬНОЕ, а не тональное: тон дал бы максимум 1.00:1 (светлая тема) — то есть ничего. ══════════════════════════════════════════════════════════════════════════ */ body.te5-driver-redesign, body.te5-driver-access { /* Верхняя ступень шкалы: редактируемое значение — главный элемент экрана. Единственная добавка к --type-*; 32px и 38px степлера были вне шкалы. */ --type-value: max(31px, calc(44px * var(--driver-zoom-comp, 1))); /* Радиус был шестью сырыми числами (12/14/15/18/19/26) — сводим к трём. */ --r-1: 12px; /* служебное */ --r-2: 18px; /* контролы */ --r-3: 26px; /* главные кнопки */ /* 🛑 Экран правки живёт на СВОЁМ шаге, а не на полевом --gap-safe. Полевой зазор 28px защищает от необратимого промаха в перчатке (отметил не тот объект). Здесь промах обратим — это форма с «Сохранить», зато лишние 10px на каждый стык выкидывают ✓-клавишу за фолд (замер: 649px при 640). */ --gap-edit: 18px; --gap-tight: 9px; /* внутри сущности — ровно половина --gap-edit: 2:1 */ } .te5-driver-redesign .x-edit { display: flex; flex-direction: column; gap: var(--gap-edit); } /* Контекст правки — текст, не бокс. Рамку получает только то, что несёт значение или во что целятся (было: справка в боксе выше самого ответа). */ .te5-driver-redesign .x-ctx { margin: 0; font-size: var(--type-meta); font-weight: 600; color: var(--te5-muted); } /* ── УРОВЕНЬ 1 · интервал ───────────────────────────────────────────────── Начало и конец существуют как ОДИН объект: общая рамка группы и стрелка между ними. Четыре независимых блока прежнего экрана этой связи не имели. */ .te5-driver-redesign .x-span { display: flex; align-items: stretch; gap: var(--gap-tight); margin: 0; } .te5-driver-redesign .x-span__side { flex: 1 1 0; min-width: 0; min-height: var(--tap-primary); /* 132px — полевая цель, не 90 */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 4px; border: 2px solid var(--line-control); border-radius: var(--r-2); background: transparent; /* рамка работает против ХОЛСТА: заливка уронила бы её до 2.78:1 (замер аудита) */ color: var(--driver-text, inherit); font: inherit; cursor: pointer; } .te5-driver-redesign .x-span__side:active { transform: scale(.98); } .te5-driver-redesign .x-span__cap { font-size: var(--type-meta); font-weight: 700; color: var(--te5-muted); } .te5-driver-redesign .x-span__val { font-family: var(--te5-mono); font-variant-numeric: tabular-nums; font-size: var(--type-value); font-weight: 800; line-height: 1.05; /* Синий = действие. Здесь он и есть смысл плитки: это не подпись, а вход в правку. Состояния (зелёный/жёлтый/красный) не задеты. 🛑 Ступень акцента РАЗНАЯ по темам, и это замер, а не вкус: светлый #2788ff на холсте #edf3fb даёт 3.11:1 — формально проходит как large text и разваливается на солнце; #075cff = 4.73:1. На тёмной наоборот: #0f52e0 против #080e1a = 3.07:1, а #3b86ff = 5.56:1. */ color: var(--driver-accent); } :root[data-theme="dark"] .te5-driver-redesign .x-span__val { color: var(--driver-accent-2); } /* Открытый перерыв: конца ещё нет — плитка пустая и явно зовёт. */ .te5-driver-redesign .x-span__side--empty .x-span__val { color: var(--te5-muted); } .te5-driver-redesign .x-span__link { flex: none; display: flex; align-items: center; color: var(--te5-muted); } /* Итог. Не состояние → нейтральный цвет; зелёный оставлен знаку «записано». Стоит НАД кнопками: результат правки обязан быть в кадре в момент правки. */ .te5-driver-redesign .x-sum { margin: 0; font-size: var(--type-ref); line-height: 1.25; font-weight: 400; color: var(--te5-muted); } .te5-driver-redesign .x-sum b { display: block; font-size: var(--type-action); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--driver-text, inherit); } /* ── УРОВЕНЬ 2 · набор цифрами ──────────────────────────────────────────── Дисплей — ДАННЫЕ: ни рамки, ни фона. На светлой теме прежние «кнопка ±» и «поле значения» были одним и тем же белым прямоугольником (1.00:1); тут спутать нечего — рамка есть только у того, что нажимается. */ .te5-driver-redesign .x-display { display: block; padding: 2px 0 0; font-family: var(--te5-mono); font-variant-numeric: tabular-nums; font-size: max(45px, calc(64px * var(--driver-zoom-comp, 1))); font-weight: 800; line-height: 1.05; letter-spacing: 1px; text-align: center; color: var(--driver-text, inherit); } .te5-driver-redesign .x-display__sep { opacity: .5; } /* Контекст → дисплей → итог — ОДНА сущность (что набираю и что выйдет), поэтому внутри неё половинный шаг, а полный --gap-edit остаётся только до клавиатуры. Соотношение «между / внутри» = 2:1: группировка возникает из шкалы, а не из подобранных вручную 22 против 12. Замер: без этого ✓-клавиша уезжала на 656px при фолде 640. */ .te5-driver-redesign .x-edit--pad { gap: var(--gap-tight); } .te5-driver-redesign .x-edit--pad > .te5-numpad { margin-top: var(--gap-tight); } .te5-driver-redesign .x-pad { gap: 10px; } .te5-driver-redesign .x-pad .te5-numpad__key { display: grid; place-items: center; background: transparent; /* см. закон линии выше */ border: 2px solid var(--line-control); border-radius: var(--r-2); color: var(--driver-text, inherit); } /* ⌫ — не состояние, а действие ввода: красный снят, он занят состояниями. */ .te5-driver-redesign .x-pad .x-pad__del { color: var(--te5-muted); } /* ✓ = сохранить. Синий, а НЕ зелёный: белое на зелёном градиенте te5-save даёт 1.91–2.15:1 на тёмной теме (замер) — ниже любого порога; на плоском #0f52e0 — 6.36:1. Плоская заливка, без светлого конца градиента. */ .te5-driver-redesign .x-pad .x-pad__ok { background: var(--driver-accent); border-color: var(--driver-accent); color: #fff; } .te5-driver-redesign .x-pad .te5-numpad__key:focus-visible, .te5-driver-redesign .x-span__side:focus-visible, .te5-driver-redesign .x-quiet:focus-visible { outline: 3px solid var(--driver-accent-2); outline-offset: 2px; } /* ── «Сохранить» — синяя, плоская ──────────────────────────────────────── Зелёная заливка снята по замеру контраста, не по вкусу. Форма, место и подпись кнопки не меняются: привычка «жму нижнюю широкую» цела, а зелёный перестаёт означать одновременно действие и состояние. */ .te5-driver-redesign .te5-save, .te5-driver-redesign .te5-save:hover { background: var(--driver-accent); color: #fff; /* 🛑 Свечение тоже перекрасить. Замер: сменил только background — под синей кнопкой остался ЗЕЛЁНЫЙ ореол rgba(21,134,90,.2) от прежней заливки. Меняешь цвет кнопки — ищи ВСЕ носители этого цвета. */ box-shadow: 0 14px 30px var(--driver-accent-glow); } /* ── «Удалить перерыв» — красный текст, а не красная кнопка ────────────── Прежняя версия кричала наравне с «Сохранить» (28px/850, полная ширина). Зазор задан на СВОЁМ селекторе (0,2,0) и не пересекается с правилом `.te5-cta + .te5-cta` — прежние 32px проигрывали ему специфичностью и молча превращались в 18px. */ .te5-driver-redesign .x-quiet { /* Во всю ширину, как «Сохранить» (правка владельца 01.08): кнопка по контенту читалась как ссылка-хвостик, а это полноценное разрушающее действие. Отличается от главной не размером, а весом — рамка вместо заливки. */ align-self: stretch; min-height: var(--tap-small); padding: 0 22px; border: 1px solid currentColor; border-radius: var(--r-1); background: transparent; font: inherit; font-size: var(--type-ref); font-weight: 700; cursor: pointer; } .te5-driver-redesign .x-quiet.x-danger { margin-top: 22px; /* + gap 18 = 40px мёртвой зоны под «Сохранить» */ color: #c0392f; /* 4.86:1 на светлом холсте при кегле 17px */ border-color: color-mix(in srgb, #c0392f 45%, transparent); background: transparent; box-shadow: none; } :root[data-theme="dark"] .te5-driver-redesign .x-quiet.x-danger { color: #ff6f72; } /* ≤360px: ужимаем ТОЛЬКО дисплей и зазоры. Цели нажатия не трогаем — именно на узком экране их и уменьшали прежде (степлер 90→64px), то есть ухудшали ровно там, где перчатке и так теснее. */ @media (max-width: 360px) { .te5-driver-redesign .x-display { font-size: max(39px, calc(56px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign .x-pad { gap: 9px; } } /* ══════════════════════════════════════════════════════════════════════════ ПОВЕРХНОСТИ И ПАЛИТРА — светлая «тёплая нейтраль», тёмная Primer (GitHub dark dimmed), обе выбраны владельцем 03.08.2026 ══════════════════════════════════════════════════════════════════════════ Полотно уходит из голубого в тёплый серый: синий акцент на нём читается ярче, потому что перестаёт конкурировать с подтоном фона. 🛑 ЗАКОН ХОЛСТА: правишь полотно — в ТОМ ЖЕ коммите пересчитай всё, что меряется К НЕМУ. Прецедент 03.08: сдвиг полотна ради перепада поверхности (1.116 → 1.212) молча уронил `--line-control` к холсту **3.012 → 2.775**, то есть ниже порога WCAG 1.4.11 — а на этой линии держится край плиток правки времени, у которых фон прозрачный. Поймал адверсариальный разбор, не глаз и не тест. Тот же класс, что подложка эмодзи: зависимый контраст проваливается молча и только в одном месте. Числа при этом холсте (полотно #ecebe7 / поверхность #fffefb): перепад поверхность/полотно 1.18 светлая · 1.63 тёмная --line-control #6b7c99 3.54 к полотну · 4.19 к поверхности --te5-muted #57647a 5.02 к полотну · 5.93 к поверхности цифра счётчика на подложке 13.72 🛑 В ТЁМНОЙ теме перепад делается ПОДЪЁМОМ ПОВЕРХНОСТИ, а не углублением фона: полотно уже почти чёрное, и дальнейшее затемнение упирается в потолок (замер: #000 против #1d1b17 даёт максимум 1.29). Поэтому там светлеет карточка — ровно то, что называют elevated background в Material 3 и HIG. ══════════════════════════════════════════════════════════════════════════ */ body.te5-driver-redesign, body.te5-driver-access { --driver-canvas: #ecebe7; --line-control: #6b7c99; /* пересчитан к новому холсту, см. закон холста */ /* 🛑 Цвет бейджа MAX-бота живёт ЗДЕСЬ, рядом с холстом, к которому считается: он обязан быть заметен на полотне (>= 3.0) и держать белый текст (>= 4.5), а холст задаётся именно этим блоком — верхние объявления `--driver-canvas` перекрыты. Приглушён по просьбе владельца 09.08.2026 («не такой яркий»): прежний #7950f2 — S86%, этот S29% при запасах +1.20 (текст 5.70) и +1.78 (холст 4.78). */ --driver-maxbot-bg: #6d5ba4; --te5-muted: #57647a; /* 5.02 к полотну — было 4.53, впритык */ /* 🛑 Плашка скелетона — для ЗРЯЧЕГО водителя ЕДИНСТВЕННЫЙ носитель факта «идёт загрузка»: текстовое объявление лежит под .te5-visually-hidden. Значит это графика, необходимая для понимания (WCAG 1.4.11) → порог 3:1, а не «на глаз». 🛑 Мерить надо ХУДШИЙ кадр пульса, а не базовый цвет: te5pulse (opacity .5↔1) при заливке .16 давал в нижней точке 1.14:1 — половину цикла плашки просто нет. Отсюда сужённый driverSkelPulse (.8↔1) и эта непрозрачность. Замер 06.08 к ЭТОМУ холсту (#ecebe7): пик 4.58:1, дно 3.18:1. Токен живёт здесь, а не в верхнем слое файла: там холст #edf3fb, который перекрыт законом холста, и расчёт к нему был бы расчётом к мёртвому фону. */ --driver-skel-bg: rgba(31, 66, 120, .76); /* 🛑 ЗАТЕМНЕНИЕ — ОДНО НА ПРИЛОЖЕНИЕ ВОДИТЕЛЯ, и токен здесь именно поэтому. До 09.08.2026 значение было продублировано в двух правилах и разошлось: накладка меню гасила экран на .45, а окно подтверждения — на .72. Владелец увидел это на проде и описал разницу точно: «Выйти не затемняет, а прямо чёрный — хочу размытие как на профиле». При .72 фон перестаёт читаться совсем, и размытие под ним невидимо: платим GPU за эффект, которого не видно. Токен один, поэтому «сделать темнее» физически нельзя сделать в одном месте из двух. 🛑 Не зависит от темы намеренно: это не цвет поверхности, а глубина сцены — в тёмной теме экран под окном и так тёмный, второе значение только рассинхронится. Живой замер: `tests/e2e/browser/no-shift-menu-metrics.mjs`. */ --driver-scrim: rgba(2, 7, 15, .45); /* 🛑 Размытие накладки — ТОЖЕ одно на приложение, и по той же причине, что тон выше. Плотность свели токеном 09.08, а размытие оставили литералом только у окна — и оно разъехалось молча: у накладки меню его не оказалось вовсе, то есть под меню ФИО, номер путевого и адреса читались. Заказ владельца 10.08.2026 по кадру «Профиля»: «на все модалки, что открываются на экране водилы, как раз такой блюр и надо». Пинит `test_menu_blurs_the_background_exactly_like_the_modal`. */ --driver-scrim-blur: 18px; background: var(--driver-canvas); } /* --te5-bg читают theme.js (meta[theme-color]) и te5.css (html{background}), и он ОБЯЗАН равняться холсту body — иначе шов под статус-баром и при оттяжке скролла. Кастом-проперти не наследуется body → html, поэтому :root. */ :root:has(body.te5-driver-redesign), :root:has(body.te5-driver-access) { --te5-bg: #ecebe7; } .te5-driver-redesign .x-hero, .te5-driver-redesign .x-receipt, .te5-driver-redesign .te5-mobile-head, .te5-driver-redesign .x-fold { background: #fffefb; box-shadow: 0 1px 1px rgba(46, 42, 34, .07), 0 2px 6px rgba(46, 42, 34, .06); } /* ── Тёмная тема ────────────────────────────────────────────────────────── */ :root[data-theme="dark"] body.te5-driver-redesign, :root[data-theme="dark"] body.te5-driver-access { --driver-canvas: #1b2027; --driver-skel-bg: rgba(142, 178, 232, .68); /* к #1b2027: пик 4.25:1, дно 3.22:1 */ /* 🛑 В тёмной теме коридор УЗКИЙ и пороги тянут в разные стороны: белый текст >= 4.5 требует цвет темнее, заметность на полотне >= 3.0 — светлее. Взята точка максимального МИНИМАЛЬНОГО запаса (перебор по светлоте при S34%): текст 4.86, полотно 3.37, худший запас +0.36. Соседний #7360a8 давал +0.09 — впритык, и следующая правка холста уронила бы бейдж молча. */ --driver-maxbot-bg: #7965b3; } :root[data-theme="dark"]:has(body.te5-driver-redesign), :root[data-theme="dark"]:has(body.te5-driver-access) { --te5-bg: #1b2027; } :root[data-theme="dark"] .te5-driver-redesign .x-hero, :root[data-theme="dark"] .te5-driver-redesign .x-receipt, :root[data-theme="dark"] .te5-driver-redesign .te5-mobile-head, :root[data-theme="dark"] .te5-driver-redesign .x-fold { background: #384352; /* перепад 1.63 к полотну */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); /* тень на #1b2027 не видна */ } /* 🛑 Это НЕ запасной путь, а ОСНОВНОЙ: `theme.js` ставит `data-theme` только после нажатия тумблера, поэтому водитель, просто держащий телефон в тёмной теме, живёт здесь. Первая редакция палитры Primer завезла сюда холст и карточку, но забыла линии и приглушённый текст — они падали на объявления ВЫШЕ по файлу (старое `#75849b` из блока 121 и вовсе СВЕТЛОЕ `#6b7c99`), и на новой карточке давали 2.64 при пороге 4.5 и 2.37 при пороге 3. До смены палитры было 3.35 и 3.01 — то есть «улучшение» ухудшило экран ровно там, где его не мерили. Набор токенов обязан совпадать с тумблерной веткой; тождество пинит `test_both_dark_delivery_paths_declare_the_same_palette`. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.te5-driver-redesign, :root:not([data-theme="light"]) body.te5-driver-access { --driver-canvas: #1b2027; --driver-surface: #384352; --driver-surface-strong: #455366; --driver-btn-primary-fg: #f7f9fd; /* тождество с тумблерной веткой */ --driver-link-fg: #8cbcff; /* тождество с тумблерной веткой */ --pin-yandex: #ff8a6b; /* тождество с тумблерной веткой */ --driver-iconbtn-bg: #3e4650; /* тождество с тумблерной веткой */ --line-control: #8596b7; --te5-muted: #a7b3c8; --driver-text: #eef3fb; --driver-text-soft: #aebcd3; --driver-skel-bg: rgba(142, 178, 232, .68); /* тождество с тумблерной веткой */ --driver-maxbot-bg: #7965b3; /* тождество с тумблерной веткой */ /* 🛑 СВЕДЕНО 09.08.2026 по решению владельца («новый, старый не нужен»). До этого шесть токенов ниже здесь НЕ объявлялись, и системная ветка — та, по которой тему видит большинство, — брала их из блока СНЯТОЙ палитры вверху файла: акцент #1265ff вместо #0f52e0 давал контраст текста кнопки 4.60 при пороге 4.5 против 6.03 у тумблерной, плюс приезжала чужая тень и рамка. Держать значения ЗДЕСЬ, а не надеяться на верхний слой: он остался от прежней палитры целиком. */ --line-soft: #23304a; --driver-card-border: var(--line-soft); --driver-shadow: none; --driver-accent: #0f52e0; /* синий из мокапов владельца */ --driver-accent-2: #3b86ff; --driver-accent-glow: rgba(28, 96, 232, .30); --te5-border: var(--driver-card-border); --te5-card: var(--driver-surface); --te5-primary: var(--driver-accent-2); --te5-on-primary: #ffffff; /* тождество с тумблерной веткой */ } :root:not([data-theme="light"]):has(body.te5-driver-redesign), :root:not([data-theme="light"]):has(body.te5-driver-access) { --te5-bg: #1b2027; } :root:not([data-theme="light"]) .te5-driver-redesign .x-hero, :root:not([data-theme="light"]) .te5-driver-redesign .x-receipt, :root:not([data-theme="light"]) .te5-driver-redesign .te5-mobile-head, :root:not([data-theme="light"]) .te5-driver-redesign .x-fold { background: #384352; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); } } /* Зазор между складными блоками — ПОЛЕВОЙ, а не декоративный: обе шапки это цели нажатия 72px, и после отказа от группировки зазор остался единственным, что их разделяет. 10px против нормы 28px — ровно тот случай «зазоры нарушены сильнее, чем высота кнопок». */ .te5-driver-redesign .x-fold + .x-fold { margin-top: var(--gap-card); } /* 🛑 Раскрытое состояние НЕ обещает того, чего нет: токен --el-2 в проекте не определён ни разу, и `box-shadow: var(--el-2, none)` резолвился в none — комментарий обещал «поднятую ступень», а не происходило ничего. Раскрытый блок различается шевроном и самим содержимым; этого достаточно. */ /* 🛑 box-shadow из transition убран: тень растрируется на CPU, и её анимация репейнтит КАЖДЫЙ кадр нажатия — на дешёвом Android это заметно. Статические тени остаются, приподнятие делает transform. */ .te5-driver-redesign .te5-cta, .te5-driver-redesign .te5-tile { transition: transform .16s ease, filter .16s ease; } /* 🛑 Ховера на экране водителя быть не должно: устройство тач-only, и после тапа ободок ЗАЛИПАЕТ до касания в другом месте — это выглядит как лишняя рамка ровно там, где мы рамки убирали. */ @media (hover: none) { .te5-driver-redesign .te5-cta:hover, .te5-driver-redesign .te5-tile:hover, .te5-driver-redesign .te5-btn:hover { filter: none; transform: none; } } /* 🛑 Кнопка, запертая отказом в геолокации, приглушается ПО `aria-disabled`, а не по `disabled`, и это несущее различие: `disabled` не пускает событие клика вовсе, то есть запрет становится немым — тап не даёт ничего, и водитель читает это как «приложение зависло» (прод-жалоба 09.08.2026). Здесь тап доходит до обработчика, называет причину и заново пробует разрешение. Значения те же, что у `:disabled` в `te5.css`, чтобы выключенность выглядела одинаково независимо от способа. */ .te5-driver-redesign .te5-cta[aria-disabled="true"], .te5-driver-redesign .te5-tile[aria-disabled="true"], .te5-driver-redesign .te5-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; } /* ---------- скелетон холодного старта ---------- Габариты ПОВТОРЯЮТ реальную раскладку (CTA 88px, плитки 88px в два столбца с gap 12px): иначе подмена скелетона на контент дёргает экран, и лечение выглядит хуже болезни. Пульс наследуется от .te5-skel — он на `opacity`, то есть композитится GPU; свой second-анимации не заводим (te5pulse уже занял это свойство, вторая молча съела бы первую). 🛑 prefers-reduced-motion отдельным guard'ом НЕ нужен: блок выше гасит анимации по `.te5-driver-redesign *`, и скелетон под него попадает. */ /* 🛑 Пульс сужён 0.5↔1 → 0.8↔1 и ЗАМЕНЯЕТ te5pulse, а не накладывается: две анимации на одно свойство — вторая молча съедает первую. Причина сужения не косметическая: te5pulse половину цикла ронял контраст плашки до 1.14:1, то есть скелетон переставал существовать ровно тогда, когда на него смотрят. */ @keyframes driverSkelPulse { 0%, 100% { opacity: .8; } 50% { opacity: 1; } } .te5-driver-redesign .te5-skel { background: var(--driver-skel-bg); border-radius: 12px; animation: driverSkelPulse 1.4s ease-in-out infinite; } /* 🛑 `.te5-driver-skel__status`, `__label`, `__grid`, `__tile` СНЯТЫ 11.08.2026 вместе с прежней формой скелетона (метка + четыре плитки в два столбца — она описывала picker, которого на главном экране нет с июля). Ни один эмитент их больше не печатает: форма живёт в `driver.html` и в `coldStartSkeletonHtml()`, и оба списка пинятся тестом на совпадение. Правила удалены, а не оставлены «на всякий случай»: мёртвый селектор рядом с живыми читается как действующая часть формы. */ /* ---------- заготовка ДО загрузки бандла (решение владельца 11.08.2026) ---------- Разметка живёт в `driver.html`, потому что показать её надо РАНЬШЕ, чем исполнится `driver.js`: до этого момента экран рисует только сервер. Выбор между «скелетон» и «смены нет» делает CSS по data-атрибутам оболочки — их подставляет сервер, и он единственный, кто в этот момент знает ответ. Признак один — `data-waybill-id` (токенная оболочка с `data-token` снята 04.09.2026). 🛑 Скелетон по умолчанию СКРЫТ, а не показан: пустой атрибут означает «смены нет», и там заготовка-обманка была бы новым дефектом вместо старого. */ .te5-driver-redesign .x-boot--skeleton { display: none; } /* 🛑 `data-skeleton="off"` обязан выключать и заготовку — иначе рубильник, ради которого писался `resolve_skeleton_mode` (сравнение вариантов на живом стенде без выкатки, `?skeleton=off`, и настройка на проде), молча перестаёт выключать. Условие продублировано инлайном в оболочке — там же и та же причина. */ .te5-driver-redesign .driver-shell[data-waybill-id]:not([data-waybill-id=""]):not([data-skeleton="off"]) .x-boot--skeleton { display: block; } .te5-driver-redesign .driver-shell[data-waybill-id]:not([data-waybill-id=""]) .x-boot--empty { display: none; } /* 🛑 Габариты берутся ИЗ ТЕХ ЖЕ ТОКЕНОВ, что у настоящих элементов, а не числами. Прежняя редакция держала здесь `height: 88px` — столько кнопка занимала в июле; к августу шкала выросла до `--tap-primary` (132px по умолчанию), и скелетон разошёлся с экраном на 44px, то есть подмена дёргала раскладку ровно так, как заготовка должна была предотвращать. Число живёт в одном месте — в шкале; скелетон обязан ссылаться. */ .te5-driver-redesign .te5-driver-skel__cta { height: var(--tap-primary); margin-bottom: var(--gap-card); border-radius: 26px; } /* Форма повторяет НЫНЕШНИЙ экран: карточка состояния, главная кнопка, вторичная и две складные полоски. Прежняя (метка + четыре плитки в два столбца) описывала picker, которого на главном экране давно нет: заготовка обязана быть похожа на то, что реально появится, иначе она сама и есть «лишнее неправильное». 🛑 КАЖДАЯ высота ссылается на токен ТОГО элемента, который её сменит, — иначе заготовка расходится с экраном молча. Ревью нашло две таких: полоска брала `--tap-small` (56) при настоящей `--tap-row` (72), а карточка состояния держала хардкод 96px — ту же форму дефекта, ради которой остальные плашки и переводили на шкалу. */ .te5-driver-redesign .te5-driver-skel__hero { /* Настоящая карточка состояния (`.x-hero`) высоты не фиксирует — она растёт от чипа и заголовка. Поэтому здесь единственная величина, которой нет в шкале: она объявлена токеном рядом с остальными и живёт в одном месте, а не числом внутри правила. */ height: var(--skel-hero); margin-bottom: var(--gap-card); border-radius: 16px; } .te5-driver-redesign .te5-driver-skel__cta--second { height: var(--tap-secondary); } .te5-driver-redesign .te5-driver-skel__strip { /* Складная полоска — `--tap-row`, как `.x-fold > summary`, а НЕ `--tap-small`. */ height: var(--tap-row); margin-top: var(--gap-card); margin-bottom: 0; border-radius: 16px; } /* ══════════════════════════════════════════════════════════════════════════ НАВБАР ПРИЖАТ К ВЕРХУ, МЕНЮ ОТКРЫВАЕТСЯ ПОВЕРХ (заказ владельца 07.08.2026) До этого шапка уезжала при прокрутке, а меню лежало в потоке и раздвигало экран: открытие толкало вниз баннеры, nag и всё тело. Консоль этот приём уже несёт (`te5.css` — `.te5-nav` абсолютом под липкой шапкой), поэтому здесь повторяется он же, а не изобретается второй. 🛑 Липким делается САМ `#driverHead`, а не `.te5-mobile-head`: sticky зажат родителем, и на шапке внутри шапки залипания хватило бы на её же высоту. Отсюда и вынос баннеров в соседний слот (`driver.js::badgesSlot`) — решение владельца «липнет только навбар» иначе невыполнимо механически. ══════════════════════════════════════════════════════════════════════════ */ .te5-driver-redesign #driverHead { position: sticky; top: 0; z-index: 5; /* Шапка забирает верхний отступ оболочки себе. При голом `top: 0` над ней осталась бы полоса `max(18px, env(safe-area-inset-top))`, сквозь которую видно уезжающие строки — на телефоне с вырезом она ещё и выше. Визуально отступ на месте, он просто внутри шапки, и его закрывает её фон. */ margin-top: calc(-1 * var(--driver-shell-top)); padding-top: var(--driver-shell-top); /* Непрозрачный фон обязателен: NN/g даёт это отдельным правилом — липкая шапка обязана читаться поверх ЛЮБОГО содержимого. Цвет полотна, а не карточки: карточку рисует сама `.te5-mobile-head` внутри. */ background: var(--driver-canvas); /* 🛑 Снизу фон повторяет ФОРМУ карточки, а не остаётся прямоугольником (владелец 14.09.2026, TE-407: «будто там фантомный угол есть, который раскрашивается в бежевый… чтоб плашка закрывала только по своей ширине»). Замер показал причину дословно: фон 0-радиуса совпадает с карточкой по бокам и низу, поэтому в её скруглениях виден бежевый угол, а уезжающая под шапку карточка читается как обрезанная. Прозрачным фон при этом делать НЕЛЬЗЯ — сквозь липкую шапку стало бы видно содержимое, это соседний инвариант того же файла. Верх остаётся прямым: там полоса `safe-area`, и её скругление открыло бы контент в вырезе. */ border-bottom-left-radius: var(--driver-head-radius); border-bottom-right-radius: var(--driver-head-radius); } /* Навбар и меню — над затемнением, внутри контекста наложения шапки. 🛑 Корпус шапки обязан лежать НАД панелью (а не наоборот, как было до 08.08): панель уезжает под него, и при обратном порядке она накрыла бы бургер с тумблером темы — то есть закрыть меню стало бы нечем. */ .te5-driver-redesign #driverHead .te5-mobile-head, .te5-driver-redesign #driverHead .te5-screen-nav { z-index: 3; } /* ── Панель ВЫТЕКАЕТ из шапки (заказ владельца 08.08.2026 по кадру Codex) ────── «Он как бы вытекает один из другого… чтоб не сильно слева и справа было обрезано». Разобрано на три механических признака: панель уходит ПОД корпус, ширина панели отличается от корпуса, раскрытие идёт сверху вниз. Числа взяты из замера живого прода 08.08 (390 px, тёмная тема), не из головы: боковой отступ оболочки 12 px, радиус корпуса 19 px, зазор до правки 0 px, ширины совпадали ровно. Отсюда заезд 18 px — чуть меньше радиуса корпуса. 🛑 Признак ширины ПЕРЕВЁРНУТ 09.08.2026. С референса он был снят как «панель ШИРЕ корпуса», и здесь стоял выступ 6 px наружу; владелец посмотрел на своём телефоне и попросил обратное — панель У́ЖЕ корпуса. Переменной `--driver-menu-flare` больше нет, возвращать её не нужно: экран важнее референса. */ .te5-driver-redesign .te5-mobile-menu { --driver-menu-tuck: 18px; /* насколько панель уходит под корпус шапки */ /* 🛑 ОТСТУП ВНУТРЬ, не выступ. Прежняя редакция выводила из референса Codex признак «панель ШИРЕ корпуса» и делала выступ 6px наружу — владелец посмотрел на живом экране 08.08.2026 и решил обратное: «она у тебя шире чем навбар, как так? сделай чтоб уже была». Признак снят с референса верно, но экран важнее референса. Не возвращать выступ. */ --driver-menu-inset: 10px; /* насколько панель у́же корпуса с каждой стороны */ --driver-menu-radius: 22px; /* нижние углы — как у корпуса шапки */ position: absolute; /* Заезд под корпус шапки. Проценты считаются от высоты `#driverHead` (90px при замере 390×844), то есть ровно от нижней кромки корпуса — заезд получается тем самым, что задан. */ top: calc(100% - var(--driver-menu-tuck)); left: var(--driver-menu-inset); right: var(--driver-menu-inset); z-index: 2; margin: 0; /* 🛑 Заезд обязан быть скомпенсирован ТЕМ ЖЕ значением: без этого первый пункт оказывается под корпусом шапки и физически недоступен для тапа. Оба свойства считаются от одной переменной, чтобы «подвинуть панель глубже» нельзя было, не подвинув содержимое. */ padding-top: var(--driver-menu-tuck); /* Верх мельче низа: скруглённые «плечи» выходят из-под корпуса, а не приставлены к нему прямоугольником. */ border-radius: 12px 12px var(--driver-menu-radius) var(--driver-menu-radius); /* Низкий вьюпорт (телефон в ландшафте) не должен прятать «Выйти». Заезд вверх добавил панели ровно столько же доступной высоты. */ max-height: calc(100dvh - 100% + var(--driver-menu-tuck)); overflow-y: auto; } /* Узкий экран: корпус шапки там скругляется мельче (19px) — панель следует за ним, иначе её нижние углы разъезжаются с верхними. Блок стоит ПОСЛЕ объявления по умолчанию намеренно: при равной специфичности выигрывает объявленное позже. */ @media (max-width: 390px) { .te5-driver-redesign .te5-mobile-menu { --driver-menu-radius: 19px; } } /* Раскрытие сверху вниз. `clip-path` выбран не ради красоты: он открывает панель, не трогая раскладку, поэтому не двигает содержимое — а уход от сдвига экрана и был исходным заказом. Прозрачность стартует не с нуля: панель должна выглядеть выезжающей из-под шапки, а не проявляющейся из пустоты. */ @keyframes driverMenuPour { from { clip-path: inset(0 0 100% 0); transform: translateY(-4px); opacity: .55; } to { clip-path: inset(0 0 0 0); transform: none; opacity: 1; } } @keyframes driverScrimFade { from { opacity: 0; } to { opacity: 1; } } /* 🛑 Под guard'ом системной настройки: у части людей движение интерфейса вызывает тошноту и головокружение (WCAG 2.3.3), а водитель смотрит в экран на ходу. */ @media (prefers-reduced-motion: no-preference) { .te5-driver-redesign .te5-mobile-menu { animation: driverMenuPour 260ms cubic-bezier(.22, .68, .32, 1); } .te5-driver-redesign .x-scrim { animation: driverScrimFade 200ms ease-out; } } /* Затемнение. Живёт ВНУТРИ шапки: `.driver-shell` создаёт свой контекст наложения, и слой из body оказался бы поверх всей оболочки, включая меню. 🛑 `touch-action: none` — основной рубеж против прокрутки фона: на iOS `overflow: hidden` на теле тач-скролл не держит. Приём с `position: fixed` на теле и восстановлением позиции намеренно не берём — он лечит прокрутку ценой потери места на странице. */ /* 🛑 Цвет затемнения — ОДИН на приложение водителя, и с 09.08.2026 это ТОКЕН, а не повторённое значение. Прежняя редакция говорила «отличаемся от модалки только плотностью» — так и вышло: плотности разъехались (.45 против .72), экран гас по-разному в зависимости от того, открыл водитель меню или окно, и владелец поймал это на проде. Общий токен делает такое расхождение невыразимым. */ .te5-driver-redesign .x-scrim { position: fixed; inset: 0; z-index: 0; touch-action: none; background: var(--driver-scrim); /* Размытие — из того же токена, что у окна: под меню лежат ФИО, номер путевого и адреса объектов, то есть ровно то, что под окном профиля. Раньше его здесь не было вовсе, и накладка гасила экран, оставляя текст читаемым. */ backdrop-filter: blur(var(--driver-scrim-blur)); -webkit-backdrop-filter: blur(var(--driver-scrim-blur)); } /* Десктопная страховка к тому же: колесо мыши фон под меню не прокручивает. `scrollbar-gutter: stable` объявлен глобально, поэтому страница не дёрнется. */ body:has(#driverMenu:not([hidden])) { overflow: hidden; } /* ══════════════════════════════════════════════════════════════════════ Своя точка водителя: форма «Новая точка», крестик снятия, вход в блоке «Маршрут» (заказ владельца 09.08.2026 по кадрам с телефона). ══════════════════════════════════════════════════════════════════════ */ /* Поля этой формы набирают в машине, часто в перчатке. Базовые 38px/14px в `te5.css` писались под консоль на мыши: у водителя это ниже служебного пола кегля (15px) и вдвое ниже строки-цели. Габарит берём из шкалы `--tap-row`, а не своим числом — иначе поле тихо выпадет из-под общего гейта размеров. 🛑 Правило объявлено ПОСЛЕ `.te5-driver-redesign .te5-input` (там задаётся фон и рамка при равной специфичности 0,2,0) — порядок и решает. */ .te5-driver-redesign .te5-form .te5-input { height: auto; min-height: var(--tap-row); padding: 0 16px; border-radius: 14px; font-size: var(--type-op); } /* Пометка стоит у НЕОБЯЗАТЕЛЬНОГО поля: обязательна здесь пара «название или адрес», по отдельности не обязано ни одно, поэтому звёздочка соврала бы, а легенду «* обязательно» на полевом экране никто читать не будет. Регистр обычный — метка рядом капсом, и повтор капса читался бы как часть названия. */ .te5-form__optional { margin-left: 8px; font-size: var(--type-meta); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--driver-text-soft); } .te5-driver-redesign .x-op-suggest-wrap { position: relative; z-index: 4; } .te5-driver-redesign .x-op-suggestions { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20; max-height: min(360px, 42vh); overflow-y: auto; border: 1px solid var(--driver-card-border); border-radius: 14px; background: var(--driver-surface); box-shadow: 0 18px 38px rgba(15, 23, 42, .20); } .te5-driver-redesign .x-op-suggestions[hidden] { display: none; } .te5-driver-redesign .x-op-suggestion { display: block; width: 100%; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--driver-card-border); background: transparent; color: var(--driver-text); text-align: left; } .te5-driver-redesign .x-op-suggestion:last-child { border-bottom: 0; } .te5-driver-redesign .x-op-suggestion:active, .te5-driver-redesign .x-op-suggestion:focus-visible { background: var(--driver-surface-strong); outline: none; } /* Строка подсказки одна: вторая (адрес под названием) снята вместе с полем «Название» — подпись площадки даёт `objectLabel`, и второй строкой оказался бы либо её дубль, либо то самое название, которое с экранов и убрали. Правило под неё удалено намеренно: мёртвый селектор читается как «так и задумано» и переживает правку молча. */ .te5-driver-redesign .x-op-suggestion__name { display: block; overflow: hidden; text-overflow: ellipsis; font-size: max(12px, calc(17px * var(--driver-zoom-comp, 1))); font-weight: 750; white-space: nowrap; } /* Адрес DaData длинный («г Москва, ул 2-я Вольская, д 30 стр 305»): обрезка съела бы номер дома — ровно то, по чему водитель выбирает. Переносим строку. */ .te5-driver-redesign .x-op-suggestion--address .x-op-suggestion__name { white-space: normal; font-weight: 600; } /* Пометка строки, подменившей подсказку DaData: объясняет, почему рядом две строки. Слово приходит из `OWN_POINT_LABELS`, цвет тот же, что у подписей формы в обеих темах. */ .te5-driver-redesign .x-op-suggestion__mark { display: block; margin-top: 2px; color: var(--te5-muted); font-size: max(11px, calc(14px * var(--driver-zoom-comp, 1))); font-weight: 600; } /* Карта в форме своей точки (TE-441): место — булавкой, а не ссылкой из Яндекс.Карт. 🛑 `isolation: isolate`: контролы Leaflet живут на z-index 1000 и без своего контекста наложения легли бы поверх липкой шапки водителя. */ .te5-driver-redesign .x-op-map { height: 240px; border: 1px solid var(--driver-card-border); border-radius: 14px; overflow: hidden; isolation: isolate; } .te5-driver-redesign .x-op-map[hidden], .te5-driver-redesign .x-op-map-wrap[hidden] { display: none; } /* Кнопка «Карта» под адресом: нейтральная вторичная во всю ширину, ниже шкалы вторичной — рядом главная «Добавить в маршрут», спорить с ней она не должна (j 30.09.2026). Правило ниже `.te5-cta--secondary`: специфичность равная. */ .te5-driver-redesign .x-op-map-open { min-height: 56px; margin: 10px 0 0 !important; border-radius: 14px; font-size: max(12px, calc(17px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign .x-op-map__hint[hidden] { display: none; } /* «Не нашли на карте» — под поиском, поверх карты. */ .te5-driver-redesign .x-op-map-note { margin-top: 6px; color: var(--driver-text-soft); font-size: max(11px, calc(15px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign .x-op-map-note[hidden] { display: none; } .te5-driver-redesign .x-op-map-open[hidden] { display: none; } /* 🛑 Карта открывается слоем выше липкой шапки (5) и меню (30). */ .te5-driver-redesign .x-op-map-wrap { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--driver-surface); } .te5-driver-redesign .x-op-map-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; background: var(--driver-surface); box-shadow: 0 2px 8px rgba(15, 23, 42, .15); } .te5-driver-redesign .x-op-map-search { flex: 1; min-width: 0; } .te5-driver-redesign .x-op-map-wrap .x-op-map { flex: 1; height: auto; border: 0; border-radius: 0; } .te5-driver-redesign .x-op-map__full { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--driver-card-border); border-radius: 12px; background: var(--driver-surface); color: var(--driver-text); } /* Адрес, подставленный по точке на карте, вспыхивает: водитель видит, что поле сменилось. */ .te5-driver-redesign .x-op-field--filled { border-color: var(--driver-accent); box-shadow: 0 0 0 3px var(--driver-chip-info-bg, rgba(37, 99, 235, .2)); transition: box-shadow .3s, border-color .3s; } .te5-driver-redesign .x-op-map__hint { margin-top: 6px; color: var(--driver-text-soft); font-size: max(11px, calc(15px * var(--driver-zoom-comp, 1))); } /* Булавка рисуется псевдоэлементом: собственный `transform` у значка перебил бы тот, которым Leaflet ставит его на карту. */ .x-op-pin::before { content: ""; position: absolute; left: 3px; top: 0; box-sizing: border-box; width: 22px; height: 22px; border: 3px solid var(--driver-surface, #fff); border-radius: 50% 50% 50% 0; background: var(--driver-accent, #2563eb); box-shadow: 0 2px 6px rgba(15, 23, 42, .35); transform: rotate(-45deg); } /* Строка маршрута со снятием: крестик | название | статус. Своя раскладка нужна потому, что базовый ряд двухколоночный, а его правило `> :nth-child(n+3)` увело бы статус на всю ширину — под заголовок. */ .te5-driver-redesign .x-route-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; /* 🛑 Разделитель между точками — УКОРОЧЕННЫЙ, то есть собственная граница строки в пределах отступов тела карточки. Растяжки здесь быть не должно. Прежняя редакция (09.09.2026) тянула его к краям отрицательным полем по просьбе владельца «полоска была во всю ширину»; 14.09.2026 он посмотрел на список целиком и решение ПЕРЕВЕРНУЛ (TE-405): «длинный между точками, короткий в конце — перепутано». Полная ширина уехала на замыкающую линию — `.x-route-add`, там же и разбор. Держит `test_the_short_line_separates_points_and_the_full_width_one_closes_the_list`. */ } /* 🛑 Под последней точкой линия ОДНА. Дубль складывали два носителя: `border-bottom` строки и `border-top` кнопки «Новая точка» в четырёх пикселях под ней — вместе они читались как одна размытая полоса (владелец: «она дубль, её не надо показывать»). Линию оставляем КНОПКЕ: она отделяет действие от списка, тогда как граница строки исчезает вместе с последней точкой. На ПУСТОМ списке и её нет — там над кнопкой уже линия шапки складки (правило `.x-route-add:first-child` ниже, 07.10.2026). */ .te5-driver-redesign .x-route-row:last-of-type { border-bottom: none; } .te5-driver-redesign .x-route-row > :nth-child(n+3) { grid-column: auto; } /* Правило для `.x-arrival-confirm` в строке маршрута СНЯТО вместе с самой кнопкой (TE-408, 14.09.2026): разметка её больше не выпускает, и оставленный стиль читался бы следующим как признак живого элемента. Сама кнопка жива на главном экране — `confirmArrivalCta`, и одевает её там общий набор `.te5-cta--secondary`. */ .te5-driver-redesign .x-arrival-details { display: block; width: 100%; min-height: var(--tap-small); padding: 0; border: 0; background: none; color: var(--driver-link-fg); font: inherit; text-align: left; text-decoration: underline; cursor: pointer; } .te5-driver-redesign .x-arrival-details-screen { display: grid; gap: 12px; } .te5-driver-redesign .x-arrival-details-screen .te5-form__label { margin-top: 12px; } .te5-driver-redesign .x-arrival-details-screen__status { font-weight: 750; } .te5-driver-redesign .x-arrival-details-screen__heading { margin: 8px 2px 0; } .te5-driver-redesign .x-arrival-contact > .te5-card__body { display: grid; gap: 8px; } .te5-driver-redesign .x-arrival-contact .te5-chip { margin-left: 8px; } /* «Построить маршрут» в навигатор (TE-372) — та же полка, что у «Показать QR прорабу»: обе кнопки вторичные и обе относятся ко ВСЕЙ строке, а не к её правой колонке. Отдельным объявлением, а не через запятую с соседом: у них разная судьба (QR приходит и уходит по подтверждению, кнопка маршрута стоит всегда), и общий селектор пришлось бы разбирать при первой же правке одной из них. 🛑 `min-height` от `--tap-small` (пол 48px), а не габарит `te5-btn--sm`: в перчатке 30-пиксельная кнопка не берётся, а `--tap-small` ещё и переживает системное увеличение шрифта — оно множится ПОВЕРХ наших px. */ /* 🛑 Кнопка навигатора живёт в ПРАВОЙ части шапки (решение владельца 09.09.2026). Абсолют, а не поток: в потоке она вставала бы третьей строкой под адресом и отжимала бы вниз главную кнопку экрана. Место под неё резервирует `padding-right` у самой шапки — иначе длинный адрес заезжал бы под кнопку и читался обрезанным (тот же класс, что у «Доп. рейса» в реестре: `nowrap`-текст не переносится, а вылезает поверх соседа). Резерв ставится ТОЛЬКО когда кнопка есть — `:has()`, он в этом файле уже используется. */ /* 🛑 СЕТКА, а не абсолют с `top: 50%` (владелец 09.09.2026: «сделай чтоб она была на одной линии с текстом»). Центрование по всей плашке ставило кнопку МЕЖДУ чипом состояния и адресом — ни на одной строке. Колонка держит место сама, поэтому ручной резерв `padding-right: 72px` снят: он дублировал бы ширину кнопки и разъехался бы с ней. */ .te5-driver-redesign .x-hero:has(> .x-hero__route) { display: grid; grid-template-columns: minmax(0, 1fr) auto; /* 🛑 Строки объявлены ЯВНО, и это несущая часть центрирования кнопки, а не оформление. Отрицательная линия (`grid-row: 1 / -1`) отсчитывается ТОЛЬКО по явной сетке: без этого объявления она ссылается в пустоту, и кнопка молча падает в первую строку — замер 15.09.2026 показал её напротив чипа состояния, ровно там, откуда её уводили. Три строки — это чип, адрес и «к 07:30»; лишние схлопываются в 0 (`auto` без содержимого), поэтому карточка без времени не растёт. Появится ЧЕТВЁРТАЯ строка — её надо дописать сюда же, иначе кнопка перестанет её охватывать. */ grid-template-rows: repeat(3, auto); column-gap: 12px; align-items: start; } /* Всё, кроме кнопки, живёт в первой колонке: без явного размещения сетка растащила бы название и адрес по свободным ячейкам справа. */ .te5-driver-redesign .x-hero:has(> .x-hero__route) > :not(.x-hero__route) { grid-column: 1; } .te5-driver-redesign .x-hero:has(> .x-hero__route) > .x-status { justify-self: start; } /* 🛑 Название центрируется по СВОЕЙ строке вместе с кнопкой, и без этого «одна линия» остаётся правдой про сетку и ложью про экран: высоту строки задаёт кнопка (44px), название ростом 24px, а `align-items: start` шапки прижимает оба к верху — центры расходятся на 10px, и значок читается как съехавший вниз (замер в браузере 09.09.2026, владелец: «а теперь как будто ниже»). У длинного адреса в две строки кнопка встаёт по центру блока текста — это и есть ожидаемое поведение, а не край. */ .te5-driver-redesign .x-hero:has(> .x-hero__route) > .x-hero__name { align-self: center; } .te5-driver-redesign .x-hero > .x-hero__route { grid-column: 2; /* 🛑 НА ВСЕ СТРОКИ КАРТОЧКИ, центр — по ней целиком (владелец 14.09.2026, TE-406, второй заход: «она ВСЁ ЕЩЁ не по центру»). Замер на стенде 15.09.2026: так дельта между центром кнопки и центром карточки РОВНО 0, тогда как прежнее `grid-row: 2` (центр по одной строке адреса) давало +17px вниз — это и видел владелец. На карточке с тремя строками центр приходится между адресом и «к 07:30» — его же уточнение. Кнопка при этом остаётся во ВТОРОЙ колонке, то есть на чип состояния не наезжает: пересечение у них только по вертикали, а не на экране. 🛑 Работает это лишь вместе с явным `grid-template-rows` у самой карточки — разбор там же. Держит `test_the_navigator_button_sits_on_the_line_of_the_object_name`. */ grid-row: 1 / -1; align-self: center; /* Цвет значка НЕ наследуется: пин красится своим токеном (`--pin-yandex`), а рамка и подложка — парой токенов кнопки-значка. Через `te5-btn` сюда приезжала подложка карточки, и кнопка сливалась с ней в светлой теме и белела в тёмной. Рамка — существующий `--line-control` («край цели нажатия», 3:1), тот же, которым обведены кнопки-значки прораба: именно на них владелец показал как на эталон. */ background: var(--driver-iconbtn-bg); border: 1px solid var(--line-control); /* 15px — радиус иконок шапки (замер 14.09.2026: меню, «?», тема — 48×48 при 15px). Владелец сравнивает их на одном экране, и при равном размере разный скруглённый квадрат читается как небрежность. Своё число сюда не писать — сверять с шапкой. */ border-radius: 15px; } /* Цель нажатия 48px — меньше в перчатке не берётся; отрицательный внешний отступ держит текст строки на прежнем месте, чтобы список не разъезжался вправо. */ .te5-driver-redesign .x-route-drop { display: flex; align-items: center; justify-content: center; width: 48px; min-width: 48px; height: 48px; margin: -8px 2px -8px -10px; padding: 0; border: 0; border-radius: 12px; background: none; font-size: max(14px, calc(20px * var(--driver-zoom-comp, 1))); line-height: 1; color: var(--driver-text-soft); cursor: pointer; } .te5-driver-redesign .x-route-drop:active { background: var(--driver-surface-strong); } /* Место крестика занимает и чужая строка — иначе названия точек диспетчера и водителя стояли бы разными столбиками, и список читался бы как рваный. */ .te5-driver-redesign .x-route-drop--empty { background: none; cursor: default; } /* Вход в новую точку — последняя строка блока «Маршрут»: плюс по центру. Ниже строк, а не над ними, потому что точка добавляется В КОНЕЦ маршрута — положение кнопки повторяет то, что произойдёт. 🛑 Его `border-top` — ЗАМЫКАЮЩАЯ линия списка, и она идёт ВО ВСЮ ШИРИНУ карточки (владелец 14.09.2026, TE-405; эталон назван им же — линия, отделяющая заголовок «Маршрут» от списка). Полную ширину даёт отрицательное поле с равным ему внутренним отступом: строка лежит в `.te5-card__body` с `padding: 10px 16px !important`, без компенсации подпись уехала бы под край. Числа обязаны совпадать с отступом тела — разъедутся молча, поэтому пин стоит на обоих сразу. */ .te5-driver-redesign .x-route-add { display: flex; align-items: center; justify-content: center; gap: 10px; /* 🛑 Ширина НАЗВАНА как «строка плюс обе растяжки», а не `100%` и не `auto`. `100%` при отрицательных полях сдвинуло бы кнопку влево, оставив линию короткой справа; `auto` в колоночном flex-контейнере схлопывает её по содержимому — замер на стенде 15.09.2026 дал 162.7px вместо 339.2px, то есть линия стала короче, чем была до правки. Число 32px — те же 2×16px, что в `margin-inline`. */ width: calc(100% + 32px); min-height: var(--tap-row); margin-top: 4px; margin-inline: -16px; padding-inline: 16px; padding-block: 0; border: 0; border-top: 1px solid var(--driver-card-border); border-radius: 0; background: none; font: inherit; font-size: var(--type-ref); font-weight: 700; color: var(--driver-link-fg); cursor: pointer; } /* 🛑 На ПУСТОМ маршруте замыкающей линии нет: над кнопкой уже лежит линия шапки складки (`.x-fold[open] > summary`), и вторая в четырёх пикселях под ней читалась как дубль (владелец 07.10.2026 по кадру с телефона: «пусть одна будет»). Признак пустоты — кнопка первая в теле карточки: строк перед ней нет. С точками правило не срабатывает, и линия над кнопкой остаётся замыкающей, как решено 14.09 (TE-405). */ .te5-driver-redesign .x-route-add:first-child { margin-top: 0; border-top: 0; } .te5-driver-redesign .x-route-add:active { background: var(--driver-surface-strong); } .te5-driver-redesign .x-route-add__plus { font-size: max(17px, calc(24px * var(--driver-zoom-comp, 1))); font-weight: 800; line-height: 1; } /* Указания диспетчера «для всех» из разнарядки. Плашка стоит ПОСЛЕ кнопок и выше складных блоков (владелец 04.09.2026): кнопка отвечает «что делать сейчас», указание — «как именно»; а «Маршрут» водитель мог свернуть насовсем, и распоряжение про тахограф или пропуск обязано попасться на глаза до того, как он тронется. Отступы — как между кнопками и между складками (`--gap-card`), чтобы плашка стояла в их ритме. Каждый пункт — своя строка: парсер склеивает общие и секционные указания через « · », и на телефоне склейка из трёх требований читается одним абзацем. 🛑 Гамма — ОБЫЧНАЯ КАРТОЧКА темы, без сигнального цвета (владелец 04.09.2026: «кричащая… сделай вообще белое»). Подложка `--driver-surface` — та же, что у hero и складок (белая в светлой, #384352 в тёмной), рамка `--driver-card-border`, ярлык приглушённым текстом кита `--te5-muted`. Два снятых варианта не возвращать: синяя `te5-banner--info` сливалась с карточкой в тёмной теме (кадр 03.09.2026), янтарная пара чипа «ждёт» спорила с кнопками за внимание (кадры 04.09.2026). Внимание держит ПОЛОЖЕНИЕ плашки, а не цвет; контраст пинит `test_driver_contrast_gate.py`. */ .te5-driver-redesign .x-dispatch-note { margin: var(--gap-card, 14px) 0; background: var(--driver-surface); border-color: var(--driver-card-border); } .te5-driver-redesign .x-dispatch-note__label { margin-bottom: 4px; font-size: var(--type-meta); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--te5-muted); } .te5-driver-redesign .x-dispatch-note__item { font-size: var(--type-ref); font-weight: 600; color: var(--driver-text); } .te5-driver-redesign .x-dispatch-note__item + .x-dispatch-note__item { margin-top: 4px; } /* Телефон в указании — ссылка tel: одним куском: на 390px «+7» уезжало на предыдущую строку, а «900 000-00-01» на следующую (живой кадр 03.09.2026, TE-315). */ .te5-driver-redesign .x-dispatch-note__item a[href^="tel:"] { white-space: nowrap; } /* Плановое время точки («к 07:30» из разнарядки). Отдельной строкой под названием объекта и ВЫШЕ адреса: водитель с утра спрашивает «успеваю ли», а уже потом «куда». */ .te5-driver-redesign .x-route-when { display: block; margin-top: 2px; font-size: var(--type-meta); font-weight: 700; color: var(--driver-link-fg); } /* ══════════════════════════════════════════════════════════════════════════ Компенсация системного увеличения — ХВОСТ te5.css (j 06.09.2026: «чтоб не масштабировалось вообще никогда»). Все кегли самого driver.css идут через `max(пол, calc(база * var(--driver-zoom-comp, 1)))` (сторож — `test_every_font_size_in_driver_css_goes_through_the_multiplier`). Но экран водителя рисуется ещё и правилами te5.css: форма работы, степпер, нампад, ряды времени, одометр, «Куда дальше?», экран результата, тост, плашка обновления, `te5-btn`, окно «i». Тем правилам множитель недоступен по построению (te5.css общий на 14 страниц), поэтому каждое из них, до которого доезжает driver.js, перекрыто здесь ТЕМ ЖЕ числом в формуле. Базы дословно те, что в te5.css — второй источник числа принят осознанно: сторож `test_te5_rules_that_reach_the_driver_screen_are_overridden_with_the_multiplier` держит соответствие «правило te5.css → перекрытие здесь», а базу сверяет по значению. Пол = round(0.7 × база), не ниже 11px; множитель ниже 1/1.5 не опускается, пол — страховка от вранья замера. 🛑 Обёртка — `:where()`, специфичность (0,1,0): ровно как у самого te5.css, и driver.css грузится позже — значит перекрываем te5.css и НЕ трогаем ни одно своё правило (0,2,0): у «Отмены» окна помощи свой кегль `.te5-driver-redesign .te5-support-modal__cancel`, и голый `.te5-driver-redesign .te5-btn` в хвосте файла отобрал бы его молча. 🛑 Форма входа (`body.te5-driver-access`) driver.js не грузит — множитель там всегда 1, формула на ней тождественна голому px. Потолок назван, не дефект. ══════════════════════════════════════════════════════════════════════════ */ .te5-driver-redesign :where(.te5-btn) { font-size: max(11px, calc(13.5px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-btn--sm) { font-size: max(11px, calc(12.5px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-input, .te5-select) { font-size: max(11px, calc(14px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-toast) { font-size: max(11px, calc(13.5px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-sw-update) { font-size: max(11px, calc(16px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-form__label) { font-size: max(14px, calc(20px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-form__hint) { font-size: max(11px, calc(15px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-form__cmt) { font-size: max(14px, calc(20px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-textarea) { font-size: max(14px, calc(20px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-stepper__btn) { font-size: max(32px, calc(46px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-stepper__val) { font-size: max(27px, calc(38px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-time-date) { font-size: max(20px, calc(28px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-time-span) { font-size: max(12px, calc(17px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-odo__hint) { font-size: max(12px, calc(17px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-odo__display) { font-size: max(35px, calc(50px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-odo__unit) { font-size: max(17px, calc(24px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-odo__manual) { font-size: max(28px, calc(40px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-odo__toggle) { font-size: max(11px, calc(16px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-time-row__label) { font-size: max(13px, calc(18px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-time-row__val) { font-size: max(24px, calc(34px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-time-row__val--empty) { font-size: max(13px, calc(19px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-numpad__key) { font-size: max(24px, calc(34px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-confirm__q) { font-size: max(15px, calc(22px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-confirm__yes) { font-size: max(17px, calc(24px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-confirm__no) { font-size: max(14px, calc(20px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-result__icon) { font-size: max(67px, calc(96px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-result__msg) { font-size: max(16px, calc(23px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-result__sub) { font-size: max(11px, calc(15px * var(--driver-zoom-comp, 1))); } /* ≤360px: те же ужимки, что в te5.css, — базовое перекрытие выше стоит в файле позже медиа-правил te5.css и при равной специфичности гасило бы их. */ @media (max-width: 360px) { .te5-driver-redesign :where(.te5-stepper__btn) { font-size: max(27px, calc(38px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-stepper__val) { font-size: max(22px, calc(32px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-time-row__label) { font-size: max(11px, calc(15px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-time-row__val) { font-size: max(21px, calc(30px * var(--driver-zoom-comp, 1))); } .te5-driver-redesign :where(.te5-time-row__val--empty) { font-size: max(13px, calc(18px * var(--driver-zoom-comp, 1))); } } /* ── Тоны значков на заливках водителя (PR-V, j 28.09.2026) ────────────────────────── Значок набора красится токеном `--te5-ico-<тон>` (te5.css). Чип плитки — синий градиент (`--driver-accent-2` → `--driver-accent`), и он же лежит внутри зелёной кнопки подтверждения: там тон читается ПАСТЕЛЬЮ (`--te5-ico-*-fill`, ≥3.0 к `--driver-accent`, гейт `test_console_icons.py`), а синий и серый остаются белыми — синее на синем невидимо. Плоский глиф вторичной кнопки лежит на карточке: там тоны как на любой поверхности, поэтому `:not(.te5-cta--secondary *)`. «Готово» нампада — белая галочка на синем, как было. */ .te5-driver-redesign .te5-tile__emo:not(.te5-cta--secondary *) { --te5-ico-blue: currentColor; --te5-ico-slate: currentColor; --te5-ico-green: var(--te5-ico-green-fill); --te5-ico-amber: var(--te5-ico-amber-fill); --te5-ico-red: var(--te5-ico-red-fill); --te5-ico-violet: var(--te5-ico-violet-fill); --te5-ico-teal: var(--te5-ico-teal-fill); } .te5-driver-redesign .te5-numpad__key--success { --te5-ico-green: currentColor; } /* 🛑 Чип ГЛАВНОЙ кнопки — не синий, а светлый (`--driver-cta-emo-bg` #dde4ee в ОБЕИХ темах), поэтому правило выше на нём врёт в обе стороны: белый (`currentColor`) и пастели на светлом квадрате невидимы. j 28.09.2026 по кадру «К сегодняшней смене»: «внутри кнопок раскрась в тех цветах, как раньше было». Тона здесь — ГЛУБОКИЕ значения (те же, что светлая палитра `te5.css`, гейт равенства — `test_console_icons.py`), независимо от темы: чип светлый всегда. Специфичность (0,4,0) против (0,3,0) у правила плитки, и объявлено после. */ .te5-driver-redesign, .te5-driver-access { --te5-ico-blue-deep: #2a72d4; --te5-ico-green-deep: #1e8f50; --te5-ico-amber-deep: #c46a0f; --te5-ico-red-deep: #d1463a; --te5-ico-violet-deep: #7a5fd6; --te5-ico-teal-deep: #128a80; --te5-ico-slate-deep: #687384; } .te5-driver-redesign .te5-cta:not(.te5-cta--secondary) .te5-tile__emo { --te5-ico-blue: var(--te5-ico-blue-deep); --te5-ico-green: var(--te5-ico-green-deep); --te5-ico-amber: var(--te5-ico-amber-deep); --te5-ico-red: var(--te5-ico-red-deep); --te5-ico-violet: var(--te5-ico-violet-deep); --te5-ico-teal: var(--te5-ico-teal-deep); --te5-ico-slate: var(--te5-ico-slate-deep); }