/* 01. Локальные шрифты. Внешние запросы не используются. */
@font-face {
  font-family: Gilroy;
  src: url('../assets/fonts/Gilroy-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Gilroy;
  src: url('../assets/fonts/Gilroy-Semibold.otf') format('opentype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Gilroy;
  src: url('../assets/fonts/Gilroy-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Tektur;
  src: url('../assets/fonts/Tektur-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
/* 02. Семантические токены M1. Палитра осознанно заменяет прежний фирменный синий. */
:root {
  --m1-каркас: #183b56;
  --m1-каркас-глубокий: #15344b;
  --m1-действие: #2f78a7;
  --m1-действие-наведение: #24678f;
  --m1-акцент: #66afcf;
  --m1-фон: #f2f7fa;
  --m1-бумага: #fff;
  --m1-тихий-фон: #f7fafc;
  --m1-линия: #d8e4ea;
  --m1-линия-сильная: #b8cbd5;
  --m1-текст: #243746;
  --m1-тихий: #617480;
  --m1-выключен: #96a5ad;
  --m1-успех: #347563;
  --m1-успех-фон: #e8f3ef;
  --m1-инфо: #426f85;
  --m1-инфо-фон: #eaf1f5;
  --m1-ожидание: #946723;
  --m1-ожидание-фон: #fbf3e5;
  --m1-риск: #a84f4a;
  --m1-риск-фон: #f9ebea;
  --m1-ссылка: #286d99;
  --m1-черный: #000;
  --m1-белый: #fff;
  /* Совместимые оттенки принятой палитры. Все декоративные цвета живут только здесь. */
  --m1-цвет-214d6a: #214d6a;
  --m1-цвет-235b7a: #235b7a;
  --m1-цвет-245d7c: #245d7c;
  --m1-цвет-356f87: #356f87;
  --m1-цвет-4f8e78: #4f8e78;
  --m1-цвет-5b9a86: #5b9a86;
  --m1-цвет-639581: #639581;
  --m1-цвет-65a08c: #65a08c;
  --m1-цвет-6e9fb5: #6e9fb5;
  --m1-цвет-756249: #756249;
  --m1-цвет-7fa9bd: #7fa9bd;
  --m1-цвет-8eb6c8: #8eb6c8;
  --m1-цвет-b4ced9: #b4ced9;
  --m1-цвет-b8c6cd: #b8c6cd;
  --m1-цвет-bcd6e1: #bcd6e1;
  --m1-цвет-c4d9e3: #c4d9e3;
  --m1-цвет-c4dce5: #c4dce5;
  --m1-цвет-c6954f: #c6954f;
  --m1-цвет-c6dce6: #c6dce6;
  --m1-цвет-c7756e: #c7756e;
  --m1-цвет-c9756e: #c9756e;
  --m1-цвет-d3a45d: #d3a45d;
  --m1-цвет-d4e0e6: #d4e0e6;
  --m1-цвет-d7ad65: #d7ad65;
  --m1-цвет-d8867d: #d8867d;
  --m1-цвет-d98b83: #d98b83;
  --m1-цвет-d9e7ed: #d9e7ed;
  --m1-цвет-dce6eb: #dce6eb;
  --m1-цвет-dfeef3: #dfeef3;
  --m1-цвет-e6edf1: #e6edf1;
  --m1-цвет-e6f2f6: #e6f2f6;
  --m1-цвет-e7eef1: #e7eef1;
  --m1-цвет-e7eef2: #e7eef2;
  --m1-цвет-e8eef1: #e8eef1;
  --m1-цвет-e8f3f7: #e8f3f7;
  --m1-цвет-e9f3f7: #e9f3f7;
  --m1-цвет-eadcc2: #eadcc2;
  --m1-цвет-edf5f8: #edf5f8;
  --m1-цвет-edf6f9: #edf6f9;
  --m1-цвет-eff6f9: #eff6f9;
  --m1-цвет-eff7f5: #eff7f5;
  --m1-цвет-f6f9fa: #f6f9fa;
  --m1-цвет-f7f0e5: #f7f0e5;
  --m1-цвет-f7fafc: #f7fafc;
  --m1-цвет-f8fbfc: #f8fbfc;
  --m1-цвет-fdf8ee: #fdf8ee;
  --m1-шаг-1: 4px;
  --m1-шаг-2: 8px;
  --m1-шаг-3: 12px;
  --m1-шаг-4: 16px;
  --m1-шаг-6: 24px;
  --m1-шаг-8: 32px;
  --m1-шаг-12: 48px;
  --m1-радиус-малый: 5px;
  --m1-радиус: 9px;
  --m1-радиус-большой: 13px;
  --m1-пилюля: 999px;
  --m1-тень: 0 14px 40px rgba(24,59,86,.1);
  --m1-фокус: 0 0 0 3px rgba(102,175,207,.3);
  --m1-меню: 248px;
  --m1-верх: 64px;
  --m1-текст-строка: 74ch;
}
/* 03. Сброс, доступность и базовая типографика. */
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: var(--m1-текст);
  background: var(--m1-фон);
  font: 15px/1.5 Gilroy,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
}
a:not(.m1-кнопка):not(.m1-навигация__ссылка):not(.m1-карточка__вход):not(.m1-строка-входа) {
  color: var(--m1-ссылка);
}
button,input,textarea,select {
  font: inherit;
}
button,a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
img {
  max-width: 100%;
  display: block;
}
h1,h2,h3,h4,p {
  margin-top: 0;
}
svg {
  display: block;
}
.m1-скрыто {
  display: none !important;
}
.m1-только-для-чтения {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
:focus-visible {
  outline: 0;
  box-shadow: var(--m1-фокус);
}
.m1-иконка {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.m1-марка {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.m1-марка__м {
  font: 500 19px Tektur,sans-serif;
}
.m1-марка__разделитель {
  font: 500 13.7px Tektur,sans-serif;
  opacity: .48;
}
.m1-марка__раздел {
  font: 500 13.7px Tektur,sans-serif;
  opacity: .72;
}
/* 04. Общий каркас: боковое меню, верхняя панель и рабочая область. */
.m1-приложение {
  display: grid;
  grid-template-columns: var(--m1-меню) minmax(0,1fr);
  min-height: 100vh;
}
.m1-боковое-меню {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 22px 14px;
  color: var(--m1-белый);
  background: radial-gradient(circle at 88% 4%,rgba(102,175,207,.22),transparent 28%),linear-gradient(165deg,var(--m1-цвет-214d6a),var(--m1-каркас));
}
.m1-боковое-меню__марка {
  padding: 0 10px 24px;
}
.m1-навигация {
  display: grid;
  gap: 4px;
}
.m1-навигация__группа {
  margin: 18px 10px 7px;
  color: rgba(255,255,255,.42);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
}
.m1-навигация__ссылка {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 43px;
  padding: 0 11px;
  color: rgba(255,255,255,.72);
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none;
}
.m1-навигация__ссылка:hover {
  color: var(--m1-белый);
  background: rgba(255,255,255,.08);
}
.m1-навигация__ссылка.m1-активна {
  color: var(--m1-белый);
  background: var(--m1-действие);
  border-color: rgba(255,255,255,.13);
  font-weight: 600;
}
.m1-навигация__счетчик {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  color: var(--m1-каркас);
  background: var(--m1-белый);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}
.m1-боковое-меню__низ {
  margin-top: auto;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
}
.m1-боковое-меню__низ strong,.m1-боковое-меню__низ span {
  display: block;
}
.m1-боковое-меню__низ strong {
  font-size: 12px;
}
.m1-боковое-меню__низ span {
  margin-top: 5px;
  color: rgba(255,255,255,.52);
  font-size: 10px;
  line-height: 1.4;
}
.m1-рабочая-зона {
  min-width: 0;
}
.m1-верхняя-панель {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  height: var(--m1-верх);
  padding: 0 28px;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--m1-линия);
  backdrop-filter: blur(12px);
}
.m1-верхняя-панель .m1-кнопка-меню {
  display: none;
}
.m1-контекст {
  color: var(--m1-тихий);
  font-size: 13px;
}
.m1-контекст b {
  color: var(--m1-текст);
}
.m1-инструменты {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.m1-поиск-компактный {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 170px;
  height: 36px;
  padding: 0 12px;
  color: var(--m1-тихий);
  background: var(--m1-тихий-фон);
  border: 1px solid var(--m1-линия);
  border-radius: 18px;
}
.m1-поиск-компактный input {
  min-width: 0;
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
}
.m1-кнопка-иконка {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--m1-тихий);
  background: var(--m1-бумага);
  border: 1px solid var(--m1-линия);
  border-radius: 50%;
}
.m1-аватар {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  color: var(--m1-белый);
  background: var(--m1-действие);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}
.m1-аватар--зеленый {
  background: var(--m1-цвет-4f8e78);
}
.m1-аватар--песочный {
  background: var(--m1-цвет-c6954f);
}
.m1-аватар--коралл {
  background: var(--m1-цвет-c7756e);
}
.m1-аватары {
  display: inline-flex;
  padding-left: 6px;
}
.m1-аватары .m1-аватар {
  margin-left: -6px;
  border: 2px solid var(--m1-белый);
}
.m1-аватары .m1-аватар:first-child {
  margin-left: 0;
}
.m1-экран {
  display: none;
  padding: 28px clamp(18px,3vw,42px) 50px;
}
.m1-экран.m1-активен {
  display: block;
}
.m1-заголовок-экрана {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
}
.m1-заголовок-экрана h1 {
  margin: 3px 0 5px;
  font-size: 28px;
  line-height: 1.18;
}
.m1-заголовок-экрана p {
  margin: 0;
  color: var(--m1-тихий);
}
.m1-надзаголовок {
  color: var(--m1-действие);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}
.m1-действия {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.m1-хлебные-крошки {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--m1-тихий);
  font-size: 12px;
}
.m1-хлебные-крошки a {
  color: var(--m1-действие);
  text-decoration: none;
}
/* 05. Действия, поверхности, статусы и прогресс. */
.m1-кнопка {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: .14s ease;
}
.m1-кнопка:hover {
  transform: translateY(-1px);
}
.m1-кнопка:active {
  transform: none;
}
.m1-кнопка--главная {
  color: var(--m1-белый);
  background: var(--m1-действие);
}
.m1-кнопка--главная:hover {
  background: var(--m1-действие-наведение);
}
.m1-кнопка--тихая {
  color: var(--m1-каркас);
  background: var(--m1-белый);
  border-color: var(--m1-линия-сильная);
}
.m1-кнопка--тихая:hover {
  background: var(--m1-цвет-eff6f9);
  border-color: var(--m1-акцент);
}
.m1-кнопка--опасная {
  color: var(--m1-риск);
  background: var(--m1-риск-фон);
}
.m1-кнопка--опасная:hover {
  color: var(--m1-белый);
  background: var(--m1-риск);
}
.m1-кнопка:disabled {
  color: var(--m1-тихий);
  background: var(--m1-цвет-e7eef1);
  border-color: var(--m1-цвет-e7eef1);
  cursor: not-allowed;
  transform: none;
}
.m1-текстовая-кнопка {
  padding: 0;
  color: var(--m1-действие);
  background: transparent;
  border: 0;
  font-weight: 600;
}
.m1-карточка {
  background: var(--m1-бумага);
  border: 1px solid var(--m1-линия);
  border-radius: var(--m1-радиус-большой);
}
.m1-карточка__тело {
  padding: 20px;
}
.m1-карточка__верх {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.m1-карточка__верх h2,.m1-карточка__верх h3 {
  margin: 4px 0 0;
}
.m1-карточка__верх h2 {
  font-size: 19px;
}
.m1-карточка__верх h3 {
  font-size: 16px;
}
.m1-карточка__верх small {
  color: var(--m1-тихий);
}
.m1-пилюля {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--m1-пилюля);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.m1-пилюля--нейтральная {
  color: var(--m1-тихий);
  background: var(--m1-фон);
}
.m1-пилюля--работа {
  color: var(--m1-инфо);
  background: var(--m1-инфо-фон);
}
.m1-пилюля--готово {
  color: var(--m1-успех);
  background: var(--m1-успех-фон);
}
.m1-пилюля--ожидание {
  color: var(--m1-ожидание);
  background: var(--m1-ожидание-фон);
}
.m1-пилюля--риск {
  color: var(--m1-риск);
  background: var(--m1-риск-фон);
}
.m1-пилюля--автор {
  color: var(--m1-цвет-356f87);
  background: var(--m1-цвет-e8f3f7);
  border-color: var(--m1-цвет-c4dce5);
}
.m1-метка-происхождения {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 26px;
  padding: 4px 9px;
  color: var(--m1-цвет-356f87);
  background: var(--m1-цвет-edf6f9);
  border-left: 3px solid var(--m1-действие);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
}
.m1-пилюля--предложение {
  color: var(--m1-цвет-756249);
  background: var(--m1-цвет-f7f0e5);
  border-color: var(--m1-цвет-eadcc2);
}
.m1-состояния {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
/* 06. Формы. Все классы имеют префикс m1- и не пересекаются с движком. */
.m1-поле {
  display: grid;
  gap: 6px;
}
.m1-поле>span {
  font-size: 12px;
  font-weight: 600;
}
.m1-поле>small {
  color: var(--m1-тихий);
}
/* Поля формы и поля отбора выглядят одинаково: один рост, один радиус, один
   кегль. До этого формы были 42, 43 и 45 px с системной стрелкой у списков, а
   отбор — 40 px со своей: два разных набора полей в одной системе. */
.m1-поле input,.m1-поле textarea,.m1-поле select {
  width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  color: var(--m1-текст);
  font-size: 14px;
  background: var(--m1-белый);
  border: 1px solid var(--m1-линия);
  border-radius: 9px;
  outline: 0;
}
/* Своя стрелка вместо системной — та же, что в строке отбора. */
.m1-поле select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  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;
}
.m1-поле textarea {
  height: auto;
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.55;
}
.m1-поле input:hover,.m1-поле textarea:hover,.m1-поле select:hover {
  border-color: var(--m1-линия-сильная);
}
.m1-поле input:focus,.m1-поле textarea:focus,.m1-поле select:focus {
  border-color: var(--m1-акцент);
  box-shadow: var(--m1-фокус);
}
.m1-поле [aria-invalid=true] {
  color: var(--m1-риск);
  background: var(--m1-риск-фон);
  border-color: var(--m1-риск);
}
/* Поля выравниваются по верху ячейки. Без этого поле с длинной подсказкой
   растягивало соседнее, и подписи слева и справа стояли на разной высоте. */
.m1-сетка-полей {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 16px;
}
/* Карточка формы и подсказка рядом начинаются с одной линии. */
.m1-форма-макет,
.m1-две-колонки--форма {
  align-items: start;
}
.m1-выбор {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.m1-выбор input {
  margin-top: 4px;
  accent-color: var(--m1-действие);
}
.m1-переключатель {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--m1-линия);
}
.m1-переключатель b,.m1-переключатель small {
  display: block;
}
.m1-переключатель small {
  margin-top: 3px;
  color: var(--m1-тихий);
}
.m1-переключатель input {
  accent-color: var(--m1-действие);
}
.m1-полоса {
  position: relative;
  display: block;
  height: 8px;
  overflow: hidden;
  background: var(--m1-цвет-e7eef2);
  border-radius: var(--m1-пилюля);
  box-shadow: inset 0 0 0 1px var(--m1-цвет-d4e0e6);
}
.m1-полоса>i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--m1-значение,0%);
  background: var(--m1-действие);
  border-radius: inherit;
}
.m1-полоса--зеленая>i {
  background: var(--m1-цвет-5b9a86);
}
.m1-полоса--песочная>i {
  background: var(--m1-цвет-d3a45d);
}
.m1-метрики {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 10px;
  margin: 12px 0;
}
.m1-метрика {
  position: relative;
  min-height: 112px;
  padding: 17px;
  overflow: hidden;
  background: var(--m1-белый);
  border: 1px solid var(--m1-линия);
  border-radius: 11px;
}
.m1-метрика:before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--m1-акцент);
}
.m1-метрика strong {
  display: block;
  font-size: 30px;
  line-height: 1;
}
.m1-метрика span {
  display: block;
  margin-top: 16px;
  color: var(--m1-тихий);
  font-size: 12px;
}
.m1-метрика em {
  position: absolute;
  top: 17px;
  right: 15px;
  color: var(--m1-успех);
  font-size: 11px;
  font-style: normal;
}
.m1-метрика--риск:before {
  background: var(--m1-цвет-d8867d);
}
.m1-метрика--риск em {
  color: var(--m1-риск);
}
.m1-метрика--песок:before {
  background: var(--m1-цвет-d3a45d);
}
/* 07. Кабинеты и административная инфографика. */
.m1-приветствие {
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  min-height: 220px;
  overflow: hidden;
  background: linear-gradient(135deg,var(--m1-белый),var(--m1-цвет-eff6f9));
  border: 1px solid var(--m1-линия);
  border-radius: 13px;
}
.m1-приветствие__текст {
  padding: 27px;
}
.m1-приветствие h1 {
  margin: 9px 0 8px;
  font-size: 29px;
}
.m1-приветствие p {
  max-width: 650px;
  color: var(--m1-тихий);
}
.m1-приветствие__контекст {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 24px;
  color: var(--m1-каркас);
  background: linear-gradient(160deg,var(--m1-цвет-e6f2f6),var(--m1-цвет-f8fbfc));
  border-left: 1px solid var(--m1-линия);
}
.m1-приветствие__контекст strong,.m1-приветствие__контекст span {
  display: block;
}
.m1-приветствие__контекст strong {
  font-size: 18px;
}
.m1-приветствие__контекст span {
  color: var(--m1-тихий);
  font-size: 12px;
}
.m1-приветствие__контекст .m1-полоса {
  width: 100%;
}
.m1-приветствие__фото {
  position: relative;
}
.m1-приветствие__фото:before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,var(--m1-цвет-eff6f9),transparent 38%);
}
.m1-приветствие__фото img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.m1-круг-прогресса {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 17px 0;
}
.m1-круг-прогресса__число {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 8px solid var(--m1-цвет-d9e7ed);
  border-top-color: var(--m1-действие);
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
}
.m1-маршруты {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
}
.m1-маршрут {
  display: grid;
  gap: 16px;
  min-height: 205px;
  padding: 20px;
}
.m1-маршрут__верх {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.m1-маршрут__группа {
  color: var(--m1-действие);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
}
.m1-маршрут h3 {
  margin: 0;
  font-size: 17px;
}
.m1-маршрут p {
  margin: 0;
  color: var(--m1-тихий);
  font-size: 13px;
}
.m1-дашборд-баннер {
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  min-height: 172px;
  overflow: hidden;
  color: var(--m1-белый);
  background: linear-gradient(135deg,var(--m1-каркас),var(--m1-цвет-245d7c));
  border-radius: 13px;
}
.m1-дашборд-баннер__текст {
  padding: 25px;
}
.m1-дашборд-баннер h2 {
  margin: 7px 0 5px;
}
.m1-дашборд-баннер p {
  color: rgba(255,255,255,.66);
}
.m1-дашборд-баннер__сводка {
  display: grid;
  align-content: center;
  gap: 9px;
  padding: 24px;
  background: linear-gradient(155deg,rgba(255,255,255,.13),rgba(255,255,255,.03));
  border-left: 1px solid rgba(255,255,255,.16);
}
.m1-дашборд-баннер__сводка span {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 8px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
}
.m1-дашборд-баннер__сводка b {
  color: var(--m1-белый);
  font-size: 21px;
}
.m1-дашборд-баннер__фото {
  position: relative;
}
.m1-дашборд-баннер__фото:before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,var(--m1-цвет-235b7a),transparent 45%);
}
.m1-дашборд-баннер__фото img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.m1-дашборд-сетка {
  display: grid;
  grid-template-columns: 1.25fr .9fr;
  gap: 12px;
}
.m1-список-внимания article,
.m1-список-внимания>a {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--m1-линия);
}
.m1-список-внимания article>span:first-child,
.m1-список-внимания>a>span:first-child {
  color: var(--m1-действие);
  font-weight: 700;
}
.m1-список-внимания small,.m1-список-внимания strong {
  display: block;
}
.m1-список-внимания small {
  color: var(--m1-действие);
}
.m1-групповой-прогресс article,
.m1-групповой-прогресс>a {
  margin: 16px 0;
}
/* Строка направления стала ссылкой, а ссылка строчная: без display она
   перестаёт держать вертикальные отступы, и три полосы слипаются в одну.
   Отступ по бокам отрицательный — чтобы подсветка при наведении выходила
   за текст, а сами полосы остались на прежней ширине. */
.m1-групповой-прогресс>a {
  display: block;
  margin: 14px -9px;
  padding: 7px 9px;
}
.m1-групповой-прогресс article>div,
.m1-групповой-прогресс>a>div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
}
.m1-групповой-прогресс b {
  font-size: 13px;
}
.m1-групповой-прогресс em {
  color: var(--m1-действие);
  font-style: normal;
  font-weight: 700;
}
.m1-график-стек {
  display: flex;
  height: 16px;
  overflow: hidden;
  border-radius: 8px;
}
.m1-график-стек i {
  display: block;
}
.m1-есть-ответ {
  background: var(--m1-цвет-65a08c);
}
.m1-ответ {
  background: var(--m1-цвет-7fa9bd);
}
.m1-отложено {
  background: var(--m1-цвет-d7ad65);
}
.m1-расхождение {
  background: var(--m1-цвет-d98b83);
}
.m1-нет-ответа {
  background: var(--m1-цвет-dce6eb);
}
.m1-легенда {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 14px;
}
.m1-легенда span,
.m1-легенда>a {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--m1-тихий);
  font-size: 12px;
}
.m1-легенда i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.m1-нагрузка article,
.m1-нагрузка>a {
  display: grid;
  grid-template-columns: 35px 1fr 96px;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}
.m1-нагрузка__полоса {
  position: relative;
  height: 9px;
  background: var(--m1-цвет-e7eef2);
  border-radius: 6px;
}
.m1-нагрузка__полоса i,.m1-нагрузка__полоса b {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
}
.m1-нагрузка__полоса i {
  width: var(--m1-вся);
  background: var(--m1-цвет-8eb6c8);
}
.m1-нагрузка__полоса b {
  width: var(--m1-просрочено);
  background: var(--m1-цвет-d98b83);
}
.m1-нагрузка span {
  font-size: 12px;
}
.m1-нагрузка small {
  display: block;
  color: var(--m1-тихий);
}
.m1-фильтры {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 12px;
  padding: 13px;
  background: var(--m1-белый);
  border: 1px solid var(--m1-линия);
  border-radius: 10px;
}
.m1-фильтры .m1-поле {
  min-width: 150px;
}
/* Все окошки строки отбора — одного роста, радиуса и кегля. До этого поиск
   был 43 px, списки 37, пилюля 38: три разных элемента в одной строке читались
   как три разных элемента управления, хотя делают одно дело. Высота задана
   явно, а не минимумом: у поля ввода и у списка своя внутренняя высота, и
   минимум их не выравнивает. */
.m1-фильтры .m1-поле input:not([type=checkbox]),
.m1-фильтры .m1-поле select,
.m1-фильтры .m1-отбор {
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid var(--m1-линия);
  border-radius: 9px;
}
/* Своя стрелка вместо системной: у нативной свой цвет и свой размер, и она
   не совпадает ни с одной иконкой пакета. */
.m1-фильтры .m1-поле select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  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;
}
/* Поиск ужат: в строке отбора теперь четыре элемента вместо трёх, и прежние
   220 px минимума выталкивали «С файлами» и счётчик на вторую строку. */
.m1-фильтры__поиск {
  flex: 1 1 200px;
  min-width: 170px !important;
}
.m1-фильтры__итог {
  margin-left: auto;
  color: var(--m1-тихий);
  font-size: 13px;
}
/* 08. Таблицы и большие матрицы. Обертка отвечает за безопасную прокрутку. */
.m1-обертка-таблицы {
  max-width: 100%;
  overflow: auto;
  background: var(--m1-белый);
  border: 1px solid var(--m1-линия);
  border-radius: 10px;
}
.m1-таблица {
  width: 100%;
  min-width: 940px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.m1-таблица th,.m1-таблица td {
  height: 48px;
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--m1-линия);
  vertical-align: middle;
}
.m1-таблица th {
  position: sticky;
  top: 0;
  z-index: 3;
  color: var(--m1-тихий);
  background: var(--m1-тихий-фон);
  font-size: 11px;
  letter-spacing: .03em;
}
.m1-таблица th:first-child,.m1-таблица td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 250px;
  background: var(--m1-белый);
  box-shadow: 1px 0 var(--m1-линия);
}
.m1-таблица th:first-child {
  z-index: 4;
  background: var(--m1-тихий-фон);
}
.m1-таблица tr:last-child td {
  border-bottom: 0;
}
.m1-человек {
  display: flex;
  align-items: center;
  gap: 8px;
}
.m1-человек b,.m1-человек small {
  display: block;
}
.m1-человек small {
  color: var(--m1-тихий);
}
/* 09. Вопросы, ответы, решения и редакторы. */
.m1-мастер-деталь {
  display: grid;
  grid-template-columns: 370px minmax(0,1fr);
  gap: 12px;
  min-height: 650px;
}
.m1-список-записей {
  padding: 10px;
}
.m1-список-записей__поиск {
  margin-bottom: 8px;
}
.m1-запись {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 13px;
  color: var(--m1-текст);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  text-align: left;
}
.m1-запись:hover {
  background: var(--m1-тихий-фон);
}
.m1-запись.m1-активна {
  background: var(--m1-цвет-eff6f9);
  border-color: var(--m1-цвет-c4d9e3);
}
.m1-запись__верх {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.m1-запись__код {
  color: var(--m1-действие);
  font-size: 11px;
  font-weight: 700;
}
.m1-запись>strong {
  font-size: 14px;
  line-height: 1.35;
}
.m1-запись>small {
  color: var(--m1-тихий);
}
.m1-деталь {
  padding: 24px;
}
.m1-деталь__верх {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.m1-меню-действий {
  position: relative;
}
.m1-меню-действий__список {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 8;
  display: grid;
  width: 228px;
  padding: 7px;
  background: var(--m1-белый);
  border: 1px solid var(--m1-линия);
  border-radius: 9px;
  box-shadow: var(--m1-тень);
}
.m1-меню-действий__список button {
  padding: 9px 10px;
  color: var(--m1-текст);
  background: transparent;
  border: 0;
  border-radius: 6px;
  text-align: left;
}
.m1-меню-действий__список button:hover {
  background: var(--m1-тихий-фон);
}
.m1-меню-действий__список .m1-меню-действий__опасно {
  color: var(--m1-риск);
  border-top: 1px solid var(--m1-линия);
  border-radius: 0 0 6px 6px;
}
.m1-деталь h2 {
  max-width: 780px;
  margin: 18px 0 7px;
  font-size: 24px;
  line-height: 1.28;
}
.m1-деталь__пояснение {
  max-width: var(--m1-текст-строка);
  color: var(--m1-тихий);
}
.m1-метаданные {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  margin: 18px 0;
  padding: 13px;
  background: var(--m1-тихий-фон);
  border-radius: 9px;
}
.m1-метаданные span {
  color: var(--m1-тихий);
  font-size: 12px;
}
.m1-метаданные b {
  display: block;
  margin-bottom: 4px;
  color: var(--m1-текст);
}
.m1-ответы {
  display: grid;
  gap: 8px;
}
.m1-ответ-пользователя {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--m1-линия);
  border-radius: 9px;
}
.m1-ответ-пользователя h4 {
  margin: 0;
}
.m1-ответ-пользователя small {
  color: var(--m1-тихий);
}
.m1-ответ-пользователя p {
  margin: 7px 0 0;
}
/* Полоса итога стояла липкой и ездила по экрану вслед за прокруткой. Место у
   неё одно — под ответами, после которых итог и фиксируют; ездить ей незачем. */
.m1-панель-решения {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 14px;
  background: rgba(233,243,247,.96);
  border: 1px solid var(--m1-цвет-c6dce6);
  border-radius: 10px;
  box-shadow: var(--m1-тень);
}
.m1-панель-решения>div {
  flex: 1;
}
.m1-панель-решения small,.m1-панель-решения strong {
  display: block;
}
.m1-панель-решения small {
  color: var(--m1-действие);
}
.m1-форма-макет {
  display: grid;
  grid-template-columns: minmax(0,1fr) 330px;
  gap: 12px;
}
.m1-форма-карточка {
  padding: 23px;
}
.m1-форма-карточка h2 {
  margin-bottom: 20px;
}
.m1-форма-карточка .m1-поле {
  margin-bottom: 15px;
}
.m1-форма-боковая {
  align-self: start;
  padding: 20px;
}
.m1-вложение {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background: var(--m1-тихий-фон);
  border: 1px dashed var(--m1-линия-сильная);
  border-radius: 9px;
}
.m1-вложение>span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--m1-действие);
  background: var(--m1-цвет-e9f3f7);
  border-radius: 50%;
  font-size: 20px;
}
.m1-вложение strong,.m1-вложение small {
  display: block;
}
.m1-вложение small {
  color: var(--m1-тихий);
}
.m1-ответ-макет {
  display: grid;
  grid-template-columns: 280px minmax(0,1fr);
  gap: 12px;
}
.m1-рельс-разделов {
  align-self: start;
  padding: 10px;
}
.m1-рельс-разделов>small {
  display: block;
  margin: 7px 8px;
  color: var(--m1-тихий);
  font-weight: 700;
}
.m1-раздел-кнопка {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 8px 9px;
  color: var(--m1-текст);
  background: transparent;
  border: 0;
  border-radius: 8px;
  text-align: left;
}
.m1-раздел-кнопка.m1-активна {
  color: var(--m1-каркас);
  background: var(--m1-цвет-e9f3f7);
  font-weight: 600;
}
.m1-раздел-кнопка em {
  font-style: normal;
}
.m1-вопрос-форма {
  display: grid;
  gap: 10px;
}
.m1-вопрос-форма article {
  padding: 18px;
}
.m1-вопрос-форма h3 {
  margin: 10px 0 5px;
  font-size: 17px;
}
.m1-варианты-ответа {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 13px 0;
}
.m1-варианты-ответа label {
  padding: 12px;
  background: var(--m1-тихий-фон);
  border-radius: 8px;
}
.m1-варианты-ответа input {
  accent-color: var(--m1-действие);
}
.m1-нижние-действия {
  position: sticky;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px;
  background: rgba(255,255,255,.97);
  border: 1px solid var(--m1-линия);
  border-radius: 10px;
  box-shadow: var(--m1-тень);
}
.m1-нижние-действия>span {
  margin-right: auto;
  color: var(--m1-тихий);
}
/* 10. Планирование: только список задач и рабочий Гант текущей модели. */
.m1-гант-инструменты {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.m1-гант-инструменты>small {
  flex-basis: 100%;
  color: var(--m1-тихий);
}
.m1-гант {
  position: relative;
  min-width: 1080px;
  background: var(--m1-белый);
}
.m1-гант__шапка,.m1-гант__строка {
  display: grid;
  grid-template-columns: 330px repeat(8,1fr);
}
.m1-гант__шапка {
  min-height: 44px;
  background: var(--m1-тихий-фон);
}
.m1-гант__шапка>* {
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: var(--m1-тихий);
  border-right: 1px solid var(--m1-линия);
  font-size: 11px;
}
.m1-гант__строка {
  min-height: 68px;
  border-top: 1px solid var(--m1-линия);
}
.m1-гант__название {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 13px;
  border-right: 1px solid var(--m1-линия);
}
.m1-гант__название strong {
  font-size: 13px;
}
.m1-гант__шкала {
  position: relative;
  grid-column: 2/10;
  background: repeating-linear-gradient(90deg,var(--m1-белый) 0,var(--m1-белый) calc(12.5% - 1px),var(--m1-цвет-e6edf1) 12.5%);
}
.m1-гант__сегодня {
  position: absolute;
  z-index: 4;
  top: 44px;
  bottom: 0;
  left: 63%;
  width: 1px;
  border-left: 1px dashed var(--m1-риск);
}
.m1-гант__сегодня span {
  position: absolute;
  top: -28px;
  left: -25px;
  padding: 4px 7px;
  color: var(--m1-белый);
  background: var(--m1-риск);
  border-radius: 6px;
  font-size: 10px;
}
.m1-матрица-статусы {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.m1-матрица {
  min-width: 1020px;
}
.m1-матрица__шапка,.m1-матрица__строка {
  display: grid;
  grid-template-columns: 310px repeat(8,1fr);
}
.m1-матрица__шапка {
  min-height: 62px;
  background: var(--m1-тихий-фон);
}
.m1-матрица__шапка>span {
  display: flex;
  align-items: center;
  padding: 0 13px;
  color: var(--m1-тихий);
  border-right: 1px solid var(--m1-линия);
  font-size: 12px;
  font-weight: 600;
}
.m1-матрица__человек {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-right: 1px solid var(--m1-линия);
}
.m1-матрица__человек small {
  color: var(--m1-тихий);
  font-size: 10px;
}
.m1-матрица__строка {
  min-height: 68px;
  border-top: 1px solid var(--m1-линия);
}
.m1-матрица__вопрос {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 9px 100px 9px 13px;
  border-right: 1px solid var(--m1-линия);
}
.m1-матрица__вопрос small {
  color: var(--m1-действие);
  font-weight: 700;
}
.m1-матрица__вопрос strong {
  margin-top: 3px;
  font-size: 12px;
}
.m1-матрица__вопрос .m1-пилюля {
  position: absolute;
  right: 9px;
}
.m1-матрица__ячейка {
  display: grid;
  place-items: center;
  color: var(--m1-цвет-b8c6cd);
  border-right: 1px solid var(--m1-линия);
  font-size: 17px;
}
.m1-матрица__ячейка--ответ {
  color: var(--m1-успех);
  background: var(--m1-цвет-eff7f5);
}
.m1-матрица__ячейка--ожидание {
  color: var(--m1-ожидание);
  background: var(--m1-цвет-fdf8ee);
}
.m1-матрица__ячейка--риск {
  color: var(--m1-риск);
  background: var(--m1-риск-фон);
}
.m1-плита {
  display: grid;
  grid-template-columns: 25px 1fr;
  gap: 11px;
  padding: 15px;
  border: 1px solid var(--m1-линия);
  border-radius: 9px;
}
.m1-плита strong,.m1-плита p {
  margin: 0;
}
.m1-плита p {
  margin-top: 3px;
  color: var(--m1-тихий);
}
.m1-плита--инфо {
  color: var(--m1-инфо);
  background: var(--m1-инфо-фон);
}
.m1-плита--успех {
  color: var(--m1-успех);
  background: var(--m1-успех-фон);
}
.m1-плита--ожидание {
  color: var(--m1-ожидание);
  background: var(--m1-ожидание-фон);
}
.m1-плита--риск {
  color: var(--m1-риск);
  background: var(--m1-риск-фон);
}
.m1-состояния-сетка {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 12px;
}
.m1-пустое-состояние {
  display: grid;
  place-items: center;
  min-height: 330px;
  padding: 35px;
  text-align: center;
}
.m1-пустое-поиска {
  min-height: 220px;
  margin-top: 12px;
  padding: 24px;
}
.m1-пустое-состояние__иконка {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  color: var(--m1-действие);
  background: var(--m1-цвет-e9f3f7);
  border-radius: 50%;
  font-size: 27px;
}
.m1-пустое-состояние p {
  max-width: 48ch;
  color: var(--m1-тихий);
}
.m1-скелет {
  display: grid;
  gap: 10px;
}
.m1-скелет i {
  display: block;
  height: 15px;
  background: linear-gradient(90deg,var(--m1-цвет-e8eef1),var(--m1-цвет-f6f9fa),var(--m1-цвет-e8eef1));
  background-size: 200% 100%;
  border-radius: 6px;
  animation: загрузка 1.4s linear infinite;
}
.m1-скелет i:nth-child(2) {
  width: 85%;
}
.m1-скелет i:nth-child(3) {
  width: 62%;
}
@keyframes загрузка {
  to {
    background-position: -200% 0;
  }
}
/* 11. Вход, первый пароль и полноэкранные служебные состояния. */
.m1-вход {
  display: none;
  min-height: 100vh;
  padding: 34px;
  background: radial-gradient(circle at 92% 8%,rgba(47,120,167,.16),transparent 28%),var(--m1-фон);
}
body.m1-режим-входа .m1-приложение {
  display: none;
}
body.m1-режим-входа .m1-вход {
  display: grid;
  place-items: center;
}
.m1-вход__карточка {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  width: min(1180px,100%);
  min-height: 690px;
  overflow: hidden;
  background: var(--m1-белый);
  border: 1px solid var(--m1-линия);
  border-radius: 15px;
  box-shadow: var(--m1-тень);
}
.m1-вход__фото {
  position: relative;
  overflow: hidden;
  background: var(--m1-каркас);
}
.m1-вход__фото>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 53% 32%;
}
.m1-вход__градиент {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent 38%,rgba(18,48,70,.88));
}
.m1-вход__цитата {
  position: absolute;
  right: 32px;
  bottom: 32px;
  left: 32px;
  padding: 24px;
  color: var(--m1-белый);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 11px;
  background: rgba(24,59,86,.56);
  backdrop-filter: blur(10px);
}
.m1-вход__цитата p {
  font-size: 17px;
}
.m1-вход__цитата strong,.m1-вход__цитата span {
  display: block;
}
.m1-вход__цитата span {
  margin-top: 4px;
  color: rgba(255,255,255,.65);
}
.m1-вход__цитата .m1-марка {
  display: inline-flex;
  margin-top: 0;
  color: var(--m1-белый);
}
.m1-вход__цитата .m1-марка .m1-марка__раздел {
  display: inline;
  margin-top: 0;
  color: inherit;
}
.m1-вход__форма {
  display: flex;
  flex-direction: column;
}
.m1-вход__шапка {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 30px;
  border-bottom: 1px solid var(--m1-линия);
}
.m1-вход__шапка>span {
  color: var(--m1-тихий);
  font-size: 12px;
}
.m1-вход__тело {
  width: min(440px,calc(100% - 52px));
  margin: auto;
  padding: 40px 0;
}
.m1-вход__тело h1 {
  margin: 15px 0 7px;
  font-size: 30px;
}
.m1-вход__тело>p {
  color: var(--m1-тихий);
}
.m1-вход__тело .m1-поле {
  margin-bottom: 14px;
}
.m1-вход__режимы {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 18px 0;
  padding: 3px;
  background: var(--m1-фон);
  border-radius: 8px;
}
.m1-вход__режимы button {
  height: 34px;
  color: var(--m1-тихий);
  background: transparent;
  border: 0;
  border-radius: 6px;
}
.m1-вход__режимы button.m1-активен {
  color: var(--m1-каркас);
  background: var(--m1-белый);
  box-shadow: 0 2px 8px rgba(24,59,86,.08);
}
.m1-приватность {
  margin-top: 17px;
}
.m1-библиотека {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
}
.m1-образец {
  padding: 18px;
}
.m1-образец h3 {
  margin-bottom: 18px;
}
.m1-образец .m1-поле+.m1-поле,.m1-образец .m1-плита+.m1-плита {
  margin-top: 10px;
}
.m1-подвал-прототипа {
  margin-top: 35px;
  padding-top: 18px;
  color: var(--m1-тихий);
  border-top: 1px solid var(--m1-линия);
  font-size: 12px;
}
/* 12. Базовый адаптив существующих компонентов. */
@media (max-width:1180px) {
  :root {
    --m1-меню: 74px;
  }
  .m1-марка__разделитель,.m1-марка__раздел,.m1-навигация__текст,.m1-навигация__группа,.m1-боковое-меню__низ {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
  }
  .m1-боковое-меню__марка {
    padding: 0 4px 22px;
  }
  .m1-марка__м {
    font-size: 14px;
  }
  .m1-навигация__ссылка {
    justify-content: center;
    padding: 0;
  }
  .m1-навигация__счетчик {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font-size: 9px;
  }
  .m1-метрики {
    grid-template-columns: repeat(3,1fr);
  }
  .m1-дашборд-сетка {
    grid-template-columns: 1fr;
  }
  .m1-форма-макет {
    grid-template-columns: 1fr;
  }
  .m1-форма-боковая {
    grid-template-columns: 1fr 1fr;
  }
  .m1-маршруты {
    grid-template-columns: 1fr 1fr;
  }
  .m1-библиотека {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width:860px) {
  :root {
    --m1-меню: 0;
  }
  .m1-приложение {
    display: block;
  }
  .m1-боковое-меню {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(86vw,320px);
    transform: translateX(-105%);
    transition: transform .18s ease;
  }
  .m1-боковое-меню.m1-открыто {
    transform: translateX(0);
  }
  .m1-марка__разделитель,.m1-марка__раздел,.m1-навигация__текст,.m1-навигация__группа,.m1-боковое-меню__низ {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
  .m1-марка__м {
    font-size: 18px;
  }
  .m1-навигация__ссылка {
    justify-content: flex-start;
    padding: 0 11px;
  }
  .m1-навигация__счетчик {
    position: static;
    min-width: 24px;
    height: 20px;
    margin-left: auto;
  }
  .m1-верхняя-панель .m1-кнопка-меню {
    display: grid;
  }
  .m1-верхняя-панель {
    padding: 0 16px;
  }
  .m1-контекст {
    display: none;
  }
  .m1-экран {
    padding: 22px 16px 42px;
  }
  .m1-заголовок-экрана {
    display: block;
  }
  .m1-действия {
    justify-content: flex-start;
    margin-top: 14px;
  }
  .m1-приветствие,.m1-дашборд-баннер {
    grid-template-columns: 1fr;
  }
  .m1-приветствие__фото,.m1-дашборд-баннер__фото {
    min-height: 170px;
  }
  .m1-маршруты {
    grid-template-columns: 1fr;
  }
  .m1-метрики {
    grid-template-columns: 1fr 1fr;
  }
  .m1-мастер-деталь,.m1-ответ-макет {
    grid-template-columns: 1fr;
  }
  .m1-рельс-разделов {
    display: flex;
    gap: 6px;
    overflow: auto;
  }
  .m1-рельс-разделов>small {
    display: none;
  }
  .m1-раздел-кнопка {
    min-width: 210px;
  }
  .m1-список-записей {
    max-height: none;
    overflow: visible;
  }
  .m1-панель-решения {
    position: static;
    flex-wrap: wrap;
  }
  .m1-ответ-пользователя {
    grid-template-columns: 36px minmax(0,1fr);
  }
  .m1-ответ-пользователя>.m1-пилюля {
    grid-column: 2;
    justify-self: start;
  }
  .m1-деталь__верх {
    align-items: flex-start;
  }
  .m1-форма-боковая {
    grid-template-columns: 1fr;
  }
  .m1-вход {
    padding: 14px;
  }
  .m1-вход__карточка {
    grid-template-columns: 1fr;
  }
  .m1-вход__фото {
    min-height: 330px;
  }
  .m1-вход__тело {
    padding: 35px 0;
  }
  .m1-состояния-сетка,.m1-библиотека {
    grid-template-columns: 1fr;
  }
}
@media (max-width:620px) {
  body {
    font-size: 14px;
  }
  .m1-поиск-компактный {
    display: none;
  }
  .m1-верхняя-панель {
    height: 58px;
  }
  .m1-экран {
    padding: 18px 12px 36px;
  }
  .m1-заголовок-экрана h1 {
    font-size: 23px;
  }
  .m1-действия {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .m1-действия .m1-кнопка {
    width: 100%;
  }
  .m1-метрики {
    grid-template-columns: 1fr 1fr;
  }
  .m1-метрика {
    min-height: 96px;
  }
  .m1-метрика strong {
    font-size: 25px;
  }
  .m1-метрика span {
    margin-top: 12px;
  }
  .m1-приветствие__текст,.m1-дашборд-баннер__текст {
    padding: 20px;
  }
  .m1-сетка-полей,.m1-варианты-ответа,.m1-форма-боковая {
    grid-template-columns: 1fr;
  }
  .m1-метаданные {
    grid-template-columns: 1fr;
  }
  .m1-панель-решения,.m1-нижние-действия {
    align-items: stretch;
    flex-direction: column;
  }
  .m1-панель-решения>div,.m1-нижние-действия>span {
    width: 100%;
    margin: 0;
  }
  .m1-вход__фото {
    min-height: 260px;
  }
  .m1-вход__цитата {
    right: 16px;
    bottom: 16px;
    left: 16px;
    padding: 16px;
  }
  .m1-вход__тело {
    width: calc(100% - 30px);
  }
  .m1-таблица--карточки {
    min-width: 0;
  }
  .m1-таблица--карточки thead {
    display: none;
  }
  .m1-таблица--карточки tbody,.m1-таблица--карточки tr,.m1-таблица--карточки td {
    display: block;
  }
  .m1-таблица--карточки tr {
    margin: 10px;
    padding: 12px;
    border: 1px solid var(--m1-линия);
    border-radius: 9px;
  }
  .m1-таблица--карточки td,.m1-таблица--карточки td:first-child {
    position: static;
    height: auto;
    min-width: 0;
    padding: 6px 0;
    border: 0;
    box-shadow: none;
  }
  .m1-таблица--карточки td:before {
    content: attr(data-поле);
    display: block;
    color: var(--m1-тихий);
    font-size: 10px;
  }
  .m1-легенда {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}
/* Дополнительные рабочие сценарии M1 v2 */
body.m1-режим-входа .m1-вход:not(.m1-активен) {
  display: none;
}
body.m1-режим-входа .m1-вход.m1-активен {
  display: grid;
}
.m1-вход__карточка--компактная {
  min-height: 650px;
}
.m1-вход__демо-состояния {
  margin: 12px 0;
}
.m1-вход__демо-состояния .m1-текстовая-кнопка {
  font-size: 11px;
}
.m1-страница-ошибки {
  width: min(720px,100%);
  min-height: 520px;
  box-shadow: var(--m1-тень);
}
.m1-страница-ошибки>.m1-марка {
  position: absolute;
  top: 30px;
  left: 30px;
}
.m1-страница-ошибки .m1-пустое-состояние__иконка {
  width: 86px;
  height: 86px;
  font-size: 24px;
  font-weight: 700;
}
.m1-состояние-ссылки {
  width: min(900px,100%);
  padding: 30px;
  box-shadow: var(--m1-тень);
}
.m1-состояние-ссылки>.m1-марка {
  margin-bottom: 28px;
}
.m1-состояние-ссылки__сетка {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.m1-состояние-ссылки__сетка article {
  padding: 22px;
}
.m1-группа-полей {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--m1-линия);
  border-radius: 9px;
}
.m1-группа-полей legend {
  padding: 0 7px;
  font-size: 12px;
  font-weight: 600;
}
.m1-группа-полей small {
  color: var(--m1-тихий);
}
.m1-сводка-разделов {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 10px;
}
.m1-сводка-раздел {
  display: grid;
  gap: 13px;
  padding: 16px;
}
.m1-сводка-раздел>div {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
}
.m1-сводка-раздел>div>span {
  color: var(--m1-действие);
  font-weight: 700;
}
.m1-сводка-раздел>div>b {
  font-size: 13px;
}
.m1-сводка-раздел>div>em {
  color: var(--m1-тихий);
  font-size: 11px;
  font-style: normal;
}
.m1-возврат-маршрута {
  margin-bottom: 12px;
}
.m1-список-ссылок {
  display: grid;
}
.m1-список-ссылок a {
  display: grid;
  grid-template-columns: 90px 1fr 20px;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  color: var(--m1-текст);
  border-top: 1px solid var(--m1-линия);
  text-decoration: none;
}
.m1-список-ссылок a:first-child {
  border-top: 0;
}
.m1-список-ссылок a b {
  color: var(--m1-действие);
  font-size: 12px;
}
.m1-список-ссылок a span {
  font-size: 13px;
}
.m1-центр-подтверждения {
  display: grid;
  justify-items: center;
  width: min(880px,100%);
  margin: 0 auto;
  padding: 48px;
  text-align: center;
}
.m1-центр-подтверждения>p {
  max-width: 65ch;
  color: var(--m1-тихий);
}
.m1-центр-подтверждения .m1-метрики {
  width: 100%;
  grid-template-columns: repeat(3,1fr);
}
.m1-центр-подтверждения .m1-плита {
  max-width: 680px;
  text-align: left;
}
.m1-центр-подтверждения .m1-действия {
  margin-top: 24px;
}
.m1-мастер-шаги {
  display: grid;
  gap: 28px;
  max-width: 980px;
  margin: 0 auto;
}
.m1-мастер-шаги>section {
  padding-top: 22px;
  border-top: 1px solid var(--m1-линия);
}
.m1-шаги {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
}
.m1-шаг {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px;
  color: var(--m1-тихий);
  background: var(--m1-тихий-фон);
  border-radius: 8px;
  font-size: 12px;
}
.m1-шаг b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  color: var(--m1-тихий);
  background: var(--m1-белый);
  border: 1px solid var(--m1-линия);
  border-radius: 50%;
}
.m1-шаг.m1-активен {
  color: var(--m1-каркас);
  background: var(--m1-цвет-e9f3f7);
  font-weight: 600;
}
.m1-шаг.m1-активен b {
  color: var(--m1-белый);
  background: var(--m1-действие);
  border-color: var(--m1-действие);
}
.m1-вопрос-форма {
  padding-bottom: 100px;
}
.m1-файлы-ответа {
  display: grid;
  gap: 8px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--m1-линия);
}
.m1-файл {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: var(--m1-тихий-фон);
  border: 1px solid var(--m1-линия);
  border-radius: 8px;
}
.m1-файл>div {
  min-width: 0;
}
.m1-файл a,.m1-файл b {
  display: block;
  overflow: hidden;
  color: var(--m1-действие);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m1-файл small {
  display: block;
  color: var(--m1-тихий);
}
.m1-файл--загрузка {
  align-items: start;
}
.m1-файл--загрузка .m1-полоса {
  margin-top: 8px;
}
.m1-файлы-ответа__действие {
  display: flex;
  align-items: center;
  gap: 12px;
}
.m1-файлы-ответа__действие small {
  max-width: 70ch;
  color: var(--m1-тихий);
}
.m1-файл-компактный {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--m1-тихий-фон);
  border-radius: 7px;
}
.m1-файл-компактный>div {
  min-width: 0;
}
.m1-файл-компактный a {
  display: block;
  overflow: hidden;
  max-width: 250px;
  color: var(--m1-действие);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m1-файл-компактный small {
  display: block;
  color: var(--m1-тихий);
}
.m1-сетка-состояний {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}
.m1-матрица-файл {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding: 9px 11px;
  color: var(--m1-успех);
  background: var(--m1-успех-фон);
  border-radius: 7px;
}
.m1-матрица-файл small {
  color: var(--m1-тихий);
}
.m1-отложенный-ответ {
  display: grid;
  gap: 14px;
  margin-top: 13px;
  padding: 16px;
  background: var(--m1-цвет-fdf8ee);
  border: 1px solid var(--m1-цвет-eadcc2);
  border-radius: 9px;
}
.m1-быстрые-даты {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
.m1-быстрые-даты button {
  padding: 5px 8px;
  color: var(--m1-действие);
  background: var(--m1-цвет-edf5f8);
  border: 0;
  border-radius: 6px;
  font-size: 10px;
}
.m1-отбор {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 11px;
  color: var(--m1-тихий);
  background: var(--m1-белый);
  border: 1px solid var(--m1-линия);
  border-radius: 8px;
  text-decoration: none;
}
.m1-отбор b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 20px;
  padding: 0 5px;
  color: var(--m1-каркас);
  background: var(--m1-фон);
  border-radius: 10px;
  font-size: 10px;
}
.m1-отбор.m1-активен {
  color: var(--m1-каркас);
  background: var(--m1-цвет-e9f3f7);
  border-color: var(--m1-цвет-bcd6e1);
  font-weight: 600;
}
/* Плитка, которая ведёт на другой экран. Наведение то же, что у карточек
   карты вопросов: приподнялась, посветлела, обвелась акцентом. Курсор и
   отсутствие подчёркивания — чтобы число не читалось как ссылка в тексте. */
a.m1-метрика {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
a.m1-метрика:hover {
  background: var(--m1-инфо-фон);
  border-color: var(--m1-акцент);
  box-shadow: var(--m1-тень);
  transform: translateY(-1px);
}
a.m1-метрика:hover strong {
  color: var(--m1-действие);
}
a.m1-метрика:active {
  transform: translateY(0) scale(.995);
}
a.m1-метрика:focus-visible {
  outline: 3px solid var(--m1-акцент);
  outline-offset: 2px;
}

/* Ответ карточки, когда по выбранному направлению записей нет. Пустая
   карточка читается как поломка, поэтому место занимает строка словами. */
/* Скрытая строка обязана исчезать: у строк списков свой display:grid, а он
   сильнее атрибута hidden, и без этого правила отбор ничего бы не убрал. */
[hidden] {
  display: none !important;
}

/* Возврат в верхней панели. Стоит там, где раньше была крошка: слева, первым
   элементом строки. Называет, КУДА вернёт, а не просто «назад» — человек
   должен видеть, где окажется, до нажатия. На верхних экранах скрыт: оттуда
   возвращаться некуда, там ведёт меню. */
.m1-назад {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px 0 9px;
  color: var(--m1-ссылка);
  font-size: 13px;
  font-weight: 600;
  background: var(--m1-бумага);
  border: 1px solid var(--m1-линия);
  border-radius: var(--m1-пилюля);
  text-decoration: none;
  transition: color .16s ease,background-color .16s ease,border-color .16s ease,transform .16s ease;
}
.m1-назад .m1-иконка {
  transform: rotate(180deg);
}
.m1-назад:hover {
  color: var(--m1-каркас);
  background: var(--m1-инфо-фон);
  border-color: var(--m1-акцент);
  transform: translateX(-2px);
}
.m1-назад:focus-visible {
  outline: 3px solid var(--m1-акцент);
  outline-offset: 2px;
}

/* ── Карточка целиком как вход ────────────────────────────────────────────
 * Заголовок карточки — настоящая ссылка, а её невидимый слой растянут на всю
 * карточку. Отсюда два свойства сразу: нажатие в любое пустое место открывает
 * раздел, и при этом остаётся ровно ОДНА ссылка на карточку — с клавиатуры
 * она доступна, экранный диктор читает её один раз. Вложенных ссылок нет:
 * строки лежат выше слоя и перехватывают нажатие раньше него.
 * Поэтому же из шапок убраны «Все задачи», «На диаграмму», «Открыть все»:
 * их работу теперь делает сам заголовок. */
.m1-карточка--вход {
  position: relative;
  transition: border-color .16s ease,box-shadow .16s ease;
}
.m1-карточка--вход:hover {
  border-color: var(--m1-акцент);
  box-shadow: var(--m1-тень);
}
.m1-карточка__вход {
  color: inherit;
  text-decoration: none;
}
.m1-карточка__вход:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}
.m1-карточка--вход:hover .m1-карточка__вход {
  color: var(--m1-ссылка);
}
.m1-карточка__вход:focus-visible {
  outline: 3px solid var(--m1-акцент);
  outline-offset: 3px;
}

/* Строка карточки — свой вход, глубже разделa. Лежит над накрывающим слоем,
 * поэтому нажатие по строке ведёт в строку, а не в раздел. Полоска слева
 * появляется при наведении: постоянная стрелка у каждой строки спорила бы
 * с датой и полосой нагрузки, которые и так стоят справа. */
.m1-список-внимания>a,
.m1-нагрузка>a,
.m1-групповой-прогресс>a,
.m1-легенда>a,
.m1-файл-компактный a {
  position: relative;
  z-index: 1;
}
/* Легенда сюда не входит: свой тихий цвет у неё уже задан выше, и «inherit»
   его бы перебил, сделав подписи состояний такими же тёмными, как заголовки. */
.m1-список-внимания>a,
.m1-нагрузка>a,
.m1-групповой-прогресс>a {
  color: inherit;
}
.m1-список-внимания>a,
.m1-нагрузка>a,
.m1-групповой-прогресс>a,
.m1-легенда>a {
  text-decoration: none;
  border-radius: var(--m1-радиус-малый);
  transition: background-color .16s ease,box-shadow .16s ease;
}
.m1-список-внимания>a:hover,
.m1-нагрузка>a:hover,
.m1-групповой-прогресс>a:hover,
.m1-легенда>a:hover {
  background: var(--m1-инфо-фон);
  box-shadow: inset 3px 0 0 var(--m1-действие);
}
.m1-список-внимания>a:focus-visible,
.m1-нагрузка>a:focus-visible,
.m1-групповой-прогресс>a:focus-visible,
.m1-легенда>a:focus-visible {
  outline: 3px solid var(--m1-акцент);
  outline-offset: -2px;
}

/* Плитка-отбор: та же карточка, но кнопка. Сбрасываем всё, что браузер даёт
   кнопке от себя — шрифт, выравнивание, ширину, — иначе число уедет в центр
   и плитка перестанет совпадать с соседними. */
button.m1-метрика {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
button.m1-метрика:hover {
  background: var(--m1-инфо-фон);
  border-color: var(--m1-акцент);
  box-shadow: var(--m1-тень);
  transform: translateY(-1px);
}
button.m1-метрика:hover strong {
  color: var(--m1-действие);
}
button.m1-метрика.m1-активен {
  background: var(--m1-инфо-фон);
  border-color: var(--m1-действие);
  box-shadow: inset 0 0 0 1px var(--m1-действие);
}
button.m1-метрика:focus-visible {
  outline: 3px solid var(--m1-акцент);
  outline-offset: 2px;
}

/* Ответ таблицы, когда под отбор ничего не попало. */
/* Строка таблицы, которая открывается. Полоска слева при наведении — та же,
   что у строк на обзоре: одно движение глаза узнаёт «сюда можно нажать». */
tr.m1-строка-вход {
  cursor: pointer;
}
tr.m1-строка-вход:hover td {
  background: var(--m1-инфо-фон);
}
tr.m1-строка-вход:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--m1-действие);
}

/* Пометка «итог сведен из N ответов». Не статус, а происхождение итога: сам
   вопрос стоит в «Есть ответ», а строка объясняет, что ответов было больше
   одного и администратор свёл их к одному. */
/* Панель итога: слева объяснение, посередине поле для своего варианта,
   справа действие. На узком экране складывается в столбец — иначе поле
   сжимается до нечитаемого. */
.m1-панель-решения__текст {
  flex: 1;
  min-width: 0;
}
/* Поле своего итога стоит под ответами, перед липкой полосой действия. */
.m1-свой-итог {
  margin-top: 12px;
}
.m1-свой-итог textarea {
  min-height: 62px;
}
/* Пилюля ответа и кнопка «выбрать итогом» — одна колонка сетки, иначе кнопка
   становится четвёртым элементом сетки из трёх и плющит пилюлю. */
.m1-ответ-пользователя__итог {
  display: grid;
  justify-items: end;
  gap: 7px;
  align-content: start;
}
/* Кнопка «выбрать итогом» стоит рядом с пилюлей ответа и не должна
   выбиваться из строки: тот же рост, что у мелких действий. */
.m1-выбрать-итогом {
  min-height: 30px;
  margin-top: 6px;
  padding: 0 11px;
  font-size: 12.5px;
}
@media (max-width:760px) {
  .m1-панель-решения {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Итог вопроса, сведённый администратором: отдельный блок, а не ещё один
   ответ — он говорит, чем вопрос кончился. */
/* Ответ, выбранный итогом: обведён и подсвечен, чтобы до нажатия
   «Зафиксировать» было видно, что именно станет итогом. */
.m1-ответ-пользователя--выбран {
  background: var(--m1-успех-фон);
  border-color: var(--m1-успех);
  box-shadow: inset 3px 0 0 var(--m1-успех);
}

.m1-итог-вопроса {
  display: grid;
  gap: 8px;
  justify-items: start;
  margin-top: 14px;
  padding: 16px;
  background: var(--m1-успех-фон);
  border: 1px solid var(--m1-успех);
  border-radius: var(--m1-радиус);
}
.m1-итог-вопроса p {
  margin: 0;
}
.m1-итог-вопроса small {
  color: var(--m1-тихий);
}
.m1-еще-ответы {
  margin: 4px 0 0;
  color: var(--m1-тихий);
  font-size: 13px;
}

/* Сообщение «создано»: плита во всю ширину экрана, крестик справа. Ставится
   первой после заголовка — там её видно, не прокручивая. */
.m1-создано {
  grid-template-columns: 25px 1fr auto;
  align-items: start;
  margin-bottom: 14px;
}
.m1-создано p {
  color: var(--m1-текст);
}
.m1-создано .m1-текстовая-кнопка {
  margin-top: 6px;
}
.m1-создано__закрыть {
  width: 30px;
  height: 30px;
  color: var(--m1-тихий);
  font-size: 18px;
  line-height: 1;
  background: transparent;
  border: 0;
}

/* Строка задачи открывает карточку под таблицей, поэтому ведёт себя как
   строка-вход: курсор, подсветка и полоса слева у выбранной. */
tr[data-задача] {
  cursor: pointer;
}
tr[data-задача]:hover td {
  background: var(--m1-инфо-фон);
}
tr.m1-строка-выбрана td {
  background: var(--m1-инфо-фон);
}
tr.m1-строка-выбрана td:first-child {
  box-shadow: inset 3px 0 0 var(--m1-действие);
}
/* Карточка задачи и подсказка «выберите задачу» стоят под таблицей. */
[data-задача-для],
.m1-задача-пусто {
  margin-top: 16px;
}

/* Строка о правах: кто может менять запись. Тихая — это правило, а не
   действие, и спорить с содержанием карточки она не должна. */
.m1-право-правки {
  margin: 10px 0 0;
  color: var(--m1-тихий);
  font-size: 12.5px;
}

.m1-сведен {
  display: block;
  margin-top: 4px;
  color: var(--m1-тихий);
  font-size: 11.5px;
}

.m1-строка-пусто td {
  padding: 22px;
  color: var(--m1-тихий);
  text-align: center;
}

.m1-отбор-пусто {
  margin: 14px 0 0;
  padding: 14px;
  color: var(--m1-тихий);
  background: var(--m1-тихий-фон);
  border: 1px dashed var(--m1-линия);
  border-radius: var(--m1-радиус);
  text-align: center;
}

.m1-таблица-людей {
  min-width: 1180px;
}
.m1-таблица-людей th:first-child,.m1-таблица-людей td:first-child {
  min-width: 270px;
}
.m1-таблица-людей td {
  height: 72px;
}
.m1-таблица-людей td:nth-child(2) {
  min-width: 220px;
  overflow-wrap: anywhere;
}
.m1-мобильное-различие {
  display: none;
}
.m1-таблица-людей .m1-полоса {
  width: 120px;
  margin-top: 7px;
}
.m1-селект-в-строке {
  max-width: 190px;
  min-height: 34px;
  padding: 5px 8px;
  color: var(--m1-текст);
  background: var(--m1-белый);
  border: 1px solid var(--m1-линия);
  border-radius: 7px;
}
.m1-действия-в-строке {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
}
.m1-действия-в-строке a {
  color: var(--m1-действие);
}
.m1-действия-в-строке label {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.m1-приглашение-результат {
  align-self: start;
}
.m1-поле-с-кнопкой {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 7px;
}
.m1-текст-письма {
  max-height: 330px;
  overflow: auto;
  padding: 16px;
  color: var(--m1-текст);
  background: var(--m1-тихий-фон);
  border: 1px solid var(--m1-линия);
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.55;
}
.m1-приглашение-результат>.m1-кнопка {
  width: 100%;
  margin: 12px 0;
}
.m1-управление-вопросами {
  display: grid;
  grid-template-columns: 370px minmax(0,1fr);
  gap: 12px;
}
.m1-управление-вопросами__панели {
  display: grid;
  align-content: start;
  gap: 12px;
}
.m1-дерево-вопросов {
  max-height: 760px;
  overflow: auto;
  padding: 10px;
}
.m1-дерево-вопросов>header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  color: var(--m1-каркас);
  background: var(--m1-тихий-фон);
  border-radius: 8px;
}
.m1-дерево-вопросов>header span {
  color: var(--m1-тихий);
  font-size: 11px;
}
.m1-дерево-вопросов__раздел {
  margin-top: 14px;
}
.m1-дерево-вопросов__раздел>strong {
  display: block;
  padding: 0 10px 5px;
  color: var(--m1-тихий);
  font-size: 11px;
}
.m1-зона-загрузки {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--m1-тихий-фон);
  border: 1px dashed var(--m1-линия-сильная);
  border-radius: 9px;
}
.m1-зона-загрузки>div {
  flex: 1;
}
.m1-зона-загрузки b,.m1-зона-загрузки small {
  display: block;
}
.m1-зона-загрузки small {
  color: var(--m1-тихий);
}
.m1-предпросмотр-изменений {
  margin-top: 12px;
  padding: 22px;
}
.m1-предпросмотр-изменений .m1-метрики {
  grid-template-columns: repeat(4,1fr);
}
.m1-предпросмотр-изменений .m1-действия {
  justify-content: flex-start;
  margin-top: 16px;
}
.m1-экспорт-кнопки {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}
.m1-экспорт-модели {
  background: linear-gradient(145deg,var(--m1-цвет-edf6f9),var(--m1-белый));
}
.m1-таблица-задач td>small {
  display: block;
  margin-top: 4px;
  color: var(--m1-тихий);
}
.m1-таблица-задач th:first-child,.m1-таблица-задач td:first-child {
  min-width: 390px;
}
.m1-файл-компактный--задача {
  max-width: 360px;
}
.m1-файл-компактный--задача a {
  max-width: 290px;
}
.m1-печатная-марка {
  display: none;
}
.m1-фото-сравнение {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0;
}
.m1-фото-сравнение article {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr);
  min-height: 180px;
  overflow: hidden;
}
.m1-фото-сравнение img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.m1-фото-сравнение__без-фото {
  display: grid;
  place-items: center;
  color: var(--m1-каркас);
  background: linear-gradient(145deg,var(--m1-цвет-dfeef3),var(--m1-цвет-f7fafc));
  border-right: 1px solid var(--m1-линия);
  font-size: 28px;
  font-weight: 700;
}
.m1-фото-сравнение div {
  padding: 20px;
}
.m1-фото-сравнение p {
  color: var(--m1-тихий);
}
.m1-гант__задача {
  position: absolute;
  top: 22px;
  left: var(--m1-начало);
  display: flex;
  align-items: center;
  width: var(--m1-длина);
  height: 24px;
  overflow: hidden;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}
.m1-гант__задача--нейтральная {
  color: var(--m1-тихий);
  background: var(--m1-цвет-e6edf1);
}
.m1-гант__задача--работа {
  color: var(--m1-белый);
  background: var(--m1-цвет-6e9fb5);
}
.m1-гант__задача--готово {
  color: var(--m1-белый);
  background: var(--m1-цвет-639581);
}
.m1-гант__задача--риск {
  color: var(--m1-белый);
  background: var(--m1-цвет-c9756e);
}
.m1-палитра-подтверждение {
  align-items: center;
  margin: 0 0 18px;
}
.m1-палитра-подтверждение > div {
  flex: 1;
}
.m1-образцы-цвета {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}
.m1-образцы-цвета i {
  width: 28px;
  height: 28px;
  background: var(--m1-цвет);
  border: 2px solid var(--m1-белый);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--m1-линия);
}
.m1-каталог-экранов {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 9px;
}
.m1-каталог-экранов a {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  column-gap: 10px;
  row-gap: 3px;
  padding: 14px;
  color: var(--m1-текст);
  background: var(--m1-белый);
  border: 1px solid var(--m1-линия);
  border-radius: var(--m1-радиус-малый);
  text-decoration: none;
  transition: border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.m1-каталог-экранов a:hover {
  border-color: var(--m1-цвет-b4ced9);
  box-shadow: var(--m1-тень);
  transform: translateY(-1px);
}
.m1-каталог-экранов b {
  grid-row: 1 / 3;
  color: var(--m1-действие);
  font-size: 18px;
}
.m1-каталог-экранов span {
  color: var(--m1-каркас);
  font-weight: 700;
}
.m1-каталог-экранов small {
  overflow: hidden;
  color: var(--m1-тихий);
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width:1180px) {
  .m1-сводка-разделов {
    grid-template-columns: repeat(3,1fr);
  }
  .m1-управление-вопросами {
    grid-template-columns: 1fr;
  }
  .m1-дерево-вопросов {
    max-height: 420px;
  }
  .m1-предпросмотр-изменений .m1-метрики {
    grid-template-columns: repeat(2,1fr);
  }
  .m1-каталог-экранов {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width:860px) {
  .m1-сетка-состояний {
    grid-template-columns: 1fr;
  }
  .m1-сводка-разделов {
    grid-template-columns: 1fr 1fr;
  }
  .m1-файлы-ответа__действие {
    align-items: flex-start;
    flex-direction: column;
  }
  .m1-центр-подтверждения {
    padding: 28px;
  }
  .m1-центр-подтверждения .m1-метрики {
    grid-template-columns: 1fr 1fr;
  }
  .m1-палитра-подтверждение {
    align-items: flex-start;
    flex-direction: column;
  }
  .m1-фото-сравнение {
    grid-template-columns: 1fr;
  }
}
@media (max-width:620px) {
  .m1-приветствие__фото,.m1-приветствие__контекст {
    min-height: 100px;
    max-height: 112px;
  }
  .m1-приветствие__контекст {
    align-content: center;
    padding: 14px 18px;
    border-top: 1px solid var(--m1-линия);
    border-left: 0;
  }
  .m1-приветствие__фото img {
    object-position: center 24%;
  }
  .m1-приветствие__фото:before {
    background: linear-gradient(180deg,var(--m1-цвет-eff6f9),transparent 55%);
  }
  .m1-вопрос-форма {
    padding-bottom: 175px;
  }
  .m1-сводка-разделов,.m1-центр-подтверждения .m1-метрики,.m1-предпросмотр-изменений .m1-метрики,.m1-шаги {
    grid-template-columns: 1fr;
  }
  .m1-список-ссылок a {
    grid-template-columns: 72px 1fr;
  }
  .m1-список-ссылок a svg {
    display: none;
  }
  .m1-центр-подтверждения {
    padding: 22px 16px;
  }
  .m1-поле-с-кнопкой {
    grid-template-columns: 1fr;
  }
  .m1-зона-загрузки {
    align-items: flex-start;
    flex-direction: column;
  }
  .m1-страница-ошибки>.m1-марка {
    top: 18px;
    left: 18px;
  }
  .m1-каталог-экранов {
    grid-template-columns: 1fr;
  }
  .m1-мобильное-различие {
    display: block;
    margin-top: 5px;
    color: var(--m1-тихий);
  }
  .m1-фото-сравнение article {
    grid-template-columns: 96px minmax(0,1fr);
  }
  .m1-состояние-ссылки {
    padding: 18px;
  }
  .m1-состояние-ссылки__сетка {
    grid-template-columns: 1fr;
  }
}
@media print {
  .m1-боковое-меню,.m1-верхняя-панель,.m1-действия,.m1-фильтры {
    display: none !important;
  }
  .m1-приложение {
    display: block;
  }
  .m1-экран {
    padding: 0;
  }
  .m1-печатная-марка {
    display: block;
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--m1-линия);
  }
}

/* 18. Версия 5: сроки, люди, задачи, печать и интерактивные состояния. */
.m1-марка--боковая {
  align-items: flex-start;
  flex-direction: column;
  gap: 1px;
  white-space: normal;
}
.m1-марка--боковая .m1-марка__разделитель {
  display: none;
}
.m1-марка--боковая .m1-марка__раздел {
  font-size: 11px;
  letter-spacing: .08em;
}
.m1-боковое-меню {
  overflow-y: auto;
}
.m1-навигация__ссылка,
.m1-кнопка,
.m1-карта-вопросов__сетка a,
.m1-запись,
.m1-каталог-экранов a,
.m1-отбор {
  transition: color .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.m1-кнопка:hover:not(:disabled),
.m1-карта-вопросов__сетка a:hover,
.m1-запись:hover,
.m1-отбор:hover {
  transform: translateY(-1px);
}
.m1-кнопка:active:not(:disabled),
.m1-карта-вопросов__сетка a:active,
.m1-запись:active {
  transform: translateY(0) scale(.99);
}
.m1-карта-вопросов {
  margin-top: 24px;
  padding: 22px;
  background: var(--m1-бумага);
  border: 1px solid var(--m1-линия);
  border-radius: var(--m1-радиус);
}
.m1-карта-вопросов__сетка {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  margin-top: 16px;
}
.m1-карта-вопросов__сетка a {
  display: grid;
  gap: 7px;
  min-height: 150px;
  padding: 16px;
  color: var(--m1-текст);
  background: var(--m1-тихий-фон);
  border: 1px solid var(--m1-линия);
  border-radius: var(--m1-радиус);
  text-decoration: none;
}
.m1-карта-вопросов__сетка a:hover {
  background: var(--m1-инфо-фон);
  border-color: var(--m1-акцент);
  box-shadow: var(--m1-тень);
}
.m1-карта-вопросов__сетка strong {
  color: var(--m1-действие);
  font-size: 25px;
}
.m1-карта-вопросов__сетка span {
  font-weight: 700;
}
.m1-карта-вопросов__сетка small {
  color: var(--m1-тихий);
}
.m1-карта-вопросов__сетка .m1-пилюля {
  align-self: end;
  justify-self: start;
}
.m1-маршрут-только-чтение {
  margin-top: 20px;
  padding: 24px;
}
.m1-строка-только-чтение {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--m1-линия);
}
.m1-строка-только-чтение > span {
  color: var(--m1-действие);
  font-weight: 700;
}
.m1-строка-только-чтение div small {
  display: block;
  color: var(--m1-тихий);
}
.m1-панель-перехода-в-задачу {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0;
  padding: 16px;
  background: var(--m1-инфо-фон);
  border: 1px solid var(--m1-линия);
  border-radius: var(--m1-радиус);
}
.m1-панель-перехода-в-задачу strong,
.m1-панель-перехода-в-задачу small {
  display: block;
}
.m1-панель-перехода-в-задачу small {
  color: var(--m1-тихий);
}
.m1-две-колонки--форма {
  grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr);
  align-items: start;
}
.m1-форма-решения,
.m1-история-срока,
.m1-источник-вопроса,
.m1-письмо,
.m1-настройки-письма {
  padding: 24px;
}
.m1-форма-решения {
  display: grid;
  gap: 16px;
}
.m1-быстрые-даты {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.m1-быстрые-даты button,
.m1-переключатель-вида button {
  padding: 8px 12px;
  color: var(--m1-текст);
  background: var(--m1-бумага);
  border: 1px solid var(--m1-линия-сильная);
  border-radius: var(--m1-радиус-малый);
}
.m1-быстрые-даты button:hover,
.m1-быстрые-даты button.m1-активен,
.m1-переключатель-вида button:hover,
.m1-переключатель-вида button.m1-активен {
  color: var(--m1-каркас);
  background: var(--m1-инфо-фон);
  border-color: var(--m1-акцент);
}
.m1-история-срока ol,
.m1-лента-событий {
  margin: 18px 0;
  padding: 0;
  list-style: none;
}
.m1-история-срока li,
.m1-лента-событий li {
  position: relative;
  padding: 0 0 18px 22px;
  border-left: 2px solid var(--m1-линия);
}
.m1-история-срока li:before,
.m1-лента-событий li:before {
  position: absolute;
  top: 4px;
  left: -6px;
  width: 10px;
  height: 10px;
  content: '';
  background: var(--m1-действие);
  border: 2px solid var(--m1-бумага);
  border-radius: 50%;
}
.m1-история-срока li span,
.m1-лента-событий li span {
  display: block;
  color: var(--m1-тихий);
  font-size: 12px;
}
.m1-история-срока li p {
  margin: 4px 0 0;
}
.m1-таблица-сроков td:first-child b,
.m1-таблица-сроков td:first-child small,
.m1-таблица-приглашений small {
  display: block;
}
.m1-таблица-сроков td:first-child small,
.m1-таблица-приглашений small {
  color: var(--m1-тихий);
}
.m1-срок-направления {
  margin-top: 20px;
  padding: 24px;
}
.m1-влияние-срока {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 14px;
  align-items: center;
  margin: 18px 0;
  padding: 16px;
  background: var(--m1-ожидание-фон);
  border: 1px solid var(--m1-линия);
  border-radius: var(--m1-радиус);
}
.m1-влияние-срока > span {
  color: var(--m1-тихий);
}
.m1-срок-направления > .m1-действия {
  align-items: end;
}
.m1-срок-направления > .m1-действия .m1-поле {
  min-width: 220px;
}
.m1-поля-в-строку {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.m1-выбор-людей {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 7px 10px;
  color: var(--m1-текст);
  background: var(--m1-бумага);
  border: 1px solid var(--m1-линия-сильная);
  border-radius: var(--m1-радиус-малый);
  text-align: left;
}
.m1-источник-вопроса details {
  margin: 18px 0;
  padding: 14px;
  background: var(--m1-тихий-фон);
  border: 1px solid var(--m1-линия);
  border-radius: var(--m1-радиус);
}
.m1-источник-вопроса summary {
  cursor: pointer;
  font-weight: 700;
}
.m1-компактные-ответы {
  margin-top: 12px;
}
.m1-компактные-ответы p {
  margin-bottom: 8px;
}
.m1-строка-меток {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.m1-пилюля--направление {
  color: var(--m1-инфо);
  background: var(--m1-инфо-фон);
  border: 1px solid var(--m1-линия);
}
.m1-ссылка-к-источнику {
  display: inline-block;
  margin-top: 8px;
}
.m1-задачи-участника {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
  margin: 18px 0;
}
.m1-задача-участника {
  padding: 22px;
}
.m1-задача-участника h2 {
  margin: 12px 0 8px;
  font-size: 20px;
}
.m1-мини-гант {
  margin: 18px 0;
  padding: 22px;
  overflow: hidden;
}
.m1-мини-гант__шкала,
.m1-мини-гант__строка {
  display: grid;
  grid-template-columns: 190px repeat(4,1fr);
}
.m1-мини-гант__шкала {
  margin-top: 14px;
  color: var(--m1-тихий);
  font-size: 11px;
}
.m1-мини-гант__шкала span:first-child {
  grid-column: 2;
}
.m1-мини-гант__строка {
  position: relative;
  min-height: 54px;
  align-items: center;
  border-top: 1px solid var(--m1-линия);
}
.m1-мини-гант__строка i {
  position: absolute;
  left: calc(190px + var(--m1-начало));
  width: var(--m1-длина);
  padding: 7px 10px;
  color: var(--m1-бумага);
  background: var(--m1-инфо);
  border-radius: var(--m1-радиус-малый);
  font-style: normal;
}
.m1-мини-гант__строка i.m1-нейтральный {
  color: var(--m1-текст);
  background: var(--m1-инфо-фон);
}
.m1-пустое-компактное {
  min-height: 150px;
  margin-top: 18px;
  padding: 20px;
}
.m1-лента-ответов {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.m1-ответ-человека {
  padding: 22px;
}
.m1-ответ-человека h2 {
  font-size: 18px;
}
.m1-лист-a4 {
  width: min(210mm,100%);
  min-height: 297mm;
  margin: 0 auto;
  padding: 15mm;
  color: var(--m1-черный);
  background: var(--m1-бумага);
  border: 1px solid var(--m1-линия);
  box-shadow: var(--m1-тень);
}
.m1-лист-a4 > header,
.m1-лист-a4 > footer {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--m1-линия);
  font-size: 11px;
}
.m1-лист-a4 > h1 {
  margin: 24px 0 18px;
}
.m1-печатные-метаданные {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
  padding: 14px;
  background: var(--m1-тихий-фон);
}
.m1-печатные-метаданные span,
.m1-печатные-метаданные b {
  display: block;
}
.m1-лист-a4 > section {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--m1-линия);
}
.m1-печатный-файл,
.m1-печатное-решение {
  margin-top: 12px;
  padding: 12px;
  background: var(--m1-тихий-фон);
  border-left: 3px solid var(--m1-действие);
}
.m1-печатное-решение b,
.m1-печатное-решение span {
  display: block;
}
.m1-лист-a4 > footer {
  margin-top: 50px;
  padding-top: 10px;
  border-top: 1px solid var(--m1-линия);
  border-bottom: 0;
}
.m1-письмо__шапка {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -24px -24px 22px;
  padding: 18px 24px;
  background: var(--m1-инфо-фон);
  border-bottom: 1px solid var(--m1-линия);
}
.m1-письмо ul {
  padding-left: 20px;
}
.m1-настройки-письма {
  display: grid;
  gap: 14px;
}
.m1-переключатель-вида {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--m1-тихий-фон);
  border: 1px solid var(--m1-линия);
  border-radius: var(--m1-радиус);
}
.m1-профиль-человека {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 24px;
  background: var(--m1-бумага);
  border: 1px solid var(--m1-линия);
  border-radius: var(--m1-радиус);
}
.m1-аватар--крупный {
  width: 68px;
  height: 68px;
  font-size: 20px;
}
.m1-профиль-человека h1 {
  margin-bottom: 2px;
}
.m1-таблица-людей {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.m1-таблица-людей th:nth-child(1) { width: 25%; }
.m1-таблица-людей th:nth-child(2) { width: 18%; }
.m1-таблица-людей th:nth-child(3) { width: 22%; }
.m1-таблица-людей th:nth-child(4) { width: 14%; }
.m1-таблица-людей th:nth-child(5) { width: 21%; }
.m1-таблица-людей td,
.m1-таблица-людей th {
  overflow-wrap: anywhere;
}
.m1-таблица-людей .m1-действия-в-строке {
  gap: 4px;
  font-size: 12px;
}
.m1-таблица-приглашений {
  min-width: 820px;
}
.m1-меню-действий__список {
  right: 0;
  left: auto;
  max-width: min(310px,calc(100vw - 32px));
}
.m1-меню-действий--вверх .m1-меню-действий__список {
  top: auto;
  bottom: calc(100% + 8px);
}
.m1-меню-действий [aria-expanded="false"] + .m1-меню-действий__список {
  display: none;
}
/* Прежде здесь стоял отступ в 188 px под открытое меню: место под него
   освобождалось, и вопрос уезжал вниз. Меню — накладка, оно висит над
   содержимым и исчезает по первому нажатию мимо. Двигать ради него страницу
   значит менять её вёрстку от нажатия на кнопку. */
.m1-гант__задача--ряд-2 {
  top: 34px;
}
.m1-гант--люди .m1-гант__строка {
  min-height: 92px;
}
.m1-вход__карточка--компактная {
  max-width: 100%;
  min-width: 0;
}

@media (max-width:1180px) {
  .m1-карта-вопросов__сетка { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .m1-две-колонки--форма { grid-template-columns: 1fr; }
  .m1-таблица-людей { table-layout: auto; }
  .m1-таблица-людей th:nth-child(n) { width: auto; }
}
@media (max-width:860px) {
  .m1-задачи-участника { grid-template-columns: 1fr; }
  .m1-профиль-человека { grid-template-columns: auto minmax(0,1fr); }
  .m1-профиль-человека > .m1-действия { grid-column: 1 / -1; }
  .m1-влияние-срока { grid-template-columns: 1fr; }
  .m1-срок-направления > .m1-действия { align-items: stretch; }
  .m1-печатные-метаданные { grid-template-columns: 1fr; }
}
@media (max-width:620px) {
  .m1-карта-вопросов__сетка { grid-template-columns: 1fr; }
  .m1-карта-вопросов__сетка a { min-height: 118px; }
  .m1-строка-только-чтение { grid-template-columns: 30px minmax(0,1fr); }
  .m1-строка-только-чтение > a { grid-column: 2; }
  .m1-панель-перехода-в-задачу { align-items: stretch; flex-direction: column; }
  .m1-поля-в-строку { grid-template-columns: 1fr; }
  .m1-мини-гант { overflow-x: auto; }
  .m1-мини-гант > * { min-width: 650px; }
  .m1-лист-a4 { min-height: 0; padding: 20px; }
  .m1-письмо__шапка { align-items: flex-start; flex-direction: column; gap: 8px; }
  .m1-профиль-человека { grid-template-columns: 1fr; text-align: left; }
  .m1-профиль-человека > .m1-действия { grid-column: auto; }
  .m1-переключатель-вида { display: grid; width: 100%; }
  .m1-вход__карточка--компактная { width: 100%; min-height: 0; }
}
@media print {
  body { background: var(--m1-бумага); }
  .m1-не-печатать { display: none !important; }
  [data-экран="print"] { display: block !important; }
  .m1-лист-a4 { width: 100%; min-height: 0; padding: 15mm; border: 0; box-shadow: none; }
}

/* Период своим промежутком. Готовых сроков живой работе мало: «что сдаем с 1
   по 10 сентября» ими не спросишь, поэтому рядом с ними календарь. Окно
   лежит в потоке строки отбора и раскрывается вниз — вверх ему некуда, там
   заголовок экрана. */
.m1-период {
  position: relative;
  min-width: 190px;
}
.m1-фильтры .m1-период {
  min-width: 190px;
}
.m1-период__кнопка {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  color: var(--m1-текст);
  font-size: 14px;
  text-align: left;
  background: var(--m1-белый);
  border: 1px solid var(--m1-линия);
  border-radius: 9px;
  cursor: pointer;
}
.m1-период__кнопка::after {
  flex: none;
  width: 10px;
  height: 6px;
  background: 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") no-repeat center;
  content: "";
}
.m1-период__кнопка:hover {
  border-color: var(--m1-линия-сильная);
}
.m1-период__кнопка:focus-visible {
  border-color: var(--m1-действие);
  outline: 0;
}
/* Заданный период видно, не открывая окна: рамка и подпись цветом действия. */
.m1-период--задан .m1-период__кнопка {
  color: var(--m1-действие);
  font-weight: 600;
  border-color: var(--m1-действие);
}
.m1-период__окно {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  gap: 12px;
  width: 306px;
  max-width: calc(100vw - 40px);
  padding: 14px;
  background: var(--m1-белый);
  border: 1px solid var(--m1-линия);
  border-radius: var(--m1-радиус-большой);
  box-shadow: var(--m1-тень);
}
.m1-период__пресеты {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.m1-период__пресет {
  height: 30px;
  padding: 0 11px;
  color: var(--m1-тихий);
  font-size: 13px;
  background: var(--m1-тихий-фон);
  border: 1px solid var(--m1-линия);
  border-radius: 999px;
  cursor: pointer;
}
.m1-период__пресет:hover {
  color: var(--m1-действие);
  border-color: var(--m1-действие);
}
.m1-период__пресет.m1-активен {
  color: var(--m1-белый);
  background: var(--m1-действие);
  border-color: var(--m1-действие);
}
.m1-период__календарь {
  display: grid;
  gap: 8px;
}
.m1-период__шапка {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.m1-период__шапка strong {
  font-size: 14px;
}
.m1-период__шаг {
  width: 28px;
  height: 28px;
  color: var(--m1-тихий);
  font-size: 15px;
  line-height: 1;
  background: var(--m1-тихий-фон);
  border: 1px solid var(--m1-линия);
  border-radius: 8px;
  cursor: pointer;
}
.m1-период__шаг:hover {
  color: var(--m1-действие);
  border-color: var(--m1-действие);
}
.m1-период__недели,
.m1-период__сетка {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 2px;
}
.m1-период__недели span {
  padding: 2px 0;
  color: var(--m1-тихий);
  font-size: 11px;
  text-align: center;
}
.m1-период__день {
  height: 32px;
  color: var(--m1-текст);
  font-size: 13px;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.m1-период__день:hover {
  background: var(--m1-тихий-фон);
}
.m1-период__день--пусто {
  visibility: hidden;
}
.m1-период__день--сегодня {
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--m1-линия-сильная);
}
/* Середина промежутка держится фоном, края — цветом действия: так видно, где
   промежуток начался и где кончился, а не только что он есть. */
.m1-период__день--внутри {
  background: var(--m1-инфо-фон);
  border-radius: 0;
}
.m1-период__день--край {
  color: var(--m1-белый);
  background: var(--m1-действие);
}
.m1-период__день--начало {
  border-radius: 8px 0 0 8px;
}
.m1-период__день--конец {
  border-radius: 0 8px 8px 0;
}
.m1-период__день--край.m1-период__день--начало.m1-период__день--конец {
  border-radius: 8px;
}
.m1-период__низ {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--m1-линия);
}
.m1-период__низ small {
  color: var(--m1-тихий);
  font-size: 12px;
}
.m1-период__действия {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.m1-период__действия .m1-кнопка {
  height: 34px;
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
}
/* На узком экране поле занимает строку целиком, и окно раскрывается от его
   левого края: иначе окно шире поля уезжало за край экрана. */
@media (max-width:620px) {
  .m1-фильтры .m1-период { flex: 1 1 100%; }
  .m1-период__окно { right: auto; left: 0; }
}

/* Правка задачи на карточке. Встаёт на место панели прав: правка — это
   короткий разговор про статус и сроки, ради него незачем уводить человека
   с экрана и терять список слева. */
.m1-правка-задачи {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  background: var(--m1-тихий-фон);
  border: 1px solid var(--m1-линия);
  border-radius: var(--m1-радиус);
}
.m1-правка-задачи__отказ {
  margin: 0;
  color: var(--m1-риск);
  font-size: 13px;
}
.m1-правка-задачи .m1-действия {
  justify-content: flex-end;
}

/* Плашки статусов над диаграммой отбирают, а не подписывают цвета. Включённая
   обведена своим же цветом: заливка у пилюли и так цветная, и второй заливкой
   различить включённую нельзя. */
.m1-плашка {
  border: 1px solid transparent;
  cursor: pointer;
}
.m1-плашка:hover {
  border-color: currentColor;
}
.m1-плашка.m1-активен {
  border-color: currentColor;
  box-shadow: 0 0 0 3px var(--m1-инфо-фон);
}
.m1-срез.m1-активен {
  color: var(--m1-белый);
  background: var(--m1-действие);
  border-color: var(--m1-действие);
}

/* Плашки-отбор над таблицей: та же строка, что на диаграмме, но без подписи
   про красный контур — в списке просрочка написана словом. */
.m1-состояния--отбор {
  margin-bottom: 10px;
}

/* Разрез по людям: человек заголовком, его задачи строками под ним. Прежде
   все задачи человека лежали полосами в одной строке — видно было загрузку,
   но не видно, что именно он делает. */
.m1-гант__строка--человек {
  background: var(--m1-тихий-фон);
  min-height: 54px;
}
.m1-гант__строка--человек .m1-гант__название strong {
  font-size: 14px;
}
.m1-гант__строка--человек .m1-гант__шкала {
  background: none;
}
.m1-гант__строка--задача {
  min-height: 56px;
}
/* Задачи человека сдвинуты вправо: отступ показывает, чьи они, без второй
   рамки и без повтора имени в каждой строке. */
.m1-гант__строка--задача .m1-гант__название {
  padding-left: 34px;
}
.m1-гант__строка--задача .m1-гант__название strong {
  font-weight: 600;
}

/* Разрез диаграммы по людям: человек заголовком, его задачи строками под ним.
   Заголовок держится фоном и отбивкой сверху — иначе на длинной диаграмме не
   видно, где кончаются задачи одного человека и начинаются задачи другого. */
.m1-гант__человек + .m1-гант__человек .m1-гант__строка--человек {
  border-top: 1px solid var(--m1-линия);
}
.m1-гант__строка--человек {
  background: var(--m1-тихий-фон);
}
.m1-гант__строка--человек .m1-гант__название strong {
  font-size: 15px;
}
.m1-гант__строка--задача .m1-гант__название {
  padding-left: 34px;
}
.m1-гант__строка--задача .m1-гант__название strong {
  font-weight: 600;
}
/* Задача на диаграмме открывается карточкой, значит должна выглядеть нажимаемой. */
.m1-гант__строка[data-задача] {
  cursor: pointer;
}
.m1-гант__строка[data-задача]:hover {
  background: var(--m1-инфо-фон);
}

/* Название и подпись — всегда разными строками. В разрезе по людям подпись
   вставала в строку с названием, и «Какие роли нужны… 14 авг → 22 авг»
   читалось как один текст. */
.m1-гант__название strong,
.m1-гант__название small {
  display: block;
}
/* Высота строки в разрезе по людям была рассчитана на несколько полос в одной
   строке. Теперь у каждой задачи своя строка, а заголовок человека ниже. */
.m1-гант--люди .m1-гант__строка {
  min-height: 68px;
}
.m1-гант--люди .m1-гант__строка--человек {
  min-height: 56px;
}
/* У человека аватар слева, поэтому текст прижимается к нему, а не к правому
   краю: разводка по краям осталась от строк, где аватар стоял справа. */
.m1-гант__строка--человек .m1-гант__название {
  justify-content: flex-start;
}

/* Названия задач не режутся многоточием, а переносятся: обрезка прятала
   как раз то, чем задачи отличаются друг от друга («Какие отдельные
   согласия нужны до…» — до чего?). Колонка названия на диаграмме под это
   расширена, ширина шкалы сохранена. */
.m1-гант {
  min-width: 1140px;
}
.m1-гант__шапка,
.m1-гант__строка {
  grid-template-columns: var(--m1-гант-название,390px) repeat(8,1fr);
}
.m1-гант__название {
  padding: 10px 13px;
}
.m1-гант__название strong {
  overflow-wrap: anywhere;
}
.m1-таблица-задач td[data-поле="Задача"] b {
  overflow-wrap: anywhere;
}
/* Ширина колонки названия — одним значением: по нему считается и сетка, и
   место линии «Сегодня». */
.m1-гант {
  --m1-гант-название: 390px;
}
.m1-гант__сегодня {
  left: calc(var(--m1-гант-название)
    + (100% - var(--m1-гант-название)) * var(--m1-сегодня-доля,.44));
}

/* Кто отвечает — по нажатию на аватар. */
.m1-кто-обертка {
  position: relative;
  flex: none;
}
.m1-аватар-кнопка {
  border: 0;
  cursor: pointer;
}
.m1-кто {
  display: none;
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  width: max-content;
  max-width: 240px;
  padding: 7px 10px;
  color: var(--m1-текст);
  font-size: 12px;
  background: var(--m1-белый);
  border: 1px solid var(--m1-линия);
  border-radius: 9px;
  box-shadow: var(--m1-тень);
}
/* Свёртка задач человека на диаграмме. */
.m1-свертка {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  background: none;
  border: 1px solid var(--m1-линия);
  border-radius: 6px;
  cursor: pointer;
}
.m1-свертка::before {
  position: absolute;
  top: 6px;
  left: 7px;
  width: 6px;
  height: 6px;
  border-right: 1.6px solid var(--m1-тихий);
  border-bottom: 1.6px solid var(--m1-тихий);
  transform: rotate(45deg);
  content: "";
}
.m1-свертка:hover {
  border-color: var(--m1-действие);
}
.m1-свертка:hover::before {
  border-color: var(--m1-действие);
}
.m1-гант__человек.m1-свернут .m1-свертка::before {
  top: 8px;
  left: 5px;
  transform: rotate(-45deg);
}
.m1-гант__человек.m1-свернут .m1-гант__строка--задача {
  display: none;
}

/* В списке задач ответственный тоже показан аватаром: колонка сузилась до
   кружка, подсказка раскрывается влево, чтобы не уезжать за край таблицы. */
.m1-таблица-задач td[data-поле="Ответственный"] .m1-кто {
  right: auto;
  left: 0;
}
/* Подсказка появляется от наведения мышью — нажимать, чтобы узнать, кто
   такой «ИП», незачем. Нажатие оставлено для телефона, где наведения нет. */
.m1-кто-обертка:hover .m1-кто,
.m1-аватар-кнопка:focus-visible + .m1-кто,
.m1-кто.m1-кто--видна {
  display: block;
}

/* Карточка задачи, открытая с диаграммы. */
.m1-гнездо-задачи {
  position: relative;
  margin-top: 14px;
}
.m1-гнездо-задачи__закрыть {
  position: absolute;
  z-index: 5;
  top: 14px;
  right: 14px;
}
.m1-гант__строка.m1-активна {
  background: var(--m1-инфо-фон);
}

/* Матрица: столбец на участника. Восемь колонок были вбиты в стили, и
   одиннадцатый человек уезжал во второй ряд — таблица переставала читаться.
   Число столбцов приходит из разметки, ширина держится минимумом, а лишнее
   уезжает под горизонтальную прокрутку обёртки. */
.m1-матрица {
  min-width: calc(310px + var(--m1-людей,8) * 108px);
}
.m1-матрица__шапка,
.m1-матрица__строка {
  grid-template-columns: 310px repeat(var(--m1-людей,8),minmax(108px,1fr));
}
/* Первый столбец держится на месте при прокрутке вправо: иначе, дойдя до
   одиннадцатого участника, человек видит ряд кружков без вопроса. */
.m1-матрица__шапка > span,
.m1-матрица__вопрос {
  position: sticky;
  z-index: 3;
  left: 0;
}
.m1-матрица__шапка > span {
  background: var(--m1-тихий-фон);
}
.m1-матрица__вопрос {
  background: var(--m1-белый);
}
.m1-матрица__вопрос strong {
  overflow-wrap: anywhere;
}
/* В шапке матрицы остался только значок участника: колонка шириной в кружок
   имени и должности всё равно не вмещала. Кто это — подсказка при наведении,
   она раскрывается вниз внутри шапки, поэтому шапка чуть выше кружка. */
.m1-матрица__человек {
  justify-content: center;
  padding: 0;
}
.m1-матрица__шапка {
  min-height: 84px;
  align-items: start;
  padding-top: 12px;
}
.m1-матрица__шапка > span {
  align-items: flex-start;
  padding-top: 4px;
}
.m1-матрица__шапка,
.m1-матрица__строка {
  grid-template-columns: 310px repeat(var(--m1-людей,8),minmax(84px,1fr));
}
.m1-матрица {
  min-width: calc(310px + var(--m1-людей,8) * 84px);
}
.m1-матрица__человек .m1-кто {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

/* Марка в меню — одной строкой и с прямой чертой, как в бренде: раздел уезжал
   под название, и разделитель прятался. Она же ссылка на главную. */
.m1-марка--боковая {
  align-items: baseline;
  flex-direction: row;
  gap: 6px;
  white-space: nowrap;
}
/* Марка целиком — один шрифт, один размер и один цвет: «ИССЛЕДОВАНИЯ» и
   разделитель были мельче и приглушённее, и марка читалась как две разные
   надписи (решение владельца 23.08.2026). Белый — тот же, что у пунктов
   меню. */
.m1-марка--боковая .m1-марка__м,
.m1-марка--боковая .m1-марка__разделитель,
.m1-марка--боковая .m1-марка__раздел {
  display: inline;
  color: var(--m1-белый);
  font: 500 15px Tektur,sans-serif;
  letter-spacing: normal;
  opacity: 1;
}
a.m1-марка--боковая {
  color: var(--m1-белый);
  text-decoration: none;
}
/* Имя в правом верхнем углу — вход в свой кабинет. */
.m1-кабинет-вход {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 4px 10px;
  color: inherit;
  text-decoration: none;
  border-radius: 999px;
}
.m1-кабинет-вход:hover {
  background: var(--m1-тихий-фон);
}

/* Мой кабинет: фотография вместо инициалов в обоих значках. */
.m1-аватар--крупный {
  width: 96px;
  height: 96px;
  font-size: 28px;
}
.m1-аватар--фото {
  color: transparent;
  background-size: cover;
  background-position: center;
}
.m1-кабинет__фото {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 4px 0 6px;
}
.m1-кабинет__фото-действия {
  display: grid;
  gap: 8px;
  justify-items: start;
}
.m1-кабинет__фото-действия small {
  color: var(--m1-тихий);
  font-size: 12px;
}
.m1-кабинет__фото-действия .m1-кнопка {
  cursor: pointer;
}
/* Боковая карточка «Доступ». В системе у карточки нет своих полей — их
   задаёт каждый её вид, и без этого содержимое лежало вплотную к рамке. */
.m1-кабинет-доступ {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 23px;
}
.m1-кабинет-доступ h2 {
  margin: 0;
  font-size: 19px;
}
/* В узкой колонке три поля в ряд не читаются — ставим их столбиком. */
.m1-кабинет-доступ .m1-метаданные {
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 16px;
}
.m1-кабинет-доступ p {
  margin: 0;
  color: var(--m1-тихий);
  font-size: 13px;
  line-height: 1.5;
}
.m1-кабинет-доступ .m1-действия {
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}
/* Сетка двух колонок: в пакете описан только модификатор, а сам класс —
   нет, и рядом стоящая карточка уезжала под форму. */
.m1-две-колонки {
  display: grid;
  gap: 18px;
}
.m1-аватар--крупный {
  flex: none;
}
.m1-кабинет-доступ h2,
.m1-кабинет h2 {
  margin: 0;
}

/* Выход рядом с именем: заходить ради него в кабинет неудобно. */
.m1-выход {
  height: 34px;
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
  white-space: nowrap;
}
@media (max-width:620px) {
  .m1-кабинет-вход .m1-контекст { display: none; }
  .m1-кабинет-вход { padding: 4px; }
}

/* Свой ответ на карточке вопроса: отдельный блок внизу, чтобы не путался с
   чужими ответами и с итогом, который сводит администратор. */
.m1-мой-ответ {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 18px;
  background: var(--m1-тихий-фон);
  border: 1px solid var(--m1-линия);
  border-radius: var(--m1-радиус);
}
.m1-мой-ответ p {
  margin: 0;
}
.m1-мой-ответ small {
  color: var(--m1-тихий);
  font-size: 12px;
}
.m1-мой-ответ__форма {
  display: grid;
  gap: 10px;
}
.m1-мой-ответ__форма .m1-действия {
  justify-content: flex-end;
}
.m1-мой-ответ__отказ {
  color: var(--m1-риск);
  font-size: 13px;
}

/* Карточка держится справа, пока листаешь список. Раньше она стояла в начале
   колонки: спустившись к сороковому вопросу и нажав его, человек видел пустое
   место, а карточка открывалась где-то вверху. Длинная карточка прокручивается
   внутри себя, а не тянет за собой страницу. */
.m1-мастер-деталь > .m1-деталь,
.m1-мастер-деталь > .m1-пустое-состояние {
  position: sticky;
  top: 16px;
  align-self: start;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
@media (max-width:1180px) {
  .m1-мастер-деталь > .m1-деталь,
  .m1-мастер-деталь > .m1-пустое-состояние {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

/* Текст вопроса занимает всю карточку. В пакете заголовок был обрезан по
   780 px под короткие демо-вопросы, а настоящие длиннее — они переносились
   в узкую колонку, оставляя половину карточки пустой. */
.m1-деталь h2 {
  max-width: none;
}
.m1-деталь__пояснение {
  max-width: none;
}

/* Взгляд участника: админские кнопки прячутся вместе с меню — человек без
   прав не переводит вопросы в задачи и не правит набор. */
/* Взгляд участника: экраны те же, что у администратора, скрыты только его
   возможности — перевод вопроса в задачу, правка набора, сведение ответов,
   выгрузки, приглашения и напоминания. Визуально система одна. */
body.m1-как-участник .m1-панель-перехода-в-задачу,
body.m1-как-участник .m1-меню-действий,
body.m1-как-участник .m1-право-правки,
body.m1-как-участник [data-деталь-для] .m1-панель-решения,
body.m1-как-участник .m1-свой-итог,
body.m1-как-участник [data-выгрузка],
body.m1-как-участник [data-действие-вопроса],
body.m1-как-участник [href="#question-create"],
body.m1-как-участник [href="#invite-person"],
body.m1-как-участник [href="#reminder"],
body.m1-как-участник [href$="deadline-extend"],
body.m1-как-участник .m1-срок-направления,
body.m1-как-участник .m1-выбрать-итогом,
body.m1-как-участник .m1-заголовок-экрана [href="#matrix"],
body.m1-как-участник .m1-заголовок-экрана [href="#question-management"],
body.m1-как-участник .m1-заголовок-экрана [href="#exports"],
body.m1-как-участник .m1-заголовок-экрана [href="#people"],
body.m1-как-участник .m1-заголовок-экрана [href="#invitations"],
body.m1-как-участник .m1-заголовок-экрана [href$="decisions"] {
  display: none;
}
.m1-роль-вид {
  height: 34px;
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
  white-space: nowrap;
}
@media (max-width:860px) {
  .m1-роль-вид { display: none; }
}

/* Правка формулировки прямо в карточке вопроса. */
.m1-правка-текста {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}
.m1-правка-текста .m1-действия {
  justify-content: flex-end;
}

/* Полоса мини-диаграммы считается от области шкалы, а не от всей строки:
   иначе задача, начатая в середине, вылезала за правый край карточки на
   сто с лишним пикселей. */
.m1-мини-гант__строка i {
  position: relative;
  grid-column: 2 / -1;
  justify-self: start;
  left: auto;
  margin-left: var(--m1-начало);
  max-width: calc(100% - var(--m1-начало));
}
/* Марка на экране 404 стоит в колонке пустого состояния: без ограничения
   ширины она растягивала карточку и выходила за нее. */
.m1-страница-ошибки .m1-марка {
  max-width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

/* Курсива в системе нет. Пилюли и счётчики размечены тегами «i» и «em» —
   браузер рисует их наклонными, и «6 вопросов» на карте выбивались из всего
   остального текста (правка 23.08.2026). */
em,
i {
  font-style: normal;
}

/* Плитки-ссылки: наведение было почти незаметным — фон светлел на два тона,
   и плитка не читалась как нажимаемая, хотя нажимается вся её площадь
   (просьба владельца 24.08.2026). Теперь при наведении плитка обводится
   цветом действия, левая полоса становится заметнее, число синеет. */
a.m1-метрика:hover {
  background: var(--m1-цвет-dfeef3);
  border-color: var(--m1-действие);
  transform: translateY(-2px);
}
a.m1-метрика:hover span {
  color: var(--m1-текст);
}
a.m1-метрика:before {
  transition: width .16s ease,background-color .16s ease;
}
a.m1-метрика:hover:before {
  width: 5px;
  background: var(--m1-действие);
}

/* Полоса плиток в кабинете участника: их четыре, а сетка держала пять
   колонок — пятая оставалась пустой, и полоса обрывалась, не доходя до
   правого края. Воздух над полосой и под ней доведён до бокового поля
   экрана: ряд стоял вплотную к приветствию и к карточкам под ним. */
[data-сводка-участника]>.m1-метрики {
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 18px 12px;
  margin: 24px 0;
}
[data-сводка-участника]>.m1-дашборд-сетка {
  gap: 18px;
}
[data-сводка-участника]>.m1-дашборд-сетка+.m1-дашборд-сетка {
  margin-top: 18px;
}
@media (max-width:1180px) {
  [data-сводка-участника]>.m1-метрики {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}