/* Шапка карточки машины: строка резины и ввод пробега.
Почему отдельным файлом, а не в app.css: 22.09.2026 app.css держал параллельный агент (модульные
форматы плашек), а два писателя в один файл затирают друг друга молча. Правила узкие и связаны с
одной парой строк шапки — файл имеет право жить дальше как «части шапки», сливать обратно не
обязательно. */
/* Строка резины — ПОЛЕ по формату кнопок ряда действий под ним: та же высота 36px (на пальцевых
экранах .btn вырастает до 44 — растём вместе с ним), тот же радиус --r-s, та же ширина. Правый
край поля — кнопка выбора со склада, инвертированная по цвету: заливка --accent-fill и белая
надпись (белый текст разрешён только на ней). Так правый блок шапки читается одной колонкой
одинаковых элементов, а не «строка текста, потом кнопки». */
.odo.tire.fld{
display:flex;align-items:stretch;gap:0;padding:0;overflow:hidden;
height:36px;border-radius:var(--r-s);background:var(--fill);
}
.odo.tire.fld .tire-name{
flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:0 12px;
font:500 15px/1 var(--font);color:var(--label);
}
.odo.tire.fld .btn.swap{
flex:none;display:inline-flex;align-items:center;justify-content:center;
width:44px;height:auto;min-height:0;padding:0;margin:0;border:0;border-radius:0;
background:var(--accent-fill);color:#fff;cursor:pointer;
-webkit-tap-highlight-color:transparent;touch-action:manipulation;
transition:filter 120ms ease-out;
}
.odo.tire.fld .btn.swap>i{display:inline-flex;transform:rotate(0deg)}
.odo.tire.fld .btn.swap:active{filter:brightness(.92)}
@media (hover:hover) and (pointer:fine){
.odo.tire.fld .btn.swap:hover{filter:brightness(1.08)}
/* Стрелки подкручиваются на наведении — обещание того, что произойдёт по нажатию. */
.odo.tire.fld .btn.swap:hover>i{transform:rotate(45deg);transition:transform 220ms cubic-bezier(.23,1,.32,1)}
}
/* Пальцевые экраны: кнопки .btn там 44px — поле обязано вырасти вместе с ними, иначе колонка
правого блока перестанет быть ровной (владелец: «проверь, чтобы всё ровненько с другими
объектами было»). */
@media (pointer:coarse){.odo.tire.fld{height:44px}.odo.tire.fld .btn.swap{width:52px}}
/* Полный оборот по нажатию: отклик на само действие, а не на ответ сервера. Класс снимается и
ставится заново в vehicle.js, поэтому анимация повторяется при каждом нажатии. */
.odo.tire.fld .btn.swap>i.spin{animation:swapSpin 520ms cubic-bezier(.23,1,.32,1)}
@keyframes swapSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
.odo.tire.fld .btn.swap>i.spin{animation:none}
.odo.tire.fld .btn.swap:hover>i{transform:none}
}
/* «Ввести» живёт внутри подписи о точности пробега: тот же кегль, подчёркивание пунктиром, чтобы
читалось как действие, а не как часть факта. Кнопкой .btn не делаем — .btn задаёт высоту 32/44px
и разорвал бы двухстрочный ряд. */
.odo .odo-cap{display:inline-flex;align-items:baseline;gap:6px;min-width:0}
.odo .odo-add{
flex:none;appearance:none;background:transparent;border:0;padding:0;
font:inherit;font-size:inherit;line-height:inherit;color:var(--accent);
cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
border-bottom:1px dashed var(--accent);opacity:1;
}
.odo .odo-add:active{opacity:.6}
/* Зона нажатия растёт ПСЕВДОЭЛЕМЕНТОМ, а не padding'ом: у кнопки есть border-bottom, и
padding отодвигал пунктир на 14 px вниз от текста — на карточке висела ничья пунктирная
черта посреди пустоты (скриншот владельца 2026-09-22, «пидарская вёрстка»). Псевдоэлемент
ловит палец на тех же 44 px, а подчёркивание остаётся под словом. */
/* Слово «Ввести» не сжимается вместе с подписью: в двухпанельном режиме (1440) колонка уже,
.odo-cap ужимался, и кнопка получала 34 px при нужных 42 — пунктир обрывался посреди слова
(замер 2026-09-22: scrollWidth 42 > clientWidth 34). */
.odo .odo-add{position:relative;white-space:nowrap;min-width:max-content}
.odo .odo-add::after{content:"";position:absolute;inset:-15px -8px}
/* Правый край строки журнала: пилюля вида работы. Оценка переехала влево, к названию машины. */
.jrow-right{display:flex;align-items:center;gap:var(--sp-2)}
/* Подпись строки журнала: оценка машины, затем название. Оценка не сжимается и не переносится,
текст рядом — обычным мелким кеглем и с многоточием. */
.jsub{display:flex;align-items:center;gap:6px;min-width:0}
.jsub>.score{flex:none}
.jsub>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Возврат из карточки машины без отдельной строки (владелец, 2026-09-22: «меню Машины и Изменить
уберём, пусть появляются только на телефоне и то лучше свайпом или компактной стрелочкой, не
занимая строки»). Стрелка висит НАД заголовком — position:absolute, поэтому поток не двигает —
и только на узком экране: на широком карточка стоит колонкой рядом со списком, возвращаться
некуда. Рядом со стрелкой работает свайп от левого края (vehicle.js::attachSwipeBack). */
.screen#vehicle > .inner,.screen#vehicles .card-col{position:relative}
.card-back{position:absolute;left:var(--sp-2);top:var(--sp-2);z-index:3;
width:34px;height:34px;min-height:0;padding:0;display:none;align-items:center;justify-content:center;
border:0;border-radius:50%;background:var(--fill);color:var(--accent);cursor:pointer;
-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.card-back>i{display:inline-flex}
.card-back:active{transform:scale(.94)}
/* Круг остаётся 34 px (крупнее он давит на заголовок), а палец ловится на 44 — замер на
телефоне показал 34 при пороге попадания 44. */
.card-back::after{content:'';position:absolute;inset:-5px}
/* Пилюля-действие (сменить статус, открыть вложение) — 22 px высотой: столько же, сколько
пилюля-подпись рядом, и это правильно на вид, но мимо пальца. Даём ей ту же невидимую зону,
что и остальным мелким целям проекта, — вид не меняется, промахов больше нет. */
.pill.accent.press{position:relative}
.pill.accent.press::after{content:'';position:absolute;inset:-11px 0}
@media (max-width:1099px){
.card-back{display:inline-flex}
/* Заголовок карточки уступает стрелке место слева, чтобы название не начиналось под ней. */
.dhead{padding-left:42px;position:relative}
}
/* Шапка фильтра регламента: подпись и кнопка сброса в одной строке вплотную к строке выбора. */
.sec.to-filter{margin-top:var(--sp-2);align-items:center;gap:var(--sp-2)}
.sec.to-all{margin-top:var(--sp-4)}
/* «В этом горизонте пусто» — одна строка под шапкой фильтра, полный список идёт следом. */
.to-empty{display:block;padding:var(--sp-2) var(--sp-4) 0}
/* Поля правки «на месте» (вкладка «Данные» и правка записи журнала) — тот же язык, что у полей
форм: подложка карточки, тонкая рамка, кольцо фокуса акцентом. 16 px — не вкус, а требование
мобильного Safari: при меньшем кегле он приближает страницу на фокусе. */
.fld-edit{
font-family:inherit;font-size:16px;line-height:1.25;text-align:right;
color:var(--label);background:var(--card);border:1px solid var(--sep);border-radius:var(--r-s);
min-height:34px;padding:5px 9px;appearance:none;-webkit-appearance:none;
transition:border-color 120ms ease-out,box-shadow 120ms ease-out;
}
.fld-edit:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fld-edit:disabled{opacity:.6}
select.fld-edit{text-align:left;padding-right:6px}
@media (pointer:coarse){.fld-edit{min-height:40px}}
.fld-cancel{display:flex;align-items:center;justify-content:center;border:0;background:none;
padding:4px;color:var(--label2);cursor:pointer;border-radius:var(--r-s);min-height:0}
.fld-cancel:active{opacity:.6}
@media (pointer:coarse){.fld-cancel{padding:8px}}
/* В тёмной теме подложка карточки (#45403A) и дорожка переключателя различаются слабо — активный
сегмент читался тенью, а не заливкой. Поднимаем его на полтона: контраст даёт форма, как в iOS,
а не вторая рамка (владелец, 2026-09-22: «должна быть просто контрастная кнопка»). */
:root[data-theme="dark"] .seg>span.on{background:#5A544C}
/* КОМФОРТ НА ПАЛЬЦЕВОМ ЭКРАНЕ (замер 2026-09-22, 390 px). Переключатели-сегменты были 29 px
высотой, ссылки в шапках разделов («Все 0», «Журнал», «Сортировка») — 20 px: и то и другое
вдвое ниже порога уверенного попадания пальцем. Растим ЗОНУ, а не кегль: у сегмента — внутренним
отступом, у ссылки — отступом с отрицательным полем, чтобы вёрстка не поехала. */
@media (pointer:coarse){
.seg>span{min-height:36px;display:flex;align-items:center;justify-content:center;padding-top:0;padding-bottom:0}
.sec a,.t-cap+a{padding:10px 0;margin:-10px 0}
}
/* Новая строка ленты: короткое появление и мягко гаснущая подсветка. Тон — акцент на 10%,
то есть та же подложка, что у пилюль (--accent-soft), а не цветная вспышка: «не сильно
навязчиво» (владелец, 2026-09-22). Кривая — сильный ease-out: движение заметно в начале и
мягко останавливается. */
@keyframes feedIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes feedGlow{from{background:var(--accent-soft)}to{background:transparent}}
.feed-new{animation:feedIn 260ms cubic-bezier(.23,1,.32,1),feedGlow 2200ms ease-out 120ms}
@media (prefers-reduced-motion:reduce){
/* Движение убираем, смысл («это новое») оставляем: подсветка гаснет без сдвига. */
.feed-new{animation:feedGlow 1200ms ease-out}
}
/* Строка отмены в ленте: заметная, но не тревожная — подложка акцента на 10%, как у пилюль,
и обычная высота строки. Живёт 5 минут (vehicle.js::renderUndoRows). */
.undo-row{background:var(--accent-soft)}
.undo-row .btn.plain{flex:none}
/* ВЛЕЗАНИЕ В ЭКРАН (владелец, 2026-09-22: «кнопки, вёрстка, влезание в экран — всё по фэн-шуй»).
Замер по 216 состояниям (9 ширин × 2 темы × экраны и вкладки) дал ровно два выхода за край, оба
чинятся не переносом, а разрешением сжиматься. */
/* 1. «Сегодня», 320 px: строка «Overdue · Engine Oil Change · Oil Filter» вылезала за карточку.
У .act-line стоит обрезка многоточием, но обрезать нечего, пока РОДИТЕЛЬ не может сузиться:
flex-ребёнок по умолчанию не уже своего содержимого (min-width:auto). */
.screen#today .row .t-foot{min-width:0;overflow:hidden}
/* 2. «Деньги» на телефоне: сумма вида 31 063.50 не влезала в ячейку из трёх. Кегль 24 → 19 и
плотнее трекинг только на узких экранах; цифры остаются моноширинными, колонки не пляшут. */
@media (max-width:430px){
.kpi b{font-size:19px;letter-spacing:-.03em}
.kpis{gap:6px}
}
/* На 320–360 в ячейку из трёх не влезала сумма вида 31 063.50 (замер: обрезалась на бою в обеих
темах). Ещё шаг вниз по кеглю и плотнее трекинг — цифры остаются моноширинными, колонки не
пляшут, перенос не появляется. */
@media (max-width:360px){
.kpi b{font-size:16.5px;letter-spacing:-.04em}
.kpi span{font-size:10px}
}
/* ЕДИНСТВЕННАЯ КНОПКА ДЕЙСТВИЙ (core.js::updateFab). Одна на всё приложение, всегда в одном месте,
поэтому её не надо искать глазами на каждом экране заново. Над таббаром на телефоне и над нижней
кромкой на десктопе; заливка акцента, белый знак — единственное место, где белое на акценте. */
.fab{
position:fixed;right:16px;z-index:60;
/* Таббар: высота 64 + 10 до нижней кромки (см. .tabbar в app.css). Кнопка встаёт над ним с
зазором 14, а на ширине ≥700 таббара нет вовсе — там она опускается к самой кромке. */
bottom:calc(64px + 10px + env(safe-area-inset-bottom,0px) + 14px);
width:56px;height:56px;border:0;border-radius:50%;
background:var(--accent-fill);color:#fff;cursor:pointer;
box-shadow:0 6px 20px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.18);
display:inline-flex;align-items:center;justify-content:center;
-webkit-tap-highlight-color:transparent;touch-action:manipulation;
transition:transform 110ms ease-out,box-shadow 160ms ease-out;
}
.fab .i{width:26px;height:26px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
.fab:active{transform:scale(.94)}
.fab[hidden]{display:none}
@media (hover:hover) and (pointer:fine){.fab:hover{box-shadow:0 8px 26px rgba(0,0,0,.32)}}
@media (min-width:700px){.fab{bottom:calc(24px + env(safe-area-inset-bottom,0px))}}
@media (min-width:1100px){.fab{right:32px;bottom:32px}}
@media (prefers-reduced-motion:reduce){.fab{transition:none}}
/* Хаб действий: сетка 3 в ряд — весь набор экрана виден одним взглядом, без прокрутки. */
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);margin-top:var(--sp-2)}
.hub-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
min-height:84px;padding:10px 6px;border:1px solid var(--sep);border-radius:var(--r-m);
background:var(--card);color:var(--label);font:600 12px/1.25 var(--font);text-align:center;cursor:pointer}
.hub-cell .i{width:22px;height:22px;stroke:var(--accent);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hub-cell:active{transform:scale(.97)}
.hub-ask{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
min-height:44px;margin-top:var(--sp-3);border:0;border-radius:var(--r-s);
background:var(--accent-soft);color:var(--accent);font:600 15px/1 var(--font);cursor:pointer}
.hub-ask .i{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none}
/* Кнопки действия в строках («Сделано», «Ввести», «Заменить») — одной ширины: они стоят столбиком
у правого края, и разная длина подписи делала правый край ровным, а левый — рваным (скриншот
владельца 2026-09-22). Минимальная ширина по самой длинной из коротких подписей; длинная
подпись всё так же растянет кнопку, но такие в строках не встречаются. */
.row > .btn,.tr > .btn{min-width:104px}
@media (max-width:360px){.row > .btn,.tr > .btn{min-width:92px}}
/* ОДНА ВЫСОТА У ВСЕХ КНОПОК НА ОДНОМ ЭКРАНЕ. Замер 2026-09-22 в режиме владельца: в строках
«Сейчас» кнопки выходили 36 px, а в ленте рядом — 44, и на скриншоте это читается как «размеры
разные». Правило с (pointer:coarse) в разных условиях замера срабатывало не всегда, поэтому
добавляем (any-pointer:coarse) — оно ловит устройство с сенсорным вводом независимо от того,
какой указатель система считает основным. Значение то же, 44. */
@media (any-pointer:coarse){
.btn,.icon-btn{height:44px;min-height:44px}
.icon-btn{width:44px}
/* Кнопки внутри строк — тем же правилом и тем же числом: именно они на скриншоте владельца
выглядели ниже соседних. Пишем явно, чтобы высота не зависела от того, какой предок раньше
задал свою. */
.row > .btn,.tr > .btn,.group .row .btn{height:44px;min-height:44px}
}
/* АККУРАТНЕЕ, А НЕ ПРОСТО МЕНЬШЕ (владелец, 2026-09-22: «кнопки ок, но всё громоздкое и
некрасивое, сделай более аккуратные»). Зону нажатия не трогаем — она остаётся 44 px, это порог
попадания пальцем. Уменьшаем ВИЗУАЛЬНЫЙ вес: кегль подписи кнопки, её горизонтальные поля,
радиус и толщину рамок, а у строк — лишние 4 px высоты, которые набегали из отступов.
Шкала не нарушена: 14 и 12 уже используются в проекте, радиус берётся из токена. */
.btn{font-size:13px;padding:0 12px;border-radius:var(--r-s)}
.btn.plain{font-size:13px}
.big{height:44px;font-size:15px;border-radius:var(--r-s)}
.intake-choices .btn{font-size:13px;padding:8px 12px}
.hub-cell{min-height:76px;font-size:11.5px;padding:8px 6px}
.hub-cell .i{width:20px;height:20px}
.hub-ask{min-height:40px;font-size:14px}
.units.compact .tr:not(.th){min-height:48px}
.group>.row{min-height:48px}
.frow{padding-top:5px;padding-bottom:5px}
/* Пилюля — самый мелкий элемент строки: ей достаточно 11.5 px и тонкого горизонтального поля,
иначе она спорит по весу с самим текстом строки. */
.pill{font-size:11.5px;padding:0 7px}
/* Круглая кнопка действий: 52 вместо 56 и тень мягче — она не должна быть самым тяжёлым пятном
на экране. */
.fab{width:52px;height:52px;box-shadow:0 4px 14px rgba(0,0,0,.24),0 1px 4px rgba(0,0,0,.16)}
.fab .i{width:24px;height:24px}
/* Плашка ленты плотнее: меньше вертикального поля у строки и у блока с ответом. Сама высота
строки определяется содержимым, поэтому экономия идёт от отступов, а не от кегля текста. */
.frow{padding-top:4px;padding-bottom:4px}
.frow .tags{margin-top:4px;gap:6px}
/* 11.5px убран дизайн-ревизией 2026-09-22: кегль вне шкалы, от 11 неотличим. */
.frow .t-sub{line-height:1.3}
/* ОКНО ВВОДА НА ШИРОКОМ ЭКРАНЕ (скриншот владельца 2026-09-22: узкая коробка с кнопками разной
ширины — «Записать работу» во всю ширину синей полосой и маленькая «Ввести пробег» под ней).
Лист задуман для телефона, где он снизу во всю ширину; на десктопе он оказывался посередине и
без своих пропорций. Здесь ему задана честная ширина, поля и порядок кнопок: равные по ширине,
одной высоты, в один ряд — основная слева, второстепенная справа. */
@media (min-width:700px){
.scrim > .sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);
width:min(460px,calc(100vw - 48px));max-height:80vh;border-radius:var(--r-l,16px)}
.scrim > .sheet::before{display:none}
.sheet-h{padding:14px 16px 6px}
.sheet-b{padding:6px 20px 20px}
}
/* Кнопки действий в окне ввода — одна строка, равные доли, одна высота. Так же на телефоне. */
.intake-forms{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--sp-2)}
.intake-forms > .btn{flex:1 1 0;min-width:140px;height:44px;min-height:44px;font-size:14px;justify-content:center}
.sheet .big{margin-top:0}
.sheet .big + .btn{height:44px;min-height:44px}
/* Поле поиска — той же высоты, что и остальные поля ввода (38 на пальцевом экране). Замер в
режиме владельца: рамка 36, сам input внутри 34 — единственный орган управления, выбивавшийся
из шкалы после общей чистки. Кегль 16, а не 17: ниже 16 мобильный Safari приближает страницу,
выше — строка ощущается тяжелее соседних. */
@media (any-pointer:coarse){
.search{height:40px}
.search input{font-size:16px}
}
/* СТРЕЛКИ У ЧИСЛОВОГО ПОЛЯ — УБРАТЬ ВЕЗДЕ. Владелец (2026-09-22, скриншот) принял их за полосу
прокрутки: браузер рисует у input[type=number] собственный «степпер» вверх-вниз, и в узком поле
он выглядит именно так. Он бесполезен — пробег и суммы набирают с клавиатуры, а не щёлкают по
единице, — и это единственное место в приложении, где остаётся браузерная фурнитура. Правило
общее: и поля форм, и поля в строках ленты, и правка на месте. */
input[type="number"]{-moz-appearance:textfield;appearance:textfield}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
/* Стрелка у select — своя, нарисованная (в app.css), браузерную тоже гасим, чтобы не было двух. */
select{-webkit-appearance:none;appearance:none}
/* КОНТРАСТ ПИЛЮЛЬ ДОТЯГИВАЕМ ДО ПОРОГА. Замер на бою в тёмной теме (композит по всем
полупрозрачным слоям, а не «цвет на цвет»): .pill.muted 4.35:1, .pill.accent 4.30:1,
.pill.warn 4.44:1 — все три чуть НИЖЕ 4.5, и это самый мелкий текст в приложении (11–11.5 px).
Не перекрашиваем палитру: поднимаем только непрозрачность текста самой пилюли и чуть темним
её подложку — тон остаётся прежним, а порог берётся с запасом. В светлой теме эти же пилюли
уже выше порога, поэтому правило только для тёмной. */
:root[data-theme="dark"] .pill.muted{color:rgba(240,234,224,.92);background:rgba(160,148,130,.16)}
:root[data-theme="dark"] .pill.accent{color:#B9CDF2;background:rgba(158,185,234,.14)}
:root[data-theme="dark"] .pill.warn{color:#FFC978;background:rgba(255,149,0,.14)}
/* .pill.bad в прошлый раз пропустили: замер 2026-09-22 дал 4.13:1 («Требует внимания»,
«Check Engine» на «Машинах»). И ещё важнее — все эти поправки висели ТОЛЬКО на явном
data-theme="dark", то есть на тех, кто выбрал тему руками. У кого тема «как в системе»,
атрибута нет вовсе, и в тёмной системе пилюли оставались непоправленными. Повторяем тот же
набор под prefers-color-scheme, исключая тех, кто выбрал светлую явно. */
:root[data-theme="dark"] .pill.bad{color:#FFADA6;background:rgba(255,59,48,.12)}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .pill.muted{color:rgba(240,234,224,.92);background:rgba(160,148,130,.16)}
:root:not([data-theme="light"]) .pill.accent{color:#B9CDF2;background:rgba(158,185,234,.14)}
:root:not([data-theme="light"]) .pill.warn{color:#FFC978;background:rgba(255,149,0,.14)}
:root:not([data-theme="light"]) .pill.bad{color:#FFADA6;background:rgba(255,59,48,.12)}
}
/* ЗОНЫ НАЖАТИЯ мельче 44 — там, где визуально элемент обязан остаться мелким, растим только
область нажатия отрицательным полем (приём уже применён к ссылкам заголовков). «Ввести» в
подписи пробега был 34×15 — попасть пальцем почти невозможно. */
@media (any-pointer:coarse){
/* padding/margin здесь больше не нужны — зону нажатия держит .odo-add::after выше. */
.icon-btn{width:44px;height:44px}
.tab{min-height:44px}
}
/* ПЛАШКА ЛЕНТЫ — НЕ БОЛЬШЕ ТРЁХ СТРОК (владелец, 2026-09-22: «сведи размер плашек в 2-3 строки
не более, и экономь место внутри»). Считаем строки честно: мета (дата · кто) — одна, текст —
максимум две, и всё. Обрезка многоточием, а не скрытый хвост: полный текст живёт в «Журнале»
и в окне ввода, куда строка и ведёт.
У строки С ОТВЕТОМ (поле, кнопки выбора, камера) текст сжимается до ОДНОЙ строки: сам ряд
управления — это уже третья строка плашки, и без этого правила вопрос с полем занимал четыре.
`:has()` здесь уместен — он уже используется в app.css (кнопка консьержа), поддержка та же. */
.frow .t-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.frow .grow:has(.tags) .t-sub{-webkit-line-clamp:1}
.frow>.grow{gap:1px;padding:1px 0}
.frow .fmeta{line-height:1.25}
/* Верхний ярус карточки машины: число с расшифровкой слева, пилюли статуса справа.
На телефоне пилюли переносятся на вторую строку и встают ПО ЛЕВОМУ краю: прижатые вправо
(margin-left:auto) они висели под пустотой, и ярус читался как три несвязанных обрывка. */
@media (max-width:699px){.vhead-top .chips{margin-left:0}}
/* Ряд пилюль шапки начинается от той же линии, что и остальные строки карточки, и не
прижимается к правому краю: прижатый (margin-left:auto) он на телефоне висел под пустотой. */
.vhead-top{align-items:center}
.vhead-top .chips{margin-left:0;align-items:center}
/* ───────── Обход экранов 2026-09-22: то, что «на глаз ощущается плохо» ───────── */
/* 1. КНОПКА ДЕЙСТВИЙ НЕ ВИСИТ ПОВЕРХ ОТКРЫТОГО ЛИСТА. Лист открывается ЕЮ же, и держать её
поверх него бессмысленно: на скриншоте хаба синий «+» торчал над самим хабом. Прячем мягко,
без скачка, пока на экране есть затемнение (.scrim). */
.fab{transition:opacity .14s cubic-bezier(.32,.72,0,1),transform .14s cubic-bezier(.32,.72,0,1)}
body:has(.scrim) .fab{opacity:0;transform:scale(.92);pointer-events:none}
@media (prefers-reduced-motion:reduce){.fab{transition:none}}
/* 2. КНОПКА НЕ ЗАКРЫВАЕТ ПОСЛЕДНИЕ СТРОКИ. Она стоит над рейкой в правом нижнем углу и на всех
списках перекрывала нижнюю строку (на «Машинах» — строку машины целиком). Даём контенту запас
ровно на её высоту с зазором. */
/* flow-root, а не block — иначе верхний отступ шапки (.topbar.material, margin-top 12px)
СХЛОПЫВАЕТСЯ НАРУЖУ и двигает сам контейнер: замер в Opera GX (2026-09-23, «Машины» на 900 и
1024) показал, как .inner стоит на top=0, пока содержимого нет, и уезжает на 12 px, когда
приходит шапка. Человек это видит как «интерфейс появился в одном месте, потом сместился».
Новый контекст форматирования держит отступ внутри: положение контейнера больше не зависит
от того, что в нём уже отрисовано. */
.screen>.inner{display:flow-root}
.screen>.inner{padding-bottom:calc(52px + var(--sp-6))}
/* 3. ШАПКА ЭКРАНА КОМПАКТНЕЕ: 52 px под одно слово — это первый экран, отданный заголовку. */
.topbar{height:44px}
.topbar .t-large{font-size:22px}
/* 4. ПЛИТКИ ХАБА ОДНОЙ ВЫСОТЫ. Подписи в две строки («Добавить документ») делали ряд рваным:
одна плитка 76 px, соседняя 96. Подпись — одна строка, длинную режем многоточием (сами подписи
укорочены в intake.js). */
.hub-cell{min-height:72px}
.hub-cell span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* 5. ЖУРНАЛ: заголовок записи по-прежнему переносится (в нём смысл, см. app.css), но не больше
двух строк — иначе одна длинная запись растягивает строку втрое и ломает ритм списка.
::first-letter — это оформление, а не правка данных: в таблицу клиента работы вписаны с
маленькой буквы («мелкий ремонт по механике»), и в списке это читается как опечатка. */
#journal .row > .grow > .t-sub,
#journal .row.stack > .grow > .t-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#journal .row .t-sub::first-letter{text-transform:uppercase}
/* 6. ВКЛАДКА «ТО»: строка узла не растёт в три яруса. Название («Давление и датчики TPMS»,
«Запаска, домкрат, ключ») переносилось на две строки, под ним шла подпись, и соседние строки
различались по высоте вдвое — список читался рвано. Название — одна строка с многоточием
(полное видно по нажатию, там же история узла), подпись — тоже одна. */
.units .tr:not(.th):not(.gh):not(.hist)>div>span:first-child{
display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.units .tr .sub{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px}
/* Пилюля статуса узла — компактная: «норма» зелёным прямоугольником в полстроки перетягивала
на себя внимание с того, что действительно просрочено. */
.units .tr .pill{height:20px;line-height:20px;padding:0 8px;font-size:11px}
/* Точка вместо пилюли «норма» в списке узлов (vehicle.js::unitRowCompact). Размер — как у метки
новизны в ленте: заметно, что состояние известно и оно хорошее, но внимание не забирает. */
.units .tr .st-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);
justify-self:center;align-self:center}
/* 7. ДВЕ ПЛАШКИ НИКОГДА НЕ ВСТАЮТ ВСТЫК. На широком экране список действий и массовые темы
оказались с зазором ровно 0 px, и их рамки слились в двойную линию («сшились границы»,
владелец 2026-09-22). Зазор задаётся здесь, а не отступом внутри каждой плашки: так его нельзя
потерять при следующей перестановке блоков. */
.today-card .group + .group,
.today-card .group + .sec,
.today-card .kpis + .group{margin-top:var(--sp-3)}
/* Подмена содержимого листа без его закрытия (sheets.js: переход хаб → форма). Кроссфейд вместо
двух анимаций подряд: панель на месте, меняется только то, что внутри. */
@keyframes v2swap{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.sheet.swap>*{animation:v2swap .16s cubic-bezier(.32,.72,0,1)}
@media (prefers-reduced-motion:reduce){.sheet.swap>*{animation:none}}
/* 8. ЛИСТ НА ДЕСКТОПЕ НЕ ПРЫГАЕТ. Мобильная анимация входа v2up задаёт transform:translateY(...),
а на десктопе лист центрируется тем же свойством — translate(-50%,-50%). На время анимации
центровка терялась: лист появлялся в углу и через 180 мс перелетал на 230 px вбок и 325 px вверх
(замер аудита движения 2026-09-22), а уходил вообще другим путём — растворением. Здесь у
десктопа свои ключевые кадры, в которых центровка сохранена, и вход с уходом по одному пути. */
@media (min-width:700px){
.scrim > .sheet{animation:v2upDesk .18s cubic-bezier(.32,.72,0,1)}
.scrim.closing > .sheet{animation:v2downDesk .16s cubic-bezier(.32,.72,0,1) forwards}
}
@keyframes v2upDesk{from{opacity:0;transform:translate(-50%,calc(-50% + 16px)) scale(.985)}
to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes v2downDesk{from{opacity:1;transform:translate(-50%,-50%)}
to{opacity:0;transform:translate(-50%,calc(-50% + 16px)) scale(.985)}}
@media (prefers-reduced-motion:reduce){.scrim > .sheet,.scrim.closing > .sheet{animation:none}}
/* 9. КНОПКА КОНСЬЕРЖА НЕ МИГАЕТ БЕСКОНЕЧНО. Пульс точки (1.6 с) и блик (4 с) крутились всё время,
пока открыт экран, который смотрят каждый день: постоянное движение в углу глаза утомляет и
перестаёт что-либо значить. Три раза — достаточно, чтобы заметить новое; дальше точка просто
горит. */
.ask-dot{animation-iteration-count:3}
.concierge .ask:has(.ask-dot)::after{animation-iteration-count:2}
/* Подпись машины под заголовком листа (sheets.js: opts.vehicleId). Мелко и приглушённо: это
контекст, а не второй заголовок. Блок — чтобы встать строкой под названием формы. */
.sheet-h h2 .sheet-car{display:block;font-size:12px;font-weight:500;color:var(--label2);margin-top:2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Кнопка решения в конце строки-проблемы ленты (vehicle.js::feedFixAction): высотой с тег, а не с
обычную кнопку, чтобы строка оставалась в три строки. */
/* Кнопки ответа в ленте НЕ СЖИМАЮТСЯ, а переносятся на следующую строку. В колонке ленты
(320 px) три варианта ответа не влезали в ряд, и flex ужимал их до неузнаваемости: замер на
машине со скриншота владельца — «Одометр верный, в записи ошибка» имела 115 px при нужных 166,
текст обрезался с многоточием. Ряд и так с переносом (.frow .tags, flex-wrap), не хватало
запрета на сжатие. */
.frow .tags .feed-fix{height:26px;min-height:26px;padding:0 10px;font-size:11px;flex:0 0 auto;max-width:100%}
/* Зона нажатия 44 при видимой высоте 26 — кнопка в ленте остаётся мелкой деталью строки. */
.frow .tags .feed-fix{position:relative}
.frow .tags .feed-fix::after{content:"";position:absolute;inset:-9px -2px}
/* Экран настройки агента (sheets.js::agentSettings). Подпись производителя — мелкая, над своей
группой моделей; поле указаний — во всю ширину, шрифт 16 px (иначе мобильный Safari
приближает страницу при фокусе). */
.agent-prov{margin:var(--sp-2) 0 4px var(--sp-1);text-transform:uppercase;letter-spacing:.04em;font-size:11px}
.agent-prompt{width:100%;box-sizing:border-box;font-family:inherit;font-size:16px;line-height:1.4;color:var(--label);
background:var(--card2);border:1px solid var(--sep);border-radius:var(--r-s);padding:10px 12px;resize:vertical;min-height:88px}
.agent-prompt:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* Модели производителя, для которого на сервере нет ключа: видны, но приглушены и не нажимаются. */
.agent-off{opacity:.5;pointer-events:none}
/* Карточка выбранного агента внутри списка: слегка утопленная подложка, чтобы было видно, что
настройки относятся к строке выше, а не ко всему листу. */
.agent-card{background:var(--card2);border-radius:var(--r-m);padding:2px var(--sp-3) var(--sp-3);margin-top:var(--sp-2)}
.agent-card .sec:first-child{margin-top:var(--sp-2)}
/* ─────────── АГЕНТЫ СТРОКАМИ в разделе «Помощник» (more.js::agentsBlock, 2026-09-22) ───────────
Одна строка — один агент: точка «кто отвечает», три выпадающих списка (роль · мощность ·
производитель), тумблер и крестик. Кнопки «Сохранить» нет: выбор уходит на сервер сразу.
Ширины столбцов заданы долями, а не пикселями, — на 320 px строка не рассыпается, а сжимается. */
.agents{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.agent-row{background:var(--card);border:1px solid var(--sep);border-radius:var(--r-m);padding:8px 10px;box-shadow:var(--shadow)}
.agent-line{display:flex;align-items:center;gap:6px;min-width:0}
.agent-sel{flex:1 1 0;min-width:0;height:34px;font-family:inherit;font-size:13px;color:var(--label);
background:var(--card2);border:1px solid var(--sep);border-radius:var(--r-s);padding:0 6px;
-webkit-appearance:none;appearance:none;background-image:none}
/* Фокус виден кольцом, а не только сменой цвета рамки: у остальных полей проекта
так и сделано, а эти два поля ушли с одной сменой border-color — в тёмной теме на
строке агента её не видно вовсе, и клавиатурой нельзя было понять, где ты стоишь. */
.agent-sel:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}
.agent-sel.w-role{flex:1.15 1 0}
.agent-sel.w-tier{flex:.85 1 0}
.agent-sel.w-prov{flex:1 1 0}
/* Точка «отвечает в чате»: пустой кружок у запасных, залитый у основного. */
.agent-dot{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid var(--label3);
background:transparent;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.agent-dot.on{border-color:var(--ok);background:var(--ok)}
/* Тумблер — тот же приём, что у FROST: дорожка с бегунком, без текста. */
.agent-tgl{flex:none;width:38px;height:22px;border-radius:11px;border:1px solid var(--sep);
background:var(--fill);padding:0;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;
transition:background .16s cubic-bezier(.32,.72,0,1)}
.agent-tgl.on{background:var(--accent-fill);border-color:transparent}
.agent-tgl s{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;
text-decoration:none;transition:transform .16s cubic-bezier(.32,.72,0,1)}
.agent-tgl.on s{transform:translateX(16px)}
/* Крестик и строка расхода стояли на --label3 (прозрачность .30): замер контраста в тёмной
теме дал 2.18:1 при норме 4.5 — читались на грани видимости. --label3 остаётся для
декора (разделители, приглушённые значки), но не для текста и не для управления.
Зона нажатия крестика доводится до 44 px псевдоэлементом — сам он остаётся 28 px,
иначе строка агента разъехалась бы по высоте. */
.agent-x{flex:none;width:28px;height:28px;border:0;background:transparent;color:var(--label2);position:relative;
font-size:20px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.agent-x:active{color:var(--bad-text)}
.agent-x::after{content:'';position:absolute;inset:-8px}
.agent-sub{font-size:11.5px;line-height:1.3;color:var(--label2);margin-top:5px}
.agent-add{width:100%;height:40px;border:1px dashed var(--sep);border-radius:var(--r-m);background:transparent;
color:var(--accent);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
-webkit-tap-highlight-color:transparent}
@media (any-pointer:coarse){.agent-sel{height:38px}.agent-dot{width:18px;height:18px}}
/* ───────── ЭСКИЗЫ РАЗДЕЛОВ ВКЛАДКИ «ТО» (vehicle.js::sectionHeader, 2026-09-22) ─────────
Владелец: «добавь каждому разделу на фон контурный эскиз по теме раздела узлов, чтобы узнавалось
не только по названию, но минималистично с акцентом». Отсюда решения:
• МАСКА, а не картинка в разметке: рисунок красится акцентом переменной темы и одинаково живёт
в светлой и тёмной, а разметка заголовка не меняется вовсе;
• слабая заливка (12%) и размер в высоту строки: это фон-подсказка, а не иллюстрация — текст и
пилюля остаются главными, поэтому содержимое поднято над рисунком z-index'ом;
• семь ключей — ровно семь разделов регламента; незнакомый ключ останется без рисунка. */
/* ВАЖНО: .tosec липкий (position:sticky, app.css) — своего position:relative ему давать нельзя,
иначе заголовок раздела перестанет липнуть под шапкой карточки. Поэтому эскиз — не подложка
absolute, а САМ ЭЛЕМЕНТ СТРОКИ.
МЕСТО — ПЕРЕД НАЗВАНИЕМ (владелец, 2026-09-22, последнее слово: «сделай иконку перед
названием»). Стояла сначала там же, потом по его просьбе уехала к статусу, теперь вернулась:
слева она работает как значок раздела, по которому список узнаётся сверху вниз одним взглядом.
Порядок внутри flex задан order'ами (значок — псевдоэлемент ::after, то есть последний в DOM, и
поднять его в начало строки можно только так): значок — -1, название — 0, пилюля и шеврон — 2,
полоса ресурса — последней строкой. Отступ справа 8 px — чтобы название не липло к рисунку.
Яркость поднята до 0.9 (было 0.75): «чуть ярче выдели». */
.tosec > *{order:2}
.tosec > .t-sub{order:0}
.tosec > .bar{order:9}
.tosec::after{content:'';order:-1;flex:none;width:22px;height:22px;margin-right:8px;
background:var(--accent);opacity:.9;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-position:center;mask-position:center;display:none}
/* display:none по умолчанию: раздел без известного ключа не оставляет пустого места в строке.
Показываем только те семь, для которых рисунок есть (правила ниже). */
.tosec[data-sec="engine_gearbox"]::after{display:block;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.tosec[data-sec="brakes"]::after{display:block;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.tosec[data-sec="tires"]::after{display:block;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.tosec[data-sec="chassis"]::after{display:block;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.tosec[data-sec="electrical"]::after{display:block;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.tosec[data-sec="climate"]::after{display:block;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.tosec[data-sec="body_condition"]::after{display:block;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
/* Журнал: межстрочный чуть плотнее (владелец, 2026-09-22 — «в журнале интервал чуть меньше»).
Трогаем только ленту записей: 1.45 -> 1.28 у названия работы и 1.3 -> 1.2 у подписи; шрифт и
отступы строки прежние, меняется ровно плотность текста внутри неё. */
#journal .row .t-sub{line-height:1.28}
#journal .row .t-foot,#journal .row .jsub{line-height:1.2}
#journal .row{padding-top:7px;padding-bottom:7px}
/* Кнопка «Добавить агента» на потолке: видна, но не нажимается — видно, что вход есть и почему
сейчас нельзя. */
.agent-add.off{opacity:.45;color:var(--label2);cursor:default}
/* ───────── РАЗДЕЛИТЕЛИ СТРОК — ОДИНАКОВЫЕ С ОБЕИХ СТОРОН (владелец, 2026-09-22) ─────────
«В обзоре, где узлы самое срочное, разделитель не до конца строки с одной стороны — сделай все
не до конца, чтобы они были внутри». Так и было: правило «край в край» (app.css) обнуляло
ЛЕВЫЙ отступ, а правый оставался из базового набора — линия упиралась в левый край карточки и
не доходила до правого, то есть выглядела съехавшей. Возвращаем симметричный вдох: линия
отступает от обоих краёв на один и тот же шаг и читается как разделитель ВНУТРИ карточки. */
.group > .row + .row::before,
.group > .vrow + .vrow::before,
.tbl .tr + .tr::before,
.frow + .frow::before{left:var(--sp-4);right:var(--sp-4)}
/* У строк ленты слева стоит цветная полоска состояния — линия начинается после неё, иначе она
перечёркивает полоску и та читается как часть разделителя. */
.frow + .frow::before{left:calc(var(--sp-4) + 4px + var(--sp-3))}
/* ───────── ЛЕНТА: ОТВЕТЫ ВДВОЕ ТОНЬШЕ (владелец, 2026-09-22) ─────────
«Кнопки и поля в ленте могут быть в 2 раза тоньше по высоте — это было бы красивее». Речь о
ряде ответа внутри строки (поле, «Ок», варианты, скрепка): он был высотой с обычную форму
(38/36 px) и перетягивал внимание с самого вопроса. Теперь 24 px — ровно строка текста, как у
тега; шрифт 16 px у поля сохранён (мобильный Safari приближает страницу при меньшем). */
.frow .tags .intake-input input{height:26px;min-height:26px;padding:2px 8px}
.frow .tags .intake-input .btn{height:26px;min-height:26px;padding:0 10px;font-size:11px}
.frow .tags .intake-input > .intake-upload.compact .btn.icon-only{width:26px;min-width:26px;height:26px;min-height:26px}
.frow .tags .intake-choices .btn{height:26px;min-height:26px;padding:0 9px;font-size:11px}
.frow .tags .feed-fix{height:24px;min-height:24px}
.frow .tags{gap:5px}
/* Зона нажатия остаётся пальцевой: сам элемент тонкий, а ловит он 44 px за счёт псевдоэлемента —
тот же приём, что у «Ввести» в шапке карточки. */
@media (any-pointer:coarse){
.frow .tags .btn{position:relative}
.frow .tags .btn::after{content:"";position:absolute;left:0;right:0;top:-9px;bottom:-9px}
}
/* Разделители строк в таблице узлов на «Обзоре» (.units.compact): та же симметрия, что и у
остальных карточек, — линия отступает от обоих краёв. */
.tbl.units .tr + .tr::before{left:var(--sp-3);right:var(--sp-3)}
/* Строка агента, вторая редакция (more.js::agentsBlock, 2026-09-22): имя · роль · производитель ·
модель · крестик. Зелёной точки выбора и тумблера больше нет — работают все строки, которые
есть. Доли столбцов подобраны под 390 px: имя и модель длиннее прочих, поэтому им больше места. */
.agent-name{flex:1.1 1 0;min-width:0;height:34px;font-family:inherit;font-size:13px;color:var(--label);
background:var(--card2);border:1px solid var(--sep);border-radius:var(--r-s);padding:0 8px}
.agent-name:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}
.agent-sel.w-model{flex:1.3 1 0}
.agent-usage{font-size:11px;line-height:1.3;color:var(--label2);margin-top:3px;
font-variant-numeric:tabular-nums}
/* Сводка расхода: три числа в ряд и строка пояснения — тот же приём, что у KPI на «Сегодня»,
только мельче: это справка, а не главный экран. */
.agent-totals{margin-top:var(--sp-2);background:var(--card);border:1px solid var(--sep);
border-radius:var(--r-m);padding:10px 12px;box-shadow:var(--shadow)}
.agent-tot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
.agent-tot-cell{display:flex;flex-direction:column;gap:2px;min-width:0}
.agent-tot-cell b{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.agent-tot-cell span{font-size:11px;line-height:1.25;color:var(--label2)}
.agent-tot-note{margin-top:8px;font-size:11px;line-height:1.35;color:var(--label2)}
@media (any-pointer:coarse){.agent-name{height:38px}}
/* Подтверждение (V2.confirm): текст вопроса и красная кнопка необратимого действия. */
.confirm-text{font-size:15px;line-height:1.4;padding:4px 0 8px}
.btn.primary.danger{background:var(--bad);color:#fff}
.btn.primary.danger:active{opacity:.85}
/* Блок «Сейчас» на Обзоре: строка не режется на полуслове. Обход меню 2026-09-22 поймал
«Индекс здоровья сейчас нечем поднять: всё по регла…» — 87 px текста уходило в многоточие, а
это единственное место, где написано, ПОЧЕМУ оценка такая. Две строки помещаются в ту же
карточку; третья уже растила бы блок, поэтому клип на двух. */
.ov-blk .row .t-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;white-space:normal}
/* ───────── ЕДИНЫЙ ВНУТРЕННИЙ ОТСТУП СТРОК (владелец, 2026-09-22: «экран машины магнитится к
краям», «лента к краю прижата, сделай по формату как все экраны») ─────────
Замер на бою показал разнобой: текст начинался на 33 px от края окна в ленте, на 40–49 в
карточке и на 83–101 в журнале. Карточки-то стоят одинаково (16 px у всех экранов, проверено),
разъезжалось ВНУТРИ них — у каждого вида строки был свой отступ.
Теперь у всех один: 14 px от края карточки, то есть 30 px от края экрана на любом экране. */
.frow{padding-left:var(--sp-3);padding-right:var(--sp-3)}
.tbl .tr{padding-left:var(--sp-3);padding-right:var(--sp-3)}
.units .tr:not(.th){padding-left:var(--sp-3);padding-right:var(--sp-3)}
/* ЖУРНАЛ: колонка даты фиксированной ширины. Даты разной длины («16 июн» и «6 окт 2025») сдвигали
начало текста на 83, 85, 91, 92, 95 и 101 px — список читался как рваный. 58 px хватает самой
длинной дате с годом, лишнего места не остаётся. */
#journal .row > time{flex:none;width:58px;text-align:left}
#journal .row.stack > .lead-col{width:58px}
/* Строка агента — тот же внутренний отступ, что у прочих карточек (было 10 px против 12–14). */
.agent-row{padding-left:var(--sp-3);padding-right:var(--sp-3)}
/* ═══════════ ДИЗАЙН-РЕВИЗИЯ 2026-09-22: одна шкала вместо случайных значений ═══════════
Владелец: «проверь дизайн на наличие тупых бестолковых элементов, чтобы везде соблюдалась
концепция, убери лишние рамки и границы, проверь стандарты».
Замер по экранам показал восемь разных радиусов (5, 7, 8, 9, 10, 12, 999, 50%) и двенадцать
кеглей (11, 11.5, 12, 13, 14, 15, 16, 17, 19, 20, 22, 34). Ни то, ни другое не было решением —
просто накопилось. Ниже шкала, по которой теперь живёт всё.
РАДИУСЫ, пять значений и у каждого своя роль:
4 — номерной знак (он и в жизни почти прямоугольный),
8 — мелкие элементы: кнопки, поля, иконки-плашки, вкладки сегмента,
12 — карточки и группы,
999 — пилюли,
50% — круглое (кнопка действий, точки). */
.seg{border-radius:10px}
.seg > span{border-radius:8px}
.search{border-radius:10px}
.mod .ic{border-radius:8px}
.plate{border-radius:4px}
.agent-sel,.agent-name,.agent-add{border-radius:8px}
/* КЕГЛИ: 11 · 13 · 15 · 17 · 22 · 34. Промежуточные (11.5, 14, 16, 19) убраны — на глаз они
неотличимы от соседних по шкале, а в сумме и создают ощущение «собрано из разного». */
.t-cap,.pill,.fmeta,.agent-sub,.agent-usage{font-size:11px}
.vrow .km b,.btn.plain,.agent-add{font-size:13px}
.kpi .num{font-size:17px}
.agent-tot-cell b{font-size:17px}
/* ЛИШНИЕ РАМКИ. Рамка внутри рамки — двойная граница: карточка уже отделена от фона, и полю
внутри неё вторая линия не нужна, его и так видно фоном. Замер нашёл такие пары на «Ещё»
(поля агента в карточке агента), на «Сегодня» (кнопка консьержа в его карточке) и в ленте
(кнопка решения внутри группы). */
.agent-row .agent-sel,
.agent-row .agent-name{border-color:transparent}
.agent-row .agent-sel:focus,
.agent-row .agent-name:focus{border-color:var(--accent)}
.concierge .ask{border:0}
.frow .tags .feed-fix{border-color:transparent;background:var(--card2)}
/* ТЕНИ: одна на весь интерфейс (--shadow из tokens.css). Вторая, более мягкая, стояла у
одиночных блоков — разница видна только при сравнении рядом, а поводов для двух теней нет. */
.agents .agent-row,.agent-totals,.mod,.kpi{box-shadow:var(--shadow)}
/* Остаток разнобоя, найденный после первой правки шкалы: подпись резины и остаток ресурса
узла шли 14 px — между 13 и 15, то есть ни там, ни там. Ведём к 13: это подписи, а не
заголовки. */
.tire-name,.units .tr .n,.tbl .tr .n{font-size:13px}
/* Названия узлов в компактном списке шли 14 px — последний кегль вне шкалы (между 13 и 15).
Ведём к 15: это заголовок строки, а не подпись, и рядом с ним 11 px мета — контраст размеров
остаётся читаемым. */
.units.compact .tr > div > span:first-child,
.units .tr .ellip{font-size:15px}
/* ═══ ПОЛОСА ПРОКРУТКИ НЕ ДЁРГАЕТ СТРАНИЦУ (владелец, 2026-09-22: «на вебе прыгают интерфейсы
при любых нажатиях») ═══
Замер на 1024, 1280 и 1920: высота документа при переключении вкладок и раскрытии списков
переходит через высоту окна — 900 → 947 → 1448 на карточке, 921 → 1088 на «Сегодня». В обычном
браузере это значит, что полоса прокрутки то появляется, то исчезает, и ВСЯ страница на её
ширину (15–17 px) дёргается влево-вправо при каждом нажатии. В headless-проверке этого не
видно — там полосы наложенные, поэтому раньше замер и показывал «ровно».
scrollbar-gutter:stable резервирует место под полосу всегда: ширина содержимого перестаёт
зависеть от того, влез контент в окно или нет. Только для указателя мыши: на телефоне полос
нет вовсе, и резервировать там нечего. */
@media (min-width:700px) and (any-pointer:fine){
html{scrollbar-gutter:stable}
/* ...и то же самое ВНУТРЕННИМ панелям. Страницу я закрыл, а на широком экране прокручивается
не она, а сами колонки (.inner списка, .card-col, .feed-col — у каждой overflow:auto и своя
полоса). Обход всех кнопок в Opera GX (2026-09-23) поймал именно это: нажатие, меняющее
высоту содержимого, двигало шапку и панель на 20 и 32 px по горизонтали — появлялась и
исчезала полоса внутри колонки. */
.screen>.inner,.card-col,.feed-col{scrollbar-gutter:stable}
}
/* ШИРИНА «СЕГОДНЯ» НА БОЛЬШОМ МОНИТОРЕ. Замер в Opera GX на 1920 (2026-09-23): левая колонка
разъезжается на 1180 px, строка «MAZDA Mazda6 · 26ECHS» тянется через весь экран, а стрелка
перехода оказывается в другом конце строки — читать приходится по диагонали. Наше же правило
плотности держит строку в 45-75 знаках. Колонки остаются в пропорции 2:1, но вся пара теперь
ограничена по ширине и стоит по центру: на 1280 и 1440 не меняется ничего (там пара и так
уже), а на 1920 и шире перестаёт растягиваться. */
@media (min-width:1500px){
.screen#today > .inner{max-width:1340px;margin-left:auto;margin-right:auto}
}
/* Быстрые переключатели в шапке (ui.quickBar): тема · единицы · язык. Размер как у пилюли —
шапка остаётся строкой заголовка, а не панелью управления; 44 px пальцу даёт невидимая зона,
сама кнопка 30. Моноширинные цифры и буквы, чтобы «EN»/«RU» и «миль»/«км» не дёргали соседей
при переключении. */
.qbar{display:flex;align-items:center;gap:6px;flex:none}
.qbtn{position:relative;height:30px;width:38px;min-width:38px;padding:0;border:1px solid var(--sep);
border-radius:999px;background:var(--fill2);color:var(--label2);font-family:inherit;font-size:12px;
font-weight:650;line-height:1;display:inline-flex;align-items:center;justify-content:center;
cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* Зона нажатия ровно 44: сама кнопка 30 (28 на телефоне) плюс невидимое поле. */
.qbtn::after{content:'';position:absolute;inset:-8px -4px}
.qbtn:active{background:var(--fill);color:var(--label)}
.qbtn svg{width:16px;height:16px}
.qtxt{font-size:11px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:.06em}
/* Три кнопки — один набор: одна ширина, одна высота, коды прописными с одной разрядкой, значок
темы того же веса, что буквы (2026-09-24, владелец: «как-то по-разному написано»). */
.qbtn svg{width:15px;height:15px;stroke-width:2}
@media (max-width:420px){
/* На телефоне заголовок и три кнопки в одной строке — кнопки ужимаются первыми. Замер на 360
и 390 (2026-09-23): ряд занимал 110 px при доступных 107 и упирался в край, поэтому зазор и
поля ужаты ещё на пару пикселей. */
.qbtn{height:28px;width:34px;min-width:34px;padding:0;font-size:11px}
.qbar{gap:4px}
}
/* ЧАТ — СТАНДАРТНАЯ РАСКЛАДКА (владелец, 2026-09-23). Тело чата занимает лист целиком и само не
прокручивается: листается только лента сообщений, а строка ввода стоит внизу неподвижно.
Раньше прокручивалось тело листа (.sheet-b), и поле ввода уезжало вместе с перепиской. */
.sheet-b:has(.chat-body){display:flex;flex-direction:column;overflow:hidden;min-height:0}
.chat-body{display:flex;flex-direction:column;flex:1;min-height:0;height:100%}
.chat-body .chat-messages{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.chat-body .chat-input{flex:none}
/* Кнопка отправки — основное действие строки: заливка и белая стрелка, в отличие от скрепки,
которая остаётся тихой. Обе круглые и одного размера, чтобы строка читалась как одна деталь. */
.chat-send{background:var(--accent-fill);color:#fff;border:0;border-radius:50%;width:40px;height:40px;flex:none}
.chat-send:disabled{opacity:.45}
.chat-input>.icon-btn:first-child{flex:none;width:40px;height:40px;border-radius:50%}
/* Короткие действия в строке повестки (today.js::quickActions): «В ремонт» и «Позже». Мелкие,
в одну строку, справа от текста — они дополняют строку, а не спорят с ней за внимание.
На телефоне переносятся под текст, иначе от названия машины остаётся половина. */
.act-fixes{display:flex;gap:6px;flex:none;align-items:center}
.act-fixes .act-fix{height:26px;min-height:26px;padding:0 10px;font-size:12px;white-space:nowrap;flex:0 0 auto}
@media (max-width:520px){
.row:has(.act-fixes){flex-wrap:wrap}
.act-fixes{width:100%;margin-top:6px;justify-content:flex-start}
}
/* ПАЛЬЦУ — 44 px, И НА ПЕРЕКЛЮЧАТЕЛЯХ ТОЖЕ (мобильная ревизия 2026-09-23). Вкладки карточки и
фильтры списков жили на 36 px: попасть можно, промахнуться — тоже. На указателе-пальце полоса
вырастает до 44, на мыши остаётся прежней, чтобы десктоп не раздувался. Это единственное место,
где высота меняется от устройства: всё остальное — общая шкала. */
@media (any-pointer:coarse){
.seg{min-height:44px}
.seg>span{min-height:40px;display:inline-flex;align-items:center;justify-content:center}
/* Ссылки в заголовках разделов («Все 0», «Журнал») — 40 px. Растим невидимой зоной, а не
высотой: заголовок раздела должен остаться строкой, а не превратиться в кнопку. */
.sec a,.t-cap a{position:relative}
.sec a::after,.t-cap a::after{content:'';position:absolute;inset:-2px -6px}
}
/* ОДНА ШКАЛА НА ЭКРАН (ревизия плотности 2026-09-23). На «Машинах» в широком окне жило 8 разных
кеглей и 8 радиусов при норме «не больше четырёх плюс служебный». Вне шкалы были: 12px у
подписи машины, 14px у кнопок и строк таблицы узлов, радиусы 2px у полоски состояния и 14px
у контейнера. Сведено к 11/13/15/17/22/34 и 4/8/10/12/999 — те же числа, что и на остальных
экранах, поэтому список перестал выглядеть «чужим» рядом с карточкой. */
/* ВЫДЕЛЕННАЯ СТРОКА ЧИТАЕТСЯ ПОЛНОСТЬЮ. Единственная надпись, не дотягивавшая до нормы после
сведения шкалы, — индекс машины в ВЫБРАННОЙ строке списка: её подсветка (accent, 10%) съедает
контраст вторичного цвета, и 13px/700 давали 4.48 при норме 4.5. У выбранной строки и так
больше веса на экране, поэтому её цифры берут основной цвет текста, а не приглушённый. */
.vrow.sel .score,.vrow.sel .meta{color:var(--label)}
/* Окно «Доступ к трекерам» (more.js::reconnectSheet, 2026-09-24): поле ссылки — как поля ввода
приложения, только для чтения; главная кнопка во всю ширину, две запасные поровну под ней. */
.src-link{width:100%;height:40px;box-sizing:border-box;border:1px solid var(--sep);border-radius:10px;
background:var(--fill2);color:var(--label2);font-family:inherit;font-size:13px;padding:0 12px;
text-overflow:ellipsis}
.src-open{width:100%;justify-content:center}
.src-alt{display:flex;gap:8px}
.src-alt>.btn{flex:1 1 0;justify-content:center;min-width:0}
/* Превью фото в окне файла (sheets.js::V2.openFile, 2026-09-24): во всю ширину окна, но не выше
60% экрана, чтобы кнопка «Открыть файл» оставалась на виду без прокрутки. */
.doc-preview{display:block;max-width:100%;max-height:60vh;margin:0 auto;border-radius:12px;
object-fit:contain;background:var(--fill2)}
/* ───────── ЛЕНТА КАРТОЧКИ: «Нужно сделать» + «История» (пересборка 2026-09-25) ─────────
Владелец: «некрасиво, пересобери с новой логикой». Два блока разной формы, потому что у них
разный смысл (vehicle.js::feedSection): открытые дела — кружком-флажком без дат, прошлое —
лентой времени. Прежние цветные полоски слева у строк ленты убраны: они окрашивали и вопросы, и
работы одинаково, и глаз не отличал одно от другого. */
.feed-blk[hidden]{display:none}
/* Нужно сделать. Кружок — «ещё не сделано», галочка в нём — «ответили только что». Сохраняется
класс .frow: поля и кнопки ответа из intake.js стилизованы под него (см. «ОТВЕТЫ ВДВОЕ ТОНЬШЕ»). */
.trow{align-items:flex-start}
.trow>.tmark{flex:none;width:16px;height:16px;margin-top:3px;border-radius:50%;box-sizing:border-box;
border:1.5px solid var(--accent);display:grid;place-items:center;color:#fff}
.trow.t-warn>.tmark{border-color:var(--warn)}
.trow.t-muted>.tmark{border-style:dashed;border-color:var(--label3)}
.trow.t-ok>.tmark{background:var(--ok);border-color:var(--ok)}
.trow>.tmark svg{width:10px;height:10px;stroke-width:3.2}
/* Вес заголовка — как у строк истории: на Windows «500» системного шрифта рисуется полужирным, и
блок вопросов кричал рядом с историей. Выделяет дело кружок слева, а не жирность. */
.trow .t-sub{font-weight:400}
/* «Приложить» — текстовая кнопка: её надпись встаёт на линию текста вопроса, а не отступает. */
.trow .tags > .intake-upload > .btn.plain{padding-left:0}
.frow.trow .grow:has(.tags) .t-sub{-webkit-line-clamp:2}
.trow .twhy{font-size:12px;line-height:1.3;color:var(--label2)}
.trow.t-ok .t-sub{color:var(--label2)}
.trow.tmore .t-sub{color:var(--accent)}
/* Разделитель начинается после кружка, как у прежних строк — после полоски. */
.frow.trow + .frow.trow::before{left:calc(var(--sp-3) + 16px + var(--sp-3))}
/* История: число | линия с точкой | работа. Колонки фиксированной ширины — числа дней и точки
стоят одной вертикалью, а текст всегда начинается с одного места. Плотность (2026-09-25,
владелец: «сделай историю более компактной»): строка — две линии по 19 и 16 px и поля 5/6 px,
~47 px вместо прежних 60–110; пробег и действия — справа в строке меты, а не ярусами ниже. */
.hist-list{padding:0 0 4px}
/* Месяц — обычным регистром: капителью уже набран заголовок раздела «История» над плашкой, два
одинаковых яруса капители подряд читались бы как два раздела. */
.hmonth{padding:6px var(--sp-3) 0;font-size:12px;font-weight:600;line-height:18px;color:var(--label2)}
.hrow{display:grid;grid-template-columns:20px 10px minmax(0,1fr);column-gap:8px;padding:0 var(--sp-3)}
.hday{font-size:13px;font-weight:600;line-height:19px;padding-top:5px;text-align:right;
font-variant-numeric:tabular-nums;color:var(--label)}
.hrail{position:relative}
/* Линия месяца идёт от первой точки до последней, а не от края до края плашки: тогда каждый месяц
читается отдельным отрезком под своим заголовком. */
.hrail::before{content:"";position:absolute;left:4px;width:2px;top:0;bottom:0;border-radius:1px;background:var(--fill)}
.hrow.m-first .hrail::before{top:14px}
.hrow.m-last .hrail::before{bottom:auto;height:14px}
.hrow.m-first.m-last .hrail::before,.hadd .hrail::before{display:none}
.hdot{position:absolute;left:1px;top:10px;width:8px;height:8px;border-radius:50%;
background:var(--muted);box-shadow:0 0 0 3px var(--card)}
.hdot.ok{background:var(--ok)}.hdot.warn{background:var(--warn)}.hdot.bad{background:var(--bad)}
.hdot.teal{background:var(--teal)}.hdot.violet{background:var(--violet)}.hdot.accent{background:var(--accent)}
.hbody{min-width:0;padding:5px 0 6px;display:flex;flex-direction:column;gap:1px}
.htitle{min-width:0;font-size:14px;line-height:19px;color:var(--label);overflow-wrap:anywhere;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hmeta{display:flex;align-items:center;gap:8px;min-width:0}
.hmeta>.hsubw{flex:1;min-width:0}
.hright{flex:none;display:flex;align-items:center;gap:8px;height:16px;font-size:12px;color:var(--label2);
font-variant-numeric:tabular-nums;white-space:nowrap}
/* Точка-разделитель стоит ПЕРЕД каждым элементом меты, а сама строка сдвинута влево на её ширину и
обрезана обёрткой: точка перед первым элементом уходит за край. Строка одна, длинный хвост
(обычно источник) уходит в многоточие — полная запись есть во вкладке «Журнал». */
.hsubw{overflow:hidden}
.hsub{margin-left:-11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;
line-height:16px;color:var(--label2)}
.hsub>span::before{content:"·";display:inline-block;width:11px;text-align:center;color:var(--label3)}
.hsub .hcat{font-weight:600}
/* Действие по свежей проблеме («Сменить статус») — ссылкой в строке меты, а не кнопкой
отдельным ярусом; документ — скрепкой. Зона нажатия пальцем добирается псевдоэлементом. */
.hright .feed-fix{height:auto;min-height:0;padding:0;border:0;background:none;font-size:12px;
font-weight:500;color:var(--accent);position:relative}
.hdoc{display:inline-grid;place-items:center;width:16px;height:16px;padding:0;border:0;background:none;
color:var(--accent);cursor:pointer;position:relative}
.hdoc svg{width:14px;height:14px}
.hright .feed-fix::after,.hdoc::after{content:"";position:absolute;inset:-8px -6px}
/* «Записать работу» — первой точкой ленты: кольцо с плюсом на месте точки. */
.hadd{cursor:pointer}
.hadd .htitle{color:var(--accent);font-weight:500}
.hadd .hbody{padding:6px 0 4px}
.hdot.plus{left:-2px;top:8px;width:14px;height:14px;box-sizing:border-box;background:transparent;
border:1.5px solid var(--accent);color:var(--accent);display:grid;place-items:center;box-shadow:none}
.hdot.plus svg{width:9px;height:9px;stroke-width:2.6}
.hmore{display:block;width:100%;border:0;background:none;text-align:left;cursor:pointer;
padding:6px var(--sp-3) 4px calc(var(--sp-3) + 20px + 8px + 10px + 8px);
font:inherit;font-size:13px;color:var(--accent)}