/* ============================================================================
   styles.css — прикладной слой кабинета прораба.
   Дизайн-система живёт в /ui-kit/tokens.css + /ui-kit/ui-kit.css (подключены ДО
   этого файла). Здесь только специфика кабинета: раскладка, форма ТМЦ,
   интерактивный календарь транспорта. Правило кита: никаких hex — только var(--uk-*).
   ========================================================================== */

/* SVG-спрайт в начале body: он ничего не рисует, но в потоке занимал бы строку */
.svg-sprite { position: absolute; }

.hidden { display: none !important; }
[hidden] { display: none !important; }  /* атрибут hidden сильнее display компонентов (uk-empty и т.п.) */
.wrap {
  max-width: 900px; margin: 0 auto;
  padding: 0 calc(var(--uk-space-8) + env(safe-area-inset-right, 0px)) 96px calc(var(--uk-space-8) + env(safe-area-inset-left, 0px));
}

/* --- Топбар: бренд-квадрат «RE» и подпись пользователя --- */
/* Фирменный знак. Кит рисует плашку логотипа янтарной заливкой под белой иконкой,
   у кабинета знак — иллюстрация (каска с эмблемой RE) в холодной гамме. Плашка под ней
   светлая в ОБЕИХ темах: рисунок тёмный, на ночной поверхности он бы пропал.
   Класс идёт вторым к .uk-*__logo, специфичность (0,2,0) перебивает кит (0,1,0). */
.uk-topbar__logo.brand,
.uk-auth__logo.brand { background: var(--uk-brand-plate); overflow: hidden; }
.uk-topbar__logo.brand img,
.uk-auth__logo.brand img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* На входе знак крупнее: там он единственный носитель бренда, кегль топбара тут ни при чём. */
.uk-auth__logo.brand { width: 96px; height: 96px; padding: var(--uk-space-2); }
/* Полотно входа — фирменная дымка вместо бетона: первый экран сразу говорит, чей это кабинет. */
.uk-auth { background: var(--uk-brand-canvas); }
/* Бренд — настоящая кнопка «в кабинет» (был кликабельный div, недоступный с клавиатуры):
   сбрасываем внешний вид кнопки, кегль и начертание остаются от кита. */
.uk-topbar__brand {
  cursor: pointer; background: none; border: 0; padding: 0;
  color: inherit; font-family: inherit; text-align: left;
  flex: none;   /* название продукта не сжимается под соседей и не переносится */
  min-height: var(--uk-tap-min);   /* было 30px по высоте логотипа — ниже порога полевого тач-таргета */
}
.uk-topbar__title { white-space: nowrap; }
/* Своего правила фокуса здесь НЕ нужно: кольцо даёт общее правило кита через outline.
   Прежнее `outline: none; box-shadow: …; border-radius: …` возвращало ту самую схему,
   которую кит уже покинул, — и меняло форму элемента в момент фокуса. */

/* Ссылка «пропустить календарь»: скрыта, пока её не поймали клавиатурой */
.skip-cal:focus {
  position: static; width: auto; height: auto; margin: 0 0 var(--uk-space-2);
  clip: auto; overflow: visible;
  display: inline-flex; align-items: center; min-height: var(--uk-tap-min);
  padding: 0 var(--uk-space-4); border-radius: var(--uk-radius);
  background: var(--uk-surface); color: var(--uk-accent-text);
  border: 1px solid var(--uk-accent); font-size: var(--uk-fs-14); font-weight: var(--uk-fw-semibold);
}
/* Справка «кто вошёл» вторична: без ограничения ширины длинное название
   организации-получателя отжимало бренд и растило липкую шапку с 50 до 77px.
   Ровно две строки, лишнее — многоточием. */
.who {
  text-align: right; font-size: var(--uk-fs-12); color: var(--uk-text-2); line-height: 1.3;
  max-width: 30ch; min-width: 0;
}
.who span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who b { color: var(--uk-text); font-weight: var(--uk-fw-semibold); }

/* --- Заголовки страниц --- */
h1.page { font-size: var(--uk-fs-28); margin: var(--uk-space-10) 0 2px; text-wrap: balance; }
/* Заголовок без подзаголовка снизу (раздел «Мои заявки») сам держит отступ до вкладок */
h1.page--gap { margin-bottom: var(--uk-space-4); }
/* Шапка заявки и ряды внутри неё: отступы жили инлайном в разметке */
.head-card { margin-bottom: var(--uk-space-4); }
.head-card .frow + .frow { margin-top: var(--uk-space-4); }
.page-sub { color: var(--uk-text-2); font-size: var(--uk-fs-13); }
.greet { color: var(--uk-text-2); font-size: var(--uk-fs-14); }
.greet b { color: var(--uk-text); }
/* Отступы приветствия и заголовков блоков — с `.uk-body`, а не сами по себе. Кит гасит
   поля у `p` и `h1–h4` селектором (0,1,1); прикладной класс (0,1,0) ему проигрывал, и
   приветствие стояло вплотную к топбару, а «Ваши заявки сейчас» — к плиткам над ним,
   сколько бы отступа здесь ни было записано. Тот же приём, что у `.uk-hub-tile` ниже.
   `.block-label` лежит и на `div` (позиции формы) — там значения те же, вид не меняется. */
.uk-body .greet { margin: var(--uk-space-10) 0 var(--uk-space-6); }
.uk-body .block-label { margin: var(--uk-space-7) 2px var(--uk-space-3); }
.uk-body .page-sub { margin: 0 0 var(--uk-space-4); }
.uk-body .foot { margin-top: var(--uk-space-8); }
.tabs { margin: var(--uk-space-5) 0 var(--uk-space-4); }
.block-label {
  font-size: var(--uk-fs-18); font-weight: var(--uk-fw-semibold);
  letter-spacing: var(--uk-track-tight); color: var(--uk-text);
  margin: var(--uk-space-7) 2px var(--uk-space-3);
}
.foot { text-align: center; color: var(--uk-text-3); font-size: var(--uk-fs-11); }

/* --- Шапка карточки формы (полоса-«бровь») --- */
.card-bar {
  padding: var(--uk-space-3) var(--uk-space-4); background: var(--uk-surface-2);
  border-bottom: 1px solid var(--uk-border); border-radius: var(--uk-radius-lg) var(--uk-radius-lg) 0 0;
  font-size: var(--uk-fs-11); font-weight: var(--uk-fw-bold); letter-spacing: .09em;
  text-transform: uppercase; color: var(--uk-text-3);
}

/* --- Ряды формы: узкие поля по содержимому --- */
/* Выравнивание по верху, а не по низу: под полем шапки может встать строка причины ошибки,
   и при align-items: flex-end она поднимала своё поле над соседними — строка «Дом · Очередь ·
   Дата заявки» ломалась пополам ровно в тот момент, когда её и нужно читать. По верху
   совпадают подписи, а всё, что висит под полем, растёт вниз и соседей не двигает. */
.frow { display: flex; flex-wrap: wrap; gap: var(--uk-space-3); align-items: flex-start; }
.frow .uk-field { margin: 0; }
/* 116px, а не 104px: «Дом» и «Очередь» — двузначные номера, ширина задана не под ввод,
   а под строку причины «Заполните поле» (109px вместе с иконкой). На 104px она ломалась
   на две строки и растягивала шапку заявки ровно в момент ошибки. Перенос по-прежнему
   разрешён — на системном шрифте другой платформы строка может оказаться шире. */
.uk-field.w-sm { width: 116px; flex: 0 0 auto; }
.uk-field.w-md { width: 178px; flex: 0 0 auto; }
.uk-field.grow, .grow { flex: 1 1 220px; min-width: 170px; }

/* --- Кнопка «добавить секцию» (пунктирный акцент, как в ките) --- */
/* Вспомогательное действие: янтарной заливки во всю ширину здесь быть не должно —
   иначе оно занимает втрое больше площади, чем первичная кнопка отправки.
   Пунктир как «зона добавления» остаётся, заливка приходит только на ховере. */
.add-section {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--uk-space-2);
  max-width: 100%; min-height: 48px; padding: 0 var(--uk-space-4);
  background: transparent; color: var(--uk-accent-text);
  border: 1px dashed var(--uk-accent); border-radius: var(--uk-radius-lg);
  font-family: inherit; font-size: var(--uk-fs-14); font-weight: var(--uk-fw-semibold);
  cursor: pointer; transition: background var(--uk-dur) var(--uk-ease);
}
.add-section:hover { background: var(--uk-accent-soft); }
.add-section svg { width: 18px; height: 18px; }

/* --- Секция поставки (шапка + таблица позиций) --- */
.section { margin-bottom: var(--uk-space-3); }
.section-h {
  display: flex; align-items: center; gap: var(--uk-space-3); flex-wrap: wrap;
  padding: var(--uk-space-2) var(--uk-space-4); background: var(--uk-surface-2); border-bottom: 1px solid var(--uk-border);
  /* Позиций в секции бывает десяток: без липкой шапки на середине списка не видно,
     к какой дате поставки относятся поля. Липнет под топбар (50px, на телефоне 48px). */
  position: sticky; top: 48px; z-index: 1;
  border-radius: var(--uk-radius-lg) var(--uk-radius-lg) 0 0;
}
@media (min-width: 641px) { .section-h { top: 50px; } }
.section-tag { display: flex; align-items: center; gap: var(--uk-space-2); font-weight: var(--uk-fw-bold); font-size: var(--uk-fs-13); letter-spacing: var(--uk-track-tight); }
.section-tag .n {
  width: 22px; height: 22px; border-radius: var(--uk-radius-sm); background: var(--uk-text);
  color: var(--uk-surface); display: grid; place-items: center;
  font-size: var(--uk-fs-12); font-weight: var(--uk-fw-bold); font-variant-numeric: tabular-nums;
}
.section-date { display: flex; align-items: center; gap: var(--uk-space-2); margin-left: auto; flex-wrap: wrap; }
/* Причина ошибки под датой поставки — отдельной строкой, а не сбоку от поля */
.section-date .field-err { flex-basis: 100%; justify-content: flex-end; }
.section-date .uk-label { margin: 0; white-space: nowrap; }
.section-date .uk-input { width: 168px; }
.section-f { padding: var(--uk-space-2) var(--uk-space-3); border-top: 1px solid var(--uk-border); }
/* Секция без позиций: виновного поля нет, поэтому красной становится рамка карточки,
   а причина встаёт рядом с кнопкой «Добавить позицию» — там, где её исправляют. */
.section.section--error { border-color: var(--uk-danger); box-shadow: 0 0 0 1px var(--uk-danger); }
.section-f .field-err { margin-top: var(--uk-space-2); }
.s-del svg { color: var(--uk-danger); } /* красная корзина, как в демо кита */
.s-del:hover { border-color: var(--uk-danger); background: var(--uk-danger-bg); }

/* --- Таблица позиций формы (внутри — поля ввода) --- */
.items-scroll { overflow-x: auto; }
table.pos { width: 100%; border-collapse: collapse; min-width: 680px; table-layout: fixed; }
table.pos th {
  font-size: var(--uk-fs-11); font-weight: var(--uk-fw-bold); letter-spacing: .07em;
  text-transform: uppercase; color: var(--uk-text-2); text-align: left;
  background: var(--uk-surface-2); /* серый заголовок — как у таблиц кита */
  padding: var(--uk-space-2) var(--uk-space-2) var(--uk-space-1); border-bottom: 1px solid var(--uk-border); white-space: nowrap;
}
table.pos td { padding: var(--uk-space-1) var(--uk-space-2); border-bottom: 1px solid var(--uk-border); vertical-align: middle; }
table.pos tr:last-child td { border-bottom: 0; }
/* Пропорции колонок заданы явно и в процентах: в auto-раскладке ширину диктовали
   заголовки с nowrap («ЦЕЛЬ ИСПОЛЬЗОВАНИЯ» длиннее, чем «НАИМЕНОВАНИЕ»), и
   необязательное поле оказывалось шире обязательного, причём тем сильнее, чем уже окно.
   Сумма ровно 100% — таблица не переполняется ни на одной ширине от min-width. */
table.pos th.col-name, table.pos th.col-purpose { white-space: normal; }
.col-n { width: 4%; color: var(--uk-text-3); font-size: var(--uk-fs-12); font-variant-numeric: tabular-nums; text-align: center; }
.col-name { width: 30%; }
.col-qty { width: 12%; }
.col-unit { width: 15%; }
.col-purpose { width: 17%; }
.col-x { width: 7%; }
table.pos td.col-x { padding-left: 0; padding-right: var(--uk-space-1); }
/* min-height не занижаем: чекбокс «дата фикс.» ставят пальцем в перчатке — нужен полный тач-таргет */
/* Подпись «не сдвигается» переносится: колонка теперь пропорциональная, и на узком
   десктопе строка в одну линию вылезала бы за пределы своей ячейки. */
table.pos .uk-check { font-size: var(--uk-fs-12); color: var(--uk-text-2); }
.row-x { border-color: transparent; }
.row-x:hover { color: var(--uk-danger); background: var(--uk-danger-bg); border-color: transparent; }

/* Строка «Срочность: <бейдж>» в панели отправки — раскладка жила инлайном в разметке */
.urg-row { display: flex; align-items: center; gap: var(--uk-space-2); }

/* --- Липкая панель отправки: внутри .wrap, скруглённая, не у самого края --- */
.actionbar {
  bottom: var(--uk-space-3); margin-top: var(--uk-space-4);
  border: 1px solid var(--uk-border-strong); border-radius: var(--uk-radius-lg);
  box-shadow: var(--uk-shadow-3);
}

/* Форма заполнена копией другой заявки. Компонент — штатный .uk-flash--info кита
   (свои цвета не заводим), здесь только отступ: у флеша своего margin нет, и строка
   липла бы к шапке заявки. Прятать нечем, кроме атрибута hidden, — он объявлен выше
   с !important и перебивает display:flex компонента. */
.copy-note { margin-bottom: var(--uk-space-4); }

/* --- Флеш-ошибки формы / входа (uk-flash, показывается по .show) --- */
.form-errors, .auth-err { display: none; margin-bottom: var(--uk-space-4); }
.form-errors.show, .auth-err.show { display: flex; }
.form-errors ul { margin: var(--uk-space-1) 0 0; padding-left: var(--uk-space-6); }
/* Панель принимает фокус после неудачной отправки. Кольцо показываем только при заходе
   с клавиатуры: после клика мышью по «Отправить» рамка вокруг всей панели была бы шумом. */
.form-errors:focus { outline: none; }
.form-errors:focus-visible { outline: var(--uk-focus-width) solid var(--uk-focus); outline-offset: 2px; }
/* Причина под кнопкой «Добавить дату поставки»: у неё нет ни ячейки, ни .uk-field,
   поэтому строка ложится следующим элементом и ей нужен собственный отступ. */
.add-section + .field-err { margin: var(--uk-space-1) 0 var(--uk-space-3); }
/* Причина ошибки живёт под своим полем: одна красная рамка не объясняет, что не так,
   и ничего не сообщает скринридеру. */
.field-err { margin-top: var(--uk-space-1); }
/* Пункт списка ошибок — переход к полю: на форме с десятком позиций красную рамку
   иначе приходится искать глазами. */
.form-errors li button {
  display: flex; align-items: center; min-height: var(--uk-tap-min);
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; text-decoration: underline; cursor: pointer;
}
.form-errors li button:focus-visible { border-radius: var(--uk-radius-sm); }

/* --- Кабинет: панель поиска над чипами (номер / материал / даты поставки) -------
   Поля кита без переопределений: поиск тянется на всю свободную ширину, две даты
   стоят фиксированной парой, «Сбросить» прижата к нижней кромке полей (align-items:
   flex-end) — иначе призрачная кнопка висела бы вровень с подписями. */
.cab-filter {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--uk-space-3); margin: 0 0 var(--uk-space-3);
}
.cab-filter__q { flex: 1 1 240px; min-width: 0; }
.cab-filter__date { flex: 0 0 auto; width: 160px; }
.cab-filter .uk-btn { flex: none; }
@media (max-width: 640px) {
  /* Телефон: поиск занимает строку целиком, две даты делят следующую пополам — при
     фиксированных 160px вторая дата уезжала на третью строку и панель занимала
     треть экрана, на котором и так надо видеть карточки. */
  .cab-filter { gap: var(--uk-space-2); }
  .cab-filter__q { flex: 1 1 100%; }
  .cab-filter__date { flex: 1 1 0; width: auto; min-width: 0; }
  .cab-filter .uk-btn { flex: 1 1 100%; }
}
/* Подсказка «нашлось в позициях…»: карточка объясняет, почему она в выдаче, тем же
   приглушённым кеглем, что и остальные метаданные сводки. */
.req-found {
  display: block; margin-top: var(--uk-space-1);
  font-size: var(--uk-fs-12); color: var(--uk-text-2); line-height: 1.4;
  overflow-wrap: anywhere;
}

/* --- Кабинет: под-вкладки фильтров (Активные / Завершённые / …) --- */
.subtabs { margin: 0 0 var(--uk-space-4); }
/* Размеры иконок жили инлайном в разметке и в шаблонах карточек */
.subtabs .uk-tab > svg { width: 17px; height: 17px; }
/* Фильтров стало четыре — у ТМЦ «Активные / Просроченные / Завершённые / Черновики»,
   у транспорта свой набор с «Ждут диспетчера». Прежний приём (сжать в равные доли,
   flex: 1 1 0) держался ровно на трёх коротких подписях: при four долях ширина падает
   до 84px при 390px, а у чипа white-space: nowrap — и текст вылезал за рамку на 21–24px,
   наезжая на соседний чип. Замер при 360px: «Ждут диспетчера» вылезал на 24px.
   Сетка 2×2 даёт чипу половину строки (около 170px), туда помещается самая длинная
   подпись; ничего не прячется и скроллить не нужно. Ленту со скроллом («Правило
   внутреннего скролла») здесь не берём осознанно: при четырёх фильтрах два уезжают
   за край целиком, а скрытый фильтр читается как отсутствующий — ровно то, ради чего
   и появилось это медиаправило. */
@media (max-width: 640px) {
  .uk-chips.subtabs {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;   /* полоса больше не скроллится — прятать нечего */
  }
  .subtabs .uk-chip {
    flex: none; width: 100%; min-width: 0; justify-content: center;
    min-height: var(--uk-tap-min);
    padding: 0 var(--uk-space-2); font-size: var(--uk-fs-13); gap: var(--uk-space-1);
  }
  .subtabs .uk-chip__count { padding: 1px var(--uk-space-1); }
  .subtabs .uk-tab { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 var(--uk-space-2); }
}

/* --- Кабинет: метаданные в сводке карточки (статус · срочность · дата) ---------
   .uk-req__meta в ките — flex-wrap: wrap, и высота карточки зависела от того, влезла
   ли строка «создана …» рядом с бейджами: в списке из десяти заявок соседние карточки
   отличались на 122 / 129 / 154px. Класс общий (на нём же держатся витрина кита
   и demo-cabinet), поэтому правим не кит, а прикладной слой: сетка с именованными
   областями, в которой переноса нет в принципе. На телефоне бейджи в одну строку не помещаются никогда («Частично готова»
   + «Просрочена на 11 месяцев» — 320px при доступных 278), поэтому срочность уходит
   на вторую строку, а короткая дата встаёт рядом со статусом.
   Высота строки задана явно, чтобы карточка без бейджа срочности была ровно такой же,
   как с ним: кегль бейджа × line-height кита 1.4 + 3px паддинга и 1px рамки с двух сторон. */
#view-my .uk-req__meta {
  --req-meta-row: calc(var(--uk-fs-12) * 1.4 + 8px);
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-areas: 'stage created' 'urg urg';
  grid-template-rows: repeat(2, minmax(var(--req-meta-row), auto));
  column-gap: var(--uk-space-2); row-gap: var(--uk-space-1);
  align-items: center; justify-items: start;
}
#view-my .uk-req__meta > .req-meta__stage { grid-area: stage; }
#view-my .uk-req__meta > .req-meta__urg { grid-area: urg; }
#view-my .uk-req__meta > .req-meta__created {
  grid-area: created; font-size: var(--uk-fs-12); font-variant-numeric: tabular-nums;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Кабинет: счётчик готовности «Поставлено 3 из 4» ---------------------------
   Частичная готовность — штатное состояние модели (PRODUCT.md), но на сводке её не было
   видно: чтобы понять, привезли ли хоть что-то, карточку приходилось разворачивать.
   Счётчику отдана отдельная строка сетки метаданных: рядом с бейджами он не помещается
   («Частично готова» + «Просрочена на 11 месяцев» уже занимают на телефоне обе колонки),
   а собственная строка ещё и выстраивает полосы соседних карточек в один столбец —
   список читается сверху вниз одним движением глаза.
   Строка добавляется ТОЛЬКО панели заявок ТМЦ (#myPaneTmc): карточки броней в соседней
   вкладке живут в том же #view-my на том же классе, и общая строка дала бы им пустое место.
   Высота строки задана явно и резервируется всегда — карточка заявки, у которой позиций
   в кэше нет и счётчика не будет, обязана остаться ровно такой же высоты, как соседние
   (ради этого вся сетка и появилась). */
#myPaneTmc .uk-req__meta {
  --req-ready-row: calc(var(--uk-fs-12) * 1.4);
  grid-template-areas: 'stage created' 'urg urg' 'ready ready';
  grid-template-rows: repeat(2, minmax(var(--req-meta-row), auto)) minmax(var(--req-ready-row), auto);
}
#myPaneTmc .uk-req__meta > .req-meta__ready { grid-area: ready; }
.req-ready {
  display: flex; align-items: center; gap: var(--uk-space-2);
  font-size: var(--uk-fs-12); font-weight: var(--uk-fw-semibold);
  /* Межстрочный задан явно тем же множителем, что и высота строки сетки выше: с наследуемым
     1.45 счётчик оказывался на 0.6px выше зарезервированной строки, и карточка со счётчиком
     отличалась от карточки без него — тот самый разнобой, ради которого сетка и заведена. */
  line-height: 1.4;
  color: var(--uk-text-2); font-variant-numeric: tabular-nums;
}
/* Полная готовность отмечается цветом текста — единственный оставшийся сигнал формы
   после того, как полосу убрали: она была дублем числа и на активных заявках стояла пустой. */
.req-ready.is-full { color: var(--uk-success-text); }
@media (min-width: 641px) {
  /* Широкий экран: всё умещается в одну строку — та же сетка, но в линию */
  #view-my .uk-req__meta {
    grid-template-columns: max-content max-content minmax(0, 1fr);
    grid-template-areas: 'stage urg created';
    grid-template-rows: minmax(var(--req-meta-row), auto);
  }
}
@media (min-width: 641px) {
  /* Бейджи встают в линию, счётчик остаётся под ними: строка метаданных и строка
     готовности — разные вопросы («что со статусом» и «сколько привезли»). */
  #myPaneTmc .uk-req__meta {
    grid-template-areas: 'stage urg created' 'ready ready ready';
    grid-template-rows: minmax(var(--req-meta-row), auto) minmax(var(--req-ready-row), auto);
  }
}

/* --- Кабинет: строки позиций внутри заявки --- */
.req-meta { font-size: var(--uk-fs-12); color: var(--uk-text-2); font-variant-numeric: tabular-nums; }
/* Заявка, к которой пришли с экрана успеха: рамка целиком, без полосы слева (правило кита) */
.uk-req.is-flagged { border-color: var(--uk-accent); box-shadow: var(--uk-shadow-2); }

.uk-req__chev svg { width: 22px; height: 22px; }
.uk-req__group-head svg { width: 16px; height: 16px; }

/* Каждая дата поставки — своя таблица, а при авторазметке колонок каждая таблица мерила
   ширины по СВОЕМУ содержимому: «291 м²» и «Кольцо колодезное КС 10-9» раздвигали столбцы
   по-разному, и «Кол-во» со «Статусом» прыгали по горизонтали от группы к группе (на
   реальной заявке разброс доходил до сотни пикселей). Раскладка внутри карточки задаётся
   явно, одна на все группы, — список читается как одна таблица с подзаголовками-датами.
   Ширины в px, а не в %: столбцы держат «Суперсрочную» и «186 шт.» одинаково на любом
   размере окна, а наименование забирает остаток.
   Только с 641px: ниже кит превращает строки в карточки (display: block), и любая
   фиксированная ширина ячейки эту трансформацию сломала бы. */
@media (min-width: 641px) {
  .uk-req__body .uk-table { table-layout: fixed; }
  .uk-req__body .uk-table th:nth-child(2),
  .uk-req__body .uk-table td:nth-child(2) { width: 110px; }
  .uk-req__body .uk-table th:nth-child(3),
  .uk-req__body .uk-table td:nth-child(3) { width: 168px; }
  /* Длинное наименование переносится, а не растягивает таблицу за край карточки. */
  .uk-req__body .uk-table td:first-child { overflow-wrap: anywhere; }
}

/* Детали брони в развороте карточки («Мои брони») */
.tm-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--uk-space-1) var(--uk-space-4); font-size: var(--uk-fs-14); }
.tm-dl dt { color: var(--uk-text-2); }
.tm-dl dd { margin: 0; overflow-wrap: anywhere; }
.bk-actions { display: flex; gap: var(--uk-space-2); margin-top: var(--uk-space-3); flex-wrap: wrap; }
.pos-list { padding: 2px 0 var(--uk-space-1); }
.pos-line { display: flex; align-items: center; gap: var(--uk-space-3); padding: var(--uk-space-2) 2px; }
.pos-line + .pos-line { border-top: 1px solid var(--uk-border); }
.pos-name { font-size: var(--uk-fs-14); }
.pos-sub { font-size: var(--uk-fs-12); color: var(--uk-text-2); font-variant-numeric: tabular-nums; }
.pos-line .uk-badge { margin-left: auto; }

/* --- Панель «Запросить правку» --- */
.edit-req { border-top: 1px solid var(--uk-border); padding: var(--uk-space-4) 0 2px; margin-top: var(--uk-space-3); }
.edit-req-note { font-size: var(--uk-fs-12); color: var(--uk-text-2); line-height: 1.5; margin-bottom: var(--uk-space-2); }
.edit-req-note b { color: var(--uk-text); font-weight: var(--uk-fw-semibold); }
.edit-req-actions { display: flex; gap: var(--uk-space-2); margin-top: var(--uk-space-2); flex-wrap: wrap; }

/* --- Служебные состояния списков --- */
/* Карточка-каркас на время загрузки: те же поля, что у настоящей карточки заявки */
.skel-card { padding: var(--uk-space-4); }

/* Пустые состояния кабинета — одна форма кита (.uk-empty) на все случаи: нет заявок,
   нет броней, фильтр ничего не нашёл, не загрузилось. Здесь только два модификатора.
   is-inline — компактный вариант там, где полноразмерный блок с кругом 72px распирает
   контейнер: внутри раскрытой карточки заявки и в сводке под плитками хаба. */
.uk-empty.is-inline { padding: var(--uk-space-6) var(--uk-space-4); gap: var(--uk-space-2); }
.uk-empty.is-inline .uk-empty__icon { width: 44px; height: 44px; }
.uk-empty.is-inline .uk-empty__icon svg { width: 22px; height: 22px; }
.uk-empty.is-inline .uk-empty__title { font-size: var(--uk-fs-15); }
.uk-empty.is-inline .uk-empty__text { font-size: var(--uk-fs-13); }
/* is-error — та же форма, тревожная иконка. Красным красится значок, а не заголовок:
   текст ошибки должен читаться так же легко, как остальной. */
.uk-empty.is-error .uk-empty__icon { background: var(--uk-danger-bg); color: var(--uk-danger); }

/* Каркас календаря на первую (самую долгую) загрузку */
.cal-skel { display: grid; gap: var(--uk-space-3); padding: var(--uk-space-4); }

.uk-hub-tile__arrow svg { width: 22px; height: 22px; }

/* --- Живая сводка на хабе: «статус виден без звонка» --- */
/* Ячейка со счётом — ссылка ровно на тот срез, который на ней посчитан: «в работе» →
   фильтр «Активные», «просрочено» → «Просроченные», дата — на саму заявку, брони —
   на «Ждут диспетчера». Цифра на хабе и цифра в чипе списка обязаны совпадать.
   Ячейка со значением «нет» ссылкой НЕ становится: вести в заведомо пустой список
   не за чем, и курсор-рука обещал бы переход, которого нет. */
.uk-body .hub-sum__h { margin-top: var(--uk-space-12); margin-bottom: var(--uk-space-4); }
.hub-sum__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--uk-space-4);
}
@media (min-width: 641px) { .hub-sum__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Ячейка сетки — обёртка: сама плитка внутри бывает и ссылкой, и статичным блоком,
   и в обоих случаях обязана занимать её целиком (иначе кликабельна половина высоты). */
.hub-sum__cell { display: flex; }
.hub-stat {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: var(--uk-space-1); min-height: 76px;
  padding: var(--uk-space-4) var(--uk-space-5);
  background: var(--uk-surface); border: 1px solid var(--uk-border);
  border-radius: var(--uk-radius-lg); box-shadow: var(--uk-shadow-1);
}
/* Ссылка-ячейка. `.uk-body a` (0,1,1) красит её в янтарь и подчёркивает на ховере —
   поднимаем специфичность до 0,2,0, как это уже сделано для плиток хаба. */
.uk-body .hub-stat--link,
.uk-body .hub-stat--link:hover { color: var(--uk-text); text-decoration: none; }
.hub-stat--link {
  cursor: pointer;
  transition: transform var(--uk-dur) var(--uk-ease), box-shadow var(--uk-dur) var(--uk-ease), border-color var(--uk-dur) var(--uk-ease);
}
.hub-stat--link:hover { transform: translateY(-2px); box-shadow: var(--uk-shadow-2); border-color: var(--uk-border-strong); }
.hub-stat--link:active { transform: translateY(0); }
/* Стрелка — тот же знак перехода, что на плитках действий выше: на телефоне ховера нет,
   и без неё кликабельность ячейки ничем не обозначена. */
.hub-stat__go {
  position: absolute; top: var(--uk-space-3); right: var(--uk-space-3);
  display: block; color: var(--uk-text-3);
  transition: transform var(--uk-dur) var(--uk-ease), color var(--uk-dur) var(--uk-ease);
}
.hub-stat__go svg { display: block; width: 16px; height: 16px; }
.hub-stat--link:hover .hub-stat__go { color: var(--uk-text-2); transform: translateX(2px); }
/* Значение не подлезает под стрелку: «15 октября» на узкой колонке переносится по слову */
.hub-stat--link .hub-stat__v { padding-right: var(--uk-space-6); }
@media (prefers-reduced-motion: reduce) {
  .hub-stat--link, .hub-stat__go { transition: none; }
  .hub-stat--link:hover { transform: none; }
  .hub-stat--link:hover .hub-stat__go { transform: none; }
}
.hub-stat__v {
  font-size: var(--uk-fs-22); font-weight: var(--uk-fw-bold); line-height: var(--uk-lh-tight);
  letter-spacing: var(--uk-track-tight); color: var(--uk-text); font-variant-numeric: tabular-nums;
}
.hub-stat__l { font-size: var(--uk-fs-12); color: var(--uk-text-2); line-height: var(--uk-lh-snug); }
/* Ноль — тоже факт, но не новость: гасим цифру, не подпись (контраст подписи остаётся) */
.hub-stat--quiet .hub-stat__v { color: var(--uk-text-3); }
.hub-stat--danger .hub-stat__v { color: var(--uk-danger-text); }
.hub-stat .uk-skeleton { display: block; }
.hub-stat .uk-skeleton--title { width: 42%; height: 22px; }
.hub-stat .uk-skeleton--line { width: 80%; margin: 0; }

/* --- Тост (одиночный, живёт в app.js/flash) --- */
/* Статус несут точка-индикатор и цвет рамки целиком (не полоса слева — см. кит) */
/* Ширина: при left:50% без right доступная ширина была всего (100vw − 50vw − …),
   и тост сжимался до 180px, разваливая фразу на шесть строк. Распорка left/right
   с margin-inline:auto центрирует его и даёт нормальную строку. */
.toast {
  position: fixed; left: var(--uk-space-4); right: var(--uk-space-4);
  bottom: calc(var(--uk-space-8) + env(safe-area-inset-bottom, 0px));
  margin-inline: auto; width: fit-content; transform: translateY(var(--uk-space-6));
  display: flex; align-items: center; gap: var(--uk-space-3);
  background: var(--uk-surface); color: var(--uk-text);
  border: 1px solid var(--uk-border-strong);
  padding: var(--uk-space-4) var(--uk-space-5); border-radius: var(--uk-radius); font-size: var(--uk-fs-14);
  font-weight: var(--uk-fw-semibold); box-shadow: var(--uk-shadow-3);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  z-index: var(--uk-z-toast); max-width: min(90vw, 420px);
}
.toast::before {
  content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--uk-accent);
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.ok { border-color: var(--uk-success-border); }
.toast.ok::before { background: var(--uk-success); }
.toast.err { border-color: var(--uk-danger-border); }
.toast.err::before { background: var(--uk-danger); }

/* --- Экран успеха после отправки --- */
.success-card { padding: var(--uk-space-10) var(--uk-space-7); text-align: center; max-width: 460px; margin: var(--uk-space-8) auto; }
.success-ico {
  width: 56px; height: 56px; border-radius: 50%; background: var(--uk-success-bg);
  color: var(--uk-success); display: grid; place-items: center; margin: 0 auto var(--uk-space-4);
}
.success-ico svg { width: 28px; height: 28px; }
.success-card h2 { font-size: var(--uk-fs-22); margin: 0 0 var(--uk-space-2); text-wrap: balance; }
.success-card p { color: var(--uk-text-2); font-size: var(--uk-fs-14); margin: 0 0 var(--uk-space-6); line-height: 1.55; }
.success-card p b { color: var(--uk-text); }
.success-actions { display: flex; gap: var(--uk-space-2); justify-content: center; flex-wrap: wrap; }

/* --- Экран входа --- */
.auth-hint { text-align: center; color: var(--uk-text-3); font-size: var(--uk-fs-11); }
/* Кегли и отступы бренд-блока и подсказки жили инлайном в разметке */
.uk-auth__brand h1.page { margin: 0; }
.uk-auth .uk-muted-tx { font-size: var(--uk-fs-13); }
.uk-auth__card > .uk-muted-tx { margin: 0; }

/* --- Транспорт: сегменты «тип задачи» --- */
.seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--uk-space-2); }
.seg-opt { position: relative; display: block; cursor: pointer; }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-opt span {
  display: flex; align-items: center; justify-content: center; min-height: var(--uk-tap-min);
  padding: var(--uk-space-2) var(--uk-space-3); text-align: center; font-size: var(--uk-fs-13); font-weight: var(--uk-fw-semibold);
  color: var(--uk-text-2); background: var(--uk-surface-2);
  border: 1px solid var(--uk-border-strong); border-radius: var(--uk-radius);
  transition: border-color var(--uk-dur) var(--uk-ease), color var(--uk-dur) var(--uk-ease), background var(--uk-dur) var(--uk-ease);
}
.seg-opt input:checked + span { color: var(--uk-accent-text); background: var(--uk-accent-soft); border-color: var(--uk-accent); }
.seg-opt input:focus-visible + span { box-shadow: var(--uk-focus-ring); }
@media (max-width: 420px) { .seg2 { grid-template-columns: 1fr; } }

/* --- Транспорт: модалка (доп. элементы поверх uk-modal) --- */
.tmodal-when {
  font-size: var(--uk-fs-13); font-weight: var(--uk-fw-semibold); color: var(--uk-text);
  background: var(--uk-surface-2); border: 1px solid var(--uk-border);
  border-radius: var(--uk-radius); padding: var(--uk-space-2) var(--uk-space-3); margin-bottom: var(--uk-space-4);
}
.tmodal-range { font-size: var(--uk-fs-12); color: var(--uk-text-2); font-variant-numeric: tabular-nums; }
.tmodal-range b { color: var(--uk-text); font-weight: var(--uk-fw-semibold); }
.tm-rows { display: grid; gap: var(--uk-space-2); }
.tm-row { display: flex; gap: var(--uk-space-3); font-size: var(--uk-fs-13); align-items: baseline; }
.tm-row .k { width: 112px; flex: none; color: var(--uk-text-2); font-size: var(--uk-fs-12); }

/* --- Транспорт: выбор техники --- */
.equip-strip { margin: 0 0 var(--uk-space-4); }
/* Плашка режима переноса брони */
#reschedBar { margin: 0 0 var(--uk-space-3); flex-wrap: wrap; gap: var(--uk-space-2); }
#reschedBar .resched-off { margin-left: auto; }
.eq-pick { display: inline-flex; max-width: 100%; }
.eq-pick .uk-select { min-width: 240px; }
@media (max-width: 640px) { .eq-pick { display: flex; } .eq-pick .uk-select { width: 100%; min-width: 0; } }

/* Отступ кнопки «Забронировать технику» жил инлайном в разметке */
.book-cta { margin-top: var(--uk-space-5); }

/* --- Транспорт: панель навигации недели/дня --- */
.wk-nav { margin: 0 0 var(--uk-space-3); }
.wk-nav .uk-iconbtn:disabled { opacity: .4; cursor: default; pointer-events: none; }
#wkAllDays { flex: none; }
/* ‹ › рисуются тем же шевроном спрайта, что и раскрытие карточки, — поворотом */
.wk-nav #wkPrev svg { transform: rotate(90deg); }
.wk-nav #wkNext svg { transform: rotate(-90deg); }
/* Лента дней: в панели остаётся только заголовок — он идёт слева, а не улетает вправо */
.wk-nav.nav-title-only .uk-daynav__title { margin-left: 0; }
/* Заголовок периода — то, что проверяют глазами сразу после клика по ‹ ›, поэтому он
   стоит вплотную к стрелкам; вправо уезжает только «Сегодня». */
.wk-nav .uk-daynav__title { margin-left: var(--uk-space-2); }
.wk-nav #wkToday { order: 1; margin-left: auto; }

/* ===== Транспорт: недельный календарь занятости =====
   Сетка интерактивная (слот-кнопки по 30 минут, проценты от высоты дня),
   HOUR_PX=48 в transport.js синхронизирован с background-size ниже. */
.cal-card { overflow: hidden; margin-bottom: var(--uk-space-4); }
.cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cal { display: grid; grid-template-columns: 52px repeat(7, minmax(112px, 1fr)); min-width: 838px; background: var(--uk-surface); }
.cal.cal-one { grid-template-columns: 52px 1fr; min-width: 0; }
.cal-corner { position: sticky; left: 0; z-index: 4; background: var(--uk-surface); border-bottom: 1px solid var(--uk-border); box-shadow: 1px 0 0 var(--uk-border); }
.cal-dayhead {
  padding: var(--uk-space-2); text-align: center; font-size: var(--uk-fs-12); font-weight: var(--uk-fw-semibold);
  color: var(--uk-text-2); border-bottom: 1px solid var(--uk-border); border-left: 1px solid var(--uk-border); white-space: nowrap;
}
.cal-dayhead b { font-size: var(--uk-fs-14); font-weight: var(--uk-fw-bold); color: var(--uk-text); font-variant-numeric: tabular-nums; margin-left: 2px; }
.cal-dayhead.today b { color: var(--uk-accent-text); }
.cal-timecol { position: sticky; left: 0; z-index: 4; background: var(--uk-surface); box-shadow: 1px 0 0 var(--uk-border); }
.cal-time {
  font-size: var(--uk-fs-11); color: var(--uk-text-3); text-align: right; padding-right: var(--uk-space-2);
  font-variant-numeric: tabular-nums; transform: translateY(calc(-1 * var(--uk-space-2))); user-select: none;
}
/* Подписи часов сдвинуты вверх, чтобы стоять НА линии сетки. У первой сдвигать нечего:
   над ней липкая шапка дней, и верх цифр уходил под неё — «8:00» читалось срезанным. */
.cal-time:first-child { transform: none; }
/* Линии сетки — не декор, а часовая шкала: они совпадают с сеткой слотов (HOUR_PX)
   и служат для отсчёта времени, как разлиновка в ежедневнике. */
/* impeccable-disable-next-line codex-grid-background */
.cal-col {
  position: relative; border-left: 1px solid var(--uk-border);
  background-image:
    linear-gradient(to bottom, var(--uk-border) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--uk-border) 50%, transparent) 1px, transparent 1px);
  background-size: 100% 48px, 100% 24px;
}
/* Тач-ввод: час 64px (HOUR_PX в transport.js), получасовой слот вырастает с 24 до 32px */
@media (pointer: coarse) {
  .cal-col { background-size: 100% 64px, 100% 32px; }
  /* Режим одного дня — основной способ бронировать с телефона: слот доводим до 44px */
  .cal.cal-one .cal-col { background-size: 100% 88px, 100% 44px; }
}
/* Подсветка «сегодня» была 5% акцента — около 1.07:1 к соседней колонке, то есть её
   не было. DESIGN.md обещает «сегодняшняя колонка подсвечена янтарём»; 12% даёт
   различимый, но не мешающий читать сетку тон в обеих темах. */
.cal-col.today { background-color: color-mix(in srgb, var(--uk-accent) 12%, transparent); }
/* Полностью прошедший день — приглушённый фон (поверх него ещё тонировка .cal-slot.past).
   Гасим через утопленную ПОВЕРХНОСТЬ, а не через цвет текста: в тёмной теме --uk-text
   светлый, и color-mix(--uk-text 6%) не гасил, а осветлял — небронируемый день выходил
   заметнее рабочего, ровно наоборот тому, что обещает DESIGN.md. */
.cal-col.past { background-color: var(--uk-surface-sunken); }

/* Прозрачные слот-кнопки (интерактив по 30 минут) */
.cal-slot { position: absolute; left: 0; right: 0; appearance: none; border: 0; padding: 0; background: transparent; cursor: pointer; z-index: 1; border-radius: 0; }
.cal-slot:hover:not(:disabled) { background: color-mix(in srgb, var(--uk-accent) 13%, transparent); box-shadow: inset 0 0 0 1px var(--uk-accent); }
/* Фокус с клавиатуры отличается от ховера: колонка обрезает содержимое, поэтому кольцо
   рисуем внутрь на всю толщину — тонкая рамка ховера как индикатор фокуса не читается. */
.cal-slot:focus-visible { background: color-mix(in srgb, var(--uk-accent) 13%, transparent); box-shadow: inset 0 0 0 var(--uk-focus-width) var(--uk-focus); outline: none; }
.cal-slot.past { cursor: default; background: var(--uk-veil-past); }
.cal-slot.busy { cursor: default; }
/* Слот под чужой заявкой на согласовании: класс вешался из JS, но стиля у него не было —
   бронировать поверх можно, и это должно быть видно до клика. */
.cal-slot.soft { background: color-mix(in srgb, var(--uk-process) 8%, transparent); }

/* Блоки броней: позиция/цвет — из кита (.uk-book--mine/--other/--pending/--sending),
   здесь — поведение поверх сетки */
/* Своя бронь рендерится кнопкой (клавиатурный доступ) — гасим кнопочные умолчания:
   шрифт наследуется, текст по левому краю. Цвет и фон приходят из .uk-book. */
.cal-ev { z-index: 2; pointer-events: none; display: flex; flex-direction: column; gap: 1px; font-family: inherit; text-align: left; }
.cal-ev.own:focus-visible { outline: none; box-shadow: var(--uk-focus-ring); z-index: 3; }
/* Блок брони — контейнер фиксированной высоты (30 минут при HOUR_PX=48 это 24px),
   поэтому строки обязаны сохранять свою высоту: без flex:none они сжимались до трети
   кегля и текст резало пополам по горизонтали. Лишнее срезает overflow родителя. */
.cal-ev > * { flex: 0 0 auto; }
/* Самый низкий блок (получасовая бронь — это slotMinutes, самая частая длительность):
   две строки в 12px контента не помещаются никак, поэтому остаётся одна — название.
   Время читается по позиции блока и есть в aria-label. */
.cal-ev.is-short { flex-direction: row; align-items: center; gap: var(--uk-space-1); padding-top: 0; padding-bottom: 0; line-height: 1; }
.cal-ev.is-short span { display: none; }
.cal-ev b { font-size: var(--uk-fs-11); font-weight: var(--uk-fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cal-ev span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.cal-ev .ev-st { font-size: var(--uk-fs-11); }
.cal-ev.own { pointer-events: auto; cursor: pointer; }
.cal-ev.own:hover { filter: brightness(1.03); }
.cal-ev.uk-book--sending { pointer-events: none; cursor: default; }
/* Завершившиеся события отступают на второй план приглушением ЗАЛИВКИ, а не прозрачностью
   всего блока: opacity .55 роняла контраст подписи до 2.4:1 — время и техника не читались. */
.cal-ev.ev-past { filter: saturate(.6); }
.cal-ev.ev-past b, .cal-ev.ev-past span { color: var(--uk-text-2); }

/* Линия текущего времени */
.cal-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--uk-cal-now); z-index: 3; pointer-events: none; }
.cal-now::before { content: ''; position: absolute; left: -1px; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--uk-cal-now); }
/* Шапка дней остаётся на экране при прокрутке (требование DESIGN.md): для этого
   у сетки должна быть собственная вертикальная прокрутка — иначе sticky не за что
   цепляться, и на невысоком окне колонки теряют подписи «пн 31 / вт 1 / …». */
/* Лента дней: правила привязаны к классу, который ставит сам JS при её отрисовке,
   а не к ширине экрана. Раньше они жили в @media (max-width: 640px), и на планшете,
   где лента теперь тоже показывается, оформление не применялось бы: карточка осталась
   бы с рамкой и тенью, а .cal-scroll получил бы десктопный max-height и обрезал ленту. */
.cal-card.feed-host { background: transparent; border: 0; box-shadow: none; overflow: visible; margin-bottom: 0; }
.cal-card.feed-host .cal-scroll { overflow: visible; max-height: none; }


@media (min-width: 641px) {
  .cal-scroll { max-height: calc(100vh - 230px); max-height: calc(100dvh - 230px); overflow: auto; }
  .cal-dayhead { position: sticky; top: 0; z-index: 5; background: var(--uk-surface); }
  .cal-corner { top: 0; z-index: 6; }
}

/* ===== Транспорт: мобильная лента дней (карточки дня — из кита) ===== */
.feed { display: flex; flex-direction: column; gap: var(--uk-space-2); }
/* pending/sending-сегменты полосы занятости — прикладные модификаторы кита */
/* Прозрачность не форма: состояние «на согласовании» кодируется тем же пунктиром
   процессного семейства, что и в недельной сетке (.uk-book--pending). */
.uk-busybar__seg.is-pending {
  opacity: 1;
  background: var(--uk-process-bg);
  border: 1px dashed var(--uk-process);
}
.uk-busybar__seg.is-sending { animation: evSending 1.1s ease-in-out infinite; }
@keyframes evSending { 50% { opacity: .35; } }
/* Пульс — не украшение, а признак «запись в Битрикс24 ещё идёт»; замороженный, он врёт.
   Парный случай для .uk-book--sending, который кит возвращает в движение сам. */
@media (prefers-reduced-motion: reduce) {
  .uk-busybar__seg.is-sending { animation-duration: 1.4s !important; animation-iteration-count: infinite !important; }
}
.feed-more { margin-top: var(--uk-space-3); }

/* --- Мобильная вёрстка --- */
@media (max-width: 640px) {
  .wrap { padding: 0 calc(var(--uk-space-5) + env(safe-area-inset-right, 0px)) 96px calc(var(--uk-space-5) + env(safe-area-inset-left, 0px)); }
  h1.page { font-size: var(--uk-fs-22); }   /* на телефоне Display занимает слишком много */
  .who { display: none; }
  .uk-topbar__sub { display: none; }
  .tabs { width: 100%; }
  .tabs .uk-tab { flex: 1; justify-content: center; }

  /* Позиции формы превращаются в карточки */
  .items-scroll { overflow: visible; }
  table.pos, table.pos tbody, table.pos tr, table.pos td { display: block; width: auto; }
  table.pos { min-width: 0; }
  table.pos thead { display: none; }
  table.pos tr {
    position: relative; border: 1px solid var(--uk-border); border-radius: var(--uk-radius);
    margin: var(--uk-space-3); padding: var(--uk-space-4) var(--uk-space-3) var(--uk-space-3); background: var(--uk-surface-2);
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--uk-space-2) var(--uk-space-3);
  }
  table.pos td { border: 0 !important; padding: 0; }
  table.pos td[data-label]::before {
    content: attr(data-label); display: block; font-size: var(--uk-fs-11); font-weight: var(--uk-fw-bold);
    letter-spacing: .07em; text-transform: uppercase; color: var(--uk-text-3); margin-bottom: var(--uk-space-1);
  }
  /* Обязательность на телефоне: в карточке подпись рисуется из data-label, и звёздочка из
     шапки таблицы туда не попадала — дорисовываем её тем же янтарём */
  table.pos td.req::before { content: attr(data-label) " *"; }
  table.pos td.col-qty, table.pos td.col-unit { width: auto; }
  /* Во всю ширину — только обязательное наименование. «Цель использования» и
     «не сдвигается» необязательны и делят одну строку: иначе они занимают 42%
     высоты карточки позиции, а таких карточек в заявке десяток. */
  table.pos td[data-label="Наименование"] { grid-column: 1 / -1; }
  table.pos td.col-n {
    position: absolute; top: calc(-1 * var(--uk-space-3)); left: var(--uk-space-4); width: auto; padding: 1px var(--uk-space-2);
    background: var(--uk-text); color: var(--uk-surface); border-radius: var(--uk-radius-sm);
    font-size: var(--uk-fs-11); font-weight: var(--uk-fw-bold);
  }
  table.pos td.col-x { position: absolute; top: var(--uk-space-2); right: var(--uk-space-2); width: auto; }
  table.pos td[data-label="Наименование"] { padding-right: 46px; }
  table.pos .uk-input--num { max-width: none; text-align: left; }

  /* Шапка секции на телефоне: строка 1 — номер секции и удаление, строка 2 — дата целиком.
     Иначе перенос по flex-wrap раскидывал дату и корзину по трём разным строкам. */
  .section-h { row-gap: var(--uk-space-2); }
  .section-tag { order: 1; }
  .section-h .s-del { order: 2; margin-left: auto; }
  .section-date { order: 3; flex-basis: 100%; margin-left: 0; }
  .section-date .uk-input { flex: 1 1 auto; width: auto; }
  .frow .uk-field.grow { flex-basis: 100%; }
  .frow .uk-field.w-sm { flex: 1 1 0; width: auto; min-width: 0; }
  .frow .uk-field.w-md { flex: 1 1 100%; width: auto; min-width: 0; }

  /* Тост поднимается над липкой панелью отправки: иначе он ложится прямо на
     единственную первичную кнопку и её надпись не прочитать. */
  .toast { bottom: calc(96px + var(--uk-space-4) + env(safe-area-inset-bottom, 0px)); }

  .actionbar { flex-wrap: wrap; bottom: var(--uk-space-2); }
  .actionbar .uk-submitbar__info { flex-basis: 100%; }
  .actionbar .uk-btn--primary { flex: 1 1 auto; }
}