/* Дополнения к дизайн-системе M1 v4.
 *
 * Отдельный файл, а не правки в «m1.css»: тот пришел от дизайнера и должен
 * обновляться следующей версией пакета целиком. Всё, чего в пакете нет, но
 * что нужно живой системе, живет здесь и переживает обновление.
 *
 * Правило одно: только те же токены «--m1-…», никаких своих цветов и мер.
 * Появился компонент в пакете — правило отсюда убирается. */

/* ── Каркас страниц без входа ─────────────────────────────────────────────
 * В пакете вход нарисован внутри общего каркаса с боковым меню. На живом
 * сайте меню там нет: человек ещё не внутри системы, и вести его некуда. */
body.m1-гость {
  min-height: 100vh;
}

.m1-контент--гость {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

/* ── Узнанный участник на входе ───────────────────────────────────────────
 * Имя и фамилия заперты: одна стертая буква завела бы в системе второго
 * человека. Строка показывает, под кем пускают, и даёт выход «Другой». */
.m1-узнан {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--m1-линия);
  border-radius: var(--m1-радиус);
  background: var(--m1-фон);
}

.m1-узнан b {
  display: block;
}

.m1-узнан span {
  font-size: 14px;
  color: var(--m1-тихий);
}

/* ── Низ бокового меню ────────────────────────────────────────────────────
 * Выход и переход между кабинетом и своими вопросами прижаты к низу колонки:
 * это редкие действия, и в списке разделов они бы спорили с рабочими. */
.m1-меню__низ {
  margin-top: auto;
  padding: 16px 18px 20px;
  display: grid;
  gap: 8px;
}

.m1-меню__ссылка {
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  text-decoration: none;
}

.m1-меню__ссылка:hover,
.m1-меню__ссылка:focus-visible {
  color: #fff;
  text-decoration: underline;
}

/* Счетчик новых ответов в пункте меню. */
.m1-навигация__счет {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--m1-действие);
  color: #fff;
  font-size: 12px;
  font-style: normal;
}

/* ── Карточка входа во всё окно ───────────────────────────────────────────
 * В пакете у карточки «min-height: 690px», и она встаёт по центру окна. В
 * макете содержимого больше (служебные ссылки под кнопкой, длинная цитата), и
 * карточка занимает окно почти целиком, оставляя около 34 точек по кругу. У
 * нас содержимого меньше, карточка садилась на свои 690, сверху и снизу
 * оставались широкие пустые поля, а портрет обрезался заметно выше
 * эталонного (24.08.2026). Порог 860 — тот, на котором пакет складывает
 * карточку в одну колонку: ниже него тянуть её по высоте нечем. */
@media (min-width: 861px) {
  .m1-вход__карточка {
    min-height: calc(100vh - 68px);
  }
}

/* ── Портрет на входе ─────────────────────────────────────────────────────
 * В пакете картинка лежит в колонке с заданной высотой. У нас у файла свои
 * размеры в атрибутах (иначе панель дёргается, пока он грузится), и колонка
 * растягивалась по ним до полутора тысяч пикселей. Вынимаем картинку из
 * потока: высоту задаёт колонка, а не файл. */
.m1-вход__фото img {
  position: absolute;
  inset: 0;
}

/* ── Кнопка «Показать» у поля пароля ──────────────────────────────────────
 * Её дорисовывает «пароль.js»: без скриптов её быть не должно, поэтому в
 * разметке её нет и в пакете она не нарисована. */
.m1-поле--пароль {
  position: relative;
}

/* «Показать» стоит по правому краю САМОГО поля, а не карточки: у поля снизу
   бывает подсказка, и кнопка, привязанная к низу, наезжала на её текст
   (правка 24.08.2026). Отсчёт от верха: подпись поля 20 px, поле 40 px. */
.вход-показать {
  position: absolute;
  top: 26px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--m1-тихий);
  cursor: pointer;
}
.вход-показать svg {
  display: block;
}
/* Поле оставляет место под глаз, иначе длинный пароль уезжает под него. */
.есть-показать input {
  padding-right: 46px;
}

.вход-показать:hover,
.вход-показать:focus-visible {
  background: var(--m1-фон);
}

/* Вторая строка шапки модуля (история 92 спецификации): она обязана быть на
 * каждой странице, а в пакете под маркой места для неё не нашлось. */
.m1-подпись-марки {
  margin: -36px 0 22px;
  color: var(--m1-тихий);
  font-size: 14px;
}

/* ── Состояния срока ──────────────────────────────────────────────────────
 * Имена — из пакета («--риск», «--ожидание», «--работа»), их ставит макрос
 * «_срок.html» по коду состояния из «ядро.сроки». Цвета этим классам НЕ
 * задаются намеренно: в css/m1.css правил «.m1-срок--*» нет вовсе, и в
 * эталоне строка срока везде тихая тёмная — даже там, где срок истёк
 * («Ответить до 20 августа — срок истек»). Наши красный и оранжевый делали
 * её криком на каждой карточке раздела (правка 24.08.2026). Класс остаётся
 * в разметке: по нему сверяется состав и его читает отбор. */

/* ── Поле выбора внутри строки действий ───────────────────────────────────
 * Строка действий заголовка сложена под кнопки, и поле в ней растягивается на
 * всю ширину. Нужна там, где рядом с кнопками стоит наш выбор: участник над
 * листом печати. Ширина — как у полей строки отбора (24.08.2026). */
.выбор-в-строке {
  width: 230px;
  flex: 0 0 auto;
}

/* ── Карточка на всю ширину сетки ─────────────────────────────────────────
 * В макете вторую строку «m1-сетка-состояний» занимают две карточки. Одной из
 * них у нас нет по решению владельца, и оставшаяся вставала в левую ячейку,
 * а правая половина экрана пустовала. Перенос вправо ничего не лечит — пустеет
 * левая; поэтому оставшаяся карточка занимает строку целиком. Порог 860 — тот
 * же, на котором пакет складывает эту сетку в одну колонку (24.08.2026). */
@media (min-width: 861px) {
  .на-всю-сетку {
    grid-column: 1 / -1;
  }
}

/* ── Пара карточек по содержимому ─────────────────────────────────────────
 * «m1-дашборд-сетка» тянет карточки в ряду до одной высоты — в макете это
 * незаметно, потому что списки в нём одинаково короткие. На проверке перед
 * отправкой слева бывает два десятка пропущенных вопросов, и правая карточка
 * с одной плитой растягивалась на полторы тысячи точек пустоты (24.08.2026). */
.пара-по-содержимому {
  align-items: start;
}

/* ── Ссылка, которую дизайнер нарисовал текстом ────────────────────────────
 * В эталоне ссылки в таблицах есть, но не везде: «задачи» в реестре решений —
 * настоящая подчёркнутая ссылка, а формулировка вопроса в матрице и «Вопрос
 * 07» в колонке «Источник» — простой тёмный текст. Переход нам нужен и там,
 * поэтому остаётся ссылка, а вид берётся эталонный: цвет по месту, без
 * подчёркивания; подчёркивание возвращается под курсором (24.08.2026).
 *
 * Имя класса без приставки «m1-» намеренно: сверка состава сравнивает
 * сочетания классов «m1-*», и свой класс с этой приставкой она честно
 * посчитает лишним блоком, которого в макете нет.
 *
 * Пять условий в отборе — не украшение. Пакет красит ссылки правилом
 * «a:not(.m1-кнопка):not(.m1-навигация__ссылка):not(.m1-карточка__вход)
 * :not(.m1-строка-входа)», это вес в четыре класса, и правило легче него не
 * сработает, в каком бы порядке ни грузились файлы. */
a.ссылка-текстом:not(.m1-кнопка):not(.m1-навигация__ссылка):not(.m1-карточка__вход):not(.m1-строка-входа) {
  color: inherit;
  text-decoration: none;
}
.ссылка-текстом:hover,
.ссылка-текстом:focus-visible {
  text-decoration: underline;
}
/* Кружок с инициалами: у дизайнера это кнопка, у нас ссылка на ответы
   человека. Из-за того же правила пакета инициалы красились синим по синему
   кружку и подчёркивались — на аватаре «ОЕ» текст почти сливался с фоном. */
a.m1-аватар:not(.m1-кнопка):not(.m1-навигация__ссылка):not(.m1-карточка__вход):not(.m1-строка-входа) {
  color: var(--m1-белый);
  text-decoration: none;
}

/* ── Пилюли: своих правил у нас нет ───────────────────────────────────────
 * Здесь стояло правило «.m1-пилюля» с рамкой, кеглем 14 и тихим цветом —
 * его завели под роль участника, когда роль показывалась пилюлей. Роль давно
 * стоит обычным текстом, а правило осталось и перебивало пакет НА ВСЕХ
 * экранах: пилюли были 31 точку вместо 26, кегль 14 вместо 11, с серой
 * обводкой, и — главное — тихий цвет ложился поверх цвета состояния, потому
 * что наш файл грузится после пакетного. «Пароль задан» переставало быть
 * зелёным, «Расхождение» — красным. Убрано 24.08.2026; своих правил
 * пилюлям не заводить, у пакета их семь и все нужные состояния покрыты.
 * Проверка после любой правки: пилюля обязана быть 26 точек высотой,
 * 11 px, без видимой рамки и в цвете своего состояния. */

/* ── Вторая шапка на экране ───────────────────────────────────────────────
 * Дашборд администратора живёт на той же странице, что личная панель, и
 * заголовок раздела нуждается в отбивке от того, что стоит выше. */
.m1-шапка--вторая {
  margin-top: 32px;
}

/* ── Последние принятые решения ───────────────────────────────────────────
 * Список ссылок «вопрос — итог» на дашборде. В пакете такого блока нет:
 * там на его месте «ближайшие действия» с другой структурой. */
.m1-список-решений {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.m1-строка-решения {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--m1-линия);
  border-radius: var(--m1-радиус);
  background: var(--m1-поверхность);
  color: inherit;
  text-decoration: none;
}

.m1-строка-решения:hover,
.m1-строка-решения:focus-visible {
  border-color: var(--m1-действие);
}

.m1-строка-решения span {
  color: var(--m1-тихий);
  font-size: 14px;
}

/* ── Ссылки, которые не должны выглядеть ссылками ─────────────────────────
 * Марка ведёт домой, а карточка перехода целиком кликабельна. В пакете это
 * неподвижные блоки, поэтому подчёркивания там не предусмотрено, а браузер
 * рисует его сам. */
.m1-марка--меню,
a.m1-карточка-маршрута,
.m1-карточка-маршрута a {
  text-decoration: none;
}

.m1-карточка-маршрута a:hover,
.m1-карточка-маршрута a:focus-visible {
  text-decoration: underline;
}

a.m1-карточка-маршрута:hover,
a.m1-карточка-маршрута:focus-visible {
  border-color: var(--m1-действие);
}

/* Две ссылки в подвале карточки стоят в строку, а не одна под другой. */
.m1-карточка-маршрута .m1-действия {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Роль человека в верхней полосе. По ТЗ она должна быть видна на экранах
 * участника, а отдельной строки под заголовком в пакете нет. */
.m1-кто-роль {
  margin-left: 8px;
  color: var(--m1-тихий);
  font-size: 14px;
}

/* ── Правила заполнения маршрута ──────────────────────────────────────────
 * Три пункта по дороге к кнопке. В пакете такого блока нет: там на экране
 * маршрута сразу карточки разделов. */
.m1-правила {
  display: grid;
  gap: 10px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
  counter-reset: правило;
}

.m1-правила li {
  display: grid;
  gap: 2px;
  padding: 12px 14px 12px 46px;
  position: relative;
  border: 1px solid var(--m1-линия);
  border-radius: var(--m1-радиус);
  background: var(--m1-поверхность);
}

.m1-правила li::before {
  counter-increment: правило;
  content: counter(правило);
  position: absolute;
  left: 14px;
  top: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--m1-фон);
  color: var(--m1-действие);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 22px;
}

.m1-правила span {
  color: var(--m1-тихий);
  font-size: 14px;
}

/* ── Предупреждение о ближайшем сроке ─────────────────────────────────────
 * В пакете компонент есть на экране маршрута; здесь только то, чего в нём
 * не хватило: пустой блок не должен занимать место, когда срока нет. */
.m1-предупреждение-срока:empty {
  display: none;
}
/* Свёрнутый список собранных ответов на форме перевода. */
.m1-что-ответили {
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid var(--m1-линия);
  border-radius: var(--m1-радиус);
  background: var(--m1-поверхность);
}

.m1-что-ответили summary {
  cursor: pointer;
  font-weight: 600;
}

.m1-что-ответили article {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--m1-линия);
}

/* ── Печатный лист ────────────────────────────────────────────────────────
 * Реестр решений берут на встречу распечатанным. Цветного принтера в группе
 * нет: на бумаге всё чёрным по белому, а статус продублирован словом. */
body.печать-лист {
  max-width: 190mm;
  margin: 0 auto;
  padding: 12mm 0;
  background: #fff;
}

.печать-лист .лист-шапка {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--m1-линия);
}

.печать-лист .подзаголовок {
  color: var(--m1-тихий);
  font-size: 13px;
}

.печать-лист .условия {
  color: var(--m1-тихий);
}

/* Вопрос с ответами не разрывается между страницами, раздел начинается
 * с новой: иначе распечатка режет ответ пополам. */
.печать-лист .решение,
.печать-лист .сводка-печать tr {
  break-inside: avoid;
  page-break-inside: avoid;
}

.печать-лист h2 {
  break-before: page;
  page-break-before: always;
}

.печать-лист h2:first-of-type {
  break-before: auto;
  page-break-before: auto;
}

@page {
  size: A4;
  margin: 15mm;
}

@media print {
  body.печать-лист {
    max-width: none;
    margin: 0;
    padding: 0;
    color: #000;
  }

  .печать-лист a {
    color: #000;
    text-decoration: none;
  }

  /* Заливки статусов на бумаге не читаются — остаются рамка и слово. */
  .печать-лист .пилюля,
  .печать-лист .метка-состояния {
    border: 1px solid #000;
    background: transparent;
    color: #000;
  }
}

/* Марка не рвется по дефису. В пакете дизайнера у «М-СИСТЕМА» переноса нет,
   а Chromium в узкой колонке разрывает слово по дефису и получается
   «М-» и «СИСТЕМА» на двух строках (правило проекта, проверено 21.08.2026). */
.m1-марка__м {
  white-space: nowrap;
}

/* Живые экраны ставят пакетные блоки в другом порядке, чем эталон: там ряд
   карточек маршрутов стоит на экране один, у нас — между плитками и задачами.
   Здесь собраны отступы и мелочи, которые иначе пришлось бы писать в разметке
   атрибутом style (перенос эталона 24.08.2026). */
.m1-маршруты {
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  margin: 18px 0;
}
.m1-маршрут h2 {
  margin: 0;
  font-size: 17px;
}
.m1-экран>.m1-плита+.m1-заголовок-экрана,
.m1-экран>.m1-приветствие+.m1-плита {
  margin-top: 22px;
}
/* Строка-вход и запись остаются ссылками: подчёркивание им ни к чему, цвет
   берут у своего текста. В пакете это правило есть только для списков внутри
   карточек-входов, а у нас такие строки стоят и сами по себе. */
a.m1-строка-входа,
a.m1-запись {
  color: inherit;
  text-decoration: none;
}

/* ── Переключатель исхода без рамки ───────────────────────────────────────
 * Два исхода вопроса — «ваш ответ» и «решения пока нет» — наша модель, макет
 * её не знает: там сразу подпись «Ваш ответ» и поле. Модель остаётся, а
 * рамка пакета с заголовком-легендой снимается: с ней блок занимал 124 точки
 * вместо 57, карточка вопроса была на 15 % выше эталонной, а на разделе из
 * двадцати девяти вопросов это около 1900 точек лишней длины (24.08.2026).
 * Легенда остаётся для экранного диктора: без неё пара переключателей теряет
 * имя. Классы на месте — состав сверка видит прежним. */
.вопрос .m1-группа-полей.варианты {
  margin: 0;
  padding: 0;
  border: 0;
}
.вопрос .m1-группа-полей.варианты > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Форма ответа: подпись поля меняется вместе с выбранным вариантом.
   «Ваш ответ» — когда человек отвечает, «Почему решения пока нет» — когда
   отмечает, что решения нет. Правило жило в старом «стиль.css», который ушёл
   вместе с прежней вёрсткой, и обе подписи стояли рядом слипшимися строкой
   «Ваш ответПочему решения пока нет» (перенос эталона 24.08.2026). */
.подпись-причина {
  display: none;
}
.вопрос[data-статус="нет_решения"] .подпись-ответ {
  display: none;
}
.вопрос[data-статус="нет_решения"] .подпись-причина {
  display: inline;
}

/* --- Форма ответа: остатки старого «стиль.css» на токенах M1 ----------------
   Автосохранение держится за эти классы (форма.js), поэтому вёрстка формы
   переведена на M1 v5, а сами классы остались. Правила перенесены сюда с
   прежними размерами и цветами из палитры M1 (24.08.2026). */

/* Три состояния сохранения; «не сохранено» видно так же ясно, как «сохранено». */
.сохранение {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--m1-тихий);
  white-space: nowrap;
}
.сохранение[data-состояние="сохранено"] {
  color: var(--m1-успех);
}
.сохранение[data-состояние="ошибка"],
.сохранение[data-состояние="отказ"] {
  color: var(--m1-риск);
}
.счётчик {
  margin-top: 3px;
  min-height: 1em;
  color: var(--m1-тихий);
  font-size: 12.5px;
}
.счётчик.близко {
  color: var(--m1-ожидание);
  font-weight: 600;
}
/* Подсказка про черновик и счётчик знаков делят одно место под полем ответа:
   в макете там одна тихая строка. Пустой счётчик строки не занимает, а когда
   скрипт наполняет его у предела — подсказку подменяет. */
.счётчик:empty {
  display: none;
}
.счётчик:not(:empty) + .подсказка-черновика {
  display: none;
}
.подсказка-обязательности {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.срок-подпись {
  margin-top: 4px;
}

/* Дата по-русски. Родной input type=date подписан браузером по его локали
   («mm/dd/yyyy»), и ни атрибутом, ни CSS порядок полей не меняется. Поверх
   поля лежит накладка, куда скрипт пишет дату словами; при наборе с
   клавиатуры накладка снимается и остаётся обычное поле. */
.датаполе input[type="date"] {
  width: 100%;
  max-width: none;
}
/* Накладка ложится РОВНО на поле. «m1-поле» — решётка, и раньше накладка
   стояла absolute с «bottom: 1px», то есть у нижнего края всего ярлыка. Там,
   где под полем есть подсказка («Ответить до», «Срок ответа»), накладка
   садилась на подсказку: дата уезжала под поле, в самом поле оставалась
   браузерная локаль «08/27/2026», а из-под белой подложки торчала полоска
   первой буквы подсказки — её и было видно как «оранжевую чёрточку»
   (правка 24.08.2026). Теперь поле и накладка — одна строка решётки, и они
   лежат друг на друге при любом числе подсказок под полем. */
.датаполе > * {
  grid-column: 1;
}
.датаполе > span {
  grid-row: 1;
}
.датаполе > input[type="date"] {
  grid-row: 2;
}
.датаполе > .дата-лицо {
  position: relative;
  z-index: 1;
  grid-row: 2;
  margin: 1px 30px 1px 1px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--m1-текст);
  background: var(--m1-белый);
  border-radius: var(--m1-радиус-малый);
  pointer-events: none;
}
.датаполе > .дата-лицо.пусто {
  color: var(--m1-тихий);
  font-weight: 400;
}
.датаполе.правят > .дата-лицо {
  display: none;
}
.датаполе input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .55;
  cursor: pointer;
}
.датаполе input[type="date"]:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* Своя кнопка выбора файла: родное поле спрятано внутри ярлыка-кнопки, рядом
   имя выбранного файла. В пакете такой пары нет, а браузерная кнопка подписана
   его локалью и не сжимается (24.08.2026). */
.m1-выбор-файла {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.m1-выбор-файла>small {
  color: var(--m1-тихий);
}

/* --- Правки после переноса эталона (24.08.2026) ---------------------------
   Каждая закрывает место, где узор пакета встал в живой разметке иначе, чем
   в макете: там эти блоки стоят по одному на экран, у нас — рядом. */

/* Действия в строке таблицы. Подчёркивание ВОЗВРАЩЕНО (24.08.2026): без него
   ссылки стояли подряд и читались одним слипшимся текстом, а в макете это
   подчёркнутая ссылка. Кнопок-текста, ради которых подчёркивание когда-то
   снимали, в этой строке больше нет. Зазор шире, чем в пакете: подчёркнутые
   слова слипаются сильнее неподчёркнутых. «Отозвать» — цветом риска. */
.m1-действия-в-строке a {
  text-decoration: underline;
}
.m1-таблица-людей .m1-действия-в-строке {
  gap: 12px;
}
.m1-действия-в-строке .m1-опасно {
  color: var(--m1-риск);
}

/* Смена группы прямо в строке — решение владельца (22.08.2026), в макете там
   простой текст. Рамку и заливку с поля снимаем: столбец читается как текст и
   не тянет на себя внимание, а родная стрелка остаётся и говорит, что это
   всё-таки выбор. Под курсором и при наборе поле показывается целиком. */
/* Выбор рабочей группы в строке человека выглядит как поля отбора наверху
   экрана: рамка, белый фон и та же своя стрелка. Прежде он был прозрачным до
   наведения и читался как обычный текст — «скудный», сказал владелец
   (24.08.2026), и было непонятно, что группу тут можно поменять. Свой класс
   без приставки пакета: правило на «m1-селект-в-строке» ушло бы на все
   экраны. */
.m1-таблица-людей .выбор-группы {
  width: 100%;
  max-width: 210px;
  min-height: 40px;
  padding: 0 34px 0 12px;
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--m1-белый);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23617480' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
  border: 1px solid var(--m1-линия);
  border-radius: 9px;
}

/* Карточка маршрута: поле «Ответить до» и кнопка «Сохранить» встают по нижней
   линии — иначе кнопка висит по центру поля вместе с его подписью. */
.m1-маршрут .m1-действия {
  align-items: end;
}

/* Реестр решений: первая колонка в пакете липкая и требует 250 px, у нас там
   короткое название группы — таблица из-за этого не влезала в ширину экрана. */
.m1-таблица-реестра th:first-child,
.m1-таблица-реестра td:first-child {
  min-width: 170px;
}
/* Одна запись реестра — это две строки таблицы (поля и текст ответа). В
   карточном режиме они распадались на две карточки, хотя запись одна. */
@media (max-width:620px) {
  .m1-таблица-реестра tbody {
    margin: 10px;
    border: 1px solid var(--m1-линия);
    border-radius: var(--m1-радиус);
  }
  .m1-таблица-реестра tbody tr {
    margin: 0;
    border: 0;
  }
}

/* Сроки: ширины колонок как в макете. Раньше здесь стоял «min-width: 300px» у
   последней колонки — от времени, когда в ней жила форма продления с полем и
   причиной. Формы там давно нет, а запас остался: колонка вопроса сжималась до
   617 точек против 896 у дизайнера, текст ломался на пять строк, строки
   вытягивались по высоте, и справа оставалась пустая полоса в 220 точек.
   Раскладка фиксированная — иначе браузер снова раздаёт ширину по содержимому
   (24.08.2026). */
.m1-таблица-сроков {
  table-layout: fixed;
}
.m1-таблица-сроков th:nth-child(1) { width: 60%; }
.m1-таблица-сроков th:nth-child(2) { width: 14%; }
.m1-таблица-сроков th:nth-child(3) { width: 9%; }
.m1-таблица-сроков th:nth-child(4) { width: 9%; }
.m1-таблица-сроков th:nth-child(5) { width: 8%; }
.m1-таблица-сроков td:last-child {
  text-align: right;
}

/* Матрица: состояний у нас пять, а не три, и самая длинная подпись
   («Согласовано») шире эталонной. Пакет отводит под пилюлю 100 точек, а ей с
   отбивкой нужно 103, и последние буквы вопроса уходили под неё. 110 — ровно
   столько, чтобы этого не было: до правки стояло 124, когда пилюли были
   крупнее пакетных. */
.m1-матрица__вопрос {
  padding-right: 110px;
}

/* Плиты-предупреждения: в пакете вертикального зазора у них нет, потому что в
   макете плита на экране одна. */
.m1-плита+.m1-плита {
  margin-top: 8px;
}
.m1-форма-карточка>.m1-плита {
  margin-bottom: 18px;
}

/* Шапка карточки на телефоне: пилюли справа сжимали заголовок, и название
   группы ломалось на две строки. */
@media (max-width:640px) {
  .m1-карточка__верх {
    flex-wrap: wrap;
  }
}

/* Печатный лист: марка и дата в шапке слипались на узком экране, заголовок
   группы прижимался к блоку метаданных. */
.m1-лист-a4>header,
.m1-лист-a4>footer {
  flex-wrap: wrap;
  gap: 4px 16px;
}
.печать-лист .m1-лист-a4>h2 {
  margin-top: 28px;
}

/* Шапка карточки входа на телефоне: марка и подпись справа стоят в одну
   строку и слипаются («ИССЛЕДОВАНИЯЛичное приглашение»). В макете этот блок
   на узком экране не проверяли — там гостевые экраны сняты только с
   компьютера (правка 24.08.2026). */
.m1-вход__шапка {
  flex-wrap: wrap;
  gap: 4px 14px;
}
/* Подпись рядом с маркой у нас длиннее макетной («Согласование цифровой
   платформы исследования» вместо «Внутренний контур») и наезжала на марку:
   в пакете у этого блока нет ни зазора, ни переноса. */
.m1-вход__шапка>span:last-child {
  min-width: 0;
  text-align: right;
}

/* Экран «страницы нет»: марка в пакете позиционируется абсолютом от карточки,
   но самой карточке position не задан — и марка уезжала в угол окна. Это
   известный недочёт пакета (числился в списке доработок эталона), здесь он
   закрыт: карточка становится точкой отсчёта. */
.m1-страница-ошибки {
  position: relative;
}

/* Рельс разделов и переход к соседнему разделу: в эталоне это кнопки, у нас
   ссылки (раздел открывается своим адресом, его присылают в переписке).
   Класс «m1-кнопка» им больше не подмешивается — он записывал каждый раздел в
   кнопки экрана и разводил живую форму с макетом; вместо него правила ниже.
   Разметку «m1-соседние-разделы» пакет не оформляет вовсе, здесь её раскладка. */
a.m1-раздел-кнопка {
  color: var(--m1-текст);
  text-decoration: none;
}
a.m1-раздел-кнопка.m1-активна {
  color: var(--m1-каркас);
}
/* Переход к соседнему разделу макет не оформляет вовсе: это обычная ссылка
   под карточками — строка слева, синяя и подчёркнутая, «small» и «strong»
   внутри неё одного цвета (эталон, index.html 926–929). Наша карточка на всю
   ширину прижимала ссылку вправо, поднимала блок с 22 до 69 точек и уводила
   его под липкую полосу отправки. Своим остаётся только зазор между двумя
   ссылками — в разделах с середины маршрута их две (правка 24.08.2026). */
.m1-соседние-разделы {
  margin-top: 4px;
}
.m1-соседние-разделы a {
  margin-right: 18px;
}
/* Кнопка липкой полосы не сжимается. В макете строка слева короткая, у нас в
   ней ещё и время отправки, и flex отдавал остаток кнопке: «Проверить и
   отправить» вставало в две строки, а кнопка вырастала с 40 до 47 точек.
   Теперь переносится текст слева. */
.m1-нижние-действия .m1-кнопка {
  flex-shrink: 0;
}

/* Список внимания на узком экране. У пакета строка — три колонки, и третья
   («auto») отдана пилюле; наша пилюля несёт дату и имя того, кто свёл итог,
   не переносится и на 390 px выталкивала страницу за край на 140 пикселей.
   На телефоне строка становится в два ряда, пилюля уходит под текст. */
@media (max-width: 640px) {
  .m1-список-внимания article,
  .m1-список-внимания>a {
    grid-template-columns: 32px minmax(0,1fr);
  }
  .m1-список-внимания article>:last-child,
  .m1-список-внимания>a>:last-child {
    grid-column: 2;
    justify-self: start;
  }
  .m1-список-внимания .m1-пилюля {
    max-width: 100%;
    white-space: normal;
  }
}

/* Срок в таблице — одной строкой. «19 августа 2026» в узкой колонке пакет
   ломал на три строки, и строка таблицы вырастала втрое. */
[data-поле-срок] {
  white-space: nowrap;
}

/* ── Ответственные в строке ───────────────────────────────────────────────
 * У эталона ответственный один: на диаграмме кружок стоит без обёртки, а в
 * таблице задач — сразу в ячейке. У нас их бывает несколько, плюс пилюля
 * рабочей группы, поэтому нужна строка с переносом. Класс свой, без
 * префикса пакета: чужим именем сверка справедливо считает блок лишним. */
.гант-кто,
.кто-в-строке {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.гант-кто {
  flex: none;
  gap: 4px;
}

/* ── Марка в углу гостевой страницы ───────────────────────────────────────
 * У пакета марка страницы ошибки лежит абсолютом внутри карточки и потому
 * оказывается в углу окна. У нас страница своя, карточка не позиционирована,
 * поэтому марку кладём в тот же угол сами. */
.m1-марка--угол {
  position: absolute;
  top: 30px;
  left: 30px;
}

/* ── Реквизиты вопроса без пустой трети ───────────────────────────────────
 * У пакета блок реквизитов всегда в три колонки: в макете там четыре поля
 * («Рабочая группа», «Категория», «Ответственный», «Создал»), и третья
 * колонка занята. У нас ответственный и срок приходят из ответа и обычно
 * пусты — от блока оставалась пустая треть. «auto-fit» схлопывает пустой
 * трек: два поля растягиваются на всю ширину, четыре по-прежнему встают
 * тремя колонками и переносом, как в макете. */
.m1-метаданные.реквизиты-плотно {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* ── Кнопка в шапке карточки ──────────────────────────────────────────────
 * «Я посмотрел» на обзоре стоит в «m1-карточка__верх», а сама карточка с
 * 24.08.2026 занимает узкую ячейку сетки, а не полосу во всю ширину. Во
 * flex-шапке кнопка сжимается по остатку и разваливается на две строки —
 * держим её одной строкой. Форма внутри шапки карточки во всех шаблонах
 * ровно одна, эта, поэтому селектор ничего постороннего не задевает. */
.m1-карточка__верх form .m1-кнопка {
  white-space: nowrap;
}

/* ── Подпись под таблицей ─────────────────────────────────────────────────
 * Мелкая серая строка, объясняющая, чего в таблице не видно: «показаны первые
 * сорок из двухсот шестидесяти девяти». Своё имя без приставки «m1-»: в
 * пакете такого блока нет, а класс с приставкой сверка состава честно сочтёт
 * лишним блоком (24.08.2026). */
.подпись-таблицы {
  margin: 10px 2px 0;
  color: var(--m1-тихий);
  font-size: 12px;
}

/* ── Выбор файла внутри зоны загрузки ─────────────────────────────────────
 * В эталоне «Выбрать файл» стоит справа ВНУТРИ пунктирной зоны, а «Залить
 * файл» — слева под ней. Пакет тянет любой прямой <div> зоны на всю свободную
 * ширину («.m1-зона-загрузки>div { flex: 1 }») — правило написано про блок с
 * пояснением, и наша обёртка кнопки, тоже <div>, отъедала половину зоны.
 * Колонкой имя выбранного файла встаёт под кнопку и не растягивает зону
 * в ширину (24.08.2026). */
.m1-зона-загрузки > .m1-выбор-файла {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Строка действий сразу под зоной загрузки: пакет ставит «m1-действия» по
   правому краю (так они стоят в шапке экрана и в подвале формы), а у
   дизайнера «Залить файл» прижата к левому краю зоны. */
.m1-зона-загрузки + .m1-действия {
  justify-content: flex-start;
  margin-top: 12px;
}

/* ── Переключатель вида ссылками ──────────────────────────────────────────
 * В макете «Мягкое, 4 дня» и «Срочное, 10 дней» — кнопки, у нас ссылки:
 * выбор тона меняет письмо на сервере, и переход по адресу честнее скрипта.
 * Пакет красит в этом блоке только «button», и наши ссылки оставались синим
 * подчёркнутым текстом в пустой рамке, а выбранный вариант ничем не
 * отличался от невыбранного (24.08.2026). */
.m1-переключатель-вида a {
  padding: 8px 12px;
  color: var(--m1-текст);
  background: var(--m1-бумага);
  border: 1px solid var(--m1-линия-сильная);
  border-radius: var(--m1-радиус-малый);
  text-decoration: none;
}
.m1-переключатель-вида a:hover,
.m1-переключатель-вида a.m1-активен {
  color: var(--m1-каркас);
  background: var(--m1-инфо-фон);
  border-color: var(--m1-акцент);
}

/* Строки «Что войдет в письмо» стоят вплотную: пакет разводит «m1-выбор» там,
   где они лежат в «m1-группа-полей», а здесь они прямо в карточке. */
.m1-настройки-письма .m1-выбор + .m1-выбор {
  margin-top: 14px;
}

/* ── Кнопки шапки экрана в одну строку ────────────────────────────────────
 * «m1-заголовок-экрана» — flex: слева текст, справа действия. Пакет даёт
 * действиям расти по остатку, и там, где подзаголовок длиннее макетного, на
 * кнопки оставалось 238 точек вместо нужных 285 — «Все вопросы» и «Открыть
 * задачи» вставали стопкой одна под другой. Теперь сжимается текст, а кнопки
 * стоят рядом, как в макете. Порог 860 — тот, на котором пакет складывает
 * шапку в колонку: ниже него кнопки и должны переноситься (24.08.2026). */
@media (min-width: 861px) {
  .m1-заголовок-экрана > .m1-действия {
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
  .m1-заголовок-экрана > .m1-действия > .m1-кнопка {
    white-space: nowrap;
  }
}

/* Кнопка в ячейке таблицы не ломается на две строки: колонка «Действие» узкая,
   и «Вернуть в набор» вставало в два ряда, поднимая строку. */
.m1-таблица td .m1-кнопка {
  white-space: nowrap;
}

/* ── Полоса диаграммы не уже своей подписи ────────────────────────────────
 * Внутри полосы стоит слово состояния («Не начата», «Сделана»). Задача на
 * один-два дня давала полосу в двадцать точек, слово в неё не влезало и
 * обрезалось до «Не». Минимум — ширина самого длинного слова: короткая задача
 * рисуется чуть шире, чем она есть, зато читается. Точные даты остаются в
 * подсказке при наведении и в списке задач (24.08.2026). */
.m1-гант__задача {
  min-width: 84px;
}

/* Файлы исходного вопроса — отдельным блоком после всех ответов, с отбивкой:
   в макете они вынесены в конец, а не стоят каждый за своим ответом. */
.файлы-ответов {
  margin-top: 10px;
}

/* ── Полоска мини-диаграммы не уже своей подписи ──────────────────────────
 * То же, что у полной диаграммы, но в карточке «Ближайшие две недели».
 * Ширину полоски задаёт длина задачи: у однодневной это шесть процентов оси —
 * 52 точки, а «Не начата» просит девяносто. Подпись ломалась на две строки,
 * вылезала за полоску и поднимала строку с 54 точек до 59. Минимум ширины —
 * сама подпись в одну строку (24.08.2026). */
.m1-мини-гант__строка i {
  min-width: max-content;
  white-space: nowrap;
}

/* ── Текст на карточке входа ──────────────────────────────────────────────
 * Абзацы карточки идут во всю ширину колонки — 440 точек, — и браузер по
 * умолчанию оставляет в конце одинокое слово. «pretty» просит его подтянуть
 * строки друг к другу: висячих хвостов не остаётся, блок читается ровным.
 * Обещание про пароль отбито от плиты «Данные защищены»: они стояли
 * вплотную, и плита с абзацем читались одним куском (владелец, 24.08.2026). */
.m1-вход__тело > p {
  text-wrap: pretty;
}
.m1-обещание {
  margin-top: 18px;
  text-wrap: pretty;
}

/* ── Число «Сегодня в работе» — ссылка ───────────────────────────────────────
 * Владелец попросил, чтобы число нажималось (24.08.2026): по нему открывается
 * список своих вопросов без ответа. Вид блока при этом не меняется — цвет и
 * кегль держит пакет, наше дело снять подчеркивание и вернуть его наведением.
 * Свой класс без приставки «m1-»: правило на классе пакета перебило бы его на
 * всех экранах. */
.в-работе {
  color: inherit;
  text-decoration: none;
}
.в-работе:hover strong {
  text-decoration: underline;
}

/* ── Ответ прямо в карточке списка вопросов ────────────────────────────────
 * Владелец, 24.08.2026: ответ пишется на месте, без перехода на форму
 * раздела. Запертое поле показывает сказанное тихо — чтобы его не приняли
 * за пустое приглашение печатать. Свой класс без приставки пакета: «m1-мой-
 * ответ» правилам пакета оставлен как есть.
 */
.ответ-на-месте textarea[readonly] {
  color: var(--m1-тихий);
  background: var(--m1-тихий-фон);
  cursor: default;
}
.ответ-на-месте textarea {
  resize: vertical;
}

/* ── Липкая карточка не должна прятаться под шапкой ────────────────────────
 * Пакет держит карточку мастер-детали липкой с отступом 16 пикселей — он
 * рассчитан на макет без липкой шапки. У нас шапка 64 пикселя и накрывала верх
 * карточки: пилюля состояния и начало заголовка срезались (владелец,
 * 24.08.2026). Свой класс, а не правило классу пакета: на других экранах
 * липкость остаётся прежней.
 */
/* Селектор из двух классов — как у правила пакета: одного класса не хватает,
 * правило «.m1-мастер-деталь > .m1-деталь» весит больше и оставляло 16px. */
.m1-мастер-деталь > .деталь-под-шапкой {
  top: 84px;
  max-height: calc(100vh - 100px);
}

/* Разбор расхождения на карточке вопроса: варианты ответов с переключателем.
   Владелец 25.08.2026: «должны быть варианты ответов, с которых я выбираю.
   Я выбираю вариант, пишу «Согласовать ответ» — и на этой же странице он
   согласовывает один вариант». Свои классы без приставки пакета: правило на
   «m1-ответ-пользователя» ушло бы на все экраны, где ответы просто читают. */
.разбор-расхождения {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.разбор-расхождения .m1-ответы {
  display: grid;
  gap: 8px;
}
.m1-ответы > .вариант-ответа {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px;
  cursor: pointer;
  border: 1px solid var(--m1-линия);
  border-radius: 12px;
}
.m1-ответы > .вариант-ответа:hover {
  border-color: var(--m1-акцент, var(--m1-линия));
}
/* Выбранный вариант виден рамкой и фоном, а не только точкой переключателя:
   на карточке из пяти ответов точку глазами не находят. */
.m1-ответы > .вариант-ответа:has(input:checked) {
  background: var(--m1-фон-мягкий, var(--m1-белый));
  border-color: var(--m1-текст);
  box-shadow: inset 0 0 0 1px var(--m1-текст);
}
.вариант-ответа input[type="radio"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--m1-текст);
}
.вариант-ответа__текст {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.вариант-ответа__текст small {
  color: var(--m1-текст-тихий, inherit);
}

/* «Пользователи», вид по рабочим группам: разделы с людьми внутри
   (владелец, 25.08.2026 — «такие красивые разделы, и в каждом разделе
   пользователи, и ты можешь перейти в каждого»). Свои классы без приставки
   пакета: в макете этого вида нет вовсе. */
.группы-людей {
  display: grid;
  gap: 12px;
}
.люди-группы {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}
.m1-строка-входа.человек-группы {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--m1-линия);
}
.люди-группы > .человек-группы:first-child {
  border-top: 0;
}
.человек-группы small {
  display: block;
}

/* «Файлы в ответах» на обзоре: строка целиком ведёт в «Вопросы», отобранные
   по «есть ответ» и «с файлами» (владелец, 25.08.2026). Свой класс без
   приставки: в макете это неподвижный блок, а у нас переход. */
a.m1-файл-компактный.файл-в-ответах {
  color: inherit;
  text-decoration: none;
}
.файл-в-ответах > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.файл-в-ответах:hover b {
  text-decoration: underline;
}

/* Кнопка «Согласовать ответ» прилипает к низу карточки. Карточка вопроса
   прокручивается внутри себя (правило пакета), и на вопросе с пятью ответами
   панель решения оказывалась на 1352-й точке из 1605 — владелец её просто не
   видел и решил, что согласовать нельзя (25.08.2026). Правило под своим
   классом: панель решения есть и на других экранах, там она обычная. */
.разбор-расхождения .m1-панель-решения {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--m1-белый);
  box-shadow: 0 -8px 16px -12px rgba(0, 0, 0, .35);
}

/* Таблица задач: колонки ровнее и с разделителями между всеми, а не только
   после первой. Пакет держит первую колонку липкой и не уже 390 точек, и на
   широком экране она разрасталась до 754 при 100 у «Статуса» — «первый блок
   прям огромный, потом две поменьше» (владелец, 25.08.2026). Разделитель у
   пакета тоже только после первой колонки, поэтому между «Статусом» и
   «Ответственным» линии не было. Правила под своим классом: таблица задач
   одна такая, остальным таблицам эти ширины не подходят. */
.m1-таблица-задач {
  table-layout: fixed;
}
.m1-таблица-задач th:first-child,
.m1-таблица-задач td:first-child {
  min-width: 0;
  width: 52%;
}
.m1-таблица-задач th:nth-child(2),
.m1-таблица-задач td:nth-child(2) {
  width: 20%;
}
.m1-таблица-задач th:nth-child(3),
.m1-таблица-задач td:nth-child(3) {
  width: 28%;
}
/* Вертикальная линия между колонками — та же, что пакет рисует после первой. */
.m1-таблица-задач th:not(:last-child),
.m1-таблица-задач td:not(:last-child) {
  box-shadow: 1px 0 var(--m1-линия);
}
/* Гнездо карточки задачи разделителей не несёт: это одна ячейка на всю
   ширину, и линия посреди неё выглядела бы обрывом таблицы. */
.m1-таблица-задач td.m1-гнездо-задачи {
  box-shadow: none;
}
@media (max-width: 900px) {
  /* На узком экране пакет разбирает таблицу в карточки — ширины и линии
     там только мешают. */
  .m1-таблица-задач {
    table-layout: auto;
  }
  .m1-таблица-задач th:first-child,
  .m1-таблица-задач td:first-child,
  .m1-таблица-задач th:nth-child(2),
  .m1-таблица-задач td:nth-child(2),
  .m1-таблица-задач th:nth-child(3),
  .m1-таблица-задач td:nth-child(3) {
    width: auto;
  }
  .m1-таблица-задач th:not(:last-child),
  .m1-таблица-задач td:not(:last-child) {
    box-shadow: none;
  }
}

/* Действие строки, которое меняет данные, — кнопка формы, а не ссылка: выпуск
   нового приглашения гасит прежнее, и делать это переходом по адресу нельзя
   (нет ни CSRF, ни защиты от повторного захода браузера). Выглядеть при этом
   она должна как соседние действия строки, иначе графа «Действие» разъезжается
   на две разные вещи (владелец, 25.08.2026).

   Имя без приставки «m1-» намеренно: сверка состава считает свой класс с этой
   приставкой лишним блоком, которого в макете нет.

   Цвет берется из «--m1-ссылка», а не из «--m1-действие»: соседнюю ссылку
   строки пакет красит правилом в четыре класса, и она выходит темнее
   (#286d99 против #2f78a7) — рядом это читалось как две разные вещи.
   Подчеркивание постоянное, как у ссылок таблицы. */
.действие-письмом {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--m1-ссылка);
  text-decoration: underline;
  text-align: left;
}
/* Форма в графе действий не должна занимать строку целиком: без этого кнопка
   уезжает под соседнее действие «Напомнить». */
.форма-действия {
  display: inline;
}

/* Цвет рабочей группы на кружке с инициалами (владелец, 25.08.2026): «у каждой
   группы свой цвет, подложка должна быть того цвета, который относится к этой
   группе». По цвету видно, чья это работа, ещё до чтения фамилии.

   Классы свои, без приставки «m1-»: сверка состава считает свой класс с этой
   приставкой лишним блоком пакета. Цвета — токены того же пакета, своих hex
   не заводим (ADR 0014). Вес правила равен пакетному «.m1-аватар», а наш файл
   грузится позже — поэтому подложка перекрывается, и только там, где класс
   повешен в шаблоне. */
.цвет-группы--зеленый {
  background: var(--m1-цвет-4f8e78);
}
.цвет-группы--песочный {
  background: var(--m1-цвет-c6954f);
}
.цвет-группы--коралл {
  background: var(--m1-цвет-c7756e);
}
.цвет-группы--синий {
  background: var(--m1-цвет-356f87);
}
.цвет-группы--охра {
  background: var(--m1-цвет-756249);
}

/* Ответственный в строке задачи: кружок и рядом имя с фамилией — так владелец
   попросил вместо пилюли рабочей группы («ответственный может быть только
   человек, группа ответственной быть не может»). Имена в столбик, когда людей
   несколько: в строку они расползались на треть таблицы. */
.ответственный-строкой {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ответственный-строкой + .ответственный-строкой {
  margin-top: 6px;
}
.ответственный-имя {
  white-space: nowrap;
}

/* Подпись рабочей группы над списком галочек: в форме перевода вопроса в
   задачу ответственных выбирают галочками (владелец, 25.08.2026 — «может быть
   и два ответственных»), а людей там несколько десятков, и без разделителя по
   группам список читается как сплошная простыня фамилий. */
.подпись-группы {
  display: block;
  margin: 10px 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--m1-тихий);
}
.подпись-группы:first-of-type {
  margin-top: 0;
}

/* Выбор людей одной ячейкой (владелец, 25.08.2026): «пусть это будет одна
   ячейка, но когда ты выбираешь, там ты можешь прокручивать пользователей».
   Раньше галочки стояли простыней во всю форму — на пятнадцати людях длинно,
   на пятидесяти форму пришлось бы листать.

   Вид повторяет поле «Рабочая группа» из пакета: тот же рост, радиус, кегль и
   та же стрелка («чтобы идентичность была»). Обертка своя, БЕЗ класса
   «m1-поле»: правило пакета «.m1-поле input» растягивает любой input на всю
   ширину и 40 точек высоты — галочки в списке превращались в пустые
   прямоугольники, а имена уезжали в соседнюю колонку (25.08.2026).

   Держится на «details», поэтому работает и без скрипта. */
.поле-выбора {
  display: grid;
  gap: 6px;
}
.поле-выбора__подпись {
  font-size: 12px;
  font-weight: 600;
}
.поле-выбора > small {
  color: var(--m1-тихий);
}
.выбор-людей {
  display: block;
}
.выбор-людей > summary {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 34px 0 12px;
  color: var(--m1-текст);
  font-size: 14px;
  background: var(--m1-бумага);
  border: 1px solid var(--m1-линия);
  border-radius: 10px;
  cursor: pointer;
  list-style: none;
  /* Та же стрелка, что у списков пакета: рисунком в фоне, а не символом. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23617480' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
}
.выбор-людей > summary::-webkit-details-marker,
.выбор-людей > summary::marker {
  display: none;
  content: "";
}
.выбор-людей > summary:hover,
.выбор-людей[open] > summary {
  border-color: var(--m1-линия-сильная);
}
.выбор-людей > summary:focus-visible {
  border-color: var(--m1-акцент);
  outline: none;
}
.выбор-людей__итог {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--m1-выключен);
}
.выбор-людей__итог--есть {
  color: var(--m1-текст);
}
/* Список прокручивается внутри себя: высота поля не зависит от числа людей.

   Стоит В ПОТОКЕ, а не поверх формы: всплывающий список накрывал кнопки
   «Завести задачу» и «Отмена», и нажать их можно было только закрыв список
   (проверено браузером 25.08.2026 — нажатие уходило в список). Раскрытый
   список раздвигает форму вниз, и это ровно то, чего ждёшь от поля. */
.выбор-людей__список {
  max-height: 260px;
  overflow-y: auto;
  margin: 4px 0 2px;
  padding: 6px;
  border: 1px solid var(--m1-линия-сильная);
  border-radius: 10px;
  background: var(--m1-бумага);
  box-shadow: 0 8px 24px rgb(36 55 70 / 12%);
}
.выбор-людей__строка {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
}
.выбор-людей__строка:hover {
  background: var(--m1-тихий-фон);
}
/* Галочка слева и своего размера — что бы ни делала форма вокруг. */
.выбор-людей__строка input[type="checkbox"] {
  flex: none;
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
}
.выбор-людей__строка > span {
  flex: 1;
  min-width: 0;
}
.выбор-людей__пусто {
  margin: 6px;
  color: var(--m1-тихий);
}

/* Переключение ролей в шапке на узком экране (владелец, 25.08.2026: «не вижу,
   где переключить на кабинет участника»).

   Пакет прячет «.m1-роль-вид» уже с 860 точек — на телефоне и на узком окне
   администратор оставался без перехода между своими двумя взглядами. Правило
   пакета не трогаем: возвращаем показ СВОИМ классом того же веса, а наш файл
   грузится позже. Подпись при этом укорачивается — «Вернуться к
   администратору» на 390 точках занимает всю строку шапки. */
.роль-в-шапке__кратко {
  display: none;
}
@media (max-width: 860px) {
  .роль-в-шапке {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
  }
  .роль-в-шапке__полно {
    display: none;
  }
  .роль-в-шапке__кратко {
    display: inline;
  }
}

/* Портрет на входе с телефона (владелец, 25.08.2026): «надпись перекрывает всё
   лицо Ильи Юрьевича — либо уменьшить и опустить, либо фотографию увеличить».

   В пакете фотография на узком экране всего 260 точек высотой, а цитата
   занимает почти всю ее площадь: подпись ложилась ровно на лицо. Делаем три
   вещи разом — снимок выше, кадр смещен так, что лицо стоит над цитатой, сама
   цитата меньше и прижата к низу.

   Правила своего класса, а не пакетных: «.портрет-входа» висит в шаблонах
   входа, и через него же ограничены правила для блоков пакета внутри — так
   правило не задевает другие экраны системы. */
@media (max-width: 620px) {
  .портрет-входа {
    min-height: 400px;
  }
  .портрет-входа > img {
    object-position: 53% 18%;
  }
  .портрет-входа .m1-вход__цитата {
    right: 14px;
    bottom: 14px;
    left: 14px;
    padding: 12px 14px;
    border-radius: 10px;
  }
  .портрет-входа .m1-вход__цитата p {
    font-size: 14px;
    line-height: 1.4;
  }
  .портрет-входа .m1-вход__цитата strong,
  .портрет-входа .m1-вход__цитата span {
    font-size: 12px;
  }
}

/* Выбор режима заливки набора (владелец, 26.08.2026): заменить набор целиком
   или добавить вопросы из файла. Стоит между зоной файла и кнопкой «Залить
   файл», поэтому отбит сверху — иначе читается как часть зоны загрузки. */
.режим-заливки {
  margin-top: 14px;
}
.режим-заливки legend {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
}
.режим-заливки .m1-выбор {
  align-items: flex-start;
  padding: 6px 0;
}
.режим-заливки .m1-выбор span {
  line-height: 1.4;
}