/* Стили панели. Живут отдельным файлом, а не внутри страницы (тикет 36).

   Шестнадцать килобайт на каждой странице — половина её веса, и вес этот
   дорогой: замер 06.09.2026 показал, что по HTTP/2 до машины Олега
   доезжает около 14,4 килобайта, а дальше соединение висит до таймаута.
   Раздел настроек в этот габарит не влезал даже сжатым. Отдельным файлом
   стили скачиваются один раз и дальше берутся из кеша браузера, а каждая
   страница худеет на треть.

   Цвет заведён в два яруса. Внизу — примитивы, названные по оттенку.
   Наверху — роли: фон страницы, поверхность карточки, основной текст,
   второстепенный, кромка. В разметке встречаются только роли, поэтому
   тёмная тема — это переназначение десятка ролей, а не обход всех правил
   в поисках «где тут был серый».

   Палитра — «бумага и чернила» (решение Олега 06.09.2026): тёплый белый
   фон, графитовый текст, один спокойный сине-стальной акцент. Прежняя была
   холодной, с чёрным меню слева и индиговой кнопкой; в панели, открытой
   на весь день, тёмная колонка тянет взгляд на себя, а работа идёт справа.
   Здесь тяжёлых плоскостей нет вовсе: разделяют не заливки, а тонкие
   линии и воздух. Цвет остался ровно там, где несёт смысл, — ждёт, тревога,
   готово, — и в каждой такой паре он сопровождает слово, а не заменяет его. */
:root {
  /* Чернила: тёплый серый ряд от бумаги до графита. */
  --ink-50:  #fbfaf8;
  --ink-100: #f5f3f0;
  --ink-150: #efece7;
  --ink-200: #e8e5e0;
  --ink-300: #d5d1cb;
  --ink-400: #a9a49c;
  --ink-600: #64696f;
  --ink-700: #474c53;
  --ink-800: #2b3037;
  --ink-900: #1c1f24;
  --ink-950: #12151a;

  /* Сине-стальной: единственный акцент. */
  --steel-100: #e4edf6;
  --steel-200: #c3d8ea;
  --steel-300: #8fb4d4;
  --steel-500: #4a7ba8;
  --steel-600: #2f5d8a;
  --steel-700: #23496e;

  /* Смысловые: охра ждёт, кирпич тревожит, хвоя подтверждает. */
  --ochre-100: #f8efdc;
  --ochre-300: #e0b45e;
  --ochre-700: #8a5f0a;
  --brick-100: #f9e9e5;
  --brick-300: #eb9d90;
  --brick-700: #a33a2e;
  --moss-100:  #e3f0e7;
  --moss-300:  #7cc196;
  --moss-700:  #2c6b4a;

  color-scheme: light dark;

  /* Роли */
  --bg: var(--ink-50);
  --surface: #ffffff;
  --surface-sunk: var(--ink-100);
  --ink: var(--ink-900);
  --ink-soft: var(--ink-600);
  --line: var(--ink-200);
  --line-strong: var(--ink-300);
  /* Кромка того, что человек трогает: поля, кнопки, точки полосы.
     Отдельно от `--line-strong` потому, что у неё есть замеряемое
     требование — три к одному против своей подложки, — а у линии,
     разделяющей строки таблицы, его нет. Замер 06.09.2026: прежняя
     кромка полей давала 1,5, то есть поле на белом почти не читалось. */
  --field: #8b867e;
  --accent: var(--steel-600);
  --accent-hover: var(--steel-700);
  --accent-soft: var(--steel-100);
  --accent-ink: #ffffff;

  /* Меню слева светлое, как и всё остальное: отделяет его линия, а не
     заливка. Тёмная колонка на светлой странице читается как главное,
     а главное здесь — работа справа. */
  --side-bg: var(--ink-100);
  --side-ink: var(--ink-700);
  --side-ink-strong: var(--ink-900);
  --side-hover: var(--ink-150);
  --side-mark: var(--accent);
  --side-quiet: var(--ink-600);

  --wait: var(--ochre-700);
  --wait-soft: var(--ochre-100);
  --wait-ink: #ffffff;
  --alarm: var(--brick-700);
  --alarm-soft: var(--brick-100);
  --good: var(--moss-700);
  --good-soft: var(--moss-100);

  /* Тень одна и почти незаметная: лист бумаги лежит на столе, а не парит. */
  --shadow: 0 1px 2px rgba(28, 31, 36, .05);
  --shadow-lift: 0 4px 16px rgba(28, 31, 36, .10);
  --radius: 10px;
  --radius-sm: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --surface: #1c1f25;
    --surface-sunk: #191c21;
    --ink: #ecebe8;
    --ink-soft: #a7a49e;
    --line: #2b2f36;
    --line-strong: #3b4048;
    --field: #707885;
    --accent: var(--steel-300);
    --accent-hover: var(--steel-200);
    --accent-soft: rgba(143, 180, 212, .14);
    --accent-ink: #14161a;

    --side-bg: #191c21;
    --side-ink: #b6b3ad;
    --side-ink-strong: #ecebe8;
    --side-hover: #22262c;
    --side-quiet: #96938c;

    --wait: var(--ochre-300);
    --wait-soft: rgba(224, 180, 94, .14);
    --wait-ink: #14161a;
    --alarm: var(--brick-300);
    --alarm-soft: rgba(235, 157, 144, .13);
    --good: var(--moss-300);
    --good-soft: rgba(124, 193, 150, .13);

    --shadow: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow-lift: 0 8px 24px rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; }
/* Спрятанное атрибутом обязано прятаться. Правило браузера — `[hidden]`,
   и любой наш класс с `display` его перебивает: метка «текст изменён»
   из-за этого висела на каждой карточке с самого открытия страницы. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.6 -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* --- Каркас: меню слева, работа справа ------------------------------- */
.shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; }

.side {
  background: var(--side-bg); color: var(--side-ink); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
  padding: 20px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand {
  color: var(--side-ink-strong); font-weight: 600; letter-spacing: .12em;
  font-size: 12px; text-transform: uppercase; padding: 4px 12px 22px;
}
.brand span { display: block; letter-spacing: 0; text-transform: none;
              font-size: 12px; font-weight: 400; color: var(--side-quiet); margin-top: 4px; }
.side a {
  color: var(--side-ink); text-decoration: none; border-radius: var(--radius-sm);
  padding: 8px 12px; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 14px; border-left: 3px solid transparent;
}
.side a:hover { background: var(--side-hover); color: var(--side-ink-strong); }
.side a[aria-current] {
  background: var(--surface); color: var(--side-ink-strong);
  border-left-color: var(--side-mark); font-weight: 600; box-shadow: var(--shadow);
}
.side .count {
  background: var(--wait); color: var(--wait-ink); border-radius: 999px;
  font-size: 12px; font-weight: 600; padding: 1px 8px; min-width: 22px; text-align: center;
}
.side .exit { margin-top: auto; color: var(--side-quiet); font-size: 13px; }

/* --- Рабочее поле ----------------------------------------------------- */
/* `min-width: 0` — не украшение: рабочее поле лежит ячейкой сетки, а ячейка
   по умолчанию не ýже своего содержимого. Широкая таблица или лента колонок
   раздвигала из-за этого всю страницу, и на узком экране горизонтально
   ездило тело целиком вместо одной таблицы. */
main { padding: 32px 36px 64px; max-width: 1100px; min-width: 0; }
h1 { font-size: 24px; line-height: 1.2; margin: 0 0 14px; letter-spacing: -.015em;
     font-weight: 600; }
h2 { font-size: 12px; line-height: 1.25; margin: 32px 0 10px; letter-spacing: .07em;
     text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
/* Вводная фраза раздела: чем он управляет и что тут делают. */
.lede { max-width: 68ch; color: var(--ink-soft); margin: 0 0 22px; }
.empty { color: var(--ink-soft); max-width: 68ch; }

/* --- Карточка --------------------------------------------------------- */
.row {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow);
}
.row.waiting { border-left: 3px solid var(--wait); }
.row.approved { border-left: 3px solid var(--good); background: var(--surface-sunk); }
.meta { font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }
.who { font-size: 12px; color: var(--ink-soft); }

/* Метка состояния. Смысл несёт слово, цвет только помогает его найти. */
.tag { display: inline-block; border-radius: 999px; padding: 2px 10px;
       font-size: 12px; font-weight: 600; }
.tag.wait { background: var(--wait-soft); color: var(--wait); }
.tag.good { background: var(--good-soft); color: var(--good); }
/* Канал и признак правки — не состояние, а справка: цвет спокойный,
   чтобы не спорить с меткой «ждёт одобрения». */
.tag.chan { background: var(--surface-sunk); color: var(--ink-soft);
            border: 1px solid var(--line); font-weight: 500; }
.tag.edited { background: var(--wait-soft); color: var(--wait); }

/* Опора и инфоповод: то, на чём стоит текст. Утоплено в поверхность —
   это справка для проверки, а не сам текст. */
.ground {
  background: var(--surface-sunk); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 13px; margin-bottom: 12px;
  font-size: 13.5px; max-width: 76ch;
}
.ground > div + div { margin-top: 4px; }
.ground .why { color: var(--ink-soft); }

/* Главная отметка карточки: она решает судьбу сообщения, и найтись
   на экране должна раньше, чем текст. */
label.pick.approve {
  align-items: center; gap: 10px; font-weight: 600; margin: 0 0 10px;
  padding: 8px 12px; border: 1px solid var(--field);
  border-radius: var(--radius-sm); background: var(--surface-sunk);
  cursor: pointer; width: fit-content;
}
label.pick.approve:hover { border-color: var(--accent); color: var(--accent); }
label.pick.approve input { width: 17px; height: 17px; accent-color: var(--accent); }

/* Строка партнёра на доске и полоса из шести касаний. */
.board { width: 100%; border-collapse: collapse; font-size: 14px; }
.board th {
  text-align: left; font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600; padding: 0 12px 8px 0; white-space: nowrap;
}
.board td { padding: 11px 12px 11px 0; border-top: 1px solid var(--line);
            vertical-align: baseline; }
.board tr:hover td { background: var(--surface-sunk); }
.board .name { font-weight: 600; }
.board .lead { color: var(--ink-soft); font-weight: 400; font-size: 13px; }
.dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.dots i {
  width: 9px; height: 9px; border-radius: 50%; display: block;
  border: 1px solid var(--field); background: var(--surface);
}
.dots i.done { background: var(--accent); border-color: var(--accent); }
.dots i.now { background: var(--wait); border-color: var(--wait); }
.dots i.lost { background: var(--alarm); border-color: var(--alarm); }
.board .quiet { color: var(--ink-soft); white-space: nowrap; }
/* Заголовок-ссылка: колонка, по которой можно упорядочить. Подчёркивание
   снято — в шапке таблицы оно читается как разделитель, а не как ссылка;
   что это ссылка, говорит наведение и стрелка выбранной колонки. */
.board th a { color: inherit; text-decoration: none; }
.board th a:hover { color: var(--accent); }
.board th[aria-sort] a { color: var(--accent); }
.board .alarm { color: var(--alarm); font-weight: 600; }
.board-scroll { overflow-x: auto; }
/* Пояснение к цветам полосы: точка без подписи — загадка. */
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 18px;
          font-size: 13px; color: var(--ink-soft); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* --- Поля и кнопки ----------------------------------------------------- */
textarea, input[type=text], input[type=number], input[type=password], select {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--field); border-radius: var(--radius-sm); padding: 9px 11px;
}
textarea { width: 100%; min-height: 96px; line-height: 1.5; resize: vertical; }
textarea:focus, input:focus, select:focus { border-color: var(--accent); }
.subject { width: 100%; font-weight: 600; margin-bottom: 8px; }
button {
  font: inherit; font-weight: 500; padding: 9px 16px; cursor: pointer;
  border-radius: var(--radius-sm); border: 1px solid var(--field);
  background: var(--surface); color: var(--ink);
  transition: background .12s ease, border-color .12s ease;
}
button:hover { border-color: var(--ink-soft); background: var(--surface-sunk); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.stop { background: var(--alarm); border-color: var(--alarm); color: #ffffff; }
button.stop:hover { filter: brightness(.92); }
.actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.actions form { margin: 0; }

/* Убрано с глаз, но живо для браузера: `display: none` снимает кнопку
   с неявной отправки формы, и Enter в поле снова уходил бы не туда. */
.offscreen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); border: 0;
}

.bar {
  position: sticky; bottom: 12px; margin-top: 16px; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); display: flex; gap: 14px; align-items: center;
  flex-wrap: wrap;
}

/* --- Полосы сообщений --------------------------------------------------- */
.trouble, .note {
  border-radius: var(--radius-sm); padding: 12px 14px; margin: 0 0 16px;
  border: 1px solid; max-width: 76ch;
}
.trouble { background: var(--alarm-soft); border-color: var(--alarm); color: var(--ink); }
.note { background: var(--good-soft); border-color: var(--good); color: var(--ink); }

label.pick { display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; }
blockquote { margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--line-strong);
             background: var(--surface-sunk); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
             font-style: italic; }

/* --- Рубильник отправки -------------------------------------------------- */
.switch {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 13px 16px; margin-bottom: 18px; border-radius: var(--radius);
  flex-wrap: wrap; border: 1px solid;
}
.switch > span { flex: 1 1 340px; }
.switch.live { background: var(--alarm-soft); border-color: var(--alarm); }
.switch.stopped { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }

/* --- Настройка ------------------------------------------------------------ */
.setting {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 12px; scroll-margin-top: 20px; box-shadow: var(--shadow);
}
.setting .title { font-weight: 600; display: flex; gap: 8px; align-items: baseline;
                  flex-wrap: wrap; }
.setting .desc { max-width: 68ch; color: var(--ink-soft); font-size: 14px; margin: 6px 0 10px; }
.setting .hint { font-size: 13px; color: var(--ink-soft); background: var(--surface-sunk);
                 border-radius: var(--radius-sm); padding: 7px 11px; margin-bottom: 12px;
                 max-width: 68ch; }
.setting form { display: flex; gap: 10px; align-items: start; flex-wrap: wrap; }
.setting input[type=text] { min-width: 260px; }
.setting textarea { min-height: 72px; width: 460px; max-width: 100%; }
.setting.refused { border-color: var(--alarm); box-shadow: 0 0 0 3px var(--alarm-soft); }
/* Настройка с закрытым списком: галочки в строку, места маршрута — тоже.
   Галочка и её слово — одна цель для попадания, поэтому оборачиваются
   ярлыком целиком, а не ставятся рядом. */
.setting .ticks, .setting .places { display: flex; flex-wrap: wrap; gap: 8px 16px;
                                    align-items: center; }
.setting .ticks label, .setting .places label { display: inline-flex; gap: 6px;
                                                align-items: center; font-size: 14px; }
.setting .places select { min-width: 150px; }
/* Шкала силы: вид материала и его вес — колонкой, чтобы пары читались
   парами, а не сплошной строкой из десяти полей. */
.setting .pairs { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.setting .pairs label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.setting .pairs input[type=number] { width: 72px; }
.setting .tuned { font-size: 12px; font-weight: 600; color: var(--wait);
                  background: var(--wait-soft); border-radius: 999px; padding: 1px 8px; }

/* Оглавление разделов — чипы: попасть в нужный раздел одним движением. */
.map { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.map a {
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; text-decoration: none; color: var(--ink);
  display: inline-flex; gap: 7px; align-items: baseline;
}
.map a:hover { border-color: var(--accent); color: var(--accent); }
/* Раздел, открытый сейчас: без отметки человек не понимает, где стоит,
   а карта из десяти одинаковых чипов ничего не говорит. */
.map a[aria-current] { background: var(--accent); border-color: var(--accent);
                       color: var(--accent-ink); }
.map a[aria-current] .who { color: var(--accent-ink); opacity: .8; }
.map a .who { font-weight: 600; }

/* Текст только для читалки экрана: число в бейдже само по себе молчит. */
.aloud { position: absolute; width: 1px; height: 1px; overflow: hidden;
         clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { position: static; display: inline-block; margin: 12px; }

/* --- Обзор: числа, воронка и канбан (тикет 38) ---------------------------- */

/* Полоса чисел. Каждое — «сколько людей», и подпись под ним говорит,
   каких именно: число без подписи в панели читается как загадка. */
.tiles { display: grid; gap: 12px; margin-bottom: 26px;
         grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
}
.tile b { display: block; font-size: 27px; line-height: 1.1; font-weight: 600;
          letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile span { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 5px; }
.tile.mark-wait b { color: var(--wait); }
.tile.mark-alarm b { color: var(--alarm); }
.tile.mark-good b { color: var(--good); }

/* Воронка: сколько человек дошло до каждого касания. Длина полосы — доля
   от самого многочисленного шага, поэтому падение видно глазом, а число
   стоит рядом: полоса без числа отвечает «примерно», а спрашивают точно. */
.funnel { margin: 0 0 26px; }
.funnel .step { display: grid; grid-template-columns: 92px 1fr 92px; gap: 12px;
                align-items: center; padding: 4px 0; font-size: 14px; }
/* Дорожка и заливка объявлены блоками нарочно: ширина в процентах
   к строчному элементу не применяется вовсе, и полоса стояла бы пустой
   при любом числе. */
.funnel .step .track { display: block; background: var(--surface-sunk); border-radius: 999px;
                       height: 20px; overflow: hidden; border: 1px solid var(--line); }
.funnel .step .fill { display: block; background: var(--accent); height: 100%;
                      min-width: 2px; border-radius: 999px; }
.funnel .step .num { color: var(--ink-soft); font-variant-numeric: tabular-nums;
                     white-space: nowrap; text-align: right; }
.funnel .step .name { color: var(--ink); }

/* Канбан: колонка на этап, карточка на человека. Прокручивается сам,
   а не тянет за собой страницу — горизонтальная прокрутка всего окна
   ломает чтение всего остального. */
/* Колонки делят ширину поровну и умещаются все разом: уехавшая за край
   колонка «Ответили» — это исход пилота, до которого человек не доскроллил.
   Прокрутка остаётся только на узком экране, где шесть колонок не влезают
   физически. */
.kanban { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px;
          margin-bottom: 22px; }
.kanban.outcomes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kanban .col {
  background: var(--surface-sunk); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px; min-width: 0;
}
.kanban .col > h3 {
  margin: 0 0 8px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600; display: flex; justify-content: space-between;
  gap: 8px; align-items: baseline;
}
.kanban .col > h3 b { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.kanban .col.done > h3 b { color: var(--good); }
.kanban .col.gone > h3 b { color: var(--alarm); }
.kanban .card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 10px; margin-bottom: 7px; font-size: 13px; box-shadow: var(--shadow);
}
.kanban .card .name { font-weight: 600; display: block; margin-bottom: 3px;
                      overflow-wrap: anywhere; }
.kanban .card .quiet { color: var(--ink-soft); font-size: 12px; }
.kanban .card.alarm { border-left: 3px solid var(--alarm); }
.kanban .col .none { color: var(--ink-soft); font-size: 12px; padding: 4px 2px; }
.kanban .more { font-size: 12px; color: var(--ink-soft); padding: 2px; }

/* Табличка «переходы по касаниям» и ей подобные: два-три столбца чисел,
   которые читают глазами построчно. */
.plain { border-collapse: collapse; font-size: 14px; margin-bottom: 22px; min-width: 260px; }
.plain th { text-align: left; font-weight: 600; font-size: 12px; letter-spacing: .05em;
            text-transform: uppercase; color: var(--ink-soft); padding: 0 18px 6px 0; }
.plain td { padding: 6px 18px 6px 0; border-top: 1px solid var(--line);
            font-variant-numeric: tabular-nums; }
.plain td:first-child { font-variant-numeric: normal; }

/* --- Вход ----------------------------------------------------------------- */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.gate .card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); padding: 28px; width: 100%; max-width: 380px;
}
.gate label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.gate input { width: 100%; margin-bottom: 14px; }
.gate button { width: 100%; }

/* --- Узкий экран: меню становится лентой сверху --------------------------- */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap;
          align-items: center; gap: 4px 8px; padding: 12px;
          border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0 10px 0 4px; }
  .brand span { display: none; }
  .side a { border-left: 0; border-bottom: 3px solid transparent; padding: 7px 10px; }
  .side a[aria-current] { border-left: 0; border-bottom-color: var(--side-mark);
                          box-shadow: none; }
  .side .exit { margin-top: 0; }
  main { padding: 20px 16px 48px; }
  /* Любое поле ввода на узком экране — во всю ширину и не шире.
     Правило общее, а не по разделам: поле с заданной шириной в знаках
     (стоп-лист просит шестьдесят) раздвигало страницу вдвое, и найти
     это можно было только замером каждой страницы по очереди. */
  input[type=text], input[type=number], input[type=password], select, textarea {
    width: 100%; min-width: 0; max-width: 100%;
  }
  .funnel .step { grid-template-columns: 76px 1fr 76px; gap: 8px; font-size: 13px; }
  .kanban, .kanban.outcomes { display: flex; overflow-x: auto; padding-bottom: 8px; }
  .kanban .col { flex: 0 0 180px; }
}

/* Движение — только там, где оно объясняет, и только если человек его
   не запретил. Панель ничего не анимирует сама, но переход на кнопке
   и он лишний для того, кто просил покоя. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Имя партнёра, ведущее в его карточку у заказчика. Выглядит как имя,
   а не как ссылка: подчёркивание появляется под курсором — иначе каждая
   строка доски начиналась бы синей чертой и тянула взгляд на себя. */
.who-link { color: inherit; font-weight: 600; text-decoration: none; }
.who-link:hover, .who-link:focus { text-decoration: underline; }