/* Navi — меню и экраны вокруг карты.
   Цвета взяты с экрана навигации, чтобы меню и карта были одним приложением:
   синий — квадрат стрелки манёвра (--accent в drive.css), тёмно-синяя шапка —
   стеклянные плашки над картой. Жёлтый баннер oversize и сигнальный красный
   остались дорожными. Шрифт Overpass нарисован по дорожным знакам США. */
:root {
  --sign: #0B5FD0;
  --sign-ink: #FFFFFF;
  --banner: #FFC400;
  --banner-ink: #2A2100;
  --stop: #B8241B;
  --page: #F2F5F9;
  --panel: #FFFFFF;
  --ink: #17243A;
  --ink-2: #4B5A6E;
  --ink-3: #7D8A9B;
  --line: #DFE5EE;
  --ok-bg: #E4EEFC;
  /* Шапка экранов: цвет стекла плашек навигации, только непрозрачный. */
  --head: #1B2B40;
  --head-glow: rgba(11, 95, 208, .38);
  --card-shadow: 0 1px 2px rgba(20, 40, 70, .05);
  --warn-bg: #FFF0BF;
  --warn: #6B5200;
  --stop-bg: #F7DCDA;
  --radius: 10px;
  --tap: 52px;
  /* Светлая тема — та, что по умолчанию: системную тёмную многие держат
     круглые сутки, а днём в кабине на солнце тёмный экран бликует и читается
     хуже. Ночная включается выбором водителя в «Настройках». */
  color-scheme: light;
}
/* Тёмная тема. Ставится атрибутом на <html> (static/theme.js) — и при прямом
   выборе «ночная», и при «как в телефоне», когда в телефоне ночь. Стилям
   поэтому хватает одного блока, а без скриптов остаётся день. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0D131A;
  --panel: #161F29;
  --ink: #EEF2F7;
  --ink-2: #AEB9C6;
  --ink-3: #7F8C9B;
  --line: #26313E;
  --ok-bg: #132B4D;
  --warn-bg: #3F3400;
  --warn: #F0C650;
  --stop-bg: #3A1512;
  --sign: #2F7BEF;
  --head: #111C29;
  --head-glow: rgba(47, 123, 239, .28);
  --card-shadow: none;
}
/* Размер текста в меню (Настройки → «Текст в меню», static/theme.js). Стили в
   пикселях, поэтому экран меню масштабируется целиком: буквы, кнопки и значки
   растут вместе и не наезжают друг на друга, строки переносятся по новой ширине. */
:root[data-uitext="large"] { --uiz: 1.25; }
:root[data-uitext="xl"] { --uiz: 1.4; }
.app { zoom: var(--uiz, 1); }
/* Карта внутри меню (след поездки в статистике) — без масштаба: под zoom у карты
   сбиваются касания. */
.app .maplibregl-map { zoom: calc(1 / var(--uiz, 1)); }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Overpass", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--page);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}
.app {
  max-width: 480px;
  margin: 0 auto;
  /* vh под zoom тоже растёт — делим обратно, иначе пустая прокрутка внизу.
     svh — высота при видимой адресной строке: 100vh в Chrome на Android выше
     видимой области на эту строку, и меню, которое целиком влезает, всё равно
     прокручивалось с ползунком справа. vh — запас для старых браузеров. */
  min-height: calc(100vh / var(--uiz, 1));
  min-height: calc(100svh / var(--uiz, 1));
  display: flex;
  flex-direction: column;
}

/* Шапка — тёмно-синяя полоса с тонкой сеткой, как лист карты: заголовок экрана
   белым, справа — язык или действие экрана. */
header.top {
  padding: calc(14px + env(safe-area-inset-top)) 16px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: #FFFFFF;
  background-color: var(--head);
  background-image:
    radial-gradient(120% 160% at 100% 0%, var(--head-glow), transparent 60%),
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: auto, 22px 22px, 22px 22px;
  background-position: 0 0, -1px -1px, -1px -1px;
}
/* Ночью шапка почти сливается с фоном — отделяем её тонкой линией. */
:root[data-theme="dark"] header.top { border-bottom: 1px solid rgba(255, 255, 255, .07); }
.top-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.top-logo { width: 34px; height: 34px; border-radius: 8px; flex: none; }
header.top h1 { font-size: 26px; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
header.top a { color: rgba(255, 255, 255, .85); font-size: 15px; text-decoration: none; white-space: nowrap; }
header.top .btn { color: #FFFFFF; border-color: rgba(255, 255, 255, .3); }
/* Выбор языка на тёмной шапке: полупрозрачная плашка, белый текст и треугольник.
   Раскрытый список рисует сам телефон — ему оставляем обычные цвета. */
header.top .lang-select {
  color: #FFFFFF; border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .1) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat right 10px center;
}
header.top .lang-select option { color: #15181A; background: #FFFFFF; }

main { flex: 1; padding: 4px 12px 16px; }
section {
  background: var(--panel); border-radius: 16px; margin-top: 12px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--card-shadow);
}
section > h2 { font-size: 15px; font-weight: 600; color: var(--ink-2); margin: 0; padding: 14px 16px 4px; }
/* Заголовок группы — капсом над карточкой, а не внутри неё: карточка тогда
   целиком из строк, и группы читаются сразу. Без :has остаётся старый вид. */
section:has(> h2:first-child) { margin-top: 40px; overflow: visible; position: relative; }
section > h2:first-child {
  position: absolute; left: 6px; right: 6px; bottom: 100%;
  padding: 0 0 9px;
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hint { font-size: 13px; color: var(--ink-3); margin: 0; padding: 0 16px 14px; }
.empty { padding: 6px 16px 0; color: var(--ink-2); font-size: 15px; margin: 0; }
.inline-error {
  margin: 0 16px 14px; padding: 10px 12px; border-radius: 8px;
  background: var(--stop-bg); color: var(--ink); font-size: 15px;
}
/* «Нашёл 3 пермита: TN, MO, NC» после загрузки пачки (#36). */
.inline-note {
  margin: 0 16px 14px; padding: 10px 12px; border-radius: 8px;
  background: var(--ok-bg); color: var(--ink); font-size: 15px;
}
.inline-note[hidden] { display: none; }
/* Строка внизу главной — только предупреждения; текст ошибки сервера бывает
   длиннее экрана, поэтому переносим принудительно, иначе он растягивает
   страницу и правый столбец кнопок уезжает за край. */
.health {
  color: var(--ink-3); font-size: 13px; text-align: center; margin: 14px 4px 0;
  overflow-wrap: anywhere;
}
.health.warn { color: var(--stop); font-weight: 600; }

/* Вход в обычную навигацию: строка поиска, ведущая на /go. */
.go-entry {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; padding: 12px 16px;
  min-height: 64px;
  background: var(--panel); border-radius: var(--radius);
  color: inherit; text-decoration: none;
  border: 2px solid var(--sign);
}
.go-entry:active { background: var(--page); }
.go-entry > svg { width: 24px; height: 24px; color: var(--sign); flex: none; }
.go-entry-text { min-width: 0; }
.go-entry b { display: block; font-size: 19px; font-weight: 800; }
.go-entry small { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; }

/* Строка пермита */
.permit {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 12px;
  align-items: center; padding: 12px 16px; border-top: 1px solid var(--line);
}
.permit:first-of-type { border-top: 0; }
.state {
  width: 46px; height: 46px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px;
  background: var(--page); color: var(--ink-2);
}
.permit[data-status="ready"] .state { background: var(--sign); color: var(--sign-ink); }
.permit[data-status="review"] .state { background: var(--banner); color: var(--banner-ink); }
.permit[data-status="error"] .state { background: var(--stop); color: #fff; }
.permit .num { font-weight: 600; font-size: 16px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.permit .meta { font-size: 14px; color: var(--ink-2); margin: 2px 0 0; }
/* Ошибка разбора бывает в несколько строк — в строке хватит начала, остальное в панели. */
.permit .meta.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.permit[data-status="review"] .meta, .permit[data-status="error"] .meta { color: var(--ink); }
.permit .cell { min-width: 0; }
.permit .actions { display: flex; align-items: center; gap: 4px; }
/* Список ещё сверяется с сервером: полоса над строками и строки-заглушки. */
.list-loading { display: flex; align-items: center; gap: 10px; padding: 14px 16px 4px; font-size: 14px; color: var(--ink-2); }
.list-loading .bar { flex: 1; margin-top: 0; }
.list-loading[hidden] { display: none; }
.permit.skeleton .state { color: var(--ink-2); }
.permit.skeleton .num.sk { height: 14px; width: 55%; border-radius: 4px; background: var(--page); }

.bar { height: 5px; border-radius: 3px; background: var(--page); margin-top: 8px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 35%; background: var(--sign); border-radius: 3px; animation: read 1.2s ease-in-out infinite alternate; }
@keyframes read { from { transform: translateX(-40%); } to { transform: translateX(230%); } }
@media (prefers-reduced-motion: reduce) { .bar i { animation: none; width: 60%; } }
/* Полоса сборки — доля всего пути пермита. Ширину ставит разметка, а переход
   растягивает шаг на время до следующего опроса (POLL_MS в permits.js). */
.bar.step i { animation: none; width: 0; transition: width 2.4s linear; }
.bar-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.bar-row .bar { flex: 1; margin-top: 0; }
.bar-pct { font-size: 13px; font-weight: 700; color: var(--ink-2); min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
/* Пауза во внешней карте: тише основной строки — это не новость, а объяснение. */
.permit .meta.wait { color: var(--ink-2); opacity: .8; }

/* Серый прямоугольник, который Chrome сам рисует по тапу, живёт дольше самого
   нажатия и выглядит как «кнопка включена». Подсветку рисуем сами — :active. */
a, button, label, .tile { -webkit-tap-highlight-color: transparent; }

button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible,
.switch input:focus-visible + span { outline: 3px solid var(--banner); outline-offset: 2px; }
.btn {
  min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1.5px solid var(--ink);
  background: transparent; font-weight: 600; font-size: 15px; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; color: inherit;
}
.btn.quiet { border-color: var(--line); color: var(--ink-2); font-weight: 400; }
.btn[disabled] { opacity: 0.5; cursor: default; }
.icon-btn { width: 40px; height: 40px; border: 0; background: transparent; color: var(--ink-3); border-radius: 8px; font-size: 22px; line-height: 1; }

/* Панель проверки шага */
.review { grid-column: 1 / -1; background: var(--warn-bg); border-radius: 8px; padding: 12px; }
.permit[data-status="error"] .review { background: var(--stop-bg); }
.review p { margin: 0 0 4px; font-size: 14px; }
.review .raw { font-weight: 600; font-size: 16px; margin: 2px 0 10px; }
.review .why { color: var(--ink-2); }
.review .item { border-top: 1px solid rgba(0, 0, 0, .12); padding-top: 10px; margin-top: 10px; }
.review .item:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.review .choices { display: grid; gap: 8px; margin-top: 10px; }
.review .btn { background: var(--panel); min-height: var(--tap); }
/* «Поставить начало/конец на карте» (/pick): главное действие на карточке ошибки. */
.review .btn.pick-end { background: var(--accent); color: #111; font-weight: 700; }
/* Помощник по маршруту (static/assist.css) рисуется переменными карты — здесь им
   подставлены цвета этого экрана, и светлая с ночной темой работают сами. */
.review .assist {
  --glass-card: var(--panel); --glass-card-hover: var(--page); --glass-edge: var(--line);
  --fg: var(--ink); --fg-dim: var(--ink-2); --medium: var(--warn); --accent: var(--sign);
  --bg-3: var(--panel); --low: var(--stop);
  margin: 12px 0 0;
}
.review .assist-open { min-height: var(--tap); font-size: 16px; }

/* «Исправить маршрут» в строке пермита: жёлтая, как сами участки, во всю ширину —
   палец попадает в кабине с первого раза. Ведёт на карту в режим правки. */
.fix-bar {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: var(--tap); padding: 10px 14px; border-radius: 10px;
  background: var(--banner); color: var(--banner-ink); text-decoration: none;
}
.fix-bar b { font-size: 17px; font-weight: 800; }
.fix-bar span { font-size: 13.5px; }
.fix-bar:active { filter: brightness(.92); }
/* Всё уже подтверждено — вход к правкам спокойный, в зелёной рамке, а не жёлтый. */
.fix-bar.done { background: transparent; color: inherit; border: 1.5px solid #2ea043; }
.fix-bar.done b { font-size: 15px; font-weight: 700; }
.review .fix-one { margin-top: 8px; width: 100%; }

/* Варианты проезда спорного места (баг #333): мини-карты, ✓ зелёным у того, что по
   пермиту, — нажатие выбирает. Объяснение словами — под «Подробнее». */
.review .spots { margin: 2px 0 8px; }
.review .spots-title { font-weight: 700; }
.review .spots-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
.review .spot {
  display: flex; flex-direction: column; gap: 3px; padding: 4px 4px 6px;
  border: 2px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink);
  font: inherit; text-align: left; min-height: var(--tap); min-width: 0;
}
.review .spot:disabled { color: var(--ink); opacity: 1; }
.review .spot:active:not(:disabled) { filter: brightness(.94); }
.review .spot.current { border-style: dashed; }
.review .spot.ok { border-color: #2ea043; }
.review .spot-img { display: block; width: 100%; max-width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; background: rgba(0, 0, 0, .08); }
.review .spot-mark { font-size: 14px; font-weight: 800; color: var(--stop); }
.review .spot.ok .spot-mark { color: #2ea043; }
.review .spot.pending .spot-mark { color: var(--ink-2); font-weight: 600; }
.review .spot-sub { font-size: 13px; color: var(--ink-2); }
.review .spots-wait, .review .spots-none { color: var(--ink-2); font-size: 13.5px; }
.review details.more summary { color: var(--ink-2); font-size: 14px; padding: 6px 0; cursor: pointer; }

/* Срок пермита: просрочен или ещё не начал — красная полоса над всем остальным,
   кончается сегодня-завтра — жёлтая. Водитель видит это при загрузке, а не на весах. */
.valid-bar {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 14px; border-radius: 10px;
  background: var(--stop-bg); border-left: 5px solid var(--stop); color: var(--ink);
}
.valid-bar.warn { background: var(--warn-bg); border-left-color: var(--warn); }
.valid-bar b { font-size: 16.5px; font-weight: 800; }
.valid-bar span { font-size: 13.5px; color: var(--ink-2); }
/* «BOL от прошлого груза — убрать?» и «Убрать прежние пермиты»: вопрос с кнопками. */
.valid-bar .actions { display: flex; gap: 8px; margin-top: 6px; }
#bol > .valid-bar { margin: 8px 16px; }
.archive-old { display: flex; flex-direction: column; gap: 6px; margin: 8px 16px 0; }
.archive-old[hidden] { display: none; }

/* Добавление пермита */
.add { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px 10px; }
.add label {
  min-height: 72px; border: 2px dashed var(--ink-3); border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-weight: 600; font-size: 15px; cursor: pointer; text-align: center; padding: 8px;
}
.add label:active { background: var(--page); }
.add label svg { width: 26px; height: 26px; }
.add input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.add label:focus-within { outline: 3px solid var(--banner); outline-offset: 2px; }
.add.busy { opacity: .6; pointer-events: none; }

/* «Сейчас: BOL № … · откуда → куда · когда загружен ↓» под кнопками BOL (#75). */
.bol-current {
  display: block; width: calc(100% - 32px); margin: 0 16px 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--page);
  color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.bol-current[hidden] { display: none; }
.bol-current b { display: block; font-size: 12px; color: var(--ink-3); font-weight: 600; }

/* Вводная строка экрана сбора поездки: что даёт пара «BOL + пермиты». */
.lead { margin: 12px 4px 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.new-trip { display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin: 10px 0 0; min-height: var(--tap); }
.new-trip[hidden] { display: none; }
.new-trip svg { width: 20px; height: 20px; flex: none; }

/* BOL: две остановки — погрузка и выгрузка */
.stop {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 16px; border-top: 1px solid var(--line);
}
#bol .stop:first-child { border-top: 0; }
.stop .mark {
  width: 44px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; background: var(--sign); color: var(--sign-ink);
}
.stop[data-found="false"] .mark { background: var(--banner); color: var(--banner-ink); }
.stop .cell { min-width: 0; }
.stop .name { font-weight: 600; font-size: 16px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stop .meta { font-size: 14px; color: var(--ink-2); margin: 2px 0 0; }
.stop .meta.warn { color: var(--ink); font-weight: 600; }
.stop-edit { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.stop-edit input {
  font: inherit; color: var(--ink); background: var(--page);
  border: 1px solid var(--line); border-radius: 8px; min-height: 44px; padding: 0 10px; min-width: 0;
}
.bol-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 16px 10px; font-size: 14px; color: var(--ink-2); }
.bol-meta p { margin: 0; min-width: 0; }

/* Лента поездки: по сегменту на пермит, ширина — по милям */
.ribbon-wrap { padding: 8px 16px 16px; }
.ribbon { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--page); gap: 2px; }
.ribbon span { display: block; min-width: 10px; }
.ribbon .ready { background: var(--sign); }
.ribbon .review { background: var(--banner); }
.ribbon .error { background: var(--stop); }
.ribbon .reading { background: repeating-linear-gradient(90deg, var(--ink-3) 0 6px, transparent 6px 12px); }
.ribbon-labels { display: flex; gap: 2px; margin-top: 6px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.ribbon-labels span { min-width: 10px; text-align: center; white-space: nowrap; overflow: hidden; }
.totals { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 15px; }
.totals > div { flex: 1 1 0; min-width: 0; }
.totals b { font-weight: 800; font-size: 20px; display: block; line-height: 1.15; }
.totals div:last-child { text-align: right; }
/* «Часы движения» приезжают из пермита целой фразой — уменьшаем и режем по трём строкам. */
.totals .small b {
  font-size: 14px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Настройки */
.opt { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border-top: 1px solid var(--line); }
/* Подпись ужимается первой: названия систем единиц режутся до «Метры ▾», а
   длинную подпись слева перенести по словам ничего не стоит. */
.opt > div { min-width: 0; flex: 1 1 auto; }
/* Значок строки — в голубом квадратике слева: строку находят по картинке
   раньше, чем прочтут подпись. */
.opt-icon {
  width: 40px; height: 40px; flex: none; align-self: center;
  display: grid; place-items: center;
  border-radius: 12px; background: var(--ok-bg); color: var(--sign);
}
.opt-icon svg { width: 22px; height: 22px; }
.opt > span { flex: none; }
.opt:first-of-type { border-top: 0; }
.opt .t { font-size: 16px; margin: 0; }
.opt .s { font-size: 14px; color: var(--ink-2); margin: 2px 0 0; }
select {
  font: inherit; color: var(--ink); background: var(--page); border: 1px solid var(--line);
  border-radius: 8px; min-height: 40px; padding: 0 10px; max-width: 55%;
}
/* Смена пароля в настройках: два поля в столбик внутри обычной строки `.opt`.
   Кладём их сюда, а не на отдельный экран, — ходят за ними раз в год. */
/* Кнопка справа не ужимается: длинная почта переносила «Выйти» на две строки. */
.opt > button { flex: none; white-space: nowrap; }
.account-form { align-items: flex-start; }
.account-form .opt-icon { align-self: flex-start; }
/* display: flex сильнее браузерного [hidden]: без этой строки форма смены
   пароля показывалась и тем, у кого пароля нет. */
.opt[hidden] { display: none; }
/* Крупный текст меню: рядом со списком подпись ужималась до слова в строке —
   список уходит под подпись, вровень с ней. */
:root:is([data-uitext="large"], [data-uitext="xl"]) .opt:has(> span select, > select) { flex-wrap: wrap; }
:root:is([data-uitext="large"], [data-uitext="xl"]) .opt:has(> span select, > select) > div { flex-basis: calc(100% - 52px); }
:root:is([data-uitext="large"], [data-uitext="xl"]) .opt:has(> span select) > span:not(.opt-icon),
:root:is([data-uitext="large"], [data-uitext="xl"]) .opt > select { margin-left: 52px; }
:root:is([data-uitext="large"], [data-uitext="xl"]) .opt > span select { max-width: none; }
:root:is([data-uitext="large"], [data-uitext="xl"]) .opt > select { max-width: calc(100% - 52px); }
/* Очень крупный: кнопки пермита («Ехать», «Свернуть», ×) — строкой под номером,
   иначе номер и сводка ужимались до слова в строке. */
:root[data-uitext="xl"] .permit .actions { grid-column: 2 / -1; }
:root[data-uitext="xl"] .permit .cell { grid-column: 2 / -1; }
/* Громкость голоса (баг #127): ползунок под подписью, справа процент и «Проверить». */
.volume-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.volume-range { flex: 1 1 auto; min-width: 0; height: 32px; margin: 0; accent-color: var(--sign); cursor: pointer; }
.volume-val { flex: none; min-width: 3.2em; text-align: right; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.opt-volume .hint { padding: 4px 0 0; }   /* подсказка про iPhone (баг #172) */
.account-fields { display: grid; gap: 8px; margin: 8px 0 2px; }
.account-fields input {
  font: inherit; color: var(--ink); background: var(--page);
  border: 1px solid var(--line); border-radius: 8px; min-height: 40px; padding: 0 10px;
}

.switch { position: relative; display: inline-block; width: 52px; height: 32px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 16px; background: var(--ink-3); transition: background .15s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + span { background: var(--sign); }
.switch input:checked + span::after { transform: translateX(20px); }
@media (prefers-reduced-motion: reduce) { .switch span, .switch span::after { transition: none; } }

/* Низ экрана. Кнопка старта — единственный громкий элемент: дорожный указатель. */
footer.go {
  position: sticky; bottom: 0;
  background: var(--page);
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.notice { display: none; background: var(--warn-bg); color: var(--ink); border-radius: 8px; padding: 10px 12px; font-size: 15px; margin-bottom: 8px; }
.notice.show { display: block; }
.start {
  width: 100%; min-height: 64px; padding: 0 16px;
  background: var(--sign); color: var(--sign-ink);
  border: 4px solid var(--sign); border-radius: 14px;
  box-shadow: inset 0 0 0 2.5px var(--sign-ink);
  font-weight: 800; font-size: 24px; letter-spacing: 0.01em;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none;
}
.start svg { width: 26px; height: 26px; flex: none; }
/* Подпись кнопки — всегда одна строка: длинная («Start without a permit»)
   переносилась на две и раздувала кнопку. Не влезла — permits.js уменьшает шрифт. */
.start > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.start[data-state="blocked"] { background: var(--ink-3); border-color: var(--ink-3); }
.start:active { transform: scale(0.99); }
/* «Офлайн в пути» под кнопкой старта поездки (permits.js). */
.offline-opt { display: flex; gap: 10px; align-items: flex-start; margin: 10px 2px 0; cursor: pointer; }
.offline-opt input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: #0B5FD0; }
.offline-opt span { display: grid; gap: 2px; }
.offline-opt b { font-size: 15px; }
.offline-opt small { font-size: 12.5px; color: var(--ink-3); }
/* «Посмотреть маршрут на карте» — тихая кнопка под стартом: карта без ведения. */
.preview-route {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 8px; min-height: 48px; padding: 0 12px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--panel);
  color: var(--ink); font-weight: 700; font-size: 17px; text-decoration: none;
}
.preview-route[hidden] { display: none; }
.preview-route svg { width: 22px; height: 22px; flex: none; }
.preview-route > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.legal { font-size: 13px; color: var(--ink-2); text-align: center; margin: 8px 0 0; }
/* Над стартом — строка «На карте» + «Офлайн» (permits.html); описание офлайна
   и юр. строка — под списком. Вид в скине nassy — chrome.css. */
.go-row { display: flex; gap: 8px; margin-bottom: 8px; }
.go-row:not(:has(> :not([hidden]))) { display: none; }
.go-row .preview-route { flex: 1 1 0; margin: 0; min-height: 44px; font-size: 16px; }
.go-row .offline-opt {
  flex: 1 1 0; margin: 0; min-height: 44px; padding: 0 12px; min-width: 0;
  align-items: center; justify-content: center; gap: 8px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink);
}
.go-row .offline-opt[hidden] { display: none; }
.go-row .offline-opt input { margin: 0; }
.go-row .offline-opt b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.go-more { padding: 0 12px 16px; }
.offline-note { margin: 0 2px; font-size: 13px; color: var(--ink-3); }
.offline-note[hidden] { display: none; }

/* Скин (theme.js → <html data-skin>): разметка обоих видов лежит рядом,
   лишний прячется. По умолчанию — classy. */
:root:not([data-skin="nassy"]) .skin-n,
:root[data-skin="nassy"] .skin-c { display: none !important; }
/* Общие градиенты металлических значков (главная, пермиты) — в разметке, но не в потоке. */
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Переключатель языка: один и тот же на всех экранах (static/i18n.js). */
.top-actions { display: flex; align-items: center; gap: 12px; }
.lang-select {
  /* Общий для селектов потолок в процентах здесь врал: внутри flex-строки он
     считается от ширины, которая сама зависит от селектора, — и «Русский» с
     «Метры и кг» обрывались на «Рус ▾» и «Метры ▾». Ширину задаёт содержимое,
     а ужимается подпись слева. */
  max-width: none; flex: none;
  appearance: none;
  background: var(--panel) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23767676'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink-2); font: inherit; font-size: 15px;
  padding: 7px 26px 7px 10px; min-height: 38px;
}

/* Поездка целиком: склейка маршрутов пермитов со стыками между ними. */
.assemble-top { display: block; width: calc(100% - 32px); margin: 4px 16px 10px; text-align: center; }
.assemble-top[hidden] { display: none; }
.trip-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 16px 10px; }
.trip-actions .btn { flex: 1 1 auto; text-align: center; text-decoration: none; }
.notes { list-style: none; margin: 0; padding: 0 16px 10px; }
.notes li {
  font-size: 13px; color: var(--ink-2); line-height: 1.45;
  padding: 6px 0 6px 12px; border-left: 2px solid var(--line);
}
.notes li.muted { color: var(--ink-3); }
.totals .small b { font-size: 15px; }

/* Габариты: значения из пермита и правки водителя рядом. */
.dims { padding: 4px 16px 6px; }
.dim {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 12px;
  align-items: center; padding: 9px 0; border-top: 1px solid var(--line);
}
.dim:first-child { border-top: 0; }
.dim-name { color: var(--ink-2); font-size: 15px; }
.dim-value { font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; }
.dim-input {
  font: inherit; font-size: 17px; text-align: right;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; min-height: var(--tap); width: 9.5em;
  background: var(--page); color: var(--ink);
}
.dim-marks { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font-size: 12px; font-weight: 600; border-radius: 999px;
  padding: 2px 8px; background: var(--page); color: var(--ink-2);
}
.tag.over { background: var(--warn-bg); color: var(--warn); }
.tag.manual { background: var(--sign); color: var(--sign-ink); }
.dims-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 6px 16px 10px;
}
.dims-actions .s { color: var(--ink-3); font-size: 13px; }

/* Назад в меню: одна и та же стрелка на всех внутренних экранах. */
.top-back {
  width: 42px; height: 42px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1; text-decoration: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .12);
}
header.top a.top-back { color: #FFFFFF; }
.top-back svg { width: 22px; height: 22px; }
.top-back:active { background: rgba(255, 255, 255, .2); }

/* Готовые источники габаритов: пермиты и поездки, уже разобранные сервером. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 16px 10px; }
.chip {
  border: 1.5px solid var(--line); background: var(--page); color: var(--ink);
  border-radius: 999px; padding: 0 14px; min-height: 40px;
  font-size: 15px; font-weight: 600;
}
.chip[aria-pressed="true"] { border-color: var(--sign); background: var(--ok-bg); }

.hint.warn { color: var(--stop); font-weight: 600; }
.start[disabled] { opacity: .7; cursor: default; }

/* Пояснение прямо в карточке, без своей строки: отступ как у текста строк. */
section > p.s { margin: 0; padding: 0 16px 14px 68px; font-size: 14px; color: var(--ink-2); }

/* История пермитов: одна строка-кнопка под всем остальным, раскрывается списком. */
.history-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 56px; padding: 0 16px; border: 0; background: transparent; text-align: left;
}
.history-toggle b { font-size: 16px; font-weight: 700; }
.history-toggle span { color: var(--ink-3); font-size: 14px; }
.history-toggle i { margin-left: auto; font-style: normal; color: var(--ink-3); transition: transform .15s; }
.history-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
#history { border-top: 1px solid var(--line); }
#history .empty { padding: 12px 16px 14px; }
#history .hint { padding-top: 10px; }
.permit.hist .cell { color: inherit; text-decoration: none; }
.permit.hist .cell:active { opacity: .7; }
/* Убранные из поездки — тише тех, по которым едем сейчас. */
.permit.hist.archived .state { opacity: .55; }
.permit.hist.archived .num { color: var(--ink-2); }

/* Страница пермита (/permit?id=): всё из пермита по разделам, вход из истории. */
.pd-wait { padding: 24px 4px 12px; }
.pd-head .permit { border-top: 0; padding-bottom: 6px; }
.pd-head .permit .num { white-space: normal; overflow-wrap: anywhere; font-size: 18px; }
.pd-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px 74px; }
.tag.pd-st-ready { background: var(--sign); color: var(--sign-ink); }
.tag.pd-st-review { background: var(--banner); color: var(--banner-ink); }
.tag.pd-st-error, .tag.pd-bad { background: var(--stop); color: #fff; }
.pd-valid { margin: 0 16px 12px; padding: 10px 12px; border-radius: 10px; background: var(--warn-bg); font-size: 14px; }
.pd-valid.bad { background: var(--stop-bg); }
.pd-valid b { display: block; font-size: 15px; margin-bottom: 2px; }
.pd-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 16px 14px; margin: 0; }
.pd-actions .btn { flex: 1 1 auto; }
.pd-delete { color: var(--stop); }
.kv-box { padding: 4px 16px 8px; }
.kv {
  display: grid; grid-template-columns: minmax(7.5em, 38%) 1fr; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--line); align-items: baseline;
}
.kv:first-child { border-top: 0; }
.kv-name { color: var(--ink-2); font-size: 14px; }
.kv-value { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.kv.kv-list { grid-template-columns: 1fr; gap: 6px; }
.kv.kv-list .notes { padding: 0; }
.pd-pad { padding: 8px 16px 12px; }
.pd-steps { list-style: none; margin: 0; padding: 2px 16px 8px; }
.pd-step { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.pd-step:first-child { border-top: 0; }
.pd-seq {
  width: 26px; height: 26px; border-radius: 50%; background: var(--page); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.pd-step-body { min-width: 0; }
.pd-step-head { display: flex; justify-content: space-between; gap: 10px; margin: 2px 0 0; font-size: 15px; }
.pd-step-head span { color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-step-raw { margin: 3px 0 0; font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }
.pd-files { display: flex; flex-direction: column; gap: 8px; padding: 8px 16px 14px; }
.pd-files .btn { justify-content: flex-start; }
.permit.hist .hist-go { color: var(--ink-3); font-size: 26px; line-height: 1; padding: 0 2px; }
#pd-heading { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Приложение (native.js ставит in-app): фирменная шапка с адресом сайта и
   языком не нужна — адрес водитель видит в магазине, язык выбран при первом
   запуске (i18n.js, firstRunPicker) и меняется в «Настройках». Под строкой
   состояния телефона остаётся отступ, который раньше давала шапка. */
html.in-app header.top-brand { display: none; }
html.in-app header.top-brand + main { padding-top: calc(12px + env(safe-area-inset-top)); }

.lang-first {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
  background: var(--page); color: var(--ink); text-align: center;
}
.lang-first img { width: 180px; max-width: 60vw; height: auto; margin-bottom: 12px; }
.lang-first h1 { font-size: 28px; font-weight: 800; margin: 0; }
.lang-first p { margin: 0 0 12px; color: var(--ink-3); font-size: 16px; }
.lang-first-list { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 360px; }
.lang-first-list button {
  min-height: 64px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font: inherit; font-size: 22px; font-weight: 700;
  box-shadow: var(--card-shadow);
}
.lang-first-list button:first-child { background: var(--sign); color: var(--sign-ink); border-color: var(--sign); }

/* #557 (решение владельца 24.10, «а», Миша): BOL загрузили в пути — «Поехали»
   спрашивает, на погрузку или сразу на выгрузку (permits.js askBolLeg). */
.bol-leg {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, .55);
}
.bol-leg-card {
  width: min(420px, 100%); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px; border-radius: 18px;
  background: var(--panel); color: var(--ink, inherit);
  border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.bol-leg-title { margin: 0 0 4px; font-size: 19px; font-weight: 800; }
.bol-leg-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 56px; padding: 10px 14px; border-radius: 14px; text-align: left;
  font: inherit; color: var(--sign-ink); background: var(--sign); border: 0; cursor: pointer;
}
.bol-leg-btn.delivery { background: #1E8E3E; }
.bol-leg-btn b { font-size: 17px; }
.bol-leg-btn small { font-size: 15px; opacity: .9; }
.bol-leg-cancel {
  min-height: 44px; border-radius: 12px; font: inherit; font-weight: 700;
  color: inherit; background: transparent; border: 1px solid var(--line); cursor: pointer;
}

/* #551 (решение владельца 24.10, «а», Миша, iPad): на планшете весь текст экранов ещё на
   15 % крупнее — меню, пермиты, грузовик, настройки, гараж… Страницы с картой MapLibre
   (статистика с картой поездок) — без масштаба: карта под zoom путает касания;
   /drive и /go увеличены у себя (drive.css, go.css). */
:where([data-device="tablet"]) body:is(.chrome-page, .menu-page):not(:has(.maplibregl-map)) { zoom: 1.15; }