/* СЛОЙ 4 — ЭКРАНЫ. То, что верно только для конкретной
   страницы, и адаптив. Если правило нужно двум экранам — ему место в слое
   компонентов. */

/* ---------- дашборд: плитки показателей ---------- */
/* Иерархии не было вовсе: четыре одинаковых прямоугольника, и «активных»
   (192) читалось ровно как «закрыто» (48). Ведущая плитка теперь шире вдвое,
   цифра на ступень крупнее, и у каждой плитки свой цвет смысла — тонкой
   полосой сверху, а не заливкой: заливка цифры сломала бы .stat-num.warn. */
/* Пять колонок, а не четыре: ведущая плитка занимает две, и в сетке из
   четырёх «закрыто» уезжало на второй ряд. 2+1+1+1 = 5. */
.dash-stats { grid-template-columns: repeat(5, 1fr); }
.dash-stats .stat { position: relative; padding: 15px 16px 16px; }
.dash-stats a.stat { color: inherit; text-decoration: none; }
.dash-stats a.stat:hover { border-color: var(--ctl-line-on); background: var(--surface-2); }
/* Полоса смысла — внутренняя тень, а не border-top: рамка сдвинула бы
   содержимое плитки на 2px относительно соседних. */
.dash-stats .stat.is-green { box-shadow: inset 0 2px 0 var(--green); }
.dash-stats .stat.is-cyan { box-shadow: inset 0 2px 0 var(--cyan); }
.dash-stats .stat.is-amber { box-shadow: inset 0 2px 0 var(--amber); }
.dash-stats .stat.is-muted { box-shadow: inset 0 2px 0 var(--line-strong); }
.stat-lead { grid-column: span 2; }
.stat-lead .stat-num { font-size: 40px; line-height: 1.05; }
.dash-history-total {
  margin: 0; padding: 12px 14px; display: grid; align-content: center;
  color: var(--muted); font-size: var(--t-sm); border-top: 1px solid var(--line);
}
.dash-history-total b { color: var(--txt); font: 700 var(--t-base) var(--mono); }
/* Пояснение под подписью: плитка отвечала «сколько», но не «много это или
   мало». Доли считаются в шаблоне из тех же чисел, новых данных нет. */
.stat-note {
  display: block; margin-top: 6px;
  color: var(--muted); font-size: var(--t-sm); font-variant-numeric: tabular-nums;
}

/* ---------- дашборд: разбивка по производителям ---------- */
.manuf-list { list-style: none; margin: 2px 0 0; padding: 0; }
/* Колонки: имя — бар — счёт — доля. Раньше было имя — бар — счёт, и доля
   нигде не показывалась: бары масштабированы к максимуму, поэтому 40 и 53
   выглядели почти одинаково и разбивку приходилось читать по цифрам. */
.bar-row {
  display: grid; grid-template-columns: 104px 1fr 40px;
  gap: 12px; align-items: center; padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.bar-row:last-child { border-bottom: 0; }
.bar { height: 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
/* ширину ставит app.js из data-w: инлайновый style= запрещён политикой */
.bar i {
  display: block; width: 0; height: 100%; border-radius: var(--r-pill);
  background: var(--cyan-base);
  transition: width .8s cubic-bezier(.2, .7, .3, 1); transition-delay: var(--d, 0ms);
}
.bar-row:nth-of-type(1) .bar i { --d: 60ms; }
.bar-row:nth-of-type(2) .bar i { --d: 120ms; }
.bar-row:nth-of-type(3) .bar i { --d: 180ms; }
.bar-row:nth-of-type(4) .bar i { --d: 240ms; }
.bar-row:nth-of-type(5) .bar i { --d: 300ms; }
.bar-row:nth-of-type(n+6) .bar i { --d: 360ms; }
.bar-name { color: var(--txt); font-size: var(--t-sm); overflow-wrap: anywhere; }
/* Счёт — главное число строки: моноширинный, табличный и не серый. */
.bar-num {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: var(--txt); text-align: right; font-size: var(--t-sm); font-weight: 700;
}
.manuf-foot {
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: var(--t-sm);
}
.manuf-foot b { color: var(--txt); font-family: var(--mono); }

/* ---------- дашборд: лента событий ---------- */
/* События не получают собственную вертикальную прокрутку: два скролла на
   одной странице выглядели как вложенное приложение и перехватывали колесо. */
/* Колонки дашборда: рабочее содержимое слева, лента событий — узкой полосой
   справа во всю высоту. Раньше разбивка и события стояли равными колонками
   в .grid-2 и расходились по высоте на 150px, а выравнивание по высоте
   вместо этого давало 270px пустоты внутри короткой карточки. Ширина полосы
   372px — на текст события остаётся ~330px, это две строки, а не четыре. */
.dash-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 372px;
  gap: 12px; align-items: stretch; margin-bottom: 14px;
}
.dash-manuf, .dash-events { display: flex; flex-direction: column; min-width: 0; }
/* Потолок ленты держит высоту ряда: без него события тянули ряд на 534px
   против 248 у разбивки, и под барами оставалась пустая треть карточки.
   Итоговая строка разбивки при этом прижата к низу (.manuf-foot). */
.dash-events { max-height: none; }

/* Все правила ленты скоупнуты под .dash-feed: класс .feed живёт ещё и в
   карточке рекламации (группа, заказы СДЭК, журнал), и общий сдвиг ритма
   поехал бы туда без спроса. */
.dash-feed {
  flex: 1 1 auto; min-height: 0; overflow: visible;
}
/* Метка времени и тикет — первой строкой, текст события — второй.
   ⚠️ Левый отступ обязателен и равен отступу базовой `.feed li`. Точка
   таймлайна и вертикальная линия рисуются псевдоэлементами по `left: 0` и
   `left: 3px`, то есть ВНУТРИ этого отступа. Здесь стояло `padding: 9px 0`, и
   точка ложилась прямо на ведущий ноль даты: «06.08» читалось как дата с
   посторонним глифом впереди, а линия ленты шла сквозь текст. Измерено:
   левый край даты совпадал с левым краем строки, зазор 0 при точке 7px. */
.dash-feed li {
  display: grid; grid-template-columns: auto 1fr;
  gap: 2px 8px; padding: 9px 0 9px 18px; align-items: baseline;
}
.dash-feed .feed-t { grid-row: 1; font-variant-numeric: tabular-nums; }
.dash-feed code { grid-row: 1; justify-self: start; font-size: 12px; }
.dash-feed .feed-note {
  grid-column: 1 / -1; grid-row: 2; font-size: var(--t-sm); color: var(--muted);
  /* Две строки максимум: события разной длины иначе рвут ритм ленты. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- доска рекламаций ---------- */
/* Здесь оператор сидит весь день, и главное здесь — плотность. Было: строка
   78px, потому что «филиал РТРС "Калининградский ОРТПЦ"» переносился на три
   строки, а оборудование на две; на экран 900px влезало восемь рекламаций
   из 192. Стало: одна строка текста на строку таблицы, полное значение —
   в title. Ширины заданы в процентах, а max-width: 0 включает обрез:
   в авторазметке таблицы без него ячейка растягивается под содержимое и
   text-overflow не срабатывает. */
/* Селектор с .table-scroll намеренно: в слое компонентов лежит
   `.table-scroll .tbl { min-width: 720px }` со специфичностью (0,2,0), и
   одиночный `.tbl-claims` ей проигрывал. На 375 таблица вставала в 720px,
   и на филиал с оборудованием оставалось по 52px — колонки показывали
   «Кал…» и «Мо…». При 920px колонки те же, что на большом экране, а
   таблица прокручивается вбок внутри .table-scroll, как и задумано. */
.table-scroll .tbl-claims {
  table-layout: fixed;
  width: 100%;
  min-width: 920px;
}
.tbl-claims td { vertical-align: middle; }
/* Обрез многоточием. У тянущихся колонок он включается через max-width: 0 —
   в fixed-раскладке ячейка без собственной ширины иначе растягивается под
   содержимое. Колонке с заданной шириной max-width: 0 ставить НЕЛЬЗЯ: он
   бьёт width, и «Производитель» схлопывался со 108px до 24px, показывая
   «KV» вместо «KVADRA». Ей хватает своей ширины и overflow. */
/* Только td: заголовку обрез не нужен. Расчёт на перенос на вторую строку
   не сработал: «ПРОИЗВОДИТЕЛЬ» — одно слово без места для разрыва, и при
   white-space: normal + overflow: visible оно не переносилось, а вылезало
   под соседнюю шапку. Замерено: ячейке 108px, тексту 122px. Лечится
   шириной колонки (ниже), а не переносом — разрыв внутри слова читался бы
   как «ПРОИЗВОДИТЕЛ / Ь». */
.tbl-claims td.c-branch, .tbl-claims td.c-equip, .tbl-claims td.c-contacts {
  max-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tbl-claims td.c-manuf { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Ширины заданы только колонкам с предсказуемым содержимым: тикет, серийник,
   номер СЦ, производитель и бейдж статуса. Филиал, оборудование и контакты
   делят остаток поровну средствами fixed-раскладки — это само подстраивается
   под роль (у Индиго нет колонки контактов, и место уходит филиалу с
   оборудованием). Проценты на все восемь колонок в сумме давали 161% и
   сплющивали «Производителя» до 24px: колонка показывала «KV» вместо
   «KVADRA». Числа подрезаны под фактическое содержимое (моноширинный
   12.5px): тикет «РТ-ДЕМО-2026-240» — 16 знаков, серийник — 13. */
.tbl-claims .c-ticket { width: 130px; }
.tbl-claims .c-ticket .pos { display: block; margin: 3px 0 0; font-size: var(--t-xs); color: var(--muted); }
.tbl-claims .c-serial { width: 118px; }
.tbl-claims .c-sc { width: 80px; }
/* 126px, а не 108: содержимому («KVADRA», «Гравитон») хватало и 108,
   заголовку — нет. Недостающие 18px берутся у тянущихся колонок, где обрез
   многоточием и так предусмотрен, а полное значение лежит в title. */
.tbl-claims .c-manuf { width: 126px; }
.tbl-claims .c-status { width: 106px; }
.claim-mobile-list, .mobile-data-list, .help-transition-list, .mobile-data-total { display: none; }
.claim-mobile-card {
  min-height: 144px; display: grid; gap: 8px; padding: 14px;
  color: var(--txt); text-decoration: none; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-card);
}
.claim-mobile-card.is-stale { border-left: 4px solid var(--amber-line); }
.claim-mobile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.claim-mobile-card > b { font-size: var(--t-base); line-height: 1.35; }
.claim-mobile-meta { color: var(--muted); font-size: var(--t-sm); }
.claim-mobile-action {
  display: grid; gap: 1px; margin-top: 2px; padding-top: 9px;
  border-top: 1px solid var(--line); color: var(--cyan-strong);
  font-size: var(--t-sm); font-weight: 650;
}
.claim-mobile-action > span {
  color: var(--muted); font-size: var(--t-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}

/* Мобильное представление служебных таблиц. На планшете две карточки в ряд,
   на телефоне одна; горизонтальный скролл для основных рабочих данных не
   требуется. Таблица остаётся в DOM источником сортировки и пагинации. */
.mobile-data-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 10px;
}
.mobile-data-card {
  min-width: 0; min-height: 132px; padding: 13px 14px;
  display: grid; gap: 8px; align-content: start;
  color: var(--txt); text-decoration: none; overflow-wrap: anywhere;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-card);
}
a.mobile-data-card:hover { border-color: var(--cyan-line); background: var(--cyan-bg); }
.mobile-data-head {
  min-width: 0; display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  color: var(--muted); font-size: var(--t-xs);
}
.mobile-data-head > * { min-width: 0; overflow-wrap: anywhere; }
.mobile-data-card > b { font-size: var(--t-base); line-height: 1.35; }
.mobile-data-card > span:not(.mobile-data-head):not(.mobile-data-action) {
  color: var(--muted); font-size: var(--t-sm);
}
.mobile-data-action {
  min-height: 44px; margin-top: auto; padding-top: 9px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  color: var(--cyan-strong); border-top: 1px solid var(--line);
  font-size: var(--t-sm); font-weight: 700;
}
.mobile-data-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.mobile-data-facts > div { min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-ctl); }
.mobile-data-facts dt { color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; }
.mobile-data-facts dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.mobile-data-note { padding-top: 8px; border-top: 1px solid var(--line); }
.mobile-data-total {
  min-height: 56px; margin-top: 10px; padding: 10px 12px;
  align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--cyan-line); border-radius: var(--r-ctl);
  background: var(--cyan-bg);
}
.mobile-data-total span { color: var(--muted); font-size: var(--t-sm); }
.mobile-data-item.is-off { display: none; }

/* Просрочка. Полосы в 2px на первой ячейке было мало: на 192 строках её
   не видно, пока не искать глазами. Теперь полоса шире и вся строка идёт
   на янтарном фоне в одну сотую — цвет читается, но текст не теряет
   контраст (замерено: 12.4:1 против 12.6:1 на обычной строке). */
.tbl-claims tbody tr.is-stale > td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.tbl-claims tbody tr.is-stale > td { background: rgba(251, 191, 36, .045); }
.tbl-claims tbody tr.is-stale:hover > td { background: rgba(251, 191, 36, .09); }
/* Чётная подсветка не должна спорить с янтарной: без этого просроченная
   чётная строка получала два фона и полоса читалась грязной. */
.tbl-claims tbody tr.is-stale:nth-child(even) { background: none; }

.filters-reset { margin-left: -2px; }

/* ---------- описание статуса: лента записей и редактор ---------- */
/* Заголовок с кнопкой справа. Линию тут рисует контейнер, а не h2: иначе
   она обрывалась бы по ширине слова «Описание статуса». */
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 8px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.card-head h2 { margin: 0; padding-bottom: 0; border-bottom: 0; }

.status-log { list-style: none; margin-top: 4px; }
.status-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.status-item:last-child { border-bottom: 0; }
.status-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.status-date { font-family: var(--mono); font-size: 13px; color: var(--cyan); }
.status-meta .muted { font-size: 12.5px; }
/* действия уезжают вправо и проявляются на наведении: в спокойном состоянии
   лента должна читаться как текст, а не как панель кнопок */
/* Приглушение цветом, а не прозрачностью. opacity: .35 держала «Править» на
   2.76:1, а «Удалить» на 1.80:1 при норме 4.5 — в спокойном состоянии кнопки
   были нечитаемы. Замысел верный: лента должна читаться как текст, а не как
   панель кнопок, — но добиваться этого надо цветом. */
.status-acts { margin-left: auto; display: flex; gap: 6px; }
.status-acts .btn { color: var(--muted); border-color: transparent; background: transparent; }
.status-item:hover .status-acts .btn,
.status-acts:focus-within .btn { color: var(--txt); border-color: var(--line-strong); background: var(--surface-2); }
.status-acts .btn-danger { color: var(--red-base); }
.status-item:hover .status-acts,
.status-acts:focus-within { opacity: 1; }
.status-text { overflow-wrap: anywhere; }
.status-text > :first-child { margin-top: 0; }
.status-text p { margin: 0 0 6px; }
.status-text p:last-child { margin-bottom: 0; }
.status-text ul, .status-text ol { margin: 0 0 6px; padding-left: 20px; }
.status-text li { margin: 2px 0; }
.status-text b { color: #f1f5f9; }
.status-text code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
/* архивный текст пришёл из таблицы как есть — помечен полосой, чтобы его не
   путали с записями, которые система вела сама */
.is-legacy .status-text {
  border-left: 2px solid var(--line-strong); padding-left: 10px;
  color: var(--muted); white-space: pre-wrap;
}

.status-form { margin-top: 14px; }
.status-row { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-bottom: 8px; }
.status-row .muted { font-size: 12.5px; padding-bottom: 8px; }
.field { display: grid; gap: 4px; }
.field > span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.status-editform { margin: 6px 0 2px; }

.editor { border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--field); }
.editor-bar {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--surface-2);
  border-radius: var(--r-ctl) var(--r-ctl) 0 0;
}
.editor-bar .btn { padding: 3px 9px; font-size: 12.5px; line-height: 1.4; }
.editor-hint { margin-left: auto; font-size: 11.5px; font-family: var(--mono); }
.editor textarea {
  display: block; width: 100%; border: 0; background: transparent; color: var(--txt);
  font: inherit; padding: 10px 12px; resize: vertical; min-height: 68px;
}
/* Кольцо рисует контейнер, а не textarea: у поля нет своей рамки, кольцо
   вокруг него шло бы по внутреннему краю редактора. Само кольцо — то же, что
   у остальных контролов (раздел «доступность»), здесь только рамка. */
.editor:focus-within { border-color: var(--cyan); }
.editor-preview {
  border-top: 1px dashed var(--line-strong); padding: 10px 12px;
  overflow-wrap: anywhere;
}
.editor-preview::before {
  content: "предпросмотр"; display: block; margin-bottom: 4px;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.editor-preview > :nth-child(2) { margin-top: 0; }
.editor-preview p { margin: 0 0 6px; }
.editor-preview p:last-child { margin-bottom: 0; }
.editor-preview ul, .editor-preview ol { margin: 0 0 6px; padding-left: 20px; }
.editor-preview code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }

/* ---------- логин ---------- */
/* Претензия заказчика номер один: «окно входа выглядит вообще не кошерно».
   Карточка при этом была отцентрована точно — на окне 880 отступы 220 и 220.
   Дело было не в положении, а в том, что вокруг неё не было ничего: поле
   #080e1a без единого перепада (background-image: none, замерено), и в этой
   пустоте карточка читалась как окно ошибки, а не как вход в систему.

   Поэтому карточку не двигаем — строим вокруг. Фон собран слоями прямо в
   background, БЕЗ псевдоэлементов: .content.solo — грид с place-items: center,
   и ::before/::after стали бы его элементами, встали бы в поток и сломали ту
   самую центровку. Внешних картинок нет и быть не может — CSP отдаёт
   default-src 'self'; шум идёт data-URI, это img-src 'self' data: разрешает. */
.content.solo {
  position: relative;
  background-color: var(--bg);
  background-image:
    /* 1. зерно: снимает «пластик» плоской заливки. Доля подобрана замером —
       на .4 шум забивал сетку целиком и фон читался грязным, работает .05 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"),
    /* 2. свет за карточкой и подсветка снизу слева — глубина без теней */
    radial-gradient(58% 46% at 50% 36%, color-mix(in srgb, var(--cyan) 13%, transparent), transparent 72%),
    radial-gradient(52% 46% at 6% 98%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 70%),
    /* 3. виньетка: гасит сетку к краям, собирает взгляд в центр */
    radial-gradient(78% 70% at 50% 44%, transparent 44%, var(--bg) 100%),
    /* 4. техническая сетка 56px — знак служебной системы, не украшение */
    repeating-linear-gradient(to right, color-mix(in srgb, var(--line-strong) 45%, transparent) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--line-strong) 45%, transparent) 0 1px, transparent 1px 56px),
    /* 5. общий подъём светлоты кверху */
    linear-gradient(to bottom, var(--surface-2), var(--bg) 60%);
  background-size: 160px 160px, auto, auto, auto, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
  background-position: center;
}

/* Колонка входа: знак — карточка — сноска. Ширина ровно та же, что была. */
.login-wrap { width: min(440px, 100%); display: grid; justify-items: center; position: relative; }
.login-theme { width: auto; position: absolute; right: 0; top: -8px; }
.login-art {
  position: absolute; right: calc(100% + 36px); top: 50%; translate: 0 -45%;
  width: min(32vw, 400px); height: auto; max-height: 520px; object-fit: cover;
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--elev-3);
}

/* Крупный знак вынесен над карточкой: внутри неё он конкурировал с
   заголовком, снаружи — открывает композицию. 46px были меньше кнопки. */
.login-mark {
  width: 72px; height: 72px; margin-bottom: 22px;
  display: grid; place-items: center;
  color: var(--cyan-strong);
  background:
    radial-gradient(120% 120% at 50% 0%, var(--cyan-bg-2), var(--cyan-bg) 70%);
  border: 1px solid var(--cyan-line); border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--line), 0 0 0 9px var(--cyan-bg), var(--elev-2);
}
.login-mark .ic { width: 34px; height: 34px; stroke-width: 1.6; }

.login-card {
  width: 100%;
  background: linear-gradient(to bottom, var(--surface-2), var(--surface) 46%);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); padding: 30px 30px 32px;
  box-shadow: var(--elev-3);
}

.login-head { text-align: center; margin-bottom: 26px; }
/* Заголовок — крупная ступень шкалы, а не общая h1 в 20px: на экране входа
   это единственная надпись такого ранга, и мельче она читается как подпись. */
.login-card h1 {
  font-size: var(--t-xl); font-weight: 700; letter-spacing: -.01em; line-height: 1.15;
}
.login-card h1 span { color: var(--cyan); }
.login-sep { color: var(--cyan); margin: 0 .34em; font-weight: 400; }
.login-sub { margin-top: 7px; color: var(--muted); font-size: var(--t-sm); }

.login-fields { display: grid; gap: 14px; }
/* Метка над полем в том же регистре, что подписи групп меню и h2 карточек —
   один типографский приём на всю систему, а не третий вариант подписи. */
.login-field { display: grid; gap: 6px; }
.login-field > span {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.login-field input { width: 100%; min-height: 44px; padding: 10px 14px; }
/* Рамка поля — граница компонента, WCAG 1.4.11 требует 3:1. Общая
   --line-strong даёт на карточке входа 1.63:1 (замерено по кадру: рамка
   #343f51 против фона #101a2e). Та же доля цвета в .65 даёт 3.50:1 против
   карточки и 3.72:1 против заливки поля. :not(:focus) — чтобы правило не
   перебило голубую рамку фокуса из слоя компонентов: специфичность у
   `.login-field input` и `input:focus` одинаковая, а этот слой ниже. */
.login-field input:not(:focus) { border-color: var(--ctl-line); }

.login-err {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 10px 12px;
  border: 1px solid var(--red-line); background: var(--red-bg);
  border-radius: var(--r-ctl); color: var(--red-strong);
}
.login-err .ic { width: 16px; height: 16px; flex: none; }

.login-submit {
  width: 100%; margin-top: 22px; min-height: 44px;
  justify-content: center; font-size: var(--t-base); font-weight: 700;
}
.login-submit .ic { width: 16px; height: 16px; }

.login-foot {
  margin-top: 20px; max-width: 34ch; text-align: center;
  color: var(--muted); font-size: var(--t-xs); line-height: 1.5;
}

/* ---------- адаптив ---------- */
@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .sidebar {
    width: 100%; height: 58px; position: sticky; top: 0; z-index: 40;
    flex-direction: row; align-items: center; gap: 10px;
    padding: 8px 14px; border-right: 0; border-bottom: 1px solid var(--line);
  }
  .brand { min-height: 44px; padding: 0; margin: 0; border: 0; }
  .brand-dim { display: none; }
  .sidebar > .nav { display: none; }
  .login-art { display: none; }
  .side-foot {
    margin: 0 0 0 auto; padding: 0; border-top: 0;
    flex-direction: row; align-items: center; gap: 2px;
  }
  .user-chip { flex-direction: row; align-items: center; gap: 8px; padding: 0; }
  .user-chip b { display: none; }
  .logout span, .theme-toggle span { display: none; }
  /* Подпись прячем, а цель нажатия — нет: голая иконка давала 15x15,
     это ниже минимума WCAG 2.5.8 (24x24). Измерено на боевой 05.08. */
  .logout, .theme-toggle { padding: 8px; min-width: 44px; min-height: 44px;
            display: inline-flex; align-items: center; justify-content: center; }
  /* Цели нажатия под палец: 44px по высоте (WCAG 2.5.5). Измерено на 375 до
     правки: кнопки редактора 25.5, «Править»/«Удалить» записи и пагинатор
     30.75, пункты меню 38.25, кнопки 38.25, поля 39, th.sortable 32 на
     дашборде. Плотность таблиц не трогаем: растёт только шапка, строки
     данных остаются прежними. */
  .btn { min-height: 44px; }
  .editor-bar .btn { min-width: 44px; justify-content: center; }
  input:not([type="checkbox"]):not([type="radio"]), select { min-height: 44px; }
  .tbl th.sortable { height: 44px; }
  .content { padding: 16px 14px calc(92px + env(safe-area-inset-bottom)); }
  .card { padding: 16px 14px; }  /* меньше полей — больше видно таблицы */
  .grid-2 { grid-template-columns: 1fr; }
  .page-head { flex-wrap: wrap; align-items: flex-start; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .work-filter, .text-link, .claim-section-nav a { min-height: 44px; }
  .admin-ops > summary, .status-fold > summary,
  .comment-history summary, .conversation-item summary,
  .mail-compose > summary {
    min-height: 44px; display: flex; align-items: center; cursor: pointer;
  }
  .admin-ops > summary {
    padding: 4px 0; justify-content: space-between; gap: 10px; list-style: none;
    color: var(--muted); font-size: var(--t-sm); font-weight: 700;
  }
  .admin-ops > summary::-webkit-details-marker { display: none; }
  .admin-ops > summary::after { content: "+"; color: var(--cyan); font: 700 18px/1 var(--mono); }
  .admin-ops[open] > summary::after { content: "−"; }

  .claims-table, .desktop-data-table { display: none; }
  .claim-mobile-list, .mobile-data-list { display: grid; }
  .mobile-data-total { display: flex; }

  .mobile-nav {
    position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 64px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border-top: 1px solid var(--line-strong); box-shadow: var(--elev-2);
    backdrop-filter: blur(14px);
  }
  .mobile-nav > a, .mobile-more > summary {
    min-width: 0; min-height: 52px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    color: var(--muted); text-decoration: none; border-radius: var(--r-ctl);
    font-size: 10.5px; font-weight: 650; list-style: none;
  }
  .mobile-nav > a.on, .mobile-more.on > summary {
    color: var(--cyan); background: var(--cyan-bg);
  }
  .mobile-nav .ic { width: 20px; height: 20px; }
  .mobile-more { min-width: 0; }
  .mobile-more > summary::-webkit-details-marker { display: none; }
  .mobile-more[open] > summary { color: var(--cyan); background: var(--cyan-bg); }
  .mobile-more-panel {
    position: fixed; z-index: 51; left: 12px; right: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    display: grid; gap: 4px; max-height: min(60vh, 440px); overflow: auto;
    padding: 16px; background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--r-lg); box-shadow: var(--elev-3);
  }
  .mobile-more-panel > b { padding: 2px 8px 8px; font-size: var(--t-sm); }
  .mobile-more-panel a {
    min-height: 48px; display: flex; align-items: center; gap: 10px;
    padding: 10px; color: var(--txt); text-decoration: none;
    border-radius: var(--r-ctl); background: var(--surface-2);
  }
  .mobile-more-panel a.on { color: var(--cyan); background: var(--cyan-bg); }
}

/* ------------------------------------------------------------------
   Редизайн 2026: модульная мастерская + технический паспорт.
   Блок стоит последним, чтобы новые экраны не наследовали старую сетку. */
.role-home-head { min-height: 154px; align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--line-strong); }
.role-home-head h1 { margin-top: 6px; font-size: clamp(28px, 3vw, 42px); font-weight: 680; letter-spacing: -.025em; text-transform: none; }
.role-home-count { margin-top: 10px; font-size: var(--t-md); }
.role-home-count b { margin-right: 6px; color: var(--cyan); font: 750 34px/1 var(--mono); }
.section-heading { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: end; gap: 12px; margin: 26px 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-strong); }
.section-heading h2 { margin: 0; color: var(--txt); font-size: var(--t-md); letter-spacing: .05em; }
.section-heading p { margin-top: 3px; font-size: var(--t-sm); }
.section-no { color: var(--cyan); font: 750 18px/1 var(--mono); }
.section-no.is-error { color: var(--red-base); }
.priority-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.priority-card { min-width: 0; min-height: 296px; display: flex; flex-direction: column; padding: 18px; background: var(--surface); border: 1px solid var(--line-strong); border-top: 2px solid var(--amber-base); }
.priority-card.is-error { border-top-color: var(--red-base); }
.priority-card-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.priority-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--amber-base); background: var(--amber-bg); border: 1px solid var(--amber-line); }
.priority-card.is-error .priority-icon { color: var(--red-base); background: var(--red-bg); border-color: var(--red-line); }
.priority-number { color: var(--muted); font: 700 12px var(--mono); }
.priority-total { color: var(--txt); font: 750 28px/1 var(--mono); }
.priority-card .eyebrow { margin-top: 18px; color: var(--muted); }
.priority-card h3 { margin: 5px 0 7px; color: var(--txt); font-size: 18px; line-height: 1.25; letter-spacing: 0; text-transform: none; }
.priority-card > p:not(.eyebrow):not(.priority-object) { margin-top: 10px; color: var(--txt); font-size: var(--t-sm); line-height: 1.5; }
.priority-object { margin-top: 8px; color: var(--muted); font-size: var(--t-xs); overflow-wrap: anywhere; }
.priority-card-foot { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); }
.priority-card-foot .btn { min-width: 0; max-width: 100%; }
.priority-card-foot .work-due { white-space: normal; }
.priority-card-foot .is-overdue { color: var(--red-base); }
.role-home-recent { margin-top: 8px; }
.role-home-recent .recent-list { padding: 0; overflow: hidden; border-radius: 3px; }
.role-home-recent .recent-item { grid-template-columns: 112px minmax(0, 1fr) auto; }

.registry-head { margin-bottom: 10px; }
.registry-head h1 { margin-top: 3px; font-size: 30px; }
.registry-block + .registry-block { margin-top: 28px; }
.registry-block > .card { padding: 0; overflow: hidden; border-radius: 3px; }
.registry-critical > .card { border-color: var(--red-line); }
.passport-registry { min-width: 980px !important; }
.passport-registry .c-created { width: 118px; }
.passport-registry .c-ticket { width: 155px; }
.passport-registry .c-equip { width: 24%; }
.passport-registry .c-serial { width: 16%; }
.passport-registry .c-branch { width: 22%; }
.passport-registry .c-stage { width: 190px; }
.passport-registry td { height: 58px; }
.passport-registry td.c-equip, .passport-registry td.c-serial, .passport-registry td.c-branch { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.passport-registry time { display: grid; color: var(--txt); font: 650 var(--t-sm) var(--mono); }
.passport-registry time small { margin-top: 2px; color: var(--muted); font-size: var(--t-xs); }
.stage-name { display: block; color: var(--txt); font-weight: 700; }
.stage-note { display: block; margin-top: 4px; color: var(--amber-base); font-size: var(--t-xs); line-height: 1.25; }
.stage-note.is-error { color: var(--red-base); }
.tbl-claims tbody tr.is-critical > td:first-child { box-shadow: inset 3px 0 0 var(--red-base); }
.tbl-claims tbody tr.is-critical > td { background: color-mix(in srgb, var(--red-bg) 32%, var(--surface)); }
.claim-mobile-card.is-critical { border-left: 4px solid var(--red-base); }
.claim-mobile-top time { color: var(--muted); font: 600 var(--t-xs) var(--mono); }
.claim-mobile-meta { display: grid; gap: 3px; }
.mobile-attention { padding-top: 8px; border-top: 1px solid var(--line); color: var(--amber-base); font-size: var(--t-sm); font-weight: 650; }
.mobile-attention.is-error { color: var(--red-base); }

.technical-passport { margin-top: 4px; }
.passport-heading { margin-top: 0; }
.passport-grid { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(220px, .9fr) minmax(360px, 1.8fr) minmax(190px, .75fr); padding: 0; overflow: hidden; border-radius: 3px; }
.passport-grid > section { min-width: 0; padding: 17px 18px; border-right: 1px solid var(--line-strong); }
.passport-grid > section:last-child { border-right: 0; }
.passport-label { display: block; margin-bottom: 11px; color: var(--muted); font: 700 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.passport-grid h3 { margin: 0 0 8px; color: var(--txt); font-size: var(--t-base); line-height: 1.35; letter-spacing: 0; text-transform: none; }
.passport-grid p { color: var(--muted); font-size: var(--t-sm); overflow-wrap: anywhere; }
.contact-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 8px; margin-top: 12px; }
.contact-link { min-width: 0; color: var(--txt); font: 600 var(--t-sm) var(--mono); text-decoration: none; overflow-wrap: anywhere; }
.contact-link:hover { color: var(--cyan); text-decoration: underline; }
.contact-actions .btn-icon { min-width: 30px; min-height: 30px; padding: 5px; }
.passport-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.passport-facts div { min-width: 0; }
.passport-facts dt { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.passport-facts dd { margin-top: 4px; color: var(--txt); font-size: var(--t-sm); font-weight: 600; overflow-wrap: anywhere; }
.passport-stage { border-top: 2px solid var(--amber-base); }
.passport-stage h3 { color: var(--amber-base); font-size: var(--t-md); }
.passport-stage .chip { margin-top: 16px; }
.claim-action-heading { margin: 0 0 16px; }
.claim-action-heading h2 { margin: 4px 0 0; color: var(--txt); font-size: 21px; letter-spacing: 0; text-transform: none; }
.claim-action-body { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 3px 0; }
.claim-action-body p { max-width: 74ch; color: var(--txt); }
.claim-focus { margin-top: 18px; border-radius: 3px; border-color: var(--amber-line); box-shadow: inset 3px 0 0 var(--amber-base); }
.claim-focus-gaps { margin-bottom: 12px; }
.claim-all-info { margin-top: 14px; border-radius: 3px; }
.claim-all-info > summary { min-height: 48px; display: flex; align-items: center; list-style: none; cursor: pointer; }
.claim-all-info > summary::-webkit-details-marker { display: none; }
.claim-all-info > summary span { display: grid; }
.claim-all-info > summary small { color: var(--muted); font-size: var(--t-xs); font-weight: 400; }
.claim-all-info > summary::after { content: "+"; margin-left: auto; color: var(--cyan); font: 700 20px var(--mono); }
.claim-all-info[open] > summary::after { content: "−"; }
.passport-details-grid { margin-top: 12px; }
#process { margin-top: 14px; border-radius: 3px; }
#process > .process-heading { margin-top: 0; }
#process > .claim-fold { border: 0; }
.claim-edit-dialog {
  width: min(1120px, calc(100vw - 48px)); max-height: calc(100dvh - 40px);
  margin: auto; padding: 0; overflow: auto; scrollbar-gutter: stable;
  color: var(--txt); background: var(--bg);
  border: 1px solid var(--amber-line); border-top: 3px solid var(--amber-base);
  border-radius: 18px; box-shadow: var(--elev-3);
}
.claim-edit-dialog::backdrop {
  background: rgba(3, 7, 10, .82);
  backdrop-filter: blur(7px) saturate(.75);
}
.dialog-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px 24px; background: var(--surface);
  border-bottom: 1px solid var(--line-strong);
}
.dialog-head-copy { min-width: 0; }
.dialog-head h2 {
  margin: 3px 0 4px; color: var(--txt); font-size: 24px;
  line-height: 1.2; letter-spacing: -.01em; text-transform: none;
}
.dialog-head p { max-width: 72ch; }
.dialog-close {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  color: var(--txt); background: var(--surface-2);
}
.dialog-close span { font-size: 26px; font-weight: 300; line-height: 1; }
.dialog-body { padding: 22px 24px 28px; }
.claim-edit-dialog .dialog-body > h2 {
  margin: 24px 0 10px; padding: 0; border: 0;
  color: var(--txt); font-size: 18px; letter-spacing: 0; text-transform: none;
}
.claim-edit-dialog .dialog-body > h2:first-of-type { margin-top: 18px; }
.claim-edit-dialog .fields-form {
  margin-top: 0; padding: 18px; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 12px;
}
.claim-edit-dialog .fields-form + .fields-form { margin-top: 12px; }
.claim-edit-dialog .fields-pos { border-top-color: var(--amber-line); }
.claim-edit-dialog .fields-pos-head { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.transport-decision {
  margin: 10px 0 16px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-left: 4px solid var(--amber-base); border-radius: 12px;
}
.transport-decision.is-need_cdek,
.transport-decision.is-ok { border-left-color: var(--cyan-base); }
.transport-decision.is-human { border-left-color: var(--red-base); }
.transport-decision h3 {
  margin: 5px 0 7px; color: var(--txt); font-size: 19px;
  line-height: 1.3; letter-spacing: 0; text-transform: none;
}
.transport-decision p { max-width: 78ch; color: var(--muted); }
.transport-decision .btn-row,
.transport-decision > form { margin-top: 14px; }
.transport-recheck { margin: 7px 0 4px; }
.transport-recheck .text-link {
  padding: 0; color: var(--muted); background: transparent; border: 0;
  font: inherit; cursor: pointer;
}
.transport-recheck .text-link:hover { color: var(--cyan); }
.field-undo-bar { margin: 10px 0 14px; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 14px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--amber-base); }
.field-undo-bar span { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); }
.field-undo-bar .ic { color: var(--amber-base); }
.admin-launcher { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 0 20px; border: 1px solid var(--line-strong); }
.admin-launcher a { min-width: 0; min-height: 112px; display: grid; align-content: start; gap: 3px; padding: 14px; color: var(--txt); text-decoration: none; background: var(--surface); border-right: 1px solid var(--line-strong); }
.admin-launcher a:last-child { border-right: 0; }
.admin-launcher a:hover { background: var(--surface-2); }
.admin-launcher span { color: var(--cyan); font: 700 var(--t-xs) var(--mono); }
.admin-launcher b { margin-top: 8px; font-size: var(--t-sm); }
.admin-launcher small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.admin-search {
  display: grid; grid-template-columns: minmax(180px, .55fr) minmax(280px, 1fr) auto;
  align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px 14px;
}
.admin-search > div { min-width: 0; display: grid; gap: 2px; }
.admin-search > div span { color: var(--muted); font-size: var(--t-xs); }
.admin-search .search-field { width: 100%; min-width: 0; }
.admin-search .search-field input { width: 100%; min-width: 0; }

/* Гарантийная аналитика: плотная на рабочем экране, но без горизонтальной
   прокрутки на телефоне — там обе таблицы заменяются карточками. */
.report-tabs { margin-bottom: 16px; }
.warranty-filters { display: grid; gap: 15px; margin-bottom: 16px; }
.warranty-filter-row { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; }
.warranty-date-field { display: grid; gap: 5px; min-width: 170px; color: var(--muted); font-size: var(--t-xs); }
.warranty-date-field input { width: 100%; }
.warranty-brands { min-width: 0; padding: 0; border: 0; }
.warranty-brands legend { margin-bottom: 8px; color: var(--muted); font-size: var(--t-xs); }
.warranty-brand-list { display: flex; flex-wrap: wrap; gap: 7px; }
.warranty-brand { position: relative; display: inline-flex; min-width: 0; cursor: pointer; }
.warranty-brand input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.warranty-brand span {
  display: inline-flex; align-items: center; min-height: 36px; padding: 7px 12px;
  color: var(--muted); background: var(--field); border: 1px solid var(--ctl-line);
  border-radius: var(--r-pill); font-size: var(--t-sm); transition: color .15s, border-color .15s, background-color .15s;
}
.warranty-brand input:checked + span { color: var(--txt); background: var(--amber-bg); border-color: var(--amber-line); }
.warranty-brand input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.warranty-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 12px; color: var(--muted); font-size: var(--t-xs); }
.warranty-presets a { color: var(--txt); text-underline-offset: 3px; }
.warranty-kpis { display: grid; grid-template-columns: minmax(260px, 440px); justify-content: center; gap: 10px; margin-bottom: 16px; }
.warranty-kpi { min-width: 0; display: grid; gap: 5px; padding: 16px; }
.warranty-kpi span { color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; }
.warranty-kpi b { font: 750 clamp(26px, 3vw, 38px)/1 var(--mono); font-variant-numeric: tabular-nums; }
.warranty-kpi small { color: var(--muted); line-height: 1.35; }
.warranty-report-card { margin-bottom: 14px; }
.warranty-summary-table { min-width: 520px; }
.warranty-month-table { min-width: 700px; }
.warranty-summary-table tfoot td { font-weight: 750; background: var(--surface-2); border-top: 1px solid var(--line-strong); }
.warranty-share-cell { min-width: 190px; }
.warranty-share-cell > b { display: block; margin-bottom: 5px; }
.warranty-share-cell progress, .warranty-mobile-share progress { width: 100%; height: 6px; appearance: none; border: 0; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-3); }
.warranty-share-cell progress::-webkit-progress-bar, .warranty-mobile-share progress::-webkit-progress-bar { background: var(--surface-3); }
.warranty-share-cell progress::-webkit-progress-value, .warranty-mobile-share progress::-webkit-progress-value { background: var(--accent); border-radius: var(--r-pill); }
.warranty-share-cell progress::-moz-progress-bar, .warranty-mobile-share progress::-moz-progress-bar { background: var(--accent); border-radius: var(--r-pill); }
.warranty-month-value { display: inline-grid; justify-items: end; gap: 2px; }
.warranty-month-value small { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.warranty-mobile-share { display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, 45%); align-items: center; gap: 12px; color: var(--muted); font-size: var(--t-sm); }
.warranty-mobile-brands { display: flex; flex-wrap: wrap; gap: 6px; }
.warranty-mobile-brands span { padding: 4px 8px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--t-xs); }
.warranty-mobile-brands b { color: var(--txt); font-family: var(--mono); }
.warranty-notes { display: grid; gap: 8px; margin: 0 0 16px; padding: 13px 15px; color: var(--muted); background: var(--amber-bg); border-left: 3px solid var(--amber-base); }
.warranty-notes p { display: flex; align-items: start; gap: 8px; margin: 0; }
.warranty-notes .ic { flex: none; color: var(--amber-base); }

@media (max-width: 1180px) {
  .priority-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .priority-card { min-height: 260px; }
  .passport-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passport-grid > section:nth-child(2) { border-right: 0; }
  .passport-grid > section:nth-child(-n+2) { border-bottom: 1px solid var(--line-strong); }
  .admin-launcher { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-launcher a:nth-child(3) { border-right: 0; }
  .admin-launcher a:nth-child(-n+3) { border-bottom: 1px solid var(--line-strong); }
}
@media (max-width: 900px) {
  .shell, .content { width: 100%; max-width: 100%; margin: 0; }
  .mobile-nav { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); backdrop-filter: none; }
  .section-heading { grid-template-columns: 34px minmax(0, 1fr); align-items: start; }
  .section-heading > .text-link { grid-column: 2; justify-self: start; }
  .section-heading > .btn { grid-column: 2; justify-self: start; max-width: 100%; }
  .registry-block > .card { padding: 0; border: 0; background: transparent; overflow: visible; }
  .warranty-kpis { grid-template-columns: minmax(0, 440px); }
  .admin-search { grid-template-columns: 1fr auto; }
  .admin-search > div { grid-column: 1 / -1; }
}

.admin-ops form > label:not(.check-row) { display: grid; gap: 4px; min-width: 0; }
.admin-ops form > label:not(.check-row) > :is(input, select, textarea) { width: 100%; min-width: 0; }
@media (max-width: 620px) {
  .role-home-head { min-height: 0; align-items: stretch; }
  .role-home-head h1 { font-size: 27px; }
  .priority-grid { grid-template-columns: 1fr; }
  .priority-card { min-height: 0; }
  .priority-card-foot { align-items: stretch; flex-direction: column; }
  .priority-card-foot .btn { width: 100%; }
  .section-heading { margin-top: 22px; }
  .passport-grid { grid-template-columns: 1fr; }
  .passport-grid > section { border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .passport-grid > section:last-child { border-bottom: 0; }
  .passport-facts { grid-template-columns: 1fr; }
  .claim-action-body { align-items: stretch; flex-direction: column; }
  .claim-action-body .btn { width: 100%; }
  .claim-edit-dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border: 0; border-top: 3px solid var(--amber-base); border-radius: 0; }
  .dialog-head { padding: 14px 14px 13px; align-items: start; }
  .dialog-head h2 { font-size: 21px; }
  .dialog-head p { font-size: var(--t-xs); }
  .dialog-body { padding: 14px 12px 24px; }
  .claim-edit-dialog .fields-form { padding: 14px 12px; border-radius: 10px; }
  .admin-launcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-launcher a { min-height: 96px; }
  .admin-launcher a:nth-child(3) { border-right: 1px solid var(--line-strong); }
  .admin-launcher a:nth-child(even) { border-right: 0; }
  .admin-launcher a:nth-child(-n+4) { border-bottom: 1px solid var(--line-strong); }
  .admin-search { grid-template-columns: 1fr; align-items: stretch; }
  .admin-search > div { grid-column: auto; }
  .admin-search .btn { width: 100%; }
}
@media (max-width: 600px) {
  .kv li { grid-template-columns: 1fr; gap: 2px; }
  .filters { flex-direction: column; align-items: stretch; }
  .filters input, .filters select, .filters label, .filters .btn { width: 100%; min-width: 0; }
  /* Настольный flex-basis 460px в вертикальной форме становился высотой
     поискового поля и оставлял на телефоне пол-экрана пустоты. */
  .claim-search .search-field { flex: 0 0 auto; min-height: 44px; }
  .status-row { flex-direction: column; align-items: stretch; }
  .status-row .field, .status-row select { width: 100%; min-width: 0; }
  .status-row .muted { padding-bottom: 0; }
  /* на узком экране действия записи держим видимыми: наведения тут нет */
  .status-acts { opacity: 1; margin-left: 0; }
  .editor-hint { display: none; }
  .page-head .btn { width: 100%; justify-content: center; }
  .tbl { font-size: 13px; }
  .tbl td, .tbl th { padding: 7px 10px; }
  h1 { font-size: 18px; }
  .ticket code { font-size: 16px; }
  .claim-mobile-list { grid-template-columns: 1fr; }
  .mobile-data-facts { grid-template-columns: 1fr; }
  .mobile-data-total { align-items: start; flex-direction: column; }
  .warranty-filter-row { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .warranty-date-field { min-width: 0; }
  .warranty-filter-row .btn { width: 100%; }
  .warranty-brand-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .warranty-brand span { justify-content: center; width: 100%; min-width: 0; min-height: 44px; overflow-wrap: anywhere; text-align: center; }
  .warranty-kpis { grid-template-columns: 1fr; gap: 8px; }
  .warranty-kpi { padding: 13px; }
  .warranty-kpi b { font-size: 28px; }
  .warranty-kpi small { font-size: 11px; }
  .warranty-presets > span { flex-basis: 100%; }
  .warranty-mobile-brands span { min-width: 0; overflow-wrap: anywhere; }
  .report-tabs a {
    min-width: 0;
    padding-inline: 7px;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }
  .report-tabs .ic { flex: none; }
  .pager { justify-content: space-between; }
  .pager .muted { width: 100%; order: -1; text-align: center; }
  .help-toc-list { padding-left: 0; list-style-position: inside; }
  .help-toc-list li { margin: 0; border-top: 1px solid var(--line); }
  .help-toc-list a { min-height: 44px; display: inline-flex; align-items: center; }
  .help-reference > .table-scroll { display: none; }
  .help-transition-list { display: grid; gap: 9px; }
}

@media (max-width: 480px) {
  .comment-form > .btn[type="submit"] {
    width: 100%; max-width: 100%; justify-content: center;
    white-space: normal; text-align: center;
  }
  .admin-facts { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .sidebar .user-chip { display: none; }
}

/* Короткий горизонтальный экран телефона: сохраняем подписи навигации, но
   возвращаем рабочей области 12px по высоте, не уменьшая цели нажатия. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .sidebar { height: 54px; padding-block: 5px; }
  .content { padding-top: 12px; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .mobile-nav { min-height: 58px; padding-block: 3px; }
  .mobile-nav > a, .mobile-more > summary { min-height: 50px; }
  .mobile-more-panel { bottom: calc(64px + env(safe-area-inset-bottom)); max-height: 58vh; }
}

/* Плитки дашборда. Правила идут последними намеренно: у .dash-stats и .stats
   специфичность одинаковая, и переносить сюда пришлось бы весь ряд. Пять
   колонок держатся, пока на плитку остаётся хотя бы ~190px; дальше ведущая
   занимает целый ряд, а на телефоне ряд у каждой свой. */
@media (max-width: 1120px) {
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .stat-lead .stat-num { font-size: 34px; }
  /* Полоса событий уходит под рабочее содержимое: на 372px она забирала бы
     треть узкого экрана, а таблица рекламаций осталась бы без места. */
  .dash-grid { grid-template-columns: 1fr; }
  .dash-events { max-height: none; }
}
@media (max-width: 560px) {
  .dash-stats { grid-template-columns: 1fr; }
  .stat-lead { grid-column: auto; }
}


/* ---------- карточка: панели сквозного процесса ----------
   Переходы состояний, адресаты переписки, очередь писем, документы и правило
   50 км. Ни одного нового цвета: смысл несут те же ступени — зелёный
   «активно», янтарный «внимание», красный «ошибка», серый «закрыто».

   Приглушения прозрачностью здесь нет ни одного (запрет системы): исключённый
   адресат отличается ОТТЕНКОМ текста, а не полупрозрачным тем же. */

/* Сообщение о результате действия своим текстом. Янтарный вариант — базовый
   .notice; зелёный и красный добавлены сюда, потому что новые панели отвечают
   и «сделано», и «отказано», а один янтарный на все три исхода означал бы,
   что цвет перестал нести смысл. */
.notice.is-ok {
  color: var(--green-base);
  border-color: var(--green-line); background: var(--green-bg);
}
.notice.is-err {
  color: var(--red-base);
  border-color: var(--red-line); background: var(--red-bg);
}
/* Янтарный совпадает с базовым .notice, но правило нужно: класс собирается
   как `is-{{ kind }}`, и `is-warn` без него был классом-призраком — ссылка на
   правило, которого нет. Пока стиль совпадает, это ничего не ломает, а первая
   же правка базового .notice развела бы «предупреждение» и «просто плашку». */
.notice.is-warn {
  color: var(--amber-base);
  border-color: var(--amber-line); background: var(--amber-bg);
}

/* Строка действия: подписанные поля и кнопка в один ряд. Кнопка выровнена по
   низу поля, а не по центру ряда: поле с подписью выше кнопки, и центровка
   поднимала бы её к подписи. */
.proc-form { margin-top: 12px; }
.proc-row { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.proc-row .field { min-width: 0; }
/* Тянутся селект состояния и примечание: остальные поля предсказуемой
   ширины, а тексту перехода («не работает, везём в СЦ заново») нужна строка. */
.proc-to { flex: 1 1 260px; }
.proc-note { flex: 1 1 220px; }
.proc-row select, .proc-row input { width: 100%; min-width: 0; }
.proc-hint { margin-top: 8px; font-size: var(--t-sm); }

/* ---------- адресаты переписки ---------- */
.recip-list { list-style: none; margin: 10px 0 0; padding: 0; }
.recip {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.recip:last-child { border-bottom: 0; }
/* Адрес обязан ломаться в любом месте: почты в боевых данных длинные
   («ivanov.i.i@kaliningrad.rtrn.ru»), и на 375px без этого страница уезжала
   бы в горизонтальную прокрутку. */
.recip-who { display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  min-width: 0; flex: 1 1 260px; }
.recip-who b { font-size: var(--t-sm); overflow-wrap: anywhere; min-width: 0; }
.recip-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.recip-form { display: flex; gap: 6px; align-items: center; }
.recip-form select { padding: 5px 8px; font-size: var(--t-sm); }
/* Исключённый — цветом, не прозрачностью. --muted даёт 7.60:1 на карточке,
   то есть остаётся читаемым, а не «наполовину пропавшим». */
.recip.is-excluded .recip-who b { color: var(--muted); }

/* ---------- очередь писем ---------- */
.conversation { margin: 0; padding: 0; display: grid; list-style: none; }
.conversation-item {
  min-width: 0; padding: 12px 0; display: grid;
  grid-template-columns: 34px minmax(0, 1fr); gap: 10px;
  border-bottom: 1px solid var(--line);
}
.conversation-item:last-child { border-bottom: 0; }
.conversation-icon {
  width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--muted); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); background: var(--surface-2);
}
.conversation-item.is-incoming .conversation-icon { color: var(--green-base); border-color: var(--green-line); background: var(--green-bg); }
.conversation-item > details { min-width: 0; }
.conversation-item summary {
  min-height: 36px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; cursor: pointer; list-style: none;
}
.conversation-item summary::-webkit-details-marker { display: none; }
.conversation-item summary::before {
  content: ""; width: 6px; height: 6px; flex: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform .15s;
}
.conversation-item details[open] summary::before { transform: rotate(45deg); }
.conversation-item summary:hover::before { border-color: var(--cyan); }
.conversation-copy { min-width: 0; display: grid; gap: 2px; }
.conversation-copy b { overflow-wrap: anywhere; }
.conversation-copy small { color: var(--muted); font-size: var(--t-xs); overflow-wrap: anywhere; }
.conversation-direction {
  color: var(--muted); font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.conversation-facts { margin-top: 10px; }
.conversation-body {
  margin: 10px 0; padding: 12px 14px; color: var(--txt); background: var(--field);
  border: 1px solid var(--ctl-line); border-radius: var(--r-ctl);
  font-size: var(--t-sm); line-height: 1.55; overflow-wrap: anywhere;
}
.mail-resolution {
  margin: 10px 0; padding: 12px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px; border: 1px solid var(--red-line);
  border-radius: var(--r-ctl); background: var(--red-bg);
}
.mail-resolution p { flex: 1 1 100%; margin: 0; color: var(--txt); }
.mail-resolution form { margin: 0; }
.mail-compose { margin-top: 14px; }
.mail-compose > summary { list-style: none; cursor: pointer; }
.mail-compose > summary::-webkit-details-marker { display: none; }
.mail-compose-form {
  margin-top: 10px; padding: 14px; display: grid; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-2);
}
.mail-compose-form textarea, .mail-compose-form input[type="text"] { width: 100%; }
.mail-compose-form .check { min-height: 44px; display: flex; align-items: center; gap: 8px; }
.mail-compose-form .check input { width: 20px; height: 20px; }
.mail-compose-form .btn { justify-self: start; }
.mail-readonly { margin-top: 14px; }
.mail-settings { margin-top: 16px; }
.mailq { list-style: none; margin: 10px 0 0; padding: 0; }
.mailq-item {
  padding: 9px 0; border-bottom: 1px solid var(--line);
  display: flex; gap: 10px; align-items: start; flex-wrap: wrap;
}
.mailq-item:last-child { border-bottom: 0; }
.mailq-item > details { flex: 1 1 320px; min-width: 0; }
/* Раскрывашка вместо кнопки-модалки: тело письма нужно прочитать целиком, а
   не заглянуть в него. Работает без JavaScript — это <details>, а не наш код. */
.mailq summary {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  cursor: pointer; padding: 2px 0; list-style: none;
}
/* ⚠️ Треугольник раскрывашки браузер рисует только у `summary` с
   `display: list-item`; у флексового он исчезает молча, и строка выглядит
   обычным текстом — тело письма никто не откроет, потому что не видно, что
   его можно открыть. Рисуем уголок сами. */
.mailq summary::marker, .mailq summary::-webkit-details-marker { display: none; }
.mailq summary::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-right: 2px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg); transition: transform .15s;
}
.mailq details[open] summary::before { transform: rotate(45deg); }
.mailq summary:hover::before { border-color: var(--cyan); }
.mailq summary:hover .mailq-subj { color: var(--cyan); }
.mailq-subj { min-width: 0; overflow-wrap: anywhere; font-size: var(--t-sm); }
.mailq details[open] summary { margin-bottom: 6px; }
/* Тело письма — на поверхности поля ввода: это то, что уйдёт дословно, и оно
   не должно выглядеть частью карточки. Переносится по словам и по знакам:
   в тексте встречаются длинные ссылки и метки шаблона. */
.mailq-body {
  margin-top: 8px; padding: 10px 12px;
  /* Рамка --ctl-line, а не --line: она отделяет дословный текст письма от
     карточки, то есть несёт смысл, а не украшает. Замерено: --line даёт к
     этой заливке 1.34:1, --ctl-line — 3.34:1 при норме 3:1. */
  background: var(--field); border: 1px solid var(--ctl-line);
  border-radius: var(--r-ctl);
  font-family: var(--mono); font-size: var(--t-sm); line-height: 1.5;
  color: var(--txt); overflow-wrap: anywhere;
}

/* ---------- документы ---------- */
/* Кнопка «Скачать» уезжает вправо и не сжимает описание документа. */
.doc-list li > .btn, .doc-list li > .chip { margin-left: auto; flex: none; }

/* ---------- правка разобранных полей ----------
   Ряды строятся на .proc-row, а не на своей раскладке: у панелей процесса он
   уже пережил ловушку «flex-basis настольной раскладки становится ВЫСОТОЙ на
   узком экране» и несёт её лечение. Своя копия раскладки повторила бы дефект
   заново — и заметили бы его снова только замером.

   Ни одного нового цвета: подписи полей и пояснения — те же --muted и .chip,
   что в остальных панелях. */
.fields-hint { margin-top: 8px; font-size: var(--t-sm); }
/* Тянутся текстовые поля; серийник и способ доставки предсказуемой ширины —
   двадцать знаков и одно слово. */
.fields-wide { flex: 1 1 260px; }
.fields-serial { flex: 0 1 210px; }
.fields-transport { flex: 0 1 190px; }
/* Ширину селектам и полям задаёт .proc-row, а textarea в нём не было —
   без этой строки поля схлопываются до размера по умолчанию (cols=20) и рядом
   с растянутым селектом выглядят сбоем вёрстки.

   `overflow-wrap: anywhere` — от неразрывного куска: разбор письма склеивает
   наименование с артикулом («…/SSD512Gb/250W/NoOS/WR3»), и без переноса по
   знакам такая строка листалась бы внутри поля, как раньше в input. */
.fields-form textarea {
  display: block; width: 100%; min-width: 0; resize: vertical;
  line-height: 1.5; overflow-wrap: anywhere;
}
.fields-form + .fields-form { margin-top: 6px; }
/* У панелей процесса ряд в форме один, и вертикального промежутка между рядами
   там не требовалось. Здесь их два, и без этой строки подпись нижнего ряда
   прилипает к полю верхнего: замерено 2px просвета против 10px внутри ряда —
   на 375px «Контакты» читались как продолжение «Адреса». Промежуток тот же,
   что flex-gap внутри ряда: два разных расстояния в одной форме выглядели бы
   сбоем. */
.fields-form .proc-row + .proc-row { margin-top: 10px; }
.contact-grid { align-items: start; }
.contact-grid .field { flex: 1 1 220px; }
.contact-grid .field-short { flex-basis: 120px; }
/* Адрес почты не переносится по стандарту HTML input. Даём ему две обычные
   колонки, чтобы длинный служебный адрес можно было сверить целиком. */
.contact-grid .fields-email { flex-basis: 450px; }
/* Позиции отделены линией, а не рамкой-карточкой: панель и так внутри .card,
   а вложенная рамка на трёх позициях даёт трёхкратный отступ и ничего не
   добавляет к делению. */
/* Линия декоративна, поэтому здесь --line (1.26:1), а не --ctl-line: деление
   на позиции несёт заголовок «Позиция N» с плашкой, а не полоска. Ровно так же
   разделены записи описания, адресаты и письма очереди. Норму 3:1 держат
   границы контролов — они смысл несут (замерено: 3.56:1 к панели, 3.78:1 к
   своей заливке). */
.fields-pos { border-top: 1px solid var(--line); padding-top: 12px; }
.fields-pos-head {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 8px;
}
.fields-pos-head .muted { font-size: var(--t-sm); }

/* ---------- карточка рекламации: один следующий шаг ---------- */
.claim-focus {
  display: grid; gap: 14px;
  border-color: var(--cyan-line); border-top: 3px solid var(--cyan-base);
  background: var(--surface);
}
.claim-focus-main {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.claim-focus-main h2 {
  margin: 3px 0 0; padding: 0; border: 0; font-size: 21px;
  line-height: 1.25; letter-spacing: -.01em; text-transform: none;
}
.claim-focus-main .btn { flex: none; }
.claim-focus-gaps { margin: 0; color: var(--amber-base); }
.claim-tags { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }
.focus-deadline {
  padding: 5px 9px; color: var(--muted); font-size: var(--t-xs); font-weight: 700;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
}
.focus-deadline.is-overdue { color: var(--red-base); border-color: var(--red-line); background: var(--red-bg); }
.focus-deadline.is-today { color: var(--amber-base); border-color: var(--amber-line); background: var(--amber-bg); }
.next-flow {
  margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1.15fr 1fr;
  list-style: none; border: 1px solid var(--line); border-radius: var(--r-ctl);
  overflow: hidden;
}
.next-flow li {
  min-width: 0; padding: 12px; display: grid; grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px; align-content: start; border-right: 1px solid var(--line);
}
.next-flow li:last-child { border-right: 0; }
.next-flow li.is-current { background: var(--cyan-bg); }
.next-number {
  width: 26px; height: 26px; display: grid; place-items: center;
  color: var(--muted); border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font: 700 var(--t-xs) var(--mono);
}
.next-flow .is-current .next-number { color: var(--cyan-strong); border-color: var(--cyan-base); }
.next-flow .is-done .next-number { color: var(--green-base); border-color: var(--green-line); background: var(--green-bg); }
.next-flow li > div { min-width: 0; display: grid; gap: 5px; align-content: start; }
.next-flow li > div > span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.next-flow li b { font-size: var(--t-sm); line-height: 1.45; overflow-wrap: anywhere; }
.next-flow li time, .next-flow li small { color: var(--muted); font-size: var(--t-xs); line-height: 1.4; }
.next-flow .btn { width: fit-content; margin-top: 3px; }
.focus-status {
  min-height: 44px; padding: 8px 10px; display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 18px; align-items: center; gap: 10px;
  color: var(--txt); text-decoration: none; border-top: 1px solid var(--line);
}
.focus-status > span { color: var(--muted); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.focus-status > b { min-width: 0; font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-status .ic { color: var(--muted); }
.focus-status:hover { background: var(--surface-2); }

.claim-section-nav {
  margin: 12px 0; padding: 4px; display: flex; flex-wrap: wrap; gap: 3px;
  border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface);
}
.claim-section-nav a {
  min-height: 42px; padding: 8px 10px; flex: 0 0 auto; display: inline-flex;
  align-items: center; gap: 7px; color: var(--muted); text-decoration: none;
  border-radius: calc(var(--r-ctl) - 2px); font-size: var(--t-sm); font-weight: 650;
}
.claim-section-nav a:hover { color: var(--txt); background: var(--surface-2); }
.claim-section-nav a b { color: var(--txt); font: 700 var(--t-xs) var(--mono); }
.claim-focus-roles {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.claim-focus-roles p {
  margin: 0; padding: 9px 11px;
  display: grid; grid-template-columns: 105px minmax(0, 1fr);
  align-items: baseline; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: color-mix(in srgb, var(--surface-2) 76%, transparent);
}
.claim-focus-roles span {
  color: var(--muted); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase;
}
.claim-focus-roles b { font-size: var(--t-sm); font-weight: 600; }

/* ---------- ролевой рабочий стол ---------- */
.workspace-note {
  max-width: 760px; margin: 9px 0 0; padding: 8px 10px;
  color: var(--txt); background: var(--cyan-bg);
  border-left: 3px solid var(--cyan-base); border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
  font-size: var(--t-xs); line-height: 1.5; overflow-wrap: anywhere;
}
.workbench { padding: 0; overflow: clip; }
.workbench-head { padding: 18px 20px 14px; margin: 0; }
.workbench-head h2, .section-heading h2 { margin: 0; }
.workbench-head p { margin: 4px 0 0; }
.work-count {
  min-width: 34px; height: 34px; padding-inline: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cyan-line); border-radius: var(--r-pill);
  color: var(--cyan); background: var(--cyan-bg); font: 700 var(--t-sm) var(--mono);
}
.work-list { border-top: 1px solid var(--line); }
.work-filters {
  display: flex; gap: 7px; overflow-x: auto; padding: 0 18px 14px;
  scrollbar-width: thin;
}
.work-filter {
  min-height: 36px; flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer;
  font: inherit; font-size: var(--t-sm); font-weight: 650;
}
.work-filter span {
  min-width: 20px; padding: 1px 5px; color: inherit; background: var(--surface);
  border-radius: var(--r-pill); font: 700 var(--t-xs)/1.5 var(--mono); text-align: center;
}
.work-filter:hover { color: var(--txt); border-color: var(--line-strong); }
.work-filter.on { color: var(--cyan-strong); background: var(--cyan-bg); border-color: var(--cyan-line); }
.work-filter-empty { padding: 22px; color: var(--muted); text-align: center; border-top: 1px solid var(--line); }
.work-item {
  min-height: 76px; padding: 11px 18px;
  display: grid; grid-template-columns: minmax(160px, 210px) minmax(0, 1fr) auto;
  align-items: center; gap: 14px; color: var(--txt); text-decoration: none;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.work-item:last-child { border-bottom: 0; }
.work-item:hover { background: var(--surface-2); }
.work-context, .work-copy { min-width: 0; display: grid; gap: 4px; }
.work-context { justify-items: start; }
.work-context code { color: var(--cyan); font-size: var(--t-sm); }
.work-context .chip { max-width: 100%; }
.work-title { font-weight: 720; line-height: 1.25; }
.work-detail {
  color: var(--txt); font-size: var(--t-sm); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.work-detail > span {
  margin-right: 7px; color: var(--muted); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.work-object {
  color: var(--muted); font-size: var(--t-xs); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.work-due { color: var(--muted); font-size: var(--t-xs); white-space: nowrap; }
.is-overdue .work-due { color: var(--red-base); font-weight: 700; }
.is-today .work-due { color: var(--amber-base); font-weight: 700; }
.work-open {
  min-height: 36px; padding: 7px 10px; display: inline-flex; align-items: center;
  gap: 7px; color: var(--cyan-strong); font-size: var(--t-sm); font-weight: 700;
  border: 1px solid var(--cyan-line); border-radius: var(--r-ctl);
}
.work-item:hover .work-open { background: var(--cyan-bg); border-color: var(--cyan-base); }
.work-more { margin: 0; padding: 11px 18px; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.work-empty { margin: 0 18px 18px; }
.empty-art {
  width: min(260px, 100%); max-height: 132px; margin-bottom: 8px;
  object-fit: cover; border-radius: var(--r-card); opacity: .92;
}

.overview-fold { margin: 18px 0; }
.overview-fold > summary {
  min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 18px; cursor: pointer; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--elev-1);
}
.overview-fold > summary::-webkit-details-marker { display: none; }
.overview-fold > summary > span:first-child { display: grid; gap: 2px; }
.overview-fold > summary > span:first-child b { font-size: var(--t-base); }
.overview-fold > summary::after { content: "+"; color: var(--cyan); font: 700 20px/1 var(--mono); }
.overview-fold[open] > summary::after { content: "−"; }
.overview-fold[open] > summary { margin-bottom: 12px; }
.section-heading {
  margin: 28px 0 12px; display: flex; align-items: end;
  justify-content: space-between; gap: 16px;
}
.section-heading .eyebrow { display: block; margin-bottom: 3px; }
.text-link {
  min-height: 24px; display: inline-flex; align-items: center;
  color: var(--cyan); font-size: var(--t-sm); font-weight: 700;
}

/* Пять ответов в карточке. Первый занимает весь ряд: последнее событие
   обычно длиннее остальных и должно читаться до кнопки действия. */
.claim-focus-flow {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.claim-focus-flow p {
  margin: 0; padding: 11px 12px; min-width: 0;
  display: grid; gap: 4px; align-content: start;
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: color-mix(in srgb, var(--surface-2) 76%, transparent);
}
.claim-focus-flow .focus-happened { grid-column: 1 / -1; grid-template-columns: 128px minmax(0, 1fr) auto; align-items: baseline; }
.claim-focus-flow span {
  color: var(--muted); font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
}
.claim-focus-flow b { min-width: 0; font-size: var(--t-sm); font-weight: 650; overflow-wrap: anywhere; }
.claim-focus-flow time { color: var(--muted); font-size: var(--t-xs); white-space: nowrap; }
.claim-focus-flow .focus-due.is-overdue { border-color: var(--red-line); background: var(--red-bg); }
.claim-focus-flow .focus-due.is-today { border-color: var(--amber-line); background: var(--amber-bg); }

/* ---------- внутренние комментарии ---------- */
.comments-panel { border-top: 3px solid var(--cyan-line); }
.comments-fold > summary { list-style: none; cursor: pointer; }
.comments-fold > summary::-webkit-details-marker { display: none; }
.comments-summary {
  min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.comments-summary > div p { margin: 4px 0 0; }
.comments-body { padding-top: 12px; border-top: 1px solid var(--line); }
.comments-panel .card-head > div p { margin: 4px 0 0; }
.comment-list { display: grid; gap: 10px; }
.comment-item {
  padding: 13px 14px; border: 1px solid var(--line);
  border-top: 3px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--surface-2);
}
.comment-item.kind-warning, .comment-item.kind-deadline { border-top-color: var(--amber-base); }
.comment-item.kind-blocker { border-top-color: var(--red-base); }
.comment-item.kind-agreement { border-top-color: var(--green); }
.comment-item.is-pinned { background: color-mix(in srgb, var(--cyan-bg) 45%, var(--surface-2)); }
.comment-item.is-complete { opacity: .75; border-top-color: var(--line-strong); }
.comment-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.comment-labels, .comment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.comment-author, .comment-done { color: var(--muted); font-size: var(--t-xs); }
.comment-text { margin: 10px 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-due { margin: 6px 0; color: var(--muted); font-size: var(--t-sm); }
.comment-due.is-overdue { color: var(--red-base); }
.comment-actions { margin-top: 10px; }
.comment-actions form { margin: 0; }
.task-action-note { color: var(--muted); font-size: var(--t-xs); }
.comment-edit > summary, .comment-add > summary { list-style: none; cursor: pointer; }
.comment-edit > summary::-webkit-details-marker, .comment-add > summary::-webkit-details-marker { display: none; }
.comment-edit[open] { width: 100%; }
.comment-form {
  width: 100%; margin-top: 10px; padding: 12px;
  display: flex; flex-wrap: wrap; align-items: end; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface);
}
.comment-form .field { flex: 1 1 180px; }
.comment-form [data-task-role-field][hidden] { display: none; }
.comment-form .comment-wide { flex-basis: 100%; }
.comment-form textarea { width: 100%; resize: vertical; }
.comment-form .check, .check-row {
  min-height: 44px; display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
}

.recent-list { display: grid; border-top: 1px solid var(--line); }
.recent-item {
  min-height: 68px; padding: 10px 2px; display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto 20px; align-items: center;
  gap: 12px; color: var(--txt); text-decoration: none; border-bottom: 1px solid var(--line);
}
.recent-item:last-child { border-bottom: 0; }
.recent-item:hover { background: var(--surface-2); }
.recent-item > time { color: var(--muted); font: var(--t-xs) var(--mono); }
.recent-main { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: baseline; }
.recent-main code { color: var(--cyan); }
.recent-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-main > span { grid-column: 1 / -1; color: var(--muted); font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-item > .ic { color: var(--muted); }
.comment-form .check > input, .check-row > input {
  width: 20px; height: 20px; flex: none;
}
.comment-history { margin-top: 10px; border-top: 1px solid var(--line); }
.comment-history summary { padding-top: 9px; color: var(--muted); cursor: pointer; font-size: var(--t-sm); }
.comment-history ol { margin: 8px 0 0; padding-left: 22px; }
.comment-history li { margin-block: 5px; color: var(--muted); font-size: var(--t-sm); }
.comment-history li span { display: block; color: var(--txt); overflow-wrap: anywhere; }
.comment-add { margin-top: 14px; }
.comment-add > summary { max-width: 100%; white-space: normal; text-align: center; }
.comment-add[open] > summary { background: var(--surface-2); }

/* ---------- очередь входящих ---------- */
.inbox-panel { padding: 0; overflow: clip; }
.inbox-panel > .card-head { padding: 18px 20px; margin: 0; }
.inbox-list { border-top: 1px solid var(--line); }
.inbox-item { padding: 20px; border-bottom: 1px solid var(--line); scroll-margin-top: 18px; }
.inbox-item:last-child { border-bottom: 0; }
.inbox-item:target { background: color-mix(in srgb, var(--cyan-bg) 45%, var(--surface)); }
.inbox-item > header { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.inbox-item h3 { margin: 4px 0 0; overflow-wrap: anywhere; }
.mail-facts { margin: 14px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mail-facts > div { padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-ctl); }
.mail-facts dt { color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; }
.mail-facts dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.mail-new-text { padding: 13px 14px; border-left: 3px solid var(--cyan-base); background: var(--surface-2); }
.mail-new-text > span { color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; }
.mail-new-text p { margin: 7px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.inbox-decisions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.inbox-after { margin: 12px 0 0; color: var(--muted); font-size: var(--t-sm); }

/* ---------- администратор ---------- */
.admin-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.admin-kpi { display: grid; gap: 5px; align-content: start; }
.admin-kpi > span { color: var(--muted); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; }
.admin-kpi > b { font-size: var(--t-lg); overflow-wrap: anywhere; }
.admin-kpi > small { color: var(--muted); line-height: 1.4; }
.text-ok { color: var(--green); }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.health-list { display: grid; }
.health-row { min-height: 58px; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; border-top: 1px solid var(--line); }
.health-row:first-child { border-top: 0; }
.health-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.health-row.is-ok .health-dot { background: var(--green); }
.health-row.is-stale .health-dot, .health-row.is-missing .health-dot { background: var(--red-base); }
.health-row > div { min-width: 0; display: grid; gap: 2px; }
.health-row > div span { color: var(--muted); font-size: var(--t-sm); overflow-wrap: anywhere; }
.admin-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.admin-facts > div { padding: 10px; border: 1px solid var(--line); border-radius: var(--r-ctl); }
.admin-facts dt { color: var(--muted); font-size: var(--t-sm); }
.admin-facts dd { margin: 4px 0 0; font: 700 var(--t-lg) var(--mono); }
.admin-note { margin: 12px 0 0; padding: 10px 12px; color: var(--muted); font-size: var(--t-sm); border-left: 3px solid var(--amber-base); background: var(--amber-bg); }
.audit-list { margin: 0; padding: 0; display: grid; list-style: none; }
.audit-list li { padding: 10px 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; border-top: 1px solid var(--line); }
.audit-list li:first-child { border-top: 0; }
.audit-list li > span:last-child { grid-column: 2; color: var(--muted); font-size: var(--t-sm); overflow-wrap: anywhere; }
.admin-feed { max-height: 520px; overflow: auto; }

@media (max-width: 1050px) {
  .admin-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.journey-head {
  display: flex; align-items: start; justify-content: space-between; gap: 14px;
  margin-bottom: 16px;
}
.journey-status { float: right; margin-left: 12px; }
.journey-head h2 { margin: 2px 0 0; color: var(--txt); font-size: var(--t-base); text-transform: none; letter-spacing: 0; }
.journey {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0; margin: 0 0 18px; padding: 0; list-style: none;
}
.journey-context { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.journey-context .journey-copy em {
  color: var(--muted); font-size: 10px; font-style: normal; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.journey-context .is-current .journey-copy b { color: var(--cyan-strong); }
.journey-step { position: relative; min-width: 0; display: grid; gap: 7px; align-content: start; padding-right: 8px; }
.journey-step::before {
  content: ""; position: absolute; top: 15px; left: 31px; right: 0;
  height: 2px; background: var(--line-strong);
}
.journey-step:last-child::before { display: none; }
.journey-number {
  position: relative; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); font: 700 var(--t-xs)/1 var(--mono);
}
.journey-step.is-past .journey-number { color: var(--green-strong); background: var(--green-bg); border-color: var(--green-line); }
.journey-step.is-past::before { background: var(--green-line); }
.journey-step.is-current .journey-number { color: var(--surface); background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 0 4px var(--cyan-bg); }
.journey-copy { min-width: 0; display: grid; gap: 2px; }
.journey-copy b { font-size: var(--t-xs); line-height: 1.25; }
.journey-copy small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.stage-outcomes { margin: 0; padding: 0; display: grid; gap: 8px; border: 0; }
.stage-outcomes legend { margin-bottom: 8px; color: var(--muted); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.stage-outcome {
  min-height: 58px; padding: 10px 12px; display: grid;
  grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px;
  cursor: pointer; border: 1px solid var(--ctl-line); border-radius: var(--r-ctl);
  background: var(--surface-2);
}
.stage-outcome:hover { border-color: var(--ctl-line-on); }
.stage-outcome:has(input:checked) { border-color: var(--cyan-base); background: var(--cyan-bg); }
.stage-outcome input { width: 20px; height: 20px; accent-color: var(--cyan-base); }
.stage-outcome > span { min-width: 0; display: grid; gap: 3px; }
.stage-outcome b { font-size: var(--t-sm); }
.stage-outcome small { color: var(--muted); font-size: var(--t-xs); }
.stage-note-row { margin-top: 10px; }
.stage-note-row .proc-note { flex-basis: 440px; }
.full-journey .journey { margin: 10px 0 4px; }

/* 21st Task Steps, переложенный на серверную разметку без React и анимации.
   Двенадцать сегментов дают положение в процессе за 10px высоты; текущее
   название остаётся текстом, а полные подписи каждого сегмента доступны
   скринридеру и по title. «Прошлое» означает положение в схеме, не историю
   фактически выполненных действий: петли процесса могут вернуть назад. */
.process-map {
  display: grid; gap: 8px; margin: 2px 0 14px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--surface-2);
}
.process-map-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; font-size: var(--t-sm);
}
.process-map-head b { color: var(--txt); }
.process-map-head span { color: var(--muted); text-align: right; }
.process-rail {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px;
  margin: 0; padding: 0; list-style: none;
}
.process-step {
  min-width: 0; height: 6px; border-radius: var(--r-pill);
  background: var(--line-strong);
}
.process-step.is-past { background: var(--cyan-line); }
.process-step.is-current {
  height: 8px; margin-top: -1px; background: var(--cyan-base);
  box-shadow: 0 0 0 2px var(--cyan-bg);
}

/* Редкие панели больше не занимают страницу, пока они не нужны. Summary
   показывает состояние раздела, поэтому закрытая панель не выглядит
   исчезнувшей. Вся карточка — одна цель нажатия высотой не меньше 58px. */
.fold-card { padding: 0; overflow: clip; }
.claim-fold-summary {
  min-height: 62px; padding: 12px 18px; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.claim-fold-summary::-webkit-details-marker { display: none; }
.claim-fold-summary::after {
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .15s;
}
.claim-fold[open] > .claim-fold-summary::after { transform: rotate(225deg); }
.claim-fold-summary > span:first-child { display: grid; gap: 3px; min-width: 0; }
.claim-fold-summary b { font-size: var(--t-base); }
.claim-fold-summary small {
  color: var(--muted); font-size: var(--t-sm); font-weight: 400;
  overflow-wrap: anywhere;
}
.claim-fold-body { padding: 18px; border-top: 1px solid var(--line); }

.status-fold { margin-top: 12px; }
.status-fold > summary {
  padding: 9px 0; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line);
}
.status-fold > summary::-webkit-details-marker { display: none; }
.status-fold > summary::before {
  content: "+"; color: var(--cyan); font-family: var(--mono);
  font-size: 18px; line-height: 1; margin-right: -4px;
}
.status-fold[open] > summary::before { content: "−"; }
.status-fold > summary .muted { margin-left: auto; font-size: var(--t-sm); }
.feed .sc-approval { flex: 1 1 100%; margin-top: 0; }
.sc-approval > summary { align-items: flex-start; }
.sc-approval .fields-form { padding: 10px 0 4px; }
.process-more { margin-top: 14px; }

.legacy-stage-callout {
  margin-block: 14px;
  padding: 14px 16px;
  border: 1px solid var(--amber-line);
  border-radius: var(--radius-sm);
  background: var(--amber-bg);
}
.legacy-stage-callout h3 { margin: 0 0 6px; }
.legacy-stage-callout > p { margin: 0 0 10px; }

@media (max-width: 600px) {
  .claim-focus-main { align-items: stretch; }
  .claim-focus-main > div, .claim-focus-main .btn { width: 100%; }
  .claim-focus-main .btn { justify-content: center; }
  .next-flow { grid-template-columns: 1fr; }
  .next-flow li { border-right: 0; border-bottom: 1px solid var(--line); }
  .next-flow li:last-child { border-bottom: 0; }
  .next-flow .btn { width: 100%; justify-content: center; }
  .focus-status { grid-template-columns: 1fr 18px; }
  .focus-status > span { grid-column: 1 / -1; }
  .focus-status > b { white-space: normal; }
  .focus-status .ic { grid-column: 2; grid-row: 2; }
  .claim-focus-roles { grid-template-columns: 1fr; }
  .claim-focus-roles p { grid-template-columns: 100px minmax(0, 1fr); }
  .claim-focus-flow { grid-template-columns: 1fr; }
  .claim-focus-flow .focus-happened { grid-column: auto; grid-template-columns: 1fr; }
  .claim-focus-flow time { white-space: normal; }
  .work-filters {
    flex-wrap: wrap; overflow-x: visible; padding-inline: 14px;
  }
  .work-filter { max-width: 100%; }
  .work-item { grid-template-columns: 1fr; padding: 13px 14px; gap: 9px; }
  .work-context { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
  .work-open { justify-self: start; }
  .recent-item { grid-template-columns: 1fr auto 18px; gap: 7px; }
  .recent-item > time { grid-column: 1 / -1; }
  .recent-main { grid-template-columns: 1fr; }
  .recent-main > span { grid-column: auto; white-space: normal; }
  .section-heading { align-items: start; }
  .comment-head { display: grid; }
  .comment-form .field { flex-basis: 100%; }
  .mail-facts { grid-template-columns: 1fr; }
  .inbox-item { padding: 15px 14px; }
  .inbox-item > header { display: grid; }
  .inbox-decisions, .inbox-decisions form, .inbox-decisions .btn { width: 100%; }
  .inbox-decisions .btn { justify-content: center; }
  .admin-status, .admin-grid { grid-template-columns: 1fr; }
  .admin-facts { grid-template-columns: 1fr 1fr; }
  .journey-head { align-items: start; }
  .journey { grid-template-columns: 1fr; gap: 0; }
  .journey-step { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 0 0 12px; }
  .journey-step::before { top: 30px; bottom: 0; left: 14px; right: auto; width: 2px; height: auto; }
  .journey-copy { padding-top: 3px; }
  .journey-copy b { font-size: var(--t-sm); }
  .journey-copy small { font-size: var(--t-xs); }
  .process-map-head { display: grid; gap: 2px; }
  .process-map-head span { text-align: left; }
  .claim-fold-summary { padding: 12px 14px; }
  .claim-fold-body { padding: 14px; }
  .claim-fold-summary > .chip { display: none; }
}

/* ---------- заполнение «СВОД СДЭК» ---------- */
.page-actions, .svod-summary, .decision-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.svod-summary { margin-bottom: 14px; }
.svod-rows { display: grid; gap: 10px; margin: 14px 0; }
.svod-row {
  padding: 14px; border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--surface-2);
}
.svod-row > header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.svod-row.status-found, .svod-row.status-already { border-left-color: var(--green); }
.svod-row.status-not_found, .svod-row.status-formula { border-left-color: var(--amber); }
.svod-row.status-conflict, .svod-row.status-ambiguous,
.svod-row.status-cancelled { border-left-color: var(--red); }
.compare-list {
  display: grid; grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
  gap: 6px 12px; margin: 12px 0;
}
.compare-list dt { color: var(--muted); }
.compare-list dd { overflow-wrap: anywhere; }
.decision-form select, .decision-form input { min-width: min(100%, 250px); }
.text-danger { color: var(--red-base); }

@media (max-width: 600px) {
  .page-actions, .decision-form { align-items: stretch; flex-direction: column; }
  .page-actions > *, .decision-form > * { width: 100%; }
  .compare-list { grid-template-columns: 1fr; gap: 2px; }
  .compare-list dd { margin-bottom: 8px; }
}

/* ---------- «Помощь»: страница-документ ----------
   Единственный экран системы, который читают подряд, а не сканируют глазами.
   Отсюда два отличия от рабочих экранов, и оба — про длину строки.

   1. Колонка ограничена МЕРОЙ, а не круглым числом пикселей:
      `calc(66ch + 38px)`, где 38px — рамка и внутренние поля карточки
      (1 + 18 с каждой стороны при `box-sizing: border-box`). Значит внутри
      карточки остаётся ровно 66ch, и правка отступов карточки не растянет
      строку молча. Замерено в живом DOM: 74 знака в строке при норме 60–90.
      В `ch` считается ширина знака «0», у кириллицы в нижнем регистре она
      меньше, поэтому знаков в строке больше, чем `ch`.
   2. Межстрочный интервал 1.65 вместо общего 1.5. На рабочих экранах плотность
      важнее (строка доски 41.5px), здесь — наоборот: 1.5 на строке в 74 знака
      возвращает глаз не на ту строку.

   Ни одного нового цвета: ссылки голубые (`--cyan-base` — цвет ссылок системы),
   врезки — обычные `.card.is-compact.is-warn`, янтарный «внимание». */
.help { max-width: calc(66ch + 38px); }
.help > * + * { margin-top: 14px; }
.help-sec p, .help-lead p, .help-sec li, .help-toc li { line-height: 1.65; }
.help-sec > p + p, .help-lead > p + p { margin-top: 10px; }
.help-flow-art {
  display: block;
  width: 100%;
  height: auto;
  max-height: 248px;
  margin: 0 0 24px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  object-position: center;
}

@media (max-width: 520px) {
  .help-flow-art { max-height: 174px; margin-bottom: 18px; }
}

/* Заголовок раздела — регистр документа, а не подпись панели. Общий h2 (12px,
   uppercase, --muted) на этой странице не годится: по нему прыгают из
   оглавления, а в 12px строчными по серому прыгать не выходит. Размер и цвет
   взяты из готовых шкал (--t-md, --txt), новых значений не добавлено. */
.help-sec > h2, .help-lead > h2 {
  font-size: var(--t-md); text-transform: none; letter-spacing: .01em;
  color: var(--txt);
}
/* Подзаголовки внутри раздела остаются в регистре подписи панели: так видно,
   что это ступень ниже, и страница не превращается в лестницу кеглей. */
.help-sec h3 { margin-top: 18px; }
.help-sec h3:first-child { margin-top: 0; }

/* Роль читателя названа в первой карточке: у ЦА и Индиго разные обязанности,
   и «инструкция для всех» бесполезна ровно потому, что человек ищет своё. */
.help-role { margin-top: 10px; }
.help-now {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin-top: 14px;
}
.help-now p {
  margin: 0; padding: 10px 12px; display: grid; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.help-now b { color: var(--cyan-base); }
.help-now span { color: var(--muted); font-size: var(--t-sm); }

/* ---------- оглавление ---------- */
/* Обычные якоря, без JavaScript: страница обязана работать и при выключенных
   скриптах, а прокрутка по #id — родная возможность браузера. */
.help-toc-list { margin: 0; padding-left: 22px; }
.help-toc-list li { margin: 3px 0; }
.help-toc a, .help-sec a, .help-warn a { color: var(--cyan-base); }
.help-toc a:hover, .help-sec a:hover { color: var(--cyan-strong); }
/* Ссылка «к содержанию» в конце каждого раздела: документ длинный, и путь
   назад нужен на месте, а не только клавишей Home. */
.help-up { margin-top: 16px; font-size: var(--t-sm); }
.help-up a { color: var(--muted); text-decoration: none; }
.help-up a:hover { color: var(--cyan-base); }
.help-reference { margin-top: 14px; }
.help-reference > summary {
  min-height: 44px; padding: 10px 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--ctl-line); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.help-reference[open] > summary { margin-bottom: 10px; }

/* ---------- шаги и списки ---------- */
/* Порядок работы — нумерованными шагами: туториал отвечает на «что сделать»,
   и номер шага здесь несёт смысл, а не украшает. Номер стоит на месте маркера
   списка (`::marker`), а не в отдельной колонке: своя колонка на 375px
   забирала бы 28px ширины у текста. */
.help-steps { margin: 12px 0 0; padding-left: 26px; }
.help-steps > li { margin: 0 0 10px; }
.help-steps > li::marker { color: var(--cyan-base); font-weight: 700; }
.help-list { margin: 10px 0 0; padding-left: 22px; }
.help-list > li { margin: 0 0 7px; }

/* ---------- врезки «что путает людей» ---------- */
/* Это .card.is-compact.is-warn — готовая врезка системы с янтарной полосой
   «внимание». Своего фона и рамки здесь нет: врезка обязана выглядеть тем же,
   чем выглядит предупреждение в рабочей карточке. */
.help-warn { margin: 14px 0 0; }
.help-warn h3 { margin: 0 0 6px; color: var(--amber-base); text-transform: none;
  letter-spacing: .01em; font-size: var(--t-base); }
.help-warn p + p { margin-top: 8px; }

/* ---------- таблица состояний ---------- */
/* Собрана из process.TRANSITIONS. `min-width: 0` перебивает общее правило
   `.table-scroll .tbl { min-width: 720px }`: та ширина рассчитана на доску с
   девятью колонками, а здесь четыре, и они укладываются в колонку документа
   без горизонтальной прокрутки. Переносить по словам разрешено всем ячейкам —
   иначе «заказчик подтвердил работоспособность» распирает колонку. */
.help-sec .help-tbl { min-width: 0; font-size: var(--t-sm); }
.help-tbl td, .help-tbl th { white-space: normal; overflow-wrap: anywhere; }
.help-tbl td .chip { margin-left: 2px; }
/* Ячейка состояния объединяет строки своих переходов — значение читается
   один раз, а не повторяется четыре. */
.help-tbl td[rowspan] { vertical-align: top; }

/* Пары «вопрос — ответ»: опись панелей карточки и раздел «если что-то пошло
   не так». Двухколоночный .kv здесь не годится, и это замер, а не вкус: при
   колонке в 66ch подпись слева забирает 150–200px, ответу остаётся 350–400,
   то есть 47–53 знака в строке — ниже читаемого минимума. Вопрос поэтому
   стоит СТРОКОЙ, а ответ занимает всю меру. */
.help-qa { margin-top: 12px; }
.help-qa dt {
  font-weight: 700; color: var(--txt);
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.help-qa dt:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.help-qa dd { margin-top: 4px; color: var(--muted); line-height: 1.65; }

/* ⚠️ Ограничение меры НЕ снимается на узких экранах, и это результат замера.
   Первый заход отпускал колонку на ≤900px «раз экран и так узкий» — на 768
   строка выросла до 88–102 знаков, то есть ровно там, где адаптив должен был
   помочь, читаемость и терялась. Ниже 600px правило и без того не срабатывает:
   экран уже уже меры. */

@media (max-width: 600px) {
  .help-now { grid-template-columns: 1fr; }
  /* На телефоне ряд действия становится колонкой: три контрола в строке дают
     по 90px на каждый, и селект состояния перестаёт читаться. */
  .proc-row { flex-direction: column; align-items: stretch; }
  /* ⚠️ Основная ось стала вертикальной, и `flex-basis` настольной раскладки
     превратился в ВЫСОТУ: поле примечания вытягивалось на 121.8px вместо 44
     (замерено на 375px). Основа сбрасывается — тянуть по вертикали здесь
     нечего. */
  .proc-row .field { flex: 0 0 auto; }
  .proc-row .btn { width: 100%; justify-content: center; }
  .recip-acts, .recip-form { width: 100%; }
  .recip-form select { flex: 1 1 auto; min-width: 0; }
  .mail-resolution, .mail-resolution form, .mail-resolution .btn { width: 100%; }
  .doc-list li > .btn, .doc-list li > .chip { margin-left: 0; }
}

/* Эти три компонента объявлены ниже основного адаптивного слоя файла.
   Поэтому контракт 44px закреплён после их настольных правил: иначе их
   собственные 36/42px каскадом возвращались на телефон. */
@media (max-width: 900px) {
  .work-filter, .text-link, .claim-section-nav a { min-height: 44px; }
}

/* Финальный слой нового технического интерфейса. Старые компоненты процесса
   объявлены выше ради совместимости, поэтому сетка секционных заголовков
   закрепляется в самом конце каскада. */
.section-heading {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: end; justify-content: initial; gap: 12px;
  margin: 26px 0 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line-strong);
}
.section-heading h2 { margin: 0; }
@media (max-width: 900px) {
  .section-heading {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
  }
  .section-heading > :is(.text-link, .btn) {
    grid-column: 2; justify-self: start; max-width: 100%;
  }
}

/* ------------------------------------------------------------------
   Карточка рекламации: сначала решение, затем данные по требованию. */
.claim-page { width: 100%; max-width: 1280px; margin-inline: auto; }
.claim-identity {
  margin-bottom: 18px; padding: 2px 2px 22px;
  border-bottom: 1px solid var(--line-strong);
}
.claim-back {
  min-height: 38px; width: fit-content; display: inline-flex; align-items: center;
  gap: 7px; color: var(--muted); text-decoration: none; font-size: var(--t-sm);
}
.claim-back:hover { color: var(--txt); }
.claim-back .ic { width: 15px; height: 15px; }
.claim-identity-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 370px);
  align-items: end; gap: 36px; margin-top: 10px;
}
.claim-title { min-width: 0; }
.claim-number-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.claim-number { color: var(--cyan); font: 750 var(--t-sm)/1.2 var(--mono); }
.claim-title h1 {
  max-width: 26ch; margin: 12px 0 0; color: var(--txt);
  font-size: clamp(27px, 3vw, 42px); line-height: 1.08; letter-spacing: -.035em;
  text-transform: none;
}
.claim-problem {
  max-width: 76ch; margin: 12px 0 0; color: var(--muted);
  font-size: var(--t-base); line-height: 1.55; overflow-wrap: anywhere;
}
.claim-identity-facts { margin: 0; display: grid; border-top: 1px solid var(--line-strong); }
.claim-identity-facts > div {
  min-width: 0; padding: 9px 0; display: grid;
  grid-template-columns: 112px minmax(0, 1fr); gap: 12px;
  border-bottom: 1px solid var(--line);
}
.claim-identity-facts dt {
  color: var(--muted); font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.claim-identity-facts dd {
  min-width: 0; margin: 0; color: var(--txt); font-size: var(--t-sm);
  font-weight: 650; overflow-wrap: anywhere;
}

.claim-page .claim-focus {
  position: relative; margin: 0 0 14px; padding: clamp(20px, 3vw, 34px);
  gap: 0; overflow: clip; border: 1px solid var(--amber-line);
  border-left: 4px solid var(--amber-base); border-top-width: 1px;
  border-radius: var(--r-card); background:
    linear-gradient(110deg, var(--surface) 0%, var(--surface) 65%, var(--amber-bg) 100%);
  box-shadow: var(--elev-1);
}
.claim-page .claim-focus.is-blocker {
  border-color: var(--red-line); border-left-color: var(--red-base);
  background: linear-gradient(110deg, var(--surface) 0%, var(--surface) 65%, var(--red-bg) 100%);
}
.claim-focus-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
}
.claim-focus-head h2 {
  max-width: 36ch; margin: 7px 0 0; color: var(--txt);
  font-size: clamp(23px, 2.6vw, 36px); line-height: 1.15;
  letter-spacing: -.025em; text-transform: none;
}
.claim-focus-copy { max-width: 76ch; margin-top: 16px; }
.claim-focus-copy > p { margin: 0; line-height: 1.55; }
.claim-focus-copy .claim-focus-automatic { margin-top: 7px; color: var(--muted); font-size: var(--t-sm); }
.claim-focus-copy .claim-focus-automatic b { color: var(--txt); }
.claim-focus-copy .claim-focus-gaps { margin-top: 8px; }
.claim-focus-action {
  width: fit-content; min-width: 210px; max-width: 100%; margin-top: 20px;
  justify-self: start;
}
.claim-focus > form:not(.focus-inline-form) { width: fit-content; margin-top: 20px; }
.focus-inline-form {
  max-width: 980px; margin-top: 20px; display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(220px, .7fr) auto;
  align-items: end; gap: 10px;
}
.focus-inline-form .field { min-width: 0; }
.focus-inline-form input { width: 100%; min-height: 46px; }
.focus-inline-form .btn { min-height: 46px; }
.focus-sequence {
  margin: 26px 0 0; padding: 18px 0 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  list-style: none; border-top: 1px solid var(--line-strong);
}
.focus-sequence li {
  position: relative; min-width: 0; padding: 0 20px 0 18px;
  display: grid; align-content: start; gap: 6px; border-left: 1px solid var(--line);
}
.focus-sequence li:first-child { padding-left: 0; border-left: 0; }
.focus-sequence li::before {
  content: ""; position: absolute; left: -4px; top: 3px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong);
}
.focus-sequence li:first-child::before { left: 0; }
.focus-sequence li.is-current::before { background: var(--amber-base); }
.claim-focus.is-blocker .focus-sequence li.is-current::before { background: var(--red-base); }
.focus-sequence span {
  padding-left: 2px; color: var(--muted); font-size: 10px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.focus-sequence b { font-size: var(--t-sm); line-height: 1.45; overflow-wrap: anywhere; }
.focus-sequence time { color: var(--muted); font: var(--t-xs) var(--mono); }

.case-panel { margin-top: 14px; padding: 0; overflow: clip; }
.case-panel-summary, .admin-ops-summary {
  min-height: 68px; padding: 14px 18px; display: flex; align-items: center;
  justify-content: space-between; gap: 14px; cursor: pointer; list-style: none;
}
.case-panel-summary::-webkit-details-marker,
.admin-ops-summary::-webkit-details-marker { display: none; }
.case-panel-summary > span:first-child,
.admin-ops-summary > span:first-child { min-width: 0; display: grid; gap: 4px; }
.case-panel-summary b, .admin-ops-summary b { font-size: var(--t-base); }
.case-panel-summary small, .admin-ops-summary small {
  color: var(--muted); font-size: var(--t-sm); font-weight: 400; overflow-wrap: anywhere;
}
.case-panel-summary::after, .admin-operation > summary::after {
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .15s;
}
.case-panel[open] > .case-panel-summary::after,
.admin-operation[open] > summary::after { transform: rotate(225deg); }
.case-panel-body { padding: 0 18px 18px; border-top: 1px solid var(--line); }
.passport-toolbar {
  min-height: 58px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
}
.passport-toolbar p { color: var(--muted); font-size: var(--t-sm); }
.claim-page .passport-grid {
  display: grid; grid-template-columns: minmax(360px, 1.45fr) repeat(2, minmax(220px, .8fr));
  padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--surface-2); overflow: hidden;
}
.claim-page .passport-grid > section { padding: 18px; border-right: 1px solid var(--line); }
.claim-page .passport-grid > section:last-child { border-right: 0; }
.claim-page .passport-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.claim-page .passport-fault { grid-column: 1 / -1; }
.supplemental-grid { display: grid; gap: 18px; padding-top: 18px; }
.supplemental-grid > .passport-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.supplemental-group h3 { margin: 0 0 8px; }

.claim-page #process { margin-top: 14px; padding: 0; overflow: clip; }
.claim-page .process-heading {
  min-height: 76px; margin: 0; padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-bottom: 1px solid var(--line);
}
.claim-page .process-heading h2 {
  margin: 4px 0 0; color: var(--txt); font-size: var(--t-md);
  letter-spacing: 0; text-transform: none;
}
.claim-page #process > .claim-fold { border: 0; }

.admin-ops { margin-top: 20px; padding: 0; overflow: clip; border-color: var(--line-strong); }
.admin-ops-summary { color: var(--muted); }
.admin-ops-summary::after { display: none; }
.admin-ops-body { padding: 18px; border-top: 1px solid var(--line); }
.admin-ops-note { max-width: 78ch; margin: 0 0 14px; color: var(--muted); font-size: var(--t-sm); }
.admin-ops-list { display: grid; gap: 8px; }
.admin-operation {
  min-width: 0; border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--surface-2); overflow: clip;
}
.admin-operation.is-danger { border-color: var(--red-line); }
.admin-operation > summary {
  min-height: 64px; padding: 12px 14px; display: flex; align-items: center;
  justify-content: space-between; gap: 14px; list-style: none; cursor: pointer;
}
.admin-operation > summary::-webkit-details-marker { display: none; }
.admin-operation > summary > span { min-width: 0; display: grid; gap: 3px; }
.admin-operation > summary b { font-size: var(--t-sm); }
.admin-operation > summary small { color: var(--muted); font-size: var(--t-xs); }
.admin-operation > form {
  padding: 18px; display: grid; gap: 14px;
  border-top: 1px solid var(--line); background: var(--surface);
}
.admin-operation > form > .btn { width: fit-content; max-width: 100%; }
.admin-operation .btn { white-space: normal; }
.admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admin-operation .field { min-width: 0; }
.admin-operation .field > :is(input, select, textarea) {
  width: 100%; min-width: 0; max-width: 100%;
}
.admin-stage-current {
  padding: 10px 12px; display: grid; grid-template-columns: 100px minmax(0, 1fr);
  gap: 10px; border-left: 3px solid var(--amber-base); background: var(--amber-bg);
}
.admin-stage-current span { color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; }
.admin-consequences { margin: 0; padding: 12px; display: grid; gap: 4px; border: 1px solid var(--line-strong); }
.admin-consequences legend { padding-inline: 6px; color: var(--muted); font-size: var(--t-xs); }
.admin-stage-preview { margin: 0; color: var(--muted); font-size: var(--t-sm); }
.admin-confirm { padding: 8px 10px; border: 1px solid var(--red-line); background: var(--red-bg); }
.claim-page .field > span {
  color: var(--muted); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.claim-page :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-radius: 4px; background-color: color-mix(in srgb, var(--field) 74%, var(--surface-2));
}

@media (max-width: 1180px) {
  .claim-page .passport-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .claim-page .passport-grid > section:first-child {
    grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--line);
  }
  .supplemental-grid > .passport-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .claim-identity-grid { grid-template-columns: 1fr; gap: 20px; }
  .claim-title h1 { max-width: none; }
  .focus-inline-form { grid-template-columns: 1fr; }
  .focus-inline-form .btn { width: 100%; }
  .focus-sequence { grid-template-columns: 1fr; gap: 14px; }
  .focus-sequence li, .focus-sequence li:first-child {
    padding: 0 0 0 18px; border-left: 1px solid var(--line);
  }
  .focus-sequence li:first-child::before { left: -4px; }
  .claim-page .passport-grid { grid-template-columns: 1fr; }
  .claim-page .passport-grid > section,
  .claim-page .passport-grid > section:first-child {
    grid-column: auto; border-right: 0; border-bottom: 1px solid var(--line);
  }
  .claim-page .passport-grid > section:last-child { border-bottom: 0; }
  .admin-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .claim-page .claim-focus { padding: 20px 16px; }
  .claim-focus-head { display: grid; }
  .focus-deadline { width: fit-content; }
  .claim-identity-facts > div { grid-template-columns: 96px minmax(0, 1fr); }
  .passport-toolbar { align-items: stretch; flex-direction: column; padding-block: 12px; }
  .passport-toolbar .btn { width: 100%; }
  .claim-page .passport-facts,
  .supplemental-grid > .passport-facts { grid-template-columns: 1fr; }
  .claim-page .passport-fault { grid-column: auto; }
  .case-panel-summary, .admin-ops-summary { padding-inline: 14px; }
  .case-panel-body, .admin-ops-body { padding-inline: 14px; }
  .admin-operation > form { padding: 14px; }
  .admin-operation > form > .btn { width: 100%; }
}